/* ═══════════════════════════════════════════════════════════════════
   SCROLL-GRAMMATIK — farbneutral.

   Enthält keine Farbe und keine Schrift, nur die Mechanik:
     Parallax-Auftakt · gescrubbte Bildsequenz · Kreis-Reveal
     dazu die ruhigen Bauteile: Paar, Register, Randläufer, Ende

   Jede Seite setzt in ihrer stil.css:
     --grund --tiefer --schrift --dim --linie --akzent --akzent-auf
     --anzeige --lauf --versal --sperr
     --auf-bild (Text über Fotos) --auf-bild-dim
     --kopf-schleier --szene-schleier --scrub-scrim --leiste-spur
     --reveal-scrim --reveal-grund --reveal-tint
   ═══════════════════════════════════════════════════════════════════ */
:root{--rand:clamp(20px,5vw,74px);--ease:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}          /* Lenis übernimmt das Scrollen */
body{margin:0;background:var(--grund);color:var(--schrift);
  font-family:var(--lauf);font-size:17.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--akzent);color:var(--akzent-auf);
  padding:10px 16px;font-weight:600}

.bahn{max-width:1280px;margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-family:var(--anzeige);font-weight:var(--anzeige-gewicht,600);margin:0;
  text-transform:var(--versal,uppercase);letter-spacing:var(--sperr,.02em);line-height:1.1}
h1{font-size:clamp(28px,5.4vw,74px)}
h2{font-size:clamp(24px,3.8vw,50px);max-width:17ch}
.lauf{margin:1.2em 0 0;max-width:46ch;color:var(--dim);font-size:clamp(16px,1.55vw,18.5px)}
.marke{font-family:var(--anzeige);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--akzent);margin:0 0 1.3em}

/* Ueber dem Auftakt liegt die Kopfzeile nur als Schleier auf dem Bild.
   Danach wuerde sie dem Fliesstext im Weg stehen — also geht sie beim
   Runterscrollen weg und kommt beim Hochscrollen mit festem Grund zurueck. */
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:baseline;gap:15px;
  padding:18px var(--rand);font-family:var(--anzeige);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);
  background:linear-gradient(var(--kopf-schleier),transparent);
  transition:transform .34s var(--ease),background-color .28s var(--ease)}
.kopf--fest{background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf--weg{transform:translateY(-105%)}
.kopf b{color:var(--schrift);font-size:15px;letter-spacing:.14em}
.kopf a{margin-left:auto;color:var(--akzent)}

/* ── 1 · Parallax-Auftakt ────────────────────────────────────────── */
.auftakt{position:relative;height:100svh;min-height:560px;overflow:hidden}
.auftakt__ebene{position:absolute;inset:-10% 0;will-change:transform}
.auftakt__ebene img,.auftakt__ebene video{width:100%;height:100%;object-fit:cover}
/* Laeuft im Auftakt ein Video, liegt es ueber dem Standbild und blendet sich
   ein, sobald es wirklich Bilder liefert. Bis dahin steht das Foto. */
.auftakt__ebene video{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.auftakt__ebene video.laeuft{opacity:1}
.auftakt__dunkel{position:absolute;inset:0;background:var(--szene-schleier)}
.auftakt__text{position:absolute;left:0;right:0;bottom:clamp(52px,10vh,116px);
  padding:0 var(--rand);z-index:3;will-change:transform;color:var(--auf-bild,inherit)}
.auftakt__text h1{max-width:14ch}
.auftakt__text .lauf{color:var(--auf-bild-dim,var(--dim))}
/* Die Wort-Huelle haelt die Zeichen eines Wortes zusammen, sonst bricht
   die Zeile mitten im Wort. */
.wort{display:inline-block;white-space:nowrap}
.zeichen{display:inline-block;overflow:hidden;vertical-align:bottom}
.zeichen i{display:inline-block;font-style:normal;transform:translateY(105%)}
.auftakt__hinweis{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  font-family:var(--anzeige);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--auf-bild-dim,var(--dim));margin:0}

/* ── 2 · Gescrubbte Bildsequenz ──────────────────────────────────── */
.scrub{position:relative;background:var(--tiefer)}
.scrub__buehne{position:sticky;top:0;height:100svh;overflow:hidden}
.scrub__canvas,.scrub__poster{position:absolute;inset:0;width:100%;height:100%}
.scrub__poster{object-fit:cover}
/* Wie stark der Scrub abgedunkelt wird, haengt am Bild: eine dunkle Flamme
   braucht kaum etwas, heller Moertel bei Tageslicht viel. */
.scrub__dunkel{position:absolute;inset:0;
  background:var(--scrub-scrim,radial-gradient(72% 62% at 50% 46%,transparent 0%,rgba(0,0,0,.5) 100%))}
.scrub__marke{position:absolute;top:16%;left:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--anzeige);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--auf-bild,var(--schrift));white-space:nowrap;text-shadow:0 2px 20px rgba(0,0,0,.9)}
.scrub__unten{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,90px);padding:0 var(--rand);
  z-index:3;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  color:var(--auf-bild,var(--schrift))}
.scrub__satz{margin:0;font-family:var(--anzeige);font-size:clamp(20px,3.2vw,44px);
  text-transform:var(--versal,uppercase);letter-spacing:var(--sperr,.02em);
  text-shadow:0 2px 26px rgba(0,0,0,.92)}
.scrub__wert{margin-left:auto;font-family:var(--anzeige);font-size:clamp(26px,4.6vw,64px);
  color:var(--akzent);line-height:1;text-shadow:0 2px 26px rgba(0,0,0,.92)}
.scrub__leiste{position:absolute;left:var(--rand);right:var(--rand);bottom:26px;height:1px;
  background:var(--leiste-spur,rgba(255,255,255,.24));z-index:3}
.scrub__leiste i{display:block;height:1px;background:var(--akzent);width:0}

/* ── 3 · Kreis-Reveal ────────────────────────────────────────────── */
/* Der Reveal ist eine eigene Insel: helle Seiten setzen --reveal-grund auf
   ihren dunkelsten eigenen Ton, damit der Text vor UND nach dem Oeffnen
   des Kreises auf demselben Untergrund steht. */
.reveal{position:relative;background:var(--reveal-grund,var(--grund));height:220vh}
.reveal__buehne{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-content:center;text-align:center}
.reveal__maske{position:absolute;inset:0;clip-path:circle(0% at 50% 50%);will-change:clip-path}
.reveal__maske img{width:100%;height:100%;object-fit:cover}
.reveal__maske::after{content:"";position:absolute;inset:0;background:var(--reveal-tint,transparent)}
.reveal__text{position:relative;z-index:3;padding:clamp(30px,5vh,56px) var(--rand);
  color:var(--auf-bild,inherit)}
.reveal__text::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;
  background:var(--reveal-scrim)}
.reveal__text h2{margin-inline:auto;text-shadow:0 2px 30px rgba(0,0,0,.85)}
.reveal__text .lauf{margin-inline:auto;color:var(--auf-bild-dim,var(--dim));
  text-shadow:0 1px 22px rgba(0,0,0,.9)}

/* ── 4 · Laufende Szene ──────────────────────────────────────────────
   Kein Signature-Modul, sondern Bildwelt: das Video laeuft von selbst,
   sobald die Sektion im Bild ist, und haelt an, sobald sie es nicht mehr
   ist. Genau eine Sache bewegt sich, weil sonst nichts drueberliegt.    */
.szene{position:relative;min-height:86svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(34px,7vh,88px) var(--rand);color:var(--auf-bild,var(--schrift))}
.szene__bild{position:absolute;inset:0;z-index:-2}
.szene__bild video,.szene__bild img{width:100%;height:100%;object-fit:cover}
.szene::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--szene-schleier)}
.szene__inhalt{max-width:44ch}
.szene h2{text-shadow:0 2px 28px rgba(0,0,0,.85)}
.szene .lauf{color:var(--auf-bild-dim,var(--dim));text-shadow:0 1px 20px rgba(0,0,0,.9)}
.szene .marke{text-shadow:0 1px 16px rgba(0,0,0,.95)}
/* Die Marke sitzt oben im Bild, nicht beim Text — wie ein Etikett. */
.szene__etikett{position:absolute;top:clamp(74px,12vh,118px);left:var(--rand);margin:0;
  font-family:var(--anzeige);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--auf-bild,var(--schrift));text-shadow:0 1px 18px rgba(0,0,0,.95)}
/* Solange das Video nicht laeuft, steht das Standbild darunter — nie ein Loch. */
.szene__bild video{opacity:0;transition:opacity .6s var(--ease)}
.szene__bild video.laeuft{opacity:1}
.szene__bild img{position:absolute;inset:0}

/* ── Ruhige Bauteile ─────────────────────────────────────────────── */
.abschnitt{padding:clamp(70px,11vh,140px) 0}
.paar{display:grid;gap:clamp(26px,4vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
  .paar{grid-template-columns:1fr 1fr}
  .paar--gedreht>figure{order:2}
}
.paar figure{margin:0;overflow:hidden}
.paar figure img{width:100%;aspect-ratio:1;object-fit:cover;will-change:transform}

.registerbox{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(22px,3.5vh,38px)}
.register{width:100%;border-collapse:collapse;min-width:520px;font-size:16px}
.register caption{text-align:left;font-family:var(--anzeige);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);padding-bottom:12px}
.register th,.register td{text-align:left;padding:14px 10px;border-top:1px solid var(--linie);
  vertical-align:baseline}
.register th{font-family:var(--anzeige);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);font-weight:500}
.register td:first-child{font-family:var(--anzeige);text-transform:var(--versal,uppercase);
  font-size:15px;letter-spacing:.03em}
.register td:last-child,.register th:last-child{text-align:right;white-space:nowrap;color:var(--akzent)}
.register .nb{color:var(--dim);font-size:15.5px;font-family:var(--lauf)}

.randlaeufer{position:relative;overflow:hidden;background:var(--tiefer)}
.randlaeufer img,.randlaeufer video{width:100%;display:block}
/* Laeuft hier ein Video, liegt es ueber dem Standbild und blendet sich ein. */
.randlaeufer video{position:absolute;inset:0;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease)}
.randlaeufer video.laeuft{opacity:1}
.randlaeufer__wort{position:absolute;left:var(--rand);bottom:-.05em;margin:0;
  font-family:var(--anzeige);font-weight:700;text-transform:var(--versal,uppercase);
  font-size:clamp(52px,14vw,200px);line-height:.82;letter-spacing:var(--sperr,.02em);
  color:var(--auf-bild,#F4EDE0);white-space:nowrap;pointer-events:none;
  text-shadow:0 2px 46px rgba(0,0,0,.65)}

.ende{min-height:76svh;display:grid;place-content:center;text-align:center;
  padding:clamp(60px,10vh,120px) var(--rand);gap:1.4em}
.ende h2{margin-inline:auto;max-width:20ch}
.ende .lauf{margin-inline:auto}
.knopf{display:inline-block;justify-self:center;border:1px solid var(--akzent);color:var(--akzent);
  padding:1em 2.2em;font-family:var(--anzeige);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;transition:background-color .35s var(--ease),color .35s var(--ease)}
.knopf:hover{background:var(--akzent);color:var(--akzent-auf)}
.fuss{padding:0 var(--rand) clamp(34px,6vh,60px);text-align:center;
  font-family:var(--anzeige);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center}

/* Ohne Bewegung: alles steht sofort, nichts klebt. */
@media (prefers-reduced-motion:reduce){
  /* Ohne die Bewegung kann die Kopfzeile nicht ausweichen — dann nimmt sie
     sich lieber Platz im Fluss, statt auf dem Text zu liegen. */
  .kopf{position:sticky;background:var(--grund);border-bottom:1px solid var(--linie)}
  .zeichen i{transform:none}
  .scrub__buehne,.reveal__buehne{position:static;height:auto;min-height:70svh}
  .reveal{height:auto}
  .reveal__maske{clip-path:none}
  .auftakt__ebene,.auftakt__text{transform:none !important}
  /* Wer keine Bewegung will, bekommt das Standbild statt des Videos. */
  .szene__bild video,.auftakt__ebene video,.randlaeufer video{display:none}
  .szene{min-height:70svh}
}