/* =========================================================
   Musterpizzeria — Döner & Pizzeria, Musterbach
   Design tokens, reset, base typography
   ========================================================= */

/* Die Schriften liegen als Dateien im Ordner "schriften/" und werden NICHT
   von Google geladen. Hier stand bis 14.08.2026 ein @import auf
   fonts.googleapis.com — damit ging bei jedem Seitenaufruf die IP-Adresse
   des Besuchers an einen fremden Server, bevor er irgendetwas zusagen
   konnte. Auf einer öffentlich verlinkten Seite ist das angreifbar.
   Siehe schriften.css. Nicht zurückändern. */
@import url('schriften.css');

:root {
  /* ---- Farbwelt „Abend" ----
     Durchgehend dunkler Grund, warmes Orange als Leitfarbe, Messing nur
     als Vorzeile. Von Yanick am 14.08.2026 aus zwei Entwürfen gewählt
     (der andere: „Basilikum", hell mit Grün). Grund: die Seite beginnt
     mit einem dunklen Kopfbild, dunkel läuft nahtlos weiter.
     Kein Farbpaar unter 4,5:1 — Rechenweg in der Tagesnotiz. */
  --color-bg: #14100D;
  --color-bg-alt: #1C1714;
  --color-surface: #231D19;
  --color-ink: #F4EBE0;
  --color-ink-soft: #BDB0A4;
  /* Am 14.08.2026 von #8E8074 aufgehellt. Der alte Wert kam auf dem
     hellsten Untergrund (--color-surface, die Karte des Reservierungs-
     formulars) nur auf 4,35:1 — geprüft war er gegen --color-bg-alt.
     Jetzt 4,71:1 auf der Karte, 5,36:1 auf dem Grund. */
  --color-ink-faint: #948679;

  /* Die Leitfarbe ist hier hell, damit sie auf dunklem Grund lesbar
     bleibt. Deshalb trägt die Schaltfläche dunkle statt weißer Schrift,
     siehe --color-auf-primary. „dark" ist hier die HELLERE Fassung
     (Zustand beim Überfahren), sonst verschwände sie im Grund. */
  --color-primary: #E4693F;
  --color-primary-dark: #F0855E;
  --color-primary-light: #F0855E;
  --color-primary-tint: #2B1B14;

  --color-accent: #9BB07E;
  --color-accent-dark: #B3C599;

  --color-gold: #D9AE5F;
  --color-gold-light: #EBCC93;

  --color-dark: #0C0A08;
  --color-dark-alt: #171210;
  --color-dark-ink: #F4EBE0;

  --color-border: rgba(var(--rgb-ink), 0.12);
  --color-border-strong: rgba(var(--rgb-ink), 0.22);

  /* Schrift auf farbigen Schaltflächen. Eigenes Token, weil eine helle
     Leitfarbe dort dunkle statt weißer Schrift braucht. */
  --color-auf-primary: #1A0F09;

  /* Untergrund der mitfahrenden Kopfzeile, sobald gescrollt wurde */
  --color-kopf-bg: rgba(var(--rgb-bg), 0.82);

  /* Ausklang des Kopfbildes nach unten: muss den Ton des Abschnitts
     darunter treffen, sonst entsteht dort eine sichtbare Kante. */
  --color-hero-ausklang: var(--color-dark);

  /* Rohwerte für halbdurchsichtige Ableitungen. Ohne diese Tokens
     schlägt ein Farbwechsel nur zur Hälfte durch — die Werte standen
     bis 14.08.2026 an 36 Stellen fest im Stylesheet. */
  --rgb-ink: 244, 235, 224;
  --rgb-bg: 20, 16, 13;
  --rgb-primary: 228, 105, 63;
  --rgb-accent: 155, 176, 126;
  --rgb-dark-ink: 244, 235, 224;
  --rgb-schatten: 0, 0, 0;
  --rgb-hero-schleier: 20, 11, 5;
  --rgb-hero-fuss: 33, 18, 8;
  --rgb-dampf: 255, 246, 232;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.75rem;
  --fs-4xl: 4.75rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 140px;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* ---- Shadow (warm-tinted) ---- */
  --shadow-sm: 0 2px 8px rgba(var(--rgb-schatten), 0.08);
  --shadow-md: 0 12px 32px -8px rgba(var(--rgb-schatten), 0.18);
  --shadow-lg: 0 24px 64px -12px rgba(var(--rgb-schatten), 0.28);
  --shadow-glow: 0 8px 28px -4px rgba(var(--rgb-primary), 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --container-max: 1220px;
  --header-h: 84px;

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-bg);
  min-height: 100dvh;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  /* Lange deutsche Wörter müssen in großer Schrift umbrechen dürfen.
     „Datenschutzerklärung" war bei 44 Pixeln 457 Pixel breit und hat die
     Seite auf einem 390 Pixel breiten Handy auf 481 Pixel aufgezogen —
     also waagerechtes Scrollen auf der ganzen Seite. Am 14.08.2026
     gemessen. „hyphens" trennt sauber nach Silben (das lang="de" am
     <html> sagt dem Browser, nach welchen Regeln), „overflow-wrap" ist
     der Notnagel, falls eine Schrift keine Trennmuster mitbringt. */
  hyphens: auto;
  overflow-wrap: break-word;
}

table { border-collapse: collapse; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-xl); }
}

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-md);
  z-index: 1000;
  background: var(--color-primary);
  color: var(--color-auf-primary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-md);
}

:focus-visible {
  outline: 2.5px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

section { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Sichtbar nur fuer Vorleseprogramme. Wird fuer Ueberschriften gebraucht,
   die auf dem Bildschirm schon anders dastehen — etwa die Kategorienamen
   der Speisekarte, die als Reiter zu sehen sind. Ohne sie sprang die
   Gliederung dort von h1 direkt auf h3.
   display:none waere falsch, das nimmt sie auch dem Vorleseprogramm. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.6em;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-auf-primary);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-border-strong);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
}
.btn-ghost:hover { color: var(--color-primary); }

.btn-text {
  background: none;
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5em 0;
}
.btn-text:hover { color: var(--color-primary); }

.btn-lg { padding: 1.05em 2.1em; font-size: var(--fs-base); }
.btn-sm { padding: 0.6em 1.2em; font-size: var(--fs-xs); }
.btn-block { width: 100%; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-md);
  transition: padding var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-kopf-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: -1;
}
.site-header.is-scrolled {
  padding-block: var(--space-sm);
  box-shadow: var(--shadow-sm);
}
.site-header.is-scrolled::before { opacity: 1; }

/* Light header while over the dark hero image (top of page) */
.site-header:not(.is-scrolled) .brand { color: var(--color-dark-ink); }
.site-header:not(.is-scrolled) .brand-mark { color: var(--color-primary-light); }
.site-header:not(.is-scrolled) .btn-ghost { color: var(--color-dark-ink); }
.site-header:not(.is-scrolled) .btn-ghost:hover { color: var(--color-gold-light); }
.site-header:not(.is-scrolled) .nav-toggle span { background: var(--color-dark-ink); }
@media (min-width: 1024px) {
  .site-header:not(.is-scrolled) .main-nav a { color: var(--color-dark-ink); }
  .site-header:not(.is-scrolled) .main-nav a::after { background: var(--color-gold-light); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-ink);
}
/* Markenname bleibt einzeilig, sonst kippt die Kopfzeile */
.brand-text { white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; color: var(--color-primary); flex: none; }
.brand-mark svg { width: 100%; height: 100%; }

.main-nav ul {
  display: none;
}
@media (min-width: 1024px) {
  .main-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
  .main-nav a {
    position: relative;
    font-weight: 600;
    font-size: var(--fs-sm);
    padding-block: var(--space-3xs);
    white-space: nowrap;
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: right var(--dur-base) var(--ease-out);
  }
  .main-nav a:hover::after { right: 0; }
}

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
/* Unter 640px sitzt der Anruf-Knopf schon unten rechts als .mobile-fab,
   die Telefonschaltflaeche im Kopf waere doppelt und draengt das
   Menuesymbol aus dem Bild. */
.header-call { display: none; }
.header-call span { display: none; }
@media (min-width: 640px) {
  .header-call { display: inline-flex; }
  .header-call span { display: inline; }
}
.header-order span { display: none; }
@media (min-width: 480px) { .header-order span { display: inline; } }
.header-order { padding: 0.7em 1.3em; font-size: var(--fs-xs); }
@media (min-width: 640px) { .header-order { padding: 0.85em 1.6em; font-size: var(--fs-sm); } }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  /* Muss über dem geöffneten Menü liegen. Die Navigation ist ein Kind der
     Kopfzeile und hat dort z-index 99 — ohne diese beiden Zeilen deckt sie
     im geöffneten Zustand die eigene Schließen-Schaltfläche zu, und das
     Menü ließ sich nur noch mit Esc oder durch Anklicken eines Links
     schließen. Am 14.08.2026 gefunden. */
  position: relative;
  z-index: 101;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Mobile nav overlay */
@media (max-width: 1023.98px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
    z-index: calc(var(--z-nav) - 1);
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    text-align: center;
  }
  .main-nav a {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--color-dark-ink);
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-dark);
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  animation: hero-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--rgb-hero-schleier), 0.9) 0%, rgba(var(--rgb-hero-schleier), 0.66) 40%, rgba(var(--rgb-hero-schleier), 0.22) 72%, rgba(var(--rgb-hero-schleier), 0.3) 100%),
    linear-gradient(180deg, rgba(var(--rgb-hero-fuss), 0.5) 0%, rgba(var(--rgb-hero-fuss), 0) 28%, rgba(var(--rgb-hero-fuss), 0) 70%, var(--color-hero-ausklang) 100%);
}
@media (max-width: 767.98px) {
  .hero-img { object-position: 68% center; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(var(--rgb-hero-schleier), 0.72) 0%, rgba(var(--rgb-hero-schleier), 0.55) 45%, rgba(var(--rgb-hero-schleier), 0.62) 82%, var(--color-hero-ausklang) 100%);
  }
}

/* ---- Aufsteigender Dampf ueber den Speisen im Hero ----
   Liegt ueber dem Verlauf, aber hinter dem Text. Reines CSS, kein Bild und
   kein JavaScript.

   AUFBAU (am 14.08.2026 neu gemacht, vorher eine Wolke je Speise):
   Drei Quellen, je ein flacher Schleier und drei Faeden. Warum so:

   * EIN Faden je Speise liest sich als Wolke, die auftaucht und wieder
     verschwindet. Erst drei zeitversetzte Faeden ergeben eine Saeule, die
     nie ganz abreisst.
   * Der Faden traegt ZWEI Bewegungen, und die stecken in zwei Ebenen:
     das Element selbst steigt und streckt sich, sein ::before wiegt sich
     seitlich. Beide haben verschiedene Dauern, die kein gemeinsames
     Vielfaches haben - dadurch wiederholt sich das Bild praktisch nie.
     In EINER Ebene ginge das nicht, transform kennt nur einen Ablauf.
   * Beim Steigen waechst die Hoehe staerker als die Breite (scale3d) und
     das Element schert leicht. Dampf zieht sich in die Laenge, er blaeht
     sich nicht gleichmaessig auf wie ein Ballon - genau das sah vorher
     nach Rauchwolke aus.
   * Der Schleier ist der flache Dunst direkt ueber der Speise. Ohne ihn
     beginnt der Dampf sichtbar aus dem Nichts.
   * Die Weichzeichnung ist je Faden verschieden und FEST. Sie mitzu-
     animieren waere naeher an der Wirklichkeit, kostet aber in jedem
     Einzelbild eine neue Weichzeichnung - das ruckelt. Die Aufloesung
     entsteht stattdessen aus Groesse und Deckkraft.

   Die Staerke steckt in --dampf-kraft. Hoeher als 0.5 kippt es ins
   Effekthascherische. */
.dampf {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  --dampf-kraft: 0.34;
}

/* Rechner: Pide, Pizza und Doenerteller liegen rechts der Mitte.
   Die Quelle ist der Fussabdruck der Speise, nicht die Wolke - die Faeden
   steigen daraus auf und duerfen darueber hinausragen. */
.dampf-quelle {
  position: absolute;
  display: block;
}
.dampf-quelle--pide   { left: 57%; top: 30%; width: 12%; height: 24%; --quelle-versatz: 0s;    }
.dampf-quelle--pizza  { left: 71%; top: 39%; width: 14%; height: 27%; --quelle-versatz: -4.7s; }
/* Der Doenerteller liegt am naechsten am Text. Weiter links geriete der
   Dunst hinter den Untertitel, dessen Kontrast ohnehin knapp ist. */
.dampf-quelle--doener { left: 51%; top: 38%; width: 10%; height: 22%; --quelle-versatz: -2.9s; }

/* Der flache Dunst unmittelbar ueber der Speise. Atmet nur leicht. */
.dampf-schleier {
  position: absolute;
  left: -25%;
  bottom: -6%;
  width: 150%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 60%,
              rgba(var(--rgb-dampf), calc(var(--dampf-kraft) * 0.5)) 0%,
              rgba(var(--rgb-dampf), 0) 72%);
  mix-blend-mode: screen;
  filter: blur(12px);
  will-change: transform, opacity;
  animation: dampf-atmen 7s var(--ease-in-out) infinite alternate;
  animation-delay: var(--quelle-versatz);
}
@keyframes dampf-atmen {
  0%   { opacity: 0.55; transform: scale3d(0.92, 0.85, 1); }
  100% { opacity: 0.95; transform: scale3d(1.08, 1.12, 1); }
}

/* Der Faden: steigt, streckt sich, loest sich auf. */
.dampf-faden {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--faden-breite);
  height: 100%;
  /* --faden-seite versetzt die Faeden gegeneinander. Stuenden sie alle auf
     derselben Achse, ergaebe das eine Saeule statt einer Schwade. */
  margin-left: calc(var(--faden-breite) / -2 + var(--faden-seite));
  opacity: 0;
  will-change: transform, opacity;
  animation: dampf-steigen var(--faden-dauer) linear infinite;
  animation-delay: calc(var(--faden-versatz) + var(--quelle-versatz));
}
/* Die zweite Ebene: das seitliche Wiegen, unabhaengig vom Steigen.
   ZWEI Farbverlaeufe uebereinander, der zweite kleiner und aus der Mitte
   geschoben. Ein einzelner mittiger Verlauf ergibt ein sauberes Oval mit
   dem hellsten Punkt genau in der Mitte - das las sich als Wattebausch.
   Der zweite Verlauf verschiebt die dichteste Stelle aus der Achse und
   macht die Schwade unsymmetrisch. */
.dampf-faden::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 46% 54% 40% 60% / 62% 58% 42% 38%;
  /* --faden-deckung nimmt die breiten, hoch stehenden Faeden zurueck. Mit
     gleicher Staerke wie die schmalen wurden sie zu einer hellen Flaeche
     vor der dunklen Wand - das las sich als Nebel, nicht als Dampf. */
  background:
    radial-gradient(38% 30% at var(--faden-kern-x) var(--faden-kern-y),
                    rgba(var(--rgb-dampf), calc(var(--dampf-kraft) * var(--faden-deckung) * 0.8)) 0%,
                    rgba(var(--rgb-dampf), 0) 70%),
    radial-gradient(46% 54% at 50% 76%,
                    rgba(var(--rgb-dampf), calc(var(--dampf-kraft) * var(--faden-deckung))) 0%,
                    rgba(var(--rgb-dampf), calc(var(--dampf-kraft) * var(--faden-deckung) * 0.38)) 42%,
                    rgba(var(--rgb-dampf), 0) 78%);
  mix-blend-mode: screen;
  filter: blur(var(--faden-weiche));
  will-change: transform;
  animation: dampf-wiegen var(--faden-wiegen) var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--faden-versatz) * 0.6);
}

@keyframes dampf-steigen {
  0%   { transform: translate3d(0, 34%, 0) scale3d(0.5, 0.42, 1) skewX(0deg);   opacity: 0; }
  9%   { opacity: 0.9; }
  34%  { transform: translate3d(0, -6%, 0) scale3d(0.82, 1.05, 1) skewX(-3deg); opacity: 0.78; }
  62%  { transform: translate3d(0, -48%, 0) scale3d(1.2, 1.7, 1) skewX(2deg);   opacity: 0.4; }
  100% { transform: translate3d(0, -104%, 0) scale3d(1.85, 2.5, 1) skewX(5deg); opacity: 0; }
}
@keyframes dampf-wiegen {
  0%   { transform: translate3d(-16%, 0, 0) rotate(-5deg); }
  100% { transform: translate3d(16%, 0, 0) rotate(6deg); }
}

/* Die drei Faeden je Quelle. Die Dauern (9,5 / 12,7 / 16,3) und die
   Wiegezeiten (3,7 / 5,1 / 6,9) sind absichtlich krumm: mit runden Zahlen
   treffen sich die Faeden regelmaessig und der Takt wird sichtbar. */
.dampf-faden--a {
  --faden-dauer:  9.5s; --faden-versatz: -0.4s; --faden-wiegen: 3.7s;
  --faden-weiche: 9px;  --faden-breite: 58%; --faden-seite: -9%;
  --faden-kern-x: 38%;  --faden-kern-y: 62%; --faden-deckung: 1;
}
.dampf-faden--b {
  --faden-dauer: 12.7s; --faden-versatz: -5.3s; --faden-wiegen: 5.1s;
  --faden-weiche: 13px; --faden-breite: 72%; --faden-seite: 7%;
  --faden-kern-x: 61%;  --faden-kern-y: 55%; --faden-deckung: 0.82;
}
.dampf-faden--c {
  --faden-dauer: 16.3s; --faden-versatz: -9.9s; --faden-wiegen: 6.9s;
  --faden-weiche: 19px; --faden-breite: 94%; --faden-seite: -3%;
  --faden-kern-x: 45%;  --faden-kern-y: 48%; --faden-deckung: 0.55;
}

/* Auf dem Handy aus: dort liegen Pizza und Pide hinter Text und
   Schaltflaechen. Heller Dunst genau an dieser Stelle senkt den ohnehin
   knappen Kontrast des Untertitels (gemessen 4,27 zu 1). */
@media (max-width: 767.98px) {
  .dampf { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dampf { display: none; }
}

.hero-content { padding-block: var(--space-2xl); }
.hero .eyebrow { color: var(--color-gold-light); }
.hero .eyebrow::before { background: var(--color-gold-light); }
.hero-title {
  font-size: clamp(var(--fs-2xl), 7vw, var(--fs-4xl));
  margin-bottom: var(--space-md);
  color: var(--color-dark-ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.hero-title span { color: var(--color-primary-light); font-style: italic; }
.hero-subtitle {
  max-width: 44ch;
  font-size: var(--fs-md);
  color: rgba(var(--rgb-dark-ink), 0.88);
  margin-bottom: var(--space-lg);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.hero-subtitle strong { color: var(--color-dark-ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.hero .btn-outline { border-color: rgba(var(--rgb-dark-ink), 0.45); color: var(--color-dark-ink); }
.hero .btn-outline:hover { border-color: var(--color-gold-light); color: var(--color-gold-light); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--fs-sm); font-weight: 600; color: rgba(var(--rgb-dark-ink), 0.85); }
.hero-meta li { display: flex; align-items: center; gap: var(--space-2xs); }
.hero-meta .icon { color: var(--color-gold-light); }


/* =========================================================
   Marquee
   ========================================================= */
.marquee {
  background: var(--color-dark);
  color: var(--color-gold-light);
  overflow: hidden;
  padding-block: var(--space-md);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   Photo placeholders (decorative, replace with real photos)
   ========================================================= */
.photo-placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(var(--rgb-primary), 0.16), rgba(var(--rgb-accent), 0.14)),
    repeating-linear-gradient(135deg, rgba(var(--rgb-ink), 0.05) 0 2px, transparent 2px 14px),
    var(--color-bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  color: var(--color-ink-faint);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.photo-placeholder svg { width: 32px; height: 32px; }
.photo-placeholder span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.photo-placeholder::after {
  content: attr(data-label);
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  right: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.photo-placeholder:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.photo-placeholder:hover::after { opacity: 1; transform: translateY(0); }
.photo-placeholder--tall { aspect-ratio: 4 / 5; }

/* =========================================================
   About
   ========================================================= */
.about { padding-block: var(--space-3xl); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.about-media { position: relative; width: 100%; max-width: 380px; margin-inline: auto; }
.about-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-auf-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.3;
  box-shadow: var(--shadow-md);
  animation: spin-slow 22s linear infinite;
}
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.about-badge strong { animation: spin-slow-reverse 22s linear infinite; display: block; }
@keyframes spin-slow-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.about-content h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-lg); }
.about-content > p { color: var(--color-ink-soft); margin-bottom: var(--space-xl); max-width: 52ch; }
.about-features { display: grid; gap: var(--space-md); }
.about-features li { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
.about-features .icon { color: var(--color-primary); background: var(--color-primary-tint); border-radius: 50%; padding: 5px; width: 28px; height: 28px; flex-shrink: 0; }

@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 0.8fr 1fr; gap: var(--space-3xl); }
  .about-media { max-width: none; margin-inline: 0; }
}

/* =========================================================
   Menu / Speisekarte
   ========================================================= */
.menu { padding-block: var(--space-3xl); background: var(--color-bg-alt); }
.section-heading { max-width: 62ch; margin-bottom: var(--space-2xl); }
.section-heading h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-sm); }
.section-lede { color: var(--color-ink-soft); }

.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}
@media (max-width: 767.98px) {
  .menu-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-md));
    padding-inline: var(--space-md);
    padding-bottom: var(--space-2xs);
  }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { flex-shrink: 0; }
}
.menu-tab {
  padding: 0.7em 1.4em;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.menu-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.menu-tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-auf-primary); }

.menu-list {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 768px) { .menu-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); } }

.menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px dashed var(--color-border);
}
/* Die Gerichte laufen gestaffelt ein — aber NUR beim Wechsel der
   Kategorie, nicht beim Laden der Seite.

   Vorher lag die Bewegung auf jedem .menu-item mit fill-mode "both". Damit
   hing die Sichtbarkeit an einer Animation, und die laeuft nicht immer:
   in einem Hintergrund-Tab friert der Browser sie bei Zeit 0 ein. Wer den
   Link mit der mittleren Maustaste oeffnet, sah eine leere Speisekarte.
   Am 14.08.2026 gemessen: 0 von 21 Gerichten sichtbar, Zustand "running",
   currentTime 0, visibilityState "hidden".

   Jetzt sind die Gerichte von sich aus da. Die Klasse "wechselt" setzt
   main.js erst beim Umschalten — dann ist das Fenster zwangslaeufig
   sichtbar, weil jemand geklickt hat. "backwards" statt "both": der
   Anfangszustand gilt nur waehrend der Verzoegerung, danach zaehlt wieder
   die normale Regel. */
.js .menu-list.wechselt .menu-item {
  animation: item-in var(--dur-slow) var(--ease-out) backwards;
}
.js .menu-list.wechselt .menu-item:nth-child(2) { animation-delay:  40ms; }
.js .menu-list.wechselt .menu-item:nth-child(3) { animation-delay:  80ms; }
.js .menu-list.wechselt .menu-item:nth-child(4) { animation-delay: 120ms; }
.js .menu-list.wechselt .menu-item:nth-child(5) { animation-delay: 160ms; }
.js .menu-list.wechselt .menu-item:nth-child(6) { animation-delay: 200ms; }
.js .menu-list.wechselt .menu-item:nth-child(7) { animation-delay: 240ms; }
.js .menu-list.wechselt .menu-item:nth-child(8) { animation-delay: 280ms; }
@keyframes item-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.menu-item-info h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 700; margin-bottom: 2px; display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
.menu-item-info p { font-size: var(--fs-sm); color: var(--color-ink-soft); }
.menu-price { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--color-primary); white-space: nowrap; }

.tag {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}
.tag-veg { background: rgba(var(--rgb-accent), 0.14); color: var(--color-accent-dark); }
.tag-18 { background: rgba(var(--rgb-primary), 0.12); color: var(--color-primary-dark); }

.menu-cat-note {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  padding-block: var(--space-2xs);
}

.menu-note { margin-top: var(--space-xl); font-size: var(--fs-xs); color: var(--color-ink-faint); }
.menu-note a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.menu-note a:hover { color: var(--color-primary-dark); }

/* =========================================================
   Gallery
   ========================================================= */
.gallery { padding-block: var(--space-3xl); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   Info / Kontakt
   ========================================================= */
.info { padding-block: var(--space-3xl); background: var(--color-dark); color: var(--color-dark-ink); }
.info-grid { display: grid; gap: var(--space-2xl); align-items: start; }
.info-card h2 { font-size: var(--fs-2xl); color: var(--color-dark-ink); margin-bottom: var(--space-lg); }
.info .eyebrow { color: var(--color-gold-light); }
.info .eyebrow::before { background: var(--color-gold-light); }

.hours-table { width: 100%; margin-bottom: var(--space-lg); }
.hours-table tr { border-bottom: 1px solid rgba(var(--rgb-dark-ink), 0.12); }
.hours-table th, .hours-table td { padding-block: var(--space-2xs); text-align: left; font-weight: 500; }
.hours-table th { font-weight: 700; width: 40%; }
.hours-table tr.is-closed td { color: var(--color-primary-light); font-weight: 700; }

.contact-list { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); font-weight: 600; }
.contact-list a, .contact-list p { display: flex; align-items: center; gap: var(--space-xs); }
.contact-list .icon { color: var(--color-gold-light); }
.contact-list a:hover { color: var(--color-primary-light); }

.info-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-dark-alt);
  border: 1px solid var(--color-border);
}

/* Gezeichnete Lageskizze. Sie füllt ihre Spalte über preserveAspectRatio
   „slice": bis 13.08.2026 stand hier ein iframe mit height:100%, das ohne
   feste Höhe am Elternelement wirkungslos blieb — Spalte 674 Pixel,
   Karte 320, darunter 354 Pixel leere Fläche. */
.lageskizze {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  aspect-ratio: 640 / 460;
}

.lageskizze__grund { fill: #171F1A; }
.lageskizze__gruen { fill: rgba(var(--rgb-accent), 0.16); }
.lageskizze__block { fill: rgba(var(--rgb-dark-ink), 0.07); }
.lageskizze__platz { fill: rgba(var(--rgb-dark-ink), 0.12); }

.lageskizze__wasser {
  fill: none;
  stroke: rgba(126, 166, 190, 0.45);
  stroke-width: 12;
  stroke-linecap: round;
}

.lageskizze__strasse {
  fill: none;
  stroke: rgba(var(--rgb-dark-ink), 0.34);
  stroke-width: 16;
  stroke-linecap: round;
}
.lageskizze__strasse--klein { stroke-width: 8; stroke: rgba(var(--rgb-dark-ink), 0.2); }

.lageskizze__kern {
  fill: var(--color-primary);
  stroke: var(--color-dark);
  stroke-width: 3;
}
.lageskizze__welle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  opacity: 0.55;
  transform-origin: 286px 250px;
  animation: lageskizze-puls 3.4s var(--ease-out) infinite;
}

@keyframes lageskizze-puls {
  0%   { transform: scale(0.45); opacity: 0.7; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

.lageskizze__schrift {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  fill: rgba(var(--rgb-dark-ink), 0.55);
  letter-spacing: 0.04em;
}
.lageskizze__marke {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  fill: var(--color-dark-ink);
  letter-spacing: 0;
}
.lageskizze__leise { font-size: 14px; font-weight: 500; fill: rgba(var(--rgb-dark-ink), 0.38); }

.lageskizze__hinweis {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(var(--rgb-hero-schleier), 0.72);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(var(--rgb-dark-ink), 0.78);
}

@media (min-width: 900px) {
  .info-grid { grid-template-columns: 1fr 1fr; }
  /* .info-grid setzt align-items: start, deshalb muss die Karte ihre
     Dehnung ausdrücklich zurückfordern — sonst bleibt sie so hoch wie
     ihr Inhalt und darunter steht leere Fläche. Genau das war der
     Fehler mit 674 gegen 320 Pixel vom 13.08.2026. */
  .info-map { align-self: stretch; }
  /* Volle Spaltenhöhe statt festem Seitenverhältnis; der Zuschnitt
     übernimmt „slice" am SVG selbst. */
  .lageskizze { aspect-ratio: auto; height: 100%; }
}

/* =========================================================
   Reservation
   ========================================================= */
.reservation { padding-block: var(--space-3xl); }
.reservation-grid { display: grid; gap: var(--space-2xl); }
.reservation-intro h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-md); }
.reservation-intro p { color: var(--color-ink-soft); max-width: 48ch; margin-bottom: var(--space-lg); }

.reservation-panel { position: relative; }
.reservation-form {
  display: grid;
  gap: var(--space-md);
  background: var(--color-surface);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; gap: var(--space-md); }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .form-row--three { grid-template-columns: 1fr 1fr 1fr; } }

.form-field { display: grid; gap: var(--space-3xs); }
.form-field label { font-size: var(--fs-sm); font-weight: 700; }
.form-field .optional { font-weight: 400; color: var(--color-ink-faint); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.8em 1em;
  font-size: var(--fs-sm);
  background: var(--color-bg);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  min-height: 48px;
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236B5847' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-tint);
}
.form-error { display: none; font-size: var(--fs-xs); color: var(--color-primary-dark); font-weight: 600; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--color-primary-dark); }
.form-field.has-error .form-error { display: block; }

.form-hint { font-size: var(--fs-xs); color: var(--color-ink-faint); text-align: center; }

.reservation-success {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  animation: success-in var(--dur-slow) var(--ease-spring) both;
}
@keyframes success-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.success-check {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-auf-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-xs);
}
.success-check svg { width: 30px; height: 30px; }
.reservation-success h3 { font-size: var(--fs-xl); }
.reservation-success p { color: var(--color-ink-soft); max-width: 40ch; }
.reservation-success .btn-primary { margin-top: var(--space-sm); }

@media (min-width: 1024px) {
  .reservation-grid { grid-template-columns: 0.8fr 1fr; align-items: start; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--color-dark); color: var(--color-dark-ink); padding-top: var(--space-3xl); }
.footer-grid {
  display: grid;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(var(--rgb-dark-ink), 0.12);
}
.brand--footer { color: var(--color-dark-ink); }
.footer-brand p { margin-top: var(--space-sm); color: rgba(var(--rgb-dark-ink), 0.65); max-width: 32ch; }
.footer-col h3 { font-family: var(--font-body); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-sm); color: var(--color-gold-light); }
.footer-col ul { display: grid; gap: var(--space-2xs); color: rgba(var(--rgb-dark-ink), 0.8); font-weight: 500; }
.footer-col a:hover { color: var(--color-primary-light); }
.footer-order { margin-top: var(--space-md); border-color: rgba(var(--rgb-dark-ink), 0.3); color: var(--color-dark-ink); }
.footer-order:hover { border-color: var(--color-primary-light); color: var(--color-primary-light); }

/* Demo-Kennzeichnung in der Fußzeile. Sie ist die einzige Stelle auf der
   Seite selbst, an der die Erfindung benannt wird — deshalb abgesetzt und
   nicht in der Grauzeile darunter versteckt. */
.footer-demo {
  padding-block: var(--space-md);
  border-top: 1px solid rgba(var(--rgb-dark-ink), 0.12);
}
.footer-demo p {
  max-width: 78ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(var(--rgb-dark-ink), 0.75);
}
.footer-demo strong { color: var(--color-dark-ink); }
.footer-demo a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-demo a:hover { color: var(--color-gold-light); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  padding-block: var(--space-lg);
  font-size: var(--fs-xs);
  color: rgba(var(--rgb-dark-ink), 0.55);
  text-align: center;
}
.footer-legal { display: flex; gap: var(--space-md); }
.footer-legal a:hover { color: var(--color-primary-light); }

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* =========================================================
   Mobile FAB (call button)
   ========================================================= */
.mobile-fab {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-auf-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
  z-index: var(--z-overlay);
  animation: fab-pulse 2.6s ease-in-out infinite;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.mobile-fab svg { width: 26px; height: 26px; }
@keyframes fab-pulse {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: 0 0 0 10px rgba(var(--rgb-primary), 0), var(--shadow-glow); }
}
@media (min-width: 1024px) { .mobile-fab { display: none; } }
body.nav-open .mobile-fab { opacity: 0; visibility: hidden; }

/* =========================================================
   Scroll-reveal (JS toggles .is-visible via IntersectionObserver)
   ========================================================= */
/* Inhalte, die beim Hereinscrollen einblenden.

   Der unsichtbare Anfangszustand haengt seit 14.08.2026 an der Klasse "js",
   die main.js als Allererstes an <html> setzt. Ohne diese Bedingung war der
   Inhalt unsichtbar, sobald das Skript NICHT lief — abgeschaltetes
   JavaScript, ein Ladefehler, ein Tippfehler in main.js. Eine Gestaltung
   darf nicht dazu fuehren, dass ohne Skript gar nichts dasteht.
   Gemessen am 14.08.2026: ohne Skript waren 21 von 21 Gerichten der
   Speisekarte unsichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 60ms; }
.reveal:nth-child(3) { transition-delay: 120ms; }
.reveal:nth-child(4) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .menu-list.wechselt .menu-item { animation: none; }
  .marquee-track, .hero-img, .about-badge, .about-badge strong, .mobile-fab { animation: none !important; }
}

/* =========================================================
   Legal pages (Impressum / Datenschutz)
   ========================================================= */
/* Seit 14.08.2026 tragen die Rechtsseiten denselben Seitenkopf wie alle
   Unterseiten, deshalb hier kein eigener Abstand nach oben mehr. */
.legal-page { padding-bottom: var(--space-3xl); }
.legal-page .container { max-width: 800px; }
.legal-page h2 { font-size: var(--fs-lg); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.legal-page p, .legal-page li { color: var(--color-ink-soft); margin-bottom: var(--space-sm); }
.legal-page a { color: var(--color-primary); text-decoration: underline; }
.legal-page .notice {
  background: var(--color-primary-tint);
  border: 1px solid rgba(var(--rgb-primary), 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
  font-size: var(--fs-sm);
}
.back-link { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-lg); font-weight: 700; color: var(--color-primary); }

/* Verweisliste auf der 404-Seite */
.fehler-liste {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.fehler-liste a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fehler-liste a:hover { color: var(--color-primary-light); }

/* =========================================================
   Mehrseitigkeit — seit 14.08.2026
   Vorher war die Demo ein einziges langes Dokument. Was hier steht,
   gibt es nur, weil es jetzt sechs Seiten plus zwei Rechtsseiten sind.
   ========================================================= */

/* --- Kopfzeile ohne Kopfbild ---------------------------------------
   Auf der Startseite liegt die Kopfzeile durchsichtig über dem dunklen
   Foto und bekommt ihren Untergrund erst beim Scrollen. Auf allen
   anderen Seiten gibt es kein Foto — dort muss der Untergrund sofort
   da sein, sonst läuft der Inhalt sichtbar unter der Leiste durch. */
body.ohne-hero .site-header::before { opacity: 1; }
body.ohne-hero .site-header { box-shadow: var(--shadow-sm); }

/* --- Kopfbereich der Unterseiten ------------------------------------ */
.seitenkopf {
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
}
.seitenkopf h1 {
  font-size: var(--fs-2xl);
  color: var(--color-dark-ink);
  max-width: 20ch;
}
.seitenkopf .eyebrow { color: var(--color-gold-light); }
.seitenkopf .eyebrow::before { background: var(--color-gold-light); }
.seitenkopf__lede {
  margin-top: var(--space-sm);
  max-width: 58ch;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: rgba(var(--rgb-dark-ink), 0.75);
}

@media (min-width: 768px) {
  .seitenkopf { padding-top: calc(var(--header-h) + var(--space-3xl)); }
  .seitenkopf h1 { font-size: var(--fs-3xl); }
}

/* Die laufende Seite in der Navigation. aria-current setzt bauen.py,
   damit die Markierung nicht nur farblich existiert.

   Der Vorsatz .site-header muss sein: die Regel für die helle Kopfzeile
   über dem Kopfbild (.site-header:not(.is-scrolled) .main-nav a) ist
   spezifischer als .main-nav a[…] allein und hat die Markierung sonst
   überschrieben — sie stand im HTML, war aber nicht zu sehen. */
.site-header .main-nav a[aria-current="page"] { color: var(--color-primary); }
.site-header .main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--color-primary);
}

/* --- „Beliebt bei unseren Gästen" auf der Startseite ---------------- */
.beliebt { padding-block: var(--space-3xl); background: var(--color-bg-alt); }
.beliebt-grid {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 720px) { .beliebt-grid { grid-template-columns: repeat(3, 1fr); } }

.beliebt-karte {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.beliebt-karte__kategorie {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.beliebt-karte h3 { font-size: var(--fs-lg); }
.beliebt-karte__text { color: var(--color-ink-soft); font-size: var(--fs-sm); flex: 1; }
.beliebt-karte__preis {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-2xs);
}

/* Weiterführender Knopf unter einem Raster. Der Abstand steht hier und
   nicht am Raster, weil sonst jedes Raster ihn auch ohne Knopf hätte. */
.mittig { text-align: center; margin-top: var(--space-2xl); }

/* --- „Wofür wir stehen" auf Über uns -------------------------------- */
.werte { padding-block: var(--space-3xl); background: var(--color-bg-alt); }
.werte-grid { display: grid; gap: var(--space-md); }
@media (min-width: 720px) { .werte-grid { grid-template-columns: repeat(3, 1fr); } }

.werte-karte {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.werte-karte__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-full);
  background: rgba(var(--rgb-primary), 0.14);
  color: var(--color-primary);
}
.werte-karte__zeichen svg { width: 24px; height: 24px; }
.werte-karte h3 { font-size: var(--fs-md); margin-bottom: var(--space-2xs); }
.werte-karte p { color: var(--color-ink-soft); font-size: var(--fs-sm); }

/* --- Anfahrt auf Kontakt -------------------------------------------- */
.anfahrt { padding-block: var(--space-3xl); }
.anfahrt-grid { display: grid; gap: var(--space-md); }
@media (min-width: 720px) { .anfahrt-grid { grid-template-columns: repeat(3, 1fr); } }

.anfahrt-karte {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}
.anfahrt-karte h3 { font-size: var(--fs-md); margin-bottom: var(--space-2xs); }
.anfahrt-karte p { color: var(--color-ink-soft); font-size: var(--fs-sm); }

.anfahrt-hinweis {
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--color-ink-faint);
  max-width: 62ch;
}

/* --- Fakten neben dem Reservierungsformular ------------------------- */
.reservierung-fakten {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.reservierung-fakten strong { color: var(--color-ink); }

/* --- Abschlussband am Fuß fast jeder Seite -------------------------- */
.cta-band { padding-block: var(--space-2xl); background: var(--color-dark-alt); }
.cta-band__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}
.cta-band h2 { font-size: var(--fs-xl); color: var(--color-dark-ink); }
.cta-band p { margin-top: var(--space-2xs); color: rgba(var(--rgb-dark-ink), 0.75); }
.cta-band__knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* Auf dunklem Grund braucht der Umriss-Knopf helle Kante und Schrift. */
.cta-band .btn-outline { color: var(--color-dark-ink); border-color: rgba(var(--rgb-dark-ink), 0.4); }
.cta-band .btn-outline:hover { color: var(--color-primary); border-color: var(--color-primary); }

@media (min-width: 860px) {
  .cta-band__inhalt { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --- Kleinere Abweichungen der Unterseiten -------------------------- */
/* Auf den eigenen Seiten steht die Überschrift schon im Seitenkopf,
   der Abschnitt darunter braucht oben weniger Luft. */
.menu--seite, .gallery--seite, .reservation--seite { padding-top: var(--space-2xl); }

/* Vorschau auf der Startseite: drei statt sechs Bilder. */
@media (min-width: 640px) { .gallery-grid--drei { grid-template-columns: repeat(3, 1fr); } }
.gallery--seite .gallery-grid { margin-bottom: 0; }