/* =========================================================
   personal sports Göttingen — 10k-Fassung
   Palette und Schriften nach docs/design-paket.md
   ========================================================= */

/* Nur der Schnitt 600, den die Seite tatsächlich benutzt. Die variable
   Fassung wog 36,6 KB für einen einzigen genutzten Wert. */
@font-face{font-family:Fraunces;src:url(fonts/fraunces-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Instrument;src:url(fonts/instrument-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Instrument;src:url(fonts/instrument-500.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:PlexMono;src:url(fonts/plexmono-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --canvas:#0d1218;
  --panel:#151e26;
  --panel-hoch:#1d2832;
  --accent:#e6782d;
  --accent-hover:#f28b3f;
  --accent-muted:#e6782d33;
  --accent-ink:#0d1218;
  --text-primary:#f4f0e9;
  --text-secondary:#9fadb8;

  --display:Fraunces,Georgia,'Times New Roman',serif;
  --body:Instrument,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:PlexMono,ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* Genau zwei Kurven im ganzen Projekt. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-aus:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(5,8,12,.95),0 3px 12px rgba(5,8,12,.78),0 10px 44px rgba(5,8,12,.8);
  --radius:10px;
  --radius-gross:20px;
  --breit:1280px;

  /* Scrollstrecke des Hero. 400vh reichen für fünf Bänder nicht: gemessen
     hielten die mittleren nur 2 von geforderten 5 bis 6 Schritten eines
     normalen Scroll-Flicks, und bei kräftigem Scrollen wurden die ersten
     beiden ganz übersprungen. Bei 750vh bekommt jedes Band rund 130vh. */
  --hero-hoehe:750vh;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;      /* Rückfall zuerst */
  overflow-x:clip;
}
html{scroll-behavior:smooth}

body{
  margin:0;
  /* Bezugsrahmen für .kurve-ebene. Ohne das rechnet deren height:100%
     gegen den Viewport statt gegen die Seite und ergibt null. */
  position:relative;
  background:var(--canvas);
  color:var(--text-primary);
  font:400 clamp(1rem,.95rem + .25vw,1.14rem)/1.6 var(--body);
  hyphens:auto;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.16;            /* nie unter 1.15: Ä Ö Ü brauchen den Platz */
  letter-spacing:-.01em;
  overflow-wrap:normal;        /* erbt sonst break-word und bricht mitten im Wort */
  hyphens:manual;
  margin:0 0 .6em;
  text-wrap:balance;
}
@media (max-width:768px){
  h1,h2,h3{hyphens:auto}       /* Ersatznetz auf schmalen Schirmen */
}

h1{font-size:clamp(2.3rem,1.4rem + 3.6vw,4.4rem)}
h2{font-size:clamp(1.8rem,1.3rem + 2vw,3rem)}
h3{font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);margin-bottom:.4em}
p{margin:0 0 1em}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover)}

.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em}
.klein{font-size:.875rem;color:var(--text-secondary)}
.lead{font-size:clamp(1.1rem,1rem + .6vw,1.45rem);color:var(--text-primary);max-width:46ch}
.fussnote{font-size:.9rem;color:var(--text-secondary);max-width:58ch}
.abstand{margin-top:2rem}
/* Preise und Zeiten nie zwischen Zahl und Einheit trennen.
   Die Bewertungszeile ist bewusst NICHT dabei: als ganzer Satz gesetzt
   lief sie bei 320 px auf 502 px hinaus, ohne dass ein Element eine zu
   breite Box meldete. Die Zahl selbst hält ein geschütztes Leerzeichen
   im Markup zusammen. */
.preis,.zeiten dd{white-space:nowrap}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
/* Der Ring sitzt mit outline-offset NEBEN dem Knopf, also auf dem dunklen
   Grund, nicht auf der Akzentfläche. Mit --accent-ink hatte er dort 1,00:1
   gegen sich selbst und war unsichtbar (gemessen mit review/pruefen.mjs).
   Gegen den Grund tragen 16,55:1 auf --canvas und 13,19:1 auf --panel-hoch.
   Der dunkle Innenring trennt ihn zusätzlich von der orangen Fläche. */
.btn:focus-visible,.auf-akzent:focus-visible{
  outline-color:var(--text-primary);
  box-shadow:0 0 0 2px var(--accent-ink);
}

/* ---------- Entwurfs-Leiste ----------
   Nicht optional und bewusst nicht schliessbar: Sie traegt die Kennzeichnung
   fuer die ganze Seite an einer Stelle, statt an einem Dutzend. Sie meldet
   ihre Hoehe nach --entwurfs-leiste-h, damit oben fixierte Elemente nicht
   darunter geraten. */
:root{--entwurfs-leiste-h:34px}
.entwurfs-leiste{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--entwurfs-leiste-h);
  padding:.4rem clamp(.75rem,3vw,1.5rem);
  background:var(--accent);color:var(--accent-ink);
  font:500 .78rem/1.3 var(--body);
  text-align:center;
  box-shadow:0 1px 0 rgba(5,8,12,.35);
}
.entwurfs-leiste b{font-family:var(--mono);font-weight:400;letter-spacing:.14em}
body{padding-top:var(--entwurfs-leiste-h)}
.nav{top:var(--entwurfs-leiste-h)}
@media (max-width:640px){
  :root{--entwurfs-leiste-h:52px}
  .entwurfs-leiste{font-size:.72rem;line-height:1.25}
}

.skip{
  position:fixed;top:calc(var(--entwurfs-leiste-h) + .5rem);left:.5rem;z-index:100;
  transform:translateY(-200%);
  background:var(--canvas);color:var(--text-primary);
  padding:.7rem 1.1rem;border-radius:var(--radius);
  border:1px solid var(--accent-muted);
  transition:transform .2s var(--ease);
}
.skip:focus-visible{transform:none}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  background:var(--accent);color:var(--accent-ink);
  font:500 .95rem/1.25 var(--body);
  padding:.85rem 1.4rem;border:0;border-radius:999px;
  text-decoration:none;cursor:pointer;
  text-align:center;
  /* normal statt nowrap: nowrap sprengte bei 320 px den Viewport, und das
     vom body geerbte break-word zerriss "Erstgespräch" mitten im Wort.
     So bricht der Text nur am Leerzeichen. */
  overflow-wrap:normal;
  hyphens:manual;
  text-shadow:none;                    /* auf Knöpfen liest ein Schatten als Schmutz */
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{background:var(--accent-hover);color:var(--accent-ink);transform:translateY(-1px)}
/* gap:0, sonst schiebt der Flex-Abstand eine Lücke vor das Komma
   des angehängten Zusatzes: "Erstgespräch , kostenfrei" */
.btn-klein{padding:.55rem 1rem;font-size:.85rem;gap:0;white-space:nowrap}
.btn-still{
  background:transparent;color:var(--accent);
  border:1px solid var(--accent-muted);
}
.btn-still:hover{background:var(--accent-muted);color:var(--text-primary)}
@media (pointer:coarse){
  .btn{min-height:44px}
}

/* ---------- Hintergrundflor: eine Ebene für die ganze Seite ---------- */
.flor{
  position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 75% 15%,rgba(230,120,45,.07),transparent 70%),
    radial-gradient(50% 45% at 15% 70%,rgba(120,150,175,.06),transparent 70%);
  animation:treiben 90s var(--ease) -20s infinite alternate;
}
@keyframes treiben{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(2.5%,-2%,0) scale(1.06)}
}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2.5rem);
  background:rgba(13,18,24,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(159,173,184,.12);
}
.nav-marke{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  color:var(--text-primary);text-decoration:none;white-space:nowrap;
}
.nav-liste{
  display:flex;gap:1.25rem;list-style:none;margin:0;padding:0;
  margin-inline-end:auto;overflow-x:auto;scrollbar-width:none;
}
.nav-liste::-webkit-scrollbar{display:none}
.nav-liste a{
  color:var(--text-secondary);text-decoration:none;font-size:.88rem;white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav-liste a:hover,.nav-liste a.aktiv{color:var(--text-primary)}
.nav-liste a.aktiv{text-decoration:underline;text-underline-offset:6px;
  text-decoration-color:var(--accent)}
@media (max-width:900px){
  .nav-marke{display:none}
  .nur-breit{display:none}
  /* Weicher Auslauf statt harter Schnittkante: zeigt, dass die Liste weitergeht */
  .nav-liste{
    mask-image:linear-gradient(90deg,#000 82%,transparent 100%);
    gap:1rem;
  }
  .nav-liste a{font-size:.82rem}
}

/* =========================================================
   HERO mit Scroll-Film
   ========================================================= */
.hero{position:relative;height:var(--hero-hoehe);z-index:1}
.buehne{
  /* Unter der Entwurfs-Leiste kleben, nicht darunter verschwinden. */
  position:sticky;top:var(--entwurfs-leiste-h);
  height:calc(100svh - var(--entwurfs-leiste-h));overflow:hidden;
  background:var(--canvas);
  isolate:isolate;isolation:isolate;
}
.poster,.hero .buehne video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.poster{background:center/cover no-repeat var(--canvas)}
.hero .buehne video{
  opacity:0;
  transition:opacity .6s var(--ease);
  will-change:transform;
  transform:translateZ(0);
}
.buehne.film-bereit video{opacity:1}
.buehne.film-fehlt video{display:none}

/* Grundschleier: kein Bild steht je roh hinter dem Text */
/* Zwei Ebenen. Der seitliche Verlauf steht dauerhaft und dunkelt die Seite
   ab, auf der die Texte liegen. Er nimmt dem Band-Schleier Arbeit ab, und
   vor allem bricht er dessen Kreisform: allein getragen zeichnete sich der
   Band-Schleier als sichtbarer Bogen in den Morgenhimmel. */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(8,11,16,.60) 0%,
      rgba(8,11,16,.42) 24%,
      rgba(8,11,16,.16) 46%,
      rgba(8,11,16,0) 66%),
    radial-gradient(ellipse 120% 90% at 50% 45%,
      rgba(8,11,16,0) 30%,rgba(8,11,16,.66) 100%);
}

.ring{
  position:absolute;right:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,4vw,2.5rem);
  width:44px;height:44px;color:var(--accent);
  transform:rotate(-90deg);
  transition:opacity .4s var(--ease);
}
.buehne.film-bereit .ring{opacity:0}

.cue{
  position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);
  color:var(--text-secondary);letter-spacing:.22em;text-transform:uppercase;
  font-size:.68rem;
  animation:atmen 3.5s var(--ease) -1.2s infinite alternate;
}
@keyframes atmen{from{opacity:.3}to{opacity:.9}}

/* ---------- Die Bänder ---------- */
.baender{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;
  left:clamp(1.25rem,6vw,5rem);
  top:50%;transform:translateY(-50%);
  width:min(46ch,52vw);
  margin:0;
  opacity:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.9rem,1.1rem + 3.2vw,3.9rem);
  line-height:1.16;
  letter-spacing:-.015em;
  text-shadow:var(--tshadow);
  overflow-wrap:normal;
}
.band > *{position:relative;z-index:1}
/* Band-Schleier: dimmt genau dort, wo dieses Band steht, und nur solange */
/* Breiter und dichter als die uebliche Vorgabe, und das ist gemessen, nicht
   geschaetzt: Der Morgenhimmel wird gegen Ende der Reise fast weiss. Mit dem
   schmaleren Verlauf lag Band 5 bei 1,73:1, Band 4 bei 2,24:1 und Band 3 bei
   3,12:1. Der Verlauf laeuft bei 88 Prozent aus, damit die Ecken lebendig
   bleiben: dimmen, nicht platt machen. */
.band::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  /* Die Flaeche reicht bewusst weit ueber den Viewport hinaus. Mit einem
     knapp sitzenden inset schnitt die Elementkante den Verlauf ab, bevor er
     durchsichtig war, und der Schleier stand als sichtbares Rechteck im
     Bild. Die Ellipse laeuft jetzt innerhalb der Flaeche vollstaendig aus. */
  left:50%;top:50%;
  width:170vw;height:190vh;
  transform:translate(-50%,-50%);
  opacity:calc(.25 + .75*var(--k,1));
  /* Viele Zwischenstufen, damit der Rand nicht als Bogen sichtbar wird. */
  background:radial-gradient(ellipse 44vw 40vh at center,
    rgba(5,8,12,.66) 0%,
    rgba(5,8,12,.58) 38%,
    rgba(5,8,12,.42) 60%,
    rgba(5,8,12,.24) 78%,
    rgba(5,8,12,.09) 90%,
    rgba(5,8,12,0) 100%);
}
/* Band 5 traegt Überschrift, Lead und Aktionszeile, ist also deutlich hoeher
   als die uebrigen, und es liegt auf dem hellsten Teil des Films. Gemessen
   lag es mit der Standard-Ellipse bei 1,73:1. */
.band-5::before{
  background:radial-gradient(ellipse 52vw 48vh at center,
    rgba(5,8,12,.70) 0%,
    rgba(5,8,12,.62) 40%,
    rgba(5,8,12,.46) 62%,
    rgba(5,8,12,.26) 80%,
    rgba(5,8,12,.10) 91%,
    rgba(5,8,12,0) 100%);
}
.band .btn,.band .chip{text-shadow:none}

.band-5{width:min(52ch,58vw)}
.band-5 h1{
  font-size:clamp(2.1rem,1.2rem + 3.4vw,4.2rem);
  margin:0 0 .5rem;
  max-width:18ch;
}
.band-5 .lead{
  font-family:var(--body);font-weight:400;
  font-size:clamp(1rem,.95rem + .55vw,1.35rem);
  line-height:1.5;letter-spacing:0;
  color:var(--text-primary);
  max-width:38ch;margin-bottom:1.6rem;
}
.band-5 .tat{
  display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;
  pointer-events:auto;
  font-family:var(--body);font-size:1rem;letter-spacing:0;
}
.chip{
  font-family:var(--mono);font-size:.72rem;
  background:rgba(10,14,20,.6);
  border:1px solid rgba(159,173,184,.26);
  border-radius:var(--radius);
  padding:.5rem .75rem;
  backdrop-filter:blur(10px);
  color:var(--text-primary);
  white-space:nowrap;
}

/* ---------- Auftritte: nur transform und opacity, scroll-gescrubbt ---------- */
.w{display:inline-block;white-space:pre}
.c{display:inline-block}

/* (a) Schärfen: zwei Kopien, statische Unschärfe, nur Deckkraft bewegt sich */
.band .weich,.band .scharf{display:block}
.band .weich{
  position:absolute;inset:0;
  filter:blur(11px);
  opacity:calc(1 - var(--k,0));
}
.band .scharf{opacity:var(--k,0)}

/* (f) Sinken */
[data-auftritt="sinken"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (d) Stoß mit Überschwingen */
[data-auftritt="stoss"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - .1)*3.2,1);
  opacity:var(--kc);
  transform:scale(calc(.66 + .46*var(--kc) - .12*var(--ks)));
}
/* (b) Einsortieren in Leserichtung */
[data-auftritt="einsortieren"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* (e) Aufsteigen in drei Ankünften */
[data-auftritt="aufsteigen"] h1 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
[data-auftritt="aufsteigen"] .lead{
  --ks:clamp(0,(var(--k,0) - .5)*3.4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 16px));
}
[data-auftritt="aufsteigen"] .tat{
  --kb:clamp(0,(var(--k,0) - .68)*4,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 14px));
}

/* ---------- Statischer Hero ---------- */
.hero-still{display:none;position:relative;
  min-height:calc(100svh - var(--entwurfs-leiste-h));z-index:1}
/* Nicht die Bildmitte, sondern der rechte Bildteil: dort stehen Sonne und
   Kamm. Bei einem hochkant beschnittenen 16:9-Bild fiele beides sonst weg. */
.still-bild{
  position:absolute;inset:0;
  background:72% center/cover no-repeat var(--canvas);
}
/* Der Verlauf sichert den Kontrast unter der Headline, darf aber das Bild
   nicht auslöschen: oben bleibt der Nebel sichtbar, unten geht er in den
   Seitengrund über. */
.still-bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,11,16,.30) 0%,
    rgba(8,11,16,.62) 42%,
    rgba(8,11,16,.88) 78%,
    var(--canvas) 100%);
}
.still-text{
  position:relative;z-index:1;
  padding:clamp(5rem,14vh,9rem) clamp(1.25rem,6vw,3rem) clamp(3rem,8vh,5rem);
  max-width:var(--breit);margin-inline:auto;
}
/* Eigene, flachere Skala: mit der vollen Hero-Größe bricht "zurück" bei
   390 px in "zu-rück", und eine Silbentrennung mitten im Display-Text
   zerreißt die Zeile optisch. */
.still-text h1{
  font-size:clamp(1.95rem,1.25rem + 2.6vw,3.6rem);
  max-width:17ch;text-shadow:var(--tshadow);
}
.still-text .lead{max-width:40ch;text-shadow:var(--tshadow)}
.still-text .tat{margin:1.8rem 0 1rem}
.still-text .mono.klein{font-size:.78rem}

/* =========================================================
   DIE FÜNF TORE — zeichengleich in app.js
   ========================================================= */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .hero-still{display:block}
  .kurve-ebene{display:none}
}

/* Flache Fenster behalten den Film, verlieren nur die kleinen Überlagerungen */
@media (max-height:560px){
  .cue,.ring{display:none}
}

/* =========================================================
   Die Messkurve als durchgehende Ebene
   ========================================================= */
/* Beginnt erst NACH dem Hero: im Hero läge sie sonst über dem Film. */
.kurve-ebene{
  position:absolute;left:0;top:var(--hero-hoehe);width:clamp(46px,7vw,110px);
  height:calc(100% - var(--hero-hoehe));
  z-index:2;pointer-events:none;color:var(--accent);
}
.kurve{width:100%;height:100%;opacity:.5}
.kurve-pfad{
  filter:drop-shadow(0 0 6px rgba(230,120,45,.45));
}
@media (max-width:1024px){
  .kurve-ebene{width:28px}
}

/* =========================================================
   Abschnitte
   ========================================================= */
.abschnitt{
  position:relative;z-index:3;
  padding-block:clamp(4rem,9vw,8.5rem);
  padding-inline:clamp(1.25rem,6vw,3rem);
}
.abschnitt.ruhig{padding-block:clamp(5rem,12vw,11rem)}
.abschnitt.dicht{background:linear-gradient(180deg,transparent,rgba(21,30,38,.55) 18%,rgba(21,30,38,.55) 82%,transparent)}
.inhalt{max-width:var(--breit);margin-inline:auto;width:100%}
.inhalt.schmal{max-width:760px}
.inhalt.mitte{text-align:center}
.inhalt.mitte .lead{margin-inline:auto}

.label{
  color:var(--accent);text-transform:uppercase;letter-spacing:.16em;
  margin-bottom:.8rem;
}

.zwei{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  align-items:start;
}
.zwei > *{min-width:0}   /* sonst setzt ein langes Kompositum die Mindestbreite */

.kasten{
  background:var(--panel-hoch);
  border:1px solid rgba(159,173,184,.14);
  border-radius:var(--radius-gross);
  padding:clamp(1.25rem,3vw,2rem);
}
.kasten .mono.klein{color:var(--text-secondary);margin-bottom:.2rem}

/* Beide Selektoren nötig: die generische Regel .raster p weiter unten hat
   mit (0,1,1) mehr Gewicht als ein einzelnes .preis und färbte die Preise
   grau und klein. Gemessen: rgb(159,173,184) statt rgb(230,120,45). */
.preis,
.raster .preis{
  font-family:var(--mono);
  font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);
  color:var(--accent);
  margin:0 0 .35rem;
}

/* Anliegen */
.anliegen-liste{list-style:none;margin:2.5rem 0 2rem;padding:0}
.anliegen-liste li{
  display:flex;gap:1rem;align-items:baseline;
  padding:1rem 0;
  border-top:1px solid rgba(159,173,184,.14);
  min-width:0;
}
.anliegen-liste li:last-child{border-bottom:1px solid rgba(159,173,184,.14)}
.nr{color:var(--accent);flex:0 0 auto}

/* Kartenraster */
.raster{
  list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  align-items:start;
}
.raster li{
  background:var(--panel);
  border:1px solid rgba(159,173,184,.12);
  border-radius:var(--radius);
  padding:1.25rem;
  min-width:0;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.raster li:hover{border-color:var(--accent-muted);transform:translateY(-2px)}
.raster h3{font-size:1.05rem;margin-bottom:.35rem}
.raster p{margin:0;font-size:.9rem;color:var(--text-secondary)}
.preise li.hervor{border-color:var(--accent);background:var(--panel-hoch)}
/* 6 Karten gehen in 3 Spalten glatt auf (3+3). Bei 4 Spalten bleiben zwei
   allein in der zweiten Reihe stehen und daneben klafft eine Lücke. */
.preise{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* Der eine interaktive Moment */
.halten{
  margin:2.5rem 0 1rem;
  background:var(--panel);
  border:1px solid rgba(159,173,184,.12);
  border-radius:var(--radius-gross);
  padding:clamp(1.25rem,3vw,2rem);
  color:var(--accent);
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}
.halten-hinweis{
  color:var(--text-secondary);letter-spacing:.18em;text-transform:uppercase;
  font-size:.68rem;margin-bottom:1rem;
}
/* Kein max-height: das erzeugt bei erhaltenem Seitenverhältnis nur Leerraum
   über und unter der Kurve. Die Höhe folgt aus der viewBox. */
.halten-svg{display:block;width:100%;height:auto}
.halten-unscharf{opacity:calc(1 - var(--h,0));filter:blur(7px)}
.halten-scharf{opacity:var(--h,0)}
.halten-punkte circle{
  fill:var(--accent);
  opacity:clamp(0,(var(--h,0) - .55)*3,1);
}
.halten-text{
  margin:1.2rem 0 0;color:var(--text-secondary);font-size:.92rem;max-width:52ch;
  opacity:clamp(0,(var(--h,0) - .7)*3.4,1);
  transition:opacity .2s var(--ease);
}

/* Bildband mit dem Schlussbild des Films.
   Zwei Ebenen: die äußere beschneidet, die innere bewegt sich. Eine
   Transform-Property je Element, sonst überschreiben sie einander. */
.bildband{
  position:relative;z-index:3;
  height:clamp(200px,34vw,420px);
  overflow:hidden;
  isolation:isolate;
}
.bildband-bild{
  position:absolute;inset:-12% 0;
  background:center 40%/cover no-repeat;
  will-change:transform;
}
.bildband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--canvas) 0%,transparent 22%,
    transparent 78%,var(--canvas) 100%);
}

/* Stimmen */
.bewertung{
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);
  color:var(--accent);margin-bottom:.4rem;
}

/* FAQ */
.faq{margin:2.5rem 0 0}
.faq > div{
  padding:1.35rem 0;
  border-top:1px solid rgba(159,173,184,.14);
}
.faq > div:last-child{border-bottom:1px solid rgba(159,173,184,.14)}
.faq dt{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  line-height:1.25;margin-bottom:.5rem;
  overflow-wrap:normal;
}
.faq dd{margin:0;color:var(--text-secondary);max-width:62ch}

/* Kontakt */
address{font-style:normal;margin-bottom:1rem;line-height:1.7}
.zeiten{margin:0 0 1.5rem}
.zeiten > div{display:flex;gap:1rem;padding:.45rem 0;
  border-bottom:1px solid rgba(159,173,184,.1)}
.zeiten dt{color:var(--text-secondary);flex:0 0 5.5rem}
.zeiten dd{margin:0}

.hinweis{
  background:var(--panel-hoch);
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:.9rem 1.1rem;font-size:.92rem;color:var(--text-primary);
}
.feld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.feld label{font-size:.85rem;color:var(--text-secondary)}
.feld input,.feld textarea{
  font:400 1rem/1.5 var(--body);
  background:var(--panel);color:var(--text-primary);
  border:1px solid rgba(159,173,184,.24);
  border-radius:var(--radius);
  padding:.7rem .85rem;width:100%;
  transition:border-color .2s var(--ease);
}
.feld input:focus,.feld textarea:focus{border-color:var(--accent)}
.feld .fehler{color:var(--accent-hover);font-size:.85rem}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.erfolg{
  margin-top:1rem;padding:.9rem 1.1rem;
  background:var(--panel-hoch);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;font-size:.92rem;
}
[hidden]{display:none !important}

/* Entwurfshinweis */
.entwurf{
  background:var(--panel);
  border-block:1px solid rgba(159,173,184,.14);
  padding-block:clamp(2rem,5vw,3.5rem);
}
.entwurf .mono.klein{color:var(--accent);letter-spacing:.16em;text-transform:uppercase}
.entwurf p:last-child{color:var(--text-secondary);font-size:.92rem;margin:0}

/* Fuß */
.fuss{
  position:relative;z-index:3;
  padding-block:clamp(2.5rem,6vw,4rem);
  padding-inline:clamp(1.25rem,6vw,3rem);
  border-top:1px solid rgba(159,173,184,.14);
}
.fuss .mono{color:var(--text-secondary)}
.fuss-liste{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;
  margin:1rem 0;padding:0;font-size:.9rem}

/* =========================================================
   Auftritte beim Scrollen (Abschnitte)
   ========================================================= */
.abschnitt .inhalt > *,
.fuss .inhalt > *{
  opacity:1;                 /* Startzustand setzt app.js, nie das CSS */
}
.js .abschnitt:not(.sichtbar) .inhalt > *{
  opacity:0;
  transform:translateY(18px);
}
.js .abschnitt .inhalt > *{
  transition:opacity .6s var(--ease-aus),transform .6s var(--ease-aus);
}
.js .abschnitt.sichtbar .inhalt > *{opacity:1;transform:none}
.js .abschnitt.sichtbar .inhalt > :nth-child(2){transition-delay:.08s}
.js .abschnitt.sichtbar .inhalt > :nth-child(3){transition-delay:.16s}
.js .abschnitt.sichtbar .inhalt > :nth-child(4){transition-delay:.24s}
/* Staffel-Verzögerung nach dem Auftritt zurücknehmen, sonst hängt jeder
   spätere Hover um genau diesen Betrag hinterher. Selektor muss die
   nth-child-Regeln oben schlagen. */
.js .abschnitt.fertig .inhalt > :nth-child(2),
.js .abschnitt.fertig .inhalt > :nth-child(3),
.js .abschnitt.fertig .inhalt > :nth-child(4){transition-delay:0s}

/* =========================================================
   Reduzierte Bewegung: vollständig, inklusive Pseudo-Elemente
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .js .abschnitt .inhalt > *{opacity:1 !important;transform:none !important}
  .halten-unscharf{opacity:0}
  .halten-scharf{opacity:1}
  .halten-punkte circle{opacity:1}
  .halten-text{opacity:1}
  .halten-hinweis{display:none}
  .flor{animation:none}
}

/* Laufende Schleifen ruhen lassen, wenn der Tab versteckt ist.
   animation-play-state vererbt nicht, deshalb jedes Element einzeln. */
body.ruht *,body.ruht *::before,body.ruht *::after{
  animation-play-state:paused !important;
}