/* ═══════════════════════════════════════════════════════════════════
   GLUT — "Feuer"

   Dritte eigene Sprache: heller Knochengrund, in den dunkle Feuerbloecke
   geschnitten sind. Kein durchgehendes Schwarz wie in der ersten Runde,
   der Wechsel hell/dunkel IST der Rhythmus. Zwei benannte Techniken:

     layered parallax      — Raum hinten, Rauch davor, Text am langsamsten
     pinned split headline — die Zeile teilt sich, die Glut faehrt hindurch

   Jede besitzt genau eine Sektion, dazwischen bewegt sich nichts.
   ═══════════════════════════════════════════════════════════════════ */
@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{
  --knochen:#F2EDE4;
  --kohle:#17120E;
  --grau:#5C534A;
  --glut:#B3380F;          /* dunkel genug fuer Text auf Knochen */
  --glut-hell:#F0672B;     /* nur auf dunklen Bloecken */
  --linie:#D8D0C3;
  --rand:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.2,.75,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--knochen);color:var(--kohle);
  font-family:'Synonym',system-ui,sans-serif;font-size:17px;line-height:1.58;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--glut);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--glut);color:#fff;padding:10px 16px}

.bahn{max-width:1320px;margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-family:'Clash',Impact,sans-serif;font-weight:600;margin:0;
  line-height:.94;letter-spacing:-.015em;text-transform:uppercase}
h1{font-size:clamp(40px,8.5vw,124px)}
h2{font-size:clamp(30px,5.4vw,76px);max-width:14ch}
h3{font-size:clamp(20px,2.4vw,30px)}
.satzband{font-family:'Synonym',sans-serif;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--grau);margin:0 0 1.5em}
.text{margin:1.2em 0 0;max-width:48ch;color:var(--grau);font-size:16.5px}

.kopf{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;gap:16px;
  align-items:baseline;padding:20px var(--rand);color:var(--knochen);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.kopf b{font-family:'Clash',sans-serif;font-weight:700;font-size:15px;letter-spacing:.12em}
/* Ember haelt ueber dem Hero-Bild die 4.5:1 nicht — die Kopfzeile
   bleibt deshalb knochenweiss, der Akzent lebt in den hellen Sektionen. */
.kopf a{margin-left:auto;color:var(--knochen);
  border-bottom:1px solid rgba(242,237,228,.55);padding-bottom:2px}
.kopf a:hover{border-bottom-color:var(--knochen)}

/* ── layered parallax: der Raum ──────────────────────────────────── */
.feuer{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#0B0908;
  color:var(--knochen)}
.feuer__ebene{position:absolute;inset:-8% 0;will-change:transform}
.feuer__ebene img{width:100%;height:100%;object-fit:cover}
.feuer__ebene--hinten::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,9,8,.72) 0%,rgba(11,9,8,.28) 40%,rgba(11,9,8,.92) 100%)}
.feuer__ebene--rauch{mix-blend-mode:screen;opacity:.62}
.feuer__ebene--rauch img{object-position:center 62%}
/* Der Rauch wird ueber den Verlauf gerechnet und hellt den Textbereich auf.
   Dieser Schleier liegt darueber und haelt die Schrift lesbar. */
.feuer__schleier{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,8,.55) 0%,rgba(11,9,8,0) 30%,
    rgba(11,9,8,.62) 62%,rgba(11,9,8,.90) 100%)}
.feuer__text{position:absolute;left:0;right:0;bottom:clamp(46px,9vh,104px);z-index:3;
  padding:0 var(--rand);will-change:transform}
.feuer__text h1{max-width:12ch}
.feuer__text p{margin:1.1em 0 0;max-width:44ch;color:rgba(242,237,228,.78);font-size:16.5px}
.feuer__marke{font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--glut-hell);margin:0 0 1.1em}

/* ── Helle Sektion ───────────────────────────────────────────────── */
.hell{padding:clamp(64px,11vh,140px) 0}
.hell + .hell{padding-top:0}
.paar{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){
  .paar{grid-template-columns:1.05fr .95fr}
  .paar--gedreht{grid-template-columns:.95fr 1.05fr}
}
.paar figure{margin:0}
.paar figure img{width:100%}

.karte{margin:clamp(26px,4vh,44px) 0 0;border-top:1px solid var(--linie)}
.karte__reihe{display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:15px 0;border-bottom:1px solid var(--linie)}
.karte__name{font-family:'Clash',sans-serif;font-weight:600;font-size:clamp(17px,2vw,22px);
  text-transform:uppercase;letter-spacing:.01em}
.karte__wort{color:var(--grau);font-size:14.5px;text-align:right;max-width:26ch}
.karte__fuss{margin:1.1em 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--glut)}

/* ── pinned split headline ───────────────────────────────────────── */
.spalt{height:230vh;position:relative;background:var(--kohle);color:var(--knochen)}
.spalt__buehne{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-content:center;text-align:center;--p:0}
.spalt__zeile{font-family:'Clash',Impact,sans-serif;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(--glut-hell)}
.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:rgba(242,237,228,.6);margin:0}

/* ── Abschluss ───────────────────────────────────────────────────── */
.tisch{padding:clamp(60px,10vh,130px) 0 clamp(40px,6vh,70px);
  display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr}
@media(min-width:820px){.tisch{grid-template-columns:1.15fr .85fr}}
.knopf{display:inline-block;margin-top:1.7em;background:var(--kohle);color:var(--knochen);
  padding:1.1em 2.2em;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;transition:background .3s var(--ease)}
.knopf:hover{background:var(--glut)}
.daten{margin:0}
.daten dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--glut);
  border-top:1px solid var(--linie);padding-top:13px}
.daten dd{margin:.35em 0 17px}

.fuss{border-top:1px solid var(--linie);padding:24px 0 clamp(40px,6vh,64px);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);
  display:flex;flex-wrap:wrap;gap:8px 26px}

@media (prefers-reduced-motion:reduce){
  .feuer__ebene,.feuer__text{transform:none !important}
  .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}
}

/* ═══════════════════════════════════════════════════════════════════
   RUNDE 4 — Komposition und Bewegtbild.
   Basis bleibt Runde 2: Knochengrund mit dunklen Feuerbloecken.
   Neu: laufendes Bild im Auftakt, Ueberlappung, Mosaik, Register,
   Randlaeufer. Der gepinnte Spalt bleibt.
   ═══════════════════════════════════════════════════════════════════ */
.feuer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.feuer__schleier{z-index:2}

/* Ueberlappung: die Karte ragt ueber die Bildkante */
.ueber{position:relative}
.ueber__karte{background:var(--kohle);color:var(--knochen);border:1px solid rgba(242,237,228,.18);
  padding:clamp(18px,2.4vw,26px);width:min(330px,88%);margin:-54px 0 0 auto;
  position:relative;z-index:3}
@media(min-width:900px){
  .ueber__karte{position:absolute;right:clamp(14px,3vw,40px);bottom:-40px;margin:0}
}
.ueber__karte dt{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--glut-hell)}
.ueber__karte dd{margin:.3em 0 13px;font-size:15px}
.ueber__karte dd:last-child{margin-bottom:0}

/* Mosaik: sechs Kacheln Material */
.mosaik{display:grid;gap:2px;background:var(--linie);border:1px solid var(--linie);
  grid-template-columns:repeat(2,1fr);margin-top:clamp(24px,4vh,42px)}
@media(min-width:760px){.mosaik{grid-template-columns:repeat(3,1fr)}}
.kachel{position:relative;aspect-ratio:1;overflow:hidden;background:var(--kohle);
  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 b,.kachel span{position:relative;z-index:2;color:#F4EFE7;
  text-shadow:0 1px 14px rgba(0,0,0,.92)}
.kachel b{font-family:'Clash',sans-serif;font-weight:600;font-size:17px;text-transform:uppercase;
  letter-spacing:.01em}
.kachel span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.82;margin-top:3px}

/* Register: die Karte als dichte Tabelle */
.register{width:100%;border-collapse:collapse;margin-top:clamp(22px,3.5vh,38px);font-size:15.5px}
.register caption{text-align:left;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--grau);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:.22em;text-transform:uppercase;color:var(--grau);
  font-weight:400}
.register td:first-child{font-family:'Clash',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:17px}
.register td:last-child,.register th:last-child{text-align:right;white-space:nowrap;color:var(--glut)}
.register .nb{color:var(--grau);font-size:14.5px}

/* Randlaeufer auf dunklem Block */
.randlaeufer{position:relative;overflow:hidden;background:var(--kohle)}
.randlaeufer img{width:100%;display:block;opacity:.85}
.randlaeufer__wort{position:absolute;left:var(--rand);bottom:-.07em;margin:0;
  font-family:'Clash',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(64px,17vw,230px);line-height:.78;letter-spacing:-.03em;
  color:#F4EFE7;white-space:nowrap;pointer-events:none;text-shadow:0 2px 48px rgba(0,0,0,.7)}

/* Eine dichte Tabelle darf unter 390px nicht die ganze Seite breit
   machen — sie scrollt in ihrem eigenen Rahmen. */
.registerbox{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:clamp(22px,3.5vh,38px)}
.registerbox .register{margin-top:0;min-width:520px}