/* Il Sorriso – Design-System „Verde e Rame“ (CALE Design, Oktober 2026)
   Die Farben kommen aus dem Logo des Restaurants: Flaschengrün für den Namen, Kupfer für „Pizzeria & Ristorante“,
   Sand für „Berkheim“. Leinen ist die Lesefläche, ein fast schwarzes Grün der Abend.
   Schrift wie im Logo: eine feine Serife für Namen und Überschriften, eine leichte, weit gesperrte Grotesk in Versalien
   für Menü, Knöpfe und kleine Bezeichnungen.
   Alle Farben, Schriften und Abstände stehen hier als Tokens; die Seiten-CSS nutzen nur diese Namen. */

@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/eb-garamond-italic-var.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  /* ---------- Farbe: Skalen ---------- */
  --green-950: #0d1912;
  --green-900: #162a20;
  --green-800: #203d2f;   /* Primär: das Flaschengrün des Logos */
  --green-700: #2d4f3e;
  --green-600: #436651;
  --green-500: #5e806a;
  --green-300: #a9c0b0;
  --green-200: #cddbd1;
  --ivory-50: #fbf8f2;    /* Leinen */
  --ivory-100: #f4efe6;
  --ivory-200: #ebe3d5;
  --ivory-300: #d9cdb9;
  --charcoal-900: #111915; /* Abend: fast schwarzes Grün */
  --charcoal-800: #29241f; /* Lesetext: warmes Espresso */
  --charcoal-700: #3a342e;
  --charcoal-600: #5b544c;
  --charcoal-500: #7b7268;
  --copper-800: #6b3c1d;
  --copper-700: #85502a;   /* Kupfer, dunkel genug für Text und Linien auf Leinen */
  --copper-600: #9d6237;
  --copper-500: #b8784a;
  --brass-700: #85502a;
  --brass-400: #c9b491;    /* das Sand des Logos: Akzent auf dunklen Flächen */
  --brass-300: #ddcdb0;

  /* ---------- Farbe: Rollen ---------- */
  --text: var(--charcoal-800);
  --text-soft: var(--charcoal-600);
  --heading: var(--green-800);
  --accent: var(--copper-700);
  --line: rgba(28, 31, 29, 0.14);
  --focus: var(--copper-600);

  /* ---------- Schrift ---------- */
  --serif: "EB Garamond", "Garamond", "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --fs-display: clamp(2.75rem, 1.75rem + 4.2vw, 5.5rem);
  --fs-h2: clamp(2.125rem, 1.5rem + 2.6vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --fs-body: clamp(1.125rem, 1.07rem + 0.22vw, 1.25rem);
  --fs-ui: 0.9375rem;
  --fs-small: 0.875rem;

  /* ---------- Abstände ---------- */
  --margin: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --container: 84rem;
  --gutter: clamp(1rem, 0.7rem + 1.3vw, 1.5rem);
  --section-y: clamp(3.5rem, 2.1rem + 4vw, 5.5rem);
  --head-gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --block-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --pad-card: clamp(1.5rem, 1rem + 2vw, 3rem);
  --header-h: 4.5rem;

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-fast: 160ms;
  --t-ui: 240ms;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 0.5rem); }
body { margin: 0; background: var(--ivory-100); color: var(--text); font-family: var(--serif); font-size: var(--fs-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* gedrehte, freigestellte Teller dürfen über den Rand ragen, ohne dass die Seite seitlich scrollt (clip lässt sticky intakt) */
main { overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--brass-300); color: var(--charcoal-900); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, h4 { font-weight: 400; color: var(--heading); line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; }
p { max-width: 64ch; text-wrap: pretty; }
p + p { margin-top: 0.8em; }
.nums { font-variant-numeric: lining-nums tabular-nums; }
.it { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 60; background: var(--ivory-100); color: var(--green-900); padding: 0.7rem 1rem; font-family: var(--sans); font-size: var(--fs-ui); }
.skip:focus { top: 0.75rem; }

/* dunkle Flächen: Text, Überschriften und Fokus drehen mit */
.s-green, .s-deep, .s-night, .site-header, .site-footer, .menu-dialog, .lightbox, .sticky-cta {
  --text: var(--ivory-100); --text-soft: var(--green-300); --heading: var(--ivory-100); --line: rgba(246, 243, 234, 0.16); --focus: var(--brass-400);
  color: var(--text);
}
.s-night { --text-soft: var(--ivory-300); }
.s-ivory { background: var(--ivory-100); }
.s-ivory-2 { background: var(--ivory-200); }
.s-green { background: var(--green-800); }
.s-deep { background: var(--green-900); }
.s-night { background: var(--charcoal-900); }

/* ---------- Typo-Rollen ---------- */
.t-h2 { font-size: var(--fs-h2); line-height: 1.08; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.25; }
.t-lead { font-size: var(--fs-h3); line-height: 1.35; }
.t-ui { font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.4; letter-spacing: 0.01em; }
.t-small { font-family: var(--sans); font-size: var(--fs-small); line-height: 1.45; color: var(--text-soft); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); }
.sec { padding-block: var(--section-y); }
/* Überschrift und Begleittext stehen auf derselben ersten Zeile */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1rem; align-items: first baseline; margin-bottom: var(--head-gap); }
.sec-head > :first-child { grid-column: 1 / span 7; }
.sec-head > :nth-child(2) { grid-column: 9 / span 4; }
@media (max-width: 59.99em) {
  .sec-head { grid-template-columns: 1fr; }
  .sec-head > :first-child, .sec-head > :nth-child(2) { grid-column: 1; }
}

/* ---------- Buttons und Links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3.1rem; padding: 0 1.9rem; font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); }
/* Hauptknopf auf hellen Flächen (Name aus der ersten Fassung): Flaschengrün */
.btn-wine { background: var(--green-800); color: var(--ivory-50); }
.btn-light { background: var(--ivory-100); color: var(--green-900); }
.btn-ghost { border-color: currentColor; color: var(--heading); }
.btn-line { border-color: rgba(246, 243, 234, 0.55); color: var(--ivory-100); }
.btn-wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--ivory-300); color: var(--charcoal-600); border-color: transparent; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn-wine:hover { background: var(--green-700); }
  .btn-light:hover { background: var(--ivory-200); }
  .btn-line:hover { background: var(--ivory-100); border-color: var(--ivory-100); color: var(--green-900); }
  .btn-ghost:hover { background: var(--heading); color: var(--green-900); }
  .s-ivory .btn-ghost:hover, .s-ivory-2 .btn-ghost:hover { color: var(--ivory-50); }
}
.link { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--t-fast) ease; }
.s-green .link, .s-deep .link, .s-night .link, .site-footer .link, .menu-dialog .link, .sticky-cta .link { text-decoration-color: var(--brass-400); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--accent); }
  .s-green .link:hover, .s-deep .link:hover, .s-night .link:hover, .site-footer .link:hover { color: var(--brass-300); }
}
.arrow::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .arrow:hover::after { transform: translateX(3px); } }
.tap { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--green-900); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header .bar { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); height: var(--header-h); max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; margin-right: auto; }
.brand img { width: clamp(8.5rem, 10vw, 10rem); height: auto; }
.nav-list { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; }
/* Menüpunkte wie die Zeile „Pizzeria & Ristorante“ im Logo: leichte Versalien, weit gesperrt */
.nav-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ivory-100); border-bottom: 1px solid transparent; transition: color var(--t-fast) ease, border-color var(--t-fast) ease; }
.nav-link[aria-current="page"] { border-bottom-color: var(--brass-400); }
.sub-toggle { display: inline-grid; place-items: center; width: 1.75rem; height: 44px; color: var(--ivory-100); }
.sub-toggle::before { content: ""; width: 0.38rem; height: 0.38rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: 45deg; translate: 0 -0.12rem; transition: rotate var(--t-fast) ease, translate var(--t-fast) ease; }
.nav-item.is-open .sub-toggle::before { rotate: 225deg; translate: 0 0.12rem; }
/* Unterkategorien: klappen beim Zeigen mit der Maus oder über den Pfeil-Knopf auf */
.sub { position: absolute; top: calc(100% + 0.9rem); left: -1.5rem; z-index: 2; display: none; min-width: 17rem; margin: 0; padding: 0.6rem 0; list-style: none; background: var(--green-900); border-top: 1px solid var(--brass-400); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.28); }
@keyframes sub-in { from { opacity: 0; translate: 0 -0.35rem; } }
.sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1rem; } /* Brücke für die Maus */
.nav-item.is-open > .sub { display: block; animation: sub-in var(--t-ui) var(--ease-out); }
.sub a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 1.5rem; font-size: 1.125rem; color: var(--ivory-100); text-decoration: none; transition: color var(--t-fast) ease, background-color var(--t-fast) ease; }
.sub a[aria-current="page"] { color: var(--brass-300); }
@media (hover: hover) and (pointer: fine) {
  .nav-item[data-sub]:hover > .sub { display: block; animation: sub-in var(--t-ui) var(--ease-out); }
  .nav-link:hover, .sub-toggle:hover { color: var(--brass-300); }
  .sub a:hover { color: var(--brass-300); background: rgba(246, 243, 234, 0.04); }
}
.header-phone { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--green-300); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .header-phone:hover { color: var(--ivory-100); } }
.header-cta { min-height: 2.75rem; padding: 0 1.25rem; }
.menu-toggle { display: none; min-height: 2.75rem; padding: 0 0.9rem; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-100); border: 1px solid rgba(246, 243, 234, 0.45); }
@media (max-width: 79.99em) { .header-phone { display: none; } }
@media (max-width: 29.99em) {
  .site-header .bar { gap: 0.6rem; }
  .header-cta, .menu-toggle { letter-spacing: 0.06em; padding: 0 0.75rem; }
  .brand img { width: 7.5rem; }
}
@media (max-width: 23.99em) {
  .site-header .bar { gap: 0.5rem; }
  .brand img { width: 6.5rem; }
  .header-cta, .menu-toggle { padding: 0 0.7rem; }
}
@media (max-width: 67.99em) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .header-cta { padding: 0 0.9rem; }
}

/* Menü auf dem Handy */
.menu-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--green-900); }
.menu-dialog[open] { display: flex; flex-direction: column; }
.menu-dialog::backdrop { background: var(--green-950); }
.menu-dialog .bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--margin); flex: none; }
.menu-dialog .brand img { width: 8.5rem; }
.menu-close { min-height: 2.75rem; padding: 0 0.9rem; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid rgba(246, 243, 234, 0.45); }
.menu-dialog nav { display: grid; padding: 1rem var(--margin); }
.menu-dialog nav .nav-link { display: flex; align-items: center; min-height: 3.5rem; font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.5rem); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--line); }
.menu-dialog nav a[aria-current="page"] { color: var(--brass-300); }
/* Unterkategorien im Handy-Menü: klein unter ihrem Hauptpunkt */
.menu-sub { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.menu-dialog nav .nav-link:has(+ .menu-sub) { border-bottom: 0; }
.menu-sub a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-300); text-decoration: none; }
.menu-foot { margin-top: auto; display: grid; gap: 0.9rem; padding: 1.5rem var(--margin) calc(1.5rem + env(safe-area-inset-bottom)); }
.menu-foot p { font-family: var(--sans); font-size: var(--fs-ui); color: var(--green-300); }

/* ---------- Öffnungsstatus ---------- */
.status { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--sans); font-size: var(--fs-ui); color: var(--text-soft); }
.status::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--brass-400); flex: none; }
.status[data-state="open"]::before { background: #6fae7d; }
.status[data-state="closed"]::before { background: var(--ivory-300); }

/* ---------- Mobiler Reservieren-Balken ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem var(--margin) calc(0.5rem + env(safe-area-inset-bottom)); background: var(--green-900); transform: translateY(110%); transition: transform var(--t-ui) var(--ease-out); }
.sticky-cta.is-visible { transform: none; }
.sticky-cta .status { font-size: 0.8125rem; max-width: 42vw; line-height: 1.3; }
.sticky-cta .btn { min-height: 2.75rem; padding: 0 1rem; letter-spacing: 0.06em; }
.sticky-actions { display: flex; align-items: center; gap: 0.5rem; }
.sticky-call { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(246, 243, 234, 0.45); flex: none; }
.sticky-call svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 52.99em) {
  .sticky-cta { display: flex; }
  html { scroll-padding-bottom: 5rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- WhatsApp: schwebt links auf jeder Seite, rutscht über den mobilen Balken ---------- */
/* Die Markenfarben von WhatsApp bleiben unverändert, damit das Zeichen sofort erkannt wird. */
.wa-float { position: fixed; left: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 34; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; color: #fff; transition: transform var(--t-ui) var(--ease-out), scale var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out), visibility var(--t-ui), background-color var(--t-ui); }
.wa-float svg { width: 2rem; height: 2rem; fill: currentColor; }
.wa-float:focus-visible { outline: 3px solid var(--copper-600); outline-offset: 3px; }
.wa-float:active { scale: 0.96; }
.wa-float.is-away { opacity: 0; visibility: hidden; transform: translateY(0.75rem); }
.sticky-cta.is-visible ~ .wa-float { transform: translateY(-4.25rem); }
.sticky-cta.is-visible ~ .wa-float.is-away { transform: translateY(-3.5rem); }
@media (hover: hover) { .wa-float:hover { background: #1ebe5a; scale: 1.06; } }
@media (max-width: 52.99em) {
  .wa-float { left: 0.75rem; bottom: calc(1rem + env(safe-area-inset-bottom)); width: 3.25rem; height: 3.25rem; }
  .wa-float svg { width: 1.875rem; height: 1.875rem; }
  /* In den Anfrage-Schritten läge er über den Knöpfen; die Nummer steht dort in Menü und Fußzeile. */
  [data-no-sticky] .wa-float, [data-sticky="none"] .wa-float { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ---------- Speisekarte als Register (Startseite und speisekarte.html) ---------- */
.mt { display: grid; grid-template-columns: minmax(13rem, 3fr) minmax(0, 9fr); gap: var(--block-gap); }
.mt-list { display: flex; flex-direction: column; }
.mt-tab { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: 0.4rem 0 0.4rem 1rem; text-align: left; font-family: var(--serif); font-size: var(--fs-h3); color: var(--text-soft); border-left: 2px solid transparent; border-bottom: 1px solid var(--line); transition: color var(--t-fast) ease, border-color var(--t-fast) ease; }
.mt-tab[aria-selected="true"] { color: var(--ivory-100); border-left-color: var(--brass-400); }
@media (hover: hover) and (pointer: fine) { .mt-tab:hover { color: var(--ivory-100); } }
.mt-panels { display: grid; }
.mt-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--block-gap); align-items: start; }
.mt.is-live .mt-panel[hidden] { display: none; }
.mt.is-live .mt-panel:not([hidden]) { animation: panel-in var(--t-ui) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mt-panel + .mt-panel { margin-top: var(--block-gap); }
.mt.is-live .mt-panel + .mt-panel { margin-top: 0; }
.mt-photo { order: 2; display: grid; place-items: center; }
/* Freigestellte Teller liegen direkt auf dem Anthrazit; beim Wechsel wird der neue Teller „hingestellt“ */
.mt-plate { width: 100%; max-width: 30rem; height: auto; filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.5)); }
@media (prefers-reduced-motion: no-preference) {
  .mt.is-live .mt-panel:not([hidden]) .mt-plate { animation: plate-set 750ms var(--ease-out) both; }
}
@keyframes plate-set { from { opacity: 0; transform: translateY(-1.5rem) scale(1.06) rotate(-10deg); } to { opacity: 1; transform: none; } }
/* gleiche Höhe und Linie wie der erste Reiter links, damit beide Spalten auf einer Zeile beginnen */
.mt-title { display: flex; align-items: center; min-height: 3.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-h3); font-style: italic; line-height: 1.2; color: var(--brass-400); }
.s-ivory .mt-title, .s-ivory-2 .mt-title { color: var(--brass-700); }
.mg + .mg { margin-top: 1.75rem; }
.mg-title { font-size: 1.5rem; font-style: italic; margin-bottom: 0.5rem; color: var(--brass-400); }
.s-ivory .mg-title, .s-ivory-2 .mg-title { color: var(--brass-700); }
.mg-note { font-family: var(--sans); font-size: var(--fs-small); color: var(--text-soft); margin-bottom: 0.5rem; }
.dishes { display: grid; }
.dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.d-name { font-size: var(--fs-body); line-height: 1.3; color: var(--heading); }
.d-all { margin-left: 0.25em; font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--text-soft); vertical-align: super; line-height: 0; }
.d-price { font-size: var(--fs-body); color: var(--heading); white-space: nowrap; }
.d-info { grid-column: 1 / -1; font-size: var(--fs-small); font-family: var(--sans); line-height: 1.45; color: var(--text-soft); margin-top: 0.15rem; }
.mt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.75rem; margin-top: 1.5rem; font-family: var(--sans); font-size: var(--fs-ui); }
@media (max-width: 59.99em) {
  .mt { grid-template-columns: 1fr; gap: 1.5rem; }
  .mt-list { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
  .mt-tab { flex: none; min-height: 2.75rem; padding: 0 0.75rem; font-size: 1.25rem; font-style: italic; border: 1px solid var(--line); }
  .mt-tab[aria-selected="true"] { border-color: var(--brass-400); background: rgba(203, 181, 128, 0.12); }
  .mt-panel { grid-template-columns: 1fr; gap: 1.25rem; }
  .mt-photo { order: -1; }
  .mt-plate { max-width: 17rem; }
}

@media (min-width: 60em) {
  .mt-list { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
  .mt-photo { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  /* Register ohne Bild: Die Gruppen stehen nebeneinander und nutzen die ganze Breite. */
  .mt-panel-full { grid-template-columns: minmax(0, 1fr); }
  .mt-panel-full .mt-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--block-gap); align-items: start; }
  .mt-panel-full .mt-title, .mt-panel-full .mt-body > .mg-note, .mt-panel-full .mt-foot { grid-column: 1 / -1; }
  .mt-panel-full .mg, .mt-panel-full .mg + .mg { margin-top: 1rem; }
}
.mt-more { margin-top: 1rem; font-family: var(--sans); font-size: var(--fs-ui); }
.mt-next { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-family: var(--sans); font-size: var(--fs-ui); color: var(--text-soft); }
.mt-next span { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--text); }
.mt-next::after { content: "→"; }
@media (hover: hover) and (pointer: fine) { .mt-next:hover { color: var(--text); border-bottom-color: var(--brass-400); } }

/* Hinweis unter der Karte und Erklärung der Kennzeichnung */
.mt-legendlink { margin-top: var(--block-gap); }
.legend-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--block-gap); font-family: var(--sans); font-size: var(--fs-small); }
.legend-h { font-family: var(--serif); font-size: var(--fs-h3); margin-bottom: 0.75rem; }
.legend-list div { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; padding: 0.35rem 0; }
.legend-list dt { color: var(--heading); font-weight: 500; }
.legend-list dd { margin: 0; color: var(--text); }
@media (max-width: 47.99em) { .legend-cols { grid-template-columns: 1fr; } }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--green-950); padding-block: var(--section-y) calc(var(--section-y) * 0.5); }
.footer-grid { display: grid; grid-template-columns: 4fr 3fr 3fr 2fr; gap: var(--block-gap); }
.footer-brand { width: 13.5rem; max-width: 100%; }
.footer-brand img { width: 100%; margin-bottom: 1.25rem; }
.footer-brand p { color: var(--text-soft); max-width: 34ch; }
.footer-brand .btn { width: 100%; margin-top: 0.5rem; padding-inline: 0; }
.site-footer h2 { font-family: var(--sans); font-size: var(--fs-ui); font-weight: 500; letter-spacing: 0.02em; color: var(--brass-400); margin-bottom: 0.9rem; }
.footer-col p, .footer-col li { font-size: var(--fs-body); line-height: 1.5; }
.footer-col a { text-decoration: none; }
.footer-col ul a { display: inline-flex; min-height: 2.75rem; align-items: center; }
/* die hohen Tippflächen nach oben ausgleichen, damit „Speisekarte“ auf einer Linie mit den Nachbarspalten beginnt */
.footer-links { margin-top: calc((1.5 * var(--fs-body) - 2.75rem) / 2); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--brass-300); } }
.footer-hours div + div { margin-top: 0.6rem; }
.footer-hours dt { color: var(--text-soft); }
.footer-hours dd { margin: 0; }
.footer-col .link { display: inline-flex; margin-top: 0.5rem; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: var(--block-gap); padding-top: 1.25rem; border-top: 1px solid var(--line); font-family: var(--sans); font-size: var(--fs-small); color: var(--text-soft); }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-legal a:hover { color: var(--ivory-100); } }
@media (max-width: 52.99em) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 29.99em) {
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer { padding-bottom: calc(var(--section-y) * 0.5 + 4.5rem); }
}

/* ---------- Seitentitel der Unterseiten ---------- */
.page-head { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 3.5vw, 3rem); }
.page-head .sec-head { margin-bottom: 0; }
.page-head h1 { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -0.02em; }
.page-head p { font-size: var(--fs-h3); line-height: 1.35; }

/* ---------- Formulare (Kontakt, Catering-Anfrage) ---------- */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
.field-wrap { display: grid; gap: 0.4rem; align-content: start; }
.field-wrap.wide { grid-column: 1 / -1; }
.field-wrap > span { font-family: var(--sans); font-size: var(--fs-small); color: var(--text-soft); }
.field { width: 100%; min-height: 3rem; padding: 0.6rem 0.9rem; background: var(--ivory-100); color: var(--text); border: 1.5px solid var(--charcoal-500); border-radius: 0; font-family: var(--sans); font-size: 1rem; }
.field:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--heading); }
.field[aria-invalid="true"] { border-color: var(--copper-700); border-width: 2px; }
textarea.field { resize: vertical; min-height: 7rem; line-height: 1.5; }
.field-error { font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; color: var(--copper-700); }
.field-error[hidden] { display: none; }
@media (max-width: 47.99em) { .fields { grid-template-columns: 1fr; } }
.sent { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--ivory-200); font-family: var(--sans); font-size: var(--fs-ui); }
.sent.is-warn { color: var(--copper-800); }

/* ---------- Lightbox ---------- */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--charcoal-900); }
.lightbox::backdrop { background: var(--charcoal-900); }
.lightbox-inner { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 0.75rem var(--margin) 1.25rem; gap: 0.75rem; }
.lightbox-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; font-family: var(--sans); font-size: var(--fs-ui); }
.lightbox figure { display: grid; place-items: center; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 10rem); width: auto; height: auto; object-fit: contain; }
.lightbox-nav { display: flex; justify-content: center; gap: 0.75rem; }

/* ---------- Rechtliches ---------- */
.legal-body { max-width: 46rem; }
.legal-body h1 { font-size: var(--fs-h2); margin-bottom: var(--head-gap); }
.legal-body h2 { font-size: var(--fs-h3); margin: 2rem 0 0.5rem; }
.draft-note { background: var(--ivory-200); padding: 1rem 1.25rem; font-family: var(--sans); font-size: var(--fs-ui); }

/* ---------- Bewegung: nur Einblenden, nie Scroll kontrollieren ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease-out), transform 750ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .reveal-img[data-reveal] { opacity: 1; transform: none; }
  .js .reveal-img[data-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 600ms var(--ease-in-out), transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal-img[data-reveal].is-in img { clip-path: inset(0); transform: none; }
  .js [data-rise] { opacity: 0; transform: translateY(14px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
}
.reveal-img { overflow: hidden; }
@keyframes rise { to { opacity: 1; transform: none; } }