/* Standarddesign "Ein Verlauf, ein Siegel" (seit 2026-09-24) - wird per
   look_verlauf() (functions.php) geladen, ausser ?look=alt ist per Cookie
   aktiv, und ueberschreibt style.css ueber body.look-verlauf.
   Idee: eine Grundfarbe (Papier), ein Dunkel (Dusk), ein fliessender
   Uebergang; vier Schriften (Cinzel, Cormorant, Archivo, Caveat nur auf der
   Tageskarte); keine Einblend-Effekte. */

body.look-verlauf {
  --font-display: var(--font-hero-display);
  --font-mono: var(--font-body);
  --slate: var(--dusk-deep);
  --paper: #f6eed6;
  background: var(--paper);
}

/* Kein Fade-up auf allem */
body.look-verlauf [data-reveal],
body.look-verlauf [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Schrift: Beschriftungen in Cinzel statt Mono ---------- */
body.look-verlauf .eyebrow,
body.look-verlauf .pavilion-eyebrow,
body.look-verlauf .tafel-eyebrow,
body.look-verlauf .tafel-course-label,
body.look-verlauf .tafel-date-tag .tafel-date,
body.look-verlauf .date-meta,
body.look-verlauf .register-tally,
body.look-verlauf .stack-caption,
body.look-verlauf .news-lightbox-date,
body.look-verlauf .guestbook-google-link,
body.look-verlauf .date-picker-weekdays span {
  font-family: var(--font-hero-display); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
}
body.look-verlauf .eyebrow { font-size: var(--fs-small); color: var(--gold-ink); }
body.look-verlauf .eyebrow::before { background: var(--gold-dark); width: 30px; }
body.look-verlauf .pavilion-eyebrow { font-size: var(--fs-small); }

/* ---------- Verlauf: Papier -> Dusk ---------- */
body.look-verlauf #aktuelles { background: linear-gradient(180deg, #f6eed6 0%, var(--sack) 100%); }
body.look-verlauf #kueche.section-alt { background: var(--sack); }
body.look-verlauf #jahreszeiten.section-alt { background: linear-gradient(180deg, var(--sack) 0%, var(--sack-2) 100%); }

/* Geschichte: gleiche Schrift und Farbwelt wie der Rest, nur anderes Layout */
body.look-verlauf #geschichte {
  --husk: var(--sack-2);
  --husk-2: var(--sack);
  --husk-text: var(--char);
  --husk-text-soft: var(--season-ink);
  --husk-edge: rgba(107, 83, 38, 0.4);
  background-color: var(--sack-2);
}
body.look-verlauf #geschichte .eyebrow { color: var(--gold-ink); }
body.look-verlauf #geschichte .eyebrow::before { background: var(--gold-dark); }
body.look-verlauf #geschichte .register-stamp { border-color: var(--gold-dark); color: var(--gold-ink); }
body.look-verlauf #geschichte .register-stamp.is-today { background: var(--iron); border-color: var(--gold-light); color: var(--chalk); }
body.look-verlauf #geschichte .register-tally { color: var(--gold-ink); border-color: rgba(107, 83, 38, 0.4); }

/* Philosophie -> Pavillon: bewusst KEIN Verlauf (wirkt bei Vollbreite schnell
   nach Praesentationsfolie), sondern eine klare Schwelle: scharfe Kante, feine
   Goldlinie, das Siegel sitzt mittig auf der Grenze. */
body.look-verlauf #philosophie { background: var(--sack-2); }
body.look-verlauf #philosophie::before {
  content: ''; position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); z-index: 5;
  width: 92px; height: 92px; border-radius: 50%; background: var(--dusk-2);
  border: 3px double var(--gold-light); outline: 1px solid var(--dusk-2); outline-offset: 4px;
  box-shadow: 0 8px 24px rgba(14, 26, 28, 0.35);
}
/* Das Logo (einfarbig schwarz in logo.svg) wird per Alpha-Maske in Gold
   eingefaerbt - ohne zweite, eingefaerbte Kopie der 55-KB-Datei. */
body.look-verlauf #philosophie::after {
  content: ''; position: absolute; left: 50%; bottom: -23px; transform: translateX(-50%); z-index: 6;
  width: 58px; height: 46px; background: var(--gold-light);
  -webkit-mask: url('../img/brand/logo.svg') center / contain no-repeat; mask: url('../img/brand/logo.svg') center / contain no-repeat;
  -webkit-mask-mode: alpha; mask-mode: alpha;
}
body.look-verlauf .pavilion-stage {
  border-top: 1px solid var(--gold-dark); padding-top: 140px;
  background: linear-gradient(180deg, var(--dusk-2) 0%, var(--dusk) 40%, var(--dusk-deep) 100%);
}

/* Bewertungen und Reservierung im Dusk: Gaestebuch und Formular bleiben helles Papier */
body.look-verlauf #bewertungen { background: var(--dusk-deep); }
body.look-verlauf .guestbook { background: var(--dusk-2); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
body.look-verlauf .guestbook-controls .page-btn { color: var(--husk-text); border-color: var(--husk-edge); background: transparent; }
body.look-verlauf .guestbook-controls .page-btn:disabled { opacity: 0.4; }
body.look-verlauf .page-dots span { background: var(--husk-edge); }
body.look-verlauf .page-dots span.is-active { background: var(--gold-light); }
body.look-verlauf #reservierung.section-alt { background: linear-gradient(180deg, var(--dusk-deep) 0%, var(--dusk) 100%); }
body.look-verlauf #reservierung .section-head h2 { color: var(--husk-text); }
body.look-verlauf #reservierung .eyebrow { color: var(--gold-light); }
body.look-verlauf #reservierung .eyebrow::before { background: var(--gold-light); }

/* ---------- Tageskarte: Schiefertafel im einzigen Dunkel, ohne Holzrahmen ---------- */
body.look-verlauf .tafel-frame {
  padding: 0; background: none; box-shadow: none; border-radius: 0;
  border: 1px solid var(--gold-dark); outline: 1px solid rgba(169, 133, 63, 0.35); outline-offset: 6px;
}
body.look-verlauf .tafel-date-tag::before { display: none; }
body.look-verlauf .tafel-date-tag { border-color: var(--gold-dark); }




/* ---------- Zierelemente: nur das Siegel bleibt ---------- */
/* News-Karten: keine Perforationslinie, keine gezackte Reisskante am Foto */
body.look-verlauf .stack-card .perf { display: none; }
body.look-verlauf .stack-card .date-block { padding-top: 26px; }
body.look-verlauf .photo-tear::before { display: none; }

/* Pavillon: Fotos als ruhige Rechtecke mit feinem Goldrahmen statt runder
   "Laternen" mit Aufhaengefaden */
/* Pavillon-Fotos: derselbe Papierrahmen wie alle anderen Bilder (.media-frame), kein Goldrahmen mit Abstand */
body.look-verlauf .lantern { border-radius: 0; aspect-ratio: 4 / 3; border: 6px solid var(--chalk); background: var(--chalk); outline: none; box-shadow: var(--shadow-sm), 0 0 0 1px var(--chalk-edge), 0 20px 50px rgba(0, 0, 0, 0.45); }
body.look-verlauf .lantern.is-main { aspect-ratio: auto; align-self: stretch; }
body.look-verlauf .lantern::before { display: none; }
body.look-verlauf .lantern::after { border-radius: 0; box-shadow: none; }
body.look-verlauf .lantern .media-credit { left: auto; right: 7px; bottom: 5px; transform: none; white-space: normal; }
body.look-verlauf .lantern-bento { gap: 40px; }

/* Platzkarten: das gefuellte Goldsiegel wird zum Siegel-Ring (wie Hero/Chronik) */
body.look-verlauf .placecard-seal { width: 44px; height: 44px; background: transparent; color: var(--gold-ink); border: 3px double var(--gold-dark); box-shadow: none; }

/* =====================================================================
   Hierarchie (2026-09-24): Hauptzweck der Seite = Tisch vormerken + Speisekarte.
   Drei Gewichtsstufen fuer Sektionen statt lauter gleich lauter Ueberschriften:
   Stufe 1 (Hauptbuehne): Kueche, Reservierung - groesste Ueberschrift, mehr Luft.
   Stufe 2 (Kapitel):     Aktuelles, Geschichte, Pavillon, Gaestebuch - Standard.
   Stufe 3 (Beiwerk):     Jahreszeiten, Philosophie - kleiner und leiser.
   Regel fuer die Ausrichtung: zentrierter Inhalt = zentrierter Kopf.
   ===================================================================== */
body.look-verlauf #kueche h2,
body.look-verlauf #reservierung h2 { font-size: clamp(2.2rem, 2.2vw + 1.5rem, 3.2rem); }
body.look-verlauf #jahreszeiten h2,
body.look-verlauf #philosophie h2 { font-size: clamp(1.45rem, 0.8vw + 1.15rem, 1.95rem) !important; } /* !important: die Jahreszeiten-Ueberschrift traegt eine Inline-Groesse */

/* Hauptknopf im Hero: Tisch vormerken gefuellt, Speisekarte als Nebenknopf */
body.look-verlauf .hero-ctas a[href="#reservierung"] { background: var(--iron); border-color: var(--gold-light); color: var(--husk-text); }
body.look-verlauf .hero-ctas a[href="#reservierung"]:hover { background: var(--iron-dark); }

/* Hauptknopf im Kopf schon ab 720px sichtbar (vorher erst ab 1340px - auf
   Laptops fehlte der wichtigste Knopf, er steckte nur im Burger-Menue) */
@media (min-width: 720px) { body.look-verlauf .header-actions > .btn-primary { display: inline-flex !important; } }

/* Speisekarte: die Kategorie-Ueberschrift direkt unter dem aktiven Reiter
   wiederholte nur dessen Text - am Bildschirm entfaellt sie (Druck behaelt sie) */
@media screen { body.look-verlauf .menu-category-head { display: none; } }

/* Jahreszeiten: eine ruhige Papierkarte (Farbsystem, s. u.) - die Saison zeigt
   sich im Foto und im Text, nicht mehr in fuenf verschiedenen Kartenfarben */
body.look-verlauf .season-card { background-color: var(--chalk) !important; border: 1px solid var(--chalk-edge); }

/* Beschriftungen nicht unter ca. 12px (Bildnachweise bleiben bewusst winzig) */
body.look-verlauf .date-meta,
body.look-verlauf .stack-caption,
body.look-verlauf .register-tally,
body.look-verlauf .tafel-date-tag .tafel-date { font-size: var(--fs-small); }
body.look-verlauf .guestbook-google-link { font-size: var(--fs-small); }
body.look-verlauf .stack-card:not(.is-front) .card-peek { font-size: var(--fs-small); }
body.look-verlauf .menu-badge,
body.look-verlauf .season-now-flag,
body.look-verlauf .season-extra-heading,
body.look-verlauf .hours-table th,
body.look-verlauf .page-btn { font-size: var(--fs-label); }
body.look-verlauf .hero-status { font-size: var(--fs-small); }
body.look-verlauf .brand-word small { font-size: var(--fs-label); }
body.look-verlauf .guestbook-stamp-count { font-size: 0.6rem; }
/* Register-Stempel: die Jahreszahl war mit 9px kaum lesbar */
body.look-verlauf .register-stamp { width: 76px; height: 76px; font-size: 0.72rem; }
body.look-verlauf .register-stamp.is-today { width: 88px; height: 88px; font-size: 0.8rem; }
@media (max-width: 640px) {
  body.look-verlauf .register-stamp { width: 56px; height: 56px; font-size: 0.66rem; }
  body.look-verlauf .register-stamp.is-today { width: 64px; height: 64px; font-size: 0.7rem; }
}

/* Handy: feste Aktionsleiste (siehe main.js "Handy: feste Aktionsleiste") */
.cta-bar { display: none; }
@media (max-width: 719px) {
  .cta-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--dusk-deep); border-top: 1px solid var(--gold-dark);
    transform: translateY(110%); transition: transform 0.35s var(--ease);
  }
  .cta-bar.is-on { transform: none; }
  .cta-bar-main {
    flex: 1; text-align: center; padding: 13px 18px; background: var(--iron); color: var(--husk-text);
    border: 1px solid var(--gold-light); text-decoration: none;
    font-family: var(--font-hero-display); font-weight: 600; font-size: 0.8rem; letter-spacing: var(--track-wide); text-transform: uppercase;
  }
  .cta-bar-call {
    width: 48px; display: flex; align-items: center; justify-content: center; color: var(--gold-light);
    border: 1px solid var(--gold-dark); text-decoration: none;
  }
  .cta-bar-call svg { width: 20px; height: 20px; }
  body.look-verlauf .site-footer { padding-bottom: 104px; }
}
@media print { .cta-bar { display: none !important; } }


/* Geschichte: etwas dichter (Zeitstrahl war die laengste Einzelsektion) */
body.look-verlauf .register-item { margin-bottom: 44px; }
body.look-verlauf .register-item:last-child { margin-bottom: 0; }

/* ---------- Geschichte: versetzter Zeitstrahl (2026-09-24, Kundenwunsch "kompakter") ----------
   Statt jeden Eintrag einzeln untereinander zu stapeln (die Haelfte jeder Zeile
   blieb leer), liegen die Eintraege abwechselnd links/rechts der Achse und
   schieben sich ineinander: Eintrag k belegt die Gitterzeilen k und k+1, der
   naechste startet also mitten im vorigen. Die Reihenfolge im DOM (und damit fuer
   Screenreader) bleibt chronologisch. Die Achsenlücke (104px) ist groesser als der
   Stempel (max. 88px), er sitzt daher neben dem Text und nicht mehr darueber -
   das alte Polster fuer Eintraege ohne Foto entfaellt. Unter 641px bleibt die
   einspaltige Liste mit Achse links. */
@media (min-width: 641px) {
  body.look-verlauf .register { display: grid; grid-template-columns: 1fr 1fr; column-gap: 104px; grid-auto-rows: minmax(124px, auto); }
  body.look-verlauf .register-item { display: block; margin-bottom: 30px; }
  body.look-verlauf .register-item.is-right { grid-column: 2; }
  body.look-verlauf .register-item.is-left { grid-column: 1; }
  body.look-verlauf .register-item:nth-child(1) { grid-row: 1 / span 2; }
  body.look-verlauf .register-item:nth-child(2) { grid-row: 2 / span 2; }
  body.look-verlauf .register-item:nth-child(3) { grid-row: 3 / span 2; }
  body.look-verlauf .register-item:nth-child(4) { grid-row: 4 / span 2; }
  body.look-verlauf .register-item:nth-child(5) { grid-row: 5 / span 2; }
  body.look-verlauf .register-item:nth-child(6) { grid-row: 6 / span 2; }
  body.look-verlauf .register-item:nth-child(7) { grid-row: 7 / span 2; }
  body.look-verlauf .register-item:nth-child(8) { grid-row: 8 / span 2; }
  body.look-verlauf .register-item .register-content,
  body.look-verlauf .register-item .register-content.no-photo { grid-column: auto; padding-top: 8px; }
  body.look-verlauf .register-item.is-right .register-stamp { left: -52px; }
  body.look-verlauf .register-item.is-left .register-stamp { left: calc(100% + 52px); }
  /* Alles haengt an der Achse: linke Eintraege rechtsbuendig, Fotos zur Achse hin,
     dazu ein kurzer Strich vom Stempel zu seinem Eintrag - sonst steht ein Stempel
     auf gleicher Hoehe neben dem Ende des VORIGEN Eintrags auf der Gegenseite. */
  body.look-verlauf .register-item.is-left .register-content { text-align: right; }
  body.look-verlauf .register-item.is-left .register-content p { margin-left: auto; }
  body.look-verlauf .register-item.is-left .register-entry-photo { margin-left: auto; }
  body.look-verlauf .register-item.is-right .register-entry-photo { margin-left: 0; }
  body.look-verlauf .register-item::before {
    content: ""; position: absolute; top: 38px; width: 16px; border-top: 2px solid var(--gold-dark); z-index: 1;
  }
  body.look-verlauf .register-item.is-right::before { left: -16px; }
  body.look-verlauf .register-item.is-left::before { right: -16px; }
}

/* ---------- Abstandsstufen (2026-09-24) ----------
   Sektionsabstaende sind Teil der Hierarchie: Hauptbuehne > Kapitel > Beiwerk.
   Vorher 128/108/84/66px ohne Regel und auf dem Handy dieselben 108px wie am
   Desktop - jetzt drei Stufen, die mit der Breite mitwachsen. */
body.look-verlauf { --sec-1: clamp(76px, 10vw, 128px); --sec-2: clamp(64px, 8.5vw, 104px); --sec-3: clamp(48px, 6vw, 72px); }
body.look-verlauf .section { padding-block: var(--sec-2); }
body.look-verlauf .section-tight { padding-block: var(--sec-3); }
body.look-verlauf #kueche.section,
body.look-verlauf #reservierung.section { padding-block: var(--sec-1); }
body.look-verlauf #philosophie.section { padding-top: var(--sec-3); }

/* ---------- Orientierung: aktueller Abschnitt in der Navigation (main.js "Scrollspy") ---------- */
body.look-verlauf .mobile-nav a.active { color: var(--iron); }
body.look-verlauf .main-nav a.active { color: var(--iron); }

/* ---------- Footer: Oeffnungszeiten und warme Kueche in EINER Tabelle ---------- */
body.look-verlauf .hours-table-combined td:not(:first-child),
body.look-verlauf .hours-table-combined th:not(:first-child) { text-align: right; padding-left: 12px; }
body.look-verlauf .hours-table-combined td { font-size: var(--fs-secondary); vertical-align: top; }
body.look-verlauf .hours-table-combined td:nth-child(2) { white-space: nowrap; }
@media (max-width: 480px) { body.look-verlauf .hours-table-combined td { font-size: var(--fs-small); padding-left: 8px; } }

/* =====================================================================
   Beiwerk-Sektionen zusammengefuehrt (Entscheidung 2026-09-24): Jahreszeiten
   wirken als Schluss der Kueche, Philosophie als Coda der Geschichte - dieselbe
   Flaeche, kaum Abstand, nur eine feine Trennlinie. Reines CSS, die Reihenfolge
   im Dokument und die Navigation bleiben.
   ===================================================================== */
body.look-verlauf #kueche.section { padding-bottom: 40px; }
body.look-verlauf #jahreszeiten { padding-top: 0; }
body.look-verlauf #jahreszeiten .section-head { padding-top: 56px; border-top: 1px solid rgba(169, 133, 63, 0.45); }
body.look-verlauf #geschichte { padding-bottom: 40px; }
body.look-verlauf #philosophie.section { padding-top: 24px; }
body.look-verlauf #philosophie .container::before {
  content: ''; display: block; width: 160px; margin: 0 auto 56px; border-top: 1px solid var(--gold-dark);
}

/* =====================================================================
   Typografie-System (2026-09-24)
   Rollen: Cinzel = Struktur (Ueberschriften, Beschriftungen, Knoepfe),
           Archivo = Text, Preise, Zeiten,
           Cormorant Kursiv = die "Stimme" (Einleitungssaetze, Zitate, Claim,
                              Hero-Untertitel),
           Caveat = Handschrift (nur Tageskarte und Gaestebuch).
   Stufen: Schrift --fs-*, Laufweite --track-* (style.css :root), Ueberschriften
           unten. Ziffern nur in Preisen/Zeiten tabellarisch.
   ===================================================================== */
body.look-verlauf {
  --h2-1: clamp(2.2rem, 2.2vw + 1.5rem, 3.2rem);
  --h2-2: clamp(1.75rem, 1.4vw + 1.3rem, 2.5rem);
  --h2-3: clamp(1.45rem, 0.8vw + 1.15rem, 1.95rem);
  --h3-1: clamp(1.15rem, 0.5vw + 1rem, 1.4rem);
}

/* (2) Ueberschriften: ein Gewicht, feste Stufen */
body.look-verlauf h1, body.look-verlauf h2, body.look-verlauf h3, body.look-verlauf h4,
body.look-verlauf #geschichte h2, body.look-verlauf #geschichte h3, body.look-verlauf .register-content h3 { font-weight: 600; }
body.look-verlauf .pavilion-title { font-size: var(--h2-2); }
body.look-verlauf .guestbook-page-head h2 { font-size: var(--h3-1); }

/* (3) Zeilenumbrueche: keine Witwen/Waisen, ausgewogene Ueberschriften */
body.look-verlauf :is(p, li, figcaption, .food-caption) { text-wrap: pretty; }
body.look-verlauf :is(h1, h2, h3, h4, .lede, .pavilion-lede, .hero-subtext, .card-title, .season-desc) { text-wrap: balance; }
body.look-verlauf :is(.card-teaser, .register-content p, .guestbook-entry p, .placecard p, .philosophy-grid p, .season-desc) { hyphens: auto; }

/* (4) Ziffern: tabellarisch nur, wo sie in Spalten stehen */
body.look-verlauf :is(.menu-item-price, .season-dish-price, .tafel-price, .hours-table td, .hours-table th, .date-picker-popover) { font-variant-numeric: tabular-nums; }

/* (5) Cinzel-"1" sieht wie ein grosses "I" aus ("Eintrag Nr. 1"): in Zaehlern und
   Stempeln kommen die Ziffern aus Archivo (dieselbe, ohnehin geladene Datei) */
@font-face {
  font-family: 'Cinzel Ziffern';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations'), url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; unicode-range: U+0030-0039;
}
body.look-verlauf .register-tally, body.look-verlauf .register-stamp { font-family: 'Cinzel Ziffern', var(--font-hero-display); }

/* (8) Einleitungssaetze = die Stimme: Cormorant Kursiv */
body.look-verlauf .lede, body.look-verlauf .pavilion-lede {
  font-family: var(--font-hero-accent); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.5; max-width: 54ch;
}
body.look-verlauf .lede { color: var(--char-soft); }
body.look-verlauf h2 { font-size: var(--h2-2); }
body.look-verlauf .guestbook-page-head h2 { font-size: var(--h2-3); }

body.look-verlauf .section-head.is-center .lede { margin-left: auto; margin-right: auto; }

/* =====================================================================
   Farbsystem (2026-09-24): fuenf Farben und eine Funktionsfarbe.
     Papier  (Flaeche)            paper / chalk / sack
     Tinte   (Text)               char, char-soft
     Eisen   (Handlung, Betonung) iron, iron-dark
     Gold    (Linie, Schmuck)     gold-ink / gold-dark / gold / gold-light
     Dusk    (das einzige Dunkel) dusk-deep / dusk / dusk-2
   Funktion: Gruen nur fuer "geoeffnet", vegetarisch/vegan und Erfolg.
   Die Alt-Tokens des bisherigen Designs (Husk, Slate, Holz, Kreideweiss, ...)
   werden hier auf dieses System abgebildet, damit auch vergessene Stellen
   keine Fremdfarbe erzeugen. Farbtoene am Bildschirm vorher: 28 (+5 Saisonfarben).
   ===================================================================== */
body.look-verlauf {
  --char-faint: var(--char-soft);
  --season-ink: var(--char-soft);
  --season-accent: var(--iron-dark);
  --iron-soft: var(--iron);
  --danger: var(--iron);
  --sack-2: var(--sack);  /* eine einzige Papierflaeche: das dunklere, gelbliche Beige war zu laut */
  --sack-3: var(--sack);
  --sack-edge: rgba(169, 133, 63, 0.55);
  --chalk-edge: rgba(169, 133, 63, 0.28);
  --husk: var(--dusk-2);
  --husk-2: var(--dusk);
  --wood: var(--dusk-2);
  --wood-dark: var(--dusk);
  --wood-light: var(--dusk-2);
  --chalk-white: var(--husk-text);
  --verdigris-dark: var(--verdigris);
  --ok-on-dark: #8fbb82;
}
/* Gruen nur als Funktionsfarbe: das Info-Kaestchen im Formular war gruen */
body.look-verlauf .notice-box { background: rgba(169, 133, 63, 0.08); border-color: var(--gold-dark); }
body.look-verlauf .hero-status.is-open { border-color: color-mix(in srgb, var(--ok-on-dark) 55%, transparent); }
body.look-verlauf .hero-status.is-open .hero-status-dot { background: var(--ok-on-dark); }
/* Vollbild-Overlays im Dusk statt in Braunschwarz */
body.look-verlauf .news-lightbox, body.look-verlauf .lightbox { background: rgba(14, 26, 28, 0.9); }

/* =====================================================================
   Signatur-Bewegung: der Siegel-Abdruck (2026-09-24)
   Eine einzige, wiederkehrende Geste, passend zum einzigen Zierelement: ein
   Stempel/Siegel setzt sich beim Erscheinen kurz "auf" das Papier (gross und
   durchsichtig -> leicht eingedrueckt -> ruhig). Nur Register-Stempel und der
   Bewertungs-Stempel, nur einmal, nur wenn sie erst unterhalb des ersten
   Bildschirms liegen (main.js "Siegel-Abdruck"). Die Standard-Ansicht ist immer
   sichtbar - versteckt wird nur, was JS selbst zum Animieren vormerkt.
   ===================================================================== */
@keyframes stamp-press { 0% { opacity: 0; scale: 1.45; } 55% { opacity: 1; scale: 0.93; } 100% { opacity: 1; scale: 1; } }
body.look-verlauf .will-stamp { opacity: 0; }
body.look-verlauf .is-stamping { animation: stamp-press var(--dur-slow) var(--ease) both; }

/* =====================================================================
   Handy-Schicht (2026-09-24): Tippflaechen >= 44px, Formular, Lesbarkeit
   Grundsatz: Aussehen bleibt, nur die tippbare Flaeche waechst (Padding,
   unsichtbare Flaechen), damit Finger statt Mauszeiger reichen.
   ===================================================================== */
button, a, summary, label[for], [role="button"] { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(154, 61, 42, 0.18); }

/* Hero-Punkte: sichtbar bleibt der 3px-Strich, tippbar ist eine 44px hohe Flaeche */
.hero-dots { bottom: 6px; gap: 0; }
.hero-dots button { box-sizing: content-box; height: 3px; padding: 21px 4px; background-clip: content-box; background-color: rgba(248, 242, 226, 0.4); }
.hero-dots button.is-active { background-color: var(--iron-soft); background-clip: content-box; }

@media (max-width: 899px) {
  body.look-verlauf .food-strip { overscroll-behavior-x: contain; }

  /* alleinstehende Links und Knoepfe: 44px */
  body.look-verlauf .hero-status { min-height: 44px; }
  body.look-verlauf .season-advance-btn, body.look-verlauf .page-btn, body.look-verlauf .btn { min-height: 44px; }
  body.look-verlauf .season-extra-link,
  body.look-verlauf .placecard-value,
  body.look-verlauf .link-arrow,
  body.look-verlauf .footer-links a,
  body.look-verlauf .site-footer a[href^="tel:"],
  body.look-verlauf .site-footer a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  body.look-verlauf .placecard-value { justify-content: center; margin-top: 0; }
  body.look-verlauf .footer-links { gap: 0 18px; }
  body.look-verlauf .checkbox-row input { width: 24px; height: 24px; margin-top: 2px; }
}

@media (max-width: 480px) {
  /* Formular-Fortschritt: nur der aktive Schritt traegt seinen Namen (sonst stoesst "Abschluss" am Kartenrand an) */
  body.look-verlauf .form-steps { gap: 8px; }
  body.look-verlauf .form-step-line { flex: 1; width: auto; min-width: 12px; }
  body.look-verlauf .form-step-dot:not(.is-active) { font-size: 0; gap: 0; }
  body.look-verlauf .form-step-dot:not(.is-active) .num { font-size: var(--fs-label); }
  /* kleinste Beschriftungen nicht unter 12px */
  body.look-verlauf { --fs-label: 0.76rem; }
}

@media (max-width: 899px) { body.look-verlauf a.hero-closure-banner { min-height: 44px; } }

/* Kalender auf dem Handy: als Blatt am unteren Rand (Daumenreichweite), Tage und Monatspfeile >= 44px.
   Als Popover unter dem Feld ragte er ueber den unteren Bildschirmrand und die Tage waren nur 30px gross. */
@media (max-width: 640px) {
  body.look-verlauf .date-picker-popover {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; transform: none; z-index: 100;
    border-radius: 14px 14px 0 0; border-width: 1px 0 0; padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 40px rgba(14, 26, 28, 0.35);
  }
  body.look-verlauf .date-picker-nav { width: 44px; height: 44px; }
  body.look-verlauf .date-picker-day { min-height: 44px; font-size: var(--fs-secondary); }
}

/* Gaestebuch auf dem Handy: eine Seite (3 Eintraege) statt der ganzen Doppelseite (main.js "Handy:
   seitenweise"). Ohne JS bleibt alles sichtbar wie bisher. */
@keyframes gb-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 759px) {
  .guestbook.is-paged .guestbook-spread { display: block; opacity: 1; visibility: visible; transform: none; }
  .guestbook.is-paged .guestbook-page { display: none; }
  .guestbook.is-paged .guestbook-page.is-shown { display: block; animation: gb-page-in var(--dur-base) var(--ease); }
}


/* Bei offenem Menue ist die feste Aktionsleiste ueberfluessig (das Menue hat denselben Knopf) und ueberdeckt sonst dessen Ende. */
body.nav-open .cta-bar { visibility: hidden; }




/* Rechtstexte: Abschnittsueberschriften kleiner als die Kapitelueberschriften der Startseite */
body.look-verlauf .legal h2 { font-size: clamp(1.2rem, 0.5vw + 1.05rem, 1.5rem); letter-spacing: var(--track-tight); margin: 38px 0 10px; text-wrap: balance; }

/* Speisekarten-Reiter als sichtbare Schaltflaechen (2026-09-26): vorher Text mit Strich darunter, am Handy nur eine Wischzeile - Kunden fanden
   die anderen Kategorien nicht. Sprache der Knoepfe: eckig, duenner Goldrand, Cinzel-Versalien; aktiv = Dusk (das einzige Dunkel). */
body.look-verlauf .menu-tabs { flex-wrap: wrap; gap: 10px; border-bottom: 0; padding-bottom: 6px; margin-bottom: 20px; }
body.look-verlauf .menu-tab {
  min-height: 44px; padding: 10px 18px; border: 1px solid var(--gold-dark); background: transparent; color: var(--char);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
body.look-verlauf .menu-tab::after { display: none; }
body.look-verlauf .menu-tab:hover { background: rgba(169, 133, 63, 0.16); color: var(--char); }
body.look-verlauf .menu-tab.is-active, body.look-verlauf .menu-tab.is-active:hover { background: var(--dusk); border-color: var(--dusk); color: var(--chalk); }
@media (max-width: 480px) {
  body.look-verlauf .menu-tabs { gap: 8px; }
  body.look-verlauf .menu-tab { padding: 10px 14px; letter-spacing: var(--track-tight); }
}

/* "Weiter: <naechste Kategorie>" am Ende jeder Kategorie */
body.look-verlauf .menu-next {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; min-height: 44px; margin-top: 30px; padding: 14px 0 0;
  background: none; border: 0; border-top: 1px solid rgba(169, 133, 63, 0.4); cursor: pointer; text-align: right;
  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);
}
body.look-verlauf .menu-next svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-base) var(--ease); }
body.look-verlauf .menu-next:hover { color: var(--iron); }
body.look-verlauf .menu-next:hover svg { transform: translateX(4px); }