/* Snackpacken – gemeinsame Styles */
:root{
  --brand:#0078d4;
  --bg:#f4f6f8;
  --card-bg:#fff;
  --border:#e6e8eb;
  --text:#1a1a1a;
  --muted:#666;
  /* Bereichs-Akzentfarben, um Lager vs. (spaeter) Benutzerverwaltung optisch klar
     auseinanderzuhalten - siehe .nav a.nav-lager/.nav-users und body.page-lager. */
  --lager-accent:#0f8b8d;
  --user-accent:#6d4aff; /* reserviert fuer die Benutzerverwaltungs-UI, sobald sie existiert */
  /* Geraete-Seite bekommt (30.08.2026, Nutzerwunsch: "Geraete ist nur grau bei den
     Schaltflaechen [...] thematisch verbundene Schaltflaechen koennen hervorgehoben werden")
     ebenfalls eine eigene Akzentfarbe, analog --lager-accent/--user-accent. */
  --geraete-accent:#a3670a;
  /* Oberflaechen-Variablen (30.08.2026, Voraussetzung fuer den Darkmode weiter unten) - vorher
     ueberall als literale Hexwerte verstreut (#fff/#fafafa/#f0f0f0/#eef2f6/#f7f9fc). Jetzt als
     Variable, damit der Darkmode-Block am Dateiende sie an EINER Stelle umdefinieren kann,
     statt jede einzelne Regel im Stylesheet anfassen zu muessen. */
  --surface-2:#fafafa;
  --surface-3:#f0f0f0;
  --chip-bg:#eef2f6;
  --hover-bg:#f7f9fc;
}

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:16px;background:var(--bg);color:var(--text);overflow-x:hidden}

header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:16px}
.brand{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
h1{margin:0;font-size:18px}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:600}
.nav a.active,.nav a:hover{background:var(--brand);color:#fff}
/* Bereichs-eigene Akzentfarbe fuer den Lager-Nav-Punkt (und spaeter Nutzerverwaltung) - macht
   auf einen Blick klar, in welchen "Bereich" der App man gerade wechselt. */
.nav a.nav-lager.active,.nav a.nav-lager:hover{background:var(--lager-accent)}
.nav a.nav-users.active,.nav a.nav-users:hover{background:var(--user-accent)}
.user-area{display:flex;align-items:center;gap:10px}
.user{font-size:14px;color:var(--muted)}

/* Burger-Menu-Button fuer schmale Bildschirme (30.08.2026) - siehe @media(max-width:860px)
   weiter unten fuer die eigentliche Umschalt-Logik und Begruendung des Breakpoints. Wird von
   common.js dynamisch vor die .nav eingefuegt, nicht im HTML jeder Seite dupliziert. */
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:18px;line-height:1;cursor:pointer;color:var(--text)}

.toolbar{margin-bottom:16px}
.toolbar-split{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.input-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input-row input[type=text]{padding:10px;border:1px solid var(--border);border-radius:8px;min-width:200px;flex:1}

.devices{margin-top:4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
/* Gruppierung nach Stadt auf der Geräte-Übersicht (09.09.2026, Nutzerwunsch) - siehe
   geraete.js#groupDevicesByCity. .devices bleibt das Grid für die Karten INNERHALB einer
   Stadt-Gruppe, .device-groups ist nur noch der vertikale Stapel der Gruppen selbst. */
.device-groups{margin-top:4px;display:flex;flex-direction:column;gap:26px}
.city-group-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.city-group-head h3{margin:0;font-size:15px}
.city-group-count{color:var(--muted);font-size:12px}
.card{background:var(--card-bg);padding:14px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.05);border:1px solid var(--border)}
.card-title{font-weight:700;font-size:15px}
.card-meta{color:var(--muted);font-size:13px;margin-top:4px}
.card-address{color:var(--muted);font-size:13px;margin-top:2px}
.card-status{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.card-status-date{font-size:12px;color:var(--muted)}
.card-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.empty-hint{padding:24px;text-align:center;color:var(--muted)}

button,.button{padding:9px 14px;border-radius:8px;border:none;background:var(--brand);color:#fff;cursor:pointer;font-size:14px;font-weight:600}
button:disabled{opacity:.5;cursor:not-allowed}
.button-print{background:var(--brand)}
.button-delete{background:#d93025}
.button-trigger{background:#fbbc05;color:#111}
.button-toggle{background:#555}
.button-done{background:#1e8e3e}

/* Status Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}

/* Chip-Liste (27.08.2026, Weiterleitungsadressen in den Einstellungen: "hinzufügen [...] wieder
   entfernen können mit so einem kleinen x") - generisch gehalten, nicht nur fuer E-Mail-Adressen. */
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip-bg);border-radius:999px;padding:6px 8px 6px 12px;font-size:13px;color:var(--text)}
.chip-remove{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;padding:2px 4px;border-radius:50%}
.chip-remove:hover{background:#dde3ea;color:var(--text)}
.badge-open{background:#e3f0fd;color:#0f5da8}
.badge-done{background:#e6f4ea;color:#1e7a34}
.badge-outdated{background:#fdecea;color:#b3261e}
.badge-discarded{background:var(--surface-3);color:#666}
.badge-none{background:var(--surface-3);color:#888}

/* Einheitliche Status-Pills (28.08.2026, Nutzerwunsch "Optimiere zur Nutzerfreundlichkeit [...]
   wie eine professionelle Firma das lösen würde"): bisher gab es zwei parallele, farblich
   zufällig übereinstimmende Pill-Systeme (.badge-* oben und .stock-badge-* weiter unten) und die
   Betriebswirtschaft-Seite kombinierte sie teils sogar in einer einzigen Klassenliste
   ("stock-badge badge-none"). Diese fünf semantischen Klassen sind der EINE Wortschatz, den
   betriebswirtschaft.js jetzt durchgängig für DATEV-/PDF-/Zahlungs-/Archiv-/Duplikat-Status und
   die Postfach-Kategorie verwendet - Farbwerte bewusst identisch zu den bereits etablierten
   .badge-done/.badge-outdated/.badge-none (s.o.) übernommen, damit sich am Gesamteindruck nichts
   Unerwartetes ändert. .badge-open/.badge-done/... bleiben unverändert bestehen (u.a. von der
   Lager-Seite genutzt) - hier bewusst NICHT umbenannt, um dort nichts zu riskieren. */
.badge-success{background:#e6f4ea;color:#1e7a34}
.badge-warning{background:var(--card-bg)4e0;color:#a15c00}
.badge-danger{background:#fdecea;color:#b3261e}
.badge-neutral{background:var(--surface-3);color:#888}
.badge-info{background:#e3f0fd;color:#0f5da8}

/* Picklisten-Uebersicht */
.filter-row{display:flex;gap:8px;flex-wrap:wrap}
.filter-chip{padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card-bg);color:var(--muted);cursor:pointer;font-size:13px;font-weight:600}
.filter-chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.picklist-table-wrap{background:var(--card-bg);border-radius:10px;border:1px solid var(--border);overflow:auto}
.picklist-table{width:100%;border-collapse:collapse;font-size:14px}
.picklist-table th{text-align:left;padding:10px 14px;border-bottom:2px solid var(--border);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.picklist-table td{padding:10px 14px;border-bottom:1px solid var(--border)}
.picklist-row{cursor:pointer}
.picklist-row:hover{background:var(--hover-bg)}
.mono{font-family:ui-monospace,Menlo,monospace}

input[type=text]{padding:8px;border:1px solid var(--border);border-radius:6px}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);z-index:100;padding:12px}
.modal.hidden{display:none}
/* Verschachtelte Modals (z.B. Produkt-Suche-Popup, das WAEHREND das Wareneingang-Modal
   offen ist, darueber geoeffnet wird) brauchen einen hoeheren z-index als die normale Modal-
   Ebene - sonst gewinnt bei gleichem z-index schlicht die DOM-Reihenfolge und das zuerst
   geoeffnete Modal (Wareneingang) liegt optisch UEBER dem eigentlich obenauf liegenden
   Popup (Nutzer-Fehlerbild 26.08.2026: Produktsuche war hinter dem Wareneingang-Formular
   verdeckt). */
#productPickerModal{z-index:110}
.modal-panel{width:min(760px,95vw);max-height:85vh;overflow:auto;background:var(--card-bg);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);padding:18px}
.modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:14px}
.modal-header h2{margin:0;font-size:18px}
.modal-close{background:var(--surface-3);border:none;border-radius:8px;color:#333;font-size:20px;line-height:1;padding:6px 12px;cursor:pointer}
.modal-body pre{white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;background:var(--surface-2);padding:14px;border-radius:10px;border:1px solid var(--border)}
.picklist-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px;align-items:center}
.button-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.section-toggle{margin-bottom:12px}
.product-list{display:grid;gap:14px;margin-top:18px}
.product-row{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.product-name{font-weight:600;display:flex;align-items:center;gap:8px}
.product-name-text{min-width:0;overflow-wrap:anywhere}
.mdb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 6px;border-radius:6px;background:#111;color:#fff;font-size:12px;font-weight:700;font-family:ui-monospace,Menlo,monospace}
.product-metrics{display:flex;flex-wrap:wrap;gap:12px;color:#555;font-size:14px}
.product-adjust{display:flex;align-items:center;gap:8px}
.product-adjust button{width:34px;height:34px;padding:0;font-size:18px}
.product-adjust span{min-width:32px;text-align:center;display:inline-block;font-weight:600}
.collapsible.hidden{display:none}
.receipt-placeholder{padding:14px;border:1px dashed #ccc;border-radius:10px;background:var(--card-bg)9e8;color:#555}
.receipt-text{padding:14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace}
.outdated-banner{background:#fdecea;color:#b3261e;padding:10px 12px;border-radius:8px;margin-bottom:12px;font-size:14px}
.outdated-banner .newer-link{color:inherit;text-decoration:none;font-weight:inherit;cursor:pointer}
.outdated-banner .newer-link:hover{text-decoration:underline}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;height:100vh;background:#f6f6f6;margin:0}
.login-card{width:min(420px,95vw);background:var(--card-bg);padding:24px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.title{text-align:center;font-weight:700;margin-bottom:8px;font-size:20px}
.sub{color:#666;text-align:center;margin-bottom:16px}
.login-input{font-size:16px;border:1px solid var(--border);padding:12px;border-radius:8px;width:100%;box-sizing:border-box}
/* OTP-Eingabefeld (30.08.2026, Nutzerwunsch: "Sorge dafür dass das Feld für 2FA besser
   aussieht und vom iCloud Passwortmanager als 2FA-Feld erkannt wird") - autocomplete="one-time-code"
   im HTML macht das Feld fuer iCloud Schluesselbund/Passwortmanager erkennbar, diese Klasse
   sorgt zusaetzlich fuer eine deutlich lesbarere Darstellung (groesser, mit Buchstabenabstand,
   zentriert) statt eines schmalen Standard-Texteingabefelds. Genutzt sowohl beim Login
   (#totpCode) als auch bei der 2FA-Einrichtung (#totpConfirmCode).*/
.otp-input{display:block;margin:0 auto;font-size:28px;letter-spacing:10px;text-align:center;font-variant-numeric:tabular-nums;border:1px solid var(--border);padding:12px 8px;border-radius:8px;width:100%;max-width:220px;box-sizing:border-box}
/* Ueberschreibt die generische .input-row-Regel (hoehere Spezifitaet noetig, siehe
   Kommentar), damit das OTP-Feld bei der 2FA-Einrichtung (steht dort in einer .input-row neben
   dem "Bestätigen"-Button) nicht auf die Zeilenbreite gestreckt wird und seine eigene Optik
   behaelt. */
.input-row input.otp-input{flex:0 0 auto;min-width:0;padding:12px 8px;margin:0}
.login-input + .login-input{margin-top:10px}

/* 2FA-Einrichtung: nummerierte Schritte (28.08.2026, Sicherheits-Haertung - Einrichtung
   intuitiver machen) - zwei visuell getrennte Bloecke statt allem auf einmal. */
.totp-step{padding-left:16px;border-left:3px solid var(--brand);margin-bottom:18px}
.totp-step:last-of-type{margin-bottom:14px}
.totp-step-title{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.totp-step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;flex:none}
button.action{background:var(--brand);color:#fff;border:none;padding:12px 16px;border-radius:8px;cursor:pointer;font-weight:700}
.hint{color:#999;margin-top:8px;text-align:center;font-size:13px}

/* SVG-Icons in Badges/Hinweisen (31.08.2026, Nutzerwunsch: "SVG Icons die sich gut einfügen und
   minimalistisch und übersichtlich sind") - vertical-align sorgt dafuer, dass das Icon buendig
   mit dem umgebenden Text sitzt statt auf der Grundlinie zu "schweben". */
.icon-svg{vertical-align:-2px;margin-right:3px;flex-shrink:0}

/* Darkmode-Umschalter zeigt nur ein Icon ohne Text daneben (31.08.2026, Nutzerwunsch "ersetze
   die icons vom darkmode mit svg") - der Standard-Rechtsabstand von .icon-svg (gedacht fuer
   Icon+Text-Kombinationen wie Badges/Footer-Hinweise) wuerde das Icon im sonst zentrierten,
   quadratischen Knopf sichtbar nach links verschieben. */
.theme-toggle-btn .icon-svg{margin-right:0}

/* Seiten-Footer fuer Status-/Hintergrund-Hinweise (31.08.2026, Nutzerwunsch: "Solche Hinweise
   ordnest du der übersichtlichkeit halber bitte im Footer an.") - buendelt Umsatz-/DEX-/Scan-
   Status dezent am Seitenende statt in der Toolbar, dieselbe gedaempfte Optik wie .hint, nur
   linksbuendig gestapelt mit klarer Trennlinie zum Seiteninhalt. Nutzt ausschliesslich
   CSS-Variablen (--border/--muted), damit Dark-Mode automatisch passt, ohne eigene
   [data-theme="dark"]-Regeln pflegen zu muessen. */
.page-footer{margin-top:32px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.page-footer .hint{margin-top:0;text-align:left;color:var(--muted)}

/* Global loader */
.global-loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.6);z-index:9999}
[data-theme="dark"] .global-loader{background:rgba(20,23,28,0.7)}
.global-loader.hidden{display:none}
.global-loader .spinner{width:48px;height:48px;border-radius:50%;border:5px solid rgba(0,0,0,0.08);border-top-color:var(--brand);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* QR scanner */
.qr-preview{position:relative;width:100%;height:360px;display:flex;align-items:center;justify-content:center;background:#000;border-radius:8px;overflow:hidden}
.qr-preview video{width:100%;height:100%;object-fit:cover}
.qr-preview::after{content:'';position:absolute;left:10%;top:10%;right:10%;bottom:10%;border:3px solid rgba(255,255,255,0.6);border-radius:6px;pointer-events:none}

/* Lager */
/* Nutzer-Fehlerbild (26.08.2026): Zeilentrennlinien der Artikeltabelle wirkten "nicht mehr
   durchgaengig"/versetzt, sichtbar vor allem unter der Bestandsspalte. Ursache: `display:flex`
   war direkt auf dem <td> selbst gesetzt - das ueberschreibt dessen eigentlich noetigen
   `display:table-cell` und nimmt die Zelle damit aus der normalen Tabellen-Zeilenberechnung
   heraus (Boxmodell-Konflikt table-cell vs. flex), was je nach Browser zu genau so einem
   Versatz der Zeilenumrandung fuehren kann. Fix: das <td> bleibt eine normale Tabellenzelle,
   die Flex-Anordnung sitzt stattdessen auf einem inneren <span> (siehe lager.js#renderTable). */
.stock-cell-inner{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge-lowstock{background:#fdecea;color:#b3261e}
.stock-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.stock-form input[type=number]{width:72px;padding:6px 8px;border:1px solid var(--border);border-radius:6px}
.stock-form button{padding:6px 10px;font-size:13px}
.min-stock-input{width:60px;padding:6px 8px;border:1px solid var(--border);border-radius:6px}

.search-input{padding:10px;border:1px solid var(--border);border-radius:8px;min-width:220px;flex:1}
.filter-row select{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:var(--card-bg)}
.picklist-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.picklist-table th.sortable:hover{color:var(--text)}
.sort-arrow{display:inline-block;margin-left:4px;opacity:.5;font-size:10px}
.sort-arrow.active{opacity:1;color:var(--brand)}
.article-name-cell{cursor:pointer;font-weight:600}
.article-name-cell:hover{text-decoration:underline;color:var(--brand)}
.forecast-cell{color:var(--muted);font-size:13px}
.forecast-cell.forecast-urgent{color:#b3261e;font-weight:700}
.forecast-cell.forecast-soon{color:#a15c00;font-weight:600}

/* Produkt-Detailansicht (Modal) */
.product-detail-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap}
/* object-fit:cover statt :contain (26.08.2026, Nutzerwunsch): Nayax' eigene Produktfotos sind
   alle mittig/quadratisch zugeschnitten (siehe Nayax-App-Screenshot des Nutzers) - "contain"
   liess das Bild dadurch mit sichtbarem weissem Rand im Rahmen schweben, statt ihn wie im
   Original auszufuellen. "cover" füllt den Rahmen komplett, schneidet dafür minimal an den
   Raendern - unproblematisch, weil das eigentliche Produkt laut Nutzer immer mittig sitzt. */
.product-detail-image{width:120px;height:120px;border-radius:10px;border:1px solid var(--border);object-fit:cover;object-position:center;background:var(--card-bg);flex-shrink:0}
/* Lade-Kuller im Bildrahmen (26.08.2026, Nutzerwunsch): solange das <img> noch laedt, liegt ein
   Spinner im selben 120x120-Rahmen darueber (Wrap-Div mit position:relative, Bild+Spinner
   beide absolut positioniert) - sobald das Bild geladen hat (oder ein Fehler auftritt) entfernt
   der onload/onerror-Handler in lager.js den Spinner wieder (siehe #openProductDetail). */
.product-detail-image-wrap{position:relative;width:120px;height:120px;flex-shrink:0}
.product-detail-image-wrap .product-detail-image{position:absolute;inset:0}
.product-detail-image-spinner{position:absolute;inset:0;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.product-detail-image-spinner::after{content:'';width:26px;height:26px;border-radius:50%;border:3px solid rgba(0,0,0,.08);border-top-color:var(--brand);animation:spin 1s linear infinite}
.product-detail-image-placeholder{width:120px;height:120px;border-radius:10px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-align:center;flex-shrink:0;background:var(--surface-2)}
.product-detail-info{flex:1;min-width:200px}
.product-detail-info h3{margin:0 0 6px;font-size:18px}
.product-detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0;font-size:14px}
/* Nutzer-Fehlerbild (26.08.2026): eine lange Gruppenbezeichnung ohne Leerzeichen (z.B.
   "Tabakerzeugnisse/Zubehör19%") wurde nicht innerhalb ihrer Grid-Zelle umgebrochen, sondern
   ist ueber die Nachbarzelle (Bestand) hinweggelaufen und hat den Wert dort verdeckt. Grund:
   Grid-Kinder haben standardmaessig `min-width:auto`, das laesst nicht umbrechbaren Text ueber
   die Zellbreite hinausragen. `min-width:0` erzwingt, dass sich die Zelle an ihre Spaltenbreite
   haelt, `overflow-wrap:anywhere` erlaubt noetigenfalls auch einen Umbruch mitten im Wort. */
.product-detail-meta > div{min-width:0;overflow-wrap:anywhere}
.product-detail-meta strong{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px;font-weight:700}
.note-textarea{width:100%;min-height:70px;padding:10px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:14px;resize:vertical}
.field-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.field-row input[type=text],.field-row input[type=number]{padding:8px;border:1px solid var(--border);border-radius:6px}
.movements-mini-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.movements-mini-table th{text-align:left;padding:6px 8px;color:var(--muted);font-size:11px;text-transform:uppercase;border-bottom:1px solid var(--border)}
.movements-mini-table td{padding:6px 8px;border-bottom:1px solid var(--border)}

/* Wareneingang-Formular */
.wareneingang-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.wareneingang-row input[type=number]{padding:8px;border:1px solid var(--border);border-radius:6px;width:100%}
.wareneingang-remove{background:#d93025;padding:6px 10px;font-size:13px}
@media (max-width:640px){.wareneingang-row{grid-template-columns:1fr}}

/* Produkt-Auswahl im Wareneingang: Button oeffnet ein Such-Popup statt einer langen
   Dropdown-Liste, die man bei vielen Artikeln durchscrollen muesste. */
.we-pick-btn{background:var(--card-bg);border:1px solid var(--border);color:var(--text);font-weight:500;display:flex;align-items:center;justify-content:flex-start;text-align:left;width:100%}
.we-pick-btn:hover{border-color:var(--brand)}
.we-pick-btn.we-pick-chosen{border-color:var(--brand);color:var(--brand)}
.we-article-chosen{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-picker-search{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:10px}
.product-picker-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.product-picker-item{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--text);cursor:pointer;text-align:left;width:100%;font:inherit}
.product-picker-item:hover{border-color:var(--brand);background:var(--hover-bg)}
.product-picker-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;object-position:center;background:var(--surface-2);border:1px solid var(--border);flex-shrink:0}
.product-picker-thumb-placeholder{display:flex}
.product-picker-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.product-picker-name{font-weight:600}
.product-picker-meta{font-size:12px;color:var(--muted)}

/* Gruppenfilter im Lager: Dropdown statt Chip-Reihe - bleibt uebersichtlich, auch wenn viele
   Produktgruppen existieren (eine wachsende Chip-Reihe wurde schnell unstrukturiert). */
.group-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.group-filter-row label{font-size:13px;color:var(--muted);font-weight:600}

/* Lager-Seite bekommt ihre eigene Akzentfarbe (ueberschreibt --brand nur innerhalb dieser
   Seite) - faerbt automatisch Buttons, Sortier-Pfeile, Hover-Zustaende etc. auf lager.html
   konsistent ein, ohne jede Regel einzeln anzufassen. */
body.page-lager{--brand:var(--lager-accent)}
/* Analog fuer die neue Benutzerverwaltung (26.08.2026) - die Akzentfarbe (--user-accent) war
   dafuer bereits seit der Rollenmodell-Umstellung reserviert, nur bisher ungenutzt. */
body.page-users{--brand:var(--user-accent)}
/* Analog fuer die Geraete-Seite (30.08.2026) - siehe --geraete-accent oben. */
body.page-geraete{--brand:var(--geraete-accent)}

/* Gestapeltes Formularfeld (Label ueber Input/Select) - bisher gab es nur .field-row (Label
   NEBEN dem Input, fuer kurze Einzeiler wie Mindestbestand). Fuer laengere Formulare mit
   mehreren Pflichtfeldern (z.B. "Neuer Nutzer") ist LABEL-ueber-INPUT uebersichtlicher. */
.form-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.form-field label{font-weight:600;font-size:13px}
.form-field input,.form-field select,.form-field textarea{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit}
.form-field textarea{resize:vertical}

/* Mehrere .form-field nebeneinander statt untereinander (26.08.2026, Geraeteuebersicht:
   Muenzsorten-Eingaben fuer Fuellliste/Schwellen-Einstellungen) - .form-field bleibt wie oben
   fuer den Einzelfall, .form-grid ist nur der optionale Mehrspalten-Wrapper drumherum. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px}

/* Nayax-Sync-Status im Picklisten-Modal */
.nayax-sync-ok{color:#1e7e34}
.nayax-sync-error{color:#b3261e;display:flex;align-items:center;flex-wrap:wrap;gap:6px}

/* Rollenabhaengige Nav-Links - per JS eingeblendet, siehe common.js#requireLoggedInUser.
   admin-only = nur Admin (Bewegungen, Debug). warehouse-role = Admin + Manager (Lager,
   Bericht, Geraete, Betriebswirtschaft). */
.nav a.admin-only,.nav a.warehouse-role{display:none}

/* Lagerbestand-Ampel im Picklisten-Modal (Zentrallager vs. benoetigte Menge) */
.stock-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}
.stock-badge-ok{background:#e6f4ea;color:#1e7a34}
.stock-badge-warn{background:var(--card-bg)4e0;color:#a15c00}
.stock-badge-low{background:#fdecea;color:#b3261e}

/* Lagerbewegungen (Admin) */
.ref-link{color:var(--brand);text-decoration:none;font-weight:600;cursor:pointer}
.ref-link:hover{text-decoration:underline}
.delta-in{color:#1e7e34;font-weight:700}
.delta-out{color:#b3261e;font-weight:700}
.filter-select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--text);font-size:13px}

/* Eingangsbeleg-Upload im Wareneingang-Formular (26.08.2026) */
.receipt-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--border)}
.receipt-upload-status{font-size:13px;color:var(--muted)}

/* Wareneingänge als eigene Objekte (26.08.2026): Warnhinweis, solange Entwürfe ungebucht
   herumliegen, plus etwas Abstand zwischen den Aktions-Buttons in der Wareneingänge-Tabelle. */
.warning-banner{background:var(--card-bg)4e0;color:#a15c00;border:1px solid #f3d9a3;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:14px;font-weight:600}
.warning-banner.hidden{display:none}
.we-actions-cell{display:flex;gap:6px;flex-wrap:wrap}

/* Routenplanung (route.html, 26.08.2026) */
.route-machine-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:8px}
.route-machine-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);font-size:14px;cursor:pointer}
.route-machine-item:hover{border-color:var(--brand)}
.route-machine-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.route-machine-name{font-weight:600}
.route-machine-address{font-size:12px;color:var(--muted)}

/* Gespeicherte Routen (26.08.2026, Nutzerwunsch: im Voraus planen + Fahrer zuweisen) */
.route-list{display:flex;flex-direction:column;gap:8px}
.route-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--card-bg);cursor:pointer;flex-wrap:wrap}
.route-card:hover{border-color:var(--brand)}
.route-card-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.route-card-date{font-weight:700}
.route-card-assignee{font-size:13px;color:var(--muted)}
.route-card-info{font-size:12px;color:var(--muted)}
.route-card-created{font-size:11px;color:var(--muted)}
.route-detail-controls{display:flex;gap:14px;flex-wrap:wrap}
.route-detail-control{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px}
.route-detail-control select{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;font-weight:400}

/* Kartenansicht (Leaflet/OpenStreetMap, siehe route.js#renderRouteMap) */
.modal-panel-wide{width:min(920px,95vw)}
.route-map{width:100%;height:360px;border-radius:10px;margin:14px 0;border:1px solid var(--border);background:#eef1f5}
.route-map-marker{background:var(--brand);color:#fff;border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.route-map-marker-start{background:#2b2f36;font-size:16px}
.route-map-marker-done{background:#1e7e34}
.route-map-marker-end{background:#8a4b00;font-size:15px}
.route-stops-list{display:flex;flex-direction:column;gap:10px}
.route-stop-card{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--card-bg);flex-wrap:wrap}
.route-stop-card.route-stop-done{opacity:.55}
.route-stop-card.route-stop-done .route-stop-name{text-decoration:line-through}
.route-stop-position{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.route-stop-info{flex:1;min-width:180px}
.route-stop-name{font-weight:700}
.route-stop-address{font-size:13px;color:var(--muted)}
.route-leg-connector{display:flex;align-items:center;gap:8px;padding-left:16px;margin:-2px 0}
.route-leg-line{flex:0 0 2px;width:2px;height:16px;background:var(--border)}
.route-leg-label{font-size:12px;color:var(--muted);white-space:nowrap}
.route-stop-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.route-done-toggle{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);cursor:pointer}

/* Uebersicht & Reporting (bericht.html) */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.kpi-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.kpi-label{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin-bottom:6px}
.kpi-value{font-size:26px;font-weight:700}
.kpi-value-warn{color:#b3261e}
.kpi-note{font-size:12px;color:var(--muted);margin-top:4px}
.chart-wrap{height:160px}
.chart-svg{width:100%;height:100%;display:block}
.chart-bar{fill:var(--brand)}

/* Muenztuben-Bestandsverlauf-Chart im Geraete-Modal (30.08.2026) - siehe
   geraete.js#buildStockHistoryChartHtml. viewBox-basiert + width:100% skaliert automatisch auf
   schmale Mobil-Bildschirme herunter, ohne horizontales Scrollen (Nutzerwunsch: "Achte auf die
   Kompatibilitaet auf Mobile"). */
.coin-chart-wrap{width:100%;position:relative}
/* Tooltip bei Hover/Tap auf einen Datenpunkt (30.08.2026, Nutzerwunsch: "wenn ich ueber die
   Punkte hover oder sie antippe soll er den Y-Wert dort anzeigen") - eigenes HTML-Element
   statt des nativen SVG-<title> (zeigt auf iOS Safari beim Antippen keinen Tooltip, siehe
   geraete.js#wireStockHistoryChartEvents), per JS ueber der jeweiligen Coordinate
   positioniert. */
.coin-chart-tooltip{position:absolute;transform:translate(-50%,-100%);margin-top:-10px;background:#2b2f36;color:#fff;padding:5px 9px;border-radius:6px;font-size:12px;line-height:1.35;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:6}
.coin-chart-tooltip.hidden{display:none}
.coin-chart-dot,.coin-chart-dot-hit{cursor:pointer}
.coin-chart-svg{width:100%;height:auto;display:block}
.coin-chart-grid{stroke:var(--border);stroke-width:1}
.coin-chart-axis-label{font-size:11px;fill:#6b6b6b}
.coin-series circle.coin-chart-dot{fill:var(--series-color)}
.coin-series polyline{transition:opacity .15s,stroke-width .15s}
.coin-series.coin-series-dim{opacity:.15}
.coin-series.coin-series-highlight polyline{stroke-width:4}
.coin-chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.coin-chart-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);font-size:13px;cursor:pointer;min-height:32px}
.coin-chart-chip-dot{width:10px;height:10px;border-radius:50%;background:var(--series-color);flex:none}
.coin-chart-chip.active{border-color:var(--series-color);background:color-mix(in srgb, var(--series-color) 12%, var(--card-bg));font-weight:600}
.report-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* Betriebswirtschaft/Belege (27.08.2026): Filter in einer klar abgegrenzten Karte statt
   loser Toolbar-Zeilen - Nutzerwunsch "strukturiere die Seite sodass sie intuitiver wird". */
.filter-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px}
.filter-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.filter-row .input-row{align-items:center}
.filter-row .input-row label{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.filter-row input[type=date]{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--text);font-size:13px}
.merchant-name-link{background:none;border:none;padding:0;font:inherit;color:var(--brand);cursor:pointer;text-decoration:underline;text-align:left}
.merchant-profile-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
/* Logo etwas groesser (27.08.2026, Nutzerwunsch "Logo soll etwas größer gemacht werden") -
   vorher 64px, jetzt 96px. */
.merchant-logo-img{width:96px;height:96px;border-radius:10px;object-fit:contain;background:var(--surface-2);border:1px solid var(--border);flex-shrink:0}
.merchant-logo-placeholder{width:96px;height:96px;border-radius:10px;background:var(--surface-2);border:1px dashed var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);text-align:center}

/* Logo per Klick aendern (27.08.2026, Nutzerwunsch: "Händlerlogo hochladen indem man auf das
   Bild klickt dann Upload-Modal") - das Bild selbst ist ein <label> fuer den versteckten
   Datei-Input, ein Hover-Overlay zeigt den "Ändern"-Hinweis fuer Entdeckbarkeit. */
.merchant-logo-click{position:relative;display:inline-block;cursor:pointer;border-radius:10px}
.merchant-logo-click-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600;border-radius:10px;opacity:0;transition:opacity .15s}
.merchant-logo-click:hover .merchant-logo-click-hint{opacity:1}

/* Haendlerprofil-Neugestaltung (27.08.2026, Nutzerwunsch: Name aktiv aenderbar, Ansprechpartner
   mit Anruf-/Mail-Button, Anschrift mit Adresssuche, frei benannte Dokumente/Bestelllisten -
   alles ueber #subModal bearbeitet, siehe betriebswirtschaft.js). */
.merchant-name-row{display:flex;align-items:center;gap:8px}
.merchant-name-row h2{margin:0}
.merchant-section{margin-top:20px}
.merchant-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.merchant-section-head h3{margin:0;font-size:15px}
.icon-btn{background:var(--surface-3);border:none;border-radius:6px;min-width:32px;height:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:14px;color:#333}
.icon-btn:hover{background:#e2e2e2}
.icon-btn-call{background:#e6f4ea;color:#1e7a34}
.icon-btn-call:hover{background:#d6ecdc}
.icon-btn-mail{background:#e3f0fd;color:#0f5da8}
.icon-btn-mail:hover{background:#d3e6fa}
.icon-btn-danger{background:#fdecea;color:#b3261e}
.icon-btn-danger:hover{background:#fadbd8}
.merchant-contact-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);margin-bottom:8px}
.merchant-contact-info{flex:1;min-width:0}
.merchant-contact-name{font-weight:600}
.merchant-contact-role{font-size:12px;color:var(--muted)}
.merchant-contact-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.merchant-address-block{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);display:flex;align-items:center;justify-content:space-between;gap:10px}
.merchant-address-text{font-size:14px;line-height:1.5}
.merchant-address-empty{color:var(--muted);font-size:13px}
.address-suggestions{position:relative}
.address-suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.12);max-height:220px;overflow:auto;z-index:5;margin-top:2px}
.address-suggestion-item{padding:8px 10px;cursor:pointer;font-size:13px}
.address-suggestion-item:hover{background:var(--hover-bg)}
.merchant-doc-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);margin-bottom:8px}
.merchant-doc-name{font-weight:600;cursor:pointer;background:none;border:none;padding:0;font:inherit;color:var(--brand);text-align:left}
.merchant-doc-meta{font-size:12px;color:var(--muted)}
.merchant-doc-actions{display:flex;gap:6px;flex-shrink:0}
.csv-table-wrap{max-height:60vh;overflow:auto;border:1px solid var(--border);border-radius:8px}
.csv-table{width:100%;border-collapse:collapse;font-size:13px}
.csv-table td,.csv-table th{border:1px solid var(--border);padding:4px 8px;white-space:nowrap}
.csv-table th{background:var(--surface-2);position:sticky;top:0}

/* Zahlungsstatus (27.08.2026, Nutzerwunsch: "Bezahlt/Zahlung ausstehend/offen") - anklickbare
   Pillen statt Dropdown, damit der aktuelle Status direkt sichtbar ist. */
.payment-status-row{display:flex;gap:8px;flex-wrap:wrap}
.payment-status-btn{border:1px solid var(--border);background:var(--card-bg);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit}
.payment-status-btn:hover{border-color:var(--brand)}
.payment-status-btn-offen.active{background:var(--surface-3);color:#666;border-color:transparent}
.payment-status-btn-ausstehend.active{background:var(--card-bg)4e0;color:#a15c00;border-color:transparent}
.payment-status-btn-bezahlt.active{background:#e6f4ea;color:#1e7a34;border-color:transparent}

/* Hinweis-Banner (28.08.2026, fuer den Duplikat-Hinweis und den Archiviert-Hinweis im
   Beleg-Modal) - deutlich sichtbarer als reiner .hint-Fließtext, gleiche Farbsprache wie die
   Status-Pills oben (siehe .badge-warning/.badge-neutral), damit ein Blick reicht, um "hier ist
   eine Entscheidung noetig" von "nur informativ" zu unterscheiden. */
.notice-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.notice-banner-warning{background:var(--card-bg)4e0;border:1px solid #f3d9a6;color:#7a4a00}
.notice-banner-neutral{background:var(--surface-3);border:1px solid var(--border);color:#555}
.notice-banner-text{flex:1;min-width:200px}
.notice-banner .button{flex-shrink:0}

/* Historie je Beleg (27.08.2026, Nutzerwunsch: "Historie was wann wie gesetzt wurde [...] mit
   welchem Benutzer"). */
.invoice-history-list{display:flex;flex-direction:column;gap:8px}
.invoice-history-item{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg)}
.invoice-history-note{font-size:13px}
.invoice-history-meta{font-size:12px;color:var(--muted);margin-top:2px}

/* Zweite Modal-Ebene (siehe betriebswirtschaft.html#subModal) - gleiches Muster wie
   #productPickerModal in lager.html: hoeherer z-index als die normale Modal-Ebene, damit sie
   ueber einem bereits offenen #pickModal erscheint. */
#subModal{z-index:110}

/* Nayax-Debug-Log */
.log-list{display:grid;gap:12px}
.log-entry{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px}
.log-entry.log-fail{border-color:#f3b4ae}
.log-entry-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.log-method{font-family:ui-monospace,Menlo,monospace;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--chip-bg);font-size:12px}
.log-url{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--text)}
.log-meta{color:var(--muted);font-size:12px;margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
.log-badge-ok{background:#e6f4ea;color:#1e7a34}
.log-badge-fail{background:#fdecea;color:#b3261e}
.log-body-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
@media (max-width:640px){.log-body-grid{grid-template-columns:1fr}}
.log-body-block h4{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.log-body-block pre{margin:0;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface-2);padding:10px;border-radius:8px;border:1px solid var(--border)}

/* Toast-Benachrichtigungen (27.08.2026, siehe common.js#showToast) - Ersatz fuer window.alert()
   an unschoenen Stellen. Rechts unten fix positioniert (ueberdeckt nichts Wichtiges, auch nicht
   auf schmalen Bildschirmen), z-index ueber dem Modal (120 > 110/100), damit ein Toast auch
   sichtbar ist, waehrend ein Modal offen ist (z.B. Ergebnis einer Modal-Aktion). */
.toast-container{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:8px;max-width:min(360px,90vw)}
.toast{background:#2b2f36;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:14px;line-height:1.4;opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}
.toast-hide{opacity:0;transform:translateY(6px)}
.toast-success{background:#1e7e34}
.toast-error{background:#b3261e}
.toast-info{background:#2b2f36}

/* Muenzsorten-Karten fuer Schwellen/Zielbestand UND Fuellliste (27.08.2026, Fix: die zwei
   Zahlen-Eingaben pro Muenzsorte standen vorher ohne eigene Breite nebeneinander in einer
   schmalen .form-grid-Spalte und liefen dadurch ineinander/wurden abgeschnitten, siehe
   Nutzer-Screenshot). Jede Muenzsorte ist jetzt eine eigene, umrandete Mini-Karte mit den
   Feldern UNTEREINANDER (wie .form-field es fuer laengere Formulare ohnehin schon vorsieht) -
   dadurch braucht jedes Eingabefeld nur noch die volle Breite der Karte, kein Nebeneinander
   mehr noetig. Eigene Grid-Klasse statt der generischen .form-grid, weil hier volle statt
   minmax(200px,..)-Spaltenbreite pro Karte gebraucht wird. */
.coin-config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0}
.coin-config-card{border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--surface-2)}
.coin-config-card-title{font-weight:700;font-size:14px;margin-bottom:8px}
.coin-config-card .form-field{margin-bottom:8px}
.coin-config-card .form-field:last-child{margin-bottom:0}
.coin-config-card .form-field label{font-weight:400;color:var(--muted);font-size:12px}

/* DEX-Import-Modal (27.08.2026, Ersatz fuer den bisherigen bloßen Toolbar-Button mit
   window.alert()-Ergebnis) - Status-Zeile + Ergebnis-Tabelle nach manuellem Anstoss. */
.dex-import-status{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);margin-bottom:14px;font-size:14px}
.dex-import-results{margin-top:14px}

/* Mobile-Navigation als Burger-Menu (30.08.2026, Nutzerwunsch: Header bei schmalen
   Bildschirmen abgeschnitten - z.B. "Betriebswirtschaft" nur in den ersten paar Buchstaben
   sichtbar, weil .nav eine feste Reihe von Links ohne Umbruch ist und bei genug sichtbaren
   Links seitlich aus dem Bildschirm laeuft). Eigener Breakpoint (860px statt der sonst
   genutzten 640px), weil das Umbruch-Problem schon auf Tablet-Breite auftritt, sobald alle
   Admin-/Lager-Links sichtbar sind - nicht erst auf reiner Telefonbreite. Der Toggle-Button
   selbst wird nicht in jede der 11 Seiten einzeln ins HTML geschrieben, sondern von
   common.js zentral vor die .nav eingefuegt (siehe dort setupNavToggle()). */
@media (max-width:860px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .brand{width:100%;justify-content:space-between}
  .nav{display:none;flex-direction:column;align-items:stretch;gap:2px;width:100%;padding-top:10px;margin-top:10px;border-top:1px solid var(--border)}
  .nav.nav-open{display:flex}
  .nav a{padding:12px 14px}
  /* Darkmode-Umschalter auf Mobile nur noch im Kebab-Menue (2026-08-31, Nutzerwunsch:
     "Darkmode-Button auf Mobile nur im Kebab-Menü") - eigenstaendigen Knopf ausblenden,
     Kebab-Menue-Variante stattdessen einblenden (siehe public/js/common.js#setupThemeToggle). */
  .theme-toggle-btn{display:none}
  .theme-kebab-menu{display:inline-flex}
}

/* Mobile */
@media (max-width:640px){
  body{padding:10px}
  header{flex-direction:column;align-items:stretch}
  .user-area{justify-content:space-between}
  .devices{grid-template-columns:1fr}
  .picklist-table th:nth-child(3),.picklist-table td:nth-child(3){display:none}
  /* Modal nimmt auf schmalen Bildschirmen praktisch die volle Breite/Hoehe ein statt mittig mit
     Rand zu schweben - mehr nutzbare Flaeche fuer Formulare wie Schwellen/Zielbestand oder das
     Geraete-Detail, weniger Scroll-in-Scroll-Gefuehl. */
  .modal{padding:0}
  .modal-panel,.modal-panel-wide{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  .toolbar-split{flex-direction:column;align-items:stretch}
  .toolbar-split > div{display:flex;flex-direction:column;gap:8px}
  .toolbar-split > div > button,.toolbar-split > div > .button,
  .filter-row .input-row > button,.filter-row .input-row > .button{align-self:flex-start}
  .toast-container{left:10px;right:10px;bottom:10px;max-width:none}
  .filter-row{flex-direction:column;align-items:stretch}
  .filter-row .input-row{flex-direction:column;align-items:stretch}

  /* Karten-Ansicht fuer die Belege-Tabelle (28.08.2026, Nutzerwunsch "Schaue dir hier bitte
     nochmal die Kompatibilität an [...] optimiere zur Nutzerfreundlichkeit", angelehnt an
     Banking-/Buchhaltungs-Apps): eine breite Tabelle mit acht Spalten ist auf einem Handy nur
     durch seitliches Scrollen nutzbar. Bewusst als eigene ".responsive-table"-Klasse statt einer
     Aenderung an ".picklist-table" allgemein - andere Tabellen im System (Lager etc.) behalten
     ihr bisheriges, dort bereits abgestimmtes Mobil-Verhalten (Spalten ausblenden) unveraendert.
     Technik: thead wird versteckt, jede Zeile wird zu einer Karte, jede Zelle zu einer eigenen
     Zeile darin mit ihrer Spaltenueberschrift als Label davor (per data-label-Attribut aus
     renderTable() in betriebswirtschaft.js, ueber ::before ausgegeben - reines CSS, keine
     Duplizierung der Ueberschriften im Markup noetig). */
  .responsive-table thead{display:none}
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td{display:block;width:100%}
  .responsive-table{border:none;border-collapse:separate}
  .responsive-table tr{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:4px 0}
  .responsive-table td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);text-align:right}
  .responsive-table td:last-child{border-bottom:none;justify-content:flex-end}
  .responsive-table td::before{content:attr(data-label);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left;margin-right:auto}
  /* Letzte Spalte (Aktions-Button) braucht kein Label davor - der Button spricht fuer sich. */
  .responsive-table td:last-child::before{content:none}
  .responsive-table td:last-child .button{width:100%}
}

/* Kebab-Menue (30.08.2026) */
.kebab-menu{position:relative;display:inline-flex}
/* Darkmode-Kebab im Header (2026-08-31, Nutzerwunsch: "Darkmode-Button auf Mobile nur im
   Kebab-Menü") - auf Desktop per Default ausgeblendet (dort bleibt der eigenstaendige
   .theme-toggle-btn sichtbar), erst ab @media(max-width:860px) eingeblendet, siehe dort. */
.theme-kebab-menu{display:none}
.kebab-menu-btn{background:var(--surface-3);color:var(--text);border:1px solid var(--border);width:36px;height:36px;padding:0;border-radius:8px;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.kebab-menu-btn:hover{background:var(--hover-bg)}
.kebab-menu-panel{position:absolute;right:0;top:calc(100% + 6px);background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.18);min-width:220px;padding:6px;z-index:150;display:flex;flex-direction:column;gap:2px}
.kebab-menu-panel.hidden{display:none}
.kebab-menu-item{background:none;border:none;text-align:left;padding:10px 12px;border-radius:6px;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;width:100%}
.kebab-menu-item:hover{background:var(--hover-bg)}
.kebab-menu-item:disabled{opacity:.5;cursor:not-allowed}
/* Innerhalb einer Kartenaktionszeile (.card-actions) sitzt das Kebab-Menue rechtsbuendig neben
   dem/den verbleibenden Haupt-Button(en) - siehe z.B. geraete.js#refreshDeviceModal. */
.card-actions{align-items:center}
@media (max-width:640px){
  .kebab-menu-panel{min-width:200px}
}


/* =========================================================================================
   Darkmode (30.08.2026, Nutzerwunsch: "Baue fuer die gesamte Anwendung einen Darkmode ein der
   gut aussieht") - gesteuert per [data-theme] Attribut auf <html>, siehe
   public/js/common.js#setupThemeToggle fuer den Umschalt-Knopf + die Persistierung
   (localStorage) sowie das kleine Inline-Script im <head> jeder Seite, das das Attribut schon
   VOR dem ersten Render setzt (verhindert einen kurzen hellen Blitz beim Laden). Ohne
   gespeicherte Nutzer-Wahl folgt die App der Systemeinstellung (prefers-color-scheme).

   Aufbau in zwei Ebenen:
   1) Die Kernvariablen (--bg/--card-bg/--border/--text/--muted/--surface-*/--chip-bg/
      --hover-bg) werden hier umdefiniert - da praktisch das gesamte Stylesheet bereits ueber
      diese Variablen (statt harter Hexwerte) arbeitet, faerbt das automatisch den Grossteil der
      Flaeche korrekt ein (Karten, Modals, Tabellen, Inputs, Kebab-Menues, Toolbar etc.).
   2) Eine gezielte zweite Schicht fuer die verbleibenden, bewusst NICHT variablenbasierten
      Statusfarben (gruen/rot/orange/blau-Pastelltoene bei Badges/Pills/Bannern/Icon-Buttons) -
      diese sollen naemlich NICHT einfach auf die neuen Oberflaechen-Variablen mappen (ein
      knalliges Pastellrot auf dunklem Grund waere kein "gutes" Darkmode-Rot), sondern
      eigene, gedaempfte Dark-Varianten bekommen (transparente, dunkel getoente Flaeche +
      hellere Schrift - uebliches Muster in dunklen UIs, siehe z.B. GitHub Dark).
   ========================================================================================= */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

:root[data-theme="dark"],
:root[data-theme="dark"] body{
  --bg:#14171c;
  --card-bg:#1c2027;
  --border:#2c313a;
  --text:#e8eaed;
  --muted:#9aa0aa;
  --surface-2:#232830;
  --surface-3:#2a2f38;
  --chip-bg:#262b33;
  --hover-bg:#282e37;
}

/* Statusfarben-Familien (rot/gruen/orange/blau) - dieselben Selektoren wie im Hell-Theme, hier
   nur mit gedaempften Dark-Varianten ueberschrieben. Vier Familien, quer durch alle Seiten
   wiederverwendet (Badges, Pills, Icon-Buttons, Banner, Log-Eintraege). */
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .stock-badge-low,
[data-theme="dark"] .badge-lowstock,
[data-theme="dark"] .badge-outdated,
[data-theme="dark"] .log-badge-fail,
[data-theme="dark"] .outdated-banner{
  background:rgba(255,107,107,.16);
  color:#ff8a80;
}
[data-theme="dark"] .icon-btn-danger{background:rgba(255,107,107,.16);color:#ff8a80}
[data-theme="dark"] .icon-btn-danger:hover{background:rgba(255,107,107,.26)}
[data-theme="dark"] .log-entry.log-fail{border-color:#6b3630}

[data-theme="dark"] .badge-success,
[data-theme="dark"] .stock-badge-ok,
[data-theme="dark"] .badge-done,
[data-theme="dark"] .log-badge-ok{
  background:rgba(111,207,142,.16);
  color:#6fcf8e;
}
[data-theme="dark"] .icon-btn-call{background:rgba(111,207,142,.16);color:#6fcf8e}
[data-theme="dark"] .icon-btn-call:hover{background:rgba(111,207,142,.26)}
[data-theme="dark"] .delta-in{color:#6fcf8e}

[data-theme="dark"] .badge-warning,
[data-theme="dark"] .stock-badge-warn,
[data-theme="dark"] .payment-status-btn-ausstehend.active,
[data-theme="dark"] .warning-banner,
[data-theme="dark"] .notice-banner-warning{
  background:rgba(240,180,41,.16);
  color:#f0b429;
  border-color:#5a4623;
}
[data-theme="dark"] .receipt-placeholder{background:rgba(240,180,41,.1);border-color:#5a4623;color:var(--text)}
[data-theme="dark"] .forecast-cell.forecast-soon{color:#f0b429}
[data-theme="dark"] .kpi-value-warn,
[data-theme="dark"] .forecast-cell.forecast-urgent{color:#ff8a80}

[data-theme="dark"] .badge-info,
[data-theme="dark"] .icon-btn-mail{
  background:rgba(124,184,240,.16);
  color:#7cb8f0;
}
[data-theme="dark"] .icon-btn-mail:hover{background:rgba(124,184,240,.26)}

[data-theme="dark"] .badge-neutral,
[data-theme="dark"] .badge-discarded,
[data-theme="dark"] .notice-banner-neutral,
[data-theme="dark"] .payment-status-btn-offen.active{
  color:var(--text);
}

/* Einzelne, nicht-variablenbasierte Feinheiten */
[data-theme="dark"] .modal-close{color:var(--text)}
[data-theme="dark"] .icon-btn{color:var(--text)}
[data-theme="dark"] .icon-btn:hover{background:var(--hover-bg)}
[data-theme="dark"] .chip-remove:hover{background:#333842;color:var(--text)}
[data-theme="dark"] .login-body{background:var(--bg)}
[data-theme="dark"] .sub{color:var(--muted)}
[data-theme="dark"] .mdb-badge{background:#3a3f4a}
[data-theme="dark"] .we-pick-btn.we-pick-chosen{color:var(--brand)}
[data-theme="dark"] .toast{box-shadow:0 6px 18px rgba(0,0,0,.5)}