/* =====================================================================
   PLATTFORM-BASISSTYLES
   Generisches Layout & generische Komponenten fuer die Gastansicht.
   Enthaelt keinerlei restaurant- oder kuechenspezifische Werte -- Farben,
   Bilder etc. kommen aus Design-Tokens bzw. werden zur Laufzeit aus den
   Restaurant-Daten gesetzt.
   ===================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-ink);
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

.phone {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}

/* Small reusable icon-button used across header actions */
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.94);
  box-shadow: var(--sh-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  text-decoration: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* =====================================================================
   HERO / BRANDING
   Ein zusammenhaengendes Markensystem statt einzelner, unabhaengig
   positionierter Elemente: Logo+Name bilden eine Einheit (.brand),
   Sprachauswahl sitzt daneben in derselben Zeile (.hero-top), darunter
   folgt der eigentliche Seitentitel mit den Kontakt-Buttons (.hero-body).
   Ohne Hero-Bild ein hochwertiger Farbverlauf aus den Restaurant-
   Akzentfarben. Mit Hero-Bild setzt guest.js background-image direkt als
   Inline-Style aus restaurant.heroImage (siehe renderHeader()) -- dort,
   nicht hier, weil relative Bildpfade in einer CSS-Custom-Property
   innerhalb eines externen Stylesheets sonst relativ zu DESSEN Ordner
   statt zum Dokument aufgeloest werden; das dabei verwendete Verlaufs-
   Overlay wird aus den --hero-overlay-*-Tokens unten zusammengesetzt.
   Die Klasse .has-hero-image bleibt als Marker fuer eventuelle
   zukuenftige Styling-Hooks bestehen. Nie ein "Bild nicht verfuegbar"-
   Platzhalter.

   min-height statt eines starren aspect-ratio: ein sehr langer
   Restaurantname kann die Markenzeile auf schmalen Bildschirmen zum
   Umbrechen zwingen (bewusst -- siehe .brand-name -- statt abzuschneiden
   oder zu ueberlappen); der Hero waechst dann einfach etwas, statt
   Inhalte abzuschneiden. justify-content:flex-start (statt space-between)
   und ein moderates min-height halten die Komposition dabei kompakt und
   oben verankert -- naeher an der vorherigen, ruhigeren Rhythmik statt
   Titel/Buttons ueber die volle Hoehe zu verteilen. */
header {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  position: relative;
  overflow: hidden;
  background-color: var(--hero-bg-a);
  background-image: linear-gradient(160deg, var(--hero-bg-a) 0%, var(--hero-bg-b) 100%);
  background-size: cover;
  /* Ein Titelbild liegt NICHT mehr als Hintergrund hier, sondern als eigene
     Ebene (.hero-photo, siehe heroPhoto.css) -- noetig fuer lueckenfreien Zoom. */
  background-position: center;
  min-height: var(--hero-min-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--sp-5);
}

.header-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent 0%, var(--c-bg) 100%);
  pointer-events: none;
}

.hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Logo + Name als EINE Markeneinheit. min-width:0 erlaubt .brand-name,
   innerhalb dieser Zeile zu umbrechen/zu schrumpfen, statt die Zeile zu
   sprengen -- .lang-select (flex-shrink:0, siehe unten) kann dadurch
   strukturell nie verdeckt oder ueberlaufen werden, unabhaengig von der
   Namenslaenge. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}

/* Sprachwahl: kompakte Pille (Globus + Code + Pfeil) -- oeffnet ein
   Bottom-Sheet (#lang-sheet). Die Pille ist bei jeder Sprachanzahl gleich
   breit, der Hero bleibt daher stabil. */
.lang-select {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--c-float-bg);
  border: none;
  border-radius: var(--r-full);
  padding: 7px 10px 7px 10px;
  box-shadow: var(--sh-sm);
  color: var(--c-float-ink);
  font-family: var(--font-body);
  cursor: pointer;
}
.lang-select[hidden] { display: none; }
.lang-select .lang-code { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.lang-select .lang-chevron { width: 12px; height: 12px; }

.lang-select svg { width: 14px; height: 14px; stroke: var(--c-float-ink); fill: none; stroke-width: 1.8; }

/* Logo-Darstellung (.logo-slot, Formen, Maske, Vignette) ist ausgelagert
   nach src/shared/logo.css -- von Gastansicht UND Admin (Restaurantprofil-
   Vorschau) gemeinsam genutzt, damit beide garantiert dieselbe Optik
   zeigen statt nur aehnlicher, doppelt gepflegter Regeln. Siehe index.html
   fuer den Link. */

/* Sprach-Sheet (nutzt .fs-backdrop/.fs-sheet des Filters). Bei sehr vielen
   Sprachen scrollt die Liste innerhalb des Sheets. */
.lang-option-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding-bottom: 8px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  border: none;
  border-radius: var(--r-md, 12px);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 15px;
  text-align: start;
  cursor: pointer;
}
.lang-option:hover, .lang-option:focus-visible { background: var(--c-hover); outline: none; }
.lang-option.is-current { font-weight: 600; background: var(--c-hover-strong); }
.lang-option-code {
  flex: 0 0 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft, #7a766f);
}
.lang-option-name { flex: 1; }
.lang-option-check { width: 18px; height: 18px; stroke: var(--c-ink); fill: none; stroke-width: 2; }

/* Restaurantname als Teil der Markenzeile (siehe .brand): weiterhin
   ruhig/dezent (Grossbuchstaben, Brotschrift, kein grosses Logotype-
   Gewicht) statt dem Titel "Speisekarte" die Aufmerksamkeit streitig zu
   machen -- aber etwas groesser/kraeftiger und mit deutlich engerer
   Laufweite als zuvor, da 0.15em bei kleiner Schriftgroesse auf Hero-
   Fotos schwer lesbar war. --hero-name-size ist ein clamp() (tokens.css):
   skaliert mit der Viewport-Breite zwischen 320-430px (dem Bereich, in dem
   .phone tatsaechlich schmaler als sein max-width ist), darueber deckelt
   der obere clamp-Wert die Groesse. Darf weiterhin umbrechen
   (overflow-wrap) statt abgeschnitten zu werden -- ein sehr langer Name
   bekommt dadurch mehr Zeilen statt "...", die Markenzeile waechst in
   diesem Fall einfach (siehe header: min-height statt aspect-ratio). */
.brand-name {
  min-width: 0;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--hero-name-size);
  letter-spacing: var(--hero-name-tracking);
  text-transform: uppercase;
  line-height: 1.35;
  overflow-wrap: break-word;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.hero-body {
  position: relative;
  z-index: 2;
  text-align: center;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  letter-spacing: -0.3px;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.search-row {
  margin: -14px var(--sp-6) var(--sp-5);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-surface);
  border-radius: var(--search-radius);
  padding: 10px 16px;
  color: var(--c-ink-soft);
  font-size: 13px;
  box-shadow: var(--sh-sm);
}
.search svg { width: 15px; height: 15px; stroke: var(--c-ink-soft); fill: none; stroke-width: 1.8; flex-shrink: 0; }

.search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--c-ink);
}
.search input::placeholder { color: var(--c-ink-soft); }

/* Das globale input:focus-visible (kraeftiger Akzent-Outline, siehe
   Dateiende) ist fuer Formularfelder in Modals/Editoren gedacht und bleibt
   dort unangetastet. Fuers Suchfeld wirkte er zu auffaellig/warnungsartig;
   #search-input:focus-visible ist spezifischer und ersetzt ihn hier gezielt
   durch einen dezenten Ring auf der Suchfeld-Pille selbst -- weiterhin klar
   erkennbar, aber ruhig statt alarmierend. */
#search-input:focus-visible { outline: none; }
.search:focus-within {
  box-shadow: var(--sh-sm), 0 0 0 2px var(--c-accent-ring);
}

.search-clear {
  border: none;
  background: transparent;
  color: var(--c-ink-soft);
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
  flex-shrink: 0;
}

/* Reserved slot for an optional future filter button next to search */
.filter-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  display: none; /* hidden until filters exist; layout already reserves the row */
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  flex-shrink: 0;
}

/* ---------- Item list screen ---------- */
.item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 4px;
}

.item-header > div { flex: 1; min-width: 0; }

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: none;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}

.item-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.item-subtitle {
  font-size: 12px;
  color: var(--c-ink-soft);
  margin-top: 2px;
}

/* --- Filter-Chips: nur eingeblendet, wenn das Restaurant fuer diese
   Kategorie tatsaechlich filterbare Eigenschaften/Tags gepflegt hat --- */
.filter-chip-row {
  display: none;
  gap: 8px;
  padding: 4px 20px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-chip-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--chip-radius);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-chip.active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

.allergen-disclaimer {
  margin-top: 6px;
  font-size: 10px;
  color: var(--c-text-faint);
  line-height: 1.5;
}

/* --- Filter-Bottom-Sheet --- */
.fs-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(38,34,32,0.35);
  z-index: 40;
}
.fs-backdrop.open { display: block; }
.fs-sheet {
  position: fixed;
  left: 50%; bottom: -100%;
  transform: translateX(-50%);
  width: 100%; max-width: 430px;
  background: var(--c-surface);
  border-radius: var(--sheet-radius);
  padding: 10px 22px 22px;
  z-index: 41;
  transition: bottom 0.28s ease;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--sh-lg);
}
.fs-sheet.open { bottom: 0; }
.fs-handle {
  width: 36px; height: 4px;
  background: var(--c-border);
  border-radius: var(--r-full);
  margin: 0 auto 16px;
}
.fs-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
.fs-sub {
  font-size: 12.5px;
  color: var(--c-ink-soft);
  margin-top: 3px;
  margin-bottom: 16px;
}
.fs-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  margin: 16px 0 8px;
}
.fs-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-allergen-list { display: flex; flex-direction: column; gap: 10px; }
.fs-allergen-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-ink);
}
.fs-allergen-item input { width: 17px; height: 17px; accent-color: var(--c-accent); }
.fs-disclaimer {
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--c-text-faint);
  line-height: 1.5;
}
.fs-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.fs-btn-reset, .fs-btn-apply {
  flex: 1;
  padding: 13px;
  border-radius: var(--chip-radius);
  border: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.fs-btn-reset {
  background: var(--c-line);
  color: var(--c-ink);
}
.fs-btn-apply {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* "Meine Auswahl" -- Bookmark-Toggle auf der Gerichtskarte (siehe
   guest.js: dishCardHTML/bookmarkButtonHTML). Sitzt als zweites Kind in
   .dish-bottom (justify-content:space-between platziert es automatisch
   rechts neben .allergens, ohne dessen Grid/Flex-Aufbau zu aendern). Rein
   outline vs. gefuellt statt Plus/Warenkorb-Symbolik -- bewusst kein
   Bestell-/Mengen-Element. 34px Ziel bei kompakter 19px-Ikonflaeche: klein
   in der Kartenoptik, aber ein ausreichend grosses Touch-Ziel. */
.bookmark-btn {
  width: 34px;
  height: 34px;
  margin: -6px -6px -6px 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-bookmark);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, transform 0.1s ease;
}
.bookmark-btn svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.bookmark-btn.is-selected { color: var(--c-accent-icon); }
.bookmark-btn.is-selected svg { fill: var(--c-accent-icon); }
.bookmark-btn:active { transform: scale(0.86); }

.legend {
  padding: 6px 24px 24px;
  font-size: 11px;
  color: var(--c-text-meta);
  line-height: 1.7;
}

/* Restaurant-Widgets (frei konfigurierbare Links, siehe index.html/
   guest.js: renderContactWidgets) -- ruhige Aktions-Pillen direkt ueber den
   Kategorien, bewusst keine Dashboard-Kacheln: neutrale Flaeche, feine Linie,
   Icon im Akzent, kein Call-to-Action-Look. Tap-Flaeche 40px hoch
   (Mobile). Zustaende ueber Akzent-Mischungen, damit jedes Preset/jede eigene
   Akzentfarbe passt (Fallback ohne color-mix: einfache Akzentlinie).
   "Bewerten" (data-kind="google_review") ist nur leicht getoent, nicht
   lauter. Langes Label kuerzt die Pille per Ellipsis; Umbruch ueber flex-wrap. */
.contact-widgets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 24px 12px;
}
/* Mobile/Spalte: ab zwei Links ein ruhiges 2er-Raster (4 Links = 2x2, kein
   einzelner Link allein in einer Reihe -- ein ungerader letzter Link
   ueberspannt die Zeile). Ein einzelner Link behaelt seine natuerliche Breite. */
.contact-widgets[data-count="1"] { grid-template-columns: max-content; }
.contact-widgets > .contact-widget:last-child:nth-child(odd) { grid-column: 1 / -1; }
.contact-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  justify-content: center;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: var(--chip-radius);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 16, 12, 0.05);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.contact-widget svg {
  width: 17px;
  height: 17px;
  stroke: var(--c-accent);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* overflow:hidden (fuer die Ellipsis) schneidet an der Zeilenbox ab: mit
   line-height 1 war diese kleiner als die Schrift und kappte Unterlaengen
   (g, p, q, y). Eine Zeilenhoehe von 1.3 plus ein kleines Polster unten
   (durch gleich grossen negativen Rand wieder ausgeglichen, die Pille wird
   nicht hoeher) laesst die Unterlaengen komplett sichtbar. */
.contact-widget span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.contact-widget:hover {
  border-color: var(--c-accent);
  box-shadow: 0 2px 6px rgba(20, 16, 12, 0.08);
}
.contact-widget:active {
  transform: scale(0.98);
  box-shadow: none;
}
.contact-widget:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .contact-widget:hover { background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border)); }
  .contact-widget:active { background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface)); }
  .contact-widget[data-kind="google_review"] {
    background: color-mix(in srgb, var(--c-accent) 9%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-accent) 38%, var(--c-border));
  }
  .contact-widget[data-kind="google_review"]:hover { background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); }
  .contact-widget[data-kind="google_review"] svg { fill: color-mix(in srgb, var(--c-accent) 22%, transparent); }
}
@media (hover: none) {
  .contact-widget:hover { box-shadow: 0 1px 2px rgba(20, 16, 12, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-widget { transition: none; }
  .contact-widget:active { transform: none; }
}

/* Adresse/Oeffnungszeiten (siehe guest.js: renderRestaurantInfo). Ruhig und
   klein gehalten -- keine Card, keine zweite "Kontakt"-Flaeche neben den
   Link-Widgets oben: zwei schlichte Zeilen mit Strich-Icon (Standort, Uhr),
   klarerer Typografie und einem deutlichen Auf-/Zuklapp-Pfeil. Die Zeile des
   heutigen Tages ist in der aufgeklappten Liste hervorgehoben. */
.restaurant-info {
  padding: 0 24px 16px;
  font-size: 13px;
  color: var(--c-ink-soft);
}
.restaurant-address,
.restaurant-hours summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  line-height: 1.35;
}
.info-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.restaurant-address span { min-width: 0; color: var(--c-ink); }
.restaurant-hours summary {
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
  row-gap: 0;
  padding-right: 30px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.restaurant-hours summary::-webkit-details-marker { display: none; }
.restaurant-hours summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
.hours-title { color: var(--c-ink); font-weight: 600; }
.hours-today { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; min-width: 0; }
.hours-chevron {
  position: absolute;
  right: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  fill: none;
  stroke: var(--c-ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.restaurant-hours[open] .hours-chevron { transform: rotate(180deg); }
.restaurant-hours-table {
  margin: 4px 0 2px 25px;
  border-collapse: collapse;
}
.restaurant-hours-table th,
.restaurant-hours-table td {
  text-align: left;
  font-weight: 400;
  padding: 2px 16px 2px 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.restaurant-hours-table th { color: var(--c-ink-soft); }
.restaurant-hours-table td { color: var(--c-ink); }
.restaurant-hours-table tr.is-today th,
.restaurant-hours-table tr.is-today td { color: var(--c-ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .hours-chevron { transition: none; } }

footer {
  text-align: center;
  padding: 8px 24px 36px;
  font-size: 11.5px;
  color: var(--c-text-faint);
}

.screen { display: none; }
.screen.active {
  display: block;
  animation: screenIn 0.5s cubic-bezier(.2,.8,.2,1);
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

[hidden] { display:none !important; }
.legend { font-size:14px; color:var(--c-text-body); }
.allergen-disclaimer,.fs-disclaimer { font-size:12px; color:var(--c-text-body); }
.back-btn { min-width:44px; height:44px; }
.item-header { position:sticky; top:0; z-index:5; background:var(--c-bg); padding-bottom:12px; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--c-accent-icon); outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* =====================================================================
   SCHWEBENDER ZURUECK-BUTTON
   .item-header ist zwar als "position:sticky" deklariert (siehe oben),
   bleibt dadurch aber wirkungslos: .phone hat overflow:hidden, wodurch
   .phone selbst (das aber nie selbst scrollt, siehe DataStore-Kommentar
   zum Scrollverhalten) zum sticky-Containing-Block wird -- der Header
   scrollt schlicht mit weg. Deshalb ein zusaetzlicher, eigener Button mit
   position:fixed (bleibt unabhaengig davon garantiert im Viewport), der
   per JS (siehe guest.js/updateFloatingBackButton) nur dann eingeblendet
   wird, wenn der normale Zurueck-Button im Header bereits aus dem
   sichtbaren Bereich gescrollt ist -- nie beide gleichzeitig sichtbar,
   also keine zweite konkurrierende Navigation. Nutzt dieselbe .back-btn-
   Optik (Groesse/Schatten/Form) wieder, statt sie zu duplizieren. Die
   Position folgt der zentrierten .phone-Karte (max-width 430px) statt der
   physischen Viewport-Kante, damit der Button auch auf breiteren
   Bildschirmen innerhalb des Kartenrahmens bleibt. ===================== */
.back-btn-floating {
  position: fixed;
  top: var(--sp-4);
  left: max(var(--sp-4), calc(50% - 215px + var(--sp-4)));
  z-index: 30;
}

/* =====================================================================
   "MEINE AUSWAHL" -- Bottom-Bar + Merkzettel-Ansicht
   Dieselbe Fixed-statt-Sticky-Begruendung wie beim schwebenden Zurueck-
   Button oben gilt hier genauso (.phone hat overflow:hidden). z-index 32:
   ueber dem schwebenden Zurueck-Button (30, ueberschneidet sich mit ihm
   ohnehin nie -- der sitzt oben links, die Bar unten mittig), aber unter
   dem Filter-Bottom-Sheet/-Backdrop (40/41), damit ein geoeffnetes "Was
   passt zu mir?"-Sheet die Bar korrekt verdeckt statt ueber dem Scrim zu
   schweben. Bewusst eine schmale, dunkle Pille statt eines vollbreiten,
   hellen Balkens -- soll wie ein dezenter Hinweis wirken, nicht wie eine
   Warenkorb-/Checkout-Leiste. ===================================== */
.selection-bar {
  position: fixed;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  width: calc(100% - var(--sp-5) * 2);
  max-width: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--r-full);
  background: var(--c-bar-bg);
  color: var(--c-bar-ink);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--sh-lg);
  cursor: pointer;
  z-index: 32;
  -webkit-tap-highlight-color: transparent;
}
.selection-bar svg { width: 16px; height: 16px; stroke: var(--c-bar-ink); fill: var(--c-bar-ink); flex-shrink: 0; }

/* Reserviert Platz am unteren Rand, sobald die Bar sichtbar ist, damit sie
   nie Inhalte (z.B. den letzten Eintrag einer langen Liste, den Footer)
   dauerhaft verdeckt -- siehe guest.js: updateSelectionBar(). */
body.has-selection-bar { padding-bottom: 78px; }

.selection-empty {
  padding: 56px 32px 40px;
  text-align: center;
}
.selection-empty-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 8px;
}
.selection-empty-text {
  font-size: 13.5px;
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* Admin-Hinweis in der geschuetzten Draft-Vorschau (siehe guest.js:
   renderPreviewHiddenCategoriesHint) -- erscheint NIE fuer echte Gaeste.
   Bewusst klar als Werkzeug-Overlay erkennbar (gestrichelter Rahmen,
   eigenes Icon/Farbe), nicht als Teil der eigentlichen Speisekarte. */
.preview-admin-hint {
  margin: 0 24px 24px;
  padding: 10px 14px;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.03);
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.preview-admin-hint strong { color: var(--c-ink); }