/* =========================================================
   ANZBACHER MÜHLE – Design System "Kornregister"
   Leitmotiv: die Seite als geführtes Kornregister der Mühle - Zeit als
   Buchungs-Chronik (Register der Jahre), Material aus der Kornkammer statt
   der Bibliothek (Sackleinen, Stempeltinte, Waagschein-Ledger statt
   Buttons/Pills). Siehe CLAUDE.md fuer die Konzept-Herleitung.
   Selbst gehostete Schriften (kein Google-Fonts-CDN-Request zur Laufzeit).
   ========================================================= */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2-variations'), url('../fonts/archivo-var.woff2') format('woff2');
}
/* Nur fuer den Hero ("Kupferstich-Tuerschild", 2026-09-12): das filigrane,
   barock verschnoerkelte Wappen vertraegt sich nicht mit der rustikalen
   Kornregister-Schablonenschrift - dort stattdessen eine gravur-artige
   Auszeichnungsschrift, bewusst NICHT sitesweit gegen --font-display
   getauscht (die Schriften Stardos Stencil und Space Mono wurden 2026-09-26 entfernt: --font-display ist jetzt Cinzel, --font-mono Archivo). */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cinzel-var.woff2') format('woff2-variations'), url('../fonts/cinzel-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/cormorant-italic-var.woff2') format('woff2-variations'), url('../fonts/cormorant-italic-var.woff2') format('woff2');
}
/* Nur fuer die Tageskarte-Schiefertafel (#kueche, 2026-09-12): Kreide-
   Handschrift, dritte (und letzte) bewusst eng begrenzte Ausnahme neben
   Cinzel/Cormorant im Hero+Navigation+Speisekarte-Rahmen - siehe CLAUDE.md. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/caveat-var.woff2') format('woff2-variations'), url('../fonts/caveat-var.woff2') format('woff2');
}

:root {
  --sack: #ecdfb8;
  --sack-2: #e2d19f;
  --sack-3: #d6c188;
  --sack-edge: #b89f63;

  --chalk: #f8f2e2;
  --chalk-edge: #ded0aa;

  --iron: #8a3626;
  --iron-dark: #6c2a1c;
  --iron-soft: #a8543f;

  --char: #332b1f;
  /* 2026-09-24 nach Kontrast-Audit abgedunkelt: --char-soft lag auf --sack-2
     nur bei 4.1:1, --char-faint (vorher #8d8065) bei nur 2.9-3.5:1 - beides
     unter WCAG-AA (4.5:1). Jetzt >= 4.5:1 auf --sack/--sack-2/--chalk, die
     Abstufung soft (dunkler) / faint (heller) bleibt erhalten. */
  --char-soft: #574b37;
  --char-faint: #66593f;

  --husk: #3c2f1a;
  --husk-2: #291f10;
  --husk-text: #f1e6cf;
  --husk-text-soft: #c2b394;
  --husk-edge: rgba(241, 230, 207, 0.2);

  --verdigris: #4f6b52;
  --verdigris-dark: #38492f;

  --gold: #c9a55c;
  --gold-dark: #a9853f;
  --gold-light: #d9c9a3;
  /* Nur fuer Fliesstext/Labels auf hellem Sack-/Chalk-Untergrund (z. B.
     Menu-Badges, Kategorie-Unterueberschriften) - --gold-dark selbst faellt
     dort mit ca. 2.6:1 (auf --sack) klar unter WCAG-AA (4.5:1 fuer normalen
     Text), --gold-ink schafft dort >5:1. --gold/--gold-dark bleiben fuer
     Rahmen, Linien und Text auf dunklem Untergrund unveraendert - dort ist
     der Kontrast in die andere Richtung ausreichend. */
  --gold-ink: #6b5326;

  /* Nur fuer die Jahreszeiten-Karte (#jahreszeiten) - die 4 hellen
     Saison-Hintergrundfarben (data/gallery.php 'color') sind zu
     unterschiedlich, als dass die sitesweiten --char-soft/--char-faint/--iron
     ueberall genug Kontrast haetten (Kundenfeedback 2026-09-13, "Schrift
     teilweise schwer zu lesen"). Geprueft gegen den unguenstigsten Fall
     (Herbst, #c99a5c): --char-soft nur 2.46:1, --char-faint nur 1.53:1,
     --iron nur 3.13:1 - klar unter WCAG-AA (4.5:1 fuer normalen Text).
     --season-ink schafft dort 4.76:1 (auf den anderen drei Saisonfarben
     6.6-8.6:1), --season-accent 4.80:1 (dort 6-7.5:1). Bewusst NUR fuer
     .season-* verwendet, --char-soft/--char-faint/--iron bleiben ueberall
     sonst unveraendert (gleiches Prinzip wie --gold-ink oben). Betrifft nur
     die Jahreszeiten-Karte (seit 2026-09-26 immer eine helle Papierflaeche). */
  --season-ink: #41341f;
  --season-accent: #5c2417;

  /* Nur fuer die Tageskarte-Schiefertafel - bewusst eigene, sehr dunkle
     Farbwerte statt --husk wiederzuverwenden (Kundenwunsch: "das muss schon
     fast schwarz sein", --husk war dafuer nicht dunkel genug). */
  --slate: #14161a;
  --wood: #5a3d24;
  --wood-dark: #432c19;
  --wood-light: #7a5433;
  --chalk-white: #eef0ec;

  /* Nur fuer "Der Pavillon im Zwielicht" (#muehle-events) - dritte,
     eigenstaendige Dunkel-Variante neben --husk und --slate, bewusst nicht
     wiederverwendet (Kundenwunsch: eigene grafische Identitaet je Sektion). */
  --dusk: #16262a;
  --dusk-2: #233c3f;
  --dusk-deep: #0e1a1c;

  --white: #ffffff;
  --danger: #a3311a;

  --shadow-sm: 0 2px 10px rgba(41, 32, 15, 0.14);
  --shadow-md: 0 12px 28px rgba(41, 32, 15, 0.2);
  --shadow-lg: 0 26px 56px rgba(41, 32, 15, 0.3);

  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Archivo', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Archivo', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-hero-display: 'Cinzel', Georgia, serif;
  --font-hero-accent: 'Cormorant', Georgia, serif;
  --font-chalk: 'Caveat', cursive;

  /* Schriftstufen (2026-09-24): vorher 25 verschiedene Groessen auf der Seite,
     allein 14 zwischen 11 und 19px. Jetzt feste Stufen fuer Fliesstext-nahe
     Groessen; Ueberschriften (clamp), Ziffern und Hero bleiben eigene Werte. */
  --fs-label: 0.72rem;
  --fs-small: 0.8rem;
  --fs-secondary: 0.9rem;
  --fs-body: 1rem;
  --fs-lead: 1.1rem;
  --fs-sub: 1.25rem;

  /* Laufweiten-Stufen (2026-09-24): vorher 13 verschiedene Werte (0-0,16em). */
  --track-tight: 0.02em;
  --track-caps: 0.06em;
  --track-wide: 0.1em;
  --track-label: 0.15em;

  /* Bewegungs-Stufen (2026-09-24): vorher 10 verschiedene Dauern (0,18-0,7s).
     Schnell = Rueckmeldung (Hover, Druck), Normal = Zustandswechsel, Langsam =
     Erscheinen/Wechsel groesserer Flaechen. Laenger (Hero-Ueberblendung 1,6s,
     Ken Burns 9s) bleibt bewusst eigen. Kurven: --ease (ausklingend),
     --ease-soft (weich), --ease-spring (einzige federnde: Karte rueckt nach vorn). */
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-slow: 0.6s;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius-sm: 2px;
  --radius-md: 3px;

  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 88px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: calc(var(--header-h) + 14px); }
@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;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--char);
  background: var(--sack);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* siehe html{overflow-x:hidden} oben - allein reicht das
    auf Mobile-Browsern (Safari/Chrome) nicht immer aus, wenn ein Kind-Element
    (z. B. die rotierten News-Stapel-/Register-Ecken oder .hero-seal) ein paar
    Pixel ueber den Viewport hinausragt; erst body zusaetzlich zu clippen
    unterbindet das minimale seitliche "Rubber-Band"-Scrollen zuverlaessig.
    WICHTIG: hier bewusst `clip` statt `hidden` - `overflow-x: hidden` macht
    body zu einem eigenen Scroll-Container, was `position: sticky` bei allen
    Nachfahren (u. a. `.site-header`) zuverlaessig zerstoert (der Header hoerte
    komplett auf mitzuscrollen - Bug, der genau dadurch entstanden ist und per
    Kundenmeldung aufgefallen ist). `clip` unterbindet das Overflow genauso,
    ohne body zum Scroll-Container zu machen. */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* Sackleinen-Textur: feines Kreuzraster, sehr dezent, als Hintergrund fuer
   helle Sektionen. Auf .section-alt zusaetzlich etwas kraeftiger. */
.texture {
  background-image:
    repeating-linear-gradient(45deg, rgba(51, 43, 31, 0.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(51, 43, 31, 0.025) 0 2px, transparent 2px 9px);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 28px; }

/* Kupferstich ist seit 2026-09-13 das sitesweite Hauptdesign (vorher
   Kornregister ueberall ausser den drei Ausnahmen Hero/Nav/Speisekarte) -
   Kundenwunsch nach Ruecksprache ueber die vielen parallelen Stile: das
   deckt sich auch mit dem Claim "Dem Gestern treu. Dem Genuss verschrieben."
   (Kupferstich = Genuss/Gegenwart, Kornregister = Gestern/Historie). Deshalb
   ist Cinzel jetzt die globale Ueberschriften-Schrift; #geschichte (Register
   der Jahre) bekommt direkt danach --font-display zurueck (seit dem Standarddesign
   ebenfalls Cinzel) - historisch die einzige Kornregister-Zone. Schiefertafel
   (Tageskarte), Zwielicht (Pavillon) und das Gaestebuch (Bewertungen) sind
   davon unberuehrt - das sind eigene, schon lange von Kornregister
   losgeloeste Systeme, keine "Kornregister-Reste". */
h1, h2, h3, h4 {
  font-family: var(--font-hero-display);
  color: var(--char);
  line-height: 1.16;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: var(--track-tight);
}
#geschichte h2, #geschichte h3, .register-content h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-tight); }
h1 { font-size: clamp(2.3rem, 2.6vw + 1.5rem, 3.9rem); }
h2 { font-size: clamp(1.7rem, 1.4vw + 1.3rem, 2.5rem); }
h3 { font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem); font-weight: 700; }
p { margin: 0 0 1em; }
.lede { font-size: var(--fs-lead); color: var(--char-soft); max-width: 62ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--iron);
  margin: 0 0 0.7em;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--iron); display: inline-block; }
.section-head { max-width: 640px; margin-bottom: 46px; }
.section-head.is-center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.is-center .eyebrow { justify-content: center; }
.section-head.is-center .eyebrow::before { display: none; }

/* ---------------- Buttons: Kupferstich statt gestempelt (2026-09-13) ----------------
   Iron-Rot bleibt bewusst die einzige Handlungsfarbe (siehe Kupferstich-
   Bausteine-Prototyp) - nur Schrift/Rahmen wechseln auf Cinzel/Gold. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 0;
  font-family: var(--font-hero-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  min-height: 48px;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--iron); color: var(--chalk); border-color: var(--gold-dark); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--iron-dark); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--char); border-color: var(--gold-dark); }
.btn-ghost:hover { background: var(--gold); color: var(--husk); border-color: var(--gold); }
.btn-on-dark { background: rgba(248, 242, 226, 0.08); color: var(--husk-text); border-color: var(--husk-edge); backdrop-filter: blur(6px); }
.btn-on-dark:hover { background: var(--chalk); color: var(--char); border-color: var(--chalk); }
.btn-sm { padding: 9px 18px; min-height: 38px; font-size: 0.74rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.btn svg { width: 17px; height: 17px; flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-secondary); letter-spacing: var(--track-tight);
  color: var(--iron); text-decoration: none; border-bottom: 1px dashed transparent;
  transition: gap var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.link-arrow:hover { gap: 12px; border-color: var(--iron); }
/* Im Footer (dunkel) war Iron-Rot mit ca. 1.5:1 fast unsichtbar ("Route planen"). */
.site-footer .link-arrow { color: var(--gold-light); }
.site-footer .link-arrow:hover { border-color: var(--gold-light); }
.link-arrow svg { width: 15px; height: 15px; }

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

/* ---------------- Stitch-Divider ---------------- */
.stitch-divider { display: flex; align-items: center; gap: 10px; margin: 3rem 0; }
.stitch-divider .stitch { flex: 1; height: 0; border-top: 2px dashed var(--sack-edge); }
.stitch-divider .knot { width: 7px; height: 7px; border-radius: 50%; background: var(--iron); flex: none; }
.section-dark .stitch-divider .stitch { border-top-color: var(--husk-edge); }
.section-dark .stitch-divider .knot { background: var(--husk-text); }

/* ---------------- Reveal on scroll ---------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-group] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); }
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.28s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.36s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.44s; }

/* ---------------- Bild-Einlage (wie in ein Register geklebt) ---------------- */
.media-frame {
  position: relative; overflow: hidden;
  background: var(--chalk);
  border: 6px solid var(--chalk);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--chalk-edge);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bildnachweis (Fotograf/KI-Hinweis, siehe Konvention oben): bewusst ein
   reiner Mini-Hinweis - kein auffaelliger Chip mehr, nur blasser Text mit
   Schlagschatten fuer Lesbarkeit auf jedem Bildhintergrund (2026-09-12,
   Kundenwunsch: "muss nicht ins Auge stechen"). */
.media-credit {
  position: absolute; right: 7px; bottom: 5px;
  font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: var(--track-tight);
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.media-frame.is-tilt-left { transform: rotate(-1.6deg); }
.media-frame.is-tilt-right { transform: rotate(1.4deg); }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  display: flex; align-items: center; background: transparent;
  transition: background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), height var(--dur-base) var(--ease);
}
/* max-width bewusst breiter als der generische .container (1180px):
   seit 2026-09-13 stehen 9 statt 5 Links in der Hauptnavigation (Pavillon,
   Jahreszeiten, Bewertungen, Kontakt ergaenzt), die bei 1180px nicht mehr
   neben Logo und Tisch-reservieren-Button gepasst haetten (haette
   umgebrochen/den Header gesprengt) - siehe auch die verkleinerte
   .main-nav-Schrift/-Abstaende weiter unten, die zusaetzlich Platz sparen. */
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 1360px; }
.site-header.is-scrolled { background: rgba(236, 223, 184, 0.95); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); height: 74px; }
.site-header.is-on-dark:not(.is-scrolled) .brand-word,
.site-header.is-on-dark:not(.is-scrolled) .main-nav a,
.site-header.is-on-dark:not(.is-scrolled) .quick-contact-icon { color: var(--husk-text); }
.site-header.is-on-dark:not(.is-scrolled) .brand-mark { color: var(--husk-text); }
.site-header.is-on-dark:not(.is-scrolled) .burger span { background: var(--husk-text); }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 38px; height: auto; flex: none; display: flex; }
.brand-mark svg { width: 100%; height: auto; }
.brand-mark { color: var(--char); transition: color var(--dur-base) var(--ease); }
/* Logotype + Navigation folgen seit 2026-09-12 bewusst der "Kupferstich-
   Tuerschild"-Schriftpaarung aus dem Hero (Cinzel/Cormorant, siehe dort) statt
   der frueheren Kornregister-Schrift - auf
   Kundenwunsch, da die Navigationsleiste sonst "Mailsack"-artig wirkte,
   waehrend das Wappen selbst schon elegant/graviert ist. Speisekarte, Badges,
   Register der Jahre etc. bleiben unveraendert Kornregister. */
.brand-word { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-lead); text-transform: uppercase; color: var(--char); letter-spacing: var(--track-caps); transition: color var(--dur-base) var(--ease); white-space: nowrap; }
.brand-word small { display: block; font-family: var(--font-hero-accent); font-style: italic; font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track-tight); text-transform: none; opacity: 0.75; margin-top: 2px; }

.main-nav { display: none; align-items: center; gap: 13px; }
.main-nav a { font-family: var(--font-hero-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-tight); white-space: nowrap; text-transform: uppercase; text-decoration: none; color: var(--char); position: relative; padding: 6px 0; transition: color var(--dur-base) var(--ease); }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold-dark); transition: right var(--dur-base) var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.quick-contact-icon { width: 40px; height: 40px; display: none; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--char); color: var(--char); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.quick-contact-icon:hover { background: var(--iron); color: var(--chalk); border-color: var(--iron); }
.quick-contact-icon svg { width: 17px; height: 17px; }

.burger { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 0; }
.burger span { width: 22px; height: 2px; background: var(--char); border-radius: 1px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; top: var(--header-h); background: var(--sack); z-index: 55;
  display: flex; flex-direction: column; padding: 20px 28px 40px; gap: 4px;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; }
.mobile-nav a { font-family: var(--font-hero-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--fs-sub); color: var(--char); text-decoration: none; padding: 14px 4px; border-bottom: 1px dashed var(--sack-edge); }
.mobile-nav .quick-contact { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; color: var(--iron); font-family: var(--font-mono); font-weight: 700; text-decoration: none; }
/* overflow:clip statt hidden - dieselbe Falle wie schon einmal dokumentiert
   (siehe Arbeitskonventionen weiter unten): overflow:hidden macht body zu
   einem eigenen Scroll-Container, was position:sticky bei .site-header
   zerstoert - der Header "verschwand" beim Oeffnen des Burger-Menues
   (sprang aus dem sichtbaren Bereich, sobald man vorher gescrollt hatte),
   weil er auf seine normale Dokumentfluss-Position zurueckfiel statt oben
   sitzen zu bleiben. clip sperrt das Scrollen genauso zuverlaessig, ohne
   diesen Nebeneffekt. */
body.nav-open { overflow: clip; }
/* Das Scrollen sperrt html selbst: html hat overflow-x:hidden, dadurch wirkt overflow auf body NICHT mehr auf den Bildschirm (die Seite liess sich bei offenem Menue weiter scrollen). Ein overflow:hidden auf html erzeugt keinen eigenen Scroll-Container, der Sticky-Header bleibt sichtbar. */
html:has(body.nav-open) { overflow: hidden; }

/* ---------------- Betriebsmeldung: gestempelte Notiz ---------------- */

/* ---------------- Hero ---------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; margin-top: calc(var(--header-h) * -1); color: var(--husk-text); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-soft); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: saturate(0.92) sepia(0.06); }
/* .is-leaving: das ausblendende Bild behaelt waehrend der Ueberblendung seine Animation
   (gleicher Name = laeuft weiter statt neu zu starten), sonst springt der Zoom vor dem
   Wechsel auf den Ausgangswert zurueck */
.hero-slide.is-active img, .hero-slide.is-leaving img { animation: hero-kenburns 9s linear forwards; }
@keyframes hero-kenburns { from { transform: scale(1.15); } to { transform: scale(1); } }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 20, 10, 0.4) 0%, rgba(28, 20, 10, 0.3) 40%, rgba(20, 14, 7, 0.86) 100%); }
.hero-content { position: relative; z-index: 2; padding: 40px 28px; max-width: 900px; margin: 0 auto; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Waage-Eingangseffekt: Wappen pendelt mit echter gedaempfter Schwingung
   (main.js) zur Ruhe, bevor Schriftzug/Zeile/CTAs nacheinander einblenden.
   (Fruehere Version liess das Wappen sichtbar an einem duennen Faden haengen
   - auf Kundenwunsch entfernt, wirkte wie ein stoerender Strich uebers Bild;
   die Schwingung selbst bleibt unveraendert bestehen.) */
.hero-pivot { position: relative; }
/* Zwei Schatten-Ebenen statt einer einzelnen (2026-09-14, Kundenwunsch:
   sichtbarer/auffaelliger als die urspruengliche enge Variante, aber nicht
   hart - eine kleine Kontaktschaerfe direkt an der Kontur plus eine deutlich
   groessere, weich ausblutende Ebene, die eine echte Flaeche hinter dem
   Wappen aufspannt statt nur ein enger Rahmen zu sein. Erster Versuch war
   dabei insgesamt zu schwach ausgefallen - beide Deckkraft-Werte deshalb
   wieder angehoben, nicht nur der Blur-Radius. */
.hero-logo-swing { width: clamp(130px, 16vw, 220px); margin: 0 auto; transform-origin: 50% -64px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 22px 68px rgba(0, 0, 0, 0.48)); opacity: 0; }
.hero-logo-swing svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-logo-swing { color: var(--husk-text); }

.hero-rule { width: 74px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 26px auto 18px; position: relative; }
.hero-rule::before { content: ''; position: absolute; left: 50%; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }
.hero-wordmark { font-family: var(--font-hero-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-wide); font-size: clamp(1.9rem, 2.4vw + 1.2rem, 3.1rem); color: var(--husk-text); margin: 0 0 12px; }
.hero-subtext { font-family: var(--font-hero-accent); font-style: italic; font-weight: 500; font-size: var(--fs-lead); letter-spacing: var(--track-tight); text-transform: none; color: var(--gold-light); margin: 0 0 22px; }

/* Oeffnungsstatus: live berechnet in opening_status() (functions.php), aus
   settings.php 'opening_hours' - zeigt auf einen Blick, ob gerade geoeffnet
   ist bzw. wann als naechstes. Gruener Punkt mit Leuchten = offen, gedaempftes
   Gold = geschlossen (bewusst kein Alarm-Rot, das waere im Hero-Kontext dem
   --iron-Akzent vorbehalten und wuerde hier zu dringlich wirken).
   Seit 2026-09-14 ein <a> statt <p> (Kundenwunsch: Klick soll zu den vollen
   Öffnungszeiten im Footer scrollen, #oeffnungszeiten in footer.php) - Link-
   Standardstile zurueckgesetzt, damit es weiterhin wie eine reine Status-
   Pille aussieht, plus dezenter Hover als Klickbarkeits-Hinweis. */
.hero-status {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 8px 18px;
  font-family: var(--font-hero-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--husk-text); border: 1px solid var(--husk-edge); background: rgba(20, 14, 9, 0.25);
  text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hero-status:hover, .hero-status:focus-visible { background: rgba(20, 14, 9, 0.4); border-color: var(--husk-text); }
.hero-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--gold-dark); }
/* Titelbanner fuer aktive Betriebsschliessungen (admin/schliesstage.php) -
   seit 2026-09-13 bewusst NICHT mehr als duenner Streifen ueber dem Header
   (siehe .banner, entfernt), sondern prominent im Hero selbst, direkt vor
   der "Jetzt geoeffnet"-Pille - dort sieht es garantiert jeder Besucher. */
.hero-closure-banner {
  display: flex; align-items: flex-start; gap: 12px; max-width: 46ch; margin: 0 0 22px; padding: 14px 20px;
  font-family: var(--font-body); font-size: var(--fs-secondary); line-height: 1.5; text-align: left;
  color: var(--husk-text); background: rgba(138, 54, 38, 0.28); border: 1px solid var(--gold-dark);
  text-decoration: none;
}
.hero-closure-banner svg { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 2px; }
/* Nur ein <a> (optionale News-Verknuepfung, admin/schliesstage-edit.php) -
   der reine <div>-Fall (keine Verknuepfung) bekommt bewusst keinen Hover,
   da er nicht klickbar ist. */
a.hero-closure-banner { cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
a.hero-closure-banner:hover, a.hero-closure-banner:focus-visible { background: rgba(138, 54, 38, 0.42); border-color: var(--gold); }
.hero-status.is-open { border-color: rgba(127, 174, 116, 0.55); }
.hero-status.is-open .hero-status-dot { background: #8fbb82; box-shadow: 0 0 7px 1px rgba(143, 187, 130, 0.75); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.hero-ctas .btn { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-label); border-radius: 0; border: 1px solid var(--gold); color: var(--husk-text); background: transparent; }
.hero-ctas .btn-primary { background: rgba(201, 165, 92, 0.14); box-shadow: none; }
.hero-ctas .btn:hover { background: var(--gold); color: var(--husk-2); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .hero-logo-swing { opacity: 1; transform: none !important; }
}

/* Mehlstaub-Partikel: leuchtende Staubkoerner, die langsam aufsteigen und
   leicht seitlich pendeln - passend zum Mehl-/Kornkammer-Motiv und der
   angestaubt-antiken Hero-Stimmung. Canvas statt vieler DOM-Knoten (main.js),
   liegt zwischen Foto und Textinhalt (siehe z-index). Bei
   prefers-reduced-motion bleibt das Canvas leer (main.js startet die
   Animation dort gar nicht erst). */
.hero-dust {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  /* canvas ist ein "replaced element" - inset:0 allein streckt es (anders als
     bei einem div) nicht zuverlaessig auf die Elterngroesse, das Element
     faellt sonst auf seine width/height-HTML-Attribute (= die fuer scharfe
     Darstellung hochskalierte Zeichenflaeche, siehe main.js) als Layout-Groesse
     zurueck - explizit width/height:100% erzwingt die korrekte CSS-Groesse. */
}

.hero-seal {
  position: absolute; z-index: 3; top: 118px; right: 32px;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(248, 242, 226, 0.92); border: 3px double var(--iron);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transform: rotate(8deg); box-shadow: var(--shadow-md);
  font-family: var(--font-display); font-size: 0.62rem; line-height: 1.25; color: var(--iron); letter-spacing: var(--track-tight);
}
.hero-dots { position: absolute; bottom: 26px; right: 28px; z-index: 3; display: flex; gap: 8px; }
.hero-dots button { width: 26px; height: 3px; border-radius: 0; border: none; padding: 0; background: rgba(248, 242, 226, 0.4); cursor: pointer; transition: background-color var(--dur-base) var(--ease), width var(--dur-base) var(--ease); }
.hero-dots button.is-active { background: var(--iron-soft); width: 40px; }

.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(241, 230, 207, 0.8); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; }
.scroll-cue .scroll-cue-line { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(241, 230, 207, 0.9), transparent); position: relative; overflow: hidden; }
.scroll-cue .scroll-cue-line::after { content: ''; position: absolute; left: 0; top: -34px; width: 100%; height: 34px; background: linear-gradient(180deg, transparent, var(--iron-soft)); animation: scroll-cue-move 2s ease-in-out infinite; }
@keyframes scroll-cue-move { to { top: 34px; } }

/* ---------------- Section base ---------------- */
.section { padding: 108px 0; position: relative; }
.section-tight { padding: 66px 0; }
.section-alt { background: var(--sack-2); }
/* --iron-soft (#a8543f) erreicht auf --husk nur 2.5:1 (Eyebrow, Register-
   Stempel/-Zaehler) - auf dunklem Untergrund hier ein aufgehellter Ton (>= 4.5:1). */
.section-dark { --iron-soft: #d98a72; background: var(--husk); color: var(--husk-text-soft); }
.section-dark h2, .section-dark h3 { color: var(--husk-text); }
.section-dark .eyebrow { color: var(--iron-soft); }
.section-dark .eyebrow::before { background: var(--iron-soft); }

/* ---------------- Aktuelles: Abreisskalender-Stapel ----------------
   Neueste Meldung liegt gross vorne, aeltere schauen als Ecke rechts oben
   hervor (echter Papierstapel statt Karten-Reihe). Links daneben (ab 900px)
   ein "Register-Auszug" als kompakte Liste aller Eintraege - fuellt die
   sonst leere Flaeche neben dem schmalen Stapel sinnvoll und dient
   gleichzeitig als robuste, gut auffindbare Sprungliste (Klick bringt den
   Eintrag im Stapel nach vorne UND oeffnet ihn), waehrend die Pfeil-Buttons
   unter dem Stapel selbst durch alle Eintraege blaettern lassen (mit
   Karten-Ecken-Klick als Bonus-Interaktion). Auf Mobile bleibt nur der
   Stapel + die Pfeile sichtbar - dort hat sich das als ausreichend erwiesen. */
.stack-col { max-width: 440px; margin: 0 auto; width: 100%; }
.stack { position: relative; height: 500px; }
.stack-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--chalk); border: 1px solid var(--chalk-edge);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), filter var(--dur-base) var(--ease), opacity var(--dur-base) ease;
}
.stack-card:focus-visible { outline: 2px solid var(--iron); outline-offset: 3px; }
.stack-card.is-front { z-index: 5; transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-base) var(--ease), filter var(--dur-base) var(--ease), opacity var(--dur-base) ease; }
.stack-card.is-back-1 { z-index: 4; transform: translate(20px, -20px) rotate(3.2deg) scale(0.99); filter: brightness(0.97); }
.stack-card.is-back-2 { z-index: 3; transform: translate(38px, -38px) rotate(-4.4deg) scale(0.98); filter: brightness(0.93); }
.stack-card.is-hidden { z-index: 1; transform: translate(54px, -54px) rotate(-6deg) scale(0.97); opacity: 0; pointer-events: none; filter: brightness(0.9); }
.stack-card.is-back-1:hover { transform: translate(24px, -24px) rotate(3.2deg) scale(1); box-shadow: var(--shadow-md); }
.stack-card.is-back-2:hover { transform: translate(42px, -42px) rotate(-4.4deg) scale(0.99); box-shadow: var(--shadow-md); }
.stack-card.is-front:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.stack-card .perf { display: flex; align-items: center; gap: 5px; padding: 12px 16px 0; flex: none; }
.stack-card .perf span { width: 5px; height: 5px; border-radius: 50%; background: var(--sack-edge); flex: none; }
.stack-card .perf .line { flex: 1; height: 0; border-top: 1px dashed var(--sack-edge); }

.date-block { padding: 8px 20px 4px; text-align: center; flex: none; }
.date-num { font-family: var(--font-hero-display); font-weight: 600; font-size: 3.2rem; line-height: 1; color: var(--iron); }
.date-meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--char-faint); margin-top: 2px; }

.stack-card .card-title { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-lead); letter-spacing: var(--track-tight); text-align: center; padding: 6px 20px 0; margin: 0; color: var(--char); line-height: 1.3; flex: none; }
.stack-card .card-teaser {
  font-size: var(--fs-secondary); color: var(--char-soft); text-align: center; padding: 8px 22px 0; line-height: 1.5; flex: none; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Eckenlabel fuer zurueckliegende Karten in der Desktop-Kaskade (siehe
   .stack-card ≥900px weiter unten) - macht den sichtbaren Ausschnitt einer
   zurueckliegenden Karte lesbar (Titel+Datum), statt nur eine leere
   Kartenecke zu zeigen. Auf der vordersten Karte und unter 900px (dort
   bleibt der urspruengliche gedeckelte 3-Karten-Stapel unveraendert)
   ausgeblendet. aria-hidden, da Titel/Datum bereits im Kartentext stehen. */
.stack-card .card-peek { display: none; }

.photo-tear { position: relative; margin-top: 14px; overflow: hidden; flex: 1 1 auto; min-height: 90px; }
.photo-tear img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.12) saturate(0.92); }
.photo-tear::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 14px;
  background:
    linear-gradient(135deg, var(--chalk) 50%, transparent 50%) 0 0/14px 14px,
    linear-gradient(-135deg, var(--chalk) 50%, transparent 50%) 0 0/14px 14px;
  background-repeat: repeat-x;
}

.stack-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.nav-btn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--chalk); border: 1px solid var(--chalk-edge);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--iron);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  flex: none;
}
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--iron); color: var(--chalk); }
.stack-dots { display: flex; gap: 7px; align-items: center; }
.stack-dots .dot { width: 5px; height: 5px; border-radius: 1px; background: var(--sack-edge); transition: width var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); }
.stack-dots .dot.is-active { width: 18px; background: var(--iron); }
.stack-caption { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--char-faint); text-align: center; margin-top: 14px; }

/* ---------------- Aktuelles: Detail-Lightbox ---------------- */
.news-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20, 14, 9, 0.86); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base); padding: 24px; }
.news-lightbox.is-open { opacity: 1; visibility: visible; }
.news-lightbox-card { background: var(--chalk); max-width: 600px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.news-lightbox-photo-wrap { position: relative; cursor: zoom-in; }
.news-lightbox-photo-wrap img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
/* Klick auf das (hier per object-fit:cover beschnittene) Foto zeigt es
   unbeschnitten/groesser in #newsPhotoZoom - teilt sich die .lightbox-Stile
   der Mühle&Events-Galerie (siehe dort), braucht daher hoeheren z-index als
   die 200 von .news-lightbox, um darueber zu erscheinen. */
#newsPhotoZoom { z-index: 210; }
.news-lightbox-body { padding: 28px 32px 34px; }
.news-lightbox-date { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--iron); margin-bottom: 10px; display: block; }
.news-lightbox-title { font-family: var(--font-hero-display); font-weight: 600; font-size: 1.4rem; margin: 0 0 16px; color: var(--char); }
.news-lightbox-text { white-space: pre-line; color: var(--char-soft); line-height: 1.65; font-size: var(--fs-body); }
.news-lightbox-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(248, 242, 226, 0.9); border: 1px solid var(--chalk-edge); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.news-lightbox-close svg { width: 18px; height: 18px; }

/* ---------------- Küche: Waagschein-Ledger ---------------- */
.menu-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px; }

/* ---------------- Tageskarte: Schiefertafel ----------------
   Ersetzt die vorherige simple .daily-menu-note-Box. Sehr dunkle, eigens
   dafuer reservierte Farbe (--slate, siehe :root) statt --husk, mit rein aus
   CSS-Verlaeufen gebauter Kreidestaub-/Wischstreifen-Textur (keine
   Textur-Grafik). Navigation ist ein echtes Register: main.js blendet nur
   .tafel-entry-Bloecke ein/aus, fuer die tatsaechlich ein Eintrag existiert
   (Ruhetage fehlen in data/daily-menu.php einfach, keine Luecken-Behandlung
   noetig). Wiederverwendet .stack-nav/.nav-btn/.stack-dots aus dem
   News-Stapel fuer die Blaettern-Steuerung. */
.tafel-section { margin-bottom: 48px; text-align: center; }
.tafel-heading, .menu-card-heading { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--char-soft); margin: 0 0 20px; text-align: center; }
/* .tafel-stack bekommt beim Umblaettern per JS (main.js) kurzzeitig eine
   explizite Pixel-Hoehe mit Transition, statt beim Wechsel einfach
   instantan auf die neue Eintragshoehe zu springen (2026-09-13 gemeldet:
   "wirkt auf der Seite etwas verbuggt", weil Suppe+Hauptspeise-Eintraege
   hoeher sind als reine Hauptspeise-Tage). FLIP-Technik: main.js misst
   Start-/Endhoehe und animiert dazwischen, siehe "Tageskarte: Schiefertafel"
   dort - overflow:hidden ist noetig, damit der neue (bereits umgeschaltete)
   Eintrag waehrend der Animation nicht ueber den noch alten Hoehenwert hinausragt. */
.tafel-stack { max-width: 560px; margin: 0 auto; overflow: hidden; transition: height var(--dur-base) var(--ease-soft); }
.tafel-entry { display: none; }
.tafel-entry.is-active { display: block; animation: fadeUp var(--dur-base) var(--ease); }

.tafel-wrap { position: relative; padding-top: 30px; }
.tafel-date-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: var(--chalk); border: 1px solid var(--chalk-edge); box-shadow: var(--shadow-sm);
  padding: 7px 20px; z-index: 3; text-align: center;
}
.tafel-date-tag::before { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 12px; background: var(--wood-dark); transform: translateX(-50%); }
/* Umgekehrte Groessengewichtung (2026-09-14, Kundenwunsch "Wochentage groß
   und Datum klein") - vorher war es andersrum (Wochentag klein/gedaempft,
   Kalenderdatum gross/Iron-farbig); nur die beiden Regeln unten
   getauscht, Markup/Werte in index.php unveraendert. */
.tafel-date-tag .tafel-day { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); color: var(--iron); }
.tafel-date-tag .tafel-date { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--char-faint); }

.tafel-frame {
  padding: 18px;
  background: repeating-linear-gradient(72deg, var(--wood) 0 6px, var(--wood-light) 6px 9px, var(--wood) 9px 16px);
  box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}
.tafel-slate { position: relative; overflow: hidden; background: var(--slate); padding: 46px 30px 36px; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.03); }
.tafel-slate::before {
  content: ''; position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(4deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 7px);
}
.tafel-slate::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 220px 90px at 12% 18%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(ellipse 180px 120px at 85% 30%, rgba(255, 255, 255, 0.035), transparent 70%),
    radial-gradient(ellipse 260px 140px at 30% 85%, rgba(255, 255, 255, 0.045), transparent 70%),
    radial-gradient(ellipse 200px 100px at 90% 88%, rgba(255, 255, 255, 0.03), transparent 70%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}
.tafel-content { position: relative; z-index: 1; }
.tafel-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(238, 240, 236, 0.5); margin: 0 0 6px; }
.tafel-course { margin: 0 0 18px; }
.tafel-course-label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(238, 240, 236, 0.4); margin: 0 0 2px; }
.tafel-course-name { font-family: var(--font-chalk); font-weight: 700; font-size: 1.8rem; color: var(--chalk-white); margin: 0; line-height: 1.15; text-shadow: 0 0 8px rgba(255, 255, 255, 0.08); }
.tafel-swoosh { width: 90px; height: 9px; margin: 10px 0 18px; opacity: 0.4; }
.tafel-price { margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-tight); color: rgba(238, 240, 236, 0.55); }

/* Speisekarte im "Kupferstich"-Kleid (2026-09-12): das Herzstück der Seite
   zieht die im Hero/in der Navigation bereits eingefuehrte edle Cinzel/Gold-
   Optik weiter, statt im rustikalen Kornregister-Look zu bleiben - siehe
   CLAUDE.md fuer die Begruendung (roter Faden Hero -> Navigation -> Speisekarte,
   Register der Jahre/News/Jahreszeiten bleiben bewusst rustikal). */
.menu-card {
  background: var(--chalk); border: 1px solid var(--gold-dark); box-shadow: var(--shadow-md);
  padding: 40px 36px; position: relative; overflow: hidden;
}
.menu-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(51, 43, 31, 0.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(51, 43, 31, 0.025) 0 2px, transparent 2px 9px);
}
.menu-card > * { position: relative; z-index: 1; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: 26px; border-bottom: 1px solid var(--sack-edge); padding-bottom: 2px; }
.menu-tab {
  padding: 8px 2px; background: none; border: none; cursor: pointer; position: relative;
  font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--char-soft); transition: color var(--dur-base) var(--ease);
}
.menu-tab::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--gold-dark); transition: right var(--dur-base) var(--ease); }
.menu-tab.is-active, .menu-tab:hover { color: var(--char); }
.menu-tab.is-active::after { right: 0; }

.menu-category-head { margin-bottom: 28px; }
.menu-category-title { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-sub); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--char); margin: 0 0 12px; }
.menu-category-rule { width: 74px; height: 1px; background: linear-gradient(90deg, var(--gold-dark), transparent); position: relative; }
.menu-category-rule::before { content: ''; position: absolute; left: 0; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark); }

.menu-subheading {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold-ink); margin: 30px 0 10px; padding-top: 4px;
}
/* Eigene, ausgezogene Trennlinie statt purem Farbtext - sonst liest sich die
   Zwischenueberschrift optisch wie ein weiteres .menu-badge (gleiche
   Schrift/Farbe/Grossbuchstaben), obwohl sie strukturell eine Ueberschrift
   und kein Tag ist. Die Linie macht den Unterschied auf einen Blick klar. */
.menu-subheading::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-dark), transparent); }
.menu-list .menu-subheading:first-child { margin-top: 0; }

.menu-panel { display: none; }
.menu-panel.is-active { display: block; animation: fadeUp var(--dur-base) var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.menu-list { display: grid; gap: 2px; }
.menu-item { display: flex; align-items: baseline; gap: 14px; padding: 16px 4px; border-bottom: 1px dashed var(--sack-edge); }
.menu-item-main { max-width: 60ch; }
.menu-item-name { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); color: var(--char); }
.menu-item-desc { font-size: var(--fs-secondary); color: var(--char-soft); margin-top: 2px; }
.menu-item-fill { flex: 1; border-bottom: 1px solid var(--gold-dark); opacity: 0.55; transform: translateY(-5px); min-width: 20px; }
.menu-item-price { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-body); color: var(--iron); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.menu-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--gold-ink);
}
.menu-badge svg { width: 13px; height: 13px; flex: none; }

.food-strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 76px 0 24px; flex-wrap: wrap; }
/* Endlos-Streifen (2026-09-24, Kundenwunsch): main.js dupliziert die Eintraege
   und springt unsichtbar zurueck, sobald man in eine Kopie hineinscrollt.
   Feste Spaltenbreite (statt minmax(...,1fr)), damit der Streifen auch bei
   wenigen Fotos breiter als der Bildschirm ist; kein Scroll-Snap und keine
   Scrollleiste (eine Leiste waere bei einem Endlos-Streifen irrefuehrend, es
   gibt Wischen, Pfeiltasten und die Pfeil-Buttons). */
.food-strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 22vw, 250px); gap: 22px; overflow-x: auto; padding: 6px 6px 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.food-strip::-webkit-scrollbar { display: none; }
.food-strip-nav { display: flex; gap: 10px; }
.food-strip-nav[hidden] { display: none; }
.food-strip .media-frame { aspect-ratio: 4/5; }
.food-caption { margin: 10px 2px 0; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-secondary); color: var(--char); text-align: center; }

/* ---------------- Philosophie ---------------- */
.philosophy-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.philosophy-portrait .media-frame { aspect-ratio: 4/5; }
.quote-block { margin: 0 0 32px; position: relative; padding-left: 30px; }
.quote-block::before { content: '„'; position: absolute; left: -6px; top: -18px; font-family: var(--font-hero-accent); font-size: 3.2rem; color: var(--iron); opacity: 0.5; }
.quote-block p { font-family: var(--font-hero-accent); font-style: italic; font-size: var(--fs-sub); color: var(--char); line-height: 1.5; }
.quote-cite { display: block; margin-top: 12px; font-family: var(--font-hero-display); font-style: normal; font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--iron); }
.quote-cite span { font-weight: 400; color: var(--char-faint); text-transform: none; }

/* ---------------- Register der Jahre (Geschichte-Zeitstrahl) ----------------
   Zickzack-Zeitstrahl (2026-09-12, vorher eine einspaltige Liste ohne Bilder
   je Eintrag - Kundenfeedback: "sieht einfach nur wie eine langweilige
   Historie aus"). Eintraege wechseln per .is-left/.is-right die Seite der
   Mittelachse; wer ein passendes Foto hat, bekommt ein kleines eingeklebtes
   Bild (media-frame is-tilt-*, dasselbe Motiv wie ueberall sonst fuer
   "Belegfotos") - bewusst nicht bei jedem Eintrag, ein echtes Register hat
   auch nicht zu jeder Zeile ein Bild. Der aktuelle Eintrag (.is-today) sticht
   als groesserer, gefuellter Stempel hervor - der "Sie sind hier"-Moment am
   Ende der Chronik. */
.register { position: relative; margin-top: 56px; }
.register::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 0; border-left: 2px dashed var(--husk-edge); transform: translateX(-50%); }
.register-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-bottom: 64px; }
.register-item:last-child { margin-bottom: 0; }
.register-item.is-right .register-content { grid-column: 2; }
.register-item.is-left .register-content { grid-column: 1; }
.register-stamp {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, 0) rotate(-4deg); z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: var(--track-tight);
  background: var(--husk-2); border: 3px double var(--iron-soft); color: var(--iron-soft); border-radius: 50%;
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; padding: 2px;
}
.register-stamp.is-today {
  width: 84px; height: 84px; font-size: 0.78rem; background: var(--iron); border-color: var(--iron-soft); color: var(--husk-text);
  box-shadow: 0 0 0 6px rgba(138, 54, 38, 0.22), var(--shadow-md);
}
.register-content { padding-top: 8px; }
/* Ohne Foto beginnt die Ueberschrift direkt am oberen Rand von .register-item,
   auf gleicher Hoehe wie der absolut positionierte .register-stamp (top:0,
   bis zu 84px hoch bei .is-today) - ohne diesen Abstand rutscht der Text in
   den Kreisstempel hinein (Darstellungsfehler, 2026-09-13 gemeldet bei
   "Letzte Buchung am Netz"). Bei einem Foto uebernimmt dessen Hoehe
   automatisch die noetige Distanz, siehe .register-entry-photo margin-bottom. */
.register-content.no-photo { padding-top: 84px; }
.register-entry-photo { max-width: 220px; margin-bottom: 16px; aspect-ratio: 4/3; }
.register-item.is-right .register-entry-photo { margin-left: auto; }
.register-content h3 { color: var(--husk-text); margin: 0 0 6px; }
.register-content p { font-size: var(--fs-body); color: var(--husk-text-soft); line-height: 1.65; margin: 0 0 8px; max-width: 54ch; }
.register-tally { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-tight); color: var(--iron-soft); border: 1px solid var(--husk-edge); display: inline-block; padding: 3px 9px; }

/* ---------------- Mühle & Events: "Der Pavillon im Zwielicht" ----------------
   Zweite Neugestaltung 2026-09-12 (erste Version war Fotoleiste + Kacheln im
   normalen Kornregister-Look - Kundenwunsch war eine komplett eigene
   grafische Identitaet fuer die ganze Sektion, kein wiederverwendeter Stil).
   Eigene dunkle Farbwelt (--dusk-*, siehe :root) - bewusst weder --husk noch
   --slate, eine dritte, eigenstaendige Dunkel-Variante nur fuer diese
   Sektion. Fotos in runden "Lampion"-Rahmen als Bento-Collage (greift die
   echten Lichterketten/Lampions auf den Fotos wörtlich auf), dazu sanft
   glühende Lichtpunkte im Hintergrund (Canvas+rAF, gleiches Prinzip wie die
   Mehlstaub-Partikel im Hero, siehe main.js). Angebote UND Kontakt (Anrufen/
   E-Mail) sind einheitlich als helle "Platzkarten" gestaltet (Cinzel/Gold,
   dieselbe Kupferstich-Sprache wie Hero/Navigation/Speisekarte) - wirken wie
   echte Tischkarten auf einem dunklen Abendtisch. */
.pavilion-stage { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(180deg, var(--dusk) 0%, var(--dusk-2) 55%, var(--dusk-deep) 100%); }
.pavilion-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* width/height explizit: Canvas ist ein replaced element, inset allein nimmt auf Retina die 2x-Zeichenflaeche als Layoutgroesse */
.pavilion-inner { position: relative; z-index: 2; }

.pavilion-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.pavilion-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-light); margin: 0 0 14px; }
.pavilion-title { font-family: var(--font-hero-display); font-weight: 600; font-size: clamp(1.8rem, 1.4vw + 1.4rem, 2.6rem); letter-spacing: var(--track-tight); color: var(--husk-text); margin: 0 0 16px; }
.pavilion-lede { font-family: var(--font-hero-accent); font-style: italic; font-size: var(--fs-sub); color: rgba(241, 230, 207, 0.75); max-width: 56ch; margin: 0 auto; line-height: 1.5; }

.lantern-bento { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 28px; margin-bottom: 64px; }
.lantern { position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; box-shadow: 0 0 0 1px rgba(201, 165, 92, 0.35), 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(201, 165, 92, 0.15); }
.lantern::before { content: ''; position: absolute; left: 50%; top: -22px; width: 2px; height: 24px; background: rgba(201, 165, 92, 0.5); transform: translateX(-50%); z-index: 2; }
.lantern::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5); pointer-events: none; }
.lantern img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(0.96); transition: transform var(--dur-slow) var(--ease); }
.lantern .media-credit { left: 50%; right: auto; bottom: 10%; transform: translateX(-50%); white-space: nowrap; }
.lantern.is-main { grid-row: 1/3; }
.lantern.is-sub { align-self: center; }

.placecard-row { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 22px; }
.placecard {
  background: var(--chalk); border: 1px solid var(--chalk-edge); position: relative;
  padding: 30px 26px; text-align: center; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  text-decoration: none; display: block; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.placecard::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold-dark); opacity: 0.5; pointer-events: none; }
a.placecard:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); }
.placecard-seal {
  width: 38px; height: 38px; border-radius: 50%; background: var(--gold-ink); color: var(--chalk); margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-hero-display); font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.placecard-seal svg { width: 16px; height: 16px; }
.placecard h3 { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-lead); letter-spacing: var(--track-tight); margin: 0 0 10px; color: var(--char); }
.placecard-rule { width: 44px; height: 1px; background: var(--gold-dark); margin: 0 auto 12px; }
.placecard p { margin: 0; color: var(--char-soft); font-size: var(--fs-secondary); line-height: 1.6; }
.placecard-value { display: block; margin-top: 10px; font-family: var(--font-hero-display); font-size: var(--fs-secondary); color: var(--iron); letter-spacing: var(--track-tight); text-decoration: none; }
.placecard-value:hover { text-decoration: underline; }

/* Zwei kombinierte Kaertchen statt vier einzelner (2026-09-13, Kundenwunsch:
   "Pavillon mieten und Catering dazubuchen" in einem Kaertchen, Telefon +
   E-Mail in einem "Kontakt"-Kaertchen) - .placecard-combo ist dafuer kein
   <a>-Link mehr (ein Kaertchen kann nicht zu zwei Zielen gleichzeitig
   verlinken), sondern ein reiner Rahmen um zwei eigenstaendige
   .placecard-value-Links bzw. zwei .placecard-offer-Bloecke. */
.placecard-offer:first-child { margin-bottom: 18px; }
.placecard-divider { width: 60%; height: 1px; background: var(--chalk-edge); margin: 0 auto 18px; }

@media (min-width: 680px) {
  .placecard-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .lantern-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .lantern.is-main { grid-row: auto; }
}

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20, 14, 9, 0.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base); padding: 40px; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 84vh; box-shadow: var(--shadow-lg); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(248, 242, 226, 0.1); border: 1px solid var(--husk-edge); color: var(--husk-text); border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--dur-base) var(--ease); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--iron); border-color: var(--iron); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 20px; height: 20px; }

/* ---------------- Jahreszeiten: eine Karte, ein Button ----------------
   Dritte Iteration (2026-09-12). Erster Versuch war ein Postmark-Kreis-Quartett
   nebeneinander, zweiter ein Muehlrad-Ring mit vier Speichen-Positionen und
   Dreh-Animation - beide vom Kunden zunaechst gebilligt, dann nach dem
   Ausprobieren ("hab's nur mobil getestet, aber generell too much") verworfen.
   Diese Fassung: eine einzelne Karte mit crossfadenden Slides (gleiches Prinzip
   wie `.hero-slide`/`.hero-slide.is-active` im Hero), ein einziger
   "Naechste Jahreszeit"-Button (main.js) blaettert vorwaerts durch alle 5
   Jahreszeiten inkl. neuer Sommer-Karte (Gastgarten-Foto, auch in den News
   verwendet). Beim Laden zeigt die Karte automatisch die tatsaechlich aktuelle
   Jahreszeit (`current_season_index()` in functions.php, ueber den
   Kalendermonat) - dieser Slide traegt zusaetzlich `.is-now`
   ("Gerade jetzt"-Markierung), unabhaengig davon ob man sich schon
   weitergeklickt hat. Hintergrund-/Textfarbe der Karte wechseln passend zur
   Jahreszeit (`data-color`/`data-text` je Slide, aus data/gallery.php) -
   selbe Idee wie beim verworfenen Rad, nur ohne Rotation/Speichen-Geometrie.
   Bewusst dasselbe Markup fuer Mobile und Desktop (kein separater
   Grid-Fallback mehr noetig, da nichts mehr rotiert). Reduzierte Bewegung:
   die globale `prefers-reduced-motion`-Regel oben in dieser Datei setzt
   Transition-Dauern ohnehin auf ~0, keine Extra-Logik noetig.

   Vierte Iteration (2026-09-13, Kundenfeedback "einfach nur ein Kaestchen
   mit ein bisschen Text"): die aktuelle Jahreszeit zeigt zusaetzlich einen
   echten Kuechen-/News-Teaser (`.season-extra`, siehe seasonal_menu_items()/
   seasonal_news_items() in functions.php) statt nur Stimmungstext - gibt der
   Section einen inhaltlichen Zweck. Alle anderen Jahreszeiten zeigen
   stattdessen `.season-surprise`. Da sich dadurch die Slide-Hoehe je nach
   Jahreszeit deutlich unterscheidet (2 Gerichte + 2 News vs. ein
   Ueberraschungssatz), bekam `.season-slides` dieselbe FLIP-Hoehenanimation
   wie `.tafel-stack` (siehe main.js) - sonst haette der Wechsel wieder wie
   bei der Tageskarte "verbuggt" gewirkt. Ausserdem bekam `.season-card`
   ein durchgehendes Webstoff-Muster (zwei ueberlagerte
   `repeating-linear-gradient`s, unabhaengig von der Jahreszeiten-Farbe) statt
   nur einer flachen Hintergrundfarbe ("nur ein farbiger Hintergrund ist
   langweilig") - bewusst ueber CSS-Verlaeufe statt eigener Grafik-Assets
   pro Jahreszeit, greift damit dieselbe Sackleinen-Webstruktur-Idee auf,
   die dem gesamten Kornregister-Look zugrunde liegt, statt fuenf
   verschiedene Deko-Icon-Sets (Blaetter/Schneeflocken/...) zu erfinden. */
.season-card {
  position: relative; max-width: 680px; margin: 0 auto; padding: 48px 28px 40px; border-radius: 3px; text-align: center;
  transition: background-color var(--dur-slow) var(--ease-soft);
  /* Deutlich abgeschwaechte Musterintensitaet (2026-09-13, Kundenfeedback
     "Hintergrundmuster zu intensiv") - Linien duenner (2px -> 1.5px), Abstand
     weiter (9px -> 12px Rapport) und Deckkraft etwa halbiert (0.06/0.05 ->
     0.03/0.025). Webstoff-Idee bleibt (siehe Erklaerung oben), nur als
     leiser Hinweis statt dominantem Kreuzmuster direkt hinter dem Text. */
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1.5px, transparent 1.5px 12px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.025) 0 1.5px, transparent 1.5px 12px);
}

.season-slides { position: relative; min-height: 320px; transition: height var(--dur-base) var(--ease-soft); overflow: hidden; }
.season-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 18px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-soft);
}
.season-slide.is-active { position: relative; opacity: 1; pointer-events: auto; }

.season-stamp .ring { position: relative; width: 128px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px double var(--char); margin: 0 auto; }
.season-stamp img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.15) saturate(0.9); }

.season-copy { max-width: 40ch; }
.season-now-flag {
  display: none; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--season-accent); margin: 0 0 8px;
}
.season-slide.is-now .season-now-flag { display: inline-block; }
.season-copy .label { display: block; font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-sub); letter-spacing: var(--track-tight); color: var(--char); margin: 0 0 8px; }
.season-desc { font-size: var(--fs-body); color: var(--season-ink); line-height: 1.6; margin: 0; }

/* Saisonaler Kuechen-/News-Teaser (2026-09-13, nur bei der aktuellen
   Jahreszeit, siehe seasonal_menu_items()/seasonal_news_items() in
   functions.php) bzw. der Ueberraschungs-Hinweis bei allen anderen. Gibt
   der Section einen inhaltlichen Zweck statt nur Stimmungsbild + Text
   ("einfach nur ein Kaestchen", Kundenfeedback). */
.season-extra { width: 100%; max-width: 46ch; margin-top: 6px; }
.season-extra-group { padding-top: 16px; margin-top: 16px; border-top: 1px dashed var(--char-faint); }
.season-extra-group:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.season-extra-heading {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--season-accent); margin: 0 0 10px;
}
.season-dish-list, .season-news-list { list-style: none; margin: 0 0 10px; padding: 0; }
.season-dish-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px dashed var(--chalk-edge); font-size: var(--fs-secondary); text-align: left;
}
.season-dish-list li:last-child { border-bottom: none; }
.season-dish-name { color: var(--char); }
.season-dish-price { font-family: var(--font-mono); color: var(--season-ink); white-space: nowrap; }
.season-news-list li { padding: 5px 0; text-align: left; }
.season-news-list a { color: var(--char); font-size: var(--fs-secondary); text-decoration: underline; text-decoration-color: var(--chalk-edge); text-underline-offset: 3px; }
.season-news-list a:hover { text-decoration-color: currentColor; }
.season-extra-link {
  display: inline-block; margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--season-ink); text-decoration: none;
}
.season-extra-link:hover { color: var(--season-accent); }
.season-surprise { font-family: var(--font-hero-accent); font-style: italic; font-size: var(--fs-lead); color: var(--season-ink); margin: 0; }

.season-advance-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 11px 22px; background: transparent;
  border: 1px solid var(--gold-dark); border-radius: 0; color: var(--char); cursor: pointer;
  font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.season-advance-btn:hover { background: var(--gold); color: var(--husk); border-color: var(--gold); }
.season-advance-btn svg { width: 16px; height: 16px; }

/* ---------------- Bewertungen: Gästebuch (2026-09-12) ----------------
   Ersetzt die vorherige Scroll-Kartenreihe (`.testimonial-track`, alle
   Bewertungen nebeneinander) - wirkte neben den mittlerweile bespoke
   gestalteten Sektionen (Abreisskalender, Schiefertafel, Zwielicht,
   Jahreszeiten-Karte) zu generisch. Neues Motiv: eine aufgeschlagene
   Gästebuch-Doppelseite mit handschriftlich wirkenden Einträgen. Bewusst
   NUR eine kuratierte Auswahl statt aller Bewertungen (siehe
   data/testimonials.php) plus Link zum echten Google-Profil für den Rest
   (`google_reviews_url` in data/settings.php). Bewusst KEIN viertes
   eigenständiges Farb-/Font-System wie bei Pavillon/Tageskarte - reine
   Kornregister-Palette (Chalk-Papier, Husk-Einband, Iron-Stempel) plus die
   bereits bestehende Caveat-Handschrift von der Tageskarte
   (`--font-chalk`, siehe CLAUDE.md "dritte und letzte Ausnahme" - hier
   bewusst wiederverwendet statt eine vierte Schriftart einzuführen). */
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; }
.stars .is-empty { color: var(--chalk-edge); }

.guestbook { position: relative; background: var(--husk); border-radius: 4px; padding: 14px; box-shadow: var(--shadow-md), 0 2px 0 rgba(255, 255, 255, 0.25) inset; perspective: 1600px; }
.guestbook-spine { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 30px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%, rgba(0, 0, 0, 0.35)); z-index: 2; pointer-events: none; }
/* Umblaettern-Animation (2026-09-13): .guestbook-spread ist jetzt eine
   eigene 2-Spalten-Raster-Box (statt display:contents) statt nur ein
   Wrapper, damit main.js sie beim Blaettern per rotateY() drehen und
   ausblenden kann, bevor die naechste Doppelseite eingedreht wird - siehe
   "Bewertungen: Gästebuch umblättern" in main.js. transform-style:flat
   (Default) reicht, .guestbook liefert die perspective(). */
.guestbook-spread { display: none; }
.guestbook-spread.is-active { display: grid; grid-template-columns: 1fr 1fr; transition: transform var(--dur-base) var(--ease-soft), opacity var(--dur-base) var(--ease-soft); }
.guestbook-spread.is-turning-out-next { transform: rotateY(-18deg); opacity: 0; }
.guestbook-spread.is-turning-out-prev { transform: rotateY(18deg); opacity: 0; }
.guestbook-spread.is-turning-in-next-start, .guestbook-spread.is-turning-in-prev-start { transition: none; }
.guestbook-spread.is-turning-in-next-start { transform: rotateY(18deg); opacity: 0; }
.guestbook-spread.is-turning-in-prev-start { transform: rotateY(-18deg); opacity: 0; }
.guestbook-page { position: relative; background: linear-gradient(135deg, var(--chalk), var(--chalk-edge) 220%); padding: 30px 26px 26px; }
.guestbook-page.is-left { border-radius: 3px 0 0 3px; }
.guestbook-page.is-right { border-radius: 0 3px 3px 0; }
.guestbook-page-head .eyebrow { margin-bottom: 6px; }
.guestbook-page-head h2 { font-size: 1.5rem; margin: 0 0 18px; }

.guestbook-stamp {
  position: absolute; top: 24px; right: 22px; width: 88px; height: 88px; border-radius: 50%;
  border: 3px double var(--iron); color: var(--iron); display: flex; flex-direction: column; gap: 2px;
  align-items: center; justify-content: center; transform: rotate(8deg); font-family: var(--font-mono);
}
.guestbook-stamp-rating { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.guestbook-stamp .stars { color: var(--iron); }
.guestbook-stamp .stars svg { width: 9px; height: 9px; }
.guestbook-stamp-count { font-size: 0.48rem; letter-spacing: var(--track-tight); text-align: center; }

.guestbook-entries { position: relative; z-index: 1; }
.guestbook-entry { padding: 10px 0 14px; border-bottom: 1px dashed var(--chalk-edge); font-family: var(--font-chalk); }
.guestbook-entry:last-child { border-bottom: none; }
.guestbook-entry .stars { margin-bottom: 4px; }
.guestbook-entry .stars svg { width: 11px; height: 11px; }
.guestbook-entry p { margin: 0 0 4px; font-size: var(--fs-sub); line-height: 1.3; color: var(--char); }
.guestbook-entry.is-ink-b p { color: var(--iron-dark); }
.guestbook-sig { display: block; text-align: right; font-family: var(--font-chalk); font-size: var(--fs-sub); color: inherit; }
.guestbook-entry:nth-child(odd) { transform: rotate(-0.4deg); }
.guestbook-entry:nth-child(even) { transform: rotate(0.35deg); }

.guestbook-google-link {
  position: absolute; bottom: 18px; right: 26px; left: 26px; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-tight); color: var(--char-soft);
  text-decoration: none; border-top: 1px dashed var(--chalk-edge); padding-top: 10px;
}
.guestbook-google-link:hover { color: var(--iron); }
/* Platz fuer den absolut positionierten Link (~40px) - auf dem Handy, wo die
   rechte Seite unter der linken steht, ueberlagerte er sonst die letzte
   Signatur (2026-09-24 auf dem Handy-Screenshot aufgefallen). */
.guestbook-page.is-right { padding-bottom: 72px; }

.guestbook-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.page-btn {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-small); letter-spacing: var(--track-tight); text-transform: uppercase;
  background: transparent; border: 1.5px solid var(--char); color: var(--char); padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.page-btn:hover:not(:disabled) { background: var(--char); color: var(--sack); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 480px) {
  .guestbook-controls { gap: 10px; }
  .page-btn { padding: 10px 12px; font-size: var(--fs-label); white-space: nowrap; }
}
.page-dots { display: flex; gap: 7px; }
.page-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--chalk-edge); }
.page-dots span.is-active { background: var(--iron); }

@media (max-width: 760px) {
  .guestbook-spread.is-active { grid-template-columns: 1fr; }
  .guestbook-spine { display: none; }
  .guestbook-page.is-left { border-radius: 3px 3px 0 0; }
  .guestbook-page.is-right { border-radius: 0 0 3px 3px; }
  .guestbook-stamp { position: static; margin: 0 0 18px; transform: rotate(-4deg); }
  .guestbook-entry p { font-size: var(--fs-sub); }
}

/* ---------------- Reservierung ---------------- */
.reservation-card { background: var(--chalk); border: 1px solid var(--chalk-edge); box-shadow: var(--shadow-lg); padding: 46px; max-width: 760px; margin: 0 auto; }
.form-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 38px; justify-content: center; font-family: var(--font-hero-display); }
.form-step-dot { display: flex; align-items: center; gap: 10px; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--char-faint); }
.form-step-dot .num { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--char-faint); display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.form-step-dot.is-active { color: var(--char); }
.form-step-dot.is-active .num, .form-step-dot.is-done .num { background: var(--iron); border-color: var(--iron); color: var(--chalk); }
.form-step-line { width: 30px; height: 1.5px; background: var(--sack-edge); }

.form-panel { display: none; }
.form-panel.is-active { display: block; animation: fadeUp var(--dur-base) var(--ease); }

.field-group { margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
label { display: block; font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--char); margin-bottom: 9px; }
label .optional { font-weight: 400; text-transform: none; color: var(--char-faint); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--gold-dark);
  background: var(--sack); font-family: var(--font-body); font-size: var(--fs-body); color: var(--char);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
textarea { resize: vertical; min-height: 100px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--iron); box-shadow: 0 0 0 3px rgba(138, 54, 38, 0.14); }
input::placeholder, textarea::placeholder { color: var(--char-faint); }
select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9853f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
select:invalid { color: var(--char-faint); }
.hint { font-size: var(--fs-small); color: var(--char-faint); margin-top: 6px; }

/* ---------------- Reservierung: eigener Kalender-Datepicker (2026-09-13) ----------------
   Ersetzt `<input type="date">` fuer die Terminwahl: native Datums-Picker
   koennen laut HTML-Spezifikation KEINE einzelnen Tage im Kalenderblatt
   ausgrauen/deaktivieren (nur ein zusammenhaengender min/max-Bereich ist
   moeglich) - fuer "Ruhetag/Schliesstag schon in der Auswahl ausgrauen"
   (Kundenwunsch) bleibt nur ein selbst gebautes Kalenderraster. Rein
   vanilla JS (kein Picker-Framework), nutzt dieselbe isDateValid()-Logik
   wie die Fehlervalidierung (main.js) - ein einzelner Tag-Button bekommt
   schlicht das native `disabled`-Attribut, wenn er nicht buchbar ist
   (Ruhetag, Schliess-/Urlaubstag oder vor minDate) - das uebernimmt
   Tab-Reihenfolge/Screenreader-Ansage automatisch, ohne eigene ARIA-
   Rollen-Choreographie nachbauen zu muessen. */
.date-picker-field { position: relative; }
.date-picker-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--gold-dark);
  background: var(--sack); font-family: var(--font-body); font-size: var(--fs-body); color: var(--char-faint);
  cursor: pointer; text-align: left; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.date-picker-trigger.has-value { color: var(--char); }
.date-picker-trigger:focus, .date-picker-trigger[aria-expanded="true"] { outline: none; border-color: var(--iron); box-shadow: 0 0 0 3px rgba(138, 54, 38, 0.14); }
.date-picker-trigger svg { width: 18px; height: 18px; flex: none; color: var(--char-faint); }

.date-picker-popover {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 300px; max-width: 90vw;
  background: var(--chalk); border: 1px solid var(--chalk-edge); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 16px;
}
.date-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.date-picker-month { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-secondary); letter-spacing: var(--track-caps); color: var(--char); text-transform: uppercase; }
.date-picker-nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--sack-edge); background: transparent;
  color: var(--char); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.date-picker-nav:hover:not(:disabled) { background: var(--char); color: var(--sack); border-color: var(--char); }
.date-picker-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.date-picker-nav svg { width: 15px; height: 15px; }
.date-picker-weekdays, .date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.date-picker-weekdays span { text-align: center; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-tight); color: var(--char-faint); text-transform: uppercase; padding-bottom: 6px; }
.date-picker-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--char); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.date-picker-day.is-outside { visibility: hidden; }
.date-picker-day:hover:not(:disabled) { background: var(--sack); border-color: var(--sack-edge); }
.date-picker-day.is-today { border-color: var(--iron); }
.date-picker-day.is-selected { background: var(--iron); color: var(--sack); }
.date-picker-day:disabled { color: var(--chalk-edge); cursor: not-allowed; }
.date-picker-legend { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: var(--fs-label); color: var(--char-faint); }
.date-picker-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--chalk-edge); flex: none; }

@media (max-width: 480px) {
  .date-picker-popover { left: 50%; transform: translateX(-50%); width: 280px; }
}

.checkbox-row { display: flex; align-items: flex-start; gap: 12px; }
.checkbox-row input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--iron); flex: none; }
.checkbox-row label { margin: 0; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-secondary); color: var(--char-soft); }

.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; }
.form-actions .spacer { flex: 1; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; text-align: center; padding: 50px 10px; }
.form-status.is-active { display: block; animation: fadeUp var(--dur-slow) var(--ease); }
.status-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--chalk-edge); border-top-color: var(--iron); margin: 0 auto 24px; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-icon { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px double currentColor; }
.status-icon.is-success { background: rgba(79, 107, 82, 0.12); color: var(--verdigris-dark); }
.status-icon.is-error { background: rgba(163, 49, 26, 0.1); color: var(--danger); }
.status-icon svg { width: 26px; height: 26px; }
.confirmation-box { background: var(--sack); border: 1px dashed var(--sack-edge); padding: 18px 22px; text-align: left; margin: 24px auto; max-width: 420px; font-family: var(--font-mono); font-size: var(--fs-secondary); }
.confirmation-box div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--sack-edge); }
.confirmation-box div:last-child { border-bottom: none; }
.confirmation-box span:first-child { color: var(--char-faint); text-transform: uppercase; letter-spacing: var(--track-tight); font-size: var(--fs-label); }
.confirmation-box span:last-child { font-weight: 700; color: var(--char); text-align: right; }
.notice-box { background: rgba(79, 107, 82, 0.08); border: 1px dashed var(--verdigris); padding: 13px 17px; font-size: var(--fs-small); color: var(--char); margin-top: 24px; text-align: left; }
.form-error-text { color: var(--danger); font-family: var(--font-mono); font-size: var(--fs-small); margin-top: 6px; display: none; }
.field-group.has-error input, .field-group.has-error select, .field-group.has-error textarea, .field-group.has-error .date-picker-trigger { border-color: var(--danger); }
.field-group.has-error .form-error-text { display: block; }

/* ---------------- Footer ---------------- */
.hours-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-secondary); }
.hours-table th { text-align: left; font-family: var(--font-hero-display); font-weight: 600; color: var(--gold-light); padding-bottom: 10px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--track-wide); }
.hours-table td { padding: 7px 0; border-top: 1px dashed var(--husk-edge); font-variant-numeric: tabular-nums; }
.hours-table td:last-child { text-align: right; color: var(--husk-text-soft); }
.hours-table tr.is-today td { color: var(--gold); font-weight: 700; }
.map-frame { border: 1px solid var(--husk-edge); overflow: hidden; }
/* Fusszeile: Eingangsfoto und Karte nebeneinander, gleich gross (3:2), beide im Papierrahmen wie alle Bilder der Seite */
.footer-place { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
.footer-place .photo-slot { margin: 0; }
.footer-place .map-frame { position: relative; aspect-ratio: 3 / 2; border: 6px solid var(--chalk); background: var(--chalk); box-shadow: var(--shadow-sm), 0 0 0 1px var(--chalk-edge); }
/* Statisches Kartenbild vom eigenen Server (kein Kontakt zu OpenStreetMap beim Laden), Quellenangabe Pflicht */
.map-link { display: block; position: absolute; inset: 0; }
.map-link img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.18) saturate(0.85) brightness(0.97); }
.map-attribution { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 3px 8px; background: rgba(255, 255, 255, 0.82); color: #333; font-family: var(--font-body); font-size: 0.7rem; line-height: 1.4; }
.map-attribution a { color: inherit; text-decoration: underline; }
.map-route { z-index: 2; }
/* Rechtstexte (Impressum, Datenschutz, Barrierefreiheit) */
.legal h2 { font-size: var(--fs-sub); margin: 40px 0 10px; }
.legal p, .legal li, .legal dd { max-width: 68ch; }
.legal ul { padding-left: 1.2em; margin: 8px 0 12px; }
.legal li { margin: 6px 0; }
.legal-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; margin: 8px 0 12px; }
.legal-facts dt { font-family: var(--font-hero-display); font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--char-soft); margin-top: 10px; }
.legal-facts dd { margin: 0; }
.legal-meta { margin-top: 36px; font-size: var(--fs-small); color: var(--char-soft); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
@media (min-width: 720px) { .legal-facts { grid-template-columns: 17em 1fr; gap: 6px 24px; } .legal-facts dt { margin-top: 0; padding-top: 2px; } }
.map-route { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; background: rgba(14, 26, 28, 0.82); color: var(--gold-light); font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; }
.map-route:hover { background: rgba(14, 26, 28, 0.95); }
.map-route svg { width: 14px; height: 14px; }
@media (min-width: 720px) {
  .footer-place.has-photo { grid-template-columns: 1fr 1fr; }
  .footer-place:not(.has-photo) .map-frame { max-width: 50%; }
}

/* Footer im Zwielicht (2026-09-13): Husk-Braun ersetzt durch dieselbe
   Dusk-Verlaufsflaeche wie beim Pavillon (siehe .pavilion-stage) - bewusst
   OHNE die dortigen Lichtpunkte (Kundenwunsch: "nur die Farbe aendern",
   die Canvas-Animation waere auf JEDER Unterseite gelaufen, nicht nur
   einmal wie beim Pavillon). Husk als Flaechenfarbe bleibt damit auf
   #geschichte (`.section-dark`), den Betriebsmeldungs-Banner (`.banner`)
   und das Gaestebuch (`.guestbook`, bewusst weiterhin Kornregister-Palette,
   siehe CLAUDE.md) beschraenkt - nicht komplett verschwunden, aber der
   Footer als groesste/praesenteste Husk-Flaeche der Seite ist raus. */
.site-footer { background: linear-gradient(180deg, var(--dusk) 0%, var(--dusk-2) 55%, var(--dusk-deep) 100%); color: var(--husk-text-soft); padding: 90px 0 30px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand .brand-mark { color: var(--husk-text); }
.footer-brand span { font-family: var(--font-hero-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps); font-size: var(--fs-sub); color: var(--husk-text); }
.footer-links { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-small); }
.footer-links a { color: var(--husk-text-soft); text-decoration: none; }
.footer-links a:hover { color: var(--husk-text); text-decoration: underline; }
.footer-bottom { border-top: 1px dashed var(--husk-edge); margin-top: 60px; padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--husk-text-soft); opacity: 0.75; }
.footer-bottom a { color: inherit; }

/* ---------------- Contact grid layout ---------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }

/* ---------------- Responsive ---------------- */
@media (min-width: 720px) {
  .field-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .philosophy-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1.1fr 0.9fr; }
}
@media (min-width: 900px) {
  /* Ab hier ersetzt eine zentrierte Diagonal-Kaskade (ALLE Eintraege
     sichtbar, kein Deckel bei 3) die vorherige Kombination aus gedeckeltem
     Stapel + separater .news-index-Liste daneben (2026-09-14 entfernt,
     siehe CLAUDE.md "Aktuelles" - der Kunde empfand die Liste als
     "langweilig neben der coolen gestapelten Kartenansicht"). Die Kaskade
     selbst ist JS-getrieben (main.js, "News-Stapel"): fixe Kartenbreite
     hier in CSS, aber Position/Abstand/Zentrierung werden dort live aus der
     tatsaechlichen .stack-Breite berechnet, damit die Gruppe als GANZES
     zentriert bleibt (oberste/aktuellste Karte immer links, aelteste immer
     rechts) statt an einer festen Position zu haengen. */
  .stack-col { max-width: none; margin: 0; }
  .stack { height: 500px; }
  .stack-card { inset: auto; top: 72px; left: 0; width: 300px; height: 420px; }
  /* Zurueckliegende Karten zeigen nur einen schmalen Streifen ihrer rechten
     Seite - der zentrierte Originaltext (Datum/Titel/Teaser) wuerde dort
     abgeschnitten und mit dem Eckenlabel kollidieren. Deshalb wird er auf
     zurueckliegenden Karten ausgeblendet und stattdessen nur das Label
     gezeigt, dessen Breite main.js je Kartenabstand als --peek-w setzt. */
  .stack-card:not(.is-front) :is(.date-block, .card-title, .card-teaser) { visibility: hidden; }
  .stack-card:not(.is-front) .card-peek {
    display: block; position: absolute; top: 44px; right: 16px; width: var(--peek-w, 150px); text-align: right;
    font-family: var(--font-mono); font-size: var(--fs-label); color: var(--char-soft); line-height: 1.4;
  }
  .stack-card .card-peek b {
    display: block; font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-secondary); line-height: 1.25;
    color: var(--char); margin-bottom: 4px;
  }
}
@media (max-width: 899px) {
  .hero-seal { width: 72px; height: 72px; top: 100px; right: 18px; font-size: 0.54rem; }
}
/* Eigener, hoeherer Breakpoint fuer die Header-Navigation (statt 900px):
   seit 2026-09-13 stehen 9 statt 5 Links in .main-nav (Pavillon,
   Jahreszeiten, Bewertungen, Kontakt ergaenzt) - selbst mit kleinerer
   Schrift/Abstaenden (siehe .main-nav weiter oben) braucht das mehr als
   900px, sonst ueberlappt/sprengt die Navigation den Header. Unterhalb
   dieser Breite bleibt es beim Burger-Menu (.mobile-nav), auch auf
   Tablet-/kleinen Laptop-Breiten, wo die 9 Links schlicht nicht
   nebeneinanderpassen. */
@media (min-width: 1340px) {
  .main-nav { display: flex; }
  .quick-contact-icon { display: flex; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
}
@media (max-width: 1339px) {
  .site-header.is-on-dark:not(.is-scrolled) .quick-contact-icon { display: none; }
  .header-actions > .btn-primary { display: none; }
}
@media (max-width: 640px) {
  .register::before { left: 25px; }
  .register-item { grid-template-columns: 1fr; padding-left: 64px; column-gap: 0; }
  .register-item.is-left .register-content, .register-item.is-right .register-content { grid-column: 1; }
  .register-stamp { left: 0; transform: translate(0, 0) rotate(-4deg); width: 50px; height: 50px; font-size: 0.56rem; }
  .register-stamp.is-today { width: 58px; height: 58px; font-size: 0.6rem; }
  .register-entry-photo, .register-item.is-right .register-entry-photo { margin-left: 0; max-width: 160px; }
  .stack { height: 440px; }
  .date-num { font-size: 2.9rem; }
  .stack-card.is-back-1 { transform: translate(14px, -14px) rotate(3deg) scale(0.99); }
  .stack-card.is-back-2 { transform: translate(26px, -26px) rotate(-3.6deg) scale(0.98); }
  .stack-card.is-hidden { transform: translate(38px, -38px) rotate(-5deg) scale(0.97); }
  .menu-card { padding: 28px 20px; }
  .tafel-course-name { font-size: 1.5rem; }
}

/* ---------------- Print ---------------- */
@media print {
  .site-header, .mobile-nav, .hero, .scroll-cue, .site-footer,
  #aktuelles, .news-lightbox, #philosophie, #geschichte, #muehle-events, #jahreszeiten, #bewertungen, #reservierung,
  .food-strip-head, .food-strip, .menu-toolbar .btn, .tafel-section { display: none !important; }
  body { background: #fff; }
  .menu-panel { display: block !important; }
  .menu-tab, .menu-next { display: none; }
}

/* ---------------- Barrierefreiheit (2026-09-25) ---------------- */
/* Sprunglink: unsichtbar, bis er per Tab den Fokus bekommt (vorher stand er fest ausserhalb des Bildes) */
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 999; padding: 12px 18px;
  background: var(--chalk); color: var(--char); border: 1px solid var(--gold-dark); text-decoration: none;
  font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-caps);
}
.skip-link:focus { top: 12px; }
/* Fokus per Programm (Schritt-Gruppen im Formular): kein Rahmen um den ganzen Block */
.form-panel:focus, .form-status h3:focus { outline: none; }
/* Schalter "Bewegung anhalten" im Hero (neben den Bildpunkten) */
.hero-dots { align-items: center; }
.hero-dots .hero-pause {
  box-sizing: border-box; width: 44px; height: 44px; padding: 0; margin-right: 8px; border: none; border-radius: 0;
  background: none; color: rgba(248, 242, 226, 0.75); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease);
}
.hero-dots .hero-pause:hover { color: #fff; }
.hero-pause svg { width: 18px; height: 18px; }
.hero-pause .icon-play { display: none; }
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }
.hero.is-paused .hero-slide img { animation-play-state: paused; }
.hero-dots .hero-pause:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -4px; }

/* ---------------- Bildplaetze (2026-09-25) ----------------
   Stellen, fuer die noch Fotos nachzureichen sind (functions.php photo_slots()). Mit Foto:
   normales Bild im festen Seitenverhaeltnis. Ohne Foto: gekennzeichneter Platzhalter - nur auf
   Entwicklungsrechnern oder mit ?platzhalter=1 sichtbar, nie automatisch auf dem oeffentlichen Server.
   Farben kommen aus currentColor, dadurch passt der Platzhalter auf hellen wie dunklen Sektionen. */
.photo-slot { position: relative; margin: 0; overflow: hidden; width: 100%; }
.photo-slot.is-band { margin: 0 auto 56px; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Echte Fotos tragen denselben Papierrahmen wie alle anderen Bilder der Seite (.media-frame). Der Platzhalter bleibt gestrichelt. */
.photo-slot.has-photo { border: 6px solid var(--chalk); background: var(--chalk); box-shadow: var(--shadow-sm), 0 0 0 1px var(--chalk-edge); }
.photo-slot-caption {
  position: absolute; left: 0; bottom: 0; padding: 8px 16px; background: rgba(14, 26, 28, 0.72); color: #f6eed6;
  font-family: var(--font-hero-display); font-size: var(--fs-small); letter-spacing: var(--track-label); text-transform: uppercase;
}
.slot-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; }
.photo-slot.is-placeholder {
  border: 1.5px dashed currentColor; color: var(--char-soft);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 7%, transparent) 0 14px, transparent 14px 28px);
  display: flex; align-items: center; justify-content: center; min-height: 190px;
}
.site-footer .photo-slot.is-placeholder, #reservierung .photo-slot.is-placeholder, #muehle-events .photo-slot.is-placeholder { color: var(--husk-text-soft, #d9c9a3); }
.photo-slot-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 22px; text-align: center; max-width: 560px; }
.photo-slot-inner svg { width: 34px; height: 34px; opacity: 0.8; }
.photo-slot-tag {
  padding: 3px 10px; border: 1px solid currentColor; font-family: var(--font-hero-display); font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.photo-slot-title { font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-lead); letter-spacing: var(--track-caps); text-transform: uppercase; }
.photo-slot-size { font-size: var(--fs-label); letter-spacing: var(--track-tight); opacity: 0.85; }
.photo-slot-hint { font-family: var(--font-hero-accent); font-style: italic; font-size: var(--fs-secondary); line-height: 1.4; opacity: 0.9; }
.menu-panel .photo-slot.is-band { margin-bottom: 28px; }
.site-footer .photo-slot.is-band { margin-bottom: 44px; }
.site-footer .contact-grid .photo-slot:not(.is-band) { margin-top: 22px; }
@media (max-width: 700px) {
  .slot-duo { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .photo-slot.is-band { margin-bottom: 36px; }
  /* Baender sind am Handy zu flach: dort 4:3, das Motiv wird mittig ausgeschnitten */
  .photo-slot.is-band { aspect-ratio: 4 / 3 !important; }
}
@media print { .photo-slot.is-placeholder { display: none; } }

/* Abweichende Zeiten unter der Oeffnungszeiten-Tabelle (Fuss) */
.hours-special { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--gold-dark); }
.hours-special-title { margin: 0 0 8px; font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-secondary); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-light); }
.hours-special ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hours-special li { font-size: var(--fs-secondary); line-height: 1.45; color: var(--husk-text-soft); }
.hours-special strong { color: var(--husk-text); font-weight: 600; }

/* Allergen-Hinweis unter der Speisekarte (steht auch im Ausdruck) */
.menu-allergen-note { margin: 22px auto 0; max-width: 64ch; text-align: center; font-family: var(--font-hero-accent); font-style: italic; font-size: var(--fs-lead); line-height: 1.45; color: var(--char-soft); }
.menu-allergen-note strong { font-style: normal; font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-ink); }

/* ---------------------------------------------------------------------
   Speisekarte zum Ausdrucken (speisekarte-drucken.php, 2026-09-28) - eine
   eigenstaendige Seite, kein Teil der normalen Website-Navigation. Reine
   Bildschirm-Ansicht bleibt schlicht/lesbar (falls der Druckdialog
   abgebrochen wird), @media print blendet Werkzeugleiste aus und teilt die
   Kategorien sauber auf Seiten auf.
   ===================================================================== */
body.menu-print-page { background: var(--chalk); color: var(--char); font-family: var(--font-body); margin: 0; }
.menu-print-toolbar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; gap: 12px; padding: 14px; background: var(--chalk); border-bottom: 1px solid var(--gold-dark); }
.menu-print { max-width: 720px; margin: 0 auto; padding: 56px 28px 72px; }
.menu-print-header { text-align: center; margin-bottom: 44px; }
.menu-print-logo { display: inline-block; width: 56px; color: var(--char); margin-bottom: 14px; }
.menu-print-logo svg { display: block; width: 100%; height: auto; }
.menu-print-header h1 { margin: 0 0 6px; font-family: var(--font-hero-display); font-weight: 600; font-size: 1.9rem; letter-spacing: var(--track-caps); text-transform: uppercase; }
.menu-print-claim { margin: 0; font-family: var(--font-hero-accent); font-style: italic; color: var(--char-soft); }
.menu-print-category { margin-top: 40px; break-inside: avoid; }
.menu-print-category:first-of-type { margin-top: 0; }
.menu-print-category h2 { margin: 0 0 18px; text-align: center; font-family: var(--font-hero-display); font-weight: 600; font-size: 1.2rem; letter-spacing: var(--track-caps); text-transform: uppercase; border-bottom: 1px solid var(--gold-dark); padding-bottom: 10px; break-after: avoid; }
.menu-print-subheading { margin: 20px 0 8px; font-family: var(--font-hero-display); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-ink); break-after: avoid; }
/* menu-print-item ist eine Flex-Zeile mit align-items:baseline (Name/Fuelllinie/Preis auf einer Grundlinie).
   menu-print-item-main war zusaetzlich selbst flex-wrap mit align-self:end auf der Fuelllinie - das ging bei
   einer kurzen Zeile (nur der Name) zufaellig gut aus, weil die Zeile dann nur eine Zeile hoch war. Sobald ein
   Gericht einen Zusatztext hat, wird menu-print-item-main zwei Zeilen hoch, und align-self:end zieht die
   Fuelllinie an das untere Ende dieser jetzt hoeheren Zeile - sie landete dadurch neben/unter dem Zusatztext statt
   neben dem Namen (Kundenmeldung 2026-09-28). Fix nach demselben Muster wie die Bildschirm-Speisekarte
   (.menu-item weiter oben): menu-print-item-main ist kein Flex-Container mehr (Name/Badges bleiben normale Inline-
   Elemente, umbrechen von selbst; der Zusatztext ist ein eigener Block darunter), und die Fuelllinie wird per
   kleinem translateY nah an die Grundlinie herangezogen statt per align-self an die (jetzt variable) Boxhoehe
   gebunden zu sein - bleibt dadurch IMMER auf Hoehe des Namens, unabhaengig davon, ob darunter noch Text folgt. */
.menu-print-item { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; break-inside: avoid; }
.menu-print-item-main { max-width: 60ch; }
.menu-print-item-name { font-weight: 600; }
.menu-print-badge { margin-left: 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold-ink); }
.menu-print-item-desc { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--char-soft); }
.menu-print-item-fill { flex: 1 1 auto; border-bottom: 1px dotted var(--sack-edge); margin: 0 6px; min-width: 16px; transform: translateY(-4px); }
.menu-print-item-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--iron); }
.menu-print-allergen { margin: 44px auto 0; max-width: 60ch; text-align: center; font-size: 0.85rem; line-height: 1.5; color: var(--char-soft); }
.menu-print-allergen strong { font-family: var(--font-hero-display); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; font-size: var(--fs-small); color: var(--gold-ink); }
.menu-print-footer { margin-top: 28px; text-align: center; font-size: 0.8rem; color: var(--char-soft); }
@media print {
  .no-print { display: none !important; }
  body.menu-print-page { background: #fff; }
  .menu-print { max-width: none; padding: 0 8mm; }
}