cd /Users/stclaus/Desktop/portata-neubau/* ═══════════════════════════════════════════════════════════════════
   PORTATA — Phase 3 · Doppelseiten-System und Designsystem

   Aufbau dieser Datei
     1  Schriften
     2  Token (Master §07)
     3  Grundsatz und Typografie
     4  Dokumentmodus — gilt immer, auch ohne JavaScript
     5  Bausteine
     6  Buchmodus — nur unter html[data-book="on"]
     7  Buchphysik: Falz, Woelbung, vier Schattenebenen
     8  Experience Modes
     9  Reduced Motion

   Grundregel: Ohne JavaScript greift ab Abschnitt 6 keine einzige
   Regel. Die Seite bleibt dann ein lineares, vollstaendig lesbares
   Dokument. Der Buchmodus ist Zugabe, nie Voraussetzung.

   Lichtquelle konsistent oben links. Bewegt werden ausschliesslich
   transform und opacity.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ 1 · Schriften ═══════════════════════════════════════════════
   Zwei Familien. Serif traegt die Erzaehlung, Sans traegt Bedienung
   und Zahlen. Kalkulationswerte laufen ueber tabellarische Ziffern
   der Sans statt ueber eine dritte Familie. Beide lokal. */

/* Bodoni Moda, SIL Open Font License 1.1 — Lizenztext liegt unter
   fonts/BodoniModa-OFL.txt. Bezogen aus dem offiziellen
   google/fonts-Repository, lokal gehostet. Keine Laufzeitverbindung
   zu fonts.googleapis.com oder fonts.gstatic.com.
   Variabel in der optischen Groesse (14–84 pt), Gewicht fest 500 —
   damit bleibt die Typohierarchie aus Playfair unveraendert und die
   Haarlinien passen sich der Schriftgroesse an. */
@font-face{
  font-family:'Bodoni Moda';
  font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/bodonimoda-500-latin.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:400 500; font-display:swap;
  src:url(fonts/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ═══ 2 · Token ═══════════════════════════════════════════════════ */

:root{
  --serif:'Bodoni Moda',Didot,'Bodoni MT',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Master §07 */
  --forest-900:#08100D;
  --forest-800:#0D2B25;
  --forest-600:#16403A;
  --navy-900:#101B2A;
  --cream-100:#F5F1E8;
  --paper-50:#FAF7F0;
  --brass-500:#B89355;   /* nur auf dunkel */
  --brass-700:#7D6234;   /* zugaenglicher Akzent auf hell */
  --ink:#1A2420;

  /* Abgeleitet, kein Freihandwert */
  --ink-2:#4a5450;
  /* Loop L3.1: von #6f7873 auf #646D68. Der alte Wert ergab gegen das
     Papier 4,04 und lag damit unter AA — betroffen waren Folio,
     Marginalie, dt, small, taxnote und receipt__label, also acht
     Stellen. Farbton und Saettigung bleiben, nur die Helligkeit
     sinkt; gemessen jetzt 4,74. */
  --ink-3:#646D68;
  --rule:#ded7c7;
  --rule-strong:#bdb3a0;

  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px;
  --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px;

  --measure:62ch;

  /* Motion — Master §05, §06 */
  --t-turn-1:950ms; --t-turn-2:1150ms; --t-fan:1400ms;
  --t-functional:620ms; --t-open:1800ms; --t-crossfade:160ms;
  --e-paper:cubic-bezier(.32,.06,.16,1);
  --e-lift:cubic-bezier(.4,0,.2,1);
  --e-text:cubic-bezier(.22,1,.36,1);

  /* Phase 5 — Material- und Bewegungstoken (Master §21/§35).
     Bestehende Werte werden gespiegelt, nicht verdoppelt: die
     Faerbung bleibt in Abschnitt 2, hier nur die neuen Namen. */
  --color-forest-deep:var(--forest-900);
  --color-paper-cream:var(--cream-100);
  --color-brass-muted:var(--brass-500);
  --color-navy-linen:var(--navy-900);
  --color-walnut:#3A2A1E;
  --color-oak-smoked:#2C2118;
  --color-amber-warm:#C8925A;
  --color-silver:#B9BCC0;
  --color-glass:rgba(226,232,230,.14);

  --shadow-contact:0 3px 5px rgba(0,0,0,.24), 0 1px 0 rgba(0,0,0,.4);
  --shadow-form:0 14px 30px -16px rgba(0,0,0,.5);
  --shadow-ambient:0 40px 70px -40px rgba(0,0,0,.55);

  --motion-fast:var(--t-crossfade);
  --motion-medium:620ms;
  --motion-slow:900ms;
  --ease-material:var(--e-paper);
  --ease-page:var(--e-lift);
  --ease-settle:cubic-bezier(.16,.62,.24,1);
}


/* ═══ 3 · Grundsatz und Typografie ════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; hanging-punctuation:first last}

body{
  margin:0;
  background:var(--cream-100);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,.42vw + 15px,19px);   /* Body 16–20 px */
  line-height:1.68;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
i{font-style:normal}
small{font-size:.8em;color:var(--ink-3);letter-spacing:.01em}

h1,h2{
  font-family:var(--serif); font-weight:500;
  font-optical-sizing:auto;
  line-height:1.06; letter-spacing:-.012em;
  text-wrap:balance;
  margin:0 0 var(--s-24);
  color:var(--ink);
}
h1{font-size:clamp(34px,4.4vw,82px)}          /* Master §07 */
h2{font-size:clamp(32px,3.6vw,62px)}
/* Loop L3.1 · Groessenstufe wiederhergestellt.

   Gemessen war die Hierarchie unterhalb 1440 px eingeebnet: h3, Lead
   und Fliesstext standen alle exakt bei 19 px, weil h3 sein Minimum
   schon bei 1408 px erreicht, der Lead bei 1520 px und der Fliesstext
   sein Maximum bereits bei 952 px — die drei Kurven trafen sich.
   Unterschieden wurden die Ebenen nur noch durch Schriftart und
   Zeilenhoehe, nicht mehr durch Groesse.

   Angehoben wird deshalb allein das Minimum, nicht die Kurve: Der
   fluide Bereich oberhalb 1700 px bleibt, wie er war. Verhaeltnis zum
   Fliesstext jetzt 1,21 bis 1,38 statt 1,00. */
h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(23px,1.35vw,25.5px); line-height:1.24;
  letter-spacing:-.004em;
  margin:var(--s-32) 0 var(--s-8);
}

p{margin:0 0 var(--s-16); max-width:var(--measure); text-wrap:pretty}

.lead{
  /* Loop L3.1: Minimum von 19 auf 21 px — siehe h3. Der Lead lag
     unterhalb 1520 px auf derselben Groesse wie der Fliesstext. */
  font-size:clamp(21px,1.25vw,23px);
  line-height:1.5; letter-spacing:-.006em;
  color:var(--ink); margin-bottom:var(--s-32);
}

/* Kleine typografische Bauteile: Kapitälchen-Anmutung über Tracking,
   nicht über eine zweite Schriftfamilie. */
.eyebrow{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass-700); margin:0 0 var(--s-16); font-weight:500;
}
.marginal{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 var(--s-16);
}
.folio{
  display:flex; align-items:baseline; gap:var(--s-8);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 var(--s-32);
}
.folio b{font-family:var(--serif); font-size:15px; letter-spacing:.06em; color:var(--ink-2)}

/* Ziffern: tabellarisch nur dort, wo Werte untereinander stehen. */
.calc, .price, .receipt, .stat, .dishrow__price, .pct{font-variant-numeric:tabular-nums}

/* Lange deutsche Komposita brechen auf schmalen Blaettern sauber um. */
h1,h2,h3,p,li,dt,dd,td,th,summary{overflow-wrap:break-word}
@media (max-width:460px){ h1,h2,h3,p,li,dd,td,summary{hyphens:auto} }

a{color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--brass-700)}

:focus-visible{outline:2px solid var(--brass-700); outline-offset:3px; border-radius:2px}
section:focus{outline:none}

.skip{
  position:absolute; left:var(--s-8); top:-100px; z-index:100;
  background:var(--paper-50); color:var(--ink);
  border:1px solid var(--rule-strong); padding:var(--s-12) var(--s-16);
}
.skip:focus{top:var(--s-8)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* ═══ 4 · Dokumentmodus ═══════════════════════════════════════════
   Gilt immer. Ohne JavaScript ist das die ganze Seite. */

.top{border-bottom:1px solid var(--rule); background:var(--cream-100)}
.top__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-16); min-height:64px;
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,40px);
}
.top__mark{
  margin:0; font-family:var(--serif); font-size:21px; letter-spacing:.03em;
}
.top__mark i{color:var(--brass-700)}
.top__btn{
  font:inherit; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; color:var(--ink); background:transparent;
  border:1px solid var(--rule-strong); border-radius:2px;
  padding:var(--s-8) var(--s-16); min-height:44px;
}
.top__btn:hover{border-color:var(--brass-700); color:var(--brass-700)}

.index{display:none}
.index[open]{
  display:block; position:static;
  width:100%; max-width:none; max-height:none; margin:0;
  padding:var(--s-32) 0; border:0; border-bottom:1px solid var(--rule);
  background:var(--paper-50); color:var(--ink);
}
.index:modal{
  position:fixed; inset:0;
  width:100%; max-width:100%; height:100%; max-height:100%;
  border:0; border-bottom:0; padding:clamp(24px,7vh,80px) 0;
  overflow-y:auto; background:var(--forest-900); color:var(--cream-100);
}
.index::backdrop{background:rgba(8,16,13,.7)}
.index__inner{max-width:1080px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.index__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-16); margin-bottom:var(--s-32);
}
.index__title{
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); margin:0;
}
.index:modal .index__title{color:var(--brass-500)}
.index:modal .top__btn{color:var(--cream-100); border-color:rgba(245,241,232,.3)}
.index ol{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 var(--s-48);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}
.index li{border-top:1px solid var(--rule)}
.index:modal li{border-color:rgba(245,241,232,.14)}
.index a{
  display:flex; gap:var(--s-16); align-items:baseline;
  min-height:52px; padding-block:var(--s-8);
  text-decoration:none; font-family:var(--serif); font-size:19px;
}
.index a b{
  flex:0 0 2.4em; font-family:var(--serif); font-weight:500;
  font-size:15px; letter-spacing:.04em; color:var(--ink-3);
}
.index:modal a b{color:var(--brass-500)}

/* ── Loop PHASE-1 · Orientierung im Inhaltsverzeichnis ────────────
   Die Kapitelnamen sind Buchtitel, keine Ziele. Wer im Verzeichnis
   „Preise" oder „Kontakt" sucht, findet gemessen keines der beiden
   Woerter. Die Titel bleiben deshalb unangetastet und bekommen eine
   Zweitzeile — klassische Inhaltsverzeichnis-Typografie, keine
   Umbenennung.

   Nur vier der elf Eintraege tragen eine: elf kosten rund 176 Pixel,
   und der Dialog ist bei 390 px bereits 659 Pixel hoch bei 844 Pixel
   Viewport — dort bleiben gemessen 64 Pixel. Eine einzeilige Fassung
   hinter dem Titel schied ebenfalls aus: nach der Ziffer sind 265 bis
   322 Pixel frei, Titel plus Zusatz braucht 335. */
.index__sub{
  display:block;
  font-family:var(--sans); font-style:normal;
  font-size:12px; letter-spacing:.06em; line-height:1.35;
  color:var(--ink-3);
  margin-top:2px;
}

/* ── Loop PHASE-1 · Impressum und Datenschutz im Vorsatz ──────────
   Gemessen mit Trefferpruefung: Auf dem Desktop liegt der Footer
   hinter dem Buchkoerper, an der Stelle des Links greift .page. Im
   Reader-Modus haengt placeFoot() ihn in die letzte Doppelseite.
   Beide Links waren damit nur ueber Kapitel 10 erreichbar —
   Doppelseite 28 von 29, bzw. 10 von 11.

   Das Inhaltsverzeichnis ist aus jedem Kapitel ueber die Kopfzeile
   erreichbar. Ein Verzeichnis, das die Impressumszeile traegt, ist
   Buchvorsatz. Der Buchkoerper, die Kopfzeile und der Footer bleiben
   unberuehrt. */
.index__legal{
  /* Die globale Absatzbreite --measure (62ch) kappte die Trennlinie
     bei 469 statt 1000 Pixeln — sie endete vor der dritten Spalte. */
  max-width:none;
  margin:var(--s-16) 0 0;
  padding-top:var(--s-12);
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:12px; letter-spacing:.06em;
  color:var(--ink-3);
}
.index:modal .index__legal{border-top-color:var(--rule)}
.index__legal a{
  display:inline; min-height:0; padding-block:0;
  font-family:inherit; font-size:inherit; color:inherit;
  text-decoration:underline; text-underline-offset:2px;
}

/* ── Loop PHASE-1 · Verweis von Kapitel zu Kapitel ────────────────
   Zwischen Doppelseite 1 und 26 gab es keine Moeglichkeit zu handeln;
   die Kaufbereitschaft ist aber am Ende von Kapitel 06 am hoechsten.
   Ein Buch loest das nicht mit einer Schaltflaeche, sondern mit einem
   Verweis auf sich selbst. Kein Imperativ, keine Flaeche, keine Farbe
   — gesetzt wie eine Marginalie.

   Der generische Handler in book.js faengt jedes a[href^="#"] ab und
   ruft goChapter(); der Verweis braucht keine eigene Logik.

   Zum Abstand: Eine Laufzeitprobe ergab 136 bis 200 Pixel Luft auf der
   letzten Seite von Kapitel 06 — die Zahl trug nicht. Sie misst ohne
   Neupaginierung; statisch eingehaengt verteilt fillColumn den Inhalt
   anders. Mit --s-24 wuchs Kapitel 06 bei 1440 px von zwei auf drei
   Doppelseiten. Mit --s-12 bleibt es bei zwei, und alle sieben Breiten
   sind wieder deckungsgleich mit dem Stand davor. */
.crossref{
  margin:var(--s-12) 0 0;
  font-size:13px; letter-spacing:.06em;
  color:var(--ink-3);
}
.crossref a{
  color:inherit; text-decoration:underline; text-underline-offset:3px;
}
.crossref a:hover,.crossref a:focus-visible{color:var(--brass-700)}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 · KELLNERBLOCK (Master §19)
   Lederdeckel klappt zurueck, Papierstapel bleibt liegen. Der Winkel
   und die Bewegung selbst kommen aus book.js (animateNotebookOpen/
   Close) — hier nur Material und Ruhezustand. transform-origin:top
   und -116deg als CSS-Grundzustand: ohne Bewegung (reduced motion)
   ist der Block direkt offen, nie dauerhaft verdeckt. */
.notebook{position:relative; perspective:1400px}
.notebook__paper{
  position:absolute; inset:calc(-1 * var(--s-16)) calc(-1 * var(--s-16));
  border-radius:3px;
  background:linear-gradient(180deg, var(--paper-50) 0%, #EDE6D3 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    2px 3px 0 -1px #E5DDCB, 4px 6px 0 -2px #DBD2BD, 6px 9px 0 -3px #D1C7AF,
    0 20px 40px -20px rgba(0,0,0,.5);
}
.index:not(:modal) .notebook__paper{display:none}
.notebook nav{position:relative; z-index:1}
.notebook__cover{
  position:absolute; inset:calc(-1 * var(--s-16)) calc(-1 * var(--s-16));
  z-index:2; transform-origin:top center; transform:rotateX(-116deg);
  border-radius:3px; backface-visibility:hidden;
  background:
    radial-gradient(120% 90% at 20% 6%, rgba(255,247,232,.08) 0%, transparent 52%),
    linear-gradient(150deg, var(--leather-lip) 0%, var(--leather) 30%, var(--leather-edge) 100%);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,247,232,.1);
}
.index:not(:modal) .notebook__cover{display:none}
html[data-book-motion="static"] .notebook__cover{transition:none}

/* Das Papier ist hell — die Schrift darauf muss dunkel sein, auch
   wenn der restliche Dialog (Titel, Schliessen) hell auf dunklem
   Forest-Grund bleibt. Nur die Liste sitzt auf dem Notizblock. */
.index:modal .notebook a{color:var(--ink)}
.index:modal .notebook a:hover span,
.index:modal .notebook a:focus-visible span{color:var(--brass-700)}
.index:modal .notebook li{border-color:var(--rule)}
.index a:hover span,.index a:focus-visible span{text-decoration:underline}
.index a[aria-current="true"] span{color:var(--brass-700)}
.index:modal a[aria-current="true"] span{color:var(--brass-500)}

/* Kapitel im Dokumentmodus: schlichte Abschnitte untereinander. */
.chapter{border-top:1px solid var(--rule); scroll-margin-top:var(--s-16)}
.chapter:first-of-type{border-top:0}
.spread{
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,40px);
}
.page{padding-block:clamp(48px,8vh,96px)}
.page--recto{border-top:1px solid var(--rule)}
.page__inner{max-width:none}
.chapter--board{background:var(--forest-800); color:var(--cream-100)}
.chapter--board h2,.chapter--board .wordmark{color:var(--cream-100)}


/* ═══ 5 · Bausteine ═══════════════════════════════════════════════ */

.wordmark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(52px,8vw,120px); line-height:.98;
  letter-spacing:.01em; margin:0 0 var(--s-16); max-width:none;
}
.wordmark i{color:var(--brass-500)}
.wordmark--small{font-size:clamp(34px,4.5vw,64px); margin-top:var(--s-32)}
.kicker{
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--brass-500); margin:0 0 var(--s-48);
}
.cover__cta{display:flex; flex-wrap:wrap; gap:var(--s-24) var(--s-32); margin:0}

.cta-link{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:inherit;
  border-bottom:1px solid currentColor; text-decoration:none;
  padding-bottom:2px;
}
.cta-link:hover{color:var(--brass-500)}
.chapter:not(.chapter--board) .cta-link:hover{color:var(--brass-700)}
.cta-quiet{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:13px; letter-spacing:.1em; color:var(--ink-3); text-decoration:none;
}
.chapter--board .cta-quiet{color:rgba(245,241,232,.55)}

/* Bildcontainer. Kein Bild, aber verbindliche Flaeche und Verhaeltnis. */
.shot{margin:0 0 var(--s-32)}
.shot__frame{
  background:
    repeating-linear-gradient(-45deg,
      rgba(26,36,32,.045) 0 2px, transparent 2px 9px),
    var(--paper-50);
  border:1px solid var(--rule-strong);
}
.shot__spec{
  font-size:11.5px; line-height:1.5; letter-spacing:.02em;
  color:var(--ink-3); margin-top:var(--s-8); max-width:52ch;
}
.shot__spec b{color:var(--brass-700); font-weight:500}

/* Reale Medien liegen auf dem Papier, nicht in einer Karte: kein
   Rahmen, kein Platzhalter-Raster. Das Seitenverhaeltnis kommt je
   Bild inline von der echten Quellaufloesung (Master §21). */
.shot--media .shot__frame{background:none; border:0}
.shot--media .shot__frame > img,
.shot--media .shot__frame > video{
  display:block; width:100%; height:auto; border-radius:1px;
  object-fit:cover; object-position:center;
}

/* Editorial-Doppelbild: asymmetrisch, kein 50/50-Raster (Master §22/§24).
   Grundform ist der Stapel — nacheinander, nie nebeneinander (Master §30
   fuer Mobile). Das Nebeneinander kommt erst in Spread/Compact dazu. */
.pair{margin:var(--s-24) 0 0}
.pair .shot{margin:0 0 var(--s-24)}
html[data-book="on"]:not([data-book-mode="reader"]) .pair{
  display:flex; align-items:flex-end; gap:var(--s-24);
}
html[data-book="on"]:not([data-book-mode="reader"]) .pair .shot{margin:0}
html[data-book="on"]:not([data-book-mode="reader"]) .shot--pair-a{flex:0 1 42%; align-self:flex-start}
html[data-book="on"]:not([data-book-mode="reader"]) .shot--pair-b{flex:0 1 55%; margin-top:var(--s-48)}

/* Kapitel V: gestapelte Medienfolge statt Vollbild-Bleed. */
.page__inner--media-stack .shot:last-child{margin-bottom:0}
.page__inner--media-stack .shot--vertical{max-width:min(280px,60%); margin-inline:auto}

.stat{
  margin-top:var(--s-32); padding-top:var(--s-16);
  border-top:1px solid var(--rule-strong);
}
.stat b{
  display:block; font-family:var(--sans); font-weight:500;
  font-size:clamp(40px,4vw,68px); line-height:1; letter-spacing:-.01em;
}
.stat .unit{font-size:.5em; color:var(--ink-3)}
.stat span{font-size:13px; letter-spacing:.06em; color:var(--ink-3)}

/* Ebenenliste — kein Dashboard, sondern eine gesetzte Aufzaehlung. */
.layers{list-style:none; margin:var(--s-24) 0; padding:0; counter-reset:l}
.layers li{
  display:grid; grid-template-columns:2.6em 1fr; gap:var(--s-4) var(--s-16);
  padding:var(--s-12) 0; border-top:1px solid var(--rule);
}
.layers__n{font-size:11px; letter-spacing:.16em; color:var(--brass-700); padding-top:.35em}
.layers__t{font-family:var(--serif); font-size:19px; line-height:1.2}
.layers__d{grid-column:2; font-size:14px; color:var(--ink-3); margin:0}
.layers--annot li{grid-template-columns:2.6em 1fr}

/* Rechnung */
.dish{font-family:var(--serif); font-size:19px; margin:var(--s-32) 0 var(--s-8)}
.price{display:flex; flex-wrap:wrap; gap:var(--s-32); margin:0 0 var(--s-24)}
.price div{display:flex; flex-direction:column; gap:2px}
.price dt{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.price dd{margin:0; font-family:var(--sans); font-weight:500; font-size:26px}

table.calc{border-collapse:collapse; width:100%; margin:0 0 var(--s-24)}
table.calc caption{
  text-align:left; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass-700);
  padding-bottom:var(--s-12);
}
table.calc th,table.calc td{
  padding:var(--s-8) 0; text-align:left; font-weight:400;
  border-bottom:1px solid var(--rule); vertical-align:baseline;
}
table.calc td{text-align:right; white-space:nowrap}
table.calc th small{display:block; margin-top:1px}
table.calc tr.sum th,table.calc tr.sum td{
  border-top:1px solid var(--ink); border-bottom:0;
  padding-top:var(--s-12); font-weight:500;
}
.pct{
  display:inline-block; margin-left:var(--s-12);
  font-size:12px; letter-spacing:.08em; font-weight:500;
  padding:2px var(--s-8); border-radius:2px;
}
.pct--warm{background:rgba(125,98,52,.14); color:var(--brass-700)}
.pct--good{background:rgba(22,64,58,.12); color:var(--forest-600)}

.pull-small{font-family:var(--serif); font-size:21px; line-height:1.35; margin:var(--s-24) 0}
blockquote.pull{
  margin:var(--s-32) 0; padding-left:var(--s-24);
  border-left:1px solid var(--brass-700);
  font-family:var(--serif); font-size:clamp(21px,1.6vw,28px);
  line-height:1.32; max-width:var(--measure);
}
.method{
  border-left:1px solid var(--rule-strong); padding-left:var(--s-16);
  font-size:14.5px; line-height:1.6; color:var(--ink-2);
  margin:var(--s-24) 0;
}
.method p{margin-bottom:var(--s-8)}
.method p:last-child{margin-bottom:0}

.timeline{
  list-style:none; margin:var(--s-24) 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s-8) var(--s-12);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.timeline li{display:flex; align-items:center; gap:var(--s-12)}
.timeline li+li::before{content:'—'; color:var(--rule-strong)}

.tags{
  list-style:none; margin:var(--s-16) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s-8);
}
.tags li{
  border:1px solid var(--rule); padding:var(--s-4) var(--s-12);
  font-size:13px; color:var(--ink-2);
}
.tags li i{color:var(--brass-700); font-size:11px; letter-spacing:.08em}

.cases{list-style:none; margin:var(--s-24) 0; padding:0}
.cases li{
  display:grid; grid-template-columns:2.2em 1fr; gap:var(--s-4) var(--s-16);
  padding:var(--s-16) 0; border-top:1px solid var(--rule);
}
.cases__k{font-family:var(--serif); font-size:19px; color:var(--brass-700)}
.cases__t{font-family:var(--serif); font-size:20px}
.cases__d{grid-column:2; font-size:14.5px; color:var(--ink-2)}

/* Leistungen als Menuefolge, nicht als Kartenwand. */
.menu__course{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-700); margin:var(--s-32) 0 var(--s-8);
}
.dishrow{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; gap:0 var(--s-8);
  padding:var(--s-16) 0; border-top:1px solid var(--rule);
}
.dishrow h3{margin:0; font-size:clamp(18px,1.15vw,21px)}
.dishrow__dots{
  border-bottom:1px dotted var(--rule-strong);
  transform:translateY(-.28em);
}
.dishrow__price{font-family:var(--sans); font-weight:500; font-size:clamp(17px,1.05vw,20px); white-space:nowrap}
.dishrow p{grid-column:1/-1; margin:var(--s-8) 0 0; font-size:14.5px; color:var(--ink-2)}
.taxnote{margin-top:var(--s-24); font-size:13px; color:var(--ink-3)}

.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{padding:var(--s-24) 0; border-top:1px solid var(--rule)}
.steps li:first-child{border-top:0; padding-top:0}
.steps__n{
  font-size:11px; letter-spacing:.2em; color:var(--brass-700);
  display:block; margin-bottom:var(--s-4);
}
.steps h3{margin:0 0 var(--s-4)}
.steps__missing{
  font-size:13px; color:var(--ink-3); font-style:italic;
  border-left:1px solid var(--rule-strong); padding-left:var(--s-12);
  margin:var(--s-8) 0 0;
}

/* Loop C1c-L1.2 · Kapitel 08 ist kein Akkordeon mehr.

   Gemessen in Loop C1c-L1: Die Paginierung misst den geschlossenen
   Zustand, das Oeffnen ist ein Laufzeitereignis, und .page traegt
   overflow:hidden. Der Kopfraum lag je nach Breite bei 2 bis 141 px,
   die groesste Antwort bei 92 bis 142 px — bei 1280 px schnitt jede
   der zehn Antworten ab, bei geoeffneten zehn fehlten bis zu 1053 px.
   Reservierter Platz half nicht: stretchColumnTo() fuellt jede neue
   Seite wieder bis an die Kante.

   Die Antworten stehen jetzt im Satz. Damit misst die Paginierung die
   endgueltige Hoehe, und der Fehler kann konstruktiv nicht mehr
   auftreten.

   Es bleibt fast nichts uebrig: Die Fragen nehmen die globale
   h3-Regel und sind damit gewoehnliche Zwischenueberschriften in der
   Serife, die Antworten sind gewoehnliche Absaetze. Kein Rahmen, kein
   Chevron, keine Sonderschrift — Kapitel 08 sieht aus wie jedes
   andere Kapitel.

   Der Container .faq bleibt, weil isSplittable() ihn fuehrt. Das
   Paar .faq__item haelt Frage und Antwort zusammen: die Engine teilt
   entlang der direkten Kinder von .faq, ohne den Wrapper koennte eine
   Frage von ihrer Antwort getrennt auf die naechste Seite rutschen. */
.faq__item > h3{max-width:var(--measure)}

/* Einlegekarte: liegt als eigenes Blatt auf dem Papier. */
.insert{
  background:var(--paper-50);
  border:1px solid var(--rule);
  padding:clamp(20px,2.2vw,36px);
  box-shadow:0 2px 3px rgba(26,36,32,.05), 0 14px 28px -18px rgba(26,36,32,.4);
}
.insert__label{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-700); margin:0 0 var(--s-24);
}
.field{margin-bottom:var(--s-16)}
.field label{
  display:block; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s-4);
}
.field label i{text-transform:none; letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:16px;   /* 16px: iOS zoomt sonst */
  color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--rule-strong); border-radius:0;
  padding:var(--s-8) 0; min-height:44px;
}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--brass-700);
}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
button.cta{
  font:inherit; font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  color:var(--cream-100); background:var(--forest-800);
  border:1px solid var(--forest-800); border-radius:2px;
  padding:var(--s-12) var(--s-24); min-height:48px; margin-top:var(--s-16);
}
button.cta:hover{background:var(--forest-600); border-color:var(--forest-600)}
.formstatus{margin-top:var(--s-12); font-size:14px; min-height:1.5em}
/* Loop RELEASE-FIX-2: Der Hinweis steht ueber dem Statusfeld und wird
   von formMeldung() ausgeblendet, sobald eine Meldung erscheint. Beide
   teilen sich damit denselben Platz, und die Einlegekarte waechst nach
   dem Absenden nie, sondern schrumpft. */
.formnote{margin:var(--s-8) 0 0; font-size:12px; line-height:1.45; color:var(--ink-3)}
.formnote a{color:inherit; text-underline-offset:2px}

.contact{margin-top:var(--s-48); display:grid; gap:var(--s-24)}
.contact dt{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.contact dd{margin:var(--s-4) 0 0}

/* Review-Marker. Wird vor Phase 6 entfernt. */
.note{
  border-left:2px solid var(--brass-700);
  background:rgba(125,98,52,.06);
  padding:var(--s-12) var(--s-16);
  font-size:13px; line-height:1.55; color:var(--ink-2);
  margin:var(--s-24) 0; max-width:var(--measure);
}
.note b{
  display:block; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-700); margin-bottom:2px;
}

.foot{
  border-top:1px solid var(--rule); background:var(--forest-900);
  color:rgba(245,241,232,.72); padding-block:var(--s-48);
  font-size:14px;
}
.foot__inner{max-width:1280px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.foot-mark{font-family:var(--serif); font-size:21px; margin:0 0 var(--s-8); color:var(--cream-100)}
.foot-mark i{color:var(--brass-500)}
.foot-top{display:grid; gap:var(--s-32); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.foot h3{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-500); margin:0 0 var(--s-12);
}
.foot ul{list-style:none; margin:0; padding:0}
.foot a{color:var(--cream-100); min-height:32px; display:inline-flex; align-items:center}
.foot-bottom{
  margin-top:var(--s-32); padding-top:var(--s-16);
  border-top:1px solid rgba(245,241,232,.14);
  display:flex; flex-wrap:wrap; gap:var(--s-8) var(--s-24);
  justify-content:space-between; font-size:13px; color:rgba(245,241,232,.5);
}

/* ── Loop RELEASE-FIX-5 · der Sprung des Fusses ──────────────────
   Gemessen: bei kaltem Cache lag CLS in zwei bis drei von acht
   Aufrufen zwischen 0,255 und 0,306. Verursacher war zu 0,25463 von
   0,25476 dieses Element.

   Der Ablauf, mit MutationObserver und pro Frame abgetastet:
   book.css blockt das Rendern, book.js traegt defer. Trifft der erste
   Paint vor das Skript, malt der Browser das lineare Dokument — bei
   1920 px gemessen 31.253 Pixel hoch, der Fuss bei y 30.921, also
   weit unterhalb des Sichtfensters. Kurz darauf haengt buildStage()
   den ganzen <main> in den Buchkoerper, das Dokument faellt auf 993
   Pixel zusammen, und der Fuss springt auf y 718 ins Bild.

   Warum nur er: Umgehaengte Knoten gelten der Layout-Instability-API
   als neuer Inhalt und zaehlen nicht. Kein Kapitel taucht deshalb in
   der Messung auf, obwohl auch sie sich bewegen. Der Fuss steht als
   Geschwister neben <main>, wird nie umgehaengt, behaelt seine
   Identitaet — und ist damit das einzige Element, das zaehlt.

   Es ist ein Wettlauf, kein Breitenproblem: Liegt der Paint nach dem
   Skript, ist CLS null. Unter Fast-3G-Drosselung ist er es an allen
   Groessen, weil das Skript dann laengst da ist, bevor gemalt wird.
   Das Problem trifft schnelle Verbindungen.

   Der Fuss bleibt deshalb aus dem Bild, bis das Buch steht. Er behaelt
   seinen Platz im Fluss — visibility, nicht display —, damit beim
   Erscheinen nichts nachrueckt.

   Zwei Sicherungen:

   scripting: enabled kapselt die Regel. Ohne JavaScript gibt es kein
   data-ready, und ohne diese Bedingung waere der Fuss dort fuer immer
   fort — mit ihm Impressum und Datenschutz. Nachgemessen: ohne
   Skripte bleibt er sichtbar, 332 Pixel hoch.

   Die Notbremse holt ihn nach drei Sekunden auch dann zurueck, wenn
   data-ready nie gesetzt wird — book.js blockiert, abgebrochen, von
   einer Erweiterung verschluckt. Ohne sie waeren die Pflichtangaben
   an das Gelingen eines Skripts geknuepft. Geprueft mit gesperrtem
   book.js, auch bei Reduced Motion: der Block ab Abschnitt 9
   ueberschreibt animation-duration, nicht animation-delay.

   Aeltere Browser ohne scripting-Media-Feature ignorieren den Block
   und verhalten sich wie bisher. */
@media (scripting: enabled){
  html:not([data-ready]) .foot{
    visibility:hidden;
    animation:footNotfall 1ms linear 3s forwards;
  }

  @keyframes footNotfall{
    to{
      visibility:visible;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════
   6 · BUCHMODUS
   Ab hier gilt alles ausschliesslich unter html[data-book="on"].
   ═══════════════════════════════════════════════════════════════════ */

html[data-book="on"],
html[data-book="on"] body{height:100%; overflow:hidden; overscroll-behavior:none}

/* ── Umgebung ────────────────────────────────────────────────────
   Warmes Licht oben links, Abfall nach unten rechts. */
html[data-book="on"] .stage{
  position:fixed; inset:0; z-index:1;
  display:grid; place-items:center;
  background:
    radial-gradient(130% 100% at 16% 4%, rgba(255,243,222,.09) 0%, transparent 56%),
    radial-gradient(100% 80% at 86% 104%, rgba(0,0,0,.5) 0%, transparent 62%),
    var(--forest-900);
  perspective:3000px;
  perspective-origin:50% 40%;
}
/* Korn 1–2 % (Master §07). Rein dekorativ. */
html[data-book="on"] .stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:.022; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 · TISCHSZENE (Master §9/§10)

   Gastperspektive: die Buehne traegt bereits die Perspektive (3000px,
   Ursprung 50/40). Der Tisch ersetzt den reinen Farbverlauf der Buehne
   durch eine Nussbaumplatte — Licht weiterhin oben links, Abfall nach
   unten rechts, wie am Buch selbst.
   ═══════════════════════════════════════════════════════════════════ */
html[data-book="on"] .stage{
  background:
    radial-gradient(120% 90% at 20% 6%, rgba(255,226,181,.12) 0%, transparent 46%),
    radial-gradient(90% 70% at 50% 8%, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 100%),
    radial-gradient(140% 110% at 82% 108%, rgba(0,0,0,.62) 0%, transparent 58%),
    linear-gradient(152deg, #4A3423 0%, var(--color-walnut) 30%, var(--color-oak-smoked) 78%, #1C140D 100%);
}
/* Holzmaserung: gerichtete Turbulenz statt gleichfoermigem Rauschen —
   feX niedrig, feY hoch ergibt laengliche Fasern statt Korn. */
html[data-book="on"] .stage::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.012 .18' numOctaves='3' seed='7'/><feColorMatrix type='saturate' values='0'/></filter><rect width='500' height='500' filter='url(%23w)'/></svg>");
  background-size:640px 640px;
}
html[data-book="on"][data-book-mode="reader"] .stage{
  background:var(--forest-900);
}
html[data-book="on"][data-book-mode="reader"] .stage::before{display:none}

/* ── Buchkoerper ─────────────────────────────────────────────────
   Zwei Blaetter, eine Bindung. Der Koerper traegt die Perspektive,
   die Blaetter stehen darin. */
html[data-book="on"] .book{
  position:relative;
  width:min(1360px,94vw);
  height:min(880px,88vh);
  transform-style:preserve-3d;
}

/* Schattenebene 1 — Koerperschatten unter dem ganzen Buch. */
html[data-book="on"] .book__contact{
  position:absolute; left:3%; right:3%; bottom:-1.6%; height:7%;
  /* Loop C1a: Der Schatten wechselt am Ende der Oeffnung von der
     geschlossenen auf die offene Fassung. Ohne Uebergang sprang seine
     Hoehe dort von 99 auf 53 px — eine Bewegung gegen die Richtung des
     Objekts. Die Blende laeuft jetzt weich aus. */
  transition:left 420ms var(--e-settle, cubic-bezier(.16,.62,.24,1)),
             right 420ms var(--e-settle, cubic-bezier(.16,.62,.24,1)),
             bottom 420ms var(--e-settle, cubic-bezier(.16,.62,.24,1)),
             height 420ms var(--e-settle, cubic-bezier(.16,.62,.24,1)),
             filter 420ms var(--e-settle, cubic-bezier(.16,.62,.24,1));
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.7) 0%, transparent 70%);
  filter:blur(22px); transform:translateZ(-80px); pointer-events:none;
}

/* Schattenebene 3 — Lagen unter dem sichtbaren Blatt. Beide Haelften
   getrennt, damit die Bindung in der Mitte nicht ueberdeckt wird. */
html[data-book="on"] .book__stack{
  position:absolute; inset:0; pointer-events:none;
  transform:translateZ(-6px);
}
html[data-book="on"] .book__stack::before,
html[data-book="on"] .book__stack::after{
  content:''; position:absolute; top:.5%; bottom:.5%; width:49.6%;
  background:#ded6c4;
}
html[data-book="on"] .book__stack::before{
  left:0;
  box-shadow:-3px 4px 0 -1px #d5ccb8, -6px 8px 0 -2px #cbc2ad, -9px 12px 0 -3px #c2b8a2;
}
html[data-book="on"] .book__stack::after{
  right:0;
  box-shadow:3px 4px 0 -1px #d5ccb8, 6px 8px 0 -2px #cbc2ad, 9px 12px 0 -3px #c2b8a2;
}

/* ── Doppelseite ─────────────────────────────────────────────────
   Kapitel = eine gebundene Doppelseite. */
html[data-book="on"] .chapter{
  position:absolute; inset:0; margin:0; padding:0; border:0;
  transform-style:preserve-3d;
}
html[data-book="on"] .chapter[data-leaf="hidden"]{visibility:hidden; content-visibility:hidden}

html[data-book="on"] .spread{
  position:absolute; inset:0; max-width:none; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  transform-style:preserve-3d;
}
html[data-book="on"] .spread--42-58{grid-template-columns:42fr 58fr}
html[data-book="on"] .spread--single{grid-template-columns:1fr}

/* ── Blatt ───────────────────────────────────────────────────────
   Jede Haelfte ist ein eigenes Papier mit eigener Woelbung,
   eigenem Licht und eigenem Schatten. */
html[data-book="on"] .page{
  position:relative; padding:0;
  background:var(--cream-100);
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  backface-visibility:hidden;
}
html[data-book="on"] .page--verso{
  transform-origin:right center;
  transform:rotateY(1.1deg);       /* Woelbung zur Bindung hin */
  border-radius:3px 0 0 3px;
}
html[data-book="on"] .page--recto{
  transform-origin:left center;
  transform:rotateY(-1.1deg);
  border-radius:0 3px 3px 0;
  border-top:0;
}
html[data-book="on"] .page--full{border-radius:3px}

/* Papierfaser 3–7 % (Master §07). */
html[data-book="on"] .page::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='150' height='150' filter='url(%23f)'/></svg>");
}

/* Schattenebene 2 — die Falz.
   Jede Haelfte dunkelt zur Bindung hin ab; zusaetzlich sitzt ein
   schmaler Lichtgrat direkt an der Naht. Weil das Licht oben links
   steht, ist die rechte Haelfte an der Naht eine Spur dunkler. */
html[data-book="on"] .page::before{
  content:''; position:absolute; top:0; bottom:0; width:16%;
  max-width:130px; pointer-events:none; z-index:2;
}
html[data-book="on"] .page--verso::before{
  right:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(26,36,32,.035) 55%, rgba(26,36,32,.16) 88%, rgba(26,36,32,.28) 100%);
}
html[data-book="on"] .page--recto::before{
  left:0;
  background:linear-gradient(270deg,
    transparent 0%, rgba(26,36,32,.05) 55%, rgba(26,36,32,.2) 88%, rgba(26,36,32,.34) 100%);
}
html[data-book="on"] .page--full::before{display:none}

/* Die Bindung selbst: Vertiefung plus feiner Grat. */
html[data-book="on"] .spread:not(.spread--single)::after{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:26px;
  transform:translateX(-50%) translateZ(1px); z-index:4; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.24) 0%, rgba(0,0,0,.10) 26%,
      rgba(255,252,244,.20) 49%, rgba(255,252,244,.20) 51%,
      rgba(0,0,0,.12) 74%, rgba(0,0,0,.26) 100%);
}
html[data-book="on"] .spread--42-58:not(.spread--single)::after{left:42%}

/* Satzspiegel: Aussenraender grosszuegiger als der Bund. */
html[data-book="on"] .page__inner{
  padding:clamp(30px,4.4vh,64px) clamp(26px,3.4vw,62px);
  max-width:none;
}
html[data-book="on"] .page--verso .page__inner{padding-right:clamp(34px,4.4vw,84px)}
html[data-book="on"] .page--recto .page__inner{padding-left:clamp(34px,4.4vw,84px)}
html[data-book="on"] .page__inner--bleed{padding:0}
html[data-book="on"] .page__inner--bleed .shot{margin:0; height:100%}
html[data-book="on"] .page__inner--bleed .shot__frame{height:100%; aspect-ratio:auto; border:0}
html[data-book="on"] .page__inner--bleed .shot__spec{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:var(--s-12) var(--s-16);
  background:linear-gradient(0deg, rgba(250,247,240,.96), rgba(250,247,240,0));
}
html[data-book="on"] .page__inner--center{
  height:100%; display:flex; flex-direction:column; justify-content:center;
}

/* Kolumnentitel unten aussen, wie im Buch. */
html[data-book="on"] .page::marker{content:none}
html[data-book="on"] .chapter__folio{
  position:absolute; bottom:clamp(16px,2.6vh,30px);
  font-size:11px; letter-spacing:.24em; color:var(--ink-3);
  pointer-events:none; z-index:3;
}

/* Receipt Layer ueber der Mittelnaht (Master §00 Kap. 03). */
html[data-book="on"] .receipt{
  position:absolute; top:50%; left:50%; z-index:6;
  transform:translate(-50%,-50%) translateZ(14px);
  width:min(300px,30%);
  background:var(--paper-50);
  border:1px solid var(--rule-strong);
  padding:var(--s-24);
  box-shadow:0 3px 5px rgba(0,0,0,.10), 0 26px 44px -22px rgba(0,0,0,.55);
  text-align:center;
}
.receipt{margin:var(--s-32) 0; background:var(--paper-50); border:1px solid var(--rule); padding:var(--s-24)}
.receipt__hero{
  font-family:var(--sans); font-weight:500; font-size:clamp(40px,3.4vw,58px);
  line-height:1; margin:0; color:var(--forest-600);
}
.receipt__hero .unit{font-size:.55em}
.receipt__label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:var(--s-4) 0 var(--s-16);
}
.receipt__rows{margin:0; padding-top:var(--s-12); border-top:1px solid var(--rule)}
.receipt__rows div{display:flex; justify-content:space-between; gap:var(--s-12); padding:3px 0}
.receipt__rows dt{font-size:12px; color:var(--ink-3); text-align:left}
.receipt__rows dd{margin:0; font-size:13px; font-weight:500}

/* Kopf und Fuss im Buchmodus. */
html[data-book="on"] .top{
  position:fixed; top:0; left:0; right:0; z-index:20;
  background:transparent; border-bottom:0; color:rgba(245,241,232,.82);
}
html[data-book="on"] .top__mark{color:rgba(245,241,232,.9)}
html[data-book="on"] .top__btn{color:rgba(245,241,232,.82); border-color:rgba(245,241,232,.28)}
html[data-book="on"] .top__btn:hover{color:var(--brass-500); border-color:var(--brass-500)}

html[data-book="on"] .foot{
  position:fixed; left:0; right:0; bottom:0; z-index:15;
  border-top:0; padding-block:var(--s-24) var(--s-16);
  background:linear-gradient(0deg, var(--forest-900) 62%, transparent);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-crossfade) var(--e-lift);
}
html[data-book="on"][data-chapter-id="closing"] .foot{opacity:1; pointer-events:auto}

/* Fortschritt. */
html[data-book="on"] .progress{
  position:fixed; left:50%; bottom:13px; z-index:18;
  transform:translateX(-50%); display:flex; gap:8px; pointer-events:none;
}
html[data-book="on"] .progress i{
  width:4px; height:4px; border-radius:50%;
  background:rgba(245,241,232,.22);
  transition:background 260ms var(--e-lift), transform 260ms var(--e-lift);
}
html[data-book="on"] .progress i[data-on]{background:var(--brass-500); transform:scale(1.6)}
html[data-book="on"][data-chapter-id="closing"] .progress{opacity:0}

/* Einband: Vorder- und Rueckdeckel. */
html[data-book="on"] .chapter--board .page{
  background:
    radial-gradient(120% 100% at 18% 8%, rgba(184,147,85,.10) 0%, transparent 58%),
    var(--forest-800);
  color:var(--cream-100);
  --ink:var(--cream-100); --ink-2:rgba(245,241,232,.78); --ink-3:rgba(245,241,232,.5);
  --rule:rgba(245,241,232,.16); --rule-strong:rgba(245,241,232,.3);
  box-shadow:inset 0 0 90px rgba(0,0,0,.4);
}
/* Blindpraegung statt Druck. */
html[data-book="on"] .chapter--board .wordmark{
  color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.11), 0 -1px 0 rgba(0,0,0,.6);
}
html[data-book="on"] .chapter--board .wordmark i{color:rgba(184,147,85,.4)}
/* Messingkante am Bund. */
html[data-book="on"] .chapter--board .page--full::before{
  display:block; left:0; width:30px;
  background:linear-gradient(90deg, rgba(184,147,85,.5) 0%, rgba(184,147,85,.08) 34%, transparent 100%);
}

/* Geschlossen: leichte Dreiviertelansicht (Master §00 Kap. 00). */
html[data-book="on"][data-state^="closed"] .book{
  transform:rotateZ(-4deg) rotateY(10deg) scale(.84);
}

/* Schattenebene 4 — angehobenes Blatt. Liegt auf dem drehenden
   Papier und wandert mit der Drehung. */
html[data-book="on"] .leaf-shade{
  position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(0,0,0,.6) 0%, rgba(0,0,0,.24) 28%, rgba(0,0,0,0) 64%);
}

/* Multi-Page Fan. */
html[data-book="on"] .fan{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  transform-style:preserve-3d;
}
html[data-book="on"] .fan__leaf{
  position:absolute; top:0; bottom:0; left:50%; right:0;
  transform-origin:left center; backface-visibility:hidden; opacity:0;
  background:linear-gradient(90deg, #e9e2d2 0%, var(--cream-100) 18%, var(--paper-50) 100%);
  box-shadow:-2px 0 12px rgba(0,0,0,.18), 0 20px 44px -20px rgba(0,0,0,.6);
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:0 clamp(20px,3vw,52px) clamp(22px,3.4vh,48px) 0;
  font-family:var(--serif); font-size:clamp(26px,3.4vw,52px);
  color:rgba(26,36,32,.13);
}


/* ═══ 8 · Experience Modes ════════════════════════════════════════ */

/* Compact 768–1199: Doppelseite bleibt, Koerper wird kleiner. */
html[data-book="on"][data-book-mode="compact"] .book{
  width:96vw; height:min(820px,90vh);
}
html[data-book="on"][data-book-mode="compact"] .page__inner{
  padding:clamp(22px,3.4vh,40px) clamp(18px,2.6vw,34px);
}

/* ── Loop S1.1 · Lesefenster im Compact-Modus ab 1024 px ─────────
   Gemessen lieferte der Compact-Modus bei 1199 px 46 Zeichen je
   Zeile, bei 1024 px nur noch 38 — dieselbe Regelmenge, halbierte
   Spalte. Von 476 px Spaltenbreite gingen dort 72 px an Abstaende:
   27 px Satzspiegel und 45 px Bundsteg. Beide sind mit Blick auf die
   weiten Spalten der Buchansicht bemessen und nehmen in der schmalen
   Compact-Spalte anteilig das Dreifache ein.

   Die Abstaende werden deshalb ab 1024 px eigenstaendig bemessen,
   nicht von der Buchansicht geerbt, und der Fliesstext geht von 19
   auf 18 px. Gemessen ergibt das 43 Zeichen bei 1024 px und 50 bei
   1199 px — beides im Lesefenster.

   Die Groessenstufe aus L3.1 bleibt: h3 23 px, Lead 21 px, Fliesstext
   18 px, also 1,28 und 1,17 statt 1,21 und 1,11. Unterhalb 1024 px
   aendert sich nichts; dort ist die Spalte 353 px breit und mit zwei
   Spalten kein Lesefenster erreichbar — das ist eine eigene
   Entscheidung, siehe Audit S1.

   --paper-inset-x gibt die letzten Pixel frei. Der Lederrahmen wird
   dadurch schmaler, bleibt aber sichtbar. */
@media (min-width:1024px){
  html[data-book="on"][data-book-mode="compact"]{
    --paper-inset-x:clamp(10px,1vw,20px);
  }
  html[data-book="on"][data-book-mode="compact"] body,
  html[data-book="on"][data-book-mode="compact"] .page__inner{font-size:18px}
  html[data-book="on"][data-book-mode="compact"] .page__inner{
    padding:clamp(22px,3.4vh,40px) clamp(12px,1.3vw,18px);
  }
  html[data-book="on"][data-book-mode="compact"] .page--verso .page__inner{padding-right:clamp(20px,2.2vw,30px)}
  html[data-book="on"][data-book-mode="compact"] .page--recto .page__inner{padding-left:clamp(20px,2.2vw,30px)}
}

/* Reader <768: eine Seite pro Screen. Keine erzwungene Physik.
   Die Doppelseite wird zu einer durchgehenden Einzelseite. */
html[data-book="on"][data-book-mode="reader"] .book{width:100vw; height:100dvh}
html[data-book="on"][data-book-mode="reader"] .book__contact,
html[data-book="on"][data-book-mode="reader"] .book__stack,
html[data-book="on"][data-book-mode="reader"] .fan{display:none}
html[data-book="on"][data-book-mode="reader"] .spread,
html[data-book="on"][data-book-mode="reader"] .spread--42-58{
  grid-template-columns:1fr; grid-auto-rows:min-content;
  overflow-y:auto; overscroll-behavior:contain;
}
html[data-book="on"][data-book-mode="reader"] .spread:not(.spread--single)::after{display:none}
html[data-book="on"][data-book-mode="reader"] .page{
  transform:none; overflow:visible; border-radius:0;
}
html[data-book="on"][data-book-mode="reader"] .page::before{display:none}
html[data-book="on"][data-book-mode="reader"] .page__inner{
  padding:clamp(72px,10vh,96px) clamp(20px,5vw,32px) clamp(28px,4vh,40px);
}
html[data-book="on"][data-book-mode="reader"] .page--recto .page__inner{
  padding-top:0; padding-left:clamp(20px,5vw,32px);
}
html[data-book="on"][data-book-mode="reader"] .page--verso .page__inner{
  padding-right:clamp(20px,5vw,32px);
}
html[data-book="on"][data-book-mode="reader"] .page__inner--bleed{padding:0}
html[data-book="on"][data-book-mode="reader"] .page__inner--bleed .shot__frame{aspect-ratio:4/5; height:auto}
html[data-book="on"][data-book-mode="reader"] .page__inner--bleed .shot__spec{position:static; background:none; padding:var(--s-8) clamp(20px,5vw,32px) var(--s-24)}
html[data-book="on"][data-book-mode="reader"] .receipt{
  position:static; transform:none; width:auto; margin:var(--s-24) 0;
}
html[data-book="on"][data-book-mode="reader"] .chapter__folio{display:none}
html[data-book="on"][data-book-mode="reader"][data-state^="closed"] .book{transform:none}

/* Kopf auf Papier braucht Papierfarben. */
html[data-book="on"][data-book-mode="reader"] .top{
  background:linear-gradient(180deg, var(--cream-100) 64%, rgba(245,241,232,0));
  color:var(--ink);
}
html[data-book="on"][data-book-mode="reader"] .top__mark{color:var(--ink)}
html[data-book="on"][data-book-mode="reader"] .top__btn{color:var(--ink); border-color:var(--rule-strong)}
html[data-book="on"][data-book-mode="reader"] .progress i{background:rgba(26,36,32,.18)}
html[data-book="on"][data-book-mode="reader"] .progress i[data-on]{background:var(--brass-700)}
html[data-book="on"][data-book-mode="reader"][data-chapter-id="cover"] .top,
html[data-book="on"][data-book-mode="reader"][data-chapter-id="closing"] .top{
  background:linear-gradient(180deg, var(--forest-800) 64%, rgba(13,43,37,0));
  color:rgba(245,241,232,.9);
}
html[data-book="on"][data-book-mode="reader"][data-chapter-id="cover"] .top__mark,
html[data-book="on"][data-book-mode="reader"][data-chapter-id="closing"] .top__mark{color:rgba(245,241,232,.9)}
html[data-book="on"][data-book-mode="reader"][data-chapter-id="cover"] .top__btn,
html[data-book="on"][data-book-mode="reader"][data-chapter-id="closing"] .top__btn{
  color:rgba(245,241,232,.9); border-color:rgba(245,241,232,.28);
}

/* Static: keine Physik, nur Blenden. */
html[data-book="on"][data-book-motion="static"] .book{transform:none !important}
html[data-book="on"][data-book-motion="static"] .book__contact,
html[data-book="on"][data-book-motion="static"] .fan{display:none}
html[data-book="on"][data-book-motion="static"] .page{transform:none}


/* ═══ 9 · Reduced Motion ══════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html[data-book="on"] .book{transform:none !important}
  html[data-book="on"] .leaf-shade,
  html[data-book="on"] .fan{display:none}
}


/* ═══ Debug-Panel (?debug=1) ══════════════════════════════════════ */

.debug{
  position:fixed; right:8px; bottom:8px; z-index:200;
  background:rgba(8,16,13,.94); color:var(--cream-100);
  border:1px solid rgba(245,241,232,.2);
  padding:10px 12px; font-family:var(--sans); font-size:11.5px;
  line-height:1.5; font-variant-numeric:tabular-nums; max-width:min(92vw,290px);
}
.debug h4{
  margin:0 0 6px; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-500);
}
.debug dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0}
.debug dt{color:rgba(245,241,232,.5)}
.debug dd{margin:0; text-align:right}

/* ═══════════════════════════════════════════════════════════════════
   KORREKTUREN PHASE 3 — gemessen, nicht geschaetzt
   ═══════════════════════════════════════════════════════════════════ */

/* 1 · Der feste Kopf lag ueber der oberen Blattkante (gemessen:
   Kopf 0–64 px, Buchoberkante 54 px). Die Buehne bekommt Rand, das
   Buch rechnet mit ihm. */
html[data-book="on"] .stage{
  padding:76px clamp(16px,2.4vw,44px) 46px;
}
html[data-book="on"] .book{
  width:min(1360px,100%);
  height:min(860px,100%);
}

/* 2 · Der Receipt Layer stand mittig ueber der Naht und der Fliesstext
   lief darunter durch. Er sitzt jetzt am Fuss der Doppelseite — dort
   spannt er weiterhin ueber die Mittelnaht, verdeckt aber nichts.
   Beide Blaetter halten den Raum frei. */
html[data-book="on"] .receipt{
  top:auto; bottom:clamp(18px,3vh,34px);
  transform:translateX(-50%) translateZ(14px);
  width:min(360px,42%);
  padding:var(--s-16) var(--s-24);
}
html[data-book="on"] #die-rechnung .page__inner{
  padding-bottom:clamp(190px,26vh,240px);
}
html[data-book="on"] .receipt__hero{font-size:clamp(34px,2.8vw,46px)}
html[data-book="on"] .receipt__label{margin-bottom:var(--s-12)}

/* 3 · Blaetter laufen ueber (gemessen: bis 596 px verdeckt). Solange
   die Copy nicht final ist, scrollt das Blatt — das muss man sehen.
   Der Verlauf sitzt am Blattfuss und verschwindet am Ende. */
html[data-book="on"] .page{scroll-behavior:smooth}
html[data-book="on"] .page[data-scroll="more"]::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:92px;
  z-index:3; pointer-events:none;
  background:linear-gradient(0deg, var(--cream-100) 4%, rgba(245,241,232,0));
  opacity:.96;
}
html[data-book="on"] .chapter--board .page[data-scroll="more"]::after{
  background:linear-gradient(0deg, var(--forest-800) 4%, rgba(13,43,37,0));
}
/* Papierfaser wandert auf ein eigenes Element, damit ::after frei
   fuer den Verlauf ist. */
html[data-book="on"] .page::after{content:none}
html[data-book="on"] .page > .grain{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='150' height='150' filter='url(%23f)'/></svg>");
}

/* Der Hinweis am Blattfuss, nur solange es weitergeht. */
html[data-book="on"] .page__more{
  position:absolute; left:50%; bottom:var(--s-12); z-index:4;
  transform:translateX(-50%);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); pointer-events:none; opacity:0;
  transition:opacity 200ms var(--e-lift);
}
html[data-book="on"] .page[data-scroll="more"] .page__more{opacity:.75}
html[data-book="on"] #die-rechnung .page__more{display:none}

/* Im Reader Mode scrollt die ganze Doppelseite, nicht das Blatt. */
html[data-book="on"][data-book-mode="reader"] .page[data-scroll="more"]::after,
html[data-book="on"][data-book-mode="reader"] .page__more{display:none}
html[data-book="on"][data-book-mode="reader"] .receipt{
  bottom:auto; transform:none; width:auto;
}
html[data-book="on"][data-book-mode="reader"] #die-rechnung .page__inner{
  padding-bottom:clamp(28px,4vh,40px);
}

/* Der Receipt Layer ist ein aufgelegter Einleger, kein Textblock.
   Er deckt ab, was unter ihm liegt — das ist bei einer aufgelegten
   Karte richtig. Damit das gelesen wird und nicht wie ein Fehler
   aussieht, bekommt er Papierkante, Drehung und einen echten
   Abhebeschatten. */
html[data-book="on"] .receipt{
  transform:translateX(-50%) translateZ(20px) rotate(-.55deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 42%),
    var(--paper-50);
  border:1px solid var(--rule-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 3px rgba(26,36,32,.14),
    0 18px 34px -14px rgba(0,0,0,.5),
    0 40px 60px -30px rgba(0,0,0,.5);
}
html[data-book="on"][data-book-mode="reader"] .receipt{transform:none}

/* Randlose Bildcontainer standen auf height:100% — im scrollenden
   Blatt hat der Elternteil keine feste Hoehe, die Flaeche fiel auf 0
   zusammen und das Bild verschwand. Sie behalten jetzt ihr
   Seitenverhaeltnis und werden ueber die Blattbreite gesetzt. */
html[data-book="on"] .page__inner--bleed .shot{margin:0}
html[data-book="on"] .page__inner--bleed .shot__frame{
  height:auto; border:0; border-bottom:1px solid var(--rule);
}
html[data-book="on"] .page__inner--bleed .shot__spec{
  position:static; background:none;
  padding:var(--s-8) clamp(26px,3.4vw,62px) var(--s-24);
}
html[data-book="on"] .page--recto .page__inner--bleed .shot__spec{
  padding-left:clamp(34px,4.4vw,84px);
}

/* Bildflaeche als reservierter Platz. Fehlt ein Bild wirklich (Ladefehler),
   bleibt die Flaeche stehen und meldet es, statt zusammenzufallen. */
.shot__frame{position:relative}
.shot[data-asset="missing"] .shot__frame{display:grid; place-items:center}
.shot[data-asset="missing"] .shot__frame::before{
  content:'Bild fehlt';
  font-family:var(--serif); font-size:clamp(16px,1.6vw,22px);
  letter-spacing:.04em; color:rgba(26,36,32,.3);
}

/* Im Reader Mode steht der Fuss im Fluss der Schlussseite, nicht als
   feste Ebene darueber. */
html[data-book="on"][data-book-mode="reader"] .foot{
  position:static; opacity:1; pointer-events:auto;
  background:none; padding-block:var(--s-48) var(--s-32);
  margin-top:var(--s-48); border-top:1px solid rgba(245,241,232,.16);
}
html[data-book="on"][data-book-mode="reader"] .foot__inner{padding-inline:0}

/* ═══════════════════════════════════════════════════════════════════
   PAGINIERUNG — ein Kapitel laeuft ueber mehrere Doppelseiten
   Kein Blatt scrollt mehr. Was nicht auf die Seite passt, steht auf
   der naechsten.
   ═══════════════════════════════════════════════════════════════════ */

/* Sichtbarkeit haengt jetzt an der Doppelseite, nicht am Kapitel. */
html[data-book="on"] .chapter[data-leaf="hidden"]{visibility:visible; content-visibility:visible}
html[data-book="on"] .spread{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}
html[data-book="on"] .spread[data-leaf="hidden"]{visibility:hidden; content-visibility:hidden}

/* Blaetter scrollen nicht. */
html[data-book="on"] .page{overflow:hidden}
html[data-book="on"] .page[data-scroll="more"]::after{content:none}
html[data-book="on"] .page__more{display:none}

/* Der Satzspiegel bleibt oben buendig; eine halbvolle Schlussseite
   ist im Buch normal und wird nicht gestreckt. */
html[data-book="on"] .page__inner{
  height:auto; padding-bottom:clamp(52px,7vh,84px);
}
html[data-book="on"] #die-rechnung .page__inner{
  padding-bottom:clamp(190px,26vh,240px);
}

/* Folgeseiten eines Kapitels tragen keinen Kapitelkopf mehr — der
   Kolumnentitel genuegt. */
html[data-book="on"] .spread:not([data-spread-index="1"]) .folio--chapter,
html[data-book="on"] .spread:not([data-spread-index="1"]) .eyebrow{display:none}

/* Seitenzaehler im Kolumnentitel, wenn ein Kapitel mehr als eine
   Doppelseite braucht. */
html[data-book="on"] .spread[data-spread-of]:not([data-spread-of="1"]) .chapter__folio::after{
  content:' · ' attr(data-idx);
}

/* Reader Mode: eine Spalte, eine Seite pro Screen. */
html[data-book="on"][data-book-mode="reader"] .spread{
  grid-template-columns:1fr; overflow:hidden;
}
html[data-book="on"][data-book-mode="reader"] .page{overflow:hidden}
html[data-book="on"][data-book-mode="reader"] .page__inner{
  padding:clamp(72px,10vh,96px) clamp(20px,5vw,32px) clamp(56px,8vh,72px);
}

/* Der Freiraum fuer den Receipt-Einleger gilt nur auf der Doppelseite,
   auf der er tatsaechlich liegt. */
html[data-book="on"] #die-rechnung .page__inner{padding-bottom:clamp(52px,7vh,84px)}
html[data-book="on"] #die-rechnung .spread[data-spread-index="1"] .page__inner{
  padding-bottom:clamp(190px,26vh,240px);
}

/* Eine Bildflaeche darf nie hoeher sein als das Blatt, sonst kann die
   Paginierung sie nirgends unterbringen. Hoehe fuehrt, Breite folgt
   dem Seitenverhaeltnis. */
html[data-book="on"] .shot__frame{
  width:auto; height:auto; max-width:100%;
  max-height:min(52vh, 520px);
  margin-inline:auto;
}
/* Hoehe fuehrt, Breite folgt dem echten Seitenverhaeltnis (inline
   aspect-ratio je Bild, aus der Quellaufloesung — Master §21). */
html[data-book="on"] .shot--media .shot__frame{height:min(52vh,520px)}
html[data-book="on"] .shot--pair-a .shot__frame{height:min(24vh,220px)}
html[data-book="on"] .shot--pair-b .shot__frame{height:min(30vh,280px)}
html[data-book="on"] .shot--vertical .shot__frame{height:min(40vh,380px)}
html[data-book="on"] .page__inner--bleed .shot__frame{max-width:100%}
html[data-book="on"][data-book-mode="reader"] .shot--media .shot__frame{height:min(46vh,420px)}
html[data-book="on"][data-book-mode="reader"] .shot--pair-a .shot__frame{height:min(22vh,200px)}
html[data-book="on"][data-book-mode="reader"] .shot--pair-b .shot__frame{height:min(28vh,260px)}
html[data-book="on"][data-book-mode="reader"] .shot--vertical .shot__frame{height:min(36vh,340px)}

/* Buchsatz-Ausgleich: eine Seite, die knapp zu lang laeuft, wird
   leicht enger gezogen statt beschnitten. --fit setzt die Paginierung,
   hoechstens 0.92. */
html[data-book="on"] .page{--fit:1}
html[data-book="on"] .page .page__inner{
  font-size:calc(1em * var(--fit));
}
/* Das Formular ist als Block unteilbar und laeuft am ehesten lang. */
html[data-book="on"] .insert{padding:clamp(16px,1.8vw,28px)}
html[data-book="on"] .insert .field{margin-bottom:var(--s-12)}
html[data-book="on"] .insert .field input,
html[data-book="on"] .insert .field select{min-height:38px; padding:var(--s-4) 0}
html[data-book="on"] .insert .field textarea{min-height:84px}
html[data-book="on"] .insert button.cta{min-height:44px; margin-top:var(--s-12)}

/* Reader Mode: eine Seite je Kapitel, vertikales Lesen im Kapitel,
   horizontaler Swipe nur zwischen Kapiteln (Master §08). */
html[data-book="on"][data-book-mode="reader"] .spread{
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
html[data-book="on"][data-book-mode="reader"] .page{overflow:visible; height:auto; min-height:100%}
html[data-book="on"][data-book-mode="reader"] .page__inner{height:auto}

/* Kapitel brauchen im Buchmodus eine eigene Schicht, sonst deckt ein
   spaeteres Kapitel das aktive zu (DOM-Reihenfolge schlaegt z-index
   der inneren Doppelseite). */
html[data-book="on"] .chapter{position:absolute; inset:0; z-index:1}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3.5 · REALISMUS
   Eine Speisekarte ist ein Einband mit eingelegten Blaettern, nicht
   eine Flaeche mit Text. Reihenfolge von aussen nach innen:
   Tisch → Leder → Bund → Papierstapel → aktives Blatt → Falz → Licht.
   Lichtquelle unveraendert oben links.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --leather:#12241E;          /* Einband, dunkler als Forest 800 */
  --leather-edge:#0A1712;     /* Kante */
  --leather-lip:#1C3A30;      /* Lichtkante oben links */
  --paper-inset-y:clamp(14px,1.9vh,26px);
  --paper-inset-x:clamp(16px,1.4vw,30px);

  /* Geschlossenes Buchobjekt (Loop A · noch nicht angewendet).

     Fine-Dining-Kochbuchformat: Breite/Hoehe 0,80. Fuehrender Wert ist
     die reale Objektgroesse 420–520 px aus 02_COVER_SPEZIFIKATION.md;
     der vh-Anteil entscheidet nur, wo innerhalb dieses Bandes das
     Objekt liegt, und ist bewusst so gewaehlt, dass die Grenzen auf
     jedem Viewport greifen: 1080 → 520, 900 → 468, 800 und 768 → 420.

     Beide Werte sind hier nur definiert. Angewendet werden sie erst
     im naechsten Schritt von Loop A — und dann ausschliesslich in
     einer Regel mit :not([data-measuring]) und
     :not([data-book-mode="reader"]). Siehe Messklammer in
     book.js paginate(). */
  --cover-ratio:.8;
  --cover-h:clamp(420px, 52vh, 520px);
}

/* ── 2 · Einband ────────────────────────────────────────────────── */
html[data-book="on"] .book{
  background:
    /* Licht oben links, Abfall nach unten rechts */
    linear-gradient(148deg, var(--leather-lip) 0%, var(--leather) 26%, var(--leather-edge) 100%);
  border-radius:5px 3px 3px 5px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 1px 0 rgba(255,247,232,.06) inset,          /* Lichtkante oben */
    0 -1px 0 rgba(0,0,0,.5) inset;
}

/* Lederstruktur: sehr feine Narbung, kein Kunstleder-Muster. */
html[data-book="on"] .book::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23l)'/></svg>");
}

/* Der Bund als erhabene Naht in der Mitte des Einbands. */
html[data-book="on"] .book::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0; left:50%; width:34px; transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 30%,
    rgba(255,247,232,.05) 50%,
    rgba(0,0,0,.2) 70%, rgba(0,0,0,.5) 100%);
}

/* ── Papier liegt eingelegt, nicht randlos ──────────────────────── */
html[data-book="on"] .spread{
  inset:var(--paper-inset-y) var(--paper-inset-x);
}
html[data-book="on"] .spread--42-58:not(.spread--single)::after{left:42%}

/* Die Mulde, in der die Blaetter liegen. */
html[data-book="on"] .chapter::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  inset:calc(var(--paper-inset-y) - 3px) calc(var(--paper-inset-x) - 3px);
  border-radius:2px;
  box-shadow:
    0 2px 5px rgba(0,0,0,.5) inset,
    0 -1px 2px rgba(0,0,0,.35) inset;
}

/* ── 3 · Papierdicke und Seitenkante ────────────────────────────── */
html[data-book="on"] .page{
  border-radius:1px;
  /* Aussenkante: wenige, sehr dezente Lagen. Kein Fake-Blatt im DOM. */
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 12px 22px -14px rgba(0,0,0,.55);
}
html[data-book="on"] .page--verso{
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    -1px 0 0 rgba(0,0,0,.06),
    -2px 1px 0 -1px #ece5d5,
    -4px 2px 0 -2px #e3dbc9,
    -6px 3px 0 -3px #d9d0bc,
    0 12px 22px -14px rgba(0,0,0,.55);
}
html[data-book="on"] .page--recto{
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    1px 0 0 rgba(0,0,0,.06),
    2px 1px 0 -1px #ece5d5,
    4px 2px 0 -2px #e3dbc9,
    6px 3px 0 -3px #d9d0bc,
    0 12px 22px -14px rgba(0,0,0,.55);
}

/* Der alte Stapel hinter den Seiten entfaellt — die Lagen sitzen
   jetzt an der Blattkante, wo sie im echten Buch auch sind. */
html[data-book="on"] .book__stack{display:none}

/* ── 4 · Woelbung des Blattes ───────────────────────────────────── */
html[data-book="on"] .page__body{
  position:relative; z-index:2;
  transform-origin:inherit;
  will-change:transform;
}
html[data-book="on"] .page--verso .page__body{transform-origin:right center}
html[data-book="on"] .page--recto .page__body{transform-origin:left center}

/* ── 5 · Falzschatten folgt dem Winkel ──────────────────────────
   Breiter als das Blatt und verschiebbar: waehrend der Drehung
   wandert das dunkle Band ueber das Papier, statt nur heller und
   dunkler zu werden. */
html[data-book="on"] .leaf-shade{
  left:-60%; right:-60%; width:auto;
  background:linear-gradient(100deg,
    rgba(0,0,0,0) 26%,
    rgba(0,0,0,.16) 38%,
    rgba(0,0,0,.62) 50%,
    rgba(0,0,0,.16) 62%,
    rgba(0,0,0,0) 74%);
  will-change:transform,opacity;
}

/* ── Einband: Vorder- und Rueckdeckel liegen buendig ────────────── */
html[data-book="on"] .chapter--board .spread{inset:0}
html[data-book="on"] .chapter--board::before{display:none}
html[data-book="on"] .chapter--board .page{
  border-radius:inherit;
  box-shadow:inset 0 0 90px rgba(0,0,0,.4);
}

/* ── 8 · Reader Mode bleibt flach ───────────────────────────────── */
html[data-book="on"][data-book-mode="reader"] .book{
  background:none; border-radius:0; box-shadow:none;
}
html[data-book="on"][data-book-mode="reader"] .book::before,
html[data-book="on"][data-book-mode="reader"] .book::after{display:none}
html[data-book="on"][data-book-mode="reader"] .spread{inset:0}
html[data-book="on"][data-book-mode="reader"] .chapter::before{display:none}
html[data-book="on"][data-book-mode="reader"] .page{box-shadow:none; border-radius:0}

html[data-book="on"][data-book-motion="static"] .leaf-shade{display:none}

/* Das Formular ist ein unteilbarer Block und lief auf 1024 px knapp
   ueber. Der Schriftausgleich hilft dort nicht, weil Feldhoehen in
   Pixeln stehen — und kleiner gesetzte Feldbeschriftungen waeren der
   falsche Preis. Also wird die Geometrie enger, nicht die Schrift.
   Die Zielgroesse der Bedienelemente bleibt bei 44 px. */
html[data-book="on"] .insert .field{margin-bottom:var(--s-8)}
html[data-book="on"] .insert .field label{margin-bottom:2px}
html[data-book="on"] .insert .field textarea{min-height:68px}
html[data-book="on"] .insert .field input,
html[data-book="on"] .insert .field select{min-height:44px}
html[data-book="on"] .insert__label{margin-bottom:var(--s-12)}
html[data-book="on"] .formstatus{margin-top:var(--s-8); min-height:1.2em}

/* Kapitel 09 · Einlegekarte — geringere Bauhoehe bei gleicher Wirkung.
   Die Karte belegte als unteilbarer Block eine ganze Seite und zwang
   damit eine leere Blatthaelfte (F6). Reduziert wird ausschliesslich
   Geometrie: Zeilenabstand der Feldbeschriftungen, Feldabstaende,
   Innenabstand der Karte. Schriftgroessen, Feldanzahl, Funktion und
   die 44-px-Zielgroesse der Bedienelemente bleiben unveraendert.
   Der Reader-Modus ist ausgenommen und bleibt wie bisher. */
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert{
  padding:clamp(14px,1.5vw,24px);
}
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert__label{
  margin-bottom:var(--s-8);
}
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert .field{
  margin-bottom:var(--s-4);
}
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert .field label{
  line-height:1.25;
}
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert .field textarea{
  min-height:60px;
}
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert button.cta{
  margin-top:var(--s-8);
}
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert .formstatus{
  margin-top:var(--s-4); margin-bottom:0;
}
html[data-book="on"]:not([data-book-mode="reader"]) #der-erste-schritt .insert .formnote{
  margin-top:var(--s-4);
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4 · MARKE

   Die gelieferten Farbdateien sind Praesentationsrenderings: Gold auf
   fast schwarzem, texturiertem Grund, ohne Alphakanal. Auf dem Leder
   ergaebe das einen sichtbaren dunklen Kasten. Die Monofassung aus
   demselben Ordner traegt dieselbe Marke auf reinem Schwarz — dort
   faellt der Grund per screen restlos heraus.
   Kein neues Logo, keine Aenderung an der Marke.
   ═══════════════════════════════════════════════════════════════════ */

.brandmark{margin:0 0 var(--s-24); max-width:none; line-height:0}
.brandmark img{
  width:100%; height:auto; display:block;
  /* Schwarz faellt heraus, die Marke bleibt. */
  mix-blend-mode:screen;
  /* Warmer Messington statt kalkweiss — Messing auf dunklem Grund. */
  filter:sepia(.42) saturate(1.85) hue-rotate(-8deg) brightness(.94);
}
.brandmark--cover{width:min(340px,54%); margin-bottom:var(--s-32)}
.brandmark--closing{width:min(190px,40%); margin:var(--s-32) 0 var(--s-24)}

/* Ohne Buchmodus liegt die Marke auf dem Einbandgruen des Dokuments —
   dieselbe Rechnung, derselbe Effekt. */
.chapter--board .brandmark img{mix-blend-mode:screen}

/* Bleibt die Ueberblendung aus (sehr alte Engines), ist die Marke
   immer noch lesbar: heller Grund auf dunklem Deckel, kein Fehlbild. */
@supports not (mix-blend-mode:screen){
  .brandmark img{filter:none; opacity:.94}
}

/* ── Klangvorbereitung ────────────────────────────────────────────
   Noch keine Audiodatei, kein Autoplay, keine externe Quelle.
   Vorbereitet ist nur der Platz: ein Schalter im Kopf, der erst
   erscheint, wenn eine Quelle registriert ist. */
.sound-toggle{
  font:inherit; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; color:inherit; background:transparent;
  border:1px solid currentColor; border-radius:2px; opacity:.55;
  padding:var(--s-8) var(--s-12); min-height:44px; min-width:44px;
}
.sound-toggle:hover{opacity:1}
.sound-toggle[hidden]{display:none}
html[data-sound="on"] .sound-toggle{opacity:1}

/* ── Korrektur: Ueberblendung greift im 3D-Kontext nicht ──────────
   Gemessen: zwischen Marke und Einband liegen drei preserve-3d-Ebenen
   (.spread, .chapter, .book) plus die Perspektive der Buehne. Dort
   isoliert der Browser die Ueberblendung, und das Schwarz der Datei
   blieb als Kasten stehen.

   Statt zu ueberblenden wird die Datei jetzt als Leuchtdichte-Maske
   benutzt: Weiss laesst durch, Schwarz haelt zurueck. Das ist
   unabhaengig vom Stapelkontext und faerbt die Marke zugleich in
   Messing, statt sie ueber einen Filter einzufaerben. */
.brandmark{
  position:relative;
  background:linear-gradient(152deg,
    #E8C98A 0%, #C9A468 34%, #B89355 58%, #8A6A38 100%);
  -webkit-mask-image:url(logo/PORTATA_White.webp);
          mask-image:url(logo/PORTATA_White.webp);
  -webkit-mask-mode:luminance;  mask-mode:luminance;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  aspect-ratio:1;
}
.brandmark img{
  width:100%; height:auto; display:block;
  /* Der Alternativtext bleibt im Barrierebaum, die Pixel treten
     zurueck — gezeichnet wird die Maske. */
  opacity:0;
  mix-blend-mode:normal; filter:none;
}

/* Ohne Maskenunterstuetzung: Datei normal zeigen und ueberblenden.
   Im Dokumentmodus ohne 3D greift screen zuverlaessig. */
@supports not (mask-mode:luminance){
  .brandmark{background:none; -webkit-mask-image:none; mask-image:none}
  .brandmark img{opacity:1; mix-blend-mode:screen;
    filter:sepia(.42) saturate(1.85) hue-rotate(-8deg) brightness(.94)}
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4.5 · FINISHING

   §1 Die Marke war 314 px breit auf einem 1169 px breiten Deckel —
      gut ein Viertel der Flaeche, linksbuendig, mit Kicker und
      Schaltflaeche darunter. Das liest sich als Website-Kopf, nicht
      als Menuedeckel. Eine echte Karte traegt eine kleine Praegung
      auf viel Leder.
   ═══════════════════════════════════════════════════════════════════ */

/* Deckel: mittig gesetzt, viel Ruhe. */
html[data-book="on"] .chapter--board .page__inner--center,
.chapter--board .page__inner--center{
  align-items:center; text-align:center;
}
.chapter--board .cover__cta{justify-content:center}
.chapter--board .kicker{margin-bottom:clamp(40px,7vh,84px)}

/* Praegung statt Aufdruck: die Kante faengt oben links Licht,
   unten rechts sitzt der Schatten. Der Filter folgt der Maske,
   also der Form der Marke — nicht einem Rechteck. */
.brandmark--cover{
  width:min(210px,22%);
  margin:0 auto clamp(32px,5vh,56px);
  filter:
    drop-shadow(-1px -1px 0 rgba(255,247,232,.17))
    drop-shadow(1px 1.5px 1.5px rgba(0,0,0,.6));
}

/* Rueckdeckel: Blindpraegung ohne Folie. Ein Buch wiederholt seinen
   Deckel nicht — es presst die Marke nur noch ins Leder. */
.brandmark--closing{
  width:min(132px,26%);
  margin:clamp(28px,4vh,44px) auto clamp(20px,3vh,32px);
  background:linear-gradient(152deg, #1D3830 0%, #16291F 58%, #0F1F19 100%);
  filter:
    drop-shadow(-1px -1px 0 rgba(255,247,232,.11))
    drop-shadow(1px 1.5px 1px rgba(0,0,0,.62));
}

/* ═══════════════════════════════════════════════════════════════════
   §2 Material
   ═══════════════════════════════════════════════════════════════════ */

/* Leder bekommt Tiefe: der Verlauf allein bleibt flach. Dazu ein
   weicher Randabfall und eine sehr grobe Fleckigkeit, die dem
   Material Unregelmaessigkeit gibt, ohne als Muster aufzufallen. */
html[data-book="on"] .book{
  background:
    radial-gradient(120% 90% at 22% 6%, rgba(255,247,232,.055) 0%, transparent 52%),
    radial-gradient(150% 120% at 50% 50%, transparent 42%, rgba(0,0,0,.34) 100%),
    linear-gradient(148deg, var(--leather-lip) 0%, var(--leather) 26%, var(--leather-edge) 100%);
}
html[data-book="on"] .book::before{
  opacity:.13;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23m)' opacity='.5'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23l)'/></svg>");
  background-size:520px 520px, 180px 180px;
}

/* Papier: eine gedruckte Seite ist nie gleichmaessig. Sehr weiche,
   grossflaechige Waermevariation — spuerbar, nicht sichtbar. */
html[data-book="on"] .page{
  background-image:
    radial-gradient(120% 80% at 24% 10%, rgba(255,252,244,.5) 0%, transparent 58%),
    radial-gradient(90% 70% at 82% 96%, rgba(214,203,178,.22) 0%, transparent 62%);
  background-color:var(--cream-100);
}
html[data-book="on"] .chapter--board .page{background-image:none}

/* Die Blattkante etwas waermer, damit der Stapel nach Papier aussieht
   und nicht nach Grau. */
html[data-book="on"] .page--verso{
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    -1px 0 0 rgba(0,0,0,.06),
    -2px 1px 0 -1px #EFE8D8, -4px 2px 0 -2px #E5DDCB,
    -6px 3px 0 -3px #DBD2BD, -8px 4px 0 -4px #D1C7AF,
    0 12px 22px -14px rgba(0,0,0,.55);
}
html[data-book="on"] .page--recto{
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    1px 0 0 rgba(0,0,0,.06),
    2px 1px 0 -1px #EFE8D8, 4px 2px 0 -2px #E5DDCB,
    6px 3px 0 -3px #DBD2BD, 8px 4px 0 -4px #D1C7AF,
    0 12px 22px -14px rgba(0,0,0,.55);
}

/* Im Reader Mode bleibt das Papier ruhig — dort gibt es keinen
   Einband, der es einfasst. */
html[data-book="on"][data-book-mode="reader"] .page{background-image:none}

/* Fortgesetzte Sammlungen: die Fortsetzung auf der Folgeseite braucht
   keinen zweiten Kopfabstand. */
html[data-book="on"] [data-continued]{margin-top:0}
html[data-book="on"] .steps[data-continued] li:first-child{border-top:0; padding-top:0}
html[data-book="on"] .faq[data-continued] .faq__item:first-child > h3{margin-top:0}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 · MEDIA REVEAL

   Bilder sind still. Einmalig beim Eintritt der Doppelseite:
   opacity .88→1, scale 1.012→1 (Master §25, §4 "Nicht animiert").
   Chef, Recipe Notes, Kasumi und Dough-Standbild bleiben unbewegt —
   .shot--static schaltet die Animation gezielt ab, statt sie nur an
   bestimmten Bildern anzuschalten. Videos bekommen kein Reveal: ihr
   Poster steht bereits, das Spiel beginnt ohne Blende.
   .is-revealed wird von book.js gesetzt, sobald die Doppelseite zum
   ersten Mal aktiv wird (registerMedia · syncOneMedia).
   ═══════════════════════════════════════════════════════════════════ */

@keyframes shotReveal{
  from{opacity:.88; transform:scale(1.012)}
  to{opacity:1; transform:scale(1)}
}
html[data-book="on"] .shot--media .shot__frame > img{opacity:1}
html[data-book="on"] .shot:not(.shot--static) .shot__frame > img.is-revealed{
  animation:shotReveal var(--motion-slow) var(--ease-material) both;
}
html[data-book="on"] .shot--pair-b .shot__frame > img.is-revealed{
  animation-delay:140ms;
}
html[data-book="on"][data-book-motion="static"] .shot__frame > img.is-revealed{
  animation:none; opacity:1;
}

/* ── Candle Ambient ──────────────────────────────────────────────
   Kein Flackern. Helligkeit variiert ueber mehrere Sekunden zwischen
   98,5 % und 100,8 % (Master §18) und wirkt ausschliesslich lokal auf
   Leder, Messing, Glas, Silber und die tischnahe Zone — nie auf die
   ganze Seite. Reine CSS-Custom-Property-Animation, kein rAF. */
@keyframes candleBreathe{
  0%{--candle:1}
  27%{--candle:.985}
  55%{--candle:1.008}
  81%{--candle:.995}
  100%{--candle:1}
}
html[data-book="on"] .stage{
  --candle:1;
  animation:candleBreathe 9s ease-in-out infinite;
}
html[data-book="on"][data-book-motion="static"] .stage{animation:none; --candle:1}
/* Lokale Reaktion: Messing- und Blindpraegungsflaechen lesen --candle
   ueber einen sehr engen Helligkeitsbereich, damit nichts "pulsiert",
   sondern nur so wirkt, als stuende irgendwo im Raum eine Flamme. */
html[data-book="on"] .book::before{
  filter:brightness(calc(1 + (var(--candle, 1) - 1) * .6));
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 · TISCHREQUISITEN (Master §10)

   Zurueckhaltend, an den Raendern, teils angeschnitten. Von innen
   nach aussen gebaut: faellt ein Requisit unecht auf, wird es
   reduziert statt erzwungen. Gewichtung insgesamt hoechstens 10 %
   der Flaeche. Licht konsistent oben links wie am Buch selbst.
   ═══════════════════════════════════════════════════════════════════ */

html[data-book="on"] .prop{position:absolute; pointer-events:none; z-index:0}

/* Navy-Leinenserviette, unten links, weich gefaltet, angeschnitten.
   Die Faltung kommt aus zwei-drei weichen Schattenbahnen, nicht aus
   einem harten Streifenmuster — sonst liest sie sich als Grafik,
   nicht als Stoff. */
html[data-book="on"] .prop-napkin{
  left:-8%; bottom:-10%; width:min(28vw,320px); height:min(26vh,280px);
  background:
    linear-gradient(100deg, rgba(255,255,255,.07) 0%, transparent 22%),
    linear-gradient(112deg, transparent 38%, rgba(0,0,0,.20) 47%, transparent 58%),
    linear-gradient(112deg, transparent 62%, rgba(0,0,0,.14) 70%, transparent 80%),
    linear-gradient(150deg, #253850 0%, var(--navy-900) 58%, #0A1119 100%);
  transform:rotate(-5deg);
  -webkit-mask-image:radial-gradient(120% 120% at 30% 70%, #000 58%, transparent 92%);
          mask-image:radial-gradient(120% 120% at 30% 70%, #000 58%, transparent 92%);
  opacity:.85;
}
html[data-book="on"] .prop-napkin::after{
  content:''; position:absolute; inset:0; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='lin'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/></filter><rect width='90' height='90' filter='url(%23lin)'/></svg>");
}

/* Silberbesteck, unten rechts, zwei schmale gebuerstete Stege. */
html[data-book="on"] .prop-cutlery{
  right:2%; bottom:-2%; width:min(10vw,120px); height:min(26vh,300px);
  display:flex; gap:14px; transform:rotate(4deg);
  opacity:.85;
}
html[data-book="on"] .prop-cutlery i{
  display:block; width:7px; height:100%; border-radius:4px;
  background:linear-gradient(100deg,
    #7c8286 0%, var(--color-silver) 18%, #eef0f1 32%, var(--color-silver) 46%,
    #82878b 60%, var(--color-silver) 76%, #dfe2e3 88%, #7c8286 100%);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.65);
}
html[data-book="on"] .prop-cutlery i:first-child{height:94%; align-self:flex-end}

/* Weinglas, rechter Rand, stark angeschnitten — bewusst mehr Andeutung
   als Abbildung. Eine gezeichnete Glaskontur wirkt bei dieser Groesse
   schnell wie ein Fremdkoerper; stattdessen nur Lichtbrechung: ein
   schmaler heller Kernstreifen mit weichem Verlauf zu beiden Seiten,
   unten dunkler wie Rotwein im Glas. Kein Fuss, kein Rand gezeichnet —
   die Unschaerfe zum Bildrand uebernimmt das. */
html[data-book="on"] .prop-glass{
  right:-1.5%; top:10%; width:min(2.6vw,34px); height:min(40vh,420px);
  background:
    linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.03) 30%, rgba(255,255,255,.22) 48%,
      rgba(255,255,255,.05) 62%, transparent 100%),
    linear-gradient(180deg,
      transparent 0%, transparent 55%, rgba(120,26,38,.16) 68%, rgba(90,18,28,.22) 100%);
  filter:blur(.6px);
  opacity:.55;
}

/* Requisiten nur im Spread-Modus in voller Kunstrichtung; Compact
   reduziert, Reader zeigt keine Buehne (siehe .stage[data-book-mode]). */
html[data-book="on"][data-book-mode="compact"] .prop-glass,
html[data-book="on"][data-book-mode="compact"] .prop-cutlery{display:none}
html[data-book="on"][data-book-mode="reader"] .prop{display:none}
html[data-book="on"][data-book-motion="static"] .prop-napkin::after{display:none}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 · MESSING-ECKEN UND OLIVEN-BLINDPRAEGUNG (Master §12/§13)
   ═══════════════════════════════════════════════════════════════════ */

/* Vier gebuerstete Messing-Eckschoner. Funktionsform, kein Zierrahmen —
   sie fassen die Ecke, umschliessen sie nicht. */
.chapter--board .page--full .corner{
  position:absolute; z-index:5; width:30px; height:30px; pointer-events:none;
  background:linear-gradient(135deg, #E4C688 0%, #B8935A 32%, #8A6A38 62%, #5F461F 100%);
  clip-path:polygon(0 0, 100% 0, 100% 26%, 26% 26%, 26% 100%, 0 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,247,232,.22);
  opacity:.82;
}
.chapter--board .page--full .corner::after{
  content:''; position:absolute; top:9px; left:9px; width:3px; height:3px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #F3DDA8, #7D6234 75%);
}
.chapter--board .page--full .corner--tl{top:16px; left:16px}
.chapter--board .page--full .corner--tr{top:16px; right:16px; transform:scaleX(-1)}
.chapter--board .page--full .corner--bl{bottom:16px; left:16px; transform:scaleY(-1)}
.chapter--board .page--full .corner--br{bottom:16px; right:16px; transform:scale(-1,-1)}
html[data-book="on"][data-book-mode="reader"] .corner{display:none}

/* Olivenzweige als Blindpraegung: zwei kleine Zweige aus je zwei
   laenglichen Blattformen, ohne Farbe und ohne Gold. Lesbar nur ueber
   das Schattenpaar (helle Kante oben links, dunkle unten rechts) —
   dieselbe Praegetechnik wie die Wortmarke auf dem Ruecken. Am
   Seitenrand, nicht in den Ecken, damit sie den Messingschonern nicht
   begegnen und dem Logo Raum lassen. */
.chapter--board .page--full .emboss{
  position:absolute; z-index:4; pointer-events:none; opacity:.6;
}
.chapter--board .page--full .emboss::before,
.chapter--board .page--full .emboss::after{
  content:''; position:absolute; width:24px; height:7px; border-radius:50%;
  background:transparent;
  box-shadow:
    -.5px -.5px .5px rgba(255,247,232,.09),
    .5px 1px 1px rgba(0,0,0,.38);
}
.chapter--board .page--full .emboss::before{transform:rotate(-16deg)}
.chapter--board .page--full .emboss::after{transform:rotate(24deg) translate(15px,7px)}
.chapter--board .page--full .emboss--olive-1{left:6.5%; bottom:22%}
.chapter--board .page--full .emboss--olive-2{right:7%; bottom:30%; transform:scaleX(-1)}
html[data-book="on"][data-book-mode="reader"] .emboss{display:none}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 · LEDERKORDEL-BINDUNG (Master §14)
   Drei Punkte am Bund statt Ringoesen — dunkle Kordel, winzige
   Messingoese. Sitzt ueber dem bestehenden Bund (.book::after), nicht
   an seiner Stelle: der Grat bleibt, die Bindung kommt hinzu.
   ═══════════════════════════════════════════════════════════════════ */
html[data-book="on"] .lacing{
  position:absolute; z-index:1; left:50%; top:0; bottom:0; width:34px;
  transform:translateX(-50%); pointer-events:none;
}
html[data-book="on"] .lacing__point{
  position:absolute; left:50%; width:16px; height:9px;
  transform:translateX(-50%) rotate(90deg);
  border-radius:50%;
  background:linear-gradient(180deg, #1C130B 0%, #0B0704 100%);
  box-shadow:
    0 1px 0 rgba(255,247,232,.06) inset,
    0 2px 4px rgba(0,0,0,.6);
}
html[data-book="on"] .lacing__point::after{
  content:''; position:absolute; left:50%; top:50%; width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #E8CC96, #7D6234 75%);
  opacity:.85;
}
html[data-book="on"] .lacing__point:nth-child(1){top:19%}
html[data-book="on"] .lacing__point:nth-child(2){top:49%}
html[data-book="on"] .lacing__point:nth-child(3){top:79%}
html[data-book="on"][data-book-mode="reader"] .lacing{display:none}


/* ═══════════════════════════════════════════════════════════════════
   LOOP A · SCHRITT 2 · GESCHLOSSENES BUCHOBJEKT
   docs/phase-6/02_COVER_SPEZIFIKATION.md

   Bisher war der geschlossene Zustand dieselbe Box wie die offene
   Doppelseite, nur mit scale(.84) — ein liegendes Panel im Verhaeltnis
   1,58 statt eines Einzelbandes. Jetzt hat er eine eigene Geometrie:
   Fine-Dining-Kochbuchformat 0,80, Hoehe im realen Objektband
   420–520 px. Die Verkleinerung kommt aus der Box, nicht mehr aus
   einer Skalierung; die Dreiviertelhaltung bleibt unveraendert.

   Zwei Ausschluesse tragen den Rest der Anwendung:

   :not([data-measuring]) — waehrend paginate() misst, gilt weiterhin
   die offene Box MIT scale(.84). Das ist kein Schoenheitsfehler,
   sondern Bedingung: die Paginierung misst die Seiten innerhalb des
   transformierten Buchkoerpers, sizeProbe() schreibt die gemessene
   Hoehe als feste Blatthoehe fort. Faellt die Skalierung im Messfenster
   weg, faellt der Umbruch anders aus. Der Umbruch bleibt damit exakt
   der Stand aus Commit 3e4ef9c.

   :not([data-book-mode="reader"]) — der Reader hat kein geschlossenes
   Objekt (Entscheidung Loop A), er behaelt 100vw/100dvh und
   transform:none.

   Keine neue Mechanik: der Uebergang vom geschlossenen Objekt zur
   offenen Doppelseite bleibt das bestehende Ritual und springt im
   ersten Frame. Das ist Loop C.
   ═══════════════════════════════════════════════════════════════════ */

html[data-book="on"]:is([data-state="closed.arrivalReady"],[data-open-phase="cover"]):not([data-book-mode="reader"]):not([data-measuring]) .book{
  width:auto;
  height:var(--cover-h);
  aspect-ratio:var(--cover-ratio);
  transform:rotateZ(-4deg) rotateY(10deg);
}

/* Der Deckel ist Leder, keine Papierseite. Geschlossen gibt die
   Cover-Seite ihren eigenen Hintergrund frei, sodass der Lederkoerper
   von .book die sichtbare Oberflaeche traegt — Narbung, Randabfall
   und Lichtkante inbegriffen. Der Innenschatten bleibt: er gehoert
   zum Einband, nicht zum Papier. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) .chapter--board .page{
  background:none;
}


/* Kontaktschatten fuer einen Einzelband: enger am Objekt, kuerzer,
   mit spuerbarerem Kern. Die weiche, breite Fassung war fuer eine
   Doppelseite von 1360 px gerechnet. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) .book__contact{
  left:7%; right:7%; bottom:-2%; height:9%;
  filter:blur(13px);
}

/* Ein Einband traegt keine Seitenzahl — weder vorn noch hinten. */
html[data-book="on"] .chapter--board .chapter__folio{display:none}


/* ═══════════════════════════════════════════════════════════════════
   LOOP B1 · BUCHKOERPER UND PHYSISCHE TIEFE

   Der geschlossene Band war bisher eine Ebene: richtige Silhouette,
   aber kein Koerper — kein Block, keine Deckelstaerke, kein Ruecken.

   Warum gemalt und nicht gebaut: Bei der festgelegten Haltung von
   rotateY(10deg) projiziert eine echte Seitenflaeche (rotateY 90deg)
   auf rund vier Pixel und liegt zudem hinter der Deckelebene —
   nachgemessen mit zwei eingefaerbten Probeflaechen, beide unsichtbar.
   Ein sichtbarer Ruecken ueber echte Geometrie braeuchte eine andere
   Pose. Die Tiefe entsteht deshalb auf der Deckelebene, wie alle
   uebrigen Materialien des Projekts auch: ueber Verlaeufe und Schatten.

   Alle Regeln haengen am geschlossenen Zustand und sind einzeln
   ansprechbar, damit Loop C sie beim Aufklappen unterschiedlich
   behandeln kann: der Block bleibt liegen, waehrend sich der Deckel
   hebt. Keine Regel beruehrt Boxmasse, Layoutfluss oder DOM.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Buchblock ───────────────────────────────────────────────
   .book__stack ist seit Phase 5 global ausgeblendet (Zeile ~1369),
   weil die Lagen im offenen Buch an der Blattkante sitzen. Fuer den
   geschlossenen Band wird genau diese Ebene wieder gebraucht — dort
   gibt es keine Blattkante, sondern einen Block unter dem Deckel.
   inset:0 und transform:none halten ihn deckungsgleich mit dem
   Buchkoerper; er liegt vor .chapter (z-index 1) zurueck und ist
   dadurch nur dort sichtbar, wo er den Deckel ueberragt. */
html[data-book="on"]:is([data-state="closed.arrivalReady"],[data-open-phase="cover"]):not([data-book-mode="reader"]):not([data-measuring]) .book__stack{
  display:block;
  inset:0;
  transform:none;
  z-index:0;
}

/* Blockkoerper: warmes Papier, Licht oben links wie ueberall.
   Der Versatz nach unten rechts ist die eigentliche Tiefenangabe —
   klein genug, dass er als Staerke liest und nicht als versetztes
   zweites Rechteck. */
html[data-book="on"]:is([data-state="closed.arrivalReady"],[data-open-phase="cover"]):not([data-book-mode="reader"]):not([data-measuring]) .book__stack::before{
  content:'';
  position:absolute;
  /* B2.1: vom vollflaechigen Rechteck auf den sichtbaren Randstreifen
     reduziert. Der Block lag bisher unter der gesamten Deckelflaeche
     und verdeckte dort das Material; sichtbar war ohnehin nur sein
     Ueberstand an der Vorderkante. */
  left:auto; right:-1.3%; width:7.4%; top:1.5%; bottom:-1.7%;
  border-radius:1px 2px 2px 1px;
  background:
    linear-gradient(96deg,
      #d9d0bb 0%, #e8e0d2 34%, #e3dbcc 62%, #d3cab5 86%, #c2b9a3 100%);
  box-shadow:none;
}

/* ── 2 · Papierkante ─────────────────────────────────────────────
   Sichtbar ist vom Block fast nur der Streifen unterhalb des Deckels.
   Dort sitzen die Lagen. Kein Wiederholmuster: die Stopps stehen
   ungleichmaessig, wie beschnittenes Papier, und der Kontrast bleibt
   im Bereich weniger Prozent. Die dunkle Linie ganz oben ist die
   Kehle, in der der Deckel auf dem Block aufliegt. */
html[data-book="on"]:is([data-state="closed.arrivalReady"],[data-open-phase="cover"]):not([data-book-mode="reader"]):not([data-measuring]) .book__stack::after{
  content:'';
  position:absolute;
  left:5.4%; right:-1.3%; top:auto; bottom:-1.7%; width:auto; height:3.4%;
  border-radius:0 0 2px 1px;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.16) 9%,
      #e6ded0 16%,
      #d5ccb7 27%,
      #ece4d6 38%,
      #d9d0bb 46%,
      #e3dbcd 57%,
      #cec5b0 66%,
      #e8e0d2 74%,
      #d2c9b4 83%,
      #c6bda7 92%,
      #b3aa95 100%);
  box-shadow:none;
}

/* ── 3 · Deckelstaerke ───────────────────────────────────────────
   Drei versetzte Lagen in Lederkantentoenen entlang der Silhouette.
   box-shadow liegt ausserhalb des Layoutflusses — die Buchbox bleibt
   unangetastet, die Paginierung sieht davon nichts. Die bestehenden
   Ringe und Innenkanten bleiben erhalten und stehen weiterhin zuerst. */
html[data-book="on"]:is([data-state="closed.arrivalReady"],[data-open-phase="cover"]):not([data-book-mode="reader"]):not([data-measuring]) .book{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    1px 2px 0 -0.5px var(--leather-edge),
    2px 4px 0 -1px #081310,
    3px 5px 0 -1.5px #060f0c,
    3px 7px 12px -6px rgba(0,0,0,.55),
    0 1px 0 rgba(255,247,232,.07) inset,
    0 -1px 0 rgba(0,0,0,.5) inset;
}
/* ═══════════════════════════════════════════════════════════════════
   LOOP B2.1 · LEDER UND LICHT — DECKELFLAECHE

   Befund aus dem Audit: Was am geschlossenen Deckel sichtbar war, war
   nicht das Leder, sondern die Volltonfuellung des Kapitelelements
   (.chapter--board, --forest-800, z-index 3). Das Ledersystem auf
   .book liegt darunter und ist unerreichbar — eine Aenderung an
   .book::before veraenderte messbar null Pixel.

   Die Fuellung ist zugleich Sichtbarriere: alle Kapitel liegen als
   inset:0 uebereinander im Buchkoerper, und ohne sie malen die
   cremefarbenen Seiten des Nachbarkapitels durch. Sie kann deshalb
   nicht entfernt, sondern nur ersetzt werden — durch das Material
   selbst.

   Eigenes Tokenset, ausschliesslich innerhalb dieser Regel definiert:
   die globalen --leather-Tokens speisen die offene Buchansicht und
   den Einband des Kellner-Notizbuchs und bleiben unangetastet.
   Gebunden an #cover statt .chapter--board, damit der Rueckeinband in
   Kapitel 10 in keinem Zustand beruehrt wird.
   ═══════════════════════════════════════════════════════════════════ */

html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover{
  /* Dunkles Olivleder. Farbton 62–67°, nicht die Tannengruen-Familie
     der Buehne. Vier Stufen: Lichtkante, Grundton, Kante, Tiefe.
     Die Werte liegen bewusst rund sechs Leuchtdichtepunkte unter dem
     Zielbild: die Narbungsebene hebt die Flaeche um genau diesen
     Betrag an, gemessen. Beides zusammen ergibt das dunkle Oliv. */
  --cover-w:calc(var(--cover-h) * .8);
  --cover-leather-lip:#212213;
  --cover-leather:#16170D;
  --cover-leather-edge:#131408;
  --cover-leather-deep:#0D0E05;

  background:
    /* Lichtkeule oben links. Radius bewusst innerhalb der Box — die
       bestehende Fassung auf .book endete bei 120%/90% ausserhalb und
       erreichte im sichtbaren Bereich nur einen Bruchteil ihrer
       Deckkraft. */
    radial-gradient(58% 42% at 26% 12%,
      rgba(255,246,222,.085) 0%, rgba(255,246,222,.028) 46%, transparent 76%),
    /* Abfall nach unten rechts, gleiche Lichtlogik wie Tisch und Buehne. */
    radial-gradient(88% 72% at 80% 94%,
      rgba(0,0,0,.24) 0%, rgba(0,0,0,.09) 48%, transparent 78%),
    /* Grundverlauf des Materials. */
    linear-gradient(146deg,
      var(--cover-leather-lip) 0%,
      var(--cover-leather) 36%,
      var(--cover-leather-edge) 86%,
      var(--cover-leather-deep) 100%);
}

/* ── 4 · Narbung ─────────────────────────────────────────────────
   Traeger ist die vorhandene .grain-Ebene der Deckelseite — kein neues
   DOM. Zwei Massstaebe: eine grobe Fleckigkeit, die auf 374 px Breite
   knapp einmal durchlaeuft und deshalb kein Muster bilden kann, und
   eine feine Pore darueber.

   Ohne Blendmodus: .grain liegt innerhalb von .page__body (z-index 2)
   und .spread (z-index 3), also in einem isolierten Stapelkontext.
   mix-blend-mode findet dort keinen Hintergrund zum Mischen, faellt
   auf normal zurueck und legt einen grauen Schleier ueber den Deckel —
   gemessen +14 Leuchtdichtepunkte. Die Struktur kommt deshalb aus der
   Alphakante der Turbulenz: feColorMatrix setzt RGB auf eine feste
   Farbe und leitet Alpha aus dem Grauwert ab. Eine dunkle Lage senkt
   die Poren, eine warme Lage hebt die Grate — zusammen bleibt das
   Mittel der Flaeche erhalten. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .grain{
  opacity:.62;
  mix-blend-mode:normal;
  background-image:
    /* Poren, dunkel */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='cp'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='4'/><feColorMatrix type='matrix' values='0 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0 0.02 .3 .3 .3 0 0'/></filter><rect width='140' height='140' filter='url(%23cp)'/></svg>"),
    /* Grate, warm */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='cr'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='19'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.96 0 0 0 0 0.84 .22 .22 .22 0 -.09'/></filter><rect width='140' height='140' filter='url(%23cr)'/></svg>"),
    /* grobe Fleckigkeit, dunkel */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='cg'><feTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.03 .16 .16 .16 0 -.05'/></filter><rect width='300' height='300' filter='url(%23cg)'/></svg>");
  background-size:112px 112px, 128px 128px, 460px 460px;
}

/* ── 5 · Kerzenlicht auf dem Material ────────────────────────────
   Bisher las nur .book::before die --candle-Variable — also eine
   Ebene, die im geschlossenen Zustand verdeckt ist. Das Kerzenlicht
   lief damit ins Leere. Traeger ist jetzt das Pseudoelement des
   Deckels selbst: .chapter--board::before ist fuer Einbaende
   abgeschaltet und im geschlossenen Zustand frei. Es traegt eine
   zweite, waermere Lichtkeule und atmet mit der Flamme.
   Der Ausschlag bleibt eng — es soll wirken, als stuende irgendwo im
   Raum eine Kerze, nicht als pulsiere der Deckel. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover::before{
  display:block;
  inset:0;
  border-radius:inherit;
  box-shadow:none;
  background:
    radial-gradient(46% 34% at 28% 14%,
      rgba(255,236,198,.055) 0%, rgba(255,236,198,.02) 48%, transparent 78%);
  filter:brightness(calc(1 + (var(--candle, 1) - 1) * 1.8));
}

/* ── 6 · Auflage und Wurfschatten ────────────────────────────────
   Der Kontaktschatten aus Loop A sass proportional, war aber eine
   einzelne weiche Ellipse. Ein Buch auf einer Tischplatte wirft
   zweierlei: einen dichten, kurzen Kern direkt an der Auflagekante
   und einen laengeren, weichen Wurf nach unten rechts, der Richtung
   und Abstand der Lichtquelle verraet. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) .book__contact{
  left:2%; right:-4%; bottom:-3%; height:13%;
  filter:blur(11px);
  background:
    radial-gradient(38% 44% at 40% 34%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.30) 58%, transparent 76%),
    radial-gradient(62% 54% at 64% 62%, rgba(0,0,0,.44) 0%, rgba(0,0,0,.14) 56%, transparent 80%);
}


/* ═══════════════════════════════════════════════════════════════════
   LOOP B2.2 · HARDWARE UND BUCHBINDEKUNST

   Alles zustandsgebunden. Die Basisregeln fuer Ecken, Praegung und
   Ruecken bleiben unveraendert und tragen weiterhin die offene
   Cover-Ansicht; Kapitel 10 hat keine Beschlaege (addCoverJewelry()
   legt sie ausschliesslich fuer #cover an).

   Messingwerte als lokale Custom Properties innerhalb der Regel —
   --brass-500 und --brass-700 speisen 35 weitere Stellen und bleiben
   unangetastet.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Eckschoner ──────────────────────────────────────────────
   Gemessen sassen sie bei 8,0 % der Deckelbreite und 4,3 %
   Einrueckung — fast dreifache Groesse, und sie fassten die Ecke
   nicht, sondern lagen daneben. Groesse und Sitz haengen jetzt an der
   Deckelbreite, damit sie ueber alle Breakpoints proportional bleiben. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .corner{
  --brass-lit:#E9D097;
  --brass-mid:#B0894C;
  --brass-low:#7A5C2E;
  --brass-patina:#4A3A21;

  width:3.1%;
  height:auto;
  aspect-ratio:1;
  opacity:1;                       /* Metall ist opak — vorher schienen 18 % Leder durch */
  clip-path:polygon(0 0, 100% 0, 100% 33%, 33% 33%, 33% 100%, 0 100%);

  background:
    /* Buerstung: feine Baender quer zur Armrichtung. Unregelmaessige
       Periode, damit kein Moire entsteht. Ein gleichmaessiger Verlauf
       allein ist Goldfarbe, keine gebuerstete Oberflaeche. */
    repeating-linear-gradient(118deg,
      rgba(255,250,236,.26) 0px,  rgba(255,250,236,.26) 1.1px,
      rgba(0,0,0,.00)      1.1px, rgba(0,0,0,.00)      2.0px,
      rgba(0,0,0,.22)      2.0px, rgba(0,0,0,.22)      3.1px,
      rgba(255,250,236,.12) 3.1px, rgba(255,250,236,.12) 3.9px,
      rgba(0,0,0,.00)      3.9px, rgba(0,0,0,.00)      5.2px),
    /* Anlauf im Innenwinkel und an der unteren Kante — dort fasst die
       Hand das Buch, dort setzt sich das Metall zu. */
    radial-gradient(120% 120% at 88% 88%,
      var(--brass-patina) 0%, rgba(74,58,33,.35) 34%, transparent 62%),
    /* Grundton des Metalls */
    linear-gradient(135deg,
      var(--brass-lit) 0%, var(--brass-mid) 38%, var(--brass-low) 72%, #5E4622 100%);

  box-shadow:
    /* Einlassung: das Leder gibt an der Kante nach */
    0 0 0 .5px rgba(0,0,0,.72),
    .5px 1px 1px rgba(0,0,0,.9),
    1.5px 2.5px 3px -.5px rgba(0,0,0,.72),
    3px 5px 9px -1px rgba(0,0,0,.68),
    /* Lichtkante oben links, wie ueberall im Objekt */
    inset .5px .5px 0 rgba(255,250,236,.34),
    inset -.5px -.5px 0 rgba(0,0,0,.4);
}

/* Sitz: der Schoner fasst die Ecke, statt daneben zu liegen. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .corner--tl{top:.35%; left:.3%}
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .corner--tr{top:.35%; right:.3%}
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .corner--bl{bottom:.35%; left:.3%}
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .corner--br{bottom:.35%; right:.3%}

/* Niete: sitzt im Metall, nicht darauf. Schattenpaar statt Flaeche. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .corner::after{
  top:13%; left:13%; width:20%; height:20%;
  background:radial-gradient(circle at 38% 34%, #D8BC84 0%, #8A6A38 62%, #4E3A1C 100%);
  box-shadow:
    inset -.5px -.5px .5px rgba(0,0,0,.55),
    inset .5px .5px .5px rgba(255,250,236,.25),
    0 .5px .5px rgba(0,0,0,.45);
}

/* ── 2 · Ruecken: Buende, Kapitalband, Falz ──────────────────────
   Korrektur zu Loop B1: Der dort auf .book::after gelegte Ruecken lag
   hinter dem Deckel (z-index 0 gegen 3) und war nie sichtbar — was
   dort als Lederwoelbung gemessen wurde, war die vorhandene
   Messingkante der Deckelseite. Die B1-Regel ist entfernt.

   Traeger ist jetzt genau diese Kante: .page--full::before liegt auf
   dem Deckel und ist im geschlossenen Zustand die einzige Ebene am
   linken Rand ueber dem Leder. Sie traegt Ruecken, vier Buende,
   Kapitalband an Kopf und Fuss sowie den Falz zum Deckel.

   Die Kordelbindung entfaellt (Ihre Entscheidung): .lacing wird im
   geschlossenen Zustand ausgeblendet. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .page--full::before{
  display:block;
  left:0; top:0; bottom:0; width:6.2%;
  border-radius:4px 0 0 4px;
  background:
    /* Buende und Kapitalband, quer ueber den Ruecken */
    linear-gradient(180deg,
      rgba(200,177,131,.55) 0%,   rgba(110,90,52,.55) 1.1%,
      rgba(200,177,131,.55) 1.7%, rgba(0,0,0,.42) 2.6%,
      transparent 3.4%, transparent 18.4%,
      rgba(255,247,232,.13) 18.4%, rgba(255,247,232,.13) 19.6%,
      rgba(0,0,0,.34) 21.8%, rgba(0,0,0,.34) 22.8%, transparent 23.8%,
      transparent 38.6%,
      rgba(255,247,232,.13) 38.6%, rgba(255,247,232,.13) 39.8%,
      rgba(0,0,0,.34) 42.0%, rgba(0,0,0,.34) 43.0%, transparent 44.0%,
      transparent 58.8%,
      rgba(255,247,232,.13) 58.8%, rgba(255,247,232,.13) 60.0%,
      rgba(0,0,0,.34) 62.2%, rgba(0,0,0,.34) 63.2%, transparent 64.2%,
      transparent 79.0%,
      rgba(255,247,232,.13) 79.0%, rgba(255,247,232,.13) 80.2%,
      rgba(0,0,0,.34) 82.4%, rgba(0,0,0,.34) 83.4%, transparent 84.4%,
      transparent 96.6%,
      rgba(0,0,0,.42) 97.4%, rgba(200,177,131,.55) 98.3%,
      rgba(110,90,52,.55) 98.9%, rgba(200,177,131,.55) 100%),
    /* Woelbung des Ruckens und Falz zum Deckel: die aeusseren Prozent
       fangen Licht, die inneren sind die Rille. */
    linear-gradient(90deg,
      rgba(255,247,232,.14) 0%,
      rgba(255,247,232,.05) 9%,
      rgba(0,0,0,.10) 34%,
      rgba(0,0,0,.26) 62%,
      rgba(0,0,0,.52) 84%,
      rgba(0,0,0,.60) 93%,
      rgba(255,247,232,.06) 100%);
}

/* Kordelbindung entfaellt im geschlossenen Zustand. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) .lacing{
  display:none;
}

/* ── 3 · Blindpraegung ───────────────────────────────────────────
   B2.1 hat sie verschluckt: gegen die flache Flaeche stand sie mit
   4,4 Leuchtdichtepunkten, gegen die genarbte mit 0,26 — viermal
   schwaecher als das Rauschen des Materials, in dem sie liegt.

   Keine Kontrasterhoehung, sondern Materialverdraengung: Eine echte
   Blindpraegung presst das Leder ein. Die Grube liegt tiefer als die
   Flaeche, an ihrer oberen linken Kante steht ein Lichtgrat, an der
   unteren rechten ein Schatten, und im Grund sammelt sich ein
   Kernschatten. Drei Schatten statt zwei, dazu eine leichte
   Eintiefung der Flaeche selbst. Groessen relativ zur Deckelbreite. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .emboss{
  opacity:1;
  /* Das Element hatte keine eigene Groesse — Prozentwerte der
     Pseudoelemente loesen dann gegen null auf. Erst die Groesse hier
     macht die Praegung skalierbar. */
  width:6.4%; height:1.9%;
}
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .emboss::before,
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .emboss::after{
  width:100%; height:100%;
  background:rgba(0,0,0,.14);
  box-shadow:
    /* Lichtgrat an der Praegekante oben links */
    -.5px -.5px .5px rgba(255,250,236,.30),
    -1px -1px 1.5px rgba(255,250,236,.12),
    /* Schatten an der gegenueberliegenden Kante */
    .5px 1px 1px rgba(0,0,0,.62),
    1px 1.5px 2.5px rgba(0,0,0,.34),
    /* Kernschatten im Grund der Praegung */
    inset .5px .5px 1px rgba(0,0,0,.5);
}


/* ═══════════════════════════════════════════════════════════════════
   LOOP B2.3 · EDITORIAL COVER DESIGN

   Gemessener Ausgangsbefund: Das hellste Element des Deckels war der
   Weblink (74,2 Leuchtdichtepunkte Kontrast), die Marke stand bei
   16,0 % Deckelbreite und 40,3 Punkten, der Kicker war mit 68,5 %
   Breite vierfach so gross wie sie und brach auf drei Zeilen. Ein
   gebundenes Buch traegt zuerst seinen Titel — hier stand zuerst eine
   Handlungsaufforderung.

   Alle Regeln zustandsgebunden, kein DOM, kein JavaScript. Der
   Wortlaut aller Texte bleibt unveraendert im Dokument.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · CTA verlaesst den Deckel ────────────────────────────────
   Kein Buch fordert zum Oeffnen auf. Der Link bleibt jedoch die
   einzige benannte Bedienung des Deckels und die einzige Klickflaeche
   — ein Klick-Handler auf dem Buchkoerper existiert nicht. Er wird
   deshalb nicht entfernt, sondern umgewidmet:

   Der Traeger .cover__cta spannt sich ueber den gesamten Deckel und
   macht ihn klickbar. Der sichtbare Text verlaesst die Lederflaeche
   und liegt als feine Zeile auf dem Tisch unterhalb des Buches.
   Zugaenglicher Name, Tastaturfokus und Klickverhalten bleiben
   unveraendert; es aendert sich nur, wo der Text steht. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .page__body{
  height:100%;
}
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .cover__cta{
  position:absolute;
  /* Der naechste positionierte Vorfahr ist .page__body, das um den
     Satzrand eingerueckt liegt und ohne feste Hoehe nur so hoch ist wie
     sein Inhalt — inset:0 deckte damit nur 66 % des Deckels. .page__body
     bekommt im geschlossenen Zustand die volle Seitenhoehe, dann deckt
     inset:0 den Deckel exakt.
     Ein pauschaler Ueberstand waere einfacher, zaehlt aber in
     scrollHeight mit: absolut positionierte Kinder erweitern den
     Ueberlaufbereich ihres Vorfahren, und overflowCheck() meldete
     daraufhin den Deckel als ueberlaufend. */
  inset:0;
  z-index:6;
  margin:0;
  display:block;
}
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .cta-link{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  display:block;
  /* Der Schriftzug verlaesst die Lederflaeche. font-size:0 nimmt ihn
     aus dem Bild, ohne ihn aus dem Dokument oder dem
     Barrierefreiheitsbaum zu nehmen — anders als display:none oder
     visibility:hidden. Der Fokusring umschliesst weiterhin den ganzen
     Deckel und macht die Bedienung sichtbar. */
  line-height:0;
  font-size:0;
  text-decoration:none;
  border:0;
}

/* ── Loop RELEASE-FIX-1 · die fehlende Zeile ─────────────────────
   Der Block darueber nimmt den Schriftzug mit font-size:0 aus dem
   Bild und kuendigt an, dass er "als feine Zeile auf dem Tisch
   unterhalb des Buches" wieder erscheint. Diese Zeile fehlte. Ab
   1024 px war damit die einzige benannte Bedienung des Deckels
   unsichtbar: gemessen 0 px Schriftgroesse bei 1440 und 1024,
   13 px nur im Reader-Modus.

   Warum ein erzeugter Inhalt und nicht der Schriftzug selbst:
   .cover__cta liegt in .page__body, und .page traegt overflow:hidden.
   Alles, was von dort unter das Buch reicht, wird am Deckelrand
   abgeschnitten — auch fuer die Maus. Den Schriftzug hinausschieben
   hiesse, .page zu oeffnen; das haelt die Doppelseite zusammen und
   bleibt unangetastet.

   Traeger ist deshalb .spread, das ueber .page liegt und nicht
   beschnitten wird. .spread:not(.spread--single)::after ist der Falz;
   die Cover-Doppelseite ist spread--single und ihr ::after frei.

   Die Gegendrehung hebt rotateZ(-4deg) rotateY(10deg) von .book auf.
   Ohne sie kippt die Zeile mit dem Deckel; sie soll aber auf dem
   Tisch liegen, nicht am Buch haengen.

   Der Zustand ist genau closed.arrivalReady, nicht ^="closed": mit
   dem ersten Klick beginnt closed.opening, und die Einladung
   verschwindet in dem Moment, in dem sie angenommen wird.

   Abstand und Groesse sind gegen die Fortschrittspunkte gemessen.
   Bei 1280x560 blieb mit clamp(20px,3.4vh,34px) 1 px Ueberdeckung;
   clamp(8px,1.8vh,22px) laesst dort 1 px Luft und bei den ueblichen
   Hoehen 101 bis 194 px. Die Untergrenze von 11 px haelt die Zeile
   lesbar, wo --cover-h auf 420 px klemmt.

   Kontrast gegen den Tisch gemessen: 10,1 bis 10,4 : 1.

   Die Zeile nimmt keine Klicks an. Sie kann es nicht — sie liegt
   ausserhalb des Deckels, und der Deckel ist die Klickflaeche. Sie
   ist deshalb als leise Zeile gesetzt, nicht als Schaltflaeche. */
html[data-book="on"][data-state="closed.arrivalReady"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .spread::after{
  content:'Karte \0000f6ffnen';
  position:absolute;
  left:0; right:0; top:100%;
  margin-top:clamp(8px,1.8vh,22px);
  text-align:center;
  transform:rotateY(-10deg) rotateZ(4deg);
  font-family:var(--sans);
  font-size:clamp(11px,calc(var(--cover-h) * .026),13.5px);
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:rgba(245,241,232,.78);
  pointer-events:none;
}

/* ── 2–4 · Marke, Kicker, Satzspiegel ────────────────────────────
   Die drei haengen voneinander ab und sind deshalb eine Einheit: eine
   Marke bei 40 % Deckelbreite braucht einen engeren Satzspiegel und
   einen zurueckgenommenen Untertitel, sonst kippt die Doppelseite.

   Alle Groessen leiten sich von --cover-h ab, dem Token, das seit
   Loop A die Deckelhoehe traegt. Die Deckelbreite ist 0.8 * --cover-h;
   damit skaliert der Satz ueber alle Breakpoints proportional zum
   Objekt statt zum Viewport. */

/* Satzspiegel: ein Buchdeckel lebt vom Rand. Vorher lief er mit
   98,1 % bis an die Kanten. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .page__inner--center{
  padding-left:calc(var(--cover-w) * .16);
  padding-right:calc(var(--cover-w) * .16);
  padding-top:calc(var(--cover-w) * .21);
  padding-bottom:0;
}

/* Wortmarke: von 16 % auf 40 % der Deckelbreite. Sie ist der Titel
   des Bandes, nicht sein Beiwerk. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .brandmark--cover{
  width:calc(var(--cover-h) * .8 * .40);
  max-width:none;
  margin:0 auto calc(var(--cover-h) * .075);
}

/* Kicker: einzeilig, schmaler, leiser. Er nennt das Fachgebiet, er
   traegt nicht die Seite. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .kicker{
  font-size:calc(var(--cover-h) * .0205);
  letter-spacing:.17em;
  line-height:1.5;
  max-width:55%;
  margin-left:auto; margin-right:auto; margin-bottom:0;
  white-space:nowrap;
  /* Loop L3.1: Deckkraft von .46 auf .54. Auf dem Olivleder ergab .46
     einen Kontrast von 4,26 und lag unter AA; .54 ergibt 5,41. */
  color:rgba(245,241,232,.54);
}

/* ── 5 · Blindpraegung: Symmetrie ────────────────────────────────
   Gemessen sassen die beiden Zweige bei 15,4 %/77,5 % und
   88,3 %/65,0 % — auf beiden Achsen unsymmetrisch, ohne Bezug zur
   Mittelachse des Satzes. Sie werden nicht verschoben, um den Fuss zu
   fuellen (der bleibt bewusst leer), sondern nur zueinander ins Lot
   gebracht: gleicher Randabstand, gleiche Hoehe. Die Materialwirkung
   aus Loop B2.2 bleibt unveraendert. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .emboss--olive-1{
  left:7.5%; right:auto; bottom:26%;
}
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .emboss--olive-2{
  right:7.5%; left:auto; bottom:26%;
}


/* ── Loop C1a · Material waehrend der Oeffnung ───────────────────
   Geometrie und Material des geschlossenen Buches sind ab hier
   getrennt. Die Box, der Buchblock und die Deckelstaerke haengen an
   closed.arrivalReady: waehrend der Oeffnung braucht die einlaufende
   Doppelseite ihre volle Groesse, sonst wird sie in einen 374-px-
   Deckel gequetscht, fuer den sie nicht umbrochen ist.

   Alles Materielle — Leder, Narbung, Beschlaege, Ruecken, Praegung,
   Editorial-Satz, Kontaktschatten — haengt weiterhin an
   [data-state^="closed"] und bleibt ueber die gesamte Bewegung
   sichtbar. Damit der Deckelsatz auf der groesseren Box nicht winzig
   wirkt, folgen die beiden Masstokens der offenen Buchgeometrie —
   allerdings erst ab Phase 2. In Phase 1 (data-open-phase="cover")
   behaelt das Buch sein geschlossenes Mass, dort gelten weiterhin die
   geschlossenen Tokenwerte. */
html[data-book="on"][data-state="closed.opening"]:not([data-open-phase="cover"]):not([data-book-mode="reader"]):not([data-measuring]) #cover{
  --cover-h:min(860px, calc(100vh - 122px));
  --cover-w:min(1360px, calc(100vw - 2 * clamp(16px,2.4vw,44px)));
}


/* ── Loop C1b-2 · Scharnierachse ─────────────────────────────────
   Gemessen drehte das Deckelblatt um 187,195 px — exakt seine Mitte.
   Ein gebundener Deckel dreht am Falz, also an der Innenkante des
   Ruckens. Der Ruecken liegt bei 0–6,2 % der Deckelbreite (Loop B2.2).

   Dieselbe Bauart nutzen .fan__leaf und .page--recto laengst; nur
   .page--full hatte nie eine eigene Regel. Zustandsgebunden — im
   offenen Buch bleibt das Deckelblatt unveraendert. */
html[data-book="on"][data-state^="closed"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .page--full{
  transform-origin:6.2% center;
}

/* In Phase 2 gibt der Deckel den Blick frei.

   Das Cover-Kapitel traegt seit Loop B2.1 einen opaken Lederhintergrund
   und liegt bei z-index 3 — es verdeckt damit auch dann noch die
   einlaufende Doppelseite, wenn das Deckelblatt selbst laengst
   weggedreht ist. Gemessen blieb dadurch der Papieranteil ueber die
   gesamte Phase 2 bei 0 %.

   Sobald der Phasenmarker faellt, ist der Deckel offen: Das Kapitel
   gibt seine Flaeche frei, darunter liegt die Doppelseite in ihrer
   vollen Box. Der Ruhezustand und Phase 1 bleiben unberuehrt. */
html[data-book="on"][data-state="closed.opening"]:not([data-open-phase="cover"]):not([data-book-mode="reader"]):not([data-measuring]) #cover{
  background:none;
}


/* ═══════════════════════════════════════════════════════════════════
   LOOP C1b-4 · L4-1 — MATERIALEBENEN AUF DAS DREHENDE BLATT

   Gemessener Ausgangsbefund: .page--full ist transparent. Das
   Olivleder liegt auf #cover, dem Kapitel, und das rotiert nicht. Was
   sich beim Oeffnen dreht, ist keine Lederplatte, sondern eine
   durchsichtige Scheibe mit Wortmarke, Narbung, Beschlaegen, Praegung
   und Ruecken. Belegt durch Ablation bei 820 ms: #cover ausblenden
   aendert 135.135 von 135.450 Bildpunkten der Flaeche, .page--full
   ausblenden dort keinen einzigen.

   Folge davon war, dass keine Ebene je hinter dem Deckel liegen kann.
   Eine Narbung auf dem freien #cover::after schien durch das Blatt
   hindurch und verdoppelte sich auf der Deckelflaeche — gemessen 67 %
   der Buchbox bei flach liegendem Deckel.

   Deshalb bekommt das Blatt hier fuer die Dauer von Phase 1 die
   sichtbare Lederflaeche selbst. Nichts wird von #cover entfernt: das
   Kapitel behaelt Leder und Licht und traegt weiterhin die Flaeche,
   die der Deckel freigibt. Es wird nur oben doppelt aufgelegt, in
   derselben Reihenfolge und mit denselben Werten.

   Keine neue Farbe, kein neues DOM, kein neues Token — der Verlauf ist
   derselbe wie auf #cover, die --cover-leather-* erbt das Blatt von
   dort.

   Nachgemessen ohne jede Animation, Deckelwinkel von Hand gesetzt:
   bei 0 Grad 0 von 1.296.000 Bildpunkten, bei -26 Grad ebenfalls 0.
   Ab -58 Grad wandert die Lichtkeule mit dem Deckel und verkuerzt sich
   perspektivisch, statt auf der stehenden Ebene liegen zu bleiben —
   genau der Zweck dieses Schritts. Die Lichtmenge auf dem Blatt liegt
   bei 0 Grad bei +0,06 % und faellt bis -71 Grad auf -4,22 %. Das ist
   die Verkuerzung, kein Verlust der Ebene.
   ═══════════════════════════════════════════════════════════════════ */

html[data-book="on"][data-open-phase="cover"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .page--full{
  background:
      /* Lichtkeule oben links. Radius bewusst innerhalb der Box — die
         bestehende Fassung auf .book endete bei 120%/90% ausserhalb und
         erreichte im sichtbaren Bereich nur einen Bruchteil ihrer
         Deckkraft. */
      radial-gradient(58% 42% at 26% 12%,
        rgba(255,246,222,.085) 0%, rgba(255,246,222,.028) 46%, transparent 76%),
      /* Abfall nach unten rechts, gleiche Lichtlogik wie Tisch und Buehne. */
      radial-gradient(88% 72% at 80% 94%,
        rgba(0,0,0,.24) 0%, rgba(0,0,0,.09) 48%, transparent 78%),
      /* Grundverlauf des Materials. */
      linear-gradient(146deg,
        var(--cover-leather-lip) 0%,
        var(--cover-leather) 36%,
        var(--cover-leather-edge) 86%,
        var(--cover-leather-deep) 100%);
}

/* Das Kerzenlicht liegt auf #cover::before und damit unter dem Blatt.
   Ein undurchsichtiges Blatt wuerde es auf der Deckelflaeche
   verschlucken, deshalb wandert es hier mit.

   .page--full::after ist der einzige freie Traeger auf dem Blatt: die
   globale Papierfaser-Regel setzt dort seit Phase 5 content:none
   (.page::after), ihre opacity:.045 und ihr z-index:1 muessen aber
   ausdruecklich zurueckgenommen werden, sonst kaeme das Licht auf
   4,5 % Deckkraft und ueber statt unter der Narbung an.

   z-index:0 stellt die bisherige Malreihenfolge wieder her:
   Leder -> Licht -> Narbung (z1) -> Satz und Ruecken (z2) ->
   Praegung (z4) -> Beschlaege (z5). */
html[data-book="on"][data-open-phase="cover"]:not([data-book-mode="reader"]):not([data-measuring]) #cover .page--full::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; opacity:1;
  background:
    radial-gradient(46% 34% at 28% 14%,
      rgba(255,236,198,.055) 0%, rgba(255,236,198,.02) 48%, transparent 78%);
  filter:brightness(calc(1 + (var(--candle, 1) - 1) * 1.8));
}


/* ── Loop C1b-4 · L4-2 — Spiegel und Vorsatz ─────────────────────
   Seit L4-1 traegt das drehende Blatt seine Lederflaeche selbst. Damit
   ist #cover::after erstmals ein Traeger, der wirklich hinter dem
   Deckel liegt: gemessen 0 Pixel Durchschein auf der flachen
   Deckelflaeche, bei jeder geprueften Deckkraft bis hinauf zu .62.

   Was der Deckel freigibt, hatte bisher lokal sigma 0,32 — ein reiner
   Verlauf ohne jede Materialzeichnung, waehrend die Deckelflaeche
   daneben bei sigma 2,13 liegt. Diese Flaeche waechst ueber Phase 1
   auf rund 60 % der Buchbox und ist damit die groesste einzelne
   Flaeche der ganzen Oeffnung.

   Es ist dieselbe Narbung wie auf dem Deckel — dieselben drei Lagen,
   dieselben Frequenzen, dieselben Seeds, dieselben Farben, dieselben
   Kachelmasse. Keine neue Oberflaeche, keine neue Farbe, kein neues
   Token.

   Zwei Ableitungen waren noetig:

   · color-interpolation-filters='sRGB'. Ohne Angabe rechnen
     SVG-Filter in linearRGB; die als 0.04 notierte Porenfarbe kommt
     dort als sRGB 56 heraus. Auf dem Deckel faellt das nicht auf, weil
     die Flaeche darunter heller ist — auf dem dunklen Vorsatz hellte
     selbst die dunkle Lage um sechs Punkte auf, statt Poren zu
     senken. Gemessen: Lage 1 allein trug +0,60 sigma bei +6,0
     Helligkeitspunkten. In sRGB dunkeln die Poren wieder ab und die
     Struktur entsteht in beide Richtungen.

   · Deckkraft .30 statt .62. Kalibriert, nicht geschaetzt: .26 ergab
     sigma 1,61 / L 27,7, .30 ergab 1,82 / 28,7, .34 ergab 2,04 / 29,6,
     .40 ergab 2,37 / 31,0. Genommen ist die zurueckhaltendere der
     beiden Stufen im Zielband.

   Der Vorsatz bleibt mit sigma 1,82 unter der Deckelflaeche mit 2,13.
   Das ist richtig so: er liegt im Schatten des offenen Deckels und
   darf nie so praesent sein wie der Einband selbst.

   z-index:0 haelt dieselbe Reihenfolge wie auf dem Deckel —
   Leder, Kerzenlicht (#cover::before), dann die Narbung.

   Der linke Einzug von 6,2 % ist kein Spielraum, sondern Messfolge.
   Sobald das Deckelblatt seine erste 3D-Matrix bekommt — schon bei
   -0,5 Grad — wird es rund 16 px weiter rechts gezeichnet, obwohl sein
   Rechteck deckungsgleich bleibt. Nachgewiesen mit eingefaerbten
   Flaechen: bei t=0 beginnt das Blatt an der Boxkante, bei t=20 liegt
   davor ein Streifen, der genau der Rueckenzone entspricht. Die Luecke
   ist aelter als dieser Schritt und war nur unsichtbar, solange dort
   dasselbe Leder lag — mit Narbung waere sie eine Naht am Falz
   geworden, gemessen 3.874 Bildpunkte bei bis zu 11 Stufen.

   6,2 % ist dabei kein neuer Wert: es ist die Rueckenbreite aus B2.2
   und die Scharnierachse aus C1b-2. Buchbinderisch ist es ohnehin
   richtig — der Spiegel beginnt am Falz und laeuft nicht ueber den
   Ruecken. Mit dem Einzug: 0 Bildpunkte bei t=0 und t=20, die
   Zielwerte der freigelegten Flaeche bleiben unveraendert. */
html[data-book="on"][data-open-phase="cover"]:not([data-book-mode="reader"]):not([data-measuring]) #cover::after{
  content:''; position:absolute; inset:0 0 0 6.2%; z-index:0; pointer-events:none;
  border-radius:inherit;
  opacity:.30;
  background-image:
    /* Poren, dunkel */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='cp' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='4'/><feColorMatrix type='matrix' values='0 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0 0.02 .3 .3 .3 0 0'/></filter><rect width='140' height='140' filter='url(%23cp)'/></svg>"),
    /* Grate, warm */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='cr' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='19'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.96 0 0 0 0 0.84 .22 .22 .22 0 -.09'/></filter><rect width='140' height='140' filter='url(%23cr)'/></svg>"),
    /* grobe Fleckigkeit, dunkel */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='cg' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.03 .16 .16 .16 0 -.05'/></filter><rect width='300' height='300' filter='url(%23cg)'/></svg>");
  background-size:112px 112px, 128px 128px, 460px 460px;
}