/* Bierdeckel – © 2026 Torsten Rückwald. Alle Rechte vorbehalten. Siehe LICENSE. */
/* ---------- Farbsystem ---------- */
:root {
  --bg: #faf7f3;
  --surface: #ffffff;
  --surface-muted: #f1e9e2;
  --text: #241a1a;
  --text-secondary: #6b5c5c;
  --border: #802B2B;
  --border-subtle: #d9cfc8;
  --accent: #7F2B2B;
  /* Akzent als Schrift oder Rahmen (aktive Pillen, Links, aktives Symbol).
     Im Hellen gleich --accent; im Dunkeln braucht Schrift ein helleres Rot
     als eine Füllung mit weißer Schrift darauf. */
  --accent-text: #7F2B2B;
  --accent-hover: #6a2323;
  --accent-contrast: #ffffff;
  --danger: #a02323;
  --success-bg: #e7efe7;
  --success-text: #205c2b;
  --paid-bg: #eee8e2;
  --paid-text: #6b5c5c;
  --shadow: 0 1px 3px rgba(36, 26, 26, 0.12), 0 1px 2px rgba(36, 26, 26, 0.08);
  --neutral-gray: #6b7280;
  --chart-bar: #4E9664;
  /* Nicht ausgewählte Balken: erkennbar als Balken, aber klar hinter dem
     ausgewählten zurücktretend. */
  --chart-bar-muted: #bccabf;
  --focus-ring: #000000;
  --suggestion-hover: #f5f5f5;
  /* Neutrales Grau für den Kreis oben im Kopf – ein aufgehelltes Rot würde
     rosa. */
  --avatar-bg: #ececec;
  --raised: #ffffff;
  /* Feiner neutraler Rand für schwebende Flächen (Meldungen). */
  --raised-edge: #d9cfc8;
  --focus-border: #4a1818;
  --focus-glow: rgba(128, 43, 43, 0.25);
}

/* Dunkelmodus: neutrale Grautöne statt rötlichem Braunschwarz, und echte
   Rottöne statt Rosa. Rosa entsteht aus hell UND entsättigt – deshalb ist
   das Schrift-Rot hell, aber kräftig gesättigt, und die Füllung bleibt dein
   Rot, nur leicht angehoben, mit weißer Schrift wie im Hellmodus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414;
    --surface: #1f1f1f;
    --surface-muted: #2a2a2a;
    --text: #f2f0ee;
    --text-secondary: #a9a6a3;
    --border: #b53f3f;
    --border-subtle: #363636;
    --accent: #b53f3f;
    --accent-text: #ee5a52;
    --accent-hover: #c44848;
    --accent-contrast: #ffffff;
    --danger: #ee5a52;
    --success-bg: #1c2b1f;
    --success-text: #8fd39c;
    --paid-bg: #1a1a1a;
    --paid-text: #9a9794;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --neutral-gray: #9ca3af;
    --chart-bar: #4E9664;
    --chart-bar-muted: #45524a;
    --focus-ring: #ffffff;
    --suggestion-hover: #2e2e2e;
    --avatar-bg: #333333;
    --raised: #2e2e2e;
    --raised-edge: #4a4a4a;
    --focus-border: #ee5a52;
    --focus-glow: rgba(238, 90, 82, 0.3);
  }
  :root:not([data-theme="light"]) .logo-lolaparoli { color: var(--text); }
}

:root[data-theme="dark"] {
  --bg: #141414;
  --surface: #1f1f1f;
  --surface-muted: #2a2a2a;
  --text: #f2f0ee;
  --text-secondary: #a9a6a3;
  --border: #b53f3f;
  --border-subtle: #363636;
  --accent: #b53f3f;
  --accent-text: #ee5a52;
  --accent-hover: #c44848;
  --accent-contrast: #ffffff;
  --danger: #ee5a52;
  --success-bg: #1c2b1f;
  --success-text: #8fd39c;
  --paid-bg: #1a1a1a;
  --paid-text: #9a9794;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --neutral-gray: #9ca3af;
  --chart-bar: #4E9664;
  --chart-bar-muted: #45524a;
  --focus-ring: #ffffff;
  --suggestion-hover: #2e2e2e;
  --avatar-bg: #333333;
  --raised: #2e2e2e;
  --raised-edge: #4a4a4a;
  --focus-border: #ee5a52;
  --focus-glow: rgba(238, 90, 82, 0.3);
}
:root[data-theme="dark"] .logo-lolaparoli { color: var(--text); }

/* ---------- Reset & Basis ---------- */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
}
h1, h2 { line-height: 1.2; }
button, input { font-family: inherit; font-size: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Höhere Spezifität als input[type="text"] etc., damit deren width:100%
   das visually-hidden-Feld (z. B. login-username für Passwortmanager)
   nicht wieder aufbläht. */
input.visually-hidden {
  width: 1px !important;
  padding: 0 !important;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  /* Der Header ist ein eigener Stapel-Kontext: alles darin (auch das
     Konto-Menü) wird nach außen auf diese Ebene gedeckelt. Muss deshalb
     über den Inhalten der Seite liegen, sonst schiebt sich das Namensfeld
     über das geöffnete Menü. */
  z-index: 30;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.app-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.logo-lolaparoli {
  font-family: "Arial Black", "Arial Bold", system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #000000;
}
.app-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: 8.5px;
  flex: 1;
}
.nav-link {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.85rem;
}
.nav-link.is-active {
  color: var(--accent-contrast);
  background: none;
  border-color: transparent;
}
/* Schräg abgeschnittenes Highlight (Punk-Look) statt schlichtem Hintergrund;
   eigenes Pseudo-Element, damit nur die Fläche kippt, nicht der Text.
   Gleiche Form auch beim Hover (nur in dezenterer Farbe), damit es
   nicht zwischen rundem Hover und schrägem Aktiv-Zustand wechselt. */
.nav-link:not(.is-active):hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface-muted);
  border-radius: 4px;
  transform: skewX(-8deg);
  z-index: -1;
}
.nav-link.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 4px;
  transform: skewX(-8deg);
  z-index: -1;
}

/* Untere Tab-Leiste – nur in der Handy-Ansicht sichtbar. */
.bottom-nav { display: none; }
.bottom-nav-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: none;
  border: none;
  padding: 0.5rem 0.25rem;
  color: var(--text-secondary);
  font-family: inherit;
  /* 12 px wie die Beschriftung der Navigationsleiste bei Material 3. */
  font-size: 0.75rem;
  cursor: pointer;
}
.bottom-nav-link.is-active { color: var(--accent-text); }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.icon-button {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Keine Füllung beim Hovern, nur blasser – wie beim Papierkorb und bei
   "Alle löschen". Eine Fläche bräuchte eine Farbe, und jede Farbe hier
   war entweder zu warm (rosa) oder zu fremd (grau). */
.icon-button:hover { opacity: 0.7; }
.icon-button svg { transition: transform 0.15s ease; }
.icon-button:hover svg { transform: scale(1.12); }
/* Kurzes Eindrücken beim Antippen – auf dem Handy die einzige Rückmeldung,
   weil es dort kein Hovern gibt. */
.icon-button:active svg { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .icon-button svg { transition: none; }
}

.account-menu { position: relative; }
.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 0.4rem;
  z-index: 30;
}
.account-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.6rem 0.65rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}
.account-dropdown-item:hover { background: var(--surface-muted); }
/* Noch ohne Inhalt (Impressum, Datenschutz): blass, aber antippbar für den
   Hinweis, dass sie folgen. */
.account-dropdown-item[aria-disabled="true"] { opacity: 0.45; }
.account-dropdown-item[aria-disabled="true"]:hover { background: none; }
.account-dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.3rem 0.2rem;
}
.account-dropdown-version {
  padding: 0.5rem 0.65rem 0.2rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* ---------- Layout ---------- */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}
.view { padding-block: 0.5rem; }

.toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  /* Feste Breite wie bei Outlook: Mit left: 50% dürfte die Meldung sonst
     höchstens halb so breit wie der Bildschirm werden, und "Rum Shot
     gebucht" bräche Wort für Wort untereinander um. */
  width: min(calc(100vw - 2rem), 420px);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Eine Stufe über den Karten wie die Leiste der Karte-Seite, mit neutralem
     Rand und kräftigem Schatten – sonst wirkt sie im Dunkelmodus wie eine
     weitere Zeile der Liste. Nicht grell weiß, nicht rot umrandet. */
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--raised-edge);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 95; /* über dem Seitenmenü (90), unter Rückfragen (100) */
}
.toast.is-visible { opacity: 1; }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Symbol links: erkennt man ohne Lesen – Haken für gebucht, Papierkorb für
   gelöscht. */
.toast-icon { flex-shrink: 0; display: flex; }
.toast-icon-check { color: var(--success-text); }
.toast-icon-trash { color: var(--danger); }
/* Meldung mit "Rückgängig": nur dann antippbar, sonst liegt sie unsichtbar
   über Knöpfen und schluckt deren Tipps. */
.toast.has-action { padding-right: 0.5rem; }
.toast.is-visible.has-action { pointer-events: auto; }
.toast-action {
  flex-shrink: 0;
  background: none;
  border: none;
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  /* Neutral statt rot: Die Farbe trägt das Symbol. Rot neben dem roten
     Papierkorb ließe ausgerechnet die sichere Wahl alarmierend wirken. */
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.toast-action:hover { text-decoration: underline; }

/* ---------- Formulare / Buttons ---------- */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
input[type="text"],
input[type="password"],
input[type="number"] {
  width: 100%;
  padding: calc(0.65rem + 1px) calc(0.75rem + 1px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder { color: var(--text-secondary); opacity: 0.8; }

input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 1.5px var(--focus-glow);
}

.btn {
  border-radius: 8px;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--accent-text);
}
.btn-outline:hover { background: var(--surface-muted); }
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}
.btn:disabled:hover { background: transparent; }
.btn-toggle {
  background: var(--surface);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.btn-link {
  background: none;
  border: none;
  color: var(--accent-text);
  text-decoration: underline;
  padding: 0.4rem 0;
  font-weight: 500;
}
.btn-toggle.is-active {
  border-color: var(--accent-text);
  color: var(--accent-text);
  font-weight: 700;
}

/* ---------- Login ---------- */
#view-login {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.75rem;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow);
}
.login-bottle-icon { color: var(--neutral-gray); vertical-align: middle; margin-left: 0.25rem; }
.login-card h1 { margin: 0 0 0.25rem; display: flex; align-items: center; }
.login-sub { color: var(--text-secondary); margin-top: 0; margin-bottom: 1.25rem; }
.login-card .btn { width: 100%; margin-top: 0.75rem; }
.field-error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}
/* Auge sitzt im Feld rechts; das Feld bekommt dafür rechts Platz. */
.password-field { position: relative; }
.password-field input { padding-right: 3.25rem; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
}
.password-toggle:hover { color: var(--text); }
/* Falsches Passwort: Feld rot umrandet, bis man wieder tippt. */
input.is-invalid,
input.is-invalid:focus-visible {
  border-color: var(--danger);
  box-shadow: 0 0 0 1.5px var(--danger);
}

/* ---------- Tagesleiste & Übersicht ---------- */
.day-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
#day-label { font-size: 1.1rem; }
.day-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.employee-field { flex: 1 1 160px; max-width: 220px; }

/* Hinweis auf einen vergessenen Tagesabschluss, oben in der Kasse. */
.stale-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-text);
  border-radius: 10px;
}
.stale-day-text { margin: 0; flex: 1 1 14rem; }
.stale-day-text span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.employee-field label { margin-bottom: 0.2rem; }

/* ---------- Kopf-Begrüßung & Seitenmenü (nur Handy) ---------- */
.avatar-btn { display: none; }

/* Neutraler Kreis mit Personen-Umriss (wie bei Amazon). Der Name steht
   ausgeschrieben daneben, Initialen braucht es deshalb nicht. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-secondary);
}

/* "Angemeldet als Team" gibt es nur im Seitenmenü. */
.account-signed-in { display: none; }

/* Fährt von links herein. Über visibility statt hidden, damit das
   Hereinfahren animiert werden kann (hidden schaltet sofort um). */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: background-color 0.22s ease, visibility 0s linear 0.22s;
}
.drawer-overlay.is-open {
  background: rgba(0, 0, 0, 0.35);
  visibility: visible;
  transition: background-color 0.22s ease;
}
.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(85vw, 320px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  background: var(--surface);
  padding: calc(1rem + env(safe-area-inset-top)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.drawer-overlay.is-open .drawer { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .drawer-overlay,
  .drawer-overlay.is-open,
  .drawer { transition: none; }
}
/* Die Frage als Überschrift erklärt das Namensfeld darunter von selbst
   (wie "Wer kauft ein?" bei Amazon). */
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: -0.5rem;
}
.drawer-title { margin: 0; font-weight: 700; font-size: 1.15rem; }
.drawer-close {
  align-self: flex-start;
  width: 40px;
  height: 40px;
  margin: -0.4rem -0.6rem 0 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
/* Schicht: Name und Tag abschließen untereinander. flex-basis würde in der
   Spalte als Höhe gelesen – daher beim Feld zurücksetzen. */
#drawer-shift-slot .day-bar-row { flex-direction: column; align-items: stretch; gap: 1rem; }
#drawer-shift-slot .employee-field { flex: 0 0 auto; max-width: none; }
/* Die Überschrift ersetzt die Beschriftung; für Screenreader bleibt sie. */
#drawer-shift-slot .employee-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* Neutral statt rot: Das Namensfeld steht im Vordergrund, "Tag
   abschließen" ist die seltene Handlung am Ende des Abends und soll sich
   nicht aufdrängen (die Rückfrage davor bleibt). */
#drawer-shift-slot #close-day-btn {
  width: 100%;
  margin-top: 0.5rem;
  border-width: 1px;
  /* Sobald etwas gebucht ist, "leuchtet" der Knopf auf: Rahmen in voller
     Textfarbe statt Grau. Gesperrt bleibt er blass mit Hinweis darunter. */
  border-color: var(--text);
  color: var(--text);
}
#drawer-shift-slot #close-day-btn[aria-disabled="true"] { border-color: var(--raised-edge); }
/* Optisch gesperrt wie :disabled, aber antippbar für die Erklärung. */
#close-day-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
#close-day-btn[aria-disabled="true"]:hover { background: transparent; }
/* Konto direkt unter der Schicht, abgesetzt durch eine Linie. Ganz nach
   unten geschoben blieb bei so wenigen Einträgen ein halber Bildschirm leer. */
#drawer-links-slot {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}
#drawer-links-slot .account-dropdown-item { padding: 0.75rem 0; font-size: 1rem; }
#drawer-links-slot .account-dropdown-item:hover { background: none; }
#drawer-links-slot .account-dropdown-divider { display: none; }
#drawer-links-slot .account-dropdown-version { padding: 0.75rem 0 0; }
#drawer-links-slot .account-signed-in {
  display: block;
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.summary-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.summary-item {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}
.summary-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.summary-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
}
.summary-item-open .summary-value { color: var(--danger); }

/* ---------- Neuer Gast Formular ---------- */
/* Rahmen für die klebende Leiste auf dem Handy; am PC ohne Wirkung. */
.kasse-sticky { display: contents; }
.label-compact { display: none; }
.new-customer-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}
/* Eigener Stapel-Kontext für Eingabefeld, Vorschlagsliste und Leeren-Knopf,
   im Ruhezustand aber unter dem Header – sonst deckt das Feld das geöffnete
   Konto-Menü ab. Nur bei offener Liste nach vorne, über die Abdunklung. */
.field-with-suggestions { position: relative; z-index: 1; flex: 1 1 220px; }
.field-with-suggestions.has-open-list { z-index: 41; }
/* Muss über der Vorschlagsliste liegen, sonst deckt deren weißer Hintergrund
   den unteren Rand des Fokusrings ab, obwohl kein Abstand dazwischen ist. */
#new-customer-name { position: relative; z-index: 25; padding-right: 2.25rem; }
#new-customer-name.has-open-list {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.input-with-clear { position: relative; }
/* Volle Feldhöhe, × per Flexbox mittig – statt fester Abstände von oben,
   die je nach Label und Schriftgröße daneben lagen. */
.clear-field-btn {
  position: absolute;
  right: 0.3rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 26;
  width: 32px;
  height: 100%;
  border-radius: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-field-btn:hover { color: var(--text); }

.suggestions-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  /* Dunkelt auch Header und untere Leiste ab – daher über beiden. */
  z-index: 40;
}
.field-employee { flex: 1 1 160px; }

.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  background: var(--surface);
  border: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 12px rgba(36, 26, 26, 0.18);
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.suggestions-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem calc(0.35rem + 1px);
  border-radius: 8px;
  cursor: pointer;
}
/* Vorhandene Karten sind fett: Ein Tipp darauf springt zu einem echten
   Deckel, statt etwas Neues anzulegen. */
.suggestions-list .suggestion-existing > span:first-child { font-weight: 700; }
.suggestion-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Kurzes Aufleuchten der Karte, zu der das Namensfeld gesprungen ist. */
.customer-card.is-found { animation: card-found 1.6s ease-out; }
@keyframes card-found {
  0%, 35% { box-shadow: 0 0 0 2px var(--accent-text); }
  100% { box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .customer-card.is-found { animation: none; }
}
.suggestions-list li:hover,
.suggestions-list li.is-active {
  background: var(--suggestion-hover);
}

/* ---------- Kundenkarten ---------- */
.customer-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.customer-group-heading {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.75rem 0.25rem;
  margin: 0 -0.25rem;
  line-height: 1.4;
}
/* Kleines Dreieck vor dem Titel, ersetzt den nativen <summary>-Marker (den
   wir aufgeben mussten, weil die Gruppe auf Mobile jetzt als Tab-Button
   statt als unabhängiges Akkordeon funktioniert). */
.customer-group-heading::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  margin-right: 0.7em;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.15s ease;
}
.customer-group-heading[aria-expanded="true"]::before {
  transform: rotate(90deg);
}
.customer-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
  margin-top: 0.5rem;
}
.customer-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.customer-card.is-paid {
  opacity: 0.6;
}
.customer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
/* Kopfzeile ist auf dem Handy der Auf-/Zuklappen-Schalter, auf Desktop
   nur schlichter Text (dort sind die Karten immer vollständig offen). */
.customer-card-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
.customer-card-compact-total { display: none; }
.header-view-title { display: none; }
.customer-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.customer-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.card-delete-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--danger);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.15rem 0;
}
.card-delete-btn .label-compact { display: none; }
.card-actions { display: flex; align-items: flex-start; gap: 0.9rem; flex-shrink: 0; }
.card-rename-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.15rem 0;
}
.delete-all-link {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem 0;
}
.delete-all-link:hover { opacity: 0.8; }

.history-row-delete-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 0.15rem;
}
.history-row-delete-btn:hover { opacity: 0.8; }

.customer-name { font-weight: 700; font-size: 1.05rem; }
.customer-employee { font-size: 0.78rem; color: var(--text-secondary); }

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Mittig ausrichten: Die große Tippfläche des × macht die rechte Seite
   höher, oben ausgerichtet säße die Zeit links sonst sichtbar höher. */
.order-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.15rem 0; }
.order-amount { display: flex; align-items: center; gap: 0.4rem; }
.order-delete-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
}

.customer-total {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: right;
}
.is-paid .customer-total { text-decoration: underline; }

.add-order-form { display: flex; gap: 0.5rem; }
.add-order-form input { flex: 1; }
.add-order-form .btn { padding: 0.5rem 0.8rem; border-width: 1px; }

/* Ein Knopf pro Zustand statt Offen/Bezahlt-Umschalter: "Bezahlt" auf offenen
   Karten, "Wieder öffnen" auf bezahlten. */
.status-action { width: 100%; }
/* .btn:disabled macht den Hintergrund durchsichtig – die weiße Schrift eines
   gefüllten Knopfs stünde dann unsichtbar auf der weißen Fläche. Deshalb
   zeigen deaktivierte gefüllte Knöpfe sich als stiller Umriss. Betrifft z. B.
   "Bezahlt" bei 0 € und "Anlegen" in der Rückfrage bei doppelten Namen. */
.btn-primary:disabled {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.empty-state {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem 0;
}

/* ---------- Bestätigungsdialog ---------- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 415px;
  width: 100%;
  box-shadow: var(--shadow);
}
.confirm-dialog p {
  margin: 0 0 0.6rem;
  white-space: pre-line;
  color: var(--text);
}
.confirm-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.confirm-row {
  color: var(--text-secondary);
}
.confirm-row strong {
  color: var(--danger);
}
.confirm-note {
  color: var(--text-secondary);
  margin-top: 0.6rem;
  margin-bottom: 1.25rem;
}
/* Eingabefeld in der Rückfrage (showPrompt): Der Hinweis darüber gehört
   zum Feld, deshalb rückt es näher heran als an die Knöpfe darunter. */
.prompt-input { margin-bottom: 1.25rem; }
.confirm-note + .prompt-input { margin-top: -0.6rem; }
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
.btn-danger {
  background: var(--accent);
  color: #ffffff;
}
.btn-danger:hover { opacity: 0.9; }

/* ---------- Historie ---------- */
.stats-toggle { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.stats-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
  height: 180px;
  padding: 0.5rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.stats-chart.is-sparse {
  justify-content: flex-start;
}
.stats-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  /* Antippbar ist das Diagramm nur auf dem Handy – auf Desktop steht die Zahl
     ohnehin über jedem Balken, dort gäbe es nichts auszuwählen. */
  cursor: default;
}
/* Auf Desktop aufgelöst: Der Balken bleibt direktes Kind der Spalte, damit
   die Darstellung dort unverändert bleibt. Nur auf dem Handy wird daraus
   eine sichtbare Spur in voller Höhe. */
.stats-bar-track { display: contents; }
.stats-bar {
  width: 22px;
  background: var(--chart-bar);
  border-radius: 4px 4px 0 0;
}
/* Kopfzeile und Zahlenzeilen gehören zur Handy-Ansicht – auf Desktop stehen
   die Zahlen über den Balken und in der Tabelle, dort ist genug Platz.
   display:contents löst die Klammer auf, damit Desktop unverändert bleibt. */
.stats-panel { display: contents; }
.stats-readout,
.stats-detail { display: none; }
.stats-bar-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: normal;
  text-align: center;
}
.stats-bar-label .label-compact { display: none; }
.stats-bar-amount {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 2rem;
}
#view-history h2 { margin-bottom: 0.75rem; }
.history-table th, .history-table td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9rem;
}
/* Feste Breite für die Datum-Spalte, ausgelegt auf den längsten Fall
   ("September 2026") – sonst springt die ganze Tabelle beim Wechsel
   zwischen Tage/Wochen/Monate je nach Textlänge hin und her. */
.history-table th:nth-child(1), .history-table td:nth-child(1) {
  width: 150px;
}
.history-table th { color: var(--text-secondary); font-weight: 600; }
.history-table th:nth-child(2), .history-table td:nth-child(2) { text-align: center; }
/* Optischer Ausgleich: Ziffern haben weniger Weißraum am linken Rand als
   Buchstaben, dadurch wirken die Beträge sonst leicht nach links verschoben. */
.history-table td:nth-child(1), .history-table td:nth-child(3), .history-table td:nth-child(4) {
  padding-left: calc(0.75rem + 2px);
}
.history-table th:last-child, .history-table td:last-child { text-align: center; }

.history-card-row {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.history-card-row strong { color: var(--text); }

/* ---------- Installation ---------- */
#view-install ol { padding-left: 1.2rem; }
#view-install h2 { margin-top: 1.5rem; }


/* ---------- Responsive ---------- */
@media (max-width: 480px) {

  .logo-lolaparoli { font-size: 1rem; }

  /* "Neuer Gast" als kompakte Zeile statt eigener Karte: Eingabefeld und
     kleiner +-Button nebeneinander. Spart Höhe und bleibt ein Tipp. */
  .new-customer-form {
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.25rem;
  }
  .new-customer-form label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .field-with-suggestions { flex: 1 1 auto; }
  #create-customer-btn {
    flex-shrink: 0;
    width: 48px;
    padding: 0;
    height: 46px;
    font-size: 1.5rem;
    line-height: 1;
  }
  #create-customer-btn .label-full { display: none; }
  #create-customer-btn .label-compact { display: inline; }

  /* Schlankere Gästekarten, standardmäßig zugeklappt: eine Zeile mit Name
     und Summe. Antippen öffnet Bestellungen, Betragsfeld und Status. */
  .customer-card { padding: 0.75rem; gap: 0.45rem; }
  .customer-name { font-size: 1rem; }
  .customer-total { display: none; }
  /* Betrag am Namen ausrichten, nicht an der Mitte der Kopfzeile: Aufgeklappt
     steht unter dem Namen noch die Mitarbeiterzeile, sonst würde der Betrag
     dazwischen rutschen und wäre nicht mehr bündig wie im zugeklappten
     Zustand. */
  .customer-card-toggle { cursor: pointer; padding: 0.15rem 0; align-items: flex-start; }
  .customer-card-compact-total {
    display: flex;
    align-items: center;
    /* Betrag und Chevron sollen nicht wie eine zusammenhängende Einheit
       wirken. Der Abstand steht hier vollständig – früher kam er zur Hälfte
       noch aus dem Zeilenabstand der Kopfzeile, an der das Chevron hing. */
    gap: 0.85rem;
    margin-left: auto;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
  }
  .is-paid .customer-card-compact-amount { text-decoration: underline; }
  /* Chevron sitzt am Betrag statt an der Kopfzeile, damit beide immer auf
     einer Höhe stehen – unabhängig davon, wie viele Zeilen links stehen. */
  .customer-card-compact-total::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
  }
  .customer-card-toggle[aria-expanded="true"] .customer-card-compact-total::after {
    transform: translateY(2px) rotate(225deg);
  }
  /* Die Kopfzeile wird aufgelöst, damit Schalter und Papierkorb direkte
     Kinder der Karte werden. Der Schalter spannt dadurch immer über die
     volle Breite – Summe und Chevron stehen auf- wie zugeklappt bündig
     rechts. Das Löschen rutscht per order ans Ende der Karte. */
  .customer-card-head { display: contents; }

  .customer-card.is-collapsed { padding: 0.6rem 0.75rem; }
  .customer-card.is-collapsed .customer-card-body { display: none; }
  .customer-card.is-collapsed .customer-employee { display: none; }
  /* Kein Löschen direkt neben der Tippfläche zum Aufklappen – erscheint
     erst in der geöffneten Karte, wie bei Listenzeilen in Apps üblich. */
  .customer-card.is-collapsed .card-actions { display: none; }

  /* Die Tab-Leiste unten sagt bereits, in welchem Bereich man ist – eine
     zusätzliche Seitenüberschrift kostet auf dem Handy nur Platz. */
  #view-app > h1,
  #view-history > h1 { display: none; }
  .view { padding-block: 0; }
  /* Ein Abstand für alle Blöcke (Kopf, Datum, Umsatz, Namensfeld, Pillen,
     Karten). Vorher wuchs er von oben nach unten von 12 auf 36 px – oben
     wirkte es dadurch gedrängt, unten zerfahren. */
  main { padding-top: 1.25rem; }
  .day-bar { margin-bottom: 1.25rem; }
  .stale-day .btn { width: 100%; }
  .summary-bar { margin-bottom: 1.25rem; }

  /* Tagesübersicht kompakt nebeneinander statt zwei große Blöcke. */
  .summary-bar { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .summary-item { padding: 0.6rem 0.7rem; }
  .summary-value { font-size: 1.15rem; }

  /* Header trägt den Seitentitel + Icons, die Navigation sitzt unten.
     Titel und Logo schließen sich aus – nie beides gestapelt. */
  .app-header { padding-left: 1rem; padding-right: 1rem; }
  .app-nav { display: none; }
  .header-view-title {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
  }
  .header-view-title:not([hidden]) ~ .app-title { display: none; }

  /* Oben steht, wer arbeitet – wo man ist, zeigt die untere Leiste mit ihrem
     Balken. Kreis, Begrüßung und Pfeil sind ein Knopf und öffnen das Menü. */
  .app-brand { min-width: 0; }
  .avatar-btn:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }
  /* Angemeldet ersetzt die Begrüßung den Seitentitel. */
  .avatar-btn:not([hidden]) ~ .header-view-title { display: none; }
  /* Grüßt, statt zu rufen: normale Textgröße, halbfett (wie bei Amazon). */
  /* Gleiches Grau und Rot wie die aktive Pille der unteren Leiste – Kopf und
     Leiste gehören so auch farblich zusammen. */
  /* Symbol so groß wie die Sonne rechts (24px), damit beide Seiten des Kopfs
     gleich gewichtet wirken; der Kreis wächst im selben Verhältnis mit. */
  .avatar {
    width: 36px;
    height: 36px;
    background: var(--avatar-bg);
    color: var(--accent-text);
  }
  .avatar svg { width: 24px; height: 24px; }
  .avatar-greeting {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Fehlt der Name, fällt es sofort auf – auf jeder Seite. */
  .avatar-btn.is-missing .avatar-greeting { color: var(--accent-text); }
  .avatar-chevron {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin: 0 0.15rem 0.2rem;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg);
  }
  /* Das Konto steckt jetzt im Seitenmenü hinter dem Kreis. */
  .account-menu { display: none; }

  /* Flache Leiste über die ganze Breite, wie der Kopf oben: Die Pillen-Form
     unten passte nicht zum eckigen Kopf. Der aktive Punkt ist rot und
     halbfett (wie bei PayPal) – ohne Balken und ohne Pille dahinter. */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--border-subtle);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav-link.is-active { font-weight: 600; }
  /* Die Meldung unten erschiene sonst auf der Leiste. */
  .toast { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  /* Platz, damit der letzte Inhalt nicht hinter der Leiste verschwindet. */
  main { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }

  /* Größere Tippflächen für Daumenbedienung (Richtwert ca. 44x44px).
     Ohne Kreis: dieselbe schlichte Symbolsprache wie in der unteren Leiste.
     Die Rundung bleibt, damit die Rückmeldung beim Antippen rund bleibt –
     nur Rahmen und Fläche sind unsichtbar. */
  /* 48 px Tippfläche – Mindestgröße nach Material 3. */
  .icon-button {
    width: 48px;
    height: 48px;
    border-color: transparent;
  }
  /* 24px wie die Symbole in der unteren Leiste – ohne Kreis darum vertragen
     sie etwas mehr Größe und stehen dann auf einer Linie mit denen unten. */
  .icon-button svg { width: 24px; height: 24px; }
  /* Ohne Kreise stehen die Symbole optisch weiter auseinander, weil die
     Tippfläche links und rechts über sie hinausragt. Enger als 0 geht
     nicht sinnvoll: Dann überlappten sich die Tippflächen und man träfe
     beim Konto-Menü den Hell-/Dunkel-Schalter. */
  .header-actions { gap: 0; }
  .order-delete-btn { padding: 0.5rem 0.6rem; margin: 0 -0.6rem; }
  /* Etwas mehr Zeilenhöhe, damit das × jeder Bestellung gut zu treffen ist,
     ohne dass sich die Tippflächen benachbarter Zeilen überlappen. */
  .order-list li { min-height: 40px; }
  /* Kein eigener Scrollbereich in der Karte: Ein Scroller im Scroller ist
     mit dem Daumen schwer zu treffen und verdeckt ausgerechnet die zuletzt
     getippte Bestellung. Die Karte wächst stattdessen mit, die Seite
     scrollt ganz normal. */
  .order-list { max-height: none; overflow: visible; }
  /* Negativer Rand rechts, damit die rechte Kante des Papierkorbs mit
     Summe und Chevron abschließt – die Tippfläche bleibt trotzdem groß. */
  /* Löschen steht als Wort am Ende der Karte: In einer Karte, die sonst nur
     aus Textzeilen besteht, liest sich das ruhiger als ein einzelnes Symbol
     in der oberen Ecke, das dort ohne Partner allein steht. Gleiche Sprache
     wie "Alle löschen" in der Historie. */
  .card-actions {
    order: 10;
    align-self: flex-end;
    gap: 1.25rem;
  }
  .card-delete-btn,
  .card-rename-btn {
    min-height: 48px;
    padding: 0 0.2rem;
    font-size: 0.8rem;
  }
  .card-delete-btn .label-full { display: none; }
  .card-delete-btn .label-compact { display: inline; }
  .clear-field-btn { width: 40px; }

  /* Offen/Bezahlt als Pill-Tabs statt Akkordeon: immer nur eine Gruppe
     gleichzeitig sichtbar, umgeschaltet per Klick auf die Pille. */
  .customer-grid { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
  .customer-group { display: contents; }
  .customer-group-heading {
    order: 0;
    display: inline-flex;
    width: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    margin: 0;
    color: var(--text-secondary);
    font-weight: 400;
  }
  .customer-group-heading::before { display: none; }
  .customer-group-heading[aria-expanded="true"] {
    border-color: var(--accent-text);
    color: var(--accent-text);
  }
  .customer-cards-grid { order: 1; flex: 1 1 100%; }

  /* Namensfeld und Pillen kleben unter dem Kopf, Umsatzkacheln scrollen weg.
     Oben und unten Luft wie bei den Pillen der Karte; das negative margin
     hält die Ruheposition. */
  .kasse-sticky {
    display: block;
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 10;
    background: var(--bg);
    padding: 0.75rem 0;
    margin-top: -0.75rem;
    margin-bottom: 0.25rem;
  }
  /* Offene Vorschlagsliste muss über der Abdunklung liegen – die Leiste ist
     ein eigener Stapel, darum sie selbst nach vorne holen. */
  .kasse-sticky:has(.has-open-list) { z-index: 41; }
  .kasse-sticky .new-customer-form { margin-bottom: 0; }
  .group-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }

  /* Zeitraum-Pillen im gleichen Look wie die Gruppen-Pills auf der Kasse.
     Die drei passen nebeneinander; das seitliche Scrollen ist nur der
     Rückfall, falls später ein vierter Zeitraum dazukommt. */
  .stats-toggle {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .stats-toggle .btn-toggle { scroll-snap-align: start; }
  .stats-toggle::-webkit-scrollbar { display: none; }
  .btn-toggle {
    flex-shrink: 0;
    border-radius: 999px;
    font-weight: 400;
    padding: 0.5rem 0.9rem;
    /* Exakt wie die Offen/Bezahlt-Pillen der Kasse: .btn bringt von Haus aus
       2px Rahmen mit, die Pillen dort haben 1px – das ließ dieselbe Farbe
       hier deutlich kräftiger wirken. */
    border-width: 1px;
    border-color: var(--border-subtle);
  }
  .btn-toggle.is-active { font-weight: 400; }

  /* Diagramm: keine Zahl über jedem Balken. Die Zahlenbreite bestimmte sonst
     die Spaltenbreite – das ist der eigentliche Grund, warum zwölf Balken
     nicht auf den Bildschirm passen. Der Wert steht stattdessen einmal groß
     über dem Diagramm und folgt dem angetippten Balken. */
  /* Datum, Diagramm und Zahlen bilden eine Karte – alles gehört zum
     angetippten Balken. Der Rahmen wandert dafür vom Diagramm auf die
     Klammer, sonst wäre es eine Karte in der Karte. */
  .stats-panel {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
  }
  /* Pfeile links und rechts, gewählter Zeitraum in der Mitte – wie beim
     Blättern im Kalender. */
  .stats-readout:not([hidden]) {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 0.25rem;
    margin: -0.35rem -0.35rem 0.5rem;
  }
  .stats-readout-label { font-size: 1rem; font-weight: 700; text-align: center; }
  .stats-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--accent-text);
    cursor: pointer;
  }
  .stats-step:active { background: var(--surface-muted); }
  /* Am Anfang bzw. Ende ausgegraut, aber an seinem Platz: Die Überschrift
     springt dann nicht hin und her. */
  .stats-step:disabled { color: var(--text-secondary); opacity: 0.3; cursor: default; }
  /* Rechtsbündig unter den Beträgen, gleiche Sprache wie "Gast löschen"
     auf den Gästekarten. */
  .stats-selected-delete:not([hidden]) {
    display: block;
    width: fit-content;
    margin-left: auto;
    padding-top: 0.55rem;
  }
  .stats-detail:not([hidden]) {
    display: block;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-subtle);
  }

  /* flex-start statt flex-end: Sonst richten sich die Spalten an ihrer
     Unterkante aus, und eine Beschriftung, die auf zwei Zeilen umbricht,
     schiebt ihren Balken nach oben – die Balken stünden dann nicht mehr auf
     einer Linie. Mit flex-start hängen alle Spuren oben und enden gleich. */
  /* Rahmen, Hintergrund und Innenabstand trägt jetzt die Klammer darum. */
  .stats-chart {
    position: relative;
    align-items: flex-start;
    height: auto;
    padding: 0;
    gap: 0.35rem;
    background: none;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
  }
  /* Keine eigene Grundlinie: Die Spuren haben alle dieselbe Unterkante und
     zeichnen die Nulllinie bereits. Der einzige Strich in der Karte trennt
     Diagramm und Zahlen. */
  .stats-bar-amount { display: none; }
  /* Die Spalte ist genau so breit wie der Balken. Das geht nur, weil unter
     dem Balken nur noch das Kürzel steht – der volle Name steht oben in der
     Anzeigezeile. Dadurch sitzt der erste Balken bündig am Anfang der
     Grundlinie und der letzte an ihrem Ende, ohne Nachmessen. */
  .stats-bar-wrap {
    flex: 0 0 22px;
    width: 22px;
    max-width: none;
    gap: 0.4rem;
    cursor: pointer;
  }
  .stats-bar-label .label-full { display: none; }
  .stats-bar-label .label-compact { display: inline; }
  /* Bei wenigen Einträgen stehen die Balken links; die Linie läuft nach
     rechts weiter und zeigt, dass die Woche noch nicht voll ist. */
  .stats-chart.is-sparse { gap: 1.25rem; }
  /* Schmale Spur statt füllender Klötze: 22px ist dieselbe Balkenbreite wie
     auf Desktop, und die runde Form nimmt die Pillen auf. Die Spalte bleibt
     breiter als die Spur – das ergibt Luft zwischen den Balken. */
  .stats-bar-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 120px;
    background: var(--surface-muted);
    /* Unten kantig, damit der Balken sauber auf der Grundlinie aufsitzt,
       oben nur leicht gebrochen. */
    border-radius: 4px 4px 0 0;
    overflow: hidden;
  }
  .stats-bar {
    width: 100%;
    background: var(--chart-bar-muted);
    border-radius: 4px 4px 0 0;
    transition: background-color 0.15s ease;
  }
  .stats-bar-wrap[aria-pressed="true"] .stats-bar { background: var(--chart-bar); }
  .stats-bar-wrap[aria-pressed="true"] .stats-bar-label {
    color: var(--text);
    font-weight: 700;
  }

  /* Die Tabelle würde über den Bildschirmrand hinauslaufen – auf dem Handy
     stehen ihre Zahlen stattdessen in der Diagrammkarte. */
  .history-table { display: none; }
}

/* ---------- Karte ---------- */
.menu-container { max-width: 640px; }
/* Sprung-Pillen: gleicher Look wie die Pillen in Kasse und Historie. Sie
   bleiben beim Scrollen unter dem Kopf stehen, damit man jederzeit in einen
   anderen Abschnitt springen kann. */
.menu-pills {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.6rem 0;
  margin-bottom: 0.25rem;
  background: var(--bg);
}
.menu-pills::-webkit-scrollbar { display: none; }
/* Deckt auch den schmalen Streifen über der Leiste ab – sonst läuft beim
   Scrollen dort die Liste zwischen Kopf und Pillen sichtbar durch. */
.menu-pills { box-shadow: 0 -1.25rem 0 var(--bg); }
/* Weicher Rand rechts: zeigt, dass es seitlich weitergeht. Klebt am rechten
   Rand der Leiste und wandert beim Wischen nicht mit. */
.menu-pills::after {
  content: '';
  position: sticky;
  right: 0;
  flex: 0 0 1.25rem;
  margin-left: -1.25rem;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.menu-pills.has-more::after { opacity: 1; }
.menu-pill {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
}
/* Nur mit Maus: Auf dem Handy bleibt :hover nach dem Tippen hängen – dann
   wären zwei Pillen rot, obwohl nur eine aktiv ist. */
@media (hover: hover) {
  .menu-pill:hover { border-color: var(--accent-text); color: var(--accent-text); }
}
/* Wie die aktive Pille in Kasse und Historie: zeigt, wo man gerade ist. */
.menu-pill.is-active { border-color: var(--accent-text); color: var(--accent-text); }
/* Beim Springen landet die Überschrift unter Kopf und Pillen, nicht darunter
   versteckt. */
.menu-section { scroll-margin-top: calc(var(--header-h, 0px) + 4rem); margin-bottom: 1.25rem; }
.menu-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.menu-list li + li { border-top: 1px solid var(--border-subtle); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 52px;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
button.menu-item { cursor: pointer; }
@media (hover: hover) {
  button.menu-item:hover { background: var(--surface-muted); }
}
button.menu-item:active { background: var(--surface-muted); }
.menu-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.menu-item-name { font-weight: 600; }
.menu-item-detail { font-size: 0.8rem; color: var(--text-secondary); }
.menu-item-price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Wie oft der Artikel gerade gebucht wurde, solange die Karte offen ist. */
.menu-item-count {
  flex-shrink: 0;
  min-width: 2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}
@keyframes menu-booked {
  from { background: var(--success-bg); }
  to { background: transparent; }
}
.menu-item.is-booked { animation: menu-booked 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .menu-item.is-booked { animation: none; }
}

/* Buchen aus der Gästekarte: auf Desktop ein Fenster in der Mitte wie die
   anderen Dialoge, auf dem Handy eine ganze Seite (siehe unten). */
.menu-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
}
.menu-picker {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: min(85vh, 760px);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.menu-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
.menu-picker-head-text { min-width: 0; }
.menu-picker-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-picker-sub { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.menu-picker-close { margin: -0.2rem -0.5rem 0 0; }
/* Leiste unten wie ein Warenkorb: was gebucht wurde, daneben "Fertig". */
.menu-picker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}
.menu-picker-bar-text { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.menu-picker-bar.has-bookings .menu-picker-bar-text { color: var(--text); font-weight: 700; font-size: 1rem; }
.menu-picker-done { flex-shrink: 0; min-width: 7.5rem; }
.menu-picker-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1rem 1rem;
}
/* Im Fenster scrollt nur der Inhalt, der Kopf steht schon fest. */
.menu-picker .menu-pills { top: 0; }
.menu-picker .menu-section { scroll-margin-top: 4rem; }
body.has-menu-picker { overflow: hidden; }

.menu-open-btn { flex-shrink: 0; }
/* Artikelnamen können lang sein – eine Zeile, notfalls mit Auslassung,
   damit Betrag und × immer rechts stehen bleiben. */
.order-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.5rem; }

@media (max-width: 480px) {
  #view-menu > h1 { display: none; }
  /* Oben und unten Luft, auch wenn die Pillen beim Scrollen unter dem Kopf
     kleben. Das negative margin hält die Ruheposition wie bisher. */
  #view-menu .menu-pills { padding: 0.75rem 0; margin-top: -0.75rem; }
  /* Ganze Seite statt Blatt von unten: kein abgedunkelter Rand, die Karte
     deckt Kasse, Kopf und Leiste vollständig ab. */
  .menu-picker-overlay { padding: 0; background: var(--bg); align-items: stretch; }
  .menu-picker {
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .menu-picker-head { padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem; }
  .menu-picker-scroll { padding-bottom: 1.5rem; }
  .menu-picker-bar { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
  .menu-picker .menu-pills { padding-top: 0.75rem; }
  /* Die Meldung gehört hier an den unteren Rand – die Leiste ist verdeckt. */
  body.has-menu-picker .toast { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}

/* ---------- Buchen auf der Karte-Seite ---------- */
/* Leiste wie im Buchungsfenster: klebt unten über der Navigation, solange
   man auf der Karte scrollt. */
.menu-page-bar {
  position: sticky;
  bottom: calc(var(--bottom-nav-h, 0px) + 0.75rem);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  /* Eine Stufe über den Karten und rot umrandet – geht so weder hell noch
     dunkel in der Liste unter. Bewusst nicht durchsichtig: Der Gastname muss
     auf einen Blick lesbar sein, ohne dass Artikel dahinter durchlaufen. */
  background: var(--raised);
  border: 1px solid var(--accent-text);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* Erste Überschrift mit dem Hinweis rechts daneben, in einer Zeile. */
.menu-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.menu-section-head .menu-section-title { margin: 0; }
.menu-page-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
}
.menu-page-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.menu-page-who-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-page-who-sub { font-size: 0.85rem; color: var(--text-secondary); }
/* Zahlen in den grauen Zeilen (Leiste, Kopf des Buchungsfensters): in
   Textfarbe, aber normal dick – heben sich ab, ohne die Zeile unruhig zu
   machen. */
.menu-page-who-sub .num,
.menu-picker-head .num { color: var(--text); }
/* Zusammengehöriges ("Deckel 3,00 €") bricht nur als Ganzes um. */
.menu-page-who-sub .keep { white-space: nowrap; }
/* Meldungen erscheinen über der Leiste statt auf ihr. */
body:has(#view-menu:not([hidden]) .menu-page-bar:not([hidden])) .toast { bottom: calc(var(--bottom-nav-h, 0px) + 0.75rem + var(--menu-bar-h, 5rem) + 0.5rem); }

/* "Für wen?" – Auswahl des Gasts beim Buchen von der Karte-Seite. */
.guest-chooser-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  max-height: min(45vh, 320px);
  overflow-y: auto;
}
.guest-chooser-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.4rem;
  background: none;
  border: none;
  border-radius: 8px;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.guest-chooser-item:hover { background: var(--suggestion-hover); }
.guest-chooser-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-chooser-item.is-new .guest-chooser-name { font-weight: 400; }
.guest-chooser-item .suggestion-meta { margin-left: auto; flex-shrink: 0; }
/* Trennlinien wie in der Karte – bei vielen Namen trifft man die Zeile
   besser. */
.guest-chooser-list li + li { border-top: 1px solid var(--border-subtle); }
.guest-chooser-context {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.guest-chooser-context + .confirm-title { margin-top: 0; }
/* Abbrechen ist die unwichtigste Aktion im Fenster – schlicht statt dick
   umrandet. */
.guest-chooser .confirm-actions .btn { border-width: 1px; padding: 0.55rem 1rem; font-weight: 500; }
.guest-chooser-empty { padding: 0.8rem 0.4rem; color: var(--text-secondary); font-size: 0.9rem; }
.guest-chooser .confirm-actions { margin-top: 0.75rem; }
.guest-chooser .prompt-input { margin-bottom: 0; }