:root {
  --navy: #01152B;
  --gold: #EBB42C;
  --rot: #E7240E;
  --gruen: #2E9E4F;
  --grau: #6b7280;
  --kupfer: #B47049;
  --hintergrund: #f4f5f7;
  color-scheme: light dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { touch-action: manipulation; }
/* Rolle "Service" arbeitet spuerbar besser im Querformat (siehe manifest-service.json,
   orientation:landscape - wirkt aber nur bei installierter PWA unter Android, iPhones
   drehen sich nicht automatisch). Deshalb zusaetzlich dieser Hinweis-Screen, der bei
   Hochformat auf Handy-Breite ueberblendet; ueber den Weiter-Button abschaltbar, damit
   niemand ausgesperrt wird (z.B. bei aktiver Hochformat-Sperre im Handy-Betriebssystem). */
.quer-hinweis { display: none; }
.quer-hinweis-inhalt button.btn { background: var(--gold); color: #1a1a1a; margin-top: 16px; }
@media (max-width: 640px) and (orientation: portrait) {
  .quer-hinweis:not(.ausgeblendet) {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    background: var(--navy); color: #fff; align-items: center; justify-content: center;
    text-align: center; padding: 24px; font-size: 1.2em; line-height: 1.5;
  }
  .quer-hinweis-inhalt { max-width: 320px; }
}
body {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: var(--hintergrund);
  color: #1a1a1a;
  font-size: 17px;
}
/* Optionales Firmenlogo als Wasserzeichen (siehe /einstellungen/betrieb) - fest im Hintergrund,
   so groß wie der Bildschirm es zulässt. Eigenes ::before-Element statt background-image direkt
   auf body: die Deckkraft läuft über normales CSS "opacity" (Standard-Alphablending), nicht über
   ein Bild mit fest eingebrannter Mini-Deckkraft - Letzteres führte in einer früheren Instanz zu
   sichtbarem Dithering (Karomuster) beim Verrechnen sehr niedriger Alpha-Werte. */
body.hat-wasserzeichen::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--wasserzeichen-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(90vw, 90vh);
  opacity: .10;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  body { background: #14181f; color: #e8e8e8; }
  .card, .plan-tisch, .tabelle, .artikel-kachel { background: #1f2530 !important; color: #e8e8e8 !important; }
  .tabelle th { background: #262c38 !important; }
}
.topbar {
  background: var(--navy);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
/* Auf Handys mit wenig Höhe (typisch: Service-Rolle quer gehalten, damit Tischplan/Platz-
   Anordnung richtig aussieht) frisst das feststehende Menüband zu viel vom knappen
   Bildschirm - dort lieber wie gewohnt mitscrollen lassen. */
@media (max-height: 500px) {
  .topbar { position: static; box-shadow: none; }
}
.topbar .brand { color: var(--gold); font-weight: bold; font-size: 1.25em; text-decoration: none; }
.brand-version { color: rgba(255,255,255,.55); font-size: .7em; margin-left: 4px; white-space: nowrap; }
/* Name des Mandanten/Betriebs - groß und mittig in der Titelzeile, damit bei mehreren
   gleichzeitig geöffneten Instanzen (verschiedene Mandanten in verschiedenen Tabs) sofort
   erkennbar ist, in welcher man gerade arbeitet (siehe Kassenbindung-Mehrfachlogin-Thema). */
.topbar-mandant {
  flex: 1 1 auto;
  text-align: center;
  color: #fff;
  font-size: 1.35em;
  font-weight: bold;
  letter-spacing: .02em;
  min-width: 120px;
}
.topbar nav a {
  color: #fff; margin-left: 6px; text-decoration: none;
  padding: 10px 14px; border-radius: 6px; display: inline-block;
}
/* <form> ist von Haus aus display:block - ohne das hier würde der Sprachumschalter aus dem
   inline-Fluss der übrigen Nav-Links herausbrechen und eine eigene, unschön zusammengedrückte
   Zeile erzwingen (siehe Bug 2026-08-01: René meldete ein "zusammengedrücktes" Menü). */
.topbar nav .sprache-form {
  display: inline-block; vertical-align: middle; margin-left: 6px;
}
.topbar nav .sprache-form select {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px; padding: 8px 10px; font-size: .95em; cursor: pointer;
}
/* Die aufgeklappte Optionsliste ist ein natives Browser-Popup und übernimmt NICHT das
   transluzente Nav-Hintergrund-Blau der geschlossenen Box, sondern rendert normalerweise mit
   weißem Standardhintergrund - ohne explizite Farbe hier bliebe color:#fff dort weiße Schrift
   auf Weiß (siehe Bug 2026-08-01, René: "weiße Schrift auf weißem Grund"). */
.topbar nav .sprache-form select option {
  background: var(--navy); color: #fff;
}
.topbar nav a:hover, .topbar nav a:active { background: rgba(255,255,255,.12); color: var(--gold); }
.wer-angemeldet { color: var(--gold); margin-left: 10px; font-size: .9em; }

/* Fertigmeldungen-Glocke (Servicekasse): bewusst klein und nur dezent blinkend statt Vollbild+
   Klingelton wie die Theken-Anzeige - soll einen laufenden Bestellvorgang nicht unterbrechen,
   aber auch nicht leicht zu uebersehen sein. */
.fertig-glocke { position: relative; }
.fertig-glocke-btn {
  background: none; border: none; color: #fff; font-size: 1.4em; cursor: pointer;
  padding: 4px 8px; position: relative; touch-action: manipulation;
}
.fertig-glocke.blinkt .fertig-glocke-btn { animation: fertig-glocke-blinken 1.1s ease-in-out infinite; }
@keyframes fertig-glocke-blinken {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.fertig-glocke-badge {
  position: absolute; top: 0; right: 0; background: var(--kupfer); color: #fff;
  border-radius: 10px; font-size: .5em; font-weight: bold; padding: 2px 6px; line-height: 1;
}
.fertig-glocke-liste {
  display: none; position: absolute; right: 0; top: 100%; margin-top: 6px;
  background: #fff; color: #1a1a1a; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  min-width: 220px; max-width: 90vw; padding: 10px; z-index: 200;
}
.fertig-glocke-liste.sichtbar { display: block; }
.fertig-glocke-leer { margin: 4px 0; color: var(--grau); font-size: .9em; }
.fertig-glocke-zeile {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 4px; border-bottom: 1px solid #eee; font-weight: 600;
}
.fertig-glocke-ok {
  background: var(--gruen); color: #fff; border: none; border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-weight: bold; flex-shrink: 0;
}
.fertig-glocke-alle { width: 100%; margin-top: 8px; }
main { max-width: 1100px; margin: 16px auto; padding: 0 14px 90px; }
.fusszeile {
  max-width: 1100px; margin: 0 auto; padding: 12px 14px 24px; text-align: center;
  font-size: .8em; color: var(--grau);
}
h1 { color: var(--navy); font-size: 1.5em; }
@media (prefers-color-scheme: dark) { h1, h2 { color: var(--gold); } }
.card {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.card-schmal { max-width: 460px; }
.servicekasse-liste { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Gesamtrechnung: Platzauswahl + Tisch-Vorschau ---------- */
.gr-layout { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.gr-formular { flex: 1 1 320px; min-width: 280px; }
.gr-vorschau-wrap { flex: 0 1 300px; min-width: 260px; }
.gr-vorschau {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 280px; margin: 0 auto;
  background: #e8ede9; border: 2px dashed #bbb; border-radius: 10px; overflow: hidden;
}
@media (prefers-color-scheme: dark) { .gr-vorschau { background: #1a2420; } }
.gr-vorschau-tisch {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--navy); border-radius: 6px;
  font-size: .75em; font-weight: bold; text-align: center; padding: 2px; overflow: hidden;
}
.gr-vorschau-tisch.rund { border-radius: 50%; }
@media (prefers-color-scheme: dark) { .gr-vorschau-tisch { background: #1f2530; color: #e8e8e8; } }
.gr-vorschau-platz {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85em; font-weight: bold; color: #fff;
  background: #9db0c4; touch-action: manipulation;
}
.gr-vorschau-platz.offen { background: var(--rot); cursor: pointer; }
.gr-vorschau-platz.offen.ausgewaehlt { background: var(--gold); color: #1a1a1a; }
.gr-vorschau-platz:active { transform: translate(-50%, -50%) scale(.9); }
.gr-dot-ausgewaehlt { background: var(--gold); }
.gr-dot-abgewaehlt { background: var(--rot); }
.gr-dot-kein { background: #9db0c4; }
.form-inline { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
form label { display: flex; flex-direction: column; font-size: .85em; color: var(--grau); gap: 4px; margin-bottom: 10px; }
/* In form-inline übernimmt schon "gap" den Abstand beim Zeilenumbruch - das margin-bottom
   der Labels würde bei align-items:end sonst Buttons/lose Inputs ohne eigenes margin-bottom
   sichtbar höher wirken lassen als die Label-Inhalte daneben (z.B. Benutzerverwaltung: Passwort-
   Input ohne Label neben dem "ändern"-Button). */
.form-inline label { margin-bottom: 0; }
.checkbox-inline { flex-direction: row !important; align-items: center; gap: 6px !important; }
form input, form select, form textarea {
  font-size: .95em; padding: 4px 6px; border: 1px solid #ccc; border-radius: 6px; min-height: 30px;
}
form textarea { min-height: 90px; }
/* Zahlen-Seite (Bargeld-Rechner "Gegeben"/"Soll bezahlen"): bewusst bei der größeren,
   touch-optimierten Feldgröße belassen - hier wird im hektischen Servicebetrieb schnell mit
   echtem Bargeld gerechnet, anders als bei den Verwaltungsseiten oben. */
.bar-rechner input { font-size: 1.05em; padding: 12px; min-height: 46px; }
/* "Soll bezahlen": Ändern-Button direkt neben dem Feld, damit der vorbelegte Betrag (z.B. bei
   "machen Sie 13") per Antippen markiert wird, statt ihn erst manuell markieren zu müssen. */
.feld-mit-aendern-btn { display: flex; align-items: center; gap: 8px; }
.feld-mit-aendern-btn input { flex: 1; min-width: 0; }
.btn-aendern {
  flex: 0 0 auto; min-height: 46px; min-width: 46px; font-size: 1.2em;
  border: 1px solid var(--grau); background: transparent; border-radius: 8px;
  cursor: pointer; touch-action: manipulation;
}
@media (prefers-color-scheme: dark) { .btn-aendern { border-color: #555; } }
.checkbox, .radio { flex-direction: row !important; align-items: center; gap: 8px !important; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 13px 20px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.05em;
  min-height: 48px;
  touch-action: manipulation;
}
.btn:active { background: #022246; transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--gruen); }
.btn-primary:active { background: #257f40; }
.btn-gefahr { background: var(--rot); }
.btn-klein { padding: 8px 14px; font-size: .9em; min-height: 40px; }
.btn-gross { width: 100%; font-size: 1.25em; min-height: 60px; margin-top: 12px; font-weight: bold; }
.btn-zurueck { background: transparent; color: var(--navy); padding: 8px 4px; min-height: 40px; }
@media (prefers-color-scheme: dark) { .btn-zurueck { color: var(--gold); } }
.tabelle { width: 100%; border-collapse: collapse; background: #fff; }
.tabelle th, .tabelle td { padding: 10px 10px; border-bottom: 1px solid #eee; text-align: left; }
.tabelle th.num, .tabelle td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle th { background: #f0f1f3; }
.tabelle tr.inaktiv { opacity: .5; }
.tabelle-kompakt th, .tabelle-kompakt td { padding: 4px 8px; font-size: .88em; }
.tabelle-kompakt .btn-icon { padding: 3px 7px; font-size: 1em; min-width: 30px; min-height: 30px; }
.artikel-aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-icon { padding: 6px 10px; font-size: 1.1em; line-height: 1; min-width: 40px; }
.artikel-bearbeiten-popup-form { display: flex; flex-direction: column; gap: 4px; }
.geraet-warten { text-align: center; }
.geraet-qr { width: 220px; height: 220px; margin: 16px auto; display: block; border: 1px solid #eee; border-radius: 8px; }
.geraet-entscheidung-buttons { display: flex; gap: 10px; margin-top: 10px; }
.geraet-entscheidung-buttons .btn { flex: 1 1 0; }
.gesamt { font-size: 1.4em; font-weight: bold; }
.hinweis { color: var(--grau); font-style: italic; }
.badge-gesetzt, .badge-nicht-gesetzt {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .78em;
  font-weight: normal; font-style: normal; margin-left: 4px;
}
.badge-gesetzt { background: var(--gruen); color: #fff; }
.badge-nicht-gesetzt { background: #ccc; color: #333; }
.hinweis-inline { color: var(--grau); font-size: .85em; }
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 1.05em; }
.flash-ok { background: #e3f6e6; color: #1a6b30; }
.flash-err { background: #fce4e2; color: #a8271b; }

.schulung-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-weight: bold;
  background: #fff3cd; color: #7a5b00; border: 2px solid #e0b000;
}
@media (prefers-color-scheme: dark) {
  .schulung-banner { background: #4a3b00; color: #ffe27a; border-color: #a88400; }
}
.standbetrieb-banner {
  padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-weight: bold;
  background: #e0ecff; color: #0a3d7a; border: 2px solid #3d7ad0;
}
@media (prefers-color-scheme: dark) {
  .standbetrieb-banner { background: #12294a; color: #a9c9ff; border-color: #3d6fb0; }
}

/* ---------- Tischplan ---------- */
.bereich-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tischplan-ansicht-umschalten { margin-bottom: 12px; }
.betriebsart-umschalten { display: inline-block; margin-left: 6px; }
.betriebsart-umschalten .btn {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5);
  min-height: auto; padding: 10px 14px;
}
.betriebsart-umschalten .btn:active { background: rgba(255,255,255,.12); }
.bereich-tab {
  padding: 12px 24px; border-radius: 8px; border: 2px solid var(--navy);
  background: #fff; color: var(--navy); text-decoration: none; font-weight: bold;
  font-size: 1.1em; min-height: 48px; display: inline-flex; align-items: center;
  touch-action: manipulation;
}
.bereich-tab.aktiv { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) {
  .bereich-tab { background: transparent; color: var(--gold); border-color: var(--gold); }
  .bereich-tab.aktiv { background: var(--gold); color: #1a1a1a; }
}
.bereich-tab-mit-loeschen { position: relative; display: inline-flex; }
.bereich-tab-mit-loeschen form { position: absolute; top: -6px; right: -6px; }
.bereich-tab-loeschen {
  width: 20px; height: 20px; min-height: 20px; border-radius: 50%; border: none;
  background: var(--rot); color: #fff; font-size: .8em; padding: 0; line-height: 1;
  cursor: pointer; touch-action: manipulation;
}
.bereich { margin-bottom: 26px; }
.plan-flaeche {
  position: relative;
  width: 100%;
  height: clamp(320px, 60vh, 560px);
  background: #e8ede9;
  border: 2px dashed #bbb;
  border-radius: 10px;
  overflow: hidden;
}
.plan-flaeche.plan-gross { height: clamp(460px, 78vh, 900px); margin-bottom: 16px; }
@media (prefers-color-scheme: dark) { .plan-flaeche { background: #1a2420; } }
.plan-tisch {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 4px;
  min-width: 60px;
  min-height: 34px;
  text-align: center;
}
.plan-tisch.rund { border-radius: 50%; }
.plan-tisch.gesamtrechnung-moeglich { border-color: var(--gold); border-style: dashed; }
.plan-tisch-gesamtrechnung {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); text-decoration: none; font-size: .9em;
  touch-action: manipulation;
}
.plan-tisch-gesamtrechnung:active { transform: scale(.9); }
.plan-editor .draggable { cursor: grab; user-select: none; touch-action: none; }
.plan-tisch-name { font-weight: bold; font-size: .85em; }
.plan-tisch-reservierung {
  display: block; max-width: 100%; font-size: .7em; color: #01152b; text-decoration: none;
  background: var(--gold); border-radius: 6px; padding: 1px 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; touch-action: manipulation;
}
.reservierung-inline-form { margin: 0; }
.tisch-liste { margin-top: 10px; margin-bottom: 30px; }
.tisch-liste-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.benutzer-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.benutzer-passwort-form { gap: 6px; }
.benutzer-passwort-form input { padding: 6px 8px; font-size: .9em; min-height: 32px; width: 130px; }
.benutzer-rolle-form select { padding: 4px 6px; font-size: .9em; min-height: 40px; }
/* einheitliche Zeilenhöhe, egal ob Rolle-Zelle nur Text (Administration) oder ein Select-Feld enthält;
   ohne das eigene min-height würde das Select sonst die globale "form select { min-height: 46px }"-Regel
   erben und die Zeile höher als alle anderen machen */
.benutzer-zeile td { min-height: 60px; vertical-align: middle; }
.plan-platz {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  text-decoration: none; font-size: .9em; font-weight: bold; color: #fff;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
}
.plan-platz:active { transform: translate(-50%, -50%) scale(.95); }
.plan-platz.frei { background: var(--gruen); }
.plan-platz.belegt { background: var(--rot); }
.plan-platz.reserviert-heute { background: var(--kupfer); }
.plan-platz.aktuell { background: var(--gold); color: #1a1a1a; }
.plan-platz.ueberfaellig { animation: platz-blinken 1s ease-in-out infinite; }
@keyframes platz-blinken {
  0%, 100% { background: var(--rot); box-shadow: 0 0 0 0 rgba(231,36,14,.7); }
  50% { background: #ff9800; box-shadow: 0 0 0 6px rgba(255,152,0,0); }
}

/* Einfache Tischplan-Ansicht (Default, ohne Pro-Modul) - Liste statt frei positionierter Karte */
.tischliste-einfach {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
  margin-top: 12px;
}
.tisch-karte-einfach {
  border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; background: #fff;
}
@media (prefers-color-scheme: dark) { .tisch-karte-einfach { background: #1e1e1e; border-color: #444; } }
.tisch-karte-einfach-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.platzliste-einfach { display: flex; flex-wrap: wrap; gap: 8px; }
.platz-btn-einfach {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 8px;
  text-decoration: none; font-size: 1em; font-weight: bold; color: #fff;
  touch-action: manipulation;
}
/* Für den Verschieben-Dialog (Einfach-Ansicht) sind manche dieser Kacheln echte <button>
   statt <a> - Browser-Standardstyling (Rahmen/Hintergrund/Schrift) zurücksetzen. */
button.platz-btn-einfach { border: none; font: inherit; cursor: pointer; }
.platz-btn-einfach:active { transform: scale(.95); }
.platz-btn-einfach.frei { background: var(--gruen); }
.platz-btn-einfach.belegt { background: var(--rot); }
.platz-btn-einfach.reserviert-heute { background: var(--kupfer); }
.platz-btn-einfach.ueberfaellig { animation: platz-blinken 1s ease-in-out infinite; }
.platz-btn-einfach.reserve { box-shadow: 0 0 0 3px #6b7d94; }
.platz-btn-einfach.aktuell { background: var(--gold); color: #1a1a1a; }
.badge-reserviert {
  font-size: .75em; color: #01152b; text-decoration: none; background: var(--gold);
  border-radius: 6px; padding: 2px 7px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%;
}
.plan-platz-form { position: absolute; transform: translate(-50%, -50%); }
.plan-platz-form .plan-platz {
  position: static; transform: none; border: none; padding: 0; margin: 0;
  font-family: inherit; cursor: pointer;
}
.plan-platz-form .plan-platz:active { transform: scale(.95); }
.dot.aktuell { background: var(--gold); }
.plan-platz-editor {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: bold; font-size: .9em;
  transform: translate(-50%, -50%);
}
@media (prefers-color-scheme: dark) { .plan-platz-editor { background: var(--gold); color: #1a1a1a; } }
.platz-loeschen-form { position: absolute; top: -6px; right: -6px; }
.platz-loeschen {
  width: 20px; height: 20px; min-height: 20px; border-radius: 50%; border: none;
  background: var(--rot); color: #fff; font-size: .8em; padding: 0; line-height: 1;
  cursor: pointer; touch-action: manipulation;
}
.legende { display: flex; gap: 8px 20px; align-items: center; color: var(--grau); flex-wrap: wrap; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot.frei { background: var(--gruen); }
.dot.belegt { background: var(--rot); }
.dot.ueberfaellig { background: #ff9800; }
.dot.reserviert-heute { background: var(--kupfer); }
.dot.reserve { background: #6b7d94; }

/* ---------- Reserve-Stühle ---------- */
.plan-platz.reserve { box-shadow: 0 0 0 3px #6b7d94; }
.reserve-pool {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  background: #eef2f7; border: 2px dashed #9fb0c3;
}
@media (prefers-color-scheme: dark) { .reserve-pool { background: #1c2733; border-color: #45566b; } }
.reserve-pool-titel { font-weight: 600; margin-bottom: 8px; font-size: .9em; color: var(--grau); }
.reserve-pool-liste { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-platz.reserve-chip {
  position: static; transform: none; background: #6b7d94; border: 2px dashed #fff;
}
.reserve-verwaltung-eintrag { display: inline-flex; align-items: center; gap: 8px; }
.reserve-zurueckgeben { margin: 10px 0 16px; }
.plan-tisch-klickbar { padding: 0; cursor: pointer; touch-action: manipulation; }
.plan-tisch-klickbar:active { background: #eee; }
@media (prefers-color-scheme: dark) { .plan-tisch-klickbar:active { background: #2a3140; } }
.plan-tisch-btn {
  all: unset; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: bold; font-size: .85em; cursor: pointer; touch-action: manipulation;
  color: inherit; box-sizing: border-box;
}
.plan-platz-info { cursor: default; }
.plan-platz-info:active { transform: translate(-50%, -50%); }

/* ---------- Bestellseite: zweispaltig ab Tablet-Breite, als 2x2-Kastenraster (nach Skizze):
   oben Platzleiste (links) + Aktionsleiste (rechts) auf gleicher Höhe, darunter links
   Kategorien+Artikel gestapelt, rechts die Bestellung - über die volle restliche Höhe. Ab dieser
   Breite steht die ganze Ansicht fest (kein Seiten-Scroll, siehe .body-fest/.main-fest) -
   stattdessen scrollen Kategorien horizontal und Artikel-Grid/Bestellung jeweils für sich
   vertikal, jede Spalte unabhängig von der anderen. Höhe läuft über eine echte Flex-Kette
   body → main → bestellseite-layout (flex:1, min-height:0 auf jeder Zwischenebene) statt über
   einen geschätzten "calc(100vh - Xpx)" Fixwert - Kopfleiste/Fußzeile dürfen dadurch beliebig
   hoch sein (Zeilenumbruch, andere Zoomstufe, Gerät...), die Bestellung/Artikel-Bereiche
   erweitern bzw. verkleinern sich automatisch um genau den Rest. Unterhalb von 860px
   (Handy/Tablet hochkant) bleibt die Seite normal scrollend und einspaltig - dafür wird
   body.body-fest/main.main-fest dort bewusst NICHT eingeschränkt (Regeln nur in der
   Media-Query). */
main.main-fest { max-width: 1100px; }
/* Überschriften auf der Bestellseite ca. 40% kleiner (Tisch/Platz-Titel + "Artikel"/"Bestellung")
   - sparen Platz, der bei der festen Höhe (.main-fest) sonst dem scrollenden Inhalt fehlt. */
main.main-fest h1, main.main-fest h2 { font-size: .9em; }
@media (min-width: 860px) {
  body.body-fest { display: flex; flex-direction: column; min-height: 100vh; }
  body.body-fest > .topbar, body.body-fest > .fusszeile { flex: 0 0 auto; }
  body.body-fest > main.main-fest {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    padding-bottom: 10px;
  }
  main.main-fest > .bestellseite-layout { flex: 1 1 auto; min-height: 0; }
}
.bestellseite-layout { display: flex; flex-direction: column; gap: 16px; }
.spalte-warenkorb { width: 100%; order: 1; }
.spalte-artikel { width: 100%; order: 2; min-width: 0; }
@media (min-width: 860px) {
  .bestellseite-layout { flex-direction: row; height: 100%; }
  .spalte-artikel {
    flex: 2 1 0; order: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0;
  }
  .spalte-warenkorb {
    flex: 1 1 0; order: 2; display: flex; flex-direction: column; gap: 10px; min-height: 0;
  }
}

/* Platzleiste (links oben) und Aktionsleiste (rechts oben): eigene Kästen auf gleicher Zeile,
   feste Höhe (reservieren den Platz auch wenn leer, damit beide Spalten oben bündig bleiben).
   EIN Container statt vorher verschachtelter Box-in-Box - die doppelte Verschachtelung hatte
   zwei overflow-x:auto-Ebenen erzeugt (jede erzwingt implizit auch overflow-y:auto), wodurch
   die nach oben herausragenden Mengen-Badges an den Aktions-Symbolen (top:-6px) direkt am Rand
   der inneren Box abgeschnitten wurden, ohne das Padding der äußeren Box zu berücksichtigen.
   Außerdem min-height von 56 auf 64px erhöht, damit auch bei nur einer Ebene genug Luft über
   den 40px hohen Symbolen bleibt. */
#platzleiste-inhalt, #aktionen-inhalt {
  background: #fff; border-radius: 10px; padding: 8px 12px; min-height: 64px;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex: 0 0 auto;
}
@media (prefers-color-scheme: dark) { #platzleiste-inhalt, #aktionen-inhalt { background: #1f2530; } }
#aktionen-inhalt { justify-content: flex-end; }
.warenkorb-gesamt-inline { font-weight: bold; font-size: 1.05em; margin-right: 2px; white-space: nowrap; }
.btn-aktion-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 40px; width: 40px; border-radius: 10px; border: none; background: var(--navy);
  color: #fff; font-size: 1.1em; line-height: 1; cursor: pointer; text-decoration: none;
  touch-action: manipulation; padding: 0;
}
.btn-aktion-icon:active { transform: scale(.94); }
.btn-aktion-icon.btn-senden { background: var(--kupfer); }
.btn-aktion-icon.btn-tisch-senden { background: var(--navy); }
.btn-aktion-icon.btn-zahlen { background: var(--gruen); }
.btn-aktion-badge {
  position: absolute; top: -6px; right: -6px; background: var(--gold); color: #1a1a1a;
  border-radius: 10px; font-size: .45em; font-weight: bold; padding: 3px 5px; line-height: 1;
  min-width: 14px; text-align: center;
}

/* ---------- Warenkorb (Bestellung je Platz) ---------- */
.warenkorb-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.warenkorb-kopf h2 { margin: 0; }
/* Ab 860px füllt die Bestellung-Karte die ganze restliche Höhe der rechten Spalte, der Kopf
   (Überschrift + Tisch wechseln) bleibt fest oben, nur die Positionsliste scrollt für sich. */
@media (min-width: 860px) {
  #warenkorb-inhalt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #warenkorb-inhalt .card.warenkorb {
    flex: 1 1 auto; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; overflow: hidden;
  }
  #warenkorb-inhalt .cart-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
.gruppen-karte > summary { cursor: pointer; list-style: none; }
.gruppen-karte > summary::-webkit-details-marker { display: none; }
.gruppen-karte > summary::before {
  content: '▸'; display: inline-block; margin-right: 8px; color: var(--grau);
  transition: transform .15s;
}
.gruppen-karte[open] > summary::before { transform: rotate(90deg); }
.gruppen-inhalt { margin-top: 14px; }
.statistik-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.statistik-chart-wrapper { width: 100%; overflow-x: auto; }
#statistik-chart { display: block; width: 100%; }
.statistik-legende { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 4px; font-size: .85em; color: var(--grau); }
.statistik-legende span { display: inline-flex; align-items: center; gap: 6px; }
.statistik-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.statistik-swatch-linie { border-radius: 50%; }
.statistik-zeittabelle { margin-top: 14px; }
.statistik-tag-zeile { cursor: pointer; }
.statistik-tag-zeile:hover { background: rgba(0,0,0,.03); }
@media (prefers-color-scheme: dark) { .statistik-tag-zeile:hover { background: rgba(255,255,255,.06); } }
.statistik-aufklapp-pfeil { color: var(--grau); width: 18px; transition: transform .15s; }
.statistik-tag-zeile.statistik-tag-offen .statistik-aufklapp-pfeil { transform: rotate(90deg); }
.statistik-tag-detail td { padding: 0 10px 14px; border-bottom: 1px solid #eee; }
.statistik-tag-artikel { margin: 0; }
.statistik-tag-artikel th, .statistik-tag-artikel td { padding: 6px 10px; font-size: .92em; }
.statistik-sortierbar thead th { cursor: pointer; user-select: none; white-space: nowrap; }
.statistik-sortierbar thead th:hover { color: var(--gold); }
.statistik-sortierbar thead th.sort-auf::after { content: ' \25B2'; font-size: .75em; }
.statistik-sortierbar thead th.sort-ab::after { content: ' \25BC'; font-size: .75em; }
.gruppen-titel-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gruppen-name-form { display: flex; align-items: center; gap: 4px; }
.gruppen-name-eingabe {
  font-size: 1.2em; font-weight: 600; border: 1px solid transparent; border-radius: 4px;
  padding: 2px 6px; min-width: 120px; background: transparent; color: inherit;
}
.gruppen-name-eingabe:hover, .gruppen-name-eingabe:focus {
  border-color: var(--grau); background: rgba(0,0,0,.03);
}
@media (prefers-color-scheme: dark) {
  .gruppen-name-eingabe:hover, .gruppen-name-eingabe:focus { background: rgba(255,255,255,.06); }
}
.cart-liste { display: flex; flex-direction: column; gap: 8px; }
.cart-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 4px; border-bottom: 1px solid #eee;
}
@media (prefers-color-scheme: dark) { .cart-zeile { border-color: #333; } }
.cart-info { flex: 1 1 160px; min-width: 140px; }
.cart-name { font-weight: 600; font-size: 1.05em; }
.cart-detail { color: var(--grau); font-size: .85em; }
.tag {
  display: inline-block; background: var(--gold); color: #1a1a1a;
  border-radius: 4px; padding: 1px 6px; font-size: .75em; font-weight: bold;
}
.hauptgang-toggle {
  margin-top: 4px; font-size: .78em; padding: 5px 10px; border-radius: 12px;
  border: 1px solid var(--grau); background: transparent; color: var(--grau); cursor: pointer;
  touch-action: manipulation;
}
.hauptgang-toggle.aktiv { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: bold; }
@media (prefers-color-scheme: dark) { .hauptgang-toggle { color: #aaa; border-color: #555; } }
.notiz-btn {
  margin-top: 4px; font-size: .78em; padding: 5px 10px; border-radius: 12px;
  border: 1px solid var(--grau); background: transparent; color: var(--grau); cursor: pointer;
  touch-action: manipulation; display: block;
}
@media (prefers-color-scheme: dark) { .notiz-btn { color: #aaa; border-color: #555; } }
.cart-notiz {
  font-size: .85em; font-weight: bold; color: var(--rot); background: rgba(231,36,14,.1);
  border-radius: 6px; padding: 3px 8px; margin-top: 4px; display: inline-block; width: fit-content;
}
.notiz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.notiz-chip {
  border: 1px solid var(--gold); background: transparent; color: var(--navy); border-radius: 999px;
  padding: 6px 12px; font-size: .85em; cursor: pointer; touch-action: manipulation;
}
@media (prefers-color-scheme: dark) { .notiz-chip { color: var(--gold); } }
.notiz-textarea {
  width: 100%; border: 2px solid #d7dbe3; border-radius: 10px; padding: 10px; font: inherit;
  resize: vertical;
}
@media (prefers-color-scheme: dark) { .notiz-textarea { background: #14181f; color: #e8e8e8; border-color: #3a4356; } }
.tag-storniert {
  display: inline-block; background: var(--rot); color: #fff;
  border-radius: 4px; padding: 2px 10px; font-size: .55em; font-weight: bold;
  vertical-align: middle;
}
.tag-fertig { background: var(--gruen); color: #fff; }
.tag-ungesendet { background: var(--kupfer); color: #fff; }
/* Platznummer je Position (Tischbestellung) - bewusst dezenter/grau statt Gold, damit sie neben
   "mitnehmen"/Status-Tags nicht die Aufmerksamkeit auf sich zieht, aber trotzdem klein sichtbar ist. */
.tag-platz { background: #e2e4e8; color: #444; font-weight: 600; }
@media (prefers-color-scheme: dark) { .tag-platz { background: #333c4a; color: #cfd6e0; } }
.btn-senden { background: var(--kupfer); }
.btn-senden:active { background: #95583a; }
.btn-tisch-senden { background: var(--navy); }
.btn-tisch-senden:active { background: #0d1e33; }
.platz-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border-radius: 20px; border: 2px solid #ccc; background: #f0f1f3; color: #1a1a1a;
  text-decoration: none; font-weight: bold; touch-action: manipulation; flex: 0 0 auto;
}
.platz-chip.aktiv { border-color: var(--navy); background: var(--navy); color: #fff; }
.platz-chip.hat-ungesendet:not(.aktiv) { border-color: var(--kupfer); }
.platz-chip-badge {
  display: inline-block; background: var(--kupfer); color: #fff; border-radius: 10px;
  padding: 1px 7px; font-size: .8em; font-weight: bold;
}
.plan-tisch-aufnehmen {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff; text-decoration: none; font-size: .9em;
  touch-action: manipulation;
}
.plan-tisch-aufnehmen:active { transform: scale(.9); }
.stepper { display: flex; align-items: center; gap: 8px; }
.btn-step {
  width: 44px; height: 44px; border-radius: 8px; border: 1px solid #ccc;
  background: #f0f1f3; color: #1a1a1a; font-size: 1.3em; font-weight: bold; cursor: pointer;
  touch-action: manipulation; line-height: 1;
}
.btn-step:active { background: #dcdfe4; }
.btn-step:disabled { opacity: .35; cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  .btn-step { background: #2a3140; color: #e8e8e8; border-color: #4a5468; }
  .btn-step:active { background: #3a4356; }
}
.cart-menge { min-width: 28px; text-align: center; font-size: 1.1em; font-weight: bold; }
.cart-summe { min-width: 80px; text-align: right; font-weight: bold; font-size: 1.05em; }
.cart-zeile-kombo { border-left: 3px solid #8b5cf6; padding-left: 8px; }
.cart-kombo-teil { margin-top: 2px; }
.card.inaktiv { opacity: .6; }
.kombo-toggle-form { margin-top: 8px; }

/* ---------- Kombo-Auswahl (Slots mit mehreren Optionen) ---------- */
.kombo-picker {
  position: fixed; inset: 0; z-index: 500; background: rgba(1, 21, 43, .55);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.kombo-picker.versteckt { display: none; }
.kombo-picker-karte {
  background: #fff; width: 100%; max-width: 480px; border-radius: 16px 16px 0 0;
  padding: 18px; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 640px) {
  .kombo-picker { align-items: center; }
  .kombo-picker-karte { border-radius: 16px; }
}
@media (prefers-color-scheme: dark) { .kombo-picker-karte { background: #1f2530; color: #e8e8e8; } }
.kombo-picker-kopf { display: flex; align-items: baseline; justify-content: space-between; font-weight: bold; font-size: 1.15em; }
.picker-slot { display: flex; flex-direction: column; gap: 8px; }
.picker-slot .slot-label {
  font-size: .78em; text-transform: uppercase; letter-spacing: .04em; font-weight: bold; color: var(--grau);
}
.picker-optionen { display: flex; flex-direction: column; gap: 8px; }
.picker-option {
  border: 2px solid #d7dbe3; border-radius: 10px; background: #fff; padding: 12px;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer; touch-action: manipulation;
  min-height: 48px;
}
.picker-option[aria-pressed="true"] { border-color: var(--gold); background: #fdf3dc; }
@media (prefers-color-scheme: dark) {
  .picker-option { background: #14181f; color: #e8e8e8; border-color: #3a4356; }
  .picker-option[aria-pressed="true"] { background: #3a331a; }
}
.kombo-picker-fuss { display: flex; gap: 10px; }
.kombo-picker-fuss .btn-primary { flex: 1; }
.kombo-picker-fuss .btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.picker-option-mit-preis { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.picker-option-mit-preis span:last-child { color: var(--gold); font-weight: bold; }

/* ---------- Artikel-Auswahl (Tap-Grid) ---------- */
.modus-umschalter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.modus-btn {
  padding: 12px 20px; border-radius: 8px; border: 2px solid var(--navy); background: #fff;
  color: var(--navy); font-size: 1.05em; font-weight: bold; cursor: pointer; min-height: 48px;
  touch-action: manipulation;
}
.modus-btn.aktiv { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) {
  .modus-btn { background: transparent; color: var(--gold); border-color: var(--gold); }
  .modus-btn.aktiv { background: var(--gold); color: #1a1a1a; }
}
/* Kategorien laufen horizontal als Reihe von Kacheln oberhalb des Artikel-Grids (statt als
   Sidebar links) - macht die Artikel-Spalte in der Zweispalten-Ansicht breiter nutzbar. Ab
   860px steht die Kategorien-Zeile fest und scrollt bei Bedarf horizontal (statt umzubrechen),
   damit die feste Gesamthöhe der Bestellseite (.main-fest) nicht durch Umbruch ins Wanken
   gerät - das Artikel-Grid darunter scrollt dafür unabhängig vertikal für sich. */
.artikel-card { display: flex; flex-direction: column; }
.artikel-bereich { display: flex; flex-direction: column; gap: 12px; }
.kategorien-verschieben-btn { margin-bottom: 4px; }
.kategorien-verschieben-btn.aktiv { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }
.kategorie-tabs {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
}
.kat-zeile { display: flex; align-items: stretch; gap: 4px; flex: 0 0 auto; height: 40px; }
.kat-tab {
  flex: 0 0 auto; padding: 10px 16px; border-radius: 20px; border: 1px solid #ccc; text-align: center;
  background: #f0f1f3; color: #333; font-size: .95em; cursor: pointer; min-height: 40px; white-space: nowrap;
}
.kat-tab.aktiv { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: bold; }
.kat-pfeile { display: none; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.kategorie-tabs.verschieben-modus .kat-pfeile { display: flex; }
.kat-pfeil {
  flex: 1 1 0; width: 36px; border-radius: 6px; border: 1px solid #ccc; background: #fff;
  color: var(--navy); font-size: .9em; cursor: pointer; touch-action: manipulation; min-height: 21px;
}
.kat-pfeil:disabled { opacity: .3; cursor: default; }
.artikel-panels { min-width: 0; }
.artikel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
@media (min-width: 860px) {
  .artikel-card { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .artikel-bereich { flex: 1 1 auto; min-height: 0; }
  /* 2 Kacheln untereinander statt einer einzelnen langen Zeile - bei gleicher Kategorien-Anzahl
     nur noch halb so weit horizontal zu scrollen. Erster Versuch war flex-flow:column wrap -
     das wrapt in echten Browsern (per Live-Test nachgewiesen, auch mit einem komplett
     losgelösten Minimal-Beispiel) trotz gesetzter Höhe zuverlässig NICHT, offenbar eine
     bekannte Schwäche von mehrzeiligem Column-Flex-Wrap. Stattdessen CSS Grid mit
     grid-auto-flow:column - dafür gemacht (Karten/Chip-Listen, die spaltenweise befüllt werden
     und bei Bedarf horizontal scrollen), im selben Live-Test zuverlässig funktioniert. Grid
     bringt außerdem gratis gleich hohe Zellen (align-items:stretch ist Grid-Default), die
     einzelne "Kombos"-Kachel (kein .kat-zeile-Wrapper, sonst minimal höher) muss dafür nicht
     mehr per Hand auf 40px gezwungen werden. */
  .kategorie-tabs {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 40px); gap: 8px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex: 0 0 auto; padding-bottom: 4px;
  }
  .artikel-panels { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
@media (max-width: 480px) {
  .kat-tab { padding: 8px 12px; font-size: .9em; min-height: 36px; }
  .artikel-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
}
.versteckt { display: none !important; }
.artikel-kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 88px; padding: 12px 8px; border-radius: 10px;
  border: 2px solid var(--navy); background: #fff; cursor: pointer; touch-action: manipulation;
  border-left-width: 6px;
  -webkit-appearance: none; appearance: none; font-family: inherit; color: #1a1a1a;
}
.artikel-kachel.getraenk { border-left-color: var(--gold); }
.artikel-kachel.speise { border-left-color: var(--gruen); }
.artikel-kachel.gutschein { border-left-color: var(--navy); }
.artikel-kachel.kombo { border-left-color: #8b5cf6; }
.artikel-kachel.variante { border-left-color: #0d9488; position: relative; }
.groessen-pille {
  position: absolute; top: 6px; right: 6px; background: #0d9488; color: #fff;
  font-size: .65em; font-weight: bold; padding: 2px 7px; border-radius: 999px;
}
.artikel-kachel.extras { border-left-color: var(--kupfer); position: relative; }
.extras-pille {
  position: absolute; top: 6px; right: 6px; background: var(--kupfer); color: #fff;
  font-size: .65em; font-weight: bold; padding: 2px 7px; border-radius: 999px;
}
@media (prefers-color-scheme: dark) { .artikel-kachel.gutschein { border-left-color: #6b7ba8; } }
.artikel-kachel:active { transform: scale(.96); background: #f0f1f3; }
.artikel-kachel-foto { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; margin-bottom: 2px; }
.artikel-name { font-weight: 600; text-align: center; font-size: 1.02em; }
.artikel-preis { color: var(--grau); font-size: .9em; }
.artikel-foto-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
#bearbeiten-foto-vorschau-wrap { display: flex; align-items: center; gap: 10px; }
#bearbeiten-foto-vorschau-wrap .artikel-foto-mini { width: 56px; height: 56px; }

/* ---------- Zahlung ---------- */
.rabatt-box { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: #f0f1f3; }
@media (prefers-color-scheme: dark) { .rabatt-box { background: #262c38; } }
.rabatt-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.rabatt-toggle input { width: 20px; height: 20px; }
#rabatt-felder { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.rabatt-modus-wahl { display: flex; gap: 4px; flex: 0 0 auto; }
.rabatt-modus-btn.aktiv { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: bold; }
#rabatt-wert { flex: 1 1 100px; min-width: 0; min-height: 40px; font-size: 1.05em; padding: 6px 10px; }
.zahlart-wahl { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.zahlart-btn { min-height: 68px; font-size: 1.3em; justify-content: center; }
.bar-rechner { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.bar-ergebnis {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 1.15em;
  background: #f0f1f3; border-radius: 8px; padding: 12px 16px; margin: 10px 0;
}
.bar-ergebnis > div { white-space: nowrap; }
@media (prefers-color-scheme: dark) { .bar-ergebnis { background: #262c38; } }
@media (max-width: 420px) { .bar-ergebnis { flex-direction: column; } }
.bar-ergebnis .negativ { color: var(--rot); }

/* ---------- Kassenabschlüsse-Menü ---------- */
.kassenabschluesse-wahl { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; max-width: 420px; }

/* ---------- Tages-/Monatsabschluss ---------- */
.abschluss-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.abschluss-datum-picker { min-height: 44px; font-size: 1.05em; padding: 8px 12px; }
.abschluss-datum { color: var(--grau); font-weight: normal; font-size: 1.1em; margin-top: 0; }
.tabelle-summe { font-weight: bold; border-top: 2px solid #ccc; }
@media (prefers-color-scheme: dark) { .tabelle-summe { border-color: #555; } }

/* ---------- Küchenanzeige ---------- */
.kueche-leer { font-size: 1.3em; text-align: center; margin-top: 60px; }
.kueche-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.kueche-tisch {
  background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.1);
  border-top: 6px solid var(--navy);
}
@media (prefers-color-scheme: dark) { .kueche-tisch { background: #1f2530; border-top-color: var(--gold); } }
.kueche-tisch-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.kueche-tisch-kopf h2 { margin: 0; font-size: 1.4em; }
.kueche-kurs { margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee; }
@media (prefers-color-scheme: dark) { .kueche-kurs { border-color: #333; } }
.kueche-kurs-titel {
  font-weight: bold; font-size: .95em; text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: 6px; padding: 2px 8px; border-radius: 4px; display: inline-block; color: #fff;
}
.kueche-kurs-vorspeise .kueche-kurs-titel { background: var(--gruen); }
.kueche-kurs-hauptspeise .kueche-kurs-titel { background: var(--navy); }
.kueche-kurs-nachspeise .kueche-kurs-titel { background: var(--rot); }
.kueche-gericht {
  padding: 8px 0; border-bottom: 1px dashed #ddd;
}
@media (prefers-color-scheme: dark) { .kueche-gericht { border-color: #3a4356; } }
.kueche-gericht:last-child { border-bottom: none; }
.kueche-gericht-zeit {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 6px;
  font-size: .72em; color: var(--grau); margin-bottom: 2px;
}
.kueche-timer { font-variant-numeric: tabular-nums; font-weight: bold; }
.kueche-gericht.ueberfaellig .kueche-timer { color: var(--rot); }
.kueche-gericht-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kueche-gericht-info { display: flex; flex-direction: column; gap: 2px; }
.kueche-platz { font-size: .8em; color: var(--grau); font-weight: bold; }
.kueche-name { font-size: 1.15em; font-weight: 600; }
.kueche-extra-zeile { font-size: .95em; color: var(--grau); padding-left: 12px; }
.kueche-notiz {
  font-size: .95em; font-weight: bold; color: var(--rot); background: rgba(231,36,14,.1);
  border-radius: 6px; padding: 3px 8px; margin-top: 2px; display: inline-block; width: fit-content;
}
.kueche-gericht.ueberfaellig {
  animation: kueche-gericht-blinken 1s ease-in-out infinite;
  border-radius: 6px; padding-left: 8px; padding-right: 8px; margin: 0 -8px;
}
@keyframes kueche-gericht-blinken {
  0%, 100% { background: rgba(231,36,14,.18); }
  50% { background: rgba(255,152,0,.30); }
}

/* Klingel-Benachrichtigung Theke: Küche hat ein Gericht fertiggemeldet (siehe theke.html) -
   bewusst als Vollbild-Banner, damit es auch aus einiger Entfernung von der Theke aus auffaellt. */
.fertig-overlay {
  display: none; position: fixed; inset: 0; z-index: 9998; flex-direction: column; gap: 32px;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: var(--gold); color: var(--navy);
  font-size: 3em; font-weight: 800; line-height: 1.3;
}
.fertig-overlay.sichtbar { display: flex; animation: fertig-overlay-blinken 1s ease-in-out infinite; }
@keyframes fertig-overlay-blinken {
  0%, 100% { background: var(--gold); }
  50% { background: var(--kupfer); }
}
#fertig-overlay-btn {
  font-size: .4em; font-weight: 700; padding: 18px 40px; border-radius: 10px;
  border: none; background: var(--navy); color: var(--gold); cursor: pointer;
}

/* Bleibt sichtbar, bis der Browser den Klingelton per Nutzer-Geste freigegeben hat -
   ohne diesen Hinweis bemerkt niemand, dass die erste Fertigmeldung stumm bleiben wuerde. */
.ton-hinweis {
  position: fixed; top: 10px; right: 10px; z-index: 9999;
  background: var(--kupfer); color: #fff; font-weight: 700; font-size: .95em;
  padding: 8px 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ---------- Hilfeseite ---------- */
#hilfe-stack details.card { padding: 14px 18px; }
.hilfe-summary { cursor: pointer; font-weight: 600; font-size: 1.05em; color: var(--navy); }
@media (prefers-color-scheme: dark) { .hilfe-summary { color: var(--gold); } }
.hilfe-inhalt { margin-top: 10px; }
.hilfe-inhalt p { transition: background-color 1.2s ease; border-radius: 6px; padding: 2px 4px; margin: 6px 0; }
.hilfe-highlight { background-color: rgba(235, 180, 44, .35) !important; }
body.hilfe-modus, body.hilfe-modus * { cursor: help !important; }
body.hilfe-modus [data-hilfe]:hover { outline: 2px solid var(--gold); border-radius: 6px; }
.hilfe-modus-btn {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%; width: 34px; height: 34px; margin-left: 6px; font-weight: bold;
  cursor: pointer; font-size: 1em; line-height: 1;
}
.hilfe-modus-btn.btn-active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }

/* ---------- Selfservice: QR-Druckseite ---------- */
.qr-druck { text-align: center; }
.qr-bild { width: 100%; max-width: 320px; height: auto; margin: 14px 0; border-radius: 8px; }
@media print {
  .nur-bildschirm, .topbar, .fusszeile { display: none !important; }
  .qr-druck { box-shadow: none; }
}