:root {
  /* Grundwerte (Design „Grill“). Das Design aus Verwaltung → Lokal → Design überschreibt sie über theme. */
  --orange: #e8742a;          /* Hauptfarbe: Knöpfe, Kategorien, Akzente */
  --orange-dark: #c95d17;     /* dunklere Hauptfarbe: Links, Hover */
  --accent-soft: #fdeede;    /* sehr helle Hauptfarbe: Hinweise, gewählte Reiter */
  --on-accent: #fff;          /* Schrift auf der Hauptfarbe */
  --ink: #1c2233;             /* Text */
  --muted: #6b7080;           /* Nebentext */
  --line: #e6e1d8;            /* Linien */
  --bg: #faf8f4;              /* Seitenhintergrund */
  --card: #ffffff;            /* Karten, Kästen */
  --muted-bg: #f1eee8;       /* nicht verfügbar, Entwurf */
  --hover-bg: #f0ebe2;
  --input-bg: #fff;
  --input-border: #cfc9bd;
  --header-bg: #ffffff;       /* Kopfzeile */
  --header-text: #1c2233;
  --sale: #c62828;            /* Aktionen */
  --on-sale: #fff;
  --status-open: #1f7a45;     /* Öffnungsstatus im Kopf */
  --status-closing: #9a6700;
  --status-closed: #b3261e;
  --shadow-rgb: 28, 34, 51;
  --ok: #1f7a45;
  --error: #b3261e;
  /* Abzeichen und Meldungskästen (Status, Hinweise): Hintergrund und Schrift, auf dunklen Designs heller Text */
  --ok-bg: #e3f3e9;
  --ok-text: #1f7a45;
  --error-bg: #fbe6e4;
  --error-text: #b3261e;
  --done-bg: #e6ecf5;
  --done-text: #1c2233;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-title: var(--font-body);                   /* Überschriften */
  --font-head: Georgia, 'Times New Roman', serif;   /* Name des Lokals im Kopf */
  --r: 12px;                  /* Rundung von Karten */
  --r-sm: 10px;               /* Knöpfe, Felder */
  --r-xs: 8px;
  --pill: 999px;              /* Kategorien, Schalter */
  --header-h: 234px;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut gilt immer, auch wenn eine Klasse display setzt */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 var(--font-body);
}

a { color: var(--orange-dark); }

/* --- Kopf: Logo und Kategorieleiste bleiben beim Scrollen stehen --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 3px solid var(--orange);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .08);
}

.topbar {
  position: relative;
  z-index: 3;   /* über Lieferinfo und Kategorieleiste, damit das aufgeklappte Kontomenü nicht dahinter verschwindet */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px 4px;
}

/* Ohne hochgeladenes Logo steht hier der Name des Lokals */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 170px);   /* rechts sitzt das Kontomenü, links gleich viel frei, damit es mittig bleibt */
  min-height: 64px;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* Der Name als Text hält etwas mehr Abstand zum Kontomenü als ein Logo. Auf schmalen Handys wird die
   Schrift kleiner, damit ein einzelnes Wort wie der Name des Lokals nicht mitten im Wort umbricht. */
.logo-text { max-width: calc(100% - 190px); font-size: clamp(14px, 4.4vw, 18px); letter-spacing: .5px; }
.logo img { display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.logo-preview { display: block; max-width: 100%; max-height: 96px; }
.icon-preview { vertical-align: middle; border-radius: var(--r); }

.account-link, .account {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 14px;
}

.account-link, .account summary {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.account summary::-webkit-details-marker { display: none; }
.account summary::after { content: " ▾"; color: var(--muted); }

.account-menu {
  position: absolute;
  right: 0;
  margin-top: 6px;
  min-width: 190px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), .15);
}
.account-menu a, .account-menu .linklike {
  display: block;
  width: 100%;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.account-menu .role { display: block; padding: 4px 10px; color: var(--muted); font-size: 12px; }

.linklike { border: 0; background: none; font: inherit; cursor: pointer; }

.catbar {
  display: flex;
  gap: 6px;
  padding: 6px 12px 10px;
  position: relative;
  z-index: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.catbar::-webkit-scrollbar { display: none; }
.catbar a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.catbar a.active { background: var(--orange); color: var(--on-accent); }

/* --- Inhalt --- */

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 96px; }

h1, h2 { font-family: var(--font-title); }
h1 { margin: 8px 0 16px; font-size: 24px; }

.category { scroll-margin-top: calc(var(--header-h) + 8px); margin-bottom: 28px; }
.category h2 { margin: 0 0 10px; color: var(--orange); font-size: 22px; }

.product {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.product-info { flex: 1; min-width: 0; }
/* Produkte mit Auswahl: Dropdowns in einer eigenen Zeile unter Name und Preis */
.product:has(.product-choices) { flex-wrap: wrap; }
.product-choices { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.product-choices select { flex: 1 1 130px; width: auto; }
.product-name { font-weight: 700; }
.product-desc { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.allergen-codes { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.product-price { font-weight: 700; white-space: nowrap; }

.product.unavailable { background: var(--muted-bg); }
.product.unavailable .product-name,
.product.unavailable .product-price { color: var(--muted); text-decoration: line-through; }
.badge-unavailable { display: inline-block; margin-top: 4px; color: var(--error-text); font-size: 13px; font-weight: 600; }

.empty { color: var(--muted); font-style: italic; }

.allergens { scroll-margin-top: calc(var(--header-h) + 8px); padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.allergens h2 { color: var(--ink); font-size: 18px; }
.allergens ul { margin: 0; padding: 0; list-style: none; columns: 2; }
.allergens li { padding: 2px 0; break-inside: avoid; }

/* --- Formulare und Knöpfe --- */

.btn {
  display: inline-block;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--orange);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--orange-dark); }
.btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #8f1d17; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover { background: #17603a; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-add { min-width: 44px; padding: 10px 0; font-size: 20px; line-height: 1; }

label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

.row { display: flex; gap: 10px; align-items: flex-end; }   /* Felder bündig, auch wenn eine Beschriftung umbricht */
.row > * { flex: 1; min-width: 0; }
.row > .narrow { flex: 0 0 34%; }

fieldset { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
legend { padding: 0 6px; font-weight: 700; }
.choice { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: 0; font-weight: 400; font-size: 16px; }
.choice input { width: 20px; height: 20px; accent-color: var(--orange); }
.hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.card { padding: 14px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }

.flash { padding: 12px 14px; border-radius: var(--r-sm); font-weight: 600; }
.flash-ok { background: var(--ok-bg); color: var(--ok-text); }
.flash-error { background: var(--error-bg); color: var(--error-text); }
.flash-info { background: var(--accent-soft); color: var(--orange-dark); }

/* --- Warenkorb, Bestellungen --- */

.lines { width: 100%; border-collapse: collapse; }
.lines td { padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines td.num { text-align: right; white-space: nowrap; }
.lines tr.total td { border-bottom: 0; font-weight: 700; font-size: 18px; }
.lines tr.tax td { padding: 3px 0; border-bottom: 0; color: var(--muted); font-size: 14px; }
.lines tr.tax:first-of-type td, .lines tr:not(.tax) + tr.tax td { padding-top: 10px; }
.price-note { color: var(--muted); font-size: 13px; }
.lines .item-note { color: var(--muted); font-size: 13px; }
.lines .item-cat { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.cart-line { display: grid; grid-template-columns: 1fr 76px; gap: 6px 10px; align-items: center; }
.cart-line .note { grid-column: 1 / -1; }
.cart-line input[type=number] { text-align: center; }

.status { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: 13px; font-weight: 700; }
.status-offen { background: var(--accent-soft); color: var(--orange-dark); }
.status-bestaetigt { background: var(--ok-bg); color: var(--ok-text); }
.status-abgelehnt { background: var(--error-bg); color: var(--error-text); }
.status-unterwegs { background: var(--orange); color: var(--on-accent); }
.status-zugestellt, .status-abgeholt { background: var(--done-bg); color: var(--done-text); }

.order-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.order-meta { margin: 6px 0; color: var(--muted); font-size: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.actions form { margin: 0; }
.actions .grow { flex: 1; min-width: 180px; }

.cartbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  max-width: 696px;
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(var(--shadow-rgb), .35);
}

/* --- Verwaltung --- */

.admin-product { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-product .product-info { flex: 1 1 160px; }
.admin-category { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-category .product-info { flex: 1 1 160px; }
/* Griff zum Ziehen: touch-action none, damit der Finger die Karte bewegt statt die Seite zu scrollen */
.drag-handle { flex: 0 0 auto; padding: 10px 12px; border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: grab; touch-action: none; }
.drag-handle:hover, .drag-handle:focus-visible { background: var(--bg); color: var(--ink); }
.card.dragging { border-color: var(--orange); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); opacity: .85; }
/* Während des Ziehens überall die greifende Hand, egal über welchem Element der Zeiger gerade ist */
html.sorting-active, html.sorting-active * { cursor: grabbing !important; }
/* Kurzes Aufleuchten nach dem Loslassen: Die Karte ist abgelegt */
.card.dropped { animation: card-dropped .6s ease-out; }
@keyframes card-dropped { from { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange); } }
[data-sortable].sorting { user-select: none; -webkit-user-select: none; }
details.edit { flex: 1 1 100%; }
details.edit summary { cursor: pointer; color: var(--orange-dark); font-weight: 600; padding: 6px 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px; }
.checks label { display: flex; gap: 8px; align-items: center; margin: 0; min-height: 36px; font-weight: 400; }

/* Produkt bearbeiten: je Auswahl ein Kasten, hinzufügen per Knopf */
.choice-row { margin: 10px 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.choice-row label { margin-top: 8px; }
.choice-row [data-choice-list] input { margin-top: 6px; }
.choice-head { display: flex; justify-content: space-between; align-items: center; }
.choice-head .linklike { color: var(--error-text); font-size: 14px; }

/* Live-Benachrichtigung für Mitarbeiter und Inhaber */
.sound-hint, .app-hint {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--orange);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--orange-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Ton aus: schmal, verdeckt nichts; jeder Tipp auf der Seite schaltet den Ton ein */
.sound-hint { padding: 8px 12px; font-size: 14px; }
.toast {
  position: fixed;
  left: 12px;
  right: 12px;
  top: calc(var(--header-h) + 8px);
  z-index: 40;
  max-width: 696px;
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--ok);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(var(--shadow-rgb), .35);
}
.toast a { color: #fff; }
.card-new { border-color: var(--orange); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Seitenwechsel ohne Neuladen (Verwaltung): dauert er spürbar, wird der alte Inhalt blasser */
body.loading { cursor: progress; }
body.loading main { opacity: .55; transition: opacity .15s .25s; }

.site-footer { padding: 16px 16px 96px; color: var(--muted); font-size: 13px; text-align: center; }

@media (min-width: 600px) {
  :root { --header-h: 244px; }
  .logo { min-height: 80px; font-size: 30px; letter-spacing: 2px; }
  .logo img { height: 80px; }
}

/* --- Breite Bildschirme: Karte zweispaltig, Kopf und Inhalt in einer Flucht --- */
@media (min-width: 900px) {
  :root { --header-h: 254px; --page: 1080px; }

  .topbar, .catbar, .choicebar { max-width: var(--page); margin: 0 auto; }
  /* Desktop: PLZ und Schalter zusammen in der Mitte, das Konto am rechten Rand */
  .site-header .choicebar { grid-template-columns: 1fr auto auto 1fr; padding-left: 24px; padding-right: 24px; }
  .site-header .choicebar .zone-pick { grid-column: 2; }
  .site-header .choicebar .switch { grid-column: 3; }
  .site-header .choicebar .choice-submit, .site-header .account-slot { grid-column: 4; }
  .topbar { padding: 12px 24px 6px; }
  .catbar { padding: 6px 24px 12px; justify-content: center; gap: 8px; }
  .catbar a { padding: 9px 18px; transition: background .15s; }
  .catbar a:hover { background: var(--hover-bg); }
  .catbar a.active:hover { background: var(--orange-dark); }
  .account-link, .account { right: 24px; top: 20px; }

  main { padding: 28px 24px 96px; }
  main.wide { max-width: var(--page); }

  /* Zwei Produkte nebeneinander, gleich hohe Karten je Zeile */
  main.wide .category {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-bottom: 40px;
  }
  main.wide .category h2,
  main.wide .category .empty { grid-column: 1 / -1; margin: 0; }
  main.wide .category h2 { padding-bottom: 8px; border-bottom: 2px solid var(--line); font-size: 26px; }
  main.wide .product { margin-bottom: 0; padding: 16px 18px; transition: box-shadow .15s, border-color .15s; }
  main.wide .product:not(.unavailable):hover { border-color: var(--input-border); box-shadow: 0 4px 14px rgba(var(--shadow-rgb), .08); }
  /* Auswahl-Dropdowns am unteren Kartenrand, damit sie in einer Zeile fluchten */
  main.wide .product:has(.product-choices) { align-content: space-between; }

  /* Verwaltung → Produkte: dieselben zwei Spalten wie in der Karte */
  main.wide .admin-products {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
  main.wide .admin-product { margin-bottom: 0; align-content: flex-start; }

  main.wide .allergens { padding-top: 20px; }
  main.wide .allergens ul { columns: 4; }

  /* Warenkorb als kompakter Knopf unten rechts statt über die ganze Breite */
  .cartbar { left: auto; right: 24px; bottom: 24px; width: 320px; margin: 0; }
  .toast { max-width: 520px; }
  .site-footer { padding-bottom: 40px; }
}

/* Mein Konto → Anmeldung absichern, Anmeldeseite */
.account-section h3 { margin: 18px 0 6px; font-size: 16px; }
.qr { margin: 10px 0; }
.qr svg { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-xs); }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 10px; }
.recovery-codes { margin: 8px 0 0; padding: 0; list-style: none; columns: 2; font-size: 16px; }
.recovery-codes li { padding: 2px 0; }
.passkey { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.or { margin: 16px 0 8px; color: var(--muted); text-align: center; }

/* Mein Konto: ein Kasten je Abschnitt; Sprungziele landen unter der stehenden Kopfleiste */
.account-section { scroll-margin-top: 150px; }
.account-section h2 { margin: 0 0 8px; font-size: 18px; }
.address { padding: 10px 0; border-top: 1px solid var(--line); }
.address p { margin: 0; }
.badge-ok { color: var(--ok-text); font-size: 13px; font-weight: 600; }
.choice-disabled { color: var(--muted); }

/* Adresse gibt es in mehreren Gemeinden: Auswahl mit Kartenausschnitt (Registrierung, Mein Konto) */
.address-choices { margin: 12px 0; padding: 10px 12px; border: 2px solid var(--orange); border-radius: var(--r); }
.address-choice { display: grid; grid-template-columns: 20px 1fr; gap: 6px 10px; align-items: start; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-weight: 400; cursor: pointer; }
.address-choice:first-of-type { border-top: 0; }
.address-choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }
.address-choice img { grid-column: 2; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); }
.address-choice:has(input:checked) img { border-color: var(--orange); outline: 2px solid var(--orange); }

/* Produktbild: kleines Quadrat links neben Name und Beschreibung; in der Karte öffnet ein Tipp das ganze Bild */
.product-image { flex: none; line-height: 0; }
.product-image img, img.product-image { width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg); }
img.product-image { width: 56px; height: 56px; }
.product.unavailable .product-image img { opacity: .5; filter: grayscale(1); }

/* Verwaltung → Bestellungen: Lage der Lieferadresse; ein Tipp öffnet die Route */
.order-map { display: inline-block; margin: 6px 0; font-weight: 600; }
.order-map img { display: block; max-width: 100%; height: auto; margin-bottom: 4px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); }

/* --- Kopf der Gästeseiten: oben Abholung/Lieferung und PLZ, unter dem Logo Lieferkosten und Infos --- */
/* Schalter genau in der Mitte, die PLZ links daneben; rechts bleibt gleich viel Platz frei (ohne JS: Knopf „Übernehmen“) */
.choicebar { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 0 auto; padding: 8px 12px 0; }
/* Das Formular (PLZ, Schalter) nimmt am Raster der Leiste teil; rechts daneben sitzt das Konto */
.choice-form { display: contents; }
.choicebar .zone-pick { grid-column: 1; }
.choicebar .switch { grid-column: 2; }
.choicebar .choice-submit, .account-slot { grid-column: 3; }
.account-slot { justify-self: end; min-width: 0; max-width: 100%; }
.account-slot .account-link, .account-slot .account { position: relative; top: auto; right: auto; display: block; }
.account-slot .account-link, .account-slot .account summary { display: block; min-height: 36px; padding: 7px 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Ohne Konto daneben hat das Logo die ganze Breite */
.topbar-free .logo, .topbar-free .logo-text { max-width: 100%; }
.zone-pick { position: relative; justify-self: end; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 36px; margin: 0; padding: 6px 12px; border: 1px solid var(--input-border); border-radius: var(--pill); background: var(--input-bg); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.zone-pick:focus-within { outline: 2px solid var(--orange); outline-offset: 1px; }
.zone-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zone-text::after { content: " ▾"; color: var(--muted); }
.zone-pick select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.choicebar .choice-submit { justify-self: start; min-height: 36px; padding: 6px 14px; font-size: 14px; }
/* Schalter aus zwei Radio-Buttons: der gewählte Teil ist orange hinterlegt */
.switch { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--bg); border: 1px solid var(--line); }
.switch label { margin: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { display: block; padding: 6px 14px; border-radius: var(--pill); color: var(--muted); transition: background .15s, color .15s; }
.switch input:checked + span { background: var(--orange); color: var(--on-accent); }
.switch input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.delivery-info { position: relative; z-index: 2; display: flex; gap: 8px; justify-content: center; align-items: center; padding: 0 12px 2px; color: var(--muted); font-size: 13px; text-align: center; }
.delivery-info strong { color: var(--ink); }
.store-info summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1.5px solid var(--orange-dark); border-radius: 50%;
  color: var(--orange-dark); font: italic 700 14px/1 Georgia, serif; cursor: pointer; list-style: none;
}
.store-info summary::-webkit-details-marker { display: none; }
.store-info[open] summary { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.store-panel {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px);
  width: min(340px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), .18); color: var(--ink); font-size: 14px; text-align: left;
}
.store-panel p { margin: 4px 0 8px; }
.store-panel h3 { margin: 12px 0 4px; font-size: 14px; }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 2px 0; vertical-align: top; }
.hours td:last-child { text-align: right; }

/* Verwaltung: Lieferorte mit Kosten und Zeit */
.zones th { padding: 6px 4px 6px 0; color: var(--muted); font-size: 13px; text-align: left; }
.zones td { padding: 6px 4px 6px 0; vertical-align: middle; }
.zones input { min-width: 70px; }

/* Kasse: Rabattcode */
.discount-form { display: flex; gap: 8px; }
.discount-form input { flex: 1; text-transform: uppercase; }
.discount-applied { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ok-bg); color: var(--ok-text); }
.discount-applied .linklike { color: var(--orange-dark); text-decoration: underline; }
.lines tr.discount-row td { color: var(--ok-text); font-weight: 600; }
.discount-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
.card.discount.unavailable { background: var(--muted-bg); }

/* Lieferung unterwegs: Ankunftszeit und Restzeit beim Gast, Minutenfeld in der Verwaltung */
.eta { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center; margin: 8px 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--orange-dark); }
.eta-left strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.actions .minutes { flex: 0 0 150px; }
.actions .minutes label { margin-top: 0; }

@media (max-width: 420px) {
  /* Verwaltungsleiste: lieber zweizeilig als abgeschnitten */
  .catbar[aria-label="Verwaltung"] { flex-wrap: wrap; justify-content: center; gap: 4px; padding-left: 8px; padding-right: 8px; }
  .catbar[aria-label="Verwaltung"] a { padding: 8px 7px; font-size: 13px; }
  .catbar[aria-label="Verwaltung"] .nav-long { display: none; }
  .catbar[aria-label="Verwaltung"] .nav-short { display: inline; }
  /* schmale Handys: Schalter etwas kleiner, damit links genug Platz für die PLZ bleibt */
  .switch span { padding: 6px 10px; font-size: 13px; }
  .choicebar { gap: 6px; padding: 8px 8px 0; }
  .zone-pick { padding: 6px 10px; font-size: 13px; }
  .account-slot .account-link, .account-slot .account summary { padding: 7px 10px; font-size: 13px; }
  .zone-city { display: none; }
}

/* Neuigkeiten: Kopfbild über die ganze Kartenbreite, darunter Titel und Text */
.card.news { padding: 0; overflow: hidden; }
.news-image { display: block; width: 100%; max-height: 360px; object-fit: cover; background: var(--bg); }
.news-content { padding: 14px 16px 6px; }
.news-content h2 { margin: 0; font-size: 20px; }
.news-content p { margin: 0 0 12px; line-height: 1.55; }
.news-content .order-meta { margin: 2px 0 10px; }
.news-preview { max-height: 160px; margin-bottom: 8px; border-radius: var(--r-xs); }
.news-admin.unavailable { background: var(--muted-bg); }

/* Öffnungsstatus unter der Lieferzeile: grün geöffnet, gelb in der letzten Stunde, rot geschlossen */
.store-status { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 0 12px 6px; font-size: 13px; font-weight: 700; }
.store-status .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.store-status-open { color: var(--status-open); }
.store-status-closing { color: var(--status-closing); }
.store-status-closing .dot { background: #f2b705; }
.store-status-closed, .store-status-away { color: var(--status-closed); }

/* Verwaltungsleiste: „Speisekarte“ heißt am Handy kurz „Karte“ (siehe max-width: 420px) */
.nav-short { display: none; }

/* Verwaltung: Unterpunkte des gewählten Hauptpunkts, kleiner und als Reiter unter der Hauptleiste */
.subnav { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }   /* lieber zweizeilig als abgeschnitten */
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-xs); color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.subnav a.active { background: var(--accent-soft); color: var(--orange-dark); }
@media (min-width: 900px) {
  .subnav { max-width: var(--page); margin: 0 auto; padding: 0 24px 10px; justify-content: center; }
}
@media (max-width: 380px) {
  .catbar[aria-label="Verwaltung"] a { padding: 7px 6px; font-size: 12px; }
}

/* Verwaltung → Lokal → E-Mail */
.mail-account h2 { margin: 0; font-size: 18px; }
.smtp-log { margin: 8px 0 0; padding: 8px 10px; overflow-x: auto; border-radius: var(--r-xs); background: var(--input-bg); color: var(--ink); font-size: 12px; font-weight: 400; white-space: pre-wrap; }

/* Titelbild der Speisekarte (Verwaltung → Lokal → Design). Das Bild steht immer ganz da, ohne Zuschnitt, und Überschrift
   und Text stehen darunter statt darauf: Viele Titelbilder haben selbst Schrift oder eine Grafik, die sonst verdeckt würde –
   am Handy, wo das Bild klein ist, fast vollständig. Ohne Bild steht der Text auf der Hauptfarbe. */
.banner { overflow: hidden; margin: 0 0 24px; padding: 22px 20px; border-radius: var(--r); background: var(--orange); color: var(--on-accent); }
.banner-image { padding: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.banner-image img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; background: var(--muted-bg); }
.banner-image .banner-text { padding: 14px 18px 16px; }
.banner h1 { margin: 0 0 4px; font-size: 24px; }
.banner p { margin: 0; font-size: 16px; line-height: 1.45; }
@media (min-width: 900px) {
  .banner h1 { font-size: 32px; }
  .banner-image .banner-text { padding: 18px 24px 20px; }
  main.wide .banner { margin-bottom: 32px; }
}

/* Verwaltung → Lokal → Design */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.presets form { margin: 0; }
.preset { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 8px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.preset.active { border-color: var(--orange); box-shadow: 0 0 0 2px var(--accent-soft); }
.swatch { display: block; width: 100%; height: auto; border-radius: var(--r-xs); }
.color-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.color-field { display: flex; gap: 10px; align-items: center; margin: 6px 0; font-weight: 400; }
.color-field input { flex: none; width: 44px; height: 36px; padding: 0; border: 1px solid var(--input-border); border-radius: var(--r-xs); background: none; cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--orange); }
.preview-sample { margin: 14px 0 4px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.preview-sample .btn { pointer-events: none; }
.design-preview { display: block; max-width: 100%; max-height: 180px; margin-bottom: 8px; border-radius: var(--r-xs); }

/* Aktionen: Abzeichen, durchgestrichener normaler Preis, eigene Kategorie ganz oben */
.badge-sale { display: inline-block; margin: 0 6px 2px 0; padding: 1px 8px; border-radius: var(--pill); background: var(--sale); color: var(--on-sale); font-size: 12px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.price-old { margin-right: 4px; color: var(--muted); font-weight: 400; font-size: .9em; }
.price-sale { color: var(--sale); }
.product.sale { border-color: var(--sale); }
.category-sale h2 { display: flex; align-items: center; gap: 10px; }
.sale-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sale); color: var(--on-sale); font-size: 17px; font-weight: 900; }

/* Handy im Querformat (niedriger Bildschirm): Kopf kompakter; beim Scrollen bleibt nur die Kategorie- bzw.
   Verwaltungsleiste stehen, der Rest des Kopfs scrollt weg (assets/app.js setzt dafür top und --header-h) */
@media (max-height: 520px) and (orientation: landscape) {
  .choicebar { padding-top: 4px; }
  .topbar { padding-top: 2px; padding-bottom: 0; }
  .logo, .logo-text { min-height: 40px; font-size: 22px; }
  .logo img { height: 40px; }
  .delivery-info { padding-bottom: 0; }
  .store-status { padding-bottom: 2px; }
  .catbar { padding-top: 4px; padding-bottom: 6px; }
  .banner-image img { max-height: 60vh; }
}

/* Verwaltung → Bestellungen: Reiter nach Status, mit Anzahl bei denen, in denen etwas zu tun ist */
.order-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.order-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.order-tabs a.active { border-color: var(--orange); background: var(--orange); color: var(--on-accent); }
.order-tabs .count { min-width: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--muted-bg); color: var(--ink); font-size: 12px; text-align: center; }
.order-tabs .count-new { background: var(--sale); color: var(--on-sale); }
.order-tabs a.active .count { background: rgba(255, 255, 255, .25); color: inherit; }

/* Rechtstexte (recht) und ihre Bearbeitung */
.legal h1 { margin-top: 0; }
.legal h2 { margin: 22px 0 6px; font-size: 18px; }
.legal p, .legal li { line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal-edit textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.footer-links { margin-top: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }