/* ============================================================
   Lorbass v2 – Getränkekarte (nur auf /menu geladen)
   ============================================================ */

/* Dezenter Goldfunken-Hintergrund, nur auf dieser Seite (siehe JS im Twig-
   Template). position:fixed + niedriger z-index -> liegt hinter dem Inhalt,
   scheint nur durch transparente Flächen. */
#menuSparks {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* Nur auf der Getränkekarte: Abstand Header -> Textblock um 50% verkleinert
   (war 3.5rem wie auf den anderen .page-hero-Seiten, hier jetzt 1.75rem). */
.page-hero--tight { padding-top: 1.75rem; }

/* display:flex (statt inline-flex) + justify-content:center - vorher
   richtete sich die Zentrierung nach dem text-align des Elternelements,
   was bei umbrechendem Text (langer Satz) versagte: das Icon blieb am
   linken Rand der Box stehen statt mit dem Text zentriert zu wandern. */
.menu-payment-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; margin-top: .75rem; font-size: .85rem; color: var(--muted);
}
.menu-payment-note svg { width: 1.4rem; height: 1.4rem; color: var(--accent); flex-shrink: 0; }

.menu-payment-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin-top: .6rem;
}
.menu-payment-logo {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem; color: var(--text);
}
.menu-payment-logo svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* Sticky Kategorie-Leiste unter dem Header (Unterstrich-Stil aus v1
   übernommen statt Pillen mit Hintergrundfarbe).
   top: var(--header-h) statt eines eigenen Literals - in v1 hielt eine
   gemeinsame Variable Header und Tab-Leiste synchron; in v2 fehlte sie,
   wodurch hier (und im scroll-margin-top von .menu-section weiter unten)
   geschätzte Literale auseinanderliefen. */
.menu-tabs {
  position: sticky; top: var(--header-h); z-index: 30;
  background: rgba(13, 13, 13, .97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  /* Scroll-Container ist das ÄUSSERE Element (wie v1s .menu-nav) - das
     innere darf ungehindert auf seine volle Breite wachsen (min-width:
     max-content) und wird hier geclippt/gescrollt. Beides auf dasselbe
     Element zu setzen (vorheriger Bug) verhinderte jeden internen
     Überlauf und schob ihn bis zur ganzen Seite durch. */
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu-tabs::-webkit-scrollbar { display: none; }

/* Fade an den Rändern als Scroll-Affordance - nur wenn die Leiste tat-
   sächlich überläuft (Klasse wird per JS gesetzt, sonst auf Desktop mit
   wenigen Kategorien fälschlich der erste/letzte Tab angeschnitten). */
.menu-tabs.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

.menu-tabs-inner {
  display: flex; padding: 0 1rem; min-width: max-content;
}
/* Ab Desktop-Breite mittig zentrieren (min-width statt justify-content,
   damit bei vielen Kategorien auf schmaleren Desktops weiterhin sauber
   gescrollt werden kann); auf Mobile bleibt es linksbündig/scrollbar. */
@media (min-width: 720px) {
  .menu-tabs-inner { min-width: 0; width: fit-content; margin-inline: auto; }
}
.menu-tab {
  flex: 0 0 auto; font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  padding: .8rem .9rem .7rem; color: var(--muted);
  border: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.menu-tab:hover,
.menu-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.menu-content { padding: 1.5rem 1rem 3rem; }

/* Fallback-Wert (Header + reale Tab-Leisten-Höhe, keine Schätzung) -
   wird beim Laden per JS durch den exakten, gemessenen Pixelwert ersetzt
   (--menu-scroll-offset). Vorheriges Literal (140px) war nie nachgezogen
   worden, als die Tab-Leiste auf die jetzige, kompaktere Höhe schrumpfte. */
.menu-section { scroll-margin-top: var(--menu-scroll-offset, 110px); padding-top: 1.5rem; }
.menu-section-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.menu-section-icon { font-size: 1.4rem; }
.menu-section-head h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--accent); }
.menu-section > .menu-section-head + .menu-item,
.menu-section > .menu-section-head + .menu-item-collapsible,
.menu-section-head { border-bottom: 1px solid var(--border); padding-bottom: .5rem; }

.menu-subhead {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 1.25rem 0 .35rem;
}

.menu-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--surface2);
}
.menu-item-left { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.menu-item-text { min-width: 0; }
.menu-item-name { color: var(--text); }
.menu-item-size { display: block; font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.menu-item-price { flex: 0 0 auto; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Aufklappbare Einträge (Bild/Beschreibung vorhanden) – geschlossen optisch
   identisch zum einfachen .menu-item, da dieselbe Klasse auf <summary> sitzt.
   Pfeil sitzt links vor dem Namen; Einträge ohne Pfeil bekommen einen
   gleich breiten, leeren Platzhalter -> alle Getränkenamen bleiben in der
   selben Flucht. */
.menu-item-collapsible {
  border-bottom: 1px solid var(--surface2);
}
.menu-item-collapsible > summary.menu-item {
  border-bottom: none; cursor: pointer; list-style: none; user-select: none;
}
.menu-item-collapsible > summary::-webkit-details-marker { display: none; }
.menu-item-chevron,
.menu-item-chevron-spacer {
  flex: 0 0 auto; width: .7em; display: inline-block; text-align: center; line-height: 1.4;
  font-size: 1.1rem;
}
.menu-item-chevron {
  color: var(--muted); font-weight: 700;
  transition: transform .2s, color .2s; transform: rotate(0deg);
}
.menu-item-chevron::before { content: '›'; }
.menu-item-collapsible[open] > summary .menu-item-chevron {
  transform: rotate(90deg); color: var(--accent);
}

.menu-item-detail {
  display: flex; gap: 1rem; align-items: flex-start;
  /* Gleiche Einrückung wie Pfeil + Abstand vor dem Getränkenamen -> Bild/Text
     stehen in derselben Flucht wie die Namen darüber/darunter. */
  padding: 0 0 1rem calc(.7em + .45rem);
  animation: menuItemDetailFade .2s ease;
}
.menu-item-detail-img {
  flex: 0 0 auto; width: 80px; height: 80px;
  object-fit: cover; border-radius: var(--radius-sm);
}
.menu-item-detail-desc {
  margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.6;
}
@keyframes menuItemDetailFade {
  from { opacity: 0; } to { opacity: 1; }
}

/* Allergene / Zusatzstoffe als hochgestellter Hinweis */
.menu-item-markers {
  font-size: .6rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); margin-left: .2rem; vertical-align: super;
}

/* Allergene-Legende */
.menu-legend {
  margin: 2.5rem 0 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  scroll-margin-top: var(--menu-scroll-offset, 110px);
}
.menu-legend > summary {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); cursor: pointer; user-select: none;
  list-style: none; display: flex; align-items: center; gap: .4rem;
}
.menu-legend > summary::-webkit-details-marker { display: none; }
.menu-legend > summary::before {
  content: '›'; font-size: 1rem; transition: transform .2s;
  display: inline-block;
}
.menu-legend[open] > summary::before { transform: rotate(90deg); }
.menu-legend-body {
  display: flex; gap: 2rem; flex-wrap: wrap;
  padding: 1rem 0 .5rem; font-size: .8rem;
}
.menu-legend-col { flex: 1 1 200px; }
.menu-legend-head {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 .5rem;
}
.menu-legend-list { margin: 0; padding: 0; }
.menu-legend-list > div {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .15rem 0; border-bottom: 1px solid var(--surface2);
}
.menu-legend-list dt {
  flex: 0 0 1.4rem; font-weight: 700; color: var(--accent);
  font-size: .75rem;
}
.menu-legend-list dd { margin: 0; color: var(--muted); }