/* ============================================================
   Shopperstars International AG — „Der Sternatlas"
   Eigenständiges Design: zentrierte Buch-/Atlas-Komposition,
   Tafeln als Kapitel, Ornament-Linien, Konstellations-Canvas.
   Palette: Creme-Papier · Tiefgrün · Gold
   Type: Cormorant Garamond (Display) · Jost (Body)
   ============================================================ */

/* ---------- Schriften: lokal gehostet (kein Google-CDN, DSGVO-sauber) ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/cg-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cg-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cg-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cg-500i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/cg-600i.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/jost-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jost-500.woff2') format('woff2'); }

:root {
  --papier:   #f5efdf;
  --papier-2: #efe7d0;
  --gruen:      #1e4634;
  --gruen-tief: #142f23;
  --tinte:      #21382d;
  --tinte-soft: rgba(33, 56, 45, 0.72);
  --tinte-zart: rgba(33, 56, 45, 0.45);
  --gold:      #c9992e;
  --gold-hell: #e0b34a;
  --gold-tief: #8f6a14;
  --linie: rgba(33, 56, 45, 0.16);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;

  --breite: 1060px;
  --rand: clamp(20px, 5vw, 60px);
  --weich: cubic-bezier(0.25, 1, 0.4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--papier);
  color: var(--tinte);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--gold); color: var(--papier); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============ Entree ============ */
.entree {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--gruen-tief);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity 0.9s ease 0.15s, visibility 0.9s;
}
.entree.fort { opacity: 0; visibility: hidden; }
.entree__star { animation: sternschlag 1.6s var(--weich) infinite; }
@keyframes sternschlag {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.78) rotate(22deg); opacity: 0.75; }
}
.entree__word {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  color: #f3eddb; letter-spacing: 0.34em; text-transform: uppercase;
  padding-left: 0.34em; /* Sperrung optisch mitteln */
  animation: entreewort 2.4s var(--weich) both;
}
@keyframes entreewort {
  from { letter-spacing: 0.6em; opacity: 0; }
  to   { letter-spacing: 0.34em; opacity: 1; }
}

/* ============ Konstellations-Canvas ============ */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
@media (pointer: coarse) { .sky { display: none; } }

/* ============ Kopf ============ */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px var(--rand);
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.kopf.fest {
  background: rgba(245, 239, 223, 0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--linie);
  padding-top: 12px; padding-bottom: 12px;
}
.marke {
  justify-self: start;
  display: inline-flex; align-items: flex-start; gap: 3px;
  font-family: var(--serif); font-weight: 600; font-size: 2.3rem;
  letter-spacing: 0.02em; text-decoration: none; color: var(--gruen);
  line-height: 1;
}
.kopf__nav {
  display: flex; align-items: center; gap: 18px;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
}
.kopf__nav a { text-decoration: none; color: var(--tinte-soft); transition: color 0.25s; }
.kopf__nav a:hover { color: var(--gold-tief); }
.kopf__sep { color: var(--gold); font-size: 0.6rem; }
.kopf__menu {
  justify-self: end; display: none;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gruen);
}
.kopf > :last-child { justify-self: end; }

.vorhang {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(245, 239, 223, 0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  font-family: var(--serif); font-size: 1.9rem; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.vorhang.offen { opacity: 1; pointer-events: auto; }
.vorhang a { text-decoration: none; color: var(--gruen); }

/* ============ Ornament ============ */
.vignette-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto;
}
.vignette-rule span { display: block; width: clamp(48px, 9vw, 110px); height: 1px; background: var(--gold); opacity: 0.55; }

.kicker {
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-tief);
}

/* ============ Frontispiz ============ */
.frontispiz {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: 120px var(--rand) 90px;
}
.frontispiz__media { position: absolute; top: -8%; left: 0; right: 0; height: 116%; z-index: -1; }
.frontispiz__media video { width: 100%; height: 100%; object-fit: cover; }
.frontispiz__schleier {
  position: absolute; inset: 0;
  background:
    radial-gradient(75% 62% at 50% 46%, rgba(245,239,223,0.92) 0%, rgba(245,239,223,0.62) 52%, rgba(245,239,223,0.08) 100%),
    linear-gradient(to bottom, rgba(245,239,223,0.35), rgba(245,239,223,0.9) 96%);
}
.frontispiz__satz { max-width: 46rem; display: grid; justify-items: center; gap: 20px; }
.frontispiz__titel {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.5rem, 6.4vw, 4.7rem);
  line-height: 1.08; letter-spacing: 0.005em;
  color: var(--gruen);
}
.frontispiz__titel .zeile { display: block; }
.zeile--gold em { font-style: italic; color: var(--gold-tief); }
.frontispiz__geleit { max-width: 33rem; font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--tinte-soft); }
.frontispiz__handlung { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.knopf {
  display: inline-block; text-decoration: none;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--papier); background: var(--gruen);
  padding: 1em 2.1em; border-radius: 2px;
  transition: background 0.3s, transform 0.3s var(--weich), box-shadow 0.3s;
}
.knopf:hover { background: var(--gruen-tief); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(20,47,35,0.6); }
.knopf--still { background: transparent; color: var(--gruen); box-shadow: inset 0 0 0 1px var(--linie); }
.knopf--still:hover { background: rgba(255,255,255,0.5); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-tief); }
.knopf--breit { width: 100%; }

.wink { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--tinte-zart); font-style: italic; font-family: var(--serif); font-size: 1rem; }

.frontispiz__weiter {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  text-decoration: none; color: var(--gold-tief); font-size: 1.2rem;
  animation: nicken 2.4s ease-in-out infinite;
}
@keyframes nicken { 0%,100% { transform: translate(-50%, 0); } 55% { transform: translate(-50%, 8px); } }

/* Entree-Choreografie der Frontispiz-Zeilen */
.js .zeile { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--weich), transform 0.9s var(--weich); }
.js .auftakt .zeile { opacity: 1; transform: none; }
.auftakt .zeile[data-z="1"] { transition-delay: 0.1s; }
.auftakt .zeile[data-z="2"] { transition-delay: 0.22s; }
.auftakt .zeile[data-z="3"] { transition-delay: 0.34s; }
.auftakt .zeile[data-z="4"] { transition-delay: 0.48s; }
.auftakt .zeile[data-z="5"] { transition-delay: 0.66s; }
.auftakt .zeile[data-z="6"] { transition-delay: 0.8s; }
.auftakt .zeile[data-z="7"] { transition-delay: 1.05s; }

/* ============ Tafeln ============ */
.tafel { padding: clamp(80px, 12vw, 150px) var(--rand); max-width: var(--breite); margin: 0 auto; }
.tafel--weit { max-width: 1200px; }
.tafel__kopf { text-align: center; display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(48px, 7vw, 84px); }
.tafel__nr {
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-tief);
}
.tafel__titel {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.1; color: var(--gruen);
}

/* IO-Choreografie */
.js [data-io] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--weich), transform 1s var(--weich); }
.js [data-io].da { opacity: 1; transform: none; }

/* ============ Zeitachse ============ */
.zeit { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); text-align: center; }
.zeit__linie {
  position: absolute; top: 7px; left: 12%; right: 12%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 12px);
  opacity: 0.55;
}
.zeit__punkt { position: relative; padding-top: 34px; }
.zeit__stern { position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 1rem; line-height: 1; }
.zeit__jahr { font-family: var(--serif); font-weight: 600; font-size: 2.15rem; color: var(--gold-tief); font-variant-numeric: oldstyle-nums; }
.zeit__punkt h3 { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; color: var(--gruen); margin: 6px 0 8px; }
.zeit__punkt p { font-size: 1.1rem; color: var(--tinte-soft); max-width: 30ch; margin-inline: auto; }

.leitsatz { text-align: center; margin-top: clamp(56px, 8vw, 90px); }
.leitsatz p {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--gruen); line-height: 1.3;
}
.leitsatz cite {
  display: block; margin-top: 12px; font-style: normal; font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--tinte-zart);
}

/* ============ Nachtseite ============ */
.nacht {
  position: relative; min-height: 88svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--gruen-tief);
}
.nacht__bild { position: absolute; top: -8%; left: 0; right: 0; height: 116%; }
.nacht__bild img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.nacht__wort { position: relative; padding: 0 var(--rand); }
.nacht__zeile {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.25;
  color: #f3eddb; text-shadow: 0 2px 30px rgba(10, 26, 18, 0.8);
}
.nacht__zeile--gold em { font-style: italic; color: var(--gold-hell); }

/* ============ Kolumnen ============ */
.kolumnen { display: grid; grid-template-columns: repeat(3, 1fr); }
.kolumne { padding: 0 clamp(18px, 3vw, 40px); text-align: center; }
.kolumne + .kolumne { border-left: 1px solid var(--linie); }
.kolumne__stern { margin-bottom: 16px; }
.kolumne h3 { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; color: var(--gruen); margin-bottom: 12px; }
.kolumne p { font-size: 1.12rem; color: var(--tinte-soft); }
.kolumne a { color: var(--gold-tief); text-decoration: none; border-bottom: 1px solid rgba(143,106,20,0.4); }
.kolumne a:hover { border-bottom-color: var(--gold-tief); }

/* ============ Atem-Video ============ */
.atem { height: 62svh; overflow: hidden; }
.atem video { width: 100%; height: 100%; object-fit: cover; }

/* ============ Bahn (Schritt-Konstellation) ============ */
.bahn { position: relative; }
.bahn__linie { position: absolute; top: 0; left: 0; width: 100%; height: clamp(120px, 19vw, 190px); overflow: visible; }
.bahn__schritte {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 36px);
  padding-top: clamp(120px, 19vw, 190px);
  counter-reset: schritt;
}
.schritt { text-align: center; position: relative; }
.schritt__stern {
  display: inline-block; font-size: 1.7rem; line-height: 1; color: var(--tinte-zart);
  transform: scale(0.7); transition: color 0.6s, transform 0.6s var(--weich), text-shadow 0.6s;
  margin-bottom: 14px;
}
.schritt.zuendet .schritt__stern {
  color: var(--gold);
  transform: scale(1);
  text-shadow: 0 0 18px rgba(224, 179, 74, 0.75);
}
.schritt h3 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; color: var(--gruen); margin-bottom: 8px; }
.schritt h3::before {
  counter-increment: schritt;
  content: counter(schritt, upper-roman) " · ";
  color: var(--gold-tief);
  font-size: 0.9em;
}
.schritt p { font-size: 1.08rem; color: var(--tinte-soft); max-width: 30ch; margin-inline: auto; }

/* ============ Legende ============ */
.legende { background: var(--papier-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.legende__innen { max-width: var(--breite); margin: 0 auto; padding: clamp(44px, 6vw, 70px) var(--rand); text-align: center; }
.legende__reihe {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3.4vw, 44px); flex-wrap: wrap;
  margin-top: 22px;
}
.legende__reihe dt { font-family: var(--serif); font-weight: 600; font-size: 2.3rem; color: var(--gruen); font-variant-numeric: oldstyle-nums; }
.legende__reihe dd { font-size: 1.02rem; letter-spacing: 0.05em; color: var(--tinte-soft); }
.legende__stern { color: var(--gold); font-size: 1.05rem; }

/* ============ Einladung ============ */
.einladung { position: relative; overflow: hidden; padding: clamp(90px, 12vw, 160px) var(--rand); }
.einladung__sterne { position: absolute; top: -8%; right: -4%; width: 62%; height: 116%; opacity: 0.55; }
.einladung__sterne img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.karte { position: relative; max-width: 620px; margin: 0 auto; }
.karte__rahmen {
  background: rgba(245, 239, 223, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--gold);
  outline: 1px solid rgba(201, 153, 46, 0.35);
  outline-offset: 5px;
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
  display: grid; gap: 20px; justify-items: center;
}
.karte__titel { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3rem); color: var(--gruen); }
.karte__geleit { max-width: 38ch; color: var(--tinte-soft); font-size: 0.98rem; }

.karte__form { width: 100%; display: grid; gap: 14px; text-align: left; margin-top: 4px; }
.feld { display: grid; gap: 5px; }
.feld label { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tinte-zart); }
.feld input, .feld textarea {
  width: 100%; font-family: var(--sans); font-weight: 300; font-size: 1rem; color: var(--tinte);
  background: transparent; border: 0; border-bottom: 1px solid var(--linie);
  padding: 8px 2px; resize: vertical;
  transition: border-color 0.3s;
}
.feld input:focus, .feld textarea:focus { outline: none; border-bottom-color: var(--gold); }
.karte__hinweis { font-size: 0.85rem; color: var(--gold-tief); min-height: 1.2em; text-align: center; }

.karte__anschrift {
  font-style: normal; font-size: 0.85rem; line-height: 1.9; color: var(--tinte-soft);
  border-top: 1px solid var(--linie); padding-top: 18px; width: 100%;
}
.karte__anschrift a { color: var(--gruen); text-decoration: none; }
.karte__anschrift a:hover { color: var(--gold-tief); }

/* ============ Schluss ============ */
.schluss {
  background: var(--gruen-tief); color: rgba(243, 237, 219, 0.75);
  text-align: center; padding: clamp(40px, 6vw, 60px) var(--rand);
  display: grid; justify-items: center; gap: 10px;
}
.schluss__marke { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: #f3eddb; letter-spacing: 0.06em; }
.schluss__recht { display: flex; gap: 22px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.schluss__recht a { color: rgba(243, 237, 219, 0.65); text-decoration: none; }
.schluss__recht a:hover { color: var(--gold-hell); }
.schluss__jahr { font-size: 0.75rem; opacity: 0.55; }

/* ============ Responsive ============ */
@media (max-width: 880px) {
  .kopf__nav { display: none; }
  .kopf__menu { display: block; }
  .zeit { grid-template-columns: 1fr; gap: 40px; }
  .zeit__linie { display: none; }
  .kolumnen { grid-template-columns: 1fr; gap: 40px; }
  .kolumne + .kolumne { border-left: 0; border-top: 1px solid var(--linie); padding-top: 36px; }
  .bahn__linie { display: none; }
  .bahn__schritte { grid-template-columns: 1fr 1fr; padding-top: 0; gap: 36px 20px; }
  .einladung__sterne { width: 100%; opacity: 0.3; }
}
@media (max-width: 540px) {
  .bahn__schritte { grid-template-columns: 1fr; }
  .frontispiz__handlung { flex-direction: column; width: 100%; }
  .knopf { width: 100%; text-align: center; }
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js .zeile, .js [data-io] { opacity: 1 !important; transform: none !important; }
  .sky { display: none; }
}

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.prosa { max-width: 680px; margin: 0 auto; padding: 130px var(--rand) 90px; }
.prosa .tafel__kopf { margin-bottom: 44px; }
.prosa h2 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--gruen); margin: 36px 0 10px; }
.prosa h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--gruen); margin: 24px 0 8px; }
.prosa p, .prosa li { font-size: 0.97rem; color: var(--tinte-soft); margin-bottom: 10px; }
.prosa ul { padding-left: 20px; list-style: none; }
.prosa li::before { content: '\2726\00a0\00a0'; color: var(--gold); font-size: 0.7em; }
.prosa a { color: var(--gold-tief); text-decoration: none; border-bottom: 1px solid rgba(143,106,20,0.35); }
.prosa a:hover { border-bottom-color: var(--gold-tief); }
.prosa .stand { margin-top: 40px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-zart); }
.zurueck {
  display: inline-block; margin-bottom: 26px; text-decoration: none;
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-tief);
}