/* ═══════════════════════════════════════════════════════════════════
   KRUME — Bäckerei. Die Mechanik steht in ../scroll.css.
   Hier steht nur, wonach diese eine Backstube aussieht.

   Farbe hergeleitet (siehe ../../_demos6/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);
  --akzent:#B4451B;
  --akzent-auf:#F1EADC;

  --anzeige:'AlfaSlab',Georgia,serif;
  --anzeige-gewicht:400;
  --lauf:'Schibsted',system-ui,sans-serif;
  /* Alfa Slab in Versalien wäre eine Wand — die Schrift ist schon schwer genug. */
  --versal:none;
  --sperr:-.012em;

  --auf-bild:#FBF6EC;
  --auf-bild-dim:rgba(251,246,236,.88);

  --kopf-schleier:rgba(241,234,220,.88);
  --szene-schleier:linear-gradient(180deg,rgba(30,18,8,.34) 0%,rgba(30,18,8,.04) 32%,rgba(30,18,8,.90) 100%);

  /* Der Ofen leuchtet von innen — außen herum darf es zufallen. */
  --scrub-scrim:radial-gradient(66% 58% at 50% 46%,transparent 0%,rgba(20,10,2,.72) 100%);
  --leiste-spur:rgba(251,246,236,.26);

  /* Stufe 04. Ein Blick in die Krume ist ein Blick ins Dunkle:
     der Reveal steht auf dem eigenen dunkelsten Ton, nicht auf Leinen. */
  --reveal-grund:#2B1C10;
  /* Die Krume selbst ist hell. Ein Schleier hinter der Schrift saehe darauf
     wie ein Fleck aus — stattdessen liegt die Abtoenung IN der Maske und
     erscheint damit erst, wenn der Kreis das Bild freigibt. */
  --reveal-scrim:transparent;
  --reveal-tint:rgba(43,28,16,.54);
}

/* Alfa Slab ist sehr schwer — die Zeilen brauchen Luft, nicht Enge. */
h1{font-size:clamp(30px,5.4vw,72px);line-height:1.04}
h2{line-height:1.06}
.scrub__satz{line-height:1.06}

/* Der Wert im Scrub ist die Zeit im Ofen — sie läuft mit. */
.scrub__wert{font-size:clamp(24px,4vw,56px);letter-spacing:-.02em}

/* ── Eigener Bauteil: die vier Stufen ────────────────────────────────
   Sie benennen anschließend die ganze Seite — jedes Kapitel, den Scrub,
   den Reveal. Deshalb stehen sie ganz oben und nirgendwo sonst. */
.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);line-height:1.45}

/* Die Stufennummer über jedem Kapitel. */
.stufe-nr{font-family:var(--anzeige);font-size:clamp(30px,4vw,52px);line-height:1;
  color:var(--akzent);margin:0 0 .28em}