/* Kummer Toni · Auslieferung – Oberfläche (PC, Tablet, Android, iPhone)
   Design wie Kummer Toni · Intern (mobile-ui-Skill): gleiche Tokens, gleiche
   Kopfzeile, gleiche Knöpfe, Hell/Dunkel nach Systemeinstellung oder Schalter.
   app-basis.css wird NICHT mehr geladen (gilt weiter für Zustellung/Schulung).

   Inhalt
   1. Tokens (:root) und Dunkelmodus – neue Farben immer hier UND im Dunkel-Block anlegen
   2. Grundlagen: Schrift, Silbentrennung, Fokus
   3. Kopfzeile, Reiter, Inhalt
   4. Anmeldung
   5. Elemente: Knöpfe, Felder, Karten, Abzeichen, Meldung
   6. Erfassung: Kategorie-Umschalter, Kennzahlen, Größenzeilen, Zähler, Speichern-Leiste
   7. Übersicht, Admin, Hilfe
   8. Kategoriefarben (1A grün, Standard petrol, Markt violett – bis 11.10.2026 rotbraun)
   9. Anpassungen je Bildschirmbreite und für Finger-Bedienung
*/

/* =====================================================================
   1. Tokens
   ===================================================================== */
:root {
  color-scheme: light dark;
  /* Flächen und Text (wie Intern) */
  --bg: #f4f6f3;          /* Seitenhintergrund */
  --surface: #ffffff;     /* Karten, Felder, Knöpfe */
  --surface-2: #eef1ef;   /* abgesetzte Flächen */
  --surface-3: #f7f9f7;   /* Hover, Fußleisten */
  --head: #e7eee9;        /* Tabellenköpfe */
  --text: #1c2320;        /* 15.9:1 auf surface */
  --text-muted: #5d6a63;  /*  5.7:1 auf surface, 5.2:1 auf bg */
  --border: #6f7d75;      /*  4.3:1 auf surface – Feldrahmen, Knöpfe */
  --divider: #d9e0dc;     /* nur dekorative Linien */
  --linie: #b9c4bd;       /* Tabellen- und Kartenlinien */
  --hover: rgba(0,0,0,.06);
  /* Hausfarbe */
  --brand: #1f5f3f; --on-brand: #ffffff;          /* 7.6:1 */
  --primary: #1f5f3f; --primary-hover: #164530; --on-primary: #ffffff;
  --primary-soft: #e4f0e8; --primary-line: #9cc9ad;
  --focus: #1f5f3f;
  /* Status */
  --danger: #b3261e; --danger-hover: #8f1d17; --on-danger: #ffffff;   /* 6.5:1 */
  --danger-soft: #fbe9e7; --danger-line: #e6b8b3;
  --warning: #8a5a00; --warning-soft: #fff4dc; --warning-line: #a87118;
  --toast-bg: #23302a; --toast-text: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.05);
  --shadow-hoch: 0 -2px 12px rgba(0,0,0,.12);
  /* Kategorien – je Kategorie eine Farbe, damit man am Verkaufsplatz sofort sieht,
     was erfasst wird. Alle mit weißer Schrift >= 7.5:1, als Text auf bg >= 7:1. */
  --kat-1a: #1f5f3f;       --kat-1a-soft: #e4f0e8;       --kat-1a-line: #9cc9ad;
  --kat-standard: #1b5876; --kat-standard-soft: #e1edf4; --kat-standard-line: #95bdd2;
  --kat-markt: #6a3d9a;    --kat-markt-soft: #efe8f7;    --kat-markt-line: #b9a1dc; /* violett seit 11.10.2026 */
  --on-kat: #ffffff;
  /* Zähltasten: Plus grün, Minus rot – in jeder Kategorie gleich */
  --plus: #1f5f3f; --plus-dunkel: #123a26; --on-plus: #ffffff;
  --minus: #b3261e; --minus-dunkel: #7d1613; --on-minus: #ffffff;
  /* Maße */
  --radius: 10px;
  --radius-sm: 8px;
  --tap: 44px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Dunkelmodus: folgt der Systemeinstellung, mit <html data-theme="dark|light"> erzwingbar.
   Nur am Bildschirm – gedruckt wird immer hell. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121714; --surface: #1a201c; --surface-2: #252c28; --surface-3: #1f2622; --head: #232b26;
    --text: #e6ebe8;         /* 13.7:1 auf surface */
    --text-muted: #a9b5ae;   /*  7.8:1 */
    --border: #7c8a82;       /*  4.6:1 auf surface */
    --divider: #313a35; --linie: #3b4640;
    --hover: rgba(255,255,255,.08);
    --brand: #1a4a33; --on-brand: #ffffff;
    --primary: #7fc79c; --primary-hover: #99d4b0; --on-primary: #0b2616;   /* 8.3:1 */
    --primary-soft: #1d3528; --primary-line: #4f8a68;
    --focus: #7fc79c;
    --danger: #f2a19b; --danger-hover: #f6bcb7; --on-danger: #1a0a09;
    --danger-soft: #3a1f1d; --danger-line: #9a5a55;
    --warning: #f2b45a; --warning-soft: #33290f; --warning-line: #a07a2c;
    --toast-bg: #e6ebe8; --toast-text: #121714;
    --shadow: none; --shadow-hoch: 0 -1px 0 var(--divider);
    --kat-1a: #7fc79c;       --kat-1a-soft: #1d3528;       --kat-1a-line: #4f8a68;
    --kat-standard: #86c5e3; --kat-standard-soft: #173041; --kat-standard-line: #4f7f99;
    --kat-markt: #c7a6ef;    --kat-markt-soft: #2b2140;    --kat-markt-line: #7c63a6;
    --on-kat: #0e1512;
    --plus: #7fc79c; --plus-dunkel: #4f8a68; --on-plus: #0b2616;
    --minus: #f2a19b; --minus-dunkel: #9a5a55; --on-minus: #1a0a09;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --bg: #121714; --surface: #1a201c; --surface-2: #252c28; --surface-3: #1f2622; --head: #232b26;
    --text: #e6ebe8; --text-muted: #a9b5ae; --border: #7c8a82;
    --divider: #313a35; --linie: #3b4640;
    --hover: rgba(255,255,255,.08);
    --brand: #1a4a33; --on-brand: #ffffff;
    --primary: #7fc79c; --primary-hover: #99d4b0; --on-primary: #0b2616;
    --primary-soft: #1d3528; --primary-line: #4f8a68;
    --focus: #7fc79c;
    --danger: #f2a19b; --danger-hover: #f6bcb7; --on-danger: #1a0a09;
    --danger-soft: #3a1f1d; --danger-line: #9a5a55;
    --warning: #f2b45a; --warning-soft: #33290f; --warning-line: #a07a2c;
    --toast-bg: #e6ebe8; --toast-text: #121714;
    --shadow: none; --shadow-hoch: 0 -1px 0 var(--divider);
    --kat-1a: #7fc79c;       --kat-1a-soft: #1d3528;       --kat-1a-line: #4f8a68;
    --kat-standard: #86c5e3; --kat-standard-soft: #173041; --kat-standard-line: #4f7f99;
    --kat-markt: #c7a6ef;    --kat-markt-soft: #2b2140;    --kat-markt-line: #7c63a6;
    --on-kat: #0e1512;
    --plus: #7fc79c; --plus-dunkel: #4f8a68; --on-plus: #0b2616;
    --minus: #f2a19b; --minus-dunkel: #9a5a55; --on-minus: #1a0a09;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* =====================================================================
   2. Grundlagen
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 1rem/1.55 var(--font);
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
/* das hidden-Attribut gewinnt immer, auch gegen display:flex */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: max(1rem, 16px); } /* verhindert Auto-Zoom auf dem iPhone */
a { color: var(--primary); text-underline-offset: .15em; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; text-wrap: balance; color: var(--text); }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 .6em; }
/* Silbentrennung nur für lange Wörter; Knöpfe und Reiter nie trennen */
h1, h2, h3, h4, p, li, td, .hinweis-bearbeitung, .stat-hint, .heute-info span {
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
button, .btn, .tab-btn, .seg-btn, .badge { -webkit-hyphens: none; hyphens: none; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:where(main, section, article, aside, .panel, .stat-card) { min-width: 0; }

/* =====================================================================
   3. Kopfzeile, Reiter, Inhalt
   ===================================================================== */
.app { min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 30; background: var(--brand); color: var(--on-brand);
  padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.topbar-inner {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.brand span { overflow: hidden; text-overflow: ellipsis; }
.brand img { border-radius: 7px; background: #fff2; flex: 0 0 auto; }
.brand-short { display: none; }
.user-box { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; min-width: 0; line-height: 1.3; text-align: right; }
.user-name { font-size: .9375rem; font-weight: 600; }
.user-role, .sync-status { font-size: .875rem; opacity: .9; }
.userbox { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar .btn-ghost { color: var(--on-brand); border-color: rgba(255,255,255,.75); background: transparent; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.topbar :focus-visible { outline-color: var(--on-brand); }
.btn-darstellung { gap: 6px; padding: 0 12px; }
.btn-darstellung svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Navigation wie Intern (Etappe 2): bis 900 px Leiste unten in Daumenreichweite,
   ab 901 px (iPad quer, PC) Seitenleiste links. Nur für die Verwaltung –
   Mitarbeiter haben nur die Erfassung und sehen keine Navigation. */
:root { --nav-h: 64px; --nav-w: clamp(220px, 14rem, 340px); }
.nav-item {
  position: relative; display: flex; align-items: center; border: 0; background: transparent; color: var(--text-muted);
  font: inherit; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nav-icon { display: inline-flex; flex: 0 0 auto; }
.nav-icon svg { width: 24px; height: 24px; }
.nav-label { min-width: 0; }
.nav-item[aria-current="page"] { color: var(--primary); font-weight: 650; }
.nav-item:hover { color: var(--text); }

.content {
  max-width: 1200px; margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(140px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.admin-sub { display: none; }
.admin-sub.active { display: block; }

.eyebrow { font-size: .875rem; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.title-row h1 { margin: 0; }
.date-cat-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cat-heading { color: var(--kat); }
.saved-pill { font-size: .875rem; font-weight: 600; color: var(--primary); background: var(--primary-soft); padding: 4px 12px; border-radius: 99px; }

/* =====================================================================
   4. Anmeldung (wie Intern)
   ===================================================================== */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 440px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--linie); padding: 28px 24px; }
.login-card .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-card .logo img { border-radius: 10px; flex: 0 0 auto; }
.login-card .logo strong { display: block; font-size: 1.15rem; line-height: 1.3; }
.login-card .logo .muted { display: block; font-size: .9375rem; }
.login-card .btn { width: 100%; margin-top: 8px; }
.code-input { letter-spacing: .5em; text-align: center; font-size: 1.5rem !important; font-variant-numeric: tabular-nums; }
.login-fuss { font-size: .875rem; margin: 18px 0 0; }
.msg { padding: 10px 12px; border-radius: var(--radius-sm); margin: 12px 0 0; font-weight: 600; }
.msg-fehler { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }
.msg-fehler::before { content: "⚠ "; }

/* =====================================================================
   5. Elemente
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); min-width: var(--tap); padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); line-height: 1.25;
  background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; text-align: center;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, filter .15s, background-color .15s;
}
.btn:hover { border-color: var(--text); background: var(--surface-3); }
.btn:active { transform: scale(.97); }
.btn-primary, .btn-primary-soft, .btn-gold { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover, .btn-primary-soft:hover, .btn-gold:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline, .btn-ghost-dark { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-ghost { background: transparent; }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-klein { min-height: var(--tap); padding: 0 14px; font-size: .9375rem; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

.field-row { display: flex; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; margin-bottom: 0; }
.field.grow { flex: 1 1 220px; }
.field label { font-weight: 600; font-size: .9375rem; color: var(--text); }
.field input, .field select, .add-row input, .loc-row input[type=text], #nasTokenValue {
  min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); width: 100%;
}
.field select:disabled, .field input:disabled { background: var(--surface-2); color: var(--text-muted); opacity: 1; }
.login-card .field { margin-bottom: 8px; }

.panel { background: var(--surface); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.panel h3 { margin-bottom: 4px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head > div:first-child { flex: 1 1 260px; min-width: 0; }
.danger-panel { border-color: var(--danger-line); background: var(--danger-soft); box-shadow: none; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .875rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.badge-green { background: var(--primary-soft); color: var(--primary); }
.badge-red { background: var(--danger-soft); color: var(--danger); }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; background: var(--toast-bg); color: var(--toast-text);
  padding: 8px 8px 8px 18px; border-radius: var(--radius); box-shadow: var(--shadow); z-index: 100;
  max-width: calc(100vw - 32px); font-weight: 600;
}
.toast button { flex: 0 0 auto; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* =====================================================================
   6. Erfassung
   ===================================================================== */
.hinweis-bearbeitung {
  background: var(--warning-soft); border: 1px solid var(--warning-line); border-left-width: 4px;
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; line-height: 1.45;
}
.hinweis-bearbeitung::before { content: "✎ "; font-weight: 700; color: var(--warning); }

/* Kategorie-Umschalter 1A / Standard / Markt (auch Admin-Unterreiter) */
.segmented { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--linie); border-radius: var(--radius); }
.seg-btn {
  flex: 1 1 0; min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font-weight: 650; cursor: pointer; touch-action: manipulation;
}
.seg-btn:hover { background: var(--hover); }
.seg-btn.active { background: var(--primary); color: var(--on-primary); }
/* Kategorien: jede Schaltfläche trägt immer ihre eigene Farbe als Rand */
#fKategorie .seg-btn[data-cat="1A"] { --k: var(--kat-1a); }
#fKategorie .seg-btn[data-cat="Standard"] { --k: var(--kat-standard); }
#fKategorie .seg-btn[data-cat="Markt"] { --k: var(--kat-markt); }
#fKategorie .seg-btn { box-shadow: inset 0 -3px 0 var(--k); }
#fKategorie .seg-btn.active { background: var(--k); color: var(--on-kat); box-shadow: none; }
#fKategorie .seg-btn.active::before { content: "✓ "; }
#fKategorie .seg-btn[hidden] { display: none; }
/* Kategorie-Freigabe je Standort (Admin → Standorte) */
.kat-freigabe { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kat-freigabe-titel { flex: 1 1 100%; color: var(--text-muted); font-size: .9375rem; }
.kat-chip {
  flex: 1 1 auto; max-width: 11rem; white-space: nowrap; min-height: var(--tap); padding: 0 12px; border-radius: 999px; font-weight: 700; cursor: pointer;
  background: var(--surface); color: var(--text-muted); border: 1px dashed var(--border);
}
.kat-chip.an { background: var(--kat-soft); color: var(--kat); border: 2px solid var(--kat); }

/* Kennzahlen */
.stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-card { background: var(--surface); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.stat-label { font-size: .875rem; font-weight: 600; color: var(--text-muted); }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 4px 0 2px; color: var(--kat, var(--text)); font-variant-numeric: tabular-nums; }
.stat-hint { font-size: .875rem; color: var(--text-muted); }

/* Größenzeilen */
.table-head { display: grid; padding: 8px 4px; font-size: .875rem; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--linie); }
.size-row, .size-item { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.4fr); align-items: center; gap: 10px; }
.size-item { display: grid; padding: 12px 4px; border-bottom: 1px solid var(--divider); }
.size-item:last-child { border-bottom: none; }
.size-name { font-size: 1.125rem; font-weight: 700; color: var(--kat, var(--text)); font-variant-numeric: tabular-nums; }
.size-name small { font-size: .875rem; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.vr-box { display: flex; gap: 16px; align-items: flex-end; }
.vr-col label { display: block; font-size: .875rem; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.vr-col input {
  width: 5.5rem; min-height: var(--tap); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--kat-soft, var(--surface)); color: var(--text); font-variant-numeric: tabular-nums;
}
.vr-col input:disabled { opacity: 1; color: var(--text); border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; width: 4ch; font-weight: 700; -webkit-text-fill-color: var(--text); }
.vr-rest { font-size: 1.125rem; font-weight: 700; color: var(--kat, var(--text)); font-variant-numeric: tabular-nums; min-height: var(--tap); display: flex; align-items: center; }

/* Zähler: Plus grün, Minus rot – gefüllt und verschieden hell, auch bei Rot-Grün-Schwäche unterscheidbar */
.counter { display: flex; align-items: center; gap: 10px; }
.counter .val { min-width: 2.2ch; text-align: center; font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.round-btn {
  width: var(--tap); height: var(--tap); flex: 0 0 auto; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s, transform .08s;
}
.round-btn.plus { background: var(--plus); color: var(--on-plus); border-color: var(--plus-dunkel); box-shadow: 0 2px 0 var(--plus-dunkel); }
.round-btn.minus { background: var(--minus); color: var(--on-minus); border-color: var(--minus-dunkel); box-shadow: 0 2px 0 var(--minus-dunkel); }
.round-btn:active { box-shadow: none; transform: translateY(2px); }
/* gesperrt, solange die andere Art (Verladung / Stand retour) eingegeben ist */
.round-btn:disabled { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); box-shadow: none; transform: none; cursor: not-allowed; }
.counter.gesperrt .val { color: var(--text-muted); }

/* Speichern-Leiste (erscheint, sobald etwas eingegeben ist) */
.float-bar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40;
  width: min(760px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  background: var(--surface); color: var(--text); border: 1px solid var(--linie); border-left: 6px solid var(--kat, var(--primary));
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px 16px;
}
.float-title { font-size: .875rem; font-weight: 700; color: var(--kat, var(--primary)); }
.float-sub { font-size: 1rem; font-variant-numeric: tabular-nums; }
.float-actions { display: flex; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.float-bar .btn-gold { background: var(--kat, var(--primary)); border-color: var(--kat, var(--primary)); color: var(--on-kat); }
.float-bar .btn-gold:hover { filter: brightness(1.1); }
/* Rückfrage-Dialog „Noch nicht gespeichert“ / „Eingabe wirklich verwerfen?“ */
.frage-dialog {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 20px; border: 1px solid var(--linie); border-top: 6px solid var(--warning); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.frage-dialog::backdrop { background: rgba(0,0,0,.5); }
.frage-dialog h3 { margin: 0 0 8px; color: var(--warning); }
.frage-dialog h3::before { content: "⚠ "; }
.frage-dialog p { margin: 0 0 18px; white-space: pre-line; }
.frage-aktionen { display: flex; flex-direction: column; gap: 10px; }
.frage-aktionen .btn { width: 100%; }
/* Erinnerung nach 1 Minute ohne Tippen */
.float-bar.erinnerung { background: var(--warning-soft); border-color: var(--warning-line); border-left-color: var(--warning); }
.float-erinnerung { font-weight: 700; color: var(--warning); }
.float-erinnerung::before { content: "⚠ "; }

/* Heute erfasst */
.heute-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.heute-row:last-child { border-bottom: none; }
.heute-row--aktiv { background: var(--warning-soft); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-sm); }
.heute-info { flex: 1 1 220px; min-width: 0; }
.heute-info strong { display: block; }
.heute-info span { font-size: .875rem; color: var(--text-muted); }
.heute-row .aktionen { flex: 0 0 auto; }
#heuteAnzahl { margin-left: 6px; vertical-align: middle; }
.aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
td .aktionen { flex-wrap: nowrap; }

/* =====================================================================
   7. Übersicht, Admin, Hilfe
   ===================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* bis Etappe 4 (Karten am Handy): Tabellen behalten ihre Breite und lassen sich seitlich wischen */
.table-wrap table { min-width: 40rem; }
.table-wrap td { white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th { text-align: left; font-size: .875rem; font-weight: 700; color: var(--text); background: var(--head); padding: 8px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--divider); font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--surface-3); }
/* Übersicht: Kategoriefarben je Zeile; die Zwischenzeile je Kategorie gibt es nur am Handy */
.k-1a { --kat: var(--kat-1a); --kat-soft: var(--kat-1a-soft); --kat-line: var(--kat-1a-line); }
.k-standard { --kat: var(--kat-standard); --kat-soft: var(--kat-standard-soft); --kat-line: var(--kat-standard-line); }
.k-markt { --kat: var(--kat-markt); --kat-soft: var(--kat-markt-soft); --kat-line: var(--kat-markt-line); }
.karten-tabelle .kat-zeile { display: none; }
.karten-tabelle .z-umbruch { display: none; } /* fester Zeilenumbruch der Protokoll-Karte am Tablet */
.karten-tabelle td.z-ort, .karten-tabelle td.z-ma { white-space: normal; hyphens: manual; }
.table-wrap table.karten-tabelle { min-width: 0; }
.empty-state { text-align: center; color: var(--text-muted); padding: 24px 16px; margin: 0; }

.subnav-wrap { position: relative; }
/* Admin-Unterreiter: brechen um, wenn der Platz nicht reicht (am Handy seitlich wischbar, siehe unten) */
#adminSubnav { flex-wrap: wrap; }
#adminSubnav .seg-btn { flex: 1 1 auto; }
.add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.add-row input { flex: 1 1 200px; width: auto; }

.loc-row, .backup-row {
  display: flex; align-items: center; gap: 10px 14px; padding: 12px 4px; border-bottom: 1px solid var(--divider); flex-wrap: wrap;
}
.loc-row:last-child, .backup-row:last-child { border-bottom: none; }
.loc-row input[type=text] { flex: 1 1 200px; width: auto; min-width: 0; }

.toggle { display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: .9375rem; }
/* Schalter „Aktiv": Schiene 40 × 22 px, Trefferfläche 48 × 44 px */
.switch { position: relative; width: 48px; height: var(--tap); background: none; border: none; flex-shrink: 0; padding: 0; cursor: pointer; }
.switch::before { content: ""; position: absolute; top: calc(50% - 11px); left: 4px; width: 40px; height: 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 22px; transition: .15s; }
.switch::after { content: ""; position: absolute; top: calc(50% - 8px); left: 8px; width: 16px; height: 16px; background: var(--border); border-radius: 50%; transition: .15s; }
.switch.on::before { background: var(--primary); border-color: var(--primary); }
.switch.on::after { left: 24px; background: var(--on-primary); }

.status-panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.status-panel .grow { flex: 1 1 240px; min-width: 0; }
.status-panel .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.backup-row { justify-content: space-between; }
.backup-info { min-width: 0; }
.backup-info strong { display: block; }
.backup-info span { font-size: .875rem; color: var(--text-muted); }
.backup-link { color: var(--primary); font-weight: 600; background: none; border: none; min-height: var(--tap); padding: 0 10px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }

.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 12px; margin-bottom: 16px; }
.help-card { background: var(--surface); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; gap: 14px; }
.help-num { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.help-card h4 { margin-bottom: 4px; }
.help-card p { color: var(--text-muted); margin: 0; }

.protokoll-item { padding: 10px 4px; border-bottom: 1px solid var(--divider); }
.protokoll-item:last-child { border-bottom: none; }
.protokoll-item .ts { color: var(--text-muted); font-size: .875rem; display: block; }

/* =====================================================================
   8. Kategoriefarben: die Erfassung und die Speichern-Leiste färben sich
   nach der gewählten Kategorie (Klassen cat-standard / cat-markt aus app.js).
   ===================================================================== */
#tab-erfassung, #floatBar { --kat: var(--kat-1a); --kat-soft: var(--kat-1a-soft); --kat-line: var(--kat-1a-line); }
#tab-erfassung.cat-standard, #floatBar.cat-standard { --kat: var(--kat-standard); --kat-soft: var(--kat-standard-soft); --kat-line: var(--kat-standard-line); }
#tab-erfassung.cat-markt, #floatBar.cat-markt { --kat: var(--kat-markt); --kat-soft: var(--kat-markt-soft); --kat-line: var(--kat-markt-line); }
#tab-erfassung .eyebrow { color: var(--kat); }
#tab-erfassung .panel h3 { color: var(--kat); }
#tab-erfassung .stat-card { border-top: 4px solid var(--kat); }
#saveVorschauBtn { background: var(--kat); border-color: var(--kat); color: var(--on-kat); }
#saveVorschauBtn:hover { filter: brightness(1.1); }

/* =====================================================================
   9. Bildschirmbreiten und Finger-Bedienung
   ===================================================================== */
/* Navigation: Handy und Tablet hoch – Leiste unten */
@media screen and (max-width: 900px) {
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex;
    background: var(--surface); border-top: 1px solid var(--divider); box-shadow: var(--shadow-hoch);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .nav-item {
    flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px;
    min-height: var(--nav-h); padding: 6px 0; font-size: .875rem; font-weight: 500; text-align: center;   /* ohne Seitenabstand: „Auslieferung“ passt auch bei 360 px / 4 Reitern (24.10.2026) */
  }
  .nav-item .nav-icon { padding: 2px 16px; border-radius: 999px; }
  .nav-item[aria-current="page"] .nav-icon { background: var(--primary-soft); }
  .nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Platz für die Leiste: Inhalt, Speichern-Leiste und Meldung rücken nach oben */
  .app.hat-nav .content { padding-bottom: calc(var(--nav-h) + 150px + env(safe-area-inset-bottom, 0px)); }
  .app.hat-nav .float-bar { bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom, 0px)); }
}
/* Handy quer (wenig Höhe): Kopfzeile scrollt weg, Leiste unten flacher (Symbol neben Text),
   damit zum Zählen genug Platz bleibt */
@media screen and (max-width: 900px) and (max-height: 500px) {
  :root { --nav-h: 48px; }
  .topbar { position: static; }
  .nav-item { flex-direction: row; gap: 8px; padding: 0 4px; }
  .nav-item .nav-icon { padding: 2px 10px; }
  #floatBar { flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 8px 12px; }
  #floatBar > div:first-child { flex: 1 1 auto; min-width: 0; }
  #floatBar .float-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  #floatBar .float-actions .btn { flex: 0 0 auto; }
}
/* iPad quer und PC – Seitenleiste links */
@media screen and (min-width: 901px) {
  .app.hat-nav { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .app.hat-nav > .topbar { grid-column: 1 / -1; grid-row: 1; }
  .app.hat-nav > .nav {
    grid-column: 1; grid-row: 2; position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); align-self: start;
    height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
    background: var(--surface); border-right: 1px solid var(--divider);
  }
  .app.hat-nav > .content { grid-column: 2; grid-row: 2; width: 100%; }
  .nav-item { gap: 12px; min-height: var(--tap); padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); font-weight: 600; }
  .nav-item:hover { background: var(--hover); color: var(--text); }
  .nav-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
  /* Speichern-Leiste mittig über dem Inhalt, nicht über der Seitenleiste */
  .app.hat-nav .float-bar { left: calc(var(--nav-w) + (100vw - var(--nav-w)) / 2); width: min(760px, calc(100vw - var(--nav-w) - 32px)); }
}
@media screen and (max-width: 900px) {
  .stat-cards, .stat-cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-box .sync-status, .user-box .user-role { display: none; }
}
@media screen and (max-width: 1279px) {
  /* Übersicht an Handy, Tablet und kleinem PC bis 1279 px (Etappe 4): Tabellenzeilen werden Karten, nichts mehr seitlich wischen */
  .table-wrap table.karten-tabelle { min-width: 0; }
  .karten-tabelle thead { display: none; }
  .karten-tabelle, .karten-tabelle tbody { display: block; }
  .karten-tabelle tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 2px; border-bottom: 1px solid var(--divider); }
  .karten-tabelle tr:last-child { border-bottom: none; }
  .karten-tabelle td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .karten-tabelle td[data-label] { font-weight: 700; }
  .karten-tabelle td[data-label]::before { content: attr(data-label) " "; font-size: .875rem; font-weight: 600; color: var(--text-muted); }
  /* Gesamt je Kategorie: Zwischenzeile in Kategoriefarbe, je Größe oben Größe | Rest, darunter 2 × 2 Werte */
  #categoryTable .kat-zeile { display: block; padding: 16px 2px 6px; border-bottom: 2px solid var(--kat-line); }
  #categoryTable .kat-zeile:first-child { padding-top: 4px; }
  #categoryTable .kat-zeile td { font-size: 1.0625rem; font-weight: 700; color: var(--kat); }
  #categoryTable .z-art { display: none; }
  #categoryTable .z-groesse { order: 1; flex: 1 1 calc(100% - 7.5rem); font-weight: 700; color: var(--kat); }
  #categoryTable .z-rest { order: 2; margin-left: auto; }
  #categoryTable td[data-label]:not(.z-rest) { order: 3; flex: 1 1 calc(50% - 12px); }
  /* Lieferprotokoll: Datum · Kategorie · Größe, Standort, Werte + Mitarbeiter, Ändern | Löschen */
  #logTable .z-datum { order: 1; font-weight: 700; }
  #logTable .z-art { order: 2; padding: 0 8px; border-radius: 999px; background: var(--kat-soft); color: var(--kat); font-weight: 700; font-size: .875rem; }
  #logTable .z-groesse { order: 3; font-weight: 700; }
  #logTable .z-ort { order: 4; flex: 1 1 100%; }
  #logTable td[data-label] { order: 5; }
  #logTable .z-ma { order: 6; margin-left: auto; color: var(--text-muted); font-size: .875rem; }
  #logTable .z-aktionen { order: 7; flex: 1 1 100%; }
  #logTable .z-aktionen .btn { flex: 1 1 0; }
  #logTable .z-aktionen:has(.aktionen:empty) { display: none; }
  .karten-tabelle tr:hover td { background: none; }
}
/* Tablet: Werte einer Größe in einer Reihe, Ändern | Löschen rechts statt über die ganze Breite */
@media screen and (min-width: 601px) and (max-width: 1279px) {
  #categoryTable td[data-label]:not(.z-rest) { flex-basis: calc(25% - 12px); }
  /* Zeile 1: Datum · Kategorie · Größe · Standort, Zeile 2: Werte · Mitarbeiter · Knöpfe rechts */
  #logTable tr { align-items: center; }
  #logTable .z-ort { flex: 1 1 auto; }
  #logTable .z-umbruch { display: block; order: 4; flex: 0 0 100%; height: 0; }
  #logTable .z-ma { margin-left: 0; }
  #logTable .z-aktionen { flex: 0 0 auto; margin-left: auto; }
}
@media screen and (max-width: 720px) {
  /* Erfassung am Handy (Etappe 3): je Größe eine kompakte Karte –
     oben Größe | Vorschau + Rest, darunter Menge und Retour nebeneinander */
  .table-head.size-row { display: none; }
  .size-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 2px 12px; }
  .size-name { flex: 1 1 auto; }
  .vr-box { flex: 0 1 auto; max-width: 100%; min-width: 0; flex-wrap: wrap; margin-left: auto; align-items: center; gap: 4px 12px; }
  .vr-col { display: flex; align-items: center; gap: 6px; }
  .vr-col label { margin: 0; }
  .vr-col input { width: 4.5rem; padding: 4px 8px; }
  .vr-rest { min-height: 0; min-width: 3.5ch; justify-content: flex-end; }
  /* Beschriftung (Verladung / Stand retour) zentriert über − Zahl + */
  .counter { flex: 1 1 calc(50% - 12px); min-width: 0; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
  .counter::before {
    content: attr(data-label); flex: 0 0 100%; text-align: center; font-size: .875rem; font-weight: 700;
    color: var(--text-muted);
  }
  .counter .val { min-width: 2.5ch; }
  /* Kennzahlen flacher */
  .stat-cards { gap: 8px; }
  .stat-card { padding: 8px 10px; }
  .stat-value { font-size: 1.375rem; margin: 2px 0 0; }
  /* Speichern-Leiste: Summe in einer Zeile, darunter Abbrechen | Speichern nebeneinander */
  .float-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .float-bar > div { min-width: 0; }
  .float-actions { flex-wrap: wrap; }
  .float-actions .btn { padding: 0 12px; }
  .float-actions #cancelEntryBtn { flex: 0 0 auto; }
  .float-actions #saveDeliveryBtn { flex: 1 1 0; }
  /* Admin-Unterreiter: 5 Punkte passen nicht nebeneinander – seitlich wischbar */
  #adminSubnav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  #adminSubnav::-webkit-scrollbar { display: none; }
  #adminSubnav .seg-btn { flex: 0 0 auto; white-space: nowrap; }
  .subnav-wrap.scrollbar::after {
    content: "\203A"; position: absolute; top: 1px; right: 1px; bottom: 17px; width: 44px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface-2) 70%);
    display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
    font-size: 1.6rem; font-weight: 700; color: var(--primary); border-radius: 0 var(--radius) var(--radius) 0;
    transition: opacity .2s;
  }
  .subnav-wrap.scrollbar.am-ende::after { opacity: 0; }
}
@media screen and (max-width: 600px) {
  .brand-long { display: none; }
  .brand-short { display: inline; }
  .user-box { display: none; }
  .userbox { margin-left: auto; }
  .topbar .verwaltung-link { display: none; } /* am Handy: Link steht im Admin-Bereich (Zugänge) */
  .btn-darstellung .darstellung-text { display: none; }
  .content { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .panel { padding: 14px 12px; }
  .heute-row .aktionen { width: 100%; }
  .loc-row input[type=text] { flex-basis: 100%; }
  .heute-row .aktionen .btn { flex: 1 1 0; }
  .status-panel > .dot { display: none; } /* Status steht im Abzeichen „Aktiv“, der Text bekommt die volle Breite */
  .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 24px); max-width: none; }
}
/* ganz schmale Handys: Menge und Retour passen nicht nebeneinander – untereinander, Beschriftung links */
@media screen and (max-width: 359px) {
  .counter { flex-basis: 100%; flex-wrap: nowrap; justify-content: flex-start; }
  .counter::before { flex: 0 0 6.5rem; text-align: left; }
}
@media screen and (max-width: 380px) {
  .stat-value { font-size: 1.5rem; }
  .userbox { gap: 4px; }
  .userbox .btn { padding: 0 10px; }
}
@media (pointer: coarse) {
  :root { --tap: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .topbar, .nav, .float-bar, .toast, .btn, .round-btn { display: none !important; }
  .app.hat-nav { display: block; }
  body { background: #fff; color: #000; }
  .panel, .stat-card { box-shadow: none; }
}
/* Equipment-Übernahme (Admin → Standorte, seit 12.10.2026) */
.eq-import-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 10px 16px; margin: 8px 0 12px; }
.eq-import-zeile select { width: 100%; }
#eqImportPanel .panel-foot { display: flex; justify-content: flex-end; }

/* =====================================================================
   Equipment / Inventurblatt (seit 12.10.2026)
   ===================================================================== */
.field .field-label { font-weight: 600; font-size: .9375rem; color: var(--text); }
.eq-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 12px; margin: 12px 0 6px; }
.eq-felder .field { min-width: 0; }
.eq-felder select, .eq-felder input { width: 100%; }
.eq-anlass { margin-bottom: 0; flex-wrap: wrap; }
.eq-anlass .seg-btn { flex: 1 1 auto; min-width: 0; }
.eq-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: 8px; margin: 10px 0; }
.eq-zahl { background: var(--surface); color: var(--text); border: 1px solid var(--linie); border-top: 4px solid var(--primary-line); border-radius: var(--radius); padding: 8px 12px; text-align: left; cursor: pointer; min-height: var(--tap); }
.eq-zahl b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.eq-zahl span { color: var(--text-muted); font-size: .9375rem; }
.eq-zahl.ok { border-top-color: var(--primary); } .eq-zahl.fehlt { border-top-color: var(--warning-line); }
.eq-zahl.mehr { border-top-color: var(--kat-standard-line); } .eq-zahl.offen { border-top-color: var(--border); }
.eq-zahl[aria-pressed="true"] { outline: 3px solid var(--focus); outline-offset: 1px; }
.eq-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.eq-werkzeuge input[type=search] { flex: 1 1 14rem; min-width: 0; max-width: 22rem; min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; background: var(--surface); color: var(--text); }
.eq-liste { display: flex; flex-direction: column; gap: 12px; }
.eq-gruppe { background: var(--surface); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.eq-gruppe-kopf { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); }
.eq-gruppe-kopf h3 { margin: 0; font-size: 1rem; }
.eq-gruppe-kopf span { color: var(--text-muted); font-size: .9375rem; }
.eq-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--linie); }
.eq-zeile.st-ok { background: var(--primary-soft); }
.eq-zeile.st-fehlt { box-shadow: inset 4px 0 0 var(--warning-line); }
.eq-zeile.st-mehr { box-shadow: inset 4px 0 0 var(--kat-standard-line); }
.eq-name b { display: block; }
.eq-name small { display: block; color: var(--text-muted); font-size: .875rem; }
.eq-vorschau { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .875rem; color: var(--text-muted); }
.eq-vorschau input { width: 5rem; min-height: var(--tap); text-align: center; font-weight: 700; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.eq-counter .val { min-width: 2.6ch; }
.eq-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.eq-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 10px; font-size: .875rem; font-weight: 700; border: 1px solid; }
.eq-chip.ok { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.eq-chip.fehlt { color: var(--warning); border-color: var(--warning-line); background: var(--warning-soft); }
.eq-chip.mehr { color: var(--kat-standard); border-color: var(--kat-standard-line); background: var(--kat-standard-soft); }
.eq-chip.offen { color: var(--text-muted); border-color: var(--border); background: var(--surface-2); }
.eq-verlauf { margin-top: 16px; }
.eq-verlauf ul { margin: 0; padding: 0; list-style: none; }
.eq-verlauf li { padding: 8px 0; border-top: 1px solid var(--divider); }
.eq-bar { --kat: var(--primary); }
.eq-dialog { width: min(520px, calc(100vw - 24px)); border-top-color: var(--primary); }
.eq-dialog h3 { color: var(--primary); }
.eq-dialog h3::before { content: none; }
.eq-dialog input[type=search] { width: 100%; min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; margin: 8px 0; background: var(--surface); color: var(--text); }
.eq-wahl { display: flex; flex-direction: column; gap: 6px; max-height: 50dvh; overflow: auto; margin-bottom: 8px; }
.eq-wahl button { flex: 0 0 auto; text-align: left; min-height: var(--tap); padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.eq-wahl small { color: var(--text-muted); font-size: .875rem; }
@media screen and (min-width: 601px) {
  .eq-name { grid-column: 1; grid-row: 1; }
  .eq-status { grid-column: 1; grid-row: 2; }
  .eq-paar { grid-column: 2; grid-row: 1 / span 2; }
  .eq-counter { grid-column: 3; grid-row: 1 / span 2; }
}
@media screen and (max-width: 600px) {
  .eq-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .eq-paar { grid-column: 1; grid-row: 2; }
  .eq-counter { grid-column: 2; grid-row: 1 / span 2; }
}

/* Equipment Etappe 3: Fenster „Bausteine & Ladestopps“ */
.eq-dialog.eq-kat { width: min(900px, calc(100vw - 24px)); }
.eq-kat h3:focus { outline: none; }
.eq-kat h4 { margin: 18px 0 6px; font-size: 1rem; }
.eq-kat p.muted { margin-bottom: 8px; }
.eq-kat input[type=text], .eq-kat select { min-height: var(--tap); min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; background: var(--surface); color: var(--text); font: inherit; }
.eq-kat-stopp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linie); }
.eq-kat-neu { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.eq-kat-neu input[type=text] { flex: 2 1 14rem; width: auto; }
.eq-kat-neu select { flex: 1 1 12rem; width: auto; }
.eq-kat-titel { margin: 16px 0 4px; font-size: .9375rem; color: var(--primary); }
.eq-kat-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem) 6.5rem auto auto; gap: 6px 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linie); }
.eq-kat-zeile.aus .eq-kat-name { color: var(--text-muted); text-decoration: line-through; }
.eq-kat-aus { display: none; }
.eq-pfeile { display: flex; gap: 4px; }
.btn.eq-pfeil { width: var(--tap); padding: 0; }
.btn.eq-pfeil:disabled { opacity: .35; cursor: default; }
.btn.eq-gefahr, .btn-outline.eq-gefahr { color: var(--danger); border-color: var(--danger); }
.eq-kat.laeuft #eqKatStopps, .eq-kat.laeuft #eqKatBausteine { opacity: .6; }
.eq-kat-fertig { position: sticky; bottom: -20px; background: var(--surface); padding: 12px 0 0; margin-top: 12px; }
@media screen and (max-width: 700px) {
  .eq-kat-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "stopp einheit" "pfeile knopf"; padding: 10px 0; }
  .eq-kat-name { grid-area: name; } .eq-kat-stoppwahl { grid-area: stopp; } .eq-kat-einheit { grid-area: einheit; width: 6.5rem !important; }
  .eq-kat-zeile .eq-pfeile { grid-area: pfeile; } .eq-kat-zeile > .btn { grid-area: knopf; justify-self: end; }
  .eq-kat-stopp { grid-template-columns: auto minmax(0, 1fr); }
  .eq-kat-stopp .eq-pfeile { grid-column: 2; }
  .eq-kat-stopp > .btn { grid-column: 2; justify-self: start; }
}
/* dasselbe, wenn das Fenster bei großer Schrift zu schmal ist (Größe in rem wächst mit der Schrift mit) */
.eq-kat { container-type: inline-size; }
@container (max-width: 46rem) {
  .eq-kat-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "stopp einheit" "pfeile knopf"; padding: 10px 0; }
  .eq-kat-name { grid-area: name; } .eq-kat-stoppwahl { grid-area: stopp; } .eq-kat-einheit { grid-area: einheit; width: 6.5rem !important; }
  .eq-kat-zeile .eq-pfeile { grid-area: pfeile; } .eq-kat-zeile > .btn { grid-area: knopf; justify-self: end; }
  .eq-kat-stopp { grid-template-columns: auto minmax(0, 1fr); }
  .eq-kat-stopp .eq-pfeile { grid-column: 2; }
  .eq-kat-stopp > .btn { grid-column: 2; justify-self: start; }
}


/* Equipment Etappe 4: Übersicht (nur Admin), Druck */
.eq-ansicht { max-width: 26rem; margin: 6px 0 12px; flex-wrap: wrap; }
.eq-ansicht .seg-btn, .eq-ue-art .seg-btn { flex: 1 1 auto; min-width: 0; }
.eq-ue-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.eq-ue-art { max-width: 24rem; margin: 0; flex: 1 1 16rem; flex-wrap: wrap; }
.eq-ue-kopf .eq-werkzeuge { margin: 0; }
.eq-ue-wrap { overflow: auto; max-height: 70dvh; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--surface); }
.eq-ue-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.eq-ue { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.eq-ue th, .eq-ue td { padding: 8px 10px; border-bottom: 1px solid var(--linie); text-align: center; white-space: nowrap; }
.eq-ue thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: .9375rem; vertical-align: bottom; white-space: normal; min-width: 6.5rem; }
.eq-ue thead th small { display: block; font-weight: 400; color: var(--text-muted); font-size: .875rem; }
.eq-ue .eq-ue-mat { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 600; white-space: normal; min-width: min(14rem, 45vw); max-width: 20rem; }
.eq-ue thead .eq-ue-mat { z-index: 3; background: var(--surface-2); }
.eq-ue .eq-ue-mat small { color: var(--text-muted); font-weight: 400; font-size: .875rem; }
.eq-ue .eq-ue-summe { font-weight: 700; background: var(--primary-soft); }
.eq-ue thead .eq-ue-summe { background: var(--primary-soft); }
.eq-ue tr.eq-ue-gruppe th { position: sticky; left: 0; text-align: left; background: var(--surface-2); color: var(--primary); font-size: .9375rem; }
.eq-ue tr.aus th, .eq-ue tr.aus td { color: var(--text-muted); }
.eq-ladeliste { margin-top: 16px; }
.eq-ladeliste select { flex: 1 1 14rem; width: auto; min-width: 0; max-width: 100%; min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; background: var(--surface); color: var(--text); font: inherit; }
.eq-druck { display: none; }
@media print {
  body.eq-drucken > :not(#eqDruck) { display: none !important; }
  body.eq-drucken #eqDruck { display: block !important; }
  body.eq-drucken { margin: 0; padding: 0; min-width: 0; }
  body.eq-drucken #eqDruck { width: auto; max-width: 100%; }
  .eq-druck { font: 9.5pt/1.2 system-ui, sans-serif; color: #000; background: #fff; }
  .eq-druck h1 { font-size: 15pt; margin: 0 0 2pt; }
  .eq-druck h2 { font-size: 11.5pt; margin: 10pt 0 3pt; break-after: avoid; }
  .eq-druck-sub { margin: 0 0 6pt; font-size: 9.5pt; color: #333; }
  .eq-druck-seite { break-after: page; }
  .eq-druck-seite:last-child { break-after: auto; }
  .eq-druck-tab { width: 100%; border-collapse: collapse; }
  .eq-druck-tab th, .eq-druck-tab td { border: .8pt solid #000; padding: 3pt 5pt; text-align: left; vertical-align: top; }
  .eq-druck-tab thead th { background: #e6e6e6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .eq-druck-tab tr { break-inside: avoid; }
  .eq-druck-tab .k { width: 16mm; text-align: center; }
  .eq-druck-tab .n { width: 17mm; text-align: right; }
  .eq-druck-liste thead th { font-size: 8.5pt; padding: 2pt 3pt; }
  .eq-druck-liste { table-layout: fixed; }
  .eq-druck-liste col.m { width: 68mm; }
  .eq-druck-liste td { padding: 1.5pt 4pt; }
  .eq-druck-liste tr.eq-druck-stopp th { background: #f0f0f0; font-size: 10pt; padding: 2pt 4pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-after: avoid; }
  .eq-druck-liste thead { display: table-header-group; }
  .kaestchen { display: inline-block; width: 10pt; height: 10pt; vertical-align: middle; border: 1.2pt solid #000; }
  .eq-druck-matrix { font-size: 8.5pt; }
  .eq-druck-matrix th, .eq-druck-matrix td { text-align: center; padding: 2pt 3pt; }
  .eq-druck-matrix .eq-ue-mat { text-align: left; }
  .eq-druck-matrix thead { display: table-header-group; }
  .eq-druck-matrix thead th small { display: block; font-weight: 400; }
  .eq-druck-matrix tr.eq-ue-gruppe th { text-align: left; background: #f0f0f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .eq-druck-matrix .eq-ue-summe { font-weight: 700; }
  .eq-druck-fuss { margin-top: 10pt; }
}

/* Equipment: Kästchen „Verladen“ neben der Vorschau, Fenster „Bausteine am Standort“ (seit 12.10.2026) */
.eq-paar { display: flex; gap: 10px; align-items: flex-end; }
.eq-verladen { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .875rem; color: var(--text-muted); }
.eq-haken { width: var(--tap); height: var(--tap); border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--on-primary); font-size: 1.375rem; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; }
.eq-haken.an { background: var(--primary); border-color: var(--primary); }
.eq-haken:disabled { opacity: .4; cursor: default; }
.eq-wahl h4 { margin: 8px 0 2px; font-size: .9375rem; }
.eq-wahl-da { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 0 4px 12px; border: 1px solid var(--linie); border-radius: var(--radius-sm); flex: 0 0 auto; }
.eq-wahl-da span { min-width: 0; }
.eq-wahl-da .btn { flex: 0 0 auto; }
#eqDialogTitel:focus { outline: none; }

/* Equipment: grüner Balken bei vollständig, gesperrte Zähler, Ausgangsstand (seit 12.10.2026) */
.eq-zeile.st-ok { box-shadow: inset 6px 0 0 var(--primary); }
.eq-counter .round-btn.gesperrt { opacity: .35; filter: grayscale(.6); cursor: not-allowed; }
.eq-stand { margin: 0 0 6px; font-weight: 600; color: var(--primary); }


/* Gesamtprüfung: sehr schmal bei großer Schrift (z. B. 320 px + 200 %) – alles untereinander (Größe in rem wächst mit) */
.eq-gruppe { container-type: inline-size; }
@container (max-width: 13rem) {
  .eq-zeile { grid-template-columns: minmax(0, 1fr); }
  .eq-zeile .eq-name { grid-column: 1; grid-row: 1; }
  .eq-zeile .eq-paar { grid-column: 1; grid-row: 2; }
  .eq-zeile .eq-counter { grid-column: 1; grid-row: 3; justify-self: start; }
  .eq-zeile .eq-status { grid-column: 1; grid-row: 4; }
}
@container (max-width: 18rem) {
  .eq-kat-zeile { grid-template-areas: "name name" "stopp stopp" "einheit einheit" "pfeile knopf"; }
}
/* Equipment-Zähler haben keine Beschriftung: die leere Beschriftungsspalte der Auslieferungs-Zähler (Handy) abschalten */
.counter.eq-counter { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; }
.counter.eq-counter::before { content: none; display: none; }

/* Farbe je Baumgröße (seit 12.10.2026): Schild wie ein Etikett – kräftige Farbe, gut lesbar in hell und dunkel */
.gr-schild { display: inline-flex; align-items: baseline; gap: 2px; padding: 1px 10px; border-radius: 6px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; background: var(--gr-bg); color: var(--gr-fg); border: 1px solid rgba(0,0,0,.28); font-variant-numeric: tabular-nums; }
.gr-schild small, .size-name .gr-schild small { color: inherit; opacity: .9; font-weight: 600; margin-left: 3px; font-size: .875rem; }
.gr-ohne small, .size-name .gr-ohne small { font-size: .875rem; margin-left: 3px; }
.gr-ohne { white-space: nowrap; }
.gr-orange { --gr-bg: #F7941D; --gr-fg: #1a1a1a; }
.gr-rosa   { --gr-bg: #F4A6C8; --gr-fg: #1a1a1a; }
.gr-gruen  { --gr-bg: #5DBB46; --gr-fg: #0f1a0f; }
.gr-gelb   { --gr-bg: #FFE14D; --gr-fg: #1a1a1a; }
.gr-rot    { --gr-bg: #D7262E; --gr-fg: #ffffff; }
.gr-blau   { --gr-bg: #2563C9; --gr-fg: #ffffff; }
/* Standard: Farbe/weiß schräg gestreift; dunkle Schrift mit weißem Rand, damit sie auf beiden Streifen lesbar bleibt */
.gr-schild.gr-streifen { background: repeating-linear-gradient(135deg, var(--gr-bg) 0 5px, #ffffff 5px 12px); color: #111111;
  border-color: var(--gr-bg); text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
@media print { .gr-schild { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* =====================================================================
   Bestellung (seit 19.10.2026): Maske wie die Auslieferung, Equipment wie das Inventurblatt
   ===================================================================== */
/* Zahl offener Bestellungen am Navigationssymbol (Admin/Manager) */
.nav-icon { position: relative; }
.nav-zahl { position: absolute; top: -6px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--danger); color: var(--on-danger); font-size: .75rem; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
@media screen and (max-width: 900px) { .nav-zahl { top: -4px; right: 6px; } }
/* Meldeleiste oben: neue Bestellungen warten auf Freigabe */
.bst-meldung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 10px 14px;
  background: var(--warning-soft); border: 1px solid var(--warning-line); border-left: 6px solid var(--warning); border-radius: var(--radius); }
.bst-meldung-text { flex: 1 1 16rem; min-width: 0; font-weight: 650; }
.bst-meldung-text::before { content: "🔔 "; }
/* Kopf: Standort, Wunschtermin, Notiz */
.bst-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) minmax(0, 2fr); gap: 12px 16px; margin: 12px 0 16px; }
.bst-kopf .field { min-width: 0; }
@media screen and (max-width: 720px) { .bst-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bst-kopf .field.grow { grid-column: 1 / -1; } }
@media screen and (max-width: 380px) { .bst-kopf { grid-template-columns: minmax(0, 1fr); } }
.bst-art { max-width: 30rem; }
.bst-art-zahl { font-variant-numeric: tabular-nums; }
/* Kategorien wie auf der Seite Auslieferung */
#bstKat .seg-btn[data-cat="1A"], #lgsKat .seg-btn[data-cat="1A"] { --k: var(--kat-1a); }
#bstKat .seg-btn[data-cat="Standard"], #lgsKat .seg-btn[data-cat="Standard"] { --k: var(--kat-standard); }
#bstKat .seg-btn[data-cat="Markt"], #lgsKat .seg-btn[data-cat="Markt"] { --k: var(--kat-markt); }
#bstKat .seg-btn, #lgsKat .seg-btn { box-shadow: inset 0 -3px 0 var(--k); }
#bstKat .seg-btn.active, #lgsKat .seg-btn.active { background: var(--k); color: var(--on-kat); box-shadow: none; }
#bstKat .seg-btn[hidden] { display: none; }
#tab-bestellung, #tab-lagerstand { --kat: var(--kat-1a); --kat-soft: var(--kat-1a-soft); --kat-line: var(--kat-1a-line); }
#tab-bestellung.cat-standard, #tab-lagerstand.cat-standard { --kat: var(--kat-standard); --kat-soft: var(--kat-standard-soft); --kat-line: var(--kat-standard-line); }
#tab-bestellung.cat-markt, #tab-lagerstand.cat-markt { --kat: var(--kat-markt); --kat-soft: var(--kat-markt-soft); --kat-line: var(--kat-markt-line); }
/* Größenzeile: Größe | Vorschau / Rest / offen bestellt | − Bestellung + */
.bst-row, .bst-item { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 1.4fr); }
.bst-werte .vr-rest { min-width: 3ch; }
.bst-item.bst-hat { background: var(--kat-soft); }
.bst-warnung { grid-column: 1 / -1; flex: 1 1 100%; font-size: .875rem; font-weight: 650; color: var(--warning); }
.bst-warnung::before { content: "⚠ "; }
.bst-item.bst-zuviel { box-shadow: inset 4px 0 0 var(--warning-line); }
@media screen and (max-width: 720px) {
  .bst-item .counter { flex: 1 1 100%; }
  .bst-item .bst-werte { margin-left: auto; }
}
/* Equipment-Zeile: Name | Vorschau Ist Rest | − Bestellung + */
.bst-eq-zeile { grid-template-columns: minmax(0, 1fr) auto auto; }
.bst-eq-zeile.bst-hat { background: var(--primary-soft); }
.bst-eq-werte { display: flex; gap: 12px; }
.bst-eq-werte span { display: flex; flex-direction: column; align-items: center; min-width: 3.2rem; }
.bst-eq-werte small { color: var(--text-muted); font-size: .875rem; }
.bst-eq-werte b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
@media screen and (max-width: 600px) {
  .bst-eq-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .bst-eq-zeile .eq-name { grid-column: 1 / -1; }
  .bst-eq-zeile .bst-eq-werte { grid-column: 1; grid-row: 2; }
  .bst-eq-zeile .eq-counter { grid-column: 2; grid-row: 2; }
}
@media screen and (min-width: 601px) {
  .bst-eq-zeile .eq-name { grid-column: 1; grid-row: 1; }
  .bst-eq-zeile .bst-eq-werte { grid-column: 2; grid-row: 1; }
  .bst-eq-zeile .eq-counter { grid-column: 3; grid-row: 1; }
}
.bst-bar { --kat: var(--primary); }
/* Liste der Bestellungen */
.bst-liste-panel { margin-top: 20px; }
.bst-filter { max-width: 34rem; flex-wrap: wrap; }
.bst-filter .seg-btn { flex: 1 1 auto; min-width: 0; }
/* Bestellungs-Karten wie die Lagerstand-Karten (24.10.2026): eine Spalte, Breite begrenzt */
#bstListe { display: flex; flex-direction: column; gap: 16px; max-width: 56rem; }
#bstListe > p { grid-column: 1 / -1; }
.bst-karte { border: 1px solid var(--linie); border-left: 6px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); min-width: 0; }
.bst-karte.st-offen { border-left-color: var(--warning); }
.bst-karte.st-freigegeben { border-left-color: var(--primary); }
.bst-karte.st-geliefert { border-left-color: var(--primary-line); }
.bst-karte.st-abgelehnt { border-left-color: var(--danger); }
.bst-status { display: inline-flex; border-radius: 999px; padding: 1px 10px; font-size: .875rem; font-weight: 700; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2); }
.bst-status.st-offen { color: var(--warning); border-color: var(--warning-line); background: var(--warning-soft); }
.bst-status.st-freigegeben, .bst-status.st-geliefert { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.bst-status.st-abgelehnt { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.bst-kat { font-size: .875rem; color: var(--text-muted); }
.bst-verl { color: var(--primary); font-weight: 700; font-size: .875rem; }
.bst-grund-text { margin: 6px 0 0; }
.bst-grund-text { font-weight: 650; }
.bst-aktionen { margin-top: 10px; }
@media screen and (max-width: 600px) { .bst-aktionen .btn { flex: 1 1 calc(50% - 6px); } }
.bst-karte.lgs-karte { padding-bottom: 12px; }
.bst-kacheln { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); max-width: 40rem; }
.bst-kacheln .lgs-kachel-gesamt { grid-column: auto; }
.bst-pos .lgs-aend-knopf::after { content: none !important; }
.bst-pos:not([open]) .lgs-aend-knopf::before { content: "Positionen anzeigen ▾"; }
.bst-pos[open] .lgs-aend-knopf::before { content: "Ausblenden ▴"; }
.bst-pos-tab .zahl small { color: var(--text-muted); font-size: .8125rem; margin-left: 3px; }
.bst-anders { color: var(--warning); }
@media screen and (max-width: 600px) { .bst-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bst-kacheln .lgs-kachel:nth-child(3) { grid-column: 1 / -1; flex-direction: row; gap: 10px; } }
/* Prüf-Fenster */
.bst-dialog { width: min(640px, calc(100vw - 24px)); }
.bst-pruef-liste { display: flex; flex-direction: column; margin: 8px 0 12px; }
.bst-pruef-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.bst-pruef-zeile > div { min-width: 0; flex: 1 1 12rem; }
.bst-pruef-zeile > div > small { display: block; color: var(--text-muted); font-size: .875rem; }
.bst-pruef-menge { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-muted); }
.bst-pruef-menge input { width: 5.5rem; min-height: var(--tap); text-align: center; font-weight: 700; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.bst-grund { margin-bottom: 14px; }
.bst-grund input { width: 100%; }
#bstPruefTitel:focus, #bstEqTitel:focus { outline: none; }
/* Seite Auslieferung: freigegebene Bestellung übernehmen */
.bst-uebernahme { border-left: 6px solid var(--primary); }
.bst-uebernahme h3 { color: var(--primary) !important; }
.bst-ueb-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--divider); }
.bst-ueb-zeile > div { min-width: 0; flex: 1 1 14rem; }
.bst-ueb-zeile span { display: block; color: var(--text-muted); font-size: .9375rem; }
@media screen and (max-width: 600px) { .bst-ueb-zeile .btn { flex: 1 1 100%; } }
@media print { .bst-meldung, .bst-bar { display: none !important; } }

/* ================= Bestellung Runde 2 (19.10.2026) ================= */
/* Auslieferung mit übernommener Bestellung: Spalte „Bestellung“, + bei 0 gesperrt */
.vr-bestellung .vr-rest { color: var(--primary); font-weight: 800; }
.size-item.bst-erreicht .vr-bestellung .vr-rest { color: var(--text-muted); }
.round-btn.bst-gesperrt { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); box-shadow: none; transform: none; cursor: not-allowed; }
.bst-erreicht-text { grid-column: 1 / -1; flex: 1 1 100%; font-size: .875rem; font-weight: 650; color: var(--warning); text-align: right; }
.bst-erreicht-text::before { content: "✓ "; }
/* Prüffenster: Warnung, wenn mehr als der Rest freigegeben wird */
.bst-pruef-zeile.bst-zuviel { box-shadow: inset 4px 0 0 var(--warning-line); }
.bst-pruef-zeile > div > small.bst-pruef-warnung { color: var(--warning); font-weight: 650; }
.bst-pruef-zeile > div > small.bst-pruef-warnung[hidden] { display: none; }
.bst-pruef-warnung::before { content: "⚠ "; }

/* 23.10.2026: Verladen-Haken nur bei Menge = Vorschau, Standort-Hinweis, WhatsApp nach der Bestellung */
.eq-haken.gesperrt { opacity: .4; cursor: not-allowed; border-style: dashed; }
select.standort-hinweis { outline: 3px solid var(--danger, #b42318); outline-offset: 2px; }
.bst-wa-text { white-space: pre-wrap; background: var(--surface-3, #f4f4f4); border: 1px solid var(--linie, #ddd); border-radius: 8px; padding: 10px 12px; font-size: .9375rem; max-height: 40vh; overflow: auto; }
.bst-wa-knoepfe { flex-direction: column; align-items: stretch; }
.bst-wa-knoepfe .btn { min-height: 44px; }

/* ---------- Prüfung 24.10.2026 ---------- */
/* „Heute erfasst“: Größen-Farbschild behält seine Schrift (vorher grau über .heute-info span → auf Rot kaum lesbar) */
.heute-info .gr-schild { color: var(--gr-fg); font-size: inherit; }
.heute-info .gr-schild.gr-streifen { color: #111111; }
/* „Abmelden“ im Adminbereich: Tippfläche mind. 44 px (vorher 77 × 25) */
.logout-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; }

/* Keine Freigabe (Hackerl in der Website-Verwaltung, 24.10.2026) */
.frg-hinweis{max-width:40rem;margin:2rem auto;text-align:center}
.frg-hinweis p{font-size:1.05rem}
.loc-name{flex:1 1 auto}

/* ===================== Lagerstand (seit 24.10.2026) ===================== */
.lgs-ansicht { max-width: 40rem; margin: 4px 0 14px; flex-wrap: wrap; }
.lgs-ansicht .seg-btn { flex: 1 1 auto; min-width: 0; }
.lgs-info { margin: 0 0 4px; }
/* Mengenfeld zwischen − und +: groß, 3-stellig mit führenden Nullen, Ziffern-Tastatur */
.lgs-zahl {
  width: 5.2rem; min-height: var(--tap); flex: 0 0 auto; padding: 0 6px; text-align: center;
  font-size: 1.375rem; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.lgs-zahl:focus { outline: 3px solid var(--kat, var(--primary)); outline-offset: 1px; border-color: var(--kat, var(--primary)); }
.bst-hat .lgs-zahl { border-color: var(--kat-line, var(--primary-line)); }
.lgs-eq-zeile.bst-hat { background: var(--primary-soft); }
.lgs-summe-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 4px 2px; margin-top: 4px; border-top: 2px solid var(--linie); font-weight: 700; }
.lgs-summe-zeile b { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--kat, var(--text)); }
#lgsEqSumme { margin-top: 12px; padding-top: 4px; }
#lgsEqSumme .lgs-summe-zeile { border-top: 0; }
.lgs-summen { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0; }
.lgs-summen span { display: flex; flex-direction: column; min-width: 4.5rem; }
.lgs-summen small { color: var(--text-muted); font-size: .875rem; font-weight: 600; }
.lgs-summen b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.lgs-summe-gesamt b { color: var(--primary); }
.lgs-gesamt h3 { margin-bottom: 2px; }
.lgs-aktionen { margin-bottom: 16px; }
/* Gesamtliste */
.lgs-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 8px; }
.lgs-filter .field { min-width: 0; }
@media screen and (max-width: 720px) { .lgs-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Inventur-Karten (Neugestaltung 24.10.2026): eine Spalte, neueste zuerst, jede Zahl beschriftet */
#lgsListe { display: flex; flex-direction: column; gap: 16px; max-width: 56rem; }
.lgs-karte { background: var(--surface); border: 1px solid var(--linie); border-left: 6px solid var(--border); border-radius: var(--radius); padding: 14px 16px 6px; min-width: 0; }
.lgs-karte.lgs-aktuell { border-left-color: var(--primary); box-shadow: var(--shadow); }
.lgs-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.lgs-datum { font-size: 1.375rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lgs-ort { color: var(--text-muted); font-weight: 600; }
.lgs-status { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border-radius: 999px; font-size: .875rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2); white-space: nowrap; }
.lgs-status-aktuell { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.lgs-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.lgs-meta small, .lgs-notiz small { color: var(--text-muted); font-size: .875rem; font-weight: 600; }
.lgs-notiz { margin: 8px 0 0; }
.lgs-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 8px; margin: 12px 0 6px; }
.lgs-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; min-width: 0;
  padding: 10px 6px; border: 1px solid var(--linie); border-radius: var(--radius-sm); background: var(--surface); }
.lgs-kachel small { font-size: .875rem; font-weight: 700; color: var(--text-muted); }
.lgs-kachel b { font-size: 1.625rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.lgs-kachel span { font-size: .875rem; color: var(--text-muted); }
.lgs-kachel:not(.lgs-kachel-leer):not(.lgs-kachel-gesamt) { border-color: var(--primary-line); background: var(--primary-soft); }
.lgs-kachel:not(.lgs-kachel-leer):not(.lgs-kachel-gesamt) b { color: var(--primary); }
.lgs-kachel-leer b { color: var(--text-muted); font-weight: 600; }
.lgs-kachel-leer { background: var(--surface-2); border-style: dashed; }
.lgs-kachel-gesamt { background: var(--primary); border-color: var(--primary); }
.lgs-kachel-gesamt small, .lgs-kachel-gesamt span, .lgs-kachel-gesamt b { color: var(--on-kat, #fff); }
@media screen and (max-width: 600px) {
  .lgs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgs-kachel-gesamt { grid-column: 1 / -1; flex-direction: row; gap: 10px; }
}
.lgs-erfasst { margin: 2px 0 8px; font-size: .875rem; color: var(--text-muted); }
/* Änderungen zum vorherigen Stand: auf-/zuklappbar, Knopftext je Zustand */
.lgs-aend { border-top: 1px solid var(--divider); margin: 0 -4px; padding: 0 4px; }
.lgs-aend > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding: 6px 0; }
.lgs-aend > summary::-webkit-details-marker { display: none; }
.lgs-aend-titel { font-weight: 750; }
.lgs-aend-zahl { font-size: .875rem; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; }
.lgs-aend-knopf { margin-left: auto; font-size: .875rem; font-weight: 700; color: var(--primary); min-height: 32px; display: inline-flex; align-items: center;
  padding: 0 12px; border: 1px solid var(--primary-line); border-radius: var(--radius-sm); }
.lgs-aend:not([open]) .lgs-aend-knopf::after { content: "Änderungen anzeigen ▾"; }
.lgs-aend[open] .lgs-aend-knopf::after { content: "Ausblenden ▴"; }
.lgs-aend > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.lgs-erste { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--primary-line); font-weight: 650; }
.lgs-tab-wrap { margin-bottom: 10px; }
.lgs-aend-tab { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.lgs-aend-tab th { text-align: left; font-size: .875rem; color: var(--text-muted); font-weight: 700; padding: 6px 6px; border-bottom: 2px solid var(--linie); }
.lgs-aend-tab td { padding: 7px 6px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.lgs-aend-tab .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lgs-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-weight: 750; font-size: .875rem; white-space: nowrap; border: 1px solid transparent; }
.lgs-delta-plus { color: var(--primary); background: var(--primary-soft); border-color: var(--primary-line); }
.lgs-delta-minus { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media screen and (max-width: 420px) {
  .lgs-karte { padding: 12px 10px 4px; }
  .lgs-aend-tab th, .lgs-aend-tab td { padding-left: 3px; padding-right: 3px; }
  .lgs-aend-tab { font-size: .875rem; }
}
.lgs-reicht { color: var(--primary); font-weight: 700; }
.lgs-minus, .lgs-fehlt { color: var(--danger); font-weight: 700; }
/* Bedarf vs. Lager: passt ohne seitliches Wischen (4 Spalten) */
.lgs-tabelle-wrap { overflow: visible; }
.table-wrap table.lgs-tabelle { min-width: 0; }
.lgs-tabelle th, .lgs-tabelle td { padding: 8px 6px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.lgs-tabelle th { text-align: left; font-size: .875rem; color: var(--text-muted); }
.lgs-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.lgs-tabelle td.zahl small { display: block; font-weight: 600; font-size: .8125rem; }
.lgs-tabelle tr.lgs-z-fehlt td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.lgs-tabelle .lgs-summe-tr td { border-top: 2px solid var(--linie); background: var(--surface-2); }
.lgs-tabelle .lgs-summe-tr td.zahl span, .lgs-tabelle .lgs-summe-tr td.zahl small { display: block; }
#lgsBedarf .panel h3 { margin-bottom: 6px; }

.lgs-leer, .lgs-neutral { color: var(--text-muted); font-weight: 600; }
.lgs-tabelle tr.lgs-z-leer td { color: var(--text-muted); }
.lgs-kat-klein { display: none; }
@media screen and (max-width: 600px) {
  .lgs-aend-tab .lgs-sp-kat { display: none; }
  .lgs-kat-klein { display: block; font-size: .875rem; color: var(--text-muted); margin-top: 2px; }
}
/* Löschpasswort (seit 24.10.2026) */
.loeschpw-form { margin: 8px 0 12px; }
.loeschpw-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.loeschpw-details { margin: 6px 0; }
.loeschpw-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; }
#wipeDialog .field { margin: 10px 0; }
#wipeDialog input[type=password] { width: 100%; }
.loeschpw-details > summary { list-style: none; color: var(--primary); }
.loeschpw-details > summary::-webkit-details-marker { display: none; }
.loeschpw-details > summary::before { content: "▸"; margin-right: 8px; }
.loeschpw-details[open] > summary::before { content: "▾"; }
/* WhatsApp an mehrere Empfänger (seit 24.10.2026): je Person eine Zeile, erledigte mit ✓ */
#bstWaKnoepfe { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.bst-wa-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--divider); }
.bst-wa-zeile > span { font-weight: 650; }
.bst-wa-ok > span { color: var(--primary); }
.bst-wa-alle { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.bst-wa-gross { min-height: 52px; font-size: 1.0625rem; }
.bst-wa-erledigt { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.bst-wa-einzeln { margin: 6px 0 10px; }
.bst-wa-einzeln > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; color: var(--primary); }
.bst-wa-einzeln > summary { list-style: none; }
.bst-wa-einzeln > summary::-webkit-details-marker { display: none; }
.bst-wa-einzeln > summary::before { content: "▸"; margin-right: 8px; }
.bst-wa-einzeln[open] > summary::before { content: "▾"; }
.bst-wa-schritte { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 4px; }
.bst-wa-schritte small { display: block; color: var(--text-muted); font-size: .875rem; }
.bst-wa-anleitung { margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.bst-wa-anleitung .bst-wa-schritte { margin-top: 4px; }
/* Lagerstand-Buchungen (seit 24.10.2026) */
.lgs-buchung { max-width: 32rem; margin-bottom: 10px; }
.lgs-buchung .seg-btn { flex: 1 1 auto; min-width: 0; }
#tab-lagerstand[data-buchung="zugang"] #lgsBuchung .seg-btn.active { background: var(--primary); color: var(--on-kat, #fff); }
#tab-lagerstand[data-buchung="abgang"] #lgsBuchung .seg-btn.active { background: var(--danger); color: #fff; }
.lgs-imlager .vr-rest, .lgs-imlager b { color: var(--primary); }
.lgs-imlager.lgs-minus .vr-rest, .lgs-imlager.lgs-minus b { color: var(--danger); }
.lgs-status-zugang { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.lgs-status-abgang { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.lgs-karte-zugang { border-left-color: var(--primary-line); }
.lgs-karte-abgang { border-left-color: var(--danger-line); }
.lgs-tabelle td.lgs-bewegung { font-size: .875rem; color: var(--text-muted); }
.lgs-filter { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.lgs-bew-klein { display: none; }
@media screen and (max-width: 600px) {
  #lgsAktuell .lgs-bewegung { display: none; }
  #lgsAktuell .lgs-bew-klein { display: block; font-size: .875rem; color: var(--text-muted); margin-top: 2px; }
}
.lgs-aend-mengen:not([open]) .lgs-aend-knopf::after { content: "Mengen anzeigen ▾"; }
.lgs-karte-abgang .lgs-kachel:not(.lgs-kachel-leer):not(.lgs-kachel-gesamt) { border-color: var(--danger-line); background: var(--danger-soft); }
.lgs-karte-abgang .lgs-kachel:not(.lgs-kachel-leer):not(.lgs-kachel-gesamt) b { color: var(--danger); }
.lgs-karte-abgang .lgs-kachel-gesamt { background: var(--danger); border-color: var(--danger); }
/* „Was willst du buchen?“ (seit 24.10.2026) */
.lgs-frage-knoepfe { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.lgs-frage-knoepfe .btn { min-height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 1.0625rem; }
.lgs-frage-knoepfe .btn small { font-weight: 500; font-size: .875rem; opacity: .85; }
.lgs-frage-knoepfe .lgs-wahl-zugang { border-color: var(--primary); color: var(--primary); }
.lgs-frage-knoepfe .lgs-wahl-abgang { border-color: var(--danger); color: var(--danger); }
/* Bestellungs-Karten: größere Schrift am Tablet/PC (Wunsch Toni 24.10.2026 abends) – nur .bst-karte, Lagerstand unverändert */
.bst-karte .lgs-datum { font-size: 1.625rem; }
.bst-karte .lgs-ort { font-size: 1.1875rem; font-weight: 700; color: var(--text); }
.bst-karte .lgs-meta, .bst-karte .lgs-notiz { font-size: 1.125rem; }
.bst-karte .lgs-meta small, .bst-karte .lgs-notiz small { font-size: 1rem; }
.bst-karte .lgs-status { font-size: 1rem; min-height: 36px; }
.bst-karte .lgs-kachel small { font-size: 1rem; }
.bst-karte .lgs-kachel b { font-size: 1.875rem; }
.bst-karte .lgs-kachel span { font-size: .9375rem; }
.bst-karte .lgs-aend-titel { font-size: 1.125rem; }
.bst-karte .lgs-aend-zahl, .bst-karte .lgs-aend-knopf { font-size: .9375rem; }
.bst-karte .bst-pos-tab { font-size: 1.0625rem; }
.bst-karte .bst-pos-tab th { font-size: .9375rem; }
.bst-karte .bst-pos-tab td { padding-top: 9px; padding-bottom: 9px; }
.bst-karte .bst-pos-tab .gr-schild, .bst-karte .bst-pos-tab .gr-ohne { font-size: 1rem; }
@media screen and (max-width: 600px) {
  .bst-karte .lgs-datum { font-size: 1.5rem; }
  .bst-karte .lgs-ort { font-size: 1.125rem; }
  .bst-karte .lgs-meta, .bst-karte .lgs-notiz { font-size: 1.0625rem; }
  .bst-karte .bst-pos-tab { font-size: 1rem; }
  /* 4 Spalten (Größe | Bestellt | Freigegeben | Verladen) passen ohne Abschneiden */
  .bst-karte .bst-pos-tab th { font-size: .8125rem; padding-left: 2px; padding-right: 2px; }
  .bst-karte .bst-pos-tab td { padding-left: 2px; padding-right: 2px; }
}
/* ===== Lagerstand-Erfassung: Rahmen je Größe, Kästchen je Wert, größere Schrift (Wunsch Toni 24.10.2026 abends) =====
   Nur #tab-lagerstand (.lgs-item / .lgs-eq-zeile); Bestellung und Auslieferung unverändert. */
#tab-lagerstand .table-head.bst-row { display: none; }              /* jede Zahl ist jetzt im eigenen Kästchen beschriftet */
#tab-lagerstand .lgs-item {
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px 16px;
  margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--surface);
}
#tab-lagerstand .lgs-item:last-of-type { border-bottom: 1px solid var(--linie); }
#tab-lagerstand .lgs-item.bst-hat { border-color: var(--kat-line, var(--primary-line)); }
#tab-lagerstand .lgs-item .size-name { display: flex; align-items: center; justify-content: center; }
#tab-lagerstand .lgs-item .gr-schild, #tab-lagerstand .lgs-item .gr-ohne { font-size: 1.1875rem; }
#tab-lagerstand .lgs-item .vr-box { display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch; margin: 0; min-width: 0; }
#tab-lagerstand .lgs-item .vr-box > .vr-col, #tab-lagerstand .lgs-eq-zeile .bst-eq-werte > span { flex: 1 1 0; }
#tab-lagerstand .lgs-item .vr-col, #tab-lagerstand .lgs-eq-zeile .bst-eq-werte span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; min-width: 0;
  padding: 6px 4px; border: 1px solid var(--linie); border-radius: var(--radius-sm); background: var(--surface-2);
}
#tab-lagerstand .lgs-item .vr-col label, #tab-lagerstand .lgs-eq-zeile .bst-eq-werte small {
  margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-muted); line-height: 1.2;
}
#tab-lagerstand .lgs-item .vr-rest, #tab-lagerstand .lgs-eq-zeile .bst-eq-werte b {
  min-height: 0; min-width: 0; justify-content: center; font-size: 1.5rem; font-weight: 800; line-height: 1.2;
}
#tab-lagerstand .lgs-item .lgs-imlager { border-color: var(--primary-line); background: var(--primary-soft); }
#tab-lagerstand .lgs-item .lgs-imlager.lgs-minus { border-color: var(--danger-line); background: var(--danger-soft); }
/* Lagerstand-Eingabe: Beschriftung mittig über − Zahl + */
#tab-lagerstand .lgs-item .lgs-counter, #tab-lagerstand .lgs-eq-zeile .lgs-counter { flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
#tab-lagerstand .lgs-item .lgs-counter::before, #tab-lagerstand .lgs-eq-zeile .lgs-counter::before {
  content: attr(data-label); display: block; flex: 0 0 100%; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text-muted);
}
#tab-lagerstand .lgs-zahl { font-size: 1.5rem; }
@media screen and (min-width: 721px) { #tab-lagerstand .lgs-item .lgs-counter { width: 13rem; } }
/* Equipment-Zeile ebenso umrahmt */
#tab-lagerstand .lgs-eq-zeile { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--surface); }
#tab-lagerstand .lgs-eq-zeile.bst-hat { background: var(--primary-soft); border-color: var(--primary-line); }
#tab-lagerstand .lgs-eq-zeile .eq-name b { font-size: 1.125rem; }
#tab-lagerstand .lgs-eq-zeile .bst-eq-werte { display: flex; gap: 8px; min-width: 0; }
#tab-lagerstand .lgs-eq-zeile .bst-eq-werte > span { min-width: 4.75rem; }
#tab-lagerstand .lgs-eq-zeile .bst-eq-werte .lgs-imlager { border-color: var(--primary-line); background: var(--primary-soft); }
#tab-lagerstand .lgs-eq-zeile .bst-eq-werte .lgs-imlager.lgs-minus { border-color: var(--danger-line); background: var(--danger-soft); }
#tab-lagerstand .lgs-summe-zeile { font-size: 1.125rem; }
@media screen and (max-width: 720px) {
  #tab-lagerstand .lgs-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  #tab-lagerstand .lgs-item .size-name { justify-content: flex-start; }
  #tab-lagerstand .lgs-item .vr-box { max-width: none; width: 100%; margin: 0; }
  #tab-lagerstand .lgs-item .vr-col { display: flex; }
  #tab-lagerstand .lgs-item .lgs-counter { flex: 1 1 100%; }
}
@media screen and (max-width: 600px) {
  #tab-lagerstand .lgs-item .vr-col label, #tab-lagerstand .lgs-eq-zeile .bst-eq-werte small { font-size: .8125rem; }
  #tab-lagerstand .lgs-item .vr-rest, #tab-lagerstand .lgs-eq-zeile .bst-eq-werte b { font-size: 1.25rem; }
  #tab-lagerstand .lgs-item .vr-box, #tab-lagerstand .lgs-eq-zeile .bst-eq-werte { gap: 6px; }
  #tab-lagerstand .lgs-eq-zeile { padding: 10px; }
  #tab-lagerstand .lgs-eq-zeile .bst-eq-werte { grid-column: 1 / -1; grid-row: 2; }
  #tab-lagerstand .lgs-eq-zeile .bst-eq-werte > span { min-width: 0; }
  #tab-lagerstand .lgs-eq-zeile .eq-counter { grid-column: 1 / -1; grid-row: 3; }
}
#tab-lagerstand .lgs-eq-zeile .lgs-counter.eq-counter { display: flex; flex-wrap: wrap; justify-content: center; width: 13rem; max-width: 100%; }
@media screen and (max-width: 600px) { #tab-lagerstand .lgs-eq-zeile .lgs-counter.eq-counter { width: auto; } }
/* ===== Auslieferung-Erfassung + Bestellmaske wie die Lagerstand-Erfassung (Wunsch Toni 24.10.2026 abends):
   Rahmen je Größe, Kästchen je Wert, Zahl mittig, größere Schrift am Tablet. Nur #sizeRows, #bstBaumRows, #bstEqListe. */
#tab-erfassung .table-head.size-row, #tab-bestellung #bstBaum .table-head.bst-row { display: none; }
#sizeRows .size-item, #bstBaumRows .bst-item {
  align-items: center; gap: 10px 16px; margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--surface);
}
#sizeRows .size-item { grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto auto; }
#bstBaumRows .bst-item { grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr) auto; }
#sizeRows .size-item:last-child, #bstBaumRows .bst-item:last-child { border-bottom: 1px solid var(--linie); }
#bstBaumRows .bst-item.bst-hat { border-color: var(--kat-line, var(--primary-line)); }
#sizeRows .size-name, #bstBaumRows .size-name { display: flex; align-items: center; justify-content: center; }
#sizeRows .gr-schild, #sizeRows .gr-ohne, #bstBaumRows .gr-schild, #bstBaumRows .gr-ohne { font-size: 1.1875rem; }
#sizeRows .vr-box, #bstBaumRows .vr-box { display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch; margin: 0; min-width: 0; }
#sizeRows .vr-box > .vr-col, #bstBaumRows .vr-box > .vr-col, #bstEqListe .bst-eq-werte > span {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; min-width: 0;
  padding: 6px 4px; border: 1px solid var(--linie); border-radius: var(--radius-sm); background: var(--surface-2);
}
#sizeRows .vr-col label, #bstBaumRows .vr-col label, #bstEqListe .bst-eq-werte small { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-muted); line-height: 1.2; }
#sizeRows .vr-rest, #bstBaumRows .vr-rest, #bstEqListe .bst-eq-werte b { min-height: 0; min-width: 0; justify-content: center; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
#sizeRows .vr-col input { width: 5.5rem; max-width: 100%; text-align: center; font-size: 1.25rem; font-weight: 700; }
#sizeRows .vr-col input:disabled { width: 100%; font-size: 1.5rem; font-weight: 800; text-align: center; padding: 0; min-height: 0; }
#sizeRows .vr-bestellung { border-color: var(--primary-line); background: var(--primary-soft); }
/* Zähler mit Beschriftung mittig darüber (Verladung, Stand retour, Bestellung) */
#sizeRows .counter, #bstBaumRows .counter, #bstEqListe .eq-counter { flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
#sizeRows .counter::before, #bstBaumRows .counter::before, #bstEqListe .eq-counter::before {
  content: attr(data-label); display: block; flex: 0 0 100%; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text-muted);
}
#bstEqListe .eq-counter::before { content: "Bestellung"; }
#sizeRows .counter .val, #bstBaumRows .counter .val, #bstEqListe .eq-counter .val { font-size: 1.5rem; font-weight: 800; min-width: 2.5ch; }
#sizeRows .bst-erreicht-text, #bstBaumRows .bst-warnung { grid-column: 1 / -1; font-size: 1rem; }
@media screen and (min-width: 721px) {
  #sizeRows .counter { width: 10.5rem; }
  #bstBaumRows .counter { width: 12rem; }
}
/* Equipment der Bestellung: Zeile umrahmt, Kästchen je Wert */
#bstEqListe .bst-eq-zeile { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--surface); }
#bstEqListe .bst-eq-zeile.bst-hat { background: var(--primary-soft); border-color: var(--primary-line); }
#bstEqListe .eq-name b { font-size: 1.125rem; }
#bstEqListe .bst-eq-werte { display: flex; gap: 8px; min-width: 0; }
#bstEqListe .bst-eq-werte > span { min-width: 4.75rem; }
#bstEqListe .eq-counter { display: flex; width: 12rem; max-width: 100%; }
@media screen and (max-width: 720px) {
  #sizeRows .size-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 10px; }
  #bstBaumRows .bst-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  #sizeRows .size-name, #bstBaumRows .size-name { grid-column: 1 / -1; justify-content: flex-start; }
  #sizeRows .vr-box, #bstBaumRows .vr-box { grid-column: 1 / -1; max-width: none; width: 100%; margin: 0; }
  #sizeRows .vr-col, #bstBaumRows .vr-col { display: flex; }
  #sizeRows .counter, #bstBaumRows .counter { min-width: 0; }
}
@media screen and (max-width: 600px) {
  #sizeRows .vr-col label, #bstBaumRows .vr-col label, #bstEqListe .bst-eq-werte small { font-size: .8125rem; }
  #sizeRows .vr-rest, #bstBaumRows .vr-rest, #bstEqListe .bst-eq-werte b, #sizeRows .vr-col input:disabled { font-size: 1.25rem; }
  #sizeRows .vr-box, #bstBaumRows .vr-box, #bstEqListe .bst-eq-werte { gap: 6px; }
  #bstEqListe .bst-eq-zeile { padding: 10px; }
  #bstEqListe .bst-eq-werte { grid-column: 1 / -1; grid-row: 2; }
  #bstEqListe .bst-eq-werte > span { min-width: 0; }
  #bstEqListe .eq-counter { grid-column: 1 / -1; grid-row: 3; width: auto; }
}
/* ===== Bedarf vs. Lager: Rahmen je Kategorie, Tabelle mit Linien, Zahlen mittig, größere Schrift (24.10.2026 abends) ===== */
#lgsBedarf .lgs-bedarf-block { border: 2px solid var(--kat-line, var(--linie)); border-left: 8px solid var(--kat, var(--primary)); }
#lgsBedarf .lgs-bedarf-block.k-eq { --kat: var(--primary); --kat-line: var(--primary-line); --kat-soft: var(--primary-soft); }
#lgsBedarf .lgs-bedarf-block > h3 { font-size: 1.375rem; margin: 0 0 10px; color: var(--text); }
#lgsBedarf .lgs-tabelle { width: 100%; border-collapse: collapse; border: 1px solid var(--linie); font-size: 1.125rem; }
#lgsBedarf .lgs-tabelle th, #lgsBedarf .lgs-tabelle td { border: 1px solid var(--linie); padding: 8px 10px; vertical-align: middle; }
#lgsBedarf .lgs-tabelle th { font-size: 1rem; text-align: center; background: var(--kat-soft, var(--surface-2)); color: var(--text); }
#lgsBedarf .lgs-tabelle th:first-child { text-align: left; }
#lgsBedarf .lgs-tabelle .zahl { text-align: center; font-size: 1.25rem; }
#lgsBedarf .lgs-tabelle th.zahl { font-size: 1rem; }
#lgsBedarf .lgs-tabelle { table-layout: fixed; }
#lgsBedarf .lgs-tabelle th:first-child { width: 34%; }
#lgsBedarf .lgs-tabelle td.zahl small { font-size: .9375rem; }
#lgsBedarf .lgs-tabelle .gr-schild, #lgsBedarf .lgs-tabelle .gr-ohne { font-size: 1.0625rem; }
#lgsBedarf .lgs-tabelle .lgs-summe-tr td { font-size: 1.1875rem; font-weight: 800; border-top: 2px solid var(--kat, var(--linie)); background: var(--kat-soft, var(--surface-2)); }
#lgsBedarf .lgs-tabelle .lgs-summe-tr td.zahl { font-size: 1.25rem; }
/* Bäume gesamt: Kästchen je Wert, Zahl mittig */
#lgsBedarf .lgs-gesamt .lgs-summen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#lgsBedarf .lgs-gesamt .lgs-summen span { align-items: center; justify-content: center; text-align: center; min-width: 0; padding: 8px 4px; border: 1px solid var(--linie); border-radius: var(--radius-sm); background: var(--surface-2); }
#lgsBedarf .lgs-gesamt .lgs-summen small { font-size: 1rem; font-weight: 700; }
#lgsBedarf .lgs-gesamt .lgs-summen b { font-size: 1.75rem; }
#lgsBedarf .lgs-gesamt .lgs-summen .lgs-fehlt { border-color: var(--danger-line); background: var(--danger-soft); }
#lgsBedarf .lgs-gesamt .lgs-summen .lgs-reicht { border-color: var(--primary-line); background: var(--primary-soft); }
#lgsBedarf .lgs-gesamt h3 { font-size: 1.375rem; }
#lgsBedarfInfo { font-size: 1rem; }
@media screen and (max-width: 600px) {
  #lgsBedarf .lgs-bedarf-block { border-left-width: 6px; padding-left: 8px; padding-right: 8px; }
  #lgsBedarf .lgs-tabelle { font-size: 1rem; table-layout: fixed; }
  #lgsBedarf .lgs-tabelle th, #lgsBedarf .lgs-tabelle td { padding: 6px 3px; }
  #lgsBedarf .lgs-tabelle th { font-size: .8125rem; }
  #lgsBedarf .lgs-tabelle th:first-child, #lgsBedarf .lgs-tabelle td:first-child { width: 36%; }
  #lgsBedarf .lgs-tabelle .zahl { font-size: 1.0625rem; }
  #lgsBedarf .lgs-tabelle td.zahl small { font-size: .75rem; white-space: normal; }
  #lgsBedarf .lgs-tabelle .gr-schild, #lgsBedarf .lgs-tabelle .gr-ohne { font-size: .9375rem; padding-left: 5px; padding-right: 5px; }
  #lgsBedarf .lgs-gesamt .lgs-summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lgsBedarf .lgs-tabelle th, #lgsBedarf .lgs-tabelle th.zahl { font-size: .8125rem; overflow-wrap: anywhere; hyphens: auto; }
  #lgsBedarf .lgs-tabelle th:first-child, #lgsBedarf .lgs-tabelle td:first-child { width: 33%; }
  #lgsBedarf .lgs-tabelle .lgs-summe-tr td { font-size: .9375rem; white-space: normal; overflow-wrap: anywhere; }
  #lgsBedarf .lgs-tabelle .lgs-summe-tr td.zahl, #lgsBedarf .lgs-tabelle td.zahl span { font-size: 1rem; }
  #lgsBedarf .lgs-gesamt .lgs-summen small { font-size: .875rem; }
}

/* Admin → Zugänge: WhatsApp-Gruppe für Bestellungen (Gesamtprüfung 24.10.2026).
   Hausregel Tablet: Rahmen je Zeile, Beschriftung 16 px, Felder ≥ 16 px, Tippflächen ≥ 44 px. */
.wa-gruppe-zeile { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 14px; align-items: center;
  border: 1px solid var(--linie); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 8px; background: var(--surface); }
.wa-gruppe-aktuell { background: var(--surface-2); }
.wa-gruppe-label { font-size: 1rem; font-weight: 650; color: var(--text); }
.wa-gruppe-wert { font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.wa-gruppe-wert.muted { font-weight: 400; }
.wa-gruppe-zeile input { min-height: var(--tap); font-size: 1rem; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); width: 100%; min-width: 0; }
.wa-gruppe-knoepfe { margin-top: 4px; }
@media screen and (max-width: 600px) {
  .wa-gruppe-zeile { grid-template-columns: minmax(0, 1fr); }
  .wa-gruppe-knoepfe .btn { flex: 1 1 100%; }
}

/* „⋯ Mehr“ in der Leiste unten (Gesamtprüfung 24.10.2026, A4): ab 6 Reitern bis 900 px Breite */
.nav-mehr { display: none; }
.nav-mehr-menue { display: none; }
@media screen and (max-width: 900px) {
  .nav .nav-mehr:not([hidden]) { display: flex; }
  .nav.nav-mit-mehr .nav-item.nav-ueber { display: none; }
  .nav-mehr.nav-mehr-aktiv { color: var(--primary); font-weight: 650; }
  .nav-mehr.nav-mehr-aktiv .nav-icon { background: var(--primary-soft); }
  .nav-mehr-menue:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; z-index: 36;
    right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom, 0px));
    min-width: min(16rem, calc(100vw - 16px)); padding: 6px; gap: 2px;
    background: var(--surface); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--shadow-hoch);
  }
  .nav-mehr-eintrag {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .nav-mehr-eintrag svg { width: 24px; height: 24px; flex: 0 0 auto; }
  .nav-mehr-eintrag:hover { background: var(--hover); }
  .nav-mehr-eintrag.aktiv { background: var(--primary-soft); color: var(--primary); }
}
@media print { .nav-mehr-menue { display: none !important; } }

/* Admin → Sicherung & Sync → „Lagerstand löschen“ (Nutzer 25.10.2026): Rahmen je Eintrag, Kästchen je Wert, ganze Zeile antippbar */
details.lgs-loesch { margin-top: 10px; }
details.lgs-loesch > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 1rem; cursor: pointer; }
.lgs-loesch-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin: 8px 0 10px; }
.lgs-loesch-leiste .field { margin: 0; min-width: 11rem; }
.lgs-loesch-leiste select { min-height: 44px; font-size: 1rem; }
.lgs-loesch-alle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.lgs-loesch-alle input, .lgs-loesch-zeile input { width: 24px; height: 24px; accent-color: var(--danger); flex: 0 0 auto; }
.lgs-loesch-zahl { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; }
.lgs-loesch-liste { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; margin-bottom: 12px; padding-right: 2px; }
.lgs-loesch-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cb kopf werte" "cb wer werte";
  align-items: center; gap: 4px 14px; min-height: 56px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--linie);
  border-radius: 10px; cursor: pointer; font-size: 1rem; }
.lgs-loesch-zeile.gewaehlt { border: 2px solid var(--danger); background: var(--danger-soft); }
.lgs-loesch-zeile > input { grid-area: cb; }
.lgs-loesch-kopf { grid-area: kopf; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1.125rem; }
.lgs-loesch-wer { grid-area: wer; color: var(--text-muted); font-size: 1rem; overflow-wrap: anywhere; }
.lgs-loesch-art { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 1rem; font-weight: 700; border: 1px solid var(--linie); }
.lgs-loesch-art--zaehlung { color: var(--primary); border-color: var(--primary); }
.lgs-loesch-art--zugang { color: var(--primary); background: var(--primary-soft, transparent); border-color: var(--primary); }
.lgs-loesch-art--abgang { color: var(--danger); border-color: var(--danger); }
.lgs-loesch-werte { grid-area: werte; display: flex; gap: 6px; }
.lgs-loesch-werte > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.5rem; padding: 4px 8px;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--surface); }
.lgs-loesch-werte small { font-size: 1rem; font-weight: 700; color: var(--text-muted); }
.lgs-loesch-werte b { font-size: 1.375rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
#lgsLoeschBtn { min-height: 44px; }
@media (max-width: 600px) {
  .lgs-loesch-zeile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cb kopf" "cb wer" "werte werte"; }
  .lgs-loesch-werte { flex-wrap: wrap; }
  .lgs-loesch-werte > span { flex: 1 1 0; min-width: 0; }
  .lgs-loesch-werte small { font-size: .8125rem; }
  .lgs-loesch-werte b { font-size: 1.25rem; }
}

/* Lagerstand → Aktuell: Texte in den Zellen dürfen umbrechen, sonst wird die Tabelle breiter als das Handy
   und die ganze Seite lässt sich quer schieben (25.10.2026). Schrift bleibt gleich groß. */
#lgsAktuell .lgs-tabelle { width: 100%; }
#lgsAktuell .lgs-tabelle td { white-space: normal; overflow-wrap: anywhere; }
#lgsAktuell .lgs-tabelle td.zahl small, #lgsAktuell .lgs-bew-klein, #lgsAktuell td.lgs-bewegung { white-space: normal; }

/* Häkchen „Lagerstand auch löschen“ im Kasten „Alle Listendaten löschen“ (25.10.2026) */
.wipe-lgs { display: flex; margin: 4px 0 10px; }