/* Design „Arbeitsplatz“ (Plan.md Abschnitt 8, Entwurf Dokumentation/Design-Entwuerfe/fable.html, Variante 1):
   dunkle Menüspalte links, helle Arbeitsfläche; Marke laut Dokumentation/Design-Grundlagen.md.
   Blau = hier handeln, Grün = eingetragen/freigegeben/geliefert, Rot = dringend/abgelehnt, Gelb = prüfen. */
/* Source Sans 3 (SIL OFL), lokal aus wwwroot/lib/source-sans-3: kein Abruf bei Google (DSGVO). */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../lib/source-sans-3/source-sans-3-latin-wght-normal.woff2") format("woff2-variations"),
       url("../lib/source-sans-3/source-sans-3-latin-wght-normal.woff2") format("woff2");
}

:root {
  --blau: #006EAC; --blau-dunkel: #00578A; --blau-hell: #E8F1F8;
  --gruen: #71A323; --gruen-dunkel: #4F7A14; --gruen-hell: #F1F7E9;
  --anthrazit: #2B2F33; --anthrazit-hell: #3A3F44; --grau: #5A6168; --grau-hell: #F2F3F4;
  --linie: #D9DDE1; --rahmen: #8A9197;
  --rot: #B3261E; --gelb-hell: #FFF4D6; --gelb-text: #7A5300;
  --menue-breite: 220px;
  --leiste-hoehe: 64px;

  /* Bootstrap auf die Marke umstellen */
  --bs-body-font-family: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--anthrazit);
  --bs-body-bg: var(--grau-hell);
  --bs-primary: #006EAC; --bs-primary-rgb: 0, 110, 172;
  --bs-success: #4F7A14; --bs-success-rgb: 79, 122, 20;
  --bs-danger: #B3261E; --bs-danger-rgb: 179, 38, 30;
  --bs-secondary-color: var(--grau);
  --bs-link-color: #006EAC; --bs-link-color-rgb: 0, 110, 172;
  --bs-link-hover-color: #00578A; --bs-link-hover-color-rgb: 0, 87, 138;
  --bs-border-color: var(--linie);
  --bs-border-radius: 3px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 4px;
}

html { font-size: 16px; }
/* Stufen: Text 16, Tabelle 15, klein 14, Tabellenkopf 13, Überschriften 24 / 19 / 16 (halbfett). Fett (700) nur für Summen und Warnwörter. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; color: var(--anthrazit); }
h1, .h3 { font-size: 1.5rem; line-height: 1.25; }
.h5 { font-size: 1.1875rem; }
.h6 { font-size: 1rem; }

:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: none; outline: 3px solid var(--blau); outline-offset: 1px; border-color: var(--blau);
}

/* Knöpfe in Markenfarben */
.btn-primary {
  --bs-btn-bg: var(--blau); --bs-btn-border-color: var(--blau);
  --bs-btn-hover-bg: var(--blau-dunkel); --bs-btn-hover-border-color: var(--blau-dunkel);
  --bs-btn-active-bg: #004A75; --bs-btn-active-border-color: #004A75;
  --bs-btn-disabled-bg: var(--blau); --bs-btn-disabled-border-color: var(--blau);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--blau); --bs-btn-border-color: var(--blau); --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--blau-dunkel); --bs-btn-hover-bg: var(--blau-hell); --bs-btn-hover-border-color: var(--blau-dunkel);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--blau); --bs-btn-active-border-color: var(--blau);
}
.btn-outline-secondary {
  --bs-btn-color: var(--anthrazit); --bs-btn-border-color: var(--rahmen); --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--anthrazit); --bs-btn-hover-bg: var(--grau-hell); --bs-btn-hover-border-color: var(--grau);
}
.btn-success { --bs-btn-bg: var(--gruen-dunkel); --bs-btn-border-color: var(--gruen-dunkel); --bs-btn-hover-bg: #3F6410; --bs-btn-hover-border-color: #3F6410; }
.btn-lg { --bs-btn-font-size: 1rem; }
.form-control, .form-select { border-color: var(--rahmen); background-color: #fff; }
/* Pflichtfeld leer oder ungültig nach dem Speichern (Fehlertext steht darunter). */
.form-control.input-validation-error { border-color: var(--bs-danger); }
.card { --bs-card-bg: #fff; --bs-card-cap-bg: #fff; }
.form-check-input { border-color: var(--rahmen); background-color: #fff; }
.form-check-input:checked { background-color: var(--blau); border-color: var(--blau); }
.text-bg-info { color: var(--blau-dunkel) !important; background-color: var(--blau-hell) !important; }
.text-bg-warning { color: var(--gelb-text) !important; background-color: var(--gelb-hell) !important; }

/* ---------- Grundgerüst ---------- */
body.mit-menue { padding-left: var(--menue-breite); }
/* Auf breiten Bildschirmen begrenzt: Formulare, Filter und Tabellen bleiben beieinander (Sichtprüfung 25.10.). */
.inhalt { padding: 24px 28px 32px; min-height: 100vh; max-width: 1320px; }
.inhalt:focus { outline: none; }

svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* App-Symbol vor dem Namen (kleine Fassung aus Werkzeuge/icons). */
.app-symbol { width: 32px; height: 32px; display: block; flex: none; }
.testuhr { display: inline-block; background: var(--gelb-hell); color: var(--gelb-text); font-size: .75rem; font-weight: bold; padding: 2px 8px; border-radius: 3px; }

.seitenleiste {
  position: fixed; inset: 0 auto 0 0; z-index: 1030; width: var(--menue-breite);
  display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  background: var(--anthrazit); color: #E6E9EB; padding: 16px 0 12px;
}
.seitenleiste :focus-visible { outline-color: #fff; outline-offset: -3px; }
.seitenleiste .marke { display: flex; align-items: center; gap: 10px; padding: 0 16px; text-decoration: none; }
.seitenleiste .produkt { color: #fff; font-weight: bold; font-size: 1.0625rem; }
.seitenleiste .testuhr { margin: 0 16px; }
.menue { display: flex; flex-direction: column; }
.menue .gruppe { color: #B9C0C6; font-size: .75rem; padding: 12px 16px 4px; }
.menue a {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px;
  color: #E6E9EB; text-decoration: none; border-left: 4px solid transparent; white-space: nowrap;
}
.menue a:hover { background: var(--anthrazit-hell); color: #fff; }
.menue a[aria-current="page"] { background: var(--blau); color: #fff; border-left-color: #fff; font-weight: bold; }
.menue .zahl { margin-left: auto; min-width: 1.6em; text-align: center; background: var(--gelb-hell); color: var(--gelb-text); font-size: .75rem; font-weight: bold; padding: 1px 6px; border-radius: 10px; }
.untermenue a { padding: 6px 16px 6px 46px; font-size: .8125rem; }
.untermenue a[aria-current="page"] { background: var(--anthrazit-hell); border-left-color: var(--blau); }

.konto { margin-top: auto; border-top: 1px solid #4A5157; padding-top: 8px; }
.konto summary { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; list-style: none; font-size: .8125rem; overflow-wrap: anywhere; }
.konto summary::-webkit-details-marker { display: none; }
.konto summary:hover { background: var(--anthrazit-hell); }
.konto-menue a, .konto-menue button {
  display: block; width: 100%; padding: 6px 16px 6px 46px; color: #E6E9EB; text-decoration: none;
  background: none; border: 0; text-align: left; font-size: .8125rem;
}
.konto-menue a:hover, .konto-menue button:hover { background: var(--anthrazit-hell); color: #fff; }
.konto-menue form { margin: 0; }
.konto-menue .nur-handy { display: none; }

.kopf-ohne-menue { display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: #fff; border-bottom: 1px solid var(--linie); }
.kopf-ohne-menue .produkt { font-weight: bold; color: var(--grau); padding-left: 14px; border-left: 1px solid var(--linie); }
.kopf-ohne-menue .testuhr { margin-left: auto; }

/* ---------- Arbeitsfläche ---------- */
/* Lesespalte: Seiten zum Erfassen (Mein Standort) bleiben schmal, die Augen wandern nicht über den ganzen Bildschirm. */
.lesebreite { max-width: 900px; }

.klein-grau { font-size: .875rem; color: var(--grau); }

/* Filterzeile über Listen: Suche wächst, Auswahlfelder so breit wie ihr Text, Scannen rechts. */
.filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.filterzeile .suche { flex: 1 1 200px; width: auto; }
.filterzeile .form-select { flex: 0 1 auto; width: auto; }
.filterzeile .scan-gruppe { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }

/* Tabellen: weiße Fläche, nur so breit wie der Inhalt (Durchsicht D8); .w-100 für Erfassungslisten. */
.table {
  --bs-table-bg: #fff; --bs-table-border-color: var(--linie); --bs-table-hover-bg: #F7F9FB;
  width: auto; max-width: 100%; border: 1px solid var(--linie);
  font-size: .9375rem; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.table.w-100, .card .table { width: 100%; }
.card .table { border-width: 0; }
.table > thead > tr > th { background: #F7F8F9; color: var(--grau); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; vertical-align: bottom; }
.table-responsive { max-width: 100%; }
/* Kategorie als ruhige Zwischenzeile, nicht in derselben Fette wie die Artikelnamen. */
/* Kategorie-Überschriften gut erkennbar: blaue Fläche mit Randstrich (Wunsch Projektleitung 25.10.). */
.kategorie-kopf th { background: var(--blau-hell) !important; color: var(--blau-dunkel); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1rem .625rem .5rem; border-top: 2px solid var(--blau); box-shadow: inset 4px 0 0 var(--blau); }
input[type=number] { font-variant-numeric: tabular-nums; }

.artikel-zeile td { vertical-align: middle; }
.artikel-zeile.hat-menge > td { background-color: var(--gruen-hell); }
.artikel-zeile.hat-menge > td:first-child { box-shadow: inset 4px 0 0 var(--gruen); }

/* Hilfe: „?“ an Überschriften, Hilfeseite */
.hilfe-link {
  display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin-left: 6px;
  border-radius: 50%; border: 1px solid var(--blau); color: var(--blau); background: #fff;
  font-size: .875rem; font-weight: bold; text-decoration: none; vertical-align: middle;
}
a.hilfe-link:hover { background: var(--blau); color: #fff; }
.hilfe section { background: #fff; border: 1px solid var(--linie); border-radius: 3px; padding: 16px 20px; margin-bottom: 20px; scroll-margin-top: 16px; }
.hilfe h2 { font-size: 1.15rem; margin-bottom: .75rem; }
.hilfe h3 { font-size: 1rem; margin-top: 1.25rem; }
.hilfe dt { margin-top: .5rem; font-weight: 600; }
/* Zeilen höchstens etwa 70 Zeichen: Lesen ohne lange Augenwege. */
.hilfe p, .hilfe li, .hilfe dd { max-width: 68ch; }
.hilfe dd { margin-left: 0; color: var(--anthrazit); }
.ablauf-bild { display: block; width: 100%; max-width: 760px; height: auto; margin: 4px 0 12px; }
.hilfe-inhalt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.hilfe-inhalt div { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hilfe-inhalt strong { min-width: 6.5rem; }

/* Formulare auf weißer Fläche statt frei auf dem grauen Grund. */
.flaeche { background: #fff; border: 1px solid var(--linie); border-radius: 3px; padding: 16px; }
.row.flaeche { margin: 0 0 16px; padding: 0 calc(16px - var(--bs-gutter-x) * .5) 16px; }
/* Auf einer Bootstrap-Spalte trägt das Formular die Fläche, sonst ginge der Spaltenabstand verloren. */
.row > .flaeche { background: none; border: 0; padding: 0 calc(var(--bs-gutter-x) * .5); }
.row > .flaeche > form { background: #fff; border: 1px solid var(--linie); border-radius: 3px; padding: 16px; margin-bottom: 12px; }

/* Kennzeichen (Bootstrap-Badges) in den ruhigen Stand-Farben, überall gleich. */
.badge { font-weight: 600; font-size: .8125rem; border-radius: 3px; }
.badge.text-bg-success { color: var(--gruen-dunkel) !important; background-color: var(--gruen-hell) !important; }
.badge.text-bg-primary { color: var(--blau-dunkel) !important; background-color: var(--blau-hell) !important; }
.badge.text-bg-secondary { color: var(--anthrazit) !important; background-color: #E4E7EA !important; }
.badge.text-bg-danger { color: var(--rot) !important; background-color: #FBEAEA !important; }
.badge.text-bg-light { color: var(--anthrazit) !important; background-color: #fff !important; border: 1px solid var(--linie); }

/* Auswahllisten (Standorte, Lieferanten): Zusatzschrift im markierten Eintrag lesbar. */
.list-group-item.active .klein-grau, .list-group-item.active .small { color: #E6F0F7; }

/* Links in Tabellen ohne Dauer-Unterstreichung; kurze Spalten brechen nicht um. */
.table a { text-decoration-color: var(--rahmen); text-underline-offset: 2px; }
.table a:hover, .table a:focus-visible { text-decoration-color: currentColor; }
.table td.text-nowrap, .table .nowrap { white-space: nowrap; }

/* Stand in Worten (Letzte Meldungen): offen grau, läuft blau, fertig grün, achtung gelb, abgelehnt rot. */
.stand { display: inline-block; font-size: .875rem; font-weight: 600; padding: 1px 8px; border-radius: 3px; }
.stand-offen { background: var(--grau-hell); color: var(--anthrazit); }
.stand-laeuft { background: var(--blau-hell); color: var(--blau-dunkel); }
.stand-fertig { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.stand-achtung { background: var(--gelb-hell); color: var(--gelb-text); }
.stand-abgelehnt { background: #FBEAEA; color: var(--rot); }
.stand.klein { font-size: .8125rem; padding: 0 6px; }

/* Einkauf: höchstens so breit wie nötig, Sprungleiste je Lieferant, freigegebene Zeilen grün markiert. */
.einkauf { max-width: 1200px; }
.lieferantenleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lieferantenleiste a { display: flex; flex-direction: column; padding: 6px 12px; background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--blau); border-radius: 3px; color: var(--anthrazit); text-decoration: none; }
.lieferantenleiste a:hover { background: var(--blau-hell); }
.buendel { border-color: var(--linie); scroll-margin-top: 12px; }
.buendel > .card-header { background: #fff; }
.buendel > .card-footer { background: #F7F8F9; }
.einkaufliste { border-width: 0; }
.zeile-frei > td { background-color: var(--gruen-hell); }
.zeile-frei > td:first-child { box-shadow: inset 4px 0 0 var(--gruen-dunkel); }

/* Auswertung: Summe neben dem Artikel hervorgehoben, leere Felder als blasser Strich, Summenzeile unten. */
.auswertung td, .auswertung th { font-variant-numeric: tabular-nums; }
.auswertung td.text-end, .auswertung th.text-end { min-width: 4.5rem; }
.auswertung .summe { background: var(--blau-hell) !important; font-weight: bold; }
.auswertung .leer { color: var(--rahmen); }
.auswertung > tfoot > tr > th { border-top: 2px solid var(--anthrazit); background: #F7F8F9; }

.meldung { background: #fff; border: 1px solid var(--linie); border-radius: 3px; margin-bottom: 16px; }
.meldung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.meldung-positionen { border-width: 0; }
/* Ab Tablet feste Spaltenbreiten: Menge, Stand und Bestellung stehen in allen Meldungen untereinander.
   Am Handy nicht, sonst bliebe für den Artikelnamen kaum Platz. */
@media (min-width: 576px) {
  .meldung-positionen { table-layout: fixed; }
  .meldung-positionen th:nth-child(2) { width: 6.5rem; }
  .meldung-positionen th:nth-child(3) { width: 40%; }
  .meldung-positionen th:nth-child(4) { width: 9rem; }
}
.meldung-positionen > thead > tr > th { background: #fff; }
/* Bestellung: die Tabellen je Lieferstandort mit gleichen Spalten, damit sie untereinander stehen. */
@media (min-width: 768px) {
  .bestell-positionen { width: 100%; table-layout: fixed; }
  .bestell-positionen th:nth-child(1) { width: 8rem; }
  .bestell-positionen th:nth-child(3) { width: 9rem; }
  .bestell-positionen th:nth-child(4) { width: 4.5rem; }
  .bestell-positionen th:nth-child(5) { width: 28%; }
  .bestell-positionen th:nth-child(6) { width: 24%; }
}

/* Plus/Minus neben dem Mengenfeld, große Ziele fürs Tablet (Plan.md 10.5). */
.menge-steuerung { display: flex; align-items: center; gap: 0; }
.menge-steuerung .btn {
  min-width: 2.6rem; min-height: 2.6rem; font-size: 1.25rem; line-height: 1;
  --bs-btn-color: var(--blau); --bs-btn-border-color: var(--rahmen); --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--blau-dunkel); --bs-btn-hover-bg: var(--blau-hell); --bs-btn-hover-border-color: var(--rahmen);
}
.menge-steuerung .btn[data-schritt="-1"] { border-radius: 3px 0 0 3px; }
.menge-steuerung .btn[data-schritt="1"] { border-radius: 0 3px 3px 0; }
.menge-steuerung input {
  width: 4.2rem; min-height: 2.6rem; font-size: 1.1rem; text-align: center; font-variant-numeric: tabular-nums;
  border-radius: 0; border-left: 0; border-right: 0;
}
.menge-steuerung .btn-sm { min-height: 2.6rem; font-size: .8125rem; margin-left: 8px; border-radius: 3px; --bs-btn-border-color: var(--linie); }
.menge-steuerung input:only-child { border-left: 1px solid var(--rahmen); border-right: 1px solid var(--rahmen); border-radius: 3px; }

.sticky-aktionen {
  position: sticky; bottom: 0; z-index: 10;
  background: #fff; border: 1px solid var(--linie); border-radius: 3px; padding: 12px 16px; margin-top: 16px;
}

@media print {
  .seitenleiste, .kopf-ohne-menue, .sticky-aktionen, .no-print, .hilfe-link { display: none !important; }
  body.mit-menue { padding: 0; }
  body { background: #fff; }
  .inhalt { padding: 0; }
}

/* Einkauf: abgelehnte Positionen bleiben bis zur nächsten Bestellung ausgegraut sichtbar. */
.zeile-abgelehnt > td { color: var(--bs-secondary-color); background-color: var(--bs-tertiary-bg); }

/* ---------- Tablet: Menü als schmales Symbolband ---------- */
@media (max-width: 991.98px) {
  :root { --menue-breite: 76px; }
  .seitenleiste .marke { flex-direction: column; gap: 4px; padding: 0 8px; }
  .seitenleiste .produkt { font-size: .75rem; text-align: center; }
  .seitenleiste .testuhr { margin: 0 4px; font-size: .625rem; white-space: normal; text-align: center; }
  .menue .gruppe { height: 1px; padding: 0; margin: 8px 12px; background: #4A5157; font-size: 0; }
  .menue a { flex-direction: column; gap: 3px; padding: 9px 2px; font-size: .75rem; text-align: center; white-space: normal; line-height: 1.2; border-left-width: 3px; position: relative; }
  .menue .zahl { position: absolute; top: 4px; right: 6px; margin: 0; }
  .untermenue { display: none; }
  .konto summary { flex-direction: column; gap: 3px; padding: 8px 2px; font-size: .625rem; text-align: center; }
  .konto-menue a, .konto-menue button { padding: 6px 8px; font-size: .75rem; text-align: center; }
  .inhalt { padding: 16px; }
}

/* ---------- Handy: Kopfzeile oben, Menü als Leiste unten ---------- */
@media (max-width: 575.98px) {
  body.mit-menue { padding-left: 0; padding-bottom: var(--leiste-hoehe); }
  .seitenleiste {
    position: static; width: auto; flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: 6px 10px; padding: 8px 12px; overflow: visible;
  }
  .seitenleiste .marke { flex-direction: row; padding: 0; gap: 8px; }
  .seitenleiste .app-symbol { width: 24px; height: 24px; }
  .seitenleiste .produkt { font-size: .875rem; }
  .seitenleiste .testuhr { margin: 0; }
  .menue {
    position: fixed; inset: auto 0 0 0; z-index: 1030; flex-direction: row; overflow-x: auto;
    background: var(--anthrazit); border-top: 1px solid #4A5157; scrollbar-width: none;
  }
  .menue .nur-breit { display: none; }
  .menue .gruppe { display: none; }
  .menue a { flex: 1 0 64px; border-left: 0; border-top: 3px solid transparent; padding: 7px 2px; }
  .menue a[aria-current="page"] { border-top-color: #fff; }
  .konto { margin: 0 0 0 auto; border: 0; padding: 0; position: relative; }
  .konto summary { flex-direction: row; padding: 4px 6px; font-size: .75rem; max-width: 40vw; }
  .konto summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .konto-menue { position: absolute; right: 0; top: 100%; z-index: 1040; min-width: 200px; background: var(--anthrazit); border: 1px solid #4A5157; border-radius: 3px; padding: 4px 0; }
  .konto-menue a, .konto-menue button { text-align: left; padding: 8px 14px; font-size: .8125rem; }
  .konto-menue .nur-handy { display: block; }
  .inhalt { padding: 12px; }
  .sticky-aktionen { bottom: var(--leiste-hoehe); padding: 8px 10px; flex-wrap: nowrap !important; }
  .sticky-aktionen .btn { flex: 1 1 0; font-size: .875rem; padding: 8px 6px; white-space: normal; line-height: 1.2; }
  .filterzeile .form-select { flex: 1 1 140px; }

  .menge-steuerung .btn { min-width: 2.5rem; min-height: 2.5rem; }
  .menge-steuerung input { width: 3.2rem; min-height: 2.5rem; }
  /* Lange Wörter („Beschriftungsband“) dürfen umbrechen, sonst wird die Tabelle zu breit (Testbericht T14). */
  .artikel-zeile td:first-child { overflow-wrap: break-word; hyphens: auto; }
}

/* ---------- Scan-Modus auf „Mein Standort“ (Plan.md Frage 23) ---------- */
.scanner { width: min(560px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 16px; border: 0; border-radius: 4px; }
.scanner::backdrop { background: rgba(0, 0, 0, .6); }
.scanner video { display: block; width: 100%; max-height: 45dvh; object-fit: cover; background: #000; border-radius: 3px; }
.scan-treffer > td { background-color: var(--gelb-hell) !important; }

/* Handy: Hinweiskästen kompakter, damit über der Artikelliste nicht der ganze Bildschirm voll ist (Sichtprüfung 25.10.). */
@media (max-width: 575px) {
  .alert { padding: .5rem .75rem; font-size: .875rem; margin-bottom: .75rem; }
}

/* Auswertung und Sortiment „Alle Praxen“: Beim Querscrollen bleibt der Artikelname stehen (Fable-Designprüfung 25.10.).
   Die Kategorie-Zeile reicht über alle Spalten; fest steht deshalb nur ihr Name. */
.fest-erste-spalte th:first-child, .fest-erste-spalte td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--linie); }
.fest-erste-spalte thead th:first-child { background: #F7F8F9; }
.fest-erste-spalte > tfoot > tr > th:first-child { background: #F7F8F9; }
.fest-erste-spalte .kategorie-kopf th { position: static; box-shadow: inset 4px 0 0 var(--blau); }
.fest-erste-spalte .kategorie-kopf th > span { position: sticky; left: .625rem; }

/* Reiter „Alle Praxen | Sulgen | …“ über dem Sortiment; am Handy waagerecht wischbar. */
.reiter { display: flex; gap: 2px; overflow-x: auto; border-bottom: 2px solid var(--linie); scrollbar-width: thin; }
.reiter a { padding: .5rem .875rem; white-space: nowrap; color: var(--anthrazit); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.reiter a:hover { background: var(--blau-hell); }
.reiter a[aria-current="page"] { color: var(--blau-dunkel); font-weight: 600; border-bottom-color: var(--blau); }

/* Sortiment „Alle Praxen“: fester Kopf und feste erste Spalte, Zelle mit Haken und Sollmenge (Vorschlag Sollmengen 25.10.). */
.matrix-rahmen { max-height: calc(100vh - 16rem); min-height: 20rem; overflow: auto; border: 1px solid var(--linie); background: #fff; }
.matrix { width: auto; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: #F7F8F9; white-space: normal; min-width: 7rem; }
.matrix th:first-child, .matrix td:first-child { min-width: 16rem; max-width: 22rem; }
.matrix thead th:first-child { z-index: 3; }
.matrix td[data-zelle] { white-space: nowrap; }
.matrix .zelle-bearbeiten { display: inline-flex; align-items: center; gap: 6px; }
.matrix .zelle-bearbeiten input[type=number] { width: 4.25rem; }
.matrix .zelle-lesen { display: none; }
.matrix td.geaendert { background: #FFF6D6; }
@media (max-width: 991px) {
  /* Tablet: schmalere Artikelspalte, damit mehr als zwei Praxen nebeneinander passen. */
  .matrix th:first-child, .matrix td:first-child { min-width: 11rem; max-width: 14rem; }
  .matrix thead th { min-width: 6rem; }
}
@media (max-width: 575px) {
  .matrix .zelle-bearbeiten, .matrix-speichern { display: none !important; }
  .matrix .zelle-lesen { display: inline; }
  .matrix th:first-child, .matrix td:first-child { min-width: 10rem; }
}

/* Lieferungen am Handy: jede Position als Karte statt fünf Spalten (die Tabelle war 460 px breit, Vermerk außerhalb des Bildschirms; Simulation 2). */
@media (max-width: 575px) {
  .liefer-tabelle { width: 100%; }
  .liefer-tabelle thead { display: none; }
  .liefer-tabelle tr { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 6px 10px; padding: 10px 8px; border-bottom: 1px solid var(--linie); }
  .liefer-tabelle td { display: block; border: 0; padding: 0; }
  .liefer-tabelle td:nth-child(1) { grid-row: 1 / span 2; }
  .liefer-tabelle td:nth-child(2) { grid-column: 2 / 4; }
  .liefer-tabelle td:nth-child(3) { grid-column: 2; text-align: left !important; align-self: center; }
  .liefer-tabelle td:nth-child(3)::before { content: "Erwartet: "; color: var(--grau); font-size: .875rem; }
  .liefer-tabelle td:nth-child(4) { grid-column: 3; }
  .liefer-tabelle td:nth-child(5) { grid-column: 2 / 4; }
}