/* KRUME — Bäckerei. Grammatik kommt aus ../grammatik.css.
   Farbe hergeleitet (siehe ../VISIONEN.md):
     Grund   Leinen      der Teig gärt im Leinentuch
     Schrift Krustenbraun der Rand jeder aufgeschnittenen Krume
     Akzent  Ofenrot      die Glut hinter der Ofenklappe
   Hell, weil eine Bäckerei morgens bei Tageslicht verkauft. */
@font-face{font-family:'AlfaSlab';src:url('fonts/alfaslab.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted';src:url('fonts/schibsted-grotesk-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  --grund:#F1EADC;
  --tiefer:#E7DECB;
  --schrift:#2B1C10;
  --dim:#6B563F;
  --linie:rgba(43,28,16,.20);
  --linie-stark:rgba(43,28,16,.68);
  --akzent:#B4451B;
  --akzent-auf:#F1EADC;
  --anzeige:'AlfaSlab',Georgia,serif;
  --anzeige-gewicht:400;
  --lauf:'Schibsted',system-ui,sans-serif;
  --satz-versal:none;
  --satz-sperr:-.012em;

  /* Text auf Fotos bleibt hier hell — die Bilder sind warm und mitteldunkel. */
  --auf-bild:#FBF6EC;
  --auf-bild-dim:rgba(251,246,236,.84);
  --auf-bild-schatten:0 1px 16px rgba(40,24,10,.92);

  --kopf-schleier:rgba(241,234,220,.86);
  --szene-schleier:linear-gradient(180deg,rgba(30,18,8,.34) 0%,rgba(30,18,8,.04) 32%,rgba(30,18,8,.90) 100%);
  --szene-mitte-scrim:radial-gradient(62% 48% at 50% 50%,rgba(30,18,8,.66) 0%,rgba(30,18,8,.30) 58%,transparent 100%);
  --split-schleier:rgba(30,18,8,.84);
  --wisch-knopf:rgba(241,234,220,.8);
  --schild-grund:rgba(241,234,220,.92);
}

/* Alfa Slab ist sehr schwer — die Zeilen brauchen Luft, nicht Enge. */
.satz{font-size:clamp(30px,5.6vw,74px);line-height:1.04}
.kapitel__name{line-height:1.06}

/* Die Kopfzeile liegt auf hellem Grund, nicht über einem Bild. */
.kopf{color:var(--dim)}
.kopf b{color:var(--schrift)}

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

/* Die vier Stufen benennen die ganze Seite — metaphor system. */
.stufen{list-style:none;margin:clamp(24px,4vh,42px) 0 0;padding:0;display:grid;gap:1px;
  background:var(--linie);border:1px solid var(--linie)}
@media(min-width:720px){.stufen{grid-template-columns:repeat(4,1fr)}}
.stufen li{background:var(--grund);padding:16px 18px}
.stufen b{display:block;font-family:var(--anzeige);font-size:19px;margin-bottom:.3em;
  color:var(--akzent)}
.stufen span{font-size:13.5px;color:var(--dim)}