/* ═══════════════════════════════════════════════════════════════
   LARA BELLE — Design-System und Seitenstil
   Äußere Hauptstraße 28 · 85579 Neubiberg

   Farben stammen aus dem Logo und aus Fotos des echten Gastraums.
   Nichts hier ist erfunden.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Farben ─────────────────────────────────────────────── */
:root {
  /* Aus dem Logo ausgelesen */
  --wein-900: #240005;
  --wein-800: #3a0008;
  --wein-700: #4a0008;   /* Markenfarbe */
  --wein-600: #61121c;
  --gold-600: #c2922f;   /* nur auf dunklem Grund verwenden */
  --gold-800: #86621a;   /* Bronze - fuer kleinen Text auf hellem Grund, 5.0:1 */
  --gold-500: #e8b84a;   /* Markenakzent */
  --gold-400: #f3cf72;

  /* Aus Fotos des Gastraums ausgelesen */
  --holz:     #8a613b;
  --holz-400: #b08048;
  --schiefer: #2f4251;
  --schiefer-900: #182838;
  --orange:   #dd3e29;   /* Spritz, Gerbera */

  /* Papier */
  --creme:  #f7f3ea;
  --creme-2:#ece4d5;
  --creme-3:#ddd2bd;
  /* Creme mit Deckkraft 0. NICHT "transparent" in Verlaeufen benutzen:
     CSS rechnet dann ueber durchsichtiges SCHWARZ und es entsteht ein
     sichtbarer Graustich in der Mitte des Verlaufs. */
  --creme-0: rgb(247 243 234 / 0);

  /* Rollen */
  --grund:      var(--creme);
  --text:       var(--wein-900);
  --text-leise: #6b5a52;
  --linie:      var(--creme-3);

  /* Typografie */
  --schrift-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --schrift-text:    "Karla", "Segoe UI", system-ui, sans-serif;

  /* Fließende Größen — skalieren zwischen Handy und Desktop */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
  --t-s:    clamp(0.88rem, 0.84rem + 0.20vw, 1.00rem);
  --t-m:    clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
  --t-l:    clamp(1.25rem, 1.10rem + 0.75vw, 1.60rem);
  --t-xl:   clamp(1.75rem, 1.40rem + 1.75vw, 2.80rem);
  --t-2xl:  clamp(2.40rem, 1.70rem + 3.50vw, 5.00rem);
  --t-3xl:  clamp(3.00rem, 1.80rem + 6.00vw, 7.50rem);

  /* Rhythmus */
  --raum-1: 0.5rem;  --raum-2: 1rem;    --raum-3: 1.5rem;
  --raum-4: 2.5rem;  --raum-5: 4rem;    --raum-6: clamp(4rem, 10vw, 9rem);

  --rand: clamp(1.25rem, 5vw, 4rem);   /* seitlicher Seitenrand */
  --breite: 78rem;                      /* maximale Inhaltsbreite */

  /* Kurven nach Emil Kowalskis Tabelle. Die eingebauten CSS-Kurven
     (ease-out) sind zu schwach, selbst erfundene wirken beliebig. */
  /* Höhe der klebenden Kopfzeile. Wird beim Laden von seite.js
     gemessen und hier eingetragen, damit die Kategorieleiste der
     Speisekarte exakt darunter andockt statt dahinter zu verschwinden. */
  --kopf-hoehe: 4.4rem;

  --schwung:     cubic-bezier(0.23, 1, 0.32, 1);      /* Auftritte, Abgänge */
  --schwung-hin: cubic-bezier(0.77, 0, 0.175, 1);     /* Bewegung auf dem Schirm */
}

/* ── 2 · Grundlagen ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS vergrößert sonst quer */
  scroll-behavior: smooth;
  /* Sagt dem Browser, dass die Seite hell ist. Sonst zeichnet er
     Scrollbalken und Formularfelder im Systemdunkelmodus falsch. */
  color-scheme: light;
}
@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;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--t-m);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Kein blauer Blitz beim Antippen auf dem Handy */
  -webkit-tap-highlight-color: transparent;
  /* Deutsche Komposita sprengen schmale Spalten:
     "Lebensmittelinformationsverordnung" ist 34 Zeichen ohne
     Trennstelle und lief bei doppelt gestellter Schrift 299 px aus
     dem Kasten heraus. "break-word" greift NUR, wenn ein Wort sonst
     ueberlaufen wuerde - normaler Text bleibt unveraendert. Deshalb
     hier global und nicht an einzelnen Stellen. */
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* Platzhalterfarbe nur für Fotos — SVGs sind transparent und bekämen
   sonst einen sichtbaren Kasten hinter dem Logo. */
img[src$=".webp"], img[src$=".jpg"], img[src$=".jpeg"], img[src$=".png"] {
  background: var(--creme-2);
}

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--raum-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

/* Sprungmarke für Tastaturnutzer.
   MUSS "fixed" sein, nicht "absolute": bei "absolute" haengt sie am
   Dokument. Wer mitten auf der Seite Tab drueckt, bekommt sie dann
   am Seitenanfang eingeblendet und sieht gar nichts. */
.sprung {
  position: fixed; left: var(--raum-2); top: -4rem;
  z-index: 200; background: var(--wein-700); color: var(--creme);
  padding: 0.75rem 1.25rem; border-radius: 0 0 6px 6px;
  text-decoration: none; transition: top 0.2s var(--schwung);
}
.sprung:focus { top: 0; }

/* ── 3 · Bausteine ──────────────────────────────────────────── */
.mitte {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.ueberschrift-klein {
  font-family: var(--schrift-text);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Bronze statt Gold: Gold erreicht auf Creme nur 2,55:1 und ist
     bei 12 px nicht mehr sicher lesbar. Bronze schafft 5,0:1. */
  color: var(--gold-800);
  margin: 0 0 var(--raum-2);
  display: flex; align-items: center; gap: var(--raum-2);
}
.ueberschrift-klein::after {
  content: ""; flex: 1; height: 1px;
  background: currentColor; opacity: 0.35;
}

/* Knöpfe — Mindestgröße 48 px, damit sie sich am Handy gut treffen lassen */
.knopf {
  /* Verhindert die 300-ms-Wartezeit, mit der mobile Browser auf
     einen moeglichen Doppeltipp zum Zoomen warten. */
  touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em;
  min-height: 3rem; padding: 0.85rem 1.6rem;
  font-family: var(--schrift-text);
  font-size: var(--t-s); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border: 1.5px solid transparent;
  border-radius: 2px; cursor: pointer;
  transition: transform 0.25s var(--schwung),
              background-color 0.25s, color 0.25s, border-color 0.25s;
}
.knopf--gold { background: var(--gold-500); color: var(--wein-900); }
.knopf--rand { border-color: currentColor; color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { transform: translateY(-2px); }
  .knopf--gold:hover { background: var(--gold-400); }
  /* Farben hier ausdrücklich nennen. Mit "background: currentColor"
     löst currentColor auf die im selben Block gesetzte Textfarbe auf —
     Hintergrund und Schrift werden identisch und der Knopf verschwindet. */
  .knopf--rand:hover { background: var(--creme); color: var(--wein-800); border-color: var(--creme); }
}
.knopf:active { transform: translateY(0); }

/* Leinenstruktur — aus dem Untergrund der originalen Logodatei
   herausgelöst. Das ist der Stoff, auf dem das goldene Logo liegt.
   Kein Standardrauschen: diese Struktur hat sonst niemand. */
.korn {
  background-image: url("leinen.webp");
  background-size: 384px 384px;
  background-blend-mode: overlay;
}

/* ── 4 · Kopfzeile ──────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--wein-800) 92%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
  color: var(--creme);
  /* Auf iPhones nicht unter den Notch rutschen */
  padding-top: env(safe-area-inset-top);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-2); padding-block: 0.7rem;
}
.kopf__logo { display: block; width: clamp(6.5rem, 16vw, 9.5rem); color: var(--gold-500); }
.kopf__logo svg { width: 100%; height: auto; }

.kopf__rechts { display: flex; align-items: center; gap: var(--raum-3); }

.navi { display: none; gap: var(--raum-3); }
.navi a {
  font-size: var(--t-s); text-decoration: none;
  letter-spacing: 0.04em; padding-block: 0.4rem;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.25s, color 0.25s;
}
@media (hover: hover) and (pointer: fine) { .navi a:hover { border-bottom-color: var(--gold-500); } }
@media (min-width: 62rem) { .navi { display: flex; } }

.kopf__tel {
  touch-action: manipulation;
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 2.75rem; padding: 0.55rem 1.1rem;
  background: var(--gold-500); color: var(--wein-900);
  font-weight: 700; font-size: var(--t-s); letter-spacing: 0.04em;
  text-decoration: none; border-radius: 2px; white-space: nowrap;
  transition: background-color 0.25s;
}
@media (hover: hover) and (pointer: fine) { .kopf__tel:hover { background: var(--gold-400); } }
.kopf__tel span { display: none; }
@media (min-width: 30rem) { .kopf__tel span { display: inline; } }

/* ── 5 · Aufmacher ──────────────────────────────────────────── */
.auf {
  position: relative; isolation: isolate;
  background-color: var(--wein-800); color: var(--creme);
  /* Am Handy knapp halten, damit das erste Foto noch in den
     sichtbaren Bereich rutscht — sonst sieht der Gast beim Landen
     nur Text und weiß nicht, wie es bei uns aussieht. */
  padding-block: 2rem clamp(4rem, 12vw, 7rem);
  /* NICHT "overflow: hidden": das wuerde auch den weichen Uebergang
     an der Unterkante abschneiden. "clip" nur waagrecht — dafuer war
     es gedacht, weil das kleine Bild rechts leicht hinausragt. */
  overflow-x: clip;
}
@media (min-width: 60rem) { .auf { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem); } }
/* Warmer Lichtschein von oben rechts — Kerzenlicht, kein Farbverlauf-Klischee */
.auf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 55% at 78% 8%,
      color-mix(in srgb, var(--gold-500) 22%, transparent), transparent 62%),
    radial-gradient(90% 70% at 12% 100%,
      color-mix(in srgb, var(--orange) 12%, transparent), transparent 60%);
}

.auf__gitter { display: grid; gap: var(--raum-4); align-items: center; }
@media (min-width: 60rem) {
  .auf__gitter { grid-template-columns: 1fr 0.85fr; gap: var(--raum-6); }
}

.auf__logo { width: clamp(8.5rem, 26vw, 17rem); color: var(--gold-500); margin-bottom: var(--raum-3); }
@media (min-width: 60rem) { .auf__logo { margin-bottom: var(--raum-4); } }
.auf__logo svg { width: 100%; height: auto; }

.auf h1 {
  font-size: var(--t-2xl);
  margin-bottom: var(--raum-3);
  /* Die Zeilen darin bringen ihre eigene Bewegung mit. Ohne das
     hier laeuft beides uebereinander und wirkt unruhig. */
  animation: none;
}
.auf h1 em {
  font-style: italic;
  color: var(--gold-500);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

.auf__text { font-size: var(--t-l); max-width: 34ch; color: color-mix(in srgb, var(--creme) 86%, transparent); }

.auf__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: var(--raum-3); }
@media (max-width: 30rem) {
  .auf__knoepfe { display: grid; grid-template-columns: 1fr; }
}
@media (min-width: 60rem) { .auf__knoepfe { margin-top: var(--raum-4); } }

/* Live-Anzeige: hat gerade offen oder nicht */
.status {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--t-s); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: var(--raum-3);
}
.status__punkt {
  width: 0.65em; height: 0.65em; border-radius: 50%;
  background: currentColor; flex: none;
}
.status--offen  { color: #8fd694; }
.status--offen .status__punkt { animation: pulsieren 2.4s ease-in-out infinite; }
.status--zu     { color: var(--creme-3); }
@keyframes pulsieren {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #8fd694 60%, transparent); }
  70%      { box-shadow: 0 0 0 0.55em transparent; }
}

/* Bildstapel im Aufmacher */
.auf__bilder {
  position: relative;
  animation: auftakt 1s var(--schwung) 0.35s backwards;
}
@media (prefers-reduced-motion: reduce) { .auf__bilder { animation: none; } }
.auf__bild {
  position: relative; border-radius: 2px; overflow: hidden;
  box-shadow: 0 28px 60px -20px rgb(0 0 0 / 0.65);
}
.auf__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 60rem) {
  /* Quelle ist nur 765 px breit - nicht groesser anzeigen als noetig,
     sonst wird das Bild sichtbar weich. */
  .auf__bild { max-width: 30rem; margin-left: auto; }
}
.auf__bild--klein {
  position: absolute; right: -4%; bottom: -14%;
  width: 46%; border: 5px solid var(--wein-800);
}
.auf__bild--klein img { aspect-ratio: 3 / 4; }
@media (max-width: 30rem) { .auf__bild--klein { width: 52%; bottom: -10%; } }

/* ── 6 · Abschnitte ─────────────────────────────────────────── */
.teil { padding-block: var(--raum-6); position: relative; }
.teil--papier { background-color: var(--creme); }
.teil--dunkel { background-color: var(--schiefer-900); color: var(--creme); }
.teil--wein   { background-color: var(--wein-700); color: var(--creme); position: relative; isolation: isolate; }

.teil__kopf { max-width: 46rem; margin-bottom: var(--raum-5); }
.teil__kopf h2 { font-size: var(--t-xl); margin-bottom: var(--raum-2); }
.teil__kopf p { font-size: var(--t-l); color: var(--text-leise); }
.teil--dunkel .teil__kopf p, .teil--wein .teil__kopf p {
  color: color-mix(in srgb, var(--creme) 78%, transparent);
}

/* Zwei Spalten, Bild und Text */
.paar { display: grid; gap: var(--raum-4); align-items: center; }
@media (min-width: 55rem) {
  .paar { grid-template-columns: 1fr 1fr; gap: var(--raum-6); }
  .paar--gedreht > :first-child { order: 2; }
}
.paar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
@media (min-width: 55rem) { .paar img { aspect-ratio: 3 / 4; } }

/* ── 7 · Gerichte ───────────────────────────────────────────── */
.gerichte { display: grid; gap: 0; }
.gericht {
  display: grid; gap: var(--raum-1);
  padding-block: var(--raum-3);
  border-top: 1px solid var(--linie);
}
.teil--wein .gericht { border-color: color-mix(in srgb, var(--gold-500) 25%, transparent); }
.gericht:last-child { border-bottom: 1px solid var(--linie); }
.teil--wein .gericht:last-child { border-bottom-color: color-mix(in srgb, var(--gold-500) 25%, transparent); }

.gericht__zeile {
  display: flex; align-items: baseline; gap: var(--raum-2);
  /* NICHT "wrap": Dann weicht der PREIS in die naechste Zeile aus und
     steht dort links, waehrend die Punktlinie ins Leere laeuft. Bei
     320 px Breite betraf das 45 von 94 Gerichten, bei 390 px noch 16 —
     es sah nach Fehler aus, nicht nach Gestaltung.
     Mit "nowrap" plus "min-width: 0" am Namen bricht stattdessen der
     NAME um. Punktlinie und Preis bleiben oben rechts, so wie auf
     einer gedruckten Karte. */
  flex-wrap: nowrap;
  /* Die Zeile liegt in einem Grid (".gericht"). Grid-Elemente haben
     von Haus aus "min-width: auto" und koennen damit NICHT unter ihre
     Inhaltsbreite schrumpfen — die Zeile war 589 px breit in einer
     310 px schmalen Zelle und lief heraus. Erst "min-width: 0" gibt
     sie frei, dann greift das Stauchen der Flexbox darin.
     Verschachtelte Flex- und Grid-Layouts brauchen das an JEDER
     Ebene, sonst bleibt die aeusserste starr. */
  min-width: 0;
}
.gericht__name {
  /* Erlaubt dem Namen, schmaler zu werden als seine Wunschbreite —
     ohne das greift die Flexbox nicht und der Preis rutscht doch. */
  min-width: 0; flex: 0 1 auto;
  /* "min-width: 0" allein reicht NICHT bei einem einzigen langen Wort:
     "Schokoladensoufflé" hat keine Trennstelle und laesst sich nicht
     stauchen. Bei doppelt gestellter Schrift war es 368 px breit in
     einem 310-px-Kasten und lief seitlich heraus.
     "hyphens: auto" nutzt die Silbentrennung (die Seite ist als
     lang="de" ausgezeichnet, der Browser trennt also korrekt).
     "break-word" ist der Notnagel, falls ein Browser nicht trennen
     kann — lieber ein harter Umbruch als ein Ueberlauf. */
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--schrift-display);
  font-size: var(--t-l); font-weight: 500;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  line-height: 1.1;
}
.gericht__punkte {
  flex: 1 1 2rem; min-width: 2rem;
  /* Punktlinie wie auf einer gedruckten Speisekarte. Bei 35 Prozent
     war sie am Bildschirm praktisch unsichtbar. */
  border-bottom: 2px dotted color-mix(in srgb, currentColor 55%, transparent);
  transform: translateY(-0.3em);
}
.teil--wein .gericht__punkte {
  border-bottom-color: color-mix(in srgb, var(--gold-500) 45%, transparent);
}
.gericht__preis {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--t-m);
  color: var(--gold-800); white-space: nowrap;
}
.teil--wein .gericht__preis { color: var(--gold-500); }
.gericht__zutaten { font-size: var(--t-s); color: var(--text-leise); }
.teil--wein .gericht__zutaten { color: color-mix(in srgb, var(--creme) 72%, transparent); }

/* Die Salatnamen sind das Besondere an dieser Karte — die dürfen groß */
.namen { display: grid; gap: var(--raum-4); }
@media (min-width: 48rem) { .namen { grid-template-columns: repeat(2, 1fr); gap: var(--raum-5); } }
.name-gross {
  font-family: var(--schrift-display);
  font-size: var(--t-xl); line-height: 0.98;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  font-style: italic;
  color: var(--gold-500);
  margin-bottom: var(--raum-1);
}

/* ── 8 · Bildraster ─────────────────────────────────────────── */
.raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--raum-2); }
@media (min-width: 55rem) {
  .raster { grid-template-columns: repeat(4, 1fr); gap: var(--raum-3); }
}
.raster figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; }
.raster img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 0.7s var(--schwung);
}
@media (hover: hover) and (pointer: fine) { .raster figure:hover img { transform: scale(1.06); } }
.raster figure:nth-child(1) { grid-column: span 2; }
.raster figure:nth-child(1) img { aspect-ratio: 16 / 10; }
@media (min-width: 55rem) {
  /* Erstes Bild 2x2, die vier anderen rechts daneben - geht sauber auf */
  .raster { grid-template-columns: repeat(4, 1fr); }
  .raster figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .raster figure:nth-child(1) img { aspect-ratio: 1; }
}

/* ── 9 · Öffnungszeiten ─────────────────────────────────────── */
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten caption { text-align: left; padding-bottom: var(--raum-2); font-weight: 700; }
.zeiten th, .zeiten td { padding: 0.7rem 0; text-align: left; font-weight: 400; }
.zeiten th { font-weight: 700; width: 9rem; }
.zeiten tr { border-bottom: 1px solid color-mix(in srgb, var(--creme) 18%, transparent); }
.zeiten tr:last-child { border-bottom: none; }
.zeiten tr[data-heute] { color: var(--gold-500); font-weight: 700; }
.zeiten td:last-child { text-align: right; }

/* ── 10 · Fußzeile ──────────────────────────────────────────── */
.fuss {
  background: var(--wein-900); color: color-mix(in srgb, var(--creme) 80%, transparent);
  padding-block: var(--raum-5) var(--raum-4);
  font-size: var(--t-s);
  padding-bottom: max(var(--raum-4), env(safe-area-inset-bottom));
}
.fuss__gitter { display: grid; gap: var(--raum-4); }
@media (min-width: 48rem) { .fuss__gitter { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--raum-5); } }
.fuss h3 {
  font-family: var(--schrift-text); font-size: var(--t-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: var(--raum-2); font-weight: 700;
}
.fuss a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { color: var(--gold-500); } }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
/* Links in der Fußzeile bekommen Höhe, damit man sie am Handy
   sicher trifft. Reiner Text wäre nur 18 px hoch. */
.fuss__liste a { display: inline-block; padding-block: 0.35rem; }
.fuss__unten {
  margin-top: var(--raum-5); padding-top: var(--raum-3);
  border-top: 1px solid color-mix(in srgb, var(--gold-500) 20%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-3);
  justify-content: space-between; font-size: var(--t-xs);
}

/* Fester Telefonbalken am unteren Rand — nur auf dem Handy */
.tel-balken {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; background: var(--gold-500);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 18px rgb(36 0 5 / 0.18);
  transform: translateY(110%);
  transition: transform 0.4s var(--schwung);
}
.tel-balken[data-sichtbar] { transform: translateY(0); }
.tel-balken a {
  touch-action: manipulation;
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.55em;
  /* 46 px. Darunter wird es unbequem zu treffen — 44 px gilt als
     unterste bequeme Grenze. Auf iPhones kommt unten noch der
     Sicherheitsabstand fuer den Home-Indikator dazu. */
  min-height: 2.875rem;
  font-size: var(--t-s);
  color: var(--wein-900);
  font-weight: 700; letter-spacing: 0.05em; text-decoration: none;
}
@media (min-width: 48rem) { .tel-balken { display: none; } }

/* ── 11 · Einblenden beim Scrollen ──────────────────────────── */
/* Nur ausblenden, wenn JavaScript läuft. Sonst ist die Seite ohne JS leer. */
.js .zeig { opacity: 0; transform: translateY(1.75rem); }
.js .zeig[data-da] {
  opacity: 1; transform: none;
  transition: opacity 0.75s var(--schwung), transform 0.75s var(--schwung);
  transition-delay: var(--verzug, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .zeig { opacity: 1; transform: none; }
}
/* Beim Drucken und in der Druckvorschau muss immer alles sichtbar sein */
@media print {
  .js .zeig { opacity: 1 !important; transform: none !important; }
  .kopf, .tel-balken { position: static; }
}

/* Auftakt beim Laden — gestaffelt */
@keyframes auftakt {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}
.auftakt > * {
  animation: auftakt 0.9s var(--schwung) backwards;
}
.auftakt > *:nth-child(1) { animation-delay: 0.05s; }
.auftakt > *:nth-child(2) { animation-delay: 0.15s; }
.auftakt > *:nth-child(3) { animation-delay: 0.25s; }
.auftakt > *:nth-child(4) { animation-delay: 0.35s; }
.auftakt > *:nth-child(5) { animation-delay: 0.45s; }

/* ═══════════════════════════════════════════════════════════════
   12 · Bausteine, die es nur bei Lara Belle gibt
   ═══════════════════════════════════════════════════════════════ */

/* ── Zierde: das Besteck-Symbol zwischen zwei Goldlinien ────────
   Das Trennzeichen einer gedruckten Speisekarte, gebaut aus der
   eigenen Bildmarke statt aus einem beliebigen Icon.            */
.zierde {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-block: var(--raum-5);
}
.zierde::before, .zierde::after {
  content: ""; height: 1px; flex: 1 1 0; max-width: 16rem;
  background: linear-gradient(to var(--richtung, right),
              transparent, var(--gold-600));
}
.zierde::after { --richtung: left; }
.zierde img { width: clamp(2.2rem, 6vw, 3.4rem); height: auto; opacity: 0.9; }

/* ── Spruch: eine Zeile aus der eigenen Speisekarte, groß ───────
   Die Karte hat bereits eine Stimme. Diese Bausteine geben ihr
   Platz, statt Marketingsprache zu erfinden.                    */
.spruch {
  padding-block: clamp(4rem, 11vw, 8rem);
  text-align: center;
  position: relative;
}
.spruch__text {
  font-family: var(--schrift-display);
  font-style: italic;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  font-size: clamp(1.7rem, 1.1rem + 3vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  max-width: 21ch;
  margin: 0 auto;
  text-wrap: balance;
}
.spruch__wer {
  font-family: var(--schrift-text);
  font-size: var(--t-xs);
  letter-spacing: 0.24em; text-transform: uppercase;
  margin-top: var(--raum-3);
  /* KEIN opacity hier. Deckkraft senkt den Kontrast, ohne dass man
     es der Farbe ansieht — axe-core hat genau das gefunden:
     aus 5,0:1 wurden faktisch 3,2:1. Farben stattdessen direkt setzen. */
}
.spruch--wein { background-color: var(--wein-700); color: var(--gold-500); }
.spruch--wein .spruch__wer { color: color-mix(in srgb, var(--creme) 86%, var(--wein-700)); }
.spruch--papier .spruch__text { color: var(--wein-700); }
.spruch--papier .spruch__wer { color: var(--gold-800); }

/* ── Versetztes Paar: bricht das brave 50/50-Raster auf ─────────
   Bild und Text überlappen leicht und sind unterschiedlich breit.
   Genau das unterscheidet eine gestaltete Seite von einer Vorlage. */
@media (min-width: 62rem) {
  /* Ungleiche Spalten geben Spannung. "align-items: end" erzeugte
     dagegen eine grosse Leere ueber dem kuerzeren Text. */
  .paar--versetzt {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
  .paar--versetzt img { aspect-ratio: 4 / 5; }

  .paar--hoch { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}

/* Kleines Bild, das aus dem Raster ausbricht */
.ueberlappung { position: relative; }
@media (min-width: 62rem) {
  .ueberlappung__klein {
    position: absolute; z-index: 2;
    width: 42%; right: -8%; bottom: -12%;
    border: 6px solid var(--creme);
    box-shadow: 0 22px 44px -18px rgb(36 0 5 / 0.45);
  }
  .teil--dunkel .ueberlappung__klein { border-color: var(--schiefer-900); }
  .teil--wein   .ueberlappung__klein { border-color: var(--wein-700); }
  .ueberlappung__klein img { aspect-ratio: 1; }
}
.ueberlappung__klein { display: none; }
@media (min-width: 62rem) { .ueberlappung__klein { display: block; } }

/* ── Bild-Aufdeckung: von unten aufziehen statt nur einblenden ──
   clip-path ist neben transform und opacity die einzige weitere
   Eigenschaft, die ohne Layout-Neuberechnung animiert.          */
.js .zeig.aufziehen { transform: none; }   /* nur eine Bewegung, nicht zwei */
.js .aufziehen img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
}
.js .aufziehen[data-da] img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 0.85s var(--schwung),
              transform 1.1s var(--schwung);
  transition-delay: var(--verzug, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .aufziehen img { clip-path: none; transform: none; }
}

/* ── Zeilenweiser Auftakt der Überschrift ───────────────────────
   Jede Zeile kommt einzeln. 60 ms Versatz - unter 30 wirkt es
   gleichzeitig, über 80 zerfällt der Satz.                      */
.auf h1 .zeile {
  display: block;
  animation: zeileRein 0.85s var(--schwung) backwards;
}
.auf h1 .zeile:nth-child(1) { animation-delay: 0.10s; }
.auf h1 .zeile:nth-child(2) { animation-delay: 0.17s; }
@keyframes zeileRein {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auf h1 .zeile { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   13 · Speisekarte und Textseiten
   ═══════════════════════════════════════════════════════════════ */

/* ── Seitenkopf ─────────────────────────────────────────────── */
.seitenkopf {
  background-color: var(--wein-800); color: var(--creme);
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.seitenkopf h1 {
  font-size: var(--t-xl);
  margin-bottom: var(--raum-2);
}
.seitenkopf p { color: color-mix(in srgb, var(--creme) 78%, transparent); }
.seitenkopf .zierde { margin-block: 0 var(--raum-3); }

/* ── Sprungleiste zu den Kategorien ─────────────────────────── */
.kategorien {
  position: sticky; top: var(--kopf-hoehe); z-index: 90;
  background: color-mix(in srgb, var(--creme) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top);
}
.kategorien__rolle {
  display: flex; gap: var(--raum-1);
  overflow-x: auto; scrollbar-width: none;
  padding-block: 0.6rem;
  scroll-snap-type: x proximity;
  /* Am Handy bis an den Rand scrollen lassen, aber Inhalt eingerückt */
  margin-inline: calc(-1 * var(--rand));
  padding-inline: var(--rand);
}
.kategorien__rolle::-webkit-scrollbar { display: none; }
.kategorien a {
  touch-action: manipulation;
  flex: none; scroll-snap-align: start;
  padding: 0.55rem 0.95rem; min-height: 2.5rem;
  display: inline-flex; align-items: center;
  font-size: var(--t-s); font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none;
  color: var(--text-leise); border-radius: 2px;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .kategorien a:hover { color: var(--wein-700); background: var(--creme-2); }
}
.kategorien a[aria-current="true"] {
  color: var(--creme); background: var(--wein-700);
}

/* ── Kategorieblock ─────────────────────────────────────────── */
.kat {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
  /* Sprungziel unter Kopfzeile UND Kategorieleiste legen */
  scroll-margin-top: calc(var(--kopf-hoehe) + 4.5rem);
}
.kat__kopf { margin-bottom: var(--raum-3); }
.kat__kopf h2 { font-size: var(--t-l); margin-bottom: 0.2rem; }
.kat__spruch {
  font-family: var(--schrift-display);
  font-style: italic;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  font-size: var(--t-m);
  color: var(--gold-800);
  margin: 0;
}

/* Zwei Spalten ab Tablet — eine gedruckte Karte liest sich so besser */
@media (min-width: 58rem) {
  .kat__liste { columns: 2; column-gap: var(--raum-6); }
  .kat__liste .gericht { break-inside: avoid; }
}

/* ── Hinweisblock ───────────────────────────────────────────── */
.hinweis {
  background: var(--creme-2);
  border-left: 3px solid var(--gold-600);
  padding: var(--raum-3);
  margin-top: var(--raum-5);
  font-size: var(--t-s);
}
.hinweis strong { display: block; margin-bottom: 0.3rem; }

/* ── Textseiten (Impressum, Datenschutz) ────────────────────── */
.text-seite { padding-block: var(--raum-5) var(--raum-6); }
.text-seite__inhalt { max-width: 44rem; }
.text-seite h2 {
  font-size: var(--t-l);
  margin-top: var(--raum-5); margin-bottom: var(--raum-2);
}
.text-seite h2:first-child { margin-top: 0; }
.text-seite h3 {
  font-family: var(--schrift-text); font-size: var(--t-m);
  font-weight: 700; margin-top: var(--raum-3); margin-bottom: 0.3rem;
}
.text-seite p, .text-seite li { color: var(--text-leise); }
.text-seite a { color: var(--wein-700); text-decoration: underline; text-underline-offset: 0.2em; }
.text-seite ul { padding-left: 1.2rem; }
.text-seite li { margin-bottom: 0.4rem; }

/* Noch zu ergänzende Angaben deutlich sichtbar machen */
.fehlt {
  background: #ffe8b0; color: #6b4a00;
  padding: 0.1em 0.45em; border-radius: 2px;
  font-weight: 700; font-size: 0.92em;
  border: 1px dashed #b98a1a;
}

/* ── Druckansicht der Speisekarte ───────────────────────────── */
@media print {
  .kopf, .kategorien, .tel-balken, .fuss, .seitenkopf .zierde { display: none; }
  .seitenkopf { background: none; color: #000; padding-block: 0 1rem; }
  .seitenkopf p { color: #444; }
  .kat { padding-block: 1.2rem 0; break-inside: avoid; }
  .kat__liste { columns: 2; column-gap: 12mm; }
  .gericht { break-inside: avoid; padding-block: 0.35rem; }
  .gericht__name { font-size: 11pt; }
  .gericht__zutaten { font-size: 8pt; }
  .gericht__preis { font-size: 10pt; color: #000; }
  body { font-size: 10pt; background: #fff; color: #000; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}

/* ═══════════════════════════════════════════════════════════════
   BÜTTENKANTE  ·  wo Papier auf Farbe trifft
   ═══════════════════════════════════════════════════════════════

   Zwischen Creme und Weinrot lag vorher ein weicher Verlauf. Der war
   falsch: über 75 px hinweg mischt der Browser die beiden Farben zu
   einem staubigen Altrosa (#a3807f). Das sieht nicht nach Übergang
   aus, sondern nach schlechtem Druck — verwaschen.

   Weiche Verläufe zwischen zwei kräftigen Farben sind fast immer ein
   Fehler. Gute Seiten lösen Kanten NICHT durch Weichzeichnen, sondern
   indem die Kante selbst zu einem gestalteten Element wird.

   Hier ist das die Büttenkante: der ausgefranste Rand von
   handgeschöpftem Papier. Er passt, weil die ganze Gestaltung aus
   der gedruckten Karte kommt — Leinenstruktur aus der Logo-Datei,
   Sprüche von der Karte. Die farbigen Flächen liegen jetzt UNTER
   dem Papier, und das Papier reißt darüber aus.

   Die Kante ist gestochen scharf. Nichts ist mehr verwaschen.

   Die Form: fünf Wellenlängen übereinander plus ein feiner
   Faserversatz. Eine reine Welle sähe nach Comic aus — Papier franst
   in zwei Größenordnungen aus, grob vom Schöpfrahmen und fein durch
   die Fasern. Erzeugt von "werkzeug/buettenkante.mjs", kachelt
   nahtlos über 1200 px.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --buetten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 16' preserveAspectRatio='none'%3E%3Cpath d='M0,-1H1200V9.2L1197,8.6L1194,8.6L1191,8.9L1188,9.4L1185,8.6L1182,9.6L1179,7.9L1176,7.9L1173,9.4L1170,9.6L1167,9.9L1164,8.9L1161,10L1158,10.1L1155,10.5L1152,9.5L1149,10.3L1146,8.7L1143,9L1140,7.8L1137,7.6L1134,8.8L1131,7.9L1128,5.8L1125,6.2L1122,6.5L1119,5.2L1116,5.8L1113,5.1L1110,4.6L1107,4.7L1104,4.7L1101,4.6L1098,4.7L1095,6L1092,4.5L1089,3.6L1086,3.8L1083,3.9L1080,5L1077,5L1074,4.6L1071,6.1L1068,5.8L1065,5.4L1062,5.3L1059,4.8L1056,7.2L1053,7.4L1050,7.6L1047,7.4L1044,7.3L1041,8.2L1038,7L1035,6.3L1032,7.2L1029,5.8L1026,5.2L1023,5.7L1020,6.6L1017,6.4L1014,6.2L1011,5.2L1008,6.2L1005,6.6L1002,6L999,7L996,8.1L993,6.9L990,7.3L987,7L984,7.6L981,7.7L978,7.2L975,7.2L972,7.5L969,7.8L966,7.9L963,7.8L960,6.9L957,8.7L954,6.6L951,6.5L948,7.4L945,7L942,6.1L939,5.9L936,6.1L933,6.6L930,7.3L927,6.1L924,5.8L921,6.1L918,4.6L915,5L912,6.5L909,6.9L906,6.8L903,6.4L900,6.7L897,7.5L894,9.5L891,9.5L888,8.9L885,8.4L882,9.4L879,9L876,9.6L873,10.1L870,9.8L867,10L864,10.5L861,9.8L858,10.7L855,8.8L852,9.6L849,9.7L846,11.4L843,10.9L840,10.5L837,9.9L834,9.6L831,10.6L828,10.3L825,10.2L822,9.4L819,9.3L816,8.3L813,8L810,8.5L807,9.9L804,10L801,8.1L798,8.2L795,8.9L792,8.6L789,9L786,10.5L783,10L780,9.8L777,8.2L774,8.5L771,8.4L768,6.9L765,6.5L762,7L759,7.4L756,7.3L753,5.6L750,5.3L747,6.3L744,5.5L741,4.9L738,4.6L735,5.2L732,6.7L729,5.8L726,6.5L723,6.3L720,6.7L717,6.4L714,4.8L711,4.7L708,6.4L705,6.5L702,6.7L699,6L696,8.4L693,8L690,7.3L687,8.7L684,7.7L681,8.7L678,7.2L675,8.2L672,7.2L669,8.5L666,7.1L663,6.9L660,7L657,7.3L654,6.9L651,4.6L648,5.6L645,5.6L642,5.7L639,6.1L636,7L633,5.7L630,6.7L627,6.8L624,6L621,5L618,6.6L615,6.1L612,4.6L609,6.1L606,5.3L603,5.9L600,5.2L597,5.8L594,4.7L591,6.6L588,5.8L585,6.7L582,5.3L579,7.1L576,6.7L573,6.1L570,5.1L567,6L564,6.3L561,4.4L558,4.8L555,4.8L552,4.6L549,6.4L546,7L543,5.8L540,5.7L537,6.2L534,7.4L531,8L528,9.2L525,8.7L522,10.3L519,8.9L516,10.1L513,8.9L510,10.5L507,8.8L504,8.8L501,9.2L498,9.8L495,10.2L492,9.3L489,11.5L486,11.3L483,10.3L480,9.5L477,10.3L474,10.7L471,8.8L468,9.2L465,10.5L462,8.6L459,8.9L456,9L453,9.3L450,8L447,6.8L444,8.1L441,8.7L438,8.4L435,9.1L432,9.5L429,10.1L426,9.2L423,8.7L420,8L417,8.1L414,9L411,9L408,9.1L405,9.2L402,8.3L399,9.1L396,7.6L393,6.7L390,6.5L387,6.7L384,6.2L381,8L378,7.8L375,8L372,7.2L369,8.7L366,7.4L363,7.9L360,6.9L357,7.4L354,7.8L351,6.5L348,8.3L345,6.9L342,8.9L339,8.9L336,8.4L333,8.5L330,8L327,8.5L324,8.8L321,8.2L318,9.1L315,8.6L312,9.1L309,8.3L306,9.1L303,7.9L300,8.1L297,7.2L294,7.2L291,5.8L288,5.6L285,6.5L282,6.1L279,4.9L276,5.6L273,5.2L270,5.9L267,5.9L264,4.9L261,4.5L258,5.1L255,4.6L252,4.5L249,5.1L246,4.6L243,3.3L240,4.7L237,3.3L234,4.4L231,5.4L228,6.3L225,6.3L222,6.2L219,6.2L216,7L213,5L210,6L207,5.8L204,4.9L201,6.2L198,6.1L195,6.8L192,6.2L189,5.5L186,5.7L183,5.9L180,6.1L177,6.9L174,6.7L171,8L168,8L165,8.7L162,7.4L159,8.7L156,9.4L153,7.6L150,8.1L147,8L144,9.1L141,8.4L138,9L135,9.7L132,8.8L129,8.7L126,9.9L123,9.3L120,8.6L117,9.8L114,9.1L111,9.7L108,8.6L105,8.2L102,9.4L99,7.7L96,8.4L93,6.4L90,5.9L87,6.2L84,6.5L81,6.3L78,6.2L75,6.9L72,7.4L69,7.2L66,7.7L63,8.6L60,7.6L57,7.6L54,9.8L51,8.7L48,8.6L45,8.6L42,10.2L39,8.6L36,8.7L33,9.3L30,9.5L27,8L24,7.9L21,9.4L18,9.7L15,9L12,9.9L9,9.3L6,8.8L3,9.8L0,9.2Z' fill='%23f7f3ea'/%3E%3C/svg%3E");
  --buetten-hoehe: 16px;
}

.teil--wein, .teil--dunkel, .spruch--wein {
  position: relative;
  isolation: isolate;
}

.teil--wein::before,   .teil--wein::after,
.teil--dunkel::before, .teil--dunkel::after,
.spruch--wein::before, .spruch--wein::after,
.auf::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--buetten-hoehe);
  background-image: var(--buetten);
  background-repeat: repeat-x;
  /* Feste Größe: das Papier soll auf jedem Bildschirm gleich grob
     ausfransen. Skaliert man die Kachel mit der Fensterbreite, wirkt
     sie am Handy fein und am großen Schirm grob. */
  background-size: 1200px var(--buetten-hoehe);
  pointer-events: none;
  z-index: 1;
}

/* Ein Pixel über die Kante hinaus. Die Abschnitte haben durch die
   fließenden Abstände Bruchteil-Höhen; sonst bliebe an der Naht eine
   dünne dunkle Zeile stehen. */
.teil--wein::before, .teil--dunkel::before, .spruch--wein::before {
  top: -1px;
}

/* Unterkante: dieselbe Kachel gespiegelt. Gedreht statt zweiter
   Datei — so gibt es nur eine Form zu pflegen, und durch die
   Drehung um beide Achsen wiederholt sich nichts sichtbar. */
.teil--wein::after, .teil--dunkel::after, .spruch--wein::after,
.auf::before {
  bottom: -1px;
  transform: scale(-1);
}

/* Inhalt über die Kante heben */
.teil--wein > .mitte, .teil--dunkel > .mitte,
.spruch--wein > .mitte, .auf > .mitte {
  position: relative;
  z-index: 2;
}

/* Zwei gleichfarbige Flächen hintereinander: dort ist nichts zu
   trennen, jede Kante wäre erfunden. */
.teil--wein + .teil--wein::before,
.spruch--wein + .teil--wein::before,
.teil--wein + .spruch--wein::before { display: none; }

/* Schiefer trifft auf Weinrot.

   Gerissenes Papier hilft hier nicht: die Rissform ist cremefarben
   gefüllt, und ein cremefarbener Streifen zwischen zwei dunklen
   Flächen wäre ein Fremdkörper.

   Eine harte Kante wirkt dort aber wie ein Schnittfehler — eine
   schnurgerade Linie, während jede andere Kante der Seite gerissen
   ist. Solche Ausnahmen lassen eine Gestaltung billig wirken.

   Lösung: dieselbe Rissform, aber als Maske statt als Bild. Die
   Farbe kommt dann aus dem Hintergrund, und die obere Fläche reißt
   in ihrer eigenen Farbe über die untere. Kostet keine zusätzliche
   Datei — es ist dieselbe Form.

   Ohne Maskenunterstützung bleibt die harte Kante. Das ist kein
   Schaden, nur weniger fein. */
.teil--dunkel + .teil--wein::before,
.teil--wein + .teil--dunkel::before { display: none; }

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .teil--dunkel + .teil--wein::before,
  .teil--wein + .teil--dunkel::before {
    display: block;
    background-image: none;
    -webkit-mask-image: var(--buetten);
            mask-image: var(--buetten);
    -webkit-mask-size: 1200px var(--buetten-hoehe);
            mask-size: 1200px var(--buetten-hoehe);
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
  }
  .teil--dunkel + .teil--wein::before { background-color: var(--schiefer-900); }
  .teil--wein + .teil--dunkel::before { background-color: var(--wein-700); }
}

.teil--dunkel:has(+ .teil--wein)::after,
.teil--wein:has(+ .teil--dunkel)::after,
.teil--wein:has(+ .teil--wein)::after,
.spruch--wein:has(+ .teil--wein)::after,
.teil--wein:has(+ .spruch--wein)::after,
.teil--wein:has(+ .fuss)::after { display: none; }

/* Die letzte weinrote Fläche geht in die dunkle Fußzeile über */
main > .teil--wein:last-child::after { display: none; }

.auf { position: relative; }


/* Spruch von der gedruckten Karte, als Unterzeile zur Rubrik.
   Steht er allein, versteht ihn niemand — die Rubrik gehört darüber. */
.kartenspruch {
  font-family: var(--schrift-display);
  font-style: italic;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  font-size: var(--t-m);
  color: color-mix(in srgb, var(--creme) 76%, transparent);
  margin: 0 0 var(--raum-3);
}

/* ═══════════════════════════════════════════════════════════════
   SEITENWECHSEL
   ═══════════════════════════════════════════════════════════════

   Von der Startseite zur Speisekarte blitzte es bisher hart um:
   weiß, dann die neue Seite. Das ist der Moment, in dem eine
   statische Seite als "nur eine Ansammlung von Dateien" auffliegt.

   Zwei Zeilen beheben das. Der Browser blendet die alte Ansicht in
   die neue über, die Kopfzeile bleibt dabei stehen. Kein
   JavaScript, kein Zwischenspeicher, keine Abhängigkeit — es ist
   eine eingebaute Browserfunktion.

   Browser ohne Unterstützung (derzeit Firefox) verhalten sich
   exakt wie bisher. Es kann also nichts kaputtgehen.

   Bewusst NICHTS sonst animiert: Die Seite hat bereits Einblendungen
   beim Scrollen, einen gestaffelten Auftakt und Rückmeldung an allen
   Knöpfen. Mehr Bewegung macht eine Restaurantseite nicht besser,
   sondern unruhig — und Unruhe ist genau das, wonach Baukastenseiten
   aussehen.
   ═══════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

/* Die Kopfzeile ist auf allen Seiten dieselbe. Ohne Namen würde sie
   mit übergeblendet und dabei kurz flackern; mit Namen erkennt der
   Browser sie wieder und lässt sie einfach stehen. */
.kopf { view-transition-name: kopf; }

/* Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat,
   bekommt den Wechsel ohne Überblendung. Die Pseudo-Elemente des
   Seitenwechsels werden vom "*" der allgemeinen Regel weiter oben
   NICHT erfasst — sie brauchen eine eigene Zeile. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ALLERGEN-KENNZEICHNUNG
   ═══════════════════════════════════════════════════════════════
   Eingetragen von allergene/eintragen.mjs.

   Sehende bekommen die kurzen Codes, Screenreader-Nutzer die
   ausgeschriebenen Namen. "A, G" allein waere fuer sie wertlos —
   die Legende steht am Seitenende, und dorthin springt beim
   Vorlesen niemand mitten im Gericht.
   ═══════════════════════════════════════════════════════════════ */

/* Der Aussenabstand der Zutatenzeile faellt mit dem der Kennzeichnung
   zusammen (Margin Collapsing) - es bleibt der groessere von beiden,
   und die Codes rutschen weit weg. Deshalb den unteren Abstand der
   Zutaten wegnehmen, wenn eine Kennzeichnung folgt. */
.gericht__zutaten:has(+ .gericht__kennz) { margin-bottom: 0; }

.gericht__kennz {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold-800);
  font-variant-numeric: tabular-nums;
}
.teil--wein .gericht__kennz,
.teil--dunkel .gericht__kennz { color: var(--gold-500); }

.legende {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.35rem 1.5rem;
  margin: 0.75rem 0 0;
}
.legende > div { display: flex; gap: 0.6rem; align-items: baseline; }
.legende dt {
  font-weight: 700;
  /* NICHT --gold-800: das Bronze erreicht auf dem getoenten Grund des
     Hinweiskastens nur 4,4:1 und faellt damit unter die Grenze von
     4,5:1. Auf Creme reicht es, hier nicht. Gemessen mit axe-core. */
  color: var(--wein-700);
  min-width: 1.4rem; font-variant-numeric: tabular-nums;
}
.legende dd { margin: 0; }
.legende__fuss { margin-top: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════
   WINDOWS-KONTRASTMODUS
   ═══════════════════════════════════════════════════════════════

   Wer in Windows "Kontrastdesign" einschaltet, bekommt vom System
   feste Farben aufgezwungen: alle Hintergründe dieselbe Farbe, aller
   Text dieselbe. Das ist gewollt — aber zwei Dinge der Seite ergeben
   dann keinen Sinn mehr.

   Geprüft mit forced-colors: active. Der Rest der Seite hält sich
   gut: Text lesbar, Knöpfe umrandet, Fotos unverändert.
   ═══════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {
  /* Die Büttenkante trennt Creme von Weinrot. Im Kontrastmodus sind
     beide Flächen dieselbe Systemfarbe — die Kante hätte nichts mehr
     zu trennen und stand als weißer Riss zwischen zwei schwarzen
     Flächen. Sah nach Fehler aus. */
  .teil--wein::before,   .teil--wein::after,
  .teil--dunkel::before, .teil--dunkel::after,
  .spruch--wein::before, .spruch--wein::after,
  .auf::before {
    background-image: none;
    /* Stattdessen eine Linie: Ohne die Farbflächen geht sonst
       verloren, dass hier ein neuer Abschnitt beginnt. */
    height: 0;
    border-top: 1px solid;
  }

  /* Ein Punkt, der nur aus einer Hintergrundfarbe besteht, ist im
     Kontrastmodus unsichtbar — Hintergründe werden alle gleich.
     Mit Rahmen bleibt er sichtbar. Die Öffnungszeit steht ohnehin
     als Text daneben, es geht also keine Information verloren. */
  .status__punkt { border: 1px solid currentColor; }
}