/* ═══════════════════════════════════════════════════════════════════
   GEMEINSAME GRAMMATIK — die Sprache aus Runde 1, die Sinan am besten
   gefiel, jetzt farbneutral gemacht.

   Diese Datei enthaelt KEINE Farbe und KEINE Schrift. Sie beschreibt
   nur, wie eine Seite gebaut ist:

     Vollbild-Szene   ein Motiv pro Bildschirm, Text liegt IM Bild
     Wortlauf         Woerter fahren einzeln herein, genau eines
                      traegt die Akzentfarbe
     Label            winziges zentriertes Schild als einzige Chrome
     Kapitel          nummeriert
     Split            zwei Haelften, je ein Objekt
   Dazu die Bauteile aus den spaeteren Runden:
     Wisch, Mosaik, Register, Randlaeufer, Stapelkarten, Ueberlappung

   Jede Seite setzt ihre eigenen Variablen und Schriften in stil.css.
   Pflichtvariablen: --grund --tiefer --schrift --dim --linie --akzent
                     --akzent-auf (Textfarbe AUF der Akzentflaeche)
                     --anzeige (Display-Schrift) --lauf (Textschrift)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --rand:clamp(18px,4.6vw,68px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--schrift);
  font-family:var(--lauf);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}
.weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.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:1320px;margin:0 auto;padding:0 var(--rand)}

/* ── Kopfzeile: so wenig wie moeglich ────────────────────────────── */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:16px;padding:17px var(--rand);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
.kopf b{font-weight:700}
.kopf a{margin-left:auto;color:var(--akzent);font-weight:600}
.kopf::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(var(--kopf-schleier),transparent)}

/* ── Vollbild-Szene ─────────────────────────────────────────────── */
.szene{position:relative;min-height:100svh;overflow:hidden;
  display:grid;align-content:end;padding:0 var(--rand) clamp(46px,9vh,108px)}
.szene__bild{position:absolute;inset:0;z-index:0}
.szene__bild img,.szene__bild video{width:100%;height:100%;object-fit:cover}
.szene__bild::after{content:"";position:absolute;inset:0;background:var(--szene-schleier)}
.szene__inhalt{position:relative;z-index:2;max-width:1320px;margin:0 auto;width:100%}
.szene--mitte{align-content:center;text-align:center}
.szene--mitte .szene__inhalt{display:grid;justify-items:center}
.szene--mitte .szene__bild::before{content:"";position:absolute;inset:0;
  background:var(--szene-mitte-scrim)}

/* Wortlauf: jedes Wort in eigener Maske, genau eines im Akzent */
.satz{margin:0;font-family:var(--anzeige);font-weight:var(--anzeige-gewicht,400);
  text-transform:var(--satz-versal,uppercase);
  font-size:clamp(31px,6.4vw,88px);line-height:.98;letter-spacing:var(--satz-sperr,.01em);
  max-width:16ch}
.szene--mitte .satz{max-width:22ch}
.satz .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.satz .w i{display:inline-block;font-style:normal;transform:translateY(112%);
  transition:transform .9s var(--ease)}
.an .satz .w i{transform:translateY(0)}
.satz .w:nth-child(1) i{transition-delay:.05s}
.satz .w:nth-child(2) i{transition-delay:.13s}
.satz .w:nth-child(3) i{transition-delay:.21s}
.satz .w:nth-child(4) i{transition-delay:.29s}
.satz .w:nth-child(5) i{transition-delay:.37s}
.satz .w:nth-child(6) i{transition-delay:.45s}
.satz .w:nth-child(7) i{transition-delay:.53s}
.satz em{font-style:normal;color:var(--akzent)}

.unter{margin:1.45em 0 0;max-width:46ch;color:var(--dim);
  font-size:clamp(15px,1.5vw,17.5px);
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease) .5s,transform .8s var(--ease) .5s}
.an .unter{opacity:1;transform:none}
.szene--mitte .unter{margin-inline:auto}

/* Label — einzige Chrome, sitzt mitten im Bild */
.label{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);z-index:2;
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--schrift);
  opacity:0;transition:opacity 1s var(--ease)}
.an .label{opacity:1}

/* ── Nummeriertes Kapitel ───────────────────────────────────────── */
.kapitel{position:relative;display:grid;align-items:center;
  padding:clamp(74px,11vh,140px) var(--rand)}
.kapitel__grid{max-width:1320px;margin:0 auto;width:100%;
  display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:880px){
  .kapitel__grid{grid-template-columns:.85fr 1.15fr}
  .kapitel--gedreht .kapitel__grid{grid-template-columns:1.15fr .85fr}
}
.kapitel__nr{font-family:var(--anzeige);font-size:clamp(52px,8.5vw,118px);line-height:.8;
  font-weight:700;color:var(--linie-stark);margin:0 0 .2em}
@supports (-webkit-text-stroke:1px #000){
  .kapitel__nr{color:transparent;-webkit-text-stroke:1px var(--linie-stark)}
}
.kapitel__name{margin:0;font-family:var(--anzeige);font-size:clamp(26px,4.4vw,58px);
  line-height:1;text-transform:var(--satz-versal,uppercase);
  letter-spacing:var(--satz-sperr,.02em);font-weight:var(--anzeige-gewicht,400)}
.kapitel__text{margin:1.3em 0 0;max-width:40ch;color:var(--dim)}
.kapitel__bild{margin:0;overflow:hidden}
.kapitel__bild img,.kapitel__bild video{width:100%;aspect-ratio:16/10;object-fit:cover;
  transform:scale(1.07);transition:transform 1.4s var(--ease)}
.an .kapitel__bild img,.an .kapitel__bild video{transform:scale(1)}

/* ── Split: zwei Haelften ───────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr;min-height:100svh}
@media(min-width:760px){.split{grid-template-columns:1fr 1fr}}
.split__seite{position:relative;display:grid;align-content:end;
  padding:clamp(30px,6vh,64px) clamp(20px,3vw,48px);min-height:54svh;overflow:hidden}
.split__seite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.split__seite::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(transparent 15%,var(--split-schleier))}
.split__seite>*{position:relative;z-index:2}
.split__titel{margin:0;font-family:var(--anzeige);font-size:clamp(24px,3.4vw,44px);
  text-transform:var(--satz-versal,uppercase);font-weight:var(--anzeige-gewicht,400)}
.split__zeile{margin:.5em 0 0;color:var(--dim);font-size:15px;max-width:34ch}

/* ── Wisch: zwei Bilder, eine bewegliche Kante ──────────────────── */
.wisch{position:relative;margin:0;overflow:hidden;touch-action:pan-y;cursor:ew-resize;--pos:62%}
.wisch img{width:100%;display:block}
.wisch__oben{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.wisch__oben img{height:100%;object-fit:cover}
.wisch__griff{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;
  background:var(--akzent);pointer-events:none}
.wisch__griff::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;
  margin:-18px 0 0 -18px;border-radius:50%;border:1px solid var(--akzent);
  background:var(--wisch-knopf)}
.wisch__schild{position:absolute;bottom:14px;pointer-events:none;z-index:3;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--schild-grund);border:1px solid var(--linie);padding:6px 10px}
.wisch__schild--l{left:14px}
.wisch__schild--r{right:14px}
.regler{width:100%;margin:14px 0 0;accent-color:var(--akzent)}
.regler-hinweis{margin:.7em 0 0;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

/* ── Ueberlappung ───────────────────────────────────────────────── */
.ueber{position:relative}
.ueber__karte{background:var(--tiefer);border:1px solid var(--linie);
  padding:clamp(18px,2.4vw,26px);width:min(340px,86%);
  margin:-54px 0 0 auto;position:relative;z-index:3}
@media(min-width:900px){
  .ueber__karte{position:absolute;right:clamp(14px,3vw,42px);bottom:-40px;margin:0}
}
.ueber__karte dt{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--akzent)}
.ueber__karte dd{margin:.3em 0 13px;font-size:15px}
.ueber__karte dd:last-child{margin-bottom:0}

/* ── Mosaik ─────────────────────────────────────────────────────── */
.mosaik{display:grid;gap:2px;background:var(--linie);border:1px solid var(--linie);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.mosaik{grid-template-columns:repeat(3,1fr)}}
.kachel{position:relative;aspect-ratio:1;overflow:hidden;background:var(--tiefer);
  display:flex;flex-direction:column;justify-content:flex-end;padding:13px 14px}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kachel--breit{grid-column:span 2;aspect-ratio:2/1}
.kachel__ton{position:absolute;inset:0}
.kachel b,.kachel span{position:relative;z-index:2}
.kachel b{font-family:var(--anzeige);font-size:16px;font-weight:var(--anzeige-gewicht,400);
  text-transform:var(--satz-versal,uppercase)}
.kachel span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.82;margin-top:3px}
.kachel--foto b,.kachel--foto span{color:#F6F3ED;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.kachel--dunkel{color:#F6F3ED}
.kachel--hell{color:#12131A}

/* ── Register ───────────────────────────────────────────────────── */
.registerbox{overflow-x:auto;-webkit-overflow-scrolling:touch}
.register{width:100%;border-collapse:collapse;min-width:520px;font-size:15.5px}
.register caption{text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);padding-bottom:12px}
.register th,.register td{text-align:left;padding:13px 10px;border-top:1px solid var(--linie);
  vertical-align:baseline}
.register th{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  font-weight:400}
.register td:first-child{font-family:var(--anzeige);font-size:17px;
  font-weight:var(--anzeige-gewicht,400);text-transform:var(--satz-versal,uppercase)}
.register td:last-child,.register th:last-child{text-align:right;white-space:nowrap;
  color:var(--akzent)}
.register .nb{color:var(--dim);font-size:14.5px;font-family:var(--lauf)}

/* ── Stapelkarten ───────────────────────────────────────────────── */
.stapel{margin-top:clamp(24px,4vh,42px)}
.stapelkarte{position:sticky;top:calc(72px + var(--i) * 16px);
  background:var(--tiefer);border:1px solid var(--linie);
  padding:clamp(24px,3.6vw,42px);margin-bottom:18px;
  display:grid;gap:8px 26px;grid-template-columns:1fr}
@media(min-width:760px){.stapelkarte{grid-template-columns:150px 1fr;align-items:start}}
.stapelkarte__uhr{font-family:var(--anzeige);font-size:clamp(28px,3.8vw,46px);
  color:var(--akzent);line-height:1;margin:0}
.stapelkarte h3{margin:0 0 .3em;font-family:var(--anzeige);font-size:clamp(20px,2.4vw,28px);
  font-weight:var(--anzeige-gewicht,400);text-transform:var(--satz-versal,uppercase)}
.stapelkarte p{margin:0;color:var(--dim);max-width:46ch}
.stapelkarte__nr{grid-column:1/-1;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);border-top:1px solid var(--linie);padding-top:14px;margin:6px 0 0}

/* ── Randlaeufer ────────────────────────────────────────────────── */
.randlaeufer{position:relative;overflow:hidden;background:var(--tiefer)}
.randlaeufer img,.randlaeufer video{width:100%;display:block}
.randlaeufer__wort{position:absolute;left:var(--rand);bottom:-.06em;margin:0;
  font-family:var(--anzeige);font-weight:700;
  text-transform:var(--satz-versal,uppercase);
  font-size:clamp(58px,16vw,220px);line-height:.78;letter-spacing:-.03em;
  color:#F6F3ED;white-space:nowrap;pointer-events:none;
  text-shadow:0 2px 46px rgba(0,0,0,.6)}

/* ── Abschluss ──────────────────────────────────────────────────── */
.ende{min-height:78svh;display:grid;place-content:center;text-align:center;
  padding:clamp(60px,10vh,120px) var(--rand);gap:1.5em}
.ende .satz{max-width:20ch}
.knopf{display:inline-block;justify-self:center;border:1px solid var(--akzent);
  color:var(--akzent);padding:1em 2.2em;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;
  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-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center}

.abschnitt{padding:clamp(70px,11vh,140px) var(--rand)}
.marke{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--akzent);
  margin:0 0 1.4em}
.marke span{color:var(--dim)}
.h2{margin:0;font-family:var(--anzeige);font-size:clamp(26px,4.2vw,54px);line-height:1.02;
  text-transform:var(--satz-versal,uppercase);font-weight:var(--anzeige-gewicht,400);max-width:18ch}
.lauf{margin:1.25em 0 0;max-width:50ch;color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .satz .w i{transform:none;transition:none}
  .unter,.label{opacity:1;transform:none;transition:none}
  .kapitel__bild img,.kapitel__bild video{transform:none;transition:none}
  .stapelkarte{position:static}
}