/* ===========================================================================
   AIX Mediterran — app.css
   Speisekarte mit Suche und Filtern, Allergen- und Zusatzstoffzeile,
   Django-Formularzustände, Startseiten-Karten, Quittungskarte, Legende.

   Raster, Knöpfe, Kopf, Fuß, Drawer, Mobilleiste, Infokarten, Zeiten und Hero
   stehen in components.css + components.extra.css.
   Wird als Letztes geladen (siehe CLAUDE.md § Design).
   =========================================================================== */

/* ===========================================================================
   AIX Mediterran — site stylesheet
   Built on tokens.css. Plain CSS, BEM naming, no framework, no CDN.

   Differences from the canvas, all deliberate:
   - fonts are self-hosted here (§4.3) instead of loaded from the Google CDN
   - inline styles became classes
   - the canvas's fixed widths became media queries at its own breakpoints
     (760 / 1080 / 1180px)
   =========================================================================== */

/* ---------- page frame ---------- */
body { overflow-x:hidden; }
a { color:var(--color-link); text-decoration:none; }
a:hover { color:var(--color-primary-hover); text-decoration:underline; }
/* Link buttons keep their own colours on hover; a:hover above would turn .btn--dark text navy on navy. */
a.btn:hover { color:var(--_fg); text-decoration:none; }
/* The canvas focused in mustard, which measures 1.9:1 on white — WCAG 2.2's
   focus indicator needs 3:1. Blue on light surfaces, pale gold on the dark
   ones, so the ring is always visible against what it sits on. */
:where(a, button, input, select, textarea, summary):focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; }
.container--narrow { max-width:820px; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--color-surface); color:var(--color-primary); padding:14px 20px; border-radius:0 0 var(--radius) 0; }
.skip-link:focus { left:0; }

/* Korrektur zur Designrunde 2026: die Media-Query in components.css blendet unter 1024px nur .navbar__links aus, nicht die CTA.
   Dadurch drückt der gelbe „Reservieren"-Knopf den Burger auf 0px Breite — im
   freigegebenen Entwurf steht dort nur Logo + Burger, und „Reservieren" liegt
   ohnehin in der Mobilleiste. Höhere Spezifität, weil components.extra.css
   nach dieser Datei geladen wird. */
@media (max-width:1023px) {
  .navbar .navbar__cta { display:none; }
  .navbar .navbar__burger { flex:0 0 auto; }
}

/* Spacing utilities — so templates carry class names only (CLAUDE.md § Design).
   Values come from the token scale; no new colours, no new sizes. */
.mt-4 { margin-top:var(--sp-4); }
.mt-5 { margin-top:var(--sp-5); }
.mt-6 { margin-top:var(--sp-6); }
.section-head__title--start { text-align:left; }
.cta__actions--start { justify-content:flex-start; }
.page-body { padding-block:var(--sp-10) var(--sp-8); }
.eyebrow--on-dark { color:var(--color-white); }

.display { font-family:var(--font-heading); text-transform:uppercase; letter-spacing:var(--tracking-display); }

.lead { font-size:17px; line-height:1.8; color:var(--color-text-muted); }
.btn--sm { min-height:var(--tap-min); padding:.625rem 1.25rem; font-size:var(--fs-xs); }
.lang__toggle {
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface);
  color:var(--color-primary); font-family:var(--font-body); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; cursor:pointer; list-style:none;
}
.lang__toggle::-webkit-details-marker { display:none; }
.lang__toggle:hover { border-color:var(--color-primary); }

@keyframes aix-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.diamond { width:11px; height:11px; background:var(--color-primary); transform:rotate(45deg); flex:none; }
.section-intro { max-width:56ch; margin:20px auto 0; text-align:center; color:var(--color-text-muted); font-size:17px; line-height:1.75; }

/* ---------- highlight cards ---------- */
.cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; margin-top:56px; }
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:4px; overflow:hidden; transition:transform .35s var(--ease-out-soft), box-shadow .35s var(--ease-out-soft); }
.card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(8,31,56,.12); }
.card__media { position:relative; aspect-ratio:4/5; background:linear-gradient(160deg, var(--color-aegean-100), var(--color-cream-200)); display:grid; place-items:center; }
.card__media img { width:100%; height:100%; object-fit:cover; }
.card__media-note { font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--color-aegean-700); opacity:.55; padding:0 16px; text-align:center; }
.card__body { padding:26px 26px 28px; display:flex; align-items:flex-start; gap:16px; }
.card__title { margin:0; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--color-aegean-800); font-size:22px; line-height:1.2; }
.card__text { margin:12px 0 0; color:var(--color-text-muted); font-size:16px; line-height:1.7; }
.card__arrow { flex:none; width:48px; height:48px; border-radius:var(--radius-pill); border:1.5px solid var(--color-primary); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:18px; text-decoration:none; transition:background var(--dur-hover), color var(--dur-hover); }
.card__arrow:hover { background:var(--color-aegean-950); color:var(--color-white); text-decoration:none; }

/* search + diet filters (revealed by site.js) */
.menu-filter { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 24px; align-items:end; padding:28px 0 0; }
.menu-filter__search { max-width:420px; }
.menu-filter__toggles { display:flex; flex-wrap:wrap; gap:10px; }
.toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface); font-size:14px; color:var(--color-text); cursor:pointer; }
.toggle:hover { border-color:var(--color-primary); }
.toggle input { width:18px; height:18px; accent-color:var(--color-primary); }
.toggle__count { font-size:13px; color:var(--color-text-muted); }
.toggle:has(input:checked) { background:var(--color-aegean-50); border-color:var(--color-primary); color:var(--color-aegean-800); }
.menu-filter__count { grid-column:1 / -1; margin:0; font-size:15px; color:var(--color-text-muted); }
.menu-section[hidden], .menu-nav__chip[hidden], .dish-row[hidden] { display:none !important; }

.menu-section { margin-bottom:72px; scroll-margin-top:150px; }
/* Sprungziele der Startseite (Kontakt → #anfahrt, Reservieren → #reservieren, …) enden genau unter der klebenden Kopfleiste */
main > section[id] { scroll-margin-top:var(--aix-head); }
/* Der Titel selbst soll direkt unter der Leiste stehen: was über ihm liegt, wird abgezogen. */
#ueber-uns { scroll-margin-top:var(--aix-head); }
#anfahrt { scroll-margin-top:calc(var(--aix-head) - 4px); }                                  /* .section--flush-top div.rsv: 4px */
#reservieren { scroll-margin-top:calc(var(--aix-head) - clamp(3rem, 8vw, 6rem) - 61px); }   /* .section-Abstand + Trennlinie (.rsv__deco) */
.menu-section__head { display:flex; align-items:center; gap:18px; margin-bottom:10px; }
.menu-section__title { margin:0; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--color-aegean-800); font-size:clamp(24px,3vw,34px); }
.menu-section__rule { flex:1; height:1px; background:var(--color-border); }
.menu-section__note { margin:0 0 30px; font-size:16px; line-height:1.7; color:var(--color-text-muted); max-width:60ch; }

.dish-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 48px; }
.dish-row__main { flex:1; }
.dish-row__head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.dish-row__ref { font-size:13px; color:var(--color-text-muted); letter-spacing:.08em; }
.dish-row__desc { margin:8px 0 0; font-size:15px; line-height:1.7; color:var(--color-text-muted); }
.dish-row__variants { margin:10px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:14px; font-size:14px; color:var(--color-text-muted); }
.dish-row__variant-price { color:var(--color-price); }
/* allergen + additive codes: never below 14px (§4.3) */
.dish-row__codes { margin:8px 0 0; font-size:14px; color:var(--color-text-muted); letter-spacing:.06em; }

/* 12px, not the canvas's 11: these sit next to the allergen line, which §4.3
   holds at 14px, and an uppercase 11px chip is hard work on a phone. */
.mark { font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:3px; }
.mark--v  { background:#eaf2e6; color:#3f5b2e; }
.mark--vg { background:#e3f0ea; color:#1f5c46; }
.mark--s  { background:#fbe9e4; color:#8c3a22; }
.mark--popular { background:var(--color-aegean-50); color:var(--color-aegean-800); }

.legend { border:1px solid var(--color-border); background:var(--color-surface); border-radius:4px; padding:28px; }
.legend__title { margin:0 0 12px; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--color-aegean-800); font-size:18px; }
.legend__title--sub { font-size:15px; }
.legend__title--sub + .legend__list { margin-bottom:0; }
.legend__text { margin:0 0 14px; font-size:14px; line-height:1.8; color:var(--color-text); max-width:80ch; }
.legend__list { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:var(--color-text-muted); }

/* ===========================================================================
   Speisekarte im Stil der Vorlage (15.09.) — nur Aussehen. Klassen und
   data-Attribute für Suche/Filter (site.js) und Tests bleiben unverändert.
   Nur Tokens: Navy --color-aegean-950, Gelb --color-gold-500, Grün
   --color-success(-bg), Rot --color-error.
   =========================================================================== */
/* Eine Leiste im Navy der Kopfleiste: Kategorien-Dropdown, Suche, Filter */
.menu-teaser--sticky { padding-block:12px; background:color-mix(in srgb, var(--color-bg) 92%, transparent); border-bottom:0; }
/* Form und Schrift wie „Reservierung anfragen" (.rsv__btn): Navy, 6px Ecken, 600 15px Arial-Stack. */
.menu-pill { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:6px 8px; border-radius:6px; background:var(--color-aegean-950); box-shadow:var(--shadow-soft); color:var(--color-white); font:600 15px/1 var(--rsv-sans); }
/* Sprung zu einer Kategorie oder zur Kennzeichnung: der Titel steht direkt unter Kopfleiste + Suchleiste (Höhe misst site.js; nicht klebend = 0) */
.menu-card__title[id] { scroll-margin-top:calc(var(--aix-head) + var(--menu-bar-h, 0px)); }
/* Kennzeichnung: die Trennlinie mit Raute und der Kartenkopf bleiben sichtbar — Linie (61px) + Abstand Kartenoberkante bis Titel (--menu-title-gap) */
#kennzeichnung { scroll-margin-top:calc(var(--aix-head) + var(--menu-bar-h, 0px) + 61px + var(--menu-title-gap, 20px)); }

/* Kategorien: Dropdown im Stil der Auswahllisten der Reservierung (.selectfield) */
.menu-cats { position:relative; flex:none; }
.menu-cats__toggle { box-sizing:border-box; display:inline-flex; align-items:center; gap:14px; height:44px; padding:0 20px; border-radius:6px; background:var(--color-gold-500); font:600 15px/1 var(--rsv-sans); color:var(--color-aegean-950); cursor:pointer; list-style:none; transition:background-color .18s ease, box-shadow .18s ease; }
.menu-cats__toggle::-webkit-details-marker { display:none; }
/* Schrift wie „Reservieren" im Kopf (.site-header--flat .navbar__cta): Jost 600, Versalien, .14em */
.menu-pill .menu-cats__toggle { font:var(--fw-semibold) 15px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:1279px) { .menu-pill .menu-cats__toggle { font-size:13px; } }
/* Gelb wie „Reservieren" (.btn--primary), kleines gefülltes Dreieck */
.menu-cats__toggle:hover { background:var(--color-gold-400); }
.menu-cats__toggle:focus-visible { outline:0; box-shadow:0 0 0 3px var(--color-gold-300); }
.menu-cats[open] .menu-cats__toggle { background:var(--color-gold-400); }
/* Pfeil wie beim Sprachwähler (.lang__caret), aber Navy statt Gold, damit er auf Gelb sichtbar ist */
.menu-cats__caret { flex:none; width:10px; height:6px; color:var(--color-aegean-950); transition:transform .18s ease; }
.menu-cats[open] .menu-cats__caret { transform:rotate(180deg); }
.menu-cats__panel { position:absolute; z-index:40; top:calc(100% + 12px); left:0; display:grid; gap:4px; min-width:300px; max-height:min(440px, 38vh); overflow:auto; overscroll-behavior:contain; padding:10px; border:1.5px solid var(--color-gold-500); border-radius:20px; background:var(--color-surface); box-shadow:var(--shadow-card); }
.menu-cats__panel .selectfield__option { box-sizing:border-box; text-decoration:none; }
.menu-cats__panel .selectfield__option:hover { color:var(--color-text); text-decoration:none; }

/* Suche und Filter in derselben Leiste */
.menu-filter[hidden] { display:none !important; }
.menu-pill .menu-filter { display:flex; flex:1 1 auto; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; padding:0; }
.menu-pill .menu-filter__search { position:relative; flex:1 1 220px; max-width:none; gap:0; }
/* Lupe im Suchfeld, links; das Feld rückt den Text dafür ein (padding im Feld-Stil unten). */
.menu-filter__icon { position:absolute; top:50%; left:16px; transform:translateY(-50%); color:var(--color-aegean-950); pointer-events:none; }
.menu-pill .menu-filter__search label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.menu-pill .menu-filter__search input {
  box-sizing:border-box; width:100%; height:44px; padding:0 20px 0 44px; /* links Platz für die Lupe */
  border:1px solid transparent; border-radius:6px; background:var(--color-surface);
  font:400 15px/1.4 var(--rsv-sans); color:var(--color-text);
  transition:box-shadow .18s ease;
}
.menu-pill .menu-filter__search input::placeholder { color:var(--color-text-muted); }
.menu-pill .menu-filter__search input:hover { box-shadow:0 0 0 2px var(--color-gold-500); }
.menu-pill .menu-filter__search input:focus { outline:0; box-shadow:0 0 0 3px var(--color-gold-500); }
.menu-pill .menu-filter__search { flex:1 1 180px; }
.menu-pill .menu-filter__toggles { position:relative; display:flex; flex-wrap:wrap; gap:8px; }
/* Zurücksetzen: quadratisch, im Stil des Suchfelds */
.menu-filter__reset { appearance:none; box-sizing:border-box; display:grid; flex:none; place-items:center; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:6px; background:var(--color-surface); color:var(--color-aegean-950); cursor:pointer; transition:box-shadow .18s ease, opacity .18s ease; }
.menu-filter__reset:hover:not(:disabled) { box-shadow:0 0 0 2px var(--color-gold-500); }
.menu-filter__reset:focus-visible { outline:0; box-shadow:0 0 0 3px var(--color-gold-500); }
.menu-filter__reset:disabled { opacity:.45; cursor:default; }
/* Symbol-Filter: die Kennzeichnungs-Kacheln, 44px hoch wie das Suchfeld; aktiv = gelber Rahmen */
.menu-pill .menu-diet { appearance:none; box-sizing:border-box; min-width:44px; height:44px; margin:0; padding:0 10px; border:0; border-radius:6px; font:600 14px/1 var(--rsv-sans); letter-spacing:.06em; cursor:pointer; transition:box-shadow .18s ease; }
.menu-pill .menu-diet:hover { box-shadow:0 0 0 2px color-mix(in srgb, var(--color-gold-500) 60%, transparent); }
.menu-pill .menu-diet:focus-visible { outline:0; box-shadow:0 0 0 2px var(--color-gold-300); }
.menu-pill .menu-diet[aria-pressed="true"] { box-shadow:0 0 0 3px var(--color-gold-500); }
/* Das Fenster hängt an der Symbol-Gruppe, nicht an der 44px-Kachel: an der Kachel
   drückte max-width:100% es auf Kachelbreite zusammen. Breite nach Inhalt, auf dem
   Handy höchstens Bildschirmbreite. */
.menu-pill .menu-diet .sym-tip { top:calc(100% + 12px); right:0; left:auto; max-width:calc(100vw - 32px); margin-top:0; font-weight:400; letter-spacing:0; text-align:left; }
.menu-pill .menu-filter__count { flex-basis:100%; margin:0; padding:0 20px 6px; font-size:14px; color:var(--color-gold-300); }
.menu-pill .menu-filter__count:empty { display:none; }
@media (max-width:900px) {
  .menu-pill { padding:8px; }
  .menu-cats { flex:1 1 100%; }
  .menu-cats__toggle { justify-content:space-between; width:100%; }
  .menu-cats__panel { right:0; min-width:0; }
  .menu-pill .menu-filter__search { flex-basis:100%; }
}
/* Tablet und Handy: die Leiste ist mehrzeilig (164–216px) und würde klebend einen
   großen Teil der Karte verdecken. :has() hebt die Spezifität über die ältere
   .menu-teaser--sticky-Regel weiter unten in dieser Datei. */
@media (max-width:1023px) {
  .menu-teaser--sticky:has(.menu-pill) { position:static; }
}

/* Kategorie-Kopf: Raute, Schreibschrift, Linie, Hinweis rechts */
.menu-section { margin-bottom:88px; }
.menu-section__head { gap:24px; margin-bottom:36px; }
.menu-section__head .diamond { width:12px; height:12px; background:var(--color-gold-500); }
/* Titelschrift wie im Reservierungs-Tab: große Titel Monday Holiday (.rsv__title). */
.menu-section__title { font-family:"Monday Holiday", var(--font-script, "Kaushan Script"), cursive; font-size:clamp(34px, 3.4vw, 44px); font-weight:400; line-height:1.15; letter-spacing:normal; text-transform:none; color:var(--color-aegean-950); }
.menu-section__head .menu-section__note { flex:none; max-width:none; margin:0; font-size:13px; line-height:1.4; letter-spacing:.24em; text-transform:uppercase; color:var(--color-text-muted); }

/* Gerichte: drei Spalten, Nummer | Name · Zeichen · Punktlinie · Preis */
.page-body .dish-list { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 64px; }
.page-body .dish-row { position:relative; display:grid; grid-template-columns:2.25rem minmax(0, 1fr); align-items:start; gap:0; padding:26px 0 30px; border-top:0; border-bottom:0; }
/* Trennlinie zwischen den Gerichten wie .rsv__deco (Linie · Raute · Linie), aber im Navy der Seite.
   Absolut positioniert, damit sie nicht als Zelle ins Raster der Zeile fällt. */
/* Leicht zurückgenommen, damit die Gerichte vorne stehen. */
.page-body .dish-row::before,
.page-body .dish-row::after { opacity:.35; }
.page-body .dish-row::before { content:""; position:absolute; top:-6px; left:0; right:0; height:13px; pointer-events:none;
  background:linear-gradient(var(--color-aegean-950), var(--color-aegean-950)) left center / calc(50% - 20px) 1px no-repeat,
             linear-gradient(var(--color-aegean-950), var(--color-aegean-950)) right center / calc(50% - 20px) 1px no-repeat; }
/* Raute zwischen den Gerichten: gleiche Größe wie vorher (9px-Quadrat, gedreht ≈ 13px Diagonale), jetzt als Rautenform
   ohne Drehung, damit „A|M" darin aufrecht steht — Raute verblasstes Gelb, Schrift Navy. */
.page-body .dish-row::after { content:"A|M"; position:absolute; top:-6.5px; left:calc(50% - 6.5px); display:grid; place-items:center; width:13px; height:13px; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background:color-mix(in srgb, var(--color-gold-500) 45%, transparent); font:600 4px/1 var(--font-body); letter-spacing:0; color:var(--color-aegean-950); opacity:1; pointer-events:none; }
/* Keine Trennlinie über der obersten Zeile einer Karte: 3 Spalten, ab 1180px 2, ab 900px 1 (wie .page-body .dish-list) */
.page-body .dish-row:nth-child(-n+3)::before,
.page-body .dish-row:nth-child(-n+3)::after { content:none; }
@media (max-width:1180px) { .page-body .dish-row:nth-child(3)::before { content:""; } .page-body .dish-row:nth-child(3)::after { content:"A|M"; } }
@media (max-width:900px) { .page-body .dish-row:nth-child(2)::before { content:""; } .page-body .dish-row:nth-child(2)::after { content:"A|M"; } }
/* Trennlinien der ganzen Seite (.rsv__deco, Linie · Raute · Linie): gleiche Größe, Gelb bleibt, „A|M" in Navy mittig in der Raute.
   div.rsv__deco b: schlägt reservation-skin.css, das später lädt. */
div.rsv__deco b { display:grid; flex:none; place-items:center; width:13px; height:13px; transform:none; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
div.rsv__deco b::before { content:"A|M"; font:600 4px/1 var(--font-body); letter-spacing:0; color:var(--color-aegean-950); }
.page-body .dish-row__ref { padding-top:12px; font-size:14px; letter-spacing:.04em; color:var(--color-aegean-950); }
.page-body .dish-row__head { display:grid; grid-template-columns:minmax(0, auto) minmax(16px, 1fr) auto; align-items:baseline; gap:12px; }
.dish-row__title { min-width:0; }
/* Gerichtname in Jost statt Forum: lesbarer, Kleinbuchstaben ~5 % höher (wirkt größer). Auf die Breite von Forum abgestimmt
   (95 % Größe, −0.01em Laufweite), Zeilenhöhe fest auf dem alten Wert — die Laptop-Ansicht (1180px) bleibt pixelgleich. */
.page-body .dish-row__name { display:inline; margin:0; font-family:var(--font-body); font-size:calc(clamp(21px, 1.7vw, 26px) * .95); font-weight:400; letter-spacing:-0.01em; line-height:calc(clamp(21px, 1.7vw, 26px) * 1.2); color:var(--color-aegean-950); }
/* vertical-align statt position:relative: so bleibt .dish-row__main der Anker für das Zeichen-Fenster. */
.dish-row__title .mark { vertical-align:4px; margin-left:8px; }
.dish-row__leader { align-self:center; height:0; border-bottom:1px dotted color-mix(in srgb, var(--color-aegean-950) 35%, transparent); } /* gleiches verblasstes Navy wie die Trennlinien (.dish-row::before, opacity .35) */
.page-body .dish-row__price { white-space:nowrap; font-family:var(--font-body); font-size:clamp(18px, 1.45vw, 22px); font-weight:var(--fw-semibold); color:var(--color-aegean-950); }
.page-body .dish-row__desc { margin:12px 0 0; font-size:18px; line-height:1.55; color:var(--color-text); }
.page-body .dish-row__variants { display:grid; gap:6px; margin:12px 0 0; font-size:16px; color:var(--color-text); }
.page-body .dish-row__variants li { display:flex; align-items:baseline; gap:12px; }
.page-body .dish-row__variant-price { margin-left:auto; white-space:nowrap; font-weight:var(--fw-semibold); color:var(--color-aegean-950); }
/* Allergen- und Zusatzstoff-Badges am Gericht: dieselben Quadrate wie in der Legende, etwas kleiner (Schrift bleibt 14px, §4.3). */
.page-body .dish-row__codes { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0; list-style:none; }
.page-body .dish-row__codes .legend__code { min-width:30px; height:30px; padding:0 5px; border-radius:7px; font-size:14px; cursor:pointer; }
.page-body .mark { border-radius:var(--radius-sm); font-size:12px; font-weight:var(--fw-semibold); }
.page-body .mark--v,
.page-body .mark--vg,
.page-body .mark--hal { background:var(--color-success-bg); color:var(--color-success); }
/* Glutenfrei: hellblau statt grün, damit es sich von V/VG/HAL abhebt. */
.page-body .mark--gf,
.legend__badge--gf { background:var(--color-aegean-50); color:var(--color-aegean-950); }

/* Legende: Karten für die Zeichen, Schlüssel mit quadratischen Buchstaben */
.page-body .legend { margin-top:8px; padding:0; border:0; border-radius:0; background:none; }
.legend__diets { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; margin:0 0 56px; padding:0; list-style:none; }
.legend__diet { display:flex; align-items:center; gap:20px; padding:24px 28px; border-radius:16px; background:var(--color-surface); box-shadow:var(--shadow-soft); }
.legend__badge { box-sizing:border-box; display:grid; flex:none; place-items:center; min-width:56px; height:56px; padding:0 8px; border-radius:12px; font-size:16px; font-weight:var(--fw-semibold); letter-spacing:.06em; }
.legend__badge--v,
.legend__badge--vg,
.legend__badge--hal { background:var(--color-success-bg); color:var(--color-success); }
.legend__badge--s { background:color-mix(in srgb, var(--color-error) 12%, var(--color-white)); color:var(--color-error); }
/* Kartentitel wie die Kästen im Reservierungs-Tab (.rsv-card__title): Candy Alphabet. */
.legend__diet-name { margin:0; font-family:"Candy Alphabet", var(--font-script, "Kaushan Script"), cursive; font-size:22px; font-weight:400; line-height:1.2; color:var(--color-aegean-950); }
.legend__diet-desc { margin:4px 0 0; font-size:16px; color:var(--color-text-muted); }
.legend__eyebrow { margin:0 0 16px; font-family:var(--font-body); font-size:14px; font-weight:var(--fw-semibold); letter-spacing:.3em; text-transform:uppercase; color:var(--color-text-muted); }
.legend__key { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:56px; margin:0 0 40px; padding:0; list-style:none; }
.legend__key li { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--color-border); font-size:18px; color:var(--color-text); }
.legend__code { box-sizing:border-box; display:grid; flex:none; place-items:center; min-width:36px; height:36px; padding:0 6px; border:1px solid color-mix(in srgb, var(--color-gold-500) 70%, transparent); border-radius:8px; background:color-mix(in srgb, var(--color-gold-500) 22%, var(--color-white)); font-size:14px; font-weight:var(--fw-semibold); color:var(--color-gold-900); }
.page-body .legend__text { max-width:70ch; margin:0; font-size:15px; line-height:1.7; color:var(--color-text-muted); }

/* Kategorien als Karten wie „So finden Sie uns" auf der Startseite: eine weiße
   Fläche, darin die cremefarbenen .sum-Karten mit Candy-Alphabet-Titel in Navy
   (.rsv-card__title) und kurzer gelber Linie (.sum__ul). Jede Kategorie und die
   Legende sehen gleich aus. Karte, Linie und Titel kommen aus app.css und
   reservation-skin.css; hier stehen nur Abstände. */
.menu-panel { display:grid; gap:14px; padding:40px; border-radius:20px; background:var(--color-surface); }
/* Startseite, beliebte Gerichte: dieselben Zeilen und Kästen wie die Speisekarte (.page-body-Regeln), im Aufbau des Reservierungsblocks */
.page-body.popular__body { padding-block:0; }
.popular__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 24px; }
.popular__head .popular__menu { width:auto; margin-bottom:40px; padding-inline:32px; text-decoration:none; }
@media (max-width:640px) { .popular__head .popular__menu { margin:-16px 0 32px; } }
.popular__action { display:flex; justify-content:center; margin:28px 0 8px; }
.popular__action .rsv__btn { width:auto; padding-inline:32px; text-decoration:none; }
/* Seitenende wie auf der Startseite: weiße Fläche, darunter die Linie mit Raute (bündig mit den Karten), dann direkt die Fußzeile */
.page-body:has(> .menu-end__deco) { padding-bottom:0; }
.menu-end__deco { margin-inline:40px; }
/* Trennlinie mit Raute (.rsv__deco, wie auf der Startseite) unter dem Titel und
   zwischen den Karten. Eine Linie erscheint nur, wenn davor eine sichtbare Karte
   steht — beim Filtern bleiben so keine doppelten oder leeren Linien stehen. */
.menu-list__title { margin:32px 0 0; }
.menu-list__deco { padding:20px 0 24px; }
.menu-panel { gap:0; }
.menu-panel .menu-section { margin:0; }
.menu-panel .menu-deco { display:none; }
.menu-panel .menu-section:not([hidden]) ~ .menu-section:not([hidden]) > .menu-deco,
.menu-panel .menu-section:not([hidden]) ~ .menu-deco--legend { display:flex; }

/* Zeichen am Gericht: Hover/Fokus (Tippen auf dem Handy) öffnet ein kleines Fenster
   im Stil des Kalender-Popovers (.datefield__panel: weiß, 1,5px gelber Rand, runde
   Ecken, Schatten), Inhalt wie in der Kennzeichnung. Das Fenster hängt an der
   Gerichtsspalte (.dish-row__main), nicht am Zeichen: so ragt es nie über die Karte
   und macht die Seite auf dem Handy nicht breiter. display:none solange zu, damit
   es nicht mitgemessen wird. Jede Karte hat unten rechts einen dezenten Link. */
.page-body .dish-row__main { position:relative; }
.page-body .sym { appearance:none; margin:0; font:inherit; cursor:pointer; transition:box-shadow .15s ease; }
.page-body .mark.sym { border:0; font-size:12px; font-weight:var(--fw-semibold); line-height:inherit; }
.page-body .mark.sym:hover,
.page-body .mark.sym:focus-visible { box-shadow:0 0 0 1.5px currentColor; outline:0; }
.page-body .dish-row__codes .legend__code.sym:hover,
.page-body .dish-row__codes .legend__code.sym:focus-visible { color:var(--color-gold-900); box-shadow:0 0 0 1.5px var(--color-gold-900); outline:0; }
.sym-tip {
  position:absolute; left:0; z-index:40; display:none; align-items:center; gap:12px;
  box-sizing:border-box; width:max-content; max-width:100%; margin-top:34px; padding:14px 18px;
  border:1.5px solid var(--color-gold-500); border-radius:16px; background:var(--color-surface); box-shadow:var(--shadow-card);
  font:400 15px/1.35 var(--font-body); letter-spacing:normal; text-transform:none; text-align:left; white-space:normal; color:var(--color-text);
  pointer-events:none;
}
.sym:hover .sym-tip,
.sym:focus .sym-tip { display:flex; animation:aix-tip-in .16s ease-out; }
@keyframes aix-tip-in { from { opacity:0; transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sym:hover .sym-tip, .sym:focus .sym-tip { animation:none; } }
.sym-tip .legend__badge { min-width:40px; height:40px; padding:0 6px; border-radius:8px; font-size:14px; }
.sym-tip .legend__code { min-width:32px; height:32px; padding:0 6px; border-radius:7px; font-size:14px; }
.sym-tip__text { display:grid; gap:2px; }
.sym-tip .legend__diet-name { font-size:18px; }
.sym-tip .legend__diet-desc { margin:0; font-size:14px; }
.sym-tip__name { font-size:15px; }
/* Allergen-/Zusatzstoff-Badges: das Fenster hängt an der ganzen Badge-Zeile und
   öffnet 8px darunter — sonst lag es über dem Badge selbst. */
.page-body .dish-row__codes { position:relative; }
.dish-row__codes .sym-tip { top:calc(100% + 8px); margin-top:0; }
.menu-card__legend-link { display:flex; align-items:center; justify-content:flex-end; gap:6px; width:max-content; min-height:var(--tap-min); margin:4px 0 0 auto; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); text-decoration:none; }
.menu-card__legend-link:hover,
.menu-card__legend-link:focus-visible { color:var(--color-aegean-950); text-decoration:underline; text-underline-offset:4px; }
.menu-bar__legend-link { min-height:32px; margin-top:2px; margin-bottom:-8px; }
.legend [id^="kennzeichnung-"],
@media (max-width:1023px) {
  .legend [id^="kennzeichnung-"],
}
.legend__diet:target { box-shadow:0 0 0 2px var(--color-gold-500), var(--shadow-soft); animation:aix-legend-flash 1.6s ease-out; }
.legend__key li:target { border-radius:6px; background:color-mix(in srgb, var(--color-gold-500) 22%, transparent); box-shadow:0 0 0 6px color-mix(in srgb, var(--color-gold-500) 22%, transparent); animation:aix-legend-flash 1.6s ease-out; }
@keyframes aix-legend-flash { from { background-color:color-mix(in srgb, var(--color-gold-500) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .legend__diet:target, .legend__key li:target { animation:none; }
}
/* Seitentitel wie „So finden Sie uns": .page-head zentriert sonst alles. */
.page-head .menu-head { text-align:left; padding-bottom:0; }
.menu-head .rsv__sub { margin-bottom:8px; font-family:var(--rsv-sans); }
.page-body .menu-card { margin:0; padding:32px 36px 16px; }
/* Kartentitel der Speisekarte größer als die 22px der Reservierungs-Kästen */
.menu-card .menu-card__title { font-size:34px; line-height:1.15; }
/* Zwischenüberschriften in der Kennzeichnung (Allergene, Zusatzstoffe) im selben Navy wie alle Kartentitel statt Grau */
.page-body .legend .legend__eyebrow { color:var(--color-aegean-950); }
@media (max-width:720px) { .menu-card .menu-card__title { font-size:28px; } }
.menu-card__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; }
/* Darf umbrechen: „aus Neuseeland · mit Beilagen & Salat" war auf 375px breiter als die Karte. */
.menu-card__head .menu-section__note { flex:0 1 auto; min-width:0; max-width:none; margin:0; font-size:13px; line-height:1.4; letter-spacing:.24em; text-transform:uppercase; color:var(--color-text-muted); }
.menu-card .sum__ul { margin:12px 0 8px; }
/* Kartentitel mittig zwischen Oberkante der Karte und der ersten Linie darunter:
   gleicher Abstand über dem Titel (padding-top) und unter der gelben Linie (margin-bottom),
   Titel samt gelber Linie 1 cm nach rechts. Gilt für jede Kategorie und die Kennzeichnung. */
/* .menu-panel davor: schlägt die älteren Padding-Regeln der Legende und der Handy-Ansicht weiter unten; −1px gleicht den Kartenrand aus. */
.page-body .menu-card { --menu-title-gap:20px; }
@media (max-width:720px) { .page-body .menu-card { --menu-title-gap:16px; } }
.page-body .menu-panel .menu-card, .page-body .menu-panel .legend.menu-card { padding-top:calc(var(--menu-title-gap) - 1px); }
.page-body .menu-panel .menu-card .sum__ul { margin:12px 0 var(--menu-title-gap) 1cm; }
.page-body .menu-panel .menu-card .menu-card__head { padding-left:1cm; }
/* .page-body .legend nimmt oben Rahmen und Grund weg; als Karte kommen sie zurück. */
.page-body .legend.menu-card { margin:0; padding:24px 28px 20px; border:1px solid var(--rsv-line-light); border-radius:20px; background:var(--color-cream); }
/* Kennzeichnung kompakt: kleinere Zeichen-Karten, dichter Schlüssel. Buchstaben bleiben 14px (§4.3).
   .legend .x schlägt die älteren .legend__x-Regeln samt ihren Media-Queries. */
.legend .legend__diets { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin:0 0 20px; }
.legend .legend__diet { gap:12px; padding:12px 16px; border-radius:12px; }
.legend .legend__badge { min-width:40px; height:40px; padding:0 6px; border-radius:8px; font-size:14px; }
.legend .legend__diet-name { font-size:18px; }
.legend .legend__diet-desc { margin-top:2px; font-size:14px; }
.legend .legend__eyebrow { margin:0 0 6px; font-size:13px; letter-spacing:.24em; }
.legend .legend__key { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); column-gap:24px; margin:0 0 18px; }
.legend .legend__key li { gap:10px; padding:6px 0; font-size:15px; }
.legend .legend__key .legend__code { min-width:28px; height:28px; padding:0 5px; border-radius:6px; font-size:14px; }
.page-body .legend .legend__text { font-size:14px; line-height:1.6; }
@media (max-width:1180px) { .legend .legend__diets { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) {
  .legend .legend__diets { grid-template-columns:1fr; }
  .legend .legend__key { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:12px; }
  .legend .legend__key li { font-size:14px; }
}
@media (max-width:860px) {
  .menu-panel { padding:16px; }
  .menu-end__deco { margin-inline:16px; }
  .page-body .menu-card,
  .page-body .legend.menu-card { padding:24px 20px 12px; }
  .menu-card__head .menu-section__note { letter-spacing:.16em; }
}

@media (max-width:1180px) {
  .page-body .dish-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 48px; }
  .legend__key { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:40px; }
  .legend__diets { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px) {
  .legend__diets { grid-template-columns:1fr; }
  .menu-filter { grid-template-columns:1fr; }
  .menu-filter__toggles { justify-content:flex-start; }
}
@media (max-width:720px) {
  .page-body .dish-list { grid-template-columns:1fr; }
  .menu-section__head { flex-wrap:wrap; gap:12px 16px; }
  .menu-section__head .menu-section__note { flex-basis:100%; order:3; letter-spacing:.16em; }
  .page-body .dish-row__desc { font-size:16px; }
  .legend__key { grid-template-columns:1fr; }
  .legend__key li { font-size:16px; }
}

.empty-note { border:1px dashed var(--color-border); border-radius:4px; padding:28px; text-align:center; color:var(--color-text-muted); font-size:16px; }
.infocard__text { margin:0; font-size:16px; line-height:1.9; color:var(--color-text); }
/* .hours, .hours li und .hours__time stehen in components.extra.css.
   Hier steht nur noch, was die Fußzeile zusätzlich braucht. */

/* ---------- CTA band ---------- */
.cta { text-align:center; }
.cta__actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.notfound__title { margin:18px 0 0; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--color-aegean-800); font-size:clamp(24px,3.4vw,38px); }
.site-footer__brand { margin:0; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.12em; font-size:20px; }
.site-footer__text { margin:20px 0 0; font-size:15px; line-height:1.8; color:var(--color-white); }
.site-footer__title { margin:0 0 16px; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:var(--tracking-display); font-size:15px; color:var(--color-white); }
.site-footer__links { display:flex; flex-direction:column; gap:8px; font-size:15px; list-style:none; margin:0; padding:0; }
/* 44px, not the canvas's 32 — §4.3 sets the minimum target size. */
.site-footer__links a { min-height:var(--tap-min); display:inline-flex; align-items:center; }

/* Fußzeile als schwebende Karte: Logo mittig, darunter Adresse und Rechtliches. */
.site-footer { margin-top:0; }
.site-footer__brand-block { display:flex; flex-direction:column; align-items:center; text-align:center; padding:var(--sp-6) var(--sp-6) 0; }
.site-footer__brand-block .site-footer__text { margin-top:var(--sp-3); }
.site-footer__grid { grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:start; gap:var(--sp-5); max-width:var(--container-md); margin-inline:auto; padding:var(--sp-5) var(--sp-6); text-align:center; }
.site-footer__grid .site-footer__title { margin-bottom:var(--sp-2); }
.site-footer__grid .site-footer__text { margin-top:0; }
.site-footer__links { align-items:center; gap:var(--sp-1); }
/* Mit Maus reicht die Zeilenhöhe; auf Touch bleibt das 44px-Ziel (§4.3). */
@media (pointer:fine) { .site-footer__links a { min-height:0; } }
.site-footer .choice--up { display:inline-block; }
/* Kopfleiste in Navy (--color-aegean-950), wie im Hero-Entwurf. */
.site-header--flat { background:var(--color-aegean-950); backdrop-filter:none; border-bottom:0; }
.site-header--flat .navbar__link,
.site-header--flat .lang__toggle,
.site-header--flat .navbar__burger { color:var(--color-white); }
.site-header--flat .navbar__link:hover,
.site-header--flat .navbar__link[aria-current="page"] { color:var(--color-gold-300); }
/* Logo mittig: drei Spalten, links leer, rechts Links + Reservieren.
   Mit der dritten Logozeile ist die Leiste 81px hoch statt 69px. */
:root { --aix-head: 112px; }
@media (max-width:760px) { :root { --aix-head: 81px; } }
.site-header--flat .navbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.site-header--flat .navbar__logo { grid-column:2; grid-row:1; }
.site-header--flat .navbar__group { grid-column:3; grid-row:1; justify-self:end; }
/* Sprachwahl rechts neben „Reservieren", nur das Kürzel. */
.site-header--flat .lang__toggle { gap:6px; padding:0 4px; background:transparent; border:0; }
.site-header--flat .lang__toggle:hover { color:var(--color-gold-300); }
.site-header--flat .lang__caret { width:10px; height:6px; flex:none; }
.site-header--flat .navbar__lang[open] .lang__caret { transform:rotate(180deg); }
.site-header--flat .lang__menu { right:0; left:auto; }
/* Start und Speisekarte in der linken Spalte. */
.site-header--flat .navbar__links--start { grid-column:1; grid-row:1; justify-self:start; }
/* Handy: Links und Reservieren sind aus; die Sprache wandert nach links, der Burger bleibt rechts. */
@media (max-width:760px) {
  .site-header--flat .navbar { column-gap:var(--sp-2); }
  .site-header--flat .navbar__group { display:contents; }
  .site-header--flat .navbar__lang { grid-column:1; grid-row:1; justify-self:start; }
  .site-header--flat .navbar__burger { grid-column:3; grid-row:1; justify-self:end; }
  .site-header--flat .lang__menu { left:0; right:auto; }
}

/* Ein Blau für alle blauen Flächen: Kopfleiste, Fußzeile, Knöpfe, Auswahl.
   Überschreibt die Werte in components*.css. */
.site-footer,
.drawer { background:var(--color-aegean-950); }
.mobilebar__btn--reserve { background:var(--color-aegean-950); }
.btn--secondary:hover { --_bg:var(--color-aegean-950); --_bd:var(--color-aegean-950); }
.slot--selected,
.booking__step--current .booking__step-num { background:var(--color-aegean-950); border-color:var(--color-aegean-950); }

.site-footer__bar p { margin:0; padding:var(--sp-3) var(--sp-6); text-align:center; font-size:14px; color:var(--color-white); }
.field--error input, .field--error select, .field--error textarea { border-color:var(--color-error); }
.field__error { margin:8px 0 0; font-size:14px; color:var(--color-error); }
.field__help { margin:8px 0 0; font-size:14px; color:var(--color-text-muted); }
.field--wide { grid-column:1 / -1; }
.btn--block { width:100%; margin-top:28px; }
.consent--error label { color:var(--color-error); }
/* Zwei Spalten um die Formularkarte herum: die Karte selbst ist .booking
   (components.extra.css), das Raster steht hier. */
.booking-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:48px; align-items:start; padding-block:var(--sp-10) var(--sp-12); }
@media (max-width:1023px) { .booking-layout { grid-template-columns:1fr; gap:var(--sp-6); } }
.booking__aside { display:flex; flex-direction:column; gap:24px; }

/* acknowledgement card */
.notice { background:var(--color-surface); border:1px solid var(--color-border); border-top:4px solid var(--color-primary); border-radius:4px; padding:44px 34px; }
.notice__lead { margin:0; font-size:18px; line-height:1.8; color:var(--color-text); }
.notice__text { margin:18px 0 0; font-size:16px; line-height:1.8; color:var(--color-text-muted); }
.notice .cta__actions { margin-top:28px; }

.form-alert { margin:20px 0 0; padding:14px 16px; border-left:4px solid var(--color-primary-hover); background:var(--color-bg); font-size:15px; line-height:1.7; color:var(--color-text); }
.form-alert--error { border-left-color:var(--color-error); background:var(--color-error-bg); }
.form-note { margin:16px 0 0; font-size:14px; line-height:1.7; color:var(--color-text-muted); }

/* ===========================================================================
   Responsive — the canvas's own breakpoints
   =========================================================================== */
@media (max-width:1180px) {
  .nav__burger { display:flex; }
  .nav__group { display:none; }
  .nav__brand { text-align:left; }
}
@media (max-width:1080px) {
  .cards, .reviews { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .booking { grid-template-columns:1fr; gap:32px; }
  .story__grid { grid-template-columns:1fr; gap:40px; }
  .dish-list { grid-template-columns:1fr; gap:0; }
  .menu-nav { top:74px; }
}
@media (max-width:760px) {
  .container { padding-inline:20px; }
  .site-header { padding:12px 12px 0; }
  .nav { gap:10px; padding:8px 10px; }
  /* The mobile bar already carries "Reservieren"; a second one would not fit. */
  .nav__cta { display:none; }
  .nav__brand-name { font-size:16px; white-space:nowrap; }
  .nav__brand-sub { font-size:9px; letter-spacing:.28em; }
  .cards, .reviews, .infocards, .form-grid { grid-template-columns:1fr; }
  .menu-filter { grid-template-columns:1fr; }
  .form-card { padding:24px 20px; }
  .site-footer__grid { grid-template-columns:1fr; padding:var(--sp-6) 20px; }
  .hero__inner { padding:140px 20px 72px; }
  .page-head__inner { padding:120px 20px 48px; }
  .mobilebar { display:block; }
  body { padding-bottom:56px; }
  .notfound { padding:140px 20px 100px; }
}
@media (max-width:560px) {
  .btn { width:100%; }
  .hero__actions .btn, .cta__actions .btn { width:100%; }
}
/* Die Speisekarte hat 16 Kategorien. .menu-teaser__chips (components.css) ist
   für eine Handvoll Chips auf der Startseite gedacht und stapelt sie sonst über
   den halben Bildschirm — hier stattdessen eine Zeile zum Wischen, klebend
   unter der Kopfleiste. */
.menu-teaser__chips--scroll {
  display:flex; flex-wrap:nowrap; justify-content:flex-start;
  gap:.625rem; overflow-x:auto; scrollbar-width:thin;
  padding-block:.75rem; margin-top:0;
}
.menu-teaser__chips--scroll .chip { flex:0 0 auto; }
.menu-teaser--sticky { position:sticky; top:var(--aix-head); z-index:30; background:var(--color-bg); border-bottom:1px solid var(--color-border); }

/* Die Zeitenliste steht in der Fußzeile auf Aegean-800. Die Regeln in
   components.extra.css färben den heutigen Tag aegean-700 — dunkelblau auf dunkelblau,
   gemessen 1,19:1. Auf dem dunklen Grund invertiert sie deshalb. */
.site-footer .hours li,
.site-footer .hours li[aria-current="date"],
.site-footer .hours li[aria-current="date"] .hours__time { color:var(--color-white); }
.site-footer .hours__time { color:rgba(255,255,255,.88); }
/* ===========================================================================
   Kopfleiste + Startseiten-Hero nach dem Entwurf vom 15.09. (Glas-Karte über
   dem Foto). Nur Tokens: Navy = --color-aegean-950, Gelb = --color-gold-500,
   Creme = --color-cream. Überschrift in Caveat (fonts.css, selbst gehostet).
   Das Foto kommt als <picture> mit srcset aus IMG_5108 (960/1920/2880).
   =========================================================================== */
.site-header--flat .navbar { max-width:none; min-height:var(--aix-head); padding:0 48px; }
.site-header--flat .navbar__links { --navbar-links-gap:42px; gap:var(--navbar-links-gap); }
.site-header--flat .navbar__group { gap:32px; }
.site-header--flat .navbar__link { font-size:15px; font-weight:var(--fw-semibold); letter-spacing:.16em; transition:color 180ms ease; }
.site-header--flat .navbar__link:hover { color:var(--color-gold-500); }
.site-header--flat .navbar__social { display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap-min); min-height:var(--tap-min); margin-block:calc((var(--tap-min) - 22px) / -2); text-decoration:none; }  /* Instagram icon beside „Über uns“ */
.site-header--flat .navbar__social::after { display:none; }
.site-header--flat .navbar__social { min-width:36px; }   /* 44px tall for tapping, 36px wide so four symbols fit beside the logo */
/* Neighbouring symbols (Instagram, mail, map left of the logo) sit close together. */
.site-header--flat :is(.navbar__social, .navbar__social-wrap) + :is(.navbar__social, .navbar__social-wrap) { margin-left:calc(-1 * var(--navbar-links-gap, 24px) + 2px); }
/* Map symbol (left of the logo): the app-choice menu opens below it, anchored at its right edge,
   so it grows towards the left page edge instead of over the logo. */
.site-header--flat .navbar__social-wrap { display:inline-flex; }
.site-header--flat .navbar__social-wrap .choice__menu { left:auto; right:0; }
.site-header--flat .navbar__logo { --_name:34px; --_word:12px; --_sub:9px; }
.site-header--flat .navbar__logo .logo__name { line-height:.9; }
.site-header--flat .navbar__logo .logo__word { gap:12px; margin-top:7px; letter-spacing:.32em; color:var(--color-gold-500); }
.site-header--flat .navbar__logo .logo__word::before,
.site-header--flat .navbar__logo .logo__word::after { flex:0 0 26px; min-width:26px; }
.site-header--flat .navbar__logo .logo__sub { margin-top:7px; letter-spacing:.30em; }
.site-header--flat .lang__toggle { font-size:15px; font-weight:var(--fw-medium); }
.site-header--flat .lang__caret { color:var(--color-gold-500); }
.site-header--flat .navbar__cta { padding:18px 32px; border-radius:10px; font-size:15px; font-weight:var(--fw-semibold); letter-spacing:.14em; }

.hero {
  position:relative; isolation:isolate; overflow:hidden; box-sizing:border-box;
  display:flex; align-items:flex-start;
  min-height:max(520px, calc(100svh - var(--aix-head)));
  /* Oben 104px wie im Entwurf bei 1080px Höhe, auf kürzeren Bildschirmen weniger,
     damit Karte, Infozeile und Laufband auf den ersten Bildschirm passen.
     Unten: Laufband + 24px + Infozeile (23px) + 24px Abstand zur Karte. */
  padding:clamp(24px, calc((100vh - 900px) * .35 + 40px), 104px) 104px calc(var(--ticker-h) + 71px);
  background:var(--color-aegean-950);
}
.hero__media { position:absolute; inset:0; z-index:-1; }
.hero__media picture { display:contents; }
/* Bildausschnitt wie im Entwurf (1920×1080): die Lampentraube steht rechts
   neben der Karte, die Decke füllt oben. Das Hochformat füllt immer die Breite,
   ein object-position in % verschiebt es also nur senkrecht. Deshalb wird das
   Foto so breit gezogen, dass die obere rechte Lampe (58,6 % der Bildbreite,
   46,6 % der Bildhöhe) 13,6vw rechts der Kartenkante und auf 21 % der
   Hero-Höhe sitzt. Bei 1920×1080 ergibt das genau den Entwurf. Kein
   transform: scale (macht das Foto weich). Seitenverhältnis 3962/2939 = 1,348. */
.hero { --hero-card-right:864px; --ticker-h:49px; }
.hero__photo {
  --hero-img-w:max(100vw, calc((var(--hero-card-right) + 13.6vw) / .586));
  position:absolute; left:0; top:calc(21% - var(--hero-img-w) * .628);
  width:var(--hero-img-w); max-width:none; height:auto;
}
.hero__scrim {
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--color-aegean-950) 66%, transparent) 0%,
    color-mix(in srgb, var(--color-aegean-950) 30%, transparent) 46%,
    color-mix(in srgb, var(--color-aegean-950) 8%, transparent) 100%);
}
.hero__card {
  box-sizing:border-box; display:flex; flex-direction:column; gap:clamp(14px, 2.6vh, 28px); text-align:left;
  /* Maße aus dem Entwurf bei 1080px Höhe; darunter schrumpfen Innenabstand,
     Abstände, Überschrift, Text und Knopfhöhe mit der Bildschirmhöhe. */
  width:760px; max-width:100%; padding:clamp(28px, 5.93vh, 64px) 60px; border-radius:26px;
  background:color-mix(in srgb, var(--color-cream) 68%, transparent);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 34px 90px color-mix(in srgb, var(--color-aegean-950) 50%, transparent);
}
.hero__eyebrow { display:flex; align-items:center; gap:16px; margin:0; font-size:13px; font-weight:var(--fw-medium); letter-spacing:.40em; text-transform:uppercase; color:var(--color-gold-900); }
.hero__eyebrow::before { content:""; flex:none; width:52px; height:5px; background:var(--color-gold-500); }
/* components.css hat einen älteren .hero mit denselben Klassen: zweite Linie
   hinter der Dachzeile, zentrierte Knöpfe, schmale Überschrift. Hier zurückgesetzt. */
.hero__eyebrow::after { content:none; }
.hero__title { margin:0; max-width:none; font-family:"Caveat", var(--font-script); font-size:clamp(56px, 9.63vh, 104px); font-weight:700; line-height:.9; letter-spacing:normal; text-transform:none; hyphens:none; color:var(--color-aegean-950); }
.hero__title-line { display:block; }
.hero__lead { margin:0; max-width:none; font-size:clamp(17px, 2.22vh, 24px); font-weight:400; line-height:1.55; color:var(--color-charcoal-soft); text-wrap:pretty; }
.hero__actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:14px; margin:0; }
/* Hero buttons: the page's .rsv__btn (48px, icon, sentence case), side by side and equally wide. */
.hero__actions .rsv__btn { flex:1 1 0; width:auto; min-width:0; padding-inline:18px; white-space:nowrap; text-decoration:none; }
/* .rsv__btn.rsv__btn--gold: one class more than the general .rsv__btn rules further down, so gold wins there too. */
.rsv__btn.rsv__btn--gold { background:var(--color-gold-500); color:var(--color-aegean-950); }
.rsv__btn.rsv__btn--gold .f__ico { color:var(--color-aegean-950); }
.rsv__btn.rsv__btn--gold:hover { background:var(--color-gold-400); color:var(--color-aegean-950); text-decoration:none; }
.hero__actions .btn { min-height:var(--tap-min); padding:clamp(14px, 2.04vh, 22px) 38px; border-radius:10px; font-size:15px; font-weight:var(--fw-semibold); letter-spacing:.14em; text-transform:uppercase; }
.btn--dark { --_bg:var(--color-aegean-950); --_fg:var(--color-white); --_bd:var(--color-aegean-950); }
/* Same hover as .rsv__btn and the delivery squares: stays navy, white turns yellow. */
.btn--dark:hover { --_bg:var(--color-aegean-950); --_bd:var(--color-aegean-950); --_fg:var(--color-gold-500); text-decoration:none; }
.grating__stars { letter-spacing:.16em; color:var(--color-gold-600); }
/* Google rating box, now in the Adresse card: faded navy, the whole box links to our Google profile. */
.grating { display:inline-flex; align-self:flex-start; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:14px 0 0; padding:9px 14px; border-radius:10px; background:color-mix(in srgb, var(--color-aegean-950) 8%, transparent); border:1px solid color-mix(in srgb, var(--color-aegean-950) 14%, transparent); font-size:14px; font-weight:var(--fw-medium); color:var(--color-charcoal-soft); text-decoration:none; transition:background var(--dur-hover), border-color var(--dur-hover); }
.grating:hover { background:color-mix(in srgb, var(--color-aegean-950) 15%, transparent); border-color:color-mix(in srgb, var(--color-aegean-950) 26%, transparent); color:var(--color-aegean-950); text-decoration:none; }
.grating__logo { flex:none; width:18px; height:18px; }
/* Hero: serif headline and a guest quote with a gold edge (design 15.09.). */
/* .hero__title twice: beats the phone/tablet .hero__title sizes further down. */
.hero__title.hero__title--serif { font-family:var(--font-heading); font-size:clamp(28px, 3.4vw, 56px); font-weight:400; line-height:1.08; }   /* by width: "Die beste Dorade" must fit the card on one line */
.hero__title.hero__title--serif .hero__title-line { display:block; white-space:nowrap; }   /* two lines as in the design, never three */
.hero__quote { margin:0; padding:16px 22px 14px; border-left:4px solid var(--color-gold-500); border-radius:0 14px 14px 0; background:color-mix(in srgb, var(--color-white) 45%, transparent); }
.hero__quote-text { margin:0; }
.hero__quote-text p { margin:0; font-family:var(--font-heading); font-style:italic; font-size:clamp(17px, 2.1vh, 21px); line-height:1.45; color:var(--color-aegean-950); text-wrap:pretty; }
.hero__quote-source { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:10px; font-size:13px; font-weight:var(--fw-medium); color:var(--color-charcoal-soft); text-decoration:none; }
.hero__quote-source .grating__stars { letter-spacing:.08em; }
.hero__quote-source:hover { color:var(--color-aegean-950); text-decoration:underline; }
.hero__meta { position:absolute; left:104px; bottom:calc(var(--ticker-h) + 24px); display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:0; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-aegean-50); }
.hero__diamond { flex:none; width:5px; height:5px; background:var(--color-gold-500); transform:rotate(45deg); }

/* Laufband unten im Hero (nach barriendo-fantasmas): Aktionen und Öffnungszeiten
   in einer Zeile. Die Gruppe steht zweimal im Track; der Track wandert um -50 %
   und beginnt nahtlos von vorn, weil beide Kopien gleich breit sind (gleicher
   Abstand innen wie am Ende). Hover und Tastaturfokus halten es an. */
.ticker { position:absolute; left:0; right:0; bottom:0; z-index:2; overflow:hidden; border-top:1px solid var(--color-aegean-950); background:var(--color-gold-500); color:var(--color-aegean-950); }
.ticker__track { display:flex; width:max-content; animation:aix-ticker 48s linear infinite; }
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state:paused; }
/* Tempo aus dem Admin-Tab „Laufband“ (normal = 48s oben). */
.ticker--slow .ticker__track { animation-duration:72s; }
.ticker--fast .ticker__track { animation-duration:32s; }
/* Laufband ausgeschaltet oder nichts zu zeigen: keinen Platz dafür freihalten. */
.hero:not(:has(.ticker)) { --ticker-h:0px; }
.ticker__group { display:flex; flex:none; align-items:center; gap:20px; margin:0; padding:13px 20px 13px 0; white-space:nowrap; font-size:15px; font-weight:var(--fw-medium); line-height:22px; letter-spacing:.14em; text-transform:uppercase; }
.ticker__item { display:inline-flex; align-items:center; gap:12px; }
.ticker__title { font-weight:var(--fw-semibold); }
.ticker__item--today { font-weight:var(--fw-semibold); text-decoration:underline; text-underline-offset:5px; }
.ticker__link { color:inherit; font-weight:var(--fw-semibold); text-decoration:underline; text-underline-offset:5px; }
.ticker__link:hover { color:inherit; text-decoration-thickness:2px; }
.ticker__sep { flex:none; width:6px; height:6px; background:currentColor; transform:rotate(45deg); }
@keyframes aix-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* „Bewegung reduzieren": das Band läuft trotzdem, aber halb so schnell (Wunsch
   des Inhabers, 15.09.). Hover und Tastaturfokus halten es weiter an. !important,
   damit eine allgemeine „keine Animationen"-Regel es nicht auf null setzt. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation:aix-ticker 96s linear infinite !important; }
  .ticker--slow .ticker__track { animation-duration:144s !important; }
  .ticker--fast .ticker__track { animation-duration:64s !important; }
  .ticker:hover .ticker__track,
  .ticker:focus-within .ticker__track { animation-play-state:paused !important; }
}
@media (max-width:560px) {
  .hero { --ticker-h:45px; }
  .ticker__group { padding-block:12px; font-size:13px; line-height:20px; }
}

@media (max-width:1439px) {
  .site-header--flat .navbar { padding:0 32px; }
  .hero { --hero-card-right:calc(48px + min(760px, 52vw)); align-items:center; padding:clamp(24px, calc((100vh - 900px) * .35 + 40px), 64px) 48px calc(var(--ticker-h) + 71px); }
  .hero__card { width:min(760px, 52vw); padding:clamp(28px, 5.93vh, 48px) 48px; }
  .hero__title { font-size:clamp(52px, min(7vw, 9.63vh), 104px); }
  .hero__meta { left:48px; }
}
/* From 1359px down (was 1279px): at full size the German left half reached the logo at 1280px. */
@media (max-width:1359px) {
  .site-header--flat .navbar__links { --navbar-links-gap:24px; }
  .site-header--flat .navbar__group { gap:20px; }
  .site-header--flat .navbar__link,
  .site-header--flat .lang__toggle { font-size:13px; }
  .site-header--flat .navbar__cta { padding:14px 22px; font-size:13px; }
}
/* 1024–1199px (e.g. iPad landscape): the German links are long; a little less air so
   neither half reaches the logo. */
@media (max-width:1199px) {
  .site-header--flat .navbar__links { --navbar-links-gap:18px; }
  .site-header--flat .navbar__group { gap:16px; }
  .site-header--flat .navbar__link,
  .site-header--flat .lang__toggle { letter-spacing:.1em; }
  .site-header--flat .navbar__logo .logo__word::before,
  .site-header--flat .navbar__logo .logo__word::after { flex-basis:16px; min-width:16px; }
}
@media (max-width:1099px) {
  .site-header--flat .navbar__links { --navbar-links-gap:14px; }
  .site-header--flat .navbar__group { gap:12px; }
  .site-header--flat .navbar__link,
  .site-header--flat .lang__toggle { letter-spacing:.06em; }
}
@media (max-width:1023px) {
  /* Phones and tablets: the photo is the background of the whole hero and the glass card sits on it,
     like on desktop; below the card the meta line, at the very bottom the ticker. */
  .hero { position:relative; display:block; min-height:0; padding:0 0 var(--ticker-h); background:var(--color-aegean-950); overflow:hidden; }
  .hero__media { position:absolute; inset:0; height:auto; }
  .hero__photo { inset:0; top:0; width:100%; height:100%; object-fit:cover; object-position:56% 50%; }
  .hero__scrim {
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--color-aegean-950) 20%, transparent) 0%,
      color-mix(in srgb, var(--color-aegean-950) 35%, transparent) 60%,
      color-mix(in srgb, var(--color-aegean-950) 70%, transparent) 100%);
  }
  .hero__card { position:relative; z-index:1; width:auto; margin:48px 32px 24px; box-shadow:0 24px 60px color-mix(in srgb, var(--color-aegean-950) 45%, transparent); }
  .hero__meta { position:relative; z-index:1; left:auto; bottom:auto; justify-content:center; padding:0 32px 24px; color:var(--color-white); }   /* offsets reset: the desktop left/bottom would shift it onto the card */
}
@media (max-width:767px) {
  .hero__card { margin:32px; padding:32px 24px; gap:22px; }
  .hero__eyebrow { font-size:12px; letter-spacing:.28em; }
  .hero__title { font-size:clamp(52px, 13vw, 72px); }
  .hero__title-line { display:inline; }
  .hero__lead { font-size:18px; }
  .hero__actions { gap:10px; }
  .hero__actions .rsv__btn { padding-inline:12px; }
  .hero__actions .btn { width:100%; padding:18px 24px; }
  .hero__meta { gap:8px 14px; font-size:13px; text-align:center; }
}
@media (max-width:760px) {
  .site-header--flat .navbar__logo { --_name:26px; --_word:10px; --_sub:8px; }
}

/* Küche + „Aktionen & Neuigkeiten“ (15.09.).
   Kopf wie Beliebte Gerichte/Reservierung (.rsv__deco, .rsv__title, gelbe
   .rsv__ul, .rsv__sub); in der weißen Fläche links der Text mit Navy-Knopf,
   rechts die Slideshow im Kastenstil (.sum, Icon + Titel wie die Kästen). */
/* No divider above this one title (it follows the hero), so it needs its own air. */
.story.section--flush-top div.rsv, .contact-page.section--flush-top div.rsv { padding-top:48px; }
.story__panel .story__grid { grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:48px; align-items:stretch; }
.story__text { align-self:center; max-width:60ch; }
.story__text .story__body:first-child { margin-top:0; }
.story__action { margin:28px 0 0; }
.story__action .rsv__btn { display:inline-flex; width:auto; padding-inline:32px; text-decoration:none; }

/* The slideshow card: navy like the header, gold stripe on top, full-bleed
   photo per slide under a navy fade, gold pill label, script title, yellow
   button like „Reservieren“. JS (site.js [data-promo]) adds data-promo-ready,
   .is-active on the shown slide, the counter and the gold progress bar. */
.showcase { --showcase-dur:6.5s; position:relative; display:flex; flex-direction:column; min-width:0; padding:24px 22px 18px; border-radius:20px; overflow:hidden; background:var(--color-aegean-950); color:var(--color-white); box-shadow:0 20px 44px color-mix(in srgb, var(--color-aegean-950) 30%, transparent); }
.showcase::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--color-gold-500); }
.showcase__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.showcase .rsv-card__title { color:var(--color-white); }
.showcase .sum__ico { color:var(--color-gold-500); }
.showcase .sum__ul { margin:12px 0 16px; background:var(--color-gold-500); }
.showcase__counter { margin:0; font:600 12px/1 var(--rsv-sans); letter-spacing:.18em; font-variant-numeric:tabular-nums; color:var(--color-gold-300); }

.showcase__track { display:flex; flex:1; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; border-radius:14px; }
.showcase__track::-webkit-scrollbar { display:none; }
.showcase__slide { position:relative; isolation:isolate; flex:0 0 100%; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; min-height:360px; overflow:hidden; border-radius:14px; }
.showcase__media { position:absolute; inset:0; z-index:-1; }
.showcase__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--color-aegean-950) 5%, transparent) 0%, color-mix(in srgb, var(--color-aegean-950) 55%, transparent) 42%, color-mix(in srgb, var(--color-aegean-950) 95%, transparent) 100%); }
.showcase__image { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform 7s ease-out; }
.showcase__image--house { object-position:50% 35%; }
/* Dish slides: the whole landscape photo on top (no crop, no zoom), text below on navy. */
.showcase__slide--dish { justify-content:flex-start; background:color-mix(in srgb, var(--color-white) 6%, var(--color-aegean-950)); }
.showcase__slide--dish .showcase__media { position:relative; inset:auto; z-index:0; aspect-ratio:4 / 3; overflow:hidden; }
.showcase__slide--dish .showcase__media::after { display:none; }
.showcase__slide--dish .showcase__image, .showcase__slide--dish.is-active .showcase__image { transform:none; }
.showcase__slide--dish .showcase__body { flex:1; justify-content:center; padding:16px 18px 18px; }
.showcase__slide--dish .showcase__title { font-size:clamp(24px, 2.4vw, 32px); }
.showcase__slide:nth-child(2n) .showcase__image--house { object-position:25% 75%; }
.showcase__slide.is-active .showcase__image { transform:scale(1.14); }

.showcase__body { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:22px; }
.showcase__kind { margin:0; padding:6px 11px; border-radius:var(--radius-pill); background:var(--color-gold-500); font:700 11px/1 var(--rsv-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--color-aegean-950); }
.showcase__title { margin:6px 0 0; font-family:"Monday Holiday", var(--font-script, "Kaushan Script"), cursive; font-size:clamp(30px, 3vw, 40px); line-height:1.1; color:var(--color-white); }
.showcase__text { margin:0; max-width:36ch; font-size:15px; line-height:1.6; color:color-mix(in srgb, var(--color-white) 86%, transparent); }
.showcase__cta { margin-top:12px; }
.showcase__cta:hover { color:var(--color-aegean-950); text-decoration:none; }
/* Content rises in, one line after the other — only once JS is there to mark the slide. */
.showcase[data-promo-ready] .showcase__body > * { opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.showcase[data-promo-ready] .showcase__slide.is-active .showcase__body > * { opacity:1; transform:none; }
.showcase__slide.is-active .showcase__body > :nth-child(2) { transition-delay:.08s; }
.showcase__slide.is-active .showcase__body > :nth-child(3) { transition-delay:.16s; }
.showcase__slide.is-active .showcase__body > :nth-child(4) { transition-delay:.24s; }

/* Flagship ad (Dorade): cream head with script title, photo with a navy label card, navy foot with the CTA.
   The label sits top left on the photo, as in the mockup. */
.showcase__slide--ad { justify-content:flex-start; background:var(--color-cream); color:var(--color-aegean-950); }
.showcase__ad-head { display:flex; flex:none; flex-direction:column; justify-content:center; padding:16px 16px 12px; text-align:center; }  /* only as tall as the title; the photo takes the spare height */
.showcase__ad-kicker { display:flex; align-items:center; justify-content:center; gap:12px; margin:0; font:700 11px/1 var(--rsv-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--color-aegean-950); }
.showcase__ad-kicker::before, .showcase__ad-kicker::after { content:""; width:28px; height:1px; background:var(--color-gold-500); }
.showcase__ad-title { margin:8px 0 0; font-family:"Monday Holiday", var(--font-script, "Kaushan Script"), cursive; font-size:clamp(26px, 2.6vw, 36px); line-height:1.1; color:var(--color-aegean-950); }
.showcase__ad-photo { position:relative; flex:1 1 auto; aspect-ratio:3 / 2; overflow:hidden; }
.showcase__ad-photo picture, .showcase__ad-image { display:block; width:100%; height:100%; object-fit:cover; }
.showcase__ad-label { position:absolute; left:10px; top:10px; display:flex; flex-direction:column; gap:2px; max-width:62%; padding:7px 11px; border-radius:8px; box-shadow:0 6px 16px color-mix(in srgb, var(--color-aegean-950) 25%, transparent); background:color-mix(in srgb, var(--color-aegean-950) 90%, transparent); color:var(--color-white); }
.showcase__ad-label p { margin:0; }
.showcase__ad-label-kicker { font:700 9px/1.2 var(--rsv-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--color-gold-500); }
.showcase__ad-label-title { font-weight:700; font-size:clamp(12px, 1.1vw, 15px); line-height:1.2; }
.showcase__ad-label-text { font-size:10px; line-height:1.3; color:color-mix(in srgb, var(--color-white) 82%, transparent); }
.showcase__ad-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; padding:14px 18px 16px; background:var(--color-aegean-950); }
.showcase__ad-claim { margin:0; font-family:"Monday Holiday", var(--font-script, "Kaushan Script"), cursive; font-size:22px; line-height:1.1; color:var(--color-gold-500); }
.showcase__ad-foot .showcase__cta { margin-top:0; }
.showcase[data-promo-ready] .showcase__ad-label { opacity:0; transform:translateY(10px); transition:opacity .55s ease .15s, transform .55s ease .15s; }
.showcase[data-promo-ready] .showcase__slide--ad.is-active .showcase__ad-label { opacity:1; transform:none; }

.showcase__progress { height:3px; margin-top:16px; overflow:hidden; border-radius:2px; background:color-mix(in srgb, var(--color-white) 16%, transparent); }
.showcase__progress[hidden] { display:none; }
.showcase__progress i { display:block; height:100%; transform:scaleX(0); transform-origin:left; background:var(--color-gold-500); }
.showcase__progress i.is-running { animation:showcase-progress var(--showcase-dur) linear forwards; }
.showcase[data-paused] .showcase__progress i { animation-play-state:paused; }
@keyframes showcase-progress { to { transform:scaleX(1); } }

.showcase__controls { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:10px; }
.showcase__controls[hidden] { display:none; }
.showcase__arrow { display:grid; place-items:center; width:var(--tap-min); height:var(--tap-min); padding:0; border:1px solid color-mix(in srgb, var(--color-white) 35%, transparent); border-radius:50%; background:transparent; color:var(--color-white); font-size:1.4rem; line-height:1; cursor:pointer; transition:border-color var(--dur-hover), color var(--dur-hover); }
.showcase__arrow:hover { border-color:var(--color-gold-500); color:var(--color-gold-500); }
.showcase__dot { display:grid; place-items:center; width:30px; height:var(--tap-min); padding:0; border:0; background:transparent; cursor:pointer; }
.showcase__dot::before { content:""; width:8px; height:8px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--color-white) 40%, transparent); transition:width .3s ease, background .3s ease; }
.showcase__dot[aria-current]::before { width:24px; background:var(--color-gold-500); }
.showcase__track:focus-visible, .showcase__arrow:focus-visible, .showcase__dot:focus-visible { outline:2px solid var(--color-gold-300); outline-offset:3px; }

@media (max-width:900px) { .story__panel .story__grid { grid-template-columns:1fr; gap:32px; } }
@media (max-width:560px) { .showcase__slide { min-height:330px; } .showcase__body { padding:18px; } }
@media (prefers-reduced-motion: reduce) {
  .showcase__track { scroll-behavior:auto; }
  .showcase__image, .showcase__slide.is-active .showcase__image { transition:none; transform:none; }
  .showcase[data-promo-ready] .showcase__body > * { transition:none; }
  .showcase__dot::before { transition:none; }
}

/* Instagram slide in the slideshow (15.09.): only the yellow QR tile, text below like the dish slides.
   Navy on yellow scans well; the yellow edge is the quiet zone (~4 modules). */
.showcase__slide--qr { justify-content:flex-start; background:color-mix(in srgb, var(--color-white) 6%, var(--color-aegean-950)); }
.showcase__qr { display:grid; justify-items:center; gap:8px; margin:18px auto 0; padding:16px 16px 10px; border-radius:16px; background:var(--color-gold-500); color:var(--color-aegean-950); text-decoration:none; }
.showcase__qr:hover { color:var(--color-aegean-950); text-decoration:none; }
.showcase__qr-code { display:block; width:clamp(130px, 13vw, 160px); aspect-ratio:1; background:currentColor; -webkit-mask:url("../img/instagram-qr-mask.20d9627f2444.svg") center / contain no-repeat; mask:url("../img/instagram-qr-mask.20d9627f2444.svg") center / contain no-repeat; }
.showcase__qr-handle { font:700 11px/1 var(--rsv-sans); letter-spacing:.1em; text-transform:uppercase; }
.showcase__slide--qr .showcase__body { flex:1; justify-content:center; padding:14px 18px 18px; }
.showcase__slide--qr .showcase__title { font-size:clamp(24px, 2.4vw, 32px); }

/* ===========================================================================
   Korrekturen 14.09. — nur Tokens, keine neuen Farben.
   =========================================================================== */

/* Mobilleiste „Anrufen": components.extra.css macht ihn zum Rahmenknopf mit
   blauer Schrift, setzt den blauen Grund aus components.css aber nicht zurück —
   blau auf blau, gemessen 1,25:1. */
.mobilebar__btn--call { background: var(--color-surface); }

/* Reservierungsformular ragte auf 375px 26px über den Rand. `1fr` heißt
   minmax(auto, 1fr): die Karte wurde so breit wie ihr breitestes Datumsfeld. */
@media (max-width: 1023px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); }
}
.booking { min-width: 0; }
.booking__grid .field__input { width: 100%; min-width: 0; }


/* ===========================================================================
   .choice — Route- und E-Mail-Auswahl (14.09.). <details> öffnet ohne JavaScript; site.js schickt
   Apple-Geräte und Android direkt in die eigene Karten-App.
   =========================================================================== */
.choice { position: relative; display: inline-block; }
.choice > summary { list-style: none; cursor: pointer; }
.choice > summary::-webkit-details-marker { display: none; }
.choice__toggle--link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  color: var(--color-link); text-decoration: underline; text-underline-offset: 3px;
}
.choice__menu {
  position: absolute; z-index: 60; left: 0; top: calc(100% + .5rem);
  width: max-content; min-width: 15rem; max-width: min(22rem, calc(100vw - 2rem));
  padding: .5rem; background: var(--color-surface); color: var(--color-text); text-align: left;
  border: 1px solid var(--color-aegean-100); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.choice--up .choice__menu { top: auto; bottom: calc(100% + .5rem); }
.choice__title {
  margin: .25rem .5rem .35rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted);
}
.choice__list { list-style: none; margin: 0; padding: 0; }
.choice__item {
  display: flex; align-items: center; min-height: var(--tap-min); padding: 0 .75rem;
  border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--fs-sm); text-decoration: none;
}
.choice__item:hover, .choice__item:focus-visible { background: var(--color-aegean-50); color: var(--color-aegean-800); text-decoration: none; }
.choice__note { margin: .4rem .5rem .25rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--color-text-muted); white-space: normal; }
.choice__copy {
  margin: .35rem .5rem .4rem; min-height: var(--tap-min); padding: 0 .9rem; cursor: pointer;
  border: 1px solid var(--color-aegean-300); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-aegean-700); font: inherit; font-size: var(--fs-sm);
}
.choice__copy:hover { background: var(--color-aegean-50); }

/* on the dark footer the address stays white; the open menu is a light card */
.site-footer .choice__toggle--link { color: var(--color-white); }
.site-footer .choice__item { color: var(--color-text); }
.site-footer .choice__item:hover { color: var(--color-aegean-800); }

/* in the mobile bar the <details> is the grid cell, the summary is the button */
.mobilebar .choice { display: block; }
.mobilebar .choice > summary { height: 100%; }
.mobilebar .choice__menu { left: 0; }

/* ===========================================================================
   Aktionen — schmale Slideshow unter dem Hero (14.09.). Ohne JavaScript ist es eine wischbare Reihe.
   =========================================================================== */
.promo { position: relative; background: var(--color-aegean-950); color: var(--color-white); }
.promo__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.promo__track::-webkit-scrollbar { display: none; }
.promo__track:focus-visible { outline: 3px solid var(--color-gold-300); outline-offset: -3px; }
.promo__slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden;
  display: grid; align-items: center; min-height: clamp(7.5rem, 14vw, 10.5rem);
}
.promo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__slide--image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-aegean-950) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-aegean-950) 62%, transparent) 55%,
    color-mix(in srgb, var(--color-aegean-950) 20%, transparent) 100%);
}
.promo__body {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem;
  width: min(100% - 2.5rem, 72rem); margin-inline: auto; padding-block: 1.1rem 2.6rem;
}
.promo__title {
  margin: 0; font-family: var(--font-heading); font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-gold-300);
}
.promo__text { margin: 0; flex: 1 1 18rem; font-size: var(--fs-base); line-height: 1.5; color: var(--color-white); }
.promo__cta { flex: 0 0 auto; }
.promo__controls { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; }
.promo__arrow, .promo__dot {
  display: grid; place-items: center; width: var(--tap-min); height: 2.4rem; padding: 0;
  border: 0; background: transparent; color: var(--color-white); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.promo__dot { width: 1.6rem; }
.promo__dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: color-mix(in srgb, var(--color-white) 55%, transparent); transition: transform .2s; }
.promo__dot[aria-current]::before { background: var(--color-gold-300); transform: scale(1.4); }
.promo__arrow:hover, .promo__arrow:focus-visible { color: var(--color-gold-300); }
@media (max-width:560px) {
  .promo__body { width: calc(100% - 2.5rem); padding-block: 1rem 2.8rem; }
  .promo__text { flex-basis: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .promo__body .promo__cta { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .promo__track { scroll-behavior: auto; }
  .promo__dot::before { transition: none; }
}

/* ===========================================================================
   Reservation form controls (15.09.): date, time and party-size popovers.
   Driven by static/js/site.js.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DateField — calendar popover replacing the native date input (2026-09-14)
   --------------------------------------------------------------------------- */
.datefield{position:relative;display:block}
/* site.js keeps the panel in the DOM and toggles .datefield--open, so the
   closed panel needs an explicit hide rule. */
.datefield:not(.datefield--open) .datefield__panel{display:none}
.datefield__trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:11px 14px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--color-text);text-align:left;cursor:pointer;transition:border-color var(--dur,.18s) ease, box-shadow var(--dur,.18s) ease}
.datefield__trigger:hover{border-color:var(--color-gold-500)}
.datefield--open .datefield__trigger{border-color:var(--color-aegean-600);box-shadow:0 0 0 3px var(--color-aegean-50)}
.datefield__trigger{height:46px;white-space:nowrap}
.datefield__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datefield__value--empty{color:var(--color-text-muted)}
/* Pfeil wie beim Sprachwähler (.lang__caret); Farbe bleibt Gold-900, damit er auf Weiß lesbar ist */
.datefield__caret{width:10px;height:6px;flex:none;color:var(--color-gold-900);transition:transform var(--dur,.18s) ease}
.datefield--open .datefield__caret{transform:rotate(180deg)}
/* Reservierung: jede schwarze Schrift im selben Navy wie überall. Schwarz kommt aus zwei Tokens
   (--rsv-ink der Vorlage, --color-text der Seite) — im Block auf Navy umgelegt; Grau (Hinweise, Platzhalter) bleibt. */
#reservieren, #kontakt { --rsv-ink:var(--color-aegean-950); --color-text:var(--color-aegean-950); }
:is(#reservieren, #kontakt) :is(.f__label, .ck, .ck a, textarea, input:not([type="checkbox"]), select) { color:var(--color-aegean-950); }
:is(#reservieren, #kontakt) input[type="checkbox"] { accent-color:var(--color-aegean-950); }
/* Kontaktformular (core/contact.html): gleicher Aufbau wie die Reservierung. */
/* Anliegen: alle acht Einträge ohne Scrollen, so breit wie das Feld */
#kontakt [data-topicfield] .selectfield__panel { right:0; max-height:none; overflow:visible; }
#kontakt .rsv__form select { box-sizing:border-box; width:100%; height:46px; padding:0 12px; border:1px solid var(--rsv-line); border-radius:4px; background:var(--color-surface); font:400 16px/1.4 var(--font-body); }
#kontakt .rsv__form textarea { box-sizing:border-box; width:100%; }
/* Anmerkungen: full field width and ~170px tall by default (still resizable, taller only). */
#reservieren textarea { box-sizing:border-box; width:100%; height:172px; min-height:172px; resize:vertical; }
#kontakt .rsv__form textarea[aria-invalid="true"] { border-color:var(--color-error); }
#kontakt .contact__sent { align-content:start; gap:16px; }
#kontakt .contact__sent .notice__lead { color:var(--color-aegean-950); }
#kontakt .contact__sent .rsv__btn { display:inline-flex; width:auto; padding-inline:32px; text-decoration:none; }
/* Prüfung vor dem Absenden: falsches oder fehlendes Feld bekommt einen roten Rahmen, die E-Mail zusätzlich ein rotes X */
/* .rsv__form davor: reservation-skin.css lädt später und setzt .f__box sonst wieder grau */
.rsv__form .f__box--err,.rsv__form .f__box--err:focus-within{border-color:var(--color-error)}
.rsv__form .f__ico--err{color:var(--color-error)}
/* Haken und X nur zeigen, wenn sie gelten — ein SVG mit display aus .f__ico ignoriert sonst [hidden] */
.rsv__form .f__box .f__ico[hidden]{display:none}
.datefield--err .datefield__trigger,.datefield--err .datefield__trigger:hover,.datefield--err.datefield--open .datefield__trigger{border-color:var(--color-error)}
/* Telefon: Ländervorwahl im Feld vor der Nummer (Flagge, +49, Pfeil), Liste mit Suchfeld im Stil der Auswahllisten */
.rsv__form .phonecc{display:flex;flex:none;align-self:stretch;align-items:center}
.rsv__form .phonecc__trigger,.rsv__form .phonecc__trigger:hover,.rsv__form .datefield--open .phonecc__trigger{width:auto;height:100%;gap:6px;padding:0 10px 0 0;border:0;border-right:1px solid var(--color-border);border-radius:0;background:none;box-shadow:none;font:400 14px/1 var(--rsv-sans);color:var(--color-text)}
.rsv__form .phonecc__trigger:hover .phonecc__code,.rsv__form .datefield--open .phonecc__trigger .phonecc__code{color:var(--color-aegean-950);text-decoration:underline;text-underline-offset:3px}
.rsv__form .phonecc__trigger:focus-visible{outline:2px solid var(--color-gold-500);outline-offset:2px}
.phonecc__flag{font-size:18px;line-height:1}
.rsv__form .phonecc__panel{left:-43px;display:grid;gap:8px;width:340px;min-width:0;max-width:calc(100vw - 64px);padding:10px}
.phonecc__search{position:relative;display:block}
.phonecc__search svg{position:absolute;top:50%;left:12px;width:16px;height:16px;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.rsv__form .phonecc__search input{box-sizing:border-box;width:100%;height:40px;padding:0 12px 0 36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);font:400 14px/1.4 var(--rsv-sans);color:var(--color-text)}
.rsv__form .phonecc__search input:focus{outline:0;border-color:var(--color-gold-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-gold-500) 35%, transparent)}
.phonecc__list{display:grid;gap:2px;max-height:264px;overflow:auto;overscroll-behavior:contain}
.phonecc__list .phonecc__option{display:flex;align-items:center;gap:10px}
.phonecc__list .phonecc__option[hidden],.phonecc__empty[hidden]{display:none}
.phonecc__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phonecc__option .phonecc__code{color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.selectfield__option--selected .phonecc__code{color:inherit}
.phonecc__empty{padding:10px 12px;font-size:14px;color:var(--color-text-muted)}
.datefield__panel{position:absolute;z-index:40;top:calc(100% + 8px);left:0;min-width:298px;display:block;padding:14px 14px 12px;background:#fff;border:1px solid var(--color-gold-500);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.datefield__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--color-cream-200)}
.datefield__month{font-family:var(--font-heading);font-size:18px;color:var(--color-aegean-800)}
.datefield__month i{font-style:normal;color:var(--color-gold-900)}
.datefield__nav{width:30px;height:30px;display:grid;place-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-pill);font-size:19px;line-height:1;color:var(--color-aegean-700);cursor:pointer}
.datefield__nav:hover{border-color:var(--color-cream-200);background:var(--color-cream)}
.datefield__week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:10px 0 4px;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold-900);text-align:center}
.datefield__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.datefield__day{height:34px;display:grid;place-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:14px;color:var(--color-text);cursor:pointer;transition:background var(--dur,.18s) ease, color var(--dur,.18s) ease}
.datefield__day:hover{background:var(--color-cream)}
.datefield__day--empty{cursor:default}
.datefield__day--today{border-color:var(--color-gold-500)}
.datefield__day--selected,.datefield__day--selected:hover{background:var(--color-aegean-950);border-color:var(--color-aegean-950);color:#fff}
.datefield__day--off{color:var(--color-text-muted);opacity:.45;cursor:not-allowed}
.datefield__day--off:hover{background:none}
.datefield__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--color-cream-200)}
.datefield__foot-text{font-family:var(--font-body);font-size:13px;color:var(--color-text-muted)}
.datefield__today{background:none;border:0;padding:0;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--color-aegean-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.datefield__today:hover{color:var(--color-gold-900)}

/* SlotPicker root is a <span> so it can sit inside Field's <p> (2026-09-14) */
.slots{display:flex}

/* TimeField — same shell as .datefield, grid of slots (2026-09-14) */
.timefield__panel{min-width:262px}
.timefield__hours{font-family:var(--font-body);font-size:12px;color:var(--color-text-muted)}
.timefield__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 0 2px}
.timefield__slot{height:36px;padding:0 6px;border:1px solid var(--color-cream-200);border-radius:var(--radius-sm);background:#fff;font-family:var(--font-body);font-size:13px;color:var(--color-text);cursor:pointer;white-space:nowrap}
.timefield__slot:hover{border-color:var(--color-gold-500);background:var(--color-cream)}
.timefield__slot--selected,.timefield__slot--selected:hover{background:var(--color-aegean-950);border-color:var(--color-aegean-950);color:#fff;font-weight:600}

/* SelectField — option list in the .datefield shell (2026-09-14) */
.selectfield__panel{display:grid;gap:2px;min-width:100%;max-height:280px;overflow:auto;padding:8px}
.selectfield__option{display:block;width:100%;padding:9px 12px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;font-family:var(--font-body);font-size:14px;color:var(--color-text);text-align:left;cursor:pointer}
.selectfield__option:hover{background:var(--color-cream);border-color:var(--color-cream-200)}
.selectfield__option--selected,.selectfield__option--selected:hover{background:var(--color-aegean-950);border-color:var(--color-aegean-950);color:#fff;font-weight:600}

/* ===========================================================================
   Popover-Feinschliff (15.09.). Größer, runder, mehr Luft; matcht das Referenzbild fürs
   Kalender-Popover 1:1, Uhrzeit- und Personen-Popover übernehmen dieselbe
   .datefield__panel-Basis, damit alle drei einheitlich wirken.
   =========================================================================== */
.datefield__panel{min-width:340px;padding:24px 26px 20px;border:1.5px solid var(--color-gold-500);border-radius:20px;box-shadow:0 24px 60px -20px rgba(14,63,115,.28)}
.datefield__head{padding-bottom:0;border-bottom:0}
.datefield__month{font-size:23px}
.datefield__month i{font-weight:500}
.datefield__nav{width:34px;height:34px;font-size:22px;color:var(--color-aegean-800)}
.datefield__week{padding:16px 0 12px;margin-bottom:8px;font-size:11px;letter-spacing:.22em;border-bottom:1px solid var(--color-cream-200)}
.datefield__grid{gap:10px 2px}
.datefield__day{height:42px;font-size:16px;border-width:1.5px}
.datefield__day--today{border-width:1.5px}
.datefield__foot{margin-top:16px;padding-top:16px}
.datefield__foot-text{font-size:14px}
.datefield__today{font-size:14px;font-weight:700}

.timefield__panel{min-width:340px}
.timefield__hours{font-size:13px}
.timefield__grid{grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 0 4px}
.timefield__slot{height:42px;font-size:14px;border-radius:12px}

.selectfield__panel{gap:4px;padding:6px 2px;max-height:320px}
.selectfield__option{padding:11px 14px;font-size:15px;border-radius:12px}

/* ===========================================================================
   Öffnungszeiten/Gruppen/Route in die rechte Spalte gemergt
   (15.09.). Keine eigene Adresskarte
   mehr: der Route-Knopf öffnet direkt die Standard-Kartenapp des Geräts
   (site.js, data-directions), mit Kartenauswahl als Menü für Desktops ohne
   Standard-Kartenapp.
   =========================================================================== */
.rsv__side{display:flex;flex-direction:column;gap:14px}
.rsv-card__title{margin:0;font-family:"Candy Alphabet",var(--font-script,"Kaushan Script"),cursive;font-weight:400;font-size:22px;color:var(--color-aegean-950)}
/* .choice is inline-block by default (it sits next to prose elsewhere); here
   it's the only thing in its row and should match the other full-width
   buttons in this column. */
.rsv__side > .choice{display:block}
.rsv__side .choice__menu{left:0;right:0;width:auto}

/* Small Öffnungszeiten box back under Route planen (15.09.) — just today's
   line, so the sidebar stays at or under the height of the form column. */
.sum--tight{padding:18px 20px}
.sum--tight .f__note{margin:0}
.rsv-card__title--sm{font-size:18px}

/* .f__ico defaults to a muted grey (var(--rsv-ink-3)) for icons inside input
   boxes; inside a filled .rsv__btn it is white — and stays white on hover. */
.rsv__btn .f__ico{color:var(--color-white)}
/* Hover for every navy button: the button stays navy, only the lettering turns
   yellow (icons keep white). Also beats the global a:hover underline. */
.rsv__btn:hover{background:var(--color-aegean-950); color:var(--color-gold-500); text-decoration:none}
.rsv__btn{transition:color var(--dur-hover)}

/* ===========================================================================
   Kartendesign für alle .sum-Boxen (15.09.). Flache Füllung, dieselbe Farbe wie die Kopfleiste
   (var(--color-cream)), kein Verlauf. Icon-Kreise in Gold statt Marineblau.
   Gilt für jede Box in der rechten Spalte: Zusammenfassung, Gruppen & Feiern,
   Öffnungszeiten.
   =========================================================================== */
.sum{
  background:var(--color-cream); border:1px solid var(--rsv-line-light); border-radius:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.sum__ico{background:none; border:0; box-shadow:none; color:var(--rsv-gold)}
.sum__t{font-family:"Candy Alphabet",var(--font-script,"Kaushan Script"),cursive; font-weight:400; font-size:22px; color:var(--color-aegean-950)}
.sum__note .f__ico{color:var(--rsv-gold)}

/* Sidebar stretches to the form column's height (reservation-skin.css sets
   align-items:start on .rsv__cols, which left the sidebar short); the last
   box — Öffnungszeiten — grows to take up the leftover space, so its lower
   edge lands on the same line as the submit button's. */
.rsv__cols{align-items:stretch}
.rsv__side{height:100%}
.sum--tight{flex:1}

/* Reservierung anfragen stays disabled until AGB + Datenschutz are both
   ticked (site.js). Server-side
   validation already requires both — this is a client-side head start, not
   the actual gate, so the button still works with JavaScript off. */
.rsv__btn:disabled{opacity:.45; cursor:not-allowed}
.rsv__btn:disabled:hover{background:var(--color-aegean-950); color:var(--color-white)}

/* Öffnungszeiten, full week: two days per row, Sunday alone on its own row
   (it's the 7th/last item in an otherwise 2-column grid, so it naturally
   falls on a new row — centred there with justify-self). */
.hours-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px}
.hours-grid__cell{display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--rsv-ink-2)}
.hours-grid__cell--today{color:var(--rsv-ink); font-weight:700}
.hours-grid__cell--wide{grid-column:1 / -1; justify-self:center}
.hours-grid__day{font-weight:700; text-transform:uppercase; letter-spacing:.04em; min-width:1.6em}
.hours-grid__cell--today .hours-grid__day{color:var(--rsv-gold)}
.findus__hours{gap:14px 12px}                                   /* home „So finden Sie uns“: the booking grid, scaled to the wider card */
.findus__hours .hours-grid__cell{font-size:14px; gap:6px}
.findus__hours .hours-grid__time{white-space:nowrap}                     /* „12:00–22:00“ stays one line in the four-card row */
@media (max-width:1360px) { .findus__hours .hours-grid__cell{font-size:13px} }

/* ---------- Start: „So finden Sie uns“ (#anfahrt) ----------
   Gleiche Haut wie der Reservierungsblock darüber: .rsv-Fläche, .sum-Boxen,
   .rsv-card__title, .rsv__btn, .f__note. Hier steht nur das Kartenraster und
   was die Reservierung nicht hat. */
.findus__cards { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.findus__card { display:flex; flex-direction:column; padding:20px; }
.findus__card-head { display:flex; align-items:center; gap:10px; }
.findus__card-head .sum__ico { width:28px; height:28px; }
.findus__card-head .sum__ico svg { width:24px; height:24px; }
.findus__card .sum__ul { margin:12px 0 16px; }
.findus__text { margin:0; font-size:14px; line-height:1.9; color:var(--rsv-ink); }
.findus__link,
.findus .choice__toggle--link { display:inline-flex; align-items:center; min-height:var(--tap-min); font-size:14px; color:var(--rsv-ink); text-decoration:underline; text-underline-offset:2px; }
.findus__link:hover,
.findus .choice__toggle--link:hover { color:var(--rsv-gold); }
/* Instagram-Link unter der E-Mail (partials/_instagram_link.html): Icon vor dem @-Namen. */
.findus__social { margin:0; }
.findus__social .findus__link, .findus .findus__link--ico { gap:8px; }   /* gold icon before phone, e-mail and Instagram */
.findus__social-ico { flex:none; width:18px; height:18px; color:var(--rsv-gold); }
.findus .hours { gap:6px; font-size:14px; color:var(--rsv-ink); }
.findus .hours__time { color:var(--rsv-ink-2); font-variant-numeric:tabular-nums; }
.findus .hours li[aria-current="date"] { color:var(--rsv-ink); font-weight:700; }
.findus .hours li[aria-current="date"] > span:first-child { color:var(--rsv-gold); }
.findus .hours li[aria-current="date"] .hours__time { color:inherit; }
/* Full-width, pinned to the box bottom — same as the buttons in the booking side column. */
/* Lieferdienste im Service-Kasten: drei quadratische Knöpfe in den Farben von
   .rsv__btn (Marineblau, helles Zeichen). Die Logos sind einfarbige Formen und
   liegen als Maske auf currentColor, damit sie die Knopffarbe annehmen; beim
   Hover wird das Zeichen gelb. */
/* Pinned to the box bottom like .findus__action, so the squares line up with „Route planen“ / „Zum Formular“. */
/* One row always: the Service box is only ~192px wide on desktop, so the squares
   shrink below 48px there instead of pushing Google onto a second line. */
.delivery { --delivery-size:48px; list-style:none; display:flex; flex-wrap:nowrap; justify-content:center; gap:8px; margin:auto 0 0; padding:20px 0 0; }
.delivery > li { flex:0 1 var(--delivery-size); min-width:0; }
/* .rsv__btn size and blue: 48px (its min-height), 6px radius. On hover only the
   logo turns yellow; the square stays navy. The colour must be set here, or the
   global a:hover makes the logo navy on navy. */
.delivery__btn { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; background:var(--color-aegean-950); border-radius:var(--radius-sm); color:var(--color-white); text-decoration:none; transition:color var(--dur-hover); }
.delivery__btn:hover { color:var(--color-gold-500); text-decoration:none; }
.delivery--start { justify-content:flex-start; margin:16px 0; padding:0; }                 /* Gruppen & Feiern: phone + form squares */
.delivery__ico { width:24px; height:24px; }
.delivery__btn:focus-visible { outline:2px solid var(--rsv-gold); outline-offset:2px; }
.delivery__mark { display:block; width:28px; height:28px; max-width:75%; max-height:75%; background:currentColor; -webkit-mask:var(--delivery-mark) center / contain no-repeat; mask:var(--delivery-mark) center / contain no-repeat; }
.delivery__mark--lieferando { --delivery-mark:url("../img/delivery/lieferando-mark.2a3235ccf461.png"); }
.delivery__mark--wolt { --delivery-mark:url("../img/delivery/wolt-mark.5054206c28e3.png"); width:36px; height:36px; }
.delivery__mark--ubereats { --delivery-mark:url("../img/delivery/ubereats-mark.94142c6e94aa.svg"); }
.delivery__mark--google { --delivery-mark:url("../img/google-g.196c3cae70c7.svg"); width:26px; height:26px; }   /* the mask uses only the G's shape: white like the others */
.findus__action { display:block; margin-top:auto; padding-top:20px; }
.findus__action .choice__menu { left:0; right:0; width:auto; }

.findus__map { margin-top:14px; min-height:420px; }
/* Once site.js swaps in the iframe, the map fills the box edge to edge; the box's own radius clips it. */
.findus__map:has(.mapconsent__frame) { padding:0; overflow:hidden; place-items:stretch; }
.findus__map .mapconsent__frame { display:block; border-radius:0; }
.findus__map-pin { display:block; width:40px; height:40px; margin-inline:auto; color:var(--rsv-gold); }
.findus__map-address { margin:16px 0 0; font-size:18px; font-weight:600; color:var(--rsv-ink); }
.findus__map-load { width:auto; margin:20px auto 0; }

/* Reservierung + So finden Sie uns (15.09.): Titel und Unterzeile stehen auf dem
   Seitengrund, die weiße Fläche beginnt erst über den Boxen. .rsv__panel reicht
   über das Seitenpolster von .rsv hinaus, damit die Boxen bündig mit dem Titel bleiben. */
/* div.rsv, not .rsv: reservation-skin.css loads after this file (extra_head) and would win a tie. */
div.rsv { background:none; padding-bottom:0; }
.rsv__panel { margin-inline:-56px; padding:40px 56px 20px; background:var(--rsv-bg); border-radius:20px; }
/* Start page only: all white boxes (Willkommen, Beliebte Gerichte, Reservierung,
   So finden Sie uns) wider than the skin's 1120px, so the four „So finden Sie uns“
   cards have room; one width keeps every box aligned. The 48px keeps a gutter to the window edge. */
.story > .rsv, .popular > .rsv, #reservieren > .rsv, .findus > .rsv { max-width:min(1360px, 100% - 48px); }
/* The panel ends at its lower gold line; no white strip underneath. */
.rsv__panel > .rsv__deco:last-child { padding-bottom:0; }
/* Start page: Reservierung and So finden Sie uns sit directly on top of each other. */
.section--flush-bottom { padding-bottom:0; }
.section--flush-top { padding-top:0; }
.section--flush-top div.rsv { padding-top:4px; }
@media (max-width:860px) { div.rsv { padding-bottom:0; } .rsv__panel { margin-inline:-24px; padding:24px 24px 16px; } }

@media (max-width:1280px) { .findus__cards { grid-template-columns:repeat(2, minmax(0,1fr)); } }   /* below this four cards are too narrow for the hours */
@media (max-width:620px)  { .findus__cards { grid-template-columns:1fr; } }

/* Hero buttons: side by side, stacked only where both labels can't fit (phones under 480px). */
@media (max-width:480px) { .hero__actions { flex-direction:column; } .hero__actions .rsv__btn { flex:none; width:100%; } }

/* Hero meta line (15.09.): top right on the photo, below „Kontakt“, outside the card.
   Hours → booking form, address → map app (choice menu where there is none). */
.hero__meta-link { color:inherit; text-decoration:none; text-underline-offset:5px; cursor:pointer; }
.hero__meta-link:hover { color:var(--color-gold-300); text-decoration:underline; }
.hero__meta-route { display:inline-block; }
.hero__meta-route > summary { display:inline; }
.hero__meta-route .choice__menu { left:auto; right:0; text-transform:none; letter-spacing:normal; }
@media (min-width:1024px) {
  .hero .hero__meta { top:24px; right:104px; left:auto; bottom:auto; z-index:3; justify-content:flex-end; }
}
@media (min-width:1024px) and (max-width:1439px) {
  .hero .hero__meta { right:48px; }
}
@media (max-width:1023px) {
  .hero__meta-route .choice__menu { left:50%; right:auto; transform:translateX(-50%); }
}
/* The corner line needs its own row on desktop: the card starts 48px lower than before. */
@media (min-width:1440px) {
  .hero { padding-top:calc(clamp(24px, calc((100vh - 900px) * .35 + 40px), 104px) + 48px); }
}
@media (min-width:1024px) and (max-width:1439px) {
  .hero { padding-top:calc(clamp(24px, calc((100vh - 900px) * .35 + 40px), 64px) + 48px); }
}

/* Contact page sidebar (15.09.): Reservieren and Route planen at the bottom of the Öffnungszeiten box. */
.rsv__side .sum--tight:has(.contact-hours__actions) { display:flex; flex-direction:column; }   /* so the buttons can sit at the bottom */
.contact-hours__actions { display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:20px; }
.contact-hours__actions .rsv__btn { text-decoration:none; }
.contact-hours__actions .choice { display:block; }
.contact-hours__actions .choice__menu { left:0; right:0; width:auto; }
.rsv__side .findus__social .findus__link { display:inline-flex; align-items:center; gap:8px; }
.contact-direct__action { margin:20px 0 0; }
.contact-direct__action .rsv__btn { text-decoration:none; }

/* Contact and booking forms (15.09.): every letter and field symbol in the same navy.
   The id in the selector outranks the grey placeholder / gold caret / grey icon rules. */
:is(#reservieren, #kontakt) :is(.datefield__value, .datefield__value--empty, .datefield__caret) { color:var(--color-aegean-950); }
:is(#reservieren, #kontakt) form :not(.rsv__btn) > .f__ico { color:var(--color-aegean-950); }
:is(#reservieren, #kontakt) input[type="checkbox"] { accent-color:var(--color-aegean-950); color:var(--color-aegean-950); }