/* ═══════════════════════════════════════════════════════════════════
   GLUT — Vision: Heiss. Kurz. Ehrlich.

   Zeile 5 ist das Rueckgrat: der Abend hat vier Zustaende — Anzuenden,
   Glut, Asche, Nachgluehen — und die ganze Seite ist danach benannt.
   Deshalb hier ausnahmsweise VIER Akzenttoene statt einem: jeder
   Zustand besitzt genau einen, keiner taucht ausserhalb seiner Sektion
   auf. Das ist kein Farbfeuerwerk, das ist die Sortierung.

   Gesperrt (Zeile 4): Holzbrett von oben, Rauch als Deko, Jahreszahl,
   und die eigene Vorfassung mit Knochengrund und geteilter Schlagzeile.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-400-normal-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-400-italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-600-normal-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'DMSans';src:url('fonts/dm-sans-400-normal-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DMSans';src:url('fonts/dm-sans-500-normal-latin.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --grund:#161210;
  --tiefer:#0F0C0A;
  --schrift:#EEE5D7;
  --dim:rgba(238,229,215,.70);
  --linie:rgba(238,229,215,.16);
  /* Ein Ton je Zustand — sonst nirgends. */
  --anzuenden:#F0C64E;
  --glut:#E2661F;
  --asche:#A8A099;
  --nachgluehen:#D9604A;
  --rand:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.75,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--schrift);
  font-family:'DMSans',system-ui,sans-serif;font-size:16.5px;line-height:1.62;
  -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:1220px;margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;
  line-height:1.02;letter-spacing:-.014em}
h1{font-size:clamp(38px,6.6vw,88px);max-width:15ch}
h2{font-size:clamp(28px,4vw,52px);max-width:17ch}
h3{font-size:clamp(20px,2.4vw,29px)}
em{font-style:italic;font-weight:400}
.text{margin:1.2em 0 0;max-width:48ch;color:var(--dim)}
.marke{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin:0 0 1.4em}

.kopf{display:flex;align-items:baseline;gap:15px;padding:20px var(--rand);
  border-bottom:1px solid var(--linie);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim)}
.kopf b{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:.02em;
  color:var(--schrift);text-transform:none}
.kopf a{margin-left:auto;color:var(--schrift);border-bottom:1px solid var(--linie);padding-bottom:2px}

.auftakt{padding:clamp(46px,8vh,104px) 0 clamp(40px,6vh,74px)}
.auftakt h1{margin-bottom:.5em}

/* ── Die vier Zustände als Register ──────────────────────────────── */
.register{list-style:none;margin:clamp(22px,4vh,40px) 0 0;padding:0;
  display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:720px){.register{grid-template-columns:repeat(4,1fr)}}
.register li{background:var(--grund);padding:16px 18px}
.register b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:19px;
  margin-bottom:.3em}
.register span{font-size:13.5px;color:var(--dim)}
.register li:nth-child(1) b{color:var(--anzuenden)}
.register li:nth-child(2) b{color:var(--glut)}
.register li:nth-child(3) b{color:var(--asche)}
.register li:nth-child(4) b{color:var(--nachgluehen)}

/* ── Ein Zustand ─────────────────────────────────────────────────── */
.zustand{padding:clamp(56px,9vh,120px) 0;border-top:1px solid var(--linie);position:relative}
.zustand::before{content:"";position:absolute;top:-1px;left:0;width:clamp(60px,12vw,150px);
  height:2px;background:var(--ton)}
.zustand__gitter{display:grid;gap:clamp(24px,4vw,58px);grid-template-columns:1fr;align-items:center}
@media(min-width:880px){
  .zustand__gitter{grid-template-columns:1.05fr .95fr}
  .zustand--gedreht .zustand__gitter{grid-template-columns:.95fr 1.05fr}
}
.zustand figure{margin:0}
.zustand figure img{width:100%}
.zustand__kopf{display:flex;align-items:baseline;gap:12px;margin:0 0 1.2em}
.zustand__nr{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4vw,52px);
  color:var(--ton);line-height:1}
.zustand__name{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.zustand--anzuenden{--ton:var(--anzuenden)}
.zustand--glut{--ton:var(--glut)}
.zustand--asche{--ton:var(--asche)}
.zustand--nachgluehen{--ton:var(--nachgluehen)}

/* ── Die Karte, sortiert nach den vier Zuständen ─────────────────── */
.karte{padding:clamp(60px,10vh,130px) 0;border-top:1px solid var(--linie)}
.karte__gruppe{margin-top:clamp(26px,4vh,46px)}
.karte__titel{font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--linie);margin:0 0 4px}
.karte__reihe{display:grid;gap:2px 20px;grid-template-columns:1fr;
  padding:14px 0;border-bottom:1px solid var(--linie)}
@media(min-width:700px){.karte__reihe{grid-template-columns:minmax(0,.55fr) minmax(0,1fr)}}
.karte__name{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(17px,1.9vw,21px)}
.karte__wort{color:var(--dim);font-size:15px}
.karte__hinweis{margin:1.5em 0 0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim)}

/* ── Tisch ───────────────────────────────────────────────────────── */
.tisch{padding:clamp(60px,10vh,130px) 0 clamp(40px,6vh,64px);border-top:1px solid var(--linie);
  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(--glut);color:#140F0C;
  padding:1.05em 2.2em;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;transition:opacity .3s var(--ease)}
.knopf:hover{opacity:.86}
.daten{margin:0}
.daten dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  border-top:1px solid var(--linie);padding-top:13px}
.daten dd{margin:.4em 0 18px}

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