/* ==========================================================================
   Q5 — Restaurant · Pizzeria, Überlingen
   Gemeinsames Stylesheet für index.html und speisekarte.html

   Leitidee: "Der Aufstieg ins Licht". Helligkeit ist eine Funktion der Etage.
   Das Erdgeschoss ist am dunkelsten, die Dachterrasse bricht ins Licht auf.
   Alle Farbwerte sind in OKLCH und gegen WCAG geprüft (siehe DESIGN.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Etagen — die Helligkeitsrampe des Hauses.
     Chroma zeigt minimal Richtung Basilikum (Hue 150), niemals ins Warme.
     Ein warm getönter Grundton wäre der Creme-Reflex, den DESIGN.md verbietet. */
  --eg:               oklch(0.14 0.006 150);   /* Erdgeschoss, Hero, Kontakt, Footer */
  --og1:              oklch(0.18 0.006 150);   /* Die Küche */
  --og2:              oklch(0.22 0.007 150);   /* Mittags */
  --og3:              oklch(0.26 0.008 150);   /* Feiern */
  --og4:              oklch(0.30 0.009 150);   /* Gastgeber */
  --limestone:        oklch(0.95 0.004 150);   /* 5. OG — die Türen gehen auf */
  --limestone-tief:   oklch(0.90 0.005 150);

  /* Text */
  --kalk:             oklch(0.96 0.003 150);   /* Fließtext auf dunkel — ab 12.1:1 */
  --ink:              oklch(0.20 0.008 150);   /* Fließtext auf hell — 15.6:1 */
  --muted-dunkel:     oklch(0.68 0.010 150);   /* Sekundär auf dunkel — ab 4.7:1 */
  --muted-hell:       oklch(0.46 0.010 150);   /* Sekundär auf hell — 6.1:1 */

  /* Marke */
  --basilikum:        oklch(0.50 0.130 150);   /* CTA-Fläche (weißer Text 5.7:1)
                                                  UND Textfarbe auf Limestone (4.9:1) */
  --basilikum-hell:   oklch(0.72 0.130 150);   /* Links auf dunkel — ab 5.8:1 */
  --golden:           oklch(0.764 0.120 77.1); /* Golden Hour. NUR im 5. OG.
                                                  Trägt niemals weißen Text (2.2:1),
                                                  nur Ink (8.4:1) oder Displaytext auf dunkel. */

  /* Linien — die Architektursprache. Immer 1px. */
  --linie-dunkel:     oklch(0.96 0.003 150 / 0.16);
  --linie-dunkel-satt:oklch(0.96 0.003 150 / 0.32);
  --linie-hell:       oklch(0.20 0.008 150 / 0.18);
  --linie-hell-satt:  oklch(0.20 0.008 150 / 0.38);

  /* Schrift */
  --schrift-display: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --schrift-text:    'Alegreya Sans', 'Alegreya Sans Fallback', 'Segoe UI', system-ui, sans-serif;

  /* Typoskala — fluid für Display, fix für Fließtext (typeset.md) */
  --t-display:  clamp(2.5rem, 6.5vw, 5.5rem);      /* max 88px, unter der 6rem-Decke */
  --t-h2:       clamp(1.875rem, 4vw, 3rem);
  --t-h3:       clamp(1.25rem, 1.8vw, 1.625rem);
  --t-lead:     clamp(1.125rem, 1.4vw, 1.3125rem);
  --t-body:     1.0625rem;                          /* 17px */
  --t-klein:    0.9375rem;
  --t-label:    0.75rem;

  /* Raum — 4pt-Basis */
  --r-3xs: 0.25rem;  --r-2xs: 0.5rem;   --r-xs: 0.75rem;
  --r-sm:  1rem;     --r-md:  1.5rem;   --r-lg: 2rem;
  --r-xl:  3rem;     --r-2xl: 4rem;     --r-3xl: 6rem;
  --r-sektion: clamp(4.5rem, 10vw, 9rem);
  --breite:    75rem;
  --breite-text: 68ch;
  /* Eine Quelle für die Header-Höhe: die Kapitelleiste klebt darunter und
     scroll-padding rechnet damit. Zwei Zahlen wären zwei Wahrheiten. */
  --header-hoehe: 4.25rem;

  /* Bewegung */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Ebenen — semantisch, keine 9999er */
  --z-parallax: 0;
  --z-inhalt: 1;
  --z-etagen: 20;
  --z-header: 30;
  --z-menue: 40;
}

/* Metrisch angepasste Fallbacks: verhindern den Sprung beim Font-Swap. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Alegreya Sans Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 92%;
  ascent-override: 105%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Der fixierte Header darf Ankerziele nicht verdecken. */
  scroll-padding-top: calc(var(--header-hoehe) + 1.25rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--eg);
  color: var(--kalk);
  font-family: var(--schrift-text);
  font-size: var(--t-body);
  line-height: 1.65;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  /* Kein horizontales Scrollen — der Parallax darf nie die Seite verbreitern. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;   /* über der -0.04em-Grenze */
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* Zahlen sind in diesem Haus Architektur: Etagen, Preise, Telefonnummern.
   Tabellenziffern verhindern das Springen der Etagenanzeige. */
.zahl, .etagen__ziffer, .preis, .oeffnungszeiten td {
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--basilikum); color: #fff; }

:focus-visible {
  outline: 2px solid var(--basilikum-hell);
  outline-offset: 3px;
  border-radius: 2px;
}

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--r-sm);
  z-index: var(--z-menue);
  background: var(--basilikum); color: #fff;
  padding: var(--r-xs) var(--r-sm);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--r-sm); }

.inhalt {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .inhalt { width: min(100% - 5rem, var(--breite)); }
}

/* --------------------------------------------------------------------------
   3. Etagen — jede Sektion trägt ihre Helligkeit
   -------------------------------------------------------------------------- */

.etage {
  position: relative;
  padding-block: var(--r-sektion);
  /* Der Tonwechsel ist die Trennung. Keine Box, kein Schatten (Grundriss-Regel). */
  transition: background-color 600ms linear;
}

.etage--eg   { background: var(--eg); }
.etage--og1  { background: var(--og1); }
.etage--og2  { background: var(--og2); }
.etage--og3  { background: var(--og3); }
.etage--og4  { background: var(--og4); }

/* 5. OG — die Türen gehen auf. Der einzige helle Bruch der Seite. */
.etage--og5 {
  background: var(--limestone);
  color: var(--ink);
}
.etage--og5 .lead,
.etage--og5 .muted { color: var(--muted-hell); }

/* Die Grundrisslinie zwischen den Etagen. */
.etage + .etage::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0;
  height: 1px;
  background: var(--linie-dunkel);
}
.etage--og5::before,
.etage--og5 + .etage::before { background: var(--linie-hell); }

/* --------------------------------------------------------------------------
   4. Typografie-Rollen
   -------------------------------------------------------------------------- */

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--muted-dunkel);
  max-width: 52ch;
}

.fliesstext {
  max-width: var(--breite-text);
  line-height: 1.7;    /* heller Text auf dunkel braucht mehr Luft (typeset.md) */
  letter-spacing: 0.01em;
}

.muted { color: var(--muted-dunkel); }

.sektion-kopf { margin-bottom: var(--r-xl); }
.sektion-kopf h2 { font-size: var(--t-h2); max-width: 20ch; }
.sektion-kopf .lead { margin-top: var(--r-sm); }

/* Der Platzhalter-Hinweis. Sichtbar, nie schamhaft: ein Gast, der wegen
   einer erfundenen Angabe kommt, ist schlimmer als eine Lücke. */
.platzhalter {
  display: inline-flex; align-items: center; gap: var(--r-2xs);
  font-family: var(--schrift-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dunkel);
  border: 1px dashed var(--linie-dunkel-satt);
  padding: var(--r-3xs) var(--r-2xs);
  border-radius: 2px;
}
.etage--og5 .platzhalter { color: var(--muted-hell); border-color: var(--linie-hell-satt); }
.platzhalter::before { content: '◇'; font-size: 0.9em; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--r-2xs);
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;   /* fast rechtwinklig — Architektur, keine App von 2014 */
  min-height: 44px;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out-quart),
              border-color 180ms var(--ease-out-quart),
              color 180ms var(--ease-out-quart),
              transform 180ms var(--ease-out-quart);
}

.btn--primaer {
  background: var(--basilikum);
  color: #fff;              /* 5.7:1 — geprüft */
  border-color: var(--basilikum);
}
.btn--primaer:hover { background: oklch(0.56 0.13 150); border-color: oklch(0.56 0.13 150); }
.btn--primaer:active { transform: translateY(1px); }

.btn--geist {
  background: transparent;
  color: var(--kalk);
  border-color: var(--linie-dunkel-satt);
}
.btn--geist:hover { border-color: var(--kalk); background: oklch(0.96 0.003 150 / 0.06); }
.etage--og5 .btn--geist { color: var(--ink); border-color: var(--linie-hell-satt); }
.etage--og5 .btn--geist:hover { border-color: var(--ink); background: oklch(0.20 0.008 150 / 0.05); }

.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--r-xs); }

/* Textlink mit Pfeil — die zweite CTA-Stufe. */
.link-pfeil {
  display: inline-flex; align-items: center; gap: var(--r-2xs);
  min-height: 44px;              /* Trefferfläche, nicht nur Textzeile */
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: var(--t-klein);
  color: var(--basilikum-hell);
  text-decoration: none;
  padding-block: var(--r-2xs);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease-out-quart);
}
.link-pfeil:hover { border-bottom-color: currentColor; }
.link-pfeil::after {
  content: '→';
  transition: transform 220ms var(--ease-out-quart);
}
.link-pfeil:hover::after { transform: translateX(3px); }
.etage--og5 .link-pfeil { color: var(--basilikum); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed; inset-inline: 0; top: 0;
  z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-sm);
  padding: var(--r-xs) clamp(1.25rem, 4vw, 2.5rem);
  background: oklch(0.14 0.006 150 / 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms var(--ease-out-quart),
              border-color 300ms var(--ease-out-quart);
}
/* Ab dem ersten Scroll bekommt der Header seine Kante. */
.header[data-gescrollt='true'] {
  background: oklch(0.14 0.006 150 / 0.9);
  border-bottom-color: var(--linie-dunkel);
}
@supports not (backdrop-filter: blur(1px)) {
  .header { background: oklch(0.14 0.006 150 / 0.96); }
}

.header__marke {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--kalk);
  /* baseline hält "Q5" und den Zusatz auf einer Schriftlinie — deshalb hier
     kein align-items: center. Die Trefferfläche kommt über padding. */
  display: flex; align-items: baseline; gap: var(--r-2xs);
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}
.header__marke .marke__sub {
  font-family: var(--schrift-text);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dunkel);
}
@media (max-width: 30rem) { .header__marke .marke__sub { display: none; } }

.nav { display: flex; align-items: center; gap: var(--r-md); }
.nav__liste {
  display: flex; align-items: center; gap: var(--r-md);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 500;
  text-decoration: none;
  color: var(--muted-dunkel);
  padding-block: var(--r-2xs);
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-out-quart), border-color 180ms var(--ease-out-quart);
}
.nav__link:hover { color: var(--kalk); }
.nav__link[aria-current='page'],
.nav__link[data-aktiv='true'] { color: var(--kalk); border-bottom-color: var(--basilikum-hell); }
.nav__link--karte { color: var(--kalk); }

.header__tel {
  display: inline-flex; align-items: center; gap: var(--r-2xs);
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 600;
  text-decoration: none;
  color: var(--kalk);
  border: 1px solid var(--linie-dunkel-satt);
  border-radius: 2px;
  padding: 0.5rem 0.875rem;
  min-height: 44px;
  transition: border-color 180ms var(--ease-out-quart), background-color 180ms var(--ease-out-quart);
}
.header__tel:hover { border-color: var(--kalk); background: oklch(0.96 0.003 150 / 0.06); }

/* Mobiles Menü */
.menue-schalter {
  display: none;
  background: none; border: 1px solid var(--linie-dunkel-satt); border-radius: 2px;
  color: var(--kalk);
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.menue-schalter__balken,
.menue-schalter__balken::before,
.menue-schalter__balken::after {
  content: ''; display: block;
  width: 18px; height: 1.5px; background: currentColor;
  transition: transform 260ms var(--ease-out-quart), opacity 160ms linear;
}
.menue-schalter__balken::before { transform: translateY(-5px); }
.menue-schalter__balken::after  { transform: translateY(3.5px); }
.menue-schalter[aria-expanded='true'] .menue-schalter__balken { background: transparent; }
.menue-schalter[aria-expanded='true'] .menue-schalter__balken::before { transform: rotate(45deg); }
.menue-schalter[aria-expanded='true'] .menue-schalter__balken::after  { transform: rotate(-45deg) translateY(0); }

@media (max-width: 60rem) {
  .menue-schalter { display: inline-flex; }
  .header__tel .tel__text { display: none; }
  .header__tel { padding: 0.5rem; width: 44px; justify-content: center; }

  .nav {
    position: fixed; inset: 0 0 auto 0;
    z-index: var(--z-menue);
    flex-direction: column; align-items: stretch;
    gap: 0;
    padding: 5rem var(--r-md) var(--r-lg);
    background: var(--eg);
    border-bottom: 1px solid var(--linie-dunkel);
    /* clip-path statt height: keine Layout-Animation */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 380ms var(--ease-out-expo), visibility 0s linear 380ms;
  }
  .nav[data-offen='true'] {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 420ms var(--ease-out-expo), visibility 0s linear 0s;
  }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    font-size: 1.25rem;
    padding: var(--r-sm) 0;
    border-bottom: 1px solid var(--linie-dunkel);
  }
  .nav__link[aria-current='page'],
  .nav__link[data-aktiv='true'] { border-bottom-color: var(--basilikum-hell); }
}

/* --------------------------------------------------------------------------
   7. Etagenanzeige — die Signature-Komponente
   -------------------------------------------------------------------------- */

.etagen {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-etagen);
  display: flex; flex-direction: column;
  gap: 1px;
  padding: var(--r-2xs) var(--r-3xs);
  /* Deckkraft hoch genug, dass die Ziffern auch über dem Panorama lesbar
     bleiben. Bei 0.6 verschwanden sie im Golden-Hour-Verlauf. Die Anzeige
     muss über JEDEM Untergrund funktionieren, sie ist Navigation. */
  background: oklch(0.14 0.006 150 / 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linie-dunkel);
  border-radius: 3px;
  /* Der einzige erlaubte Schatten neben dem Panorama: die Anzeige schwebt
     über dem Inhalt, statt in ihm zu kleben. */
  box-shadow: 0 8px 32px oklch(0.14 0.006 150 / 0.5);
  list-style: none; margin: 0;
  transition: background-color 400ms linear, border-color 400ms linear;
}

/* Über der hellen Dachterrasse dreht die Anzeige ihre Polarität. */
.etagen[data-hell='true'] {
  background: oklch(0.95 0.004 150 / 0.9);
  border-color: var(--linie-hell);
  box-shadow: 0 8px 32px oklch(0.20 0.008 150 / 0.14);
}

.etagen__eintrag { display: block; }

.etagen__ziffer {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 30px;
  font-family: var(--schrift-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-dunkel);
  text-decoration: none;
  border-radius: 2px;
  position: relative;
  transition: color 260ms var(--ease-out-quart), background-color 260ms var(--ease-out-quart);
}
.etagen[data-hell='true'] .etagen__ziffer { color: var(--muted-hell); }

/* Trefferfläche auf 44px, ohne die Anzeige optisch aufzublähen. */
.etagen__ziffer::before {
  content: ''; position: absolute; inset: -7px -5px;
}

.etagen__ziffer:hover { color: var(--kalk); }
.etagen[data-hell='true'] .etagen__ziffer:hover { color: var(--ink); }

.etagen__ziffer[aria-current='true'] {
  color: var(--eg);
  background: var(--basilikum-hell);
}
.etagen[data-hell='true'] .etagen__ziffer[aria-current='true'] {
  color: #fff;
  background: var(--basilikum);
}
/* Im 5. OG leuchtet die Anzeige golden: das Signal, dass man oben ist.
   Beide Selektoren sind nötig — die data-hell-Regel oben ist spezifischer
   als eine einfache [data-etage='5']-Regel und würde das Gold sonst
   ausgerechnet auf der Dachterrasse mit Grün überschreiben. */
.etagen .etagen__ziffer[aria-current='true'][data-etage='5'],
.etagen[data-hell='true'] .etagen__ziffer[aria-current='true'][data-etage='5'] {
  color: var(--ink);
  background: var(--golden);
}

.etagen__strich {
  width: 12px; height: 1px;
  background: var(--linie-dunkel-satt);
  margin: 2px auto;
}
.etagen[data-hell='true'] .etagen__strich { background: var(--linie-hell-satt); }

/* Mobil: auf eine einzelne Ziffer reduziert, unten rechts, außerhalb des
   Lesepfads. Der Indicator darf niemals Inhalt überlagern. */
@media (max-width: 60rem) {
  .etagen {
    top: auto; bottom: max(var(--r-sm), env(safe-area-inset-bottom));
    right: var(--r-sm);
    transform: none;
    flex-direction: row;
    gap: 0;
    padding: 0;
  }
  .etagen__eintrag:not([data-aktuell='true']) { display: none; }
  .etagen__strich { display: none; }
  .etagen__ziffer {
    width: 44px; height: 44px;   /* volle Trefferfläche ohne Pseudo-Krücke */
    font-size: 0.8125rem;
    border-radius: 2px;
  }
}

/* --------------------------------------------------------------------------
   8. Bilder & Platzhalter
   -------------------------------------------------------------------------- */

/* Solange die echten Fotos fehlen, tragen getönte Verläufe aus der eigenen
   Palette die Komposition. Kein Stockfoto, kein externer Request.
   script.js blendet ein fehlendes Bild aus, damit kein Broken-Icon erscheint. */
.bild {
  position: relative;
  overflow: hidden;
  background: var(--og2);
  border-radius: 2px;
  isolation: isolate;
}
.bild::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(145deg,
      oklch(0.34 0.012 150) 0%,
      oklch(0.24 0.008 150) 48%,
      oklch(0.17 0.006 150) 100%);
}
.bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 400ms linear;
}
.bild img.fehlt { opacity: 0; }

/* Etagenabhängige Platzhalter — auch die Verläufe folgen der Aufstiegsregel. */
.bild--og4::after {
  background: linear-gradient(145deg,
    oklch(0.44 0.014 150) 0%, oklch(0.32 0.010 150) 55%, oklch(0.26 0.008 150) 100%);
}
.bild--og5::after {
  background: linear-gradient(160deg,
    oklch(0.86 0.050 80) 0%, oklch(0.80 0.090 77) 42%, oklch(0.66 0.100 68) 100%);
}
.bild--panorama::after {
  background: linear-gradient(180deg,
    oklch(0.84 0.055 82) 0%,
    oklch(0.79 0.095 77) 38%,
    oklch(0.62 0.090 65) 72%,
    oklch(0.38 0.040 200) 100%);
}

/* Der Platzhalter benennt sich selbst, damit im Review niemand rät. */
.bild__marke {
  position: absolute; left: var(--r-2xs); bottom: var(--r-2xs);
  z-index: 0;
  font-family: var(--schrift-display);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: oklch(0.96 0.003 150 / 0.5);
  background: oklch(0.14 0.006 150 / 0.5);
  padding: 2px 5px;
  border-radius: 2px;
  pointer-events: none;
}
.bild:has(img:not(.fehlt)) .bild__marke { display: none; }

/* --------------------------------------------------------------------------
   9. Hero (EG)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: 8rem var(--r-2xl);
  overflow: hidden;
}

.hero__bild {
  position: absolute; inset: 0;
  z-index: var(--z-parallax);
}
/* Die Abdunkelung liegt auf ::before, NICHT auf ::after: ::after gehört
   bereits dem Platzhalter-Verlauf aus .bild. Beide auf ::after hieße, dass
   sich zwei Regeln dasselbe Pseudo-Element teilen — die letzte gewinnt und
   der Hero verliert seinen Verlauf an einen flachen schwarzen Kasten. */
.hero__bild::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  /* Der Verlauf trägt die Lesbarkeit, nicht ein flacher schwarzer Schleier. */
  background:
    linear-gradient(to top,
      oklch(0.14 0.006 150) 8%,
      oklch(0.14 0.006 150 / 0.86) 38%,
      oklch(0.14 0.006 150 / 0.5) 70%,
      oklch(0.14 0.006 150 / 0.3) 100%),
    linear-gradient(105deg,
      oklch(0.14 0.006 150 / 0.8) 0%,
      oklch(0.14 0.006 150 / 0.1) 60%);
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Der Hero-Platzhalter darf heller anfangen als die Karten-Platzhalter:
   die Abdunkelung darüber holt ihn ohnehin ins Erdgeschoss zurück. */
.hero__bild.bild::after {
  background: linear-gradient(155deg,
    oklch(0.46 0.016 150) 0%,
    oklch(0.30 0.010 150) 45%,
    oklch(0.18 0.006 150) 100%);
}

.hero__inhalt { position: relative; z-index: var(--z-inhalt); }

/* Das Q als Grafikelement — riesig, hinter dem Text, rechts aus dem Bild
   laufend. Der Beschnitt liegt bewusst RECHTS und nicht unten: Archivos Q
   trägt sein Erkennungsmerkmal im Schwanz, der unten aus der Schale tritt.
   Unten beschnitten liest sich das Zeichen als Ring, nicht als Q. */
.hero__q {
  position: absolute;
  right: -0.10em;
  top: 48%;
  transform: translateY(-50%);
  z-index: var(--z-inhalt);
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: clamp(18rem, 40vw, 32rem);
  line-height: 0.72;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.96 0.003 150 / 0.20);
  pointer-events: none;
  user-select: none;
}
/* Mobil kleiner, damit das Zeichen nicht mit der Etagenanzeige kollidiert. */
@media (max-width: 48rem) { .hero__q { font-size: 20rem; } }

.hero h1 {
  font-size: var(--t-display);
  max-width: 16ch;
  hyphens: auto;
}
.hero__sub {
  margin-top: var(--r-md);
  font-family: var(--schrift-display);
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-dunkel);
}
.hero .btn-reihe { margin-top: var(--r-lg); }

/* Der Aufzug-Hinweis am Fuß des Heros — die erste Andeutung des Konzepts. */
.hero__hinweis {
  display: flex; align-items: center; gap: var(--r-2xs);
  margin-top: var(--r-2xl);
  font-family: var(--schrift-display);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dunkel);
}
.hero__hinweis::before {
  content: ''; width: 2.5rem; height: 1px; background: var(--linie-dunkel-satt);
}

/* --------------------------------------------------------------------------
   10. Küche (1. OG)
   -------------------------------------------------------------------------- */

/* Kein gleichförmiges Kartenraster: die vier Bereiche haben verschiedene
   Höhen und Spalten. Das Raster ist ein Grundriss, keine Tabelle. */
.kueche__raster {
  display: grid;
  gap: var(--r-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
@media (min-width: 62rem) {
  .kueche__raster { grid-template-columns: repeat(12, 1fr); }
  .gericht:nth-child(1) { grid-column: span 5; }
  .gericht:nth-child(2) { grid-column: span 7; }   /* Pizza — der Hauptdarsteller */
  .gericht:nth-child(3) { grid-column: span 7; }
  .gericht:nth-child(4) { grid-column: span 5; }
}

.gericht { display: flex; flex-direction: column; gap: var(--r-sm); min-width: 0; }
.gericht .bild { aspect-ratio: 4 / 3; }

@media (min-width: 62rem) {
  /* Feste Bildhöhe je Reihe statt Seitenverhältnis pro Karte. Sonst laufen
     die Höhen bei 5/12- und 7/12-Spalten um ~24px auseinander und die
     Überschriften stehen versetzt: zu wenig, um als Absicht zu lesen, genug,
     um wie ein Fehler auszusehen. Die Asymmetrie trägt die Breite. */
  .gericht .bild { aspect-ratio: auto; height: clamp(13rem, 19vw, 17.5rem); }
}
.gericht h3 { font-size: var(--t-h3); }
.gericht p { color: var(--muted-dunkel); font-size: var(--t-klein); max-width: 46ch; }

/* Die glutenfreie Pizza ist eine Spezialität, kein Kleingedrucktes. */
.gf-hinweis {
  display: inline-flex; align-items: center; gap: var(--r-2xs);
  margin-top: var(--r-2xs);
  font-family: var(--schrift-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--basilikum-hell);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 3px var(--r-2xs);
}

.kueche__fuss { margin-top: var(--r-xl); }

/* --------------------------------------------------------------------------
   11. Saisonkarte (2. OG)
   -------------------------------------------------------------------------- */

.saison {
  display: grid;
  gap: var(--r-xl);
  align-items: center;
}
.saison > * { min-width: 0; }
@media (min-width: 56rem) {
  .saison { grid-template-columns: 1fr 0.85fr; }
}
.saison__bild { aspect-ratio: 3 / 2; }
.saison h2 { font-size: var(--t-h2); }
.saison__text > * + * { margin-top: var(--r-sm); }

/* Was gerade Saison hat, steht groß da — wie eine Zahl an der Wand.
   Der Inhalt wechselt mit der Saison, die Behandlung bleibt. */
.saison__wort {
  font-family: var(--schrift-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--kalk);
  hyphens: auto;
}

/* --------------------------------------------------------------------------
   12. Feiern (3. OG)
   -------------------------------------------------------------------------- */

.feiern { display: grid; gap: var(--r-xl); }
.feiern > * { min-width: 0; }
@media (min-width: 56rem) {
  /* `end` strandete das Zitat: die rechte Spalte ist ~1000px hoch, also
     rutschte der Satz an deren Fuß und stand außerhalb des Sichtfelds,
     losgelöst von seiner Überschrift. `start` bringt ihn nach oben. */
  .feiern { grid-template-columns: 0.9fr 1fr; align-items: start; }
  /* Die Zitatspalte muss die volle Zeilenhöhe haben, sonst hat sticky
     keinen Weg zum Kleben. `start` allein macht die Spalte nur so hoch
     wie das Zitat selbst. */
  .feiern__zitatspalte { align-self: stretch; }
  /* Der Satz bleibt stehen, solange man über den Raum liest. Er ist das
     Motto des Raums, kein Bildunterschrift-Anhängsel. */
  .feiern .zitat { position: sticky; top: 8rem; }
}

/* Das Zitat trägt die Sektion — größer als die Überschrift, ohne Anführungs-
   Ornament. Ein Satz, der im Raum steht. */
.zitat {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--kalk);
  max-width: 18ch;
}
.zitat::before { content: '»'; color: var(--basilikum-hell); margin-right: 0.1em; }
.zitat::after  { content: '«'; color: var(--basilikum-hell); margin-left: 0.05em; }

.feiern__bild { aspect-ratio: 3 / 2; }
.feiern__text > * + * { margin-top: var(--r-sm); }

/* --------------------------------------------------------------------------
   13. Gastgeber (4. OG)
   -------------------------------------------------------------------------- */

.gastgeber { display: grid; gap: var(--r-xl); align-items: center; }
@media (min-width: 56rem) {
  .gastgeber { grid-template-columns: 0.8fr 1fr; }
}
.gastgeber__portrait { aspect-ratio: 4 / 5; max-width: 26rem; }
.gastgeber__text > * + * { margin-top: var(--r-md); }
.gastgeber h2 { font-size: var(--t-h2); }

.gastgeber__signatur {
  display: flex; align-items: center; gap: var(--r-xs);
  padding-top: var(--r-sm);
  border-top: 1px solid var(--linie-dunkel);
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--kalk);
}
.gastgeber__signatur span { color: var(--muted-dunkel); font-weight: 400; }

/* --------------------------------------------------------------------------
   14. Dachterrasse (5. OG) — der Payoff
   -------------------------------------------------------------------------- */

.dach { padding-block: 0; }

.dach__panorama {
  position: relative;
  height: clamp(24rem, 74svh, 42rem);
  overflow: hidden;
}
.dach__panorama .bild {
  position: absolute; inset: 0;
  border-radius: 0;
  /* Breiter als der Viewport: der Überschuss ist der Driftweg. */
  width: 118%;
  will-change: transform;
}
.dach__panorama img { width: 100%; height: 100%; object-fit: cover; }

/* Scroll-gebundener Parallax-Drift. animation-timeline läuft off-main-thread:
   60fps ohne Scroll-Listener, und kostet nichts außerhalb des Viewports.
   Browser ohne Support zeigen das Panorama einfach statisch. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dach__panorama .bild {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-15%, 0, 0); }
}

.dach__panorama::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    oklch(0.95 0.004 150) 0%,
    oklch(0.95 0.004 150 / 0.25) 32%,
    transparent 62%);
  pointer-events: none;
}

.dach__inhalt {
  position: relative;
  z-index: var(--z-inhalt);
  margin-top: -6rem;
  padding-bottom: var(--r-sektion);
}
.dach h2 {
  font-size: var(--t-display);
  color: var(--ink);
  max-width: 15ch;
  hyphens: auto;
}
.dach__text {
  margin-top: var(--r-md);
  display: grid; gap: var(--r-md);
}
@media (min-width: 56rem) {
  .dach__text { grid-template-columns: 1fr 1fr; gap: var(--r-2xl); align-items: start; }
}
.dach__text p { color: var(--muted-hell); max-width: 54ch; }

/* Die Aufzug-Zeile: das Versprechen des Konzepts, eingelöst. */
.dach__aufzug {
  display: inline-flex; align-items: center; gap: var(--r-xs);
  margin-bottom: var(--r-sm);
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--golden);      /* Ink auf Golden: 8.4:1 — geprüft */
  padding: var(--r-3xs) var(--r-2xs);
  border-radius: 2px;
}
.dach__aufzug::before { content: '↑'; font-size: 1.1em; }

.dach__saison {
  margin-top: var(--r-md);
  padding-top: var(--r-sm);
  border-top: 1px solid var(--linie-hell);
}

/* --------------------------------------------------------------------------
   15. Kontakt (zurück im EG)
   -------------------------------------------------------------------------- */

.kontakt { display: grid; gap: var(--r-xl); }
@media (min-width: 56rem) {
  .kontakt { grid-template-columns: 1fr 1fr; gap: var(--r-2xl); }
}
.kontakt h2 { font-size: var(--t-h2); }
.kontakt__block + .kontakt__block { margin-top: var(--r-lg); }
.kontakt__cta { margin-top: var(--r-lg); }

.kontakt__zeile {
  display: flex; gap: var(--r-sm);
  padding-block: var(--r-xs);
  border-bottom: 1px solid var(--linie-dunkel);
}
.kontakt__label {
  flex: 0 0 6.5rem;
  font-family: var(--schrift-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dunkel);
  padding-top: 0.35em;
}
.kontakt__wert { flex: 1; }
/* Padding plus negatives Margin: die Trefferfläche wächst auf ~45px, das
   Layout bleibt unverändert. Die Telefonnummer ist die wichtigste Aktion
   der Seite und war als 21px hoher Inline-Link kaum zu treffen. */
.kontakt__wert a {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  color: var(--basilikum-hell);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.kontakt__wert a:hover { border-bottom-color: currentColor; }

.oeffnungszeiten { width: 100%; border-collapse: collapse; text-align: left; }
.oeffnungszeiten caption {
  text-align: left;
  font-family: var(--schrift-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dunkel);
  padding-bottom: var(--r-2xs);
}
.oeffnungszeiten th, .oeffnungszeiten td {
  padding: var(--r-2xs) 0;
  border-bottom: 1px solid var(--linie-dunkel);
  font-weight: 400;
  font-size: var(--t-klein);
}
.oeffnungszeiten th { color: var(--muted-dunkel); font-weight: 400; }
.oeffnungszeiten td { text-align: right; }

.karte {
  /* align-self ist hier keine Kosmetik, sondern ein Bugfix: als Grid-Item
     wird die Karte sonst auf die Zeilenhöhe der Kontaktspalte gestreckt
     (~805px), und aspect-ratio leitet daraus eine Breite von 1073px ab.
     Das sprengt das Raster um ~350px. `start` dreht die Kausalität um:
     Breite kommt aus der Spalte, Höhe folgt dem Seitenverhältnis. */
  align-self: start;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linie-dunkel);
  border-radius: 2px;
  display: grid; place-items: center;
  text-align: center;
  padding: var(--r-md);
  background:
    /* Grundriss-Raster statt grauer Box: die Karte ist noch nicht da,
       aber der Platz ist architektonisch gemeint. */
    repeating-linear-gradient(0deg, transparent 0 39px, var(--linie-dunkel) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--linie-dunkel) 39px 40px),
    var(--og1);
}
.karte__inner > * + * { margin-top: var(--r-2xs); }
.karte strong { font-family: var(--schrift-display); font-size: var(--t-h3); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--eg);
  border-top: 1px solid var(--linie-dunkel);
  padding-block: var(--r-2xl) var(--r-lg);
}
.footer__oben {
  display: flex; flex-wrap: wrap; gap: var(--r-lg);
  justify-content: space-between; align-items: flex-start;
}
.footer__marke {
  font-family: var(--schrift-display);
  font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em;
}
.footer__marke + p { margin-top: var(--r-2xs); color: var(--muted-dunkel); font-size: var(--t-klein); max-width: 30ch; }

.footer__spalten { display: flex; flex-wrap: wrap; gap: var(--r-2xl); }
.footer__spalte h3 {
  font-size: var(--t-label);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-dunkel);
  margin-bottom: var(--r-xs);
}
.footer__spalte ul { list-style: none; margin: 0; padding: 0; }
.footer__spalte a {
  display: inline-flex; align-items: center;
  min-height: 40px;              /* Fußzeilen-Links sind Daumenziele, keine Fußnoten */
  color: var(--kalk); text-decoration: none; font-size: var(--t-klein);
  border-bottom: 1px solid transparent;
}
.footer__spalte a:hover { border-bottom-color: var(--basilikum-hell); }

.footer__unten {
  display: flex; flex-wrap: wrap; gap: var(--r-sm);
  justify-content: space-between; align-items: center;
  margin-top: var(--r-2xl);
  padding-top: var(--r-sm);
  border-top: 1px solid var(--linie-dunkel);
  font-size: var(--t-klein);
  color: var(--muted-dunkel);
}

/* Das Easter Egg: die Etagenanzeige im Footer fährt zurück ins Erdgeschoss. */
.zurueck-eg {
  display: inline-flex; align-items: center; gap: var(--r-2xs);
  font-family: var(--schrift-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted-dunkel);
  text-decoration: none;
  border: 1px solid var(--linie-dunkel-satt);
  border-radius: 2px;
  padding: var(--r-2xs) var(--r-xs);
  min-height: 44px;
  transition: color 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart);
}
.zurueck-eg:hover { color: var(--kalk); border-color: var(--kalk); }
.zurueck-eg__pfeil { transition: transform 300ms var(--ease-out-quart); }
.zurueck-eg:hover .zurueck-eg__pfeil { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   17. Reveals — je Sektion eigen, nie ein Einheitsvorhang
   -------------------------------------------------------------------------- */

/* Alles ist ohne JS sichtbar. Der versteckte Zustand existiert nur, wenn JS
   läuft UND der Nutzer Bewegung zulässt. Sonst stünde die Seite leer. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transition: opacity 700ms var(--ease-out-quart),
                transform 700ms var(--ease-out-quart);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  /* Aufsteigen: der Inhalt kommt von unten nach, wie die Kabine. */
  .js [data-reveal='auf']    { transform: translate3d(0, 28px, 0); }
  /* Gastgeber: das Portrait setzt sich, statt zu fliegen. */
  .js [data-reveal='setzen'] { transform: scale(1.04); }

  .js [data-reveal].sichtbar {
    opacity: 1;
    transform: none;
  }

  /* Feiern: ein Vorhang, der aufgeht. Anderes Material, anderer Anlass.
     Der Clip liegt auf dem KIND, nie auf dem beobachteten Element selbst:
     Chromes IntersectionObserver verrechnet den clip-path des Ziels und
     meldet für ein auf Null geclipptes Element ratio 0 — der Vorhang würde
     sich also nie öffnen, weil er sich selbst unsichtbar macht.
     Opacity ist unkritisch, die ignoriert der Observer per Spezifikation. */
  .js [data-reveal='vorhang'] > .zitat {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 900ms var(--ease-out-expo);
  }
  .js [data-reveal='vorhang'].sichtbar > .zitat {
    clip-path: inset(0 0 0 0);
  }
}

/* Reduzierte Bewegung: die gesamte Choreografie fällt auf eine Überblendung
   zurück. Pflicht, nicht Kür. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .dach__panorama .bild { width: 100%; animation: none; }
  /* Der versteckte Reveal-Zustand ist ohnehin auf `no-preference` begrenzt.
     Der Vorhang braucht denselben Schutz explizit, sonst bliebe das Zitat
     ausgerechnet für bewegungsempfindliche Gäste zugeklappt. */
  [data-reveal] > .zitat { clip-path: none !important; }
}

/* --------------------------------------------------------------------------
   18. Speisekarte (speisekarte.html)

   Die Karte ist kein Stockwerk, sondern ein Dokument. Deshalb trägt sie
   Limestone statt der Etagenrampe und bekommt keine Etagenanzeige: an
   deren Stelle tritt die Kapitel-Navigation. Das Haus hat Etagen, die
   Karte hat Kapitel. Der dunkle Header bleibt als Markenband darüber.
   -------------------------------------------------------------------------- */

.seite-karte {
  /* Header + Kapitelleiste dürfen das Ankerziel nicht verdecken. */
  scroll-padding-top: calc(var(--header-hoehe) + 4.5rem);
}
.seite-karte body {
  background: var(--limestone);
  color: var(--ink);
  /* Der Header ist fixiert, also aus dem Fluss. Ohne dieses Polster
     beginnt der Inhalt bei y=0 unter ihm, die klebende Kapitelleiste
     rutscht darüber und kappt die Überschrift. index.html braucht das
     nicht: dort fängt der Hero die Überlappung mit eigenem Padding ab. */
  padding-top: var(--header-hoehe);
}

/* Kapitelleiste — die Rolle, die auf index.html die Etagenanzeige hat. */
.karten-nav {
  position: sticky;
  top: var(--header-hoehe);
  z-index: var(--z-etagen);
  background: oklch(0.95 0.004 150 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie-hell);
}
@supports not (backdrop-filter: blur(1px)) {
  .karten-nav { background: var(--limestone); }
}
.karten-nav__liste {
  display: flex;
  align-items: center;
  gap: var(--r-md);
  list-style: none;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  width: min(100%, var(--breite));
  /* Etwas Luft, damit der Mittagskarte-Tab nicht an den Kanten der
     Leiste klebt. */
  padding-block: 0.375rem;
  /* Mobil scrollt die Leiste horizontal, statt zu brechen. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.karten-nav__liste::-webkit-scrollbar { display: none; }

.karten-nav__link {
  display: inline-flex; align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--muted-hell);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 180ms var(--ease-out-quart), border-color 180ms var(--ease-out-quart);
}
.karten-nav__link:hover { color: var(--ink); }
.karten-nav__link[data-aktiv='true'] { color: var(--ink); border-bottom-color: var(--basilikum); }

/* Die Saisonkarte ist ein eigener Anlass, kein Kapitel unter vielen:
   sie steht nur, solange die Pfifferlinge wachsen.
   Ein echter Tab, kein schwebender Chip: volle 44px hoch wie die anderen
   Kapitel. Eine Pseudo-Element-Krücke für die Trefferfläche wäre hier
   wirkungslos — die Leiste scrollt horizontal, und `overflow-x: auto`
   erzwingt `overflow-y: auto`, was jede Erweiterung nach oben und unten
   wegschneidet. Das Ziel muss die Box selbst sein. */
.karten-nav__link--saison {
  color: var(--basilikum);
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding-inline: var(--r-xs);
  margin-right: var(--r-2xs);
}
.karten-nav__link--saison[data-aktiv='true'] {
  background: var(--basilikum);
  color: #fff;                    /* 5,7:1 — geprüft */
  border-color: var(--basilikum);
}

/* Seitenkopf */
.karte-kopf { padding-block: var(--r-2xl) var(--r-xl); }
.karte-kopf h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--ink);
}
.karte-kopf .lead { color: var(--muted-hell); margin-top: var(--r-sm); }
.karte-kopf__hinweise {
  display: flex; flex-wrap: wrap; gap: var(--r-xs);
  align-items: center;
  margin-top: var(--r-md);
}

/* Preishinweis. Ein Tag-System (V / GF) gibt es bewusst nicht: die
   Quellkarte enthält genau eine diätetische Angabe (glutenfreie Pizza),
   und alles Weitere wäre geraten. Geratene Diätangaben sind auf einer
   Speisekarte kein Stilfehler, sondern ein Risiko für den Gast. */
.preis-hinweis {
  font-size: var(--t-klein);
  color: var(--muted-hell);
}

/* Kapitel: Name links, Gerichte rechts. Die Breite trägt die Ordnung,
   nicht eine Box. */
.kategorie {
  padding-block: var(--r-xl);
  border-top: 1px solid var(--linie-hell);
}
.kategorie__kopf h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink);
}
.kategorie__notiz {
  margin-top: var(--r-2xs);
  font-size: var(--t-klein);
  color: var(--muted-hell);
  max-width: 30ch;
}
@media (min-width: 62rem) {
  .kategorie {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--r-2xl);
    align-items: start;
  }
  .kategorie > * { min-width: 0; }
}

.gerichte { list-style: none; margin: 0; padding: 0; }
.gerichte > li + li { margin-top: var(--r-md); }

.gericht-zeile__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--r-2xs);
  margin: 0;
}
.gericht-zeile__name {
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
/* Die Punktführung: gepunktet über radial-gradient statt border-dotted —
   border-dotted rendert je nach Browser unterschiedlich dicht. */
.gericht-zeile__fuehrung {
  flex: 1 1 auto;
  min-width: 1.5rem;
  align-self: end;
  height: 2px;
  margin-bottom: 0.34em;
  background-image: radial-gradient(circle, var(--muted-hell) 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 0 center;
  opacity: 0.55;
}
.gericht-zeile__preis {
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.gericht-zeile__text {
  margin-top: var(--r-3xs);
  font-size: var(--t-klein);
  color: var(--muted-hell);
  max-width: 58ch;
}

/* Hinweiszeilen unter einem Kapitel (Dressing, Beilagen, Aufpreise).
   Die Quellkarte trägt sie als Fußnoten; sie sind Teil des Angebots,
   nicht Kleingedrucktes. */
.kategorie__hinweis {
  margin-top: var(--r-md);
  padding-top: var(--r-sm);
  border-top: 1px solid var(--linie-hell);
  font-size: var(--t-klein);
  color: var(--muted-hell);
  max-width: 68ch;
}
.kategorie__hinweis p + p { margin-top: var(--r-3xs); }

/* Die Saisonkarte: abgesetzter Block vor der großen Karte. Sie steht nur
   für eine Saison, deshalb rahmt sie sich sichtbar ab, statt sich unter
   die festen Kapitel zu mischen. */
.saisonblock {
  margin-block: var(--r-lg) var(--r-2xl);
  padding: var(--r-lg);
  border: 1px solid var(--basilikum);
  border-radius: 3px;
  background: var(--limestone-tief);
}
.saisonblock__kopf {
  display: flex; flex-wrap: wrap; gap: var(--r-sm);
  align-items: baseline; justify-content: space-between;
  padding-bottom: var(--r-sm);
  border-bottom: 1px solid var(--linie-hell);
}
.saisonblock__kopf h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.saisonblock__marke {
  font-family: var(--schrift-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--basilikum);   /* 5,7:1 — geprüft */
  padding: var(--r-3xs) var(--r-2xs);
  border-radius: 2px;
}
.saisonblock__unter {
  margin-top: var(--r-lg);
  font-size: 1.125rem;
  color: var(--ink);
}
.saisonblock__unter + .gerichte { margin-top: var(--r-sm); }
.saisonblock__fuss {
  margin-top: var(--r-lg);
  padding-top: var(--r-sm);
  border-top: 1px solid var(--linie-hell);
  display: flex; flex-wrap: wrap; gap: var(--r-sm); align-items: center;
}

/* Ein Wein in drei Größen: der Name steht einmal, die Mengen darunter. */
.groessen { list-style: none; margin: var(--r-2xs) 0 0; padding: 0; }
.groessen li { display: flex; align-items: baseline; gap: var(--r-2xs); }
.groessen li + li { margin-top: var(--r-3xs); }
.groessen__menge { font-size: var(--t-klein); color: var(--muted-hell); }

/* Glutenfrei ist Spezialität, nicht Kleingedrucktes. */
.gf-spezial {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2xs);
  margin-top: var(--r-md);
  padding: var(--r-xs) var(--r-sm);
  border: 1px solid var(--basilikum);
  border-radius: 2px;
  font-size: var(--t-klein);
  color: var(--ink);
}
.gf-spezial strong { font-family: var(--schrift-display); color: var(--basilikum); }

/* Allergene: Pflichtangabe, klar und ohne Ausrede. */
.allergene {
  margin-block: var(--r-xl) var(--r-2xl);
  padding-top: var(--r-md);
  border-top: 1px solid var(--linie-hell);
  font-size: var(--t-klein);
  color: var(--muted-hell);
  max-width: 62ch;
}

/* Nur im Druck: die Karte trägt ihren Absender selbst. */
.druck-kopf { display: none; }

/* --------------------------------------------------------------------------
   19. Druck
   -------------------------------------------------------------------------- */

@page { size: A4 portrait; margin: 16mm 14mm; }

@media print {
  .header, .etagen, .hero__q, .skip-link, .karten-nav, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .etage { background: #fff !important; color: #000 !important; padding-block: 1.5rem; }
  .bild, .karte { display: none; }
  a { color: #000; text-decoration: underline; }

  /* Ohne diesen Block druckt die Seite leer: Reveals unterhalb des
     Sichtfelds haben nie gefeuert, stehen also noch auf opacity 0 und
     nehmen ihren Zustand mit aufs Papier. */
  [data-reveal], [data-reveal] > .zitat {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* ---- Speisekarte auf A4 ---- */
  .seite-karte body { background: #fff; color: #000; font-size: 10pt; line-height: 1.45; }

  /* Auf Papier gibt es keinen Header, der den Absender trägt. Also trägt
     ihn die Karte selbst — sonst liegt ein Blatt ohne Restaurant darauf. */
  .seite-karte .druck-kopf {
    display: block;
    margin-bottom: 8mm;
    padding-bottom: 3mm;
    border-bottom: 0.5pt solid #000;
  }
  .druck-kopf__marke { font-family: var(--schrift-display); font-weight: 800; font-size: 20pt; letter-spacing: -0.03em; }
  .druck-kopf__zeile { font-size: 8.5pt; margin-top: 1mm; }

  .seite-karte .karte-kopf { padding-block: 0 4mm; }
  .seite-karte .karte-kopf h1 { font-size: 16pt; }
  .seite-karte .karte-kopf .lead { display: none; }
  .seite-karte .preis-hinweis { font-size: 8pt; color: #000; }

  /* Ein Kapitel soll nicht mitten über den Seitenumbruch fallen.
     Die Saisonkarte ist mit vier Unterteilen zu lang für eine A4-Seite:
     sie darf umbrechen, ihre Gerichte einzeln aber nicht. */
  .kategorie, .gerichte > li, .saisonblock__unter + .gerichte {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .saisonblock__unter { break-after: avoid; page-break-after: avoid; }
  .kategorie {
    padding-block: 4mm;
    border-top: 0.5pt solid #000;
    display: block;              /* Zweispaltigkeit ist Bildschirm-Luxus */
  }
  .kategorie__kopf h2 {
    font-size: 12pt;
    break-after: avoid;
    page-break-after: avoid;
    margin-bottom: 2mm;
  }
  .kategorie__notiz, .gericht-zeile__text,
  .kategorie__hinweis, .groessen__menge { color: #333; font-size: 8.5pt; }
  .gerichte > li + li { margin-top: 2.5mm; }
  .gericht-zeile__name, .gericht-zeile__preis { font-size: 10pt; color: #000; }
  .gericht-zeile__fuehrung {
    background-image: radial-gradient(circle, #666 1px, transparent 1px);
    opacity: 1;
  }

  .saisonblock { background: transparent; border: 0.5pt solid #000; padding: 4mm; }
  .saisonblock__marke { background: transparent; color: #000; border: 0.5pt solid #000; }
  .saisonblock__unter { font-size: 10pt; margin-top: 3mm; }
  .gf-spezial { border: 0.5pt solid #000; padding: 2mm 3mm; }
  .gf-spezial strong { color: #000; }
  .allergene { color: #000; font-size: 8.5pt; border-top: 0.5pt solid #000; margin-bottom: 0; }
  .platzhalter { border-color: #000; color: #000; }
  /* Links im Druck ohne Unterstreichung: auf Papier klickt niemand. */
  .seite-karte a { text-decoration: none; color: #000; }
}