/* Design nach dem Corporate Design der Schichtplanung („Regiodocs Hub“), Startvariante B
   (Schichtplanung/Konzept/design/Corporate_Design.md, Tokens aus src/Regiodocs.Hub.Web/wwwroot/css/tokens.css);
   Beschreibung in Dokumentation/Design-Grundlagen.md.
   Dunkle Seitenleiste, helle Arbeitsfläche. Grün UI = Hauptaktion, aktiver Eintrag, Auswahl, Fokus. Amber = Aufmerksamkeit
   (Zähler, „bitte prüfen“). Blau = nur Links und Info. Rot/Gelb (Ampel) = Fehler, Warnung, BTM. „Erledigt“ = Anthrazit mit Haken.
   Farbwerte stehen NUR im Token-Block :root unten; der Rest der Datei nutzt var(--rd-…). */

/* Inter (SIL OFL 1.1, Datei und Lizenz aus dem Regiodocs Hub), lokal aus wwwroot/lib/inter: kein Abruf bei Dritten (DSGVO).
   Source Sans 3 (wwwroot/lib/source-sans-3) wird nicht mehr eingebunden. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../lib/inter/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../lib/inter/InterVariable-Italic.woff2") format("woff2");
}

:root {
  /* ===== Tokens (Namen und Werte wie tokens.css des Hub; „RegioStock:“ = Ergänzung ohne Entsprechung in der Vorlage) ===== */
  /* Flächen */
  --rd-flaeche: #FFFFFF;              /* Karten, Tabellen, Formulare */
  --rd-flaeche-hell: #F4F5F4;         /* Seitenhintergrund, Tabellenköpfe */
  --rd-flaeche-hover: #F8FAF5;        /* Zeile/Eintrag unter dem Mauszeiger */
  --rd-flaeche-auswahl: #F3F8EA;      /* ausgewählte Zeile (Menge eingetragen, wird bestellt, aufgeklappt) */
  --rd-weiss: #FFFFFF;
  /* Text */
  --rd-text: #2B2D2F;                 /* Anthrazit */
  --rd-text-gedaempft: #5F6368;       /* Graphit: Nebentexte, Beschriftungen */
  --rd-text-hell: #FFFFFF;            /* Text auf dunklen und grünen Flächen */
  /* Rahmen */
  --rd-rahmen: #D5D8D6;               /* Linien, Rahmen, Trenner */
  --rd-rahmen-leicht: #ECEEEC;        /* Kategoriezeilen, graue Kennzeichen */
  --rd-rahmen-eingabe: #848A86;       /* RegioStock: Eingabefelder. Vorlage #9AA09C hat nur 2,7:1 auf Weiß, dieser 3,5:1 (≥ 3:1 für Bedienelemente) */
  /* Dunkel (Seitenleiste) */
  --rd-dunkel: #1E2022;
  --rd-dunkel-text: #E6E8E6;
  --rd-dunkel-text-gedaempft: #B8BCB9;
  --rd-dunkel-hover: rgba(255, 255, 255, 0.08);
  --rd-dunkel-trenner: rgba(255, 255, 255, 0.14);
  /* Grün */
  --rd-gruen-haus: #71A323;           /* Hausgrün: nur Akzent auf dunklem Grund, nie mit weißem Text (3,0:1) */
  --rd-gruen-ui: #4F7A14;             /* Grün UI: Hauptknöpfe, aktiver Menüpunkt, Häkchen, Fokus; weißer Text 5,1:1 */
  --rd-gruen-ui-dunkel: #3F6A0E;      /* Hover auf Grün UI */
  --rd-gruen-ui-gedrueckt: #34580B;   /* RegioStock: gedrückter Knopf (Vorlage hat keinen eigenen Wert) */
  --rd-gruen-text: #3F6A0E;           /* grüner Text auf hellem Grund */
  --rd-gruen-hell: #E8F1DA;           /* Hover umrandeter Knöpfe, gewählter Listeneintrag, „in Ordnung“ */
  /* Akzente */
  --rd-amber: #E0A030;                /* Aufmerksamkeit: Zähler, Glühbirne „Idee oder Problem melden“ */
  --rd-amber-hell: #FBEFD6;
  --rd-amber-text: #8A5A00;
  --rd-amber-dunkel-hover: rgba(224, 160, 48, 0.14); /* RegioStock: Hover des Melde-Knopfs auf der Seitenleiste */
  --rd-blau: #006EAC;                 /* nur Links und Info */
  --rd-blau-hover: #00517F;
  --rd-blau-hell: #E3EEF6;            /* RegioStock: Info-Hinweis (Wert wie --rd-pool der Vorlage) */
  /* Ampel: nur Fehler, Warnungen, BTM */
  --rd-ampel-rot: #B3261E;
  --rd-ampel-rot-hell: #FBE2E0;
  --rd-ampel-rot-text: #9B2C22;
  --rd-ampel-gelb: #F2C200;
  --rd-ampel-gelb-hell: #FFF4CC;
  --rd-ampel-gelb-text: #6B5300;
  /* Überlagerung hinter Fenstern */
  --rd-ueberlagerung: rgba(30, 32, 34, 0.45);
  --rd-ueberlagerung-kamera: rgba(30, 32, 34, 0.7); /* RegioStock: Scan-Fenster */
  /* Schalter (Bootstrap zeichnet den Knopf als SVG; Farbe darin = Graphit, im Fokus nicht Bootstrap-Blau) */
  --rd-schalter-knopf: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235F6368'/%3e%3c/svg%3e");

  /* Schrift */
  --rd-schrift: Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  --rd-gewicht-normal: 400;
  --rd-gewicht-mittel: 500;
  --rd-gewicht-halbfett: 600;
  --rd-gewicht-fett: 700;
  /* Rundungen */
  --rd-rundung-mini: 4px;
  --rd-rundung-klein: 8px;
  --rd-rundung: 10px;
  --rd-rundung-gross: 12px;
  --rd-rundung-voll: 999px;
  /* Schatten */
  --rd-schatten-1: 0 1px 2px rgba(30, 32, 34, 0.06);
  --rd-schatten-2: 0 4px 12px rgba(30, 32, 34, 0.10);

  /* Maße RegioStock */
  --menue-breite: 220px;
  --rd-tabelle-rand: 1rem;            /* Innenabstand links/rechts der ersten/letzten Tabellenspalte = Einrückung von Kartenkopf und -fuß */
  --leiste-hoehe: 64px;

  /* ===== Bootstrap auf die Tokens umstellen ===== */
  --bs-body-font-family: var(--rd-schrift);
  --bs-body-font-size: .9375rem;      /* 15 px: Inter läuft breiter und hat größere Kleinbuchstaben als Source Sans 3 (dort 16 px) */
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--rd-text);
  --bs-body-bg: var(--rd-flaeche-hell);
  --bs-emphasis-color: var(--rd-text);
  --bs-secondary-color: var(--rd-text-gedaempft);
  --bs-secondary-bg: var(--rd-rahmen-leicht);
  --bs-tertiary-bg: var(--rd-flaeche-hell);
  --bs-primary: #4F7A14; --bs-primary-rgb: 79, 122, 20;       /* = --rd-gruen-ui (Bootstrap braucht zusätzlich die RGB-Zahlen) */
  --bs-success: #4F7A14; --bs-success-rgb: 79, 122, 20;       /* = --rd-gruen-ui */
  --bs-danger: #B3261E; --bs-danger-rgb: 179, 38, 30;         /* = --rd-ampel-rot */
  --bs-warning-text-emphasis: var(--rd-ampel-gelb-text);
  --bs-link-color: #006EAC; --bs-link-color-rgb: 0, 110, 172;                 /* = --rd-blau */
  --bs-link-hover-color: #00517F; --bs-link-hover-color-rgb: 0, 81, 127;      /* = --rd-blau-hover */
  --bs-border-color: var(--rd-rahmen);
  --bs-border-radius: var(--rd-rundung-klein); --bs-border-radius-sm: var(--rd-rundung-klein); --bs-border-radius-lg: var(--rd-rundung);
  --bs-focus-ring-color: rgba(79, 122, 20, .35);
  --bs-highlight-bg: var(--rd-amber-hell);
  --bs-code-color: var(--rd-text);    /* Pfade und Spaltennamen in <code>: Textfarbe statt Bootstrap-Rosa (Durchsicht 06.11., B7) */
}

html { font-size: 16px; }
body { font-feature-settings: "cv11" 1; }   /* Inter: einstöckiges „a“ wie in der Vorlage */
/* Stufen: Text 15, Tabelle 14, klein 13, Tabellenkopf 13, Überschriften 24 / 19 / 16. Fett (700) nur für Seitentitel, Summen und Warnwörter. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: var(--rd-gewicht-halbfett); color: var(--rd-text); }
h1, .h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-weight: var(--rd-gewicht-fett); }
.h5 { font-size: 1.1875rem; }
.h6 { font-size: 1rem; }
a { color: var(--rd-blau); }
a:hover { color: var(--rd-blau-hover); }
/* Fehlernummern, Schlüssel, Pfade: lange Zeichenketten ohne Leerzeichen brechen um, statt rechts aus dem Bild zu laufen (A9). */
code, .font-monospace { overflow-wrap: anywhere; }

:focus-visible { outline: 3px solid var(--rd-gruen-ui); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: none; outline: 3px solid var(--rd-gruen-ui); outline-offset: 1px; border-color: var(--rd-gruen-ui);
}
.btn-close:focus { box-shadow: none; }
/* Auswahlknöpfe (Art der Meldung): Fokus wie überall statt Bootstrap-Schatten. */
.btn-check:focus-visible + .btn { box-shadow: none; outline: 3px solid var(--rd-gruen-ui); outline-offset: 1px; }

/* Knöpfe: Hauptaktion Grün UI mit weißem Text; umrandete Hauptknöpfe grün auf Weiß; alles andere neutral. */
.btn { --bs-btn-font-weight: var(--rd-gewicht-mittel); --bs-btn-font-size: .9375rem; }
.btn-sm { --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-font-size: 1rem; }
.btn-primary, .btn-success {
  --bs-btn-color: var(--rd-text-hell); --bs-btn-bg: var(--rd-gruen-ui); --bs-btn-border-color: var(--rd-gruen-ui);
  --bs-btn-hover-color: var(--rd-text-hell); --bs-btn-hover-bg: var(--rd-gruen-ui-dunkel); --bs-btn-hover-border-color: var(--rd-gruen-ui-dunkel);
  --bs-btn-active-color: var(--rd-text-hell); --bs-btn-active-bg: var(--rd-gruen-ui-gedrueckt); --bs-btn-active-border-color: var(--rd-gruen-ui-gedrueckt);
  font-weight: var(--rd-gewicht-halbfett);
}
.btn-outline-primary {
  --bs-btn-color: var(--rd-gruen-text); --bs-btn-border-color: var(--rd-gruen-ui); --bs-btn-bg: var(--rd-flaeche);
  --bs-btn-hover-color: var(--rd-gruen-text); --bs-btn-hover-bg: var(--rd-gruen-hell); --bs-btn-hover-border-color: var(--rd-gruen-ui-dunkel);
  --bs-btn-active-color: var(--rd-text-hell); --bs-btn-active-bg: var(--rd-gruen-ui); --bs-btn-active-border-color: var(--rd-gruen-ui);
}
.btn-outline-secondary {
  --bs-btn-color: var(--rd-text); --bs-btn-border-color: var(--rd-rahmen-eingabe); --bs-btn-bg: var(--rd-flaeche);
  --bs-btn-hover-color: var(--rd-text); --bs-btn-hover-bg: var(--rd-flaeche-hell); --bs-btn-hover-border-color: var(--rd-text-gedaempft);
  --bs-btn-active-color: var(--rd-text); --bs-btn-active-bg: var(--rd-rahmen-leicht); --bs-btn-active-border-color: var(--rd-text-gedaempft);
}
.btn-danger {
  --bs-btn-color: var(--rd-text-hell); --bs-btn-bg: var(--rd-ampel-rot); --bs-btn-border-color: var(--rd-ampel-rot);
  --bs-btn-hover-color: var(--rd-text-hell); --bs-btn-hover-bg: var(--rd-ampel-rot-text); --bs-btn-hover-border-color: var(--rd-ampel-rot-text);
  --bs-btn-active-color: var(--rd-text-hell); --bs-btn-active-bg: var(--rd-ampel-rot-text); --bs-btn-active-border-color: var(--rd-ampel-rot-text);
}
.btn-outline-danger {
  --bs-btn-color: var(--rd-ampel-rot-text); --bs-btn-border-color: var(--rd-ampel-rot); --bs-btn-bg: var(--rd-flaeche);
  --bs-btn-hover-color: var(--rd-ampel-rot-text); --bs-btn-hover-bg: var(--rd-ampel-rot-hell); --bs-btn-hover-border-color: var(--rd-ampel-rot);
  --bs-btn-active-color: var(--rd-text-hell); --bs-btn-active-bg: var(--rd-ampel-rot); --bs-btn-active-border-color: var(--rd-ampel-rot);
}
/* Gesperrt: grau statt blass-grün, damit niemand einen gesperrten Knopf für einen aktiven hält (wie .hub-knopf:disabled). */
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  --bs-btn-disabled-color: var(--rd-text-gedaempft); --bs-btn-disabled-bg: var(--rd-flaeche-hell);
  --bs-btn-disabled-border-color: var(--rd-rahmen); --bs-btn-disabled-opacity: 1;
}
.form-control, .form-select { border-color: var(--rd-rahmen-eingabe); background-color: var(--rd-flaeche); }
.form-control:focus, .form-select:focus { background-color: var(--rd-flaeche); }   /* Bootstrap färbt sonst hellgrau */
/* Auswahlfelder: Pfeil näher an den Rand (6 px Luft zum Text bleiben), damit lange Wahlen mit Inter nicht abgeschnitten werden. */
.form-select { padding-right: 1.875rem; background-position: right .5rem center; }
/* 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: var(--rd-flaeche); --bs-card-cap-bg: var(--rd-flaeche); --bs-card-border-radius: var(--rd-rundung); --bs-card-inner-border-radius: calc(var(--rd-rundung) - 1px); }
.form-check-input { border-color: var(--rd-rahmen-eingabe); background-color: var(--rd-flaeche); }
.form-check-input:checked { background-color: var(--rd-gruen-ui); border-color: var(--rd-gruen-ui); }
.form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: var(--rd-schalter-knopf); }
.list-group {
  --bs-list-group-active-bg: var(--rd-gruen-hell); --bs-list-group-active-color: var(--rd-text); --bs-list-group-active-border-color: var(--rd-rahmen);
  --bs-list-group-action-hover-bg: var(--rd-flaeche-hover); --bs-list-group-action-active-bg: var(--rd-flaeche-auswahl);
  --bs-list-group-border-radius: var(--rd-rundung);
}
/* Gewählter Eintrag wie in der Vorlage: helle grüne Fläche, Balken links, halbfett (nicht nur Farbe). */
.list-group-item.active { box-shadow: inset 4px 0 0 var(--rd-gruen-ui); font-weight: var(--rd-gewicht-halbfett); }

/* Hinweiskästen: Info blau, Erfolg grün hell, Warnung Ampel-Gelb, Fehler Ampel-Rot – immer mit Text. */
.alert { --bs-alert-border-radius: var(--rd-rundung); }
.alert-info { --bs-alert-color: var(--rd-blau-hover); --bs-alert-bg: var(--rd-blau-hell); --bs-alert-border-color: var(--rd-blau); --bs-alert-link-color: var(--rd-blau-hover); }
.alert-success { --bs-alert-color: var(--rd-gruen-text); --bs-alert-bg: var(--rd-gruen-hell); --bs-alert-border-color: var(--rd-gruen-ui); --bs-alert-link-color: var(--rd-gruen-text); }
.alert-warning { --bs-alert-color: var(--rd-ampel-gelb-text); --bs-alert-bg: var(--rd-ampel-gelb-hell); --bs-alert-border-color: var(--rd-ampel-gelb); --bs-alert-link-color: var(--rd-ampel-gelb-text); }
.alert-danger { --bs-alert-color: var(--rd-ampel-rot-text); --bs-alert-bg: var(--rd-ampel-rot-hell); --bs-alert-border-color: var(--rd-ampel-rot); --bs-alert-link-color: var(--rd-ampel-rot-text); }
.text-bg-info { color: var(--rd-blau-hover) !important; background-color: var(--rd-blau-hell) !important; }
.text-bg-warning { color: var(--rd-amber-text) !important; background-color: var(--rd-amber-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(--rd-amber-hell); color: var(--rd-amber-text); font-size: .75rem; font-weight: var(--rd-gewicht-fett); padding: 2px 8px; border-radius: var(--rd-rundung-mini); }

.seitenleiste {
  position: fixed; inset: 0 auto 0 0; z-index: 1030; width: var(--menue-breite);
  display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--rd-dunkel-trenner) transparent;
  background: var(--rd-dunkel); color: var(--rd-dunkel-text); padding: 16px 0 12px;
}
.seitenleiste :focus-visible { outline-color: var(--rd-weiss); outline-offset: -3px; }
.seitenleiste .marke { display: flex; align-items: center; gap: 10px; padding: 0 16px; text-decoration: none; }
.seitenleiste .produkt { color: var(--rd-text-hell); font-weight: var(--rd-gewicht-fett); font-size: 1.0625rem; letter-spacing: -.01em; }
.seitenleiste .testuhr { margin: 0 16px; }
/* Ist das Menü höher als das Fenster (Untermenü „Verwaltung“ offen), rollt nur die Menüliste; Marke oben, „Idee oder Problem melden“
   und Konto unten bleiben stehen (Durchsicht 06.11., A7). Das Menü (Liste plus Melden-Knopf) ist aber nie niedriger als 14 rem, also
   mindestens drei bis vier Menüpunkte plus Knopf. Reicht die Fensterhöhe dafür nicht (Handy quer, starker Zoom, offenes Konto-Menü),
   rollt die ganze Seitenleiste; so bleibt jeder Menüpunkt und das ganze Konto-Menü erreichbar, und nichts überlagert sich (Review M1). */
.menue { display: flex; flex-direction: column; flex: 1 0 14rem; min-height: 14rem; }
.menue-liste {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--rd-dunkel-trenner) transparent;
}
.menue .gruppe { color: var(--rd-dunkel-text-gedaempft); font-size: .6875rem; font-weight: var(--rd-gewicht-halbfett); letter-spacing: .08em; text-transform: uppercase; padding: 14px 16px 4px; }
.menue a {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px;
  color: var(--rd-dunkel-text); text-decoration: none; border-left: 4px solid transparent; white-space: nowrap;
  font-size: .9375rem; font-weight: var(--rd-gewicht-mittel);
}
.menue a:hover { background: var(--rd-dunkel-hover); color: var(--rd-text-hell); }
/* Aktiv: Grün UI mit weißem Text (5,1:1), Hausgrün-Balken links, halbfett – nicht nur über die Farbe erkennbar. */
.menue a[aria-current="page"] { background: var(--rd-gruen-ui); color: var(--rd-text-hell); border-left-color: var(--rd-gruen-haus); font-weight: var(--rd-gewicht-halbfett); }
/* Zähler: Amber mit dunkler Schrift (6,1:1), wie in der Vorlage. */
.menue .zahl {
  margin-left: auto; min-width: 1.6em; text-align: center; background: var(--rd-amber); color: var(--rd-text);
  font-size: .6875rem; font-weight: var(--rd-gewicht-fett); line-height: 1.45; padding: 1px 6px; border-radius: var(--rd-rundung-voll);
}
.untermenue a { padding: 6px 16px 6px 46px; font-size: .8125rem; font-weight: var(--rd-gewicht-normal); }
.untermenue a[aria-current="page"] { background: var(--rd-dunkel-hover); border-left-color: var(--rd-gruen-haus); font-weight: var(--rd-gewicht-halbfett); }

.konto { margin-top: auto; border-top: 1px solid var(--rd-dunkel-trenner); padding-top: 8px; }
.konto summary { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; list-style: none; font-size: .8125rem; }
/* Mailadresse einzeilig mit Auslassung; ganz steht sie im title (B11). */
.konto summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto summary::-webkit-details-marker { display: none; }
.konto summary:hover { background: var(--rd-dunkel-hover); }
.konto-menue a, .konto-menue button {
  display: block; width: 100%; padding: 6px 16px 6px 46px; color: var(--rd-dunkel-text); text-decoration: none;
  background: none; border: 0; text-align: left; font-size: .8125rem;
}
.konto-menue a:hover, .konto-menue button:hover { background: var(--rd-dunkel-hover); color: var(--rd-text-hell); }
.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: var(--rd-flaeche); border-bottom: 1px solid var(--rd-rahmen); }
.kopf-ohne-menue .produkt { font-weight: var(--rd-gewicht-fett); color: var(--rd-text); padding-left: 14px; border-left: 1px solid var(--rd-rahmen); }
.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: .8125rem; color: var(--rd-text-gedaempft); }
/* Schmale Formulare (Passwort ändern) so breit wie die Anmeldung (~376 px), Etiketten bleiben einzeilig (B13). */
.formular-schmal { max-width: 23.5rem; }

/* 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: var(--rd-flaeche); --bs-table-border-color: var(--rd-rahmen); --bs-table-hover-bg: var(--rd-flaeche-hover);
  width: auto; max-width: 100%; border: 1px solid var(--rd-rahmen);
  font-size: .875rem; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.table.w-100, .card .table { width: 100%; }
/* Einheitlicher Rand: Text der ersten und letzten Spalte steht so weit vom Tabellen- bzw. Kartenrand (und vom farbigen Balken
   links) wie Kartenkopf, Knöpfe und Hinweise darunter – auch bei randlosen .table-sm in Karten (Projektleitung 05.11.). */
.table > :not(caption) > tr > :first-child { padding-left: var(--rd-tabelle-rand); }
.table > :not(caption) > tr > :last-child { padding-right: var(--rd-tabelle-rand); }
.card { --bs-card-spacer-x: var(--rd-tabelle-rand); --bs-card-cap-padding-x: var(--rd-tabelle-rand); }
.card .table { border-width: 0; }
/* Tabellenkopf wie in der Vorlage: ruhig, gedämpft, ohne Farbe. */
.table > thead > tr > th { background: var(--rd-flaeche-hell); color: var(--rd-text-gedaempft); font-size: .8125rem; font-weight: var(--rd-gewicht-halbfett); white-space: nowrap; vertical-align: bottom; }
.table-responsive { max-width: 100%; }
/* Kategorie- und Lagerort-Überschriften: graue Zwischenzeile (Blockkopf der Vorlage) mit Anthrazit-Balken links und Linie oben,
   Versalien halbfett – hebt sich durch Fläche, Balken und Schriftart von den weißen Artikelzeilen ab, ohne Blau oder Grün. */
.kategorie-kopf th {
  background: var(--rd-rahmen-leicht) !important; color: var(--rd-text); font-size: .8125rem; font-weight: var(--rd-gewicht-fett);
  text-transform: uppercase; letter-spacing: .06em; padding: .875rem .625rem .375rem;
  border-top: 2px solid var(--rd-text-gedaempft); box-shadow: inset 4px 0 0 var(--rd-text);
}
input[type=number] { font-variant-numeric: tabular-nums; }

/* Zeile mit eingetragener Menge = ausgewählt (Vorlage: Grün hell für ausgewählte Zeilen): helle Fläche, Balken in Grün UI,
   Menge halbfett – erkennbar auch ohne Farbe an der Zahl im Feld und am Zähler „… eingetragen“. */
.artikel-zeile td { vertical-align: middle; }
.artikel-zeile.hat-menge > td { background-color: var(--rd-flaeche-auswahl); }
.artikel-zeile.hat-menge > td:first-child { box-shadow: inset 4px 0 0 var(--rd-gruen-ui); }
.artikel-zeile.hat-menge .menge-steuerung input { font-weight: var(--rd-gewicht-halbfett); }

/* Hilfe: „?“ an Überschriften (ruhig in Graphit, als Link blau beim Darüberfahren), 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(--rd-text-gedaempft); color: var(--rd-text-gedaempft); background: var(--rd-flaeche);
  font-size: .8125rem; font-weight: var(--rd-gewicht-fett); text-decoration: none; vertical-align: middle;
}
a.hilfe-link:hover { border-color: var(--rd-blau); color: var(--rd-blau); }
.hilfe section { background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: 16px 20px; margin-bottom: 20px; scroll-margin-top: 16px; }
.hilfe h2 { font-size: 1.125rem; margin-bottom: .75rem; }
.hilfe h3 { font-size: 1rem; margin-top: 1.25rem; }
.hilfe dt { margin-top: .5rem; font-weight: var(--rd-gewicht-halbfett); }
/* 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(--rd-text); }
.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; }
/* Sprungmarken: Etikett links, die Links in einer eigenen Spalte daneben; umbrochene Zeilen beginnen unter dem ersten Link (C1). */
.hilfe-inhalt div { display: flex; gap: 14px; }
.hilfe-inhalt strong { flex: 0 0 6.5rem; }
.hilfe-inhalt span { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }

/* Formulare auf weißer Fläche statt frei auf dem grauen Grund. */
.flaeche { background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: 16px; }
/* Leere Fehlerzusammenfassung (asp-validation-summary ohne Fehler) soll keine Lücke über dem Formular lassen. */
.validation-summary-valid { display: none; }
.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: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: 16px; margin-bottom: 12px; }
/* Ist das Formular zugleich eine Bootstrap-Zeile (.row.g-2), zogen deren negative Ränder die Karte 4 px über die Liste darüber hinaus
   und unter die Zwischenüberschrift („Neuer Benutzer“, „Standort bearbeiten: …“). Karte bündig, Abstand wie bei „Konten bei …“ (B4). */
.row > .flaeche > form.row {
  margin: 0 0 12px; padding: calc(16px - var(--bs-gutter-y)) calc(16px - var(--bs-gutter-x) * .5) 16px;
}
/* Kennzeichen (Bootstrap-Badges) wie die Chips der Vorlage: ruhige Flächen, immer mit Text.
   success = „in Ordnung“ (grün hell), primary = neutral umrandet (z. B. „bestellt“, „Idee“), secondary = grau,
   warning = Amber (Aufmerksamkeit), info = Blau hell (Info), danger = Ampel-Rot (Fehler, BTM, Problem). */
.badge { font-weight: var(--rd-gewicht-halbfett); font-size: .75rem; border-radius: var(--rd-rundung-mini); border: 1px solid transparent; }
.badge.text-bg-success { color: var(--rd-gruen-text) !important; background-color: var(--rd-gruen-hell) !important; }
.badge.text-bg-primary { color: var(--rd-text) !important; background-color: var(--rd-flaeche) !important; border-color: var(--rd-rahmen-eingabe); }
.badge.text-bg-secondary { color: var(--rd-text) !important; background-color: var(--rd-rahmen-leicht) !important; }
.badge.text-bg-warning { border-color: var(--rd-amber); }
.badge.text-bg-danger { color: var(--rd-ampel-rot-text) !important; background-color: var(--rd-ampel-rot-hell) !important; }
.badge.text-bg-light { color: var(--rd-text) !important; background-color: var(--rd-flaeche) !important; border-color: var(--rd-rahmen); }
/* Kopf eines Kastens in Ampel-Rot (BTM-Bedarf): weiße Schrift auf Rot, 6,5:1. */
.card-header.text-bg-danger { color: var(--rd-text-hell) !important; background-color: var(--rd-ampel-rot) !important; }

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

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

/* ---------- Allgemeine Regeln für Tabellen (Durchsicht 06.11.) ---------- */
/* Listen mit Freitext (Protokoll, Benutzer, Bestellung, Anfragen): unter 992 px je Zeile eine Karte, statt dass die Spalten auf
   Silbenbreite zusammenfallen und Zeilen Hunderte Pixel hoch werden (A1–A3). Muster wie Einkauf-Prüfseite und Ideen-Liste:
   Feldtitel aus data-titel (nur CSS, die Suche findet sie nicht), .karte-titel steht oben und halbfett, .kompakt-Zellen stehen
   nebeneinander, .karte-aktion rechts. Nur am Bildschirm; gedruckt bleibt es eine Tabelle. */
@media screen and (max-width: 991.98px) {
  .tabelle-karten { width: 100%; border-width: 0; background: transparent; --rd-tabelle-rand: 0; }
  .tabelle-karten > thead { display: none; }
  .tabelle-karten > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 8px; padding: 10px 12px;
    background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung);
  }
  .tabelle-karten > tbody > tr > td {
    display: block; flex: 1 1 100%; min-width: 0; padding: 0; border: 0; text-align: left !important;
    background: transparent; --bs-table-bg: transparent; box-shadow: none; overflow-wrap: anywhere;
  }
  .tabelle-karten > tbody > tr > td.kompakt { flex: 0 1 auto; }
  .tabelle-karten > tbody > tr > td.karte-titel { order: -1; font-weight: var(--rd-gewicht-halbfett); }
  .tabelle-karten > tbody > tr > td.karte-aktion { flex: 0 0 auto; margin-left: auto; }
  .tabelle-karten > tbody > tr > td[data-titel]::before {
    content: attr(data-titel); display: block; font-size: .75rem; font-weight: var(--rd-gewicht-normal); color: var(--rd-text-gedaempft);
  }
  /* .karten-zweispaltig: kurze Angaben in zwei gleich breiten Spalten untereinander (Protokoll: Zeit | Wer, Objekt | Aktion),
     .ganze-breite darunter über beide Spalten. */
  .tabelle-karten.karten-zweispaltig > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabelle-karten.karten-zweispaltig > tbody > tr > td.ganze-breite { grid-column: 1 / -1; }
}
/* Rolltabellen (Artikelstamm, Bestellungen, Auswertung): Unter 992 px rollen sie waagerecht in ihrem Rahmen. Dann bricht keine Zelle
   um, sonst presst der Browser jede Spalte auf Wortbreite und die Zeilen werden hoch und leer (A4). Lange Freitexte (.umbruch)
   bleiben umbrechbar, sind aber mindestens 14rem und höchstens 24rem breit. Die feste erste Spalte (Auswertung) bleibt schmal genug,
   dass daneben noch Zahlen zu sehen sind. */
@media screen and (max-width: 991.98px) {
  .rolltabelle > :not(caption) > tr > * { white-space: nowrap; }
  .rolltabelle > :not(caption) > tr > .umbruch { white-space: normal; min-width: 14rem; max-width: 24rem; }
  .rolltabelle.fest-erste-spalte > :not(caption) > tr:not(.kategorie-kopf) > :first-child { white-space: normal; min-width: 12rem; max-width: 16rem; }
}
@media screen and (max-width: 575.98px) {
  .rolltabelle.fest-erste-spalte > :not(caption) > tr:not(.kategorie-kopf) > :first-child { min-width: 9.5rem; max-width: 11rem; }
}

/* Leerzustände („Keine offenen Anfragen.“, „Noch keine Bestellungen.“, kein Treffer): neutral grau auf weißer Fläche, ohne farbigen
   Rahmen; Blau bleibt echten Hinweisen vorbehalten (B6). */
.leerzustand {
  background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung);
  color: var(--rd-text-gedaempft); padding: 12px 16px; margin-bottom: 1rem;
}
.leerzustand a { color: var(--rd-blau); }

/* Protokoll ab 992 px und im Druck: „Details“ bekommt die Restbreite, „Objekt“ darf umbrechen (lange Mailadressen; A1, Review M3). */
@media print, (min-width: 992px) {
  .protokoll .protokoll-details { min-width: 14rem; max-width: 40rem; overflow-wrap: anywhere; }
  .protokoll .protokoll-objekt { min-width: 7.5rem; overflow-wrap: anywhere; }
}

/* Stand in Worten (Letzte Meldungen, Artikelwünsche, Ideen): offen weiß umrandet, läuft grau, achtung Amber,
   abgelehnt Ampel-Rot, fertig Anthrazit mit Haken (Vorlage: „erledigt“ nicht in Hausgrün). Immer mit Text. */
.stand { display: inline-block; font-size: .8125rem; font-weight: var(--rd-gewicht-halbfett); padding: 0 8px; border-radius: var(--rd-rundung-voll); border: 1px solid transparent; line-height: 1.6; }
.stand-offen { background: var(--rd-flaeche); color: var(--rd-text-gedaempft); border-color: var(--rd-rahmen-eingabe); }
.stand-laeuft { background: var(--rd-rahmen-leicht); color: var(--rd-text); }
.stand-fertig { background: var(--rd-flaeche); color: var(--rd-text); border-color: var(--rd-text); }
.stand-fertig::before { content: "✓\00a0"; content: "✓\00a0" / ""; }
.stand-achtung { background: var(--rd-amber-hell); color: var(--rd-amber-text); border-color: var(--rd-amber); }
.stand-abgelehnt { background: var(--rd-ampel-rot-hell); color: var(--rd-ampel-rot-text); border-color: var(--rd-ampel-rot-hell); }
.stand.klein { font-size: .75rem; padding: 0 6px; }

/* Einkauf: höchstens so breit wie nötig, Sprungleiste je Lieferant, freigegebene Zeilen als „ausgewählt“ 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: var(--rd-flaeche); border: 1px solid var(--rd-rahmen);
  border-left: 4px solid var(--rd-text-gedaempft); border-radius: var(--rd-rundung-klein); color: var(--rd-text); text-decoration: none;
}
.lieferantenleiste a:hover { background: var(--rd-flaeche-hover); border-color: var(--rd-gruen-ui); color: var(--rd-text); }
.buendel { border-color: var(--rd-rahmen); scroll-margin-top: 12px; }
.buendel > .card-header { background: var(--rd-flaeche); }
.buendel > .card-footer { background: var(--rd-flaeche-hell); }
.einkaufliste { border-width: 0; }
.zeile-frei > td { background-color: var(--rd-flaeche-auswahl); }
.zeile-frei > td:first-child { box-shadow: inset 4px 0 0 var(--rd-gruen-ui); }
/* Prüfseite ab 1320 px: feste Spaltenbreiten, damit „Standort“, „Menge“ usw. in allen Lieferanten-Kästen untereinander stehen
   (Durchsicht 06.11., B1, Nacharbeit). Gemessen (Inter): Zahlenspalten so schmal wie ihr Kopf („Gemeldet“ 61 px), „Soll“ so breit
   wie „Sortiment“ (sonst „Sorti-ment“), „Standort“ so breit wie das längste Kennzeichen („nach Meldeschluss“ 112 px), „Entscheidung“ für die längste
   Wahl (191 px Text + 38 px Innenabstand), „Artikel“ für Gebinde-Zeilen wie „TB-5001 · 1 Karton à 5 x 500 Blatt“ (205 px).
   Zusammen 832 px; der Rest geht an den Kommentar. Erst ab 1320 px Fenster bleiben dafür auch mit Rollleiste mindestens 12 rem
   (bei 1200 px wären es ~90 px), deshalb darunter Karten. 1366 px: Kommentar ~240–256 px, ab ~1500 px (Inhalt 1200 px) ~366 px. */
@media (min-width: 1320px) {
  .einkaufliste { table-layout: fixed; }
  .einkaufliste > thead > tr > th { white-space: normal; }
  .einkaufliste th:nth-child(1) { width: 15rem; }
  .einkaufliste th:nth-child(2) { width: 7.5rem; }
  .einkaufliste th:nth-child(3) { width: 4.5rem; }
  .einkaufliste th:nth-child(4) { width: 4.75rem; }
  .einkaufliste .spalte-menge { width: 5rem; }
  .einkaufliste .spalte-entscheidung { width: 15.25rem; }
  .einkaufliste td:nth-child(1), .einkaufliste td:nth-child(4) { overflow-wrap: break-word; hyphens: auto; }
}
/* Kalenderwoche („2026-W45“) nicht am Bindestrich trennen. */
.einkaufliste td:nth-child(2) .klein-grau { white-space: nowrap; }
/* Nur am Bildschirm (gedruckt bleibt die Tabelle, Review N1): unter 1320 px jede Position als Karte (wie Sortimentspflege und Ideen), damit Auswahl und Kommentar nicht gequetscht werden; mit
   der Seitenleiste reicht die Breite darunter für sieben lesbare Spalten nicht (B1). Feldtitel aus CSS wie bei den Lieferungen am
   Handy; Zustand „wird bestellt“ als Fläche und Balken an der ganzen Karte. */
@media screen and (max-width: 1319.98px) {
  .einkaufliste { --rd-tabelle-rand: 0; }
  .einkaufliste thead { display: none; }
  .einkaufliste tr {
    display: grid; grid-template-columns: 5rem 5rem 6.5rem minmax(0, 1fr); gap: 6px 12px; align-items: start;
    padding: 10px var(--bs-card-cap-padding-x) 12px; border-bottom: 1px solid var(--rd-rahmen);
  }
  .einkaufliste tr > td { display: block; padding: 0; border: 0; min-width: 0; background: transparent; --bs-table-bg: transparent; box-shadow: none !important; }
  .einkaufliste td:nth-child(1), .einkaufliste td:nth-child(2), .einkaufliste td:nth-child(7) { grid-column: 1 / -1; }
  /* Zahlen auf Höhe der Felder daneben (Feldtitel stehen dadurch in einer Linie). */
  .einkaufliste td:nth-child(3), .einkaufliste td:nth-child(4) { text-align: left !important; font-variant-numeric: tabular-nums; }
  .einkaufliste td:nth-child(3), .einkaufliste td:nth-child(4) { line-height: calc(1.5em + .5rem + 2px); }
  .einkaufliste td:nth-child(3)::before, .einkaufliste td:nth-child(4)::before { line-height: 1.4; }
  .einkaufliste td:nth-child(n+3)::before { display: block; font-size: .75rem; color: var(--rd-text-gedaempft); margin-bottom: 2px; }
  .einkaufliste td:nth-child(3)::before { content: "Gemeldet"; }
  .einkaufliste td:nth-child(4)::before { content: "Soll"; }
  .einkaufliste td:nth-child(5)::before { content: "Menge"; }
  .einkaufliste td:nth-child(6)::before { content: "Entscheidung"; }
  .einkaufliste td:nth-child(7)::before { content: "Kommentar an den Standort"; }
  .einkaufliste tr.zeile-frei { background: var(--rd-flaeche-auswahl); box-shadow: inset 4px 0 0 var(--rd-gruen-ui); }
  .einkaufliste tr.zeile-abgelehnt { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
}
@media screen and (max-width: 575.98px) {
  .einkaufliste tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .einkaufliste td:nth-child(6) { grid-column: 1 / -1; }
}

/* 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(--rd-flaeche-hell) !important; font-weight: var(--rd-gewicht-fett); }
.auswertung .leer { color: var(--rd-rahmen-eingabe); }
.auswertung > tfoot > tr > th { border-top: 2px solid var(--rd-text); background: var(--rd-flaeche-hell); }

.meldung { background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); margin-bottom: 16px; overflow: hidden; }
.meldung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px var(--rd-tabelle-rand); border-bottom: 1px solid var(--rd-rahmen); }
.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: var(--rd-flaeche); }
/* Bestellung: die Tabellen je Lieferstandort mit gleichen Spalten, damit sie untereinander stehen. */
/* Unter 992 px ist jede Position eine Karte (.tabelle-karten). Ab 992 px nur Anteile statt fester rem-Breiten: Bei 992 px Fenster
   blieben der Bezeichnung sonst rund 80 px (Durchsicht 06.11., A2); so hat sie dort ~185 px und bei 1200 px ~240 px. */
@media (min-width: 992px) {
  .bestell-positionen { width: 100%; table-layout: fixed; }
  .bestell-positionen th:nth-child(1) { width: 11%; }
  .bestell-positionen th:nth-child(3) { width: 13%; }
  .bestell-positionen th:nth-child(4) { width: 8%; }
  .bestell-positionen th:nth-child(5) { width: 22%; }
  .bestell-positionen th:nth-child(6) { width: 20%; }
  .bestell-positionen td:nth-child(1) { overflow-wrap: anywhere; }
  .bestell-positionen td:nth-child(2) { overflow-wrap: break-word; hyphens: auto; }
}

/* Plus/Minus neben dem Mengenfeld, große Ziele fürs Tablet (Plan.md 10.5). Neutral, damit nicht jede Zeile grüne Knöpfe trägt. */
.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(--rd-text); --bs-btn-border-color: var(--rd-rahmen-eingabe); --bs-btn-bg: var(--rd-flaeche);
  --bs-btn-hover-color: var(--rd-text); --bs-btn-hover-bg: var(--rd-flaeche-hell); --bs-btn-hover-border-color: var(--rd-rahmen-eingabe);
  --bs-btn-active-color: var(--rd-text); --bs-btn-active-bg: var(--rd-rahmen-leicht); --bs-btn-active-border-color: var(--rd-rahmen-eingabe);
}
.menge-steuerung .btn[data-schritt="-1"] { border-radius: var(--rd-rundung-klein) 0 0 var(--rd-rundung-klein); }
.menge-steuerung .btn[data-schritt="1"] { border-radius: 0 var(--rd-rundung-klein) var(--rd-rundung-klein) 0; }
.menge-steuerung input {
  width: 4.2rem; min-height: 2.6rem; font-size: 1.0625rem; text-align: center; font-variant-numeric: tabular-nums;
  border-radius: 0; border-left: 0; border-right: 0;
}
/* „Soll“/„zuletzt“ übernehmen: klein und neutral wie Plus/Minus – sonst trüge jede Zeile einen grünen Knopf (grüne Überladung). */
.menge-steuerung .btn-sm { min-height: 2.6rem; font-size: .8125rem; margin-left: 8px; border-radius: var(--rd-rundung-klein); --bs-btn-border-color: var(--rd-rahmen-eingabe); }
/* Drehpfeile im Mengenfeld aus: Plus und Minus stehen daneben, am Handy bleibt so Platz für zwei- und dreistellige Mengen. */
.menge-steuerung input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.menge-steuerung input[type=number]::-webkit-inner-spin-button, .menge-steuerung input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.menge-steuerung input:only-child { border-left: 1px solid var(--rd-rahmen-eingabe); border-right: 1px solid var(--rd-rahmen-eingabe); border-radius: var(--rd-rundung-klein); }

.sticky-aktionen {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); padding: 12px 16px; margin-top: 16px;
  box-shadow: var(--rd-schatten-2);
}

@media print {
  .seitenleiste, .kopf-ohne-menue, .sticky-aktionen, .no-print, .hilfe-link { display: none !important; }
  body.mit-menue { padding: 0; }
  body { background: var(--rd-weiss); }
  .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: 84px; }   /* Inter ist breiter als Source Sans 3: „Bestellungen“ passt erst ab 84 px in eine Zeile */
  .seitenleiste .marke { flex-direction: column; gap: 4px; padding: 0 6px; }
  .seitenleiste .produkt { font-size: .6875rem; 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: var(--rd-dunkel-trenner); font-size: 0; }
  .menue a { flex-direction: column; gap: 3px; padding: 9px 2px; font-size: .6875rem; text-align: center; white-space: normal; line-height: 1.2; border-left-width: 3px; position: relative; }
  .menue .zahl { position: absolute; top: 4px; right: 8px; 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: .6875rem; text-align: center; }
  .inhalt { padding: 16px; }
}
/* Tablet: im Symbolband nur das Personen-Symbol; die Adresse bleibt für Screenreader im Text und steht im title (B11). */
@media (min-width: 576px) and (max-width: 991.98px) {
  .konto summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Handy: Kopfzeile oben, Menü als Leiste unten ---------- */
@media (max-width: 575.98px) {
  :root { --rd-tabelle-rand: .75rem; }
  /* .kopf-umbruch: Köpfe dürfen umbrechen (schmale Formulartabellen wie „Konten bei …“ rollten am Handy nur wegen der Köpfe). */
  .table.kopf-umbruch > thead > tr > th { white-space: normal; hyphens: auto; }
  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; }
  /* Untere Leiste: „Melden“ steht fest rechts (wie bei den Praxen), die übrigen Punkte rollen daneben; ein Verlauf am rechten Rand
     der Menüliste zeigt, dass es weitergeht (.mehr-rechts setzt site.js, A8). */
  .menue {
    position: fixed; inset: auto 0 0 0; z-index: 1030; flex-direction: row; flex: none; min-height: auto;
    background: var(--rd-dunkel); border-top: 1px solid var(--rd-dunkel-trenner);
  }
  .menue-liste { flex-direction: row; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .menue-liste::-webkit-scrollbar { display: none; }
  .menue-liste.mehr-rechts::after {
    content: ""; position: sticky; right: 0; flex: 0 0 28px; margin-left: -28px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--rd-dunkel));
  }
  /* Ist die Leiste zum aktiven Punkt gerollt, ist auch links etwas verborgen. */
  .menue-liste.mehr-links::before {
    content: ""; position: sticky; left: 0; z-index: 1; flex: 0 0 28px; margin-right: -28px; pointer-events: none;
    background: linear-gradient(to left, transparent, var(--rd-dunkel));
  }
  .menue .nur-breit { display: none; }
  .menue .gruppe { display: none; }
  .menue a { flex: 1 0 66px; border-left: 0; border-top: 3px solid transparent; padding: 7px 2px; }
  .menue a[aria-current="page"] { border-top-color: var(--rd-gruen-haus); }
  .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(--rd-dunkel); border: 1px solid var(--rd-dunkel-trenner); border-radius: var(--rd-rundung-klein); padding: 4px 0; box-shadow: var(--rd-schatten-2); }
  .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: .8125rem; 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: var(--rd-rundung-gross); }
.scanner::backdrop { background: var(--rd-ueberlagerung-kamera); }
.scanner video { display: block; width: 100%; max-height: 45dvh; object-fit: cover; background: var(--rd-dunkel); border-radius: var(--rd-rundung-klein); }
.scan-treffer > td { background-color: var(--rd-amber-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: .8125rem; 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: var(--rd-flaeche); box-shadow: 1px 0 0 var(--rd-rahmen); }
.fest-erste-spalte thead th:first-child { background: var(--rd-flaeche-hell); }
.fest-erste-spalte > tfoot > tr > th:first-child { background: var(--rd-flaeche-hell); }
.fest-erste-spalte .kategorie-kopf th { position: static; box-shadow: inset 4px 0 0 var(--rd-text); }
.fest-erste-spalte .kategorie-kopf th > span { position: sticky; left: var(--rd-tabelle-rand); }

/* Reiter „Alle Praxen | Sulgen | …“ über dem Sortiment; am Handy waagerecht wischbar. Aktiv wie die Unterreiter der Vorlage. */
/* Die Grundlinie ist ein Schatten statt Rahmen plus margin-bottom: -1px am Reiter: Der überstehende Pixel erzeugte eine senkrechte
   Rollleiste, die als weißer Streifen am rechten Rand stand (B8). Verlauf in der Farbe des Seitengrunds nur, wenn rechts noch
   Reiter folgen (site.js); die Rollleiste selbst ist ausgeblendet, sonst verdeckte sie am Handy die Grundlinie. */
.reiter { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 -1px 0 var(--rd-rahmen); scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter.mehr-rechts::after {
  content: ""; position: sticky; right: 0; flex: 0 0 32px; margin-left: -32px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--rd-flaeche-hell));
}
.reiter.mehr-links::before {
  content: ""; position: sticky; left: 0; z-index: 1; flex: 0 0 32px; margin-right: -32px; pointer-events: none;
  background: linear-gradient(to left, transparent, var(--rd-flaeche-hell));
}
.reiter a { padding: .5rem .875rem; white-space: nowrap; color: var(--rd-text-gedaempft); font-weight: var(--rd-gewicht-mittel); text-decoration: none; border-bottom: 3px solid transparent; }
.reiter a:hover { color: var(--rd-text); background: var(--rd-flaeche-hover); }
.reiter a[aria-current="page"] { color: var(--rd-gruen-text); font-weight: var(--rd-gewicht-halbfett); border-bottom-color: var(--rd-gruen-ui); }

/* 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(--rd-rahmen); background: var(--rd-flaeche); }
.matrix { width: auto; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--rd-flaeche-hell); 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: var(--rd-amber-hell); }
@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%; --rd-tabelle-rand: 0; }
  .liefer-tabelle thead { display: none; }
  .liefer-tabelle tr { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 6px 10px; padding: 10px var(--bs-card-cap-padding-x, .75rem); border-bottom: 1px solid var(--rd-rahmen); }
  .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(--rd-text-gedaempft); font-size: .8125rem; }
  .liefer-tabelle td:nth-child(4) { grid-column: 3; }
  .liefer-tabelle td:nth-child(5) { grid-column: 2 / 4; }
}

/* Sortimentspflege (Einkauf → Sortiment und „Sortiment pflegen“ der Praxis, Partial _SortimentPflege). Breit eine Tabelle mit
   Eingabefeldern; am Tablet und Handy je Artikel eine Karte, damit Rufname, Lagerort und Hinweis ohne Querscrollen erreichbar
   sind. Die Feldtitel kommen dann aus data-titel (nur CSS, damit die Suche sie nicht findet). */
/* Breiten so, dass die Tabelle neben dem Menü schon bei 1200 px Fensterbreite ohne Querscrollen passt; der Artikel bricht um. */
.pflege-tabelle td.pflege-text { min-width: 8.5rem; }
/* Lagerort etwas breiter, damit „Medikamentenschrank“ ganz im Feld steht; der Artikel gibt dafür nach (B12). */
.pflege-tabelle td.pflege-ort { min-width: 11.5rem; }
.pflege-tabelle td.pflege-hinweis { min-width: 10rem; }
.pflege-tabelle td.pflege-soll { width: 5.5rem; white-space: nowrap; }
.pflege-tabelle td.pflege-soll input { width: 4.5rem; }
.pflege-tabelle > thead > tr > th:first-child { white-space: normal; width: 4.5rem; }
/* „im Sortiment“ ist hier der Normalfall (fast jede Zeile): keine grüne Fläche, nur der Balken links; der Haken trägt den Zustand. */
.pflege-tabelle .artikel-zeile.hat-menge > td { background-color: var(--rd-flaeche); }
/* „ändern“ und „ersetzen“ je Zeile: Beschriftung aus CSS wie die Feldtitel; Abstand für den Finger am Tablet. */
.zeilen-aktionen { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; }
.zeilen-aktionen a { padding: 2px 0; }
.zeilen-aktionen a::before { content: attr(data-beschriftung); }
/* Karten nur am Bildschirm (gedruckt bleibt die Tabelle, Review N1) und unter 1200 px: Zwischen 992 und 1200 px rollte die Tabelle neben der breiten Seitenleiste waagerecht (Durchsicht 06.11.). */
@media screen and (max-width: 1199.98px) {
  .pflege-tabelle { border-width: 0; background: transparent; --rd-tabelle-rand: 0; }
  .pflege-tabelle thead { display: none; }
  .pflege-tabelle tr.kategorie-kopf, .pflege-tabelle tr.kategorie-kopf th { display: block; }
  .pflege-tabelle tr.kategorie-kopf th { padding-left: 12px; }
  .pflege-tabelle tr.artikel-zeile {
    display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px;
    padding: 10px 10px 12px; background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-top: 0;
  }
  .pflege-tabelle tr.artikel-zeile > td { display: block; padding: 0; border: 0; min-width: 0; width: auto; --bs-table-bg: transparent; box-shadow: none !important; }
  .pflege-tabelle tr.artikel-zeile.hat-menge { background: var(--rd-flaeche); box-shadow: inset 4px 0 0 var(--rd-gruen-ui); }
  .pflege-tabelle .artikel-zeile.hat-menge > td { background-color: transparent; }
  .pflege-tabelle td:nth-child(1) { grid-row: 1 / span 3; padding-top: 2px; }
  .pflege-tabelle td:nth-child(1) .form-check-input { width: 1.5rem; height: 1.5rem; }
  .pflege-tabelle td:nth-child(2) { grid-column: 2 / 4; }
  .pflege-tabelle td[data-titel]::before { content: attr(data-titel); display: block; font-size: .75rem; color: var(--rd-text-gedaempft); margin-bottom: 2px; }
  .pflege-tabelle .form-control-sm { min-height: 2.25rem; font-size: .9375rem; }
}
@media screen and (max-width: 575.98px) {
  .pflege-tabelle tr.artikel-zeile { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .pflege-tabelle td:nth-child(1) { grid-row: 1 / span 5; }
  .pflege-tabelle td:nth-child(n+2) { grid-column: 2; }
}

/* ---------- „Ideen & Probleme“ (wie im Regiodocs Hub, Projektleitung 05.11.) ---------- */
/* Knopf „Idee oder Problem melden“: am PC unten in der Menüspalte direkt über dem Kontoblock (die Menüliste füllt dafür die Höhe),
   am Tablet im Symbolband, am Handy als „Melden“ in der unteren Leiste. Als Aktion erkennbar an Rand und Glühbirne in Amber
   (7,2:1 auf der Seitenleiste) und halbfetter heller Schrift; umrandet statt gefüllt, damit er nicht mit dem aktiven Menüpunkt
   (gefülltes Grün) konkurriert. */
.menue .idee-knopf {
  flex: none; margin: 8px 12px 0; padding: 8px 10px; border: 1px solid var(--rd-amber); border-radius: var(--rd-rundung-klein);
  font-size: .8125rem; font-weight: var(--rd-gewicht-halbfett); white-space: normal; line-height: 1.25; color: var(--rd-text-hell);
}
.menue .idee-knopf svg.i { color: var(--rd-amber); }
.menue .idee-knopf:hover { background: var(--rd-amber-dunkel-hover); color: var(--rd-text-hell); }
.menue .idee-knopf .kurz { display: none; }
@media (max-width: 991.98px) {
  .menue .idee-knopf { margin: 8px 6px 0; padding: 8px 2px; font-size: .6875rem; }
  .menue .idee-knopf .lang { display: none; }
  .menue .idee-knopf .kurz { display: inline; }
}
@media (max-width: 575.98px) {
  /* Untere Leiste: kein Rahmen ringsum (die Leiste ist voll), dafür Amber-Strich oben, Amber-Hauch als Fläche und Amber-Glühbirne. */
  .menue .idee-knopf { flex: 0 0 66px; margin: 0; border: 0; border-top: 3px solid var(--rd-amber); border-radius: 0; padding: 7px 2px; background: var(--rd-amber-dunkel-hover); }
}

/* Fenster: der Inhalt füllt das <dialog> ganz aus, damit ein Klick daneben (Ziel = dialog) als Klick auf den Hintergrund zählt. */
.idee-fenster { width: min(560px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 0; border: 0; border-radius: var(--rd-rundung-gross); color: var(--rd-text); box-shadow: var(--rd-schatten-2); }
.idee-fenster::backdrop { background: var(--rd-ueberlagerung); }
.idee-fenster > form { padding: 18px 20px 16px; }
.idee-arten { margin-bottom: 12px; }
.idee-arten .btn-group { flex-wrap: wrap; }
.idee-arten .btn { min-width: 5.5rem; }   /* drei Knöpfe passen auch am Handy (390 px) in eine Zeile */
.idee-zaehler { text-align: right; font-size: .8125rem; color: var(--rd-text-gedaempft); margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.idee-hinweis { background: var(--rd-amber-hell); color: var(--rd-amber-text); border-left: 4px solid var(--rd-amber); border-radius: var(--rd-rundung-klein); padding: 6px 10px; margin-bottom: 8px; font-weight: var(--rd-gewicht-halbfett); }
.idee-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media print { .idee-fenster { display: none !important; } }

/* Liste und „Meine Meldungen“ */
.ideen { max-width: 1320px; }
.ideen-kacheln { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ideen-kachel { background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung-gross); padding: 8px 14px; min-width: 9rem; color: var(--rd-text-gedaempft); font-size: .875rem; }
.ideen-kachel .zahl { display: block; font-size: 1.375rem; font-weight: var(--rd-gewicht-halbfett); line-height: 1.2; color: var(--rd-text); font-variant-numeric: tabular-nums; }
/* Aufmerksamkeit wie in der Vorlage (hub-kachel-warnung): Balken links und Zahl in Amber-Text, keine Amber-Fläche. */
.ideen-kachel.hervor { box-shadow: inset 4px 0 0 var(--rd-amber-text); color: var(--rd-amber-text); }
.ideen-kachel.hervor .zahl { color: var(--rd-amber-text); }
.ideen-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.ideen-filter label { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; color: var(--rd-text-gedaempft); }
.ideen-filter .form-select, .ideen-filter .form-control { font-size: 1rem; color: var(--rd-text); }
.ideen-filter .suche { flex: 1 1 200px; }
.ideen-sammel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ideen-sammel .form-select { width: auto; }
.ideen-tabelle td { vertical-align: top; }
.ideen-auswahl { width: 1%; }
.ideen-alle { margin: 0; }
.ideen-alle .nur-karten { display: none; }
.ideen-text { white-space: pre-line; overflow-wrap: anywhere; max-width: 42rem; }
.ideen-text.entfernt { font-style: italic; color: var(--rd-text-gedaempft); }
.ideen-seite { max-width: 9rem; font-size: .8125rem; }
.ideen-seite span { overflow-wrap: anywhere; }
/* Breiten so verteilt, dass „Text“ und „Antwort“ ähnlich viel Platz haben (vorher Antwort ~100 px, zehn Zeilen; B2). */
.ideen-textspalte { min-width: 10.5rem; }
.ideen-antwortspalte { min-width: 10.5rem; }
.ideen-von { min-width: 8rem; }
.ideen-status { white-space: nowrap; }
.ideen-status .btn { display: block; width: max-content; margin-top: 8px; }
.ideen-zeit { width: 5.5rem; }
.ideen-tabelle .stand { white-space: nowrap; }
.ideen-zeile:not(.offen) .nur-offen, .ideen-zeile.offen .nur-zu { display: none; }
/* Aufgeklappte Meldung = ausgewählte Zeile (Vorlage): helle Fläche, Balken in Grün UI; die Bearbeiten-Zeile darunter gehört dazu. */
.ideen-zeile.offen > td { background: var(--rd-flaeche-auswahl); }
.ideen-zeile.offen > td:first-child { box-shadow: inset 4px 0 0 var(--rd-gruen-ui); }
.ideen-bearbeiten > td { background: var(--rd-flaeche-auswahl); border-top: 0; }
.ideen-bearbeiten > td:first-child { box-shadow: inset 4px 0 0 var(--rd-gruen-ui); }
.ideen-felder { display: flex; flex-wrap: wrap; gap: 12px; }
.ideen-felder .form-select { width: auto; }
.ideen-antwort { flex: 1 1 320px; }
.ideen-entfernen > summary { list-style: none; }
.ideen-entfernen > summary::-webkit-details-marker { display: none; }
.ideen-rueckfrage { margin-top: 8px; padding: 10px 12px; background: var(--rd-ampel-rot-hell); border-left: 4px solid var(--rd-ampel-rot); border-radius: var(--rd-rundung-klein); color: var(--rd-ampel-rot-text); }
/* Nur am Bildschirm (gedruckt bleibt die Tabelle, Review N1): unter 1200 px jede Meldung als Karte, Feldtitel aus data-titel (wie die Sortimentspflege). Zwischen 992 und 1200 px lief die
   Tabelle neben der Seitenleiste sonst bis auf 1140 px über (Durchsicht 06.11.). */
@media screen and (max-width: 1199.98px) {
  .ideen-tabelle { border-width: 0; background: transparent; --rd-tabelle-rand: 0; }
  .ideen-tabelle thead { display: none; }
  /* „Alle auswählen“ bleibt sichtbar: von der Kopfzeile steht nur das Kästchen, rechts über den Kästchen der Karten (Review M2). */
  .ideen-liste thead { display: block; }
  .ideen-liste thead tr { display: block; background: transparent; border: 0; padding: 0; margin: 0; }
  .ideen-liste thead th { display: none; }
  .ideen-liste thead th.ideen-auswahl { display: block; width: auto; padding: 0 12px 8px; background: transparent; border: 0; text-align: right; }
  .ideen-alle { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 8px; cursor: pointer;
    font-size: .875rem; font-weight: var(--rd-gewicht-normal); color: var(--rd-text); }
  .ideen-alle .nur-karten { display: inline; }
  .ideen-tabelle tr { display: block; background: var(--rd-flaeche); border: 1px solid var(--rd-rahmen); border-radius: var(--rd-rundung); margin-bottom: 8px; padding: 8px 12px; position: relative; }
  .ideen-tabelle tr.ideen-bearbeiten { margin-top: -9px; border-top: 0; border-radius: 0 0 var(--rd-rundung) var(--rd-rundung); background: var(--rd-flaeche-auswahl); box-shadow: inset 4px 0 0 var(--rd-gruen-ui); }
  .ideen-tabelle td { display: block; border: 0; padding: 3px 0; --bs-table-bg: transparent; }
  .ideen-tabelle td[data-titel]::before { content: attr(data-titel); display: block; font-size: .75rem; color: var(--rd-text-gedaempft); }
  /* Datum, Art und Status nebeneinander in einer Zeile, ohne Feldtitel. */
  .ideen-tabelle td.kompakt { display: inline-block; margin-right: 10px; }
  .ideen-tabelle td.kompakt::before { content: none; }
  .ideen-tabelle td.ideen-auswahl { position: absolute; right: 12px; top: 10px; width: auto; }
  .ideen-tabelle .ideen-zeile.offen > td, .ideen-tabelle .ideen-bearbeiten > td { background: transparent; box-shadow: none; }
  .ideen-tabelle .ideen-zeile.offen { background: var(--rd-flaeche-auswahl); box-shadow: inset 4px 0 0 var(--rd-gruen-ui); border-radius: var(--rd-rundung) var(--rd-rundung) 0 0; }
  .ideen-seite { max-width: none; }
  .ideen-textspalte, .ideen-antwortspalte, .ideen-von, .ideen-zeit { min-width: 0; width: auto; }
  .ideen-status .btn { display: inline-block; margin: 0 0 0 8px; }
}

/* Gedruckt stehen Ideen-Liste und Sortimentspflege als Tabelle (Review N1); die Mindestbreiten des Bildschirms sind dort kleiner,
   sonst liefen „Antwort“ bzw. „Hinweis“ und „Sollmenge“ rechts aus dem A4-Blatt. */
@media print {
  .ideen-auswahl { display: none; }   /* Kästchen der Sammelaktion braucht es auf Papier nicht */
  .ideen-textspalte, .ideen-antwortspalte { min-width: 7.5rem; }
  .ideen-von { min-width: 6rem; }
  .ideen-zeit { width: 5rem; }
  .ideen-status, .ideen-tabelle .stand { white-space: normal; }
  .pflege-tabelle td.pflege-text, .pflege-tabelle td.pflege-hinweis { min-width: 0; }
  .pflege-tabelle td { overflow-wrap: anywhere; }
}