/* ======================================================================
   Produkt-UI 0.26 – Design-Fundament der Beschaffungsverwaltung

   Override-Schicht zum self-hosted Tailwind (static/js/tailwind.js).
   Reihenfolge: Tailwind erzeugt die Utilities zur Laufzeit, deshalb
   erzwingen einzelne Regeln hier mit !important.

   Profil (löst den Entwurf 0.24 ab, Auftrag „vollständiges Redesign"):
   - Weiche Produktoberfläche statt Karteikasten: weiße Karten mit 14 px
     Radius und abgestufter Schattenleiter, Seitenfläche leicht kühl.
   - Bedienfarbe ist Petrol (#106E68). Sie ersetzt das bisherige Blau –
     eigenständiger, ruhiger, und sie beißt sich nicht mit den fünf
     Statusrollen (Blau ist jetzt frei für „Info").
   - Gelb #FFED00 ist die Hausfarbe des Landkreises und trägt ab 0.26 die
     Marke (Signet in der Seitenleiste) UND weiterhin Wertgrenze und
     Meldepflicht. Es ist keine allgemeine Akzentfarbe.
   - Statusrollen als runde, farbige Chips (neutral/erfolg/warnung/
     kritisch/info) – jede Rolle ist ein geprüftes Paar aus Fläche und
     Text, nie helle Schrift auf Pastell.
   - Hausschrift Univers (lokal auf den Arbeitsplätzen), Ersatz Arial.
     Zahlen, Nummern und Beträge stehen in Monospace (--schrift-zahl).
   - Seitenleiste folgt ab 0.26 dem Thema: hell im hellen Modus (vorher in
     beiden Modi dunkel). Der aktive Punkt ist eine weiche Petrol-Pille,
     kein Vollfarbblock.
   - Keine Versalien im Fließtext. Kleine Spalten-/Kapitelmarken dürfen
     gesperrt und in Versalien stehen (.ui-label).
   - Das Landkreis-Logo bleibt als Wort-Bild-Marke auf weißer Box.

   Alle Farbwerte bestehen WCAG 2.1 AA (4,5:1) in beiden Modi; die
   Paarliste steht in docs/kontrast-paare.md und wird bei jedem Testlauf
   nachgerechnet (apps/dashboard/tests_kontrast.py).
   ====================================================================== */

/* ----------------------------------------------------------------------
   Schrift
   ---------------------------------------------------------------------- */
body {
    font-family: 'Univers','Univers LT Std','UniversLTStd',Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Startfarbe des Bodys schon vor dem Tailwind-Aufbau setzen (kein Aufblitzen). */
body { background:#f6f7fa; }
html.dark body { background:#0e1116; }

/* Keine Versalien im Fließtext … */
.uppercase { text-transform: none !important; }
/* … außer bei den kleinen Marken (Spaltenköpfe, Kapitelmarken). */
.ui-label {
    font-size:11px; font-weight:600; line-height:1;
    letter-spacing:.07em; text-transform:uppercase !important;
    color:var(--text-gedaempft);
}

/* ======================================================================
   Design-Tokens (docs/DESIGN-KONZEPT.md)

   Der Dunkelmodus wird per html.dark umgeschaltet (Tailwind darkMode:"class");
   [data-theme="dark"] ist zusätzlich für spätere Nutzung berücksichtigt.
   ====================================================================== */
:root {
    /* Flächen – hell (Standardmodus) */
    --flaeche-seite:#f6f7fa; --flaeche-karte:#ffffff;
    --flaeche-erhoben:#edf0f5; --flaeche-eingabe:#ffffff;
    /* Text */
    --text-primaer:#131822; --text-sekundaer:#4a5462;
    --text-gedaempft:#5e6775; --text-akzent:#0c5853;
    /* Rahmen */
    --rahmen:#eaedf3; --rahmen-stark:#d3d9e2;
    /* Akzent
       REGEL: --akzent ist eine FLÄCHE, keine Textfarbe. Darauf steht immer
       --auf-akzent. Akzentfarbener TEXT nutzt ausschließlich --text-akzent.
       --akzent-weich ist die getönte Fläche (aktive Navigation, Chips) und
       trägt --text-akzent. Beides ist durch Tests abgesichert
       (apps/dashboard/tests_kontrast.py), Messwerte in docs/a11y-kontrast.md. */
    --akzent:#106e68; --akzent-hover:#0c5853; --auf-akzent:#ffffff;
    --akzent-weich:#dcf0ee; --akzent-weich-rand:#b6ded9;
    /* Hausfarbe Gelb – Marke, Wertgrenze und Meldepflicht */
    --hausfarbe:#FFED00; --auf-hausfarbe:#14181f;
    /* Statusrollen: Fläche + Text als Paar (nie helle Schrift auf Pastell) */
    --rolle-neutral-flaeche:#eff1f5;  --rolle-neutral-text:#3a4453;
    --rolle-erfolg-flaeche:#e4f7ee;   --rolle-erfolg-text:#0b5c3e;
    --rolle-warnung-flaeche:#fff4da;  --rolle-warnung-text:#6b4a05;
    --rolle-kritisch-flaeche:#fdebec; --rolle-kritisch-text:#8e1b24;
    --rolle-info-flaeche:#e8f1fd;     --rolle-info-text:#17457f;
    /* Sechste Rolle: die Phase „Rechnungsprüfung" hat im Haus seit jeher
       Violett – sie ist damit von „beauftragt" (blau) unterscheidbar. */
    --rolle-rechnung-flaeche:#f1ebfd;  --rolle-rechnung-text:#5b21b6;
    --rolle-rechnung-rand:#d9c9f8;
    --rolle-neutral-rand:#dde2ea; --rolle-erfolg-rand:#b3e4cc;
    --rolle-warnung-rand:#f2dba6; --rolle-kritisch-rand:#f5c4c7;
    --rolle-info-rand:#c3d9f7;
    /* Kennzahl-Akzente der Startseite (Signet-Plakette der Kachel) */
    --kante-vorgaenge:#106e68; --kante-rechnungen:#6d28d9;
    --kante-ueberfaellig:#b42318; --kante-lieferung:#8a5a05;
    /* Maße – Produkt-UI rundet großzügiger als der Entwurf 0.24 */
    --radius-karte:18px; --radius-bedienung:11px; --radius-pille:999px;
    --radius-schale:22px; --radius-klein:8px;
    --abstand-karte-innen:24px; --abstand-karte-aussen:20px;
    /* Schattenleiter – der eigentliche Träger des neuen Eindrucks */
    --schatten-1:0 1px 2px rgba(19,24,34,.04), 0 6px 16px -6px rgba(19,24,34,.10);
    --schatten-2:0 2px 4px -2px rgba(19,24,34,.06), 0 14px 32px -10px rgba(19,24,34,.14);
    --schatten-3:0 18px 36px -14px rgba(19,24,34,.18), 0 40px 72px -28px rgba(19,24,34,.22);
    --schatten-knopf:0 1px 2px rgba(19,24,34,.07);
    /* Bewegung */
    --tempo:.16s cubic-bezier(.4,0,.2,1);
    /* Schrift */
    --schrift:'Univers','Univers LT Std','UniversLTStd',Arial,sans-serif;
    --schrift-zahl:ui-monospace,Menlo,Consolas,'DejaVu Sans Mono',monospace;
    /* Seitenleiste – folgt ab 0.26 dem Thema */
    --sidebar-breite:268px;
    --flaeche-schiene:#ffffff; --flaeche-schiene-rand:#e3e7ee;
    --schiene-text:#4a5462; --schiene-text-aktiv:#0c5853;
    --schiene-hover:#f1f4f8;
    /* Obere Leiste */
    --flaeche-leiste:#ffffff; --rahmen-leiste:#e3e7ee;
}
html.dark, :root[data-theme="dark"] {
    --flaeche-seite:#0e1116; --flaeche-karte:#161b22;
    --flaeche-erhoben:#1d242e; --flaeche-eingabe:#1a2029;
    --text-primaer:#e8ecf2; --text-sekundaer:#9aa5b4;
    --text-gedaempft:#8a94a3; --text-akzent:#5bc8bf;
    --rahmen:#242c37; --rahmen-stark:#313b48;
    --akzent:#106e68; --akzent-hover:#157c75; --auf-akzent:#ffffff;
    --akzent-weich:#10312f; --akzent-weich-rand:#1c4a46;
    --hausfarbe:#FFED00; --auf-hausfarbe:#14181f;
    --rolle-neutral-flaeche:#202834;  --rolle-neutral-text:#c7d0dc;
    --rolle-erfolg-flaeche:#0f2e22;   --rolle-erfolg-text:#6fe3b4;
    --rolle-warnung-flaeche:#302708;  --rolle-warnung-text:#f3d680;
    --rolle-kritisch-flaeche:#33161a; --rolle-kritisch-text:#ff9aa0;
    --rolle-info-flaeche:#16273f;     --rolle-info-text:#a6c8fa;
    --rolle-rechnung-flaeche:#241a3d;  --rolle-rechnung-text:#c4b5fd;
    --rolle-rechnung-rand:#3d2f66;
    --rolle-neutral-rand:#2e3844; --rolle-erfolg-rand:#1d5540;
    --rolle-warnung-rand:#544313; --rolle-kritisch-rand:#5a2a2f;
    --rolle-info-rand:#274877;
    --kante-vorgaenge:#5bc8bf; --kante-rechnungen:#c4b5fd;
    --kante-ueberfaellig:#ff9aa0; --kante-lieferung:#FFED00;
    --schatten-1:0 1px 2px rgba(0,0,0,.40);
    --schatten-2:0 2px 6px -2px rgba(0,0,0,.45), 0 10px 24px -8px rgba(0,0,0,.55);
    --schatten-3:0 12px 28px -10px rgba(0,0,0,.60), 0 28px 56px -20px rgba(0,0,0,.65);
    --schatten-knopf:0 1px 2px rgba(0,0,0,.45);
    --flaeche-schiene:#12161d; --flaeche-schiene-rand:#242c37;
    --schiene-text:#9aa5b4; --schiene-text-aktiv:#e8ecf2;
    --schiene-hover:#1d242e;
    --flaeche-leiste:#12161d; --rahmen-leiste:#242c37;
}

/* Akzent-Token der Bestandsseiten (Tailwind-Ebene) auf die Tokens ziehen. */
:root { --ui-accent-text:var(--text-akzent); }

/* Akzenttext: lesbares Petrol in beiden Modi (KPI-Zahlen, Links, Aktiv-Indikatoren). */
[class*="text-primary-"] { color: var(--ui-accent-text) !important; }

/* Zahlen, Nummern, Beträge stehen in Monospace mit gleicher Ziffernbreite. */
.zahl, .ui-tabelle td.zahl, .ui-metrik__wert {
    font-family:var(--schrift-zahl);
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}

/* Durchgängig sichtbarer Tastatur-Fokus (WCAG 2.2 AA, 2.4.7/2.4.11) für ALLE
   interaktiven Elemente – auch klickbare Tabellenzeilen (tabindex) und Reiter.
   Nur bei Tastatur-Navigation (:focus-visible), damit Mausklicks keinen Rahmen
   hinterlassen. In beiden Themes über das Akzent-Token gut sichtbar. */
:focus-visible {
    outline: 2px solid var(--text-akzent) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-klein);
}

/* Custom Scrollbar – schmal und unaufdringlich. */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cdd4de; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
.dark ::-webkit-scrollbar-thumb { background:#313b48; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:#aeb8c6; background-clip:content-box; }
.dark ::-webkit-scrollbar-thumb:hover { background:#44515f; background-clip:content-box; }

/* Native Form-Controls im Dark Mode */
html.dark { color-scheme: dark; }
html.dark select, html.dark option { background-color:#1a2029; color:#e8ecf2; }

/* App-Shell: Body scrollt nie; nur innere Bereiche scrollen */
html, body { height:100%; }
body { overflow:hidden; }

/* Modal-Backdrop */
.modal-backdrop { background: rgba(11,14,19,.62); backdrop-filter: blur(2px); }

/* Kopf- und Fußzeile im Dunkelmodus auf die Leistenfläche ziehen. */
.dark header.bg-white, .dark footer.bg-white { background-color:var(--flaeche-leiste) !important; }

/* Tabellenzeilen-Hover: erhobene Fläche, kein Farbstich. */
.table-row-hover { transition: background-color var(--tempo); }
.table-row-hover:hover { background-color: var(--flaeche-erhoben); }

/* AA-Kontrast: blasse Grautöne anheben (Bestandsseiten, Tailwind-Ebene) */
.text-gray-400 { color:var(--text-sekundaer) !important; }
.dark .text-gray-400 { color:var(--text-sekundaer) !important; }
.text-gray-500 { color:var(--text-sekundaer) !important; }
.dark .text-gray-500 { color:var(--text-sekundaer) !important; }
.dark .text-gray-300 { color:#c7d0dc !important; }

/* Platzhalter klar lesbar */
::placeholder { color:var(--text-gedaempft) !important; opacity:1 !important; }

/* Dezente Container-Ränder (kein „Lichtring") */
.border-gray-100 { border-color:var(--rahmen) !important; }
.border-gray-200 { border-color:var(--rahmen) !important; }
.dark .border-gray-100, .dark .border-gray-200,
.dark .border-gray-700, .dark .border-gray-800 { border-color:var(--rahmen) !important; }

/* Bestandsseiten: die alten harten Ecken auf die neue Rundung ziehen. */
.rounded-md { border-radius:var(--radius-klein) !important; }
.rounded-lg, .rounded-xl { border-radius:var(--radius-bedienung) !important; }
.rounded-2xl { border-radius:var(--radius-karte) !important; }

/* ======================================================================
   App-Shell: linke Seitenleiste (Hauptnavigation)

   Markup: templates/_sidebar.html · Menüpunkte: beschaffung/navigation.py
   Zustände als Klasse am <html>-Element (in base.html gesetzt/gemerkt):
     .sidebar-schmal  eingeklappt (nur Icons, Untermenü als Flyout) – ab 768 px
     .sidebar-offen   Schublade sichtbar – nur im schmalen Fenster (< 768 px)
   Die Leiste folgt ab 0.26 dem Thema (hell im hellen Modus).
   ====================================================================== */
.sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-breite);
    flex: 0 0 var(--sidebar-breite);
    background: var(--flaeche-schiene);
    border-right: 1px solid var(--flaeche-schiene-rand);
    color: var(--schiene-text);
    transition: width var(--tempo), flex-basis var(--tempo);
}

/* Kopfbereich oben links: Marke + Umschalter (Panel-Symbol, kein Hamburger). */
.sidebar-kopf {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 66px;               /* auf Höhe der oberen Leiste */
    padding: 16px 14px 16px 18px;
}
.sidebar-marke { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; color: var(--text-primaer); text-decoration: none; }
/* Signet in der Hausfarbe – die einzige große Gelbfläche der Anwendung. */
.sidebar-marke-zeichen {
    flex: 0 0 34px; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--hausfarbe); color: var(--auf-hausfarbe);
    font-weight: 700; font-size: 12px; letter-spacing: .02em; line-height: 1;
    box-shadow: var(--schatten-knopf);
}
.sidebar-marke-schrift { display: flex; flex-direction: column; min-width: 0; }
.sidebar-marke-titel { font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-marke-unter { font-size: 11px; line-height: 1.3; margin-top: 2px; color: var(--text-gedaempft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-umschalter {
    flex: 0 0 auto; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-klein); background: transparent;
    color: var(--text-gedaempft); cursor: pointer;
    transition: background-color var(--tempo), color var(--tempo);
}
.sidebar-umschalter:hover { background: var(--schiene-hover); color: var(--text-primaer); }
.icon-wenn-schmal { display: none; }

/* Navigationspunkte */
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 12px 12px; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.nav-link {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 11px 13px;
    border: 0; border-radius: var(--radius-bedienung); background: none;
    color: var(--schiene-text); text-align: left; text-decoration: none;
    font-size: 14px; font-weight: 500; line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--tempo), color var(--tempo);
}
.nav-link:hover { background: var(--schiene-hover); color: var(--text-primaer); }
/* Aktiv ist eine weiche Pille, kein Vollfarbblock – so trägt der Akzent nur
   dort, wo er etwas bedeutet, und die Leiste bleibt ruhig. */
.nav-link.aktiv {
    background: var(--akzent-weich);
    color: var(--text-akzent);
    font-weight: 600;
}
.nav-link.aktiv:hover { background: var(--akzent-weich); }
.nav-icon { flex: 0 0 17px; width: 17px; height: 17px; }
.nav-chevron { flex: 0 0 12px; width: 12px; height: 12px; margin-left: auto; transition: transform var(--tempo); opacity:.7; }
.nav-gruppe.offen > .nav-gruppe-kopf .nav-chevron { transform: rotate(180deg); }

/* Untermenü (Accordion in der ausgeklappten Leiste) – mit Führungslinie. */
.nav-gruppe { position: relative; }
.sidebar-nav .untermenue {
    display: none; margin: 2px 0 6px; padding-left: 12px;
    margin-left: 20px; border-left: 1px solid var(--flaeche-schiene-rand);
}
.sidebar-nav .nav-gruppe.offen > .untermenue { display: block; }
.untermenue .nav-link { padding: 7px 10px; font-weight: 400; font-size: 13px; }
.untermenue .nav-link.aktiv { font-weight: 600; }
.untermenue .nav-icon { flex-basis: 15px; width: 15px; height: 15px; }
.flyout-titel { display: none; }

/* Fußbereich der Leiste: Version und Stand. */
.sidebar-fuss {
    margin-top: auto; padding: 14px 18px;
    border-top: 1px solid var(--flaeche-schiene-rand);
    font-size: 11px; line-height: 1.5; color: var(--text-gedaempft);
}

/* --- Breites Fenster: ein-/ausklappbar, eingeklappt mit Flyout --- */
@media (min-width: 768px) {
    html.sidebar-schmal { --sidebar-breite: 72px; }

    html.sidebar-schmal .sidebar-kopf { flex-direction: column; gap: 8px; min-height: 0; padding: 12px 8px; }
    html.sidebar-schmal .sidebar-marke { flex: none; justify-content: center; }
    html.sidebar-schmal .icon-wenn-breit { display: none; }
    html.sidebar-schmal .icon-wenn-schmal { display: inline-block; }
    html.sidebar-schmal .sidebar-fuss { display: none; }

    /* Eingeklappt: nur Icons (Beschriftung und Chevron tragen .nav-text). */
    html.sidebar-schmal .nav-text { display: none; }
    html.sidebar-schmal .sidebar-nav > ul > li > .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
    html.sidebar-schmal .sidebar-nav { overflow: visible; }   /* Flyout darf herausragen */

    /* Untermenü erscheint als Flyout neben dem Icon (Maus oder Tastatur-Fokus). */
    html.sidebar-schmal .nav-gruppe > .untermenue {
        display: none;
        position: absolute; left: 100%; top: 0; z-index: 60;
        min-width: 236px; margin: 0 0 0 6px; padding: 7px;
        border-left: 0;
        background: var(--flaeche-karte);
        border: 1px solid var(--rahmen);
        border-radius: var(--radius-karte);
        box-shadow: var(--schatten-3);
    }
    html.sidebar-schmal .nav-gruppe:hover > .untermenue,
    html.sidebar-schmal .nav-gruppe:focus-within > .untermenue { display: block; }
    html.sidebar-schmal .untermenue .nav-link { justify-content: flex-start; }
    html.sidebar-schmal .flyout-titel {
        display: block; padding: 5px 10px 8px; margin-bottom: 5px;
        font-size: 11px; font-weight: 600; letter-spacing:.07em; text-transform: uppercase;
        color: var(--text-gedaempft);
        border-bottom: 1px solid var(--rahmen);
    }
}

/* --- Schmales Fenster: Leiste wird zur Schublade über dem Inhalt --- */
.sidebar-overlay { display: none; }
@media (max-width: 767px) {
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
        width: 260px; flex-basis: 260px;
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.4,0,.2,1);
        box-shadow: var(--schatten-3);
    }
    html.sidebar-offen .sidebar { transform: none; }
    html.sidebar-offen .sidebar-overlay {
        display: block; position: fixed; inset: 0; z-index: 45;
        background: rgba(11,14,19,.55);
    }
}

/* ======================================================================
   Komponentenklassen (nutzen ausschließlich die Tokens)
   ====================================================================== */

/* --- Karte: der Grundbaustein. Weich, mit Schatten statt hartem Rahmen. --- */
.ui-karte {
    background:var(--flaeche-karte);
    border:1px solid var(--rahmen);
    border-radius:var(--radius-karte);
    box-shadow:var(--schatten-1);
}
.ui-karte__kopf {
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:18px var(--abstand-karte-innen);
    border-bottom:1px solid var(--rahmen);
}
/* Einklappbare Karte: der Kopf ist ein <summary> – Marker weg, Zeiger drauf. */
summary.ui-karte__kopf { cursor:pointer; list-style:none; }
summary.ui-karte__kopf::-webkit-details-marker { display:none; }
summary.ui-karte__kopf:hover { background:var(--flaeche-erhoben); }
details.ui-karte > summary.ui-karte__kopf { border-radius:calc(var(--radius-karte) - 1px) calc(var(--radius-karte) - 1px) 0 0; }
details.ui-karte:not([open]) > summary.ui-karte__kopf { border-bottom-color:transparent; border-radius:calc(var(--radius-karte) - 1px); }
.ui-karte__titel { font-size:15.5px; font-weight:600; letter-spacing:-.015em; color:var(--text-primaer); }
/* Viele Karten tragen ihren Titel direkt in der Kopfzeile (h2/h3 mit
   .ui-karte__kopf) statt in einem eigenen .ui-karte__titel. */
h2.ui-karte__kopf, h3.ui-karte__kopf { font-size:15.5px; font-weight:600; letter-spacing:-.015em; color:var(--text-primaer); margin:0; }
.ui-karte__aktionen { display:flex; align-items:center; gap:.5rem; }
.ui-karte__inhalt { padding:var(--abstand-karte-innen); color:var(--text-primaer); }

/* --- Knöpfe --- */
.ui-knopf {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 17px; border:1px solid transparent;
    border-radius:var(--radius-bedienung);
    font-size:14px; font-weight:600; line-height:1.2;
    cursor:pointer; text-decoration:none; white-space:nowrap;
    transition:background-color var(--tempo), border-color var(--tempo),
               box-shadow var(--tempo), transform var(--tempo);
}
.ui-knopf:active { transform:translateY(.5px); }
.ui-knopf--primaer { background:var(--akzent); color:var(--auf-akzent); box-shadow:var(--schatten-knopf); }
.ui-knopf--primaer:hover { background:var(--akzent-hover); box-shadow:var(--schatten-2); }
.ui-knopf--sekundaer {
    background:var(--flaeche-karte); color:var(--text-primaer);
    border-color:var(--rahmen-stark); font-weight:500; box-shadow:var(--schatten-knopf);
}
.ui-knopf--sekundaer:hover { background:var(--flaeche-erhoben); border-color:var(--rahmen-stark); }
.ui-knopf--still { background:transparent; color:var(--text-sekundaer); font-weight:500; }
.ui-knopf--still:hover { background:var(--flaeche-erhoben); color:var(--text-primaer); }
.ui-knopf--gefahr {
    background:var(--rolle-kritisch-flaeche); color:var(--rolle-kritisch-text);
    border-color:var(--rolle-kritisch-rand);
}
.ui-knopf--gefahr:hover { filter:brightness(.97); box-shadow:var(--schatten-2); }
.ui-knopf--nur-icon { padding:0; width:38px; height:38px; }
/* Winziger Knopf für Inline-Formulare in Listen und Bäumen. */
.ui-knopf--winzig { padding:4px 9px; font-size:12px; border-radius:var(--radius-klein); }
.ui-knopf[disabled], .ui-knopf[aria-disabled="true"] { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* --- Badges: runde, farbige Chips (Produkt-UI 0.26) --- */
.ui-badge {
    display:inline-flex; align-items:center; gap:.375rem;
    padding:5px 12px; border-radius:var(--radius-pille);
    font-size:12px; font-weight:600; line-height:1.3;
    border:1px solid transparent;
    background:var(--rolle-neutral-flaeche); color:var(--rolle-neutral-text);
    border-color:var(--rolle-neutral-rand);
}
.ui-badge--neutral  { background:var(--rolle-neutral-flaeche);  color:var(--rolle-neutral-text);  border-color:var(--rolle-neutral-rand); }
.ui-badge--erfolg   { background:var(--rolle-erfolg-flaeche);   color:var(--rolle-erfolg-text);   border-color:var(--rolle-erfolg-rand); }
.ui-badge--warnung  { background:var(--rolle-warnung-flaeche);  color:var(--rolle-warnung-text);  border-color:var(--rolle-warnung-rand); }
.ui-badge--kritisch { background:var(--rolle-kritisch-flaeche); color:var(--rolle-kritisch-text); border-color:var(--rolle-kritisch-rand); }
.ui-badge--info     { background:var(--rolle-info-flaeche);     color:var(--rolle-info-text);     border-color:var(--rolle-info-rand); }
.ui-badge--rechnung { background:var(--rolle-rechnung-flaeche); color:var(--rolle-rechnung-text); border-color:var(--rolle-rechnung-rand); }
/* Punkt vor der Beschriftung – er nimmt die Schriftfarbe der Rolle auf. */
.ui-badge__punkt { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
/* Meldepflicht/Wertgrenze – die Hausfarbe als Merkzeichen. */
.ui-badge--melde {
    background:var(--hausfarbe); color:var(--auf-hausfarbe); border-color:transparent;
    font-weight:700; font-size:10.5px; padding:3px 8px; letter-spacing:.02em;
}

/* --- Tabelle --- */
.ui-tabelle { width:100%; border-collapse:separate; border-spacing:0; }
.ui-tabelle thead th {
    position:sticky; top:0; z-index:1;
    /* Der Kopf sitzt auf der Kartenfläche, nicht auf einem grauen Band –
       eine Linie reicht. Das lässt die Liste deutlich leichter wirken. */
    background:var(--flaeche-karte);
    color:var(--text-gedaempft);
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    text-align:left; padding:14px 20px 12px; white-space:nowrap;
    border-bottom:1px solid var(--rahmen-stark);
}
.ui-tabelle thead th a { color:inherit; text-decoration:none; }
.ui-tabelle thead th a:hover { color:var(--text-primaer); }
.ui-tabelle tbody td {
    padding:15px 20px; border-top:1px solid var(--rahmen);
    color:var(--text-primaer); font-size:14px; line-height:1.5;
}
.ui-tabelle tbody tr:first-child td { border-top:0; }
.ui-tabelle tbody tr { transition:background-color var(--tempo); }
.ui-tabelle tbody tr:hover { background:var(--flaeche-erhoben); }
/* Enge Variante: Vergleichs- und Kennzahlentabellen INNERHALB einer Karte,
   die keine eigene Kopffläche brauchen (z. B. der Drei-Wege-Abgleich). */
.ui-tabelle--kompakt thead th { background:transparent; padding:0 10px 7px 0; }
.ui-tabelle--kompakt thead th:last-child { padding-right:0; }
.ui-tabelle--kompakt tbody td { padding:7px 10px 7px 0; font-size:13px; }
.ui-tabelle--kompakt tbody td:last-child { padding-right:0; }
.ui-tabelle--kompakt tbody tr:hover { background:transparent; }

/* Schale um die Tabelle: waagerecht scrollbar, ohne dass die Seite wandert. */
.ui-tabelle-schale { overflow-x:auto; }
/* Tabelle direkt in einer Karte: die unteren Ecken mitrunden. */
.ui-karte > .ui-tabelle-schale { border-radius:0 0 var(--radius-karte) var(--radius-karte); }

/* --- Kennzahl-Kachel: Zahl zuerst, Label darunter, Signet-Plakette --- */
.ui-metrik {
    position:relative; display:block;
    background:var(--flaeche-karte);
    border:1px solid var(--rahmen);
    border-radius:var(--radius-karte);
    box-shadow:var(--schatten-1);
    padding:24px 26px 22px; text-decoration:none;
    transition:box-shadow var(--tempo), transform var(--tempo), border-color var(--tempo);
}
a.ui-metrik:hover { box-shadow:var(--schatten-2); transform:translateY(-1px); border-color:var(--rahmen-stark); }
.ui-metrik__wert  { display:block; font-size:36px; font-weight:600; letter-spacing:-.03em; line-height:1.05; color:var(--text-primaer); }
.ui-metrik__label { display:block; font-size:13.5px; font-weight:500; color:var(--text-sekundaer); margin-top:10px; }
.ui-metrik__zusatz { display:block; font-size:12px; line-height:1.35; color:var(--text-gedaempft); margin-top:10px; }
/* Die Rolle färbt eine schmale Plakette am oberen Rand der Kachel. */
.ui-metrik::before {
    content:""; position:absolute; left:26px; top:0; width:40px; height:3px;
    border-radius:0 0 3px 3px; background:var(--kante-vorgaenge);
}
.ui-metrik--neutral::before  { background:var(--kante-vorgaenge); }
.ui-metrik--erfolg::before   { background:var(--rolle-erfolg-text); }
.ui-metrik--warnung::before  { background:var(--kante-lieferung); }
.ui-metrik--kritisch::before { background:var(--kante-ueberfaellig); }
.ui-metrik--rechnung::before { background:var(--kante-rechnungen); }

/* --- Leerzustand --- */
.ui-leer { text-align:center; padding:2.5rem var(--abstand-karte-innen); color:var(--text-sekundaer); }
.ui-leer__titel { font-weight:600; font-size:15px; color:var(--text-primaer); margin-bottom:.35rem; }
.ui-leer__aktion { margin-top:1rem; }

.ui-rechts { text-align:right; }

/* --- Blättern --- */
.ui-blaettern {
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    margin-top:var(--abstand-karte-aussen); font-size:13px; color:var(--text-sekundaer);
}
.ui-blaettern__knoepfe { display:flex; gap:.5rem; }

/* --- Hinweisband über dem Inhalt (Wertgrenze, Meldepflicht, Frist). --- */
.ui-band {
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; border-radius:var(--radius-bedienung);
    border:1px solid var(--rolle-info-rand); background:var(--rolle-info-flaeche);
    color:var(--rolle-info-text); font-size:13.5px; line-height:1.5;
}
.ui-band--melde { border-color:var(--rolle-warnung-rand); background:var(--rolle-warnung-flaeche); color:var(--rolle-warnung-text); }
.ui-band--kritisch { border-color:var(--rolle-kritisch-rand); background:var(--rolle-kritisch-flaeche); color:var(--rolle-kritisch-text); }
.ui-band__zeichen {
    flex:none; width:22px; height:22px; border-radius:50%;
    background:var(--hausfarbe); color:var(--auf-hausfarbe);
    font-size:13px; font-weight:700; line-height:22px; text-align:center;
}

/* --- Summenband direkt über der Tabelle (Anzahl · Summen · Blätterstand). --- */
.ui-summenband {
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    background:var(--flaeche-karte); border:1px solid var(--rahmen);
    border-bottom:0; border-radius:var(--radius-karte) var(--radius-karte) 0 0;
    padding:13px 18px; font-size:12.5px; color:var(--text-sekundaer);
}
.ui-summenband strong { font-family:var(--schrift-zahl); font-weight:600; color:var(--text-primaer); }
.ui-summenband__trenner { width:1px; height:15px; background:var(--rahmen); }

/* --- Leiste für Mehrfachauswahl (zwischen Summenband und Tabelle). --- */
.ui-bulkleiste {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:var(--akzent-weich); border:1px solid var(--akzent-weich-rand);
    border-bottom:0; padding:11px 18px; font-size:12.5px; color:var(--text-akzent);
}
/* Die Leiste wird per JS über die Tailwind-Klasse `hidden` geschaltet. Weil beide
   Selektoren dieselbe Spezifität haben, entscheidet sonst die Ladereihenfolge –
   und die Tailwind-Laufzeit hängt ihr <style> nach diesem Stylesheet ein. Deshalb
   hier ausdrücklich: versteckt schlägt Flex. */
.ui-bulkleiste.hidden { display:none; }
.ui-bulkleiste__knopf {
    border:1px solid var(--akzent-weich-rand); background:var(--flaeche-karte);
    color:var(--text-akzent); font-size:12.5px; font-weight:600;
    padding:6px 12px; border-radius:var(--radius-klein); cursor:pointer;
    transition:background-color var(--tempo);
}
.ui-bulkleiste__knopf:hover { background:var(--flaeche-erhoben); }

/* --- Chip für einen aktiven Filter (mit ×-Knopf). --- */
.ui-chip {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--akzent-weich); border:1px solid var(--akzent-weich-rand);
    color:var(--text-akzent); font-size:12.5px; font-weight:500;
    padding:5px 11px; border-radius:var(--radius-pille); text-decoration:none;
}
.ui-chip__weg { color:var(--text-akzent); cursor:pointer; line-height:1; font-weight:700; }

/* --- Phasenkette: Punkte in der Listenzeile, Balken in der Detailansicht. --- */
.ui-phasen-punkte {
    display:block; margin-top:5px; letter-spacing:2px;
    font-family:var(--schrift-zahl); font-size:9px; line-height:1;
}
.ui-phasen-balken { display:flex; gap:4px; align-items:center; }
.ui-phasen-balken__glied { height:5px; flex:1; border-radius:99px; background:var(--rahmen); }
.ui-phasen-balken__glied--erledigt { background:var(--akzent); }
.ui-phasen-balken__glied--aktuell { background:var(--text-akzent); }

/* Kürzel mit Klarnamen im title (gepunktete Unterstreichung). */
.ui-kuerzel { border-bottom:1px dotted var(--rahmen-stark); cursor:help; }

/* --- Werkzeugleiste über einer Liste (Suche, Spalten, Filter, Export). --- */
.ui-werkzeugleiste { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ui-werkzeug {
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--rahmen-stark); background:var(--flaeche-karte);
    color:var(--text-primaer); font-size:14px; font-weight:500; line-height:1.2;
    padding:10px 16px; border-radius:var(--radius-bedienung);
    cursor:pointer; text-decoration:none; box-shadow:var(--schatten-knopf);
    transition:background-color var(--tempo), border-color var(--tempo);
}
.ui-werkzeug:hover { background:var(--flaeche-erhoben); }
.ui-werkzeug--quadrat { width:38px; height:38px; padding:0; justify-content:center; }
.ui-werkzeug--aktiv { background:var(--akzent-weich); border-color:var(--akzent-weich-rand); color:var(--text-akzent); }
.ui-werkzeug__zaehler {
    background:var(--akzent); color:var(--auf-akzent);
    border-radius:var(--radius-pille); padding:1px 7px; font-size:10.5px; font-weight:700; line-height:1.5;
}

/* --- Obere Leiste --- */
.ui-kopfleiste {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    min-height:66px; padding:12px 26px;
    background:var(--flaeche-leiste);
    border-bottom:1px solid var(--rahmen-leiste);
}
.ui-kopfleiste__rechts { margin-left:auto; display:flex; align-items:center; gap:10px; }
.ui-kopfleiste .ui-suche { flex:1; max-width:480px; }

/* Symbolfeld in der oberen Leiste. */
.ui-iconknopf {
    position:relative; display:grid; place-items:center;
    width:34px; height:34px; flex:none;
    border:0; border-radius:var(--radius-bedienung); background:transparent;
    color:var(--text-sekundaer); cursor:pointer; text-decoration:none;
    transition:background-color var(--tempo), color var(--tempo);
}
.ui-iconknopf:hover { background:var(--flaeche-erhoben); color:var(--text-primaer); }
.ui-iconknopf__zaehler {
    position:absolute; top:1px; right:1px;
    min-width:16px; height:16px; padding:0 4px; border-radius:var(--radius-pille);
    background:var(--kante-ueberfaellig); color:#ffffff;
    font-size:9.5px; font-weight:700; line-height:16px; text-align:center;
    box-shadow:0 0 0 2px var(--flaeche-leiste);
}
.dark .ui-iconknopf__zaehler { color:var(--auf-hausfarbe); }

/* Marke in der Kopfleiste, solange niemand angemeldet ist (dann fehlt die
   Seitenleiste, die die Marke sonst trägt). */
.ui-marke-anmeldung { display:flex; align-items:center; gap:11px; color:var(--text-primaer); }

/* Wort-Bild-Marke des Landkreises – immer auf Weiß, auch im Dunkelmodus. */
.ui-logokasten {
    display:inline-flex; align-items:center; flex:none;
    background:#ffffff; padding:5px 9px;
    border:1px solid var(--rahmen); border-radius:var(--radius-klein);
}
.dark .ui-logokasten { border-color:transparent; }

/* Hell/Dunkel-Knopf: beide Symbole liegen im Knopf, sichtbar ist genau eines. */
.ui-themeknopf .icon-dunkel { display:none; }
html.dark .ui-themeknopf .icon-hell { display:none; }
html.dark .ui-themeknopf .icon-dunkel { display:block; }

/* Schlanke Fußzeile der Anmeldeseiten (angemeldet trägt die Leiste die Version). */
.ui-fusszeile {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:4px 16px; padding:10px 24px;
    border-top:1px solid var(--rahmen-leiste); background:var(--flaeche-leiste);
    font-size:12px; color:var(--text-gedaempft);
}
.ui-fusszeile a { color:var(--text-akzent); text-decoration:none; }
.ui-fusszeile a:hover { text-decoration:underline; }

/* Meldungen sammeln sich oben rechts. */
.ui-toastbehaelter {
    position:fixed; top:18px; right:18px; z-index:10000;
    display:flex; flex-direction:column; gap:10px;
    width:22rem; max-width:calc(100vw - 2rem);
}

/* Benutzer-Avatar (Initialen). */
.ui-avatar {
    width:30px; height:30px; flex:none; border-radius:var(--radius-pille);
    display:grid; place-items:center;
    background:var(--akzent); color:var(--auf-akzent);
    font-size:11.5px; font-weight:700; line-height:1;
    text-transform:uppercase;
}

/* Inhaltsbereich zwischen Leiste und Rand. */
.ui-inhalt { max-width:1440px; margin:0 auto; padding:34px 34px 64px; }

/* Seitenkopf: Titel, Beischrift und Aktionen über dem Inhalt. */
.ui-seitenkopf {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:26px;
}
/* Eine Überschrift ohne Aktionen daneben bekommt denselben Abstand nach unten,
   damit alle Seiten gleich anfangen – egal ob rechts ein Knopf steht. */
.ui-seitenkopf--allein { display:block; margin-bottom:26px; }
.ui-seitenkopf__titel { font-size:29px; font-weight:600; letter-spacing:-.03em; line-height:1.2; color:var(--text-primaer); }
.ui-seitenkopf__unter { margin-top:7px; font-size:14.5px; color:var(--text-sekundaer); }
.ui-seitenkopf__aktionen { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* Suchfeld (obere Leiste und Listenkopf). */
.ui-suche {
    display:flex; align-items:center; gap:10px; flex:1;
    background:var(--flaeche-seite); border:1px solid transparent;
    border-radius:var(--radius-pille); padding:10px 17px;
    color:var(--text-gedaempft);
    transition:border-color var(--tempo), box-shadow var(--tempo);
}
.ui-suche:focus-within { border-color:var(--akzent); box-shadow:0 0 0 3px var(--akzent-weich); }
.ui-suche input {
    flex:1; min-width:0; border:0; background:transparent; outline:none;
    font-family:var(--schrift); font-size:14px; color:var(--text-primaer);
}

/* --- Formularfelder: eine Sprache für alle Eingaben --- */
.ui-feld input[type="text"], .ui-feld input[type="number"], .ui-feld input[type="date"],
.ui-feld input[type="email"], .ui-feld input[type="password"], .ui-feld input[type="url"],
.ui-feld input[type="search"], .ui-feld input[type="tel"], .ui-feld select, .ui-feld textarea,
input.ui-eingabe, select.ui-eingabe, textarea.ui-eingabe {
    width:100%; background:var(--flaeche-eingabe); color:var(--text-primaer);
    border:1px solid var(--rahmen-stark); border-radius:var(--radius-bedienung);
    padding:11px 14px; font-family:var(--schrift); font-size:14px; line-height:1.45;
    transition:border-color var(--tempo), box-shadow var(--tempo);
}
.ui-feld input:focus, .ui-feld select:focus, .ui-feld textarea:focus,
.ui-eingabe:focus {
    outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px var(--akzent-weich);
}
/* Ankreuzfeld: Haken in der Bedienfarbe, gleiche Rundung wie die Eingaben. */
.ui-checkbox {
    width:17px; height:17px; flex:none;
    accent-color:var(--akzent);
    border-radius:5px; cursor:pointer;
}
.ui-feld__pflicht { color:var(--rolle-kritisch-text); font-weight:700; }
/* Schmale Variante für Inline-Formulare (nicht über die ganze Breite). */
.ui-eingabe--knapp { width:auto; padding:5px 9px; font-size:12.5px; border-radius:var(--radius-klein); }
/* Gesperrte und nur lesbare Felder sind erkennbar flach. */
.ui-eingabe[disabled], .ui-eingabe[readonly], .ui-eingabe.cursor-not-allowed {
    background:var(--flaeche-erhoben); color:var(--text-sekundaer); cursor:not-allowed;
}
.ui-feld__label { display:block; font-size:13px; font-weight:600; color:var(--text-primaer); margin-bottom:7px; }
.ui-feld__hilfe { display:block; font-size:12px; color:var(--text-gedaempft); margin-top:5px; }
.ui-feld__fehler { display:block; font-size:12.5px; font-weight:500; color:var(--rolle-kritisch-text); margin-top:5px; }

/* Meldung (Toast) – weich und mit Schatten statt hartem Rahmen. */
.ui-toast {
    display:flex; align-items:flex-start; gap:10px;
    padding:13px 15px; border-radius:var(--radius-bedienung);
    border:1px solid var(--rolle-neutral-rand); background:var(--flaeche-karte);
    color:var(--text-primaer); font-size:13.5px; line-height:1.45;
    box-shadow:var(--schatten-3);
}
.ui-toast--erfolg   { border-color:var(--rolle-erfolg-rand);   background:var(--rolle-erfolg-flaeche);   color:var(--rolle-erfolg-text); }
.ui-toast--kritisch { border-color:var(--rolle-kritisch-rand); background:var(--rolle-kritisch-flaeche); color:var(--rolle-kritisch-text); }
.ui-toast--warnung  { border-color:var(--rolle-warnung-rand);  background:var(--rolle-warnung-flaeche);  color:var(--rolle-warnung-text); }
.ui-toast__weg { flex:none; border:0; background:transparent; color:inherit; opacity:.65; cursor:pointer; font-size:18px; line-height:1; }
.ui-toast__weg:hover { opacity:1; }

/* Auslöser des Benutzermenüs. */
.ui-benutzerknopf {
    display:flex; align-items:center; gap:7px;
    padding:3px 6px 3px 3px; border-radius:var(--radius-pille);
    color:var(--text-sekundaer);
    transition:background-color var(--tempo);
}
.ui-benutzerknopf:hover { background:var(--flaeche-erhoben); }
.ui-avatar--gross { width:38px; height:38px; font-size:13px; }

/* Menü-Aufklapper (Benutzermenü, Glocke). */
.ui-menue {
    background:var(--flaeche-karte); border:1px solid var(--rahmen);
    border-radius:var(--radius-karte); box-shadow:var(--schatten-3);
    overflow:hidden;
}
.ui-menue__punkt {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:9px 12px; border:0; background:transparent;
    color:var(--text-primaer); font-family:var(--schrift); font-size:13.5px;
    text-align:left; text-decoration:none; cursor:pointer;
    border-radius:var(--radius-klein);
    transition:background-color var(--tempo);
}
.ui-menue__punkt:hover { background:var(--flaeche-erhoben); }

.ui-menue__kopf {
    display:flex; align-items:center; gap:11px;
    padding:14px 14px; border-bottom:1px solid var(--rahmen);
    background:var(--flaeche-erhoben);
}
.ui-menue__name { display:block; font-size:13.5px; font-weight:600; color:var(--text-primaer); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-menue__zeile { display:block; font-size:12px; color:var(--text-gedaempft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-menue__gruppe { padding:6px; display:flex; flex-direction:column; gap:1px; }
.ui-menue__gruppe--oben { border-top:1px solid var(--rahmen); }
.ui-menue__gruppe form { display:contents; }
.ui-menue__leiste {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; border-bottom:1px solid var(--rahmen);
}
.ui-menue__titel { font-size:13.5px; font-weight:600; color:var(--text-primaer); }
.ui-menue__link {
    border:0; background:none; padding:0; cursor:pointer;
    font-family:var(--schrift); font-size:12px; font-weight:500; color:var(--text-akzent);
}
.ui-menue__link:hover { text-decoration:underline; }
.ui-menue__liste { list-style:none; margin:0; padding:5px; max-height:24rem; overflow-y:auto; }
.ui-menue__leer { padding:26px 14px; text-align:center; font-size:13px; color:var(--text-gedaempft); }
.ui-menue__fuss {
    display:flex; align-items:center; gap:14px;
    padding:11px 14px; border-top:1px solid var(--rahmen);
    font-size:12px;
}
.ui-menue__fuss a { color:var(--text-akzent); text-decoration:none; }
.ui-menue__fuss a:hover { text-decoration:underline; }

/* Ein Eintrag in der Glocke. */
.ui-hinweis {
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 11px; border-radius:var(--radius-klein);
    transition:background-color var(--tempo);
}
.ui-hinweis:hover { background:var(--flaeche-erhoben); }
.ui-hinweis__punkt { flex:none; margin-top:6px; width:7px; height:7px; border-radius:50%; background:transparent; }
.ui-hinweis--neu .ui-hinweis__punkt { background:var(--akzent); }
.ui-hinweis__text { display:block; font-size:13px; line-height:1.4; color:var(--text-primaer); }
.ui-hinweis--neu .ui-hinweis__text { font-weight:600; }
.ui-hinweis__zeile { display:block; margin-top:3px; font-size:11.5px; color:var(--text-gedaempft); }

/* Schnellzugriff-Liste der Startseite. */
.ui-schnellzugriff { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ui-schnellzugriff__punkt {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 13px; border-radius:var(--radius-bedienung);
    background:var(--flaeche-erhoben); color:var(--text-primaer);
    font-size:13.5px; font-weight:500;
    transition:background-color var(--tempo), color var(--tempo);
}
.ui-schnellzugriff__punkt:hover { background:var(--akzent-weich); color:var(--text-akzent); }
.ui-schnellzugriff__pfeil { flex:none; opacity:.55; transition:transform var(--tempo); }
.ui-schnellzugriff__punkt:hover .ui-schnellzugriff__pfeil { opacity:1; transform:translateX(2px); }

/* Waagerechter Balken (Kennzahl-Widget). */
.ui-balken { height:9px; border-radius:var(--radius-pille); background:var(--flaeche-erhoben); overflow:hidden; }
.ui-balken__wert { height:100%; border-radius:var(--radius-pille); background:var(--akzent); }

/* --- Reiter (senkrechte Reiterleiste der Vorgangsansicht) --- */
.ui-reiterleiste {
    gap:3px; padding:6px;
    background:var(--flaeche-karte); border:1px solid var(--rahmen);
    border-radius:var(--radius-karte); box-shadow:var(--schatten-1);
    overflow-x:auto;
}
.ui-reiter {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; padding:9px 11px; white-space:nowrap;
    border:0; border-radius:var(--radius-bedienung); background:transparent;
    color:var(--text-sekundaer); font-family:var(--schrift);
    font-size:13.5px; font-weight:500; text-align:left; cursor:pointer;
    transition:background-color var(--tempo), color var(--tempo);
}
.ui-reiter:hover { background:var(--flaeche-erhoben); color:var(--text-primaer); }
.ui-reiter.aktiv { background:var(--akzent-weich); color:var(--text-akzent); font-weight:600; }
.ui-reiter.aktiv:hover { background:var(--akzent-weich); }

/* --- Kleiner Zähler neben einer Beschriftung --- */
.ui-zaehler {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:20px; padding:0 6px; margin-left:8px;
    border-radius:var(--radius-pille);
    background:var(--rolle-neutral-flaeche); color:var(--rolle-neutral-text);
    font-family:var(--schrift-zahl); font-size:11px; font-weight:700; line-height:1;
}
.ui-zaehler--warnung { background:var(--rolle-warnung-flaeche); color:var(--rolle-warnung-text); }
.ui-reiter.aktiv .ui-zaehler { background:var(--flaeche-karte); }

/* --- Rundes Signet (Initialen, Nummern, Merkzeichen) --- */
.ui-marke-rund {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background:var(--akzent); color:var(--auf-akzent);
    font-size:11px; font-weight:700; line-height:1; vertical-align:middle;
}
.ui-marke-rund--gross { width:32px; height:32px; font-size:12px; }

/* Badge in der Bedienfarbe (Zählpille „meine Freigaben"). */
.ui-badge--akzent { background:var(--akzent); color:var(--auf-akzent); border-color:transparent; }

/* --- Anmeldeseite --- */
.ui-anmeldung { display:flex; justify-content:center; padding:4vh 0 6vh; }
.ui-anmeldung__karte { width:100%; max-width:26rem; padding:30px 30px 32px; box-shadow:var(--schatten-2); }
.ui-anmeldung__marke { display:flex; align-items:center; gap:11px; margin-bottom:26px; color:var(--text-primaer); }
.ui-anmeldung__unter { margin:6px 0 22px; font-size:13.5px; color:var(--text-sekundaer); }
.ui-anmeldung__fehler { margin-bottom:20px; }
.ui-anmeldung .ui-feld { margin-bottom:16px; }
.ui-anmeldung .ui-knopf { margin-top:8px; }

/* --- Stationen des Beschaffungsprozesses (Stepper) --- */
.ui-station {
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; flex:none; border-radius:50%;
    font-family:var(--schrift-zahl); font-size:11px; font-weight:700; line-height:1;
    background:var(--flaeche-erhoben); color:var(--text-sekundaer);
}
.ui-station--erledigt { background:var(--akzent); color:var(--auf-akzent); }
.ui-station--aktuell {
    background:var(--akzent); color:var(--auf-akzent);
    box-shadow:0 0 0 3px var(--akzent-weich);
}
.ui-station--uebersprungen {
    background:transparent; color:var(--text-gedaempft);
    border:1px dashed var(--rahmen-stark);
}
.ui-station__text { font-size:13px; white-space:nowrap; font-weight:600; color:var(--text-primaer); }
.ui-station__text--blass { font-weight:400; color:var(--text-sekundaer); }
.ui-station__strich { width:22px; height:1px; margin:0 5px; background:var(--rahmen-stark); }

/* Stiller Knopf in der Gefahrenrolle (Schrittliste „Abbrechen"). */
.ui-knopf--still-gefahr { color:var(--rolle-kritisch-text); }
.ui-knopf--still-gefahr:hover { background:var(--rolle-kritisch-flaeche); color:var(--rolle-kritisch-text); }

/* Zeile mit offener Pflicht (Meldepflichten-Karte). */
.ui-zeile--offen { background:var(--rolle-warnung-flaeche); }

/* --- ⓘ mit Kurzerklärung --- */
.ui-infozeichen {
    display:inline-flex; align-items:center; justify-content:center;
    width:17px; height:17px; padding:0;
    border:0; border-radius:50%; background:transparent;
    color:var(--text-gedaempft); cursor:help;
    transition:color var(--tempo);
}
.ui-infozeichen:hover { color:var(--text-primaer); }
.ui-tooltip {
    pointer-events:none; position:absolute; left:50%; bottom:100%;
    transform:translateX(-50%); margin-bottom:7px; z-index:20;
    width:15rem; padding:8px 10px; border-radius:var(--radius-klein);
    background:var(--text-primaer); color:var(--flaeche-karte);
    font-size:12px; line-height:1.45; text-align:left;
    box-shadow:var(--schatten-3);
    opacity:0; transition:opacity var(--tempo);
}
.group:hover > .ui-tooltip, .group:focus-within > .ui-tooltip { opacity:1; }

/* --- „Rückgängig" nach dem Löschen (unten rechts) --- */
.ui-rueckgaengig {
    position:fixed; bottom:20px; right:20px; z-index:10000;
    display:flex; align-items:center; gap:14px;
    padding:13px 17px; border-radius:var(--radius-bedienung);
    background:var(--text-primaer); color:var(--flaeche-karte);
    font-size:13.5px; box-shadow:var(--schatten-3);
}
.ui-rueckgaengig button { color:inherit; font-weight:600; text-decoration:underline; }
.ui-rueckgaengig button:hover { text-decoration:none; }

/* Bewegung abschalten, wenn das System es verlangt. */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}