/* ==========================================================================
   MarvinMobile - eigenständiges CSS im visuellen Stil des
   Goecom-Referenzprojekts (dunkles Theme, dieselben Design-Tokens),
   bewusst OHNE Tailwind-Build-Schritt - kein Node/npm auf dem Zielrechner
   nötig, "dotnet run" reicht.
   ========================================================================== */

:root {
  /* Sagt dem Browser, dass diese Seite komplett dunkel gestaltet ist, damit er NATIVE
     Steuerelemente (Dropdown-Popup von <select>, Scrollbars, Datums-Picker) ebenfalls in
     seinem eingebauten Dark-Theme rendert. Das ist der robuste, standardisierte Weg dafuer
     - das direkte Einfaerben von <option>-Elementen alleine wird von manchen
     Chromium-/Edge-Versionen fuer das Popup selbst nicht zuverlaessig genug uebernommen. */
  color-scheme: dark;

  --color-primary: #0077ff;
  --color-secondary: #2522c5;
  --radius-main: 12px;
  --background: #1a2e4d;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;

  --surface: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.1);

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;

  /* Modusabhängige Farben (seit 2026-09-29, heller Modus siehe [data-grundton="light"] am Ende). */
  --page-bg: linear-gradient(to bottom right, #020617, #0f172a, var(--background));
  --sidebar-bg: #020617;
  --topbar-bg: rgba(15, 23, 42, 0.6);
  --nav-text: rgba(255, 255, 255, 0.8);
  --hover: rgba(255, 255, 255, 0.08);
  --active: rgba(255, 255, 255, 0.12);
  --label: rgba(255, 255, 255, 0.85);
  --icon-muted: rgba(255, 255, 255, 0.4);
  --error-text: #fca5a5;
  --error-strong: #f87171;
  --popup-bg: #0f1a2e;
  --table-head-bg: #16233a;
  --line-soft: rgba(255, 255, 255, 0.05);
  --row-hover: rgba(255, 255, 255, 0.04);
  --surface-faint: rgba(255, 255, 255, 0.02);
  --ok-text: #34d399;
  --bad-text: #f87171;
  /* Charts (charts.js liest diese Werte beim Zeichnen und beim Umschalten des Modus). */
  --chart-text: #94a3b8;
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-legend: #e2e8f0;
  --chart-tooltip-bg: rgba(15, 23, 42, 0.8);
  --chart-segment: #1b2436;
  --chart-point-border: rgba(15, 23, 42, 0.9);
  --png-bg: #16233a;
  /* Druckblatt (Formular- und Berichtsdesigner, seit 18.10.2026): bleibt in allen Modi weiß wie das Papier. */
  --papier: #fff;
  --papier-leise: #8a8f98;
  --papier-linie: #c7ccd3;
  /* Schrift auf dem Papier des Formulardesigners (seit 18.10.2026, statt festem black in color-mix). */
  --papier-text: #111;
}

* { box-sizing: border-box; }

/* Grundschrift 18 px statt 16 px (seit 12.10.2026): besser lesbar fuer Verkaeuferinnen und auf
   Mobilgeraeten; alle rem-Groessen wachsen mit, Mindestgroesse fuer Text 0.85rem. */
html { font-size: 112.5%; }
/* Schriftgröße je Benutzer (seit 12.10.2026, Rechte "Darstellung", js/schrift.js): klein = 16 px wie bis 12.10.2026,
   normal = 18 px, groß = 20 px. */
html[data-schrift="klein"] { font-size: 100%; }
html[data-schrift="gross"] { font-size: 125%; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--text-primary);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------------------------------------------------------------------- */
/* App-Shell / Sidebar / Topbar                                           */
/* ---------------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  display: none;
  flex-direction: column;
  width: 18rem;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 2px solid var(--border-soft);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .sidebar { display: flex; }
}

.sidebar-brand, .login-sidebar-icon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  border-bottom: 2px solid var(--border-soft);
}
/* Logo-Bereich links und Kopfzeile rechts gleich hoch, damit die Trennlinien auf einer Höhe liegen (seit 06.10.2026). */
:root { --kopf-hoehe: 4.5rem; }
.sidebar-brand { height: var(--kopf-hoehe); padding: 0 1.25rem; color: inherit; text-decoration: none; }
.brand-logo { height: 2.5rem; width: auto; flex-shrink: 0; }

.brand-icon {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: var(--radius-main);
  background: linear-gradient(to bottom right, var(--color-secondary), var(--color-primary));
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.brand-title { font-weight: 600; line-height: 1.2; }
.brand-subtitle { font-size: 0.85rem; color: var(--text-secondary); }

/* Ein Scrollbalken (seit 12.10.2026): ist das Menü höher als das Fenster, scrollt es in sich - vorher verlängerte es die
   ganze Seite, und jede Seite bekam einen äußeren Scrollbalken. */
.sidebar-nav { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-height: 0; overflow-y: auto; }

.nav-link {
  display: block;
  padding: 0.42rem 0.75rem;
  border-radius: var(--radius-main);
  font-size: 0.9rem;
  color: var(--nav-text);
}
/* Hover nur mit Maus (seit 23.10.2026): auf Touch-Geräten bleibt :hover nach dem Antippen stehen, bis man woanders tippt. */
@media (hover: hover) { .nav-link:hover { background: var(--hover); color: var(--text-primary); } }
.nav-link-active { background: var(--active); color: var(--text-primary); }
.nav-link-content { display: inline-flex; align-items: center; gap: 0.6rem; }
/* Feste Breite und mittig: Symbole unterschiedlicher Breite (z. B. Statistiken, Datenzugriff) stehen sauber
   untereinander, und alle Namen beginnen an derselben Stelle. */
.nav-symbol { width: 1.25rem; flex: 0 0 1.25rem; text-align: center; }

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-footer-logo { height: 1.1rem; width: auto; opacity: 0.8; }
a.sidebar-footer { text-decoration: none; }
a.sidebar-footer:hover { color: var(--text-primary); }

.mobile-nav {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 16rem;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-soft);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) { .mobile-nav { display: none; } }

.mobile-nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
}
@media (min-width: 1024px) { .mobile-nav-backdrop { display: none; } }

.app-main { flex: 1; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid var(--border-soft);
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
}
.topbar-inner {
  min-height: calc(var(--kopf-hoehe) - 2px);
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.topbar-left { display: flex; align-items: center; gap: 0.75rem; }
.topbar-title { font-weight: 600; }
.topbar-subtitle { font-size: 0.85rem; color: var(--text-secondary); }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; }

.icon-button {
  height: 2.5rem; width: 2.5rem;
  border-radius: var(--radius-main);
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.mobile-only { display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .mobile-only { display: none; } }

/* Alle Seiten in voller Breite (seit 14.10.2026, vorher höchstens 1400 px mittig) - nur Lesetext (Hilfe) bleibt schmaler. */
.app-content { padding: 0.75rem 1rem; }

/* Niedriges Fenster am PC (seit 20.10.2026: z. B. 200 % Browser-Zoom auf Full HD = 540 px Höhe in CSS-Pixeln): Kopfzeile
   kompakter und ohne Untertitel - sie klebt oben und nahm sonst ein Fünftel der Höhe. Ohne Zoom ist kein PC-Fenster so niedrig. */
@media (max-height: 599px) {
  html[data-geraet="desktop"] { --kopf-hoehe: 3.4rem; }
  html[data-geraet="desktop"] .topbar-subtitle { display: none; }
  html[data-geraet="desktop"] .topbar-inner { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}

/* ---------------------------------------------------------------------- */
/* Buttons / Forms                                                        */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--surface-strong); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* Erst verbunden (seit 29.10.2026, ErstVerbunden.razor bzw. data-erst-verbunden): vorgerenderte Bedienelemente bleiben gesperrt,
   bis die Seite mit dem Server verbunden ist. Gedimmt erst nach 0,3 s - am PC ist sie bis dahin verbunden und nichts flackert,
   auf einem langsamen Handy sieht man, dass es noch nicht geht. */
.erst-verbunden { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.erst-verbunden:disabled :is(input, select, textarea, button), [data-erst-verbunden]:disabled {
  opacity: 1; cursor: progress; animation: erst-verbunden-warten 0s 0.3s both;
}
@keyframes erst-verbunden-warten { to { opacity: 0.5; } }

.btn-primary {
  background: color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.btn-primary:hover { background: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; justify-content: center; }

.form-label { display: block; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--label); }
.form-input {
  width: 100%;
  border-radius: var(--radius-main);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-primary);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  outline: none;
}
.form-input:focus { border-color: var(--color-primary); background: var(--surface-strong); }
/* Das Dropdown-Popup eines <select> wird vom Betriebssystem gerendert, nicht von der
   Seite selbst - "--surface" (halbtransparentes Weiss, wirkt nur dunkel VOR dem dunklen
   Seitenhintergrund) reicht dafuer nicht, das Popup faellt sonst auf die native weisse
   Darstellung zurueck. Eine deckende, dunkle Farbe direkt auf den <option>-Elementen
   behebt das (funktioniert in Chrome/Edge zuverlaessig). */
.form-input option { background-color: var(--background); color: var(--text-primary); }
.form-error { color: var(--error-strong); font-size: 0.85rem; margin-top: 0.25rem; }

.input-with-icon { position: relative; }
.input-with-icon i {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--icon-muted); font-size: 0.9rem;
}
.input-with-icon .form-input { padding-left: 2.25rem; }

/* Passwortfeld mit Auge (seit 20.10.2026, Components/PasswortFeld.razor): Knopf rechts im Feld, Edges eigenes Auge aus
   (sonst zwei). Das Symbol im Knopf ist kein Feld-Symbol der .input-with-icon-Regel. */
.passwort-feld { position: relative; }
.passwort-feld .form-input { padding-right: 2.6rem; }
.passwort-feld .form-input::-ms-reveal, .passwort-feld .form-input::-ms-clear { display: none; }
.passwort-auge {
  position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-main); background: transparent; color: var(--icon-muted); cursor: pointer; padding: 0;
}
.passwort-auge:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.passwort-auge:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; color: var(--color-primary); }
.passwort-auge[aria-pressed="true"] { color: var(--color-primary); }
.input-with-icon .passwort-auge i { position: static; transform: none; color: inherit; font-size: 0.95rem; }

.status-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--border-soft);
  font-size: 0.9rem;
  margin: 1rem 0;
}
.status-info { background: var(--surface); color: var(--label); }
.status-error { background: rgba(208, 59, 59, 0.15); border-color: rgba(208, 59, 59, 0.4); color: var(--error-text); }
.status-warning { background: rgba(250, 178, 25, 0.12); border-color: rgba(250, 178, 25, 0.4); color: var(--warning); }

/* ---------------------------------------------------------------------- */
/* Cards / Dashboard                                                      */
/* ---------------------------------------------------------------------- */
.card {
  border-radius: var(--radius-main);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 0.8rem 1rem;
}
.card-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.card-subtitle { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.card-empty { color: var(--text-secondary); font-size: 0.9rem; padding: 1.25rem 0; text-align: center; }

.dashboard-page { display: flex; flex-direction: column; gap: 0.75rem; }

/* Derselbe Grid-Blowout-Mechanismus wie bei ".chart-grid > .card" (siehe dort), aber eine
   Ebene hoeher: ".dashboard-page" ist selbst ein Flex-Container, und dessen direkte Kinder
   (u.a. ".chart-grid") haben als Flex-Items ebenfalls "min-width: auto" per Default - der
   tief verschachtelte <canvas> darf dadurch NICHT NUR seine eigene Grid-Spalte, sondern die
   gesamte Seite nach rechts aufblaehen. Das ist die eigentliche Ursache der gemeldeten
   Scrollbar unten im Browser: der Chart-Bereich schrumpft dadurch nie unter eine einmal
   erreichte Breite, egal wie klein das Fenster gezogen wird - Chart.js misst brav die
   (aufgeblaehte) Containergroesse und "resized" technisch korrekt auf sie, nur ist diese
   Groesse selbst nie kleiner als der Ausreisser. */
.dashboard-page > * { min-width: 0; }

.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: end;
}
.filter-bar > * { min-width: 0; }
@media (max-width: 900px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
}
.filter-field-action { display: flex; }
.filter-field-action .btn { width: 100%; justify-content: center; }

/* Read-only Anzeige des aus einem Preset berechneten Zeitraums (Zeitraum-/Vergleichszeitraum-
   Dropdown auf etwas anderes als "Frei wählbar"/"Freie Eingabe" gestellt) - sieht wie ein
   deaktiviertes form-input aus, ist aber nur Text (kein editierbares Feld nötig). */
.filter-field-readonly { display: flex; flex-direction: column; }
.filter-readonly-value {
  border-radius: var(--radius-main);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}


.metric-vergleich { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.metric-vergleich[title] { cursor: help; }
.metric-vergleich-punkt { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: 0 0 auto; background: var(--text-secondary); }
.metric-vergleich-zeitraum { background: var(--color-primary); }
.metric-vergleich-filiale { background: #94a3b8; }
.metric-vergleich-beide { background: transparent; border: 2px solid #94a3b8; }
.metric-vergleich-wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-delta { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-delta.gut { background: rgba(12, 163, 12, 0.16); color: var(--ok-text); }
.metric-delta.schlecht { background: rgba(208, 59, 59, 0.16); color: var(--bad-text); }
.metric-delta.gleich { background: var(--surface-strong); color: var(--text-secondary); }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.metric-grid > * { min-width: 0; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .metric-grid { grid-template-columns: 1fr; } }

/* Kennzahl-Kachel (KennzahlKachel.razor, seit 20.10.2026 für Dashboard und Filialanalyse gleich): das Symbol steht immer oben
   rechts in fester Größe, der Name fließt darum herum, der Wert steht darunter über die volle Breite. Seine Schrift richtet sich
   nach der Breite der Kachel (Container, cqi) und der Länge des Werts (--zeichen, ca. 0,62 em je Zeichen in Fettschrift):
   lange Werte werden kleiner statt das Symbol hinauszuschieben oder abgeschnitten zu werden; unter 0,95rem bricht er um. Container ist seit
   29.10.2026 der Rahmen .metric-wert (gleich breit wie der Inhalt der Kachel); die Kachel bleibt es für Seiten, die cqi selbst nutzen. */
.metric-card { container-type: inline-size; min-width: 0; }
.metric-wert { container-type: inline-size; min-width: 0; }
.metric-kopf { display: flow-root; }
.metric-kopf .metric-icon { float: right; height: 2.6rem; width: 2.6rem; font-size: 1.05rem; margin: 0 0 0.25rem 0.6rem; }
/* Kein Umbruch mitten im Wort („Ausschussquo-te“): passt ein Wort nicht neben das Symbol, rutscht es darunter. */
.metric-title { margin: 0; font-size: 0.9rem; color: var(--text-secondary); overflow-wrap: normal; hyphens: auto; }
.metric-value { margin: 0.3rem 0 0; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  font-size: 1.4rem; font-size: clamp(0.95rem, calc(100cqi / (var(--zeichen, 8) * 0.62)), 1.7rem); }
.metric-hinweis { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
/* Kacheln einer Reihe bündig (seit 29.10.2026, Container-Klasse kacheln-buendig, z. B. Bestellvorschlag): Name, Wert und Fuß stehen über
   ein Subgrid in gemeinsamen Zeilen - die Werte oben auf einer Höhe, auch wenn ein Name umbricht oder ein langer Wert („34,5–38,7 %“)
   kleiner steht. Die Spalte ist nie breiter als die Kachel (minmax(0, 1fr)); der Name fließt wie sonst um das Symbol - ein Wort, das nicht
   daneben passt, rutscht darunter (ein Name neben dem Symbol als Flexzeile schob bei schmalen Kacheln das Symbol hinaus). Dashboard und
   Filialanalyse nutzen es nicht. */
.kacheln-buendig > .metric-card { container-type: normal; display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 3;
  grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.kacheln-buendig > .metric-card > .metric-wert { align-self: start; }

.metric-icon {
  height: 3rem; width: 3rem;
  border-radius: var(--radius-main);
  display: grid; place-items: center;
  font-size: 1.1rem;
  color: white;
  flex-shrink: 0;
}
.icon-bg-cyan { background: #06b6d4; }
.icon-bg-violet { background: #8b5cf6; }
.icon-bg-emerald { background: #22c55e; }
.icon-bg-rose { background: #ef4444; }
/* Bewertete Kennzahlen (Filialanalyse): Ampel, ohne Bewertung die Hausfarbe. Gelb abgedunkelt - weißes Symbol auf --warning
   wäre kaum zu sehen. */
.icon-bg-gut { background: var(--good); }
.icon-bg-mittel { background: color-mix(in srgb, var(--warning) 78%, #000); }
.icon-bg-schlecht { background: var(--critical); }
.icon-bg-primaer { background: var(--color-primary); }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }

.card-span-2 { grid-column: span 2; }
@media (max-width: 900px) { .card-span-2 { grid-column: span 1; } }

/* Grid-Items haben per Default "min-width: auto", d.h. ihr Inhalt (das <canvas> von
   Chart.js hat eine eigene intrinsische Breite/Hoehe) darf die Grid-Spalte aufblaehen statt
   sich ihr unterzuordnen. Chart.js' eingebauter ResizeObserver misst dann eine zu grosse
   Breite, "backt" sie ins Canvas-Bitmap ein und verkleinert beim Zurueckziehen des
   Browserfensters nicht mehr sauber - genau das beobachtete "Charts werden langgezogen".
   min-width/min-height: 0 zwingt die Karte, sich immer an die tatsaechliche Grid-/Flex-
   Zellengroesse zu halten (siehe Chart.js-Doku "Responsive Charts": derselbe Fix ist dort
   fuer Flexbox-Layouts dokumentiert, gilt identisch fuer CSS Grid). */
.chart-grid > .card { min-width: 0; min-height: 0; }

.chart-wrap { position: relative; height: 320px; margin-top: 1rem; min-width: 0; overflow: hidden; }
.chart-wrap-tall { height: 380px; }

/* ---------------------------------------------------------------------- */
/* Konfigurierbares Dashboard (gridstack.js, siehe js/dashboard-grid.js)   */
/* ---------------------------------------------------------------------- */
/* Dashboard-Kopf in einer Zeile (seit 20.10.2026, vorher Auswahlkarte mit vielen Symbolen und eine eigene Filterzeile):
   Begrüßung links, rechts "Dashboard" und "Filter" im Stil von "Auswahl"/"Aufbau" der Statistiken (offen = btn-primary) und
   "Aktualisieren". Die Dashboard-Auswahl klappt als Panel unter dem Knopf auf - deckend (--popup-bg). */
.dashboard-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.dashboard-kopf > .dashboard-gruss-text { margin-right: auto; min-width: 0; }
.dashboard-kopf-knoepfe { position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dashboard-wahl { position: relative; display: flex; min-width: 0; }
.dashboard-kopf-knopf { min-width: 0; max-width: 22rem; gap: 0.45rem; padding: 0.5rem 0.85rem; white-space: nowrap; }
/* Filter-Knopf nur mit Symbol und „Filter“ (20.10.2026) - ohne Doppelpunkt, so breit wie sein Inhalt. */
.dashboard-filter-knopf .dashboard-kopf-art::after { content: none; }
.dashboard-kopf-knopf > .fa-solid:first-child { color: var(--color-primary); }
.dashboard-kopf-knopf.btn-primary > .fa-solid:first-child { color: inherit; }
.dashboard-kopf-art::after { content: ":"; }
.dashboard-kopf-wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.dashboard-kopf-pfeil { font-size: 0.7rem; opacity: 0.75; }
.dashboard-aktualisieren { padding: 0.5rem 0.75rem; gap: 0.4rem; }
.dashboard-datum, .dashboard-stand { white-space: nowrap; }
.dashboard-stand { cursor: help; }
.dashboard-stand i { margin-left: 0.2rem; }
/* Handy und Tablet (seit 29.10.2026): Datum und Stand sind je für sich unteilbar, dazwischen darf die Zeile umbrechen -
   "Donnerstag, 29. Oktober 2026 · Stand 10:05 Uhr" ist auf dem Handy breiter als der Bildschirm. Auf dem Handy steht der
   Stand immer in der zweiten Zeile (ohne Trennpunkt), auf dem Tablet nur, wenn er nicht mehr daneben passt. */
html:is([data-geraet="handy"], [data-geraet="tablet"]) .dashboard-gruss-text p { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.25em; }
html:is([data-geraet="handy"], [data-geraet="tablet"]) .dashboard-gruss-text p > span { min-width: 0; }
html[data-geraet="handy"] .dashboard-stand { flex-basis: 100%; }
html[data-geraet="handy"] .dashboard-stand-trenner { display: none; }
html[data-geraet="handy"] .dashboard-stand i { margin-left: 0; }
/* Auswahl aller Dashboards mit den Aktionen (Neu, Kopieren, Bearbeiten, Start, Löschen). Rechtsbündig unter dem Knopf
   (seit 20.10.2026) - der Knopf steht rechts im Kopf, linksbündig stand das Panel bei kurzem Namen rechts über. */
.dashboard-panel-hintergrund { position: fixed; inset: 0; z-index: 60; }
.dashboard-panel { position: absolute; right: 0; left: auto; top: calc(100% + 0.4rem); z-index: 61; width: 23rem; max-width: calc(100vw - 2rem);
  max-height: min(70vh, 36rem); overflow-y: auto; padding: 0.4rem; background: var(--popup-bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-main); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
.dashboard-panel > .widget-menue-titel:first-child { margin-top: 0.25rem; }
.dashboard-panel .widget-menue-eintrag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-panel-eintrag.aktiv { background: color-mix(in srgb, var(--color-primary) 12%, transparent); font-weight: 600; }
.dashboard-panel .dashboard-panel-eintrag.start i:first-child, .dashboard-panel .dashboard-start.aktiv i:first-child { color: var(--warning); }
.dashboard-panel .dashboard-loeschen, .dashboard-panel .dashboard-loeschen i:first-child { color: var(--bad-text); }
.dashboard-panel hr { margin: 0.35rem 0.2rem; border: 0; border-top: 1px solid var(--border-soft); }
.dashboard-panel-hinweis { margin: 0.35rem 0.55rem 0.2rem; font-size: 0.85rem; color: var(--text-secondary); }
.dashboard-panel-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.35rem 0.55rem; font-size: 0.9rem; }
.dashboard-panel-frage > span { flex: 1 1 100%; }
/* Für alle freigegebene Dashboards (seit 23.10.2026): Unterabschnitt „Für alle“ unter den fertigen, Ersteller klein unter dem Namen. */
.dashboard-panel .dashboard-panel-unter { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.55rem; font-size: 0.78rem; }
.dashboard-panel-ersteller { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; font-weight: 400; color: var(--text-secondary); }
.dashboard-panel .dashboard-panel-geteilt { font-size: 0.8rem; color: var(--text-secondary); }
.dashboard-panel .dashboard-freigabe.aktiv i:first-child, .filter-vorlagen .vorlage-freigabe.aktiv { color: var(--color-primary); }
.vorlage-fremd { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; color: var(--color-primary); cursor: help; }
html[data-touch] .vorlage-fremd { min-width: 44px; min-height: 44px; }
/* Rückfrage beim Löschen einer freigegebenen Vorlage ist länger - darf umbrechen statt aus der Zeile zu laufen. */
.filter-vorlagen .vorlage-frage-lang { white-space: normal; min-width: 0; max-width: 26rem; }
/* Bearbeiten: Name, Charts, Speichern und Abbrechen an der Stelle der Knöpfe. */
.dashboard-bearbeiten { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem 0.3rem 0.5rem; border-radius: 999px; min-width: 0; }
.dashboard-name { width: 15rem; padding: 0.3rem 0.7rem; font-size: 0.9rem; border-radius: 999px; }
.dashboard-bearbeiten > .btn-klein { margin-left: 0.15rem; }
.dashboard-bearbeiten-info { color: var(--text-secondary); padding: 0.35rem 0.45rem; cursor: help; }
.dashboard-wahl-frage { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0.35rem; white-space: nowrap; }

.filter-vorlagen { display: flex; align-items: center; gap: 0.15rem; }
.filter-vorlagen-liste { width: auto; max-width: 13rem; padding: 0.3rem 0.6rem; font-size: 0.85rem; border-radius: 999px; margin-right: 0.15rem; }
.filter-vorlagen-name { width: 12rem; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.filter-vorlagen-standard { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; margin: 0 0.4rem; white-space: nowrap; cursor: pointer; }
.filter-vorlagen-standard .fa-star, .filter-vorlage-standard.aktiv { color: var(--warning); }
.filter-vorlagen .btn-icon:hover { color: var(--text-primary); }
.filter-vorlagen .filter-vorlage-standard.aktiv:hover { color: var(--warning); }
.btn-gefahr { background: rgba(208, 59, 59, 0.3); border-color: rgba(208, 59, 59, 0.55); }
.btn-gefahr:hover { background: rgba(208, 59, 59, 0.45); }
.dashboard-leer { text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.dashboard-leer p { margin: 0; }

/* Die Karten füllen ihre Rasterzelle: Chart-Höhe folgt der eingestellten Widget-Höhe statt der
   festen 320/380 px der alten Seite. */
.dashboard-grid { min-height: 40px; margin: -8px; }
.dashboard-grid .grid-stack-item-content { display: flex; flex-direction: column; overflow: hidden; }
.dashboard-grid .grid-stack-item-content > .card,
.dashboard-grid .grid-stack-item-content > .metric-grid { flex: 1 1 auto; min-height: 0; min-width: 0; }
.dashboard-grid .card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.dashboard-grid .chart-wrap { flex: 1 1 auto; height: auto; min-height: 100px; }
/* Die Hoehe passt dashboardGrid.anpassen an die Kacheln an (Raster 70 px) - den Rest bis zur naechsten Rasterzeile
   fuellen die Kacheln, statt einen leeren Streifen zu lassen (seit 12.10.2026). */
.dashboard-grid .metric-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-auto-rows: minmax(max-content, auto); align-content: stretch; overflow: auto; }
/* Inhalt oben (seit 20.10.2026, vorher senkrecht zentriert): so steht das Symbol in jeder Kachel an derselben Stelle. */
.dashboard-grid .metric-card { display: flex; flex-direction: column; justify-content: flex-start; }


/* Hilfsraster beim Bearbeiten: eine Zelle je Spalte (1/12 Breite) und Rasterzeile (70 px =
   cellHeight in dashboard-grid.js) - zeigt, wie viel Platz noch frei ist. Die Linien liegen
   mitten in den Abständen zwischen den Widgets (Rand 8 px, siehe margin: -8px oben). */
/* Seit 20.10.2026 am 12-Spalten-Raster (gs-12) statt ab 901 px Fensterbreite: das Tablet hochkant bearbeitet im 12-Spalten-
   Raster, und ein breites Fenster mit schmalem Raster zeigt keine 12 Hilfsspalten über einer Spalte. */
.dashboard-grid-bearbeiten.gs-12 {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.14) 1px, transparent 1px);
  background-size: calc(100% / 12) 70px;
  background-color: rgba(255, 255, 255, 0.015);
  border-radius: var(--radius-main);
}
/* Ein-Spalten-Ansicht beim Bearbeiten (Handy, seit 20.10.2026): kurz sagen, was dort geht - Reihenfolge und Höhe. */
.dashboard-einspaltig-hinweis { display: none; margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.dashboard-page:has(.dashboard-grid-bearbeiten.gs-1) .dashboard-einspaltig-hinweis { display: block; }
.dashboard-grid-bearbeiten .grid-stack-item-content { outline: 1px dashed rgba(96, 165, 250, 0.55); border-radius: var(--radius-main); }
.dashboard-grid-bearbeiten .grid-stack-item-content > .card { border-top-left-radius: 0; border-top-right-radius: 0; }
.widget-leiste {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.4rem 0.3rem 0.7rem;
  background: rgba(0, 119, 255, 0.22);
  border-radius: var(--radius-main) var(--radius-main) 0 0;
  cursor: move; font-size: 0.85rem; flex-shrink: 0;
}
.widget-leiste span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  border: 2px dashed rgba(96, 165, 250, 0.7); border-radius: var(--radius-main); background: rgba(0, 119, 255, 0.08);
}
/* Finger (seit 20.10.2026): Griffe zum Größerziehen groß genug zum Treffen - Ecken 44 px, Ränder 22 px (gridstack: 20/10 px). */
/* Ecken ungedreht mit eigenem Diagonalpfeil als Maske in Textfarbe - gedreht ragte das 44-px-Feld auf dem Handy über den Rand. */
html[data-touch] .dashboard-grid-bearbeiten .grid-stack-item > :is(.ui-resizable-se, .ui-resizable-sw) {
  width: 44px; height: 44px; transform: none; filter: none; background: var(--text-secondary);
  -webkit-mask: var(--griff-pfeil) center / 24px no-repeat; mask: var(--griff-pfeil) center / 24px no-repeat; }
html[data-touch] .dashboard-grid-bearbeiten .grid-stack-item > .ui-resizable-se {
  --griff-pfeil: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="M5 5l10 10M5 5h5M5 5v5M15 15h-5M15 15v-5"/></svg>'); }
html[data-touch] .dashboard-grid-bearbeiten .grid-stack-item > .ui-resizable-sw {
  --griff-pfeil: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="M15 5L5 15M15 5h-5M15 5v5M5 15h5M5 15v-5"/></svg>'); }
html[data-touch] .dashboard-grid-bearbeiten .grid-stack-item > :is(.ui-resizable-e, .ui-resizable-w) { width: 22px; top: 50px; bottom: 50px; }
html[data-touch] .dashboard-grid-bearbeiten .grid-stack-item > .ui-resizable-s { height: 22px; left: 50px; right: 50px; }
/* Das mitgelieferte Größen-Symbol ist dunkel - auf dem dunklen Hintergrund hell darstellen. */
.dashboard-grid .ui-resizable-se { filter: invert(1); }

/* Chart-Karte (WidgetKarte.razor): Kopf mit Titel + Menü für Ansicht und Farbe */
.widget-karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.widget-karte-titel { min-width: 0; margin: 0; }
.widget-karte-titel h3 { overflow: hidden; text-overflow: ellipsis; }
.widget-menue-anker { position: relative; flex-shrink: 0; }
.widget-menue-knopf {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 2rem; padding: 0 0.6rem; border-radius: 8px;
  border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-secondary);
  cursor: pointer; font-size: 0.9rem;
}
.widget-menue-knopf:hover { background: var(--surface-strong); color: var(--text-primary); }
.widget-menue-pfeil { font-size: 0.7rem; }
.widget-menue-hintergrund { position: fixed; inset: 0; z-index: 60; }
.widget-menue {
  position: fixed; z-index: 61; width: 250px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); padding: 0.4rem;
}
.widget-menue-titel { margin: 0.4rem 0.5rem 0.25rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.widget-menue-eintrag {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.45rem 0.55rem; border: none; border-radius: 8px;
  background: transparent; color: var(--text-primary); font-size: 0.9rem; text-align: left; cursor: pointer;
}
.widget-menue-eintrag:hover { background: var(--surface-strong); }
.widget-menue-eintrag i:first-child { width: 1rem; color: var(--text-secondary); }
.widget-menue-eintrag.aktiv i:first-child { color: var(--color-primary); }
.widget-menue-eintrag span { flex: 1; }
.widget-menue-haken { font-size: 0.85rem; color: var(--color-primary); }
.widget-menue-hinweis { margin: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.widget-farben { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding: 0.15rem 0.4rem 0.4rem; }
.widget-farbe {
  aspect-ratio: 1; padding: 3px; border-radius: 50%; border: 2px solid transparent;
  background: transparent; cursor: pointer;
}
.widget-farbe span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.widget-farbe.aktiv { border-color: var(--text-primary); }
.widget-farbe-ampel { background: conic-gradient(#0ca30c 0 33%, #fab219 0 66%, #d03b3b 0); }

/* Tabellen-Ansicht */
.widget-tabelle-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 0.5rem; }
.widget-tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.widget-tabelle th {
  background: var(--table-head-bg); text-align: left; font-weight: 600;
  color: var(--text-secondary); padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-soft);
}
/* Kopf wie die Spalte: Zahlen rechts, Text (Datum, Speicher, Bezeichnung) links. */
.widget-tabelle th.zahl { text-align: right; }
/* Klebende Tabellenköpfe (seit 01.11.2026, Regel des Nutzers - gilt für jede Tabelle mit <thead>): der Kopf bleibt beim Scrollen stehen, bis seine
   Tabelle endet; darunter übernimmt der Kopf der nächsten. Die Höhe je Kopfzeile (--kopf-oben: unter der Kopfleiste bzw. am Rand des scrollenden
   Kastens, mehrzeilige Köpfe gestapelt) und das Mitschieben in Rahmen, die nur waagerecht scrollen (--kopf-y), setzt js/tabellenkopf.js an die
   Kopfzeilen. Keine eigenen sticky/top-Regeln für Tabellenköpfe - nur Hintergrund und Ebene (über festgehaltenen Spalten: 3, Ecken 4). */
thead > tr > th { position: sticky !important; top: var(--kopf-oben, 0px) !important; transform: translateY(var(--kopf-y, 0px)); z-index: 3; }
table[data-kopf-grund] > thead > tr > th { background-color: var(--popup-bg); }
@media print { thead > tr > th { position: static !important; transform: none !important; } }
.widget-tabelle td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--line-soft); }
.widget-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.widget-tabelle tbody tr:hover { background: var(--row-hover); }

/* Kalender-Ansicht (Tageswerte, eine Farbe von hell nach kräftig) */
.widget-kalender { display: grid; gap: 3px; margin-top: 0.9rem; align-content: start; flex: 1 1 auto; min-height: 0; overflow: auto; }
.widget-kalender-woche { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; overflow: visible; }
.widget-kalender-tag { font-size: 0.85rem; color: var(--text-secondary); align-self: center; }
.widget-kalender-zelle { display: block; min-height: 12px; border-radius: 3px; }
.widget-kalender-zelle.leer { background: transparent; outline: 1px solid var(--line-soft); outline-offset: -1px; }
.widget-kalender-legende { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-secondary); }
.widget-kalender-skala { width: 120px; height: 8px; border-radius: 4px; }

/* Kachel-Ansicht: großer Kennwert + Trend */
.widget-kachel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
.widget-kachel-wert { display: flex; flex-direction: column; gap: 0.25rem; }
.widget-kachel-zahl { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.widget-kachel-text { font-size: 0.85rem; color: var(--text-secondary); }
.widget-kachel-vergleich { font-size: 0.85rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.4rem; }
.widget-kachel-punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.widget-kachel-trend { position: relative; flex: 1 1 auto; min-height: 60px; }

.widget-auswahl-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 90; }
.widget-auswahl {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
  background: var(--background); border-left: 1px solid var(--border-soft);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  z-index: 91; display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem;
}
.widget-auswahl-kopf { display: flex; align-items: center; justify-content: space-between; }
.widget-auswahl-kopf h3 { margin: 0; font-size: 1rem; display: flex; gap: 0.5rem; align-items: center; }
.widget-auswahl-info { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.widget-auswahl-liste { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.widget-gruppe { border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface); }
.widget-gruppe summary { cursor: pointer; padding: 0.6rem 0.8rem; display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.widget-gruppe-zahl { color: var(--text-secondary); font-weight: 400; font-size: 0.85rem; }
.widget-eintrag { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.8rem; font-size: 0.9rem; cursor: pointer; }
.widget-eintrag:hover { background: var(--surface-strong); }
.widget-eintrag-titel { flex: 1; }
.widget-eintrag-nr { color: var(--text-secondary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* inpraxi-Kennzahlen (seit 15.10.2026): Zuordnung der Kassenspeicher und Kosten im Kartenmenü */
.widget-menue:has(.widget-inpraxi-zeile) { width: 320px; }
.widget-inpraxi-zeile { flex-wrap: wrap; row-gap: 0.25rem; cursor: default; }
.widget-inpraxi-wahl, .widget-inpraxi-zahl { flex: 1 1 100%; padding: 0.2rem 0.4rem; font-size: 0.85rem; }

/* ---------------------------------------------------------------------- */
/* Bestellungen                                                           */
/* ---------------------------------------------------------------------- */
.bestellungen-page { display: flex; flex-direction: column; gap: 1.5rem; }
.bestellungen-page > * { min-width: 0; }

/* Volle Breite wie das Dashboard (seit 02.10.2026). */
.bestellungen-page { gap: 0.75rem; }
.bestell-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; }
.bestell-filter-bar > .filter-field { flex: 0 0 auto; min-width: 0; }
.bestell-filter-bar > .filter-field:first-child { flex: 1 1 20rem; max-width: 30rem; }
.bestell-filter-bar > .filter-field-readonly { margin-left: auto; }
.bestell-filter-bar > .filter-field-readonly { flex: 0 1 16rem; }

/* Unten eine Tabelle (seit 05.10.2026, vorher zwei Karten nebeneinander): so hoch wie der Platz bis zum Fensterrand
   (rest-hoehe), die Tabelle scrollt innen (lange Lieferungen/Inventuren mit 80+ Artikeln), Spaltenköpfe bleiben stehen. */
.beleg-tabelle-karte { display: flex; flex-direction: column; max-height: 80vh; }
.beleg-tabelle-karte > .widget-tabelle-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.beleg-tabelle-karte .liefer-tabelle > thead th, .beleg-mehrere > thead th { background: var(--table-head-bg); z-index: 3; }
.liefer-tabelle tbody tr.liefer-kopf-neu td { color: var(--text-secondary); font-style: italic; }
/* Artikel einer Lieferung: Vergleichstage etwas abgesetzt, Artikel nur aus den Vergleichstagen blasser. */
.beleg-artikel th.beleg-vergleich, .beleg-artikel td.beleg-vergleich { color: var(--text-secondary); background: var(--surface-faint); }
.beleg-artikel td.beleg-vergleich.schnitt { font-weight: 600; color: var(--text-primary); }
.beleg-artikel tr.beleg-nur-vergleich td:not(.beleg-vergleich) { color: var(--text-secondary); }
.beleg-artikel tr.beleg-nur-vergleich .liefer-menge-eingabe { opacity: 0.85; }
.beleg-artikel th.beleg-vergleich .btn-link { font-weight: 600; }
/* Mehrere Lieferungen nebeneinander: je Lieferung eine Spaltengruppe mit Trennlinie. */
.beleg-mehrere { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.beleg-mehrere th, .beleg-mehrere td { padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.beleg-mehrere th { text-align: left; font-weight: 600; color: var(--text-secondary); }
.beleg-mehrere .zahl { text-align: right; }
.beleg-mehrere .beleg-lfg-kopf { text-align: center; color: var(--text-primary); border-left: 2px solid var(--border-soft); }
.beleg-mehrere .beleg-lfg-gesperrt { color: var(--bad-text); }
.beleg-mehrere .beleg-lfg-start, .bestell-tabelle-mehrere .beleg-lfg-start { border-left: 2px solid var(--border-soft); }
.beleg-mehrere .liefer-menge-eingabe { width: 5rem; }
/* Feste Spalten (seit 23.10.2026, Wunsch des Nutzers, alle Geräte): bei mehreren Lieferungen bleiben Artikel, Bezeichnung und
   Einheit (in der Erfassung oben dazu # und Lieferung) beim seitlichen Scrollen stehen. Den Abstand von links misst
   js/bestellungen.js (--fest-n an der Tabelle). Deckender Hintergrund, Tönung der Zeile (Pflicht, Hover, Eingabezeile)
   als Bild darüber - sonst liefen die Mengen sichtbar unter dem Artikel durch. */
.beleg-mehrere .beleg-fest, .bestell-tabelle-mehrere :is(td, th):is(.col-nr, .col-lfg, .col-artnr, .col-artnr + *, .col-einheit) {
  position: sticky; z-index: 2; background-color: var(--popup-bg);
  background-image: linear-gradient(var(--fest-toenung, transparent), var(--fest-toenung, transparent)); }
.beleg-mehrere .beleg-fest-1, .bestell-tabelle-mehrere :is(td, th).col-nr { left: var(--fest-1, 0px); }
/* Festgehaltene Spalten im Kopf: über dem übrigen Kopf und über den festen Zellen darunter (klebender Kopf, seit 01.11.2026). */
.beleg-mehrere > thead .beleg-fest, .bestell-tabelle-mehrere > thead th:is(.col-nr, .col-lfg, .col-artnr, .col-artnr + *, .col-einheit) { z-index: 4; }
.beleg-mehrere .beleg-fest-2, .bestell-tabelle-mehrere :is(td, th).col-lfg { left: var(--fest-2, 0px); }
.beleg-mehrere .beleg-fest-3, .bestell-tabelle-mehrere :is(td, th).col-artnr { left: var(--fest-3, 0px); }
.bestell-tabelle-mehrere :is(td, th).col-artnr + * { left: var(--fest-4, 0px); }
.bestell-tabelle-mehrere :is(td, th).col-einheit { left: var(--fest-5, 0px); }
.beleg-tabelle-karte .beleg-mehrere > thead th.beleg-fest { z-index: 4; background-color: var(--table-head-bg); }
/* Trennkante rechts der festen Spalten - ein leichter Schatten zeigt, dass darunter weitergescrollt wird. */
.beleg-mehrere .beleg-fest-ende, .bestell-tabelle-mehrere :is(.col-einheit, .col-artnr + :not(.col-einheit):not(:has(+ .col-einheit))) {
  box-shadow: inset -1px 0 0 var(--border-soft), 6px 0 6px -6px rgba(0, 0, 0, 0.35); }
.beleg-mehrere tbody tr:hover > .beleg-fest { --fest-toenung: var(--row-hover); }
.beleg-mehrere tr.beleg-pflicht:not(.erfuellt) > .beleg-fest { --fest-toenung: color-mix(in srgb, var(--warning) 14%, transparent); }
.bestell-tabelle-mehrere .bestell-neue-zeile > td { --fest-toenung: var(--surface-strong); }
/* Gruppenzeile: der Name wandert mit, statt links aus dem Bild zu laufen. */
.beleg-mehrere .beleg-gruppe-knopf { position: sticky; left: calc(var(--fest-1, 0px) + 0.45rem); width: auto; }
.beleg-mehrere .beleg-gruppe-zelle { cursor: pointer; }
/* Zuletzt erfasste Zeile (Eingabe oben): das Aufleuchten nur als Tönung - die Grundfarbe der festen Zellen bleibt deckend. */
@property --fest-toenung { syntax: "<color>"; inherits: true; initial-value: transparent; }
@keyframes bestell-neu-fest { from { --fest-toenung: rgba(0, 119, 255, 0.18); } to { --fest-toenung: transparent; } }
.bestell-tabelle-mehrere .bestell-zuletzt > :is(td, th):is(.col-nr, .col-lfg, .col-artnr, .col-artnr + *, .col-einheit) { animation: bestell-neu-fest 1.6s ease-out; }
/* Ansicht "Gruppen": auch die Gruppenliste links bleibt stehen; der Rahmen ist so breit wie die Tabelle, sonst endete
   "sticky" am rechten Rand des sichtbaren Bereichs. */
.bestell-scroll > .beleg-geteilt { min-width: 100%; width: max-content; }
.bestell-scroll > .beleg-geteilt > .beleg-gruppenliste { left: 0; background: var(--popup-bg); }
/* Die Gruppenliste ist kürzer als die Tabelle - darunter liefen die Mengen sichtbar durch. Eine deckende Fläche so breit wie
   Liste und Abstand, über die ganze Höhe (liegt unter der Liste, über den Zellen). */
.bestell-scroll > .beleg-geteilt::before { content: ""; flex: 0 0 13.75rem; margin-right: -14.5rem; align-self: stretch;
  position: sticky; left: 0; z-index: 4; background: var(--popup-bg); }
.bestell-scroll > .beleg-geteilt > .beleg-gruppenliste { z-index: 5; }
/* Handy und Tablet: lange Namen brechen um, statt die festen Spalten so breit zu machen, dass für Mengen kein Platz bleibt. */
html:not([data-geraet="desktop"]) .beleg-mehrere td.beleg-fest-2 { white-space: normal; }
html:not([data-geraet="desktop"]) .beleg-mehrere td.beleg-fest-2 .liefer-artikel { display: inline-block; width: 9rem; max-width: 9rem; text-align: left; overflow-wrap: anywhere; }
html[data-geraet="handy"] .beleg-mehrere td.beleg-fest-2 .liefer-artikel { width: 7.5rem; max-width: 7.5rem; font-size: 0.8rem; }
html[data-geraet="handy"] .beleg-mehrere .beleg-fest-1 .liefer-artikel-nr { font-size: 0.8rem; }
/* Zahlen-Pad (Touch): das Feld, seine Zeile und die Spalte der Lieferung sind markiert - man sieht sofort, welche
   Lieferung gerade erfasst wird. */
html[data-touch] tr.zahlenpad-zeile > td { background-color: color-mix(in srgb, var(--color-primary) 8%, transparent); }
html[data-touch] tr.zahlenpad-zeile > .beleg-fest,
html[data-touch] .bestell-tabelle-mehrere tr.zahlenpad-zeile > td:is(.col-nr, .col-lfg, .col-artnr, .col-artnr + *, .col-einheit) {
  background-color: var(--popup-bg); --fest-toenung: color-mix(in srgb, var(--color-primary) 14%, transparent); font-weight: 600; }
html[data-touch] td.zahlenpad-zelle { background-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-primary); }
html[data-touch] th.zahlenpad-spalte, html[data-touch] th.zahlenpad-spalte :is(.sort-knopf, .sort-symbol) { color: #fff; }
html[data-touch] th.zahlenpad-spalte { background-color: var(--color-primary) !important; }
html[data-touch] th.zahlenpad-spalte .liefer-nr { background: #fff; color: var(--color-primary); }
/* Mehrere Lieferungen: Köpfe dürfen umbrechen, damit Preis und Wert auch bei 4+ Lieferungen sichtbar bleiben. */
.bestell-tabelle-mehrere th { white-space: normal; }
/* Eingeschränkte Artikel (Bestellung bzw. Artikelauswahl, seit 05.10.2026) unter der Überschrift der Erfassung. */
.bestell-artikel-hinweis { margin: 0.15rem 0 0.1rem; font-size: 0.85rem; color: var(--text-secondary); display: flex; gap: 0.4rem; align-items: center; }
.bestell-tabelle-mehrere .col-menge { width: auto; }
.bestell-tabelle-mehrere .col-menge input { width: 4.5rem; }
.liefer-tabelle .zahl, .liefer-tabelle td.zahl { white-space: nowrap; }

.bestell-tabelle { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.bestell-tabelle th {
  text-align: left;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border-soft);
}
.bestell-tabelle td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.bestell-tabelle .col-nr { width: 2.5rem; color: var(--text-secondary); }
.bestell-tabelle .col-menge { width: 7rem; text-align: right; white-space: nowrap; }
.bestell-tabelle .col-zahl { text-align: right; white-space: nowrap; width: 1%; }
.bestell-tabelle .col-lfg { width: 3rem; }
.bestell-tabelle .col-artnr { width: 9rem; }
.bestell-tabelle tfoot td { padding: 0.5rem 0.6rem; font-weight: 600; border-top: 1px solid var(--border-soft); }
.bestell-tabelle .col-datum { width: 8rem; }
.bestell-tabelle .col-aktion { width: 2.5rem; }
.bestell-tabelle .col-menge input { text-align: right; }

.bestell-tabelle-kompakt td, .bestell-tabelle-kompakt th { padding: 0.4rem 0.5rem; font-size: 0.9rem; }

/* Aktive Eingabezeile am Tabellenende - leicht abgesetzt, damit auf einen Blick klar ist,
   wo die naechste Eingabe stattfindet (sie behaelt immer denselben Platz direkt unter der
   zuletzt erfassten Position, siehe Bestellungen.razor). */
.bestell-neue-zeile td { background: var(--surface-strong); }
.bestell-neue-zeile .form-input { padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.bestell-artikelname-zelle { color: var(--text-secondary); font-size: 0.9rem; }

.btn-icon {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-main);
}
.btn-icon:hover { background: var(--hover); color: var(--error-strong); }

.btn-link {
  border: none;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-link:hover { text-decoration: underline; }

.bestell-hinweis {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  color: var(--warning);
  font-size: 0.9rem;
}

.bestell-aktionen { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Artikelsuche-Modal (zentriertes Overlay statt riesigem <select>-Dropdown -
   siehe Components/Bestellungen/ArtikelSucheModal.razor)                 */
/* ---------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1rem 1rem;
}
.modal-box {
  width: 100%;
  max-width: 36rem;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-main);
  border: 1px solid var(--border-soft);
  background: var(--popup-bg);
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  padding: 1.25rem;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.modal-header h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.modal-suchfeld { margin-bottom: 0.75rem; }

.modal-treffer-liste { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.modal-treffer {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-main);
  cursor: pointer;
  font-size: 0.9rem;
}
.modal-treffer:hover, .modal-treffer-aktiv { background: var(--surface-strong); }
.modal-treffer-nr { color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.modal-treffer-name { flex: 1; }
.modal-treffer-wg { color: var(--text-secondary); font-size: 0.85rem; flex-shrink: 0; }
.modal-treffer-hinweis { color: var(--text-secondary); font-size: 0.85rem; padding: 0.5rem 0.6rem 0; margin: 0; }

.modal-fusszeile { margin: 0.75rem 0 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary); }

/* ---------------------------------------------------------------------- */
/* Login-Seite                                                            */
/* ---------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 2.5rem 1.5rem;
}
.login-card {
  margin: auto;
  width: 100%;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1.5rem;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
  overflow: hidden;
}
@media (min-width: 1024px) { .login-card { grid-template-columns: 1fr 1fr; min-height: min(40rem, calc(100vh - 5rem)); } }

.login-sidebar {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3rem 2.5rem 2rem;
  text-align: center;
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 25%, transparent), transparent 60%), var(--background);
}
@media (min-width: 1024px) { .login-sidebar { display: flex; } }

.login-sidebar-icon {
  border: none;
  padding: 0;
  height: 3rem; width: 3rem;
  border-radius: var(--radius-main);
  background: rgba(255,255,255,0.1);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.login-logo { height: 3.5rem; width: auto; display: block; }
/* Logo groß in der Mitte der linken Seite, darunter der Schriftzug (seit 09.10.2026). */
.login-marke { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; }
.login-marke .login-logo-link { display: grid; place-items: center; width: clamp(12rem, 30vh, 17.5rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, transparent 70%); }
.login-marke .login-logo { height: clamp(9rem, 22vh, 13.5rem); filter: drop-shadow(0 0.75rem 1.5rem rgba(0,0,0,0.35)); transition: transform 0.2s ease; }
.login-marke .login-logo-link:hover .login-logo { transform: scale(1.03); }
.login-sidebar-text { margin-top: 2rem; }
.login-sidebar-title { font-size: 1.3rem; font-weight: 600; }
.login-marke .login-sidebar-title { font-size: clamp(2.2rem, 3.2vw, 2.9rem); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; }
/* Schmale Bildschirme: die linke Seite fehlt - Logo kompakt über dem Formular. */
.login-marke-mobil { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.75rem; }
.login-marke-mobil img { height: 3.5rem; width: auto; }
.login-marke-mobil span { font-size: 1.6rem; font-weight: 700; }
@media (min-width: 1024px) { .login-marke-mobil { display: none; } }
.login-sidebar-tagline { margin-top: 0.5rem; color: rgba(255,255,255,0.7); font-size: 0.9rem; max-width: 22rem; }
.login-sidebar-footer { font-size: 0.85rem; color: rgba(255,255,255,0.6); text-decoration: none; }
a.login-sidebar-footer:hover { color: rgba(255,255,255,0.9); }

.login-form-section { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.login-form-wrap { width: 100%; max-width: 24rem; }
.login-headline { font-size: 1.5rem; font-weight: 600; }
.login-subline { color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.25rem; }
.login-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* 404                                                                    */
/* ---------------------------------------------------------------------- */
.not-found-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.not-found-code { font-size: 4rem; font-weight: 700; color: var(--color-primary); }
.not-found-text { color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   Seite /datenzugriff (seit 2026-09-25; seit 2026-10-09 nur ohne Adminoberfläche)
   --------------------------------------------------------------------------- */
.datenzugriff-page { display: flex; flex-direction: column; gap: 0.75rem; }
.modus-auswahl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.dz-erklaerung { margin: 0.5rem 0; font-size: 0.9rem; }
.dz-abweichung { color: var(--bad-text); font-weight: 600; }
.verbindungen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 900px) { .verbindungen-raster { grid-template-columns: 1fr; } }
.verbindung-block {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1.1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface);
}
.verbindung-block h3 { margin: 0 0 0.5rem; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.verbindung-block .form-label { margin: 0.4rem 0 0; }
.verbindung-block .status-box { margin: 0.6rem 0 0; }
.verbindung-speichern { margin-top: 1.25rem; }
.dz-abruf { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.dz-abruf .form-label { margin-bottom: 0.5rem; }
.mart-status { display: grid; gap: 0.45rem; margin: 0.4rem 0 0.8rem; }
.mart-status > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem; align-items: baseline; font-size: 0.9rem; }
.mart-status .form-label { margin: 0; }
/* Handy (seit 18.10.2026): Beschriftung über dem Wert, lange Datenbanknamen brechen um statt überzustehen. */
html[data-geraet="handy"] .mart-status > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
html[data-geraet="handy"] .mart-status > div > span { min-width: 0; overflow-wrap: anywhere; }
/* Mobil-Runde 2, 19.10.2026: Mailversand – lange Pfade (Postausgang) brechen auf Handy und Tablet um statt überzustehen. */
html:not([data-geraet="desktop"]) .dz-erklaerung { overflow-wrap: anywhere; }
/* Erster Admin (seit 07.11.2026): lange E-Mail-Adressen und das Startpasswort brechen auf Handy und Tablet um. */
html:not([data-geraet="desktop"]) .erster-admin-karte .status-box > span { min-width: 0; overflow-wrap: anywhere; }
.mart-balken { grid-column: 2; height: 6px; border-radius: 3px; background: var(--surface-strong); overflow: hidden; margin-top: 0.3rem; }
.mart-balken > div { height: 100%; background: #3987e5; transition: width 0.4s; }
.mart-neu { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.mart-neu > .datum-wahl { width: 24rem; max-width: 100%; }
/* Handy (seit 18.10.2026): Von – Bis (seit 30.10.2026 DatumWahl) über die ganze Breite, der Knopf darunter. */
html[data-geraet="handy"] .mart-neu { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
html[data-geraet="handy"] .mart-neu > .datum-wahl { width: 100%; }
html[data-geraet="handy"] .bestell-aktionen > .btn { white-space: normal; text-align: left; }
.dz-dialog { width: min(640px, 94vw); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.dz-dialog p { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.dz-admin { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); }

/* Aktionszeile und Meldung unter Formularen (früher Seite /datenzugriff, heute Profil) */
.verbindung-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.dz-speicher-meldung { font-size: 0.9rem; color: var(--text-secondary); }

/* ---------------------------------------------------------------------- */
/* Benutzerverwaltung, Rollen, Profil                                     */
/* ---------------------------------------------------------------------- */
.verwaltung-seite { display: flex; flex-direction: column; gap: 0.75rem; }
.verwaltung-seite > * { min-width: 0; }
.verwaltung-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 900px) { .verwaltung-raster { grid-template-columns: 1fr; } }
.verwaltung-raster .card { display: flex; flex-direction: column; gap: 0.35rem; }
.verwaltung-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.verwaltung-kopf h2, .verwaltung-seite h2, .statistik-page .verwaltung-kopf h2 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; }
.verwaltung-tabelle { margin-top: 0.6rem; }
.verwaltung-tabelle td { vertical-align: middle; }

.avatar {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  font-size: 0.85rem; font-weight: 700; color: #fff;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-gross { width: 5rem; height: 5rem; font-size: 1.6rem; }

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.85rem;
  background: var(--surface-strong); border: 1px solid var(--border-soft); color: var(--text-primary);
}
.chip-gut { border-color: rgba(12, 163, 12, 0.5); }
.chip-kritisch { border-color: rgba(208, 59, 59, 0.6); color: var(--error-text); }
.status-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #64748b; }
.status-punkt.an { background: var(--good); box-shadow: 0 0 0 3px rgba(12, 163, 12, 0.2); }

.verwaltung-panel { width: min(520px, 100vw); }
.verwaltung-panel-breit { width: min(640px, 100vw); }
.verwaltung-panel-inhalt { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; padding-right: 0.25rem; }
/* Kein Eintrag darf schrumpfen - sonst drückt ein langes Formular Listen mit eigener Scrollleiste (Rollen, Lizenz) auf 0 Höhe. */
.verwaltung-panel-inhalt > * { flex-shrink: 0; }
.verwaltung-panel-inhalt .form-label { margin-top: 0.5rem; margin-bottom: 0; }
.verwaltung-panel-fuss { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.auswahl-liste { border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface); max-height: 220px; overflow-y: auto; }
.auswahl-liste-hoch { max-height: 320px; }
.eingabe-mit-knopf { display: flex; gap: 0.5rem; }
.eingabe-mit-knopf .form-input { flex: 1; font-family: ui-monospace, Consolas, monospace; }
/* Rechte-Editor (seit 15.10.2026): eingeklappte Abschnitte mit dem Stand im Kopf, je Recht eine Zeile -
   Titel links (Erklärung klein, einzeilig, ganz im Tooltip), Auswahl rechts in einheitlicher Breite. */
.rechte-editor { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.rechte-legende { margin: 0 0 0.1rem; }
.rechte-ueberschrift { margin: 1rem 0 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; }
.rechte-block { border: 1px solid var(--border-soft); border-radius: var(--radius-main); padding: 0; margin: 0; min-width: 0; background: var(--surface); }
.rechte-block > legend { float: left; width: 100%; padding: 0; margin: 0; }
.rechte-block > legend + * { clear: both; }
.rechte-block:disabled > :not(legend) { opacity: 0.55; }
.rechte-kopf, .rechte-teil-kopf { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rechte-kopf { padding: 0.45rem 0.7rem; font-size: 0.92rem; border-radius: var(--radius-main); }
.rechte-kopf:hover, .rechte-teil-kopf:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.rechte-kopf[aria-expanded="true"] { border-bottom: 1px solid var(--line-soft); border-radius: var(--radius-main) var(--radius-main) 0 0; }
.rechte-kopf > .fa-solid:not(.rechte-kopf-pfeil) { color: var(--color-primary); width: 1rem; text-align: center; }
.rechte-kopf-pfeil { width: 0.8rem; font-size: 0.8rem; color: var(--text-secondary); }
.rechte-kopf-titel { font-weight: 600; white-space: nowrap; }
.rechte-kopf-kurz { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recht-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem); align-items: center; gap: 0.15rem 0.75rem; padding: 0.3rem 0.7rem; }
.recht-zeile + .recht-zeile, .rechte-teil + .recht-zeile, .recht-zeile-unter + .recht-zeile { border-top: 1px solid var(--line-soft); }
.recht-zeile-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.9rem; }
.recht-zeile-text small { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recht-zeile .form-input { width: 100%; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.recht-zeile-unter { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0 0.7rem 0.35rem; }
.rechte-teil { border-top: 1px solid var(--line-soft); }
.rechte-teil-kopf { padding: 0.35rem 0.7rem; font-size: 0.9rem; }
.rechte-teil > :not(.rechte-teil-kopf) { margin-left: 1.5rem; margin-right: 0.7rem; }
.rechte-teil > .recht-zeile { margin: 0 0 0 0.8rem; }
.rechte-teil > .formular-hinweis { margin-bottom: 0.3rem; }
.rechte-teil > :last-child:not(.rechte-teil-kopf) { margin-bottom: 0.45rem; }
.rechte-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); padding: 0.2rem 0.3rem 0.35rem; }
.rechte-liste .widget-eintrag { padding: 0.25rem 0.45rem; min-width: 0; }
.rechte-liste .widget-eintrag-titel { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rechte-liste .widget-eintrag-titel small { font-size: 0.78rem; color: var(--text-secondary); }
@media (max-width: 600px) {
    .recht-zeile { grid-template-columns: 1fr; }
    .recht-zeile-text small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
}
.chip-eigene-rechte { border-color: var(--accent, #2563eb); }
.verwaltung-panel .anmeldezeit-bereich { margin: 0 0.7rem 0.35rem 1.6rem; }
.rechte-gruppe-auf { flex: 1 1 auto; display: flex; align-items: center; gap: 0.45rem; background: none; border: 0; padding: 0.1rem 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rechte-gruppe-auf i { width: 0.8rem; font-size: 0.85rem; color: var(--text-secondary); }
.rechte-anmeldezeit { margin-top: 0.2rem; }
.rechte-knoepfe { display: flex; gap: 0.4rem; padding: 0.2rem 0 0.3rem; }
.rechte-knoepfe .btn { padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.formular-hinweis { font-size: 0.85rem; color: var(--text-secondary); font-weight: 400; margin: 0; }
.versteckt { display: none; }
.profil-bild-zeile { display: flex; align-items: center; gap: 1rem; margin: 0.75rem 0; }
.profil-bild-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.profil-bild-knoepfe label.btn { cursor: pointer; }

.nav-abschnitt { margin: 0.7rem 0.75rem 0.15rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
/* Menü zusammenklappbar (seit 14.10.2026, wie GoecomDB): Abschnitte als <details>, der Pfeil dreht sich beim Zuklappen. */
.nav-gruppe > summary { list-style: none; cursor: pointer; }
.nav-gruppe > summary::-webkit-details-marker { display: none; }
summary.nav-abschnitt { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-radius: var(--radius-main); padding: 0.15rem 0; }
summary.nav-abschnitt:hover { color: var(--text-primary); }
.nav-auf { font-size: 0.7em; transition: transform 0.15s; }
details:not([open]) > summary .nav-auf { transform: rotate(-90deg); }
/* Untergruppe im Abschnitt (seit 23.10.2026, z. B. Zusatzprogramme → Erweitertes Packwesen): Kopf wie ein Menüpunkt mit Pfeil, die Seiten
   darunter eingerückt. Im auf Symbole eingeklappten Menü ohne Einrückung (js/navmenu.js klappt sie dort auf). */
.nav-untergruppe > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.nav-untergruppe > summary::-webkit-details-marker { display: none; }
.nav-unter-punkte { margin-left: 1.1rem; padding-left: 0.35rem; border-left: 1px solid var(--border-soft); }
.topbar-benutzer { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.6rem 0.25rem 0.3rem; border-radius: 999px; color: var(--text-primary); text-decoration: none; }
.topbar-benutzer:hover { background: var(--surface-strong); }
.topbar-benutzer-name { font-size: 0.9rem; font-weight: 600; }
@media (max-width: 600px) { .topbar-benutzer-name { display: none; } }

/* Datenzugriff: Abrufart der Programmierschnittstelle */
.chip-sprung { border-color: rgba(25, 158, 112, 0.7); background: rgba(25, 158, 112, 0.18); }
.chip-selektion { border-color: rgba(201, 133, 0, 0.7); background: rgba(201, 133, 0, 0.18); }

/* Kurze Rückmeldung nach einem Export (oben rechts in der Chart-Karte) */
.widget-export-meldung { font-size: 0.85rem; color: var(--text-secondary); align-self: center; white-space: nowrap; }


/* Kassenspeicher-Auswahl im Chart-Menü */
.widget-menue-schalter { display: flex; gap: 0.35rem; padding: 0 0.5rem 0.35rem; }
.widget-menue-schalter .btn { padding: 0.25rem 0.7rem; font-size: 0.85rem; }
.widget-menue .widget-eintrag { padding: 0.3rem 0.55rem; }
.widget-auswahl-zeile { display: flex; align-items: center; gap: 0.35rem; }
.widget-speicher-punkt { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }

/* Filialauswahl (Filterleiste + Dialog) */
.filter-field-auswahl { min-width: 16rem; }
.filter-auswahl-zeile { display: flex; gap: 0.3rem; align-items: center; }
.filter-auswahl-knopf { display: flex; align-items: center; gap: 0.5rem; text-align: left; cursor: pointer; width: 100%; overflow: hidden; }
.filter-auswahl-knopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-auswahl-knopf i { color: var(--text-secondary); }
.filialauswahl {
  /* Seit nur noch Nr. und Bezeichnung in der Liste stehen: mittig, höchstens ~1060 px breit statt bildschirmfüllend. */
  position: fixed; z-index: 91; top: 5vh; bottom: 5vh; left: 50%; transform: translateX(-50%);
  width: min(66rem, 94vw); display: flex; flex-direction: column;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.filialauswahl-kopf { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1.2rem 0.6rem; border-bottom: 1px solid var(--border-soft); }
.filialauswahl-kopf h3 { margin: 0; }
.filialauswahl-inhalt { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(22rem, 1.1fr) 1fr; }
.filialauswahl-regeln { overflow-y: auto; padding: 0.8rem 1rem; border-right: 1px solid var(--border-soft); }
.filialauswahl-ergebnis { display: flex; flex-direction: column; min-height: 0; padding: 0.8rem 1rem; }
.filialauswahl-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.filialauswahl .chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid var(--border-soft);
  background: var(--surface-strong); color: var(--text-primary); font-size: 0.85rem; cursor: pointer; }
.filialauswahl .chip:hover { border-color: #3987e5; }
.filialauswahl .chip-leise { background: transparent; color: var(--text-secondary); }
.filialauswahl .chip-aktiv { background: rgba(57, 135, 229, 0.18); border-color: rgba(57, 135, 229, 0.6); cursor: default; }
.filialauswahl .chip-gespeichert { padding: 0; cursor: default; }
.filialauswahl .chip-text { background: none; border: none; color: inherit; padding: 0.25rem 0.2rem 0.25rem 0.65rem; cursor: pointer; font-size: 0.85rem; }
.filialauswahl .chip-x { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0 0.45rem 0 0.1rem; font-size: 0.85rem; }
.filialauswahl .chip-x:hover { color: #e66767; }
.filialauswahl-block { border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.6rem; background: var(--surface-faint); }
.filialauswahl-oder, .filialauswahl-und { text-align: center; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: #c98500; margin: 0.35rem 0; }
.filialauswahl-und { color: #199e70; }
.filialauswahl-regel { border-radius: 8px; background: var(--surface-strong); padding: 0.5rem; }
.filialauswahl-regel-kopf { display: flex; gap: 0.4rem; align-items: center; }
.filialauswahl-regel-kopf select { flex: 1 1 auto; }
.filialauswahl-regel-kopf .filialauswahl-ist { flex: 0 0 7.5rem; }
.filialauswahl-werte-gewaehlt { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.45rem; }
.filialauswahl-werte { margin-top: 0.45rem; }
.filialauswahl-werte .auswahl-liste { max-height: 14rem; overflow-y: auto; margin-top: 0.35rem; }
.widget-eintrag-zahl { margin-left: auto; color: var(--text-secondary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.filialauswahl-block-fuss { display: flex; gap: 0.3rem; margin-top: 0.45rem; }
.filialauswahl-hinweis { color: var(--text-secondary); font-size: 0.85rem; }
.btn-klein { padding: 0.2rem 0.55rem; font-size: 0.85rem; }
.filialauswahl-ergebnis-kopf { display: flex; gap: 0.6rem; align-items: center; }
.filialauswahl-ergebnis-kopf input.form-input { flex: 1 1 auto; }
.filialauswahl-nur { white-space: nowrap; }
/* Spalten: Haken, Nr., Bezeichnung, "nur diese" (bis 15.10.2026 als style im Dialog - das Handy braucht eigene). */
.filialauswahl-tabelle-kopf, .filialauswahl-zeile {
  display: grid; grid-template-columns: 1.6rem minmax(4.5rem, 7rem) minmax(8rem, 1fr) 5.2rem; gap: 0.4rem; align-items: center; }
.filialauswahl-tabelle-kopf { font-size: 0.85rem; color: var(--text-secondary); padding: 0.55rem 0.4rem 0.3rem; border-bottom: 1px solid var(--border-soft); }
.filialauswahl-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.filialauswahl-zeile { height: 31px; padding: 0 0.4rem; font-size: 0.85rem; border-bottom: 1px solid var(--row-hover); }
.filialauswahl-zeile.gewaehlt { background: rgba(57, 135, 229, 0.1); }
/* Mehrfachauswahl (seit 07.10.2026): ganze Zeile klickbar, Shift-Klick markiert keinen Text. Das Kästchen nimmt keine
   Mausklicks an (die Zeile schaltet), bleibt aber per Tab/Leertaste bedienbar - dessen Klick läuft zur Zeile durch. */
.mehrfachwahl { cursor: pointer; user-select: none; -webkit-user-select: none; }
.mehrfachwahl > input[type=checkbox] { pointer-events: none; }
.filialauswahl-zeile .btn-klein { visibility: hidden; }
.filialauswahl-zeile:hover .btn-klein { visibility: visible; }
.filialauswahl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filialauswahl-fuss { display: flex; gap: 0.5rem; align-items: center; padding: 0.7rem 1.2rem; border-top: 1px solid var(--border-soft); }
.filialauswahl-fuss-platz { flex: 1 1 auto; }
.filialauswahl-name-eingabe { max-width: 16rem; }
@media (max-width: 900px) { .filialauswahl-inhalt { grid-template-columns: 1fr; } .filialauswahl-regeln { border-right: none; max-height: 40vh; } }
/* Mobil-Korrekturen 19.10.2026: Auswahldialog (Kunden, Filialen, Artikel) auf Handy und Tablet. Vorher teilten sich
   Regeln (34vh), Suche und ein dreizeiliger Fuß die Höhe, die Liste behielt zwei Zeilen und die Chips lagen unter dem
   Suchfeld. Jetzt: Handy und Tablet hoch eine Spalte - Schnellauswahl und gespeicherte Auswahlen als wischbare
   Chip-Zeile, die Vorauswahl nach Regeln klappt über den ersten Chip auf (dann nur sie, ein Scrollbereich), Name zum
   Speichern erst über die Diskette; der ganze übrige Platz gehört der Liste. Handy quer: links Suche, Chips und Regeln,
   rechts die Liste in voller Höhe. Tablet quer und PC wie bisher. Die Schalter gibt es am PC nicht (display: none). */
.filialauswahl .filialauswahl-vorauswahl-knopf, .filialauswahl .filialauswahl-speichern-knopf { display: none; }
.filialauswahl-speichern { display: contents; }
.filialauswahl-zahl { padding: 0 0.4rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: color-mix(in srgb, var(--color-primary) 25%, transparent); }
/* Vollbild ohne Rahmen; Spalten dürfen schmaler als ihr Inhalt werden (sonst 430 px breit). */
html[data-geraet="handy"] .filialauswahl { top: 0; bottom: 0; left: 0; width: 100%; transform: none; border: 0; border-radius: 0; }
@media (orientation: portrait) { html[data-geraet="tablet"] .filialauswahl { top: 2.5dvh; bottom: 2.5dvh; } }
html[data-geraet="handy"] .filialauswahl-kopf { padding: 0.45rem 0.5rem 0.4rem 0.75rem; align-items: center; }
html[data-geraet="handy"] .filialauswahl-kopf h3 { font-size: 1.1rem; }
html[data-touch] .filialauswahl-zeile { height: 44px; }
html[data-touch] .filialauswahl .chip { min-height: 44px; }
html[data-touch] .filialauswahl .chip-gespeichert > button { align-self: stretch; }
html[data-touch] .filialauswahl .chip-x { min-width: 40px; }
html[data-touch] .filialauswahl :is(.btn-klein, select.form-input, input.form-input, .filialauswahl-nur) { min-height: 44px; }
html[data-touch] .filialauswahl-werte .widget-eintrag { min-height: 44px; }
/* "nur diese" erscheint nur beim Darüberfahren mit der Maus - auf dem Handy die Spalte weglassen, sonst 370 px breit. */
html[data-geraet="handy"] :is(.filialauswahl-tabelle-kopf, .filialauswahl-zeile) { grid-template-columns: 1.6rem 4.5rem minmax(0, 1fr); }
html[data-geraet="handy"] :is(.filialauswahl-tabelle-kopf, .filialauswahl-zeile) > :nth-child(4) { display: none; }
html[data-geraet="handy"] .filialauswahl-regel-kopf select { min-width: 0; }
html[data-geraet="handy"] .filialauswahl-regel-kopf .filialauswahl-ist { flex: 0 1 6.5rem; }

@media (orientation: portrait) {
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl .filialauswahl-vorauswahl-knopf,
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl .filialauswahl-speichern-knopf { display: inline-flex; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-inhalt { display: flex; flex-direction: column; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-regeln { flex: 0 0 auto; max-height: none; overflow: visible; border-right: 0; padding: 0.5rem 0 0; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-schnell {
    display: flex; gap: 0.4rem; overflow-x: auto; padding: 0 0.75rem 0.5rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-schnell::-webkit-scrollbar { display: none; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-schnell > .widget-menue-titel { display: none; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-schnell > .filialauswahl-chips { display: contents; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-schnell .chip { flex: none; white-space: nowrap; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-inhalt:not(.vorauswahl-offen) .filialauswahl-vorauswahl { display: none; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-vorauswahl { padding: 0 0.75rem 0.75rem; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-vorauswahl > .widget-menue-titel:first-child { display: none; }
  /* Vorauswahl offen: die Regeln bekommen den ganzen Platz und scrollen allein (auch die Wertelisten ohne eigenen
     Scrollbalken), die Chip-Zeile mit dem Schalter zum Zuklappen bleibt oben stehen. */
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .vorauswahl-offen .filialauswahl-regeln { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .vorauswahl-offen .filialauswahl-schnell { position: sticky; top: 0; z-index: 1; background: var(--popup-bg); }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .vorauswahl-offen .filialauswahl-ergebnis { display: none; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-werte .auswahl-liste { max-height: none; overflow: visible; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-ergebnis { flex: 1 1 auto; min-height: 0; padding: 0 0.75rem 0.25rem; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-ergebnis-kopf { gap: 0.5rem; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-ergebnis-kopf input.form-input { flex: 1 1 auto; min-width: 0; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-nur { padding: 0 0.2rem; gap: 0.4rem; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-ergebnis > .filialauswahl-hinweis { margin: 0.3rem 0 0; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-fuss { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom)); }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-fuss-platz { display: none; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-fuss > .btn:not(.filialauswahl-speichern-knopf) {
    flex: 1 1 auto; min-width: 0; justify-content: center; padding-inline: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl .filialauswahl-speichern-knopf { flex: none; width: 44px; padding: 0; justify-content: center; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-fuss > .filialauswahl-gleiche { flex-basis: 100%; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-speichern:not(.offen) { display: none; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-speichern.offen { display: flex; flex: 1 1 100%; gap: 0.5rem; }
  html:is([data-geraet="handy"], [data-geraet="tablet"]) .filialauswahl-name-eingabe { flex: 1 1 auto; min-width: 0; max-width: none; }
}
/* Wenig Höhe (Tastatur eingeblendet, kleines Handy): Untertitel und Spaltenköpfe weglassen. */
@media (orientation: portrait) and (max-height: 560px) {
  html[data-geraet="handy"] :is(.filialauswahl-kopf .card-subtitle, .filialauswahl-tabelle-kopf) { display: none; }
}
@media (orientation: landscape) {
  html[data-geraet="handy"] .filialauswahl .filialauswahl-vorauswahl-knopf,
  html[data-geraet="handy"] .filialauswahl .filialauswahl-speichern-knopf { display: inline-flex; }
  html[data-geraet="handy"] .filialauswahl-kopf { padding-block: 0.25rem; }
  html[data-geraet="handy"] :is(.filialauswahl-kopf .card-subtitle, .filialauswahl-tabelle-kopf) { display: none; }
  html[data-geraet="handy"] .filialauswahl-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  html[data-geraet="handy"] .filialauswahl-ergebnis { display: contents; }
  html[data-geraet="handy"] .filialauswahl-ergebnis-kopf { grid-column: 1; grid-row: 1; flex-wrap: wrap; gap: 0 0.5rem; padding: 0.4rem 0.75rem 0; }
  html[data-geraet="handy"] .filialauswahl-ergebnis-kopf input.form-input { flex: 1 1 100%; min-width: 0; }
  html[data-geraet="handy"] .vorauswahl-offen .filialauswahl-schnell { position: sticky; top: 0; z-index: 1; background: var(--popup-bg); }
  html[data-geraet="handy"] .filialauswahl-regeln { grid-column: 1; grid-row: 2; max-height: none; overflow-y: auto; overscroll-behavior: contain; border-right: 0; padding: 0.3rem 0 0.5rem; }
  html[data-geraet="handy"] .filialauswahl-ergebnis > .filialauswahl-hinweis { grid-column: 1; grid-row: 3; margin: 0; padding: 0 0.75rem 0.3rem; }
  html[data-geraet="handy"] .filialauswahl-liste { grid-column: 2; grid-row: 1 / 4; border-left: 1px solid var(--border-soft); padding: 0 0.5rem; }
  html[data-geraet="handy"] .filialauswahl-schnell {
    display: flex; gap: 0.4rem; overflow-x: auto; padding: 0 0.75rem 0.4rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  html[data-geraet="handy"] .filialauswahl-schnell::-webkit-scrollbar { display: none; }
  html[data-geraet="handy"] .filialauswahl-schnell > .widget-menue-titel, html[data-geraet="handy"] .filialauswahl-vorauswahl > .widget-menue-titel:first-child { display: none; }
  html[data-geraet="handy"] .filialauswahl-schnell > .filialauswahl-chips { display: contents; }
  html[data-geraet="handy"] .filialauswahl-schnell .chip { flex: none; white-space: nowrap; }
  html[data-geraet="handy"] .filialauswahl-vorauswahl { padding: 0 0.75rem; }
  html[data-geraet="handy"] .filialauswahl-inhalt:not(.vorauswahl-offen) .filialauswahl-vorauswahl { display: none; }
  html[data-geraet="handy"] .filialauswahl-fuss { flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem 0.75rem calc(0.35rem + env(safe-area-inset-bottom)); }
  html[data-geraet="handy"] .filialauswahl-fuss > .btn { white-space: nowrap; }
  html[data-geraet="handy"] .filialauswahl .filialauswahl-speichern-knopf { width: 44px; padding: 0; justify-content: center; }
  html[data-geraet="handy"] .filialauswahl-speichern:not(.offen) { display: none; }
  html[data-geraet="handy"] .filialauswahl-speichern.offen { display: flex; flex: 1 1 100%; gap: 0.5rem; }
  html[data-geraet="handy"] .filialauswahl-name-eingabe { flex: 1 1 auto; min-width: 0; max-width: none; }
}

/* Verdichtung (Seite Datenzugriff) */

/* ---------------------------------------------------------------------- */
/* Fokusring in der Primärfarbe für alle Grundtöne (seit 14.10.2026): Tastaturbedienung sichtbar, Maus-Klicks ohne Ring. */
.btn:focus-visible, .btn-icon:focus-visible, .thema-knopf:focus-visible, .nav-link:focus-visible, .reiter button:focus-visible,
.reiter > a:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Umschalter (seit 18.10.2026): Rahmen nach innen - die Leiste schneidet mit overflow: hidden alles außerhalb ab. */
.statistik-umschalter > button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.form-input:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); outline: none; }

/* Heller Grundton (seit 2026-09-29; seit 14.10.2026 data-grundton am <html> - */
/* gilt für "Hell" und die farbigen Modi, gewählt über die Palette oben bzw.    */
/* das Profil, sonst Systemeinstellung). Tönungen aus der Primärfarbe, damit    */
/* sie jedem Farbmodus folgen.                                                  */
/* ---------------------------------------------------------------------- */
:root[data-grundton="light"] {
  color-scheme: light;
  /* Seit 07.10.2026 moderner (angelehnt an Material): weiße Karten mit weichen Schatten auf einem hellen, leicht
     bläulich-violetten Verlauf statt reinem Grau; Markenfarbe als Verlauf in Menü und Knöpfen. */
  --color-primary: #1d6ef2;
  --color-secondary: #5b4cf0;
  --marke-verlauf: linear-gradient(135deg, #1d6ef2 0%, #4f5bf0 55%, #7b4ff0 100%);
  --background: #f3f6fc;
  --text-primary: #101828;
  --text-secondary: #5a6478;
  --surface: #ffffff;
  --surface-strong: color-mix(in srgb, var(--color-primary) 8%, #ffffff);
  /* Hintergrundverlauf (die farbigen Modi tönen ihn um). */
  --akzent-3: #10b9d6;
  --hell-1: #eef3ff;
  --hell-2: #f1efff;
  --hell-3: #ecf7fb;
  --border-soft: rgba(30, 50, 100, 0.13);

  --page-bg:
    radial-gradient(1200px 700px at -5% -10%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 62%),
    radial-gradient(1000px 650px at 105% -5%, color-mix(in srgb, var(--color-secondary) 18%, transparent), transparent 60%),
    radial-gradient(900px 700px at 60% 115%, color-mix(in srgb, var(--akzent-3) 14%, transparent), transparent 62%),
    linear-gradient(160deg, var(--hell-1) 0%, var(--hell-2) 55%, var(--hell-3) 100%);
  --sidebar-bg: rgba(255, 255, 255, 0.86);
  --topbar-bg: rgba(255, 255, 255, 0.78);
  --nav-text: #334155;
  --hover: color-mix(in srgb, var(--color-primary) 7%, transparent);
  --active: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --label: #1f2a3d;
  --icon-muted: #7a869a;
  --error-text: #b42318;
  --error-strong: #d92d20;
  --popup-bg: #ffffff;
  --table-head-bg: color-mix(in srgb, var(--color-primary) 6%, #ffffff);
  --line-soft: rgba(30, 50, 100, 0.08);
  --row-hover: color-mix(in srgb, var(--color-primary) 5%, transparent);
  --surface-faint: color-mix(in srgb, var(--color-primary) 3.5%, transparent);
  --ok-text: #067647;
  --bad-text: #b42318;
  --schatten-karte: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(30, 50, 110, 0.07);
  --schatten-hoch: 0 12px 32px rgba(30, 50, 110, 0.16);

  --chart-text: #475467;
  --chart-grid: rgba(30, 50, 100, 0.09);
  --chart-legend: #101828;
  --chart-tooltip-bg: rgba(16, 24, 40, 0.92);
  --chart-segment: #ffffff;
  --chart-point-border: #ffffff;
  --png-bg: #ffffff;
}
:root[data-grundton="light"] body { background-attachment: fixed; }
/* Karten: weiß, weicher Schatten, kaum Rahmen - heben sich durch den getönten Hintergrund ab. */
:root[data-grundton="light"] .card { border-color: rgba(30, 50, 100, 0.07); box-shadow: var(--schatten-karte); border-radius: 14px; }
:root[data-grundton="light"] .form-input, :root[data-grundton="light"] select.form-input { background: #ffffff; border-color: #d3dbe8; }
:root[data-grundton="light"] .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); outline: none; }
:root[data-grundton="light"] .btn-ghost { border-color: #d3dbe8; background: #ffffff; }
:root[data-grundton="light"] .btn-ghost:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--surface)); }
:root[data-grundton="light"] .btn-primary { background: var(--marke-verlauf); border-color: transparent; color: #ffffff; box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent); }
:root[data-grundton="light"] .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 34%, transparent); }
:root[data-grundton="light"] .btn-gefahr { color: #7a271a; }
:root[data-grundton="light"] .widget-leiste { color: #101828; }
:root[data-grundton="light"] .status-error { color: var(--error-text); }
/* Seitenleiste und Kopfzeile: hell und leicht durchscheinend, Schatten statt harter Linien. */
:root[data-grundton="light"] .sidebar { background: var(--sidebar-bg); backdrop-filter: blur(10px); border-right: 1px solid rgba(30, 50, 100, 0.08); box-shadow: 2px 0 18px rgba(30, 50, 110, 0.05); }
:root[data-grundton="light"] .sidebar-brand { border-bottom: 1px solid rgba(30, 50, 100, 0.08); }
:root[data-grundton="light"] .topbar { border-bottom: 1px solid rgba(30, 50, 100, 0.08); box-shadow: 0 2px 14px rgba(30, 50, 110, 0.05); }
:root[data-grundton="light"] .nav-link { font-weight: 500; }
:root[data-grundton="light"] .nav-link .nav-symbol { color: #6b7a99; }
/* Nicht beim gewählten Punkt (seit 14.10.2026): sonst wird dessen Icon unter der Maus blau auf blauem Verlauf. */
@media (hover: hover) { :root[data-grundton="light"] .nav-link:not(.nav-link-active):hover .nav-symbol { color: var(--color-primary); } }
:root[data-grundton="light"] .nav-link-active { background: var(--marke-verlauf); color: #ffffff; box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 25%, transparent); }
:root[data-grundton="light"] .nav-link-active .nav-symbol { color: #ffffff; }
:root[data-grundton="light"] .nav-abschnitt { color: #8a94a8; font-weight: 600; }
/* Tabellen: getönter Kopf, Zeilen mit feinen Linien. */
:root[data-grundton="light"] .widget-tabelle th { color: #475467; text-transform: none; }
:root[data-grundton="light"] .modal-box, :root[data-grundton="light"] .widget-auswahl { box-shadow: var(--schatten-hoch); border-color: rgba(30, 50, 100, 0.08); }
:root[data-grundton="light"] .chip { background: var(--surface-strong); border-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
:root[data-grundton="light"] .chip-aktiv { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
:root[data-grundton="light"] .dashboard-gruss-text h2 { background: var(--marke-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Anmeldeseite: die Seitenleiste bleibt dunkel (weiße Schrift auf Markenfarbe). */
:root[data-grundton="light"] .login-sidebar { background: radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 60%), #0f2340; color: #ffffff; }
/* Umschalter in der Kopfzeile */
.thema-knopf { width: 2.4rem; height: 2.4rem; justify-content: center; padding: 0; }
/* Glocke "Heute zu tun und Tagesinfos" (seit 14.10.2026): Zahl rechts oben, Fenster rechts, Meldungen unten rechts. */
.glocke { position: relative; }
/* Fenster und Meldungen sitzen in der Kopfzeile - deren Unschärfe (backdrop-filter) würde sie an die Kopfzeile binden statt
   an den Bildschirm; solange sie offen sind, ohne Unschärfe und über dem Seiteninhalt. */
.topbar:has(.glocke-panel), .topbar:has(.farbmodus-menue) { backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 95; }
.glocke-neu > i { color: var(--warning); }
.glocke-zahl { position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: 999px;
  background: var(--error-strong); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1.2rem; text-align: center; }
.glocke-panel { width: min(520px, 100vw); }
.glocke-reiter { margin-bottom: 0.25rem; }
.glocke-reiter button span { background: var(--error-strong); color: #fff; opacity: 1; border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; }
.glocke-editor-fuss { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
/* Eingestellte Aufgaben unter der Tagesliste (seit 14.10.2026 statt eines eigenen Reiters). */
.aufgaben-eingestellt-titel { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 0.5rem; }
/* Kurze Hinweise unten rechts (seit 14.10.2026): Gespeichert (grün), Fehler (rot), Meldungen der Glocke - alle verschwinden
   von selbst (seit 18.10.2026). Hintergrund deckend (--popup-bg): --surface ist in den dunklen Modi fast durchsichtig, auf dem
   Tablet war der Text über der Seite kaum lesbar. */
/* Über allen Fenstern (seit 02.11.2026): die Überlagerung der Fenster (.modal-overlay, z-index 100, abgedunkelt und weichgezeichnet)
   lag sonst über den Hinweisen - der Hinweis beim Klick neben ein Fenster war nicht lesbar. Unter dem Zahlen-Pad (300); bei offenem
   Pad stehen die Hinweise ohnehin oben. */
.hinweise { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; width: min(24rem, calc(100vw - 2rem)); }
.hinweis { display: flex; align-items: flex-start; gap: 0.25rem; background: var(--popup-bg); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--color-primary); border-radius: var(--radius-main); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); padding: 0.5rem;
  animation: hinweis-rein 0.18s ease-out; }
@keyframes hinweis-rein { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
/* Handy und Tablet (seit 18.10.2026): nichts Bedienbares verdecken - über der Fußleiste mit „Übernehmen“ statt darauf;
   bei offenem Mengen-Pad oder Seitenpanel oben unter der Kopfleiste (unten liegen dann deren Tasten bzw. „Speichern“, oben
   ist die Werkzeugleiste der Erfassung ohnehin abgedeckt). */
html:not([data-geraet="desktop"]) .hinweise { left: 0.75rem; right: 0.75rem; width: auto; max-width: 30rem; margin-left: auto;
  bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
html:not([data-geraet="desktop"]) body:has(.mobil-fussleiste) .hinweise { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
html:not([data-geraet="desktop"]) body:has(.mengen-pad, .widget-auswahl) .hinweise { top: calc(var(--kopf-hoehe) + 0.5rem); bottom: auto; }
/* Offenes Fenster (seit 02.11.2026): die Hinweise liegen über den Fenstern (z-index 200) - auf Handy und Tablet oben, damit sie die
   Fußleiste der Vollbild-Fenster („Übernehmen“, „Abbrechen“) nicht verdecken - unter dem Fensterkopf mit ×. */
html:not([data-geraet="desktop"]) body:has(.modal-overlay) .hinweise { top: calc(4rem + env(safe-area-inset-top)); bottom: auto; }
/* Tablet: die Fenster stehen nicht im Vollbild, sondern ab 4-10 % der Höhe - der Hinweis kommt unter ihren Kopf. */
html[data-geraet="tablet"] body:has(.modal-overlay) .hinweise { top: calc(10vh + 4.5rem); }
.hinweis.erfolg { border-left-color: var(--good, #0ca30c); }
.hinweis.erfolg .hinweis-inhalt > i { color: var(--good, #0ca30c); }
.hinweis.fehler, .hinweis.wichtig { border-left-color: var(--error-strong); }
.hinweis.fehler .hinweis-inhalt > i { color: var(--error-strong); }
.hinweis-inhalt { flex: 1; min-width: 0; display: flex; gap: 0.6rem; align-items: flex-start; border: 0; background: transparent; color: var(--text-primary);
  font: inherit; text-align: left; cursor: pointer; padding: 0.15rem; }
.hinweis-inhalt:disabled { cursor: default; opacity: 1; }
.hinweis-inhalt > i { color: var(--color-primary); margin-top: 0.2rem; }
.hinweis-inhalt > span { display: flex; flex-direction: column; min-width: 0; }
.hinweis-inhalt strong { font-size: 0.85rem; }
.hinweis-inhalt span span { color: var(--text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
:root[data-grundton="light"] .sidebar-footer-logo { filter: brightness(0) opacity(0.55); }

/* Sortierbare Chart-Tabellen */
.widget-tabelle th.sortierbar { cursor: pointer; user-select: none; }
.widget-tabelle th.sortierbar:hover { color: var(--text-primary); }
.sortier-zeichen { margin-left: 0.35rem; font-size: 0.85rem; opacity: 0.35; }
.sortier-zeichen.aktiv { opacity: 1; color: var(--color-primary); }

/* ---------------------------------------------------------------- Statistiken */
.statistik-page { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.statistik-page > * { min-width: 0; }
.statistik-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.statistik-kachel { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.statistik-kachel:hover { background: var(--hover); border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.statistik-kachel-icon { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary); font-size: 1.15rem; }
.statistik-kachel-titel { font-weight: 600; font-size: 1.02rem; }
.statistik-kachel-auswahl { margin-top: auto; }

/* Kopf der Statistikseiten als Karte wie die Köpfe der übrigen Seiten (seit 14.10.2026). */
.statistik-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
  border-radius: var(--radius-main); border: 1px solid var(--border-soft); background: var(--surface); }
.statistik-kopf h3 { margin: 0; font-size: 1.15rem; }
.statistik-vorlagen { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.statistik-vorlagen .form-input { width: auto; min-width: 11rem; padding-top: 0.35rem; padding-bottom: 0.35rem; }
/* Reiter mit Unterstrich in der Primärfarbe (seit 14.10.2026, wie GoecomDB): Glocke, Inventur-Statistik, Bestellplan-Ebenen. */
.reiter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.15rem; border-bottom: 1px solid var(--line-soft, var(--border-soft)); }
.reiter > a, .reiter > button:not(.btn) {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  border-radius: var(--radius-main) var(--radius-main) 0 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.92rem;
  font-weight: 600; text-decoration: none; cursor: pointer; }
.reiter > a:hover, .reiter > button:not(.btn):hover { color: var(--text-primary); background: var(--hover); }
.reiter > a.aktiv, .reiter > button.aktiv { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.reiter > .btn { margin: 0 0 0.3rem auto; }

.statistik-auswahl { grid-template-columns: minmax(12rem, 1.4fr) minmax(12rem, 1.4fr) 10rem 10rem; }
.statistik-zeitraeume { grid-column: 1 / -1; }
.statistik-zeitraeume .chip { cursor: pointer; }
@media (max-width: 900px) { .statistik-auswahl { grid-template-columns: 1fr 1fr; } }

.statistik-baukasten { display: grid; grid-template-columns: minmax(16rem, 2fr) 3fr; gap: 1.25rem; }
@media (max-width: 900px) { .statistik-baukasten { grid-template-columns: 1fr; } }
.statistik-feldgruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.45rem; }
.statistik-feldgruppe-name { width: 100%; font-size: 0.85rem; color: var(--text-secondary); }
.statistik-feld {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.85rem;
  background: var(--surface-strong); border: 1px solid var(--border-soft); cursor: grab; user-select: none;
}
.statistik-feld i { color: var(--text-secondary); font-size: 0.85rem; }
.statistik-feld:hover { border-color: color-mix(in srgb, var(--color-primary) 60%, transparent); }
.statistik-feld-wert { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.statistik-feld.benutzt { opacity: 0.45; }
.statistik-feld.gesetzt { padding-right: 0.25rem; background: color-mix(in srgb, var(--color-primary) 16%, var(--surface-strong)); }
.statistik-feld .chip-x { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0 0.2rem; font-size: 0.85rem; }
.statistik-feld .chip-x:hover:not(:disabled) { color: var(--text-primary); }
.statistik-feld .chip-x:disabled { opacity: 0.25; cursor: default; }
/* Kassenwerte (seit 23.10.2026): der Eintrag ist ein Listenpunkt wie „Preise …“ (statistik-feld-liste), die Liste hat „Fertig“ unten. */
.kassenwerte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem;
  font-size: 0.85rem; color: var(--text-secondary); }
.statistik-griff { cursor: grab; }
.statistik-zonen { display: flex; flex-direction: column; gap: 0.75rem; }
.statistik-zone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-height: 4.2rem; padding: 0.4rem 0.7rem 0.7rem;
  border: 1px dashed var(--border-soft); border-radius: var(--radius-main); background: var(--surface-faint);
}
.statistik-zone > .widget-menue-titel { width: 100%; margin: 0; padding: 0; }
.statistik-zone.bereit { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.statistik-aktionen { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.statistik-aktionen .widget-menue-schalter { padding: 0; margin-right: auto; align-items: center; }

.statistik-export { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Ergebnis (seit 12.10.2026): Box bis zum Fensterrand (rest-hoehe), nur die Tabelle scrollt - ein Scrollbalken statt
   Tabelle mit 70 % Fensterhöhe plus Seite. Volle Breite wie die Erfassungsseiten. */
.statistik-ergebnis { display: flex; flex-direction: column; }
.statistik-ergebnis > .statistik-tabelle-wrap { flex: 1 1 auto; min-height: 0; }
.statistik-tabelle td { white-space: nowrap; }
.statistik-tabelle tfoot td { position: sticky; bottom: 0; background: var(--table-head-bg); font-weight: 600; border-top: 1px solid var(--border-soft); }

/* Statistiken: Darstellung Liste/gegliedert */
.statistik-darstellung { display: flex; align-items: center; gap: 0.6rem; }
.statistik-darstellung .form-label { margin: 0; }
.statistik-umschalter { display: inline-flex; border: 1px solid var(--border-soft); border-radius: 999px; overflow: hidden; }
.statistik-umschalter button { background: transparent; border: none; color: var(--text-secondary); padding: 0.3rem 0.8rem; font-size: 0.85rem; cursor: pointer; }
.statistik-umschalter button.aktiv { background: color-mix(in srgb, var(--color-primary) 30%, transparent); color: var(--text-primary); }
.statistik-gliederung { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
.statistik-gliederung > .widget-menue-titel { margin: 0; padding: 0; }
.statistik-gliederung-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.statistik-gliederung-zeile .form-input { width: auto; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.statistik-gliederung-zeile .statistik-anzahl { width: 5.5rem; }
.statistik-gliederung-name { min-width: 9.5rem; font-weight: 600; font-size: 0.9rem; }
.statistik-gliederung-name i { color: var(--text-secondary); font-size: 0.85rem; margin-right: 0.2rem; }
.statistik-ebenen-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.6rem; }
.statistik-ebenen-knoepfe .chip { cursor: pointer; }
.statistik-gegliedert tr.statistik-gruppe { cursor: pointer; font-weight: 600; }
.statistik-gegliedert tr.statistik-gruppe-0 { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.statistik-gegliedert tr.statistik-gruppe-1 { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.statistik-gegliedert tr.statistik-gruppe-2 { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.statistik-gegliedert tr.statistik-zwischensumme td { font-weight: 600; font-style: italic; border-bottom: 1px solid var(--border-soft); }
.statistik-klapp { width: 0.9rem; font-size: 0.85rem; color: var(--text-secondary); }
.statistik-anzahl-text { margin-left: 0.35rem; font-weight: 400; font-size: 0.85rem; color: var(--text-secondary); }

/* ---------------------------------------------------------------- Berichtsdesigner */
.statistik-kachel-bericht { border-style: dashed; }
.bericht-designer { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.bericht-name { width: auto; min-width: 16rem; font-weight: 600; }
.bericht-arbeitsflaeche { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 19rem; gap: 0.75rem; align-items: start; }
@media (max-width: 1300px) { .bericht-arbeitsflaeche { grid-template-columns: 13rem minmax(0, 1fr); } .bericht-eigenschaften { grid-column: 1 / -1; position: static !important; } }
.bericht-palette, .bericht-eigenschaften { position: sticky; top: calc(var(--kopf-hoehe) + 0.75rem); max-height: calc(100vh - var(--kopf-hoehe) - 1.5rem); overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; }
.bericht-palette .form-label, .bericht-eigenschaften .form-label { margin: 0.45rem 0 0; }
/* Seit 18.10.2026: in der scrollenden Flex-Spalte schrumpfte die Bereichswahl Kopf/Inhalt/Fuß (overflow: hidden) auf 2 px und war
   nicht mehr anklickbar - die Spalte scrollt, ihre Einträge behalten ihre Höhe. */
.bericht-palette > *, .bericht-eigenschaften > * { flex-shrink: 0; }
.bericht-abschnitt { margin-top: 0.9rem !important; }
.bericht-palette-baustein {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.65rem; border: 1px solid var(--border-soft); border-radius: 8px;
  background: var(--surface-strong); cursor: grab; font-size: 0.9rem; user-select: none;
}
.bericht-palette-baustein:hover { border-color: color-mix(in srgb, var(--color-primary) 60%, transparent); }
.bericht-palette-baustein i { width: 1rem; color: var(--color-primary); }
.bericht-datum { max-width: 26rem; }
.bericht-knoepfe { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
/* Seit 23.10.2026: Bausteinliste und Seiteneinstellungen als eigene Gruppen (auf Handy/Tablet Leiste bzw. aufklappbar) - am PC
   wie vorher untereinander. Verschiebe-Knöpfe, „Fertig“ und Hinweise für Touch nur auf Handy und Tablet. */
.bericht-palette-liste, .bericht-seite-einstellungen { display: flex; flex-direction: column; gap: 0.35rem; }
.bericht-palette-liste > *, .bericht-seite-einstellungen > * { flex-shrink: 0; }
.bericht-nur-mobil, .bericht-verschieben, .bericht-eigenschaften-zu { display: none; }
.bericht-eigenschaften-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bericht-modus { align-self: flex-start; margin-bottom: 0.3rem; }
/* Farbwahl (einfach: feste Auswahl, Experte: dazu der freie Farbwähler) und Schriftstil des Expertenmodus. */
.bericht-farbwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.bericht-farbfeld {
  width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 2px solid var(--popup-bg); background: var(--farbe);
  box-shadow: 0 0 0 1px var(--border-soft); cursor: pointer; flex: 0 0 auto;
}
.bericht-farbfeld:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, transparent); }
.bericht-farbfeld.aktiv { box-shadow: 0 0 0 2px var(--color-primary); }
.bericht-farbfeld:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bericht-farbfeld-ohne {
  width: auto; border-radius: 999px; padding: 0 0.6rem; background: var(--surface-strong); color: var(--text-primary);
  font-size: 0.8rem; display: inline-flex; align-items: center;
}
.bericht-farbfeld-eigen { cursor: default; }
.bericht-farbe-eigen-text { font-size: 0.8rem; color: var(--text-secondary); }
.bericht-farbe-frei { display: inline-flex; align-items: center; cursor: pointer; }
.bericht-farbe-frei input[type=color] { width: 2.4rem; height: 1.8rem; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--surface-strong); padding: 2px; cursor: pointer; }
.bericht-schriftstil { display: flex; gap: 0.35rem; }
.bericht-schriftstil .btn { min-width: 2.2rem; justify-content: center; }
.bericht-schriftstil .btn.aktiv {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent); border-color: var(--color-primary); color: var(--text-primary);
}

.bericht-tisch { overflow: auto; background: var(--surface-faint); border: 1px solid var(--border-soft); border-radius: var(--radius-main); padding: 1.5rem 1.5rem 1.5rem 2.6rem; min-height: 60vh; }
.bericht-papier {
  width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 12mm 16mm; box-sizing: border-box; background: #fff; color: #111;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35); position: relative;
  /* ungefähre Seitenenden (A4-Höhe) */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(297mm - 2px), rgba(245, 158, 11, 0.55) calc(297mm - 2px), rgba(245, 158, 11, 0.55) 297mm);
}
.bericht-papier.quer { width: 297mm; min-height: 210mm;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(210mm - 2px), rgba(245, 158, 11, 0.55) calc(210mm - 2px), rgba(245, 158, 11, 0.55) 210mm); }
.bericht-zeile-rahmen { position: relative; }
.bericht-zeile-rahmen.wird-gezogen { opacity: 0.4; }
.bericht-zeile-griff { position: absolute; left: -9mm; top: 0.5mm; padding: 1mm 1.5mm; cursor: grab; color: #94a3b8; border-radius: 4px; }
.bericht-zeile-griff:hover { background: #e2e8f0; color: #334155; }
.bericht-zeile { min-height: 8mm; border-radius: 3px; }
.bericht-zeile.bereit { outline: 1px dashed #93c5fd; outline-offset: 1mm; }
.bericht-baustein { position: relative; outline: 1px dashed transparent; outline-offset: 1mm; border-radius: 2px; cursor: pointer; min-height: 6mm; }
.bericht-baustein:hover { outline-color: #93c5fd; }
.bericht-baustein.gewaehlt { outline: 2px solid #2563eb; }
.bericht-baustein-art {
  position: absolute; top: -3.2mm; right: 0; font-size: 6.5pt; padding: 0 1.2mm; border-radius: 2px; background: #2563eb; color: #fff;
  display: none; font-family: "Segoe UI", Arial, sans-serif; z-index: 2;
}
.bericht-baustein:hover .bericht-baustein-art, .bericht-baustein.gewaehlt .bericht-baustein-art { display: block; }
.bericht-luecke { height: 4mm; margin: -1mm 0 0; border-radius: 2px; }
.bericht-luecke.bereit { background: repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.45) 0 6px, transparent 6px 12px) center / 100% 2px no-repeat; }
.bericht-luecke.bereit:hover { background: rgba(37, 99, 235, 0.15); }
.bericht-leer { color: #94a3b8; text-align: center; padding: 30mm 0; font-family: "Segoe UI", Arial, sans-serif; }
.br-umbruch-vorschau { border-top: 2px dashed #f59e0b; color: #b45309; font-size: 7pt; text-align: center; margin: 2mm 0; padding-top: 0.5mm; }

/* Datenzugriff: Dialog neue PostgreSQL-Datenbank */

/* Dashboard-Filter in Gruppen (Filialen | Zeitraum | Vergleich | Aktualisieren) - feste Felder, nichts springt */
.filter-gruppen { grid-template-columns: minmax(15rem, 1fr) minmax(17rem, 1fr) minmax(24rem, 1.6fr) auto; align-items: stretch; gap: 0.9rem; }
.filter-gruppe {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem 0.85rem 0.85rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface-faint); min-width: 0;
}
.filter-gruppe-titel { margin: 0; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.filter-gruppe-titel i { color: var(--color-primary); margin-right: 0.3rem; }
.filter-gruppe .form-label { font-size: 0.85rem; margin-bottom: 0.25rem; }
.filter-gruppe-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.filter-gruppe-zwei > * { min-width: 0; }
.filter-gruppe .filter-field-auswahl { min-width: 0; }
.filter-datum-paar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.4rem; align-items: center; }
.filter-datum-paar input { min-width: 0; width: 100%; padding-left: 0.6rem; padding-right: 0.4rem; }

/* Einklappen als Knopf (seit 02.11.2026, Regel des Nutzers - Components/Formulare/EinklappKnopf.razor, vorher EinklappBereich mit eigener Zeile):
   kleiner Knopf rechts oben in der Überschriftszeile der Karte wie „Filter“ im Dashboard, eingeklappt links daneben die Zusammenfassung der
   Auswahl - einzeilig, gekürzt, nie eine zusätzliche Zeile. Der Bereich bleibt gerendert und ist nur ausgeblendet. */
.einklapp-kopf { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; gap: 0.5rem 0.75rem; min-width: 0; max-width: 100%; margin-left: auto; }
.einklapp-kopf > * { flex: 0 0 auto; }
.einklapp-kopf > .einklapp-zusammenfassung { flex: 1 1 0; width: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 0.85rem; }
.einklapp-knopf { flex: 0 0 auto; gap: 0.4rem; padding: 0.3rem 0.65rem; font-size: 0.85rem; white-space: nowrap; }
.einklapp-knopf > .einklapp-symbol { color: var(--color-primary); }
.einklapp-knopf.btn-primary > .einklapp-symbol { color: inherit; }
.einklapp-pfeil { font-size: 0.75em; }
.einklapp-inhalt[hidden] { display: none !important; }
html[data-touch] .einklapp-knopf, html:not([data-geraet="desktop"]) .einklapp-knopf { min-height: 44px; min-width: 44px; justify-content: center; }
/* Handy: nur Symbol und Pfeil - das Wort steht im Tooltip und in der Bedienhilfe; die Zusammenfassung bleibt einzeilig. */
html[data-geraet="handy"] .einklapp-knopf-text { display: none; }
html[data-geraet="handy"] .einklapp-zusammenfassung { font-size: 0.8rem; }
/* Handy mit Umschalter davor: Umschalter und Knopf teilen sich eine Zeile, die Zusammenfassung hätte daneben keinen Platz (steht im Tooltip). */
html[data-geraet="handy"] .einklapp-kopf.einklapp-mit-davor { flex: 1 1 100%; flex-wrap: wrap; }
html[data-geraet="handy"] .einklapp-mit-davor > .einklapp-zusammenfassung { display: none; }
html[data-geraet="handy"] .einklapp-mit-davor > :not(.einklapp-knopf):not(.einklapp-zusammenfassung) { flex: 1 1 0; min-width: 0; width: auto; }
html[data-geraet="handy"] .einklapp-mit-davor > .einklapp-knopf { order: 1; }
html[data-geraet="handy"] .einklapp-kopf.einklapp-mit-davor > .bv-neu-rechnen { order: 2; flex: 1 1 100%; justify-content: center; }
.filter-datum-paar > span { color: var(--text-secondary); }
.filter-datum-paar.aus { opacity: 0.45; }
.filter-gruppe-aktion { align-self: end; }
.filter-gruppe-aktion .btn { min-height: 2.6rem; }
/* Datumspaar (seit 29.10.2026): braucht je Feld ca. 8,3rem (Datum + Kalender-Symbol) - ist die Gruppe schmaler, stehen die Felder untereinander
   statt abgeschnitten nebeneinander. Gemessen wird die Gruppe selbst, nicht der Bildschirm (Seitenleiste und Filterpanel nehmen Platz). */
.filter-gruppe { container-type: inline-size; }
@container (max-width: 18.8rem) {
  .filter-datum-paar { grid-template-columns: minmax(0, 1fr); }
  .filter-datum-paar > span:not(.datum-feld) { display: none; }
}
/* Vier Spalten brauchen ca. 68rem Breite der Filterleiste; bei 1440 px Bildschirm bleiben nach Seitenleiste nur ca. 1050 px - darum erst ab 1600 px
   (vorher ragte "Aktualisieren" rechts hinaus). */
@media (max-width: 1600px) { .filter-gruppen { grid-template-columns: 1fr 1fr; } .filter-gruppen > .filter-gruppe:nth-child(3), .filter-gruppe-aktion { grid-column: 1 / -1; } }
@media (max-width: 760px) { .filter-gruppen { grid-template-columns: 1fr; } .filter-gruppe-zwei { grid-template-columns: 1fr; } }

/* Statistik-Auswahl in Gruppen wie im Dashboard (2-3 Gruppen je Statistikart) */
.statistik-gruppen { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
/* Statistiken (seit 09.10.2026): Berechnen oben rechts, Auswahl und Aufbau als einklappbare Boxen mit gespeicherten
   Formularen, Auswahlen und Aufbauten - so steht die Ergebnistabelle ohne Scrollen im Bild. */
.statistik-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.statistik-berechnen { padding: 0.45rem 1.1rem; }
.statistik-fehlt { margin: -0.4rem 0 0; }
.statistik-box { padding: 0.45rem 0.75rem; }
.statistik-box-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
/* Seit 14.10.2026 nur über "+ Auswahl"/"+ Aufbau" sichtbar: Titel, gespeicherte Vorlagen und X zum Schließen. */
.statistik-box-titel { display: inline-flex; align-items: center; gap: 0.45rem; margin-right: auto; }
.statistik-box-titel > i { color: var(--color-primary); }
.statistik-zusammenfassung { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.9rem; color: var(--text-secondary); }
.statistik-zusammenfassung i { margin-right: 0.3rem; color: var(--icon-muted, var(--text-secondary)); }
/* Vergleich (seit 14.10.2026): Spaltenwahl im Aufbau, Δ grün/rot in der Ergebnistabelle. */
.statistik-vergleich-spalten { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin-top: 0.6rem; }
.statistik-vergleich-spalten .form-label { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.statistik-vergleich-trenner { width: 1px; align-self: stretch; background: var(--border-soft); }
td.delta-gut { color: var(--ok-text); }
td.delta-schlecht { color: var(--bad-text); }
.statistik-vorlagen-symbol { color: var(--text-secondary); font-size: 0.9rem; margin-right: 0.2rem; }
.statistik-box > .filter-gruppen, .statistik-box > .statistik-baukasten { margin-top: 0.6rem; }
.statistik-box > .filter-gruppen { padding: 0; box-shadow: none; border: 0; background: none; }
/* Kunden-Artikel: Kunden und Artikel untereinander, der Zeitraum daneben. */
.statistik-gruppen-stapel { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

/* Meldung mit Schließen-Knopf rechts */
.status-schliessbar { display: flex; align-items: center; }
.status-schliessbar > span { flex: 1 1 auto; }
.status-schliessbar .btn-icon { margin-left: auto; }

/* Statistik-Kopf: Formularauswahl und Bezeichnung mit Beschriftung */
.statistik-vorlagen-felder { align-items: flex-end; }
.statistik-vorlagen-feld { display: flex; flex-direction: column; }
.statistik-vorlagen-feld .form-label { font-size: 0.85rem; margin-bottom: 0.2rem; }
.filialauswahl-regel-alle { display: flex; align-items: center; justify-content: space-between; }
.filialauswahl-liste { user-select: none; }

/* Lieferungen (Dashboard, Bestellungen): Zeile anklicken klappt die Artikel auf. */
.liefer-tabelle tbody tr.liefer-kopf { cursor: pointer; }
.liefer-tabelle tbody tr.liefer-kopf.offen { background: var(--row-hover); font-weight: 600; }
.liefer-tabelle tr.liefer-details > td { padding: 0 0 0.6rem 1.4rem; background: var(--row-hover); }
.liefer-tabelle tr.liefer-details table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.liefer-tabelle tr.liefer-details th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 0.3rem 0.5rem; }
.liefer-tabelle tr.liefer-details td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--line-soft); }
.liefer-tabelle tr.liefer-details .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.liefer-tabelle .liefer-summe td { font-weight: 600; border-bottom: none; }
.liefer-schluss { white-space: nowrap; }
.liefer-schluss.offen { color: var(--text-secondary); font-style: italic; }
.liefer-schluss.vorbei { color: var(--danger, #c0392b); }
.liefer-hinweis { font-size: 0.85rem; color: var(--text-secondary); margin: 0.4rem 0 0; }
.liefer-nr { display: inline-block; min-width: 1.6rem; padding: 0.05rem 0.4rem; border-radius: 0.6rem; background: var(--line-soft); text-align: center; font-weight: 600; }

/* Bestellungen (seit 02.10.2026): Kundensuche, Kopf mit Aktionen, Vorwochen- und Lieferungstabelle. */
.kunden-suche { position: relative; }
.kunden-suche .form-input { padding-left: 2.1rem; width: 100%; }
.kunden-suche-lupe { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--icon-muted); pointer-events: none; }
.kunden-suche-liste {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 22rem; overflow-y: auto; padding: 0.3rem;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.kunden-suche-liste .card-empty { padding: 0.6rem; margin: 0; }
.kunden-suche-aktuell .modal-treffer-name { font-weight: 600; }

.bestell-datum { display: flex; align-items: center; gap: 0.25rem; }
.bestell-datum .form-input { width: 10.5rem; }
.btn-icon-only { padding: 0.5rem 0.6rem; }
.bestell-status { display: flex; gap: 1rem; flex-wrap: wrap; }
.bestell-status b { color: var(--text-primary); }

.bestell-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.bestell-kopf .bestell-aktionen { margin-top: 0; }
.bestell-tabelle-wrap { overflow-x: auto; }
/* Vorschläge des Artikelfelds (seit 30.10.2026, StammdatenEingabe) über dem Rand der scrollenden Tabelle: am Feld verankert und fest
   positioniert - sonst schnitt overflow-x die Liste nach einer Zeile ab. Ohne Ankerpositionierung darf die Tabelle beim Tippen überstehen. */
@supports (anchor-name: --a) {
  .bestell-tabelle-wrap .beleg-artikelfeld { anchor-name: --beleg-artikelfeld; }
  .bestell-tabelle-wrap .beleg-artikelfeld .sd-vorschlaege { position: fixed; position-anchor: --beleg-artikelfeld; top: anchor(bottom); left: anchor(left);
    margin-top: 4px; width: min(30rem, calc(100vw - 2rem)); position-try-fallbacks: flip-block; }
}
@supports not (anchor-name: --a) {
  .bestell-tabelle-wrap:has(.beleg-artikelfeld.offen) { overflow: visible; }
}
.bestell-scroll thead th { background: var(--table-head-bg); z-index: 3; }
.bestell-umschalter { padding: 0; }
.bestell-neu-name { color: var(--text-primary); font-size: 0.9rem; }
.bestell-schon-da { display: inline-block; margin-left: 0.6rem; padding: 0.05rem 0.5rem; border-radius: 0.6rem; font-size: 0.85rem;
  background: rgba(250, 178, 25, 0.15); color: var(--warning); }

.bestell-wochen tbody tr { cursor: pointer; }
.bestell-wochen tbody tr:hover { background: var(--row-hover); }
.bestell-wochen tbody tr.nur-ansicht { cursor: default; }
/* Gesperrter Kunde (Kundenkennung X): Bestellungen nur ansehen */
.status-gesperrt { background: rgba(208, 59, 59, 0.12); border-color: rgba(208, 59, 59, 0.45); color: var(--text-primary); align-items: flex-start; }
.status-gesperrt > .fa-lock, .status-abgerechnet > .fa-file-invoice { color: var(--bad-text); font-size: 1.15rem; margin-top: 0.1rem; }
.status-gesperrt b { color: var(--bad-text); margin-right: 0.25rem; }
.bestell-status-gesperrt { color: var(--bad-text); font-weight: 600; }
/* Bestellungen live nach Marvin (seit 15.10.2026): wird übernommen bzw. übernommen */
.bestell-status-uebernahme { color: var(--text-secondary); font-weight: 600; }
.bestell-status-uebernommen { color: var(--good); font-weight: 600; }
.kunden-gesperrt { color: var(--bad-text); }
/* Retouren: Hinweis, dass der Bestellkopf (BSTKopf) beim Übernehmen mit angelegt wird */
.bestell-kopf-hinweis { margin: 0.4rem 0 0.2rem; font-size: 0.9rem; color: var(--text-secondary); display: flex; gap: 0.45rem; align-items: baseline; }
.bestell-kopf-hinweis .fa-link { color: var(--warning); }
.bestell-status-kopf { color: var(--warning); font-weight: 600; }
/* Bestellungen für heute und früher: schon geliefert, nur Ansicht bzw. rückwirkende Änderung mit Recht */
.status-geliefert { background: var(--surface); color: var(--text-primary); align-items: flex-start; }
.status-geliefert > .fa-truck { color: var(--text-secondary); font-size: 1.1rem; margin-top: 0.1rem; }
.status-geliefert b, .status-rueckwirkend b { margin-right: 0.25rem; }
.status-rueckwirkend { background: rgba(250, 178, 25, 0.12); border-color: rgba(250, 178, 25, 0.45); color: var(--text-primary); align-items: flex-start; }
.status-rueckwirkend > .fa-clock-rotate-left { color: var(--warning); font-size: 1.1rem; margin-top: 0.1rem; }
.bestell-status-geliefert { color: var(--text-secondary); font-weight: 600; }
/* Lieferscheine: Lieferung eines Artikels noch nicht bestätigt (D310.1.LSImport nicht gesetzt) */
.liefer-offen td:first-child { box-shadow: inset 3px 0 0 #f08c1a; }
.liefer-offen-marke { display: inline-block; margin-right: 0.35rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  line-height: 1.35; background: rgba(240, 140, 26, 0.16); color: #f08c1a; vertical-align: 1px; }
.liefer-offen-zahl { margin-left: 0.4rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: rgba(240, 140, 26, 0.16); color: #f08c1a; }
.liefer-hinweis-offen { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; }
.liefer-bestaetigen { margin-left: 0.3rem; width: 1.7rem; height: 1.7rem; border-radius: 6px; border: 1px solid rgba(240, 140, 26, 0.5);
  background: rgba(240, 140, 26, 0.12); color: #f08c1a; cursor: pointer; vertical-align: middle; }
.liefer-bestaetigen:hover { background: rgba(240, 140, 26, 0.25); }
.bestell-offen { display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: rgba(240, 140, 26, 0.16); color: #f08c1a; }
.bestell-status-offen { color: #f08c1a; font-weight: 600; }
/* Anwenderhilfe (/hilfe): links das Inhaltsverzeichnis (bleibt stehen), rechts die Abschnitte - seit 19.10.2026 über die
   ganze Breite (Wunsch des Nutzers); Bilder bleiben begrenzt. Handy und Tablet: unten "Mobil-Korrekturen 19.10.2026: Hilfe". */
.hilfe-seite { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.hilfe-verzeichnis { position: sticky; top: calc(var(--kopf-hoehe) + 0.75rem); display: flex; flex-direction: column; gap: 0.15rem;
  max-height: calc(100vh - var(--kopf-hoehe) - 1.5rem); overflow-y: auto; }
.hilfe-verzeichnis-mobil { display: none; }
.hilfe-verzeichnis h3 { margin: 0 0 0.5rem; }
.hilfe-verzeichnis a { padding: 0.35rem 0.5rem; border-radius: 6px; color: var(--text-primary); text-decoration: none; font-size: 0.92rem; }
.hilfe-verzeichnis a:hover { background: var(--row-hover); }
.hilfe-verzeichnis a i { width: 1.2rem; color: var(--text-secondary); }
.hilfe-inhalt { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.hilfe-abschnitt { scroll-margin-top: calc(var(--kopf-hoehe) + 0.75rem); line-height: 1.6; }
.hilfe-abschnitt h2 { margin-top: 0; }
.hilfe-abschnitt h2 i { color: var(--accent, #3b82f6); margin-right: 0.3rem; }
.hilfe-abschnitt h3 { margin: 1.4rem 0 0.4rem; }
:is(.hilfe-abschnitt, .hilfe-antwort-text) img { max-width: min(100%, 1100px); border: 1px solid var(--border-soft); border-radius: 8px; margin: 0.5rem 0; }
/* Handy-Aufnahmen (seit 15.10.2026, Dateiname handy-…) sind hochkant - schmal und nebeneinander statt bildschirmhoch. */
:is(.hilfe-abschnitt, .hilfe-antwort-text) img[src*="/handy-"] { width: min(17rem, 100%); margin-right: 0.6rem; vertical-align: top; }
:is(.hilfe-abschnitt, .hilfe-antwort-text) table { border-collapse: collapse; margin: 0.5rem 0; font-size: 0.92rem; }
:is(.hilfe-abschnitt, .hilfe-antwort-text) :is(th, td) { border-bottom: 1px solid var(--line-soft, var(--border-soft)); padding: 0.35rem 0.7rem; text-align: left; vertical-align: top; }
:is(.hilfe-abschnitt, .hilfe-antwort-text) code { background: var(--row-hover); padding: 0 0.3rem; border-radius: 4px; }
:is(.hilfe-abschnitt, .hilfe-antwort-text) blockquote { margin: 0.6rem 0; padding: 0.4rem 0.9rem; border-left: 3px solid var(--warning); background: rgba(250, 178, 25, 0.08); }

/* Suche in der Hilfe (seit 29.10.2026, Hilfe.razor, HilfeSuchErgebnisse.razor, js/hilfe.js): Suchfeld seit 03.11.2026 in der Kopfzeile
   (HilfeSucheKopf.razor, unten „Suche der Hilfe in der Kopfzeile“), über den Abschnitten die Antwort im Wortlaut, daneben weitere
   Treffer und passende Seiten. */
.hilfe-suche { display: flex; gap: 0.5rem; align-items: center; }
.hilfe-suche-feld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem 0 0.8rem; cursor: text;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--popup-bg); }
.hilfe-suche-feld:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }
.hilfe-suche-feld > i { color: var(--text-secondary); }
.hilfe-suche-feld input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 1rem; padding: 0.6rem 0; }
.hilfe-suche-feld input::-webkit-search-cancel-button { display: none; }
.hilfe-suche-leeren { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-secondary); cursor: pointer; }
.hilfe-suche-leeren:hover { background: var(--row-hover); color: var(--text-primary); }
.hilfe-suche-leeren[hidden] { display: none; }
.hilfe-suche-knopf { display: inline-flex; align-items: center; gap: 0.45rem; }
#hilfe-suche-ziel:empty { display: none; }
#hilfe-suche-ziel[aria-busy] { opacity: 0.6; transition: opacity 0.15s 0.2s; }
/* Ergebnisfenster (seit 03.11.2026, Wunsch des Nutzers): mit Skript (html[data-hilfe-js], js/hilfe.js) schwebt das Ergebnis direkt unter
   dem Suchfeld der Kopfzeile über dem Inhalt - wer mitten in der Hilfe sucht, sieht die Treffer sofort, die Seite springt nicht. Lage und
   Breite misst js/hilfe.js (Unterkante der Kopfzeile, Spalte des Inhalts). Ebene 9: unter den Menüs der Kopfzeile (10), über der Leiste
   „Inhalt“ (6). Ohne Skript steht das Ergebnis wie früher oben im Inhalt. */
.hilfe-ergebnisfenster:has(> #hilfe-suche-ziel:empty) { display: none; }
.hilfe-ergebnisfenster-kopf { display: none; }
html[data-hilfe-js] .hilfe-ergebnisfenster {
  position: fixed; z-index: 9; top: var(--hilfe-ergebnis-oben, calc(var(--kopf-hoehe) + 0.4rem));
  left: var(--hilfe-ergebnis-links, 1rem); width: var(--hilfe-ergebnis-breite, calc(100vw - 2rem));
  max-height: calc(100dvh - var(--hilfe-ergebnis-oben, var(--kopf-hoehe)) - 0.75rem);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--popup-bg);
  box-shadow: var(--schatten-hoch, 0 12px 32px rgba(0, 0, 0, 0.4)); }
html[data-hilfe-js] .hilfe-ergebnisfenster[data-zu] { display: none; }
html[data-hilfe-js] .hilfe-ergebnisfenster-kopf { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.3rem 0.35rem 0.3rem 0.9rem; border-bottom: 1px solid var(--border-soft); font-weight: 600; }
.hilfe-ergebnisfenster-kopf > span i { color: var(--color-primary); margin-right: 0.35rem; }
html[data-hilfe-js] #hilfe-suche-ziel { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0.75rem; }
.hilfe-ergebnis-zu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 0;
  border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; }
.hilfe-ergebnis-zu:hover { background: var(--row-hover); color: var(--text-primary); }
.hilfe-suche-ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 0.75rem; align-items: start; }
.hilfe-suche-ergebnis:not(:has(.hilfe-suche-liste)) { grid-template-columns: minmax(0, 1fr); }
.hilfe-suche-haupt, .hilfe-suche-neben { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.hilfe-antwort { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--border-soft)); line-height: 1.6; }
.hilfe-antwort h3 { margin: 0.25rem 0 0.5rem; font-size: 1.2rem; }
.hilfe-suche-pfad { display: flex; align-items: baseline; gap: 0.4rem; color: var(--text-secondary); font-size: 0.85rem; overflow-wrap: anywhere; }
.hilfe-suche-pfad i { color: var(--color-primary); }
.hilfe-antwort-text { overflow-wrap: break-word; }
.hilfe-antwort-text table { display: block; max-width: 100%; overflow-x: auto; }
/* Nur für Bildschirmleser: kurze Statuszeile der Suche (aria-live). */
.hilfe-suche-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:is(.hilfe-antwort-text, .hilfe-suche-ausschnitt) mark { background: color-mix(in srgb, var(--warning) 38%, transparent); color: inherit; border-radius: 3px; padding: 0 0.1em; }
.hilfe-antwort.lang:not(.offen) .hilfe-antwort-text { max-height: 24rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.hilfe-antwort-mehr { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; padding-left: 0; padding-right: 0; border: 0; color: var(--color-primary); }
.hilfe-antwort-mehr .auf, .hilfe-antwort.offen .hilfe-antwort-mehr .zu { display: none; }
.hilfe-antwort.offen .hilfe-antwort-mehr .auf { display: inline; }
.hilfe-antwort-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.hilfe-antwort-knoepfe .btn { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; max-width: 100%; }
.hilfe-suche-liste { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem; }
.hilfe-suche-liste h4 { margin: 0.1rem 0.5rem 0.35rem; font-size: 0.95rem; }
.hilfe-suche-treffer, .hilfe-suche-seite { display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; min-height: 44px; padding: 0.45rem 0.55rem;
  border-radius: 0.5rem; color: var(--text-primary); text-decoration: none; }
.hilfe-suche-seite { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.65rem; }
.hilfe-suche-seite > i { width: 1.3rem; text-align: center; color: var(--color-primary); }
.hilfe-suche-seite > span { display: flex; flex-direction: column; min-width: 0; }
.hilfe-suche-seite small { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.35; }
:is(.hilfe-suche-treffer, .hilfe-suche-seite):hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.hilfe-suche-ausschnitt { font-size: 0.88rem; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.hilfe-suche-leer p { margin: 0.3rem 0; }
.hilfe-suche-vorschlaege { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.hilfe-suche-vorschlaege a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.2rem 0.75rem; border: 1px solid var(--border-soft); border-radius: 999px;
  color: var(--text-primary); text-decoration: none; }
.hilfe-suche-vorschlaege a:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.hilfe-suche-tipp { color: var(--text-secondary); font-size: 0.88rem; }
.hilfe-abschnitt :is(h3, h4, p > strong:first-child) { scroll-margin-top: calc(var(--kopf-hoehe) + 0.75rem); }
.hilfe-ziel { animation: hilfe-ziel 1.8s ease-out; border-radius: 6px; }
@keyframes hilfe-ziel { from { background: color-mix(in srgb, var(--color-primary) 25%, transparent); } to { background: transparent; } }
@media (max-width: 1099.98px) {
  .hilfe-suche-ergebnis { grid-template-columns: minmax(0, 1fr); }
  .hilfe-abschnitt :is(h3, h4, p > strong:first-child) { scroll-margin-top: calc(var(--kopf-hoehe) + 3.75rem); }
}
/* Handy und Tablet: eine Spalte, fingergerechte Ziele, Feld 16 px (sonst zoomt iOS hinein); auf dem Handy nur die Lupe im Knopf. */
html:is([data-geraet="handy"], [data-geraet="tablet"]) .hilfe-suche-ergebnis { grid-template-columns: minmax(0, 1fr); }
html[data-touch] .hilfe-suche-feld input { font-size: 16px; min-height: 44px; }
html[data-touch] :is(.hilfe-suche-leeren, .hilfe-ergebnis-zu) { width: 44px; height: 44px; }
html[data-geraet="handy"] .hilfe-ergebnisfenster #hilfe-suche-ziel { padding: 0.5rem; }
html[data-touch] :is(.hilfe-suche-knopf, .hilfe-antwort-knoepfe .btn, .hilfe-antwort-mehr) { min-height: 44px; }
html[data-touch] .hilfe-suche-vorschlaege a { min-height: 44px; }
/* Suche der Hilfe in der Kopfzeile (seit 03.11.2026, Wunsch des Nutzers): die Kopfzeile klebt oben, so bleibt die Suche beim Scrollen
   sichtbar und die Hilfe hat oben mehr Platz. Am PC und Tablet steht das Feld zwischen Titel und Knöpfen; der Titel gibt nach. */
.topbar-suche-bereich { flex: 1 1 26rem; min-width: 0; max-width: 42rem; display: flex; align-items: center; }
.topbar-suche { flex: 1 1 auto; min-width: 0; }
.topbar-suche .hilfe-suche-feld input { padding: 0.45rem 0; }
.topbar-suche .hilfe-suche-knopf { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.topbar-suche-bereich .topbar-suche-oeffnen, .topbar-suche-bereich .topbar-suche-schliessen { display: none; }
/* Platz fürs Feld: in der Hilfe ohne Beschreibung unter dem Titel („Hilfe“ sagt genug), der Suchen-Knopf nur mit Lupe; bei weniger
   als 1600 px ohne den Namen neben dem Bild (sonst blieb neben Sprache und Knöpfen am PC kaum Feld übrig). */
.topbar:has(.topbar-suche-bereich) .topbar-left { flex: 0 0 auto; min-width: 0; }
.topbar:has(.topbar-suche-bereich) .topbar-left > div { min-width: 0; }
.topbar:has(.topbar-suche-bereich) .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar:has(.topbar-suche-bereich) .topbar-subtitle { display: none; }
.topbar-suche .hilfe-suche-knopf { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; }
.topbar-suche .hilfe-suche-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1599.98px) { .topbar:has(.topbar-suche-bereich) .topbar-benutzer-name { display: none; } }
/* Touch: Knopf fingergerecht. */
html[data-touch] .topbar-suche .hilfe-suche-knopf { min-width: 44px; min-height: 44px; }
/* Handy: in der schmalen Kopfzeile nur eine Lupe; sie klappt das Feld über die ganze Kopfzeile auf (html[data-hilfe-suche-offen], js/hilfe.js),
   mit Text bleibt es offen (auch nach ?q= in der Adresse). ← schließt und leert. Den Suchen-Knopf ersetzt die Taste der Bildschirmtastatur. */
html[data-geraet="handy"] .topbar-suche-bereich { flex: none; max-width: none; }
html[data-geraet="handy"] .topbar:has(.topbar-suche-bereich) .topbar-left { flex: 1 1 auto; }
html[data-geraet="handy"] .topbar-suche-bereich .topbar-suche-oeffnen { display: inline-flex; }
html[data-geraet="handy"] .topbar-suche { display: none; }
html[data-geraet="handy"][data-hilfe-suche-offen] .topbar-suche,
html[data-geraet="handy"] .topbar-suche:has(input:not(:placeholder-shown)) {
  display: flex; position: absolute; inset: 0; z-index: 3; gap: 0.25rem; padding: 0 0.6rem 0 0.25rem; background: var(--popup-bg); }
html[data-geraet="handy"] .topbar-suche-bereich .topbar-suche-schliessen { display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-primary); cursor: pointer; }
html[data-geraet="handy"] .topbar-suche-schliessen:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
html[data-geraet="handy"] .topbar-suche .hilfe-suche-knopf { display: none; }
html[data-geraet="handy"] .hilfe-antwort { padding: 0.8rem 0.85rem; }
html[data-geraet="handy"] .hilfe-antwort-knoepfe .btn { flex: 1 1 100%; justify-content: center; }

/* Inventuren: Auswahlkacheln und Vorschläge (seit der letzten Inventur bestellt, noch nicht gezählt) */
.inventur-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.inventur-kachel { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem; text-decoration: none; color: var(--text-primary);
  transition: transform 0.12s, box-shadow 0.12s; }
.inventur-kachel > i { font-size: 1.8rem; color: var(--accent, #3b82f6); }
.inventur-kachel h3 { margin: 0.3rem 0 0; }
.inventur-kachel p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
a.inventur-kachel:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.inventur-kachel-folgt { opacity: 0.6; cursor: default; }
.inventur-kachel-folgt .chip { align-self: flex-start; }
.liefer-vorschlag td:first-child { box-shadow: inset 3px 0 0 #8b5cf6; }
.liefer-vorschlag-marke { display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  line-height: 1.35; background: rgba(139, 92, 246, 0.16); color: #a78bfa; vertical-align: 1px; }
:root[data-grundton="light"] .liefer-vorschlag-marke { color: #6d28d9; }
.bestell-lieferschein, .bestell-rechnung { margin-left: 0.6rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  vertical-align: 2px; background: var(--row-hover); color: var(--text-secondary); }
.bestell-text-anzeige { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }
.bestell-lieferung-wahl .btn.lieferung-offen { position: relative; }
/* Demo-Modus (anonymisierte Daten, seit 05.10.2026) */
.demo-abzeichen { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; background: rgba(124, 58, 237, 0.16); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.5); white-space: nowrap; }
:root[data-grundton="light"] .demo-abzeichen { color: #6d28d9; }
.login-form-wrap .demo-abzeichen { margin: 0.25rem 0 0.75rem; }
.bestell-lieferung-wahl .btn.lieferung-abgerechnet { box-shadow: inset 0 -3px 0 var(--bad-text); }
/* Lieferschein ohne Bestellung (seit 14.10.2026): Lieferung blass - dort ist kein Lieferschein möglich. */
.bestell-lieferung-wahl .btn.lieferung-ohne-bestellung:not(.btn-primary) { opacity: 0.45; }
.bestell-lieferung-wahl .btn.lieferung-offen::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #f08c1a; }
:root[data-grundton="light"] .liefer-offen-marke, :root[data-grundton="light"] .liefer-offen-zahl, :root[data-grundton="light"] .bestell-offen,
:root[data-grundton="light"] .bestell-status-offen { color: #b45f00; }
.bestell-wochen .schnitt { font-weight: 600; color: var(--text-primary); }
.bestell-wochen-artikel { min-width: 10rem; }
.bestell-wochen-artikel .fa-check { color: var(--ok-text); margin-right: 0.3rem; }
.bestell-erfasst td { color: var(--text-secondary); }
.bestell-vorwoche { color: var(--text-secondary); font-size: 0.9rem; }
.bestell-lieferung-wahl { display: flex; flex-wrap: nowrap; gap: 0.25rem; }
.bestell-lieferung-wahl .btn { min-width: 2.2rem; padding: 0.5rem 0.45rem; justify-content: center; }
.bestell-lieferung-wahl .btn.vorhanden:not(.btn-primary) { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

/* Lieferungen: Vorgabe, änderbare Menge, Artikel als Knopf. */
.liefer-artikel-nr { color: var(--text-secondary); margin-right: 0.35rem; font-variant-numeric: tabular-nums; }
.liefer-artikel { border: none; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; text-align: left; }
.liefer-artikel:hover { color: var(--color-primary); text-decoration: underline; }
.liefer-vorgabe { color: var(--text-secondary); }
.liefer-menge-eingabe { width: 6.5rem; padding: 0.25rem 0.45rem !important; text-align: right; font-size: 0.85rem; }
.liefer-geaendert td { background: rgba(250, 178, 25, 0.10); }
.liefer-geaendert .liefer-menge-eingabe { border-color: var(--warning); }
.liefer-hinweis-aenderung { color: var(--warning); }
.widget-menue-wochentage { flex-wrap: wrap; }
.widget-menue-wochentage .btn { min-width: 2.4rem; flex: 0 0 auto; }
/* Zuletzt erfasste Position (direkt unter der Eingabezeile) kurz hervorheben. */
.bestell-zuletzt td { animation: bestell-neu 1.6s ease-out; }
@keyframes bestell-neu { from { background: rgba(0, 119, 255, 0.18); } to { background: transparent; } }
.liefer-hinweis-fehler { color: var(--critical); font-weight: 600; }
.liefer-entfernt td:not(:has(input)) { text-decoration: line-through; color: var(--text-secondary); }
/* Rollen: Rechte nach Gruppen (Dashboard-Charts, Statistik-Werte). */
.rechte-gruppe { margin: 0.3rem 0 0.4rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
.rechte-gruppe-kopf { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
/* Spaltenrechte der Erfassungsseiten (Rollen, seit 05.10.2026) */
.rechte-spalten { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 0.4rem; }
.rechte-spalten th, .rechte-spalten td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line-soft); text-align: center; }
.rechte-spalten th:first-child, .rechte-spalten td:first-child { text-align: left; }
.rechte-spalten th { font-weight: 600; color: var(--text-secondary); }
.rechte-gruppe-kopf strong { flex: 1 1 auto; }
.bestell-kunde-fest { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); }
/* Lieferkunde (ohne Filialgruppe): kompakte Gruppen nebeneinander, Aktualisieren in normaler Breite daneben. */
.filter-gruppen.filter-gruppen-kunde { display: flex; flex-wrap: wrap; align-items: stretch; }
.filter-gruppen-kunde > .filter-gruppe { flex: 1 1 17rem; max-width: 26rem; }
.filter-gruppen-kunde .filter-gruppe-zwei { grid-template-columns: 1fr; }
.filter-gruppen-kunde > .filter-gruppe-aktion { flex: 0 0 auto; align-self: flex-end; margin-bottom: 0.85rem; }
.filter-gruppen-kunde > .filter-gruppe-aktion .btn { width: auto; padding: 0.55rem 1.4rem; }
.bestell-lieferung-wahl .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Dashboard: Begrüßung und Kundenkarte (seit 02.10.2026). */
.dashboard-gruss-text h2 { margin: 0; font-size: 1.45rem; font-weight: 700; }
.dashboard-gruss-text p { margin: 0.2rem 0 0; color: var(--text-secondary); font-size: 0.9rem; }
.kunden-karte { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.1rem; }
.kunden-karte > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kunden-karte strong { font-size: 1rem; }
.kunden-karte-art { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); }
.kunden-karte-adresse { font-size: 0.85rem; color: var(--text-secondary); }
.kunden-karte-adresse i { margin-right: 0.25rem; }
.kunden-karte-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem;
  background: rgba(0, 119, 255, 0.14); color: var(--color-primary); font-size: 1.1rem; flex: 0 0 auto; }
/* Datumsfeld TT.MM.JJJJ mit Kalenderknopf (DatumEingabe, js/datum.js). */
.datum-feld { position: relative; display: block; min-width: 0; }
.datum-feld .datum-text { width: 100%; padding-right: 2.1rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.datum-kalender { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); border: none; background: transparent;
  color: var(--text-secondary); cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 0.4rem; }
.datum-kalender:hover { color: var(--color-primary); background: var(--hover); }
.datum-kalender:disabled { opacity: 0.4; cursor: default; }
.datum-nativ { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.filter-datum-paar .datum-feld .datum-text { padding-left: 0.6rem; }
/* Uhrzeitfeld (UhrzeitEingabe, js/uhrzeit.js, seit 19.10.2026): am PC nur das Uhrzeitfeld des Browsers wie bisher - die Hülle
   zählt im Layout nicht mit; Textfeld und Uhr-Knopf gibt es nur auf Handy und Tablet (Block „Uhrzeit- und Datumsfelder“). */
.uhrzeit-feld { display: contents; }
.uhrzeit-feld .uhrzeit-text, .uhrzeit-feld .uhrzeit-uhr { display: none; }
/* Texte zu Lieferungen und Artikeln (Bestellseite). */
.liefer-tabelle tr.liefer-text-zeile td { padding: 0.15rem 0.6rem 0.45rem 2.2rem; font-size: 0.85rem; font-style: italic; color: var(--text-secondary); border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.liefer-tabelle tbody tr.liefer-kopf:has(+ tr.liefer-text-zeile) td { border-bottom: none; }
.liefer-pos-text { display: block; font-size: 0.85rem; font-style: italic; color: var(--text-secondary); margin-top: 0.1rem; }
.liefer-pos-text.geaendert { color: var(--warning); }
.bestell-text-eingabe { width: 100%; margin-top: 0.3rem; font-size: 0.85rem !important; padding: 0.3rem 0.5rem !important; }
.bestell-pos-text { display: block; font-size: 0.85rem; font-style: italic; color: var(--text-secondary); }
.bestell-lieferung-texte { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.bestell-lieferung-texte .form-label { margin: 0; white-space: nowrap; }
@media (max-width: 900px) { .bestell-lieferung-texte { grid-template-columns: 1fr; } }
.bestell-wochen .bestell-wochen-nr { white-space: nowrap; width: 1%; }

/* Sprachwahl der Admins in der Kopfzeile (seit 05.10.2026). */
.sprach-wahl { width: auto; min-width: 0; padding: 0.35rem 0.5rem; font-size: 0.9rem; }

/* Lizenzen in der Benutzerverwaltung (seit 06.10.2026) */
.lizenz-zahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.lizenz-zahlen strong { font-size: 1.05rem; margin-right: 0.4rem; }

/* Seit 14.10.2026 im Fenster der Glocke statt als Karte. */
.tagesinfo, .tagesinfo-alle, .tagesinfo-editor { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.tagesinfo-neu, .aufgaben-neu { align-self: flex-start; }
.glocke-reiter button span { opacity: 0.7; }
.tagesinfo-aktionen { margin-left: auto; display: flex; align-items: center; }
.tagesinfo-aktionen .btn-icon { padding: 0.25rem 0.4rem; }
.tagesinfo-aktionen .btn-icon:hover, .tagesinfo-bearbeiten:hover { color: var(--text-primary); }
.tagesinfo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tagesinfo-eintrag { padding: 0.35rem 0.55rem; border-radius: var(--radius-main); background: var(--surface); border-left: 3px solid transparent; }
.tagesinfo-eintrag.wichtig { border-left-color: var(--error-strong); }
.tagesinfo-eintrag.wichtig .fa-triangle-exclamation { color: var(--error-strong); }
.tagesinfo-eintrag-kopf { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; min-width: 0; }
.tagesinfo-eintrag-kopf strong { overflow: hidden; text-overflow: ellipsis; }
.tagesinfo-meta { margin-left: auto; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
.tagesinfo-bearbeiten { padding: 0.1rem 0.3rem; font-size: 0.85rem; }
.tagesinfo-punkte-liste { margin: 0.15rem 0 0 1.1rem; padding: 0; font-size: 0.97rem; line-height: 1.4; }
.tagesinfo-punkte-liste li { margin: 0.05rem 0; }
.tagesinfo-mehr-punkte { list-style: none; color: var(--text-secondary); font-size: 0.9rem; }
.tagesinfo-punkt-neu { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.tagesinfo-panel-gruppe { margin: 0.9rem 0 0.3rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.tagesinfo-liste.abgelaufen .tagesinfo-eintrag { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; }
.tagesinfo-liste.abgelaufen .tagesinfo-eintrag-kopf { flex-direction: column; align-items: flex-start; }
.tagesinfo-liste.abgelaufen .tagesinfo-meta { margin-left: 0; }
.tagesinfo-punkte { display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; }
.tagesinfo-punkte > .btn { align-self: flex-start; }
.tagesinfo-punkt-zeichen { color: var(--text-secondary); padding: 0 0.2rem; }
.tagesinfo-laufzeit { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tagesinfo-datum { margin-top: 0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tagesinfo-datum > :not(span) { width: 10rem; }
/* Laufzeit der Tagesinfo (seit 30.10.2026 DatumWahl). */
.tagesinfo-laufzeit-datum { margin-top: 0.4rem; max-width: 26rem; }
.tagesinfo-punkt { font-family: inherit; }

/* Benutzergruppen (seit 06.10.2026). */
.benutzergruppe-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.benutzergruppe-person { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 14rem; min-width: 0; cursor: pointer; }
.benutzergruppe-recht { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--text-secondary); margin-left: auto; white-space: nowrap; cursor: pointer; }
.benutzergruppe-nur { white-space: nowrap; margin: 0; }
.chip-gruppe { border-style: dashed; }
/* Goecom-Zugang (seit 07.10.2026) */
.chip-goecom { border-color: var(--color-primary); color: var(--color-primary); }
.benutzer-goecom td { opacity: .85; }

/* "Ausschuss gestern": Tacho (SVG) mit Ampel gegen die Vorwoche und die 5 Artikel mit dem meisten Ausschuss (seit 06.10.2026). */
.ausschuss-gestern { display: flex; flex-direction: column; height: 100%; container-type: inline-size; }
/* "Heute zu tun" und Tagesinfos als Dashboard-Elemente (seit 15.10.2026): Liste scrollt innerhalb der Karte. */
.liste-widget { display: flex; flex-direction: column; height: 100%; }
.liste-widget-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding-top: 0.25rem; }
.ausschuss-inhalt { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0.5rem 1.25rem; align-items: center; padding: 0 1.25rem 1rem; min-height: 0; }
@container (max-width: 30rem) { .ausschuss-inhalt { grid-template-columns: 1fr; } }
.ausschuss-tacho { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; --tacho: var(--color-primary); }
.ausschuss-tacho.gut { --tacho: #22a06b; }
.ausschuss-tacho.mittel { --tacho: var(--warning); }
.ausschuss-tacho.schlecht { --tacho: var(--error-strong); }
.ausschuss-tacho svg { width: 100%; max-width: 15rem; height: auto; overflow: visible; }
.ausschuss-spur, .ausschuss-wert { fill: none; stroke-width: 16; stroke-linecap: round; }
.ausschuss-spur { stroke: var(--border-soft); }
.ausschuss-wert { stroke: var(--tacho); transition: stroke-dasharray 0.6s ease; }
.ausschuss-vorwoche { stroke: var(--text-primary); stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.ausschuss-zahl { font-size: 30px; font-weight: 700; fill: var(--text-primary); }
.ausschuss-skala { font-size: 12px; fill: var(--text-secondary); }
.ausschuss-vergleich { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.85rem; color: var(--text-secondary); text-align: center; }
.ausschuss-diff { color: var(--tacho); font-weight: 600; }
.ausschuss-top-titel { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.ausschuss-top ol { list-style: none; counter-reset: platz; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ausschuss-top li { counter-increment: platz; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.ausschuss-top li::before { content: counter(platz); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--text-primary); font-size: 0.85rem; font-weight: 700; }
.ausschuss-top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ausschuss-top-stueck { font-weight: 700; font-variant-numeric: tabular-nums; }
.ausschuss-top-quote { font-size: 0.85rem; color: var(--text-secondary); min-width: 3.2rem; text-align: right; }

/* Heute zu tun unter dem Datum der Begrüßung (seit 06.10.2026). */
.zu-tun { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.zu-tun-titel { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-right: 0.15rem; }
.zu-tun-punkt { display: inline-flex; align-items: center; gap: 0.1rem; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface);
  padding: 0.1rem 0.2rem 0.1rem 0.65rem; font-size: 0.85rem; }
.zu-tun-punkt a { color: var(--text-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.zu-tun-punkt a:hover { color: var(--color-primary); }
.zu-tun-punkt a .fa-solid { color: var(--color-primary); }
.zu-tun-punkt.dringend { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.zu-tun-punkt.dringend a .fa-solid { color: var(--warning); }
.zu-tun-punkt .btn-icon { padding: 0.15rem 0.35rem; font-size: 0.85rem; }
.zu-tun-punkt .btn-icon:hover { color: #22a06b; }

/* Seitenfenster der Tagesinfos und Aufgaben noch etwas größer (seit 07.10.2026) - für ältere Augen. */
.tagesinfo-panel .tagesinfo-eintrag-kopf { font-size: 1.08rem; }
.tagesinfo-panel .tagesinfo-punkte-liste { font-size: 1.05rem; }
.tagesinfo-panel .tagesinfo-meta { font-size: 0.9rem; }

/* Heute zu tun als Aufgabenliste (seit 07.10.2026, seit 14.10.2026 im Fenster der Glocke). */
.aufgaben { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.aufgaben-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.aufgaben-punkt { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-main); background: var(--surface);
    border-left: 3px solid transparent; font-size: 1rem; line-height: 1.35; min-width: 0; }
.glocke-panel .aufgaben-punkt { font-size: 1.08rem; padding: 0.5rem 0.6rem; }
.aufgaben-punkt.ueberfaellig { border-left-color: var(--error-strong); }
.aufgaben-punkt.bald { border-left-color: var(--warning); }
.aufgaben-punkt.spaeter { color: var(--text-secondary); }
.aufgaben-punkt.erledigt .aufgaben-text { text-decoration: line-through; color: var(--text-secondary); }
.aufgaben-text { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.aufgaben-text small { display: block; font-size: 0.85rem; color: var(--text-secondary); }
a.aufgaben-text:hover { color: var(--color-primary); }
.aufgaben-text .fa-solid { color: var(--color-primary); margin-right: 0.15rem; }
.aufgaben-pfeil { font-size: 0.85rem; opacity: 0.6; }
.aufgaben-icon { color: var(--color-primary); width: 1.2rem; text-align: center; }
.aufgaben-zeit { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92rem; padding: 0.05rem 0.45rem; border-radius: 999px;
    background: var(--active); color: var(--text-primary); white-space: nowrap; }
.aufgaben-punkt.ueberfaellig .aufgaben-zeit { background: var(--error-strong); color: #fff; }
.aufgaben-punkt.bald .aufgaben-zeit { background: var(--warning); color: #1a1a1a; }
.aufgaben-haken { flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--border-soft); background: transparent;
    color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; padding: 0; }
.aufgaben-haken:hover { border-color: #22a06b; color: #22a06b; }
.aufgaben-haken.fertig { background: #22a06b; border-color: #22a06b; color: #fff; }
span.aufgaben-haken { cursor: default; }
.aufgaben-erledigt-zahl { margin-left: auto; font-size: 0.9rem; color: #22a06b; }
.aufgaben-reiter { padding: 0 1rem; }
.aufgaben-vorlagen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.45rem; }
.aufgaben-vorlagen .chip { cursor: pointer; border: 1px solid var(--border-soft); font: inherit; font-size: 0.9rem; }
.aufgaben-ziel-wahl { margin-top: 0.4rem; }
.aufgaben-uhrzeit { width: 8rem !important; }
.aufgaben-wiederholung { align-items: center; margin-bottom: 0.3rem; }
.aufgaben-einstellung { color: var(--text-primary); }
.aufgaben-vorlagen .chip-aktiv { background: rgba(57, 135, 229, 0.18); border-color: rgba(57, 135, 229, 0.6); }
.aufgaben-reiter button { font-size: 0.9rem; padding: 0.2rem 0.75rem; }

/* Protokolle "Wer hat erledigt?" / "Wer hat gelesen?" (seit 07.10.2026) - für alle, die Aufgaben bzw. Tagesinfos vergeben. */
.protokoll { list-style: none; margin: -0.1rem 0 0.3rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-main);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--surface)); border: 1px solid var(--border-soft); }
.protokoll-tage { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.45rem; }
.protokoll-tage button { border: 1px solid var(--border-soft); background: transparent; color: var(--text-secondary); border-radius: 999px;
    padding: 0.15rem 0.6rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.protokoll-tage button.aktiv { background: var(--active); color: var(--text-primary); border-color: transparent; font-weight: 600; }
.protokoll-summe { margin: 0 0 0.35rem; font-weight: 600; font-size: 0.95rem; }
.protokoll-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.98rem; }
.protokoll-liste li { display: grid; grid-template-columns: 1.3rem minmax(7rem, auto) 1fr; gap: 0.45rem; align-items: baseline; }
.protokoll-liste li span { color: var(--text-secondary); font-size: 0.9rem; }
.protokoll-liste li.erledigt .fa-circle-check { color: #22a06b; }
.protokoll-liste li.offen .fa-circle { color: var(--border-soft); }
.aufgaben-protokoll-knopf.aktiv, .tagesinfo-protokoll-knopf.aktiv { color: var(--color-primary); }

/* Lizenzen je Art (seit 07.10.2026): je Zeile Name, Balken, "x von y belegt", frei. */
.lizenz-arten { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; max-width: 40rem; }
.lizenz-art { display: grid; grid-template-columns: 9rem minmax(6rem, 1fr) auto auto; align-items: center; gap: 0.75rem; }
.lizenz-art-name { font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.lizenz-art-name .fa-solid { color: var(--color-primary); width: 1rem; text-align: center; }
.lizenz-balken { height: 0.6rem; border-radius: 999px; background: var(--active); overflow: hidden; }
.lizenz-balken > span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.lizenz-balken > span.voll { background: var(--error-strong); }
.lizenz-voll { color: var(--error-strong); font-weight: 600; }
@media (max-width: 600px) { .lizenz-art { grid-template-columns: 1fr auto; } .lizenz-balken { grid-column: 1 / -1; order: 3; } }

/* Erfassungsseiten (seit 07.10.2026): vergangener Tag am Datum, kurze Meldung statt Box, Spaltenansicht, Gruppen,
   sortierbare Spalten, Artikelgruppen. */
.bestell-datum-vergangen .datum-eingabe, .bestell-datum-vergangen input { border-color: var(--warning) !important; background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.bestell-datum-marke { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.4rem; padding: 0 0.45rem; border-radius: 999px;
    background: var(--warning); color: #1a1a1a; font-size: 0.85rem; font-weight: 600; line-height: 1.35rem; }
.bestell-meldung { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; max-width: min(32rem, calc(100vw - 2.4rem)); display: flex; align-items: flex-start;
    gap: 0.55rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-main); border: 1px solid; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: 0.9rem;
    background: var(--popup-bg); }
.bestell-meldung .btn-icon { margin-left: auto; padding: 0.1rem 0.3rem; }
.beleg-werkzeuge { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-left: auto; }
.spalten-ansicht { position: relative; display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.spalten-ansicht-symbol { color: var(--color-primary); }
.spalten-ansicht-liste { width: auto; min-width: 9rem; max-width: 14rem; padding: 0.25rem 0.5rem; font-size: 0.9rem; }
.spalten-ansicht-name { width: 12rem; padding: 0.25rem 0.5rem; font-size: 0.9rem; }
.spalten-ansicht-standard { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--warning); cursor: pointer; }
.spalten-ansicht-wahl.aktiv { color: var(--color-primary); }
.spalten-ansicht-feld { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 40; width: 15rem; max-height: 22rem; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-main); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); padding: 0.35rem; }
.beleg-gruppe td { background: var(--active); font-weight: 600; font-size: 0.9rem; padding: 0.35rem 0.6rem; color: var(--text-primary); }
.beleg-gruppe-zahl { margin-left: 0.35rem; font-weight: 400; color: var(--text-secondary); font-size: 0.85rem; }
th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortierbar:hover { color: var(--color-primary); }
th.sortierbar .sort-symbol { font-size: 0.85rem; opacity: 0.35; margin-left: 0.2rem; }
th.sortierbar.sortiert .sort-symbol { opacity: 1; color: var(--color-primary); }
.artikelgruppen-liste { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.artikelgruppen-liste li { display: flex; align-items: center; gap: 0.35rem; }
.artikelgruppen-liste .artikelgruppe-name { flex: 1; min-width: 0; }
.artikelgruppen-liste .btn-klein { white-space: nowrap; }
.bestell-meldung.status-rueckwirkend { background: color-mix(in srgb, var(--warning) 18%, var(--popup-bg)); }
th.sortierbar .sort-knopf { border: none; background: transparent; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
th.sortierbar .sort-knopf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }
th.sortierbar { cursor: default; }
/* Ganze Kopfzelle klickbar (wie vorher), Text bleibt links bzw. bei Zahlen rechts. */
th.sortierbar > .sort-knopf:only-child { width: 100%; text-align: inherit; display: block; }

/* Seit 07.10.2026: Spaltenköpfe der Artikel bleiben beim Scrollen stehen (über der Kopfzeile der Lieferungen), Gruppen
   klappbar. Die innere Rolle der "mehreren Lieferungen" scrollt nicht selbst, sonst greift "sticky" nicht. */
.beleg-tabelle-karte .beleg-artikel > thead th { z-index: 3; background: var(--table-head-bg); }
.beleg-tabelle-karte .beleg-artikel > thead th.beleg-vergleich { background: var(--table-head-bg); }
.beleg-tabelle-karte .widget-tabelle-wrap .widget-tabelle-wrap { overflow: visible; margin-top: 0; }
.beleg-gruppe-knopf { border: none; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; }
.beleg-gruppe-knopf .fa-solid { width: 0.8rem; color: var(--color-primary); }
.beleg-gruppe.zu td { opacity: 0.85; }
.beleg-gruppen-alle { display: inline-flex; gap: 0.1rem; }

/* Ansicht "Gruppen" (seit 12.10.2026): links die Gruppen als große Knöpfe (klebt beim Scrollen), rechts die Artikel der
   gewählten Gruppe. In der Liste sind die Rahmen unsichtbar (display: contents), die Tabelle bleibt wie sie war. */
.beleg-ungeteilt, .beleg-ungeteilt > .beleg-geteilt-artikel { display: contents; }
.beleg-geteilt { display: flex; align-items: flex-start; gap: 0.75rem; }
.beleg-geteilt-artikel { flex: 1 1 auto; min-width: 0; }
.beleg-gruppenliste { flex: 0 0 13rem; position: sticky; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 0.3rem;
  max-height: calc(var(--rest-hoehe, 80vh) - 7rem); min-height: 6rem; overflow-y: auto; padding: 0.15rem; }
.beleg-gruppenliste-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%;
  padding: 0.7rem 0.85rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface);
  color: var(--text-primary); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.beleg-gruppenliste-eintrag:hover { background: var(--hover); }
.beleg-gruppenliste-eintrag:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.beleg-gruppenliste-eintrag.aktiv { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.beleg-gruppenliste-eintrag.aktiv .beleg-gruppe-zahl { color: rgba(255, 255, 255, 0.85); }
.beleg-gruppenliste-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.beleg-gruppenliste-eintrag .liefer-offen-zahl { margin-left: 0; flex-shrink: 0; }
.beleg-gruppenliste-eintrag.aktiv .liefer-offen-zahl { background: #fff; color: #b45309; }
.beleg-ansicht-schalter .btn { gap: 0.35rem; }
/* Wahl der Gruppierung (seit 12.10.2026): in der Leiste der Tabelle bzw. oben in der Gruppenliste. */
.beleg-werkzeuge .beleg-gruppierung-wahl { width: auto; max-width: 14rem; padding: 0.35rem 0.6rem; }
.beleg-gruppenliste .beleg-gruppierung-wahl { width: 100%; margin-bottom: 0.25rem; }
.beleg-gruppenliste-hinweis { margin: 0.25rem 0.1rem; }

/* Rückfrage beim Abmelden (seit 07.10.2026). */
.abmelden-dialog { width: min(26rem, 92vw); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.abmelden-dialog h3 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 0.55rem; }
.abmelden-dialog h3 .fa-solid { color: var(--color-primary); }
.abmelden-dialog p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.45; }
.abmelden-knoepfe { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; }
.modal-overlay.modal-mitte { align-items: center; padding: 1rem; }

/* Geräte & Anmeldungen (seit 07.10.2026). */
.anmeldungen-kopf { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.anmeldungen-suche { max-width: 18rem; }
.anmeldungen-tabelle td { vertical-align: top; }
.anmeldungen-tabelle small { color: var(--text-secondary); }
.anmeldung-symbol { color: var(--color-primary); width: 1.1rem; text-align: center; margin-right: 0.25rem; }
.anmeldung-beendet td { color: var(--text-secondary); }
.anmeldung-diese td { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.anmeldung-ip { font-variant-numeric: tabular-nums; }
.profil-geraete { grid-column: 1 / -1; }


/* Bestelleinheiten (seit 07.10.2026): Spalte "Einheit", fett = Eingabe in Einheiten; neben dem Mengenfeld, worin gerade
   eingegeben wird. */
.einheit { white-space: nowrap; font-size: 0.9rem; color: var(--text-secondary); }
.einheit small { opacity: .8; }
.einheit-eingabe { font-weight: 700; color: var(--color-primary); }
.einheit-eingabe i { font-size: 0.85rem; margin-right: 2px; }
.einheit-keine { opacity: .7; }
.einheit-stueck { display: inline-block; margin-left: 4px; font-weight: 600; color: var(--text-primary); }
.menge-stueck { display: block; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.1; }
.menge-unvoll::placeholder { color: var(--warning); opacity: 1; }
.col-einheit, .beleg-einheit { white-space: nowrap; }
.menge-einheit { display: block; margin-top: 2px; line-height: 1.1; }
.menge-einheit .einheit { font-size: 0.85rem; }

/* Anmeldung: Inaktivität, Sperre für alle, Anmeldezeiten (seit 08.10.2026) */
.anmelderegeln-zeilen { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.anmelderegeln-inaktiv { max-width: 220px; }
.formular-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.anmelderegeln-frage { font-weight: 600; }
.anmeldezeit-eingabe { display: flex; flex-direction: column; gap: 6px; }
.anmeldezeit-uhrzeit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.anmeldezeit-uhrzeit label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--text-secondary); }
.anmeldezeit-uhrzeit input[type="time"] { width: 120px; }
.anmeldezeit-tage { display: flex; flex-wrap: wrap; gap: 4px; }
.anmeldezeit-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 4px 8px; border-radius: 8px;
    border: 1px solid var(--border-soft); cursor: pointer; font-size: 0.9rem; user-select: none; }
.anmeldezeit-tag input { display: none; }
.anmeldezeit-tag.an { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip-anmeldezeit { border-color: var(--color-primary); }
.benutzer-knoepfe { white-space: nowrap; }
.anmeldezeiten-uebernehmen { padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 12px; }
.anmeldezeiten-tabelle tr.gewaehlt td { background: var(--surface); }

/* Anmeldezeit: mehrere Zeitfenster und Sperrzeiträume (seit 08.10.2026) */
.anmeldezeit-fenster, .anmeldezeit-sperre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px;
    border: 1px solid var(--border-soft); border-radius: 10px; }
.anmeldezeit-sperre label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--text-secondary); }
.anmeldezeit-sperre > .datum-wahl { flex: 1 1 18rem; max-width: 26rem; }
.anmeldezeit-sperre-titel { font-weight: 600; color: var(--error-text); }
.anmeldezeit-fenster-neu, .anmeldezeit-sperre-neu { align-self: flex-start; }

/* Spalten der Erfassungsseiten: Seiten, die die Rolle nicht sieht, ausgegraut; Zeile "alle" (seit 08.10.2026) */
.rechte-spalten tr.rechte-spalten-aus td { opacity: .4; }
.rechte-spalten tr.rechte-spalten-alle th { font-weight: 400; font-size: 0.85rem; border-bottom: 2px solid var(--line-soft); }

/* Spalten ein-/ausblenden: Klick daneben schließt (seit 08.10.2026) */
.spalten-ansicht-hintergrund { position: fixed; inset: 0; z-index: 39; background: transparent; }
/* Die Leiste selbst (Ansichten, +, Regler) bleibt über der Fläche bedienbar. */
.spalten-ansicht > :not(.spalten-ansicht-hintergrund):not(.spalten-ansicht-feld) { position: relative; z-index: 40; }

/* Sonderbestellungen (seit 08.10.2026): je Kunde eine aufklappbare Zeile, Fenster in zwei Schritten, Spalte auf der Bestellseite. */
.sonder-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.55rem 0.75rem; cursor: pointer; }
.sonder-kopf:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: -2px; }
.sonder-pfeil { width: 1rem; color: var(--text-secondary); }
.sonder-name { font-weight: 600; }
.sonder-frage { font-size: 0.9rem; }
.sonder-details { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; padding: 0 0.75rem 0.5rem; color: var(--text-secondary); font-size: 0.9rem; white-space: pre-line; }
.sonder-artikel { margin: 0 0.75rem 0.75rem; width: calc(100% - 1.5rem); }
.sonder-text { color: var(--text-secondary); }
/* Fenster fest groß (seit 08.10.2026): nur der Inhalt scrollt, die Trefferliste liegt darüber - keine Scrollbalken am Fenster. */
.modal-overlay.sonder-overlay { padding: 5vh 1rem 1rem; align-items: flex-start; }
.modal-box.sonder-dialog { max-width: 64rem; width: 100%; height: min(44rem, 90vh); max-height: 90vh; overflow: visible; display: flex; flex-direction: column; }
.sonder-dialog-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
.sonder-dialog .sonder-fuss { flex: 0 0 auto; }
/* Vorbestellungen als Tabelle (seit 06.11.2026): Kopf mit Suche nach Abholnummer, Einstellungen (Admins) und „Neue Vorbestellung“; Zeilen mit
   Abholnummer, Abholzeit, Name, Telefon, E-Mail, Artikel (klappt auf), Wert, Status und Bearbeiten/Etikett/Löschen. Listenmodus (seit
   09.11.2026 alle außer Messe): je Tag eine Gruppenzeile. Auf dem Handy Karten (karten-tabelle). */
/* Kopf in einer Zeile (seit 10.11.2026, „kompakter und eleganter“): links Titel + „Neue Vorbestellung“ als Gruppe, rechts die Werkzeuge; ist es
   zu eng, rücken die Werkzeuge geschlossen in die zweite Zeile (der Knopf bleibt beim Titel). Die Erklärung steht nur als Tooltip am Titel. */
.vorbestell-kopf { align-items: center; gap: 0.5rem 0.75rem; }
.vorbestell-werkzeuge :is(.vorbestell-historie-knopf, .vorbestell-einstellungen-knopf, .vorbestell-suche-knopf, .vorbestell-kamera-knopf) { padding-inline: 0.65rem; }
.vorbestell-titel-gruppe { display: flex; align-items: center; gap: 0.5rem 1rem; min-height: 2.5rem; }
.vorbestell-titel-gruppe > .vorbestell-titel { white-space: nowrap; cursor: help; }
.vorbestell-titel-gruppe > .sonder-neu { white-space: nowrap; }
/* Die Werkzeuge füllen den Rest der Zeile (seit 10.11.2026) - so wachsen Filiale und Suche in freien Platz, statt dass der Filialname umbricht. */
.vorbestell-werkzeuge { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.vorbestell-werkzeuge > .filter-field { margin: 0; }
/* Der Zeitraum ist ein Container (Von/Bis untereinander unter 22rem) - ohne feste Breite wäre er im Flex-Kopf 0 breit. Breiten seit 10.11.2026
   schmaler, damit der Kopf ab etwa 1900 px Bildschirm (mit Seitenleiste) in eine Zeile passt. */
.vorbestell-werkzeuge > .vorbestell-zeitraum { flex: 0 1 22.4rem; width: 22.4rem; max-width: 100%; }
.vorbestell-werkzeuge > .vorbestell-filiale { flex: 1 1 17rem; width: 17rem; min-width: 0; max-width: 28rem; }
/* Die Suche schrumpft, bevor etwas umbricht (Grundbreite 8rem fürs Umbrechen) - sonst stand bei 1440 px das Zahnrad allein in einer dritten
   Zeile. Freien Platz teilt sie sich mit der Filiale, bis ihr Platzhalter in der Sprache des Benutzers ganz zu lesen ist (seit 11.11.2026,
   #123): der unsichtbare Text in .vorbestell-suche-mass gibt die Breite vor (mindestens 11,5rem); wird es eng, endet der Platzhalter mit „…“. */
.vorbestell-suche { display: flex; align-items: center; gap: 0.25rem; flex: 1 1 8rem; min-width: 0; max-width: max-content; }
.vorbestell-suche-mass { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; min-width: 0; }
.vorbestell-suche-mass > * { grid-area: 1 / 1; }
/* Schrift (die der Eingabefelder, nicht die der Seite) und Innenabstand wie im Feld. */
.vorbestell-suche-mass > span { min-width: 11.5rem; block-size: 0; overflow: hidden; visibility: hidden; white-space: nowrap;
  font: -webkit-small-control; font-size: 0.9rem; padding-inline: calc(0.8rem + 1px) calc(0.8rem + 1px + 0.3rem); }
.vorbestell-suche-feld { min-width: 0; text-overflow: ellipsis; }
/* Das ✕ zum Leeren hält auch im leeren Feld seinen Platz frei - dort gibt es nichts zu leeren, der Platz gehört dem Platzhalter. */
.vorbestell-suche-feld:placeholder-shown::-webkit-search-cancel-button { display: none; }
.vorbestell-tabelle td { vertical-align: middle; }
.vorbestell-tabelle td.vorbestell-nr { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vorbestell-tabelle td.vorbestell-zeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vorbestell-tabelle td.vorbestell-mail { overflow-wrap: anywhere; min-width: 8rem; }
.vorbestell-tabelle td.vorbestell-telefon, .vorbestell-tabelle td.vorbestell-wert, .vorbestell-status .chip { white-space: nowrap; }
.vorbestell-tabelle td.vorbestell-aktionen { text-align: right; white-space: nowrap; }
.vorbestell-tabelle td.vorbestell-aktionen > * { vertical-align: middle; }
.vorbestell-tabelle .sonder-pfeil.btn { width: auto; padding: 0.15rem 0.45rem; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.vorbestell-tabelle .sonder-pfeil i { width: 0.8rem; color: var(--text-secondary); }
.vorbestell-tabelle tr.vorbestell-gruppe td { background: var(--surface-faint); font-weight: 600; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.vorbestell-gruppe-lfg, .vorbestell-gruppe-anzahl { font-weight: 400; color: var(--text-secondary); margin-left: 0.4rem; }
.vorbestell-gruppe-anzahl { float: right; }
.vorbestell-tabelle tr.vorbestell-markiert > td { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.vorbestell-tabelle tr.vorbestell-wirdgeloescht .sonder-name { text-decoration: line-through; }
.vorbestell-tabelle tr.vorbestell-wirdgeloescht > td { opacity: 0.8; }
.vorbestell-tabelle tr.vorbestell-details > td { padding: 0.25rem 0 0.5rem; background: var(--surface-faint); }
.chip-warnung { border-color: color-mix(in srgb, var(--warning) 70%, transparent); }
.modal-box.vorbestell-fertig { max-width: 28rem; width: 100%; text-align: center; }
.vorbestell-fertig-nr { font-size: 2.2rem; font-weight: 700; margin: 0.25rem 0 0.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.vorbestell-fertig-text { margin: 0.25rem 0; color: var(--text-secondary); }
/* Suchfenster der Vorbestellungen (seit 09.11.2026, AuswahlSucheModal): Kopf und Treffer im selben Raster - Abholnr., Abholtag, Abholzeit,
   Name, Telefon, (Filiale), Status; die Spaltenköpfe sortieren. Handy: Vollbild (kunden-suche-dialog), je Treffer drei kurze Zeilen. */
.modal-box.vorbestell-suche-dialog { max-width: 62rem; }
.vorbestell-suche-dialog :is(.vorbestell-suche-kopf, .modal-treffer) {
  display: grid; grid-template-columns: 6.5rem 6.5rem 4.4rem minmax(6rem, 1fr) minmax(5.5rem, 0.8fr) 10.5rem; column-gap: 0.6rem; align-items: center; }
.vorbestell-suche-dialog.mit-filiale :is(.vorbestell-suche-kopf, .modal-treffer) {
  grid-template-columns: 6.5rem 6.5rem 4.4rem minmax(6rem, 1fr) minmax(5.5rem, 0.8fr) 4.6rem 10.5rem; }
/* Tablet (hochkant 800 px): schmalere feste Spalten, Name und Telefon kürzen - der Status bleibt ganz im Fenster. */
html[data-geraet="tablet"] .vorbestell-suche-dialog :is(.vorbestell-suche-kopf, .modal-treffer) {
  grid-template-columns: 5.6rem 6.2rem 4.2rem minmax(4rem, 1fr) minmax(4rem, 1fr) 9.8rem; column-gap: 0.5rem; }
html[data-geraet="tablet"] .vorbestell-suche-dialog.mit-filiale :is(.vorbestell-suche-kopf, .modal-treffer) {
  grid-template-columns: 5.6rem 6.2rem 4.2rem minmax(4rem, 1fr) minmax(4rem, 1fr) 3.8rem 9.8rem; }
/* Ohne Etikett (Einstellung, seit 10.11.2026) keine Spalte Abholnr. */
.vorbestell-suche-dialog.ohne-nummer :is(.vorbestell-suche-kopf, .modal-treffer) {
  grid-template-columns: 6.5rem 4.4rem minmax(6rem, 1fr) minmax(5.5rem, 0.8fr) 10.5rem; }
.vorbestell-suche-dialog.ohne-nummer.mit-filiale :is(.vorbestell-suche-kopf, .modal-treffer) {
  grid-template-columns: 6.5rem 4.4rem minmax(6rem, 1fr) minmax(5.5rem, 0.8fr) 4.6rem 10.5rem; }
html[data-geraet="tablet"] .vorbestell-suche-dialog.ohne-nummer :is(.vorbestell-suche-kopf, .modal-treffer) {
  grid-template-columns: 6.2rem 4.2rem minmax(4rem, 1fr) minmax(4rem, 1fr) 9.8rem; }
html[data-geraet="tablet"] .vorbestell-suche-dialog.ohne-nummer.mit-filiale :is(.vorbestell-suche-kopf, .modal-treffer) {
  grid-template-columns: 6.2rem 4.2rem minmax(4rem, 1fr) minmax(4rem, 1fr) 3.8rem 9.8rem; }
.vorbestell-suche-kopf { padding: 0 0.6rem 0.3rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--border-soft); }
.vorbestell-suche-kopf > * { color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorbestell-suche-kopf > button { border: 0; background: none; font-family: inherit; padding: 0.2rem 0; text-align: left; cursor: pointer; }
.vorbestell-suche-kopf > button:hover, .vorbestell-suche-kopf > button.aktiv { color: var(--color-primary); }
.vorbestell-suche-dialog .modal-treffer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorbestell-suche-dialog .modal-treffer > .vs-nr { color: var(--text-primary); font-weight: 600; }
.vorbestell-suche-dialog .modal-treffer > :is(.vs-tag, .vs-zeit) { font-variant-numeric: tabular-nums; }
.vorbestell-suche-dialog .modal-treffer > :is(.vs-telefon, .vs-filiale) { color: var(--text-secondary); }
.vorbestell-suche-dialog .vs-status .chip { white-space: nowrap; }
.vorbestell-suche-hinweis { padding: 0 0.6rem 0.4rem; }
.modal-box.vorbestell-einstellungen { max-width: 32rem; width: 100%; }
.vorbestell-pflicht { border: 0; padding: 0; margin: 0.75rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; }
.vorbestell-pflicht legend { grid-column: 1 / -1; margin-bottom: 0.25rem; }
.vorbestell-etikett-groesse { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.vorbestell-etikett-groesse .filter-field { flex: 1 1 10rem; }
.vorbestell-etikett-schalter { margin-top: 0.25rem; }
.vorbestell-etikett-erklaerung { margin: 0.2rem 0 0.6rem; }
/* Abholtag im Fenster (Listenmodus): Datum, daneben die Lieferung 1–9 (seit 10.11.2026 über den Bedienbaustein, Vorgabe 1). */
.sonder-tag-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.sonder-tag-wahl > .datum-wahl { flex: 0 1 18rem; }
.sonder-lieferung-wahl { display: flex; align-items: center; gap: 0.5rem; }
.sonder-lieferung-text { color: var(--text-secondary); }
.sonder-lieferung-wahl > .sd-eingabe.sonder-lieferung-feld { flex: 0 0 10rem; width: 10rem; }
/* Fehlende Menge (seit 10.11.2026): das Feld rot umrandet, der Hinweis steht darunter. */
.sonder-dialog .form-input.sonder-menge-fehlt, :root .sonder-dialog .form-input.sonder-menge-fehlt:is(:focus, :focus-visible) {
  border-color: var(--critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 25%, transparent); }
.sonder-menge-hinweis { margin: 0 0 0.5rem; }
.sonder-tag-fest { display: inline-flex; align-items: center; gap: 0.5rem; width: auto; }
.sonder-tag-zeile .formular-hinweis, .sonder-tag-zeile .bestell-hinweis { margin: 0.35rem 0 0; }
.sonder-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
.sonder-feld-ganz { grid-column: 1 / -1; }
.sonder-formular textarea { resize: vertical; }
.sonder-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.sonder-fuss .formular-hinweis { margin-right: auto; }
.sonder-kunde-kurz { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--surface-faint); margin-bottom: 0.75rem; }
.sonder-kunde-kurz .btn { margin-left: auto; }
.sonder-artikel-eingabe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-bottom: 0.5rem; }
.sonder-artikel-suche { position: relative; flex: 2 1 16rem; }
.sonder-text-feld { flex: 2 1 12rem; }
.sonder-menge-feld { flex: 0 1 7rem; }
.sonder-artikel .form-input { min-width: 0; }
.sonder-artikel .liefer-menge-eingabe { width: 6rem; text-align: right; }
@media (max-width: 640px) { .sonder-formular { grid-template-columns: 1fr; } }
td.liefer-sonder, th.liefer-sonder { color: var(--text-secondary); }

/* Passwort vergessen (seit 08.10.2026): Link unter der Anmeldung, Seiten im selben Rahmen. */
.login-vergessen { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.9rem; color: var(--accent, #6366f1); text-decoration: none; }
.login-vergessen:hover { text-decoration: underline; }
/* Eigenes Passwort bei der Erstanmeldung (seit 14.10.2026): Hinweis hervorgehoben, Regeln als Liste, Abmelden als Link. */
.passwort-festlegen-hinweis { margin: 1rem 0 0.5rem; border-left: 4px solid var(--color-primary); }
.passwort-festlegen-regeln { margin: 0.25rem 0 0.75rem 1.25rem; padding: 0; color: var(--text-secondary); font-size: 0.9rem; }
.passwort-festlegen-danach { margin-top: 0.75rem; }
button.passwort-festlegen-abmelden { background: none; border: 0; padding: 0; cursor: pointer; }
.login-form-wrap > .status-box { margin-top: 1rem; }
.login-form-wrap > .btn-block { margin-top: 1rem; }

/* Belegliste (seit 08.10.2026): Knopf im Kopf der Erfassung, Fenster wie die Sonderbestellungen (nur der Inhalt scrollt). */
.beleg-liste-untertitel { font-weight: 400; font-size: 0.9rem; color: var(--text-secondary); margin-left: 0.4rem; }
.beleg-liste-zeitraum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin-bottom: 0.75rem; }
/* Historie (seit 15.10.2026): links die Belege, rechts der Verlauf - Datum und Uhrzeit in eigenen Spalten, Ziffern gleich breit */
.modal-box.sonder-dialog.historie-dialog { max-width: 84rem; }
.historie-filter { display: inline-flex; align-items: center; gap: 0.35rem; align-self: center; font-size: 0.9rem; color: var(--text-secondary); }
.historie-raster { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 1rem; }
.historie-belege, .historie-inhalt { min-height: 0; overflow-y: auto; }
.historie-inhalt { overflow-x: auto; }
.historie-inhalt th, .historie-inhalt td { padding-left: 0.5rem; padding-right: 0.5rem; }
.historie-belege { border-right: 1px solid var(--border-soft); padding-right: 0.75rem; }
.historie-beleg { cursor: pointer; }
.historie-beleg:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.historie-beleg.aktuell { background: color-mix(in srgb, var(--color-primary) 14%, transparent); font-weight: 600; }
.historie-dialog table { font-variant-numeric: tabular-nums; }
.historie-wt { display: inline-block; min-width: 2.6em; }
.historie-datum, .historie-zeit, .historie-fest, .historie-dialog td.zahl, .historie-dialog th.zahl { white-space: nowrap; }
.historie-titel { margin: 0 0 0.5rem; font-weight: 600; }
.historie-abschnitt { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0.75rem 0 0.35rem; padding: 0.3rem 0.2rem;
  background: none; border: 0; border-bottom: 1px solid var(--border-soft); color: var(--text-primary); font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer; }
.historie-abschnitt:hover { color: var(--color-primary); }
.historie-anzahl { font-weight: 400; color: var(--text-secondary); }
.historie-geaendert { font-weight: 600; color: var(--color-primary); }
@media (max-width: 900px) {
  .historie-raster { grid-template-columns: 1fr; grid-template-rows: minmax(8rem, 30%) 1fr; }
  .historie-belege { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border-soft); }
}
.beleg-liste-zeitraum .filter-field { min-width: 11rem; }
.beleg-liste-zeitraum .filter-field.beleg-liste-datum { flex: 0 1 26rem; min-width: 0; }
.beleg-liste-summe { margin-left: auto; color: var(--text-secondary); font-size: 0.9rem; }
.beleg-liste { width: 100%; }
.beleg-liste th, .sonder-artikel th { text-align: left; }
.beleg-liste th.zahl, .sonder-artikel th.zahl { text-align: right; }
.beleg-liste td.zahl, .sonder-artikel td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.beleg-liste-zeile.aktuell td { background: var(--surface); font-weight: 600; }
.beleg-liste-details > td { background: var(--surface-faint); padding-top: 0; }
.beleg-liste-details .sonder-artikel { margin: 0.25rem 0 0.5rem; width: 100%; }
.beleg-liste-aktion { text-align: right; white-space: nowrap; }

/* Kompakter (seit 12.10.2026): Hinweisboxen direkt in einer Seitenspalte ohne eigenen Außenabstand - den Abstand gibt
   schon die Lücke der Spalte vor, sonst stand doppelt so viel Platz um jede Meldung. */
:is(.dashboard-page, .bestellungen-page, .statistik-page, .verwaltung-seite, .datenzugriff-page, .bericht-designer, .hilfe-inhalt) > .status-box { margin: 0; }
/* Lange Listen in Verwaltungsseiten (seit 12.10.2026): Karte bis zum Fensterrand (rest-hoehe), nur die Tabelle scrollt,
   der Tabellenkopf bleibt stehen - wie die Belegtabelle der Erfassungsseiten. */
.liste-karte { display: flex; flex-direction: column; }
.liste-karte > .widget-tabelle-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.liste-karte > .widget-tabelle-wrap > .verwaltung-tabelle { margin-top: 0; }

/* Handy (seit 12.10.2026): mit der groesseren Grundschrift passte die Kopfzeile und die Auswahl oben nicht mehr in
   die Breite - der Browser verbreiterte dann die ganze Seite und alles wirkte wieder klein. Hier umbrechen statt
   ueberstehen; breite Tabellen scrollen weiter in ihrem eigenen Rahmen. */
@media (max-width: 600px) {
  .topbar-inner { padding: 0.4rem 0.75rem; gap: 0.5rem; }
  .topbar-left { min-width: 0; flex: 1 1 auto; }
  .topbar-left > * { min-width: 0; }
  .topbar-subtitle { display: none; }
  .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 0.2rem; flex-shrink: 0; }
  .topbar-right .icon-button { width: 2.3rem; }
  .sprach-wahl { max-width: 4.2rem; }
  /* Seit 14.10.2026 mit der Glocke: vom Demo-Abzeichen nur das Symbol (Text im Tooltip), sonst wird die Kopfzeile zu breit. */
  .demo-abzeichen { font-size: 0; gap: 0; padding: 0.4rem 0.55rem; }
  .demo-abzeichen i { font-size: 1rem; }
  .bestell-filter-bar > .filter-field, .bestell-filter-bar > .filter-field:first-child,
  .bestell-filter-bar > .filter-field-readonly { flex: 1 1 100%; max-width: 100%; margin-left: 0; }
  .bestell-filter-bar > .filter-field > * { max-width: 100%; }
  .bestell-lieferung-wahl, .bestell-datum { flex-wrap: wrap; }
  .bestell-datum .form-input { width: auto; flex: 1 1 8rem; }
  /* Verwaltungstabellen ohne eigenen Rahmen scrollen in sich statt die Seite zu verbreitern. */
  .verwaltung-tabelle, .hilfe-abschnitt table { display: block; max-width: 100%; overflow-x: auto; }
  .verwaltung-raster, .hilfe-seite { grid-template-columns: minmax(0, 1fr); }
  .card-subtitle { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------- */
/* Erfassungsseiten: schmale Leiste statt Kopf + Bestelleingabe (seit 12.10.2026) - der Platz gehört den Artikeln. */
/* ---------------------------------------------------------------------- */
.bestell-leiste { padding: 0.5rem 0.75rem; align-items: center; gap: 0.5rem 0.6rem; }
/* Beschriftungen nur für Screenreader - die Felder sprechen für sich (Lupe, Datum, Nummern 1-9). */
.bestell-leiste .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Kunde ganz lesbar (seit 03.11.2026, Wunsch des Nutzers; vorher 12–16rem mit abgeschnittenem Namen): Grundbreite 16rem (danach entscheidet
   Flex den Umbruch der Zeile - so bleibt die Leiste am PC so einzeilig wie bisher), dann wächst das Feld mit dem freien Platz bis zur Länge
   des Namens (max-content, höchstens 30rem). Reicht es nicht, bricht der Name im Feld um (StammdatenFeld Umbrechen) - abgeschnitten wird er
   nie. Den Platz gibt die kompakte Lieferungsleiste frei. */
.bestell-leiste > .filter-field.bestell-leiste-kunde { flex: 1 1 16rem; min-width: min(100%, 12rem); max-width: max-content; }
.bestell-leiste-kunde > :is(.sd-eingabe, .bestell-kunde-fest) { max-width: 30rem; }
.bestell-kunde-fest { overflow-wrap: anywhere; }
/* Kunde mit ◀ ▶ (seit 02.11.2026): auf dem Handy die ganze Zeile wie das Datum darunter. Tablet wie der PC (seit 03.11.2026, vorher 22rem). */
html[data-geraet="handy"] .bestell-leiste > .filter-field.bestell-leiste-kunde { flex-basis: 100%; max-width: none; }
html[data-geraet="handy"] .bestell-leiste-kunde > :is(.sd-eingabe, .bestell-kunde-fest) { max-width: none; }
/* Seit 15.10.2026 zwei Zeilen (Reihenfolge per CSS, das Markup bleibt lesbar): oben Kunde, Tag, Lieferung und die Knöpfe,
   nach einer feinen Linie schmal und gedämpft Bestellplan und Status - Seltenes liegt im Menü „⋯“. */
.bestell-leiste > .bestell-leiste-lieferung { order: 1; }
.bestell-leiste > .bestell-leiste-aktionen { order: 2; flex: 0 0 auto; flex-wrap: nowrap; }
/* Mit „Vorschlag übernehmen“ (seit 29.10.2026) ist die Leiste breiter - am PC unter etwa 1100 px darf sie umbrechen statt die Seite zu verbreitern. */
.bestell-leiste > .bestell-leiste-aktionen:has(.bestell-vorschlag-wahl) { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.bestell-leiste-umbruch { order: 3; flex: 1 0 100%; height: 0; margin: 0.1rem -0.75rem; border-top: 1px solid var(--border-soft); }
.bestell-leiste > .bestellplan-leiste { order: 4; }
.bestell-leiste > .filter-field-readonly { order: 5; margin-left: auto; flex: 0 1 auto; }
.bestell-leiste > .bestellplan-leiste, .bestell-leiste > .filter-field-readonly { font-size: 0.85rem; color: var(--text-secondary); }
.bestell-leiste > .bestellplan-leiste .btn, .bestell-leiste > .bestellplan-leiste .plan-auswahl-feld { padding: 0.2rem 0.5rem; min-height: 0; font-size: 0.85rem; }
.bestell-leiste .filter-readonly-value { padding: 0.15rem 0; min-height: 0; background: none; border: 0; }
.bestell-leiste .bestell-datum-marke { margin-left: 0.15rem; }
.bestell-leiste .btn { padding: 0.45rem 0.75rem; }
.bestell-leiste .bestell-lieferung-wahl .btn { padding: 0.4rem 0.2rem; min-width: 1.85rem; }
/* Lieferungen als eine Segmentleiste statt neun einzelner Knöpfe. */
.bestell-leiste .bestell-lieferung-wahl { gap: 0; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; background: var(--surface); }
.bestell-leiste .bestell-lieferung-wahl .btn { border: 0; border-radius: 0; }
.bestell-leiste .bestell-lieferung-wahl .btn + .btn { border-left: 1px solid var(--border-soft); }
.bestell-leiste .bestell-lieferung-wahl .btn.vorhanden:not(.btn-primary) { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
/* „+n“ hinter den Lieferungen (seit 03.11.2026, LieferungsLeiste; n = Anzahl im Menü - bewusst nicht „…“, das ist das Menü „⋯“ der
   Funktionen): öffnet die übrigen als kleines Menü darunter - gedämpft, damit die Nummern führen. Das Menü liegt über der Seite (die Leiste
   baut sich nicht um), höchstens drei Spalten - so ist es nie breiter als die Leiste mit 1–3 und „+n“ und ragt nicht über den Rand. Die Linien zwischen den Knöpfen sind der (deckende) Hintergrund in den 1-px-Fugen. */
.bestell-lieferung-wahl .bestell-lieferung-mehr { color: var(--text-secondary); }
.bestell-lieferung-wahl .bestell-lieferung-mehr:hover, .bestell-lieferung-wahl .bestell-lieferung-mehr[aria-expanded="true"] { color: var(--color-primary); }
.bestell-leiste .bestell-lieferung-wahl .bestell-lieferung-mehr { padding-left: 0.45rem; padding-right: 0.45rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bestell-leiste-lieferung { position: relative; }
.bestell-leiste .bestell-lieferung-wahl.bestell-lieferung-weitere { position: absolute; left: 0; top: calc(100% + 0.35rem); z-index: 41;
  display: grid; grid-template-columns: repeat(var(--spalten, 3), auto); gap: 1px;
  background: linear-gradient(var(--border-soft), var(--border-soft)), var(--popup-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.bestell-leiste .bestell-lieferung-weitere .btn, .bestell-leiste .bestell-lieferung-weitere .btn + .btn { border-left: 0; }
.bestell-leiste .bestell-lieferung-weitere .btn:not(.btn-primary) { background: var(--popup-bg); }
.bestell-leiste .bestell-lieferung-weitere .btn.btn-ghost:hover { background: color-mix(in srgb, var(--color-primary) 12%, var(--popup-bg)); }
/* Menü „⋯“ und Zähler am Knopf „Übernehmen“ (seit 15.10.2026). */
.bestell-mehr { position: relative; }
.bestell-mehr-knopf { padding-left: 0.65rem !important; padding-right: 0.65rem !important; }
.bestell-mehr-hintergrund { position: fixed; inset: 0; z-index: 40; }
.bestell-mehr-menue { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 41; min-width: 15rem; padding: 0.35rem;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; }
/* Raster statt Flex: feste Spalte für das Symbol, daneben der Text - so steht alles genau untereinander. */
.bestell-mehr-menue button { width: 100%; margin: 0; display: grid; grid-template-columns: 1.5rem 1fr; align-items: center; column-gap: 0.55rem; padding: 0.5rem 0.7rem; border: 0; border-radius: 8px;
  background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.bestell-mehr-menue button i { justify-self: center; width: auto; color: var(--text-secondary); }
.bestell-mehr-menue button:hover:not(:disabled), .bestell-mehr-menue button:focus-visible { background: color-mix(in srgb, var(--color-primary) 10%, transparent); outline: none; }
.bestell-mehr-menue button:disabled { opacity: 0.45; cursor: default; }
.bestell-mehr-menue button.aktiv { color: var(--color-primary); font-weight: 600; }
.bestell-mehr-menue button.bestell-verwerfen { color: var(--bad-text); }
.bestell-mehr-menue button.bestell-verwerfen i { color: inherit; }
.bestell-mehr-menue hr { margin: 0.3rem 0.2rem; border: 0; border-top: 1px solid var(--border-soft); }
.bestell-uebernehmen-zahl { margin-left: 0.4rem; min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.8rem; line-height: 1.4rem;
  background: rgba(255, 255, 255, 0.25); text-align: center; }
.bestell-mehrere-aktiv { border-left: 1px solid var(--border-soft) !important; }
/* „+ Artikel“ im Kopf der Tabelle (seit 06.11.2026, vorher in der Leiste oben): gleich hinter dem Titel. */
.beleg-tabelle-kopf .bestell-artikel-knopf { flex-shrink: 0; white-space: nowrap; margin-right: auto; }
.bestell-leiste .bestell-datum .form-input, .bestell-leiste .bestell-datum .datum-eingabe { width: 8.2rem; flex: 0 0 auto; }
.bestell-leiste-aktionen { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.bestell-text-knopf { position: relative; }
.bestell-text-knopf.hat-text { color: var(--color-primary); border-color: var(--color-primary); }
.bestell-text-knopf.hat-text::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.bestell-erfassung { position: relative; }
.bestell-erfassung-zu { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 1.1rem; }
.bestell-erfassung > .card-header { padding-right: 2.5rem; }
.bestell-text-dialog { width: min(36rem, 94vw); }
.bestell-text-dialog .bestell-lieferung-texte { grid-template-columns: 1fr; }
.bestell-text-fuss { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.bestell-meldung.bestell-hinweis { margin: 0; }
/* Mehrere Meldungen unten rechts untereinander statt übereinander (seit 12.10.2026). */
.bestell-meldungen { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; pointer-events: none; }
.bestell-meldungen > .bestell-meldung { position: static; pointer-events: auto; }
/* Handy und Tablet (seit 18.10.2026): über der Fußleiste mit „Übernehmen“ statt darauf. */
html:not([data-geraet="desktop"]) .bestell-meldungen { right: 0.75rem; left: 0.75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
/* Tabellenkopf in einer Zeile, die Erklärung im Tooltip. */
.beleg-tabelle-kopf { align-items: center; }
.beleg-tabelle-kopf h3 { cursor: help; }
/* Filiale klein hinter dem Titel (seit 06.11.2026), wenn die Leiste oben kein Feld „Kunde“ hat. */
.beleg-kopf-zusatz { margin-left: 0.4rem; font-size: 0.8em; font-weight: 500; color: var(--text-secondary); }
.beleg-kopf-zusatz::before { content: "· "; }
/* Tag nur über den Bestellplan (seit 06.11.2026): die Plan-Auswahl steht in der ersten Zeile, wo sonst das Datum steht. */
.bestell-leiste > .bestellplan-leiste.bestellplan-leiste-tag { order: 0; font-size: inherit; color: inherit; }
.bestell-leiste > .bestellplan-leiste-tag .btn, .bestell-leiste > .bestellplan-leiste-tag .plan-auswahl-feld { padding: 0.4rem 0.6rem; font-size: inherit; }
.beleg-kopf-info { font-size: 0.8em; color: var(--text-secondary); margin-left: 0.2rem; }

/* ---------------------------------------------------------------------- */
/* Linkes Menü: fest offen, eingeklappt (nur Symbole) oder beim Darüberfahren (seit 12.10.2026, js/menue.js). */
/* ---------------------------------------------------------------------- */
.sidebar { transition: width 0.15s ease; }
.sidebar .nav-link { white-space: nowrap; overflow: hidden; }
/* Mit overflow: hidden dürften die Punkte in der Flex-Spalte schrumpfen - sie behalten ihre Höhe, die Liste scrollt. */
.sidebar-nav > * { flex-shrink: 0; }
.sidebar-menue-wahl { display: flex; gap: 0.25rem; padding: 0.45rem 0.6rem; border-top: 1px solid var(--border-soft); }
.menue-wahl { flex: 1; padding: 0.35rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: transparent;
  color: var(--text-secondary); cursor: pointer; }
.menue-wahl:hover { background: var(--hover); color: var(--text-primary); }
.menue-wahl:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
:root[data-menue="offen"] .menue-wahl-offen, :root[data-menue="zu"] .menue-wahl-zu, :root[data-menue="hover"] .menue-wahl-hover {
  background: var(--active); color: var(--color-primary); border-color: var(--color-primary); }
@media (min-width: 1024px) {
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar, :root[data-menue="hover"] .sidebar:not(:hover) { width: 4rem; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .brand-title, :root[data-menue="hover"] .sidebar:not(:hover) .brand-title,
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .nav-text, :root[data-menue="hover"] .sidebar:not(:hover) .nav-text,
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .sidebar-footer span, :root[data-menue="hover"] .sidebar:not(:hover) .sidebar-footer span { display: none; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .sidebar-brand, :root[data-menue="hover"] .sidebar:not(:hover) .sidebar-brand { padding: 0; justify-content: center; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .sidebar-nav, :root[data-menue="hover"] .sidebar:not(:hover) .sidebar-nav { padding: 0.6rem 0.4rem; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .nav-link, :root[data-menue="hover"] .sidebar:not(:hover) .nav-link { padding: 0.5rem 0; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .nav-link-content, :root[data-menue="hover"] .sidebar:not(:hover) .nav-link-content { display: flex; justify-content: center; }
  /* Abschnittsnamen werden zu einer Trennlinie. */
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .nav-abschnitt, :root[data-menue="hover"] .sidebar:not(:hover) .nav-abschnitt {
    font-size: 0; height: 0; margin: 0.45rem 0.5rem; padding: 0; border-top: 1px solid var(--border-soft); border-radius: 0; pointer-events: none; }
  /* Untergruppen (seit 23.10.2026): nur Symbole - ohne Kopf und Einrückung, die Seiten stehen wie alle anderen untereinander. */
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .nav-unter-kopf, :root[data-menue="hover"] .sidebar:not(:hover) .nav-unter-kopf { display: none; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .nav-unter-punkte, :root[data-menue="hover"] .sidebar:not(:hover) .nav-unter-punkte { margin-left: 0; padding-left: 0; border-left: 0; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .sidebar-menue-wahl, :root[data-menue="hover"] .sidebar:not(:hover) .sidebar-menue-wahl { flex-direction: column; padding: 0.45rem 0.6rem; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .sidebar-footer, :root[data-menue="hover"] .sidebar:not(:hover) .sidebar-footer { justify-content: center; padding: 1rem 0; }
  /* Beim Darüberfahren legt sich das Menü über den Inhalt (der bleibt stehen) - kurz verzögert, damit ein zufälliges
     Streifen mit der Maus es nicht aufklappt. */
  :root[data-menue="hover"] .sidebar { position: fixed; left: 0; top: 0; z-index: 70; background: var(--sidebar-bg); backdrop-filter: blur(10px); }
  :root[data-menue="hover"] .sidebar:hover { transition-delay: 0.12s; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); }
  :root[data-menue="hover"] .app-main { margin-left: 4rem; }
  :root[data-grundton="light"][data-menue="hover"] .sidebar { background: #ffffff; }
}

/* ---------------------------------------------------------------------- */
/* Bestellpläne (seit 12.10.2026): Verwaltungsseite und Hinweise auf der Bestellseite. */
/* ---------------------------------------------------------------------- */
.bestellplaene { display: flex; flex-direction: column; gap: 0.75rem; }
.bestellplaene tr.gewaehlt td { background: var(--active); }
.bestellplan-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; }
.bestellplan-kopf .filter-field { flex: 0 1 18rem; }
.bestellplan-feiertage { flex: 1 1 20rem; }
.bestellplan-titel { margin: 1rem 0 0.25rem; font-size: 1rem; }
.bestellplan-lieferungen { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.4rem 0; }
.bestellplan-lieferungen .btn { min-width: 2.3rem; padding: 0.4rem 0.6rem; justify-content: center; }
.bestellplan-lieferungen .btn.vorhanden:not(.btn-primary) { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.bestellplan-raster { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.bestellplan-raster th, .bestellplan-raster td { border: 1px solid var(--border-soft); padding: 0.2rem; text-align: center; }
.bestellplan-raster tbody th { text-align: left; padding: 0.3rem 0.6rem; white-space: nowrap; }
.bestellplan-zelle { width: 100%; min-height: 1.9rem; padding: 0 0.2rem; border: none; border-radius: 6px; background: transparent; color: var(--text-primary);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.bestellplan-zelle:hover { background: var(--hover); }
.bestellplan-zelle.geerbt { color: var(--text-secondary); font-style: italic; }
.bestellplan-zelle.nichts { color: var(--text-secondary); }
.bestellplan-zelle.gewaehlt { outline: 2px solid var(--color-primary); background: var(--active); }
.bestellplan-zellen-editor { margin-top: 0.6rem; padding: 0.75rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  display: flex; flex-direction: column; gap: 0.5rem; }
.bestellplan-art { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.bestellplan-werte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.bestellplan-werte label { display: inline-flex; align-items: center; gap: 0.4rem; }
.bestellplan-zahl { width: 5rem; }
.bestellplan-zeit { width: 8rem; }
.bestellplan-kopieren { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bestellplan-sondertage td { vertical-align: middle; }
.bestellplan-liefertage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.bestellplan-liefertage .chip .btn-icon { padding: 0 0.2rem; }
.bestellplan-sondertag-neu { margin-top: 0.4rem; }
.bestellplan-vorschau-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bestellplan-vorschau-kunde { width: auto; max-width: 20rem; }
.bestellplan-vorschau th { text-align: left; white-space: nowrap; vertical-align: top; width: 14rem; }
.bestellplan-vorschau tr.bestellplan-feiertag th { color: var(--warning); }
/* Sicht des Plans (seit 16.10.2026): je Bestelltag oder je Liefertag; der Wechsel rechnet um (Hinweis darunter). */
.bestellplan-sicht-wahl { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.bestellplan-werte select.form-input { width: auto; }
.bestellplan-umrechnung { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent); border-radius: 6px; }
.bestellplan-wochentage { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.bestellplan-wochentage .widget-eintrag { padding: 0.15rem 0.2rem; }
.bestellplan-vorschau thead th { width: auto; }
.bestellplan-termine { vertical-align: top; }
/* Bestellseite: Liefertage laut Plan in der Leiste, gesperrte Mengen mit Schloss. */
.bestellplan-leiste { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; order: 1; }
.bestellplan-leiste > .fa-calendar-check { color: var(--color-primary); margin-right: 0.15rem; }
.bestellplan-schloss { color: var(--text-secondary); margin-right: 0.35rem; font-size: 0.8em; cursor: help; }
.bestellplan-leiste .bestellplan-erledigt:not(.btn-primary) { color: var(--good); border-color: currentColor; }
.bestellplan-leiste .bestellplan-erledigt .fa-check { margin-right: 0.25rem; }
/* Plan-Auswahl der Bestellseite (seit 13.10.2026): feste Breite statt einer Knopfreihe je Tag; Bestellschluss farbig. */
.plan-auswahl { position: relative; display: inline-flex; align-items: center; gap: 0.2rem; }
.plan-auswahl-feld { display: inline-flex; align-items: center; gap: 0.35rem; width: 17rem; max-width: 70vw; min-height: 2.2rem; padding: 0 0.6rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface); color: var(--text-primary); font: inherit; cursor: pointer; }
.plan-auswahl-feld > .fa-calendar-check { color: var(--color-primary); }
.plan-auswahl-feld > .fa-caret-down { margin-left: auto; color: var(--text-secondary); }
.plan-auswahl-tag { font-weight: 600; white-space: nowrap; }
.plan-auswahl-gruppe { padding: 0 0.4rem; border-radius: 999px; background: var(--active); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-auswahl-zeit { color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; }
.plan-auswahl-haken { color: var(--good); }
.plan-auswahl-stand { color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; }
.plan-auswahl-stand .fa-check { color: var(--good); }
.plan-auswahl-hintergrund { position: fixed; inset: 0; z-index: 40; }
.plan-auswahl-liste { position: absolute; top: 100%; left: 2.2rem; z-index: 41; width: 19rem; max-width: 85vw; max-height: 22rem; overflow-y: auto; margin: 0.2rem 0 0; padding: 0.25rem;
  list-style: none; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-main); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
.plan-auswahl-eintrag { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.35rem 0.5rem; border: none; border-radius: 6px;
  background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.plan-auswahl-eintrag:hover { background: var(--hover); }
.plan-auswahl-eintrag.gewaehlt { outline: 2px solid var(--color-primary); }
.plan-auswahl-eintrag.gesondert { padding-left: 1.6rem; font-size: 0.92rem; }
.plan-auswahl-eintrag .plan-auswahl-zeit { margin-left: auto; }
.plan-auswahl-haken-feld { width: 1rem; flex-shrink: 0; }
.plan-auswahl-feld.vorbei, .plan-auswahl-eintrag.vorbei { background: color-mix(in srgb, var(--bad-text) 16%, var(--surface)); border-color: var(--bad-text); }
.plan-auswahl-feld.vorbei .plan-auswahl-zeit, .plan-auswahl-eintrag.vorbei .plan-auswahl-zeit { color: var(--bad-text); font-weight: 600; }
.plan-auswahl-feld.bald, .plan-auswahl-eintrag.bald { border-color: var(--warning); }
.plan-auswahl-feld.bald .plan-auswahl-zeit, .plan-auswahl-eintrag.bald .plan-auswahl-zeit { color: var(--warning); font-weight: 600; }
.plan-auswahl-feld.noch-nicht, .plan-auswahl-eintrag.noch-nicht { opacity: 0.75; }
.bestellplan-schluss { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.55rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  line-height: 1.7rem; white-space: nowrap; }
.bestellplan-schluss.offen { background: color-mix(in srgb, var(--good) 15%, var(--surface)); color: var(--good); }
.bestellplan-schluss.bald { background: var(--warning); color: #1a1a1a; }
.bestellplan-schluss.vorbei { background: var(--bad-text); color: #fff; }
.bestellplan-schluss.noch-nicht { background: var(--active); color: var(--text-secondary); }
.bestell-datum-marke.bestellschluss-vorbei { background: var(--bad-text); color: #fff; }
.bestell-status-gesperrt.bestellschluss-vorbei { color: var(--bad-text); }
.bestellplan-schloss.vorbei { color: var(--bad-text); font-size: 0.95em; }
.bestellplan-schloss.ansicht { color: var(--text-secondary); opacity: 0.7; }
/* Gruppen der Ansicht nach der Gruppierung des Plans: Bestellschluss je Gruppe, vorbei rot, "nur Ansicht" grau. */
.beleg-gruppe-plan { margin-left: 0.6rem; font-weight: 500; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
.beleg-gruppe.plan-vorbei td { background: color-mix(in srgb, var(--bad-text) 18%, var(--surface)); }
.beleg-gruppe.plan-vorbei .beleg-gruppe-plan, .beleg-gruppenliste-eintrag.plan-vorbei .beleg-gruppe-plan { color: var(--bad-text); font-weight: 700; }
.beleg-gruppenliste-eintrag.plan-vorbei:not(.aktiv) { background: color-mix(in srgb, var(--bad-text) 14%, var(--surface)); border-color: var(--bad-text); }
.beleg-gruppenliste-eintrag.plan-vorbei.aktiv { background: var(--bad-text); border-color: var(--bad-text); }
.beleg-gruppenliste-eintrag.aktiv .beleg-gruppe-plan { color: rgba(255, 255, 255, 0.9); }
.beleg-gruppenliste-eintrag .beleg-gruppe-plan { margin-left: 0; font-size: 0.78rem; }
.beleg-gruppe.plan-ansicht td, .beleg-gruppenliste-eintrag.plan-ansicht:not(.aktiv) { color: var(--text-secondary); }
/* Pflichtartikel (seit 13.10.2026): auffällig, solange die Menge fehlt. */
tr.beleg-pflicht > td:first-child { box-shadow: inset 4px 0 0 var(--warning); }
tr.beleg-pflicht:not(.erfuellt) { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.beleg-pflicht-marke { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--warning); color: #1a1a1a; font-size: 0.75rem; font-weight: 700; line-height: 1.2rem; cursor: help; }
tr.beleg-pflicht.erfuellt .beleg-pflicht-marke { background: transparent; color: var(--warning); border: 1px solid var(--warning); }
.bestell-status-pflicht { color: var(--warning); font-weight: 700; cursor: help; }
/* Verwaltung der Bestellpläne (seit 13.10.2026): Ebenen Standard/Zeiträume, Gruppen, Feiertagsspalten. */
.bestellplan-ebenen { margin: 0.3rem 0; }
.bestellplan-ebenen button small { margin-left: 0.3rem; opacity: 0.8; font-weight: 400; }
.bestellplan-ebenen button.abgelaufen:not(.aktiv) { opacity: 0.55; text-decoration: line-through; }
.bestellplan-zeitraum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin: 0.4rem 0; padding: 0.6rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
.bestellplan-zeitraum .filter-field { flex: 0 1 auto; }
/* Das Feld mit DatumWahl ist ein Container (Von/Bis untereinander unter 22rem) - ohne eigene Breite fiel es bei flex-basis auto auf 0
   zusammen (seit 30.10.2026). Handy: ganze Zeile (unten). */
.bestellplan-zeitraum .filter-field:has(> .bestellplan-zeitraum-datum) { flex: 0 1 26rem; min-width: 0; }
.bestellplan-kw-felder { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.bestellplan-jahr { width: 6rem; }
.bestellplan-gruppen { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0.3rem 0; }
.bestellplan-gruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; padding: 0.25rem 0.6rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
.bestellplan-gruppe-name { font-weight: 600; min-width: 6rem; }
.bestellplan-raster th.bestellplan-feiertagsspalte { color: var(--warning); }
.bestellplan-sonder-art { width: auto; }
.bestellplan-vorschau-wahl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.bestellplan-chip-zeitraum { border-color: var(--color-primary); color: var(--color-primary); }
.bestellplan-chip-sonder { border-color: var(--warning); color: var(--warning); }
.bestellplan-gruppen-wahl > summary { cursor: pointer; }
.bestellplan-gruppen-wahl > summary .formular-hinweis { font-weight: 400; margin-left: 0.4rem; }
/* Gruppenliste: der Bestellschluss steht unter dem Namen, damit der Name nicht umbricht. */
.beleg-gruppenliste-eintrag { flex-wrap: wrap; }
.beleg-gruppenliste-eintrag .beleg-gruppe-plan { order: 3; flex-basis: 100%; white-space: normal; }
/* Nachbesserung 13.10.2026 (Browser-Test): Gruppenkopf einzeilig, Gruppenliste ohne verrutschte Anzahl, Plan-Auswahl auf dem Handy, Sondertage lesbar. */
.beleg-gruppe-knopf .beleg-gruppe-plan { margin-left: 0.4rem; }
.beleg-gruppenliste-eintrag .beleg-gruppenliste-name { flex-basis: 0; }
.plan-auswahl { flex-wrap: wrap; max-width: 100%; }
.plan-auswahl-feld { width: min(17rem, calc(100vw - 8rem)); max-width: none; min-width: 0; }
.plan-auswahl-feld .plan-auswahl-tag, .plan-auswahl-feld .plan-auswahl-gruppe { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-auswahl-liste { max-width: calc(100vw - 2rem); }
@media (max-width: 600px) { .plan-auswahl-liste { left: 0; } }
.bestellplan-sondertage td { white-space: nowrap; }
.bestellplan-sondertage .datum-feld { display: inline-flex; min-width: 10rem; }
.bestellplan-sondertage select { min-width: 5.5rem; }
.bestellplan-sondertage td.bestellplan-liefertage { min-width: 17rem; white-space: normal; }
.bestellplan-sondertage input[maxlength="100"] { min-width: 9rem; }
@media (max-width: 600px) { .plan-auswahl-feld .plan-auswahl-zeit { display: none; } }
.bestellplan-sondertage td:nth-child(3) select { min-width: 10rem; }

/* ---------------------------------------------------------------------- */
/* Farbige Modi (seit 14.10.2026, aus der GoecomDB): blau, pink, violett, grün, gelb         */
/* Heller Grundton wie oben (alle Regeln von [data-grundton="light"]); je  */
/* Modus nur die Farb-Tokens, dazu die Seitenleiste in der Modusfarbe.     */
/* Primärfarben mit genug Kontrast für weiße Schrift auf Knöpfen.          */
/* ---------------------------------------------------------------------- */
:root[data-theme="blue"] {
  --color-primary: #1d6ef2; --color-secondary: #0b4fc4; --akzent-3: #38bdf8;
  --marke-verlauf: linear-gradient(135deg, #3b82f6 0%, #1d6ef2 55%, #0b4fc4 100%);
  --hell-1: #e6efff; --hell-2: #e9f1ff; --hell-3: #e4f5ff;
  --seitenleiste: linear-gradient(180deg, #1d63e0 0%, #123f9e 100%);
}
:root[data-theme="pink"] {
  --color-primary: #db2777; --color-secondary: #be185d; --akzent-3: #f472b6;
  --marke-verlauf: linear-gradient(135deg, #ec4899 0%, #db2777 55%, #be185d 100%);
  --hell-1: #fff0f6; --hell-2: #fdeef7; --hell-3: #fff3f5;
  --seitenleiste: linear-gradient(180deg, #db2777 0%, #9d174d 100%);
}
:root[data-theme="violet"] {
  --color-primary: #7c3aed; --color-secondary: #6d28d9; --akzent-3: #c084fc;
  --marke-verlauf: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
  --hell-1: #f3eeff; --hell-2: #f5efff; --hell-3: #f1f0ff;
  --seitenleiste: linear-gradient(180deg, #7c3aed 0%, #4c1d95 100%);
}
:root[data-theme="green"] {
  --color-primary: #047857; --color-secondary: #065f46; --akzent-3: #34d399;
  --marke-verlauf: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
  --hell-1: #e9fbf2; --hell-2: #ecfdf5; --hell-3: #eafaf7;
  --seitenleiste: linear-gradient(180deg, #059669 0%, #064e3b 100%);
}
:root[data-theme="yellow"] {
  --color-primary: #a16207; --color-secondary: #854d0e; --akzent-3: #facc15;
  --marke-verlauf: linear-gradient(135deg, #ca8a04 0%, #a16207 55%, #854d0e 100%);
  --hell-1: #fffbe6; --hell-2: #fefce8; --hell-3: #fff8e1;
  --seitenleiste: linear-gradient(180deg, #a16207 0%, #713f12 100%);
}
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) {
  --sidebar-bg: var(--seitenleiste);
  --topbar-bg: color-mix(in srgb, var(--color-primary) 5%, rgba(255, 255, 255, 0.82));
}
/* Seitenleiste (auch mobil): weiße Schrift auf der Modusfarbe, aktiver Eintrag weiß hervorgehoben. */
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) {
  color: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --nav-text: rgba(255, 255, 255, 0.88);
  --hover: rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.18);
  border-right-color: transparent;
}
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .nav-link .nav-symbol { color: rgba(255, 255, 255, 0.75); }
/* Nicht beim gewählten Punkt (seit 23.10.2026): der ist weiß hinterlegt - ein weißes Symbol darauf war unsichtbar. */
@media (hover: hover) { :root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .nav-link:not(.nav-link-active):hover .nav-symbol { color: #ffffff; } }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .nav-link-active { background: #ffffff; color: var(--color-primary); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .nav-link-active .nav-symbol { color: var(--color-primary); }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .nav-abschnitt { color: rgba(255, 255, 255, 0.65); }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) .sidebar-brand { border-bottom-color: rgba(255, 255, 255, 0.18); }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) .sidebar-footer-logo { filter: brightness(0) invert(1) opacity(0.75); }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .logo-weiss { display: block; }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .logo-farbig { display: none; }

/* Farbmodus-Wahl in der Kopfzeile (Paletten-Symbol) und im Profil (seit 14.10.2026, aus der GoecomDB). */
.farbmodus-wahl { position: relative; }
.farbmodus-overlay { position: fixed; inset: 0; z-index: 60; }
.farbmodus-menue {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 61; min-width: 13rem; padding: 0.35rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  box-shadow: var(--schatten-hoch, 0 12px 32px rgba(0, 0, 0, 0.4));
}
.farbmodus-eintrag {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.65rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-size: 0.9rem; text-align: left; cursor: pointer;
}
.farbmodus-eintrag:hover { background: var(--hover); }
.farbmodus-eintrag.aktiv { background: var(--active); font-weight: 600; }
.farbmodus-eintrag .fa-check { margin-left: auto; color: var(--color-primary); }
.farbmodus-system { border-top: 1px solid var(--line-soft); border-radius: 0 0 8px 8px; margin-top: 0.15rem; }
.farbmodus-punkt {
  width: 1rem; height: 1rem; flex: 0 0 1rem; border-radius: 50%;
  border: 1px solid rgba(127, 127, 127, 0.45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.farbmodus-punkt-system { background: linear-gradient(135deg, #f4f6fa 0 50%, #151a22 50% 100%); }
.farbmodus-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.farbmodus-kachel {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.75rem; cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface); color: var(--text-primary); font-size: 0.9rem;
}
.farbmodus-kachel:hover { border-color: var(--color-primary); }
.farbmodus-kachel.aktiv { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent); font-weight: 600; }

/* MarvinMobile: weißes Logo nur auf den farbigen Seitenleisten; Menü "beim Darüberfahren" auch farbig; Kachel "erbt". */
.brand-logo.logo-weiss { display: none; }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"])[data-menue="hover"] .sidebar { background: var(--seitenleiste); }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) .menue-wahl { color: rgba(255, 255, 255, 0.8); }
.farbmodus-punkt-erbt { background: repeating-linear-gradient(135deg, #1d6ef2 0 4px, #db2777 4px 8px, #059669 8px 12px); }
.farbmodus-kachel { font: inherit; text-align: left; }

/* Bilderansicht der Erfassungsseiten (seit 14.10.2026): Kacheln mit Bild, Name, Nummer und Menge - auf dem Handy zwei,
   am PC sechs bis acht je Zeile. Platzhalter je Warengruppe in einer von acht Farben (Models/ArtikelBild.cs). */
:root {
  --platzhalter-0: #3b82f6; --platzhalter-1: #10b981; --platzhalter-2: #f59e0b; --platzhalter-3: #ec4899;
  --platzhalter-4: #8b5cf6; --platzhalter-5: #ef4444; --platzhalter-6: #14b8a6; --platzhalter-7: #a16207;
}
.beleg-kacheln-wrap { display: block; }
.beleg-kachel-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.6rem; }
.beleg-kachel-suche { flex: 1 1 14rem; max-width: 24rem; }
.beleg-kachel-sortierung { flex: 0 0 auto; width: auto; }
.beleg-kachel-gruppe { margin: 0.6rem 0 0.4rem; font-size: 0.95rem; }
.beleg-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; }
.beleg-kachel {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.45rem; border: 1px solid var(--border-soft);
  border-radius: var(--radius-main); background: var(--surface); }
.beleg-kachel.liefer-geaendert { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.beleg-kachel.liefer-offen { border-color: var(--warning); box-shadow: inset 0 3px 0 var(--warning); }
.beleg-kachel.beleg-pflicht:not(.erfuellt) { box-shadow: inset 0 3px 0 var(--warning); }
.beleg-kachel.beleg-nur-vergleich { border-style: dashed; }
.beleg-kachel.nur-ansicht .beleg-kachel-bild { filter: grayscale(0.35); }
.beleg-kachel-bild {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: calc(var(--radius-main) - 2px);
  overflow: hidden; background: var(--surface-strong, var(--hover)); cursor: zoom-in; }
.beleg-kachel-bild img, .beleg-bild-gross-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beleg-kachel-marken { position: absolute; left: 0.3rem; top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.beleg-kachel-marken > * { margin: 0 !important; }
.beleg-kachel-name {
  font-weight: 600; line-height: 1.25; min-height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.beleg-kachel-nr { color: var(--text-secondary); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.beleg-kachel-menge { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; margin-top: auto; }
.beleg-kachel-eingabe { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
  font-weight: 600; font-variant-numeric: tabular-nums; }
.beleg-kachel-eingabe .liefer-menge-eingabe { width: 100%; min-width: 2.6rem; text-align: center; font-size: 1rem; padding: 0.3rem 0.2rem !important; }
.beleg-kachel-eingabe .liefer-bestaetigen { flex: 0 0 auto; }
.beleg-kachel-eingabe .menge-stueck { display: none; }
.beleg-kachel-schritt {
  width: 2.2rem; height: 2.2rem; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border-soft); background: var(--surface);
  color: var(--text-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.beleg-kachel-schritt:hover:not(:disabled) { background: var(--hover); border-color: var(--color-primary); color: var(--color-primary); }
.beleg-kachel-schritt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.beleg-kachel-schritt:disabled { opacity: 0.35; cursor: default; }

/* −/+ neben jedem Mengenfeld der Erfassungsseiten (seit 02.11.2026, Regel des Nutzers, MengenSchritte.razor): statt der Pfeile im
   Zahlenfeld - die sind dort aus (auch in den Kacheln). Kompakt für den PC, auf Touch-Geräten 44 px; auf dem Handy gibt es −/+ an
   der Zeile und im Mengen-Pad, dort bleiben die Knöpfe weg. */
:is(.menge-schritte, .beleg-kachel-menge) input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
:is(.menge-schritte, .beleg-kachel-menge) input[type="number"]::-webkit-inner-spin-button,
:is(.menge-schritte, .beleg-kachel-menge) input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.menge-schritte { display: inline-flex; align-items: center; gap: 0.2rem; vertical-align: middle; }
html:not([data-geraet="handy"]) .menge-schritte > input.form-input { width: 4.5rem; flex: 0 0 auto; }
html:not([data-geraet="handy"]) :is(.beleg-mehrere, .bestell-tabelle-mehrere) .menge-schritte > input.form-input { width: 3.6rem; }
html:not([data-geraet="handy"]) .sonder-menge-feld:has(.menge-schritte) { flex: 0 0 auto; }
.menge-schritt {
  width: 1.65rem; height: 1.65rem; flex: 0 0 auto; padding: 0; border-radius: 50%; border: 1px solid var(--border-soft);
  background: var(--surface); color: var(--text-primary); font-size: 0.7rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.menge-schritt:hover:not(:disabled) { background: var(--hover); border-color: var(--color-primary); color: var(--color-primary); }
.menge-schritt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.menge-schritt:disabled { opacity: 0.3; cursor: default; }
html[data-touch] .menge-schritt { width: 44px; height: 44px; font-size: 0.85rem; }
html[data-geraet="handy"] .menge-schritte { display: contents; }
html[data-geraet="handy"] .menge-schritt { display: none; }
.beleg-kachel-angaben { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.5rem; margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--text-secondary); }
.beleg-kachel-angaben div { display: flex; justify-content: space-between; gap: 0.3rem; min-width: 0; }
.beleg-kachel-angaben dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg-kachel-angaben dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.beleg-kachel-fuss { margin: 0.7rem 0 0; color: var(--text-secondary); font-size: 0.85rem; }
.artikel-platzhalter { --ph: var(--platzhalter-0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  width: 100%; height: 100%; color: color-mix(in srgb, var(--ph) 80%, var(--text-primary));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ph) 22%, transparent), color-mix(in srgb, var(--ph) 8%, transparent)); }
.artikel-platzhalter i { font-size: 1.9rem; opacity: 0.85; }
.artikel-platzhalter-kuerzel { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; }
.artikel-platzhalter-1 { --ph: var(--platzhalter-1); } .artikel-platzhalter-2 { --ph: var(--platzhalter-2); }
.artikel-platzhalter-3 { --ph: var(--platzhalter-3); } .artikel-platzhalter-4 { --ph: var(--platzhalter-4); }
.artikel-platzhalter-5 { --ph: var(--platzhalter-5); } .artikel-platzhalter-6 { --ph: var(--platzhalter-6); }
.artikel-platzhalter-7 { --ph: var(--platzhalter-7); }
.beleg-bild-gross-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 80; }
.beleg-bild-gross {
  position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(32rem, calc(100vw - 2rem));
  margin: 0; padding: 0.75rem; border-radius: var(--radius-main); background: var(--surface); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.beleg-bild-gross-bild { aspect-ratio: 4 / 3; border-radius: calc(var(--radius-main) - 2px); overflow: hidden; }
.beleg-bild-gross-bild .artikel-platzhalter i { font-size: 4rem; }
.beleg-bild-gross-bild .artikel-platzhalter-kuerzel { font-size: 2rem; }
.beleg-bild-gross figcaption { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.6rem; }
.beleg-bild-gross-zu { position: absolute; right: 0.4rem; top: 0.4rem; z-index: 1; background: var(--surface); }
@media (max-width: 640px) {
  .beleg-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .liefer-details > td:has(.beleg-kacheln-wrap) { padding-left: 0; padding-right: 0; }
  /* Kopf der Lieferungen passt sich der Breite an - sonst wäre die Tabelle breiter als das Handy. */
  .beleg-kachel-karte .liefer-tabelle { table-layout: fixed; width: 100%; }
  .beleg-kachel-karte .liefer-tabelle th, .beleg-kachel-karte .liefer-tabelle td { white-space: normal; overflow-wrap: break-word; }
  .beleg-kachel-karte .liefer-tabelle > thead th { font-size: 0.72rem; }
  /* Ohne Höhengrenze (auch nicht die von js/resthoehe.js): eine 5 cm hohe Box mit eigenem Scrollbalken wäre unbedienbar. */
  .beleg-kachel-karte { max-height: none !important; }
  .beleg-kachel-karte > .widget-tabelle-wrap { overflow: visible; }
  /* Bilder mit Gruppen: die Gruppen als waagerechte Leiste über den Kacheln (links wäre neben 13rem kein Platz). */
  .beleg-kachel-karte .beleg-geteilt { flex-direction: column; align-items: stretch; }
  .beleg-kachel-karte .beleg-gruppenliste {
    flex: none; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; max-height: none; min-height: 0; padding-bottom: 0.3rem;
    background: var(--surface); }
  .beleg-kachel-karte .beleg-gruppenliste .beleg-gruppierung-wahl { width: auto; max-width: 9rem; flex: 0 0 auto; margin-bottom: 0; }
  .beleg-kachel-karte .beleg-gruppenliste-eintrag { width: auto; flex: 0 0 auto; white-space: nowrap; }
}

/* Vertipper erkennen (seit 15.10.2026): ungewöhnliche Menge orange umrandet mit Warnzeichen, Rückfrage beim Übernehmen. */
.form-input.menge-auffaellig { border-color: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 35%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, var(--input-bg, transparent)); }
.menge-warnung { margin-left: 0.3rem; color: var(--warning); cursor: help; }
.hinweis:has(.hinweis-inhalt > .fa-triangle-exclamation) { border-left-color: var(--warning); }
.hinweis-inhalt > i.fa-triangle-exclamation { color: var(--warning); }
.menge-auffaellig-text { color: var(--warning); font-weight: 700; }
:root[data-grundton="light"] .menge-auffaellig-text, :root[data-grundton="light"] .menge-warnung { color: #b45f00; }
.modal-box.mengen-rueckfrage { max-width: 40rem; width: 100%; }
.mengen-rueckfrage .modal-header h3 i { color: var(--warning); }
.mengen-rueckfrage-text { margin: 0 0 0.75rem; color: var(--text-secondary); }
.mengen-rueckfrage-fuss { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }

/* Eigene Charts (seit 15.10.2026): Dialog mit Gliederung, Werten und je Kennzahl einer Zeile (Farbe, Kennzahl,
   Darstellung, Achse, Farbe, Knöpfe). Der Eintrag im Konfigurator ist ein Knopf ("Eigenes Chart anlegen …"). */
.frei-einstellungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 0.75rem; }
.frei-dialog .widget-eintrag small { font-size: 0.78rem; color: var(--text-secondary); }
.frei-kennzahlen { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.4rem 0 0.5rem; }
/* Zwei Zeilen je Kennzahl: oben Farbe, Kennzahl und Knöpfe, darunter Darstellung, Achse und Farbe. */
.frei-kennzahl { display: grid; grid-template-columns: 0.7rem repeat(3, minmax(0, 1fr)) auto; grid-template-areas: "farbe wahl wahl wahl knoepfe" ". darst achse farbwahl ."; align-items: center; gap: 0.3rem 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); }
.frei-kennzahl .frei-farbe { grid-area: farbe; }
.frei-kennzahl .frei-kennzahl-wahl { grid-area: wahl; }
.frei-kennzahl .frei-darstellung { grid-area: darst; }
.frei-kennzahl .frei-achse { grid-area: achse; }
.frei-kennzahl .frei-farbwahl { grid-area: farbwahl; }
.frei-kennzahl .frei-knoepfe { grid-area: knoepfe; }
.frei-kennzahl .form-input { padding: 0.25rem 0.45rem; font-size: 0.85rem; }
.frei-farbe { width: 0.7rem; height: 1.6rem; border-radius: 0.2rem; align-self: center; }
.frei-knoepfe { display: flex; gap: 0.15rem; }
.frei-passt-nicht .frei-kennzahl-wahl { border-color: var(--critical); }
.frei-vorlage { display: flex; align-items: center; gap: 0.4rem; }
.widget-frei-neu { width: 100%; background: none; border: 0; color: var(--color-primary); font: inherit; text-align: left; }
@media (max-width: 600px) {
    .frei-kennzahl { grid-template-columns: 0.7rem minmax(0, 1fr) auto; grid-template-areas: "farbe wahl knoepfe" ". darst ." ". achse ." ". farbwahl ."; }
}

/* ================================================================== Handy und Tablet (seit 15.10.2026)
   data-geraet am <html> (js/geraet.js): "handy", "tablet" oder "desktop"; data-touch bei Fingerbedienung.
   Auf Handy und Tablet scrollt die Seite - Listen sind so lang wie ihr Inhalt (keine Rest-Höhe-Kästen, sonst bekam
   z. B. die Benutzerliste unter "Gerade aktiv" und "Lizenzen" nur 19 px). Der Desktop bleibt unverändert. */
/* Ausnahme data-rest-mobil (seit 30.10.2026, Datengrundlage des Bestellvorschlags): auch auf Handy und Tablet bis zum Rand (js/resthoehe.js). */
html:not([data-geraet="desktop"]) .rest-hoehe:not([data-rest-mobil]) { max-height: none !important; }
html:not([data-geraet="desktop"]) .rest-hoehe .widget-tabelle-wrap,
html:not([data-geraet="desktop"]) .liste-karte > .widget-tabelle-wrap { flex: none; min-height: 0; overflow-y: visible; overflow-x: auto; }
/* Am PC mit wenig Höhe (seit 20.10.2026: Browser-Zoom, niedriges Fenster - js/resthoehe.js setzt data-rest-frei, wenn für die
   Liste weniger als 240 px blieben): ebenso keine eigene Höhe, die Seite scrollt. Full HD ohne Zoom: kommt nicht vor. */
.rest-hoehe[data-rest-frei] { max-height: none !important; }
.rest-hoehe[data-rest-frei] :is(.widget-tabelle-wrap, .statistik-tabelle-wrap, .artikelstamm-inhalt) {
  flex: none; min-height: 0; overflow-y: visible; overflow-x: auto; }

/* Finger statt Maus: Schrift in Feldern ab 16 px (darunter zoomt das iPhone beim Antippen hinein), Knöpfe ab 44 px. */
html[data-touch] .form-input, html[data-touch] select, html[data-touch] textarea { font-size: max(16px, 0.85rem); }
html[data-touch] .btn, html[data-touch] .icon-button, html[data-touch] .btn-icon { min-height: 44px; }
html[data-touch] .icon-button, html[data-touch] .btn-icon { min-width: 44px; }
html[data-touch] .passwort-auge { width: 44px; height: 44px; right: 0; }
html[data-touch] .passwort-feld .form-input { padding-right: 48px; }
/* Rechte-Editor (seit 23.10.2026, mit der Gruppierung beim Öffnen): Auswahlfelder je Recht als Touch-Ziel. */
html[data-touch] .recht-zeile .form-input { min-height: 44px; }

/* Kopfleiste: auf dem Handy Hilfe, Farbmodus, Sprache und Abmelden im Menü "⋮" - der Seitentitel bekommt den Platz. */
.topbar-mehr { display: none; position: relative; }
html[data-geraet="handy"] .topbar-gross { display: none !important; }
html[data-geraet="handy"] .topbar-mehr { display: inline-flex; }
html[data-geraet="handy"] .topbar-right { gap: 0.15rem; }
html[data-geraet="handy"] .topbar-right .avatar { width: 2.1rem; height: 2.1rem; }
.topbar-mehr-hintergrund { position: fixed; inset: 0; z-index: 90; }
.topbar-mehr-menue { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 91; min-width: 15rem; padding: 0.35rem;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }
.topbar-mehr-eintrag { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 44px; padding: 0.35rem 0.6rem; border: 0; border-radius: 0.5rem;
  background: none; color: var(--text-primary); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.topbar-mehr-eintrag:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.topbar-mehr-eintrag > i { width: 1.2rem; text-align: center; color: var(--text-secondary); }
.topbar-mehr-eintrag select { flex: 1 1 auto; }
/* Vollbild (seit 20.10.2026, js/vollbild.js): nur bei Fingerbedienung und wenn der Browser es kann (data-vollbild, das iPhone
   kann es nicht) - am PC nie. Symbol und Text folgen data-vollbild-an (auch nach Zurück/Esc). */
.vollbild-knopf, .vollbild-eintrag { display: none; }
html[data-touch][data-vollbild] .vollbild-knopf { display: inline-flex; }
html[data-touch][data-vollbild] .vollbild-eintrag { display: flex; }
/* Als installierte App im Anzeigemodus fullscreen (manifest.webmanifest) ist das Vollbild schon da - Knopf überflüssig. */
html[data-als-app] :is(.vollbild-knopf, .vollbild-eintrag) { display: none !important; }
html[data-vollbild-an] :is(.vollbild-knopf, .vollbild-eintrag) .vollbild-aus,
html:not([data-vollbild-an]) :is(.vollbild-knopf, .vollbild-eintrag) .vollbild-an { display: none; }
/* Nur für Vorleseprogramme (Name eines Symbol-Knopfs, der sich ändert). */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html[data-geraet="handy"] .topbar-title { font-size: 1rem; }
/* Tablet hochkant (bis 1100 px): ebenfalls das Menü "⋮" und das Demo-Abzeichen nur als Symbol - sonst wird die Kopfzeile
   breiter als der Bildschirm und die ganze Seite lässt sich seitlich verschieben. */
@media (max-width: 1100px) {
  html[data-geraet="tablet"] .topbar-gross { display: none !important; }
  html[data-geraet="tablet"] .topbar-mehr { display: inline-flex; }
  html[data-geraet="tablet"] .demo-abzeichen { font-size: 0; gap: 0; padding: 0.4rem 0.55rem; }
  html[data-geraet="tablet"] .demo-abzeichen i { font-size: 1rem; }
  html[data-geraet="tablet"] .topbar-benutzer-name { display: none; }
  html[data-geraet="tablet"] .topbar-left { min-width: 0; flex: 1 1 auto; }
  html[data-geraet="tablet"] .topbar-left > * { min-width: 0; }
  html[data-geraet="tablet"] .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-geraet="tablet"] .topbar-subtitle { display: none; }
}

/* Mobil-Korrekturen 19.10.2026: Kopfzeile flach, Farbmodus im Menü, Hilfe */
/* Handy - auch quer, dann breiter als 600 px: die Kopfzeile immer einzeilig (Beschreibung und Name weg, vom Demo-Abzeichen
   nur das Symbol, Text im Tooltip). Vorher galt das nur bis 600 px Breite; quer belegte die Kopfzeile fast die halbe Höhe. */
html[data-geraet="handy"] .topbar-inner { padding: 0.25rem 0.6rem; gap: 0.5rem; }
html[data-geraet="handy"] .topbar-left { min-width: 0; flex: 1 1 auto; gap: 0.4rem; }
html[data-geraet="handy"] .topbar-left > * { min-width: 0; }
html[data-geraet="handy"] :is(.topbar-subtitle, .topbar-benutzer-name) { display: none; }
html[data-geraet="handy"] .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-geraet="handy"] .topbar-right { flex-shrink: 0; }
html[data-geraet="handy"] .demo-abzeichen { font-size: 0; gap: 0; padding: 0.4rem 0.55rem; }
html[data-geraet="handy"] .demo-abzeichen i { font-size: 1rem; }
html[data-touch] .topbar .thema-knopf { width: 44px; height: 44px; flex-shrink: 0; }
html[data-touch] .topbar-benutzer { min-width: 44px; min-height: 44px; padding: 0.2rem; justify-content: center; }
/* Tablet quer (breiter als 1100 px, volle Kopfzeile): Beschreibung und Name je in einer Zeile statt umbrochen - sonst wird die
   Kopfzeile dreizeilig hoch. */
html[data-geraet="tablet"] .topbar-left { min-width: 0; flex: 1 1 auto; }
html[data-geraet="tablet"] .topbar-left > * { min-width: 0; }
html[data-geraet="tablet"] :is(.topbar-title, .topbar-subtitle) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-geraet="tablet"] .topbar-benutzer-name { white-space: nowrap; }
/* Demo-Abzeichen auf Tablets in jeder Lage nur als Symbol (seit 06.11.2026, Text im Tooltip): quer war es mit langen
   Übersetzungen (Russisch) so breit, dass der Seitentitel auf Breite 0 schrumpfte. */
html[data-geraet="tablet"] .demo-abzeichen { font-size: 0; gap: 0; padding: 0.4rem 0.55rem; }
html[data-geraet="tablet"] .demo-abzeichen i { font-size: 1rem; }
/* Wenig Höhe (Handy quer, kleine Tablets quer): flache Kopfzeile; --kopf-hoehe zieht mit, damit klebende Leisten darunter
   (Suche der Erfassung, Hinweise, Inhalt der Hilfe) direkt anschließen. */
@media (max-height: 560px) {
  html:not([data-geraet="desktop"]) { --kopf-hoehe: 3.25rem; }
  html:not([data-geraet="desktop"]) .topbar-inner { padding-top: 0.15rem; padding-bottom: 0.15rem; }
  html:not([data-geraet="desktop"]) .topbar-left { min-width: 0; flex: 1 1 auto; }
  html:not([data-geraet="desktop"]) .topbar-left > * { min-width: 0; }
  html:not([data-geraet="desktop"]) :is(.topbar-subtitle, .topbar-benutzer-name) { display: none; }
  html:not([data-geraet="desktop"]) .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not([data-geraet="desktop"]) .demo-abzeichen { font-size: 0; gap: 0; padding: 0.4rem 0.55rem; }
  html:not([data-geraet="desktop"]) .demo-abzeichen i { font-size: 1rem; }
}

/* Menü "⋮": nie höher als der Bildschirm (quer!), der Farbmodus klappt im Menü nach unten auf statt seitlich hinaus. Ohne
   Unschärfe, solange offen - sonst bindet sie den Hintergrund zum Schließen an die Kopfzeile statt an den Bildschirm. */
.topbar:has(.topbar-mehr-menue) { backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 95; }
.topbar-mehr-menue { max-width: calc(100vw - 1rem); max-height: calc(100vh - var(--kopf-hoehe) - 0.75rem);
  max-height: calc(100dvh - var(--kopf-hoehe) - 0.75rem); overflow-y: auto; overscroll-behavior: contain; }
.farbmodus-im-menue .farbmodus-menue { position: static; min-width: 0; padding: 0 0 0.25rem 1.4rem; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; }
html[data-touch] .farbmodus-eintrag { min-height: 44px; }
.farbmodus-im-menue .farbmodus-pfeil { margin-left: auto; font-size: 0.8rem; }
/* Palette am PC: bei niedrigem Fenster scrollt die Liste in sich statt unten aus dem Bildschirm zu ragen. */
.farbmodus-wahl:not(.farbmodus-im-menue) .farbmodus-menue { max-height: calc(100vh - var(--kopf-hoehe) - 1rem); overflow-y: auto; }

/* Hilfe unter 1100 px (Handy, Tablet hochkant, schmales Fenster am PC): eine Spalte, das Inhaltsverzeichnis als aufklappbare Leiste "Inhalt" unter der Kopfzeile; die
   Liste legt sich nur auf Wunsch über den Text und schließt nach der Wahl (js/hilfe.js). */
.hilfe-verzeichnis-mobil summary { list-style: none; display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.2rem 0.9rem;
  cursor: pointer; font-weight: 600; }
.hilfe-verzeichnis-mobil summary::-webkit-details-marker { display: none; }
.hilfe-verzeichnis-mobil summary > i:first-child { color: var(--color-primary); }
.hilfe-pfeil { margin-left: auto; color: var(--text-secondary); transition: transform 0.15s; }
.hilfe-verzeichnis-mobil[open] .hilfe-pfeil { transform: rotate(180deg); }
.hilfe-verzeichnis-liste { position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 0.5rem; padding: 0.35rem;
  max-height: calc(100vh - var(--kopf-hoehe) - 4.5rem); max-height: calc(100dvh - var(--kopf-hoehe) - 4.5rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.hilfe-verzeichnis-liste a { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.3rem 0.6rem; border-radius: 0.5rem;
  color: var(--text-primary); text-decoration: none; }
.hilfe-verzeichnis-liste a:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.hilfe-verzeichnis-liste a i { width: 1.2rem; text-align: center; color: var(--text-secondary); }
html[data-geraet="handy"] .hilfe-abschnitt { padding: 0.8rem 0.85rem; }
html[data-geraet="handy"] .hilfe-abschnitt h2 { font-size: 1.3rem; }
/* Tablet quer und breiter: Platz genug für das stehende Verzeichnis links wie am PC (nur größere Touch-Ziele). */
html[data-touch] .hilfe-verzeichnis a { display: flex; align-items: center; gap: 0.35rem; min-height: 44px; }
@media (max-width: 1099.98px) {
  .hilfe-seite { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .hilfe-verzeichnis { display: none; }
  .hilfe-verzeichnis-mobil { display: block; position: sticky; top: var(--kopf-hoehe); z-index: 6;
    padding: 0; background: var(--popup-bg); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
  .hilfe-abschnitt { scroll-margin-top: calc(var(--kopf-hoehe) + 3.75rem); }
}

/* ------------------------------------------------------------------ Verwaltungslisten auf dem Handy als Karten (seit 15.10.2026)
   Je Zeile eine Karte: Titel (Zelle .karte-titel, sonst die erste) und die Knöpfe (letzte Zelle ohne Überschrift) oben,
   darunter die übrigen Zellen mit ihrer Spaltenüberschrift davor (data-label, js/geraet.js) - statt einer Tabelle, die
   man seitlich schieben muss. */
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) thead { display: none; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle),
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody { display: block; width: 100%; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--line-soft); }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td {
  display: block; order: 3; flex: 1 1 100%; min-width: 0; padding: 0; border: 0; white-space: normal; text-align: left; overflow-wrap: anywhere; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td[data-label]:not([data-label=""], .karte-titel, .karte-bild, :first-child)::before {
  content: attr(data-label) ": "; color: var(--text-secondary); font-size: 0.82rem; font-weight: 400; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td:is(.karte-titel, .karte-bild),
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr:not(:has(> .karte-titel)) > td:first-child {
  order: 1; flex: 1 1 0; font-size: 1.02rem; font-weight: 600; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td :is(button, a):not(.btn) { text-align: left; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td.karte-bild { flex: 0 0 auto; }
/* Knöpfe oben rechts, nur als Symbol (der Text bleibt für Screenreader) - sonst bliebe dem Namen kaum Platz. */
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td:last-child[data-label=""]:not(:first-child) {
  order: 2; flex: 0 0 auto; margin-left: auto; display: flex; gap: 0.25rem; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td:last-child[data-label=""]:not(:first-child) .btn:has(> i) {
  font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td:last-child[data-label=""]:not(:first-child) .btn:has(> i) > i { font-size: 1rem; }
/* Zuklappbare Karten auf Handy und Tablet (Benutzer: "Gerade aktiv", "Lizenzen"; Tablet seit 19.10.2026): zu nur Titel,
   Pfeil und eine kurze Zeile; am PC immer offen, ohne Pfeil. */
.mobil-klapp-knopf, .mobil-klapp-kurz { display: none; }
html:not([data-geraet="desktop"]) .mobil-klapp > .card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
html:not([data-geraet="desktop"]) .mobil-klapp > .card-header > h2 { flex: 1 1 0; min-width: 0; margin: 0; }
html:not([data-geraet="desktop"]) .mobil-klapp > .card-header > :is(.card-subtitle, .mobil-klapp-kurz) { flex-basis: 100%; }
html:not([data-geraet="desktop"]) .mobil-klapp-knopf { display: inline-flex; align-items: center; justify-content: center; }
html:not([data-geraet="desktop"]) .mobil-klapp-knopf i { transition: transform 0.15s; }
html:not([data-geraet="desktop"]) .mobil-klapp.auf .mobil-klapp-knopf i { transform: rotate(180deg); }
html:not([data-geraet="desktop"]) .mobil-klapp:not(.auf) :is(.card-subtitle, .mobil-klapp-inhalt) { display: none; }
html:not([data-geraet="desktop"]) .mobil-klapp:not(.auf) .mobil-klapp-kurz { display: block; margin: 0; font-size: 0.9rem; color: var(--text-secondary); }

/* Gewählte Zeile (Bestellplan, Anmeldezeiten) als ganze Karte markieren, nicht Zelle für Zelle. */
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr.gewaehlt { background: var(--active); border-radius: var(--radius-main); }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr.gewaehlt > td { background: none; }
/* Editor unter der Liste (Bestellplan): js/geraet.js scrollt auf dem Handy hin - nicht unter die Kopfzeile. */
[data-mobil-zeigen] { scroll-margin-top: calc(var(--kopf-hoehe) + 0.5rem); }

/* Leere Zellen (nichts zu zeigen) nehmen keine eigene Zeile. */
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) > tbody > tr > td:empty { display: none; }
html[data-geraet="handy"] :is(.verwaltung-tabelle, .rechte-tabelle, .anmeldungen-tabelle, .karten-tabelle) .chip { margin-top: 0.1rem; }

/* ------------------------------------------------------------------ Bestellplan-Editor auf Handy und Tablet (seit 16.10.2026)
   Wochenraster je Gruppe als Karte mit Kacheln (Tag + Wert, 44 px), Zellen-Editor als Blatt von unten wie das Mengen-Pad,
   Sondertage als Karten mit Beschriftung über jedem Feld, Vorschau auf dem Handy je Tag eine Karte. Am PC unverändert. */
.bestellplan-zelle-tag, .bestellplan-mobil-label, .bestellplan-zellen-zu, .bestellplan-zellen-hintergrund { display: none; }
.bestellplan-zellen-kopf { display: contents; }
html:not([data-geraet="desktop"]) .bestellplan-raster thead { display: none; }
html:not([data-geraet="desktop"]) .bestellplan-raster, html:not([data-geraet="desktop"]) .bestellplan-raster > tbody { display: block; width: 100%; }
html:not([data-geraet="desktop"]) .bestellplan-raster > tbody > tr {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.8rem), 1fr)); gap: 0.35rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); }
html:not([data-geraet="desktop"]) .bestellplan-raster > tbody > tr > :is(th, td) { padding: 0; border: 0; }
html:not([data-geraet="desktop"]) .bestellplan-raster > tbody > tr > th { grid-column: 1 / -1; font-size: 1rem; white-space: normal; }
html:not([data-geraet="desktop"]) .bestellplan-zelle {
  min-height: 44px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem;
  padding: 0.3rem 0.5rem; border: 1px solid var(--border-soft); white-space: normal; text-align: left; line-height: 1.2; }
html:not([data-geraet="desktop"]) .bestellplan-zelle-tag { display: block; font-size: 0.75rem; font-weight: 600; font-style: normal; color: var(--text-secondary); }
html:not([data-geraet="desktop"]) .bestellplan-zellen-hintergrund { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.28); }
html:not([data-geraet="desktop"]) .bestellplan-zellen-editor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; margin: 0; max-height: 88dvh; overflow-y: auto;
  padding: 0.8rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom)); background: var(--popup-bg); border: 0; border-top: 1px solid var(--border-soft);
  border-radius: 1.1rem 1.1rem 0 0; box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.3); }
/* Das Blatt bekommt beim Öffnen den Fokus (Tastatur, Screenreader) - der Rahmen darum wäre nur Lärm; seine Felder zeigen
   ihren Fokusring wie überall. Gilt auch am PC (dort fokussiert ein Klick ins Leere den Editor). */
.bestellplan-zellen-editor:focus { outline: none; }
@media (min-width: 600px) { html:not([data-geraet="desktop"]) .bestellplan-zellen-editor { left: 50%; right: auto; width: min(40rem, 100vw); transform: translateX(-50%); } }
html:not([data-geraet="desktop"]) .bestellplan-zellen-kopf { display: flex; align-items: flex-start; gap: 0.6rem; }
html:not([data-geraet="desktop"]) .bestellplan-zellen-kopf > strong { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
html:not([data-geraet="desktop"]) .bestellplan-zellen-zu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; }
html[data-touch] .bestellplan-wochentage .widget-eintrag { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.4rem; }
html:not([data-geraet="desktop"]) .bestellplan-art label { min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; }
/* Sondertage: je Zeile eine Karte, die Felder fließen nebeneinander (Tablet) bzw. untereinander (Handy). */
html:not([data-geraet="desktop"]) .bestellplan-sondertage thead { display: none; }
html:not([data-geraet="desktop"]) .bestellplan-sondertage, html:not([data-geraet="desktop"]) .bestellplan-sondertage > tbody { display: block; width: 100%; }
html:not([data-geraet="desktop"]) .bestellplan-sondertage > tbody > tr {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
html:not([data-geraet="desktop"]) .bestellplan-sondertage > tbody > tr > td { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 10rem; min-width: 0; padding: 0; border: 0; }
html:not([data-geraet="desktop"]) .bestellplan-sondertage > tbody > tr > td.bestellplan-liefertage { flex-direction: row; flex-wrap: wrap; align-items: center; flex-basis: 100%; }
html:not([data-geraet="desktop"]) .bestellplan-sondertage > tbody > tr > td.bestellplan-sonder-notiz { flex-basis: 14rem; }
html:not([data-geraet="desktop"]) .bestellplan-sondertage > tbody > tr > td.bestellplan-sonder-loeschen { flex: 0 0 auto; margin-left: auto; }
html:not([data-geraet="desktop"]) .bestellplan-sondertage .btn-icon { min-width: 44px; min-height: 44px; }
html:not([data-geraet="desktop"]) .bestellplan-sondertage .bestellplan-zeit { width: 100%; }
html:not([data-geraet="desktop"]) .bestellplan-mobil-label { display: block; flex-basis: 100%; font-size: 0.8rem; color: var(--text-secondary); }
/* Vorschau: Tablet behält die Tabelle (drei Spalten passen), das Handy je Tag eine Karte. */
html:not([data-geraet="handy"]) .bestellplan-vorschau .bestellplan-mobil-label { display: none; }
html[data-geraet="handy"] .bestellplan-vorschau thead { display: none; }
html[data-geraet="handy"] .bestellplan-vorschau, html[data-geraet="handy"] .bestellplan-vorschau > tbody { display: block; width: 100%; }
html[data-geraet="handy"] .bestellplan-vorschau > tbody > tr { display: block; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
html[data-geraet="handy"] .bestellplan-vorschau > tbody > tr > :is(th, td) { display: block; width: auto; padding: 0.15rem 0; border: 0; white-space: normal; }
html[data-geraet="handy"] .bestellplan-vorschau-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
/* min-width 0: sonst ist die Auswahl so breit wie der längste Kundenname. */
html[data-geraet="handy"] .bestellplan-vorschau-kunde { max-width: 100%; min-width: 0; width: 100%; flex: 1 1 100%; }

/* ------------------------------------------------------------------ Erfassungsseiten auf Handy und Tablet (seit 15.10.2026)
   Leiste kompakt (ohne Beschriftungen), Knöpfe in der Fußleiste, Artikel als Zeilen mit −/Menge/+ und Mengen-Pad. */
html:not([data-geraet="desktop"]) .bestell-leiste .form-label { display: none; }
html:not([data-geraet="desktop"]) .bestell-leiste { gap: 0.45rem 0.6rem; padding: 0.6rem 0.75rem; }
html:not([data-geraet="desktop"]) .bestell-leiste .filter-field-readonly { font-size: 0.85rem; }

/* Fußleiste: klebt am unteren Rand (nur in der Breite des Inhalts - überdeckt nie die Seitenleiste). */
.mobil-fussleiste { position: sticky; bottom: 0; z-index: 30; margin: 0.6rem -0.25rem 0; padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main) var(--radius-main) 0 0; box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.14); }
.mobil-fussleiste .bestell-leiste-aktionen { display: flex; align-items: center; gap: 0.4rem; margin: 0; width: 100%; flex-wrap: nowrap; }
.mobil-fussleiste .bestell-uebernehmen, .mobil-fussleiste .bestell-leiste-aktionen > .btn-primary:not(.bestell-artikel-knopf) { flex: 1 1 auto; justify-content: center; }
.mobil-fussleiste .bestell-mehr-menue { top: auto; bottom: calc(100% + 0.4rem); }
/* Meldungen über der Fußleiste und in voller Breite - sonst lägen sie auf "Übernehmen". */
html:not([data-geraet="desktop"]) .bestell-meldungen { left: 0.6rem; right: 0.6rem; bottom: calc(4.9rem + env(safe-area-inset-bottom)); align-items: stretch; }
html:not([data-geraet="desktop"]) .bestell-meldung { left: 0.6rem; right: 0.6rem; bottom: calc(4.9rem + env(safe-area-inset-bottom)); max-width: none; }
html:not([data-geraet="desktop"]) .bestell-meldungen .bestell-meldung { max-width: none; }
/* Nebenknöpfe als 44-px-Quadrate, "Übernehmen" darf schrumpfen - auf 360 px war die Leiste sonst 402 px breit, die ganze
   Seite ließ sich seitlich schieben und das Pad ragte rechts aus dem Bild. */
.mobil-fussleiste .bestell-leiste-aktionen > * { min-width: 0; }
.mobil-fussleiste .bestell-artikel-knopf, .mobil-fussleiste .bestell-text-knopf, .mobil-fussleiste .bestell-mehr-knopf { flex: 0 0 44px; width: 44px; padding: 0; justify-content: center; }
.mobil-fussleiste .bestell-mehr { flex: 0 0 auto; }
.mobil-fussleiste .bestell-artikel-knopf .knopf-text { display: none; }
.mobil-fussleiste .bestell-uebernehmen { overflow: hidden; white-space: nowrap; padding-left: 0.6rem; padding-right: 0.6rem; }
@media (max-width: 400px) { .mobil-fussleiste .bestell-uebernehmen > i { display: none; } }

/* Kopf der Belegtabelle: "Ansicht" statt der Werkzeugleiste; das Blatt darunter stapelt die Werkzeuge. */
.beleg-ansicht-knopf { margin-left: auto; flex-shrink: 0; }
html:not([data-geraet="desktop"]) .beleg-tabelle-kopf { flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
html:not([data-geraet="desktop"]) .beleg-tabelle-kopf h3 { font-size: 1rem; min-width: 0; flex: 1 1 auto; }
/* Handy und Tablet (seit 06.11.2026): „+ Artikel“ im Kopf der Liste statt in der Fußleiste - Daumengröße, auf dem Handy nur das Plus. */
html:not([data-geraet="desktop"]) .beleg-tabelle-kopf .bestell-artikel-knopf { min-height: 44px; min-width: 44px; justify-content: center; }
html[data-geraet="handy"] .beleg-tabelle-kopf .bestell-artikel-knopf { padding-left: 0.6rem; padding-right: 0.6rem; }
html[data-geraet="handy"] .beleg-tabelle-kopf .bestell-artikel-knopf .knopf-text { display: none; }
/* Handy (seit 06.11.2026): der Titel der Tabelle in einer eigenen Zeile, darunter „+“, Hinweise und „Ansicht“ - sonst bräche er Wort für Wort um. */
html[data-geraet="handy"] .beleg-tabelle-kopf { flex-wrap: wrap; }
html[data-geraet="handy"] .beleg-tabelle-kopf h3 { flex: 1 1 100%; }
html[data-geraet="handy"] .beleg-tabelle-kopf .bestell-artikel-knopf { margin-right: 0; }
/* Tag nur über den Bestellplan auf Handy und Tablet: Plan-Auswahl breit genug und mit Daumengröße. */
html:not([data-geraet="desktop"]) .bestellplan-leiste-tag .btn, html:not([data-geraet="desktop"]) .bestellplan-leiste-tag .plan-auswahl-feld { min-height: 44px; min-width: 44px; }
html[data-geraet="handy"] .bestell-leiste > .bestellplan-leiste-tag, html[data-geraet="handy"] .bestellplan-leiste-tag .plan-auswahl { flex: 1 1 100%; }
html[data-geraet="handy"] .bestellplan-leiste-tag .plan-auswahl-feld { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
.beleg-ansicht-blatt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0 0.75rem; border-bottom: 1px solid var(--line-soft); }
.beleg-ansicht-blatt > * { max-width: 100%; }

/* Lieferungen als schmale Köpfe. */
.mobil-belege { display: flex; flex-direction: column; }
.mobil-lieferung { display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 48px; padding: 0.4rem 0.2rem; border: 0; border-bottom: 1px solid var(--line-soft);
  background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.mobil-lieferung > i { width: 1rem; color: var(--text-secondary); }
.mobil-lieferung-nr { font-weight: 700; white-space: nowrap; }
.mobil-lieferung-info { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobil-lieferung.neu .mobil-lieferung-info { font-style: italic; }
.mobil-lieferung-text { margin: 0.3rem 0.2rem 0; font-size: 0.85rem; color: var(--text-secondary); }

/* Suche und Gruppen-Chips kleben unter der Kopfzeile - nicht, solange das Pad offen ist: dann gehört der Platz über dem
   Pad der Zeile, die gerade erfasst wird. */
.mobil-werkzeug { position: sticky; top: var(--kopf-hoehe, 0); z-index: 5; display: flex; flex-direction: column; gap: 0.45rem; margin: 0 -0.2rem; padding: 0.55rem 0.2rem 0.45rem;
  background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.beleg-tabelle-karte:has(.mengen-pad) .mobil-werkzeug { position: static; }
.mobil-suche { width: 100%; }
.mobil-werkzeug-zeile { display: flex; align-items: center; gap: 0.45rem; }
.mobil-werkzeug-zeile .mobil-suche { flex: 1 1 auto; min-width: 0; }
.mobil-zaehlen { flex: 0 0 auto; white-space: nowrap; }
.inventur-gezaehlt-marke { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.45rem; border-radius: 999px; line-height: 1.35rem;
  background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); font-weight: 600; }
.mengen-pad-fortschritt { flex-basis: 100%; font-size: 0.8rem; color: var(--good); font-weight: 600; }
.mobil-chips { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.1rem; }
.mobil-chips::-webkit-scrollbar { display: none; }
.mobil-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 38px; padding: 0.25rem 0.8rem; border: 1px solid var(--border-soft); border-radius: 999px;
  background: var(--surface); color: var(--text-primary); font: inherit; font-size: 0.9rem; white-space: nowrap; cursor: pointer; }
.mobil-chip.aktiv { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.mobil-chip-zahl { font-size: 0.78rem; opacity: 0.75; }
.mobil-chip.plan-vorbei { border-color: var(--critical); }

/* Zeilen: links Name (+ Kennzeichen) und eine Zeile Zahlen, rechts −/Menge/+. */
.mobil-zeilen { display: flex; flex-direction: column; }
.mobil-gruppe { margin: 0.8rem 0 0.15rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-secondary); display: flex; align-items: center; gap: 0.45rem; }
.mobil-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.55rem 0.2rem 0.55rem 0.55rem; border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent; }
.mobil-zeile.liefer-geaendert { border-left-color: var(--color-primary); }
.mobil-zeile.liefer-offen { border-left-color: var(--warning); }
.mobil-zeile.liefer-vorschlag { border-left-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
/* Inventur: gezählt grün (Vorschlag → gezählt), auch wenn die Menge eben erst eingegeben wurde. */
.mobil-zeile.inventur-gezaehlt { border-left-color: var(--good); }
.mobil-zeile.beleg-nur-vergleich .mobil-zeile-name { color: var(--text-secondary); font-weight: 500; }
.mobil-zeile.liefer-entfernt .mobil-zeile-name { text-decoration: line-through; }
.mobil-zeile.pad-aktiv { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.mobil-zeile-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.mobil-zeile-name { font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; hyphens: auto; }
.mobil-zeile-marken { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.mobil-zeile-marken > * { margin: 0 !important; font-size: 0.72rem; }
.mobil-zeile-info { display: flex; flex-wrap: wrap; gap: 0 0.1rem; font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mobil-zeile-info > span:not(:last-child)::after { content: "·"; margin: 0 0.35em; }
.mobil-zeile-wert { color: var(--text-primary); font-weight: 600; }
.mobil-zeile-notiz { font-size: 0.8rem; color: var(--text-secondary); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobil-zeile-menge { display: flex; align-items: center; gap: 0.3rem; }
.mobil-schritt, .mobil-bestaetigen { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-soft);
  background: var(--surface); color: var(--text-primary); font-size: 0.95rem; cursor: pointer; }
.mobil-schritt:disabled { opacity: 0.3; cursor: default; }
.mobil-bestaetigen { border-color: var(--warning); color: var(--warning); }
.mobil-menge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.4rem; height: 44px; padding: 0 0.45rem; border: 1px solid var(--border-soft);
  border-radius: 0.65rem; background: var(--surface-faint, var(--surface)); color: var(--text-primary); font: inherit; cursor: pointer; line-height: 1.05; }
.mobil-menge-zahl { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mobil-menge-einheit { font-size: 0.65rem; color: var(--text-secondary); max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobil-menge.leer .mobil-menge-zahl { color: var(--text-secondary); font-weight: 500; }
.mobil-menge.menge-auffaellig { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
.mobil-zeile.liefer-geaendert .mobil-menge { border-color: var(--color-primary); }
.mobil-menge-nur { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 3rem; font-weight: 700; }
.mobil-summe { margin: 0.6rem 0 0; padding: 0.55rem 0.2rem 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mobil-summe-wert { margin-left: 0.15rem; }
/* Suche (seit 23.10.2026): Treffer aller Gruppen als kompakte Liste direkt unter dem Suchfeld, ohne Bilder und Überschriften,
   je Zeile klein die Gruppe. Mindestens ein Bildschirm hoch - so kann das Feld beim Antippen unter die Kopfzeile rücken
   (js/geraet.js) und die Treffer stehen darunter über der Tastatur. */
.mobil-treffer { display: flex; flex-direction: column; min-height: calc(100dvh - var(--kopf-hoehe, 0px)); }
.mobil-treffer-kopf { margin: 0.35rem 0.2rem 0.1rem; font-size: 0.8rem; color: var(--text-secondary); }
.mobil-treffer > .mobil-zeile { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.mobil-zeile-gruppe { color: var(--color-primary); font-weight: 600; }
html[data-geraet="tablet"] .mobil-zeile { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.beleg-kachel-pad { width: 100%; }
/* Umschalten Liste/Gruppen/Bilder auf dem Tablet (seit 23.10.2026, Rückmeldung: das Display wurde kurz schwarz): nur die
   sichtbaren Kacheln zeichnen - die übrigen bekommen ihre Größe geschätzt und werden erst beim Hinscrollen gezeichnet. Spart
   beim Wechsel Layout, Malen und Grafikspeicher (bei 100+ Artikeln rund das Zehnfache). Dazu ohne Unschärfe-Ebenen
   (backdrop-filter) über dem Inhalt: Kopfzeile und Seitenleiste deckend - auf schwachen Grafikchips eine bekannte Ursache
   für schwarze Bilder, wenn sich darunter viel ändert. Optisch gleich (die Farbe liegt über deckendem Grund). */
html:not([data-geraet="desktop"]) .beleg-kachel { content-visibility: auto; contain-intrinsic-size: auto 15rem; }
html[data-touch] .topbar { -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(var(--topbar-bg), var(--topbar-bg)), var(--popup-bg); }
:root[data-touch] body .sidebar.sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Bilderansicht mit dem Finger: −/+ 44 px, die Menge dazwischen (öffnet das Pad) nimmt den Rest. */
html[data-touch] .beleg-kachel-schritt { width: 44px; height: 44px; }
html[data-touch] .beleg-kachel-menge { gap: 0.2rem; }
html[data-geraet] .beleg-kachel .mobil-menge { min-width: 0; padding: 0 0.15rem; }
/* Zwei Kacheln nebeneinander: die weiteren Angaben untereinander, sonst wird aus "Preis" "Pr…". */
html[data-geraet="handy"] .beleg-kachel-angaben { grid-template-columns: minmax(0, 1fr); }
/* Breite Listen (Tablet quer): Vorwochen als kleine Spalten, noch breiter die Gruppen links. Maßgeblich ist die Breite der
   Liste selbst (Container), nicht die des Bildschirms - die Seitenleiste nimmt auf dem Tablet quer schon ein Viertel. Die
   Container sitzen um Suche und Zeilen, nicht um die ganze Karte: dort machte die Eingrenzung das Pad (fixed) zum Teil der
   Karte. */
.mobil-werkzeug { container: mobil-werkzeug / inline-size; }
.mobil-rahmen { container: mobil-rahmen / inline-size; }
.mobil-zeile-wochen, .mobil-gruppenliste, .mobil-zeile.mobil-zeile-kopf { display: none; }
@container mobil-rahmen (min-width: 700px) {
  .mobil-zeilen.mit-wochen > .mobil-zeile { grid-template-columns: minmax(0, 1fr) auto 11.5rem; }
  .mobil-zeile-wochen { display: flex; font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .mobil-zeile-wochen > span { width: 3.3rem; text-align: right; }
  .mobil-zeilen.mit-wochen .mobil-zeile-menge { justify-content: flex-end; }
  .mobil-zeile.mobil-zeile-kopf { display: grid; padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-secondary); }
  .mobil-zeile-kopf .mobil-zeile-wochen { font-size: 0.75rem; }
  .mobil-zeile-kopf-menge { text-align: right; padding-right: 3.2rem; }
}
@container mobil-rahmen (min-width: 1000px) {
  .mobil-rahmen-innen.mit-gruppen { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
  .mobil-rahmen-innen.mit-gruppen .mobil-gruppenliste { display: flex; flex-direction: column; gap: 0.3rem; position: sticky;
    top: calc(var(--kopf-hoehe) + 4.4rem); max-height: calc(100vh - var(--kopf-hoehe) - 9rem); overflow-y: auto; padding: 0.6rem 0.1rem; }
  .mobil-gruppenliste .mobil-chip { justify-content: space-between; border-radius: 0.6rem; text-align: left; white-space: normal; }
}
@container mobil-werkzeug (min-width: 1000px) { .mobil-chips.mit-gruppenliste { display: none; } }
/* Handy: weniger Rand um Seite und Karten - auf 360 px blieben dem Artikelnamen sonst nur gut 100 px. */
html[data-geraet="handy"] .app-content { padding: 0.5rem 0.45rem; }
html[data-geraet="handy"] .beleg-tabelle-karte, html[data-geraet="handy"] .bestell-leiste { padding-left: 0.6rem; padding-right: 0.6rem; }
html[data-geraet="handy"] .mobil-menge { min-width: 3rem; }
/* Sicherheitsnetz: was trotzdem breiter als der Bildschirm ist, wird abgeschnitten, statt die ganze Seite seitlich
   verschiebbar zu machen (dann säßen auch Pad und Dialoge falsch). Die Smoke-Tests messen ohne dieses Netz. */
html:not([data-geraet="desktop"]) .app-content { overflow-x: clip; }

/* Dialoge auf dem Handy (seit 15.10.2026): große (Artikelsuche, Belegliste, Historie, Vorbestellung) im Vollbild - die
   Liste scrollt innen und neben der Tastatur bleibt Platz; kleine (Text, Rückfrage, Abmelden) nur so hoch wie ihr Inhalt. */
html[data-geraet="handy"] .modal-overlay { padding: 0; align-items: stretch; }
html[data-geraet="handy"] .modal-box { max-width: none; width: 100%; height: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0;
  padding: 0.8rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom)); }
html[data-geraet="handy"] .modal-overlay:has(> .bestell-text-dialog, > .mengen-rueckfrage, > .abmelden-dialog, > .bestell-vorschlag-hinweise) { padding: 0.75rem; align-items: center; }
html[data-geraet="handy"] .modal-box:is(.bestell-text-dialog, .mengen-rueckfrage, .abmelden-dialog, .bestell-vorschlag-hinweise) { height: auto; max-height: 90dvh;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
/* Tastaturhinweise ("↑ ↓ navigieren …") gibt es auf Touch-Geräten nicht; Treffer mit ganzem Namen, Warengruppe und Sperre
   darunter statt rechts abgeschnitten. */
html[data-touch] .modal-fusszeile { display: none; }
html:not([data-geraet="desktop"]) .modal-treffer { flex-wrap: wrap; flex-shrink: 0; align-items: center; row-gap: 0.1rem; min-height: 44px; }
html:not([data-geraet="desktop"]) .modal-treffer-name { flex: 1 1 9rem; min-width: 0; }

/* ------------------------------------------------------------------ Mengen-Pad (seit 15.10.2026) */
.mengen-pad-hintergrund { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.28); }
.mengen-pad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; display: flex; flex-direction: column; gap: 0.55rem; max-height: 92vh; overflow-y: auto;
  padding: 0.8rem 0.9rem calc(0.8rem + env(safe-area-inset-bottom)); background: var(--popup-bg); border-top: 1px solid var(--border-soft);
  border-radius: 1.1rem 1.1rem 0 0; box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.3); outline: none; animation: mengen-pad-rein 0.16s ease-out; }
@keyframes mengen-pad-rein { from { transform: translateY(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) { .mengen-pad { left: 50%; right: auto; width: 30rem; transform: translateX(-50%); animation: none; } }
.mengen-pad-kopf { display: flex; align-items: flex-start; gap: 0.6rem; }
.mengen-pad-titel { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.mengen-pad-titel strong { font-size: 1.05rem; line-height: 1.25; }
.mengen-pad-nr { color: var(--text-secondary); font-size: 0.85rem; }
.mengen-pad-angaben { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
.mengen-pad-angaben > div { display: inline-flex; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--surface-strong); font-size: 0.8rem; }
.mengen-pad-angaben dt { color: var(--text-secondary); font-weight: 400; }
.mengen-pad-angaben dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mengen-pad-text, .mengen-pad-hinweis, .mengen-pad-fehler, .mengen-pad-sperre { margin: 0; font-size: 0.85rem; }
.mengen-pad-text { color: var(--text-secondary); font-style: italic; }
button.mengen-pad-text { padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; font-style: italic; text-align: left; cursor: pointer; }
.mengen-pad-textknopf.aktiv { color: var(--color-primary); }
.mengen-pad-textfeld { width: 100%; }
.mengen-pad-hinweis { color: var(--warning); font-weight: 600; }
.mengen-pad-fehler { color: var(--critical); font-weight: 600; }
.mengen-pad-sperre { padding: 0.8rem; border-radius: var(--radius-main); background: var(--surface-strong); color: var(--text-secondary); text-align: center; }
.mengen-pad-anzeige { display: grid; grid-template-columns: 3.2rem 1fr 3.2rem; align-items: center; gap: 0.5rem; position: relative; }
.mengen-pad-zahl { display: block; padding: 0.35rem 0.5rem; border-radius: 0.8rem; background: var(--surface-strong); font-size: 2.1rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; min-height: 3.4rem; line-height: 2.7rem; }
.mengen-pad-zahl.ersetzen { color: var(--color-primary); }
.mengen-pad-einheit { position: absolute; left: 50%; bottom: -0.15rem; transform: translateX(-50%); font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
.mengen-pad-schritt { height: 3.2rem; border-radius: 50%; border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-primary); font-size: 1.1rem; cursor: pointer; }
.mengen-pad-tasten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.mengen-pad-taste { min-height: 3.2rem; border: 0; border-radius: 0.8rem; background: var(--surface-strong); color: var(--text-primary); font: inherit; font-size: 1.4rem; font-weight: 600; cursor: pointer;
  touch-action: manipulation; }
.mengen-pad-taste:active, .mengen-pad-schritt:active { background: color-mix(in srgb, var(--color-primary) 22%, var(--surface-strong)); }
.mengen-pad-taste:disabled { opacity: 0.35; }
.mengen-pad-taste-neben { background: color-mix(in srgb, var(--text-secondary) 14%, var(--surface)); font-size: 1.1rem; }
.mengen-pad-null { grid-column: span 2; }
.mengen-pad-null:last-child { grid-column: span 4; }
.mengen-pad-schnell { grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--surface)); color: var(--color-primary); }
.mengen-pad-schnell small { font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); }
.mengen-pad-fuss { display: flex; gap: 0.45rem; }
.mengen-pad-fuss .btn { min-height: 48px; justify-content: center; flex: 1 1 0; }
.mengen-pad-fuss .mengen-pad-weiter { flex: 2 1 0; }
.mengen-pad-fuss .mengen-pad-vorher { flex: 0 0 3.2rem; }
/* Niedrige Bildschirme (kleine Handys): flacheres Pad, damit über ihm die Zeile Platz hat. */
@media (max-height: 780px) {
  .mengen-pad { gap: 0.4rem; padding-top: 0.6rem; }
  .mengen-pad-taste { min-height: 2.75rem; }
  .mengen-pad-zahl { font-size: 1.8rem; min-height: 2.9rem; line-height: 2.2rem; }
  .mengen-pad-anzeige { grid-template-columns: 2.9rem 1fr 2.9rem; }
  .mengen-pad-schritt { height: 2.9rem; }
  .mengen-pad-fuss .btn { min-height: 44px; }
}

/* ------------------------------------------------------------------ Artikelstammdaten (seit 16.10.2026)
   Links die Artikel, rechts der gewählte: Kopf mit Bild und Kennzeichen, Reiter, Gruppen als Karten im Raster
   (schmale Karten nebeneinander, lange Texte über die ganze Breite), Felder im 12er-Raster der Karte. */
.artikelstamm { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.artikelstamm-liste { min-width: 0; }
.artikelstamm-liste .card-header { margin-bottom: 0.4rem; }
.artikelstamm-filter { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.artikelstamm-treffer { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -0.4rem; padding: 0 0.4rem; }
.artikelstamm-eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: baseline;
  height: 52px; padding: 0.4rem 0.55rem; border-radius: 0.55rem; color: var(--text-primary); text-decoration: none; box-sizing: border-box; }
.artikelstamm-eintrag:hover { background: var(--hover); }
.artikelstamm-eintrag.aktiv { background: color-mix(in srgb, var(--color-primary) 16%, transparent); box-shadow: inset 3px 0 0 var(--color-primary); }
.artikelstamm-eintrag-nr { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--text-secondary); grid-row: span 2; align-self: center; min-width: 3.4rem; }
.artikelstamm-eintrag-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artikelstamm-eintrag-wg { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.artikelstamm-detail { min-width: 0; display: flex; flex-direction: column; }
.artikelstamm-leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; min-height: 16rem;
  color: var(--text-secondary); text-align: center; }
.artikelstamm-leer > i { font-size: 2.6rem; opacity: 0.35; }
.artikelstamm-zurueck { display: none; }
.artikelstamm-kopf { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding-bottom: 0.7rem; }
.artikelstamm-bild { width: 4.4rem; height: 4.4rem; flex: 0 0 auto; border-radius: 0.8rem; overflow: hidden; background: var(--surface-strong); }
.artikelstamm-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artikelstamm-bild .artikel-platzhalter i { font-size: 1.4rem; }
.artikelstamm-bild .artikel-platzhalter-kuerzel { font-size: 0.8rem; }
.artikelstamm-titel { flex: 1 1 18rem; min-width: 0; }
.artikelstamm-titel h2 { margin: 0.05rem 0 0.35rem; font-size: 1.35rem; line-height: 1.25; overflow-wrap: anywhere; }
.artikelstamm-nr { font-size: 0.82rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.artikelstamm-marken { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.artikelstamm-marke { display: inline-flex; align-items: center; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: var(--surface-strong); color: var(--text-secondary); border: 1px solid var(--border-soft); }
.artikelstamm-marke-an { color: var(--ok-text); border-color: color-mix(in srgb, var(--ok-text) 35%, transparent); background: color-mix(in srgb, var(--ok-text) 10%, transparent); }
.artikelstamm-marke-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.artikelstamm-marke-aus { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad-text) 40%, transparent); background: color-mix(in srgb, var(--bad-text) 10%, transparent); }
.artikelstamm-eintrag-wg .artikelstamm-marke { padding: 0 0.4rem; font-size: 0.7rem; margin-left: 0.25rem; }
.artikelstamm-aktionen { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.artikelstamm-grund { font-size: 0.78rem; color: var(--text-secondary); max-width: 16rem; }
.artikelstamm-leere { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.artikelstamm-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--color-primary); color: var(--surface); margin-left: 0.3rem; }
.btn-primary .artikelstamm-zahl { background: color-mix(in srgb, var(--surface) 30%, transparent); color: inherit; }
.artikelstamm-reiter { flex: 0 0 auto; }
.artikelstamm-reiter > button i { opacity: 0.75; margin-right: 0.2rem; }
.artikelstamm-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.85rem 0.15rem 0.3rem; }
.artikelstamm-bearbeiten-hinweis { margin-bottom: 0.7rem; }
.artikelstamm-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.8rem; align-items: start; }

/* Gruppe einer Stammdaten-Maske (Components/Stammmaske/MaskenGruppeKarte.razor). */
.maske-gruppe { container-type: inline-size; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface-faint);
  padding: 0.75rem 0.9rem 0.85rem; min-width: 0; }
.maske-gruppe-breit { grid-column: 1 / -1; }
.maske-gruppe-titel { margin: 0 0 0.6rem; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.maske-gruppe-titel i { color: var(--color-primary); margin-right: 0.3rem; }
.maske-felder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.55rem 0.8rem; }
.maske-feld { grid-column: span var(--spalten, 4); min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
@container (max-width: 26rem) { .maske-feld { grid-column: span 12; } .maske-feld-janein, .maske-feld-zahl, .maske-feld-ganzzahl { grid-column: span 6; } }
@container (max-width: 17rem) { .maske-feld-janein, .maske-feld-zahl, .maske-feld-ganzzahl { grid-column: span 12; } }
.maske-label { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }
.maske-wert { font-size: 0.95rem; color: var(--text-primary); overflow-wrap: anywhere; min-height: 1.4rem; }
.maske-feld-mehrzeilig .maske-wert { white-space: pre-wrap; line-height: 1.45; max-height: 16rem; overflow-y: auto; }
.maske-wert-leer { color: var(--icon-muted); }
.maske-schalter-wert { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; min-height: 1.6rem; }
.maske-schalter-wert.an i { color: var(--ok-text); }
.maske-schalter-wert.aus { color: var(--text-secondary); }
.maske-schalter-wert.aus i { color: var(--icon-muted); }
.maske-schalter { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; min-height: 1.9rem; }
.maske-schalter input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.maske-feld .form-input { width: 100%; box-sizing: border-box; }
.maske-feld-zahl, .maske-feld-ganzzahl { position: relative; }
.maske-feld-zahl .form-input, .maske-feld-ganzzahl .form-input { text-align: right; font-variant-numeric: tabular-nums; }
.maske-einheit { position: absolute; right: 0.6rem; bottom: 0.55rem; font-size: 0.78rem; color: var(--text-secondary); pointer-events: none; }
.maske-feld-zahl .form-input:has(+ .maske-einheit), .maske-feld-ganzzahl .form-input:has(+ .maske-einheit) { padding-right: 2.6rem; }
.maske-hinweis { font-size: 0.74rem; color: var(--text-secondary); }
.maske-schloss { font-size: 0.7rem; color: var(--icon-muted); }
.maske-fehler { color: var(--error-text); }
.maske-feld-geaendert .form-input, .maske-feld-geaendert .maske-schalter { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 45%, transparent); border-radius: 0.5rem; }
.maske-feld-geaendert .maske-label, .maske-feld-geaendert .maske-schalter span { color: var(--color-primary); }
.maske-feld-konflikt .form-input, .maske-feld-konflikt .maske-schalter { box-shadow: 0 0 0 2px var(--error-strong); }
.maske-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Handy und Tablet: entweder die Liste oder der Artikel (Tablet quer wie der PC); die Seite scrollt, keine Rest-Höhe. */
html:not([data-geraet="desktop"]) .artikelstamm-treffer, html:not([data-geraet="desktop"]) .artikelstamm-inhalt { overflow: visible; }
html[data-geraet="handy"] .artikelstamm, html[data-geraet="tablet"] .artikelstamm { grid-template-columns: minmax(0, 1fr); }
/* Tablet quer: Liste und Artikel nebeneinander - die Liste scrollt in sich, der Artikel bleibt beim Antippen weit unten im Bild. */
@media (min-width: 1100px) {
  html[data-geraet="tablet"] .artikelstamm { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  html[data-geraet="tablet"] .artikelstamm-liste { position: sticky; top: 0.5rem; }
  html[data-geraet="tablet"] .artikelstamm .artikelstamm-treffer { overflow-y: auto; max-height: calc(100dvh - 15rem); }
}
@media (max-width: 1099px) {
  html:not([data-geraet="desktop"]) .artikelstamm-mit-wahl .artikelstamm-liste,
  html:not([data-geraet="desktop"]) .artikelstamm-ohne-wahl .artikelstamm-detail { display: none; }
  html:not([data-geraet="desktop"]) .artikelstamm-zurueck { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 100%; justify-content: flex-start; padding-left: 0; }
}
html:not([data-geraet="desktop"]) .artikelstamm-eintrag { min-height: 52px; }
html:not([data-geraet="desktop"]) .artikelstamm-aktionen .btn { min-height: 44px; }
html[data-geraet="handy"] .artikelstamm-aktionen { margin-left: 0; width: 100%; }
html[data-geraet="handy"] .artikelstamm-aktionen .btn { flex: 1 1 auto; }
html:not([data-geraet="desktop"]) .artikelstamm-reiter > button { min-height: 44px; }
html[data-geraet="handy"] .artikelstamm-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html[data-geraet="handy"] .artikelstamm-reiter > button { flex: 0 0 auto; }
html[data-geraet="handy"] .artikelstamm-titel { flex: 1 1 0; }
html[data-geraet="handy"] .artikelstamm-kopf { gap: 0.4rem 0.75rem; }
html:not([data-geraet="desktop"]) .artikelstamm-zurueck { border: 0; background: none; min-height: 40px; }
html[data-geraet="handy"] .artikelstamm-reiter-name { display: none; }

/* ------------------------------------------------------------------ Lieferanten und Lieferantenartikel (seit 24.10.2026)
   Aufbau und Klassen der Artikelstammdaten; dazu Links im Kopf (E-Mail, Internet, Lieferant, Artikel) und Tabellen im Reiter
   „Einheiten und Preise“ als breite Gruppen. */
.lieferantenstamm-link { text-decoration: none; color: var(--color-primary); }
.lieferantenstamm-link:hover { background: var(--hover); }
.lieferantenstamm-lieferant { color: inherit; }
.lieferantenstamm-zusatz { display: block; font-size: 0.78rem; color: var(--text-secondary); }
.lieferantenstamm-anzahl { background: var(--surface-strong); color: var(--text-secondary); }
.lieferantenstamm .artikelstamm-gruppen + .lieferantenstamm-tabelle, .lieferantenstamm-tabelle + .lieferantenstamm-tabelle { margin-top: 0.8rem; }
.lieferantenstamm-tabelle .widget-tabelle-wrap { overflow-x: auto; }
.lieferantenstamm-tabelle .card-empty { margin: 0; }
.lieferantenstamm-tabelle > .maske-hinweis { display: block; margin-top: 0.5rem; }
.lieferantenstamm-we td { font-weight: 600; }
html:not([data-geraet="desktop"]) :is(.lieferantenstamm-link, .lieferantenstamm-lieferant, .lieferantenstamm-artikel td a) { min-height: 44px; display: inline-flex; align-items: center; }
html[data-geraet="handy"] .lieferantenstamm-tabelle .widget-tabelle-wrap { overflow-x: visible; }
/* Seit 25.10.2026 ohne Liste: Kopfkarte mit Suchzeile(n), Titel und Reitern als Leiste in der Themefarbe (froster-reiter wie in der
   Lieferaufteilung), darunter der Inhalt des Reiters. */
.lst-seite { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.lst-suchzeile { display: grid; grid-template-columns: 11rem minmax(0, 34rem); align-items: center; gap: 0.6rem; }
.lst-suchzeile + .lst-suchzeile { margin-top: 0.5rem; }
.lst-suchlabel { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.lst-suchlabel i { color: var(--color-primary); margin-right: 0.3rem; }
.lst-suchzeile .sd-eingabe { width: 100%; }
.lst-titelzeile { padding: 0.9rem 0 0.2rem; }
.lst-kopf .froster-reiter { margin-top: 0.5rem; flex: 1 1 100%; width: 100%; }
/* Reiter „Lieferantenartikel“ ganz rechts (seit 25.10.2026); Aktionen in Reitern ohne Felder nur unsichtbar, damit der Kopf gleich hoch bleibt. */
.lst-kopf .froster-reiter > button[data-reiter="artikel"] { margin-left: auto; }
.lst-aktionen-aus { visibility: hidden; }
.lst-inhalt { min-width: 0; }
.such-auswahl-zusatz { color: var(--text-secondary); }
html[data-geraet="handy"] .lst-suchzeile { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
html[data-geraet="handy"] .froster-reiter.lst-reiter { flex-wrap: wrap; overflow-x: visible; }
html[data-geraet="handy"] .froster-reiter.lst-reiter > button { flex: 1 1 auto; justify-content: center; }
/* Firmenparameter (seit 01.11.2026): Auswahl des Firmensatzes bei mehreren Mandanten als Knopfleiste, aktiv in der Themefarbe. */
.fp-firmen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem; flex: 1 1 100%; width: 100%; }
.fp-symbol { color: var(--color-primary); margin-right: 0.35rem; }
.fp-seite .lst-titelzeile { flex: 1 1 100%; width: 100%; padding-top: 0.2rem; }
.fp-firma { border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface); color: var(--text-primary);
    padding: 0.3rem 0.8rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.fp-firma:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary) 10%, var(--surface)); }
.fp-firma.aktiv { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }
.fp-firma:disabled:not(.aktiv) { opacity: 0.55; cursor: not-allowed; }
.fp-firma:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
html[data-touch] .fp-firma { min-height: 44px; }
html[data-geraet="handy"] .fp-firmen > .lst-suchlabel { flex: 1 1 100%; }
html[data-geraet="handy"] .fp-firma { flex: 1 1 auto; }

/* Prüfmerkmale je Lieferant und Lieferantenartikel (seit 25.10.2026, Components/Warenwirtschaft/QmEinstellungenAnsicht.razor). */
.qme-hinweis { display: block; margin: -0.2rem 0 0.6rem; }
.qme-recht { display: block; margin-top: 0.25rem; }
.qme-tabelle td { vertical-align: middle; }
.qme-tabelle select.form-input { min-width: 8.5rem; }
.qme-standard { display: block; font-size: 0.76rem; color: var(--text-secondary); }
.qme-aus td:first-child strong { color: var(--text-secondary); font-weight: 500; }
.qme-grenzen { display: inline-flex; align-items: center; gap: 0.35rem; }
.qme-grenzen .form-input { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.qme-einheit { font-size: 0.8rem; color: var(--text-secondary); }
.qme-grenzen .form-input::placeholder { color: var(--icon-muted); font-style: italic; opacity: 1; }
.qme-schalter { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.qme-schalter input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.qme-aktionen { margin-top: 0.7rem; justify-content: flex-end; }
html:not([data-geraet="desktop"]) .qme-schalter { min-height: 44px; }
html[data-geraet="handy"] .qme-tabelle select.form-input { min-width: 0; width: 100%; }
html[data-geraet="handy"] .qme-grenzen { flex-wrap: wrap; }

/* Merkmale je Artikel in der Wareneingangskontrolle (seit 25.10.2026): Überschrift je Artikel. */
.wek-artikel { margin-top: 0.7rem; padding: 0.35rem 0.6rem; border-radius: var(--radius-main); font-weight: 600; font-size: 0.88rem;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--text-primary); }
.wek-artikel i { color: var(--color-primary); margin-right: 0.35rem; }
.wek-artikel span { font-weight: 500; color: var(--text-secondary); margin-left: 0.3rem; }
html[data-geraet="handy"] .artikelstamm-reiter > button.aktiv .artikelstamm-reiter-name { display: inline; }
html:not([data-geraet="desktop"]) .maske-schalter { min-height: 44px; }
html:not([data-geraet="desktop"]) .maske-schalter input { width: 1.4rem; height: 1.4rem; }
html[data-geraet="handy"] .artikelstamm-bild { width: 3.4rem; height: 3.4rem; }
html[data-geraet="handy"] .artikelstamm-titel h2 { font-size: 1.15rem; }
/* Reiter „Preise“ der Artikelseite (seit 16.10.2026): Bereiche links, Inhalt rechts. Farben der Herkunft über --farbe. */
.preise-rahmen { container-type: inline-size; }
.preise { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.preise-bereiche { display: flex; flex-direction: column; gap: 0.1rem; position: sticky; top: 0; }
.preise-bereiche-gruppe { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); margin: 0.8rem 0.6rem 0.25rem; }
.preise-bereiche-gruppe:first-child { margin-top: 0; }
.preise-bereiche a { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.42rem 0.6rem; border-radius: 0.55rem;
  color: var(--text-primary); text-decoration: none; font-size: 0.88rem; }
.preise-bereiche a i { width: 1.1rem; color: var(--text-secondary); margin-right: 0.2rem; text-align: center; }
.preise-bereiche a:hover { background: var(--hover); }
.preise-bereiche a.aktiv { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-primary); }
.preise-bereiche a.aktiv i { color: var(--color-primary); }
.preise-bereiche small { background: var(--surface-strong); color: var(--text-secondary); border-radius: 999px; padding: 0 0.45rem; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.preise-bereiche small.gut { background: color-mix(in srgb, var(--ok-text) 14%, transparent); color: var(--ok-text); }
.preise-inhalt { min-width: 0; }
.preise-bereich { display: flex; flex-direction: column; gap: 0.75rem; }
.preise-kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem 1rem; flex-wrap: wrap; }
.preise-kopfzeile h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.preise-unterzeile { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.preise-suche { max-width: 16rem; }
.preise-kennzahlen { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.preise-kennzahl { border: 1px solid var(--border-soft); border-radius: 0.6rem; padding: 0.3rem 0.75rem; background: var(--surface-faint); display: flex; flex-direction: column; }
.preise-kennzahl small { font-size: 0.72rem; color: var(--text-secondary); }
.preise-kennzahl b { font-variant-numeric: tabular-nums; }
.preise-klein { font-size: 0.78rem; color: var(--text-secondary); font-weight: 400; margin: 0; }
.preise-hinweis { margin: 0; font-size: 0.85rem; color: var(--text-secondary); display: flex; gap: 0.45rem; align-items: baseline; }
.preise-hinweis i { color: var(--color-primary); }
.preise-hinweis-warn i { color: var(--warning); }
.preise-maske { margin-top: 0.25rem; }
.preise-maske-gewicht { margin: 0 0 0.75rem; }

.preise-stand { border: 1px solid var(--border-soft); border-radius: var(--radius-main); padding: 0.75rem 0.9rem; background: var(--surface); }
.preise-stand-aktuell { border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); }
.preise-stand-geplant { border-style: dashed; background: var(--surface-faint); }
.preise-stand-kopf { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.55rem; }
/* VK 1–6 immer (seit 18.10.2026) - sechs, drei oder zwei je Zeile nach Breite der Karte, nie 4 + 2. */
.preise-stand { container-type: inline-size; }
.preise-ebenen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
@container (min-width: 46rem) { .preise-ebenen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (max-width: 22rem) { .preise-ebenen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preise-ebene { display: block; border: 1px solid transparent; border-radius: 0.6rem; background: var(--surface-strong); padding: 0.45rem 0.6rem;
  min-width: 0; color: var(--text-primary); }
/* Ohne Preis (seit 18.10.2026 immer VK 1–6): 0,00 € gedämpft, gestrichelt umrandet - hier kann noch etwas eingetragen werden. */
.preise-ebene.leer { background: transparent; border: 1px dashed color-mix(in srgb, var(--text-secondary) 50%, transparent); }
.preise-ebene.leer .preise-ebene-preis { color: var(--text-secondary); font-weight: 600; }
.preise-ebene-leer { display: flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--text-secondary); }
/* Mit dem Recht „Artikelpreise ändern“ ist jede Kachel ein Knopf ins Formular (Cursor im Feld dieser Preisgruppe). */
.preise-ebene-knopf { font: inherit; text-align: left; width: 100%; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.preise-ebene-knopf.leer .preise-ebene-leer { color: var(--color-primary); font-weight: 600; }
.preise-ebene-knopf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) {
  .preise-ebene-knopf:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); background: color-mix(in srgb, var(--color-primary) 8%, var(--surface-strong)); }
  .preise-ebene-knopf.leer:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
}
.preise-ebene-knopf:active { background: color-mix(in srgb, var(--color-primary) 12%, var(--surface-strong)); }
.preise-ebene-titel { display: flex; justify-content: space-between; gap: 0.3rem; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
.preise-ebene-preis { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.1rem; white-space: nowrap; }
.preise-ebene-angebot { display: block; font-size: 0.78rem; color: var(--ok-text); }
/* Änderung zum Stand davor als Betrag (seit 18.10.2026), „neu“ wenn vorher nichts hinterlegt war; der alte Preis steht am PC
   im Tooltip, auf Touch-Geräten (kein Tooltip) als Zeile darunter. */
.preise-aenderung { display: block; font-size: 0.74rem; font-variant-numeric: tabular-nums; cursor: help; }
.preise-aenderung.hoch { color: var(--bad-text); }
.preise-aenderung.runter { color: var(--ok-text); }
.preise-aenderung.neu { color: var(--color-primary); font-weight: 600; }
.preise-aenderung.entfaellt { color: var(--text-secondary); font-weight: 600; }
.preise-aenderung-vorher { display: none; color: var(--text-secondary); font-weight: 400; }
html[data-touch] .preise-aenderung-vorher { display: block; }
/* VK ohne Preis in Tabellen (Historie, Gewichtspreise): 0,00 € gedämpft. */
.preise-null { color: var(--text-secondary); }
.preise-auf { border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface); }
.preise-stand .preise-auf { margin-top: 0.6rem; background: transparent; }
.preise-auf > summary { cursor: pointer; padding: 0.55rem 0.8rem; font-weight: 600; font-size: 0.88rem; display: flex; gap: 0.5rem; align-items: baseline; }
.preise-auf > div { padding: 0 0.8rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }

.preise-status { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.08rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.preise-status-laeuft { background: color-mix(in srgb, var(--ok-text) 14%, transparent); color: var(--ok-text); }
.preise-status-geplant { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.preise-status-vorbei { background: var(--surface-strong); color: var(--text-secondary); }

.preise-tabelle-wrap { overflow-x: auto; }
.preise-tabelle { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.preise-tabelle th { text-align: left; font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.preise-tabelle td { padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.preise-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preise-tabelle tbody tr:hover { background: var(--row-hover); }
.preise-tabelle td .artikelstamm-marke { margin-left: 0.3rem; padding: 0 0.45rem; font-size: 0.7rem; }
.preise-zeile-aktuell td { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.preise-zeile-gedimmt td { color: var(--text-secondary); }
.preise-unterzeile-zeile td { background: var(--surface-faint); }
.preise-historie { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; font-size: 0.82rem; }
.preise-historie li { display: inline-flex; gap: 0.4rem; align-items: baseline; }
.preise-historie li.aktuell { color: var(--color-primary); }
.preise-historie li.geplant > span:first-child { color: var(--color-primary); font-style: italic; }
.preise-aufklappen { padding: 0.15rem 0.5rem; font-size: 0.8rem; white-space: nowrap; }

.preise-filter { display: flex; gap: 0.6rem 1rem; flex-wrap: wrap; align-items: flex-end; }
.preise-feld { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; min-width: 0; }
.preise-feld .form-input { font-weight: 400; }
.preise-feld-menge .form-input { width: 8rem; }
.preise-kundenwahl { flex: 1 1 18rem; max-width: 30rem; }
.preise-schalter { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-primary); font-weight: 400; cursor: pointer; min-height: 2.2rem; }
.preise-schalter input { accent-color: var(--color-primary); width: 1rem; height: 1rem; }
.preise-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.preise-chip { border: 1px solid var(--border-soft); border-radius: 999px; padding: 0.22rem 0.7rem; font: inherit; font-size: 0.82rem; background: var(--surface);
  color: var(--text-primary); cursor: pointer; display: inline-flex; gap: 0.35rem; align-items: center; }
.preise-chip small { color: var(--text-secondary); font-weight: 600; }
.preise-chip:hover:not(:disabled) { background: var(--hover); }
.preise-chip.aktiv { background: color-mix(in srgb, var(--color-primary) 14%, transparent); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); color: var(--color-primary); font-weight: 600; }
.preise-chip.aktiv small { color: inherit; }
.preise-chip:disabled { opacity: 0.5; cursor: default; }
.preise-chip.aus { text-decoration: line-through; }
.preise-tage { display: inline-flex; gap: 0.18rem; flex-wrap: wrap; }
.preise-tage span { font-size: 0.68rem; padding: 0.02rem 0.3rem; border-radius: 0.35rem; background: color-mix(in srgb, var(--ok-text) 13%, transparent); color: var(--ok-text); font-weight: 600; white-space: nowrap; }
.preise-tage span.aus { background: var(--surface-strong); color: var(--icon-muted); text-decoration: line-through; }
.preise-tage-alle { font-size: 0.8rem; color: var(--text-secondary); }

.preise-farbe-preisgruppe, .preise-farbe-stufe1, .preise-art-artikel, .preise-balken-artikel { --farbe: var(--color-primary); }
.preise-farbe-stufe2 { --farbe: color-mix(in srgb, var(--color-primary) 78%, var(--text-secondary)); }
.preise-farbe-stufe3 { --farbe: color-mix(in srgb, var(--color-primary) 58%, var(--text-secondary)); }
.preise-farbe-stufe4 { --farbe: color-mix(in srgb, var(--color-primary) 42%, var(--text-secondary)); }
.preise-farbe-stufe5 { --farbe: color-mix(in srgb, var(--color-primary) 28%, var(--text-secondary)); }
.preise-farbe-stufe6 { --farbe: color-mix(in srgb, var(--color-primary) 16%, var(--text-secondary)); }
.preise-farbe-sortiment { --farbe: color-mix(in srgb, var(--color-primary) 45%, var(--ok-text)); }
.preise-farbe-kundenpreis, .preise-art-kunde, .preise-balken-kunde { --farbe: var(--ok-text); }
.preise-farbe-angebot, .preise-art-kundengruppe, .preise-balken-kundengruppe { --farbe: var(--warning); }
.preise-farbe-ohnepreis, .preise-art-kw, .preise-balken-kw { --farbe: var(--bad-text); }
.preise-farbe-wawi { --farbe: color-mix(in srgb, var(--warning) 55%, var(--ok-text)); }
.preise-art { font-size: 0.78rem; font-weight: 600; color: var(--farbe); }

.preise-zeitachse { border: 1px solid var(--border-soft); border-radius: var(--radius-main); padding: 0.35rem 0.75rem 0.6rem; background: var(--surface); }
.preise-zeitachse-monate { position: relative; height: 1.25rem; margin-left: 9.5rem; font-size: 0.7rem; color: var(--text-secondary); }
.preise-zeitachse-monate span { position: absolute; top: 0; height: 100%; padding-left: 0.25rem; border-left: 1px dashed var(--border-soft); }
.preise-spur { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem; align-items: center; min-height: 1.8rem; }
.preise-spur-name { font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preise-spur-bahn { position: relative; height: 1.4rem; background: var(--surface-faint); border-radius: 0.4rem; }
.preise-heute { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; background: var(--bad-text); z-index: 1; }
.preise-balken { position: absolute; top: 0; height: 100%; border-radius: 0.4rem; background: color-mix(in srgb, var(--farbe) 30%, transparent);
  border-left: 3px solid var(--farbe); color: var(--text-primary); font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.35rem; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.preise-balken.vorbei { opacity: 0.5; }

.preise-verteilung { display: flex; gap: 2px; height: 1.9rem; border-radius: 0.55rem; overflow: hidden; }
.preise-verteilung > div { display: grid; place-items: center; background: color-mix(in srgb, var(--farbe) 45%, transparent); font-size: 0.72rem; font-weight: 700;
  color: var(--text-primary); min-width: 3px; overflow: hidden; white-space: nowrap; }
.preise-legende { display: flex; gap: 0.3rem 1rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-secondary); }
.preise-legende i { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 0.2rem; margin-right: 0.3rem; background: var(--farbe); vertical-align: -0.05rem; }
.preise-karte { border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface); overflow: hidden; }
.preise-karte > summary { display: grid; grid-template-columns: 0.9rem 6.8rem minmax(0, 1fr) 5rem; gap: 0.7rem; align-items: center; padding: 0.6rem 0.85rem; cursor: pointer; list-style: none; }
.preise-karte > summary::-webkit-details-marker { display: none; }
.preise-karte > summary:hover { background: var(--hover); }
.preise-karte-farbe { width: 0.85rem; height: 0.85rem; border-radius: 0.25rem; background: var(--farbe); }
.preise-karte-betrag { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preise-karte-text { display: flex; flex-direction: column; min-width: 0; }
.preise-karte-text small { color: var(--text-secondary); font-size: 0.76rem; }
.preise-karte-anzahl { text-align: right; font-weight: 700; display: flex; flex-direction: column; }
.preise-karte-anzahl small { font-weight: 400; color: var(--text-secondary); font-size: 0.72rem; }
.preise-karte-suche { padding: 0 0.85rem 0.5rem; }
.preise-kunden { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem; padding: 0 0.85rem 0.85rem; }
.preise-kunde { border: 1px solid var(--border-soft); border-radius: 0.55rem; padding: 0.35rem 0.55rem; font: inherit; font-size: 0.82rem; display: flex; justify-content: space-between;
  gap: 0.5rem; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; min-width: 0; }
.preise-kunde:hover { background: var(--hover); }
.preise-kunde span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preise-kunde small { color: var(--text-secondary); white-space: nowrap; }
.preise-kunde-mehr { grid-column: 1 / -1; justify-self: start; }

.preise-ergebnis { display: flex; gap: 0.8rem 1.4rem; align-items: center; flex-wrap: wrap; border-radius: var(--radius-main); padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.preise-ergebnis.angebot { border-color: color-mix(in srgb, var(--ok-text) 40%, transparent); background: color-mix(in srgb, var(--ok-text) 8%, transparent); }
.preise-ergebnis.ohne { border-color: color-mix(in srgb, var(--bad-text) 40%, transparent); background: color-mix(in srgb, var(--bad-text) 7%, transparent); }
.preise-ergebnis-preis { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.preise-ergebnis-quelle { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.preise-ergebnis-rabatt { text-align: right; }
.preise-ergebnis-rabatt b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.preise-weg { list-style: none; margin: 0; padding: 0; }
.preise-weg li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) 6rem 6rem; gap: 0.5rem; align-items: center; padding: 0.45rem 0.55rem; border-radius: 0.55rem; font-size: 0.88rem; }
.preise-weg li + li { border-top: 1px dashed var(--border-soft); }
.preise-weg .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.preise-weg li.preise-weg-kopf { font-size: 0.74rem; color: var(--text-secondary); padding-bottom: 0.2rem; }
.preise-weg li.preise-weg-trenner { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
  padding: 0.8rem 0.55rem 0.2rem; border-top: 0; }
.preise-weg li.preise-weg-trenner + li { border-top: 0; }
.preise-weg li.gilt { background: color-mix(in srgb, var(--ok-text) 10%, transparent); outline: 1px solid color-mix(in srgb, var(--ok-text) 35%, transparent); }
.preise-weg li.anders { box-shadow: inset 3px 0 0 var(--warning); }
.preise-weg-text small { display: block; color: var(--text-secondary); font-size: 0.76rem; }
.preise-weg-symbol { width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; }
.preise-weg-ja { background: color-mix(in srgb, var(--ok-text) 15%, transparent); color: var(--ok-text); }
.preise-weg-nein { background: var(--surface-strong); color: var(--icon-muted); }
.preise-weg-gewaehlt { background: color-mix(in srgb, var(--ok-text) 30%, transparent); color: var(--ok-text); box-shadow: 0 0 0 2px var(--ok-text); }
.preise-weg-info { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.preise-weg-warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
/* Schmaler Inhalt (Artikel neben der Liste): Bereiche als Chips über dem Inhalt statt einer Spalte links. */
@container (max-width: 50rem) {
  .preise { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .preise-bereiche { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
  .preise-bereiche-gruppe { display: none; }
  .preise-bereiche a { border: 1px solid var(--border-soft); padding: 0.28rem 0.65rem; }
  .preise-bereiche a.aktiv { box-shadow: none; border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
}
/* Preise bearbeiten (seit 16.10.2026): Knöpfe in den Bereichen, Panel mit Formular und Rückfrage. */
.preise-neu { white-space: nowrap; }
.preise-aendern { margin-left: auto; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.preise-stift { color: var(--text-secondary); }
.preise-stift:hover { color: var(--color-primary); }
.preise-zeile-knoepfe { white-space: nowrap; text-align: right; }
.preise-historie .preise-stift { padding: 0 0.2rem; font-size: 0.75rem; }
.preise-schreibgrund { margin-bottom: 0.6rem; }
.preise-formular { gap: 0.5rem; }
.preise-formular .form-label { margin-top: 0.4rem; }
.preise-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.form-input.preise-zahl-fehler, :root[data-grundton="light"] .form-input.preise-zahl-fehler { border-color: var(--error-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--error-strong) 35%, transparent); }
.preise-stufenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.4rem; align-items: end; }
.preise-stufenraster-titel { grid-column: 1 / -1; font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); margin-top: 0.3rem; }
.preise-felder-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem 0.8rem; }
.preise-staffel-zeile { border: 1px solid var(--border-soft); border-radius: 0.6rem; padding: 0.4rem 0.6rem 0.6rem; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.preise-staffel-zeile legend { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); padding: 0 0.3rem; }
.preise-tageswerte { display: flex; flex-direction: column; gap: 0.3rem; }
.preise-tageswert { display: grid; grid-template-columns: 6.5rem repeat(3, minmax(0, 1fr)); gap: 0.4rem; align-items: center; font-size: 0.85rem; }
.preise-fehler { list-style: none; margin: 0.5rem 0 0; padding: 0.5rem 0.7rem; border-radius: 0.6rem; color: var(--error-text);
  background: color-mix(in srgb, var(--error-strong) 10%, transparent); display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.86rem; }
.preise-rueckfrage h4 { margin: 0; font-size: 0.98rem; display: flex; gap: 0.45rem; align-items: baseline; color: var(--warning); }
.preise-rueckfrage p { margin: 0; font-size: 0.88rem; }
.preise-rueckfrage-liste { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; }
.preise-rueckfrage-kunden { flex-direction: column; gap: 0.2rem; }
.preise-anders { display: inline-block; margin-left: 0.4rem; font-size: 0.68rem; font-weight: 700; padding: 0.02rem 0.45rem; border-radius: 999px; color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent); vertical-align: 0.05rem; white-space: nowrap; }
/* Erweiterte Staffelpreise (seit 16.10.2026): Quellen, Ziele mit Ständen, Tage mit eigener Staffel, Formularzeilen. */
.preise-chip-punkt { font-size: 0.5rem; color: var(--ok-text); }
.preise-chip.aus .preise-chip-punkt, .preise-erw-legende .fa-regular { color: var(--text-secondary); }
.preise-chip-vorbei:not(.aktiv) { color: var(--text-secondary); }
.preise-erw-legende { display: flex; gap: 0.2rem 1rem; flex-wrap: wrap; align-items: baseline; }
.preise-erw-legende span { display: inline-flex; gap: 0.35rem; align-items: baseline; }
.preise-erw-ziele td .preise-chips { gap: 0.25rem; }
.preise-erw-zeile { display: flex; gap: 0.4rem 0.8rem; align-items: flex-end; flex-wrap: wrap; }
.preise-erw-zeile .preise-feld { flex: 1 1 7rem; }
.preise-erw-entfernen { margin-left: auto; }
.preise-erw-plus { align-self: flex-start; }
.preise-staffel-link { border: 0; border-radius: 999px; margin-left: 0.3rem; padding: 0.02rem 0.5rem; font: inherit; font-size: 0.7rem; font-weight: 600; cursor: pointer;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.preise-staffel-link:hover { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }

/* Preise auf Handy und Tablet: Bereiche als wischbare Chips oben; Handy: Tabellen als Karten, sechs VK in drei Spalten. */
html[data-geraet="handy"] .preise, html[data-geraet="tablet"] .preise { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
html[data-geraet="handy"] .preise-bereiche, html[data-geraet="tablet"] .preise-bereiche { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0.35rem;
  padding-bottom: 0.2rem; scrollbar-width: none; }
html[data-geraet="handy"] .preise-bereiche-gruppe, html[data-geraet="tablet"] .preise-bereiche-gruppe { display: none; }
html[data-geraet="handy"] .preise-bereiche a, html[data-geraet="tablet"] .preise-bereiche a { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border-soft); min-height: 44px; box-sizing: border-box; }
html[data-geraet="handy"] .preise-bereiche a.aktiv, html[data-geraet="tablet"] .preise-bereiche a.aktiv { box-shadow: none; border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
html:not([data-geraet="desktop"]) .preise-chip { min-height: 40px; padding: 0.3rem 0.85rem; }
html:not([data-geraet="desktop"]) .preise-kunde, html:not([data-geraet="desktop"]) .preise-aufklappen { min-height: 44px; }
html:not([data-geraet="desktop"]) .preise-karte > summary { min-height: 52px; }
html[data-geraet="handy"] .preise-kennzahlen { width: 100%; }
html[data-geraet="handy"] .preise-kennzahl { flex: 1 1 8rem; }
html[data-geraet="handy"] .preise-suche { max-width: none; width: 100%; }
html[data-geraet="handy"] .preise-feld, html[data-geraet="handy"] .preise-kundenwahl { flex: 1 1 100%; max-width: none; }
html[data-geraet="handy"] .preise-feld-menge .form-input { width: 100%; }
html[data-geraet="handy"] .preise-karten thead { display: none; }
html[data-geraet="handy"] .preise-karten, html[data-geraet="handy"] .preise-karten tbody { display: block; }
html[data-geraet="handy"] .preise-karten tr { display: block; border: 1px solid var(--border-soft); border-radius: 0.7rem; margin-bottom: 0.5rem; padding: 0.4rem 0.6rem; }
html[data-geraet="handy"] .preise-karten td { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; border: 0; padding: 0.25rem 0.1rem; text-align: right; }
html[data-geraet="handy"] .preise-karten td::before { content: attr(data-l); color: var(--text-secondary); font-size: 0.76rem; text-align: left; }
html[data-geraet="handy"] .preise-karten td:not([data-l]) { justify-content: flex-end; }
html[data-geraet="handy"] .preise-karten td:first-child { font-weight: 600; }
html[data-geraet="handy"] .preise-karten tr.preise-unterzeile-zeile { margin-top: -0.4rem; border-top: 0; border-radius: 0 0 0.7rem 0.7rem; }
html[data-geraet="handy"] .preise-karten tr.preise-unterzeile-zeile td { display: block; text-align: left; }
html[data-geraet="handy"] .preise-zeitachse-monate { margin-left: 5.5rem; }
html[data-geraet="handy"] .preise-spur { grid-template-columns: 5rem minmax(0, 1fr); }
html[data-geraet="handy"] .preise-karte > summary { grid-template-columns: 0.8rem 5.6rem minmax(0, 1fr); }
html[data-geraet="handy"] .preise-karte-anzahl { grid-column: 2 / -1; flex-direction: row; gap: 0.3rem; align-items: baseline; text-align: left; }
html[data-geraet="handy"] .preise-kunden { grid-template-columns: minmax(0, 1fr); }
html[data-geraet="handy"] .preise-weg li { grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; gap: 0.4rem; font-size: 0.84rem; padding: 0.4rem 0.35rem; }
html[data-geraet="handy"] .preise-weg li.preise-weg-kopf { display: none; }
html[data-geraet="handy"] .preise-weg li > .zahl:not(:empty)::before { content: attr(data-l); display: block; font-size: 0.64rem; color: var(--text-secondary); }
html[data-geraet="handy"] .preise-ergebnis-rabatt { text-align: left; }
html:not([data-geraet="desktop"]) .preise-stift, html:not([data-geraet="desktop"]) .preise-aendern { min-width: 44px; min-height: 44px; }
html[data-geraet="handy"] .preise-neu { width: 100%; justify-content: center; }
html[data-geraet="handy"] .preise-tageswert { grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr)); }
html[data-geraet="handy"] .preise-stufenraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html:not([data-geraet="desktop"]) .preise-staffel-link { min-height: 40px; padding: 0.2rem 0.75rem; }
html:not([data-geraet="desktop"]) .preise-erw-entfernen { min-width: 44px; min-height: 44px; }
html[data-geraet="handy"] .preise-erw-ziele td { flex-wrap: wrap; }
html[data-geraet="handy"] .preise-erw-ziele td .preise-chips { justify-content: flex-end; }
html[data-geraet="handy"] .preise-erw-zeile .preise-feld { flex: 1 1 0; min-width: 5.5rem; }
html[data-geraet="handy"] .preise-erw-plus { width: 100%; justify-content: center; min-height: 44px; }

/* ---------------------------------------------------------------------- */
/* Belegdruck und Formulargenerator (seit 16.10.2026)                     */
/* ---------------------------------------------------------------------- */
.belegdruck { display: flex; flex-direction: column; gap: 0.75rem; }
.belegdruck-kopf { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.belegdruck-felder { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.belegdruck-felder .form-label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.belegdruck-kunden { min-width: 16rem; }
.belegdruck-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.belegdruck-aktionen .form-input { width: auto; max-width: 18rem; }
.belegdruck-aktionen .widget-eintrag { padding: 0.2rem 0.4rem; }
.belegdruck-ohne td { color: var(--text-secondary); }
.belegdruck-vorschau-rahmen { position: fixed; inset: 3vh max(3vw, calc((100vw - 240mm) / 2)); z-index: 91; display: flex; }
.belegdruck-vorschau { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Deckend (seit 19.10.2026): mit --surface schien im dunklen Modus die Seite durch die Kopfzeile (auf dem Handy Titel über Titel). */
.belegdruck-vorschau-rahmen > .belegdruck-vorschau { background: var(--popup-bg); }
.belegdruck-rahmen { flex: 1; width: 100%; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--papier); }
/* Vorschau-Popup für Rechnungen (seit 20.10.2026, DruckvorschauPopup): Blättern zwischen Dokumenten, PDF im Rahmen bzw. Ersatz,
   wenn der Browser PDFs nicht einbettet. Der Titel nimmt den Platz, Blättern/Zoom/Schließen stehen rechts. */
.druckvorschau-popup > .card-header { align-items: center; gap: 0.5rem; }
.druckvorschau-popup > .card-header > h2 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.druckvorschau-blaettern { display: inline-flex; align-items: center; gap: 0.15rem; flex: 0 0 auto; }
/* Sprungliste statt „x / n“ (seit 20.10.2026): bei 50 Rechnungen direkt zu einem Kunden. */
.druckvorschau-sprung { width: auto; min-width: 0; max-width: 22rem; padding: 0.3rem 0.5rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.druckvorschau-fehler { margin: 0.25rem 0 0; }
/* Mit Blättern zwei Zeilen auf allen Geräten (seit 20.10.2026): oben Titel und Schließen, darunter Blättern (und auf Handy/Tablet
   der Zoom) – Titel, Sprungliste und Schließen in einer Zeile ließen dem Titel nur einen Streifen bzw. schoben × nach unten. */
.belegdruck-vorschau.druckvorschau-popup > .card-header.verwaltung-kopf:has(.druckvorschau-blaettern) { flex-wrap: wrap; row-gap: 0.15rem; }
.belegdruck-vorschau.druckvorschau-popup > .card-header:has(.druckvorschau-blaettern) > h2 { flex: 1 1 calc(100% - 3.5rem); order: 0; }
.belegdruck-vorschau.druckvorschau-popup > .card-header:has(.druckvorschau-blaettern) > .btn-icon { order: 1; }
.belegdruck-vorschau.druckvorschau-popup > .card-header:has(.druckvorschau-blaettern) > .druckvorschau-blaettern { order: 2; margin-right: auto; }
.belegdruck-vorschau.druckvorschau-popup > .card-header:has(.druckvorschau-blaettern) > .vorschau-zoom { order: 3; }
.druckvorschau-hinweis { margin: 0 0 0.5rem; }
.druckvorschau-laedt { padding: 1rem; }
.druckvorschau-pdf { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--papier); }
.druckvorschau-pdf-ersatz { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 1.5rem 1rem; overflow: auto; }
.druckvorschau-pdf-ersatz p { margin: 0; max-width: 34rem; }
.druckvorschau-pdf-symbol { font-size: 3rem; color: var(--color-primary); }
.druckvorschau-pdf-name { font-weight: 600; overflow-wrap: anywhere; }
.druckvorschau-pdf-ersatz .belegdruck-aktionen { justify-content: center; flex-wrap: wrap; }
/* Sprungliste auf Touch-Geräten 44 px hoch; auf dem Handy nimmt das Blättern den Rest der zweiten Zeile. */
html[data-touch] .druckvorschau-sprung { min-height: 44px; }
html[data-geraet="handy"] .druckvorschau-popup > .card-header > .druckvorschau-blaettern { flex: 1 1 10rem; min-width: 0; }
html[data-geraet="handy"] .druckvorschau-popup .druckvorschau-sprung { flex: 1 1 0; max-width: none; }
/* Handy: Hinweis knapp, damit das Blatt Platz behält; das Popup füllt den Bildschirm ohne runde Ecken (vorher schien oben der
   abgedunkelte Hintergrund durch). */
html[data-geraet="handy"] .druckvorschau-hinweis { font-size: 0.8rem; line-height: 1.3; padding: 0.4rem 0.6rem; gap: 0.45rem; }
html[data-geraet="handy"] .belegdruck-vorschau-rahmen > .card.belegdruck-vorschau { border-radius: 0; }
/* PDF selbst gezeichnet (seit 23.10.2026, js/pdfansicht.js mit PDF.js): ohne PDF-Betrachter im Fenster (Android, Tablets) alle
   Seiten untereinander in einer Scrollfläche; zwei Finger zoomen nur die Fläche (touch-action), nicht die ganze Seite. Oben
   Seitenanzeige, Drucken und Speichern. */
.pdf-ansicht-leiste { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; }
.pdf-ansicht-nr { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pdf-ansicht { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y;
    border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: color-mix(in srgb, var(--papier-leise) 35%, var(--popup-bg)); }
.pdf-ansicht-seiten { padding: 8px; width: max-content; min-width: 100%; box-sizing: border-box; }
.pdf-ansicht-seite { margin: 0 auto 8px; background: var(--papier); box-shadow: 0 1px 4px color-mix(in srgb, var(--papier-text) 30%, transparent); }
.pdf-ansicht-seite:last-child { margin-bottom: 0; }
.pdf-ansicht-seite > canvas { display: block; width: 100%; height: 100%; }
html[data-touch] .pdf-ansicht-leiste .btn { min-height: 44px; }
html[data-geraet="handy"] .pdf-ansicht-leiste .pdf-ansicht-text { display: none; }
html[data-geraet="handy"] .pdf-ansicht-leiste .btn { min-width: 44px; justify-content: center; }
/* Drucken: nur die Seitenbilder (pdfansicht.js legt sie für die Dauer des Drucks an den Rand des body). */
.pdf-druck-blaetter { display: none; }
@media print {
    html.pdf-drucken body > *:not(.pdf-druck-blaetter) { display: none !important; }
    html.pdf-drucken .pdf-druck-blaetter { display: block; }
    html.pdf-drucken body { background: var(--papier); margin: 0; }
    .pdf-druck-blaetter img { display: block; width: 100%; height: auto; break-after: page; }
    .pdf-druck-blaetter img:last-child { break-after: auto; }
}
/* Rechnungsdruck (seit 16.10.2026): zwei Kundenlisten wie Marvins "Einzel-Kunden", darunter die Rechnungen. */
.rechnungsdruck-haken { align-self: center; }
.rechnungslauf-bestaetigen { align-items: flex-start; }
.rechnungslauf-bestaetigen p { margin: 0 0 0.4rem; }
.rechnungslauf-bestaetigen .belegdruck-aktionen { justify-content: flex-start; }
.rechnungslauf-knoepfe { white-space: nowrap; text-align: right; }
.rechnungslauf tfoot td { font-weight: 600; }
.rechnungsdruck-einzel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
.rechnungsdruck-liste { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.rechnungsdruck-liste-kopf { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.rechnungsdruck-liste-kopf h3 { margin: 0; font-size: 1rem; }
.rechnungsdruck-liste-kopf .form-input { max-width: 18rem; }
/* Suche immer unter dem Titel (seit 20.10.2026): in breiten Listen (Power Print) stand sie daneben, in schmalen (Rechnungsdruck)
   darunter - jetzt sind alle Listenköpfe gleich aufgebaut. */
.rechnungsdruck-liste-kopf > h3:has(+ .form-input) { flex-basis: 100%; }
.rechnungsdruck-tabelle { max-height: 22rem; overflow-y: auto; }
.rechnungsdruck-zeile { cursor: pointer; }
/* Lieferscheindruck (seit 17.10.2026): Lieferungen 1–9 und HW je gewähltem Kunden als schmale Ankreuzspalten. */
.lieferscheindruck-gewaehlt .lieferscheindruck-lfg { width: 2rem; padding-inline: 0.15rem; text-align: center; }
/* Einzel-Kunden: Vorauswahl über Gruppen | Kunden (halbe Breite) | Pfeile | Gewählt. */
.lieferscheindruck-einzel { grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 0.5fr) auto minmax(0, 1fr); }
.lieferscheindruck-gruppe { text-align: left; border: 0; background: transparent; color: var(--text-primary); padding: 0.3rem 0.5rem; border-radius: var(--radius-main); cursor: pointer; font: inherit; }
.lieferscheindruck-gruppe:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.lieferscheindruck-gruppe.aktiv { background: color-mix(in srgb, var(--color-primary) 18%, transparent); font-weight: 600; }
.lieferscheindruck-nachbearbeiten { align-self: flex-end; }
.lieferscheindruck-auswahl { display: flex; flex-direction: column; gap: 0.4rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); padding: 0.5rem; }
/* Vorauswahl wie in Marvins Statistiken: Typen oben, deren Einträge darunter (seit 17.10.2026). */
.kunden-vorauswahl { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.kunden-vorauswahl-typen, .kunden-vorauswahl-werte { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.25rem; overflow-y: auto;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
/* Typen und Einträge farblich getrennt: Typen in der Primärfarbe getönt, Einträge neutral. */
.kunden-vorauswahl-typen { max-height: 15rem; background: color-mix(in srgb, var(--color-primary) 9%, transparent); border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.kunden-vorauswahl-werte { max-height: 14rem; min-height: 6rem; background: var(--surface-faint); }
/* Kundennummern haben höchstens 5 Stellen - schmale Spalte, der Name bekommt den Rest. */
.widget-tabelle .ls-nr { width: 7ch; white-space: nowrap; }
/* Ergänzungsdruck auf Höhe der Eingabefelder (die Felder haben ihre Beschriftung darüber). */
.lieferscheindruck-haken { align-self: flex-end; display: flex; align-items: center; min-height: 2.6rem; }
/* Datumsfelder rund 30 % schmaler, mit Wochentag vor dem Datum („TTT TT.MM.JJJJ“). Seit 18.10.2026 stehen Wochentag und Datum
   nebeneinander in einem gemeinsamen Rahmen: der Wochentag nimmt so viel Platz, wie sein Kürzel braucht („Mo“, „Mon“, „pon.“,
   „niedz.“) - vorher war der Abstand auf zwei Buchstaben fest und längere Kürzel klebten am Datum. Mit „Mo“ … „So“ bleibt alles
   wie bisher (10,5rem breit, Datum ab 2,4rem); längere Kürzel machen das Feld breiter. */
.lieferscheindruck-datum { width: min-content; min-width: 10.5rem; }
/* Zeitraum mit DatumWahl (seit 30.10.2026): ◀ Von – Bis ▶ in einer Zeile, auf dem Handy volle Breite. */
.datum-wahl.lieferscheindruck-zeitraum { flex: 0 1 25rem; min-width: 0; max-width: 25rem; }
/* Einzelnes Datum mit Wochentag in DatumWahl: das Feld so breit wie sein Inhalt - mit 10,5rem lief das Datum unter den Kalenderknopf
   (Rechnungsdruck, PowerPrint …); die Beschriftung darum nicht mehr auf min-content. */
.datum-wahl > .datum-feld.datum-mit-wochentag { flex: 0 0 auto; }
.lieferscheindruck-datum:has(> .datum-wahl) { width: auto; }
html[data-geraet="handy"] .datum-wahl > .datum-feld.datum-mit-wochentag { flex: 1 1 0; min-width: 0; }
/* width 0 statt auto (seit 30.10.2026): mit auto blieb die Eigenbreite des Felds (~20 Zeichen) stehen, ◀ Feld ▶ wurde breiter als das Handy
   und zog Kopfkarte und Nachbarfelder mit (Fahrer, Globalverteilung, Versandsystem, Druckseiten). */
html[data-geraet="handy"] .datum-wahl > .datum-feld.datum-mit-wochentag .datum-text { flex: 1 1 auto; width: 0; min-width: 0; }
.lieferscheindruck-zeitraum-feld { flex: 0 1 25rem; min-width: 0; }
/* In der Beschriftung (senkrechter Flex-Rahmen, seit 05.11.2026): dort wäre „flex: 0 1 25rem“ die Höhe - das Datum stand mitten in
   einem 25rem hohen Feld und schob alle anderen Felder nach unten (Lieferscheindruck, Mahnungen, Zahlungseingänge). Die Breite gibt dort
   die Beschriftung vor. */
.lieferscheindruck-zeitraum-feld > .datum-wahl.lieferscheindruck-zeitraum { flex: 0 0 auto; }
html[data-geraet="handy"] :is(.lieferscheindruck-zeitraum-feld, .datum-wahl.lieferscheindruck-zeitraum) { flex: 1 1 100%; max-width: none; }
/* Handy: Von und Bis untereinander, die Pfeile daneben (wie die Filtergruppen) - nebeneinander blieb je Datum nur „30.1“. */
html[data-geraet="handy"] :is(.datum-wahl.lieferscheindruck-zeitraum, .beleg-liste-datum .datum-wahl-zeitraum) { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.35rem; }
html[data-geraet="handy"] :is(.datum-wahl.lieferscheindruck-zeitraum, .beleg-liste-datum .datum-wahl-zeitraum) > .datum-wahl-zurueck { grid-column: 1; grid-row: 1 / span 2; }
html[data-geraet="handy"] :is(.datum-wahl.lieferscheindruck-zeitraum, .beleg-liste-datum .datum-wahl-zeitraum) > .datum-wahl-vor { grid-column: 3; grid-row: 1 / span 2; }
html[data-geraet="handy"] :is(.datum-wahl.lieferscheindruck-zeitraum, .beleg-liste-datum .datum-wahl-zeitraum) > .datum-feld { grid-column: 2; }
html[data-geraet="handy"] :is(.datum-wahl.lieferscheindruck-zeitraum, .beleg-liste-datum .datum-wahl-zeitraum) > .datum-wahl-strich { display: none; }
html[data-geraet="handy"] .beleg-liste-zeitraum .filter-field.beleg-liste-datum { flex: 1 1 100%; }
.datum-feld.datum-mit-wochentag { display: flex; align-items: center; border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  background: var(--surface); }
.datum-feld.datum-mit-wochentag:focus-within { border-color: var(--color-primary); background: var(--surface-strong); }
.datum-mit-wochentag .datum-wochentag { flex: 0 0 auto; min-width: 1.6rem; margin-left: 0.8rem; padding-right: 0.3rem; white-space: nowrap;
  font-size: 0.9rem; color: var(--text-secondary); pointer-events: none; }
.datum-feld.datum-mit-wochentag .datum-text { flex: 1 0 auto; width: calc(8.1rem - 2px); min-width: 0; border: 0; background: transparent;
  padding-left: 0; }
/* Fokusring am Rahmen, nicht am Eingabefeld darin (seit 01.11.2026): der Ring von .form-input:focus(-visible) lag rund um das rahmenlose
   Feld - zwischen Wochentag und Tag erschien beim Tippen sein linker Bogen als „Halbkreis“. Hell bei jedem Fokus, sonst nur mit Tastatur,
   wie .form-input. */
.datum-feld.datum-mit-wochentag > input.datum-text:is(:focus, :focus-visible) { box-shadow: none; outline: none; }
.datum-feld.datum-mit-wochentag:has(> .datum-text:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }
:root[data-grundton="light"] .datum-feld.datum-mit-wochentag:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
/* Ungültig getipptes Datum: springt beim Verlassen zurück und blinkt kurz rot (js/datum.js, seit 18.10.2026). */
@keyframes datum-ungueltig { from, 55% { color: var(--error-strong); } to { color: var(--text-primary); } }
.datum-feld .datum-text.datum-ungueltig { animation: datum-ungueltig 1.6s ease-out; }
/* Tour- und Kundennummern haben höchstens 5 Stellen. */
.lieferscheindruck-nummer { width: 6.5rem; font-variant-numeric: tabular-nums; }
/* Haken-Spalte beim Nachbearbeiten nicht breiter als die Nummer. */
.widget-tabelle .ls-haken { width: 3ch; }
.lieferscheindruck-platzhalter { visibility: hidden; }
/* Mandant oben neben „Einzel-Kunden | Druck aller Kunden“ (seit 17.10.2026). */
.ausdrucke-mandant { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--label); }
.ausdrucke-mandant .form-input { width: auto; min-width: 12rem; }
/* Nachbearbeiten als Symbol direkt am Feld (seit 17.10.2026). */
.feld-mit-knopf { display: flex; align-items: stretch; }
.feld-mit-knopf > .form-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.feld-mit-knopf > .feld-knopf { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding: 0 0.6rem; }
/* Lieferung von/bis: höchstens 2 Stellen, beide gleich breit. */
.lieferscheindruck-lfg-wahl { width: 4.75rem; }
/* Fortschrittsbalken mit Restzeit (seit 17.10.2026). */
.fortschritt { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 1rem 0.75rem; }
.fortschritt-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.fortschritt-zahlen { font-variant-numeric: tabular-nums; }
.fortschritt-bahn { height: 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 12%, transparent); overflow: hidden; }
.fortschritt-balken { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.3s ease; }
.fortschritt-balken.unbestimmt { width: 35%; animation: fortschritt-lauf 1.2s ease-in-out infinite; }
@keyframes fortschritt-lauf { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.feld-knopf.aktiv { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary); border-color: var(--color-primary); }
/* Auswahlfelder in beiden Modi in eigener Zeile unter „Einzel-Kunden | Druck aller Kunden“. */
.lieferscheindruck .belegdruck-kopf > .belegdruck-felder { flex-basis: 100%; }
.lieferscheindruck-nachbearbeitung { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); align-items: start; }
.lieferscheindruck-nachlauf { padding: 0 1rem 0.75rem; align-items: center; }
.rechnungsdruck-zeile:hover td { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.rechnungsdruck-pfeile { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.rechnungsdruck-alle { display: flex; flex-direction: column; gap: 0.75rem; }
.rechnungsdruck-turnus { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.2rem 0.75rem; border: 1px solid var(--border-soft);
  border-radius: var(--radius-main); padding: 0.5rem 0.75rem; margin: 0; }
.rechnungsdruck-turnus legend { font-size: 0.85rem; color: var(--text-secondary); padding: 0 0.3rem; }
.formular-knoepfe { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.formular-raender { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; }
/* Ränder ohne Drehknöpfe und mit wenig Innenabstand (seit 18.10.2026) - vorher zeigten die 43 px breiten Felder nur „1:“ statt „12“. */
.formular-raender .form-input { padding-inline: 0.3rem; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.formular-raender .form-input::-webkit-inner-spin-button, .formular-raender .form-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.formular-papier { padding: 12mm 15mm 10mm 20mm; }
.formular-bereich { position: relative; border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, transparent); border-radius: 2px; padding: 4mm 2mm 2mm; margin-bottom: 4mm; }
.formular-bereich-titel { position: absolute; top: -0.6rem; left: 0.5rem; padding: 0 0.3rem; font-size: 0.7rem; background: var(--papier);
  color: color-mix(in srgb, var(--color-primary) 80%, var(--papier-text)); font-family: "Segoe UI", Arial, sans-serif; }
.formular-zeile { min-height: 6mm; }
.formular-aus { opacity: 0.35; }
.formular-leer { display: block; color: var(--papier-leise); font-style: italic; font-size: 0.85em; padding: 1mm; border: 1px dotted var(--papier-linie); }
.formular-feldliste { display: flex; flex-direction: column; max-height: 16rem; overflow-y: auto; }
.formular-platzhalter { justify-content: flex-start; text-align: left; }
.formular-spalte { border: 1px solid var(--border-soft); border-radius: var(--radius-main); padding: 0.4rem; margin: 0.3rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.formular-spalte-breite { width: 5rem; }
/* Jobmanager (seit 17.10.2026, Menüabschnitt „Zusatzprogramme“). */
.jobmanager-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; }
.jobmanager-editor { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 1rem 1rem; }
.jobmanager-gruppe { display: flex; flex-direction: column; gap: 0.5rem; }
.jobmanager-anzahl { width: 6rem; }
.jobmanager-protokoll { max-height: 22rem; overflow-y: auto; }
.jobmanager-gewaehlt td { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.jobmanager-ok { color: var(--color-primary); }
.jobmanager-fehler { color: var(--critical); }

/* Marvin Power Print (seit 17.10.2026): Schildwahl breiter, Anzahl und „aus Bestellung“ schmal in der Artikelliste. */
.powerprint-schild { min-width: 18rem; }
.powerprint .widget-tabelle .powerprint-anzahl { width: 5.5rem; }
.powerprint .widget-tabelle .powerprint-anzahl .form-input { width: 4.75rem; padding-block: 0.15rem; }
.powerprint .widget-tabelle .powerprint-bestellung { width: 6.5rem; text-align: center; }
/* Rechnungsnachdruck (seit 17.10.2026, nach Marvins Maske D815): Kunden | Rechnungen | Pfeile | zum Nachdruck. */
/* Rechte Liste am breitesten (seit 18.10.2026): bei 1920 px brauchte „Zum Nachdruck“ 554 px bei 508 px Platz; die Kundenliste
   behält ihre Breite (sonst scrollt sie wegen langer Namen quer). */
.rechnungsnachdruck-einzel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.9fr) auto minmax(0, 1fr); }
.rechnungsnachdruck-einzel .rechnungsdruck-zeile.aktiv td { background: color-mix(in srgb, var(--color-primary) 16%, transparent); font-weight: 600; }
.rechnungsnachdruck-auswaehlen, .rechnungsnachdruck-sammel { display: flex; flex-direction: column; gap: 0.75rem; }
.rechnungsnachdruck-auswaehlen .belegdruck-felder { align-items: flex-end; }
.rechnungsnachdruck-name { min-width: 16rem; }
.rechnungsnachdruck-bereich { display: flex; flex-wrap: wrap; gap: 0.75rem; grid-template-columns: none; }
.rechnungsnachdruck-storno { margin-left: 0.4rem; padding: 0 0.35rem; border-radius: 0.6rem; font-size: 0.75rem;
  background: color-mix(in srgb, var(--error-strong) 15%, transparent); color: var(--error-text); }

/* Schmalere Fenster bis 1500 px (seit 18.10.2026, z. B. 1280 × 800 und Tablet quer): vier Listen nebeneinander waren je nur
   200–280 px breit, Namen und Nummern abgeschnitten. Oben Vorauswahl und Kunden (bzw. Kunden und Rechnungen), darunter die
   Pfeile (gedreht) und die gewählten in voller Breite. Ab 1500 px bleibt alles wie bisher. */
@media (max-width: 1500px) {
  .rechnungsdruck-einzel:has(> :nth-child(4)) { grid-template-columns: minmax(11rem, 0.4fr) minmax(0, 1fr); }
  .rechnungsdruck-einzel.rechnungsnachdruck-einzel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .rechnungsdruck-einzel:has(> :nth-child(4)) > .rechnungsdruck-pfeile { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
  .rechnungsdruck-einzel:has(> :nth-child(4)) > .rechnungsdruck-pfeile i { transform: rotate(90deg); }
  .rechnungsdruck-einzel:has(> :nth-child(4)) > :last-child { grid-column: 1 / -1; }
  /* Lieferscheine: der Haken „Anzahl Ausdrucke …“ über den Knöpfen - sonst rutschte „PDF“ allein in eine zweite Zeile. */
  .lieferscheindruck-aktionen .belegdruck-aktionen > .widget-eintrag { order: -1; flex-basis: 100%; justify-content: flex-end; }
  /* Formulardesigner: links entweder die Bausteine oder - sobald einer gewählt ist - seine Eigenschaften, daneben das Blatt.
     Vorher standen die Eigenschaften unter dem Blatt (bei 1280 × 800 erst nach rund 1400 px Scrollen). */
  .formular-designer .bericht-arbeitsflaeche { grid-template-columns: 16rem minmax(0, 1fr); }
  .formular-designer .bericht-arbeitsflaeche > .bericht-eigenschaften { grid-column: 1; grid-row: 1; position: sticky !important; }
  .formular-designer .bericht-arbeitsflaeche > .bericht-tisch { grid-column: 2; grid-row: 1; }
  .formular-designer .bericht-arbeitsflaeche.mit-auswahl > .bericht-palette,
  .formular-designer .bericht-arbeitsflaeche:not(.mit-auswahl) > .bericht-eigenschaften { display: none; }
  .formular-designer .formular-auswahl-zu { display: inline-flex; }
}
.formular-auswahl-zu { display: none; align-self: flex-start; }
/* Lieferungen 1–9/HW je Kunde: die Nummer am Haken braucht nur das Handy (dort ohne Spaltenkopf). */
.ls-lfg-nr { display: none; }
/* Gesperrte Kunden (Kennung X) in den Kundenlisten des Lieferscheindrucks (seit 18.10.2026). */
.ls-gesperrt { margin-left: 0.4rem; color: var(--warning); font-size: 0.8em; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------ Ausdrucke, Formulardesigner, Zusatzprogramme auf Handy und Tablet (seit 18.10.2026)
   Rechnungs-, Lieferschein- und Rechnungsnachdruck, Formulardesigner, Jobmanager und Power Print: Listen untereinander in voller
   Breite (Handy), Moduswahl umbrechend, Druckvorschau eingepasst (js/export.js), Tippflächen ab 44 px. Am PC unverändert. */
html:not([data-geraet="desktop"]) .belegdruck-kopf .statistik-umschalter { display: flex; flex-wrap: wrap; max-width: 100%; border-radius: var(--radius-main); }
html:not([data-geraet="desktop"]) .belegdruck-kopf .statistik-umschalter > button { flex: 1 1 auto; min-height: 44px; }
html[data-geraet="handy"] .belegdruck-kopf .statistik-umschalter > button { flex-basis: 8.5rem; padding-inline: 0.5rem; }
html[data-geraet="handy"] .belegdruck-kopf { align-items: stretch; }
html[data-geraet="handy"] .belegdruck-kopf > :is(.statistik-umschalter, .reiter, .ausdrucke-mandant, .belegdruck-felder) { flex-basis: 100%; }
html[data-geraet="handy"] .ausdrucke-mandant .form-input { flex: 1 1 auto; min-width: 0; }
/* Felder: auf dem Handy zwei je Zeile (Nummern, Datum) bzw. eine (Auswahlen), nie breiter als der Bildschirm. */
html[data-geraet="handy"] .belegdruck-felder > .form-label { flex: 1 1 9rem; min-width: 0; }
html[data-geraet="handy"] .belegdruck-felder > .form-label:has(select) { flex-basis: 100%; }
html[data-geraet="handy"] .belegdruck-felder > .form-label :is(.form-input, .feld-mit-knopf) { width: 100%; max-width: none; min-width: 0; }
html[data-geraet="handy"] .belegdruck-felder .feld-mit-knopf > .form-input { flex: 1 1 auto; }
html[data-geraet="handy"] .belegdruck-felder > .lieferscheindruck-platzhalter { display: none; }
html[data-geraet="handy"] .belegdruck-felder > fieldset { flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .powerprint-schild { min-width: 0; }
html[data-geraet="handy"] .belegdruck-felder > .lieferscheindruck-datum { flex-basis: 100%; width: auto; min-width: 0; }

/* Listen: Handy untereinander in voller Breite; Auswahllisten scrollen in sich (bis zu 400 Kunden). */
html[data-geraet="handy"] :is(.rechnungsdruck-einzel, .rechnungsdruck-einzel:has(> :nth-child(4)), .rechnungsdruck-einzel.rechnungsnachdruck-einzel) { grid-template-columns: minmax(0, 1fr); }
html[data-geraet="handy"] .rechnungsdruck-einzel > * { grid-column: 1 / -1; }
html[data-geraet="handy"] .rechnungsdruck-pfeile { flex-direction: row; justify-content: center; }
html[data-geraet="handy"] .rechnungsdruck-pfeile i { transform: rotate(90deg); }
html:not([data-geraet="desktop"]) .rechnungsdruck-tabelle { max-height: min(22rem, 55dvh); }
/* Die gewählten (rechte bzw. untere Liste) sind meist wenige - auf dem Handy ohne eigene Scrollbox. */
html[data-geraet="handy"] .rechnungsdruck-einzel > .rechnungsdruck-liste:last-child .rechnungsdruck-tabelle { max-height: none; }
html[data-geraet="handy"] .rechnungsdruck-liste-kopf .form-input { max-width: none; flex: 1 1 12rem; min-width: 0; }
html[data-geraet="handy"] .lieferscheindruck-nachbearbeitung { grid-template-columns: minmax(0, 1fr); }
html[data-geraet="handy"] .kunden-vorauswahl-werte { min-height: 0; max-height: 11rem; }
/* Zellen umbrechen statt die Liste seitlich zu schieben; Nummern (Kunde, Rechnung) nie. */
html[data-geraet="handy"] :is(.rechnungsdruck-tabelle, .rechnungslauf) .widget-tabelle :is(th, td) { padding: 0.4rem 0.35rem; }
html[data-geraet="handy"] .rechnungsdruck-tabelle .widget-tabelle td:not(.ls-nr, .zahl) { white-space: normal; overflow-wrap: anywhere; }
html[data-geraet="handy"] .rechnungsdruck-tabelle .widget-tabelle .ls-nr { width: auto; }
/* Rechnungsnachdruck: in der Kundenliste fehlt auf dem Handy der Ort (Suchname und Nummer gehen vor). */
html[data-geraet="handy"] .rechnungsnachdruck-einzel > .rechnungsdruck-liste:first-child .widget-tabelle :is(th, td):nth-child(3) { display: none; }
/* Lieferscheindruck „Gewählt“: je Kunde eine Karte - Nummer, Name, Entfernen, darunter die Lieferungen als 44-px-Haken. */
html[data-geraet="handy"] .lieferscheindruck-gewaehlt thead { display: none; }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt, html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody { display: block; width: 100%; }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.35rem; padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft); }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody > tr > td { display: block; padding: 0; border: 0; }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody > tr > td:nth-child(2) { flex: 1 1 calc(100% - 9rem); min-width: 0; font-weight: 600; }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody > tr > td.ls-nr { flex: 0 0 auto; }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody > tr > td.lieferscheindruck-lfg { order: 2; width: auto; }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody > tr > td:last-child:not(.lieferscheindruck-lfg) { order: 1; }
html[data-geraet="handy"] .lieferscheindruck-gewaehlt > tbody > tr > td.card-empty { flex: 1 1 100%; }
html[data-geraet="handy"] .ls-lfg-nr { display: inline; font-size: 0.8rem; }
html[data-touch] .ls-lfg-wahl { display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; min-width: 2.2rem; min-height: 44px; cursor: pointer; }
html[data-geraet="handy"] .ls-lfg-wahl { min-width: 3.1rem; padding: 0 0.3rem; border: 1px solid var(--border-soft); border-radius: 0.6rem; }

/* Tippflächen: Haken, Umschalter, Kalender-Symbol des Datumsfelds und Listenzeilen. */
html[data-touch] :is(.belegdruck, .jobmanager) input[type="checkbox"] { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
html[data-touch] :is(.belegdruck, .jobmanager) .widget-eintrag { min-height: 44px; }
html[data-touch] :is(.belegdruck, .jobmanager) .statistik-umschalter > button,
html[data-touch] :is(.belegdruck, .jobmanager) .reiter > button { min-height: 44px; }
html[data-touch] :is(.belegdruck, .jobmanager) .datum-kalender { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; right: 0; }
html[data-touch] :is(.belegdruck, .jobmanager) .datum-feld.datum-mit-wochentag .datum-text { padding-right: 2.9rem; }
/* Mit dem größeren Kalenderknopf lief das Datum sonst unter ihn (seit 30.10.2026). */
html[data-touch]:not([data-geraet="handy"]) :is(.belegdruck, .jobmanager) .datum-feld.datum-mit-wochentag .datum-text { width: calc(8.9rem - 2px); }
html[data-touch] :is(.belegdruck, .jobmanager) .datum-feld:not(.datum-mit-wochentag) .datum-text { padding-right: 2.9rem; }
html[data-touch] :is(.belegdruck, .jobmanager) .feld-mit-knopf > .feld-knopf { min-width: 44px; justify-content: center; }
html[data-touch] .rechnungsdruck-zeile > td { padding-block: 0.6rem; }
html[data-touch] .lieferscheindruck-gruppe { min-height: 44px; }
html[data-touch] .rechnungsdruck-pfeile .btn { min-width: 44px; }
html[data-touch] .formular-knoepfe .btn { min-width: 44px; }

/* Kopf mit Aktionen (Lieferscheine, Rechnungen, Schilder): Knöpfe auf dem Handy in voller Breite unter dem Titel. */
html[data-geraet="handy"] :is(.lieferscheindruck-aktionen, .rechnungslauf) > .card-header .belegdruck-aktionen { flex: 1 1 100%; justify-content: stretch; }
html[data-geraet="handy"] :is(.lieferscheindruck-aktionen, .rechnungslauf) > .card-header .belegdruck-aktionen > .btn { flex: 1 1 8rem; justify-content: center; }
html[data-geraet="handy"] :is(.lieferscheindruck-aktionen, .rechnungslauf) > .card-header .belegdruck-aktionen > .widget-eintrag { flex: 1 1 100%; justify-content: flex-start; }
html[data-geraet="handy"] .rechnungslauf-bestaetigen .belegdruck-aktionen > .btn { flex: 1 1 8rem; justify-content: center; }
html[data-geraet="handy"] .rechnungslauf-bestaetigen .widget-eintrag { padding-inline: 0; align-items: flex-start; }

/* Druckvorschau (Lieferscheine, Rechnungen, Formulardesigner, Schilder): auf dem Handy im Vollbild, Schließen fest oben rechts;
   js/export.js verkleinert das A4-Blatt auf die Breite (vorher 100 % und rechts abgeschnitten). */
html:not([data-geraet="desktop"]) .belegdruck-vorschau { min-width: 0; }
html:not([data-geraet="desktop"]) .belegdruck-vorschau > .card-header { flex-wrap: nowrap; align-items: center; }
/* Titel umbrechen statt abschneiden (seit 18.10.2026: „Druckvorschau mit dem Must…“). */
html:not([data-geraet="desktop"]) .belegdruck-vorschau > .card-header > h2 { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.25; }
html:not([data-geraet="desktop"]) .belegdruck-vorschau > .card-header > .btn-icon { flex: 0 0 auto; }
html[data-geraet="handy"] .belegdruck-vorschau-rahmen { inset: 0; }
html[data-geraet="handy"] .belegdruck-vorschau { border-radius: 0; padding: 0.6rem 0.6rem calc(0.6rem + env(safe-area-inset-bottom)); }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header > h2 { font-size: 1rem; }

/* Formulardesigner: Handy untereinander (links Bausteine bzw. Eigenschaften, dann das Blatt), Tablet wie die schmalen Fenster. */
html[data-geraet="handy"] .formular-designer .bericht-arbeitsflaeche { grid-template-columns: minmax(0, 1fr); }
html[data-geraet="handy"] .formular-designer .bericht-arbeitsflaeche > * { grid-column: 1; grid-row: auto; }
html[data-geraet="handy"] .formular-designer :is(.bericht-palette, .bericht-eigenschaften) { position: static !important; max-height: none; overflow: visible; }
html[data-geraet="handy"] .formular-designer .bericht-arbeitsflaeche.mit-auswahl > .bericht-palette,
html[data-geraet="handy"] .formular-designer .bericht-arbeitsflaeche:not(.mit-auswahl) > .bericht-eigenschaften { display: none; }
html[data-geraet="handy"] .formular-designer .formular-auswahl-zu { display: inline-flex; }
html[data-geraet="handy"] .formular-designer .bericht-eigenschaften { order: -1; }
html[data-geraet="handy"] .formular-designer .bericht-tisch { padding: 0.5rem; min-height: 0; }
html[data-geraet="handy"] .formular-designer .statistik-kopf { flex-wrap: wrap; }
html[data-geraet="handy"] .formular-designer .bericht-name { min-width: 0; flex: 1 1 100%; }
html[data-touch] .formular-designer .bericht-palette-baustein { min-height: 44px; }

/* Jobmanager: Liste und Job untereinander (Handy, Tablet hochkant); auf dem Handy die Listen als Karten (verwaltung-tabelle). */
/* Einspaltig unter 1100 px – auch im Desktop-Fenster (seit 18.10.2026): neben der Seitenleiste wurden Liste und Editor schon
   zwischen 820 und 1100 px zu eng, nachdem die alte 900-px-Regel entfallen war. */
@media (max-width: 1100px) { .jobmanager-raster { grid-template-columns: minmax(0, 1fr); } }
html[data-geraet="handy"] .jobmanager-editor { padding: 0 0.25rem 0.75rem; }
html[data-geraet="handy"] .jobmanager-anzahl { width: 100%; }
html[data-geraet="handy"] .jobmanager-protokoll { max-height: none; }

/* Power Print: Anzahl und „aus Bestellung“ bleiben schmale Spalten. */
html[data-geraet="handy"] .powerprint .widget-tabelle .powerprint-anzahl .form-input { width: 4rem; }

/* Zusammenfassung „Rechnungen ohne XRechnung“ mit aufklappbaren Gründen (seit 18.10.2026, Rechnungsnachdruck). */
.status-box details summary { cursor: pointer; }
.status-box details ul { margin: .25rem 0 0 1.2rem; max-height: 12rem; overflow: auto; }
/* Rechnungsnachdruck: Umschalter „PDF aus Marvin / Neu erzeugen“ auf dem Handy über die volle Breite, Knöpfe teilen sich den Platz
   (seit 18.10.2026) – sonst schob er die Druckknöpfe aus dem Bild. */
html[data-geraet="handy"] .nachdruck-quelle { display: flex; width: 100%; }
html[data-geraet="handy"] .nachdruck-quelle > button { flex: 1 1 0; min-width: 0; white-space: normal; font-size: 0.8rem; }

/* ------------------------------------------------------------------ Nachbesserungen aus der 2. Browser-Testrunde (seit 18.10.2026) */
/* Rechnungsnachdruck: Kennzeichen „storniert“/„Stornorechnung“ als ganze Plakette (brach am Handy mitten im Wort); in „Zum Nachdruck“
   (die Liste mit sechs Spalten) bleibt die Entfernen-Spalte schmal und immer sichtbar, der Suchname bricht um. */
.rechnungsnachdruck-storno { display: inline-block; white-space: nowrap; overflow-wrap: normal; line-height: 1.4; }
.rechnungsnachdruck .widget-tabelle:has(> thead > tr > th:nth-child(6)) :is(th, td) { padding-inline: 0.45rem; }
.rechnungsnachdruck .widget-tabelle:has(> thead > tr > th:nth-child(6)) :is(th, td):last-child:not([colspan]) { width: 1%; white-space: nowrap; padding-inline: 0.15rem; }
/* Listenzeilen, die man mit der Tastatur ansteuert (tabindex): Fokusrahmen in der Primärfarbe statt Browser-Schwarz. */
.rechnungsdruck-tabelle tr[tabindex]:focus { outline: none; }
.rechnungsdruck-tabelle tr[tabindex]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.rechnungsdruck-tabelle tr[tabindex]:focus-visible > td { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
/* Handy: „Zum Nachdruck“ ohne Datum und Kundennummer, die Rechnungen ohne Kundennummer - Nummer, Betrag, Name mit Kennzeichen
   und ✕ passen so in 360 px (vorher 424 px Inhalt bei 306 px Platz). */
html[data-geraet="handy"] .rechnungsnachdruck .widget-tabelle:has(> thead > tr > th:nth-child(6)) :is(th, td):is(:nth-child(1), :nth-child(4)):not([colspan]) { display: none; }
html[data-geraet="handy"] .rechnungsnachdruck .widget-tabelle:has(> thead > tr > th:nth-child(5)):not(:has(> thead > tr > th:nth-child(6))) :is(th, td):nth-child(4):not([colspan]) { display: none; }
html[data-geraet="handy"] .rechnungsnachdruck-storno { font-size: 0.68rem; padding: 0 0.3rem; margin-left: 0.25rem; }
html[data-geraet="handy"] .rechnungsnachdruck .rechnungsdruck-tabelle .widget-tabelle :is(th, td):not([colspan]) { padding-inline: 0.25rem; }
html[data-geraet="handy"] .rechnungsnachdruck .rechnungsdruck-tabelle .widget-tabelle th { font-size: 0.78rem; }
html[data-touch] .rechnungsnachdruck .widget-tabelle td:last-child > .btn-icon { min-width: 44px; min-height: 44px; }

/* Power Print: Hinweis auf nicht gedruckte Inhalte (Kürzel seit 18.10.2026 nur im Tooltip), kurz noch einmal neben den Druckknöpfen. Handy: „Gewählt“ ohne
   Querscrollen - Anzahl schmaler, „aus Bestellung“ zweizeilig, ✕ immer sichtbar (vorher „aus Bestellu“, ✕ außerhalb). */
.powerprint-fehlend-kurz { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--warning); font-size: 0.85rem; margin-right: auto; }
.powerprint .widget-tabelle td:last-child:has(> .btn-icon) { width: 1%; white-space: nowrap; }
html[data-geraet="handy"] .powerprint-fehlend-kurz { flex: 1 1 100%; }
html[data-geraet="handy"] .powerprint .rechnungsdruck-tabelle .widget-tabelle :is(th, td).powerprint-bestellung { width: auto; white-space: normal; font-size: 0.72rem; line-height: 1.15; }
html[data-geraet="handy"] .powerprint .rechnungsdruck-tabelle .widget-tabelle :is(th, td).powerprint-anzahl { width: auto; }
html[data-geraet="handy"] .powerprint .widget-tabelle .powerprint-anzahl .form-input { width: 3rem; padding-inline: 0.3rem; }
html[data-geraet="handy"] .powerprint .widget-tabelle td:last-child:has(> .btn-icon) { padding-inline: 0; }
html[data-touch] .powerprint .widget-tabelle td:last-child > .btn-icon { min-width: 44px; min-height: 44px; }
/* Handy: in „Gewählt“ mit Anzahl-Spalten (Preisschild) ohne Artikelnummer - die steht links in der Auswahl, sonst passt die Liste
   nicht in 360 px (352 px Inhalt bei 306 px Platz). */
html[data-geraet="handy"] .powerprint .widget-tabelle:has(th.powerprint-anzahl) :is(th, td):first-child:not([colspan]) { display: none; }

/* Formulardesigner: Warnung bei zu schmaler NVE. Zuordnung: Haken mit 44 px Trefferfläche auf Handy und Tablet (vorher 24 px). */
.formular-warnung { color: var(--warning); }
.zuordnung-haken { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
html[data-touch] .widget-tabelle :is(th, td).zuordnung-haken-zelle { padding: 0; width: 44px; }
html[data-touch] .zuordnung-haken { min-width: 44px; min-height: 44px; }

/* ------------------------------------------------------------------ Abschluss-Nachbesserungen 18.10.2026 (Browsertest) */
/* Power Print „Gewählt“ bis 1500 px (1280 × 800, Tablet quer): Anzahl und „aus Bestellung“ schmaler (Kopf zweizeilig), Bezeichnung
   bricht um - vorher 429 bzw. 445 px Tabelle in 399 px, das ✕ nur per Querscrollen erreichbar. */
@media (max-width: 1500px) {
  .powerprint .rechnungsdruck-tabelle .widget-tabelle :is(th, td) { padding-inline: 0.4rem; }
  .powerprint .rechnungsdruck-tabelle .widget-tabelle td:not(.ls-nr, .powerprint-anzahl, .powerprint-bestellung) { overflow-wrap: anywhere; }
  .powerprint .rechnungsdruck-tabelle .widget-tabelle :is(th, td).powerprint-anzahl { width: 3.9rem; }
  .powerprint .widget-tabelle .powerprint-anzahl .form-input { width: 3.5rem; padding-inline: 0.35rem; }
  .powerprint .rechnungsdruck-tabelle .widget-tabelle :is(th, td).powerprint-bestellung { width: 4.6rem; white-space: normal; line-height: 1.15; }
  .powerprint .widget-tabelle td:last-child:has(> .btn-icon) { padding-inline: 0; }
  /* Rechnungsnachdruck: lange Suchnamen und Orte ohne Leerzeichen („Podbielskistr.96,Hannove“) umbrechen (390 px in 386 px). */
  .rechnungsnachdruck-einzel > .rechnungsdruck-liste:first-child .widget-tabelle td:not(.ls-nr) { overflow-wrap: anywhere; }
}
/* Rechnungsnachdruck, Rechnungen: Empfänger umbrechen - auch bei 1920 px waren es mit großen Beträgen 479 px in 475 px. */
.rechnungsnachdruck-einzel > .rechnungsdruck-liste:nth-child(2) .widget-tabelle td:last-child:not([colspan]) { overflow-wrap: anywhere; }
/* Handy: mit „Stornorechnung“ waren es 315 px in 306 px - Kopf und Plakette etwas kleiner, Abstände enger, das Datum bricht nie. */
html[data-geraet="handy"] .rechnungsnachdruck-einzel > .rechnungsdruck-liste:nth-child(2) .widget-tabelle :is(th, td):not([colspan]) { padding-inline: 0.2rem; }
html[data-geraet="handy"] .rechnungsnachdruck-einzel > .rechnungsdruck-liste:nth-child(2) .widget-tabelle th { font-size: 0.72rem; }
html[data-geraet="handy"] .rechnungsnachdruck-einzel > .rechnungsdruck-liste:nth-child(2) .widget-tabelle td:first-child:not([colspan]) { white-space: nowrap; overflow-wrap: normal; }
html[data-geraet="handy"] .rechnungsnachdruck-einzel > .rechnungsdruck-liste:nth-child(2) .rechnungsnachdruck-storno { font-size: 0.62rem; padding: 0 0.25rem; margin-left: 0.2rem; }
/* Jobmanager am Handy: Fieldsets nehmen sonst die Mindestbreite ihres Inhalts an und ragten über die Karte (354 px bei 352 px). */
html[data-geraet="handy"] .jobmanager-gruppe { min-width: 0; }
/* Artikelstamm: „Leere ausblenden“ mit 44 px Trefferfläche auf Handy und Tablet (vorher 21 px). */
html[data-touch] .artikelstamm-leere { min-height: 44px; }
/* Sperrmarke „X“ im Lieferscheindruck: in 0,8em las sie sich auf Handy und Tablet wie ein kleines „x“. */
html:not([data-geraet="desktop"]) .ls-gesperrt { font-size: 0.95em; }

/* Rechnung stornieren (seit 18.10.2026): Storno-Info breit, Kennzeichen „bezahlt“ in der Auswahl. */
.rechnungsstorno-info { flex: 1 1 22rem; min-width: 16rem; }
.rechnungsstorno-info textarea { resize: vertical; }
.rechnungsstorno-bezahlt { padding: 0 0.35rem; border-radius: 0.6rem; font-size: 0.75rem; background: color-mix(in srgb, var(--warning) 25%, transparent); }
/* Preisschild-Designer im Formulardesigner (seit 18.10.2026): Schild/Elemente | Eigenschaften | Vorschau. */
.mpp-designer-raster { display: grid; grid-template-columns: minmax(15rem, 0.8fr) minmax(16rem, 1fr) minmax(18rem, 1.2fr); gap: 1rem; align-items: start; }
.mpp-designer-links, .mpp-designer-mitte, .mpp-designer-rechts { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.mpp-designer-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.6rem; }
.mpp-designer-haken { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.mpp-designer-gruppe { border: 1px solid var(--border-soft); border-radius: var(--radius-main); padding: 0.4rem 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.mpp-designer-gruppe > summary { cursor: pointer; font-weight: 600; }
.mpp-designer-elemente { display: flex; flex-direction: column; gap: 0.1rem; max-height: 22rem; overflow-y: auto; padding: 0.25rem; }
.mpp-designer-elemente .mpp-aus { opacity: 0.5; text-decoration: line-through; }
.mpp-designer-vorschau { width: 100%; height: 55vh; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: color-mix(in srgb, var(--text-secondary) 70%, var(--surface-strong)); }
.mpp-farbe { width: 3.5rem; padding: 0.1rem; height: 2rem; }
html[data-geraet="handy"] .mpp-designer-raster, html[data-geraet="tablet"] .mpp-designer-raster { grid-template-columns: 1fr; }

/* Backzetteldruck (seit 18.10.2026): Hinweise zum Zettel (Folgetag, nicht nachgebaute Marvin-Teile). */
.backzettel-hinweise { margin: 0; padding: 0.5rem 1rem 0.75rem 2rem; color: var(--text-secondary); font-size: 0.9rem; }

/* Zahlungseingänge buchen (seit 18.10.2026): Kunden | offene Posten | Buchen; Bankabgleich mit Zwischenansicht. */
.zahlung-raster { grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.7fr) minmax(18rem, 1fr); }
.zahlung-suche { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.4rem; }
.zahlung-suche .form-input { flex: 1 1 6rem; min-width: 0; }
.zahlung-buchen { gap: 0.5rem; }
.zahlung-werte { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; margin: 0; }
.zahlung-werte dt { color: var(--text-secondary); }
.zahlung-werte dd { margin: 0; text-align: right; }
.zahlung-weitere { flex-wrap: wrap; }
.zahlung-bezahlt td { color: var(--text-secondary); }
.zahlung-zuordnung { display: flex; gap: 0.3rem; align-items: center; margin: 0.15rem 0; flex-wrap: wrap; }
.zahlung-betrag { width: 7rem; text-align: right; }
.zahlung-kandidat { max-width: 22rem; margin-top: 0.2rem; }
.zahlung-abgleich td { vertical-align: top; }
.zahlung-ok { color: var(--ok-text); }
.zahlung-fehler { color: var(--error-text); }
html[data-geraet="handy"] .zahlung-raster, html[data-geraet="tablet"] .zahlung-raster { grid-template-columns: 1fr; }
html[data-geraet="handy"] .zahlung-betrag { width: 6rem; }

/* ------------------------------------------------------------------ Ausdrucke, Formulardesigner, Zusatzprogramme auf Handy und Tablet (seit 18.10.2026)
   Lieferschein-, Rechnungs- und Rechnungsnachdruck, Power Print, Jobmanager, Formulardesigner. Am PC unverändert (die
   max-width-Regeln oben gelten auch für schmale PC-Fenster und bleiben). Auswahllisten mit Hunderten Kunden behalten eine
   begrenzte Höhe - sonst stünden „Gewählt“ und die Druckknöpfe tausende Pixel tiefer; kleine Listen (Protokoll) wachsen mit. */

/* Moduswahl: Finger 44 px; auf dem Handy über die ganze Breite, ab drei Knöpfen untereinander (sonst abgeschnitten). */
html[data-touch] :is(.belegdruck, .formular-designer) .statistik-umschalter > button { min-height: 44px; }
html[data-touch] .belegdruck-kopf > .reiter > button { min-height: 44px; }
html[data-geraet="handy"] .belegdruck-kopf > .statistik-umschalter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
html[data-geraet="handy"] .belegdruck-kopf > .statistik-umschalter > button { padding: 0.35rem 0.5rem; line-height: 1.25; white-space: normal; }
html[data-geraet="handy"] .belegdruck-kopf > .statistik-umschalter:has(> button:nth-child(3)) { grid-auto-flow: row; border-radius: var(--radius-main); }
html[data-geraet="handy"] .belegdruck-kopf > .statistik-umschalter:has(> button:nth-child(3)) > button { text-align: left; padding-inline: 1rem; }
html[data-geraet="handy"] .belegdruck-kopf > .statistik-umschalter:has(> button:nth-child(3)) > button + button { border-top: 1px solid var(--border-soft); }
html[data-geraet="handy"] .belegdruck-kopf > .reiter { width: 100%; }

/* Felder: auf dem Handy jedes Feld über die ganze Breite, Von/Bis-Paare und Nummern zu zweit nebeneinander. */
html[data-geraet="handy"] .belegdruck-kopf > :is(.belegdruck-felder, .ausdrucke-mandant) { flex: 1 1 100%; }
html[data-geraet="handy"] .ausdrucke-mandant { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
html[data-geraet="handy"] .ausdrucke-mandant .form-input { width: 100%; min-width: 0; }
html[data-geraet="handy"] .belegdruck-felder > :is(.form-label, .widget-eintrag, fieldset, .btn) { flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .belegdruck-felder .form-input { width: 100%; min-width: 0; }
html[data-geraet="handy"] .belegdruck-felder .feld-mit-knopf > .form-input { flex: 1 1 auto; }
html[data-geraet="handy"] .belegdruck-felder > .btn { justify-content: center; }
html[data-geraet="handy"] :is(.rechnungsdruck-alle, .rechnungsnachdruck-auswaehlen, .jobmanager-editor) .belegdruck-felder > .form-label,
html[data-geraet="handy"] .rechnungsnachdruck-bereich > .form-label,
html[data-geraet="handy"] .belegdruck-felder > .form-label:has(:is(.lieferscheindruck-nummer, .lieferscheindruck-lfg-wahl, .sd-lieferung)) { flex: 1 1 calc(50% - 0.75rem); }
html[data-geraet="handy"] .rechnungsnachdruck-auswaehlen .belegdruck-felder > .rechnungsnachdruck-name { flex-basis: 100%; }   /* Kunde (StammdatenFeld) mit Nummer und Name */
html[data-geraet="handy"] :is(.verwaltung-seite, .rechnungsnachdruck-bereich) .form-label.lieferscheindruck-datum { flex: 1 1 100%; width: auto; }
html[data-geraet="handy"] .lieferscheindruck-platzhalter { display: none; }
html[data-geraet="handy"] .rechnungsdruck-turnus { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); padding-inline: 0.5rem; }

/* Haken: ganze Zeile 44 px hoch, Kästchen etwas größer. */
html[data-touch] :is(.belegdruck, .jobmanager, .formular-designer) .widget-eintrag { min-height: 44px; }
html[data-touch] :is(.belegdruck, .jobmanager, .formular-designer) input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
html[data-geraet="handy"] :is(.belegdruck-kopf, .belegdruck-felder) > .widget-eintrag { padding-inline: 0.1rem; }

/* Vorauswahl: Typen als Chips statt einer Liste mit eigenem Scrollbalken, Einträge 44 px; ohne Typ nur der kurze Hinweis. */
html:not([data-geraet="desktop"]) .kunden-vorauswahl-typen { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; max-height: none; overflow: visible;
  padding: 0; background: none; border: 0; }
html:not([data-geraet="desktop"]) .kunden-vorauswahl-typen > .lieferscheindruck-gruppe { min-height: 44px; padding: 0 1rem; border: 1px solid var(--border-soft);
  border-radius: 999px; background: var(--surface-strong); }
html:not([data-geraet="desktop"]) .kunden-vorauswahl-typen > .lieferscheindruck-gruppe.aktiv {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent); border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
html:not([data-geraet="desktop"]) .kunden-vorauswahl-werte > .lieferscheindruck-gruppe { min-height: 44px; display: flex; align-items: center; gap: 0.55rem; }
html:not([data-geraet="desktop"]) .kunden-vorauswahl-werte:has(> .card-empty) { min-height: 0; }
html:not([data-geraet="desktop"]) .kunden-vorauswahl-werte > .card-empty { margin: 0; padding: 0.6rem 0.5rem; }

/* Listen: Zeilen 44 px, Schrift wie im Rest der mobilen Seiten; Auswahllisten etwas höher als am PC-Fenster. */
html[data-touch] :is(.belegdruck, .jobmanager) .widget-tabelle { font-size: 0.95rem; }
html[data-touch] .belegdruck .rechnungsdruck-tabelle .widget-tabelle:not(.karten-tabelle) td,
html[data-geraet="tablet"] .belegdruck .rechnungsdruck-tabelle .widget-tabelle td { padding-block: 0.65rem; }
html[data-geraet="handy"] .rechnungsdruck-tabelle td { overflow-wrap: anywhere; }
html:not([data-geraet="desktop"]) .rechnungsdruck-tabelle { max-height: min(55dvh, 26rem); }
html:not([data-geraet="desktop"]) .rechnungsdruck-einzel > .kunden-vorauswahl { grid-column: 1 / -1; }
html:not([data-geraet="desktop"]) .rechnungsdruck-pfeile .btn { min-width: 4rem; justify-content: center; }
html:not([data-geraet="desktop"]) .jobmanager-protokoll { max-height: none; overflow-y: visible; }
html[data-geraet="handy"] .jobmanager-editor { padding: 0; }
/* „Gewählt“ bzw. „Zum Nachdruck“ (kurz, auf dem Handy als Karten) ohne eigenen Scrollbalken. */
html:not([data-geraet="desktop"]) :is(.rechnungsdruck-einzel, .rechnungsnachdruck-auswaehlen) > .rechnungsdruck-liste:last-child > .rechnungsdruck-tabelle { max-height: none; overflow-y: visible; }
/* Kopf einer Liste (Suche, alle/keine/Übernehmen): auf dem Handy über die ganze Breite, Knöpfe zu zweit. */
html[data-geraet="handy"] .rechnungsdruck-liste-kopf > :is(.belegdruck-aktionen, .form-input) { flex: 1 1 100%; max-width: none; justify-content: stretch; }
html[data-geraet="handy"] .rechnungsdruck-liste-kopf > .belegdruck-aktionen > .btn { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }
html[data-geraet="handy"] .rechnungsdruck-liste-kopf > .btn { flex: 1 1 100%; justify-content: center; }


/* Druckknöpfe: auf dem Handy unter dem Titel, je zwei nebeneinander über die ganze Breite. */
html[data-geraet="handy"] .verwaltung-kopf > .belegdruck-aktionen { flex: 1 1 100%; justify-content: stretch; }
html[data-geraet="handy"] .verwaltung-kopf > .belegdruck-aktionen > .btn { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }
html[data-geraet="handy"] .verwaltung-kopf > .belegdruck-aktionen > :is(.widget-eintrag, .form-input) { flex: 1 1 100%; max-width: none; }
html[data-geraet="handy"] .rechnungslauf-bestaetigen .belegdruck-aktionen > .btn { flex: 1 1 auto; justify-content: center; }
/* Tablet: der Haken „Anzahl Ausdrucke …“ in eigener Zeile, damit die vier Knöpfe nebeneinander bleiben. */
html[data-geraet="tablet"] .verwaltung-kopf > .belegdruck-aktionen:has(> .widget-eintrag) { flex: 1 1 100%; }
html[data-geraet="tablet"] .verwaltung-kopf > .belegdruck-aktionen > .widget-eintrag { flex: 1 1 100%; justify-content: flex-end; }
html[data-geraet="handy"] .lieferscheindruck-nachlauf { padding-inline: 0; }
html[data-geraet="handy"] .fortschritt { padding-inline: 0; }

/* Breite Listen auf dem Handy als Karten (karten-tabelle wie die Verwaltungslisten oben, Beschriftung aus js/geraet.js).
   karten-kompakt: Zellen nebeneinander, beschriftet nur karte-label, karte-zusatz in eigener Zeile - für lange Auswahllisten,
   damit jede Zeile kurz bleibt. */
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > :is(tbody, tfoot) > tr { gap: 0.15rem 0.6rem; padding: 0.55rem 0.5rem; min-height: 44px; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tbody > tr > td { flex: 0 1 auto; width: auto; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tbody > tr > td:is(.karte-label, .zahl, .ls-nr) { flex: 0 0 auto; white-space: nowrap; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tbody > tr > td:nth-child(2):not(.karte-label, .zahl, .ls-nr, .karte-zusatz) { flex: 1 1 9rem; min-width: 0; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tbody > tr:not(:has(> .karte-titel)) > td:first-child { flex: 0 0 auto; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tbody > tr > td[data-label]:not(.karte-label)::before { content: none; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tbody > tr > td:last-child[data-label=""]:not(:first-child) { order: 4; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tbody > tr > td.karte-zusatz { order: 5; flex: 1 1 100%; font-size: 0.88rem; color: var(--text-secondary); }
html[data-geraet="handy"] .karten-tabelle > tbody > tr:not(:has(> .karte-titel)) > td.card-empty:first-child { flex: 1 1 100%; text-align: center; font-size: 0.9rem; font-weight: 400; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tfoot { display: block; width: 100%; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tfoot > tr { display: flex; flex-wrap: wrap; justify-content: space-between; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tfoot > tr > td { display: block; padding: 0; border: 0; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt > tfoot > tr > td:empty { display: none; }
/* Angetippte bzw. gewählte Zeile als ganze Karte markieren, nicht Zelle für Zelle. */
html[data-geraet="handy"] .karten-tabelle > tbody > tr:is(.aktiv, .jobmanager-gewaehlt) { background: color-mix(in srgb, var(--color-primary) 16%, transparent); border-radius: var(--radius-main); }
html[data-geraet="handy"] .karten-tabelle > tbody > tr:is(.aktiv, .jobmanager-gewaehlt, .rechnungsdruck-zeile) > td { background: none; }
/* Lieferscheindruck „Gewählt“: oben Nummer, Name, Entfernen; darunter die Lieferungen als Kästchen zum Antippen. */
html[data-geraet="handy"] .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td:nth-child(2) { order: 2; flex: 1 1 0; min-width: 0; font-weight: 600; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td:last-child[data-label=""]:not(:first-child) { order: 3; }
html[data-geraet="handy"] .karten-tabelle.lieferscheindruck-gewaehlt > tbody > tr::after { content: ""; order: 4; flex: 1 1 100%; height: 0; }
html[data-geraet="handy"] .karten-tabelle.lieferscheindruck-gewaehlt > tbody > tr > td.lieferscheindruck-lfg { order: 5; width: auto; padding: 0; }
.lieferscheindruck-lfg-nr { display: none; }
html[data-geraet="handy"] .lieferscheindruck-lfg-haken { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 3.1rem; min-height: 44px;
  padding: 0 0.5rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); cursor: pointer; }
html[data-geraet="handy"] .lieferscheindruck-lfg-haken:has(> input:checked) { background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
html[data-geraet="handy"] .lieferscheindruck-lfg-nr { display: inline; font-variant-numeric: tabular-nums; }

/* Vorschau auf dem Handy im Vollbild (wie die großen Dialoge). */
html[data-geraet="handy"] .belegdruck-vorschau-rahmen { inset: 0; }
html[data-geraet="handy"] .belegdruck-vorschau { border-radius: 0; border: 0; padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); }
html[data-geraet="handy"] .belegdruck-vorschau > .verwaltung-kopf { flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
html[data-geraet="handy"] .belegdruck-vorschau > .verwaltung-kopf > h2 { min-width: 0; font-size: 1.02rem; }
/* Mobil-Korrekturen 19.10.2026: Druckvorschau. Das A4-Blatt passt js/export.js allein auf die Breite ein (vorher zusätzlich
   ein zoom hier - doppelt verkleinert, nur noch briefmarkengroß oben links). Werkzeuge der Vorschau (VorschauZoom: Zoom mit
   Prozentanzeige und Drucken) seit 06.11.2026 auf allen Geräten, rechts in der Kopfzeile neben „Schließen“. */
.vorschau-zoom { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.1rem; }
.belegdruck-vorschau > .card-header > .vorschau-zoom { margin-left: auto; }
.belegdruck-vorschau > .card-header:has(> .vorschau-zoom) > h2 { margin-right: 0; }
.vorschau-zoom-knopf { display: inline-flex; align-items: center; justify-content: center; }
.vorschau-zoom-knopf:hover:not(:disabled) { color: var(--color-primary); }
.vorschau-zoom-knopf:disabled { opacity: 0.45; cursor: default; }
.vorschau-drucken-rahmen { display: inline-flex; margin-left: 0.35rem; }
.vorschau-zusatz { margin-right: 0.35rem; }
.vorschau-zoom-stufe { min-width: 3.4em; text-align: center; font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vorschau-zoom-stufe:empty { visibility: hidden; }
/* Handy: Titel und Schließen oben, die Werkzeuge darunter rechts – in einer Zeile blieben dem Titel nur wenige Pixel. Im Popup mit
   Blättern teilen sich Blättern und Werkzeuge die zweite Zeile; die Prozentzahl fällt dort weg, damit beides nebeneinander passt. */
html[data-geraet="handy"] .belegdruck-vorschau > .card-header:has(> .vorschau-zoom) { flex-wrap: wrap; row-gap: 0.15rem; }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header:has(> .vorschau-zoom) > h2 { flex: 1 1 calc(100% - 3.5rem); order: 0; }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header:has(> .vorschau-zoom) > .btn-icon { order: 1; }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header:has(> .vorschau-zoom) > .druckvorschau-blaettern { order: 2; flex: 1 1 6rem; }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header > .vorschau-zoom { order: 3; gap: 0; }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header:has(> .druckvorschau-blaettern) .vorschau-zoom-stufe { display: none; }
html[data-geraet="handy"] .vorschau-drucken-rahmen { margin-left: 0.15rem; }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header { gap: 0.25rem; }
html[data-geraet="handy"] .belegdruck-vorschau > .card-header .belegdruck-aktionen { flex-wrap: nowrap; }
html:not([data-geraet="desktop"]) .belegdruck-vorschau { overflow: hidden; }
/* Berichtsdesigner auf Handy und Tablet (seit 23.10.2026, vorher nur das Handy untereinander): Bausteine als Leiste über dem
   Blatt, Seiteneinstellungen aufklappbar, Eigenschaften des gewählten Bausteins als Schublade von unten - auf dem Tablet quer als
   Spalte rechts. Vorher klebte die Bausteinspalte (sticky) über den darunter liegenden Eigenschaften und verdeckte sie.
   Ziehen gibt es mit dem Finger nicht: Antippen hängt an, Pfeile in den Eigenschaften verschieben (Models/BerichtLayout). */
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche { grid-template-columns: minmax(0, 1fr); }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche > * { grid-column: 1; grid-row: auto; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) :is(.bericht-palette, .bericht-eigenschaften) { position: static !important; max-height: none; overflow: visible; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-tisch { padding: 0.6rem; min-height: 0; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-zeile-griff { display: none; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-nur-desktop { display: none; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) p.bericht-nur-mobil { display: block; margin: 0; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-palette { gap: 0.45rem; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-palette-liste {
  flex-direction: row; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.25rem; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-palette-baustein {
  flex: 0 0 auto; min-height: 44px; white-space: nowrap; scroll-snap-align: start; cursor: pointer;
}
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-seite-knopf { display: inline-flex; align-self: flex-start; min-height: 44px; gap: 0.45rem; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche:not(.seite-offen) .bericht-seite-einstellungen { display: none; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche:not(.mit-auswahl) > .bericht-eigenschaften { display: none; }
/* Schublade: unten über die ganze Breite, eigener Scrollbereich, Kopf mit „Fertig“ bleibt stehen; das Blatt bekommt unten Platz,
   damit sich auch die letzten Bausteine über die Schublade schieben lassen. */
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche.mit-auswahl > .bericht-eigenschaften {
  position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 45; max-height: 52vh; max-height: 52dvh; overflow-y: auto;
  overscroll-behavior: contain; margin: 0; border-radius: 16px 16px 0 0; background: var(--popup-bg);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28); padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
}
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche.mit-auswahl > .bericht-tisch { padding-bottom: 54vh; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-eigenschaften-kopf {
  position: sticky; top: 0; z-index: 2; background: var(--popup-bg); padding: 0.7rem 1rem 0.5rem; margin: 0 -1rem;
}
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-eigenschaften-kopf > .widget-menue-titel { margin: 0; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-eigenschaften-zu { display: inline-flex; min-height: 44px; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-verschieben { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Touch-Ziele 44 px. */
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) :is(.bericht-verschieben, .bericht-schriftstil, .bericht-knoepfe) .btn { min-width: 44px; min-height: 44px; justify-content: center; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .statistik-umschalter button { min-height: 44px; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .widget-eintrag { min-height: 44px; padding-inline: 0.2rem; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-farbwahl { gap: 0.4rem; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-farbfeld { width: 44px; height: 44px; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-farbfeld-ohne { width: auto; min-width: 44px; padding: 0 0.8rem; }
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) .bericht-farbe-frei input[type=color] { width: 52px; height: 44px; }
/* Kopf: Name über die ganze Breite, Knöpfe 44 px hoch und gleich verteilt (Handy). */
html:not([data-geraet="desktop"]) .bericht-designer:not(.formular-designer) > .statistik-kopf .btn { min-height: 44px; }
html[data-geraet="handy"] .bericht-designer:not(.formular-designer) > .statistik-kopf { flex-wrap: wrap; }
html[data-geraet="handy"] .bericht-designer:not(.formular-designer) > .statistik-kopf > .bericht-name { flex: 1 1 100%; min-width: 0; order: -1; }
html[data-geraet="handy"] .bericht-designer:not(.formular-designer) .statistik-vorlagen { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
html[data-geraet="handy"] .bericht-designer:not(.formular-designer) .statistik-vorlagen > .btn { flex: 1 1 calc(33% - 0.5rem); justify-content: center; }
/* Tablet quer: Platz für Blatt und Eigenschaften nebeneinander - Bausteine oben, Eigenschaften als Spalte rechts (auch ohne Auswahl
   mit dem Hinweis wie am PC). */
@media (min-width: 1000px) {
  html[data-geraet="tablet"] .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche { grid-template-columns: minmax(0, 1fr) 20rem; }
  html[data-geraet="tablet"] .bericht-designer:not(.formular-designer) .bericht-arbeitsflaeche > .bericht-palette { grid-column: 1 / -1; grid-row: 1; }
  html[data-geraet="tablet"] .bericht-designer:not(.formular-designer) :is(.bericht-arbeitsflaeche, .bericht-arbeitsflaeche.mit-auswahl) > .bericht-tisch { grid-column: 1; grid-row: 2; padding-bottom: 0.6rem; }
  html[data-geraet="tablet"] .bericht-designer:not(.formular-designer) :is(.bericht-arbeitsflaeche:not(.mit-auswahl), .bericht-arbeitsflaeche.mit-auswahl) > .bericht-eigenschaften {
    display: flex; grid-column: 2; grid-row: 2; position: sticky !important; top: calc(var(--kopf-hoehe) + 0.75rem); left: auto; right: auto; bottom: auto;
    z-index: 1; max-height: calc(100vh - var(--kopf-hoehe) - 1.5rem); overflow-y: auto; border-radius: var(--radius-main);
    box-shadow: none; background: var(--popup-bg); padding: 0 1rem 1rem;
  }
}

/* Formulardesigner: Spalten nicht kleben lassen (am PC sticky mit eigener Höhe - auf Handy und Tablet schob sich das Blatt
   darüber), Blatt auf die Breite verkleinert, Bausteine und Knöpfe 44 px. */
html:not([data-geraet="desktop"]) .formular-designer :is(.bericht-palette, .bericht-eigenschaften) { position: static; max-height: none; overflow: visible; }
html:not([data-geraet="desktop"]) .formular-designer .bericht-tisch { padding: 0.75rem; min-height: 0; }
html:not([data-geraet="desktop"]) .formular-designer .formular-raender .form-input { padding-inline: 0.45rem; min-width: 0; }
html[data-touch] .formular-designer .bericht-palette-baustein { min-height: 44px; }
html[data-touch] .formular-designer .formular-knoepfe .btn:has(> i:only-child) { min-width: 44px; justify-content: center; }
html[data-geraet="handy"] .formular-designer > .statistik-kopf > .bericht-name { flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .formular-designer > .statistik-kopf > .btn { flex: 1 1 calc(50% - 0.75rem); justify-content: center; }
html[data-geraet="handy"] .formular-designer .statistik-vorlagen { margin-left: 0; flex: 1 1 100%; }
html[data-geraet="handy"] .formular-designer .statistik-vorlagen > .btn { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }
html[data-geraet="handy"] .formular-designer .bericht-papier { zoom: 0.37; }
@media (min-width: 390px) { html[data-geraet="handy"] .formular-designer .bericht-papier { zoom: 0.41; } }
@media (min-width: 420px) { html[data-geraet="handy"] .formular-designer .bericht-papier { zoom: 0.45; } }
@media (min-width: 480px) { html[data-geraet="handy"] .formular-designer .bericht-papier { zoom: 0.52; } }
@media (max-width: 1000px) { html[data-geraet="tablet"] .formular-designer .bericht-papier { zoom: 0.88; } }
@media (min-width: 1000px) {
  html[data-geraet="tablet"] .formular-designer .bericht-arbeitsflaeche { grid-template-columns: 16rem minmax(0, 1fr); }
  html[data-geraet="tablet"] .formular-designer .bericht-papier { zoom: 0.75; }
}

/* Umsatzanalyse und -prognose (seit 18.10.2026): Zeit als Spalten, aktuell (gelblich) und Prognose (Primärfarbe) getönt. */
/* Bedienbausteine im Kopf (seit 30.10.2026): Artikel und Filialen breit genug für Nummer und Name, das Datum mit Wochentag ungequetscht. */
.umsatzanalyse .ua-artikel, .umsatzanalyse .ua-filialen { flex: 1 1 18rem; max-width: 28rem; }
.umsatzanalyse .ua-stichtag .datum-wahl > .datum-feld, .job-starttag .datum-wahl > .datum-feld { flex: 0 0 10.5rem; }
.ua-einstellungen { margin-top: 0.5rem; }
.ua-einstellungen > summary { cursor: pointer; font-weight: 600; }
.ua-wrap { overflow-x: auto; }
.ua-tabelle th, .ua-tabelle td { white-space: nowrap; }
.ua-tabelle .ua-zeile { position: sticky; left: 0; z-index: 1; background: var(--popup-bg, var(--surface)); text-align: left; }
.ua-tabelle .ua-aktuell { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.ua-tabelle .ua-prognose { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.ua-tabelle tr.ua-ebene-0 td { font-weight: 700; }
.ua-tabelle tr.ua-ebene-1 td.ua-zeile { padding-left: 1rem; }
.ua-tabelle tr.ua-ebene-2 td.ua-zeile { padding-left: 2rem; }
html[data-geraet="handy"] .ua-tabelle { font-size: 0.8rem; }
html[data-geraet="handy"] .ua-tabelle .ua-zeile { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }

/* Filialanalyse (seit 19.10.2026): Auswahl oben, Bericht als Kacheln und Abschnittskarten; Ampel über --good/--warning/--critical. */
.fa-kopf-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; margin-right: auto; min-width: 0; max-width: 100%;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fa-kopf-text:disabled { cursor: default; }
.fa-kopf-filialen { display: flex; align-items: center; gap: 0.5rem; max-width: 100%; min-width: 0; font-size: 1.15rem; }
.fa-kopf-filialen > i { color: var(--color-primary); }
.fa-kopf-filialen > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-kopf-text:hover:not(:disabled) .fa-kopf-filialen > span { color: var(--color-primary); }
.fa-kopf-zeitraum { font-size: 0.9rem; color: var(--text-secondary); }
.fa-kopf-knoepfe > :is(.fa-erstellen, .fa-abbrechen) { padding: 0.5rem 1rem; gap: 0.45rem; white-space: nowrap; }
/* Filterpanel (seit 23.10.2026, wie im Dashboard): Filialen, Zeitraum, Vergleich und Richtwerte nebeneinander, so viele wie passen -
   die festen Spalten des Dashboards (dort drei Gruppen und ein Knopf) gelten hier nicht. Vier Spalten erst ab 1400 px Panelbreite, sonst
   zwei (Tablet quer): schmaler würden die Vergleichsauswahl abgeschnitten und die Richtwert-Beschriftungen umbrechen. Die beiden
   Richtwerte stehen untereinander, wenn ihre Spalte für zwei nicht reicht. */
.fa-filterpanel { container: fa-filter / inline-size; }
.fa-filter-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container fa-filter (min-width: 1400px) { .fa-filter-gruppen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1.1fr); } }
@container fa-filter (max-width: 560px) { .fa-filter-gruppen { grid-template-columns: minmax(0, 1fr); } }
.fa-richtwerte .filter-gruppe-zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.fa-filter-gruppen.filter-gruppen > .filter-gruppe:nth-child(n) { grid-column: auto; }
.fa-filter-info { margin: 0; font-size: 0.8rem; }
.fa-vergleich-daten { display: flex; align-items: center; min-height: 2.6rem; padding-block: 0.4rem; }
.fa-vergleich-daten.aus { opacity: 0.45; }
.fa-richtwerte .fa-zahl { width: 100%; }
.fa-fortschritt { display: flex; align-items: center; gap: 0.6rem; color: var(--text-secondary); }
.fa-leer { display: flex; align-items: center; gap: 1rem; color: var(--text-secondary); }
.fa-leer > i { font-size: 2rem; color: color-mix(in srgb, var(--color-primary) 70%, var(--text-secondary)); }
.fa-leer p { margin: 0; }
.fa-ergebnis-kopf { display: flex; flex-direction: column; gap: 0.6rem; }
.fa-reiter > button { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-bericht { display: flex; flex-direction: column; gap: 0.75rem; }
/* „Auf einen Blick“: Kennzahl-Kacheln wie im Dashboard (KennzahlKachel, .metric-*), die Ampel steckt in der Farbe des Symbols. */
.fa-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.fa-zusammenfassung h3, .fa-abschnitt h3 { margin: 0 0 0.4rem; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.fa-bericht ul { margin: 0.2rem 0 0.4rem; padding-left: 1.3rem; }
.fa-bericht li { margin: 0.2rem 0; }
.fa-abschnitt h4, .fa-fazit-spalte h4, .fa-hinweise h4, .fa-empfehlungen h4 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.fa-diagramme { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0.6rem 0; }
.fa-diagramme-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-diagramm { margin: 0; min-width: 0; background: var(--surface-faint); }
.fa-diagramm figcaption h4 { margin: 0; }
.fa-diagramm-flaeche { position: relative; height: 300px; margin-top: 0.5rem; min-width: 0; }
.fa-diagramm-streuung .fa-diagramm-flaeche { height: 360px; }
.fa-tabelle { margin: 0.6rem 0; }
.fa-tabelle .widget-tabelle-wrap { overflow-x: auto; max-height: none; }
.fa-tabelle-inhalt td { white-space: nowrap; }
.fa-tabelle-inhalt td:first-child { white-space: normal; }
.fa-tabelle-inhalt tr.fa-zeile > td:first-child { box-shadow: inset 4px 0 0 var(--border-soft); padding-left: 0.8rem; }
.fa-tabelle-inhalt tr.fa-gut > td:first-child { box-shadow: inset 4px 0 0 var(--good); }
.fa-tabelle-inhalt tr.fa-mittel > td:first-child { box-shadow: inset 4px 0 0 var(--warning); }
.fa-tabelle-inhalt tr.fa-schlecht > td:first-child { box-shadow: inset 4px 0 0 var(--critical); }
.fa-empfehlungen { margin: 0.6rem 0 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-left: 4px solid var(--color-primary); }
.fa-empfehlungen h4 { color: var(--color-primary); }
.fa-methodik { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.fa-methodik > summary { cursor: pointer; padding: 0.3rem 0; }
.fa-methodik p { margin: 0.2rem 0 0; }
.fa-fazit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.fa-fazit-spalte { border-top: 3px solid var(--border-soft); padding-top: 0.4rem; min-width: 0; }
.fa-fazit-spalte.fa-gut { border-top-color: var(--good); }
.fa-fazit-spalte.fa-schlecht { border-top-color: var(--critical); }
.fa-fazit-spalte.fa-tun { border-top-color: var(--color-primary); }
.fa-hinweise { padding: 0.6rem 0.9rem; border-radius: var(--radius-main); font-size: 0.88rem;
  background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--warning) 55%, transparent); }
/* Tablet: Diagramme untereinander, wenn es eng wird; Handy: Kacheln zu zweit, Fazit untereinander, Knöpfe fingergroß. */
html[data-geraet="tablet"] .fa-diagramme-zwei { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { html[data-geraet="tablet"] .fa-diagramme-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-geraet="tablet"] .fa-fazit { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { html[data-geraet="tablet"] .fa-fazit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html[data-geraet="handy"] .fa-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
html[data-geraet="handy"] .fa-kacheln .metric-card { padding: 0.6rem 0.7rem; }
html[data-geraet="handy"] .fa-kacheln .metric-kopf .metric-icon { height: 2.1rem; width: 2.1rem; font-size: 0.9rem; margin-left: 0.4rem; }
html[data-geraet="handy"] .fa-kacheln .metric-title { font-size: 0.82rem; }
html[data-geraet="handy"] .fa-kacheln .metric-vergleich { font-size: 0.8rem; gap: 0.25rem 0.4rem; }
html[data-geraet="handy"] .fa-kacheln .metric-delta { font-size: 0.8rem; padding: 0.1rem 0.45rem; }
html[data-geraet="handy"] .fa-diagramme-zwei, html[data-geraet="handy"] .fa-fazit { grid-template-columns: minmax(0, 1fr); }
html[data-geraet="handy"] .fa-diagramm { padding: 0.6rem 0.5rem; }
html[data-geraet="handy"] .fa-diagramm-flaeche { height: 250px; }
html[data-geraet="handy"] .fa-diagramm-streuung .fa-diagramm-flaeche { height: 320px; }
/* Kopf auf Handy und Tablet hochkant wie im Dashboard: die Knöpfe in eigener Zeile, „Analyse erstellen“ nimmt den Rest. */
html[data-geraet="handy"] .fa-kopf { gap: 0.6rem; }
html[data-geraet="handy"] .fa-kopf > :is(.fa-kopf-text, .fa-kopf-knoepfe) { flex: 1 1 100%; }
html[data-geraet="handy"] .fa-kopf-filialen { font-size: 1.05rem; }
html[data-geraet="handy"] .fa-kopf-knoepfe > :is(.fa-erstellen, .fa-abbrechen) { flex: 1 1 auto; justify-content: center; }
@media (orientation: portrait) {
  html[data-geraet="tablet"] .fa-kopf-knoepfe > :is(.fa-erstellen, .fa-abbrechen) { flex: 1 1 auto; justify-content: center; }
}
html[data-geraet="handy"] .fa-ergebnis-kopf .verwaltung-kopf .belegdruck-aktionen { width: 100%; justify-content: stretch; }
html[data-geraet="handy"] .fa-ergebnis-kopf .verwaltung-kopf .belegdruck-aktionen .btn { flex: 1 1 0; }
html[data-geraet="handy"] .fa-reiter { flex-wrap: nowrap; overflow-x: auto; }
html[data-geraet="handy"] .fa-reiter > button { flex: 0 0 auto; max-width: 14rem; }
html[data-touch] .fa-kopf :is(.btn, .fa-kopf-text), html[data-touch] .fa-filterpanel :is(.form-input, select, input, .filter-readonly-value),
html[data-touch] .fa-ergebnis-kopf .btn, html[data-touch] .fa-reiter > button, html[data-touch] .fa-methodik > summary { min-height: 44px; }
html[data-touch] .fa-filterpanel :is(.form-input, select, input) { font-size: 16px; }
html[data-touch] .fa-methodik > summary { padding: 0.55rem 0; }
/* Seit 19.10.2026: Hinweis vor dem Start (Zeitraum, zu viele Filialtage) und lange Tabellen auf dem Handy eingeklappt -
   am PC sind alle Zeilen da und der Knopf fehlt. */
.fa-grenze { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.5rem 0.75rem; border-radius: var(--radius-main);
  color: var(--text-primary); background: color-mix(in srgb, var(--warning) 14%, transparent); border-left: 4px solid var(--warning); }
.fa-grenze > i { color: var(--warning); margin-top: 0.2rem; }
.fa-mehr-knopf { display: none; }
html[data-geraet="handy"] .fa-tabelle-zu .fa-tabelle-inhalt > tbody > tr.fa-zeile-mehr { display: none; }
html[data-geraet="handy"] .fa-tabelle-zu .fa-mehr-knopf { display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; min-height: 44px; margin-top: 0.4rem; }

/* Mobil-Korrekturen 19.10.2026: Artikelsuche über der Bildschirmtastatur, Mengenhinweise nicht stapeln */
/* Artikelsuche ("+"): nur so hoch wie der sichtbare Bereich über der Tastatur (--vv-hoehe/--vv-oben aus js/geraet.js) -
   die Treffer scrollen darin, statt hinter der Tastatur zu liegen. */
html[data-touch] .modal-overlay:has(> .artikel-suche-dialog) { bottom: auto; top: var(--vv-oben, 0px); height: var(--vv-hoehe, 100%); }
html[data-touch] .modal-box.artikel-suche-dialog { max-height: min(70vh, 100%); }
html[data-geraet="handy"] .modal-box.artikel-suche-dialog { height: 100%; max-height: none; }
/* Suche in der Artikelliste: solange gesucht wird, ist unter dem Suchfeld mindestens ein Bildschirm Platz - so kann das
   Feld beim Antippen unter die Kopfzeile rücken (js/geraet.js) und die Treffer stehen darunter über der Tastatur, auch
   wenn nur wenige passen. */
html:not([data-geraet="desktop"]) .mobil-werkzeug:has(.mobil-suche:focus, .mobil-suche:not(:placeholder-shown)) + .mobil-rahmen {
  min-height: calc(100dvh - var(--kopf-hoehe)); }
/* Hinweise auf dem Handy: höchstens die zwei neuesten (quer nur einer) - die übrigen laufen unsichtbar ab, statt die
   Liste zu verdecken. Fehler bleiben immer sichtbar. */
html[data-geraet="handy"] .hinweis:not(.fehler):nth-last-child(n+3) { display: none; }
/* Handy quer: nur einer, links über den Artikelnamen - rechts liegen −/+ und die Menge, die man gerade drückt. */
@media (max-height: 500px) {
  html[data-geraet="handy"] .hinweis:not(.fehler):nth-last-child(n+2) { display: none; }
  html[data-geraet="handy"] .hinweise { right: auto; width: min(24rem, 48vw); margin-left: 0; }
  /* Mit Tastatur bleibt quer kaum Höhe: beim Suchen klebt die Kopfzeile nicht, die Suche rückt ganz nach oben. */
  html[data-geraet="handy"] body:has(.mobil-suche:focus) .topbar { position: relative; }
  html[data-geraet="handy"] body:has(.mobil-suche:focus) .mobil-werkzeug { top: 0; }
}

/* Mobil-Korrekturen 19.10.2026: Benutzerlisten - Vorauswahl nach Rolle und Benutzergruppe (BenutzerFilterLeiste) in
   Benutzer, Benutzergruppen, Rechte vergeben und Anmeldezeiten; die Benutzerliste auf Handy und Tablet als kompakte
   Karten ohne eigenen Scrollbereich. */
.benutzer-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.benutzer-filter-suche { position: relative; flex: 1 1 16rem; max-width: 26rem; min-width: 0; }
.benutzer-filter-suche > i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--icon-muted); font-size: 0.85rem; pointer-events: none; }
.benutzer-filter-suche > .form-input { padding-left: 2.1rem; margin-bottom: 0; font-family: inherit; }
.benutzer-filter > select.form-input { flex: 0 1 14rem; width: auto; max-width: 240px; min-width: 0; margin-bottom: 0; }
.benutzer-filter > select.form-input.gesetzt { border-color: var(--color-primary); }
.benutzer-filter-anzahl { color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; }
.benutzer-filter > .widget-eintrag { margin: 0; white-space: nowrap; }
.benutzer-filter-leer { padding: 0.75rem 0; }
.benutzer-mail-unter, .benutzer-letzte-titel { display: none; }

html:not([data-geraet="desktop"]) .benutzer-filter-suche { flex: 1 1 10rem; max-width: none; order: 1; }
html:not([data-geraet="desktop"]) .benutzer-filter > :is(.benutzer-filter-anzahl, .benutzer-filter-weg) { order: 1; }
html:not([data-geraet="desktop"]) .benutzer-filter > select.form-input { order: 2; flex: 1 1 8rem; max-width: none; }
html:not([data-geraet="desktop"]) .benutzer-filter > .widget-eintrag { order: 3; }
html[data-touch] .benutzer-filter > select.form-input, html[data-touch] .benutzer-filter-suche > .form-input { min-height: 44px; }
html[data-touch] .benutzer-filter-weg { min-width: 44px; justify-content: center; }

/* Zugeklappte Karten oben schmal - die Liste darunter bekommt den Platz. */
html:not([data-geraet="desktop"]) .benutzer-seite { gap: 0.5rem; }
html:not([data-geraet="desktop"]) .benutzer-seite > .mobil-klapp:not(.auf) { padding: 0.3rem 0.5rem 0.35rem 0.85rem; }
html:not([data-geraet="desktop"]) .benutzer-seite > .mobil-klapp > .card-header > h2 { font-size: 1rem; }
html:not([data-geraet="desktop"]) .benutzer-seite > .mobil-klapp:not(.auf) .mobil-klapp-kurz { font-size: 0.82rem; margin-top: -0.35rem; }
/* Kopf der Liste: auf dem Handy ohne Erklärtext, "Neuer Benutzer" nur als Symbol neben dem Titel. */
html[data-geraet="handy"] .benutzer-liste > .verwaltung-kopf { flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
html[data-geraet="handy"] .benutzer-liste > .verwaltung-kopf .card-subtitle { display: none; }
html[data-geraet="handy"] .benutzer-liste .benutzer-neu { flex: 0 0 auto; font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; }
html[data-geraet="handy"] .benutzer-liste .benutzer-neu > i { font-size: 1rem; }
/* Ein Scrollbalken: kein eigener (auch kein waagrechter) Scrollbereich um die Karten - sonst fängt er Wischgesten ab. */
html:not([data-geraet="desktop"]) .benutzer-liste > .widget-tabelle-wrap,
html:not([data-geraet="desktop"]) .benutzer-tabelle { overflow: visible; }
/* Karten (Handy und Tablet): Bild, Name mit E-Mail darunter und Knöpfe oben, darunter alle Chips (Rollen, Gruppen,
   Filialen, Lizenz, Status) als ein Fluss - die Zellen sind dafür display: contents -, zuletzt die letzte Anmeldung.
   Ohne Beschriftung davor, die Chips sprechen für sich. */
html:not([data-geraet="desktop"]) .benutzer-tabelle thead { display: none; }
html:not([data-geraet="desktop"]) .benutzer-tabelle,
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody { display: block; width: 100%; margin: 0; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.35rem; padding: 0.55rem 0.15rem; border-bottom: 1px solid var(--line-soft); }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td {
  display: block; order: 4; flex: 0 1 auto; min-width: 0; padding: 0; border: 0; white-space: normal; text-align: left; overflow-wrap: anywhere; font-size: 0.9rem; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td.karte-bild { order: 1; flex: 0 0 auto; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td.karte-titel { order: 1; flex: 1 1 0; font-size: 1rem; font-weight: 600; line-height: 1.25; }
html:not([data-geraet="desktop"]) .benutzer-tabelle .benutzer-mail-unter { display: block; font-size: 0.82rem; font-weight: 400; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td.benutzer-mail { display: none; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td.benutzer-knoepfe { order: 2; flex: 0 0 auto; margin-left: auto; display: flex; gap: 0.25rem; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td:is(.benutzer-rollen, .benutzer-lizenz, .benutzer-status) { display: contents; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td:is(.benutzer-rollen, .benutzer-lizenz, .benutzer-status) > * { order: 4; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td.benutzer-letzte { order: 5; margin-left: auto; font-size: 0.8rem; color: var(--text-secondary); }
html:not([data-geraet="desktop"]) .benutzer-tabelle .benutzer-letzte-titel { display: inline; }
html:not([data-geraet="desktop"]) .benutzer-tabelle > tbody > tr > td:empty { display: none; }
html:not([data-geraet="desktop"]) .benutzer-tabelle .chip { margin: 0; font-size: 0.8rem; }
html[data-geraet="handy"] .benutzer-tabelle.verwaltung-tabelle > tbody > tr > td[data-label][class]::before { content: none; }

/* Mobil-Korrekturen 19.10.2026: Uhrzeit- und Datumsfelder
   Uhrzeit (UhrzeitEingabe): auf Handy und Tablet ein Textfeld mit Zifferntastatur statt des Uhrzeitfelds des Browsers (Chrome auf
   Android lässt dort nur die Uhr zu); das Uhrzeitfeld bleibt unsichtbar für die Uhr hinter dem Knopf rechts (44 px).
   Von-Bis-Paare (Dashboard, Statistiken): auf dem Handy untereinander - nebeneinander war das Jahr abgeschnitten („202“). */
html[data-touch] .uhrzeit-feld { display: inline-flex; position: relative; width: 8rem; max-width: 100%; vertical-align: middle; }
html[data-touch] .uhrzeit-feld .uhrzeit-nativ { position: absolute; left: 0; bottom: 0; width: 1px !important; height: 1px; min-height: 0;
  opacity: 0; pointer-events: none; border: 0; padding: 0; }
html[data-touch] .uhrzeit-feld .uhrzeit-text { display: block; width: 100%; min-width: 0; padding-right: 2.9rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
html[data-touch] .uhrzeit-feld .uhrzeit-uhr { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 0;
  top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px; border: none; background: transparent;
  color: var(--text-secondary); border-radius: var(--radius-main); cursor: pointer; }
html[data-touch] .uhrzeit-feld .uhrzeit-uhr:disabled { opacity: 0.4; cursor: default; }
html[data-touch] :is(.filter-field, .bestellplan-sondertage td) > .uhrzeit-feld { width: 100%; }
html[data-geraet="handy"] .belegdruck-felder .uhrzeit-feld { width: 100%; }
@keyframes uhrzeit-ungueltig { from, 55% { color: var(--error-strong); } to { color: var(--text-primary); } }
.uhrzeit-feld .uhrzeit-text.uhrzeit-ungueltig { animation: uhrzeit-ungueltig 1.6s ease-out; }
html[data-geraet="handy"] .filter-datum-paar { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
html[data-geraet="handy"] .filter-datum-paar > span:not(.datum-feld) { display: none; }
/* Mobil-Korrekturen 19.10.2026: Nachbesserungen nach Review und Gegenprobe */
/* Anmeldezeiten: auf dem Handy (Karten ohne Tabellenkopf) "alle sichtbaren wählen" in der Filterleiste; Haken größer. */
.anmeldezeiten-alle { display: none; }
html[data-geraet="handy"] .benutzer-filter > .anmeldezeiten-alle { display: inline-flex; align-items: center; min-height: 44px; }
/* Die Kästchen in der Tabelle selbst regelt seit 01.11.2026 der Block „Touch-Ziele“ (44 × 44 für alle Kästchen in Tabellenzellen). */
html[data-touch] .anmeldezeiten-alle input[type="checkbox"] { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
/* Menü "⋯" der Fußleiste (Erfassung): am Rand der Fußleiste statt am schmalen Knopf - sonst ragte es links aus dem Bildschirm. */
html:not([data-geraet="desktop"]) .mobil-fussleiste .bestell-mehr { position: static; }
html:not([data-geraet="desktop"]) .mobil-fussleiste .bestell-mehr-menue { left: 0.5rem; right: auto; max-width: calc(100% - 1rem); }
/* Dashboard-Kopf auf Handy und Tablet (seit 20.10.2026): auf dem Handy und dem Tablet hochkant die Knöpfe in einer eigenen
   Zeile unter der Begrüßung, "Dashboard" und "Filter" teilen sich die Breite, das Panel so breit wie die Zeile; quer wie am PC. */
html[data-touch] :is(.dashboard-kopf-knopf, .dashboard-aktualisieren) { min-height: 44px; }
html[data-touch] .dashboard-aktualisieren { min-width: 44px; justify-content: center; }
html[data-touch] .dashboard-panel :is(.widget-menue-eintrag, .btn) { min-height: 44px; }
html[data-touch] .dashboard-bearbeiten > :is(.btn, .dashboard-name) { min-height: 44px; }
html[data-touch] .dashboard-name { font-size: 16px; }
html[data-touch] .dashboard-bearbeiten-info { display: none; }
html[data-geraet="handy"] .dashboard-kopf { gap: 0.6rem; }
html[data-geraet="handy"] .dashboard-kopf > :is(.dashboard-gruss-text, .kunden-karte, .dashboard-kopf-knoepfe, .dashboard-bearbeiten) { flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .dashboard-kopf-knoepfe { gap: 0.4rem; }
html[data-geraet="handy"] .dashboard-wahl { position: static; flex: 1 1 0; }
html[data-geraet="handy"] .dashboard-wahl > .dashboard-kopf-knopf { flex: 1 1 auto; }
html[data-geraet="handy"] .dashboard-kopf-knopf { flex: 1 1 0; max-width: none; padding-inline: 0.6rem; }
html[data-geraet="handy"] .dashboard-kopf-wert { flex: 1 1 auto; text-align: left; }
html[data-geraet="handy"] :is(.dashboard-kopf-art, .dashboard-kopf-pfeil) { display: none; }
html[data-geraet="handy"] .dashboard-filter-knopf { flex: 0 0 auto; }
html[data-geraet="handy"] .dashboard-filter-knopf .dashboard-kopf-art { display: inline; }
html[data-geraet="handy"] .dashboard-panel { left: 0; right: 0; width: auto; max-width: none; }
html[data-geraet="handy"] .dashboard-bearbeiten { flex-wrap: wrap; row-gap: 0.4rem; border-radius: var(--radius-main); padding: 0.4rem; }
html[data-geraet="handy"] .dashboard-bearbeiten > .dashboard-name { flex: 1 1 100%; width: auto; min-width: 0; }
html[data-geraet="handy"] .dashboard-bearbeiten > .btn { flex: 1 1 0; justify-content: center; margin-left: 0; }
@media (orientation: portrait) {
  html[data-geraet="tablet"] .dashboard-kopf > :is(.dashboard-kopf-knoepfe, .dashboard-bearbeiten) { flex: 1 1 100%; min-width: 0; }
  html[data-geraet="tablet"] .dashboard-wahl { flex: 1 1 0; }
  html[data-geraet="tablet"] .dashboard-panel { left: 0; right: auto; }
  html[data-geraet="tablet"] .dashboard-wahl > .dashboard-kopf-knopf { flex: 1 1 auto; }
  html[data-geraet="tablet"] .dashboard-kopf-knopf { flex: 1 1 0; max-width: none; }
  html[data-geraet="tablet"] .dashboard-filter-knopf { flex: 0 0 auto; }
  html[data-geraet="tablet"] .dashboard-kopf-wert { flex: 1 1 auto; text-align: left; }
  html[data-geraet="tablet"] .dashboard-bearbeiten > .dashboard-name { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Mobil-Runde 2, 19.10.2026: Menü per Wischen (js/wischen.js). Auf Touch-Geräten kein Darüberfahren: die Wahl "hover"
   fehlt (sie gilt dort als "zu"), die eingeklappte Seitenleiste (Tablet quer) liegt fest über dem Inhalt und klappt per
   Wischen oder Menüknopf (data-menue-auf) darüber auf - der Inhalt bleibt stehen. */
.menue-knopf-leiste { display: none; }
html[data-touch] .menue-wahl-hover { display: none; }
@media (min-width: 1024px) {
  html[data-touch]:not([data-menue="offen"]) .menue-knopf-leiste { display: inline-flex; align-items: center; justify-content: center; }
  html[data-touch][data-menue="zu"] .sidebar { position: fixed; left: 0; top: 0; z-index: 70; background: var(--sidebar-bg); backdrop-filter: blur(10px); }
  html[data-touch][data-menue="zu"] .app-main { margin-left: 4rem; }
  html[data-touch][data-menue="zu"][data-menue-auf] .sidebar { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); }
  :root[data-grundton="light"][data-touch][data-menue="zu"] .sidebar { background: var(--popup-bg); }
  /* Meldungen nie unter der festen Leiste (seit 23.10.2026): sie liegt mit z-index 70 über den Seitenmeldungen (60) und deckte
     deren linken Rand samt Text ab. Die Meldungen beginnen rechts neben ihr (4rem Leiste + Rand). */
  html[data-touch][data-menue="zu"] :is(.hinweise, .bestell-meldung, .bestell-meldungen) { left: 4.75rem; }
  :root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"])[data-touch][data-menue="zu"] .sidebar { background: var(--seitenleiste); }
}
/* Schublade (Handy, Tablet hoch): beim Aufziehen vom Rand zunächst links außerhalb, dann folgt sie dem Finger. */
html[data-touch] .mobile-nav { touch-action: pan-y; will-change: transform; }
html[data-wischt] .mobile-nav { transform: translateX(-100%); }
html[data-wischt] .mobile-nav-backdrop { opacity: 0; }
/* Hell war die Schublade durchscheinend (--sidebar-bg mit Alpha) - der Inhalt stand lesbar dahinter. Deckend wie alles
   Schwebende; die farbigen Modi behalten ihre Leiste (stärkere Regel oben). */
:where(:root[data-grundton="light"]) .mobile-nav { background: var(--popup-bg); }
/* Mobil-Runde 3, 19.10.2026: Menü in den farbigen Modi. Die Regel darüber traf auch sie (Grundton hell) - die Schublade
   wurde weiß, die Schrift blieb weiß: auf Handy und Tablet hoch war nur der aktive Punkt zu sehen. Sie behalten ihre
   (deckende) Leistenfarbe wie die Seitenleiste. */
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) .mobile-nav { background: var(--seitenleiste); }
/* Mobil-Runde 2, 19.10.2026: Kunden- und Artikelauswahl, Such-Knopf */
/* Such-Knopf direkt am Feld (Suchfenster, Vorbestellung) - tut dasselbe wie Enter. */
.such-zeile { display: flex; align-items: stretch; }
.such-zeile > .form-input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.such-zeile > .such-knopf { flex: 0 0 auto; justify-content: center; padding: 0 0.8rem; margin-left: -1px;
  border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--text-secondary); }
.such-zeile > .such-knopf:hover { color: var(--color-primary); }
html[data-touch] .such-zeile > .such-knopf { min-width: 44px; min-height: 44px; }
/* Gemeinsames Suchfenster: die Liste zeichnet nur den sichtbaren Teil (Virtualize) - kein Flex-Abstand zwischen den
   Platzhaltern, darf schrumpfen, damit sie innen scrollt. */
.auswahl-such-zeile { margin-bottom: 0.75rem; }
.such-zeile > .modal-suchfeld { margin-bottom: 0; }
.auswahl-suche-liste { display: block; min-height: 0; }
.auswahl-suche-liste > .modal-treffer { margin-bottom: 0.15rem; }
.auswahl-aktuell .modal-treffer-name { font-weight: 600; }
/* Kundenwahl der Belegseiten: ein Knopf wie ein Feld, öffnet das Suchfenster. */
.kunden-wahl { display: flex; align-items: center; gap: 0.5rem; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.kunden-wahl:hover:not(:disabled) { border-color: var(--color-primary); }
.kunden-wahl:focus-visible { border-color: var(--color-primary); background: var(--surface-strong); }
.kunden-wahl:disabled { cursor: default; opacity: 0.7; }
.kunden-wahl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kunden-wahl-pfeil { flex: 0 0 auto; color: var(--icon-muted); font-size: 0.75rem; }
.filialauswahl-name .kunden-gesperrt { margin-right: 0.35rem; font-size: 0.8em; }
/* Handy und Tablet: Kundenfenster wie die Artikelsuche über der Bildschirmtastatur bzw. im Vollbild. */
html[data-touch] .kunden-wahl { font-size: max(16px, 0.85rem); min-height: 44px; }
/* Seit 23.10.2026 auch die Kassenwerte-Liste der Statistik - „Fertig“ bleibt über der Tastatur. */
html[data-touch] .modal-overlay:has(> .kunden-suche-dialog), html[data-touch] .modal-overlay:has(> .kassenwerte-wahl) {
  bottom: auto; top: var(--vv-oben, 0px); height: var(--vv-hoehe, 100%); }
html[data-touch] .modal-box.kunden-suche-dialog, html[data-touch] .modal-box.kassenwerte-wahl { max-height: min(80vh, 100%); }
html[data-geraet="handy"] .modal-box.kunden-suche-dialog, html[data-geraet="handy"] .modal-box.kassenwerte-wahl { height: 100%; max-height: none; }
html[data-touch] .kassenwerte-fuss .btn, html[data-touch] .statistik-kassenwerte, html[data-touch] button.statistik-formel-neu { min-height: 44px; }
.auswahl-suche-dialog:focus { outline: none; }
/* Mobil-Runde 2, 19.10.2026: Meine Geräte (Profil) zusammengefasst und Vorauswahl der Benutzerlisten */
.geraete-zusammenfassung { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 44px; padding: 0.4rem 0.25rem; margin-bottom: 0.4rem;
    background: none; border: 0; border-radius: var(--radius-main); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.geraete-zusammenfassung:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.geraete-zusammenfassung > i { color: var(--color-primary); width: 1rem; text-align: center; flex: 0 0 auto; }
.geraete-zusammenfassung-text { min-width: 0; }
.geraete-zusammenfassung-zeit { color: var(--text-secondary); }
.anmeldungen-einzeln-knopf { margin-top: 0.2rem; padding-left: 0; }
.anmeldung-einzeln > td:first-child { padding-left: 2rem; }
html[data-touch] .anmeldungen-einzeln-knopf { min-height: 44px; }
html[data-geraet="handy"] .anmeldungen-geraete > tbody > tr.anmeldung-einzeln { margin-left: 1rem; }
html[data-geraet="handy"] .anmeldungen-geraete > tbody > tr.anmeldung-einzeln > td:first-child { padding-left: 0; }
/* Handy: Rolle und Benutzergruppe untereinander in voller Breite - nebeneinander wurde "Alle Benutzergruppen" abgeschnitten. */
html[data-geraet="handy"] .benutzer-filter > select.form-input { flex: 1 1 100%; }
/* Tablet: oben Suche und Anzahl, darunter Rolle und Benutzergruppe je zur Hälfte - vorher stand die Rolle schmal neben der Suche
   („Alle Benutzergrupper“ abgeschnitten) bzw. die Gruppe allein in voller Breite darunter. */
html[data-geraet="tablet"] .benutzer-filter-suche { flex-basis: 60%; }
html[data-geraet="tablet"] .benutzer-filter > select.form-input { flex: 1 1 calc(50% - 4px); }

/* Mobil-Runde 2, 19.10.2026: Artikelansichten der Belegseiten (Liste/Gruppen × Bilder auf Handy und Tablet) */
/* Gruppen-Leiste mit dem Finger: 44 px hoch; über den Bildern mit Abstand zur ersten Kachel. */
html[data-touch] .beleg-tabelle-karte .mobil-chip { min-height: 44px; }
html:not([data-geraet="desktop"]) .beleg-kachel-leiste + .mobil-chips { margin: -0.2rem 0 0.6rem; }
.mobil-gruppen-hinweis { margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
html:not([data-geraet="desktop"]) .beleg-kachel-leiste + .mobil-gruppen-hinweis { margin: -0.2rem 0 0.6rem; }
/* Mobil-Runde 2, 19.10.2026: Statistik - Kopfzeile auf Handy/Tablet, Ergebnis als Diagramm */
/* Umschalter Tabelle / Balken / Säulen / Linie und die gezeichneten Werte über dem Ergebnis (alle Geräte). */
.statistik-ansicht-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0.35rem 0 0.5rem; }
.statistik-ansicht > button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.statistik-diagramm-hinweis { flex: 1 1 16rem; min-width: 0; }
/* Säulen und Linie füllen die Karte, liegende Balken bekommen ihre Höhe je Kategorie (Inline-Stil) und scrollen darin. */
.statistik-ergebnis > .statistik-diagramm-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.statistik-diagramm { position: relative; flex: 1 1 auto; min-height: 280px; min-width: 0; }
.statistik-diagramm[style*="height"] { flex: none; }
/* Desktop: mit Diagramm füllt die Karte den Platz bis zum Fensterrand (die Tabelle bestimmt ihre Höhe selbst). */
html[data-geraet="desktop"] .statistik-ergebnis.rest-hoehe:has(> .statistik-diagramm-wrap) { height: var(--rest-hoehe, auto); }
/* Handy und Tablet: die Seite scrollt (keine Rest-Höhe) - Säulen und Linie mit fester Höhe, nie höher als das Fenster. */
html:not([data-geraet="desktop"]) .statistik-ergebnis > .statistik-diagramm-wrap { flex: none; overflow: visible; }
html:not([data-geraet="desktop"]) .statistik-diagramm:not([style*="height"]) { flex: none; height: max(15rem, min(60vh, 32rem)); min-height: 0; }
html[data-touch] .statistik-ansicht > button { min-height: 44px; min-width: 44px; }
html[data-geraet="handy"] .statistik-ansicht-leiste > .statistik-ansicht { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 100%; }
html[data-geraet="handy"] .statistik-ansicht .statistik-ansicht-text { display: none; }
/* Ergebniskopf auf dem Handy: Exportknöpfe unter dem Titel in einer Reihe statt als schmale Säule daneben. */
html[data-geraet="handy"] .statistik-ergebnis > .widget-karte-kopf { flex-wrap: wrap; }
html[data-geraet="handy"] .statistik-ergebnis > .widget-karte-kopf > .statistik-export { flex: 1 1 100%; }

/* Kopfzeile (Bild 15 vom Handy): Formularauswahl über die volle Breite, die Liste wird schmaler statt die Symbole
   hinauszuschieben; "Auswahl", "Aufbau" und "Berechnen" brechen gleichmäßig um (hoch zwei Reihen, quer eine). */
html[data-touch] .statistik-vorlagen-leiste .filter-vorlagen-liste { min-height: 44px; }
html[data-geraet="handy"] .statistik-kopf-rechts { margin-left: 0; flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .statistik-kopf-rechts > :is(.statistik-vorlagen-leiste, .chip, .widget-export-meldung) { flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .statistik-vorlagen-leiste { flex-wrap: wrap; min-width: 0; }
html[data-geraet="handy"] .statistik-vorlagen-leiste .filter-vorlagen-liste { flex: 1 1 0; min-width: 6rem; max-width: none; margin-right: 0; }
html[data-geraet="handy"] .statistik-vorlagen-leiste .statistik-vorlagen-symbol { display: none; }
html[data-geraet="handy"] .statistik-vorlagen-leiste .filter-vorlagen-name { flex: 1 1 100%; width: auto; min-width: 0; }
html[data-geraet="handy"] .statistik-vorlagen-leiste .dashboard-wahl-frage { flex: 1 1 100%; }
/* Kopf der Boxen Auswahl/Aufbau: Titel und X in einer Zeile, die gespeicherten Vorlagen darunter. */
html[data-geraet="handy"] .statistik-box-kopf > .statistik-vorlagen-leiste { order: 3; flex: 1 1 100%; }

/* Mobil-Runde 2, 19.10.2026: Schönheitsfehler aus der Gegenprobe.
   Ansicht-Blatt auf dem Handy: Liste, Gruppen und Bilder in einer Zeile (vorher zwei) - das Blatt schiebt die Artikelliste
   nicht mehr so weit nach unten. */
html[data-geraet="handy"] .beleg-ansicht-blatt { gap: 0.4rem; padding-block: 0.45rem 0.55rem; }
html[data-geraet="handy"] .beleg-ansicht-blatt > .beleg-gruppierung-wahl { flex: 1 1 100%; }
/* Basis in Prozent statt 0 (der Umbruch richtet sich nach der Basis, rem wächst mit der Schriftgröße) - so stehen die drei
   zusammen unter der Gruppierung. */
html[data-geraet="handy"] .beleg-ansicht-blatt > .beleg-ansicht-schalter { flex: 2 1 55%; min-width: 0; padding: 0; }
html[data-geraet="handy"] .beleg-ansicht-blatt > .widget-menue-schalter:has(> .beleg-ansicht-bilder) { flex: 1 1 30%; min-width: 0; padding: 0; }
html[data-geraet="handy"] .beleg-ansicht-blatt > :is(.beleg-ansicht-schalter, .widget-menue-schalter:has(> .beleg-ansicht-bilder)) > .btn {
  flex: 1 1 0; min-width: 0; justify-content: center; gap: 0.3rem; padding-inline: 0.3rem; white-space: nowrap; }
/* Kachel: "je 11 Stück" passt nicht in das schmale Mengenfeld (rund 43 px) - es ragte seitlich über den Rahmen; jetzt
   steht es zentriert unter der ganzen Zeile aus −, Menge und +. */
html:not([data-geraet="desktop"]) .beleg-kachel .beleg-kachel-menge { position: relative; }
html:not([data-geraet="desktop"]) .beleg-kachel .beleg-kachel-menge:has(.mobil-menge-einheit) { margin-bottom: 0.95rem; }
html:not([data-geraet="desktop"]) .beleg-kachel .mobil-menge-einheit { position: absolute; left: 0; right: 0; top: calc(100% + 0.15rem); max-width: none;
  text-align: center; }

/* Mobil-Runde 3, 19.10.2026: Zahlen-Pad für alle Mengenfelder (js/zahlenpad.js) - Aussehen wie das Mengen-Pad oben, aber
   auch über Fenstern (Vorbestellung); das Feld, in das es schreibt, ist markiert. Nur Touch: am PC öffnet es sich nie. */
html[data-touch] .zahlen-pad-hintergrund { z-index: 300; }
html[data-touch] .zahlen-pad { z-index: 301; }
html[data-touch] input[data-zahlenpad] { caret-color: transparent; cursor: pointer; }
html[data-touch] input.zahlenpad-aktiv { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); }
/* Lieferung im Kopf des Pads (seit 23.10.2026): groß und farbig statt klein hinter der Nummer. */
.zahlen-pad-marke { flex: 0 0 auto; padding: 0.1rem 0.7rem; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-size: 1.05rem; font-weight: 700; }
/* Pads auf niedrigen Bildschirmen (Handy quer, 360 px hoch): untereinander passten Tasten und OK/Weiter nicht mehr - links
   Kopf, Zahl und Knöpfe, rechts die Tasten. Gilt für beide Pads (Liste und Mengenfelder). */
@media (max-height: 500px) {
  html:not([data-geraet="desktop"]) .mengen-pad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-auto-rows: min-content;
    align-content: start; column-gap: 0.9rem; row-gap: 0.4rem; left: 50%; right: auto; width: min(46rem, calc(100vw - 1rem)); transform: translateX(-50%);
    animation: none; max-height: calc(100dvh - 0.5rem); padding-top: 0.55rem; padding-bottom: calc(0.55rem + env(safe-area-inset-bottom)); }
  html:not([data-geraet="desktop"]) .mengen-pad > * { grid-column: 1; }
  html:not([data-geraet="desktop"]) .mengen-pad > .mengen-pad-tasten { grid-column: 2; grid-row: 1 / span 8; align-self: start; }
  html:not([data-geraet="desktop"]) .mengen-pad-taste { min-height: 2.75rem; font-size: 1.25rem; }
}
/* Vorbestellung auf dem Handy quer: Kopf, Eingabezeile und Fuß füllten die 360 px - die Artikelliste (Mengen) hatte die
   Höhe 0. Dort scrollt das ganze Fenster, die Liste bekommt ihre volle Höhe. */
@media (max-height: 500px) {
  html[data-geraet="handy"] .modal-box.sonder-dialog { overflow-y: auto; }
  html[data-geraet="handy"] .sonder-dialog-inhalt { flex: 0 0 auto; overflow: visible; }
}
/* Mobil-Runde 3, 19.10.2026: Statistik - mehrere Werte im Diagramm, Kopfzeile in einer Reihe */
/* Knopf "Werte (n)" mit den Farben der Reihen; darunter je Reihe eine Zeile wie im Dialog "Eigenes Chart"
   (.frei-kennzahl), hier in einer Reihe: Farbe, Wert, Darstellung, Achse, Farbe, Knöpfe. */
.statistik-reihen-knopf { display: inline-flex; align-items: center; gap: 0.4rem; }
.statistik-reihen-farben { display: inline-flex; gap: 2px; }
.statistik-reihen-farben .frei-farbe { width: 0.45rem; height: 0.95rem; border-radius: 2px; }
.statistik-diagramm-reihen { margin: 0 0 0.5rem; padding: 0.2rem 0.6rem 0.45rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
.statistik-diagramm-reihen .frei-kennzahl { grid-template-columns: 0.7rem minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
  grid-template-areas: "farbe wahl darst achse farbwahl knoepfe"; }
.statistik-reihen-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding-top: 0.15rem; }
.statistik-reihen-fuss .formular-hinweis { margin: 0; flex: 1 1 16rem; min-width: 0; }
html[data-touch] .statistik-reihen-knopf,
html[data-touch] .statistik-reihe-neu,
html[data-touch] .statistik-diagramm-reihen .btn-icon { min-height: 44px; min-width: 44px; }
html[data-touch] .statistik-diagramm-reihen .form-input { font-size: 16px; min-height: 44px; }
html[data-geraet="handy"] .statistik-reihen-knopf { flex: 1 1 100%; justify-content: center; }
/* Tablet: zwei Zeilen je Reihe wie im Dialog - oben Wert und Knöpfe, darunter Darstellung, Achse und Farbe je ein Drittel
   (in einer Zeile schnitt die 16-px-Schrift "Achse automatisch" ab). */
html[data-geraet="tablet"] .statistik-diagramm-reihen .frei-kennzahl { grid-template-columns: 0.7rem repeat(3, minmax(0, 1fr));
  grid-template-areas: "farbe wahl wahl knoepfe" ". darst achse farbwahl"; }
html[data-geraet="tablet"] .statistik-diagramm-reihen .frei-knoepfe { justify-self: end; }
/* Handy: Wert und Knöpfe oben, darunter Darstellung, Achse und Farbe je über die ganze Breite (halbe Breite schnitt die
   Texte ab: "Darste…"). */
html[data-geraet="handy"] .statistik-diagramm-reihen { padding-inline: 0.45rem; }
html[data-geraet="handy"] .statistik-diagramm-reihen .frei-kennzahl { grid-template-columns: 0.7rem minmax(0, 1fr) auto;
  grid-template-areas: "farbe wahl knoepfe" ". darst darst" ". achse achse" ". farbwahl farbwahl"; }
/* Handy quer: Platz wie ein Tablet. */
@media (min-width: 600px) {
  html[data-geraet="handy"] .statistik-diagramm-reihen .frei-kennzahl { grid-template-columns: 0.7rem repeat(3, minmax(0, 1fr));
    grid-template-areas: "farbe wahl wahl knoepfe" ". darst achse farbwahl"; }
  html[data-geraet="handy"] .statistik-diagramm-reihen .frei-knoepfe { justify-self: end; }
}
/* Kopfzeile: am PC wie bisher (die Hülle zählt nicht), auf Handy und Tablet Auswahl, Aufbau und Berechnen gleich breit in
   einer Reihe - neben der Formularauswahl, wenn sie daneben passt (Tablet quer), sonst darunter. Der Hinweis "neu
   berechnen" steht darüber. */
.statistik-kopf-knoepfe { display: contents; }
html:not([data-geraet="desktop"]) .statistik-kopf-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
html:not([data-geraet="desktop"]) .statistik-kopf-knoepfe > .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not([data-geraet="desktop"]) .statistik-kopf-knoepfe > .chip { order: -1; flex: 1 1 100%; justify-content: center; }
html[data-touch] .statistik-kopf-knoepfe > .btn { min-height: 44px; }
html[data-geraet="handy"] .statistik-kopf-knoepfe { flex: 1 1 100%; gap: 0.4rem; }
html[data-geraet="handy"] .statistik-kopf-knoepfe > .btn { padding-inline: 0.4rem; gap: 0.3rem; }
/* Mobil-Runde 3, 19.10.2026: Auswahllisten der Ausdrucke nebeneinander.
   Ein Muster für alle Ausdrucke mit Liste und Auswahl (Rechnungs-, Lieferschein-, Rechnungsnachdruck, Rechnungsstorno,
   Rechnungsausgangsbuch, Power Print): oben die Vorauswahl bzw. die Kundenliste über die ganze Breite, darunter
   Liste | Pfeile | Gewählt nebeneinander wie beim Rechnungsdruck - Tablet hoch und quer und Handy quer (ab 560 px Breite).
   Das Handy hochkant bleibt untereinander (zu schmal), der PC unverändert. Ersetzt die Einzelregeln je Seite vom 18./19.10. */
@media (min-width: 560px) {
  html:not([data-geraet="desktop"]) .rechnungsdruck-einzel:not(.zahlung-raster) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
  html:not([data-geraet="desktop"]) .rechnungsdruck-einzel:not(.zahlung-raster) > * { grid-column: auto; }
  html:not([data-geraet="desktop"]) .rechnungsdruck-einzel:not(.zahlung-raster) > :first-child:nth-last-child(4) { grid-column: 1 / -1; }
  html:not([data-geraet="desktop"]) .rechnungsdruck-einzel:not(.zahlung-raster) > .rechnungsdruck-pfeile { flex-direction: column; align-self: center; }
  html:not([data-geraet="desktop"]) .rechnungsdruck-einzel:not(.zahlung-raster) > .rechnungsdruck-pfeile i { transform: none; }
  /* Kundenliste oben (Nachdruck, Storno, Ausgangsbuch) niedriger - die Auswahl darunter bleibt ohne langes Scrollen sichtbar. */
  html:not([data-geraet="desktop"]) .rechnungsdruck-einzel > .rechnungsdruck-liste:first-child:nth-last-child(4) > .rechnungsdruck-tabelle { max-height: max(9rem, min(30dvh, 18rem)); }
  html:not([data-geraet="desktop"]) .rechnungsdruck-einzel .rechnungsdruck-liste-kopf .form-input { flex: 1 1 12rem; max-width: none; min-width: 0; }
  /* „Nachbearbeiten“ (Druck aller Kunden): Vorauswahl | Kunden auch auf dem Handy quer nebeneinander. */
  html[data-geraet="handy"] .lieferscheindruck-nachbearbeitung { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
}
/* Rechnungen und gewählte Rechnungen (Nachdruck, Storno, Ausgangsbuch) und die gewählten Artikel von Power Print sind nebeneinander
   je nur 300-400 px breit: auf dem Tablet wie am Handy als kurze Karten - Datum, Nummer, Betrag in einer Zeile, der Name darunter. */
/* Letzte Spalte (am PC 1 % breit) in den Karten so breit wie ihr Inhalt - das ✕ ragte auf dem Handy 32 px über die Liste hinaus,
   das Zieldatum im Ausgangsbuch wurde abgeschnitten. */
html:not([data-geraet="desktop"]) :is(.rechnungsdruck-einzel, .rechnungsnachdruck-auswaehlen) .karten-tabelle.karten-kompakt > tbody > tr > td:last-child:not([colspan]) { width: auto; }
html:not([data-geraet="desktop"]) :is(.rechnungsdruck-einzel, .rechnungsnachdruck-auswaehlen) .karten-tabelle.karten-kompakt > tbody > tr > td:last-child:has(> .btn-icon) { padding-inline: 0; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt thead { display: none; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt,
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody { display: block; width: 100%; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.6rem; min-height: 44px; padding: 0.5rem; border-bottom: 1px solid var(--line-soft); }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td {
  display: block; flex: 0 1 auto; width: auto; min-width: 0; padding: 0; border: 0; background: none; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td:is(.karte-label, .zahl, .ls-nr) { flex: 0 0 auto; white-space: nowrap; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td.karte-label[data-label]:not([data-label=""])::before {
  content: attr(data-label) ": "; color: var(--text-secondary); font-size: 0.82rem; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td.karte-zusatz {
  order: 5; flex: 1 1 100%; font-size: 0.88rem; color: var(--text-secondary); overflow-wrap: anywhere; }
/* ✕ oben rechts neben den ersten beiden Angaben (wie die Karten am Handy), der Rest darunter. */
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr:has(> td:last-child > .btn-icon) > td:nth-child(n+3):not(:last-child, .karte-zusatz) { order: 2; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td:last-child:has(> .btn-icon) { order: 1; margin-left: auto; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td:nth-child(2):not(.karte-label, .zahl, .ls-nr) { flex: 1 1 0; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr:has(> td:last-child > .btn-icon)::after {
  content: ""; order: 1; flex: 1 1 100%; height: 0; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td > .btn-icon { min-width: 44px; min-height: 44px; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td:empty { display: none; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr > td.card-empty { flex: 1 1 100%; text-align: center; }
html[data-geraet="tablet"] :is(.rechnungsnachdruck-einzel, .powerprint .rechnungsdruck-einzel:not(.lieferscheindruck-einzel)) > .rechnungsdruck-liste:not(:first-child) .karten-kompakt > tbody > tr.rechnungsdruck-zeile:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
/* Lieferscheindruck „Gewählt“ neben der Kundenliste (Handy und Tablet): je Kunde Nummer, Name und Entfernen, darunter die
   Lieferungen 1–9 und HW als umbrechende Kästchen mit 44 px zum Antippen - zehn Ankreuzspalten passten nicht in die halbe Breite. */
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt thead { display: none; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt,
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody { display: block; width: 100%; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--line-soft); }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td {
  display: block; order: 3; flex: 0 0 auto; width: auto; min-width: 0; padding: 0; border: 0; background: none; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td.ls-nr { order: 1; white-space: nowrap; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td:nth-child(2) { order: 2; flex: 1 1 0; font-weight: 600; overflow-wrap: anywhere; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td:last-child:not(.lieferscheindruck-lfg):not(:first-child) { order: 3; margin-left: auto; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr::after { content: ""; order: 4; flex: 1 1 100%; height: 0; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td.lieferscheindruck-lfg { order: 5; }
html:not([data-geraet="desktop"]) .karten-tabelle.karten-kompakt.lieferscheindruck-gewaehlt > tbody > tr > td.card-empty { flex: 1 1 100%; }
html:not([data-geraet="desktop"]) .lieferscheindruck-lfg-haken { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 3.1rem; min-height: 44px;
  padding: 0 0.5rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); cursor: pointer; }
html:not([data-geraet="desktop"]) .lieferscheindruck-lfg-haken:has(> input:checked) { background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
html:not([data-geraet="desktop"]) .lieferscheindruck-lfg-nr { display: inline; font-variant-numeric: tabular-nums; }

/* Frosterverwaltung (seit 20.10.2026): Datum mit Vortag/Folgetag, Vorgänge als Reiter, Köpfe des Tages als Knöpfe, Mengendialog. */
.froster-datum { display: flex; align-items: center; gap: 0.25rem; }
/* Reiter wie in der GoecomDB (Seite Berichte, seit 21.10.2026 Wunsch des Nutzers): eine Leiste in der Themefarbe, die Reiter weiß
   darauf, der aktive als weißes Kärtchen mit Schrift in der Themefarbe. */
.froster-reiter { margin-top: 0.6rem; gap: 0.2rem; padding: 0.3rem 0.5rem; border-bottom: 0; border-radius: var(--radius-main); background: var(--color-primary); }
.froster-reiter > button i { margin-right: 0.3rem; }
.froster-reiter > button:not(.btn) { border: 0; border-radius: var(--radius-main); padding: 0.35rem 0.75rem; background: transparent;
  color: rgba(255, 255, 255, 0.86); }
.froster-reiter > button:not(.btn):hover { color: #ffffff; background: rgba(255, 255, 255, 0.16); }
.froster-reiter > button.aktiv, .froster-reiter > button.aktiv:hover { color: var(--color-primary); background: #ffffff; border-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.froster-reiter > button:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
/* Oben rechts neben Lager und Datum: Bestandskontrolle und Einstellungen (seit 21.10.2026). */
.froster-kopf-oben { display: flex; flex-wrap: nowrap; gap: 0.75rem; align-items: flex-start; justify-content: space-between; flex: 1 1 100%; width: 100%; min-width: 0; }
.froster-kopf-oben > .belegdruck-felder { flex: 1 1 0; min-width: 0; }
.froster-reiter-rechts { margin-top: 0; flex: 0 1 auto; min-width: 0; }
html[data-geraet="handy"] .froster-kopf-oben { flex-wrap: wrap; }
html[data-geraet="handy"] .froster-kopf-oben > :is(.froster-reiter-rechts, .belegdruck-felder) { flex: 1 1 100%; }
/* Auf dem Handy die beiden Knöpfe nebeneinander und umbrechend statt seitlich zu wischen – es sind nur zwei. */
html[data-geraet="handy"] .froster-reiter.froster-reiter-rechts { flex-wrap: wrap; overflow-x: visible; }
html[data-geraet="handy"] .froster-reiter.froster-reiter-rechts > button { flex: 1 1 auto; justify-content: center; }
.froster-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.froster-spalten > .card { margin: 0; }
.froster-vorgaenge .card-header { flex-wrap: wrap; }
.froster-vorgaenge .froster-koepfe { flex-direction: column; flex-wrap: nowrap; }
.froster-vorgaenge .froster-kopf-knopf { width: 100%; text-align: left; }
.froster-artikel-leer { min-height: 8rem; display: flex; align-items: center; justify-content: center; }
/* Einstellungen der Frosterverwaltung (seit 21.10.2026). */
.froster-einstellungen-kopf .froster-reiter { margin-top: 0; flex: 1 1 100%; width: 100%; }
.froster-einstellungen-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; padding: 0.75rem 1rem 1rem; align-items: start; }
.froster-einstellungen-felder .form-label { display: flex; flex-direction: column; gap: 0.25rem; }
.froster-artikel-neu { display: flex; gap: 0.4rem; padding: 0.25rem 1rem 0.5rem; }
.froster-artikel-neu .such-auswahl { flex: 1; min-width: 0; }
.froster-artikel-neu .kunden-wahl { width: 100%; }
.froster-zuordnung .froster-zahl { width: 5rem; min-width: 0; padding: 0.3rem 0.4rem; text-align: right; }
.froster-zuordnung td, .froster-zuordnung th { white-space: nowrap; }
.froster-zuordnung td.froster-tage-zelle { white-space: normal; padding-top: 0; }
.froster-zuordnung tr:has(+ .froster-tage-zeile) td { border-bottom: 0; }
.froster-tage > .text-muted { align-self: center; margin-right: 0.25rem; }
.rechte-froster-tabelle th { white-space: normal; font-size: 0.8rem; line-height: 1.2; vertical-align: bottom; }
.rechte-froster-tabelle td:not(:first-child), .rechte-froster-tabelle th:not(:first-child) { text-align: center; }
.froster-tage { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.froster-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem; border: 1px solid var(--border-soft);
  border-radius: var(--radius-main); font-size: 0.85rem; cursor: pointer; }
.froster-tag.an { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
html:not([data-geraet="desktop"]) .froster-tag { min-height: 44px; padding: 0 0.6rem; }
html:not([data-geraet="desktop"]) .froster-zuordnung .froster-zahl, html:not([data-geraet="desktop"]) .froster-artikel-neu .form-input,
  html:not([data-geraet="desktop"]) .froster-einstellungen-felder .form-input { font-size: 16px; min-height: 44px; }
html:not([data-geraet="desktop"]) .froster-zuordnung input[type="checkbox"], html:not([data-geraet="desktop"]) .rechte-froster-tabelle input[type="checkbox"] { width: 22px; height: 22px; }
.froster-aktualisieren { align-self: flex-end; }
.froster-leer { padding: 0.75rem 1rem; }
.froster-koepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 1rem 0.9rem; }
.froster-kopf-knopf { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%; padding: 0.4rem 0.75rem; border: 1px solid var(--border-soft);
  border-radius: var(--radius-main); background: var(--surface); color: var(--text-primary); cursor: pointer; }
.froster-kopf-knopf:hover { background: var(--hover); }
.froster-kopf-knopf.aktiv { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.froster-kopf-zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.froster-kopf-info { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.froster-status-offen { color: var(--warning); }
.froster-status-zu { color: var(--text-secondary); }
.froster-info-zeile { display: flex; gap: 0.4rem; align-items: center; flex: 1 1 18rem; max-width: 32rem; }
.froster-info-zeile .form-input { flex: 1; min-width: 0; }
.froster-tabelle td.zahl, .froster-tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.froster-tabelle tr.klickbar { cursor: pointer; }
.froster-tabelle tr.klickbar:hover { background: var(--hover); }
.froster-tabelle tr.froster-negativ td { color: var(--error-text); }
.froster-tabelle tr.froster-lagerzeile td { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.froster-dialog-inhalt { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 1rem; overflow-y: auto; }
.froster-mengen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; }
.modal-box.froster-verlauf { max-width: 60rem; }
html:not([data-geraet="desktop"]) .froster-kopf-knopf, html:not([data-geraet="desktop"]) .froster-datum .btn-icon { min-height: 44px; }
html:not([data-geraet="desktop"]) .froster-datum .btn-icon { min-width: 44px; }
html:not([data-geraet="desktop"]) .froster-reiter { flex-wrap: nowrap; overflow-x: auto; }
html:not([data-geraet="desktop"]) .froster-reiter > button { white-space: nowrap; min-height: 44px; }
html:not([data-geraet="desktop"]) .froster-mengen .form-input, html:not([data-geraet="desktop"]) .froster-info-zeile .form-input { font-size: 16px; }
html[data-geraet="handy"] .froster-info-zeile { flex-basis: 100%; max-width: none; }
html[data-geraet="handy"] .froster-kopf-knopf { flex: 1 1 100%; }
html[data-geraet="handy"] .froster-spalten { grid-template-columns: minmax(0, 1fr); }
@media (orientation: portrait) { html[data-geraet="tablet"] .froster-spalten { grid-template-columns: minmax(0, 1fr); } }
html[data-geraet="handy"] .froster-kopf .belegdruck-felder > .form-label { flex-basis: 100%; }
html[data-geraet="handy"] .froster-datum { width: 100%; }
html[data-geraet="handy"] .froster-datum .datum-feld { flex: 1 1 auto; min-width: 0; }
/* Texteingaben haben von Haus aus ~20 Zeichen Mindestbreite – mit den Pfeilknöpfen mehr als ein 360-px-Handy. */
html[data-geraet="handy"] .froster-kopf .belegdruck-felder, html[data-geraet="handy"] .froster-datum { min-width: 0; }
html[data-geraet="handy"] .froster-datum .datum-text { width: 0; min-width: 0; }

/* Lieferaufteilungen (seit 22.10.2026): links die Liste (Einträge wie im Artikelstamm), rechts der Satz – Tage als Spalte, daneben
   die acht Lieferungen des gewählten Tages. Reiter wie in der Frosterverwaltung (Klasse froster-reiter). */
.lfa-kopf .froster-reiter { margin-top: 0; flex: 1 1 100%; width: 100%; }
.lfa { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.lfa > .card { margin: 0; min-width: 0; }
.lfa-liste .card-header { margin-bottom: 0.4rem; }
.lfa-liste .artikelstamm-filter .form-label { display: flex; flex-direction: column; gap: 0.25rem; }
button.lfa-eintrag { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.lfa-editor { display: flex; flex-direction: column; gap: 0.6rem; }
.lfa-editor-kopf { flex-wrap: wrap; }
.lfa-titel { flex: 1 1 16rem; min-width: 0; }
.lfa-titel h2 { overflow-wrap: anywhere; }
.lfa-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.lfa-werkzeuge .btn { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.lfa-raster { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.lfa-tage { display: flex; flex-direction: column; gap: 0.25rem; }
.lfa-tag { display: flex; align-items: stretch; border: 1px solid var(--border-soft); border-radius: var(--radius-main); overflow: hidden; }
.lfa-tag.aktiv { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.lfa-tag-aktiv { display: flex; align-items: center; padding: 0 0.5rem; border-right: 1px solid var(--border-soft); cursor: pointer; }
.lfa-tag-aktiv input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.lfa-tag-knopf { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.5rem; align-items: baseline; padding: 0.4rem 0.6rem;
  border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.lfa-tag-knopf:hover { background: var(--hover); }
.lfa-tag:not(.an) .lfa-tag-name { color: var(--text-secondary); }
.lfa-tag.an .lfa-tag-name { font-weight: 600; }
.lfa-tag-info { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lfa-lieferungen { min-width: 0; }
.lfa-lieferungen h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.lfa-lieferungen h3 small { margin-left: 0.35rem; font-weight: 400; }
.lfa-tabelle td:first-child { white-space: nowrap; }
.lfa-tabelle td.zahl, .lfa-tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lfa-tabelle tfoot td { font-weight: 600; }
.lfa-tabelle tr.lfa-zuviel td { color: var(--error-text); }
.lfa-zahl { width: 5rem; min-width: 0; padding: 0.3rem 0.4rem; text-align: right; }
.lfa-hinweis { margin: 0.4rem 0 0; font-size: 0.85rem; }
.modal-box.lfa-uebernahme { max-width: 36rem; }
/* Seit 31.10.2026 Kunden über StammdatenAuswahl - die Vorschlagsliste ragt über den Inhalt hinaus, nichts abschneiden. */
.lfa-uebernahme-inhalt { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 1rem; min-height: 0; overflow: visible; }
.lfa-uebernahme .modal-fuss > .text-muted { margin-right: auto; }

/* Handy und Tablet: entweder die Liste oder der Satz (wie der Artikelstamm), Tablet quer nebeneinander. */
html:not([data-geraet="desktop"]) .lfa .artikelstamm-treffer { overflow: visible; }
html[data-geraet="handy"] .lfa, html[data-geraet="tablet"] .lfa { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  html[data-geraet="tablet"] .lfa { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  html[data-geraet="tablet"] .lfa .artikelstamm-treffer { overflow-y: auto; max-height: calc(100dvh - 15rem); }
}
@media (max-width: 1099px) {
  html:not([data-geraet="desktop"]) .lfa-mit-wahl .lfa-liste, html:not([data-geraet="desktop"]) .lfa-ohne-wahl .lfa-editor { display: none; }
}
/* Ist die Karte schmal (Tablet quer neben der Liste, Handy, schmales Fenster), stehen die Tage über den Lieferungen. */
.lfa-editor { container-type: inline-size; }
@container (max-width: 46rem) {
  .lfa-raster { grid-template-columns: minmax(0, 1fr); }
  .lfa-tage { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
}
html[data-geraet="handy"] .lfa-tage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-geraet="handy"] .lfa-tag-knopf { flex-direction: column; gap: 0; }
html:not([data-geraet="desktop"]) .lfa-tag-knopf, html:not([data-geraet="desktop"]) .lfa-tag-aktiv,
  html:not([data-geraet="desktop"]) .lfa-werkzeuge .btn, html:not([data-geraet="desktop"]) button.lfa-eintrag { min-height: 44px; }
html:not([data-geraet="desktop"]) .lfa-tag-aktiv input { width: 22px; height: 22px; }
html:not([data-geraet="desktop"]) .lfa-zahl, html:not([data-geraet="desktop"]) .lfa-liste .form-input { font-size: 16px; min-height: 44px; }
html[data-geraet="handy"] .lfa-werkzeuge .btn { flex: 1 1 calc(50% - 0.3rem); }
html[data-geraet="handy"] .lfa-zahl { width: 100%; }
html[data-geraet="handy"] .lfa-reiter { flex-wrap: wrap; overflow-x: visible; }
html[data-geraet="handy"] .lfa-reiter > button { flex: 1 1 auto; justify-content: center; }
html:not([data-geraet="desktop"]) .lfa-liste .widget-eintrag { min-height: 44px; }
html:not([data-geraet="desktop"]) .lfa-liste .widget-eintrag input { width: 22px; height: 22px; }

/* Versandsystem (seit 23.10.2026, Marvins D300.Verteilung): Kopf mit Reitern je Artikel / je Kunde, Kennzahlen, Vorauswahl und Liste. */
.vsy-kopf .froster-reiter { margin-top: 0; flex: 1 1 100%; width: 100%; }
.vsy-felder { flex: 1 1 100%; align-items: flex-end; }
.vsy-wahl { flex: 1 1 18rem; min-width: 0; max-width: 32rem; }
.vsy-wahl .kunden-wahl { width: 100%; }
.vsy-kennzahlen { margin-bottom: 1rem; }
.vsy-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0 1rem 0.75rem; }
.vsy-filter .form-input { flex: 1 1 12rem; min-width: 0; max-width: 20rem; }
.vsy-tabelle td.zahl, .vsy-tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vsy-zahl { width: 6.5rem; min-width: 0; padding: 0.3rem 0.4rem; text-align: right; }
.vsy-aktionen { white-space: nowrap; text-align: right; }
.vsy-aktionen .btn { padding: 0.25rem 0.55rem; font-size: 0.82rem; }
.vsy-marke { margin-left: 0.35rem; color: var(--text-secondary); font-size: 0.85em; }
.vsy-tabelle tr.vsy-gesperrt td { color: var(--error-text); }
.vsy-tabelle tr.vsy-keine td { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.vsy-tabelle tr.vsy-geaendert td { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
.vsy-leer { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 1rem; }
.vsy-leer > i { font-size: 2.4rem; opacity: 0.35; }
html:not([data-geraet="desktop"]) .vsy-filter .form-input, html:not([data-geraet="desktop"]) .vsy-zahl,
  html:not([data-geraet="desktop"]) .vsy-felder select.form-input { font-size: 16px; min-height: 44px; }
html:not([data-geraet="desktop"]) .vsy-aktionen .btn, html:not([data-geraet="desktop"]) .vsy-aktionen .btn-icon,
  html:not([data-geraet="desktop"]) .vsy-filter .widget-eintrag { min-height: 44px; }
html:not([data-geraet="desktop"]) .vsy-filter .widget-eintrag input { width: 22px; height: 22px; }
html[data-geraet="handy"] .vsy-filter .form-input, html[data-geraet="handy"] .vsy-wahl { flex-basis: 100%; max-width: none; }
html[data-geraet="handy"] .vsy-zahl { width: 100%; }
html[data-geraet="handy"] .vsy-aktionen { white-space: normal; display: flex; flex-wrap: wrap; gap: 0.3rem; }
html[data-geraet="handy"] .vsy-aktionen .btn { flex: 1 1 auto; }

/* Fahrer (seit 23.10.2026, Seite /fahrer): Handy zuerst – Stopps als Karten, oben die Tour mit Ladeliste; je Stopp aufklappbar mit Kisten-Zählern. */
.fhr-kopf .froster-reiter { margin-top: 0; flex: 1 1 100%; width: 100%; }
.fhr-felder { flex: 1 1 100%; align-items: flex-end; }
.fhr-tourwahl { flex: 1 1 18rem; min-width: 0; max-width: 32rem; }
.fhr-tour { margin-bottom: 0.75rem; }
.fhr-fremd { flex-wrap: wrap; align-items: center; }
.fhr-fremd .btn { margin-left: auto; }
.fhr-zeiten, .fhr-ladeliste { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; padding: 0 1rem 0.6rem; }
.fhr-zeiten i { color: var(--text-secondary); margin-right: 0.2rem; }
.fhr-ladeliste .text-muted { margin-right: 0.25rem; }
.fhr-hinweis, .fhr-standort-hinweis { margin: 0; padding: 0 1rem 0.75rem; font-size: 0.88rem; }
.fhr-standort-hinweis { color: var(--text-secondary); }
.fhr-standort-hinweis i { color: var(--color-primary); margin-right: 0.3rem; }
.fhr-stopps { display: flex; flex-direction: column; gap: 0.5rem; }
.card.fhr-stopp { padding: 0; overflow: hidden; border-left-width: 4px; }
/* .card.… statt .fhr-stopp: im hellen Grundton setzt :root[data-grundton="light"] .card die Randfarbe aller Seiten. */
.card.fhr-stopp.fhr-angekommen { border-left-color: var(--warning); }
.card.fhr-stopp.fhr-erledigt { border-left-color: var(--good); }
.fhr-stopp-kopf { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.9rem; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fhr-stopp-kopf:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.fhr-pos { flex: 0 0 2.1rem; height: 2.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-strong); border: 1px solid var(--border-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.fhr-erledigt .fhr-pos { background: var(--good); border-color: var(--good); color: #fff; }
.fhr-stopp-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.fhr-stopp-text > strong, .fhr-stopp-text > .text-muted { overflow: hidden; text-overflow: ellipsis; }
.fhr-chips { display: flex; flex-wrap: wrap; }
.fhr-chip-bar { border-color: color-mix(in srgb, var(--warning) 70%, transparent); }
.fhr-status { flex: 0 0 auto; font-size: 0.85rem; color: var(--text-secondary); }
.fhr-erledigt .fhr-status { color: var(--good); font-weight: 600; }
.fhr-stopp-detail { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 0.9rem 0.9rem; border-top: 1px solid var(--border-soft); padding-top: 0.75rem; }
.fhr-angaben { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.92rem; }
.fhr-geschlossen strong { color: var(--error-text); }
.fhr-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fhr-knoepfe-ende { justify-content: flex-end; }
.fhr-kisten { width: 100%; border-collapse: collapse; }
.fhr-kisten th, .fhr-kisten td { padding: 0.3rem 0.35rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
.fhr-kisten th { font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }
.fhr-kisten .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fhr-zaehler { display: inline-flex; align-items: center; gap: 0.25rem; }
.fhr-zahl { width: 4rem; min-width: 0; padding: 0.3rem 0.35rem; text-align: center; }
.fhr-bemerkung { max-width: 40rem; }
.fhr-klickbar { cursor: pointer; }
.fhr-gewaehlt td { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
.fhr-historie, .fhr-detail { margin-bottom: 0.75rem; }
.fhr-einstellungen-inhalt { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 1rem 1rem; max-width: 46rem; }
.fhr-einstellungen-inhalt h3 { margin: 0.6rem 0 0; font-size: 1rem; }
.fhr-zuordnung, .fhr-tage { max-width: 30rem; }
html:not([data-geraet="desktop"]) .fhr-felder select.form-input, html:not([data-geraet="desktop"]) .fhr-zahl,
  html:not([data-geraet="desktop"]) .fhr-bemerkung .form-input { font-size: 16px; min-height: 44px; }
html:not([data-geraet="desktop"]) .fhr-zaehler .btn-icon, html:not([data-geraet="desktop"]) .fhr-knoepfe .btn { min-height: 44px; min-width: 44px; }
html[data-geraet="handy"] .fhr-tourwahl { flex-basis: 100%; max-width: none; }
html[data-geraet="handy"] .fhr-tour .belegdruck-aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
html[data-geraet="handy"] .fhr-tour .belegdruck-aktionen > * { flex: 1 1 auto; justify-content: center; }
html[data-geraet="handy"] .fhr-knoepfe .btn { flex: 1 1 auto; justify-content: center; }
/* Handy: je Kistentyp eine Zeile mit Namen und Soll, darunter abgeladen und mitgenommen nebeneinander (Beschriftung aus data-label). */
html[data-geraet="handy"] .fhr-kisten thead { display: none; }
html[data-geraet="handy"] .fhr-kisten tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border-soft); }
html[data-geraet="handy"] .fhr-kisten td { border: 0; padding: 0; }
html[data-geraet="handy"] .fhr-kisten td:nth-child(1) { font-weight: 600; }
html[data-geraet="handy"] .fhr-kisten td:nth-child(2) { text-align: right; color: var(--text-secondary); }
html[data-geraet="handy"] .fhr-kisten td:nth-child(2)::before { content: attr(data-label) " "; }
html[data-geraet="handy"] .fhr-kisten td:nth-child(n+3) { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; }
html[data-geraet="handy"] .fhr-kisten td:nth-child(n+3)::before { content: attr(data-label); font-size: 0.8rem; color: var(--text-secondary); }
/* „beim Kunden“ (seit 29.10.2026) als eigene Reihe unter den Zählern – sonst stünde „mitgenommen“ allein in der dritten Reihe und −/+
   von „abgeladen“ und „mitgenommen“ nicht mehr nebeneinander. */
html[data-geraet="handy"] .fhr-kisten td.fhr-bestand { grid-column: 1 / -1; order: 1; flex-direction: row; align-items: baseline; gap: 0.4rem; }
.fhr-bestand-fehler { color: var(--text-secondary); cursor: help; font-weight: 600; }
html[data-geraet="handy"] .fhr-zahl { width: 3.2rem; }
/* Kistenbestand mit Zählung (seit 29.10.2026): „beim Kunden“ zweizeilig – Bestand (bzw. „nicht gezählt“) und darunter klein die Veränderung. */
.fhr-bestand-wert, .fhr-veraenderung { display: block; }
.fhr-veraenderung { font-size: 0.78rem; color: var(--text-secondary); }
.fhr-nicht-gezaehlt, .fhr-marke-ungezaehlt { color: var(--warning); font-weight: 600; }
.fhr-marke-ungezaehlt { font-size: 0.75rem; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border: 1px solid color-mix(in srgb, var(--warning) 60%, transparent);
  border-radius: 999px; white-space: nowrap; }
[data-grundton="light"] :is(.fhr-nicht-gezaehlt, .fhr-marke-ungezaehlt) { color: color-mix(in srgb, var(--warning) 55%, var(--text-primary)); }
.fhr-zaehlen-knopf.aktiv { border-color: var(--color-primary); }
.fhr-zaehlen { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.fhr-zaehlen > p { margin: 0; font-size: 0.88rem; }
.fhr-zaehl-felder { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.fhr-zaehl-felder .form-label { flex: 0 0 auto; }
.fhr-zaehl-felder .fhr-zahl { width: 5rem; }
html[data-geraet="handy"] .fhr-kisten td.fhr-bestand { flex-wrap: wrap; }
html[data-geraet="handy"] .fhr-kisten td.fhr-bestand :is(.fhr-bestand-wert, .fhr-veraenderung) { display: inline; }
html[data-geraet="handy"] .fhr-zaehl-felder .form-label { flex: 1 1 40%; }
html[data-geraet="handy"] .fhr-zaehl-felder .fhr-zahl { width: 100%; }
/* Teilen sich Typen einen Pfandartikel, gehören ihre Felder zusammen (alle oder keins): fehlende markiert, Hinweis daneben. */
.fhr-zahl.fhr-pflicht { border-color: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 35%, transparent); }
.fhr-pflicht-hinweis { margin: 0; font-size: 0.85rem; color: var(--warning); font-weight: 600; }
[data-grundton="light"] .fhr-pflicht-hinweis { color: color-mix(in srgb, var(--warning) 55%, var(--text-primary)); }
.fhr-kisten-kopf .fhr-pflicht-hinweis, .fhr-kb .verwaltung-kopf .fhr-pflicht-hinweis { align-self: center; }
.fhr-zaehlen-grund { align-self: center; font-size: 0.85rem; }
/* Reiterleiste auf dem Handy (seit dem Review vom 29.10.2026, wie lv-reiter): vier Reiter 2×2 statt seitlich schieben. */
html[data-geraet="handy"] .froster-reiter.fhr-reiter { flex-wrap: wrap; overflow-x: visible; }
html[data-geraet="handy"] .froster-reiter.fhr-reiter > button { flex: 1 1 calc(50% - 0.5rem); min-width: 0; white-space: normal; justify-content: center;
  padding-left: 0.4rem; padding-right: 0.4rem; }
/* Büro-Liste Kistenbestand: je Kunde eine Kopfzeile, darunter je Kistentyp eine Zeile mit Eingabe. */
.fhr-kb-felder { padding: 0 0 0.6rem; align-items: flex-end; }
.fhr-kb-tour { flex: 1 1 16rem; min-width: 0; max-width: 28rem; }
.fhr-kb-suche { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.fhr-kb-filter { align-self: center; }
.fhr-kb-tabelle tr.fhr-kb-kunde > td { background: color-mix(in srgb, var(--color-primary) 7%, transparent); padding-top: 0.45rem; }
.fhr-kb-tabelle .fhr-zahl { width: 5rem; }
.fhr-kb-tabelle th { white-space: normal; }
html:not([data-geraet="desktop"]) .fhr-kb-felder :is(select.form-input, input.form-input) { font-size: 16px; min-height: 44px; }
html:not([data-geraet="desktop"]) .fhr-kb-filter { min-height: 44px; }
html[data-geraet="handy"] .fhr-kb-felder > * { flex: 1 1 100%; max-width: none; }
html[data-geraet="handy"] .fhr-kb-tabelle > tbody > tr.fhr-kb-kunde { border-bottom: 0; padding-bottom: 0.2rem; border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--color-primary) 7%, transparent); margin-top: 0.4rem; }
html[data-geraet="handy"] .fhr-kb-tabelle > tbody > tr.fhr-kb-kunde > td { background: none; }
html[data-geraet="handy"] .fhr-kb-tabelle > tbody > tr.fhr-kb-typ > td:first-child { flex: 1 1 100%; }
html[data-geraet="handy"] .fhr-kb-tabelle > tbody > tr.fhr-kb-typ > td:not(:first-child) { flex: 1 1 40%; }
html[data-geraet="handy"] .fhr-kb-tabelle > tbody > tr.fhr-kb-typ > td:last-child { flex-basis: 100%; display: flex; align-items: center; gap: 0.5rem; }
html[data-geraet="handy"] .fhr-kb-tabelle .fhr-zahl { flex: 1 1 auto; width: auto; }

/* Warenwirtschaft (seit 24.10.2026): Wareneingang (we-*), Wareneingangskontrolle (wek-*) und Qualitätsmanagement (qm-*). */
.we-kopf .froster-reiter { margin-top: 0.6rem; }
.we-felder { flex: 1 1 100%; align-items: flex-end; }
.we-lieferantwahl { flex: 1 1 18rem; min-width: 0; max-width: 28rem; }
.we-klickbar, .qm-klickbar { cursor: pointer; }
.we-kopfangaben { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; padding: 0 1rem 0.75rem; }
.we-fahrer { flex: 1 1 16rem; max-width: 24rem; }
.we-summe { margin-left: auto; }
.we-positionen td.zahl, .we-positionen th.zahl, .we-tabelle td.zahl, .we-tabelle th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.we-zahl { width: 7rem; min-width: 0; text-align: right; padding: 0.3rem 0.4rem; }
.we-einheit { min-width: 7rem; }
.we-charge { width: 8rem; }
.we-text { width: 9rem; min-width: 0; }
.we-mhd { display: inline-flex; align-items: center; gap: 0.2rem; }
.we-mhd .datum-feld { width: 9.5rem; }
.we-positionen tr.we-geaendert td { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
.we-positionen tr.we-entfernt td { opacity: 0.55; text-decoration: line-through; }
.we-panel { width: min(460px, 100vw); }
.we-abgeschnitten { color: var(--warning); }
.wek-liste { display: flex; flex-direction: column; }
.wek-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 1rem; border-top: 1px solid var(--border-soft);
  border-left: 4px solid transparent; }
.wek-zeile.wek-ok { border-left-color: var(--good); }
.wek-zeile.wek-abweichung { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.wek-text { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.wek-fehler { color: var(--error-text); font-size: 0.85rem; }
.wek-eingabe { flex: 0 1 auto; display: flex; align-items: center; gap: 0.4rem; }
.wek-janein { display: inline-flex; gap: 0.3rem; }
.wek-zahl { display: inline-flex; align-items: center; gap: 0.35rem; }
.wek-zahl .form-input { width: 6rem; text-align: right; }
.wek-zeit { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.wek-zeit label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; color: var(--text-secondary); }
.wek-abschluss { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; padding: 0.8rem 1rem 1rem; border-top: 1px solid var(--border-soft); }
.wek-bemerkung { flex: 1 1 18rem; }
.wek-ergebnis-1, .qm-ergebnis-1 { border-color: color-mix(in srgb, var(--good) 60%, transparent); }
.wek-ergebnis-2, .qm-ergebnis-2 { border-color: color-mix(in srgb, var(--warning) 70%, transparent); }
.wek-ergebnis-3, .qm-ergebnis-3 { border-color: rgba(208, 59, 59, 0.6); color: var(--error-text); }
.qm-pfeile { white-space: nowrap; }
.qm-tabelle tr.qm-inaktiv td { opacity: 0.6; }
.qm-filter { align-items: flex-end; }
.qm-filter-wahl { flex: 0 1 18rem; min-width: min(14rem, 100%); }
.qm-gewaehlt td { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
.qm-kontrollen td.zahl, .qm-kontrollen th.zahl { text-align: right; }
.qm-detail tr.qm-abweichung td { background: color-mix(in srgb, var(--warning) 10%, transparent); }
.qm-panel { width: min(520px, 100vw); }
.qm-grenzen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.qm-grenzen .form-label { flex: 1 1 8rem; }
.qm-wert { display: flex; align-items: center; gap: 0.4rem; }
.qm-wert .form-input { flex: 1 1 auto; }
html:not([data-geraet="desktop"]) .we-zahl, html:not([data-geraet="desktop"]) .we-charge, html:not([data-geraet="desktop"]) .we-text,
  html:not([data-geraet="desktop"]) .we-einheit, html:not([data-geraet="desktop"]) .wek-zahl .form-input, html:not([data-geraet="desktop"]) .wek-eingabe select,
  html:not([data-geraet="desktop"]) .wek-eingabe input, html:not([data-geraet="desktop"]) .we-felder select.form-input { font-size: 16px; min-height: 44px; }
html:not([data-geraet="desktop"]) .wek-janein .btn, html:not([data-geraet="desktop"]) .qm-pfeile .btn-icon, html:not([data-geraet="desktop"]) .we-positionen .btn-icon { min-height: 44px; min-width: 44px; }
html[data-geraet="handy"] .we-lieferantwahl { flex-basis: 100%; max-width: none; }
html[data-geraet="handy"] .we-zahl, html[data-geraet="handy"] .we-charge, html[data-geraet="handy"] .we-text, html[data-geraet="handy"] .we-einheit { width: 100%; }
html[data-geraet="handy"] .we-summe { margin-left: 0; }
html[data-geraet="handy"] .wek-eingabe { flex-basis: 100%; }
html[data-geraet="handy"] .wek-janein { width: 100%; }
html[data-geraet="handy"] .wek-janein .btn { flex: 1 1 0; justify-content: center; }
/* Qualitätsmanagement (seit 26.10.2026): Prüfmerkmale mit Untertypen (links) und Merkmalen (rechts), Geräte mit QR-Code, Hygienekontrolle. */
.qm-raster { display: grid; grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.qm-untertyp-liste { list-style: none; margin: 0; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; }
.qm-untertyp-liste li { display: flex; align-items: center; gap: 0.2rem; }
.qm-untertyp-liste li.card-empty { display: block; }
.qm-untertyp { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.65rem; border: 1px solid transparent;
  border-radius: var(--radius-main); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qm-untertyp:hover { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.qm-untertyp.aktiv { background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); font-weight: 600; }
.qm-untertyp i { width: 1.2rem; text-align: center; color: var(--color-primary); }
.qm-untertyp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-untertyp.qm-inaktiv { opacity: 0.6; }
.qm-symbole { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.qm-symbole .btn-icon { border: 1px solid var(--border-soft); border-radius: var(--radius-main); }
.qm-symbole .btn-icon.aktiv { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.qm-geraete-tabelle tr.qm-inaktiv td { opacity: 0.6; }
.qm-markieren { width: 2rem; }
.qm-aktionen { white-space: nowrap; text-align: right; }
.qm-code { font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: 0.05em; font-size: 0.9em; }
.qm-geraete-filter { width: auto; }
.modal-box.qm-qr-dialog { max-width: 30rem; max-height: 92vh; overflow-y: auto; }
.qm-qr-inhalt { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.qm-qr-inhalt p { margin: 0; }
.qm-qr-bild { width: min(15rem, 70vw); aspect-ratio: 1; background: #fff; border-radius: var(--radius-main); padding: 0.4rem; }
.qm-qr-bild svg { width: 100%; height: 100%; display: block; }
.qm-qr-inhalt .status-box { width: 100%; margin: 0; }
.qm-qr-fuss { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.8rem; }
.hygiene-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.hygiene-wahl .sd-eingabe { flex: 1 1 16rem; max-width: 28rem; }
.hygiene-code { display: flex; gap: 0.4rem; flex: 0 1 18rem; }
.hygiene-code .form-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.hygiene-kamera-hinweis { margin: 0.6rem 0 0; }
.hygiene-standort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.4rem 1rem 0.8rem; }
.hygiene-standort .form-label { margin: 0; }
.hygiene-standort .sd-eingabe { flex: 1 1 16rem; max-width: 28rem; }
.hygiene-leer .card-empty i { margin-right: 0.4rem; color: var(--color-primary); }
/* Kamera-Fenster zum QR-Scannen (QrScanFenster, seit 10.11.2026 Baustein für Hygienekontrolle und Vorbestellungen). */
.modal-box.qr-scanner { max-width: 32rem; width: 100%; }
.qr-video-rahmen { position: relative; width: 100%; aspect-ratio: 1; background: #000; border-radius: var(--radius-main); overflow: hidden; }
.qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-sucher { position: absolute; inset: 15%; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25); }
html[data-geraet="handy"] .qm-raster, html[data-geraet="tablet"] .qm-raster { grid-template-columns: minmax(0, 1fr); }
html[data-touch] .qm-untertyp { min-height: 44px; }
html[data-touch] .qm-untertyp-bearbeiten, html[data-touch] .qm-symbole .btn-icon { min-height: 44px; min-width: 44px; }
html[data-touch] .qm-geraete-tabelle .btn, html[data-touch] .qm-qr-fuss .btn, html[data-touch] .hygiene-wahl .btn,
  html[data-touch] .hygiene-erfassung .btn { min-height: 44px; }
html:not([data-geraet="desktop"]) .hygiene-code .form-input, html:not([data-geraet="desktop"]) .hygiene-bemerkung,
  html:not([data-geraet="desktop"]) .qm-geraete-filter, html:not([data-geraet="desktop"]) .qm-hygiene-filter .form-input { font-size: 16px; min-height: 44px; }
html[data-geraet="handy"] .hygiene-wahl > *, html[data-geraet="handy"] .hygiene-wahl .sd-eingabe, html[data-geraet="handy"] .hygiene-code { flex: 1 1 100%; max-width: none; }
html[data-geraet="handy"] .hygiene-scannen { justify-content: center; }
html[data-geraet="handy"] .qm-aktionen { text-align: left; white-space: normal; }
html[data-geraet="handy"] .qm-geraete .belegdruck-aktionen > *, html[data-geraet="handy"] .hygiene-erfassung .belegdruck-aktionen > * { flex: 1 1 100%; justify-content: center; }
html[data-geraet="handy"] .qm-hygiene-filter .form-label, html[data-geraet="handy"] .qm-filter-wahl { flex: 1 1 100%; }
html[data-geraet="handy"] .froster-reiter.qm-reiter { flex-wrap: wrap; overflow-x: visible; }
html[data-geraet="handy"] .froster-reiter.qm-reiter > button { flex: 1 1 auto; justify-content: center; }
html[data-touch] .froster-reiter.qm-reiter > button { min-height: 44px; }
.qm-geraete-tabelle td > i { margin-right: 0.35rem; }
/* Turnus und Fälligkeit (seit 27.10.2026) */
.qm-turnus { display: flex; flex-direction: column; gap: 0.4rem; }
.qm-turnus-tage { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.qm-turnus-tage .btn { min-width: 2.8rem; justify-content: center; padding-inline: 0.5rem; }
.qm-untertyp-turnus { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-secondary); }
.hygiene-faellig-ort { margin: 0; }
.hygiene-faellig-ort .form-input { width: auto; }
.hygiene-faellig-liste { list-style: none; margin: 0; padding: 0.3rem 0.6rem 0.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.4rem; }
.hygiene-faellig-eintrag { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border-soft);
  border-left: 4px solid var(--warning); border-radius: var(--radius-main); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hygiene-faellig-eintrag:hover { background: color-mix(in srgb, var(--color-primary) 7%, transparent); }
.hygiene-faellig-eintrag.erledigt { border-left-color: var(--good); opacity: 0.75; }
.hygiene-faellig-eintrag > i { width: 1.2rem; text-align: center; color: var(--color-primary); }
.hygiene-faellig-eintrag.erledigt > i { color: var(--good); }
.hygiene-faellig-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hygiene-faellig-text small { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
html[data-touch] .hygiene-faellig-eintrag, html[data-touch] .qm-turnus-tage .btn { min-height: 44px; }
html:not([data-geraet="desktop"]) .qm-turnus .form-input, html:not([data-geraet="desktop"]) .hygiene-faellig-ort .form-input { font-size: 16px; min-height: 44px; }
html[data-geraet="handy"] .hygiene-faellig-liste { grid-template-columns: minmax(0, 1fr); }
html[data-geraet="handy"] .hygiene-faellig-ort, html[data-geraet="handy"] .hygiene-faellig-ort .form-input { width: 100%; }
/* Statistik: Auswahlpunkte mit Liste (Preise, Abverkauf je Kennzeichen) und Preiswahl der Werte (seit 23.10.2026) */
button.statistik-feld { font: inherit; font-size: 0.85rem; color: inherit; cursor: pointer; }
.statistik-preiswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.statistik-preiswahl .form-label { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.statistik-preiswahl .form-input { width: auto; max-width: 100%; }
.statistik-preiswahl .formular-hinweis { flex: 1 1 100%; margin: 0; }
.modal-box.statistik-listenwahl { max-width: 40rem; }
.statistik-listenwahl-liste { overflow-y: auto; flex: 1; min-height: 0; }
.statistik-listenwahl-gruppe + .statistik-listenwahl-gruppe { margin-top: 0.6rem; }
.statistik-listenwahl-kopf { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.8rem; border-bottom: 1px solid var(--line-soft); }
.statistik-listenwahl-kopf strong { margin-right: auto; font-size: 0.9rem; }
.statistik-listenwahl-eintrag small { display: block; font-size: 0.78rem; color: var(--text-secondary); }
.statistik-listenwahl-hinweis { margin: 0 0 0.5rem; }
.statistik-listenwahl-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.statistik-listenwahl-fuss .formular-hinweis { margin: 0 auto 0 0; }
html[data-touch] .statistik-listenwahl-eintrag { min-height: 44px; }
html[data-touch] .statistik-listenwahl-eintrag input { width: 1.25rem; height: 1.25rem; flex: none; }
html[data-touch] .statistik-listenwahl-kopf .btn-link { min-height: 44px; padding-inline: 0.5rem; }
html[data-touch] .statistik-listenwahl-fuss .btn { min-height: 44px; }
html[data-touch] button.statistik-feld-liste { min-height: 44px; }
html[data-touch] .statistik-preiswahl .form-input { min-height: 44px; font-size: 16px; }
html[data-geraet="handy"] .statistik-preiswahl .form-input { flex: 1 1 100%; }
.statistik-feld-anzahl { min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.75rem; text-align: center; background: color-mix(in srgb, var(--color-primary) 22%, transparent); }
/* Eigener Kalender auf Touch-Geräten (seit 23.10.2026, js/datum.js): Tage hinter dem spätesten bzw. vor dem frühesten Datum
   sind grau und nicht antippbar - der Kalender von Chrome auf Android sperrt sie nicht. Mitte des Bildschirms, deckender
   Hintergrund, Tage ab 44 px, nie breiter als der Bildschirm. */
html[data-touch] .datum-popup-overlay { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center;
  padding: 0.75rem; background: rgba(0, 0, 0, 0.45); }
html[data-touch] .datum-popup { width: min(22rem, 100%); max-height: 100%; overflow-y: auto; padding: 0.75rem; background: var(--popup-bg);
  color: var(--text-primary); border: 1px solid var(--border-soft); border-radius: var(--radius-main); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
html[data-touch] .datum-popup-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
html[data-touch] .datum-popup-kopf strong { flex: 1; text-align: center; font-size: 1rem; text-transform: capitalize; }
html[data-touch] .datum-popup-nav { width: 44px; height: 44px; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: transparent;
  color: var(--text-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; }
html[data-touch] .datum-popup-nav:disabled { opacity: 0.35; }
html[data-touch] .datum-popup-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
html[data-touch] .datum-popup-wochentag { text-align: center; font-size: 0.8rem; padding: 0.3rem 0; color: var(--text-secondary); }
html[data-touch] .datum-popup-tag { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-size: 1rem; cursor: pointer; }
html[data-touch] .datum-popup-tag.heute { box-shadow: inset 0 0 0 1px var(--color-primary); }
html[data-touch] .datum-popup-tag.gewaehlt { background: var(--color-primary); color: #ffffff; font-weight: 600; }
html[data-touch] .datum-popup-tag:disabled { color: var(--text-secondary); opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
html[data-touch] .datum-popup-fuss { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; }
html[data-touch] .datum-popup-fuss .btn { min-height: 44px; }

/* ---------------------------------------------------------------- Statistik: Formeln, Bedingungen, Vergleich je Spalte (seit 23.10.2026) */
.statistik-feld-formel > i.fa-calculator { color: var(--color-primary); }
.statistik-formel-neu { border-style: dashed; color: var(--text-secondary); font: inherit; font-size: 0.85rem; cursor: pointer; }
.statistik-formel-neu:hover { color: var(--text-primary); }
.statistik-feld-filter { color: var(--color-primary) !important; font-size: 0.75rem !important; }
.statistik-feld .statistik-vergleich-schalter.an { color: var(--color-primary); }
.statistik-feld .statistik-vergleich-schalter.aus { opacity: 0.45; text-decoration: line-through; }
.statistik-feld .statistik-vergleich-schalter.aus > i { opacity: 0.6; }

.modal-box.statistik-formel-dialog { max-width: 46rem; max-height: 88vh; }
.statistik-formel-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; margin: 0 -0.25rem; padding: 0 0.25rem; }
.statistik-formel-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: 0.6rem; }
.statistik-formel-inhalt .filter-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.statistik-formel-inhalt .form-label { margin: 0; font-size: 0.85rem; }
.statistik-formel-text { font-family: ui-monospace, Consolas, monospace; resize: vertical; min-height: 4.5rem; }
.statistik-formel-meldung { margin: 0; font-size: 0.88rem; display: flex; gap: 0.4rem; align-items: baseline; }
.statistik-formel-meldung.gut { color: var(--ok-text); }
.statistik-formel-meldung.fehler { color: var(--bad-text); }
.statistik-formel-zeichen { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.statistik-formel-zeichen > .btn { min-width: 2.4rem; justify-content: center; font-weight: 600; }
.statistik-formel-inhalt .statistik-feld { cursor: pointer; font: inherit; font-size: 0.85rem; color: var(--text-primary); }
.statistik-formel-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding-top: 0.75rem; margin-top: 0.5rem; border-top: 1px solid var(--border-soft); }
.statistik-formel-fuss .statistik-formel-loeschen { margin-right: auto; }

.statistik-bedingungen { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.statistik-bedingungen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; }
.statistik-bedingungen-kopf .form-label { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.statistik-bedingungen-kopf .form-label > i { color: var(--color-primary); }
.statistik-bedingung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.statistik-bedingung .form-input { width: auto; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.statistik-bedingung .statistik-bedingung-feld { min-width: 12rem; max-width: 20rem; }
.statistik-bedingung .statistik-bedingung-op { min-width: 4.5rem; }
.statistik-bedingung .statistik-bedingung-zahl { width: 6.5rem; }
.statistik-bedingung .statistik-bedingung-text { width: 12rem; }
.statistik-bedingung.unbekannt .statistik-bedingung-feld { border-color: var(--critical); }
.statistik-bedingung-wert { display: inline-flex; align-items: center; gap: 0.25rem; }
.statistik-bedingung-einheit, .statistik-bedingung-und { color: var(--text-secondary); font-size: 0.85rem; }
.statistik-bedingung-werte { max-width: 22rem; min-width: 9rem; justify-content: space-between; gap: 0.5rem; }
.statistik-bedingung-werte-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.statistik-bedingung-liste { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main);
  background: var(--popup-bg); max-width: 32rem; }
.statistik-bedingung-eintraege { display: flex; flex-direction: column; max-height: 15rem; overflow-y: auto; }
.statistik-bedingung-eintrag { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.25rem; font-size: 0.88rem; cursor: pointer; border-radius: 6px; }
.statistik-bedingung-eintrag:hover { background: var(--hover); }
.statistik-bedingung-liste-fuss { display: flex; justify-content: flex-end; gap: 0.4rem; }
.statistik-bedingung-neu { align-self: flex-start; }

html[data-touch] .statistik-bedingung .form-input, html[data-touch] .statistik-bedingung-suche { min-height: 44px; font-size: 16px; }
html[data-touch] .statistik-bedingung-werte, html[data-touch] .statistik-bedingung-neu, html[data-touch] .statistik-bedingung-liste-fuss > .btn { min-height: 44px; }
html[data-touch] .statistik-bedingung-eintrag { min-height: 44px; }
html[data-touch] .statistik-feld .statistik-vergleich-schalter, html[data-touch] .statistik-feld-formel > .chip-x { min-width: 44px; min-height: 44px; }
html[data-touch] .statistik-formel-neu { min-height: 44px; }
html[data-touch] .statistik-formel-zeichen > .btn { min-width: 44px; }
html[data-touch] .statistik-formel-inhalt .statistik-feld { min-height: 44px; }
/* Grid-Spalten des Baukastens nicht durch breiten Inhalt (Werteliste, Bedingungen) aufweiten - sonst ragt der Aufbau über den Rand. */
html:not([data-geraet="desktop"]) .statistik-baukasten > * { min-width: 0; }
html[data-geraet="handy"] .statistik-bedingung { padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-soft); }
html[data-geraet="handy"] .statistik-bedingung > .statistik-bedingung-feld { flex: 1 1 calc(100% - 52px); min-width: 0; max-width: none; }
html[data-geraet="handy"] .statistik-bedingung > .statistik-bedingung-weg { order: 0; }
html[data-geraet="handy"] .statistik-bedingung > :is(.statistik-bedingung-op) { order: 1; flex: 0 0 auto; }
html[data-geraet="handy"] .statistik-bedingung > :is(.statistik-bedingung-werte, .statistik-bedingung-text, .statistik-bedingung-wert, .statistik-bedingung-zahl, .statistik-bedingung-und) { order: 2; }
html[data-geraet="handy"] .statistik-bedingung > :is(.statistik-bedingung-werte, .statistik-bedingung-text) { flex: 1 1 0; min-width: 0; max-width: none; }
html[data-geraet="handy"] .statistik-bedingung-liste { max-width: none; }
html[data-geraet="handy"] .statistik-formel-kopf { grid-template-columns: 1fr; }
html[data-geraet="handy"] .statistik-formel-fuss > .btn { flex: 1 1 0; justify-content: center; }
html[data-geraet="handy"] .statistik-formel-fuss .statistik-formel-loeschen { flex: 1 1 100%; margin-right: 0; }

/* ---------------------------------------------------------------------- */
/* Messe-Zugänge (seit 23.10.2026): Verwaltung nur für Goecom, QR-Dialog,   */
/* Hinweis „Messe: nur Entwurf“ statt Übernehmen, Kopfzeile ohne Profil.    */
/* ---------------------------------------------------------------------- */
.messe-zeitraum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.messe-zeitraum .datum-feld { width: 100%; }
.messe-status { margin-left: 0.35rem; }
.messe-bestaetigen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.modal-box.messe-qr-dialog { max-width: 34rem; max-height: 92vh; overflow-y: auto; }
.messe-qr-inhalt { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
/* Der QR-Code steht immer schwarz auf weiß (auch im dunklen Modus) - sonst lesen ihn manche Kameras nicht. */
.messe-qr-bild { width: min(16rem, 70vw); aspect-ratio: 1; background: #fff; border-radius: var(--radius-main); padding: 0.4rem; }
.messe-qr-bild svg { width: 100%; height: 100%; display: block; }
.messe-qr-zeitraum { margin: 0; font-weight: 600; }
.messe-link { width: 100%; font-size: 0.85rem; }
.messe-qr-inhalt .status-box { width: 100%; margin: 0; }
.messe-qr-fuss { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.8rem; }
.bestell-messe-hinweis { white-space: nowrap; border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.topbar-messe { cursor: default; }
.topbar-messe .avatar > span { font-size: 0.9rem; }
/* Handy und Tablet: Knöpfe des QR-Dialogs und die Zeitraumfelder groß genug zum Antippen, Datumsfelder auf dem Handy untereinander. */
html[data-touch] .messe-qr-fuss .btn, html[data-touch] .messe-bestaetigen .btn { min-height: 44px; }
html[data-geraet="handy"] .messe-zeitraum { grid-template-columns: 1fr; }
html[data-geraet="handy"] .messe-qr-fuss .btn { flex: 1 1 100%; justify-content: center; }
/* Auf Touch-Geräten bleiben die Knöpfe des QR-Dialogs unten sichtbar, auch wenn der Dialog scrollt. */
html[data-touch] .messe-qr-fuss { position: sticky; bottom: 0; margin: 0.8rem -1.25rem -1.25rem; padding: 0.7rem 1.25rem 1rem; background: var(--popup-bg); border-top: 1px solid var(--border-soft); }
html[data-geraet="handy"] .bestell-messe-hinweis { min-height: 44px; }
/* Knopf „Als Messe-Gast ansehen“ auf der Anmeldeseite (seit 23.10.2026): groß, zweizeilig mit dem Namen der Messe, darunter
   ein Trenner zur normalen Anmeldung. Farben nur über Variablen, Touch-Ziel deutlich über 44 px. */
.messe-gast { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem 0 0.2rem; }
.messe-gast-form { margin: 0; }
.messe-gast-knopf { display: flex; align-items: center; gap: 0.8rem; width: 100%; min-height: 3.6rem; padding: 0.7rem 1rem; text-align: left;
  border-radius: var(--radius-main); border: 2px solid var(--color-primary); color: var(--text-primary); cursor: pointer;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--popup-bg)); }
.messe-gast-knopf:hover, .messe-gast-knopf:focus-visible { background: color-mix(in srgb, var(--color-primary) 22%, var(--popup-bg)); }
.messe-gast-knopf > .fa-store { font-size: 1.4rem; color: var(--color-primary); flex-shrink: 0; }
.messe-gast-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.messe-gast-titel { font-weight: 700; font-size: 1.05rem; }
.messe-gast-name { color: var(--text-secondary); font-size: 0.85rem; overflow-wrap: anywhere; }
.messe-gast-pfeil { color: var(--color-primary); flex-shrink: 0; }
.messe-gast-trenner { display: flex; align-items: center; gap: 0.6rem; color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.3rem; }
.messe-gast-trenner::before, .messe-gast-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--border-soft); }
.messe-anmeldeseite-chip { margin-left: 0.35rem; }

/* Messe-Zugänge: untaugliche Rollen ausgegraut mit Grund statt unsichtbar (seit 23.10.2026). */
.messe-rolle-gesperrt { opacity: 0.55; cursor: not-allowed; }
.messe-rolle-gesperrt { flex-wrap: wrap; row-gap: 0.1rem; }
/* Grund in eigener Zeile unter dem Namen (eingerückt wie der Name) - neben dem Namen brach er auf dem Handy mittendrin um. */
.messe-rolle-grund { flex-basis: 100%; padding-left: calc(1em + 0.55rem); font-size: 0.8rem; color: var(--text-secondary); }

/* Messe (seit 23.10.2026): Kennzeichen MarvinMobile/Marvin hinter den Menüpunkten und im Seitentitel - nur für
   Messe-Besucher (NavLinks, TitleHeader). Zwei Farben je Grundton; auf der farbigen Seitenleiste deckend hinterlegt,
   sonst stünde dunkle Schrift auf der Modusfarbe. Eingeklappt bleibt ein Punkt am Symbol. */
:root { --produkt-mobile: #38bdf8; --produkt-marvin: #fbbf24; --produkt-chip-grund: transparent; --produkt-punkt-rand: transparent; }
:root[data-grundton="light"] { --produkt-mobile: #0369a1; --produkt-marvin: #b45309; }
:root:is([data-theme="blue"], [data-theme="pink"], [data-theme="violet"], [data-theme="green"], [data-theme="yellow"]) :is(.sidebar, .mobile-nav) {
  --produkt-mobile: #0369a1; --produkt-marvin: #b45309; --produkt-chip-grund: #ffffff; --produkt-punkt-rand: #ffffff; }
.produkt-chip { --produkt-farbe: var(--produkt-mobile); display: inline-flex; align-items: center; flex-shrink: 0; padding: 0.05rem 0.4rem;
  border-radius: 999px; font-size: 0.68rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--produkt-farbe); border: 1px solid color-mix(in srgb, var(--produkt-farbe) 55%, transparent);
  background: color-mix(in srgb, var(--produkt-farbe) 14%, var(--produkt-chip-grund)); }
.produkt-chip[data-produkt="marvin"] { --produkt-farbe: var(--produkt-marvin); }
.nav-link-content:has(> .produkt-chip) { display: flex; position: relative; }
.nav-link-content:has(> .produkt-chip) .nav-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-link-content > .produkt-chip { margin-left: auto; }
.produkt-legende { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.2rem 0.75rem 0.45rem; padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); font-size: 0.78rem; color: var(--text-secondary); }
.produkt-legende-zeile { display: block; line-height: 1.55; }
.produkt-legende .produkt-chip { display: inline-flex; vertical-align: 0.05em; margin-right: 0.3rem; }
/* Gewählter Punkt: hell mit Verlauf in der Primärfarbe - der Chip bekommt einen deckenden Grund, sonst Blau auf Blau. */
:root[data-grundton="light"] .nav-link-active .produkt-chip { --produkt-chip-grund: var(--popup-bg); }
/* Handy: im Seitentitel ist kein Platz (er würde abgeschnitten) - das Menü zeigt das Kennzeichen. */
html[data-geraet="handy"] .produkt-chip-titel { display: none; }
.produkt-chip-titel { margin-left: 0.45rem; vertical-align: middle; font-size: 0.7rem; }
@media (min-width: 1024px) {
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .produkt-legende, :root[data-menue="hover"] .sidebar:not(:hover) .produkt-legende { display: none; }
  :root[data-menue="zu"]:not([data-menue-auf]) .sidebar .nav-link-content > .produkt-chip, :root[data-menue="hover"] .sidebar:not(:hover) .nav-link-content > .produkt-chip {
    position: absolute; top: -0.1rem; left: calc(50% + 0.45rem); width: 0.55rem; height: 0.55rem; padding: 0; font-size: 0; border: none;
    background: var(--produkt-farbe); box-shadow: 0 0 0 2px var(--produkt-punkt-rand); }
}

/* ------------------------------------------------------------------ Globalverteilung (seit 25.10.2026, Components/Pages/Globalverteilung.razor)
   Kopf mit Liefertag, Lieferung und Kundenfilter; darunter wie die Artikelstammdaten links die Artikel des Tages, rechts die Kunden des
   gewählten Artikels mit Chargen-Korrektur; Vorschau vor „Übernehmen“ als Seitenleiste. */
.gv-seite { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.gv-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem; }
.gv-felder { flex: 1 1 auto; }
.gv-aktionen { flex: 0 0 auto; }
.gv-artikelkopf { padding-bottom: 0.5rem; }
.gv-eintrag { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.gv-eintrag .artikelstamm-eintrag-wg .artikelstamm-marke { margin-left: 0.3rem; }
.gv-korrektur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; border: 1px solid var(--border-soft);
  border-radius: var(--radius-main); background: var(--surface-faint); }
.gv-korrektur-titel { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-right: 0.3rem; }
.gv-korrektur-titel i { color: var(--color-primary); margin-right: 0.3rem; }
.gv-verteilung { width: auto; min-width: 11rem; }
.gv-wert { width: 12rem; max-width: 100%; }
.gv-kundenfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-bottom: 0.5rem; }
.gv-kundenfilter input[type=search] { flex: 1 1 14rem; min-width: 0; }
.gv-kunden-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.gv-kunden .gv-wahl { width: 2.4rem; text-align: center; }
.gv-kunden .gv-wahl input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.gv-menge { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.gv-kunden tr.gv-geaendert td { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.gv-kunden tr.gv-gesperrt td { color: var(--text-secondary); }
.gv-plus { color: var(--ok-text); font-weight: 600; }
.gv-minus { color: var(--bad-text); font-weight: 600; }
.gv-hinweis { font-size: 0.8rem; color: var(--text-secondary); }
.gv-hinweis > * + * { margin-left: 0.4rem; }
.gv-sperre { color: var(--warning); font-size: 0.8rem; }
.gv-warnung { color: var(--warning); font-weight: 600; }
.gv-ok { color: var(--ok-text); font-size: 0.8rem; }
.gv-vorschau-artikel { margin: 0.8rem 0 0.3rem; font-size: 0.9rem; }
.gv-vorschau-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.gv-vorschau-liste li { padding: 0.35rem 0.5rem; border-radius: 0.5rem; background: var(--surface-faint); }
.gv-vorschau-liste li.gv-gesperrt { opacity: 0.8; }
.gv-vorschau-liste label { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; cursor: pointer; }
.gv-vorschau-liste input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.gv-vorschau-kunde { flex: 1 1 12rem; min-width: 0; }
.gv-vorschau-menge { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gv-vorschau-liste small { display: block; margin-top: 0.15rem; }
.gv-vorschau-zahl { font-size: 0.85rem; color: var(--text-secondary); margin-right: auto; }
html:not([data-geraet="desktop"]) .gv-kunden-wrap { overflow: visible; }
html:not([data-geraet="desktop"]) .gv-korrektur .btn, html:not([data-geraet="desktop"]) .gv-aktionen .btn { min-height: 44px; }
html:not([data-geraet="desktop"]) .gv-kunden .gv-wahl input, html:not([data-geraet="desktop"]) .gv-vorschau-liste input { width: 1.4rem; height: 1.4rem; }
html:not([data-geraet="desktop"]) .gv-vorschau-liste label { min-height: 44px; }
html[data-geraet="handy"] .gv-aktionen { width: 100%; }
html[data-geraet="handy"] .gv-aktionen .btn { flex: 1 1 auto; }
html[data-geraet="handy"] .gv-korrektur > * { flex: 1 1 100%; }
html[data-geraet="handy"] .gv-wert, html[data-geraet="handy"] .gv-verteilung { width: 100%; }
html[data-geraet="handy"] .gv-menge { width: 100%; }

/* ------------------------------------------------------------------ Lagerverwaltung (seit 25.10.2026, Components/Pages/Lagerverwaltung.razor)
   Kopf mit Lager und Zeitraum; darunter wie die Artikelstammdaten links die Entnahmen, rechts die gewählte mit Infotext, Reitern als Leiste und
   den Eingaben je Reiter bzw. der Gesamt-Lagerentnahme. */
.lv-seite { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.lv-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem; }
.lv-felder { flex: 1 1 auto; }
.lv-lagerwahl { min-width: min(20rem, 100%); }
.lv-lagerwahl .sd-eingabe, .lv-hinzu .sd-eingabe { width: 100%; }
.lv-aktionen { flex: 0 0 auto; }
.lv-eintrag { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.lv-eintrag .artikelstamm-eintrag-wg .artikelstamm-marke { margin-left: 0.3rem; }
.lv-entnahmekopf { padding-bottom: 0.5rem; flex-wrap: wrap; }
.lv-detailaktionen { margin-left: auto; }
.lv-grund { margin-bottom: 0.6rem; }
.lv-info { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.7rem; }
.lv-infotext { flex: 1 1 18rem; min-width: 0; }
.lv-infotext textarea { width: 100%; resize: vertical; min-height: 2.6rem; font: inherit; }
.lv-reiter { margin-bottom: 0.6rem; }
.lv-anzahl { display: inline-block; min-width: 1.3rem; margin-left: 0.25rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.75rem; text-align: center;
  background: color-mix(in srgb, currentColor 18%, transparent); }
.lv-hinzu { margin-bottom: 0.6rem; max-width: 32rem; }
.lv-tabelle-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lv-erklaerung { margin: 0 0 0.5rem; }
.lv-menge { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.lv-positionen tr.lv-geaendert td { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.lv-positionen tr.lv-entfernt td { color: var(--text-secondary); }
.lv-hinweis { color: var(--warning); }
html:not([data-geraet="desktop"]) .lv-tabelle-wrap { overflow: visible; }
html:not([data-geraet="desktop"]) .lv-aktionen .btn, html:not([data-geraet="desktop"]) .lv-detailaktionen .btn { min-height: 44px; }
html:not([data-geraet="desktop"]) .lv-menge, html:not([data-geraet="desktop"]) .lv-infotext textarea { font-size: 16px; min-height: 44px; }
html[data-geraet="handy"] .lv-aktionen, html[data-geraet="handy"] .lv-detailaktionen { width: 100%; }
html[data-geraet="handy"] .lv-aktionen .btn, html[data-geraet="handy"] .lv-detailaktionen .btn { flex: 1 1 auto; }
html[data-geraet="handy"] .lv-menge { width: 100%; }
html[data-geraet="handy"] .lv-hinzu { max-width: none; }
/* Fünf Reiter passen auf Handy und Tablet hoch nicht in eine Zeile - umbrechen statt seitlich scrollen (der aktive Reiter läge sonst
   außerhalb); auf dem Handy zwei je Zeile. */
html:not([data-geraet="desktop"]) .froster-reiter.lv-reiter { flex-wrap: wrap; overflow-x: visible; }
html:not([data-geraet="desktop"]) .froster-reiter.lv-reiter > button { flex: 1 1 auto; justify-content: center; }
html[data-geraet="handy"] .froster-reiter.lv-reiter > button { flex: 1 1 calc(50% - 0.5rem); min-width: 0; padding-left: 0.4rem; padding-right: 0.4rem; white-space: normal; }

/* ------------------------------------------------------------------ Filialmonitoring (seit 25.10.2026, Components/Pages/Filialmonitoring.razor,
   Components/Filialmonitoring/FmEinstellungenAnsicht.razor, Warnsymbol Components/Layout/FilialWarnung.razor)
   Kopf mit Filialwahl und „Jetzt prüfen“, Reiter Übersicht/Einstellungen, Kacheln wie die Filialanalyse, Artikeltabelle mit Stand-Marken. */
.fm-seite { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.fm-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem; }
.fm-felder { flex: 1 1 18rem; min-width: 0; }
.fm-aktionen { flex: 0 0 auto; }
.fm-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.fm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.fm-filter input[type=search] { width: 16rem; max-width: 100%; }
.fm-zeile-klick { cursor: pointer; }
.fm-zeile-klick:hover td { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.fm-link { border: 0; background: transparent; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-align: left; }
.fm-zahl-kritisch { color: var(--bad-text); font-weight: 700; }
.fm-hinweis { font-size: 0.8rem; color: var(--text-secondary); }
.fm-artnr { font-size: 0.8rem; color: var(--text-secondary); margin-right: 0.3rem; font-variant-numeric: tabular-nums; }
.fm-aufback { color: var(--text-secondary); white-space: nowrap; }
.fm-klasse { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.4rem; padding: 0 0.3rem; border-radius: 0.4rem;
  font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border-soft); background: var(--surface-faint); color: var(--text-primary); }
.fm-klasse-a { background: color-mix(in srgb, var(--color-primary) 18%, transparent); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
.fm-klasse-b { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
.fm-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-faint); color: var(--text-secondary); }
.fm-status-marke-ok { color: var(--ok-text); background: color-mix(in srgb, var(--ok-text) 12%, transparent); }
.fm-status-marke-knapp { color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, transparent); }
.fm-status-marke-kritisch, .fm-status-marke-ausverkauft { color: var(--bad-text); background: color-mix(in srgb, var(--bad-text) 14%, transparent); }
.fm-artikeltabelle tr.fm-status-kritisch td, .fm-artikeltabelle tr.fm-status-ausverkauft td,
.fm-filialtabelle tr.fm-kritisch td { background: color-mix(in srgb, var(--bad-text) 6%, transparent); }
.fm-einstellungen { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.fm-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem 1rem; padding: 0.8rem 1rem 1rem;
  border-top: 1px solid var(--border-soft); align-items: start; }
.fm-formular .fm-breit, .fm-formular-titel, .fm-formular .status-box { grid-column: 1 / -1; }
.fm-formular-titel { margin: 0; font-size: 1rem; }
.fm-formular .widget-eintrag { align-self: end; }
.fm-erklaerung { margin: 0; align-self: end; font-size: 0.85rem; color: var(--text-secondary); }
.fm-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; grid-column: 1 / -1; }
.fm-minuten { display: flex; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.fm-minuten legend { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.3rem; padding: 0; }
.fm-minuten .form-label { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.35rem; }
.fm-minuten .form-input { min-width: 0; width: 100%; text-align: right; }
.fm-neu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; padding: 0.6rem 1rem; }
.fm-neu .form-label { min-width: 12rem; }
.fm-neu .fm-ziel { flex: 1 1 16rem; min-width: 0; }
.fm-artikelwahl h4 { margin: 0.3rem 0 0.5rem; font-size: 0.9rem; }
.fm-artikelliste { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; max-height: 22rem; overflow: auto; }
.fm-artikelliste li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background: var(--surface-faint); }
.fm-artikelname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-klassewahl { width: 8.5rem; flex: 0 0 auto; }
.fm-adresse { max-width: 26rem; overflow-wrap: anywhere; font-size: 0.85rem; }
.fm-gewaehlt td { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.fm-wirksam { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0.7rem 1rem; border-top: 1px solid var(--border-soft); font-size: 0.85rem;
  color: var(--text-secondary); }
.fm-wirksam strong { color: var(--text-primary); }
.fm-warnung { color: var(--warning); }
.fm-warnung-filiale { display: flex; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.55rem 0.6rem; margin-top: 0.4rem; border: 0;
  border-radius: 0.5rem; background: var(--surface-faint); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.fm-warnung-filiale:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.fm-warnung-filiale span { color: var(--bad-text); font-size: 0.85rem; white-space: nowrap; }
.fm-warnung-liste { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0 0 0 0.3rem; display: flex; flex-direction: column; gap: 0.2rem; }
.fm-warnung-liste li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; }
.fm-warnung-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-warnung-liste small { color: var(--text-secondary); white-space: nowrap; }
.fm-warnung-mehr { color: var(--text-secondary); }
html:not([data-geraet="desktop"]) .fm-aktionen .btn, html:not([data-geraet="desktop"]) .fm-knoepfe .btn,
html:not([data-geraet="desktop"]) .fm-neu .btn, html:not([data-geraet="desktop"]) .fm-warnung-filiale { min-height: 44px; }
html:not([data-geraet="desktop"]) .fm-artikelliste li, html:not([data-geraet="desktop"]) .fm-seite .form-input { min-height: 44px; }
html:not([data-geraet="desktop"]) .fm-artikelliste .btn-icon { min-width: 44px; min-height: 44px; }
html:not([data-geraet="desktop"]) .fm-artikelliste { max-height: none; }
html[data-geraet="handy"] .fm-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
html[data-geraet="handy"] .fm-kacheln .metric-card { padding: 0.6rem 0.7rem; }
html[data-geraet="handy"] .fm-aktionen, html[data-geraet="handy"] .fm-aktionen .btn { width: 100%; }
html[data-geraet="handy"] .fm-filter, html[data-geraet="handy"] .fm-filter input[type=search] { width: 100%; }
html[data-geraet="handy"] .fm-neu > * { flex: 1 1 100%; }
html[data-geraet="handy"] .fm-knoepfe .btn { flex: 1 1 auto; }
html[data-geraet="handy"] .fm-artikelliste li { flex-wrap: wrap; }
html[data-geraet="handy"] .fm-artikelname { flex-basis: calc(100% - 3rem); }
html[data-geraet="handy"] .fm-klassewahl { flex: 1 1 auto; width: auto; }
html[data-geraet="handy"] .fm-minuten { gap: 0.35rem; }
html[data-geraet="handy"] .fm-minuten .form-label { gap: 0.2rem; }
html[data-geraet="handy"] .fm-minuten .form-input { padding-left: 0.4rem; padding-right: 0.4rem; }

/* ---------------------------------------------------------------------- */
/* Bestellvorschlag (seit 29.10.2026): Reiter der Seite und Datengrundlage */
/* (Bedienentwurf docs/konzepte/Bestellvorschlag-Entwurf.html). Farben der */
/* Streifen als eigene Tokens - dunkel hier, hell (gilt auch für die       */
/* farbigen Modi) darunter. Mobiles nur unter html[data-geraet]/[data-touch]. */
/* ---------------------------------------------------------------------- */
:root {
  --bv-aus: #d03b3b; --bv-aus-text: #ffffff;
  --bv-feiertag: #f07c7c; --bv-vortag: #f0a6c4; --bv-ferien: #6aa8ff; --bv-ereignis: #f5a623;
  --bv-heiss: #ffb347; --bv-kalt: #7cc4ff; --bv-regen: #8fb8ff; --bv-schnee: #d6e4ff;
  --bv-ohne-kasse: #9aa4b2; --bv-noch-nicht: #b38cff;
}
:root[data-grundton="light"] {
  --bv-aus: #d92d20; --bv-aus-text: #ffffff;
  --bv-feiertag: #e5484d; --bv-vortag: #e879a8; --bv-ferien: #2f7cf6; --bv-ereignis: #e08a00;
  --bv-heiss: #d97706; --bv-kalt: #0284c7; --bv-regen: #2563eb; --bv-schnee: #64748b;
  --bv-ohne-kasse: #64748b; --bv-noch-nicht: #7c3aed;
}

.bv-dg { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
/* Zeitraum mindestens 21rem: darunter wurden die Datumsfelder abgeschnitten („31.08.202“); dafür Ansicht und Auswahl etwas schmaler. Seit
   29.10.2026 umbrechend (Flex statt drei fester Spalten): unter etwa 1250 px Fensterbreite (1024 px, 1280 px mit 110 % Zoom) lief die Zeile sonst
   über - die Auswahl rutscht dann in eine eigene, volle Zeile. Handy und Tablet: eigenes Raster weiter unten. */
.filter-bar.bv-dg-filter { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.9rem; }
.filter-bar.bv-dg-filter > * { flex: 1 1 13rem; }
.filter-bar.bv-dg-filter > :nth-child(2) { flex: 1 1 21rem; }
.filter-bar.bv-dg-filter > :nth-child(3) { flex: 1.5 1 20rem; }
.bv-segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-soft); border-radius: var(--radius-main); overflow: hidden; width: fit-content; max-width: 100%; }
.bv-segment > button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.88rem; font-weight: 600;
  padding: 0.42rem 0.8rem; cursor: pointer; }
.bv-segment > button + button { border-left: 1px solid var(--border-soft); }
.bv-segment > button:hover:not(:disabled) { background: var(--hover); color: var(--text-primary); }
.bv-segment > button.aktiv { background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--color-primary); }
.bv-segment > button:disabled { opacity: 0.45; cursor: default; }
.bv-segment > button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.bv-dg-legende { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; font-size: 0.8rem; color: var(--text-secondary); }
.bv-leg { display: inline-flex; align-items: center; gap: 0.35rem; }
.bv-leg-f { width: 1.5rem; height: 1.05rem; border-radius: 4px; border: 1px solid var(--border-soft); position: relative; display: inline-flex;
  align-items: center; justify-content: center; background: var(--surface-strong); font-size: 0.7rem; }
.bv-leg-f.bv-aus { background: var(--bv-aus); border-color: transparent; }
.bv-leg-f.bv-zu { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--border-soft) 4px 8px); }
.bv-st { --bv-streifen: transparent; }
.bv-st-ft { --bv-streifen: var(--bv-feiertag); }
.bv-st-vt { --bv-streifen: var(--bv-vortag); }
.bv-st-fe { --bv-streifen: var(--bv-ferien); }
.bv-st-er { --bv-streifen: var(--bv-ereignis); }
.bv-leg-f.bv-st::before, .bv-dg-tabelle .bv-st::before { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 4px; border-radius: 2px;
  background: var(--bv-streifen); }

.bv-dg-karte .card-header { margin-bottom: 0.5rem; }
.bv-dg-hinweise { color: var(--warn-text, var(--text-secondary)); }
.bv-dg-sortiment { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.bv-dg-fuss { margin-top: 0.5rem; }
/* Nur waagrecht scrollen - die Seite hat den einzigen senkrechten Scrollbalken; die erste Spalte steht beim Wischen. */
.bv-dg-wrap { overflow-x: auto; overflow-y: visible; max-width: 100%; }
/* Flüssig bei vielen Zeilen (seit 30.10.2026): die Tabelle scrollt in ihrem Rahmen (am PC bis zum Fensterrand - rest-hoehe an der Karte,
   sonst höchstens eine Bildschirmhöhe), Kopf, erste Spalte und Summenzeile bleiben stehen. Alle Zeilen gleich hoch (--bv-dg-zh), damit
   nur die sichtbaren gezeichnet werden (Virtualize in DatengrundlageTabelle). */
.bv-dg-karte { display: flex; flex-direction: column; }
.bv-dg-karte > .bv-dg-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; max-height: calc(100dvh - 4.5rem); --bv-dg-zh: 2.05rem; }
.bv-dg-karte > .bv-dg-wrap.bv-dg-zweizeilig { --bv-dg-zh: 2.6rem; }
/* Handy und Tablet (seit 30.10.2026): die Karte reicht bis zum unteren Rand (rest-hoehe mit data-rest-mobil), nur die Tabelle scrollt - in
   beide Richtungen, Kopf und erste Spalte bleiben stehen. Vorher scrollten Seite und Tabelle ineinander, der Kopf rutschte unter die Kopfzeile. */
html:not([data-geraet="desktop"]) .bv-dg-karte[data-rest-mobil] > .bv-dg-wrap { max-height: none; }
/* Damit der Tabelle Höhe bleibt: Tag im Detail, Hinweis und Legende unter die Karte. */
.bv-dg-fuss-aussen { display: none; }
html:not([data-geraet="desktop"]) .bv-dg-karte > .bv-dg-fuss { display: none; }
html:not([data-geraet="desktop"]) .bv-dg-teilung > .bv-dg-detail { order: 2; }
html:not([data-geraet="desktop"]) .bv-dg-fuss-aussen { display: block; order: 3; margin: 0; }
html:not([data-geraet="desktop"]) .bv-dg > .bv-dg-legende { order: 4; }
.bv-dg-tabelle tbody > tr > *, .bv-dg-tabelle tfoot > tr > * { height: var(--bv-dg-zh); padding-top: 0.12rem; padding-bottom: 0.12rem; box-sizing: border-box; }
.bv-dg-tabelle thead th { z-index: 3; }
/* td.bv-z steht sonst auf position: relative (Streifen) - die Summenzeile muss trotzdem kleben. */
.bv-dg-tabelle tfoot > tr > *, .bv-dg-tabelle tfoot > tr > td.bv-z { position: sticky; bottom: 0; z-index: 3; background-color: var(--popup-bg);
  box-shadow: 0 4px 0 var(--popup-bg); }   /* deckt die Rundung bei krummen Gerätepixeln (Tablet 1,5x) - sonst blitzte darunter eine Zeile durch */
.bv-dg-tabelle :is(thead, tfoot) .bv-erste { z-index: 4; }
.bv-dg-tabelle tfoot td.bv-zu, .bv-dg-tabelle tfoot td.bv-aus { background-color: var(--popup-bg); }
.bv-dg-tabelle { border-collapse: separate; border-spacing: 0; font-size: 0.82rem; width: max-content; min-width: 100%; }
.bv-dg-tabelle th, .bv-dg-tabelle td { padding: 0.38rem 0.45rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.bv-dg-tabelle thead th { color: var(--text-secondary); font-weight: 600; background: var(--table-head-bg); }
.bv-dg-tabelle th.bv-kopf { text-align: center; min-width: 3.2rem; }
.bv-dg-tabelle th small, .bv-dg-tabelle .bv-erste small { display: block; font-weight: 400; font-size: 0.68rem; color: var(--text-secondary); }
.bv-dg-tabelle .bv-erste { position: sticky; left: 0; z-index: 2; background: var(--popup-bg); text-align: left; font-weight: 500; }
.bv-dg-tabelle > thead .bv-erste { z-index: 4; }
.bv-dg-tabelle thead .bv-erste { background: var(--table-head-bg); z-index: 4; }
.bv-dg-tabelle .bv-zahl { text-align: right; }
.bv-dg-tabelle td.bv-z { text-align: right; position: relative; font-variant-numeric: tabular-nums; min-width: 3.2rem; }
.bv-dg-tabelle td.bv-klick { cursor: pointer; }
.bv-dg-tabelle td.bv-klick:hover { background: var(--row-hover); }
.bv-dg-tabelle td.bv-aus, .bv-dg-tabelle td.bv-aus:hover { background: color-mix(in srgb, var(--bv-aus) 88%, transparent); color: var(--bv-aus-text); font-weight: 700; }
.bv-dg-tabelle td.bv-zu { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--line-soft) 5px 10px); color: var(--text-secondary); }
.bv-dg-tabelle td.bv-na, .bv-dg-tabelle td.bv-leer { color: var(--text-secondary); text-align: center; }
.bv-dg-tabelle .bv-hoch { display: block; font-size: 0.68rem; font-weight: 600; opacity: 0.95; white-space: nowrap; }
/* Hochgerechnete Nachfrage (seit 31.10.2026): Symbol mit Abstand und „~“ - unverwechselbar mit einer Ziffer. */
.bv-hoch > i, .bv-hoch-wert > i { font-size: 0.85em; margin-right: 0.22em; }
.bv-hoch-leg { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 0.3rem;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.bv-hoch-wert { white-space: nowrap; font-weight: 600; }
.bv-dg-tabelle .bv-anz-aus { display: block; width: fit-content; margin: 2px 0 0 auto; font-size: 0.62rem; line-height: 1; background: var(--bv-aus);
  color: var(--bv-aus-text); border-radius: 999px; padding: 0.12rem 0.3rem; white-space: nowrap; }
.bv-dg-tabelle td.bv-gewaehlt { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.bv-dg-tabelle td.bv-summe { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; border-left: 1px solid var(--border-soft); }
.bv-dg-tabelle td.bv-quote { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.bv-dg-tabelle tr.bv-summenzeile > * { font-weight: 700; border-top: 2px solid var(--border-soft); }
.bv-dg-tabelle tr.bv-unter > td:not(.bv-aus):not(.bv-zu):not(.bv-ohne-kasse):not(.bv-noch-nicht) { background: var(--surface-faint); }
/* Tage ohne Kassendaten (Punkte, „?“) und vor dem ersten Verkauf (Tönung, Sanduhr) - seit 09.11.2026. Ein Artikel an einem Tag: die ganze Zelle;
   Summen über mehrere Tage oder Artikel (bv-kasse-teil): nur das Zeichen in der Ecke. */
.bv-dg-tabelle td.bv-ohne-kasse:not(.bv-kasse-teil), .bv-leg-f.bv-ohne-kasse {
  background-color: color-mix(in srgb, var(--bv-ohne-kasse) 10%, transparent);
  background-image: radial-gradient(color-mix(in srgb, var(--bv-ohne-kasse) 55%, transparent) 1px, transparent 1.4px); background-size: 6px 6px; }
.bv-dg-tabelle td.bv-ohne-kasse:not(.bv-kasse-teil) { color: var(--text-secondary); font-weight: 600; }
.bv-dg-tabelle td.bv-noch-nicht:not(.bv-kasse-teil), .bv-leg-f.bv-noch-nicht { background-color: color-mix(in srgb, var(--bv-noch-nicht) 16%, transparent); }
.bv-dg-tabelle td.bv-noch-nicht:not(.bv-kasse-teil) { color: var(--text-secondary); }
.bv-dg-tabelle td .bv-kasse-ic { position: absolute; left: 3px; bottom: 3px; display: inline-flex; gap: 2px; font-size: 0.6rem; line-height: 1; }
.bv-ic-ohne-kasse { color: var(--bv-ohne-kasse); }
.bv-ic-noch-nicht { color: var(--bv-noch-nicht); }
.bv-leg-f .bv-ic-ohne-kasse, .bv-leg-f .bv-ic-noch-nicht { font-size: 0.62rem; }
.bv-dg-tabelle .bv-summe-hinweis, .bv-leg .bv-summe-hinweis { font-size: 0.62rem; color: var(--text-secondary); margin-right: 0.3rem; vertical-align: 0.1em; }
.bv-dg-tabelle tr.bv-unter > .bv-erste { padding-left: 1.4rem; background: color-mix(in srgb, var(--color-primary) 5%, var(--popup-bg)); font-weight: 400; }
.bv-woche-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; border: 0; background: transparent; color: inherit;
  font: inherit; padding: 0; cursor: pointer; text-align: left; }
.bv-woche-knopf i { color: var(--text-secondary); font-size: 0.7rem; margin-left: 0.2rem; }
.bv-woche-knopf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.bv-dg-detail .card-body { font-size: 0.85rem; padding-top: 0.4rem; }
.bv-dg-leer { margin: 0; color: var(--text-secondary); }
.bv-dg-detail-titel { margin: 0; font-weight: 700; }
.bv-dg-detail-kopf { margin: 0.1rem 0 0.4rem; color: var(--text-secondary); font-size: 0.8rem; }
.bv-dg-marken { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.bv-dg-marke { font-size: 0.75rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--text-primary); }
.bv-dg-zeilen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); column-gap: 1.4rem; }
.bv-dg-zeile { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.28rem 0; border-bottom: 1px dashed var(--line-soft); }
.bv-dg-zeile span:last-child { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bv-dg-ausliste { margin: 0.4rem 0 0; color: var(--text-secondary); font-size: 0.8rem; }
/* Stundenverlauf in „Tag im Detail“ (seit 02.11.2026): Säulen je Stunde, Strich = üblich bei der Nachfrage des Tages. */
.bv-dg-stunden { margin: 0.6rem 0 0.2rem; }
.bv-dg-stunden-titel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.bv-dg-stunden-legende { display: inline-flex; align-items: center; gap: 0.35rem; }
.bv-dg-stunden-legende-ueblich { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--text-primary); }
.bv-dg-stunden-legende-verkauft { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--color-primary) 70%, transparent); }
.bv-dg-stunden-balken { display: flex; align-items: stretch; gap: 3px; }
.bv-dg-stunde { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; border-radius: 4px; }
.bv-dg-stunde.gewaehlt { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.bv-dg-stunde-wert { font-size: 0.68rem; text-align: center; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-height: 1em; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.bv-dg-stunde-flaeche { position: relative; height: 72px; border-bottom: 1px solid var(--line-soft); }
.bv-dg-stunde-saeule { position: absolute; left: 12%; right: 12%; bottom: 0; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--color-primary) 70%, transparent); }
.bv-dg-stunde-ueblich { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--text-primary); }
.bv-dg-stunde-uhr { font-size: 0.68rem; text-align: center; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bv-dg-stunde-flaeche { display: block; }
.bv-dg-stunden-wahl { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.82rem;
  font-variant-numeric: tabular-nums; text-align: center; }
html[data-geraet="handy"] .bv-dg-stunden-balken { gap: 1px; }
html[data-geraet="handy"] .bv-dg-stunde-wert, html[data-geraet="handy"] .bv-dg-stunde-uhr { font-size: 0.6rem; letter-spacing: -0.02em; }
html[data-geraet="handy"] .bv-dg-stunde-saeule { left: 8%; right: 8%; }
html[data-geraet="handy"] .bv-dg-stunden-wahl { font-size: 0.85rem; }
.bv-dg-stunde.nach-leer .bv-dg-stunde-flaeche { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
/* Tagesverlauf oben in „Tag im Detail“ (seit 03.11.2026): zwischen Kopf und Liste, scrollt nicht mit - bleibt im Bild, während man in der Liste
   Artikel bzw. Tage anklickt. Darunter die anklickbaren Zeilen der Liste, die gewählte markiert. */
.bv-dg-verlauf-bereich { flex: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0.15rem 0 0.4rem; font-size: 0.85rem; }
.bv-dg-verlauf { border-radius: 10px; padding: 0.45rem 0.6rem 0.35rem; background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); }
.bv-dg-verlauf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.bv-dg-verlauf-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.8rem; min-width: 0; }
.bv-dg-verlauf-titel { overflow-wrap: anywhere; }
.bv-dg-verlauf-titel i, .bv-dg-verlauf-aufforderung i { color: var(--color-primary); }
.bv-dg-verlauf-info { color: var(--text-secondary); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.bv-dg-verlauf-zu { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); margin: -0.2rem -0.3rem 0 0;
  width: 28px; height: 28px; padding: 0; }
.bv-dg-verlauf-zu:hover { background: var(--hover); color: var(--text-primary); }
.bv-dg-verlauf .bv-dg-stunden { margin: 0.35rem 0 0; }
.bv-dg-verlauf-ohne, .bv-dg-verlauf-aufforderung { margin: 0; color: var(--text-secondary); font-size: 0.8rem; }
.bv-dg-verlauf-ohne { margin-top: 0.3rem; }
.bv-dg-detail-zurueck { align-self: flex-start; }
.bv-dg-detail-tabelle tr.bv-dg-detail-klick { cursor: pointer; }
.bv-dg-detail-tabelle tr.bv-dg-detail-klick:hover > td { background: var(--hover); }
.bv-dg-detail-tabelle tr.bv-dg-detail-gewaehlt > td, .bv-dg-detail-tabelle tr.bv-dg-detail-gewaehlt:hover > td { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
.bv-dg-detail-name { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: none; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; }
.bv-dg-detail-name i { color: var(--color-primary); font-size: 0.75rem; flex: none; }
.bv-dg-detail-name:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
html[data-touch] .bv-dg-verlauf-zu { width: 44px; height: 44px; }
html[data-touch] .bv-dg-detail-zurueck { min-height: 44px; }
html[data-touch] .bv-dg-detail-name { min-height: 44px; }
html[data-geraet="handy"] .bv-dg-detail-tabelle tr.bv-dg-detail-gewaehlt { box-shadow: inset 0 0 0 2px var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
html[data-geraet="handy"] .bv-dg-detail-tabelle tr.bv-dg-detail-gewaehlt > td,
html[data-geraet="handy"] .bv-dg-detail-tabelle tr.bv-dg-detail-gewaehlt:hover > td { background: transparent; }
.bv-dg-vorschlag { margin-top: 0.6rem; border-radius: 10px; padding: 0.5rem 0.6rem; background: color-mix(in srgb, var(--color-primary) 12%, transparent); font-size: 0.82rem; }
.bv-dg-tip { position: fixed; z-index: 1200; pointer-events: none; display: none; max-width: 300px; background: var(--popup-bg); color: var(--text-primary);
  border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.5rem 0.65rem; font-size: 0.78rem; line-height: 1.4; box-shadow: var(--schatten-hoch, 0 10px 28px rgba(0, 0, 0, 0.35)); }
.bv-dg-tip .grau { color: var(--text-secondary); }
.bv-dg-tip .marke { color: var(--color-primary); }
/* Tag im Detail im Bild (seit 01.11.2026, Wunsch des Nutzers - vorher stand es weit unter der Tabelle). Die Hülle um Tabelle, Hinweis und Detail
   ist ohne Detail unsichtbar (display: contents), die Seite sieht aus wie zuvor. Mit Detail am PC und Tablet geteilt: beide zusammen in einer
   Hülle so hoch wie das Fenster unter der Kopfzeile (--bv-dg-platz aus js/bestellvorschlag.js, sonst angenähert), das Detail in seiner Höhe bis zum
   halben Fenster, die Tabelle gibt den Rest ab und scrollt in sich (rest-hoehe tritt dafür zurück). Handy: Blatt von unten, Tabelle dahinter. */
.bv-dg-teilung { display: contents; }
/* Feste Höhe statt höchstens: ein kürzeres Detail beim Wechsel der Zelle ließe sonst die Seite kürzer werden - unten am Rand sprang sie dann. */
html:not([data-geraet="handy"]) .bv-dg-teilung.bv-dg-geteilt { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
  height: var(--bv-dg-platz, calc(100dvh - var(--kopf-hoehe) - 1.5rem)); }
html:not([data-geraet="handy"]) .bv-dg-geteilt > .bv-dg-karte { flex: 0 1 auto; min-height: 9rem; max-height: none !important; }
html:not([data-geraet="handy"]) .bv-dg-geteilt > .bv-dg-fuss-aussen { display: none; }
html:not([data-geraet="handy"]) .bv-dg-geteilt > .bv-dg-detail { flex: 0 0 auto; max-height: 50dvh; min-height: 0; display: flex; flex-direction: column; }
/* Mit Tagesverlauf (seit 03.11.2026) etwas mehr Höhe, damit unter ihm noch genug von der Liste bleibt. */
html:not([data-geraet="handy"]) .bv-dg-geteilt > .bv-dg-detail.mit-verlauf { max-height: 55dvh; }
html:not([data-geraet="handy"]) .bv-dg-geteilt > .bv-dg-detail > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bv-dg-detail > .card-header { align-items: center; }
.bv-dg-detail-zu { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-secondary); font-size: 1.05rem; }
.bv-dg-detail-zu:hover { background: var(--hover); color: var(--text-primary); }
.bv-dg-detail-zu:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
html[data-touch] .bv-dg-detail-zu { width: 44px; height: 44px; }
html[data-geraet="handy"] .bv-dg-detail.offen { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; max-height: 70dvh; margin: 0;
  display: flex; flex-direction: column; padding: 0.5rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--popup-bg);
  border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -8px 24px color-mix(in srgb, var(--text-primary) 22%, transparent); }
html[data-geraet="handy"] .bv-dg-detail.offen > .card-header { flex: none; margin-bottom: 0.2rem; }
html[data-geraet="handy"] .bv-dg-detail.offen > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Tablet hoch und Handy: Filter untereinander bzw. zwei Spalten, Touch-Ziele ≥ 44 px, Tabelle bleibt Tabelle. */
html:not([data-geraet="desktop"]) .filter-bar.bv-dg-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html:not([data-geraet="desktop"]) .filter-bar.bv-dg-filter > .filter-gruppe:last-child { grid-column: 1 / -1; }
html[data-geraet="handy"] .filter-bar.bv-dg-filter { grid-template-columns: minmax(0, 1fr); }
html[data-touch] .bv-reiter > button:not(.btn) { min-height: 44px; }
html[data-geraet="handy"] .bv-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html[data-geraet="handy"] .bv-reiter > button { flex: 0 0 auto; }
/* Verlauf am Rand, solange es in diese Richtung weitergeht - rein über CSS (Scroll-Zeitleiste der Leiste): Klassen aus JS setzte Blazor beim
   nächsten Rendern wieder zurück. Ohne Unterstützung (Firefox) bzw. ohne Überlauf bleibt die Leiste ohne Verlauf. Nur Alpha, keine Farbe. */
@property --bv-rand-links { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --bv-rand-rechts { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes bv-reiter-rand {
  0% { --bv-rand-links: 0px; --bv-rand-rechts: 2.5rem; }
  8% { --bv-rand-links: 2.5rem; }
  92% { --bv-rand-rechts: 2.5rem; }
  100% { --bv-rand-links: 2.5rem; --bv-rand-rechts: 0px; }
}
html[data-geraet="handy"] .bv-reiter { overscroll-behavior-x: contain; }
@supports (animation-timeline: scroll()) {
  html[data-geraet="handy"] .bv-reiter { animation: bv-reiter-rand linear both; animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--bv-rand-links), #000 calc(100% - var(--bv-rand-rechts)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--bv-rand-links), #000 calc(100% - var(--bv-rand-rechts)), transparent); }
}
html[data-touch] .bv-segment > button { min-height: 44px; padding-left: 0.9rem; padding-right: 0.9rem; }
html[data-geraet="handy"] .bv-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
html[data-geraet="handy"] .bv-segment > button { padding-left: 0.4rem; padding-right: 0.4rem; display: inline-flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.1rem 0.3rem; }
html[data-geraet="handy"] .bv-segment > button .bv-zahlmarke { margin-left: 0; }
/* Ab vier Teilen (Artikelbeziehungen) zwei Spalten statt vier zu schmaler - sonst werden „Austauschgruppen“ und „Pflegelisten“ abgeschnitten. */
html[data-geraet="handy"] .bv-segment:has(> button:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-geraet="handy"] .bv-segment:has(> button:nth-child(4)) > button:nth-child(odd) { border-left: 0; }
html[data-geraet="handy"] .bv-segment:has(> button:nth-child(4)) > button:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
html[data-touch] .bv-dg-sortiment { min-height: 44px; }
html[data-touch] .bv-dg-sortiment input { width: 1.25rem; height: 1.25rem; }
html[data-touch] .bv-dg-tabelle td.bv-z, html[data-touch] .bv-dg-tabelle th.bv-kopf { min-width: 2.75rem; }
html[data-touch] .bv-dg-tabelle th.bv-kopf { height: 2.75rem; }
html[data-touch] .bv-dg-karte > .bv-dg-wrap { --bv-dg-zh: 2.75rem; }
html[data-touch] .bv-woche-knopf { min-height: 44px; justify-content: center; }
html[data-geraet="handy"] .bv-dg-tabelle { font-size: 0.78rem; }
html[data-geraet="handy"] .bv-dg-tabelle .bv-erste { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
html[data-geraet="handy"] .bv-dg-legende { gap: 0.3rem 0.7rem; font-size: 0.75rem; }

/* ---------------------------------------------------------------------- */
/* Bestellvorschlag in der Bestellung (seit 29.10.2026): Spalte „Vorschlag“, Rechenweg, „Vorschlag übernehmen“, auf Handy und Tablet als
   Chip und im Mengen-Pad. Der Rechenweg ist eine eigene Komponente (Components/Bestellvorschlag/Rechenweg.razor). */
/* ---------------------------------------------------------------------- */
.beleg-vorschlag { white-space: nowrap; }
.beleg-vorschlag.aus-vorschlag .beleg-vorschlag-wert { color: var(--color-primary); font-weight: 700; }
.beleg-vorschlag-info { margin-left: 0.2rem; padding: 0.05rem 0.2rem; border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; line-height: 1; }
.beleg-vorschlag-info:hover, .beleg-vorschlag-info.aktiv { color: var(--color-primary); }
.beleg-vorschlag-warnung { margin-right: 0.25rem; color: var(--warning); }
/* Vor- und Kundenbestellungen im Vorschlag (seit 01.11.2026): klein hinter dem Wert, die Zeile wird nicht höher. */
.beleg-vorschlag-sonder { margin-left: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.beleg-artikel tr.beleg-rechenweg-zeile > td { padding: 0.25rem 0.5rem 0.6rem; background: var(--row-hover); text-align: left; }
.bestell-vorschlag-wahl { display: inline-flex; align-items: center; gap: 0.3rem; }
.bestell-vorschlag-wahl .bestell-vorschlag-ziel { width: auto; min-height: 0; padding: 0.4rem 0.5rem; font-size: 0.85rem; }
.bestell-vorschlag-knopf { white-space: nowrap; }
/* Warnungen des Vorschlags ohne sichtbare Zeile (seit 29.10.2026): Knopf im Kopf der Tabelle, Liste im Fenster. */
.bestell-vorschlag-hinweise-knopf { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); white-space: nowrap; }
.bestell-vorschlag-hinweise-knopf i { color: var(--warning); }
.modal-box.sonder-dialog.bestell-vorschlag-hinweise { max-width: 44rem; height: auto; }
.bv-hinweis-liste { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bv-hinweis-liste li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-main);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.bv-hinweis-text { font-weight: 600; color: var(--text-primary); }
.bv-hinweis-bei { font-size: 0.85rem; color: var(--text-secondary); overflow-wrap: anywhere; }
details.bv-hinweis-bei > summary { cursor: pointer; }
html[data-touch] details.bv-hinweis-bei > summary { min-height: 44px; display: list-item; padding: 0.6rem 0; }
html[data-geraet] .bestell-vorschlag-hinweise-knopf { min-height: 44px; }
.bv-hinweise-kurz { display: none; }
html[data-geraet="handy"] .bestell-vorschlag-hinweise-knopf { flex-shrink: 0; padding-left: 0.6rem; padding-right: 0.6rem; }
html[data-geraet="handy"] .bestell-vorschlag-hinweise-knopf .bv-hinweise-lang { display: none; }
html[data-geraet="handy"] .bestell-vorschlag-hinweise-knopf .bv-hinweise-kurz { display: inline; font-weight: 700; }

/* Rechenweg: Zeilen Text | Wert | Hinweis, Summen kräftig, das Ergebnis hervorgehoben, Hinweise als Marken darunter. */
.rechenweg { border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--popup-bg); padding: 0.6rem 0.85rem; max-width: 52rem; }
.rw-kopf { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; margin-bottom: 0.35rem; font-size: 0.9rem; }
.rw-nr { color: var(--text-secondary); font-size: 0.82rem; }
.rw-z { display: grid; grid-template-columns: minmax(8rem, 20rem) 4.5rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; padding: 0.3rem 0.1rem;
  border-bottom: 1px dashed var(--border-soft); font-size: 0.82rem; }
.rw-l { color: var(--label); }
.rw-w { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rw-n { color: var(--text-secondary); font-size: 0.76rem; }
.rw-summe { border-bottom: 1px solid var(--border-soft); }
.rw-summe .rw-l, .rw-summe .rw-w { font-weight: 700; color: var(--text-primary); }
.rw-ergebnis { margin-top: 0.35rem; border: 0; border-radius: 8px; padding: 0.45rem 0.1rem; background: color-mix(in srgb, var(--color-primary) 13%, transparent); }
.rw-ergebnis .rw-l { font-weight: 700; color: var(--text-primary); }
.rw-ergebnis .rw-w { color: var(--color-primary); font-size: 1.05rem; }
.rw-fuss { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.rw-marke { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border: 1px solid var(--border-soft); border-radius: 999px;
  font-size: 0.75rem; color: var(--text-secondary); }
.rw-marke.warnung { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
a.rw-marke.rw-link { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); text-decoration: none; }
a.rw-marke.rw-link:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
/* Touch-Ziel „Datengrundlage ansehen“ (seit 29.10.2026): mindestens 44 px hoch, Text mittig. */
html[data-touch] a.rw-marke.rw-link { min-height: 44px; justify-content: center; padding-left: 0.9rem; padding-right: 0.9rem; }
/* Zusammengefasste Verkaufsartikel (seit 29.10.2026): „+ n weitere …“ klappt die Zeilen darunter auf, eingerückt. */
.rw-weitere > summary { list-style: none; cursor: pointer; }
.rw-weitere > summary::-webkit-details-marker { display: none; }
.rw-weitere-kopf .rw-l { color: var(--color-primary); font-weight: 600; }
.rw-weitere-kopf:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.rw-pfeil { font-size: 0.7rem; margin-right: 0.3rem; transition: transform 0.15s; }
.rw-weitere[open] .rw-pfeil { transform: rotate(90deg); }
.rw-weitere[open] .rw-weitere-kopf .rw-n { visibility: hidden; }
.rw-weitere > .rw-z { padding-left: 1.1rem; }

/* Handy und Tablet: Vorschlag als Chip unter der Zeile (ein Tipp übernimmt), im Pad Kurzbegründung und Knopf. Touch-Ziele 44 px. */
html:not([data-geraet="desktop"]) .mobil-vorschlag-chip { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; max-width: 100%; padding: 0.3rem 0.8rem; border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--text-primary); font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
  touch-action: manipulation; }
html:not([data-geraet="desktop"]) .mobil-vorschlag-chip i { color: var(--color-primary); }
html:not([data-geraet="desktop"]) .mobil-vorschlag-chip.warnung { border-color: color-mix(in srgb, var(--warning) 45%, transparent); white-space: normal; }
html:not([data-geraet="desktop"]) .mobil-vorschlag-chip.warnung i { color: var(--warning); }
html:not([data-geraet="desktop"]) .mobil-vorschlag-sonder { font-weight: 600; }
html:not([data-geraet="desktop"]) .mobil-vorschlag-chip.still { min-height: 0; padding: 0.15rem 0.6rem; background: none; border-color: var(--border-soft);
  color: var(--text-secondary); cursor: default; font-size: 0.8rem; }
html:not([data-geraet="desktop"]) .mengen-pad-vorschlag { display: flex; flex-direction: column; gap: 0.4rem; }
html:not([data-geraet="desktop"]) .mengen-pad-vorschlag-text { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; margin: 0; font-size: 0.85rem;
  color: var(--text-secondary); }
html:not([data-geraet="desktop"]) .mengen-pad-vorschlag-text b { color: var(--color-primary); }
/* Vorschlag im Pad (seit 02.11.2026): eine Taste im Tastenfeld statt eigener Zeilen - das Pad bleibt so hoch wie ohne Vorschlag und
   die Zeile darüber sichtbar. Unten 0, Vorwoche (falls da) und „Vorschlag“ (doppelt breit); ⓘ im Kopf klappt Kurzbegründung und
   Rechenweg auf. */
html:not([data-geraet="desktop"]) .mengen-pad-tasten:has(.mengen-pad-taste-vorschlag):has(.mengen-pad-schnell) > :is(.mengen-pad-null, .mengen-pad-schnell) { grid-column: span 1; }
html:not([data-geraet="desktop"]) .mengen-pad-taste-vorschlag { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.05rem; line-height: 1.15; padding: 0.2rem 0.4rem; font-size: 1rem; color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent); }
html:not([data-geraet="desktop"]) .mengen-pad-taste-vorschlag small { font-size: 0.72rem; font-weight: 500; }
html:not([data-geraet="desktop"]) .mengen-pad-taste-vorschlag > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([data-geraet="desktop"]) .mengen-pad-schnell:has(~ .mengen-pad-taste-vorschlag) small { font-size: 0.65rem; }
html:not([data-geraet="desktop"]) .mengen-pad-begruendung-knopf { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--text-secondary); }
html:not([data-geraet="desktop"]) .mengen-pad-begruendung-knopf.aktiv { color: var(--color-primary); }
/* Handy: die Angaben (Vorwochen, Ø) enger, damit sie meist in eine Zeile passen (bei vielen brechen sie weiter um). */
html[data-geraet="handy"] .mengen-pad-angaben { gap: 0.25rem; }
html[data-geraet="handy"] .mengen-pad-angaben > div { gap: 0.2rem; padding: 0.1rem 0.4rem; font-size: 0.75rem; }
html:not([data-geraet="desktop"]) :is(.mengen-pad-begruendung, .bv-ef-detail) .rechenweg { max-width: none; padding: 0.5rem 0.6rem; }
html:not([data-geraet="desktop"]) :is(.mengen-pad-begruendung, .bv-ef-detail) .rw-z { grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.6rem; }
html:not([data-geraet="desktop"]) :is(.mengen-pad-begruendung, .bv-ef-detail) .rw-n { grid-column: 1 / -1; }
html:not([data-geraet="desktop"]) :is(.mengen-pad-begruendung, .bv-ef-detail) .rw-weitere-kopf { min-height: 44px; align-content: center; }
html:not([data-geraet="desktop"]) :is(.mengen-pad-begruendung, .bv-ef-detail) .rw-weitere-kopf .rw-n { display: none; }
html:not([data-geraet="desktop"]) :is(.mengen-pad-begruendung, .bv-ef-detail) .rw-weitere > .rw-z { padding-left: 0.6rem; }
html:not([data-geraet="desktop"]) .mengen-pad-vorschlag-knopf { width: 100%; min-height: 48px; justify-content: center; }

/* ---------------------------------------------------------------------- */
/* Bestellvorschlag – Vorschläge und Güte */
/* (seit 29.10.2026, Bedienentwurf docs/konzepte/Bestellvorschlag-Entwurf.html): Kopf mit Liefertag, Kacheln, Filialtabelle mit   */
/* Aktionsleiste (am PC unten in der Karte, auf Handy und Tablet klebend), Dialog der Sammelübernahme, Güte mit Balken und Freigabe. */
/* Farben nur über Tokens; Mobiles nur unter html[data-geraet]/[data-touch].                                                      */
/* ---------------------------------------------------------------------- */
.bv-vs, .bv-gt { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
/* Rückblick auf vergangene Liefertage (seit 30.10.2026) und Stand je Filiale in der Güte. */
.bv-rb { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; flex: 1 1 auto; }
.bv-rb-erkl, .bv-rb-ohne-kasse { padding: 0.6rem 0.9rem; }
.bv-rb-erkl .card-subtitle, .bv-rb-ohne-kasse .card-subtitle { margin: 0; }
.bv-rb-fehlt { padding: 0.6rem 0.9rem; }
.bv-rb-fehlt-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.bv-rb-fehlt-zeile > p { margin: 0; min-width: 0; }
.bv-rb-fuss { padding: 0.4rem 0.9rem 0.6rem; margin: 0; }
.bv-rb-tabelle .karte-zusatz .bv-marke, .bv-rb-artikeltabelle .karte-zusatz .bv-marke { margin-right: 0.25rem; }
/* Stand darf umbrechen (seit 01.11.2026): mit den Spalten Unterschied, Retoure und WAPE passt die Tabelle sonst am Laptop nicht mehr. */
.bv-gt-stand-zelle { min-width: 8rem; font-size: 0.88rem; color: var(--text-secondary); }
/* Freigabe je Filiale (seit 01.11.2026): Unterschied farbig nur in der Schrift, die Paare Vorschlag / tatsächlich in einer Zeile. */
.bv-gt-zahlpaar, .bv-gt-unterschied { white-space: nowrap; }
.bv-gt-th-zusatz { display: block; font-weight: 400; font-size: 0.78rem; color: var(--text-secondary); }
/* Rückblick (seit 02.11.2026): unter „verkauft“ die Vorbestellungen des Artikels, die nicht mitzählen - darf umbrechen, sonst macht er die Spalte
   auf dem Tablet und am Laptop breiter als nötig. */
.bv-rb-vorbestellt { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-secondary); }
.bv-gt-unterschied.bv-gt-besser { color: var(--ok-text); font-weight: 600; }
.bv-gt-unterschied.bv-gt-schlechter { color: var(--bad-text); font-weight: 600; }
/* Retoure je Warengruppe (seit 02.11.2026): die erreichte Retoure mit Vorschlag und dahinter, ob „höchstens“ bzw. „anpeilen“ passt. */
.bv-gt-gruppe-artikel { font-size: 0.82rem; font-weight: 400; white-space: nowrap; }
.bv-gt-gruppe-erreicht { white-space: nowrap; }
.bv-gt-gruppe-erreicht .bv-marke { margin-left: 0.4rem; }
/* Handy: Einstellung (mit Aufteilung bei „unterschiedlich“) in eigener Zeile, Wert und Marke dürfen umbrechen - sonst lief beides über den Kartenrand.
   So spezifisch wie die Regel der Kartenliste (td.karte-label: nicht umbrechen), sonst gilt sie (Review 02.11.2026). */
html[data-geraet="handy"] .karten-tabelle.karten-kompakt.bv-gt-gruppentabelle > tbody > tr > td.karte-titel { flex: 1 1 100%; }
html[data-geraet="handy"] .karten-tabelle.karten-kompakt.bv-gt-gruppentabelle > tbody > tr > td:is(.bv-gt-gruppe-einstellung, .bv-gt-gruppe-erreicht) {
  flex: 1 1 100%; min-width: 0; white-space: normal; }
html[data-geraet="handy"] .bv-gt-gruppe-erreicht .bv-marke { display: inline-flex; margin: 0.2rem 0 0 0.3rem; }
/* Güte aus den gespeicherten Zeilen (seit 31.10.2026): fehlende Tage mit „Fehlende jetzt rechnen“ und die Liste je Tag (Zeile führt in den Rückblick). */
.bv-gt-fehlend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.5rem; }
.bv-gt-fehlend .card-subtitle { margin: 0; }
.bv-gt-tag { cursor: pointer; }
.bv-gt-tag:hover > td.karte-titel { color: var(--color-primary); }
html[data-touch] .bv-gt-fehlende { min-height: 44px; }
/* Güte: Tag direkt aufklappen (seit 01.11.2026) - Fazit und größte Abweichungen unter der Zeile, „Im Rückblick öffnen“ für alles Weitere.
   Am PC der Knopf nur als Symbol; auf dem Handy die Zeile als Karte mit breitem Knopf, die Angaben in voller Breite darunter. */
.bv-gt-auf { width: 1%; white-space: nowrap; text-align: right; }
html[data-geraet="desktop"] .bv-gt-auf-text { display: none; }
.bv-gt-tagtabelle > tbody > tr.bv-gt-tag-offen > td { border-bottom-color: transparent; background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.bv-gt-tagtabelle > tbody > tr.bv-gt-tagdetail > td { padding: 0 0.75rem 0.8rem; background: color-mix(in srgb, var(--color-primary) 4%, transparent); cursor: default; }
/* contain: die aufgeklappten Angaben bestimmen die Spaltenbreiten der Tagesliste nicht mit - sonst brachen beim Aufklappen Köpfe um und die Liste sprang. */
.bv-gt-td-inhalt { contain: inline-size; overflow-x: auto; }
.bv-gt-td-fazit { padding: 0.2rem 0 0.2rem 0.75rem; gap: 0.35rem; }
.bv-gt-td-fazit .bv-ef-fazit-satz { font-size: 0.98rem; font-weight: 600; }
.bv-gt-td-titel { margin: 0.6rem 0 0.2rem; font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); }
.bv-gt-td-name { margin: 0.5rem 0 0.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.bv-gt-td-filiale + .bv-gt-td-filiale { border-top: 1px solid var(--line-soft); margin-top: 0.5rem; }
.bv-gt-td-status { margin: 0.5rem 0; color: var(--text-secondary); }
.bv-gt-td-fuss { margin-top: 0.6rem; }
html[data-touch] :is(.bv-gt-aufklappen, .bv-gt-td-oeffnen) { min-height: 44px; }
html[data-geraet="handy"] .bv-gt-tagtabelle > tbody > tr > td.bv-gt-auf { flex: 1 1 100%; width: auto; text-align: left; order: 9; }
html[data-geraet="handy"] .bv-gt-tagtabelle > tbody > tr > td.bv-gt-auf::before { content: none; }
html[data-geraet="handy"] .bv-gt-tagtabelle > tbody > tr > td.bv-gt-auf .btn { width: 100%; justify-content: center; }
html[data-geraet="handy"] .bv-gt-tagtabelle > tbody > tr.bv-gt-tagdetail { padding-top: 0; }
/* Spezifischer als die erste Zelle der Kartenliste (sonst flex 0 0 auto - die Angaben wären nur wenige Pixel breit). */
html[data-geraet="handy"] .bv-gt-tagtabelle.karten-tabelle.karten-kompakt > tbody > tr.bv-gt-tagdetail > td:first-child {
  flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; padding: 0.4rem; font-size: inherit; font-weight: 400; }
html[data-geraet="handy"] .bv-gt-tagtabelle.karten-tabelle.karten-kompakt > tbody > tr.bv-gt-tagdetail > td::before { content: none; }
html[data-geraet="handy"] .bv-gt-td-oeffnen { width: 100%; justify-content: center; }
html[data-geraet="handy"] .bv-gt-td-fazit { padding-left: 0.6rem; }
/* Rückweg aus der Datengrundlage (seit 01.11.2026): der Artikel, dessen Begründung offen war, kurz hervorgehoben. */
:is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr.bv-gt-zuletzt > td { background: color-mix(in srgb, var(--color-primary) 14%, transparent); transition: background 0.6s; }
/* Bestellseite (seit 31.10.2026): Öffnung am Feiertag unklar - Statuszeile über der Tabelle und im Mengen-Pad. */
.bv-tag-hinweis { margin: 0 0 0.5rem; align-items: flex-start; }
.bv-tag-hinweis > i { margin-top: 0.2rem; }
.bv-tag-hinweis-link { margin-left: 0.35rem; font-weight: 600; color: var(--color-primary); }
html[data-touch] .bv-tag-hinweis-link { display: inline-flex; align-items: center; min-height: 44px; }
html:not([data-geraet="desktop"]) .mengen-pad-vorschlag-fehlt .mengen-pad-vorschlag-text { color: var(--warning); flex-wrap: nowrap; align-items: flex-start; }
html:not([data-geraet="desktop"]) .mengen-pad-vorschlag-fehlt .mengen-pad-vorschlag-text > i { margin-top: 0.2rem; }
html[data-geraet="tablet"] .bv-gt-stand-zelle { white-space: normal; min-width: 0; font-size: 0.82rem; }
html[data-geraet="tablet"] .bv-gt-tabelle :is(th, td) { padding-left: 0.35rem; padding-right: 0.35rem; font-size: 0.9rem; }
html[data-geraet="tablet"] .bv-gt-tabelle .bv-gt-status .bv-marke { display: inline-block; margin-bottom: 0.25rem; }
/* Seit 01.11.2026 (Unterschied, Paare Vorschlag / tatsächlich): auf dem Tablet dürfen sie umbrechen, sonst passt die Tabelle hochkant nicht. */
html[data-geraet="tablet"] .bv-gt-tabelle :is(.bv-gt-zahlpaar, .bv-gt-unterschied) { white-space: normal; }
/* Marke und Knopf brechen um, wenn es eng wird (Blazor lässt zwischen ihnen keinen Leerraum, an dem der Text umbrechen könnte). */
.bv-gt-status-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; min-width: 9rem; }
.bv-gt-status-inhalt .bv-marke { white-space: normal; }
.bv-gt-stand-klein { display: none; }
@media (orientation: portrait) {
    html[data-geraet="tablet"] .bv-gt-tabelle :is(th.bv-gt-stand-spalte, td.bv-gt-stand-zelle) { display: none; }
    html[data-geraet="tablet"] .bv-gt-tabelle .bv-gt-stand-klein { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--text-secondary); white-space: normal; }
}
html[data-geraet="handy"] .bv-rb-fehlt-zeile .btn { width: 100%; min-height: 44px; }
.bv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bv-ohne-dienst .card-empty i { color: var(--color-primary); margin-right: 0.3rem; }

.bv-vs-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.bv-vs-titel > h2 { margin: 0; }
.bv-vs-marken { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
.bv-neu-rechnen { margin-left: auto; }
.bv-filterzeile { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: flex-end; }
.bv-filterzeile > .filter-field { flex: 1 1 8.5rem; max-width: 15rem; min-width: 0; margin: 0; }
.bv-filterzeile .form-input { width: 100%; }
/* Filialen als Mehrfachauswahl (seit 30.10.2026): etwas breiter, auf Handy und Tablet über mehrere Spalten. */
.bv-filterzeile > .bv-filialwahl { flex: 1.5 1 13rem; max-width: 24rem; }
.bv-filterzeile > .filter-field:has(> .bv-vs-datum) { flex: 0 0 auto; min-width: 16.5rem; }
/* ◀ Feld ▶ darf auf Handy und Tablet schmaler werden, ohne dass das Feld über den Pfeil rutscht. */
html:not([data-geraet="desktop"]) .bv-filterzeile > .filter-field:has(> .bv-vs-datum) { min-width: 0; }
html:not([data-geraet="desktop"]) .bv-vs-datum .datum-feld { flex: 1 1 auto; min-width: 0; }
html[data-geraet="handy"] .bv-filterzeile > .bv-filialwahl { grid-column: 1 / -1; }
/* Lieferung mit ◀ ▶ (seit 02.11.2026): in einer halben Spalte bliebe für „Alle“ kaum Platz - auf dem Handy die ganze Zeile. */
html[data-geraet="handy"] .bv-filterzeile > .filter-field:has(.sd-lieferung.sd-mit-pfeilen) { grid-column: 1 / -1; }
html[data-geraet="tablet"] .bv-filterzeile > .bv-filialwahl { grid-column: 1 / -1; }
html[data-geraet="tablet"] .bv-filterzeile > .filter-field:has(> .bv-vs-datum) { grid-column: span 2; }
html[data-geraet="tablet"] .bv-filterzeile:has(.bv-vs-datum) { grid-auto-flow: row dense; }
html[data-geraet="tablet"] .bv-rb :is(.bv-rb-tabelle, .bv-rb-artikeltabelle) :is(th, td) { padding-left: 0.35rem; padding-right: 0.35rem; font-size: 0.9rem; }

.bv-marke { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  line-height: 1.45; white-space: nowrap; border: 1px solid transparent; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bv-marke-gruen { background: color-mix(in srgb, var(--good) 16%, transparent); border-color: color-mix(in srgb, var(--good) 40%, transparent);
  color: color-mix(in srgb, var(--good) 65%, var(--text-primary)); }
.bv-marke-gelb { background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: color-mix(in srgb, var(--warning) 60%, var(--text-primary)); }
.bv-marke-blau { background: color-mix(in srgb, var(--color-primary) 14%, transparent); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  color: color-mix(in srgb, var(--color-primary) 70%, var(--text-primary)); }
.bv-marke-rot { background: color-mix(in srgb, var(--critical) 14%, transparent); border-color: color-mix(in srgb, var(--critical) 40%, transparent);
  color: color-mix(in srgb, var(--critical) 65%, var(--text-primary)); }
.bv-marke-grau { background: var(--surface-strong); border-color: var(--border-soft); color: var(--text-secondary); }

.bv-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }

.bv-vs-knoepfe, .bv-gt-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; min-width: 0; }
.bv-vs-suche { width: 13rem; max-width: 100%; }
.bv-sortieren { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.bv-sortieren:hover { color: var(--color-primary); }
.bv-sortieren:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
th.zahl .bv-sortieren { flex-direction: row-reverse; }
.bv-sortieren i { font-size: 0.7rem; }
.bv-vs-tabelle .bv-wahl { width: 2.6rem; text-align: center; }
.bv-wahl-ziel { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.bv-wahl-ziel input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); cursor: pointer; }
.bv-wahl-ziel input:disabled { cursor: not-allowed; opacity: 0.4; }
.bv-vs-tabelle tr.gewaehlt > td { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
td.bv-hinweise .bv-hinweis-marken { display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; align-items: center; }
.bv-vs-tabelle td:not(.bv-hinweise) .bv-marke { vertical-align: middle; }

.bv-aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--border-soft);
  background: var(--popup-bg); border-radius: 0 0 var(--radius-main) var(--radius-main); flex: 0 0 auto; }
.bv-auswahl-text { margin-right: auto; color: var(--text-secondary); font-size: 0.9rem; min-width: 0; }
.bv-lauf-link { background: none; border: 0; padding: 0; color: var(--color-primary); font: inherit; font-weight: 600; cursor: pointer; }
.bv-lauf-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Dialog der Sammelübernahme und Rückfrage „freigeben …“. */
.modal-box.bv-dialog { max-width: 36rem; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; }
.modal-box.bv-dialog-klein { max-width: 30rem; }
.bv-dialog .modal-header h3 { line-height: 1.3; }
.bv-dialog .modal-header h3 i { color: var(--color-primary); }
.bv-dlg-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: 0.92rem; }
.bv-dlg-inhalt p { margin: 0.5rem 0; }
.bv-dlg-liste { margin: 0 0 0.75rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.bv-dlg-uebersprungen summary { cursor: pointer; }
.bv-dlg-uebersprungen summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bv-dlg-uebersprungen ul { margin: 0.4rem 0 0; padding-left: 0.4rem; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.bv-dlg-warnung { color: color-mix(in srgb, var(--warning) 60%, var(--text-primary)); }
/* Hinweis zur offenen Bestellseite unter dem eigenen Entwurf (seit 03.11.2026) - eigene Zeile, normale Textfarbe. */
.bv-dlg-offen { display: block; margin-top: 0.15rem; color: var(--text-secondary); }
.bv-dlg-option { border: 0; margin: 0.25rem 0 0.5rem; padding: 0; }
.bv-dlg-option legend { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.3rem; padding: 0; }
.bv-radio { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; cursor: pointer; }
.bv-radio input { accent-color: var(--color-primary); width: 1rem; height: 1rem; flex: 0 0 auto; }
.bv-dlg-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.85rem; flex: 0 0 auto; }
.bv-dlg-fehler { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; }
.bv-dlg-fehler i { color: var(--warning); }
.bv-fortschritt { height: 0.7rem; border-radius: 999px; background: var(--surface-strong); overflow: hidden; margin: 0.4rem 0; }
.bv-fortschritt-balken { height: 100%; background: var(--color-primary); border-radius: inherit; transition: width 0.25s ease; }

/* Güte */
.bv-gt-filter { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-start; }
.bv-gt-filter > .filter-gruppe { flex: 1 1 18rem; min-width: 0; }
.bv-gt-stand { margin: 0.15rem 0 0; }
.bv-gt-hinweis { margin: 0.5rem 0 0; }
.bv-gt-hinweis i { color: var(--color-primary); }
.bv-gt-balken-liste { display: flex; flex-direction: column; gap: 0.55rem; }
.bv-balken { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) minmax(5.5rem, auto); gap: 0.75rem; align-items: center; font-size: 0.9rem; }
.bv-balken-spur { position: relative; height: 0.85rem; border-radius: 999px; background: var(--surface-strong); overflow: hidden; }
.bv-balken-fuell { height: 100%; background: color-mix(in srgb, var(--text-secondary) 60%, transparent); border-radius: 999px 0 0 999px; }
.bv-balken-fuell.bv-balken-vorschlag { background: var(--color-primary); }
.bv-balken-spanne { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg,
  color-mix(in srgb, var(--color-primary) 55%, transparent) 0 4px, color-mix(in srgb, var(--color-primary) 22%, transparent) 4px 8px); }
.bv-balken-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bv-gt-status .bv-marke { margin: 0.1rem 0.35rem 0.1rem 0; vertical-align: middle; }
.bv-gt-fuss { margin: 0; padding: 0.5rem 0.9rem 0.7rem; }
.bv-gt-geltung { width: auto; max-width: 100%; }
/* Güte verständlich (seit 30.10.2026): Hauptaussage, Grafik je Kennzahl mit zwei Balken, Formel, einfache Regeln. */
.bv-gt-aussage { display: flex; flex-direction: column; gap: 0.6rem; }
.bv-gt-aussage-kopf { display: flex; gap: 0.85rem; align-items: flex-start; }
.bv-gt-urteil { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid transparent; font-size: 1.15rem; }
.bv-gt-aussage-titel { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.bv-gt-aussage-kosten { margin: 0.25rem 0 0; font-size: 0.98rem; }
.bv-gt-aussage-liste { list-style: none; margin: 0; padding: 0 0 0 3.45rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
.bv-gt-aussage-liste li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.bv-gt-aussage-name { color: var(--text-secondary); }
.bv-gt-aussage-fuss { margin: 0; padding-left: 3.45rem; }
.bv-gt-anderer { font-weight: 600; color: var(--text-primary); }
.bv-gt-regeln { padding-left: 3.45rem; }
.bv-gt-regeln > summary { cursor: pointer; color: var(--color-primary); font-weight: 600; font-size: 0.9rem; padding: 0.2rem 0; }
.bv-gt-regeln > p { margin: 0.35rem 0; }
.bv-gt-regel-erkl { display: block; font-weight: 400; font-size: 0.82rem; color: var(--text-secondary); }
.bv-gt-grafik { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.6rem; }
.bv-gt-paar { display: flex; flex-direction: column; gap: 0.35rem; }
.bv-gt-paar-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.bv-gt-paar-kopf .bv-leise { font-size: 0.8rem; }
.bv-gt-grafik > .card-subtitle { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.bv-gt-leg-spanne { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 55%, transparent) 0 4px,
  color-mix(in srgb, var(--color-primary) 22%, transparent) 4px 8px); border: 0; }
.bv-gt-formel-block { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 0.5rem; }
.bv-gt-formel-titel { margin: 0; font-size: 0.95rem; }
.bv-gt-formel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.45rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-main);
  background: var(--surface-faint); border: 1px solid var(--border-soft); font-size: 1rem; }
.bv-gt-term { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 6px; background: var(--surface-strong); white-space: nowrap; }
.bv-gt-term-ergebnis { background: color-mix(in srgb, var(--color-primary) 16%, transparent); color: var(--text-primary); font-weight: 700; }
.bv-gt-op { color: var(--text-secondary); font-weight: 700; }
.bv-gt-formel-erkl { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--text-secondary); }
.bv-gt-beispiel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; margin: 0; font-size: 0.92rem; }
.bv-gt-beispiel > b:first-child { min-width: 9.5rem; }
.bv-gt-formel-block > .card-subtitle { margin: 0; }
html[data-geraet="handy"] .bv-gt-aussage-liste, html[data-geraet="handy"] .bv-gt-aussage-fuss, html[data-geraet="handy"] .bv-gt-regeln { padding-left: 0; }
html[data-geraet="handy"] .bv-gt-aussage-liste { flex-direction: column; }
html[data-geraet="handy"] .bv-gt-aussage-titel { font-size: 1.02rem; }
html[data-geraet="handy"] .bv-gt-term { white-space: normal; }
html[data-geraet="handy"] .bv-gt-beispiel > b:first-child { min-width: 0; flex: 1 1 100%; }
html[data-touch] .bv-gt-regeln > summary, html:not([data-geraet="desktop"]) .bv-gt-regeln > summary { min-height: 44px; display: flex; align-items: center; }

/* Handy und Tablet: Aktionsleiste klebt unten im Bild (kein rest-hoehe), nichts breiter als der Bildschirm, Touch-Ziele 44 px. */
html:not([data-geraet="desktop"]) .bv-aktionsleiste { position: sticky; bottom: 0; z-index: 6; border-radius: var(--radius-main);
  box-shadow: 0 -6px 18px color-mix(in srgb, var(--background, #000) 35%, transparent); }
html:not([data-geraet="desktop"]) .bv-filterzeile > .filter-field { max-width: none; }
html[data-touch] .bv-wahl-ziel { min-width: 44px; min-height: 44px; }
html[data-touch] .bv-sortieren { min-height: 44px; }
html[data-touch] .bv-radio { min-height: 44px; }
html[data-touch] .bv-dlg-uebersprungen summary { min-height: 44px; display: flex; align-items: center; }
html[data-touch] .bv-lauf-link { min-height: 44px; }
html[data-touch] .bv-dlg-zu { min-width: 44px; }

html[data-geraet="handy"] .bv-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
html[data-geraet="handy"] .bv-kacheln .metric-card { padding: 0.6rem 0.7rem; }
/* Kleineres Symbol wie in der Filialanalyse (seit 29.10.2026): „Retourenquote“ passt daneben, statt darunter zu rutschen. */
html[data-geraet="handy"] .bv-kacheln .metric-kopf .metric-icon { height: 2.1rem; width: 2.1rem; font-size: 0.9rem; margin-left: 0.4rem; }
html[data-geraet="handy"] .bv-kacheln .metric-title { font-size: 0.82rem; }
html[data-geraet="handy"] .bv-filterzeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
html[data-geraet="handy"] .bv-filterzeile > .filter-field:first-child { grid-column: 1 / -1; }
html[data-geraet="handy"] .bv-neu-rechnen { margin-left: 0; }
html[data-geraet="handy"] .bv-vs-knoepfe { width: 100%; justify-content: stretch; }
html[data-geraet="handy"] .bv-vs-knoepfe > * { flex: 1 1 10rem; }
html[data-geraet="handy"] .bv-vs-suche { width: auto; }
html[data-geraet="handy"] .bv-vs-tabelle .bv-nur-breit { display: none; }
html[data-geraet="handy"] .bv-vs-tabelle > tbody > tr > td.bv-wahl { order: 0; flex: 0 0 auto; width: auto; }
html[data-geraet="handy"] .bv-vs-tabelle > tbody > tr > td.karte-titel { flex: 1 1 8rem; min-width: 0; }
html[data-geraet="handy"] .bv-vs-tabelle > tbody > tr > td.karte-label::before { content: none; }
html[data-geraet="handy"] .bv-vs-tabelle > tbody > tr > td.bv-retoure::before { content: attr(data-label) " "; color: var(--text-secondary); font-size: 0.8rem; font-weight: 400; }
html[data-geraet="handy"] .bv-vs-tabelle > tbody > tr > td.bv-hinweise:empty { display: none; }
html[data-geraet="handy"] .bv-aktionsleiste { padding: 0.5rem; gap: 0.4rem; }
html[data-geraet="handy"] .bv-auswahl-text { flex: 1 1 100%; margin: 0; }
html[data-geraet="handy"] .bv-aktionsleiste > .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: normal; line-height: 1.2;
  font-size: 0.88rem; padding: 0.3rem 0.5rem; text-align: center; }
html[data-geraet="handy"] .bv-auswahl-text { font-size: 0.82rem; }
/* Karte einer Filiale: Häkchen, Name und „Öffnen“ in der ersten Zeile, Status und Zahlen darunter. */
html[data-geraet="handy"] .karten-tabelle.karten-kompakt.bv-vs-tabelle > tbody > tr > td:last-child[data-label=""]:not(:first-child) { order: 2; }
html[data-geraet="handy"] .bv-gt-tabelle > tbody > tr > td.karte-titel { flex: 1 1 100%; }
/* Tablet: Positionen und Δ Vorwoche weg - sonst wird die Filialtabelle breiter als der Bildschirm; hoch die Filter in drei Spalten. */
html[data-geraet="tablet"] .bv-vs-tabelle .bv-nur-breit { display: none; }
html[data-geraet="tablet"] .bv-rb-tabelle .bv-nur-breit, html[data-geraet="tablet"] .bv-rb-tabelle .bv-rb-knopf-text { display: none; }
@media (orientation: portrait) {
  html[data-geraet="tablet"] .bv-filterzeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-geraet="tablet"] .bv-vs-tabelle :is(th, td) { padding-left: 0.4rem; padding-right: 0.4rem; }
  html[data-geraet="tablet"] .bv-vs-tabelle td:last-child .btn { font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; }
  html[data-geraet="tablet"] .bv-vs-tabelle td:last-child .btn > i { font-size: 1rem; }
  html[data-geraet="tablet"] .bv-vs-tabelle .bv-marke { white-space: normal; }
}
html[data-geraet="handy"] .bv-aktionsleiste > .bv-btn-automatisch { display: none; }
html[data-geraet="handy"] .modal-overlay.modal-mitte.bv-dialog-hintergrund,
html[data-geraet="handy"] .modal-overlay.modal-mitte:has(> .bv-dialog) { padding: 0.5rem; }
html[data-geraet="handy"] .modal-box.bv-dialog { max-height: calc(100dvh - 1rem); padding: 1rem; }
html[data-geraet="handy"] .bv-dlg-fuss > .btn { flex: 1 1 8rem; justify-content: center; }
html[data-geraet="handy"] .bv-balken { grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.6rem; }
html[data-geraet="handy"] .bv-balken-spur { grid-column: 1 / -1; grid-row: 2; }
html[data-geraet="handy"] .bv-gt-knoepfe, html[data-geraet="handy"] .bv-gt-geltung { width: 100%; }
html[data-geraet="handy"] .bv-gt-tabelle > tbody > tr > td.bv-gt-status { order: 4; flex: 1 1 100%; }

/* Einfache Ansicht „Artikel einer Filiale“ des Reiters Vorschläge (seit 31.10.2026, Components/Bestellvorschlag/EineFiliale.razor): Filiale und
   Liefertag oben (mit den Filtern einklappbar), darunter Artikelliste bzw. Rückblick mit Fazit. Umschalter „Artikel einer Filiale / Mehrere Filialen“ im Kopf. */
.bv-vs-ansicht { margin-left: auto; }
/* Knopf „Auswahl“ (seit 02.11.2026) ganz rechts, Umschalter und „Neu rechnen“ davor (EinklappKnopf.Davor). */
.einklapp-kopf > .bv-neu-rechnen { margin-left: 0; }
/* Die Marken brechen in sich um, bevor Umschalter und Knopf in eine zweite Zeile rutschen. */
html:not([data-geraet="handy"]) .bv-vs-titel > .bv-vs-marken { flex: 1 1 18rem; min-width: 12rem; }
.einklapp-kopf > .bv-vs-ansicht { margin-left: 0; }
.bv-ef-wahl > .bv-ef-filialfeld { flex: 1.5 1 14rem; max-width: 26rem; }
.bv-ef-vorlaeufig { margin: 0; color: var(--text-secondary); }
.bv-ef-vorlaeufig > i { color: var(--warning, var(--color-primary)); }
.bv-ef-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0.9rem; }
.bv-ef-hinweis > p { margin: 0; min-width: 0; flex: 1 1 18rem; }
.bv-ef-vorschau { border-left: 4px solid var(--warning, var(--color-primary)); }
.bv-ef-hinweis > p > .fa-triangle-exclamation { color: var(--warning, var(--color-primary)); }
/* Heutiger Tag (seit 09.11.2026): woher der Vorschlag stammt und „Mit heutigem Rechenweg neu rechnen“. */
.bv-ef-nachrechnen-karte { border-left: 4px solid var(--color-primary); }
.bv-ef-nachrechnen-karte > p > i { color: var(--color-primary); margin-right: 0.2rem; }
.bv-ef-nachrechnen-info { display: block; margin-top: 0.2rem; color: var(--text-secondary); font-size: 0.86rem; }
html[data-touch] .bv-ef-nachrechnen-knopf { min-height: 44px; }
html[data-geraet="handy"] .bv-ef-nachrechnen-knopf { width: 100%; justify-content: center; }
.bv-ef-vorschlag b { color: var(--color-primary); }
/* Vor- und Kundenbestellungen im Vorschlag (seit 01.11.2026): sofort zu sehen, warum es mehr ist als sonst. */
.bv-ef-sonder { font-weight: 600; color: var(--color-primary); }
.bv-ef-tabelle th.bv-ef-sonder-kopf { white-space: normal; max-width: 6.5rem; }
/* Mit der Spalte passt die Tabelle am Laptop (1440 px) nur, wenn der Knopf „Begründung“ wie im Rückblick nur das Symbol zeigt. */
html[data-geraet="desktop"] .bv-ef-tabelle.bv-ef-mit-sonder .bv-ef-auf-text { display: none; }
.bv-ef-abweichung { font-weight: 700; color: var(--text-primary); }
.bv-ef-kurz { color: var(--text-secondary); font-size: 0.86rem; min-width: 11rem; }
html[data-geraet="handy"] .bv-ef-kurz { min-width: 0; }
.bv-ef-warnung { color: var(--warning, var(--color-primary)); margin-left: 0.3rem; }
.bv-ef-auf { width: 1%; white-space: nowrap; text-align: right; }
/* Volle Höhe, ein Scrollbalken außen (seit 31.10.2026): die Listen der einfachen Ansicht ohne Rest-Höhe - die Tabelle hat keine feste Höhe und
   scrollt nie senkrecht in sich; der Knopf „Begründung“ im Rückblick am PC nur als Symbol, damit die breite Tabelle in die Karte passt. */
html[data-geraet="desktop"] .bv-rb-artikeltabelle .bv-ef-auf-text { display: none; }
.bv-rb-rw-status, .bv-rb-rw-hinweis, .bv-rb-rw-vergleich { margin: 0.4rem 0 0.2rem; }
.bv-rb-rw-vergleich { color: var(--text-secondary); font-size: 0.86rem; }
.bv-rb-rw-hinweis > i { color: var(--warning, var(--color-primary)); }
/* Tag im Detail der Datengrundlage (seit 31.10.2026): Artikel als Tabelle statt Aufzählung. */
.bv-dg-detail-suche { width: 14rem; max-width: 100%; margin: 0.6rem 0 0.2rem; }
.bv-dg-detail-wrap { margin-top: 0.4rem; }
.bv-dg-detail-tabelle tr.bv-dg-detail-aus > td.karte-titel { font-weight: 600; }
html[data-geraet="handy"] .bv-dg-detail-suche { width: 100%; }
.bv-zurueck-guete { margin-bottom: 0.6rem; }
.bv-gt-tag.bv-gt-zuletzt > td { background: color-mix(in srgb, var(--color-primary) 14%, transparent); transition: background 0.6s; }
html[data-touch] .bv-zurueck-guete .btn { min-height: 44px; }
:is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr.bv-ef-offen > td { border-bottom-color: transparent; }
:is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr.bv-ef-detail > td { padding-top: 0; background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.bv-ef-fazit { padding: 0.8rem 1rem; border-left: 4px solid var(--border-soft); display: flex; flex-direction: column; gap: 0.45rem; }
.bv-ef-fazit.gut { border-left-color: var(--good); }
.bv-ef-fazit.schlecht { border-left-color: var(--critical); }
.bv-ef-fazit-satz { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.bv-ef-fazit.gut .bv-ef-fazit-satz > i { color: var(--good); }
.bv-ef-fazit.schlecht .bv-ef-fazit-satz > i { color: var(--critical); }
.bv-ef-gruende { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.bv-ef-gruende > li { display: flex; gap: 0.5rem; align-items: baseline; line-height: 1.4; }
.bv-ef-gruende > li > i { flex: 0 0 auto; }
.bv-ef-gruende > li.fuer > i { color: var(--good); }
.bv-ef-gruende > li.gegen > i { color: var(--critical); }
.bv-ef-gruende > li.info { color: var(--text-secondary); }
.bv-ef-gruende > li.info > i { color: var(--text-secondary); }
.bv-ef-fazit-kosten, .bv-ef-zeitraum { margin: 0; }
.bv-ef-zeitraum { color: var(--text-secondary); }
.bv-ef-fazit-fuss { margin: 0; }
.bv-ef-nachgerechnet { margin-left: 0.3em; }
/* Knöpfe der Artikelliste immer rechts (seit 03.11.2026): „Nach Marvin übernehmen“ steht ganz rechts - auch wenn die Gruppe unter den Titel umbricht. */
.bv-ef-zur-bestellung { margin-left: auto; }
html[data-geraet="handy"] .bv-ef-zur-bestellung > .btn { justify-content: center; }
html[data-geraet="handy"] .bv-ef-wahl > .filter-field:has(> .bv-vs-datum) { grid-column: 1 / -1; }
html[data-geraet="handy"] .bv-vs-ansicht { margin-left: 0; width: 100%; }
html[data-geraet="handy"] .bv-vs-ansicht > button { flex: 1 1 0; }
html[data-geraet="handy"] .bv-ef-tabelle .bv-nur-breit { display: none; }
html[data-geraet="handy"] .bv-ef-tabelle > tbody > tr > td.karte-titel { flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .bv-ef-tabelle > tbody > tr > td.bv-ef-kurz { flex: 1 1 100%; }
html[data-geraet="handy"] .bv-ef-tabelle > tbody > tr > td.bv-ef-kurz::before { content: none; }
html[data-geraet="handy"] :is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr > td.bv-ef-auf { flex: 1 1 100%; width: auto; text-align: left; order: 9; }
html[data-geraet="handy"] :is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr > td.bv-ef-auf::before { content: none; }
html[data-geraet="handy"] :is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr > td.bv-ef-auf .btn { width: 100%; justify-content: center; }
html[data-geraet="handy"] :is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr.bv-ef-detail > td { flex: 1 1 100%; min-width: 0; max-width: 100%; padding: 0.4rem; }
html[data-geraet="handy"] :is(.bv-ef-tabelle, .bv-rb-artikeltabelle) > tbody > tr.bv-ef-detail > td::before { content: none; }
html[data-geraet="handy"] .bv-ef-fazit { padding: 0.7rem 0.8rem; }
html[data-geraet="handy"] .bv-ef-fazit-satz { font-size: 1rem; }
html[data-geraet="tablet"] .bv-ef-tabelle :is(th, td) { padding-left: 0.4rem; padding-right: 0.4rem; }
/* Auf dem Tablet auch quer (seit 01.11.2026, wie Übersicht und Rückblick): quer sind neben dem Menü nur ~880 px frei - mit Vorwochen und Knopftext
   war die Tabelle breiter als die Karte, mit der Spalte „Vor- und Kundenbest.“ noch mehr. */
html[data-geraet="tablet"] .bv-ef-tabelle .bv-nur-breit { display: none; }
html[data-geraet="tablet"] .bv-ef-auf-text { display: none; }
html[data-touch] .bv-ef-rechenweg { min-width: 44px; }
/* Sortierung der Artikellisten (seit 09.11.2026, „Artikel einer Filiale“ und Rückblick): Nummer und Bezeichnung als zwei Knöpfe in der
   Artikelspalte (auf Touch je 44 px breit); auf dem Handy (Karten ohne Spaltenköpfe) das Feld Sortierung in einer Zeile mit „Artikel suchen …“. */
.bv-artikel-kopf .bv-sortieren + .bv-sortieren { margin-left: 0.75rem; }
html[data-touch] .bv-artikel-kopf .bv-sortieren { min-width: 44px; }
.bv-sortier-auswahl { display: none; }
html[data-geraet="handy"] .bv-sortier-auswahl { display: block; }
html[data-geraet="handy"] .bv-vs-knoepfe > .bv-sortier-auswahl { flex: 0 1 8rem; min-width: 0; }
/* Suche mit 8rem Grundbreite: bei 360 px passen Suche und Sortierung gerade in eine Zeile, ab ~390 px rutschen die Knöpfe trotzdem darunter
   (mit 0 kamen sie mit in die Zeile, die Suche schrumpfte auf 30–55 px). */
html[data-geraet="handy"] .bv-vs-knoepfe:has(> .bv-sortier-auswahl) > .bv-vs-suche { flex: 1 1 8rem; min-width: 0; }
html[data-touch] :is(.bv-sortier-auswahl, .bv-vs-suche) { min-height: 44px; }

/* ---------------------------------------------------------------------- */
/* Bestellvorschlag – Einstellungs-Reiter */
/* (seit 29.10.2026): Einstellungen, Artikelbeziehungen, Kalender, Neue Artikel & Filialen (Components/Bestellvorschlag/*Reiter.razor). Farben nur
   über Tokens; Mobiles nur unter html[data-geraet]/[data-touch]. Breite Listen werden auf dem Handy über karten-tabelle zu Karten. */
/* ---------------------------------------------------------------------- */
:is(.bv-einst, .bv-bez, .bv-kal, .bv-neu) { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
:is(.bv-einst, .bv-bez, .bv-kal, .bv-neu) .card { min-width: 0; }
.bv-leise { color: var(--text-secondary); font-size: 0.84rem; }
p.bv-leise { margin: 0.2rem 0; }
.bv-r { text-align: right; }
.bv-c { text-align: center; }
/* Überschriften wie ihre Spalte (seit 30.10.2026): .widget-tabelle th richtet links aus und schlug .bv-r/.bv-c - Kopf und Zahlen wirkten verschoben. */
.widget-tabelle th.bv-r { text-align: right; }
.widget-tabelle th.bv-c { text-align: center; }
.bv-karte .card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.bv-karte .card-header h2 { margin: 0; }
.bv-karte .card-header.verwaltung-kopf h2 { flex: 1 1 auto; }
.bv-karte-inhalt { display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.4rem; }
.bv-fuss { margin-top: 0.5rem; }
.bv-kopf-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.bv-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bv-nurlesen { display: flex; align-items: center; gap: 0.45rem; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.bv-nurlesen i { color: var(--color-primary); }
.bv-link { border: 0; background: none; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.bv-trenner { border: 0; border-top: 1px solid var(--border-soft); margin: 0.3rem 0; width: 100%; }
.bv-breit { grid-column: 1 / -1; }

/* Marken (Zähler, Rolle, Quelle) - hell/dunkel über color-mix der Tokens. */
.bv-marke { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  white-space: nowrap; border: 1px solid var(--border-soft); color: var(--text-secondary); background: transparent; }
.bv-marke-blau { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.bv-marke-gelb { color: var(--text-primary); border-color: color-mix(in srgb, var(--warning) 60%, transparent); background: color-mix(in srgb, var(--warning) 18%, transparent); }
.bv-marke-rot { color: var(--error-text); border-color: color-mix(in srgb, var(--error-strong) 55%, transparent); background: color-mix(in srgb, var(--error-strong) 10%, transparent); }
.bv-marke-gruen { color: var(--ok-text); border-color: color-mix(in srgb, var(--ok-text) 50%, transparent); background: color-mix(in srgb, var(--ok-text) 10%, transparent); }
button.bv-marke-knopf { font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
button.bv-marke-knopf:hover { background: var(--hover); }
button.bv-marke-knopf.aktiv { outline: 2px solid var(--color-primary); outline-offset: 1px; color: var(--text-primary); }
.bv-marken { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bv-zahlmarke { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; font-size: 0.72rem;
  background: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--text-primary); }

/* Tabellen: Eingaben in Zellen kompakt, geerbte Werte grau. */
.bv-tabelle td { vertical-align: middle; }
.bv-tabelle .form-input { min-height: 0; padding: 0.3rem 0.45rem; font-size: 0.88rem; }
.bv-tabelle select.form-input { width: auto; max-width: 15rem; }
.bv-zahl { width: 4.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.bv-zahl::placeholder { color: var(--text-secondary); opacity: 0.75; }
.bv-feld-inline { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.bv-tabelle tr.bv-geerbt > td { color: var(--text-secondary); }
.bv-tabelle tr.bv-alle-zeile > td { font-weight: 600; background: var(--surface-faint); }
.bv-tabelle .bv-sg { font-variant-numeric: tabular-nums; }
.bv-spalte-wahl { width: 3.2rem; text-align: center; }
.bv-haken, .bv-wahl { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.bv-suche { width: 14rem; max-width: 100%; }
.bv-suche-voll { width: 100%; }
.bv-mehr { display: flex; justify-content: center; padding: 0.5rem 0 0; }
.bv-zeile-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.4rem; }
/* Rollen je Ebene (seit 29.10.2026): Ebenenwahl neben der Suche, unter dem Grund Verteilung und Ebenen von Hand */
.bv-rollen-ebene { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; flex: 1 1 18rem; min-width: 0; }
.bv-rollen-ebene .bv-ziel { flex: 1 1 14rem; min-width: 0; }
.bv-rollen-hinweis { margin: 0 0 0.4rem; }
.bv-rolle-grund > span { display: block; }
.bv-rolle-verteilung, .bv-rolle-ebenen { margin-top: 0.2rem; }
.bv-rolle-grund > .bv-rolle-ebenen { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bv-rolle-verteilung .bv-marke { margin-left: 0.3rem; }
.bv-rolle-grund .bv-marke { white-space: normal; max-width: 100%; border-radius: 0.6rem; }

/* Einstellungen */
.bv-einst-filter { display: grid; grid-template-columns: minmax(16rem, auto) minmax(14rem, auto) minmax(0, 1fr); gap: 0.6rem 1rem; align-items: end; }
.bv-einst-erklaerung { margin: 0; max-width: 34rem; }
.bv-einst-wert { display: inline-block; padding: 0.45rem 0; font-weight: 600; }
.bv-ziel { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.bv-ziel > select.bv-ziel-art { width: auto; }
.bv-ziel > :is(select.bv-ziel-gruppe, .bv-ziel-filiale) { flex: 1 1 12rem; min-width: 0; }
.bv-erklaer-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.4rem 1.2rem; font-size: 0.84rem;
  color: var(--text-secondary); margin: 0.2rem 0 0.5rem; }
.bv-erklaer-kopf b { color: var(--text-primary); }
.bv-mehrfach-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem; padding: 0.5rem 0.65rem; margin-bottom: 0.5rem;
  border-radius: var(--radius-main); background: color-mix(in srgb, var(--color-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); }
.bv-mehrfach-text { font-weight: 600; font-size: 0.86rem; margin-right: auto; }
.bv-mehrere.aktiv { color: var(--color-primary); }
.bv-zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0.75rem; align-items: start; }
.bv-radio { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; cursor: pointer; }
.bv-radio > input { margin-top: 0.25rem; accent-color: var(--color-primary); flex: 0 0 auto; }
.bv-radio .form-input, .bv-karte-inhalt p .form-input { display: inline-block; width: 4.6rem; min-height: 0; padding: 0.25rem 0.4rem; margin: 0 0.15rem; }
.bv-quoten { max-height: 22rem; overflow: auto; }
.bv-abctabelle { width: 100%; }
.bv-abctabelle .bv-feld-inline { flex-wrap: nowrap; }
.bv-karte-inhalt > .btn { align-self: flex-start; }
details.bv-experten > summary { cursor: pointer; font-weight: 700; padding: 0.15rem 0; list-style: revert; }
details.bv-experten > summary .bv-leise { font-weight: 400; }
.bv-raster-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.7rem 1rem; }
.bv-feld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.86rem; color: var(--label); }
.bv-feld > .form-input { width: 100%; }
.bv-feld > .bv-zahl { width: 6rem; }
.bv-hinweis { font-size: 0.76rem; color: var(--text-secondary); }
.bv-feld-haken { flex-direction: row; align-items: center; gap: 0.5rem; }
/* Lagerkosten an/aus (seit 01.11.2026): Auswahl in der Zeile, nicht über die ganze Karte. */
.bv-lagerkosten-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; font-size: 0.9rem; }
.bv-lagerkosten-wahl .bv-feld-inline { gap: 0.5rem; max-width: 100%; }
.bv-lagerkosten-wahl select.form-input { width: auto; max-width: 100%; min-width: 0; }
html[data-geraet="handy"] .bv-lagerkosten-wahl .bv-feld-inline { width: 100%; flex-wrap: nowrap; }
html[data-geraet="handy"] .bv-lagerkosten-wahl select.form-input { flex: 1 1 auto; }
.bv-speicherleiste { position: sticky; bottom: 0.5rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.8rem; border-radius: var(--radius-main); background: var(--popup-bg); border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--border-soft));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.bv-speicherleiste > span { margin-right: auto; font-size: 0.86rem; }
.bv-speicherleiste > span i { color: var(--color-primary); margin-right: 0.3rem; }

/* Artikelbeziehungen */
.bv-bez-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.bv-bez-kopf .bv-vorbelegen-knopf { margin-left: auto; }
.bv-bez-erklaerung { margin: 0; }
.bv-drei-zu-eins { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); gap: 0.75rem; align-items: start; }
.bv-verkaufsliste-eintraege { list-style: none; margin: 0.4rem 0 0; padding: 0; max-height: 34rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.1rem; }
.bv-verkauf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.35rem; width: 100%; text-align: left; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; cursor: pointer; }
.bv-verkauf:hover { background: var(--hover); color: var(--text-primary); }
.bv-verkauf.aktiv { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--text-primary); font-weight: 600; }
.bv-verkauf-name { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.bv-formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem 0.9rem; align-items: end; padding: 0.7rem;
  margin: 0.4rem 0 0.6rem; border-radius: var(--radius-main); border: 1px solid var(--border-soft); background: var(--surface-faint); }
.bv-formular .bv-knoepfe { grid-column: 1 / -1; }
.bv-formular-titel { grid-column: 1 / -1; margin: 0; font-size: 0.95rem; }
.bv-aufteilung { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0 0.2rem; border-top: 1px dashed var(--border-soft); margin-top: 0.6rem; font-size: 0.88rem; }
.bv-aufteilung-ziel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bv-uhrzeit { display: inline-block; width: 7rem; min-height: 0; padding: 0.25rem 0.4rem; }
.bv-chipliste { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bv-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.3rem 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--border-soft);
  font-size: 0.8rem; background: var(--surface-faint); }
.bv-chip:not(:has(button)) { padding-right: 0.6rem; }
.bv-chip-weg { border: 0; background: none; color: var(--text-secondary); cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 999px; }
.bv-chip-weg:hover { color: var(--error-text); background: var(--hover); }
.bv-gleiche-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); grid-auto-rows: 1fr; gap: 0.75rem; }
.bv-karte-gleich { display: flex; flex-direction: column; margin: 0; }
.bv-karte-gleich .card-header h2 { font-size: 0.95rem; flex: 1 1 auto; }
.bv-karte-gleich.aktiv { border-color: var(--color-primary); }
.bv-karte-fuss { margin-top: auto; padding-top: 0.5rem; }

/* Kalender */
.bv-tage { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.45rem; }
.bv-tag { border: 1px solid var(--border-soft); border-radius: 10px; padding: 0.45rem 0.55rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
  background: var(--surface-faint); }
.bv-tag-kopf { font-weight: 700; font-size: 0.84rem; }
.bv-tag-art { font-size: 0.8rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.bv-tag-faktor { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bv-tag-quelle { font-size: 0.72rem; }
.bv-tag.besonders { border-color: color-mix(in srgb, var(--bv-ereignis) 70%, transparent); background: color-mix(in srgb, var(--bv-ereignis) 10%, transparent); }
.bv-tag.besonders .bv-tag-art { color: var(--text-primary); }
.bv-tag.zu { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--line-soft) 6px 12px); color: var(--text-secondary); }
.bv-tag.unklar { border-color: color-mix(in srgb, var(--warning) 70%, transparent); background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--text-primary); }
.bv-tag.unklar .bv-tag-quelle { color: var(--text-primary); font-weight: 600; }
/* Wetter (seit 05.11.2026): Vorhersage als Kacheln wie „Die nächsten Tage“, darunter die gelernten Faktoren je Warengruppe. */
.bv-wetter-tage { margin-bottom: 0.75rem; }
.bv-wetter-zelle { white-space: nowrap; }
.bv-wetter-tabelle th.bv-r { width: 17%; }   /* vier Lagen gleich breit - sonst nahm „heiß“ den Platz, „kalt“ blieb schmal */
.bv-wetter-zelle .bv-marke { margin-left: 0.3rem; }
html[data-geraet="handy"] .bv-wetter-zelle { white-space: normal; }
/* Handy (Karten): Lagen, die in der Historie nie vorkamen, nicht als „kalt: –“ untereinander - die Karte zeigt nur, was es gibt. */
html[data-geraet="handy"] .bv-wetter-tabelle td.bv-wetter-nie { display: none; }
/* Wetter je Gruppe (seit 09.11.2026): „Gruppen wählen“ mit Häkchen wie „Mehrere ändern“ der Einstellungen, ausgeblendete Zeilen beim Wählen blass,
   „aus N Tagen“ klein hinter dem Namen. */
.bv-wetter-tabelle tr.bv-wetter-aus > td:not(.bv-spalte-wahl) { opacity: 0.5; }
.bv-wetter-lerntage { display: block; font-size: 0.78rem; font-weight: 400; white-space: nowrap; }
/* Tablet: vier Lagen mit Faktor, Tagen und „wirkt“ passen nicht nebeneinander in eine Zeile - umbrechen statt seitlich scrollen. */
html[data-geraet="tablet"] .bv-wetter-zelle { white-space: normal; }
/* Beim Wählen kommt die Häkchenspalte dazu - auch am schmalen Laptop umbrechen statt seitlich scrollen. Häkchen in „Mehrere ändern“ und „Gruppen
   wählen“ (seit 09.11.2026): Zielfläche 44 px nur auf Handy, Tablet und Touch - am Desktop bleibt das Label ohne eigene Regeln (wie vorher). */
.bv-wetter-tabelle.mit-wahl .bv-wetter-zelle { white-space: normal; }
html:is([data-touch], :not([data-geraet="desktop"])) .bv-wahl-flaeche { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; cursor: pointer; }
.bv-wetter-tabelle .karte-titel .bv-marke { margin-left: 0.35rem; }
.bv-wetter-rechnet { margin: 0.4rem 0; }
html[data-geraet="handy"] .bv-wetter-tabelle > tbody > tr > td.bv-spalte-wahl { order: 0; flex: 0 0 auto; width: auto; }
/* Wetter in der Datengrundlage (seit 05.11.2026): Symbol der besonderen Wetterlage oben links in der Tageszelle bzw. neben dem Wochentag im Kopf,
   Spalte „Wetter“ in „Tag im Detail“, Legende. Farben je Lage als eigene Tokens (oben bei den Streifen). */
.bv-wetter-heiss { color: var(--bv-heiss); }
.bv-wetter-kalt { color: var(--bv-kalt); }
.bv-wetter-regen { color: var(--bv-regen); }
.bv-wetter-schnee { color: var(--bv-schnee); }
.bv-dg-tabelle td .bv-wetter-ic { position: absolute; left: 3px; top: 7px; display: inline-flex; gap: 2px; font-size: 0.62rem; line-height: 1; pointer-events: none; }
.bv-dg-tabelle th .bv-wetter-ic { display: inline-flex; gap: 2px; margin-left: 0.25rem; font-size: 0.7rem; vertical-align: 0.05em; }
.bv-dg-tabelle td.bv-aus .bv-wetter-ic i { color: var(--bv-aus-text); }
.bv-leg-wetter { gap: 0.3rem 0.7rem; flex-wrap: wrap; }
.bv-leg-wetter-teil { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.bv-dg-detail-wetter { white-space: nowrap; }
.bv-dg-detail-wetter > i { margin-right: 0.25rem; }
/* Öffnung am Feiertag (seit 30.10.2026): je Feiertag eine aufklappbare Zeile, darunter die Filialen mit Ein-Klick. */
.bv-ft-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bv-ft { border: 1px solid var(--border-soft); border-radius: var(--radius-main); min-width: 0; }
.bv-ft.mit-unklar { border-color: color-mix(in srgb, var(--warning) 60%, transparent); }
.bv-ft-kopf { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; padding: 0.45rem 0.7rem; border: 0; background: none;
  font: inherit; color: var(--text-primary); text-align: left; cursor: pointer; border-radius: var(--radius-main); }
.bv-ft-kopf:hover { background: var(--hover); }
.bv-ft-kopf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.bv-ft-datum { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5.6rem; }
.bv-ft-name { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.bv-ft-zahlen { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bv-ft-pfeil { color: var(--text-secondary); transition: transform 0.15s; margin-left: auto; }
.bv-ft-kopf[aria-expanded="true"] .bv-ft-pfeil { transform: rotate(180deg); }
.bv-ft-filialen { list-style: none; margin: 0; padding: 0.2rem 0.7rem 0.5rem; display: flex; flex-direction: column; border-top: 1px solid var(--border-soft); }
.bv-ft-filiale { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.bv-ft-filiale:last-child { border-bottom: 0; }
.bv-ft-fname { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.bv-ft-quelle { font-size: 0.78rem; color: var(--text-secondary); flex: 1 1 10rem; min-width: 0; }
.bv-ft-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.bv-ft-knoepfe .btn.aktiv { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.bv-ft-leer { padding: 0.4rem 0; color: var(--text-secondary); font-size: 0.85rem; }
.bv-hinweiszeile i { color: var(--color-primary); margin-right: 0.3rem; }
.bv-schalter { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.bv-schalter input { accent-color: var(--color-primary); }
.modal-box.bv-dialog { max-width: 46rem; max-height: 90vh; overflow: hidden; }
.bv-dialog-inhalt { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.3rem; }
.bv-dialog-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--border-soft); margin-top: 0.4rem; }
.bv-dialog-fuss .btn-gefahr { margin-right: auto; }
.bv-wg-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.25rem 0.8rem; max-height: 12rem; overflow-y: auto;
  padding: 0.4rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); }

/* Neue Artikel & Filialen */
.bv-fortschritt { width: 7rem; max-width: 100%; height: 0.45rem; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-bottom: 0.15rem; }
.bv-fortschritt > span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.bv-vorschlaege { margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-main); border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.bv-vorschlaege-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bv-kandidaten { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.bv-kandidaten li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.88rem; }
.bv-zeitraum { margin-top: 0.3rem; }
/* Bedienbausteine im Bestellvorschlag (seit 30.10.2026): Zeiträume nicht über die ganze Zeile ziehen, Suchfelder im Kartenkopf mit fester Breite. */
.datum-wahl.bv-zeitraum, .datum-wahl.bv-ereignis-zeitraum { max-width: 26rem; }
/* Container für DatumWahl: unter 22rem stehen Von und Bis untereinander (sonst auf dem Handy abgeschnitten, „01.11.2“). */
:is(.bv-feld, .filter-field):has(> .datum-wahl-zeitraum) { container-type: inline-size; }
.bv-kopf-knoepfe > .sd-eingabe { flex: 0 1 auto; width: 17rem; max-width: 100%; }
.bv-kal .bv-kopf-knoepfe > select.form-input { width: auto; max-width: 100%; }
.bv-tabelle td.karte-titel .bv-leise { margin-left: 0.3rem; font-weight: 400; }

/* Tablet und Handy: Touch-Ziele ≥ 44 px, Felder 16 px (kein Zoom beim Tippen), Raster einspaltig wo nötig. */
html:is([data-touch], :not([data-geraet="desktop"])) :is(.bv-einst, .bv-bez, .bv-kal, .bv-neu, .bv-dialog) :is(.form-input, select, input[type="search"]) { font-size: 16px; min-height: 44px; }
html:is([data-touch], :not([data-geraet="desktop"])) :is(.bv-einst, .bv-bez, .bv-kal, .bv-neu, .bv-dialog) .btn { min-height: 44px; }
html:is([data-touch], :not([data-geraet="desktop"])) :is(.bv-haken, .bv-wahl, .bv-radio > input, .bv-schalter input) { width: 1.35rem; height: 1.35rem; }
html:is([data-touch], :not([data-geraet="desktop"])) :is(.bv-schalter, .bv-radio, .bv-feld-haken) { min-height: 44px; align-items: center; }
html:is([data-touch], :not([data-geraet="desktop"])) :is(button.bv-marke-knopf, .bv-link, .bv-chip-weg) { min-height: 44px; }
html:is([data-touch], :not([data-geraet="desktop"])) .bv-chip-weg { min-width: 44px; }
html:is([data-touch], :not([data-geraet="desktop"])) .bv-verkauf { min-height: 44px; }
html:is([data-touch], :not([data-geraet="desktop"])) .bv-zahl { width: 5.4rem; }
html:is([data-touch], :not([data-geraet="desktop"])) .bv-uhrzeit { width: 8rem; }
html:not([data-geraet="desktop"]) .bv-einst-filter { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
html:not([data-geraet="desktop"]) .bv-drei-zu-eins { grid-template-columns: minmax(0, 1fr); }
html:not([data-geraet="desktop"]) .bv-verkaufsliste { order: -1; }
html:not([data-geraet="desktop"]) .bv-verkaufsliste-eintraege { max-height: 16rem; }
html[data-geraet="handy"] .bv-kopf-knoepfe { margin-left: 0; width: 100%; }
html[data-geraet="handy"] .bv-kopf-knoepfe > * { flex: 1 1 100%; }
html[data-geraet="handy"] .bv-suche { width: 100%; }
html[data-geraet="handy"] .bv-bez-kopf .bv-vorbelegen-knopf { margin-left: 0; width: 100%; justify-content: center; }
html[data-geraet="handy"] .bv-tage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:is([data-touch], :not([data-geraet="desktop"])) .bv-ft-kopf { min-height: 44px; }
html[data-geraet="handy"] .bv-ft-knoepfe { margin-left: 0; width: 100%; }
html[data-geraet="handy"] .bv-ft-knoepfe .btn { flex: 1 1 0; justify-content: center; }
html[data-geraet="handy"] .bv-mehrfach-text { flex-basis: 100%; }
html[data-geraet="handy"] .bv-tabelle select.form-input { max-width: 100%; }
/* Karten auf dem Handy: die Markier-Spalte steht links neben dem Titel, Zahlen linksbündig. */
/* Auswahl „Filialen“ der Reiter Vorschläge und Güte (seit 29.10.2026, BvFilialWahl): Liste und „Auswahl ändern“ in einer Zeile. */
.bv-filialwahl-zeile { display: flex; gap: 0.35rem; align-items: stretch; min-width: 0; }
.bv-filialwahl-zeile > select { flex: 1 1 auto; min-width: 0; }
.bv-filialwahl-aendern { flex: 0 0 auto; padding: 0 0.6rem; }
html[data-touch] .bv-filialwahl-aendern { min-width: 44px; min-height: 44px; }
/* „+ n Teile aus anderen Gruppen“ (seit 29.10.2026): die Teile, die eine eingeschaltete Gruppe mitschaltet, aufklappbar unter dem Namen. */
.bv-mit { margin-top: 0.2rem; font-size: 0.78rem; font-weight: 400; }
.bv-mit > summary { cursor: pointer; color: var(--color-primary); width: fit-content; }
.bv-mit > ul { margin: 0.25rem 0 0.1rem; padding-left: 1.1rem; max-height: 12rem; overflow-y: auto; color: var(--text-secondary); }
.bv-mit .bv-nr { font-variant-numeric: tabular-nums; color: var(--text-primary); }
html[data-touch] .bv-mit > summary { min-height: 44px; display: flex; align-items: center; }
html[data-geraet="handy"] .bv-gruppentabelle > tbody > tr > td.bv-spalte-wahl { order: 0; flex: 0 0 auto; width: auto; }
html[data-geraet="handy"] .bv-tabelle > tbody > tr > td.bv-r, html[data-geraet="handy"] .bv-tabelle > tbody > tr > td.bv-c { text-align: left; }
html[data-geraet="handy"] .bv-speicherleiste > span { flex-basis: 100%; }
html[data-geraet="handy"] .bv-speicherleiste > .btn { flex: 1 1 0; justify-content: center; }
html[data-geraet="handy"] .modal-box.bv-dialog { max-height: 94vh; padding: 0.9rem; }
html[data-geraet="handy"] .bv-dialog-fuss > .btn { flex: 1 1 auto; justify-content: center; }
html[data-geraet="handy"] .bv-dialog-fuss .btn-gefahr { margin-right: 0; }

/* ---------------------------------------------------------------------- */
/* Bedienbausteine (seit 30.10.2026, Components/Auswahl, DatumWahl):       */
/* StammdatenFeld, StammdatenAuswahl, gespeicherte Auswahlen, DatumWahl   */
/* ---------------------------------------------------------------------- */
.sd-eingabe { position: relative; min-width: 0; }
.sd-eingabe > .such-zeile { position: relative; width: 100%; }
.sd-feld { text-overflow: ellipsis; }
.sd-marke { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.sd-eingabe:has(.sd-marke) .sd-feld { padding-left: 2rem; }
/* ◀ ▶ der Einzelauswahl (seit 02.11.2026) wie DatumWahl: links und rechts neben Feld und Lupe; das Schloss gesperrter Einträge
   rückt hinter ◀. Auf Touch-Geräten 44 px. */
.sd-eingabe > .such-zeile > .sd-schritt { flex: 0 0 auto; width: 2rem; padding: 0; justify-content: center; }
.sd-eingabe > .such-zeile > .sd-schritt-zurueck { margin-right: 0.25rem; }
.sd-eingabe > .such-zeile > .sd-schritt-vor { margin-left: 0.25rem; }
.sd-eingabe > .such-zeile > .sd-schritt.wartet { opacity: 0.5; cursor: progress; }
.sd-mit-pfeilen > .such-zeile > .sd-marke { left: 2.95rem; }
html[data-touch] .sd-eingabe > .such-zeile > .sd-schritt { width: 44px; min-width: 44px; min-height: 44px; }
html[data-touch] .sd-mit-pfeilen > .such-zeile > .sd-marke { left: calc(44px + 0.95rem); }
/* Umbrechender Text (seit 03.11.2026, StammdatenEingabe Umbrechen - Kunde der Erfassungsseiten): Feld und Textzeile im selben Rasterfeld,
   die Zeile gibt die Höhe vor und liegt über dem Feld (Klicks gehen durch). Mit Fokus im Feld gilt das Feld selbst, die Zeile behält ihren Platz. */
.sd-umbruch > .such-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: stretch; }
.sd-umbruch > .such-zeile > :not(.sd-marke) { grid-row: 1; }
.sd-umbruch > .such-zeile > .sd-schritt-zurueck { grid-column: 1; }
.sd-umbruch > .such-zeile > :is(.sd-feld, .sd-feld-text) { grid-column: 2; }
.sd-umbruch > .such-zeile > .sd-lupe { grid-column: 3; }
.sd-umbruch > .such-zeile > .sd-schritt-vor { grid-column: 4; }
.sd-umbruch .sd-feld { height: auto; }
.sd-feld-text { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; pointer-events: none; user-select: none;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25; border-color: transparent; background: none;
  border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sd-eingabe:has(.sd-marke) .sd-feld-text { padding-left: 2rem; }
.such-zeile:has(> .sd-feld-text) > .sd-feld:not(:focus) { color: transparent; }
.such-zeile:has(> .sd-feld:focus) > .sd-feld-text { visibility: hidden; }
.such-zeile:has(> .sd-feld:disabled) > .sd-feld-text { opacity: 0.6; }
.sd-vorschlaege { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: max(100%, min(26rem, calc(100vw - 2rem)));
  max-height: min(22rem, 50vh); overflow-y: auto; padding: 0.3rem; scrollbar-width: thin;
  background: var(--popup-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-main); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.sd-vorschlaege-leer { margin: 0; padding: 0.6rem; color: var(--text-secondary); font-size: 0.9rem; }
.sd-vorschlag { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; min-height: 38px; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--radius-main);
  background: transparent; color: inherit; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.sd-vorschlag:hover, .sd-vorschlag.modal-treffer-aktiv { background: var(--surface-strong); }
.sd-vorschlag.aktuell .modal-treffer-name { font-weight: 600; }
.sd-vorschlag .modal-treffer-name, .sd-fenster .modal-treffer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-vorschlag .modal-treffer-nr, .sd-fenster .modal-treffer-nr { min-width: 4.5rem; }

/* Suchfenster der Einzelauswahl: Spaltenköpfe über der Liste, gleich breit wie die Zeilen. */
.sd-spaltenkopf { display: flex; gap: 0.6rem; padding: 0 0.6rem 0.3rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--border-soft); }
.sd-spaltenkopf > button { border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0;
  text-align: left; cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; }
.sd-spaltenkopf > button:hover, .sd-spaltenkopf > button.aktiv { color: var(--color-primary); }
.sd-spaltenkopf > .sd-kopf-nr { min-width: 4.5rem; }
.sd-spaltenkopf > .sd-kopf-name { flex: 1 1 auto; }

/* Mehrfachauswahl: Fenster, direkt auf der Seite, Listen. */
.modal-overlay.sd-overlay { padding: 4vh 1rem 1rem; }
.modal-box.sd-auswahl-fenster { max-width: 76rem; max-height: 90vh; overflow: hidden; }
.sd-fenster-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.sd-fenster-inhalt > .rechnungsdruck-einzel, .sd-inline > .rechnungsdruck-einzel { padding: 0; border: 0; box-shadow: none; background: none; }
.sd-fenster-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.sd-fenster-fuss > .card-subtitle { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.sd-inline { display: flex; flex-direction: column; gap: 0.6rem; }
.sd-inline-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1rem; }
.sd-inline-kopf > .sd-eingabe { flex: 1 1 18rem; max-width: 30rem; }
.sd-tabelle .sd-sortierkopf { border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; white-space: nowrap; }
.sd-tabelle .sd-sortierkopf:hover { color: var(--color-primary); }
.sd-tabelle tr.sd-markiert > td { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
/* Immer eine markierte Zeile je Liste (seit 31.10.2026): in der aktiven Liste kräftig mit Strich links, in der anderen nur getönt. Die
   Liste selbst nimmt den Fokus (Pfeiltasten, Enter) - Rahmen nur bei Tastaturbedienung. */
.sd-tabelle.sd-aktiv tr.sd-markiert > td { background: color-mix(in srgb, var(--color-primary) 24%, transparent); }
.sd-tabelle.sd-aktiv tr.sd-markiert > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.sd-tabelle:not(.sd-aktiv) tr.sd-markiert > td { background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
.sd-tabelle[tabindex]:focus { outline: none; }
.sd-tabelle[tabindex]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.sd-tabelle tr.sd-gesperrt > td { color: var(--text-secondary); }
.sd-tabelle tr.rechnungsdruck-zeile { user-select: none; }
/* Verschiebelisten (seit 03.11.2026, jeder Klick verschiebt): schnelles Doppeltippen soll zweimal verschieben - nicht zoomen und nicht
   als Geste verschluckt werden. */
html[data-touch] .rechnungsdruck-zeile { touch-action: manipulation; }

/* Gespeicherte Auswahlen: Knöpfe, darunter im Fluss Name bzw. Liste. */
.sd-gespeichert { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.sd-gespeichert-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sd-gespeichert-knoepfe > .btn.aktiv { border-color: var(--color-primary); color: var(--color-primary); }
.sd-gespeichert-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.sd-gespeichert-feld > .form-input { flex: 1 1 14rem; max-width: 22rem; min-width: 0; }
.sd-gespeichert-feld > .card-subtitle { flex-basis: 100%; margin: 0; }
.sd-gespeichert-liste { display: flex; flex-direction: column; gap: 0.25rem; max-height: 15rem; overflow-y: auto; padding: 0.35rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--popup-bg); }
.sd-gespeichert-liste > p { margin: 0; padding: 0.4rem; }
.sd-gespeichert-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.25rem 0.3rem; border-radius: var(--radius-main); }
.sd-gespeichert-zeile:hover { background: var(--surface-strong); }
.sd-gespeichert-name { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sd-gespeichert-zeile > .card-subtitle { margin: 0; }
.sd-gespeichert-aktionen { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.sd-gespeichert-aktionen > .btn { padding: 0.3rem 0.6rem; }

/* DatumWahl: ◀ Feld ▶ bzw. ◀ Von – Bis ▶. In schmalen Filtergruppen (Container) stehen Von und Bis untereinander, die Pfeile daneben. */
.datum-wahl { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.datum-wahl > .datum-feld { flex: 0 1 10.5rem; min-width: 7.6rem; }
.datum-wahl-schritt { flex: 0 0 auto; }
.datum-wahl-zeitraum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.datum-wahl-zeitraum > .datum-feld { min-width: 0; }
.datum-wahl-strich { color: var(--text-secondary); }
@container (max-width: 22rem) {
  .datum-wahl-zeitraum { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.35rem; }
  .datum-wahl-zeitraum > .datum-wahl-zurueck { grid-column: 1; grid-row: 1 / span 2; }
  .datum-wahl-zeitraum > .datum-wahl-vor { grid-column: 3; grid-row: 1 / span 2; }
  .datum-wahl-zeitraum > .datum-feld { grid-column: 2; }
  .datum-wahl-zeitraum > .datum-wahl-strich { display: none; }
}
/* Auf dem Handy immer untereinander (seit 30.10.2026) - auch dort, wo kein Vorfahre Container ist (Glocke, Formulare, Anmeldezeiten). */
/* Ebenso in der schmalen Eigenschaften-Spalte des Berichtsdesigners. */
html[data-geraet="handy"] .datum-wahl-zeitraum, .datum-wahl-zeitraum.bericht-datum { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.35rem; }
html[data-geraet="handy"] .datum-wahl-zeitraum > .datum-wahl-zurueck, .bericht-datum > .datum-wahl-zurueck { grid-column: 1; grid-row: 1 / span 2; }
html[data-geraet="handy"] .datum-wahl-zeitraum > .datum-wahl-vor, .bericht-datum > .datum-wahl-vor { grid-column: 3; grid-row: 1 / span 2; }
html[data-geraet="handy"] .datum-wahl-zeitraum > .datum-feld, .bericht-datum > .datum-feld { grid-column: 2; }
html[data-geraet="handy"] .datum-wahl-zeitraum > .datum-wahl-strich, .bericht-datum > .datum-wahl-strich { display: none; }

/* Handy und Tablet */
html[data-touch] .sd-feld { min-height: 44px; }
html[data-touch] .sd-vorschlag { min-height: 44px; align-items: center; }
html[data-touch] .sd-spaltenkopf > button { min-height: 44px; }
html[data-touch] .sd-tabelle .sd-sortierkopf { min-height: 40px; }
html[data-touch] .sd-gespeichert-aktionen > .btn { min-height: 44px; }
html[data-touch] .datum-wahl-schritt { min-width: 44px; min-height: 44px; justify-content: center; }
html[data-touch] .sd-vorschlaege { max-height: min(22rem, calc(var(--vv-hoehe, 100dvh) * 0.45)); }
html[data-geraet="handy"] .sd-vorschlaege { width: 100%; }
html[data-geraet="handy"] .modal-overlay.sd-overlay { padding: 0; }
html[data-geraet="handy"] .modal-box.sd-auswahl-fenster { max-height: none; padding: 0.8rem; }
html[data-geraet="handy"] .sd-fenster-fuss > .btn { flex: 1 1 0; justify-content: center; }
html[data-geraet="handy"] .sd-fenster-fuss > .card-subtitle { flex-basis: 100%; }
html[data-geraet="handy"] .sd-gespeichert-knoepfe > .btn { flex: 1 1 0; justify-content: center; }
html[data-geraet="handy"] .sd-gespeichert-aktionen { flex: 1 1 100%; }
html[data-geraet="handy"] .sd-gespeichert-aktionen > .btn { flex: 1 1 0; justify-content: center; }
html[data-geraet="handy"] .sd-inline-kopf > .sd-eingabe { max-width: none; flex-basis: 100%; }
.datum-wahl.aus { opacity: 0.45; }
.datum-wahl-zeitraum .datum-feld .datum-text { padding-left: 0.6rem; }
.filter-filialwahl { flex: 1 1 auto; }
.filter-auswahl-zeile > .sd-eingabe { flex: 1 1 auto; }
/* Lieferung und Tour über die Bedienbausteine (seit 30.10.2026): Lieferung schmal (eine Ziffer + Lupe), Tour im Filter des Versandsystems wie
   die Listen daneben; auf dem Handy volle Breite wie vorher die Auswahllisten. */
.sd-eingabe.sd-lieferung { width: 7.5rem; flex: 0 0 auto; }
/* Mit ◀ ▶ (seit 02.11.2026) breiter, aber nie breiter als der Platz (Review: im Raster der Bestellvorschlag-Filterzeile auf dem Handy
   ragte es in die Nachbarspalte). */
.sd-eingabe.sd-lieferung.sd-mit-pfeilen { width: 11.5rem; max-width: 100%; }
html[data-touch] .sd-eingabe.sd-lieferung.sd-mit-pfeilen { width: 12.5rem; }
.vsy-filter > .sd-eingabe { flex: 1 1 12rem; max-width: 20rem; }
html[data-geraet="handy"] .belegdruck-felder .sd-eingabe.sd-lieferung, .bv-filterzeile .sd-eingabe.sd-lieferung,
  html:not([data-geraet="desktop"]) .bestellplan-sondertage .sd-eingabe.sd-lieferung { width: 100%; }
html[data-geraet="handy"] .belegdruck-felder .sd-eingabe.sd-lieferung.sd-mit-pfeilen, html[data-touch] .bv-filterzeile .sd-eingabe.sd-lieferung.sd-mit-pfeilen,
  html:not([data-geraet="desktop"]) .bestellplan-sondertage .sd-eingabe.sd-lieferung.sd-mit-pfeilen { width: 100%; }
html[data-geraet="handy"] .vsy-filter > .sd-eingabe { flex-basis: 100%; max-width: none; }
.beleg-zurueck { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; margin: 0 0 0.4rem; color: var(--color-primary); text-decoration: none; font-size: 0.9rem; }
.beleg-zurueck:hover { text-decoration: underline; }
html[data-touch] .beleg-zurueck { min-height: 44px; }
/* Im Fenster der Mehrfachauswahl am PC immer vier Spalten (Vorauswahl | verfügbar | Pfeile | gewählt): das Fenster ist höchstens
   76rem breit, jede Liste bleibt so über 20rem - die Regel „bis 1500 px gewählte unten“ gilt für die volle Seite. */
html[data-geraet="desktop"] .sd-auswahl-fenster .rechnungsdruck-einzel:has(> :nth-child(4)) { grid-template-columns: minmax(10rem, 0.45fr) minmax(0, 1fr) auto minmax(0, 1fr); }
html[data-geraet="desktop"] .sd-auswahl-fenster .rechnungsdruck-einzel:has(> :nth-child(4)) > * { grid-column: auto; }
html[data-geraet="desktop"] .sd-auswahl-fenster .rechnungsdruck-einzel:has(> :nth-child(4)) > .rechnungsdruck-pfeile { flex-direction: column; }
html[data-geraet="desktop"] .sd-auswahl-fenster .rechnungsdruck-einzel:has(> :nth-child(4)) > .rechnungsdruck-pfeile i { transform: none; }
/* Ohne Wochentag füllt das Datum das Feld; mit Wochentag nicht (seit 30.10.2026): 100 % des Felds plus der Wochentag liefen über das
   Feld hinaus, das durchsichtige Eingabefeld lag dann über ▶ und schluckte den Klick (Bestellvorschlag, Fahrer, Rechnungsdruck …). Mit
   Wochentag gilt die feste Breite (.datum-feld.datum-mit-wochentag .datum-text), auf dem Handy füllt es die Zeile. */
.datum-wahl > .datum-feld:not(.datum-mit-wochentag) > .datum-text { width: 100%; }
.bestell-leiste .datum-wahl > .datum-feld { flex: 0 0 8.2rem; }
html[data-geraet="handy"] .bestell-leiste .datum-wahl { flex: 1 1 auto; }
html[data-geraet="handy"] .bestell-leiste .datum-wahl > .datum-feld { flex: 1 1 0; min-width: 0; }
.sd-gesperrt-bereich { opacity: 0.6; pointer-events: none; }
/* Bedienbausteine statt Datalist (seit 31.10.2026): Vorschau im Preisschild-Designer, Kunde in „Rechnungen auswählen“ und Lieferaufteilungen. */
.rechnungsdruck-liste-kopf > .sd-eingabe.mpp-vorschau-wahl { flex: 1 1 11rem; min-width: 0; max-width: 18rem; }
.rechnungsnachdruck-name > .sd-eingabe, .lfa-kundenwahl > .sd-eingabe { width: 100%; }
html[data-geraet="handy"] .rechnungsdruck-liste-kopf > .sd-eingabe.mpp-vorschau-wahl { max-width: none; flex-basis: 100%; }
/* Bestellplan, Zeitraum (seit 30.10.2026 DatumWahl): auf dem Handy volle Breite, Von und Bis untereinander, die Pfeile daneben. */
html[data-geraet="handy"] .bestellplan-zeitraum .filter-field:has(> .bestellplan-zeitraum-datum) { flex: 1 1 100%; }
html[data-geraet="handy"] .bestellplan-zeitraum-datum.datum-wahl-zeitraum { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.35rem; }
html[data-geraet="handy"] .bestellplan-zeitraum-datum > .datum-wahl-zurueck { grid-column: 1; grid-row: 1 / span 2; }
html[data-geraet="handy"] .bestellplan-zeitraum-datum > .datum-wahl-vor { grid-column: 3; grid-row: 1 / span 2; }
html[data-geraet="handy"] .bestellplan-zeitraum-datum > .datum-feld { grid-column: 2; }
html[data-geraet="handy"] .bestellplan-zeitraum-datum > .datum-wahl-strich { display: none; }
/* Platzhalter-Zeilen von Virtualize (SpacerElement tr, ohne Zellen) aus den Karten-Regeln nehmen - sonst je eine leere Karte. */
.sd-tabelle > tbody > tr:not(:has(> td)) { padding: 0 !important; min-height: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
/* Regel-Einträge der Mehrfachauswahl (seit 30.10.2026, RegelAuswahl): Knopf „Als Regel übernehmen“ unter der Vorauswahl, rechts die
   Regeln (getönt, Symbol „wächst mit“) und Ausnahmen über den gewählten Einträgen. */
.sd-regel-neu { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.2rem; }
.sd-regel-neu > .btn { justify-content: center; }
.sd-regel-neu > .card-subtitle { margin: 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.sd-tabelle tr.sd-regel > td { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.sd-tabelle tr.sd-regel > td.ls-nr { color: var(--color-primary); }
.sd-tabelle tr.sd-regel.sd-markiert > td { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
.sd-tabelle tr.sd-ausnahme > td { color: var(--text-secondary); }
.sd-regel-info { color: var(--text-secondary); font-size: 0.8rem; font-weight: 400; }
.sd-ueber-regel { color: var(--color-primary); font-size: 0.75rem; margin-left: 0.2rem; }
.sd-vorlagen-titel { margin: 0.5rem 0.3rem 0.1rem; }
/* Rechte-Auswahlen mit StammdatenAuswahl (seit 30.10.2026): Artikel der Bestell-Artikelgruppe in eigener Zeile unter Name und Knöpfen. */
.artikelgruppen-liste li { flex-wrap: wrap; }
.artikelgruppen-liste li + li { border-top: 1px solid var(--line-soft); padding-top: 0.45rem; }
.artikelgruppen-liste .artikelgruppe-artikel { flex: 1 1 100%; }
.recht-zeile-unter > .artikel-festlegen { flex: 1 1 18rem; min-width: 0; }
html[data-touch] .sd-regel-neu > .btn { min-height: 44px; }
/* Das Fenster bekommt beim Öffnen den Fokus (Esc, keine Tastatur auf Touch-Geräten) - ohne Rahmen um das ganze Fenster. */
.modal-box.sd-auswahl-fenster:focus { outline: none; }

/* ---------------------------------------------------------------------- */
/* Touch-Ziele ab 44 px (seit 31.10.2026, Messung aller Menüseiten auf Handy und Tablet - smoke.TOUCH_ZIELE): allgemeine Formular-   */
/* elemente und Bausteine. Nur unter data-touch/data-geraet - der Desktop bleibt unverändert.                                        */
/* ---------------------------------------------------------------------- */
/* Eingabe- und Auswahlfelder: mit 16 px Schrift und dem Polster waren sie 40-43 px hoch. */
html[data-touch] :is(.form-input, select) { min-height: 44px; }
/* Datum mit Wochentag: der Rahmen gehört dem Feld drumherum - das zählt als Trefferfläche (der Wochentag lässt Klicks durch). */
html[data-touch] .datum-feld.datum-mit-wochentag { min-height: 44px; }
html[data-touch] .datum-feld.datum-mit-wochentag .datum-text { min-height: 42px; }
/* Kalenderknopf im Datumsfeld überall wie bisher nur auf den Druckseiten: 44 × 44 am rechten Rand, das Datum macht ihm Platz. */
html[data-touch] .datum-kalender { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; right: 0; }
html[data-touch] .datum-feld .datum-text { padding-right: 44px; }
/* Zeitraum nebeneinander (z. B. Datengrundlage am Tablet quer): weniger Polster links, sonst wird das Jahr abgeschnitten. */
html[data-touch] .datum-wahl-zeitraum .datum-feld .datum-text { padding-left: 0.5rem; }
html[data-touch]:not([data-geraet="handy"]) .datum-feld.datum-mit-wochentag .datum-text { width: calc(8.9rem - 2px); }
html[data-touch] .bestell-leiste .datum-wahl > .datum-feld { flex-basis: 9.4rem; }
/* Sortierköpfe der Verschiebelisten (StammdatenListen) und Spaltenköpfe im Suchfenster. */
html[data-touch] .sd-tabelle .sd-sortierkopf { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
/* Häkchen und Optionen mit Beschriftung: die ganze Zeile ist die Trefferfläche. */
html[data-touch] label:is(.widget-eintrag, .lieferscheindruck-haken):has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; }
/* Wochentage der Anmeldezeiten (Kästchen versteckt, die Beschriftung ist der Knopf) - auf dem Handy notfalls zwei Reihen. */
html[data-touch] .anmeldezeit-tag { min-width: 44px; min-height: 44px; }
/* Kleine Knöpfe nur mit Symbol (Zeitfenster entfernen, Aktualisieren, Rechnung suchen …). */
html[data-touch] .btn.btn-klein:has(> i:only-child) { min-width: 44px; justify-content: center; }
/* Echte Reiter (Klasse reiter). */
html[data-touch] .reiter > :is(a, button:not(.btn)) { min-height: 44px; display: inline-flex; align-items: center; }
/* ☰ in der Kopfzeile: „.topbar-left > * { min-width: 0 }“ drückte ihn bei langem Titel auf 32 px. */
html[data-touch] .topbar-left > .icon-button.mobile-only { min-width: 44px; flex-shrink: 0; }
/* −/+ der Erfassungszeilen. */
html[data-touch] :is(.mobil-schritt, .mobil-bestaetigen) { width: 44px; height: 44px; }
/* Lieferungen 1-9: je 44 px breit; auf dem Handy über die ganze Breite (seit 03.11.2026 nur 1–3 und die mit Inhalt, der Rest im Menü „+n“). */
html[data-touch] .bestell-lieferung-wahl .btn { min-width: 44px; }
/* Handy (seit 03.11.2026 meist 1–3 und „+n“): über die ganze Breite, die Knöpfe teilen sich die Zeile. Sind es mehr als in eine Zeile passen
   (z. B. 1–9 mit Inhalt und „Zurück zu einer Lieferung“), bricht die Leiste um statt abzuschneiden (Review: ab 8 Knöpfen war der Rest
   unerreichbar) - die Knöpfe der letzten Zeile werden breiter. Linien wie im Menü: deckender Hintergrund in 1-px-Fugen. */
html[data-geraet="handy"] .bestell-leiste .bestell-lieferung-wahl:not(.bestell-lieferung-weitere) { flex-wrap: wrap; gap: 1px; width: 100%;
  background: linear-gradient(var(--border-soft), var(--border-soft)), var(--popup-bg); }
html[data-geraet="handy"] .bestell-leiste .bestell-lieferung-wahl:not(.bestell-lieferung-weitere) > .btn { flex: 1 1 44px; border-left: 0 !important; }
html[data-geraet="handy"] .bestell-leiste .bestell-lieferung-wahl .btn:not(.btn-primary) { background: var(--popup-bg); }
html[data-geraet="handy"] .bestell-leiste .bestell-lieferung-wahl .btn.vorhanden:not(.btn-primary) { background: color-mix(in srgb, var(--color-primary) 8%, var(--popup-bg)); }
/* Menü „+n“ auf dem Handy: so breit wie die Leiste, je Spalte gleich breit. */
html[data-geraet="handy"] .bestell-leiste .bestell-lieferung-weitere { width: 100%; grid-template-columns: repeat(var(--spalten, 3), minmax(44px, 1fr)); }
/* Auf Touch-Geräten keine Hover-Tönung in Such- und Vorschlagslisten: nach dem Tippen blieb sie stehen - zwei Zeilen wirkten markiert. */
html[data-touch] .modal-treffer:hover:not(.modal-treffer-aktiv), html[data-touch] .sd-vorschlag:hover:not(.modal-treffer-aktiv) { background: transparent; }
/* Seit 01.11.2026 die bis dahin offenen Ausnahmen (smoke.TOUCH_AUSNAHMEN):
   Kästchen ohne Beschriftung in Tabellen („alle“ im Kopf, Auswahl je Zeile): ein natives Kästchen zeichnet sich so groß wie sein Feld -
   44 px wären ein riesiges Kästchen. Daher eigenes Kästchen: 44 × 44 Trefferfläche, gezeichnet ~22 px in der Mitte; die negativen
   Ränder halten Zeilenhöhe und Spaltenbreite wie bisher (kein Springen). Farben nur über die Variablen, angehakt in der Primärfarbe. */
html[data-touch] .widget-tabelle :is(th, td) > input[type="checkbox"] { appearance: none; position: relative; box-sizing: border-box; flex: 0 0 auto;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: -11px -8px; padding: 0; border: 0; border-radius: 0; background: transparent;
  vertical-align: middle; cursor: pointer; }
html[data-touch] .widget-tabelle :is(th, td) > input[type="checkbox"]::before { content: ""; position: absolute; inset: 11px; border: 2px solid var(--text-secondary);
  border-radius: 5px; background: var(--surface); }
html[data-touch] .widget-tabelle :is(th, td) > input[type="checkbox"]:checked::before { border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 22%, var(--surface)); }
html[data-touch] .widget-tabelle :is(th, td) > input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 11px;
  border: solid var(--color-primary); border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -62%) rotate(45deg); }
html[data-touch] .widget-tabelle :is(th, td) > input[type="checkbox"]:focus-visible { outline: none; }
html[data-touch] .widget-tabelle :is(th, td) > input[type="checkbox"]:focus-visible::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); }
html[data-touch] .widget-tabelle :is(th, td) > input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
/* Die Kästchen liegen (position: relative) über ihrer Zeile - ein klebender Kopf muss darüber bleiben, wenn eine Liste in sich scrollt. */
html[data-touch] .widget-tabelle th { z-index: 3; }
/* Textknöpfe in Tabellenzeilen (Anmeldezeiten „übernehmen“, Name im Bestellplan): 44 px hoch, die negativen Ränder halten die Zeile ruhig. */
html[data-touch] td .btn-link { min-height: 44px; margin-block: -11px; }
/* Menü „⋯“ der Dashboard-Widgets: 44 px hoch, ohne die Kopfzeile zu erhöhen (vorher 2rem hoch - der Rand gleicht den Rest aus, auch bei kleiner
   Schrift). */
html[data-touch] .widget-menue-knopf { height: 44px; margin-block: calc((2rem - 44px) / 2); }
/* „Einstellungen“ der Umsatzanalyse zum Aufklappen. */
html[data-touch] .ua-einstellungen > summary { min-height: 44px; padding-block: 10px; box-sizing: border-box; }
/* Menü (Seitenleiste am Tablet quer und Schublade): Punkte, Untergruppen, Abschnitte und die Wahl „offen/zu“ 44 px hoch. Die Liste wird
   länger und scrollt in sich (.sidebar-nav). Eingeklappt (nur Symbole) sind die Abschnitte eine Trennlinie ohne Klick - dort keine Höhe. */
html[data-touch] :is(.sidebar, .mobile-nav) .nav-link { min-height: 44px; display: flex; align-items: center; }
html[data-touch] :is(.sidebar, .mobile-nav) .nav-link > .nav-link-content { flex: 1 1 auto; min-width: 0; }
html[data-touch] .mobile-nav summary.nav-abschnitt,
  html[data-touch]:not([data-menue="zu"]:not([data-menue-auf])) .sidebar summary.nav-abschnitt { min-height: 44px; margin-top: 0.25rem; }
html[data-touch] .menue-wahl { min-height: 44px; }

/* Karte „Artikel ohne Abgabepreis“ und Spalten Thekenwirkung / „nicht leer vor“ (seit 01.11.2026). */
.bv-ohne-ap-erklaerung { margin: 0.25rem 1rem 0.5rem; }
.bv-ohne-ap-gruppe { border-top: 1px solid var(--border-soft); }
.bv-ohne-ap-gruppe > summary { cursor: pointer; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; }
.bv-ohne-ap-sg { margin-left: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* Rolle unter dem Servicegrad (Lagerware, fertig + Teigling, je nach Filiale). */
.bv-ohne-ap-rolle { display: block; font-size: 0.8rem; white-space: normal; }
.bv-ohne-ap-gruppenwert { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0 1rem 0.5rem; }
.bv-leervor { gap: 0.35rem; }
.bv-leervor .bv-leise { font-size: 0.8rem; }
html:is([data-touch], :not([data-geraet="desktop"])) .bv-ohne-ap-gruppe > summary { min-height: 44px; align-items: center; }
html[data-geraet="handy"] .bv-ohne-ap-sg { margin-left: 0; width: 100%; }
/* Gruppen- und Artikeltabelle der Einstellungen auf dem Tablet als Zeilen-Karten (seit 01.11.2026): mit Thekenwirkung und „nicht leer vor“ ist sie mit
   festen Eingabefeldern breiter als ein Tablet (hoch und quer) - die Zellen brechen um, die Beschriftung schreibt js/geraet.js an. */
html[data-geraet="tablet"] :is(.bv-gruppentabelle, .bv-artikeltabelle) > thead { display: none; }
html[data-geraet="tablet"] :is(.bv-gruppentabelle, .bv-artikeltabelle), html[data-geraet="tablet"] :is(.bv-gruppentabelle, .bv-artikeltabelle) > tbody { display: block; width: 100%; }
html[data-geraet="tablet"] :is(.bv-gruppentabelle, .bv-artikeltabelle) > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--border-soft); }
html[data-geraet="tablet"] :is(.bv-gruppentabelle, .bv-artikeltabelle) > tbody > tr > td { display: flex; align-items: center; gap: 0.4rem; border: 0; padding: 0; text-align: left; }
html[data-geraet="tablet"] :is(.bv-gruppentabelle, .bv-artikeltabelle) > tbody > tr > td.karte-titel { flex: 1 1 100%; display: block; font-weight: 600; }
html[data-geraet="tablet"] :is(.bv-gruppentabelle, .bv-artikeltabelle) > tbody > tr > td[data-label]:not([data-label=""], .karte-titel)::before { content: attr(data-label); color: var(--text-secondary); font-size: 0.85rem; }
/* Expertenwerte zum Aufklappen: Trefferfläche ab 44 px auch am Tablet quer (dort einzeilig nur 29 px hoch). */
html:is([data-touch], :not([data-geraet="desktop"])) .bv-experten > summary { min-height: 44px; }
/* „%“ bleibt neben dem Feld (seit 01.11.2026, mit den Spalten Thekenwirkung und „nicht leer vor“ brach es in der Gruppentabelle unter das Feld). */
.bv-gruppentabelle .bv-feld-inline { flex-wrap: nowrap; }
/* Spalte „Wie knapp“ (seit 01.11.2026): Wahl und Prozent (brechen um, wenn es eng wird), darunter grau der Servicegrad bzw. was von oben gilt. */
.bv-retoure-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.35rem; }
.bv-retoure-feld select.bv-retoure-wahl { width: 7.5rem; }
.bv-retoure-wert-feld { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.bv-retoure-zusatz { flex: 1 1 100%; font-size: 0.78rem; }
html[data-geraet="handy"] .bv-retoure-feld { width: 100%; }
html[data-geraet="handy"] .bv-retoure-feld select.bv-retoure-wahl { flex: 1 1 auto; width: auto; min-width: 0; }

/* Vorbestellungen auf Handy und Tablet (seit 06.11.2026): Kopf untereinander, Suche über die volle Breite, Knöpfe ≥ 44 px; auf dem Handy die
   Liste als Karten (karten-tabelle) - die Gruppenzeile des Tages als schmale Überschrift. */
/* Kopf (seit 10.11.2026): Titel und „Neue Vorbestellung“ oben, die Werkzeuge darunter über die volle Breite; auf dem Handy der Knopf unter dem
   Titel über die volle Breite. */
html:not([data-geraet="desktop"]) .vorbestell-werkzeuge { justify-content: flex-start; width: 100%; }
html[data-geraet="handy"] .vorbestell-titel-gruppe { flex: 1 1 100%; flex-wrap: wrap; }
html[data-geraet="handy"] .vorbestell-titel-gruppe > .sonder-neu { flex: 1 1 100%; justify-content: center; text-align: center; }
/* Lange Übersetzungen (pl „Zamówienia z wyprzedzeniem“) brechen auf dem Handy um, statt über den Rand zu laufen (seit 11.11.2026). */
html[data-geraet="handy"] .vorbestell-titel-gruppe > :is(.vorbestell-titel, .sonder-neu) { white-space: normal; min-width: 0; }
html:not([data-geraet="desktop"]) .vorbestell-suche { flex: 1 1 14rem; }
html:not([data-geraet="desktop"]) :is(.vorbestell-suche-feld, .vorbestell-suche-mass > span) { font-size: 16px; }
html[data-touch] .vorbestell-tabelle :is(.btn-icon, .btn-klein), html[data-touch] .vorbestell-kopf .btn { min-height: 44px; min-width: 44px; }
html[data-geraet="handy"] .vorbestell-werkzeuge > * { flex: 1 1 100%; width: auto; }
html[data-geraet="handy"] .vorbestell-werkzeuge > :is(.vorbestell-einstellungen-knopf, .vorbestell-historie-knopf) { flex: 0 0 auto; }
/* Suchfenster auf dem Handy: Nummer, Tag und Uhrzeit oben, darunter Name und Status, dann Telefon und Filiale; im Kopf nur die Sortierknöpfe. */
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer {
  grid-template-columns: auto auto 1fr; grid-template-areas: "nr tag zeit" "name name name" "tel filiale status"; row-gap: 0.15rem; }
html[data-geraet="handy"] .vorbestell-suche-dialog.ohne-nummer .modal-treffer { grid-template-areas: "tag zeit zeit" "name name name" "tel filiale status"; }
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer > .vs-nr { grid-area: nr; }
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer > .vs-tag { grid-area: tag; }
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer > .vs-zeit { grid-area: zeit; }
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer > .vs-name { grid-area: name; font-weight: 600; }
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer > .vs-status { grid-area: status; justify-self: end; }
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer > .vs-telefon { grid-area: tel; }
html[data-geraet="handy"] .vorbestell-suche-dialog .modal-treffer > .vs-filiale { grid-area: filiale; }
html[data-geraet="handy"] .vorbestell-suche-dialog .vorbestell-suche-kopf { display: flex; flex-wrap: wrap; gap: 0 1rem; }
html[data-geraet="handy"] .vorbestell-suche-kopf > span { display: none; }
html[data-touch] .vorbestell-suche-kopf > button { min-height: 44px; }
html[data-geraet="handy"] .vorbestell-werkzeuge > .vorbestell-suche { flex: 1 1 8rem; min-width: 0; max-width: none; }
/* Tablet: der Stift ohne Text (≥ 44 px), damit Name und E-Mail Platz haben - auf dem Handy blendet ihn die Karte ohnehin aus. */
html:not([data-geraet="desktop"]) .vorbestell-tabelle .sonder-bearbeiten .knopf-text { display: none; }
.vorbestell-mail-klein, .vorbestell-status-klein, .vorbestell-zeit-klein { display: none; }
/* Tablet: Abholzeit unter der Nummer, Status unter dem Namen, E-Mail unter dem Telefon - so passen die Knöpfe auch hochkant in die Zeile. */
html[data-geraet="tablet"] .vorbestell-zeit-klein { display: block; font-weight: 400; }
html[data-geraet="tablet"] .vorbestell-tabelle:not(.ohne-nummer) :is(th.vorbestell-zeit-kopf, td.vorbestell-zeit) { display: none; }
.vorbestell-status-klein .chip { white-space: nowrap; }
html[data-geraet="tablet"] .vorbestell-status-klein { display: block; margin-top: 0.2rem; font-weight: 400; }
html[data-geraet="tablet"] .vorbestell-tabelle :is(th.vorbestell-status-kopf, td.vorbestell-status) { display: none; }
html[data-geraet="tablet"] .vorbestell-mail-klein { display: block; color: var(--text-secondary); overflow-wrap: anywhere; white-space: normal; }
html[data-geraet="tablet"] .vorbestell-tabelle :is(th.vorbestell-mail-kopf, td.vorbestell-mail) { display: none; }
html[data-geraet="tablet"] .vorbestell-tabelle td.vorbestell-telefon { white-space: normal; min-width: 9rem; }
html[data-geraet="handy"] .vorbestell-tabelle > tbody > tr.vorbestell-details > td .sonder-artikel { margin: 0; width: 100%; }
html[data-geraet="handy"] .vorbestell-tabelle > tbody > tr.vorbestell-gruppe { padding: 0.35rem 0.5rem; min-height: 0; background: none; border: 0; box-shadow: none; }
html[data-geraet="handy"] .vorbestell-tabelle > tbody > tr.vorbestell-gruppe > td { background: none; padding: 0; }
html[data-geraet="handy"] .vorbestell-tabelle > tbody > tr.vorbestell-details { padding: 0; }
html[data-geraet="handy"] .vorbestell-tabelle > tbody > tr.vorbestell-details > td { display: block; width: 100%; overflow-wrap: normal; }
html[data-geraet="handy"] .vorbestell-tabelle td.vorbestell-aktionen { text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 0.25rem; }
html[data-geraet="handy"] .vorbestell-gruppe-anzahl { float: none; }
html[data-geraet="handy"] .vorbestell-pflicht { grid-template-columns: 1fr; }
html[data-geraet="handy"] .sonder-tag-wahl > .datum-wahl { flex: 1 1 100%; }
html[data-geraet="handy"] .sonder-lieferung-wahl { flex: 1 1 100%; }
html[data-geraet="handy"] .sonder-lieferung-wahl > .sd-eingabe.sonder-lieferung-feld { flex: 1 1 auto; width: auto; }

/* Goecom-Freigabe (seit 09.11.2026): Wartebereich der Anmeldeseite - Kontrollzahl groß, Restzeit, Abbrechen. Auf allen Geräten
   gleich: schmal und ohne feste Breiten, die Zahl bleibt auch auf dem Handy gut lesbar. */
.goecom-warten {
  margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center;
  padding: 1.25rem 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-main); background: var(--surface);
}
.goecom-warten-titel { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; overflow-wrap: anywhere; }
.goecom-warten-titel i { color: var(--color-primary); }
.goecom-kontrollzahl {
  font-size: 4rem; line-height: 1; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  color: var(--color-primary); padding: 0.75rem 1.5rem; border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.goecom-warten-text { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
.goecom-warten-zeit { display: flex; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.goecom-warten .goecom-abbrechen { margin-top: 0.25rem; }
html[data-touch] .goecom-warten .goecom-abbrechen { min-height: 44px; }

/* Anmeldungen von Goecom in der Benutzerverwaltung (seit 09.11.2026). */
.goecom-anmeldungen .goecom-geraet { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([data-geraet="desktop"]) .goecom-anmeldungen .goecom-geraet { max-width: none; white-space: normal; overflow-wrap: anywhere; }

/* Filialmanager → Kasse (seit 11.11.2026, KasseSeite.razor): Kopf mit Filiale, Datum und Kasse, darunter Marvins Reiter. */
.ks-seite { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.ks-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem; }
.ks-felder { flex: 1 1 auto; }
.ks-filialwahl { min-width: min(20rem, 100%); }
.ks-filialwahl .sd-eingabe { width: 100%; }
.ks-aktionen { flex: 0 0 auto; }
.ks-kassen { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.ks-kassen-titel { font-size: 0.85rem; color: var(--text-secondary); }
.ks-kassenwahl { flex-wrap: wrap; }
.ks-kassenwahl button.ks-geaendert { box-shadow: inset 0 -3px 0 var(--color-primary); }
.ks-leer { font-size: 0.6rem; margin-left: 0.2rem; opacity: 0.7; }
.ks-physik { font-size: 0.85rem; color: var(--text-secondary); }
.ks-inhalt { display: flex; flex-direction: column; min-width: 0; }
.ks-reiter { margin-bottom: 0.6rem; }
.ks-grund { margin: 0 0 0.5rem; }
.ks-basis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(15rem, 0.7fr); gap: 0.8rem 1.2rem; flex: 1 1 auto; min-height: 0; overflow: auto; }
.ks-baum-spalte, .ks-kopfwerte { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ks-titel { margin: 0; font-size: 0.95rem; }
.ks-baum td { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.ks-baum tr.ks-summe td { font-weight: 600; }
.ks-baum td.zahl { width: 1%; white-space: nowrap; }
.ks-baum .ks-zahl { width: 7rem; }
.ks-baum td.ks-name { overflow-wrap: anywhere; }
.ks-name { white-space: normal; }
.ks-ebene-1 { padding-left: 1.4rem !important; }
.ks-ebene-2 { padding-left: 2.6rem !important; }
.ks-ebene-3, .ks-ebene-4 { padding-left: 3.8rem !important; }
.ks-zeichen { display: inline-block; width: 1rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ks-zahl { width: 8rem; text-align: right; font-variant-numeric: tabular-nums; }
.ks-text { width: 100%; min-width: 8rem; }
.ks-kennzahl { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ks-mwst { display: flex; flex-direction: column; gap: 0.3rem; }
.ks-mwst-zeile, .ks-kopfwerte > .form-label { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ks-tagesinfo { width: 100%; resize: vertical; min-height: 2.6rem; font: inherit; }
.ks-kopfwerte > label:last-child { flex-direction: column; align-items: stretch; }
.ks-zeile { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.ks-zeile > span:first-child { color: var(--text-secondary); font-size: 0.85rem; }
.ks-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.ks-abweichung { color: var(--warning); }
.ks-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; margin-bottom: 0.6rem; }
.ks-schalter { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.ks-tabelle-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ks-speicher .ks-zahl { width: 5.6rem; padding-left: 0.4rem; padding-right: 0.4rem; }
.ks-speicher td, .ks-speicher th { padding-left: 0.3rem; padding-right: 0.3rem; }
.ks-konto { min-width: 10rem; }
.ks-mwst-wahl { width: auto; }
html:not([data-geraet="desktop"]) .ks-tabelle-wrap, html:not([data-geraet="desktop"]) .ks-basis { overflow: visible; }
html:not([data-geraet="desktop"]) .ks-basis { grid-template-columns: minmax(0, 1fr); }
@media (orientation: landscape) { html[data-geraet="tablet"] .ks-basis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
html:not([data-geraet="desktop"]) .ks-aktionen .btn, html:not([data-geraet="desktop"]) .ks-kassenwahl button { min-height: 44px; }
html:not([data-geraet="desktop"]) .ks-zahl, html:not([data-geraet="desktop"]) .ks-text, html:not([data-geraet="desktop"]) .ks-tagesinfo,
html:not([data-geraet="desktop"]) .ks-mwst-wahl { font-size: 16px; min-height: 44px; }
html:not([data-geraet="desktop"]) .ks-kassenwahl button { min-width: 44px; }
html:not([data-geraet="desktop"]) .froster-reiter.ks-reiter { flex-wrap: wrap; overflow-x: visible; }
html:not([data-geraet="desktop"]) .froster-reiter.ks-reiter > button { flex: 1 1 auto; justify-content: center; }
html[data-geraet="handy"] .froster-reiter.ks-reiter > button { flex: 1 1 calc(50% - 0.5rem); min-width: 0; padding-left: 0.4rem; padding-right: 0.4rem; white-space: normal; }
html[data-geraet="handy"] .ks-aktionen { width: 100%; display: flex; gap: 0.5rem; }
html[data-geraet="handy"] .ks-aktionen .btn { flex: 1 1 auto; }
html[data-geraet="handy"] .ks-zahl, html[data-geraet="handy"] .ks-speicher .ks-zahl { width: 100%; }
html[data-touch] .ks-schalter { min-height: 44px; }
html[data-touch] .ks-schalter input { width: 1.4rem; height: 1.4rem; }