/* ============================================================
   Wirtshaus Rheinblick, Neuwied — Demo-Stylesheet (Vandro)

   Leitidee dieser Fassung: Die Karte ist ein GEBUNDENES
   Dokument, kein Abschnittsstapel. Register und Kartenblatt
   sitzen in einem gemeinsamen Rahmen, getrennt durch den Falz
   (eine senkrechte Haarlinie). Die Reiter sind echte
   Registerreiter: der aktive schiebt sich ueber den Falz und
   verschmilzt mit dem Blatt, so wie der Reiter einer
   abgegriffenen Speisekarte, den man gerade aufgeschlagen hat.
   Jede Sektion bekommt einen gesetzten Zwischentitel mit
   haengender Ziffer und Doppellinie, jede Position eine
   laufende Nummer in der Marginalie. Das ist die Antwort auf
   den Einwand, die Sprungmarken fuehlten sich nicht wie eine
   Karte an.

   Kein Vollbild-Hero, keine Illustration, kein Schatten, kein
   Radius ueber 2px ausser am Statuspunkt. Der einzige Verlauf
   im ganzen Projekt ist die auslaufende Haarlinie unter einer
   Position.

   Drei Schriftrollen, streng getrennt:
     Gloock          Display: H1, Kartentitel, Sektionsziffern
                     und Sektionstitel, Telefonnummer
     Source Serif 4  Gerichte (roman) und Zutatenzeile (kursiv),
                     liefert die tabularen Ziffern der Preise
     Hanken Grotesk  Navigation, Buttons, Formular, Meta

   Schriftlizenzen: Gloock, Hanken Grotesk und Source Serif 4
   stehen unter der SIL Open Font License 1.1 (OFL). Die woff2
   in ../_fonts/ sind lokale Kopien, keine CDN-Einbindung.

   Farben: jeder Farbwert steht ausschliesslich in den beiden
   :root-Zeilen weiter unten. Ueberall sonst nur var(--token).
   Nachgerechnete Kontraste (hell):
     --tinte auf --papier ............ 14.6:1
     --tinte auf --papier-tief ....... 12.9:1
     --tinte-leise auf --papier ....... 6.8:1
     --tinte-leise auf --papier-tief .. 6.0:1
     --wein auf --papier .............. 9.1:1
     --wein auf --papier-tief ......... 8.0:1
     --auf-wein auf --wein ............ 9.5:1
     --auf-schiefer auf --schiefer ... 10.1:1
     --messing auf --papier ........... 3.4:1  -> nur Haarlinien
        und Rahmen, per Regel niemals Text, niemals Symbol
   Dunkel:
     --tinte auf --papier ............ 13.9:1
     --tinte auf --papier-tief ....... 12.2:1
     --tinte-leise auf --papier ....... 6.8:1
     --tinte-leise auf --papier-tief .. 6.0:1
     --wein auf --papier .............. 5.5:1
     --wein auf --papier-tief ......... 4.8:1
     --auf-wein auf --wein ............ 5.5:1
   ============================================================ */

@font-face {
  font-family: "Gloock";
  src: url("../_fonts/gloock-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../_fonts/hanken-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../_fonts/sourceserif4-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../_fonts/sourceserif4-italic-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* --- Token-Vertrag, heller Grundzustand (einzige Farbquelle) --- */
:root { color-scheme: light; --papier:#F2EDE3; --papier-tief:#E7DFD1; --tinte:#1E1B17; --tinte-leise:#55504A; --schiefer:#2E3A3C; --auf-schiefer:#F2EDE3; --wein:#6E2436; --auf-wein:#F7F1E8; --messing:#A8763E; --rahmen:#8F6231; }

/* --- Token-Vertrag, dunkel. Nicht mehr automatisch ueber die
       Systemeinstellung, sondern nur auf Wunsch im Farbtest. --- */
:root[data-theme="dark"] { color-scheme: dark; --papier:#14181A; --papier-tief:#1B2123; --tinte:#E9E2D5; --tinte-leise:#A79F94; --schiefer:#1B2123; --auf-schiefer:#E9E2D5; --wein:#C4788A; --auf-wein:#14181A; --messing:#C9975C; --rahmen:#D8A96C; }

:root {
  /* Formensprache dieser Demo: mittel. Das Kartenblatt bleibt
     scharf wie ein Druckbogen, Aufnahmen und Bedienteile bekommen
     eine leichte Rundung. */
  --r-weich: 8px;
  --r-fein: 5px;

  --display: "Gloock", "Iowan Old Style", Georgia, serif;
  --karte:   "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ui:      "Hanken Grotesk", "Segoe UI", Helvetica, sans-serif;

  --satz: 1240px;
  --rand: 5vw;
  --sektion: 5.5rem;
  --marginalie: 3.4rem;   /* haengende Ziffernspalte im Blatt   */
  --kopfhoehe: 148px;     /* wird von demo.js gemessen          */
  --haftstapel: 148px;    /* Kopfleiste + ggf. klebende Reiter   */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--haftstapel) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--papier);
  color: var(--tinte-leise);
  font-family: var(--karte);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { text-wrap: pretty; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wein);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 90;
  padding: 12px 20px; background: var(--tinte); color: var(--papier);
  font-family: var(--ui); font-size: .8125rem; letter-spacing: .08em;
  text-transform: uppercase;
  transition: top .18s ease;
}
.skip-link:focus-visible { top: 14px; }

.satzspiegel {
  width: 100%;
  max-width: var(--satz);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- Schriftrollen ------------------------------------ */
h1, h2, h3 { font-weight: 400; color: var(--tinte); }

h1 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.2vw, 3.25rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: none;
}
.zahl { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Demo-Leiste -------------------------------------- */
.demo-bar {
  background: var(--schiefer);
  color: var(--auf-schiefer);
  font-family: var(--ui);
  font-size: .78125rem;
  letter-spacing: .04em;
}
.demo-bar .wrap {
  max-width: var(--satz);
  margin-inline: auto;
  padding: 9px var(--rand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.demo-bar span { flex: 1 1 240px; }
.demo-bar a { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar .lang-toggle {
  margin-left: auto;
  border: 1px solid var(--messing);
  background: none;
  color: var(--auf-schiefer);
  padding: 4px 11px;
  letter-spacing: .1em;
  font-size: .75rem;
  font-weight: 600;
}
.demo-bar .lang-toggle:hover { background: var(--auf-schiefer); color: var(--schiefer); }

/* ---------- Kopfleiste: Marke, Navigation, Statuszeile -------- */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papier);
}
.kopf { border-bottom: 1px solid var(--messing); }
.kopf .satzspiegel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 32px;
  padding-block: 12px 11px;
  flex-wrap: wrap;
}
.marke {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1;
  color: var(--tinte);
  letter-spacing: -.015em;
}
.hauptnav { display: flex; gap: 26px; font-family: var(--ui); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hauptnav a { color: var(--tinte-leise); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.hauptnav a:hover { color: var(--tinte); border-bottom-color: var(--messing); }
.hauptnav a[aria-current="page"] { color: var(--wein); border-bottom-color: var(--wein); }

/* ---------- Statuszeile (Wirtshaus-Uhrzeiger) ----------------
   Sitzt seit dem 29.08. in der Kopfzeile selbst, als schmale zweite
   Zeile. Vorher war sie eine eigene Leiste: drei Balken uebereinander,
   bevor das erste Wort der Seite kam. */
.status {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--ui);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--tinte-leise);
}
.status-punkt {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--tinte-leise);
}
.status[data-offen="ja"] .status-punkt { background: var(--wein); }
.status-satz { flex: 1 1 60px; min-width: 0; font-variant-numeric: tabular-nums lining-nums; }
.status[data-offen="ja"] .status-satz { color: var(--tinte); }
/* Die Nummer ist ein Bedienteil, kein Fliesstext-Link. Als
   unterstrichene Zeile rechts sah sie aus, als waere sie
   versehentlich dort gelandet. */
.status-tel {
  margin-left: auto;
  flex: none;
  color: var(--tinte);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 12px;
  border: 1px solid var(--messing);
  border-radius: var(--r-fein);
  font-variant-numeric: tabular-nums lining-nums;
}
.status-tel:hover { background: var(--wein); border-color: var(--wein); color: var(--auf-wein); }

/* ---------- Hero, textfirst ---------------------------------- */
.hero { padding-block: clamp(2.25rem, 5.5vw, 4.5rem) clamp(2rem, 4vw, 3.25rem); }
.hero h1 { max-width: 15ch; }
.hero-unterzeile {
  margin-top: 1.25rem;
  font-family: var(--ui);
  font-size: .9375rem;
  letter-spacing: .01em;
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 46ch;
}
.hero-unterzeile b { color: var(--tinte); font-weight: 600; }

/* ============================================================
   DIE GEBUNDENE KARTE
   Register und Blatt in einem Rahmen, dazwischen der Falz.
   ============================================================ */
.karte-flaeche { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); }

.karte-raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px 32px;
  align-items: start;
}

/* Der Einband: umschliesst Register und Blatt als ein Objekt. */
.karte-koerper {
  grid-column: 1 / 10;
  grid-row: 1;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  border: 1px solid var(--messing);
  background: var(--papier-tief);
  position: relative;
}

/* Registerspalte: liegt eine Stufe heller als das Blatt, der
   Falz trennt beide. */
.register {
  background: var(--papier);
  border-right: 1px solid var(--messing);
  padding: clamp(1.1rem, 2vw, 1.6rem) 0 2rem clamp(1.1rem, 2vw, 1.6rem);
  position: relative;
  z-index: 2;
}
.register-halt { position: sticky; top: calc(var(--kopfhoehe) + 28px); }

/* Das Kartenblatt: eine Nuance tiefer, innen ein zweiter
   Rahmen wie bei einer gedruckten Karte. */
.blatt { padding: clamp(.55rem, 1.1vw, .85rem); }
.blatt-innen {
  border: 1px solid var(--messing);
  padding: clamp(1.4rem, 2.8vw, 2.6rem);
}

/* Kolumnentitel ganz oben auf dem Blatt */
.kolumnentitel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--messing);
}

/* Titelkopf der Karte, mittig gesetzt wie ein Kartendeckel */
.blatt-titel {
  text-align: center;
  padding-block: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.2rem);
}
.blatt-titel h1 {
  font-size: clamp(1.75rem, 5.6vw, 3.375rem);
  line-height: .94;
}
.blatt-titel .haus {
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 1.1rem;
}
.blatt-titel .unterzeile {
  font-style: italic;
  color: var(--tinte-leise);
  max-width: 48ch;
  margin: 1rem auto 0;
  font-size: 1rem;
}

/* Datumskopf, oben und unten von einer Haarlinie gefasst */
.datumskopf {
  border-top: 1px solid var(--messing);
  border-bottom: 1px solid var(--messing);
  padding-block: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  align-items: baseline;
  justify-content: space-between;
}
.datumskopf p { font-family: var(--ui); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte); }
.datumskopf .lage { text-transform: none; letter-spacing: .04em; color: var(--tinte-leise); font-style: italic; font-family: var(--karte); font-size: .95rem; }
.datumskopf .zahl { font-variant-numeric: tabular-nums lining-nums; }

/* Blattfuss */
.blattfuss {
  margin-top: 3.25rem;
  border-top: 1px solid var(--messing);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  font-family: var(--ui);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.blattfuss .zahl { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Registerreiter ----------------------------------- */
.reiter-kopf {
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-bottom: 12px;
  margin-bottom: 2px;
}
.reiter { display: flex; flex-direction: column; }

/* Jeder Reiter ist ein angeschnittenes Blatt: Rahmen oben,
   links und unten, rechts offen zum Falz hin. */
.reiter a {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  align-items: baseline;
  column-gap: 9px;
  padding: 12px 12px 12px 13px;
  margin-bottom: -1px;
  border: 1px solid var(--messing);
  border-right: 0;
  border-left-width: 2px;
  border-left-color: transparent;
  color: var(--tinte-leise);
  background: var(--papier);
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.3;
  position: relative;
  transition: transform .18s ease, color .18s ease, border-left-color .18s ease;
}
@media (prefers-reduced-motion: reduce) { .reiter a { transition: none; } }
.reiter a .nr {
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinte-leise);
}
.reiter a .anzahl {
  grid-column: 2;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-top: 4px;
}
.reiter a:hover { color: var(--tinte); border-left-color: var(--messing); }
.reiter a:hover .nr { color: var(--tinte); }

/* Der aufgeschlagene Reiter: schiebt sich ueber den Falz und
   nimmt die Farbe des Blattes an. Eine Bewegung, kein Glow. */
.reiter a[aria-current="true"] {
  color: var(--tinte);
  background: var(--papier-tief);
  border-left-color: var(--wein);
  transform: translateX(13px);
  z-index: 3;
}
.reiter a[aria-current="true"] .nr { color: var(--wein); }
.reiter a[data-jetzt="ja"] .nr { color: var(--wein); }

/* ---------- Zwischentitel der Sektionen ---------------------- */
.satz-block + .satz-block { margin-top: var(--sektion); }

.satz-kopf {
  display: grid;
  grid-template-columns: var(--marginalie) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: baseline;
  border-bottom: 1px solid var(--messing);
  padding-bottom: 10px;
  margin-bottom: 2.5rem;
  position: relative;
}
/* Doppellinie: die zweite Haarlinie sitzt 4px unter der ersten */
.satz-kopf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--messing);
}
.satz-ziffer {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.6vw, 2.05rem);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums lining-nums;
  grid-column: 1;
  grid-row: 1;
}
.satz-titel {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.7vw, 2.05rem);
  line-height: 1;
  letter-spacing: -.018em;
  color: var(--tinte);
  grid-column: 2;
  grid-row: 1;
  overflow-wrap: break-word;
}
.satz-lage {
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  text-align: right;
  grid-column: 2;
  grid-row: 2;
}
.satz-lage[data-jetzt="ja"] { color: var(--wein); }
.satz-vorwort {
  font-style: italic;
  color: var(--tinte-leise);
  max-width: 58ch;
  margin: 0 0 2rem var(--marginalie);
  font-size: 1rem;
}
.knopf-zeile { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.karte-spalte .knopf-zeile { margin-left: var(--marginalie); }

.anschrift-gross {
  font-style: normal;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  color: var(--tinte);
  letter-spacing: -.012em;
}

/* ---------- Positionen: Nummer, Name, Preisspalte ------------ */
.eintraege {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.75rem;
  counter-reset: pos;
}
.eintrag {
  display: grid;
  grid-template-columns: var(--marginalie) minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: .35rem;
  padding-bottom: 1.75rem;
  position: relative;
  counter-increment: pos;
}
/* Laufende Nummer in der Marginalie, wie im gesetzten Druck */
.eintrag::before {
  content: counter(pos, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinte-leise);
  padding-top: .45em;
}
/* Die eine erlaubte Verlaufsflaeche im Projekt */
.eintrag::after {
  content: "";
  position: absolute; left: var(--marginalie); right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--messing), transparent);
}
.eintraege > .eintrag:last-child { padding-bottom: 0; }
.eintraege > .eintrag:last-child::after { display: none; }
.eintrag h3 {
  grid-column: 2;
  font-family: var(--karte);
  font-size: 1.1875rem;
  font-weight: 600;
  font-variation-settings: "opsz" 20;
  line-height: 1.28;
  color: var(--tinte);
}
.eintrag .kennz {
  font-family: var(--ui);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  border-left: 1px solid var(--messing);
  padding-left: 9px;
  margin-left: 10px;
  white-space: nowrap;
  vertical-align: .12em;
}
.eintrag .preis {
  grid-column: 3;
  font-family: var(--karte);
  font-size: 1.1875rem;
  font-weight: 600;
  font-variation-settings: "opsz" 20;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinte);
  white-space: nowrap;
  align-self: start;
}
.eintrag .zutaten {
  grid-column: 2 / 4;
  font-style: italic;
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinte-leise);
  max-width: 62ch;
}
.eintrag.ohne-preis .zutaten { grid-column: 2 / 4; }

/* ---------- Randnotizen -------------------------------------- */
.rand-spalte {
  grid-column: 10 / 13;
  grid-row: 1;
  display: grid;
  gap: 2.5rem;
  align-self: start;
  position: sticky;
  top: calc(var(--kopfhoehe) + 28px);
}
.randnotiz {
  border-top: 1px solid var(--messing);
  padding-top: 14px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--tinte-leise);
}
.randnotiz h2 {
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: 8px;
}
.randnotiz p + p { margin-top: .75rem; }

/* ---------- Fliesstext-Abschnitte ---------------------------- */
.text-block { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--messing); }
.text-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px 32px; align-items: start; }
.text-raster > .titel { grid-column: 1 / 4; }
.text-raster > .fliess { grid-column: 4 / 10; display: grid; gap: 1.15rem; max-width: 66ch; }
.text-raster > .bilder { grid-column: 10 / 13; display: grid; gap: 16px; }
.text-raster .fliess p { font-size: 1.0625rem; }
.text-raster .fliess strong { color: var(--tinte); font-weight: 600; }
.text-raster > .titel .satz-titel { font-size: clamp(1.6rem, 2.7vw, 1.95rem); }
.text-raster .satz-vorwort { margin-left: 0; }
.text-raster > .titel .satz-vorwort { margin-top: 1rem; margin-bottom: 0; font-size: .95rem; }
.text-raster .knopf-zeile { margin-left: 0; }

figure.hochkant { display: grid; gap: 8px; }
figure.hochkant img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-weich);
  background: var(--papier-tief);
}

/* Breite Aufnahme im Satzspiegel, Video wie Bild behandelt. */
figure.band { display: grid; gap: 8px; margin: 0; }
figure.band img,
figure.band video {
  display: block;
  width: 100%;
  /* Ohne das gewinnt das height-Attribut aus dem HTML gegen
     aspect-ratio und das Video steht 720px hoch im Kopf. */
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--r-weich);
  background: var(--papier-tief);
}
figure.band figcaption {
  font-size: .8125rem;
  font-style: italic;
  color: var(--tinte-leise);
}
figure.hochkant.quer img { aspect-ratio: 3 / 2; }

/* Ein Hochformat laeuft nicht ueber den ganzen Satzspiegel,
   sonst schluckt es die halbe Seite. */
figure.band.band-hoch { max-width: 26rem; margin-inline: auto; }
figure.band.band-hoch img { aspect-ratio: 4 / 5; }
.bild-block { padding-block: clamp(2rem, 4vw, 3.5rem); }
figure.hochkant figcaption { font-size: .8125rem; font-style: italic; color: var(--tinte-leise); }

.textlink {
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wein);
  border-bottom: 1px solid var(--messing);
  padding-bottom: 2px;
  display: inline-block;
}
.textlink:hover { border-bottom-color: var(--wein); }

/* ---------- Buttons ------------------------------------------ */
.knopf {
  display: inline-block;
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 26px;
  background: var(--wein);
  color: var(--auf-wein);
  border: 1px solid var(--wein);
  border-radius: var(--r-fein);
}
.knopf:hover { background: var(--papier); color: var(--wein); }
.knopf[disabled] { background: var(--papier-tief); color: var(--tinte-leise); border-color: var(--messing); cursor: not-allowed; }
.knopf-leise { background: none; color: var(--tinte); border-color: var(--messing); }
.knopf-leise:hover { background: var(--papier-tief); color: var(--tinte); }

/* ---------- Reservierung ------------------------------------- */
.formular { display: grid; gap: 1.5rem; max-width: 34rem; }
.feld { display: grid; gap: 7px; }
.feld > label {
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte);
}
/* Der Rahmen ist die einzige Markierung des Eingabefeldes,
   also braucht er 3:1 nach WCAG 1.4.11. --messing haelt auf
   --papier-tief nur 2.98:1, --rahmen kommt auf 4.01:1.       */
.feld input, .feld select, .feld textarea {
  background: var(--papier-tief);
  border: 1px solid var(--rahmen);
  border-radius: var(--r-fein);
  padding: 12px 14px;
  font-family: var(--karte);
  font-size: 1rem;
  color: var(--tinte);
  width: 100%;
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--wein); outline-offset: 0; border-color: var(--wein); }
.feld textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.feld-notiz { font-size: .875rem; font-style: italic; color: var(--tinte-leise); }
.feld-notiz[hidden] { display: none; }

.wunsch { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.wunsch input { width: 18px; height: 18px; accent-color: var(--wein); }

.zusammenfassung {
  border-top: 1px solid var(--messing);
  border-bottom: 1px solid var(--messing);
  padding-block: 14px;
  font-size: 1.0625rem;
  color: var(--tinte);
  font-variant-numeric: tabular-nums lining-nums;
}
.form-hinweis {
  border-top: 1px solid var(--messing);
  padding-top: 16px;
  font-size: 1rem;
  color: var(--tinte-leise);
}
.form-hinweis[hidden] { display: none; }
.form-hinweis strong { color: var(--tinte); font-weight: 600; }
.form-hinweis p + p { margin-top: .75rem; }
.form-hinweis .knopf { margin-top: 14px; }

/* ---------- Zeittabelle (die einzige echte Tabelle) ---------- */
.zeiten { border-collapse: collapse; width: 100%; max-width: 30rem; }
.zeiten caption {
  text-align: left;
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte);
  padding-bottom: 12px;
}
.zeiten th, .zeiten td {
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--messing);
  font-weight: 400;
  font-size: 1rem;
}
.zeiten th { color: var(--tinte-leise); }
.zeiten td { color: var(--tinte); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.zeiten tr[data-heute="ja"] th, .zeiten tr[data-heute="ja"] td { color: var(--wein); }

/* ---------- Fusszeile ---------------------------------------- */
.fuss {
  background: var(--schiefer);
  color: var(--auf-schiefer);
  border-top: 1px solid var(--messing);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}
.fuss-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; }
.fuss-anschrift { grid-column: 1 / 5; }
.fuss-zeiten { grid-column: 5 / 9; }
.fuss-wege { grid-column: 9 / 13; }
.fuss h2 {
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--auf-schiefer);
  margin-bottom: 14px;
}
.fuss address, .fuss p { font-style: normal; color: var(--auf-schiefer); font-size: 1rem; line-height: 1.75; }
.fuss .zeit-liste { font-variant-numeric: tabular-nums lining-nums; }
/* Der Unterstrich ist die einzige Auszeichnung eines Links im
   Fuss. In --messing lag er bei 2.98:1 auf --schiefer, also
   unter 1.4.11; in der Textfarbe liegt er beim vollen
   Textkontrast und ist als Link ueberhaupt erkennbar.        */
.fuss a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--auf-schiefer);
  text-underline-offset: 3px;
}
.fuss a:hover { text-decoration-thickness: 2px; }
.fuss .rechts-hinweis { color: var(--auf-schiefer); }
.fuss .fuss-tel {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3.5vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  font-variant-numeric: tabular-nums lining-nums;
}
.fuss-linie {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--messing);
  padding-block: 16px;
}
.fuss-linie .satzspiegel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-family: var(--ui);
  font-size: .75rem;
  letter-spacing: .06em;
}

/* Alles unter dem Blatt haengt in derselben Spalte, aber jedes in
   einer eigenen Zeile. Feste grid-row waere falsch: sobald zwei
   Elemente nach-blatt tragen, legen sie sich uebereinander. */
.nach-blatt { grid-column: 1 / 10; margin-top: var(--sektion); }
.nach-blatt .satz-kopf, .satz-kopf.ohne-ziffer { grid-template-columns: minmax(0, 1fr); }
.nach-blatt .satz-titel, .nach-blatt .satz-lage,
.satz-kopf.ohne-ziffer .satz-titel, .satz-kopf.ohne-ziffer .satz-lage { grid-column: 1; }
.nach-blatt .satz-vorwort, .nach-blatt .knopf-zeile { margin-left: 0; }

/* ---------- Mobile Reiterleiste ------------------------------ */
.reiter-leiste { display: none; }

@media (max-width: 1100px) {
  .karte-raster { grid-template-columns: 1fr; }
  .karte-koerper { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .register { display: none; }

  /* Ausnahme Startseite. Dort gibt es keine klebende
     Reiterleiste, weil das Register nur zu EINEM Abschnitt der
     Seite gehoert und ein zweiter Klebestreifen ueber die ganze
     Startseite falsch waere. Ersatzloses Ausblenden hiess aber:
     auf dem Handy null Links in die Karte. Also legt sich das
     Register quer ueber den Kopf des Blattes, als angeschnittene
     Reiterreihe. Reiter bleiben Reiter: Rahmen oben, links und
     rechts, unten offen zum Blatt hin. */
  .register-quer { display: block; border-right: 0; padding: 0; }
  .register-quer .register-halt { position: static; }
  .register-quer .reiter-kopf { padding-bottom: 8px; margin-bottom: 0; }
  .register-quer .reiter {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .register-quer .reiter::-webkit-scrollbar { display: none; }
  .register-quer .reiter a {
    scroll-snap-align: start;
    white-space: nowrap;
    grid-template-columns: auto auto;
    column-gap: 7px;
    padding: 9px 15px 10px;
    margin-bottom: 0;
    margin-right: -1px;
    border: 1px solid var(--messing);
    border-bottom: 0;
    border-left-width: 1px;
    border-left-color: var(--messing);
    border-top-width: 2px;
    border-top-color: transparent;
    transform: none;
  }
  .register-quer .reiter a .nr { font-size: .9375rem; }
  .register-quer .reiter a .anzahl { display: none; }
  .register-quer .reiter a:hover { border-top-color: var(--wein); border-left-color: var(--messing); }
  .nach-blatt { grid-column: 1 / -1; }
  .rand-spalte { grid-column: 1 / -1; grid-row: auto; position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem 32px; margin-top: 2.5rem; }

  /* Register klappt in eine Reiterleiste unter dem Kopf um.
     Die Reiter bleiben Reiter: Rahmen oben, links, rechts,
     unten offen zum Blatt hin. */
  .reiter-leiste {
    display: block;
    position: sticky;
    top: var(--kopfhoehe);
    z-index: 38;
    background: var(--papier);
    border-bottom: 1px solid var(--messing);
    transition: transform .18s ease-out, opacity .18s ease-out;
  }
  /* Karte durchgescrollt: die Leiste raeumt den Kopf. */
  .reiter-leiste[data-weg="ja"] {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .reiter-leiste { transition: none; }
  }
  .reiter-leiste .spur {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 10px;
  }
  .reiter-leiste .spur::-webkit-scrollbar { display: none; }
  .reiter-leiste a {
    scroll-snap-align: center;
    white-space: nowrap;
    font-family: var(--ui);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--tinte-leise);
    border: 1px solid var(--messing);
    border-bottom: 0;
    border-top-width: 2px;
    border-top-color: transparent;
    margin-right: -1px;
    padding: 9px 15px 10px;
    background: var(--papier);
  }
  .reiter-leiste a .nr { font-variant-numeric: tabular-nums lining-nums; }
  .reiter-leiste a[aria-current="true"] {
    color: var(--tinte);
    background: var(--papier-tief);
    border-top-color: var(--wein);
  }

  .text-raster > .titel  { grid-column: 1 / 5; }
  .text-raster > .fliess { grid-column: 5 / 13; }
  .text-raster > .bilder { grid-column: 1 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-anschrift { grid-column: 1 / 7; }
  .fuss-zeiten { grid-column: 7 / 13; }
  .fuss-wege { grid-column: 1 / 13; }
}

@media (max-width: 760px) {
  :root { --marginalie: 2.4rem; --sektion: 4rem; }
  .kopf .satzspiegel { padding-block: 10px 9px; gap: 4px 24px; }
  .hauptnav { gap: 18px; width: 100%; }
  .status { font-size: .74rem; gap: 8px 12px; }
  /* Punkt und Satz teilen sich die erste Zeile, die Nummer
     bekommt die zweite. Vorher stand der Punkt allein da. */
  .status-satz { flex: 1 1 180px; }
  .status-tel { margin-left: 0; }
  .blatt { padding: 6px; }
  .blatt-innen { padding: 1.1rem; }
  .satz-kopf { grid-template-columns: var(--marginalie) minmax(0, 1fr); column-gap: 10px; }
  .satz-lage { grid-column: 2; text-align: left; margin-top: 6px; }
  .text-raster > .titel, .text-raster > .fliess, .text-raster > .bilder { grid-column: 1 / -1; }
  .rand-spalte { grid-template-columns: 1fr; }
  .fuss-anschrift, .fuss-zeiten, .fuss-wege { grid-column: 1 / -1; }
  .eintrag { column-gap: 10px; }
  .eintrag .kennz { display: inline-block; border-left: 0; padding-left: 0; margin-left: 0; margin-top: 6px; vertical-align: baseline; }
  .blatt-titel h1 { font-size: clamp(1.6rem, 6.4vw, 2.05rem); }
}

@media (max-width: 460px) {
  .eintrag .preis { font-size: 1.0625rem; }
}


/* Auf schmalen Geraeten nur die Kurzfassung, sonst frisst der
   Vorschau-Hinweis vier Zeilen ueber dem eigentlichen Kopf. */
.demo-kurz { display: none; }
@media (max-width: 640px) {
  .demo-lang { display: none; }
  .demo-kurz { display: inline; }
}
@media (max-width: 640px) {
  .demo-bar { font-size: .72rem; }
  .demo-bar .wrap { gap: 3px 14px; padding-block: 6px; }
  .demo-bar span { flex: 0 1 auto; }
  .demo-bar .lang-toggle { margin-left: auto; padding: 2px 8px; }
}

/* ---------- Formularpruefung -------------------------------- */
.feld-fehler {
  display: block;
  margin-top: 6px;
  font-family: var(--ui);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--wein);
}
.feld-fehler[hidden] { display: none; }
[aria-invalid="true"] {
  border-color: var(--wein) !important;
  background: color-mix(in oklab, var(--wein) 6%, var(--papier));
}
.fehler-sammel {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--wein);
  border-radius: var(--r-fein);
  background: color-mix(in oklab, var(--wein) 7%, var(--papier));
}
.fehler-sammel[hidden] { display: none; }
.fehler-sammel p { font-family: var(--ui); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte); }
.fehler-sammel ul { margin: 9px 0 0; padding-left: 1.1rem; font-size: .9375rem; }
.fehler-sammel li + li { margin-top: 5px; }
.fehler-sammel a { color: var(--wein); }

/* ---------- Filmkopf ----------------------------------------
   Die Kueche laeuft hinter der Ueberschrift, nicht als zweiter
   Block darunter. Der Schleier ist eine glatte Flaeche, kein
   Verlauf; darunter bleibt der Kontrast rechnerisch bei 9:1. */
.hero-film {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--schiefer);
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--schiefer) 78%, transparent);
}
.hero-film h1 { color: var(--auf-schiefer); max-width: 17ch; }
.hero-film .hero-unterzeile { color: color-mix(in oklab, var(--auf-schiefer) 84%, transparent); }
.hero-film .hero-unterzeile b { color: var(--auf-schiefer); }
.hero-knoepfe { margin-top: 1.75rem; }
.hero-film .knopf-leise {
  color: var(--auf-schiefer);
  border-color: color-mix(in oklab, var(--auf-schiefer) 55%, transparent);
}
.hero-film .knopf-leise:hover { background: var(--auf-schiefer); color: var(--schiefer); }


/* ---------- Zurueck nach oben ------------------------------- */
/* Feine Rundung, wie die uebrigen Bedienteile dieser Karte. */
.nach-oben {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 900;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rahmen);
  border-radius: var(--r-fein);
  background: var(--papier);
  color: var(--tinte-leise);
  cursor: pointer;
}
.nach-oben[hidden] { display: none; }
.nach-oben:hover { background: var(--papier-tief); color: var(--tinte); }
.nach-oben:focus-visible { outline: 2px solid var(--messing); outline-offset: 2px; }
.nach-oben span {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ---------- Karte und Weitersagen ---------------------------
   Beides ohne fremdes Skript: der Lageplan kommt erst auf Klick,
   die Verweise sind gewoehnliche Links. */
.karte-feld {
  margin-top: 1.75rem;
  border: 1px solid var(--messing);
  border-radius: var(--r-weich);
  background: var(--papier-tief);
  padding: 1.25rem;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.karte-feld[data-geladen] { padding: 0; overflow: hidden; }
.karte-knopf {
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 22px;
  background: none;
  color: var(--tinte);
  border: 1px solid var(--messing);
  border-radius: var(--r-fein);
  cursor: pointer;
}
.karte-knopf:hover { background: var(--papier); }
.karte-notiz {
  font-family: var(--ui);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 42ch;
}
.karte-rahmen { display: block; width: 100%; height: clamp(260px, 45vw, 380px); border: 0; }

.teilen {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--messing);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
}
.teilen-titel {
  font-family: var(--ui);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.teilen-liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--ui);
  font-size: .875rem;
}
.teilen-liste a, .teilen-kopie {
  color: var(--tinte);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--messing);
  padding: 0 0 2px;
  font: inherit;
  cursor: pointer;
}
.teilen-liste a:hover, .teilen-kopie:hover { color: var(--wein); border-bottom-color: var(--wein); }

/* Ein Bild direkt unter einer Ueberschrift braucht Luft, sonst
   klebt die Zeile auf der Kante. */
h1 + figure, h1 + .bild,
h2 + figure, h2 + .bild,
h3 + figure, h3 + .bild { margin-top: 1.75rem; }

/* Am Telefon nahm der Kopf ein gutes Drittel des Bildschirms ein:
   Name, Navigation, Statuszeile und Telefonknopf klebten alle mit.
   Sobald man wirklich liest, faellt die Statuszeile weg, Name und
   Navigation bleiben. Die Nummer steht weiter im Fuss und auf der
   Reservierungsseite. */
@media (max-width: 700px) {
  .kopfleiste[data-eng="ja"] .status { display: none; }
}

/* ---------- Bild gross ---------------------------------------
   Seit dem 29.08.: Fotos lassen sich antippen. Die Lupe ist die
   einzige gemeinsame Mechanik der drei Demos, das Aussehen
   gehoert trotzdem jeder Demo selbst. */
figure img[role="button"] { cursor: zoom-in; }
.bild-schau {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  padding: 14px;
  border: 1px solid var(--messing);
  border-radius: var(--r-weich);
  background: var(--papier);
  color: var(--tinte);
}
.bild-schau::backdrop { background: color-mix(in oklab, var(--tinte) 82%, transparent); }
.bild-schau img {
  display: block;
  width: 100%;
  max-height: 78vh;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-weich);
}
.bild-schau-text {
  margin: 14px 0 0;
  font-family: var(--ui);
  font-size: .875rem;
  color: var(--tinte-leise);
}
.bild-schau-zu { position: absolute; top: 14px; right: 14px; margin: 0; }
.bild-schau-zu button {
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--messing);
  border-radius: var(--r-weich);
  background: var(--papier);
  color: var(--tinte);
}

/* ---------- Register am Telefon ------------------------------
   Zwei Stellen, zwei Antworten. Im Blattkopf steht das Register
   als vollstaendige Liste in zwei Spalten, alle sieben Abschnitte
   auf einen Blick statt zweieinhalb hinter einem Wischen. Die
   klebende Leiste zeigt nur, wo man ist, und klappt auf Tippen
   dieselbe Liste auf. */
.register-schalter { display: none; }

@media (max-width: 1100px) {
  .register-quer .reiter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: visible;
  }
  .register-quer .reiter a {
    scroll-snap-align: none;
    white-space: normal;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 8px;
    padding: 10px 12px;
    margin: 0 -1px -1px 0;
    border: 1px solid color-mix(in oklab, var(--messing) 55%, transparent);
    border-top-width: 1px;
    border-top-color: color-mix(in oklab, var(--messing) 55%, transparent);
  }
  .register-quer .reiter a[aria-current] {
    background: color-mix(in oklab, var(--wein) 8%, transparent);
    border-top-color: var(--wein);
    border-top-width: 2px;
    padding-top: 9px;
  }

  .reiter-leiste .satzspiegel { position: relative; }
  .register-schalter {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: 10px;
    padding: 11px 2px 10px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--ui);
    font-size: .875rem;
    color: var(--tinte);
    text-align: left;
  }
  .register-schalter .rs-vor {
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinte-leise);
  }
  .register-schalter .rs-jetzt { flex: 1; }
  .register-schalter .rs-pfeil {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--wein);
    border-bottom: 1.5px solid var(--wein);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .16s ease-out;
  }
  .reiter-leiste[data-offen="ja"] .rs-pfeil { transform: rotate(225deg) translate(-3px, -3px); }

  /* Aufgeklappt haengt die Liste unter der Zeile, nicht im Fluss:
     sonst schoebe sie beim Oeffnen die halbe Karte nach unten. */
  .reiter-leiste[data-offen="nein"] .spur { display: none; }
  .reiter-leiste[data-offen="ja"] .spur {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 39;
    display: grid;
    grid-template-columns: 1fr;
    max-height: 62vh;
    overflow-y: auto;
    background: var(--papier);
    border-bottom: 1px solid var(--messing);
    box-shadow: 0 14px 28px -18px color-mix(in oklab, var(--tinte) 60%, transparent);
  }
  .reiter-leiste[data-offen="ja"] .spur a {
    padding: 13px 2px;
    border: 0;
    border-top: 1px solid color-mix(in oklab, var(--messing) 40%, transparent);
    margin: 0;
    white-space: normal;
    transform: none;
  }
  .reiter-leiste[data-offen="ja"] .spur a[aria-current] { color: var(--wein); }
}

/* ---------- Menue als Seitenleiste, seit dem 29.08. ----------
   Am Telefon lief die Hauptnavigation als lose Zeile aus und war
   je nach Seitenname zu breit. Sie faehrt jetzt als Leiste von
   rechts ein, der Knopf sitzt im Kopf. Am Schreibtisch bleibt
   alles wie es war, dort ist Platz fuer die Zeile. */
.menue-knopf, .menue-zu { display: none; }
.menue-schleier { display: none; }

@media (max-width: 700px) {
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border: 1px solid var(--messing);
    border-radius: var(--r-weich);
    background: none;
    color: var(--tinte);
    font-family: var(--ui);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menue-knopf .mk-striche { display: grid; gap: 3px; width: 16px; }
  .menue-knopf .mk-striche i { display: block; height: 1.5px; background: var(--wein); }

  .menue-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in oklab, var(--tinte) 62%, transparent);
  }
  .menue-schleier[hidden] { display: none; }

  .hauptnav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(78vw, 320px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 64px 18px 18px;
    background: var(--papier);
    border-left: 1px solid var(--messing);
    overflow-y: auto;
    transform: translateX(101%);
    transition: transform .2s ease-out;
  }
  [data-menue="ja"] .hauptnav { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .hauptnav { transition: none; }
  }
  .hauptnav a {
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--messing) 45%, transparent);
    font-size: 1.0625rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: var(--tinte);
  }
  .hauptnav a[aria-current] { color: var(--wein); }
  .menue-zu {
    display: block;
    position: absolute;
    top: 14px;
    right: 18px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--messing);
    border-radius: var(--r-weich);
    background: none;
    color: var(--tinte);
  }
}