/* ============================================================
   Heimservice PWA — app.css
   Kein Tailwind, kein Build-Step. Vanilla CSS.
   ============================================================ */

:root {
  /* Modern Token-Set (Heimservice v0.3+) */
  --c-bg:        #f6f5f1;
  --c-surface:   #ffffff;
  --c-surface-2: #faf9f5;
  --c-ink:       #1a1f1a;
  --c-ink-soft:  #5a605a;
  --c-line:      #e6e3dc;

  /* Akzentfarbe — pro Partner via inline-style überschreibbar */
  --c-accent:        #9bb487;
  --c-accent-soft:   #c8d8b8;
  --c-accent-glow:   #e3edd5;

  --c-success: #5b9a6b;
  --c-warning: #d4a574;
  --c-danger:  #c47a8a;

  --font-display: 'Fraunces', Georgia, serif;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26,31,26,.04), 0 2px 8px rgba(26,31,26,.04);
  --shadow-md: 0 4px 16px rgba(26,31,26,.06), 0 16px 40px rgba(26,31,26,.05);

  /* Legacy-Aliasse (alte Selektoren weiter funktionsfähig halten) */
  --red:     var(--c-accent);
  --red-dk:  var(--c-ink);
  --dark:    var(--c-ink);
  --gray-50: var(--c-bg);
  --gray-100:var(--c-surface-2);
  --gray-200:var(--c-line);
  --gray-400:#a8aea4;
  --gray-500:var(--c-ink-soft);
  --gray-600:#3f4640;
  --gray-700:#2a2f2a;
  --white:   var(--c-surface);
  --nav-h:   64px;
  --topnav-h: 64px;
  --safe-b:  env(safe-area-inset-bottom, 0px);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: transparent; font: inherit; }
input, textarea, select { font: inherit; }

/* ── Layout ─────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: calc(var(--nav-h) + var(--safe-b));
}

/* ── Pages ──────────────────────────────────────────────── */
.page {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - var(--nav-h) - var(--safe-b));
  overflow-y: auto;
}
.page.active {
  display: flex;
}

/* ── Menu-Search ─────────────────────────────────────────── */
.menu-search {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px 8px;
  padding: 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.menu-search:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-glow);
}
.menu-search__icon { color: var(--c-ink-soft); flex-shrink: 0; }
.menu-search input {
  flex: 1; border: none; background: transparent;
  font: inherit; color: var(--c-ink);
  outline: none;
}
.menu-search input::placeholder { color: var(--c-ink-soft); }
.menu-search__clear {
  background: var(--c-surface-2);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 1rem; line-height: 1;
  color: var(--c-ink-soft);
  cursor: pointer;
}

/* Desktop-Layout (Top-Nav, zentrierter Inhalt, Raster) steht als
   mobile-first-Override am DATEIENDE — sonst überschreiben spätere
   Basis-Regeln (.product-grid, .nav-item …) die Media-Query-Regeln. */

/* ── App Header (modern, mit dezentem Glow) ─────────────── */
.app-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  color: var(--c-ink);
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.app-header__glow {
  position: absolute; pointer-events: none;
  inset: -40% -20% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--c-accent) 0%, transparent 65%);
  opacity: .25;
  filter: blur(40px);
  animation: app-header-glow 14s ease-in-out infinite alternate;
}
@keyframes app-header-glow {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-30px, 20px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .app-header__glow { animation: none; } }
.app-header__inner { position: relative; z-index: 1; }
.app-header h1 {
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
.app-header p {
  font-size: .82rem;
  color: var(--c-ink-soft);
  margin-top: 2px;
}

/* ── App-Header Branding (Icon + Wortmarke links, Status rechts) ── */
.app-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-brand__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.app-brand__icon {
  width: 44px; height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}
.app-brand__text { min-width: 0; }
.app-brand__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-pill, 999px);
  white-space: nowrap;
  line-height: 1;
}
.app-brand__status.is-open   { background: rgba(22,163,74,.12);  color: #15803d; }
.app-brand__status.is-closed { background: rgba(120,120,120,.14); color: var(--c-ink-soft); }
a.app-brand__left { color: inherit; text-decoration: none; }
.app-brand__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* ── Burger-Menü im Header ──────────────────────────────── */
.app-burger {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: rgba(255,255,255,.65);
  color: var(--c-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger-menu {
  position: fixed;
  right: 14px;
  z-index: 200;
  min-width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.burger-menu[hidden] { display: none; }
.burger-menu a,
.burger-menu button {
  display: block;
  padding: 11px 12px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-ink);
  text-align: left;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger-menu a:hover,
.burger-menu button:hover { background: var(--c-accent-glow); }
.app-brand__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
/* Desktop-Top-Nav: kleines Icon vor der Wortmarke */
.nav-brand__icon {
  width: 26px; height: 26px;
  object-fit: contain;
  margin-right: 8px;
  flex: 0 0 auto;
}

/* ── Bottom Nav ─────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: stretch;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: var(--gray-400);
  font-size: .65rem;
  font-weight: 500;
  transition: color .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:hover, .nav-item.active {
  color: var(--red);
}
.nav-item .nav-icon {
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
}
.nav-item .nav-icon svg { width: 22px; height: 22px; display: block; }
.nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--red);
  border-radius: 0 0 2px 2px;
}

/* ── Cart Badge ─────────────────────────────────────────── */
.cart-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--red);
  color: var(--white);
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  display: none;
}
.cart-badge.visible { display: flex; }

/* ── Category Tabs ──────────────────────────────────────── */
.cat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: sticky;
  top: 57px;
  z-index: 9;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--gray-200);
  font-size: .8rem;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  transition: all .15s;
  white-space: nowrap;
}
.cat-tab.active, .cat-tab:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

/* ── Product Grid ───────────────────────────────────────── */
.menu-section {
  padding: 0 16px;
}
.menu-section h2 {
  font-size: 1rem;
  font-weight: 700;
  padding: 16px 0 8px;
  color: var(--dark);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding-bottom: 16px;
}

/* ── Product Card ───────────────────────────────────────── */
.product-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}
.product-card:active { transform: scale(.97); }
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.product-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--gray-400);
}
.product-card__body {
  padding: 10px 10px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card__name {
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.3;
  color: var(--dark);
}
.product-card__desc {
  font-size: .72rem;
  color: var(--gray-500);
  margin-top: 3px;
  line-height: 1.35;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.product-card__price {
  font-weight: 700;
  font-size: .9rem;
  color: var(--red);
}
.product-card__add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
/* Echtes Produktbild (falls image_url gesetzt) — sonst Emoji-Platzhalter */
.product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ausverkauft: sichtbar, aber gedimmt und nicht bestellbar */
.product-card.is-soldout { opacity: .6; }
.product-card.is-soldout .product-card__add { display: none; }
.product-card__soldout {
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  align-self: flex-start;
}
/* M14: „Nur noch wenige verfügbar" — amber, Produkt bleibt bestellbar. */
.product-card__lowstock {
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 600;
  color: #92600a;
  background: #fdf0d5;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  align-self: flex-start;
}

/* ── Bild/Kompakt-Umschalter ────────────────────────────── */
.view-toggle {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 8px 16px 0;
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  transition: background .15s, color .15s, border-color .15s;
}
.view-toggle__btn[aria-pressed="true"] {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

/* ── Kompakt-Ansicht (dichte Preisliste ohne Bilder) ────── */
#menu-container[data-view="compact"] .product-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
#menu-container[data-view="compact"] .product-card {
  flex-direction: row;
  align-items: center;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--c-line);
}
#menu-container[data-view="compact"] .product-card:active { transform: none; }
#menu-container[data-view="compact"] .product-card:hover { box-shadow: none; }
#menu-container[data-view="compact"] .product-card__img { display: none; }
/* Kompakt: Name + Beschreibung links gestapelt, Preis/Add rechts.
   Grid statt Flex, damit die Beschreibungszeile (gerade ohne Foto der
   wertvollste Ort) unter dem Namen erscheint. */
#menu-container[data-view="compact"] .product-card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 11px 6px;
}
#menu-container[data-view="compact"] .product-card__name { grid-column: 1; font-size: .9rem; }
#menu-container[data-view="compact"] .product-card__desc {
  grid-column: 1;
  margin-top: 2px;
  -webkit-line-clamp: 1;   /* in der dichten Liste nur eine Zeile */
}
#menu-container[data-view="compact"] .product-card__footer {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0;
  gap: 12px;
  flex-shrink: 0;
}

/* Nav-Brand nur auf Desktop sichtbar (im mobilen Footer verborgen) */
.nav-brand { display: none; }

/* ── Modal Overlay ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  display: none;
}
.modal-overlay.open { display: flex; }

@media (min-width: 600px) {
  .modal-overlay { align-items: center; }
}

.modal-sheet {
  background: var(--white);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp .25s ease;
}
@media (min-width: 600px) {
  .modal-sheet {
    border-radius: 16px;
    max-width: 480px;
    max-height: 85vh;
  }
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.modal-header h3 { font-size: 1rem; font-weight: 700; }
.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.qty-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-100);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
}
.qty-btn:hover { background: var(--gray-200); }
.qty-val { font-weight: 700; min-width: 24px; text-align: center; }

/* ── Option rows ────────────────────────────────────────── */
.option-group h4 {
  font-weight: 600;
  font-size: .85rem;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.option-group + .option-group { margin-top: 16px; }
.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.option-row:last-child { border-bottom: none; }
.option-row label { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; font-size: .88rem; }
.option-row input { accent-color: var(--red); width: 16px; height: 16px; }
.option-surcharge { font-size: .8rem; color: var(--gray-600); white-space: nowrap; }

/* ── Cart Page ──────────────────────────────────────────── */
.cart-page {
  padding: 16px;
}
.cart-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--gray-400);
}
.cart-empty .cart-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.cart-item {
  background: var(--white);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name { font-weight: 600; font-size: .9rem; }
.cart-item__sub { font-size: .75rem; color: var(--gray-500); margin-top: 2px; }
.cart-item__remove { font-size: .7rem; color: var(--red); margin-top: 4px; display: inline-block; }
.cart-item__price { font-weight: 700; white-space: nowrap; font-size: .9rem; }
.cart-summary {
  background: var(--white);
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--gray-600);
  padding: 3px 0;
}
.cart-summary-row.total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--gray-100);
}

/* ── Forms ──────────────────────────────────────────────── */
.form-section { margin-bottom: 20px; }
.form-section h3 {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.form-group { margin-bottom: 12px; }
.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 4px;
}
.form-input {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .9rem;
  color: var(--dark);
  background: var(--white);
  transition: border-color .15s;
  outline: none;
}
.form-input:focus { border-color: var(--red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  font-size: .88rem;
  transition: border-color .15s, background .15s;
}
.radio-label:has(input:checked) {
  border-color: var(--red);
  background: #fdf2f2;
}
.radio-label input { accent-color: var(--red); }
.radio-label.disabled { opacity: .5; cursor: default; }
.error-box {
  background: #fde8e8;
  color: #9b1c1c;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
  margin-bottom: 12px;
  display: none;
}
.error-box.visible { display: block; }
.form-hint { display: block; font-size: .78rem; color: var(--gray-500); margin-top: 4px; }

/* ── WhatsApp-Opt-in ─────────────────────────────────────────
   DSGVO: Checkbox NIE vorausgewählt (kein checked, kein JS das
   sie in der Registrierung/Checkout setzt). EuGH C-673/17. */
.wa-optin {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1.5px solid #25d366;
  border-radius: 12px;
  background: rgba(37, 211, 102, .06);
  cursor: pointer;
}
.wa-optin input {
  margin-top: 1px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #25d366;
  cursor: pointer;
}
.wa-optin__text { font-size: .85rem; line-height: 1.4; color: var(--dark); }
.wa-optin__title { display: block; font-weight: 700; margin-bottom: 2px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 20px;
  border-radius: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, opacity .15s;
}
.btn-primary:hover { background: var(--red-dk); }
.btn-primary:disabled { background: var(--gray-400); cursor: not-allowed; }
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
  font-size: .9rem;
  padding: 11px 20px;
  border-radius: 10px;
  transition: background .15s;
}
.btn-secondary:hover { background: var(--gray-200); }
.btn-link {
  color: var(--red);
  font-size: .85rem;
  text-decoration: underline;
  background: transparent;
}

/* ── Orders Page ─────────────────────────────────────────── */
.orders-page { padding: 16px; }
.orders-empty { text-align: center; padding: 48px 16px; color: var(--gray-400); }
.order-card {
  background: var(--white);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.order-card__num { font-family: monospace; font-weight: 700; font-size: .9rem; }
.order-card__time { font-size: .75rem; color: var(--gray-500); margin-top: 2px; }
.order-card__status { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 12px; font-size: .75rem; font-weight: 600; }
.status-placed      { background: #e6f4ea; color: #1e7e34; }
.status-preparing   { background: #fff3cd; color: #856404; }
.status-ready       { background: #fff3cd; color: #856404; }
.status-out_for_delivery { background: #d1ecf1; color: #0c5460; }
.status-delivered   { background: #e6f4ea; color: #1e7e34; }
.status-cancelled   { background: #fde8e8; color: #9b1c1c; }

/* ── Track Page ──────────────────────────────────────────── */
.track-page { padding: 16px; }
.track-header { background: var(--white); border-radius: 10px; padding: 14px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.track-status-banner {
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 16px;
}
.track-timeline { background: var(--white); border-radius: 10px; padding: 14px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}
.timeline-step + .timeline-step::before {
  content: '';
  position: absolute;
  left: 11px;
  top: -8px;
  width: 2px;
  height: 16px;
  background: var(--gray-200);
}
.timeline-step.done + .timeline-step::before { background: var(--red); }
.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  background: var(--white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
}
.timeline-step.done .timeline-dot { border-color: var(--red); background: var(--red); color: var(--white); }
.timeline-step.active .timeline-dot { border-color: var(--red); animation: pulse 1.2s infinite; }
.timeline-label { font-size: .85rem; padding-top: 2px; }
.timeline-step.done .timeline-label { color: var(--dark); font-weight: 500; }
.timeline-step.active .timeline-label { color: var(--red); font-weight: 600; }
.timeline-step .timeline-label { color: var(--gray-400); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(193,39,45,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(193,39,45,0); }
}
.delivery-animation {
  text-align: center;
  font-size: 2.5rem;
  animation: driveAcross 2s ease-in-out infinite alternate;
  margin: 8px 0;
}
@keyframes driveAcross {
  from { transform: translateX(-20px); }
  to   { transform: translateX(20px); }
}
.track-items { background: var(--white); border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.track-item-row {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--gray-100);
}
.track-item-row:last-of-type { border-bottom: none; }
.track-total-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--gray-200);
}

/* ── Account Page ─────────────────────────────────────────── */
.account-page { padding: 16px; }
.account-page h2 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.push-status-card {
  background: var(--white);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 16px;
}
.push-status-card h3 { font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.push-status-text { font-size: .8rem; color: var(--gray-500); margin-bottom: 12px; }
.push-active { color: #1e7e34; font-weight: 600; font-size: .85rem; }

/* ── Success Banner ───────────────────────────────────────── */
.success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  display: none;
}
.success-overlay.open { display: flex; }
.success-card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  animation: fadeInUp .3s ease;
}
@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.success-icon { font-size: 3.5rem; margin-bottom: 12px; }
.success-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.success-card p { font-size: .88rem; color: var(--gray-600); margin-bottom: 4px; }

/* ── Loading Spinner ──────────────────────────────────────── */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Misc ─────────────────────────────────────────────────── */
.text-muted { color: var(--gray-500); font-size: .85rem; }
.text-red   { color: var(--red); }
.mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px;  }
.mb-12 { margin-bottom: 12px; }

/* ── Slot-Picker (Abholung) ───────────────────────────────── */
.slot-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.slot-tab {
  flex: 1;
  padding: 9px;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  transition: background .15s, color .15s, border-color .15s;
}
.slot-tab.active { background: var(--red); color: var(--white); border-color: var(--red); }
.slot-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  min-height: 44px;
}
.slot-chip {
  padding: 10px 4px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  font-size: .9rem;
  font-weight: 600;
  color: var(--dark);
  text-align: center;
  transition: border-color .15s, background .15s;
}
.slot-chip:hover:not(:disabled) { border-color: var(--red); }
.slot-chip.is-selected { background: var(--red); color: var(--white); border-color: var(--red); }
.slot-chip.is-full, .slot-chip:disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot-selected {
  margin-top: 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-success);
}

/* ── Abholpass (Wallet-Ticket-Optik, Track-Ansicht bei Pickup) ── */
.pickup-pass {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  padding: 18px 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(26,31,26,.08));
  border: 1px solid var(--c-line);
  text-align: center;
  overflow: hidden;
}
.pickup-pass__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pickup-pass__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--dark);
}
.pickup-pass__status {
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(120,120,120,.14);
  color: var(--gray-600);
  white-space: nowrap;
}
.pickup-pass.is-ready .pickup-pass__status {
  background: rgba(22,163,74,.14);
  color: #15803d;
  animation: pass-pulse 1.6s ease-in-out infinite;
}
@keyframes pass-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50%      { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) { .pickup-pass.is-ready .pickup-pass__status { animation: none; } }
/* Perforationskante */
.pickup-pass__perf {
  position: relative;
  height: 1px;
  margin: 4px -16px 16px;
  border-top: 2px dashed var(--c-line);
}
.pickup-pass__perf::before,
.pickup-pass__perf::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.pickup-pass__perf::before { left: -11px; }
.pickup-pass__perf::after  { right: -11px; }
.pickup-pass__qr {
  display: flex;
  justify-content: center;
  padding: 8px;
}
.pickup-pass__qr img, .pickup-pass__qr canvas, .pickup-pass__qr svg {
  width: 200px; height: 200px;
  display: block;
}
.pickup-pass__num {
  margin-top: 12px;
  font-family: monospace;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dark);
}
.pickup-pass__slot {
  margin-top: 4px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--red);
}
.pickup-pass__hint {
  margin-top: 8px;
  font-size: .78rem;
  color: var(--gray-500);
}

/* ══════════════════════════════════════════════════════════
   DESKTOP-LAYOUT (ab 768px) — mobile-first-Override, MUSS am
   Dateiende stehen, damit es die Basis-Regeln gewinnt:
   – untere Tab-Leiste wird zur OBEREN Navigationsleiste
   – zentrierter Inhalt mit max-width, mehrspaltiges Produktraster
   Dieselben .nav-item-Buttons, nur per CSS umpositioniert → die
   bestehende JS-Tab-Logik greift unverändert.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #app {
    padding-bottom: 0;
    padding-top: var(--topnav-h);
  }

  /* ── Bottom-Nav → Top-Nav ── */
  .bottom-nav {
    top: 0;
    bottom: auto;
    height: var(--topnav-h);
    padding: 0 clamp(16px, 4vw, 40px);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    border-top: none;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 1px 3px rgba(26, 31, 26, .05);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
  }

  .nav-brand {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: var(--c-ink);
    margin-right: auto;
    padding-right: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45vw;
  }

  .nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    width: auto;
    gap: 8px;
    padding: 8px 16px;
    font-size: .92rem;
    font-weight: 600;
    border-radius: var(--r-pill);
    color: var(--c-ink-soft);
  }
  .nav-item .nav-icon { font-size: 1.15rem; }
  .nav-item .nav-icon svg { width: 19px; height: 19px; }
  .nav-item:hover { color: var(--red); }
  .nav-item.active { background: var(--c-accent-glow); color: var(--red); }
  .nav-item.active::after { display: none; }   /* Unterstrich-Indikator entfällt */

  /* Warenkorb-Badge für Zeilen-Layout neu positionieren */
  .nav-item[data-page="cart"] { position: relative; }
  .nav-item[data-page="cart"] .cart-badge {
    top: 0;
    right: 2px;
  }

  /* ── Inhalt zentrieren mit max-width + Gutter ── */
  .menu-search,
  .view-toggle,
  #cat-tabs,
  .menu-section,
  .cart-page,
  .orders-page,
  .account-page,
  .track-page {
    width: min(1080px, 100% - 48px);
    margin-inline: auto;
  }
  .menu-section { padding-inline: 0; }

  /* ── Mehrspaltiges Produktraster ── */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  /* Kompakt-Modus bleibt einspaltig, auch auf Desktop */
  #menu-container[data-view="compact"] .product-grid {
    grid-template-columns: 1fr;
  }

  /* Etwas großzügigere Kopf-Abstände */
  .app-header { padding: 20px 22px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   0.35.0 — Zugänge & Onboarding (additiv am Dateiende, siehe BACKOFFICE_SPA §1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dezenter Hinweisstreifen über der Speisekarte: „App aufs Handy legen".
   Einmal wegklickbar (localStorage), erscheint nie in der installierten App. */
.install-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 10px; padding: 9px 12px;
  background: var(--c-accent-glow, #e3edd5);
  border-radius: 12px; font-size: .82rem; line-height: 1.35;
}
.install-hint a { flex: 1; color: inherit; text-decoration: none; font-weight: 600; }
.install-hint button {
  flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1.15rem; line-height: 1;
  cursor: pointer; opacity: .55;
}
.install-hint button:hover { opacity: 1; }

/* Installations-Anleitung /app/start.php — eigenständige Seite, kein SPA-Screen. */
.start-wrap { max-width: 560px; margin: 0 auto; padding: 26px 20px calc(40px + env(safe-area-inset-bottom)); }
.start-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.start-brand img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.start-brand h1 { font-size: 1.25rem; margin: 0; }
.start-brand p { margin: 2px 0 0; font-size: .84rem; color: var(--gray-500); }
.start-card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  padding: 18px 18px 4px; margin-bottom: 16px;
}
.start-card h2 { font-size: 1rem; margin: 0 0 4px; }
.start-card > p { font-size: .88rem; line-height: 1.5; color: var(--gray-600, #555); margin: 0 0 12px; }
.start-steps { list-style: none; margin: 0; padding: 0 0 14px; counter-reset: s; }
.start-steps li {
  counter-increment: s; position: relative; padding: 0 0 14px 40px;
  font-size: .92rem; line-height: 1.5;
}
.start-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-accent, #9bb487); color: #fff;
  font-size: .82rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.start-steps .start-glyph {
  display: inline-block; padding: 1px 7px; margin: 0 2px; border-radius: 6px;
  background: var(--gray-100, #f2f2f2); font-weight: 600; white-space: nowrap;
}
.start-switch { text-align: center; margin: 6px 0 18px; font-size: .84rem; }
.start-note { font-size: .82rem; line-height: 1.5; color: var(--gray-500); margin: 0 0 14px; }
.start-addr {
  display: block; word-break: break-all; font-size: .9rem; font-weight: 600;
  padding: 10px 12px; border-radius: 10px; background: var(--gray-100, #f2f2f2); margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Anmeldung (S14) — EIN Bildschirm, große Elemente
   ═══════════════════════════════════════════════════════════════════════════
   Zielgruppe ist der Gast eines Restaurants, jedes Alter, ohne Technikwissen.
   Deshalb: eine Frage pro Bildschirm, Eingabefelder mit 56 px Höhe (auch mit
   dickem Daumen und ohne Brille treffbar), 17 px Schrift (unter 16 px zoomt
   iOS das Layout beim Fokus weg) und genau EIN farbiger Hauptknopf. Alles
   Weitere sind Textlinks — sie sollen da sein, aber nicht mit der Hauptsache
   um Aufmerksamkeit ringen. */
.auth1 { max-width: 420px; margin: 0 auto; padding: 4px 0 8px; }
.auth1__step { animation: auth1-in .18s ease-out; }
@keyframes auth1-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.auth1__title { font-size: 1.35rem; line-height: 1.25; margin: 6px 0 8px; }
.auth1__lead  { font-size: .95rem; line-height: 1.5; color: var(--gray-600, #555); margin: 0 0 18px; }
.auth1__note  { font-size: .82rem; line-height: 1.5; color: var(--gray-500); margin: -2px 0 14px; }
.auth1__input {
  display: block; width: 100%; min-height: 56px; margin-bottom: 12px;
  padding: 14px 16px; font-size: 1.06rem;   /* ≥16px: sonst zoomt iOS hinein */
  border: 1.5px solid var(--gray-200); border-radius: 14px;
  background: var(--white); color: var(--dark);
  transition: border-color .15s; outline: none;
}
.auth1__input:focus { border-color: var(--c-accent, #9bb487); }
.auth1__input--pin { text-align: center; letter-spacing: .5em; text-indent: .5em; font-size: 1.3rem; }
.auth1__btn { width: 100%; min-height: 54px; font-size: 1.02rem; margin-top: 4px; }
.auth1__btn + .auth1__btn { margin-top: 10px; }
/* Nebenwege: voll klickbare Zeile (46 px hoch), aber optisch zurückgenommen. */
.auth1__alt { display: block; width: 100%; min-height: 46px; margin-top: 8px; font-size: .92rem; }
.auth1__alt[disabled] { opacity: .5; }

/* ── Sechs Kästchen, ein Eingabefeld ──────────────────────────────────────
   Das echte <input> liegt durchsichtig ÜBER den Kästchen und fängt alles ab:
   Tippen, Einfügen aus der Mail, die Code-Übernahme von iOS/Android
   (autocomplete="one-time-code"). Sechs getrennte Felder sähen genauso aus,
   würden aber genau diese drei Wege zerlegen. Die Ziffern zeichnet app.js in
   die <span>-Kästchen. */
.otp { position: relative; margin-bottom: 12px; }
.otp__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: transparent; color: transparent; caret-color: transparent;
  font-size: 1.6rem; letter-spacing: 1em; text-indent: 1em;
  outline: none; z-index: 2; -webkit-text-fill-color: transparent;
}
.otp__cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp__cells span {
  display: flex; align-items: center; justify-content: center;
  height: 60px; border: 1.5px solid var(--gray-200); border-radius: 12px;
  background: var(--white); font-size: 1.5rem; font-weight: 700; color: var(--dark);
}
/* Das nächste leere Kästchen markieren, solange das Feld den Fokus hat —
   ohne diesen Hinweis weiß niemand, wohin die nächste Ziffer geht. */
.otp.is-focus .otp__cells span.is-next { border-color: var(--c-accent, #9bb487); }
.otp__cells span.is-filled { border-color: var(--gray-300, #ccc); }
@media (max-width: 360px) {
  .otp__cells { gap: 5px; }
  .otp__cells span { height: 52px; font-size: 1.25rem; }
  .otp__input { letter-spacing: .82em; text-indent: .82em; }
}

/* ── PIN-Angebot im Konto ── */
.pin-offer {
  border: 1px solid var(--c-accent-soft, #c8d8b8); border-radius: 14px;
  padding: 16px 16px 10px; margin-bottom: 18px; background: var(--white);
}
.pin-offer h3 { font-size: 1rem; margin: 0 0 6px; text-transform: none; letter-spacing: 0; }
.pin-offer p  { font-size: .86rem; line-height: 1.5; color: var(--gray-600, #555); margin: 0 0 14px; }