@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/AgentenAustausch/AgentenAustauschMaske.razor.rz.scp.css */
/* 149 T024 (contracts/werkbank-ui.md §3.6): nur, was die Austausch-Maske von
   den Bausteinen unterscheidet — Optik und Maße kommen aus der Werkbank-
   Familie in app.css (plan A1). Übernommen aus dem abgelösten Postfach (144):
   der Hilfe-Tooltip am Stand; aus der Vorlage (basis.css :595–601): die
   Freigabe-Zeilen. Nur Tokens.

   Der Körper des Details ist eine Flex-Spalte: „Freigabe“ nimmt, was sie
   braucht, der Abschnitt „Briefwechsel“ den Rest — gerollt wird IM Strom
   (144: der Strom springt an sein Ende, der Bezugssprung steuert eine Karte
   an), der Strom-Fuß steht darunter. */

.austausch-körper[b-gdih8uwpmy] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.austausch-freigabe[b-gdih8uwpmy] {
    flex: none;
}

.austausch-briefwechsel[b-gdih8uwpmy] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.austausch-briefwechsel > .af-abschnitt-titel[b-gdih8uwpmy] {
    flex: none;
}

.austausch-briefwechsel[b-gdih8uwpmy]  .af-strom {
    min-height: 160px;
    padding: 2px 0 10px;
}

.austausch-briefwechsel[b-gdih8uwpmy]  .af-strom-fuss {
    padding: 10px 0 14px;
}

/* Freigabe-Zeilen (Vorlage .freigabe-zeilen/.freigabe-zeile). */
.austausch-freigabe-zeilen[b-gdih8uwpmy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.austausch-freigabe-zeile[b-gdih8uwpmy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 13px;
}

.austausch-leise[b-gdih8uwpmy] {
    margin-top: 1px;
    font-size: 12px;
    color: var(--text-3);
}

.austausch-stand[b-gdih8uwpmy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    white-space: nowrap;
}

/* Der Hilfe-Text trägt den Tooltip als gepunktete Unterstreichung (144 MOCK
   .wechsel-stand .hilfe) — reine Anzeige, kein Bedienelement. */
.af-hilfe[b-gdih8uwpmy] {
    cursor: help;
    border-bottom: 1px dotted var(--text-3);
}

.af-empfang-geltung[b-gdih8uwpmy] {
    color: var(--text-3);
}

/* Unter 1100 px wächst die Maske mit dem Inhalt (app.css .af-maske). */
@media (max-width: 1100px) {
    .austausch-körper[b-gdih8uwpmy],
    .austausch-briefwechsel[b-gdih8uwpmy] {
        flex: none;
    }
}
/* /Components/AgentenAustausch/AktiveLesefreigabenListe.razor.rz.scp.css */
/* 163 B6 (T022; maske §1 ⑤, §3): Suche und Filter über der Tabelle; die Tabelle rollt in ihrer
   eigenen Hülle (Muster Anlage-Verwaltung, 162 B-1). Nur Tokens. */
.aktive-lesefreigaben-kopf[b-13xrn5f2mt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.aktive-lesefreigaben-suche[b-13xrn5f2mt] {
    flex: 1 1 200px;
    min-width: 0;
}

.aktive-lesefreigaben-zählung[b-13xrn5f2mt] {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-2);
}

.aktive-lesefreigaben-hülle[b-13xrn5f2mt] {
    max-width: 100%;
    overflow-x: auto;
}

.aktive-lesefreigaben-leer[b-13xrn5f2mt] {
    margin: 0;
}

.lesefreigabe-wirksamkeit[b-13xrn5f2mt] {
    font-weight: 600;
    white-space: nowrap;
}

.lesefreigabe-wirksam[b-13xrn5f2mt] {
    color: var(--green);
}

.lesefreigabe-ausstehend[b-13xrn5f2mt] {
    color: var(--text-3);
}

.lesefreigabe-fehler[b-13xrn5f2mt] {
    color: var(--red-text);
    white-space: normal;
}
/* /Components/AgentenAustausch/CorrespondenceStream.razor.rz.scp.css */
/* 144 D T005 (specs/144-austausch-postfach; MOCK .strom :191, .brief :195–210,
   .bündel :220–226, .kettenende-zeile :228, .chip :211–218, Chips-Farben)
   — der Briefwechsel-Strom. Tokens aus app.css; Richtungs-Gestalt: ausgehend
   rechts (Akzent-Ton), eingehend links (Violett-Ton); Bewegung nur dezent
   aufsteigend und nur bei Bewegungswunsch. */

.af-strom[b-5rm5uc3taf] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 10px;
}

.af-strom-lade[b-5rm5uc3taf] {
    color: var(--text-3);
}

/* Tages-Trenner (MOCK .tag-trenner :192). */
.af-tag-trenner[b-5rm5uc3taf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 12px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.af-tag-trenner[b-5rm5uc3taf]::before,
.af-tag-trenner[b-5rm5uc3taf]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Brief-Karten: aus rechts, ein links (MOCK .brief). */
.af-brief[b-5rm5uc3taf] {
    display: flex;
    margin-bottom: 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .af-brief[b-5rm5uc3taf] {
        animation: af-brief-aufsteigen-b-5rm5uc3taf .22s ease both;
    }
}

.af-brief-aus[b-5rm5uc3taf] {
    justify-content: flex-end;
}

.af-brief-karte[b-5rm5uc3taf] {
    max-width: 72ch;
    min-width: 260px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-3);
    padding: 10px 13px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.af-brief-karte:hover[b-5rm5uc3taf] {
    border-color: var(--border-light);
}

.af-brief-aus .af-brief-karte[b-5rm5uc3taf] {
    background: rgba(108, 140, 255, .09);
    border-color: rgba(108, 140, 255, .35);
}

.af-brief-ein .af-brief-karte[b-5rm5uc3taf] {
    background: rgba(181, 123, 255, .07);
    border-color: rgba(181, 123, 255, .3);
}

.af-brief-kopf[b-5rm5uc3taf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-3);
    flex-wrap: wrap;
}

.af-brief-wer[b-5rm5uc3taf] {
    color: var(--text-2);
    font-weight: 600;
}

.af-brief-agent[b-5rm5uc3taf] {
    font-family: var(--mono);
    font-size: 11px;
}

.af-brief-zeit[b-5rm5uc3taf] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.af-brief-aufgabe[b-5rm5uc3taf] {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

.af-brief-inhalt[b-5rm5uc3taf] {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.af-brief-chips[b-5rm5uc3taf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Bezugs-Chips (MOCK .chip :211–218): der eigene Lauf als klickfreie Info,
   fremde Läufe gestrichelt mit Erklär-Tooltip, Sprünge als Knopf-Chips.
   149 T024 (Angleichung, contracts §1.1 Batch 8): die Bezugs-Chips tragen die
   Marken-Familie af-tag der Vorlage (.brief-chips .af-tag), nicht mehr die
   Filter-Chip-Klasse af-chip — Mindesthöhe, Schriftstärke und Hover der
   Filter-Chips treffen sie so gar nicht erst. Hook-Klassen af-chip-lauf/
   -fremd/-knopf bleiben (plan A3). */
.af-tag[b-5rm5uc3taf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--bg-2);
    font-size: 10.5px;
    white-space: nowrap;
}

.af-chip-fremd[b-5rm5uc3taf] {
    border-style: dashed;
    color: var(--text-3);
    cursor: help;
}

.af-chip-knopf[b-5rm5uc3taf] {
    cursor: pointer;
    font: inherit;
    font-size: 10.5px;
}

.af-chip-knopf:hover[b-5rm5uc3taf] {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* Das Aufblitzen nach einem Bezugssprung (MOCK .blitz :234). */
@media (prefers-reduced-motion: no-preference) {
    .af-brief-karte.af-blitz[b-5rm5uc3taf] {
        animation: af-brief-blitz-b-5rm5uc3taf 1.2s ease;
    }
}

/* Bündel-Klammer (MOCK .bündel :220–226): cyan gestrichelt, EINE Gruppe. */
.af-bündel[b-5rm5uc3taf] {
    border: 1px dashed rgba(56, 217, 196, .5);
    border-radius: var(--radius);
    padding: 10px 12px 4px;
    margin-bottom: 12px;
    background: rgba(56, 217, 196, .04);
}

.af-bündel-kopf[b-5rm5uc3taf] {
    font-size: 11px;
    color: var(--cyan);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.af-bündel-fuss[b-5rm5uc3taf] {
    font-size: 11.5px;
    color: var(--text-2);
    margin: 2px 0 8px;
}

.af-bündel .af-brief[b-5rm5uc3taf] {
    margin-bottom: 8px;
}

.af-bündel-aufgabe[b-5rm5uc3taf] {
    color: var(--accent-2);
    font-weight: 600;
}

/* Kettenende-Zeile (MOCK .kettenende-zeile :228): gelber ehrlicher Abschluss. */
.af-kettenende-zeile[b-5rm5uc3taf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 14px;
    color: var(--yellow-text);
    font-size: 11.5px;
}

.af-kettenende-zeile[b-5rm5uc3taf]::before,
.af-kettenende-zeile[b-5rm5uc3taf]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 176, 32, .35);
}

/* Der Strom-Fuß: das aktive Dementi (FR-114, MOCK :394–399). */
.af-strom-fuss[b-5rm5uc3taf] {
    flex: none;
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}

.af-strom-leer[b-5rm5uc3taf] {
    margin: 18px;
}

@keyframes af-brief-aufsteigen-b-5rm5uc3taf {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes af-brief-blitz-b-5rm5uc3taf {
    0% {
        box-shadow: 0 0 0 2px var(--accent);
    }

    100% {
        box-shadow: 0 0 0 2px transparent;
    }
}
/* /Components/AgentenAustausch/EmpfangsDialog.razor.rz.scp.css */
/* 144 D T004 (specs/144-austausch-postfach; MOCK Empfangs-Dialog :721–784):
   die Feldsprache des Empfangs-Dialogs — Fläche, Rahmen, Radius, Aktionszeile
   und Knopf-Farben kommen aus der Dialog-Familie (app.css .af-modal-*),
   hier steht nur das Eigene: Segmente, Minuten-Feld, Fehlermeldung. */

.af-empfangs-dialog[b-nrpbv6r00e] {
    width: min(460px, calc(100vw - 32px));
}

.af-empfangs-hinweis[b-nrpbv6r00e] {
    margin: 0 0 14px;
}

.af-empfang-feld[b-nrpbv6r00e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.af-empfang-feldname[b-nrpbv6r00e],
.af-empfang-feld label[b-nrpbv6r00e] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Segmente Sofort/Sammelfenster (MOCK .segmente :268–274). 149 T001: die
   Segment-Familie (.af-segmente/.af-segment/.af-segment-an) steht jetzt
   global in app.css. Hier bleibt nur das Eigene des Dialogs: die Segmente
   füllen die Feldbreite und teilen sie gleich auf. */
.af-empfang-feld .af-segmente[b-nrpbv6r00e] {
    display: flex;
}

.af-empfang-feld .af-segment[b-nrpbv6r00e] {
    flex: 1;
    justify-content: center;
    padding: 6.5px 9px;
}

/* Das Minuten-Feld nur im Fenster-Modus; die Fehlermeldung nennt das Feld
   ehrlich (SC-106), rot am Feld (MOCK .feld.fehler). */
.af-empfang-minuten[b-nrpbv6r00e] {
    max-width: 12rem;
}

.af-empfang-feld-fehler .af-empfang-minuten[b-nrpbv6r00e] {
    border-color: var(--red);
}

.af-empfang-fehlermeldung[b-nrpbv6r00e] {
    margin: 0;
    font-size: 11.5px;
    color: var(--red-text);
}
/* /Components/AgentenAustausch/LesefreigabeFormular.razor.rz.scp.css */
/* 163 B6 (T022; maske-agenten-austausch §1 „Bearbeiten an Ort und Stelle“): das Formular steht im
   Abschnitt „Lesefreigaben“ — eingerückt wie eine Abschnitts-Karte, nur Tokens. */
.lesefreigabe-formular[b-e62648b4hx] {
    margin: 8px 0 12px;
    padding: 12px 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
}

.lesefreigabe-feld-hinweis[b-e62648b4hx] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-2);
}

.lesefreigabe-ändern-hinweis[b-e62648b4hx] {
    color: var(--yellow-text);
}

.lesefreigabe-zähler[b-e62648b4hx] {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-2);
    text-align: right;
}

.lesefreigabe-formular[b-e62648b4hx]  .af-formular-fuß {
    margin: 4px -14px 0;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}
/* /Components/AgentenAustausch/LesefreigabeModal.razor.rz.scp.css */
/* 163 B6 (T022; maske §1 „Modal“): Kopfdaten als Feldliste, Verlauf als Tabelle — nur Tokens. */
.lesefreigabe-modal[b-xrfqxeg5bv] {
    width: min(760px, calc(100vw - 32px));
}

.lesefreigabe-modal-felder[b-xrfqxeg5bv] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 10px 0 14px;
    font-size: 13px;
}

.lesefreigabe-modal-feld[b-xrfqxeg5bv] {
    display: contents;
}

.lesefreigabe-modal-feld dt[b-xrfqxeg5bv] {
    color: var(--text-2);
}

.lesefreigabe-modal-feld dd[b-xrfqxeg5bv] {
    margin: 0;
    overflow-wrap: anywhere;
}

.lesefreigabe-modal-leise[b-xrfqxeg5bv] {
    color: var(--text-3);
}

.lesefreigabe-modal-verlauf-titel[b-xrfqxeg5bv] {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

.lesefreigabe-verlauf-hülle[b-xrfqxeg5bv] {
    max-height: 280px;
    overflow: auto;
}

.lesefreigabe-verlauf[b-xrfqxeg5bv] {
    width: 100%;
    font-size: 12.5px;
}

.lesefreigabe-verlauf-zeit[b-xrfqxeg5bv] {
    white-space: nowrap;
}

.lesefreigabe-wirksamkeit[b-xrfqxeg5bv] {
    font-weight: 600;
}

.lesefreigabe-wirksam[b-xrfqxeg5bv] {
    color: var(--green);
}

.lesefreigabe-ausstehend[b-xrfqxeg5bv] {
    color: var(--text-3);
}

.lesefreigabe-fehler[b-xrfqxeg5bv],
.lesefreigabe-entzug-ausstehend[b-xrfqxeg5bv] {
    color: var(--red-text);
}

/* Nacharbeit S1: der wirksame Entzug ist der Normalweg — neutral, nicht rot. */
.lesefreigabe-entzug-wirksam[b-xrfqxeg5bv] {
    color: var(--text-2);
}
/* /Components/AgentenAustausch/LesefreigabenAbschnitt.razor.rz.scp.css */
/* 163 B6 (T022; maske-agenten-austausch §2): der Abschnitt „Lesefreigaben“ — Zeilen im Muster
   der Freigabe-Zeilen (bg-3, Rahmen, Radius), Wirksamkeit in Ampel-Farben (grün, grau, rot).
   Der Abschnitt nimmt, was er braucht, und rollt bei vielen Freigaben in sich — der
   Briefwechsel darunter behält seinen Platz. Nur Tokens. */
.lesefreigaben-abschnitt[b-2nclm90v4e] {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 45%;
    overflow-y: auto;
}

.lesefreigaben-gruppe + .lesefreigaben-gruppe[b-2nclm90v4e] {
    margin-top: 10px;
}

.lesefreigaben-gruppe-titel[b-2nclm90v4e] {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

.lesefreigaben-leer[b-2nclm90v4e],
.lesefreigaben-ohne-austausch[b-2nclm90v4e] {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--text-3);
}

.lesefreigabe-zeile[b-2nclm90v4e] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 13px;
}

.lesefreigabe-zeile + .lesefreigabe-zeile[b-2nclm90v4e] {
    margin-top: 6px;
}

.lesefreigabe-zeile-kopf[b-2nclm90v4e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.lesefreigabe-öffnen[b-2nclm90v4e] {
    font-weight: 600;
}

.lesefreigabe-meta[b-2nclm90v4e] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-2);
    font-size: 12px;
}

.lesefreigabe-grund[b-2nclm90v4e] {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-3);
    overflow-wrap: anywhere;
}

.lesefreigabe-wirksamkeit[b-2nclm90v4e] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.lesefreigabe-wirksam[b-2nclm90v4e] {
    color: var(--green);
}

.lesefreigabe-ausstehend[b-2nclm90v4e] {
    color: var(--text-3);
}

.lesefreigabe-fehler[b-2nclm90v4e],
.lesefreigabe-entzug-ausstehend[b-2nclm90v4e] {
    color: var(--red-text);
    white-space: normal;
}
/* /Components/AgentenAustausch/MessageDetailModal.razor.rz.scp.css */
/* 144 D T007 (specs/144-austausch-postfach, FR-112; MOCK :839–841): der
   additive Stapel-Rückweg „‹ Zurück" steht links der Aktionszeile (die
   Familie richtet rechtsbündig aus — der Zurück-Weg ist der linke, neutrale
   Weg, MOCK margin-right:auto). Fläche, Rahmen und Knopf-Rollen bleiben bei
   der Dialog-Familie (app.css .af-modal-*) — hier steht nur die Platzierung. */

.af-modal-actions .nachricht-detail-zurück[b-h1gz9ztsiq] {
    margin-right: auto;
}

/* 144 R B4 (Sichtprobe bro-3; MOCK .d-kontext :253): der Aufgaben-Kontext
   im Feld „Absender“ ist eine EIGENE Zeile unter Absender · Persona — kein
   Inline-Anhang. */
.nachricht-detail-kontext[b-h1gz9ztsiq] {
    display: block;
}
/* /Components/Benutzer/BenutzerMaske.razor.rz.scp.css */
/* 149 T018 (contracts/werkbank-ui.md §3.8): nur, was die Benutzer-Maske von
   den Bausteinen unterscheidet — Optik und Maße kommen aus der
   Werkbank-Familie in app.css (plan A1). Nur Tokens. */

.benutzer-liste[b-nj201d6to7] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.benutzer-liste > li[b-nj201d6to7] {
    margin: 0;
}

/* Organisations-Rechte im Formular: je Organisation Name und Stufe in einer Zeile. */
.users-organisationsrechte[b-nj201d6to7] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.users-organisationsrechte legend[b-nj201d6to7] {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    padding: 0;
}

.users-org-recht[b-nj201d6to7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 200px);
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.users-org-recht label[b-nj201d6to7] {
    color: var(--text-2);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-hinweis[b-nj201d6to7],
.users-ohne-organisation[b-nj201d6to7],
.users-rechte-fehlen[b-nj201d6to7] {
    color: var(--text-3);
    font-size: 12.5px;
    margin: 8px 0 0;
}
/* /Components/Benutzer/ZugriffMaske.razor.rz.scp.css */
/* 149 T019 (contracts/werkbank-ui.md §3.9): nur, was die Zugriff-Maske von
   den Bausteinen unterscheidet — Optik und Maße kommen aus der
   Werkbank-Familie in app.css (plan A1). Nur Tokens. */

.zugriff-liste[b-0cyzxald5q] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zugriff-liste > li[b-0cyzxald5q] {
    margin: 0;
}

.project-users-hint[b-0cyzxald5q] {
    color: var(--text-3);
    font-size: 12.5px;
    margin: 0 0 12px;
}
/* /Components/Chats/ChatContributionView.razor.rz.scp.css */
/* f33 T028/T029 (specs/030, US8, Design; Vorgabe D2 bindend): die OPTIK
   eines Beitrags. Struktur und sämtliche Anker (research.md R29) bleiben
   unangetastet — hier stehen ausschließlich Regeln DARAUF. Nur Bestands-
   Tokens aus app.css (beide Themes); die wenigen festen rgba-Tönungen
   folgen dem Badge-/Button-Präzedenzfall (app.css) und sind auf hellem
   wie dunklem Grund lesbar. */

/* Jeder Beitrag ist eine schmale Spalte aus Kopfzeile + Inhalt; die
   Breite ist gedeckelt, damit lange Verläufe lesbar bleiben (Zeilenmaß). */
.chat-contribution[b-57zhc2poau] {
    display: flex;
    flex-direction: column;
    max-width: min(78%, 44rem);
}

/* Die Seiten sind die D2-Grundgeste: der Mensch rechts, die Persona und
   alles, was aus ihrem Lauf kommt, links. */
.chat-contribution[data-kind='human'][b-57zhc2poau] {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-contribution[data-kind='assistant'][b-57zhc2poau],
.chat-contribution[data-kind='work'][b-57zhc2poau],
.chat-contribution[data-kind='action'][b-57zhc2poau] {
    align-self: flex-start;
    align-items: flex-start;
}

/* Werkzeug und Handlung dürfen breiter — sie tragen technische Wortlaute,
   die in Blasenbreite unnötig brechen würden. */
.chat-contribution[data-kind='work'][b-57zhc2poau],
.chat-contribution[data-kind='action'][b-57zhc2poau] {
    max-width: min(92%, 50rem);
}

/* Ein Abbruch ist ein Bruch im Gespräch, keine Wortmeldung — mittig,
   wie eine Systemnotiz im Messenger. Die Notice (141, FR-012) ist seine
   ruhige Schwester: ebenfalls App-Stimme, ebenfalls mittig. */
.chat-contribution[data-kind='abort'][b-57zhc2poau],
.chat-contribution[data-kind='notice'][b-57zhc2poau] {
    align-self: center;
    align-items: center;
    text-align: center;
}

/* Kopfzeile der Blase: heute nur die Zeit, klein und drittstufig. Der
   Autor-Name kommt als mechanischer Nachtrag in DIESELBE Zeile (R29,
   „bewusst nicht umgesetzt") — deshalb eine eigene Zeile ÜBER dem Inhalt
   statt einer Zeit im Blaseneck. */
.chat-contribution-time[b-57zhc2poau] {
    order: -1;
    margin: 0 4px 3px;
    font-size: 10.5px;
    color: var(--text-3);
}

/* f33 T031-Nachtrag (research R30): der Autor-Name ist eingezogen — genau
   in die oben vorgesehene Zeile. `.chat-meta` ist die additive Klammer, die
   Name und Zeit nebeneinander stellt; die Regel der Zeit bleibt unangetastet
   (sie wirkt jetzt innerhalb der Klammer statt an der Beitragsspalte). */
.chat-meta[b-57zhc2poau] {
    order: -1;
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.chat-author[b-57zhc2poau] {
    margin: 0 0 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-3);
}

/* ===== Sprechblasen ===== */

.chat-bubble[b-57zhc2poau] {
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
}

/* Meine Seite: Akzent-Tönung (feste rgba nach Badge-Präzedenz — wirkt
   auf dunklem wie hellem Grund); die abgeflachte Ecke zeigt zur
   Eingabe, aus der der Satz kam. */
.chat-bubble[data-side='mine'][b-57zhc2poau] {
    background: rgba(108, 140, 255, .13);
    border-color: rgba(108, 140, 255, .38);
    border-bottom-right-radius: 4px;
}

.chat-bubble[data-side='theirs'][b-57zhc2poau] {
    background: var(--bg-3);
    border-bottom-left-radius: 4px;
}

/* Endloswörter brechen, statt den Verlauf aufzuschieben. Der Text ist
   gerendertes Markdown: Dichte und Umbruch trägt der Baustein .af-md
   (app.css, 156 Nachtrag M2) — Zeilenumbrüche des Sprechenden stehen als
   <br> (Chat-Profil), ein pre-wrap machte die Blocktrenner zu Leerzeilen.
   display: block — der span trägt Block-Elemente (Absätze, Listen). */
.chat-bubble-text[b-57zhc2poau] {
    display: block;
    overflow-wrap: anywhere;
}

/* ===== 141 T008: Arbeits-Pill — Werkstatt, nicht Gespräch =====
   Die gestrichelte Kontur setzt sie sichtbar von jeder Blase ab; die
   Zusammenfassung (Zustand + Zähler/Arten + Namen) macht das Aufklappen zur
   Wahl, nicht zur Pflicht (R29 §1; Vertrag chat-verlauf-pill §2.3). */

.chat-work-pill[b-57zhc2poau] {
    max-width: 100%;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-size: 12.5px;
}

.chat-work-summary[b-57zhc2poau] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 11px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--text-2);
}

.chat-work-summary:hover[b-57zhc2poau] {
    color: var(--text);
}

.chat-work-summary[b-57zhc2poau]::-webkit-details-marker {
    display: none;
}

/* Eigener Marker statt des nativen: ▸ zu, ▾ auf — Zeichenwechsel statt
   Rotation, damit auch der Marker ohne Bewegung auskommt. */
.chat-work-summary[b-57zhc2poau]::before {
    content: "▸";
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--text-3);
}

.chat-work-pill[open] > .chat-work-summary[b-57zhc2poau]::before {
    content: "▾";
}

/* Der Arbeitszustand (E3/A3): „Arbeitet …" nur solange der Lauf aktiv ist
   (data-working='ja'), sonst der ehrliche Ruhezustand. Das Versal-Label
   trägt ihn als WORT — die Animation unten ist Dekoration. */
.chat-work-state[b-57zhc2poau] {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-3);
}

.chat-work-count[b-57zhc2poau] {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

.chat-work-names[b-57zhc2poau] {
    min-width: 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-work-steps[b-57zhc2poau] {
    margin: 0;
    padding: 6px 12px 9px 27px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--border);
}

/* Aufklapp-Übergang: eine kurze, ruhige Einblendung der Schritte — und
   NUR wenn Bewegung erwünscht ist; sonst stehen sie einfach da. */
@media (prefers-reduced-motion: no-preference) {
    .chat-work-pill[open] .chat-work-steps[b-57zhc2poau] {
        animation: chat-steps-auf-b-57zhc2poau .18s ease-out;
    }

    @keyframes chat-steps-auf-b-57zhc2poau {
        from {
            opacity: 0;
            transform: translateY(-3px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* 141 (FR-008, Vertrag §3): die leichte Animation aktiver Arbeit — dezent,
   reines CSS und NUR an data-working='ja' (nach Abschluss ruht sie, N1
   Ziff. 5). Ein pulsierender Punkt vor dem Zustands-Wort; ohne die
   Animation bleibt die Aufschrift die ganze Wahrheit (§3: kein JS-abhängiger
   Wahrheitspfad). */
@media (prefers-reduced-motion: no-preference) {
    .chat-work-pill[data-working='ja'] .chat-work-state[b-57zhc2poau]::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 5px;
        border-radius: 50%;
        background: var(--accent);
        animation: chat-work-pulsieren-b-57zhc2poau 1.6s ease-in-out infinite;
    }

    @keyframes chat-work-pulsieren-b-57zhc2poau {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .35;
        }
    }
}

.chat-work-step[b-57zhc2poau] {
    position: relative;
    padding-left: 15px;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

/* Der Ausgang als Punkt-FORM, nicht nur Farbe: ja gefüllt grün, nein
   gefüllt rot, offen HOHL — „noch nichts" bleibt auch bei schwachem
   Farbsehen von „gut/schlecht" unterscheidbar (ehrliche Dreiwertigkeit). */
.chat-work-step[b-57zhc2poau]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .38em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.chat-work-step[data-ok='ja'][b-57zhc2poau]::before {
    background: var(--green);
}

.chat-work-step[data-ok='nein'][b-57zhc2poau]::before {
    background: var(--red);
}

.chat-work-step[data-ok='offen'][b-57zhc2poau]::before {
    background: transparent;
    border: 1.5px solid var(--text-3);
}

/* 141 (FR-014): der Handlungs-Vollzug in der Pill — sein Ausgang steht
   als Versal-Wort vor dem Notiz-Text, dieselbe Sprache wie die sichtbaren
   Action-Zeilen, nur leiser. */
.chat-work-step-outcome[b-57zhc2poau] {
    margin-right: 6px;
    font-family: var(--font);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--green);
}

/* ===== T029: Handlung — eine Wirkung, kein Satz =====
   Die 3px-Kante trägt den Ausgang fürs Überfliegen, das Versal-Wort
   fürs Lesen (FR-007): „verweigert" darf nie wie „ausgeführt" aussehen. */

.chat-action[b-57zhc2poau] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 8px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.chat-action[data-outcome='performed'][b-57zhc2poau] {
    border-left-color: var(--green);
}

.chat-action[data-outcome='failed'][b-57zhc2poau] {
    border-left-color: var(--red);
}

.chat-action[data-outcome='refused'][b-57zhc2poau] {
    border-left-color: var(--yellow);
}

.chat-action-outcome[b-57zhc2poau] {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.chat-action[data-outcome='performed'] .chat-action-outcome[b-57zhc2poau] {
    color: var(--green);
}

.chat-action[data-outcome='failed'] .chat-action-outcome[b-57zhc2poau] {
    color: var(--red);
}

.chat-action[data-outcome='refused'] .chat-action-outcome[b-57zhc2poau] {
    color: var(--yellow);
}

.chat-action-text[b-57zhc2poau] {
    color: var(--text);
    overflow-wrap: anywhere;
}

/* ===== T029: Abbruch — Systemnotiz in Rot-Tönung =====
   Gestrichelt wie ein Riss, getönt nach Badge-Präzedenz; --red-text ist
   in beiden Themes das lesbare Rot auf Tönung. */

.chat-abort[b-57zhc2poau] {
    padding: 7px 14px;
    border: 1px dashed rgba(255, 92, 92, .45);
    border-radius: var(--radius-sm);
    background: rgba(255, 92, 92, .07);
    font-size: 12.5px;
    color: var(--red-text);
}

.chat-abort-text[b-57zhc2poau] {
    overflow-wrap: anywhere;
}

/* ===== 141 T008: Notice — die stille Schwester des Abbruchs =====
   Ebenfalls App-Stimme (role="note"), aber kein Bruch: eine Gelb-Tönung
   nach Action-Präzedenz meldet „beobachtet, nicht gescheitert" — der
   Satz selbst reist im Ereignis und wird nur gezeigt. */

.chat-notice[b-57zhc2poau] {
    padding: 7px 14px;
    border: 1px dashed rgba(255, 200, 87, .45);
    border-radius: var(--radius-sm);
    background: rgba(255, 200, 87, .07);
    font-size: 12.5px;
    color: var(--text-2);
}

.chat-notice-text[b-57zhc2poau] {
    overflow-wrap: anywhere;
}

/* ===== f35 T015 (specs/032, Design; Vertrag chat-frage §2): die Frage
   mit Antwortoptionen — eine Wortmeldung der Persona, die auf eine
   Entscheidung wartet. Anker aus T014 unangetastet; dieselbe
   Empfehlungs-/Wahl-Sprache wie der T009-Baustein der Aufgaben-Flächen:
   Akzent gestrichelt = geraten, Grün solide = entschieden. ===== */

/* Die Frage kommt von der Persona: links, wie jede ihrer Blasen — aber
   mit Optionen braucht sie mehr Zeilenmaß als ein Satz. */
.chat-contribution[data-kind='question'][b-57zhc2poau] {
    align-self: flex-start;
    align-items: flex-start;
    max-width: min(86%, 46rem);
}

/* Blase der Persona-Seite (D2: --bg-3, abgeflachte Ecke unten links) —
   der Akzent-Rahmen sagt leise: hier wird etwas von dir gebraucht.
   Beantwortet fällt er auf die normale Kontur zurück (unten). */
.chat-question[b-57zhc2poau] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 13px 12px;
    background: var(--bg-3);
    border: 1px solid rgba(108, 140, 255, .38);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

.chat-question-text[b-57zhc2poau] {
    display: block;
    font-size: 13.5px;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Die Aufforderung („Eine Antwort wählen" / „Mehrere Antworten wählbar" /
   „Beantwortet") als Versal-Label — dieselbe Feldsprache wie in T009. */
.chat-question-prompt[b-57zhc2poau] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-2);
}

.chat-question-options[b-57zhc2poau] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Optionen als Klickziele im Gespräch: volle Breite, linksbündig,
   Umbruch statt Abschneiden — keine Formular-Radios in einer Blase. */
.chat-question-choice[b-57zhc2poau] {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 7px 11px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: border-color .12s, background .12s;
}

.chat-question-choice:hover:not(:disabled)[b-57zhc2poau] {
    filter: none;
    border-color: var(--accent);
    background: var(--bg-2);
}

/* EMPFEHLUNG: Anmerkung am Wortlaut — gestrichelter Akzent, nie gefüllt. */
.chat-question-option[data-recommended='ja'] > .chat-question-choice[b-57zhc2poau] {
    border-style: dashed;
    border-color: rgba(108, 140, 255, .55);
}

/* WAHL (nach der Antwort UND die offene Mehrfach-Sammlung — beides heißt
   „das hier gilt"): grüne Kante + Tönung, solide. Gewinnt sichtbar über
   die Empfehlungs-Kontur. */
.chat-question-option[data-selected='ja'] > .chat-question-choice[b-57zhc2poau] {
    border-style: solid;
    border-color: rgba(63, 206, 139, .4);
    border-left: 3px solid var(--green);
    background: rgba(63, 206, 139, .1);
    font-weight: 600;
}

/* Die „Empfehlung"-Pille als Legende unter der Liste — dasselbe Wort in
   derselben Pillen-Form wie auf den Aufgaben-Flächen. */
.chat-question-recommendation[b-57zhc2poau] {
    align-self: flex-start;
    padding: 1.5px 8px;
    border-radius: 999px;
    background: rgba(108, 140, 255, .13);
    border: 1px solid rgba(108, 140, 255, .35);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Abschluss der Mehrfachauswahl: der Akzent-Primärknopf des Bestands —
   mehrere Klicks werden EINE Äußerung. */
.chat-question-confirm[b-57zhc2poau] {
    align-self: flex-start;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    padding: 6px 13px;
    font-size: 12.5px;
}

/* BEANTWORTET: ruhig erledigt, nicht verschwunden. Der Rahmen wird
   normal, die Aufforderung tritt zurück, nicht gewählte Knöpfe verlieren
   Farbe und Reaktion — nichts behauptet mehr Bedienbarkeit, die Wahl
   bleibt grün stehen. */
.chat-question[data-answered='ja'][b-57zhc2poau] {
    border-color: var(--border);
}

.chat-question[data-answered='ja'] .chat-question-prompt[b-57zhc2poau] {
    color: var(--text-3);
}

.chat-question[data-answered='ja'] .chat-question-choice:disabled[b-57zhc2poau] {
    opacity: 1;
    cursor: default;
    color: var(--text-3);
    background: transparent;
}

.chat-question[data-answered='ja'] .chat-question-option[data-selected='ja'] > .chat-question-choice:disabled[b-57zhc2poau] {
    color: var(--text);
    background: rgba(63, 206, 139, .1);
}

/* ===== f62 T016/T018 (US3, D12): die Großansicht-Affordanz des Diagramms
   — ein beschrifteter Chip UNTER der Blase (die Kachel-Sprache des
   Bestands); mehrere Diagramme je Beitrag stehen einzeln. ===== */

.chat-diagram-open-list[b-57zhc2poau] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.chat-diagram-open[b-57zhc2poau] {
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: zoom-in;
}

.chat-diagram-open:hover[b-57zhc2poau] {
    border-color: var(--accent);
    color: var(--text);
}

.chat-diagram-open:focus-visible[b-57zhc2poau] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Chats/ChatCreateDialog.razor.rz.scp.css */
/* f37 T004 (specs/034, research R4): die af-modal-Bausteine aus app.css
   (f18) tragen die Grundgestalt beider Themes.
   T011 (Design-Zug): die Gestaltung des Anlege-Dialogs in der
   f33-Chat-Formsprache — die Wahl spricht dieselbe Sprache wie das
   Gespräch: die Geltungsbereich-Optionen sind Wahl-Karten wie die
   Antwortoptionen im Chat (f35), und die GEWÄHLTE Seite trägt die
   Tönung der eigenen Sprechblase (rgba-Werte 1:1 aus
   ChatContributionView „mine", in beiden Themes lesbar). Kein Titel-Feld
   (f33-Negativliste) — die Wahl ist der ganze Inhalt. Alle Anker der
   Mechanik (.chat-create-dialog/-confirm/-cancel/-project,
   input[name="chat-create-scope"]) bleiben unverändert. */

/* Der Dialog ist eine fokussierte Wahl — schmaler als das f20-Modal. */
.chat-create-dialog[b-efg9ikmaeb] {
    width: min(440px, calc(100vw - 32px));
}

/* Der ruhige Auftritt (Overlay dimmt, Dialog steigt leicht auf, nur bei
   prefers-reduced-motion: no-preference) stand hier als eigene Kopie und
   gilt seit der Zusammenführung der Dialog-Familie (2026-09-13) in app.css
   für ALLE Dialoge — gleiche Werte, eine Stelle. */

/* ===== Geltungsbereich-Wahl ===== */

.chat-create-scope[b-efg9ikmaeb] {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
    /* fieldset bringt min-content als Mindestbreite mit — hier zählt die
       Dialog-Breite. */
    min-width: 0;
}

/* Die Legende in der Feldsprache der App (af-form-row/Versal-Labels):
   klein, versal, zweitstufig. */
.chat-create-scope legend[b-efg9ikmaeb] {
    padding: 0;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-2);
}

/* Jede Option ist eine Wahl-Karte (f35-Sprache der Antwortoptionen):
   flächig, mit Rahmen, voller Klickziel-Breite. */
.chat-create-scope-option[b-efg9ikmaeb] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.chat-create-scope-option:last-child[b-efg9ikmaeb] {
    margin-bottom: 0;
}

.chat-create-scope-option:hover[b-efg9ikmaeb] {
    border-color: var(--border-light);
    background: var(--bg-4);
}

/* GEWÄHLT: die Tönung der eigenen Sprechblase — die gewählte Seite ist
   „meine Seite" (Werte 1:1 aus .chat-bubble[data-side='mine']).
   :has() ist in allen Ziel-Browsern vorhanden; ohne es bleibt die Wahl
   trotzdem sichtbar (der native Radio ist immer da). */
.chat-create-scope-option:has(input:checked)[b-efg9ikmaeb] {
    background: rgba(108, 140, 255, .13);
    border-color: rgba(108, 140, 255, .38);
}

/* Fokus-Detail: der Tastatur-Fokus des Radios hebt die ganze Karte —
   das Klickziel ist die Karte, der Ring gehört ihr. */
.chat-create-scope-option:has(input:focus-visible)[b-efg9ikmaeb] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Laufende Anlage (fieldset disabled): die Wahl ruht sichtbar. */
.chat-create-scope:disabled .chat-create-scope-option[b-efg9ikmaeb] {
    opacity: .6;
    cursor: default;
}

/* Der Radio selbst: native Form, Akzentfarbe der App, und die globalen
   Input-Maße (Polster/Rahmen aus app.css) gelten hier nicht. */
.chat-create-scope-option input[type='radio'][b-efg9ikmaeb] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    accent-color: var(--accent);
}

/* ===== Projektwahl ===== */

/* Das Label umschließt das Select — die Versal-Sprache der Legende gilt
   für den Feldnamen; das Select nimmt sie über die Rücksetzer darunter
   nicht an (Projektnamen bleiben Namen). */
.chat-create-project-label[b-efg9ikmaeb] {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-2);
}

.chat-create-project[b-efg9ikmaeb] {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* „Projekt" wirkt nur bei gewähltem Projekt — das ruhige Select sagt es. */
.chat-create-project:disabled[b-efg9ikmaeb] {
    opacity: .55;
}

/* ===== Aktionen ===== */

/* Die Knopf-Rollen (Akzent für Bestätigen, neutral für Abbrechen) kommen
   seit der Zusammenführung der Dialog-Familie (2026-09-13) aus app.css
   (.af-modal-confirm/.af-modal-cancel) — dieselben Werte, jetzt an einer
   Stelle für alle Dialoge. */
/* /Components/Chats/ChatFileStrip.razor.rz.scp.css */
/*
   f62 T015 [DESIGN] (US1, E8, data-model.md §5): die Optik der Datei-Kacheln
   — f48-ScreenshotStrip-Familie: kleine Thumbnails mit Bestands-Tokens
   (beide Themes), bei schmalen Layouts dezent kleiner; rein darstellend,
   die Kachel-Größe ist Darstellungs-Konstante (A2), das Bild wird
   quellgetreu geladen (0 serverseitiges Thumbnail).
*/

.chat-file-strip[b-m56t5zhwcl] {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-file[b-m56t5zhwcl] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

/* Die Vorschau-Kachel ist eine echte Schaltfläche (f48-Muster): nativ per
   Tastatur erreichbar; cursor: zoom-in sagt, was passiert. */
.chat-file-open[b-m56t5zhwcl] {
    flex: 0 0 auto;
    display: block;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius);
    cursor: zoom-in;
    transition: filter .12s;
}

.chat-file-thumb[b-m56t5zhwcl] {
    display: block;
    width: 104px;
    height: 68px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-3);
}

.chat-file-open:hover .chat-file-thumb[b-m56t5zhwcl] {
    border-color: var(--border-light);
    filter: brightness(1.12);
}

.chat-file-open:focus-visible[b-m56t5zhwcl] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* PDF hat kein Thumbnail — die Großansicht steht als beschrifteter Chip. */
.chat-file-open-label[b-m56t5zhwcl] {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.chat-file-open:hover .chat-file-open-label[b-m56t5zhwcl] {
    border-color: var(--accent);
    color: var(--text);
}

/* Der Download-Weg: Name + ehrliche Größe, als Zeile an der Bild-Kachel,
   als Chip bei allem ohne Vorschau. */
.chat-file-download[b-m56t5zhwcl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-decoration: none;
    color: var(--text);
    font-size: 12.5px;
}

.chat-file-name[b-m56t5zhwcl] {
    overflow-wrap: anywhere;
}

.chat-file-download:hover .chat-file-name[b-m56t5zhwcl] {
    text-decoration: underline;
}

.chat-file-size[b-m56t5zhwcl] {
    font-size: 10.5px;
    color: var(--text-3);
}

.chat-file[data-sicht='download'] .chat-file-download[b-m56t5zhwcl],
.chat-file[data-sicht='pdf'] .chat-file-download[b-m56t5zhwcl] {
    padding: 5px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Umbruch < 1100 px (f32-Bestand): die Kachel wird dezent kleiner — die
   Blase bleibt die Hauptfläche. */
@media (max-width: 1100px) {
    .chat-file-thumb[b-m56t5zhwcl] {
        width: 84px;
        height: 56px;
    }
}
/* /Components/Chats/ChatLightbox.razor.rz.scp.css */
/*
   f62 T016 [DESIGN] (US3, D12/D13; E8): die Optik der Chat-Großansicht —
   f48-ImageLightbox-Familie (dieselben Maße, dieselben Tokens): das Panel
   so groß wie der Inhalt, höchstens der Viewport minus Luft; die Lesazeile
   mit Bezeichner und „Schließen" sitzt ÜBER der Lauffläche (Bedienfläche
   bei jeder Größe erreichbar). Beide Themes über Bestands-Tokens; die
   einzige theme-neutrale Angabe ist der Dimm des Overlays.
*/

.chat-lightbox-overlay[b-yxj871083s] {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 14, .8);
    display: grid;
    place-items: center;
    /* Bestands-Overlay-Ebene (app.css .af-modal-overlay, f48-Familie). */
    z-index: 200;
}

.chat-lightbox[b-yxj871083s] {
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    min-width: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.chat-lightbox-bar[b-yxj871083s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.chat-lightbox-caption[b-yxj871083s] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-2);
}

/* Der Fallback des PDF-Betrachters: ein ehrlicher Verweis, kein Ersatz
   für die Sicht-Fläche. */
.chat-lightbox-download[b-yxj871083s] {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--accent);
}

.chat-lightbox-close[b-yxj871083s] {
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: 12px;
}

/* Die Laufbahn: quellgetreu — kleiner als die Fläche mittig, größer ehrlich
   laufbar; overscroll-behavior hält Scroll-Chaining von der Seite fern
   (Leseposition bleibt, D12). */
.chat-lightbox-stage[b-yxj871083s] {
    display: flex;
    overflow: auto;
    overscroll-behavior: contain;
    flex: 0 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 12px;
    background: var(--bg-3);
    border-radius: 0 0 var(--radius) var(--radius);
}

.chat-lightbox-image[b-yxj871083s] {
    display: block;
    margin: auto;
    max-width: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Der PDF-Betrachter: eine große, ruhige Fläche (Weiß trägt das Dokument —
   dieselbe feste Tönung wie die Blatt-Vorschau des Bestands). */
.chat-lightbox-pdf[b-yxj871083s] {
    display: block;
    margin: auto;
    width: min(72vw, 900px);
    height: min(76vh, 1000px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

/* Das Diagramm groß: dieselbe Server-Form wie in der Blase (D10) — nur
   großzügiger gesetzt; der SVG-Austausch des Bestands-Moduls greift hier
   genauso (scan ist idempotent über unverarbeitete Platzhalter). */
.chat-lightbox-stage .chat-mermaid[b-yxj871083s] {
    margin: auto;
    max-width: 68vw;
    font-size: 14px;
}

.chat-lightbox-stage .chat-mermaid pre[b-yxj871083s] {
    max-width: 68vw;
    overflow: auto;
}

/* Bewegung nur auf Wunsch (f48-Idiom): unter prefers-reduced-motion steht
   alles einfach da. */
@media (prefers-reduced-motion: no-preference) {
    .chat-lightbox-overlay[b-yxj871083s] {
        animation: chat-lightbox-overlay-in-b-yxj871083s .16s ease-out;
    }

    .chat-lightbox[b-yxj871083s] {
        animation: chat-lightbox-panel-in-b-yxj871083s .18s ease-out;
    }

    @keyframes chat-lightbox-overlay-in-b-yxj871083s {
        from {
            opacity: 0;
        }
    }

    @keyframes chat-lightbox-panel-in-b-yxj871083s {
        from {
            opacity: 0;
            transform: translateY(6px) scale(.985);
        }
    }
}
/* /Components/Constitutions/ConstitutionEditor.razor.rz.scp.css */
/* 176 T020 (contracts/editor-interop.md §4, Nachtrag 2026-10-17; Mockup
   mockups/verfassung-je-organisation/verfassung.css „WYSIWYG-Editor“):
   EINE Editor-Fläche in voller Breite. Der Rahmen füllt seinen Container —
   in einer Flex-Spalte wächst er mit (flex: 1 1 auto), sonst hat er
   mindestens 320 px. Leiste und Fuß haben ihre natürliche Höhe, nur der Text
   dazwischen wächst und scrollt selbst. textarea-Fallback über die
   Fallback-Klasse statt DOM-Entfernung (die textarea bleibt IM DOM). */

.constitution-editor-rahmen[b-4y7iuvj7h2] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 320px;
    box-sizing: border-box;
}

/* ===== Ohne JS-Editor: die textarea ist das Feld ===== */

.constitution-editor-field[b-4y7iuvj7h2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.constitution-editor-field span[b-4y7iuvj7h2] {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.constitution-editor-field textarea[b-4y7iuvj7h2] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 280px;
    box-sizing: border-box;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.65;
    resize: vertical;
}

.constitution-editor-host[b-4y7iuvj7h2] {
    display: none;
}

/* ===== Mit JS-Editor: Rahmen mit Leiste, Fläche, Fuß ===== */

.constitution-editor-js[b-4y7iuvj7h2] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.constitution-editor-js:focus-within[b-4y7iuvj7h2] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.constitution-editor-js .constitution-editor-field[b-4y7iuvj7h2] {
    display: none;
}

.constitution-editor-js .constitution-editor-host[b-4y7iuvj7h2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    position: relative;
}

/* Die Flächen legt das JS an (ohne Scope-Attribut, daher ::deep). */
.constitution-editor-host[b-4y7iuvj7h2]  .constitution-editor-fläche {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
}

.constitution-editor-host[b-4y7iuvj7h2]  .constitution-editor-fläche[hidden] {
    display: none !important;
}

.constitution-editor-host[b-4y7iuvj7h2]  .constitution-editor-wysiwyg {
    overflow-y: auto;
}

/* ===== Werkzeugleiste ===== */

.constitution-editor-leiste[b-4y7iuvj7h2] {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    row-gap: 5px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-3);
}

.constitution-editor-format[b-4y7iuvj7h2] {
    width: 30px;
    height: 28px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .1s, color .1s, border-color .1s;
}

.constitution-editor-format:hover[b-4y7iuvj7h2] {
    background: var(--bg-4);
    color: var(--text);
}

.constitution-editor-format:focus-visible[b-4y7iuvj7h2] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.constitution-editor-format.an[b-4y7iuvj7h2] {
    background: var(--tint-accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}

.constitution-editor-format[b-4y7iuvj7h2]  svg {
    width: 15px;
    height: 15px;
}

/* Überschrift und Kursiv in Serifen-Schrift wie im Mockup — das Zeichen
   zeigt, was der Knopf tut. */
.constitution-editor-zeichen-heading[b-4y7iuvj7h2],
.constitution-editor-zeichen-italic[b-4y7iuvj7h2] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}

.constitution-editor-zeichen-italic[b-4y7iuvj7h2] {
    font-style: italic;
}

.constitution-editor-trenner[b-4y7iuvj7h2] {
    width: 1px;
    height: 18px;
    margin: 0 5px;
    flex: none;
    background: var(--border-light);
}

.constitution-editor-leiste-rechts[b-4y7iuvj7h2] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.constitution-editor-leiste .af-segmente[b-4y7iuvj7h2] {
    padding: 2px;
}

.constitution-editor-leiste .af-segment[b-4y7iuvj7h2] {
    padding: 3px 10px;
    font-size: 11.5px;
}

/* ===== Fuß ===== */

.constitution-editor-fuß[b-4y7iuvj7h2] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-3);
    font-size: 11.5px;
    color: var(--text-3);
}

.constitution-editor-fuß-rechts[b-4y7iuvj7h2] {
    margin-left: auto;
}

.constitution-editor-fuß kbd[b-4y7iuvj7h2] {
    font-family: var(--mono);
    font-size: 10px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    padding: 0 4px;
    color: var(--text-2);
}

.constitution-editor-quelle-marke[b-4y7iuvj7h2] {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--yellow-text);
}

@media (prefers-reduced-motion: reduce) {
    .constitution-editor-js[b-4y7iuvj7h2],
    .constitution-editor-format[b-4y7iuvj7h2] {
        transition: none;
    }
}
/* /Components/Constitutions/VerfassungsMaske.razor.rz.scp.css */
/* 149 T011 (contracts/werkbank-ui.md §3.5): nur, was die Verfassung von den
   Bausteinen unterscheidet — Optik und Maße kommen aus der Werkbank-Familie
   in app.css (plan A1). Die Liste ist eine nummerierte Folge (<ol>): die
   Reihenfolge IST die wirksame Verfassung; die Zählung trägt die Zeile
   selbst („1.“ in af-lz-pos), die Browser-Aufzählung entfällt. */

.verfassung-liste[b-q8l58zggi3] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.verfassung-liste > li[b-q8l58zggi3] {
    margin: 0;
}

/* Ziehen zum Umsortieren (§3.5 ④): der Griff ist die ganze Zeile. */
.verfassung-liste > li[draggable="true"][b-q8l58zggi3] {
    cursor: grab;
}

/* Das Formular beginnt mit Luft unter dem Detail-Kopf (Vorlage: Formular
   ersetzt das Detail, padding-top 16 px). */
.verfassung-formular[b-q8l58zggi3] {
    padding-top: 12px;
}

/* 176 B7b (editor-interop §4, N4/FR-037): beim Bearbeiten und Anlegen ist
   der Körper eine Flex-Spalte; das Formular füllt ihn (wächst, schrumpft
   aber nicht unter seinen Inhalt — dann rollt der Körper), der Editor-Rahmen
   wächst darin (flex: 1 1 auto; min-height: 320px in ConstitutionEditor).
   Titel, Notizen und Fehler bleiben oben in ihrer Höhe; der FormularFuß
   steht außerhalb des Körpers und bleibt sichtbar. */
.verfassung-formular-körper[b-q8l58zggi3] {
    display: flex;
    flex-direction: column;
}

.verfassung-formular-körper > .verfassung-formular[b-q8l58zggi3] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    gap: 2px;
}

.verfassung-formular > .verfassung-hinweis[b-q8l58zggi3] {
    flex: none;
    margin: 0 0 12px;
}

.verfassung-formular-titel[b-q8l58zggi3] {
    flex: none;
}

/* ===== 176 B7 (T023): Organisations-Sicht ==============================
   Vorlage mockups/verfassung-je-organisation/verfassung.css. Farbsprache:
   Cyan = global, Violett = Organisation (wie die Punkte im
   Bereichsumschalter); Grün = gilt; gedämpft = gilt nicht; bei „ersetzt“
   zusätzlich durchgestrichen; Gelb = „Original geändert“. Was in
   ListenZeile und DetailKopf liegt, erreicht die Maske nur über ::deep. */

.verfassungs-maske[b-q8l58zggi3] {
    --verfassung-global: var(--cyan);
    --verfassung-org: var(--purple);
}

/* Nachtrag 176 (Browser-Prüfung): Seitenkopf. Die App-Leiste bleibt bei
   1280 px breit (das Mockup klappt sie dort ein) — der lange Untertitel der
   globalen Sicht und die Aktionen (Umschalter + „Neuer Eintrag“) passten
   nicht nebeneinander, die Aktionen rutschten in eine zweite Zeile und der
   Editor begann 74 px tiefer. Hier darf die Textspalte schrumpfen: der
   Untertitel bricht um, die Aktionen bleiben oben rechts. Erst wenn auch
   320 px Text nicht mehr daneben passen, bricht der Kopf wie bisher um.
   Das gemeinsame .af-page-head anderer Masken bleibt unberührt. */
.verfassungs-maske[b-q8l58zggi3]  .af-page-text {
    flex: 1 1 320px;
    min-width: 0;
}

/* Umgebrochen ohne einzelnes Wort in der letzten Zeile. */
.verfassungs-maske[b-q8l58zggi3]  .af-page-sub {
    text-wrap: pretty;
}

/* Nachtrag 176: Hinweisleiste wie im Mockup (verfassung.css:53–56). Der
   Text nimmt den Rest (ab 380 px), der rechte Block bleibt EINE Zeile und
   rückt bei Platzmangel als Ganzes in eine neue Zeile — vorher brachen
   „Läufe bekommen 2 Einträge“, der Knopf „Wirksame Verfassung ansehen“ und
   „<n> Einträge sind in Organisationen angepasst“ in sich um. */
.verfassungs-maske[b-q8l58zggi3]  .af-hinweisleiste {
    flex-wrap: wrap;
    gap: 10px 14px;
}

.verfassungs-maske[b-q8l58zggi3]  .af-hinweisleiste-text {
    flex: 1 1 380px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-wrap: pretty;
}

.verfassungs-maske[b-q8l58zggi3]  .af-hinweisleiste-text > .af-punkt {
    flex: none;
}

.verfassungs-maske[b-q8l58zggi3]  .af-hinweisleiste-rechts {
    flex: none;
    align-items: center;
    white-space: nowrap;
}

/* Hinweisleiste: die Zahl der Einträge, die ein Lauf bekommt. */
.verfassung-zahl[b-q8l58zggi3] {
    font-family: var(--mono);
    color: var(--text);
}

/* Gruppen der Liste: „Globale Verfassung“ und „Eigene Einträge“. */
.verfassung-gruppe + .verfassung-gruppe[b-q8l58zggi3] {
    margin-top: 6px;
}

.verfassung-gruppen-kopf[b-q8l58zggi3] {
    padding-bottom: 2px;
}

.verfassung-gp[b-q8l58zggi3] {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex: none;
}

.verfassung-gp-global[b-q8l58zggi3] {
    background: var(--verfassung-global);
}

.verfassung-gp-org[b-q8l58zggi3] {
    background: var(--verfassung-org);
}

.verfassung-gruppe-n[b-q8l58zggi3] {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: 0;
}

.verfassung-leer-eigen[b-q8l58zggi3] {
    margin: 2px 2px 4px;
    padding: 9px 10px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-3);
}

/* Chip-Punkte „Gilt | Ausgeschaltet | Ersetzt“. */
.verfassungs-maske[b-q8l58zggi3]  .verfassung-cp {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-cp-gilt {
    background: var(--green);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-cp-aus {
    background: var(--text-3);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-cp-ersetzt {
    background: transparent;
    border: 1.5px solid var(--text-3);
}

/* Zeile: Platz in fester Breite, Herkunft am Symbol. */
.verfassung-liste > li[b-q8l58zggi3]  .af-lz-pos {
    min-width: 18px;
    display: inline-block;
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-h-global > .af-lz-symbol,
.verfassungs-maske[b-q8l58zggi3]  .verfassung-h-global .af-dk-symbol {
    color: var(--verfassung-global);
    background: color-mix(in srgb, var(--verfassung-global) 9%, var(--bg-3));
    border-color: color-mix(in srgb, var(--verfassung-global) 32%, var(--border));
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-h-org > .af-lz-symbol,
.verfassungs-maske[b-q8l58zggi3]  .verfassung-h-org .af-dk-symbol {
    color: var(--verfassung-org);
    background: color-mix(in srgb, var(--verfassung-org) 10%, var(--bg-3));
    border-color: color-mix(in srgb, var(--verfassung-org) 34%, var(--border));
}

/* Gilt nicht: leiser; ersetzt zusätzlich durchgestrichen. */
.project-constitution-state-off[b-q8l58zggi3]  .af-lz-name,
.project-constitution-state-replaced[b-q8l58zggi3]  .af-lz-name {
    color: var(--text-2);
    font-weight: 500;
}

.project-constitution-state-off[b-q8l58zggi3]  .af-lz-symbol,
.project-constitution-state-replaced[b-q8l58zggi3]  .af-lz-symbol {
    opacity: .55;
    filter: saturate(.4);
}

.verfassung-liste[b-q8l58zggi3]  .af-lz-durchgestrichen {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--text-3) 80%, transparent);
}

/* Die lokale Kopie hängt eingerückt unter ihrem Original — auch als
   Entwurfszeile „Lokale Kopie — noch nicht angelegt“ (176 B7b). */
.project-constitution-row-child[b-q8l58zggi3],
.verfassung-entwurf-kind[b-q8l58zggi3] {
    position: relative;
    margin-left: 24px;
}

.project-constitution-row-child[b-q8l58zggi3]::before,
.verfassung-entwurf-kind[b-q8l58zggi3]::before {
    content: "";
    position: absolute;
    left: -13px;
    top: -8px;
    width: 11px;
    height: 30px;
    border-left: 1.5px solid var(--border-light);
    border-bottom: 1.5px solid var(--border-light);
    border-bottom-left-radius: 7px;
    pointer-events: none;
}

/* Marken: kleiner in der Liste, Farben je Zustand und Herkunft. */
.verfassung-liste[b-q8l58zggi3]  .af-lz-marken {
    gap: 4px;
}

.verfassung-liste[b-q8l58zggi3]  .af-lz-marken .af-badge {
    font-size: 9.5px;
    padding: 1.5px 6px;
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-applies {
    background: var(--tint-green);
    color: var(--green);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-off,
.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-withdrawn {
    background: var(--tint-grey);
    color: var(--text-2);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-replaced {
    background: transparent;
    color: var(--text-2);
    box-shadow: inset 0 0 0 1px var(--border-light);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-copy,
.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-own {
    background: color-mix(in srgb, var(--verfassung-org) 15%, transparent);
    color: var(--violet-text);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-changed {
    background: var(--tint-yellow);
    color: var(--yellow-text);
}

/* Detail: Herkunft in der Unterzeile, Titel je Zustand. */
.verfassung-herkunft[b-q8l58zggi3] {
    font-weight: 600;
}

.verfassung-herkunft-global[b-q8l58zggi3] {
    color: var(--cyan);
}

.verfassung-herkunft-org[b-q8l58zggi3] {
    color: var(--violet-text);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-titel-aus {
    color: var(--text-2);
}

.verfassungs-maske[b-q8l58zggi3]  .verfassung-titel-ersetzt {
    color: var(--text-2);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in srgb, var(--text-3) 80%, transparent);
}

/* Hinweisfelder im Detail. */
.verfassung-hinweis[b-q8l58zggi3] {
    margin: 12px 0 16px;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
}

.verfassung-hinweis-text[b-q8l58zggi3] {
    flex: 1;
    min-width: 220px;
}

.verfassung-hinweis-knöpfe[b-q8l58zggi3] {
    display: flex;
    gap: 8px;
    flex: none;
}

.verfassung-hinweis-global[b-q8l58zggi3]  .af-i {
    color: var(--verfassung-global);
}

.verfassung-hinweis-aus[b-q8l58zggi3] {
    border-style: dashed;
}

.verfassung-hinweis-aus[b-q8l58zggi3]  .af-i {
    color: var(--text-3);
}

.verfassung-hinweis-ersetzt[b-q8l58zggi3] {
    border-color: color-mix(in srgb, var(--verfassung-org) 40%, var(--border));
    background: color-mix(in srgb, var(--verfassung-org) 8%, var(--bg-3));
}

.verfassung-hinweis-ersetzt[b-q8l58zggi3]  .af-i {
    color: var(--violet-text);
}

.verfassung-hinweis-geändert[b-q8l58zggi3] {
    border-color: color-mix(in srgb, var(--yellow) 45%, var(--border));
    background: var(--tint-yellow);
}

.verfassung-hinweis-geändert[b-q8l58zggi3]  .af-i {
    color: var(--yellow-text);
}

/* Abschnitt „Text“: Titel links, „Gerendert | Quelltext“ rechts daneben;
   gedämpft, wenn der Eintrag nicht gilt. */
.verfassung-text[b-q8l58zggi3] {
    position: relative;
}

.verfassung-text-titel[b-q8l58zggi3] {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    line-height: 26px;
}

.verfassung-text[b-q8l58zggi3]  .af-dok-leiste {
    margin-top: 0;
}

.verfassung-text-leise[b-q8l58zggi3]  .af-dok-leiste ~ * {
    color: var(--text-2);
}

/* ===== 176 B8 (T026): globale Sicht ====================================
   Vorlage mockups/verfassung-je-organisation/verfassung.css (.hinweisleiste
   .global, .mk-angepasst, .org-wirkung, .dk-hinweis.reichweite). Cyan trägt
   den globalen Bestand; Violett markiert, wo Organisationen abweichen. */

/* Hinweisleiste global: der Punkt in der Farbe des globalen Bestands. */
.verfassung-punkt-global[b-q8l58zggi3] {
    background: var(--verfassung-global);
    opacity: 1;
}

/* „in <n> Organisationen angepasst“: violett, mit Punkt, nicht versal. */
.verfassungs-maske[b-q8l58zggi3]  .verfassung-marke-deviations {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--verfassung-org) 12%, transparent);
    color: var(--violet-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.verfassung-marke-punkt[b-q8l58zggi3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--verfassung-org);
    flex: none;
}

/* Abschnitt „In den Organisationen“: kleine Tabelle mit Rahmen, darunter
   der Restsatz; ohne Abweichung ein gestrichelter Kasten. */
.verfassung-wirkung[b-q8l58zggi3] {
    margin-bottom: 20px;
    max-width: 760px;
}

.verfassung-wirkung > .af-abschnitt-titel[b-q8l58zggi3] {
    margin: 0 0 8px;
}

.verfassung-wirkung-tabelle[b-q8l58zggi3] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.verfassung-wirkung-tabelle th[b-q8l58zggi3] {
    background: var(--bg-3);
}

.verfassung-wirkung-tabelle td[b-q8l58zggi3] {
    padding: 8px 12px;
}

.verfassung-wirkung-org[b-q8l58zggi3] {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
}

.verfassung-wirkung-seit[b-q8l58zggi3] {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.verfassung-wirkung-rest[b-q8l58zggi3] {
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-3);
}

.verfassung-wirkung-keine[b-q8l58zggi3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-2);
}

.verfassung-wirkung-keine[b-q8l58zggi3]  .af-i {
    color: var(--text-3);
}

/* Reichweite im Bearbeiten: Akzent statt Herkunftsfarbe — die Notiz spricht
   über alle Organisationen. */
.verfassung-hinweis-reichweite[b-q8l58zggi3]  .af-i {
    color: var(--accent);
}
/* /Components/Constitutions/VergleichsDialog.razor.rz.scp.css */
/* 176 B7b (T024): „Original und Kopie: <Titel>“ — Vorlage
   mockups/verfassung-je-organisation/verfassung.css „Vergleich“. Breit
   (1040 px), zwei Spalten; Grün = nur im Original, Akzent = nur in der
   Kopie (wie die Legende). Farben nur über Tokens (beide Themes). */

.verfassung-vergleich[b-gyqx9su2k6] {
    width: min(1040px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

.verfassung-dialog-unter[b-gyqx9su2k6] {
    margin: -8px 0 14px;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.5;
}

.vgl[b-gyqx9su2k6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
}

.vgl-spalte[b-gyqx9su2k6] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vgl-kopf[b-gyqx9su2k6] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
}

.vgl-kopf b[b-gyqx9su2k6] {
    color: var(--text);
}

.vgl-leise[b-gyqx9su2k6] {
    font-size: 11.5px;
    color: var(--text-3);
}

.vgl-gp[b-gyqx9su2k6] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    align-self: center;
    flex: none;
}

.vgl-gp-global[b-gyqx9su2k6] {
    background: var(--cyan);
}

.vgl-gp-org[b-gyqx9su2k6] {
    background: var(--purple);
}

.vgl-zeilen[b-gyqx9su2k6] {
    font-family: var(--mono);
    font-size: 11.8px;
    line-height: 1.6;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 0;
    max-height: min(52vh, 460px);
    overflow: auto;
}

.vgl-z[b-gyqx9su2k6] {
    padding: 0 12px 0 10px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border-left: 3px solid transparent;
    min-height: 1.6em;
    color: var(--text-2);
}

.vgl-nur-original[b-gyqx9su2k6] {
    background: var(--tint-green);
    border-left-color: var(--green);
    color: var(--text);
}

.vgl-nur-kopie[b-gyqx9su2k6] {
    background: var(--tint-accent);
    border-left-color: var(--accent);
    color: var(--text);
}

.vgl-legende[b-gyqx9su2k6] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--text-3);
}

.vgl-legende span[b-gyqx9su2k6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vgl-legende i[b-gyqx9su2k6] {
    width: 12px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.vgl-legende-o[b-gyqx9su2k6] {
    background: var(--tint-green);
    border-left: 3px solid var(--green);
}

.vgl-legende-k[b-gyqx9su2k6] {
    background: var(--tint-accent);
    border-left: 3px solid var(--accent);
}

@media (max-width: 1100px) {
    .vgl[b-gyqx9su2k6] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Constitutions/WirksameVerfassungDialog.razor.rz.scp.css */
/* 176 B7b (T024): „Wirksame Verfassung von <Org>“ — Vorlage
   mockups/verfassung-je-organisation/verfassung.css „Wirksame Verfassung“.
   Nummer in Mono, Titel einzeilig mit Auslassung (voller Titel im Tooltip),
   Herkunft als Marke in der Farbe ihrer Seite: Cyan global, Violett
   Organisation. Farben nur über Tokens (beide Themes). */

.verfassung-dialog-unter[b-qdp2qpso5j] {
    margin: -8px 0 14px;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.5;
}

.verfassung-wirksam[b-qdp2qpso5j] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(56vh, 520px);
    overflow-y: auto;
}

.verfassung-wirksam > li[b-qdp2qpso5j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 13px;
}

.verfassung-wirksam-nr[b-qdp2qpso5j] {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-3);
    min-width: 18px;
    flex: none;
}

.verfassung-wirksam-titel[b-qdp2qpso5j] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verfassung-wirksam-herkunft[b-qdp2qpso5j] {
    flex: none;
    font-size: 9.5px;
    padding: 1.5px 6px;
}

.verfassung-wirksam-herkunft-global[b-qdp2qpso5j] {
    background: transparent;
    color: var(--cyan);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 40%, var(--border));
}

.verfassung-wirksam-herkunft-copy[b-qdp2qpso5j],
.verfassung-wirksam-herkunft-own[b-qdp2qpso5j] {
    background: color-mix(in srgb, var(--purple) 15%, transparent);
    color: var(--violet-text);
}

.verfassung-wirksam-leer[b-qdp2qpso5j] {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-3);
}

.verfassung-nicht-dabei[b-qdp2qpso5j] {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-3);
}

.verfassung-nicht-dabei b[b-qdp2qpso5j] {
    color: var(--text-2);
    font-weight: 600;
}
/* /Components/Hosts/HostAccessGrantSummary.razor.rz.scp.css */
/* 108 TV3 (T029): lesende Freigabe-Zeile am Host-Detail.
   Bewusst ruhiger als der gefallene Editor — die Fläche ist eine Auskunft,
   kein Bedienplatz; der einzige Handlungs-Anker ist der Verweis.
   149 B14 (FR-016, Farben aus den Tokens): die Karte lief über die nie
   definierte Familie --af-surface-muted/--af-border/--af-text-muted und damit
   auf den hellen Ersatzwerten — im dunklen Thema heller Grund mit heller
   Schrift (Sichtprobe nachweise.md). Jetzt die Theme-Tokens. */

.host-access-grants[b-5m4wk9992f] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: var(--bg-3);
}

.host-access-grants-head[b-5m4wk9992f] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.host-access-grants-count[b-5m4wk9992f] {
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--text-2);
}

.host-access-grants-lead[b-5m4wk9992f] {
    margin: 0 0 0.5rem;
    color: var(--text-2);
}

.host-access-grants-list[b-5m4wk9992f] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.host-access-grant-line[b-5m4wk9992f] {
    padding: 0.2rem 0;
}

.host-access-grants-empty[b-5m4wk9992f],
.host-access-grants-all[b-5m4wk9992f] {
    margin: 0 0 0.5rem;
}

.host-access-grants-link[b-5m4wk9992f] {
    display: inline-block;
}
/* /Components/Hosts/HostAccessIncompleteNote.razor.rz.scp.css */
/* 078 US2 (T015) — Unvollständigkeits-Ansage am Host.

   Gestaltungs-Absicht: FESTSTELLUNG, nicht Warnung. Die Ansage erscheint an
   Beständen, die jahrelang unauffällig waren — der Mensch hat nichts falsch
   gemacht, die Software war nur still. Deshalb bewusst NICHT die
   Signal-Töne: kein --red (das heißt hier „fehlgeschlagen"), kein --yellow
   (das heißt „Warnung"), kein Warndreieck. Der Akzent-Ton ist der Ton für
   „hier steht etwas, das du wissen willst".

   Leise darf sie aber auch nicht sein: ein unvollständiger Zugang ist der
   GRUND, warum eine Überwachung nicht läuft. Also eine eigene Fläche mit
   Kante statt einer weiteren grauen Zeile im Seitenkopf, und die benannten
   Angaben in voller Textstärke — das Auge findet zuerst das Wort, das es
   sucht („Benutzer"), nicht den Satz darum. */

.host-access-note[b-0tzdmclvm6] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 12px 14px;
    max-width: 58rem;
    background: var(--bg-3, #1a2029);
    border: 1px solid var(--border, #2a3342);
    border-left: 3px solid var(--accent, #6c8cff);
    border-radius: 0 var(--radius-sm, 7px) var(--radius-sm, 7px) 0;
}

.host-access-note-icon[b-0tzdmclvm6] {
    flex: 0 0 auto;
    display: flex;
    /* Auf die erste Textzeile ausgerichtet, nicht auf die Kastenmitte —
       sonst rutscht das Zeichen bei mehrzeiligen Ansagen nach unten weg. */
    margin-top: 1px;
    color: var(--accent, #6c8cff);
}

.host-access-note-body[b-0tzdmclvm6] {
    min-width: 0;
}

.host-access-note-head[b-0tzdmclvm6] {
    margin: 0;
    color: var(--text, #e4e9f2);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Die benannte Angabe ist die Nutzlast der ganzen Ansage. */
.host-access-note-name[b-0tzdmclvm6] {
    font-weight: 700;
}

.host-access-note-port[b-0tzdmclvm6] {
    margin: 5px 0 0;
    color: var(--text, #e4e9f2);
    font-size: 13px;
    line-height: 1.55;
}

.host-access-note-text[b-0tzdmclvm6] {
    margin: 6px 0 0;
    color: var(--text-2, #9aa5b8);
    font-size: 12.5px;
    line-height: 1.55;
}

.host-access-note-help[b-0tzdmclvm6] {
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent, #6c8cff);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.host-access-note-help:hover[b-0tzdmclvm6] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.host-access-note-help:focus-visible[b-0tzdmclvm6] {
    outline: 2px solid var(--accent, #6c8cff);
    outline-offset: 2px;
    border-radius: 3px;
}
/* /Components/Hosts/HostEditor.razor.rz.scp.css */
/* 149 T015 (contracts/werkbank-ui.md §3.4 ⑦): der Editor im Detail der
   Hosts-Maske. Felder, Validierung und Fuß kommen aus der Werkbank-Familie
   (af-form-row, af-input, af-form-fehler, FormularFuß in app.css); hier
   steht nur die Luft unter dem Detail-Kopf und die Lesebreite der Felder. */
.host-editor[b-k39hxn3cj8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 34rem;
    padding-top: 12px;
}
/* /Components/Hosts/HostsMaske.razor.rz.scp.css */
/* 149 T015 (contracts/werkbank-ui.md §3.4): nur, was die Hosts-Maske von den
   Bausteinen unterscheidet — Optik und Maße kommen aus der Werkbank-Familie
   in app.css (plan A1). Übernommen aus der abgelösten MonitoringDesk: die
   Kennzahlen-Zeilen mit dem CPU-Balken und der Zugangs-VERWEIS; aus den
   abgelösten Detailseiten: der Anleitungs-Einklapper. Nur Tokens. */

.hosts-liste[b-bjjfuwzqmu] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hosts-liste > li[b-bjjfuwzqmu] {
    margin: 0;
}

/* Kennzahlen der jüngsten Messung (108 TV4, Mockup kennzahlen/kz). */
.monitoring-desk-values[b-bjjfuwzqmu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 0;
}

.monitoring-desk-values > div[b-bjjfuwzqmu] {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(64px, auto) minmax(60px, 1fr);
    gap: 9px 18px;
    align-items: center;
}

.monitoring-desk-values dt[b-bjjfuwzqmu] {
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
}

.monitoring-desk-values dd[b-bjjfuwzqmu] {
    margin: 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.monitoring-desk-balken[b-bjjfuwzqmu] {
    display: block;
    height: 5px;
    max-width: 180px;
    background: var(--bg-4);
    border-radius: 999px;
    overflow: hidden;
}

.monitoring-desk-balken-füllung[b-bjjfuwzqmu] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.monitoring-desk-balken-füllung.warn[b-bjjfuwzqmu] {
    background: var(--yellow);
}

.monitoring-desk-balken-füllung.krit[b-bjjfuwzqmu] {
    background: var(--red);
}

.monitoring-desk-unmonitorable[b-bjjfuwzqmu] {
    margin: 12px 0 0;
    color: var(--text-3);
    font-size: 13px;
    font-style: italic;
}

/* Zugangs-VERWEIS: Mono-Link mit gestrichelter Linie (nie ein Wert). */
.monitoring-desk-secret a[b-bjjfuwzqmu] {
    color: var(--accent-2);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 12px;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent-2) 55%, transparent);
    padding-bottom: 1px;
}

.monitoring-desk-secret a:hover[b-bjjfuwzqmu] {
    color: var(--accent);
    border-bottom-style: solid;
}

/* 063 T031: der Anleitungs-Einklapper am Ende der Übersicht. */
.host-page-help[b-bjjfuwzqmu] {
    margin-top: 14px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-2);
    font-size: 12.5px;
    color: var(--text-2);
}

.host-page-help summary[b-bjjfuwzqmu] {
    cursor: pointer;
    font-weight: 600;
}

.host-page-help[open] summary[b-bjjfuwzqmu] {
    margin-bottom: 8px;
}

.hosts-verlauf[b-bjjfuwzqmu] {
    padding-top: 12px;
}
/* /Components/InferenceAccounts/AccountDetailPane.razor.rz.scp.css */
/* 149 T027 (contracts/werkbank-ui.md §1, §3.1 ⑤): das Konto-Detail — Kopf,
   Reiter, Abschnitte und Eigenschaftsliste kommen aus der af-Familie in
   app.css. Hier stehen nur die Eigenheiten der Inferenz-Konten: die
   Eigenschaftszeilen als Paare im Raster der af-eig, die Basis-URL in Mono,
   die Referenzliste und der Transkriptions-Hinweis. */
.account-detail-prop[b-4iqj8p3ztm] {
    display: contents;
}

.account-detail-mono[b-4iqj8p3ztm] {
    font-family: var(--mono);
    font-size: 12px;
}

.account-detail-referenzen-text[b-4iqj8p3ztm],
.account-detail-hint-transcription[b-4iqj8p3ztm],
.account-detail-katalog-hinweis[b-4iqj8p3ztm] {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--text-2);
}

.account-detail-referenzen-liste[b-4iqj8p3ztm],
.account-detail-aktive-modelle[b-4iqj8p3ztm] {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-detail-reference[b-4iqj8p3ztm] {
    font-size: 12.5px;
    color: var(--text-2);
}

.account-detail-reference a[b-4iqj8p3ztm] {
    color: var(--accent-2);
}

.account-detail-reference-meta[b-4iqj8p3ztm] {
    margin-left: 8px;
    font-size: 11px;
    color: var(--text-3);
}

.account-detail-aktive-modelle li[b-4iqj8p3ztm] {
    font-family: var(--mono);
    font-size: 12px;
}
/* /Components/InferenceAccounts/AccountListPane.razor.rz.scp.css */
/* 149 T027 (contracts/werkbank-ui.md §1, §3.1 ④): die Konten-Liste ist die
   ListenKarte der Werkbank — Karte, Suche, Chips, Zeilen, Gruppenköpfe und Fuß
   kommen aus der af-Familie in app.css. Hier steht nur der leere Gruppen-Satz
   der Organisations-Sicht (Bestandstext unter dem Gruppenhinweis). */
.account-list-group-empty[b-mwhontg6ah] {
    margin: 0 0 6px;
    padding: 0 10px 6px;
    font-size: 12px;
    font-style: italic;
    color: var(--text-3);
}
/* /Components/Layout/Befehlspalette.razor.rz.scp.css */
/* 162 B7 (T030; befehlspalette §4 „Gestalt“; MOCK D Palette): Dialog über dem
   Inhalt mit Schleier, oben mittig, höchstens 640 px breit; unter 700 px oben
   bündig mit 10 px Rand. Über Leiste, Schublade und Panels, unter den Toasts. */
.palette-schleier[b-ogw88789f0] {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(5, 8, 14, .6);
}

[data-theme="light"] .palette-schleier[b-ogw88789f0] {
    background: rgba(23, 32, 56, .32);
}

.befehlspalette[b-ogw88789f0] {
    position: fixed;
    z-index: 220;
    top: 70px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(640px, calc(100% - 24px));
    max-height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: palette-auf-b-ogw88789f0 .14s ease both;
}

@keyframes palette-auf-b-ogw88789f0 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .befehlspalette[b-ogw88789f0] {
        animation: none;
    }
}

@media (max-width: 699.98px) {
    .befehlspalette[b-ogw88789f0] {
        top: 10px;
        width: calc(100% - 20px);
        max-height: calc(100% - 20px);
    }
}

.palette-kopf[b-ogw88789f0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
}

.palette-eingabe[b-ogw88789f0] {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: 15.5px;
    color: var(--text);
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
}

.palette-eingabe:focus[b-ogw88789f0],
.palette-eingabe:focus-visible[b-ogw88789f0] {
    outline: none;
    box-shadow: none;
}

.palette-taste[b-ogw88789f0],
.palette-fuß kbd[b-ogw88789f0] {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    padding: 0 5px;
    white-space: nowrap;
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

/* position: relative — die Liste ist offsetParent ihrer Treffer (Mitrollen). */
.palette-liste[b-ogw88789f0] {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
}

.palette-abschnitt[b-ogw88789f0] {
    padding: 9px 9px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.palette-treffer[b-ogw88789f0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    font-size: 13.5px;
    color: var(--text-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.palette-treffer[aria-selected="true"][b-ogw88789f0] {
    color: var(--text);
    background: var(--bg-3);
    box-shadow: inset 2.5px 0 0 var(--accent);
}

.palette-text[b-ogw88789f0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.palette-name[b-ogw88789f0] {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-name mark[b-ogw88789f0] {
    font-weight: 700;
    color: var(--accent);
    background: transparent;
}

.palette-unterzeile[b-ogw88789f0] {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-bestand[b-ogw88789f0] {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 999px;
}

.palette-bestand.global[b-ogw88789f0] {
    color: var(--cyan);
    background: rgba(56, 217, 196, .12);
}

.palette-bestand.org[b-ogw88789f0] {
    color: var(--violet-text);
    background: rgba(181, 123, 255, .14);
}

.palette-leer[b-ogw88789f0] {
    padding: 22px 14px;
    font-size: 13px;
    text-align: center;
    color: var(--text-3);
}

.palette-fuß[b-ogw88789f0] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 8px 14px;
    font-size: 11.5px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}

/* Unter 700 px trägt der Fuß keine Tastenhilfe (Touch). */
@media (max-width: 699.98px) {
    .palette-fuß[b-ogw88789f0] {
        display: none;
    }
}
/* /Components/Layout/BenachrichtigungsGlocke.razor.rz.scp.css */
/* 178 B5 (T014; contracts/benachrichtigungen.md §7 „Glocke“): Werte aus
   mockups/benachrichtigungen/benachrichtigungen.css (.leisten-knopf, .glocke .menü-marke,
   .glocke.hat-neue, @keyframes wackeln, .menü-marke-bn, .menü-marke.stoß). Der Knopf trägt den
   Körper der Leisten-Knöpfe selbst (Scoped CSS der Seitenleiste reicht nicht in den Baustein). */

.benachrichtigungen-glocke[b-nhsx7syty5] {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--text-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.benachrichtigungen-glocke:hover[b-nhsx7syty5],
.benachrichtigungen-glocke[aria-expanded="true"][b-nhsx7syty5] {
    color: var(--text);
    background: var(--bg-3);
    border-color: var(--border);
    filter: none;
}

.benachrichtigungen-glocke:focus-visible[b-nhsx7syty5] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Hat sie Neues, tritt sie aus dem leisen Ton heraus. */
.benachrichtigungen-glocke.neu[b-nhsx7syty5] {
    color: var(--text);
}

.benachrichtigungen-glocke-zeichen[b-nhsx7syty5] {
    display: grid;
    place-items: center;
    transform-origin: 50% 10%;
}

/* Einmal wackeln beim Erscheinen (FR-009) — das Zeichen wird bei steigender Zahl neu angelegt. */
.benachrichtigungen-glocke.neu .benachrichtigungen-glocke-zeichen[b-nhsx7syty5] {
    animation: benachrichtigungen-wackeln-b-nhsx7syty5 1s ease .2s 1;
}

@keyframes benachrichtigungen-wackeln-b-nhsx7syty5 {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-11deg); }
    60% { transform: rotate(7deg); }
    80% { transform: rotate(-3deg); }
}

/* Die Zahl: Form der Fragen-Marke, aber Akzentblau — „nur zur Kenntnis“. */
.benachrichtigungen-zahl[b-nhsx7syty5] {
    position: absolute;
    top: -5px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--bg-2);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    animation: benachrichtigungen-stoß-b-nhsx7syty5 .5s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes benachrichtigungen-stoß-b-nhsx7syty5 {
    0% { transform: scale(.4); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .benachrichtigungen-glocke.neu .benachrichtigungen-glocke-zeichen[b-nhsx7syty5],
    .benachrichtigungen-zahl[b-nhsx7syty5] {
        animation: none;
    }
}
/* /Components/Layout/BenachrichtigungsListe.razor.rz.scp.css */
/* 178 B5 (T015; contracts/benachrichtigungen.md §7; Soll-Bild mockups/benachrichtigungen/ Variante B):
   Werte aus benachrichtigungen.css — gemeinsame Zeile (.bn-zeile, .bn-kopf, .bn-sym, .bn-meta,
   .bn-details, .bn-leer) und die aufklappende Liste (.bn-pop, .bn-pop-kopf, .bn-pop-fuß). Hell und
   dunkel tragen sich über die Design-Tokens (app.css), wie der Rahmen.

   Ort: fest positioniert rechts neben der Leiste (240 px; Zeichen-Leiste 60 px), oben 8 px; die
   Spitze zeigt auf die Glocke (Leistenkopf: Mitte bei 27 px, in der Zeichen-Leiste untereinander
   bei 63 px). Unter 700 px ein Blatt unter der Kopfzeile über die volle Breite, mit ×. */

/* Klick daneben schließt (unsichtbar, über dem Inhalt, unter der Liste). Nacharbeit B5-2: UNTER der
   Leiste (120) und über dem Schleier (110) — ein Klick auf einen Navigationspunkt erreicht den Link
   und führt zur Seite; die Seitenleiste schließt die Liste dabei. Vorher lag der Fänger mit 150 über
   der Leiste und schluckte den Klick in jeder Breite. */
.benachrichtigungen-fänger[b-90ddwn11ph] {
    position: fixed;
    inset: 0;
    z-index: 115;
    background: transparent;
}

/* Unter 700 px bleibt auch die Kopfzeile (☰, Glocke, Suche) frei. */
@media (max-width: 699.98px) {
    .benachrichtigungen-fänger[b-90ddwn11ph] {
        top: var(--kopfzeile-höhe);
    }
}

.benachrichtigungen-liste[b-90ddwn11ph] {
    --spitze: 13px;
    position: fixed;
    top: 8px;
    left: calc(var(--leiste-breite) + 10px);
    z-index: 160;
    display: flex;
    flex-direction: column;
    width: 432px;
    max-width: calc(100vw - var(--leiste-breite) - 20px);
    max-height: calc(100vh - 16px);
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .1);
    transform-origin: top left;
    animation: benachrichtigungen-seitlich-b-90ddwn11ph .16s ease both;
}

.benachrichtigungen-liste:focus[b-90ddwn11ph] {
    outline: none;
}

/* Spitze zur Glocke */
.benachrichtigungen-liste[b-90ddwn11ph]::before {
    content: "";
    position: absolute;
    top: var(--spitze);
    left: -7px;
    width: 12px;
    height: 12px;
    background: var(--bg-2);
    border-left: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    transform: rotate(45deg);
}

@keyframes benachrichtigungen-seitlich-b-90ddwn11ph {
    from { opacity: 0; transform: translateX(-6px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes benachrichtigungen-von-oben-b-90ddwn11ph {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* Eingeklappte Leiste (≥ 1100 px): die Glocke steht unter der Marke. */
@media (min-width: 1100px) {
    .benachrichtigungen-liste.eingeklappt[b-90ddwn11ph] {
        --spitze: 49px;
        left: calc(var(--zeichenleiste-breite) + 10px);
        max-width: calc(100vw - var(--zeichenleiste-breite) - 20px);
    }
}

/* Zeichen-Leiste (700–1099 px). */
@media (min-width: 700px) and (max-width: 1099.98px) {
    .benachrichtigungen-liste[b-90ddwn11ph] {
        --spitze: 49px;
        left: calc(var(--zeichenleiste-breite) + 10px);
        max-width: calc(100vw - var(--zeichenleiste-breite) - 20px);
    }
}

/* Kopf */
.benachrichtigungen-kopf[b-90ddwn11ph] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
}

.benachrichtigungen-kopf-text[b-90ddwn11ph] {
    flex: 1;
    min-width: 0;
}

.benachrichtigungen-kopf h2[b-90ddwn11ph] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

/* Eine Zeile: „<Kontext> · Nichts davon braucht eine Antwort.“ — wird es eng, kürzt sich der Name. */
.benachrichtigungen-unterzeile[b-90ddwn11ph] {
    display: flex;
    gap: .3em;
    min-width: 0;
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
}

.benachrichtigungen-kontext[b-90ddwn11ph] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.benachrichtigungen-satz[b-90ddwn11ph] {
    flex: none;
}

/* × nur im Blatt (< 700 px) */
.benachrichtigungen-zu[b-90ddwn11ph] {
    display: none;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    margin-left: auto;
    padding: 0;
    color: var(--text-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.benachrichtigungen-zu:hover[b-90ddwn11ph] {
    color: var(--text);
    background: var(--bg-3);
    border-color: var(--border);
    filter: none;
}

.benachrichtigungen-zu:focus-visible[b-90ddwn11ph] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Rumpf */
.benachrichtigungen-rumpf[b-90ddwn11ph] {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.benachrichtigungen-rumpf[aria-busy="true"][b-90ddwn11ph] {
    min-height: 120px;
}

.benachrichtigungen-zeilen[b-90ddwn11ph] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ===== Zeile ===== */
.benachrichtigung[b-90ddwn11ph] {
    position: relative;
    border-bottom: 1px solid var(--border);
}

.benachrichtigung:last-child[b-90ddwn11ph] {
    border-bottom: 0;
}

.benachrichtigung-kopf[b-90ddwn11ph] {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 14px;
    align-items: start;
    gap: 11px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    font: inherit;
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.benachrichtigung-kopf:hover[b-90ddwn11ph] {
    background: var(--bg-3);
    filter: none;
}

.benachrichtigung-kopf:focus-visible[b-90ddwn11ph] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 0;
}

/* Art-Zeichen: Information gelb, Aufgabe fertig grün, Lauf gescheitert rot, Spezifikation violett. */
.benachrichtigung-art[b-90ddwn11ph] {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 8px;
}

.benachrichtigung-art[b-90ddwn11ph]  .menü-zeichen {
    width: 15px;
    height: 15px;
}

.benachrichtigung-art.art-information[b-90ddwn11ph] {
    color: var(--yellow-text);
    background: var(--tint-yellow);
}

.benachrichtigung-art.art-task_accepted[b-90ddwn11ph] {
    color: var(--green);
    background: var(--tint-green);
}

.benachrichtigung-art.art-run_failed_final[b-90ddwn11ph] {
    color: var(--red-text);
    background: var(--tint-red);
}

.benachrichtigung-art.art-specification_ready[b-90ddwn11ph] {
    color: var(--violet-text);
    background: rgba(181, 123, 255, .15);
}

.benachrichtigung-haupt[b-90ddwn11ph] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Text auf höchstens zwei Zeilen, mit Ellipse. */
.benachrichtigung-text[b-90ddwn11ph] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.42;
    color: var(--text);
    overflow-wrap: anywhere;
}

.benachrichtigung-meta[b-90ddwn11ph] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
}

.benachrichtigung-org[b-90ddwn11ph] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.benachrichtigung-trenner[b-90ddwn11ph] {
    opacity: .6;
}

.benachrichtigung-zeit[b-90ddwn11ph] {
    font-variant-numeric: tabular-nums;
}

.benachrichtigung-kopf[b-90ddwn11ph]  .benachrichtigung-pfeil {
    width: 14px;
    height: 14px;
    margin-top: 6px;
    color: var(--text-3);
    transition: transform .15s;
}

.benachrichtigung.auf .benachrichtigung-kopf[b-90ddwn11ph]  .benachrichtigung-pfeil {
    transform: rotate(180deg);
}

/* Neu: blauer Balken links, getönte Fläche, Punkt, fetter Text. Bleibt, solange die Liste offen
   ist — die Zahl an der Glocke ist da schon zurückgesetzt. */
.benachrichtigung.neu[b-90ddwn11ph] {
    background: linear-gradient(90deg, var(--tint-accent), transparent 70%);
}

.benachrichtigung.neu[b-90ddwn11ph]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--accent);
}

.benachrichtigung.neu .benachrichtigung-text[b-90ddwn11ph] {
    font-weight: 600;
}

.benachrichtigung-punkt[b-90ddwn11ph] {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    vertical-align: 1px;
    border-radius: 50%;
    background: var(--accent);
}

/* Neues bei offener Liste gleitet oben ein; „Ansehen“ hebt die Zeile kurz hervor. */
.benachrichtigung.frisch[b-90ddwn11ph] {
    animation: benachrichtigung-frisch-b-90ddwn11ph 1.6s ease both;
}

@keyframes benachrichtigung-frisch-b-90ddwn11ph {
    0% { opacity: 0; transform: translateY(-6px); background-color: rgba(108, 140, 255, .35); }
    25% { opacity: 1; transform: none; }
    100% { background-color: transparent; }
}

.benachrichtigung.betont[b-90ddwn11ph] {
    animation: benachrichtigung-betont-b-90ddwn11ph 1.4s ease 2;
}

@keyframes benachrichtigung-betont-b-90ddwn11ph {
    50% { box-shadow: inset 0 0 0 1.5px var(--accent); }
}

/* ===== Einzelheiten ===== */
.benachrichtigung-einzelheiten[b-90ddwn11ph] {
    padding: 0 14px 13px 51px;
    animation: benachrichtigungen-von-oben-b-90ddwn11ph .14s ease both;
}

.benachrichtigung-einzelheiten[hidden][b-90ddwn11ph] {
    display: none;
}

.benachrichtigung-einzelheiten dl[b-90ddwn11ph] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    font-size: 12.5px;
}

.benachrichtigung-einzelheiten dt[b-90ddwn11ph] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-3);
}

.benachrichtigung-einzelheiten dd[b-90ddwn11ph] {
    margin: 0 0 6px;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.benachrichtigung-einzelheiten-fuß[b-90ddwn11ph] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 11px;
}

.benachrichtigung-aufgabe[b-90ddwn11ph] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-2);
    text-decoration: none;
}

.benachrichtigung-aufgabe:hover[b-90ddwn11ph] {
    text-decoration: none;
}

.benachrichtigung-aufgabe[b-90ddwn11ph]  .menü-zeichen {
    width: 14px;
    height: 14px;
    transition: transform .15s;
}

.benachrichtigung-aufgabe:hover[b-90ddwn11ph]  .menü-zeichen {
    transform: translateX(3px);
}

.benachrichtigung-nummer[b-90ddwn11ph] {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-3);
}

.benachrichtigung-verschwindet[b-90ddwn11ph] {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-3);
}

.benachrichtigung-verschwindet[b-90ddwn11ph]  .menü-zeichen {
    width: 13px;
    height: 13px;
    margin-top: 2px;
}

/* ===== Leer und Fehler ===== */
.benachrichtigungen-leer[b-90ddwn11ph] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 46px 22px;
    text-align: center;
    font-size: 13px;
    color: var(--text-2);
}

.benachrichtigungen-leer-ring[b-90ddwn11ph] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    color: var(--text-3);
    background: var(--bg-3);
    border: 1px dashed var(--border-light);
    border-radius: 50%;
}

.benachrichtigungen-leer-ring[b-90ddwn11ph]  .menü-zeichen {
    width: 24px;
    height: 24px;
}

.benachrichtigungen-leer b[b-90ddwn11ph] {
    font-size: 14px;
    color: var(--text);
}

.benachrichtigungen-fehler[b-90ddwn11ph] {
    margin: 0;
    padding: 28px 22px;
    text-align: center;
    font-size: 13px;
    color: var(--red-text);
}

/* ===== Fuß: ein Satz, wie sich die Liste aufräumt ===== */
.benachrichtigungen-fuß[b-90ddwn11ph] {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 8px 14px;
    font-size: 11.5px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}

.benachrichtigungen-fuß[b-90ddwn11ph]  .menü-zeichen {
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 2px;
}

/* ===== Blatt (< 700 px) ===== */
@media (max-width: 699.98px) {
    .benachrichtigungen-liste[b-90ddwn11ph],
    .benachrichtigungen-liste.eingeklappt[b-90ddwn11ph] {
        top: calc(var(--kopfzeile-höhe) + 6px);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--kopfzeile-höhe) - 14px);
        transform-origin: top right;
        animation-name: benachrichtigungen-von-oben-b-90ddwn11ph;
    }

    /* Die Spitze zeigt nach oben auf die Glocke rechts in der Kopfzeile. */
    .benachrichtigungen-liste[b-90ddwn11ph]::before {
        top: -7px;
        left: auto;
        right: 13px;
        transform: rotate(135deg);
    }

    .benachrichtigungen-zu[b-90ddwn11ph] {
        display: grid;
    }

    .benachrichtigung-einzelheiten[b-90ddwn11ph] {
        padding-left: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .benachrichtigungen-liste[b-90ddwn11ph],
    .benachrichtigung.frisch[b-90ddwn11ph],
    .benachrichtigung.betont[b-90ddwn11ph],
    .benachrichtigung-einzelheiten[b-90ddwn11ph] {
        animation: none;
    }

    .benachrichtigung-kopf[b-90ddwn11ph]  .benachrichtigung-pfeil,
    .benachrichtigung-aufgabe[b-90ddwn11ph]  .menü-zeichen {
        transition: none;
    }
}
/* /Components/Layout/BenutzerMenü.razor.rz.scp.css */
/* 162 B5 (T015; seitenleiste §1 ⑤, §5): Leistenfuß und Benutzer-Menü. Das
   Menü öffnet über dem Fuß und liegt über dem Inhalt. */
.leisten-fuß[b-im9khx7s52] {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
}

.benutzer-knopf[b-im9khx7s52] {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    gap: 9px;
    padding: 6px 8px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.benutzer-knopf:hover[b-im9khx7s52] {
    background: var(--bg-3);
    filter: none;
}

.benutzer-knopf:focus-visible[b-im9khx7s52] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.benutzer-avatar[b-im9khx7s52] {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-4);
    border: 1px solid var(--border-light);
    border-radius: 50%;
}

.benutzer-text[b-im9khx7s52] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.app-header-user[b-im9khx7s52] {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.benutzer-text .env-badge[b-im9khx7s52] {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-3);
}

.leisten-knopf[b-im9khx7s52] {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--text-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.leisten-knopf:hover[b-im9khx7s52] {
    color: var(--text);
    background: var(--bg-3);
    border-color: var(--border);
    filter: none;
}

/* Das Zeichen folgt dem data-theme-Attribut unmittelbar — in dunkel steht die
   Sonne (Aktion: hell), in hell der Mond; kein Aufblitzen beim Laden. */
.theme-toggle[b-im9khx7s52]  .theme-icon-moon {
    display: none;
}

[data-theme="light"] .theme-toggle[b-im9khx7s52]  .theme-icon-sun {
    display: none;
}

[data-theme="light"] .theme-toggle[b-im9khx7s52]  .theme-icon-moon {
    display: block;
}

.benutzer-menü-schleier[b-im9khx7s52] {
    position: fixed;
    inset: 0;
    z-index: 140;
}

.benutzer-menü[b-im9khx7s52] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 10px;
    z-index: 150;
    width: 250px;
    max-width: calc(100vw - 16px);
    padding: 5px;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.benutzer-menü hr[b-im9khx7s52] {
    margin: 5px 2px;
    border: 0;
    border-top: 1px solid var(--border);
}

.benutzer-menü-kopf[b-im9khx7s52] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 9px 6px;
}

.benutzer-menü-titel[b-im9khx7s52] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.benutzer-menü-kopf .env-badge[b-im9khx7s52] {
    align-self: flex-start;
    padding: 2px 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    border: 1px dashed var(--border-light);
    border-radius: 999px;
}

.benutzer-menü-punkt[b-im9khx7s52] {
    width: 100%;
    justify-content: flex-start;
    gap: 9px;
    padding: 7px 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.benutzer-menü-punkt:hover[b-im9khx7s52],
.benutzer-menü-punkt:focus-visible[b-im9khx7s52] {
    color: var(--text);
    background: var(--bg-3);
    outline: none;
    filter: none;
}

.benutzer-menü-punkt:focus-visible[b-im9khx7s52] {
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

.app-logout-form[b-im9khx7s52] {
    margin: 0;
}
/* /Components/Layout/Brotkrumen.razor.rz.scp.css */
/* 162 B5 (T015; navigation §6; MOCK Kern 6): „Kontext › Gruppe › Seite“ —
   eine Zeile, lange Teile kürzen optisch; die Seite steht vorn in Textfarbe. */
.brotkrumen[b-e14hagix1c] {
    min-width: 0;
    overflow: hidden;
}

.brotkrumen ol[b-e14hagix1c] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
}

.brotkrumen li[b-e14hagix1c] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.brotkrume[b-e14hagix1c] {
    overflow: hidden;
    text-overflow: ellipsis;
}

a.brotkrume[b-e14hagix1c] {
    color: var(--text-2);
}

.brotkrume.aktuell[b-e14hagix1c] {
    color: var(--text);
    font-weight: 600;
}

.brotkrumen-trenner[b-e14hagix1c] {
    opacity: .6;
}
/* /Components/Layout/Kontextwähler.razor.rz.scp.css */
/* 162 B5 (T016; seitenleiste §1 ②, §3): Kontextwähler — Knopf mit Zeichen,
   klein „Organisation“, fett der Kontextname; das Panel öffnet darunter und
   liegt über dem Inhalt (auch aus der 60-px-Zeichen-Leiste heraus). */
.kontext[b-cp4t05dzrz] {
    position: relative;
}

.org-button[b-cp4t05dzrz] {
    width: 100%;
    justify-content: flex-start;
    gap: 9px;
    padding: 7px 8px;
    color: var(--text);
    text-align: left;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.org-button:hover[b-cp4t05dzrz] {
    border-color: var(--border-light);
    filter: none;
}

.org-button:focus-visible[b-cp4t05dzrz] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.org-button-text[b-cp4t05dzrz] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.org-button-text small[b-cp4t05dzrz] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-3);
}

.org-button-label[b-cp4t05dzrz] {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.org-dropdown-backdrop[b-cp4t05dzrz] {
    position: fixed;
    inset: 0;
    z-index: 140;
}

.org-dropdown[b-cp4t05dzrz] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 150;
    width: 260px;
    max-width: calc(100vw - 16px);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 5px;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.org-dropdown hr[b-cp4t05dzrz] {
    margin: 5px 2px;
    border: 0;
    border-top: 1px solid var(--border);
}

.org-dropdown-titel[b-cp4t05dzrz] {
    display: flex;
    justify-content: space-between;
    padding: 8px 9px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.org-dropdown-count[b-cp4t05dzrz] {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.org-dropdown-punkt[b-cp4t05dzrz] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.org-dropdown-punkt:hover[b-cp4t05dzrz],
.org-dropdown-punkt:focus-visible[b-cp4t05dzrz] {
    color: var(--text);
    text-decoration: none;
    background: var(--bg-3);
    outline: none;
    filter: none;
}

.org-dropdown-punkt:focus-visible[b-cp4t05dzrz] {
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

.org-dropdown-punkt[aria-checked="true"][b-cp4t05dzrz] {
    font-weight: 600;
    color: var(--accent);
    background: var(--tint-accent);
}

.org-dropdown-name[b-cp4t05dzrz] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-dropdown-priority[b-cp4t05dzrz] {
    font-size: 11px;
    color: var(--text-3);
}

.org-dropdown-punkt[b-cp4t05dzrz]  .org-dropdown-check {
    visibility: hidden;
    color: var(--accent);
}

.org-dropdown-punkt[aria-checked="true"][b-cp4t05dzrz]  .org-dropdown-check {
    visibility: visible;
}

.org-dropdown-note[b-cp4t05dzrz] {
    margin: 4px 9px 8px;
    font-size: 12.5px;
    color: var(--text-3);
}

.org-bubble[b-cp4t05dzrz] {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--red);
    border-radius: 999px;
}
/* /Components/Layout/LeistenEintrag.razor.rz.scp.css */
/* 162 B5 (T017; seitenleiste §1 ④): ein Eintrag der Leiste (Mockup .a-punkt).
   Aktiv: getönte Fläche, Akzentfarbe, Balken links; die Kennzeichnung trägt
   Farbe und Fläche, nie Bewegung. */
.menü-eintrag[b-lfg8zm3e8d] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1px;
    padding: 6.5px 9px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-2);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.menü-eintrag:hover[b-lfg8zm3e8d] {
    color: var(--text);
    background: var(--bg-3);
    text-decoration: none;
}

.menü-eintrag:focus-visible[b-lfg8zm3e8d] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.menü-eintrag[aria-current="page"][b-lfg8zm3e8d] {
    font-weight: 600;
    color: var(--accent);
    background: var(--tint-accent);
}

.menü-eintrag[aria-current="page"][b-lfg8zm3e8d]::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.menü-name[b-lfg8zm3e8d] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Marke „alle“: der Eintrag öffnet die globale Fläche (A4/FR-008). */
.menü-alle[b-lfg8zm3e8d] {
    flex: none;
    padding: 1px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--cyan);
    background: rgba(56, 217, 196, .12);
    border-radius: 999px;
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* f18 US5 (T023, F01 C1; research.md R6): schmales Anmelde-Layout —
   zentrierte Karte im Mockup-4-Design (dunkle Flächenstufen, Akzentblau,
   Radius/Shadow nach contracts/design-system.md). */

.login-shell[b-3vrc58skwt] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(60rem 30rem at 80% -10%, rgba(108, 140, 255, .08), transparent 60%),
        radial-gradient(50rem 26rem at 10% 110%, rgba(77, 163, 255, .06), transparent 60%),
        var(--bg);
}

.login-area[b-3vrc58skwt] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 26px 60px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* 162 B5 (T018; contracts/seitenleiste.md §1/§2; research R1/R11): der Rahmen
   nach Konzept A — links die Seitenleiste (fest positioniert, eigener
   Baustein), rechts der Hauptbereich mit Brotkrumen-Zeile und Inhalt. Die
   Breitenstufen schalten über die Fensterbreite (keine Messung im Browser):
   ≥ 1100 px Rand 240 px (eingeklappt 60 px), 700–1099 px Rand 60 px
   (Zeichen-Leiste), < 700 px kein Rand, dafür oben die Kopfzeile (50 px).
   Farben, Radien und Schriftgrößen nur über die Design-Tokens aus app.css. */

/* Die gemeinsame Rahmen-Regel aller Seiten bleibt byte-gleich (Wächter
   TaskDetailMockup5Tests, FR-010/C9): Leiste, Kopfzeile, Schleier und
   Platzhalter liegen fest positioniert außerhalb des Flusses — im Fluss steht
   allein der Hauptbereich. */
.app-shell[b-kr95c3fisd] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.rahmen-haupt[b-kr95c3fisd] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-left: var(--leiste-breite);
    transition: margin-left .16s ease;
}

@media (min-width: 1100px) {
    /* B5-Nacharbeit H10: bis die Leiste ihren gemerkten Zustand meldet
       (.leiste-bereit), gilt der frühe des Inline-Skripts (App.razor) — für
       den Inhalt und den reservierten Platz; der Inhalt springt nicht. */
    .app-shell.leiste-eingeklappt .rahmen-haupt[b-kr95c3fisd],
    html.af-leiste-eingeklappt .app-shell:not(.leiste-bereit) .rahmen-haupt[b-kr95c3fisd] {
        margin-left: var(--zeichenleiste-breite);
    }

    html.af-leiste-eingeklappt .leisten-platzhalter[b-kr95c3fisd] {
        width: var(--zeichenleiste-breite);
    }
}

@media (max-width: 1099.98px) {
    .rahmen-haupt[b-kr95c3fisd] {
        margin-left: var(--zeichenleiste-breite);
    }
}

@media (max-width: 699.98px) {
    .rahmen-haupt[b-kr95c3fisd] {
        margin-left: 0;
        padding-top: var(--kopfzeile-höhe);
    }
}

/* ⑦ Brotkrumen-Zeile: feste Höhe (Teil von --kopf-höhe), auch leer. */
.brotkrumen-zeile[b-kr95c3fisd] {
    flex: none;
    display: flex;
    align-items: center;
    min-width: 0;
    height: var(--brotkrumen-höhe);
    padding: 0 26px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

@media (max-width: 699.98px) {
    .brotkrumen-zeile[b-kr95c3fisd] {
        padding: 0 16px;
    }
}

/* ⑧ Inhalt: rollt in sich, die Seite selbst rollt nie (body overflow hidden). */
.page[b-kr95c3fisd] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--page-padding);
}

/* 156 N20-Nacharbeit (2026-10-07): der untere Seitenabstand von 60 px
   (--page-padding, Mockup-4 für rollende Seiten) ließ unter jeder Werkbank
   einen leeren Streifen (1280×577: Werkbank-Unterkante 517). Die Vorlagen
   der Werkbank sehen unten 22 px vor (variante-a-werkbank/basis.css und
   transkript-lauf/index.html: .seite { padding: 22px 26px 22px }). Gilt nur
   zweispaltig, wo .page nicht rollt; einspaltig bleibt der Bestand. */
@media (min-width: 1100px) {
    .page:has(.af-maske)[b-kr95c3fisd],
    .page:has(.transcript-werkbank)[b-kr95c3fisd] {
        padding-bottom: 22px;
    }
}

/* Die Wide-Auszeichnung des Bestands (Board, Transkript) bleibt als
   Marker-Klasse; ihre Wirkung ist neutral. */
.app-main-wide[b-kr95c3fisd] {
    max-width: none;
}

/* A20 (072 Nachtrag „Inhalt springt“): der reservierte Platz der Leiste bzw.
   der Kopfzeile in den echten Tönen — ohne Text, ohne Weg. Dieselben Maße wie
   die Leiste, damit der Inhalt beim Erscheinen nicht springt. */
.leisten-platzhalter[b-kr95c3fisd] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--leiste-breite);
    background: var(--bg-2);
    border-right: 1px solid var(--border);
}

@media (max-width: 1099.98px) {
    .leisten-platzhalter[b-kr95c3fisd] {
        width: var(--zeichenleiste-breite);
    }
}

@media (max-width: 699.98px) {
    .leisten-platzhalter[b-kr95c3fisd] {
        right: 0;
        bottom: auto;
        width: auto;
        height: var(--kopfzeile-höhe);
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rahmen-haupt[b-kr95c3fisd] {
        transition: none;
    }
}
/* /Components/Layout/MenüMarke.razor.rz.scp.css */
/* 162 B5 (T015; seitenleiste §4): Fragen als rote Zahl, Läufe/Überwacher als
   pulsender Punkt mit Zahl, Container als ruhiger Punkt mit Zahl (Mockup
   .hm-zahl/.hm-lauf). Bewegung entfällt bei prefers-reduced-motion. */
.menü-marke[b-qf3v7klusj] {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 18px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
}

.menü-marke-fragen[b-qf3v7klusj] {
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    color: #fff;
    background: var(--red);
}

.menü-marke-punkt[b-qf3v7klusj] {
    gap: 4px;
    padding: 0 6px 0 5px;
    font-family: var(--mono);
    color: var(--accent);
    background: var(--tint-accent);
}

.menü-marke-punkt[b-qf3v7klusj]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.menü-marke-puls[b-qf3v7klusj]::before {
    animation: menü-marke-puls-b-qf3v7klusj 1.8s ease-in-out infinite;
}

@keyframes menü-marke-puls-b-qf3v7klusj {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* 165 B5 (T019/T020; FR-011, marken-ram-warnung §2): die RAM-Warn-Marke —
   derselbe Punkt-Körper wie die Zahl-Marken, nur in den Warn-Tönen. Der Puls
   kommt aus der globalen .af-warn-puls (app.css), damit die Menü-Marke genau
   so pulsiert wie Badge, Chip und Detail-Marke der Container-Maske.

   165 B5-Nacharbeit (Review ora-2 F1): diese beiden Regeln standen im
   @media-Block für prefers-reduced-motion — ohne Reduced-Motion war die
   Warn-Marke damit NICHT gelb, sondern trug die Akzent-Töne der Zahl-Marke.
   Sie gehören vor den Block; die Farbe hängt an keiner Bewegungs-Vorliebe. */
.menü-marke-warnung[b-qf3v7klusj] {
    color: var(--yellow-text);
    background: var(--tint-yellow);
}

.menü-marke-warnung[b-qf3v7klusj]::before {
    background: var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
    .menü-marke-puls[b-qf3v7klusj]::before {
        animation: none;
    }
}
/* /Components/Layout/MenüZeichen.razor.rz.scp.css */
/* 162 B5 (R14): Linien-Zeichen, Strichstärke 1.8, Farbe aus der Schrift. */
svg.menü-zeichen[b-a6p6yppzxt] {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

svg.menü-zeichen.klein[b-a6p6yppzxt] {
    width: 14px;
    height: 14px;
}
/* /Components/Layout/OrgZeichen.razor.rz.scp.css */
/* 162 B5 (seitenleiste §3; MOCK A .org-zeichen): Kürzel auf Farbe bzw. Globus. */
.org-zeichen[b-jgxkqbqwag] {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
    border-radius: 6px;
}

.org-zeichen.alle[b-jgxkqbqwag] {
    color: var(--cyan);
    background: var(--bg-4);
    border: 1px solid var(--border-light);
}

.org-zeichen.alle[b-jgxkqbqwag]  svg {
    width: 14px;
    height: 14px;
}

/* 178 B5 (Mockup benachrichtigungen.css .org-zeichen.klein): die Meta-Zeile der Benachrichtigung. */
.org-zeichen.klein[b-jgxkqbqwag] {
    width: 16px;
    height: 16px;
    font-size: 7.5px;
    letter-spacing: -.2px;
    border-radius: 4px;
}

.org-zeichen.alle.klein[b-jgxkqbqwag]  svg {
    width: 11px;
    height: 11px;
}

.farbe-0[b-jgxkqbqwag] { background: #4f6bdc; }
.farbe-1[b-jgxkqbqwag] { background: #2a8f62; }
.farbe-2[b-jgxkqbqwag] { background: #8a55c9; }
.farbe-3[b-jgxkqbqwag] { background: #b9436f; }
.farbe-4[b-jgxkqbqwag] { background: #1d8a7d; }
.farbe-5[b-jgxkqbqwag] { background: #a86a12; }
/* /Components/Layout/ProjectLayout.razor.rz.scp.css */
/* f16 US3 (T010): Body-Container des Projekt-Layouts. f19 US1 (T015):
   das Menü ist in das Gerüst gewandert (MainLayout, kein Doppelmenü) —
   übrig bleibt der Body-Container (min-width für das breite Board). */
.project-layout-body[b-x2nl72db8m] {
    min-width: 0;
}

/* f30 US3 (T014, L2; contracts/transkript-livestrom.md §4): Höhen-
   Durchreiche für die Vollflächen-Seite — das Transkript spannt sich
   als Flex-Spalte über die Resthöhe von .page; ohne feste Höhe hier
   würde height:100% der Seite gegen „auto" auflösen (Kollaps). Per
   :has strikt auf die Transkript-Route begrenzt: alle übrigen
   Projekt-Seiten behalten den natürlich wachsenden Container. */
.project-layout-body:has(> .transcript)[b-x2nl72db8m] {
    height: 100%;
}

/* f113 T006 (US1, Vertrag aufgabendetail-scroll-rahmen.md §2.1, G1/G2;
   FP-2 2026-09-19 wörtlich „Beide Spalten scrollen selbst, Seite scrollt
   nie"): dieselbe Höhen-Durchreiche für die Aufgabenseite. `.task-detail`
   ist `height: 100%` ⇒ exakt der Inhaltsbereich von `.page`; Kopfzeile und
   Aktionsleiste sind `auto`, das Raster nimmt den Flex-Rest. Damit steht
   der inhaltsabhängige Vorlauf (gemessen 115,8 px) NIRGENDS als Zahl
   (FR-002/W4). MESS belegt, dass das f30-Muster auch hier trägt (die
   Vollsicht hat `.page`-Überhang 0). Die Lade-/Fehler-Zweige rendern
   außerhalb von `.task-detail` — `:has` matcht dort nicht (K12). */
.project-layout-body:has(> .task-detail)[b-x2nl72db8m] {
    height: 100%;
}

/* 149 Batch 4 (Review B2, F8; contracts §1.1 „Höhe der Werkbank“): dieselbe
   Höhen-Durchreiche für die Werkbank-Masken. `.af-maske` ist eine Flex-Spalte
   mit `height: 100%` — Kopf und Hinweisleiste nehmen ihre eigene Höhe, die
   Werkbank den Rest; .page rollt nicht, auch wenn der Kopf umbricht. Ohne
   diese Regel löste 100% gegen „auto“ auf (die Werkbank wüchse mit dem
   Inhalt). */
.project-layout-body:has(> .af-maske)[b-x2nl72db8m] {
    height: 100%;
}
/* /Components/Layout/Seitenleiste.razor.rz.scp.css */
/* 162 B5 (T017; contracts/seitenleiste.md §1/§2; research R1): die Leiste nach
   mockups/hauptmenü/konzept-a-seitenleiste.html. Fest positioniert links; der
   Hauptbereich hält den Rand (MainLayout). Stufen über die Fensterbreite:
   ≥ 1100 px volle Leiste (240 px, eingeklappt 60 px), 700–1099 px
   Zeichen-Leiste (60 px; ausgeklappt 264 px ÜBER dem Inhalt mit Schleier),
   < 700 px Schublade hinter ☰ (min(300 px, 86 %)).
   Elemente der Kind-Bausteine (Kontextwähler, Benutzer-Menü, Einträge, Marken)
   werden für die Zeichen-Leiste über ::deep angesprochen. Senkrecht rollt nur
   ④ (overflow-y), ①–③ und ⑤ stehen fest; waagerecht rollt nichts. */

.seitenleiste[b-jwk2cbngrk] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    width: var(--leiste-breite);
    min-height: 0;
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    transition: width .16s ease, transform .18s ease;
}

/* ① Leistenkopf */
.leisten-kopf[b-jwk2cbngrk] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 8px 14px;
}

.leisten-marke[b-jwk2cbngrk] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

.leisten-marke:hover[b-jwk2cbngrk] {
    text-decoration: none;
}

.leisten-marke-zeichen[b-jwk2cbngrk] {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    font-size: 15px;
    background: var(--bg-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}

.leisten-marke-name[b-jwk2cbngrk] {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.leisten-knopf[b-jwk2cbngrk] {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--text-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.leisten-knopf:hover[b-jwk2cbngrk] {
    color: var(--text);
    background: var(--bg-3);
    border-color: var(--border);
    filter: none;
}

.leisten-knopf:focus-visible[b-jwk2cbngrk] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

#leiste-ausklappen[b-jwk2cbngrk],
.nur-schublade[b-jwk2cbngrk] {
    display: none;
}

/* ② Kontext */
.leisten-kontext[b-jwk2cbngrk] {
    position: relative;
    flex: none;
    padding: 2px 10px 10px;
    border-bottom: 1px solid var(--border);
}

/* ③ Suche — öffnet die Befehlspalette (B7) */
.leisten-suche[b-jwk2cbngrk] {
    flex: none;
    padding: 8px 10px 0;
}

.suche-knopf[b-jwk2cbngrk] {
    width: 100%;
    justify-content: flex-start;
    gap: 9px;
    padding: 6px 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-3);
    background: var(--bg-3);
    border: 1px solid var(--border);
}

.suche-text[b-jwk2cbngrk] {
    flex: 1;
    text-align: left;
}

.suche-taste[b-jwk2cbngrk] {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
}

/* ④ Einträge */
nav.hauptmenü[b-jwk2cbngrk] {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 8px 12px;
}

.menü-gruppe[b-jwk2cbngrk] {
    margin-top: 10px;
}

.menü-gruppe-kopf[b-jwk2cbngrk] {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

.menü-gruppe-kopf:hover[b-jwk2cbngrk] {
    color: var(--text-2);
    filter: none;
}

.menü-gruppe-kopf:focus-visible[b-jwk2cbngrk] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.menü-gruppe-kopf[b-jwk2cbngrk]  .menü-gruppe-pfeil {
    width: 13px;
    height: 13px;
    margin-left: auto;
    transition: transform .15s;
}

.menü-gruppe-kopf[aria-expanded="false"][b-jwk2cbngrk]  .menü-gruppe-pfeil {
    transform: rotate(-90deg);
}

.menü-gruppe-zahl[b-jwk2cbngrk] {
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: 0;
}

.menü-gruppe-inhalt[hidden][b-jwk2cbngrk] {
    display: none;
}

.menü-trenner[b-jwk2cbngrk] {
    display: none;
    height: 1px;
    margin: 8px 10px;
    background: var(--border);
}

/* Schleier unter ausgeklappter Leiste bzw. Schublade */
.leisten-schleier[b-jwk2cbngrk] {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(5, 8, 14, .55);
}

.leisten-schleier[hidden][b-jwk2cbngrk] {
    display: none;
}

[data-theme="light"] .leisten-schleier[b-jwk2cbngrk] {
    background: rgba(23, 32, 56, .3);
}

/* ⑥ Kopfzeile — nur unter 700 px (siehe unten) */
.rahmen-kopfzeile[b-jwk2cbngrk] {
    display: none;
}

.kopfzeile-ort[b-jwk2cbngrk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
}

.kopfzeile-name[b-jwk2cbngrk] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ===== Zeichen-Leiste: eingeklappt (≥ 1100 px) ===== */
@media (min-width: 1100px) {
    /* B5-Nacharbeit H10: bis die Leiste ihren gemerkten Zustand trägt
       (.bereit), gilt der frühe des Inline-Skripts (App.razor) — kein Springen. */
    html.af-zu-arbeiten:not(.af-leiste-eingeklappt) .seitenleiste:not(.bereit) .menü-gruppe[data-gruppe="arbeiten"]:not([data-aktiv]) .menü-gruppe-inhalt[b-jwk2cbngrk],
    html.af-zu-beobachten:not(.af-leiste-eingeklappt) .seitenleiste:not(.bereit) .menü-gruppe[data-gruppe="beobachten"]:not([data-aktiv]) .menü-gruppe-inhalt[b-jwk2cbngrk],
    html.af-zu-einrichten:not(.af-leiste-eingeklappt) .seitenleiste:not(.bereit) .menü-gruppe[data-gruppe="einrichten"]:not([data-aktiv]) .menü-gruppe-inhalt[b-jwk2cbngrk],
    html.af-zu-verwaltung:not(.af-leiste-eingeklappt) .seitenleiste:not(.bereit) .menü-gruppe[data-gruppe="verwaltung"]:not([data-aktiv]) .menü-gruppe-inhalt[b-jwk2cbngrk] {
        display: none;
    }

    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk] {
        width: var(--zeichenleiste-breite);
    }

    .seitenleiste.eingeklappt:not(.offen) #leiste-ausklappen[b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit) #leiste-ausklappen[b-jwk2cbngrk] {
        display: grid;
    }

    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .nur-breit,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .nur-breit,
    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .menü-name,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .menü-name,
    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .menü-alle,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .menü-alle,
    .seitenleiste.eingeklappt:not(.offen) .menü-gruppe-kopf[b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit) .menü-gruppe-kopf[b-jwk2cbngrk] {
        display: none;
    }

    .seitenleiste.eingeklappt:not(.offen) .menü-trenner[b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit) .menü-trenner[b-jwk2cbngrk],
    .seitenleiste.eingeklappt:not(.offen) .menü-gruppe-inhalt[hidden][b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit) .menü-gruppe-inhalt[hidden][b-jwk2cbngrk] {
        display: block;
    }

    .seitenleiste.eingeklappt:not(.offen) .menü-gruppe[b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit) .menü-gruppe[b-jwk2cbngrk] {
        margin-top: 0;
    }

    .seitenleiste.eingeklappt:not(.offen) .leisten-kopf[b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit) .leisten-kopf[b-jwk2cbngrk] {
        flex-direction: column;
        padding: 10px 0 6px;
    }

    .seitenleiste.eingeklappt:not(.offen) .leisten-kontext[b-jwk2cbngrk],
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit) .leisten-kontext[b-jwk2cbngrk] {
        padding: 2px 8px 10px;
    }

    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .menü-eintrag,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .menü-eintrag {
        justify-content: center;
        padding: 8px 0;
    }

    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .menü-marke,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .menü-marke {
        position: absolute;
        top: 1px;
        right: 5px;
        transform: scale(.85);
    }

    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .org-button,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .org-button {
        justify-content: center;
        padding: 6px 0;
        background: transparent;
    }

    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .leisten-fuß,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .leisten-fuß {
        flex-direction: column;
        padding: 8px 6px;
    }

    .seitenleiste.eingeklappt:not(.offen)[b-jwk2cbngrk]  .benutzer-knopf,
    html.af-leiste-eingeklappt .seitenleiste:not(.bereit)[b-jwk2cbngrk]  .benutzer-knopf {
        flex: none;
        justify-content: center;
        padding: 6px 0;
    }
}

/* ===== Mittlere Breite (700–1099 px): Zeichen-Leiste, ausklappbar ===== */
@media (max-width: 1099.98px) {
    .seitenleiste[b-jwk2cbngrk] {
        width: var(--zeichenleiste-breite);
    }

    .seitenleiste.offen[b-jwk2cbngrk] {
        width: 264px;
        box-shadow: var(--shadow);
    }

    #leiste-einklappen[b-jwk2cbngrk] {
        display: none;
    }

    #leiste-ausklappen[b-jwk2cbngrk] {
        display: grid;
    }
}

@media (min-width: 700px) and (max-width: 1099.98px) {
    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .nur-breit,
    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .menü-name,
    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .menü-alle,
    .seitenleiste:not(.offen) .menü-gruppe-kopf[b-jwk2cbngrk] {
        display: none;
    }

    .seitenleiste:not(.offen) .menü-trenner[b-jwk2cbngrk],
    .seitenleiste:not(.offen) .menü-gruppe-inhalt[hidden][b-jwk2cbngrk] {
        display: block;
    }

    .seitenleiste:not(.offen) .menü-gruppe[b-jwk2cbngrk] {
        margin-top: 0;
    }

    .seitenleiste:not(.offen) .leisten-kopf[b-jwk2cbngrk] {
        flex-direction: column;
        padding: 10px 0 6px;
    }

    .seitenleiste:not(.offen) .leisten-kontext[b-jwk2cbngrk] {
        padding: 2px 8px 10px;
    }

    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .menü-eintrag {
        justify-content: center;
        padding: 8px 0;
    }

    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .menü-marke {
        position: absolute;
        top: 1px;
        right: 5px;
        transform: scale(.85);
    }

    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .org-button {
        justify-content: center;
        padding: 6px 0;
        background: transparent;
    }

    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .leisten-fuß {
        flex-direction: column;
        padding: 8px 6px;
    }

    .seitenleiste:not(.offen)[b-jwk2cbngrk]  .benutzer-knopf {
        flex: none;
        justify-content: center;
        padding: 6px 0;
    }
}

/* ===== Schmal (< 700 px): Kopfzeile ⑥ und Schublade ===== */
@media (max-width: 699.98px) {
    .rahmen-kopfzeile[b-jwk2cbngrk] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 8px;
        height: var(--kopfzeile-höhe);
        padding: 0 12px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--border);
    }

    .seitenleiste[b-jwk2cbngrk] {
        width: min(300px, 86vw);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform .18s ease, visibility 0s linear .18s;
    }

    .seitenleiste.offen[b-jwk2cbngrk] {
        width: min(300px, 86vw);
        transform: none;
        visibility: visible;
        box-shadow: var(--shadow);
        transition: transform .18s ease, visibility 0s;
    }

    #leiste-einklappen[b-jwk2cbngrk],
    #leiste-ausklappen[b-jwk2cbngrk] {
        display: none;
    }

    .nur-schublade[b-jwk2cbngrk] {
        display: grid;
    }

    /* 178 B5 (seitenleiste Nachtrag §1 ⑥): unter 700 px steht die Glocke in der Kopfzeile. */
    .leisten-kopf[b-jwk2cbngrk]  .benachrichtigungen-glocke {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seitenleiste[b-jwk2cbngrk],
    .seitenleiste.offen[b-jwk2cbngrk],
    .menü-gruppe-kopf[b-jwk2cbngrk]  .menü-gruppe-pfeil {
        transition: none;
    }
}
/* /Components/Layout/ToastHost.razor.rz.scp.css */
/* Toast container (T041, FR-022, research.md R16; f18 T022): fixed at the
   bottom right per mockup styles.css (.toasts), non-modal. The container
   itself never captures pointer events — only the individual toast does —
   so nothing interactive gets blocked (FR-012). */

.toast-host[b-72zwdxzs2v] {
    position: fixed;
    bottom: 22px;
    right: 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    z-index: 300;
    pointer-events: none;
}

.toast[b-72zwdxzs2v] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 16rem;
    max-width: 380px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    border-left-width: 3px;
    background: var(--bg-3);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: var(--shadow);
    pointer-events: auto;
    animation: toast-in-b-72zwdxzs2v .25s ease;
}

@keyframes toast-in-b-72zwdxzs2v {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success[b-72zwdxzs2v] {
    border-left-color: var(--green);
}

.toast-error[b-72zwdxzs2v] {
    border-left-color: var(--red);
}

/* f44 T008 (N26): die Frage-Benachrichtigung — neutrale Info-Variante im
   Bestandston (Akzentkante), beide Themes über die Theme-Tokens. */
.toast-info[b-72zwdxzs2v] {
    border-left-color: var(--accent);
}

.toast-message[b-72zwdxzs2v] {
    flex: 1;
}

/* f44 T008 (G15): der Aktions-Anker — ein Schritt zur Antwortmöglichkeit;
   Bausteinsprache des Bestands (stiller Link, Akzent-Textfarbe). */
.toast-action[b-72zwdxzs2v] {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.toast-action:hover[b-72zwdxzs2v],
.toast-action:focus[b-72zwdxzs2v] {
    background: var(--bg-3);
    text-decoration: none;
}

/* 178 B5 (contracts/benachrichtigungen.md §6; Mockup benachrichtigungen.css .toast-action): die
   Rückruf-Aktion („Rückgängig“, „Ansehen“) im selben stillen Akzent-Ton wie der Anker — ein Knopf
   ohne Knopf-Körper, damit beide Aktionsarten gleich aussehen. */
.toast-action-callback[b-72zwdxzs2v] {
    padding: 2px 6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.toast-action-callback:hover[b-72zwdxzs2v],
.toast-action-callback:focus-visible[b-72zwdxzs2v] {
    background: var(--bg-4);
    filter: none;
}

.toast-action-callback:focus-visible[b-72zwdxzs2v] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* f44 T008 (Leitplanke): prefers-reduced-motion respektieren — die Ein-
   und Ausblende-Animation der Toast-Familie entfällt, Inhalt erscheint
   direkt. */
@media (prefers-reduced-motion: reduce) {
    .toast[b-72zwdxzs2v] {
        animation: none;
    }
}

.toast-close[b-72zwdxzs2v] {
    padding: 0 0.25rem;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.toast-close:hover[b-72zwdxzs2v] {
    filter: none;
    color: var(--text);
}
/* /Components/Mockups/MockupDetail.razor.rz.scp.css */
/* 168 B4 (T015; ui-verhalten §2 Zonen „Detail-Kopf“, „Werkzeugleiste“, „Inhalt“;
   AN6): das Detail der Galerie. Kopf und Knöpfe kommen aus den Werkbank-Bausteinen;
   hier stehen nur die Bühne des Mockups und ihre Rahmen.

   Die Bühne ist ein ruhiges Punktraster — das Mockup steht darauf wie ein Blatt auf
   dem Zeichentisch. Desktop füllt die Fläche, Tablet (820 px) und Mobil (390 px)
   stehen zentriert mit sichtbarem Rahmen; der Wechsel gleitet, der Frame lädt dabei
   nicht neu (nur die Klasse wechselt). Höhe = Detailfläche, der Frame rollt in sich. */

.mockup-unterzeile[b-hxyzxibaxj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mockup-vorhaben-link[b-hxyzxibaxj] {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
}

.mockup-vorhaben-link:hover[b-hxyzxibaxj] {
    text-decoration: underline;
}

.mockup-fassung-wahl[b-hxyzxibaxj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mockup-fassung-label[b-hxyzxibaxj] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.mockup-fassung[b-hxyzxibaxj] {
    width: auto;
    min-width: 220px;
    padding: 4px 8px;
    font-size: 12.5px;
}

/* Werkzeugleiste: Breite links, Seite und Ladezustand daneben. */
.mockup-werkzeuge[b-hxyzxibaxj] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 20px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}

.mockup-seite[b-hxyzxibaxj] {
    font-size: 12px;
    color: var(--text-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mockup-seite code[b-hxyzxibaxj] {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text);
}

.mockup-lädt[b-hxyzxibaxj] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--text-3);
}

/* Die Bühne. */
.mockup-bühne[b-hxyzxibaxj] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px;
    overflow: auto;
    background-color: var(--bg);
    background-image: radial-gradient(var(--border) 1px, transparent 1.2px);
    background-size: 18px 18px;
    border-radius: 0 0 var(--radius) var(--radius);
}

.mockup-rahmen[b-hxyzxibaxj] {
    flex: 1;
    min-height: 0;
    align-self: center;
    width: 100%;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: width .32s cubic-bezier(.2, .8, .2, 1), border-radius .32s, box-shadow .32s;
}

.mockup-rahmen--tablet[b-hxyzxibaxj] {
    width: 820px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.mockup-rahmen--mobil[b-hxyzxibaxj] {
    width: 390px;
    border: 1px solid var(--border-light);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.mockup-rahmen iframe[b-hxyzxibaxj] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .mockup-rahmen[b-hxyzxibaxj] {
        transition: none;
    }
}

/* Fehler statt Frame: als Text, oben auf der Bühne. */
.mockup-fehler[b-hxyzxibaxj] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    background: var(--tint-red);
    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Mockups/MockupGalerie.razor.rz.scp.css */
/* 168 B4 (T015): die Galerie trägt nur den Werkbank-Kern (app.css); hier steht allein
   der Zustand „Mockup nicht gefunden“ aus einem Link — als Text, die Liste bleibt
   bedienbar (ui-verhalten §2). Gleiche Gestalt wie der Fehler im Detail. */

.mockup-nicht-gefunden[b-pb5ixq00e2] {
    padding-top: 20px;
}

.mockup-fehler[b-pb5ixq00e2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    background: var(--tint-red);
    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Mockups/MockupGroßansicht.razor.rz.scp.css */
/*
   168 Nachtrag T046 (ui-verhalten §5): die Großansicht eines Mockups. Das Panel füllt
   das Fenster bis auf einen schmalen Rand, damit die Seite dahinter als Ort spürbar
   bleibt; die Bühne gibt dem iframe die ganze restliche Fläche. Dimm und Ebene wie
   die Screenshot-Großansicht (ImageLightbox.razor.css), Farben über Bestands-Tokens.
*/

.mockup-großansicht-overlay[b-i1ofirulaz] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 8, 14, .8);
}

.mockup-großansicht[b-i1ofirulaz] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.mockup-großansicht-kopf[b-i1ofirulaz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--border);
}

/* Der Name trägt den Kopf; lange Namen kürzen statt die Knöpfe zu verdrängen. */
.mockup-großansicht-titel[b-i1ofirulaz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.mockup-großansicht-titel[b-i1ofirulaz]  svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.mockup-großansicht-name[b-i1ofirulaz] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mockup-großansicht-galerie[b-i1ofirulaz],
.mockup-großansicht-schließen[b-i1ofirulaz] {
    flex: none;
}

/* Die Bühne: dasselbe ruhige Streifenmuster wie die Vorschau im Reiter, das iframe
   liegt randlos darauf und nimmt die ganze Fläche. */
.mockup-großansicht-bühne[b-i1ofirulaz] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, .025) 6px 12px),
        var(--bg-3);
}

.mockup-großansicht-bühne iframe[b-i1ofirulaz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

@media (max-width: 699.98px) {
    .mockup-großansicht-overlay[b-i1ofirulaz] {
        padding: 8px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mockup-großansicht-overlay[b-i1ofirulaz] {
        animation: mockup-großansicht-overlay-in-b-i1ofirulaz .16s ease-out;
    }

    .mockup-großansicht[b-i1ofirulaz] {
        animation: mockup-großansicht-panel-in-b-i1ofirulaz .2s ease-out;
    }

    @keyframes mockup-großansicht-overlay-in-b-i1ofirulaz {
        from {
            opacity: 0;
        }
    }

    @keyframes mockup-großansicht-panel-in-b-i1ofirulaz {
        from {
            opacity: 0;
            transform: translateY(8px) scale(.99);
        }
    }
}
/* /Components/Mockups/MockupListe.razor.rz.scp.css */
/* 168 B4 (T015; ui-verhalten §2 Zone „Liste links“): nur, was die Galerie-Liste
   von der Werkbank-Familie unterscheidet — Zeile (af-lz), Gruppenkopf (af-lg) und
   Marken (af-badge) kommen aus app.css. */

/* Der Gruppenkopf ist ein Knopf (auf-/zuklappen) im Kleid des af-lg. */
.mockup-gruppe-kopf[b-k8cblspff2] {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color .12s;
}

.mockup-gruppe-kopf:hover[b-k8cblspff2] {
    color: var(--text-2);
}

.mockup-gruppe-kopf:focus-visible[b-k8cblspff2] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.mockup-gruppe-pfeil[b-k8cblspff2] {
    display: inline-flex;
    width: 12px;
    height: 12px;
    opacity: .8;
}

/* Der Vorhaben-Pfad ist ein Ordnername — in Ziffernschrift, nicht in Versalien. */
.mockup-gruppe-pfad[b-k8cblspff2] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.mockup-gruppe-n[b-k8cblspff2] {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: 0;
}

.mockup-zeile-datum[b-k8cblspff2] {
    font-size: 11px;
    color: var(--text-3);
    align-self: center;
    white-space: nowrap;
}
/* /Components/Pages/AdminAgentExchangePage.razor.rz.scp.css */
/* 145 D T001 (specs/145-austausch-global, FR-209; 144er Sprache ohne Mockup):
   die globale Sicht als ein-Bereich-Postfach — Kopfzeile über dem Strom,
   keine Auswahl (die Fläche ist Ketten-Verfolgung über ALLE Organisationen,
   C1), keine Pflege-Elemente (FR-208). Tokens aus app.css, der Strom bringt
   sein eigenes Scoped-CSS mit. Der ehrliche Grenz-Hinweis (admin-log-hinweis,
   FR-207) behält bewusst seinen Bestands-Klassennamen.
   149 T025: Seitenkopf und Spalte kommen aus der Werkbank-Familie
   (MaskenKopf, .af-maske); hier bleibt die Strom-Fläche mit der Suche im Kopf. */

.af-ag-strom-fläche[b-udl00sjafv] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.af-ag-kopf[b-udl00sjafv] {
    flex: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.af-ag-titel[b-udl00sjafv] {
    font-size: 15.5px;
    font-weight: 700;
}

.admin-agenten-austausch[b-udl00sjafv]  .af-ag-suche {
    flex: 0 1 320px;
    min-width: 200px;
}

.af-ag-stände[b-udl00sjafv] {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-2);
}

/* Die ehrliche Grenze (FR-207): sichtbar benannt, nie still. */
.admin-log-hinweis[b-udl00sjafv] {
    flex: none;
    margin: 8px 0 0;
    color: var(--text-3);
    font-size: 11.5px;
}

@media (max-width: 1100px) {
    .af-ag-strom-fläche[b-udl00sjafv] {
        flex: none;
    }
}
/* /Components/Pages/AdminSecretDetailPage.razor.rz.scp.css */
/* AdminSecretDetailPage (A-Muster): dünner Deep-Link-Wrapper um die
   Detail-Schublade (SecretDetailPanel) — nur der Seitenkopf mit dem
   Zurück-Link; alle Detail-Styles liegen in der Panel-Komponente. */

.secret-detail-head[b-k41gfdowoj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 16px;
}

.secret-detail-back[b-k41gfdowoj] {
    flex: none;
    font-size: 13px;
    color: var(--accent-2);
}

.secret-detail-error[b-k41gfdowoj] {
    color: var(--red);
    margin: 0;
}
/* /Components/Pages/AdminSecretsPage.razor.rz.scp.css */
/* AdminSecretsPage: Der Seiteninhalt lebt in der Workspace (A-Muster) —
   globale af-page-head-Bausteine stylen sich selbst; hier bleibt nur die
   Seitenbreite der Fläche. */

.af-page-head[b-86jgaszaph] {
    margin-bottom: 16px;
}
/* /Components/Pages/BoardPage.razor.rz.scp.css */
/* f18 US5 (T025): Board-Seitenkopf im Mockup-Look; Lanes-Raster aus T011
   (volle Fensterbreite, FR-004) bleibt unverändert. */

h1[b-ckyj7h29nj] {
    font-size: 21px;
    font-weight: 700;
    margin: 0;
}

.board-header[b-ckyj7h29nj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 16px;
}

.board-header h1[b-ckyj7h29nj] {
    margin: 0;
}

/* Der Umschalt-Link ist jetzt DER Untertitel (2026-09-17, analog zur
   Liste): Block unter dem Titel, Untertitel-Optik — kein Flex-Geschwister
   in der Actions-Zeile mehr. Der Unterstrich bleibt als Link-Affordanz. */
.board-kopf-text[b-ckyj7h29nj] {
    min-width: 0;
}

.board-kopf-sub[b-ckyj7h29nj] {
    display: inline-block;
    margin: 4px 0 0;
    color: var(--text-2);
    font-size: 13px;
}

.board-ansicht-wechsel[b-ckyj7h29nj] {
    font-weight: 400;
    text-decoration: underline;
}

.board-ansicht-wechsel:hover[b-ckyj7h29nj] {
    color: var(--text);
}

/* Das f25-Band `.board-lane-filter` stand hier bis 077 T030. Es ist ERSETZT
   durch die gemeinsame `FilterMarkenzeile` (research R8) — dieselbe Zeile,
   die auch über der Aufgabenliste steht. Seine beiden Zusagen bleiben
   erfüllt und sind es besser: Der wirkende Filter steht im Klartext (und
   jede Marke ist EINZELN löschbar, nicht nur alles auf einmal), und der Weg
   zurück heißt jetzt „Alle Filter löschen". Dazu kommt die Trefferzahl, über
   die das Band schwieg. */

/* 077 T030 (FR-016 F1): Facettenspalte links, Board rechts — dieselbe
   Aufteilung wie an der Liste, und aus demselben Grund `auto`: Die Spalte
   trägt ihre Breite selbst (250 px offen, 44 px als Streifen), also muss das
   Board für das Ein- und Ausklappen nichts verdrahten.

   `min-width: 0` an der rechten Spur ist hier nicht optional: `.board-lanes`
   scrollt waagerecht (sechs Lanes à mindestens 210 px, 171 B4). Ohne die Null würde
   die Spur auf ihren Inhalt wachsen statt zu scrollen, und die
   Facettenspalte würde aus dem Fenster geschoben. */
.board-zweispalt[b-ckyj7h29nj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Dieselbe Grenze wie an der Aufgabenliste: Unter 900 px steht die
   Filterfläche ÜBER dem Board statt daneben. Ohne diese Zeile blieb der
   eingeklappte Streifen in der `auto`-Spur stehen und wuchs auf die Breite
   seines Inhalts — 87 px statt 44 px, also ein Klotz, der dem Board Platz
   nahm, ohne mehr zu sagen (Sichtprobe 2026-09-14 bei 880 px). */
@media (max-width: 900px) {
    .board-zweispalt[b-ckyj7h29nj] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.board-header-actions[b-ckyj7h29nj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.board-header-actions a[b-ckyj7h29nj] {
    font-size: 13px;
    font-weight: 600;
}

.board-error[b-ckyj7h29nj] {
    color: var(--red);
}

/* f18 US4 (T011, FR-004; contracts/design-system.md Layout-Konstanten):
   6-Spalten-Raster nach Mockup mit Mindestbreite je Lane und horizontalem
   Überlauf bei schmalen Fenstern; die Lanes füllen die volle Breite.

   077 T030: Die Spaltenzahl folgt den SICHTBAREN Lanes statt fest auf sechs
   zu stehen — bei einem Statusfilter blieben sonst leere Spuren stehen, und
   das Board sähe aus, als FEHLTEN Spalten, statt dass sie ausgeblendet sind.
   Die Zahl kommt als `--board-spalten` von der Seite; fehlt sie, gilt weiter
   die volle Zahl (167 B1 die Sieben, seit 171 B4 die Sechs — „Blockiert“ ist keine Spalte mehr) —
   das Bestandsverhalten ist also auch ohne die Variable intakt.

   BEFUND der Sichtprobe 2026-09-14, ehrlich notiert, weil die falsche
   Erklärung teurer wäre als der Fehler: Das Board erschien kurzzeitig als
   EINE gestapelte Spalte. Die naheliegende Erklärung („`auto-fit` braucht
   eine bestimmte Breite, und `.board-lanes` scrollt waagerecht") war FALSCH.
   Die Ursache war ein Kommentarfehler genau hier — der Block darüber war
   bereits geschlossen, der neue Text stand als Müll im Stylesheet, und der
   Parser verwarf die ganze `.board-lanes`-Regel. Ohne Regel stapelt ein
   `div` seine Kinder, fertig.

   Die Lehre ist nicht „auto-fit meiden", sondern: Verschwindet eine ganze
   Regel, ist die Regel selbst verdächtig, nicht ihr cleverster Wert. Und
   ein Bausteintest sieht davon nichts — er prüft das DOM, nicht das
   Stylesheet. */
.board-lanes[b-ckyj7h29nj] {
    display: grid;
    grid-template-columns: repeat(var(--board-spalten, 6), minmax(210px, var(--board-spur-max, 1fr)));
    gap: 0.75rem;
    margin-top: 1rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 20px;

    /* Gefilterte Spalten stehen linksbündig beieinander statt auseinander-
       gezogen — sonst wäre die Obergrenze nur eine andere Art, den Blick
       über den Schirm zu schicken. */
    justify-content: start;
}
/* /Components/Pages/ChatRunTranscriptPage.razor.rz.scp.css */
/* 149 T037 Nacharbeit (Befund Transkript-Layout): das Chat-Transkript teilt die
   CSS-Scope-Kennung „b-transcript“ mit RunTranscriptPage (AppFactory.Web.csproj,
   CssScope). Die .transcript*-Regeln stehen EINMAL in
   RunTranscriptPage.razor.css und gelten damit hier gleich — diese Datei
   trägt bewusst keine eigenen Regeln (eine zweite Fassung liefe auseinander). */
/* /Components/Pages/ChatsPage.razor.rz.scp.css */
/* f33 T009 (Mechanik, US1) + T028 (Design, US8, specs/030): das Chat-Fenster.

   Mechanik (T009, unangetastet): der Verlauf ist der EINZIGE scrollende
   Bereich (Anker-Politik f30/f31), die Eingabe steht darunter fest.

   Gestaltung (T028, Vorgabe D2 bindend): ruhige Messenger-Anmutung im
   dunklen Leitdesign — Gesprächsliste links, Fenster rechts, Sprechblasen
   im Verlauf (Blasen-Optik: ChatContributionView.razor.css). Ausschließlich
   Bestands-Tokens aus app.css (beide Themes); alle Anker aus research.md
   R29 bleiben unverändert — hier stehen nur Regeln DARAUF.

   f37 T011 (Design-Zug, specs/034): die Anlage-Flächen in derselben
   Sprache — Seitenkopf mit der Akzent-Aktion, Leerzustand als wartende
   Sprechblase, Listen-Einträge mit Meta-Zeile (Bereich links, Zeit
   rechts). Die Mechanik-Anker (#chats-new-chat, .chats-empty/-action,
   .chat-list-time) bleiben unverändert (149 T037: .chats-empty-text
   entfällt, der Text steht in .af-leer-text des LeerZustands). */

/* Die Seite als Zwei-Spalten-Raster: Liste links (schmal, eigene Rolle),
   Fenster rechts füllend. Die Höhe ist bewusst gedeckelt, damit der
   VERLAUF scrollt und nicht die Seite — sonst griffe die Anker-Politik
   ins Leere. 82px = .page-Innenabstand oben (22px) + unten (60px) aus
   var(--page-padding). */
.chats-page[b-l8zlj0gwzd] {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px 16px;
    /* 072 (Gerüst-Drehung): der Kopf hat zwei Stöcke — --kopf-höhe statt
       nur der Höhe von Stock 1, sonst ragt der Verlauf unten heraus. */
    height: calc(100vh - var(--kopf-höhe) - 82px);
    min-height: 20rem;
}

/* T011 (Design-Zug): der Seitenkopf als volle Breite — Titel links, die
   Anlage-Aktion rechts. 149 T037: der Kopf ist der MaskenKopf
   (.af-page-head, Titel und Untertitel aus app.css), „Neuer Chat“ die
   Primäraktion aus der Knopf-Familie (.af-btn-primary); die Seite setzt nur
   die Lage im Raster — der Abstand kommt aus dem gap. */
.chats-page[b-l8zlj0gwzd]  .chats-page-header {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

/* Lade-/Leer-/Fehlerzustand der Seite (149 T037: LadeZustand, LeerZustand,
   FehlerKasten): volle Breite, oben — kein leeres Zwei-Spalten-Gerüst um
   einen einzelnen Satz. */
.chats-page[b-l8zlj0gwzd]  .chats-fehler,
.chats-page[b-l8zlj0gwzd]  .chats-lädt,
.chats-page[b-l8zlj0gwzd]  .chats-empty {
    grid-column: 1 / -1;
    align-self: start;
}

/* T011 (Design-Zug, Vertrag §4): der Leerzustand ist eine wartende
   Sprechblase — die gestrichelte Kontur kommt aus dem LeerZustand
   (.af-leer), die Blasenform (Radius 14, die abgeflachte Ecke unten links
   wie bei der Persona-Seite) ist die f33-Formsprache: noch kein Gespräch da,
   die Form ist schon da. Die Aktion steht mitten im Angebot. */
.chats-page[b-l8zlj0gwzd]  .chats-empty {
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

.chats-page[b-l8zlj0gwzd]  .chats-empty .af-leer-text {
    max-width: 46ch;
    line-height: 1.55;
}

/* ===== Gesprächsliste ===== */

/* 172 T014: .chat-list bleibt Grid-Zelle und Scroll-Behälter; die Zeilen
   stehen je Altersgruppe in ul.chat-list-gruppe (Kopf-Gestalt: app.css,
   Familie af-ag). --af-ag-rand gleicht den Kopf an das Padding an (B3),
   sonst entsteht ein waagrechter Scrollbalken. */
.chat-list[b-l8zlj0gwzd] {
    --af-ag-rand: 6px;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.chat-list[b-l8zlj0gwzd]  .chat-list-gruppe {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Der Listeneintrag ist ein Button, sieht aber nach Eintrag aus: flächig,
   ohne Rahmen; der offene Chat trägt eine Akzentkante links — dieselbe
   Geste wie die Toast-Kante (app.css), nur stehend.
   T011 (Design-Zug): die Anatomie der Messenger-Liste — oben der Titel,
   darunter EINE Meta-Zeile: Geltungsbereich links, Aktivitätszeit rechts.
   Die Zeit bildet so eine rechte Spalte, die das Auge vertikal abfährt —
   zwei frische „Neuer Chat"-Einträge sind auf den Blick unterscheidbar
   (Vertrag §5-G5). */
.chat-list-open[b-l8zlj0gwzd] {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    row-gap: 3px;
    padding: 9px 11px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    text-align: left;
    box-shadow: inset 2px 0 0 transparent;
    transition: background .12s, box-shadow .12s;
}

.chat-list-open:hover[b-l8zlj0gwzd] {
    background: var(--bg-3);
    filter: none;
}

.chat-list-item.is-open .chat-list-open[b-l8zlj0gwzd] {
    background: var(--bg-3);
    box-shadow: inset 2px 0 0 var(--accent);
}

.chat-list-title[b-l8zlj0gwzd] {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-list-scope[b-l8zlj0gwzd] {
    grid-column: 1;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-2);
}

/* Die Aktivitätszeit: rechts, drittstufig, Zifferntabellen — so stehen
   zwei Einträge derselben Sekunde nicht nur im Wert, sondern auch im
   Schriftbild unterscheidbar da. Format und datetime-Attribut sind
   Mechanik (T006) und bleiben unangetastet. */
.chat-list-time[b-l8zlj0gwzd] {
    grid-column: 2;
    justify-self: end;
    font-size: 10.5px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ===== Chat-Fenster ===== */

.chat-window[b-l8zlj0gwzd] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.chat-window[b-l8zlj0gwzd]  .chat-verlauf-fehler {
    margin: 16px;
}

.chat-timeline[b-l8zlj0gwzd] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 16px 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 141 T009 (Vertrag chat-verlauf-pill §2.5): die Signal-Pill — die animierte
   Pill am Verlaufsende, solange gewartet wird und noch keine Work-Pill des
   aktiven Laufs steht. Pill-Gestalt wie die Arbeits-Pill (gestrichelte
   Kontur, kleine Form); das ruhige Atmen läuft nur, wenn Bewegung erwünscht
   ist — ohne Bewegungswunsch steht die Aussage als Text allein (§3: die
   Animation ist Dekoration). */
.chat-signal[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0 18px 10px;
    padding: 5px 12px;
    border: 1px dashed rgba(108, 140, 255, .35);
    border-radius: 999px;
    background: var(--bg-2);
    font-size: 12px;
    font-style: italic;
    color: var(--text-3);
}

@media (prefers-reduced-motion: no-preference) {
    .chat-signal[b-l8zlj0gwzd] {
        animation: chat-signal-atmen-b-l8zlj0gwzd 1.8s ease-in-out infinite;
    }

    @keyframes chat-signal-atmen-b-l8zlj0gwzd {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .55;
        }
    }
}

/* ===== Eingabe (unten, feststehend) ===== */

.chat-composer[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-3);
}

/* Abnahme 141 Anmerkung C (2026-09-21): „+" und „Senden" sind ZWILLINGE —
   dieselbe Höhe, dieselbe Endkante (beide unten bündig mit der Textbox, die
   die Restbreite füllt). Die Parität lebt in EINER Regel für beide Klassen;
   der Test sichert Struktur/Klassen, keine Pixel. */
.chat-composer :is(.chat-file-attach, .chat-send)[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    height: 44px;
    align-self: flex-end;
    justify-content: center;
    /* 141 fix C-Rest (2026-09-21, Browser-Messung): die globale label-Regel
       (app.css:165, margin-bottom: .25rem) traf den „+"-Knopf als Label und
       hob seine Endkante um 4 px über die des Senden-Knopfs. Die Endkante
       der Zwillinge gehört HIER in die Paritäts-Regel — für beide. */
    margin-bottom: 0;
}

.chat-input[b-l8zlj0gwzd] {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    background: var(--bg-2);
}

.chat-send[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Ehrliche Absage: auf der Composer-Fläche, in Signalrot — nah an der
   Handlung, die scheiterte. */
.chat-send-error[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px 10px;
    background: var(--bg-3);
    color: var(--red);
    font-size: 12.5px;
}

/* ===== f62 T017 (US4): Datei-Auswahl + Beilagen an der Eingabe — die
   Auswahl steht Ehrlich da (Name + Größe, einzeln entfernbar); die
   Grenz-Meldungen kommen als Toast, nicht hier. ===== */

/* Die Beilagen-Zeile über dem Composer: eine Zeile je Datei, ehrlich. */
.chat-attachments[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 14px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-attachment[b-l8zlj0gwzd] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
}

.chat-attachment-name[b-l8zlj0gwzd] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
}

.chat-attachment-size[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--text-3);
}

.chat-attachment-remove[b-l8zlj0gwzd] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 8px;
    font-size: 11px;
}

/* 087 (nummern-mapping Sonderfälle) + Abnahme 141 Anmerkung B (2026-09-21):
   die Datei-Auswahl ist der schlichte „+"-Knopf — der Platz gehört der
   Textbox. Das echte Eingabefeld liegt deckungsgleich UNsichtbar darüber:
   Klick, Tastatur und Ziehen treffen es; die Benennung trägt sein
   aria-label („Dateien beilegen"), das „+" ist dekorativ. Kein display:none
   — es würde Tastatur und Ziehen nehmen. Höhe/Ausrichtung: Paritäts-Regel
   oben (Zwilling des Senden-Knopfs). */
.chat-file-attach[b-l8zlj0gwzd] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 44px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background-color: var(--bg-4);
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
}

.chat-file-attach:hover[b-l8zlj0gwzd] {
    filter: brightness(1.15);
}

.chat-file-attach:focus-within[b-l8zlj0gwzd] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.chat-file-attach.is-disabled[b-l8zlj0gwzd] {
    opacity: .5;
    cursor: not-allowed;
}

/* Das „+": dekoratives Zeichen, die Benennung lebt im aria-label. */
.chat-file-attach-plus[b-l8zlj0gwzd] {
    font-size: 21px;
    line-height: 1;
    font-weight: 500;
}

/* Das echte Eingabefeld: deckungsgleich, unsichtbar, WIRKSAM.
   Abnahme 141 fix B (2026-09-21): InputFile ist eine Kind-Komponente —
   ihr gerendertes <input> trägt das Scoped-Attribut NICHT (nur das
   Label). Der schlichte Selektor kompilierte ins Leere und ließ das
   native Feld sichtbar (~287×39 px). ::deep verlagert das Attribut
   auf den Vorfahren .chat-file-attach und trifft das echte Element. */
.chat-file-attach[b-l8zlj0gwzd]  .chat-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ===== Schmale Fenster (Grenze wie MainLayout, 900px) ===== */

@media (max-width: 900px) {
    .chats-page[b-l8zlj0gwzd] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .chats-page[b-l8zlj0gwzd]  .chats-page-header,
    .chats-page[b-l8zlj0gwzd]  .chats-fehler,
    .chats-page[b-l8zlj0gwzd]  .chats-lädt,
    .chats-page[b-l8zlj0gwzd]  .chats-empty,
    .chat-list[b-l8zlj0gwzd],
    .chat-window[b-l8zlj0gwzd] {
        grid-column: 1;
    }

    .chat-list[b-l8zlj0gwzd] {
        grid-row: 2;
        max-height: 9.5rem;
    }

    .chat-window[b-l8zlj0gwzd] {
        grid-row: 3;
    }
}
/* /Components/Pages/CreateProjectPage.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Schritt-Zustände in Signal-Farben auf dunkler Fläche. */

.create-project-page[b-hndfwsmywb] {
    max-width: 40rem;
    margin: 0 auto;
}

/* 149 T034 (contracts §1.1 Batch 12): Seitenkopf (MaskenKopf), Formular-Fuß
   (FormularFuß), Validierung unter dem Feld (af-form-fehler) und Fehler
   (FehlerKasten) kommen aus der Werkbank-Familie in app.css. */

.create-project-form[b-hndfwsmywb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
}

.create-project-field[b-hndfwsmywb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.create-project-field label[b-hndfwsmywb] {
    font-weight: 700;
    font-size: 12px;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.create-project-field input[b-hndfwsmywb] {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    color: var(--text);
}

.create-project-hint[b-hndfwsmywb] {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}

/* Der Formular-Fuß schließt die Karte ab: bündig mit den Feldern (die Karte
   trägt den Innenabstand), die Trennlinie aus af-formular-fuß. */
.create-project-form[b-hndfwsmywb]  .af-formular-fuß {
    margin-top: 4px;
    padding: 14px 0 0;
}

.create-project-actions[b-hndfwsmywb] {
    display: flex;
    gap: 0.75rem;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.create-project-steps[b-hndfwsmywb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
}

.create-project-step[b-hndfwsmywb] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 13px;
}

.create-project-step-failed[b-hndfwsmywb] {
    border-color: rgba(255, 92, 92, .45);
    background: rgba(255, 92, 92, .07);
}

.create-project-step-succeeded[b-hndfwsmywb] {
    border-color: rgba(63, 206, 139, .45);
    background: rgba(63, 206, 139, .07);
}

.create-project-step-running[b-hndfwsmywb] {
    border-color: rgba(108, 140, 255, .45);
    background: rgba(108, 140, 255, .07);
}

.create-project-step-status[b-hndfwsmywb] {
    color: var(--text-2);
}
/* /Components/Pages/GlobalDashboardPage.razor.rz.scp.css */
/* f18 US5 (T024, F01 C1): globales Dashboard im dunklen Mockup-4-Look —
   Kernzahlen als stat-Kacheln (mockup .stat-card: große Werte, uppercase
   Labels, dezente Akzentwerte), Projektliste als dunkle Tabelle. Inhalte
   und Spalten bleiben unverändert (f13/f16, FR-009). */

h1[b-c4glxnh9ua] {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 20px;
}

.global-dashboard[b-c4glxnh9ua] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.global-dashboard h1[b-c4glxnh9ua] {
    margin: 0;
}

.dashboard-header[b-c4glxnh9ua] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.global-dashboard-hint[b-c4glxnh9ua] {
    color: var(--text-2);
    font-size: 13px;
}

.dashboard-figures[b-c4glxnh9ua] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 13px;
}

.dashboard-figure[b-c4glxnh9ua] {
    display: flex;
    flex-direction: column;
    min-width: 8rem;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    /* 062 T023 (US5, FR-003, plan E6): dieselbe Zentrierungsregel wie die
       Kacheln der Projekt-Übersicht — alle Figuren-Texte horizontal
       zentriert. Der Tabellenkopf der Projektliste (th, text-align:left)
       bleibt unberührt. */
    text-align: center;
    transition: transform .15s, border-color .15s;
}

/* 125 T018/T019 (Vertrag kachel-ziele §2, datiert 2026-09-19): die
   Figuren sind Links (`<a href>` statt `<div>` — ohne JS nutzbar,
   RouteNav-prüfbar). Die Form bleibt DIESELBE; nur die Link-Typografie
   (Farbe, Unterstreichung) tritt hinter die Kachel-Form zurück. Der
   Hover hebt die Kachel (bestehende Regel oben) UND zeigt den
   Fingernagel-Anker. */
a.dashboard-figure[b-c4glxnh9ua] {
    color: inherit;
    text-decoration: none;
}

a.dashboard-figure:hover[b-c4glxnh9ua],
a.dashboard-figure:focus-visible[b-c4glxnh9ua] {
    text-decoration: none;
    border-color: var(--accent);
}

.dashboard-figure:hover[b-c4glxnh9ua] {
    transform: translateY(-2px);
    border-color: var(--border-light);
}

.dashboard-figure-label[b-c4glxnh9ua] {
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.dashboard-figure-value[b-c4glxnh9ua] {
    font-size: 27px;
    font-weight: 800;
    margin-top: 5px;
    line-height: 1.1;
    color: var(--text);
}

/* 125 T018 (2026-09-19) — ABRISS: Die Regel `.dashboard-figure-detail`
   entfiel mit der Server-Kachel — sie war deren Unterzeile („kein Server
   im Betrieb" / Server-Name). Kein Markup dieser Seite erzeugt die Klasse
   mehr (FR-004, ersatzlos); die Betriebslage lebt in den Läufen
   (175 B7: in der Läufe-Maske aufgegangen). */

.dashboard-group h3[b-c4glxnh9ua] {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.dashboard-error[b-c4glxnh9ua] {
    color: var(--red);
}

.dashboard-duration[b-c4glxnh9ua] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

.dashboard-duration-value[b-c4glxnh9ua] {
    color: var(--text);
    font-weight: 700;
}

/* 125 T019 (Vertrag kachel-ziele §2): die Ø-Zahl ist die elfte klickbare
   Zahl — derselbe Link-Charakter, dieselbe Zurücknahme der Link-Typo. */
a.dashboard-duration-link[b-c4glxnh9ua] {
    color: inherit;
    text-decoration: none;
}

a.dashboard-duration-link:hover[b-c4glxnh9ua],
a.dashboard-duration-link:focus-visible[b-c4glxnh9ua] {
    text-decoration: underline;
}

/* 073 T023 (FR-015/SC-011, research.md R4) — ABRISS, datiert 2026-09-14.
   Entfallen sind hier die Stile der Organisationen-Liste
   (.global-dashboard-project-search, .global-dashboard-projects-grid samt
   ::deep-Regeln, .dashboard-open-link). Sie sind mit der Liste auf
   OrganizationsOverviewPage.razor.css umgezogen; Kernzahlen, Aufgaben-/
   Abschluss-Blöcke, Ø-Dauer und der f23-Host-Block bleiben unberührt.

   An ihre Stelle tritt EIN Verweis. Er ist als ganze Fläche anfassbar
   statt als Wort im Fließtext — wer hier die Liste gesucht hat, soll sie
   nicht erst suchen müssen. Der Pfeil rückt beim Zeigen ein Stück vor:
   eine einzige Bewegung, und sie sagt „es geht weiter". */

.dashboard-organizations-link[b-c4glxnh9ua] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}

.dashboard-organizations-link:hover[b-c4glxnh9ua],
.dashboard-organizations-link:focus-visible[b-c4glxnh9ua] {
    border-color: var(--accent);
    background: var(--bg-3);
    text-decoration: none;
    color: var(--text);
}

.dashboard-organizations-text[b-c4glxnh9ua] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dashboard-organizations-title[b-c4glxnh9ua] {
    font-size: 13.5px;
    font-weight: 700;
}

.dashboard-organizations-hint[b-c4glxnh9ua] {
    color: var(--text-3);
    font-size: 12px;
}

.dashboard-organizations-pfeil[b-c4glxnh9ua] {
    flex: none;
    color: var(--accent);
    font-size: 17px;
    line-height: 1;
    transition: transform .2s ease;
}

.dashboard-organizations-link:hover .dashboard-organizations-pfeil[b-c4glxnh9ua],
.dashboard-organizations-link:focus-visible .dashboard-organizations-pfeil[b-c4glxnh9ua] {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-organizations-pfeil[b-c4glxnh9ua] {
        transition: none;
    }

    .dashboard-organizations-link:hover .dashboard-organizations-pfeil[b-c4glxnh9ua],
    .dashboard-organizations-link:focus-visible .dashboard-organizations-pfeil[b-c4glxnh9ua] {
        transform: none;
    }
}

/* f23 (T024, R5/R11): additive Host-Status-Übersicht — eigene Klassen
   (host-status*), KEINE dashboard-tile*-Klassen, außerhalb der Projekt-
   Tabelle (A9-Bindung: Zähl-/Layout-Annahmen des Bestands bleiben exakt). */

.host-status-overview[b-c4glxnh9ua] {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.host-status-overview h3[b-c4glxnh9ua] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--text-2);
}

.host-status-list[b-c4glxnh9ua] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.host-status-item[b-c4glxnh9ua] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.host-status-item a[b-c4glxnh9ua] {
    color: var(--accent-2);
    text-decoration: none;
}

.host-status-item a:hover[b-c4glxnh9ua] {
    text-decoration: underline;
}

.host-status-state[b-c4glxnh9ua] {
    font-weight: 600;
}

.host-status-item[data-host-status="reachable"] .host-status-state[b-c4glxnh9ua] {
    color: var(--green);
}

.host-status-item[data-host-status="unreachable"] .host-status-state[b-c4glxnh9ua] {
    color: var(--red);
}

.host-status-item[data-host-status="no-data"] .host-status-state[b-c4glxnh9ua] {
    color: var(--text-3);
}

.host-status-last[b-c4glxnh9ua] {
    color: var(--text-3);
    font-size: 0.8125rem;
}
/* /Components/Pages/GraphPage.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep
   (Graph-Canvas/Knoten folgt in DependencyGraph.razor.css).
   f30 US5 (T023): der Ansichts-Umschalter wird als ruhiges Bedien-
   element in die Kopfreihe eingepasst — gleiche Formsprache wie die
   Bestands-Kontrollkämpfen (13px, Text-Ebene 2, Akzent im Kästchen);
   Titel links, Umschalter + Rücksprung als Gruppe rechts. */

/* 149 Batch 13b (T037): der Kopf ist der MaskenKopf (.af-page-head aus
   app.css: Titel links, Aktionen rechts, Abstand darunter) — die eigenen
   Regeln für h1 und .graph-page-header sind mit ihm entfallen. Umschalter
   und Rückweg stehen im Aktionen-Slot; der Umschalter behält seine Form. */

.graph-page-show-done[b-mwqoilafax] {
    display: inline-flex;
    margin: 0;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-2);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.graph-page-show-done input[b-mwqoilafax] {
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* 167 B10 (T054): die Legende der zwei Formsprachen — eine leise Zeile über
   der Fläche, die Muster als Miniatur der echten Zeichnung. */
.graph-page-legende[b-mwqoilafax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    color: var(--text-3);
    font-size: 12px;
}

.graph-page-legende-rahmen[b-mwqoilafax] {
    display: inline-block;
    width: 22px;
    height: 13px;
    border: 1.25px dashed rgba(108, 140, 255, .65);
    border-radius: 4px;
    background: rgba(108, 140, 255, .06);
}

.graph-page-legende-pfeil[b-mwqoilafax] {
    margin-left: 10px;
    color: var(--text-2);
    font-weight: 700;
}
/* /Components/Pages/IntakeSortTranscriptPage.razor.rz.scp.css */
/* 149 T037 Nacharbeit (Befund Transkript-Layout): das Einsortier-Transkript teilt die
   CSS-Scope-Kennung „b-transcript“ mit RunTranscriptPage (AppFactory.Web.csproj,
   CssScope). Die .transcript*-Regeln stehen EINMAL in
   RunTranscriptPage.razor.css und gelten damit hier gleich.

   156 T020 (2026-09-29, plan E1/E2, FR-005): der Körper ist der einspaltige
   TranscriptVerlauf — die tl-Formen trägt der Komponenten-Scope
   (TranscriptVerlauf.razor.css); die Seite setzt nur den Höhen-Kontext,
   derselbe wie die Detail-Spalte der Werkbank-Flächen. Eine Regel für DIESE
   Seite allein — deshalb hier und nicht in RunTranscriptPage.razor.css. */

.transcript-einsortieren-verlauf[b-transcript] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.transcript-einsortieren-verlauf[b-transcript]  .tl-verlauf {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Pages/LoginPage.razor.rz.scp.css */
/* f18 US5 (T023): Anmeldung als zentrierte Karte im Mockup-4-Design —
   Flächenstufen, Akzentknopf, Radius/Shadow nach dem Token-Fundament
   (contracts/design-system.md); Farbwerte ausschließlich var(--…). */

.login-page[b-fn7szb49ld] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 24rem;
}

.login-brand[b-fn7szb49ld] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.login-brand:hover[b-fn7szb49ld] {
    text-decoration: none;
}

.login-brand-icon[b-fn7szb49ld] {
    font-size: 26px;
}

.login-brand-name[b-fn7szb49ld] {
    color: var(--text);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: .2px;
}

.login-form[b-fn7szb49ld] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 26px 26px 24px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* 149 T034: Kopf (MaskenKopf) und Fehler (FehlerKasten) aus der
   Werkbank-Familie; in der Karte trägt der gap den Abstand. */
.login-form[b-fn7szb49ld]  .af-page-head {
    margin-bottom: 0;
}

.login-field[b-fn7szb49ld] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-field label[b-fn7szb49ld] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.login-field input[b-fn7szb49ld] {
    width: 100%;
}

.login-submit[b-fn7szb49ld] {
    justify-content: center;
}
/* /Components/Pages/OrganizationsOverviewPage.razor.rz.scp.css */
/* 073 T014/T018 — Seite „Organisationen".

   Gestaltungs-Gedanke: Das hier ist ein Leitstand, keine Broschüre. Eine
   Organisation hat dreizehn Angaben, die man nebeneinander sehen will —
   also wird die Dichte nicht versteckt, sondern beherrschbar gemacht. Drei
   Mittel, mehr nicht:

   1. Ein Streifen links an jeder Zeile trägt den Zustand des Aufgaben-
      Dispatchers — grün heißt verteilt, gelb heißt pausiert. Er klebt mit
      dem Namen an der linken Kante, auch wenn die Tabelle seitlich gerollt
      wird: die Lage bleibt sichtbar, selbst wenn die Zustands-Spalte schon
      aus dem Bild ist.
   2. Alle Zahlen stehen in der Monoschrift und rechtsbündig. Dadurch
      stehen die Ziffern über die Zeilen hinweg untereinander und sind
      vergleichbar, ohne dass man sie einzeln lesen muss.
   3. Farbe nur mit Anlass: laufende Agenten über 0 und blockierte Aufgaben
      über 0. Alles andere bleibt leise. Eine 0 ist eine ruhige Auskunft,
      kein Alarm.

   Die Seite lebt vollständig auf den Haus-Variablen (--bg-*, --text-*,
   --green/--yellow/--red-text) und trägt damit hell wie dunkel dieselbe
   Aussage. Kein CDN, keine Fremdschrift. */

.orga-seite[b-wfz3nsrxok] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Kopf ===== */

/* 149 T034 (contracts §1.1 Batch 12): Titel, Untertitel und Aktionen-Slot
   kommen aus dem MaskenKopf (app.css). In der Spalte trägt der gap der Seite
   den Abstand (Kopf 4 + 16 = 20 px wie in den Masken). */
.orga-seite[b-wfz3nsrxok]  .af-page-head {
    margin-bottom: 4px;
}

/* 073 T020 (US3) — die Lage von oben.

   Die Bilanz ist kein Kennwert-Kachel-Block, sondern EIN Satz neben dem
   Titel: „2 von 3 Organisationen pausiert". Sie nimmt die Formensprache
   der Zustandsmarke aus den Zeilen auf (Pille, Punkt, dieselben Farben) —
   damit ist auf den ersten Blick klar, dass Kopf und Liste über dieselbe
   Sache reden. Die Zahl trägt die Monoschrift der Tabelle, damit sie beim
   Aktualisieren nicht in der Breite springt. */
.orga-kopf-bilanz[b-wfz3nsrxok] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 13px 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-2);
    font-size: 12px;
    white-space: nowrap;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.orga-kopf-bilanz-punkt[b-wfz3nsrxok] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 999px;
    background: currentColor;
    opacity: .55;
}

.orga-kopf-bilanz-zahl[b-wfz3nsrxok] {
    font-family: var(--mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Ruht alles, bleibt die Bilanz leise: sie soll nicht dauerhaft nach
   Zustand aussehen, wenn keiner gemeldet wird. */
.orga-kopf-bilanz-ruhig .orga-kopf-bilanz-punkt[b-wfz3nsrxok] {
    background: var(--green);
    opacity: .8;
}

/* Steht irgendwo die Verteilung still, trägt der Kopf exakt das Gelb der
   Zeilenmarke — eine Farbe, eine Bedeutung. */
.orga-kopf-bilanz-pausiert[b-wfz3nsrxok] {
    border-color: rgba(255, 176, 32, .4);
    background: rgba(255, 176, 32, .13);
    color: var(--yellow-text);
}

.orga-kopf-bilanz-pausiert .orga-kopf-bilanz-zahl[b-wfz3nsrxok] {
    color: var(--yellow-text);
}

.orga-kopf-bilanz-pausiert .orga-kopf-bilanz-punkt[b-wfz3nsrxok] {
    opacity: 1;
}

/* ===== Bedienleiste: Suche + Fensterwahl ===== */

/* 149 T034: Suche und Zählung aus der Werkbank-Familie (af-tabellen-leiste,
   MaskenSuche, ListenFuß), die Fensterwahl als Segment-Schalter (af-segmente)
   — sie rückt nach rechts. Leer-, Lade- und Fehlerzustand sind die
   Bausteine (LeerZustand, LadeZustand, FehlerKasten). */
.orga-fenster[b-wfz3nsrxok] {
    margin-left: auto;
}

/* ===== Tabelle ===== */

/* Dreizehn Spalten passen auf keinen schmalen Bildschirm — statt sie zu
   quetschen, bekommt die Tabelle ihren eigenen Rollbereich. */
.orga-tabelle-hülle[b-wfz3nsrxok] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.orga-tabelle-hülle[b-wfz3nsrxok]  .orga-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.orga-tabelle-hülle[b-wfz3nsrxok]  th {
    padding: 10px 12px;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.orga-tabelle-hülle[b-wfz3nsrxok]  td {
    padding: 9px 12px;
    color: var(--text);
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

/* Sichtprobe 2026-09-14: Zahlenspalten standen rechtsbündig unter einem
   linksbündigen Kopf — Kopf und Wert zeigten nicht aufeinander. Der Kopf
   zieht mit (QuickGrid `Class` sitzt auf th UND td). */
.orga-tabelle-hülle[b-wfz3nsrxok]  th.orga-spalte-zahl {
    text-align: right;
}

.orga-tabelle-hülle[b-wfz3nsrxok]  tr:last-child td {
    border-bottom: none;
}

.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:hover td {
    background: var(--bg-3);
}

/* Die Namensspalte bleibt beim seitlichen Rollen stehen — ohne sie wäre
   eine Zahl weit rechts nicht mehr zuzuordnen. */
.orga-tabelle-hülle[b-wfz3nsrxok]  th:first-child,
.orga-tabelle-hülle[b-wfz3nsrxok]  td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-2);
    border-left: 3px solid transparent;
    box-shadow: 7px 0 9px -7px rgba(0, 0, 0, .55);
}

.orga-tabelle-hülle[b-wfz3nsrxok]  th:first-child {
    z-index: 2;
    background: var(--bg-3);
}

/* 174 T021 (sortierkopf-baustein §5 Nachtrag B2): der klebende Schatten
   überdeckt die Akzent-Unterkante der sortierten Spalte — hier beide
   verbinden. */
.orga-tabelle-hülle[b-wfz3nsrxok]  th:first-child[aria-sort="ascending"],
.orga-tabelle-hülle[b-wfz3nsrxok]  th:first-child[aria-sort="descending"] {
    box-shadow: inset 0 -2px 0 var(--accent), 7px 0 9px -7px rgba(0, 0, 0, .55);
}

.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:hover td:first-child {
    background: var(--bg-3);
}

/* Sichtprobe 2026-09-14: Bei dreizehn Spalten war die abgeschnittene rechte
   Kante das Problem — man sah nicht, dass dort noch etwas steht, und der Weg
   in die Organisation war weggerollt. Also klebt die Aktions-Spalte am
   rechten Rand fest, so wie der Name am linken. Der Nebeneffekt ist der
   eigentliche Gewinn: zwischen den beiden festen Kanten sieht man am
   abgeschnittenen Inhalt sofort, dass es seitlich weitergeht. */
/* Sichtprobe 2026-09-14 (Stapel D, T019–T023) — NACHSCHÄRFUNG der obigen
   Entscheidung, nicht ihre Rücknahme: Am echten Bestand (13 Organisationen)
   schneidet die feste Aktions-Spalte die Ausgabe-Zahlen mitten im Betrag ab.
   Stehen bleibt dann „393." direkt neben „1.115.821" — und eine
   abgeschnittene Zahl liest sich wie eine ganze, falsche Zahl. Das ist der
   eine Fall, in dem „man sieht ja, dass es weitergeht" nicht trägt.

   Also bekommen beide festen Kanten einen Schatten nach innen. Er kostet
   nichts und sagt das Entscheidende: Hier liegt etwas DRÜBER, der Wert
   darunter ist nicht zu Ende gelesen. */
.orga-tabelle-hülle[b-wfz3nsrxok]  th:last-child,
.orga-tabelle-hülle[b-wfz3nsrxok]  td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--bg-2);
    border-left: 1px solid var(--border);
    box-shadow: -7px 0 9px -7px rgba(0, 0, 0, .55);
}

.orga-tabelle-hülle[b-wfz3nsrxok]  th:last-child {
    z-index: 2;
    background: var(--bg-3);
}

.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:hover td:last-child {
    background: var(--bg-3);
}

/* Der Zustands-Streifen: die einzige Farbe, die immer da ist. */
.orga-tabelle-hülle[b-wfz3nsrxok]  tr.orga-zeile-verteilt td:first-child {
    border-left-color: var(--green);
}

.orga-tabelle-hülle[b-wfz3nsrxok]  tr.orga-zeile-pausiert td:first-child {
    border-left-color: var(--yellow);
}

/* Beim Laden laufen die Zeilen kurz nacheinander ein — das gibt der
   dichten Liste eine Lesereihenfolge, statt dreizehn Spalten auf einmal
   hinzustellen. */
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr {
    animation: orga-zeile-ein-b-wfz3nsrxok .28s ease-out both;
}

.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(1) { animation-delay: .02s; }
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(2) { animation-delay: .05s; }
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(3) { animation-delay: .08s; }
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(4) { animation-delay: .11s; }
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(5) { animation-delay: .14s; }
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(6) { animation-delay: .17s; }
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(7) { animation-delay: .20s; }
.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:nth-child(n+8) { animation-delay: .22s; }

@keyframes orga-zeile-ein-b-wfz3nsrxok {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Zellen ===== */

.orga-name[b-wfz3nsrxok] {
    font-weight: 600;
    color: var(--text);
}

/* Zustand des Aufgaben-Dispatchers: Pille, Zeitpunkt, Umschalter — in
   dieser Reihenfolge, weil man erst wissen will WAS ist, dann SEIT WANN,
   und erst dann handeln möchte. */
.orga-dispatcher[b-wfz3nsrxok] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.orga-marke[b-wfz3nsrxok] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(63, 206, 139, .35);
    background: rgba(63, 206, 139, .13);
    color: var(--green);
    font-size: 11.5px;
    font-weight: 700;
}

.orga-dispatcher-pausiert .orga-marke[b-wfz3nsrxok] {
    border-color: rgba(255, 176, 32, .4);
    background: rgba(255, 176, 32, .13);
    color: var(--yellow-text);
}

.orga-marke-punkt[b-wfz3nsrxok] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 999px;
    background: currentColor;
}

/* Der Punkt atmet, solange verteilt wird — eine einzige Bewegung in der
   ganzen Tabelle, und sie sagt etwas. Steht die Verteilung, steht auch
   der Punkt. */
.orga-dispatcher-verteilt .orga-marke-punkt[b-wfz3nsrxok] {
    animation: orga-puls-b-wfz3nsrxok 2.4s ease-in-out infinite;
}

@keyframes orga-puls-b-wfz3nsrxok {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(63, 206, 139, .5);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 0 4px rgba(63, 206, 139, 0);
        opacity: .6;
    }
}

.orga-marke-seit[b-wfz3nsrxok] {
    color: var(--text-3);
    font-size: 11.5px;
}

/* Der Umschalter tritt zurück, bis die Zeile gemeint ist: er ist die
   folgenreichste Handlung der Seite und soll nicht aus Versehen getroffen
   werden. Bei Tastatur-Fokus ist er immer voll da. */
.orga-pause[b-wfz3nsrxok] {
    /* 149 T034: Größe und Grundform aus af-btn af-btn-sm.
       Sichtprobe 2026-09-14: bei .55 war der Knopf im hellen Design schon
       fast unlesbar — zurücktreten heißt leiser werden, nicht verschwinden. */
    opacity: .7;
    transition: opacity .18s ease, border-color .18s ease;
}

.orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr:hover .orga-pause,
.orga-pause:focus-visible[b-wfz3nsrxok] {
    opacity: 1;
}

.orga-pause:hover[b-wfz3nsrxok] {
    opacity: 1;
    border-color: var(--yellow);
    color: var(--yellow-text);
}

.orga-pause:disabled[b-wfz3nsrxok] {
    opacity: .35;
    cursor: progress;
}

.orga-priorität-wahl[b-wfz3nsrxok] {
    padding: 3px 6px;
    font-size: 12px;
}

.orga-priorität-schild[b-wfz3nsrxok] {
    color: var(--text-2);
    font-size: 12px;
}

/* Zahlen: Monoschrift, damit die Spalten optisch ausrichten. */
.orga-zahl[b-wfz3nsrxok] {
    display: block;
    text-align: right;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

/* 175 B7 (navigation-nachtrag §4): die Container-Zahl ist ein Verweis auf
   die Läufe der Organisation — sie trägt die Zahl-Optik der Spalte, nicht
   die Akzent-Optik eines Text-Links (kein Unterstrich im Zahlenraster). */
a.orga-zahl[b-wfz3nsrxok] {
    text-decoration: none;
}

a.orga-zahl:hover[b-wfz3nsrxok],
a.orga-zahl:focus-visible[b-wfz3nsrxok] {
    text-decoration: underline;
}

.orga-zahl-token[b-wfz3nsrxok] {
    color: var(--text);
}

/* Betonung nur mit Anlass. */
.orga-zahl-aktiv[b-wfz3nsrxok] {
    color: var(--green);
    font-weight: 800;
}

.orga-zahl-warn[b-wfz3nsrxok] {
    color: var(--red-text);
    font-weight: 800;
}

.orga-lauf[b-wfz3nsrxok] {
    color: var(--text-2);
    font-size: 12.5px;
}

.orga-lauf-jetzt[b-wfz3nsrxok] {
    color: var(--green);
    font-weight: 700;
}

.orga-lauf-nie[b-wfz3nsrxok] {
    color: var(--text-3);
    font-style: italic;
}

/* Der Weg in die Organisation — der einzige Vollton-Akzent der Tabelle,
   und er steht am Ende der Zeile, wo die Lektüre ohnehin endet. 149 T034:
   Form und Farbe aus af-btn af-btn-sm af-btn-primary; der Verweis bleibt
   ohne Unterstreichung. */
.orga-open[b-wfz3nsrxok] {
    white-space: nowrap;
    text-decoration: none;
}

.orga-open:hover[b-wfz3nsrxok],
.orga-open:focus[b-wfz3nsrxok] {
    color: #fff;
    text-decoration: none;
}

/* ===== Schmales Fenster ===== */

@media (max-width: 720px) {
    .orga-steuerung[b-wfz3nsrxok] {
        flex-direction: column;
        align-items: stretch;
    }

    .orga-fenster[b-wfz3nsrxok] {
        margin-left: 0;
        align-self: flex-start;
        overflow-x: auto;
    }
}

/* Sichtprobe 2026-09-14: Auf schmalen Fenstern fraßen ZWEI feste Kanten die
   ganze Fläche — zwischen Name und Aktion blieb ein Streifen von wenigen
   Pixeln, in dem das Prioritäts-Feld auf „P" zusammenfiel. Die Tabelle sah
   kaputt aus statt gerollt. Zwei Anker lohnen sich erst, wenn dazwischen noch
   etwas zu lesen ist — gemessen ab etwa 1000 px. Darunter bleibt nur der Name
   stehen; die Aktion rollt mit und steht weiterhin am Zeilenende. */
@media (max-width: 1000px) {
    .orga-tabelle-hülle[b-wfz3nsrxok]  th:last-child,
    .orga-tabelle-hülle[b-wfz3nsrxok]  td:last-child {
        position: static;
    }
}

/* Wer Bewegung abgestellt hat, bekommt dieselbe Seite — nur still. */
@media (prefers-reduced-motion: reduce) {
    .orga-tabelle-hülle[b-wfz3nsrxok]  tbody tr,
    .orga-dispatcher-verteilt .orga-marke-punkt[b-wfz3nsrxok] {
        animation: none;
    }
}
/* /Components/Pages/ProjectOverviewPage.razor.rz.scp.css */
/* f18 US5 (T025, F01 C1): Projekt-Dashboard im dunklen Mockup-4-Look —
   KPI-Kacheln in der stat-card-Optik des Mockups (Großwerte, uppercase
   Labels, Hover-Anhebung, Akzentwerte). Das f16-Kachelraster bleibt
   inhaltlich unberührt (gleiche Klassen/Werte, FR-009). */

.project-overview[b-r5pkqoelvz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-overview h1[b-r5pkqoelvz] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

/* 149 Batch 13b: der Ladefehler ist der FehlerKasten (app.css) — die
   eigene Farbregel ist mit dem Absatz entfallen. */

/* 076 T029/T030/T031 — was hier NICHT mehr steht, und warum:

   - `orchestrator-line` samt Zustandszeile, Rückfrage-Hinweis und
     Leserecht-Hinweis: die Zeile ist ENTFALLEN. Sie trug seit der Lagezeile
     (T010) einen zweiten Pause-Schalter für dieselbe Sache; ihre Funktion
     sitzt jetzt oben, ihr Leserecht-Hinweis wortwörtlich mit ihr
     (`BetriebslageHeader.razor.css`).
   - `lifecycle-*`, `deletion-*`, `force-panel`/`force-rest*`: mit der
     Verwaltung an den Fuß UMGEZOGEN (`VerwaltungFooter.razor.css`).
   - `host-status-*`: mit der Hosts-Lesesicht in die rechte Spalte UMGEZOGEN
     (`HostsPanel.razor.css`).
   - `project-overview-priority*`: mit der Priorität in den Fuß UMGEZOGEN
     (150), seit 164 T016 weiter in das Fach Allgemein der Einstellungen
     (`ProjektEinstellungenPage.razor.css`).

   In allen vier Fällen gilt derselbe Grund: Scoped CSS der Seite greift
   nicht in eine Kindkomponente — mitgenommene Flächen müssen ihre Regeln
   mitnehmen. Die `force-archive-*`-Regeln bleiben hier, weil die
   überlebende Spur der Force-Entfernung eine eigene Ansicht DIESER Seite
   ist (068 T013) und nie in den Fuß gewandert ist. */

/* 068 T012 (US1, contracts/force-delete-api.md §5): Force-Panel — der
   ESZ-Weg als ruhiger, ernster Block: dieselbe Kastenform wie der
   Aufräum-Fortschritt (geborener Teil des Lösch-Bereichs), aber mit
   linkem Akzent in der Warnfarbe dieser Seite (gelb wie die Bestätigungs-
   Hinweise — Ernst ohne Panik-Ästhetik, kein Rot, keine Ampel). Die
   Bestätigung folgt dem Bestandsdialog-Muster (Hinweis + Ja/Abbrechen). */
.force-panel[b-r5pkqoelvz] {
    margin-top: 0.75rem;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--yellow);
    border-radius: var(--radius);
}

.force-panel h3[b-r5pkqoelvz] {
    margin: 0 0 0.25rem;
    font-size: 13.5px;
}

.force-panel-note[b-r5pkqoelvz],
.force-panel-hint[b-r5pkqoelvz] {
    margin: 0 0 0.5rem;
    color: var(--text-2);
    font-size: 12.5px;
}

/* Die Reste-Liste wörtlich aus der Preview — lesbar, ruhig, jeder Rest
   eine eigene Zeile (A3: die Bestätigung benennt die Reste). */
.force-rests[b-r5pkqoelvz] {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
    color: var(--text);
    font-size: 12.5px;
}

.force-rest + .force-rest[b-r5pkqoelvz] {
    margin-top: 3px;
}

.force-panel-final[b-r5pkqoelvz] {
    margin: 0 0 0.5rem;
    color: var(--yellow);
    font-size: 12.5px;
}

/* 068 T013 (US1, FR-008/SC-003): die überlebende Spur auf der Direktroute —
   ein ruhiges Dokument, keine Fehlerseite: wer/wann als Meta-Zeile, der
   Verlauf in der Kastenform des Aufräum-Fortschritts, die „bewusst
   zurückgelassen"-Stände mit EINEM Akzent (gelb, sachlich — kein Rot),
   die Force-Marke als kleiner Uppercase-Chip (Vokabular der Kachel-Labels). */
.force-archive[b-r5pkqoelvz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 149 Batch 13b: die Überschrift der Spur ist der MaskenKopf; in der
   Spalte mit Abstand 14 px entfällt sein eigener Abstand nach unten. */
.force-archive[b-r5pkqoelvz]  .force-archive-kopf {
    margin-bottom: 0;
}

.force-archive-note[b-r5pkqoelvz] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    max-width: 62ch;
}

.force-archive-meta[b-r5pkqoelvz] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

.force-archive-meta strong[b-r5pkqoelvz] {
    color: var(--text);
}

.force-archive-progress[b-r5pkqoelvz] {
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.force-archive-progress h2[b-r5pkqoelvz] {
    margin: 0 0 0.5rem;
    font-size: 14px;
}

.force-archive-steps[b-r5pkqoelvz] {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text);
}

.force-archive-step-left .force-archive-step-status[b-r5pkqoelvz] {
    color: var(--yellow);
    font-weight: 600;
}

.force-archive-step-detail[b-r5pkqoelvz] {
    color: var(--text-3);
    font-size: 12.5px;
}

.force-archive-force-mark[b-r5pkqoelvz] {
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.force-archive-exit[b-r5pkqoelvz] {
    margin: 0;
}

.force-archive-exit a[b-r5pkqoelvz] {
    color: var(--accent-2);
    font-size: 13px;
    text-decoration: none;
}

.force-archive-exit a:hover[b-r5pkqoelvz] {
    text-decoration: underline;
}

/* 076 T006 (Foundational), vollendet mit T029/T031 — das Kompositions-
   Gerüst „Betriebslage zuerst".

   Vier Bereiche, vier Bewohner, und das Raster benennt sie: Lagezeile über
   die volle Breite, darunter links der Inhalt und rechts die mitlaufende
   Spalte, ganz unten die Verwaltung über die volle Breite.

   Vorher lagen die Bausteine der linken Spalte als lose Geschwister im
   Raster und wurden über eine Fangregel (`> *`) plus eine Zeilenspanne mit
   negativem Index (`2 / -2`) an ihren Platz gedrückt. Das trug, solange der
   Fuß leer war. Mit einem bewohnten Fuß wäre daraus eine Rechnung geworden,
   die man bei jeder künftigen Fläche neu nachziehen müsste — darum hat die
   linke Spalte jetzt eine eigene Hülle und das Raster feste Bereiche.

   BREITE DER RECHTEN SPALTE (Entscheid 076 T029, 2026-09-14): 27rem
   (432 px) statt 22rem (352 px).

   Warum breiter: Die 22rem waren gesetzt, als dort NUR die Repositories
   standen — und schon dort musste die Art-Kennzeichnung in die Namenszeile
   rutschen, weil für eine eigene Spalte kein lesbarer Platz blieb. Jetzt
   stehen dort ZWEI Flächen mit Aufklapp: Repository-Zeilen mit vollständig
   lesbaren Klon-Adressen (gekürzt kann man sie nicht prüfen, und geprüft
   werden sie genau dort) und Host-Zeilen, die Name, Statuswort und Weg ins
   Detail in EINER Zeile tragen.

   Warum nicht die vollen ~480 px der Gestaltungs-Referenz: Die Sichtprobe
   hat es gezeigt (2026-09-14). Die Kachelreihe „Abschlüsse und Dauer" hat
   FÜNF Kacheln à 168 px mit 13 px Abstand — sie braucht 892 px. Bei einem
   1440-px-Fenster bleiben nach Seitenrand (2 × 26), Spaltenabstand (24),
   Rollbalken und rechter Spalte genau dann noch 892 px übrig, wenn die
   rechte Spalte höchstens ~460 px misst; mit 480 px brach die fünfte Kachel
   in eine eigene Zeile und ließ daneben ein Loch. 27rem ist der breiteste
   Wert, der die Reihe mit etwas Luft zusammenhält — die Referenz wird also
   bewusst um ein Zehntel unterschritten, damit links nichts zerfällt.

   Der Umbruchpunkt wandert von 1100 px auf 1220 px: nebeneinander stehen
   die Spalten erst, wenn links noch gut 700 px bleiben. Darunter legt sich
   die rechte Spalte unter den Inhalt (A8), und beide bekommen die volle
   Breite. */

.betriebslage-layout[b-r5pkqoelvz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    grid-template-areas:
        "kopf  kopf"
        "haupt seite";
    column-gap: 1.5rem;
    align-items: start;
}

.betriebslage-lagezeile[b-r5pkqoelvz] {
    grid-area: kopf;
    min-width: 0;
}

.betriebslage-haupt[b-r5pkqoelvz] {
    grid-area: haupt;
    min-width: 0;
}

.betriebslage-seite[b-r5pkqoelvz] {
    grid-area: seite;
    min-width: 0;
}

/* Leere Plätze nehmen keinen Raum ein — die rechte Spalte entsteht gar
   nicht erst, wenn weder Repositories noch Hosts erhoben sind. (Der
   `.betriebslage-fuss` ist mit der Verwaltung auf die Einstellungen-Seite
   gezogen — 150 T011, FR-031; seine Raster-Zeile ist mit ihm gegangen.) */
.betriebslage-lagezeile:empty[b-r5pkqoelvz],
.betriebslage-haupt:empty[b-r5pkqoelvz],
.betriebslage-seite:empty[b-r5pkqoelvz] {
    display: none;
}

/* A8: bei schmalen Fenstern eine Spalte — die rechte Spalte legt sich unter
   den Inhalt, nichts läuft über. */
@media (max-width: 1220px) {
    .betriebslage-layout[b-r5pkqoelvz] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kopf"
            "haupt"
            "seite";
    }
}
/* /Components/Pages/ProjectSecretDetailPage.razor.rz.scp.css */
/* ProjectSecretDetailPage (A-Muster): dünner Deep-Link-Wrapper um die
   Detail-Schublade (SecretDetailPanel) — nur der Seitenkopf mit dem
   Zurück-Link; alle Detail-Styles liegen in der Panel-Komponente. */

.secret-detail-head[b-s4zetem9pn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 16px;
}

.secret-detail-back[b-s4zetem9pn] {
    flex: none;
    font-size: 13px;
    color: var(--accent-2);
}

.secret-detail-error[b-s4zetem9pn] {
    color: var(--red);
    margin: 0;
}
/* /Components/Pages/ProjectSecretsPage.razor.rz.scp.css */
/* ProjectSecretsPage: Der Seiteninhalt lebt in der Workspace (A-Muster) —
   globale af-page-head-Bausteine stylen sich selbst; hier bleibt nur die
   Seitenbreite der Fläche und der Fehlerzustand ungültiger Projekt-Ids. */

.af-page-head[b-afogt0h26u] {
    margin-bottom: 16px;
}

.project-secrets-error[b-afogt0h26u] {
    color: var(--red);
}
/* /Components/Pages/ProjektEinstellungenPage.razor.rz.scp.css */
/* specs/146 T017 (US5, plan A9): die Einstellungs-Fläche — ruhige
   Verwaltungs-Gestalt am Bestands-Raster und mit den Bestands-Variablen
   (Präzedenz ProjectSetupPage). Kein CDN, keine neue Font-Welt. */

.einstellungen-seite[b-ni8mjmjon9] {
    /* 164 T016 (R8): das breite Fach trägt die Anlagen-Tabelle (1120px) —
       die Maske öffnet sich dafür; Kopf, Reiter und Hinweisleiste laufen mit,
       die Fach-Flächen begrenzen ihren Inhalt selbst. */
    max-width: min(1120px, 100%);
    margin: 0 auto;
}

/* 149 T034 (contracts §1.1 Batch 12): Seitenkopf (MaskenKopf), Lade- und
   Fehlerzustand (LadeZustand, FehlerKasten) und die Anzeige ohne
   Schreibrecht (af-eig) kommen aus der Werkbank-Familie in app.css. */

.einstellungen-bestands-hinweis[b-ni8mjmjon9],
.einstellungen-standard-vermerk[b-ni8mjmjon9] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    color: inherit;
    font-size: 13px;
}

.einstellungen-schalter[b-ni8mjmjon9],
.einstellungen-ein-repo[b-ni8mjmjon9] {
    display: grid;
    gap: 0.75rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
}

.einstellungen-schalter[b-ni8mjmjon9] {
    margin-bottom: 1.25rem;
}

.einstellungen-ein-repo h2[b-ni8mjmjon9] {
    margin: 0;
    font-size: 15.5px;
}

.einstellungen-zeile[b-ni8mjmjon9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 14px;
}

.einstellungen-zeile label[b-ni8mjmjon9] {
    cursor: pointer;
}

.einstellungen-nur-lesen[b-ni8mjmjon9] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.einstellungen-stand[b-ni8mjmjon9] {
    margin: 0;
    color: var(--text-2, inherit);
    font-size: 13px;
}

.einstellungen-ein-repo-stand[b-ni8mjmjon9] {
    margin: 0;
    font-size: 14px;
}

/* 150 T010 (US4, plan A4): der Verwaltungs-Abschnitt — Abstand wie zwischen
   den Bestands-Abschnitten; die Fläche selbst (lebenszyklus-*, deletion-*,
   force-*) reist mit dem VerwaltungFooter und dessen gebündeltem
   Stylesheet, das auch die Kante des Abschnitts zeichnet. */
.einstellungen-verwaltung[b-ni8mjmjon9] {
    margin-top: 1.25rem;
}

/* 151 B6 (T017, FR-011, plan A7): der Anlagen-Abschnitt — dieselbe Kante
   wie die Verwaltung; die Fläche selbst (project-setup-*) reist mit der
   AnlageVerwaltung-Komponente und ihrem gebündelten Stylesheet. */
.einstellungen-anlage[b-ni8mjmjon9] {
    margin-top: 1.25rem;
}

/* ===== 164 T016: die drei Fächer (einstellungen-maske §1/§2/§5) ========== */

/* Der Fach-Reiter steht unter dem MaskenKopf wie eine Werkbank-Reiterzeile;
   die Gestalt der Tabs kommt aus der af-reiter-Familie in app.css. */
.einstellungen-fächer[b-ni8mjmjon9] {
    margin-top: 0.75rem;
}

/* R8: die Fach-Breiten — das breite Fach trägt die Anlagen-Tabelle, die
   anderen bleiben im ruhigen Lesemaß der Schalter-Welt. Die Farben kommen
   aus den Werkbank-Tokens, beide Themes tragen sie ohne Eigennamen. */
.einstellungen-fach[b-ni8mjmjon9] {
    max-width: min(720px, 100%);
    margin-top: 0.75rem;
}

.einstellungen-fach--breit[b-ni8mjmjon9] {
    max-width: min(1120px, 100%);
}

/* Hinweisleiste des Werkbank-Kerns — nur bei einem Zustand der ganzen
   Fläche (offener Löschantrag / angehaltene Löschung). */
.einstellungen-hinweis[b-ni8mjmjon9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    border: 1px solid var(--border);
    font-size: 13px;
}

.einstellungen-hinweis-sprung[b-ni8mjmjon9] {
    margin-left: auto;
}

/* Die Priorität ist aus dem VerwaltungFooter UMGEZOGEN (wortgleiche
   Selektoren und Werte, nur der Ort ist neu — der Block steht jetzt direkt
   in der Seite, daher trägt dieses gebündelte Stylesheet ihn). */
.verwaltung-priorität[b-ni8mjmjon9] {
    margin-top: 1.25rem;
    padding-top: 2px;
}

.project-overview-priority[b-ni8mjmjon9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.project-overview-priority label[b-ni8mjmjon9] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.project-overview-priority-badge[b-ni8mjmjon9] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}
/* /Components/Pages/RunTranscriptPage.razor.rz.scp.css */
/* f10 US3 (T013, FR-007, research.md R8/R9): Transkript-Seite — Kopf,
   begrenzter Ereignis-Verlauf.
   f30 US4 (T017, FR03 A1; Vertrag §5): stille Verbindung — einziges
   verbindungsbezogenes Element ist die Fehlermeldung „blocked“ (role="alert")
   mit dem Archiv-Knopf.
   f61 T008/T017 (A9-Buchung, datiert 2026-09-06): DER EINE Scroll-Container
   hieß .transcript-scroll (Anker-Schicht).
   149 T037 Nacharbeit (Befund Transkript-Layout): diese Regeln gelten für
   ALLE drei Transkript-Seiten — Chat- und Einsortier-Transkript teilen die
   Scope-Kennung „b-transcript“ (AppFactory.Web.csproj, CssScope). Hier
   bleibt die EINE Fassung; Regeln für nur eine der Seiten gehören nicht
   hierher.
   156 T017/T018 (2026-09-29, Werkbank-Hosts, contracts transkript-werkbank
   §1; plan E1; Vorlage mockups/transkript-lauf): die Vollflächen tragen die
   Werkbank-Zonen — Hinweisleiste (②) und das Raster „Liste links (feste
   Breite) | Detail rechts" (③④⑤). Der alte Lauf-Kopf der Seite
   (.transcript-run-head samt Status-Chip) ist mit dem Markup entfallen —
   der Lauf-Kopf ist der Verlauf-Kopf der Komponente (TranscriptVerlauf).
   Der rollende Container ist der Verlauf-Körper (.tl-körper der Komponente,
   über KörperGefunden gemeldet) — die Anker-Schicht hängt dort. Unter
   1100 px rollt die Werkbank einspaltig (contract §12, FR-021). */

.transcript[b-transcript] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* L2: keine zentrierte Maximalbreite — der Wide-Kontext des MainLayout
       gibt die volle Breite frei; Resthöhe als Prozent-Kette (f30-Bestand). */
    height: 100%;
    min-height: 16rem;
}

/* 149 T037: der Kopf ist der MaskenKopf (.af-page-head, Titel aus app.css),
   der Rückweg ein Knopf der Familie (.af-btn-sm); die Seite setzt nur den
   Abstand — er kommt aus dem gap der Spalte. */
.transcript[b-transcript]  .transcript-header {
    margin-bottom: 0;
}

/* --- Zone ②: Hinweisleiste (Vorlage index.html :157–159, :309) ---------- */

.transcript[b-transcript]  .tl-hinweis {
    flex: none;
}

/* Die Status-Punkt-Gestalten der Hinweisleiste — dieselben Werte wie in den
   B5-Komponenten-Scopes (TranscriptLaufBaum/TranscriptVerlauf tragen sie je
   in ihrem Scope); die ZUORDNUNG Status → Gestalt bleibt EINE Stelle
   (VerlaufSicht, plan E7). */
.transcript[b-transcript]  .tl-punkt {
    width: 9px;
    height: 9px;
    flex: none;
    display: inline-block;
    border-radius: 50%;
    background: var(--text-3);
}

.transcript[b-transcript]  .tl-punkt-erfolg {
    background: var(--green);
}

.transcript[b-transcript]  .tl-punkt-block {
    background: var(--yellow);
}

.transcript[b-transcript]  .tl-punkt-fehler {
    background: var(--red);
}

.transcript[b-transcript]  .tl-punkt-fehler.tl-punkt-hohl {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--red);
}

.transcript[b-transcript]  .tl-punkt-läuft {
    background: var(--accent-2);
    animation: tl-punkt-puls-b-transcript 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .transcript[b-transcript]  .tl-punkt-läuft {
        animation: none;
    }
}

@keyframes tl-punkt-puls-b-transcript {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.transcript[b-transcript]  .tl-zähler {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.transcript[b-transcript]  .tl-zähler b {
    font-family: var(--mono);
}

/* --- Zonen ③④⑤: das Werkbank-Raster (Vorlage index.html :161) ----------- */

.transcript-werkbank[b-transcript] {
    flex: 1 1 auto;
    /* Befund-Batch nach 156 B6 (2026-09-29): diese Regel hielt vorher
       min-height: 0 und erschlug damit das Werkbank-Minimum aus app.css
       (.af-werkbank, 420 px — höhere Spezifität durch den Scope). In der
       Folge durfte die Detail-Spalte unter Kopf/Leiste/Fuß des Verlaufs
       kollabieren: im 400-px-Fenster der Anker-Fahrt war der Verlauf-Körper
       0 px hoch („not visible"), auf 720 px blieb ihm die Restzone knapp.
       Die Werkbank-Untergrenze des Bestands gilt weiter; die Fläche darf
       auf schmalen Fenstern über die Seite hinauswachsen (dort rollt .page).
       156 N20 (2026-10-07): im zweispaltigen Raster hob genau dieses
       Minimum die Liste über main hinaus — bei 1280×577 bleiben unter Kopf
       und Hinweisleiste ~340 px, die Karte war 420 px hoch, der Zählfuß lag
       unter der Fensterkante. Jetzt wie die Vorlage (variante-a-werkbank,
       .wb-split): die Werkbank nimmt genau den Rest, nie mehr. Den Schutz
       gegen den 0-px-Körper trägt der Verlauf-Körper selbst (unten,
       .tl-körper); das 420-px-Minimum gilt nur noch einspaltig. */
    min-height: 0;
    display: grid;
    grid-template-columns: var(--liste-breite, 380px) minmax(0, 1fr);
    /* Die Rasterzeile trägt die definite Resthöhe (das Werkbank-Äquivalent
       zum Höhen-Kontext der Einsortier-Seite, 156 T020/B7: Wrapper +
       ::deep .tl-verlauf) — die Detail-Spalte steht damit sicher auf der
       Werkbank-Höhe, auch wenn der Zeilen-Stretch im Browser schwankt. */
    grid-template-rows: minmax(0, 1fr);
    gap: 18px;
}

.transcript-liste[b-transcript] {
    min-height: 0;
    overflow: hidden;
}

.transcript-detail[b-transcript] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Der Verlauf füllt die Detail-Spalte unter der Steuerleiste. */
.transcript-detail[b-transcript]  .tl-verlauf {
    flex: 1 1 auto;
    min-height: 0;
}

/* 156 N20: die Untergrenze sitzt am rollenden Körper, nicht am Raster. So
   bleibt die Liste samt Zählfuß in jeder Fensterhöhe innerhalb von main;
   nur in sehr niedrigen Fenstern ragt allein die Detail-Spalte nach unten
   und .page rollt — der Körper wird nie 0 px hoch (Anker-Fahrt im
   400-px-Fenster, Befund-Batch nach 156 B6).
   N20-Nacharbeit (gemessen 2026-10-07, Dev-App, 1280 breit, Lauf e7e574e4):
   6rem statt 8rem — rund vier Zeilen bleiben lesbar, und die Grenze, ab der
   die Detail-Spalte über die Werkbank ragt, sinkt von ~580 auf 545 px
   Fensterhöhe (main rollt erst unter ~523 px, der Rest fällt in den
   unteren Seitenabstand). Zusammen mit dem verdichteten Kopf und der
   zweizeiligen Leiste (TranscriptVerlauf.razor.css, max-height 700 px). */
.transcript-detail[b-transcript]  .tl-körper {
    min-height: 6rem;
}

/* Responsive wie Bestand (contract §12, FR-021): unter 1100 px einspaltig
   gerollt — die Liste klappt über die Detail-Spalte. Dort wachsen beide
   Blöcke inhaltlich (zwei eigene Zeilen), die feste Resthöhe-Rille gilt
   nur für das zweispaltige Raster. */
@media (max-width: 1099px) {
    .transcript-werkbank[b-transcript] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        flex: none;
        min-height: 420px;
    }

    .transcript-liste[b-transcript] {
        max-height: 45vh;
    }

    .transcript-detail[b-transcript] {
        min-height: 60vh;
    }
}

/* --- Steuerleiste (Auto-Scroll, „Ältere Einträge anzeigen") -------------- */

.transcript-controls[b-transcript] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    flex: none;
}

/* N20-Nacharbeit: die Steuerleiste ist bei abgeschlossenen Läufen leer
   (kein „Automatisch folgen“, keine älteren Einträge) — ohne Inhalt nimmt
   sie auch den Spalten-Abstand (8 px) nicht in Anspruch. Steht NACH der
   Grundregel (gleiche Spezifität, die spätere gewinnt). */
.transcript-controls:not(:has(> *))[b-transcript] {
    display: none;
}

/* f30 T017 (FR03 A1, Vertrag §5): Meldungs-Regel — die EINZIGE
   verbindungsbezogene Ausgabe ist die Fehlermeldung im Zustand „blocked“
   (deutlich rot, aber ruhig — kein Alarm-Karussell). */
.transcript-blocked[b-transcript] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 9px 13px;
    border: 1px solid rgba(255, 92, 92, .45);
    border-radius: var(--radius-sm);
    background: rgba(255, 92, 92, .1);
    color: var(--red);
    font-size: 13px;
    flex: none;
}

.transcript-blocked-text[b-transcript] {
    flex: 1 1 18rem;
}

/* 149 T037: „Archiv nachladen“ ist ein Knopf der Familie (.af-btn-sm). */

.transcript-autoscroll[b-transcript] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 13px;
    color: var(--text-2);
}

/* NU-4: der ehrliche Hinweis auf verdeckte ältere Einträge — Anzahl statt
   Fachbegriff; der Knopf daneben öffnet den gesamten verdeckten Bestand. */
.transcript-earlier-hint[b-transcript] {
    font-size: 12px;
    color: var(--text-3);
}

/* f41 T012 [DESIGN]: prefers-reduced-motion — das Transkript ist ein
   Lesemedium; Knopf-Übergänge sind Komfort, keine Aussage. */
@media (prefers-reduced-motion: reduce) {
    .transcript-controls button[b-transcript],
    .transcript-reload-archive[b-transcript] {
        transition: none;
    }
}
/* /Components/Pages/TaskDetailPage.razor.rz.scp.css */
/* f18 US5 (T025, F01 C1): Aufgabendetail im Mockup-4-Look — die schmale
   Kartenbreite entspricht der Drawer-Optik-Vorlage (760px, keine neue
   Navigation); alle Farben auf Design-Tokens. Struktur unverändert
   (FR-009). */

/* f32 T024 (US7, Vertrag ticket-detail-mockup5 §1): die Seite trägt seit
   Mockup 5 zwei Spalten — die schmale Karten-Breite von f18 galt für den
   einspaltigen Aufbau und würde den neuen Schnitt zusammendrücken.
   Feinschliff (Dichte, Abstände, Formsprache, beide Themes) macht der
   Design-Zug (T027); hier steht nur das Gerüst. */
/* f113 T006 (US1, Vertrag aufgabendetail-scroll-rahmen.md §2.2; FP-2
   2026-09-19 „Beide Spalten scrollen selbst, Seite scrollt nie"):
   `.task-detail` ist exakt der Inhaltsbereich von `.page`; Kopfzeile und
   Aktionsleiste sind `auto`, das Raster nimmt den Flex-Rest. Der Rest IST
   `Inhaltsbereich − Vorlauf` für JEDEN Vorlauf — keine absolute
   Viewport-Kappe mit ausgerechnetem Abzug, kein `100vh`-Term. `min-height: 0`
   nimmt dem Flex-Inhalt das automatische Mindestmaß; `--td-spalte-mindest`
   ist der Spalten-Boden (Edge E4, FR-011): unter ≈ 427 px Viewport-Höhe
   (breit) scrollt die Seite dann ehrlich — die einzige benannte Ausnahme.
   168 Nachtrag T047 (Wunsch der Fachperson 2026-10-17): die Seite reicht bis
   1920 px Fensterbreite — 101.75rem = 1628 px = 1920 − 240 (Leiste) − 2 × 26
   (Seitenrand); bis T047 endete sie bei 84rem (1344 px). */
.task-detail[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 101.75rem;
    height: 100%;
    min-height: 0;
    --td-spalte-mindest: 8rem;
}

h1[b-biv0nu3chm] {
    font-size: 21px;
    font-weight: 700;
    margin: 0;
}

.task-detail-header[b-biv0nu3chm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* f113 T022 (P1-Nachsuche, Vertrag §3 Punkt 10): der Seitenkopf liegt VOR
   dem Raster und außerhalb beider Spalten — ein langes Titel-Token trieb
   deshalb nicht eine Spalte, sondern die SEITE seitlich (`.page` trägt
   `overflow-y: auto`, also rechnerisch auch die waagrechte Achse `auto`).
   Das war von keinem Prädikat gedeckt: G1 misst senkrecht, „in einer
   Spalte" nennt keine Spalte — und eine Seiten-Leiste ist schlimmer als
   eine Spalten-Leiste.

   `anywhere` statt `break-word`, begründet: der `h1` ist Flex-Item in
   `.task-detail-header` (`min-width: auto` = Min-Content-Maß);
   `break-word` senkt das Mindestmaß NICHT (seine Umbruchstellen zählen
   nicht für intrinsische Größen), der `h1` könnte also gar nicht unter das
   Token-Maß schrumpfen. Für normale Titel ändert `anywhere` nichts — die
   Flex-Basis ist das Max-Content-Maß; h1Height 26,3 / Vorlauf 115,8 /
   Aktionsleiste 57,5 bleiben deshalb unverändert (Component-Fall pinnt die
   Regel und den Flex-Kontext; die Pixel misst quickstart SZ-A.3 nach). */
.task-detail-header h1[b-biv0nu3chm] {
    margin: 0;
    overflow-wrap: anywhere;
}

.task-detail-lane[b-biv0nu3chm] {
    display: inline-flex;
    align-items: center;
    padding: 2.5px 9px;
    background: rgba(108, 140, 255, .13);
    border: 1px solid rgba(108, 140, 255, .35);
    border-radius: 999px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* f113 T023 (Vertrag §3 Punkt 11, Edge E10/Kriterium 11): der Hinweis trägt
   `BlockReason` bzw. `NotCompleteReason` — BENUTZER-Eingabe aus dem
   ReasonDialog, also Freitext. Ein Token ohne Trenner trieb den Vorlauf und
   damit die SEITE seitlich (`.page` trägt `overflow-y: auto`, also
   rechnerisch auch waagrecht `auto`) — dieselbe Mechanik wie beim `h1`
   (T022), nur an der zweiten Vorlauf-Stelle.

   HIER STEHT BEWUSST `break-word`, NICHT `anywhere` — die Abweichung von
   T022 ist der Punkt, nicht Nachlässigkeit:
   · Die BREITE des `<p>` ist definit: `.task-detail` ist
     `flex-direction: column`, der Hinweis also Flex-Item in der
     NEBENachse und bekommt seine Breite aus `align-items: stretch`. Wo die
     Breite feststeht, bricht `break-word` das Token genau wie `anywhere`.
   · Sein automatisches Mindestmaß liegt aber in der HAUPTachse = SENKRECHT
     und ist die MIN-CONTENT-HÖHE. `anywhere` senkt das Min-Content-Maß in
     der Breite auf ≈ 1 Zeichen — und die Min-Content-Höhe ist die Höhe BEI
     dieser Breite, wächst also auf ≈ eine Zeile je Zeichen. `min-height:
     auto` würde den Hinweis darauf ZWINGEN und den Vorlauf verschieben.
     Genau den bestimmt aber die f113-Formel (§2.3): der Vorlauf wird vom
     Layout gemessen, nicht von uns geschätzt — eine Umbruch-Politik, die
     ihn bewegt, unterläuft die Formel.
   · `break-word` lässt intrinsische Maße unberührt (CSS Text: die von ihm
     eingeführten Umbruchstellen zählen nicht für intrinsische Größen) und
     ist hier deshalb der sichere Wert.

   Layout-Neutralität für normale Inhalte: `overflow-wrap` ändert
   ausschließlich die Menge der Umbruchstellen und greift nur, wenn KEINE
   annehmbare Stelle verfügbar ist. Normale Begründungen haben Leerzeichen
   ⇒ Umbruchmenge, Zeilenzahl und Höhe identisch. Im gemessenen Bezugsfall
   (Vorlauf 115,8 / h1Height 26,3 / Aktionsleiste 57,5) ist zudem GAR KEIN
   Hinweis gerendert — die Regel kann diese Werte nicht berühren. */
.task-detail-hint[b-biv0nu3chm] {
    margin: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 176, 32, .4);
    border-radius: var(--radius-sm);
    background: rgba(255, 176, 32, .07);
    color: var(--yellow);
    font-size: 12.5px;
    overflow-wrap: break-word;
}

/* 171 B5 (karten-markierung §3): Rot und Orange im Detail in derselben
   Sprache wie auf der Karte — Rot durchgezogen mit gefülltem Punkt, Orange
   gestrichelt mit offenem Ring. Strichart und Symbol tragen den Unterschied
   auch ohne Farbwahrnehmung; der Text nennt ihn ohnehin („Blockiert:“ /
   „Wartet:“). Die Rahmenbreite bleibt 1 px wie beim Basis-Hinweis, damit
   sich die Höhe des Vorlaufs nicht ändert. */
.task-detail-hint-blocked[b-biv0nu3chm],
.task-detail-hint-waiting[b-biv0nu3chm] {
    position: relative;
    padding-left: 29px;
}

.task-detail-hint-blocked[b-biv0nu3chm] {
    border-color: var(--red);
    background: var(--tint-red);
    color: var(--red-text);
}

.task-detail-hint-waiting[b-biv0nu3chm] {
    border-style: dashed;
    border-color: var(--orange);
    background: var(--tint-orange);
    color: var(--orange-text);
}

.task-detail-hint-blocked[b-biv0nu3chm]::before,
.task-detail-hint-waiting[b-biv0nu3chm]::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-sizing: border-box;
}

.task-detail-hint-blocked[b-biv0nu3chm]::before {
    background: currentColor;
}

.task-detail-hint-waiting[b-biv0nu3chm]::before {
    border: 1.5px solid currentColor;
}

/* 167 B10 (T052; ui-verhalten §5): Marken und Verweise unter dem Kopf — eine
   ruhige Zeile kleiner Kapseln in der Formsprache der Lane-Marke (Pille, 11 px,
   Tönung statt Fläche). Jede Marke trägt ihre Bedeutung in der Farbe:
   Bernstein = beim Menschen (offene Runde), Grün = fertig, Neutral = Verweis.
   Verweise sind Links — sie heben sich beim Überfahren nur leise an. */
.task-detail-marken[b-biv0nu3chm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: -0.35rem;
}

.task-detail-marke[b-biv0nu3chm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .12s, color .12s, background .12s;
}

.task-detail-marke[b-biv0nu3chm]  svg {
    flex: none;
    width: 12px;
    height: 12px;
    opacity: .85;
}

a.task-detail-marke:hover[b-biv0nu3chm],
a.task-detail-marke:focus-visible[b-biv0nu3chm] {
    border-color: var(--accent);
    color: var(--text);
    text-decoration: none;
}

.task-detail-marke-runde[b-biv0nu3chm] {
    border-color: rgba(255, 176, 32, .45);
    background: rgba(255, 176, 32, .09);
    color: var(--yellow-text);
}

a.task-detail-marke-runde:hover[b-biv0nu3chm],
a.task-detail-marke-runde:focus-visible[b-biv0nu3chm] {
    border-color: var(--yellow);
    color: var(--yellow-text);
    background: rgba(255, 176, 32, .15);
}

.task-detail-marke-fertig[b-biv0nu3chm] {
    border-color: rgba(63, 206, 139, .45);
    background: rgba(63, 206, 139, .09);
    color: var(--green);
}

/* Der Parent-Titel kann lang sein: die Kapsel kürzt mit „…“, der volle Titel
   steht im title-Attribut. */
.task-detail-parent[b-biv0nu3chm] {
    max-width: 32rem;
}

.task-detail-marke-text[b-biv0nu3chm] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 167 B10: die Hinweisleiste „Anforderungs-Repository fehlt“ sitzt im Fluss
   der Seite (gap der Spalte), ohne den Leisten-Abstand der Werkbank. */
.task-detail[b-biv0nu3chm]  .task-detail-anforderungen-fehlt {
    margin-bottom: 0;
    border-color: rgba(255, 176, 32, .4);
    color: var(--yellow-text);
}

/* 168 Nachtrag T044/T045 (Wunsch der Fachperson 2026-10-15): der Reiter
   „Mockups“ rechts. Je Mockup eine Zeile: links ein quadratisches Fenster auf
   die echte Mockup-Seite (Live-Ansicht, auf 1280 px Desktop-Breite gerendert
   und per scale() auf die Fensterbreite verkleinert), rechts Name, Marke,
   Datum und die Wege. Das Fenster nimmt die halbe Zeile; in einer sehr
   schmalen Seitenleiste rutscht der Text unter das (weiter quadratische) Bild.
   Der Hinweis nach drei Ablehnungen steht als rote Notiz oben im Reiter.
   Nachtrag T046 (2026-10-17): die Zeile ist keine einzige Klickfläche mehr —
   das Bild (Knopf darüber) und „Öffnen“ öffnen die Großansicht, „In der
   Galerie öffnen“ steht als eigener Link daneben. */
.task-detail-mockups-liste[b-biv0nu3chm] {
    container: mockup-liste / inline-size;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-detail-mockup[b-biv0nu3chm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 13px;
    transition: border-color .15s ease, background-color .15s ease;
}

.task-detail-mockup:hover[b-biv0nu3chm] {
    border-color: var(--border-light);
}

@container mockup-liste (max-width: 260px) {
    .task-detail-mockup[b-biv0nu3chm] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
}

/* Das quadratische Fenster. Die Skalierung geht mit der Fensterbreite mit:
   tan(atan2(100cqw, 1280px)) = Fensterbreite / 1280 als reine Zahl — reines
   CSS, kein Messen per JS. Ohne Unterstützung bleibt der Zuschnitt oben links
   in Originalgröße (scale(.25) als Rückfall). */
.task-detail-mockup-vorschau[b-biv0nu3chm] {
    container-type: inline-size;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-sm) - 2px);
    background:
        repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, .025) 6px 12px),
        var(--bg-2);
}

.task-detail-mockup-vorschau iframe[b-biv0nu3chm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 1280px;
    border: 0;
    background: #fff;
    pointer-events: none;
    transform-origin: 0 0;
    transform: scale(.25);
    transform: scale(tan(atan2(100cqw, 1280px)));
}

/* 168 Nachtrag T046: der Knopf liegt über dem iframe (das keine Klicks annimmt)
   und öffnet die Großansicht. Beim Zeigen hebt ein Akzent-Rand das Bild hervor,
   ein leichter Schleier zeigt „hier geht es größer“ (Lupen-Zeiger). */
.task-detail-mockup-vorschau-knopf[b-biv0nu3chm] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.task-detail-mockup-vorschau-knopf:hover[b-biv0nu3chm] {
    filter: none;
    background: rgba(108, 140, 255, .08);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.task-detail-mockup-vorschau-knopf:focus-visible[b-biv0nu3chm] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px rgba(108, 140, 255, .25);
}

.task-detail-mockup-vorschau-leer[b-biv0nu3chm] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-3);
    font-size: 11.5px;
}

.task-detail-mockup-vorschau-leer[b-biv0nu3chm]  svg {
    width: 22px;
    height: 22px;
    opacity: .6;
}

.task-detail-mockup-text[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding-top: 2px;
}

.task-detail-mockup-name[b-biv0nu3chm] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text);
}

.task-detail-mockup-datum[b-biv0nu3chm] {
    color: var(--text-3);
    font-size: 11.5px;
}

/* 168 Nachtrag T046: die zwei Wege nebeneinander — „Öffnen“ (Großansicht, der
   Standardweg, in Akzentfarbe) und „In der Galerie öffnen“ (leiser). Beide sind
   eigene Tab-Stopps mit eigenem Fokus-Ring; schmal brechen sie untereinander. */
.task-detail-mockup-wege[b-biv0nu3chm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin-top: 2px;
}

.task-detail-mockup-großansicht[b-biv0nu3chm],
.task-detail-mockup-öffnen[b-biv0nu3chm] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-underline-offset: 2px;
    border-radius: 3px;
}

.task-detail-mockup-großansicht[b-biv0nu3chm] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    line-height: inherit;
}

.task-detail-mockup-öffnen[b-biv0nu3chm] {
    color: var(--text-2);
}

.task-detail-mockup-großansicht:hover[b-biv0nu3chm],
.task-detail-mockup-öffnen:hover[b-biv0nu3chm] {
    filter: none;
    color: var(--accent);
    text-decoration: underline;
}

.task-detail-mockup-großansicht:focus-visible[b-biv0nu3chm],
.task-detail-mockup-öffnen:focus-visible[b-biv0nu3chm] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.task-detail-mockups-leer[b-biv0nu3chm] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.task-detail-mockup-hinweis[b-biv0nu3chm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgba(255, 92, 92, .4);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--tint-red);
    color: var(--red-text);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.task-detail-mockup-hinweis[b-biv0nu3chm]  svg {
    flex: none;
    align-self: center;
    width: 13px;
    height: 13px;
}

.task-detail-mockup-hinweis-text[b-biv0nu3chm] {
    flex: 1 1 16rem;
    min-width: 0;
}

.task-detail-mockup-hinweis a[b-biv0nu3chm] {
    color: var(--red-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .task-detail-mockup[b-biv0nu3chm],
    .task-detail-mockup-vorschau-knopf[b-biv0nu3chm] {
        transition: none;
    }
}

/* 149 T037: Laden und Fehler über LadeZustand und FehlerKasten (app.css,
   Hook task-detail-error). */

.task-detail-actions[b-biv0nu3chm] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* US5 (T032, FR-012): Lauf-Status am Ticket — minimal laut Skizze.
   (Befund 117, 2026-09-20: die toten Geschwister `.task-run` und
   `.task-run h2` entfielen — die Lauf-Liste wurde schon mit f61 T015
   (`777c3947`) durch den Transkript-Tab ersetzt, ihre Sicht-Regeln
   „sind mit ihr entfallen“; die Regeln hier blieben als Leichen stehen,
   0 Markup-Treffer. Der lebendige Rest ist dieser Status-Absatz.) */
.task-run-status[b-biv0nu3chm] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

/* f12 US5 (T019, FR-010): Statuszeile Steuerung/Störung — dezente
   Kennzeichnungen (gerade gesteuert / neu gestartet / Fallback aktiv),
   reine Lesesicht, nicht verdeckend. */
.task-run-signals[b-biv0nu3chm] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.run-signal[b-biv0nu3chm] {
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-2);
}

.run-signal-steered[b-biv0nu3chm] {
    background: rgba(77, 163, 255, .13);
    border-color: rgba(77, 163, 255, .35);
    color: var(--accent-2);
}

.run-signal-resumed[b-biv0nu3chm] {
    background: rgba(255, 176, 32, .13);
    border-color: rgba(255, 176, 32, .35);
    color: var(--yellow);
}

.run-signal-fallback[b-biv0nu3chm] {
    background: rgba(255, 123, 193, .13);
    border-color: rgba(255, 123, 193, .35);
    color: var(--pink);
}

/* 170 B1 (T003): der Kurzgrund eines fehlgeschlagenen Laufs — die
   Fehler-Pille derselben Familie (rot wie die fehlgeschlagen-Optik der
   Abschluss-Badges, TranscriptRendering.FinalOutcomeKlasse). */
.run-signal-fehler[b-biv0nu3chm] {
    background: rgba(255, 92, 92, .12);
    border-color: rgba(255, 92, 92, .35);
    color: var(--red-text);
}

.task-run-controls[b-biv0nu3chm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-run-controls label[b-biv0nu3chm] {
    font-size: 13px;
    color: var(--text-2);
}

/* agenten-einsatz-neustart T007 [DESIGN] (plan E6): der Umlauf-Pfeil im
   Neustart-Knopf sitzt auf Text-Höhe — Inline-SVG wie der Strich-Stift
   (currentcolor, kein CDN, kein zweiter Font). */
.task-run-controls .run-reactivate svg[b-biv0nu3chm] {
    vertical-align: -2px;
    margin-right: 3px;
}

/* f09 US5 (T028, FR-013): gemeldeter Token-Verbrauch je Modell — rein
   darstellend (keine Interaktion), deutsch, ohne Euro-Beträge.
   f32 T027 [DESIGN]: der Block steht seit dem Tab-Schnitt allein im
   Verbrauchs-Panel — der Inline-Trennstrich (border-top) von f09 entfällt,
   die Modell-Zeilen bekommen dieselbe gestrichelte Trennung und Mono-Zahlen
   wie die Persona-Liste darüber (EIN Zahlenbild im ganzen Tab). */
.task-usage[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.task-usage h2[b-biv0nu3chm] {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-2);
}

.task-usage-list[b-biv0nu3chm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.task-usage-model[b-biv0nu3chm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
    color: var(--text);
}

.task-usage-model:last-child[b-biv0nu3chm] {
    border-bottom: none;
    padding-bottom: 0;
}

.task-usage-model span:not(.task-usage-model-name)[b-biv0nu3chm] {
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 12px;
}

.task-usage-model-name[b-biv0nu3chm] {
    font-weight: 600;
    min-width: 9rem;
}

/* f32 T027 [DESIGN] (US4, FR-008; Vertrag verbrauch §2): „keine
   Verbrauchsmeldung" ist ein benannter Befund, kein Alarm — Gelb-Ton als
   stiller Hinweis (kein Rot, keine Fläche, kein Blinken) und die normale
   Schrift statt Mono: es ist ein Satz, keine Zahl. Beide Themes über
   --yellow-text (dunkel hell-gelb, hell dunkel-ocker, kontraststark). */
.task-token-usage-none[b-biv0nu3chm] {
    color: var(--yellow-text);
    font-family: var(--font);
}

.task-token-usage-empty[b-biv0nu3chm] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

/* f29 US5 (D2): aufklappbarer Bereich „Tokenverbrauch“ — ruhige Karte im
   Bestands-Look (bg-2, Radius), eingeklappt nur die Kopfzeile mit Summe;
   Zahlen knapp in Mono, keine Interaktion außer dem Umschalter selbst.
   Beide Themes über Tokens. */
.task-token-usage[b-biv0nu3chm] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    overflow: hidden;
}

.task-token-usage-toggle[b-biv0nu3chm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.6rem;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.task-token-usage-toggle:hover[b-biv0nu3chm] {
    background: var(--bg-3);
}

.task-token-usage-chevron[b-biv0nu3chm] {
    color: var(--text-3);
    display: inline-block;
    transition: transform .15s;
}

/* Der Auf-Zustand kippt den Chevron — das Aria-Attribut ist die Quelle. */
.task-token-usage-toggle[aria-expanded="true"] .task-token-usage-chevron[b-biv0nu3chm] {
    transform: rotate(90deg);
}

.task-token-usage-sum[b-biv0nu3chm] {
    margin-left: auto;
    color: var(--text-2);
    font-weight: 400;
    font-family: var(--mono);
    font-size: 12px;
    text-align: right;
}

.task-token-usage-panel[b-biv0nu3chm] {
    border-top: 1px solid var(--border);
    padding: 9px 16px 12px;
}

.task-token-usage-list[b-biv0nu3chm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.task-token-usage-entry[b-biv0nu3chm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.2rem 1rem;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
    color: var(--text);
}

.task-token-usage-entry:last-child[b-biv0nu3chm] {
    border-bottom: none;
    padding-bottom: 0;
}

.task-token-usage-persona[b-biv0nu3chm] {
    font-weight: 600;
}

.task-token-usage-amounts[b-biv0nu3chm] {
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 12px;
    text-align: right;
}

/* f41 T006 (R14): die Empfehlungs-Sektion ist ehrlich entfernt — die
   Stile entfallen mit dem Panel.
   Befund 117 (2026-09-20): die übrigen Leichen derselben Art folgen —
   `.task-run-entry*` samt Status-Dots seit dem f61-Listen-Ersatz ohne
   Markup-Treffer und sind weg. Der Transkript-Einstieg lebt am
   Transkript-Tab, nicht mehr hier. */

/* f29 T023: minimale Kommentar-Erfassung unter dem Verlauf (Bestands-Look,
   Konst. Frontend: gleiches Layout für Formulare). */
.task-comment[b-biv0nu3chm] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 32rem;
}

.task-comment label[b-biv0nu3chm] {
    font-size: 13.5px;
    color: var(--text-2);
}

.task-comment-body[b-biv0nu3chm] {
    width: 100%;
    resize: vertical;
}

.task-comment-submit[b-biv0nu3chm] {
    align-self: flex-start;
}

/* ====================================================================
   f32 T024 (US7, FR-014–FR-016, Vertrag ticket-detail-mockup5 §1):
   das Gerüst des Mockup-5-Schnitts. Bewusst nur Struktur — Position,
   Raster, Umbruch. Farbe, Dichte, Tab-Reihen und Akzente setzt der
   Design-Zug (T027) darauf; die Klassen-Anker bleiben dabei stehen.
   ==================================================================== */

/* f32 T027 [DESIGN] (Mockup 5, README „Button-Leiste sticky oben"): die
   Leiste ist eine ruhige Karte — bg-2 mit Rahmen und Radius wie im Mockup,
   nicht bloß ein Strich (das frühere var(--bg-1) existierte im Token-Set
   gar nicht und fiel auf transparent zurück — die Aktionen schwebten beim
   Scrollen über dem Text). Der weiche Schatten trennt sie im Scroll-Fall
   vom durchlaufenden Inhalt, in beiden Themes über die Tokens. */
.task-detail-actionbar[b-biv0nu3chm] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

[data-theme="light"] .task-detail-actionbar[b-biv0nu3chm] {
    box-shadow: 0 4px 18px rgba(23, 32, 56, .10);
}

/* Primäraktion (Abnehmen/Entblocken): genau EIN farbstarker Knopf je Lane —
   167 B10: in „Neu“ ZWEI („Projektskizze beauftragen“ · „Umsetzung starten“,
   ui-verhalten §5), in „Spezifikation“ „Umsetzung starten“; die Gefahraktion hinter der Trennlinie rot getönt —
   149 T037 (FR-016): beides aus der Knopf-Familie (.af-btn-primary,
   .af-btn-danger in app.css), die Hook-Klassen tragen keine Farbe mehr. */

/* Nacharbeit Browser-Prüfung 2026-10-15: der Strich steht nur zwischen zwei
   sichtbaren Elementen (Markup); je 4 px Luft zusätzlich zum Spaltenabstand
   der Leiste, damit Status, Lane-Aktionen und Lauf-Steuerung als Gruppen lesbar sind. */
.task-detail-actionbar-sep[b-biv0nu3chm] {
    width: 1px;
    align-self: stretch;
    margin-inline: 4px;
    background: var(--border);
}

.task-detail-actionbar-spacer[b-biv0nu3chm] {
    flex: 1 1 auto;
}

/* f41 T007 (R15): die Lauf-Steuerung wohnt in der Aktionsleiste — die
   Gruppen-Klasse .task-run-controls bleibt erhalten (unveränderte
   Selektoren, G12).
   kommentar-agent-benachrichtigen T008 (US3, FR-008, W3): die Regel für
   die Anweisungs-Eingabe (.task-run-controls input) ist mit dem
   ersatzlos entfernten Steuer-Block entfallen (0 leere Reste). */

/* f41 T007 (R17): Kopf der Anforderungs-Karte — Titel links, Stift-Icon
   rechts (nur dieses Feld trägt den Auslöser). */
.task-detail-card-head[b-biv0nu3chm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* f41 T012 [DESIGN] (R17): ruhige Icon-Fläche statt Text-Glyphe mit
   Ghost-Rahmen — ein Strich-Stift als Inline-SVG (currentcolor, kein
   CDN, keine Icon-Font), quadratisches 28-px-Ziel, transparenter Grund;
   Hover/Fokus heben ihn über Akzent-Tönung an, genau wie die
   Bestands-Icon-Knöpfe der Leiste. */
.task-detail-edit-icon[b-biv0nu3chm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color .12s, background .12s;
}

.task-detail-edit-icon:hover[b-biv0nu3chm],
.task-detail-edit-icon:focus-visible[b-biv0nu3chm] {
    color: var(--accent);
    background: rgba(108, 140, 255, .13);
    filter: none;
}

/* 149 Nachtrag T042: das Menü samt Knopf liegt über dem Teppich
   (.af-menü-teppich, z-index 139) — der Klick auf „Mehr ▾“ schaltet um, jeder
   andere Klick der Seite trifft den Teppich und schließt. */
.task-detail-more[b-biv0nu3chm] {
    position: relative;
    z-index: 140;
}

/* Die Leiste ist sticky mit z-index 3 und damit ein eigener Stapelkontext —
   der Teppich darin läge sonst unter Seitenleiste (120) und Kopf-Menüs. Solange
   das Menü offen ist, hebt sich die Leiste auf die Ebene des Teppichs; so
   schließt auch ein Klick in die Seitenleiste das Menü. */
.task-detail-actionbar:has(> .task-detail-more-teppich)[b-biv0nu3chm] {
    z-index: 139;
}

/* 149 Nachtrag T043: der Status als erstes Element der Leiste — die Auswahl
   trägt die Tönung der bisherigen Lane-Marke (Akzent, Großbuchstaben), damit
   sie als „die Spalte der Aufgabe“ lesbar bleibt und sich von den
   Aktionsknöpfen absetzt. Nacharbeit Browser-Prüfung 2026-10-15: kein eigener
   Rand mehr — den Strich zu den Lane-Aktionen setzt .task-detail-actionbar-sep,
   und der steht nur, wenn rechts etwas folgt (sonst zwei Striche in „Freigegeben“). */
.task-detail-status[b-biv0nu3chm] {
    display: inline-flex;
    align-items: center;
}

.task-detail-status-select[b-biv0nu3chm] {
    width: auto;
    min-width: 9.5rem;
    height: 38px;
    padding: 0 8px 0 11px;
    border-color: rgba(108, 140, 255, .35);
    background-color: rgba(108, 140, 255, .10);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    cursor: pointer;
}

.task-detail-status-select:hover:not(:disabled)[b-biv0nu3chm] {
    border-color: rgba(108, 140, 255, .6);
    background-color: rgba(108, 140, 255, .16);
}

.task-detail-status-select:disabled[b-biv0nu3chm] {
    opacity: .6;
    cursor: progress;
}

/* Die Optionen der nativen Liste in normaler Schrift — die Großschreibung
   gilt nur dem geschlossenen Feld. */
.task-detail-status-select option[b-biv0nu3chm] {
    color: var(--text);
    background: var(--bg-2);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.task-detail-more-menu[b-biv0nu3chm] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 14rem;
    padding: 6px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--bg-3);
    box-shadow: var(--shadow);
}

/* Menü-Einträge (Link wie Knopf) als stille Listenzeilen — kein
   Knopf-Relief im aufgeklappten Menü (Mockup .more-dropdown). */
.task-detail-more-menu a[b-biv0nu3chm],
.task-detail-more-menu button[b-biv0nu3chm] {
    display: block;
    width: 100%;
    padding: 8px 11px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}

/* 167 B10 (Hausregel 13): die zerstörenden Aktionen stehen zuletzt und rot;
   149 Nachtrag T042: es können zwei sein („Projektskizze verwerfen …“,
   „Blockieren …“) — die Trennlinie steht nur vor dem ersten. */
.task-detail-more-menu button.task-detail-more-danger[b-biv0nu3chm] {
    color: var(--red);
}

.task-detail-more-menu > :not(.task-detail-more-danger) + button.task-detail-more-danger[b-biv0nu3chm] {
    margin-top: 3px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.task-detail-more-menu button.task-detail-more-danger:hover[b-biv0nu3chm] {
    background: var(--tint-red);
}

.task-detail-more-menu button:disabled[b-biv0nu3chm] {
    opacity: .55;
    cursor: default;
}

.task-detail-more-menu a:hover[b-biv0nu3chm],
.task-detail-more-menu button:hover[b-biv0nu3chm] {
    background: var(--bg-4);
    text-decoration: none;
    filter: none;
}

/* Raster 1,5 : 1 — der fachliche Inhalt dominiert (README Mockup 5).
   f113 T006 (US1, FR-002/FR-003/G2): `minmax(0, 1fr)` macht die Zeile
   definitiv und unter das Inhaltsmaß schrumpfbar; `stretch` gibt BEIDEN
   Spalten genau diese Höhe; `flex: 1 1 auto; min-height: 0` nimmt den Rest
   nach Kopfzeile und Aktionsleiste. Ein halb angewandter Zustand
   (Durchreiche ohne `height: 100%`, `stretch` ohne `minmax(0, 1fr)`) wäre
   schlechter als der Bestand (data-model.md §3).
   168 Nachtrag T047 (Wunsch der Fachperson 2026-10-17): rechts stehen 40 % der
   Spur (100 % minus 1rem Abstand) — genau das 1,5 : 1 des Bestands —, bis die
   linke Spalte 54rem (864 px) erreicht; jeden weiteren Pixel bekommt rechts.
   Damit bleibt alles bis ≈ 1750 px Fensterbreite wie bisher (1280 px: rechts
   389 px), bei 1920 px sind es 748 px gegen 864 px links. Die sieben Reiter
   brauchen nachgerechnet ≈ 702 px (12 px SemiBold, 8 + 8 px Innenabstand,
   2 px Abstand; Zähler „12“ und „12/14“) und stehen dort in einer Zeile.
   Beide Spuren sind feste Maße — langer Inhalt kann das Verhältnis nicht
   mehr verschieben (minmax(0, …) wie bei den Zeilen). */
.task-detail-grid[b-biv0nu3chm] {
    --td-links-höchst: 54rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max(calc((100% - 1rem) * .4), calc(100% - 1rem - var(--td-links-höchst)));
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

/* f113 T006 (US1, Vertrag §2.2, G2/G4; FP-2 „Beide Spalten scrollen selbst"):
   beide Spalten sind relativ gegen die definitive Grid-Zeile gekappt
   (`max-height: 100%` — RELATIV, kein `100vh`-Term) und scrollen SELBST;
   `overscroll-behavior: contain` lässt den Scroll an der Spalte enden
   (FR-009, Präzedenz `.transcript-scroll`); `min-height` ist der Boden
   gegen Edge E4 (128 px), der einzige Term, der nach unten abweichen darf. */
.task-detail-col-left[b-biv0nu3chm],
.task-detail-col-right[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    min-height: var(--td-spalte-mindest);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* f113 T006: beide Spalten gekappt mit eigenem Scroll — die Seite scrollt
   nie (FP-2 2026-09-19). Das Sticky bleibt STEHEN und wird restig: es wirkt
   nur noch in der Boden-Ausnahme E4 (Negativliste 12) — die Kappe selbst
   wandert in die gemeinsame Regel darüber. */
.task-detail-col-right[b-biv0nu3chm] {
    position: sticky;
    top: 3.5rem;
}

/* f113 P1 (Edge E10, quickstart A.3 Punkt (i) / Kriterium 11, Negativliste 16):
   die WAAGRECHTE Hälfte desselben Rahmens. Ein langes unteilbares Token im
   gerenderten Markdown-Körper trieb die linke Spalte seitlich auf — gemessen
   `scrollWidth − clientWidth` 273 / 576 / 1031 px bei 140 / 180 / 240 Zeichen.
   Mechanik: das `<p>` läuft auf `overflow-wrap: normal`, bricht also nicht;
   die Spalte hat als FOLGE von `overflow-y: auto` ein rechnerisches
   `overflow-x: auto` (CSS: ist eine Achse nicht `visible`, wird die andere
   von `visible` auf `auto` gestellt) — und zeigt die Scrollleiste.

   KEIN `overflow-x: hidden` an der Spalte: das würde einen langen Pfad oder
   eine lange URL still ABSCHNEIDEN — unsichtbar statt lesbar, also die
   schlechtere Richtung. Der Text bricht stattdessen um.

   Geltungsbereich bewusst ALLE drei Markdown-Körper der linken Spalte
   (Anforderung `TaskDetailPage.razor:276`, Kommentar `:343`, Antwort-Anzeige
   `:389`) — derselbe Renderpfad, derselbe Fehler; nur den Kommentar-Pfad zu
   fassen hätte das Kriterium weiterhin über die Beschreibung verletzlich
   gelassen. `.markdown-view` selbst trägt ABSICHTLICH keine Umbruch-Politik
   (sie gehört der Fläche, nicht dem Baustein): App-Konvention ist die Regel
   an der Oberfläche — `ExpandableText.razor.css:10` (Fachperson 2026-09-18,
   wortgleicher Befund „lange Zeilen erzwangen horizontales Scrollen"),
   `InboxGroupNode.razor.css:283`, `InboxDetail.razor.css:247`,
   `ChatContributionView.razor.css`, `TaskFileStrip.razor.css:126`.

   Wert `anywhere` statt `break-word`: beide brechen eine URL MIT `/`-Trennern
   weiter natürlich an den Trennern und ein Token OHNE Trenner erst an der
   Zeilenkante — der Unterschied liegt allein in der Min-Intrinsic-Size
   (`anywhere` senkt sie, `break-word` lässt sie beim vollen Token). Hier ist
   sie entschärft: die Spalte trägt `min-width: 0` und die Spur ist `1.5fr`,
   also kann kein Vorfahr auf Schrumpfmaß kollabieren; und die Profile
   Stock/Body rendern KEINE Tabellen (`MarkdownRenderer.cs:47-61`, PipeTables
   hängt nur an der Chat-Pipeline), womit die klassische `anywhere`-Falle
   (Tabellen-Spaltenkollaps) nicht existiert. `anywhere` ist der stärkere
   Wert und die App-Konvention — er gilt auch, falls später ein Schrumpfmaß-
   Kontext in diese Spalte wandert. */
.task-detail-col-left[b-biv0nu3chm]  .markdown-view {
    overflow-wrap: anywhere;
}

/* Der Code-Block behält seinen EIGENEN Rahmen (Vertrag §3 Punkt 7: „Breiter
   Inhalt bekommt seinen eigenen Rahmen — `.markdown-view ::deep pre
   { overflow-x: auto }` ist Bestand und reicht FÜR DEN CODE-BLOCK").
   Ausdrücklich zurückgesetzt,
   damit die Erbfolge oben keine Code-Zeile umbrechen kann: umbrochener Code
   verliert seine Lesbarkeit, und der eigene waagrechte Rahmen des Blocks ist
   hier die gewollte Antwort — keine dritte Scroll-Ebene, sondern dieselbe
   zweite, die der Vertrag erlaubt. */
.task-detail-col-left[b-biv0nu3chm]  .markdown-view pre {
    overflow-wrap: normal;
}

.task-detail-content-card[b-biv0nu3chm],
.task-detail-comments[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.task-detail-content-card h2[b-biv0nu3chm],
.task-detail-comments h2[b-biv0nu3chm] {
    margin: 0;
    font-size: 14px;
}

/* f32 T027 [DESIGN]: Tab-Leiste in der Mockup-5-Formsprache — Unterstrich-
   Tabs statt Rahmen-Chips (mockups/version-5 .tabs/.tab). Sieben Tabs
   brechen in zwei ruhige Reihen (flex-wrap, Mockup-Vorentscheid), die
   Grundlinie trägt ein durchgehender Border unter der Leiste.
   168 Nachtrag T047: ab ≈ 1890 px Fensterbreite reicht die rechte Spalte für
   eine Zeile (Rechnung am Raster oben); schmaler bleibt der Umbruch. */
.task-detail-tabs[b-biv0nu3chm] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 4px;
    border-bottom: 1px solid var(--border);
}

.task-detail-tab[b-biv0nu3chm] {
    padding: 8px 8px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}

.task-detail-tab:hover[b-biv0nu3chm] {
    color: var(--text);
    filter: none;
}

.task-detail-tab.active[b-biv0nu3chm] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.task-detail-tab-panel[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.task-detail-tab-panel[hidden][b-biv0nu3chm] {
    display: none;
}

/* Kommentar-/Fragen-Strang (T025).
   f32 T027 [DESIGN] (Mockup 5, Antwort 2): Kommentare als bg-3-Zeilen auf
   der bg-2-Karte; der Frage-Kommentar setzt sich RUHIG ab — nur über die
   Akzentkante und das Typ-Kennzeichen, kein Farbfeld. */
.task-comment-list[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-comment-item[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.task-comment-item.task-comment-question[b-biv0nu3chm] {
    border-left: 3px solid var(--accent);
}

/* 156 Nachtrag M4 (Rückmeldung N5, transkript-werkbank §10 M4): der aus dem
   Transkript angesprungene Kommentar — dauerhaft markiert, bis ein anderer
   angesprungen oder die Seite verlassen wird; beim Ansteuern blitzt er
   einmal auf (aufgaben-kommentar.js setzt .af-blitz). */
.task-comment-item.task-comment-angesprungen[b-biv0nu3chm] {
    border-color: var(--accent);
    background: var(--tint-accent);
    box-shadow: 0 0 0 1px var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
    .task-comment-item.af-blitz[b-biv0nu3chm] {
        animation: task-comment-blitz-b-biv0nu3chm 1.2s ease;
    }
}

@keyframes task-comment-blitz-b-biv0nu3chm {
    0%, 40% {
        box-shadow: 0 0 0 4px var(--accent);
    }

    100% {
        box-shadow: 0 0 0 1px var(--accent);
    }
}

.task-comment-head[b-biv0nu3chm] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-2);
}

/* f113 T023 (Vertrag §3 Punkt 11, Edge E10/Kriterium 11): der Anzeigename
   (`eintrag.Author` bzw. `AnswerAuthor`, Quelle `Users.DisplayName` über
   `TasksModule.cs:1718`) ist BENUTZER-Freitext — dieselbe Klasse wie P1,
   nur am Kommentar-Kopf statt am Kommentar-Körper.

   `anywhere` und NICHT `break-word`, begründet: `.task-comment-author` ist
   Flex-Item in `.task-comment-head` (`display: flex; flex-wrap: wrap`, kein
   `min-width: 0`). Sein automatisches Mindestmaß liegt in der HAUPTachse =
   WAAGRECHT und ist das Min-Content-Maß. `break-word` senkt dieses Maß
   NICHT (die von ihm eingeführten Umbruchstellen zählen nicht für
   intrinsische Größen) — das Element könnte also gar nicht erst unter das
   Token-Maß schrumpfen und der Überlauf bliebe bestehen. `anywhere` senkt
   es und lässt den Schrumpf zu. Für normale Namen ändert `anywhere` nichts:
   die Flex-Basis ist das Max-Content-Maß, und `flex-wrap: wrap` bricht die
   Zeile ohnehin an der Kopfgrenze. Merkregel aus T022: beim Flex-/Grid-Item
   mit automatischem Mindestmaß trägt nur `anywhere`; beim Block ohne
   Schrumpfzwang tun beide dasselbe. */
.task-comment-author[b-biv0nu3chm] {
    font-weight: 700;
    color: var(--text);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.task-comment-time[b-biv0nu3chm] {
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 11px;
}

/* Typ-Kennzeichen als Pille (Mockup .c-type): beantwortet = Akzent-Ton,
   offen = Gelb-Ton — dieselbe Ampel-Logik wie „Frage · offen" im Mockup. */
.task-comment-type[b-biv0nu3chm] {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(108, 140, 255, .14);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.task-comment-type-open[b-biv0nu3chm] {
    background: rgba(255, 176, 32, .14);
    color: var(--yellow-text);
}

.task-comment-body-text[b-biv0nu3chm] {
    white-space: pre-wrap;
    font-size: 13px;
}

/* f45 T010 [DESIGN, Bestandston]: der gerenderte Körper (MarkdownView)
   im Strang nutzt HTML-Whitespace — das geerbte pre-wrap würde die
   Zeilenumbrüche des Markup-Quelltexts als sichtbare Leerzeilen zeigen.
   Sichtbare Umbrüche trägt das Profil selbst (<br>, body-Hard-Breaks);
   Plaintext-Umbrüche bleiben dadurch genauso sichtbar wie im Bestand.
   Die Breite/Dichte kommt unverändert aus dem Bestands-Wrapper. */
.task-comment-body-text[b-biv0nu3chm]  .markdown-view {
    white-space: normal;
}

/* Antwort mit Bezug: eingerückte bg-2-Karte unter der Frage — der kleine
   Bezugs-Vorspann („Antwort auf die Frage vom …") trägt die Verknüpfung. */
.task-comment-answer[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 14px;
    padding: 8px 11px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.task-comment-answer-ref[b-biv0nu3chm] {
    color: var(--text-3);
    font-size: 11px;
}

.task-comment-answer-form[b-biv0nu3chm] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: 14px;
}

.task-comment-answer-input[b-biv0nu3chm] {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12.5px;
    background: var(--bg-2);
}

.task-comment-answer-submit[b-biv0nu3chm] {
    padding: 6px 12px;
    font-size: 12.5px;
}

.task-comment-actions[b-biv0nu3chm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-comment-empty[b-biv0nu3chm] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

/* Inline-Editor der Inhalts-Karte (T026).
   f32 T027 [DESIGN] (Antwort 3, Mockup 5 .editor-toolbar): die Leiste ist
   eine an die Schreibfläche ANGEDOCKTE bg-3-Zeile mit stillen Ghost-
   Knöpfen — fünf Werkzeuge, keine Icon-Flut; F trägt sein Fett, K sein
   Kursiv als eigene Vorschau. */
.task-detail-editor[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.task-detail-editor-title[b-biv0nu3chm] {
    width: 100%;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
}

.task-detail-editor-toolbar[b-biv0nu3chm] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 4px 6px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.task-detail-editor-toolbar button[b-biv0nu3chm] {
    padding: 4px 9px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
}

.task-detail-editor-toolbar button:hover[b-biv0nu3chm] {
    background: var(--bg-4);
    color: var(--text);
    filter: none;
}

.task-detail-editor-toolbar button[data-action="bold"][b-biv0nu3chm] {
    font-weight: 800;
}

.task-detail-editor-toolbar button[data-action="italic"][b-biv0nu3chm] {
    font-style: italic;
}

.task-detail-editor-surface[b-biv0nu3chm] {
    width: 100%;
    min-height: 18rem;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.6;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    resize: vertical;
}

/* 149 T037: der Editor-Fuß ist der FormularFuß (.af-formular-fuß,
   „Abbrechen | Speichern“ aus der Knopf-Familie); im Editor der Karte ohne
   eigene Trennlinie und Innenabstand. */
.task-detail-editor[b-biv0nu3chm]  .task-detail-editor-actions {
    margin-top: 10px;
    padding: 0;
    border-top: 0;
}

/* Unter 1100 px fällt das Raster zusammen: Inhalt + Kommentare zuerst,
   die Tab-Ansicht rutscht darunter (README Mockup 5).
   f113 T006 (US1, G5/FR-006; FP-2 „bei jeder Breite"): zwei gekappte Zeilen
   im Verhältnis des Breit-Modus (1.5fr : 1fr, M5 „der fachliche Inhalt
   dominiert"); die Bestands-Ausnahmen `max-height: none` und
   `overflow: visible` ENTfallen — die Zeilen scrollen selbst. KEIN
   `flex: 0 0 auto` (D11): es würde das Raster auf Inhaltsmaß stellen und
   die Seite scrollen lassen. */
@media (max-width: 1100px) {
    .task-detail-grid[b-biv0nu3chm] {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr);
    }

    .task-detail-col-right[b-biv0nu3chm] {
        position: static;
    }
}

/* f41 T012 [DESIGN]: prefers-reduced-motion — die Fläche sagt alles auch
   ohne Übergänge (Farbe, Fläche, Text bleiben); Bewegungs-Reize der
   Klein-Interaktionen (Tab-Wechsel, Verbrauchs-Chevron, Stift, Knöpfe)
   werden still gestellt, nichts fällt auf Bewegung angewiesen zurück. */
@media (prefers-reduced-motion: reduce) {
    .task-detail-tab[b-biv0nu3chm],
    .task-detail-edit-icon[b-biv0nu3chm],
    .task-token-usage-toggle[b-biv0nu3chm],
    .task-token-usage-chevron[b-biv0nu3chm] {
        transition: none;
    }
}

/* 167 B10 (T052; ui-verhalten §5): der Zähler im Reiter „Unter-Aufgaben“ —
   klein, tabellarische Ziffern, im aktiven Reiter in Akzentfarbe. */
.task-detail-tab-zähler[b-biv0nu3chm] {
    display: inline-block;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-4);
    color: var(--text-2);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
}

.task-detail-tab.active .task-detail-tab-zähler[b-biv0nu3chm] {
    background: rgba(108, 140, 255, .16);
    color: var(--accent);
}

/* Der Reiter selbst: Kopf mit Zähler und einem schmalen Fortschritts-Balken,
   darunter die Kinder als dichte Liste — Titel links, Spalte und Lage rechts. */
.task-detail-unteraufgaben-kopf[b-biv0nu3chm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-detail-unteraufgaben-zähler[b-biv0nu3chm] {
    flex: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.task-detail-unteraufgaben-balken[b-biv0nu3chm] {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: var(--bg-4);
    overflow: hidden;
}

.task-detail-unteraufgaben-balken > span[b-biv0nu3chm] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    transition: width .3s ease;
}

.task-detail-unteraufgaben-liste[b-biv0nu3chm] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-detail-unteraufgabe[b-biv0nu3chm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 8px 2px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
}

.task-detail-unteraufgabe:first-child[b-biv0nu3chm] {
    border-top: none;
}

/* Der Punkt trägt die Lane als Farbe — Fertig grün, In Arbeit Akzent, sonst
   gedämpft; Rot und Orange (171 B5) stehen unten bei den Zusätzen. */
.task-detail-unteraufgabe-punkt[b-biv0nu3chm] {
    flex: none;
    align-self: center;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-3);
}

.task-detail-unteraufgabe-lane-done .task-detail-unteraufgabe-punkt[b-biv0nu3chm] { background: var(--green); }
.task-detail-unteraufgabe-lane-in_progress .task-detail-unteraufgabe-punkt[b-biv0nu3chm],
.task-detail-unteraufgabe-lane-testing .task-detail-unteraufgabe-punkt[b-biv0nu3chm] { background: var(--accent); }

.task-detail-unteraufgabe-titel[b-biv0nu3chm] {
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.task-detail-unteraufgabe-spalte[b-biv0nu3chm] {
    flex: none;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.task-detail-unteraufgabe-zusatz[b-biv0nu3chm] {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-4);
    color: var(--text-2);
    font-size: 11px;
}

.task-detail-unteraufgabe-wartet[b-biv0nu3chm] {
    flex: 0 1 auto;
    background: var(--tint-orange);
    color: var(--orange-text);
    overflow-wrap: anywhere;
}

/* 171 B5: Rot und Orange an der Kind-Zeile — der Punkt wird gefüllt rot
   bzw. ein offener orange Ring (Form trennt auch ohne Farbe), der Zusatz
   nennt es in Worten. */
.task-detail-unteraufgabe-blockiert[b-biv0nu3chm] {
    background: var(--tint-red);
    color: var(--red-text);
    font-weight: 600;
}

.task-detail-unteraufgabe-ist-blockiert .task-detail-unteraufgabe-punkt[b-biv0nu3chm] {
    background: var(--red);
}

.task-detail-unteraufgabe-ist-wartend .task-detail-unteraufgabe-punkt[b-biv0nu3chm] {
    background: transparent;
    border: 1.5px solid var(--orange);
}

/* Verworfen: ausgegraut und durchgestrichen — sichtbar, aber nicht mitgezählt. */
.task-detail-unteraufgabe-ist-verworfen[b-biv0nu3chm] {
    opacity: .55;
}

.task-detail-unteraufgabe-ist-verworfen .task-detail-unteraufgabe-titel[b-biv0nu3chm] {
    color: var(--text-2);
    text-decoration: line-through;
    text-decoration-color: var(--text-3);
}

/* 167 B10 (T052; ui-verhalten §5): der Hinweis unter dem Kommentar-Feld in
   „Spezifikation“ — eine leise Zeile, keine Warnung. */
.task-comment-rohinput-hinweis[b-biv0nu3chm] {
    margin: 0;
    color: var(--text-3);
    font-size: 11.5px;
}
/* /Components/Personas/AccountEditor.razor.rz.scp.css */
/* 149 T027 (contracts/werkbank-ui.md §3.1 ⑦): der Editor im Detail der
   Inferenz-Konten-Maske. Felder, Validierung und Fuß kommen aus der
   Werkbank-Familie (af-form-row, af-input, af-form-fehler, af-form-hint,
   FormularFuß in app.css); hier steht nur die Luft unter dem Detail-Kopf, die
   Lesebreite der Felder und die Mono-Schrift der Basis-URL. */
.account-editor[b-3ejada1rp0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 34rem;
    padding-top: 12px;
}

.account-editor-mono[b-3ejada1rp0] {
    font-family: var(--mono);
    font-size: 12px;
}
/* /Components/Personas/AvatarUpload.razor.rz.scp.css */
/* f18 US5 (T024): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Struktur unverändert (FR-009).
   Rückführung auf das Mockup Variante A (2026-09-20): die Bild-Pflege
   ist KEINE eigene Karte mehr, sondern ein Abschnitt der Detail-Karte
   (.pmask-detail trägt Rand/Hintergrund/Radius). Der native Datei-Input
   wird kosmetisch gebändigt (140-Gegenprobe-Rest): das Label führt als
   Knopf, die Datei-Wahl bleibt darunter technisch erreichbar
   (.avatar-upload-select input ist DOM-Anker der Fahrten). */

.avatar-upload[b-229y4jw4by] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.avatar-upload-preview[b-229y4jw4by] {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-4);
}

.avatar-upload-hint[b-229y4jw4by] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.avatar-upload-actions[b-229y4jw4by] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.avatar-upload-select[b-229y4jw4by] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-4);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    transition: filter .12s;
}

.avatar-upload-select:hover[b-229y4jw4by] {
    filter: brightness(1.15);
}

/* Der native Datei-Input verschwindet hinter seinem Knopf-Label — die
   Datei-Wahl selbst läuft weiter über ihn (SetInputFiles der Fahrten
   erreicht versteckte Felder). */
.avatar-upload-select input[type="file"][b-229y4jw4by] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.avatar-upload-remove[b-229y4jw4by] {
    background: rgba(255, 92, 92, .15);
    border-color: rgba(255, 92, 92, .4);
    color: var(--red);
    padding: 5px 10px;
    font-size: 12px;
}

.avatar-upload-remove:hover[b-229y4jw4by] {
    background: rgba(255, 92, 92, .25);
    filter: none;
}
/* /Components/Personas/BulkModelChangeDialog.razor.rz.scp.css */
/* f34 T012 (specs/031, US2, Design): der Massen-Wechsel — eine ernste,
   konzentrierte Aktion in der Formsprache der Admin-Karten (f20-Muster:
   Karte auf --bg-2, Trennlinie vor den Aktionen). KEIN Alarm-Design:
   Übersprungenes ist gedämpft, nicht rot — nicht anwendbar ist kein
   Fehler. Alle Anker aus research.md („Dialog-Anker") unverändert;
   nur Bestands-Tokens. */

.bulk-dialog[b-51lkqh7l2g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0.75rem 0 1rem;
    padding: 20px 22px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 56rem;
}

.bulk-dialog h3[b-51lkqh7l2g] {
    margin: 0;
    font-size: 15.5px;
}

.bulk-dialog-selection[b-51lkqh7l2g] {
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
}

/* Konflikt/Ablehnung: eine Meldung, die stehen bleibt — getönt nach dem
   Badge-Präzedenzfall, mit --red-text als lesbarem Rot beider Themes. */
.bulk-dialog-error[b-51lkqh7l2g] {
    margin: 0;
    padding: 9px 13px;
    background: rgba(255, 92, 92, .08);
    border: 1px solid rgba(255, 92, 92, .35);
    border-radius: var(--radius-sm);
    color: var(--red-text);
    font-size: 12.5px;
}

/* Ziel-Block: eine Zeile, die sich bei Enge umbricht — Wahl, Wahl, Knopf.
   Die Vorschau ist der einzige Weg nach vorn und steht deshalb rechts
   am Ende der Zeile. */
.bulk-dialog-target[b-51lkqh7l2g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bulk-dialog-target label[b-51lkqh7l2g] {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.bulk-dialog-account[b-51lkqh7l2g],
.bulk-dialog-model[b-51lkqh7l2g] {
    min-width: 15rem;
}

.bulk-dialog-preview[b-51lkqh7l2g] {
    background: var(--bg-4);
    border-color: var(--border-light);
}

/* 069 (specs/069, T020): die Ansage zu den gespeicherten Reasoning-Levels —
   ein Zweit-Text unter der Ziel-Zeile, gedämpft wie die übrigen Hinweise
   dieser Karte (kein Alarm, keine eigene Formsprache). */
.bulk-dialog-reasoning-note[b-51lkqh7l2g] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.5;
}

.bulk-dialog-counts[b-51lkqh7l2g] {
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
}

/* Vorschau-Tabelle in der Grid-Formsprache der Bestandsmasken. */
.bulk-preview-table[b-51lkqh7l2g] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 12.5px;
}

.bulk-preview-table th[b-51lkqh7l2g] {
    padding: 8px 12px;
    text-align: left;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid var(--border);
}

.bulk-preview-table td[b-51lkqh7l2g] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.bulk-preview-table tr:last-child td[b-51lkqh7l2g] {
    border-bottom: none;
}

/* Übersprungen ist GEDÄMPFT, nicht rot: die Zeile tritt zurück, ihr Grund
   (letzte Spalte) bleibt lesbar — nicht anwendbar ist eine Auskunft,
   kein Alarm. */
.bulk-preview-table .bulk-row-skipped td[b-51lkqh7l2g] {
    background: var(--bg-3);
    color: var(--text-3);
}

/* Ergebnis je Persona: kompakte Zeilen, der Ausgang als linke Kante —
   grün angewendet, neutral übersprungen (mit Grund im Text). */
.bulk-result-list[b-51lkqh7l2g] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bulk-result-row[b-51lkqh7l2g] {
    padding: 7px 11px;
    background: var(--bg-3);
    border-left: 3px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-3);
}

.bulk-result-row.bulk-row-applied[b-51lkqh7l2g] {
    border-left-color: var(--green);
    color: var(--text);
}

/* Aktionszeile mit Trennlinie (f20-Dialogmuster). Die Bestätigung ist
   Akzent, nicht Rot: eine bewusste Entscheidung, kein Gefahrenknopf —
   und sie existiert ohnehin nur auf gültigem Vorschau-Stand. */
.bulk-dialog-actions[b-51lkqh7l2g] {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.bulk-dialog-confirm[b-51lkqh7l2g] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.bulk-dialog-cancel[b-51lkqh7l2g] {
    background: var(--bg-4);
    border-color: var(--border);
    color: var(--text-2);
}

.bulk-dialog-cancel:hover[b-51lkqh7l2g] {
    filter: none;
    color: var(--text);
}
/* /Components/Personas/ChainBlock.razor.rz.scp.css */
/* 134 T017 — die Kette als gemeinsames Bauteil beider Kontexte.
   Rückführung auf das Mockup Variante A (2026-09-20, „ketteHtml“/
   .kette*): Glieder als Karten mit laufender Nummer, Verbinder ↓
   zwischen aufeinanderfolgenden Gliedern, Primär mit Akzent-Tönung,
   Einträge der Organisation mit Violett-Kante; die Regel „Weiterge-
   schaltet wird nach zwei aufeinanderfolgenden Fehlern“ steht als
   Bestands-Hinweis über der Liste. NUR die Klassen, die dieser
   Baustein rendert (Befund 140: Regeln gehören in die CSS-Datei des
   rendernden Markups) — die Badge-Grundform der hier gerenderten
   .plist-badge-*-Klassen trägt deshalb diese Datei mit. */

.kette-block[b-3yzag7ybtk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kette-hinweis[b-3yzag7ybtk] {
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--text-3);
}

.kette-leer[b-3yzag7ybtk] {
    color: var(--text-3);
    font-size: 12px;
    padding: 9px 0;
}

.kette[b-3yzag7ybtk] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kette-glied[b-3yzag7ybtk] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    margin: 0 0 9px;
    position: relative;
}

/* Verbinder zwischen aufeinanderfolgenden Gliedern (Mockup ↓). */
.kette-glied + .kette-glied[b-3yzag7ybtk]::before {
    content: "↓";
    position: absolute;
    top: -13px;
    left: 15px;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1;
}

.kette-glied.primär[b-3yzag7ybtk] {
    border-color: rgba(108, 140, 255, .45);
    background: rgba(108, 140, 255, .08);
}

.kette-glied.aus-org[b-3yzag7ybtk] {
    border-color: rgba(181, 123, 255, .4);
}

.kette-nr[b-3yzag7ybtk] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-4);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
}

.kette-glied.primär .kette-nr[b-3yzag7ybtk] {
    background: var(--accent);
    color: #fff;
}

.kette-inhalt[b-3yzag7ybtk] {
    min-width: 0;
}

.kette-zeile1[b-3yzag7ybtk] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 12.5px;
}

.kette-konto[b-3yzag7ybtk] {
    color: var(--text-2);
}

.kette-modell[b-3yzag7ybtk] {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
}

.kette-zeile2[b-3yzag7ybtk] {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-3);
}

.kette-warnung[b-3yzag7ybtk] {
    color: var(--yellow-text);
}

/* Badge-Grundform der Kette (Mockup .badge) nebst den beiden hier
   gerenderten Farbvarianten (Primär blau, Reasoning neutral). */
.kette-block .badge[b-3yzag7ybtk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    color: var(--text-2);
    background: rgba(154, 165, 184, .15);
}

.kette-block .plist-badge-primary[b-3yzag7ybtk] {
    background: rgba(77, 163, 255, .16);
    color: var(--blue-text);
}
/* /Components/Personas/ConsumptionSection.razor.rz.scp.css */
/* 134 T018 — der Verbrauchs-Abschnitt. Rückführung auf das Mockup
   Variante A (2026-09-20, .verbrauch*/.verlauf*): Abschnitts-Kopf im
   Weitdruck der Detail-Abschnitte[b-upro612qfm], drei Kacheln (Aktivierungen /
   Gesamttokens / Sessions) mit 19-px-Ziffern in Tabellarischen[b-upro612qfm], die
   Aufschlüsselung je Organisation als gestrichelte Zeilen[b-upro612qfm], der
   historische Verlauf im selben Rhythmus. NUR die Klassen[b-upro612qfm], die dieser
   Baustein rendert (Befund 140). Die data-*-Attribute der Zeilen sind
   DOM-Vertrag des SC-009-Vergleichs — CSS rührt sie nicht an. */

.verbrauch[b-upro612qfm] {
    margin-top: 21px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Abschnitts-Kopf wie .pdetail-abschnitt h3 (gleiche Grammatik, eigener
   Baustein — deshalb hier, nicht in der Pane). */
.verbrauch-kopf[b-upro612qfm] {
    margin: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.verbrauch-kopf .zahl[b-upro612qfm] {
    color: var(--accent);
}

.verbrauch-kachelreihe[b-upro612qfm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.verbrauch-kachel[b-upro612qfm] {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.verbrauch-name[b-upro612qfm] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
    font-weight: 700;
}

.verbrauch-wert[b-upro612qfm] {
    font-size: 19px;
    font-weight: 700;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* Aufschlüsselung (global): ruhiger Umschalter, gestrichelte Zeilen. */
.verbrauch-aufklappen[b-upro612qfm] {
    align-self: flex-start;
    padding: 5px 10px;
    font-size: 12px;
    background: transparent;
    border-color: transparent;
    color: var(--text-2);
}

.verbrauch-aufklappen:hover[b-upro612qfm] {
    background: var(--bg-3);
    color: var(--text);
    filter: none;
}

.verbrauch-org-liste[b-upro612qfm] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.verbrauch-org-leer[b-upro612qfm] {
    margin: 0;
    color: var(--text-3);
    font-size: 12px;
}

.verbrauch-org-zeile[b-upro612qfm],
.verlauf-zeile[b-upro612qfm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    background: rgba(154, 165, 184, .04);
}

.verbrauch-org-name[b-upro612qfm],
.verlauf-name[b-upro612qfm] {
    font-weight: 600;
    font-size: 12.5px;
}

.verbrauch-org-werte[b-upro612qfm],
.verlauf-werte[b-upro612qfm] {
    margin-left: auto;
    display: flex;
    gap: 14px;
    font-size: 11.5px;
    color: var(--text-3);
    flex-wrap: wrap;
}

/* Historische Läufe (nur Organisation): eigener Block im selben Rhythmus. */
.verlauf[b-upro612qfm] {
    margin-top: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.verlauf-liste[b-upro612qfm] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 4px;
}

/* Quellen-Hinweis (Mockup .hinweis). */
.verbrauch .hinweis[b-upro612qfm] {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}
/* /Components/Personas/FallbackListEditor.razor.rz.scp.css */
/* f18 US5 (T024): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Struktur unverändert (FR-009). */

.fallback-list-editor[b-1fz8axdeau] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fallback-list-editor h2[b-1fz8axdeau] {
    margin: 0;
    font-size: 15.5px;
}

.fallback-list-empty[b-1fz8axdeau] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

/* 069 (specs/069, T018): Benennung + Erläuterungssatz der Level-Spalte —
   EINMAL über der Liste, nicht je Zeile. Behandlung wie die übrigen
   Zweit-Texte dieser Fläche (.fallback-list-empty), Benennung wie die
   Feld-Label (12px/700/uppercase): dieselben Tokens, kein eigenes Vokabular. */
.fallback-list-reasoning-note[b-1fz8axdeau] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.5;
}

.fallback-list-reasoning-note-label[b-1fz8axdeau] {
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.fallback-list[b-1fz8axdeau] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fallback-entry[b-1fz8axdeau] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: grab;
}

.fallback-entry-position[b-1fz8axdeau] {
    min-width: 1.5rem;
    color: var(--text-3);
    font-weight: 600;
}

.fallback-entry-account[b-1fz8axdeau] {
    flex: 1;
}

.fallback-entry-model[b-1fz8axdeau] {
    flex: 1;
}

.fallback-entry-actions[b-1fz8axdeau] {
    display: flex;
    gap: 0.25rem;
}

.fallback-move-up[b-1fz8axdeau],
.fallback-move-down[b-1fz8axdeau] {
    padding: 4px 9px;
    font-size: 12px;
    background: var(--bg-4);
    border-color: var(--border);
    color: var(--text-2);
}

.fallback-move-up:hover:not(:disabled)[b-1fz8axdeau],
.fallback-move-down:hover:not(:disabled)[b-1fz8axdeau] {
    background: var(--bg-4);
    filter: none;
    color: var(--text);
}

.fallback-move-up:disabled[b-1fz8axdeau],
.fallback-move-down:disabled[b-1fz8axdeau] {
    opacity: 0.4;
    cursor: default;
}

.fallback-remove[b-1fz8axdeau] {
    background: rgba(255, 92, 92, .15);
    border-color: rgba(255, 92, 92, .4);
    color: var(--red);
}

.fallback-remove:hover[b-1fz8axdeau] {
    background: rgba(255, 92, 92, .25);
    filter: none;
}

.fallback-list-actions[b-1fz8axdeau] {
    display: flex;
    gap: 0.5rem;
}

.fallback-add[b-1fz8axdeau] {
    background: var(--bg-4);
    border-color: var(--border);
    color: var(--text-2);
}

.fallback-add:hover[b-1fz8axdeau] {
    filter: none;
    color: var(--text);
}

.validation-message[b-1fz8axdeau] {
    margin: 0;
    color: var(--red);
}
/* /Components/Personas/ModelCatalogGrid.razor.rz.scp.css */
/* f18 US5 (T024): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Struktur unverändert (FR-009). */

.catalog-toolbar[b-t7zsck8q9t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.catalog-toolbar input[b-t7zsck8q9t] {
    max-width: 22rem;
}

.catalog-refresh[b-t7zsck8q9t] {
    white-space: nowrap;
}

.catalog-refresh[disabled][b-t7zsck8q9t] {
    opacity: 0.6;
    cursor: wait;
}

.catalog-empty[b-t7zsck8q9t] {
    color: var(--text-3);
    font-style: italic;
    padding: 0.75rem 0;
}

/* f41 T010 (R13, FR-013): abgetrennter Bereich der aktivierten Modelle —
   steht über dem vollständigen Katalog, Suche gilt in beiden Bereichen,
   ohne Treffer bleibt er ehrlich leer.
   f41 T012 [DESIGN] (R13): der Kopf trägt, der Rahmen dient — Karte im
   Bestandston (bg-2/Border wie .catalog-grid darunter), aber der Kopf
   spricht die Katalog-Sprache: grüner Status-Punkt + Kleinbuchstaben-
   Überschrift in der Zeilenhöhe der Tabellen-Köpfe, die Einträge als
   gestrichelte Zeilen (wie Persona-Listen) mit Mono-Kennung und Grün-
   Badge. So liest sich der Block als Zusammenfassung DES Katalogs, nicht
   als zweite Karte mit eigener Stimme. */
.catalog-active-block[b-t7zsck8q9t] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    padding: 10px 14px 11px;
    margin-bottom: 0.75rem;
}

.catalog-active-head[b-t7zsck8q9t] {
    margin: 0 0 0.35rem;
    font-size: 10.5px;
    color: var(--text-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.catalog-active-head[b-t7zsck8q9t]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--green);
    vertical-align: 1px;
}

.catalog-active-empty[b-t7zsck8q9t] {
    margin: 0;
    color: var(--text-3);
    font-style: italic;
    font-size: 12.5px;
}

.catalog-active-list[b-t7zsck8q9t] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.catalog-active-item[b-t7zsck8q9t] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
}

.catalog-active-item:last-child[b-t7zsck8q9t] {
    border-bottom: none;
    padding-bottom: 3px;
}

.catalog-active-modelid[b-t7zsck8q9t] {
    font-family: var(--mono);
    color: var(--text);
}

.catalog-active-name[b-t7zsck8q9t] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text-2);
}

/* f41 T012 [DESIGN]: das „Aktiviert"-Kennzeichen (Bestands-Markup im
   Bereich wie in der Katalog-Tabelle) bekommt seine Grün-Pille — dieselbe
   Form wie die Bestands-Badges (catalog-stale), Grün als Aktiv-Signal des
   Vokabulars; im Bereich rechtsbündig, in der Tabelle als Inline-Badge
   vor dem Umschalter. */
.catalog-active[b-t7zsck8q9t] {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(63, 206, 139, .14);
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.catalog-grid[b-t7zsck8q9t] {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 13px;
}

.catalog-grid[b-t7zsck8q9t]  th {
    padding: 9px 12px;
    text-align: left;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid var(--border);
}

.catalog-grid[b-t7zsck8q9t]  td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.catalog-grid[b-t7zsck8q9t]  tr:last-child td {
    border-bottom: none;
}

.catalog-grid[b-t7zsck8q9t]  tr:hover td {
    background: var(--bg-3);
}

.catalog-stale[b-t7zsck8q9t] {
    color: var(--yellow);
    background: rgba(255, 176, 32, .15);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

/* 133 T010 (Beschluss „Ja, Warnung“, FR-009/FR-011): die Warnung an der
   AKTIVEN Stale-Zeile — in jeder Sicht, auch read-only; als eigener Block
   unter dem Status, damit sie nicht mit dem Status-Pill verschmilzt. */
.catalog-stale-warning[b-t7zsck8q9t] {
    display: block;
    margin-top: 4px;
    color: var(--yellow-text);
    font-weight: 700;
    font-size: 11.5px;
}

/* Modal-Hausregel (2026-09-20): die Info ist ein Modal ÜBER der Liste.
   Fläche und Rahmen kommen aus der Dialog-Familie (app.css .af-modal-
   Overlay/.af-modal); hier steht nur, was DER Dialog zusätzlich braucht —
   mehr Breite für die Feldliste, Höhe begrenzt mit eigenem Lauf, und die
   aufbereitete Preis-Gestalt. */
.catalog-info-modal[b-t7zsck8q9t] {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow: auto;
}

.catalog-info-identifier[b-t7zsck8q9t] {
    color: var(--text-3);
    margin: 0.25rem 0 0.75rem;
    font-size: 12px;
    font-family: var(--mono);
}

/* Die geparste Preis-Gestalt: Karte im Bestandston, Werte in tabellarischen
   Ziffern — die Einheit trägt die Überschrift, die Umrechnung der Hinweis
   darunter. */
.catalog-info-pricing[b-t7zsck8q9t] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-3);
    padding: 10px 14px 11px;
    margin-bottom: 0.75rem;
}

.catalog-info-pricing-head[b-t7zsck8q9t] {
    margin: 0 0 0.5rem;
    font-size: 10.5px;
    color: var(--text-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.catalog-info-pricing-list[b-t7zsck8q9t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0;
}

.catalog-info-pricing-row dt[b-t7zsck8q9t] {
    font-weight: 700;
    font-size: 11px;
    color: var(--text-2);
}

.catalog-info-pricing-row dd[b-t7zsck8q9t] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.catalog-info-pricing-note[b-t7zsck8q9t] {
    margin: 0.5rem 0 0;
    font-size: 11.5px;
    color: var(--text-3);
}

.catalog-info-fields[b-t7zsck8q9t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.catalog-info-field dt[b-t7zsck8q9t] {
    font-weight: 700;
    font-size: 11px;
    color: var(--text-2);
}

.catalog-info-field dd[b-t7zsck8q9t] {
    margin: 0 0 0.25rem;
    overflow-wrap: anywhere;
    font-size: 13px;
    color: var(--text);
}
/* /Components/Personas/ModelSelect.razor.rz.scp.css */
/* f18 US5 (T024): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Struktur unverändert (FR-009). */

.model-select[b-qs1wl6fkuu] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
}

.model-select-choice[b-qs1wl6fkuu],
.model-select-free[b-qs1wl6fkuu] {
    min-width: 10rem;
}

/* 069-Abnahme-Befund 2: die Regel .model-select-hint stand hier — im
   Scoped-CSS DIESER Komponente, die selbst gar keinen Hinweis rendert.
   Getragen wurde die Klasse nur von den Host-Masken (Persona-Editor,
   Override-Editor, Fallback-Liste), wo die Scope-Kennung nicht passt: der
   Hinweis blieb dort ungestaltet, während der Reasoning-Hinweis sein
   eigenes Maß mitbrachte — genau die gemeldete Uneinheitlichkeit. Die
   Masken tragen jetzt den gemeinsamen Baustein .af-form-hint (app.css). */
/* /Components/Personas/OverrideEditor.razor.rz.scp.css */
/* f18 US5 (T024): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Struktur unverändert (FR-009). */

/* 149 T029: der Editor ist der Körper des Details (.af-detail-körper); den
   Fuß trägt der FormularFuß der Werkbank. */
.override-editor[b-n3bvsxu05t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 14px;
}

.override-editor h3[b-n3bvsxu05t] {
    margin: 0;
    font-size: 14px;
}

.override-editor-field[b-n3bvsxu05t] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 16rem;
}

.override-editor-field select[b-n3bvsxu05t] {
    width: 100%;
}

.override-editor-empty[b-n3bvsxu05t],
.override-editor-hint[b-n3bvsxu05t] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

/* 069 (specs/069, T019): Benennung + Erläuterungssatz der Level-Spalte —
   EINMAL über den Einträgen, nicht je Zeile. Sitzt auf der Bestands-Klasse
   .override-editor-hint (dieselben Tokens), die Benennung wie die Feld-Label
   (12px/700/uppercase): kein eigenes Vokabular. */
.override-editor-reasoning-note[b-n3bvsxu05t] {
    line-height: 1.5;
}

.override-editor-reasoning-note-label[b-n3bvsxu05t] {
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.override-entries[b-n3bvsxu05t] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.override-entry[b-n3bvsxu05t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.override-entry-position[b-n3bvsxu05t] {
    min-width: 1.5rem;
    color: var(--text-3);
    font-weight: 600;
}

.override-entry select[b-n3bvsxu05t] {
    flex: 1;
}

.override-entry-model[b-n3bvsxu05t] {
    flex: 1;
}

.override-entry-actions[b-n3bvsxu05t] {
    display: flex;
    gap: 0.25rem;
}

.override-move-up[b-n3bvsxu05t],
.override-move-down[b-n3bvsxu05t] {
    padding: 4px 9px;
    font-size: 12px;
    background: var(--bg-4);
    border-color: var(--border);
    color: var(--text-2);
}

.override-move-up:hover:not(:disabled)[b-n3bvsxu05t],
.override-move-down:hover:not(:disabled)[b-n3bvsxu05t] {
    background: var(--bg-4);
    filter: none;
    color: var(--text);
}

.override-move-up:disabled[b-n3bvsxu05t],
.override-move-down:disabled[b-n3bvsxu05t] {
    opacity: 0.4;
    cursor: default;
}

.override-entry-remove[b-n3bvsxu05t] {
    background: rgba(255, 92, 92, .15);
    border-color: rgba(255, 92, 92, .4);
    color: var(--red);
}

.override-entry-remove:hover[b-n3bvsxu05t] {
    background: rgba(255, 92, 92, .25);
    filter: none;
}

.override-editor-add-row[b-n3bvsxu05t] {
    display: flex;
}

.override-add[b-n3bvsxu05t] {
    background: var(--bg-4);
    border-color: var(--border);
    color: var(--text-2);
}

.override-add:hover[b-n3bvsxu05t] {
    filter: none;
    color: var(--text);
}

.validation-message[b-n3bvsxu05t] {
    margin: 0;
    color: var(--red);
}

/* f34 T007 (specs/031, US1, Design): die PROMPT-Ebene — ein eigener,
   abgesetzter Abschnitt unter der Modell-Ebene (beide wirken unabhängig,
   die Trennlinie sagt das). Nur Bestands-Tokens; alle Anker aus
   research.md („Editor-Anker für den Design-Zug") unverändert. */

.override-editor-prompt[b-n3bvsxu05t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

/* Der Prompt braucht Schreibbreite — die 16rem der Modus-Wahl wären für
   Fließtext eine Schikane. Die Wahl selbst bleibt schmal. */
.override-editor-prompt .override-editor-field[b-n3bvsxu05t] {
    max-width: 42rem;
}

.override-editor-prompt #override-prompt-mode[b-n3bvsxu05t] {
    max-width: 16rem;
}

.override-editor-prompt textarea[b-n3bvsxu05t] {
    width: 100%;
    line-height: 1.6;
}

.override-prompt-preview-label[b-n3bvsxu05t] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Die Vorschau ist der Text, der WÖRTLICH in den Lauf geht — deshalb
   Mono, Zeilenumbrüche erhalten, und bei langen Prompts scrollt sie,
   statt den Editor zu sprengen. */
.override-prompt-preview[b-n3bvsxu05t] {
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-height: 2.6em;
    max-height: 14rem;
    overflow-y: auto;
}

/* Teil-Herkunft auf einen Blick: der geerbte globale Teil zweitstufig
   grau, der Projekt-Teil mit Akzent-Tönung (dieselbe rgba wie die
   Bestands-Badges — wirkt in beiden Themes). Bei „ergänzt" liest man
   damit sofort: grau = global, getönt = meins. */
.override-prompt-preview-inherited[b-n3bvsxu05t] {
    color: var(--text-2);
}

.override-prompt-preview-project[b-n3bvsxu05t] {
    background: rgba(108, 140, 255, .13);
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0 2px;
    color: var(--text);
}

/* 062 T020 (specs/062, US3): die BESCHREIBUNGS-Ebene — eigene Sektion in
   der Bauart der Prompt-Gruppe (dieselben Tokens, derselbe Rhythmus); sie
   steht unter dem Prompt und wirkt wie dieser unabhängig. */

.override-editor-shorttext[b-n3bvsxu05t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.override-editor-shorttext .override-editor-field[b-n3bvsxu05t] {
    max-width: 42rem;
}

.override-editor-shorttext #override-shorttext-mode[b-n3bvsxu05t] {
    max-width: 16rem;
}

.override-editor-shorttext textarea[b-n3bvsxu05t] {
    width: 100%;
    line-height: 1.6;
}

/* Die Mangel-Anzeige (replace/append ohne Text) ist kein stiller Hinweis —
   sie trägt die Ablehnungs-Tönung der Validierung. */
.override-editor-shorttext .override-editor-missing[b-n3bvsxu05t] {
    color: var(--red);
}
/* /Components/Personas/PersonaDetailPane.razor.rz.scp.css */
/* Befund 140 (2026-09-20), Wurzel B: die .pdetail*-Regeln stehen in der
   Datei, deren Scope das Markup trägt (diese Pane).
   149 T029 (contracts/werkbank-ui.md §1, §3.2 ⑤): Kopf (DetailKopf),
   Abschnitte (af-abschnitt), Eigenschaften (af-eig), Marken (af-badge) und
   der rollende Körper kommen aus der af-Familie in app.css. Hier stehen nur
   die Eigenheiten der Persona: der 46-px-Avatar als Symbol des Kopfs, die
   Eigenschaftszeilen als Paare im Raster, Hinweise und die Vorschau
   (Akzentkante, laufflächenbegrenzt). Gefahrenbereich und eigener
   Lösch-Dialog entfallen (Mehr-Menü + BestätigungsDialog der Maske). */

/* Sanftes Aufkommen des Detail-Inhalts (Mockup „einblenden“). */
@media (prefers-reduced-motion: no-preference) {
    .pdetail[b-ry3jd2qqc4] {
        animation: pdetail-einblenden-b-ry3jd2qqc4 .2s ease both;
    }
}

@keyframes pdetail-einblenden-b-ry3jd2qqc4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Der Avatar als Symbol des Kopfs (46 px bleibt die Sollgröße — dieselbe
   Referenz wie .plist-avatar in der Liste). */
.pdetail-avatar[b-ry3jd2qqc4] {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-4);
}

/* Nachtrag N14: ohne Bild-Quelle der Erstbuchstabe in derselben Form. */
.pdetail-avatar-buchstabe[b-ry3jd2qqc4] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 18px;
    font-weight: 700;
}

.pdetail-eig[b-ry3jd2qqc4] {
    display: contents;
}

.pdetail-abschnitt .zahl[b-ry3jd2qqc4] {
    color: var(--accent);
}

.pdetail-hint[b-ry3jd2qqc4],
.pdetail-wirkung[b-ry3jd2qqc4] {
    margin: 0 0 6px;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}

.pdetail-wirkung[b-ry3jd2qqc4] {
    font-size: 12.5px;
    color: var(--text-2);
}

.pdetail-bild-vermerk[b-ry3jd2qqc4] {
    margin: 0 0 4px;
    font-size: 11px;
    color: var(--text-3);
    font-style: italic;
}

.pdetail-ruhend .pdetail-hint[b-ry3jd2qqc4] {
    color: var(--yellow-text);
}

.pdetail-fallback-liste[b-ry3jd2qqc4] {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--text-2);
}

/* ----- Vorschau (.vorschau) ----- */

.pdetail-vorschau[b-ry3jd2qqc4] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pdetail-vorschau-titel[b-ry3jd2qqc4] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.pdetail-vorschau p[b-ry3jd2qqc4] {
    margin: 0;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-2);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-2);
    max-height: 190px;
    overflow-y: auto;
}
/* /Components/Personas/PersonaEditor.razor.rz.scp.css */
/* f18 US5 (T024): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Struktur unverändert (FR-009).
   149 T029 (contracts/werkbank-ui.md §3.2 ⑦): der Editor ist der Körper
   des Details (.af-detail-körper); Titel (DetailKopf) und Fuß (FormularFuß)
   kommen aus den Bausteinen der Werkbank. Hier stehen nur die Felder. */

.persona-editor[b-xskjtvj8jv] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.persona-editor-readonly-hint[b-xskjtvj8jv] {
    margin: 0;
}

.persona-editor-field[b-xskjtvj8jv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.persona-editor-field label[b-xskjtvj8jv] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 0;
}

.persona-editor-field input[b-xskjtvj8jv],
.persona-editor-field select[b-xskjtvj8jv],
.persona-editor-field textarea[b-xskjtvj8jv] {
    width: 100%;
}

.validation-message[b-xskjtvj8jv] {
    margin: 0;
    color: var(--red);
}
/* /Components/Personas/PersonaListPane.razor.rz.scp.css */
/* 134 T016 (Befund 140, 2026-09-20): die Personen-Liste trägt ihr eigenes
   Scoped-CSS.
   149 T029 (contracts/werkbank-ui.md §1, §3.2 ③ ④): Karte, Suche, Chips,
   Zeilen-Optik (af-lz), Marken (af-badge), Zustände und Fuß kommen aus der
   af-Familie in app.css. Hier stehen nur die Eigenheiten der Bestandszeile:
   „Alle auswählen“ neben der Suche, Kästchen und 46-px-Avatar vor dem Text,
   der zweizeilige Aufruf-Prompt, die Konto-Angabe, die gedimmte Zeile ohne
   Kette und das gestaffelte Aufkommen (reduced-motion-frei). */

.plist-tools[b-c8upj9tlob] {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Die Suche (Baustein MaskenSuche) füllt die Zeile neben dem Knopf. */
.plist-tools[b-c8upj9tlob]  .plist-suchfeld {
    flex: 1 1 auto;
    min-width: 0;
}

.plist-select-all[b-c8upj9tlob] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.plist-row[b-c8upj9tlob] {
    cursor: pointer;
}

/* Gestaffeltes Aufkommen (Mockup „aufsteigen“) — nur bei bewegtem
   Willkommen; reduced-motion entfällt es (Spec Edge Case). */
@media (prefers-reduced-motion: no-preference) {
    .plist-row[b-c8upj9tlob] {
        animation: plist-aufsteigen-b-c8upj9tlob .24s cubic-bezier(.2, .7, .3, 1) both;
        animation-delay: calc(var(--plist-i, 0) * 22ms);
    }
}

@keyframes plist-aufsteigen-b-c8upj9tlob {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Org-Sicht ohne Kette: ehrlich gedimmt — die Zeile bleibt klickbar
   (Detail-Sicht), trägt aber ihren „Nicht verfügbar"-Zustand sichtbar. */
.plist-row.inaktiv[b-c8upj9tlob] {
    opacity: .58;
}

.plist-row-select[b-c8upj9tlob] {
    flex: none;
    margin-top: 6px;
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

/* Avatar-Referenz 46 px (140-Heilung, bleibt stehen): rund, cover. */
.plist-avatar[b-c8upj9tlob] {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-4);
}

/* Nachtrag N14: ohne Bild-Quelle der Erstbuchstabe in derselben Form. */
.plist-avatar-buchstabe[b-c8upj9tlob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 18px;
    font-weight: 700;
}

/* Aufruf-Prompt zweizeilig geklemmt (Mockup .zeile-kurz). */
.plist-short[b-c8upj9tlob] {
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.45;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plist-meta[b-c8upj9tlob] {
    align-items: center;
}

.plist-konto[b-c8upj9tlob] {
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}
/* /Components/Personas/PersonasMask.razor.rz.scp.css */
/* 134 T021 — die Personas-Maske (Meister-Detail, Mockup Variante A).
   149 T029 (contracts/werkbank-ui.md §1, §3.2): Seitenkopf, Hinweisleiste,
   Werkbank, Liste und Detail kommen aus den Bausteinen der af-Familie in
   app.css (af-maske, af-page-head, af-werkbank, af-liste, af-detail); die
   eigene Kopf-, Werkzeug- und Split-Gestaltung sowie „Zurück zur Übersicht“
   sind entfallen. Hier steht nur der Zähler der Seitenfunktion
   „Modell wechseln …“. */

.pmask-bulk-n[b-tut9j0g5dm] {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
}
/* /Components/Personas/ReasoningLevelSelect.razor.rz.scp.css */
/* 069 (specs/069, T016): Reasoning-Level-Auswahl — kein eigenes Vokabular.
   Label-Behandlung wörtlich wie die Bestands-Feld-Label
   (.persona-editor-field label / .af-form-row label), Hinweis wie
   .af-form-hint, Breite der Auswahl wie .model-select-choice: dieselben
   Tokens, derselbe Rhythmus, damit das Steuerelement in allen drei
   Editoren wie ein geborenes Mitglied der Modell-Auswahlzeile wirkt. */

.reasoning-level-select[b-dtkjwa6i74] {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Feld-Modus (z. B. PersonaEditor): die Auswahl füllt die Zeile wie die
   Nachbar-Felder (.persona-editor-field select { width: 100% }). */
.reasoning-level-field[b-dtkjwa6i74] {
    display: flex;
    width: 100%;
}

.reasoning-level-label[b-dtkjwa6i74] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.reasoning-level-choice[b-dtkjwa6i74] {
    min-width: 10rem;
}

.reasoning-level-field .reasoning-level-choice[b-dtkjwa6i74] {
    width: 100%;
}

/* 069-Abnahme-Befund 2: der Hinweis hat KEIN eigenes Maß mehr — Größe,
   Farbe und Abstand kommen aus dem gemeinsamen Baustein .af-form-hint
   (app.css), den jetzt auch die Nachbar-Hinweise der Masken tragen. Vorher
   standen hier dieselben Werte ein zweites Mal, während die Nachbarn sich
   auf .model-select-hint stützten — eine Klasse, die nur im Scoped-CSS der
   ModelSelect-Komponente existiert und in den Masken deshalb nie wirkte. */
/* /Components/Projects/AnlageVerwaltung.razor.rz.scp.css */
/* 151 B6 (T017, FR-011, plan A7): die Anlage wohnt als Abschnitt „Anlage“
   in den Einstellungen — dieses Stylesheet ist UMGEZOGEN aus
   `ProjectSetupPage.razor.css`, nicht nachgebaut: gleiche Regeln, gleiche
   Klassennamen (an ihnen hängen Komponenten- UND E2E-Anker).

   f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep,
   Schritt-/Ereignis-Zustände in Signal-Farben auf dunkler Fläche. */

.project-setup-page[b-275j6o0rdm] {
    max-width: 64rem;
    margin: 0 auto;
}

/* 149 T034 (contracts §1.1 Batch 12): Suche und Zählung (af-tabellen-leiste,
   MaskenSuche, ListenFuß), Knöpfe (af-btn) und die Zustände (LadeZustand,
   FehlerKasten, LeerZustand) kommen aus der Werkbank-Familie in app.css.
   164 T016 (einstellungen-maske §2): der Fach-Reiter trägt die Ebene — der
   Titel ist ein Karten-Abschnittstitel der af-abschnitt-titel-Familie
   geworden; die eigene Titel-Regel ist mit ihm entfallen. */

.project-setup-status[b-275j6o0rdm],
.project-setup-history[b-275j6o0rdm],
.project-setup-accounts[b-275j6o0rdm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 1.25rem;
}

.project-setup-status h2[b-275j6o0rdm],
.project-setup-history h2[b-275j6o0rdm],
.project-setup-accounts h2[b-275j6o0rdm] {
    margin: 0;
    font-size: 15.5px;
}

.project-setup-steps[b-275j6o0rdm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.project-setup-step[b-275j6o0rdm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 13px;
}

.project-setup-step-succeeded[b-275j6o0rdm] {
    border-color: rgba(63, 206, 139, .45);
    background: rgba(63, 206, 139, .07);
}

.project-setup-step-failed[b-275j6o0rdm] {
    border-color: rgba(255, 92, 92, .45);
    background: rgba(255, 92, 92, .07);
}

.project-setup-step-running[b-275j6o0rdm] {
    border-color: rgba(108, 140, 255, .45);
    background: rgba(108, 140, 255, .07);
}

.project-setup-step-status[b-275j6o0rdm] {
    font-weight: 600;
}

.project-setup-step-detail[b-275j6o0rdm] {
    flex-basis: 100%;
    font-size: 12.5px;
    color: var(--red);
}

.project-setup-actions[b-275j6o0rdm] {
    display: flex;
    gap: 0.75rem;
}

.project-setup-continue:disabled[b-275j6o0rdm] {
    cursor: wait;
}

.project-setup-events[b-275j6o0rdm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.375rem;
}

.project-setup-event[b-275j6o0rdm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 6px 10px;
    border-left: 3px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 12.5px;
}

.project-setup-event-succeeded[b-275j6o0rdm] {
    border-left-color: var(--green);
}

.project-setup-event-failed[b-275j6o0rdm] {
    border-left-color: var(--red);
}

.project-setup-event-step[b-275j6o0rdm] {
    min-width: 12rem;
    font-weight: 600;
}

.project-setup-hint[b-275j6o0rdm] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-2);
}

.project-setup-filter[b-275j6o0rdm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-left: auto;
}

.project-setup-grid[b-275j6o0rdm] {
    width: 100%;
}

/* 162 Befund B-1 (SC-003/FR-029; Muster der Tabellen-Seiten ohne Detail —
   .einsatz-tabelle-hülle, .orga-tabelle-hülle; die Container-Hülle der
   125er-Fassung ist mit 165 B4 entfallen): sechs Spalten mit „Token
   ersetzen …“ passen auf kein schmales Fenster (gemessen 787 px Inhalt bei
   390/520 px). Statt den Inhalt zu weiten, rollt die Tabelle in ihrer
   eigenen Hülle; die Karte und die Seite bleiben fest. */
.project-setup-tabelle-hülle[b-275j6o0rdm] {
    overflow-x: auto;
}

/* Der Knopf bricht nicht in drei Zeilen um, wenn die Tabelle rollt. */
.project-setup-rotate[b-275j6o0rdm] {
    white-space: nowrap;
}

/* ===== 164 B5 (T019; einstellungen-maske §3/§5): die Prüfansicht der
   Gitea-Verbindung — additiv zum Bestand, Farben nur über Tokens (beide
   Themes aus einer Regel). Die Tabelle rollt weiter in ihrer eigenen Hülle;
   die Prüfspalten stapeln ihre Teile, damit auch der längste Team-Name ohne
   Überlauf steht (Lessons Scrollen/Text-Überlauf). ===== */

.gitea-fach-kopf[b-275j6o0rdm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.gitea-fach-kopf-rechts[b-275j6o0rdm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.gitea-prüfen[b-275j6o0rdm] {
    white-space: nowrap;
}

.gitea-prüfung-ungeprüft[b-275j6o0rdm] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-2);
}

.gitea-prüfung-lauf[b-275j6o0rdm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--tint-accent);
    font-size: 12.5px;
}

.gitea-prüfung-punkt[b-275j6o0rdm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 auto;
}

.gitea-prüfung-banner[b-275j6o0rdm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.gitea-prüfung-banner.ok[b-275j6o0rdm] {
    border-color: var(--green);
    background: var(--tint-green);
}

.gitea-prüfung-banner.warn[b-275j6o0rdm] {
    border-color: var(--yellow);
    background: var(--tint-yellow);
}

.gitea-prüfung-banner-text[b-275j6o0rdm] {
    min-width: 0;
}

.gitea-alle-reparieren[b-275j6o0rdm] {
    margin-left: auto;
    white-space: nowrap;
}

.gitea-zelle-rolle[b-275j6o0rdm],
.gitea-zelle-token[b-275j6o0rdm],
.gitea-zelle-team[b-275j6o0rdm] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gitea-zelle-soll[b-275j6o0rdm] {
    color: var(--green);
}

.gitea-zelle-abweichung[b-275j6o0rdm] {
    color: var(--yellow-text);
}

.gitea-zelle-ohne[b-275j6o0rdm] {
    color: var(--text-2);
}

.gitea-zelle-grund[b-275j6o0rdm] {
    font-size: 11.5px;
    color: var(--text-2);
}

.gitea-zelle-grund.gefahr[b-275j6o0rdm] {
    color: var(--red-text);
}

.gitea-befund-reparieren[b-275j6o0rdm] {
    white-space: nowrap;
}

/* 164 Nacharbeit (Bescheid 2026-10-05): Block „Teams und Repositories“ unter
   der Konto-Tabelle — dieselbe Tabellen- und Zellen-Sprache (af-table,
   gitea-zelle-*), kein neues Muster. Abgesetzt durch eine Trennlinie im
   selben Fach; lange Team- und Repository-Namen brechen in ihrer Zelle um,
   statt die Tabelle zu weiten. */
.gitea-team-befunde[b-275j6o0rdm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.gitea-team-befunde-kopf[b-275j6o0rdm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gitea-team-befunde-kopf h3[b-275j6o0rdm] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.gitea-team-befund-bezug[b-275j6o0rdm] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 12rem;
    max-width: 28rem;
}

.gitea-bezug-art[b-275j6o0rdm] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.gitea-bezug-name[b-275j6o0rdm] {
    overflow-wrap: anywhere;
}

.gitea-bezug-zusatz[b-275j6o0rdm] {
    font-size: 11.5px;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.gitea-team-befund-aktion[b-275j6o0rdm] {
    width: 1%;
    text-align: right;
}
/* /Components/Projects/BetriebslageHeader.razor.rz.scp.css */
/* 076 T010 (US1) — Lagezeile „Betriebslage zuerst".

   Gestaltungs-Gedanke: Diese Zeile ist kein Kasten unter vielen, sondern die
   erste Antwort der Seite. Sie bekommt darum genau drei Mittel, und mehr
   nicht: einen farbigen Streifen links, der den Zustand trägt, einen
   ruhigen Grundton, der sich bei Pause mitverfärbt, und Kopf und Marke,
   die Name und Zustand zusammenlesen.

   150 Batch 5 (FR-040): die Regeln der Chip-Reihe sind mit den fünf
   Lage-Angaben entfallen — die Zahlen wohnen an der Kennzahlen-Spalte und
   der Hosts-Fläche.

   Die Farbe ist das Signal, nicht die Dekoration: grün heißt, es wird
   verteilt; gelb heißt, es wird nicht verteilt. Alles Übrige bleibt bewusst
   leise. */

.lage[b-4iobtoubbd] {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 16px 20px 15px 22px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Der Streifen links IST der Zustand — er wechselt die Farbe, nicht die
   Form; so bleibt die Zeile beim Umschalten ruhig an ihrem Platz. */
.lage[b-4iobtoubbd]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--green);
    transition: background .25s ease;
}

.lage-pausiert[b-4iobtoubbd]::before {
    background: var(--yellow);
}

/* Bei Pause legt sich ein warmer Hauch über die linke Seite der Zeile —
   erkennbar, ohne laut zu sein. */
.lage-pausiert[b-4iobtoubbd] {
    background: linear-gradient(90deg, rgba(255, 176, 32, .07), transparent 55%), var(--bg-2);
}

/* ===== Kopf: Name, Marke, Untertitel, Schalter ===== */

/* 149 Batch 13b (T037): der Kopf ist der MaskenKopf (.af-page-head aus
   app.css — Flex-Zeile, Titel links, Aktionen rechts, auch beim Umbruch).
   In der Karte entfällt sein Abstand nach unten; die h1 trägt Name und
   Marke in einer Zeile wie bisher. Die Elemente rendert der Baustein, darum
   ::deep; Name, Kennzeichnung und Marke sind Inhalt DIESER Komponente und
   behalten ihre Regeln. */
.lage[b-4iobtoubbd]  .lage-kopf {
    margin-bottom: 0;
}

.lage[b-4iobtoubbd]  .lage-titel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.lage-name[b-4iobtoubbd] {
    overflow-wrap: anywhere;
}

/* Die Kennzeichnung des Lebenszyklus zieht mit dem Namen um (f14) und
   behält ihr Aussehen: klein, gelb, direkt am Namen. */
.lifecycle-badge[b-4iobtoubbd] {
    color: var(--yellow);
    font-size: 0.75em;
    font-weight: 600;
}

/* Zustandsmarke: eine Pille auf dem eigenen Farbton — sie steht in der
   Titelzeile, weil Name und Zustand zusammen gelesen werden. */
.lage-marke[b-4iobtoubbd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid rgba(63, 206, 139, .35);
    background: rgba(63, 206, 139, .14);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.lage-pausiert .lage-marke[b-4iobtoubbd] {
    border-color: rgba(255, 176, 32, .4);
    background: rgba(255, 176, 32, .14);
    color: var(--yellow-text);
}

.lage-marke-punkt[b-4iobtoubbd] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 999px;
    background: currentColor;
}

/* Der Punkt atmet, solange verteilt wird — das ist die einzige Bewegung der
   Zeile, und sie sagt etwas: hier läuft etwas. Steht die Verteilung, steht
   auch der Punkt. */
.lage-verteilt .lage-marke-punkt[b-4iobtoubbd] {
    animation: lage-puls-b-4iobtoubbd 2.4s ease-in-out infinite;
}

@keyframes lage-puls-b-4iobtoubbd {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(63, 206, 139, .5);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 0 5px rgba(63, 206, 139, 0);
        opacity: .65;
    }
}

.lage[b-4iobtoubbd]  .lage-kopf .af-page-sub {
    margin-top: 5px;
}

/* 149 Batch 13b: der Schalter ist ein Knopf der Familie (af-btn af-btn-sm)
   im Aktionen-Slot des Kopfs — die eigenen Regeln für .lage-aktion und
   .lage-pause-toggle sind entfallen. */

/* 076 T030/T031: Wer nur liest, bekommt an derselben Stelle den Grund statt
   des Schalters — leise und rechtsbündig, damit die Zeile ihre Form behält
   und nicht auffällig „etwas fehlt". Der Wortlaut ist wortwörtlich der der
   abgelösten Bestands-Zeile. */
.lage-readonly-hint[b-4iobtoubbd] {
    max-width: 30ch;
    margin: 2px 0 0;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.4;
    text-align: right;
}

@media (max-width: 760px) {
    .lage-readonly-hint[b-4iobtoubbd] {
        max-width: none;
        text-align: left;
    }
}

/* ===== Rückfrage: erst fragen, dann tun =====
   149 Batch 13b (T037, FR-007): die Rückfrage ist der BestätigungsDialog
   (.af-modal aus app.css) — die Regeln der Zeile in der Karte sind mit ihr
   entfallen. */

/* Wer Bewegung abgestellt hat, bekommt dieselbe Zeile — nur still. */
@media (prefers-reduced-motion: reduce) {
    .lage-verteilt .lage-marke-punkt[b-4iobtoubbd] {
        animation: none;
    }
}
/* /Components/Projects/HostsPanel.razor.rz.scp.css */
/* 076 T029 (US5) — Hosts in der rechten Spalte, unter den Repositories.

   Gestaltungs-Gedanke: Die beiden Flächen der rechten Spalte sind
   Geschwister und sollen auch so aussehen — gleiche Kastenform, gleicher
   Titel-Rhythmus, gleicher Aufklapp, gleiches Öffnen-Zeichen am Zeilenrand.
   Wer die Repositories bedienen kann, kann die Hosts bedienen, ohne
   umzulernen.

   Der Unterschied liegt im Signal: ein Host hat einen Zustand, ein
   Repository nicht. Darum trägt jede Zeile links einen schmalen
   Zustandsbalken und das Statuswort seine Farbe — grün erreichbar, rot
   Ausfall, grau keine Daten. Das ist dieselbe Farblesart wie in der
   Lagezeile darüber; eine zweite Ampel-Sprache wäre eine Zumutung. */

.hosts-panel[b-lsircpemxi] {
    margin-top: 14px;
    padding: 14px 16px 15px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.hosts-titel[b-lsircpemxi] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 14px;
}

/* Die Quote sitzt im selben Schild wie der Repository-Zähler nebenan —
   sie ist Beiwerk, kein Titel. */
.hosts-zahl[b-lsircpemxi] {
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
}

/* Der Satz, der die Doppelung zur Lagezeile als Absicht ausweist: oben die
   Übersicht, hier das Detail. Ohne ihn läse sich dieselbe Zahl an zwei
   Stellen wie ein Versehen. */
.hosts-bezug[b-lsircpemxi] {
    margin: 0 0 10px;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.4;
}

.host-status-list[b-lsircpemxi] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Jede Zeile ein eigener Streifen: der Zustandsbalken links steht genau
   dort, wo auch die Lagezeile ihren Streifen hat — dieselbe Sprache. */
.host-status-item[b-lsircpemxi] {
    position: relative;
    padding-left: 10px;
    border-bottom: 1px solid var(--border);
}

.host-status-item:last-child[b-lsircpemxi] {
    border-bottom: none;
}

.host-status-item[b-lsircpemxi]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--text-3);
}

.host-status-item[data-host-status="reachable"][b-lsircpemxi]::before {
    background: var(--green);
}

.host-status-item[data-host-status="unreachable"][b-lsircpemxi]::before {
    background: var(--red);
}

.host-kopf[b-lsircpemxi] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Die ganze Namenszeile ist der Schalter — Button-Grundform zurückgesetzt,
   damit sie wie eine Zeile aussieht und sich wie ein Knopf verhält
   (Geschwisterform der Repository-Zeile). */
.host-schalter[b-lsircpemxi] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 2px;
    border: none;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.host-schalter:hover[b-lsircpemxi] {
    filter: none;
    background: none;
}

.host-status-item:hover[b-lsircpemxi] {
    background: var(--bg-3);
}

.host-pfeil[b-lsircpemxi] {
    flex: none;
    color: var(--text-3);
    font-size: 9px;
    transition: transform .15s ease;
}

.host-pfeil.offen[b-lsircpemxi] {
    transform: rotate(90deg);
    color: var(--accent);
}

/* Der Name ist die Kennung der Maschine — Monoschrift wie der
   Repository-Name, und er bricht um statt abzureißen. */
.host-name[b-lsircpemxi] {
    min-width: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Das Statuswort steht rechts am Namen und trägt die Farbe — es ist die
   Auskunft, die man im Vorbeigehen braucht. */
.host-status-state[b-lsircpemxi] {
    flex: none;
    margin-left: auto;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.host-status-item[data-host-status="reachable"] .host-status-state[b-lsircpemxi] {
    color: var(--green);
}

.host-status-item[data-host-status="unreachable"] .host-status-state[b-lsircpemxi] {
    color: var(--red);
}

/* Der Weg ins Host-Detail: dasselbe Zeichen an derselben Stelle wie bei den
   Repositories — ein Griff, zwei Flächen, keine neue Bedienung. */
.host-weg[b-lsircpemxi] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 5px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: color .12s, border-color .12s, background .12s;
}

.host-weg:hover[b-lsircpemxi] {
    border-color: var(--border-light);
    background: var(--bg-4);
    color: var(--accent-2);
    text-decoration: none;
}

/* ===== Der Aufklapp ===== */

.host-detail[b-lsircpemxi] {
    padding: 0 0 12px 17px;
    color: var(--text-2);
    font-size: 12px;
    animation: host-detail-auf-b-lsircpemxi .16s ease-out;
}

@keyframes host-detail-auf-b-lsircpemxi {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.host-zeile[b-lsircpemxi] {
    display: flex;
    gap: 8px;
    padding: 2px 0;
}

.host-schild[b-lsircpemxi] {
    flex: none;
    min-width: 92px;
    color: var(--text-3);
}

/* Die ehrliche Auskunft statt einer erfundenen Zahl — EINMAL unter der
   Liste, nicht in jeder Zeile: sie gilt für alle Hosts gleich. Sie steht
   leiser als eine Messung, weil sie keine ist. */
.hosts-container-hinweis[b-lsircpemxi] {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.45;
}

/* Die beiden Fußnoten der Fläche teilen sich eine Kante und einen Ton —
   beides sind Auskünfte ÜBER die Liste, keine Angaben IN ihr. */
.hosts-ohne-weg[b-lsircpemxi] {
    margin: 5px 0 0;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    .host-detail[b-lsircpemxi] {
        animation: none;
    }

    .host-pfeil[b-lsircpemxi] {
        transition: none;
    }
}
/* /Components/Projects/KennzahlenSpalte.razor.rz.scp.css */
/* 076 T027 (US4) — die Kennzahlen in EINER Kachelform.

   Umgezogen aus `ProjectOverviewPage.razor.css` (f13/f16/f18/f25) und an
   genau EINER Stelle geändert: die Kacheltexte stehen jetzt LINKSBÜNDIG.

   Warum: Kachelraster liest man spaltenweise von oben nach unten. Zentrierte
   Texte geben dem Auge keine gemeinsame Kante — jede Zeile beginnt woanders,
   und bei unterschiedlich langen Bezeichnern wirkt das Raster unruhig, obwohl
   die Kacheln exakt gleich groß sind. Genau das war die Rüge im Review
   („gemischte Ausrichtungen"). Eine Form, eine Kante, links.

   ABGELÖSTE LESART (datiert): 062 T022 (US5, FR-003) hatte alle Kacheltexte
   ausdrücklich ZENTRIERT. Diese Regel gilt für die Organisations-Kacheln
   nicht mehr (Review-Entscheid 2026-09-14). Die globale Dashboard-Seite hat
   ihre eigene Klassenwelt (`dashboard-figure`) und bleibt unberührt. */

.dashboard-section[b-4m5rp8yqet] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.dashboard-header[b-4m5rp8yqet] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-header h2[b-4m5rp8yqet] {
    margin: 0 0 0.5rem;
    font-size: 14px;
}

/* Die drei Gruppen: Überschrift, dann das Raster. Die Überschrift ist leise
   — sie ordnet, sie ruft nicht. */
.dashboard-tile-group h3[b-4m5rp8yqet] {
    margin: 0.75rem 0 0.5rem;
    font-size: 13.5px;
    color: var(--text);
}

/* Spaltenbreite wie in der Gestaltungs-Referenz (168px): die Gruppe
   „Abschlüsse und Dauer" trägt FÜNF Kacheln, und bei 185px brach die fünfte
   in eine eigene Zeile und ließ daneben ein Loch (Sichtprobe 2026-09-14).
   Mit 168px passen die fünf in eine Reihe, sobald der Platz da ist — und
   umbrechen tun sie weiterhin von selbst, wenn er fehlt. */
.dashboard-tile-grid[b-4m5rp8yqet] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 13px;
}

/* EINE Kachelform für alle drei Gruppen — Bezeichner, Großwert, Unterzeile,
   alles an derselben linken Kante. Die Regel sitzt an der Kachel und gilt
   damit für div- UND Button-Kacheln gleichermaßen. */
.dashboard-tile[b-4m5rp8yqet] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
    transition: transform .15s, border-color .15s;
}

/* BEFUND 128 (2026-09-20): die aufgabenbezogenen Kacheln sind Anker
   (`<a href>`, Nachzug des 125-Beschlusses) — die Optik der Div-Kachel
   bleibt exakt erhalten (Reset der Anker-Grundform: keine Unterstreichung,
   keine eigene Farbe), nur der Zeiger und das Anheben beim Überfahren
   verraten, dass sie ein Ziel haben. `text-align: left` steht hier
   ausdrücklich: eine globale Anker-Regel könnte sonst dazwischenreden. */
a.dashboard-tile[b-4m5rp8yqet] {
    width: 100%;
    font: inherit;
    color: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

a.dashboard-tile:hover[b-4m5rp8yqet] {
    transform: translateY(-1px);
    border-color: var(--accent-2);
    filter: none;
    background: var(--bg-2);
}

.dashboard-tile:hover[b-4m5rp8yqet] {
    transform: translateY(-2px);
    border-color: var(--border-light);
}

/* Der Bezeichner bekommt Platz für ZWEI Zeilen — auch wenn er nur eine
   braucht. „Ø aktive Bearbeitungszeit" ist länger als „Heute", und ohne
   diese gemeinsame Höhe rutschte sein Großwert gegenüber den Nachbarn nach
   unten: die Zahlen einer Reihe standen nicht mehr auf einer Linie
   (Sichtprobe 2026-09-14). Eine Kachelform heißt auch eine Grundlinie. */
.dashboard-tile-label[b-4m5rp8yqet] {
    display: flex;
    align-items: flex-start;
    min-height: 2.3em;
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.dashboard-tile-value[b-4m5rp8yqet] {
    margin-top: 5px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* Leerwert-Ersatztexte („keine abgeschlossenen Messungen") in der
   Großwert-Typografie brachen mitten im Wort — ruhig und klein, Umbruch nur
   an Leerzeichen (QA-Befund C, unverändert übernommen). */
.dashboard-tile-value-empty[b-4m5rp8yqet] {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-2);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.dashboard-tile-sub[b-4m5rp8yqet] {
    margin-top: 4px;
    color: var(--text-3);
    font-size: 11.5px;
}

/* Akzentklassen: die Farbe wirkt auf Wert und Rahmen — rein darstellend,
   keine neue Kennzahl. Eine 0 bekommt keinen Akzent: sie ist eine ruhige
   Auskunft, kein Alarm (A6). */
.dashboard-tile.accent-red[b-4m5rp8yqet] {
    border-color: rgba(255, 92, 92, 0.45);
}

.dashboard-tile.accent-red .dashboard-tile-value[b-4m5rp8yqet] {
    color: var(--red);
}

.dashboard-tile.accent-green .dashboard-tile-value[b-4m5rp8yqet] {
    color: var(--green);
}

.dashboard-tile.accent-yellow[b-4m5rp8yqet] {
    border-color: rgba(255, 176, 32, 0.45);
}

.dashboard-tile.accent-yellow .dashboard-tile-value[b-4m5rp8yqet] {
    color: var(--yellow);
}

.dashboard-tile.accent-blue .dashboard-tile-value[b-4m5rp8yqet] {
    color: var(--accent-2);
}

/* 149 Batch 13b: der Fehler ist der FehlerKasten (app.css). */

@media (prefers-reduced-motion: reduce) {
    .dashboard-tile[b-4m5rp8yqet],
    a.dashboard-tile[b-4m5rp8yqet] {
        transition: none;
    }

    .dashboard-tile:hover[b-4m5rp8yqet],
    a.dashboard-tile:hover[b-4m5rp8yqet] {
        transform: none;
    }
}
/* /Components/Projects/RepositoriesPanel.razor.rz.scp.css */
/* 076 T018 (US2) — Repositories in der rechten Spalte.

   Gestaltungs-Gedanke: Die Spalte ist schmal, also bekommt jede Zeile nur
   das, was man im Vorbeigehen braucht — den Namen, die Art und den Weg ins
   Code-Hosting. Alles Weitere (Datum, Herkunft, Klon-Adresse) liegt im
   Aufklapp und stört vorher niemanden.

   Der Name steht in der Monoschrift, weil er im Code-Hosting genau so
   heißt; die Art steht als ruhiges Schild rechts daneben und macht die
   Anforderungs-Zeile ohne Farbspiel unterscheidbar. */

.repos-panel[b-vxebybmmx0] {
    padding: 14px 16px 15px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.repos-titel[b-vxebybmmx0] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
}

/* Der Zähler ist Beiwerk, kein Titel — er trägt die Zahl, nicht das Gewicht. */
.repos-zahl[b-vxebybmmx0] {
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
}

.repos-suche[b-vxebybmmx0] {
    display: block;
    width: 100%;
    margin-bottom: 9px;
    padding: 6px 10px;
    font-size: 12.5px;
}

.repos-filter[b-vxebybmmx0] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

/* Die Art-Filter sind Pillen, keine Knöpfe im Formularsinn: sie schalten
   eine Sicht um, sie lösen nichts aus. 149 Batch 13b (T037): sie sind die
   Chips der Familie (af-chip / af-chip-an aus app.css) — die eigene Kopie
   derselben Werte ist entfallen. */

.repos-leer[b-vxebybmmx0] {
    margin: 12px 0 2px;
    padding: 14px 8px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-size: 12.5px;
    text-align: center;
}

/* ===== Die Liste ===== */

/* Feste Tabellenbreite: die Spalte ist schmal, und eine lange Klon-Adresse
   darf die Liste nicht aus ihr herausschieben. Alles, was nicht in eine
   Zeile passt, bricht um — abgeschnitten wird nichts, denn ein halber
   Repository-Name oder eine halbe Adresse ist wertlos. */
.repos-grid[b-vxebybmmx0] {
    width: 100%;
    margin-top: 6px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12.5px;
}

/* Die Kopfzeile bleibt ganz leise: in einer schmalen Spalte zählt die
   Liste, nicht ihre Beschriftung. */
.repos-grid[b-vxebybmmx0]  th {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-align: left;
}

/* Die zweite Spalte („Öffnen") trägt nur ein Zeichen — sie bekommt genau so
   viel Platz, wie ihre Überschrift braucht (die soll lesbar bleiben, nicht
   am Rand abreißen); der Rest gehört der Liste. */
.repos-grid[b-vxebybmmx0]  th:last-child,
.repos-grid[b-vxebybmmx0]  td:last-child {
    width: 54px;
    text-align: right;
}

.repos-grid[b-vxebybmmx0]  td {
    padding: 2px 6px 2px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.repos-grid[b-vxebybmmx0]  tr:last-child td {
    border-bottom: none;
}

.repos-grid[b-vxebybmmx0]  tr:hover td {
    background: var(--bg-3);
}

/* Die ganze Namenszeile ist der Schalter — Button-Grundform zurückgesetzt,
   damit sie wie eine Zeile aussieht und sich wie ein Knopf verhält. */
.repo-kopf[b-vxebybmmx0] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 9px 2px;
    border: none;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.repo-kopf:hover[b-vxebybmmx0] {
    filter: none;
    background: none;
}

.repo-pfeil[b-vxebybmmx0] {
    flex: none;
    color: var(--text-3);
    font-size: 9px;
    transition: transform .15s ease;
}

.repo-pfeil.offen[b-vxebybmmx0] {
    transform: rotate(90deg);
    color: var(--accent);
}

/* Der Name bricht um, statt abgeschnitten zu werden: er ist die Kennung im
   Code-Hosting — eine halbe Kennung nützt niemandem. */
.repo-name[b-vxebybmmx0] {
    min-width: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Die Art als ruhiges Schild rechts am Namen: Anforderungen tragen den
   Akzent, weil es sie je Organisation genau einmal gibt — Umsetzung ist der
   Normalfall und bleibt grau. */
.repo-art[b-vxebybmmx0] {
    flex: none;
    margin-left: auto;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.repo-art-requirements[b-vxebybmmx0] {
    border-color: rgba(108, 140, 255, .35);
    background: rgba(108, 140, 255, .12);
    color: var(--accent);
}

/* Der Weg ins Code-Hosting: ein Zeichen, groß genug zum Treffen, ruhig
   genug, um die Zeile nicht zu beherrschen. */
/* 147 T015: der Weg in die Fläche „Anforderungen“ an der Anforderungs-
   Zeile — eine ruhige Textzeile unter dem Namen, immer sichtbar (nicht erst
   im Aufklapp), eingerückt auf die Namensspalte. */
.repo-in-app[b-vxebybmmx0] {
    display: inline-block;
    margin: -4px 0 8px 18px;
    color: var(--accent-2);
    font-size: 12px;
    text-decoration: none;
}

.repo-in-app:hover[b-vxebybmmx0] {
    text-decoration: underline;
}

.repo-öffnen[b-vxebybmmx0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: color .12s, border-color .12s, background .12s;
}

.repo-öffnen:hover[b-vxebybmmx0] {
    border-color: var(--border-light);
    background: var(--bg-4);
    color: var(--accent-2);
    text-decoration: none;
}

/* ===== Der Aufklapp ===== */

.repo-detail[b-vxebybmmx0] {
    padding: 0 0 12px 17px;
    color: var(--text-2);
    font-size: 12px;
    animation: repo-detail-auf-b-vxebybmmx0 .16s ease-out;
}

@keyframes repo-detail-auf-b-vxebybmmx0 {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.repo-zeile[b-vxebybmmx0] {
    display: flex;
    gap: 8px;
    padding: 2px 0;
}

.repo-schild[b-vxebybmmx0] {
    flex: none;
    min-width: 68px;
    color: var(--text-3);
}

.repo-herkunft[b-vxebybmmx0] {
    min-width: 0;
}

/* Die Lauf-Kennung steht vollständig da und darf umbrechen — abgeschnitten
   wäre sie zum Nachschlagen wertlos. */
.repo-lauf[b-vxebybmmx0] {
    font-family: var(--mono);
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* Die Klon-Adresse in ihrem eigenen Kasten: sie ist zum Mitnehmen da, nicht
   zum Lesen — darum steht der Knopf direkt daneben. */
/* Adresse oben über die volle Breite, Knopf darunter rechts: in einer
   schmalen Spalte nebeneinander bliebe der Adresse zu wenig Platz, und sie
   bräche in viel zu viele Stücke. */
.repo-url[b-vxebybmmx0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
}

/* Die Adresse steht vollständig da und bricht um — gekürzt könnte man sie
   nicht mehr prüfen, und geprüft wird sie genau hier. */
.repo-url code[b-vxebybmmx0] {
    flex: 1 1 100%;
    min-width: 0;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* 149 Batch 13b: ein Knopf der Familie (af-btn af-btn-sm); hier steht nur
   noch sein Platz in der Adresszeile. */
.repo-kopieren[b-vxebybmmx0] {
    flex: none;
    margin-left: auto;
}

/* „Kopiert" bleibt kurz stehen — die Rückmeldung sitzt dort, wo die Hand
   gerade war, zusätzlich zum Toast. */
.repo-kopieren.fertig[b-vxebybmmx0] {
    border-color: rgba(63, 206, 139, .45);
    background: rgba(63, 206, 139, .16);
    color: var(--green);
}

/* Der ehrliche Entfall: kein Kasten, kein Knopf, kein Link — ein Satz, der
   sagt, woran es liegt. */
.repo-ohne-adresse[b-vxebybmmx0] {
    margin: 8px 0 0;
    color: var(--text-3);
    font-size: 11.5px;
}

@media (prefers-reduced-motion: reduce) {
    .repo-detail[b-vxebybmmx0] {
        animation: none;
    }

    .repo-pfeil[b-vxebybmmx0] {
        transition: none;
    }
}
/* /Components/Projects/TokenVerbrauchPanel.razor.rz.scp.css */
/* 076 T023 (US3) — Token-Verbrauch mit vier Gruppierungen.

   Gestaltungs-Gedanke: Eine Zahl groß, die Aufschlüsselung ruhig darunter
   (Mockup 1). Der Umschalter sitzt direkt neben dem Titel, damit sofort
   sichtbar ist, WORÜBER die große Zahl spricht — er steht als geschlossene
   Leiste da, nicht als vier lose Knöpfe: vier Stellungen EINES Schalters,
   von denen immer genau eine gilt.

   Alle Farben über die Theme-Tokens, hell und dunkel gleichermaßen. */

.verbrauch-panel[b-fiv4dpt60p] {
    margin-top: 1.1rem;
    padding: 15px 18px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ===== Kopf: Titel, Umschalter, Suche ===== */

.verbrauch-kopf[b-fiv4dpt60p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.verbrauch-titel[b-fiv4dpt60p] {
    margin: 0;
    font-size: 14px;
}

/* Die Leiste ist eine Rille, in der die aktive Stellung als erhobene Fläche
   liegt — so liest man die Wahl auch ohne Farbe. */
/* 149 Batch 13b (T037): der Umschalter ist der Segment-Schalter der
   Familie (af-segmente / af-segment / af-segment-an aus app.css) — die
   eigene Kopie derselben Form ist entfallen. */

/* Suche und Entfall-Satz sitzen an derselben Stelle — beim Umschalten
   springt darum nichts, es wechselt nur, was dort steht. */
.verbrauch-suche[b-fiv4dpt60p],
.verbrauch-suche-entfall[b-fiv4dpt60p] {
    margin-left: auto;
}

.verbrauch-suche[b-fiv4dpt60p] {
    width: 190px;
    padding: 6px 10px;
    font-size: 12.5px;
}

.verbrauch-suche-entfall[b-fiv4dpt60p] {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 21rem;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.4;
    text-align: right;
}

/* ===== Die große Zahl ===== */

.verbrauch-kachel[b-fiv4dpt60p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding: 11px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}

.verbrauch-kachel-label[b-fiv4dpt60p] {
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.verbrauch-gesamt-wert[b-fiv4dpt60p] {
    color: var(--text);
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.verbrauch-kachel-sub[b-fiv4dpt60p] {
    color: var(--text-3);
    font-size: 11.5px;
}

/* ===== Tabelle ===== */

/* Sieben Zahlenspalten passen nicht in jedes Fenster — statt zu schrumpfen
   bis zur Unlesbarkeit darf die Tabelle hier waagerecht laufen. */
.verbrauch-tabelle-hülle[b-fiv4dpt60p] {
    overflow-x: auto;
}

.verbrauch-grid[b-fiv4dpt60p] {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 12.5px;
}

.verbrauch-grid[b-fiv4dpt60p]  th {
    padding: 8px 12px;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    text-align: left;
    white-space: nowrap;
}

.verbrauch-grid[b-fiv4dpt60p]  td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.verbrauch-grid[b-fiv4dpt60p]  tr:last-child td {
    border-bottom: none;
}

.verbrauch-grid[b-fiv4dpt60p]  tr:hover td {
    background: var(--bg-3);
}

/* Zahlen rechtsbündig und mit gleich breiten Ziffern: untereinander
   vergleichbar, ohne dass man nachzählen muss. */
.verbrauch-grid[b-fiv4dpt60p]  th:not(:first-child),
.verbrauch-grid[b-fiv4dpt60p]  td:not(:first-child) {
    text-align: right;
}

.verbrauch-zahl[b-fiv4dpt60p] {
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    white-space: nowrap;
}

/* Die Gesamt-Spalten sind die, auf die man schaut — sie tragen die
   Textfarbe, die Teilspalten treten zurück. */
.verbrauch-zahl-stark[b-fiv4dpt60p] {
    color: var(--text);
    font-weight: 600;
}

.verbrauch-modell[b-fiv4dpt60p] {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* ===== Personas ===== */

/* Die Namensspalte bekommt in der Personas-Sicht den Platz — dort stehen
   nur vier Spalten, und der Name ist die Aussage. */
.verbrauch-grid-personas[b-fiv4dpt60p]  td:first-child,
.verbrauch-grid-personas[b-fiv4dpt60p]  th:first-child {
    width: 46%;
}

.verbrauch-persona[b-fiv4dpt60p] {
    display: block;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Die Restgruppe ist kein Fehler, sondern eine ehrliche Auskunft — sie steht
   ruhig da, nicht als Warnung. */
.verbrauch-persona-rest[b-fiv4dpt60p] {
    color: var(--text-3);
    font-style: italic;
    font-weight: 500;
}

/* Der Balken hält Abstand zum Namen: sitzt er zu dicht darunter, liest er
   sich als Unterstreichung statt als Anteil (Sichtprobe 2026-09-14). */
.verbrauch-anteil[b-fiv4dpt60p] {
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 9px;
    background: var(--bg-3);
    border-radius: 999px;
    overflow: hidden;
}

.verbrauch-anteil-balken[b-fiv4dpt60p] {
    display: block;
    height: 100%;
    min-width: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    transition: width .2s ease;
}

/* ===== Leerhinweise und Fußnote ===== */

.verbrauch-leer[b-fiv4dpt60p] {
    margin: 2px 0 0;
    padding: 16px 8px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-size: 12.5px;
    text-align: center;
}

.verbrauch-fußnote[b-fiv4dpt60p] {
    margin: 10px 0 0;
    padding-left: 16px;
    position: relative;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.5;
}

/* Ein kleines Zeichen statt einer Warnfarbe: der Satz erklärt eine Grenze,
   er meldet keinen Fehler. */
.verbrauch-fußnote[b-fiv4dpt60p]::before {
    content: "†";
    position: absolute;
    left: 2px;
    color: var(--text-3);
}

@media (max-width: 860px) {
    .verbrauch-suche[b-fiv4dpt60p],
    .verbrauch-suche-entfall[b-fiv4dpt60p] {
        margin-left: 0;
        width: 100%;
        max-width: none;
        text-align: left;
    }

    /* 162 B6 (T025/T026, SC-003): Befund der Breiten-Probe — auf der
       Organisations-Übersicht rollte der Inhalt bei 390 und 520 px
       waagerecht (Ist: 529 px Inhalt, die vier Segmente stehen 484 px
       breit in einer Zeile). Bei schmalem Fenster brechen die Segmente um,
       statt die Seite zu verbreitern. */
    .verbrauch-schalter[b-fiv4dpt60p] {
        flex-wrap: wrap;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .verbrauch-anteil-balken[b-fiv4dpt60p],
    .verbrauch-schalter button[b-fiv4dpt60p] {
        transition: none;
    }
}
/* /Components/Projects/VerwaltungFooter.razor.rz.scp.css */
/* 076 T031 (US5) — die Verwaltung im Fach Verwaltung.

   Gestaltungs-Gedanke: Verwaltung ist das Gegenteil von Betriebslage. Oben
   steht, was gerade passiert; hier steht, was man selten tut und dann
   sicher finden will — archivieren, löschen. Das darf nicht mitreden,
   solange man nur nachsieht, wie der Betrieb läuft.

   Drei Mittel, mehr nicht: eine deutliche Kante, die den Fach vom Rest der
   Seite trennt, ein zurückgenommener Grundton (kein eigener Kasten, kein
   zweiter Rahmen — die Verwaltung IST die Fläche), und ein Titel in der
   stillen Kapitälchen-Schrift des Hauses, der ansagt, dass hier ein anderer
   Raum beginnt — seit 164 T016 als Karten-Abschnittstitel der
   af-abschnitt-titel-Familie, der Fach-Reiter trägt die Ebene.

   Die Priorität ist 164 T016 in das Fach Allgemein der Einstellungs-Seite
   UMGEZOGEN (einstellungen-maske §2) — ihre Regeln reisen mit dem Block.

   ACHTUNG (Umzug, nicht Umbau): Alle `lifecycle-*`-, `deletion-*`- und
   `force-*`-Regeln sind wortwörtlich aus `ProjectOverviewPage.razor.css`
   hierher gewandert — Scoped CSS der Seite greift nicht in eine
   Kindkomponente. Gleiche Selektoren, gleiche Werte; nur der Ort ist neu. */

.verwaltung[b-2weu0r902l] {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.verwaltung-raster[b-2weu0r902l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 32px;
    align-items: start;
}

/* ===== Lebenszyklus (f14 US1, T012) ===== */

/* Der Bestand trug hier eine eigene Trennkante nach oben. Die gehört jetzt
   dem Fuß als Ganzem — zwei Kanten übereinander wären eine zu viel. */
.lifecycle-section h2[b-2weu0r902l] {
    margin: 0 0 0.25rem;
    font-size: 14px;
}

.lifecycle-state[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    color: var(--text-2);
    font-size: 13px;
}

/* 149 Batch 13b (T037, FR-007): die Einstiege der Rückfragen sind Knöpfe
   der Familie in einer Zeile; die Rückfragen selbst öffnen als
   BestätigungsDialog. Ihre Hinweise stehen jetzt in der Nachricht des
   Dialogs und nehmen deren Schrift und Farbe an — der gelbe Ton der Zeile
   auf der Seite entfällt mit ihr. */
.lifecycle-section > .af-btn[b-2weu0r902l] {
    margin: 0 8px 0.5rem 0;
}

.lifecycle-confirm-hint[b-2weu0r902l] {
    margin: 0;
}

.lifecycle-readonly-hint[b-2weu0r902l] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

/* f14 US2 (T017): Löschantrag — Kennzeichnung, Dialog mit Pflicht-Grund. */
.lifecycle-request-mark[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    color: var(--red);
    font-size: 12.5px;
}

.lifecycle-request-hint[b-2weu0r902l] {
    margin: 0 0 12px;
    color: var(--red-text);
}

.lifecycle-request-reason-label[b-2weu0r902l] {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.lifecycle-request-reason[b-2weu0r902l] {
    display: block;
    width: 100%;
    max-width: 32rem;
    min-height: 4rem;
    margin-bottom: 0.5rem;
}

.lifecycle-request-error[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    color: var(--red);
    font-size: 12.5px;
}

/* f14 US3 (T022): Aufräum-Fortschritt — je Schritt Stand + deutsche Meldung. */
.deletion-progress[b-2weu0r902l] {
    margin-top: 0.75rem;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.deletion-progress h3[b-2weu0r902l] {
    margin: 0 0 0.25rem;
    font-size: 13.5px;
}

.deletion-progress-state[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    color: var(--text-2);
    font-size: 13px;
}

.deletion-progress-steps[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
    color: var(--text);
}

.deletion-step-detail[b-2weu0r902l] {
    color: var(--text-3);
    font-size: 12.5px;
}

/* ===== Force-Entfernung (068 T012) ===== */

/* Der ESZ-Weg als ruhiger, ernster Block: dieselbe Kastenform wie der
   Aufräum-Fortschritt (geborener Teil des Lösch-Bereichs), aber mit linkem
   Akzent in der Warnfarbe dieser Seite (gelb wie die Bestätigungs-Hinweise
   — Ernst ohne Panik-Ästhetik, kein Rot, keine Ampel). Die Bestätigung
   ist seit 149 Batch 13b der BestätigungsDialog (Hinweis, Reste,
   „Abbrechen | Per Force entfernen“, rot wie jeder unwiederbringliche
   Schritt, FR-007); Hinweis, Reste und Schlusssatz behalten ihre Regeln. */
.force-panel[b-2weu0r902l] {
    margin-top: 0.75rem;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--yellow);
    border-radius: var(--radius);
}

.force-panel h3[b-2weu0r902l] {
    margin: 0 0 0.25rem;
    font-size: 13.5px;
}

.force-panel-note[b-2weu0r902l],
.force-panel-hint[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    color: var(--text-2);
    font-size: 12.5px;
}

/* Die Reste-Liste wörtlich aus der Preview — lesbar, ruhig, jeder Rest eine
   eigene Zeile (A3: die Bestätigung benennt die Reste). */
.force-rests[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
    color: var(--text);
    font-size: 12.5px;
}

.force-rest + .force-rest[b-2weu0r902l] {
    margin-top: 3px;
}

.force-panel-final[b-2weu0r902l] {
    margin: 0 0 0.5rem;
    color: var(--yellow);
    font-size: 12.5px;
}
/* /Components/Prompts/PromptListe.razor.rz.scp.css */
/* 159 B9 T025 (spec.md Zone ④, F3): nur, was die Prompt-Liste von der
   Werkbank-Familie unterscheidet — Optik und Maße der Zeile (af-lz), des
   Gruppenkopfs (af-lg) und der Marken (af-badge) kommen aus app.css. */

/* Die Anzahl steht rechts im Gruppenkopf, in der Ziffernschrift der Zähler. */
.prompts-gruppe-n[b-oc73r67i6q] {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: 0;
}

/* Bausteine stehen eingerückt unter ihrem Haupttext (F3) — je Tiefe eine
   Stufe; ein Baustein ohne sichtbaren Haupttext steht oben (Tiefe 0). */
.prompts-gruppen[b-oc73r67i6q]  .prompts-zeile-baustein {
    margin-left: calc(var(--prompts-tiefe, 0) * 18px);
    width: calc(100% - var(--prompts-tiefe, 0) * 18px);
}
/* /Components/Prompts/PromptsMaske.razor.rz.scp.css */
/* 159 B9 (spec.md Zonen ⑥/⑦; contracts/prompts-maske.md §3/§4): nur, was die
   Maske „Prompts“ von der Werkbank-Familie unterscheidet — Kopf, Liste,
   Detail-Karte, Abschnitte, Marken, Segmente und Formular-Fuß kommen aus
   app.css. Hier: die zwei Spalten „Deine Fassung“ | „Werkstext“ (schmal
   untereinander, der Werkstext dann zuerst), die Platzhalter-Tabelle, der
   Editor und die Listen der Prüfung. */

.prompts-verwendung-text[b-ikuab5j9g1] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}

/* ── Platzhalter ── */
.prompts-platzhalter-tabelle[b-ikuab5j9g1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.prompts-platzhalter-tabelle th[b-ikuab5j9g1] {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    padding: 0 10px 6px 0;
    border-bottom: 1px solid var(--border);
}

.prompts-platzhalter-tabelle td[b-ikuab5j9g1] {
    vertical-align: top;
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    line-height: 1.45;
}

.prompts-platzhalter-tabelle td:first-child[b-ikuab5j9g1] {
    white-space: nowrap;
}

.prompts-platzhalter-tabelle code[b-ikuab5j9g1],
.prompts-pflichtzeilen code[b-ikuab5j9g1],
.prompts-platzhalter-kurz code[b-ikuab5j9g1] {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
}

.prompts-pflicht[b-ikuab5j9g1] {
    white-space: nowrap;
}

.prompts-beispiel[b-ikuab5j9g1],
.prompts-fester-wert[b-ikuab5j9g1] {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-3);
}

/* Feste Platzhalter (F12): nicht änderbare Werte, ruhig abgesetzt. */
.prompts-platzhalter-fest td[b-ikuab5j9g1] {
    background: var(--tint-grey);
}

.prompts-fest-hinweis[b-ikuab5j9g1] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.45;
}

.prompts-pflichtzeilen[b-ikuab5j9g1] {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-3);
}

.prompts-pflichtzeilen ul[b-ikuab5j9g1] {
    margin: 4px 0 0;
    padding-left: 18px;
}

.prompts-platzhalter-leer[b-ikuab5j9g1],
.prompts-befunde-leer[b-ikuab5j9g1] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-3);
}

.prompts-befunde-leer[b-ikuab5j9g1] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ── Wortlaut: zwei Spalten ── */
.prompts-spalten[b-ikuab5j9g1],
.prompts-editor-spalten[b-ikuab5j9g1] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Eine Spalte allein (ohne eigene Fassung) nimmt die ganze Breite. */
.prompts-spalte[b-ikuab5j9g1] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.prompts-spalte-kopf[b-ikuab5j9g1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.prompts-spalte-titel[b-ikuab5j9g1] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.prompts-spalte-meta[b-ikuab5j9g1] {
    font-size: 11.5px;
    color: var(--text-3);
}

/* Schmal untereinander — der Werkstext zuerst (contracts §3). */
@media (max-width: 1350px) {
    .prompts-spalten[b-ikuab5j9g1],
    .prompts-editor-spalten[b-ikuab5j9g1] {
        flex-direction: column;
        align-items: stretch;
    }

    .prompts-spalten .prompts-spalte-werkstext[b-ikuab5j9g1] {
        order: -1;
    }
}

/* ── Bearbeiten ── */
.prompts-editor-spalten[b-ikuab5j9g1] {
    padding-top: 14px;
}

.prompts-editor[b-ikuab5j9g1] {
    width: 100%;
    min-height: 320px;
    resize: vertical;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    tab-size: 4;
}

.prompts-platzhalter-kurz[b-ikuab5j9g1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
}

.prompts-platzhalter-art[b-ikuab5j9g1] {
    margin-left: 4px;
    color: var(--text-3);
}

.prompts-befunde[b-ikuab5j9g1],
.prompts-warnung-befunde[b-ikuab5j9g1] {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.5;
}

.prompts-befunde li[data-art="FehlendePflicht"][b-ikuab5j9g1],
.prompts-befunde li[data-art="DoppelteAngabe"][b-ikuab5j9g1],
.prompts-befunde li[data-art="Leer"][b-ikuab5j9g1],
.prompts-befunde li[data-art="ZuLang"][b-ikuab5j9g1] {
    color: var(--red-text);
}

.prompts-befunde li[data-art="Unbekannt"][b-ikuab5j9g1],
.prompts-befunde li[data-art="UnbekannteAngabe"][b-ikuab5j9g1] {
    color: var(--yellow-text);
}

.prompts-geheimnis-hinweis[b-ikuab5j9g1] {
    margin-top: 14px;
}

.prompts-unvollständig[b-ikuab5j9g1] {
    margin: 12px 0 4px;
}

/* ── 159 B10 T028: Werkstext wurde aktualisiert (Zone ⑥, contracts §5) ── */
.prompts-aktualisiert[b-ikuab5j9g1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prompts-aktualisiert-kopf[b-ikuab5j9g1] {
    margin-top: 12px;
}

.prompts-aktualisiert-pflicht[b-ikuab5j9g1] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--red-text);
}

.prompts-aktualisiert-aktionen[b-ikuab5j9g1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prompts-editor-aktualisiert[b-ikuab5j9g1] {
    padding-top: 12px;
}

/* ── 159 B10 T029: Historie (Zone ⑥ „Historie“, contracts §6) ── */
.prompts-historie[b-ikuab5j9g1] {
    padding-top: 12px;
}

.prompts-historie-liste[b-ikuab5j9g1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.prompts-historie-eintrag[b-ikuab5j9g1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.prompts-historie-kopf[b-ikuab5j9g1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.prompts-historie-art[b-ikuab5j9g1] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.prompts-historie-meta[b-ikuab5j9g1] {
    font-size: 12px;
    color: var(--text-3);
}

.prompts-historie-aktionen[b-ikuab5j9g1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* /Components/Prompts/PromptWortlaut.razor.rz.scp.css */
/* 159 B9 T026: die Platzhalter-Marke im Wortlaut — im Quelltext (eigenes
   Markup) und im gerenderten Markdown (MarkupString, deshalb ::deep über den
   eigenen Behälter). Akzent-Tönung aus den Tokens. */

.prompts-platzhalter-marke[b-52j520smxt],
.prompts-gerendert[b-52j520smxt]  .prompts-platzhalter-marke {
    font-family: var(--mono);
    font-size: .95em;
    color: var(--accent);
    background: var(--tint-accent);
    border-radius: 3px;
    padding: 0 2px;
}

.prompts-quelltext[b-52j520smxt] {
    max-height: 520px;
    overflow-y: auto;
}

.prompts-gerendert[b-52j520smxt] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    max-height: 520px;
    overflow-y: auto;
}
/* /Components/Prompts/VergleichsAnsicht.razor.rz.scp.css */
/* 159 B9 T026 (contracts/prompts-maske.md §3): der Zeilen-Vergleich —
   Ziffernschrift wie der Quelltext, je Zeile Randzeichen und Tönung. Die
   Tönungen sind Tokens des Wurzel-Themes (--tint-green/--tint-red). */

.prompts-vergleich[b-h3uv485ooz] {
    margin: 0 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    overflow: hidden;
}

.prompts-vergleich-kopf[b-h3uv485ooz] {
    display: flex;
    gap: 16px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-3);
}

.prompts-vergleich-weg-name[b-h3uv485ooz] {
    color: var(--red-text);
}

.prompts-vergleich-neu-name[b-h3uv485ooz] {
    color: var(--green);
}

.prompts-vergleich-zeilen[b-h3uv485ooz] {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    padding: 6px 0;
}

.prompts-vergleich-zeile[b-h3uv485ooz] {
    display: flex;
    gap: 8px;
    padding: 0 12px 0 6px;
}

.prompts-vergleich-rand[b-h3uv485ooz] {
    flex: none;
    width: 1ch;
    text-align: center;
    user-select: none;
    color: var(--text-3);
}

.prompts-vergleich-text[b-h3uv485ooz] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
}

.prompts-vergleich-zeile[data-art="neu"][b-h3uv485ooz] {
    background: var(--tint-green);
}

.prompts-vergleich-zeile[data-art="neu"] .prompts-vergleich-rand[b-h3uv485ooz] {
    color: var(--green);
    font-weight: 700;
}

.prompts-vergleich-zeile[data-art="weg"][b-h3uv485ooz] {
    background: var(--tint-red);
}

.prompts-vergleich-zeile[data-art="weg"] .prompts-vergleich-rand[b-h3uv485ooz] {
    color: var(--red-text);
    font-weight: 700;
}

.prompts-vergleich-gleich[b-h3uv485ooz] {
    margin: 0;
    padding: 6px 12px 9px;
    font-size: 12px;
    color: var(--text-3);
}
/* /Components/Questions/ExpandableText.razor.rz.scp.css */
/* Wunsch der Fachperson 2026-09-18: Der aufgeklappte Quelltext (Roh-Profil,
   z. B. „Quelltext, N Zeilen" in der Frage-Detail-Ansicht) brach nicht um —
   lange Zeilen erzwangen horizontales Scrollen. Ursache: das pre-Element
   lief ohne jede Regel auf Browser-Defaults (white-space: pre). Fix: an der
   Fläche umbrechen; unzerbrechliche Zeichenfolgen (URLs, Base64, minifizierter
   Code) brechen an beliebiger Stelle. Alles andere (Abstände, Schrift)
   bleibt unverändert. */
pre.expandable-text-content[b-gjdkb6750l] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Questions/Inbox/InboxAnswerComposer.razor.rz.scp.css */
/* 106 T022 — der EINE Antwortweg (FR-020): Optionen oben, GENAU EIN
   Freitextfeld, EIN Absende-Knopf (FR-022), Empfehlungs-Band (FR-023). */

.inbox-answer[b-zzx7bt2qle] {
    margin-top: 24px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--bg-3);
    overflow: hidden;
}

.inbox-answer:focus-within[b-zzx7bt2qle] {
    border-color: var(--accent);
}

.answer-head[b-zzx7bt2qle] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-2);
}

.answer-head .mode[b-zzx7bt2qle] {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    font-size: 11.5px;
    color: var(--text-3);
}

.answer-body[b-zzx7bt2qle] {
    padding: 13px 14px;
}

/* ----- Empfehlungs-Band (FR-023): Übernahme setzt nur die Auswahl —
   157 B3 (FR-008): UNTER den Optionen (weitere Informationen). ----- */
.inbox-rec-hint[b-zzx7bt2qle] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-top: 12px;
    border-radius: var(--radius-sm);
    background: var(--tint-accent);
    border: 1px solid rgba(108, 140, 255, .3);
}

.inbox-rec-hint > svg[b-zzx7bt2qle] {
    width: 15px;
    height: 15px;
    color: var(--accent);
    flex: none;
    margin-top: 1px;
}

.inbox-rec-hint .txt[b-zzx7bt2qle] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-2);
}

.inbox-rec-hint .txt b[b-zzx7bt2qle] {
    color: var(--text);
    display: block;
    font-size: 12px;
    margin-bottom: 2px;
}

/* ----- Knöpfe des Antwortwegs: 149 T036 aus der Knopf-Familie
   (.af-btn, .af-btn-primary, .af-btn-ghost, .af-btn-sm in app.css; Hook
   inbox-btn-primary am Senden-Knopf, plan A3). ----- */
.inbox-answer .kbd[b-zzx7bt2qle] {
    background: rgba(0, 0, 0, .18);
    border-color: rgba(255, 255, 255, .22);
    color: inherit;
    opacity: .8;
}

/* ----- Optionen (draft-gebunden, Mockup .opt) ----- */
.inbox-opts[b-zzx7bt2qle] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inbox-opt[b-zzx7bt2qle] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 10px;
    padding: 9px 11px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color .12s, background .12s;
}

.inbox-opt:hover[b-zzx7bt2qle] {
    border-color: var(--border-light);
    background: var(--bg-4);
}

.inbox-opt .num[b-zzx7bt2qle] {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: var(--bg-4);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    margin-top: 1px;
}

.inbox-opt .mark[b-zzx7bt2qle] {
    flex: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--border-light);
    background: var(--bg-3);
    display: grid;
    place-items: center;
    margin-top: 1px;
    color: transparent;
    transition: all .14s;
}

.inbox-opt.single .mark[b-zzx7bt2qle] {
    border-radius: 50%;
}

.inbox-opt.multi .mark[b-zzx7bt2qle] {
    border-radius: 5px;
}

.inbox-opt .lbl[b-zzx7bt2qle] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
}

.inbox-opt .rb[b-zzx7bt2qle] {
    flex: none;
    margin-top: 1px;
}

.inbox-opt.sel[b-zzx7bt2qle] {
    border-color: var(--accent);
    background: var(--tint-accent);
}

.inbox-opt.sel .mark[b-zzx7bt2qle] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.inbox-opt.sel .num[b-zzx7bt2qle] {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

/* ----- Genau EIN Freitextfeld (SC-006) ----- */
.inbox-free[b-zzx7bt2qle] {
    margin-top: 13px;
}

.inbox-free label[b-zzx7bt2qle] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.inbox-free label .opt-note[b-zzx7bt2qle] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-3);
    font-size: 11.5px;
}

.inbox-free textarea[b-zzx7bt2qle] {
    width: 100%;
    min-height: 76px;
    resize: vertical;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .15s;
}

.inbox-free textarea:focus[b-zzx7bt2qle] {
    border-color: var(--accent);
}

.answer-acts[b-zzx7bt2qle] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    flex-wrap: wrap;
}

/* FR-022: die Hinweiszeile unter der Aktionszeile — sie sagt, was fehlt,
   bzw. was nach dem Senden geschieht. EIN Ort, zwei Zustände. */
.answer-body > .warn[b-zzx7bt2qle] {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 9px;
}
/* /Components/Questions/Inbox/InboxArrivalsBanner.razor.rz.scp.css */
/* 106 T046 — der Ankunfts-Banner (K2/FR-080): fester Platz oberhalb des
   Baums; er ruht, er drängt sich nicht auf — der Klick bleibt bewusst. */

.inbox-arrivals[b-1fzq13b1fa] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 189, 74, .4);
    border-left: 3px solid var(--yellow);
    border-radius: var(--radius-sm);
    background: var(--tint-yellow);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, filter .12s;
}

.inbox-arrivals:hover[b-1fzq13b1fa] {
    border-color: var(--yellow);
    filter: brightness(1.06);
}

.inbox-arrivals > svg[b-1fzq13b1fa] {
    flex: none;
    color: var(--yellow);
}

.inbox-arrivals span:first-of-type[b-1fzq13b1fa] {
    flex: 1;
    min-width: 0;
}

.inbox-arrivals .inbox-arrivals-n[b-1fzq13b1fa] {
    flex: none;
    min-width: 20px;
    text-align: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--bg);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}
/* /Components/Questions/Inbox/InboxBulkAnswerPanel.razor.rz.scp.css */
/* 106 T037 — die Gesamtantwort (Mockup .bulk): der Rahmen trägt die
   Akzentkante, die Bilanz steht als Band über dem Textfeld.
   157 Nachtrag N7 (antwortbereich.md §2): die Auswahlliste ist NICHT mehr
   gedeckelt (Deckel 290px und eigener Scroll entfallen) — gescrollt wird
   nur die Detail-Spalte. */

.inbox-bulk[b-wb3wjm86jp] {
    margin-top: 22px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg-3);
    overflow: hidden;
}

.inbox-bulk-head[b-wb3wjm86jp] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.inbox-bulk-head > svg[b-wb3wjm86jp] {
    width: 17px;
    height: 17px;
    color: var(--accent);
    flex: none;
    margin-top: 1px;
}

.inbox-bulk-head h3[b-wb3wjm86jp] {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0;
}

.inbox-bulk-head p[b-wb3wjm86jp] {
    font-size: 12px;
    color: var(--text-3);
    margin: 2px 0 0;
}

/* 149 T036: Symbol-Knopf aus der Familie (.af-btn-icon); hier nur die Lage. */
.inbox-bulk-cancel[b-wb3wjm86jp] {
    margin-left: auto;
    cursor: pointer;
}

.inbox-bulk-body[b-wb3wjm86jp] {
    padding: 13px 14px;
}

.inbox-bulk-pick[b-wb3wjm86jp] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inbox-pick-row[b-wb3wjm86jp] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color .12s, background .12s;
}

.inbox-pick-row:hover[b-wb3wjm86jp] {
    border-color: var(--border-light);
}

.inbox-pick-row .mark[b-wb3wjm86jp] {
    flex: none;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--border-light);
    background: var(--bg-3);
    display: grid;
    place-items: center;
    color: transparent;
    margin-top: 1px;
    transition: all .14s;
}

.inbox-pick-row.sel[b-wb3wjm86jp] {
    border-color: var(--accent);
    background: var(--tint-accent);
}

.inbox-pick-row.sel .mark[b-wb3wjm86jp] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.inbox-pick-row .t[b-wb3wjm86jp] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
}

.inbox-pick-row .t small[b-wb3wjm86jp] {
    display: block;
    color: var(--text-3);
    font-size: 10.5px;
    margin-top: 2px;
}

.inbox-bulk-balance[b-wb3wjm86jp] {
    margin-top: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--tint-accent);
    border: 1px solid rgba(108, 140, 255, .28);
    font-size: 12.5px;
    color: var(--text-2);
}

.inbox-bulk-frei[b-wb3wjm86jp] {
    margin-top: 13px;
}

.inbox-bulk-frei label[b-wb3wjm86jp] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.inbox-bulk-frei .opt-note[b-wb3wjm86jp] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-3);
    font-size: 11.5px;
}

.inbox-bulk-frei textarea[b-wb3wjm86jp] {
    width: 100%;
    min-height: 76px;
    resize: vertical;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .15s;
}

.inbox-bulk-frei textarea:focus[b-wb3wjm86jp] {
    border-color: var(--accent);
}

.inbox-bulk-acts[b-wb3wjm86jp] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    flex-wrap: wrap;
}

.inbox-bulk-acts .spacer[b-wb3wjm86jp] {
    flex: 1;
}

/* 149 T036: die Knöpfe kommen aus der Knopf-Familie (.af-btn in app.css). */
/* /Components/Questions/Inbox/InboxDetail.razor.rz.scp.css */
/* 106 T021 — die Detailspalte: Herkunftszeile, Abzeichen, Fakten mit
   ehrlichen Marken (FR-054), abgegebene Antwort (FR-052-Basis). */

.inbox-detail[b-69fp9jzjcf] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.inbox-detail-head[b-69fp9jzjcf] {
    flex: none;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Die Herkunftszeile: eine ruhige Zeile, kein Absatz — sie wechselt nur,
   wenn die Gruppe wechselt (Mockup). */
.inbox-d-origin[b-69fp9jzjcf] {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    font-size: 11.5px;
    color: var(--text-3);
    padding-bottom: 2px;
}

.inbox-d-origin .grow[b-69fp9jzjcf] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.inbox-d-origin .tt[b-69fp9jzjcf] {
    color: var(--text-2);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-d-origin .pos[b-69fp9jzjcf] {
    font-size: 11.5px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.inbox-detail-scroll[b-69fp9jzjcf] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 26px;
}

/* 149 T036: Laden/Fehler über LadeZustand und FehlerKasten (app.css). */

.inbox-d-title[b-69fp9jzjcf] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.inbox-question-text.d-text[b-69fp9jzjcf] {
    font-size: 14.5px;
    line-height: 1.55;
    margin-top: 15px;
}

/* FR-010, Stufe 3b: der Sperr-Hinweis im Detail (Mockup .d-blocker). */
.inbox-d-blocker[b-69fp9jzjcf] {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 11px 13px;
    margin-bottom: 16px;
    background: var(--tint-red);
    border: 1px solid rgba(255, 92, 92, .34);
    border-left: 3px solid var(--red);
    border-radius: var(--radius-sm);
}

.inbox-d-blocker svg[b-69fp9jzjcf] {
    width: 17px;
    height: 17px;
    color: var(--red);
    flex: none;
    margin-top: 1px;
}

.inbox-d-blocker b[b-69fp9jzjcf] {
    color: var(--red-text);
    font-size: 13px;
    display: block;
}

.inbox-d-blocker span[b-69fp9jzjcf] {
    font-size: 12px;
    color: var(--text-2);
}

.inbox-d-context[b-69fp9jzjcf] {
    margin-top: 13px;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 2px solid var(--border-light);
    font-size: 12.5px;
    color: var(--text-2);
}

.inbox-d-context b[b-69fp9jzjcf] {
    color: var(--text-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
    margin-bottom: 3px;
}

.sec[b-69fp9jzjcf] {
    margin-top: 22px;
}

.sec-head[b-69fp9jzjcf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 7px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.sec-head .right[b-69fp9jzjcf] {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    font-size: 11px;
}

/* ----- Herkunfts-Fakten ----- */
.inbox-facts[b-69fp9jzjcf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0;
}

.fact[b-69fp9jzjcf] {
    background: var(--bg-2);
    padding: 9px 12px;
}

.fact dt[b-69fp9jzjcf] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
    font-weight: 700;
}

.fact dd[b-69fp9jzjcf] {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dead[b-69fp9jzjcf] {
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-style: italic;
}

.dead svg[b-69fp9jzjcf] {
    color: var(--yellow);
}

/* ----- Abgegebene Antwort (FR-052-Basis) ----- */
.inbox-given[b-69fp9jzjcf] {
    margin-top: 24px;
    border: 1px solid rgba(63, 206, 139, .3);
    border-left: 3px solid var(--green);
    border-radius: var(--radius);
    background: var(--tint-green);
    padding: 13px 15px;
}

.inbox-given.neutral[b-69fp9jzjcf] {
    border-color: var(--border);
    border-left-color: var(--text-3);
    background: var(--bg-3);
}

.given-head[b-69fp9jzjcf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--green);
}

.inbox-given.neutral .given-head[b-69fp9jzjcf] {
    color: var(--text-2);
}

.inbox-given-opts[b-69fp9jzjcf] {
    margin-top: 9px;
}

/* 106 T040 — der ergänzende Text neben den gewählten Optionen bzw. die
   Begründung der Irrelevant-Markierung (FR-052 „und/oder“, FR-025). */
.given-text[b-69fp9jzjcf] {
    margin-top: 9px;
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text);
}

/* 106 T040 — der Gesamtantwort-Herkunftsvermerk (FR-052). */
.inbox-given-bulk[b-69fp9jzjcf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
}

.inbox-given-bulk svg[b-69fp9jzjcf] {
    color: var(--accent);
    flex: none;
}

.inbox-bulk-answer[b-69fp9jzjcf] {
    margin-top: 12px;
}

/* Der Bestands-Panel-Rahmen bleibt — die Aktionen (Wieder öffnen) sitzen
   unten in der gegebenen Antwort. */
.inbox-given :deep(.question-answer-panel)[b-69fp9jzjcf] {
    margin-top: 10px;
}

/* ----- Aufgaben-Ansicht (Basis; Ausbau FR-056 in Phase 7) ----- */
.inbox-gv-stats[b-69fp9jzjcf] {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.gv-stat[b-69fp9jzjcf] {
    flex: 1;
    min-width: 120px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 13px;
}

.gv-stat .num[b-69fp9jzjcf] {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gv-stat.open .num[b-69fp9jzjcf] {
    color: var(--yellow);
}

.gv-stat.answered .num[b-69fp9jzjcf] {
    color: var(--green);
}

.gv-stat .word[b-69fp9jzjcf] {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.inbox-gv-qlist[b-69fp9jzjcf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inbox-gv-q[b-69fp9jzjcf] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color .12s, background .12s;
}

.inbox-gv-q:hover[b-69fp9jzjcf] {
    border-color: var(--border-light);
    background: var(--bg-4);
}

.inbox-gv-q .dot[b-69fp9jzjcf] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--yellow);
}

.inbox-gv-q.st-answered .dot[b-69fp9jzjcf] {
    background: var(--green);
}

.inbox-gv-q.st-irrelevant .dot[b-69fp9jzjcf] {
    background: var(--text-3);
}

.inbox-gv-q .t[b-69fp9jzjcf] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-gv-q.st-answered .t[b-69fp9jzjcf],
.inbox-gv-q.st-irrelevant .t[b-69fp9jzjcf] {
    font-weight: 500;
    color: var(--text-2);
}

/* ----- Leer-Platzhalter: 149 T036 über den LeerZustand (.af-leer,
   flach); die Fläche lässt ihn die Spalte füllen. ----- */
.inbox-detail[b-69fp9jzjcf]  .inbox-detail-leer {
    flex: 1;
}

/* Gesamtantwort-Einstieg und Hinweise der Aufgaben-Ansicht — 149 T036:
   der Knopf kommt aus der Knopf-Familie (.af-btn .af-btn-primary). */
.inbox-grp-leer[b-69fp9jzjcf] {
    padding: 4px 6px 8px;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.5;
}

.inbox-grp-leer b[b-69fp9jzjcf] {
    color: var(--text-2);
}

.warn[b-69fp9jzjcf] {
    font-size: 11.5px;
    color: var(--text-3);
}

.inbox-blockade-list[b-69fp9jzjcf] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.inbox-blockade-list button[b-69fp9jzjcf] {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    min-height: 24px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid rgba(255, 92, 92, .4);
    color: var(--red-text);
    cursor: pointer;
    transition: background .12s;
}

.inbox-blockade-list button:hover[b-69fp9jzjcf] {
    background: var(--tint-red);
}
/* /Components/Questions/Inbox/InboxFilterBar.razor.rz.scp.css */
/* 106 T034 — die Filterleiste: Suche (Mockup .searchbox), Segmente,
   Art-Regler, Bilanzzeile und Alles-Umschalter. */

.inbox-tools[b-pd5t5otoja] {
    padding: 11px 11px 10px;
    border-bottom: 1px solid var(--border);
    flex: none;
}

/* ----- Suche mit Kurzanzeige (/) ----- */
.inbox-searchbox[b-pd5t5otoja] {
    position: relative;
}

.inbox-searchbox > svg[b-pd5t5otoja] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-3);
    pointer-events: none;
}

.inbox-search[b-pd5t5otoja] {
    width: 100%;
    padding: 8px 60px 8px 32px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    outline: none;
    transition: border-color .15s;
}

.inbox-search:focus[b-pd5t5otoja] {
    border-color: var(--accent);
}

.inbox-searchbox .slash[b-pd5t5otoja] {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: opacity .12s;
}

.inbox-search:focus ~ .slash[b-pd5t5otoja] {
    opacity: 0;
}

/* ----- Segmente ----- */
.inbox-chips[b-pd5t5otoja],
.inbox-chips-row2[b-pd5t5otoja] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.inbox-chips[b-pd5t5otoja] {
    margin-top: 9px;
}

.inbox-chips-row2[b-pd5t5otoja] {
    margin-top: 7px;
    align-items: center;
}

.inbox-chips-row2 .lbl[b-pd5t5otoja] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-3);
    font-weight: 700;
    margin-right: 2px;
}

.inbox-chip[b-pd5t5otoja] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 3.5px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: inherit;
    transition: color .12s, border-color .12s, background .12s;
}

.inbox-chip:hover[b-pd5t5otoja] {
    color: var(--text);
    border-color: var(--border-light);
}

.inbox-chip .n[b-pd5t5otoja] {
    color: var(--text-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inbox-chip.on[b-pd5t5otoja] {
    background: var(--tint-accent);
    border-color: var(--accent);
    color: var(--accent);
}

.inbox-chip.on .n[b-pd5t5otoja] {
    color: var(--accent);
    opacity: .75;
}

.inbox-chip .sdot[b-pd5t5otoja] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.inbox-chip .sdot.open[b-pd5t5otoja] {
    background: var(--yellow);
}

.inbox-chip .sdot.answered[b-pd5t5otoja] {
    background: var(--green);
}

.inbox-chip .sdot.irrelevant[b-pd5t5otoja] {
    background: var(--text-3);
}

.inbox-tools-foot[b-pd5t5otoja] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-3);
}

.inbox-tools-foot .spacer[b-pd5t5otoja] {
    flex: 1;
}

/* 149 T036: der Umschalter kommt aus der Knopf-Familie (.af-btn-link);
   die Leiste setzt nur die kleinere Schrift. */
.inbox-toggle-all[b-pd5t5otoja] {
    font-size: 11.5px;
}

.kbd[b-pd5t5otoja] {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-2);
    line-height: 1;
}
/* /Components/Questions/Inbox/InboxGroupNode.razor.rz.scp.css */
/* 106 T019 — der Gruppenknoten: Kopf nach FR-008, heimatlose Gruppe mit
   gestrichelter Kante (FR-002), rote Kante bei angehaltener Aufgabe (R2). */

.inbox-grp[b-5j7iofl8bf] {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    transition: border-color .2s, opacity .3s;
}

.inbox-grp.inbox-grp--open[b-5j7iofl8bf] {
    border-color: var(--border-light);
}

.inbox-grp.inbox-grp--blocked[b-5j7iofl8bf] {
    border-color: rgba(163, 38, 60, .6);
}

.inbox-grp.inbox-grp--done[b-5j7iofl8bf] {
    opacity: .78;
}

.inbox-grp.inbox-grp--done:hover[b-5j7iofl8bf] {
    opacity: 1;
}

.inbox-grp.inbox-grp--homeless[b-5j7iofl8bf] {
    border-style: dashed;
}

/* Der Gruppenkopf klebt beim Blättern oben an, damit die Herkunft der
   sichtbaren Zeilen nie verloren geht (Mockup). */
.inbox-grp-head[b-5j7iofl8bf] {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    text-align: left;
    background: var(--bg-3);
    border: none;
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 5;
    border-radius: 6px 6px 0 0;
    transition: background .12s;
}

.inbox-grp:not(.open-grp) .inbox-grp-head[b-5j7iofl8bf] {
    border-radius: 6px;
}

.inbox-grp.inbox-grp--blocked .inbox-grp-head[b-5j7iofl8bf] {
    box-shadow: -1px 0 0 rgba(163, 38, 60, .6), 1px 0 0 rgba(163, 38, 60, .6);
}

.inbox-grp.inbox-grp--open .inbox-grp-head[b-5j7iofl8bf] {
    border-bottom-color: var(--border);
}

.inbox-grp-head:hover[b-5j7iofl8bf] {
    background: var(--bg-4);
}

.inbox-grp-btn[b-5j7iofl8bf] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px 9px 11px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.inbox-grp.inbox-grp--blocked .inbox-grp-btn[b-5j7iofl8bf] {
    box-shadow: inset 3px 0 0 var(--red);
}

.inbox-grp.inbox-grp--done .inbox-grp-btn[b-5j7iofl8bf] {
    box-shadow: inset 3px 0 0 var(--green);
}

.inbox-grp-arrow[b-5j7iofl8bf] {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--text-3);
    transition: transform .16s, color .12s;
}

.inbox-grp-arrow svg[b-5j7iofl8bf] {
    display: block;
}

.inbox-grp-btn[aria-expanded="true"] .inbox-grp-arrow[b-5j7iofl8bf] {
    transform: rotate(90deg);
    color: var(--accent);
}

.inbox-grp.inbox-grp--selected > .inbox-grp-head[b-5j7iofl8bf] {
    background: var(--bg-4);
}

.inbox-grp.inbox-grp--selected > .inbox-grp-head .inbox-grp-btn[b-5j7iofl8bf] {
    box-shadow: inset 3px 0 0 var(--accent);
}

.inbox-grp.inbox-grp--selected[b-5j7iofl8bf] {
    border-color: var(--accent);
}

.inbox-grp-main[b-5j7iofl8bf] {
    flex: 1;
    min-width: 0;
    display: block;
}

.inbox-grp-title-line[b-5j7iofl8bf] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.inbox-grp-title[b-5j7iofl8bf] {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.1px;
}

.inbox-grp-meta[b-5j7iofl8bf] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-3);
}

.inbox-grp-meta .mono[b-5j7iofl8bf] {
    font-family: var(--mono);
    font-size: 10.5px;
}

.inbox-grp-meta .sep[b-5j7iofl8bf] {
    opacity: .5;
}

.inbox-grp-meta .dead[b-5j7iofl8bf] {
    font-style: italic;
}

.inbox-grp-right[b-5j7iofl8bf] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 9px 9px 0;
}

.inbox-grp-count[b-5j7iofl8bf] {
    text-align: right;
    line-height: 1.15;
}

.inbox-grp-count .num[b-5j7iofl8bf] {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--yellow);
}

.inbox-grp.inbox-grp--done .inbox-grp-count .num[b-5j7iofl8bf] {
    color: var(--green);
}

.inbox-grp-count .of[b-5j7iofl8bf] {
    font-size: 10.5px;
    color: var(--text-3);
}

.inbox-grp-count .word[b-5j7iofl8bf] {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
    margin-top: -1px;
}

.inbox-grp-band[b-5j7iofl8bf] {
    width: 46px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-4);
    overflow: hidden;
    display: flex;
    margin-top: 5px;
    margin-left: auto;
}

.inbox-grp-band i[b-5j7iofl8bf] {
    display: block;
    height: 100%;
    transition: width .45s cubic-bezier(.2, .7, .3, 1);
}

.inbox-grp-band .b-a[b-5j7iofl8bf] {
    background: var(--green);
}

.inbox-grp-band .b-i[b-5j7iofl8bf] {
    background: var(--text-3);
}

.inbox-grp-body[b-5j7iofl8bf] {
    padding: 0 8px 8px;
}

/* 106 T041 — der gemeinsame Zusammenhang (FR-055/A2): EINMAL je Gruppe,
   beim Aufklappen gelesen, danach einklappbar (Mockup .ctx). */
.inbox-ctx[b-5j7iofl8bf] {
    margin: 0 3px 8px;
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 12px;
    color: var(--text-2);
}

.inbox-ctx-head[b-5j7iofl8bf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
}

.inbox-ctx-head > svg[b-5j7iofl8bf] {
    flex: none;
}

.inbox-ctx-head span[b-5j7iofl8bf] {
    flex: 1;
    min-width: 0;
}

.inbox-ctx-fold[b-5j7iofl8bf] {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-3);
    cursor: pointer;
    transition: background .12s;
}

.inbox-ctx-fold:hover[b-5j7iofl8bf] {
    background: var(--bg-4);
    color: var(--text);
}

.inbox-ctx-text[b-5j7iofl8bf] {
    padding: 0 10px 9px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.inbox-ctx-text :deep(p)[b-5j7iofl8bf] {
    margin: 0 0 5px;
}

.inbox-ctx-text :deep(p:last-child)[b-5j7iofl8bf] {
    margin-bottom: 0;
}

/* 157 B5 (T014) — der Runden-Abschnitt: Kopf „Fragenrunde <n>« mit Warte-
   Hinweis (FR-025) und Gesamtantwort-Hinweis (FR-017); darunter die Fragen
   der Runde. Der Kopf ist KEIN Knopf — der Halter ist nicht anwählbar
   (FR-015), Sprünge landen auf dem Anker #inbox-runde-<laufId>. */
.inbox-runde[b-5j7iofl8bf] {
    margin: 0 3px 8px;
    padding: 0 0 2px;
    border-left: 2px solid var(--border);
    border-radius: var(--radius-sm);
}

.inbox-runde--fertig[b-5j7iofl8bf] {
    border-left-color: var(--green);
}

.inbox-runde-kopf[b-5j7iofl8bf] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 6px 9px;
    font-size: 12px;
    color: var(--text-2);
}

.inbox-runde-name[b-5j7iofl8bf] {
    font-weight: 700;
    color: var(--text);
    letter-spacing: .2px;
}

.inbox-runde-wartet[b-5j7iofl8bf] {
    color: var(--yellow-text);
    font-weight: 600;
}

.inbox-runde-hinweis[b-5j7iofl8bf] {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--text-3);
}

/* FR-010, Stufe 2: der Blockade-Hinweis im Gruppenkörper — er nennt die
   wartenden Rückfragen und macht sie anspringbar (Mockup .blockade). */
.inbox-blockade[b-5j7iofl8bf] {
    margin: 0 3px 8px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--tint-red);
    border: 1px solid rgba(255, 92, 92, .32);
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--text-2);
}

.inbox-blockade > svg[b-5j7iofl8bf] {
    width: 14px;
    height: 14px;
    color: var(--red);
    flex: none;
    margin-top: 2px;
}

.inbox-blockade-list[b-5j7iofl8bf] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.inbox-blockade-list button[b-5j7iofl8bf] {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    min-height: 24px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid rgba(255, 92, 92, .4);
    color: var(--red-text);
    cursor: pointer;
    transition: background .12s;
}

.inbox-blockade-list button:hover[b-5j7iofl8bf] {
    background: var(--tint-red);
}

/* 157 B6 (T016, §4): die bewusste Fortsetzung am Runden-Kopf — nur solange
   der Halter offen wartet; ein schlichter Textknopf im Kopf, kein zweiter
   Akzent (der Kopf bleibt Lesekopf, die Aktion steht rechts außen). */
.inbox-runde-fortsetzen[b-5j7iofl8bf] {
    margin-left: auto;
    white-space: nowrap;
}

/* In der Aufgaben-Ansicht der rechten Spalte (A5) stehen die Knöpfe unter
  einander im eigenen Abschnitt — der Wortlaut trägt die Anteile. */
.inbox-gv-runden .inbox-runde-fortsetzen[b-5j7iofl8bf] {
    display: block;
    margin: 6px 0 0;
    padding: 4px 0;
}
/* /Components/Questions/Inbox/InboxKeyboardHelp.razor.rz.scp.css */
/* 106 T050 — die Tastaturhilfe (FR-061): Overlay nach Mockup (role=dialog,
   zwei bis drei Spalten, Taste-links / Wirkung-rechts). Dunkel = Leitdesign,
   Hell erbt von den Bestands-Tokens. */

.inbox-help-overlay[b-hk8ma7jbe4] {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(6, 9, 14, .62);
}

.inbox-help[b-hk8ma7jbe4] {
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--bg-2);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.inbox-help-head[b-hk8ma7jbe4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 17px 12px;
    border-bottom: 1px solid var(--border);
}

.inbox-help-head h2[b-hk8ma7jbe4] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.inbox-help-head p[b-hk8ma7jbe4] {
    font-size: 12px;
    color: var(--text-2);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* 149 T036: Symbol-Knopf aus der Familie (.af-btn-icon in app.css). */
.inbox-help-schließen[b-hk8ma7jbe4] {
    cursor: pointer;
}

.inbox-help-body[b-hk8ma7jbe4] {
    overflow-y: auto;
    padding: 15px 17px;
}

.inbox-help-grid[b-hk8ma7jbe4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 22px;
}

.inbox-help-col h3[b-hk8ma7jbe4] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-3);
    margin: 0 0 8px;
}

.inbox-help-row[b-hk8ma7jbe4] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 3px 0;
    font-size: 12.5px;
    color: var(--text-2);
}

.inbox-help-row .keys[b-hk8ma7jbe4] {
    flex: none;
    min-width: 62px;
}

.inbox-help-row .txt[b-hk8ma7jbe4] {
    flex: 1;
    min-width: 0;
}

.inbox-help-foot[b-hk8ma7jbe4] {
    display: flex;
    justify-content: flex-end;
    padding: 11px 17px 14px;
    border-top: 1px solid var(--border);
}
/* /Components/Questions/Inbox/InboxQuestionRow.razor.rz.scp.css */
/* 106 T020 — die Fragenzeile: Zustandsfarbe über den Punkt (FR-006), Art-
   Abzeichen (FR-012), „Entwurf vorhanden“ (FR-028), von/am-Zeile (FR-051)
   und das grüne Stehenbleiben der Ruhepause (FR-027, .fresh). */

.inbox-row[b-1bym60mbep] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px 8px 24px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    position: relative;
    cursor: pointer;
    font: inherit;
    transition: background .12s, border-color .12s, opacity .3s, transform .3s;
}

.inbox-row:hover[b-1bym60mbep] {
    background: var(--bg-3);
}

.inbox-row.on[b-1bym60mbep] {
    background: var(--bg-3);
    border-color: var(--border-light);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Der Zustands-Punkt: gelb offen, grün beantwortet, grau irrelevant
   (FR-006) — die Reihenfolge der Worte wie am Bestandswert. */
.inbox-row[b-1bym60mbep]::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yellow);
    transition: background .25s;
}

.inbox-row.st-answered[b-1bym60mbep]::before {
    background: var(--green);
}

.inbox-row.st-irrelevant[b-1bym60mbep]::before {
    background: var(--text-3);
}

/* FR-010, Stufe 3a: eine haltende Rückfrage trägt den roten Punkt. */
.inbox-row.holds[b-1bym60mbep]::before {
    background: var(--red);
}

.inbox-row-sum[b-1bym60mbep] {
    font-size: 13px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inbox-row.st-answered .inbox-row-sum[b-1bym60mbep],
.inbox-row.st-irrelevant .inbox-row-sum[b-1bym60mbep] {
    font-weight: 500;
    color: var(--text-2);
}

.inbox-row-meta[b-1bym60mbep] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
    font-size: 10.5px;
    color: var(--text-3);
}

/* Von/am in der Zeile (FR-051): grün für Antworten, neutral-grau für die
   Irrelevant-Markierung — nie grün (US6 S2). */
.inbox-row-by[b-1bym60mbep] {
    margin-top: 4px;
    font-size: 10.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--green);
}

.inbox-row-by.neutral[b-1bym60mbep] {
    color: var(--text-3);
}

/* Die Ruhepause: die eben beantwortete Zeile steht und blitzt kurz grün
   (FR-027); irrelevante Markierung blitzt neutral (Mockup flashneutral). */
.inbox-row.fresh[b-1bym60mbep] {
    animation: inbox-flash-b-1bym60mbep .9s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes inbox-flash-b-1bym60mbep {
    0% {
        background: var(--tint-green);
        box-shadow: inset 3px 0 0 var(--green);
    }

    100% {
        background: transparent;
        box-shadow: inset 3px 0 0 transparent;
    }
}

.inbox-row.fresh.irr[b-1bym60mbep] {
    animation-name: inbox-flash-neutral-b-1bym60mbep;
}

@keyframes inbox-flash-neutral-b-1bym60mbep {
    0% {
        background: var(--tint-grey);
        box-shadow: inset 3px 0 0 var(--text-3);
    }

    100% {
        background: transparent;
        box-shadow: inset 3px 0 0 transparent;
    }
}

/* Screen-reader-Only (Zustands-Aufschrift in der Zeile). */
.sr[b-1bym60mbep] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* /Components/Questions/Inbox/InboxTree.razor.rz.scp.css */
/* 106 T018 — der Baum (role=tree). Kein overflow:hidden — es würde das
   Kleben der Gruppenköpfe aufheben. */

.inbox-tree[b-x23omowb96] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 7px 7px 14px;
    outline: none;
}

/* ----- Leerzustand (Phase-3-Basis, FR-043): 149 T036 über den
   LeerZustand (.af-leer aus app.css, Hook inbox-empty); die Fläche setzt nur
   den Abstand im Baum. ----- */
.inbox-tree[b-x23omowb96]  .inbox-empty {
    margin: 12px 7px;
}

/* ----- 106 T045: die Organisations-Ebene (K1/FR-078) — Knoten über den
   Aufgaben, mit Name und offener Zahl; angehaltene Organisationen tragen
   die rote Kante weiter. ----- */
.inbox-org[b-x23omowb96] {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.inbox-org.inbox-org--halted[b-x23omowb96] {
    border-color: rgba(163, 38, 60, .6);
}

.inbox-org-head[b-x23omowb96] {
    display: flex;
    align-items: stretch;
    background: var(--bg-3);
    border-radius: var(--radius) var(--radius) 0 0;
}

.inbox-org:not(.inbox-org--open) .inbox-org-head[b-x23omowb96] {
    border-radius: var(--radius);
}

.inbox-org.inbox-org--halted .inbox-org-head[b-x23omowb96] {
    box-shadow: inset 3px 0 0 var(--red);
}

.inbox-org-btn[b-x23omowb96] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 11px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.inbox-org-btn:hover[b-x23omowb96] {
    background: var(--bg-4);
}

.inbox-org-arrow[b-x23omowb96] {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--text-3);
    transition: transform .16s, color .12s;
}

.inbox-org-arrow svg[b-x23omowb96] {
    display: block;
}

.inbox-org-btn[aria-expanded="true"] .inbox-org-arrow[b-x23omowb96] {
    transform: rotate(90deg);
    color: var(--accent);
}

.inbox-org-name[b-x23omowb96] {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-org-count[b-x23omowb96] {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 9px 11px 9px 0;
    font-variant-numeric: tabular-nums;
}

.inbox-org-count .num[b-x23omowb96] {
    font-size: 14px;
    font-weight: 700;
    color: var(--yellow);
}

.inbox-org.inbox-org--halted .inbox-org-count .num[b-x23omowb96] {
    color: var(--red);
}

.inbox-org-count .of[b-x23omowb96] {
    font-size: 10.5px;
    color: var(--text-3);
}

.inbox-org-count .word[b-x23omowb96] {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
    align-self: center;
}

.inbox-org-body[b-x23omowb96] {
    padding: 8px;
    border-top: 1px solid var(--border);
}
/* /Components/Questions/Inbox/QuestionsInbox.razor.rz.scp.css */
/* 106 T017 — Kernfläche des Posteingangs (Design: Mockup Variante E,
   verbindlich). Die Signaltöne sitzen auf den Bestands-Tokens (app.css).
   149 T036 (FR-016): die zarten Hinterlegungen (--tint-*) stehen seit 149
   T001 mit denselben Werten in :root — die Flächen-Kopie entfällt. */

.inbox[b-7onlq4b2st] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: calc(100vh - var(--kopf-höhe));
    min-height: 0;
    padding: 22px 26px 18px;
}

/* ----- Kopf: Titel + Fortschritt ----- */
/* 149 T036: der Kopf ist der MaskenKopf (.af-page-head, Titel und Untertitel
   aus app.css); die Fläche setzt nur ihre Abweichung — der Abstand kommt aus
   dem gap der Spalte, der Fortschritt sitzt unten bündig. */
.inbox[b-7onlq4b2st]  .inbox-head {
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 0;
}

.inbox-progress[b-7onlq4b2st] {
    min-width: 240px;
}

.inbox-progress-line[b-7onlq4b2st] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-2);
}

.inbox-progress-line b[b-7onlq4b2st] {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.inbox-progress-bar[b-7onlq4b2st] {
    height: 5px;
    margin-top: 7px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-3);
    overflow: hidden;
}

.inbox-progress-fill[b-7onlq4b2st] {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--accent-2));
    transition: width .45s cubic-bezier(.2, .7, .3, 1);
}

/* ----- FR-043, Fall 1: das Fertig-Band — die geleistete Arbeit bleibt
   als Aussage stehen, die Aufgaben bleiben sichtbar. ----- */
.inbox-banner[b-7onlq4b2st] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 18px 14px;
    text-align: center;
}

.inbox-banner h3[b-7onlq4b2st] {
    font-size: 14.5px;
    font-weight: 700;
    margin: 8px 0 0;
}

.inbox-banner p[b-7onlq4b2st] {
    font-size: 12.5px;
    color: var(--text-3);
    max-width: 430px;
    margin: 0;
}

/* ----- Deep-Link-Kante (Vertrag §1): 149 T036 als Hinweisleiste
   (.af-hinweisleiste aus app.css, Hook inbox-deeplink-hint). ----- */

/* ----- Aufteilung Baum | Detail ----- */
.inbox-split[b-7onlq4b2st] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 436px minmax(0, 1fr);
    gap: 18px;
}

.inbox-panel[b-7onlq4b2st] {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.inbox-list-foot[b-7onlq4b2st] {
    flex: none;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-list-foot .hint[b-7onlq4b2st] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kbd[b-7onlq4b2st] {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border-light);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-2);
    line-height: 1;
}

/* ----- Abzeichen — EIN Formen-Set für alle Bausteine der Fläche
   (Mockup .badge; ::deep, weil die Bausteine eigene Scope-Grenzen haben). ----- */
.inbox[b-7onlq4b2st]  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.inbox[b-7onlq4b2st]  .badge svg {
    width: 10px;
    height: 10px;
}

.inbox[b-7onlq4b2st]  .badge-open {
    background: var(--tint-yellow);
    color: var(--yellow-text);
}

.inbox[b-7onlq4b2st]  .badge-answered {
    background: var(--tint-green);
    color: var(--green);
}

.inbox[b-7onlq4b2st]  .badge-irrelevant {
    background: var(--tint-grey);
    color: var(--text-2);
}

.inbox[b-7onlq4b2st]  .badge-block {
    background: var(--tint-red);
    color: var(--red-text);
}

.inbox[b-7onlq4b2st]  .badge-rec {
    background: var(--tint-accent);
    color: var(--blue-text);
}

.inbox[b-7onlq4b2st]  .badge-kind {
    background: var(--bg-4);
    color: var(--text-2);
}

.inbox[b-7onlq4b2st]  .badge-kind-query {
    background: var(--tint-red);
    color: var(--red-text);
}

.inbox[b-7onlq4b2st]  .badge-neutral {
    background: var(--bg-4);
    color: var(--text-3);
}

/* Der Puls der „Aufgabe angehalten“-Marke (Mockup; FR-070 schaltet die
   Bewegung in der reduzierten Darstellung ab — die Marke bleibt). */
.inbox[b-7onlq4b2st]  .puls {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    flex: none;
    animation: inbox-puls-b-7onlq4b2st 2.1s ease-out infinite;
}

@keyframes inbox-puls-b-7onlq4b2st {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 92, 92, .55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(255, 92, 92, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 92, 92, 0);
    }
}

/* ----- Schmale Schirme: eine Spalte (Basis; Verfeinerung Phase 11) ----- */
@media (max-width: 1240px) {
    .inbox-split[b-7onlq4b2st] {
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 14px;
    }
}

/* 106 T053 (FR-071): der Rückweg der Schmalansicht — im DOM beider
   Schemata, nur auf dem schmalen Schirm sichtbar (Mockup .back-btn). */
.inbox-zurück[b-7onlq4b2st] {
    display: none;
    flex: none;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.inbox-zurück:hover[b-7onlq4b2st] {
    background: var(--bg-4);
    color: var(--text);
}

/* Der Hilfe-Knopf im Fuß: 149 T036 aus der Knopf-Familie (.af-btn-link);
   die Fläche setzt nur die leise Farbe und den Abstand zum Kürzel. */
.inbox-hilfe-knopf[b-7onlq4b2st] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-3);
}

.inbox-hilfe-knopf:hover[b-7onlq4b2st] {
    text-decoration: none;
    color: var(--text);
}

/* ----- Schmaler Schirm: eine Spalte, Liste ↔ Detail mit Rückweg (FR-071) ----- */
@media (max-width: 1020px) {
    .inbox[b-7onlq4b2st] {
        padding: 16px 14px 14px;
    }

    .inbox-split[b-7onlq4b2st] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Der Zustand reist im data-Attribut; die Media-Query wirkt ihn —
       der breite Schirm ignoriert ihn und zeigt beide Spalten. */
    .inbox[data-ansicht="liste"] .inbox-panel--detail[b-7onlq4b2st] {
        display: none;
    }

    .inbox[data-ansicht="detail"] .inbox-panel--list[b-7onlq4b2st] {
        display: none;
    }

    .inbox-zurück[b-7onlq4b2st] {
        display: inline-flex;
    }

    /* Kein Querlauf, keine abgeschnittenen Köpfe: die Spalte trägt ihren
       eigenen Bildlauf, die Kopfzeile bricht statt zu quetschen. */
    .inbox[b-7onlq4b2st]  .inbox-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .inbox-progress[b-7onlq4b2st] {
        min-width: 0;
    }
}

@media (max-width: 470px) {
    .inbox[b-7onlq4b2st] {
        padding: 12px 10px 12px;
    }

    .inbox-list-foot[b-7onlq4b2st] {
        flex-wrap: wrap;
        gap: 4px 10px;
    }
}

/* ----- Reduzierte Bewegung: Übergänge ab, Zustandsfarben bleiben (FR-070) ----- */
@media (prefers-reduced-motion: reduce) {
    .inbox[b-7onlq4b2st], .inbox *[b-7onlq4b2st], .inbox *[b-7onlq4b2st]::before, .inbox *[b-7onlq4b2st]::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}
/* /Components/Questions/OptionSpalten.razor.rz.scp.css */
/* 157 B3 (contracts/antwortbereich.md §2): die drei Spalten im klickbaren
   Kästchen — echte Tabelle (Screenreader-Ordentlichkeit wie beim früheren
   Ausklapp), Mikro-Köpfe je Option. Die Wurzel ist Flex-Kind ihrer
   Kästchen-Zeile (Composer-Knopf, Bestands-Optionszeile) und nimmt die
   volle Breite DARUNTER (flex-basis 100%, Container wraps). */

.option-spalten[b-g0trqgs44d] {
    flex-basis: 100%;
    min-width: 0;
    margin-top: 7px;
}

.option-spalten-tabelle[b-g0trqgs44d] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.option-spalten-tabelle th[b-g0trqgs44d] {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-3);
    padding: 2px 10px 3px 0;
    border-bottom: 1px solid var(--border);
}

.option-spalten-tabelle td[b-g0trqgs44d] {
    width: 33.33%;
    vertical-align: top;
    padding: 4px 10px 2px 0;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.option-spalten-liste[b-g0trqgs44d] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 157 Nachtrag N7 (antwortbereich.md §2): das Vorzeichen als Aufzählungs-
   zeichen — eigene Marke vor dem Text (Mono, fett, 11 px, wie 154 B5); die
   einzige Farbe sind die Vorzeichen: Grün = Wahl-/Erfolgs-Vokabel, Rot =
   Warn-Vokabel, beide aus den Tokens (beide Themes). Der Text bricht um,
   das Zeichen bleibt oben an der ersten Zeile. */
.option-spalten-punkt[b-g0trqgs44d] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.option-spalten-zeichen[b-g0trqgs44d] {
    flex: 0 0 auto;
    width: 10px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
}

.option-spalten-text[b-g0trqgs44d] {
    min-width: 0;
}

.option-spalte-dafür .option-spalten-zeichen[b-g0trqgs44d] {
    color: var(--green);
}

.option-spalte-dagegen .option-spalten-zeichen[b-g0trqgs44d] {
    color: var(--red);
}
/* /Components/Questions/QuestionAnswerPanel.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep. */

.question-answer-panel[b-i1iyo6uwde] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 16px 18px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.question-answer-panel-field[b-i1iyo6uwde] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.question-answer-panel-field textarea[b-i1iyo6uwde] {
    width: 100%;
}

.question-answer-panel-actions[b-i1iyo6uwde] {
    display: flex;
    gap: 0.5rem;
}

.question-answer-panel-secondary[b-i1iyo6uwde] {
    background: var(--bg-4);
    border-color: var(--border);
    color: var(--text-2);
}

.question-answer-panel-secondary:hover[b-i1iyo6uwde] {
    filter: none;
    color: var(--text);
}

.question-answer-panel-danger[b-i1iyo6uwde] {
    background: rgba(255, 92, 92, .15);
    border-color: rgba(255, 92, 92, .4);
    color: var(--red);
}

.question-answer-panel-danger:hover[b-i1iyo6uwde] {
    background: rgba(255, 92, 92, .25);
    filter: none;
}

.question-answer-panel-answer[b-i1iyo6uwde] {
    margin: 0;
    color: var(--text);
    font-size: 13px;
}

.question-answer-panel-irrelevant[b-i1iyo6uwde] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}
/* /Components/Questions/QuestionOptionsAnswer.razor.rz.scp.css */
/*
    f35 T009 (specs/032, Design; contracts/options-darstellung.md G1–G7):
    die OPTIK des einen Options-Bausteins. Alle Klassen sind Mechanik-Anker
    (T008) und bleiben unangetastet — hier stehen nur Regeln darauf.
    Nur Bestands-Tokens (beide Themes); rgba-Tönungen nach dem
    Badge-Präzedenzfall (app.css).

    Die EINE Unterscheidung, an der hier alles hängt (G2/G4): Empfehlung
    und Wahl sind zwei verschiedene Aussagen und sprechen deshalb zwei
    verschiedene Sprachen —
      * EMPFEHLUNG („der Agent rät dazu") = Anmerkung AM Wortlaut:
        Akzent-Pille + gestrichelte Akzent-Kontur. Nichts ist gefüllt,
        nichts sieht entschieden aus.
      * WAHL („so wurde entschieden") = Zustand DER Zeile: grüne Kante +
        grüne Tönung — dieselbe Grün-Vokabel wie „beantwortet" (f25) und
        „ausgeführt" (f33).
*/

.question-options[b-btlpkmklwh] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Die Wahl-Aufforderung als Versal-Label — dieselbe Formsprache wie die
   Feld-Labels der Bestandsmasken: eine Anweisung, kein Fließtext. */
.question-options-prompt[b-btlpkmklwh] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-2);
}

/* Überlauf: lange Wortlaute brechen um, statt zu klemmen. 157 Nachtrag N7
   (antwortbereich.md §2, O-Ton „es darf einfach keinen Scroll-Container
   geben"): die Liste hat KEINEN eigenen Scroll-Bereich mehr (der Deckel
   18rem aus G6 entfällt) — alle Optionen stehen untereinander, gescrollt
   wird nur die Seite bzw. die Spalte. */
.question-options-list[b-btlpkmklwh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Jede Option ist eine ruhige Zeilen-Karte — die ganze Zeile ist Klickfläche
   (157 B3: auch die drei Spalten darin; sie brechen unter die Kopfzeile). */
.question-option label[b-btlpkmklwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 9px;
    padding: 8px 11px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.question-option label:hover[b-btlpkmklwh] {
    border-color: var(--border-light);
    background: var(--bg-3);
}

.question-option input[b-btlpkmklwh] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

.question-option input:disabled[b-btlpkmklwh] {
    cursor: default;
}

.question-option-text[b-btlpkmklwh] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* EMPFEHLUNG: Anmerkung, keine Entscheidung — gestrichelte Akzent-Kontur
   an der Zeile, die Pille trägt das Wort. */
.question-option-recommended > label[b-btlpkmklwh] {
    border-style: dashed;
    border-color: rgba(108, 140, 255, .55);
}

.question-option-badge[b-btlpkmklwh] {
    flex: 0 0 auto;
    align-self: center;
    padding: 1.5px 8px;
    border-radius: 999px;
    background: rgba(108, 140, 255, .13);
    border: 1px solid rgba(108, 140, 255, .35);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-left: auto;
}

/* WAHL: Zustand — grüne Kante + Tönung, gefüllt und ruhig. Eine gewählte
   Zeile bleibt voll lesbar, auch wenn der Baustein deaktiviert ist. */
.question-option-chosen > label[b-btlpkmklwh],
.question-option-chosen.question-option-recommended > label[b-btlpkmklwh] {
    border-style: solid;
    border-color: rgba(63, 206, 139, .4);
    border-left: 3px solid var(--green);
    background: rgba(63, 206, 139, .1);
    cursor: default;
}

.question-option-chosen .question-option-text[b-btlpkmklwh] {
    font-weight: 600;
}

/* Nach der Antwort treten die NICHT gewählten Zeilen zurück — die Frage
   sieht erledigt aus, ohne zu verschwinden. */
.question-option:has(input:disabled):not(.question-option-chosen) > label[b-btlpkmklwh] {
    background: transparent;
    cursor: default;
}

.question-option:has(input:disabled):not(.question-option-chosen) .question-option-text[b-btlpkmklwh] {
    color: var(--text-3);
}

/* Die Begründung gehört sichtbar ZUR Empfehlung: dieselbe Akzent-Vokabel
   als schmale Kante, zweitstufiger Text; T024: break-word (Breite definit). */
.question-options-reason[b-btlpkmklwh] {
    margin: 0;
    padding: 2px 0 2px 10px;
    border-left: 2px solid rgba(108, 140, 255, .45);
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.55;
    overflow-wrap: break-word;
}

.question-options-free[b-btlpkmklwh] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
    font-style: italic;
}

/* Freitext GLEICHWERTIG sichtbar (G3): eigenes Label in derselben
   Formsprache wie die Wahl-Aufforderung — kein Kleingedrucktes. */
.question-options-supplement[b-btlpkmklwh] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.question-options-supplement label[b-btlpkmklwh] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-2);
}

.question-options-supplement textarea[b-btlpkmklwh] {
    width: 100%;
    line-height: 1.55;
}

/* Antworten: Akzent-Primärknopf (Bestandsmuster) — eine Entscheidung,
   kein Alarm. */
.question-options-submit[b-btlpkmklwh] {
    align-self: flex-start;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* /Components/Questions/WeitereInformationen.razor.rz.scp.css */
/* 169 B3 (T012; contracts/ui-verhalten.md §2): die Gestaltung des Abschnitts
   „Weitere Informationen“ — bewusst dieselbe Sektions-Sprache wie der 157er-
   Block (Herkunft) der Inbox-Detailfläche (P2: „angelehnt“ = gleiche
   .sec/.sec-head-Gestaltung, kein Mischen). Der Baustein reist als EINE
   Umsetzung in alle Fragen-Flächen (FR-018) — deshalb trägt er seinen Rahmen
   selbst mit (Scoped-CSS erreicht keine Kind-Bausteine). */

.sec[b-e8rf9j49v7] {
    margin-top: 22px;
}

.sec-head[b-e8rf9j49v7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 7px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.sec-head .right[b-e8rf9j49v7] {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Die Zeilen: ruhige Karteilen wie die Fakten der Herkunft — Chip davor,
   Bezeichnung als Link (Farbe und Hover folgen dem globalen a des Kerns). */
.weitere-informationen[b-e8rf9j49v7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.weitere-information[b-e8rf9j49v7] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px 11px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Der Art-Chip (§2 „Knopf-Chip“): liest sich wie ein kleinen Knopf, ist aber
   bewusst KEIN Knopf — nichts hier ist klickbare Pflege (FR-012). */
.wi-art[b-e8rf9j49v7] {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 2px 8px;
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-2);
}

.wi-link[b-e8rf9j49v7] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    transition: color .12s ease;
}

.wi-link:hover[b-e8rf9j49v7],
.wi-link:focus-visible[b-e8rf9j49v7] {
    color: var(--accent-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Das External-Symbol nur am Web-Link — der Absprung nach außen sieht anders
   aus als der Sprung in eine App-Fläche (Vorbild anf-link--mockup, 168). */
.wi-extern[b-e8rf9j49v7] {
    flex: none;
    opacity: .65;
}
/* /Components/Requirements/AnforderungenKrümel.razor.rz.scp.css */
/* 149 T021: der Krümelpfad der Anforderungen in der Unterzeile des
   Detail-Kopfs (Vorlage basis.css .krümel) — Farben nur aus den Tokens. */

.anf-krümel[b-2i0mxux6p9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.anf-krümel-segment[b-2i0mxux6p9] {
    word-break: break-all;
}

button.anf-krümel-segment[b-2i0mxux6p9] {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent-2);
    font-size: inherit;
    cursor: pointer;
}

button.anf-krümel-segment:hover[b-2i0mxux6p9] {
    text-decoration: underline;
}

.anf-krümel-name[b-2i0mxux6p9] {
    color: var(--text-2);
}

.anf-krümel-trenner[b-2i0mxux6p9] {
    color: var(--text-3);
}
/* /Components/Requirements/AnforderungenMarkdown.razor.rz.scp.css */
/* 149 T021: die gerenderte Markdown-Ansicht der Anforderungen (Werte aus
   der Datei-Ansicht von 147 übernommen) — Farben nur aus den Tokens. */

.anf-datei-inhalt[b-3yt5fr5ohd] {
    font-size: 13.5px;
    line-height: 1.55;
    overflow-x: auto;
}

.anf-datei-bild-hinweis[b-3yt5fr5ohd] {
    margin: 8px 0 0;
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-3);
}
/* /Components/Requirements/AnforderungenMaske.razor.rz.scp.css */
/* 149 T021 (contracts/werkbank-ui.md §3.7): nur, was die Anforderungen von
   den Werkbank-Bausteinen unterscheidet — Optik und Maße kommen aus der
   Werkbank-Familie in app.css (plan A1). Farben nur aus den Tokens. */

/* ① Der Zähler am Kopf-Knopf „Eingang“ (Vorlage basis.css .af-btn .zähler). */
.anf-eingang-zähler[b-ygxu3vd8s4] {
    font-family: var(--mono);
    font-size: 10.5px;
    background: var(--bg-3);
    border-radius: 999px;
    padding: 0 6px;
    color: var(--text-2);
}

/* ⑤ Ordner: der Inhalt als Zeilen im Abschnitt. */
.anf-ordner-inhalt-zahl[b-ygxu3vd8s4] {
    font-family: var(--mono);
    font-weight: 400;
    color: var(--text-3);
}

.anf-ordner-leer[b-ygxu3vd8s4] {
    margin: 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--text-3);
}

/* ⑦ Anlegen: das Formular beginnt mit Luft unter dem Detail-Kopf (Muster Verfassung). */
.anf-anlegen[b-ygxu3vd8s4] {
    padding-top: 12px;
}

.anf-anlegen .anf-eintrag-pfad[b-ygxu3vd8s4] {
    font-family: var(--mono);
    font-size: 12.5px;
}

.anf-anlegen .anf-eintrag-inhalt[b-ygxu3vd8s4] {
    font-family: var(--mono);
    font-size: 12.5px;
}
/* /Components/Requirements/AufnahmeDialog.razor.rz.scp.css */
/* 151 B1 (T003): das Aufnahme-Modal — Fläche, Rahmen, Knöpfe und Einblenden
   kommen aus der Dialog-Familie (app.css .af-modal-*); hier stehen nur die
   Größe des großen Editors und die Anordnung der Fuß-Zone (Häkchen links,
   „Abbrechen | Speichern“ rechts). Farben nur aus den Theme-Tokens. */

.anf-aufnahme-dialog[b-vbc16ph00h] {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.anf-aufnahme-kopf[b-vbc16ph00h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.anf-aufnahme-kopf h2[b-vbc16ph00h] {
    margin-bottom: 0;
}

/* Der Editor ist die große Zone des Modals (spec FR-003). */
.anf-aufnahme-text[b-vbc16ph00h] {
    width: 100%;
    min-height: 15rem;
    resize: vertical;
}

.anf-aufnahme-leiste[b-vbc16ph00h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

/* Fuß der Spec: links das (in B1 ruhende) Häkchen, rechts die Aktionen.
   Die Familien-Abstände von .af-modal-actions wandern an den Fuß. */
.anf-aufnahme-fuß[b-vbc16ph00h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.anf-aufnahme-fuß .af-modal-actions[b-vbc16ph00h] {
    margin: 0;
    padding: 0;
    border: 0;
}

.anf-aufnahme-häkchen[b-vbc16ph00h] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
}
/* /Components/Requirements/AufnahmeSpracheingabe.razor.rz.scp.css */
/* 151 B4 (T012): die Spracheingabe im Aufnahme-Modal — Taste und Status in
   einer Reihe unterhalb der Form-Zonen; Farben und Knöpfe nur aus der
   Dialog-Familie und den Theme-Tokens. */
.anf-aufnahme-sprache[b-zya2wh0kph] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.anf-aufnahme-sprache-laden[b-zya2wh0kph],
.anf-aufnahme-sprache-keine-wege[b-zya2wh0kph] {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
}

.anf-aufnahme-sprache-status[b-zya2wh0kph] {
    font-size: 13px;
    color: var(--text-2);
}
/* /Components/Requirements/IntakePanel.razor.rz.scp.css */
/* 147 B6 (T026): der Eingang der Fläche „Anforderungen“ — Kopf, Aktionen,
   Text-Formular und die einfache Liste. Farben nur aus den Theme-Tokens. */

.anf-eingang[b-r1sf1c5kwb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
}

.anf-eingang-kopf h2[b-r1sf1c5kwb] {
    margin: 0;
    font-size: 16px;
}

.anf-eingang-sub[b-r1sf1c5kwb] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-3);
}

.anf-eingang-aktionen[b-r1sf1c5kwb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Der Upload-Knopf ist ein Label über dem unsichtbaren, WIRKSAMEN Feld
   (Muster Chat-Beilage). InputFile ist eine Kind-Komponente — ::deep
   trifft das echte <input> (Befund 141 fix B). */
.anf-eingang-dateien-knopf[b-r1sf1c5kwb] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    overflow: hidden;
    cursor: pointer;
}

.anf-eingang-dateien-knopf:focus-within[b-r1sf1c5kwb] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.anf-eingang-dateien-knopf.is-disabled[b-r1sf1c5kwb] {
    opacity: .5;
    cursor: not-allowed;
}

.anf-eingang-dateien-knopf[b-r1sf1c5kwb]  .anf-eingang-dateien {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.anf-eingang-text-form[b-r1sf1c5kwb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
}

.anf-eingang-titel[b-r1sf1c5kwb],
.anf-eingang-textfeld[b-r1sf1c5kwb] {
    width: 100%;
}

.anf-eingang-textfeld[b-r1sf1c5kwb] {
    min-height: 8rem;
    resize: vertical;
}

.anf-eingang-form-aktionen[b-r1sf1c5kwb] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.anf-eingang-liste[b-r1sf1c5kwb] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.anf-eingang-eintrag[b-r1sf1c5kwb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.anf-eingang-eintrag:last-child[b-r1sf1c5kwb] {
    border-bottom: none;
}

.anf-eingang-öffnen[b-r1sf1c5kwb] {
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.anf-eingang-öffnen:hover[b-r1sf1c5kwb] {
    text-decoration: underline;
}

.anf-eingang-größe[b-r1sf1c5kwb],
.anf-eingang-zeit[b-r1sf1c5kwb] {
    color: var(--text-3);
    font-size: 12px;
    white-space: nowrap;
}

.anf-eingang-leer[b-r1sf1c5kwb],
.anf-eingang-hinweis[b-r1sf1c5kwb] {
    margin: 0;
    color: var(--text-3);
    font-style: italic;
    font-size: 12.5px;
}

.anf-eingang-fehler[b-r1sf1c5kwb] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    color: var(--red-text);
    font-size: 13px;
}

/* 147 B7 (T030): der Hinweis „Einsortieren läuft …“ mit dem Weg zum
   Transkript — Farben nur aus den Theme-Tokens. */
.anf-eingang-einsortieren-läuft[b-r1sf1c5kwb] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-size: 13px;
}
/* /Components/Requirements/RequirementsEntryDialog.razor.rz.scp.css */
/* 147 T013: der Eintrags-Dialog — Fläche, Rahmen, Knöpfe und Einblenden
   kommen aus der Dialog-Familie (app.css .af-modal-*); hier steht nur, was
   dieser Dialog eigenes braucht: die Breite und die Feldsprache. */

.anf-eintrag-dialog[b-5nxtkdeak8] {
    width: min(620px, calc(100vw - 32px));
}

.anf-eintrag-pfad[b-5nxtkdeak8] {
    width: 100%;
    font-family: var(--mono);
    font-size: 13px;
}

.anf-eintrag-inhalt[b-5nxtkdeak8] {
    width: 100%;
    min-height: 9rem;
    font-family: var(--mono);
    font-size: 12.5px;
    resize: vertical;
}

.anf-eintrag-hinweis[b-5nxtkdeak8] {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--text-2);
}

.anf-eintrag-fehler[b-5nxtkdeak8] {
    margin: 0;
    font-size: 12.5px;
}
/* /Components/Requirements/RequirementsFileEditor.razor.rz.scp.css */
/* 147 T013: der Editor der Fläche „Anforderungen“ — Maske im Vokabular des
   Artefakt-Editors (137) und der Verfassung; Farben nur aus den Tokens.
   149 T021: Kopf und Fuß kommen aus den Werkbank-Bausteinen (DetailKopf,
   FormularFuß); hier bleiben Werkzeugleiste, Textfeld und Hinweis. */

.anf-editor[b-w707yzfy0b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
}

.anf-editor-pfad[b-w707yzfy0b] {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-2);
    word-break: break-all;
}

.anf-editor-leiste[b-w707yzfy0b] {
    display: flex;
    gap: 4px;
}

.anf-editor-leiste button[b-w707yzfy0b] {
    padding: 2px 8px;
    font-size: 12px;
}

.anf-editor-inhalt[b-w707yzfy0b] {
    width: 100%;
    min-height: 16rem;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
}

.anf-editor-veraltet[b-w707yzfy0b] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    color: var(--red-text);
    font-size: 12.5px;
}
/* /Components/Requirements/RequirementsFileView.razor.rz.scp.css */
/* 147 T013: die Datei-Ansicht der Fläche „Anforderungen“ — Meta-Zeile
   (wer/wann), Audio, darunter die gerenderte bzw. Quelltext-Ansicht aus
   DEMSELBEN Stand. Farben nur aus den Theme-Tokens.
   149 T021: Kopf, Krümelpfad, Aktionen und „Gerendert | Quelltext“ kommen
   aus den Werkbank-Bausteinen (DetailKopf, AnforderungenKrümel,
   AktionsMenü, DokumentAnsicht); hier bleibt nur der Körper. Abstände über
   Ränder statt Flex — der Körper rollt (.af-detail-körper), seine Kinder
   sollen nicht schrumpfen. */

.anf-datei > * + *[b-04br7lptz6] {
    margin-top: 10px;
}

.anf-datei-meta[b-04br7lptz6] {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-3);
}

/* 167 B10 (T055; ui-verhalten §8): der Lesehinweis an der Fragenrunden-Datei —
   eine leise Zeile mit blauer Kante (Information, keine Warnung), die Zahl fett. */
.anf-datei-inbox-hinweis[b-04br7lptz6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 7px 12px;
    border: 1px solid rgba(77, 163, 255, .35);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: rgba(77, 163, 255, .07);
    color: var(--text-2);
    font-size: 12.5px;
}

.anf-datei-inbox-hinweis b[b-04br7lptz6] {
    color: var(--blue-text);
    font-variant-numeric: tabular-nums;
}

.anf-datei-inbox-hinweis[b-04br7lptz6]  svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--blue-text);
}

.anf-datei-download[b-04br7lptz6] {
    text-decoration: none;
}

.anf-datei-verwaltet[b-04br7lptz6] {
    font-style: italic;
}

.anf-datei-audio-zeile[b-04br7lptz6] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.anf-datei-audio[b-04br7lptz6] {
    max-width: 100%;
}

.anf-datei-audio-download[b-04br7lptz6] {
    font-size: 12.5px;
}

.anf-datei-text[b-04br7lptz6] {
    margin: 0;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.anf-datei-binär[b-04br7lptz6] {
    padding: 12px 14px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 13px;
}

.anf-datei-binär p[b-04br7lptz6] {
    margin: 0;
}

.anf-datei-binär .anf-datei-größe[b-04br7lptz6] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-3);
}
/* /Components/Requirements/RequirementsTree.razor.rz.scp.css */
/* 147 T013: der Verzeichnisbaum der Fläche „Anforderungen“ — eine Spalte,
   Farben nur aus den Theme-Tokens (app.css), damit helles und dunkles Theme
   ohne Sonderwerte tragen.

   147-Nachtrag (Rückmeldung der Fachperson 2026-09-25: „man erkennt die
   Ordner-Struktur nicht richtig“): Ordner- und Datei-Symbole, ein drehender
   Pfeil und je Ebene eine senkrechte Führungslinie. Die Zeilen stehen ohne
   Lücke untereinander, damit die Linien einer Ebene durchlaufen. */

.anf-baum[b-cddsbqwbui] {
    list-style: none;
    margin: 0;
    padding: 6px 4px;
}

.anf-baum-zeile[b-cddsbqwbui] {
    display: flex;
    align-items: stretch;
    min-height: 28px;
}

/* Eine Ebene Einzug: 18 px mit der Führungslinie in der Mitte. */
.anf-baum-führung[b-cddsbqwbui] {
    flex: 0 0 18px;
    width: 18px;
    position: relative;
}

.anf-baum-führung[b-cddsbqwbui]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    border-left: 1px solid var(--border-light);
}

.anf-baum-schalter[b-cddsbqwbui],
.anf-baum-platz[b-cddsbqwbui] {
    flex: 0 0 20px;
    width: 20px;
}

.anf-baum-schalter[b-cddsbqwbui] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.anf-baum-schalter:hover[b-cddsbqwbui] {
    color: var(--text);
    background: var(--bg-3);
}

.anf-baum-pfeil[b-cddsbqwbui] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .12s ease;
}

.anf-baum-schalter.offen .anf-baum-pfeil[b-cddsbqwbui] {
    transform: rotate(90deg);
}

.anf-baum-eintrag[b-cddsbqwbui] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 3px 8px 3px 4px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.anf-baum-eintrag:hover[b-cddsbqwbui] {
    background: var(--bg-3);
}

.anf-baum-eintrag.gewählt[b-cddsbqwbui] {
    background: var(--bg-4);
    box-shadow: inset 2px 0 0 var(--accent);
}

.anf-baum-ordner .anf-baum-name[b-cddsbqwbui] {
    font-weight: 600;
}

.anf-baum-eintrag.gewählt .anf-baum-name[b-cddsbqwbui] {
    font-weight: 600;
}

.anf-baum-name[b-cddsbqwbui] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Symbole: Ordner gefüllt in Gelb, Markdown in Blau, übrige Dateien
   gedämpft — die Art ist auf einen Blick erkennbar. */
.anf-baum-symbol[b-cddsbqwbui] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
}

.anf-baum-symbol svg[b-cddsbqwbui] {
    width: 16px;
    height: 16px;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.symbol-ordner svg[b-cddsbqwbui],
.symbol-ordner-offen svg[b-cddsbqwbui] {
    color: var(--yellow);
    fill: currentColor;
    fill-opacity: .28;
    stroke: currentColor;
}

.symbol-ordner-offen .anf-baum-symbol-klappe[b-cddsbqwbui] {
    fill-opacity: .55;
}

.symbol-markdown svg[b-cddsbqwbui],
.symbol-datei svg[b-cddsbqwbui] {
    fill: none;
    stroke: currentColor;
}

.symbol-markdown svg[b-cddsbqwbui] {
    color: var(--blue-text);
}

.symbol-datei svg[b-cddsbqwbui] {
    color: var(--text-3);
}

.anf-baum-verwaltet[b-cddsbqwbui] {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-3);
}

/* 147 B6: die Zahl der Einträge am Eingang — dezente Marke rechts. */
.anf-baum-zähler[b-cddsbqwbui] {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 1.4em;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-4);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* 168 B6 (ui-verhalten §6): „In der Galerie öffnen“ am Ordner 04-ui-konzepte/
   und an jedem Mockup — ein kleiner Kontext-Knopf am rechten Rand der Zeile.
   Ruhig im Stand (gedämpft), deutlich beim Zeigen, Fokussieren und an der
   gewählten Zeile; Farbe aus dem Akzent, damit er als Absprung lesbar ist. */
.anf-galerie-link[b-cddsbqwbui] {
    flex: 0 0 26px;
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    opacity: .55;
    transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}

.anf-galerie-link[b-cddsbqwbui]  svg {
    width: 15px;
    height: 15px;
}

.anf-baum-zeile:hover .anf-galerie-link[b-cddsbqwbui],
.anf-baum-eintrag.gewählt + .anf-galerie-link[b-cddsbqwbui] {
    opacity: 1;
}

.anf-galerie-link:hover[b-cddsbqwbui],
.anf-galerie-link:focus-visible[b-cddsbqwbui] {
    opacity: 1;
    color: var(--accent);
    background: var(--tint-accent);
}

.anf-galerie-link:focus-visible[b-cddsbqwbui] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
/* /Components/Requirements/TranscriptionDialog.razor.rz.scp.css */
/* 147 B6 (T026): der Transkriptions-Dialog — Fläche, Rahmen, Knöpfe und
   Einblenden kommen aus der Dialog-Familie (app.css .af-modal-*); hier
   stehen nur Breite, Steuerzeile, Kostenzeile und das Textfeld. Farben nur
   aus den Theme-Tokens. */

.anf-trans-dialog[b-6gaou4azkp] {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.anf-trans-weg[b-6gaou4azkp],
.anf-trans-titel[b-6gaou4azkp] {
    width: 100%;
}

/* InputFile ist eine Kind-Komponente: ihr <input> trägt das Scoped-Attribut
   nicht — ::deep trifft das echte Element (Befund 141 fix B). */
.anf-trans-dialog[b-6gaou4azkp]  .anf-trans-datei {
    width: 100%;
}

.anf-trans-steuerung[b-6gaou4azkp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 10px;
}

.anf-trans-status[b-6gaou4azkp] {
    font-size: 12.5px;
    color: var(--text-2);
}

.anf-trans-fortschritt[b-6gaou4azkp] {
    flex: 1 1 12rem;
    min-width: 8rem;
}

.anf-trans-kosten[b-6gaou4azkp] {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-2);
}

.anf-trans-text[b-6gaou4azkp] {
    min-height: 7rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.55;
}

.anf-trans-noch-leer[b-6gaou4azkp],
.anf-trans-hinweis[b-6gaou4azkp] {
    color: var(--text-3);
    font-style: italic;
    font-size: 12.5px;
}

.anf-trans-keine-wege[b-6gaou4azkp] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
}

.anf-trans-kontenpflege[b-6gaou4azkp] {
    margin-left: 4px;
}

.anf-trans-fehler[b-6gaou4azkp],
.anf-trans-anbieter-fehler[b-6gaou4azkp] {
    margin: 8px 0 0;
    font-size: 12.5px;
}
/* /Components/Runs/AgentenLäufeFlaeche.razor.rz.scp.css */
/* 157 B2 T003 → 165 B3 T013 → 175 B4 (specs/175-agenten-läufe; Gestalt-
   Vorlage mockups/agenten-läufe/gemeinsam/läufe.css — Zeilen-Dichte 28 px,
   Einrückung 18 px, Baumlinie, Gruppen-Zeilen, Klapp-Pfeile, Marken,
   Zählfuß): die Masken-eigenen Nuancen — die Arbeit tragen die af-Bausteine
   aus app.css (af-maske, af-werkbank, af-liste 380 px, af-page-head,
   af-hinweisleiste, af-lz, af-ag-Familie 172, af-detail-körper, af-abschnitt,
   af-eig). Hier liegen die dichte Zeile, der Baum und die Gruppen-Köpfe
   „nach Aufgabe“.

   Scope (165 Abnahme-Befund B2/B3): JEDE ::deep-Regel hängt an einem
   Scope-ANKER, den diese .razor selbst rendert (.läufe-maske,
   .läufe-detail-körper). Die Zeilen und Gruppen-Köpfe sind EIGENE Elemente
   dieser Datei — ihre Regeln brauchen kein ::deep. */

/* ——— FR-016 Scrollen: Liste und Detail scrollen JE für sich. Die Karte ist
        ein Flex-Kind mit min-height:0, sonst könnte sie nie unter ihre
        Inhaltshöhe schrumpfen und der Inhalt würde abgeschnitten. Der
        Detail-Körper rollt über .af-detail-körper (app.css). */
.läufe-maske[b-lmryxqphca] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* ——— Zone ② (175 B5, §7): die Flächen-Hinweisleiste — Wartet-Punkt, RAM-
        Warn-Punkt, Trenner und die Sprünge als Links. */
.läufe-hinweis-warn[b-lmryxqphca] {
    display: inline-block;
    margin-right: 8px;
    vertical-align: 1px;
}

.läufe-hinweis-trenner[b-lmryxqphca] {
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: 0 14px 0 4px;
    vertical-align: -2px;
    background: var(--border);
}

.läufe-hinweis-sprung[b-lmryxqphca] {
    margin-left: 10px;
    white-space: nowrap;
}

/* Der alte grüne Puls (B4) entfällt mit der Lag-Leiste — die Punkte der
   neuen Leiste kommen aus af-punkt/af-warn-puls (app.css). */
.läufe-hinweis-wartet[b-lmryxqphca] {
    display: inline-block;
    margin-right: 8px;
    vertical-align: 1px;
}

.läufe-maske[b-lmryxqphca]  .af-werkbank {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.läufe-maske[b-lmryxqphca]  .af-liste,
.läufe-maske[b-lmryxqphca]  .af-detail {
    min-width: 0;
    min-height: 0;
}

/* 175 Nachtrag 2026-10-17 (T025, Abnahme-Befund: „Es gibt eine horizontale
   Scrollbar“): die Liste rollt nur senkrecht. Die Zeilen passen in die
   380 px (siehe .läufe-kind und die Zeilen-Spalten unten) — die Sperre
   fängt nur, was dennoch übersteht, statt eine Scrollbar aufzuspannen. */
.läufe-maske[b-lmryxqphca]  .af-liste-scroll {
    overflow-x: hidden;
}

.läufe-detail-inhalt[b-lmryxqphca] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

.läufe-detail-körper[b-lmryxqphca] {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* ——— Zone ③: der Gliederungs-Umschalter unter den Chips ( MOCKUP
        rahmen.js — kleine Segmente, wie der Bereichsumschalter). */
.läufe-gliederung[b-lmryxqphca] {
    margin-left: auto;
}

/* ——— Zone ④: die Lauf-Zeile — EINE Zeile, 28 px (Vorlage .lr). Die Zeile
        ist ein eigenes Element dieser .razor (kein Parameter einer
        Komponente mehr) — die Regeln brauchen kein ::deep und träfen
        immer. */
.läufe-zeile[b-lmryxqphca] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    width: 100%;
    min-width: 0;
    padding: 0 6px 0 4px;
    margin-bottom: 1px;
    font-size: 12.5px;
    line-height: 1;
    border-radius: 6px;
    transition: background .1s;
}

/* Der Knopf der Zeile trägt af-lz (werkbank.js ↑/↓, Bestands-Optik). Dessen
   Grundregel (app.css, 0-1-0) und diese Zeilen-Regel sind gleich spezifisch
   — die Bundle-Reihenfolge ist keine Zusicherung. Darum steht die dichte
   Gestalt ZUSÄTZLICH hinter dem Masken-Anker (spezifischer, deterministisch). */
.läufe-maske[b-lmryxqphca]  button.af-lz.läufe-zeile {
    height: 28px;
    padding: 0 6px 0 4px;
    margin-bottom: 1px;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1;
    border-color: transparent;
    background: transparent;
}

.läufe-zeile:focus-visible[b-lmryxqphca] {
    outline-offset: -2px;
}

/* Der Klapp-Pfeil (nur bei Baum): 16 px breit, 18 px hoch — klein genug für
   die dichte Zeile, groß genug als Ziel (Vorlage .lr-klapp). */
.läufe-klapp[b-lmryxqphca] {
    width: 16px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: var(--text-3);
    cursor: pointer;
}

button.af-lz .läufe-klapp:hover[b-lmryxqphca] {
    background: var(--bg-4);
    color: var(--text);
}

/* 175 Nachtrag 2026-10-18 (T028): das svg rendert die Kind-Komponente
   Symbol — es trägt das Scope-Attribut nicht, darum hängt die Regel am
   Masken-Anker mit ::deep. Zustand wie die Gruppenköpfe (.af-ag-chev):
   „runter“ zeigt offen nach unten, zu dreht es nach rechts. */
.läufe-maske[b-lmryxqphca]  .läufe-klapp svg {
    width: 10px;
    height: 10px;
    transition: transform .15s ease;
}

.läufe-maske[b-lmryxqphca]  .läufe-klapp[aria-expanded="false"] svg {
    transform: rotate(-90deg);
}

/* Der Status-Punkt: 8 px, frei vor der Persona (kein 28-px-Kästchen mehr —
   die Gestalt kommt aus VerlaufSicht.PunktKlasse, DIE EINE Zuordnung).
   165-Nachtrag zu de9d5ba2 (Designer-Abgleich „Statusfarbe greift“): Die
   Gestalt-Grundregel trägt den Attribut-Selektor [class^='tl-punkt'], weil
   PunktKlasse KEINE Basisklasse mitgibt (z. B. nur „tl-punkt-erfolg“) —
   (0,2,1). Die FARBE-Regeln hängen ihre Klasse deshalb HINTEN an denselben
   Attribut-Selektor ((0,3,0), Muster des Detail-Kopfs unten) — als eigene
   Klasse wäre die Farbe gegen die Grundregel unspezifischer und der Punkt
   bliebe grau und halb durchsichtig (B4-Gate-Befund auf 627e5666). */
.läufe-zeile > .tl-punkt[b-lmryxqphca],
.läufe-zeile > span[class^='tl-punkt'][b-lmryxqphca] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--text-3);
    opacity: .5;
}

.läufe-zeile > [class^='tl-punkt'].tl-punkt-erfolg[b-lmryxqphca] {
    background: var(--green);
    opacity: 1;
}

.läufe-zeile > [class^='tl-punkt'].tl-punkt-block[b-lmryxqphca] {
    background: var(--yellow);
    opacity: 1;
}

.läufe-zeile > [class^='tl-punkt'].tl-punkt-fehler[b-lmryxqphca] {
    background: var(--red);
    opacity: 1;
}

.läufe-zeile > [class^='tl-punkt'].tl-punkt-fehler.tl-punkt-hohl[b-lmryxqphca] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--red);
}

.läufe-zeile > [class^='tl-punkt'].tl-punkt-läuft[b-lmryxqphca] {
    background: var(--accent);
    opacity: 1;
    animation: af-läufe-puls-b-lmryxqphca 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .läufe-zeile > [class^='tl-punkt'].tl-punkt-läuft[b-lmryxqphca] {
        animation: none;
    }
}

@keyframes af-läufe-puls-b-lmryxqphca {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.82);
    }
}

/* Persona mit der kleinen Rollen-Marke bei Subagenten (MOCKUP Nacharbeit
   „Zeilentext stark gekürzt“). 175 Nachtrag 2026-10-17 (T025): Der Name
   kürzt sich mit „…“ (voller Name im Titel), Bild und Rollen-Marke behalten
   ihre Breite. Die Persona nimmt höchstens die Hälfte der Zeilen-Mitte —
   der Aufgaben-Titel daneben bleibt immer lesbar (vorher: beide auf null
   Breite gestaucht). */
.läufe-persona[b-lmryxqphca] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    max-width: 50%;
    min-width: 0;
}

.läufe-persona > :first-child[b-lmryxqphca] {
    flex: none;
}

/* 175 Nachtrag 2026-10-17 (Browser-Befund 1): Jede Spalte, die mit „…“
   kürzt (overflow: hidden), trägt eine eigene Zeilenhöhe von 1,45. Die
   Zeile setzt line-height: 1 — mit overflow: hidden schnitt das die
   Umlaut-Punkte („Uberwacher“) und Unterlängen („Überwachunq“) ab. */
.läufe-persona-name[b-lmryxqphca] {
    flex: 0 1 auto;
    max-width: 112px;
    min-width: 0;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* Die Rollen-Marke deutsch und in normaler Schreibung (keine Großschrift —
   „Fehlerbehebung“ wäre sonst breiter als der Name). 175 T030 (Browser-
   Befund bro-3, „Review“ rechts abgeschnitten): die Marke schrumpft nicht
   mehr mit — in der eingerückten Unter-Zeile kürzt der Persona-Name, die
   Marke bleibt ganz. Nur ein Wort über 84 px kürzt sie selbst mit „…“; das
   geht nur als Block-Kasten (die Grundgestalt .af-badge ist ein Flex-
   Kasten, darin greift text-overflow nicht und das Wort war hart gekappt;
   die Scope-Regel schlägt .af-badge aus app.css). */
.läufe-rolle[b-lmryxqphca] {
    display: inline-block;
    flex: none;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 1px 5px;
    line-height: 1.4;
}

/* Der Zeilen-Text: flexibel, gekürzt mit Ellipsis — der volle Titel steht im
   title der Spalte (AN5: Kürzung in der Zeile über den Überlauf). */
.läufe-text[b-lmryxqphca] {
    flex: 1 1 0;
    min-width: 24px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.af-lz-an .läufe-text[b-lmryxqphca] {
    color: var(--text-2);
}

/* Marken: „+n“, RAM-Warnmarke und — nur bei Abweichung vom Erfolg — das
   Status-Wort, kompakt und ohne Umbruch (Vorlage .lr-plus/.lr-ram). 175
   Nachtrag 2026-10-17 (T025): Kein Auslöser-Tag mehr in der Zeile (die
   Vorlage liste.js kennt keinen — der Zeilen-Text nennt Aufgabe oder
   Auslöser, der Detail-Kopf trägt die Marke), und das Status-Wort ohne
   Großschrift. Leer nimmt die Spalte keinen Platz. */
.läufe-marken[b-lmryxqphca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    min-width: 0;
}

.läufe-marken:empty[b-lmryxqphca] {
    display: none;
}

.läufe-marken .af-badge[b-lmryxqphca] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 1px 6px;
    line-height: 1.4;
    white-space: nowrap;
}

.läufe-plus[b-lmryxqphca] {
    flex: none;
    font-family: var(--mono, ui-monospace);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--bg-4);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 5px;
    line-height: 1.4;
}

.läufe-ram[b-lmryxqphca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Rechts: Tokens und Dauer in EINER Zeile, je in fester Spalte rechtsbündig
   mit tabellarischen Ziffern (Vorlage .lr-tok/.lr-zeit) — so stehen die
   Werte aller Zeilen untereinander. 175 Nachtrag 2026-10-17 (T025): Die
   Spalten sind fest (flex: none, feste Breite); die Schrift ist die der
   Zeile mit tabellarischen Ziffern statt Monospace — „30 min 5 s“ passt so
   in 58 px, wo die Monospace-Fassung abgeschnitten wurde. Die tickende
   Dauer ist blau und kräftig (LaufzeitAnzeige trägt die Klasse). */
.läufe-rechts[b-lmryxqphca] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: none;
    font-size: 10.5px;
    color: var(--text-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.läufe-tokens[b-lmryxqphca] {
    flex: none;
    width: 34px;
    text-align: right;
    color: var(--text-2);
    font-weight: 600;
}

.läufe-tokens-leer[b-lmryxqphca] {
    color: var(--text-3);
    font-weight: 400;
}

.läufe-maske[b-lmryxqphca]  .läufe-rechts .läufe-laufzeit {
    display: inline-block;
    flex: none;
    min-width: 58px;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    line-height: 1.45;
}

/* ——— Der Baum: Kinder 18 px tiefer als der Punkt des Eltern-Laufs, mit
        sichtbarer Führungslinie (MOCKUP Nacharbeit „Subagenten kaum
        eingerückt“). Die Waagerechte führt vom Ast zur Zeile, die
        Senkrechte läuft durch die Geschwister und endet am letzten Kind.
   175 Nachtrag 2026-10-17 (T025): Die Einrückung geht von der Breite ab
   (vorher 100 % + 18 px Rand — jede Kind-Zeile stand 18 px über die Liste
   hinaus und spannte die waagrechte Scrollbar auf). */
.läufe-kind[b-lmryxqphca] {
    margin-left: 18px;
    width: calc(100% - 18px);
    position: relative;
}

.läufe-maske[b-lmryxqphca]  button.af-lz.läufe-zeile.läufe-kind {
    width: calc(100% - 18px);
}

.läufe-kind[b-lmryxqphca]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--border-light);
}

.läufe-kind[b-lmryxqphca]::after {
    content: "";
    position: absolute;
    left: -10px;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: var(--border-light);
}

/* Das letzte Kind der Geschwister-Reihe: die Linie endet in der Zeilen-Mitte
   (Vorlage .lr-kinder::before bottom:14px). */
.läufe-kind-letztes[b-lmryxqphca]::after {
    bottom: 50%;
}

/* Der blasse Eltern-Lauf (§2 Nr. 6): sichtbarer Kontext, nicht wählbar. */
.läufe-zeile-zusammenhang[b-lmryxqphca] {
    opacity: .45;
    cursor: default;
    color: var(--text-2);
}

/* ——— Zone ③: die Gruppen-Köpfe. „Nach Alter“ trägt die Kapitälchen-Gestalt
   der af-ag-Familie (app.css, 172) unverändert; „nach Aufgabe“ (MOCKUP
   variante-b) ist eine Zeile mit Titel, Organisation, Aktiv-Punkt, Zeit und
   Anzahl — keine Kapitälchen, dafür Kursiv für „Ohne Aufgabe“. */
.läufe-gruppe-aufgabe .af-ag-kopf[b-lmryxqphca] {
    font-variant-caps: normal;
    letter-spacing: 0;
    font-size: 12px;
    height: 27px;
    min-width: 0;
}

/* 175 Nachtrag 2026-10-17 (T025): lange Aufgaben-Titel kürzen sich mit „…“
   (der volle Titel steht im Titel des Kopf-Knopfs) statt hart abgeschnitten
   zu werden — die Bestands-Regel .af-ag-titel (app.css) steht auf
   flex: none für die kurzen Alters-Titel. Zeit, Anzahl und Haarlinie
   behalten ihren Platz. */
.läufe-gruppe-aufgabe .af-ag-titel[b-lmryxqphca] {
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.läufe-gruppe-aufgabe .af-ag-kopf .af-ag-linie[b-lmryxqphca] {
    min-width: 8px;
}

.läufe-gruppe-ohne[b-lmryxqphca] {
    font-style: italic;
    font-weight: 600;
}

.läufe-gruppe-läuft[b-lmryxqphca] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-2, var(--accent));
    flex: none;
}

@media (prefers-reduced-motion: no-preference) {
    .läufe-gruppe-läuft[b-lmryxqphca] {
        animation: af-läufe-puls-b-lmryxqphca 1.8s ease-in-out infinite;
    }
}

.läufe-gruppe-zeit[b-lmryxqphca] {
    flex: none;
    font-family: var(--mono, ui-monospace);
    font-size: 10.5px;
    color: var(--text-3);
}

.läufe-gruppe-org[b-lmryxqphca] {
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-3);
}

/* ——— Zählfuß (175 Nachtrag 2026-10-17, T025 → T030): ohne Filter eine
        Zeile — „n von m Läufen geladen · k zugeklappt“ links, „Mehr laden“
        rechts. Kein Teil bricht IN SICH um (T025: „Mehr laden“ stand
        gebrochen). T030 (Browser-Befund bro-3, 1280 px): mit Filter passen
        Zahl, Zusatz, „Mehr laden“ und „Filter zurücksetzen“ nicht in 380 px —
        die Zahl wurde abgeschnitten („108 von 112…“). Darum darf der Fuß
        zwischen den Teilen umbrechen; stehen „Mehr laden“ und „Filter
        zurücksetzen“ beide da, stehen sie fest in der zweiten Zeile rechts,
        die Zählung lesbar darüber. */
.läufe-maske[b-lmryxqphca]  .läufe-zählung {
    flex-wrap: wrap;
    row-gap: 3px;
    column-gap: 8px;
    min-width: 0;
}

.läufe-maske[b-lmryxqphca]  .läufe-zählung .af-lf-zahl {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.läufe-maske[b-lmryxqphca]  .läufe-zählung .af-lf-zusatz,
.läufe-maske[b-lmryxqphca]  .läufe-zählung .af-lf-mehr,
.läufe-maske[b-lmryxqphca]  .läufe-zählung .af-lf-rechts {
    flex: none;
    white-space: nowrap;
}

.läufe-maske[b-lmryxqphca]  .läufe-zählung .af-lf-mehr {
    margin-left: auto;
}

/* Beide Knöpfe nebeneinander rechtsbündig — sonst teilten sich zwei
   „margin-left: auto“ den freien Platz und „Mehr laden“ stünde mittig. */
.läufe-maske[b-lmryxqphca]  .läufe-zählung .af-lf-mehr + .af-lf-rechts {
    margin-left: 4px;
}

/* Beide Knöpfe da („Mehr laden“ und „Filter zurücksetzen“): ein Zeilen-
   umbruch als Pseudo-Element vor den Knöpfen — fest statt je nach Zahlen-
   breite (sonst landete „Filter zurücksetzen“ allein links unten). Die
   Reihenfolge der echten Elemente (und damit der Tab-Weg) bleibt die des
   DOM; nur der Umbruch wird per order dazwischen gestellt. */
.läufe-maske[b-lmryxqphca]  .läufe-zählung:has(> button.af-lf-mehr + button.af-lf-rechts)::after {
    content: "";
    order: 1;
    flex: 0 0 100%;
    height: 0;
}

.läufe-maske[b-lmryxqphca]  .läufe-zählung:has(> button.af-lf-mehr + button.af-lf-rechts) > button {
    order: 2;
}

/* ——— Zone ⑤/⑥: die Felder des Details als benannte Zeilen (kein JSON-
        Kipper, Hausregel 11) im Eigenschaften-Raster (app.css .af-eig). */
.läufe-felder[b-lmryxqphca] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.läufe-feld[b-lmryxqphca] {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 0 18px;
    min-width: 0;
    font-size: 13px;
}

.läufe-feld dt[b-lmryxqphca] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    padding-top: 1px;
}

.läufe-feld dd[b-lmryxqphca] {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    overflow-wrap: anywhere;
    min-width: 0;
}

.läufe-feld dd .läufe-leise[b-lmryxqphca] {
    font-size: 12px;
}

/* Schmale Detail-Spalte: Bezeichnung über dem Wert. */
@media (max-width: 700px) {
    .läufe-feld[b-lmryxqphca] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

.läufe-abschnitt:first-child[b-lmryxqphca] {
    padding-top: 4px;
}

.läufe-mono[b-lmryxqphca] {
    font-family: var(--mono, ui-monospace);
    overflow-wrap: anywhere;
}

.läufe-leise[b-lmryxqphca] {
    color: var(--text-3, var(--text-2));
}

/* FR01 B3 (§5): der Ausfall-Hinweis des Details — ein Balken mit dem EINEN
   Weg heraus („Filter zurücksetzen“), nicht wählen wir automatisch um. */
.läufe-filter-ausfall[b-lmryxqphca] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.läufe-detail-körper[b-lmryxqphca]  a.läufe-aufgabe {
    color: var(--accent);
    text-decoration: none;
}

.läufe-detail-körper[b-lmryxqphca]  a.läufe-aufgabe:hover {
    text-decoration: underline;
}

.läufe-detail-körper[b-lmryxqphca]  a.läufe-kind-marke {
    color: inherit;
    text-decoration: none;
}

.läufe-detail-körper[b-lmryxqphca]  a.läufe-kind-marke:hover {
    text-decoration: underline;
}

/* ——— Zone ⑤: der Status-Punkt im Detail-Kopf vor dem Badge — wie im
        Transkript-Kopf. Die Marken stehen mittig auf einer Linie. */
.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken {
    align-items: center;
}

/* 175 Nachtrag 2026-10-17 (T026): die Marken des Kopfs kompakt — die
   Statusmarke in normaler Schreibung (der volle Wortlaut steht im Titel),
   keine Marke bricht in sich um. */
.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken .af-badge,
.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken .af-tag {
    white-space: nowrap;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken .af-badge.läufe-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 8px;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken > [class^='tl-punkt'] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--text-3);
    opacity: .5;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken > [class^='tl-punkt'].tl-punkt-erfolg {
    background: var(--green);
    opacity: 1;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken > [class^='tl-punkt'].tl-punkt-block {
    background: var(--yellow);
    opacity: 1;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken > [class^='tl-punkt'].tl-punkt-fehler {
    background: var(--red);
    opacity: 1;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken > [class^='tl-punkt'].tl-punkt-fehler.tl-punkt-hohl {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--red);
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken > [class^='tl-punkt'].tl-punkt-läuft {
    background: var(--accent);
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-marken > [class^='tl-punkt'].tl-punkt-läuft {
        animation: af-läufe-puls-b-lmryxqphca 1.8s ease-in-out infinite;
    }
}

/* Zone ⑤: das Persona-Bild im Detail-Kopf in der Größe des Kopf-Symbols. */
.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-symbol:has(> .af-persona-bild) {
    width: auto;
    height: auto;
    border: 0;
    background: none;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-symbol > .af-persona-bild {
    width: 36px;
    height: 36px;
    font-size: 15px;
}

/* ——— Zone ⑥ (175 B5, §5): Lauf-Id-Kurzform neben der Persona und die
        Aufgabe als eigene Zeile unter Modell · Organisation · Rolle. */
.läufe-dk-id[b-lmryxqphca] {
    font-family: var(--mono, ui-monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    margin-left: 7px;
}

.läufe-dk-aufgabe[b-lmryxqphca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 12.5px;
    min-width: 0;
    max-width: 100%;
}

.läufe-maske[b-lmryxqphca]  .läufe-dk-aufgabe a {
    color: var(--accent-2, var(--accent));
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.läufe-maske[b-lmryxqphca]  .läufe-dk-aufgabe a:hover {
    text-decoration: underline;
}

.läufe-maske[b-lmryxqphca]  .läufe-dk-aufgabe .af-i {
    flex: none;
    color: var(--text-3);
}

/* ——— Zone ⑧ (175 B5, §8): die Reiter-Inhalte — nur der gewählte Reiter
        steht im Vordergrund; geöffnete bleiben gemountet (Keep-alive,
        SC-003: kein Abruf beim Wiederholen). */ 
.läufe-reiter-hülle[hidden][b-lmryxqphca] {
    display: none;
}

/* Der Fehler-/Abbruch-Hinweis des Detail-Kopfs (§5) — rot getönt wie der
   Fehler-Kasten, aber als schmale Zeile. */
.läufe-maske[b-lmryxqphca]  .läufe-hinweis-fehler {
    border-color: rgba(255, 92, 92, .45);
    background: var(--tint-red);
    color: var(--red-text);
}

/* ——— FR-016 kleine Ansichten: die Werkbank stapelt (app.css), die Liste
        behält eine eigene Scrollhöhe und die Seite rollt als Ganzes. */
@media (max-width: 1100px), (max-height: 620px) {
    .läufe-maske[b-lmryxqphca]  .af-liste-scroll {
        max-height: 42vh;
        overflow-y: auto;
    }

    .läufe-detail-körper[b-lmryxqphca] {
        overflow: visible;
    }
}

/* ——— Badges und Kopf in schmalen Breiten: ein Status-Badge bricht nie in
        sich um; die Kopf-Aktionen rücken früher in eine eigene Zeile. */
.läufe-maske[b-lmryxqphca]  .af-badge {
    white-space: nowrap;
}

.läufe-maske[b-lmryxqphca]  .läufe-detail-kopf .af-dk-text {
    flex-basis: 15rem;
}
/* /Components/Runs/LaufAufgabeReiter.razor.rz.scp.css */
/* 175 B5 (T014/T015): der Aufgaben-Reiter — gekürzte Beschreibung mit
   Ausblend-Kante (Mockup .ag-text) und die letzten Kommentare (Mockup
   .kommentare). */

.läufe-aufgabe-text[b-eb7q3enmf2] {
    position: relative;
    max-height: 9.6em;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    min-width: 0;
}

.läufe-aufgabe-text[b-eb7q3enmf2]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.6em;
    background: linear-gradient(to bottom, transparent, var(--bg-2));
}

.läufe-aufgabe-kommentare[b-eb7q3enmf2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.läufe-aufgabe-kommentar[b-eb7q3enmf2] {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 12.5px;
    line-height: 1.5;
    min-width: 0;
}

.läufe-aufgabe-kommentar .wer[b-eb7q3enmf2] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--text-3);
    margin-bottom: 2px;
}

.läufe-aufgabe-kommentar .wer b[b-eb7q3enmf2] {
    color: var(--text-2);
}

/* 175 Nachtrag 2026-10-17 (T026): Kopf der Aufgabe wie die Vorlage
   (.ag-kopf) — Titel und eine Zeile „Status · Spalte“ links, „Aufgabe
   öffnen“ einmal rechts. */
.läufe-ag-kopf[b-eb7q3enmf2] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
    min-width: 0;
}

.läufe-ag-kopf-text[b-eb7q3enmf2] {
    flex: 1 1 auto;
    min-width: 0;
}

.läufe-ag-titel[b-eb7q3enmf2] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-variant-caps: normal;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.läufe-ag-kopf .läufe-aufgabe-öffnen[b-eb7q3enmf2] {
    flex: none;
    white-space: nowrap;
}

.läufe-ag-meta[b-eb7q3enmf2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 4px 0 0;
    padding: 0;
}

.läufe-ag-meta .läufe-feld[b-eb7q3enmf2] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.läufe-ag-meta dt[b-eb7q3enmf2] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
}

.läufe-ag-meta dd[b-eb7q3enmf2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--text);
}

.läufe-ag-status[b-eb7q3enmf2] {
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
    font-weight: 600;
}

/* Kommentare: gerendertes Markdown; lange gekürzt auf sechs Zeilen mit
   Ausblend-Kante, darunter „Mehr anzeigen“. */
.läufe-aufgabe-kommentar .wer .zeit[b-eb7q3enmf2] {
    margin-left: auto;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.läufe-aufgabe-kommentar-text[b-eb7q3enmf2] {
    position: relative;
    min-width: 0;
    overflow-wrap: anywhere;
}

.läufe-aufgabe-kommentar-text.läufe-gekürzt[b-eb7q3enmf2] {
    max-height: 9em;
    overflow: hidden;
}

.läufe-aufgabe-kommentar-text.läufe-gekürzt[b-eb7q3enmf2]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.8em;
    background: linear-gradient(to bottom, transparent, var(--bg-3));
    pointer-events: none;
}

.läufe-aufgabe-kommentar-text[b-eb7q3enmf2]  p {
    margin: 0 0 .5em;
}

.läufe-aufgabe-kommentar-text[b-eb7q3enmf2]  p:last-child {
    margin-bottom: 0;
}

.läufe-aufgabe-kommentar-text[b-eb7q3enmf2]  ul,
.läufe-aufgabe-kommentar-text[b-eb7q3enmf2]  ol {
    margin: 0 0 .5em;
    padding-left: 1.3em;
}

.läufe-aufgabe-kommentar-text[b-eb7q3enmf2]  code {
    font-size: 11.5px;
    overflow-wrap: anywhere;
}

.läufe-kommentar-mehr[b-eb7q3enmf2] {
    margin-top: 4px;
    font-size: 12px;
}
/* /Components/Runs/LaufContainerReiter.razor.rz.scp.css */
/* 175 B5 (T015; contracts/laeufe-maske.md §8 Nr. 4): die Karten des
   Container-Reiters — Port der Gestalt aus der Container-Maske
   (ContainerFlaeche.razor.css, „Bausteine wandern in LaufContainerReiter“),
   eigene läufe-Klassen. Das Sparkline-SVG entsteht als Rohmarkup und trägt
   das Scope-Attribut nicht — die Regel hängt am ::deep-Anker dieser
   eigenen Hülle. */

.läufe-karten[b-tnyyx76pub] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    margin: 6px 0 0;
}

.läufe-karte[b-tnyyx76pub] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px 8px;
    background: var(--bg-3);
    min-width: 0;
}

.läufe-karte-ram[b-tnyyx76pub] {
    grid-column: 1 / -1;
}

.läufe-karte-warn[b-tnyyx76pub] {
    border-color: rgba(255, 176, 32, .55);
    background: linear-gradient(180deg, var(--tint-yellow), var(--bg-3) 55%);
}

.läufe-karte-kopf[b-tnyyx76pub] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-2);
    margin-bottom: 6px;
}

.läufe-karte-kopf b[b-tnyyx76pub] {
    font-size: 12.5px;
    color: var(--text);
}

.läufe-karte-wert[b-tnyyx76pub] {
    font-family: var(--mono, ui-monospace);
    font-weight: 700;
    color: var(--text);
    font-size: 12px;
    margin-left: auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Rohmarkup (Sparkline) trägt das Scope-Attribut nicht — ::deep über die
   eigene Hülle (165 Abnahme-Befund B2). */
.läufe-container[b-tnyyx76pub]  .läufe-spark {
    width: 100%;
    height: auto;
    display: block;
}

/* 175 Nachtrag 2026-10-17 (Browser-Befund 4): die Schwellen-Beschriftung
   steht als HTML über dem SVG — feste kleine Schrift wie der Karten-Fuß,
   unabhängig von der Breite der Karte. */
.läufe-container[b-tnyyx76pub]  .läufe-spark-hülle {
    position: relative;
}

.läufe-container[b-tnyyx76pub]  .läufe-spark-schwelle {
    position: absolute;
    right: 6px;
    transform: translateY(calc(-100% - 2px));
    font-family: var(--mono, ui-monospace);
    font-size: 10px;
    line-height: 1.2;
    color: var(--yellow-text);
    white-space: nowrap;
    pointer-events: none;
}

.läufe-karte-fuß[b-tnyyx76pub] {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 10.5px;
    color: var(--text-3, var(--text-2));
    margin-top: 3px;
    font-family: var(--mono, ui-monospace);
}

.läufe-karte-leer[b-tnyyx76pub] {
    margin: 0;
    padding: 6px 0 4px;
    font-size: 12px;
    color: var(--text-2);
}

.läufe-karten-leer[b-tnyyx76pub] {
    margin: 6px 0 0;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 12.5px;
}

.läufe-warn-hinweis[b-tnyyx76pub] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0 2px;
    font-size: 12px;
    color: var(--yellow-text);
}

.läufe-warn-hinweis[b-tnyyx76pub]  .af-i {
    flex: none;
    margin-top: 1px;
}

@media (max-width: 1320px) {
    .läufe-karten[b-tnyyx76pub] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 175 Nachtrag 2026-10-17 (Browser-Befund 4): das Feld-Raster des
   Abschnitts „Container“ wie die Kopfdaten (LaufKopfdatenReiter.razor.css) —
   Kacheln mit Bezeichnung über dem Wert. Vorher fielen die Felder zufällig in
   die zwei Spalten von .af-eig (app.css); die .läufe-feld-Regeln der Fläche
   erreichen diesen Baustein nicht (scoped CSS wirkt nicht in
   Unterkomponenten).
   Nachtrag 2026-10-17 (Browser-Nachprobe, Befund 3): höchstens drei
   Spalten — die Mindestbreite wächst mit einem Drittel der Breite (abzüglich
   zweier Spalten-Abstände). Sechs Felder stehen breit als 3 + 3 statt 5 + 1,
   schmal bleibt es bei 2 + 2 + 2. */
.läufe-container .läufe-felder[b-tnyyx76pub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 56px) / 3)), 1fr));
    gap: 14px 28px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.läufe-feld[b-tnyyx76pub] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.läufe-feld dt[b-tnyyx76pub] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
}

.läufe-feld dd[b-tnyyx76pub] {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.läufe-mono[b-tnyyx76pub] {
    font-family: var(--mono, ui-monospace);
    overflow-wrap: anywhere;
}

.läufe-leise[b-tnyyx76pub] {
    color: var(--text-3, var(--text-2));
}
/* /Components/Runs/LaufKopfdatenReiter.razor.rz.scp.css */
/* 175 Nachtrag 2026-10-17 (T026, Abnahme-Befund „Auch die Kopfdaten sehen
   nicht so gut aus“): das Raster der Kopfdaten. Vorher fielen die Felder
   zufällig in die zwei Spalten des Eigenschaften-Rasters (app.css .af-eig,
   150–190 px | Rest) — auf breiten Fenstern blieb rechts viel leer. Jetzt
   ist jedes Feld eine Kachel (Bezeichnung über dem Wert); die Kacheln
   füllen die Breite, so viele nebeneinander, wie hineinpassen (Vorlage
   mockups/agenten-läufe läufe.css .kd-raster: auto-fit). */

/* 175 Nachtrag 2026-10-17 (Browser-Befund 5): höchstens VIER Spalten — bei
   fünf standen „Aufgabe“ und „Container“ je allein in einer Zeile. Mit vier
   gehen die zehn Felder in drei ausgewogenen Zeilen auf (siehe Reihenfolge
   im Markup), Ressourcen und Tokens (je drei) stehen in denselben Spalten
   darunter. Schmaler rücken es weniger Spalten; „dense“ füllt die Lücke,
   die die doppelt breite Aufgabe beim Umbruch lassen kann. */
.läufe-kopfdaten[b-37w5telf9c] {
    container-type: inline-size;
}

.läufe-kopfdaten .läufe-felder[b-37w5telf9c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% - 84px) / 4)), 1fr));
    grid-auto-flow: row dense;
    gap: 14px 28px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.läufe-feld[b-37w5telf9c] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.läufe-feld dt[b-37w5telf9c] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
}

.läufe-feld dd[b-37w5telf9c] {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Die Aufgabe trägt einen Titel — sie bekommt die ganze Zeile und kürzt
   sich einzeilig mit „…“ (der volle Titel steht im Tooltip). */
.läufe-feld-breit[b-37w5telf9c] {
    grid-column: span 2;
}

/* Eine Spalte: die Aufgabe nimmt die Zeile, statt eine zweite Spalte
   aufzuspannen. */
@container (max-width: 367px) {
    .läufe-feld-breit[b-37w5telf9c] {
        grid-column: 1 / -1;
    }
}

.läufe-feld-breit dd[b-37w5telf9c] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
}

.läufe-aufgabe[b-37w5telf9c] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.läufe-aufgabe:hover[b-37w5telf9c] {
    text-decoration: underline;
}

/* Auslöser: der Wortlaut, darunter „Zur Herkunft ↗“ als eigener Verweis. */
.läufe-auslöser-wert[b-37w5telf9c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.läufe-herkunft[b-37w5telf9c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
}

.läufe-herkunft:hover[b-37w5telf9c] {
    text-decoration: underline;
}

.läufe-herkunft[b-37w5telf9c]  .af-i,
.läufe-herkunft[b-37w5telf9c]  svg {
    width: 12px;
    height: 12px;
}

.läufe-mono[b-37w5telf9c] {
    font-family: var(--mono, ui-monospace);
    overflow-wrap: anywhere;
}

.läufe-leise[b-37w5telf9c] {
    color: var(--text-3, var(--text-2));
}
/* /Components/Runs/LaufReiterKopf.razor.rz.scp.css */
/* 175 B5 (T014): die Reiter-Leiste — die Taste je Reiter als sichtbarer
   Hinweis (Mockup .af-reiter-tab .kbd, gemeinsam/läufe.css). */

.läufe-reiter-taste[b-oivn8b2r5h] {
    font-family: var(--mono, ui-monospace);
    font-size: 9.5px;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 6px;
    line-height: 1.35;
    font-weight: 600;
}

.af-reiter-tab-aktiv .läufe-reiter-taste[b-oivn8b2r5h] {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
/* /Components/Runs/LaufTranskriptReiter.razor.rz.scp.css */
/* 175 B5 (T015): der Transkript-Reiter — der Link zur eigenen Seite oben
   rechts, der eingebettete Verlauf darunter (Bestands-Gestalt
   TranscriptVerlauf.razor.css). */

.läufe-transkript-kopf[b-fmc91l7f0y] {
    display: flex;
    justify-content: flex-end;
    padding: 2px 0 8px;
}

.läufe-transkript-verlauf[b-fmc91l7f0y] {
    min-height: 0;
}
/* /Components/Secrets/HostAssignmentDialog.razor.rz.scp.css */
/* 078 US1 (T009) — Zuordnungs-Dialog.

   Fläche, Rahmen, Radius, Innenabstand, Knopf-Farben und das Einblenden
   kommen aus der Dialog-Familie (app.css .af-modal-*). Hier steht NUR,
   was dieser Dialog eigenes braucht: seine Breite, die Zwei-Wege-Umschaltung
   und die Grenze-Notiz.

   Gestaltungs-Absicht: Der Dialog kommt unaufgefordert, direkt nach einem
   gelungenen Speichern. Er muss deshalb in einem Blick lesbar sein — eine
   Zeile Grund, zwei Wege, ein Feld, eine ruhige Grenze-Notiz. Keine
   Aufzählungen, keine Symbole, kein zweites Thema. */

.host-assign-dialog[b-id72z248kp] {
    width: min(560px, calc(100vw - 32px));
    /* Sichtprobe 2026-09-14: mit aufgeklappter Anleitung wächst der Dialog
       über kurze Fenster hinaus. Die Familie (.af-modal) begrenzt die Höhe
       nicht — das bleibt hier, im eigenen Scoped CSS, statt den geteilten
       Baustein für einen Einzelfall umzubauen. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.host-assign-lead[b-id72z248kp] {
    margin-bottom: 16px;
}

.host-assign-lead b[b-id72z248kp] {
    color: var(--text, #e4e9f2);
    font-weight: 600;
}

/* Die zwei Wege als Segment-Paar: gleich groß, gleich erreichbar — die
   Entscheidung „bestehend oder neu" ist keine Vorliebe der Anwendung. */
.host-assign-modes[b-id72z248kp] {
    display: flex;
    gap: 6px;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--bg-3, #1a2029);
    border: 1px solid var(--border, #2a3342);
    border-radius: var(--radius-sm, 7px);
}

.host-assign-mode[b-id72z248kp] {
    flex: 1 1 0;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    color: var(--text-2, #9aa5b8);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.host-assign-mode:hover:not(:disabled)[b-id72z248kp] {
    color: var(--text, #e4e9f2);
}

.host-assign-mode.on[b-id72z248kp] {
    background: var(--bg-2, #12161f);
    border-color: var(--border-light, #354052);
    color: var(--text, #e4e9f2);
}

.host-assign-mode:disabled[b-id72z248kp] {
    opacity: .5;
    cursor: not-allowed;
}

.host-assign-field[b-id72z248kp] {
    margin-bottom: 12px;
}

.host-assign-optional[b-id72z248kp] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-3, #68738a);
}

.host-assign-select[b-id72z248kp],
.host-assign-input[b-id72z248kp] {
    width: 100%;
    background: var(--bg-3, #1a2029);
    border: 1px solid var(--border, #2a3342);
    border-radius: var(--radius-sm, 7px);
    color: var(--text, #e4e9f2);
    padding: 8px 11px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}

.host-assign-select:focus[b-id72z248kp],
.host-assign-input:focus[b-id72z248kp] {
    border-color: var(--accent, #6c8cff);
}

/* Der Ersetzungs-Hinweis ist eine Ansage, keine Warnung: gelber Signal-Ton
   als schmale Kante, kein Kasten voll Farbe. */
.host-assign-replace[b-id72z248kp] {
    margin: -4px 0 12px;
    padding: 7px 10px;
    border-left: 2px solid var(--yellow, #ffb020);
    background: rgba(255, 176, 32, .08);
    border-radius: 0 var(--radius-sm, 7px) var(--radius-sm, 7px) 0;
    color: var(--yellow-text, #ffc45e);
    font-size: 12px;
    line-height: 1.5;
}

.host-assign-hint[b-id72z248kp] {
    margin: 0 0 12px;
    color: var(--text-3, #68738a);
    font-size: 12.5px;
}

.host-assign-empty[b-id72z248kp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px dashed var(--border-light, #354052);
    border-radius: var(--radius-sm, 7px);
}

.host-assign-empty p[b-id72z248kp] {
    margin: 0;
    color: var(--text-2, #9aa5b8);
    font-size: 12.5px;
}

.host-assign-error[b-id72z248kp] {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.45;
}

/* Die 063-Grenze: fester Bestandteil des Dialogs, nicht wegklickbar und
   kein Tooltip. Sie sitzt zwischen Eingabe und Aktionen, weil sie zur
   Entscheidung gehört — nicht als Nachsatz unter den Knöpfen. */
.host-assign-limit[b-id72z248kp] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #2a3342);
}

.host-assign-limit-text[b-id72z248kp] {
    margin: 0;
    color: var(--text-3, #68738a);
    font-size: 12px;
    line-height: 1.55;
}

.host-assign-help[b-id72z248kp] {
    margin-top: 8px;
}

.host-assign-help > summary[b-id72z248kp] {
    display: inline-block;
    color: var(--accent, #6c8cff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.host-assign-help[open] > summary[b-id72z248kp] {
    margin-bottom: 8px;
}

/* Die Anleitung ist im Dialog ein Nachschlag-Werk, kein Hauptinhalt:
   begrenzte Höhe mit eigenem Lauf, damit sie den Dialog nie sprengt. */
.host-assign-help-body[b-id72z248kp] {
    max-height: 15rem;
    overflow: auto;
    padding-right: 4px;
}
/* /Components/Secrets/SecretDetailPanel.razor.rz.scp.css */
/* Detail-Schublade der Secrets-Maske im A-Muster (Variante A, Beschluss der
   Fachperson 2026-09-09) — Token-Flächen 1:1 aus dem Design-System
   (app.css): Dark = Leitdesign, Light über dieselben Variablen. */

/* 149 T031 (contracts/werkbank-ui.md §1, §3.3 ⑤): die Schublade steht im
   Detail der Werkbank — Karte, Kopf (DetailKopf), Zustände (LadeZustand,
   FehlerKasten, LeerZustand) und der rollende Körper (.af-detail-körper)
   kommen aus der af-Familie in app.css. Die Hülle der Schublade und die des
   Bearbeitens erzeugen keinen eigenen Kasten: ihre Kinder sind die
   Flex-Glieder des Details (Kopf fest, Körper rollt, Fuß fest). */
.secret-panel[b-gwnn3brm4i],
.secret-panel-edit[b-gwnn3brm4i] {
    display: contents;
}

.secret-panel[b-gwnn3brm4i]  .af-leer {
    flex: 1;
}

.secret-panel-updated[b-gwnn3brm4i] {
    font-size: 11.5px;
    color: var(--text-3);
}

/* Die Marken im DetailKopf: die Hook-Hülle trägt keinen eigenen Kasten. */
.secret-panel-badges[b-gwnn3brm4i] {
    display: contents;
}

/* Marken aus der af-badge-Familie (app.css); hier nur der Punkt der
   Freigabe-Marke und das Schloss der Sperr-Marke. */
.secret-badge-dot[b-gwnn3brm4i] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.secret-badge-lock-icon[b-gwnn3brm4i] {
    display: inline-flex;
    align-items: center;
}

.secret-panel-körper[b-gwnn3brm4i] {
    padding-top: 14px;
}

/* 078 US3 (T019) — Unvollständigkeits-Ansage an der Pflegestelle.

   Gleiche Gestaltungs-Absicht wie am Host: FESTSTELLUNG, nicht Warnung. Sie
   erscheint an Beständen, die jahrelang unauffällig waren — der Mensch hat
   nichts falsch gemacht, die Software war nur still. Deshalb bewusst NICHT
   die Signal-Töne: kein --red („fehlgeschlagen"), kein --yellow („Warnung"),
   kein Warndreieck, sondern der Akzent-Ton und ein Info-Kreis.

   Sie steht als erstes Element der Schublade, über Kopf und Eigenschaften:
   das ist der Grund, warum man gleich etwas tut. Der benannte Mangel und die
   Hostnamen tragen volle Textstärke — das Auge sucht „Benutzer" und
   „build-runner-01", nicht den Satz darum. */
.secret-access-note[b-gwnn3brm4i] {
    /* 149 T031: zwischen DetailKopf und Körper — fest, rollt nicht mit. */
    flex: none;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 20px 0;
    padding: 12px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.secret-access-note-icon[b-gwnn3brm4i] {
    flex: 0 0 auto;
    display: flex;
    /* Auf die erste Textzeile ausgerichtet, nicht auf die Kastenmitte —
       sonst rutscht das Zeichen bei mehrzeiligen Ansagen nach unten weg. */
    margin-top: 1px;
    color: var(--accent);
}

.secret-access-note-body[b-gwnn3brm4i] {
    min-width: 0;
}

.secret-access-note-head[b-gwnn3brm4i] {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Die benannte Angabe ist die Nutzlast der ganzen Ansage. */
.secret-access-note-name[b-gwnn3brm4i] {
    font-weight: 700;
}

.secret-access-note-port[b-gwnn3brm4i] {
    margin: 5px 0 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
}

.secret-access-note-hosts[b-gwnn3brm4i] {
    margin: 6px 0 0;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.55;
}

/* Der Hostname ist die zweite Nutzlast: er sagt, WOFÜR die Zeilen fehlen. */
.secret-access-note-host[b-gwnn3brm4i] {
    color: var(--text);
    font-weight: 600;
}

.secret-access-note-text[b-gwnn3brm4i] {
    margin: 6px 0 0;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.55;
}

.secret-access-note-help[b-gwnn3brm4i] {
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.secret-access-note-help:hover[b-gwnn3brm4i] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.secret-access-note-help:focus-visible[b-gwnn3brm4i] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Der Einklapper der Ansage — am Fuß der Schublade, gedämpft: er ist das
   Nachschlagewerk, nicht die Nachricht. */
.secret-access-help[b-gwnn3brm4i] {
    margin: 18px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    font-size: 12.5px;
    color: var(--text-2);
}

.secret-access-help summary[b-gwnn3brm4i] {
    cursor: pointer;
    color: var(--text-2);
    font-weight: 600;
}

.secret-access-help[open] summary[b-gwnn3brm4i] {
    margin-bottom: 8px;
}

.secret-access-help > summary:focus-visible[b-gwnn3brm4i] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Plattformweites Secret in einer Organisations-Ansicht: an der Stelle der
   Änderungs-Knöpfe steht der Grund. Ruhige Fläche, kein Alarm — es ist
   keine Störung, sondern eine Zuständigkeit. */
.secret-panel-borrowed[b-gwnn3brm4i] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-3);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
}

.secret-panel-borrowed-icon[b-gwnn3brm4i] {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--bg-4);
    color: var(--text-3);
}

.secret-panel-borrowed-body[b-gwnn3brm4i] {
    flex: 1;
    min-width: 0;
}

.secret-panel-borrowed-title[b-gwnn3brm4i] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}

.secret-panel-borrowed-text[b-gwnn3brm4i] {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-2);
}

.secret-panel-borrowed-link[b-gwnn3brm4i] {
    flex: none;
    align-self: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color .12s;
}

.secret-panel-borrowed-link:hover[b-gwnn3brm4i] {
    border-bottom-color: var(--accent);
}

/* 092 US2/US3 (T013): der Sperr-Stand mit dem Weg daneben.

   Baugleich mit dem Nur-lesen-Hinweis darüber (gleiche Hülle, gleiche
   Abstände, Symbol links, Handlung rechts) — es ist dieselbe Art Aussage:
   „hier geht gerade etwas nicht, und zwar aus diesem Grund". Unterschieden
   wird allein über den Kantenstreifen: Grau heißt Zuständigkeit (dauerhaft),
   Bernstein heißt Sperre (lösbar). Ein zweites Formenvokabular wäre an dieser
   Stelle Lärm. */
.secret-panel-lock[b-gwnn3brm4i] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--yellow);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
}

.secret-panel-lock-icon[b-gwnn3brm4i] {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: rgba(255, 176, 32, .13);
    color: var(--yellow-text);
}

.secret-panel-lock-body[b-gwnn3brm4i] {
    flex: 1;
    min-width: 0;
}

.secret-panel-lock-title[b-gwnn3brm4i] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}

.secret-panel-lock-text[b-gwnn3brm4i] {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-2);
}

/* Der Löse-Knopf sitzt im Block mit dem Grund, nicht oben bei den
   gesperrten Handlungen: dort wäre er der dritte Knopf neben zwei zugen
   — hier ist er die eine Sache, die gerade geht. */
.secret-panel-unlock-opener[b-gwnn3brm4i] {
    flex: none;
    align-self: center;
}

/* Freigabe-ÜBERSICHT (095): eine Zeile je Grant — als Chips im Sinne der
   Detail-Schublade des Mockups (variante-a-liste-detail.html), jede
   Freigabe klar getrennt und umbruchfähig. Vorher lagen die Spans ohne
   jede Regel inline nebeneinander und liefen zu einem Wort zusammen
   („…ganze OrganisationDeployerappfactory-infra…", Browser-Befund
   2026-09-18). */
.secret-grant-overview[b-gwnn3brm4i] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.secret-grant-overview-row[b-gwnn3brm4i] {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    color: var(--text-2);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.secret-grant-overview-empty[b-gwnn3brm4i] {
    font-size: 12px;
    color: var(--text-3);
}

/* Freigabe als reine Anzeige (kein Setzen über die Organisations-Route) */
.secret-grant-readonly[b-gwnn3brm4i] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.secret-grant-readonly-chip[b-gwnn3brm4i] {
    font-size: 11.5px;
    color: var(--text-2);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
}

.secret-grant-readonly-empty[b-gwnn3brm4i] {
    font-size: 12px;
    color: var(--text-3);
}

.secret-panel-desc[b-gwnn3brm4i] {
    color: var(--text-2);
    font-size: 13px;
    margin: 12px 0 0;
    /* Unzerbrechliche Langtoken (URLs, Kontonamen) brechen im Panel um,
       statt es horizontal aufzuweiten. */
    overflow-wrap: anywhere;
}

/* Sektionen */
.secret-section[b-gwnn3brm4i] {
    margin-top: 22px;
}

.secret-section-head[b-gwnn3brm4i] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 7px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-3);
}

.secret-section-count[b-gwnn3brm4i] {
    color: var(--accent);
}

.secret-section-hint[b-gwnn3brm4i] {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    font-size: 11px;
    color: var(--text-3);
}

.secret-section-audited[b-gwnn3brm4i] {
    color: var(--yellow-text);
}

.secret-audit-dot[b-gwnn3brm4i] {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yellow);
    margin-right: 5px;
    vertical-align: 1px;
}

/* Eigenschaftszeilen: Typ + maskierter/offener Wert + Auge + Kopieren */
.secret-prop-row[b-gwnn3brm4i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

.secret-prop-row + .secret-prop-row[b-gwnn3brm4i] {
    border-top: 1px solid var(--border);
}

.secret-prop-type[b-gwnn3brm4i] {
    width: 168px;
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.secret-prop-value[b-gwnn3brm4i] {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5.5px 10px;
    white-space: pre-wrap;
    word-break: break-word;
    transition: border-color .15s;
}

.secret-prop-value.shown[b-gwnn3brm4i] {
    border-color: rgba(63, 206, 139, .35);
    color: var(--text);
}

.secret-prop-value.masked[b-gwnn3brm4i] {
    color: var(--text-3);
    letter-spacing: 1.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 063 US6 (T034, D1): das aufgedeckte Klartext-Feld — Mehrzeilen-textarea,
   readonly (markierbar/kopierbar, nicht änderbar), ohne Zeitlimit sichtbar
   (B1: Verbergen NUR über das aktive Auge). */
.secret-prop-value-text[b-gwnn3brm4i] {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-3);
    border: 1px solid rgba(63, 206, 139, .35);
    border-radius: 6px;
    padding: 5.5px 10px;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
}

.secret-prop-value-text:focus[b-gwnn3brm4i] {
    outline: none;
    border-color: var(--green);
}

.secret-prop-actions[b-gwnn3brm4i] {
    display: flex;
    gap: 4px;
    flex: none;
}

.secret-icon-btn[b-gwnn3brm4i] {
    width: 29px;
    height: 29px;
    padding: 0;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    transition: background .12s, color .12s, border-color .12s;
}

.secret-icon-btn:hover[b-gwnn3brm4i] {
    background: var(--bg-3);
    border-color: var(--border);
    color: var(--text);
}

.secret-icon-btn.ok[b-gwnn3brm4i] {
    color: var(--green);
}

.secret-icon-btn:disabled[b-gwnn3brm4i] {
    opacity: .5;
    cursor: not-allowed;
}

/* Freigabe-Hinweis unter dem Segment */
[b-gwnn3brm4i] .secret-grant-hint {
    color: var(--text-3);
    font-size: 11.5px;
    margin: 8px 0 0;
}

/* Audit-Liste: wer/wann/was ohne Werte (keine QuickGrid-Optik) */
.secret-audit[b-gwnn3brm4i] {
    display: flex;
    flex-direction: column;
}

.secret-audit-entry[b-gwnn3brm4i] {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    align-items: baseline;
}

.secret-audit-entry + .secret-audit-entry[b-gwnn3brm4i] {
    border-top: 1px solid var(--border);
}

.secret-audit-what[b-gwnn3brm4i] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.secret-audit-what b[b-gwnn3brm4i] {
    font-weight: 600;
}

.secret-audit-who[b-gwnn3brm4i] {
    font-size: 11px;
    color: var(--text-3);
    flex: none;
}

.secret-audit-when[b-gwnn3brm4i] {
    font-size: 11px;
    color: var(--text-3);
    flex: none;
}

@media (max-width: 900px) {
    .secret-panel-borrowed[b-gwnn3brm4i] {
        flex-wrap: wrap;
    }

    .secret-panel-borrowed-link[b-gwnn3brm4i] {
        align-self: flex-start;
        margin-left: 37px;
    }

    /* Wie der Nur-lesen-Hinweis: im schmalen Fenster bricht die Handlung
       unter den Text und rückt auf dessen Fluchtlinie ein. */
    .secret-panel-lock[b-gwnn3brm4i] {
        flex-wrap: wrap;
    }

    .secret-panel-unlock-opener[b-gwnn3brm4i] {
        align-self: flex-start;
        margin-left: 37px;
    }

    .secret-prop-row[b-gwnn3brm4i] {
        flex-wrap: wrap;
    }

    .secret-prop-type[b-gwnn3brm4i] {
        width: 100%;
    }

    .secret-audit-entry[b-gwnn3brm4i] {
        flex-direction: column;
        gap: 2px;
    }
}

/* ----- 126: Gruppen-Pflege (Vertrag §5) ----- */

.secret-panel-group[b-gwnn3brm4i] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    margin-top: 9px;
}

.secret-panel-group-stand[b-gwnn3brm4i] {
    color: var(--text-3);
    font-size: .88rem;
}

.secret-panel-group-name[b-gwnn3brm4i] {
    color: var(--text);
}

.secret-panel-group-preset-hint[b-gwnn3brm4i] {
    color: var(--text-3);
    font-size: .82rem;
}

.secret-panel-group-row[b-gwnn3brm4i] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.secret-panel-group-input[b-gwnn3brm4i] {
    flex: 1;
    min-width: 0;
}
/* /Components/Secrets/SecretEditor.razor.rz.scp.css */
/* 149 T031 (contracts/werkbank-ui.md §3.3 ⑦): der Editor steht im Detail der
   Werkbank — eine Flex-Spalte, die den Rest des Details füllt. Der Body ist
   der rollende Körper (.af-detail-körper aus app.css), der FormularFuß
   bleibt darunter fest im sichtbaren Bereich (Befund 130). */
.secret-editor[b-d626wz57v9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.secret-editor-body[b-d626wz57v9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    padding-top: 14px;
}

.secret-editor-body > .secret-editor-field[b-d626wz57v9] {
    max-width: 48rem;
}

.secret-editor-field[b-d626wz57v9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.secret-editor-field label[b-d626wz57v9],
.secret-editor-group-label[b-d626wz57v9] {
    font-weight: 600;
}

.secret-editor input[b-d626wz57v9],
.secret-editor textarea[b-d626wz57v9] {
    width: 100%;
}

.secret-line[b-d626wz57v9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.secret-line-actions[b-d626wz57v9] {
    display: flex;
    gap: 0.5rem;
}

.secret-line-add[b-d626wz57v9] {
    align-self: flex-start;
}

.secret-generate-modal[b-d626wz57v9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.secret-generate-title[b-d626wz57v9] {
    font-weight: 600;
    margin: 0;
}

.secret-generate-kinds[b-d626wz57v9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.secret-generate-wait[b-d626wz57v9] {
    margin: 0;
}

/* ======================================================================
   078 US1 — Pflichtangaben-Abfrage im Erzeugen-Kasten.

   Gestaltungs-Absicht: Der Schritt kommt in einem Moment, in dem der
   Mensch gerade etwas geschafft hat. Er soll deshalb nicht wie eine
   Sperre aussehen (kein Rot, kein Warnzeichen, kein Rahmen um alles),
   sondern wie die Fortsetzung desselben Handgriffs: EIN ruhiger
   Akzentstreifen links, zwei kurze Felder, ein klar führender Weg.
   Die Breite bleibt an den Feldern, nicht am Kasten — der Schritt wirkt
   dadurch kleiner als der Generieren-Kasten, aus dem er kommt.
   ====================================================================== */

.secret-access-prompt[b-d626wz57v9] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.1rem 0 0.1rem 0.85rem;
    border-left: 2px solid var(--accent, #6c8cff);
    max-width: 34rem;
}

.secret-access-prompt-lead[b-d626wz57v9] {
    margin: 0;
    color: var(--text-2, #9aa5b8);
    font-size: 13px;
    line-height: 1.55;
}

.secret-access-prompt-lead b[b-d626wz57v9] {
    color: var(--text, #e4e9f2);
    font-weight: 600;
}

/* Zwei Pflichtfelder nebeneinander, sobald Platz ist — der optionale Port
   rutscht darunter in halbe Breite und bleibt dadurch sichtbar
   nachgeordnet, ohne versteckt zu sein. */
.secret-access-prompt-fields[b-d626wz57v9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.6rem 0.75rem;
}

.secret-access-field[b-d626wz57v9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.secret-access-field-optional[b-d626wz57v9] {
    grid-column: 1 / -1;
    max-width: 13rem;
}

.secret-access-field-label[b-d626wz57v9] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-2, #9aa5b8);
}

.secret-access-field-optional-mark[b-d626wz57v9] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-3, #68738a);
}

.secret-access-field input[b-d626wz57v9] {
    width: 100%;
    background: var(--bg-3, #1a2029);
    border: 1px solid var(--border, #2a3342);
    border-radius: var(--radius-sm, 7px);
    color: var(--text, #e4e9f2);
    padding: 7px 10px;
    font-size: 13.5px;
    outline: none;
    transition: border-color .15s;
}

.secret-access-field input:focus[b-d626wz57v9] {
    border-color: var(--accent, #6c8cff);
}

.secret-access-field-error[b-d626wz57v9] {
    font-size: 11.5px;
    line-height: 1.45;
}

/* Ein führender Weg, ein gleichwertig erreichbarer Ausweg: die Ablehnung
   ist ein voller Knopf (nie ein verstecktes Link-Wörtchen), trägt aber
   keinen Akzent — sie kostet einen Klick, nicht Mut. */
.secret-access-prompt-actions[b-d626wz57v9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.secret-access-accept[b-d626wz57v9] {
    padding: 8px 15px;
    border-radius: var(--radius-sm, 7px);
    border: 1px solid var(--accent, #6c8cff);
    background: var(--accent, #6c8cff);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .12s;
}

.secret-access-accept:hover[b-d626wz57v9] {
    filter: brightness(1.12);
}

.secret-access-decline[b-d626wz57v9] {
    padding: 8px 14px;
    border-radius: var(--radius-sm, 7px);
    border: 1px solid var(--border-light, #354052);
    background: var(--bg-4, #222a37);
    color: var(--text-2, #9aa5b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}

.secret-access-decline:hover[b-d626wz57v9] {
    color: var(--text, #e4e9f2);
    border-color: var(--border-light, #354052);
}

.secret-access-prompt-note[b-d626wz57v9] {
    margin: 0;
    color: var(--text-3, #68738a);
    font-size: 11.5px;
    line-height: 1.5;
}

/* „Abbrechen" gehört zum Kasten, nicht zum Schritt — eigene Zeile hinter
   einer Haarlinie, damit es nicht mit dem Ablehnen-Weg verwechselt wird
   (das eine erzeugt einen Schlüssel, das andere nichts). */
.secret-access-prompt-foot[b-d626wz57v9] {
    margin-top: 0.2rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border, #2a3342);
}

.secret-access-prompt-foot .secret-generate-cancel[b-d626wz57v9] {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-3, #68738a);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.secret-access-prompt-foot .secret-generate-cancel:hover[b-d626wz57v9] {
    color: var(--text-2, #9aa5b8);
}
/* /Components/Secrets/SecretGrantEditor.razor.rz.scp.css */
/* f22 → A-Muster (2026-09-09) → Ablösung C2 (2026-09-09): Freigabe-MENGE —
   „Alle Personas"-Umschalter + Mehrfach-Persona-Chips (Checkboxen), Auto-
   Save je Änderung ohne eigenen Speichern-Knopf. Token-Flächen aus dem
   Design-System (app.css). */

.secret-grant-segment[b-8ujvf69cu8] {
    display: flex;
    gap: 3px;
    padding: 3px;
    max-width: 420px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
}

.secret-grant-mode-btn[b-8ujvf69cu8] {
    flex: 1;
    padding: 6.5px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .12s, color .12s, border-color .12s;
}

.secret-grant-mode-btn:hover[b-8ujvf69cu8] {
    color: var(--text);
}

.secret-grant-mode-btn.on[b-8ujvf69cu8] {
    background: var(--bg-4);
    border-color: var(--border-light);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.secret-grant-persona-field[b-8ujvf69cu8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 28rem;
    margin-top: 0.75rem;
}

.secret-grant-persona-label[b-8ujvf69cu8] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.secret-grant-persona-list[b-8ujvf69cu8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.secret-grant-persona-chip[b-8ujvf69cu8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4.5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-3);
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background .12s, color .12s;
}

.secret-grant-persona-chip:hover[b-8ujvf69cu8] {
    border-color: var(--border-light);
    color: var(--text);
}

.secret-grant-persona-chip.on[b-8ujvf69cu8] {
    background: var(--bg-4);
    border-color: var(--border-light);
    color: var(--text);
}

.secret-grant-persona-chip input[b-8ujvf69cu8] {
    margin: 0;
    accent-color: var(--accent, currentColor);
}

/* Projekt-Zuordnungen (063 T021, C3): bestehende Zuordnungen als Chips mit
   Entfernen-Knopf, Anlage über Projekt-/Persona-Auswahl — nur an globalen
   Secrets (Guard G3). */

.secret-grant-project-field[b-8ujvf69cu8] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 28rem;
    margin-top: 0.75rem;
}

.secret-grant-project-list[b-8ujvf69cu8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.secret-grant-project-empty[b-8ujvf69cu8] {
    font-size: 12px;
    color: var(--text-3);
}

.secret-grant-project-chip[b-8ujvf69cu8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-3);
    font-size: 12.5px;
    color: var(--text-2);
}

.secret-grant-project-remove[b-8ujvf69cu8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.secret-grant-project-remove:hover:not(:disabled)[b-8ujvf69cu8] {
    background: var(--bg-4);
    color: var(--red);
}

.secret-grant-project-remove:disabled[b-8ujvf69cu8] {
    opacity: .5;
    cursor: default;
}

.secret-grant-project-add[b-8ujvf69cu8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 0.25rem;
}

.secret-grant-project-select[b-8ujvf69cu8],
.secret-grant-project-persona[b-8ujvf69cu8] {
    max-width: 12rem;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    color: var(--text-2);
    font-size: 12.5px;
}

.secret-grant-error[b-8ujvf69cu8] {
    margin: 0.6rem 0 0;
    color: var(--red);
}

.secret-grant-note[b-8ujvf69cu8] {
    margin: 0.55rem 0 0;
    font-size: 11.5px;
    color: var(--text-3);
}
/* /Components/Secrets/SecretsDesk.razor.rz.scp.css */
/* Arbeitsfläche der Secrets-Maske (108 T008).

   149 T031 (contracts/werkbank-ui.md §1, §3.3): die Maske ist die Werkbank —
   Seitenkopf, Raster, Listenkarte, Suche, Chips, Zeilen (af-lz), Marken
   (af-badge), Fuß, Zustände und Detail kommen aus der af-Familie in app.css.
   Hier stehen nur die Bestandsteile ohne Baustein: die Beschreibung und der
   Zeitstempel der Zeile, der Punkt der Freigabe-Marke, die Gruppenköpfe
   (aufklappbar, 126) und die Anleitung unter der Liste. */

.secrets-desk-name-text[b-u9kes03ook] {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.secrets-desk-desc[b-u9kes03ook] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.secrets-desk-updated[b-u9kes03ook] {
    color: var(--text-3);
    font-size: 10.5px;
    white-space: nowrap;
}

.secret-badge-dot[b-u9kes03ook] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* Die Anleitung unter der Liste (063 US5, §7 „unter der Liste wie Bestand“):
   offen rollt sie in sich, die Liste behält ihren Platz. */
.secrets-desk-help[b-u9kes03ook] {
    flex: none;
    padding: 8px 14px 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-2);
}

.secrets-desk-help[open][b-u9kes03ook] {
    max-height: 45%;
    overflow-y: auto;
}

.secrets-desk-help summary[b-u9kes03ook] {
    cursor: pointer;
    color: var(--text-2);
    font-weight: 600;
}

.secrets-desk-help[open] summary[b-u9kes03ook] {
    margin-bottom: 8px;
}

/* ----- 126: Gruppenbereiche (Vertrag §2) ----- */

.secrets-desk-group[b-u9kes03ook] {
    margin-bottom: 6px;
}

.secrets-desk-group-head[b-u9kes03ook] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    width: 100%;
    padding: 7px 11px;
    margin-bottom: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-3);
    color: var(--text);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.secrets-desk-group-head:hover[b-u9kes03ook] {
    border-color: var(--accent);
}

.secrets-desk-group-name[b-u9kes03ook] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secrets-desk-group-count[b-u9kes03ook] {
    color: var(--text-3);
    font-weight: 500;
}
/* /Components/Secrets/SecretsHelpCard.razor.rz.scp.css */
/* 063 US5 (T030): die Anleitung als schlichte Karte — lesbarer Fließtext,
   eine kleine Bezeichner-Tabelle, keine Bildsprache. Token-Flächen aus dem
   Design-System (app.css). */

.secrets-help[b-v1577i4h35] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-size: 12.5px;
    color: var(--text-2);
}

.secrets-help-title[b-v1577i4h35] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.secrets-help-text[b-v1577i4h35] {
    margin: 0;
    line-height: 1.5;
}

.secrets-help-table[b-v1577i4h35] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.secrets-help-table th[b-v1577i4h35],
.secrets-help-table td[b-v1577i4h35] {
    padding: 5px 8px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.secrets-help-table th[b-v1577i4h35] {
    background: var(--bg-3);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.secrets-help-table td:nth-child(2)[b-v1577i4h35] {
    color: var(--text);
}
/* /Components/Secrets/SecretsWorkspace.razor.rz.scp.css */
/* Arbeitsfläche der Secrets-Maske im A-Muster (Variante A, Beschluss der
   Fachperson 2026-09-09) — Master-Detail-Split nach Mockup
   mockups/secrets-maske/variante-a-liste-detail.html, Token-Flächen aus
   dem Design-System (app.css); Dark = Leitdesign, Light über Variablen. */

.secrets-workspace[b-cjq3htjrrp] {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    /* 072 (Gerüst-Drehung): beide Kopf-Stöcke (--kopf-höhe) + page-padding
       oben (22) + Seitenkopf + Restluft. Vorher stand hier die feste 58 der
       alten Topbar — der zweite Stock hätte gefehlt.

       072 T035 (Sichtprobe am laufenden Stack, 2026-09-12 — GEMESSEN):
       der Seitenkopf war mit „~60" zu knapp veranschlagt. Er ist in
       Wahrheit 103 px hoch (Titel + Unterzeile + 16 px Abstand), und der
       Kopf selbst ist 101 px statt 100 (die Abschlusslinie zählt mit).
       Folge: die Fläche ragte 18 px unter die Fensterkante, der
       Inhaltsbereich bekam einen Bildlauf. Genau der Fall, den bUnit nicht
       sehen kann (Vermerk B3 Nr. 8).

       Die Rechnung ist jetzt vollständig statt ungefähr — Kopf (101 inkl.
       Abschlusslinie) + Innenabstand oben (22) + Seitenkopf (103) +
       Innenabstand unten (60). Der letzte Posten fehlte: er steht im
       rollenden Bereich und erzwang selbst dann einen Bildlauf, wenn optisch
       alles passte.

       Beides bleibt eine SCHÄTZUNG: bricht der Seitenkopf bei sehr schmalem
       Fenster um, wird er höher und der Inhaltsbereich rollt wieder — das
       ist der Bestands-Rückfall und kein Fehler. Die guss-freie Lösung wäre,
       die Fläche den Restplatz FÜLLEN zu lassen statt ihn auszurechnen; das
       ändert den Aufbau jeder Seite und gehört nicht in dieses Vorhaben. */
    height: calc(100dvh - var(--kopf-höhe) - 1px - 22px - 103px - 60px);
    min-height: 460px;
}

/* ----- Listenpaneel ----- */

.secrets-list[b-cjq3htjrrp] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Breiten-Schutz (gleicher Befund wie SecretsDesk, 2026-09-18):
       nowrap-Zeilen dürfen ihre Textbreite nicht als min-content in den
       Grid-Track tragen. */
    min-width: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.secrets-list-tools[b-cjq3htjrrp] {
    flex: none;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border);
}

.secrets-searchbox[b-cjq3htjrrp] {
    position: relative;
}

.secrets-searchbox svg[b-cjq3htjrrp] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}

.secrets-searchbox input[b-cjq3htjrrp] {
    width: 100%;
    padding: 8px 11px 8px 32px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

.secrets-searchbox input:focus[b-cjq3htjrrp] {
    border-color: var(--accent);
}

.secrets-chips[b-cjq3htjrrp] {
    display: flex;
    gap: 6px;
    margin-top: 9px;
    flex-wrap: wrap;
}

.secrets-chip[b-cjq3htjrrp] {
    padding: 3.5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--border);
    transition: color .12s, border-color .12s, background .12s;
}

.secrets-chip:hover[b-cjq3htjrrp] {
    color: var(--text);
    border-color: var(--border-light);
}

.secrets-chip.on[b-cjq3htjrrp] {
    background: rgba(108, 140, 255, .16);
    border-color: var(--accent);
    color: var(--accent);
}

.secrets-chip-count[b-cjq3htjrrp] {
    color: var(--text-3);
    font-weight: 500;
    margin-left: 4px;
}

.secrets-chip.on .secrets-chip-count[b-cjq3htjrrp] {
    color: var(--accent);
    opacity: .7;
}

.secrets-list-scroll[b-cjq3htjrrp] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 0;
}

.secrets-list-row[b-cjq3htjrrp] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    margin-bottom: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    transition: background .12s, border-color .12s;
}

.secrets-list-row:hover[b-cjq3htjrrp] {
    background: var(--bg-3);
}

.secrets-list-row.on[b-cjq3htjrrp] {
    background: var(--bg-3);
    border-color: var(--border);
    box-shadow: inset 2.5px 0 0 var(--accent);
}

.secrets-list-name[b-cjq3htjrrp] {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.secrets-list-desc[b-cjq3htjrrp] {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.secrets-list-meta[b-cjq3htjrrp] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: wrap;
}

/* Badges der Listenzeilen (dieselbe Form wie die Panel-Badges — Scoped-CSS
   braucht je Komponente eine eigene Definition). */
.secret-badge[b-cjq3htjrrp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 1.5px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: rgba(154, 165, 184, .14);
    color: var(--text-2);
}

.secret-badge-dot[b-cjq3htjrrp] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.secret-badge-grant[b-cjq3htjrrp] {
    background: var(--bg-4);
    color: var(--text-2);
}

.secret-badge-grant.single[b-cjq3htjrrp] {
    background: rgba(108, 140, 255, .13);
    color: var(--accent);
}

.secret-badge-grant.all[b-cjq3htjrrp] {
    background: rgba(63, 206, 139, .12);
    color: var(--green);
}

/* 063 US6 (T033, B2): Plattform-Kennzeichnung der globalen Secrets —
   dieselbe Optik wie der Scope-Badge der Schublade (Cyan-Familie). */
.secret-badge-plattform[b-cjq3htjrrp] {
    background: rgba(56, 217, 196, .13);
    color: var(--cyan);
}

/* 092 US2 (T013): Sperr-Kennzeichen der Listenzeile — Bernstein.

   Die Tonwahl ist Absicht: kein --red (das hieße „fehlgeschlagen", und eine
   Sperre ist kein Fehler, sondern ein gewollter Zustand) und kein Grau (das
   verschwände zwischen den Nachbar-Badges, obwohl genau diese Zeile beim
   Überfliegen auffallen soll). Bernstein ist in dieser Badge-Familie noch
   frei — Cyan trägt „Plattform", Blau/Grün die Freigabe. */
.secret-badge-lock[b-cjq3htjrrp] {
    background: rgba(255, 176, 32, .15);
    color: var(--yellow-text);
}

.secret-badge-lock-icon[b-cjq3htjrrp] {
    display: inline-flex;
    align-items: center;
}

.secrets-list-empty[b-cjq3htjrrp] {
    color: var(--text-3);
    text-align: center;
    padding: 22px 14px;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.secrets-list-empty p[b-cjq3htjrrp] {
    margin: 0 0 4px;
}

.secrets-list-foot[b-cjq3htjrrp] {
    flex: none;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11.5px;
}

/* 063 T031: der Anleitung-Einklapper am Listen-Fuß. */
.secrets-list-help[b-cjq3htjrrp] {
    flex: none;
    padding: 8px 14px 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-2);
}

.secrets-list-help summary[b-cjq3htjrrp] {
    cursor: pointer;
    color: var(--text-2);
    font-weight: 600;
}

.secrets-list-help[open] summary[b-cjq3htjrrp] {
    margin-bottom: 8px;
}

.secrets-list-error[b-cjq3htjrrp] {
    color: var(--red);
    font-size: 12.5px;
    margin: 4px 6px;
}

/* ----- Detailbereich: nackter Scroll-Container — die Karte ist das Panel
   selbst (identischer Look in der Schublade und auf der Detail-Seite) ----- */

.secrets-detail[b-cjq3htjrrp] {
    min-width: 0;
    overflow-y: auto;
}

/* ----- Anlege-Overlay (af-modal-Anmutung) ----- */

.secrets-overlay[b-cjq3htjrrp] {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 14, .62);
    display: grid;
    place-items: center;
    z-index: 200;
    padding: 20px;
}

.secrets-modal[b-cjq3htjrrp] {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    /* Befund 130: wie in SecretsDesk.razor.css — das Modal scrollt nicht
       selbst; der Editor-Body scrollt, die Aktions-Zeile bleibt sichtbar. */
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.secrets-modal-title[b-cjq3htjrrp] {
    flex: none;
    font-size: 16px;
    margin: 0 0 14px;
}

/* ----- Inline-Editor im Overlay/Panel: Bestandsklassen des SecretEditor
   auf Token-Flächen heben (keine QuickGrid-/admin-Optik) ----- */

[b-cjq3htjrrp] .secret-editor {
    gap: 0.85rem;
    /* Befund 130: der Body des Editors scrollt im Modal, die Aktions-Zeile
       bleibt fest sichtbar (gleiche Verankerung wie SecretsDesk.razor.css). */
    flex: 1 1 auto;
    min-height: 0;
}

[b-cjq3htjrrp] .secret-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

[b-cjq3htjrrp] .secret-editor-actions {
    flex: none;
    padding-top: 4px;
}

[b-cjq3htjrrp] .secret-line {
    border-color: var(--border);
    background: var(--bg-3);
}

[b-cjq3htjrrp] .secret-line-add,
[b-cjq3htjrrp] .secret-editor-secondary {
    /* Basis-Button-Optik aus app.css genügt — nur die Gefahren-/Neben-Farben
       dezenter auf der Karte (Bestand blieb ungestylt, Ist-Sünde). */
    color: var(--text-2);
}

/* ----- Responsive: einspaltig, Seite scrollt gesamt ----- */

@media (max-width: 1100px) {
    .secrets-workspace[b-cjq3htjrrp] {
        /* minmax(0, 1fr) statt 1fr — siehe Befund-Vermerk in
           SecretsDesk.razor.css (nacktes 1fr = minmax(auto, 1fr)). */
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }

    .secrets-list-scroll[b-cjq3htjrrp] {
        max-height: 42vh;
    }

    .secrets-detail[b-cjq3htjrrp] {
        overflow-y: visible;
    }
}
/* /Components/Shared/BestätigungsDialog.razor.rz.scp.css */
/* f60 T027 (Abnahmebefund 2026-09-08): Panel-Grundgestalt, Overlay und
   Action-Zeile kommen aus app.css (.af-modal/.af-modal-overlay/
   .af-modal-actions, f18) — Präzedenz TaskCreateModal/ChatCreateDialog.

   Zusammenführung der Dialog-Familie (2026-09-13): auch die Knopf-Farben,
   der Nachrichten-Text und das Einblenden kommen jetzt von dort
   (.af-modal-confirm/-cancel/-message, prefers-reduced-motion) statt aus
   einer Kopie derselben Werte hier. Was bleibt, ist das Einzige, was
   diesen Dialog von den anderen unterscheidet: seine Breite. */

/* Kompakte Bestätigung — schmaler als das f20-Form-Modal (Chat-Maß). */
.confirm-dialog[b-stndey9o1h] {
    width: min(440px, calc(100vw - 32px));
}
/* /Components/Shared/FilterChips.razor.rz.scp.css */
/* 156 Pixel-Treue-Rework (Vorlage mockups/transkript-lauf index.html:300–308):
   der Status-Punkt im Chip der ERSTEN Facette — „● Erfolg 6“ statt bloßem
   Wort. Die Klasse liefert die Maske über FilterOption.PunktKlasse (die
   Zuordnung Status → Gestalt bleibt EINE Stelle dort, z. B. VerlaufSicht);
   hier stehen nur die Formen dieses Baustein-Scopes (Bestandsmuster:
   Punkt-Gestalten je Scope). */

.af-chip-punkt[b-qroq2v7in8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--text-3);
}

/* 175 Nachtrag 2026-10-18 (T027 → T030, Browser-Befund bro-3): die zweite
   Chip-Gruppe hat ihre eigene Zeile in der Chip-Zone — volle Breite, bündig
   unter dem Facetten-Titel. Vorher stand ein senkrechter Trennstrich davor,
   der bei 380 px verwaist am Ende der Status-Zeile hing, während die Gruppe
   allein umbrach. Die Chips selbst behalten die Bestands-Gestalt. */
.af-chips-schnell[b-qroq2v7in8] {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Farbgestalten (Klassennamen aus VerlaufSicht.PunktKlasse). */
.af-chip-punkt.tl-punkt-erfolg[b-qroq2v7in8] {
    background: var(--green);
}

.af-chip-punkt.tl-punkt-block[b-qroq2v7in8] {
    background: var(--yellow);
}

.af-chip-punkt.tl-punkt-fehler[b-qroq2v7in8] {
    background: var(--red);
}

.af-chip-punkt.tl-punkt-läuft[b-qroq2v7in8] {
    background: var(--accent-2);
}

@media (prefers-reduced-motion: no-preference) {
    .af-chip-punkt.tl-punkt-läuft[b-qroq2v7in8] {
        animation: af-chip-puls-b-qroq2v7in8 1.8s ease-in-out infinite;
    }

    @keyframes af-chip-puls-b-qroq2v7in8 {
        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .35;
        }
    }
}
/* /Components/Shared/HostMetricChart.razor.rz.scp.css */
/* f23 (T023, R6): eigener SVG-Verlauf — Bestands-Design-Tokens, additive
   Klassen (host-metric*), keine Bestands-Selektoren. Optik nach Mockup
   mockups/hosts-secrets-modelle/variante-monitoring-secrets.html
   (chart-box / fenster-wahl): Fenster-Chips als Pillen-Gruppe, Charts als
   kompakte Boxen mit Klein-Titel und Mono-Aktuellwert. */

.host-metric-chart[b-gy0vp1figd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.host-metric-status[b-gy0vp1figd] {
    grid-column: 1 / -1;
    margin: 0;
    font-weight: 600;
    font-size: 0.8125rem;
}

.host-metric-status[data-host-status="reachable"][b-gy0vp1figd] {
    color: var(--green);
}

.host-metric-status[data-host-status="unreachable"][b-gy0vp1figd] {
    color: var(--red);
}

.host-metric-status[data-host-status="no-data"][b-gy0vp1figd] {
    color: var(--text-3);
}

.host-metric-window[b-gy0vp1figd] {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-3);
    font-size: 0.8125rem;
}

/* Fenster-Wahl als Pillen-Gruppe (fenster-wahl/fenster-chip im Mockup). */
.host-metric-windows[b-gy0vp1figd] {
    grid-column: 1 / -1;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    justify-self: start;
}

.host-metric-window-button[b-gy0vp1figd] {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 11px;
    transition: color .15s, background .15s;
}

.host-metric-window-button:hover[b-gy0vp1figd] {
    color: var(--text);
}

.host-metric-window-button[aria-pressed="true"][b-gy0vp1figd] {
    background: var(--accent);
    color: #fff;
}

/* Chart-Box (chart-box im Mockup). */
.host-metric[b-gy0vp1figd] {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px 8px;
}

.host-metric h4[b-gy0vp1figd] {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
}

.host-metric-empty[b-gy0vp1figd] {
    margin: 6px 0 0;
    color: var(--text-3);
    font-size: 0.875rem;
    font-style: italic;
}

.host-metric-svg[b-gy0vp1figd] {
    display: block;
    width: 100%;
    height: auto;
}

/* Lücke = Lücke: abgesetzt, ohne Ersatzwert (FR-008). */
.host-metric-gap[b-gy0vp1figd] {
    fill: var(--bg-4);
    opacity: 0.6;
}

/* Ausfallband: sichtbar, ohne die Kennzahlen zu berühren (Regel 2). */
.host-metric-outage[b-gy0vp1figd] {
    fill: var(--red);
    opacity: 0.18;
}

/* min/max-Band je Bildspalte — reine Darstellung (R6). */
.host-metric-band[b-gy0vp1figd] {
    fill: var(--accent);
    opacity: 0.25;
    stroke: none;
}

.host-metric-line[b-gy0vp1figd] {
    fill: none;
    stroke: var(--accent-2);
    stroke-width: 1.5;
}

/* Aktueller Wert: Mono in Akzentfarbe (chart-aktuell im Mockup). */
.host-metric-current[b-gy0vp1figd] {
    margin: 0 0 0.25rem;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-2);
}

.host-metric-axis-y[b-gy0vp1figd] {
    margin: 0 0 0.5rem;
    color: var(--text-3);
    font-size: 0.6875rem;
}

.host-metric-axis-x text[b-gy0vp1figd] {
    fill: var(--text-3);
    font-size: 11px;
    font-family: var(--mono);
}
/* /Components/Tasks/AktivLaufIcon.razor.rz.scp.css */
/* f54 T006 (US1, Vertrag signal-flächen G3, plan E2): der EINE
   Icon-Baustein. Bewegung rein CSS-Keyframes, Tokens des Bestands
   (--accent, f32-Ring-Muster in TaskCard.razor.css :295–328 — jene
   Datei bleibt UNANGETASTET, G4). Statisch erkennbar bei
   prefers-reduced-motion (A5): die Aussage „läuft gerade" braucht
   keine Animation, nur den Punkt. */
.aktiv-lauf-icon[b-nb0klk3ygi] {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px rgba(108, 140, 255, .35);
    animation: aktiv-lauf-icon-pulse-b-nb0klk3ygi 3.6s ease-in-out infinite;
}

[data-theme="light"] .aktiv-lauf-icon[b-nb0klk3ygi] {
    box-shadow: 0 0 6px rgba(61, 98, 216, .3);
}

@keyframes aktiv-lauf-icon-pulse-b-nb0klk3ygi {
    0%, 100% {
        opacity: .5;
    }

    50% {
        opacity: .95;
    }
}

/* Erkennbar bleiben, ohne sich zu bewegen (A5): reduced-motion hält
   den Punkt statisch auf dem oberen Ende des Atem-Fensters. */
@media (prefers-reduced-motion: reduce) {
    .aktiv-lauf-icon[b-nb0klk3ygi] {
        animation: none;
        opacity: .85;
    }
}
/* /Components/Tasks/AttachmentList.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep. */

.attachment-list[b-az0iz7up81] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 16px 18px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.attachment-list h3[b-az0iz7up81] {
    margin: 0;
    font-size: 14px;
}

.attachment-list-empty[b-az0iz7up81] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.attachment-list-table[b-az0iz7up81] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.attachment-list-table th[b-az0iz7up81] {
    padding: 8px 12px;
    text-align: left;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
}

/* f113 T022 (P1-Nachsuche, Edge E10, Kriterium 11, Vertrag §3 Punkt 7):
   dieselbe waagrechte Lücke wie P1, aber in der RECHTEN Spalte. Die Spalte
   hat seit T006 `overflow-y: auto` — ist eine Achse nicht `visible`, stellt
   CSS die andere auf `auto`; ein Dateiname, Typ oder Anzeigename OHNE
   Trenner hätte dieselbe Leiste erzeugt. Regel an der Oberfläche
   (App-Konvention, Präzedenz TaskFileStrip.razor.css:126), nicht am
   geteilten Baustein. Die ganze Tabellenzeile trägt Benutzer-/Servertext
   (Dateiname, Typ, „Hochgeladen von"), der Download-Link erbt den Wert.
   Kein stilles Abschneiden über die waagrechte Achse — das machte den
   Namen unsichtbar statt lesbar (die schlechtere Richtung). */
.attachment-list-table td[b-az0iz7up81] {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    overflow-wrap: anywhere;
}

.attachment-list-table tr:last-child td[b-az0iz7up81] {
    border-bottom: none;
}

.attachment-list-table tr:hover td[b-az0iz7up81] {
    background: var(--bg-3);
}

.attachment-list-delete[b-az0iz7up81] {
    padding: 2px 9px;
    border: 1px solid rgba(255, 92, 92, .4);
    border-radius: 5px;
    background: rgba(255, 92, 92, .12);
    color: var(--red);
}

.attachment-list-delete:hover[b-az0iz7up81] {
    filter: none;
    background: rgba(255, 92, 92, .2);
}

.attachment-list-upload[b-az0iz7up81] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.attachment-list-upload-hint[b-az0iz7up81] {
    color: var(--text-3);
    font-size: 12.5px;
}
/* /Components/Tasks/AufgabenFläche.razor.rz.scp.css */
/* 077 T010/T011 — Aufgabenliste (Mockup-Richtung 2 „Facettenspalte").
   125 T012 (2026-09-19): mit der Flächen-Extraktion von der Seite
   (AufgabenListePage.razor, jetzt dünne Hülle) hierher umgezogen —
   INHALTlich unverändert; neu waren die Abschnitte „Gruppen" (174 B4 entfallen),
   „Aktualisieren" und die zwei Spaltenbreiten der globalen Einstellung.

   Gestaltungs-Gedanke: Das ist eine LESE-Fläche, keine Arbeitsfläche. Auf
   dem Board wird geschoben; hier wird verglichen. Deshalb ist die Tabelle
   ruhig gehalten und trägt genau drei Betonungen — und jede hat einen
   Anlass:

   1. Der Status-Punkt. Sechs Farben, je eine Bedeutung, überall im Haus
      dieselben. Der Punkt macht die Statusspalte auf einen Blick lesbar,
      ohne dass man die Wörter lesen muss.
   2. Der laufende Agent. Genau EIN bewegtes Element auf der ganzen Seite,
      und es bedeutet etwas: hier arbeitet gerade jemand. Alles andere steht
      still — sonst hieße Bewegung nichts mehr.
   3. Die überfahrene Zeile. Sie bekommt einen Akzent-Strich links; DENSELBEN
      Strich trägt die Beschreibungs-Karte an ihrer linken Kante. So gehören
      Zeile und Karte sichtbar zusammen, obwohl die Karte gar nicht in der
      Tabelle liegt.

   Was bewusst FEHLT: Zebra-Streifen (Zeilen sind hier nicht so lang, dass
   man verrutscht — und Streifen machen den Hover-Zustand unlesbar) und
   Trennlinien zwischen den Spalten (die Spaltenbreiten trennen schon).

   Die Zeilenhöhe ist die heimliche Hauptsache dieser Fläche: Der
   Wahl-Vermerk verlangt, dass beim Überfahren NICHTS springt. Deshalb steht
   in der Zelle nichts, was seine Höhe ändern kann, und die Beschreibung
   liegt außerhalb der Tabelle.

   Alle Farben sind Haus-Variablen — hell wie dunkel dieselbe Aussage, kein
   CDN, keine Fremdschrift. */

.aufgaben-seite[b-vxyj4m6veu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== Kopf ===== */

.aufgaben-kopf[b-vxyj4m6veu] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.aufgaben-kopf h1[b-vxyj4m6veu] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

.aufgaben-kopf-sub[b-vxyj4m6veu] {
    margin: 4px 0 0;
    color: var(--text-2);
    font-size: 13px;
}

/* 174 B4 (FR-007): die Sortier-Auswahl ist entfallen. Ihr `margin-left:
   auto` schob die Kopf-Knöpfe nach rechts — das übernimmt jetzt der
   Kopftext, damit „Aktualisieren“ und „Neue Aufgabe“ rechts bleiben. */
.aufgaben-kopf-text[b-vxyj4m6veu] {
    margin-right: auto;
}

/* N48 fix (D) — EINE Höhe für die Kopf-Steuerlemente (Fachperson wörtlich:
   „Die höhe von Sortierung und vom Button passt nicht. Sieht optisch
   unruhig aus.“). */
.aufgaben-neue-aufgabe[b-vxyj4m6veu] {
    height: 36px;
    box-sizing: border-box;
}

/* Der Umschalt-Link ist jetzt DER Untertitel (2026-09-17): Block im
   Kopftext unter dem Titel, Optik von `.aufgaben-kopf-sub` (dieselbe Klasse
   im Markup) — nur die Link-Affordanz bleibt: Unterstrich und Hover-
   Aufhellung. Kein Button-Look, kein Flex-Geschwister mehr. */
.aufgaben-ansicht-wechsel[b-vxyj4m6veu] {
    font-weight: 400;
    text-decoration: underline;
}

.aufgaben-ansicht-wechsel:hover[b-vxyj4m6veu] {
    color: var(--text);
}

/* ===== Zustände ===== */

.aufgaben-fehler[b-vxyj4m6veu] {
    margin: 0;
    padding: 11px 14px;
    border: 1px solid rgba(255, 92, 92, .4);
    border-radius: var(--radius-sm);
    background: rgba(255, 92, 92, .08);
    color: var(--red-text);
    font-size: 13px;
}

.aufgaben-lädt[b-vxyj4m6veu] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

.aufgaben-leer[b-vxyj4m6veu] {
    margin: 0;
    padding: 26px 18px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
}

/* ===== Aufteilung =====
   EINE Stelle, an der die Fläche in Spalten zerfällt.

   ABWEICHUNG von der eigenen Notiz aus Stapel B (dort stand: hier kommen
   `250px minmax(0, 1fr)` hin) — und zwar mit Absicht:

   Die Breite der Facettenspalte ändert sich, wenn sie eingeklappt wird
   (250 px → 44 px). Stünde die Zahl HIER, müsste jede einbauende Seite den
   Einklapp-Zustand der Spalte mitführen, um ihr eigenes Raster nachzuziehen
   — also ein Rückkanal, eine Zustandskopie und zwei Stellen, die
   auseinanderlaufen können. Genau das würde Stapel F (Board, eingeklappt
   gestartet) zum Umbau zwingen.

   Deshalb trägt die Spalte ihre Breite selbst, und das Raster sagt nur
   `auto`: „so breit, wie die Spalte gerade ist". Die Möbel-Stellung bleibt
   dort, wo sie hingehört — in der Komponente (data-model §2.3). Das Board
   setzt nur `StartEingeklappt="true"` und sonst nichts. */

.aufgaben-zweispalt[b-vxyj4m6veu] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Ohne Facettenspalte (Organisation ganz ohne Aufgaben) bleibt genau eine
   Spalte übrig — `auto` fiele sonst auf Breite 0 und risse eine Lücke. */
.aufgaben-zweispalt:has(> .aufgaben-inhalt:only-child)[b-vxyj4m6veu] {
    grid-template-columns: minmax(0, 1fr);
}

.aufgaben-inhalt[b-vxyj4m6veu] {
    min-width: 0;
}

/* ===== Zweiter Leerzustand (FR-019) =====
   Er sieht dem ersten ähnlich, sagt aber etwas anderes — und trägt deshalb
   den Ausweg gleich mit. Ein Leerzustand ohne Ausweg ist eine Sackgasse:
   die Fachperson müsste raten, welcher der vier Filter schuld ist.
   174 B4 Nacharbeit (ora-1): der dritte, „alle sind fertig“, trägt dieselbe
   Gestalt — nur sein Ausweg ist ein anderer („Fertige anzeigen“). */

.aufgaben-leer-filter[b-vxyj4m6veu],
.aufgaben-leer-fertig[b-vxyj4m6veu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 18px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
}

.aufgaben-leer-filter p[b-vxyj4m6veu],
.aufgaben-leer-fertig p[b-vxyj4m6veu] {
    margin: 0;
}

/* ===== Tabelle ===== */

/* 167 B9 Nacharbeit (Browser-Prüfung 2026-10-08): Die Hülle ist ein
   Container (Container Queries unten) — die Spalten richten sich nach der
   Breite, die die LISTE wirklich hat (Facettenspalte auf oder zu), nicht nach
   dem Fenster. Sie scrollt nicht mehr waagerecht: Die Aktionen standen bei
   1440 px halb und bei 1100 px ganz außerhalb, erreichbar nur über einen
   Scrollbalken am Tabellenende. Ohne overflow-Riegel kann zugleich das
   „Mehr“-Menü der letzten Zeile über den Rand hinaus aufklappen. Die runden
   Ecken trägt deshalb der Tabellenkopf selbst. */
.aufgaben-tabelle-hülle[b-vxyj4m6veu] {
    container-type: inline-size;
    container-name: aufgaben-liste;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  thead th:first-child {
    border-top-left-radius: var(--radius);
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  thead th:last-child {
    border-top-right-radius: var(--radius);
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  .aufgaben-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th {
    padding: 10px 14px;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  td {
    padding: 11px 14px;
    color: var(--text);
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  tbody tr:last-child td {
    border-bottom: none;
}

/* Feste Spaltenbreiten: Titel nimmt den Rest. Ohne sie wandern die Kanten
   bei jedem Bestandswechsel, und die Liste wirkt unruhig — gerade das, was
   beim Vergleichen stört. */
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-status { width: 132px; }
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-agenten { width: 232px; }
/* 167 B9 Nacharbeit: EIN Knopf („Umsetzung starten“ als breitester) plus der
   „Mehr“-Knopf — gemessen 161 px (Sichtprobe 2026-10-08, Chromium,
   system-ui 11,5 px). Gleich breit in jeder Lane, kein Umbruch. */
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-aktionen { width: 168px; text-align: right; }
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  td.aufgaben-spalte-aktionen { text-align: right; }
/* 174 B5 (AN11): „Erstellt am“ (TT.MM.JJJJ) und „Letzte Aktivität“ (relativ
   oder Datum) — schmal, ohne Umbruch, Ziffern gleich breit. */
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-erstellt { width: 118px; }
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-aktivität { width: 138px; }
.aufgaben-erstellt[b-vxyj4m6veu],
.aufgaben-aktivität[b-vxyj4m6veu] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ===== 125 — Globale Einstellung ======================================== */

/* 174 B4 (FR-001): die Organisations-Gruppen samt Überschrift sind
   entfallen — die Organisation steht je Zeile in ihrer Spalte. */

/* Herkunfts-Spalte (A9: steht auch bei genau einer sichtbaren Organisation)
   und Dauer-Spalte (V7: Aufgaben ohne Messung lassen die Zelle ehrlich
   leer) — beides Nur-Lese-Auskünfte, daher schmal gehalten. */
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-organisation { width: 180px; }
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-dauer { width: 170px; }

.aufgaben-dauer[b-vxyj4m6veu] {
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    white-space: nowrap;
}

/* Der Aktualisieren-Knopf der Momentaufnahme (research R10): ruhiger
   Sekundär-Knopf (`af-btn af-btn-sm` trägt die Optik), rechts im Kopf. */
.aufgaben-aktualisieren[b-vxyj4m6veu] {
    align-self: center;
    margin-left: 12px;
}

/* N48 (2026-09-21): der Anlege-Knopf — rechts im Kopf, an
   der einzigen hervorgehobenen Stelle des Kopfes. Die Prominenz selbst
   tragen die Bestands-Klassen (`af-btn af-btn-primary` im Markup, Akzent-
   farbe aus app.css); hier steht nur die Platzierung. */
.aufgaben-neue-aufgabe[b-vxyj4m6veu] {
    align-self: center;
    margin-left: 12px;
}

/* Betonung 3: die überfahrene Zeile trägt den Akzent-Strich der
   Beschreibungs-Karte. Die ganze Zeile ist anklickbar (FR-003) — der
   Zeiger sagt das auch. */
.aufgaben-tabelle-hülle[b-vxyj4m6veu]  tbody tr {
    cursor: pointer;
    transition: background .12s ease;
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  tbody tr td:first-child {
    border-left: 3px solid transparent;
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  tbody tr:hover td {
    background: var(--bg-3);
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  tbody tr:hover td:first-child {
    border-left-color: var(--accent);
}

/* ===== Titel-Zelle ===== */

.aufgaben-titel-zeile[b-vxyj4m6veu] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.aufgaben-titel[b-vxyj4m6veu] {
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    /* 167 B9 Nacharbeit: Titel ohne Leerzeichen (Hash-artig) brechen in der
       Spalte um, statt die Tabelle zu verbreitern. */
    overflow-wrap: anywhere;
}

.aufgaben-tabelle-hülle[b-vxyj4m6veu]  tbody tr:hover .aufgaben-titel {
    color: var(--accent-2);
}

.aufgaben-titel:focus-visible[b-vxyj4m6veu] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ===== Status =====
   Betonung 1: sechs Farben, je eine Bedeutung — dieselben wie überall im
   Haus (Lane.cs-Reihenfolge). */

.aufgaben-status[b-vxyj4m6veu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    white-space: nowrap;
}

.aufgaben-status-punkt[b-vxyj4m6veu] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 999px;
    background: var(--text-3);
}

.aufgaben-status-approved .aufgaben-status-punkt[b-vxyj4m6veu] { background: var(--accent); }
.aufgaben-status-in_progress .aufgaben-status-punkt[b-vxyj4m6veu] { background: var(--yellow); }
.aufgaben-status-testing .aufgaben-status-punkt[b-vxyj4m6veu] { background: var(--purple); }
.aufgaben-status-done .aufgaben-status-punkt[b-vxyj4m6veu] { background: var(--green); }

/* ===== Agenten ===== */

.aufgaben-agenten[b-vxyj4m6veu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
}

.aufgaben-agent-jetzt[b-vxyj4m6veu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-weight: 600;
}

/* Betonung 2: das einzige bewegte Element der Seite — und es bedeutet
   „hier arbeitet gerade jemand". */
.aufgaben-agent-punkt[b-vxyj4m6veu] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 999px;
    background: var(--green);
    animation: aufgaben-puls-b-vxyj4m6veu 2.4s ease-in-out infinite;
}

@keyframes aufgaben-puls-b-vxyj4m6veu {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(63, 206, 139, .5);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 0 4px rgba(63, 206, 139, 0);
        opacity: .6;
    }
}

.aufgaben-agent-zuletzt[b-vxyj4m6veu] {
    color: var(--text-2);
}

.aufgaben-agent-summe[b-vxyj4m6veu] {
    color: var(--text-3);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.aufgaben-agent-keine[b-vxyj4m6veu] {
    color: var(--text-3);
    font-style: italic;
}

/* ===== Aktionen ===== */

/* Sichtprobe 2026-09-14 (hell/dunkel, 780/1000/1600 px): Die Knöpfe standen
   auf `flex-wrap: wrap`. Bei schmalem Fenster brach das Paar
   „Freigeben"+„Blockieren…" um — und genau DIE Zeilen wurden doppelt so
   hoch wie ihre Nachbarn. Eine Liste, deren Zeilenhöhe von der Lane abhängt,
   ist unruhig zu lesen; und sie widerspricht der einen Zusage dieser Fläche
   („die Zeilenhöhe bleibt, nichts springt", MR). Also: nie umbrechen, und die
   Spalte ist überall so breit, dass die zwei breitesten Knöpfe nebeneinander
   passen. Lieber der Titel etwas kürzer als die Zeile doppelt hoch. */
.aufgaben-aktionen[b-vxyj4m6veu] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.aufgaben-aktion[b-vxyj4m6veu] {
    padding: 4px 9px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-4);
    color: var(--text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .12s ease;
}

/* 167 B9 Nacharbeit: „Umsetzung starten“ ist die Hauptaktion der Zeile —
   Akzent wie auf Karte und Detail, die übrigen bleiben ruhig. */
.aufgaben-aktion-primär[b-vxyj4m6veu] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Der „Mehr“-Knopf der Zeile (AktionsMenü, nur Symbol): so hoch wie die
   Aktionsknöpfe, damit die Zeile ruhig bleibt; das Menü öffnet rechtsbündig. */
.aufgaben-aktionen[b-vxyj4m6veu]  .af-menü-wrap > .af-btn {
    padding: 3px 6px;
}

.aufgaben-aktionen[b-vxyj4m6veu]  .af-menü {
    text-align: left;
}

.aufgaben-aktion:hover:not(:disabled)[b-vxyj4m6veu] {
    filter: brightness(1.2);
}

.aufgaben-aktion:disabled[b-vxyj4m6veu] {
    opacity: .45;
    cursor: not-allowed;
}

/* 167 B9 (ui-verhalten §4): die Marken der Karte in Kurzform hinter dem
   Titel — Satzschreibung, kleiner als die Bestands-Badges, gleiche Farben
   wie an der Karte (Runde gelb, spezifiziert grün, Fortschritt neutral). */
.aufgaben-marke[b-vxyj4m6veu] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.aufgaben-marke-runde[b-vxyj4m6veu] {
    background: rgba(255, 176, 32, .14);
    color: var(--yellow-text);
}

.aufgaben-marke-spezifiziert[b-vxyj4m6veu] {
    background: rgba(63, 206, 139, .14);
    color: var(--green);
}

.aufgaben-marke-fortschritt[b-vxyj4m6veu] {
    background: var(--bg-4);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

/* ===== Schmales Fenster =====
   Die Agenten-Spalte ist die erste, die geht: sie ist eine Auskunft, kein
   Bedienweg. Titel, Status und Aktionen bleiben — ohne sie wäre die Liste
   nicht mehr bedienbar, sondern nur noch schmal. */

@media (max-width: 1100px) {
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-agenten { width: 176px; }

}

/* 167 B9 Nacharbeit: Ist die LISTE schmal (Facettenspalte offen, kleines
   Fenster), gehen zuerst die Auskunfts-Spalten — Agenten, dann Repository
   und Organisation. Titel, Status und Aktionen bleiben immer sichtbar: ohne
   sie wäre die Liste nicht mehr bedienbar. Bei 1100 px Fensterbreite mit
   offener Facettenspalte ist die Liste 530 px breit (Messung 07-liste). */
@container aufgaben-liste (max-width: 820px) {
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-agenten,
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  td.aufgaben-spalte-agenten {
        display: none;
    }
}

@container aufgaben-liste (max-width: 640px) {
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-repository,
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  td.aufgaben-spalte-repository,
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-organisation,
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  td.aufgaben-spalte-organisation {
        display: none;
    }

    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-status { width: 112px; }
}

/* Unter 900 px steht die Facettenspalte ÜBER der Liste statt daneben —
   dieselbe Grenze, an der die Spalte selbst auf volle Breite geht. Zwei
   schmale Spalten nebeneinander wären hier beides zu eng. */
@media (max-width: 900px) {
    .aufgaben-zweispalt[b-vxyj4m6veu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  th.aufgaben-spalte-agenten,
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  td.aufgaben-spalte-agenten {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aufgaben-agent-punkt[b-vxyj4m6veu],
    .aufgaben-tabelle-hülle[b-vxyj4m6veu]  tbody tr {
        animation: none;
        transition: none;
    }
}
/* /Components/Tasks/AufgabenHoverKarte.razor.rz.scp.css */
/* 077 T011 — die Beschreibungs-Karte beim Überfahren.

   Gestaltungs-Gedanke: Diese Karte ist der Fokus der ganzen Fläche (O-Ton
   der Fachperson: „Der Fokus liegt auf der Beschreibung"). Sie darf deshalb
   deutlich sein — aber sie muss verschwinden können, ohne dass jemand sie
   wegklickt. Vier Mittel, mehr nicht:

   1. Eine Akzent-Kante links. Dieselbe Kante bekommt im Listen-CSS die
      überfahrene ZEILE — Zeile und Karte tragen also denselben Strich, und
      man sieht auf einen Blick, wozu die Karte gehört. Das ersetzt eine
      Sprechblasen-Spitze, die bei einer fixierten Karte ohnehin nie richtig
      sitzen würde.
   2. Sie gleitet zwischen den Zeilen, statt zu blinken. Wer eine Tabelle
      abfährt, bekommt sonst bei jeder Zeile ein Aufblitzen — das ist genau
      das Flackern, das der Wahl-Vermerk ausschließt. Die Karte bleibt
      stehen und wandert weich mit.
   3. Sie ist für den Zeiger nicht da (pointer-events: none). Sie liegt über
      der nächsten Zeile; würde sie Klicks fangen, verstellte sie den Weg
      ins Detail.
   4. Feste Breite, begrenzte Höhe, gekürzter Text. Eine Vorschau, die
      beliebig wächst, ist keine Vorschau mehr — die volle Beschreibung
      steht im Detail (A5).

   Alle Farben kommen aus den Haus-Variablen; hell wie dunkel trägt die
   Karte dieselbe Aussage. */

.aufgaben-hover[b-7054y7kdjt] {
    position: fixed;
    z-index: 120;
    width: 360px;
    max-height: 210px;
    overflow: hidden;
    padding: 12px 15px;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg-2);
    box-shadow: var(--shadow);

    /* Punkt 3: Die Karte liegt über der nächsten Zeile — der Zeiger geht
       durch sie hindurch, der Klickweg bleibt frei. */
    pointer-events: none;

    /* Punkt 2: Auftauchen statt Aufblitzen, Wandern statt Springen. */
    animation: aufgaben-hover-ein-b-7054y7kdjt .13s ease-out both;
    transition: top .16s ease, left .16s ease;
}

@keyframes aufgaben-hover-ein-b-7054y7kdjt {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aufgaben-hover-titel[b-7054y7kdjt] {
    margin-bottom: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

/* Punkt 4: vier Zeilen, dann ist Schluss — und zwar sichtbar mit Auslassung,
   nicht heimlich abgeschnitten. */
.aufgaben-hover-text[b-7054y7kdjt] {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* „keine Beschreibung" ist eine Auskunft, kein Inhalt — sie tritt zurück. */
.aufgaben-hover-text-leer[b-7054y7kdjt] {
    color: var(--text-3);
    font-style: italic;
}

.aufgaben-hover-grund[b-7054y7kdjt] {
    margin: 9px 0 0;
    color: var(--red-text);
    font-size: 12px;
}

.aufgaben-hover-fuss[b-7054y7kdjt] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11.5px;
}

.aufgaben-hover-zeit[b-7054y7kdjt] {
    font-variant-numeric: tabular-nums;
}

/* Wer Bewegung abgestellt hat, bekommt dieselbe Karte — nur ohne Weg dahin. */
@media (prefers-reduced-motion: reduce) {
    .aufgaben-hover[b-7054y7kdjt] {
        animation: none;
        transition: none;
    }
}
/* /Components/Tasks/BlockerPanel.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep. */

.blocker-panel[b-451g1op5lo] {
    margin-top: 1.5rem;
    padding: 16px 18px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.blocker-panel-header[b-451g1op5lo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.blocker-panel-header h2[b-451g1op5lo] {
    margin: 0;
    font-size: 15px;
}

.blocker-panel-filter[b-451g1op5lo] {
    max-width: 20rem;
}

.blocker-panel-empty[b-451g1op5lo] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.blocker-panel-grid[b-451g1op5lo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.blocker-panel-grid[b-451g1op5lo]  th {
    padding: 8px 12px;
    text-align: left;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
}

.blocker-panel-grid[b-451g1op5lo]  td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.blocker-panel-grid[b-451g1op5lo]  tr:last-child td {
    border-bottom: none;
}

.blocker-panel-grid[b-451g1op5lo]  tr:hover td {
    background: var(--bg-3);
}
/* /Components/Tasks/DependencyEditor.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep. */

.dependency-editor[b-zzm4yqwy4z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 16px 18px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dependency-editor h3[b-zzm4yqwy4z] {
    margin: 0;
    font-size: 15px;
}

.dependency-editor h4[b-zzm4yqwy4z] {
    margin: 0 0 0.25rem;
    font-size: 12.5px;
    color: var(--text-2);
}

.dependency-editor-group[b-zzm4yqwy4z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dependency-editor-empty[b-zzm4yqwy4z] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

.dependency-editor-list[b-zzm4yqwy4z] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dependency-editor-list li[b-zzm4yqwy4z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 6px 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.dependency-editor-remove[b-zzm4yqwy4z] {
    padding: 0 8px;
    border: 1px solid rgba(255, 92, 92, .4);
    border-radius: 5px;
    background: rgba(255, 92, 92, .12);
    color: var(--red);
    line-height: 1.4;
}

.dependency-editor-remove:hover[b-zzm4yqwy4z] {
    filter: none;
    background: rgba(255, 92, 92, .2);
}

.dependency-editor-add[b-zzm4yqwy4z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dependency-editor-add select[b-zzm4yqwy4z] {
    width: 100%;
}

.dependency-editor-add-button[b-zzm4yqwy4z] {
    align-self: flex-start;
}

/* f113 T022 (P1-Nachsuche, Edge E10, Kriterium 11, Vertrag §3 Punkt 7):
   derselbe Schutz für die Abhängigkeits-Titel (Vorgänger und Nachfolger,
   `@predecessor.Title` / `@dependent.Title`) — ein Titel OHNE Trenner trieb
   die rechte Spalte seitlich auf. Der Titel ist der `<span>` der flexiblen
   Listenzeile (Flex-Item mit automatischem Mindestmaß); die
   Entfernen-Schaltfläche trägt keinen Text. Kein `pre`/`code` in dieser
   Komponente, kein Reset wie beim Code-Block der linken Spalte nötig. */
.dependency-editor-list li span[b-zzm4yqwy4z] {
    overflow-wrap: anywhere;
}
/* /Components/Tasks/DependencyGraph.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep.
   f30 US5 (T023): Erscheinungsbild der reduzierten Fertig-Endpunkte —
   klar als „fertig" lesbar (Grün = bestehendes Fertig-Signal des
   Systems), aber zurückgenommen gegenüber vollen Knoten (dünne,
   gestrichelte Kante, ruhige Füllung, Check statt Farbe allein). */

.dependency-graph-wrapper[b-fnrwxr9cf9] {
    overflow-x: auto;
    padding: 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.dependency-graph-empty[b-fnrwxr9cf9] {
    margin: 0;
    color: var(--text-3);
    font-size: 12.5px;
}

/* f30 T023 (G6): der ehrliche Leerzustand der Standardansicht — ruhig,
   zentriert, mit Luft; erklärt den Grund, der Umschalter liegt im
   Seitenkopf und bleibt erreichbar. Kein Warn-Ton, keine Werbung. */
.dependency-graph-empty-filtered[b-fnrwxr9cf9] {
    padding: 48px 20px;
    text-align: center;
    font-size: 13px;
}

.dependency-graph text[b-fnrwxr9cf9] {
    font-size: 12px;
    fill: var(--text-2);
}

.dependency-graph-node circle[b-fnrwxr9cf9] {
    transition: filter .12s;
}

.dependency-graph-node:hover circle[b-fnrwxr9cf9] {
    filter: brightness(1.25);
}

.dependency-graph-node-cycle circle[b-fnrwxr9cf9] {
    stroke-dasharray: 4 2;
}

/* 171 B5 (karten-markierung §1): dieselbe Sprache wie auf der Karte — Rot
   mit durchgezogenem, Orange mit gestricheltem Rand. Die Strichart trennt
   beide auch ohne Farbwahrnehmung. Zyklus-Knoten behalten ihren roten
   Zyklus-Rand (eigene Aussage). */
.dependency-graph-node.is-blocked:not(.dependency-graph-node-cycle) circle[b-fnrwxr9cf9] {
    stroke: var(--red);
    stroke-width: 2.5;
}

.dependency-graph-node.is-waiting:not(.dependency-graph-node-cycle) circle[b-fnrwxr9cf9] {
    stroke: var(--orange);
    stroke-width: 2.5;
    stroke-dasharray: 5 3;
}

/* f30 T023 (G4): reduzierter Fertig-Endpunkt — die grüne Füllung aus
   der Vollansicht (inline, rgba .2) wird auf einen ruhigen Ton
   zurückgenommen, die Kante grün gestrichelt (die Formsprache für
   „reduziert/virtuell" im Bestand: Zyklus, Subagent). CSS übersteuert
   die SVG-Präsentationsattribute. */
.dependency-graph-node-done-reduced circle[b-fnrwxr9cf9] {
    fill: rgba(63, 206, 139, .07);
    stroke: var(--green);
    stroke-width: 1.25;
    stroke-dasharray: 3 2.5;
}

/* Der Haken im Kreis trägt die „fertig"-Aussage allein — nüchtern,
   ohne die Blocker-/Zyklus-Aussagen (rot) zu berühren (G5). */
.dependency-graph-node-done-reduced .dependency-graph-done-check[b-fnrwxr9cf9] {
    fill: var(--green);
    font-size: 15px;
    font-weight: 700;
}

/* Auch der Titel tritt ab: der Endpunkt ist Kontext, kein Akteur. */
.dependency-graph-node-done-reduced text:not(.dependency-graph-done-check)[b-fnrwxr9cf9] {
    fill: var(--text-3);
}

/* 167 B10 (T054; ui-verhalten §6, FR-036): die Gruppe der offenen Kinder
   unter ihrem Parent. Bewusst eine ANDERE Formsprache als die Abhängigkeit:
   kein Pfeil, kein Strich zwischen Knoten, sondern ein ruhiger gestrichelter
   Rahmen mit einem Hauch Akzent-Tönung — er fasst zusammen, er verbindet
   nicht. Der Kopf trägt den Fortschritt klein und gedämpft; die Zahl ist
   Information, keine Aufforderung. */
.dependency-graph-group-frame[b-fnrwxr9cf9] {
    fill: rgba(108, 140, 255, .045);
    stroke: rgba(108, 140, 255, .55);
    stroke-width: 1.25;
    stroke-dasharray: 5 4;
}

.dependency-graph text.dependency-graph-group-count[b-fnrwxr9cf9] {
    fill: var(--text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Der Bezugsstrich (nur wenn der Rahmen weiter unten liegen muss): punktiert,
   ohne Pfeilspitze — sichtbar „gehört zu“, nie „wartet auf“. */
.dependency-graph-group-tether[b-fnrwxr9cf9] {
    stroke: rgba(108, 140, 255, .45);
    stroke-width: 1.25;
    stroke-dasharray: 1 4;
    stroke-linecap: round;
}

[data-theme="light"] .dependency-graph-group-frame[b-fnrwxr9cf9] {
    fill: rgba(108, 140, 255, .06);
    stroke: rgba(76, 104, 220, .55);
}
/* /Components/Tasks/EventTimeline.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep. */

.event-timeline ul[b-05a7ny9zsl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-timeline-entry[b-05a7ny9zsl] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 7px 11px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.event-timeline-time[b-05a7ny9zsl] {
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 11.5px;
    white-space: nowrap;
}

/* f113 T023 (Vertrag §3 Punkt 11, Edge E10/Kriterium 11): der Verlaufstext
   trägt `Describe()` = „Angelegt durch {ActorDisplayName}" — der Akteur ist
   `Users.DisplayName` (`TasksModule.cs:1718`), also BENUTZER-Freitext. Die
   Klasse `.event-timeline-text` stand seit f18 im Markup
   (`EventTimeline.razor:16`), hatte aber NIE eine CSS-Regel — deshalb war
   hier nichts zu erweitern, die Regel ist neu.

   `anywhere` und NICHT `break-word`, begründet: `.event-timeline-text` ist
   Flex-Item in `.event-timeline-entry` (`display: flex;
   justify-content: space-between`, OHNE `flex-wrap` und ohne
   `min-width: 0`). Sein automatisches Mindestmaß liegt in der HAUPTachse =
   WAAGRECHT und ist das Min-Content-Maß; `break-word` senkt es NICHT, das
   Element könnte also gar nicht unter das Token-Maß schrumpfen — der
   Überlauf bliebe. `anywhere` senkt es. Der Zeitstempel daneben ist
   `white-space: nowrap` und behält sein Maß, die Zeile teilt sich also
   richtig auf. Merkregel aus T022: beim Flex-Item mit automatischem
   Mindestmaß trägt nur `anywhere`.

   Die Fläche ist die RECHTE Spalte (Tab „Verlauf",
   `TaskDetailPage.razor:485`) — Kriterium 11 nennt „eine Spalte", nicht
   „die linke".

   Ehrlich benannte Restwirkung: `.event-timeline-entry` ist selbst
   Flex-Item in `.event-timeline ul` (`flex-direction: column`), sein
   automatisches Mindestmaß ist also die Min-Content-HÖHE — und die wächst,
   wenn die Min-Content-Breite sinkt. Sie bindet hier aber NICHT: die `ul`
   hat `height: auto`, es wird also nichts gestaucht, und der
   Spalten-Rahmen scrollt (`overflow-y: auto`). Für normale Namen (mit
   Leerzeichen) ist die Zeilenzahl ohnehin unverändert. */
.event-timeline-text[b-05a7ny9zsl] {
    overflow-wrap: anywhere;
}

.event-timeline-empty[b-05a7ny9zsl] {
    color: var(--text-3);
    font-size: 12.5px;
}
/* /Components/Tasks/FacettenSpalte.razor.rz.scp.css */
/* 077 T016 — Facettenspalte (Mockup-Richtung 2 „Facettenspalte").

   Gestaltungs-Gedanke: Das ist ein INSTRUMENT, keine Fläche zum Lesen. Die
   Tabelle rechts hat den Inhalt; die Spalte hat Zahlen. Also ist sie
   absichtlich still gehalten — kleine Schrift, gedämpfte Namen, und genau
   EIN Farbträger: der Akzent. Er bedeutet überall dasselbe, nämlich „das
   hier wirkt gerade":

     · das gefüllte Kästchen eines gewählten Wertes,
     · dessen Trefferzahl,
     · die Zahl im Kopf einer zugeklappten Facette,
     · die Kante und die Marke des eingeklappten Streifens.

   Die Trefferzahlen laufen in Tabellenziffern (tabular-nums) und stehen
   rechtsbündig untereinander. Das ist der eigentliche Zweck der ganzen
   Richtung: eine Zahlenspalte, die man mit einem Blick von oben nach unten
   liest — ungleiche Ziffernbreiten machten daraus ein Zickzack.

   Die Null bleibt stehen und bleibt anklickbar, nur blass (FR-007). Wer
   Nullen entfernt, lässt die Spalte bei jedem Klick springen; dann kann man
   nicht mehr verfolgen, was der eigene Klick bewirkt hat.

   Die Spalte trägt ihre BREITE selbst — 250 px offen, 44 px als Streifen.
   Damit kann sie die einbauende Seite (Liste wie Board, Stapel F) einfach
   in ein `auto`-Raster setzen und muss für das Einklappen nichts
   verdrahten. Die Möbel-Stellung bleibt, wo sie hingehört: hier.

   Alle Farben sind Haus-Variablen — hell wie dunkel dieselbe Aussage. */

.facetten-spalte[b-nnipt7co1c] {
    width: 250px;
    align-self: start;
    position: sticky;
    top: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    transition: width .16s ease;
}

/* ===== Kopf =====
   Eingeklappt IST der Kopf die ganze Spalte (FR-016 F3). */

.facetten-kopf[b-nnipt7co1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
}

/* Die gefärbte Kante: „hier wirkt etwas". Sie sitzt am Kopf, weil der Kopf
   der einzige Teil ist, den man auch eingeklappt noch sieht. */
.facetten-kopf.hat-filter[b-nnipt7co1c] {
    border-bottom-color: var(--accent);
    box-shadow: inset 0 -1px 0 0 var(--accent);
}

.facetten-titel[b-nnipt7co1c] {
    letter-spacing: .2px;
}

/* Befund der Fachperson (2026-09-16): bei `padding: 0 2px` war die
   Klickfläche im Kern nur die Glyphe (~15×13 px) — schwer zu treffen.
   Jetzt 28×28 px Bedien-Fläche, ohne das ruhige Bild zu ändern: Die
   negativen Ränder oben/unten rechnen die Fläche aus der Zeilenhöhe wieder
   heraus (28 − 14 = 14 px Beitrag ≈ die alte Glyphe), die Mitte bleibt die
   alte Position. Die Fläche darf größer sein als das sichtbare Zeichen. */
.facetten-zu-knopf[b-nnipt7co1c] {
    margin-left: auto;
    width: 28px;
    height: 28px;
    margin-top: -7px;
    margin-bottom: -7px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-3);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease;
}

.facetten-zu-knopf:hover[b-nnipt7co1c] {
    color: var(--text);
}

.facetten-zu-knopf:focus-visible[b-nnipt7co1c] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.facetten-streifen-marke[b-nnipt7co1c] {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ===== Eingeklappt: der Streifen =====
   Er ist kein leerer Rand. Der senkrechte Schriftzug sagt, WAS hier
   eingeklappt ist — ohne ihn wäre die Leiste ein Rätsel; die Marke sagt,
   DASS etwas wirkt. Beides zusammen ist die Zusage „eingeklappt ist nicht
   verborgen". */

.facetten-eingeklappt[b-nnipt7co1c] {
    width: 44px;
}

.facetten-eingeklappt .facetten-kopf[b-nnipt7co1c] {
    flex-direction: column;
    gap: 10px;
    padding: 11px 0;
}

.facetten-eingeklappt .facetten-titel[b-nnipt7co1c] {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    order: 3;
}

/* Im Streifen ist die Hauptachse senkrecht: dieselbe Rechnung gedreht —
   der Flächenbeitrag in der Säule bleibt bei ~14 px, die 28 px Fläche
   überlappt unsichtbar die 10 px Abstände. */
.facetten-eingeklappt .facetten-zu-knopf[b-nnipt7co1c] {
    margin: -7px 0;
    order: 1;
}

.facetten-eingeklappt .facetten-streifen-marke[b-nnipt7co1c] {
    order: 2;
}

/* ===== Eine Facette ===== */

.facetten-spalte[b-nnipt7co1c]  .facette {
    border-bottom: 1px solid var(--border);
}

.facetten-spalte[b-nnipt7co1c]  .facette:last-child {
    border-bottom: none;
}

/* `justify-content: flex-start` ist hier NICHT überflüssig: die Haus-Regel
   für nackte `button`-Elemente (app.css) setzt `center`. Bei 250 px füllt
   der Inhalt die Zeile fast aus, dort fällt es nicht auf — sobald die Spalte
   aber die volle Breite bekommt (schmales Fenster), rutschen Name und Pfeil
   in die Mitte. Sichtprobe 2026-09-14 bei 880 px. */
.facetten-spalte[b-nnipt7co1c]  .facette-kopf {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.facetten-spalte[b-nnipt7co1c]  .facette-kopf:hover {
    background: var(--bg-3);
}

.facetten-spalte[b-nnipt7co1c]  .facette-kopf:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.facetten-spalte[b-nnipt7co1c]  .facette-pfeil {
    flex: none;
    color: var(--text-3);
    font-size: 9px;
    line-height: 1;
    transition: transform .15s ease;
}

.facetten-spalte[b-nnipt7co1c]  .facette-offen .facette-pfeil {
    transform: rotate(90deg);
}

.facetten-spalte[b-nnipt7co1c]  .facette-name {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* Die Zahl der wirkenden Werte — sichtbar auch (und gerade) zugeklappt:
   eine zugeklappte Facette verschweigt nicht, dass sie wirkt (FR-012). */
.facetten-spalte[b-nnipt7co1c]  .facette-aktiv {
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.facetten-spalte[b-nnipt7co1c]  .facette-körper {
    padding: 0 8px 9px;
}

/* ===== Ein Wert ===== */

.facetten-spalte[b-nnipt7co1c]  .facette-wert {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    padding: 5px 6px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.facetten-spalte[b-nnipt7co1c]  .facette-wert:hover {
    background: var(--bg-3);
    color: var(--text);
}

.facetten-spalte[b-nnipt7co1c]  .facette-wert:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.facetten-spalte[b-nnipt7co1c]  .facette-wert-an {
    color: var(--text);
    font-weight: 600;
}

/* Die Null: ruhig, aber da — und weiterhin anklickbar (FR-007). */
.facetten-spalte[b-nnipt7co1c]  .facette-wert-null {
    opacity: .42;
}

.facetten-spalte[b-nnipt7co1c]  .facette-wert-null:hover {
    opacity: 1;
}

.facetten-spalte[b-nnipt7co1c]  .facette-kasten {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    flex: none;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-3);
    transition: background .12s ease, border-color .12s ease;
}

.facetten-spalte[b-nnipt7co1c]  .facette-wert-an .facette-kasten {
    border-color: var(--accent);
    background: var(--accent);
}

.facetten-spalte[b-nnipt7co1c]  .facette-kasten svg {
    width: 10px;
    height: 10px;
    display: block;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Derselbe Punkt wie in der Statusspalte der Tabelle — eine Farbe, eine
   Bedeutung, überall im Haus dieselbe. */
.facetten-spalte[b-nnipt7co1c]  .facette-punkt {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 999px;
    background: var(--text-3);
}

.facetten-spalte[b-nnipt7co1c]  .facette-punkt-approved { background: var(--accent); }
.facetten-spalte[b-nnipt7co1c]  .facette-punkt-in_progress { background: var(--yellow); }
.facetten-spalte[b-nnipt7co1c]  .facette-punkt-blocked { background: var(--red-dark); }
.facetten-spalte[b-nnipt7co1c]  .facette-punkt-testing { background: var(--purple); }
.facetten-spalte[b-nnipt7co1c]  .facette-punkt-done { background: var(--green); }

.facetten-spalte[b-nnipt7co1c]  .facette-wert-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Zahlenspalte: rechtsbündig, Tabellenziffern — von oben nach unten
   lesbar. Das ist der Punkt der ganzen Richtung. */
.facetten-spalte[b-nnipt7co1c]  .facette-wert-anzahl {
    margin-left: auto;
    flex: none;
    padding-left: 8px;
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.facetten-spalte[b-nnipt7co1c]  .facette-wert-an .facette-wert-anzahl {
    color: var(--accent);
}

/* ===== Suchfeld ===== */

.facette-suche-feld[b-nnipt7co1c] {
    position: relative;
}

.facette-suche[b-nnipt7co1c] {
    width: 100%;
    padding: 6px 10px 6px 30px;
    font-size: 12.5px;
}

.facette-suche-lupe[b-nnipt7co1c] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 11px;
    pointer-events: none;
}

/* Kein Spalten-Fuß: „Alle Filter löschen" steht in der Markenzeile, weil die
   auch bei eingeklappter Spalte sichtbar bleibt (Begründung im Markup). */

/* ===== Schmales Fenster =====
   Unter 900 px steht die Spalte ÜBER der Liste statt daneben; die Seite
   legt ihr Raster dort auf eine Spalte um. Eingeklappt bleibt sie dann ein
   waagerechter Streifen — ein 44 px schmaler Balken über der vollen Breite
   wäre sinnlos. */

@media (max-width: 900px) {
    .facetten-spalte[b-nnipt7co1c],
    .facetten-eingeklappt[b-nnipt7co1c] {
        width: auto;
        position: static;
    }

    /* Die vier Facetten NEBENEINANDER statt untereinander. Sichtprobe
       2026-09-14 bei 880 px: gestapelt zog sich jede Wertzeile über die
       volle Breite, und die Trefferzahl stand meterweit rechts von ihrem
       Namen — die beiden gehören zusammen, und genau diese Zuordnung ist
       der ganze Zweck der Spalte. Nebeneinander bleibt jede Facette so
       schmal, dass Name und Zahl ein Paar bleiben; nebenbei wird aus einer
       sehr hohen Spalte eine flache, und die Tabelle rückt wieder ins
       Bild. */
    .facetten-körper[b-nnipt7co1c] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 2px 14px;
        padding: 6px 6px 10px;
    }

    /* Das Suchfeld über die volle Breite: es ist ein Eingabefeld, kein
       Wertepaar — abgeschnitten auf 230 px wäre es unbrauchbar. */
    .facetten-spalte[b-nnipt7co1c]  .facette[data-facette="text"] {
        grid-column: 1 / -1;
    }

    /* Trennlinien ergeben im Raster kein Bild mehr (sie träfen sich nicht
       an einer Kante) — die Abstände trennen hier. */
    .facetten-spalte[b-nnipt7co1c]  .facette {
        border-bottom: none;
    }

    .facetten-spalte[b-nnipt7co1c]  .facette-kopf {
        padding: 8px 8px;
    }

    .facetten-eingeklappt .facetten-kopf[b-nnipt7co1c] {
        flex-direction: row;
        padding: 11px 14px;
    }

    .facetten-eingeklappt .facetten-titel[b-nnipt7co1c] {
        writing-mode: horizontal-tb;
        order: 0;
        font-size: 13px;
        letter-spacing: .2px;
        text-transform: none;
        color: inherit;
    }

    .facetten-eingeklappt .facetten-zu-knopf[b-nnipt7co1c] {
        margin-left: auto;
        order: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .facetten-spalte[b-nnipt7co1c],
    .facetten-spalte[b-nnipt7co1c]  .facette-pfeil,
    .facetten-spalte[b-nnipt7co1c]  .facette-wert,
    .facetten-spalte[b-nnipt7co1c]  .facette-kasten {
        transition: none;
    }
}
/* /Components/Tasks/FilterMarkenzeile.razor.rz.scp.css */
/* 077 T017 — Markenzeile über der Liste (und, ab Stapel F, über dem Board).

   Gestaltungs-Gedanke: Diese Zeile muss zwei Dinge gleichzeitig sein, und
   das ist der ganze Entwurf:

     RUHIG genug, um über einer ungefilterten Liste nicht zu stören — dann
     trägt sie nur die Zahl und sonst nichts.
     LAUT genug, um eine vorgefilterte Liste nicht wie eine vollständige
     aussehen zu lassen — jede Marke ist ein sichtbarer Kasten mit eigenem
     Löschknopf.

   Deshalb ist die Trefferzahl die einzige große Ziffer der ganzen Fläche
   (15 px, Tabellenziffern) und alles andere klein. Und deshalb verschwindet
   „Alle Filter löschen", wenn es nichts zu löschen gibt: ein Angebot ohne
   Wirkung macht den Verdacht auf, es wirke gerade doch etwas.

   Das Herkunftsband bekommt bewusst eine ANDERE Farbe als die Marken
   (Grün statt neutral) und eine eigene Zeile darunter. Es ist kein Filter,
   sondern die Erklärung für die Filter — sähe es aus wie eine Marke,
   erwartete man beim Klick dasselbe Verhalten, und es tut etwas anderes. */

.filter-markenzeile[b-gtx7b68s0l] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.filter-zahl[b-gtx7b68s0l] {
    color: var(--text-2);
    font-size: 13px;
    white-space: nowrap;
}

/* Die einzige große Ziffer der Fläche — sie ist die Antwort auf „wie viel
   sehe ich gerade". Tabellenziffern, damit sie beim Filtern nicht in der
   Breite zappelt. */
.filter-zahl b[b-gtx7b68s0l] {
    color: var(--text);
    font-family: var(--mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* Board-Zusatz (FR-016 F2): abgesetzt durch einen Mittelpunkt, nicht durch
   eine zweite Zeile — es ist dieselbe Auskunft, nur feiner. */
.filter-spalten[b-gtx7b68s0l] {
    color: var(--text-3);
    font-size: 12.5px;
    white-space: nowrap;
}

.filter-spalten[b-gtx7b68s0l]::before {
    content: "·";
    margin-right: 10px;
    color: var(--border-light);
}

/* ===== Eine Marke ===== */

.filter-marke[b-gtx7b68s0l] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 5px 3px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    color: var(--text);
    font-size: 12px;
    white-space: nowrap;
}

/* Die Art steht gedämpft davor: „Status: In Arbeit" liest sich als ein
   Gedanke, nicht als zwei gleichwertige Wörter. */
.filter-marke-art[b-gtx7b68s0l] {
    color: var(--text-3);
}

/* Sichtprobe 2026-09-14, zwei Anläufe: Das Kreuz stand hier zuerst als „×"
   (U+00D7), dann als „✕" (U+2715) — beide Male saß es sichtbar zu tief und
   sah aus wie ein tiefgestelltes kleines x. Ursache ist nicht die Größe,
   sondern die Schrift: Auf einem Rechner ohne „Segoe UI" (jedes Linux)
   ersetzt der Browser das Zeichen aus einer Symbolschrift mit eigenen Maßen
   — und über fremde Schriftmaße hat kein CSS Gewalt.

   Deshalb wird das Kreuz jetzt GEZEICHNET. Zwei Striche sind auf jedem Gerät
   zwei Striche. Das ist kein Kosmetik-Detail: ein Löschknopf, der schief
   sitzt, sieht kaputt aus, und ein kaputt aussehender Knopf wird nicht
   gedrückt. */
.filter-marke-x[b-gtx7b68s0l] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    border: none;
    border-radius: 4px;
    background: var(--bg-4);
    color: var(--text-2);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.filter-marke-x svg[b-gtx7b68s0l] {
    width: 9px;
    height: 9px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
}

/* Rot erst beim Zeigen: Löschen ist hier harmlos (man klickt den Wert
   wieder an) — eine dauerhaft rote Reihe machte die Zeile zum Alarmfeld. */
.filter-marke-x:hover[b-gtx7b68s0l] {
    background: var(--red);
    color: #fff;
}

.filter-marke-x:focus-visible[b-gtx7b68s0l] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.filter-alle-löschen[b-gtx7b68s0l] {
    margin-left: auto;
}

/* ===== Herkunftsband (FR-015) ===== */

.filter-herkunft[b-gtx7b68s0l] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(63, 206, 139, .4);
    border-radius: var(--radius);
    background: rgba(63, 206, 139, .07);
    color: var(--text-2);
    font-size: 12.5px;
}

.filter-herkunft b[b-gtx7b68s0l] {
    color: var(--text);
}

.filter-herkunft-weg[b-gtx7b68s0l] {
    margin-left: auto;
}

@media (max-width: 700px) {
    .filter-alle-löschen[b-gtx7b68s0l],
    .filter-herkunft-weg[b-gtx7b68s0l] {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .filter-marke-x[b-gtx7b68s0l] {
        transition: none;
    }
}
/* /Components/Tasks/ImageLightbox.razor.rz.scp.css */
/*
   f48 T009 [DESIGN] (US2, FR-003, Vertrag reviewer-screenshots.md S8,
   data-model.md §3, A7): die Optik der Großansicht — die Dialog-Familie
   (af-modal, f18/f20) trägt die Grundgestalt, aber dieses Panel zeigt EIN
   Bild in voller Größe, kein Formular. Alles läuft über Bestands-Tokens
   (beide Themes, dunkel = Leitdesign); die einzige theme-neutrale Angabe
   ist der Dimm des Overlays (dasselbe Schwarz-Blau wie .af-modal-overlay
   in app.css, nur tiefer: ein Bild liest sich vor ruhigerem Grund als ein
   Formular, und die Seite dahinter bleibt sichtbar vorhanden).
*/

.screenshot-lightbox-overlay[b-ypsyxki1iw] {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 14, .8);
    display: grid;
    place-items: center;
    /* Bestands-Overlay-Ebene (app.css .af-modal-overlay). */
    z-index: 200;
}

/* Das Panel: so groß wie das Bild, höchstens der Viewport minus Luft
   (32 px — derselbe Rahmen, den .af-modal der Breite nach setzt). Die
   Lesazeile mit Bezeichner und „Schließen" sitzt ÜBER der Bild-Lauffläche
   — die Bedienfläche bleibt bei jedem Bild und jeder Bildgröße erreichbar
   (S8: keine dauerhafte Verdeckung). */
.screenshot-lightbox[b-ypsyxki1iw] {
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    min-width: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.screenshot-lightbox-bar[b-ypsyxki1iw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

/* Der Bezeichner in der Feldsprache der App (Versal-Labels wie die
   Dialog-Legenden, f37): klein, zweitstufig — er nennt die Position im
   Bericht, nichts Erfundenes; lange Bezeichner kürzen statt drängeln. */
.screenshot-lightbox-caption[b-ypsyxki1iw] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-2);
}

/* Der neutrale Bestandsknopf (Global-Form aus app.css), kompakt für die
   Lesazeile — er ist die immer erreichbare Bedienfläche (S8). */
.screenshot-lightbox-close[b-ypsyxki1iw] {
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: 12px;
}

/* Die Bild-Fläche: quellgetreu in voller Größe — natürliche Maße, kein
   Verzerren, kein erzwungenes Skalieren (max-width: none hält jede
   Vererbung davon ab). Kleiner als die Fläche ⇒ mittig (margin: auto),
   größer ⇒ ehrlich laufbar (overflow) — und mit overscroll-behavior
   an der Fläche gehalten: Scroll-Chaining erreicht die Seite dahinter
   nicht, die Leseposition bleibt unverändert (S8). */
.screenshot-lightbox-scroll[b-ypsyxki1iw] {
    display: flex;
    overflow: auto;
    overscroll-behavior: contain;
    flex: 0 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 12px;
    background: var(--bg-3);
    border-radius: 0 0 var(--radius) var(--radius);
}

.screenshot-lightbox-image[b-ypsyxki1iw] {
    display: block;
    /* mittig, wenn das Bild kleiner ist; vollständig erreichbar, wenn es
       größer ist (margin statt place-items — zentrierte Ränder blieben
       sonst unlaufbar). */
    margin: auto;
    max-width: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Bewegung nur auf Wunsch (Chat-Dialog-Idiom f37 T011): das Overlay atmet
   auf, das Panel steigt leicht — unter prefers-reduced-motion steht
   beides einfach da (S8: öffnet/schließt ohne Bewegungseffekt). */
@media (prefers-reduced-motion: no-preference) {
    .screenshot-lightbox-overlay[b-ypsyxki1iw] {
        animation: screenshot-lightbox-overlay-in-b-ypsyxki1iw .16s ease-out;
    }

    .screenshot-lightbox[b-ypsyxki1iw] {
        animation: screenshot-lightbox-panel-in-b-ypsyxki1iw .18s ease-out;
    }

    @keyframes screenshot-lightbox-overlay-in-b-ypsyxki1iw {
        from {
            opacity: 0;
        }
    }

    @keyframes screenshot-lightbox-panel-in-b-ypsyxki1iw {
        from {
            opacity: 0;
            transform: translateY(6px) scale(.985);
        }
    }
}
/* /Components/Tasks/LaneColumn.razor.rz.scp.css */
/* f18 US5 (T025, F01 C1): Lane im Mockup-4-Look (styles.css .lane/.lane-head)
   — bg-2-Fläche, Radius, Mindesthöhe; Drop-Feedback aus T012 bleibt. */

.lane-column[b-omnb0td144] {
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 300px; /* f18 (T011): Lane-Mindesthöhe nach Mockup. */
    transition: border-color .15s, background .15s;
}

.lane-head[b-omnb0td144] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
}

.lane-head h2[b-omnb0td144] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.lane-count[b-omnb0td144] {
    margin-left: auto;
    background: var(--bg-4);
    border-radius: 999px;
    min-width: 22px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    color: var(--text-2);
    padding: 0 6px;
}

.lane-column-cards[b-omnb0td144] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 9px;
    flex: 1;
    min-height: 2rem;
}

/* f18 (T012, R4): Drop-Empfang anzeigen (Mockup .lane.drag-over) — die im
   Review fehlende Rückmeldung (Befund-Hypothese c).
   f18 (T028): Tint .12 statt .06 — auf hellen Flächen bliebe .06 nahezu
   unsichtbar; in beiden Themes klar sichtbar (Akzentkante trägt zusätzlich). */
.lane-column.drag-over[b-omnb0td144] {
    border-color: var(--accent);
    background-color: rgba(108, 140, 255, 0.12);
}
/* /Components/Tasks/MarkdownView.razor.rz.scp.css */
/* f18 US5 (T025): Markdown-Wiedergabe — Grundschrift der Fläche.
   156 Nachtrag M2 (2026-09-30): Abstände, Überschriften, Listen, Code,
   Zitate und Tabellen trägt der globale Baustein .af-md (app.css) — dieselbe
   dichte Darstellung auf allen Markdown-Flächen; die früheren Element-Regeln
   hier (1rem-Überschriften, 12px-Code-Polster, gelbe Zitat-Kante) sind darin
   aufgegangen. */

.markdown-view[b-fmc0etxw3j] {
    font-size: 13.5px;
    color: var(--text);
}
/* /Components/Tasks/ReasonDialog.razor.rz.scp.css */
/* Zusammenführung der Dialog-Familie (2026-09-13): Overlay, Panel,
   Überschrift, Aktionszeile und die beiden Knopf-Rollen kommen jetzt aus
   app.css (.af-modal-*) — wie bei jedem anderen Dialog der App. Was hier
   bleibt, ist das Einzige, was diesen Dialog wirklich von den anderen
   unterscheidet: das Grund-Feld.

   Entfernt wurden dabei die Eigenbau-Flächen .reason-dialog-backdrop/
   .reason-dialog (abweichender Innenabstand, Radius und Rahmenfarbe, kein
   Einblenden) sowie eine Kopie von .reason-dialog-message, die in dieser
   Datei nie etwas traf — sie gehörte zur Schwester und heißt dort jetzt
   .af-modal-message. */

/* Der Abstand zwischen Feld, Fehlermeldung und Aktionszeile. */
.reason-dialog[b-g9dvxux8qy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Die Überschrift bringt aus .af-modal einen eigenen Abstand nach unten
   mit — hier zählt der gemeinsame Abstand der Spalte, sonst steht der
   Titel doppelt so weit vom Feld weg wie in den übrigen Dialogen. */
.reason-dialog h2[b-g9dvxux8qy] {
    margin: 0;
}

.reason-dialog-field[b-g9dvxux8qy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Feldname in der Versal-Sprache der App (af-form-row). */
.reason-dialog-field label[b-g9dvxux8qy] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.reason-dialog-field textarea[b-g9dvxux8qy] {
    width: 100%;
}

.validation-message[b-g9dvxux8qy] {
    margin: 0;
    color: var(--red);
}
/* /Components/Tasks/ScreenshotStrip.razor.rz.scp.css */
/*
   f48 T007 (US1, FR-002, data-model.md §3, A7): die Optik der Vorschau-
   Zeile — kleine rechteckige Thumbnails, die bei schmalen Layouts
   (< 1100 px, Umbruch-Bestand f32) in mehrere Reihen umbrechen, ohne den
   Befundtext zu verdrängen. Nur Bestands-Tokens (beide Themes); rein
   darstellend — Thumbnail-Größe/-Verhältnis ist Darstellungs-Konstante
   (A2), das Bild selbst wird quellgetreu geladen.
*/

.screenshot-strip[b-aolu6cjusn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.35rem 0 0.5rem;
}

.screenshot-strip-thumb[b-aolu6cjusn] {
    display: block;
    width: 104px;
    height: 68px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-3);
}

/* Umbruch < 1100 px (A7, f32-Ticket-Umbruch-Bestand): die Zeile bricht mit
   um (flex-wrap) und die Kacheln werden dezent kleiner — der Befundtext
   bleibt die Hauptfläche. */
@media (max-width: 1100px) {
    .screenshot-strip[b-aolu6cjusn] {
        gap: 0.4rem;
    }

    .screenshot-strip-thumb[b-aolu6cjusn] {
        width: 84px;
        height: 56px;
    }
}

/* f48 T009 (US2, FR-003, S8): die Vorschau-Kachel ist eine echte
   Schaltfläche — das Zoom-Versprechen, das T007 bewusst noch NICHT
   ausgesprochen hat (kein cursor, nichts gelogen), ist jetzt wahr: Klick
   öffnet die Großansicht. cursor: zoom-in sagt genau, was passiert; die
   globale Knopf-Form (app.css) wird auf die Kachel zurückgesetzt, damit
   das Bild selbst die Fläche ist. */
.screenshot-strip-open[b-aolu6cjusn] {
    display: block;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius);
    cursor: zoom-in;
    transition: filter .12s;
}

.screenshot-strip-open:hover .screenshot-strip-thumb[b-aolu6cjusn] {
    border-color: var(--border-light);
    filter: brightness(1.12);
}

/* Tastatur-Fokus hebt die Kachel (Chat-Dialog-Idiom f37: der Ring gehört
   dem Klickziel, nicht dem Bild darin). */
.screenshot-strip-open:focus-visible[b-aolu6cjusn] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* /Components/Tasks/TaskCard.razor.rz.scp.css */
/* f18 US5 (T025, F01 C1): Kanban-Karte im Mockup-4-Look (styles.css
   .kanban-card) — bg-3-Fläche, 3px linke Kante (neutral; markierte Karten
   tragen seit 171 B5 eine Umrandung rundum), Hover-Anhebung; Drag-Zustand aus T012 bleibt unverändert wirksam. */

.task-card[b-jqco83tw70] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: border-color .12s, transform .12s, box-shadow .12s;
}

.task-card:hover[b-jqco83tw70] {
    border-color: var(--border-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    /* f18 (T025, E2E-Befund): das hover-transform erzeugt einen Stacking-
       Kontext, der das absolute Kartenmenü einschließen würde — die gehoverte
       Karte (Menü offen) muss deshalb über den Folgekarten liegen. */
    z-index: 5;
}

/* f26 (T004, R7; FR-001): solange das Menü offen ist, trägt die Karte
   menu-open — die Schichtung über ALLEN Layout-Ebenen (Sidebar/Topbar,
   R7: „Hauptmenü drüber ragt“) ist damit an den offenen Zustand gebunden,
   nicht an den Hover. Zusätzlich wird der Hover-Transform neutralisiert:
   ein Transform macht die Karte zum Containing-Block für fix positionierte
   Nachfahren und würde das Menü wieder in die geclippten Layout-Container
   einschließen (transition:none verhindert das kurze Transform-Fenster). */
.task-card.menu-open[b-jqco83tw70] {
    z-index: 5;
    transform: none;
    transition: none;
}

/* 171 B5 (karten-markierung §2, FR01 A3/A4): die Markierung ist eine
   Umrandung rundum — Rot durchgezogen (Störung), Orange gestrichelt
   (wartet). Die Strichart trennt beide auch ohne Farbwahrnehmung; dazu
   kommen Abzeichen-Text und Abzeichen-Symbol. Löst die linke Kante und den
   roten Schleier ab. 2 px rundum statt 1/1/1/3: das Padding gleicht aus,
   damit der Inhalt an derselben Stelle steht wie bei jeder anderen Karte
   (oben 1+10 = 2+9, links 3+12 = 2+13). */
.task-card.is-blocked[b-jqco83tw70],
.task-card.is-waiting[b-jqco83tw70] {
    border-width: 2px;
    padding: 9px 12px 9px 13px;
}

.task-card.is-blocked[b-jqco83tw70],
.task-card.is-blocked:hover[b-jqco83tw70] {
    border-style: solid;
    border-color: var(--red);
}

.task-card.is-waiting[b-jqco83tw70],
.task-card.is-waiting:hover[b-jqco83tw70] {
    border-style: dashed;
    border-color: var(--orange);
}

/* Der Aktiv-Ring (f32) läge sonst auf der farbigen Umrandung. Bei einer
   markierten Karte steht er außen mit 2 px Luft — beide Aussagen bleiben
   lesbar. */
.task-card.is-blocked .task-card-active-run[b-jqco83tw70],
.task-card.is-waiting .task-card-active-run[b-jqco83tw70] {
    inset: -5px;
    border-radius: calc(var(--radius-sm) + 3px);
}

/* f18 (T012, R4): sichtbarer Zustand während des Ziehens (Mockup
   .kanban-card.dragging) — gehört zur Bedien-Rückmeldung des DnD. */
.task-card.dragging[b-jqco83tw70] {
    opacity: 0.45;
    cursor: grabbing;
}

.task-card-main[b-jqco83tw70] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.task-card-title[b-jqco83tw70] {
    text-decoration: none;
    /* 171 B5 (Sichtprobe): mit zwei Abzeichen („Wartet“ + „1 offene Frage“)
       schrumpfte der Titel auf eine Buchstabenbreite. Die Grundbreite 7rem
       lässt die Abzeichen stattdessen in die nächste Zeile umbrechen. */
    flex: 1 1 7rem;
    /* 167 B9 Nacharbeit (Browser-Prüfung 2026-10-08, 01/03/15): Titel ohne
       Leerzeichen (Hash-artig) ragten über den Kartenrand in die Nachbar-
       spalte. Sie brechen jetzt an beliebiger Stelle um; min-width: 0 lässt
       das Flex-Element unter seine Inhaltsbreite schrumpfen. */
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
}

.task-card-title:hover[b-jqco83tw70] {
    color: var(--accent-2);
}

.task-card-badge[b-jqco83tw70] {
    display: inline-flex;
    align-items: center;
    padding: 2.5px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* 171 B5: die Abzeichen tragen neben Text und Farbe ein Symbol, das nur
   über die Form unterscheidet — Rot ein gefüllter Punkt, Orange ein
   offener Ring. Rein schmückend (::before), der Text bleibt die Aussage. */
.task-card-badge-blocked[b-jqco83tw70],
.task-card-badge-waiting[b-jqco83tw70] {
    gap: 5px;
}

.task-card-badge-blocked[b-jqco83tw70]::before,
.task-card-badge-waiting[b-jqco83tw70]::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-sizing: border-box;
}

.task-card-badge-blocked[b-jqco83tw70] {
    background: rgba(255, 92, 92, .18);
    color: var(--red-text);
    box-shadow: inset 0 0 0 1px rgba(255, 92, 92, .45);
}

.task-card-badge-blocked[b-jqco83tw70]::before {
    background: currentColor;
}

.task-card-badge-waiting[b-jqco83tw70] {
    background: var(--tint-orange);
    color: var(--orange-text);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .45);
}

.task-card-badge-waiting[b-jqco83tw70]::before {
    border: 1.5px solid currentColor;
}

.task-card-badge-incomplete[b-jqco83tw70] {
    background: rgba(255, 176, 32, .16);
    color: var(--yellow-text);
}

.task-card-badge-questions[b-jqco83tw70] {
    background: rgba(77, 163, 255, .16);
    color: var(--blue-text);
}

/* 171 B5: Grund- und Wartezeile im selben Bau — einzeilig mit „…“, der volle
   Text im title-Attribut. Die Kante links wiederholt die Strichart der Karte. */
.task-card-block-reason[b-jqco83tw70] {
    margin: 0;
    padding-left: 7px;
    border-left: 2px solid var(--red);
    color: var(--red-text);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ====================================================================
   167 B9 (ui-verhalten §3): Parent-Zeile, Marken, Fortschritt, Warte-
   hinweis und die Lane-Knöpfe. Aufbau der Karte bleibt (Hausregel 13,
   Ausnahme Board) — neu sind nur diese Zeilen, alle aus den Tokens
   beider Themes.
   ==================================================================== */

/* Parent-Zeile: einzeilig, gekürzt mit „…“ (FR-033), der volle Titel im
   title-Attribut. Der Haken davor ist reine Zierde (::before) — der Text
   des Elements bleibt genau der Parent-Titel. */
.task-card-parent[b-jqco83tw70] {
    display: block;
    min-width: 0;
    margin-top: -2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
    font-size: 11.5px;
    text-decoration: none;
}

.task-card-parent[b-jqco83tw70]::before {
    content: "↳";
    margin-right: 5px;
    color: var(--text-3);
}

.task-card-parent:hover[b-jqco83tw70] {
    color: var(--accent-2);
}

.task-card-marken[b-jqco83tw70] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* Marken in Satzschreibung (nicht in Versalien wie die Bestands-Badges):
   sie sind länger und sollen sich lesen, nicht rufen. */
.task-card-mark[b-jqco83tw70] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* Offene Runde: hier wartet die App auf den Menschen — Gelb mit Punkt. */
.task-card-spec-open-round[b-jqco83tw70] {
    background: rgba(255, 176, 32, .14);
    color: var(--yellow-text);
}

.task-card-spec-open-round[b-jqco83tw70]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Fertig spezifiziert: ruhiges Grün mit Haken. */
.task-card-spec-mark[b-jqco83tw70] {
    background: rgba(63, 206, 139, .14);
    color: var(--green);
}

.task-card-spec-mark[b-jqco83tw70]::before {
    content: "✓";
    font-weight: 700;
}

.task-card-vorhaben[b-jqco83tw70] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 10.5px;
    text-decoration: none;
}

.task-card-vorhaben:hover[b-jqco83tw70] {
    color: var(--accent-2);
    text-decoration: underline;
}

/* Fortschritt am Parent (FR-034): Zeile plus 3-px-Balken. */
.task-card-fortschritt[b-jqco83tw70] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-card-progress[b-jqco83tw70] {
    color: var(--text-2);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.task-card-progress-bar[b-jqco83tw70] {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--bg-4);
    overflow: hidden;
}

.task-card-progress-fill[b-jqco83tw70] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
    transition: width .3s ease;
}

/* Wartezeile (171 B5, FR01 A4): Orange, gestrichelte Kante links wie die
   Umrandung der Karte — „geht weiter, sobald Antwort oder Vorgänger da ist“. */
.task-card-wait-reason[b-jqco83tw70] {
    margin: 0;
    padding-left: 7px;
    border-left: 2px dashed var(--orange);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--orange-text);
    font-size: 11.5px;
}

/* Lane-Knöpfe (FR-006/FR-007): nebeneinander, solange die Spalte breit
   genug ist; in der schmalen Board-Spur (210 px) brechen sie in zwei
   gleich breite Zeilen um, statt aus der Karte zu ragen. */
.task-card-start-actions[b-jqco83tw70] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.task-card-start-button[b-jqco83tw70] {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 4px 8px;
    font-size: 11.5px;
    line-height: 1.35;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .task-card-progress-fill[b-jqco83tw70] {
        transition: none;
    }
}

.task-card-actions[b-jqco83tw70] {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

.task-card-reorder[b-jqco83tw70],
.task-card-menu-toggle[b-jqco83tw70] {
    padding: 0 7px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-4);
    color: var(--text-2);
    line-height: 1.4;
}

.task-card-reorder:hover:not(:disabled)[b-jqco83tw70],
.task-card-menu-toggle:hover[b-jqco83tw70] {
    filter: none;
    color: var(--text);
    border-color: var(--border-light);
}

.task-card-menu[b-jqco83tw70] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    margin: 0.25rem 0 0;
    padding: 6px;
    list-style: none;
    background: var(--bg-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 14rem;
}

/* f26 (T004, R7/R1; FR-001): placed-Modus — JS-gemessene Viewport-
   Platzierung (Inline-Style setzt top/left). position:fixed entkompt ALLEN
   Scroll-/Clip-Containern des Layouts (.board-lanes overflow-x auto,
   .page overflow-y auto, .app-shell overflow:hidden), die das Bestands-
   Menü in der Spalte „Neu“ links abgeschnitten haben (R7 O-Ton Z. 34);
   die Bestands-Offsets (top/right/bottom/left: 100%/0) werden deshalb
   explizit zurückgesetzt. z-index über allen Layout-Ebenen (auto), unter
   den Dialogen (200) und Toasts (300). Ohne JS gilt der Bestands-Fallback
   (absolute unter dem Toggle) — ehrliche Verschlechterung statt defektem
   Menü. */
.task-card-menu-placed[b-jqco83tw70] {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 150;
    margin: 0;
}

.task-card-menu-item[b-jqco83tw70] {
    width: 100%;
    padding: 8px 11px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    justify-content: flex-start;
}

.task-card-menu-item:hover[b-jqco83tw70],
.task-card-menu-item:focus[b-jqco83tw70] {
    background: var(--bg-4);
    filter: none;
}

.task-card-menu-empty[b-jqco83tw70] {
    padding: 8px 11px;
    color: var(--text-3);
    font-size: 12px;
}

/* f26 (T014, R9; FR-006–FR-008): Avatar-Reihe der Karten-Beteiligung —
   kompakt unterhalb der Aktionszeile; ausschließlich f18-Design-Tokens,
   damit dunkel wie hell wirksam bleiben (F01: beide Themes decken die
   gesamte App ab). Ohne Beteiligung rendert die Reihe gar nicht ( Markup),
   daher hier kein Platzhalter-Styling. */
.task-card-contributors[b-jqco83tw70] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding-top: 0.125rem;
}

.task-card-contributor[b-jqco83tw70] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--bg-4);
    border: 1px solid var(--border-light);
    color: var(--text-2);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.task-card-contributor-image[b-jqco83tw70] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Initial-Ersatz ohne Bild (FR-008): ehrlicher Erstbuchstabe statt leerem
   Bruch — kein Bild-Element, kein toter Platzhalter. */
.task-card-contributor-initial[b-jqco83tw70] {
    display: block;
    pointer-events: none;
}

/* Session-Badge (R9, O-Ton Z. 43–44): Anzahl der Läufe dieser Persona an
   dieser Karte, hängend am Avatar. Accent-Fläche mit --bg-Schrift bleibt
   in beiden Themen kontraststark (dunkel: helle Fläche/dunkle Zahl —
   hell: dunkle Fläche/helle Zahl). */
.task-card-contributor-badge[b-jqco83tw70] {
    position: absolute;
    right: -6px;
    bottom: -5px;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
}

/* „+x“-Kürzung langer Listen (Edge Case): der Rest als Chip — die
   vollständige Beteiligungsliste steht im Tooltip der Reihe. */
.task-card-contributors-overflow[b-jqco83tw70] {
    flex: none;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-4);
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

/* ====================================================================
   f32 T030 (US8, FR-020, Vertrag board-aktivität §2): das Aktivsignal
   der Karte — Mechanik. Ein Rand-Ring, der die Karte nicht verschiebt
   und keinen Inhalt verdeckt (pointer-events aus, eigene Ebene unter
   dem Karten-Text). Die Gestaltung — Farbe, Rhythmus, Ruhe — setzt der
   Design-Zug (T031) darauf; die Klassen-Anker bleiben.
   ==================================================================== */

.task-card.has-active-run[b-jqco83tw70] {
    position: relative;
}

/* f32 T031 [DESIGN] (§2, G5; quickstart Sz. 8): der Ring atmet, er blinkt
   nicht — 1px-Akzentlinie mit hauchdünnem Außenschein, langsamer Rhythmus
   (3,6 s) in einem engen Helligkeitsfenster (.5 → .95): am Board mit
   vielen Karten bleibt genau die eine als „hier läuft etwas" erkennbar,
   ohne dass die Spalte flackert. Der Schein läuft über die Akzentfarbe
   beider Themes (dunkel #6c8cff, hell #3d62d8 — auf hellen Flächen trägt
   die Linie, der Schein bleibt Beiwerk). */
.task-card-active-run[b-jqco83tw70] {
    position: absolute;
    inset: -1px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid var(--accent);
    border-radius: inherit;
    box-shadow: 0 0 6px rgba(108, 140, 255, .35);
    animation: task-card-active-run-pulse-b-jqco83tw70 3.6s ease-in-out infinite;
}

[data-theme="light"] .task-card-active-run[b-jqco83tw70] {
    box-shadow: 0 0 6px rgba(61, 98, 216, .3);
}

@keyframes task-card-active-run-pulse-b-jqco83tw70 {
    0%, 100% {
        opacity: .5;
    }

    50% {
        opacity: .95;
    }
}

/* Erkennbar bleiben, ohne sich zu bewegen (§2, G5): reduced-motion hält
   den Ring statisch auf dem oberen Ende des Atem-Fensters — die Aussage
   „aktiver Lauf" braucht keine Animation, nur die Linie. */
@media (prefers-reduced-motion: reduce) {
    .task-card-active-run[b-jqco83tw70] {
        animation: none;
        opacity: .85;
    }
}
/* /Components/Tasks/TaskFileStrip.razor.rz.scp.css */
/*
   079 T011 [DESIGN] (US1/US3, FR-004/FR-005, plan E4): die Optik des
   Datei-Streifens am Aufgaben-Kommentar und an der Frage.

   Der Streifen läuft WAAGERECHT und bricht um (die Aufgaben-Fläche ist
   breit — anders als die schmale Chat-Blase, die ihre Dateien untereinander
   stapelt). Damit stehen gemischte Abgaben nebeneinander, und die drei
   Sicht-Klassen unterscheiden sich auf einen Blick durch ihre FORM, nicht
   durch Farbe allein:

     · Bild            — eine KACHEL: Vorschau oben, Name und Größe als
                         Bildunterschrift darunter. Das Bild ist die Fläche.
     · Datei           — eine ZEILE: Endungs-Kürzel, Name, Größe in einem
                         flachen Chip. Kein Bild, kein Zoom-Versprechen.
     · Aktive Inhalte  — dieselbe Zeile mit ehrlichem Nachsatz „nur
                         Download"; das Kürzel ist zurückgenommen
                         gezeichnet, damit sie sich von der gewöhnlichen
                         Download-Zeile abhebt, ohne zu alarmieren.

   Nur Bestands-Tokens (beide Themes); rein darstellend — die Kachelgröße
   ist Darstellungs-Konstante, das Bild wird quellgetreu geladen (0
   serverseitiges Thumbnail). Umbruch < 1100 px nach f32-Bestand.
*/

.task-file-strip[b-oq5z52jj8v] {
    list-style: none;
    margin: 0.4rem 0 0.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.65rem;
}

.task-file[b-oq5z52jj8v] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
}

/* --- Bild: die Kachel ------------------------------------------------- */

/* Die Vorschau-Kachel ist eine echte Schaltfläche (f48-Muster): nativ per
   Tastatur erreichbar; cursor: zoom-in sagt, was passiert. Die globale
   Knopf-Form (app.css) wird zurückgesetzt — das Bild selbst ist die
   Fläche. */
.task-file[data-sicht='bild'][b-oq5z52jj8v] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    max-width: 112px;
}

.task-file-open[b-oq5z52jj8v] {
    display: block;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius);
    cursor: zoom-in;
    transition: filter .12s;
}

.task-file-thumb[b-oq5z52jj8v] {
    display: block;
    width: 112px;
    height: 74px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-3);
}

.task-file-open:hover .task-file-thumb[b-oq5z52jj8v] {
    border-color: var(--border-light);
    filter: brightness(1.12);
}

/* Tastatur-Fokus hebt die Kachel (f37-Idiom: der Ring gehört dem Klickziel,
   nicht dem Bild darin). */
.task-file-open:focus-visible[b-oq5z52jj8v] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Unter der Kachel wird die Download-Zeile zur Bildunterschrift: schmal,
   zweizeilig, ohne Chip-Rahmen — der Rahmen gehört dem Bild. */
.task-file[data-sicht='bild'] .task-file-download[b-oq5z52jj8v] {
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: none;
    border: none;
}

.task-file[data-sicht='bild'] .task-file-name[b-oq5z52jj8v] {
    font-size: 11.5px;
    color: var(--text-2);
}

/* --- Datei und aktive Inhalte: die Zeile ------------------------------ */

.task-file-download[b-oq5z52jj8v] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    color: var(--text);
    font-size: 12.5px;
    padding: 5px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color .12s;
}

.task-file-download:hover[b-oq5z52jj8v] {
    border-color: var(--accent);
}

.task-file-name[b-oq5z52jj8v] {
    overflow-wrap: anywhere;
}

.task-file-download:hover .task-file-name[b-oq5z52jj8v] {
    text-decoration: underline;
}

.task-file-size[b-oq5z52jj8v] {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--text-3);
}

/* Das Endungs-Kürzel gibt der Zeile den Ankerpunkt, an dem ein Bild seine
   Vorschau hätte — gleiche Höhe, klar keine Vorschau. */
.task-file-kürzel[b-oq5z52jj8v] {
    flex: 0 0 auto;
    padding: 3px 6px;
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--text-2);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Aktive Inhalte: zurückgenommenes Kürzel und der Grund im Klartext
   daneben — kein Warnton, nur eine Auskunft. */
.task-file[data-sicht='aktiv'] .task-file-kürzel[b-oq5z52jj8v] {
    color: var(--text-3);
    background: none;
    border-style: dashed;
}

.task-file-hinweis[b-oq5z52jj8v] {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--text-3);
}

/* Umbruch < 1100 px (f32-Bestand): die Kachel wird dezent kleiner — der
   Kommentar- bzw. Fragetext bleibt die Hauptfläche. */
@media (max-width: 1100px) {
    .task-file-strip[b-oq5z52jj8v] {
        gap: 0.4rem 0.5rem;
    }

    .task-file[data-sicht='bild'][b-oq5z52jj8v] {
        max-width: 92px;
    }

    .task-file-thumb[b-oq5z52jj8v] {
        width: 92px;
        height: 60px;
    }
}
/* /Components/Tasks/TaskForm.razor.rz.scp.css */
/* f18 US5 (T025): dunkles Mockup-4-Erscheinungsbild — Token-Sweep. */

/* Zusammenführung der Dialog-Familie (2026-09-13): dieses Formular ist
   ausschließlich der Inhalt des Anlege-Dialogs (TaskCreateModal) und war
   zugleich selbst als Kasten gestaltet — eigene Fläche, eigener Rahmen,
   eigener Radius, eigener Innenabstand. Sichtbar wurde das nie, weil
   TaskCreateModal.razor.css genau diese vier Werte per ::deep wieder
   zurücknahm: eine Gestaltung, die nur existierte, um an ihrem einzigen
   Einsatzort abgeschaltet zu werden. Sie ist jetzt hier weg und die
   Gegen-Datei damit auch. Die Fläche trägt allein .af-modal; hier bleibt
   nur die Feld-Anordnung. */
.task-form[b-f59a4vl95a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-form-field[b-f59a4vl95a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-form-field label[b-f59a4vl95a] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.task-form-field input[b-f59a4vl95a],
.task-form-field textarea[b-f59a4vl95a] {
    width: 100%;
}

.task-form-field textarea[b-f59a4vl95a] {
    font-family: inherit;
}

/* Aktionszeile und Knopf-Rollen kommen aus app.css (.af-modal-actions,
   .af-modal-cancel/-confirm) — dieselben Werte wie in jedem anderen
   Dialog, jetzt an einer Stelle. */

.validation-message[b-f59a4vl95a] {
    margin: 0;
    color: var(--red);
}
/* /Components/Transcripts/TranscriptAppView.razor.rz.scp.css */
/* f61 T008 (US1): Scoped CSS der Transcript-Ansicht — aus der freigegebenen
   Vorlage überführt (interaktiv-transkript.html, Fassung 3), Tokens aus
   app.css (--bg-*, --border*, --text-*, --accent, --mono). Kompakte
   ~27-px-Zeilen; die Vorlage IST die Gestaltung (0 × [DESIGN]). */

.ta-app[b-zn61tvdp89] {
    --ta-row: 27px;
    --ta-mono: var(--mono, Consolas, monospace);
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: inherit;
}

/* --- Run-Baum (f61 T010, US2 — data-model §3) ------------------------------- */

.ta-baum[b-zn61tvdp89] {
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
    padding: 4px 0 6px;
}

.ta-baum-kopf[b-zn61tvdp89] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px 4px;
}

.ta-baum-schalter[b-zn61tvdp89] {
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
}

.ta-baum-titel[b-zn61tvdp89] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-2);
}

.ta-baum-gesamt[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-3);
}

.ta-wave-kopf[b-zn61tvdp89] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 8px 1px;
}

.ta-wave-name[b-zn61tvdp89] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-3);
}

.ta-wave-span[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 10.5px;
    color: var(--text-3);
}

/* 156 N23b: Zweck — Anlass hinter „WAVE N“ in normaler Schreibung, die
   Ergebnis-Marke (af-badge) danach. Der Kopf darf umbrechen statt
   überzulaufen; ein zu langer Zweck kürzt mit „…“ (Tooltip am Kopf). */
.ta-wave-kopf[b-zn61tvdp89] {
    flex-wrap: wrap;
    row-gap: 3px;
}

.ta-wave-name[b-zn61tvdp89] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-wave-zweck[b-zn61tvdp89] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}

.ta-wave-marke[b-zn61tvdp89] {
    align-self: center;
    font-size: 10px;
    padding: 2px 7px;
}

/* N23b-Nacharbeit (Browser-Befund 2026-10-17): die Wave ist eine Flex-Spalte,
   die Knoten dehnen sich darin über die Breite (auch der <button>-Branch, der
   im Blockfluss sonst nur so breit wäre wie sein Inhalt). Vorher trug der
   Knoten `width: calc(100% - 8px)` UND die Einrückung als Inline-Rand — je
   Tiefe 18 px über den Rand (rechte Spalte 390 > 379 px bei 1280). */
.ta-wave[b-zn61tvdp89] {
    display: flex;
    flex-direction: column;
}

.ta-knoten[b-zn61tvdp89] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    margin: 0 8px 1px;
    padding: 1px 6px;
    min-height: 22px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-3);
    color: var(--text-2, inherit);
    text-align: left;
    font-size: 12px;
    cursor: pointer;
}

.ta-knoten-referenz[b-zn61tvdp89] {
    border-color: rgba(108, 140, 255, .6);
    color: var(--accent);
    font-weight: 600;
}

.ta-knoten-referenziert[b-zn61tvdp89] { border-color: rgba(255, 176, 32, .5); }

/* N47 (datiert 2026-09-07): der Tab-Knoten ist der Link zur vollen
   Transkript-Seite — keine Unterstreichung, keine Link-Farbe; die links-
   bündige Ausrichtung der Inhalte (Agenten-Namen, Modelle) trägt der
   Knoten als Inline-Stil (TabKnotenStil — dieselbe Wahrheits-Ebene wie die
   Baum-Einrückung, T2). Nur im Tab-Modus wirksam; der Bestands-Knopf der
   anderen Flächen bleibt unberührt. */
.ta-knoten-link[b-zn61tvdp89] {
    text-decoration: none;
}

/* Rollen-Farbcode (T3) */
.ta-rolle-orchestration[b-zn61tvdp89] { border-inline-start: 3px solid rgba(108, 140, 255, .8); }
.ta-rolle-implement[b-zn61tvdp89] { border-inline-start: 3px solid rgba(80, 200, 120, .8); }
.ta-rolle-review[b-zn61tvdp89] { border-inline-start: 3px solid rgba(255, 176, 32, .8); }
.ta-rolle-bugfix[b-zn61tvdp89] { border-inline-start: 3px solid rgba(255, 107, 107, .8); }
.ta-rolle-sonst[b-zn61tvdp89] { border-inline-start: 3px solid var(--border-light); }

.ta-kurzid[b-zn61tvdp89],
.ta-modell[b-zn61tvdp89],
.ta-status[b-zn61tvdp89],
.ta-error[b-zn61tvdp89],
.ta-attempt[b-zn61tvdp89],
.ta-followseq[b-zn61tvdp89],
.ta-knoten-zeit[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-3);
}

.ta-error[b-zn61tvdp89] { color: var(--red-text, #ff6b6b); }
.ta-subagent[b-zn61tvdp89] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--yellow-text, #ffb420);
}
.ta-baum-verdict[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}
.ta-followseq[b-zn61tvdp89] { color: var(--yellow-text, #ffb420); }

/* --- Panel unter dem Baum (T4, Fall 3) -------------------------------------- */

.ta-panel[b-zn61tvdp89] {
    margin: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-2);
}

.ta-panel-kopf[b-zn61tvdp89] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    border-bottom: 1px dashed var(--border-light);
}

.ta-panel-titel[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11.5px;
    color: var(--text-2);
}

.ta-panel-schließen[b-zn61tvdp89] {
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-size: 12px;
}

.ta-panel-platzhalter[b-zn61tvdp89] {
    margin: 0;
    padding: 8px;
    font-size: 12px;
    color: var(--text-3);
}

/* --- Sprung-Ziel-Markierung (T4/T013; Scrollen/Kopffreiraum per JS-Schicht,
       das Flash erledigt sich nach dem Abklingen selbst — Mitnahme b) ------- */

.ta-flash[b-zn61tvdp89] {
    animation: ta-flash-ziel-b-zn61tvdp89 1.2s ease-out;
}

@keyframes ta-flash-ziel-b-zn61tvdp89 {
    0%, 40% { background: rgba(108, 140, 255, .25); }
    100% { background: transparent; }
}

/* --- Werkzeugleiste (FR-017/FR-007/FR-018/FR-019 — Grundgerüst) --------- */

.ta-toolbar[b-zn61tvdp89] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 5px 8px;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
}

.ta-modus-label[b-zn61tvdp89] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-2);
}

.ta-modus[b-zn61tvdp89] {
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-2);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
}

.ta-modus-aktiv[b-zn61tvdp89] {
    background: rgba(108, 140, 255, .15);
    border-color: rgba(108, 140, 255, .45);
    color: var(--accent);
}

.ta-chips[b-zn61tvdp89] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ta-chip[b-zn61tvdp89] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-2);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 12px;
    cursor: pointer;
}

.ta-chip .ta-n[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-3);
}

.ta-chip-aktiv[b-zn61tvdp89] {
    background: rgba(108, 140, 255, .15);
    border-color: rgba(108, 140, 255, .45);
    color: var(--accent);
}

.ta-chip-warn[b-zn61tvdp89] {
    border-color: rgba(255, 176, 32, .4);
    color: var(--yellow-text, #ffb420);
}

.ta-suche[b-zn61tvdp89] {
    min-width: 140px;
    padding: 3px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-2);
    color: inherit;
    font-size: 12px;
}

.ta-seq[b-zn61tvdp89] {
    width: 72px;
    padding: 3px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-2);
    color: inherit;
    font-size: 12px;
    font-family: var(--ta-mono);
}

/* f61 T013 (F4): der Zähler „N gesamt · M sichtbar · aktive Eingrenzungen". */
.ta-zähler[b-zn61tvdp89] {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}

/* f61 T013 (F3): die ehrlichen Meldungen des Seq-Sprungs. */
.ta-meldung[b-zn61tvdp89] {
    margin: 0;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--yellow-text, #ffb420);
    background: rgba(255, 176, 32, .08);
    border-bottom: 1px solid var(--border);
}

/* f61 T013 (F2/Fix 3): die Treffer-Markierung der Suche. */
mark.ta-hit[b-zn61tvdp89] {
    background: rgba(255, 176, 32, .4);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* --- Kontext-Kopf (FR-003, B4) ------------------------------------------- */

.ta-kopf[b-zn61tvdp89] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 10px 8px 8px;
    border-bottom: 1px dashed var(--border-light);
}

.ta-kopf-chip[b-zn61tvdp89] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--accent);
}

.ta-kopf-text[b-zn61tvdp89] {
    font-weight: 600;
    white-space: pre-wrap;
}

.ta-kopf-dup[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-2);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 1px 7px;
}

.ta-kopf-zeit[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-3);
}

/* --- Phasen-Trenner (B14) ------------------------------------------------- */

.ta-phase[b-zn61tvdp89] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 5px;
}

.ta-phase-name[b-zn61tvdp89] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-2);
    white-space: nowrap;
}

/* NU-3 (Aufgabenliste 2026-09-08): die Farbe der Final-Phase folgt DEM
   AUSGANG des Laufs — „Erfolgreich abgeschlossen“ steht in der Erfolgs-
   Farbe der Design-Sprache (--green; Befund 117: der frühere Vergleichs-
   anklang „wie .task-run-status-dot-erfolgreich“ entfiel mit der toten
   Regel), Fehlschläge bleiben rot. 156 B3 (2026-09-29, FR-012/E3):
   der Abbruch wandert in die Rot-Familie (im Baum als hohler Punkt vom
   Fehlschlag unterscheidbar), die Blockade bleibt neutral-warnend (gelb).
   Ohne bekannten Ausgang bleibt der Phasen-Kopf neutral (nichts geraten,
   G3). */
.ta-phase-final .ta-phase-name[b-zn61tvdp89] {
    color: var(--text-2);
}

.ta-phase-final.ta-final-erfolgreich .ta-phase-name[b-zn61tvdp89] {
    color: var(--green);
}

.ta-phase-final.ta-final-fehlgeschlagen .ta-phase-name[b-zn61tvdp89] {
    color: var(--red-text, #ff8080);
}

.ta-phase-final.ta-final-abgebrochen .ta-phase-name[b-zn61tvdp89] {
    color: var(--red-text, #ff8080);
}

.ta-phase-final.ta-final-blockiert .ta-phase-name[b-zn61tvdp89] {
    color: var(--yellow-text, #ffc45e);
}

.ta-phase-span[b-zn61tvdp89] {
    font-size: 10.5px;
    color: var(--text-3);
    font-family: var(--ta-mono);
    white-space: nowrap;
}

.ta-phase-line[b-zn61tvdp89] {
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* --- Blöcke (B1–B12, kompakte ~27-px-Kopfzeilen) -------------------------- */

.ta-block[b-zn61tvdp89] {
    position: relative;
    border-left: 2px solid transparent;
    padding: 2px 8px 2px 10px;
    min-height: var(--ta-row);
    line-height: 1.45;
}

.ta-kind-werkzeug[b-zn61tvdp89] { border-left-color: rgba(108, 140, 255, .55); }
.ta-kind-werkzeugrest[b-zn61tvdp89] { border-left-color: rgba(108, 140, 255, .25); }
.ta-kind-followup[b-zn61tvdp89] { border-left-color: rgba(255, 176, 32, .55); }
.ta-kind-verdict[b-zn61tvdp89] { border-left-color: rgba(255, 176, 32, .55); }
/* NU-3: die Block-Kante des Abschlusses folgt likewise dem Ausgang —
   die feste Fehler-Optik (rot trotz Erfolg) ist weg; ohne bekannten
   Ausgang bleibt die Kante neutral wie eine Abschluss-Notiz. */
.ta-kind-final[b-zn61tvdp89] { border-left-color: var(--border-light); }
.ta-final-erfolgreich[b-zn61tvdp89] { border-left-color: var(--green); }
.ta-final-fehlgeschlagen[b-zn61tvdp89] { border-left-color: var(--red-text, #ff8080); }
/* 156 B3 (2026-09-29, FR-012/E3): die Abbruch-Kante liest rot, die
   Blockade-Kante bleibt warnend-gelb. */
.ta-final-abgebrochen[b-zn61tvdp89] { border-left-color: var(--red-text, #ff8080); }
.ta-final-blockiert[b-zn61tvdp89] { border-left-color: var(--yellow-text, #ffc45e); }
.ta-kind-lücke[b-zn61tvdp89] { border-left-color: var(--text-3); }
.ta-kind-abgearbeitet[b-zn61tvdp89],
.ta-kind-abschluss[b-zn61tvdp89] { border-left-color: var(--border-light); }

.ta-kopfzeile[b-zn61tvdp89] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
}

.ta-chip-werkzeug[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--accent);
    border: 1px solid rgba(108, 140, 255, .4);
    border-radius: 4px;
    padding: 0 6px;
}

.ta-block-text[b-zn61tvdp89] {
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ta-verdict[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}

/* NU-3: der rohe Ausgang (succeeded/failed/…) als ehrlicher Badge neben dem
   deutschen Satz — Basis-Chip mit Ausgangs-Semantik (dieselbe Zuordnung wie
   Phasen-Kopf und Block-Kante; unbekannte Werte bleiben neutral). Vorher
   trug die Klasse gar keine Regel — der Wert stand ungestaltet neben dem
   SATZ IM ROTEN KONTEXT (Befund: „sieht wie ein Fehler aus"). */
.ta-outcome[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 0 6px;
    background: var(--bg-3);
}

.ta-outcome-erfolgreich[b-zn61tvdp89] {
    color: var(--green);
    border-color: rgba(63, 206, 139, .4);
    background: rgba(63, 206, 139, .09);
}

.ta-outcome-fehlgeschlagen[b-zn61tvdp89] {
    color: var(--red-text, #ff8080);
    border-color: rgba(255, 92, 92, .4);
    background: rgba(255, 92, 92, .09);
}

/* 156 B3 (2026-09-29, FR-012/E3): der Abbruch-Badge trägt die rote
   Tönungs-Familie (wie fehlgeschlagen), der Blockiert-Badge bleibt in
   der gelben. */
.ta-outcome-abgebrochen[b-zn61tvdp89] {
    color: var(--red-text, #ff8080);
    border-color: rgba(255, 92, 92, .4);
    background: rgba(255, 92, 92, .09);
}

.ta-outcome-blockiert[b-zn61tvdp89] {
    color: var(--yellow-text, #ffc45e);
    border-color: rgba(255, 176, 32, .4);
    background: rgba(255, 176, 32, .07);
}

.ta-zeit[b-zn61tvdp89],
.ta-dauer[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}

.ta-toggle[b-zn61tvdp89] {
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
}

/* Körper: f32-Wahrheit in Block-Welt — der Vollinhalt steht im DOM,
   zugeklappt ist eine reine CSS-Frage (data-expanded). */
.ta-note[b-zn61tvdp89],
.ta-output[b-zn61tvdp89] {
    display: block;
    font-size: 12.5px;
    color: var(--text-2, inherit);
    white-space: pre-wrap;
    word-break: break-word;
}

/* f45 (067 UNBERÜHRT): die Notiz-Klammer bleibt zeilenbasiert —
   zugeklappt ist reine CSS-Wahrheit (data-expanded). */
.ta-note[data-expanded="false"][b-zn61tvdp89] {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 067 T013 (US-C, FR-003/FR-006, data-model §2), f113 (2026-09-19):
   Höhenklammer der gekappten Inhaltsteile (Aufruf-Eingabe/Output; der
   Thinking-Körper folgt seit 067 B4/T020 derselben Regel — FR-011). Der
   Thinking-Teil trägt die Klammer NUR als „lang“ (.ta-lang), denn sein
   data-expanded folgt §3 rein dem eigenen Schalter (kein lang-Term in der
   Bindung) — kurze Teile bleiben ohne Klammer (S5-Muster, kein stilles
   Schneiden, FR-004). 96 px ist aus dem Zeilen-Maß ABGELEITET (5 × 16,68
   + 10 ≈ 93,4; Thinking 5 × 17,40 + 10 = 97,0; 96/180 = 0,53 „die
   Hälfte“) und Spiegel von TranscriptFinden.KappHöhePixel — CSS kann
   keine C#-Konstante lesen, beide Werte wandern gemeinsam (Component-Test
   bewacht). Die Fade-Masken-Stopps 72 px/96 px wandern MIT (FR-019/D6) —
   bliebe die Maske auf 150/180 stehen, fehlte der weiche Schnitt (F-1).
   KEINE eigene Scrollleiste (overflow: hidden, nie auto — FR-006); der
   Fade-Verlauf am Schnitt ist die klare „hier geht es weiter“-Kante. */
.ta-output[data-expanded="false"][b-zn61tvdp89],
.ta-eingabe[data-expanded="false"][b-zn61tvdp89],
.ta-thinking.ta-lang[data-expanded="false"][b-zn61tvdp89] {
    max-height: 96px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72px, transparent 96px);
    mask-image: linear-gradient(to bottom, #000 0, #000 72px, transparent 96px);
}

.ta-output[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11.5px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 3px 0;
}

.ta-output-kürzung[b-zn61tvdp89] {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-3);
}

.ta-output-schalter[b-zn61tvdp89] {
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-2);
    border-radius: 6px;
    font-size: 11px;
    padding: 1px 7px;
    cursor: pointer;
}

.ta-zustell[b-zn61tvdp89] {
    display: inline-block;
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--yellow-text, #ffb420);
    margin-top: 2px;
}

/* --- follow-up-Zeile (f61 T011, FR-013) ------------------------------------- */

.ta-followup-kante[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--yellow-text, #ffb420);
    border: 1px solid rgba(255, 176, 32, .4);
    border-radius: 4px;
    padding: 0 6px;
}

.ta-followup-rolle[b-zn61tvdp89],
.ta-followup-outcome[b-zn61tvdp89],
.ta-followup-merge[b-zn61tvdp89],
.ta-followup-pass[b-zn61tvdp89],
.ta-followup-modell[b-zn61tvdp89],
.ta-followup-seqs[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-2, inherit);
}

.ta-followup-seqs[b-zn61tvdp89],
.ta-gelaufen[b-zn61tvdp89] { color: var(--text-3); }

/* NU-3: der Kind-Ausgang der follow-up-Zeile — Textfarbe nach derselben
   Ausgangs-Zuordnung (die Zeile bleibt sonst unverändert). */
.ta-followup-outcome-erfolgreich[b-zn61tvdp89] { color: var(--green); }

.ta-followup-outcome-fehlgeschlagen[b-zn61tvdp89] { color: var(--red-text, #ff8080); }

/* 156 B3 (2026-09-29, FR-012/E3): der Kind-Ausgang Abbruch liest rot,
   Blockiert bleibt gelb. */
.ta-followup-outcome-abgebrochen[b-zn61tvdp89] { color: var(--red-text, #ff8080); }

.ta-followup-outcome-blockiert[b-zn61tvdp89] { color: var(--yellow-text, #ffc45e); }

.ta-abweichung[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--red-text, #ff6b6b);
}

/* --- Aufruf-Eingabe (f61 T011, D5) ------------------------------------------- */

.ta-eingabe-label[b-zn61tvdp89] {
    display: inline-block;
    font-family: var(--ta-mono);
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 3px;
}

.ta-eingabe[b-zn61tvdp89] {
    display: block;
    font-family: var(--ta-mono);
    font-size: 11.5px;
    color: var(--text-2, inherit);
    background: var(--bg-2);
    border: 1px dashed var(--border-light);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 3px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 067 T013: die Eingabe-Klammer steht bei der Output-Klammer (EINE
   Höhenklammer-Regel für beide Inhaltsteile, data-model §2) — die alte
   line-clamp-Regel ist entfallen. */

/* --- Thinking (067 T020, US-B, FR-009/FR-011, data-model §4) ---------------- */

/* Die Kennung des Reasoning-Körpers — Label-Muster der Aufruf-Eingabe
   (.ta-eingabe-label „Aufruf“), deutsches Wort „Thinking“ (§4). */
.ta-thinking-kennung[b-zn61tvdp89] {
    display: inline-block;
    font-family: var(--ta-mono);
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 3px;
}

/* Der Thinking-Körper: eigener Stil, vom Assistent-Text unterscheidbar
   (kursiv + gerasterte Fläche am Bestands-Vokabular der Aufruf-Eingabe,
   §4 „z. B. kursiv/gerastert“); zugeklappt ist reine CSS-Wahrheit — der
   Vollinhalt steht immer im DOM (f45-Notiz-Muster), die Höhenklammer für
   „lange“ Teile steht bei der T013-Regel (FR-011: EINE Klammer-Regel). */
.ta-thinking[b-zn61tvdp89] {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: var(--text-2, inherit);
    background: var(--bg-2);
    border: 1px dashed var(--border-light);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 3px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Inline-Transcript + Panel (f61 T011, FR-014–FR-016) --------------------- */

.ta-inline[b-zn61tvdp89] {
    margin: 4px 0 6px 18px;
    padding: 4px 8px;
    border-left: 2px dashed rgba(255, 176, 32, .5);
}

.ta-inline-laden[b-zn61tvdp89],
.ta-panel-laden[b-zn61tvdp89] {
    margin: 4px 0;
    font-size: 12px;
    color: var(--text-3);
}

.ta-rückmeldung[b-zn61tvdp89] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 3px 6px;
    margin-bottom: 4px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
}

.ta-rückmeldung-label[b-zn61tvdp89] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--accent);
}

.ta-rückmeldung-kategorie[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--red-text, #ff6b6b);
}

.ta-rückmeldung-ursache[b-zn61tvdp89],
.ta-rückmeldung-befund[b-zn61tvdp89],
.ta-rückmeldung-summary[b-zn61tvdp89] {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-2, inherit);
}

.ta-panel-strom[b-zn61tvdp89] {
    max-height: 60vh;
    overflow: auto;
}

/* --- Raw-Querverweise (f61 T011, FR-006) ------------------------------------- */

.ta-quer[b-zn61tvdp89] {
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--accent);
    border-radius: 6px;
    font-size: 11px;
    padding: 1px 7px;
    cursor: pointer;
    white-space: nowrap;
}

/* --- Raw (FR-006) ---------------------------------------------------------- */

.ta-raw[b-zn61tvdp89] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ta-raw-zeile[b-zn61tvdp89] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    padding: 2px 8px;
    min-height: var(--ta-row);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.ta-raw-seq[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    color: var(--text-3);
    min-width: 3.5em;
    text-align: right;
}

.ta-raw-typ[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--accent);
}

.ta-raw-quelle[b-zn61tvdp89],
.ta-raw-zeit[b-zn61tvdp89] {
    font-family: var(--ta-mono);
    font-size: 11px;
    color: var(--text-3);
}

.ta-raw-detail[b-zn61tvdp89] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Bilanz (FR-009) -------------------------------------------------------- */

.ta-bilanz[b-zn61tvdp89] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px;
    margin-top: 10px;
    border-top: 1px dashed var(--border-light);
    font-size: 11.5px;
    color: var(--text-3);
    font-family: var(--ta-mono);
}

/* --- Schmale Viewports (Responsive-Regeln der Vorlage überführt, f61 T016
   — Vorlage :450–461: @media 760px, engere Polster, Suchfeld schmaler,
   Zähler bricht um, Phasen-Trenner umbruchfähig, Inline-Einzug schmaler) --- */

@media (max-width: 760px) {
    .ta-toolbar[b-zn61tvdp89] { padding-left: 6px; padding-right: 6px; }
    .ta-suche[b-zn61tvdp89] { min-width: 0; flex: 1 1 130px; }
    .ta-zähler[b-zn61tvdp89] { width: 100%; white-space: normal; }
    .ta-phase[b-zn61tvdp89] { flex-wrap: wrap; }
    .ta-phase-span[b-zn61tvdp89] { white-space: normal; }
    .ta-kopf-text[b-zn61tvdp89] { overflow-wrap: anywhere; }
    .ta-inline[b-zn61tvdp89] { margin-left: 10px; }
    /* Sehr schmale Spalten: Baum-Texte brechen um statt zu überlaufen
       (Edge Case „Schmale Viewports" — kein horizontaler Überlauf). */
    .ta-baum-kopf[b-zn61tvdp89],
    .ta-knoten[b-zn61tvdp89] { overflow-wrap: anywhere; }
}
/* /Components/Transcripts/TranscriptLaufBaum.razor.rz.scp.css */
/* 156 T013 — TranscriptLaufBaum (Zone ③④). Vorlage:
   mockups/transkript-lauf/index.html (baum-Formen :285–298, Punkt-Gestalten
   :302–308, Wellen-Kopf-Zusatz :298). Die Punkt-Farben werden NUR hier
   getragen; die ZUORDNUNG Status → Gestalt kommt EINzig aus VerlaufSicht
   (plan E7).

   WICHTIG — Scope (Oracle-Diagnose zur Pixel-Treue): Blazor-CSS-Isolation
   setzt das b-…-Attribut nur in statisches Template-Markup; der Baum wird
   imperativ per RenderTreeBuilder gebaut (BaumInhalt/Zeile) und <ListenKarte>
   ist eine Kindkomponente mit eigenem Scope. Der statische Wrapper
   .tl-baum-wurzel im Template ist der Anker: `.tl-baum-wurzel ::deep X`
   → `.tl-baum-wurzel[b-…] X` (Bestandspräzidenz ChatsPage.razor.css:40–65). */

/* --- Run-Baum (Zeile = Status-Punkt, Persona, Modell — sonst nichts) --- */

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-zeile {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 1px;
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-kinder {
    margin-left: 13px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-pfeil {
    width: 20px;
    height: 20px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-3);
    border-radius: 4px;
    transition: transform .15s;
    font-size: 10px;
    line-height: 1;
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-pfeil:hover {
    background: var(--bg-3);
    color: var(--text);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-pfeil.offen {
    transform: rotate(90deg);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-pfeil-platz {
    width: 20px;
    flex: none;
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-eintrag {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    text-align: left;
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-eintrag:hover {
    background: var(--bg-3);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-eintrag.an {
    background: var(--bg-3);
    border-color: var(--border);
    box-shadow: inset 2.5px 0 0 var(--accent);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-name {
    /* Pixel-Treue (Vorlage .baum-eintrag .name :295): halbfett, eigenes
       Maß — das Modell behält den Rest der Zeile rechts. */
    font-weight: 600;
    flex: 0 0 auto;
    max-width: 62%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-modell {
    margin-left: auto;
    padding-left: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}

/* Vorfahren gefilterter Läufe bleiben blass sichtbar (contracts §1). */
.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-kontext > .tl-baum-eintrag {
    opacity: .5;
}

/* Die Zeit im Wave-Kopf (af-lg ist Bestand, app.css). */
.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-lg-zeit {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* N23b-Nacharbeit (Browser-Befund 2026-10-17: Wave 1 maß 52 px, die übrigen
   60 px): app.css gibt dem ersten Gruppenkopf nur 4 px statt 12 px oben
   (.af-lg:first-child). Hier tragen ALLE Köpfe 4 px Polster; der Abstand
   zwischen zwei Waves steht als Rand vor jedem Folgekopf — gleiches Bild wie
   vorher, aber gleich hohe Köpfe. */
.tl-baum-wurzel[b-mldfoghcwj]  .af-lg.tl-baum-lg {
    padding-top: 4px;
}

.tl-baum-wurzel[b-mldfoghcwj]  .af-lg.tl-baum-lg ~ .af-lg.tl-baum-lg {
    margin-top: 8px;
}

/* 156 N23b: der angereicherte Wave-Kopf — zwei Zeilen statt einer, damit die
   schmale Baumspalte (380 px) nie überläuft: oben „WAVE N · Zweck — Anlass“
   (gekürzt mit „…“, voller Text im Tooltip) und rechts die Zeit wie bisher,
   darunter die Ergebnis-Marke (af-badge, Farbe aus WaveKopfSicht). */
.tl-baum-wurzel[b-mldfoghcwj]  .af-lg.tl-baum-lg-zweizeilig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 5px;
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-lg-titel {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zweck und Anlass in normaler Schreibung: lesbarer und kürzer als die
   Großschrift des Gruppenkopfs; „WAVE N“ bleibt die ruhige Kennung davor. */
.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-lg-zweck {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-lg-zweizeilig .tl-baum-lg-zeit {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-baum-lg-marke {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    display: inline-block; /* statt inline-flex: nur so greift „…“ */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    padding: 2px 7px;
}

/* --- Status-Punkt-Gestalten (contracts §2; ZUORDNUNG aus VerlaufSicht) --- */

.tl-baum-wurzel[b-mldfoghcwj]  .tl-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--text-3);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-punkt-erfolg {
    background: var(--green);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-punkt-block {
    background: var(--yellow);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-punkt-fehler {
    background: var(--red);
}

/* Abbruch: rot HOHL (Ring) — NU-3/156 B3-Beschluss, FR-012. */
.tl-baum-wurzel[b-mldfoghcwj]  .tl-punkt-fehler.tl-punkt-hohl {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--red);
}

.tl-baum-wurzel[b-mldfoghcwj]  .tl-punkt-läuft {
    background: var(--accent-2);
}

@media (prefers-reduced-motion: no-preference) {
    .tl-baum-wurzel[b-mldfoghcwj]  .tl-punkt-läuft {
        animation: tl-baum-puls-b-mldfoghcwj 1.8s ease-in-out infinite;
    }
}

@keyframes tl-baum-puls-b-mldfoghcwj {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}
/* /Components/Transcripts/TranscriptVerlauf.razor.rz.scp.css */
/* 156 T014/T015 — TranscriptVerlauf (Zone ⑤ + Aktionen ⑥). Vorlage:
   mockups/transkript-lauf/index.html — tl-Formen :313–500, Verlauf :391–478,
   Kopien der chat-/ta-Formen aus ChatContributionView.razor.css und
   TranscriptAppView.razor.css (plan E2 „inklusive kopierter chat-/ta-Formen").
   Die Ansichten-/Sichtbarkeits-Wahrheit kommt aus VerlaufSicht, die
   Ehrlichkeits-Texte aus VerlaufItems.

   WICHTIG — Scope (Oracle-Diagnose zur Pixel-Treue): Blazor-CSS-Isolation
   setzt das b-…-Attribut NUR in statisches Template-Markup. Der Verlauf-
   Strom wird imperativ per RenderTreeBuilder gebaut (Zeile/AuftragKarte/
   AktionKarte/PilleKarte/RawListe) — seine Elemente tragen das Attribut
   NIE. Regeln für sie laufen deshalb über den statischen Anker .tl-körper
   (das rollende Körper-Div im Template) mit ::deep (Bestandspräzedenz
   ChatsPage.razor.css:40–65): `.tl-körper ::deep X` → `.tl-körper[b-…] X`.
   Regeln für Template-Markup (Kopf-Slots, Leiste) bleiben direkt. */

/* --- Aufbau der Zone: Kopf, Leiste, rollender Körper, Fuß (statisch) --- */

.tl-verlauf[b-t282i25w4u] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.tl-körper[b-t282i25w4u] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Pixel-Treue (Vorlage af-detail-körper :237): 4/20/22 — der vertikale
       Rhythmus ergänzt sich mit .tl-strom (14px 0 10px). */
    padding: 4px 20px 22px;
}

.tl-fuß[b-t282i25w4u] {
    flex: none;
}

/* Der Erstbuchstaben-Avatar — seit 156 Nachtrag M3 nur noch der Ersatz,
   wenn die Persona kein Bild hat (sonst das 36-px-Bild, Vorlage :1553;
   Rahmen und Rundung trägt .af-dk-symbol:has(> img) in app.css). */
.tl-dk-avatar[b-t282i25w4u] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-4);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-2);
}

.tl-dk-id[b-t282i25w4u] {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    margin-left: 6px;
}

/* --- Leiste (Vorlage :313–319; statisches Template) --- */

.tl-leiste[b-t282i25w4u] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border);
}

.tl-leiste-rechts[b-t282i25w4u] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tl-lsuche[b-t282i25w4u] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tl-lsuche .af-suche input[b-t282i25w4u] {
    width: 170px;
    padding: 5px 10px 5px 30px;
    font-size: 12.5px;
}

.tl-treffer[b-t282i25w4u] {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    min-width: 3.6em;
    text-align: right;
    padding: 0 4px;
    white-space: nowrap;
}

/* --- contracts §2 (156 T018): der Lauf-Kopf ist EINE der drei Lesestellen
       der Punkt-Gestalten — der Punkt in der Status-Marke ist Template-
       Markup (trägt das Scope-Attribut) und bleibt daher DIREKT. --- */

.af-dk-marken .tl-punkt[b-t282i25w4u] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    margin-right: 4px;
    background: var(--text-3);
}

.af-dk-marken .tl-punkt-erfolg[b-t282i25w4u] {
    background: var(--green);
}

.af-dk-marken .tl-punkt-block[b-t282i25w4u] {
    background: var(--yellow);
}

.af-dk-marken .tl-punkt-fehler[b-t282i25w4u] {
    background: var(--red);
}

.af-dk-marken .tl-punkt-fehler.tl-punkt-hohl[b-t282i25w4u] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--red);
}

.af-dk-marken .tl-punkt-läuft[b-t282i25w4u] {
    background: var(--accent-2);
}

@media (prefers-reduced-motion: no-preference) {
    .af-dk-marken .tl-punkt-läuft[b-t282i25w4u] {
        animation: tl-kopf-puls-b-t282i25w4u 1.8s ease-in-out infinite;
    }
}

@keyframes tl-kopf-puls-b-t282i25w4u {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

/* =====================================================================
   Ab hier: imperativ gerenderter Verlauf — alle Regeln über den statischen
   Anker .tl-körper ::deep (siehe Kopfkommentar).
   ===================================================================== */

/* --- Der Verlauf: EINE Spalte, links die Uhrzeit (Vorlage :391–400) --- */

.tl-körper[b-t282i25w4u]  .tl-strom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0 10px;
}

.tl-körper[b-t282i25w4u]  .tl-e {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    border-radius: var(--radius-sm);
}

.tl-körper[b-t282i25w4u]  .tl-e-zeit {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    text-align: right;
    padding-top: 8px;
    white-space: nowrap;
}

.tl-körper[b-t282i25w4u]  .tl-e-inhalt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tl-körper[b-t282i25w4u]  .tl-e-inhalt > .tl-sig,
.tl-körper[b-t282i25w4u]  .tl-e-inhalt > .chat-question,
.tl-körper[b-t282i25w4u]  .tl-e-inhalt > .tl-auftrag,
.tl-körper[b-t282i25w4u]  .tl-e-inhalt > .tl-tool,
.tl-körper[b-t282i25w4u]  .tl-e-inhalt > .tl-thinking,
.tl-körper[b-t282i25w4u]  .tl-e-inhalt > .chat-abort,
.tl-körper[b-t282i25w4u]  .tl-e-inhalt > details[open] {
    align-self: stretch;
}

.tl-körper[b-t282i25w4u]  .tl-pill-inhalt .tl-e {
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 10px;
}

.tl-körper[b-t282i25w4u]  .tl-leise {
    color: var(--text-3);
    font-size: 12px;
}

.tl-körper[b-t282i25w4u]  .tl-vereint {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 4px;
}

/* Auftrag, Abschluss, Sprechblase und Frage-Wortlaut rendern Markdown —
   Dichte, Umbruch und Zeilenhöhe trägt der Baustein .af-md (app.css,
   156 Nachtrag M1/M2); hier nur Schriftgröße und Farbe der Fläche. */
.tl-körper[b-t282i25w4u]  .tl-auftrag-text {
    font-size: 13.5px;
    color: var(--text);
}

.tl-körper[b-t282i25w4u]  .tl-sig-text {
    font-size: 13px;
}

/* 156 Nachtrag M3 (§10 M3): das kurze Aufblitzen des Sprungziels
   (Bestands-JS flash setzt ta-flash und nimmt es nach 1,6 s wieder weg;
   Werte wie TranscriptAppView/Vorlage :381). */
.tl-körper[b-t282i25w4u]  .ta-flash {
    animation: tl-flash-ziel-b-t282i25w4u 1.2s ease-out;
}

@keyframes tl-flash-ziel-b-t282i25w4u {
    0%, 40% { background: rgba(108, 140, 255, .25); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-körper[b-t282i25w4u]  .ta-flash {
        animation: none;
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
}

/* 156 Nachtrag M3 (§10 M3): „Der Eintrag ist in der Ansicht … ausgeblendet.“
   direkt am Kopf-Sprung (per RenderTreeBuilder gebaut ⇒ über den
   statischen Anker .tl-verlauf). */
.tl-verlauf[b-t282i25w4u]  .tl-sprung-hinweis {
    color: var(--yellow-text);
}

/* 156 Nachtrag M3 (§4 M3): der Startfehler-Grund (final.message) unter dem
   Kategorietext der Abschluss-Karte — Klartext. */
.tl-körper[b-t282i25w4u]  .tl-abschluss-grund {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

/* Der aktive Suchtreffer (§10, Vorlage :480). */
.tl-körper[b-t282i25w4u]  .tl-treffer-aktiv > .tl-e-inhalt > *,
.tl-körper[b-t282i25w4u]  .ta-raw-zeile.tl-treffer-aktiv {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

/* --- Auftrag: Akzent-Tönung (Vorlage :402–408) --- */

.tl-körper[b-t282i25w4u]  .tl-auftrag {
    background: rgba(108, 140, 255, .08);
    border: 1px solid rgba(108, 140, 255, .38);
    border-radius: var(--radius-sm);
    padding: 8px 12px 10px;
}

.tl-körper[b-t282i25w4u]  .tl-auftrag.tl-auftrag-fehlt {
    background: transparent;
    border-style: dashed;
    border-color: var(--border-light);
    padding-bottom: 8px;
}

.tl-körper[b-t282i25w4u]  .tl-karte-kopf {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 4px;
}

.tl-körper[b-t282i25w4u]  .tl-auftrag-fehlt .tl-karte-kopf {
    margin-bottom: 0;
}

.tl-körper[b-t282i25w4u]  .tl-karte-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--accent);
}

.tl-körper[b-t282i25w4u]  .tl-karte-kopf .af-btn-link {
    margin-left: auto;
    font-size: 11.5px;
}

/* --- Handlungskarte (chat-action, Block-Form; Kopie ChatContributionView
        + Mockup :410–432) --- */

.tl-körper[b-t282i25w4u]  .chat-action.tl-sig {
    display: block;
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='info'] {
    border-left-color: var(--accent);
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='info'] .chat-action-outcome {
    color: var(--accent);
}

.tl-körper[b-t282i25w4u]  .tl-sig-kopf {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.tl-körper[b-t282i25w4u]  .tl-quelle {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--text-3);
    border: 1px dashed var(--border-light);
    border-radius: 999px;
    padding: 0 7px;
    white-space: nowrap;
}

.tl-körper[b-t282i25w4u]  .tl-sig-körper {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Nachtrag N21: Auftrags-Kurztext der Delegations-Karte — höchstens zwei
   Zeilen, Rest mit „…“; der volle Wortlaut steht im title. */
.tl-körper[b-t282i25w4u]  .tl-auftrag-kurz {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.tl-körper[b-t282i25w4u]  .tl-sig-fuß {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-2);
}

.tl-körper[b-t282i25w4u]  .tl-lauf-stand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tl-körper[b-t282i25w4u]  .tl-lauf-stand .tl-punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-3);
}

.tl-körper[b-t282i25w4u]  .tl-lauf-stand .tl-punkt-erfolg {
    background: var(--green);
}

.tl-körper[b-t282i25w4u]  .tl-lauf-stand .tl-punkt-block {
    background: var(--yellow);
}

.tl-körper[b-t282i25w4u]  .tl-lauf-stand .tl-punkt-fehler {
    background: var(--red);
}

.tl-körper[b-t282i25w4u]  .tl-lauf-stand .tl-punkt-fehler.tl-punkt-hohl {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--red);
}

.tl-körper[b-t282i25w4u]  .tl-warnung {
    font-size: 12px;
    color: var(--yellow-text);
    font-weight: 600;
}

.tl-körper[b-t282i25w4u]  .tl-details {
    font-size: 12px;
    color: var(--text-2);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Replay-Bündel (Vorlage :427–432) */
.tl-körper[b-t282i25w4u]  .tl-replay-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

.tl-körper[b-t282i25w4u]  .tl-replay-liste li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.tl-körper[b-t282i25w4u]  .tl-replay-karten {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Frage und Blocker lesend (Kopie ChatContributionView + Mockup :434–438) --- */

.tl-körper[b-t282i25w4u]  .tl-frage[data-typ='blocker'] {
    border-color: rgba(255, 176, 32, .5);
}

.tl-körper[b-t282i25w4u]  .tl-frage[data-typ='blocker'] .chat-question-prompt {
    color: var(--yellow-text);
}

.tl-körper[b-t282i25w4u]  .tl-frage[data-typ='frage'] .chat-question-prompt {
    color: var(--accent);
}

.tl-körper[b-t282i25w4u]  .tl-frage-titel {
    font-weight: 700;
    font-size: 13.5px;
}

.tl-körper[b-t282i25w4u]  .tl-frage-empfehlung {
    font-size: 12.5px;
    color: var(--text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Arbeits-Pill (Kopie ChatContributionView + Mockup :440–442) --- */

/* Nachtrag N22: im engen Kopf gibt die Vorschau zuerst Platz ab (hohes
   Schrumpf-Gewicht), danach der Zähler; Zustand und Dauer bleiben fest. */
.tl-körper[b-t282i25w4u]  .chat-work-summary .tl-pill-vorschau {
    flex: 0 1000 auto;
    min-width: 0;
    font-size: 12px;
    font-style: italic;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-körper[b-t282i25w4u]  .tl-pill-zeit {
    margin-left: auto;
    padding-left: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.tl-körper[b-t282i25w4u]  .tl-pill-inhalt {
    padding: 8px 10px 10px 4px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Thinking (Kopie TranscriptAppView) --- */

.tl-körper[b-t282i25w4u]  .tl-thinking {
    min-width: 0;
}

.tl-körper[b-t282i25w4u]  .ta-thinking-kennung {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 3px;
}

.tl-körper[b-t282i25w4u]  .ta-thinking {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: var(--text-2, inherit);
    background: var(--bg-2);
    border: 1px dashed var(--border-light);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 3px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Werkzeug-Zeile (Vorlage :446–462) --- */

.tl-körper[b-t282i25w4u]  .tl-tool {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    min-width: 0;
}

.tl-körper[b-t282i25w4u]  .tl-tool-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 27px;
    padding: 3px 10px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    text-align: left;
    border-radius: var(--radius-sm);
}

.tl-körper[b-t282i25w4u]  .tl-tool-kopf:hover {
    background: var(--bg-3);
}

.tl-körper[b-t282i25w4u]  .tl-tool-vorschau {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-körper[b-t282i25w4u]  .tl-tool-vorschau.tl-leise {
    color: var(--text-3);
}

/* Der Aufklapp-Pfeil der Werkzeug-Zeile (Vorlage :451). */
.tl-körper[b-t282i25w4u]  .tl-tool-pfeil {
    color: var(--text-3);
    width: 13px;
    height: 13px;
}

.tl-körper[b-t282i25w4u]  .tl-tool-körper {
    padding: 4px 10px 10px;
    border-top: 1px dashed var(--border-light);
}

.tl-körper[b-t282i25w4u]  .tl-pill-inhalt .tl-tool {
    border-color: transparent;
    background: transparent;
}

.tl-körper[b-t282i25w4u]  .tl-pill-inhalt .tl-tool.tl-tool-auf {
    border-color: var(--border);
    background: var(--bg-3);
}

.tl-körper[b-t282i25w4u]  .tl-ok {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.tl-körper[b-t282i25w4u]  .tl-ok[data-ok='ja'] {
    background: var(--green);
}

.tl-körper[b-t282i25w4u]  .tl-ok[data-ok='nein'] {
    background: var(--red);
}

.tl-körper[b-t282i25w4u]  .tl-ok[data-ok='offen'] {
    background: transparent;
    border: 1.5px solid var(--text-3);
}

.tl-körper[b-t282i25w4u]  .ta-chip-werkzeug {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    border: 1px solid rgba(108, 140, 255, .4);
    border-radius: 4px;
    padding: 0 6px;
}

.tl-körper[b-t282i25w4u]  .ta-dauer {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}

.tl-körper[b-t282i25w4u]  .ta-eingabe-label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 3px;
}

.tl-körper[b-t282i25w4u]  .ta-eingabe {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-2, inherit);
    background: var(--bg-2);
    border: 1px dashed var(--border-light);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 3px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.tl-körper[b-t282i25w4u]  .ta-output {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-2, inherit);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 3px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Schlüssel-Wert-Ansicht (Vorlage :460–463, Hausregel 11) --- */

.tl-körper[b-t282i25w4u]  .tl-kv {
    grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
    gap: 4px 14px;
    font-size: 12.5px;
    margin: 3px 0;
}

.tl-körper[b-t282i25w4u]  .tl-kv dt {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 400;
}

.tl-körper[b-t282i25w4u]  .tl-wert {
    font-family: var(--mono);
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* --- Systemzeile und Trenner (Vorlage :468–471) --- */

.tl-körper[b-t282i25w4u]  .tl-system {
    padding-top: 7px;
    font-size: 11.5px;
    color: var(--text-3);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.tl-körper[b-t282i25w4u]  .tl-system .af-mono {
    font-size: 11px;
}

.tl-körper[b-t282i25w4u]  .tl-trenner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--mono);
    margin: 2px 0 2px 74px;
}

.tl-körper[b-t282i25w4u]  .tl-trenner::before,
.tl-körper[b-t282i25w4u]  .tl-trenner::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--border-light);
}

/* --- Abschnitt „Nach dem Abschluss" (ta-phase-Kopie + Mockup :472) --- */

.tl-körper[b-t282i25w4u]  .ta-phase {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--mono);
    margin: 8px 0 2px;
}

.tl-körper[b-t282i25w4u]  .ta-phase-name {
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.tl-körper[b-t282i25w4u]  .ta-phase-line {
    flex: 1;
    border-top: 1px dashed var(--border-light);
}

.tl-körper[b-t282i25w4u]  .ta-phase-span {
    white-space: nowrap;
}

.tl-körper[b-t282i25w4u]  .tl-abschnitt {
    margin-left: 74px;
}

/* --- Raw (Kopie TranscriptAppView + Mockup :475–478) --- */

.tl-körper[b-t282i25w4u]  .ta-raw {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.tl-körper[b-t282i25w4u]  .ta-raw-zeile {
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    padding: 2px 8px;
    min-height: 27px;
}

.tl-körper[b-t282i25w4u]  .ta-raw-seq {
    font-family: var(--mono);
    color: var(--text-3);
    min-width: 3.5em;
    text-align: right;
    flex: none;
}

.tl-körper[b-t282i25w4u]  .ta-raw-typ {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    flex: none;
    min-width: 12em;
}

.tl-körper[b-t282i25w4u]  .ta-raw-quelle,
.tl-körper[b-t282i25w4u]  .ta-raw-zeit {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    flex: none;
}

.tl-körper[b-t282i25w4u]  .tl-raw-knopf {
    display: flex;
    gap: 10px;
    align-items: baseline;
    width: 100%;
    padding: 4px 8px;
    min-height: 27px;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--text-2);
    font-size: 12px;
}

.tl-körper[b-t282i25w4u]  .tl-raw-knopf:hover {
    background: var(--bg-3);
}

.tl-körper[b-t282i25w4u]  .tl-raw-detail {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.tl-körper[b-t282i25w4u]  .tl-raw-körper {
    padding: 4px 12px 10px 5.4em;
}

/* --- 158 Lauf-Kontext in Raw (contracts raw-darstellung.md §3/§4) --- */

/* Hinweis „Kontext nicht aufgezeichnet“: leise, flach, VOR der Liste —
   bewusst nicht die af-leer-Familie (deren Selektoren tragen Leer-
   Zusicherungen). */
.tl-körper[b-t282i25w4u]  .ta-raw-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 8px 0;
    font-size: 12px;
    color: var(--text-3);
}

.tl-körper[b-t282i25w4u]  .ta-raw-hinweis .af-i {
    flex: none;
    margin-top: 1px;
    color: var(--blue-text);
}

.tl-körper[b-t282i25w4u]  .tl-kontext-kopf {
    font-size: 11.5px;
    color: var(--text-3);
    margin: 2px 0 4px;
}

/* Wortlaut: escapet, Umbrüche erhalten, kein Markdown — kein eigener
   Scroll-Container, gescrollt wird die Seite. */
.tl-körper[b-t282i25w4u]  .tl-kontext-wortlaut {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 3px 0 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

.tl-körper[b-t282i25w4u]  .tl-kontext-gekürzt {
    font-size: 11.5px;
    color: var(--yellow-text);
    margin: 0 0 6px;
}

/* --- Kopierte chat-Formen (Basis; Quelle ChatContributionView.razor.css,
        plan E2 „inklusive kopierter chat-/ta-Formen") --- */

.tl-körper[b-t282i25w4u]  .chat-bubble {
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
}

/* Im Lauf-Verlauf spricht die Persona — immer deren Seite. */
.tl-körper[b-t282i25w4u]  .chat-bubble[data-side='theirs'] {
    background: var(--bg-3);
    border-bottom-left-radius: 4px;
}

.tl-körper[b-t282i25w4u]  .chat-bubble-text {
    overflow-wrap: anywhere;
}

.tl-körper[b-t282i25w4u]  .chat-work-pill {
    max-width: 100%;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-size: 12.5px;
}

.tl-körper[b-t282i25w4u]  .chat-work-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 11px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--text-2);
}

.tl-körper[b-t282i25w4u]  .chat-work-summary:hover {
    color: var(--text);
}

.tl-körper[b-t282i25w4u]  .chat-work-summary::-webkit-details-marker {
    display: none;
}

.tl-körper[b-t282i25w4u]  .chat-work-summary::before {
    content: "▸";
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--text-3);
}

.tl-körper[b-t282i25w4u]  .chat-work-pill[open] > .chat-work-summary::before {
    content: "▾";
}

.tl-körper[b-t282i25w4u]  .chat-work-state {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-3);
}

.tl-körper[b-t282i25w4u]  .chat-work-count {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-körper[b-t282i25w4u]  .chat-work-names {
    min-width: 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .tl-körper[b-t282i25w4u]  .chat-work-pill[data-working='ja'] .chat-work-state::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 5px;
        border-radius: 50%;
        background: var(--accent);
        animation: tl-verlauf-pulsieren-b-t282i25w4u 1.6s ease-in-out infinite;
    }

    @keyframes tl-verlauf-pulsieren-b-t282i25w4u {
        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .35;
        }
    }
}

.tl-körper[b-t282i25w4u]  .chat-action {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 8px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='performed'] {
    border-left-color: var(--green);
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='failed'] {
    border-left-color: var(--red);
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='refused'] {
    border-left-color: var(--yellow);
}

.tl-körper[b-t282i25w4u]  .chat-action-outcome {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='performed'] .chat-action-outcome {
    color: var(--green);
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='failed'] .chat-action-outcome {
    color: var(--red);
}

.tl-körper[b-t282i25w4u]  .chat-action[data-outcome='refused'] .chat-action-outcome {
    color: var(--yellow);
}

.tl-körper[b-t282i25w4u]  .chat-action-text {
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Ausgangs-Marke im Karten-Kopf (Pixel-Treue, Kopie TranscriptAppView /
   Vorlage :371–374): Status als farbige Mono-Marke. */
.tl-körper[b-t282i25w4u]  .ta-outcome {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 0 6px;
    background: var(--bg-3);
}

.tl-körper[b-t282i25w4u]  .ta-outcome-erfolgreich {
    color: var(--green);
    border-color: rgba(63, 206, 139, .4);
    background: rgba(63, 206, 139, .09);
}

.tl-körper[b-t282i25w4u]  .ta-outcome-fehlgeschlagen {
    color: var(--red-text);
    border-color: rgba(255, 92, 92, .4);
    background: rgba(255, 92, 92, .09);
}

.tl-körper[b-t282i25w4u]  .ta-outcome-abgebrochen,
.tl-körper[b-t282i25w4u]  .ta-outcome-blockiert {
    color: var(--yellow-text);
    border-color: rgba(255, 176, 32, .4);
    background: rgba(255, 176, 32, .07);
}

.tl-körper[b-t282i25w4u]  .chat-abort {
    padding: 7px 14px;
    border: 1px dashed rgba(255, 92, 92, .45);
    border-radius: var(--radius-sm);
    background: rgba(255, 92, 92, .07);
    font-size: 12.5px;
    color: var(--red-text);
}

.tl-körper[b-t282i25w4u]  .chat-abort-text {
    overflow-wrap: anywhere;
}

.tl-körper[b-t282i25w4u]  .chat-question {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 13px 12px;
    background: var(--bg-3);
    border: 1px solid rgba(108, 140, 255, .38);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

/* Der Frage-Wortlaut rendert als Markdown (.af-md, Nachtrag M2); der
   einzeilige Klartext-Hinweis „nicht erfasst“ braucht kein pre-wrap. */
.tl-körper[b-t282i25w4u]  .chat-question-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text);
    overflow-wrap: anywhere;
}

.tl-körper[b-t282i25w4u]  .chat-question-prompt {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-2);
}

.tl-körper[b-t282i25w4u]  .chat-question-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tl-körper[b-t282i25w4u]  .chat-question-choice {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 7px 11px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Lesend (FR-016): die Empfehlung als gestrichelte Anmerkung, keine Wahl. */
.tl-körper[b-t282i25w4u]  .chat-question-option[data-recommended='ja'] > .chat-question-choice {
    border-style: dashed;
    border-color: rgba(108, 140, 255, .55);
}

.tl-körper[b-t282i25w4u]  .chat-question-recommendation {
    align-self: flex-start;
    padding: 1.5px 8px;
    border-radius: 999px;
    background: rgba(108, 140, 255, .13);
    border: 1px solid rgba(108, 140, 255, .35);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* --- Schmale Viewports (Vorlage :479–481-Umbruchregel; statische Teile) --- */

@media (max-width: 760px) {
    .tl-leiste[b-t282i25w4u] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .tl-lsuche .af-suche input[b-t282i25w4u] {
        width: 130px;
    }

    .tl-treffer[b-t282i25w4u] {
        white-space: normal;
    }

    .tl-körper[b-t282i25w4u] {
        padding: 0 6px;
    }
}

/* --- 156 N20-Nacharbeit: niedrige Fenster (zweispaltig, ≤ 700 px hoch) ---
   Gemessen 2026-10-07 (Dev-App, 1280×577, Lauf e7e574e4): Kopf 150 px und
   Leiste 135 px (drei Zeilen: Ansichten | Einblenden | Suche) ließen dem
   Körper unter seiner Untergrenze nichts, .tl-fuß lag unter der
   Fensterkante. Verdichtet wird ohne Verlust: kein Text fällt weg, nichts
   wird gekürzt. Der Kopf rückt enger (16/14 → 10/9 px), die Leiste wird
   zweizeilig — Ansichten und Suche oben, Einblenden darunter über die volle
   Breite (Kopf 150 → 137, Leiste 135 → 80 px). Der Kopf bekommt KEIN
   eigenes Rollen: das „Mehr“-Menü hängt absolut am Kopf und würde
   abgeschnitten (Review B1, app.css .af-liste/.af-detail). Ab 701 px gilt
   die Vorlage unverändert. */
@media (min-width: 1100px) and (max-height: 700px) {
    .tl-verlauf[b-t282i25w4u]  .tl-dk {
        padding: 10px 18px 9px;
    }

    .tl-verlauf[b-t282i25w4u]  .tl-dk .af-dk-marken {
        margin-top: 5px;
    }

    .tl-verlauf[b-t282i25w4u]  .tl-dk .af-dk-hinweis {
        margin-top: 8px;
        padding: 6px 12px;
    }

    .tl-leiste[b-t282i25w4u] {
        padding: 6px 18px;
        gap: 6px 12px;
    }

    .tl-leiste > .tl-leiste-rechts[b-t282i25w4u] {
        order: 1;
    }

    .tl-leiste > .af-chips[b-t282i25w4u] {
        order: 2;
        flex-basis: 100%;
    }

    /* Die globale Such-Regel setzt ihr Polster mit !important (app.css
       .af-suche input, 37 px hoch) — hier die flache Fassung der Vorlage
       (:313–319). 146 px mit schmalem Polster rechts tragen „Im Lauf
       suchen…“ ganz und lassen Ansichten + Suche bei 1280 px Breite in
       EINER Zeile (255 + 12 + 283 ≤ 554 px). */
    .tl-lsuche .af-suche input[b-t282i25w4u] {
        width: 146px;
        padding: 5px 4px 5px 30px !important;
    }
}


/* Nachtrag N14 (Vertrag §6 N14): das kleine Persona-Bild an den Agenten-
   Beiträgen (Baustein .af-persona-bild, app.css) — Kopf der Sprechblase mit
   dem Bild (Name im Titel), in den Karten-Köpfen vor dem Versal-Wort, in der Rückfrage
   vor der Kennung. */
.tl-körper[b-t282i25w4u]  .tl-beitrag-kopf {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.tl-körper[b-t282i25w4u]  .tl-sig-kopf > .af-persona-bild {
    align-self: center;
}

.tl-körper[b-t282i25w4u]  .chat-question-prompt > .af-persona-bild {
    margin-right: 6px;
}