/* ==========================================================================
   Pizzeria Bella Napoli – Gestaltung "Trattoria am Abend"
   Dunkles, foto-getragenes Design. Mobile-First, keine Abhängigkeiten.
   - echte Fotos des Inhabers tragen das Layout
   - Speisekarte über klebende Kategorie-Tabs: immer nur eine Kategorie
     sichtbar, die Tab-Leiste bleibt in Reichweite
   ========================================================================== */

:root {
  /* Dunkle Trattoria-Palette */
  --espresso:    #14100e;
  --espresso-2:  #1e1815;
  --espresso-3:  #2c231e;
  --line:        #3a2f28;
  --cream:       #f6f0e5;
  --cream-dim:   #b5a897;
  --amber:       #e8a33d;
  --amber-deep:  #c07f1e;
  --tomato:      #d53e2a;   /* 4,6 : 1 mit weißer Schrift (WCAG AA) */
  --tomato-deep: #b3331f;
  --olive:       #7f8c5a;

  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.3rem, 1.7rem + 3.2vw, 4.2rem);

  --space-xs: 0.5rem;
  --space-s:  0.875rem;
  --space-m:  1.5rem;
  --space-l:  2.5rem;
  --space-xl: 4rem;

  --radius: 8px;
  --radius-lg: 16px;
  --touch: 44px;
  --wrap: 1200px;
  --header-h: 60px;
  --bar-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele nicht unter Header + Tab-Leiste verstecken */
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--cream);
  background: var(--espresso);
  overflow-x: hidden;
}
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0 0 var(--space-s);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }

/* Unterseiten (Impressum) brauchen ein eigenes h1, sonst fängt die Seite
   mit h2 an. Optisch soll es aber nicht wie der Aufmacher wirken, darum
   die Größe der zweiten Ebene. Die Zwischentitel darunter sind h2 (sonst
   wäre eine Ebene übersprungen), sehen aber wie h3 aus. */
.page-title { font-size: var(--step-3); }
.page-sub { font-size: var(--step-1); letter-spacing: -0.015em; }
/* Rechtstexte (Impressum, Datenschutz): ruhige Lesespalte */
.legal { max-width: 70ch; }
.legal .page-sub { margin-top: var(--space-m); }
.legal .page-sub:first-child { margin-top: 0; }
.legal h3 { font-size: var(--step-0); margin: var(--space-s) 0 var(--space-xs); }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .3rem; }
.legal__more { margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--cream-dim); }
.legal__back { margin-top: var(--space-m); }
.notfound { max-width: 40rem; }

p { margin: 0 0 var(--space-s); }
p:last-child { margin-bottom: 0; }
a { color: var(--amber); }

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

/* --- Hilfsklassen ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-m); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-m); top: -100px; z-index: 200;
  background: var(--amber); color: var(--espresso);
  padding: .75rem 1.25rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 700; transition: top .15s ease;
}
.skip-link:focus { top: var(--space-xs); }

.section { padding-block: var(--space-l); }
@media (min-width: 768px) { .section { padding-block: var(--space-xl); } }
.section--alt { background: var(--espresso-2); }

.eyebrow {
  font-size: var(--step--1); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 var(--space-xs);
}
.lead { font-size: var(--step-1); color: var(--cream-dim); line-height: 1.55; }
.section__head { max-width: 60ch; margin-bottom: var(--space-m); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--touch); min-width: var(--touch);
  padding: .7rem 1.5rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--tomato); color: #fff; }
.btn--primary:hover { background: var(--tomato-deep); }
.btn--amber { background: var(--amber); color: var(--espresso); }
.btn--amber:hover { background: var(--amber-deep); }
.btn--outline { background: transparent; color: var(--cream); border-color: var(--line); }
.btn--outline:hover { border-color: var(--amber); color: var(--amber); }
.btn--block { width: 100%; }
.btn__icon { width: 1.1em; height: 1.1em; fill: currentColor; flex: 0 0 auto; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(20, 16, 14, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow .25s ease;
}
/* Hebt sich vom Hero-Foto ab, sobald man darunter scrollt. Kein Motion im
   vestibulären Sinn (WCAG 2.3.3), nur ein Schattenwechsel – läuft darum
   unabhängig von reduzierter Bewegung. */
.header--elevated { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .6); }
.header__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-s);
  height: var(--header-h);
}
/* min-height sichert die 44px-Trefferfläche des Logo-Links */
.brand { display: flex; align-items: center; gap: .6rem; min-height: var(--touch); text-decoration: none; color: var(--cream); }
.brand__mark {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px;
  background: linear-gradient(135deg, var(--olive) 0 33%, #efe7d8 33% 66%, var(--tomato) 66%);
}
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.02em; }
.brand__sub {
  display: block; font-size: .58rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: var(--touch); height: var(--touch); padding: 0;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--cream); cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 19px; height: 2px; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  background: currentColor; border-radius: 2px; transition: transform .2s ease;
}
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav {
  flex: 1 0 100%; order: 3;
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  background: var(--espresso-2);
  border-bottom: 1px solid var(--line);
  margin-inline: calc(-1 * var(--space-m));
  padding-inline: var(--space-m);
}
.nav[data-open="true"] { grid-template-rows: 1fr; }
/* Mobil: geschlossenes Menü ist auch für Tastatur und Screenreader weg.
   Beim Öffnen blenden nur opacity und transform ein – keine Layout-Animation. */
@media (max-width: 767px) {
  .nav__list { transition: opacity .2s ease, transform .2s ease; }
  .nav[data-open="false"] .nav__list { visibility: hidden; opacity: 0; transform: translateY(-6px); }
}
/* Scrollsperre, solange das mobile Menü offen ist (setzt js/main.js) */
html.nav-offen { overflow: hidden; }
.nav__list { list-style: none; margin: 0; padding: 0; min-height: 0; min-width: 0; }
.nav__link {
  display: flex; align-items: center; min-height: var(--touch);
  padding: .65rem 0; color: var(--cream); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.nav__list > li:last-child .nav__link { border-bottom: 0; }
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--amber); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav {
    flex: 0 1 auto; order: 0;
    grid-template-rows: 1fr; overflow: visible;
    background: transparent; border-bottom: 0; margin: 0; padding: 0;
  }
  .nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.2rem); }
  .nav__link { border-bottom: 0; padding: .4rem .3rem; }
}
.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }

/* ==========================================================================
   Hero mit Vollbild-Foto
   ========================================================================== */
.hero { position: relative; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  /* Verlauf sichert Textkontrast auf dem Foto */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(20,16,14,.92) 0%, rgba(20,16,14,.72) 40%, rgba(20,16,14,.95) 100%);
}
.hero__inner { padding-block: var(--space-xl) var(--space-l); }
.hero h1 { text-wrap: balance; }
.hero h1 span { display: block; color: var(--amber); }
/* 34ch bezieht sich auf die Body-Schrift (~290px) – das reicht mobil,
   quetscht am Desktop aber die grosse H1 auf fuenf Zeilen. Darum dort
   eine feste Spaltenbreite und der Fliesstext separat begrenzt. */
.hero__text { max-width: 34ch; }
.hero .lead { color: #ded4c4; }
@media (min-width: 768px) {
  .hero__text { max-width: 640px; }
  .hero .lead { max-width: 44ch; }
}

.status {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: var(--space-m); padding: .4rem .95rem .4rem .7rem;
  background: rgba(44, 35, 30, .9); border: 1px solid var(--line);
  border-radius: 999px; font-size: var(--step--1); font-weight: 700;
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cream-dim); flex: 0 0 auto; }
.status[data-state="open"] .status__dot { background: #4caf6a; box-shadow: 0 0 0 4px rgba(76,175,106,.22); }
.status[data-state="closed"] .status__dot { background: var(--tomato); box-shadow: 0 0 0 4px rgba(214,67,47,.22); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
.hero__actions .btn { flex: 1 1 13rem; }
@media (min-width: 768px) { .hero__actions .btn { flex: 0 0 auto; } }

/* --- Info-Streifen ------------------------------------------------------ */
.strip { background: var(--espresso-3); border-block: 1px solid var(--line); }
.strip__grid { display: grid; gap: 0; }
@media (min-width: 700px) { .strip__grid { grid-template-columns: repeat(3, 1fr); } }
.strip__item { padding: var(--space-s) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) {
  .strip__item { padding: var(--space-m) var(--space-m) var(--space-m) 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .strip__item:last-child { border-right: 0; }
}
.strip__label {
  display: block; font-size: .65rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber); margin-bottom: .1rem;
}
.strip__value { font-family: var(--font-head); font-size: var(--step-1); font-weight: 800; letter-spacing: -.015em; }
.strip__value--klein { font-size: var(--step-0); }
.strip__value a { color: inherit; text-decoration: none; }
.strip__value a:hover { color: var(--amber); }
.strip__note { display: block; font-size: var(--step--1); color: var(--cream-dim); }
/* 44px-Trefferflaeche fuer Inline-Links */
.strip__value a, .strip__note a, .card p a, .card address a, .footer p a,
a[href^="tel:"]:not(.btn) { display: inline-flex; align-items: center; min-height: var(--touch); }

/* ==========================================================================
   SPEISEKARTE mit klebenden Kategorie-Tabs
   Kernverbesserung: nur eine Kategorie ist sichtbar, die Tab-Leiste bleibt
   oben erreichbar. Kein Scrollen, um eine Kategorie zu finden.
   ========================================================================== */
.menu { position: relative; }

.menu-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  display: flex;
  gap: var(--space-xs);
  /* Horizontal wischbar statt umbrechend – bleibt eine Zeile hoch */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-xs) var(--space-m);
  margin-inline: calc(-1 * var(--space-m));
  background: rgba(20, 16, 14, .95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.menu-tabs::-webkit-scrollbar { display: none; }

.mtab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-height: var(--touch);
  padding: .5rem 1.1rem;
  background: var(--espresso-3);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mtab:hover { border-color: var(--amber); color: var(--amber); }
.mtab[aria-selected="true"] {
  background: var(--amber); color: var(--espresso); border-color: var(--amber);
}

.mpanel { padding-top: var(--space-m); }
/* Das hidden-Attribut markiert im HTML acht der neun Kategorien als
   eingeklappt, damit sie mit aktiven Tabs sofort im richtigen Zustand
   starten. Ohne diese Zeile würde der native [hidden]-Stil des Browsers
   sie unabhängig von .js-tabs verstecken – die Karte wäre ohne
   JavaScript NUR mit der ersten Kategorie lesbar, obwohl das Ziel
   "komplette Karte lesbar" war. Erst wenn main.js die Klasse js-tabs
   setzt, greift das Ausblenden wieder. */
.mpanel[hidden] { display: block; }
.js-tabs .mpanel[hidden] { display: none; }
/* Jede Kategorie ist eine abgeschlossene Einheit: Einblenden der langen
   Pizza-Liste berechnet nur noch das Panel selbst neu, nicht die ganze
   Seite (gemessen: Tab-Wechsel bei 4-facher CPU-Drosselung deutlich kürzer).
   Optisch unverändert, per Bildvergleich geprüft. */
.mpanel { contain: content; }
/* Im Tab-Modus steht der Kategoriename schon im Tab. Die Überschrift bleibt
   für Screenreader und Gliederung (h2 → h3 → h4) erhalten, nur unsichtbar. */
.js-tabs .mpanel__title {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mpanel__title { color: var(--amber); }

.mpanel__lead {
  margin: 0 0 var(--space-m);
  color: var(--cream-dim); font-size: var(--step-0); line-height: 1.5;
}

/* Untergruppe innerhalb einer Kategorie ("Mit Essig & Öl", "Vom Rind") */
.mgroup {
  margin: var(--space-l) 0 var(--space-xs);
  font-size: var(--step-0); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
/* Steht die Gruppe ganz oben (Kategorie-Titel ist im Tab-Modus ausgeblendet)
   oder direkt unter dem Einleitungssatz, reicht ein kleiner Abstand. */
.mpanel__title + .mgroup { margin-top: var(--space-xs); }
.mpanel__lead + .mgroup { margin-top: var(--space-s); }

/* Hinweis der gedruckten Karte, z. B. "Zu jedem Salat reichen wir Pizzabrötchen." */
.mpanel__note {
  margin: var(--space-m) 0 0;
  padding: var(--space-s) var(--space-m);
  background: var(--espresso-2);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  color: var(--cream-dim); font-size: var(--step--1); line-height: 1.5;
}

/* Die beiden farbigen Kästen der Karte (Extras / kleine Pizza) */
.mnotes { display: grid; gap: var(--space-s); margin-top: var(--space-m); }
@media (min-width: 700px) { .mnotes { grid-template-columns: 1fr 1fr; } }
.mnote {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--espresso-3);
}
.mnote--tomato { background: rgba(214, 67, 47, .14);  border-color: rgba(214, 67, 47, .55); }
.mnote--olive  { background: rgba(127, 140, 90, .16); border-color: rgba(127, 140, 90, .6); }
.mnote h4 { margin: 0 0 .4rem; font-size: var(--step-0); }
.mnote p  { margin: 0; color: var(--cream-dim); }
.mnote__list { list-style: none; margin: 0; padding: 0; }
.mnote__list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .18rem 0;
}
.mnote__list b { color: var(--amber); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------
   Eine Gerichtzeile
   Raster: Nummer links in fester Spalte, rechts Name … Preis und darunter
   die Zutaten. Dadurch bleiben Nummern und Preise untereinander bündig,
   auch wenn eine Zutatenzeile über zwei Zeilen läuft.
   -------------------------------------------------------------------- */
.dishes { list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) {
  .dishes { columns: 2; column-gap: var(--space-xl); }
}
/* Lange Einzelposten (Pizza Blech) bleiben einspaltig */
.dishes--wide { columns: 1; }

.dish {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  column-gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
@media (min-width: 600px) { .dish { grid-template-columns: 3.1rem 1fr; } }

.dish__no {
  font-size: var(--step--1); font-weight: 700; line-height: 1.5;
  color: var(--amber-deep); font-variant-numeric: tabular-nums;
}
.dish__body { grid-column: 2; }
/* Position ohne Nummer nutzt die volle Breite */
.dish__body:first-child { grid-column: 1 / -1; }

.dish__head { display: flex; align-items: baseline; gap: .5rem; }
.dish__name { flex: 0 1 auto; font-weight: 700; line-height: 1.35; }
.dish__aller {
  margin-left: .35em; font-size: .72em; font-weight: 600;
  letter-spacing: .06em; color: var(--cream-dim); white-space: nowrap;
}
.dish__dots {
  flex: 1 1 auto; min-width: 1rem;
  border-bottom: 1px dotted var(--line); transform: translateY(-.25em);
}
.dish__price {
  flex: 0 0 auto; font-weight: 800; color: var(--amber);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dish__desc {
  display: block; margin-top: .15rem;
  font-size: var(--step--1); font-weight: 400;
  color: var(--cream-dim); line-height: 1.45;
}
.dish sup { font-size: .62em; font-weight: 400; }

/* --------------------------------------------------------------------
   Allergene und Zusatzstoffe – eingeklappt, damit die Karte kurz bleibt
   -------------------------------------------------------------------- */
.legend {
  margin-top: var(--space-l);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--espresso-2);
}
.legend > summary {
  display: flex; align-items: center; min-height: var(--touch);
  padding: .5rem var(--space-m);
  font-weight: 800; color: var(--amber); cursor: pointer;
}
.legend[open] > summary { border-bottom: 1px solid var(--line); }
.legend__grid { display: grid; gap: var(--space-m); padding: var(--space-m); }
@media (min-width: 700px) { .legend__grid { grid-template-columns: 1fr 1fr; } }
.legend__title {
  margin: 0 0 .5rem; font-size: var(--step--1); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
.legend__list { margin: 0; }
.legend__row {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: .4rem;
  padding: .15rem 0;
  font-size: var(--step--1); color: var(--cream-dim); line-height: 1.45;
}
.legend__row dt { font-weight: 800; color: var(--cream); }
.legend__row dd { margin: 0; }
.legend__note {
  margin: 0; padding: 0 var(--space-m) var(--space-m);
  font-size: var(--step--1); color: var(--cream-dim); line-height: 1.5;
}
.legend__note + .legend__note { padding-top: .6rem; }
.menu-legal {
  margin: var(--space-s) 0 0;
  font-size: var(--step--1); color: var(--cream-dim);
}

/* ==========================================================================
   Galerie – Fotos des Inhabers
   ========================================================================== */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-s);
  /* Mobil: wischbare Karussell-Reihe mit Snap */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-xs);
  margin-inline: calc(-1 * var(--space-m));
  padding-inline: var(--space-m);
}
.gallery::-webkit-scrollbar { display: none; }

@media (min-width: 800px) {
  /* Desktop: ruhiges Raster, kein Wischen nötig */
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
}

.gallery figure {
  margin: 0; scroll-snap-align: center;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--espresso-3); position: relative;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.gallery figure:first-child img { aspect-ratio: 16 / 10; }
@media (min-width: 800px) { .gallery figure:first-child img { aspect-ratio: auto; height: 100%; } }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .9rem .7rem;
  font-size: var(--step--1); font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(20,16,14,.9));
}
.gallery-hint { font-size: var(--step--1); color: var(--cream-dim); margin-top: var(--space-xs); }
@media (min-width: 800px) { .gallery-hint { display: none; } }

/* ==========================================================================
   Öffnungszeiten
   ========================================================================== */
.hours { list-style: none; margin: 0; padding: 0; }
.hours__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .2rem var(--space-s); padding: .8rem .7rem; border-bottom: 1px solid var(--line);
}
.hours__row[data-today="true"] {
  background: var(--espresso-3); border-radius: var(--radius);
  border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--amber);
}
.hours__day { font-weight: 700; }
.hours__row[data-today="true"] .hours__day::after {
  /* Für Screenreader leer ("/ ''"), dort sagt aria-current="date" dasselbe –
     sonst hieße es "FeiertageHeute". Ältere Browser nehmen die erste Zeile. */
  content: "Heute";
  content: "Heute" / ""; margin-left: .5rem; padding: .1rem .5rem;
  background: var(--amber); color: var(--espresso); border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: .1em;
}
.hours__time { color: var(--cream-dim); font-variant-numeric: tabular-nums; text-align: right; }
/* Abweichende Tage (Betriebsferien …) und Feiertagshinweis aus betrieb.json */
.hours--sonder { margin-top: var(--space-s); }
.hours--sonder .hours__time { color: var(--cream); }
.hours__hint { margin: var(--space-xs) .7rem 0; font-size: var(--step--1); color: var(--cream-dim); }

.two-col { display: grid; gap: var(--space-m); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.card { background: var(--espresso-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-m); }
.card address { font-style: normal; line-height: 1.7; }
.card__text { color: var(--cream-dim); }
.card--schmal { max-width: 60ch; }
.card--order { background: linear-gradient(150deg, var(--espresso-3), #3a2a1c); }
.card__actions { display: grid; gap: var(--space-xs); margin-top: var(--space-s); }
@media (min-width: 480px) { .contact-actions { grid-template-columns: 1fr 1fr; } }

/* --- App & Bestellung: offizielle Store-Badges -------------------------
   Nur Größe/Abstand/Ausrichtung werden gesetzt. Keine Filter, Farben,
   Schatten oder Formänderung an den Badges selbst — das verbieten die
   Markenrichtlinien von Apple und Google. */
.store-card { max-width: 30rem; margin-inline: auto; text-align: center; }
.store-badges {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-m); margin-top: var(--space-m);
}
/* Unter 480px bewusst untereinander statt eines zufälligen Umbruchs */
@media (max-width: 479px) { .store-badges { flex-direction: column; } }
.store-badges__link { display: inline-flex; border-radius: var(--radius); }
.store-badges__link:focus-visible { outline-offset: 4px; }
.store-badges img { display: block; height: 54px; width: auto; }

/* --- Lieferservice-Schritte -------------------------------------------- */
.steps { display: grid; gap: var(--space-s); counter-reset: s; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  counter-increment: s; position: relative;
  background: var(--espresso-3); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-m) var(--space-s) var(--space-s);
}
.step::before {
  content: counter(s); position: absolute; top: calc(-1 * var(--space-xs)); left: var(--space-s);
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--amber); color: var(--espresso); border-radius: 50%;
  font-family: var(--font-head); font-weight: 800;
  box-shadow: 0 0 0 4px var(--espresso-2);
}
.step h3 { margin-top: var(--space-xs); font-size: var(--step-0); }
.step p { font-size: var(--step--1); color: var(--cream-dim); }

/* ==========================================================================
   Footer + mobile Aktionsleiste
   ========================================================================== */
.footer { background: #0d0a09; padding-block: var(--space-l); margin-top: var(--space-l); border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: var(--space-m); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h2 { font-size: var(--step-0); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--cream); text-decoration: none; }
.footer li a:hover { color: var(--amber); }
.footer p { color: var(--cream-dim); }
.footer__note { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line); font-size: var(--step--1); color: #7d7266; }

.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 110;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xs);
  padding: .55rem var(--space-s);
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 10, 9, .97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
/* Browser ohne Unschärfe-Effekt: Kopfzeile und Leisten voll deckend statt
   halbdurchsichtig, damit kein Text durchscheint. Wo der Effekt geht, ändert
   sich nichts. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .menu-tabs { background: var(--espresso); }
  .actionbar { background: #0d0a09; }
}
.actionbar .btn { min-height: 46px; padding-inline: .5rem; font-size: var(--step--1); border-radius: var(--radius); }
@media (min-width: 768px) { .actionbar { display: none; } }

/* ==========================================================================
   Animationen – gesteuert von GSAP (js/main.js).

   Kein versteckter Startzustand in CSS: .reveal und .reveal-photo sind
   ganz normal sichtbar, bis main.js sie – nur wenn JavaScript läuft und
   keine reduzierte Bewegung eingestellt ist – per gsap.set() unsichtbar
   macht und dann über ScrollTrigger.batch() einblendet. Läuft kein JS,
   bleibt einfach alles sofort sichtbar.
   ========================================================================== */
.hero__media img { will-change: transform; }

/* Der Vorhang für die Galerie-Fotos braucht eine feste Blende – ohne
   overflow:hidden würde der Wischeffekt über den Rahmen hinausragen.
   .gallery figure hat das bereits (border-radius + overflow:hidden). */

@media print {
  .header, .menu-tabs, .actionbar, .gallery { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .js-tabs .mpanel[hidden] { display: block !important; }
  .js-tabs .mpanel__title {
    position: static; width: auto; height: auto; margin: 0 0 .5rem;
    overflow: visible; clip: auto; white-space: normal; color: #000;
  }
  /* Allergene gehören auf den Ausdruck, auch wenn sie am Bildschirm
     eingeklappt sind. */
  .legend > *:not(summary) { display: block !important; }
  .legend, .mpanel__note, .mnote { border-color: #999; background: none; }
  .dish__no, .dish__price, .mgroup, .legend > summary, .legend__title { color: #000; }
  .dish__desc, .dish__aller, .legend__row, .legend__note { color: #333; }
}