/* ===========================================================================
   basic_components.css — Basiskomponenten des Messaging Gateways

   Grundlage: docs/user-experience/component_index.txt und die Struktur- und
   Benennungsvorgabe docs/user-experience/ucs.md.

   Aufbau dieser Datei
     1. Design Tokens
     2. Reset und Grundlagen
     3. Layout: section / content / content_container
     4. content_header
     5. content_text
     6. content_form
     7. content_boxes / content_box
     8. content_list
     9. content_link_buttons
    10. content_tags
    11. content_annotation
    12. navigation
    13. window
    14. notifications
    15. progress_indicator
    16. Hilfsklassen und Zustände
    17. Responsive

   Regeln
     - Jede Komponente hat ein eindeutiges Präfix; alle Unterelemente führen es
       fort (ucs.md Kap. 2.1).
     - Unterelemente sind funktional benannt, nicht optisch (ucs.md Kap. 2.2).
     - Farben, Abstände und Radien kommen ausschließlich aus den Tokens;
       Fachkomponenten definieren keine eigenen Farbwerte.
     - Zustand wird nie allein über Farbe transportiert (Richtlinie Kap. 3.3).
   =========================================================================== */

/* --- 1. Design Tokens ---------------------------------------------------- */

/* Schriften des Quantiz® Design Systems, lokal ausgeliefert.
   Lokal und nicht über einen Schriftdienst: Die Content Security Policy lässt
   keine fremden Ursprünge zu, und eine Anwendung, die zum Rendern eine externe
   Verbindung braucht, ist in einem abgeschotteten Netz nicht betreibbar. */

@font-face { font-family: "Museo Sans"; font-weight: 100; font-style: normal; font-display: swap;
             src: url("/assets/fonts/MuseoSans-100.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 300; font-style: normal; font-display: swap;
             src: url("/assets/fonts/MuseoSans-300.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 500; font-style: normal; font-display: swap;
             src: url("/assets/fonts/MuseoSans-500.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 700; font-style: normal; font-display: swap;
             src: url("/assets/fonts/MuseoSans-700.woff2") format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 900; font-style: normal; font-display: swap;
             src: url("/assets/fonts/MuseoSans-900.woff2") format("woff2"); }

@font-face { font-family: "Comfortaa"; font-weight: 300; font-style: normal; font-display: swap;
             src: url("/assets/fonts/Comfortaa-Light.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("/assets/fonts/Comfortaa-Regular.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 500; font-style: normal; font-display: swap;
             src: url("/assets/fonts/Comfortaa-Medium.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 600; font-style: normal; font-display: swap;
             src: url("/assets/fonts/Comfortaa-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 700; font-style: normal; font-display: swap;
             src: url("/assets/fonts/Comfortaa-Bold.woff2") format("woff2"); }

/* Die Token-NAMEN sind gegenüber der Vorfassung unverändert, nur ihre Werte
   stammen jetzt aus dem Referenzdesign. Das ist der Grund, warum die
   Umstellung durchschlägt, ohne dass eine einzige Fachkomponente angefasst
   werden muss (T-050; ucs.md §25: Wiederverwendung vor Neubau). */

:root {
    /* --- Markenfarben (Quantiz® Design System) --------------------------- */
    --color_brand:              #c6d31c;   /* Lime — Hauptaktion */
    --color_brand_deep:         #10314e;   /* Navy — Akzent, aktive Navigation */
    --color_brand_accent:       #15a5b5;   /* Petrol — Flächen, Punkte, Ränder */

    /* Flächen und Rahmen */
    --color_surface:            #ffffff;
    --color_surface_sunken:     #f1f2f2;
    --color_surface_raised:     #ffffff;
    --color_surface_inverted:   #10314e;
    --color_border:             #e7e7e7;   /* nur dekorative Trenner */
    --color_border_strong:      #8f8f8f;   /* Ränder, die eine Grenze tragen */

    /* Text — Kontraste gegen --color_surface gemessen (WCAG 2.2 AA)
       ------------------------------------------------------------------
       Drei Werte weichen bewusst vom Referenzdesign ab. Der Prototyp setzt
       für Sekundärtext #BBBBBB (1,92:1) und für Überschriften #15A5B5
       (2,97:1); beides verfehlt die Vorgabe. Barrierefreiheit schlägt
       visuelle Übereinstimmung — die Abweichung ist so klein wie möglich
       gehalten und bleibt in der Farbfamilie des Designs:

         Sekundärtext   #BBBBBB → #6e6e6e   1,92:1 → 5,10:1
         Überschriften  #15A5B5 → #14a0af   2,97:1 → 3,15:1  (große Schrift)
         Eingaberänder  #BBBBBB → #8f8f8f   1,92:1 → 3,23:1  (UI-Grenze)

       #6E6E6E stammt aus der Statuspalette des Designs selbst; #14A0AF ist
       die kleinste Abdunklung des Marken-Petrols, die 3:1 erreicht. Als
       Fläche — Punkte, Kacheln, Ränder — bleibt #15A5B5 unverändert; dort
       gilt die Textschwelle nicht. */
    --color_text:               #4b4b4b;   /*  8,72:1 */
    --color_text_muted:         #6e6e6e;   /*  5,10:1 */
    --color_text_display:       #14a0af;   /*  3,15:1 — nur große Schrift */
    --color_text_inverted:      #ffffff;
    --color_text_on_brand:      #4b4b4b;   /*  5,29:1 auf Lime */

    /* Akzent */
    --color_accent:             #10314e;   /* 13,36:1 */
    --color_accent_hover:       #14a0af;
    --color_accent_soft:        rgba(16, 49, 78, 0.10);

    /* Statusfarben — die Textvarianten stammen unverändert aus dem
       Referenzdesign; sie erfüllen AA sämtlich (4,9:1 bis 6,7:1). */
    --color_success:            #4c7413;   /*  5,50:1 */
    --color_success_soft:       rgba(111, 163, 28, 0.16);
    --color_warning:            #8a6412;   /*  5,37:1 */
    --color_warning_soft:       rgba(226, 169, 59, 0.20);
    --color_danger:             #a33636;   /*  6,69:1 */
    --color_danger_soft:        rgba(192, 72, 72, 0.14);

    /* Dieselben Zustände als **Markierung**, nicht als Schrift.
       Die beiden Werte darüber sind für Text abgedunkelt, damit sie 4,5:1
       erreichen. Ein Streifen an der Kartenkante ist aber keine Schrift: Er
       wiederholt, was daneben ausgeschrieben steht, und trägt die Aussage
       nicht allein. Für ihn gilt der Wert des Entwurfs.

       Ein Token für beide Rollen hat hier die Kacheln des Handlungsbedarfs
       stumpf gemacht — richtiger Wert, falsche Rolle. */
    --color_warning_mark:       #e2a93b;
    --color_danger_mark:        #c04848;
    --color_info:               #0f7c88;   /*  4,93:1 */
    --color_info_soft:          rgba(21, 165, 181, 0.14);
    --color_neutral:            #6e6e6e;   /*  5,10:1 */
    --color_neutral_soft:       #efefef;

    /* Hervorhebung einer festgehaltenen Umsetzung (Betriebsart transform) */
    --color_transform:          #5d6300;   /*  6,32:1 */
    --color_transform_soft:     rgba(198, 211, 28, 0.35);

    /* Kanalfarben — als Punkt oder Kachel, nie als alleiniger Träger einer
       Aussage; der Kanalname steht immer daneben (Richtlinie Kap. 3.3). */
    --color_channel_email:         #10314e;
    --color_channel_telegram:      #15a5b5;
    --color_channel_whatsapp:      #6fa31c;
    --color_channel_webhook:       #8f8f8f;
    --color_channel_browser_push:  #8a1cb1;
    --color_channel_signal:        #4b4b4b;

    /* Typografie */
    --font_family:         "Museo Sans", "Helvetica Neue", Arial, sans-serif;
    --font_family_display: "Comfortaa", "Museo Sans", Arial, sans-serif;
    --font_family_mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    /* Typoskala — exakt die Stufen, die das Referenzdesign verwendet.
       Es arbeitet mit Halbschritten (10,5 / 12,5 / 13,5 px); eine reine
       T-Shirt-Skala kann das nicht abbilden. Drei Stufen tragen deshalb
       einen Rollennamen statt einer Größenbezeichnung — sie liegen
       zwischen den übrigen und wären als xs/sm/md nicht einzuordnen. */
    --font_size_imprint: 0.525rem;    /* 8,4px  — Firmenzeile unter der Marke */
    --font_size_xxxs:    0.59375rem;  /* 9,5px  — Kennzeichnung im Kettenglied */
    --font_size_xxs:     0.625rem;    /* 10px   — Gruppentitel, Zähler */
    --font_size_xs:      0.65625rem;  /* 10,5px — Tabellenkopf, Menüüberschrift */
    --font_size_eyebrow: 0.6875rem;   /* 11px   — Eyebrow, Zähler, Kleinstlabel */
    --font_size_detail:  0.71875rem;  /* 11,5px — Zweitzeile in dichten Listen */
    --font_size_13:      0.8125rem;   /* 13px   — Fließtext in dichten Karten */
    --font_size_meta:    0.75rem;     /* 12px   — Statuspille, Zeitspalte, Legende */
    --font_size_sm:      0.78125rem;  /* 12,5px — Notiz, Meta-Zeile, Sekundärtext */
    --font_size_base:    0.84375rem;  /* 13,5px — Listenzeile, Menüeintrag, Schaltfläche */
    --font_size_control: 0.875rem;    /* 14px   — Navigation, Reiter, Eingabefeld */
    --font_size_body:    0.9375rem;   /* 15px   — Fließtext */
    --font_size_md:      1rem;        /* 16px   — Kartentitel, Marke */
    --font_size_heading: 1.125rem;    /* 18px   — Brotkrümel */
    --font_size_20:      1.25rem;     /* 20px   — Titel einer Spaltenüberschrift */
    --font_size_lg:      1.375rem;    /* 22px   — Titel im Kartenkopf */
    --font_size_dialog:  1.5rem;      /* 24px   — Dialogüberschrift */
    --font_size_25:      1.5625rem;   /* 25px   — Überschrift der Detailansicht */
    --font_size_xl:      1.6875rem;   /* 27px   — Ansichtstitel */
    --font_size_xxl:     2rem;        /* 32px   — Kennzahl */

    --line_height_tight: 1.2;
    --line_height_base:  1.5;

    /* Museo Sans liefert 100/300/500/700/900 — dazwischen gibt es nichts.
       Der Fließtext steht auf 300; das ist die Absicht des Designs und nicht
       mit einem versehentlich zu dünnen Wert zu verwechseln. */
    --font_weight_regular: 300;
    --font_weight_medium:  500;
    --font_weight_bold:    700;

    --letter_spacing_eyebrow: 0.1em;   /* Eyebrow, Gruppentitel */
    --letter_spacing_label:   0.08em;  /* Tabellenkopf, Kleinstlabel */

    /* Abstände — 2px-Leiter, benannt nach dem Maß.

       Das Referenzdesign verwendet 24 verschiedene Abstandswerte; 280 seiner
       481 Vorkommen (58 %) liegen NICHT auf einem 4px-Raster. Die häufigsten
       Zwischenwerte sind 10px (40x), 18px (37x), 14px (36x), 20px (32x) und
       22px (20x). Eine nach Stufen benannte Skala (space_1, space_2 …) müsste
       dafür entweder Stufen erfinden oder die Werte runden — beides verfälscht
       den Rhythmus des Entwurfs. Deshalb trägt jeder Token sein Maß im Namen.

       Angaben in rem, nicht in px: Wer die Schriftgröße seines Browsers
       hochsetzt, soll auch mehr Luft bekommen — sonst kleben vergrößerte
       Zeilen aneinander.

       Die ungeraden Werte des Entwurfs (3, 5, 9, 11, 13 px) sind keine
       Stufen, sondern Maße einzelner Bedienelemente — meist die senkrechte
       Hälfte eines Paares wie 9px/20px an einem Navigationseintrag. Sie
       stehen als Zahl in der jeweiligen Komponente, mit Begründung. */
    --space_2:  0.125rem;   /*  2px — Etikett innen, Zähler */
    --space_4:  0.25rem;    /*  4px */
    --space_6:  0.375rem;   /*  6px */
    --space_8:  0.5rem;     /*  8px */
    --space_9:  0.5625rem;  /*  9px — senkrechtes Maß kleiner Bedienelemente */
    --space_10: 0.625rem;   /* 10px */
    --space_12: 0.75rem;    /* 12px */
    --space_13: 0.8125rem;  /* 13px — Listeneintrag, Stromzeile */
    --space_14: 0.875rem;   /* 14px */
    --space_16: 1rem;       /* 16px */
    --space_18: 1.125rem;   /* 18px */
    --space_20: 1.25rem;    /* 20px */
    --space_22: 1.375rem;   /* 22px */
    --space_24: 1.5rem;     /* 24px */
    --space_26: 1.625rem;   /* 26px — Dialoginhalt */
    --space_28: 1.75rem;    /* 28px */
    --space_30: 1.875rem;   /* 30px — Leerzustand der Trefferliste */
    --space_32: 2rem;       /* 32px */
    --space_40: 2.5rem;     /* 40px — unterer Rand über dem Dialog */
    --space_48: 3rem;       /* 48px */
    --space_60: 3.75rem;    /* 60px — unterer Rand des Inhaltsbereichs */

    /* Formen — das Design arbeitet mit deutlich weicheren Kanten als die
       Vorfassung: Karten 16px, Bedienelemente als Pillen. */
    --radius_xxs:    3px;   /* Balkenkappen im Verlauf */
    --radius_xs:     6px;   /* Tastenkappe */
    --radius_sm:     10px;
    --radius_md:     12px;
    --radius_lg:     16px;
    --radius_xl:     20px;
    --radius_pill:   999px;
    --radius_circle: 50%;

    /* Der Schatten des Designs ist ein allseitiger Schein, kein gerichteter
       Schlagschatten. */
    --shadow_sm:    0 0 12px 0 rgba(0, 0, 0, 0.08);
    --shadow_md:    0 0 12px 0 rgba(0, 0, 0, 0.10);
    --shadow_lg:    0 0 12px 0 rgba(0, 0, 0, 0.20);
    --shadow_popover: 0 14px 40px rgba(16, 49, 78, 0.16);
    --shadow_modal: 0 24px 70px rgba(16, 49, 78, 0.30);

    /* Struktur */
    --content_max_width:           1240px;
    --content_max_width_wide:      1400px;
    --navigation_width:            252px;
    --navigation_width_collapsed:  76px;
    --header_height:               60px;

    --transition_fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Der zweite Übergang ist länger, weil er eine Fläche bewegt statt einer
       Farbe: Die Seitenleiste ändert ihre Breite, und 150 ms lassen das
       springen statt gleiten. Der Entwurf setzt dafür 260 ms. Die
       Beschriftungen blenden kürzer und weicher — sie sollen verschwunden
       sein, bevor die Fläche schmal genug wird, um sie zu beschneiden. */
    --transition_panel: 260ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition_label: 180ms ease;

    /* Fokus: systemweit sichtbar (Richtlinie Kap. 3.7.3) */
    --focus_ring_width: 2px;
    --focus_ring_color: #14a0af;
    --focus_ring_offset: 2px;
}

/* --- 2. Reset und Grundlagen --------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Bedienelemente erben die Zeilenhöhe nicht.
   ------------------------------------------------------------------------
   `font: inherit` an einem Knopf oder Feld übernimmt Familie, Grad und
   Stärke — die **Zeilenhöhe** aber setzt der Browser auf `normal` zurück.
   Ein Knopf mit 13 px Schrift wird dadurch rund 4 px flacher als ein Link
   mit derselben Schrift daneben, und niemand sieht die Ursache im Stylesheet.

   Gemessen: Das Suchfeld im Kopf war 32 statt 36 px hoch, der
   Einklappen-Knopf 34 statt 38 — beide neben 38 px hohen runden Aktionen.
   Die Navigationseinträge daneben stimmten, weil sie `<a>` sind und erben. */
button,
input,
select,
textarea {
    line-height: inherit;
}

/* `hidden` muss verstecken — ausnahmslos.
   ------------------------------------------------------------------------
   Das Attribut wirkt nur über eine Regel im Browser-Stylesheet, und die
   verliert gegen **jede** eigene Klassenregel mit `display`. Wer also
   `.meine_liste { display: flex }` schreibt und das Element später mit
   `el.hidden = true` schließt, bekommt ein Element, das der Code für
   geschlossen hält und das trotzdem auf dem Bildschirm steht.

   Genau das ist der Trefferliste der Suche passiert: 630 px hoch sichtbar,
   während `hidden` gesetzt war — sie ließ sich nicht wegklicken und nahm
   keine Tasten mehr an, weil der Code sie längst geschlossen hatte. Drei
   Stellen im Stylesheet flickten dieselbe Falle vorher einzeln.

   Diese eine Regel macht die Klasse von Fehlern unmöglich. `!important` ist
   hier richtig: Es gibt keinen Fall, in dem `hidden` sichtbar sein soll. */
[hidden] {
    display: none !important;
}

html {
    /* Keine feste Pixelgröße: die Schriftgröße des Browsers bleibt wirksam,
       damit Textvergrößerung funktioniert. */
    font-size: 100%;
}

body {
    margin: 0;
    font-family: var(--font_family);
    font-size: var(--font_size_body);
    /* Museo Sans 300 ist die Fließtextstärke des Referenzdesigns. Sie
       wirkt auf den ersten Blick dünn und ist genau so gemeint; 500
       trägt die Betonung, 700 die Überschrift. */
    font-weight: var(--font_weight_regular);
    line-height: var(--line_height_base);
    color: var(--color_text);
    background: var(--color_surface_sunken);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space_12);
    line-height: var(--line_height_tight);
    font-weight: var(--font_weight_bold);
}

/* Die Displayschrift trägt die Seitenüberschriften; Zwischenüberschriften
   bleiben in der Fließtextschrift, damit sie sich nicht mit ihnen um die
   Aufmerksamkeit streiten (Referenzdesign: h2 in Comfortaa, h3 in Museo). */
h1, h2 {
    font-family: var(--font_family_display);
    color: var(--color_text_display);
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 var(--space_12);
}

/* Nur Fließtextlinks tragen die Linkgestalt.

   Ein Anker MIT Klasse gehört einer Komponente und bringt sein eigenes
   Aussehen mit: ein Navigationseintrag, die Marke, eine runde Kopfzeilenaktion,
   ein Listentitel. Ohne diese Einschränkung färbte a:hover ihren Text beim
   Überfahren petrol — eine Linkfarbe an Stellen, die keine Links im Sinne des
   Fließtexts sind. Der Fehler fiel erst auf, als jemand die Oberfläche
   tatsächlich benutzte; gemessen wurde er nie, weil kein Prüfskript den
   Hover-Zustand betrachtet. */
a:not([class]) {
    color: var(--color_accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:not([class]):hover {
    color: var(--color_accent_hover);
}

/* Sichtbarer Fokus für alle bedienbaren Elemente. :focus-visible statt :focus,
   damit ein Mausklick keinen Ring hinterlässt, die Tastaturbedienung aber
   jederzeit erkennbar bleibt. */
:focus-visible {
    outline: var(--focus_ring_width) solid var(--focus_ring_color);
    outline-offset: var(--focus_ring_offset);
    border-radius: var(--radius_sm);
}

/* Nur für Screenreader — z. B. Beschriftungen, die visuell aus dem Kontext
   hervorgehen, für assistive Technik aber fehlen würden. */
.visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Sprungmarke zum Inhalt: erste Tabulatorstation der Seite. */
.skip_link {
    position: absolute;
    left: var(--space_8);
    top: -3rem;
    z-index: 100;
    padding: var(--space_8) var(--space_16);
    background: var(--color_accent);
    color: var(--color_text_inverted);
    border-radius: var(--radius_md);
    text-decoration: none;
    transition: top var(--transition_fast);
}

.skip_link:focus {
    top: var(--space_8);
    color: var(--color_text_inverted);
}

/* --- 3. Layout ------------------------------------------------------------ */

.section {
    padding: var(--space_24) 0;
}

.content {
    width: 100%;
}

.content_container {
    width: 100%;
    max-width: var(--content_max_width);
    margin: 0 auto;
    padding: 0 var(--space_24);
}

.content_items {
    display: flex;
    flex-direction: column;
    gap: var(--space_16);
}

.content_items_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space_16);
}

.content_item {
    min-width: 0;
}

/* Layoutvarianten auf Container-Ebene, nicht in den Items (ucs.md Kap. 8.1). */
.content_item_layout_1 { grid-column: span 1; }
.content_item_layout_2 { grid-column: span 2; }

@media (max-width: 760px) {
    .content_item_layout_2 { grid-column: span 1; }
}

/* --- 4. content_header ---------------------------------------------------- */

.content_header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space_16);
}

.content_header_title {
    margin: var(--space_4) 0 0;
    font-family: var(--font_family_display);
    font-size: var(--font_size_xl);
    font-weight: var(--font_weight_bold);
    line-height: var(--line_height_tight);
    color: var(--color_text_display);
    overflow-wrap: anywhere;
}

.content_header > div {
    min-width: 0;
}

.content_header_description {
    margin: var(--space_4) 0 0;
    max-width: 68ch;
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
}

.content_header_controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_8);
    margin-left: auto;
}

/* --- 5. content_text ------------------------------------------------------ */

.content_text_title_pretext {
    display: block;
    color: var(--color_accent);
    font-size: var(--font_size_eyebrow);
    font-weight: var(--font_weight_bold);
    letter-spacing: var(--letter_spacing_eyebrow);
    text-transform: uppercase;
}

/* Dieselbe Zeile in gedeckter Ausprägung — für Gruppentitel innerhalb
   einer Karte, wo der Akzent zu laut wäre. */
.content_text_title_pretext_quiet {
    color: var(--color_text_muted);
}

.content_text_title {
    margin: 0 0 var(--space_8);
    font-size: var(--font_size_md);
    font-weight: var(--font_weight_bold);
}

.content_text_description {
    margin: 0 0 var(--space_8);
    color: var(--color_text_muted);
}

.content_text_highlight {
    font-weight: var(--font_weight_bold);
    color: var(--color_text);
}

.content_text {
    max-width: 76ch;
}

.content_text_action {
    margin-top: var(--space_12);
}

/* --- 6. content_form ------------------------------------------------------ */

.content_form {
    display: flex;
    flex-direction: column;
    gap: var(--space_24);
}

.content_form_flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space_16);
}

.content_form_item_group {
    border: 0;
    box-shadow: var(--shadow_sm);
    border-radius: var(--radius_lg);
    background: var(--color_surface);
    padding: var(--space_20) var(--space_22);
}

.content_form_item_group_caption {
    margin-bottom: var(--space_16);
    padding-bottom: var(--space_8);
    border-bottom: 1px solid var(--color_border);
    font-size: var(--font_size_md);
    font-weight: var(--font_weight_bold);
}

/* Im Dialog ist eine Gruppe **kein** Kasten.
   ------------------------------------------------------------------------
   Auf der Arbeitsfläche ist sie eine Karte, und das ist richtig: Dort liegt
   sie auf gesenktem Grau, und der weiße Schein hebt sie heraus.

   Im Dialog liegt sie auf **Weiß**. Eine weiße Karte auf weißem Grund trennt
   nichts — sie fügt einen Schatten, einen Radius und 20 px Polsterung hinzu,
   die keine Frage beantworten, und schiebt die Felder in eine zweite Fläche
   innerhalb der ersten. Der Entwurf zeigt im Dialog eine flache Spalte:
   Beschriftung, Feld, 16 px Abstand, weiter.

   Was bleibt, ist die **Gliederung** — ein größeres Formular braucht sie, und
   der Entwurf kennt sie in seinen Dialogen nur deshalb nicht, weil seine
   Masken kürzer sind. Sie wird mit den Mitteln des Entwurfs gebaut: einer
   versalen Kleinschrift und einer Trennlinie zwischen den Abschnitten. */
.window_content .content_form_item_group {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.window_content .content_form_item_group + .content_form_item_group {
    margin-top: var(--space_24);
    padding-top: var(--space_22);
    border-top: 1px solid var(--color_border);
}

/* Die Abschnittsbeschriftung steht über den Feldbeschriftungen, ohne größer
   zu sein: Sie unterscheidet sich durch die Farbe (Navy statt Grau) und die
   weitere Laufweite — dieselbe Auszeichnung, die der Entwurf für
   Abschnittsmarken verwendet. */
.window_content .content_form_item_group_caption {
    margin-bottom: var(--space_14);
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--font_size_eyebrow);
    letter-spacing: var(--letter_spacing_eyebrow);
    text-transform: uppercase;
    color: var(--color_accent);
}

/* Beschriftung **über** dem Feld, nicht daneben.
   ------------------------------------------------------------------------
   Der Entwurf stapelt jedes Feld: eine versale Kleinschrift als Aufschrift,
   darunter das Feld über die volle Breite. Das gilt bei ihm durchgehend — im
   Dialog wie in der Übersichtsleiste.

   Zuvor stand hier ein Zweispalter mit einer bis zu 260 px breiten
   Beschriftungsspalte. Der kostet in einem 500 px breiten Dialog die Hälfte
   der Fläche für Wörter und zwingt jedes Feld in den Rest — und er sieht
   dem Entwurf an keiner Stelle ähnlich. */
.content_form_item {
    display: flex;
    flex-direction: column;
    gap: var(--space_6);
    padding: 0;
}

.content_form_item + .content_form_item {
    margin-top: var(--space_16);
}

.content_form_item_caption {
    font-size: var(--font_size_xs);
    font-weight: var(--font_weight_bold);
    letter-spacing: var(--letter_spacing_label);
    text-transform: uppercase;
    color: var(--color_text_muted);
}

.content_form_item_caption label {
    cursor: pointer;
}

/* Pflichtfelder werden nicht nur farblich, sondern mit Zeichen und
   zugänglichem Namen gekennzeichnet. */
.content_form_item_required {
    margin-left: var(--space_4);
    color: var(--color_danger);
    font-weight: var(--font_weight_bold);
}

.content_form_item_value {
    min-width: 0;
}

.content_form_item_description {
    margin: var(--space_8) 0 0;
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
}

.content_form_item_error {
    margin: var(--space_8) 0 0;
    color: var(--color_danger);
    font-size: var(--font_size_sm);
    font-weight: var(--font_weight_medium);
}

.content_form_input,
.content_form_item_input {
    width: 100%;
    padding: var(--space_10) var(--space_13);
    border: 2px solid var(--color_border_strong);
    border-radius: 0;
    background: var(--color_surface);
    color: var(--color_text);
    font-family: inherit;
    font-size: var(--font_size_control);
    line-height: 1.4;
    transition: border-color var(--transition_fast), box-shadow var(--transition_fast);
}

/* Ein Eingabefeld reagiert im Entwurf **nicht** auf den Zeiger — es reagiert
   auf den Fokus. Ein Randwechsel beim Überfahren kündigt eine Zustandsänderung
   an, die beim Klick gar nicht eintritt, und in einem Formular mit acht
   Feldern flackert dabei die halbe Maske. */

/* Fokus an einem Feld: **ein** Rand, **eine** Farbe, kein zweiter Ring.
   ------------------------------------------------------------------------
   Ein Feld trägt seinen Fokus schon selbst — es hat einen Rand, der die
   Farbe wechseln kann. Der Ring der Basisschicht kam bisher zusätzlich dazu
   und lag in einer anderen Farbe darum; zusammen mit dem Feldrand ergab das
   zwei bis drei Linien in zwei Farben um jedes Feld.

   Die Farbe ist **Petrol**, nicht das Lime des Entwurfs. Begründung als
   BA-06 im Abgleich: Lime auf Weiß erreicht 1,7:1 und verfehlt die
   3:1-Schwelle für Bedienelemente (WCAG 2.2, EK 2.4.11) — als alleiniger
   Nachweis wäre es zu leise. Petrol erreicht 3,15:1, und der Entwurf setzt
   dieselbe Farbe an seinem eigenen Suchfeld: Damit hat jedes Feld der
   Anwendung dieselbe Fokusfarbe statt zweier. */
.content_form_input:focus,
.content_form_item_input:focus,
.content_form_input:focus-visible,
.content_form_item_input:focus-visible {
    border-color: var(--color_accent_hover);
    outline: 0;
}

.content_form_input:disabled,
.content_form_item_input:disabled {
    background: var(--color_surface_sunken);
    color: var(--color_text_muted);
    cursor: not-allowed;
}

.content_form_input[aria-invalid="true"],
.content_form_item_input[aria-invalid="true"] {
    border-color: var(--color_danger);
}

textarea.content_form_input,
textarea.content_form_item_input {
    min-height: 8rem;
    resize: vertical;
    font-family: inherit;
}

textarea.content_form_input_code {
    font-family: var(--font_family_mono);
    font-size: var(--font_size_sm);
}

select.content_form_input,
select.content_form_item_input {
    cursor: pointer;
}

/* Kontrollkästchen und Optionsfelder brauchen eine andere Geometrie als
   Texteingaben; die Unterscheidung läuft über den Selektor, wie im
   Komponentenindex vorgesehen. */
.content_form_input[type="checkbox"],
.content_form_input[type="radio"],
.content_form_item_input[type="checkbox"],
.content_form_item_input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0 var(--space_8) 0 0;
    padding: 0;
    accent-color: var(--color_accent);
    cursor: pointer;
    vertical-align: -2px;
}

.content_form_checkbox_row {
    display: flex;
    align-items: center;
    gap: var(--space_8);
    padding: var(--space_4) 0;
}

.content_form_input[type="button"],
.content_form_input[type="submit"],
.content_form_item_input[type="button"],
.content_form_item_input[type="submit"] {
    width: auto;
    cursor: pointer;
    background: var(--color_accent);
    border-color: var(--color_accent);
    color: var(--color_text_inverted);
    font-weight: var(--font_weight_medium);
}

.content_form_actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_8);
    justify-content: flex-end;
    padding-top: var(--space_8);
}

/* --- 7. content_boxes / content_box --------------------------------------- */

.content_boxes {
    display: flex;
    flex-direction: column;
    gap: var(--space_16);
}

.content_boxes_header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space_12);
}

.content_boxes_header_vertical {
    flex-direction: column;
    align-items: stretch;
}

.content_boxes_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space_16);
}

.content_boxes_grid_variants {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space_16);
}

/* Zwei Spalten, die linke breiter — im Referenzdesign 1.5fr zu 1fr.

   Warum kein content_boxes_grid: Jenes verteilt gleich breite Spalten nach
   verfügbarem Platz. Hier ist die Aufteilung eine Aussage — links steht der
   Gegenstand, rechts der Zusatz dazu. Beides gleich breit zu setzen hieße,
   sie für gleich wichtig zu erklären.

   align-items: start, damit die kürzere Karte nicht auf die Höhe der
   längeren gezogen wird und unten Leere trägt. */
.content_split {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space_16);
    align-items: start;
}

.content_split > * {
    min-width: 0;
}

/* Schmale linke Spalte: eine Auswahlliste neben dem, was sie auswählt.
   Anders als beim Regelfall ist die linke Spalte hier nicht der Gegenstand,
   sondern der Weg dorthin — sie bekommt nur so viel Platz, wie ein Name und
   eine Vorschauzeile brauchen. */
.content_split_aside {
    grid-template-columns: minmax(260px, 340px) 1fr;
}

.content_split_aside_narrow {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: var(--space_18);
}

/* Reiter — Abschnittswechsel, nicht Filter.
   ------------------------------------------------------------------------
   Der Entwurf gibt ihnen eine eigene Gestalt: 14 px, unterstrichen mit 3 px
   in Navy, wenn aktiv; grau und ohne Strich, wenn nicht. Eine Pille steht
   für einen Filter, ein Reiter für einen anderen Inhalt — wer beides gleich
   zeichnet, nimmt dem Benutzer die Auskunft, was der Klick tut. */
.content_tabs {
    display: flex;
    align-items: center;
    gap: var(--space_2);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color_border);
}

.content_tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: var(--space_12) var(--space_18) var(--space_14);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--color_text_muted);
    font-family: inherit;
    font-size: var(--font_size_control);
    font-weight: var(--font_weight_medium);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition_fast), border-color var(--transition_fast);
}

.content_tab:hover {
    color: var(--color_text);
}

.content_tab_active {
    border-bottom-color: var(--color_accent);
    color: var(--color_accent);
    font-weight: var(--font_weight_bold);
}

.content_tab_count {
    padding: 0 var(--space_6);
    border-radius: var(--radius_pill);
    background: var(--color_surface_sunken);
    font-size: var(--font_size_xxs);
    font-weight: var(--font_weight_bold);
}

/* Kopf einer Spalte im Zweispalter.
   ------------------------------------------------------------------------
   Er trägt, was sonst der Ansichtskopf trüge — und steht deshalb **in** der
   Spalte. Der Grundtitel entspricht mit 24 px dem Vorlagenentwurf; für
   Routing kann er mit `_prominent` als 27-px-Ansichtstitel auftreten. */
.content_pane_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space_12);
    flex-wrap: wrap;
    margin-bottom: var(--space_14);
}

.content_pane_header_body {
    min-width: 0;
}

.content_pane_header_eyebrow {
    display: block;
    font-size: var(--font_size_eyebrow);
    font-weight: var(--font_weight_bold);
    letter-spacing: var(--letter_spacing_eyebrow);
    text-transform: uppercase;
    color: var(--color_accent);
}

.content_pane_header_title {
    margin: var(--space_4) 0 0;
    font-family: var(--font_family_display);
    font-size: var(--font_size_dialog);
    font-weight: var(--font_weight_bold);
    line-height: var(--line_height_tight);
    color: var(--color_text_display);
}

.content_pane_header_title_prominent {
    font-size: var(--font_size_xl);
}

/* Gleiche Hälften — für Routing: Links steht die Reihenfolge der Regeln,
   rechts die gewählte Regel. Beide Seiten tragen gleich viel, und keine ist
   der Beiwagen der anderen. Gemessen im Entwurf: 561 zu 561. */
.content_split_even {
    grid-template-columns: 1fr 1fr;
    gap: var(--space_18);
}

.content_split_hint {
    margin: 0;
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
}

/* Beide Spalten füllen die Höhe der Ansicht, damit jede für sich scrollt.
   Ohne das scrollte die Seite, und der Verlauf liefe beim Blättern in der
   Liste mit nach oben aus dem Bild. */
.content_split_tall {
    height: calc(100vh - var(--header_height) - var(--space_28) - var(--space_60) - 5rem);
    min-height: 32rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .content_split_tall {
        height: auto;
    }
}

/* Unterhalb dieser Breite stünden zwei Spalten so schmal, dass beide
   unleserlich wären. Dann lieber untereinander. */
@media (max-width: 900px) {
    .content_split {
        grid-template-columns: 1fr;
    }
}

/* Karten tragen im Referenzdesign keinen Rand, sondern einen allseitigen
   Schein. Der Rand wird dort gesetzt, wo eine Karte etwas AUSSAGT — die
   Handlungsbedarfs-Karte trägt ihn links, das Provider Profile oben. */
.content_box {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: var(--radius_lg);
    background: var(--color_surface);
    box-shadow: var(--shadow_sm);
    overflow: hidden;
}

/* Overlay-Link: legt die Klickfläche als eigene Ebene über den Inhalt
   (ucs.md Kap. 6.1), ohne die Textauszeichnung anzutasten. */
.content_box_link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
}

.content_box_link:focus-visible {
    outline-offset: -3px;
}

.content_box_header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space_12);
    padding: var(--space_18) var(--space_22) 0;
}

.content_box_header_standalone {
    align-items: center;
    padding-bottom: var(--space_18);
}

.content_box_title_pretext {
    display: block;
    color: var(--color_text_muted);
    font-size: var(--font_size_xs);
    font-weight: var(--font_weight_bold);
    letter-spacing: var(--letter_spacing_label);
    text-transform: uppercase;
}

.content_box_title {
    margin: 0;
    font-family: var(--font_family);
    font-size: var(--font_size_md);
    font-weight: var(--font_weight_bold);
    color: var(--color_text);
}

.content_box_title_display {
    font-family: var(--font_family_display);
    font-size: var(--font_size_20);
    color: var(--color_accent);
}

.content_box_description {
    margin: var(--space_4) 0 0;
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
}

.content_box_body {
    flex: 1;
    padding: var(--space_20) var(--space_22);
}

.content_box_section + .content_box_section {
    margin-top: var(--space_16);
    padding-top: var(--space_16);
    border-top: 1px solid var(--color_surface_sunken);
}

.content_box_caption {
    color: var(--color_text_muted);
    font-size: var(--font_size_xs);
    font-weight: var(--font_weight_medium);
    letter-spacing: var(--letter_spacing_label);
    text-transform: uppercase;
}

.content_box_text {
    margin: var(--space_4) 0 0;
}

/* Steuerelemente liegen über dem Overlay-Link, sonst wären sie unklickbar. */
.content_box_controls {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_8);
    padding: 0 var(--space_22) var(--space_20);
}

.content_box_control {
    display: inline-flex;
    align-items: center;
    gap: var(--space_8);
    padding: var(--space_8) var(--space_12);
    border: 1px solid var(--color_border_strong);
    border-radius: var(--radius_md);
    background: var(--color_surface);
    color: var(--color_text);
    font-family: inherit;
    font-size: var(--font_size_sm);
    font-weight: var(--font_weight_medium);
    cursor: pointer;
    transition: background var(--transition_fast), border-color var(--transition_fast);
}

.content_box_control:hover {
    background: var(--color_surface_sunken);
    border-color: var(--color_accent);
}

.content_box_control_icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.content_box_footer {
    padding: var(--space_14) var(--space_22);
    border-top: 1px solid var(--color_surface_sunken);
    background: var(--color_surface_sunken);
    font-size: var(--font_size_sm);
    color: var(--color_text_muted);
}

/* --- 8. content_list ------------------------------------------------------ */

.content_list {
    display: flex;
    flex-direction: column;
    border: 0;
    box-shadow: var(--shadow_sm);
    border-radius: var(--radius_lg);
    background: var(--color_surface);
    overflow: hidden;
}

/* Kompakte Fassung für eine Liste innerhalb einer Karte: Die Karte trägt
   bereits Fläche und Schein, die Liste darf sie nicht doppeln. */
.content_list_compact {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.content_list_compact .content_list_item {
    gap: var(--space_12);
    padding: var(--space_10) var(--space_8);
    border-bottom: 0;
    border-top: 1px solid var(--color_border);
    border-radius: var(--radius_sm);
}

/* Ist die Zeile ein Knopf, erbt sie weder Schrift noch Farbe noch Fläche vom
   Umfeld — ein button bringt seine eigenen Vorgaben mit. Ohne diese
   Zurücksetzung steht der Titel in Schwarz und 13,33px auf grauer Fläche. */
button.content_list_item {
    width: 100%;
    border-left: 0;
    border-right: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.content_list_item:hover {
    background: var(--color_surface_sunken);
}

/* Die beiden Zeilen des Textteils stehen untereinander, nicht hintereinander.
   Als span brauchen sie das ausdrücklich. */
.content_list_item_body .content_list_item_title,
.content_list_item_body .content_list_item_description {
    display: block;
}

.content_list_compact .content_list_item_title {
    font-size: var(--font_size_base);
    font-weight: var(--font_weight_medium);
}

.content_list_compact .content_list_item_description {
    font-size: var(--font_size_detail);
}

.content_list_compact .content_list_item:first-child {
    border-top: 0;
}

.content_list_item_body {
    flex: 1;
    min-width: 0;
}

/* Der Zustand am Zeilenende. Er erbt seine Farbe aus der Zustandsklasse des
   Statusanzeigers — dieselbe Aussage, dieselbe Farbe. */
.content_list_item_state {
    flex-shrink: 0;
    background: transparent;
    font-size: var(--font_size_meta);
    font-weight: var(--font_weight_bold);
    white-space: nowrap;
}

.content_list_item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space_12);
    padding: var(--space_13) var(--space_18);
    border-bottom: 1px solid var(--color_surface_sunken);
}

.content_list_item:last-child {
    border-bottom: none;
}

.content_list_item:hover {
    background: var(--color_surface_sunken);
}

.content_list_item_title {
    font-weight: var(--font_weight_medium);
}

.content_list_item_title a {
    text-decoration: none;
}

.content_list_item_title a:hover {
    text-decoration: underline;
}

.content_list_item_description {
    margin: var(--space_4) 0 0;
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
}

.content_list_item_actions {
    display: flex;
    gap: var(--space_8);
    margin-left: auto;
}

.content_list_item_active {
    background: var(--color_accent_soft);
    box-shadow: inset 3px 0 0 var(--color_accent);
}

.content_list_item_disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Leerzustand: sagt, was fehlt und was zu tun ist — statt einer leeren Fläche. */
.content_list_empty {
    padding: var(--space_28) var(--space_16);
    text-align: center;
    color: var(--color_text_muted);
}

/* --- 9. content_link_buttons ---------------------------------------------- */

.content_link_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_8);
}

/* Bedienelemente sind im Referenzdesign Pillen mit kräftigem Rand — der
   zweifache Rand ist Absicht und trägt die Form, wo keine Fläche sie trägt. */
.content_link_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space_8);
    padding: 9px var(--space_20);
    border: 2px solid var(--color_border);
    border-radius: var(--radius_pill);
    background: var(--color_surface);
    color: var(--color_text);
    font-family: inherit;
    font-size: var(--font_size_base);
    font-weight: var(--font_weight_bold);
    /* 1,5 wie im Entwurf: 13,5 px ergeben damit 20,25 px Zeile und mit
       9 px Polsterung und 2 px Rand eine 42 px hohe Pille — der gemessene
       Wert der umrandeten Pille des Entwurfs. Mit 1,4 war sie 41. */
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition_fast), border-color var(--transition_fast),
                color var(--transition_fast), transform var(--transition_fast);
}

/* Das Symbol ist eine Maske und übernimmt über currentColor immer exakt die
   Schriftfarbe des Knopfs — auch bei primären, akzentuierten und gefährlichen
   Varianten. */
.content_link_button_icon {
    width: 15px;
    height: 15px;
    color: inherit;
}

.content_link_button_label {
    min-width: 0;
}

/* Beim Überfahren wechselt **eine** Eigenschaft, nicht drei.
   ------------------------------------------------------------------------
   Der Entwurf kennt genau zwei Antworten einer Schaltfläche:

     umrandet + weiß  →  der Rand wird navy   (22 Stellen)
     gefüllt          →  sie sinkt ein, scale (12 Stellen)

   Nichts sonst. Vorher wechselten hier Fläche, Rand **und** Schriftfarbe
   zugleich; zusammen mit dem Einsinken der gefüllten Knöpfe entstand der
   Eindruck, jede Schaltfläche reagiere anders — "manche ändern ihre Größe,
   manche bekommen einen Rahmen". Das stimmte. */
.content_link_button:hover {
    border-color: var(--color_accent);
}

/* Die Hauptaktion trägt das Markenlime mit dunklem Text (5,29:1). Das
   Referenzdesign quittiert den Druck mit einem leichten Einsinken statt
   mit einem Farbwechsel. */
.content_link_button_primary {
    background: var(--color_brand);
    border-color: var(--color_brand);
    color: var(--color_text_on_brand);
}

/* Gefüllt heißt: kein Farbwechsel, nur das Einsinken. Die Zeilen für
   Fläche, Rand und Schrift stehen hier, damit die Grundregel darüber sie
   nicht überschreibt — sie wiederholen den Ruhezustand, sie ändern ihn nicht. */
.content_link_button_primary:hover {
    background: var(--color_brand);
    border-color: var(--color_brand);
    color: var(--color_text_on_brand);
    transform: scale(0.98);
}

/* Zweite Stufe: Navy statt Lime, für Aktionen mit Tragweite — erneut
   senden, wiedervorlegen, Mandant wechseln. */
.content_link_button_accent {
    background: var(--color_accent);
    border-color: var(--color_accent);
    color: var(--color_text_inverted);
}

.content_link_button_accent:hover {
    background: var(--color_accent);
    border-color: var(--color_accent);
    color: var(--color_text_inverted);
    transform: scale(0.98);
}

.content_link_button_danger {
    border-color: var(--color_danger);
    color: var(--color_danger);
}

.content_link_button_danger:hover {
    background: var(--color_danger_soft);
    border-color: var(--color_danger);
    color: var(--color_danger);
}

.content_link_button_quiet {
    border-color: transparent;
    background: transparent;
}

.content_link_button_small {
    padding: var(--space_8) var(--space_16);
    font-size: var(--font_size_sm);
}

.content_link_button:disabled,
.content_link_button_disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- 7a. content_facts ----------------------------------------------------- */

/* Eckdaten einer Karte: Beschriftung und Wert, paarweise in zwei Spalten.

   Warum nicht definitionList: Jene stapelt untereinander und ist für eine
   Detailansicht gedacht, in der jede Angabe eine Zeile wert ist. Auf einer
   Karte konkurrieren vier Angaben um wenig Platz; zwei Spalten zeigen sie
   auf einen Blick, statt die Karte doppelt so hoch zu machen. */
.content_facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space_10);
}

.content_facts_stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space_8);
}

.content_facts_stacked .content_fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space_12);
}

.content_facts_stacked .content_fact_label {
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
    font-weight: var(--font_weight_regular);
    letter-spacing: 0;
    text-transform: none;
}

.content_facts_stacked .content_fact_value {
    margin: 0;
    font-weight: var(--font_weight_bold);
    text-align: right;
}

.content_fact {
    min-width: 0;
}

.content_fact_label {
    font-size: var(--font_size_xxs);
    font-weight: var(--font_weight_bold);
    letter-spacing: var(--letter_spacing_label);
    text-transform: uppercase;
    color: var(--color_text_muted);
}

.content_fact_value {
    margin-top: 1px;
    font-size: var(--font_size_13);
    color: var(--color_text);
    overflow-wrap: anywhere;
}

/* Eine Karte mit Kanalstreifen: Der Kanal ist die wichtigste Eigenschaft
   eines Provider Profiles und steht deshalb als Farbe an der Oberkante —
   erkennbar, bevor man den Namen gelesen hat. Der Kanalname steht daneben;
   Farbe ist nie alleiniger Träger. */
.content_box_channel {
    border-top: 4px solid var(--color_neutral);
}

.content_box_channel[data-channel="email"]        { border-top-color: var(--color_channel_email); }
.content_box_channel[data-channel="telegram"]     { border-top-color: var(--color_channel_telegram); }
.content_box_channel[data-channel="whatsapp"]     { border-top-color: var(--color_channel_whatsapp); }
.content_box_channel[data-channel="webhook"]      { border-top-color: var(--color_channel_webhook); }
.content_box_channel[data-channel="browser_push"] { border-top-color: var(--color_channel_browser_push); }
.content_box_channel[data-channel="signal"]       { border-top-color: var(--color_channel_signal); }

/* --- 8a. content_channel --------------------------------------------------- */

/* Kanalmarke: ein farbiges Quadrat vor dem Kanalnamen.

   Die Farbe ist Wiedererkennung, nicht Aussage — der Name steht immer
   daneben (Richtlinie Kap. 3.3). Die Zuordnung läuft über data-channel
   und nicht über eine Klasse je Kanal: Der Kanal ist eine Eigenschaft des
   Datensatzes, kein Zustand des Elements (ucs.md §7.2). Kommt ein Kanal
   hinzu, genügt hier eine Zeile. */
.content_channel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color_text);
    white-space: nowrap;
}

.content_channel_pill {
    padding: var(--space_4) var(--space_12);
    border-radius: var(--radius_pill);
    background: var(--color_surface_sunken);
    font-size: var(--font_size_meta);
    font-weight: var(--font_weight_bold);
}

.content_channel_mark {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--color_neutral);
}

/* Die Marke trägt ihre Farbe auch allein: Sie steht nicht immer neben dem
   Kanalnamen, sondern manchmal in einem Kopf, der den Namen selbst führt. */
.content_channel_mark[data-channel="email"]        { background: var(--color_channel_email); }
.content_channel_mark[data-channel="telegram"]     { background: var(--color_channel_telegram); }
.content_channel_mark[data-channel="whatsapp"]     { background: var(--color_channel_whatsapp); }
.content_channel_mark[data-channel="webhook"]      { background: var(--color_channel_webhook); }
.content_channel_mark[data-channel="browser_push"] { background: var(--color_channel_browser_push); }
.content_channel_mark[data-channel="signal"]       { background: var(--color_channel_signal); }

.content_channel[data-channel="email"]        .content_channel_mark { background: var(--color_channel_email); }
.content_channel[data-channel="telegram"]     .content_channel_mark { background: var(--color_channel_telegram); }
.content_channel[data-channel="whatsapp"]     .content_channel_mark { background: var(--color_channel_whatsapp); }
.content_channel[data-channel="webhook"]      .content_channel_mark { background: var(--color_channel_webhook); }
.content_channel[data-channel="browser_push"] .content_channel_mark { background: var(--color_channel_browser_push); }
.content_channel[data-channel="signal"]       .content_channel_mark { background: var(--color_channel_signal); }

/* --- 9a. content_chips ----------------------------------------------------- */

/* Eine Auswahl unter mehreren, nicht eine Handlung.

   Warum eine eigene Komponente und keine Variante von
   content_link_button: Eine Schaltfläche löst etwas aus und trägt deshalb
   einen Rand. Ein Chip *ist* ein Zustand — ausgewählt oder nicht — und
   hat keinen Rand, sondern eine gefüllte oder leere Fläche. Die
   Auszeichnung ist Navy: Lime bleibt der Hauptaktion vorbehalten, sonst
   sähe eine bloße Auswahl aus wie der Aufruf zum Handeln. */
.content_chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_4);
}

.content_chip {
    padding: var(--space_8) 15px;
    border: 0;
    border-radius: var(--radius_pill);
    background: transparent;
    color: var(--color_text_muted);
    font-family: inherit;
    font-size: var(--font_size_base);
    font-weight: var(--font_weight_bold);
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition_fast), color var(--transition_fast);
}

.content_chip:hover {
    color: var(--color_text);
}

.content_chip_active,
.content_chip_active:hover {
    background: var(--color_accent);
    color: var(--color_text_inverted);
}

/* Zahl am Chip — etwa "Dead Letters 40". Sie erbt die Farbe des Chips
   und braucht deshalb keine eigene. */
.content_chip_count {
    margin-left: var(--space_8);
    font-size: var(--font_size_sm);
    opacity: 0.75;
}

/* --- 9b. content_segment --------------------------------------------------
   Ein Feldwert aus wenigen, und nur einer davon.

   Die **dritte** Gestalt dieser Art, und die Unterscheidung trägt jedes Mal
   eine Bedeutung:

     content_chips    schränkt eine Liste ein — derselbe Inhalt, weniger davon
     content_tabs     wechselt den Abschnitt — dahinter liegt etwas anderes
     content_segment  wählt **einen Wert eines Feldes** in einem Formular —
                      Priorität, Betriebsart, Format. Nichts wird gefiltert und
                      nichts gewechselt; es wird etwas festgelegt.

   Deshalb sitzt die Gruppe in einem eigenen Rahmen mit Innenabstand: Sie ist
   ein Bedienelement, kein Streifen über einer Liste. Fachlich ist es eine
   Gruppe von Radioknöpfen — genau das sagt die Auszeichnung
   (role="radiogroup" mit aria-checked), während die Pillen aussehen wie
   im Entwurf.

   Kein Zeigerwechsel: Der Entwurf gibt diesen Knoepfen kein style-hover. */
.content_segment {
    display: inline-flex;
    align-items: center;
    /* 3px: Der Spalt zwischen zwei Pillen **innerhalb** eines Rahmens — kein
       Abstand zwischen Bausteinen, deshalb nicht auf der Leiter. */
    gap: 3px;
    flex-wrap: wrap;
    max-width: 100%;
    padding: var(--space_4);
    border: 1px solid var(--color_border);
    border-radius: var(--radius_pill);
    background: var(--color_surface);
}

.content_segment_option {
    /* 7px/15px: die Maße des Entwurfs für eine Pille in einem Rahmen. Höher
       als eine Filterpille darf sie nicht sein, sonst sprengt sie ihn. */
    padding: 7px 15px;
    border: 0;
    border-radius: var(--radius_pill);
    background: transparent;
    /* Der Entwurf gibt der nicht gewählten Pille `--q-dark`, und das ist
       #4B4B4B — die gewöhnliche Textfarbe, nicht das Petrol von
       `--color_text_display`. Das gilt nur für große Schrift und erreicht bei
       13 px die Kontrastschwelle nicht. */
    color: var(--color_text);
    font-family: inherit;
    font-size: var(--font_size_13);
    font-weight: var(--font_weight_bold);
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition_fast), color var(--transition_fast);
}

.content_segment_option_active {
    background: var(--color_accent);
    color: var(--color_text_inverted);
}

.content_segment_option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- 9c. content_steps ----------------------------------------------------
   Eine Kette von Schritten mit Ausgang — Prüfkette, Probelauf, Wiedervorlage.

   Der Entwurf verwendet sie überall dort, wo mehrere Dinge **der Reihe nach**
   geprüft wurden und jedes einen Ausgang hat. Was sie von einer Liste
   unterscheidet: Jeder Schritt trägt ein Zeichen, das den Ausgang sofort
   lesbar macht, und eine Zeile darunter, die ihn begründet.

   Drei Ausgänge, und die Farben stehen schon als Statustoken bereit:
     ok    ✓  gelungen / trifft zu
     warn  !  gelungen, aber mit Einschränkung
     off   ○  nicht geprüft oder übersprungen — kein Fehler

   Die Trennlinie steht **oben** an jeder Zeile, nicht unten: So hat die Kette
   keinen Strich unter dem letzten Schritt, der wie ein abgeschnittener
   weiterer Schritt aussähe. */
.content_steps {
    display: flex;
    flex-direction: column;
    gap: var(--space_2);
}

.content_step {
    display: flex;
    align-items: flex-start;
    /* 11px: waagrechter Abstand zwischen Zeichen und Text innerhalb einer
       Zeile — ein Maß dieses Bausteins, keine Stufe der Leiter. */
    gap: 11px;
    padding: var(--space_9) 0;
    border-top: 1px solid var(--color_border);
}

.content_step_mark {
    /* 22px: der Durchmesser des Zeichens im Entwurf. */
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius_circle);
    background: var(--color_neutral_soft);
    color: var(--color_neutral);
    font-size: var(--font_size_meta);
    font-weight: var(--font_weight_bold);
}

.content_step_ok .content_step_mark {
    background: var(--color_success_soft);
    color: var(--color_success);
}

.content_step_warn .content_step_mark {
    background: var(--color_warning_soft);
    color: var(--color_warning);
}

.content_step_body {
    flex: 1;
    min-width: 0;
}

.content_step_label {
    display: block;
    font-size: var(--font_size_base);
    font-weight: var(--font_weight_bold);
    color: var(--color_text);
}

.content_step_detail {
    display: block;
    margin-top: 1px;
    font-size: var(--font_size_sm);
    color: var(--color_text_muted);
}

/* --- 10. content_tags ------------------------------------------------------ */

.content_tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_4);
}

.content_tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space_4);
    padding: var(--space_2) 9px;
    border: 0;
    border-radius: var(--radius_pill);
    background: var(--color_neutral_soft);
    color: var(--color_text);
    font-size: var(--font_size_eyebrow);
    font-weight: var(--font_weight_bold);
    white-space: nowrap;
}

.content_tag_mono {
    font-family: var(--font_family_mono);
    letter-spacing: -0.01em;
}

.content_tag_highlight {
    background: var(--color_transform_soft);
}

/* --- 11. content_annotation ------------------------------------------------ */

.content_annotation {
    display: flex;
    gap: var(--space_12);
    padding: var(--space_16) var(--space_20);
    border: 0;
    box-shadow: var(--shadow_sm);
    border-left-width: 4px;
    border-radius: var(--radius_md);
    background: var(--color_surface);
    font-size: var(--font_size_sm);
}

/* Im Dialog ohne Schein. Der Schatten hebt eine weiße Fläche von grauem
   Grund ab; hier liegt sie auf Weiß und trennt sich ohnehin durch ihre Farbe.
   Der Entwurf zeigt seine Hinweise im Dialog als flache farbige Fläche mit
   12 px Radius — mehr nicht.

   Beim Nachmessen aufgefallen: Die `border-left-width: 4px` oben und die
   `border-left-color` der Zustandsvarianten unten rendern **nie**. `border: 0`
   setzt zugleich `border-style: none`, und ohne Stil bleibt jede Breite
   wirkungslos. Das Ergebnis ist zufällig richtig — der Entwurf gibt seinen
   Hinweisen keine Randmarke —, aber die Regeln behaupten etwas anderes. Sie
   bleiben vorerst stehen, weil ihre Entfernung jede Zustandsvariante
   berührt; als Befund geführt. */
.window_content .content_annotation {
    box-shadow: none;
}

.content_annotation_info    { border-left-color: var(--color_info);    background: var(--color_info_soft); }
.content_annotation_success { border-left-color: var(--color_success); background: var(--color_success_soft); }
.content_annotation_warning { border-left-color: var(--color_warning); background: var(--color_warning_soft); }
.content_annotation_danger  { border-left-color: var(--color_danger);  background: var(--color_danger_soft); }

.content_annotation_title {
    margin: 0 0 var(--space_4);
    font-weight: var(--font_weight_bold);
}

.content_annotation_body {
    margin: 0;
}

/* --- 12. navigation -------------------------------------------------------- */

.navigation {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color_surface_inverted);
    color: var(--color_text_inverted);
}

.navigation_header {
    display: flex;
    align-items: center;
    gap: var(--space_12);
    padding: var(--space_16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.navigation_body {
    flex: 1;
    padding: var(--space_12) 0;
    overflow-y: auto;
}

.navigation_group_caption {
    padding: var(--space_16) var(--space_16) var(--space_4);
    color: rgba(247, 249, 252, 0.62);
    font-size: var(--font_size_xs);
    font-weight: var(--font_weight_medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.navigation_items {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation_item {
    display: flex;
    align-items: center;
    gap: var(--space_12);
    padding: var(--space_8) var(--space_16);
    color: rgba(247, 249, 252, 0.88);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--transition_fast), color var(--transition_fast);
}

.navigation_item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color_text_inverted);
}

/* Der aktive Eintrag wird über Farbe UND Balken UND aria-current markiert —
   Farbe allein wäre für farbfehlsichtige Nutzung nicht ausreichend. */
.navigation_item_active {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: #6ba7e8;
    color: #ffffff;
    font-weight: var(--font_weight_medium);
}

.navigation_item_icon {
    width: 1.15rem;
    flex: none;
    text-align: center;
    opacity: 0.9;
}

.navigation_item_title {
    flex: 1;
    min-width: 0;
}

.navigation_item_description {
    display: block;
    color: rgba(247, 249, 252, 0.6);
    font-size: var(--font_size_xs);
}

.navigation_item_badge {
    padding: 0 var(--space_8);
    border-radius: 999px;
    background: var(--color_danger);
    color: #ffffff;
    font-size: var(--font_size_xs);
    font-weight: var(--font_weight_bold);
}

.navigation_footer {
    padding: var(--space_12) var(--space_16);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-size: var(--font_size_xs);
    color: rgba(247, 249, 252, 0.62);
}

/* --- 13. window ------------------------------------------------------------ */

.window_background {
    position: fixed;
    inset: 0;
    /* Über allem, was der Rahmen aufklappen kann — Menüs (70) und die
       Trefferliste der Suche (80). Sonst legt sich eine offene Liste über den
       Dialog und fängt dessen Klicks ab; genau das ist passiert. */
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh var(--space_20) var(--space_40);
    background: rgba(16, 49, 78, 0.30);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    overflow-y: auto;
}

.window_background[hidden] {
    display: none;
}

.window_background_confirm {
    align-items: center;
    padding-top: var(--space_20);
    padding-bottom: var(--space_20);
}

.window {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 86vh;
    border-radius: var(--radius_xl);
    background: var(--color_surface);
    box-shadow: var(--shadow_modal);
    overflow: hidden;
    transform-origin: top center;
    animation: window_open var(--transition_panel);
}

.window_wide  { max-width: 1040px; }
.window_narrow { max-width: 500px; }

@keyframes window_open {
    from { transform: translateY(12px) scale(0.985); }
    to { transform: none; }
}

.window_header {
    display: flex;
    align-items: flex-start;
    gap: var(--space_16);
    padding: var(--space_24) var(--space_28) var(--space_18);
    border-bottom: 1px solid var(--color_border);
}

.window_header_body {
    flex: 1;
    min-width: 0;
}

/* Der Eyebrow sagt, worum es geht; der Titel, was geschieht; die Unterzeile,
   woran. Drei Zeilen, drei verschiedene Fragen — deshalb drei Grade. */
.window_header_eyebrow {
    margin: 0;
    font-size: var(--font_size_xs);
    font-weight: var(--font_weight_bold);
    letter-spacing: var(--letter_spacing_eyebrow);
    text-transform: uppercase;
    color: var(--color_accent_hover);
}

.window_header_eyebrow[hidden],
.window_header_description[hidden] {
    display: none;
}

.window_header_description {
    margin: var(--space_6) 0 0;
    font-size: var(--font_size_13);
    color: var(--color_text_muted);
    text-wrap: pretty;
}

.window_header_eyebrow:not([hidden]) + .window_header_title {
    margin-top: 5px;
}

.window_header_title {
    margin: 0;
    font-family: var(--font_family_display);
    font-size: var(--font_size_dialog);
    font-weight: var(--font_weight_bold);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--color_accent);
}

.window_header_controls {
    display: flex;
    gap: var(--space_4);
}

/* Das Schließkreuz ist jetzt ein Symbol, kein "×"-Zeichen: Die Glyphe
   sitzt je nach Schrift anders in der Zeile und hat in Museo Sans andere
   Strichstärken als jedes andere Symbol der Oberfläche. */
.window_header_control_icon {
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

.window_header_control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius_circle);
    background: transparent;
    color: var(--color_text_muted);
    font-size: var(--font_size_md);
    line-height: 1;
    cursor: pointer;
}

/* Nur die Fläche, wie im Entwurf. Ein zusätzlicher Farbwechsel der Glyphe
   wäre die zweite Antwort auf dieselbe Geste. */
.window_header_control:hover {
    background: var(--color_surface_sunken);
}

.window_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space_16);
    min-width: 0;
    padding: var(--space_22) var(--space_26) var(--space_26);
    overflow-x: hidden;
    overflow-y: auto;
}

/* Zwei Seiten mit verschiedenen Aufgaben.
   ------------------------------------------------------------------------
   Rechts steht, was den Vorgang beendet — Abbrechen und die Hauptaktion.
   Links steht, was den Gegenstand **entfernt**. Der Abstand dazwischen ist
   die eigentliche Schutzmaßnahme: Wer den Dialog rasch bestätigt, kommt dem
   Löschen nicht nahe.

   Das Löschen trägt deshalb auch keine gefüllte Fläche. Es ist kein
   gleichrangiges Angebot, sondern ein Ausweg — Schrift in der Warnfarbe,
   sonst nichts. */
.window_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space_12);
    flex-wrap: wrap;
    padding: var(--space_16) var(--space_28);
    border-top: 1px solid var(--color_border);
    background: var(--color_surface_sunken);
}

.window_controls_destructive:empty {
    display: none;
}

.window_controls_primary {
    display: flex;
    gap: var(--space_10);
    margin-left: auto;
}

.window_control_destructive {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: var(--space_8) var(--space_4);
    border: 0;
    background: transparent;
    color: var(--color_danger_mark);
    font-family: inherit;
    font-size: var(--font_size_13);
    font-weight: var(--font_weight_bold);
    cursor: pointer;
    transition: opacity var(--transition_fast);
}

.window_control_destructive:hover {
    opacity: 0.78;
}

.window_control_destructive_icon {
    width: 14px;
    height: 14px;
}

.window_control {
    /* Erbt die Optik der Basisknöpfe; siehe .content_link_button */
}

/* --- 14. notifications ------------------------------------------------------ */

.notifications {
    position: fixed;
    right: var(--space_16);
    bottom: var(--space_16);
    /* Über dem Dialog (90): Eine Rückmeldung, die der Dialog auslöst, muss
       sichtbar sein, auch solange er offen steht. Der Entwurf legt sie
       ebenso zuoberst. */
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: var(--space_8);
    width: min(28rem, calc(100vw - 2 * var(--space_16)));
    /* Sichtbar über dem Dialog, aber ohne ihn zu **bedienen**.
       ------------------------------------------------------------------
       Die Leiste steht unten rechts — dort, wo ein Dialog seine
       Hauptaktion trägt. Und eine Fehlermeldung bleibt absichtlich
       stehen, bis sie gelesen ist. Zusammen ergab das eine tote
       Schaltfläche: `elementFromPoint` auf der Mitte von „Senden" lieferte
       die Meldung, nicht den Knopf — der Klick ging ins Nichts, ohne
       jeden Hinweis.
       Dieselbe Ursachenfamilie wie bei der Trefferliste, die einmal über
       dem Dialog lag: eine Ebene darüber, die dessen Handlungsfläche
       besetzt. Die Meldung bleibt deshalb sichtbar, nimmt aber keine
       Zeigerereignisse an; nur ihr Schließen-Knopf und ein Verweis darin
       tun es. */
    pointer-events: none;
}

.notification {
    pointer-events: none;
    display: flex;
    gap: var(--space_12);
    padding: var(--space_16) var(--space_20);
    border: 1px solid var(--color_border);
    border-left-width: 4px;
    border-radius: var(--radius_md);
    background: var(--color_surface);
    box-shadow: var(--shadow_md);
}

.notification_success { border-left-color: var(--color_success); }
.notification_warning { border-left-color: var(--color_warning); }
.notification_danger  { border-left-color: var(--color_danger); }
.notification_info    { border-left-color: var(--color_info); }

.notification_header {
    display: flex;
    align-items: baseline;
    gap: var(--space_8);
}

.notification_body {
    flex: 1;
    min-width: 0;
}

.notification_title {
    margin: 0;
    font-size: var(--font_size_base);
    font-weight: var(--font_weight_bold);
}

.notification_description {
    margin: var(--space_4) 0 0;
    color: var(--color_text_muted);
    font-size: var(--font_size_sm);
    overflow-wrap: anywhere;
}

.notification_link {
    pointer-events: auto;
    margin-top: var(--space_8);
    display: inline-block;
    font-size: var(--font_size_sm);
}

.notification_control {
    /* Die beiden Ausnahmen von `pointer-events: none` der Leiste: Was man
       anklicken soll, muss angeklickt werden können. */
    pointer-events: auto;
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--color_text_muted);
    font-size: var(--font_size_md);
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--space_4);
}

.notification_control:hover {
    color: var(--color_text);
}

/* --- 15. progress_indicator ------------------------------------------------- */

.progress_indicator {
    display: flex;
    flex-direction: column;
    gap: var(--space_4);
}

.progress_indicator_text {
    display: flex;
    justify-content: space-between;
    gap: var(--space_8);
    font-size: var(--font_size_sm);
    color: var(--color_text_muted);
}

.progress_indicator_progress_bar {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color_neutral_soft);
    overflow: hidden;
}

.progress_indicator_progress_bar_progress_indicator {
    height: 100%;
    background: var(--color_accent);
    border-radius: inherit;
    transition: width 240ms ease;
}

.progress_indicator_success .progress_indicator_progress_bar_progress_indicator { background: var(--color_success); }
.progress_indicator_warning .progress_indicator_progress_bar_progress_indicator { background: var(--color_warning); }
.progress_indicator_danger  .progress_indicator_progress_bar_progress_indicator { background: var(--color_danger); }

/* --- 16. Hilfsklassen und Zustände ------------------------------------------ */

.content_value_mono {
    font-family: var(--font_family_mono);
    font-size: var(--font_size_sm);
    overflow-wrap: anywhere;
}

.content_value_muted {
    color: var(--color_text_muted);
}

.content_value_numeric {
    font-variant-numeric: tabular-nums;
}

.is_hidden {
    display: none !important;
}

.is_loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

/* --- 17. Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
    .content_form_item {
        grid-template-columns: 1fr;
        gap: var(--space_8);
    }

    .content_form_item_caption {
        padding-top: 0;
    }
}

@media (max-width: 640px) {
    .content_container {
        padding: 0 var(--space_16);
    }

    .content_header {
        flex-direction: column;
    }

    .content_header_controls {
        margin-left: 0;
        width: 100%;
    }

    .content_link_button {
        /* Fingerfreundliche Zielgröße auf Touch-Geräten. */
        min-height: 44px;
    }

    .notifications {
        right: var(--space_8);
        left: var(--space_8);
        bottom: var(--space_8);
        width: auto;
    }

    .window_background,
    .window_background_confirm {
        align-items: flex-start;
        padding: var(--space_12);
    }

    .window {
        max-height: calc(100dvh - var(--space_24));
    }

    .window_header {
        padding: var(--space_20) var(--space_20) var(--space_16);
    }

    .window_content {
        padding: var(--space_18) var(--space_20) var(--space_22);
    }

    .window_controls {
        padding: var(--space_14) var(--space_20);
    }
}

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

/* Im Druck sind Navigation und Steuerelemente ohne Wert. */
@media print {
    .navigation,
    .notifications,
    .content_header_controls,
    .window_background {
        display: none !important;
    }

    body {
        background: #ffffff;
    }
}

/* --- 18. Symbole ---------------------------------------------------------- */

/* Symbole werden als Maske gefärbt, nicht als Bild eingebunden. Zwei Gründe:
   Sie folgen damit der Textfarbe — ein aktiver Navigationseintrag braucht
   kein zweites Bild in Weiß — und die Zuordnung läuft über ein
   data-Attribut statt über einen Inline-Stil, den die Content Security
   Policy verwerfen würde (ucs.md Kap. 7.2). */

[data-icon] {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

[data-icon="add"] { -webkit-mask-image: url("/assets/icons/add.svg"); mask-image: url("/assets/icons/add.svg"); }
[data-icon="bell"] { -webkit-mask-image: url("/assets/icons/bell.svg"); mask-image: url("/assets/icons/bell.svg"); }
[data-icon="arrow_down"] { -webkit-mask-image: url("/assets/icons/arrow_down.svg"); mask-image: url("/assets/icons/arrow_down.svg"); }
[data-icon="arrow_left"] { -webkit-mask-image: url("/assets/icons/arrow_left.svg"); mask-image: url("/assets/icons/arrow_left.svg"); }
[data-icon="arrow_right"] { -webkit-mask-image: url("/assets/icons/arrow_right.svg"); mask-image: url("/assets/icons/arrow_right.svg"); }
[data-icon="close"] { -webkit-mask-image: url("/assets/icons/close.svg"); mask-image: url("/assets/icons/close.svg"); }
[data-icon="conversation"] { -webkit-mask-image: url("/assets/icons/conversation.svg"); mask-image: url("/assets/icons/conversation.svg"); }
[data-icon="delete"] { -webkit-mask-image: url("/assets/icons/delete.svg"); mask-image: url("/assets/icons/delete.svg"); }
[data-icon="download"] { -webkit-mask-image: url("/assets/icons/download.svg"); mask-image: url("/assets/icons/download.svg"); }
[data-icon="edit"] { -webkit-mask-image: url("/assets/icons/edit.svg"); mask-image: url("/assets/icons/edit.svg"); }
[data-icon="expand"] { -webkit-mask-image: url("/assets/icons/expand.svg"); mask-image: url("/assets/icons/expand.svg"); }
[data-icon="filter"] { -webkit-mask-image: url("/assets/icons/filter.svg"); mask-image: url("/assets/icons/filter.svg"); }
[data-icon="grid"] { -webkit-mask-image: url("/assets/icons/grid.svg"); mask-image: url("/assets/icons/grid.svg"); }
[data-icon="home"] { -webkit-mask-image: url("/assets/icons/home.svg"); mask-image: url("/assets/icons/home.svg"); }
[data-icon="info"] { -webkit-mask-image: url("/assets/icons/info.svg"); mask-image: url("/assets/icons/info.svg"); }
[data-icon="key"] { -webkit-mask-image: url("/assets/icons/key.svg"); mask-image: url("/assets/icons/key.svg"); }
[data-icon="lightbulb"] { -webkit-mask-image: url("/assets/icons/lightbulb.svg"); mask-image: url("/assets/icons/lightbulb.svg"); }
[data-icon="link_external"] { -webkit-mask-image: url("/assets/icons/link_external.svg"); mask-image: url("/assets/icons/link_external.svg"); }
[data-icon="list"] { -webkit-mask-image: url("/assets/icons/list.svg"); mask-image: url("/assets/icons/list.svg"); }
[data-icon="marker"] { -webkit-mask-image: url("/assets/icons/marker.svg"); mask-image: url("/assets/icons/marker.svg"); }
[data-icon="menu"] { -webkit-mask-image: url("/assets/icons/menu.svg"); mask-image: url("/assets/icons/menu.svg"); }
[data-icon="note"] { -webkit-mask-image: url("/assets/icons/note.svg"); mask-image: url("/assets/icons/note.svg"); }
[data-icon="price_tag"] { -webkit-mask-image: url("/assets/icons/price_tag.svg"); mask-image: url("/assets/icons/price_tag.svg"); }
[data-icon="search"] { -webkit-mask-image: url("/assets/icons/search.svg"); mask-image: url("/assets/icons/search.svg"); }
[data-icon="settings"] { -webkit-mask-image: url("/assets/icons/settings.svg"); mask-image: url("/assets/icons/settings.svg"); }
[data-icon="shine"] { -webkit-mask-image: url("/assets/icons/shine.svg"); mask-image: url("/assets/icons/shine.svg"); }
[data-icon="sort"] { -webkit-mask-image: url("/assets/icons/sort.svg"); mask-image: url("/assets/icons/sort.svg"); }
[data-icon="stats"] { -webkit-mask-image: url("/assets/icons/stats.svg"); mask-image: url("/assets/icons/stats.svg"); }
[data-icon="summary"] { -webkit-mask-image: url("/assets/icons/summary.svg"); mask-image: url("/assets/icons/summary.svg"); }
[data-icon="sync"] { -webkit-mask-image: url("/assets/icons/sync.svg"); mask-image: url("/assets/icons/sync.svg"); }
[data-icon="user"] { -webkit-mask-image: url("/assets/icons/user.svg"); mask-image: url("/assets/icons/user.svg"); }

/* --- 7b. Auswahlliste und Bedingungen -------------------------------------- */

/* Eine kompakte Liste, die selbst eine Karte ist. content_list_compact
   verzichtet auf Fläche und Schein, weil es meist IN einer Karte steht; als
   linke Spalte eines Zweispalters ist es die Karte. */
.content_list_boxed {
    border-radius: var(--radius_lg);
    background: var(--color_surface);
    box-shadow: var(--shadow_sm);
    overflow: hidden;
}

.content_list_compact.content_list_boxed .content_list_item {
    align-items: center;
    gap: var(--space_14);
    padding: var(--space_13) var(--space_18);
    border-radius: 0;
}

.content_list_boxed .content_list_item_active,
.content_list_boxed button.content_list_item_active:hover {
    background: var(--color_surface_sunken);
    box-shadow: none;
}

.content_list_compact.content_list_boxed .content_list_item_title {
    font-size: var(--font_size_control);
    font-weight: var(--font_weight_bold);
}

.content_list_compact.content_list_boxed .content_list_item_description {
    margin-top: var(--space_2);
    font-size: var(--font_size_detail);
}

/* Die getroffene Wahl bleibt sichtbar, auch wenn der Zeiger weiterzieht.
   Das Markup trägt zusätzlich aria-current — eine Fläche allein wäre für
   Screenreader bedeutungslos. */
.content_list_item_active,
button.content_list_item_active:hover {
    background: var(--color_accent_soft);
}

/* Die laufende Nummer einer geordneten Liste. Bei Routing-Regeln ist die
   Reihenfolge die Aussage: Die erste zutreffende Regel entscheidet. */
.content_list_item_ordinal {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--radius_sm);
    background: var(--color_surface_sunken);
    color: var(--color_text_muted);
    font-family: var(--font_family_mono);
    font-size: var(--font_size_meta);
    font-weight: var(--font_weight_bold);
}

/* Ein Karteninhalt, dessen Abschnitte untereinander stehen. */
.content_box_body_stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space_16);
}

/* Bedingungen einer Regel: Feld, Vergleich, Wert — je Zeile eine Bedingung.
   Feld und Wert dicktengleich, weil beide technische Angaben sind; der
   Vergleich dazwischen im Fließtext, weil er die Sprache trägt. */
.content_conditions {
    display: flex;
    flex-direction: column;
    gap: var(--space_6);
}

.content_condition {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space_10);
    padding: var(--space_9) var(--space_12);
    border-radius: var(--radius_sm);
    background: var(--color_surface_sunken);
}

.content_condition_field {
    font-family: var(--font_family_mono);
    font-size: var(--font_size_meta);
    font-weight: var(--font_weight_bold);
    color: var(--color_accent);
}

.content_condition_operator {
    font-size: var(--font_size_meta);
    color: var(--color_text_muted);
}

.content_condition_value {
    font-family: var(--font_family_mono);
    font-size: var(--font_size_meta);
    color: var(--color_text);
    overflow-wrap: anywhere;
}

/* --- 7c. content_variant --------------------------------------------------- */

/* Eine Fassung einer Vorlage: Kanal im Kopf, Text auf gesenkter Fläche.

   Die gesenkte Fläche ist Absicht — sie zeigt, dass hier der Text steht, wie
   er verschickt wird, und nicht ein Feld, in das man tippt. */
.content_variant_header {
    display: flex;
    align-items: center;
    gap: var(--space_9);
    padding: var(--space_13) var(--space_18);
    border-bottom: 1px solid var(--color_border);
}

.content_variant_channel {
    flex: 1;
    min-width: 0;
    font-size: var(--font_size_base);
    font-weight: var(--font_weight_bold);
}

.content_variant_locale {
    flex-shrink: 0;
    color: var(--color_text_muted);
    font-size: var(--font_size_detail);
}

.content_variant_body {
    min-height: 150px;
    padding: var(--space_16) var(--space_18);
    background: var(--color_surface_sunken);
}

.content_variant_subject {
    margin-bottom: var(--space_8);
    font-size: var(--font_size_sm);
    font-weight: var(--font_weight_bold);
}

/* pre statt div: Der Text einer Vorlage trägt seine Zeilenumbrüche, und sie
   sind Teil der Nachricht. Die Grundschrift bleibt, weil es kein Quelltext
   ist — nur seine Umbrüche zählen. */
.content_variant_text {
    margin: 0;
    font-family: inherit;
    font-size: var(--font_size_base);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.content_variant_note {
    padding: 0.6875rem var(--space_18);
    background: var(--color_transform_soft);
    color: var(--color_transform);
    font-size: var(--font_size_meta);
}