/* ============================================================================
   KassenFlow – POS Terminal Stylesheet
   ============================================================================
   Design: Premium Dark-Theme mit Glassmorphism
   Optimiert für Touch-Displays (kein Hover nötig, große Buttons)
   ============================================================================ */

/* ── CSS Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Primärfarben */
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-card: #1a2035;
  --bg-hover: #243050;
  --bg-active: #2a3a60;

  /* Akzentfarben */
  --accent: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --accent-hover: #818cf8;
  --green: #22c55e;
  --green-glow: rgba(34, 197, 94, 0.25);
  --red: #ef4444;
  --red-glow: rgba(239, 68, 68, 0.2);
  --amber: #f59e0b;
  --amber-glow: rgba(245, 158, 11, 0.2);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  /* Glassmorphism */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.07);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Spacing – Eckenradius über --kf-radius-scale skalierbar (Default 1 = unverändert) */
  --radius-sm: calc(8px * var(--kf-radius-scale, 1));
  --radius-md: calc(12px * var(--kf-radius-scale, 1));
  --radius-lg: calc(16px * var(--kf-radius-scale, 1));
  --radius-xl: calc(20px * var(--kf-radius-scale, 1));

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── Barcode Scanner (Hidden Input) ──────────────────────────────── */
.scanner-input {
  position: fixed;
  top: -100px;
  left: -100px;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
}

/* ── Hauptlayout ─────────────────────────────────────────────────── */
/* ── Benutzer-konfigurierbare UI-Skalierung (über Einstellungen → Ansicht) ──
   Wird per JS in :root gesetzt (kf_ui_sizes_v1 → localStorage).            */
:root {
  --kf-table-size-scale:   1;
  --kf-product-size-scale: 1;
  --kf-cart-width-scale:   1;
}

/* ── PWA-Connectivity: Verkaufssperre + Banner ────────────────────────────
   Banner liegen oben über dem Layout. Hauptcontainer bekommt etwas mehr
   padding-top, wenn Banner aktiv sind, damit nichts überdeckt wird.       */
body.kf-sales-locked .kf-disabled-by-lock {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}
body.kf-sales-locked .pos-container::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    45deg, rgba(185,28,28,0.06) 0 12px, transparent 12px 24px
  );
  pointer-events: none;
  z-index: 999;
}
#kfBannerContainer > * {
  user-select: none;
}

.pos-container {
  display: grid;
  grid-template-columns: 1fr calc(380px * var(--kf-cart-width-scale, 1));
  /* --kf-banner-h = Höhe des festen TESTBETRIEB-/Sperr-Banners (pwa-connectivity.js
     misst sie). App rückt um diese Höhe nach unten + schrumpft entsprechend, damit
     der Banner den Inhalt VERSCHIEBT statt ihn zu VERDECKEN. 0px ohne Banner. */
  margin-top: var(--kf-banner-h, 0px);
  height: calc(100vh - var(--kf-banner-h, 0px));
  height: calc(100dvh - var(--kf-banner-h, 0px));
  gap: 0;
}

/* Produkt-Kacheln skalieren (Tile-Min-Breite) */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(calc(140px * var(--kf-product-size-scale, 1)), 1fr)) !important;
}

/* ══════════════════════════════════════════════════════════════════ */
/* LINKE SEITE: Produkte                                             */
/* ══════════════════════════════════════════════════════════════════ */

.products-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--kf-banner-h, 0px));
  height: calc(100dvh - var(--kf-banner-h, 0px));
  background: var(--bg-primary);
  overflow: hidden;
}

/* ── Top Bar ─────────────────────────────────────────────────────── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--glass-border);
  gap: 16px;
  flex-shrink: 0;
}

.top-bar__left, .top-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.top-bar__center {
  flex: 1;
  max-width: 480px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo__icon {
  font-size: 22px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.logo__text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* TSE Status */
.tse-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--glass);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.tse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tse-dot--online {
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pulse 2s ease infinite;
}

.tse-dot--offline {
  background: var(--red);
  box-shadow: 0 0 8px var(--red-glow);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* Search */
.search-bar {
  position: relative;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.search-bar__input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-bar__input::placeholder {
  color: var(--text-muted);
}

/* Produkt-Suche im Produktbereich (über den Kategorien, immer im Bestell-View).
   Kompakt & linksbündig – NICHT über die volle Breite. */
.pos-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 20px 0;
  padding: 0 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  /* width:100% + seitliche margins (20px) ergab 360+20 = 380px → lief auf dem
     Sunmi 20px rechts aus dem Bild (Betreiber-Foto 18.07.2026). auto füllt den
     Platz ZWISCHEN den margins (box-sizing:border-box). */
  width: auto;
  max-width: 640px;
  box-sizing: border-box;
}
.pos-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pos-search__icon { font-size: 16px; opacity: 0.85; }
.pos-search__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  padding: 12px 0;
  outline: none;
}
.pos-search__input::placeholder { color: var(--text-muted); }
.pos-search__clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
}
.pos-search__clear:hover { background: var(--glass-hover); color: var(--text-primary); }

/* Cashier Info */
.cashier-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cashier-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.cashier-name {
  font-size: 13px;
  font-weight: 600;
}

.cashier-role {
  font-size: 11px;
  color: var(--text-muted);
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

.btn-icon:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
}

/* ── Kategorien ──────────────────────────────────────────────────── */
/* Kategorien STAPELN, wenn sie nebeneinander nicht hinpassen (Betreiber
   04.08.2026, B-5). Vorher: `flex-wrap: nowrap` (Default) + `overflow-x: auto` —
   die Leiste scrollte also seitlich, und `scrollbar-width: none` nahm den
   einzigen Hinweis darauf. GEMESSEN am Verkaufsbildschirm bei 360×648 mit acht
   Kategorien: scrollWidth 1072 gegen clientWidth 360, SIEBEN von zehn
   Einträgen rechts ausserhalb — darunter „Diverses", der Knopf für den freien
   Betrag. Am Touch-Gerät ohne Scrollbalken ist das nicht „versteckt", sondern
   für den Bediener schlicht nicht vorhanden.

   14.08.2026 (Betreiber-Meldung, mit Foto): der frühere `flex-wrap`-Umbruch
   liess die Chips INHALTSBREIT — jede Kategorie so breit wie ihr Name — und die
   Reihen brachen zerklüftet um („Schnäpse und Brände" schob die Reihe auf zwei,
   „Specials" stand allein. O-Ton: „müssen sauber untereinander … in einer
   Flucht liegen, eigentlich wie die … Getränkekacheln auch". Deshalb JETZT ein
   echtes Grid mit GLEICH breiten Spalten — dasselbe Prinzip wie das Produkt-
   Raster (`.product-grid`), damit die Kategorien in einer Flucht stehen. Das
   Grid umbricht in weitere ZEILEN (nie seitlich), die B-5-Invariante
   `scrollWidth <= clientWidth` bleibt also erfüllt (Guard
   e2e-kategorien-stapeln.cjs prüft beide Leisten strukturell). Der eigenständige,
   breitere Pillen-Look bleibt (Betreiber: „dürfen gerne breiter … anders
   aussehen, dass sie … anders wahrgenommen werden"). */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  /* EINHEITLICHE Kachelhöhe: jede Kategorie ist exakt gleich hoch, egal ob ein-
     oder zweizeilig beschriftet (Betreiber 14.08.2026: „die Höhe der Kategorien
     soll bei allen gleich sein … man muss nicht genauer zielen"). Die Höhe
     reicht jetzt für ZWEI Zeilen, damit ein langer Name sauber (max. 2 Zeilen,
     dann „…") umbricht, statt beschnitten in die Nachbarkachel zu überlappen. */
  grid-auto-rows: 56px;
  /* Buttonartig MIT Abstand statt lückenlosem Flächenraster (Betreiber
     17.08.2026: „gestalte sie hübscher, buttonartiger und nicht Windows-95-
     Style"). Löst die frühere gapless/radius-0-Entscheidung vom 14.08.2026
     bewusst ab — NICHT versehentlich zurückdrehen. Die Lücken absorbiert das
     auto-fill/1fr-Grid, die Leiste STAPELT weiterhin, statt seitlich
     hinauszulaufen (B-5, tests/e2e/e2e-kategorien-stapeln.cjs). */
  gap: 8px;
  padding: 12px 20px;
  flex-shrink: 0;
  scrollbar-width: none;
}

.categories::-webkit-scrollbar { display: none; }

/* Zweite Ebene: Unterkategorien der gewählten Oberkategorie (kompakter, abgesetzt). */
.categories--sub {
  padding-top: 0;
  padding-bottom: 8px;
}
.categories--sub .cat-btn {
  padding: 6px 12px;
  font-size: 12px;
  /* Zweite Ebene minimal zurückhaltender als die Oberkategorien, aber weiterhin
     erkennbar ein Button (nicht mehr randlos/transparent). */
  font-weight: 500;
  box-shadow: none;
}
.categories--sub .cat-btn--active {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff;
  border-color: transparent;
}

/* Hinweis im Artikel-Raster (Bestellstart / leere Kategorie / keine Treffer). */
.grid-hint {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-secondary);
}
.grid-hint__icon { font-size: 2.5rem; }
.grid-hint h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.grid-hint p { margin: 0; font-size: 0.9rem; color: var(--text-muted); max-width: 360px; }

.cat-btn {
  display: flex;
  align-items: center;
  justify-content: center;   /* Icon+Name in der gleich breiten Grid-Zelle zentriert */
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);   /* abgerundet, buttonartig (Betreiber 17.08.2026) */
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);      /* leichte Tiefe statt Flächen-Look */
  transition: transform 0.12s ease, box-shadow 0.12s ease,
              background 0.15s, color 0.15s, border-color 0.15s;
  text-align: center;
  /* min-width:0 hebt die Grid-Default-Mindestbreite auf, damit die Kachel in
     der gleich breiten Spalte schrumpfen kann; das eigentliche Umbrechen/
     Kürzen der Beschriftung macht `.cat-btn__label` (max. 2 Zeilen, dann „…").
     overflow:hidden hält den Inhalt in der festen Kachelhöhe. */
  min-width: 0;
  line-height: 1.15;
  overflow: hidden;
}

/* Emoji bleibt fest, die Beschriftung nimmt den Rest und bricht sauber um. */
.cat-btn__emoji {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.cat-btn__label {
  min-width: 0;
  /* Höchstens ZWEI Zeilen, dann „…". Verhindert das hässliche Umbrechen mit
     nur EINEM Buchstaben in der nächsten Zeile (früher `overflow-wrap: anywhere`
     an `.cat-btn`, brach eifrig mitten im Wort) UND das Überlappen langer Namen
     in die feste Kachelhöhe. break-word bricht nur ein überlanges EINZELwort. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
}

.cat-btn:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);       /* leichtes Anheben – wirkt anfassbar */
}
.cat-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.cat-btn--active {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.cat-btn--active:hover {
  color: #fff;
  transform: translateY(-1px);
}

.cat-icon {
  font-size: 16px;
}

/* ── Produkt-Grid ────────────────────────────────────────────────── */
.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: calc(12px * var(--kf-density-scale, 1));
  padding: 12px 20px;
  overflow-y: auto;
  align-content: start;
}

.product-grid::-webkit-scrollbar {
  width: 6px;
}

.product-grid::-webkit-scrollbar-track {
  background: transparent;
}

.product-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 3px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(16px * var(--kf-density-scale, 1)) calc(12px * var(--kf-density-scale, 1));
  min-height: 110px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all 0.2s;
  gap: 8px;
  overflow: visible;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.product-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.product-card:active {
  transform: translateY(0) scale(0.97);
}

.product-card__emoji {
  font-size: 32px;
  line-height: 1;
}

.product-card__name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: var(--text-primary);
}

.product-card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-hover);
}

/* ── Größen-Segment-Kacheln (Betriebseinstellung SPLIT_TILES) ──────────────
   Jede Größe eines Artikels ist eine EIGENE, direkt buchbare Kachel. Sie
   fließen im normalen Kachelraster (nebeneinander/umbrechend – „nebeneinander
   oder untereinander" ergibt sich automatisch aus der Spaltenbreite). Ein
   Akzent-Streifen links + Zusammengehörigkeit über gemeinsame Optik. */
.product-card--sizeseg {
  justify-content: space-between;
  gap: 4px;
  border-left: 3px solid var(--accent);
}
.product-card--sizeseg-first {
  border-left-width: 3px;
  border-left-color: var(--accent-hover);
}
.product-card__segbase {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: var(--text-secondary, var(--text-primary));
  opacity: 0.85;
}
.product-card__sizelabel {
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  color: var(--text-primary);
}

.product-card__tax {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Verfügbarkeit / Begrenzung (Kellner-Sicht) ── */
.product-card--soldout {
  opacity: 0.55;
  filter: grayscale(0.7);
  cursor: not-allowed;
}
.product-card--soldout:hover { transform: none; box-shadow: none; }
.product-card__soldout {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  z-index: 2;
}
.product-card__stock {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.18);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.45);
  font-size: 9px;
  font-weight: 700;
  z-index: 2;
}

/* ── Quick Actions ───────────────────────────────────────────────── */
/* ── Quick-Actions Toolbar (Touch-optimiert, min 48px Targets) ──── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--glass-border);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.qa-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.qa-btn:hover, .qa-btn:active {
  background: var(--glass-hover);
  color: var(--text-primary);
}

.qa-btn--training { color: var(--amber); }
.qa-btn--training:hover, .qa-btn--training:active { border-color: var(--amber); background: var(--amber-glow); }
.qa-btn--training.active {
  background: var(--amber-glow);
  border-color: var(--amber);
  color: var(--amber);
}

.qa-btn--park { color: #60a5fa; }
.qa-btn--park:hover, .qa-btn--park:active { border-color: #60a5fa; background: rgba(96, 165, 250, 0.12); }

.qa-btn--recall { color: #34d399; }
.qa-btn--recall:hover, .qa-btn--recall:active { border-color: #34d399; background: rgba(52, 211, 153, 0.12); }

.qa-btn--voucher { color: #a78bfa; }
.qa-btn--voucher:hover, .qa-btn--voucher:active { background: rgba(167, 139, 250, 0.1); border-color: #a78bfa; }

.qa-btn--drawer { color: #f59e0b; }
.qa-btn--drawer:hover, .qa-btn--drawer:active { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; }

.qa-btn--zbon { color: var(--accent); }
.qa-btn--zbon:hover, .qa-btn--zbon:active { border-color: var(--accent); background: var(--accent-glow); }

/* ══════════════════════════════════════════════════════════════════ */
/* RECHTE SEITE: Warenkorb                                           */
/* ══════════════════════════════════════════════════════════════════ */

.cart-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--kf-banner-h, 0px));
  height: calc(100dvh - var(--kf-banner-h, 0px));
  background: var(--bg-secondary);
  border-left: 1px solid var(--glass-border);
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.cart-title {
  font-size: 16px;
  font-weight: 700;
}

.cart-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.cart-number {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent-hover);
  font-weight: 600;
}

/* Training Banner */
.training-banner {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  background: var(--amber-glow);
  border-bottom: 1px solid var(--amber);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
  animation: flashBanner 1.5s ease infinite;
}

@keyframes flashBanner {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Im Haus / Außer Haus Toggle */
.tax-context-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.ctx-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-muted);
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ctx-btn__icon { font-size: 16px; }
.ctx-btn__label { font-size: 12px; font-weight: 700; }
.ctx-btn__tax { font-size: 10px; margin-left: auto; opacity: 0.7; }

.ctx-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.ctx-btn--active[data-ctx="inhouse"] {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent-hover);
}

.ctx-btn--active[data-ctx="takeaway"] {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}

/* Verzehr (Im Haus/Außer Haus) + Gang in EINER Zeile – spart Kopf-Höhe im
   Tischmodus (Betreiber 18.07.2026). Der Wrapper wird von renderCourseBar
   erzeugt und beim Verlassen des Tischmodus wieder aufgelöst; der Verzehr-
   Toggle wandert dann an seinen Platz zurück. */
.ctx-course-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ctx-course-row > #taxContextToggle {
  flex: 0 1 auto;
  padding: 0;
  border-bottom: 0;
  gap: 4px;
}
.ctx-course-row > #courseBar {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

/* Takeaway-Banner */
.takeaway-banner {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  background: rgba(6, 182, 212, 0.12);
  border-bottom: 1px solid #06b6d4;
  color: #22d3ee;
  font-size: 11px;
  font-weight: 700;
  animation: flashBanner 2s ease infinite;
}

/* Cart Items */
.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.cart-items::-webkit-scrollbar { width: 4px; }
.cart-items::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-muted);
}

.cart-empty__icon { font-size: 48px; opacity: 0.3; }
.cart-empty__text { font-size: 16px; font-weight: 600; }
.cart-empty__sub { font-size: 12px; text-align: center; padding: 0 32px; }

/* Single cart item */
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.15s;
  animation: slideIn 0.2s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.cart-item:hover {
  background: var(--glass);
}

.cart-item__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  grid-column: 1;
}

.cart-item__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.cart-item__details {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--font);
  flex: 0 0 auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.qty-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* App-Feedback: deutliches Aufleuchten + Eindrücken beim Antippen (Touch hat kein :hover) */
.qty-btn:active {
  transform: scale(0.90);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.qty-btn--remove:hover,
.qty-btn--remove:active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.qty-value {
  font-size: 18px;
  font-weight: 800;
  min-width: 30px;
  text-align: center;
  color: var(--text-primary);
}

.cart-item__unit {
  font-size: 11px;
  color: var(--text-muted);
}

.cart-item__tax-letter {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-glow);
  color: var(--accent-hover);
}

/* ── To-Go Toggle Button ── */
.togo-btn {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  opacity: 0.5;
}

.togo-btn:hover {
  opacity: 1;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.togo-btn.togo-active {
  opacity: 1;
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.2);
}

/* Cart Item: To-Go Zustand */
.cart-item--togo {
  border-left: 2px solid #F59E0B;
}

.cart-item--togo .cart-item__name::after {
  content: ' 📦';
  font-size: 10px;
}

/* Cart Item: Geparkt / an Küche gesendet */
.cart-item--parked {
  border-left: 2px solid rgba(34, 197, 94, 0.5);
}

.cart-item__parked {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Cart Totals */
.cart-totals {
  padding: 12px 20px;
  border-top: 1px solid var(--glass-border);
  background: rgba(99, 102, 241, 0.03);
  flex-shrink: 0;
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* MwSt.-Zeile im Warenkorb ausgeblendet (Betreiber 18.07.2026: braucht der
   Kellner am Bildschirm nicht). REIN ANZEIGE – der Kassenbeleg und der Z-Bon
   weisen die enthaltene MwSt weiterhin unabhängig aus (fiskalisch unverändert;
   #totalTax bleibt im DOM, damit der textContent-Setter nicht bricht). */
.total-row--tax {
  display: none;
}

.total-row--grand {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  padding: 4px 0;
}

/* Cart Actions */
.cart-actions {
  display: grid;
  /* minmax(0,…): Spalten dürfen UNTER die Inhaltsbreite schrumpfen → kein
     Überlauf aus dem Fenster auf schmalen Handys. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  padding: 12px 20px;
  flex-shrink: 0;
}

.cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  min-height: 48px;
  min-width: 0;        /* darf im Grid schrumpfen (sonst erzwingt der Inhalt Überlauf) */
  overflow: hidden;    /* zur Not Text clippen statt aus dem Fenster zu laufen */
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.cart-btn svg {
  width: 20px;
  height: 20px;
}

.cart-btn--cancel {
  background: var(--glass);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}

.cart-btn--cancel:hover {
  background: var(--red-glow);
  color: var(--red);
  border-color: var(--red);
}

.cart-btn--pay {
  background: linear-gradient(135deg, var(--green) 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 4px 16px var(--green-glow);
}

.cart-btn--pay:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--green-glow);
}

.cart-btn--pay:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.cart-btn--pay:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Modal-Eingabefelder (input / textarea) ─────────────────────── */
/* Vereinheitlichtes Styling für Modals – damit textareas + inputs
   touch-tauglich aussehen und die Soft-Keyboard auf Mobile öffnet */
.modal__body input.discount-input,
.modal__body textarea.discount-input,
#bewirtungModal textarea,
#bewirtungModal input[type="text"],
#bewirtungModal input[type="email"],
#emailReceiptModal textarea,
#emailReceiptModal input[type="text"],
#emailReceiptModal input[type="email"],
#customerAssignmentModal input[type="text"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: manipulation;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.modal__body input.discount-input:focus,
.modal__body textarea.discount-input:focus,
#bewirtungModal textarea:focus,
#bewirtungModal input[type="text"]:focus,
#bewirtungModal input[type="email"]:focus,
#emailReceiptModal textarea:focus,
#emailReceiptModal input[type="text"]:focus,
#emailReceiptModal input[type="email"]:focus,
#customerAssignmentModal input[type="text"]:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}
.modal__body input.discount-input::placeholder,
.modal__body textarea.discount-input::placeholder {
  color: #6b7280;
}

/* Park-Button (Tisch-Modus) */
.cart-btn--park {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.cart-btn--park:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.35);
}

.cart-btn--park:active {
  transform: translateY(0) scale(0.98);
}

/* Park-Button: Disabled (nichts zu parken) */
.cart-btn--park:disabled,
.cart-btn--park[disabled] {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.7;
}

.cart-btn--park:disabled:hover,
.cart-btn--park[disabled]:hover {
  transform: none;
  box-shadow: none;
}

.cart-btn--park:disabled:active,
.cart-btn--park[disabled]:active {
  transform: none;
}

/* Tisch-Modus, alles in EINER Zeile: 🎤 ist ein schmales Icon (auto), Parken ·
   Partei kassieren · Alles kassieren sind GLEICH breit (Betreiber 19.07.2026:
   „so breit wie der Parken-Button" → gleich große 1fr-Spalten). „Zurück" liegt
   NICHT mehr hier unten, sondern oben in der Kopfzeile (Betreiber-Foto Sunmi
   23.07.) → nur EINE Icon-Spalte (🎤), sonst blieben leere Spalten (Parken
   schmaler als Partei). */
.cart-actions:has(.cart-btn--park) {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
}
.cart-actions:has(.cart-btn--pay-all) {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
/* Nur-Icon-Buttons (🎤, Zurück): quadratisch, kein Text-Platz. */
.cart-btn--icon {
  flex: 0 0 auto;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
  min-width: 42px;
}
/* Kompakt-Buttons (Parken „P", Partei-Buchstabe, Alles „○"): kleiner Abstand. */
.cart-btn--compact {
  gap: 6px;
}
.cart-btn--mic { font-size: 1.1rem; }
/* „Alles kassieren"-Kreis deutlich größer (Betreiber 19.07.2026: „viel zu klein"). */
.cart-btn__all-circle {
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════════ */
/* MODALS                                                            */
/* ══════════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 480px;
  /* Handy-Tastatur-Fix: --kf-vvh = SICHTBARE Viewport-Höhe (visualViewport,
     pos.js initKeyboardViewportFix). Ohne sie überdeckt die Bildschirmtastatur
     die untere Modal-Hälfte (Formulare wie die Kundenkartei waren dann nicht
     scrollbar/ausfüllbar); 90vh bleibt der Desktop-/Fallback-Deckel. */
  max-height: min(90vh, calc(var(--kf-vvh, 100vh) - 16px));
  /* ── 3-ZONEN-VERTRAG (Betreiber 11.08.2026) ────────────────────────────
     „absolut JEDES Fenster, JEDER Button immer und überall sichtbar. Egal
     was ein Betrieb sich am Ende für Geräte anschafft."

     VORHER scrollte das GANZE Modal (`overflow-y:auto` hier). Abgeschnitten
     wurde dadurch nichts — die max-height deckelt es —, aber die FUSSZEILE
     mit dem Primär-Knopf rutschte bei langem Inhalt unter die Kante und war
     nur noch durch Scrollen IM Modal erreichbar. Auf einem 568 px hohen
     Bildschirm ist das der Regelfall, nicht die Ausnahme.

     JETZT: Kopf und Fusszeile sind FEST, nur der Rumpf scrollt. Damit ist
     der Primär-Knopf sichtbar, unabhängig von Inhaltsmenge UND Geräte-
     geometrie — das ist eine Eigenschaft des Layouts, keine Zusicherung
     einer Testliste. `min-height:0` am Rumpf ist dabei nicht Kosmetik: ohne
     ihn weigert sich ein Flex-Kind zu schrumpfen (Default `min-height:auto`)
     und schiebt die Fusszeile doch wieder hinaus.

     Guards: `tests/dialog-layout-vertrag.test.ts` (Vertrag statisch) +
     `tests/e2e/e2e-dialog-ueberlauf.cjs` (synthetischer Überlauf am echten
     Bedienweg). */
  display: flex;
  flex-direction: column;
  /* Der Rumpf scrollt, nicht das Modal. `hidden` statt `auto`, damit hier
     kein zweiter Scroll-Container entsteht — sonst scrollte die Fusszeile
     wieder mit. */
  overflow: hidden;
  /* Mobile-Overflow-Klasse: overflow-y:auto zog overflow-x auf auto mit ->
     zu breiter Inhalt schob das ganze Modal seitlich aus dem Bild (Kassenbon-
     Screenshot). Bleibt hart auf hidden; breite Inhalte scrollen im EIGENEN
     Container. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  animation: scaleIn 0.25s ease;
}

/* Tastatur offen (Body-Klasse aus pos.js): Modal oben andocken statt mittig –
   zentriert läge die halbe Box hinter der Tastatur; oben angedockt bleibt der
   Kopf sichtbar und der Rest ist per Scroll erreichbar. */
body.kf-keyboard-open .modal-overlay {
  align-items: flex-start;
  padding-top: 8px;
}

@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--glass-border);
  /* 3-Zonen-Vertrag: fest, schrumpft nie. */
  flex: 0 0 auto;
}

.modal__header h2 {
  font-size: 18px;
  font-weight: 700;
}

.modal__close {
  width: 32px;
  height: 32px;
  /* Beim Ausmessen des Bezahldialogs gefunden (11.08.2026): der ✕ ist SICHTBAR
     32 px (gemessen 29 nach Skalierung) und lag damit unter dem 44-px-Touch-
     Ziel — man tippt daneben und schliesst den Dialog nicht.
     ⚠️ Grösser ZEICHNEN wäre hier falsch: der Betreiber-Auftrag lautete, die
     Knöpfe zu VERKLEINERN. Vergrössert wird deshalb nur die TREFFERFLÄCHE
     (unsichtbares ::after, mittig 44x44) — das Bild bleibt, die Bedienung
     wird zuverlässig. Guard misst per elementFromPoint, nicht per Rechteck:
     eine Trefferfläche, die man nicht sieht, ist am Rechteck nicht messbar. */
  position: relative;
  border-radius: 50%;
  border: none;
  background: var(--glass);
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.modal__close:hover {
  background: var(--red-glow);
  color: var(--red);
}

.modal__body {
  padding: 24px;
  /* 3-Zonen-Vertrag: DIESE Zone traegt den Scroll — und nur sie.
     `min-height:0` ist Pflicht: ein Flex-Kind hat per Default
     `min-height:auto` und weigert sich unter seine Inhaltshoehe zu
     schrumpfen; ohne die Zeile schoebe langer Inhalt die Fusszeile doch
     wieder aus dem Bild. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.modal__footer {
  display: flex;
  /* 3-Zonen-Vertrag: fest am unteren Rand, schrumpft nie — hier sitzt der
     Primaer-Knopf, der IMMER sichtbar bleiben muss. */
  flex: 0 0 auto;
  /* Mobile-Overflow-Klasse (Pilot 2026-07-09): 4 Buttons sprengten das
     Kassenbon-Modal in die Breite -> Modal seitlich abgeschnitten. Buttons
     brechen um; min-width:0 laesst Flex-Kinder schrumpfen. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--glass-border);
}
.modal__footer .btn { min-width: 0; }

/* ── Bezahl-Modal: kein Doppel-/Horizontal-Scroll ──────────────────────────
   Modal als Flex-Spalte mit overflow:hidden → das Modal selbst scrollt NICHT.
   Header und Footer bleiben fix, nur der Body scrollt (vertikal, NIE horizontal).
   Die 4 Footer-Buttons (Abbrechen / Getrennt / Durch N / Bezahlen) dürfen
   UMBRECHEN statt das Modal in die Breite zu sprengen (das war – zusammen mit
   overflow-y:auto, das die x-Achse mit auf auto zieht – die Ursache des
   horizontalen Balkens). */
.modal--payment {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 520px;
}
.modal--payment .modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal--payment .modal__footer {
  flex-wrap: wrap;
  /* 3-Zonen-Vertrag (Aktionen), Gürtel-und-Hosenträger: Der Footer ist als
     flex-shrink:0-Kind ohnehin unten fix; sticky bottom:0 pinnt „Bezahlen"
     zusätzlich, falls je ein Umbau das Modal doch scrollen lässt. Hintergrund
     deckt darunterliegenden Body-Inhalt ab. Guard: layout-sheet-contract. */
  position: sticky;
  bottom: 0;
  background: var(--bg-secondary);
}
/* ══════════════════════════════════════════════════════════════════════════
   BEZAHLDIALOG KOMPAKT — Betreiber 11.08.2026
   ──────────────────────────────────────────────────────────────────────────
   O-Ton: „Das bezahlmodal, die button — Bargeld, Tap to pay, Rechnung,
   Gutschein einlösen und so weiter sind absolut alle zu groß, auch abbrechen,
   getrennt zahlen etc."

   GEMESSEN bei 320x568 (kleinste unterstützte Grösse), Dialog 470 px hoch:
     Fusszeile          247 px  ← 53 % des ganzen Dialogs
     Inhaltsbereich     154 px  bei 623 px Inhalt → viermal scrollen
   Der Grund war nicht die Höhe EINES Knopfes (44 px ist die Untergrenze eines
   Touch-Ziels), sondern dass VIER gleichrangige Aktionen mit `flex-basis:140px`
   auf einem 219 px breiten Dialog jeweils eine EIGENE Zeile bekamen.

   ⚠️ 44 px BLEIBEN die Untergrenze. Gespart wird an Zeilen, Polstern und
   Schriftgraden — nie an der Trefferfläche; ein Knopf, den man zweimal treffen
   muss, kostet mehr Zeit als er Platz spart.
   ══════════════════════════════════════════════════════════════════════════ */

.modal--payment .modal__footer {
  gap: 8px;
  padding: 12px 16px;
}
/* Sekundär-Aktionen teilen sich eine Zeile, statt je eine zu belegen. */
.modal--payment .modal__footer .btn {
  line-height: 1.15;
  flex: 1 1 96px;
  min-width: 0;
  padding: 10px 12px;
  font-size: 13px;
  gap: 6px;
}
/* "Bezahlen" als primäre Aktion bekommt eine eigene, volle Zeile (immer
   sichtbar) und behält seine Grösse — es ist die Aktion, um die es geht. */
.modal--payment .modal__footer #confirmPayment {
  flex-basis: 100%;
  padding: 12px 24px;
  font-size: 15px;
  min-height: 52px;
}
/* Zahlart-Kacheln: Symbol NEBEN den Text statt darüber (72 px → ~48 px). */
.modal--payment .pay-methods {
  gap: 8px;
  margin-bottom: 12px;
}
.modal--payment .pay-method {
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  min-height: 48px;
  font-size: 13px;
}
.modal--payment .pay-method span,
.modal--payment .pay-method__icon { font-size: 18px; }
/* Der „Zu zahlen"-Block: Beschriftung neben die Zahl (94 px → ~56 px). Die
   Zahl bleibt die grösste Schrift im Dialog — sie ist das, was der Bediener
   dem Gast vorliest. */
.modal--payment .pay-amount-display {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.modal--payment .pay-amount { font-size: 28px; }

.modal-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.modal-btn svg { width: 18px; height: 18px; }

.modal-btn--cancel {
  background: var(--glass);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}

.modal-btn--cancel:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
}

.modal-btn--confirm {
  background: linear-gradient(135deg, var(--green) 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 4px 12px var(--green-glow);
}

.modal-btn--confirm:hover:not(:disabled) {
  box-shadow: 0 6px 20px var(--green-glow);
}

.modal-btn--confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Generische Buttons (in Modals verwendet) ────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 48px;
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex: 1;
  text-align: center;
  line-height: 1.4;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--primary {
  background: linear-gradient(135deg, var(--green) 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 4px 16px var(--green-glow);
  font-weight: 700;
}

.btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--green-glow);
}

.btn--primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn--primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--ghost {
  background: var(--glass);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}

.btn--ghost:hover {
  background: var(--glass-hover);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn--ghost:active {
  transform: scale(0.98);
}

.btn--lg {
  padding: 16px 32px;
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-lg);
}

.btn--danger {
  background: linear-gradient(135deg, var(--red) 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 12px var(--red-glow);
}

.btn--danger:hover:not(:disabled) {
  box-shadow: 0 6px 20px var(--red-glow);
}

/* ── Payment Modal ───────────────────────────────────────────────── */
.payment-total {
  text-align: center;
  margin-bottom: 24px;
}

.payment-total span:first-child {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.payment-total__amount {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--text-primary), var(--accent-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.payment-methods,
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

/* Prominenter "Zu zahlen"-Block oben im Payment-Modal */
.pay-amount-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.12), rgba(108, 99, 255, 0.04));
  border: 2px solid rgba(108, 99, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(108, 99, 255, 0.08);
}

.pay-amount-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pay-amount {
  font-size: 38px;
  font-weight: 800;
  color: #a78bfa;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(167, 139, 250, 0.3);
}

.pay-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pay-method__icon { font-size: 28px; }

.pay-method:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.pay-method--active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent-hover);
  box-shadow: var(--shadow-glow);
}

/* Cash Input */
.cash-input-section label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.cash-numpad {
  margin-bottom: 16px;
}

.quick-cash {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.quick-cash-btn {
  flex: 1;
  min-width: 60px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.quick-cash-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.cash-amount {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  text-align: right;
  outline: none;
  transition: border-color 0.2s;
}

.cash-amount:focus {
  border-color: var(--accent);
}

.change-display {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  margin-top: 12px;
  border-radius: var(--radius-md);
  background: var(--green-glow);
  border: 1px solid var(--green);
}

.change-display span:first-child {
  color: var(--green);
  font-weight: 500;
  font-size: 14px;
}

.change-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--green);
}

/* Numpad */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.num-btn {
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
  user-select: none;
}

.num-btn:hover { background: var(--bg-hover); }
.num-btn:active { transform: scale(0.95); background: var(--accent-glow); }

.num-btn--clear {
  background: var(--red-glow);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Card Section */
.card-section {
  text-align: center;
  padding: 40px 20px;
}

.card-icon-pulse {
  font-size: 64px;
  animation: cardPulse 1.5s ease infinite;
}

@keyframes cardPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.card-section p {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ── Change Section (Rückgeld, optional) ─────────────────────────── */

/* ── Tip Section (Trinkgeld-Optionen) ────────────────────────────── */
.tip-section {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.tip-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.tip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tip-btn {
  flex: 1;
  min-width: 70px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tip-btn:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.tip-btn--active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent-hover);
  box-shadow: 0 0 12px var(--accent-glow);
}

.tip-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.tip-row--total {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--glass-border);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-primary);
}

/* ─── Split-Bill-Modal ─────────────────────────────── */
.split-bill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .split-bill-grid { grid-template-columns: 1fr; }
}

.split-col {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: 420px;
}

.split-col__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}

.split-col__total {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}
.split-col__total--green { color: #22c55e; }

.split-col__items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.split-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: all 0.15s ease;
  font-size: 13px;
}
.split-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(167, 139, 250, 0.4);
}
.split-item__name { color: var(--text-primary); font-weight: 500; }

/* Mengen-Stepper (− [Zahl] +) */
.split-item__qty-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.split-item__qty-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.12s ease;
}
.split-item__qty-btn:hover {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}
.split-item__qty-btn:active { transform: scale(0.94); }
.split-item__qty-input {
  width: 44px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  font-family: inherit;
  outline: none;
  -moz-appearance: textfield;
}
.split-item__qty-input::-webkit-outer-spin-button,
.split-item__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.split-item__qty-input:focus {
  background: rgba(167, 139, 250, 0.15);
  border-radius: 5px;
}

.split-item__price { color: var(--text-secondary); font-weight: 600; min-width: 60px; text-align: right; }
.split-item__btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.08);
  color: #c4b5fd;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 700;
  transition: all 0.12s ease;
}
.split-item__btn:hover {
  background: rgba(167, 139, 250, 0.25);
  border-color: rgba(167, 139, 250, 0.6);
  color: #fff;
}
.split-item__btn:active { transform: scale(0.95); }

/* PROMINENTE Trinkgeld-Summen-Anzeige */
.tip-summary-big {
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.05));
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  animation: tipSummaryPulse 0.3s ease;
}

@keyframes tipSummaryPulse {
  from { transform: scale(0.97); opacity: 0; }
  to   { transform: scale(1.0);  opacity: 1; }
}

.tip-summary-big .tip-row {
  font-size: 15px;
  color: var(--text-secondary);
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
}

.tip-summary-big .tip-row--total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(34, 197, 94, 0.3);
  font-size: 18px;
  color: var(--text-primary);
  font-weight: 600;
}

.tip-total-big {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #22c55e !important;
  line-height: 1;
}

/* Mode-Toggle (Trinkgeld vs Gesamt eingeben) */
.tip-mode-btn {
  transition: all 0.15s ease;
  font-family: inherit;
}
.tip-mode-btn:hover {
  background: rgba(108, 99, 255, 0.08) !important;
  color: #c7c5fb !important;
}
.tip-mode-btn--active {
  background: rgba(108, 99, 255, 0.2) !important;
  border-color: #a78bfa !important;
  color: #a78bfa !important;
  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.2);
}

.tip-currency {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
}

.tip-legal {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(250, 204, 21, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
}

.change-section {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.change-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.change-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.change-input-row .numpad-input {
  flex: 1;
  width: auto;
  /* Flex-Falle min-width:auto: das Eingabefeld schrumpfte nicht unter seine
     intrinsische Breite (size-Attribut) und ragte auf schmalen Displays aus
     dem Bezahl-Modal (Pilot-Screenshot; vom Mobile-Wächter auf CI gefangen:
     right=367 vs modal=356). min-width:0 erlaubt echtes Schrumpfen. */
  min-width: 0;
  font-size: 20px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-weight: 700;
  text-align: right;
  outline: none;
  transition: border-color 0.2s;
}

.change-input-row .numpad-input:focus {
  border-color: var(--accent);
}

/* ── Tip Custom Row ──────────────────────────────────────────────── */
.tip-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.tip-custom-row .tip-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  text-align: right;
  outline: none;
  transition: border-color 0.2s;
}

.tip-custom-row .tip-input:focus {
  border-color: var(--accent);
}

.tip-custom-row .tip-currency {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ── Receipt Modal ───────────────────────────────────────────────── */
.receipt-modal {
  max-width: 420px;
}

.receipt-preview {
  background: #fefefe;
  color: #1a1a1a;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.6;
  padding: 24px 16px;
  border-radius: var(--radius-md);
  /* Bon-Zeilen (42 Zeichen) NIE mitten im Wort umbrechen (Pilot-Screenshot
     "Kasse: K / asse-1"): pre + eigener x-Scroll statt pre-wrap/break-all. */
  white-space: pre;
  word-break: normal;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: auto;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 480px) {
  /* 42 Zeichen Courier passen bei 10px auch in das 90%-Modal eines schmalen
     Handys ohne horizontales Scrollen. */
  .receipt-preview { font-size: 10px; padding: 16px 10px; }
}

/* Der Verifikations-QR unter der Bon-Vorschau (BSI TR-03151, § 6 Nr. 4
   KassenSichV). WEISSER Grund ist keine Kosmetik: ein QR auf dunklem Untergrund
   wird von vielen Scannern nicht erkannt, und im Sonnenmodus wie im Dunkelmodus
   muss derselbe Code lesbar sein. Darum eine eigene helle Flaeche statt der
   Theme-Variablen. */
.receipt-qr-box {
  background: #fefefe;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 8px;
  text-align: center;
}
.receipt-qr-img {
  width: 180px;
  height: 180px;
  max-width: 100%;
  /* Ein QR darf NIE weichgezeichnet werden — die Module muessen kantig
     bleiben, sonst scheitert die Erkennung auf kleinen Displays. */
  image-rendering: pixelated;
}

/* ══════════════════════════════════════════════════════════════════ */
/* TOAST NOTIFICATIONS                                               */
/* ══════════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: 20px;
  /* 🔴 `left: 50%` OHNE `right` DECKELT DIE BREITE AUF 50 % (Betreiber 12.08.2026:
     „weiter kann mans nicht lesen").
     GEMESSEN bei 360 px Fensterbreite: der Container war 180 px breit, und
     damit wurde eine normale Fehlermeldung 216 px HOCH — sie legte sich über
     die Knopfzeile des Bezahldialogs, und genau das war nicht mehr lesbar.
     Ursache ist nicht der Toast: `max-width: min(92vw, 560px)` am Toast kam nie
     zum Tragen, weil ein fixiertes Element mit nur `left` als verfügbare Breite
     bloss den Rest bis zum rechten Rand bekommt — hier die halbe Seite.
     Die Zentrierung läuft deshalb über die Flex-Achse statt über einen
     Versatz; damit ist die verfügbare Breite die volle Seite und die
     `max-width` am Toast entscheidet wieder. */
  left: 0;
  right: 0;
  padding: 0 8px;
  align-items: center;
  /* Die Leiste spannt jetzt über die ganze Breite und läge sonst als
     unsichtbarer Riegel über den Knöpfen darunter. Die Toasts selbst bleiben
     bedienbar — `toast--sticky` ist anklickbar. */
  pointer-events: none;
  /* ÜBER allen Bedien-Overlays (Kellnerbericht wr-overlay 10000, Modals 10001+,
     KFPrintView 11800): Toasts sind FEEDBACK und dürfen nie hinter dem Overlay
     liegen, aus dem heraus sie ausgelöst wurden (Gerätefund 17.07.2026: der
     „Auf dem Bondrucker gedruckt"-Toast des Kellnerberichts war unsichtbar).
     Nur Diagnose-Flächen (kfTrace 21474, Support-Panel/Offline-Warnung 99999)
     bleiben bewusst darüber. */
  z-index: 12000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s ease;
  /* Lange Meldungen (z.B. Server-Fehler) umbrechen statt links/rechts aus dem
     Fenster laufen zu lassen – sonst unlesbar/nicht erfassbar. */
  white-space: pre-wrap;
  /* Gegenstück zu `pointer-events: none` am Container: die Meldung selbst
     bleibt anklickbar (toast--sticky wird per Tipp geschlossen). */
  pointer-events: auto;
  max-width: min(92vw, 560px);
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
}
.toast--sticky { cursor: pointer; }

.toast--success {
  background: var(--green);
  color: white;
}

.toast--error {
  background: var(--red);
  color: white;
}

.toast--info {
  background: var(--accent);
  color: white;
}

.toast--warning {
  background: var(--amber);
  color: var(--text-inverse);
}

@keyframes toastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Re-Blink: eine bereits sichtbare, identische Meldung wird beim Wiederholen
   NICHT gestapelt (showToast-Dedupe), sondern pulst kurz neu auf – kurzer
   Aufmerksamkeits-Impuls statt endlosem Stapel (Pilot-Fund 2026-07-10). */
@keyframes toastBlink {
  0%   { transform: scale(1);    opacity: 1; }
  30%  { transform: scale(1.06); opacity: 0.7; }
  100% { transform: scale(1);    opacity: 1; }
}
.toast--blink { animation: toastBlink 0.4s ease; }

/* ══════════════════════════════════════════════════════════════════ */
/* SCANNER FLASH                                                     */
/* ══════════════════════════════════════════════════════════════════ */

.scanner-flash {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: white;
  font-weight: 700;
  font-size: 15px;
  z-index: 3000;
  box-shadow: var(--shadow-glow);
  animation: scanFlash 0.5s ease;
}

@keyframes scanFlash {
  0% { transform: translateX(-50%) scale(0.8); opacity: 0; }
  50% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.scanner-flash__icon { font-size: 20px; }

/* ══════════════════════════════════════════════════════════════════ */
/* LOGIN SCREEN                                                      */
/* ══════════════════════════════════════════════════════════════════ */

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 60%);
  animation: fadeIn 0.4s ease;
}

.login-card {
  width: 380px;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(99, 102, 241, 0.08);
  overflow: hidden;
  animation: scaleIn 0.4s ease;
}

.login-card__logo {
  text-align: center;
  padding: 40px 24px 24px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, transparent 100%);
}

.login-card__title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--accent) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-top: 8px;
}

.login-card__subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.login-card__form {
  padding: 8px 28px 24px;
}

.login-field {
  margin-bottom: 16px;
}

.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-field input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-field input::placeholder {
  color: var(--text-muted);
}

.login-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
  color: white;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px var(--accent-glow);
  margin-top: 8px;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--accent-glow);
}

.login-btn:active {
  transform: translateY(0) scale(0.98);
}

.login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.login-hint {
  text-align: center;
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
  margin-top: 12px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--red-glow);
}

.login-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.login-demo code {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.login-card__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-top: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Logout Button (in Top-Bar) ─────────────────────────────────── */
.btn-logout {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-logout svg {
  width: 18px;
  height: 18px;
}

.btn-logout:hover {
  background: var(--red-glow);
  color: var(--red);
  border-color: var(--red);
}

/* ── Connection Status ──────────────────────────────────────────── */
.connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--glass);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.connection-status--online { color: var(--green); }
.connection-status--offline { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════ */
/* RABATT / GUTSCHEIN – UI                                           */
/* ══════════════════════════════════════════════════════════════════ */

/* ── Rabatt-Button im Warenkorb ──────────────────────────────────── */
.cart-discount-action {
  padding: 0 20px 8px;
  flex-shrink: 0;
}

.discount-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--glass-border);
  background: var(--glass);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.discount-btn svg {
  width: 16px;
  height: 16px;
}

.discount-btn:hover:not(:disabled) {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-glow);
}

.discount-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Rabatt-Zeile in Summen ──────────────────────────────────────── */
.total-row--discount {
  color: var(--green) !important;
  font-weight: 600;
  position: relative;
  padding-right: 28px !important;
}

.total-row--discount span:last-of-type {
  color: var(--green);
  font-weight: 700;
}

.discount-remove-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--red-glow);
  color: var(--red);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: var(--font);
}

.discount-remove,
.discount-remove-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--red-glow);
  color: var(--red);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: var(--font);
}

.discount-remove:hover,
.discount-remove-btn:hover {
  background: var(--red);
  color: white;
}

.discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(34, 197, 94, 0.08);
  color: var(--green);
  margin-bottom: 0.75rem;
}

.discount-label-text {
  font-weight: 700;
  min-width: 0;
}

.discount-value-text {
  font-weight: 700;
}

/* ── Rabatt Modal ────────────────────────────────────────────────── */
.discount-modal {
  max-width: 520px;
}

.discount-section {
  margin-bottom: 20px;
}

.discount-section__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Scope Grid (Speisen / Getränke / Gemischt) */
.discount-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.scope-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-secondary);
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
}

.scope-btn__icon { font-size: 24px; }
.scope-btn__title { font-size: 12px; font-weight: 700; }
.scope-btn__sub { font-size: 10px; color: var(--text-muted); }

.scope-btn:hover {
  border-color: var(--accent);
  background: var(--glass-hover);
  color: var(--text-primary);
}

.scope-btn--active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent-hover);
  box-shadow: var(--shadow-glow);
}

.scope-btn--active .scope-btn__sub { color: var(--accent-hover); }

.scope-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Discount Type Grid (€ / %) */
.discount-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dtype-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.dtype-btn span:first-child {
  font-size: 18px;
  font-weight: 800;
}

.dtype-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.dtype-btn--active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent-hover);
}

/* Discount Amount Input */
.discount-input-wrap {
  position: relative;
  margin-bottom: 10px;
}

.discount-amount-input {
  width: 100%;
  padding: 14px 44px 14px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 24px;
  font-weight: 700;
  text-align: right;
  outline: none;
  transition: border-color 0.2s;
}

.discount-amount-input:focus {
  border-color: var(--accent);
}

.discount-input-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Quick-Vorschläge */
.discount-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dq-btn {
  flex: 1;
  min-width: 50px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.dq-btn:hover {
  background: var(--amber-glow);
  border-color: var(--amber);
  color: var(--amber);
}

/* Legal Notice */
.legal-notice {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--amber);
  background: var(--amber-glow);
  animation: fadeIn 0.3s ease;
}

.legal-notice__icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.4;
}

.legal-notice__content {
  flex: 1;
}

.legal-notice__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 4px;
}

.legal-notice__text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.legal-notice__ref {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

.legal-notice--error {
  border-color: var(--red);
  background: var(--red-glow);
}

.legal-notice--error .legal-notice__title {
  color: var(--red);
}

/* Discount Preview */
.discount-preview {
  margin-top: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

.discount-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--glass);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.discount-preview__tag {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--green-glow);
  color: var(--green);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.discount-preview__items {
  padding: 8px 12px;
}

.dp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.dp-item__name { flex: 1; }

.dp-item__discount {
  color: var(--green);
  font-weight: 600;
  margin-left: 8px;
}

.dp-item__tax-letter {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--accent-glow);
  color: var(--accent-hover);
  margin-left: 6px;
}

.discount-preview__summary {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--glass-border);
  background: var(--green-glow);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

/* Discount Error */
.discount-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--red-glow);
  border: 1px solid rgba(239, 68, 68, 0.3);
  margin-top: 12px;
  animation: fadeIn 0.3s ease;
}

.discount-error__icon { font-size: 16px; }

.discount-error__text {
  font-size: 12px;
  color: var(--red);
  font-weight: 500;
}

/* ============================================================================
   GUTSCHEIN VERKAUFEN MODAL
   ============================================================================ */

.vs-body { display: flex; flex-direction: column; gap: 16px; }
.vs-section { display: flex; flex-direction: column; gap: 8px; }
.vs-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* Typ-Grid */
.vs-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; border-radius: var(--radius);
  border: 2px solid var(--glass-border); background: var(--glass);
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
  font-family: var(--font); text-align: center;
}
.vs-type-icon { font-size: 24px; }
.vs-type-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.vs-type-sub { font-size: 10px; opacity: 0.7; }
.vs-type-tax {
  font-size: 11px; font-weight: 600; margin-top: 4px;
  padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.05);
}
.vs-type-btn:hover { border-color: var(--accent); }
.vs-type-btn--active[data-vtype="mzg"] {
  border-color: #a78bfa; background: rgba(167, 139, 250, 0.12); color: #c4b5fd;
}
.vs-type-btn--active[data-vtype="mzg"] .vs-type-tax {
  background: rgba(167, 139, 250, 0.25); color: #e9d5ff;
}
.vs-type-btn--active[data-vtype="ezg"] {
  border-color: #f59e0b; background: rgba(245, 158, 11, 0.12); color: #fbbf24;
}
.vs-type-btn--active[data-vtype="ezg"] .vs-type-tax {
  background: rgba(245, 158, 11, 0.25); color: #fde68a;
}

/* Legal Notice */
.vs-legal {
  display: flex; gap: 12px; padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.08);
  transition: all 0.3s;
}
.vs-legal--ezg {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}
.vs-legal__icon { font-size: 20px; flex-shrink: 0; }
.vs-legal__content { display: flex; flex-direction: column; gap: 4px; }
.vs-legal__content strong { font-size: 13px; color: var(--text-primary); }
.vs-legal__content p { font-size: 11px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.vs-legal__content cite { font-size: 10px; color: var(--text-muted); font-style: italic; }

/* EZG Scope Grid */
.vs-scope-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.vs-scope-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border-radius: var(--radius-sm);
  border: 2px solid var(--glass-border); background: var(--glass);
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
  font-family: var(--font); font-size: 11px;
}
.vs-scope-btn span:first-child { font-size: 18px; }
.vs-scope-tax { font-size: 10px; font-weight: 600; opacity: 0.7; }
.vs-scope-btn:hover { border-color: #f59e0b; }
.vs-scope-btn--active {
  border-color: #f59e0b; background: rgba(245, 158, 11, 0.15); color: #fbbf24;
}
.vs-scope-hint {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.25);
  font-size: 11px; color: #93c5fd;
}

/* Value Input */
.vs-value-input { position: relative; display: flex; align-items: center; }
.vs-value-field {
  width: 100%; padding: 12px 40px 12px 16px;
  font-size: 24px; font-weight: 700; font-family: var(--font);
  text-align: right; border-radius: var(--radius);
  border: 2px solid var(--glass-border); background: var(--glass);
  color: var(--text-primary); outline: none; transition: border-color 0.2s;
}
.vs-value-field:focus { border-color: var(--accent); }
.vs-value-suffix {
  position: absolute; right: 16px; font-size: 18px;
  color: var(--text-muted); pointer-events: none;
}
.vs-quick-values { display: flex; gap: 6px; flex-wrap: wrap; }
.vs-qv-btn {
  flex: 1; min-width: 60px; padding: 6px 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--text-secondary);
  font-family: var(--font); font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.vs-qv-btn:hover { border-color: var(--accent); color: var(--text-primary); }

/* Preview */
.vs-preview {
  border-radius: var(--radius); border: 2px solid var(--accent);
  background: var(--accent-glow); overflow: hidden;
}
.vs-preview__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; font-size: 10px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.05em;
  border-bottom: 1px solid var(--glass-border);
}
.vs-preview__tag {
  padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700;
}
.vs-preview__tag[data-tag="mzg"] { background: rgba(167,139,250,0.25); color: #c4b5fd; }
.vs-preview__tag[data-tag="ezg"] { background: rgba(245,158,11,0.25); color: #fde68a; }
.vs-preview__code {
  text-align: center; padding: 12px;
  font-size: 22px; font-weight: 900; font-family: 'Courier New', monospace;
  color: var(--accent-hover); letter-spacing: 0.15em;
}
.vs-preview__details { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.vs-preview__row { display: flex; justify-content: space-between; font-size: 12px; }
.vs-preview__row span { color: var(--text-muted); }
.vs-preview__row strong { color: var(--text-primary); }

/* Error */
.vs-error {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 12px; color: var(--red); font-weight: 500;
}

/* ============================================================================
   TRINKGELD-SEKTION (Kartenzahlung)
   ============================================================================ */

.tip-section {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--glass-border);
  display: flex; flex-direction: column; gap: 10px;
}

.tip-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.05em; text-transform: uppercase;
}

.tip-amount-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.tip-btn {
  flex: 1; min-width: 60px; padding: 8px 6px;
  border-radius: var(--radius-sm); border: 2px solid var(--glass-border);
  background: var(--glass); color: var(--text-secondary);
  font-family: var(--font); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.tip-btn:hover { border-color: var(--accent); }
.tip-btn--active {
  border-color: var(--green); background: var(--green-glow);
  color: var(--green);
}

/* Custom Input */
.tip-custom-input {
  position: relative; display: flex; align-items: center;
}
.tip-custom-field {
  width: 100%; padding: 8px 32px 8px 12px;
  font-size: 16px; font-weight: 600; font-family: var(--font);
  text-align: right; border-radius: var(--radius-sm);
  border: 2px solid var(--glass-border); background: var(--glass);
  color: var(--text-primary); outline: none; transition: border-color 0.2s;
}
.tip-custom-field:focus { border-color: var(--accent); }
.tip-custom-suffix {
  position: absolute; right: 12px; font-size: 14px;
  color: var(--text-muted); pointer-events: none;
}

/* Empfänger-Auswahl */
.tip-recipient-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

.tip-rcpt-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border-radius: var(--radius-sm);
  border: 2px solid var(--glass-border); background: var(--glass);
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
  font-family: var(--font); text-align: center;
}
.tip-rcpt-icon { font-size: 22px; }
.tip-rcpt-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.tip-rcpt-tax {
  font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: 8px; background: rgba(255,255,255,0.05);
}
.tip-rcpt-sub { font-size: 9px; opacity: 0.6; }
.tip-rcpt-btn:hover { border-color: var(--accent); }

.tip-rcpt-btn--active[data-rcpt="employee"] {
  border-color: var(--green); background: var(--green-glow); color: var(--green);
}
.tip-rcpt-btn--active[data-rcpt="employee"] .tip-rcpt-tax {
  background: rgba(34, 197, 94, 0.25); color: #86efac;
}

.tip-rcpt-btn--active[data-rcpt="owner"] {
  border-color: #f59e0b; background: rgba(245, 158, 11, 0.12); color: #fbbf24;
}
.tip-rcpt-btn--active[data-rcpt="owner"] .tip-rcpt-tax {
  background: rgba(245, 158, 11, 0.25); color: #fde68a;
}

/* Legal Notice */
.tip-legal {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px;
  border-radius: var(--radius-sm); font-size: 10px; line-height: 1.4;
  transition: all 0.3s;
}
.tip-legal--employee {
  background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25);
  color: #86efac;
}
.tip-legal--owner {
  background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fde68a;
}
.tip-legal__icon { flex-shrink: 0; font-size: 14px; }

/* Summary */
.tip-summary {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent-glow);
  display: flex; flex-direction: column; gap: 4px;
}
.tip-summary__row {
  display: flex; justify-content: space-between; font-size: 12px;
}
.tip-summary__row span { color: var(--text-muted); }
.tip-summary__row strong { color: var(--text-primary); }
.tip-summary__total {
  padding-top: 4px; margin-top: 4px;
  border-top: 1px solid var(--glass-border);
}
.tip-summary__total strong {
  font-size: 14px; color: var(--accent-hover);
}

/* ============================================================================
   KASSENLADE / GELDTRANSIT (GoBD / KassSichV / DSFinV-K)
   ============================================================================ */

.modifiers-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 50vh;
  overflow-y: auto;
}

.modifier-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.modifier-option:hover {
  border-color: var(--primary);
  background: rgba(108, 92, 231, 0.05);
}

.modifier-option.selected {
  border-color: var(--primary);
  background: rgba(108, 92, 231, 0.1);
  box-shadow: 0 0 0 1px var(--primary);
}

.modifier-option__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.modifier-option__name {
  font-weight: 500;
  color: var(--text-primary);
}

.modifier-option__price {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cart-item__modifiers {
  font-size: 0.8rem;
  color: var(--text-secondary);
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border);
}

/* Modifier-Anzeige klickbar bei nicht-geparkten Items */
.cart-item__modifiers--editable {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cart-item__modifiers--editable:hover {
  background: rgba(167, 139, 250, 0.08);
  border-left-color: #a78bfa;
  color: var(--text-primary);
}

.cart-item__edit-hint {
  opacity: 0.6;
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.cart-item__modifiers--editable:hover .cart-item__edit-hint {
  opacity: 1;
}

/* Modals */
.drawer-body { display: flex; flex-direction: column; gap: 12px; }

/* Cash balance display */
.drawer-balance {
  text-align: center; padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.drawer-balance__label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.drawer-balance__amount {
  font-size: 28px; font-weight: 800; color: var(--accent-hover);
  margin: 4px 0 2px;
}
.drawer-balance__hint {
  font-size: 9px; color: var(--text-muted); font-style: italic;
}

.drawer-legal {
  display: flex; gap: 10px; padding: 10px; border-radius: var(--radius-sm);
  background: rgba(100, 116, 139, 0.08);
  border: 1px solid rgba(100, 116, 139, 0.2);
}
.drawer-legal__icon { font-size: 20px; flex-shrink: 0; }
.drawer-legal__content strong {
  display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 2px;
}
.drawer-legal__content p {
  font-size: 10px; line-height: 1.4; color: var(--text-muted);
  margin: 0 0 4px 0;
}
.drawer-legal__content cite {
  font-size: 9px; font-style: italic; color: var(--text-muted);
  display: block; line-height: 1.3;
}

.drawer-section { display: flex; flex-direction: column; gap: 6px; }
.drawer-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px;
}
.drawer-label__hint {
  font-weight: 500; font-size: 10px; color: var(--text-muted);
}

.drawer-reason-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.drawer-reason-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border-radius: var(--radius-sm);
  border: 2px solid var(--glass-border); background: var(--glass);
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  min-height: 48px; touch-action: manipulation;
}
.drawer-reason-btn span:first-child { font-size: 18px; }
.drawer-reason-btn small {
  font-size: 9px; font-weight: 500; color: var(--text-muted);
}
.drawer-reason-btn:hover { border-color: var(--accent); }
.drawer-reason-btn--active {
  border-color: #f59e0b; background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

/* Einlage = Grün, Entnahme = Rot */
.drawer-reason-btn--einlage.drawer-reason-btn--active {
  border-color: var(--green); background: var(--green-glow); color: var(--green);
}
.drawer-reason-btn--entnahme.drawer-reason-btn--active {
  border-color: var(--red); background: var(--red-glow); color: #fca5a5;
}

/* Sub-reason grid */
.drawer-subreason-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.drawer-subreason-btn {
  padding: 8px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
  font-family: var(--font); font-size: 11px; font-weight: 500;
  text-align: center; min-height: 36px; touch-action: manipulation;
}
.drawer-subreason-btn:hover { border-color: var(--accent); }

/* W2-57: Umleitung zur Trinkgeldauszahlung — der Grund dafuer steht nicht
   mehr in der Liste, der richtige Weg soll aber auffindbar bleiben. */
.drawer-subreason-hint {
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
}
.drawer-subreason-btn--active {
  border-color: var(--accent); background: var(--accent-glow); color: var(--accent-hover);
}

/* Amount input */
.drawer-amount-input { position: relative; display: flex; align-items: center; }
.drawer-amount-field {
  width: 100%; padding: 10px 32px 10px 12px;
  font-size: 20px; font-weight: 700; font-family: var(--font);
  text-align: right; border-radius: var(--radius-sm);
  border: 2px solid var(--glass-border); background: var(--glass);
  color: var(--text-primary); outline: none; transition: border-color 0.2s;
}
.drawer-amount-field:focus { border-color: #f59e0b; }
.drawer-amount-suffix {
  position: absolute; right: 12px; font-size: 16px;
  color: var(--text-muted); pointer-events: none;
}
.drawer-amount-error {
  font-size: 11px; color: var(--red); font-weight: 500;
  padding: 4px 0;
}

/* Preview */
.drawer-preview {
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 3px;
}
.drawer-preview--einlage { border-color: var(--green); background: rgba(34, 197, 94, 0.04); }
.drawer-preview--entnahme { border-color: var(--red); background: rgba(239, 68, 68, 0.04); }
.drawer-preview__row {
  display: flex; justify-content: space-between; font-size: 11px;
}
.drawer-preview__row span { color: var(--text-muted); }
.drawer-preview__row strong { color: var(--text-primary); font-size: 11px; }

/* ============================================================================
   RESPONSIVE / TOUCH DEVICE SUPPORT
   ============================================================================ */

/* Global touch safety for all buttons */
button, [role="button"], input[type="button"], input[type="submit"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Tablet (Portrait, z.B. iPad) ──────────────────────────────── */
@media (max-width: 1024px) {
  .pos-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: calc(100vh - var(--kf-banner-h, 0px));
    height: calc(100dvh - var(--kf-banner-h, 0px));
  }

  .products-panel {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cart-panel {
    height: auto;
    max-height: 40vh;
    border-top: 2px solid var(--accent);
    border-left: none;
  }

  .cart-items { max-height: 25vh; min-height: 60px; }

  .quick-actions {
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 6px 8px;
  }

  .qa-btn {
    min-height: 52px;
    font-size: 9px;
  }

  .qa-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* ── Smartphone/Klein-Tablet QUER (breit, aber NIEDRIG) ───────────────────
   Pilot-Feedback: das gestapelte Layout (Warenkorb UNTER der Auswahl) drückte
   Tisch-/Produktauswahl auf einen schmalen Streifen – je nach Anzeige-
   Einstellungen rutschte der Warenkorb „extrem hoch". Im Querformat ist
   seitlich Platz → Warenkorb als RECHTE SPALTE wie am Tablet/Desktop;
   die Auswahl behält die volle Höhe. Überschreibt die Stapel-Regeln aus
   (max-width: 1024px) für flache Viewports. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 560px) {
  .pos-container {
    grid-template-columns: 1fr clamp(280px, calc(340px * var(--kf-cart-width-scale, 1)), 44vw);
    grid-template-rows: 1fr;
  }

  .cart-panel {
    height: auto;
    max-height: none;
    border-top: none;
    border-left: 2px solid var(--accent);
  }

  .cart-items {
    max-height: none;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
  }

  .products-panel {
    padding-bottom: 0;
    height: auto;
    min-height: 0;
  }

  /* Oberste Leiste UMBRECHEN statt abschneiden: in der schmalen linken
     Spalte war rechts alles ab „Thekenverkauf" abgeschnitten (Pilot-Foto).
     Suche/Titel (center) rutscht als eigene zweite Zeile darunter. */
  .top-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 10px;
    gap: 8px;
    row-gap: 4px;
  }

  .top-bar__center {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
  }

  .top-bar__left, .top-bar__right {
    flex-shrink: 1;
    min-width: 0;
    gap: 8px;
  }

  .top-bar .logo__text { display: none; } /* ⚡ genügt – Platz für die Buttons */
}

/* ── Smartphone (z.B. iPhone, Samsung) ─────────────────────────── */
@media (max-width: 600px) {
  .pos-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .top-bar {
    padding: 6px 10px;
    gap: 8px;
  }

  .search-box {
    min-width: 0;
    flex: 1;
  }

  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
  }

  .product-card {
    padding: 10px 6px;
    gap: 4px;
  }

  .product-card__emoji { font-size: 24px; }
  .product-card__name { font-size: 10px; }
  .product-card__price { font-size: 12px; }

  .cart-panel {
    max-height: 45vh;
    border-top: 2px solid var(--accent);
    border-left: none;
  }

  .cart-items { max-height: 15vh; }

  .cart-actions {
    padding: 8px 8px;
    gap: 5px;
  }

  .cart-btn {
    padding: 11px 8px;
    font-size: 12.5px;
    gap: 5px;
  }

  .cart-btn svg {
    width: 16px;
    height: 16px;
  }

  .quick-actions {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 6px;
  }

  .qa-btn {
    min-height: 52px;
    padding: 8px 4px;
    font-size: 9px;
  }

  .qa-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Modal auf volle Breite */
  .modal__dialog {
    width: 95vw;
    max-width: none;
    margin: 8px;
    max-height: 90vh;
  }

  .tax-context-toggle {
    padding: 6px 8px;
  }

  .ctx-btn {
    min-height: 48px;
    padding: 10px 8px;
  }

  /* Kategorie-Tabs scrollbar */
  .category-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
}

/* ══════════════════════════════════════════════════════════════════ */
/* LOGIN OVERLAY                                                     */
/* ══════════════════════════════════════════════════════════════════ */

.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.login-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-input::placeholder {
  color: var(--text-muted);
}

.login-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: white;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.login-btn:hover { filter: brightness(1.1); }
.login-btn:active { transform: scale(0.98); }

.login-error {
  font-size: 13px;
  color: var(--red);
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--red-glow);
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.login-status {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════ */
/* TOUCH SLIDE-OUT MENU (für Tablets / Smartphones)                  */
/* ══════════════════════════════════════════════════════════════════ */

.touch-menu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.touch-menu__panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--glass-border);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.25s ease;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.touch-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 18px;
  font-weight: 700;
}

.touch-menu__items {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Dezente Build-Fußzeile im Burger-Menü (ersetzt das schwebende Badge auf dem
   Handy; 5× tippen = Ablauf-Diagnose, pos.js). */
.touch-menu__build {
  margin-top: 4px;
  padding: 6px 4px 2px;
  text-align: center;
  font: 10px/1.3 monospace;
  color: var(--text-muted);
  opacity: 0.6;
  user-select: none;
  cursor: default;
}

/* Schwebendes Build-Badge auf schmalen Handys ausblenden – es überlappte sonst
   die eingeklappte Warenkorb-Leiste (Betreiber-Foto 18.07.2026). Im Burger-Menü
   bleibt die Version über .touch-menu__build sichtbar. */
@media (max-width: 600px) {
  #kfBuildBadge { display: none !important; }
}

.touch-menu__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
  /* NICHT stauchen: sonst drückt die Flex-Spalte die Karten unter ihre Inhaltshöhe,
     die Untertitel quellen heraus und überlagern die nächste Karte. Stattdessen
     behalten die Karten ihre Höhe und der Container (.touch-menu__items) scrollt. */
  flex-shrink: 0;
}

.touch-menu__item span {
  font-size: 18px;
}

.touch-menu__item small {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.touch-menu__item:hover,
.touch-menu__item:active {
  background: var(--bg-hover);
  border-color: var(--accent);
}

/* ── Mobile Tab-Bar: Default hidden (nur auf Mobile sichtbar) ── */
.mobile-table-tabs {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════ */
/* MOBILE: Stacked Layout (< 768px)                                  */
/* ══════════════════════════════════════════════════════════════════ */


@media (max-width: 768px) {
  .pos-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: calc(100vh - var(--kf-banner-h, 0px));
    height: calc(100dvh - var(--kf-banner-h, 0px));
  }

  .products-panel {
    /* KEIN großer Boden-Abstand mehr: die Panel-Höhe reserviert den
       eingeklappten Warenkorb bereits (height: calc(100dvh - 60px - banner),
       s. u.). Die früheren 100px waren eine DOPPELTE Reservierung → 100px
       Leerraum zwischen Funktionsleiste und Warenkorb-Leiste (Betreiber-Foto
       18.07.2026 „jede Menge Luft"). 8px = knappe Trennung, nicht mehr. */
    padding-bottom: 8px;
  }

  /* Tischauswahl (ts-layout aktiv): KEIN 100px-Bodenabstand – der ist für die
     Produktansicht. Sonst gehen 100px Höhe verloren und Tisch-Grid + Numpad
     werden gestaucht. Greift nur in der Tischauswahl (im Bestellmodus stehen
     im productGrid die Produkte, kein ts-layout). */
  .products-panel:has(.ts-layout) {
    padding-bottom: 0;
  }

  .product-grid:has(.ts-layout) {
    min-height: 0;
  }

  .cart-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Das Blatt richtet sich nach seinem INHALT (Kopf + Liste + Summen +
       Aktionsleiste) – NICHT nach einem festen Anteil der Fensterhöhe.
       Vorher: height:55dvh, zusätzlich gedeckelt von `max-height:45vh` aus der
       600px-Query weiter oben → effektiv IMMER 45 % der Fensterhöhe. Auf einem
       kurzen Gerät reicht das nicht: Sunmi V2 Pro (CSS 360x648) brauchte 358px
       Inhalt, bekam 292 → „Bezahlen" lag 60px UNTER dem Rand und war per Finger
       unerreichbar (overflow:hidden schnitt es ab). Auf 390x844 passte es mit
       2px Reserve – deshalb sah es kein Guard.
       max-height deckelt weiter, damit die Artikel-Kacheln sichtbar bleiben;
       reicht der Platz nicht, scrollt die Liste in sich (s. .cart-items). */
    height: auto;
    max-height: 85dvh;
    z-index: 100;
    border-left: none;
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(calc(100% - 60px));
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Die Liste MUSS bis auf 0 schrumpfen dürfen. Ein min-height (25vh-Query:
     60px) drückt sonst die Aktionsleiste aus dem Blatt – genau das war der
     Sunmi-Fund: .cart-items hing am 60px-Anschlag, „Bezahlen" fiel raus.
     Die Liste hat ihren eigenen Scroll → Positionen bleiben erreichbar. */
  .cart-panel .cart-items {
    min-height: 0;
  }

  .cart-panel.cart-panel--expanded {
    transform: translateY(0);
  }

  /* Tisch-Modus auf Mobile: Tab-basiertes Umschalten */
  .cart-panel.cart-panel--table-mode {
    transform: translateY(100%);
    height: calc(100vh - 56px - var(--kf-banner-h, 0px));
    height: calc(100dvh - 56px - var(--kf-banner-h, 0px));
    max-height: calc(100vh - 56px - var(--kf-banner-h, 0px));
    max-height: calc(100dvh - 56px - var(--kf-banner-h, 0px));
    border-radius: 0;
    top: calc(56px + var(--kf-banner-h, 0px));
    bottom: auto;
    border-top: 2px solid var(--accent);
    /* Die fixe Tab-Leiste (56px, bottom:0) lag SONST über den Aktions-Buttons
       (Bezahlen/Parken) am Panel-Boden → Buttons unsichtbar. Platz freihalten. */
    padding-bottom: 56px;
  }

  .cart-panel.cart-panel--table-mode.cart-panel--expanded {
    transform: translateY(0);
  }

  .cart-panel.cart-panel--table-mode .cart-items {
    flex: 1;
    max-height: none;
    /* min-height 0 (war 80px): auf kurzen Geräten (Sunmi 360x648) hielt der
       80px-Anschlag die Liste so groß, dass nach einer Gutschein-Einlösung
       (zusätzliche Zeilen) „Bezahlen" aus dem Blatt gedrückt wurde. Die Liste
       darf auf 0 schrumpfen und scrollt in sich; Summen + Aktionsleiste bleiben
       dadurch immer sichtbar (flex-shrink:0 unten). Betreiber 18.07.2026. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Summen + Aktionsleiste (Bezahlen/Parken) NIE schrumpfen/clippen. */
  .cart-panel.cart-panel--table-mode .cart-totals,
  .cart-panel.cart-panel--table-mode .cart-actions {
    flex-shrink: 0;
  }

  /* Kompakter Fuß (Betreiber 18.07.2026): weniger Höhe zwischen
     Zwischensumme/Gesamt und den Knöpfen (Leeren/Bezahlen/Parken). */
  .cart-panel.cart-panel--table-mode .cart-totals { padding: 5px 14px; }
  .cart-panel.cart-panel--table-mode .total-row { padding: 1px 0; font-size: 12px; }
  .cart-panel.cart-panel--table-mode .total-row--grand { font-size: 18px; padding: 2px 0; }
  .cart-panel.cart-panel--table-mode .cart-actions { padding: 8px 14px; gap: 8px; }
  .cart-panel.cart-panel--table-mode .cart-btn { min-height: 42px; padding: 9px 12px; font-size: 14px; }

  /* 3-Zonen-Vertrag (Aktionen), Gürtel-und-Hosenträger: Die Aktionsleiste ist
     als flex-shrink:0-Kind am Blatt-Boden ohnehin fix (die Liste .cart-items
     nimmt allen Überlauf per eigenem Scroll auf). sticky bottom:0 pinnt
     „Bezahlen" zusätzlich, falls ein künftiger Umbau das Blatt doch scrollbar
     macht – dann bleibt der Primär-Knopf trotzdem sichtbar. Hintergrund deckt
     darunterliegende Listen-Positionen ab. Guard: layout-sheet-contract. */
  .cart-panel.cart-panel--expanded .cart-actions,
  .cart-panel.cart-panel--table-mode .cart-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bg-secondary);
  }

  /* Kompakter Tisch-Kopf (Betreiber 18.07.2026): Tisch-Zeile + Parteien +
     Verzehr + Gang fraßen zu viel Höhe. Alles flacher; Verzehr schmaler mit
     Gang DANEBEN (.ctx-course-row, von renderCourseBar erzeugt). */
  /* Kopfzeile in EINER Zeile (Betreiber 18.07.2026): T1 + Parteien-Leiste (scrollt
     horizontal bei vielen Parteien) + 🎤. Bon-Nummer UND Uhrzeit ausgeblendet –
     der Kellner braucht die Bon-Nr. nicht, und jedes Gerät hat seine eigene Uhr.
     Beide Elemente bleiben im DOM, damit die textContent-Setter nicht brechen. */
  .cart-panel.cart-panel--table-mode .cart-header {
    padding: 4px 10px;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
  }
  /* T1 als dezenter Chip (Betreiber 19.07.2026: „nett hinterlegt, aber nicht
     größer"): Akzent-Tönung, gleiche Schriftgröße. */
  .cart-panel.cart-panel--table-mode .cart-title {
    font-size: 13px; flex: 0 0 auto; font-weight: 700;
    padding: 4px 10px; border-radius: 8px;
    background: rgba(108, 92, 231, 0.14); color: var(--accent, #6C5CE7);
  }
  .cart-panel.cart-panel--table-mode .cart-number,
  .cart-panel.cart-panel--table-mode #cartTime { display: none; }
  .cart-panel.cart-panel--table-mode .cart-meta { flex: 0 0 auto; gap: 4px; }
  /* KEINE graue Fläche hinter der Parteien-Zeile (Betreiber 19.07.2026:
     „daneben alles grau hinterlegt → weg, muss weiß sein"). */
  .cart-panel.cart-panel--table-mode .party-tabs {
    flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; gap: 6px;
    background: transparent; border-bottom: none;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .cart-panel.cart-panel--table-mode .party-tabs::-webkit-scrollbar { display: none; }
  /* Parteien-Tabs 50 % breiter (Betreiber 19.07.2026: auf kleinen Geräten zu
     klein) – zentriert, größere Schrift. */
  .cart-panel.cart-panel--table-mode .party-tab {
    padding: 5px 16px; min-width: 44px; min-height: 34px; justify-content: center;
    font-size: 13px; border-radius: 8px; white-space: nowrap; flex: 0 0 auto;
  }
  /* „+ Partei" als richtiger Button (Betreiber 19.07.2026: nicht nur der
     Schriftzug) – Akzent-Kontur-Pille. */
  .cart-panel.cart-panel--table-mode .party-tab--add {
    border-style: solid; border-color: var(--accent, #6C5CE7);
    background: rgba(108, 92, 231, 0.12); color: var(--accent, #6C5CE7);
    font-weight: 700; padding: 5px 14px;
  }
  /* Nur der Buchstabe – Badge (Menge/Summe) entfällt in der Leiste. */
  .cart-panel.cart-panel--table-mode .party-tab__badge { display: none; }
  /* Überlauf → Auswahlliste statt scrollender Leiste. */
  .cart-panel.cart-panel--table-mode .party-tabs--dropdown { overflow: visible; align-items: center; }
  .cart-panel.cart-panel--table-mode .party-select {
    flex: 1 1 auto; min-width: 0; max-width: 150px;
    padding: 3px 8px; font-size: 12px; border-radius: 8px;
    background: var(--glass); color: var(--text-primary);
    border: 1px solid var(--glass-border);
  }
  .cart-panel.cart-panel--table-mode .ctx-course-row {
    padding: 3px 10px;
    gap: 6px;
    border-bottom: 1px solid var(--glass-border);
  }
  .cart-panel.cart-panel--table-mode .ctx-course-row .ctx-btn { min-height: 30px; padding: 3px 6px; font-size: 12px; }
  .cart-panel.cart-panel--table-mode .ctx-course-row .ctx-btn__icon { font-size: 14px; }
  .cart-panel.cart-panel--table-mode .ctx-course-row .ctx-btn__tax { display: none; }
  /* „Im Haus"/„Außer Haus" einzeilig halten (nicht umbrechen). */
  .cart-panel.cart-panel--table-mode .ctx-course-row .ctx-btn__label { white-space: nowrap; font-size: 11px; }
  /* 🎤 ist in die Bezahlleiste gewandert → aus der Kopfzeile ausblenden. */
  .cart-panel.cart-panel--table-mode .cart-voice-btn { display: none; }

  .cart-panel.cart-panel--table-mode .cart-header::before {
    display: none;
  }

  /* ── Mobile Tab-Bar für Tisch-Modus ── */
  .mobile-table-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    height: 56px;
  }

  .mobile-table-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .mobile-table-tab--active {
    color: var(--accent-hover);
  }

  .mobile-table-tab--active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
  }

  .mobile-table-tab__icon {
    font-size: 18px;
  }

  .mobile-table-tab__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 40px);
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* Products-Panel Anpassung im Tisch-Modus.
     WICHTIG: --kf-banner-h MIT abziehen – das Panel beginnt UNTER dem festen
     Banner (Mock-TSE/Testbetrieb). Ohne den Abzug ragte der Panel-Boden genau
     um die Banner-Höhe unter die 56px-Tab-Leiste → die zweite Quick-Actions-
     Reihe war verdeckt (Pilot-Fund 2026-07-16; Klasse „festes Overlay
     VERDECKT statt VERSCHIEBT", Guard e2e-mock-banner (g)). */
  .products-panel.products-panel--table-active {
    height: calc(100vh - 56px - var(--kf-banner-h, 0px));
    height: calc(100dvh - 56px - var(--kf-banner-h, 0px));
    padding-bottom: 0;
  }

  .cart-header {
    cursor: pointer;
    touch-action: manipulation;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
  }

  /* Drag-Handle auf dem Cart-Header */
  .cart-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--glass-border);
    margin: 0 auto 8px;
  }

  /* Geschwister-Fall derselben Banner-Klasse: auch außerhalb des Tischmodus
     muss das Panel unter dem Banner enden (60px = eingeklappter Warenkorb).
     Bisher kaschierten die 100px padding-bottom den Fehler nur bis
     Banner-Höhe ≈ 100px. */
  .products-panel {
    height: calc(100vh - 60px - var(--kf-banner-h, 0px));
    height: calc(100dvh - 60px - var(--kf-banner-h, 0px));
  }

  .top-bar {
    flex-wrap: nowrap;
    padding: 8px 12px;
    gap: 8px;
  }

  /* Linker Slot ist auf Mobile leer (Logo entfernt, TSE-Status ausgeblendet)
     → ausblenden, damit die Kopfzeile nicht mit einer Lücke beginnt. */
  .top-bar__left {
    display: none;
  }

  /* Kopfzeile SAUBER von links nach rechts (Betreiber 18.07.2026):
     [← Tische] [📦 Thekenverkauf …………] rechts [PT] [☰]. Vorher lag der
     Zurück-Knopf + Titel ganz rechts und Bediener/Menü links – unlogisch. */
  .top-bar__center {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .top-bar__right {
    order: 2;
    flex-shrink: 0;
  }

  .logo__text {
    font-size: 15px;
  }

  /* ── Produkt-Grid: Kompakt aber lesbar ── */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: 120px;
  }

  .product-card {
    padding: 10px 6px 8px;
    min-height: 100px;
    overflow: visible;
    justify-content: center;
  }

  .product-card__emoji {
    font-size: 24px;
  }

  .product-card__name {
    font-size: 10px;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .product-card__price {
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .product-card__tax {
    width: 16px;
    height: 16px;
    font-size: 8px;
    top: 4px;
    right: 4px;
  }

  .quick-actions {
    grid-template-columns: repeat(6, 1fr);
  }

  .qa-btn {
    font-size: 9px;
    padding: 4px 2px;
    min-height: 44px;
  }

  .qa-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Kategorien am Handy: schmale Spalten BEIBEHALTEN, damit bei 320 px noch DREI
     Kacheln nebeneinander stehen (breitere Spalten kippten auf 2 Spalten → zu
     viele Zeilen → der Artikelbereich wurde plattgedrückt, B-5-E2E). Sauberes
     Umbrechen macht der 2-Zeilen-Clamp an `.cat-btn__label`, nicht die Breite. */
  .categories {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    grid-auto-rows: 44px;   /* feste, einheitliche Kachelhöhe (2 Zeilen passen knapp) */
    padding: 6px 8px;
    gap: 4px;               /* kleine, aber sichtbare Lücken – buttonartig (17.08.2026) */
  }

  .cat-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
  }

  /* Unterkategorien am Handy minimal kompakter beschriftet, damit einzelne
     lange Wörter („Saftschorlen", „Heißgetränke") in der gleich breiten Spalte
     EINZEILIG bleiben, statt mitten im Wort umzubrechen. Mehrwortige Namen
     („Schnäpse und Brände") brechen weiterhin sauber an der Leerstelle um. */
  .categories--sub .cat-btn {
    font-size: 11px;
    padding: 5px 8px;
    gap: 4px;
  }

  /* Scanner-Input auf Mobile verstecken (kein HID-Scanner) */
  .scanner-input {
    display: none !important;
  }

  /* Suchfeld: Font-Size >= 16px verhindert iOS-Zoom beim Focus */
  .search-bar__input {
    font-size: 16px;
  }
}

/* Kurze Displays: Schnellaktions-Leiste kompakter, damit in der Tischauswahl
   mehr Höhe für das Tisch-Grid bleibt (Numpad wird in table-selection.css
   ebenfalls verkleinert). */
@media (max-width: 768px) and (max-height: 720px) {
  .quick-actions {
    gap: 4px;
  }

  .qa-btn {
    min-height: 36px;
    padding: 3px 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════ */
/* KLEINE SMARTPHONES (<400px)                                       */
/* ══════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px 8px;
  }

  .product-card {
    padding: 8px 4px 6px;
    min-height: 80px;
    gap: 4px;
  }

  .product-card__emoji {
    font-size: 20px;
  }

  .product-card__name {
    font-size: 9px;
  }

  .product-card__price {
    font-size: 11px;
  }

  .quick-actions {
    grid-template-columns: repeat(3, 1fr);
  }

  .top-bar__left .tse-status {
    display: none;
  }

  /* Bediener am kleinen Display NICHT komplett verstecken (Gerätefund
     17.07.2026: Betreiber glaubte, als „admin" angemeldet zu sein – der Bon
     trug den still restaurierten Pilot-Login, und nirgends war sichtbar, WER
     angemeldet ist). Kompakt: nur der Initialen-Kreis bleibt (36px), der
     Name/Rolle-Textblock verschwindet; Tipp auf den Kreis zeigt den vollen
     Namen als Toast (pos.js, cashier-info-Tap). */
  .cashier-info > div:not(.cashier-avatar) {
    display: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Aussehen-Anpassungen (KassenAppearance: manuell + KI-Assistent).
   Alle Defaults NEUTRAL (Skala 1 / Icons sichtbar) → ohne Einstellung keine
   Änderung am bestehenden Aussehen.
   ──────────────────────────────────────────────────────────────────────── */
/* Button-Größe: zoom skaliert Box+Text sauber; var-Default 1 = unverändert. */
.btn, .cat-btn, .btn-icon {
  zoom: var(--kf-btn-scale, 1);
}
/* Icons/Emojis aus-/einblendbar (html.kf-no-icons). Betrifft die dedizierten
   Icon-Elemente (Produkt-Emoji, Kategorie-/Logo-/Kontext-/Zahlart-Icons). */
.kf-no-icons .product-card__emoji,
.kf-no-icons .cat-icon,
.kf-no-icons .logo__icon,
.kf-no-icons .ctx-btn__icon,
.kf-no-icons .pay-method__icon {
  display: none !important;
}

/* Globales Tap-Feedback: Keyframe + .kf-tap injiziert tap-feedback.js selbst
   (portabel für alle Seiten) – siehe frontend/tap-feedback.js. */

/* ══════════════════════════════════════════════════════════════════ */
/* HELL-MODUS (Sonnenmodus) – KLASSENWEITER Feld-Fix (Pilot 2026-07-14)  */
/* ══════════════════════════════════════════════════════════════════ */
/* Fehlerklasse „JS-Inline-Farbe ignoriert den Hell-Modus": viele JS-gerenderte
   Eingaben (Artikel-Liste, Beilagen-Designer, Zeiterfassungs-Modal u. a. Modals)
   tragen FEST verdrahtete dunkle Inline-Farben (background:#1e293b/#334155) → im
   Hell-Modus schwarze Kästen auf hellem Grund. Inline-Styles schlagen Stylesheet-
   Regeln → GLOBAL (pos.css wird überall geladen) mit !important auf helle Werte
   zwingen. NUR im Hell-Modus; Checkboxen/Radios/Range/Color ausgenommen. Ein
   einziger Ort statt pro Seite/Modal. Guard: tests/e2e/e2e-designer-hellmodus-felder.cjs */
html.kf-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.kf-light select,
html.kf-light textarea {
  background: #ffffff !important;
  color: #0b1220 !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
}
html.kf-light input::placeholder,
html.kf-light textarea::placeholder { color: #64748b !important; }

/* Jugendschutz (§§ 9, 10 JuSchG) – Altersgrenze auf Kachel und im Warenkorb.
   Warnfarbe, nicht Akzentfarbe: es ist ein Hinweis auf eine gesetzliche
   Abgabebeschränkung, keine Produkteigenschaft wie der Steuerbuchstabe.
   Kontrast in BEIDEN Modi geprüft (Sonnenmodus-Regel weiter unten). */
.product-card__age {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  font-size: .62rem; font-weight: 800; letter-spacing: .01em;
  padding: 1px 5px; border-radius: 6px; white-space: nowrap;
  background: #b45309; color: #fff;
}
.cart-item__age {
  font-size: .68rem; font-weight: 700; margin-left: 4px;
  padding: 0 4px; border-radius: 5px; white-space: nowrap;
  background: #b45309; color: #fff;
}

/* ══════════════════════════════════════════════════════════════════ */
/* BEWEGUNG REDUZIEREN (§ 6 Abs. 2 Nr. 9 und 12 BFSGV)               */
/* ══════════════════════════════════════════════════════════════════ */
/* Nr. 9 verlangt, das Auslösen fotosensitiver Anfälle zu vermeiden;
   Nr. 12 „ausreichend Zeit und eine flexible Zeitmenge für die
   Interaktionen". Wer im Betriebssystem „Bewegung reduzieren" gesetzt
   hat, bekommt hier keine Animationen mehr — statt sie zu entfernen
   (sie helfen allen anderen beim Orientieren) werden sie nur für die
   Nutzer abgeschaltet, die das ausdrücklich verlangt haben.
   Bewusst NICHT auf 0 gesetzt: eine Dauer von exakt 0 bricht in
   manchen Browsern animationend-/transitionend-Ereignisse, an denen
   Aufräum-Logik hängen kann. 0.01ms feuert sie, ohne sichtbar zu sein. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Rechtlicher Fussbereich der Anmeldekarte ─────────────────────────────
   Der Verweis auf die Barrierefreiheits-Produktinformation (Paragraf 4 Abs. 2
   BFSGV). Dezent, aber nicht versteckt -- und mit sichtbarem Tastaturfokus,
   denn ausgerechnet dieser Link darf nicht nur mit der Maus erreichbar sein. */
.login-legal {
  margin-top: 1rem;
  text-align: center;
  font-size: .8rem;
}
.login-legal a {
  color: var(--text-secondary, #94a3b8);
  text-decoration: underline;
}
.login-legal a:hover { color: var(--text-primary, #e2e8f0); }
.login-legal a:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Touch-Zielgroesse (BFSGV / WCAG 2.5.5) ───────────────────────────────
   Gemessen am 05.08.2026 im echten Browser: `.kf-pwreveal` (Passwort
   einblenden) war 31x31 px. Unter 44x44 trifft man das Ziel mit dem Finger
   nur mit Glueck -- und wer daneben tippt, loest im Zweifel den Knopf
   daneben aus. Die Flaeche waechst, das Symbol bleibt gleich gross. */
.kf-pwreveal {
  /* 48 statt 44: die Login-Karte traegt `transform: scale(.92)`, damit sie auf
     niedrigen Displays passt. CSS-Pixel sind dort NICHT Bildschirm-Pixel --
     44 css ergaben gemessen 40 real. 48 x 0,92 = 44,2. Genau dafuer misst man
     am gerenderten Ergebnis statt im Stylesheet: wer nur das CSS liest, sieht
     44 und ist zufrieden. */
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}