/* GLUT — eigene Farbe und Schrift, Grammatik aus grammatik.css.
   Heiss und kurz: fast neutrales Schwarz mit Ember, schwere Versalien
   in Clash Display. Gegen Folienwerk (kalt, Grotesk, Mono) und Mustang
   (warm, Serif, gemischte Schreibweise) steht hier die laute Variante. */
@font-face{font-family:'Clash';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash';src:url('fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Synonym';src:url('fonts/synonym-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Synonym';src:url('fonts/synonym-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --grund:#100E0D;
  --tiefer:#171413;
  --schrift:#F3EDE4;
  --dim:rgba(243,237,228,.70);
  --linie:rgba(243,237,228,.17);
  --linie-stark:rgba(243,237,228,.50);
  --akzent:#F0672B;
  --akzent-auf:#100E0D;
  --anzeige:'Clash',Impact,sans-serif;
  --anzeige-gewicht:600;
  --lauf:'Synonym',system-ui,sans-serif;
  --satz-versal:uppercase;
  --satz-sperr:-.018em;
  --kopf-schleier:rgba(16,14,13,.78);
  --szene-schleier:linear-gradient(180deg,rgba(16,14,13,.48) 0%,rgba(16,14,13,.04) 34%,rgba(16,14,13,.90) 100%);
  --szene-mitte-scrim:radial-gradient(64% 50% at 50% 50%,rgba(16,14,13,.74) 0%,rgba(16,14,13,.36) 58%,transparent 100%);
  --split-schleier:rgba(16,14,13,.90);
  --wisch-knopf:rgba(16,14,13,.72);
  --schild-grund:rgba(16,14,13,.84);
}

/* Clash traegt schwer — die Zeilen duerfen enger stehen. */
.satz{line-height:.92;font-weight:700}
.kapitel__name{font-weight:600}

.daten{margin:0}
.daten dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--akzent);
  border-top:1px solid var(--linie);padding-top:13px}
.daten dd{margin:.4em 0 18px}

/* Der gepinnte Spalt aus Runde 2 bleibt der Signature-Moment. */
.spalt{height:230vh;position:relative;background:var(--tiefer)}
.spalt__buehne{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-content:center;text-align:center;--p:0}
.spalt__zeile{font-family:var(--anzeige);font-weight:700;
  font-size:clamp(38px,11vw,150px);line-height:.9;text-transform:uppercase;margin:0;
  position:relative;z-index:3;will-change:transform}
.spalt__zeile--oben{transform:translateY(calc(var(--p) * -14vh))}
.spalt__zeile--unten{transform:translateY(calc(var(--p) * 14vh))}
.spalt__zeile em{font-style:normal;color:var(--akzent)}
.spalt__spur{position:absolute;left:50%;top:50%;z-index:2;width:min(58vw,500px);
  transform:translate(-50%,-50%) translateY(calc((1 - var(--p)) * 52vh))
    scale(calc(.9 + var(--p) * .1));will-change:transform}
.spalt__spur img{width:100%;aspect-ratio:16/9;object-fit:cover}
.spalt__hinweis{position:absolute;left:0;right:0;bottom:26px;z-index:4;text-align:center;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin:0}

@media (prefers-reduced-motion:reduce){
  .spalt{height:auto}
  .spalt__buehne{position:static;height:auto;padding:clamp(60px,10vh,120px) var(--rand);--p:1}
  .spalt__zeile{transform:none}
  .spalt__spur{position:static;transform:none;width:100%;margin:22px auto}
}