/* ============================================================
   FARBEN UND LINIEN (ADR-185, 2026-08-12 - "Vorschlag A")
   ------------------------------------------------------------
   Die Randfarben waren bis dahin so hell, dass sie faktisch unsichtbar
   waren: --rand hatte gegen Weiss ein Kontrastverhaeltnis von 1,40:1,
   --rand-eingabe 1,66:1. Sichtbar wird eine Begrenzung ab etwa 3:1.
   Zusammen mit den ueberall verwendeten 0.5px-Linien (die der Browser
   je nach Anzeigeskalierung auf eine hellere Farbe verrechnet) hatte
   die Oberflaeche praktisch keine Struktur - siehe Design-Notiz
   "Kontrast und Lesbarkeit der Oberflaeche" in DECISIONS.md.

   Die TEXTfarben bleiben absichtlich unveraendert: sie waren nie das
   Problem (--text 14,08:1, --text-mild 7,64:1, --akzent-text 10,27:1).
   ============================================================ */
:root {
  --bg: #F4F3FD;
  --oberflaeche: #ffffff;
  --akzent-text: #3C3489;
  --text: #2A2650;
  --text-mild: #524C88;
  --rand: #9A94C8;          /* war #DAD7F5 (1,40:1) -> jetzt 2,82:1 */
  --rand-eingabe: #7B74B0;  /* war #C9C4EF (1,66:1) -> jetzt 4,23:1 */
  --tag-bg: #EEEDFE;
  --fehler: #b00020;        /* 7,33:1 auf Weiss */
  --erfolg: #1a7a1a;        /* 5,46:1 */
  /* ADR-195: die dritte Statusfarbe. Sie FEHLTE, obwohl `var(--warnung)`
     an zehn Stellen benutzt wurde - neunmal mit dem Fallback #b45309,
     einmal (Verfolgungs-Block) mit `var(--text-mild)`. Dort erschien
     eine Warnung deshalb in der milden Textfarbe, also wie ein
     Nebensatz. Gewaehlt ist der Wert, der ohnehin in den Fallbacks
     stand: 5,02:1 auf Weiss und damit in einer Reihe mit --fehler und
     --erfolg. Der zweite Ton #b26a00 aus dem Box-Versand lag mit
     4,24:1 unter den geforderten 4,5:1 und ist ersetzt. */
  --warnung: #b45309;       /* 5,02:1 */

  /* Neu mit ADR-185 */
  --linie: #C2BEDF;         /* Zeilentrenner in Tabellen - leiser als
                               --rand, weil sie sich vielfach wiederholt */
  --zebra: #E9E7FA;         /* abwechselnde Zeile; war --bg mit 1,10:1 */
  --kopf-bg: #E1DEF6;       /* Flaeche der Tabellenkopfzeile; --tag-bg war
                               mit 1,16:1 dafuer zu schwach */
  --kopf-strich: #7B74B0;   /* 2px unter Tabellenkoepfen */
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

.versteckt { display: none !important; }
/* ADR-255 (27.08.): eigene Klasse fuer "es fehlt die Mandantenauswahl".
   ⚠️ NICHT `versteckt` benutzen - die gehoert der Berechtigungslogik
   (data-braucht-berechtigung). Teilten sich beide eine Klasse, machte
   das Waehlen eines Mandanten ein Formular sichtbar, fuer das der
   Benutzer gar keine Berechtigung hat. Dieselbe Ueberlegung wie bei
   `gruppe-zu` in der Seitenleiste. */
.ohne-mandant { display: none !important; }

/* ===== Kopfzeile ===== */
header.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: var(--oberflaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.kopf .logo { font-weight: 500; color: var(--akzent-text); font-size: 1.05rem; }
header.kopf .mandant { font-size: 0.75rem; color: var(--text-mild); display: block; }
header.kopf .rechts { display: flex; align-items: center; gap: 8px; }

.seitenleiste-schalter { margin: 0; padding: 6px 8px; background: none; box-shadow: none; color: var(--akzent-text); }
.seitenleiste-schalter i { font-size: 20px; display: block; }

.sprachumschalter { display: flex; gap: 4px; }
.sprachumschalter button {
  margin: 0; padding: 3px 9px; font-size: 0.7rem; box-shadow: none; border: none;
  background: var(--tag-bg); color: var(--akzent-text);
}
.sprachumschalter button.aktiv {
  background: linear-gradient(180deg, #8A82E4, #6F66CC); color: #fff;
}

/* ===== Inhalt / Sektionen ===== */
/* Bewusst fluid statt fester max-width (LA-Wunsch 2026-07-16): nutzt
   die verfügbare Breite auf großen Bildschirmen voll aus, bleibt aber
   dank Prozent-Breiten/flex-wrap auf schmalen Bildschirmen genauso
   funktionsfähig - kein separates "Mobil-Layout" nötig. */
main { width: 100%; margin: 0 auto; padding: 1rem clamp(1rem, 3vw, 2.5rem); box-sizing: border-box; }

h1 { font-size: 1.3rem; color: var(--akzent-text); font-weight: 500; margin: 0.4rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; color: var(--akzent-text); font-weight: 600; border-bottom: 2px solid var(--rand); padding-bottom: 0.3rem; }

label { display: block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-mild); }

input, select {
  width: 100%; padding: 0.55rem; margin-top: 0.2rem;
  border: 1px solid var(--rand-eingabe); border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(60,52,137,0.06);
  background: var(--oberflaeche); font-size: 0.9rem;
}

/* Checkboxen sollen NICHT die volle Breite füllen (sonst wird die
   normale Eingabefeld-Breite/Padding/Rahmen-Regel oben auch auf sie
   angewendet - LA-Fund 2026-07-17: riesige verzerrte Checkbox in der
   Kommissionierung-Sendungsauswahl, gleicher Bug betraf auch
   bestehende Checkboxen bei Lagerplätzen/Sendung-anlegen, nur bisher
   nicht aufgefallen). Betrifft ALLE Checkboxen in der App, ohne dass
   jede einzeln überschrieben werden muss. */
input[type="checkbox"] {
  width: auto; padding: 0; margin: 0; box-shadow: none; border: none;
  background: none; flex-shrink: 0;
}

textarea {
  width: 100%; height: 120px; font-family: monospace; font-size: 0.8rem;
  border: 1px solid var(--rand-eingabe); border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(60,52,137,0.06);
  background: var(--oberflaeche); margin-top: 0.4rem;
}

/* LA-Wunsch (2026-07-23): Buttons sollen deutlicher hervorstechen -
   vorher hatte v.a. button.leise gar keinen Rand und war schwer vom
   Hintergrund zu unterscheiden (nur der Browser-Fokusring nach einem
   Klick sah wie ein Rand aus). Jetzt bekommen alle "echten" Aktions-
   Buttons einen sichtbaren Rand; Navigationselemente, die sich wie
   Menüpunkte statt wie Buttons verhalten (Seitenleiste, Sprachumschalter,
   Einstellungen-Reiter, Mandantenansicht-Leiste), bewusst per
   `border: none` ausgenommen - siehe jeweilige Regeln weiter unten. */
button {
  margin-top: 0.8rem; padding: 0.55rem 1.1rem; cursor: pointer;
  border: 1px solid var(--rand-eingabe); border-radius: 8px; font-weight: 500; font-size: 0.88rem;
  background: linear-gradient(180deg, #8A82E4, #6F66CC);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(83,74,183,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
button:active { background: #6058B8; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); transform: translateY(1px); }
button.leise {
  background: var(--tag-bg); color: var(--akzent-text); box-shadow: none;
  border: 1px solid var(--rand-eingabe);
}

.karte {
  background: var(--oberflaeche); border-radius: 12px; padding: 1rem; margin-top: 0.8rem;
  border: 1px solid var(--rand);
}

/* Abwechselnde Zeilenfarbe fuer Listen-Tabellen - sehr helles Lila statt
   Grau, passend zur restlichen Palette (LA-Wunsch 2026-07-16). Gilt fuer
   jede Tabelle mit dieser Klasse, nicht nur Artikel. */
.zeile-alt { background: var(--zebra); }
.kachel-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0.8rem; }
.kachel {
  background: var(--oberflaeche); border-radius: 12px; padding: 0.9rem;
  border: 1px solid var(--rand); text-align: left;
}
.kachel .titel { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text); margin-top: 6px; }
.kachel .untertitel { display: block; font-size: 0.72rem; color: var(--text-mild); }

.fehler { color: var(--fehler); font-size: 0.85rem; margin-top: 0.5rem; }
/* Packtisch-Einstiegsfeld (ADR-287/288): die Meldung wird aus einem
   Meter Abstand gelesen, mit dem Scanner in der Hand - deshalb deutlich
   groesser als eine Formularmeldung (LA 17.09.: "die Meldung ist etwas
   klein"). Gilt fuer Erfolg und Alarm gleichermassen. */
#packtisch-meldung { font-size: 1.15rem; line-height: 1.5; padding: 10px 14px; border-radius: 8px; background: var(--kopf-bg); }
#packtisch-meldung.fehler { font-size: 1.15rem; font-weight: 600; background: #fde8ea; } /* dieselbe Flaeche wie .lager-meldung-fehler */

/* ADR-288 P2.4: Bulk-Sicht am Packtisch (Entwurf 2/2b). Gross genug fuer
   den Blick aus Armlaenge mit dem Scanner in der Hand; Gruen/Rot tragen das
   Urteil, die Schrift darin bleibt --erfolg/--fehler (Kontrast 5,46/7,33:1). */
.pt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 14px; }
.pt-nummer { font-size: 1.9rem; font-weight: 700; color: var(--akzent-text); font-family: ui-monospace, monospace; }
.pt-bezeichnung { font-size: 1.1rem; color: var(--text); }
.pt-abzeichen { background: var(--akzent-text); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: 4px; padding: 2px 8px; letter-spacing: .05em; }
.pt-sperre { margin-left: auto; border: 1px solid var(--warnung); color: var(--warnung); background: #fff7ed; border-radius: 6px; padding: 5px 12px; font-size: 0.9rem; }
.pt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .pt-raster { grid-template-columns: 1fr; } }
.pt-schritte { display: flex; flex-direction: column; gap: 12px; }
.pt-schritt { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--rand); border-radius: 10px; padding: 16px 18px; background: var(--oberflaeche); }
.pt-schritt.pt-aktiv { border: 2px solid var(--akzent-text); }
.pt-schritt.pt-gut { background: #e8f3e8; border-color: #9cc79c; }
.pt-schritt.pt-schlecht { background: #fde8ea; border: 2px solid var(--fehler); }
/* ADR-358 (C3): erster Fehlversuch der Stichprobe - gelb, kein Hold */
.pt-schritt.pt-warnung { background: #fff4e0; border: 2px solid var(--warnung); }
.pt-warnung .pt-marke { background: var(--warnung); }
.pt-block-warnung { border: 2px solid var(--warnung); background: #fff4e0; border-radius: 10px; padding: 12px 16px; margin: 6px 0 10px; }
.pt-block-warnung .pt-block-titel { color: var(--warnung); }
.pt-schritt.pt-aus { opacity: .55; }
.pt-marke { flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--akzent-text); }
.pt-gut .pt-marke { background: var(--erfolg); }
.pt-schlecht .pt-marke { background: var(--fehler); }
.pt-aus .pt-marke { background: var(--text-mild); }
.pt-schritt-titel { font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 3px 0 6px; }
.pt-klein { font-size: 0.85rem; color: var(--text-mild); }
.pt-eingabe { margin: 10px 0 0; font-size: 1.2rem; padding: 10px 12px; }
.pt-waegung { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 8px; font-size: 1rem; }
.pt-zahl-kasten { border: 2px solid var(--rand-eingabe); border-radius: 10px; padding: 8px 18px; background: #fff; min-width: 230px; }
.pt-zahl-kasten-gut { border-color: var(--erfolg); }
.pt-schlecht .pt-zahl-kasten { border-color: var(--fehler); }
.pt-zahl { font-size: 2.6rem; font-weight: 700; line-height: 1.15; }
.pt-zahl-gut { color: var(--erfolg); }
.pt-zahl-schlecht { color: var(--fehler); }
.pt-zahl-eingabe { font-size: 2.2rem; font-weight: 700; padding: 4px 6px; margin: 2px 0; width: 100%; }
.pt-urteil-gut { color: var(--erfolg); font-weight: 700; font-size: 1.15rem; margin-top: 4px; }
.pt-urteil-schlecht { color: var(--fehler); font-weight: 700; font-size: 1.15rem; margin-top: 4px; }
.pt-block-schlecht { border: 2px solid var(--fehler); background: #fde8ea; border-radius: 10px; padding: 16px 20px; }
.pt-block-schlecht p { font-size: 1.05rem; margin: 6px 0 12px; }
.pt-block-titel { color: var(--fehler); font-size: 1.35rem; font-weight: 700; }
/* Fund 1 (18.09.): Liste abgeschlossen - Gegenstueck zu .pt-block-schlecht */
.pt-block-gut { border: 2px solid var(--erfolg); background: #e8f3e8; border-radius: 10px; padding: 16px 20px; }
.pt-block-gut p { font-size: 1.05rem; margin: 6px 0 12px; }
.pt-block-titel-gut { color: var(--erfolg); font-size: 1.35rem; font-weight: 700; }
/* Fund 3 (LA 18.09.): versendete Sendung im Box-/Listen-Modus auf eine Zeile zusammenklappen */
#boxversand-details.bv-fertig .pt-schritt:not(#bv-schritt-versand) { display: none; }
#boxversand-details.bv-fertig #boxversand-versenden,
#boxversand-details.bv-fertig #boxversand-versand-grund { display: none; }
.bv-fertig-zeile { color: var(--erfolg); font-weight: 700; font-size: 1.35rem; }
/* Fund 4 (18.09.): dauerhafte Erfolgsmeldung, Gegenstueck zu .pt-meldung-fehler */
.pt-meldung-gut { padding: 10px 14px; border-radius: 8px; background: #e8f3e8; border: 2px solid var(--erfolg); color: var(--erfolg); font-weight: 700; font-size: 1.05rem; }
.pt-grossknopf { display: block; width: 100%; margin: 8px 0 0; padding: 16px; font-size: 1.25rem; font-weight: 700; }
.pt-grossknopf:disabled { opacity: .45; cursor: not-allowed; }
/* Reiter Picklisten (17.09.): gesperrt muss man SEHEN - bei 0 und waehrend des Zaehlens
   sah der Knopf aus wie klickbar. */
.pl-erzeugen:disabled { opacity: .45; cursor: not-allowed; }
/* Fund 2 (18.09., LA: "fetter"): Fehlscan-Meldung muss man aus einem Meter sehen */
.pt-meldung-fehler { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #fde8ea; border: 2px solid var(--fehler); color: var(--fehler); font-weight: 700; font-size: 1.15rem; display: block; }
.pt-ergebnis { margin-top: 12px; font-size: 0.95rem; }
.pt-ergebnis-zeile { margin: 0 0 4px; }
.pt-rot { color: var(--fehler); }
.pt-seite { display: flex; flex-direction: column; gap: 12px; }
.pt-karte { border: 1px solid var(--rand); border-radius: 10px; padding: 14px 18px; background: var(--oberflaeche); }
.pt-karte-titel { font-weight: 700; color: var(--akzent-text); font-size: 1.05rem; margin-bottom: 8px; }
.pt-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 0.98rem; }
.pt-zeile strong { text-align: right; }
/* Box-/Listenversand in der Bulk-Gestalt (LA 17.09.): die alten Unterbloecke
   tragen noch Inline-Abstaende; hier nur, was die Karte braucht. */
#boxversand-details .pt-schritt-titel { margin-bottom: 4px; }
#boxversand-inhalt-karte > label { font-size: 1.15rem !important; }
#boxversand-positionen { overflow-x: auto; }
#boxversand-positionen table { font-size: 0.82rem !important; table-layout: fixed; word-break: break-word; }
#boxversand-details .pt-raster { margin-top: 4px; }
.erfolg { color: var(--erfolg); font-size: 0.85rem; margin-top: 0.5rem; }
.hinweis { font-size: 0.8rem; color: var(--text-mild); }
.tag { display: inline-block; background: var(--tag-bg); color: var(--akzent-text); border-radius: 5px; padding: 0.15rem 0.6rem; margin: 0.1rem; font-size: 0.82rem; }

/* ADR-214: Kreuz zum Entfernen direkt am Abzeichen. Bewusst dezent -
   es soll erreichbar sein, aber nicht zum Klicken einladen. */
.tag-entfernen {
  background: none; border: none; padding: 0 0 0 2px; margin: 0;
  color: var(--akzent-text); opacity: .55;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.tag-entfernen:hover { opacity: 1; color: var(--warnung, #c62828); }

/* Einfaches Modal (ADR-116, Mandantenansicht-Passwortabfrage) - bewusst
   kein generisches Modal-System, nur dieser eine konkrete Anwendungsfall
   bisher, passend zum "kein Framework"-Ansatz dieser App. */
.modal-hintergrund {
  position: fixed; inset: 0; background: rgba(42,38,80,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 1rem;
}
.modal-box {
  background: var(--oberflaeche); border-radius: 12px; padding: 1.2rem;
  max-width: 380px; width: 100%; border: 1px solid var(--rand);
}
.modal-box .modal-aktionen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1rem; }
.modal-box .modal-aktionen button { margin-top: 0; }

.baustelle {
  border: 1px dashed var(--rand-eingabe); border-radius: 12px; padding: 1.2rem;
  color: var(--text-mild); font-size: 0.85rem; margin-top: 0.8rem; text-align: center;
}

/* ===== Mandanten-Ansicht-Leiste (Superadmin) ===== */
#mandant-leiste {
  background: var(--akzent-text); color: var(--tag-bg);
  padding: 0.55rem 1rem; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: space-between;
}
#mandant-leiste button { margin: 0; padding: 3px 10px; font-size: 0.75rem; background: var(--tag-bg); color: var(--akzent-text); box-shadow: none; }

/* ===== Seitenleiste (links, ausblendbar) ===== */
nav.seitenleiste {
  position: fixed; top: 0; left: 0; bottom: 0; width: 230px;
  background: var(--oberflaeche); border-right: 1px solid var(--rand);
  padding-top: 60px; /* Platz unter der fixierten Kopfzeile */
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 20;
}
nav.seitenleiste.offen { transform: translateX(0); }

/* ADR-257: die Eintraege sind seit dem 31.08. echte Verweise (<a
   href="#/...">) statt Knoepfe - nur so kennt der Browser einen
   Rechtsklick "In neuem Tab oeffnen" und einen Mittelklick. Sie muessen
   danach aussehen wie vorher, deshalb steht der Anker hier neben dem
   Knopf: die Gruppenueberschriften sind weiterhin <button>. */
nav.seitenleiste button,
nav.seitenleiste a.nav-eintrag {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 8px; padding: 10px 12px; font-size: 0.85rem;
  background: none; color: var(--text-mild); box-shadow: none; border: none;
  border-radius: 8px; text-align: left; font-weight: 400;
  text-decoration: none; cursor: pointer;
}
nav.seitenleiste .nav-eintrag.aktiv,
nav.seitenleiste button.aktiv { color: var(--akzent-text); font-weight: 500; background: var(--tag-bg); }
nav.seitenleiste .nav-eintrag i,
nav.seitenleiste button i { font-size: 18px; width: 20px; text-align: center; }

/* Gruppenueberschriften in der Seitenleiste (ADR-177) - 15 flache
   Menuepunkte waren nicht mehr ueberschaubar, vor allem weil vier davon
   "Versand" oder "Scan" im Namen tragen. Bewusst dezent: die Ueberschrift
   gliedert, konkurriert aber nicht mit den Eintraegen selbst. */
nav.seitenleiste .nav-gruppe {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 12px 4px; padding: 4px 8px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mild);
  opacity: 0.65; cursor: pointer; border-radius: 6px; user-select: none;
  background: none; border: none; width: calc(100% - 24px); text-align: left;
}
nav.seitenleiste .nav-gruppe:hover { opacity: 1; background: var(--tag-bg); }
nav.seitenleiste .nav-gruppe:first-of-type { margin-top: 6px; }
/* Pfeil dreht sich, wenn die Gruppe zugeklappt ist */
nav.seitenleiste .nav-gruppe .nav-pfeil {
  font-size: 14px; width: auto; transition: transform 0.15s ease;
}
nav.seitenleiste .nav-gruppe.zu .nav-pfeil { transform: rotate(-90deg); }
/* Zugeklappte Gruppe: Eintraege ausblenden. Eigene Klasse statt
   "versteckt", damit die Berechtigungslogik (die ebenfalls mit
   "versteckt" arbeitet) sich nicht damit ins Gehege kommt. */
/* ⚠️ Die Klassen MUESSEN hier zusammen mit `.nav-eintrag` stehen. Am
   31.08. stand hier kurz `nav.seitenleiste .gruppe-zu` allein - das ist
   eine Klasse WENIGER als `nav.seitenleiste a.nav-eintrag` daroben, und
   damit gewann das `display: flex` der Grundregel: die Eintraege trugen
   die Klasse und blieben trotzdem stehen. Gemessen im Browser
   (`getComputedStyle` sagte `flex`), nicht vermutet. 📐 Eine Regel, die
   etwas ausblenden soll, muss die Regel schlagen, die es einblendet. */
nav.seitenleiste .nav-eintrag.gruppe-zu,
nav.seitenleiste button.gruppe-zu { display: none; }

/* Platzhalter fuer geplante, noch nicht gebaute Ansichten - muss auf den
   ersten Blick als "noch nichts dahinter" erkennbar sein, damit niemand
   einen Fehler vermutet. */
nav.seitenleiste .nav-eintrag.geplant,
nav.seitenleiste button.geplant { opacity: 0.5; font-style: italic; }

/* Einstellungen-Reiter (ADR-103) - gleiche Aktiv-Optik wie die
   Navigation, aber als flache Tab-Leiste statt Seitenleiste. */
.einstellungen-reiter-btn { color: var(--text-mild); font-weight: 400; border: none; }
.einstellungen-reiter-btn.aktiv { color: var(--akzent-text); font-weight: 500; background: var(--tag-bg); }

/* Einstellungen: eigene Sidebar statt horizontaler Tab-Leiste
   (LA-Wunsch 2026-07-29, siehe DECISIONS.md) - gleiche Optik wie die
   App-Sidebar (nav.seitenleiste), aber statisch im Inhaltsbereich
   statt fixiert/ausblendbar, da sie nur innerhalb der Einstellungen-
   Ansicht navigiert. */
.einstellungen-layout { display: flex; gap: 24px; align-items: flex-start; }
.einstellungen-sidebar { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.einstellungen-sidebar .einstellungen-reiter-btn {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 10px 12px; font-size: 0.85rem;
  border-radius: 8px; text-align: left; width: 100%;
}
.einstellungen-sidebar .einstellungen-reiter-btn i { font-size: 18px; width: 20px; text-align: center; }
.einstellungen-inhalt { flex: 1; min-width: 0; }
.einstellungen-sidebar.eingeklappt { display: none; }

@media (max-width: 760px) {
  .einstellungen-layout { flex-direction: column; }
  .einstellungen-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* Schnittstellen-Sub-Tabs (Carrier/Shops, innerhalb des
   Schnittstellen-Reiters) - eigene Klasse statt Wiederverwendung von
   .einstellungen-reiter-btn, damit einstellungenReiterWechseln() (das
   ALLE .einstellungen-reiter-btn-Elemente anhand von data-reiter
   umschaltet) die Sub-Tab-Buttons nicht versehentlich mit umschaltet -
   optisch identisch zur oberen Regel. */
.schnittstellen-reiter-btn { color: var(--text-mild); font-weight: 400; border: none; }
.schnittstellen-reiter-btn.aktiv { color: var(--akzent-text); font-weight: 500; background: var(--tag-bg); }

#seitenleiste-hintergrund {
  position: fixed; inset: 0; background: rgba(42, 38, 80, 0.35);
  z-index: 15;
}

/* ============================================================
   TABELLEN (ADR-185, 2026-08-12)
   ------------------------------------------------------------
   Bis dahin hatte KEINE Tabelle in Knopa einen Zeilentrenner: alle
   tragen inline `border-collapse:collapse`, aber keine Zellenlinie.
   Unterschieden wurden Zeilen allein ueber `.zeile-alt`, und dessen
   Kontrast lag bei 1,10:1 - das Auge musste die Zeile ueber acht
   Spalten hinweg allein an der waagerechten Flucht halten.

   Bewusst als ELEMENT-Selektor ohne Klasse: die 16 Tabellen in
   index.html und die 13 in app.js tragen alle nur Inline-Stile, es
   gibt keine gemeinsame Klasse zum Anhaengen. Element-Selektoren haben
   die niedrigste Spezifitaet, uebersteuern also nichts Bestehendes;
   der 2px-Kopfstrich setzt sich trotz `border-bottom:0.5px` am
   <thead><tr> durch, weil bei `border-collapse:collapse` die BREITERE
   Linie gewinnt.
   ============================================================ */
thead th {
  border-bottom: 2px solid var(--kopf-strich);
  background: var(--kopf-bg);
  color: var(--text);
  font-weight: 600;
}
tbody td { border-bottom: 1px solid var(--linie); }
tbody tr:last-child td { border-bottom: none; }

/* Zeile unter dem Mauszeiger - hilft beim Verfolgen ueber viele Spalten.
   Nur wo es auch eine Kopfzeile gibt, damit reine Layout-Tabellen
   (Formularraster) unberuehrt bleiben. */
table:has(thead) tbody tr:hover > td { background: #DCD8F6; }

/* Verschachtelte Tabellen in aufgeklappten Detailzeilen (Standardmuster
   in app.js: <tr> + versteckte <tr><td colspan=N>) bekommen absichtlich
   LEISERE Linien - sonst konkurriert die innere Tabelle optisch mit der
   aeusseren Zeile, zu der sie gehoert. */
table table thead th { background: transparent; border-bottom: 1px solid var(--rand); }
table table tbody td { border-bottom: 1px solid #E2DFF3; }
table table tbody tr:hover > td { background: transparent; }

/* Abzeichen: bisher nur eine Flaeche mit 1,16:1 gegen Weiss - also im
   Zweifel unsichtbar. Ein Rand traegt die Form, die Flaeche bleibt
   dezent. (Siehe auch FEHLER_UND_LEHREN 5.7: `var(--akzent)` existiert
   nicht, die Variable heisst `--akzent-text`.) */
.tag { border: 1px solid var(--rand); }

/* Abschnittstitel in den aufklappbaren Detailansichten (ADR-187,
   2026-08-12). Vorher trugen "Pakete", "Sendungsverfolgung", "Positionen"
   usw. die Klasse `hinweis` - also exakt dieselbe Formatierung wie der
   erklärende Kleintext daneben. Struktur und Erläuterung sahen dadurch
   gleich aus, und die Detailansicht las sich als eine einzige Fläche.
   Bewusst GRÖSSER als vorher (0.82 statt 0.78 rem), nicht kleiner: der
   Anlass war, dass zu viel Text zu klein ist. */
.abschnitt-titel {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--akzent-text);
}

/* ===== Umgebungskennzeichnung (14.08.2026) =====
   Fest am oberen Rand, ueber allem. Der Streifen ist bewusst NICHT
   wegklickbar und nicht scrollbar: er soll auch nach vierzig Minuten in
   einem Serienversand-Lauf noch da sein, denn genau dann ist die
   Verwechslung teuer. Die Schraffur macht ihn auch auf einem
   Bildschirmfoto sofort erkennbar.
   Die drei body-Regeln schieben alles nach, was sonst unter dem Streifen
   klemmen wuerde - Kopfzeile und Seitenleiste sind fixiert bzw. sticky. */
.umgebungs-streifen {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 22px; line-height: 22px;
  z-index: 40;
  background: repeating-linear-gradient(135deg, #0f766e, #0f766e 10px, #115e59 10px, #115e59 20px);
  color: #fff;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  user-select: none;
}
body.umgebung-markiert { padding-top: 22px; }
body.umgebung-markiert header.kopf { top: 22px; }
body.umgebung-markiert nav.seitenleiste { top: 22px; }

/* ============================================================
   WARTUNGSSCHALTER (ADR-251 N10)
   ------------------------------------------------------------
   Zwei Anzeigen: die Wartungsseite fuer Ausgesperrte (legt sich ueber
   alles, z-index ueber Dialogen) und der rote Streifen fuer den
   Superadmin (gleiche Bauart wie der Umgebungsstreifen, aber rot und
   ueber ihm - er ist dringlicher). Beide Streifen zusammen: der
   Umgebungsstreifen rutscht unter den Wartungsstreifen, weil
   .wartung-markiert einen zweiten Versatz addiert.
   ============================================================ */
.wartung-seite {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.wartung-karte {
  max-width: 440px; width: 100%; text-align: center;
  background: var(--oberflaeche); border: 1px solid var(--rand); border-radius: 14px;
  padding: 2rem 1.5rem;
}
.wartung-symbol { font-size: 3rem; line-height: 1; margin-bottom: 0.6rem; color: var(--akzent-text); }
.wartung-karte h1 { margin: 0 0 0.6rem; }
.wartung-text { margin: 0 0 0.6rem; font-size: 0.95rem; }
.wartung-seit { margin: 0; font-size: 0.82rem; color: var(--text-mild); }

.wartung-streifen {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 26px; line-height: 26px;
  z-index: 41;
  background: repeating-linear-gradient(135deg, #b91c1c, #b91c1c 10px, #991b1b 10px, #991b1b 20px);
  color: #fff;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  user-select: none;
}
body.wartung-markiert { padding-top: 26px; }
body.wartung-markiert header.kopf { top: 26px; }
body.wartung-markiert nav.seitenleiste { top: 26px; }
body.wartung-markiert .umgebungs-streifen { top: 26px; }
body.wartung-markiert.umgebung-markiert { padding-top: 48px; }
body.wartung-markiert.umgebung-markiert header.kopf { top: 48px; }
body.wartung-markiert.umgebung-markiert nav.seitenleiste { top: 48px; }

/* ============================================================
   LAGER (mobil) – ADR-205, 2026-08-15
   ------------------------------------------------------------
   Eigene Oberflaeche fuer Handgeraete. Grundsaetze, die hier
   ueberall gelten und der Grund sind, warum sie NICHT aus den
   Desktop-Klassen abgeleitet ist:

   1. Jedes Ziel mindestens 44px hoch. Am 2026-08-15 am S24
      geprueft: die Desktop-Knoepfe sind 24px und werden mit dem
      Daumen nicht zuverlaessig getroffen (ADR-204).
   2. Keine Tabellen. Die Desktop-Ansicht hat 29 Stueck, alle in
      waagerechten Wischkaesten - auf 390px unbedienbar. Hier
      sind es Karten und Listen, die umbrechen.
   3. Schrift gross genug fuer eine Halle: nichts unter 0.9rem,
      Werte deutlich groesser.
   ============================================================ */

.lager-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: .4rem; }
.lager-kopf h1 { margin: .2rem 0 .6rem; }

.lager-zurueck {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 8px 12px 8px 6px; min-height: 44px;
  background: none; box-shadow: none; border: none;
  color: var(--akzent-text); font-size: .95rem; font-weight: 600;
}

/* ----- Kacheln ----- */
.lager-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.lager-kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; margin: 0; padding: 14px 8px; min-height: 132px;
  background: var(--oberflaeche);
  border: 2px solid var(--rand); border-radius: 16px;
  color: var(--akzent-text);
  box-shadow: 0 1px 2px rgba(60, 52, 137, .10);
}
.lager-kachel:active { background: var(--tag-bg); }
.lager-kachel-titel { font-size: .98rem; font-weight: 600; text-align: center; line-height: 1.2; }

/* Auf breiten Bildschirmen wachsen die Kacheln nicht mit - eine
   Kachel von 600px Breite trifft man nicht besser, sie sieht nur
   verloren aus. */
@media (min-width: 680px) {
  .lager-kacheln { grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); }
}

/* ----- Scanfeld ----- */
.lager-scanfeld {
  width: 100%; font-size: 1.25rem; padding: 14px; margin: .4rem 0 .6rem;
  border: 2px solid var(--rand-eingabe); border-radius: 10px;
}

.lager-knopf-gross { margin: 0; min-height: 44px; padding: 0 18px; font-size: .95rem; }
.lager-knopf-breit { width: 100%; }

/* ----- Karten und Listen ----- */
.lager-karte {
  display: block; width: 100%; text-align: left;
  background: var(--oberflaeche); border: 1px solid var(--rand);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 10px;
}
.lager-karte-klickbar { min-height: 60px; box-shadow: 0 1px 2px rgba(60, 52, 137, .08); }
.lager-karte-klickbar:active { background: var(--tag-bg); }
.lager-karte-titel { font-size: 1.05rem; font-weight: 600; color: var(--akzent-text); font-family: ui-monospace, monospace; }
.lager-karte-neben { font-size: .9rem; color: var(--text-mild); margin-top: 2px; }

/* ADR-209: Artikelbild in der Lagerkarte. Klein gehalten - auf 390 px
   ist jeder Pixel Text wertvoller als Bild. Antippen vergroessert.
   `flex: none` verhindert, dass das Bild bei langen Bezeichnungen
   zusammengedrueckt wird. */
.lager-karte-kopf { display: flex; gap: 10px; align-items: center; }

/* ADR-212: Kamera-Scan.
   Der Knopf sitzt direkt am Eingabefeld - gross genug fuer einen
   Daumen mit Handschuh (48px ist die uebliche Untergrenze fuer
   Beruehrungsziele). */
.lager-scanzeile { display: flex; gap: 8px; align-items: stretch; }
.lager-scanzeile .lager-scanfeld,
.lager-scanzeile input { flex: 1; min-width: 0; }
.lager-kamera-knopf {
  flex: none; width: 56px; margin: 0;
  font-size: 1.5rem; line-height: 1;
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--karte-bg, #fff); cursor: pointer;
  /* Befund 9 (28.09.): die globale button-Regel setzt color #fff - das
     Text-Zeichen ⌨ war weiss auf weiss (📷 ist ein Farb-Emoji, daher sichtbar). */
  color: var(--text);
}

/* Vollbild, damit der Barcode gross im Bild steht. Auf dem Regal
   liest man sonst dreimal daneben. */
.lager-kamera {
  position: fixed; inset: 0; z-index: 200;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lager-kamera video { width: 100%; height: 100%; object-fit: cover; }
/* Der Rahmen ist reine Zielhilfe - gelesen wird das ganze Bild.
   Wuerde man nur den Ausschnitt lesen, muesste der Mitarbeiter
   zielen statt nur draufhalten. */
.lager-kamera-rahmen {
  position: absolute; left: 8%; right: 8%; top: 38%; height: 24%;
  border: 3px solid rgba(255,255,255,0.85); border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.35);
}
.lager-kamera-hinweis {
  position: absolute; top: 8%; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 1rem; margin: 0; padding: 0 16px;
}
.lager-kamera-hinweis.fehler { color: #ff9d9d; }
.lager-kamera-abbrechen { position: absolute; bottom: 6%; width: 60%; }
/* ADR-212 Nachtrag 3: erscheint nur, wenn das Geraet mehrere
   Rueckkameras hat. Ueber dem Abbrechen-Knopf, damit der Daumen den
   haeufigeren Weg (abbrechen) nicht verfehlt. */
.lager-kamera-wechsel { position: absolute; bottom: 15%; width: 60%; }
.lager-artikelbild {
  width: 52px; height: 52px; flex: none;
  object-fit: contain; background: var(--tag-bg);
  border-radius: 6px; cursor: zoom-in;
}
.lager-pfad { font-size: .8rem; color: var(--text-mild); margin-top: 6px; }

.lager-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.lager-listenzeile {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--linie);
}
/* Spalten AUSDRUECKLICH zuweisen: ohne `grid-column` setzt der
   Auto-Placement-Algorithmus die Menge in Spalte 1, weil sie eine
   feste Zeile hat - dann steht die Zahl links und die SKU rechts.
   Am 2026-08-15 im Rendertest genau so aufgetreten. */
.lager-zeile-haupt { grid-column: 1; grid-row: 1; font-family: ui-monospace, monospace; font-size: .98rem; }
.lager-zeile-neben { grid-column: 1; grid-row: 2; font-size: .82rem; color: var(--text-mild); }
.lager-menge { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-size: 1.45rem; font-weight: 600; color: var(--akzent-text); }

.lager-werte { display: flex; gap: 18px; margin: 10px 0 4px; flex-wrap: wrap; }
.lager-wert-name { display: block; font-size: .75rem; color: var(--text-mild); }
.lager-wert { font-size: 1.25rem; font-weight: 600; }
.lager-wert-warnung { color: var(--warnung); }

.lager-sollist { font-size: 1.05rem; font-weight: 600; margin-top: 6px; }
.lager-leer { color: var(--text-mild); font-size: .9rem; margin: 10px 0 0; }

/* ----- Meldungen ----- */
.lager-meldung { padding: 10px 12px; border-radius: 10px; background: var(--tag-bg); font-size: .9rem; margin: 8px 0; }
.lager-meldung-fehler { background: #fde8ea; color: var(--fehler); font-weight: 600; }
.lager-meldung-warnung { background: #fdf1e3; color: var(--warnung); }

/* ----- Buchen-Block ----- */
.lager-buchen { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rand); }
.lager-buchen input { font-size: 1.1rem; padding: 12px; }
.lager-buchen-zeile { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.lager-buchen-zeile .lager-buchen-menge { width: 110px; }
.lager-buchen-zeile .lager-knopf-gross { flex: 1; }
.lager-buchen-meldung:empty { display: none; }
.lager-buchen-meldung { margin-top: 8px; font-size: .88rem; padding: 8px 10px; border-radius: 8px; }

.lager-we-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.lager-we-nummer { font-size: 1.15rem; font-weight: 600; color: var(--akzent-text); }
.lager-wechseln { margin: 0; min-height: 44px; padding: 0 14px; font-size: .88rem; background: var(--tag-bg); color: var(--akzent-text); box-shadow: none; border: 1px solid var(--rand); }

/* LA 17.09. ("der ansicht von packtisch ist unschoen") - Rahmen nach Entwurf 1/3
   (docs/entwurf_packtisch_2026-09-16/). Reiter sind Anzeige, keine Auswahl
   (ADR-284 Entscheidung 7). */
.pt-reiterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 4px 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--linie); }
.pt-reiter-titel { font-size: 1.3rem; font-weight: 600; color: var(--akzent-text); margin-right: 8px; }
.pt-reiter { border: 1px solid var(--rand); border-radius: 999px; padding: 3px 14px; font-size: 0.95rem; color: var(--text-mild); background: var(--oberflaeche); }
.pt-reiter.pt-reiter-aktiv { background: var(--akzent-text); border-color: var(--akzent-text); color: #fff; font-weight: 700; }
.pt-reiter.pt-reiter-spaeter { border-style: dashed; opacity: .7; }
.pt-reiter small { font-size: 0.72rem; }
.pt-scan-klein-platz { margin-left: auto; }
.pt-einstieg { max-width: 820px; margin: 26px auto 26px; text-align: center; }
.pt-einstieg-frage { display: block; font-size: 2rem; font-weight: 700; color: var(--akzent-text); margin: 0 0 18px; }
.pt-einstieg-feld { width: 100%; box-sizing: border-box; font-size: 1.6rem; padding: 16px 20px; border: 3px solid var(--akzent-text); border-radius: 12px; margin: 0; }
.pt-einstieg-meldung { margin-top: 12px; text-align: left; }
.pt-beispiele { width: 100%; max-width: 760px; margin: 22px auto 0; border-collapse: collapse; font-size: 1.05rem; text-align: left; }
.pt-beispiele td { padding: 9px 12px; border-bottom: 1px solid var(--linie); background: transparent; }
.pt-beispiele td:first-child { width: 170px; }
.pt-beispiele td:nth-child(2) { width: 30px; color: var(--text-mild); }
.pt-beispiele code { font-size: 1.05rem; font-weight: 700; color: var(--akzent-text); background: none; }
.pt-warten { max-width: 1100px; margin: 0 auto 20px; }
.pt-warten-titel { font-size: 1.15rem; font-weight: 700; color: var(--akzent-text); margin: 0 0 8px; }
.pt-warten-titel .pt-klein { font-weight: 400; margin-left: 8px; }
#packtisch-warten table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; font-size: 1rem; }
#packtisch-warten th { background: var(--kopf-bg); text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--rand); }
#packtisch-warten td { padding: 10px 14px; border-bottom: 1px solid var(--linie); }
#packtisch-warten tr:last-child td { border-bottom: none; }
#packtisch-warten tbody tr:nth-child(even) td { background: var(--zebra); }
/* Arbeitsplatz offen: das Einstiegsfeld wandert klein nach oben rechts */
.pt-kompakt .pt-einstieg { max-width: none; margin: 0 0 12px; text-align: left; }
.pt-kompakt .pt-einstieg-frage { display: none; }
.pt-scan-klein-platz .pt-einstieg-feld { width: 360px; max-width: 60vw; font-size: 1rem; padding: 7px 12px; border-width: 2px; border-radius: 8px; }

/* Listen in Schritt-Karten (Entwurf 3, LA 17.09. Schritt 2) */
.lv-position { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rand); border-radius: 8px; padding: 9px 14px; margin-top: 8px; background: var(--oberflaeche); font-size: 1rem; }
.lv-position.lv-voll { background: #e8f3e8; border-color: #9cc79c; }
.lv-position .lv-zeichen { width: 18px; color: var(--text-mild); }
.lv-position.lv-voll .lv-zeichen { color: var(--erfolg); }
.lv-position .lv-sku { font-weight: 700; min-width: 120px; }
.lv-position .lv-bez { flex: 1; min-width: 0; color: var(--text); }
.lv-position .lv-zahl { min-width: 50px; text-align: right; }
.lv-position .lv-stand { min-width: 150px; text-align: right; font-weight: 700; color: var(--akzent-text); }
.lv-position.lv-voll .lv-stand { color: var(--erfolg); }
.lv-sendung { margin-top: 10px; font-size: 1rem; }


/* P6.5 (ADR-284 4c): die Frage "zurueckgelegt oder liegt noch hier?" -
   eigener Kasten ueber allem, grosse Knoepfe (Scanner/Touch). */
.pt-frage-huelle { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 16, 50, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pt-frage { background: #fff; color: var(--text); border: 3px solid var(--warnung); border-radius: 12px; padding: 20px 22px; max-width: 560px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.pt-frage-titel { font-size: 1.3rem; font-weight: 700; color: var(--warnung); margin-bottom: 8px; }
.pt-frage-knoepfe { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 8px; }
.pt-frage-knoepfe .leise { margin-top: 8px; }
.pt-frage .pt-frage-zweit { background: #fff; color: var(--text); border: 2px solid var(--rand-eingabe); }

/* P6.6 (ADR-284 4b): die Lampe im Kopf + Ansicht Vorkommnisse */
.kopf-lampe { margin: 0 10px 0 0; padding: 4px 12px; border-radius: 999px; background: #eef7ee; color: var(--erfolg); border: 1px solid #bfdcbf; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.kopf-lampe-an { background: var(--fehler); color: #fff; border-color: var(--fehler); animation: kopf-lampe-puls 1.6s ease-in-out infinite; }
.kopf-lampe-unbekannt { background: #f3f3f3; color: var(--text-mild); border-color: var(--rand); }
@keyframes kopf-lampe-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 0, 32, .55); } 50% { box-shadow: 0 0 0 8px rgba(176, 0, 32, 0); } }
@media (prefers-reduced-motion: reduce) { .kopf-lampe-an { animation: none; } }
.vk-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vk-tabelle th, .vk-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linie); }
.vk-offen { border: 2px solid var(--fehler); background: #fde8ea; }
.vk-offen td { color: var(--fehler); font-weight: 600; }
.vk-ruhig { color: var(--erfolg); font-weight: 700; }

/* LA 18.09. (Test P6.8): "lass uns alle fehlermeldungen etwas fetter
   machen" - jede .fehler-Meldung der Oberflaeche (64 Stellen in index.html
   plus die per Code gesetzten) fett, groesser und als Kasten, sobald sie
   Text traegt. Der Packtisch hat seinen eigenen, noch groesseren Kasten
   (.pt-meldung-fehler). */
.fehler { font-size: 1rem; font-weight: 700; }
/* Traegt die Meldung schon ihren eigenen Kasten (.pt-meldung-fehler), keinen zweiten drumherum. */
.fehler:not(:empty):not(:has(.pt-meldung-fehler)) { background: #fde8ea; border-left: 4px solid var(--fehler); padding: 8px 12px; border-radius: 6px; }
.pt-meldung-warnung { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #fff4e5; border: 2px solid var(--warnung); color: var(--warnung); font-weight: 700; font-size: 1.1rem; display: block; }

/* LA 18.09.: wer angemeldet ist, muss man am Packtisch auf einen Blick sehen. */
header.kopf #kopf-benutzer { font-size: 1.05rem; font-weight: 700; color: var(--text); }