/* ==========================================================================
   WaWi-Wächter – Gestaltung
   --------------------------------------------------------------------------
   Regeln und Begründungen: docs/design.md. Musterseite im Cockpit: /stil/

   Aufbau dieser Datei
     1. Design-Tokens hell   (alle Farben, Schriften, Abstände – NUR hier festlegen)
     2. Design-Tokens dunkel
     3. Grundlagen           (Schrift, Fokus, Sprunglink, weniger Bewegung)
     4. Layout               (Seitenleiste, Kopfleiste, Inhalt)
     5. Navigation
     6. Bausteine            (Seitenkopf, Hilfe, Status, Kennzahl, Leer, Schritte …)
     7. Bootstrap angepasst  (Karten, Tabellen, Formulare, Knöpfe, Hinweise)
     8. Druck

   Bootstrap 5.3 bleibt die Grundlage. Wir setzen nur dessen Variablen (--bs-…) auf unsere
   Tokens (--bh-…) und ergänzen eigene Bausteine. Neue Farben NIE direkt in Vorlagen schreiben.
   ========================================================================== */

/* 1. Design-Tokens hell ---------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  /* Markenfarbe „Petrol“: ruhig, gut lesbar, klar unterscheidbar von Grün (= erledigt) */
  --bh-primaer: #0e6c76;
  --bh-primaer-dunkler: #0b5860;
  --bh-primaer-text: #0b5a62;
  --bh-primaer-flaeche: #e7f3f4;
  --bh-primaer-rand: #b9dde1;
  /* Zweite Markenfarbe nur fürs Bildzeichen (Kapsel, Funkeln) – nicht für Status verwenden */
  --bh-marke-akzent: #f6c453;

  /* Flächen und Text */
  --bh-grund: #f5f6f8;          /* Seitenhintergrund */
  --bh-flaeche: #ffffff;        /* Karten, Seitenleiste, Kopfleiste */
  --bh-flaeche-2: #f0f2f5;      /* Tabellenkopf, Hover, Nebenflächen */
  --bh-rand: #dfe3e8;
  --bh-rand-stark: #c5ccd4;     /* Eingabefelder */
  --bh-text: #1c2229;
  --bh-text-gedaempft: #59626e;

  /* Bedeutungsfarben – siehe docs/design.md „Statusfarben“ */
  --bh-erfolg: #18794e;  --bh-erfolg-text: #146c43;  --bh-erfolg-flaeche: #e2f3e9;  --bh-erfolg-rand: #a9d9bd;
  --bh-warnung: #b45d00; --bh-warnung-text: #8a4500; --bh-warnung-flaeche: #fff3df; --bh-warnung-rand: #f3cf95;
  --bh-gefahr: #c42b2b;  --bh-gefahr-text: #a51d24;  --bh-gefahr-flaeche: #fdeceb;  --bh-gefahr-rand: #f2b8b5;
  --bh-info: #1d63b0;    --bh-info-text: #1b4f8a;    --bh-info-flaeche: #e6f0fb;    --bh-info-rand: #b5d0f0;
  --bh-neutral-text: #3d4650; --bh-neutral-flaeche: #eef0f3; --bh-neutral-rand: #d5dae0;

  /* Schrift: Systemschriften – nichts wird aus dem Internet geladen (Datenschutz, offline) */
  --bh-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bh-schrift-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  /* Form und Tiefe */
  --bh-radius: .75rem;
  --bh-radius-klein: .5rem;
  --bh-schatten: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --bh-schatten-gross: 0 12px 32px rgba(16, 24, 40, .16);

  /* Maße des Rahmens */
  --bh-leiste-breite: 16.5rem;
  --bh-kopf-hoehe: 3.5rem;

  /* --- Bootstrap an die Tokens binden --- */
  --bs-body-font-family: var(--bh-schrift);
  --bs-font-monospace: var(--bh-schrift-mono);
  --bs-body-font-size: 1rem;
  --bs-body-bg: var(--bh-grund);
  --bs-body-bg-rgb: 245, 246, 248;
  --bs-body-color: var(--bh-text);
  --bs-emphasis-color: var(--bh-text);
  --bs-secondary-color: var(--bh-text-gedaempft);
  --bs-secondary-bg: var(--bh-flaeche-2);
  --bs-tertiary-bg: var(--bh-flaeche-2);
  --bs-border-color: var(--bh-rand);
  --bs-border-radius: var(--bh-radius-klein);
  --bs-border-radius-lg: var(--bh-radius);
  --bs-link-color: var(--bh-primaer-text);
  --bs-link-color-rgb: 11, 90, 98;
  --bs-link-hover-color: var(--bh-primaer-dunkler);
  --bs-link-hover-color-rgb: 11, 88, 96;
  --bs-focus-ring-color: rgba(14, 108, 118, .35);

  --bs-primary: #0e6c76;   --bs-primary-rgb: 14, 108, 118;
  --bs-success: #18794e;   --bs-success-rgb: 24, 121, 78;
  --bs-danger: #c42b2b;    --bs-danger-rgb: 196, 43, 43;
  --bs-warning: #e9a23b;   --bs-warning-rgb: 233, 162, 59;
  --bs-info: #1d63b0;      --bs-info-rgb: 29, 99, 176;
  --bs-secondary: #59626e; --bs-secondary-rgb: 89, 98, 110;

  --bs-primary-bg-subtle: var(--bh-primaer-flaeche); --bs-primary-border-subtle: var(--bh-primaer-rand); --bs-primary-text-emphasis: var(--bh-primaer-text);
  --bs-success-bg-subtle: var(--bh-erfolg-flaeche);  --bs-success-border-subtle: var(--bh-erfolg-rand);  --bs-success-text-emphasis: var(--bh-erfolg-text);
  --bs-warning-bg-subtle: var(--bh-warnung-flaeche); --bs-warning-border-subtle: var(--bh-warnung-rand); --bs-warning-text-emphasis: var(--bh-warnung-text);
  --bs-danger-bg-subtle: var(--bh-gefahr-flaeche);   --bs-danger-border-subtle: var(--bh-gefahr-rand);   --bs-danger-text-emphasis: var(--bh-gefahr-text);
  --bs-info-bg-subtle: var(--bh-info-flaeche);       --bs-info-border-subtle: var(--bh-info-rand);       --bs-info-text-emphasis: var(--bh-info-text);
  --bs-secondary-bg-subtle: var(--bh-neutral-flaeche); --bs-secondary-border-subtle: var(--bh-neutral-rand); --bs-secondary-text-emphasis: var(--bh-neutral-text);
  --bs-light-bg-subtle: var(--bh-flaeche-2); --bs-light-border-subtle: var(--bh-rand); --bs-light-text-emphasis: var(--bh-neutral-text);
}

/* 2. Design-Tokens dunkel -------------------------------------------------- */
[data-bs-theme="dark"] {
  --bh-primaer: #1b7f89;
  --bh-marke-akzent: #f2bd45;
  --bh-primaer-dunkler: #23949f;
  --bh-primaer-text: #4fc1cc;
  --bh-primaer-flaeche: #0f2a2d;
  --bh-primaer-rand: #1f5258;

  --bh-grund: #0f1317;
  --bh-flaeche: #161b21;
  --bh-flaeche-2: #1d232a;
  --bh-rand: #2b333c;
  --bh-rand-stark: #3d4752;
  --bh-text: #e6e9ed;
  --bh-text-gedaempft: #9aa4af;

  --bh-erfolg: #2ea86a;  --bh-erfolg-text: #7ad9a6;  --bh-erfolg-flaeche: #12291d;  --bh-erfolg-rand: #1f4d33;
  --bh-warnung: #d98a1f; --bh-warnung-text: #f5b25c; --bh-warnung-flaeche: #2e2110; --bh-warnung-rand: #5a3f17;
  --bh-gefahr: #e5534b;  --bh-gefahr-text: #ff9b97;  --bh-gefahr-flaeche: #33181a;  --bh-gefahr-rand: #6b2a2c;
  --bh-info: #4a90e2;    --bh-info-text: #93c2f5;    --bh-info-flaeche: #14243a;    --bh-info-rand: #24456e;
  --bh-neutral-text: #c4cbd3; --bh-neutral-flaeche: #232a32; --bh-neutral-rand: #36404b;

  --bh-schatten: 0 1px 2px rgba(0, 0, 0, .4);
  --bh-schatten-gross: 0 12px 32px rgba(0, 0, 0, .55);

  --bs-body-bg: var(--bh-grund);
  --bs-body-bg-rgb: 15, 19, 23;
  --bs-body-color: var(--bh-text);
  --bs-emphasis-color: var(--bh-text);
  --bs-secondary-color: var(--bh-text-gedaempft);
  --bs-secondary-bg: var(--bh-flaeche-2);
  --bs-tertiary-bg: var(--bh-flaeche-2);
  --bs-border-color: var(--bh-rand);
  --bs-link-color: var(--bh-primaer-text);
  --bs-link-color-rgb: 79, 193, 204;
  --bs-link-hover-color: #7fd6de;
  --bs-link-hover-color-rgb: 127, 214, 222;
  --bs-focus-ring-color: rgba(79, 193, 204, .4);

  --bs-primary: #1b7f89; --bs-primary-rgb: 27, 127, 137;
  --bs-success-rgb: 24, 121, 78;
  --bs-danger-rgb: 196, 43, 43;

  --bs-primary-bg-subtle: var(--bh-primaer-flaeche); --bs-primary-border-subtle: var(--bh-primaer-rand); --bs-primary-text-emphasis: var(--bh-primaer-text);
  --bs-success-bg-subtle: var(--bh-erfolg-flaeche);  --bs-success-border-subtle: var(--bh-erfolg-rand);  --bs-success-text-emphasis: var(--bh-erfolg-text);
  --bs-warning-bg-subtle: var(--bh-warnung-flaeche); --bs-warning-border-subtle: var(--bh-warnung-rand); --bs-warning-text-emphasis: var(--bh-warnung-text);
  --bs-danger-bg-subtle: var(--bh-gefahr-flaeche);   --bs-danger-border-subtle: var(--bh-gefahr-rand);   --bs-danger-text-emphasis: var(--bh-gefahr-text);
  --bs-info-bg-subtle: var(--bh-info-flaeche);       --bs-info-border-subtle: var(--bh-info-rand);       --bs-info-text-emphasis: var(--bh-info-text);
  --bs-secondary-bg-subtle: var(--bh-neutral-flaeche); --bs-secondary-border-subtle: var(--bh-neutral-rand); --bs-secondary-text-emphasis: var(--bh-neutral-text);
  --bs-light-bg-subtle: var(--bh-flaeche-2); --bs-light-border-subtle: var(--bh-rand); --bs-light-text-emphasis: var(--bh-neutral-text);
  color-scheme: dark;
}

/* 3. Grundlagen ------------------------------------------------------------ */
html { scroll-padding-top: calc(var(--bh-kopf-hoehe) + 1rem); } /* Fokus nie unter der Kopfleiste (WCAG 2.4.11) */
body { background: var(--bh-grund); -webkit-font-smoothing: antialiased; }
h1, .h1 { font-size: 1.625rem; font-weight: 650; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.25rem; font-weight: 650; }
h3, .h3 { font-size: 1.0625rem; font-weight: 650; }
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; }
.icon-gross { width: 1.5rem; height: 1.5rem; }
.pzn, .font-monospace { font-family: var(--bh-schrift-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.zahl { font-variant-numeric: tabular-nums; }
code { color: var(--bh-primaer-text); }

/* Deutlicher Tastatur-Fokus überall (WCAG 2.4.7 / 2.4.13) */
:focus-visible { outline: 3px solid var(--bh-primaer); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  outline: none; box-shadow: 0 0 0 3px var(--bs-focus-ring-color); border-color: var(--bh-primaer);
}

/* Sprunglink: erstes Element für Tastatur und Vorleseprogramm */
.sprunglink { position: absolute; left: 1rem; top: -4rem; z-index: 2000; padding: .5rem 1rem; border-radius: var(--bh-radius-klein);
  background: var(--bh-primaer); color: #fff; font-weight: 600; text-decoration: none; }
.sprunglink:focus { top: 1rem; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 4. Layout ---------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.app-haupt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.seitenleiste .offcanvas-lg { --bs-offcanvas-width: var(--bh-leiste-breite); --bs-offcanvas-bg: var(--bh-flaeche); }
.leiste-innen { display: flex; flex-direction: column; height: 100%; width: 100%; }
@media (min-width: 992px) {
  .seitenleiste { width: var(--bh-leiste-breite); flex-shrink: 0; position: sticky; top: 0; height: 100vh;
    background: var(--bh-flaeche); border-right: 1px solid var(--bh-rand); }
  .seitenleiste .offcanvas-lg { height: 100%; }
  .seitenleiste .offcanvas-body { height: 100%; overflow-y: auto; }
}

.marke { display: flex; align-items: center; gap: .625rem; padding: 1rem 1rem .75rem; text-decoration: none; color: var(--bh-text); }
.marke:hover { color: var(--bh-text); }
.marke-zeichen { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.marke-name { font-weight: 700; font-size: 1.0625rem; line-height: 1.1; display: block; }
.marke-zusatz { font-size: .75rem; color: var(--bh-text-gedaempft); display: block; }

.kopfleiste { position: sticky; top: 0; z-index: 1020; height: var(--bh-kopf-hoehe); display: flex; align-items: center; gap: .75rem;
  padding: 0 1.5rem; background: color-mix(in srgb, var(--bh-flaeche) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bh-rand); }
.kopfleiste .breadcrumb { margin: 0; font-size: .875rem; --bs-breadcrumb-divider-color: var(--bh-text-gedaempft); }
.kopfleiste .breadcrumb a { color: var(--bh-text-gedaempft); text-decoration: none; }
.kopfleiste .breadcrumb a:hover { color: var(--bh-primaer-text); text-decoration: underline; }
.benutzer-knopf { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid transparent; background: none;
  border-radius: 999px; padding: .25rem .5rem .25rem .25rem; color: var(--bh-text); min-height: 2.5rem; }
.benutzer-knopf:hover { background: var(--bh-flaeche-2); }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700;
  background: var(--bh-primaer-flaeche); color: var(--bh-primaer-text); border: 1px solid var(--bh-primaer-rand); }

.inhalt { flex: 1 1 auto; padding: 1.5rem 1.5rem 3rem; width: 100%; max-width: 92rem; }
@media (min-width: 1200px) { .inhalt { padding: 2rem 2.5rem 3rem; } }
.inhalt-schmal { max-width: 48rem; }

/* 5. Navigation ------------------------------------------------------------ */
.nav-leiste { padding: .25rem .75rem 1rem; }
.nav-gruppe-titel { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--bh-text-gedaempft); padding: 1.125rem .75rem .375rem; margin: 0; }
.nav-punkt { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; padding: .375rem .75rem; margin: 1px 0;
  border-radius: var(--bh-radius-klein); color: var(--bh-text); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.nav-punkt .icon { width: 1.125rem; height: 1.125rem; color: var(--bh-text-gedaempft); }
.nav-punkt:hover { background: var(--bh-flaeche-2); color: var(--bh-text); }
.nav-punkt[aria-current="page"] { background: var(--bh-primaer-flaeche); color: var(--bh-primaer-text); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--bh-primaer); }
.nav-punkt[aria-current="page"] .icon { color: var(--bh-primaer-text); }
.nav-zaehler { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  line-height: 1.375rem; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--bh-neutral-flaeche); color: var(--bh-neutral-text); border: 1px solid var(--bh-neutral-rand); }
.nav-zaehler-warning { background: var(--bh-warnung-flaeche); color: var(--bh-warnung-text); border-color: var(--bh-warnung-rand); }
.nav-zaehler-danger { background: var(--bh-gefahr); color: #fff; border-color: var(--bh-gefahr); }
.leiste-fuss { margin-top: auto; padding: .75rem 1rem 1rem; font-size: .75rem; color: var(--bh-text-gedaempft); border-top: 1px solid var(--bh-rand); }

/* 6. Bausteine ------------------------------------------------------------- */

/* Seitenkopf: Titel, ein Satz Einleitung, Hauptaktionen rechts */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.seitenkopf h1 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.seitenkopf-einleitung { margin: .375rem 0 0; color: var(--bh-text-gedaempft); max-width: 75ch; }
.seitenkopf-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Hilfe-Kasten „So funktioniert diese Seite“ – aufklappbar, immer an derselben Stelle */
.hilfe { border: 1px solid var(--bh-info-rand); background: var(--bh-info-flaeche); border-radius: var(--bh-radius); margin-bottom: 1.25rem; }
.hilfe > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .625rem 1rem;
  font-weight: 600; font-size: .9375rem; color: var(--bh-info-text); min-height: 2.75rem; border-radius: var(--bh-radius); }
.hilfe > summary::-webkit-details-marker { display: none; }
.hilfe > summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.hilfe[open] > summary::after { transform: rotate(-135deg); }
.hilfe-inhalt { padding: 0 1rem 1rem 2.5rem; max-width: 85ch; font-size: .9375rem; }
.hilfe-inhalt > :last-child { margin-bottom: 0; }
.hilfe-inhalt dt { font-weight: 650; }
.hilfe-inhalt dd { margin-bottom: .5rem; }

/* Status: immer Farbe + Icon + Text (nie Farbe allein) */
.status { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem .125rem .5rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; line-height: 1.5; border: 1px solid; white-space: nowrap; vertical-align: middle; }
.status .icon { width: .9375rem; height: .9375rem; }
.status-success { color: var(--bh-erfolg-text); background: var(--bh-erfolg-flaeche); border-color: var(--bh-erfolg-rand); }
.status-warning { color: var(--bh-warnung-text); background: var(--bh-warnung-flaeche); border-color: var(--bh-warnung-rand); }
.status-danger  { color: var(--bh-gefahr-text); background: var(--bh-gefahr-flaeche); border-color: var(--bh-gefahr-rand); }
.status-info    { color: var(--bh-info-text); background: var(--bh-info-flaeche); border-color: var(--bh-info-rand); }
.status-primary { color: var(--bh-primaer-text); background: var(--bh-primaer-flaeche); border-color: var(--bh-primaer-rand); }
.status-secondary, .status-neutral { color: var(--bh-neutral-text); background: var(--bh-neutral-flaeche); border-color: var(--bh-neutral-rand); }
.status-light   { color: var(--bh-text-gedaempft); background: transparent; border-color: var(--bh-rand); border-style: dashed; }
.status-gross { font-size: .9375rem; padding: .25rem .875rem .25rem .625rem; }

/* Kleine Kennzeichen (Test, Herkunft, Dateityp) – ruhiger als Status */
.kennzeichen { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .4375rem; border-radius: .375rem; font-size: .75rem;
  font-weight: 600; line-height: 1.375rem; white-space: nowrap; vertical-align: middle;
  background: var(--bh-neutral-flaeche); color: var(--bh-neutral-text); border: 1px solid var(--bh-neutral-rand); text-decoration: none; }
a.kennzeichen:hover { border-color: var(--bh-primaer); color: var(--bh-primaer-text); }
.kennzeichen-test { background: var(--bh-info-flaeche); color: var(--bh-info-text); border-color: var(--bh-info-rand); }
.kennzeichen-echt { background: var(--bh-gefahr-flaeche); color: var(--bh-gefahr-text); border-color: var(--bh-gefahr-rand); }
.kennzeichen-ki { background: var(--bh-primaer-flaeche); color: var(--bh-primaer-text); border-color: var(--bh-primaer-rand); }

/* Kennzahl-Kachel auf Übersichten */
.kennzahl { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; height: 100%; text-decoration: none; color: var(--bh-text);
  background: var(--bh-flaeche); border: 1px solid var(--bh-rand); border-radius: var(--bh-radius); box-shadow: var(--bh-schatten); }
a.kennzahl:hover { border-color: var(--bh-primaer-rand); color: var(--bh-text); }
.kennzahl-symbol { width: 2.75rem; height: 2.75rem; border-radius: .625rem; display: grid; place-items: center; flex-shrink: 0;
  background: var(--bh-neutral-flaeche); color: var(--bh-neutral-text); }
.kennzahl-symbol .icon { width: 1.375rem; height: 1.375rem; }
.kennzahl-wert { font-size: 1.625rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl-text { font-size: .875rem; color: var(--bh-text-gedaempft); }
.kennzahl-danger .kennzahl-symbol { background: var(--bh-gefahr-flaeche); color: var(--bh-gefahr-text); }
.kennzahl-warning .kennzahl-symbol { background: var(--bh-warnung-flaeche); color: var(--bh-warnung-text); }
.kennzahl-primary .kennzahl-symbol { background: var(--bh-primaer-flaeche); color: var(--bh-primaer-text); }
.kennzahl-success .kennzahl-symbol { background: var(--bh-erfolg-flaeche); color: var(--bh-erfolg-text); }

/* Aufgaben-Liste „Was ist zu tun?“ */
.aufgabe { display: flex; align-items: flex-start; gap: .875rem; padding: .875rem 1.25rem; border-top: 1px solid var(--bh-rand); }
.aufgabe:first-child { border-top: 0; }
.aufgabe-symbol { width: 2.25rem; height: 2.25rem; border-radius: .5rem; display: grid; place-items: center; flex-shrink: 0; }
.aufgabe-danger .aufgabe-symbol { background: var(--bh-gefahr-flaeche); color: var(--bh-gefahr-text); }
.aufgabe-warning .aufgabe-symbol { background: var(--bh-warnung-flaeche); color: var(--bh-warnung-text); }
.aufgabe-primary .aufgabe-symbol { background: var(--bh-primaer-flaeche); color: var(--bh-primaer-text); }
.aufgabe-titel { font-weight: 650; }
.aufgabe-text { font-size: .875rem; color: var(--bh-text-gedaempft); }
.aufgabe .btn { margin-left: auto; flex-shrink: 0; align-self: center; }

/* Leerer Zustand: was ist hier, warum leer, was als Nächstes */
.leer { text-align: center; padding: 2.5rem 1.5rem; }
.leer-symbol { width: 3rem; height: 3rem; margin: 0 auto .75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--bh-neutral-flaeche); color: var(--bh-text-gedaempft); }
.leer-symbol .icon { width: 1.5rem; height: 1.5rem; }
.leer-titel { font-weight: 650; margin-bottom: .25rem; }
.leer-text { color: var(--bh-text-gedaempft); max-width: 48ch; margin: 0 auto 1rem; font-size: .9375rem; }

/* Schritte eines Ablaufs (z. B. Liste: Hochladen → Prüfen → Bestellen → Verfolgen) */
.schritte { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0 0 1.25rem; counter-reset: schritt; }
.schritte li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--bh-text-gedaempft); counter-increment: schritt; }
.schritte li::before { content: counter(schritt); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; border: 1.5px solid var(--bh-rand-stark); background: var(--bh-flaeche); }
.schritte li:not(:last-child)::after { content: ""; width: 1.5rem; height: 1.5px; background: var(--bh-rand-stark); margin: 0 .25rem; }
.schritte li.erledigt { color: var(--bh-text); }
.schritte li.erledigt::before { content: "✓"; background: var(--bh-primaer); border-color: var(--bh-primaer); color: #fff; }
.schritte li.aktuell { color: var(--bh-primaer-text); font-weight: 650; }
.schritte li.aktuell::before { border-color: var(--bh-primaer); color: var(--bh-primaer-text); background: var(--bh-primaer-flaeche); }

/* Datei-Ablage zum Hochladen */
.ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center; cursor: pointer;
  min-height: 11rem; padding: 2rem 1rem; border: 2px dashed var(--bh-rand-stark); border-radius: var(--bh-radius);
  background: var(--bh-flaeche-2); transition: border-color .15s, background .15s; }
.ablage:hover, .ablage.ablage-aktiv { border-color: var(--bh-primaer); background: var(--bh-primaer-flaeche); }
.ablage .icon { width: 2.25rem; height: 2.25rem; color: var(--bh-primaer); margin-bottom: .25rem; }

/* Ernste Aktionen (echte Bestellung, kein Storno) */
.ernst { border: 2px solid var(--bh-gefahr) !important; }
.ernst-kopf { background: var(--bh-gefahr-flaeche); color: var(--bh-gefahr-text); }

/* Technische Nachricht (Protokoll) – bewusst immer dunkel */
.code-block { background: #10161d; color: #e6edf3; padding: 1rem; border-radius: var(--bh-radius-klein); font-size: .8125rem;
  white-space: pre-wrap; word-break: break-word; max-height: 70vh; overflow: auto; border: 1px solid var(--bh-rand); }

/* Definitionsliste für Eckdaten */
.eckdaten { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .375rem 1.25rem; margin: 0; }
.eckdaten dt { color: var(--bh-text-gedaempft); font-weight: 500; }
.eckdaten dd { margin: 0; }

/* Ladeanzeige für HTMX-Anfragen */
.lade-kreis { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: drehen .75s linear infinite; vertical-align: -.2em; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* 7. Bootstrap angepasst --------------------------------------------------- */
.card { --bs-card-bg: var(--bh-flaeche); --bs-card-border-color: var(--bh-rand); --bs-card-border-radius: var(--bh-radius);
  --bs-card-inner-border-radius: calc(var(--bh-radius) - 1px); --bs-card-cap-bg: transparent; --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-padding-y: .875rem; box-shadow: var(--bh-schatten); }
.card-header { font-weight: 650; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.card-header .icon { color: var(--bh-text-gedaempft); }
.card-header .rechts { margin-left: auto; font-weight: 400; }
.card-footer { background: var(--bh-flaeche-2); }
.shadow-sm { box-shadow: var(--bh-schatten) !important; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--bh-text); --bs-table-border-color: var(--bh-rand);
  --bs-table-hover-bg: var(--bh-flaeche-2); --bs-table-hover-color: var(--bh-text); --bs-table-striped-bg: var(--bh-flaeche-2);
  font-size: .9375rem; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .625rem .875rem; }
.table-sm > :not(caption) > * > * { padding: .375rem .625rem; }
.table > thead th, .table-light > * > th, thead.table-light th {
  --bs-table-bg: var(--bh-flaeche-2); --bs-table-color: var(--bh-text-gedaempft);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 650; white-space: nowrap; }
.table-light { --bs-table-bg: var(--bh-flaeche-2); --bs-table-color: var(--bh-text); --bs-table-border-color: var(--bh-rand); }
.table-danger { --bs-table-bg: var(--bh-gefahr-flaeche); --bs-table-color: var(--bh-text); --bs-table-border-color: var(--bh-gefahr-rand); --bs-table-hover-bg: var(--bh-gefahr-flaeche); }
.table-warning { --bs-table-bg: var(--bh-warnung-flaeche); --bs-table-color: var(--bh-text); --bs-table-border-color: var(--bh-warnung-rand); --bs-table-hover-bg: var(--bh-warnung-flaeche); }
.table-success { --bs-table-bg: var(--bh-erfolg-flaeche); --bs-table-color: var(--bh-text); --bs-table-border-color: var(--bh-erfolg-rand); --bs-table-hover-bg: var(--bh-erfolg-flaeche); }
.table-primary { --bs-table-bg: var(--bh-primaer-flaeche); --bs-table-color: var(--bh-text); --bs-table-border-color: var(--bh-primaer-rand); }
/* Zeilen mit Bedeutung zusätzlich mit Randstreifen kennzeichnen – nicht nur über die Farbe */
.table-danger > :first-child { box-shadow: inset 4px 0 0 var(--bh-gefahr), inset 0 0 0 9999px var(--bs-table-bg) !important; }
.table-warning > :first-child { box-shadow: inset 4px 0 0 var(--bh-warnung), inset 0 0 0 9999px var(--bs-table-bg) !important; }
.table-success > :first-child { box-shadow: inset 4px 0 0 var(--bh-erfolg), inset 0 0 0 9999px var(--bs-table-bg) !important; }
.table-primary > :first-child { box-shadow: inset 4px 0 0 var(--bh-primaer), inset 0 0 0 9999px var(--bs-table-bg) !important; }
.card > .table-responsive:last-child > .table > tbody > tr:last-child > * { border-bottom: 0; }

.form-label { font-weight: 600; margin-bottom: .375rem; }
.form-text { color: var(--bh-text-gedaempft); }
.form-control, .form-select { border-color: var(--bh-rand-stark); background-color: var(--bh-flaeche); min-height: 2.5rem; }
.form-control-sm, .form-select-sm { min-height: 2rem; }
.form-control::placeholder { color: var(--bh-text-gedaempft); opacity: .8; }
.form-check-input { border-color: var(--bh-rand-stark); width: 1.125em; height: 1.125em; margin-top: .2em; }
.form-check-input:checked { background-color: var(--bh-primaer); border-color: var(--bh-primaer); }
.form-check-label { cursor: pointer; }
.pflicht { color: var(--bh-gefahr-text); }

.btn { --bs-btn-font-weight: 600; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .5rem; --bs-btn-border-radius: var(--bh-radius-klein);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; }
.btn-sm { --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; --bs-btn-font-size: .8125rem; min-height: 2rem; gap: .375rem; }
.btn-lg { --bs-btn-padding-x: 1.375rem; --bs-btn-padding-y: .625rem; --bs-btn-font-size: 1.0625rem; min-height: 3rem; }
.btn-link { --bs-btn-font-weight: 600; min-height: 0; }
.btn-primary { --bs-btn-bg: var(--bh-primaer); --bs-btn-border-color: var(--bh-primaer); --bs-btn-hover-bg: var(--bh-primaer-dunkler);
  --bs-btn-hover-border-color: var(--bh-primaer-dunkler); --bs-btn-active-bg: var(--bh-primaer-dunkler); --bs-btn-active-border-color: var(--bh-primaer-dunkler);
  --bs-btn-disabled-bg: var(--bh-primaer); --bs-btn-disabled-border-color: var(--bh-primaer); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.btn-outline-primary { --bs-btn-color: var(--bh-primaer-text); --bs-btn-border-color: var(--bh-primaer); --bs-btn-hover-bg: var(--bh-primaer);
  --bs-btn-hover-border-color: var(--bh-primaer); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--bh-primaer-dunkler);
  --bs-btn-active-border-color: var(--bh-primaer-dunkler); --bs-btn-disabled-color: var(--bh-primaer-text); --bs-btn-disabled-border-color: var(--bh-primaer-rand); }
.btn-outline-secondary { --bs-btn-color: var(--bh-text); --bs-btn-border-color: var(--bh-rand-stark); --bs-btn-bg: var(--bh-flaeche);
  --bs-btn-hover-bg: var(--bh-flaeche-2); --bs-btn-hover-color: var(--bh-text); --bs-btn-hover-border-color: var(--bh-rand-stark);
  --bs-btn-active-bg: var(--bh-flaeche-2); --bs-btn-active-color: var(--bh-text); --bs-btn-active-border-color: var(--bh-text-gedaempft); }
.btn-danger { --bs-btn-bg: #c42b2b; --bs-btn-border-color: #c42b2b; --bs-btn-hover-bg: #a51d24; --bs-btn-hover-border-color: #a51d24;
  --bs-btn-active-bg: #8f1a20; --bs-btn-disabled-bg: #c42b2b; --bs-btn-disabled-border-color: #c42b2b; }
.btn-outline-danger { --bs-btn-color: var(--bh-gefahr-text); --bs-btn-border-color: var(--bh-gefahr-rand); --bs-btn-hover-bg: #c42b2b;
  --bs-btn-hover-border-color: #c42b2b; --bs-btn-hover-color: #fff; --bs-btn-bg: var(--bh-flaeche); }
.btn-success { --bs-btn-bg: #18794e; --bs-btn-border-color: #18794e; --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43;
  --bs-btn-active-bg: #10593a; --bs-btn-disabled-bg: #18794e; --bs-btn-disabled-border-color: #18794e; }
.btn-warning { --bs-btn-bg: #e9a23b; --bs-btn-border-color: #e9a23b; --bs-btn-hover-bg: #d98f22; --bs-btn-hover-border-color: #d98f22; --bs-btn-color: #1c2229; --bs-btn-hover-color: #1c2229; }
.btn-geist { --bs-btn-color: var(--bh-text); --bs-btn-hover-bg: var(--bh-flaeche-2); --bs-btn-hover-color: var(--bh-text); --bs-btn-border-color: transparent; }

.alert { --bs-alert-border-radius: var(--bh-radius); border-left-width: 4px; }
.alert-danger { border-left-color: var(--bh-gefahr); }
.alert-warning { border-left-color: var(--bh-warnung); }
.alert-success { border-left-color: var(--bh-erfolg); }
.alert-info { border-left-color: var(--bh-info); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--bh-flaeche); --bs-alert-color: var(--bh-text); --bs-alert-border-color: var(--bh-rand); border-left-color: var(--bh-rand-stark); }
.alert-mit-icon { display: flex; gap: .75rem; align-items: flex-start; }
.alert-mit-icon > .icon { width: 1.25rem; height: 1.25rem; margin-top: .125rem; }
.alert-mit-icon > div { flex: 1 1 auto; min-width: 0; }

.badge { font-weight: 650; border-radius: .375rem; }
.dropdown-menu { --bs-dropdown-bg: var(--bh-flaeche); --bs-dropdown-border-color: var(--bh-rand); --bs-dropdown-link-active-bg: var(--bh-primaer);
  --bs-dropdown-border-radius: var(--bh-radius); box-shadow: var(--bh-schatten-gross); padding: .375rem; }
.dropdown-item { border-radius: .375rem; display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; }
.dropdown-item .icon { color: var(--bh-text-gedaempft); }
.list-group { --bs-list-group-bg: var(--bh-flaeche); --bs-list-group-border-color: var(--bh-rand); }
.nav-tabs { --bs-nav-tabs-link-active-bg: var(--bh-flaeche); --bs-nav-tabs-link-active-color: var(--bh-primaer-text); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bh-primaer); }
.nav-pills .nav-link { color: var(--bh-text); font-weight: 600; font-size: .875rem; }
.nav-pills .nav-link .nav-zaehler { margin-left: .375rem; }
.offcanvas { --bs-offcanvas-bg: var(--bh-flaeche); }
.text-body-secondary { color: var(--bh-text-gedaempft) !important; }
details > summary { cursor: pointer; }

/* 8. Druck ----------------------------------------------------------------- */
@media print {
  .seitenleiste, .kopfleiste, .hilfe, .seitenkopf-aktionen, .sprunglink { display: none !important; }
  .inhalt { padding: 0; max-width: none; }
  .card { box-shadow: none; }
}

/* Leere Blöcke im Seitenkopf nicht anzeigen */
.seitenkopf-einleitung:empty, .seitenkopf-aktionen:empty { display: none; }
.min-w-0 { min-width: 0; }

/* Zweispaltige Seiten richten sich nach dem Platz im Inhaltsbereich (nicht nach der Fensterbreite),
   weil die Seitenleiste schon Platz belegt. Container Queries: in allen aktuellen Browsern. */
.inhalt { container: inhalt / inline-size; }
.raster-mit-dokument { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container inhalt (min-width: 88rem) {
  .raster-mit-dokument { grid-template-columns: minmax(0, 1fr) minmax(24rem, 36rem); }
  .raster-mit-dokument > .dokument-spalte { position: sticky; top: calc(var(--bh-kopf-hoehe) + 1rem); }
}
.status, .kennzeichen { font-family: var(--bh-schrift); letter-spacing: 0; }

/* Gewählte Darstellung im Menü und auf „Mein Konto“ erkennbar machen */
.dropdown-item[aria-pressed="true"] { font-weight: 650; color: var(--bh-primaer-text); }
.dropdown-item[aria-pressed="true"]::after { content: "✓"; margin-left: auto; }
.btn[aria-pressed="true"] { background: var(--bh-primaer-flaeche); border-color: var(--bh-primaer); color: var(--bh-primaer-text); }

/* Textfarben für Bedeutung immer in der gut lesbaren „Text“-Variante (auch im Dunkelmodus ≥ 4,5:1) */
.text-danger { color: var(--bh-gefahr-text) !important; }
.text-success { color: var(--bh-erfolg-text) !important; }
.text-warning { color: var(--bh-warnung-text) !important; }

/* Kleine Links (z. B. einstellige Nummern) mindestens 24 × 24 px groß – WCAG 2.5.8 */
.ziel-gross { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; }

/* Lücke im Apotheken-Ordner bzw. Eingabezeile „neu“: zurückgenommen, damit eingerichtete Zeilen hervortreten */
.zeile-leer > td { background: var(--bh-neutral-flaeche); }
.ordner-pausiert { opacity: .7; }

/* --- Sortier-Baustein (static/js/sortieren.js): ziehen, ↑ ↓, ✕ heraus, + wieder aufnehmen --- */
.sortier-liste { list-style: none; margin: 0; padding: 0; }
.sortier-eintrag { display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem; border-top: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); }
.sortier-liste > .sortier-eintrag:first-child { border-top: 0; }
[data-drin] > .sortier-eintrag { cursor: grab; }
.sortier-eintrag.wird-gezogen { opacity: .5; outline: 2px dashed var(--bh-primaer); }
.sortier-griff { color: var(--bs-secondary-color); flex: none; }
.sortier-platz { flex: none; min-width: 4.75rem; font-weight: 600; color: var(--bh-primaer-text); }
.sortier-inhalt { flex: 1 1 auto; min-width: 0; }
.sortier-knoepfe { display: flex; gap: .25rem; flex: none; }
.sortier-knopf { padding: .25rem .4rem; min-width: 2rem; min-height: 2rem; }
.sortier-knopf-rein { display: none; }
[data-raus] .sortier-knopf, [data-raus] .sortier-griff { display: none; }
[data-raus] .sortier-knopf-rein { display: inline-flex; align-items: center; gap: .25rem; }
[data-raus] .sortier-eintrag { background: var(--bh-neutral-flaeche); color: var(--bs-secondary-color); }
[data-raus] .sortier-platz { color: var(--bs-secondary-color); }
.sortier-raus-titel { padding: .5rem 1rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color); background: var(--bh-neutral-flaeche); border-top: 1px solid var(--bs-border-color); }
.nur-erster { display: none; }
.ist-erster .nur-erster { display: inline-flex; }
.sortier-hinweis-ungespeichert { display: none; }
.ist-geaendert .sortier-hinweis-ungespeichert { display: inline-flex; }
.ist-aus [data-drin], .ist-aus [data-raus], .ist-aus .sortier-raus-titel { opacity: .55; pointer-events: none; }
.sortier-hinweis-aus { display: none; }
.ist-aus .sortier-hinweis-aus { display: block; }
@media (max-width: 575.98px) {
  .sortier-eintrag { flex-wrap: wrap; }
  .sortier-knoepfe { margin-left: auto; }
}

/* --- Live-Terminal der Laufseite (templates/listen/_live.html) ---
   Bewusst in beiden Darstellungen dunkel: so liest man es wie ein Terminal, und die Farben
   der Zeilenarten (grün/gelb/rot/blau) haben immer genug Kontrast (WCAG AA auf #0f1720). */
:root {
  --bh-terminal-flaeche: #0f1720; --bh-terminal-text: #d7e0e7; --bh-terminal-leise: #8b9aa6;
  --bh-terminal-senden: #7cc7d6; --bh-terminal-erfolg: #7ee2a8; --bh-terminal-warnung: #f5c46a; --bh-terminal-fehler: #ff8a80;
}
.live-jetzt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.live-punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--bh-erfolg-text); animation: live-puls 1.6s ease-in-out infinite; }
@keyframes live-puls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-punkt { animation: none; } }
.terminal { display: flex; flex-direction: column-reverse; max-height: 30rem; min-height: 8rem; overflow: auto; padding: .75rem 1rem;
  background: var(--bh-terminal-flaeche); color: var(--bh-terminal-text); font-family: var(--bs-font-monospace); font-size: .8125rem;
  line-height: 1.55; border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }
.t-zeile { white-space: pre-wrap; overflow-wrap: anywhere; }
.t-zeit { color: var(--bh-terminal-leise); }
.t-senden { color: var(--bh-terminal-senden); }
.t-erfolg { color: var(--bh-terminal-erfolg); }
.t-warnung { color: var(--bh-terminal-warnung); }
.t-fehler { color: var(--bh-terminal-fehler); font-weight: 600; }