/* ═══════════════════════════════════════════════════════════════════════
   BERGSTRASSE-PORTAL — Design Tokens (QUELLE DER WAHRHEIT)
   Alle Tools (Datenimport, Reklamationen, Liefergebiet) müssen diese Werte verwenden.
   Änderungen hier propagieren ins gesamte Portal.
   ═══════════════════════════════════════════════════════════════════════

   FARBEN
   ──────
   --text:        #202124   Primärtext (Überschriften, Werte, Labels)
   --sub:         #5f6368   Gedämpfter Text (Untertitel, Metadaten, Icons)
   --label:       #95a5a6   Tertiär (Tabellen-Header, Zählerpills)
   --green:       #27ae60   Primäre Akzentfarbe (Buttons, Stripes, Badges)
   --green-dark:  #219a52   Hover-/Dunkelton für Grün
   --red:         #ea4335   Negative Aktionen / Fehler-Stripe
   --blue:        #4285f4   Info / Liefergebiet-Stripe
   --yellow:      #ffc107   Hinweis / in Bearbeitung (SMS-Bestätigung, Erinnerung)
   --yellow-bg:   #fff8e1   Hintergrund für gelbe Hinweis-Boxen
   --border:      #e0e0e0   Rahmen für Cards, Inputs, Modal-Header/Footer
   --divider:     1px solid #f0f2f5
                            Feine Trennlinie im Inhalt: zwischen .info-row in
                            Boxen (Logistikpartner, Kunde, Reklamation, …),
                            zwischen Tabellenzeilen (.rkl-table tbody td),
                            zwischen Abschnitten in Modals (z.B. SMS-Dialog
                            ueber/unter Optionen). IMMER var(--divider)
                            verwenden, NIE Inline-Styles oder feste Werte.
                            (Strukturelle Rahmen wie Modal-Header/Footer:
                            bleiben bei var(--border) #e0e0e0.)
   --bg:          #f4f5f7   Seitenhintergrund
   --surface:     #ffffff   Card-/Panel-Hintergrund

   KARTEN
   ──────
   --radius:        0.5rem (8px)   Eckenradius fuer Cards, Modals, Kacheln.
                    ZENTRALE Stellschraube — IMMER var(--radius) verwenden,
                    NIE feste px/rem-Werte fuer Card-/Modal-Ecken hardcoden.
                    Auf Smartphones (<768px) automatisch 0.375rem (6px) via
                    @media-Override auf :root → einheitlicher, kompakterer Look.
                    (Buttons/Inputs 8px, Pills voll rund — separat, s. u.)
   --card-shadow:   0 1px 4px rgba(0,0,0,.06)   Subtiler Tiefeneffekt
   --card-border:   1px solid #e0e0e0
   --card-padding:  1.75rem   Innenabstand (Datenimport, Liefergebiet)
   --stripe-height: 4px       Farbiger Akzent oben via ::before

   --chip-radius:   6px        Eckenradius fuer Pills/Badges/Chips (Status-Badges,
                    Kategorie-/Entscheidungs-Badges, Nav-Chips, Code-Chips, Tour-Badges).
                    ZENTRALE Stellschraube — IMMER var(--chip-radius) verwenden, NIE
                    feste px-Werte (frueher uneinheitlich 20px/50px/9999px = volle Pille).

   Stripe-Technik: Card hat ::before { content:''; display:block; height:4px;
   background:<farbe>; border-radius: var(--radius) var(--radius) 0 0; }
   — KEIN border-top (border-top folgt der border-radius-Kurve und sieht
   abgerundet aus). Die .box selbst hat KEIN overflow:hidden mehr, damit
   Portal-Dropdowns aus der Box ueberstehen koennen (sonst werden sie
   an der Unterkante abgeschnitten).

   DROPDOWN (system-weiter Standard, .portal-dropdown)
   ────────
   Loest native <select>-Dropdowns ab, weil deren Open-Menue vom Browser/
   OS gezeichnet wird und nicht stylbar ist. Portal-Dropdowns sehen auf
   allen Geraeten exakt gleich aus — abgesehen von der sichtbaren
   Checkbox bei .filter-multi. Bootstrap-Dropdown als Basis, gestylt
   ueber .portal-dropdown (+ Modifier .filter-single ODER .filter-multi).

   GEOEFFNETES MENUE
   Aspekt                 Wert
   ─────────────────────  ──────────────────────────────────────────────────
   Hintergrund            rgba(244, 245, 247, .35)  (Stat-Card-Grau, Alpha 35%)
   Backdrop-Filter        blur(18px) saturate(160%)  ('Frosted Glass')
   Border                 1px solid rgba(0, 0, 0, .08)
   Eckenradius            var(--system-btn-radius) = 8 px
   Shadow                 0 12px 32px rgba(0, 0, 0, .16)
   Innen-Padding          4px 0

   ITEMS
   Aspekt                 Wert
   ─────────────────────  ──────────────────────────────────────────────────
   Padding                6px 12px
   Horizontaler Inset     margin: 0 6px (Item haengt nicht am Menue-Rand)
   Breite                 calc(100% - 12px)
   Eckenradius            6 px  (eigene Pille je Zeile)
   Schrift-Farbe          var(--text) = #202124
   Hover/Focus/Selected   rgba(0, 0, 0, .12)
                          (abgerundete graue Pille, Vorbild: Chrome-Selected)
   Icons (<i class="bi …">)  color: var(--sub) = #5f6368, font-size: 1rem

   Trigger-Button (geschlossen): .form-select / .form-select-sm
   (Bootstrap-Default; Werte siehe FORMULARFELDER unten).

   Anwendung: <div class="dropdown portal-dropdown filter-single">…</div>
            oder ...filter-multi">…</div>
   Markup-Detail: Wert wird in einem hidden <input name="..."> getragen;
                  Klick-Handler lebt zentral in static/portal.js.
                  Filter-single zeigt im Button das gewaehlte Label;
                  filter-multi zeigt 'n Auswahl' (bzw. den Wert bei n=1).

   TYPOGRAFIE
   ──────────
   Font-Stack:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
                     body setzt den Stack — KEIN font-family auf Einzelelementen wiederholen

   Nav Brand:        16px / 700 / #202124   → .tool-nav-brand (alle Seiten, auch lp_view)
   Nav Links:        13px / 500 / #5f6368
   Body-Text:        14px / 400 / #202124   (RKL nutzt Bootstrap-Base 0.875rem = 14px)
   Fließtext klein:  13px / 400 / #5f6368   (Metadaten, Hints, Sub-Infos)
   Card-Titel:       14px / 700 / #202124
   Card-Untertitel:  11.5px / #5f6368
   LABELS (einheitlich): Sentence Case / 0.8125rem (13 px) / 500 / kein
                    letter-spacing / #788087. Bewusste Modernisierung vom
                    klassischen Material-Look (UPPERCASE / 11.5 px / 600 /
                    .05em) auf einen ruhigeren, lesbareren Stil im Geiste
                    von Linear / Notion / Vercel. Caps loescht Ober-/
                    Unterlaengen, Sentence Case ist schneller scannbar;
                    Kontrast zum Feldwert kommt jetzt ueber Weight (500 vs
                    400) und Farbe (#788087 vs #202124), nicht mehr ueber
                    Caps. Gilt fuer ALLE Spaltenkoepfe, Filter-Beschriftungen
                    und Feld-Labels in Boxen. Zentrale Tokens: --label-color/
                    -size/-weight/-spacing. IMMER var(--label-*) verwenden,
                    nicht hardcoden.
   BOX-UEBERSCHRIFTEN (Card-Header, einheitlich): 0.875rem / 700 / #202124,
                    line-height 1.5 (fixe Header-Hoehe ~40px tool-uebergreifend,
                    unabhaengig davon ob Bootstrap geladen ist), Symbol davor
                    (bi-Icon), KEINE Unterueberschrift, Kopf-Padding 9px 14px.
                    Tokens: --box-title-color/-size/-weight/-padding/-line-height.
   Pills / Badges:   12px  / 600
   Stat-Zahlen:      1.9rem / 700  (bewusst groß für KPI-Kacheln, Ausnahme)

   ÖFFENTLICHE SEITEN (ohne Login)
   ────────────────────────────────
   lp_view.html und ähnliche öffentliche Seiten nutzen .tool-nav / .tool-nav-brand
   — KEIN custom .app-header / .app-title. So bleibt die Schriftgröße automatisch
   konsistent (16px/700 wie alle anderen Seiten).

   BUTTONS
   ───────
   Drei Ebenen – dieselbe Basis (radius 8px, font 14px/600):

   PRIMARY   bg #27ae60 / hover #219a52 / text weiß
             box-shadow: 0 1px 4px rgba(39,174,96,.25)
             hover-shadow: 0 2px 8px rgba(39,174,96,.35)
             disabled: bg #b0bec5, no shadow
             → Für die wichtigste Aktion pro Abschnitt (Speichern, Eintragen, Prüfen)

   SECONDARY bg #ffffff / hover #f4f5f7 / text #5f6368 / border 1px solid #e0e0e0
             hover-border: #aaa, hover-text: #202124
             → Für Nebenaktionen (Filter, Export, Grafik, Upload löschen)

   GHOST     bg #f4f5f7 / hover #e8eaed / text #5f6368 / kein Rahmen
             → Für tertiäre Aktionen (Leeren, Icon-Buttons wie 📍)

   NAV-UTILITY (kleiner, nav-Kontext)
             font-size 13px / padding 5px 12px / radius 6px
             bg #fff / border 1px solid #e0e0e0 / text #5f6368
             → Abmelden, Haus-Icon im Header

   FORMULARFELDER (Inputs, Textareas, Selects)
             font-size  16px    ← verhindert iOS Safari Auto-Zoom beim Fokus
             color      #202124 (Portal-Text-Token --text)
             font-family inherit (System-Stack vom body)
             Globale Regel in portal.css setzt das für alle echten Eingabefelder.
             In RKL (Bootstrap) zusätzlich .form-control/.form-select Override
             in style.css, da Bootstrap eigene Farben mitbringt.

   CHECKBOX / RADIO (.form-check-input) — systemweiter Standard
             Markup            Bootstrap-Klasse .form-check-input auf
                               <input type='checkbox'> bzw. <input type='radio'>
                               (genauso auch in Multi-Filter-Dropdowns).
             Visuelle Groesse  transform: scale(0.85) — Element wird inkl.
                               Border + Haekchen auf 85% verkleinert. Layout-
                               Box bleibt 1em x 1em → volle Klickflaeche, Label-
                               Position rutscht nicht. Sub-Pixel-border-width
                               waere DPR-abhaengig unzuverlaessig (Browser
                               rundet auf 1px), Scale ist DPR-unabhaengig.
             Vertikalausricht. vertical-align: middle + margin-top: 0
                               (ueberschreibt Bootstraps top + 0.25em, die auf
                               die unskalierte 1em-Groesse abgestimmt waren —
                               nach dem Scale waere die Box dadurch zu hoch).
                               Visual-Mitte sitzt jetzt sauber auf der Line-
                               Mitte; funktioniert sowohl in Tabellenzellen
                               (td vertical-align: middle) als auch in
                               .form-check-Bloecken.
             Farbe / Form      Bootstrap-Defaults bleiben (Border #dee2e6,
                               Checkbox-Radius 0.25em, Radio 50%).
             RKL-Spezialfall   Radios in Bearbeitung (Maskenansicht) und
                               Listenbearbeitung (Entscheidung Buero) werden
                               in tools/reklamationen/static/style.css optisch wie
                               Checkboxen gestylt (border-radius 0.25em +
                               Checkmark-SVG im checked-State). Behavior
                               bleibt Single-Choice ueber type='radio'.

             FUER NEUE TOOLS / BOXEN:
             - .form-check-input verwenden — Scale + Mittel-Ausrichtung
               kommen systemweit aus portal.css.
             - KEINE eigenen transform / vertical-align / margin-top hier
               setzen, sonst kippt die Ausrichtung wieder.
             - Wenn ein Radio wie eine Checkbox aussehen soll: das RKL-
               Pattern (border-radius 0.25em + Checkmark-SVG) kopieren,
               und mit hoher Spezifitaet
               (.form-check-input[name='…'][type='radio'])
               gegen den Bootstrap-Default arbeiten.

             VERTIKALE AUSRICHTUNG IN HOHEN CONTAINERN — LESSON LEARNED:
             - In hohen Tabellenzellen oder Boxen (z.B. tbody-td mit
               mehrzeiligem Nachbarinhalt) reicht 'vertical-align: middle'
               als Inline-Element NICHT, weil Inline-Alignment ueber Line-
               Box-Baselines laeuft, nicht ueber den geometrischen Cell-
               Mittelpunkt. Die Checkbox landet dann optisch zu hoch.
             - Loesung: die Checkbox im Container explizit auf
                   display: block; margin: 0 auto;
               umstellen. Dann zentriert das 'vertical-align: middle' des
               Parents sie als Block-Kind sauber vertikal (und auto-Margin
               horizontal). Wirkt zusammen mit dem systemweiten Scale.
             - Vorbild: .rkl-table .bulk-cell .form-check-input in
               tools/reklamationen/static/style.css.

   TEXTFELD (.textfield / .textfield-display)
             Aspekt              Wert
             ──────────────────  ──────────────────────────────────────────────
             Eckenradius         6 px   (--textfield-radius = 0.375rem)
                                 BEWUSST kleiner als Box-/Modal-Radius 8 px.
                                 .textfield-display erbt denselben Wert, damit
                                 View↔Edit-Wechsel nicht 'springt'.
             Focus-Ring          0 0 0 1px rgba(95, 99, 104, .40)
                                 (--textfield-focus-shadow; grauer 1px-Ring,
                                 Alpha .40, var(--sub)-Ton)
             Hintergrund         #f4f5f7    (--textfield-bg / -display-bg)
             Schrift-Groesse     Desktop: 0.875rem (= 14 px, gleich wie Body /
                                 Feldwert; Edit und Display identisch — kein
                                 Sprung beim Klick).
                                 Touch-Geraete (Phone/Tablet, '(hover:none)
                                 and (pointer:coarse)'): 16 px — verhindert
                                 iOS Safari Auto-Zoom beim Fokus.
             Padding             .5rem
             Border              1px solid transparent  (Platzhalter, damit
                                 die Geometrie beim Fokus nicht springt)
             Klick-Verhalten     .textfield-display ist klickbar
                                 (role='button'); Klick oeffnet Edit-Modus.
                                 Hover-bg: #e8eaed (Ghost-Hover-Token).

   SCHLUESSEL-WERT-ZEILE (.info-row)
             Layout              display: flex; align-items: center
                                 (Label und Wert auf derselben optischen
                                 Mittelachse — verhindert das Versetzen
                                 zwischen kleinem Uppercase-Label und
                                 groesserem Body-Wert)
             Padding             5px 0
             Trennlinie unten    var(--divider)  (siehe oben)

   PLACEHOLDER in Formularfeldern
             color #95a5a6 (Portal-Label-Token) / opacity 1
             3 erlaubte Formate:
               1) Beispiel:    "z. B. Hauptstraße 12, 64579 Gernsheim"
                               (konkretes Beispiel, OHNE "…" am Ende)
               2) Stichworte:  "Name, ID, Ort …"
                               (Liste möglicher Eingaben, MIT "…" am Ende)
               3) Leer:        wenn das Label schon alles sagt (z. B. Login)
             NIE: Placeholder als Label-Ersatz (verschwindet beim Tippen)
             NIE: redundante Wiederholung des Labels ("Benutzername" + "Benutzername")

   LINKS (systemweit)
             Default:   KEINE Unterstreichung (Portal-Stil)
             Hover/Focus: Unterstreichung als Klick-Affordanz
             Gilt fuer alle <a>-Elemente ueber das globale a / a:hover
             Pattern in portal.css. Ausnahmen (button-/tile-/nav-aehnliche
             Links wie .tile, .tool-nav-brand, .tool-nav-link, .tool-nav-btn,
             .system-btn) haben eigene Hover-Visuals (bg/border) und sind
             dort explizit von der Unterstreichung ausgenommen.

   UTILITY-LINKS (kleine Tertiär-Links unter Karten)
             font-size 0.75rem (12px) / font-weight 400 / color #95a5a6
             KEINE Unterstreichung im Default
             hover: color #5f6368 (etwas dunkler), MIT Unterstreichung
             → Vorschau-Links, "Sync"-Links, externe Quellen-Links
             Wird verwendet wenn ein Link nur untergeordnete Bedeutung hat
             und dem Nutzer nicht ins Auge springen soll.
             ACHTUNG: Bei <button>-Elementen explizit font-weight: 400 setzen,
             da der globale button-Selector oft font-weight: 600 erzwingt.

   PRIMÄR-BUTTONS sind IMMER grün (#27ae60) — auch auf der Login-Seite.
   Blau (#1a73e8) darf nur für Fokus-Ringe (input:focus) und Auswahl-Hover verwendet werden.

   NAV (56px Höhe, weiß, sticky top:0)
   ─────
   Logo: 30px Höhe   Brand: 16px/700   Links: 13px/500
   Aktiver Link: bg #e8f0fe / color #1a73e8 / font-weight 600
   Abmelden-Button: 13px/500 / border #e0e0e0 / radius 6px

   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #f4f5f7;
  --surface:     #ffffff;
  --border:      #e0e0e0;
  /* Weiche Trennlinie (heller als --border): zwischen Header und Sub-Header
     sowie als untere Begrenzung der Box-Titel. */
  --border-soft: #e8eaed;
  /* Feine Trennlinie systemweit — zwischen Feldzeilen in Boxen
     (.info-row), Abschnitten in Modals (z.B. SMS-Dialog), und ueberall,
     wo eine unaufdringliche horizontale Linie noetig ist. */
  --divider-color: #f0f2f5;
  --divider:       1px solid var(--divider-color);
  --text:        #202124;
  --sub:         #5f6368;
  --label:       #95a5a6;
  --green:       #27ae60;
  --green-dark:  #219a52;
  --red:         #ea4335;
  --blue:        #4285f4;
  --yellow:      #ffc107;
  --yellow-bg:   #fff8e1;
  --radius:      0.5rem;     /* Eckenradius Cards/Modals/Kacheln (Smartphone kleiner, s. u.) */
  --chip-radius: 6px;        /* Eckenradius Pills/Badges/Chips (Status, Kategorie, Nav-/Code-Chips) */
  --card-shadow: 0 1px 4px rgba(0,0,0,.06);
  --shadow:      0 2px 12px rgba(0,0,0,.08);

  /* Einheitlicher Label-Stil (Spaltenkoepfe, Filter-Beschriftungen,
     Feld-Labels in Boxen). IMMER diese Tokens verwenden. */
  --label-color:   #788087;     /* HSL(208°, 6%, 50%) — genau zwischen --sub (#5f6368, L 39%) und --label (#95a5a6, L 62%) */
  --label-size:    0.8125rem;   /* 13 px — etwas groesser, dafuer KEINE Caps mehr (Sentence Case) */
  --label-weight:  500;         /* leichteres Gewicht; Kontrast zum Body-Wert kommt jetzt ueber Weight, nicht Caps */
  --label-spacing: 0;           /* kein Letter-Spacing mehr — war Caps-Pflaster */

  /* Einheitliche Box-Ueberschrift (Card-Header). Symbol davor (bi-Icon,
     gleiche Farbe/Groesse wie der Titel), KEINE Unterueberschrift, gleiches
     Kopf-Padding in allen Boxen. */
  --box-title-color:       var(--text);
  --box-title-size:        0.875rem;
  --box-title-weight:      700;
  --box-title-padding:     9px 14px;
  --box-title-line-height: 1.5;   /* fixiert die Header-Hoehe tool-uebergreifend */
  --box-stripe-height:     2px;       /* farbiger Akzent oben (::before-Stripe) */
  --box-body-padding:      1rem;      /* Standard-Innenabstand Box-Body */
  --box-body-padding-spacious: 1.75rem; /* fuer Boxen mit Drop-Zone / Formular-Block */

  /* Pill / Badge — einheitliche Hoehe & Typografie tool-uebergreifend.
     Textfarbe = die jeweilige Box-Akzent-Farbe oben; Hintergrund jeweils
     eine helle Tinte derselben Farbfamilie. Systemweit nur 4 semantische
     Farben (blau/gruen/rot/gelb) + neutral (grau) als reiner Fallback. */
  --pill-height:           24px;
  --pill-padding-x:        12px;
  --pill-font-size:        0.8125rem;   /* 13px */
  --pill-font-weight:      600;
  --pill-letter-spacing:   0;
  --pill-radius:           var(--chip-radius);

  --pill-blue-text:        #2980b9;
  --pill-blue-bg:          #e8f0fe;
  --pill-green-text:       #27ae60;
  --pill-green-bg:         #d4edda;
  --pill-red-text:         #e74c3c;
  --pill-red-bg:           #fadbd8;
  --pill-yellow-text:      #a07a00;
  --pill-yellow-bg:        #fef9e0;
  --pill-neutral-text:     #5f6368;
  --pill-neutral-bg:       #f1f3f4;

  /* Standard-Vertikalabstand zwischen Header/Subheader und der ersten
     Box im Content (--page-top-spacing) bzw. zwischen zwei Boxen
     (--box-gap). Beide aktuell 16px; konsequent ueber alle drei Tools. */
  --page-top-spacing:      1rem;     /* 16px — Header/Subheader → erste Box */
  --page-bottom-spacing:   4rem;     /* 64px — unten unter dem Content      */
  --box-gap:               1rem;     /* 16px — zwischen zwei Boxen          */

  /* Textfeld (Edit-Modus) — selber graue Box wie der View-Modus, ohne
     auffaelligen Rahmen. Focus erzeugt einen gruenen Schatten. 16px
     Schriftgroesse verhindert auto-zoom auf iOS. */
  --textfield-bg:               #f4f5f7;
  --textfield-color:            var(--text);
  --textfield-font-size:        .875rem;  /* 14 px — gleich wie .info-value / Body, kein Sprung beim View↔Edit-Wechsel. ACHTUNG: < 16 px loest auf iOS Safari beim Fokus den Auto-Zoom aus — visuelle Konsistenz wurde hier bewusst hoeher gewichtet. */
  --textfield-line-height:      1.5;
  --textfield-border:           1px solid transparent;
  --textfield-radius:           0.375rem;  /* 6 px — bewusst kleiner als der Box/Modal-Radius 8 px */
  --textfield-padding:          .5rem;
  --textfield-focus-shadow:     0 0 0 1px rgba(95, 99, 104, .40);  /* grauer Ring, 1 px breit */

  /* Textfeld Display (View-Modus) — visuell identisch zum Edit-Feld,
     nur read-only. Mindesthoehe ~80px (entspricht einer 3-zeiligen
     textarea-Voransicht). */
  --textfield-display-bg:           #f4f5f7;
  --textfield-display-color:        var(--text);
  --textfield-display-font-size:    .875rem;
  --textfield-display-line-height:  1.65;
  --textfield-display-min-height:   5rem;
  --textfield-display-padding:      .5rem;
  --textfield-display-radius:       var(--textfield-radius);  /* gleich wie Edit-Modus, damit View↔Edit nicht 'springt' */
  --textfield-placeholder-color:    #95a5a6;

  /* ──────────────────────────────────────────────────────────────────────
     INTERAKTIONS-AKZENT (Mandanten-Theming)
     Default: Bergstrasse-Gruen. Pro Mandant zentral ueberschreibbar via
     [data-tenant="<id>"]-Scope auf <html>. ALLE interaktiven Akzent-
     Farben (System-Button, Box-Stripe, Liefergebiet-Pulse/Focus, Login-
     Button) leiten sich AUSSCHLIESSLICH von --accent / --accent-hover /
     --accent-active und dem RGB-Triplet --accent-rgb ab — letzteres ist
     fuer rgba()-Schatten + Fokus-Ringe noetig, weil CSS rgba(var(...))
     kein Hex frisst. Beispiel-Override:
         [data-tenant="muster"] {
           --accent:        #c0392b;   --accent-rgb:    192, 57, 43;
           --accent-hover:  #a93223;   --accent-active: #872819;
         }
     Status-/Pillen-Gruen (--pill-green-*, .pill--green) bleibt
     SEMANTISCH gruen und ist KEIN Akzent-Token (Status "Aktiv" /
     "Im Liefergebiet" sollen ueber alle Mandanten gruen sein). */
  --accent:        #27ae60;
  --accent-hover:  #219a52;
  --accent-active: #1c8746;
  --accent-rgb:    39, 174, 96;
  --accent-shadow:       0 1px 4px rgba(var(--accent-rgb), .25);
  --accent-shadow-hover: 0 2px 8px rgba(var(--accent-rgb), .35);
  --accent-focus-ring:   0 0 0 3px rgba(var(--accent-rgb), .40);

  /* System-Button — Action-Button (Akzentfarbe ueber --accent-*). */
  --system-btn-bg:           var(--accent);
  --system-btn-bg-hover:     var(--accent-hover);
  --system-btn-color:        #ffffff;
  --system-btn-padding:      9px 20px;
  --system-btn-font-size:    .875rem;        /* 14px */
  --system-btn-font-weight:  600;
  --system-btn-letter-spacing: .01em;
  --system-btn-radius:       8px;
  --system-btn-icon-gap:     7px;
  --system-btn-shadow:       var(--accent-shadow);
  --system-btn-shadow-hover: var(--accent-shadow-hover);
  /* Press-/Fokus-Verhalten — systemweit, Bootstrap-unabhaengig, pro Mandant
     ueberschreibbar. --*-active = gedrueckter Zustand (dunkler als hover),
     --*-focus-ring = sichtbarer Ring NUR bei Tastatur-Fokus (:focus-visible),
     nicht bei Maus-Klick. */
  --system-btn-bg-active:        var(--accent-active);
  --system-btn-focus-ring:       var(--accent-focus-ring);
  --system-btn-outline-focus-ring: 0 0 0 3px rgba(95,99,104,.25);
}

/* ── Mandanten-Akzent-Overrides ────────────────────────────────────────────
   Default ("bergstrasse") kommt aus :root oben. Jeder weitere Mandant
   ueberschreibt NUR die drei Akzent-Tokens hier — alle abgeleiteten
   --system-btn-*, --accent-shadow*, --accent-focus-ring etc. ziehen
   automatisch nach. Aktivierung via <html data-tenant="<id>"> (kommt aus
   `inject_tenant` in app.py, ENV `PORTAL_TENANT`).

   Beispiel — Mandant "muster" mit rotem Akzent:
       [data-tenant="muster"] {
         --accent:        #c0392b;
         --accent-hover:  #a93223;
         --accent-active: #872819;
         --accent-rgb:    192, 57, 43;
       }
   Status-/Pillen-Gruen (.pill--green, Status "Aktiv") bleibt semantisch
   gruen und ist KEIN Mandanten-Token. */

/* Checkboxen und Radios (systemweit) etwas verkleinern. transform:scale
   schrumpft das gesamte Element (Border, Innenraum, Haekchen) gleich-
   maessig, schickt aber die Layout-Box weiterhin in Original-Groesse —
   d.h. Klickflaeche bleibt voll, Ausrichtung zum Label rutscht nicht.
   Sub-Pixel-border-width war unzuverlaessig (Browser rundet je nach
   DPR), Scale ist DPR-unabhaengig und sauber. */
.form-check-input {
  transform: scale(0.85);
  transform-origin: center;
  /* Bootstraps Default 'vertical-align: top + margin-top: 0.25em' ist auf
     die 1em-Originalgroesse abgestimmt. Mit Scale schrumpft das Visual aus
     der Mitte, das Layout-Top bleibt aber wo es war → Versatz nach oben.
     Mit 'vertical-align: middle + margin-top: 0' sitzt die Visual-Mitte
     sauber auf der Line-Mitte; passt fuer Tabellenzellen UND Form-Checks. */
  vertical-align: middle;
  margin-top: 0;
}

/* Auf Touch-Geraeten (Smartphone + Tablet) die Textfeld-Schriftgroesse
   auf 16 px anheben, damit iOS Safari beim Fokus NICHT auto-zoomt.
   Desktop bleibt bei der visuell konsistenten 14 px (= Body / Feldwert).
   '(hover: none) and (pointer: coarse)' ist die zuverlaessige
   Touch-Erkennung — trifft Phones + Tablets, nicht Desktop-mit-Maus. */
@media (hover: none) and (pointer: coarse) {
  :root { --textfield-font-size: 16px; }
}

/* Auf Smartphones den Eckenradius zusaetzlich verkleinern — einheitlicher,
   etwas kompakterer Look. Wirkt ueberall, wo var(--radius) genutzt wird. */
@media (max-width: 767.98px) {
  :root { --radius: 0.375rem; }
}

/* iOS Safari's „Text Autosizing" (Boost kleiner Texte in schmalen Blöcken)
   abschalten — sonst skaliert iOS rem-basierte Labels wie .form-label-upper
   ungleich zu pixel-basierten Geschwistern auf, was im Dashboard Box 7 die
   Abschnitts-Labels („PDF erstellen", „SMS senden an") doppelt so groß
   erscheinen ließ wie die Radio-Labels darunter. */
html {
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Form-Inputs & Textareas (Portal-Standard) ─────────────────────────── */
/* 16px verhindert iOS Safari Auto-Zoom beim Fokus auf Eingabefelder.
   color: var(--text) und font-family: inherit sorgen für portalweite Konsistenz. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
}
/* Platzhalter systemweit konsistent — in Inputs UND in Select-Dropdowns,
   wenn die Default-Option (value="") aktiv ist. Gleiches Grau wie der
   Input-Placeholder, gleiche Schriftgroesse (kommt vom .form-control-sm /
   .form-select-sm Default). Signalisiert eindeutig: 'noch kein Wert
   gewaehlt'. */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: #95a5a6;
  opacity: 1;
}
.form-select        { color: var(--text); }
.form-select option { color: var(--text); }
/* Nur Selects mit echtem Platzhalter (z.B. '— bitte wählen —') bekommen
   die graue Schrift, solange noch nichts gewaehlt ist. Filter-Dropdowns
   mit 'Alle' sind KEIN Platzhalter, sondern ein gueltiger Wert → bleiben
   in der normalen Textfarbe. */
.form-select.has-placeholder:has(option[value=""]:checked) { color: #95a5a6; }

/* ── Multi-Select-Dropdown ───────────────────────────────────────────────
   Systemweiter Standard fuer Filter mit Mehrfach-Auswahl. Der Button
   traegt bereits .form-select / .form-select-sm und sieht damit aus wie
   ein natives <select>. Das geoeffnete Dropdown wird so gestylt, dass es
   ebenfalls wie ein natives Select-Dropdown wirkt — gleiche Border,
   gleicher Hintergrund, gleiche Schrift. Einziger Unterschied: jede
   Zeile traegt eine sichtbare Checkbox (Multi-Auswahl-Indikator).
   Anwendung: <div class="dropdown filter-multi">…</div> */
/* Hinweis: vorher .filter-multi-spezifisch — jetzt zentral als
   .portal-dropdown (siehe unten). Die Selektoren bleiben aber
   abwaertskompatibel, falls Templates noch auf .filter-multi referenzieren. */
.portal-dropdown .dropdown-menu,
.filter-multi   .dropdown-menu {
  /* Hintergrund: gleiches Grau wie die stat-cards in der Info-Box
     (#f4f5f7), mit hoher Transparenz — der Backdrop-Blur sorgt
     dafuer, dass der Inhalt darunter weichgezeichnet wird. */
  background-color: rgba(244, 245, 247, .35);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--system-btn-radius);  /* gleiche Eckenrundung wie .system-btn */
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  padding: 4px 0;
}
/* Icons in Dropdown-Items (z.B. SMS-Senden-Aktionsmenue) einheitlich
   im neutralen Grau und gleicher Groesse — nicht semantisch farbcodiert,
   weil die Funktion durchs Label klar ist. Wenn ein Item bewusst
   farbcodiert sein soll, bekommt das Icon eine .bi--accent-{green|red|…}
   Klasse — derzeit nicht verwendet. */
.portal-dropdown .dropdown-item > .bi {
  color: var(--sub);
  font-size: 1rem;
}

.portal-dropdown .dropdown-item,
.filter-multi   .dropdown-item {
  /* Items mit kleinem horizontalen Inset und eigener Rundung — so wird
     der Hover-/Aktiv-Balken zu einer abgerundeten Pille innerhalb des
     Menues (Vorbild: natives Chrome-Selectmenue). */
  margin: 0 6px;
  padding: 6px 12px;
  width: calc(100% - 12px);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
/* Hover, Focus UND aktive Auswahl bekommen dieselbe Pille — etwas
   dunkleres Grau, damit der Selected-State auf einen Blick erkennbar
   ist (analog der blauen Pille im nativen Chrome-Dropdown). */
.portal-dropdown .dropdown-item:hover,
.portal-dropdown .dropdown-item:focus,
.portal-dropdown .dropdown-item.is-active,
.portal-dropdown .dropdown-item:has(input:checked),
.filter-multi   .dropdown-item:hover,
.filter-multi   .dropdown-item:focus,
.filter-multi   .dropdown-item:has(input:checked) {
  background-color: rgba(0, 0, 0, .12);
  color: var(--text);
}
/* Platzhalter-Look des geschlossenen Buttons ('— bitte wählen —', 'Alle'
   ist KEIN Platzhalter, siehe Glossar). data-empty wird von portal.js
   live gesetzt (true, solange kein Wert gewaehlt ist). data-placeholder
   markiert: 'dieses Dropdown hat einen Platzhalter, der grau dargestellt
   werden soll'. */
.portal-dropdown[data-placeholder][data-empty="true"] > [data-bs-toggle="dropdown"] { color: #95a5a6 !important; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--box-stripe-height);
  background: var(--green);
  border-radius: var(--radius) var(--radius) 0 0;
}

.login-logo  { margin-bottom: 16px; }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 28px; }

.login-error {
  background: #fce8e6;
  color: #c5221f;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: left;
}

.field-group        { text-align: left; margin-bottom: 16px; }
.field-group label  { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--sub); }
.field-group input  {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  outline: none; transition: border-color .15s;
}
.field-group input:focus { border-color: var(--accent); }

.btn-login {
  width: 100%; padding: 11px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 8px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; margin-top: 8px;
  box-shadow: var(--accent-shadow);
  transition: background .15s, box-shadow .15s;
}
.btn-login:hover { background: var(--accent-hover); box-shadow: var(--accent-shadow-hover); }

/* ── Portal Header ─────────────────────────────────────────────────────── */
.portal-wrap   { min-height: 100vh; display: flex; flex-direction: column; }

.portal-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 56px;
  /* Gleiches 1fr auto 1fr Grid wie .tool-nav — konsistent ueber alle Seiten. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky; top: 0; z-index: 10;
}
.portal-header-left   { grid-column: 1; justify-self: start; }
.portal-header-center { grid-column: 2; justify-self: center; }
.portal-header-right  { grid-column: 3; justify-self: end; }

.portal-header-left   { display: flex; align-items: center; gap: 10px; }
.portal-logo          { font-size: 22px; }
.portal-brand         { font-size: 16px; font-weight: 700; color: var(--text); }
.portal-header-center { display: flex; align-items: center; justify-content: center; }
.portal-page-name     { font-size: 13px; font-weight: 600; color: var(--sub);
                        background: #f1f3f4; padding: 4px 14px; border-radius: var(--chip-radius); }
.portal-header-right  { display: flex; align-items: center; gap: 10px; }
.portal-user-chip     { display: flex; align-items: center; gap: 5px;
                        font-size: 13px; font-weight: 500; color: var(--sub);
                        padding: 4px 10px; background: #f1f3f4; border-radius: var(--chip-radius); }

.btn-logout {
  height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
  color: var(--sub); text-decoration: none;
  padding: 0 12px; border: 1px solid var(--border);
  border-radius: 6px; transition: all .15s;
}
.btn-logout:hover { border-color: #aaa; color: var(--text); }
/* Icon-only-Variante (z.B. Abmelden als Symbol) — quadratisch wie der
   App-Launcher-Button. */
.btn-logout--icon { width: 34px; padding: 0; font-size: 16px; }

/* ── Admin-Navigation ─────────────────────────────────────────────────────
   Aufbau wie auf den Tool-Seiten (z. B. Datenimport):
   - Header-MITTE (Desktop): die Tool-Navigation (Datenimport/Reklamationen/
     Liefergebiet/Dashboard, .portal-header-tools — gemeinsames Include
     _tool_links.html, auch die Home-Seite nutzt es) — mobil ausgeblendet,
     dort führen Kacheln/Home-Button/App-Launcher zu den Tools.
   - Eigene Zeile darunter: die Admin-Bereichs-Tabs (.admin-subnav-huelle +
     .admin-subnav), Desktop zentriert; mobil in sich scrollbar
     (Chips-Pattern) statt die Seite horizontal aufzuspannen — flex-start
     ist dort Pflicht (bei zentriertem Überlauf wäre der linke Rand
     unerreichbar), der aktive Tab wird per scrollIntoView ins Bild
     gerückt (_admin_header.html).
   Links nutzen .tool-nav-link (inkl. .active). */
.portal-header-tools { display: flex; align-items: center; gap: 4px; }

.admin-subnav-huelle { position: sticky; top: 56px; z-index: 9; }
.admin-subnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 56px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-subnav::-webkit-scrollbar { display: none; }
.admin-subnav .tool-nav-link { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 767.98px) {
  .portal-header-tools { display: none; }
  .admin-subnav {
    justify-content: flex-start;
    padding: 0 16px;
  }
  /* Scroll-Hinweis „da kommt noch was": Verlaufs-Schatten als absolute
     Overlays AUF DER HÜLLE über den Leistenrändern — bewusst NICHT als
     Pseudo-Elemente im Scroll-Container (dort kollidieren sie mit `gap`
     und legen sich über die Tab-Pillen). Sichtbar nur auf der Seite mit
     wirklich abgeschnittenem Inhalt; Klassen subnav-mehr-links/-rechts
     toggelt das Scroll-JS an der Hülle. Tabs bleiben antippbar
     (pointer-events:none). */
  .admin-subnav-huelle::before,
  .admin-subnav-huelle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 1px;            /* border-bottom der Leiste nicht überdecken */
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 1;
  }
  .admin-subnav-huelle::before {
    left: 0;
    background: linear-gradient(to right, var(--surface) 25%, transparent);
  }
  .admin-subnav-huelle::after {
    right: 0;
    background: linear-gradient(to left, var(--surface) 25%, transparent);
  }
  .admin-subnav-huelle.subnav-mehr-links::before  { opacity: 1; }
  .admin-subnav-huelle.subnav-mehr-rechts::after  { opacity: 1; }
}

/* ── Dashboard Main ────────────────────────────────────────────────────── */
.portal-main    { flex: 1; padding: 36px 28px; max-width: 1100px; width: 100%; margin: 0 auto; }
.portal-main--wide { max-width: 1480px; }  /* Dashboard mit 7 Spalten */
.portal-main--board { max-width: min(1850px, 96vw); }  /* Admin Home-Kacheln Board: nutzt fast die volle Breite */
.portal-welcome { font-size: 22px; font-weight: 700; margin-bottom: 32px; }

/* ── Flash Messages ────────────────────────────────────────────────────── */
.flash {
  padding: 12px 16px; border-radius: 8px;
  font-size: 14px; margin-bottom: 20px;
}
.flash-warning { background: #fef7e0; color: #b06000; }
.flash-error   { background: #fce8e6; color: #c5221f; }
.flash-success { background: #e6f4ea; color: #137333; }

/* ── Toast (inline-Feedback nach Aktion) ──────────────────────────────────
   Wird per JS direkt unter dem Auslöser eingeblendet (kein Layout-Shift
   wie bei Top-Bannern). 4 Varianten — Farb-Tinten parallel zur Pille.
   Klassenname app-toast, weil Bootstrap eine eigene .toast-Klasse mit
   width:350px hat — sonst kollidiert sie mit unserer Variante. */
.app-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .08);
  /* Dezenter Schatten, damit der Toast als Overlay-Element ueber dem
     Inhalt 'schwebt' — alle Varianten (success/warning/error/info/
     neutral/floating-flash) erben das von hier. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast--success { background: var(--pill-green-bg);   color: var(--pill-green-text);   }
.app-toast--warning { background: var(--pill-yellow-bg);  color: var(--pill-yellow-text);  }
.app-toast--error   { background: var(--pill-red-bg);     color: var(--pill-red-text);     }
.app-toast--info    { background: var(--pill-blue-bg);    color: var(--pill-blue-text);    }
/* Neutral-Variante optisch an das Textfeld angeglichen: derselbe
   Hintergrund, derselbe graue 1 px-Rand (Focus-Ring-Farbe) und derselbe
   6 px-Eckenradius. Farbige Varianten (success/warning/…) behalten den
   feinen rgba(0,0,0,.08)-Border, der auf Farbflaechen besser passt. */
.app-toast--neutral {
  background: var(--textfield-bg);
  color: var(--pill-neutral-text);
  border-color: rgba(95, 99, 104, .40);
  border-radius: var(--textfield-radius);
}

/* Statische Variante des Toast-Designs — fuer persistente Hinweise/
   Anleitungen in einer Box. Linksbuendig, Block-Layout (erlaubt Listen
   und mehrzeiligen Inhalt), immer sichtbar (kein Fade-In). */
.app-toast--block {
  display: block;
  text-align: left;
  opacity: 1;
  transform: none;
  padding: 10px 14px;
}

/* Floating-Toast-Container — fuer Flashes nach einem Redirect (Auth-
   Hinweise, „Kein Zugriff" usw.), wo es keinen konkreten Auslöser-Knopf
   gibt, an den man den Toast anhaengen koennte. Sitzt fixed oben rechts,
   verschiebt das Layout nicht. */
.floating-toasts {
  position: fixed;
  top: 76px;             /* unter 60px Header + 16px Luft */
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;  /* leerer Container blockt keine Klicks */
  width: min(360px, calc(100vw - 32px));
}
.floating-toasts .app-toast {
  pointer-events: auto;
  margin-top: 0;         /* gap reicht — kein Doppel-Abstand */
}

/* ── Checkbox + Radio (Bootstrap-Override) ───────────────────────────────
   Tool-Akzent gruen statt Bootstrap-Blau bei :checked. Radio und
   Checkbox getrennt geregelt:
   - Radio:    1.15em (font-relativ, passt sich an die Label-Schrift an,
               wie schon vor dem System-Refactor). Border #7f8c8d.
   - Checkbox: 1.15rem (font-UNABHAENGIG, sonst wuerde die thead-Checkbox
               schrumpfen — th hat kleinere font-size als td). Border
               im hellen System-Grau #95a5a6. */
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25);
}

.form-check-input[type="radio"] {
  width: 1.15em;
  height: 1.15em;
  border: 2px solid #7f8c8d;
  cursor: pointer;
}
.form-check-input[type="radio"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid #95a5a6;
  cursor: pointer;
}
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* ── Tiles ─────────────────────────────────────────────────────────────── */
/* Home: 7 benannte Spalten (HOME_COLS in app.py); jede Spalte ist ein
   Flex-Container mit ihren Kacheln untereinander. Bei zu wenig Breite ist
   das Raster horizontal scrollbar (.tile-grid-scroll) — es stapelt nicht. */
.tile-grid-scroll { overflow-x: auto; padding-bottom: 10px; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.tile-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tile-col-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 2px 2px 8px;
  border-bottom: 3px solid var(--col-color, #ccc);
}
/* Dichtere Kacheln, damit 7 Spalten gut passen. */
.tile-grid .tile { padding: 14px 14px; gap: 0; align-items: stretch; }

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .18s, border-color .18s, transform .12s;
  position: relative;
  overflow: hidden;
}
/* Kein farbiger Akzent-Streifen oben mehr — die Kacheln bleiben ruhig;
   die Spaltenfarbe erscheint in der Spaltenueberschrift. */
.tile:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  border-color: var(--tile-color, #1a73e8);
  transform: translateY(-2px);
}

.tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tile-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.tile-desc { font-size: 13px; color: var(--sub); line-height: 1.4; }

/* Kachel_Home fuer geplante Tools: grauer Tool-Akzent (#95a5a6 wie
   Box-Akzent-grau), gedimmter Name, kein Hover-Lift — die Kachel ist
   sichtbar, aber (noch) nicht klickbar. */
.tile--planned {
  --tile-color: #95a5a6;
  background: #f4f5f6;   /* sehr helles Grau fuer inaktive Kacheln */
  cursor: default;
}
.tile--planned .tile-name { color: var(--label-color); }
.tile--planned:hover {
  box-shadow: none;
  border-color: var(--border);
  transform: none;
}

/* Stretched-Link: macht bei aktiven Kacheln die ganze Karte klickbar
   (Tool oeffnen), ohne die Link-Chips zu verschachteln. */
.tile-stretch { position: absolute; inset: 0; z-index: 1; }

/* Benachrichtigungs-Badge an der Kachel (z. B. ungelesene Nachrichten).
   Oben rechts, ueber dem Stretched-Link (z-index:2); pointer-events:none,
   damit der Klick auf die Kachel durchfaellt und das Tool trotzdem oeffnet.
   Gruen wie der Ungelesen-Indikator im Tool selbst (.na-badge) — semantisch,
   kein Mandanten-Token. */
.tile-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  min-width: 20px; text-align: center; border-radius: 10px;
  background: #27ae60; color: #fff; font-size: 12px; font-weight: 600;
  line-height: 1.5; padding: 1px 7px; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* Link-Chips in der Kachel (GoogleSheet / Link) — liegen per z-index ueber
   dem Stretched-Link und bleiben dadurch einzeln klickbar. */
/* Fuss-Block: Links direkt ueber den Pills, gemeinsam am unteren Kachelrand. */
.tile-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.tile-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tile-link-chip {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  background: var(--pill-neutral-bg); color: var(--sub);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.tile-link-chip:hover { background: #e2e5e9; color: var(--text); }
.tile-link-chip i { font-size: 11px; }
/* Nicht klickbare Variante (Nicht-Admins): neutral, kein Hover, kein Pointer. */
.tile-link-chip--off { color: var(--label-color); cursor: default; }
.tile-link-chip--off:hover { background: var(--pill-neutral-bg); color: var(--label-color); }

.tile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Kachel-Pills: duenner dunkler Rand, damit sie grau-auf-grau erkennbar
   bleiben; aktive Kacheln bekommen zusaetzlich weissen Pill-Hintergrund. */
.tile-pills .pill { border: 1px solid #9aa0a6; }
.tile:not(.tile--planned) .tile-pills .pill { background: #fff; }

/* Mobil (<768px): Home-Kacheln vertikal stapeln — nur AKTIVE Kacheln, ohne
   Spaltenueberschriften. Die 7-Spalten-Logik (HOME_COLS) entfaellt hier:
   .tile-column wird per display:contents aufgeloest, sodass alle Kacheln zu
   direkten Flex-Items von .tile-grid werden; geplante (graue) Kacheln und die
   Spaltentitel werden ausgeblendet -> eine saubere, gestapelte Liste der
   aktiven Tools (ohne Leerluecken aus leeren Spalten). Desktop unveraendert. */
@media (max-width: 767.98px) {
  .tile-grid-scroll { overflow-x: visible; padding-bottom: 0; }
  .tile-grid { display: flex; flex-direction: column; gap: 12px; }
  .tile-column { display: contents; }
  .tile-col-title { display: none; }
  .tile--planned { display: none; }
  .tile-grid .tile { padding: 16px 18px; }
  /* Farbiger Akzent oben (Spaltenfarbe) — auf Mobile sind die Spalten-
     überschriften ausgeblendet, daher übernehmen die Kacheln selbst die
     Farbinformation ihrer Spalte. Nur aktive Kacheln (geplante sind ohnehin
     versteckt). */
  .tile:not(.tile--planned)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tile-color);
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* ── Dashboard-Tool: 3x3 Box-Raster ───────────────────────────────────────
   Drei Spalten Desktop, eine Spalte Smartphone (systemweiter Breakpoint
   767.98px). Boxen sind systemweite .box-Elemente (siehe oben). */
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dashboard-box--span-2 { grid-column: span 2; }
/* Quartett-Reihe: belegt im Haupt-Grid eine span-2-Zelle und teilt sie intern
   in vier gleich breite Spalten (4 viertel-breite Boxen nebeneinander).
   Mobil stapeln alle vier untereinander. */
.dashboard-quartet {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 767.98px) {
  /* minmax(0, 1fr) statt nacktem 1fr: ohne Min-Constraint von 0 würde der
     Grid-Track mindestens so breit wie sein Content (z. B. Tabelle mit
     LP-Vollnamen) — und damit den Viewport sprengen. So darf die Zelle
     schrumpfen, und .trg-overview/.pro-overview übernehmen mit overflow-x
     das interne Scrollen. */
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-box--span-2 { grid-column: span 1; }
  .dashboard-quartet { grid-column: span 1; grid-template-columns: minmax(0, 1fr); }
}

/* ── Admin: Home-Kacheln Drag-Board ───────────────────────────────────────
   Drei Spalten (Position 1/2/3) mit ziehbaren Kachel-Karten (SortableJS,
   Handle = .tile-card-handle, damit Eingabefelder editierbar bleiben). */
.tile-board-scroll { overflow-x: auto; padding-bottom: 8px; }
.tile-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.tile-col { background: #f6f7f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; }
.tile-col-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); margin: 2px 2px 10px; padding-bottom: 6px; border-bottom: 2px solid var(--col-color, #ccc); }
.tile-col-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.tile-col-drop { flex: 1; min-height: 48px; display: flex; flex-direction: column; gap: 10px; }
.tile-card { position: relative; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.tile-card-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-right: 14px; }
.tile-card-handle { cursor: grab; color: #9aa0a6; font-size: 16px; flex: 0 0 auto; line-height: 1; }
.tile-card-handle:active { cursor: grabbing; }
/* Hoehere Spezifitaet (.tile-card davor) — schlaegt die generische Regel
   input[type="text"] { font-size:16px } weiter oben, die sonst die
   Karten-Schrift ueberschreibt. */
.tile-card .tile-card-tool { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 10px; font-weight: 600; font-family: inherit; }
/* Status als Haken (Checkbox): angehakt = Aktiv (farbig), leer = Geplant
   (grau). Kompakter als ein Schiebe-Toggle → mehr Platz fuer die Ueberschrift;
   gruener Haken signalisiert "aktiv" (folgt der Home-Konvention farbig/grau). */
.tile-status { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; }
.tile-status-cb { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tile-status-box { position: relative; width: 15px; height: 15px; flex: 0 0 auto; border: 1.5px solid #c4c8cc; border-radius: 4px; background: #fff; transition: background .12s ease, border-color .12s ease; }
.tile-status-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.tile-status-cb:checked + .tile-status-box { background: var(--accent); border-color: var(--accent); }
.tile-status-cb:checked + .tile-status-box::after { opacity: 1; }
.tile-status-cb:focus-visible + .tile-status-box { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .4); }
/* Loeschen-X: klein und dezent in der oberen Karten-Ecke (rot beim Hovern),
   damit die Kopfzeile voll fuer die Ueberschrift frei bleibt. */
.tile-card-del { position: absolute; top: 5px; right: 6px; z-index: 2; background: none; border: none; color: #c4c8cc; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.tile-card-del:hover { color: #e74c3c; }
.tile-card .tile-card-inp { width: 100%; padding: 4px 6px; margin-top: 5px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 10px; font-family: inherit; }
.tile-card.sortable-ghost { opacity: .4; }
.tile-card.sortable-chosen { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.tile-col-add { margin-top: 10px; align-self: flex-start; }

/* ── Tool Nav Bar ───────────────────────────────────────────────────────── */
.tool-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: 56px;
  /* Grid 1fr auto 1fr: linke Zone (Logo), zentrierte Mitte (Nav-Links),
     rechte Zone (Buttons). Die Mitte sitzt damit am echten Seiten-
     mittelpunkt — 'Reklamationen' (mittlerer der drei Links) liegt so
     exakt ueber den zentrierten Sub-Header-Pfeilen. Robust auch wenn
     die Nav-Links fehlen (1-Tool-User): die Spalte bleibt leer/zentriert. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: sticky; top: 0; z-index: 100;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Zonen fest den Grid-Spalten zuweisen — so sitzt rechts IMMER in
   Spalte 3, auch wenn die mittlere Nav-Link-Gruppe fehlt (1-Tool-User
   oder Mobile-Hidden). */
.tool-nav-left  { grid-column: 1; justify-self: start; }
.tool-nav-links { grid-column: 2; justify-self: center; }
.tool-nav-right { grid-column: 3; justify-self: end; }

.tool-nav-left  { display: flex; align-items: center; gap: 10px; }
.tool-nav-logo  { height: 34px; width: auto; }
.tool-nav-brand { font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; }

.tool-nav-links { display: flex; align-items: center; gap: 4px; }
/* Alle Nav-Links gleich breit + zentrierter Text: so ist die Link-Gruppe
   symmetrisch und der mittlere Link ('Reklamationen') sitzt exakt am
   Gruppen- UND Seitenmittelpunkt — sonst verschiebt ihn die unterschied-
   liche Textbreite (Import kurz, Liefergebiet lang) leicht nach links. */
/* Alle Links tragen dieselbe Pillen-Form (heller Hintergrund + Rahmen) —
   so sehen sie wie eine zusammenhaengende Gruppe gleichwertiger Tabs aus.
   Der aktive Link ist kraeftiger (dunklerer Hintergrund + Border + fett). */
.tool-nav-link {
  min-width: 120px;
  text-align: center;
  font-size: 13px; font-weight: 500;
  color: var(--sub); text-decoration: none;
  padding: 3px 12px; border-radius: 6px;
  background: var(--bg);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.tool-nav-link:hover   { background: var(--pill-neutral-bg); color: var(--text); }
.tool-nav-link.active  { background: #e2e5e9; color: var(--text); font-weight: 600; }

/* Auf Smartphones (< 768px) die Tool-Links ausblenden; Tablets/Desktop
   behalten sie. Mobil bleibt die Navigation ueber den Home-Button
   (Dashboard mit Kacheln) erreichbar. */
@media (max-width: 767.98px) {
  .tool-nav-links { display: none; }
}

.tool-nav-right { display: flex; align-items: center; gap: 8px; }
.tool-nav-btn {
  height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
  color: #5f6368; text-decoration: none;
  padding: 0 12px;
  border: 1px solid #e0e0e0; border-radius: 6px;
  transition: all .15s; background: transparent; cursor: pointer;
}
/* Icon-only-Variante: quadratisch, gleiche Kantenlaenge wie der
   App-Launcher-Button (34px). Fuer Home, Abmelden, Neu laden. */
.tool-nav-btn--icon { width: 34px; padding: 0; font-size: 16px; }
.tool-nav-btn:hover { border-color: #aaa; color: var(--text); }
/* Gedaempfte Variante (z.B. Filter-Button ohne aktiven Filter): hellerer
   Rand + helleres Icon/Text, signalisiert 'verfuegbar, aber gerade nicht
   gesetzt'. Hover hebt ihn auf den Normal-Look. */
.tool-nav-btn--muted { color: var(--label); border-color: #eceef0; }
.tool-nav-btn--muted:hover { color: var(--text); border-color: #aaa; }
/* Inaktiver Zustand (z.B. Blaetter-Pfeil am Listenanfang/-ende): NICHT
   per opacity dimmen (macht alles matschig) — gezielt nur das Icon in
   ein klares Hellgrau, Rand bleibt normal sichtbar. Nicht klickbar. */
.tool-nav-btn--disabled {
  color: #c0c4c9;
  border-color: #e0e0e0;
  pointer-events: none;
}

/* ── App-Launcher (9-Punkte-Raster im Header) ──────────────────────────
   Button mit Raster-Icon; Klick oeffnet ein Dropdown mit Tool-Kacheln.
   Single-Source: launcher_tools (app.py, pro User gefiltert). Vanilla-JS
   in portal.js (keine Bootstrap-Abhaengigkeit). */
.app-launcher { position: relative; display: inline-flex; }
.app-launcher-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid #e0e0e0; border-radius: 6px;
  background: transparent; color: var(--sub); cursor: pointer;
  font-size: 16px; transition: all .15s;
}
.app-launcher-btn:hover { border-color: #aaa; color: var(--text); }
.app-launcher.is-open .app-launcher-btn { border-color: #aaa; color: var(--text); background: var(--bg); }
/* Dropdown-Panel: rechtsbuendig unter dem Button, Frosted-Glass-Look
   konsistent mit den Portal-Dropdowns. */
.app-launcher-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  z-index: 1100;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  padding: 10px;
  display: none;
}
.app-launcher.is-open .app-launcher-menu { display: block; }
.app-launcher-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
/* Einzelne Tool-Kachel: Icon ueber Name, mittig, Hover = graue Pille. */
.app-launcher-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 10px;
  border-radius: 8px; text-decoration: none;
  color: var(--text); text-align: center;
  transition: background .15s;
}
.app-launcher-tile:hover { background: var(--bg); }
.app-launcher-tile.is-active { background: var(--pill-neutral-bg); }
.app-launcher-tile-icon { font-size: 22px; line-height: 1; }
.app-launcher-tile-name { font-size: 12.5px; font-weight: 500; line-height: 1.2; }

/* ──────────────────────────────────────────────────────────────────────
   BOX-KOMPONENTE — zentrale, tool-uebergreifende Box (Design-System).
   Markup:
     <div class="box box--accent-red">
       <div class="box-header"><i class="bi bi-..."></i>Titel</div>
       <div class="box-body">...</div>
     </div>
   - Stripe-Farbe via Modifier (box--accent-red|green|blue|orange|gray).
   - Optional rechts in der Box-Header: justify-content:space-between setzen
     (z. B. `<div class="box-header" style="justify-content:space-between">
       <i></i>Titel<span>…rechts…</span></div>`).
   - Alle Maße (Radius, Stripe-Hoehe, Header-Padding/Font/Line-Height,
     Body-Padding) ueber Tokens; AENDERUNGEN GEHEN ZENTRAL HIER.
   ────────────────────────────────────────────────────────────────────── */
.box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  /* KEIN overflow: hidden — sonst werden Custom-Dropdowns (.portal-dropdown)
     an der Box-Unterkante abgeschnitten. Damit die Hintergruende der
     obersten Kinder trotzdem nicht in die runden Ecken ragen, rundet
     der Header oben mit (siehe .box > .box-header:first-child unten). */
}
/* Akzent = farbiger OBERER RAND, der der Eckenrundung exakt folgt.
   Frueher ein ::before-Block-Streifen — der konnte bei 1px Hoehe seine
   eigene Top-Rundung nicht mehr an den --radius (12px) anpassen und
   ragte mit quadratischen Enden ueber die runde Box-Ecke hinaus. Ein
   border-top folgt dem border-radius IMMER perfekt, bei jeder Dicke,
   und braucht kein overflow:hidden. Dicke via --box-stripe-height. */
.box[class*="box--accent-"] { border-top-width: var(--box-stripe-height); }
.box--accent-red    { border-top-color: var(--pill-red-text); }
.box--accent-green  { border-top-color: var(--pill-green-text); }
.box--accent-blue   { border-top-color: var(--pill-blue-text); }
.box--accent-yellow { border-top-color: var(--pill-yellow-text); }
.box--accent-gray   { border-top-color: var(--pill-neutral-text); }
/* Gedaempfte Log-/Anzeige-Box: schmilzt in den grauen Seitenhintergrund
   (ruhige Protokoll-/Historie-Boxen — RKL-Maske, Datenimport-Protokoll).
   Header transparent, damit er mit der grauen Box verschmilzt. --bg ist
   mandantenneutral. .box.box--gray fuer genug Spezifitaet (in RKL laedt
   style.css vor portal.css). */
.box.box--gray { background: var(--bg); }
.box.box--gray > .box-header { background: transparent; }
/* Header (immer oberstes Kind) oben runden, damit sein Hintergrund der
   Box-Eckenrundung folgt — ersetzt das fehlende overflow:hidden. */
.box > .box-header:first-child {
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--box-title-padding);
  font-size: var(--box-title-size);
  font-weight: var(--box-title-weight);
  color: var(--box-title-color);
  line-height: var(--box-title-line-height);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
/* Symbol + Titel als zusammenhaengende Gruppe — IMMER so verwenden, dann
   funktionieren auch Header mit Rechts-Inhalten (justify-content:space-between)
   sauber: <div class="box-header"><span class="box-header__title"><i></i>Titel</span><span>...rechts...</span></div> */
.box-header__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Klapp-Box — Akkordeon fuer lange Admin-Listen (Textvorlagen, Datenimport-
   Variablen): Klick auf den Box-Header klappt den Body auf/zu (Toggle-Logik
   in portal.js, Event-Delegation — funktioniert auch fuer dynamisch
   gerenderte Boxen). Markup: <div class="box box--klappbar"> + Pfeil
   <i class="bi bi-chevron-down box-klapp-pfeil"></i> als LETZTES Element im
   Header. Start ist zugeklappt; Klasse 'offen' im Markup = anfangs offen.
   Sitzt rechts vom Pfeil schon ein auto-Margin-Element (z.B. .tpl-kanal),
   den auto-Margin des Pfeils lokal mit margin-left:10px ueberschreiben. */
.box--klappbar > .box-header { cursor: pointer; -webkit-user-select: none; user-select: none; }
.box--klappbar > .box-header .box-klapp-pfeil {
  margin-left: auto;
  color: var(--label-color);
  transition: transform .15s ease;
}
.box--klappbar.offen > .box-header .box-klapp-pfeil { transform: rotate(180deg); }
.box--klappbar:not(.offen) > .box-body { display: none; }
.box--klappbar:not(.offen) > .box-header { border-bottom: none; }

/* Klickbarer Box-Titel (z.B. Reklamationsliste-Header oeffnet das Listen-/
   Versand-Popup, nur bei aktivem Filter). Setzt den Titel als Button zurueck
   und erbt Schriftgroesse/-gewicht/-farbe vom Box-Header. Hover hebt das
   Icon dezent in die Tool-Akzentfarbe. */
button.box-header__title {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: color .15s;
}
button.box-header__title--action:hover,
button.box-header__title--action:focus-visible {
  color: var(--pill-red-text);
  outline: none;
}
/* Dezenter Icon-Button RECHTS im Box-Header (z.B. Kopieren in Zwischenablage,
   Standort erfassen) — ohne Rand/Hintergrund, passt sich der Titel-Zeile an.
   Systemweite Komponente (Dashboard-Copy-Buttons, Liefergebiet-Standort).
   Tools, die ein anderes Icon-Mass brauchen, ueberschreiben nur font-size. */
.box-header__iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 4px; border: none; background: none;
  color: #b0b4b8; cursor: pointer; font-size: 14px; line-height: 1;
  transition: color .15s;
}
.box-header__iconbtn:hover:not(:disabled) { color: var(--sub); }
.box-header__iconbtn:disabled { opacity: .45; cursor: default; }
/* Dreht ein Bootstrap-Icon-Glyph — Loading-Indikator fuer Icon-Buttons
   (Aktions-Buttons nutzen das Sanduhr-Pattern setBtnLoading aus portal.js). */
@keyframes spin { to { transform: rotate(360deg); } }
.icon-spinning { display: inline-block; animation: spin 1s linear infinite; }
.box-body {
  padding: var(--box-body-padding);
}
/* Groesserer Innenabstand fuer Boxen mit Formular-/Drop-Zone-Inhalt
   (z.B. Datenimport-Upload, Liefergebiet-Check). */
.box-body--spacious {
  padding: var(--box-body-padding-spacious);
}
/* Klickbarer Header-Variant fuer Klapp-Boxen (Sektionen, Akkordeons):
   immer mit justify-content:space-between, damit Titel links und z.B.
   count-pill + Chevron rechts ohne weiteren Wrapper sitzen koennen. */
.box-header--toggle {
  cursor: pointer;
  user-select: none;
  justify-content: space-between;
}
.box-header--toggle:hover { background: #f8f9fa; }

/* Akzent-Variante fuer Header von Action-Boxen: ein extrem dezenter
   roter Hauch (4 % Alpha des --red-Tokens), nur sichtbar, wenn das
   Auge bewusst hinschaut. Wird systemweit dort gesetzt, wo die
   Box bereits einen .box--accent-red traegt — der duenne Stripe oben
   und der Header-Tint ergeben gemeinsam die dritte und kraefigste
   Stufe der Akzent-Hierarchie (siehe Glossar). */
.box-header--accent-red { background: rgba(234, 67, 53, .04); }

/* Schluessel-Wert-Zeilen fuer Detail-Auflistungen in Boxen. Label klein,
   uppercase, in der zentralen Label-Farbe; Wert daneben in Standard-Schwarz.
   Letzte Zeile ohne Trenner. Beispiel:
     <div class="info-row">
       <span class="info-label">PLZ</span>
       <span class="info-value">64579</span>
     </div> */
.info-row {
  display: flex;
  align-items: center;  /* Label (klein, Uppercase) und Wert (Body) auf gleicher optischer Mittelachse */
  gap: .5rem;
  padding: 5px 0;
  border-bottom: var(--divider);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  flex: 0 0 82px;
  font-size: var(--label-size);
  letter-spacing: var(--label-spacing);
  color: var(--label-color);
  padding-top: 2px;
  font-weight: var(--label-weight);
}
.info-value {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
}
/* ── Links — systemweiter Hover-Standard ─────────────────────────────────
   <a>-Tags ohne button-aehnliche Klasse haben standardmaessig keinen
   Underline (Portal-Stil) und bekommen ihn beim Hover/Focus. Schluessige
   Klick-Affordanz fuer Body-Text-Links, Telefon-/Mail-Werte, Utility-
   Links („Vorschau", „Sync …") etc. Button-/Tile-/Nav-aehnliche Links
   sind unten ausgenommen, weil sie eigene Hover-Visuals haben (bg/border). */
a               { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* ── Externer Link / Link-Button — systemweiter Standard ──────────────────
   Klein, dezent grau; kein Underline im Ruhezustand, Underline bei Hover/Fokus
   (KEINE Hover-Farbaenderung). Button-Reset integriert → visuell identisch als
   <a href> (externes Ziel: target="_blank" rel="noopener") und als <button>
   (Aktion). Optionales fuehrendes Icon im Markup mit .me-1. Vorbild: der
   'Arbeitsliste-RKL'-Link unter der RKL-Bearbeitung-Box. */
.ext-link {
  font-size: 12px;
  font-weight: 400;
  font-family: inherit;
  color: var(--label);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ext-link:hover, .ext-link:focus { text-decoration: underline; }
/* Abstand zwischen fuehrendem Icon und Link-Text — funktioniert systemweit,
   unabhaengig davon, ob das Markup Bootstraps .me-1 traegt oder nicht
   (Bootstrap wird in portal_base-Tools nicht geladen, da war der .me-1-
   Spacer wirkungslos und Icon und Text klebten zusammen). */
.ext-link > i:first-child { margin-right: .25rem; }

/* TELEFONNUMMER (Click-to-Call) — systemweiter Standard:
   Telefonnummern, die als Klartext sichtbar sind, IMMER als
   <a class="tel-link" href="tel:0123456789">…</a> auszeichnen (href nur
   Ziffern) und in jedem <head> '<meta name="format-detection"
   content="telephone=no">' setzen. So haengen iOS/Click-to-Call-Tools
   keine eigenen Hoerer-Icons an; der Link sieht aus wie normaler Text
   (Farbe erbt vom Umfeld), bleibt aber am Geraet antippbar. */
.tel-link { color: inherit; text-decoration: none; }

/* Stand-Hinweis unter Grafiken/Tabellen (Box-Body) — gleicher Look wie
   .ext-link (12px, weight 400, var(--label)), aber kein Link. Format: 'Stand: TT.MM.JJ'. */
.box-stand {
  font-size: 12px;
  font-weight: 400;
  font-family: inherit;
  color: var(--label);
  margin-top: 8px;
  line-height: 1.5;
}
.tile:hover, .tile:focus,
.tool-nav-brand:hover, .tool-nav-brand:focus,
.tool-nav-link:hover, .tool-nav-link:focus,
.tool-nav-btn:hover, .tool-nav-btn:focus,
.system-btn:hover, .system-btn:focus {
  text-decoration: none;
}

/* Speichern-Button im 'noch nicht bereit'-Zustand: hellgruen (gedaempft, heller
   Pill-Green-BG + dunkelgruener Text), solange die Voraussetzungen (Grund +
   Entscheidung Buero) fehlen. Sobald beide gewaehlt sind, faellt die Klasse weg
   und der Button ist system-gruen. Er bleibt klickbar — ein Klick ohne
   Voraussetzung laesst das fehlende Feld rot aufblinken (flashFieldError). */
.system-btn.system-btn--pending {
  background: var(--pill-green-bg);
  color: var(--pill-green-text);
  box-shadow: none;
}
.system-btn.system-btn--pending:hover,
.system-btn.system-btn--pending:focus,
.system-btn.system-btn--pending:active {
  /* Hover/Focus/Active darf den hellgruenen Pending-Zustand NICHT nach
     system-gruen (oder die dunklere :active-Farbe) kippen — sonst wirkt
     'Speichern' bereit, obwohl Grund + Entscheidung noch fehlen. Die
     globalen .system-btn:hover/:focus/:active-Regeln (gleiche Spezifitaet,
     stehen aber spaeter) wuerden den Button sonst umfaerben; die
     Doppelklasse + Pseudo hier (0,3,0) schlaegt sie. */
  background: var(--pill-green-bg);
  color: var(--pill-green-text);
  box-shadow: none;
}

/* Klickbare Werte (tel:/mailto:) in der System-Textfarbe halten — Browser-Blau
   ist hier visuell zu auffaellig. Hover-Underline kommt vom globalen Regel oben. */
.info-value a { color: var(--text); }
.info-value a:hover,
.info-value a:focus { color: var(--text); }

/* ── Pill / Badge — zentrale Komponente ────────────────────────────────
   Feste Hoehe (--pill-height), einheitliche Schrift und vier semantische
   Farben. Textfarbe = passende Box-Akzent-Farbe, Hintergrund eine helle
   Tinte derselben Farbfamilie (vgl. "Im Liefergebiet"-Pille).
     <span class="pill pill--green">✓ Im Liefergebiet</span>
   Verwende fuer Status- und Hinweis-Pillen IMMER eine der vier semantischen
   Farben (blau/gruen/rot/gelb); .pill--neutral nur als Fallback fuer rein
   informative Auflistungen ohne semantische Aussage (z.B. count-pill). */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-height);
  padding: 0 var(--pill-padding-x);
  border-radius: var(--pill-radius);
  font-size: var(--pill-font-size);
  font-weight: var(--pill-font-weight);
  letter-spacing: var(--pill-letter-spacing);
  line-height: 1;
  white-space: nowrap;
}
.pill--blue    { background: var(--pill-blue-bg);    color: var(--pill-blue-text); }
.pill--green   { background: var(--pill-green-bg);   color: var(--pill-green-text); }
.pill--red     { background: var(--pill-red-bg);     color: var(--pill-red-text); }
.pill--yellow  { background: var(--pill-yellow-bg);  color: var(--pill-yellow-text); }
.pill--neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-text); }

/* ── Page-Padding-Utility ─────────────────────────────────────────────
   Setzt den oberen/unteren Abstand zwischen Header (oder interner subnav)
   und Content auf den zentralen Standardwert. Tools koennen das
   horizontale Padding selbst beisteuern (RKL via Bootstrap container px-4,
   Datenimport/Liefergebiet via lokales .page-content). */
.page-pad {
  padding-top:    var(--page-top-spacing);
  padding-bottom: var(--page-bottom-spacing);
}

/* Systemweiter Page-Wrapper für neue Tools/Seiten unter portal_base.html
   (kein Bootstrap geladen). Horizontaler Innenrand + vertikales Padding —
   konsistent zum RKL-Tool, das Bootstrap-`container-fluid px-4 page-pad`
   nutzt. Für neue Seiten direkt `.portal-page` statt eigene Wrapper bauen. */
.portal-page {
  /* Feste Maximal-Breite, mittig zentriert — analog zum RKL-Tool
     (.maske-page/.liste-page = 1440px Content). Der Content (innerhalb des
     1.5rem-Padding) wächst ab ~1488px Viewport nicht weiter, die Seite
     zentriert; der Header (.tool-nav) bleibt full-width. So verhält sich das
     Dashboard im Breitzieh-Test identisch zu Reklamationen. */
  max-width: calc(1440px + 3rem);   /* 1440 Content + 2 × 1.5rem Padding */
  margin-left:  auto;
  margin-right: auto;
  padding-left:   1.5rem;
  padding-right:  1.5rem;
  padding-top:    var(--page-top-spacing);
  padding-bottom: var(--page-bottom-spacing);
}
@media (max-width: 767.98px) {
  .portal-page { padding-left: 1rem; padding-right: 1rem; }
}

/* ── portal_base-Formular-Bausteine OHNE Bootstrap (System-Standard) ───────
   Tools, die portal_base.html extends, laden KEIN Bootstrap. Damit die
   systemweiten Formular-Bausteine (.portal-dropdown.filter-single, System-
   Haken-Radios, .form-label-upper, .form-select-Trigger) trotzdem
   funktionieren, liefern die folgenden Regeln das, was sonst Bootstrap
   beisteuert. Scope `.portal-page` → RKL (eigenes base.html MIT Bootstrap,
   nutzt .maske-page/.liste-page) bleibt unberührt, obwohl portal.css dort
   nach Bootstrap geladen wird. Erstmals genutzt: Dashboard Box 7. */

/* Abschnitts-Label (identisch zur RKL-Definition in reklamationen/style.css). */
.form-label-upper {
  font-size:      var(--label-size) !important;
  letter-spacing: var(--label-spacing) !important;
  color:          var(--label-color) !important;
  font-weight:    var(--label-weight) !important;
  margin-bottom: 4px;
  display: block;
}

/* form-check: Radio + Label nebeneinander (Bootstrap-Layout-Ersatz). */
.portal-page .form-check        { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* Labels (Radios/Checkboxen + freistehende „Monat"/„Logistikpartner"/…)
   exakt wie in der RKL-Maske (reklamationen/style.css): .875rem (14px).
   Sonst sehen die Box-7-Zeilen kleiner aus als das Original-Modal in der
   Reklamationsliste. */
.portal-page .form-check-label  { cursor: pointer; color: var(--text); font-size: .875rem; line-height: 1.35; }

/* Radio-Appearance (Bootstrap-Basis-Ersatz). Zusammen mit der globalen
   .form-check-input[type=radio]-Regel (Größe + #27ae60 checked) ergibt das
   den System-Haken-Look: eckiges Kästchen, grün gefüllt, weißes Häkchen. */
.portal-page .form-check-input {
  appearance: none; -webkit-appearance: none;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0.25em;          /* eckig — System-Haken */
  margin: 0; flex: 0 0 auto;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.portal-page .form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
/* Checkbox-Häkchen (gleiches SVG wie Radio): ohne Bootstrap liefert sonst
   niemand das Bild — die globale [type="checkbox"]:checked-Regel oben färbt
   nur Grund + Border. */
.portal-page .form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* .form-select-Trigger (Dropdown-Button) wie ein natives Select. */
.portal-page .portal-dropdown .form-select {
  display: block; width: 100%;
  padding: 6px 30px 6px 12px;
  font-size: 14px; line-height: 1.5;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}

/* Dropdown-Menü: Positionierung + Open/Close (Bootstrap-Ersatz). Das
   Aussehen (Blur, Items) kommt aus dem .portal-dropdown-Block weiter oben.
   Öffnen/Schließen übernimmt portal.js (vanilla, wenn Bootstrap fehlt). */
.portal-page .portal-dropdown { position: relative; }
.portal-page .portal-dropdown > .dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1000;
  display: none; min-width: 100%; margin: 3px 0 0;
  /* Browser-Default <ul>: list-style: disc + padding-left: 40px → bei
     fehlendem Bootstrap würde das Bullets + Einrückung zeigen. */
  list-style: none;
}
.portal-page .portal-dropdown > .dropdown-menu li { list-style: none; margin: 0; }
.portal-page .portal-dropdown.show > .dropdown-menu { display: block; }
.portal-page .portal-dropdown .dropdown-divider {
  height: 0; margin: 4px 0; border-top: 1px solid rgba(0, 0, 0, .08);
}
/* Dropdown-Item-Button: Browser-Defaults zurücksetzen — sonst hätte jeder
   Eintrag eigenen border/background und sähe wie ein einzelnes Kästchen aus
   (Bootstrap räumt das normalerweise auf). NICHT `background: …` (Shorthand)
   verwenden — das würde die Hover-Pille des globalen
   .portal-dropdown .dropdown-item-Blocks gleicher Spezifität wegkürzen. */
.portal-page .portal-dropdown .dropdown-item {
  background-color: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  display: block;
}
/* Hover-/Aktiv-Pille noch einmal explizit mit höherer Spezifität, damit sie
   die obigen Resets sicher schlägt (gleiche Spezifität → Source-Order). */
.portal-page .portal-dropdown .dropdown-item:hover,
.portal-page .portal-dropdown .dropdown-item:focus,
.portal-page .portal-dropdown .dropdown-item.is-active {
  background-color: rgba(0, 0, 0, .12);
}


/* ── Textfeld — zentrale Komponente fuer Texteingaben ─────────────────
   Vorbild: "Nachricht des Kunden" in RKL-Maske.
   - .textfield             auf <input> / <textarea> im Edit-Modus (gruener Rahmen, weiss)
   - .textfield-display     grauer Anzeige-Kasten im View-Modus
   - .textfield-placeholder grauer Hinweistext innerhalb .textfield-display, wenn leer
   Beispiel View:
     <div class="textfield-display">
       {% if value %}{{ value }}{% else %}<span class="textfield-placeholder">Keine Nachricht</span>{% endif %}
     </div>
   Beispiel Edit:
     <textarea class="textfield" rows="3" placeholder="z. B. ...">{{ value }}</textarea> */
.textfield {
  width: 100%;
  background: var(--textfield-bg);
  color: var(--textfield-color);
  font-family: inherit;
  font-size: var(--textfield-font-size);
  line-height: var(--textfield-line-height);
  border: var(--textfield-border);
  border-radius: var(--textfield-radius);
  padding: var(--textfield-padding);
  min-height: var(--textfield-display-min-height);
  resize: vertical;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.textfield:focus { box-shadow: var(--textfield-focus-shadow); }
.textfield::placeholder { color: var(--textfield-placeholder-color); }

.textfield-display {
  background: var(--textfield-display-bg);
  color: var(--textfield-display-color);
  font-size: var(--textfield-display-font-size);
  line-height: var(--textfield-display-line-height);
  min-height: var(--textfield-display-min-height);
  padding: var(--textfield-display-padding);
  border-radius: var(--textfield-display-radius);
  transition: background-color .15s;
}
/* Klickbare Display-Boxen — Klick auf das Feld oeffnet den Edit-Modus
   (Vorbild: Inline-Edit-Pattern, ersetzt den separaten Pencil-Button). */
.textfield-display[role="button"] { cursor: pointer; }
.textfield-display[role="button"]:hover { background: #e8eaed; }
.textfield-placeholder { color: var(--textfield-placeholder-color); }

/* ── System-Button — zentrale Komponente fuer primaere Aktionen ───────
   Vorbild: "SMS senden" in der RKL-Logistikpartner-Box.
   Inline-flex mit Symbol davor + Text. Voll-Breite per zusaetzlichem
   Style/Utility (style="width:100%" oder Bootstrap .w-100), wenn die
   Aktion eine ganze Box ausfuellen soll. */
.system-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--system-btn-icon-gap);
  background: var(--system-btn-bg);
  color: var(--system-btn-color);
  border: none;
  padding: var(--system-btn-padding);
  font-family: inherit;
  font-size: var(--system-btn-font-size);
  font-weight: var(--system-btn-font-weight);
  letter-spacing: var(--system-btn-letter-spacing);
  border-radius: var(--system-btn-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--system-btn-shadow);
  transition: background .15s, box-shadow .15s, opacity .15s;
  /* Normalisierung, damit der Button sich IDENTISCH verhaelt, egal ob
     Bootstrap geladen ist (RKL) oder nicht (portal_base-Tools). Ohne diese
     Resets fuehlt sich derselbe .system-btn je nach Umgebung anders an
     (Browser-Default-Outline, Tap-Flash, native appearance). */
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;  /* kein grauer/blauer Aufblitz beim Antippen (Mobile) */
  user-select: none;
  outline: none;
}
.system-btn:hover,
.system-btn:focus {
  background: var(--system-btn-bg-hover);
  color: var(--system-btn-color);
  box-shadow: var(--system-btn-shadow-hover);
  text-decoration: none;
}
/* Gedrueckter Zustand (Maus + Touch) — einheitliches Press-Feedback. */
.system-btn:active {
  background: var(--system-btn-bg-active);
  box-shadow: var(--system-btn-shadow);
}
/* Sichtbarer Fokus-Ring NUR bei Tastatur-Navigation (Accessibility) — bei
   Maus-Klick kein haengender Outline-Ring. :focus-visible greift dafuer
   systemweit gleich, unabhaengig von Bootstrap. */
.system-btn:focus-visible {
  outline: none;
  box-shadow: var(--system-btn-focus-ring), var(--system-btn-shadow-hover);
}
/* Outline-Variante: gleiche Geometrie/Schrift/Letter-Spacing wie .system-btn,
   aber weisser Hintergrund + grauer Rand + Sub-Textfarbe. Fuer sekundaere
   Aktionen direkt neben einem .system-btn (z.B. 'Zuruecksetzen' neben
   'Anwenden'). Damit beide Buttons exakt gleich aussehen außer der Farbe. */
.system-btn--outline {
  background: var(--surface);
  color: var(--sub);
  border: 1px solid var(--border);
  box-shadow: none;
}
.system-btn--outline:hover,
.system-btn--outline:focus {
  background: var(--bg);
  color: var(--text);
  border-color: #aaa;
  box-shadow: none;
}
/* Press- + Tastatur-Fokus-Verhalten der Outline-Variante — analog zur
   gefuellten, nur mit neutralem Ring statt Akzentfarbe. Die gefuellte
   .system-btn:active-Regel wuerde sonst (gleiche Spezifitaet, steht frueher)
   den Outline-Button gruen einfaerben; die Doppelklasse hier schlaegt sie. */
.system-btn--outline:active {
  background: var(--bg);
  border-color: #aaa;
  box-shadow: none;
}
.system-btn--outline:focus-visible {
  outline: none;
  box-shadow: var(--system-btn-outline-focus-ring);
}
.system-btn:disabled,
.system-btn.is-pending {
  /* Hellgruener Pending/Disabled-State analog zur .pill--green —
     signalisiert 'gehoert zur Action, gerade nicht (vollstaendig) bereit'.
     Kein Schatten/Hover. .is-pending bleibt klickbar (gegenueber :disabled),
     damit der Click-Handler einen Hinweis-Toast zeigen kann. */
  background: var(--pill-green-bg);
  color: var(--pill-green-text);
  box-shadow: none;
  opacity: 1;
}
.system-btn:disabled        { cursor: not-allowed; }
.system-btn.is-pending      { cursor: pointer; }
.system-btn:disabled:hover,  .system-btn:disabled:focus,
.system-btn.is-pending:hover, .system-btn.is-pending:focus {
  background: var(--pill-green-bg);
  color: var(--pill-green-text);
  box-shadow: none;
}

/* ── Button-Ladezustand: animierte Sanduhr (systemweiter Standard) ─────────
   setBtnLoading()/saveAndReload() ersetzen den Button-Text durch eine
   animierte Inline-SVG-Sanduhr (svg.portal-spinner, OHNE Text — bewusst KEINE
   Icon-Font, die rendert hier nicht zuverlaessig) und setzen .is-loading.
   Die SVG nimmt per fill=currentColor die Button-Textfarbe an. Der Button
   behaelt dabei SEINE EIGENE Farbe — das
   :disabled-Hellgruen wird hier wieder ueberschrieben (der Button ist beim
   Laden zugleich :disabled). Die Sanduhr nimmt die Button-Textfarbe
   (currentColor): weiss auf den gefuellten Buttons, grau auf der Outline-
   Variante (z.B. Zuruecksetzen). Breite + Hoehe friert das JS ein, damit der
   Button beim Wechsel aufs textlose Icon weder schrumpft noch flacher wird. */
.system-btn.is-loading,
.system-btn.is-loading:hover,
.system-btn.is-loading:focus,
.system-btn.is-loading:disabled,
.system-btn.is-loading:disabled:hover,
.system-btn.is-loading:disabled:focus {
  background: var(--system-btn-bg);
  color: var(--system-btn-color);
  box-shadow: none;
  opacity: 1;
  cursor: progress;
}
.system-btn--outline.is-loading,
.system-btn--outline.is-loading:hover,
.system-btn--outline.is-loading:focus,
.system-btn--outline.is-loading:disabled,
.system-btn--outline.is-loading:disabled:hover,
.system-btn--outline.is-loading:disabled:focus {
  background: var(--surface);
  color: var(--sub);
  border-color: var(--border);
}
.portal-spinner {
  display: inline-block;
  transform-origin: center center;
  animation: portal-hourglass 1.8s ease-in-out infinite;
}
@keyframes portal-hourglass {
  /* Echtes Umkippen: haelt mit voller Sand-Kammer oben, kippt um (180° -> volle
     Kammer unten), haelt, kippt zurueck (360° = 0°, nahtlos). Die asymmetrische
     Fuellung (oben Sand, unten leer) macht das Umkippen deutlich sichtbar. */
  0%,  35% { transform: rotate(0deg); }
  50%, 85% { transform: rotate(180deg); }
  100%     { transform: rotate(360deg); }
}
/* Bewegungsreduktion respektieren: statische Sanduhr statt Drehung. */
@media (prefers-reduced-motion: reduce) {
  .portal-spinner { animation: none; }
}

/* Sanftes Ausblenden vor einem Reload (saveAndReload opts.fadeOut) — z.B. die
   Maske-Button-Reihe beim Wechsel Speichern <-> Zuruecksetzen. Das Einblenden
   der neuen Reihe nach dem Reload macht die jeweilige Seite (z.B.
   .mask-action--switch in der Reklamationen-style.css). */
.is-fading-out { opacity: 0; transition: opacity .2s ease; }

/* ── Leer-Hinweis (Empty-State) ────────────────────────────────────────────
   Systemweit einheitliche, dezente Anzeige fuer leere Inhalte (z.B.
   "Keine Eintraege", "Noch keine Daten") ODER fuer einen klickbaren
   Hinweis, der einen ausgeblendeten Inhalt zurueckholt. Aufbau:
   Icon ueber Text, beides zentriert, in Label-Farbe.
       <div class="box-empty">
         <i class="bi bi-inbox"></i>
         Noch keine Eintraege
       </div>
   Klickbare Variante: einfach <button class="box-empty"> verwenden —
   ohne Bootstrap-/Eigen-Styling, Hover macht Icon + Text dezent dunkler.
*/
.box-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--label-color);
  font-size: .875rem;
}
.box-empty i {
  display: block;
  font-size: 1.5rem;
  opacity: .4;
  margin-bottom: 6px;
}
/* Interaktive Variante: <button class="box-empty">. Reset der Browser-
   Defaults + ganze Flaeche klickbar; Hover/Focus hebt Icon + Text leicht
   hervor — Pattern fuer 'bringt etwas Ausgeblendetes zurueck' (z.B.
   die Workflow-Ampel in der RKL-Bearbeitungs-Box). */
button.box-empty {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  color: var(--label-color);
  width: 100%;
  transition: color .15s;
}
button.box-empty i { transition: opacity .15s, color .15s; }
button.box-empty:hover,
button.box-empty:focus-visible { color: var(--text); outline: none; }
button.box-empty:hover i,
button.box-empty:focus-visible i { opacity: .7; color: var(--text); }

/* ── Feld-Fehler-Flash (Voraussetzungs-Hinweis beim Speichern) ────────────
   Kurzer roter Aufblitz-Effekt um ein Feld/Wrapper, dessen Wert fuer
   die ausgeloeste Aktion fehlt. Wird per JS .field-error-flash gesetzt
   und nach 'animationend' wieder entfernt. Box-Shadow respektiert den
   evtl. vorhandenen border-radius des Elements. Analoge Geste zum
   Ampel-Flash auf der Liste — fuer Boxen ohne eigene Ampel. */
@keyframes fieldErrorFlash {
  0%   { box-shadow: 0 0 0 0   rgba(234, 67, 53, 0); }
  25%  { box-shadow: 0 0 0 4px rgba(234, 67, 53, .45); }
  100% { box-shadow: 0 0 0 0   rgba(234, 67, 53, 0); }
}
.field-error-flash {
  border-radius: 6px;
  animation: fieldErrorFlash .55s ease-out 2;
}