/* Speisekarte als Blätterbuch – Optik nach der Etem-Karte, Akzent in der Betriebsfarbe. */
:root {
  --farbe: #b91c1c; --papier: #f2efec; --grau: #948b84; --dunkel: #7a736d;
  /* Design-Stellschrauben je Betrieb (lib/design.js setzt sie per :root) */
  --papier-grund: #0a0908;
  --buehne: #070605;
  --preis: #ffffff;
  --rahmen: color-mix(in srgb, var(--farbe) 35%, transparent);
  --schrift-titel: 'Playfair Display', Georgia, serif;
  --schrift-text: Inter, system-ui, sans-serif;
  --schrift-claim: 'Bebas Neue', Impact, sans-serif;
  --seiten-bild: url('/buch/page-r.jpg');
  --seiten-bild-links: url('/buch/page-l.jpg');
  --koernung: .18;
  --falz: rgba(0,0,0,.95);        /* Schatten am Buchfalz */
  --buehne-text: #cfc9c4;         /* Schrift in Kopf-/Fußzeile */
  --buehne-linie: rgba(255,255,255,.1);
  --toc-linie: rgba(255,255,255,.2);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--buehne); color-scheme: dark; }
html { overscroll-behavior: none; }
body.b-body {
  font-family: var(--schrift-text); color: var(--papier);
  background: var(--buehne) radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--buehne) 85%, white) 0%, var(--buehne) 70%, color-mix(in srgb, var(--buehne) 80%, black) 100%) fixed;
  display: flex; flex-direction: column; height: 100dvh; min-height: 100%; overflow: hidden;
  -webkit-font-smoothing: antialiased; touch-action: pan-y;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; }

/* ── Kopf- und Fußzeile ── */
.b-kopfzeile { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(10px + env(safe-area-inset-top)) 20px 10px; border-bottom: 1px solid var(--buehne-linie); }
.b-kopf-links { display: flex; align-items: center; gap: 12px; min-width: 0; }
.b-strich { width: 24px; height: 1px; background: var(--farbe); flex: none; }
.b-kopf-titel { color: var(--buehne-text); font-size: 11px; letter-spacing: .35em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-kapitel-nav { display: none; gap: 20px; overflow-x: auto; }
@media (min-width: 1024px) { .b-kapitel-nav { display: flex; } }
.b-kapitel-nav button { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8a827c; white-space: nowrap; transition: color .2s; }
.b-kapitel-nav button:hover { color: #fff; }
.b-kopf-rechts { display: flex; align-items: center; gap: 4px; }
.b-icon { padding: 8px; color: var(--buehne-text); transition: color .2s; }
.b-icon:hover { color: #fff; }
.b-icon-aus { color: #4a4440; }

.b-fusszeile { flex: none; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--buehne-linie); }
.b-fuss-innen { max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.b-balken { flex: 1; height: 1px; background: var(--buehne-linie); position: relative; }
.b-balken-voll { position: absolute; inset: 0 auto 0 0; background: var(--farbe); transition: width .5s; }
.b-nav { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--buehne-linie); color: var(--buehne-text); transition: all .25s; }
.b-nav:hover:not(:disabled) { border-color: var(--farbe); color: #fff; }
.b-nav:disabled { opacity: .25; cursor: default; }
.b-nav svg { width: 16px; height: 16px; }
.b-fuss-hinweis { text-align: center; color: #4a4440; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-top: 8px; }

/* ── Bühne ── */
.b-buehne { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 8px 8px; isolation: isolate; position: relative; }
@media (min-width: 640px) { .b-buehne { padding: 12px 24px; } }
.b-host-wrap { width: min(1500px, 100%, calc(var(--buehne-h, 600px) * 0.729)); height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s; }
@media (min-width: 861px) { .b-host-wrap { width: min(1500px, 100%, calc(var(--buehne-h, 600px) * 1.459)); } }
.b-host-wrap.bereit { opacity: 1; }
.b-host { width: 100%; margin: 0 auto; filter: drop-shadow(0 24px 50px rgba(0,0,0,.75)); transition: transform .7s cubic-bezier(.4,0,.2,1); }
@media (min-width: 861px) {
  .b-host-wrap[data-state='closed'] .b-host { transform: translateX(-25%); }
  .b-host-wrap[data-state='end'] .b-host { transform: translateX(25%); }
}
.stf__wrapper.--portrait { overflow: hidden; }

/* ── Seite ── */
.b-seite { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size; background: var(--seiten-bild) center / cover no-repeat, var(--papier-grund); }
.b-seite.--left { background-image: var(--seiten-bild-links); box-shadow: inset -26px 0 44px -28px var(--falz); }
.b-seite.--right { box-shadow: inset 26px 0 44px -28px var(--falz); }
.b-seite::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--koernung); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"); }
.b-seite::after { content: ''; position: absolute; inset: 2.6cqw; pointer-events: none; z-index: 3; border: 1px solid var(--rahmen); }
.b-innen { position: relative; z-index: 2; height: 100%; padding: 5.4cqw 5.4cqw 6.4cqw; display: flex; flex-direction: column; overflow: hidden; }
.b-innen-voll { padding: 0; }
.b-folio { position: absolute; bottom: 2.4cqw; left: 0; right: 0; text-align: center; font-size: clamp(8px, 2cqw, 12px); letter-spacing: .3em; color: var(--dunkel); z-index: 4; }
.b-linie { width: 12cqw; height: 1px; margin: 2.4cqw auto 0; background: linear-gradient(90deg, transparent, var(--farbe), transparent); }

/* Cover */
.b-cover { position: absolute; inset: 0; }
.b-cover-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.b-cover-schleier { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.5), rgba(0,0,0,.8)); }
.b-cover-mitte { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 8cqw; }
.b-cover-rahmen { border: 1px solid color-mix(in srgb, var(--farbe) 55%, transparent); padding: 6cqw 5cqw; background: rgba(0,0,0,.35); width: 100%; }
.b-cover-logo { width: 34cqw; max-height: 22cqw; object-fit: contain; height: auto; margin: 0 auto 5cqw; display: block; }
.b-logo-buchstabe { display: grid; place-items: center; width: 22cqw; height: 22cqw; border-radius: 6cqw; margin: 0 auto 5cqw; background: linear-gradient(145deg, color-mix(in srgb, var(--farbe) 75%, white 0%), color-mix(in srgb, var(--farbe) 70%, black)); font-family: var(--schrift-titel); font-weight: 700; font-size: 11cqw; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10cqw 20cqw -6cqw color-mix(in srgb, var(--farbe) 70%, transparent); }
.b-cover-claim { font-family: var(--schrift-claim); font-size: clamp(18px, 5.4cqw, 34px); letter-spacing: .3em; color: var(--papier); margin-bottom: .4em; }
.b-cover-titel { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(30px, 9cqw, 58px); color: var(--papier); margin-top: 4cqw; }
.b-cover-sub { font-size: clamp(9px, 2.3cqw, 14px); letter-spacing: .32em; text-transform: uppercase; color: var(--grau); margin-top: 4cqw; line-height: 1.9; }

/* Kapitel */
.b-kapitel-bild { position: relative; width: 100%; height: 29%; min-height: 110px; margin-bottom: 4.5cqw; overflow: hidden; flex-shrink: 0; background: #0d0b0a; }
.b-kapitel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-kapitel-schleier { position: absolute; inset: 0; background: linear-gradient(to top, #0d0b0a, rgba(13,11,10,.25), transparent); }
.b-kapitel-titel { position: absolute; bottom: 2.5cqw; left: 0; right: 0; text-align: center; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(24px, 7.4cqw, 46px); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.95); }
.b-titel { text-align: center; margin-bottom: 5cqw; flex-shrink: 0; }
.b-titel h2 { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(24px, 7.4cqw, 46px); color: var(--papier); }
.b-kicker { font-size: clamp(9px, 2.3cqw, 14px); letter-spacing: .22em; text-transform: uppercase; color: var(--papier); opacity: .85; text-align: center; margin: -3cqw 0 3.6cqw; flex-shrink: 0; }
.b-spalten-kopf { display: flex; justify-content: flex-end; gap: 3cqw; border-bottom: 1px solid color-mix(in srgb, var(--farbe) 30%, transparent); padding-bottom: 1.5cqw; margin-bottom: 3cqw; flex-shrink: 0; }
.b-spalten-kopf span { font-size: clamp(8px, 2.1cqw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--dunkel); width: 8.5cqw; min-width: 30px; text-align: right; }

/* Gerichte */
.b-liste { list-style: none; display: flex; flex-direction: column; gap: 2.15cqw; flex-shrink: 0; }
.b-liste-eng { gap: 1.5cqw; }
.b-zeile { display: flex; align-items: baseline; gap: 3cqw; }
.b-zeile-text { min-width: 0; flex: 1; }
.b-gericht { font-weight: 600; font-size: clamp(12.5px, 3.45cqw, 22px); letter-spacing: .02em; color: var(--papier); line-height: 1.3; }
.b-desc { font-size: clamp(10.5px, 2.8cqw, 17px); line-height: 1.34; color: var(--grau); margin-top: .5cqw; }
.b-extras { font-size: clamp(10px, 2.7cqw, 16px); letter-spacing: .03em; line-height: 1.6; color: var(--papier); opacity: .9; margin-top: .8cqw; }
.b-preis { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(15px, 4cqw, 25px); color: var(--preis); flex-shrink: 0; }
.b-preise { display: flex; gap: 3cqw; flex-shrink: 0; }
.b-preis-sp { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(14px, 3.7cqw, 23px); color: var(--preis); width: 8.5cqw; min-width: 30px; text-align: right; }
.b-preis-sp i { font-style: normal; opacity: .25; }
.b-note { font-size: clamp(9px, 2.3cqw, 14px); line-height: 1.55; color: var(--dunkel); margin-top: auto; padding-top: 3cqw; flex-shrink: 0; }

/* Inhalt */
.b-toc-liste { list-style: none; display: flex; flex-direction: column; gap: 2.6cqw; margin-top: 2cqw; }
.b-toc { display: flex; align-items: baseline; gap: 2cqw; font-size: clamp(12px, 3.3cqw, 20px); color: var(--papier); opacity: .9; letter-spacing: .03em; }
.b-toc-punkte { flex: 1; border-bottom: 1px dotted var(--toc-linie); transform: translateY(-.35em); }
.b-toc-nr { color: var(--papier); }

/* Rückseite */
.b-rueck { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8cqw 6cqw; }
.b-rueck-logo { width: 28cqw; max-height: 18cqw; object-fit: contain; height: auto; margin-bottom: 5cqw; opacity: .9; display: block; }
.b-rueck .b-logo-buchstabe { width: 18cqw; height: 18cqw; font-size: 9cqw; }
.b-rueck-claim { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(20px, 5.6cqw, 34px); color: var(--papier); margin: 4cqw 0 5cqw; }
.b-rueck-block { margin-top: 5cqw; font-size: clamp(11px, 2.9cqw, 17px); line-height: 1.85; color: var(--grau); letter-spacing: .03em; }
.b-rueck-label { font-size: clamp(9px, 2.2cqw, 13px); letter-spacing: .3em; text-transform: uppercase; color: var(--papier); margin-bottom: 1.5cqw; }
.b-rueck-tel { color: var(--papier); font-size: clamp(14px, 3.7cqw, 22px); }
.b-leise { opacity: .5; }
.b-rueck-hinweis { margin-top: 5cqw; font-size: clamp(9px, 2.2cqw, 13px); color: var(--dunkel); }
.b-rueck-unten { margin-top: 8cqw; }

@container (max-width: 430px) {
  .b-innen { padding: 4.6cqw 4.6cqw 5.2cqw; }
  .b-liste { gap: 1.9cqw; }
  .b-note { padding-top: 2cqw; line-height: 1.45; }
  .b-titel { margin-bottom: 3.6cqw; }
}