/* HOT GRILL — Onepager (Blueprint: DESIGN.md, 10.07.2026).
   Warmes Near-Black + EIN Glut-Akzent; Foto trägt die Atmosphäre, UI bleibt ruhig
   (Devonshire-Lektion). Gold nur Preise/Sterne, Neon nur Wortmarke. */

/* Ein Element mit dem Attribut hidden MUSS verschwinden. Der Browser regelt das selbst,
   aber sobald eine eigene Klasse ein display setzt, gewinnt die eigene Regel, und das
   Element bleibt stehen. Am 17.08. genau so passiert: der Knopf „Für alle übernehmen"
   war beim letzten Stück abgeschaltet, stand aber mit veralteter Beschriftung weiter da.
   Diese eine Zeile schliesst die ganze Fehlerklasse, statt sie je Knopf nachzubessern. */
[hidden] { display: none !important; }

@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/Oswald.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --bg: #120d09;
  --surface: #221910;
  --surface-2: #2a1f14;
  --line: rgba(245, 235, 220, 0.09);
  --text: #f6eee1;
  --muted: #b9a68d;
  --accent: #e8582b;
  --accent-hover: #f26a3d;
  --neon: #ff3b2f;
  --gold: #e9a23b;
  --green: #43c464;
  --radius: 12px;
  --maxw: 1100px;
  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Grain (dezent) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

/* ---------- Demo-Ribbon (Pflicht im Demo-Modus) ---------- */
.demo-ribbon {
  background: var(--gold);
  color: #241a0d;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  position: relative;
  z-index: 60;
}
.demo-ribbon a { color: inherit; font-weight: 700; }

/* ---------- Nav ---------- */
html, body { margin: 0; min-height: 100%; background: var(--bg); }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

header.site {
  background: rgba(18, 13, 9, 0.94);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gleicher linker Einzug wie der Hero-Textblock (Hero-Margin + 20px Wrap-Padding), damit „HOT GRILL" mit der Schrift fluchtet */
  padding: 12px calc(max(20px, (100vw - 1100px) / 4) + 20px);
  width: 100%;
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.08em;
  color: var(--neon);
  text-decoration: none;
  text-shadow: 0 0 6px rgba(255, 59, 47, 0.85), 0 0 22px rgba(255, 59, 47, 0.45);
  animation: neon-flicker 7s infinite;
}

@keyframes neon-flicker {
  0%, 91%, 94%, 100% { opacity: 1; }
  92%, 95% { opacity: 0.75; }
  93% { opacity: 0.9; }
}

.nav nav { display: flex; align-items: center; gap: 20px; }
.nav a.link { color: var(--muted); text-decoration: none; font-size: 0.95rem; transition: color 0.15s; }
.nav a.link:hover { color: var(--text); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
  border: none;
  font-size: 1.02rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(255, 224, 190, 0.85), 0 8px 18px rgba(0, 0, 0, 0.34); }
.btn.ghost { background: rgba(18, 13, 9, 0.5); border: 1px solid rgba(246, 238, 225, 0.35); color: var(--text); box-shadow: none; backdrop-filter: blur(4px); }
.btn.ghost:hover { background: rgba(18, 13, 9, 0.5); border-color: rgba(246, 238, 225, 0.85); transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(246, 238, 225, 0.28); }
.btn.small { padding: 8px 16px; font-size: 0.9rem; box-shadow: none; }
.btn:link, .btn:visited, .btn:hover, .btn:active, .btn:focus { color: #fff; }
.btn.ghost:link, .btn.ghost:visited, .btn.ghost:hover, .btn.ghost:active, .btn.ghost:focus { color: var(--text); }
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active, .btn:focus { color: #fff !important; }

.textlink { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.textlink:hover { color: var(--text); }

/* ---------- Offen-Badge ---------- */
.open-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 13, 9, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.88rem;
  backdrop-filter: blur(4px);
}
.open-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
.open-badge.closed .dot { background: #d4544a; box-shadow: 0 0 10px #d4544a; animation: none; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* Hero-Top-Reihe: Geöffnet-Badge links, Aktions-Pill rechts daneben (Desktop) */
.hero-toprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- Kino-Hero (Signature) ---------- */
.hero {
  position: relative;
  min-height: 76vh;
  min-height: 76dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    url("assets/fotos/hero-shot.webp") 56% 44% / cover no-repeat,
    linear-gradient(160deg, #2a1a10 0%, #120d09 70%);
}

/* Hero-Video: über dem Foto (Foto bleibt Fallback), unter Gradient + Funken + Text */
.hero .hero-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 44%;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 13, 9, 0.55) 0%, rgba(18, 13, 9, 0.18) 40%, transparent 62%),
    linear-gradient(180deg, rgba(18, 13, 9, 0.9) 0%, rgba(18, 13, 9, 0.45) 12%, rgba(18, 13, 9, 0.08) 32%, rgba(18, 13, 9, 0.15) 55%, rgba(18, 13, 9, 0.80) 92%, var(--bg) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero .hero-video { display: none; } }

.hero .wrap { position: relative; z-index: 3; padding-bottom: 52px; width: 100%; max-width: 820px; margin: 0; margin-left: max(20px, calc((100vw - 1100px) / 4)); }

.hero .display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 16px 0 10px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.hero .display .hot { color: var(--neon); text-shadow: 0 0 8px rgba(255, 59, 47, 0.9), 0 0 30px rgba(255, 59, 47, 0.5), 0 4px 30px rgba(0, 0, 0, 0.6); }

.hero p.sub {
  color: #e8dcc9;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 52ch;
  margin-bottom: 26px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Sprachumschalter */
.lang-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-btn:hover { border-color: var(--accent); background: rgba(232, 88, 43, 0.1); }

/* Aktions-Banner im Hero */
.promo-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(232, 88, 43, 0.22), rgba(18, 13, 9, 0.65));
  border: 1px solid rgba(232, 88, 43, 0.55);
  backdrop-filter: blur(4px);
  color: #ffe9db;
  text-decoration: none;
  font-size: 0.98rem;
  box-shadow: 0 0 22px rgba(232, 88, 43, 0.25);
  animation: promoGlow 2.6s ease-in-out infinite;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.promo-banner[hidden] { display: none; }
.promo-banner:hover { transform: translateY(-1px); border-color: var(--accent); }
.promo-banner .p-badge {
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.promo-banner .p-text { font-weight: 600; }
.promo-banner .p-arrow { color: var(--gold); font-weight: 700; }
@keyframes promoGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(232, 88, 43, 0.2); }
  50% { box-shadow: 0 0 30px rgba(232, 88, 43, 0.45); }
}
@media (prefers-reduced-motion: reduce) { .promo-banner { animation: none; } }

/* ---------- Ticker ---------- */
.ticker {
  background: var(--accent);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.ticker .track {
  display: flex;                /* wie das (funktionierende) Foto-Band: iOS lässt inline-block-Marquees fallen → leer */
  width: max-content;
  align-items: center;
  will-change: transform;       /* stabile GPU-Ebene, sonst blinkt iOS die Leiste leer */
  animation: ticker-scroll 26s linear infinite;
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.02rem;
}
.ticker .track span { flex: none; }
.ticker .track span { margin: 0 22px; }
.ticker .track .sep { color: #ffd9c4; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tk-shift, 50%))); } }

/* ---------- Info-Strip ---------- */
.info-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.info-card .label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.info-card .value { font-size: 1.02rem; }
.info-card .value small { color: var(--muted); }

/* ---------- Sektionen ---------- */
section.block { padding: 88px 0; }
.kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; }
h1.title, h2.title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 10px 0 14px;
}
p.lead { color: var(--muted); max-width: 58ch; font-size: 1.02rem; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Feature-Karten ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; transition: transform 0.2s, border-color 0.2s; }
.feature:hover { transform: translateY(-4px); border-color: rgba(232, 88, 43, 0.4); }
.feature .icon { font-size: 1.7rem; margin-bottom: 12px; display: block; }
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Menü-Highlight-Karten ---------- */
.menu-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.menu-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s, border-color 0.2s; }
.menu-card:hover { transform: translateY(-5px); border-color: rgba(233, 162, 59, 0.5); }
/* Die vier Klassiker sind seit dem 22.08. Links auf den passenden Abschnitt der Bestellseite
   (Julians Wunsch). Als <a> braucht die Kachel display:block, sonst reisst das Raster, und sie
   darf die Linkfarbe und die Unterstreichung des Browsers nicht uebernehmen. */
a.menu-card { display: block; text-decoration: none; color: inherit; }
a.menu-card:focus-visible { outline: 2px solid var(--accent, #e9a23b); outline-offset: 3px; }
.menu-card .ph { height: 150px; position: relative; background: linear-gradient(140deg, #3a2413, #221910); display: flex; align-items: center; justify-content: center; }
.menu-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-card .ph img.contain { object-fit: contain; padding: 8px; }
.menu-card .ph .fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.8rem; }
.menu-card .ph .fallback .emo { font-size: 2.2rem; }
.menu-card .ph.missing img { display: none; }
.menu-card .ph.missing .fallback { display: flex; }
.menu-card .body { padding: 16px 18px 18px; }
.menu-card .body h3 { font-size: 1.05rem; }
.menu-card .body .from { color: var(--gold); font-weight: 700; margin-top: 4px; }
.menu-card .body small { color: var(--muted); }

/* ---------- Speisekarte (Akkordeons) ---------- */
.menu-acc { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.menu-acc details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.menu-acc summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 64px 1fr 130px 20px;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Kategorie-Thumbnail: Klick öffnet Großansicht (Lightbox) */
.cat-thumb {
  width: 64px; height: 64px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.cat-thumb:hover { transform: scale(1.07); border-color: var(--accent); }

.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10, 7, 5, 0.93);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(960px, 94vw); }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 14px; box-shadow: 0 24px 90px rgba(0, 0, 0, 0.75); }
.lightbox figcaption { text-align: center; color: #e8dcc9; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 14px; font-size: 1.05rem; }
.menu-acc summary::-webkit-details-marker { display: none; }
.menu-acc summary .count { color: var(--muted); font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.82rem; font-weight: 400; text-transform: none; letter-spacing: 0; text-align: left; }
.menu-acc summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; font-weight: 400; }
.menu-acc details[open] summary::after { content: "–"; }
.menu-acc .items { padding: 0 22px 18px; }

.menu-item { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.menu-item:last-child { border-bottom: none; }
.menu-item .name { font-weight: 600; }
.menu-item .allergens { color: var(--muted); font-size: 0.75rem; vertical-align: super; }
.menu-item .desc { color: var(--muted); font-size: 0.88rem; font-weight: 400; }
.menu-item .dots { flex: 1; border-bottom: 1px dotted rgba(245, 235, 220, 0.22); transform: translateY(-4px); min-width: 20px; }
.menu-item .price { font-weight: 700; color: var(--gold); white-space: nowrap; }

.menu-note { margin-top: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; color: var(--muted); font-size: 0.85rem; }

/* ---------- Foto-Band ---------- */
.photo-band { overflow: hidden; padding: 10px 0 88px; }
.photo-band .track { display: flex; gap: 16px; width: max-content; animation: band-scroll 45s linear infinite; }
.photo-band figure { width: 340px; height: 230px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; flex-shrink: 0; background: linear-gradient(140deg, #33200f, #1c130b); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band .fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; text-align: center; padding: 10px; }
.photo-band figure.missing img { display: none; }
.photo-band figure.missing .fallback { display: flex; }
@keyframes band-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Bewertungen (ruhig, ohne Radial-Glow) ---------- */
.stars-band { padding: 88px 20px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stars-band .inner { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; }
.stars-band .rating { text-align: center; }
.stars-band .score { font-family: var(--display); font-weight: 600; font-size: clamp(4rem, 9vw, 6rem); line-height: 1; text-shadow: 0 0 36px rgba(233, 162, 59, 0.3); }
.stars-band .stars { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--gold); letter-spacing: 0.14em; margin: 6px 0; }
.stars-band .src { color: var(--muted); font-size: 0.9rem; }
.stars-band .src strong { color: var(--text); }

.review-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; position: relative; }
.review-card::before { content: "“"; position: absolute; top: -6px; left: 18px; font-size: 4.4rem; color: var(--gold); opacity: 0.5; font-family: Georgia, serif; line-height: 1; }
.review-card p { font-size: 1.06rem; color: #eadfcb; font-style: italic; }
.review-card .who { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 0.9rem; }
.review-card .who .mini-stars { color: var(--gold); letter-spacing: 0.1em; }
.review-card.slot { border-style: dashed; border-color: rgba(233, 162, 59, 0.4); }
.review-card.slot p { color: var(--muted); font-style: normal; }

/* ---------- Anfahrt ---------- */
.anfahrt-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; margin-top: 34px; align-items: stretch; }

.map-box {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 340px;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(245, 235, 220, 0.05) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(245, 235, 220, 0.05) 38px 39px),
    linear-gradient(140deg, #241a10, #17110b);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-box .consent { text-align: center; padding: 24px; max-width: 40ch; }
.map-box .consent .pin { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.map-box .consent p { color: var(--muted); font-size: 0.88rem; margin: 10px 0 16px; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.anfahrt-info { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.anfahrt-info h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hours-table td { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.hours-table td:last-child { text-align: right; color: var(--muted); }
.hours-table tr:last-child td { border-bottom: none; }
.hours-table tr.today td { color: var(--gold); font-weight: 700; }
.anfahrt-info a { color: var(--gold); text-decoration: none; font-weight: 600; }
.anfahrt-info a:hover { color: var(--accent-hover); }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--line); padding: 44px 0 30px; background: var(--surface); }
footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 26px; }
footer h4 { font-size: 0.95rem; margin-bottom: 10px; color: var(--gold); }
footer p, footer a { color: var(--muted); font-size: 0.92rem; text-decoration: none; }
footer a:hover { color: var(--text); }
footer .fineprint { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; }
footer .demo-note { margin-top: 14px; color: var(--muted); font-size: 0.8rem; }

/* ---------- Sticky Mobile-Bar ---------- */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 6px 12px;
  padding-bottom: max(4px, calc(env(safe-area-inset-bottom) - 30px));
}
.mobile-bar a { flex: 1; text-align: center; padding: 12px 8px; font-size: 1.05rem; }

/* ---------- Formular (bestellen.html) ---------- */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; margin-top: 34px; }
.order-items { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.order-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.order-item .oi-name { font-weight: 600; flex: 1; }
.order-item .oi-name small { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.order-item .oi-price { color: var(--gold); font-weight: 600; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.stepper button:hover { background: var(--accent); border-color: var(--accent); }
.stepper .qty { min-width: 22px; text-align: center; font-weight: 700; }
.order-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: sticky; top: var(--panel-off, 84px); max-height: calc(100vh - var(--panel-off, 100px) - 18px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(233, 162, 59, 0.45) transparent; }
.order-panel::-webkit-scrollbar { width: 8px; }
.order-panel::-webkit-scrollbar-thumb { background: rgba(233, 162, 59, 0.4); border-radius: 99px; }
.order-panel::-webkit-scrollbar-track { background: transparent; }
.order-panel h3 { margin-bottom: 14px; font-size: 1.1rem; }
.summary-list { list-style: none; margin-bottom: 12px; }
.summary-list li { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.92rem; padding: 3px 0; }
.summary-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 18px; }
.summary-total .amount { color: var(--gold); }

/* Hinweis, solange die Online-Bestellung stillgelegt ist (bis Stripe live geht) */
.pausen-hinweis { margin: 10px 0 0; font-size: .85rem; line-height: 1.45; color: var(--muted);
  background: rgba(232,88,43,.10); border: 1px solid rgba(232,88,43,.35);
  border-radius: 10px; padding: 10px 12px; }
.pausen-hinweis[hidden] { display: none; }
.pausen-hinweis a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.order-submit:disabled { opacity: .45; cursor: not-allowed; }

/* Erstbesteller-Rabatt: sitzt zwischen Positionsliste und Gesamtsumme */
.summary-rabatt { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .92rem; color: var(--accent); font-weight: 600; padding: 8px 0 2px; }
.summary-rabatt[hidden] { display: none; }
/* Solange keine E-Mail dasteht, ist der Rabatt eine Einladung und kein Betrag.
   Deshalb hier zurückgenommen: kein Akzentton, damit es nicht wie eine Gutschrift aussieht. */
.summary-rabatt.is-hinweis { color: var(--muted); font-weight: 500; font-size: .86rem; }

/* Produktinfo sitzt oben rechts IM Gericht-Fenster, nicht auf der Karte (Julian 16.08.).
   Auf der Karte fiel der Knopf zu stark auf und machte die Liste unruhig; hier steht er
   dort, wo man ihn beim Zusammenstellen braucht, und die Pflichtangabe bleibt vor der
   Bestellung erreichbar. Deshalb bekommen auch Getränke ein Fenster. */
.oi-info { padding: 0; background: none; border: 0; font: inherit; font-size: .78rem;
  font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; white-space: nowrap; }
.oi-info:hover, .oi-info:focus-visible { color: var(--gold); }
.om-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.om-serie { margin-top: 10px; font-size: .84rem; font-weight: 700; color: var(--gold); }
.opt-alle { display: block; width: 100%; margin-top: 8px; background: transparent;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: inherit;
  font-size: .88rem; padding: 9px 14px; cursor: pointer; }
.opt-alle:hover, .opt-alle:focus-visible { border-color: var(--accent); color: var(--text); }
/* Das Artikelinfo-Fenster liegt ÜBER dem Gericht-Fenster, sonst verdeckt es das. */
#infoModal { z-index: 1300; }
/* Inhalt des Artikelinfo-Fensters */
.info-name { color: var(--gold); font-weight: 700; margin-top: 2px; }
.info-note { font-size: .78rem; line-height: 1.5; color: var(--muted); margin: 12px 0 2px; }
.info-head { font-weight: 700; margin-top: 16px; }
.info-list { list-style: none; margin: 6px 0 0; padding: 0; }
.info-list li { font-size: .86rem; line-height: 1.45; color: var(--muted);
  padding: 6px 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list li small { display: block; font-size: .82em; opacity: .75; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea, .field select { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--text); font-size: 0.98rem; font-family: inherit; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.field input::-webkit-calendar-picker-indicator { filter: invert(0.8); }
.legal-hint { color: var(--muted); font-size: 0.8rem; margin: 12px 0 0; }
.btn.order-submit { width: 100%; font-size: 1.02rem; padding: 14px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Sprach-Bestellung ---------- */
.voice-order {
  margin: 20px 0 26px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(232, 88, 43, 0.1), var(--surface));
  border: 1px solid rgba(232, 88, 43, 0.4);
  border-radius: 16px;
}
.voice-order .vo-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.voice-order .vo-head span { color: var(--muted); font-size: 0.9rem; }

/* Die Knoepfe sind bewusst gross und ueber die volle Breite: sie werden im Stehen,
   einhaendig und oft mit dem Daumen bedient. */
.voice-order .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; font-size: 1rem; }
.voice-order .btn .ico { width: 20px; height: 20px; flex: 0 0 auto; }
.vo-idlehint { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; }

/* Aufnahme: Punkt, Wort und Uhr stehen zusammen. Rot allein traegt die Aussage nicht,
   deshalb steht „Aufnahme läuft" immer daneben. */
.vo-status { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vo-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff3b2f; flex: 0 0 auto; animation: vo-puls 1.4s ease-in-out infinite; }
@keyframes vo-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }
.vo-statustext { font-weight: 700; letter-spacing: 0.01em; }
.vo-time { margin-left: auto; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.vo-say { margin: 0 0 12px; color: var(--muted); font-size: 0.92rem; }
.vo-say.warn { color: var(--gold); }
.vo-say.warn strong { color: var(--gold); }
.vo-live { margin: 0 0 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: #e8dcc9; font-style: italic; max-height: 7.5em; overflow-y: auto; overscroll-behavior: contain; }
.vo-stop { background: #d4544a; }

/* Verarbeitung */
.vo-work { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.vo-sub { color: var(--muted); font-size: 0.9rem; }
.vo-spin { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(246, 238, 225, 0.25); border-top-color: var(--accent); animation: vo-dreh 0.8s linear infinite; }
@keyframes vo-dreh { to { transform: rotate(360deg); } }

/* Ergebnis */
.vo-donetitle { display: block; margin-bottom: 10px; }
.vo-donebody { margin-bottom: 14px; }
.vo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vo-list li { display: flex; gap: 10px; align-items: baseline; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.vo-qty { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.vo-dish { color: var(--text); }
.vo-note { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; }
.vo-note strong { color: var(--text); }
.vo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .vo-dot, .vo-spin { animation: none; }
}
@media (max-width: 520px) {
  .voice-order { padding: 15px 14px; }
  .vo-live { max-height: 5.5em; }
  /* Auf dem Handy wird mit dem Daumen getippt: da darf der Knopf die ganze Breite haben. */
  .voice-order .btn { width: 100%; }
  .vo-actions { flex-direction: column; align-items: stretch; }
}
/* iPhone SE und Mini: der ganze Aufnahmezustand muss auf einen Blick passen */
@media (max-width: 380px) {
  .vo-live { max-height: 4.2em; }
  .voice-order .btn { padding: 14px 16px; }
}

/* ---------- Zahlungs-Demo ---------- */
.pay-choice { margin: 4px 0 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.pay-choice .pc-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
.pay-opt { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 0.95rem; cursor: pointer; }
.pay-opt input { accent-color: var(--accent); width: 17px; height: 17px; }
.pay-opt.locked { opacity: 0.5; cursor: not-allowed; }
.pay-opt .stamm { background: var(--gold); color: #1c130c; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.05em; }
.pay-hint { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.pay-hint.ok { color: var(--green); }

/* PayPal (Demo) */
.pp-logo { font-weight: 800; font-style: italic; letter-spacing: -0.02em; color: #0a9fe0; }
.pp-logo i { color: #6ec6f0; font-style: italic; }
.pp-logo.big { font-size: 1.15rem; }
.pp-btn {
  width: 100%;
  background: #ffc439;
  color: #111;
  border: none;
  border-radius: 999px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.15s ease;
}
.pp-btn:hover { filter: brightness(1.06); }
.pp-btn:disabled { filter: grayscale(0.4); cursor: wait; }
.pp-note { color: var(--muted); font-size: 0.85rem; margin-bottom: 12px; }

.pay-modal {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(10, 7, 5, 0.9);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pay-modal[hidden] { display: none; }
.pay-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
.pay-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.pay-head .pay-brandrow { margin-left: auto; color: var(--muted); font-size: 0.75rem; font-weight: 400; }
.pay-amount { font-family: var(--display); font-weight: 600; font-size: 2rem; color: var(--gold); margin: 6px 0 14px; }
.pay-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-cancel { display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--muted); font: inherit; font-size: 0.88rem; cursor: pointer; text-decoration: underline; }
.pay-note { margin-top: 12px; text-align: center; color: var(--muted); font-size: 0.75rem; }
.pay-success {
  position: absolute; inset: 0; border-radius: 18px;
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
}
.pay-success[hidden] { display: none; }
.pay-success .check {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Jobs-Seite ---------- */
.job-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 44px; }
.job-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 18px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(232, 88, 43, 0.15); }
.job-card .j-emoji { font-size: 1.7rem; }
.job-card h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.08rem; }
.job-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; flex: 1; }
.job-card .j-cta { color: var(--gold); font-weight: 600; font-size: 0.9rem; }
.job-form-wrap { max-width: 720px; }
.job-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.job-form-grid .jf-full { grid-column: 1 / -1; }
@media (max-width: 880px) {
  .job-cards { grid-template-columns: 1fr 1fr; }
  .job-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .job-cards { grid-template-columns: 1fr; } }

/* ---------- Bestell-Kino-Hero (Titel steht von Anfang an, Video kompakt, sanfter Scroll am Ende) ---------- */
/* Kompakter Seitenkopf der Bestellseite (25.07., ersetzt das Spot-Video) */
.order-head {
  position: relative;
  padding: 44px 20px 26px;
  background: radial-gradient(120% 140% at 12% 0%, rgba(232, 88, 43, 0.16) 0%, rgba(232, 88, 43, 0) 58%), var(--bg);
  border-bottom: 1px solid var(--line);
}
.order-head .wrap { max-width: 1240px; }
.order-head .kicker { display: inline-block; color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 8px; }
.order-head .title { font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05; margin: 0 0 8px; }
.order-head .lead { color: var(--muted); font-size: 1.02rem; margin: 0; max-width: 46ch; }

.order-hero { position: relative; overflow: hidden; height: clamp(340px, 52vh, 520px); background: var(--bg); }
.order-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-hero .hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(22px, 5vh, 48px);
  pointer-events: none;
}
.hero-overlay .wrap {
  width: 100%; max-width: 820px;
  margin: 0; margin-left: max(20px, calc((100vw - 1100px) / 4));
  padding: 0;
}
.hero-overlay .kicker,
.hero-overlay .title,
.hero-overlay .head-bonus { text-shadow: 0 3px 24px rgba(0, 0, 0, 0.75); }
.hero-overlay .title { margin: 8px 0 6px; }
.hero-overlay p.lead { color: #e8dcc9; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.head-bonus { font-size: clamp(1rem, 2.2vw, 1.25rem); margin: 2px 0 8px; }
.head-bonus strong { color: var(--gold); }
.hero-overlay .head-bonus { font-size: clamp(1.2rem, 2.8vw, 1.65rem); margin: 4px 0 10px; }

/* ---------- Video-Spot ---------- */
.video-spot { position: relative; border-radius: var(--radius); overflow: hidden; margin: 26px 0 10px; border: 1px solid var(--line); }
.video-spot video { width: 100%; display: block; }
.video-spot .vs-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 18px 22px;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 13, 9, 0.78));
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 2rem);
  text-transform: uppercase; letter-spacing: 0.03em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* ---------- Rechtsseiten ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 64px 20px; }
.legal h1 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 2rem; margin-bottom: 20px; }
.legal h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--muted); font-size: 0.95rem; }
.legal .vom-user { color: var(--gold); background: rgba(233, 162, 59, 0.08); padding: 2px 6px; border-radius: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  section.block { padding: 64px 0; }
  .topbar { flex-direction: column-reverse; }
  .demo-ribbon { font-size: 0.68rem; padding: 4px 8px; }
  .hero {
    min-height: 88vh;
    min-height: 88dvh;
    background:
      url("assets/fotos/hero-shot-mobile.webp") center top / cover no-repeat,
      linear-gradient(160deg, #2a1a10 0%, #120d09 70%);
  }
  .hero .hero-video { object-position: 62% top; }
  .hero::before {
    background: linear-gradient(180deg, rgba(18, 13, 9, 0.15) 0%, rgba(18, 13, 9, 0.05) 24%, rgba(18, 13, 9, 0.58) 56%, rgba(18, 13, 9, 0.93) 84%, var(--bg) 100%);
  }
  .hero .display { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.06; }
  /* Aktions-Pill mobil ans Ende des Hero-Blocks (nicht übers Laden-Schild im Video) */
  .hero .wrap { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-toprow { display: contents; }
  .hero-toprow .promo-banner { order: 10; margin: 16px 0 0; font-size: 0.84rem; gap: 8px; padding: 8px 14px 8px 10px; flex-wrap: wrap; }
  .hero-toprow .promo-banner .p-badge { font-size: 0.74rem; padding: 3px 10px; }
  .hero p.sub { font-size: 0.95rem; margin-bottom: 16px; }
  .hero .cta-row .textlink { display: none; }
  .info-strip { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .menu-cards { grid-template-columns: 1fr 1fr; }
  .menu-acc summary { grid-template-columns: 52px 1fr 92px 18px; gap: 10px; font-size: 1.02rem; }
  .cat-thumb { width: 52px; height: 52px; border-radius: 10px; }
  .ticker { padding: 10px 0; }
  .ticker .track { font-size: 0.85rem; }
  .stars-band .inner { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .anfahrt-grid { grid-template-columns: 1fr; }
  .order-grid { grid-template-columns: 1fr; }
  .order-panel { position: static; max-height: none; overflow: visible; }
  /* Topbar mobil: alles in EINER Zeile (Wortmarke nowrap + kompaktere Elemente) */
  .brand { font-size: 1.12rem; letter-spacing: 0.06em; white-space: nowrap; }
  .nav { padding: 10px 14px; }
  .nav nav { gap: 9px; }
  .nav a.link { font-size: 0.85rem; }
  .lang-btn { padding: 5px 10px; font-size: 0.78rem; }
  .nav .btn.small { padding: 8px 13px; font-size: 0.85rem; }
  .nav a.link.hide-m { display: none; }
  .mobile-bar { display: flex; }
  .photo-band figure { width: 260px; height: 180px; }
}

/* ---------- Treue-Banner ---------- */
.loyalty {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(100deg, rgba(233, 162, 59, 0.13), rgba(232, 88, 43, 0.08));
  border: 1px solid rgba(233, 162, 59, 0.35);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.loyalty .lico { flex-shrink: 0; width: 30px; height: 30px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loyalty .l-text { font-size: 0.98rem; }
.loyalty .l-text strong { color: var(--gold); }
.loyalty .l-text small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.loyalty.slim { margin-top: 20px; }
.loyalty .l-cta { margin-left: auto; white-space: nowrap; }
@media (max-width: 620px) {
  .loyalty { flex-wrap: wrap; }
  .loyalty .l-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* ---------- Werbe-Einwilligung ---------- */
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 16px;
  cursor: pointer;
}
.consent-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }

/* ---------- Linien-Icons (ersetzen Emojis) ---------- */
.ico {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
  display: inline-block;
}
.ico.big { width: 2.2rem; height: 2.2rem; stroke-width: 1.6; color: var(--accent); }
.ico.mid { width: 1.6rem; height: 1.6rem; stroke-width: 1.8; color: var(--muted); }
.star-ico { width: 1.15em; height: 1.15em; fill: var(--gold); stroke: none; vertical-align: -0.15em; }
.star-row { display: inline-flex; gap: 3px; }

/* Teilweise gefuellter Stern. Zwei Lagen uebereinander: unten fuenf blasse Sterne, darueber
   dieselben in Gold, in der Breite auf die Note zugeschnitten. Bei 4,7 ist der fuenfte Stern
   also zu 70 Prozent gold. Vorher waren alle fuenf voll, egal welche Note danebenstand.
   Die Breite der oberen Lage setzt theme.js aus dem Live-Wert von Google. */
.star-anteil { position: relative; display: inline-block; line-height: 1; }
.star-anteil .star-leer .star-ico { fill: rgba(255, 255, 255, 0.17); }
.star-anteil .star-voll {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  white-space: nowrap;
}
.g-badge { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }

/* ---------- Bewertungs-Slider ---------- */
.rev-slider { min-width: 0; }
.rev-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-track .review-card { flex: 0 0 100%; scroll-snap-align: start; }
/* Pfeile links und rechts der Punkte. Bewusst NICHT in Gold: der aktive Punkt ist auf
   dieser Fläche bereits das goldene Ereignis, ein zweites daneben nähme ihm die Wirkung. */
.rev-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.rev-arrow {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 235, 220, 0.18);
  background: rgba(245, 235, 220, 0.06);
  color: var(--cream);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
}
/* Hover baut Material aus, verschiebt nichts: der Knopf bleibt genau da, wo der Finger ist. */
.rev-arrow:hover { background: rgba(245, 235, 220, 0.14); border-color: rgba(245, 235, 220, 0.34); }
.rev-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rev-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rev-dots { display: flex; gap: 8px; justify-content: center; }
.rev-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(245, 235, 220, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.rev-dots button.active { background: var(--gold); transform: scale(1.3); }
.review-card .who .g-line { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Bestellseite: Karten-Grid (Shop-Struktur im Glut-Look) ---------- */
.catbar { position: sticky; z-index: 40; display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; margin: 2px 0 4px; background: var(--bg); scrollbar-width: none; }
.catbar::-webkit-scrollbar { display: none; }
.catbar a { flex-shrink: 0; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; color: var(--text); font-size: 0.85rem; white-space: nowrap; background: var(--surface); text-decoration: none; }
.catbar a:hover { border-color: var(--accent); }
.catbar a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dish-cat { margin-top: 26px; }
.dish-cat > h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.18rem; margin-bottom: 12px; }
.dish-cat > h3 small { color: var(--muted); font-family: inherit; font-size: 0.75rem; letter-spacing: 0.08em; margin-left: 8px; }
.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dish { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s; }
.dish:hover { border-color: rgba(233, 162, 59, 0.5); }
.dish.order-item { align-items: stretch; padding: 0; gap: 0; }
.oi-ph { height: 118px; position: relative; background: linear-gradient(140deg, #3a2413, #221910); flex-shrink: 0; }
.oi-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oi-ph .fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--muted); font-size: 0.8rem; }
.oi-ph.missing img { display: none; }
.oi-ph.missing .fallback { display: flex; }
.oi-body { padding: 12px 14px 4px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dish .oi-name { flex: initial; }
.dish .oi-price { margin-top: auto; }
.oi-action { padding: 10px 14px 14px; }
.oi-select { display: block; width: 100%; border: 1px solid var(--accent); background: none; color: var(--accent); font-family: inherit; font-size: 0.95rem; font-weight: 700; border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.oi-select:hover { background: var(--accent); color: #fff; }
.dish .stepper { display: none !important; } /* Menge läuft jetzt über Options-Dialog + Warenkorb-Panel, Badge zeigt Anzahl */
.oi-instore { display: block; text-align: center; color: var(--muted); font-size: 0.85rem; border: 1px dashed var(--line); border-radius: 10px; padding: 9px 10px; }
.drink-note { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, rgba(233, 162, 59, 0.14), rgba(0, 0, 0, 0)); border: 1px solid rgba(233, 162, 59, 0.55); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; }
.drink-note .dn-ico { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Getränke: Kachel-Grid (kein Umbruch-Chaos, Çay als bestellbare Kachel zuerst) */
.drink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* .dish.drink-tile schlägt .dish.order-item{padding:0} (gleiche Spezifität, später) — sonst kollabiert das Kachel-Padding */
.drink-tile, .dish.drink-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 5px; }
.drink-tile .dt-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.drink-tile .dt-name small { display: block; color: var(--muted); font-weight: 400; font-size: 0.78rem; margin-top: 3px; }
.drink-tile .dt-price { color: var(--gold); font-weight: 700; font-size: 1rem; margin-top: auto; padding-top: 12px; }
/* Button eingerückt mit Freiraum rundum, gleiche Kante wie der Text (wie bei den Food-Karten) */
.drink-tile .oi-action { padding: 14px 0 0; }
.cay-tile { border-color: rgba(233, 162, 59, 0.55); }
/* Ausverkauft-Zustand (Demo per __soldOut(); echter Weg nach Deal: WhatsApp-Webhook) */
.dish.soldout { opacity: 0.55; }
.dish.soldout:hover { border-color: var(--line); }
.dish.soldout .oi-select { border-color: var(--line); color: var(--muted); background: none; cursor: default; }
.pay-opt .pay-txt { white-space: nowrap; }
.pay-head .lock-ico { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cat-desc { color: var(--muted); font-size: 0.88rem; margin: -6px 0 12px; }
.dish { position: relative; }
.oi-badge { position: absolute; top: 8px; right: 8px; z-index: 2; min-width: 26px; height: 26px; display: none; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.85rem; border-radius: 99px; padding: 0 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.dish.picked .oi-badge { display: inline-flex; }
.drink-list.cols { columns: 2; column-gap: 34px; }
.drink-list.cols .menu-item { break-inside: avoid; }
.summary-list li { align-items: center; }
.summary-list .sl-info small { display: block; color: var(--muted); font-size: 0.76rem; line-height: 1.3; }
.summary-list .sl-right { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.summary-list .sl-btn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 0.9rem; line-height: 1; cursor: pointer; padding: 0; }
.summary-list .sl-btn:hover { background: var(--accent); border-color: var(--accent); }
/* Options-Dialog (Sauce/Beilage/Sonderwunsch, Lieferando-Prinzip im Glut-Look) */
.opt-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(10, 7, 5, 0.72); backdrop-filter: blur(3px); }
.opt-modal[hidden] { display: none; }
.opt-card { width: min(430px, 94vw); max-height: 86vh; overflow-y: auto; background: linear-gradient(165deg, #261a12, #140e0a); border: 1px solid var(--line); border-radius: 18px; padding: 22px; scrollbar-width: thin; scrollbar-color: rgba(233, 162, 59, 0.45) transparent; }
.opt-card h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.25rem; }
.opt-card .op-price { color: var(--gold); font-weight: 700; margin-top: 2px; }
.opt-group { margin-top: 16px; }
.opt-group .og-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.opt-group .og-head strong { font-size: 0.98rem; }
.opt-group .og-req { font-size: 0.72rem; color: var(--gold); border: 1px solid rgba(233, 162, 59, 0.5); border-radius: 99px; padding: 1px 8px; }
.opt-group .og-req.opt { color: var(--muted); border-color: var(--line); }
.opt-group.missing .og-req { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 0.93rem; cursor: pointer; border-bottom: 1px dashed var(--line); }
.opt-row:last-child { border-bottom: none; }
.opt-row input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.opt-row .or-price { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.opt-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.opt-actions .btn { justify-content: center; }
.opt-cancel { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 6px; }
.opt-cancel:hover { color: var(--text); }
/* Gericht-Suche mit Vorschlägen */
.search-wrap { position: relative; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 2px 0 6px; }
.search-wrap:focus-within { border-color: var(--accent); }
.search-wrap .sw-ico { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.search-input { flex: 1; border: 0; background: none; color: var(--text); font-family: inherit; font-size: 0.98rem; outline: none; }
.search-input::placeholder { color: var(--muted); }
.search-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: linear-gradient(165deg, #261a12, #140e0a); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.search-drop .sd-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 0; background: none; color: var(--text); font-family: inherit; font-size: 0.93rem; padding: 10px 14px; cursor: pointer; border-bottom: 1px dashed var(--line); }
.search-drop .sd-item:last-child { border-bottom: none; }
.search-drop .sd-item:hover { background: rgba(232, 88, 43, 0.14); }
.search-drop .sd-p { color: var(--gold); font-weight: 600; white-space: nowrap; }
.search-drop .sd-empty { padding: 10px 14px; color: var(--muted); font-size: 0.9rem; }
.dish.flash { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); transition: box-shadow 0.3s; }
/* Beliebt-Reihe (horizontal scrollbar) */
.pop-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: rgba(233, 162, 59, 0.45) transparent; }
.pop-row::-webkit-scrollbar { height: 8px; }
.pop-row::-webkit-scrollbar-thumb { background: rgba(233, 162, 59, 0.4); border-radius: 99px; }
.pop-row .dish { width: 200px; flex-shrink: 0; }
@media (max-width: 880px) { .pop-row .dish { width: 165px; } }
@media (max-width: 880px) {
  .dish-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .oi-ph { height: 96px; }
  .oi-body { padding: 10px 11px 2px; }
  .oi-action { padding: 8px 11px 11px; }
  .drink-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- Reduzierte Bewegung (Pflicht) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Helle Version (Umschalter ☀/🌙 in der Topbar, theme.js, localStorage 'hg-theme') ----------
   Prinzip: gleiche Seite, gleiche Struktur, nur die Farbwelt kippt. Videos/Fotos bleiben; Text ÜBER
   dunklem Video bleibt deshalb auch im hellen Modus hell (Hero-Ausnahmen unten). */
html.theme-light {
  --bg: #f7f1e6;
  --surface: #fffdf8;
  --surface-2: #f0e6d4;
  --line: rgba(59, 42, 24, 0.16);
  --text: #2c2115;
  --muted: #82705a;
  --accent: #d54e1f;
  --accent-hover: #bf4114;
  --neon: #e2331f;
  --gold: #a8731c;
  --green: #1f9e4f;
}
html.theme-light header.site { background: rgba(247, 241, 230, 0.94); }
html.theme-light .brand { text-shadow: none; animation: none; }
html.theme-light .btn { box-shadow: 0 3px 12px rgba(59, 42, 24, 0.16); }
html.theme-light .btn:hover { box-shadow: 0 0 0 2px rgba(59, 42, 24, 0.22), 0 8px 18px rgba(59, 42, 24, 0.18); }
/* Hero (Startseite): Nachtvideo bleibt dunkel → Text darüber bleibt hell, Neon bleibt Neon */
html.theme-light .hero { color: #f6eee1; }
html.theme-light .hero .display .hot { color: #ff3b2f; }
html.theme-light .hero .textlink { color: #d9c9ae; }
html.theme-light .hero .textlink:hover { color: #f6eee1; }
/* Bestell-Hero + Video-Spot: gleiche Ausnahme (Text über dunklem Video) */
html.theme-light .hero-overlay { color: #f6eee1; }
html.theme-light .hero-overlay .kicker { color: #e8582b; }
html.theme-light .video-spot .vs-overlay { color: #f6eee1; }
/* Platzhalter-Flächen: von Glut-Dunkel auf warmes Hell */
html.theme-light .menu-card .ph,
html.theme-light .oi-ph { background: linear-gradient(140deg, #ead9bf, #f7f1e6); }
html.theme-light .photo-band figure { background: linear-gradient(140deg, #e8d5b8, #f2e8d6); }
html.theme-light .map-box {
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(59, 42, 24, 0.06) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(59, 42, 24, 0.06) 38px 39px),
    linear-gradient(140deg, #f2e8d6, #e9dcc4);
}
/* Dialog-/Dropdown-Flächen mit hartem Dunkel-Gradient */
html.theme-light .opt-card,
html.theme-light .search-drop { background: linear-gradient(165deg, #fffdf8, #f4ecdd); }
html.theme-light .search-drop { box-shadow: 0 14px 40px rgba(59, 42, 24, 0.18); }
html.theme-light .pay-card { box-shadow: 0 30px 90px rgba(59, 42, 24, 0.3); }
html.theme-light .pp-card {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 88, 43, 0.1), rgba(255, 253, 248, 0)),
    linear-gradient(165deg, #fffdf8, #f4ecdd);
  box-shadow: 0 18px 60px rgba(59, 42, 24, 0.25), 0 0 34px rgba(232, 88, 43, 0.15);
}
html.theme-light .pp-close { color: #82705a; }
html.theme-light .pp-close:hover { color: #2c2115; background: rgba(59, 42, 24, 0.08); }
/* Harte helle Textfarben aus dem Dunkel-Design nachziehen */
html.theme-light .review-card p { color: #4a3a28; }
html.theme-light .vo-transcript { color: #5c4b36; }
html.theme-light .menu-item .dots { border-bottom-color: rgba(59, 42, 24, 0.3); }
html.theme-light .rev-dots button { background: rgba(59, 42, 24, 0.22); }
html.theme-light .rev-arrow { border-color: rgba(59, 42, 24, 0.2); background: rgba(59, 42, 24, 0.05); color: #3b2a18; }
html.theme-light .rev-arrow:hover { background: rgba(59, 42, 24, 0.11); border-color: rgba(59, 42, 24, 0.36); }
html.theme-light .field input::-webkit-calendar-picker-indicator { filter: none; }
html.theme-light .cart-bar { box-shadow: 0 8px 24px rgba(59, 42, 24, 0.28); }
html.theme-light .mobile-menu { box-shadow: 0 12px 30px rgba(59, 42, 24, 0.18); }

/* ============ Mobil-Feinschliff + neue Komponenten (24.07.) ============ */

/* Erstkunden-/Treue-Angebot (Desktop + Mobil, beide Themes) */
.offer { margin-top: 20px; border: 1px solid rgba(232, 88, 43, 0.45); border-radius: var(--radius); overflow: hidden; }
.offer-main { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; background: linear-gradient(100deg, #e8582b, #d2431a); padding: 15px 20px; transition: filter 0.15s ease; }
.offer-main:hover { filter: brightness(1.06); }
.off-badge { background: #fff; color: #c33f16; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.off-head { font-size: 1.05rem; line-height: 1.3; }
.off-head strong { font-weight: 800; }
.off-cta { margin-left: auto; white-space: nowrap; font-weight: 700; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.55); padding: 9px 16px; border-radius: 999px; flex-shrink: 0; }
.offer-sub { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.offer-sub .lico { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.offer-sub strong { color: var(--gold); }

/* Burger-Menü + Warenkorb-Leiste: Standard aus (nur mobil an) */
.menu-btn { display: none; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 1.2rem; line-height: 1; padding: 6px 11px; cursor: pointer; }
.mobile-menu { display: none; }
.cart-dock { display: none; }
.panel-close { display: none; }
.cart-backdrop { display: none; }

@media (max-width: 880px) {
  /* --- Topbar: Nav-Links durch Burger-Menü ersetzen --- */
  header.site { position: relative; }
  .nav a.link { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .mobile-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); max-height: 0; overflow: hidden; transition: max-height 0.26s ease; }
  .mobile-menu.open { max-height: 460px; }
  .mobile-menu a { display: block; padding: 14px 22px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .mobile-menu a:last-child { border-bottom: none; }

  /* --- Hero: kürzer (mehr Laden, weniger erschlagend), stabile Höhe (kein Zoom-beim-Scrollen), Schleier weg --- */
  .hero { min-height: 46vh; }  /* flacher = weniger Seiten-Beschnitt am breiten Video = mehr vom Hero-Shot sichtbar (rausgezoomt) */
  .hero::before { background: linear-gradient(180deg, rgba(18, 13, 9, 0.95) 0%, rgba(18, 13, 9, 0.6) 12%, rgba(18, 13, 9, 0.15) 34%, rgba(18, 13, 9, 0.2) 56%, rgba(18, 13, 9, 0.66) 76%, rgba(18, 13, 9, 0.93) 90%, var(--bg) 100%); }
  .hero .hero-video { object-position: 56% center; }
  .hero .wrap { padding-bottom: 22px; }
  .hero .display { margin: 8px 0 8px; }
  .hero p.sub { margin-bottom: 6px; }
  /* Entrümpeln: Telefon- und Route-Button raus (Anrufen steht oben, „Jetzt bestellen" unten) */
  .hero .cta-row { display: none; }

  /* --- Hero-Aktions-Pill: eine Zeile, flacher --- */
  .hero-toprow .promo-banner { flex-wrap: nowrap; font-size: 0.78rem; padding: 6px 13px 6px 8px; gap: 7px; max-width: 100%; }
  .hero-toprow .promo-banner .p-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-toprow .promo-banner .p-badge { font-size: 0.68rem; padding: 3px 9px; }
  .hero-toprow .promo-banner .p-when { display: none; }

  /* --- Angebot mobil: zwei getrennte Boxen, sehr aneinander (Erstkunden wieder klein, Treue eigenständig) --- */
  .offer { display: flex; flex-direction: column; gap: 6px; border: 0; overflow: visible; }
  .offer-main { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; border-radius: var(--radius); }
  .off-badge { order: 1; }
  .off-head { order: 2; flex: 0 0 auto; font-size: 1rem; }
  .off-cta { order: 3; margin-left: 0; width: 100%; text-align: center; padding: 6px 16px; }
  .offer-sub { padding: 14px 16px; border: 1px solid rgba(232, 88, 43, 0.45); border-radius: var(--radius); }

  /* --- Bewertungen: vertikale Abstände deutlich raus --- */
  .stars-band { padding: 32px 18px; }
  .stars-band .inner { gap: 14px; }
  .review-card { padding: 26px 20px 14px; }
  .review-card::before { top: 6px; left: 16px; font-size: 3rem; }
  .review-card .who { margin-top: 10px; }
  .rev-nav { margin-top: 10px; gap: 10px; }
  .rev-arrow { width: 34px; height: 34px; }

  /* --- Bestellseite: Aktions-Pill eine Zeile; Abstände Suche/Kategorie/Beliebt --- */
  .menu-promo { font-size: 0.78rem; padding: 8px 12px; gap: 8px; margin-bottom: 22px; white-space: nowrap; overflow: hidden; }
  .menu-promo .mp-badge { font-size: 0.62rem; padding: 2px 7px; }
  .dish-cat { margin-top: 12px; }

  /* Bestell-Hero mobil kleiner (wie Desktop-Verhältnis), Video tiefer beschnitten (weniger Himmel) */
  .order-hero { height: clamp(184px, 29vh, 245px); }
  /* Mobil wie Desktop reinzoomen: mittleres Videoband (Oberkörper), Beine/Unterkörper raus */
  .order-hero video { object-position: center 50%; transform: scale(1.5); transform-origin: center 50%; }
  .hero-overlay .head-bonus { font-size: clamp(1rem, 4.4vw, 1.3rem); margin: 3px 0 6px; }

  /* --- Bestell-Panel als Slide-up-Sheet statt statisch ganz unten --- */
  .order-panel { position: fixed; inset: 0; z-index: 1450; width: 100%; max-height: none; height: 100%; border: none; border-radius: 0; transform: translateY(100%); transition: transform 0.28s ease; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 54px) 20px calc(env(safe-area-inset-bottom) + 24px); }
  .order-panel.open { transform: none; }
  .panel-close { display: flex; align-items: center; justify-content: center; position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 14px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .cart-backdrop { display: block; position: fixed; inset: 0; z-index: 1440; background: rgba(10, 7, 5, 0.6); }
  .cart-backdrop[hidden] { display: none; }

  /* --- Warenkorb-Dock unten: deckt den Rest ab (wie die „Jetzt bestellen"-Leiste), Pill im Lieferando-Stil, tief an der URL --- */
  .cart-dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: var(--bg); border-top: 1px solid var(--line); padding: 6px 12px max(4px, calc(env(safe-area-inset-bottom) - 30px)); }
  .cart-dock[hidden] { display: none; }
  .cart-bar { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 13px; padding: 11px 14px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
  .cart-bar .cb-left { display: inline-flex; align-items: center; gap: 7px; }
  .cart-bar .cb-ico { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .cart-bar .cb-count { background: rgba(255, 255, 255, 0.24); border-radius: 8px; min-width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; padding: 0 7px; font-size: 0.95rem; }
  .cart-bar .cb-label { flex: 1; text-align: center; font-size: 1.05rem; }
  .cart-bar .cb-total { white-space: nowrap; font-weight: 800; }
  body.has-cartbar { padding-bottom: 78px; }
}

/* ============ Runde 3 (24.07.): eigene Icons, Burger links, Theme im Menü, Notiz je Position ============ */

/* Flammen-/Icon in den Aktions-Badges (statt Emoji, füllt in Badge-Textfarbe) */
.badge-ico { width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 4px; }
.badge-ico path { fill: currentColor; }

/* Burger-Knopf links neben der Wortmarke gruppieren */
.nav-left { display: flex; align-items: center; gap: 11px; }

/* Theme-Umschalter wandert ins Burger-Menü (Standard versteckt, mobil sichtbar) */
.mm-theme-row { display: none; }

/* ===== Sprach-Auswahl (25.07.): Eingesprochenes erscheint oben und wird von dort konfiguriert ===== */
.voice-picks { border: 1px solid var(--accent); border-radius: var(--radius); background: linear-gradient(160deg, rgba(232, 88, 43, 0.12), rgba(0, 0, 0, 0)); padding: 14px 16px; margin: 0 0 18px; }
.voice-picks[hidden] { display: none; }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vp-head strong { font-size: 0.98rem; }
/* Jeder Vorschlag hat sein eigenes Kreuz zum Verwerfen. Der frühere Sammelknopf
   „Liste leeren" ist raus: er räumte nur diesen Zwischenstapel weg, nicht die Bestellung,
   und genau das hat niemand erwartet. */
.vp-row { display: inline-flex; align-items: stretch; }
.vp-row .vp-item { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.vp-x { background: var(--surface); border: 1px solid var(--line); border-left: 0;
  border-top-right-radius: 12px; border-bottom-right-radius: 12px; color: var(--muted);
  font: inherit; font-size: 1.05rem; line-height: 1; padding: 0 11px; cursor: pointer; }
.vp-x:hover, .vp-x:focus-visible { border-color: var(--accent); color: var(--text); }
.vp-row.done .vp-item, .vp-row.done .vp-x { opacity: 0.55; border-style: dashed; }
.vp-list { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-item { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; color: var(--text); font: inherit; font-size: 0.92rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.vp-item:hover { border-color: var(--accent); }
.vp-item .vp-qty { color: var(--gold); font-weight: 800; }
.vp-item .vp-name { font-weight: 600; }
.vp-item .vp-state { color: var(--accent); font-size: 0.82rem; font-weight: 700; }
.vp-item.done { opacity: 0.55; cursor: default; border-style: dashed; }
.vp-item.done .vp-state { color: var(--muted); font-weight: 500; }
.vp-hint { color: var(--muted); font-size: 0.84rem; margin: 10px 0 0; }

/* Notiz je Warenkorb-Position (im Sheet, Lieferando-Prinzip) */
.sl-note-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: inherit; font-size: 0.82rem; padding: 5px 12px; cursor: pointer; margin-top: 0; }
.sl-note-btn:hover { border-color: var(--accent); color: var(--text); }
.sl-note-btn .nt-ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-note-input { display: none; width: 100%; margin-top: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 0.9rem; }
.sl-note-input.open { display: block; }
/* Warenkorb-Zeile als sauberes Raster (25.07.): oben Gericht + Menge/Preis, darunter die Notiz-Zeile.
   Vorher lag der Notiz-Button als viertes Flex-Kind in derselben Zeile und brach unschön um. */
.summary-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.summary-list li:last-child { border-bottom: none; }
.summary-list #emptyHint { display: block; border-bottom: none; }
.summary-list .sl-info { grid-column: 1; min-width: 0; line-height: 1.35; }
.summary-list .sl-right { grid-column: 2; justify-self: end; align-items: center; }
.summary-list .sl-note-btn { grid-column: 1 / -1; justify-self: start; }
.summary-list .sl-note-input { grid-column: 1 / -1; }

@media (max-width: 880px) {
  /* Theme-Button oben in der Leiste weg → wandert ins Burger-Menü */
  #themeBtn { display: none; }
  .mm-theme-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
  .mm-theme { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font: inherit; font-size: 0.92rem; padding: 7px 15px; cursor: pointer; }
  .mm-theme .ico { width: 1.1em; height: 1.1em; }

  /* Bestellseite: Angebot + Aktion höher; Suche/Kategorie tiefer, zum „Beliebt" gruppiert */
  #orderStart { padding-top: 14px !important; }
  #orderStart .offer { margin-top: 8px !important; }
  /* Roter Strich: klare Trennung Aktion → Suche; darunter Suche/Kategorie/Karten eng, vor „Beliebt" nur kleine Luft.
     #orderStart nötig, sonst schlägt der Inline-<style> in bestellen.html (.menu-promo margin-bottom 12) die Mobilregel. */
  #orderStart .menu-promo { margin-bottom: 44px; }
  .search-wrap { margin: 4px 0 6px; }
  .catbar { margin: 2px 0 4px; }
  .order-grid { margin-top: 6px; }
  .dish-cat { margin-top: 8px; }

  /* Warenkorb-Zeile mobil: gleiches Raster, etwas kompakter */
  .summary-list li { row-gap: 7px; padding: 9px 0; }
  .summary-list .sl-note-btn { margin-left: 0; }
  /* Kompakter Seitenkopf mobil */
  .order-head { padding: 26px 18px 18px; }
  .order-head .lead { font-size: 0.95rem; }
  /* Sprach-Auswahl mobil: Karten über die volle Breite, gut mit dem Daumen treffbar */
  .voice-picks { padding: 12px 14px; margin-bottom: 14px; }
  .vp-list { flex-direction: column; }
  .vp-item { width: 100%; justify-content: flex-start; padding: 12px 14px; }
  .vp-item .vp-state { margin-left: auto; }
  /* Rabatt-Preis passt immer in die Karte: Badge einheitlich auf eigener Zeile (Pille), Alt-/Neupreis am Stück darunter.
     #orderStart nötig, sonst schlägt der Inline-<style> (.oi-tag display:inline-block) die Regel. */
  .order-item .oi-price { display: block; white-space: normal; }
  .order-item .oi-price .oi-old, .order-item .oi-price .oi-new { white-space: nowrap; }
  #orderStart .order-item .oi-price .oi-tag { display: block; width: fit-content; margin: 0 0 3px; }
}