:root {
    --kufer-cyan: #01A5A9;
    --kufer-green: #2EBF43;
    --kufer-orange: #FFAE43;
    --kufer-red: #E33B32;
    --kufer-cyan-light: #B3E5E6;
    --kufer-green-light: #C9EBCE;
    --kufer-orange-light: #FFE5C9;
    --kufer-red-light: #F4C9C6;

    /* Kategoriefarben */
    --kategorie-cognac: #92400E;
    --kategorie-blau: #2563EB;
    --kategorie-lila: #B87FC5;
    --kategorie-pink: #DB2777;
    --kategorie-violett: #7C3AED;
    --kategorie-azur: #129BE7;
    --kategorie-stone: #57534E;
    --kategorie-oliv: #4D7C0F;
    --kategorie-fuchsia: #C026D3;
    --kategorie-neutral: #80868B;
    /* Aufgeloest: die Fliesstext-Rolle des Modus traegt den Badge-Text (Wiki "Badges": kein
       eigenes Text-Token fuer Badges), Verwendungen lesen var(--text) direkt. Definition bleibt
       unveraendert stehen, solange AufgabenBezugTypAuswahlComponent.razor.css sie noch
       referenziert. */
    /* Neutral-Tokens fuer BadgeStatus (V2)/BadgeNeutral (V3), Feature #12755 */
    --neutral-700: #5F6368;
    /* V3-Badge-Text */
    --neutral-800: #3C4043;
    /* V2-Neutral-Icon (Stufe 800) */
    /* Neutral-Skala als Rechengrundlage der Rollen-Tokens; Austauschpunkt fuer eine Kunden-CI ist
       diese Skala, nicht die einzelnen Rollen-Tokens. */
    --neutral-50: #F8F9FA;
    --neutral-100: #F1F3F4;
    --neutral-300: #DADCE0;
    --neutral-400: #BDC1C6;
    --neutral-500: #9AA0A6;
    --neutral-600: #80868B;
    --neutral-900: #202124;

    /* Auswahl-/Toggle-Zustandsfarben (geteilt zwischen Toggle-Buttons und Auswahl-Karten):
       getoenter Hintergrund fuer gewaehlt und gewaehlt-gesperrt, Fond-Regel gegen die Kartenflaeche
       (Wiki "Auswahl-Komponenten" 880). Der gesperrte Fond mischt gegen dieselbe Flaeche, traegt
       aber die Deaktiviert-Textrolle statt --accent als Traegerfarbe. */
    --toggle-selected-bg: color-mix(in srgb, var(--accent) 28%, var(--surface-card));
    --toggle-selected-disabled-bg: color-mix(in srgb, var(--text-disabled) 28%, var(--surface-card));

    --primary: var(--bs-primary);
    --secondary: #68727D;
    --primary-black: var(--bs-black);
    --base-black: #282828;
    --h-gray-dark: #495057;
    --h-text-secondary: #595959;
    --dw-header-cell-resizer-width: 8px;
    --filter-item-padding-x: 0.5rem;
    --filter-item-padding-y: 0.5rem;
    --filter-item-font-weight: 700;
    --selection-blue: #3367D1;
    /* Das standard blau, wenn man einen Text markiert */
    --split-button-dropdown-zindex: 200;
    --selection-inactive-gray: #C8C8C8;
    /*Das standard grau, wenn man einen Text markiert und das Fenster inaktiv ist. */
    --LineLabelColor: #101828;
    --widgetBadge: #01A5A9;
    --primary-dark: #01868A;
    --primary-light: rgba(1, 165, 169, 0.1);
    --primary-focus: rgba(1, 165, 169, 0.35);
    --error: #E33B32;
    --error-light: rgba(227, 59, 50, 0.08);
    --error-focus: rgba(227, 59, 50, 0.25);
    --success: #2EBF43;
    --h-border-color: #dee2e6;
    --h-border-subtle: #e9ecef;
    /* Allgemein nutzbare Radien/Schatten (auch Horizon DatePicker) */
    --radius: 0.5rem;
    --radius-sm: 0.375rem;
    --shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
    --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    --transition: all 0.2s ease-in-out;
    /* Box-Shadows */
    --tooltip-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
    --dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* Breite des Widget-Katalogs am Dashboard. Gehoert hierher und nicht in das CSS des
       Playground-Hosts: Katalog und sein Rahmen lesen dieselbe Groesse, und ohne Definition faellt
       die Breite auf den Inhalt zurueck — das Panel wuerde bei jedem Suchtreffer schmaler. */
    --dashboard-sidebar-width: 18.75rem;

    /* Icon Sizes */
    --icon-small: 1rem;
    --icon-medium: 1.375rem;
    --icon-large: 2rem;
    --icon-extralarge: 3rem;

    /* Text-Highlighting mit mark, Fond-Regel gegen die Kartenflaeche. */
    --bs-highlight-bg: color-mix(in srgb, var(--accent) 28%, var(--surface-card));
    --bs-highlight-color: var(--text);

    /* Linktext traegt die Link-Rolle statt Bootstraps eigenem Blau. Die -rgb-Paare tragen das
       Zahlentripel der jeweiligen Stufe: die .link-opacity-*-Utilities lesen die Tripel statt der
       Farbe, und ein var()-Farbwert laesst sich nicht als Zahlentripel schreiben. */
    --bs-link-color: var(--link);
    --bs-link-color-rgb: 1, 132, 135;
    --bs-link-hover-color: var(--link-hover);
    --bs-link-hover-color-rgb: 1, 99, 101;

    /* Success-Colors der Design-Foundations */
    --success-50: #E9FCED;
    --success-100: #B1EEB9;
    --success-300: #71E382;
    --success-400: #52DD67;
    --success-500: #32D74B;
    --success-600: #2EBF43;
    --success-700: #2AA63C;
    --success-800: #268E34;
    --success-900: #22762C;
    --success: var(--success-600);

    /* Warning-Colors der Design-Foundations */
    --warn-50: #FFF8EB;
    --warn-100: #FFE4C0;
    --warn-300: #FFD08A;
    --warn-400: #FFC772;
    --warn-500: #FFAE43;
    --warn-600: #EEA23E;
    --warn-700: #D78100;
    --warn-800: #A15C00;
    --warn-900: #6B3D00;
    /* BS-Warning-Color neu definieren */
    --bs-warning: var(--warn-600);

    /* Error-Colors der Design-Foundations */
    --error-50: #FFEFEE;
    --error-100: #FDDDDC;
    --error-300: #FE827B;
    --error-400: #FF645A;
    --error-500: #FF453A;
    --error-600: #E33B32;
    --error-700: #C8322B;
    --error-800: #901F1B;
    --error-900: #751614;

    /* Primary-Colors der Design-Foundations */
    --primary-400: #66D1D4;
    --primary-500: #01A5A9;
    --primary-600: #018487;
    --primary-800: #016365;

    /* Systemweiter Fokus-Ring (Wiki "Fokus-Indikator", 882): Neutral 900, nie die Primaerfarbe. */
    --focus-ring: #202124;
    /* Komponierbarer Fokus-Schatten: Komponenten mit eigenem box-shadow stellen dieses Token voran,
       statt den Fokusring beim Ueberschreiben zu verlieren. Hell traegt es einen unsichtbaren
       Schatten statt none — none ist in einer Schatten-Liste ungueltig und verwirft die ganze
       Deklaration mitsamt der nachfolgenden Schatten. */
    --focus-shadow: 0 0 0 0 transparent;
    /* Fokus-Schatten nach innen: fuer Bedienelemente, die buendig in einem umschliessenden Rahmen
       sitzen (Chevron einer Feld-Gruppe) — der aeussere Ring liefe dort unter den Gruppenrahmen
       bzw. wuerde von dessen Rundung beschnitten. Hell zeichnet den Ring die outline, das Token
       traegt darum denselben unsichtbaren Schatten wie --focus-shadow. */
    --focus-shadow-inset: 0 0 0 0 transparent;
    /* Rahmen im neutralen Hover einer Auswahl-Komponente: eine Stufe dunkler als der
       Bedienelement-Rahmen, damit der Hover ohne die Akzentfarbe liest — die codiert dort den
       Auswahlzustand. Keine eigene Wiki-Rolle, darum als Ableitung neben den Fokus-Tokens. */
    --border-control-hover: var(--neutral-800);
    /* Gitterlinie einer Diagramm-Zeichenflaeche: bewusst schwaecher als --border. Die Linien sind
       Orientierungshilfe hinter den Daten — auf Rahmenstaerke ziehen sie den Blick von Datenreihe
       und Achsenbeschriftung weg. Als Ableitung, weil Chart.js den Wert per getComputedStyle liest
       und die Mischung darum bereits aufgeloest bekommt. */
    --chart-gridline: color-mix(in srgb, var(--border) 55%, var(--surface-card));

    /* Rollen-Tokens (heller Modus) — Komponenten binden an diese Rollen, nicht an die Skalen-Tokens
       oder an Hex-Werte direkt. Ueberschreibung fuer den dunklen Modus in :root[data-theme='dark'].
       --focus-ring steht oben bei den Fokus-Tokens. */
    --surface-canvas: var(--neutral-50);
    --surface-zone: color-mix(in srgb, var(--primary) 8%, var(--neutral-50));
    --surface-card: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-hover-flat: var(--neutral-100);
    --surface-disabled: var(--neutral-100);
    --text: var(--neutral-900);
    --text-meta: var(--neutral-700);
    --text-teal: var(--primary-600);
    --text-disabled: var(--neutral-600);
    --accent: var(--primary-500);
    --action-fill: var(--primary-600);
    --action-fill-hover: color-mix(in srgb, #000000 8%, var(--action-fill));
    --action-fill-active: var(--primary-800);
    /* Link-Rollenpaar der Wiki-Seite "Links". --link bindet an die bestehende Hervorhebungsrolle,
       die dieselbe Stufe traegt. --link-hover ist eine eigene Rolle und bindet direkt auf ihre
       Skalenstufe: ein Umweg ueber --action-fill-active waere die Rolle des gedrueckten
       Bedienelements und wuerde die Link-Farbe an einen fremden Zustand koppeln. */
    --link: var(--text-teal);
    --link-hover: var(--primary-800);
    /* Bezugs-Chip-Hover: eigene Rolle statt --link-hover, weil Rahmen und Label des Chips
       gemeinsam wandern und der Rahmen dabei sichtbar dunkler als --accent werden muss. Hell traegt
       die abgedunkelte Stufe den Kontrast; dunkel haelt sie den Ton (siehe dort). */
    --chip-bezug-hover: var(--primary-800);
    /* Rahmen-Hover des ausgewaehlten Auswahl-Chips: Hover ist dort die einzige Zustandsaenderung
       (Fond und Haekchen bleiben), der Rahmen traegt das Signal also allein und muss die 3:1 der
       UI-Komponenten halten. Hell gewinnt Kontrast durch Abdunkeln (4,5:1 gegen die Karte). */
    --chip-auswahl-rahmen-hover: var(--primary-600);
    --error-text: var(--error-800);
    --error-outline: var(--error-600);
    /* Hoehe des virtuellen Tab-Streifens (VirtualTabStrip). Steht hier und nicht nur im Streifen,
       weil auch der Dialog-Ueberzug sie braucht, um den Streifen freizulassen. */
    --tab-leiste-hoehe: 2.75rem;

    --border: var(--neutral-300);
    --border-control: var(--neutral-600);
    /* Rahmen eines gedrueckten Bedienelements. Eigene Rolle neben --action-fill-active, weil Rahmen-
       und Fuellton nur im hellen Modus zusammenfallen: dunkel hellt der Rahmen weiter auf
       (Primary 400), die Fuellung nur bis Primary 500. */
    --border-active: var(--primary-800);
    --border-disabled: var(--neutral-300);
    --overlay: rgba(32, 33, 36, 0.4);

    /* Chevron eines Auswahlfeldes. Steht als Token, weil ausser dem Auswahlfeld auch der
       Entity-Picker es zeichnet -- zwei eigene Glyphen liefen sonst in Form, Strichstaerke und
       Farbe auseinander. Die Strichfarbe steckt in der Daten-URI und kann kein Custom Property
       referenzieren, deshalb je Modus ein eigener Wert.
       Beim Zeichnen gehoert background-size: 16px 12px dazu: die Glyphe ist auf diese Flaeche
       gestaucht, quadratisch gezeichnet waere sie hoeher und spitzer. */
    --chevron-auswahlfeld: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* Ableitungs-Tokens der Badge-Icon-Stufe (Wiki "Badges", 765) — keine Rolle im Sinne des
       Rollenmodells, sondern die einzige Stufe, die im Status-Badge zwischen den Modi wechselt.
       Werte verweisen auf die Skalen-Tokens, nie auf Hex-Werte. Die Neutral-Familie hat keine
       Stufe 300, dunkel ist dort bewusst Neutral 400. */
    --status-icon-success: var(--success-800);
    --status-icon-warning: var(--warn-800);
    --status-icon-error: var(--error-800);
    --status-icon-neutral: var(--neutral-800);

    /* Alt-Bestand: wird bei der Komponenten-Umstellung auf die Rollen-Tokens abgeloest, nicht neu
       verwenden. */
    --light-gray: #EAEBF0;
    --gray-100: #F9FAFB;
    --gray-200: #E0E0E0;
    --gray-250: #fcfcfd;
    --gray-300: #D0D5DD;
    --gray-400: #ced4da;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #344054;
    --gray-800: #1F2937;
    --gray-900: #101828;
    --hover-background: #F1F3F4;
    --role1: #017275;
    --role2: #01A5A9;
    --role3: #5DD3D6;
    --role4: #B8ECED;
    --grid-hover-color: #F9FAFB;
    --teal100: #017275;
    --teal75: #01A5A9;
    --teal45: #5DD3D6;
    --teal20: #B8ECED;
    --teal00: #EEF7F7;
}

/* Systemweit einheitlicher Fokus-Stil (Wiki "Fokus-Indikator", 882) — Komponenten definieren
   keine eigenen Fokus-Darstellungen, sondern verweisen auf diese Regel. */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Rollen-Tokens (dunkler Modus) — Ableitungen als color-mix-Regel statt eingefrorener Hex-Werte,
   damit sie mit ihrer Traegerflaeche mitwandern. */
:root[data-theme='dark'] {
    --surface-canvas: var(--neutral-900);
    --surface-zone: var(--neutral-900);
    --surface-card: var(--neutral-800);
    --surface-raised: color-mix(in srgb, #FFFFFF 8%, var(--surface-card));
    --surface-hover-flat: color-mix(in srgb, #FFFFFF 8%, var(--surface-card));
    --surface-disabled: color-mix(in srgb, #FFFFFF 8%, var(--surface-card));
    --text: var(--neutral-100);
    --text-meta: var(--neutral-400);
    --chevron-auswahlfeld: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bdc1c6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --text-teal: var(--primary-400);
    --text-disabled: var(--neutral-500);
    --accent: var(--primary-500);
    --action-fill: var(--primary-600);
    --action-fill-hover: color-mix(in srgb, #000000 8%, var(--action-fill));
    --action-fill-active: var(--primary-500);
    /* Ueber Primary 400 fuehrt die Skala keine Stufe mehr, die noch als Text traegt — der Hover
       haelt darum denselben Ton wie der Ruhezustand, die Unterstreichung ist hier allein das
       Hover-/Fokus-Signal. */
    --link: var(--text-teal);
    --link-hover: var(--primary-400);
    /* Bezugs-Chip-Hover dunkel: abgedunkelt, damit Rahmen und Label gemeinsam wandern -- der
       rahmenlose Text-Link haelt dagegen seinen Ton. Die 2,32 : 1 des Labels sind hier zulaessig:
       Hover-Zustaende tragen keine eigene Kontrastpflicht, den Nachweis fuehrt der Ruhezustand
       (5,80 : 1), und das dauerhafte Merkmal ist die Unterstreichung. */
    --chip-bezug-hover: var(--primary-600);
    /* Dunkel kehrt sich die Richtung um: Abdunkeln faellt gegen die dunkle Karte unter 3:1,
       Aufhellen haelt sie deutlich darueber. Gleiche Rolle, gegenlaeufiger Wert. */
    --chip-auswahl-rahmen-hover: var(--primary-400);
    --error-text: var(--error-100);
    --error-outline: var(--error-300);
    /* Trennlinie dunkel: Wiki 969/525 vergeben hier keinen Wert (die Flaechenabstufung soll
       trennen), Strukturen innerhalb einer Flaeche brauchen aber eine Kante. Neutral 700 haelt
       das Verhaeltnis des hellen Modus — die Linie bleibt schwaecher als der
       Bedienelement-Rahmen, statt ihn zu ueberstrahlen. */
    --border: var(--neutral-700);
    --border-control: var(--neutral-500);
    --border-active: var(--primary-400);
    --border-disabled: var(--neutral-500);
    --focus-ring: var(--neutral-900);
    /* Zweifarbiger Fokus-Schatten (weisser Innenring, aeusserer Ring in --focus-ring) — Komponenten
       mit eigenem box-shadow stellen dieses Token voran, statt den Fokusring zu verlieren. */
    --focus-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--focus-ring);
    --focus-shadow-inset: inset 0 0 0 2px #FFFFFF, inset 0 0 0 4px var(--focus-ring);
    --border-control-hover: var(--neutral-300);
    --overlay: rgba(32, 33, 36, 0.6);
    /* Traegerflaeche, gegen die ein Fond gemischt wird. Default ist die Karte; angehobene Ebenen
       ueberschreiben sie auf --surface-raised. Der Default steht hier, damit eine Fundstelle ohne
       var()-Rueckfall nicht still ausfaellt (invalid at computed-value time) statt sichtbar falsch
       zu sein. */
    --fond-traegerflaeche: var(--surface-card);

    /* Vier der neun kategorialen Farben tragen dunkel einen abweichenden Hauptton (Wiki
       "Kategoriale Farben", 757); die uebrigen fuenf sind dort modusgleich. Lila und Azur
       gehoeren zu den modusgleichen: sie erreichen 3 : 1 gegen die Karte in BEIDEN Modi
       (3,05 hell / 3,43 dunkel) und brauchen darum keine eigene Dunkel-Stufe. */
    --kategorie-stone: #726F6A;
    --kategorie-blau: #2966EB;
    --kategorie-violett: #864AEE;
    --kategorie-cognac: #A35F35;

    /* Badge-Icon-Stufe dunkel: Stufe 300, bei Neutral mangels eigener Stufe 300 die Stufe 400. */
    --status-icon-success: var(--success-300);
    --status-icon-warning: var(--warn-300);
    --status-icon-error: var(--error-300);
    --status-icon-neutral: var(--neutral-400);
    color-scheme: dark;
}

/* Plattform-Ebene: Themen ohne eigene Komponenten-Regel, die sonst unabhaengig vom Modus hell
   blieben — native Bedienelemente, Browser-Autofill, Platzhalter, Textmarkierung. */
:root {
    /* Steuert nativen Kalender, Zahlen-Spinner und Scrollbars. */
    color-scheme: light;
}

/* Autofill ueberschreibt background-color selbst; Feldflaeche und Text werden ueber einen inneren
   Schatten und -webkit-text-fill-color zurueckgewonnen. */
/* Zwei Selektorlisten, weil ein unbekannter Selektor in einer gemeinsamen Liste die ganze Regel
   verwerfen wuerde: Chromium und Safari kennen nur :-webkit-autofill, Firefox nur das
   standardisierte :autofill. Ohne die zweite Liste bliebe ein automatisch ausgefuelltes Feld in
   Firefox im dunklen Modus hell. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    box-shadow: inset 0 0 0 100px var(--surface-card);
    -webkit-text-fill-color: var(--text);
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active,
textarea:autofill,
textarea:autofill:hover,
textarea:autofill:focus,
textarea:autofill:active,
select:autofill,
select:autofill:hover,
select:autofill:focus,
select:autofill:active {
    box-shadow: inset 0 0 0 100px var(--surface-card);
    -webkit-text-fill-color: var(--text);
    color: var(--text);
}

/* Nur bei Tastaturfokus kommt der Ring hinzu — sonst traegt jedes automatisch ausgefuellte Feld
   dauerhaft die Fokus-Darstellung. Der Wurzel-Scope hebt die Spezifitaet ueber die globale
   Fokus-Regel, die den inneren Schatten sonst verdraengt. */
:root input:-webkit-autofill:focus-visible,
:root textarea:-webkit-autofill:focus-visible,
:root select:-webkit-autofill:focus-visible {
    box-shadow: var(--focus-shadow), inset 0 0 0 100px var(--surface-card);
}

:root input:autofill:focus-visible,
:root textarea:autofill:focus-visible,
:root select:autofill:focus-visible {
    box-shadow: var(--focus-shadow), inset 0 0 0 100px var(--surface-card);
}

/* Platzhaltertext in der Meta-Rolle. Die nackte ::placeholder-Regel deckt Felder ohne
   Bootstrap-Klasse ab; .form-control braucht die eigene Regel, weil Bootstrap dort mit hoeherer
   Spezifitaet den eigenen Wert setzt. Der leichtere Schnitt kommt vom Feld, nicht vom Platzhalter. */
::placeholder {
    color: var(--text-meta);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--text-meta);
    font-weight: normal;
}

/* Suchtreffer-Hervorhebung ueber die Fond-Regel; Text bleibt in der Fliesstext-Rolle.
   ::selection bekommt bewusst keine eigene Form. */
::selection,
mark {
    background: color-mix(in srgb, var(--accent) 28%, var(--surface-card));
    color: var(--text);
}

mark {
    padding: 1px 4px;
    border-radius: 3px;
}

/* Basis-Auszeichnung eines alleinstehenden Links (Wiki "Links"): Farbe traegt die Erkennbarkeit im
   Ruhezustand, die Unterstreichung kommt bei Hover und Tastaturfokus hinzu. Ein Link traegt nie
   Fettung — das unterscheidet ihn von hervorgehobenem Fliesstext in derselben Farbrolle. */
a {
    color: var(--link);
    font-weight: 400;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Ein <a> mit Button-Anatomie ist ein Bedienelement und traegt nie Link-Optik (Wiki "Links",
   Abschnitt "Link oder Button"). Farbe und Rahmen kommen aus der Variante, die Unterstreichung der
   Basisregel muss aber ausdruecklich zurueckgenommen werden: die .btn-Regeln setzen selbst keine
   text-decoration, damit unterstriche sonst jeder Absprung in Button-Optik beim Hover. */
a.btn:hover,
a.btn:focus-visible {
    text-decoration: none;
}

/* Link INNERHALB eines Satzes: dort steht Fliesstext unmittelbar daneben, von dem sich der Link
   abheben muss — Farbe allein traegt das nicht (WCAG SC 1.4.1). Darum bleibt die Unterstreichung
   dauerhaft sichtbar und verstaerkt sich bei Hover und Fokus. Die Farbe kommt aus der Basisregel,
   die Utility setzt keine eigene.
   Nicht fuer Links in einer eigenen Zelle oder Zeile: die stehen allein und folgen der Basisregel,
   auch wenn andere Zeilen derselben Spalte keinen Link fuehren. */
.link-im-text {
    text-decoration: underline;
}

.link-im-text:hover,
.link-im-text:focus-visible {
    text-decoration-thickness: 2px;
}

/* Sekundaerer Link (Vorgabe des Product Owner, Wiki "Links" wird nachgezogen): traegt die
   Textfarbe seiner Umgebung, dafuer im Ruhezustand schon die Unterstreichung. So bleibt eine
   Flaeche mit vielen Verweisen ruhig, ohne dass ein Link erst beim Ueberfahren erkennbar wird
   (SC 1.4.1: die Unterstreichung ist das farbunabhaengige Merkmal).
   Je Flaeche traegt hoechstens EIN Link die Teal-Rolle -- der primaere, der das Thema der Flaeche
   benennt. Alle Links in Tabellen und TreeGrid sind sekundaer.
   Den Farbwechsel bei Hover und Tastaturfokus liefert die Basisregel a:hover/a:focus-visible: sie
   traegt (0,1,1) und schlaegt diese Klasse (0,1,0).
   Feste Fliesstext-Rolle statt color: inherit -- sonst nimmt der Link die Farbe seines Wrappers an
   und sekundaere Links derselben Karte stehen in verschiedenen Toenen (Mail-Zeile in --text, ein
   Verweis unter .secondary-color/.text-muted dagegen grau). Die eigene Deklaration am Anchor
   gewinnt gegen die geerbte Wrapper-Farbe, auch wenn diese !important traegt. */
.link-sekundaer {
    color: var(--text);
    text-decoration: underline;
}

/* Fokus-Indikator dunkel: ein einfarbiger Ring auf Neutral 900 traegt dort nur 1,00:1 gegen die
   Karte. Zweifarbig ueber box-shadow (outline zeichnet nur einen Ring): weisser Innenring gegen
   die dunkle Flaeche, aeusserer Ring als Kontur gegen helle Nachbarflaechen. */
:root[data-theme='dark'] :focus-visible {
    outline: none;
    box-shadow: var(--focus-shadow);
}

/* Bootstrap-Farbvariablen im dunklen Modus auf die Rollen-Tokens umgehaengt — bindet die vielen
   .razor-Dateien, die Bootstrap-Flaechen-/Textklassen (.card, .table, .form-control, ...) nutzen,
   ohne dass jede Komponente eine eigene Ueberschreibung braucht. Kein Bootstrap-eigener
   data-bs-theme-Hook, es bleibt bei diesem einen Umschalt-Attribut. */
:root[data-theme='dark'] {
    --bs-body-bg: var(--surface-canvas);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-meta);
    --bs-emphasis-color: var(--text);
    /* Linktext traegt die Link-Rolle. Hover haelt hier denselben Ton wie der Ruhezustand (siehe
       --link-hover bei den Rollen-Tokens) — die Unterstreichung ist das Signal, nicht die Farbe.
       Beide -rgb-Paare tragen darum dasselbe Zahlentripel: die .link-opacity-*-Utilities lesen die
       Tripel statt der Farbe, und ein Farbwert laesst sich nicht als Zahlentripel schreiben. */
    --bs-link-color: var(--link);
    --bs-link-color-rgb: 102, 209, 212;
    --bs-link-hover-color: var(--link-hover);
    --bs-link-hover-color-rgb: 102, 209, 212;
    --bs-border-color: var(--border);
    --bs-secondary-bg: var(--surface-hover-flat);
    /* Die *-subtle-Utilities tragen bei Bootstrap fast weisse Flaechen; ohne Zuordnung stehen die
       Textrollen des dunklen Modus darauf. */
    --bs-secondary-bg-subtle: var(--surface-hover-flat);
    --bs-tertiary-bg: var(--surface-raised);
    --bs-white: var(--surface-card);
    --bs-black: var(--text);
    /* .bg-light/.text-light/.border-light lesen ueberwiegend --bs-light-rgb; --bs-light selbst
       wird zusaetzlich direkt gelesen (HorizonValidationSummary.razor.css, ColorCssMapper.cs).
       Rolle: leicht abgesetzte Flaeche, wie Wiki 969 sie fuer Hover/Deaktiviert auf der Karte
       beschreibt. */
    --bs-light: var(--surface-hover-flat);
    --bs-highlight-color: var(--text);
    --bs-highlight-bg: color-mix(in srgb, var(--primary-500) 28%, var(--surface-card));

    /* Eigene Bootstrap-Variable (rgba-Schwarz-Toenung), kein Alias von --bs-border-color:
       .card, .dropdown-menu und .modal lesen sie fuer ihren Rahmen und blieben ohne diese
       Zeile bei der hellen, auf dunklem Grund fast unsichtbaren Toenung. */
    --bs-border-color-translucent: var(--border);

    /* Zahlentriplets fuer Bootstraps rgba()-Verwendungen (Tabellen-Streifen/-Hover, Floating-Label,
       .text-white/.text-black/.bg-white-Utilities) — rgba() kann keinen CSS-Ausdruck als
       Farbkanal verschachteln, deshalb hier die Skalen-Hex-Werte als Zahlen statt als color-mix. */
    --bs-white-rgb: 60, 64, 67;
    --bs-black-rgb: 241, 243, 244;
    --bs-body-color-rgb: 241, 243, 244;
    --bs-emphasis-color-rgb: 241, 243, 244;
    /* --surface-hover-flat ist dunkel eine color-mix-Regel (8% Weiss ueber --surface-card, aufgeloest
       #4C4F52) — .bg-light liest --bs-light-rgb ueber rgba(), das keinen color-mix()-Ausdruck als
       Farbkanal akzeptiert; deshalb hier wie bei --bs-white-rgb der aufgeloeste Wert als Zahlen. */
    --bs-light-rgb: 76, 79, 82;
}

/* Bootstrap bringt fuer das Auswahlfeld eine eigene Daten-URI mit; die Zuweisung aus dem Token
   sorgt dafuer, dass Auswahlfeld und Entity-Picker dieselbe Glyphe zeichnen. Der Moduswechsel
   kommt ueber den Token-Wert. Der :root-Praefix haelt die Regel ueber Bootstraps eigener
   .form-select-Zuweisung, statt den Sieg allein an die Ladereihenfolge der Stylesheets zu haengen. */
:root .form-select {
    --bs-form-select-bg-img: var(--chevron-auswahlfeld);
}

/* Diese Komponenten binden ihre Flaechen-Variable in bootstrap.css direkt an --bs-body-bg
   (--bs-card-bg, --bs-modal-bg, --bs-list-group-bg, --bs-accordion-bg, --bs-form-check-bg) und
   wuerden ohne eigene Zuordnung die Canvas-Flaeche statt ihrer Kartenebene tragen. */
:root[data-theme='dark'] .card {
    --bs-card-bg: var(--surface-card);
}

/* .form-control traegt seine Flaeche ueber --bs-white und liegt damit schon auf der Karte;
   .form-select hat keine eigene Flaechenregel und faellt sonst auf Bootstraps Canvas zurueck —
   zwei Eingabefelder nebeneinander haetten verschiedene Flaechen. Der Elementselektor hebt die
   Spezifitaet ueber die Textregeln, die beide Felder auf ein Alt-Token setzen. */
:root[data-theme='dark'] select.form-select {
    background-color: var(--surface-card);
}

:root[data-theme='dark'] select.form-select,
:root[data-theme='dark'] input.form-control,
:root[data-theme='dark'] textarea.form-control {
    color: var(--text);
}

:root[data-theme='dark'] .modal {
    --bs-modal-bg: var(--surface-card);
}

:root[data-theme='dark'] .list-group {
    --bs-list-group-bg: var(--surface-card);
    /* Eigene Bootstrap-Variable, kein Alias von --bs-list-group-bg: eine deaktivierte Zeile
       liest --bs-body-bg direkt und traegt sonst die Canvas- statt der Deaktiviert-Flaeche. */
    --bs-list-group-disabled-bg: var(--surface-disabled);
}

:root[data-theme='dark'] .accordion {
    --bs-accordion-bg: var(--surface-card);
    /* Pfeilgrafik ist eine SVG-Data-URI mit fest codierter Strichfarbe (analog .form-select oben);
       nur die eingeklappte Variante wechselt die Flaeche, das aufgeklappte Icon liegt weiterhin auf
       --bs-accordion-active-bg (unten bewusst nicht gemappt) und bleibt dort lesbar. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23bdc1c6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* --bs-form-check-bg ist auf .form-check-input selbst deklariert (nicht nur geerbt) und bindet dort
   direkt an --bs-body-bg — die Innenflaeche eines unbelegten Bedienelements ist die Kartenflaeche
   (Wiki 969 Prinzip 9), nicht der Canvas. */
:root[data-theme='dark'] .form-check-input {
    --bs-form-check-bg: var(--surface-card);
}

/* Fonds mischen gegen das Flaechen-Token ihres Kontexts, sonst faellt ein Fond auf einem Menue im
   dunklen Modus dunkler aus als das Menue selbst. Angehobene Ebenen melden ihre Traegerflaeche hier
   an; Regeln, die den Fond selbst rechnen, lesen --fond-traegerflaeche mit --surface-card als
   Rueckfall. Die abgeleiteten Auswahl-Fonds muessen daneben erneut gesetzt werden: ein var() in
   einem :root-Token loest bereits dort auf und sieht die Ueberschreibung nicht. */
/* Kriterium: jede Flaeche, die --surface-raised setzt, meldet den Fond-Traeger mit an. Die Liste
   ist darum nicht der Ort fuer eine Auswahl, sondern die Sammelstelle aller solchen Flaechen —
   Klassennamen aus komponenten-gescoptem CSS eingeschlossen, weil die Klasse im DOM steht. */
.dropdown-menu,
.popover,
.tooltip,
.tooltip-content,
.actions-dropdown-panel,
.calendar-dropdown,
.time-dropdown,
.datetime-dropdown,
.search-dialog-wrapper,
.filter-dialog-wrapper,
.tg-drop-label,
.ql-picker-options,
.ql-tooltip,
.widget-size-indicator,
.role-dropdown-menu,
.step-tooltip,
.skizze-dialog-fenster {
    --fond-traegerflaeche: var(--surface-raised);
    --toggle-selected-bg: color-mix(in srgb, var(--accent) 28%, var(--surface-raised));
    --toggle-selected-disabled-bg: color-mix(in srgb, var(--text-disabled) 28%, var(--surface-raised));
}

/* Primary 500 traegt als Randfarbe auf einer angehobenen Ebene nur 2,73 : 1 (Wiki 969 Ausnahme 9).
   --accent wechselt darum auf dieser Ebene selbst auf Primary 400, statt eine zweite Rolle zu
   fuehren — betrifft jede Komponente, die var(--accent) innerhalb der Ebene liest (z. B. der
   Rahmen des Drag-Ziel-Labels, der Hover-Ring eines Ghost-Buttons in einem Dropdown). */
:root[data-theme='dark'] .dropdown-menu,
:root[data-theme='dark'] .popover,
:root[data-theme='dark'] .tooltip,
:root[data-theme='dark'] .tooltip-content,
:root[data-theme='dark'] .calendar-dropdown,
:root[data-theme='dark'] .time-dropdown,
:root[data-theme='dark'] .datetime-dropdown,
:root[data-theme='dark'] .search-dialog-wrapper,
:root[data-theme='dark'] .filter-dialog-wrapper,
:root[data-theme='dark'] .tg-drop-label,
:root[data-theme='dark'] .ql-tooltip,
:root[data-theme='dark'] .role-dropdown-menu,
:root[data-theme='dark'] .step-tooltip,
:root[data-theme='dark'] .skizze-dialog-fenster {
    --accent: var(--primary-400);
}

/* Meta-Text-Rolle fuer den Dropdown-Header (z.B. "Favoriten"/"Verlauf" in FavoritesDropdown und
   NavigationsHistorieDropdown) statt Bootstraps hartem Grauton, der in beiden Modi unter 3,2:1 liegt.
   Der Eintrag-Hover haengt hell an der Hover-Rolle statt an Bootstraps --bs-tertiary-bg-Rohwert. */
.dropdown-menu {
    /* Fliesstext statt Meta-Ton: die Kopfzeile eines Menues benennt den Abschnitt und ist damit
       tragender Inhalt, kein Nebentext. Auf der angehobenen Ebene traegt der Meta-Ton nur 4,56 : 1
       — formal ausreichend, gelesen aber deutlich blasser als die Eintraege darunter. */
    --bs-dropdown-header-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-hover-flat);
}

/* Eintragstitel im Fliesstext, wie die Kopfzeile darueber: Bootstrap gibt einer bedienbaren
   Listenzeile den Sekundaerton (--bs-list-group-action-color = --bs-secondary-color). Der Titel
   eines Eintrags ist aber sein tragender Inhalt — er lag damit blasser als der Zeitstempel unter
   ihm, der bewusst im Fliesstext steht. Betrifft Navigationshistorie und Favoriten. */
.dropdown-menu .list-group {
    --bs-list-group-action-color: var(--text);
    --bs-list-group-action-hover-color: var(--text);
    --bs-list-group-action-active-color: var(--text);
    --bs-list-group-action-hover-bg: var(--surface-hover-flat);
    --bs-list-group-action-active-bg: var(--surface-hover-flat);
}

/* Menue und Popover liegen auf der angehobenen Ebene, nicht auf der Karte (tokens.md Randfall 2/6).
   Der Hover eines Eintrags verdunkelt statt aufzuhellen (Hover-Regel Fall 3): Bootstraps Default
   (--bs-tertiary-bg) loest dunkel auf dieselbe Flaeche wie das Menue selbst auf und waere sonst
   unsichtbar. Kein Schatten dunkel (Prinzip 8) — die Flaechenabstufung traegt dort die Tiefe. */
:root[data-theme='dark'] .dropdown-menu {
    --bs-dropdown-bg: var(--surface-raised);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, #000000 8%, var(--surface-raised));
}

/* .list-group innerhalb eines Dropdown-Menues (FavoritesDropdown, NavigationsHistorieDropdown)
   gehoert zur selben angehobenen Ebene wie das Menue, nicht zur Kartenflaeche darunter -- sonst
   zeigt das Menue zwei Flaechentoene. Sein Hover verdunkelt aus demselben Grund wie oben. */
:root[data-theme='dark'] .dropdown-menu .list-group {
    --bs-list-group-bg: var(--surface-raised);
    --bs-list-group-action-hover-bg: color-mix(in srgb, #000000 8%, var(--surface-raised));
    --bs-list-group-action-active-bg: color-mix(in srgb, #000000 8%, var(--surface-raised));
}

:root[data-theme='dark'] .popover {
    --bs-popover-bg: var(--surface-raised);
}

/* --bs-tooltip-bg/-color aliasen NICHT --bs-body-bg: Bootstrap zeichnet den Tooltip invertiert
   (Flaeche = --bs-emphasis-color, Text = --bs-body-bg). Die generische Umhaengung oben wuerde den
   Tooltip damit hell statt angehoben-dunkel machen — eigene Zuordnung auf dieselbe Ebene wie
   Menue/Popover. */
:root[data-theme='dark'] .tooltip {
    --bs-tooltip-bg: var(--surface-raised);
    --bs-tooltip-color: var(--text);
}

::-webkit-scrollbar {
    max-height: 10px;
    width: 10px;
}

::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-control);
    /* Der Ring setzt den Griff von der durchscheinenden Spur ab und traegt darum die Farbe der
       Seitenflaeche dahinter, nicht Weiss — sonst zieht sich im dunklen Modus eine helle Linie
       neben jedem Scrollbalken. */
    outline: 2px solid var(--surface-canvas);
    outline-offset: -2px;
    border: 1px solid var(--border-control);
    border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, #000000 8%, var(--border-control));
}

@font-face {
    font-family: Roboto;
    src: url(Roboto/Roboto-Regular.woff2) format("woff2");
    font-display: swap;
}

* {
    font-family: Roboto;
}

html {
    height: 100%;
    width: 100%;
    background: var(--surface-canvas);
    color: var(--text);
    /* Text md/Normal */
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    /* 150% */
}

body {
    height: 100%;
    width: 100%;
    background: var(--surface-canvas);
    color: var(--text);
    /* Text md/Normal */
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    /* 150% */
    display: flex;
    flex-direction: column;
}

body>div {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

body>label {
    margin-bottom: 0px;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

content {
    overflow: hidden;
}

/* Fehlerleiste modusgleich gefuellt — das Label bleibt darauf in beiden Modi nur als echtes Weiss
   lesbar. Error 800 statt der Button-Fuellstufe 600: die Leiste traegt Fliesstext in 16 px, und
   Weiss auf Error 600 liest 4,25:1 (unter SC 1.4.3); auf Error 800 sind es 8,76:1. Der Schatten
   traegt die Trennung zur Seite nur im hellen Modus; dunkel leistet das die Flaechenabstufung
   (Wiki "Farbsystem", Prinzip 8). */
#blazor-error-ui {
    background: var(--error-800);
    color: #FFFFFF;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

:root[data-theme='dark'] #blazor-error-ui {
    box-shadow: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Ein Dialog sperrt nur den Seiteninhalt: Seitenpanel (u.a. KI-Chat) und Tab-Streifen bleiben
   bedienbar, damit der Assistent weitergesteuert und der Arbeitsbereich gewechselt werden kann,
   waehrend ein Dialog offen ist. Verkleinert wird das Rechteck des Ueberzugs, NICHT per z-index
   gestapelt: ein hoeher gestapeltes Panel laege sonst ueber breiten Dialogen.
   :has() am body, weil der Ueberzug am Dokument haengt und kein Nachbar der Layout-Elemente ist;
   die dadurch hoehere Spezifitaet schlaegt zugleich die Scoped-Regel des Modal-Pakets. */
body:has(.virtual-tab-strip) .bm-container {
    bottom: var(--tab-leiste-hoehe);
    height: auto;
}

/* Das ausgesparte Band laeuft ueber die volle Breite und laesst links neben dem Streifen auch das
   untere Ende der Navigation frei. Dort steht die Versionszeile (kein Bedienelement); Abstaende und
   Streifenhoehe sind beide in rem, das Verhaeltnis bleibt also ueber alle Schriftgroessen gleich. */

/* Dialoge, die breiter bzw. hoeher sind als der verbleibende Platz, werden mitverkleinert statt am
   Rand des Ueberzugs abgeschnitten (dessen overflow-x: hidden). */
body:has(.virtual-tab-strip) .bm-container > *,
body:has(.sidebar-panel-host:not([hidden])) .bm-container > * {
    max-width: calc(100% - 3.5rem);
}

/* Nur im Desktop-Layout: mobil ist das Seitenpanel selbst ein Vollbild-Ueberzug ohne feste Breite
   (SidebarPanelHost.razor.css). */
@media (min-width: 48em) {
    body:has(.sidebar-panel-host:not([hidden])) .bm-container {
        right: var(--sidebar-panel-breite, 24rem);
        width: auto;
    }
}

/* KuferSoftware.Blazored.Modal liefert Kartenflaeche und Schatten scope-attributiert und damit
   spezifischer als ein einfaches .blazored-modal hier - jede Ueberschreibung braucht !important.
   Rahmenfarbe transparent statt entfernt: die 1-px-Kante fuer den Stapel-Fall unten aendert nur die
   Farbe, nie die Breite, damit sich die Kartenmasse nicht verschieben. */
.blazored-modal {
    border-radius: 0.625rem !important;
    background-color: var(--surface-card) !important;
    border: 1px solid transparent !important;
}

/* Schatten nur im hellen Modus - das Vendor-Bundle setzt ihn unbedingt, die Flaechenabstufung
   Canvas/Karte traegt die Tiefe im dunklen Modus bereits. Der Dialog traegt tabindex="-1" und
   bekommt beim Oeffnen den Fokus: ohne die Ausnahme nimmt das !important ihm den Fokusring, den
   der dunkle Modus als box-shadow zeichnet. */
:root[data-theme='dark'] .blazored-modal:not(:focus-visible) {
    box-shadow: none !important;
}

/* Kante nur, wenn ein zweiter Dialog ueber einem ersten liegt (gleiche Flaeche auf gleicher
   Flaeche) - der allgemeine Geschwister-Kombinator trifft jeden .bm-container, der einem frueher
   geoeffneten .bm-container folgt, nie den einzelnen Dialog. */
.bm-container~.bm-container .blazored-modal {
    border-color: var(--neutral-500) !important;
}

/* Scrim hinter dem Dialog auf das Overlay-Token ziehen - der Vendor haelt sonst festes
   rgba(0,0,0,.5) in beiden Modi. */
.bm-container {
    background-color: var(--overlay) !important;
}

/* Genau ein Scrim je Stapel: jeder weitere .bm-container bringt einen eigenen mit, deren Deckkraft
   sich multipliziert (2x60 % ergeben 84 %) und den darunter liegenden Dialog samt seiner 1-px-Kante
   unsichtbar macht - der Stapel liest sich dann als einzelner Dialog. */
.bm-container~.bm-container {
    background-color: transparent !important;
}

/* Toast ueber einem Dialog: gleiche Flaeche auf gleicher Flaeche, also dieselbe 1-px-Kante wie beim
   Dialog-Stapel. Ohne offenen Dialog liegt der Toast auf dem Canvas und traegt keine Kante. */
body:has(.bm-container) .notify-toast {
    border: 1px solid var(--neutral-500);
}

.blazored-modal .blazored-modal-header {
    padding-bottom: 4px !important;
    padding-top: 3px !important;
    padding-left: 3px !important;
}

.blazored-modal .bm-header .bm-title {
    color: var(--text);
    font-family: Roboto;
    font-size: 1em;
    font-style: normal;
    font-weight: bold;
    line-height: 1.5em;
}

.blazored-modal .bm-header {
    justify-content: unset
}

/* Titel-Icon eines Dialogs. Die Icon-Datei kommt als externe SVG-Adresse herein und wird als
   MASKE gelegt, nicht als Bild eingebettet: ein <img> rendert die SVG als eigenes Dokument, in dem
   das darin verwendete currentColor gegen dessen eigene Wurzel aufloest — also auf Schwarz, egal
   welchen Modus die Seite traegt. Ueber die Maske liefert die Datei nur die Form, die Farbe kommt
   aus der Textfarbe der Kopfzeile und folgt damit dem Modus.
   Die Adresse steht als Custom Property am Element (--dialog-title-icon), weil sie je Dialog
   wechselt und eine Klasse je Icon 23 Regeln erfordert haette. */
.blazored-modal .bm-header .dialog-title-icon {
    display: inline-block;
    /* Ohne die Angabe sitzt die Unterkante des Kastens auf der Schriftlinie und das Icon reitet
       ueber der Titelmitte (gemessen 5,5 px zu hoch). */
    vertical-align: middle;
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    background-color: currentColor;
    -webkit-mask-image: var(--dialog-title-icon);
    mask-image: var(--dialog-title-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.blazored-modal .bm-content .dialogContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blazored-modal .bm-content .dialogContent {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

.blazored-modal .bm-content .dialogCommands {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.blazored-modal .bm-close {
    margin-right: -10px;
    margin-top: -16px;
}

.group-content {
    width: 50rem;
}

/* Standard Formular Style */
.formular {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: stretch;
    padding: 1rem;
}

.form-group-title {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--text);
    /* Text md/Semibold */
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    /* 150% */
}

.form-control {
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
    background: var(--surface-card);
    color: var(--text);
    /* Text md/Normal */
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    padding: 10px 16px;
    height: unset;
}

/* Rahmen ist ein Bedienelement-Rahmen (Wiki "Eingabefelder"), kein Trennlinien-Grau; Bootstrap
   liefert nur seinen eigenen, nicht rollengebundenen Default. Hover und Fokus teilen den 2-px-
   Akzentrahmen aus dem systemweiten Zustandsmodell und ersetzen Bootstraps farbigen Fokus-Schein
   vollstaendig.

   Der zweite Rahmenpixel entsteht als aussen liegender Ring, nicht durch eine groessere
   Rahmenbreite. Ein wachsender Rahmen verschiebt in beiden Richtungen etwas: nach aussen die
   Nachbarn (bei Feldern ohne feste Hoehe, etwa Textareas), nach innen den Feldinhalt, weil die
   Inhaltsbox schrumpft. Ein Ausgleich ueber das padding-Kuerzel scheidet aus — Felder tragen je
   Bauart unsymmetrische Werte (Floating Label oben, Icon rechts), ein fester Wert liesse den Inhalt
   springen. Nach aussen statt nach innen, weil das Floating Label ein Geschwister des Feldes ist:
   sein weisses Plaettchen liegt im Feld und ueberdeckte einen Innenring am oberen Rand. */
.form-control,
.form-select {
    border-color: var(--border-control);
}

/* Kein :not(:focus): Hover und Fokus sind kombinierte Zustaende (Wiki "Nutzerinteraktionen":
   "Hover-Rahmen plus neutraler Ring; kombiniert, nicht ersetzt"). Ein fokussiertes Feld, das
   ueberfahren wird, zeigt darum beides. */
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Der reine Fokus zeigt allein den neutralen Ring der globalen :focus-visible-Regel — Flaeche,
   Rahmen und Label bleiben unveraendert (Wiki "Nutzerinteraktionen", Zeile Fokus). Der Akzentrahmen
   gehoert Hover und Active. Die Regel muss trotzdem stehen: Bootstraps eigene
   .form-control:focus-Regel faerbt Rahmen und Schatten selbst und setzt Flaeche/Text ueber
   --bs-body-bg/-color, was dunkel die Canvas- statt der Kartenflaeche waere. */
.form-control:focus,
.form-select:focus {
    color: var(--text);
    background-color: var(--surface-card);
    border-color: var(--border-control);
    box-shadow: none;
}

/* Bootstrap setzt auf .form-control:focus ein hartes outline: 0 und schlaegt damit die globale
   :focus-visible-Regel (0,2,0 gegen 0,1,0). Solange der Akzentrahmen den Fokus mitzeichnete, fiel das
   nicht auf; seit der Fokus allein am Ring haengt, waere das Feld ohne diese Regel unmarkiert
   fokussiert.

   Textfelder haengen an :focus-visible — dort matchen alle Engines beim Klick, und ein Klick ins
   Textfeld soll keinen Tastatur-Ring setzen. Auswahllisten, Kontrollkaestchen und Radios haengen
   dagegen an :focus, weil die Engines sich dort uneins sind, ob ein Mausklick als "focus-visible"
   zaehlt: Chromium sagt ja, Firefox nein. Mit :focus-visible bliebe ein angeklickter Select in
   Firefox fokussiert und dabei voellig unmarkiert, sobald die Maus das Feld verlaesst. */
.form-control:focus-visible,
.form-select:focus,
.form-check-input:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Der zweifarbige Dunkel-Ring haengt an derselben Bedingung. Die globale Dunkel-Regel greift nur an
   :focus-visible und liesse Select und Kontrollkaestchen ungedeckt. */
:root[data-theme='dark'] .form-control:focus-visible,
:root[data-theme='dark'] .form-select:focus,
:root[data-theme='dark'] .form-check-input:focus {
    outline: none;
    box-shadow: var(--focus-shadow);
}

/* Im dunklen Modus zeichnet die globale Fokus-Regel ihren Ring als box-shadow. Beim kombinierten
   Zustand Hover+Fokus muessen beide in einer Liste stehen, sonst ersetzt der eine den anderen; der
   Zustandsring steht vorn, weil der erste Schatten einer Liste obenauf liegt. */
:root[data-theme='dark'] .form-control:hover:focus-visible,
:root[data-theme='dark'] .form-select:hover:focus {
    box-shadow: 0 0 0 1px var(--accent), var(--focus-shadow);
}

.search {
    padding-left: 5px;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: none;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
}

select option {
    color: var(--text);
}


.gridborder {
    border: 1px solid var(--border);
    border-radius: 6px;
}

.gridborder[active],
.gridborder[hover]:hover {
    border-color: var(--accent);
}

.gridborder[hover] {
    border-width: 2px;
}

.gridheader {
    padding: 16px 24px;
    background: var(--surface-card);
}

/* Die Kopfzeile ist das oberste Kind des gerundeten Listenrahmens und traegt eine deckende
   Flaeche: ohne eigene Rundung fuellt sie die Ecken quadratisch aus, der Rahmen wirkt dort
   gebrochen. Die Rundung geht an die Randzelle, nicht per overflow: hidden an den Rahmen — der
   wuerde die Popover der Liste (Spaltenmenue, Filter) mitschneiden. 5px statt 6px: innen am
   1-px-Rahmen ist die Kruemmung um dessen Breite kleiner. */
.gridborder .gridheader {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* Gegenstueck an der Unterkante: das Raster ist das unterste Kind des Rahmens und traegt
   ebenfalls eine deckende Flaeche. Oben bleibt es eckig, dort schliesst die Kopfzeile ab.
   Der Typselektor hebt die Regel ueber die Grundrundung, die DwDataGrid sich selbst gibt
   (0.35rem, DwDataGrid.razor.css) — die traegt dieselbe Spezifitaet, und welches Stylesheet
   spaeter im Bundle landet, entscheidet die Projekt-Baureihenfolge. */
.gridborder div.gridraster {
    border-radius: 0 0 5px 5px;
}

.h-80 {
    height: 80% !important;
}

.form-value {
    align-items: center;
    gap: 0.5rem;
    flex: 1 0 0;
    align-self: stretch;
    color: var(--text);
    /* Text md/Semibold */
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    /* 150% */
}

.form-select {
    color: var(--text);
}

/* Der Festwert gilt nur hell: im dunklen Modus gewinnt die Zuordnung bei den
   Bootstrap-Komponenten-Nachzuegen ueber ihre hoehere Selektor-Spezifitaet. */
.form-check-input[type="checkbox"] {
    --bs-form-check-bg: var(--surface-card);
    cursor: pointer;
}

/* ---- Schalter (Toggle/Switch) ----
   Bewusst global und an .form-switch statt an [role="switch"] im CSS einer einzelnen Komponente:
   ein Schalter entsteht im Repo aus zwei Bauteilen — HorizonSwitch und HorizonCheckbox mit
   Class="form-switch". Lagen die Regeln im gescopten CSS von HorizonSwitch, fiel die zweite Variante
   auf Bootstraps Vorbelegung zurueck: Track in der Kartenflaeche, Knopf im Bootstrap-Grau — beides
   im dunklen Modus praktisch unsichtbar. .form-switch grenzt bereits auf Schalter ein, die Rolle
   traegt dazu nichts bei. */

/* Track aus = --border-control (Wiki "Eingabefelder"). Die Zuordnung weiter oben setzt
   --bs-form-check-bg fuer Kontrollkaestchen auf die Kartenflaeche — das meint die Innenflaeche eines
   Kaestchens, nicht den ausgeschalteten Schalter-Track. Sie traegt im Dunkel-Scope 0,3,0 und schlaegt
   diese Regel, darum steht die Schalter-Zuordnung dort ein zweites Mal mit 0,4,0. Ohne sie ist der
   ausgeschaltete Track exakt die Kartenfarbe und damit unsichtbar — zusammen mit dem Knopf, der
   dieselbe Farbe traegt, bleibt nur der Rahmen des Bauteils stehen.
   Track ein (:checked) trifft Bootstraps fest verdrahtetes Teal bereits modusgleich mit --accent. */
.form-switch .form-check-input {
    --bs-form-check-bg: var(--border-control);
}

:root[data-theme='dark'] .form-switch .form-check-input {
    --bs-form-check-bg: var(--border-control);
}

/* Deaktiviert: Track --border-disabled (Wiki "Eingabefelder", Toggle/Switch) statt der allgemeinen
   Feld-Deaktiviert-Flaeche --surface-disabled, die fuer ein Kontrollkaestchen zutrifft, nicht fuer
   den Track. */
.form-switch .form-check-input:disabled {
    background-color: var(--border-disabled);
    border-color: var(--border-disabled);
}

/* Deaktiviert UND eingeschaltet: der Track behaelt den Arbeitston, nur gedaempft. Wiki
   "Eingabefelder" nennt fuer den deaktivierten Schalter nur einen Grauwert, unabhaengig vom
   Schaltzustand — damit unterscheidet sich ein erzwungen aktiver Schalter allein an der
   Knopfposition. Die Daempfung haelt die Lesart "nicht bedienbar" und gibt dem Zustand seinen
   Farbton zurueck; "nicht bedienbar" tragen zusaetzlich Flaeche und Zeiger der Zeile.
   Je Modus eine eigene Mischung, weil --border-disabled selbst den Modus wechselt (hell Neutral 300,
   dunkel Neutral 500): beide Formeln setzen den Knopf des Modus auf 3,54 : 1 gegen den Track. Eine
   gemeinsame Formel liesse den Knopf hell bei 2,01 : 1 — und die Knopfposition ist genau das
   Merkmal, fuer das diese Abweichung existiert. */
.form-switch .form-check-input:disabled:checked {
    background-color: color-mix(in srgb, var(--action-fill) 80%, var(--border-disabled));
    border-color: color-mix(in srgb, var(--action-fill) 80%, var(--border-disabled));
}

:root[data-theme='dark'] .form-switch .form-check-input:disabled:checked {
    background-color: color-mix(in srgb, var(--accent) 45%, var(--border-disabled));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-disabled));
}

/* Knopf traegt die Kartenflaeche des Modus in jedem Zustand, nicht durchgaengig Weiss (ein weisser
   Knopf haelt dunkel auf dem ausgeschalteten Track nur 2,64 : 1). Die Fuellfarbe steckt in einer
   Daten-URI und kann keine CSS-Variable referenzieren — deshalb je Modus ein vollstaendiges SVG,
   wie beim Select-Pfeil. Ueberschreibt zugleich Bootstraps eigenen, farbigen Fokus-Punkt (der Fokus
   traegt nie eine Statusfarbe). */
.form-switch .form-check-input,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
}

:root[data-theme='dark'] .form-switch .form-check-input,
:root[data-theme='dark'] .form-switch .form-check-input:focus,
:root[data-theme='dark'] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%233C4043'/%3e%3c/svg%3e");
}

/* Rahmen, Fokus-Schein und der Active-Abdunkler kommen aus Bootstraps eigener .form-check-input-
   Vorbelegung -- Bedienelement-Rahmen statt Trennlinien-Grau, kein farbiger Fokus-Schein, kein
   eigener Active-Zustand (Wiki "Eingabefelder": Kontrollkaestchen/Radios fuehren kein :active). */
.form-check-input {
    border-color: var(--border-control);
}

.form-check-input:focus {
    border-color: var(--border-control);
    box-shadow: none;
}

.form-check-input:active {
    filter: none;
}

/* Klick-Flaeche des nativen Kalender-/Uhrzeit-Icons bleibt unsichtbar -- die sichtbare Glyphe
   zeichnet ::after darunter, damit sie modusrichtig eingefaerbt werden kann (das native Icon liest
   keine CSS-Variable). color-scheme (AP5) faerbt nur den Rest der nativen Steuerung, nicht dieses
   pointer-only Overlay -- die Zweiteilung bleibt darum bestehen. */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    height: 2rem;
    z-index: 2;
    transform: translateY(-20%);
}

input[type="date"] {
    position: relative;
    display: block;
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--border-control);
    border-radius: 0.25rem;
    background-color: var(--surface-card);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Kalender-Glyphe als Daten-URI: die Strichfarbe steckt im String und kann keine CSS-Variable
   referenzieren (wie beim Select-Pfeil oben) -- deshalb hell/dunkel als zwei vollstaendige SVGs. */
input[type="date"]::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.5%208.33366H17.5M6.66667%205.00033V1.66699M13.3333%205.00033V1.66699M7.83333%2018.3337H12.1667C14.0335%2018.3337%2014.9669%2018.3337%2015.68%2017.9703C16.3072%2017.6508%2016.8171%2017.1408%2017.1367%2016.5136C17.5%2015.8006%2017.5%2014.8672%2017.5%2013.0003V8.66699C17.5%206.80015%2017.5%205.86673%2017.1367%205.15369C16.8171%204.52648%2016.3072%204.01655%2015.68%203.69697C14.9669%203.33366%2014.0335%203.33366%2012.1667%203.33366H7.83333C5.96649%203.33366%205.03307%203.33366%204.32003%203.69697C3.69282%204.01655%203.18289%204.52648%202.86331%205.15369C2.5%205.86673%202.5%206.80015%202.5%208.66699V13.0003C2.5%2014.8672%202.5%2015.8006%202.86331%2016.5136C3.18289%2017.1408%203.69282%2017.6508%204.32003%2017.9703C5.03307%2018.3337%205.96649%2018.3337%207.83333%2018.3337Z%22%20stroke%3D%22%235F6368%22%20stroke-width%3D%221.67%22%20stroke-linecap%3D%22round%22%20/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

:root[data-theme='dark'] input[type="date"]::after {
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.5%208.33366H17.5M6.66667%205.00033V1.66699M13.3333%205.00033V1.66699M7.83333%2018.3337H12.1667C14.0335%2018.3337%2014.9669%2018.3337%2015.68%2017.9703C16.3072%2017.6508%2016.8171%2017.1408%2017.1367%2016.5136C17.5%2015.8006%2017.5%2014.8672%2017.5%2013.0003V8.66699C17.5%206.80015%2017.5%205.86673%2017.1367%205.15369C16.8171%204.52648%2016.3072%204.01655%2015.68%203.69697C14.9669%203.33366%2014.0335%203.33366%2012.1667%203.33366H7.83333C5.96649%203.33366%205.03307%203.33366%204.32003%203.69697C3.69282%204.01655%203.18289%204.52648%202.86331%205.15369C2.5%205.86673%202.5%206.80015%202.5%208.66699V13.0003C2.5%2014.8672%202.5%2015.8006%202.86331%2016.5136C3.18289%2017.1408%203.69282%2017.6508%204.32003%2017.9703C5.03307%2018.3337%205.96649%2018.3337%207.83333%2018.3337Z%22%20stroke%3D%22%23BDC1C6%22%20stroke-width%3D%221.67%22%20stroke-linecap%3D%22round%22%20/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.btnDefaults {
    width: 120px;
    padding: 0.75rem 1.25rem;
}

/* Bootstraps eigene .btn-Vorbelegung dimmt Deaktiviert-Zustaende zusaetzlich per globaler Opacity
   und ersetzt den Fokus-Ring durch einen ueber --bs-btn-focus-shadow-rgb gefaerbten oder (ohne
   gesetzte Variable) unsichtbaren Schein. Fuer die ganze Button-Familie zurueckgesetzt: Deaktiviert
   traegt allein seine Rollen, der Fokus die globale Regel. */
.btn {
    /* Deaktiviert traegt Rollen statt einer globalen Deckkraft. Die Rollen muessen hier stehen: ohne
       sie nimmt die abgeschaltete Deckkraft jedem Button-Typ, der keine eigenen Deaktiviert-Werte
       setzt, das einzige Kennzeichen. */
    --bs-btn-disabled-opacity: 1;
    --bs-btn-disabled-bg: var(--surface-disabled);
    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-border-color: var(--border-disabled);
    /* Bootstrap zeichnet den Fokus als farbigen Schein und setzt ihn in mehreren Regeln bis zur
       Spezifitaet 0,4,0 (u. a. an :active:focus-visible). Ein Gegenselektor verliert dieses Rennen;
       die Variable auf none zu setzen entwertet alle diese Regeln auf einmal, sodass der neutrale
       Ring der globalen :focus-visible-Regel sichtbar bleibt. */
    --bs-btn-focus-box-shadow: none;
}

.btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-primary,
.btn-primary-form,
.btn-secondary,
.btn-danger {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* .btn-primary-form ist im Repo aktuell ohne Aufrufstelle (nachweis-suche 0 Treffer), bleibt aber
   erhalten, da nicht Teil der bestaetigten Loeschliste. Die wirkungslose Schatten-Deklaration
   entfaellt, der Rahmen liest die Akzent-Rolle. */
.btn-primary-form:focus-visible,
.btn-primary-form:hover {
    border-color: var(--accent) !important;
}

/* Gefuellte Buttons (Primaer, Danger-Primaer) fuellen als einzige Typen der Familie vollflaechig.
   Bootstraps eigene .btn-primary-Vorbelegung traegt feste Hex-Stufen ohne Dunkel-Variante; die
   Rollen-Tokens ueberschreiben sie hier, damit Active automatisch mit dem Modus die Richtung
   dreht statt eine Stufe fest zu verdrahten. */
.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--action-fill);
    --bs-btn-border-color: var(--action-fill);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--action-fill-hover);
    --bs-btn-hover-border-color: var(--action-fill-hover);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--action-fill-active);
    --bs-btn-active-border-color: var(--action-fill-active);
    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-bg: var(--surface-disabled);
    --bs-btn-disabled-border-color: var(--border-disabled);
}

/* Kein --action-fill-Gegenstueck fuer die Error-Skala: Zustand liest die Skalen-Tokens direkt,
   Active dreht die Richtung per Dunkel-Scope-Ueberschreibung, weil kein einzelnes Token beide
   Modi traegt. */
.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--error-600);
    --bs-btn-border-color: var(--error-600);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: color-mix(in srgb, #000000 8%, var(--error-600));
    --bs-btn-hover-border-color: color-mix(in srgb, #000000 8%, var(--error-600));
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--error-800);
    --bs-btn-active-border-color: var(--error-800);
    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-bg: var(--surface-disabled);
    --bs-btn-disabled-border-color: var(--border-disabled);
}

:root[data-theme='dark'] .btn-danger {
    --bs-btn-active-bg: var(--error-500);
    --bs-btn-active-border-color: var(--error-500);
}

/* Buttons mit eigener Flaeche (Sekundaer-Anatomie): Fond auf Weiss/Neutral-800-Ebene, Hover
   veraendert nur den Rahmen. Label ueber die Ghost-Regel akzentfarben, da .btn-light optisch
   dieselbe Rolle wie ein Ghost-Button auf heller Flaeche traegt. */


.btn-navigation {
    border: none;
    --bs-btn-hover-bg: var(--surface-hover-flat);
}

/* Ohne eigene Flaeche: Bootstraps Fokus- und Hover-Regeln lesen --bs-btn-*-bg, deshalb werden die
   Variablen entwertet statt die Selektoren ueberboten. */
.btn-outline-primary {
    color: var(--text-teal);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--text-teal);
    --bs-btn-hover-border-color: var(--accent);
    /* Ebenfalls flaechenlos — kein Active-Zustand, nur Bootstraps Vorbelegung neutralisiert. */
    --bs-btn-active-bg: transparent;
    --bs-btn-active-color: var(--text-teal);
    --bs-btn-active-border-color: var(--accent);
}

.btn-ghost {
    color: var(--text-teal);
}

.btn-ghost[disabled] {
    color: var(--text-disabled);
}


.btn-ghost {
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--text-teal);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-focus-border-color: var(--accent);
    /* Kein Active-Zustand: das Bauteil ist flaechenlos (Wiki "Bedienelemente", Zeile "Kein Active
       ohne eigene Flaeche"). Die Active-Variablen tragen darum die Hover-Werte — ohne sie zieht
       Bootstraps :active-Vorbelegung doch eine Flaeche ein. */
    --bs-btn-active-color: var(--text-teal);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Auffangregel fuer Buttons ohne benannte Variante (z. B. Variant="None" mit eigener Klasse). Ohne
   eigene Flaeche, daher Rahmenwechsel bei Hover/Fokus wie bei Ghost, Label neutral wie bei
   Sekundaer, weil ohne bekannten Typ kein akzentfarbenes Label unterstellt werden kann. Ohne eigene
   Flaeche auch kein Active-Zustand — die Active-Variablen tragen die Hover-Werte. */
.btn:not(.btn-danger):not(.btn-ghost):not(.btn-secondary):not(.btn-primary):not(.btn-entity-picker):not([disabled]) {
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-focus-border-color: var(--accent);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--border-disabled);
}

/* Nicht-interaktiver Trigger (cursor: default) ohne eigenen Aktiv-Zustand — der Rahmen bleibt in
   jedem Zustand die Bedienelement-Rolle statt eines Hover-/Active-Akzents. */
.btn-entity-picker {
    border-left: none !important;
    cursor: default !important;
    --bs-btn-color: none;
    --bs-btn-hover-color: none;
    --bs-btn-hover-bg: var(--surface-card);
    --bs-btn-hover-border-color: var(--border-control);
    --bs-btn-focus-border-color: var(--border-control);
    --bs-btn-active-color: none;
    --bs-btn-active-border-color: var(--border-control);
    --bs-btn-active-bg: var(--surface-card);
    --bs-btn-active-shadow: none;
    --bs-btn-border-color: var(--border-control);
}

.btn:not(.btn-danger):not(.btn-ghost):not(.btn-secondary):not(.btn-primary)[disabled] {
    --bs-btn-disabled-border-color: transparent;
}

/* Ghost-Icon (Wiki 525): bedienbares Icon innerhalb eines anderen Bauteils (z. B. das Kalender-Icon
   in einem Datumsfeld) — keine eigene Flaeche, kein Dauerrahmen, das Glyph traegt die Funktion
   allein. Eine zentrale Regel fuer alle Feld-Komponenten statt einer je Bauteil. Alle Zustaende deklarieren Flaeche/Rahmen/Farbe direkt statt ueber --bs-btn-*,
   weil Bootstraps eigene :hover/:focus-visible/:active-Regeln sonst ueber die Auffangregel oben
   fuer Buttons ohne benannte Variante einspeisen wuerden. Der 2px transparente Rahmen im Ruhezustand
   reserviert die Breite fuer den Hover-Rahmen, damit das Bauteil beim Zustandswechsel nicht springt. */
.btn-ghosticon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-meta);
    cursor: pointer;
    transition: var(--transition);
}

.btn-ghosticon:hover:not(:disabled) {
    background: transparent;
    border-color: var(--accent);
    color: var(--text-meta);
}

/* Wiki 525 "Active: keiner" — das Bauteil ist flaechenlos. Die Regel neutralisiert nur Bootstraps
   :active-Vorbelegung (u. a. ueber :not(.btn-check) + .btn:active); :not(:hover) laesst einen echten
   Mausklick unangetastet, dort bleibt allein der Hover-Rahmen sichtbar (Hover + Active gemeinsam,
   nicht ersetzt). */
.btn-ghosticon:active:not(:hover):not(:disabled) {
    background: transparent;
    border-color: transparent;
    color: var(--text-meta);
}

/* Eigene Ueberschreibung noetig: Bootstraps .btn:focus-visible liest ueber --bs-btn-hover-* dieselben
   Custom Properties wie :hover und ersetzt den globalen Ring durch einen farbigen Schein. Die Werte
   hier sind die der globalen :focus-visible-Regel, nur mit ausreichender Spezifitaet — keine eigene
   Darstellung. Im dunklen Modus gewinnt die staerker spezifische globale Dunkel-Regel und ersetzt
   outline/box-shadow durch den zweifarbigen Ring, ohne dass diese Regel etwas dafuer tun muss. */
.btn-ghosticon:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
    color: var(--text-meta);
}

.btn-ghosticon:disabled {
    color: var(--text-disabled);
    border-color: transparent;
    background: transparent;
    cursor: not-allowed;
    opacity: 1;
}

/* Sekundaer-Anatomie: eigene Flaeche, Hover veraendert nur den Rahmen, Active zeigt die graue
   Ueberlagerung plus Rahmen in --border-active statt einer Vollfuellung. */
.btn-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--surface-card);
    --bs-btn-border-color: var(--border-control);

    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--surface-card);
    --bs-btn-hover-border-color: var(--accent);

    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--surface-hover-flat);
    --bs-btn-active-border-color: var(--border-active);
    --bs-btn-active-shadow: none;

    --bs-btn-disabled-color: var(--text-disabled);
    --bs-btn-disabled-bg: var(--surface-disabled);
    --bs-btn-disabled-border-color: var(--border-disabled);
}

/* Hover und Active tragen einen 2 px starken Rahmen (Wiki "Bedienelemente"). Der zweite Pixel liegt
   als Ring aussen am Rahmen, nicht als groessere Rahmenbreite. Ein wachsender Rahmen veraendert die
   Aussenmasse inhaltsbreiter Buttons, und ein Ausgleich am Innenabstand ist nicht zuverlaessig zu
   treffen: die Buttons ziehen ihren Innenabstand aus mindestens drei Quellen — Bootstraps
   --bs-btn-padding-*, eine eigene Regel je Variante (Sekundaer/Primaer/Danger 10px/16px) und eine
   Regel je Bauteil (.btn-icon-middle 11px/10px). Ein fester Wert traf immer nur eine davon.
   Gefuellte Buttons (Primaer, Danger-Primaer) zeigen den Rahmenwechsel nicht, sie quittieren den
   Druck ueber die Fuellfarbe. Die Auswahl-Toggles sind ebenfalls ausgenommen: an ihnen codiert der
   Akzent den Auswahlzustand, sie hovern neutral und tragen eigene Zustandsregeln — der Ring hier
   wuerde ausserdem die Unterkanten-Marke des gewaehlten Segments ueberschreiben. Die Tabs der
   Detailseite (.tab-btn) sind ebenfalls ausgenommen: sie liegen in einem waagerecht scrollenden
   Streifen mit overflow: hidden, an dem ein aussen liegender Ring an den Streifenkanten
   abgeschnitten wird. Sie tragen ihren zweiten Pixel innen (TabNavigator.razor.css). Und die
   Navigationszeilen der Sidebar (.nav-item-extended, z. B. Ausloggen) sind ausgenommen: sie sind
   Buttons, tragen aber die Optik einer Menuezeile — Flaeche plus Balken, kein umlaufender Rahmen,
   sonst hebt sich der Eintrag sichtbar von seinen Nachbarn ab.
   Das Chevron eines Feld-Pickers (.dropdown-button) ist ausgenommen, weil Rahmen und Ring dort
   der Feldgruppe gehoeren: ein eigener Ring am Chevron zeichnet eine Linie an der Naht zum
   Feld. Chevrons mit benannter Variante (z. B. .btn-secondary im EntityPickerDataGrid) behalten
   ihren Ring ueber den jeweiligen Varianten-Selektor. */
.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline-primary:hover,
.btn:not(.btn-danger):not(.btn-ghost):not(.btn-ghosticon):not(.btn-secondary):not(.btn-primary):not(.btn-entity-picker):not(.dropdown-button):not(.select-toggle):not(.tab-btn):not(.nav-item-extended):not([disabled]):hover {
    box-shadow: 0 0 0 1px var(--accent);
}

/* Nur der Sekundaer-Button hat eine eigene Flaeche und fuehrt darum einen Active-Zustand (Wiki
   "Bedienelemente"). Die flaechenlosen Varianten zeigen im Druck weiter allein den Hover-Rahmen. */
.btn-secondary:active {
    box-shadow: 0 0 0 1px var(--border-active);
}

/* Im dunklen Modus zeichnet die globale Fokus-Regel ihren Ring selbst als box-shadow. Zustandsring
   zuerst: in einer box-shadow-Liste liegt der erste Schatten obenauf, hinten verdeckte ihn der
   Fokusring. Gefuellte Buttons und das Ghost-Icon bleiben ausgenommen, sie fuehren keinen
   Rahmenwechsel. */
:root[data-theme='dark'] .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghosticon):not(.dropdown-button):not(.select-toggle):hover:focus-visible {
    box-shadow: 0 0 0 1px var(--accent), var(--focus-shadow);
}

:root[data-theme='dark'] .btn-secondary:active:focus-visible {
    box-shadow: 0 0 0 1px var(--border-active), var(--focus-shadow);
}

h7 {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--primary-black);
}

.page-link {
    /* Rahmenbreite bleibt in jedem Zustand reserviert (transparent statt none) — sonst wuerde der
       Rahmenring der aktuellen Seite die Groesse gegenueber den anderen Seiten-Buttons veraendern. */
    border: 1px solid transparent;
    color: var(--text-meta);
    background-color: transparent;
}

.page-link:focus {
    box-shadow: none;
    color: var(--text-meta);
}

/* Gleicher Fall wie bei den Kontrollkaestchen: Bootstraps .page-link:focus traegt outline: 0, der
   entwertete Schein war der einzige Indikator. */
.page-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.page-link:hover {
    color: var(--text-teal);
    background-color: var(--bs-tertiary-bg);
}

/* Aktuelle Seite: zusaetzlich zur Flaeche ein Rahmenring in --accent (Struktur ueber Kanten, Wiki
   969 Prinzip 7). --bs-secondary-bg und --bs-tertiary-bg loesen dunkel auf denselben Wert auf (beide
   auf die 8-%-Weiss-Ableitung gemappt) — ohne den Ring waere die aktuelle Seite dort von der reinen
   Hover-Flaeche nicht mehr unterscheidbar. 1 px Rahmen plus 1 px Ring aussen (Zustandsring statt
   breiterem Rahmen), kein Vorfahre mit overflow: hidden dazwischen. */
.page-link.active,
.active>.page-link {
    color: var(--text-teal);
    background-color: var(--bs-secondary-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    border-radius: var(--bs-border-radius);
}

.page-link.active,
.active>.page-link:hover {
    background-color: var(--bs-tertiary-bg);
}

.search-container {
    border: 1px solid var(--border-control);
    border-radius: 8px;
    background: var(--surface-card);
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    padding-left: 10px;
}

.search-container.w-100 {
    max-width: none;
}

/* Wie bei den einfachen Feldern: der reine Fokus zeigt allein den neutralen Ring (Regel weiter
   unten an :has(input:focus-visible)), Flaeche und Rahmen bleiben. Die Regel haelt nur Flaeche und
   Text auf den Feld-Rollen. */
.search-container:focus-within {
    color: var(--text);
    background-color: var(--surface-card);
    border-color: var(--border-control);
}

/* Das innere Input traegt in KEINEM Zustand einen eigenen Rahmen oder Ring — Hover und Fokus gehoeren
   dem umgebenden Bauteil. Sonst liegt ein Zustandsring nur um den Textteil, waehrend das Icon
   daneben im Ruhezustand bleibt. Die Hover-Selektoren wiederholen die drei Pseudo-Klassen der
   Feld-Zustandsregel, weil sie sie in der Spezifitaet schlagen muessen (0,4,1 gegen 0,4,0). */
.search-container input:hover:not(:disabled):not(:focus),
.search-container input:focus,
.input-wrapper input:hover:not(:disabled):not(:focus),
.input-wrapper input:focus {
    outline: none;
    box-shadow: none;
}

/* Der Hover liegt am zusammengesetzten Bauteil, damit Textteil und Icon gemeinsam reagieren, und
   gilt auch im fokussierten Zustand — Hover und Fokus sind kombinierte Zustaende. */
.search-container:hover,
.input-wrapper:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* --- Zusammengesetzte Felder: der Zustand gehoert der Gruppe, nicht dem einzelnen Kind ---------
   Ein Feld mit Praefix-Icon, Dropdown-Knopf oder Einheit ist EIN Bauteil. Ohne diese Regeln
   zeichnet jedes Kind seinen Zustand selbst: beim Hover leuchtet nur das ueberfahrene Kind auf, und
   an der Naht steht ein zweiter, andersfarbiger Rahmen — in der globalen Suche sichtbar als
   zusaetzliche Kante zwischen Such-Icon und Textfeld. */

/* Feld INNERHALB eines Containers, der den Rahmen selbst fuehrt (globale Suche): das Feld traegt
   dort in keinem Zustand einen eigenen Rahmen oder Ring, sonst liegt er innen am Container.
   Der :root-Praefix hebt die Regel ueber die Dunkel-Fokusregel (:root[data-theme] :focus-visible),
   die denselben Rang hat; der kombinierte Zustand ist eigens aufgefuehrt, weil sonst die
   Hover-Regel des Feldes wieder greift. */
:root .search-container .form-control,
:root .search-container .form-control:hover,
:root .search-container .form-control:focus,
:root .search-container .form-control:focus-visible,
:root .search-container .form-control:hover:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
}

/* Die Gruppe INNERHALB des Such-Containers fuehrt keinen eigenen Zustand — der Container tut es.
   Ohne diese Zeile legte die Gruppen-Regel weiter unten einen zweiten Akzentring nach innen. */
:root .search-container .input-group,
:root .search-container .input-group:hover {
    box-shadow: none;
}

/* Fokus-Indikator des Feldes wandert an den Container — innen am Rahmen laege der Ring quer
   ueber dem Such-Icon. */
.search-container:has(.form-control:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

:root[data-theme='dark'] .search-container:has(.form-control:focus-visible) {
    outline: none;
    box-shadow: var(--focus-shadow);
}

/* Gruppe OHNE eigenen Rahmen (zusammengesetzte Felder wie Text plus Sprachauswahl): im Hover tragen ALLE
   Kinder den Akzentrahmen, damit das Bauteil als Ganzes reagiert und die Naht nicht als
   Farbwechsel stehenbleibt. Der zweite Pixel liegt als Ring um die Gruppe, nicht je Kind.
   Nur Hover — bei Fokus bleibt der Rahmen unveraendert und es kommt allein der neutrale Ring
   (Wiki 524, Zustandstabelle). */
/* :not(:focus-visible) am Feld: der Ring der Gruppe ersetzt den Zustandsring der Kinder, darf aber
   nicht den FOKUSRING schlucken — dunkel zeichnet die globale Fokusregel ihn als box-shadow, und
   diese Regel steht spaeter im Stylesheet. Ohne die Ausnahme ist der Tastaturfokus unsichtbar,
   sobald die Maus zusaetzlich auf dem Feld liegt. */
/* .picker-field-group ausgenommen: dort fuehrt die Gruppe Rahmen und Ring selbst, und ihre Kinder
   haben border-style: none. Beide Regelwerke nebeneinander setzen heute dieselben Werte -- eine
   Aenderung an einem von beiden liefe sonst still ins Leere. */
.input-group:not(.search-container):not(.picker-field-group):hover>.form-control:not(:focus-visible),
.input-group:not(.search-container):not(.picker-field-group):hover>.btn-entity-picker:not(:focus-visible),
.input-group:not(.search-container):not(.picker-field-group):hover>.dropdown-button:not(:focus-visible) {
    border-color: var(--accent);
    box-shadow: none;
}

/* Fokussiertes Kind: Akzentrahmen der Gruppe bleibt, der Fokusring kommt dazu. */
.input-group:not(.search-container):not(.picker-field-group):hover>.form-control:focus-visible {
    border-color: var(--accent);
}

.input-group:not(.search-container):not(.picker-field-group):hover {
    box-shadow: 0 0 0 1px var(--accent);
    border-radius: var(--bs-border-radius);
}

/* Im Input-Group teilen sich die Nachbarn den Rahmen ueber einen negativen linken Margin; das
   spaetere Geschwister (Sprachauswahl, Aktionsmenue) ueberdeckt sonst die hervorgehobene rechte
   Kante des Feldes. 3 liegt ueber dem Nachbarn (2) und unter dem Fokus-Zustand (5). Gilt fuer beide
   Feld-Anatomien: das zusammengesetzte Bauteil und das einzeilige Feld im Floating-Wrapper. */
.input-group .input-wrapper:hover,
.input-group>.form-floating:hover {
    position: relative;
    z-index: 3;
}

/* Rang 3 macht das gehoverte Feld zum Stacking-Context: Tooltip (200) und Label (300) darin zaehlen
   nach aussen nur noch als 3, waehrend das Label des NACHBARFELDES mit 100 im aeusseren Kontext
   bleibt und sich ueber den geoeffneten Hilfetext legt — er wirkt dann durchscheinend. Solange ein
   Hilfetext offen ist, entscheidet deshalb der Rang des FELDES, und der muss ueber den 300 der
   Label-Regel. */
.input-group .input-wrapper:has(.tooltip-content:not([hidden])),
.input-group .input-wrapper:has(.toggle-help:hover),
.input-group .input-wrapper:has(.toggle-help:focus-within),
.input-group>.form-floating:has(.tooltip-content:not([hidden])),
.input-group>.form-floating:has(.toggle-help:hover),
.input-group>.form-floating:has(.toggle-help:focus-within) {
    position: relative;
    z-index: 301;
}

/* Dunkel zeichnet die Ring-Regel unten den Fokusring als box-shadow; beim kombinierten Zustand
   muessen Zustandsring und Fokusring in einer Liste stehen. */
:root[data-theme='dark'] .search-container:hover:has(input:focus-visible),
:root[data-theme='dark'] .input-wrapper:hover:has(input:focus-visible) {
    box-shadow: 0 0 0 1px var(--accent), var(--focus-shadow);
}

/* Der systemweite Ring liegt am Bauteil, nicht am inneren Input. */
.search-container:has(input:focus-visible),
.input-wrapper:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

:root[data-theme='dark'] .search-container:has(input:focus-visible),
:root[data-theme='dark'] .input-wrapper:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--focus-shadow);
}

/* --- Kombinationsfeld-Picker: EIN Rahmen um Feld und Chevron (Wiki 1073 "Entity-Picker",
   Bauform 1) -----------------------------------------------------------------------------
   Ohne gemeinsame Klasse fuehrt jedes Kind seinen Zustand selbst (siehe Regeln oben) und an der
   Naht zwischen Feld und Chevron bleibt eine zweite, andersfarbige Kante stehen. Die Marker-Klasse
   picker-field-group buendelt Rahmen, Flaeche, Oeffnen-Ring und Fokusring auf der Gruppe. Jede
   Picker-Variante (heute EntityPicker, EntityPickerBase, EntityHybridInput; kuenftige ebenso)
   setzt diese Klasse an ihrem form-floating.input-group-Wrapper, sonst laeuft sie aus diesem
   System und der Bug kehrt zurueck. */
.picker-field-group {
    border: 1px solid var(--border-control);
    border-radius: var(--bs-border-radius);
    background: var(--surface-card);
}

.picker-field-group:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Geoeffnete Liste traegt denselben 2-px-Zustandsrahmen wie Hover, hier an den Oeffnen-Zustand
   gebunden statt an die Maus -- :has() ist in dieser Datei bereits produktiv (siehe oben). */
.picker-field-group:has(.dropdown-menu.show) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Kinder tragen in keinem Zustand einen eigenen Rahmen oder eine eigene Flaeche -- die Gruppe
   fuehrt beides. Kindkombinator beim Feld: EntityHybridInput fuehrt sein Suchfeld eine Ebene
   tiefer in .search-container (eigener Rahmen, siehe oben), das darf hier nicht mitgefangen
   werden. Auch im Deaktiviert-Zustand bleibt das Feld flach — Flaeche und Rahmen traegt dort die
   Gruppe (Regel weiter unten), sonst liegt ein zweiter Rahmen um den Textteil.
   background-color statt der Kurzform: die Kurzform setzt background-image auf none und loescht
   damit das Chevron der Regel weiter unten, die denselben Rang (0,2,0) hat und nur ueber ihre
   Position im File gewinnt. */
.picker-field-group > .form-control,
.picker-field-group .dropdown-button,
.picker-field-group .btn-entity-picker {
    border: none;
    background-color: transparent;
    box-shadow: none;
}

/* .btn-entity-picker uebersteuert Rahmen- und Hover-Flaeche ueber eigene --bs-btn-*-Variablen;
   ohne diese Aufloesung gewinnt der Button gegen die randlose Regel oben, weil Bootstraps
   border-Shorthand seinen eigenen Custom Properties folgt, nicht dem direkten border-Wert einer
   fremden Regel. */
.picker-field-group .btn-entity-picker,
.picker-field-group .dropdown-button {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    /* Auch die Textrolle gehoert dazu: alles, was der Button in currentColor zeichnet, erbt von
       einer gefuellten Variante deren Label-Weiss — auf der Feldflaeche unsichtbar. */
    --bs-btn-color: var(--text);
    --bs-btn-hover-color: var(--text);
    --bs-btn-active-color: var(--text);
    --bs-btn-disabled-color: var(--text-disabled);
}

/* Zielgroesse des Chevrons (SC 2.5.8): min-Werte statt fester Groesse, damit die Feldhoehe (58px,
   ueber h-form-floating gesetzt) unangetastet bleibt -- sie liegt ohnehin darueber. */
.picker-field-group .dropdown-button,
.picker-field-group .btn-entity-picker {
    min-width: 44px;
    min-height: 44px;
}

/* Das Chevron kommt als Hintergrundbild aus demselben Token wie im Auswahlfeld, samt dessen
   Zeichenflaeche von 16x12. Ein Icon aus dem Horizon-Satz stuende hier als eigene Glyphe mit
   anderem Seitenverhaeltnis und duennerem Strich -- neben einem Auswahlfeld im selben Formular
   faellt das als unterschiedlich grosses Chevron auf, und Skalieren gleicht es nicht an.
   Der Button traegt darum kein Icon-Element; seinen Namen fuehrt er per aria-label. */
.picker-field-group .dropdown-button,
.picker-field-group .btn-entity-picker {
    background-image: var(--chevron-auswahlfeld);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
}

/* Fokusring des FELDES liegt an der Gruppe, nicht am Input selbst (Muster .input-wrapper oben) --
   ein randloses Feld liesse den Ring sonst ohne sichtbaren Bezugsrahmen erscheinen. */
.picker-field-group:has(> .form-control:focus-visible),
.picker-field-group:has(> .search-container > .form-control:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Liegt das Feld in einer .search-container-Huelle, zeichnet deren eigene Ringregel (oben) den
   Ring nur um die Texthaelfte -- also genau die Optik, die die Gruppe beseitigt. Innerhalb der
   Gruppe traegt ihn die Gruppe. */
.picker-field-group > .search-container:has(> .form-control:focus-visible) {
    outline: none;
}

:root[data-theme='dark'] .picker-field-group > .search-container:has(> .form-control:focus-visible),
:root[data-theme='dark'] .picker-field-group > .search-container:hover:has(> .form-control:focus-visible) {
    box-shadow: none;
}

/* Der allgemeine Hover-Zustand des Feldes (.form-control:hover:not(:disabled)) legt einen 1px
   starken Akzentring um den Textteil und schlaegt mit drei Pseudoklassen die randlose
   Kinder-Regel oben. Sichtbar bleibt davon die Kante an der Naht zum Chevron -- eine Linie
   mitten im Bauteil, dessen Rahmen die Gruppe fuehrt. Nur der direkte Fall steht hier: ein Feld in
   der .search-container-Huelle deckt die Regel jener Huelle (weiter oben) bereits ab. */
:root .picker-field-group > .form-control:hover {
    box-shadow: none;
}

/* Das Feld selbst zeichnet keinen zweiten Ring: die allgemeinen .form-control-Fokusregeln liegen
   sonst zusaetzlich um den Textteil und schneiden die Naht zum Chevron. Der :root-Praefix ist
   noetig, um die Dunkel-Fokusregeln gleichen Rangs zu ueberholen (Vorbild .search-container). */
:root .picker-field-group > .form-control:focus,
:root .picker-field-group > .form-control:focus-visible,
:root .picker-field-group > .form-control:hover:focus-visible,
:root .picker-field-group > .search-container > .form-control:focus,
:root .picker-field-group > .search-container > .form-control:focus-visible,
:root .picker-field-group > .search-container > .form-control:hover:focus-visible {
    outline: none;
    box-shadow: none;
}

:root[data-theme='dark'] .picker-field-group:has(> .form-control:focus-visible),
:root[data-theme='dark'] .picker-field-group:has(> .search-container > .form-control:focus-visible) {
    outline: none;
    box-shadow: var(--focus-shadow);
}

/* Kombinierte Zustaende: Zustandsring (Hover bzw. geoeffnete Liste) und Fokusring muessen im
   dunklen Modus in EINER box-shadow-Liste stehen, sonst ersetzt der zuletzt im Kaskaden-Rennen
   gewinnende Schatten den anderen komplett, statt ihn zu ergaenzen (Vorbild oben,
   .search-container:hover:has(input:focus-visible)). Der verkettete :has()-Fall (Liste offen UND
   Feld fokussiert) traegt dieselbe Ringfarbe wie Hover+Fokus, seine hoehere Spezifitaet entscheidet
   nur, welche der beiden Regeln im Dreifach-Zustand (Hover, offen, Fokus) greift -- der Wert ist
   identisch. */
:root[data-theme='dark'] .picker-field-group:hover:has(> .form-control:focus-visible),
:root[data-theme='dark'] .picker-field-group:hover:has(> .search-container > .form-control:focus-visible) {
    box-shadow: 0 0 0 1px var(--accent), var(--focus-shadow);
}

:root[data-theme='dark'] .picker-field-group:has(.dropdown-menu.show):has(> .form-control:focus-visible),
:root[data-theme='dark'] .picker-field-group:has(.dropdown-menu.show):has(> .search-container > .form-control:focus-visible) {
    box-shadow: 0 0 0 1px var(--accent), var(--focus-shadow);
}

/* Chevron behaelt einen eigenen Fokusring (Wiki 1073: Chevron und Feld je ein eigener Ring). Der
   allgemeine .btn:focus-visible-Ring liegt 2px AUSSEN am Button -- direkt am Gruppenrahmen liefe er
   unter diesen bzw. wuerde von dessen Rundung beschnitten. Nach innen versetzt statt aussen. */
.picker-field-group .dropdown-button:focus-visible,
.picker-field-group .btn-entity-picker:focus-visible {
    outline-offset: -2px;
}

/* Dunkel zeichnet die globale Regel den Ring als box-shadow und ersetzt die outline komplett —
   outline-offset ist dort wirkungslos. Der Ring kommt hier als Inset-Pendant zurueck. */
:root[data-theme='dark'] .picker-field-group .dropdown-button:focus-visible,
:root[data-theme='dark'] .picker-field-group .btn-entity-picker:focus-visible {
    box-shadow: var(--focus-shadow-inset);
}

/* Deaktiviert traegt die Gruppe Flaeche und Rahmen, weil die Kinder beides abgegeben haben.
   Ohne diese Regel zeigt das Feld --surface-disabled und der Chevron daneben die Kartenflaeche. */
.picker-field-group:has(> .form-control:disabled) {
    background: var(--surface-disabled);
    border-color: var(--border-disabled);
}

/* Fehlerzustand traegt ebenfalls die Gruppe: die randlose Kinder-Regel oben nimmt der zentralen
   .invalid-Regel border-style und box-shadow weg (hoehere Spezifitaet), am Kind bliebe nur die
   Fehlerfarbe ohne zeichnende Kante -- der Picker zeigte im Fehlerfall keinen Rahmen mehr. Nicht
   als Kindkombinator: EntityHybridInput fuehrt sein Suchfeld eine Ebene tiefer in .search-container.
   Steht nach der Hover- und der Offen-Regel, weil beide dieselbe Spezifitaet haben und der
   Fehlerrahmen Hover, Fokus und offene Liste ueberdauern muss (Wiki "Validierung"). */
.picker-field-group:has(.form-control.invalid) {
    border-color: var(--error-outline);
    box-shadow: 0 0 0 1px var(--error-outline);
}

/* Im Fehler-Hover bleiben die Kinder flach: .invalid:hover:not(:disabled) (0,3,0) schlaegt die
   randlose Kinder-Regel (0,2,0) und legt seinen Ring sonst um Feld UND Chevron — sichtbar als
   senkrechte Naht zwischen beiden. Der Fehlerrahmen gehoert der Gruppe, nicht den Kindern. */
.picker-field-group > .form-control.invalid:hover:not(:disabled),
.picker-field-group .dropdown-button.invalid:hover:not(:disabled),
.picker-field-group .btn-entity-picker.invalid:hover:not(:disabled) {
    box-shadow: none;
}

/* Dunkel zeichnet den Fokusring als box-shadow an der Gruppe und wuerde den Fehlerring sonst
   ersetzen statt ergaenzen -- beide gehoeren in EINE Liste (Vorbild .invalid:focus weiter unten). */
:root[data-theme='dark'] .picker-field-group:has(.form-control.invalid):has(> .form-control:focus-visible),
:root[data-theme='dark'] .picker-field-group:has(.form-control.invalid):has(.search-container input:focus-visible) {
    box-shadow: 0 0 0 1px var(--error-outline), var(--focus-shadow);
}

/* Listenversatz: die Liste beginnt unterhalb der Feldunterkante, nicht auf ihr. Als Aussenabstand,
   nicht als top: Popper rechnet top/transform selbst und klappt die Liste bei wenig Platz nach oben.
   Ein erzwungenes top nagelt sie nach unten fest -- in einem Dialog am unteren Bildschirmrand liegen
   die letzten Eintraege dann ausserhalb des sichtbaren Bereichs und sind nicht anklickbar.
   Die Richtung haengt darum an Poppers gemeldeter Platzierung; !important, weil Bootstrap
   margin: 0 inline auf das Menue schreibt.
   Die Breitenschranke ist Pflicht: unterhalb 576px fuehren die Picker ihre Liste als Vollbild-Ebene
   ohne Abstand zum Feld. */
@media (min-width: 577px) {
    .picker-field-group .dropdown-menu.show[data-popper-placement^="bottom"] {
        margin-top: 4px !important;
    }

    .picker-field-group .dropdown-menu.show[data-popper-placement^="top"] {
        margin-bottom: 4px !important;
    }
}

/* Zeilen der Picker-Liste. Zentral, nicht im Komponenten-CSS: EntityPicker und
   EntityPickerBase rendern dieselbe Zeile, und Scoped CSS traegt je Komponente einen
   eigenen Scope -- eine Regel in einer der beiden liesse die andere ungestylt. */
.picker-row {
    container-type: inline-size;
    padding: 0.625rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

/* Zeile ohne eigene Flaeche auf einer angehobenen Ebene: hell Neutral 100 wie jeder andere Hover,
   dunkel verdunkelt der Hover statt aufzuhellen, damit die Ebene die hellste Flaeche bleibt
   (Wiki 969 Prinzip 6/7). */
.picker-row:hover {
    background: var(--surface-hover-flat);
}

:root[data-theme='dark'] .picker-row:hover {
    background: color-mix(in srgb, #000000 8%, var(--surface-raised));
}

/* Tastatur-Navigation ueber aria-activedescendant: der DOM-Fokus bleibt im Suchfeld, darum kann
   keine :focus-visible-Regel greifen. Die Zeile braucht eine eigene, sichtbare Markierung der
   aktiven Option; Farbe folgt der Ausgewaehlt-Rolle (nie Primaer/Status, Wiki 882), nicht der
   Fokus-Rolle. */
.picker-row.focused {
    background: var(--surface-hover-flat);
    outline: 2px solid var(--text-teal);
    outline-offset: -2px;
}

:root[data-theme='dark'] .picker-row.focused {
    background: color-mix(in srgb, #000000 8%, var(--surface-raised));
}

.picker-row.selected {
    box-shadow: inset 3px 0 0 0 var(--text-teal);
}



.input-wrapper {
    border: 1px solid var(--border-control);
    border-radius: var(--bs-border-radius);
    background: var(--surface-card);
    display: flex;
    align-items: center;
    width: 400px;
}

.input-wrapper:focus-within {
    color: var(--text);
    background-color: var(--surface-card);
    border-color: var(--border-control);
}

.input-wrapper-element {
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: none;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
}

.input-wrapper .form-floating>.form-control {
    height: 3.5rem;
    min-height: 3.5rem;
}

.input-group-text {
    background: transparent;
    border: none;
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.input-group-text i {
    font-size: 1em;
    color: var(--text-meta);
}

.gap-3 {
    gap: 1rem;
}

.gap-2 {
    gap: 0.75rem;
}

.gap-1 {
    gap: 0.5rem;
}

.mt-6 {
    margin-top: 4rem;
}

.search-dialog {
    position: relative;
    top: 3.3rem;
    right: 11.8rem;
}

/* Frei schwebendes Panel ueber dem Seiteninhalt -- angehobene Ebene wie Menue/Popover, nicht die
   Kartenflaeche darunter. */
.search-dialog-wrapper {
    position: absolute;
    background-color: var(--surface-raised);
    z-index: 1;
    padding-top: 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 5px;
    width: 300px;
    height: 150px;
    overflow: auto;
}

.search-dialog-options {
    display: flex;
    flex-direction: column;
}

.border-gray {
    border: 1px solid var(--border);
}

.max-content {
    width: max-content;
}

.p-6 {
    padding: 10px;
}

.filter-dialog {
    position: relative;
    top: 3.3rem;
    right: 3.8rem;
}

.filter-dialog-wrapper {
    position: absolute;
    background-color: var(--surface-raised);
    z-index: 1;
    padding-top: 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 5px 15px 10px 10px;
    width: max-content;
    height: max-content;
    overflow: auto;
}

.filter-dialog-options {
    padding-left: 22px;
    padding-bottom: 15px;
}

.filterKind-text {
    margin-left: 20px;
    height: calc(1.5em + 0.75rem + 2px);
}

.fw-bold {
    font-weight: 700;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-grab {
    cursor: grab;
}

.cursor-default {
    cursor: default !important;
}

/* Sperr-Cursor für deaktivierte Standard-Controls (Bootstrap setzt ihn dort nicht), dazu die
   Deaktiviert-Rollen fuer Flaeche/Rahmen/Text -- Bootstrap daempft Feld und Kontrollkaestchen sonst
   nur per globaler Opacity statt eigener Rollen. */
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled,
.form-check-input:disabled~label,
.form-check:has(.form-check-input:disabled) .form-check-label {
    cursor: not-allowed;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--surface-disabled);
    border-color: var(--border-disabled);
    color: var(--text-disabled);
}

.form-check-input:disabled {
    background-color: var(--surface-disabled);
    border-color: var(--border-disabled);
    opacity: 1;
}

.form-check-input:disabled~label,
.form-check:has(.form-check-input:disabled) .form-check-label {
    color: var(--text-disabled);
    opacity: 1;
}

/* ============================================================
   Toggle-/Auswahl-Buttons (btn-check + Label) — geteilter Style.
   Farb-/Zustands-Schema zentral, Layout über die Modifier --segment/--tile/--pill.
   Lädt nach Bootstrap: gleiche Spezifität genügt, kein !important nötig.
   ============================================================ */

/* Container einer btn-check-Gruppe MUSS positioniert sein.
   Bootstraps .btn-check ist `position: absolute` ohne Offsets — der Input wird also an seiner
   statischen Position gehalten, aber sein Containing Block ist der nächste positionierte Vorfahre.
   Bootstrap liefert den mit `.btn-group` (position: relative) selbst mit; unsere Gruppen sind
   `d-flex`/`fieldset`/`span` und damit unpositioniert. Dann ist der Containing Block das
   Initial Containing Block (Viewport): der Input scrollt NICHT mit dem Seiteninhalt mit und ragt,
   sobald seine Gruppe weit unten in der Seite liegt, unter das Dokument hinaus. Das erzeugt eine
   Dokument-Scrollhöhe aus reinem Leerraum (aufgetreten auf der Aufgaben-Detailseite, sobald das
   Merge-Konflikt-Panel den Formularinhalt nach unten schiebt: mehrere hundert Pixel leerer
   Scrollbereich unter der Seite). Bewusst am direkten Eltern-Knoten und nicht am Input selbst:
   `position: static` würde den Input zum Flex-Item machen und die `gap`-Abstände jeder
   Toggle-Gruppe verändern. */
div:has(> .btn-check),
span:has(> .btn-check),
fieldset:has(.btn-check) {
    position: relative;
}

/* Legende der Fieldset-Variante: Bootstraps Reboot vergroessert <legend> auf ~1.5rem — hier soll
   sie wie ein normales Feld-Label wirken, nicht wie eine Ueberschrift. Der Reboot setzt zusaetzlich
   float und volle Breite; in einem Flex-Container wird der Float ignoriert und die Legende wird
   zum Flex-Element, das die Schalter daneben zusammendrueckt. */
.select-toggle-legend {
    float: none;
    width: auto;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}

/* Aktiv, nicht gewählt */
.select-toggle {
    background-color: var(--surface-card);
    border: 1px solid var(--border-control);
    color: var(--bs-btn-color);
    transition: none;
}

/* Aktiv, nicht gewählt, hover — neutral (Wiki "Auswahl-Komponenten" 880): --accent codiert hier
   bereits den Auswahlzustand, ein akzentfarbener Hover waere von "ausgewaehlt" nicht zu
   unterscheiden. Background explizit, weil Bootstraps btn-check-Hover-Regel ihn sonst auf
   transparent zuruecksetzt. */
.btn-check:not(:disabled):not(:checked)+.select-toggle:hover {
    background-color: var(--surface-hover-flat);
    border-color: var(--border-control-hover);
}

/* Tastatur-Fokus liegt auf dem geclippten Radio-Input; die Ring-Darstellung gehoert deshalb an
   das sichtbare Label. Hell die outline-Darstellung, dunkel der Zweifarb-Schatten — beide stehen
   explizit hier, weil --focus-shadow hell bewusst unsichtbar ist. Der Rahmen bleibt im Fokus
   neutral: die Akzentfarbe codiert hier den Auswahlzustand, ein Akzent-Rahmen im Fokus waere von
   "ausgewaehlt" nicht zu unterscheiden. Eine explizite border-color ist noetig, weil Bootstrap fuer
   .btn den Hover-Rahmen auf transparent setzt. */
.btn-check:focus-visible+.select-toggle {
    border-color: var(--border-control);
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

:root[data-theme='dark'] .btn-check:focus-visible+.select-toggle {
    outline: none;
    box-shadow: var(--focus-shadow);
}

/* Ausgewaehlt und fokussiert zugleich: der Auswahlrahmen bleibt, der Ring kommt dazu. */
.btn-check:checked:focus-visible+.select-toggle {
    border-color: var(--accent);
}

/* Aktiv, gewählt (inkl. gewählt-hover). Schriftfarbe wie BadgeKategorial:
   Fliesstext-Rolle auf getönter Fläche. */
.btn-check:checked+.select-toggle {
    background-color: var(--toggle-selected-bg);
    border-color: var(--accent);
    color: var(--text);
}

/* Disabled, nicht gewählt — pointer-events:auto reaktiviert den Sperr-Cursor auf dem Label;
   opacity:1 statt Bootstraps Disabled-Dimming (0.65), damit die Zustandsfarben exakt greifen. */
.btn-check:disabled+.select-toggle {
    pointer-events: auto;
    cursor: not-allowed;
    opacity: 1;
    background-color: var(--surface-disabled);
    border-color: var(--border-disabled);
    color: var(--text-disabled);
}

/* Disabled, gewählt */
.btn-check:checked:disabled+.select-toggle {
    background-color: var(--toggle-selected-disabled-bg);
    border-color: var(--border-disabled);
    color: var(--text-disabled);
}

/* --- Layout-Modifier: Segment (zusammenhängende Leiste) --- */
.select-toggle--segment {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    margin-right: -1px;
    margin-bottom: -1px;
}

.select-toggle--segment:first-of-type {
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.select-toggle--segment:last-of-type {
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

/* Border-Überlappung: gewählter/gehoverter/fokussierter Button nach vorne holen,
   damit Border bzw. Fokus-Ring nicht unter den Nachbarn liegt */
.btn-check:checked+.select-toggle--segment,
.btn-check:not(:disabled)+.select-toggle--segment:hover,
.btn-check:focus-visible+.select-toggle--segment {
    position: relative;
    z-index: 1;
}

/* Formmerkmal der Segment-Variante: 3-px-Balken an der Unterkante als flaechenlose Marke auf dem
   Fond (Wiki "Auswahl-Komponenten"). Ohne ihn haengt der Auswahlzustand allein an der Farbe. */
.btn-check:checked+.select-toggle--segment {
    box-shadow: inset 0 -3px 0 var(--text-teal);
}

/* Im Fokus tritt der Ring vor die Marke, statt sie zu ersetzen. */
:root[data-theme='dark'] .btn-check:checked:focus-visible+.select-toggle--segment {
    box-shadow: var(--focus-shadow), inset 0 -3px 0 var(--text-teal);
}

/* --- Layout-Modifier: Tile (kompakte, abgerundete Zellen) --- */
.select-toggle--tile {
    border-radius: var(--bs-border-radius-lg);
    /* = Bootstrap .rounded-3 */
    padding: 0.5rem;
}

/* --- Layout-Modifier: Pill (breitere Wort-Buttons, gleicher Radius wie Tile) --- */
.select-toggle--pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--bs-border-radius-lg);
    /* = Bootstrap .rounded-3 */
    padding: 0.625rem 1rem;
}

/* Vorangestelltes Haekchen als nicht-farbliche Auswahlmarke (Wiki "Auswahl-Komponenten",
   Auswahl-Chips). Ohne sie unterscheidet nur der Farbton des Fonds die Zustaende -- das
   Luminanz-Delta betraegt hell 1,35 : 1 (SC 1.4.1). Als mask-image, damit die Marke ueber
   currentColor der Textrolle folgt und kein Farbwert im Selektor steht. */
.btn-check:checked+.select-toggle--pill::before {
    content: '';
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("/_content/Horizon.AppFrame.Client.Core/Images/HorizonIcons/Oft/Check.svg") center / contain no-repeat;
    mask: url("/_content/Horizon.AppFrame.Client.Core/Images/HorizonIcons/Oft/Check.svg") center / contain no-repeat;
}

/* Fehlerzustand des Bauteils: Rahmen in --error-outline plus Ring derselben Rolle aussen am Rahmen,
   damit die Markierung zwei Pixel stark liest, ohne die Inhaltsbox zu verkleinern. Die Zustandsselektoren
   stehen mit, weil die Fehler-Markierung Hover und Fokus ueberdauern muss (Wiki "Validierung": "Im
   Fehlerfall bleibt der Fehler-Rahmen auch bei Fokus und Hover bestehen") — ohne sie schiebe der
   Akzentring der Hover-Regel den Fehlerring beiseite. Keine border-Kurzform: die wuerde die Farbe
   auf den Default zuruecksetzen. */
.invalid,
.invalid:hover:not(:disabled),
.invalid:focus,
.invalid:focus-visible {
    border-color: var(--error-outline) !important;
    box-shadow: 0 0 0 1px var(--error-outline);
}

/* Der Fokusring des dunklen Modus ist selbst ein box-shadow und muss neben dem Fehlerring stehen
   bleiben, nicht an seine Stelle treten. */
:root[data-theme='dark'] .invalid:focus,
:root[data-theme='dark'] .invalid:focus-visible {
    box-shadow: 0 0 0 1px var(--error-outline), var(--focus-shadow);
}

/* Hover und Fokus zugleich: die Feld-Regel des dunklen Modus traegt hier den Akzentring und schlaegt
   mit 0,5,0 beide Regeln oben. Der Fehlerring braucht denselben Zaehlwert, sonst kippt die
   Markierung eines fehlerhaften Feldes beim Ueberfahren auf die Akzentfarbe — der Fokus-Ring
   traegt nie eine Statusfarbe, und die Fehler-Markierung ueberdauert Hover und Fokus. */
:root[data-theme='dark'] .invalid:hover:focus,
:root[data-theme='dark'] .invalid:hover:focus-visible {
    box-shadow: 0 0 0 1px var(--error-outline), var(--focus-shadow);
}

/* Icon und Text als Einheit in der Fehler-Textrolle (Wiki "Validierung"); currentColor traegt die
   Farbe ins Icon. */
.validation-message {
    color: var(--error-text);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-large {
    padding: 8px 12px;
    font-size: 0.75em;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.badge-medium {
    padding: 6px 8px;
    font-size: 0.75em;
    border-radius: 14px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    margin-right: 6px
}

.badge-small {
    padding: 4px 6px 4px 6px;
    font-size: 0.55em;
    border-radius: 9px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    margin-right: 4px
}

/* Fond-Regel statt Vollfuellung (Wiki "Badges" 765: vollflaechig gefuellte Badges mit hellem Text
   sind nicht vorgesehen). */
.badge-primary {
    background-color: color-mix(in srgb, var(--accent) 28%, var(--surface-card));
    color: var(--text);
}

.badge-gray {
    background-color: var(--surface-hover-flat);
    color: var(--bs-body-color);
}

.badge-warn {
    background-color: var(--surface-card);
    color: var(--bs-body-color);
    border: 1px solid var(--warn-600)
}

.badge-outline {
    background-color: var(--surface-card);
    color: var(--text);
    border: 1px solid var(--border-control);
}

.badge-medium-col {
    min-width: 3rem;
}

.overflow_ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    /* or inline-block */
}

.border-primary {
    border-color: var(--accent);
}

.filter-primary {
    content: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20viewBox%3D%220%200%2016%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4%206L2.07008%207.94466C1.99686%208.01845%201.87814%208.01845%201.80492%207.94466L1%207.1336M4%2011L2.07008%2012.9447C1.99686%2013.0184%201.87814%2013.0184%201.80492%2012.9447L1%2012.1336M6.25%201.75H14.5M6.25%207H14.5M6.25%2012.25H14.5M4%201L2.07008%202.94466C1.99686%203.01845%201.87814%203.01845%201.80492%202.94466L1%202.1336%22%20stroke%3D%22%2368727D%22%20stroke-width%3D%221.67%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
    filter: brightness(0) saturate(100%) invert(38%) sepia(88%) saturate(1036%) hue-rotate(148deg) brightness(98%) contrast(102%);
    height: 15px;
    width: 22px;
}

/* Zeigt an, dass gerade ein Filter aktiv ist — Dauerzustand (Toggled), kein fluechtiges Active.
   Rahmen auf Akzent, Label neutral wie jedes Sekundaer-Label. */
.btn.active-filter {
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--text);
}

/* Geoeffnetes Dropdown eines Icon-Buttons: Icon-Farbe wechselt auf den Arbeitston wie beim
   Zustands-Button (Wiki: Toggled-Icon Primary 600/400), Flaeche bleibt die Sekundaer-Flaeche. */
.btn.show {
    --bs-btn-bg: var(--surface-card);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--text-teal);
}


.btn.show .filter-primary {
    filter: brightness(0) invert(1);
}

.w-35 {
    width: 35px;
}

.details-box {
    transition: 0.2s background linear;
    border-radius: 1rem;
    border: 1px solid var(--border);

    summary,
    article {
        display: flex;
        padding: 0.75rem 1rem;
    }

    summary {
        justify-content: space-between;
        align-items: center;
    }

    /* Aufklapp-Pfeil als Rahmen-Dreieck (kein Icon-Element) — folgt der Textrolle wie ein Glyph. */
    summary::after {
        content: '';
        width: 0;
        height: 0;
        border-top: 10px solid var(--text);
        border-inline: 7px solid transparent;
        transition: 0.2s;
    }

    article {
        flex-direction: column;
        line-height: 2;
    }

}

.details-box[open]>summary::after {
    transform: rotate(-180deg);
}

.grid-two-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.grid-five-columns {
    display: grid;
    grid-template-columns: 1fr repeat(4, 7.5rem);
    max-height: 37.5rem;
    overflow-y: auto;

    span,
    label {
        border-bottom: 1px solid var(--border);
        align-content: center;
    }

}

.scrollable-ul {
    height: 16rem;
    overflow-y: auto;
    padding-left: 0;
    list-style: none;

    >li {
        padding: .25rem .1rem .25rem 1.5rem;
        border-bottom: 1px solid var(--border);
    }

}

.border-with-radius {
    border-radius: var(--bs-border-radius);
    border-radius: var(--bs-border-radius);
    border: solid 1px var(--border);
}

@media (prefers-reduced-motion: reduce) {
    .rotate {
        transition: none;
    }
}

.rotate svg {
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
}

.rotate.rotated svg {
    transform: rotate(180deg);
}

.primary-color {
    color: var(--text-teal) !important;
}

.secondary-color {
    color: var(--text-meta) !important;
}

/* Auf dem getoenten Fond einer Auswahl-Karte traegt das Etikett genau eine Textrolle (Wiki
   "Auswahl-Komponenten"): Meta-Text ist dort nicht vorgesehen und liest auf beiden Fond-Toenen
   schwaecher als die Fliesstext-Rolle. !important, weil .secondary-color selbst !important traegt. */
.option-card .secondary-color {
    color: var(--text) !important;
}

/* .secondary-color faerbt ihren gesamten Teilbaum. Der Titel einer Karte ist aber ihr tragender
   Inhalt und liegt damit blasser als er sein darf — er steht in der Fliesstext-Rolle, waehrend
   Beschreibung und Zusatzangaben den Sekundaerton behalten (gleiche Begruendung wie bei
   .dropdown-menu .list-group). !important, weil .secondary-color selbst !important traegt. */
.secondary-color .card-title,
.card-title.secondary-color {
    color: var(--text) !important;
}

/* Derselbe Grund wie beim Karten-Titel: der Leerzustand ist der tragende Inhalt seiner Flaeche,
   nicht eine Zusatzangabe daneben — sein Text und sein Icon stehen in der Fliesstext-Rolle. In
   einem .secondary-color-Teilbaum (z.B. der Schnellerfassungs-Dialog) lag er sonst im Meta-Ton und
   damit blasser als die Liste, die er ersetzt. !important, weil .secondary-color selbst
   !important traegt. */
.secondary-color .kein-ergebnis-ansicht {
    color: var(--text) !important;
}

.width-fit-content {
    width: fit-content !important;
}

/* Beschriftung traegt in beiden Positionen (ruhend/angehoben) dieselbe Meta-Rolle (Wiki
   "Eingabefelder"). Bootstraps eigene .form-floating>label-Farbe loest hell nicht auf --text-meta
   auf -- nur die Dunkel-Zuordnung von --bs-secondary-color trifft zufaellig die richtige Rolle. */
.form-floating>label {
    color: var(--text-meta);
    z-index: 10;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    height: fit-content;

    /* Aenderungen, damit Tooltips funktionieren */
    pointer-events: auto !important;
    overflow: initial !important;

    /* Label soll beim Ziehen mit der Maus nicht markierbar sein */
    user-select: none;
}

/* Das Feldrecht-Icon (FeldRechtIcon) sitzt absolut am rechten Feldrand. In schmalen
   Feldern reicht das hochgeschobene Floating-Label (z-index:10, oben mit
   pointer-events:auto) bis unter das Icon und faengt dessen Hover ab, sodass der
   Rechte-Tooltip (title) nicht erscheint. Ein hoeherer z-index holt das Icon nach
   vorne, damit der Hover es erreicht. */
.feld-recht-icon {
    z-index: 11;
}

.form-floating>input {
    color: var(--text);
}

/* Bootstrap legt hinter das angehobene Textarea-Label ein eigenes Kaestchen (label::after) und
   faerbt es mit --bs-body-bg -- das ist die Seitenflaeche, nicht die Feldflaeche. Auf dem Feld sitzt
   dadurch ein abgesetzter Block hinter der Beschriftung. Das Kaestchen liegt IM Feld und traegt
   deshalb die Feldflaeche. */
.form-floating>textarea:focus~label::after,
.form-floating>textarea:not(:placeholder-shown)~label::after {
    background-color: var(--surface-card);
}

/* Eigene Regel, nicht in die Liste oben: :-moz-placeholder kennt nur Firefox, und ein ungueltiger
   Selektor in einer Komma-Liste verwirft die ganze Regel. Bootstrap trennt sie aus demselben Grund. */
.form-floating>textarea:not(:-moz-placeholder)~label::after {
    background-color: var(--surface-card);
}

.form-floating>textarea:disabled~label::after {
    background-color: var(--surface-disabled);
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-control-plaintext~label,
.form-floating>.form-select~label {
    font-size: 0.85rem;
}

.flex-center {
    display: flex !important;
    align-items: center !important;
}

.flex-column-space-between {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.form-floating .dropdown-button {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

.h-form-floating {
    height: 58px !important;
}

/* Der gestrichelte Rahmen ist das Bedeutungsmerkmal (Wiki "Eingabefelder", Upload-Zone); Drag-Over
   wechselt nur die Rahmenfarbe auf --accent, ohne die Flaeche zu toenen -- ein getoenter Fond
   traegt dort nur 1,35 : 1. Keine Aufrufstelle im Repo setzt aktuell eine Drag-Over-Klasse auf
   diesen Selektor; die Regel steht bereit, sobald eine gesetzt wird. */
.file-drop-zone {
    display: flex;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--border-control);
    background: var(--surface-card);
    border-radius: 0.9rem;
    align-items: center;
    align-content: center;
    padding: 1em;
}

.file-drop-zone.dragging,
.file-drop-zone.drag-over {
    border-color: var(--accent);
}

.image-content {
    flex: 1;
    padding: 1.25rem;
}

.image-button {
    padding: 0.9rem;
}

/* Das wirkt aktuell nur in den options des Bootstrap-Dropdowns. Standard-Select-Options sind leider nicht betroffen. */
select option {
    color: var(--text) !important;
    line-height: 1.25 !important;
    padding: 0.4rem !important;
}

/* Das wirkt aktuell nur in den options des Bootstrap-Dropdowns. Standard-Select-Options sind leider nicht betroffen. */
select option:hover {
    background-color: var(--surface-hover-flat) !important;
    border-radius: 0.25rem;
    color: var(--text) !important;
}

/* --bs-white-rgb ist ein Zahlen-Tripel fuer rgba() und als Farbwert ungueltig; die Deklaration blieb
   damit wirkungslos. Die Rolle ist die Kartenflaeche. */
.sticky-top {
    background: var(--surface-card);
}

.btn-icon-small {
    --bs-btn-padding-x: 0.5rem;
    padding: var(--bs-btn-padding-x);
}

.btn-icon-middle {
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 0.6875rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

.field-group {
    background: var(--surface-card);
    border-radius: 6px;
    padding: 1rem;
    border-left: 3px solid var(--accent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Gefuellter Kreis; die "i"-Form entsteht aus zwei Flaechen in der Kartenfarbe, keine Opacity.
   Ein deaktivierter Zustand liefe ueber die Deaktiviert-Rollen, nicht ueber dieses Icon. Fuellton
   wie Akzentrand und Textlink der Info-Box (--text-teal) -- Primary 500 traegt die weisse Glyphe
   nur mit 3,02 : 1. */
.info-icon {
    position: relative;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--text-teal);
}

/* Ausgesparte Glyphe: hell die weisse Kartenflaeche, dunkel Neutral 900. Nicht --surface-card fuer
   beide Modi — dunkel waere die Aussparung dann der Kartenton (5,80 : 1) statt der in Wiki 981
   festgelegten 8,92 : 1, und die Glyphe liest sich matt statt ausgestanzt. */
.info-icon::before,
.info-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    background: var(--surface-card);
    transform: translateX(-50%);
}

:root[data-theme='dark'] .info-icon::before,
:root[data-theme='dark'] .info-icon::after {
    background: var(--neutral-900);
}

/* Masse als Anteil des 18-px-Kreises nach der Vorlage in Wiki 981: Rand oben und unten je 22 %,
   Punkt 11 %, Luecke 11 %, Balken 33 %. Eine groessere Glyphe fuellt den Kreis aus, statt in ihm
   zu sitzen — dann liest sich das i wie ein Ausrufezeichen. */
.info-icon::before {
    top: 0.25rem;
    width: 0.125rem;
    height: 0.125rem;
    border-radius: 50%;
}

.info-icon::after {
    top: 0.5rem;
    width: 0.125rem;
    height: 0.375rem;
    border-radius: 1px;
}

.dashed-grey-area {
    border: 2px dashed var(--border);
    border-radius: 6px;
    padding: 1em;
}

.font-size-smaller {
    font-size: 0.95em;
}

/* Wortmarke und Bildmarke des Logos tragen zwei verschiedene Rollen: der Schriftzug folgt der
   Textrolle (hell fast schwarz, dunkel fast weiss) ueber currentColor, die Bildmarke die CI-Farbe.
   Beides steckt in EINER SVG-Datei, deshalb traegt allein der Marken-Pfad eine Klasse.
   Die sichtbaren Kanten des Wuerfels sind seine 2 px starke Kontur, nicht seine Fuellung — ohne
   stroke bleibt die Marke in der Textfarbe stehen, egal was fill sagt. */
.kufer-logo-marke {
    fill: var(--accent);
    stroke: var(--accent);
}

.white-background {
    background: var(--surface-card);
}

.file-input-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.card-icon {
    align-items: center;
    display: flex;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
}

.disabled-input-background {
    background-color: var(--surface-disabled);
}

/* Datenzeilen tragen den Fliesstext, nicht den Meta-Text: die uebrigen Tabellen (DwDataGrid)
   fuehren ihre Zellen ebenfalls in --text und reservieren --text-meta fuer Kopfzeile und
   Nebenangaben. Mit dem Meta-Ton standen die Eintraege des TreeGrids eine Stufe blasser als
   dieselben Daten in einer Liste. */
.grid-row {
    border: 1px solid var(--border);
    color: var(--text);
}

/* Kopfzeile bleibt im Meta-Ton — dort ist er die richtige Rolle. */
.grid-header .grid-row {
    color: var(--text-meta);
}

.grid-cell {
    padding: 0.75rem 1.1rem;
}

.grid-table {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-card);
}

/* Kopfzeile bleibt auf der Kartenflaeche des umschliessenden Grids - keine eigene
   Flaechenstufe, die Trennung zum Zeilenbereich leistet die Kante. */
.grid-header {
    color: var(--text-meta);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border);
}

.grid-header-cell {
    color: var(--text-meta);
    padding: 0.85rem 1.1rem;
    font-weight: 400;
    font-size: 1.1rem;
}

/* Gemeinsame Pill-Anatomie der Designsystem-Badges (Wiki "Badges"): BadgeKategorial (V1),
   BadgeStatus (V2) und BadgeNeutral (V3) teilen sich die Box; die jeweilige .razor.css setzt nur
   noch die Varianten-Unterschiede (Rahmenfarbe, Fuellung, Textfarbe, Icon). Rahmenfarbe kommt aus
   der Variante (hier transparent als Platzhalter). */
.kufer-one-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 2rem;
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    /* Badges sind nicht interaktiv (Wiki "Badges"): kein Text-/Klick-Cursor, auch nicht ueber dem
       Textlabel. In einem klickbaren Kontext traegt die umgebende Komponente die Interaktion. */
    cursor: default;
}

.progress-bar {
    width: 100%;
    height: 0.375rem;
    background-color: var(--border);
    border-radius: 10px;
    overflow: hidden;
    padding-left: 0 !important;
}

/* Erfolgsfarbe hat kein Rollen-Token; Zweistufen-Regel direkt ueber die Skala: hell Hauptfarbe
   600, dunkel Stufe 300. */
.progress-bar-fill {
    height: 100%;
    background-color: var(--success-600);
    border-radius: 10px;
    transition: width 0.3s ease-in-out;
}

:root[data-theme='dark'] .progress-bar-fill {
    background-color: var(--success-300);
}

/* Zusatzangaben und Untertitel tragen die Meta-Textrolle statt einer globalen Opacity: Opacity
   dimmt den ganzen Teilbaum mit — Rahmen und Icons eingeschlossen — und ergibt je Untergrund
   einen anderen Kontrast. Der Klassenname stammt aus der Opacity-Zeit. */
.opacity-lighter {
    color: var(--text-meta) !important;
}

.border-top-light-gray {
    border-top: 1px solid var(--border);
}

.border-bottom-light-gray {
    border-bottom: 1px solid var(--border);
}

.border-right-light-gray {
    border-right: 1px solid var(--border);
}

.border-bottom-primary {
    border-bottom: 2px var(--bs-border-style) var(--accent);
}

.progressbar-positioning {
    margin-left: auto;
    max-width: 23rem;
    width: 100%;
}

.border-danger {
    border: 1px solid var(--error-outline);
}

/* Warnfarbe hat kein Rollen-Token; Zweistufen-Regel direkt ueber die Skala: hell Hauptfarbe 500
   (Warning-Ausnahme), dunkel Stufe 300. */
.border-warning {
    border: 1px solid var(--warn-500);
}

.border-warning-left {
    border-left: 3px solid var(--warn-500) !important;
}

:root[data-theme='dark'] .border-warning {
    border-color: var(--warn-300);
}

:root[data-theme='dark'] .border-warning-left {
    border-left-color: var(--warn-300) !important;
}

.border-top {
    border-top: 1px solid var(--border);
}

.dropdown-menu {
    box-shadow: var(--dropdown-box-shadow) !important;
}

.scroll-box {
    height: 20rem;
    overflow-y: auto;
}

/* Listen-Wrapper mit Max-Hoehe + Scroll fuer dynamische Layout-Feld-Hoehen.
   Die Stufen Klein/Mittel/Gross korrespondieren mit dem LayoutFeldHoehe-Enum
   und werden ueber LayoutFeldHoeheHelper.GetListScrollCssClass gemappt. */
.horizon-list-scroll-klein {
    max-height: 200px;
    overflow-y: auto;
}

.horizon-list-scroll-mittel {
    max-height: 400px;
    overflow-y: auto;
}

.horizon-list-scroll-gross {
    max-height: 600px;
    overflow-y: auto;
}

.toggle-help {
    cursor: help;
    position: relative;
}

/* Mit Hilfetext ist der Wrapper ein eigener Tab-Stopp (role="button") und zeigt den globalen
   Fokusring; hier nur der Radius, damit der Ring der Icon-Flaeche folgt. */
.toggle-help:focus-visible {
    border-radius: 4px;
}

.tooltip-content,
.tooltip-content[hidden] {
    --tx: -50%;
    --scale: 1;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 50%;
    /* --shift-x ist der Randkorrektur-Kanal fuer die Positionierung per JS (positionTooltipAbsolute).
       Bewusst als eigene Verschiebung HINTER der Zentrierung: schreibt das JS statt dessen das ganze
       transform neu, verliert es --tx/--scale und verschiebt um deren Differenz daneben. */
    transform: scale(var(--scale)) translateX(var(--tx)) translateX(var(--shift-x, 0px));
    background: var(--surface-raised);
    /* Fliesstext-Rolle, nicht Meta: der Hilfetext ist der Inhalt des Tooltips, und die Meta-Stufe
       traegt auf der angehobenen Ebene nur 4,55 : 1 bei 0,75rem Schriftgroesse. */
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: normal;
    font-style: normal;
    min-width: 18rem;
    width: 18rem;
    max-width: calc(100% - 2rem);
    white-space: normal;
    word-break: break-word;
    text-align: left;
    z-index: 200;
    margin-top: 0.75rem;
    box-shadow: var(--tooltip-box-shadow);
}

/* Schatten bleibt dem hellen Modus vorbehalten (Wiki 969 Prinzip 8) — die angehobene Ebene traegt
   dunkel ihre Tiefe selbst ueber die Flaechenabstufung.

   Die Abstufung allein genuegt hier aber nicht: der Tooltip liegt in der Regel ueber einem Feld auf
   der Karte, und die Ebene traegt gegen die Karte nur 1,27 : 1 — ohne Schatten stand er praktisch
   auf gleicher Flaeche. Prinzip 8 sieht fuer genau diesen Fall ("gleiche Flaeche auf gleicher
   Flaeche") die 1-px-Kante in Neutral 500 vor; sie traegt 3,12 : 1 gegen die Ebene. */
:root[data-theme='dark'] .tooltip-content {
    box-shadow: none;
    border: 1px solid var(--neutral-500);
}

/* Der Sprechblasen-Pfeil (nur bei ShowArrow bzw. am InfoIcon) haengt als Dreieck aus Rahmen am
   Tooltip und kann selbst keine Kante tragen. Ein zweites, um einen Pixel groesseres Dreieck in der
   Kantenfarbe liegt darunter und setzt die Umrisslinie um die Spitze fort. */
:root[data-theme='dark'] .toggle-help .tooltip-content::before {
    content: '';
    position: absolute;
    bottom: var(--arrow-bottom, 100%);
    top: var(--arrow-top, auto);
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 15px solid transparent;
    border-bottom-color: var(--arrow-color-bottom, var(--neutral-500));
    border-top-color: var(--arrow-color-top, transparent);
}

.toggle-help .tooltip-content::after {
    content: '';
    position: absolute;
    bottom: var(--arrow-bottom, 100%);
    top: var(--arrow-top, auto);
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 14px solid transparent;
    border-bottom-color: var(--arrow-color-bottom, var(--surface-raised));
    border-top-color: var(--arrow-color-top, transparent);
}

.tooltip-content:not([hidden]),
.toggle-help:hover .tooltip-content,
.toggle-help:focus .tooltip-content,
.toggle-help:focus-within .tooltip-content,
.toggle-help[aria-expanded="true"] .tooltip-content,
.tooltip-content:hover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.tooltip-content.tooltip-positioning {
    visibility: hidden !important;
    opacity: 0 !important;
}

.toggle-help.tooltip-suppressed .tooltip-content,
.toggle-help.tooltip-suppressed:hover .tooltip-content,
.toggle-help.tooltip-suppressed:focus .tooltip-content,
.toggle-help.tooltip-suppressed:focus-within .tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-check-label,
.form-label,
.form-control+label {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.form-floating>.form-control:not(:placeholder-shown)~label .tooltip-content,
.form-floating>.form-select~label .tooltip-content {
    --tx: -42.5%;
    --scale: 1.176;
    margin-top: 1.75rem;
}

/* Sonst haben Label von anderen Inputs ggf. Vorrang und liegen im Tooltip */
.form-floating>label:has(.toggle-help) {
    z-index: 100;
}

/* Reicht allein nicht, wenn das NACHBARFELD ebenfalls ein Info-Icon hat: dann stehen beide Label auf
   100 und die DOM-Reihenfolge entscheidet — das untere gewinnt und scheint durch das Tooltip des
   oberen Feldes. Der z-index 200 des Tooltips hilft nicht, weil er im Stacking-Context des Labels
   gefangen ist. Deshalb hebt das Label sich an, solange sein eigenes Tooltip offen ist. */
.form-floating>label:has(.tooltip-content:not([hidden])),
.form-floating>label:has(.toggle-help:hover),
.form-floating>label:has(.toggle-help:focus-within) {
    z-index: 300;
}

span[small] svg,
i[small] {
    width: var(--icon-small);
    height: var(--icon-small);
}

span[medium] svg,
i[medium] {
    width: var(--icon-medium);
    height: var(--icon-medium);
}

span[large] svg,
i[large] {
    width: var(--icon-large);
    height: var(--icon-large);
}

span[extralarge] svg,
i[extralarge] {
    width: var(--icon-extralarge);
    height: var(--icon-extralarge);
}

/* ========================================
           TOGGLE BUTTON GROUP
        ======================================== */
.toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toggle-btn {
    /* Umbrechen statt schrumpfen: Gruppen mit vielen Optionen (Feld- und Spaltenauswahl der eigenen
       Widgets, 15+ Eintraege) pressen die Beschriftungen sonst auf wenige Pixel und schieben den
       Dialog seitlich auf. Die Flex-Basis traegt eine lesbare Beschriftung, breiter werden duerfen
       die Knoepfe weiterhin. */
    flex: 1 1 10rem;
    padding: 0.5rem 1rem;
    background: var(--surface-card);
    border: 2px solid var(--border-control);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Neutraler Hover (Ausnahme, Wiki "Auswahl-Komponenten" 880): --accent ist hier schon der
   Auswahlrahmen, ein akzentfarbener Hover waere vom ausgewaehlten Zustand nicht zu unterscheiden. */
.toggle-btn:hover:not(:disabled) {
    border-color: var(--border-control-hover);
}

/* Der Fokus-Ring kommt aus der globalen :focus-visible-Regel — das Element ist ein echter,
   sichtbarer <button> ohne verstecktes Fokusziel, eine eigene Darstellung ist unnoetig. */

.toggle-btn.selected {
    background: var(--toggle-selected-bg);
    border-color: var(--accent);
    color: var(--text);
    font-weight: 500;
}

/* Gesperrt heisst sichtbar-aber-unwaehlbar (fehlendes Feldrecht, fachlich unmoegliche Darstellung).
   Ohne eigenen Zustand ist ein solcher Knopf von einem waehlbaren nicht zu unterscheiden. */
.toggle-btn:disabled {
    background: var(--surface-disabled);
    border-color: var(--border-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}



/* ========================================
           ROLLENVERTEILUNG WIDGET
        ======================================== */

.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.legend-item:last-child {
    border-bottom: none;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.625rem;
    flex-shrink: 0;
}

.legend-label {
    font-size: 0.8125rem;
    color: var(--text);
    flex: 1;
}

.legend-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    margin-left: 0.5rem;
}

.legend-percent {
    font-size: 0.75rem;
    color: var(--text-meta);
    min-width: 2.5rem;
    text-align: right;
}

.badge-entering {
    animation: badge-appear 300ms ease-out forwards;
}

.badge-leaving-add {
    animation: badge-fadeout-up 400ms ease-in forwards;
}

.badge-leaving-remove {
    animation: badge-fadeout-down 400ms ease-in forwards;
}

@keyframes badge-appear {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes badge-fadeout-up {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    100% {
        transform: scale(0.8) translateY(-8px);
        opacity: 0;
    }
}

@keyframes badge-fadeout-down {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    100% {
        transform: scale(0.8) translateY(8px);
        opacity: 0;
    }
}

/* Deep-Link Anchor Highlighting */
@keyframes anchorHighlightPulse {

    0%,
    57% {
        box-shadow: 0 0 0 2px var(--accent);
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.anchor-highlight {
    animation: anchorHighlightPulse 3s ease-out forwards;
    border-radius: var(--bs-border-radius, 0.375rem);
    scroll-margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .anchor-highlight {
        animation: none;
        box-shadow: 0 0 0 2px var(--accent);
    }
}

/* Radio-Option als klickbare Karte mit Rahmen, Auswahl- und Fokus-Ring (Wiki
   "Auswahl-Komponenten" 880). */
.option-card {
    border: 2px solid var(--border-control);
    border-radius: var(--bs-border-radius-lg);
    padding: 0.75rem 0.75rem 0.75rem 2rem;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

/* Neutraler Hover: --accent ist hier schon der Auswahlrahmen, ein akzentfarbener Hover waere vom
   ausgewaehlten Zustand nicht zu unterscheiden. */
.option-card:hover {
    border-color: var(--border-control-hover);
}

/* Ausgewaehlt: 28-%-Toenung von --accent als Fond (Token geteilt mit den Toggle-Buttons) plus
   Rahmen in --accent. Der Auswahlrahmen liegt zusaetzlich als innerer Ring vor, damit keine
   breitere Border die Kartengroesse verschiebt; das native Radio bleibt das Formmerkmal. Der Fond
   laeuft nicht durch den Radio-Punkt: dessen Innenflaeche kommt separat ueber --bs-form-check-bg
   (Paket "Eingabefelder") und bleibt --surface-card. */
.option-card:has(input:checked) {
    background-color: var(--toggle-selected-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Fokus liegt auf dem eingebetteten Radio-Input; der Ring gehoert um die ganze Karte, nicht nur
   um den 20-px-Punkt. Hell die outline-Darstellung, dunkel der Zweifarb-Schatten — beide stehen
   explizit hier, weil --focus-shadow hell bewusst unsichtbar ist. */
.option-card:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

:root[data-theme='dark'] .option-card:has(input:focus-visible) {
    outline: none;
    box-shadow: var(--focus-shadow);
}

/* Der Ring gehoert der Karte; der eingebettete Radio-Punkt zeichnet keinen zweiten. Die
   Dunkel-Variante braucht den Wurzel-Scope, weil die globale Dunkel-Fokus-Regel sonst staerker ist. */
.option-card input:focus-visible {
    outline: none;
    box-shadow: none;
}

:root[data-theme='dark'] .option-card input:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Fokus UND Auswahl gleichzeitig: der Auswahl-Ring darf den Fokus-Ring nicht verdraengen, beide
   Deklarationen stehen deshalb in einer gemeinsamen Regel. */
.option-card:has(input:checked):has(input:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--accent);
}

:root[data-theme='dark'] .option-card:has(input:checked):has(input:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 1px var(--accent), var(--focus-shadow);
}

/* ========================================
   SKELETON / SHIMMER LADEZUSTAND
   Allgemeine Utilities für Lade-Platzhalter.
   Container erhält .is-loading, Kind-Elemente
   erhalten .skeleton-shimmer und/oder .skeleton-text.
   Pseudo-Elemente nutzen die vererbten --skeleton-*
   CSS-Variablen direkt.
   ======================================== */

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* CSS-Variablen auf .is-loading — vererbbar an Kind-Elemente und Pseudo-Elemente.
   Der Glanzstreifen laeuft in Richtung des Modus: hell verdunkelt er die Platzhalterflaeche, dunkel
   hellt er sie auf. Ein fester Weiss-Anteil ist hell fast unsichtbar und dunkel ein greller
   Streifen. Ableitung nach der Overlay-Systematik des Farbsystems. */
.is-loading {
    --skeleton-highlight: color-mix(in srgb, #000000 8%, var(--surface-disabled));
    --skeleton-bg: linear-gradient(90deg,
            var(--surface-disabled) 25%,
            var(--skeleton-highlight) 50%,
            var(--surface-disabled) 75%);
    --skeleton-bg-size: 200% 100%;
    --skeleton-animation: skeleton-shimmer 1.5s infinite ease-in-out;
}

:root[data-theme='dark'] .is-loading {
    --skeleton-highlight: color-mix(in srgb, #FFFFFF 12%, var(--surface-disabled));
}

/* Shimmer-Effekt: nur aktiv innerhalb von .is-loading Containern */
.is-loading .skeleton-shimmer {
    background: var(--skeleton-bg);
    background-size: var(--skeleton-bg-size);
    animation: var(--skeleton-animation);
    pointer-events: none;
    user-select: none;
}

/* Text-Platzhalter: Text unsichtbar, abgerundeter Block */
.is-loading .skeleton-text {
    color: transparent !important;
    border-radius: 0.25rem;
}

/* Pseudo-Element Skeleton: ::before-Platzhalter
   Dimensionen steuerbar über CSS-Variablen auf dem Element. */
.is-loading .skeleton-before::before {
    content: '';
    display: inline-block;
    width: var(--skeleton-before-w, 10rem);
    height: var(--skeleton-before-h, 2.25rem);
    border-radius: var(--skeleton-before-radius, 0.25rem);
    background: var(--skeleton-bg);
    background-size: var(--skeleton-bg-size);
    animation: var(--skeleton-animation);
    pointer-events: none;
    user-select: none;
}

/* Pseudo-Element Skeleton: ::after-Platzhalter */
.is-loading .skeleton-after::after {
    content: '';
    display: inline-block;
    width: var(--skeleton-after-w, 8rem);
    height: var(--skeleton-after-h, 2.25rem);
    border-radius: var(--skeleton-after-radius, 0.25rem);
    background: var(--skeleton-bg);
    background-size: var(--skeleton-bg-size);
    animation: var(--skeleton-animation);
    pointer-events: none;
    user-select: none;
}

/* ::after nach rechts schieben (z. B. Action-Bar mit Links/Rechts-Buttons) */
.is-loading .skeleton-spread::after {
    margin-left: auto;
}

/* Definition-List Skeleton: Spaltenbreiten im Ladezustand fixieren */
.is-loading .skeleton-dl dt {
    min-width: var(--skeleton-dt-w, 8rem);
}

.is-loading .skeleton-dl dd {
    width: var(--skeleton-dd-w, 14rem);
    min-height: var(--skeleton-dd-min-h, 1.25em);
}

/* Tabellen-Skeleton: Nachbildung des DwDataGrid-Layouts */
.is-loading .skeleton-table {
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    overflow: hidden;
}

/* Ebenen-Regel: die Kopfzeile bekommt keine eigene Flaechenstufe, die Trennung leistet eine Kante
   (dieselbe Entscheidung wie bei .grid-header). */
.is-loading .skeleton-table-header {
    display: flex;
    background: var(--surface-card);
    padding: 0.85rem 1.1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
}

.is-loading .skeleton-table-row {
    display: flex;
    padding: 0.75rem 1.1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
}

.is-loading .skeleton-table-row:last-child {
    border-bottom: none;
}

.is-loading .skeleton-table-cell {
    flex: var(--skeleton-cell-flex, 1);
    height: 1.25em;
    border-radius: 0.25rem;
    background: var(--skeleton-bg);
    background-size: var(--skeleton-bg-size);
    animation: var(--skeleton-animation);
}

@media (prefers-reduced-motion: reduce) {

    .is-loading .skeleton-shimmer {
        animation: none;
    }

    .is-loading .skeleton-before::before,
    .is-loading .skeleton-after::after {
        animation: none;
    }

    .is-loading .skeleton-table-cell {
        animation: none;
    }
}

/* Angegebene Textfarben erfüllen geforderten Kontrast von >= 4.5 auf weißem Hintergrund */
.horizon-text-success {
    --bs-text-opacity: 1;
    color: color-mix(in srgb, var(--success-900), transparent calc((1 - var(--bs-text-opacity)) * 100%)) !important;
}

:root[data-theme='dark'] .horizon-text-success {
    color: color-mix(in srgb, var(--success-100), transparent calc((1 - var(--bs-text-opacity)) * 100%)) !important;
}

.horizon-text-warning {
    --bs-text-opacity: 1;
    color: color-mix(in srgb, var(--warn-800), transparent calc((1 - var(--bs-text-opacity)) * 100%)) !important;
}

:root[data-theme='dark'] .horizon-text-warning {
    color: color-mix(in srgb, var(--warn-100), transparent calc((1 - var(--bs-text-opacity)) * 100%)) !important;
}

.horizon-text-danger {
    --bs-text-opacity: 1;
    color: color-mix(in srgb, var(--error-800), transparent calc((1 - var(--bs-text-opacity)) * 100%)) !important;
}

:root[data-theme='dark'] .horizon-text-danger {
    color: color-mix(in srgb, var(--error-100), transparent calc((1 - var(--bs-text-opacity)) * 100%)) !important;
}

.horizon-text-primary {
    --bs-text-opacity: 1;
    color: var(--text-teal) !important;
}

/* Drag & Drop (Sortier-Listen mit Drop-Zones zwischen Items) */
.cursor-grab:hover {
    background-color: var(--surface-hover-flat);
}

.drop-zone {
    list-style: none;
    position: relative;
    min-height: 0.5rem;
}

.drop-zone-active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.25rem;
    background-color: var(--accent);
    border-radius: 0.125rem;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Ziehquelle: der Akzentring markiert sie. Kein opacity — die Quelle bleibt waehrend des Ziehens
   die Referenz, an der die Einfuegestelle beurteilt wird, und halbtransparent verlieren ihr Label
   und ihre Symbole den Textkontrast (dunkel verschwindet die Zeile fast im Untergrund). */
.dragging {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ========================================
   FIELD OPTIONS / EIGENSCHAFTEN-PANEL
   ======================================== */
.fo-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-card);
}

.fo-label-small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-meta);
    letter-spacing: 0.0188rem;
    margin-bottom: 0.25rem;
}

.fo-field-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
}

.fo-body {
    padding: 1rem;
    background: var(--surface-card);
}

.fo-section {
    margin-bottom: 1rem;
}

.fo-section:last-child {
    margin-bottom: 0;
}

.fo-section-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-meta);
    letter-spacing: 0.0188rem;
    margin-bottom: 0.25rem;
}

textarea.form-control[rows="4"] {
    min-height: 6rem;
}

textarea.form-control[rows="8"] {
    min-height: 12rem;
}

/* RichText-Inhalte ausserhalb des Quill-Editors (z. B. in Tabellenzellen).
   Bildet die wichtigsten Quill-Display-Regeln nach (Listen-Einrueckung, Marker, p-Margin),
   ohne den vollen .ql-editor-Container mit seinem Padding/Font/Min-Height zu uebernehmen.
   Quill v2 speichert Listen als <ol>/<ul> mit data-list und ql-indent-N-Klassen;
   ohne diese Regeln zaehlt der Browser alles flach durch. */

.richtext-cell p {
    margin-bottom: 0;
}

/* Heading-Groessen analog zum Quill-Snow-Theme (.ql-snow .ql-editor h1..h6).
   Ohne diese Regeln greift die globale Bootstrap-Heading-Skala, wodurch Headings
   in der Anzeige deutlich groesser wirken als im Editor. */
.richtext-cell h1,
.richtext-cell h2,
.richtext-cell h3,
.richtext-cell h4,
.richtext-cell h5,
.richtext-cell h6 {
    margin: 0;
    padding: 0;
    font-weight: bold;
    line-height: inherit;
}

.richtext-cell h1 {
    font-size: 2em;
}

.richtext-cell h2 {
    font-size: 1.5em;
}

.richtext-cell h3 {
    font-size: 1.17em;
}

.richtext-cell h4 {
    font-size: 1em;
}

.richtext-cell h5 {
    font-size: 0.83em;
}

.richtext-cell h6 {
    font-size: 0.67em;
}

.richtext-cell ol,
.richtext-cell ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5;
}

/* Editor-Pendant zu .richtext-cell ol/ul: Quill setzt fuer ol padding-left 1.5em,
   <ul> faellt sogar auf Browser-Default (40px) zurueck. Beides global ueberschreiben,
   damit Bullet- und Ordered-Listen im Editor identisch zur .richtext-cell-Anzeige
   eingerueckt sind. Wird hier (nicht im scoped CSS) gesetzt, weil Quill die
   list-Elemente per JS erzeugt und der Blazor-Scope nicht immer greift. */
.ql-editor ol,
.ql-editor ul {
    padding-left: 0 !important;
    margin: 0 !important;
}

.richtext-cell li {
    list-style: none;
    padding-left: 1.5em;
    position: relative;
}

.richtext-cell li[data-list=ordered] {
    counter-increment: list-0;
}

/* Marker-Box analog zu Quill-Snow (.ql-editor li > .ql-ui:before):
   1.2em breite, right-aligned Box, sodass schmale Bullets und breite Zahlen
   am gleichen rechten Rand enden und damit visuell uebereinstimmen. */
.richtext-cell li[data-list]::before {
    position: absolute;
    left: 0;
    width: 1.2em;
    text-align: right;
    white-space: nowrap;
}

.richtext-cell li[data-list=ordered]::before {
    content: counter(list-0, decimal) '. ';
}

.richtext-cell li[data-list=bullet]::before {
    content: '\2022';
}

.richtext-cell li.ql-indent-1 {
    padding-left: 4.5em;
}

.richtext-cell li[data-list=ordered].ql-indent-1 {
    counter-increment: list-1;
}

.richtext-cell li.ql-indent-1::before {
    left: 3em;
}

.richtext-cell li[data-list=ordered].ql-indent-1::before {
    content: counter(list-1, lower-alpha) '. ';
}

.richtext-cell li[data-list=bullet].ql-indent-1::before {
    content: '\25E6';
}

.richtext-cell li.ql-indent-2 {
    padding-left: 7.5em;
}

.richtext-cell li[data-list=ordered].ql-indent-2 {
    counter-increment: list-2;
}

.richtext-cell li.ql-indent-2::before {
    left: 6em;
}

.richtext-cell li[data-list=ordered].ql-indent-2::before {
    content: counter(list-2, lower-roman) '. ';
}

.richtext-cell li[data-list=bullet].ql-indent-2::before {
    content: '\25AA';
}

.richtext-cell li.ql-indent-3 {
    padding-left: 10.5em;
}

.richtext-cell li[data-list=ordered].ql-indent-3 {
    counter-increment: list-3;
}

.richtext-cell li.ql-indent-3::before {
    left: 9em;
}

.richtext-cell li[data-list=ordered].ql-indent-3::before {
    content: counter(list-3, decimal) '. ';
}

.richtext-cell li[data-list=bullet].ql-indent-3::before {
    content: '\2022';
}

/* === Rich-Text-Werkzeugleiste (Quill) ===
   quill-2.0.3/quill.snow.css bleibt unangetastet; ihre Toolbar-, Picker- und Placeholder-Selektoren
   werden hier nachgelagert auf die Rollen-Tokens gezogen (spaeter geladen, gleiche Spezifitaet
   gewinnt ueber Quellreihenfolge). Die Werkzeugleiste folgt dem Anwendungsmodus, nicht der separat
   schaltbaren Inhaltsflaeche des Editors. */

/* SVG-Pfade lesen currentColor statt eines fest codierten Grautons, damit Glyphen mit dem
   Text-/Hover-Zustand ihres Buttons bzw. Picker-Labels mitziehen. Selektor-Praefixe bilden die
   Spezifitaet der jeweiligen Vendor-Regel nach, sonst gewinnt trotz spaeterer Ladereihenfolge die
   gleichrangige, aber praezisere Vendor-Regel. */
.ql-snow .ql-stroke,
.ql-snow .ql-stroke-miter {
    stroke: currentColor;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
    fill: currentColor;
}

.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker {
    color: var(--text-meta);
}

/* Glyphen in Hover/Fokus/Aktiv: die Ruheregel oben (0,2,0)/(0,3,0) wird von den Vendor-
   Zustandsregeln (quill.snow.css, je (0,4,1)/(0,4,0)) geschlagen. Gegenstueck mit derselben
   Spezifitaet noetig, in BEIDEN Vendor-Selektor-Varianten (.ql-snow.ql-toolbar UND
   .ql-snow .ql-toolbar existieren je nach Klassenreihenfolge/Verschachtelung im DOM). */
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: currentColor;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: currentColor;
}

/* Ghost-Icon-Anatomie: aktiver Zustand = flaechenlose Hover-Flaeche des Modus plus Glyphe/Label im
   Arbeitston. Der Kopfzeilen-Picker zaehlt im aufgeklappten Zustand als aktiv.
   :focus-visible statt :focus (Aufhaenger-Regel) — ein Toolbar-Button zaehlt nicht zu den
   Ausnahmen (select, checkbox, radio), ein mausgeklickter Button waere sonst optisch nicht von
   .ql-active zu unterscheiden. */
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button:focus-visible,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--text-teal);
    background-color: var(--surface-hover-flat);
    border-radius: var(--bs-border-radius);
}

/* Der eingebettete Abschnitt am rechten Rand (Sprachwechsel, Feld-Aktionen) traegt Schaltflaechen
   in Textbreite statt der quadratischen Werkzeug-Glyphen: eine Hover-Flaeche faerbt dort nur den
   mittleren Streifen des Abschnitts und wirkt wie ein halb gefuellter Button. Diese Bauteile zeigen
   den Zustand allein ueber den Ring. */
.ql-toolbar.ql-snow .input-buttons-toolbar button:hover,
.ql-toolbar.ql-snow .input-buttons-toolbar button:focus-visible,
.ql-toolbar.ql-snow .input-buttons-toolbar .btn:hover,
.ql-toolbar.ql-snow .input-buttons-toolbar .btn:focus-visible {
    background-color: transparent;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: var(--border);
}

/* Chevron des aufgeklappten Kopfzeilen-Pickers: Vendor setzt hier hart #ccc (quill.snow.css),
   ohne dem Ruhezustand-currentColor oben zu folgen. Gegenstueck auf mindestens Vendor-Spezifitaet,
   wieder in beiden Toolbar-Selektor-Varianten. */
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill,
.ql-snow .ql-toolbar .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: currentColor;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke,
.ql-snow .ql-toolbar .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: currentColor;
}

/* Picker-Dropdown ist eine angehobene Ebene: Hover verdunkelt im dunklen Modus statt aufzuhellen,
   damit die Ebene die hellste Flaeche bleibt (Regel wie bei .dropdown-menu). */
.ql-toolbar.ql-snow .ql-picker-options {
    background-color: var(--surface-raised);
}

.ql-toolbar.ql-snow .ql-picker-item:hover,
.ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    color: var(--text-teal);
    background-color: var(--surface-hover-flat);
}

/* Auswahlring der Farbfelder: die Feldfarben selbst sind echte Farbwerte (Vendor-Palette) und
   bleiben unangetastet, nur der Ring bekommt eine modusfeste Kontrastfarbe statt hartem Schwarz. */
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
    border-color: var(--text);
}

:root[data-theme='dark'] .ql-picker-options {
    box-shadow: none;
}

:root[data-theme='dark'] .ql-picker-item:hover,
:root[data-theme='dark'] .ql-picker-item.ql-selected {
    background-color: color-mix(in srgb, #000000 8%, var(--surface-raised));
}

/* Placeholder folgt der Meta-Text-Rolle statt eines festen Schwarz-mit-Deckkraft-Werts. */
.ql-editor.ql-blank::before {
    color: var(--text-meta);
}

/* Links im Inhalt: Vendor setzt hart #06c, was auf der dunklen Inhaltsflaeche nur 2 : 1 traegt.
   Der Arbeitston folgt der Inhaltsflaeche, weil die Umschaltung --text-teal mit umbindet.
   Der Lese-Zweig des Feldes traegt kein .ql-snow und braucht sein eigenes Gegenstueck, sonst
   faerbte Bootstrap seine Links am Anwendungsmodus statt an der Inhaltsflaeche. Beide Regeln
   stehen global, nicht im komponenten-gescopten CSS: die Links stammen aus dem Kundeninhalt und
   tragen darum kein Scope-Attribut. */
.ql-snow a,
.disabled-editor .ql-editor a {
    color: var(--text-teal);
}

/* Link-Werkzeug (Quill-Tooltip "Visit URL"/"Enter link"): Vendor setzt weisse Flaeche, #ccc-Rahmen,
   #ddd-Schatten und #444-Text. Es schwebt ueber der Inhaltsflaeche und folgt darum den Rollen der
   angehobenen Ebene; dunkel traegt die Ebene ihre Tiefe ueber die Flaechenabstufung statt ueber
   einen Schatten (Wiki 969 Prinzip 8). */
.ql-snow .ql-tooltip {
    background-color: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--tooltip-box-shadow);
}

:root[data-theme='dark'] .ql-snow .ql-tooltip {
    box-shadow: none;
}

/* Eingabefeld und Trennstrich im Werkzeug: Control-Rollen statt der Vendor-Grautoene. */
.ql-snow .ql-tooltip input[type=text] {
    border-color: var(--border-control);
    border-radius: var(--bs-border-radius);
    color: var(--text);
}

.ql-snow .ql-tooltip a.ql-action::after {
    border-right-color: var(--border);
}

/* ===  Farben-Customizing-Seiten (Kontakte & Veranstaltungen) === */

/* Kopf-Icon im getoenten Rundquadrat (analog EinstellungenObjektHeader). Fond nach der Fond-Regel.
   10 % statt der 28 % der Badge-Flaeche: die Box ist reine Traegerflaeche hinter dem Symbol,
   staerker gemischt uebertoent sie die Karte. */
.farben-header-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--accent) 10%, var(--fond-traegerflaeche, var(--surface-card)));
}

/* Farb-Picker je Zeile breiter/einheitlich darstellen (mehr Raum fuer den Farbnamen). */
.rollen-farbe-zeile .color-picker-trigger,
.status-farbe-zeile .color-picker-trigger {
    min-width: 10rem;
    justify-content: flex-start;
    text-align: left;
}

/* Dropdown-Menue auf die Breite des Triggers bringen (color-picker ist width:fit-content). */
.rollen-farbe-zeile .color-picker-menu,
.status-farbe-zeile .color-picker-menu {
    width: 100%;
}

/* === Einstellungen-Kachel-Vorschau "Farben" (Kontaktrollen & Anmeldestatus) === */

.kachel-skizze-farben {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem;
}

/* Eine Zeile als umrandete Editor-Card: Farbfeld + Name links, Stift rechts. */
.skizze-rollen-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.35rem;
    border: 1px solid var(--border);
    background-color: var(--surface-card);
}

/* Quadratisches Farbfeld der echten, vom Kunden gewaehlten Farbe (--swatch-color bleibt
   unangetastet). Rahmen bewusst in --border-control statt --border: --border traegt gegen die
   Kartenflaeche nur 1,37:1 hell / 1,73:1 dunkel, --border-control 3,68:1 / 3,96:1 (WCAG
   1.4.11-Sollwert 3:1 fuer grafische Objekte) - sonst verschwindet ein heller Kundenton auf
   heller Flaeche fast randlos. */
.skizze-swatch {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    border: 1px solid var(--border-control);
    background: var(--swatch-color);
}

/* Name fuellt die Restbreite und drueckt das Stift-Icon nach rechts. */
.skizze-rollen-name {
    flex-grow: 1;
    min-width: 0;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

/* Stift-Icon rechts signalisiert "bearbeitbar". */
.skizze-stift svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* --- Eigene Utility-Klassen ------------------------------------------------
   Klassen, die Bootstrap nicht mitbringt. Sie gehoeren hierher, damit
   wwwroot/css/bootstrap/bootstrap.css ein reines Build-Artefakt der SCSS-Quelle
   unter styles/ bleibt und ein Bootstrap-Update es gefahrlos ueberschreiben kann. */

/* --gray-200 ist Alt-Bestand; der Wechsel auf ein Rollen-Token faerbt die Linie um
   und gehoert deshalb zur Umstellung der Schnellerfassung, nicht hierher. */
.border-btm-bold {
    border-bottom: 2px solid var(--gray-200) !important;
}

.h-input {
    height: 2.75rem;
}

.flex-reset {
    flex: initial !important;
}

/* Erstes und letztes Element eines Stapels: nach aussen gerundet, zur Nachbarzelle hin eckig.
   Die Rundung der Aussenseite kommt aus .rounded-* von Bootstrap, hier fallen nur die Ecken
   zur Nachbarzelle auf 0. Eigene Namen, damit die Regeln nicht Bootstraps gleichnamige
   Utilities beschatten — ein Element mit .rounded-top bekaeme sonst ungefragt auch flache
   untere Ecken. */
.stapel-oben {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.stapel-unten {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}