/* ==========================================================================
   Soulprint V3 – „Sternenflug“
   Gestaltungsvorgabe: docs/designvorgabe-soulprint-v3-sternenflug-2026.md

   Grundprinzip: Der statische Zustand (ohne JS, ohne WebGL, mit
   prefers-reduced-motion) ist der vollständige Endzustand. Animationen
   werden ausschließlich über JS-gesetzte Klassen (.anim-prep, .traces-pinned,
   .stage-pinned …) vorbereitet – kein Inhalt hängt an einer Animation.
   ========================================================================== */

:root {
  --kosmos: #050713;
  --indigo: #090D20;
  --mitternacht: #11172B;
  --formflaeche: #171D31;
  --papier: #F5F0E6;
  --text-hell: #F8F4EB;
  --text-sek: #C4C1CC;
  --text-dunkel: #171717;
  --gold-antik: #B8914D;
  --gold: #D3AD62;
  --gold-licht: #EFD596;
  --kobalt: #536C99;
  --fehler: #FFB3AA;
  --erfolg: #BFE7CB;
  --linie: rgba(226, 196, 132, .18);
  --rand: clamp(24px, 4.5vw, 72px);
  --display: "Newsreader", Georgia, serif;
  --ui: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.reduced-static { scroll-behavior: auto; }

body {
  background: var(--kosmos);
  color: var(--text-hell);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Komponentenregeln mit display dürfen das native hidden-Attribut nicht
   überstimmen. Verborgene Fehler- und Statuszeilen bleiben so wirklich weg. */
[hidden] { display: none !important; }

/* ---------- Dev-Banner ---------------------------------------------------- */
.dev-banner {
  background: #3a2f16;
  color: var(--gold-licht);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-align: center;
  padding: 6px 14px;
  position: relative;
  z-index: 60;
}

/* ---------- Navigation ---------------------------------------------------- */
.site-nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--rand);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-nav.nav-solid {
  position: fixed;
  background: rgba(5, 7, 19, .92);
  box-shadow: 0 1px 0 var(--linie);
  backdrop-filter: blur(6px);
}
.wordmark {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  color: var(--text-hell);
  text-decoration: none;
  letter-spacing: -.01em;
}
.wordmark-dot { color: var(--gold); }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--gold);
  color: var(--text-dunkel);
}
.btn-primary:hover { background: var(--gold-licht); }
.btn-secondary {
  background: rgba(23, 29, 49, .9);
  color: var(--text-hell);
  border: 1px solid var(--gold-antik);
}
.btn-secondary:hover { border-color: var(--gold); }
.btn-ghost {
  background: transparent;
  color: var(--text-sek);
  border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--text-hell); border-color: var(--linie); }
.btn:disabled { opacity: .55; cursor: progress; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(211, 173, 98, .28);
}

/* ---------- Eyebrow / Typografie ----------------------------------------- */
.eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.eyebrow-rule {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--gold);
  transform-origin: left center;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--text-hell);
}
h2 { font-size: clamp(38px, 5.4vw, 84px); line-height: 1.0; letter-spacing: -.02em; }
h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; }

.lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--text-sek);
  max-width: 620px;
}

/* ==========================================================================
   Szene 1 – Hero / Sternenflug
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--kosmos);
}

/* E1: Raumplatte – startet leicht vergrößert, öffnet sich auf scale(1) */
.hero-sky {
  position: absolute;
  inset: -2.5%;
  background: var(--kosmos) url("images/hero-milchstrasse-4k.webp") 62% 46% / cover no-repeat;
  transform: scale(1);
  will-change: transform;
}
/* 4K nur fuer echte 4K-Schirme. Bis 1920 reicht die 1920er Datei: Sie ist ein
   Drittel so gross und auf diesen Schirmen nicht vom Original zu unterscheiden. */
@media (max-width: 1920px) {
  .hero-sky { background-image: url("images/hero-milchstrasse-1920.webp"); }
}
@media (max-width: 767px) {
  .hero-sky {
    inset: 0;
    background-image: url("images/celestial-hero-portrait.webp");
    background-position: 74% 30%;
  }
}

/* Warmer Lichtpunkt bei ~62 % x / 44 % y (Desktop) */
.hero-light {
  position: absolute;
  left: 62%;
  top: 44%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 213, 150, .95) 0%, rgba(239, 213, 150, .18) 45%, rgba(239, 213, 150, 0) 70%);
  box-shadow: 0 0 90px 30px rgba(239, 213, 150, .18);
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero-light { left: 70%; top: 30%; opacity: .7; }
}

/* Kontrastfläche hinter dem Text: links .90, Mitte .58, rechts .08 */
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5, 7, 19, .90) 0%, rgba(5, 7, 19, .58) 46%, rgba(5, 7, 19, .08) 78%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero-shade {
    background: linear-gradient(180deg, rgba(5, 7, 19, .88) 0%, rgba(5, 7, 19, .55) 40%, rgba(5, 7, 19, .30) 62%, rgba(5, 7, 19, .72) 100%);
  }
}

/* WebGL-Canvas: hinter Inhalt, dekorativ */
.hero canvas.starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-constellation-mobile { display: none; }

.hero-grid {
  position: relative;
  z-index: 5;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
  padding-top: clamp(96px, 12vh, 140px);
  padding-bottom: clamp(64px, 9vh, 110px);
}

.hero-copy {
  grid-column: 1 / span 6;
  max-width: 640px;
}

.hero-title {
  font-size: clamp(62px, 6.8vw, 112px);
  line-height: .92;
  letter-spacing: -.035em;
  margin-bottom: 26px;
}
.hero-title em { font-style: italic; }
/* 03.08.2026: Die Oberlaengen wurden abgeschnitten — beim „E" von „Eine
   Geschichte" fehlte der obere Balken. Ursache: line-height .92 macht die Zeile
   niedriger als die Schrift hoch ist, und overflow: hidden (noetig fuer die
   Einblend-Animation) schneidet den Ueberstand ab.
   Der Innenabstand schafft Luft, der negative Aussenabstand nimmt sie im Layout
   wieder weg — die Zeilen stehen also unveraendert, nur der Beschnitt ist fort. */
.h1-line {
  display: block;
  overflow: hidden;
  padding-top: .14em;
  margin-top: -.14em;
}
.h1-inner { display: inline-block; will-change: transform, clip-path; }

.hero-lead { margin-bottom: 18px; }

.hero-price-anchor {
  font-size: 15px;
  color: var(--text-sek);
  margin-bottom: 26px;
}
.hero-price-anchor strong { color: var(--text-hell); font-weight: 700; }

.hero-actions { margin-bottom: 20px; }
.hero-cta .cta-fill {
  position: absolute;
  inset: 0;
  background: var(--gold-licht);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
}
.hero-cta .cta-label { position: relative; z-index: 1; }

.hero-facts {
  list-style: none;
  font-size: 14px;
  color: var(--text-sek);
}

/* Produktbühne rechts */
.hero-stage {
  grid-column: 7 / span 6;
  position: relative;
  height: min(78svh, 760px);
  perspective: 1400px;
  pointer-events: none;
}
.hero-sheet {
  position: absolute;
  margin: 0;
  will-change: transform;
}
.hero-sheet img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 26px 34px 70px rgba(0, 0, 0, .55);
}

.sheet-philipp {
  width: clamp(340px, 31vw, 500px);
  left: clamp(220px, 12vw, 230px);
  top: 50%;
  /* Zentrierung über negativen Margin statt translate: GSAP besitzt transform */
  margin-top: calc(clamp(340px, 31vw, 500px) * -0.75);
  transform: rotateY(-4deg) rotateX(1deg);
  z-index: 3;
}
.sheet-emma {
  width: clamp(150px, 13vw, 210px);
  left: 4%;
  top: 56%;
  margin-top: calc(clamp(150px, 13vw, 210px) * -0.75);
  transform: rotateY(-6deg);
  opacity: .78;
  z-index: 2;
}
.sheet-noah {
  width: clamp(135px, 12vw, 195px);
  top: 16%;
  transform: rotateY(6deg);
  opacity: .68;
  z-index: 1;
}
/* Noah steht rechts hinten im Raum; alle drei Blätter behalten eine freie
   Außenkontur und bleiben dadurch als vollständige Produkte erkennbar. */
.hero-stage .sheet-noah { right: 0; left: auto; }

@media (min-width: 1501px) {
  .hero-stage {
    width: calc(100% + 300px);
    margin-left: -60px;
  }
  .sheet-philipp { left: 246px; }
  .hero-stage .sheet-noah { right: -10px; }
}

@media (min-width: 1100px) and (max-width: 1500px) {
  .hero-stage {
    width: calc(100% + 120px);
    margin-left: -40px;
  }
  .sheet-philipp {
    width: clamp(340px, 28.5vw, 390px);
    left: 173px;
    margin-top: calc(clamp(340px, 28.5vw, 390px) * -0.75);
  }
  .sheet-emma {
    width: 150px;
    left: 20px;
    margin-top: -112.5px;
  }
  .hero-stage .sheet-noah { width: 135px; right: 20px; }
}

.sheet-sheen {
  position: absolute;
  top: -2%;
  right: -2%;
  width: 38%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(239, 213, 150, 0), rgba(239, 213, 150, .9));
  opacity: 0;
  pointer-events: none;
}

/* Scroll-Hinweis */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 6;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-sek);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-hint-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--gold), rgba(211, 173, 98, 0));
  order: 2;
}

/* Geringe Viewporthöhe: Schrift reduzieren, damit Preis/CTA sichtbar bleiben */
@media (min-width: 1100px) and (max-height: 800px) {
  .hero-title { font-size: clamp(52px, 5.6vw, 84px); }
  .hero-stage { height: min(72svh, 620px); }
}

/* ---------- Hero: Tablet 768–1099 px ------------------------------------- */
@media (min-width: 768px) and (max-width: 1099px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-stage { grid-column: 8 / span 5; height: 60svh; }
  .hero-title { font-size: clamp(48px, 7.4vw, 76px); }
  .sheet-philipp { width: clamp(330px, 38vw, 410px); left: auto; right: 0; }
  /* Nur Noah als Nebenblatt im engen Hero; Emma erscheint in der Galerie */
  .sheet-emma { display: none; }
  /* Die spezifische Desktop-Regel aufheben, ohne die bestehende Tablet-
     Komposition über diesen eng begrenzten UX-Fix hinaus neu zu gestalten. */
  .hero-stage .sheet-noah { left: 58%; right: auto; top: 8%; }
  .hero-light { left: 66%; top: 40%; }
}

/* ---------- Hero: Smartphone 320–767 px ---------------------------------- */
@media (max-width: 767px) {
  .hero { align-items: flex-start; }
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding-top: 92px;
    padding-bottom: 88px;
  }
  .hero-copy { max-width: none; }
  .hero-title { font-size: clamp(44px, 13vw, 62px); line-height: .94; }
  .hero-cta { width: 100%; min-height: 50px; }
  .hero-stage {
    width: 100%;
    height: auto;
    perspective: none;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .sheet-philipp {
    position: relative;
    width: min(74vw, 360px);
    left: auto;
    right: auto;
    top: auto;
    margin-top: 0;
    transform: none;
  }
  .sheet-emma, .sheet-noah { display: none; }
  .hero-constellation-mobile {
    display: block;
    position: absolute;
    inset: auto 0 6% 0;
    width: 100%;
    height: 42%;
    z-index: 1;
    pointer-events: none;
  }
  .hcm-line {
    fill: none;
    stroke: #CBAA66;
    stroke-width: 1;
    opacity: .6;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  .hcm-dot { fill: #D3AD62; opacity: .85; }
  .hero-stage { z-index: 2; }
  .scroll-hint { display: none; }
}

/* ==========================================================================
/* ==========================================================================
   Szene 2 – Drei Spuren
   Umsetzung der Gestaltungsvorgabe von Susanne vom 03.08.2026:
   docs/designvorgabe-drei-spuren-waerme-2026.md

   Ihr Kernurteil: Nicht die Schriften waren das Problem, sondern die blau-
   transparente Karte mit Rahmen, Goldecken und Weichzeichner — die sah aus wie
   eine Dashboard-Komponente. Dazu Ziffern bis 68 px und Ueberschriften bis 84 px,
   also fast so laut wie der Hero.

   Deshalb: keine Karte, kein Rahmen, kein backdrop-filter, kein grosser Schatten.
   Eine warme Spur, die sich dreimal verwandelt. Das Bild traegt das Gefuehl, der
   Text erklaert ruhig.
   ========================================================================== */

/* Warme Farbwelt, ausdruecklich nur fuer diesen Abschnitt. Das Indigo der
   uebrigen Seite ist hier bewusst aussen vor — es war der Grund fuer den
   sterilen Eindruck. */
.traces {
  --spur-grund: #120B0F;
  --spur-aubergine: #2A121A;
  --spur-glut: #7B342A;
  --spur-papier: #F3E5D0;
  --spur-gold: #C99755;
  --spur-sekundaer: #CDBDB2;

  position: relative;
  background: var(--spur-grund);
}
/* 04.08.2026: Das erste Motiv (Papierfaser mit Wurzel) passte nicht zur
   Sternenwelt der uebrigen Seite — Alex: „das sieht aus wie eine komische Wurzel
   mit rotem Hintergrund […] muss zu diesem Weltraumlook passen."
   Jetzt ein Supernova-Ueberrest: echter Weltraum wie im Hero, aber in Bernstein
   und Kupfer statt Blau. Damit bleibt Susannes Waerme erhalten. */
.traces-bg {
  position: absolute;
  inset: 0;
  background: url("images/spuren-supernova-4k.webp") 70% 30% / cover no-repeat;
}
@media (max-width: 1920px) {
  .traces-bg { background-image: url("images/spuren-supernova-1920.webp"); }
}
@media (max-width: 1099px) {
  .traces-bg { background-image: url("images/spuren-supernova-1600.webp"); }
}
/* Der Verlauf laeuft jetzt von oben nach unten, nicht mehr von links: Seit die
   drei Kapitel nebeneinander stehen, liegt Text ueber der ganzen Breite. Ein
   Verlauf nur von links liess „Resonanz" auf der hellen Bildflaeche stehen. */
.traces-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(18, 11, 15, .55) 0%,
      rgba(18, 11, 15, .28) 20%,
      rgba(18, 11, 15, .74) 46%,
      rgba(18, 11, 15, .93) 66%,
      var(--spur-grund) 100%),
    linear-gradient(90deg,
      rgba(18, 11, 15, .88) 0%,
      rgba(18, 11, 15, .40) 34%,
      rgba(18, 11, 15, 0) 58%);
}

.traces-viewport {
  position: relative;
  min-height: 100svh;
  padding: clamp(90px, 12vh, 140px) 0 120px;
  overflow: hidden;
}
.traces-head { position: relative; z-index: 3; margin-bottom: clamp(48px, 7vh, 90px); }
.traces-head .eyebrow { color: var(--spur-gold); letter-spacing: .14em; font-size: 11px; }
.traces-head h2 {
  max-width: 12.5ch;
  /* Die Groesse haengt an der Breite UND an der Hoehe. Nur nach Breite gerechnet
     wird die dreizeilige Ueberschrift auf niedrigen Bildschirmen (1366x768) so
     hoch, dass darunter kein Raum fuer das Kapitel bleibt. */
  font-size: clamp(42px, min(4.2vw, 6vh), 64px);
  line-height: .99;
  letter-spacing: -.018em;
}

/* Grundzustand (ohne JS, Mobil, reduzierte Bewegung): die drei Kapitel
   untereinander. Das ist der vollstaendige Inhalt, nicht ein Notbehelf. */
.trace-panel {
  position: relative;
  z-index: 3;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--rand);
}
.trace-panel + .trace-panel { margin-top: 36px; }
.trace-dot { display: none; }
.trace-ring { display: none; }
.trace-number {
  display: block;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--spur-gold);
  margin-bottom: 8px;
}
/* Feine Spur statt Rahmen — 56 px, 1 px, Antikgold */
.trace-number::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 10px;
  background: var(--spur-gold);
  opacity: .7;
}
.trace-text h3 {
  font-size: clamp(30px, 2.5vw, 38px);
  line-height: 1.05;
  margin: 8px 0 14px;
  text-shadow: none;
}
/* Der Kapiteltext steht bewusst in der Serife: Er liest sich wie eine
   Erzaehlung, nicht wie eine Oberflaeche. Manrope bleibt fuer Orientierung
   und Fakten (Nummer, Sachhinweis). */
.trace-text p {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.45;
  color: var(--spur-papier);
  max-width: 34ch;
}
.trace-note {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--spur-sekundaer);
  margin-top: 14px;
  border: 0;
  padding: 0;
  max-width: 34ch;
}

/* Desktop + Bewegung: die drei Kapitel stehen NEBENEINANDER und bleiben stehen.

   03.08.2026, nach Alex' Durchsicht: Vorher loesten sie einander an einer Stelle
   ab. Wer den zweiten Text zu Ende lesen wollte, musste zurueckscrollen — „man muss
   da regelrecht ziehen […] jetzt ist der andere Text wieder weg."
   Ein Abschnitt, der erklaert, darf den Leser nicht unter Zeitdruck setzen.
   Deshalb: kein Anheften mehr, keine Ueberblendung. Jedes Kapitel blendet beim
   Hereinscrollen einmal auf und bleibt sichtbar. Am Ende stehen alle drei
   nebeneinander und koennen in Ruhe verglichen werden. */
.traces-pinned .traces-viewport { height: auto; }
.traces-pinned .traces-head { position: static; margin-bottom: clamp(56px, 8vh, 100px); }

@media (min-width: 900px) {
  .traces-spalten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3vw, 56px);
    align-items: start;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--rand);
  }
  .traces-spalten .trace-panel {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  /* Leichter Hoehenversatz, damit die drei nicht wie eine Tabelle wirken */
  .traces-spalten .trace-panel[data-trace="1"] { margin-top: 0; }
  .traces-spalten .trace-panel[data-trace="2"] { margin-top: clamp(34px, 5vh, 64px); }
  .traces-spalten .trace-panel[data-trace="3"] { margin-top: clamp(68px, 10vh, 128px); }
  .traces-spalten .trace-text p,
  .traces-spalten .trace-note { max-width: 32ch; }
}

/* Mobil: nicht anheften, alle drei Kapitel untereinander. Das Motiv bleibt nur
   als warme Textur rechts stehen — der helle Papierrand darf keine Buchstaben
   verschlucken (Vorgabe Susanne). */
@media (max-width: 767px) {
  .traces-viewport { padding: clamp(70px, 10vh, 100px) 0 90px; }
  .traces-bg { opacity: .35; background-position: 88% center; }
  .traces-bg::after {
    background: linear-gradient(180deg,
      var(--spur-grund) 0%,
      rgba(18, 11, 15, .82) 40%,
      rgba(18, 11, 15, .82) 60%,
      var(--spur-grund) 100%);
  }
  .traces-head h2 { font-size: clamp(38px, 11vw, 48px); line-height: 1.0; max-width: none; }
  .trace-panel { padding-inline: max(24px, var(--rand)); }
  .trace-text h3 { font-size: clamp(28px, 8vw, 32px); }
  .trace-text p { font-size: 18px; line-height: 1.5; }
}


/* ==========================================================================
   Szene 3 – Produktgalerie im Raum
   ========================================================================== */
.gallery {
  position: relative;
  background: var(--indigo);
}
/* 29.07.2026: Hintergrund wirkte pixelig. Ursache: Quellbild ist nur
   1672x941 px; auf breiten Monitoren skaliert `cover` es um 15 % (1920er)
   bis ueber 50 % (2560er) hoch. Ein groesseres Original existiert nicht.
   Eine leichte Unschaerfe kaschiert die Skalierung vollstaendig und ist bei
   einem Hintergrund auch gestalterisch richtig — der Vordergrund soll wirken.
   Das leichte Vergroessern verhindert helle Kanten durch den Weichzeichner. */
/* 03.08.2026: Der Weichzeichner von damals hat es nicht gerettet — Alex:
   „diese Sternlandschaft, die ist todespixelig […] das sieht furchtbar aus."
   Zu Recht: 941 px Bildhoehe auf einem 100vh hohen Abschnitt ist eine
   Hochskalierung um das Anderthalbfache, und Unschaerfe macht aus wenig Bildpunkten
   keine neuen. Jetzt liegt ein eigens erzeugter Sternenhimmel mit 2560 x 1440 px
   zugrunde — genug fuer jeden ueblichen Monitor, ohne Weichzeichner. */
.gallery-bg {
  position: absolute;
  inset: 0;
  /* 04.08.2026: 2560 px reichten auf einem 4K-Monitor immer noch nicht — dort
     wird um das Anderthalbfache hochskaliert. gpt-image-2 deckelt die laengste
     Kante bei 3840 px; genau das ist jetzt die Quelle, also 1:1 auf jedem
     ueblichen Bildschirm. */
  background: url("images/galerie-4k.webp") 60% 45% / cover no-repeat;
  opacity: .9;
}
@media (max-width: 1920px) {
  .gallery-bg { background-image: url("images/galerie-1920.webp"); }
}
@media (max-width: 1099px) {
  .gallery-bg { background-image: url("images/sternenhimmel-09-1280.webp"); }
}
/* Dunkler Verlauf beruhigt die Galaxy von rechts nach links (Noah-Austritt)
   und dunkelt Textzonen ab */
.gallery-calm {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5, 7, 19, .88) 0%, rgba(5, 7, 19, .45) 45%, rgba(5, 7, 19, .18) 100%);
}

.gallery-viewport {
  position: relative;
  min-height: 100svh;
  padding: clamp(90px, 12vh, 140px) 0 110px;
}
.gallery-head { position: relative; z-index: 3; margin-bottom: clamp(40px, 6vh, 70px); }
.gallery-head h2 { max-width: 16ch; }

/* Grundzustand: vertikale Galerie, alle Blätter vollständig */
.gallery-stage {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 56px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--rand);
}
.g-sheet { margin: 0; }
.g-sheet img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 22px 30px 60px rgba(0, 0, 0, .55);
}
.g-caption { margin-top: 16px; }
.g-caption strong {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  color: var(--text-hell);
}
.g-caption span { color: var(--text-sek); font-size: 15px; }
.gallery-note {
  position: relative;
  z-index: 3;
  margin-top: 48px;
  font-size: 13px;
  color: var(--text-sek);
}
.gallery-ring { display: none; }

/* Desktop + Bewegung + GSAP: gepinnte Bühne (Klasse via JS) */
.gallery.stage-pinned .gallery-viewport {
  height: 100svh;
  padding: 0;
  overflow: hidden;
}
.stage-pinned .gallery-head {
  position: absolute;
  top: clamp(60px, 8vh, 100px);
  left: 0;
  right: 0;
}
.stage-pinned .gallery-stage {
  position: absolute;
  inset: 0;
  max-width: none;
  padding: 0;
  display: block;
}
/* Freiraum-Rechnung fuer die angeheftete Galerie (Fix 29.07.2026).
   Vorher: top 54% + feste Breite -> das 2:3-Blatt (Hoehe = Breite x 1,5) ragte
   bei ueblichen Fensterhoehen in die Ueberschrift hinein. Jetzt wird der
   Kopfbereich reserviert und die Blattbreite so begrenzt, dass die Hoehe in
   den verbleibenden Raum passt. Damit ist eine Ueberlagerung rechnerisch
   ausgeschlossen, nicht nur zufaellig vermieden. */
.stage-pinned .gallery-stage {
  /* 03.08.2026: Der Kopfbereich war zu knapp bemessen — die zweizeilige
     Ueberschrift reichte tiefer als die reservierten 24vh, das Blatt lief hinein.
     Der Fussbereich war ueberhaupt nicht eingeplant, obwohl die Bildunterschrift
     dort steht. Beide Werte sind jetzt grosszuegig und in svh gerechnet, weil die
     Buehne 100svh hoch ist. */
  --kopf-freiraum: clamp(230px, 29svh, 330px);
  --fuss-freiraum: clamp(130px, 15svh, 180px);
  --buehne-hoehe: calc(100svh - var(--kopf-freiraum) - var(--fuss-freiraum));
}
.stage-pinned .g-sheet {
  position: absolute;
  left: 50%;
  /* Mitte des freien Bereichs unterhalb der Ueberschrift */
  top: calc(var(--kopf-freiraum) + var(--buehne-hoehe) / 2);
  /* dritter Wert: Breite, bei der die 2:3-Hoehe genau in die Buehne passt */
  width: min(42vw, 560px, calc(var(--buehne-hoehe) / 1.5));
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
/* Die Bildunterschrift gehoert zum Blatt und wird deshalb AN IHM ausgerichtet.
   Vorher stand hier left: var(--rand) — gemeint war der Seitenrand, gewirkt hat es
   aber im Koordinatensystem des Blattes: Die Unterschrift rutschte in das Bild
   hinein und verschwand dahinter. Jetzt steht sie mittig unter dem Blatt, im
   Fussbereich, der dafuer reserviert ist. */
.stage-pinned .g-caption {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: clamp(16px, 2.4svh, 28px);
  width: max(340px, 100%);
  text-align: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.stage-pinned .g-caption strong { display: block; margin-bottom: 4px; }
.stage-pinned .g-caption.is-on { opacity: 1; }
.stage-pinned .gallery-note {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
}
.stage-pinned .gallery-ring {
  display: block;
  position: absolute;
  left: 50%;
  /* zieht mit dem Blatt mit — siehe Freiraum-Rechnung oben */
  top: calc(var(--kopf-freiraum) + var(--buehne-hoehe) / 2);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--gold-licht);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}

/* ==========================================================================
   Szene 4 – Geschenkmoment
   ========================================================================== */
.gift {
  position: relative;
  background: var(--mitternacht);
  overflow: hidden;
}
.gift-bg {
  position: absolute;
  inset: 0;
  background: url("images/geschenk-milchstrasse-4k.webp") 74% 40% / cover no-repeat;
  opacity: .55;
}
@media (max-width: 1400px) {
  .gift-bg { background-image: url("images/geschenk-milchstrasse-1920.webp"); }
}
.gift-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(17, 23, 43, .94) 0%, rgba(17, 23, 43, .72) 52%, rgba(17, 23, 43, .30) 100%);
}
/* 29.07.2026 auf Wunsch von Alex ausgeblendet: „ein halbrunder Strich, der
   sieht fehl am Platz aus." Die Idee war ein Geschenkband, aber durch
   preserveAspectRatio="none" wird die Kurve auf die Bereichsbreite gestreckt
   und verliert ihre Form. Bewusst nur ausgeblendet statt geloescht — soll das
   Band spaeter in unverzerrter Form zurueckkommen, genuegt es, diese Regel zu
   entfernen und im SVG preserveAspectRatio auf "xMidYMid meet" zu setzen. */
.gift-loop { display: none; }

.gift-loop-hidden-original {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.gift-loop-path {
  fill: none;
  stroke: #CBAA66;
  stroke-width: 1;
  opacity: .55;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.motion-ok .gift-loop-path.loop-pending { stroke-dashoffset: 1; }
.motion-ok .gift-loop-path.loop-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .7s ease-out;
}
.gift-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding-top: clamp(90px, 14vh, 170px);
  padding-bottom: clamp(90px, 14vh, 170px);
}
.gift-copy h2 { margin-bottom: 26px; max-width: 16ch; }
.gift-occasions { color: var(--text-sek); margin-bottom: 14px; }
.gift-delivery { color: var(--text-hell); margin-bottom: 18px; }

/* V4 – Leitsatz des Doppelnutzens. Weckt die Neugier auf den eigenen Namen,
   ohne etwas ueber Charakter zu behaupten. Der Halbsatz „auch ueber den
   eigenen" ist die einzige Stelle, an der der Selbstbezug vor der Bestellung
   auftaucht — bewusst beilaeufig, nicht als zweiter Verkaufsblock. */
.gift-self {
  margin-bottom: 30px;
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--gold-licht);
  max-width: 30ch;
}
.gift-surface {
  max-width: 460px;
  margin-left: auto;
}
.gift-surface img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 120px rgba(211, 173, 98, .22), 24px 30px 60px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   Szene 5 – Bestellung / Formularruhezone
   ========================================================================== */
/* 03.08.2026: Der Bereich wirkte milchig und blau — Alex: „den Hintergrund
   moechte ich mehr wahrnehmen […] dieses Dunkle moechte ich mehr haben, nicht
   dieses Blau."
   Ursache war nicht das Bild, sondern die Ueberlagerung: ein 2,2px-Weichzeichner
   auf dem Sternenhimmel, dazu eine flaechige Blaufuellung mit 72–90 % Deckkraft.
   Davon blieb ein blauer Schleier uebrig, in dem keine Sterne mehr zu erkennen
   waren.
   Jetzt nach dem Vorbild des Hero: dunkler Grundton, Sternenhimmel unverwaschen,
   und statt der flaechigen Fuellung ein gerichteter Verlauf — dunkel dort, wo der
   Text steht, offen dort, wo der Raum sichtbar bleiben soll. Die Lesbarkeit der
   Eingabefelder traegt die Formularkarte selbst, die einen eigenen Grund hat. */
.order {
  position: relative;
  background: var(--kosmos);
  padding: clamp(80px, 11vh, 140px) 0;
  overflow: hidden;
}
.order::before {
  content: "";
  position: absolute;
  inset: -2%;
  /* Der helle Stern sitzt im Original oben rechts. Bei 58 % lag er ausserhalb
   des sichtbaren Ausschnitts — der Bildausschnitt wandert deshalb nach rechts,
   das Motiv also nach links. */
  background: url("images/bestellung-nachthimmel-4k.webp") 100% 50% / cover no-repeat;
  pointer-events: none;
}
.order::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 7, 19, .93) 0%, rgba(5, 7, 19, .70) 44%, rgba(5, 7, 19, .22) 82%),
    linear-gradient(180deg, var(--kosmos) 0%, rgba(5, 7, 19, .72) 5%, rgba(5, 7, 19, 0) 18%, rgba(5, 7, 19, 0) 82%, rgba(5, 7, 19, .72) 95%, var(--kosmos) 100%);
  pointer-events: none;
}
@media (max-width: 1920px) {
  .order::before { background-image: url("images/bestellung-nachthimmel-1920.webp"); }
}
@media (max-width: 1099px) {
  .order::before { background-image: url("images/bestellung-nachthimmel-1920.webp"); }
  /* Ohne zweite Spalte braucht der Text die Abdunklung auf ganzer Breite */
  .order::after {
    background: linear-gradient(180deg, rgba(5, 7, 19, .95) 0%, rgba(5, 7, 19, .74) 30%, rgba(5, 7, 19, .74) 70%, rgba(5, 7, 19, .95) 100%);
  }
}

/* Weiche Kanten zwischen den Abschnitten. Vorher stiessen die Bereiche mit einer
   harten waagerechten Linie aufeinander — Alex: „die Uebergaenge sind so hart […]
   vielleicht findest du da irgendwas Charmanteres."
   Der Innenschatten laesst jeden Abschnitt oben und unten in den Grundton der
   Seite auslaufen, sodass benachbarte Bereiche ineinander uebergehen. */
/* Weiche Kanten zwischen den Abschnitten.

   04.08.2026, zweiter Anlauf: Zuerst stand hier ein inset-Schatten auf den
   Abschnitten selbst. Der hat nichts bewirkt — ein Innenschatten wird UNTER den
   Kindelementen gezeichnet, und der Sternenhimmel jedes Abschnitts ist genau so
   ein Kindelement (.traces-bg, .gift-bg, .gallery-bg, .order::before). Die Kante
   blieb also hart, obwohl im Stylesheet ein Verlauf stand.
   Jetzt liegt der Auslauf auf derselben Ebene wie das Bild und deckt es wirklich ab. */
.traces-bg::before,
.gallery-bg::before,
.gift::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--kosmos) 0%,
    rgba(5, 7, 19, .72) 5%,
    rgba(5, 7, 19, 0) 15%,
    rgba(5, 7, 19, 0) 85%,
    rgba(5, 7, 19, .72) 95%,
    var(--kosmos) 100%);
}
/* Der Geschenkmoment bekommt den Auslauf auf Abschnittsebene statt auf .gift-bg:
   dessen opacity: .55 wuerde auf ein Kindelement durchschlagen und den Verlauf
   abschwaechen. Der Bestellbereich traegt sein Bild auf ::before, seine Kante
   steckt deshalb im vorhandenen ::after-Verlauf (siehe dort).
   Inhalt liegt in beiden Abschnitten auf z-index 2 und bleibt darueber. */
.gift::after { z-index: 1; }
/* Inhalt bleibt ueber beiden Hintergrundebenen */
.order > * { position: relative; z-index: 1; }
.order-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.order-copy { position: sticky; top: 110px; }
.order-copy h2 { font-size: clamp(34px, 3.6vw, 56px); margin-bottom: 20px; }
.order-copy .lead { margin-bottom: 26px; }
.price { margin-bottom: 22px; }
.price-value {
  font-family: var(--display);
  font-size: clamp(48px, 4.6vw, 72px);
  line-height: 1;
  color: var(--text-hell);
}
.price-unit { color: var(--text-sek); font-size: 16px; margin-left: 8px; }
.delivery-list {
  list-style: none;
  margin-bottom: 34px;
}
.delivery-list li {
  padding: 10px 0 10px 26px;
  position: relative;
  color: var(--text-sek);
  border-bottom: 1px solid var(--linie);
}
.delivery-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 13px;
}
.order-anchor { max-width: 300px; }
.order-anchor img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 18px 24px 50px rgba(0, 0, 0, .5);
}
.order-anchor figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-sek);
}

/* Bestellkarte: vollständig ruhige Fläche ohne Sterne/Glow/Parallaxe */
.order-card {
  background: linear-gradient(160deg, rgba(23, 29, 49, .99), rgba(10, 14, 29, .99));
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.order-progress {
  list-style: none;
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-sek);
  opacity: .45;
}
.progress-step.active { opacity: 1; }
.progress-node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--gold-antik);
  background: transparent;
}
.progress-step.active .progress-node { background: var(--gold); border-color: var(--gold); }

.form-head { margin-bottom: 24px; }
.form-head h3 { font-size: 28px; margin-bottom: 8px; }
.form-head p { color: var(--text-sek); font-size: 15px; }
.cart-count {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-licht);
}

/* Personenübersicht */
.person-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}
.person-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.person-row.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 18px rgba(211, 173, 98, .12);
}
.person-info { display: grid; gap: 2px; min-width: 0; }
.person-info strong { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.person-info span { font-size: 13px; color: var(--text-sek); }
.person-meta { color: var(--gold-licht) !important; }
.person-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-action {
  background: none;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--text-hell);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  padding: 8px 16px;
  cursor: pointer;
}
.row-action:hover { border-color: var(--gold); }
.row-action.danger { color: var(--fehler); }
.row-action.danger:hover { border-color: var(--fehler); }

/* Aktive Personenkarte */
.person-card h4 { font-family: var(--display); font-size: 24px; font-weight: 500; margin-bottom: 18px; }
.mode-fieldset { border: 0; margin-bottom: 18px; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-grid label { position: relative; display: block; }
.mode-grid input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.mode-card {
  display: grid;
  gap: 3px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 13px 14px;
  min-height: 48px;
}
.mode-card strong { font-size: 15px; }
.mode-card span { font-size: 12.5px; color: var(--text-sek); }
.mode-grid input:checked + .mode-card {
  border-color: var(--gold);
  box-shadow: inset 0 0 16px rgba(211, 173, 98, .14);
}
.mode-grid input:focus-visible + .mode-card {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(211, 173, 98, .28);
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  min-height: 48px;
  background: rgba(5, 8, 18, .86);
  border: 1px solid var(--linie);
  border-radius: 8px;
  color: var(--text-hell);
  font-family: var(--ui);
  font-size: 16px;
  padding: 10px 14px;
}
.field input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(211, 173, 98, .25);
  border-color: var(--gold);
}
.field input[aria-invalid="true"] { border-color: var(--fehler); }
.field-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: #9294A4; }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--fehler);
}
.field-error::before { content: "Fehler: "; font-weight: 700; }

.form-error {
  background: rgba(90, 30, 26, .35);
  border: 1px solid rgba(255, 179, 170, .5);
  border-radius: 8px;
  color: var(--fehler);
  font-size: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.person-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* V4 – Widmungsvorschläge: senken die Hürde, das optionale Feld zu füllen.
   Bewusst schlicht gehalten, damit sie als Hilfe lesbar sind und nicht als
   weitere Pflichtauswahl. */
.widmung-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.widmung-label {
  font-size: 12.5px;
  color: #9294A4;
  margin-right: 2px;
}
.widmung-chip {
  padding: 5px 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--text-sek);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.widmung-chip:hover,
.widmung-chip:focus-visible {
  border-color: var(--gold-antik);
  color: var(--gold-licht);
  background: rgba(211, 173, 98, .08);
}

.add-person { margin-top: 22px; }
.add-person .btn { width: 100%; }
.add-person-hint { margin-top: 8px; font-size: 12.5px; color: #9294A4; text-align: center; }

/* V4 – Selbst-Soulprint: Einladung an der Stelle, an der die Neugier ohnehin
   entsteht — direkt nachdem der erste Soulprint uebernommen wurde.
   Bewusst als Frage formuliert, nicht als Aufforderung: weckt Neugier,
   behauptet nichts. Siehe docs/produktkonzept-doppelnutzen-2026.md */
.self-invite {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 2px solid var(--gold-antik);
  background: rgba(211, 173, 98, .06);
  border-radius: 0 8px 8px 0;
  font-family: var(--display);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-sek);
}
.self-invite strong {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--gold-licht);
}
.add-person-max {
  margin-top: 22px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-sek);
}
.add-person-max strong { color: var(--text-hell); }

/* Checkout */
.checkout-divider {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 32px 0;
}
.checkout h4 { font-family: var(--display); font-size: 24px; font-weight: 500; margin-bottom: 8px; }
.checkout-note { color: var(--text-sek); font-size: 14.5px; margin-bottom: 22px; }

.checks { display: grid; gap: 12px; margin-bottom: 22px; }
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-sek);
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.check a { color: var(--gold-licht); }

.summary {
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.summary h5 {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.summary-list { list-style: none; display: grid; gap: 10px; margin-bottom: 14px; }
.summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14.5px;
  color: var(--text-sek);
}
.summary-list strong { color: var(--text-hell); overflow-wrap: anywhere; }
.summary-list small { color: #9294A4; }
.summary-price { white-space: nowrap; color: var(--text-hell); }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--linie);
  padding-top: 12px;
  font-size: 14.5px;
  color: var(--text-sek);
}
.summary-total strong {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  color: var(--text-hell);
}
.summary-note { margin-top: 8px; font-size: 12.5px; color: #9294A4; }

.paypal-lead { font-size: 14.5px; margin-bottom: 12px; color: var(--text-hell); }
.paypal-buttons { margin-bottom: 12px; min-height: 45px; }
#submitOrder { width: 100%; }
.form-note { margin-top: 12px; font-size: 12.5px; color: #9294A4; text-align: center; }

/* Bestellstatus */
.order-status h4 { font-family: var(--display); font-size: 26px; font-weight: 500; margin-bottom: 10px; }
.order-status-text { color: var(--text-sek); margin-bottom: 18px; }
.status-list { list-style: none; display: grid; gap: 10px; margin-bottom: 16px; }
.status-row {
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14.5px;
}
.status-row.status-ready { border-color: rgba(191, 231, 203, .45); }
.status-row.status-failed { border-color: rgba(255, 179, 170, .45); color: var(--fehler); }
.status-downloads { display: flex; gap: 8px; flex-wrap: wrap; }
.status-downloads a {
  border: 1px solid var(--gold-antik);
  border-radius: 999px;
  color: var(--gold-licht);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.status-downloads a:hover { border-color: var(--gold); }

/* Weitergeben. Steht in einer eigenen Zeile ueber die volle Breite: Das ist der
   naechste Schritt nach dem Herunterladen, nicht eine dritte Nebensache. */
.status-teilen {
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}
.teilen-knopf {
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
/* WhatsApp-Gruen, aber gedaempft — die Seite bleibt in ihrer eigenen Welt. */
.teilen-whatsapp {
  border: 1px solid rgba(120, 200, 150, .5);
  background: rgba(120, 200, 150, .12);
  color: #9BE0B8;
}
.teilen-whatsapp:hover { border-color: rgba(120, 200, 150, .9); }
.teilen-kopieren {
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text-sek);
}
.teilen-kopieren:hover { border-color: var(--gold-antik); color: var(--gold-licht); }

/* ==========================================================================
   Sanduhr während der Erzeugung
   Ein Blatt braucht bis zu drei Minuten. Ohne sichtbares Zeichen hält man die
   Seite für hängengeblieben und lädt neu — mitten in der Erzeugung.
   Der kleine Ladekringel im Knopf reichte dafür nicht, auf dem Handy sieht ihn
   niemand.
   ========================================================================== */
.erzeugung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 0 30px;
}
.sanduhr { width: 84px; height: 118px; overflow: visible; }

.sanduhr .glas {
  fill: none;
  stroke: var(--gold-antik);
  stroke-width: 2.2;
  opacity: .85;
}
.sanduhr .kappe { fill: var(--gold-antik); opacity: .9; }
.sanduhr .sand-oben, .sanduhr .sand-unten { fill: var(--gold-licht); opacity: .28; }
.sanduhr .korn { fill: var(--gold-licht); }

@media (prefers-reduced-motion: no-preference) {
  /* Der Sand oben schrumpft, unten wächst er — in einem Durchlauf von 9 s.
     Danach dreht sich die Uhr und es beginnt von vorn. */
  .sanduhr { animation: sanduhr-drehen 9s linear infinite; transform-origin: 50% 50%; }
  .sanduhr .sand-oben { animation: sand-oben 9s linear infinite; transform-origin: 50% 14px; }
  .sanduhr .sand-unten { animation: sand-unten 9s linear infinite; transform-origin: 50% 118px; }
  .sanduhr .korn { animation: korn-fallen 1.5s linear infinite; }
  .sanduhr .k2 { animation-delay: .3s; }
  .sanduhr .k3 { animation-delay: .6s; }
  .sanduhr .k4 { animation-delay: .9s; }
  .sanduhr .k5 { animation-delay: 1.2s; }
}

@keyframes sanduhr-drehen {
  0%, 92%   { transform: rotate(0deg); }
  100%      { transform: rotate(180deg); }
}
@keyframes sand-oben {
  0%   { transform: scaleY(1); }
  90%  { transform: scaleY(.06); }
  100% { transform: scaleY(.06); }
}
@keyframes sand-unten {
  0%   { transform: scaleY(.06); }
  90%  { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
@keyframes korn-fallen {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}

.erzeugung-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-sek);
  text-align: center;
}
.erzeugung-balken {
  width: min(280px, 80%);
  height: 4px;
  border-radius: 999px;
  background: rgba(226, 196, 132, .16);
  overflow: hidden;
}
.erzeugung-balken span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-antik), var(--gold-licht));
  transition: width .6s ease;
}

/* Rabattcode: Der Zustand muss ohne Lesen erkennbar sein. */
#code-status { display: block; margin-top: 6px; font-weight: 600; }
#code-status.code-laeuft { color: #9294A4; font-weight: 400; }
#code-status.code-gueltig { color: #9BE0B8; }
#code-status.code-ungueltig { color: var(--fehler); }

.order-number { font-size: 13px; color: #9294A4; margin-bottom: 14px; }

/* ==========================================================================
   Szene 6 – FAQ und Footer
   ========================================================================== */
.faq {
  background: var(--kosmos);
  padding: clamp(80px, 11vh, 140px) 0;
}
.faq-head { margin-bottom: 40px; }
.faq-list {
  display: grid;
  gap: 0;
  max-width: 860px;
}
.faq-list details {
  border-bottom: 1px solid var(--linie);
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 4px;
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  color: var(--text-hell);
  position: relative;
  min-height: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-family: var(--ui);
  font-size: 22px;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p {
  padding: 0 40px 22px 4px;
  color: var(--text-sek);
  max-width: 680px;
}
.legal-note {
  margin-top: 44px;
  max-width: 680px;
  font-size: 13px;
  color: #9294A4;
  border-left: 2px solid var(--gold-antik);
  padding-left: 14px;
}

.site-footer {
  background: #04060F;
  border-top: 1px solid var(--linie);
  padding: 40px 0 90px;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--text-sek); font-size: 13.5px; text-decoration: none; }
.footer-links a:hover { color: var(--text-hell); }
.footer-disclaimer { flex-basis: 100%; font-size: 12px; color: #7F8193; max-width: 720px; }
.footer-copy { margin-left: auto; font-size: 12.5px; color: #7F8193; }

/* Bestätigungsdialog */
.confirm-dialog {
  background: linear-gradient(160deg, rgba(23, 29, 49, .99), rgba(10, 14, 29, .99));
  border: 1px solid var(--gold-antik);
  border-radius: 14px;
  color: var(--text-hell);
  max-width: min(440px, calc(100vw - 28px));
  padding: 26px;
}
.confirm-dialog::backdrop { background: rgba(4, 6, 15, .7); }
.confirm-dialog h4 { font-family: var(--display); font-size: 22px; font-weight: 500; margin-bottom: 10px; }
.confirm-dialog p { color: var(--text-sek); font-size: 14.5px; margin-bottom: 20px; }
.dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Feste mobile CTA */
.sticky-mobile {
  display: none;
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 55;
}
.sticky-mobile .btn { width: 100%; min-height: 50px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
@media (max-width: 767px) {
  .sticky-mobile { display: block; }
  body.in-order .sticky-mobile { display: none; }
  .site-footer { padding-bottom: 40px; }
}

/* ==========================================================================
   Tablet 768–1099 px
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
  .order-grid { grid-template-columns: 1fr; }
  .order-copy { position: static; }
  .order-anchor { max-width: 260px; }
  .gift-grid { grid-template-columns: 1fr; }
  .gift-surface { margin: 0; max-width: 380px; }
}

/* ==========================================================================
   Smartphone ≤ 767 px
   ========================================================================== */
@media (max-width: 767px) {
  :root { --rand: max(14px, 4.4vw); }
  h2 { font-size: clamp(32px, 9.4vw, 48px); line-height: 1.02; }
  .order-grid { grid-template-columns: 1fr; }
  .order-copy { position: static; }
  .order-anchor { max-width: 260px; margin-top: 10px; }
  .order-card { border-radius: 12px; padding: 18px; }
  .gift-grid { grid-template-columns: 1fr; }
  .gift-surface { margin: 0; max-width: 320px; }
  .order-progress { gap: 4px; }
  .progress-label { font-size: 9.5px; }
  .mode-grid { grid-template-columns: 1fr; }
  .person-row { flex-direction: column; align-items: stretch; }
  .person-row-actions { justify-content: flex-start; }
  .person-actions .btn { width: 100%; }
  .footer-copy { margin-left: 0; }
}

/* ==========================================================================
   prefers-reduced-motion: alles statisch, Endzustände sofort
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-sky { transform: none; }
}

/* ==========================================================================
   Animations-Vorbereitung (nur via JS gesetzt, niemals im Grundzustand)
   ========================================================================== */
.anim-prep .h1-inner {
  transform: translateX(-16px);
  /* Oben und unten Luft lassen, damit die Maske nur seitlich wirkt und keine
     Oberlaengen abschneidet — passend zum Endzustand in scene-sternenflug.js. */
  clip-path: inset(-25% 100% -25% 0);
}
.anim-prep .hero-lead {
  transform: translateY(12px);
  clip-path: inset(0 0 100% 0);
}
.anim-prep .hero-eyebrow { clip-path: inset(0 100% 0 0); }
.anim-prep .eyebrow-rule { transform: scaleX(0); }
.anim-prep .hero-facts { opacity: 0; }
.anim-prep .hero-cta .cta-fill { transform: scaleX(0); }
.anim-prep .scroll-hint { opacity: 0; }
.anim-prep .hero-light { opacity: 0; }

/* ── Introvideo (19.08.2026) ──────────────────────────────────────────────────
   Der Film ist 9:16. Auf dem Rechner darf er deshalb NICHT auf volle Breite
   gezogen werden — er würde entweder verzerrt oder beschnitten. Stattdessen
   steht er als hochformatige Säule in der Mitte, begrenzt durch die Höhe des
   Fensters. Auf dem Handy passt das Format ohnehin und darf fast die ganze
   Fläche einnehmen. */
.intro-video {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: linear-gradient(180deg, var(--kosmos, #070a18) 0%, #0b1024 55%, var(--kosmos, #070a18) 100%);
}
.intro-video-wrap { text-align: center; }
.intro-video-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 0 0 .4rem;
}
.intro-video-lead { color: #b9b2c9; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); }

.intro-video-buehne {
  position: relative;
  margin: 0 auto;
  /* Die Höhe führt, nicht die Breite. Ein 9:16-Bild wird sonst schnell höher
     als der Bildschirm: 22rem Breite ergeben 626 px Höhe — mehr, als ein Handy
     mit Adressleiste überhaupt zeigt. Deshalb aus der verfügbaren Höhe
     zurückgerechnet. `vh` ist der Rückfall für Browser ohne `svh`. */
  width: min(100%, 22rem, calc(62vh * 9 / 16));
  aspect-ratio: 9 / 16;
  border-radius: 1.1rem;
  overflow: hidden;
  background: #05070f;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .55);
}
/* `svh` ist die Höhe MIT sichtbarer Adressleiste — also das, was der Besucher
   wirklich sieht. `vh` rechnet auf dem Handy mit der eingeklappten Leiste und
   ist damit zu optimistisch. */
@supports (height: 1svh) {
  .intro-video-buehne { width: min(100%, 22rem, calc(62svh * 9 / 16)); }
}
.intro-video-player {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* Der Startknopf liegt über dem Standbild und verschwindet beim Abspielen. */
.intro-video-start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .9rem;
  border: 0; cursor: pointer;
  background: radial-gradient(60% 60% at 50% 50%, rgba(7, 10, 24, .25) 0%, rgba(7, 10, 24, .72) 100%);
  color: #f6f1e6;
  font: inherit;
  transition: background .25s ease;
}
.intro-video-start:hover,
.intro-video-start:focus-visible { background: rgba(7, 10, 24, .45); }
.intro-video-icon {
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: var(--gold, #d4af6e);
  display: grid; place-items: center;
  box-shadow: 0 .5rem 1.6rem rgba(0, 0, 0, .45);
}
/* Das Dreieck aus Rändern — ein Bild weniger, das geladen werden muss. */
.intro-video-icon::after {
  content: ""; display: block;
  border-style: solid;
  border-width: .72rem 0 .72rem 1.15rem;
  border-color: transparent transparent transparent #16121f;
  margin-left: .28rem;
}
.intro-video-text { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.intro-video-text small { display: block; font-weight: 400; font-size: .82rem; color: #cfc7dd; }
.intro-video-buehne.laeuft .intro-video-start { display: none; }

@media (max-width: 767px) {
  .intro-video { padding: 1.9rem 0 2.2rem; }
  .intro-video-lead { margin-bottom: 1.1rem; }
  /* 60 % der sichtbaren Höhe fürs Video. Zusammen mit Überschrift, Unterzeile
     und Polster bleibt der ganze Abschnitt damit auf einem Schirm. */
  .intro-video-buehne { width: min(100%, calc(60vh * 9 / 16)); }
}
@supports (height: 1svh) {
  @media (max-width: 767px) {
    .intro-video-buehne { width: min(100%, calc(60svh * 9 / 16)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-video-start { transition: none; }
}

/* ── Schwebender Musikknopf (19.08.2026) ──────────────────────────────────────
   Er erscheint erst, wenn die Musik nach dem Film weiterläuft, und ist der
   einzige Weg, sie zu beenden — deshalb muss er immer sichtbar bleiben und darf
   sich nie hinter etwas anderem verstecken. Auf dem Handy sitzt er über dem
   Bestellbalken, sonst würde er ihn verdecken. */
.musik-knopf {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem .55rem .7rem;
  border: 1px solid rgba(212, 175, 110, .45);
  border-radius: 999px;
  background: rgba(11, 13, 26, .88);
  backdrop-filter: blur(8px);
  color: #f6f1e6;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .5);
}
.musik-knopf:hover,
.musik-knopf:focus-visible { border-color: var(--gold, #d4af6e); }
.musik-text { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.musik-text small { display: block; font-weight: 400; font-size: .72rem; color: #b6aec6; }

/* Drei Balken, die sich bewegen — sie sagen ohne Worte „hier läuft Ton". */
.musik-wellen { display: flex; align-items: flex-end; gap: 3px; height: 1.1rem; }
.musik-wellen i {
  width: 3px;
  background: var(--gold, #d4af6e);
  border-radius: 2px;
  animation: musik-puls 1.1s ease-in-out infinite;
}
.musik-wellen i:nth-child(1) { height: 55%; animation-delay: -.2s; }
.musik-wellen i:nth-child(2) { height: 100%; }
.musik-wellen i:nth-child(3) { height: 70%; animation-delay: -.6s; }
@keyframes musik-puls {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}

@media (max-width: 767px) {
  /* Über den Bestellbalken, nicht darauf. */
  .musik-knopf { bottom: 76px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .musik-wellen i { animation: none; transform: none; }
}

/* ── Weiterempfehlen (21.08.2026) ─────────────────────────────────────────────
   Der Bereich steht zwischen Beispielen und Bestellformular. Deshalb ruhig:
   schmale Bahn, kein Farbblock, kein zweiter großer Knopf, der mit „BirthSoul
   verschenken" um Aufmerksamkeit ringt. */
.empfehlung {
  padding: clamp(2.4rem, 6vw, 4rem) 0;
  text-align: center;
  border-top: 1px solid rgba(212, 175, 110, .16);
  border-bottom: 1px solid rgba(212, 175, 110, .16);
}
.empfehlung h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  margin: .2rem 0 .4rem;
}
.empfehlung-lead { color: #b9b2c9; margin: 0 0 1.4rem; }
.empfehlung .eyebrow { justify-content: center; }

.empfehlung-teilen { min-width: 15rem; }

/* Die Einzelwege sind der Rückfall für Browser ohne eingebaute Teilen-Funktion
   — und für alle, die lieber selbst wählen. */
.empfehlung-wege {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .6rem;
}
.empfehlung-weg {
  display: inline-block;
  padding: .42rem .9rem;
  border: 1px solid rgba(212, 175, 110, .38);
  border-radius: 999px;
  background: transparent;
  color: #e8e3d8;
  font: inherit;
  font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
}
.empfehlung-weg:hover,
.empfehlung-weg:focus-visible {
  border-color: var(--gold, #d4af6e);
  color: var(--gold, #d4af6e);
}

@media (max-width: 767px) {
  /* Fingerkuppe statt Mauszeiger: 44 px sind die uebliche Mindestgroesse für
     Tippziele. Bei 38 px trifft man daneben — und ein Teilen-Knopf, den man
     nicht trifft, wird nicht benutzt. */
  .empfehlung-weg { padding: .62rem 1.05rem; font-size: .92rem; }
}