@import '_content/PSC.Blazor.Components.MarkdownEditor/PSC.Blazor.Components.MarkdownEditor.mlg14ggzcc.bundle.scp.css';

/* /Components/AboutDialog.razor.rz.scp.css */
.about-dialog-wide[b-5kfg0lo8ws] {
    max-width: 760px;
}

.about-modal[b-5kfg0lo8ws] {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    position: relative;
}

.about-close[b-5kfg0lo8ws] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.85;
}

/* Kopfbereich mit Logo auf schwarzem Grund (wie der Sidebar-Kopf) → weiße Logo-Variante. */
.about-hero[b-5kfg0lo8ws] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    padding: 0;
    overflow: hidden;
    background-color: var(--tri-ink);
}

/* particle-logo Web-Component: füllt den Kopfbereich; Partikel formen das Logo (Canvas ist transparent,
   Hintergrund = schwarzer Kopf). */
.about-logo[b-5kfg0lo8ws] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* FREMDES BRANDING: weißer Kopf. Ein Kundenlogo ist fast immer für weißen Grund gezeichnet - auf dem
   schwarzen Band standen Farbverläufe und dunkle Schrift („Sustainable Technology Solutions") kaum lesbar
   auf einer sichtbaren Kachel. Für das triagen-Logo bleibt der dunkle Grund: Es ist die helle Variante. */
.about-hero.is-branded[b-5kfg0lo8ws] {
    background-color: #fff;
    border-bottom: 1px solid var(--tri-border, #e6e8ea);
}

/* Auf hellem Grund braucht das Schließen-Kreuz seine normale, dunkle Darstellung. */
.about-hero.is-branded ~ .about-close[b-5kfg0lo8ws],
.about-close.on-light[b-5kfg0lo8ws] {
    filter: none;
    opacity: 0.6;
}

/* Fremdes Branding: ruhiges Kundenlogo statt der triagen-Partikel-Animation. */
.about-logo-img[b-5kfg0lo8ws] {
    position: relative;
    z-index: 1;
    max-width: 70%;
    max-height: 60%;
    object-fit: contain;
}

/* Fremdes Branding ohne eigenes Logo: der Produktname, damit das Band nicht leer bleibt.
   Auf dem weißen Kopf in der Schriftfarbe der Anwendung statt in Weiß. */
.about-product[b-5kfg0lo8ws] {
    position: relative;
    z-index: 1;
    color: var(--tri-ink, #1b1c1d);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    padding: 0 1.5rem;
}

.about-body[b-5kfg0lo8ws] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.6rem 2rem 1.9rem;
    text-align: center;
    background: #fff;
}

.about-version[b-5kfg0lo8ws] {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tri-green);
    background: var(--tri-green-bg);
    border: 1px solid var(--tri-green-soft);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.about-version:hover[b-5kfg0lo8ws] {
    background: var(--tri-green-soft);
    border-color: var(--tri-green);
}

.about-link[b-5kfg0lo8ws] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--tri-green);
    text-decoration: none;
}

.about-link:hover[b-5kfg0lo8ws] {
    color: var(--tri-green-dark);
    text-decoration: underline;
}

.about-copy[b-5kfg0lo8ws] {
    font-size: 0.82rem;
    color: var(--tri-muted);
}
/* /Components/AgentAssignmentDialog.razor.rz.scp.css */
/* Zuordnungs-Dialog: zwei Listen nebeneinander. Bewusst KOMPAKT – links stehen auf einem gewachsenen
   System rund 50 Einträge, und jede Zeile trägt zwei Zeilen Text. */

/* Unten knapp halten: Der Body brachte 1,5 rem mit, die Fußzeile noch einmal 1 rem – zusammen klaffte
   zwischen der Liste und den Schaltflächen ein Streifen Weiß von 2,5 rem. */
.assign-body[b-wcf78kru5x] { display: flex; flex-direction: column; gap: .75rem; overflow: hidden !important;
               padding: 1rem 1.4rem .4rem; }

/* ---------- Kopfband ----------
   Titel, Agent, Suche und Filter stehen zusammen in EINEM Block. Dadurch sind die beiden weißen Listen
   darunter eindeutig der Arbeitsbereich – vorher schwammen Suche und Filter zwischen Kopf und Listen und
   gehörten optisch zu nichts.

   Die FARBE kommt aus dem Hausstandard: dieselbe Fläche wie der Seitenkopf und wie jedes andere
   Dialogband (`.user-modal-head` in app.css), mit Branding die Signature-Farbe des Kunden. Bis 2.0.x war
   dieses Band als einziges noch fast schwarz – ein Rest aus der Zeit vor dem grünen Kopf. Hier bleibt nur
   `display: block` und das eigene Polster stehen, weil unter dem Titel noch Suche und Filter folgen. */
.assign-head[b-wcf78kru5x] {
    display: block;
    background: var(--wl-signature, var(--tri-green));
    border-bottom: 0;
    padding: 1.15rem 1.4rem 1rem;
}
.assign-head-top[b-wcf78kru5x] { display: flex; align-items: center; gap: .85rem; }
/* Avatar wie in den Agenten-Listen; heller Ring wie im Hausstandard (.user-modal-agentavatar). */
.assign-head-avatar[b-wcf78kru5x] { flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.assign-head-titles[b-wcf78kru5x] { flex: 1 1 auto; min-width: 0; }
/* Nummer und Name auf EINER Grundlinie: `align-items: baseline` statt `center` – bei `center` sitzt das
   Nummern-Chip optisch zu hoch, weil es durch sein Polster höher ist als der Text. */
.assign-title[b-wcf78kru5x] {
    margin: 0; color: #fff; font-weight: 700; font-size: 1.35rem; line-height: 1.25;
    display: flex; align-items: baseline; gap: .5rem; min-width: 0;
}
/* Gleiche Schriftgröße wie der Name – die Nummer gehört zum Titel, nicht daneben. */
.assign-title-num[b-wcf78kru5x] { font-size: inherit; flex: 0 0 auto; margin-right: 0; }

/* Weißes ✕ auf heller, durchscheinender Kachel – dieselbe Bauart wie in jedem anderen Dialogkopf. */
.assign-close[b-wcf78kru5x] {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border: 0; border-radius: .6rem;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: .95rem; transition: background .12s;
}
.assign-close:hover[b-wcf78kru5x] { background: rgba(255, 255, 255, .3); }

/* Suche und Filter im Kopfband: eine Zeile, Suche links (nimmt den Rest), Chips rechts. */
.assign-searchrow[b-wcf78kru5x] { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }

.assign-search[b-wcf78kru5x] { position: relative; display: flex; align-items: center; flex: 1 1 16rem; min-width: 12rem; }
.assign-search > .bi-search[b-wcf78kru5x] { position: absolute; left: .85rem; color: rgba(255, 255, 255, .7); pointer-events: none; font-size: .9rem; }
/* Eingabefeld auf dem farbigen Band: durchscheinendes Weiß statt einer eigenen dunklen Fläche – so bleibt
   das Band EINE Farbe, auch wenn ein Kunde sein eigenes Grün/Blau mitbringt. */
.assign-search input[b-wcf78kru5x] {
    width: 100%; padding: .45rem .9rem .45rem 2.3rem;
    border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px; font-size: .9rem;
    background: rgba(255, 255, 255, .16); color: #fff;
}
.assign-search input[b-wcf78kru5x]::placeholder { color: rgba(255, 255, 255, .72); }
/* Fokus: nur der Rahmen wird weiß, der Grund bleibt durchscheinend. Ein aufgehellter Grund ließe das
   Feld „anspringen"; die helle Kante genügt, um zu zeigen, wo getippt wird. */
.assign-search input:focus[b-wcf78kru5x] { outline: none; border-color: #fff; background: rgba(255, 255, 255, .22); }
.assign-search-clear[b-wcf78kru5x] { position: absolute; right: .6rem; border: 0; background: none; color: rgba(255, 255, 255, .75); padding: .2rem .35rem; }
.assign-search-clear:hover[b-wcf78kru5x] { color: #fff; }

.assign-filters[b-wcf78kru5x] { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Chips auf dem farbigen Band: umrandet und weiß; der aktive ist WEISS GEFÜLLT und trägt die Bandfarbe
   als Schrift – höchster Kontrast, ohne eine zweite Signalfarbe einzuführen. */
.assign-filter[b-wcf78kru5x] {
    display: inline-flex; align-items: baseline; gap: .4rem;
    border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; color: #fff;
    border-radius: 999px; padding: .32rem .9rem; font-size: .86rem; font-weight: 500;
    transition: border-color .12s, background .12s, color .12s;
}
.assign-filter:hover[b-wcf78kru5x] { border-color: #fff; background: rgba(255, 255, 255, .14); }
.assign-filter.on[b-wcf78kru5x] { border-color: #fff; background: #fff; color: var(--wl-signature, var(--tri-green)); }
.assign-filter-n[b-wcf78kru5x] { font-size: .78rem; font-weight: 500; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; }
.assign-filter.on .assign-filter-n[b-wcf78kru5x] { color: rgba(0, 0, 0, .45); }

/* Zwei gleich breite Spalten, jede scrollt für sich.
   `minmax(0, 1fr)` statt `1fr` ist Pflicht: Ein blankes `1fr` hat `auto` als MINIMUM, und die einzeiligen
   Beschreibungen (white-space: nowrap) treiben dieses Minimum ins Absurde – die Spalten wurden dadurch
   zehntausende Pixel breit und die rechte Liste rutschte aus dem Bild. Dasselbe gilt für `min-width: 0`
   an der Spalte selbst. */
.assign-cols[b-wcf78kru5x] { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.assign-col[b-wcf78kru5x] { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.assign-col-head[b-wcf78kru5x] {
    flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #8a939d; padding: 0 .2rem .3rem;
}
.assign-list[b-wcf78kru5x] {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border: 1.5px solid var(--tri-border, #e3e6ea); border-radius: .7rem; padding: .35rem; background: #fff;
}
.assign-list.drop[b-wcf78kru5x] { border-color: var(--tri-green); background: #f4fbf5; }

.assign-group + .assign-group[b-wcf78kru5x] { margin-top: .3rem; }
/* Der Gruppenkopf ist die Gliederung der Liste – er steht deshalb in Grün und GRÖSSER als die Einträge
   darunter. Vorher war er kleiner als der Elementname und ging in der Liste unter. */
.assign-group-head[b-wcf78kru5x] {
    display: flex; align-items: center; gap: .45rem; width: 100%; border: 0; background: none;
    padding: .45rem .4rem .3rem; font-size: .98rem; font-weight: 700;
    color: var(--tri-green); text-align: left;
}
.assign-group-head.static[b-wcf78kru5x] { cursor: default; }
.assign-group-head:hover:not(.static)[b-wcf78kru5x] { background: #f5f7f8; border-radius: .45rem; }
.assign-group-ic[b-wcf78kru5x] { color: var(--tri-green); }

.assign-row[b-wcf78kru5x] {
    display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border-radius: .5rem;
}
.assign-row + .assign-row[b-wcf78kru5x] { margin-top: .1rem; }
.assign-row:hover[b-wcf78kru5x] { background: #f5f7f8; }
.assign-row.off[b-wcf78kru5x] { opacity: .45; }
.assign-row.is-draggable[b-wcf78kru5x] { cursor: grab; }

.assign-ic[b-wcf78kru5x] {
    flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: .45rem; background: #eef1f3;
    display: flex; align-items: center; justify-content: center; color: #5b6470; font-size: .85rem;
}
.assign-text[b-wcf78kru5x] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.assign-name[b-wcf78kru5x] { font-size: .84rem; font-weight: 600; color: #3a4047; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Einzeilig und per CSS abgeschnitten – nicht im Code gekürzt, damit es sich der Dialogbreite anpasst. */
.assign-desc[b-wcf78kru5x] { font-size: .74rem; color: #8a939d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assign-tag[b-wcf78kru5x] {
    font-size: .62rem; font-weight: 700; color: #6b747e; background: #eef1f3;
    padding: .05rem .35rem; border-radius: .5rem; margin-left: .35rem;
}
/* Laufende Nummer bei mehrfach zugeordneten Kritikern – nur Unterscheidungshilfe, deshalb dezent. */
.assign-seq[b-wcf78kru5x] { font-size: .72rem; font-weight: 600; color: #98a2ad; margin-left: .3rem; }

.assign-note[b-wcf78kru5x] { flex: 0 0 auto; font-size: .7rem; color: #98a2ad; white-space: nowrap; }

/* „+" und Mülleimer sind echte SCHALTFLÄCHEN mit Rahmen – als bloße Symbole sah man ihnen nicht an,
   dass man sie anklicken kann. */
.assign-add[b-wcf78kru5x], .assign-del[b-wcf78kru5x] {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.8rem; height: 1.8rem; padding: 0; font-size: .8rem;
    border: 1.5px solid var(--tri-border, #e3e6ea); border-radius: .5rem; background: #fff;
    transition: border-color .12s, background .12s, color .12s;
}
/* Grau wie der Mülleimer und nicht größer als das Symbol vor dem Eintrag – die Schaltfläche soll die
   Zeile nicht dominieren. */
.assign-add[b-wcf78kru5x] { color: #7a838d; }
.assign-add:hover[b-wcf78kru5x] { border-color: var(--tri-green); background: #eef7f0; color: var(--tri-green); }
/* Der Mülleimer bleibt grau: Entfernen wird hier ohnehin nur VORGEMERKT und mit „Abbrechen" wieder
   zurückgenommen – ein rotes Warnsignal an jeder Zeile wäre für einen so folgenlosen Klick zu laut. */
.assign-del[b-wcf78kru5x] { color: #7a838d; }
.assign-del:hover[b-wcf78kru5x] { border-color: #b9c0c7; background: #f2f4f6; color: #5b6470; }

.assign-empty[b-wcf78kru5x] { padding: .8rem .5rem; font-size: .8rem; color: #98a2ad; font-style: italic; }

@media (max-width: 800px) {
    .assign-cols[b-wcf78kru5x] { grid-template-columns: minmax(0, 1fr); }
}

/* Fußzeile ohne graue Fläche und ohne Trennstrich: Der Dialog ist ohnehin durch die beiden umrandeten
   Listen gegliedert; ein zusätzlicher Balken unten zerschneidet ihn nur ein zweites Mal.
   (Überschreibt die globale Regel aus app.css – die Scoped-CSS-Variante gewinnt über die Spezifität.) */
/* /Components/AgentAttachmentsDialog.razor.rz.scp.css */
.aad-body[b-3rwq9owr5k] {
    min-height: 22rem;
}

/* Drop-Zone mit unsichtbarem, überlagerndem Datei-Input (nimmt Klick + OS-Drag&Drop entgegen). */
.aad-drop[b-3rwq9owr5k] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    padding: 1.4rem 1rem;
    border: 2px dashed var(--tri-border);
    border-radius: .6rem;
    background: var(--tri-surface-muted, #f8faf9);
    color: var(--tri-text-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}

.aad-drop.over[b-3rwq9owr5k] {
    border-color: var(--tri-green);
    background: var(--tri-green-bg-active, #eaf6ee);
    color: var(--tri-green);
}

.aad-drop.busy[b-3rwq9owr5k] {
    cursor: default;
    opacity: .8;
}

/* Das <input type=file> stammt aus der InputFile-Kindkomponente – ::deep, da es das Scope-Attribut nicht trägt. */
.aad-drop[b-3rwq9owr5k]  .aad-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.aad-drop.busy[b-3rwq9owr5k]  .aad-drop-input {
    cursor: default;
    pointer-events: none;
}

.aad-drop-ic[b-3rwq9owr5k] {
    font-size: 1.6rem;
    color: var(--tri-green);
}

.aad-list[b-3rwq9owr5k] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.aad-item[b-3rwq9owr5k] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border: 1px solid var(--tri-border);
    border-radius: .5rem;
    background: var(--tri-surface, #fff);
}

.aad-item-ic[b-3rwq9owr5k] {
    font-size: 1.15rem;
    color: var(--tri-green);
    flex: 0 0 auto;
}

.aad-item-main[b-3rwq9owr5k] {
    flex: 1 1 auto;
    min-width: 0;
}

.aad-item-name[b-3rwq9owr5k] {
    font-weight: 600;
    font-size: .9rem;
}

.aad-item-meta[b-3rwq9owr5k] {
    font-size: .75rem;
    color: var(--tri-text-muted);
}

.aad-rename[b-3rwq9owr5k] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/AgentSecurityView.razor.rz.scp.css */
.sec-grid[b-jl8b1w3v12] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.sec-span[b-jl8b1w3v12] {
    grid-column: 1 / -1;
}

@media (max-width: 991px) {
    .sec-grid[b-jl8b1w3v12] { grid-template-columns: 1fr; }
}

.sec-card[b-jl8b1w3v12] {
    border-radius: 1rem;
    /* Klar sichtbarer Rahmen auf allen Seiten (überschreibt Bootstraps .border-0) – sonst wirken die
       oberen Karten im scrollenden Popup randlos. */
    border: 1px solid var(--tri-border) !important;
}

.sec-card-title[b-jl8b1w3v12] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: .75rem;
    color: var(--tri-green);
}

.sec-card-title > i[b-jl8b1w3v12] {
    font-size: 1.1rem;
}

.sec-count[b-jl8b1w3v12] {
    margin-left: auto;
    background: var(--tri-surface, #f4f5f7);
    color: var(--tri-muted);
    border-radius: 999px;
    padding: .05rem .55rem;
    font-size: .78rem;
    font-weight: 600;
}

.sec-row[b-jl8b1w3v12] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--tri-border);
}

.sec-row:first-of-type[b-jl8b1w3v12] {
    border-top: none;
}

.sec-note[b-jl8b1w3v12] {
    font-size: .82rem;
    color: var(--tri-muted);
    background: #fdfaef;
    border: 1px solid #f0e6c8;
    border-radius: .6rem;
    padding: .5rem .65rem;
}

.sec-tools[b-jl8b1w3v12] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 767px) {
    .sec-tools[b-jl8b1w3v12] { grid-template-columns: 1fr; }
}

.sec-tool[b-jl8b1w3v12] {
    border: 1px solid var(--tri-border);
    border-radius: .8rem;
    padding: .7rem .8rem;
    background: #fff;
}

.sec-tool-head[b-jl8b1w3v12] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sec-tool-head > i[b-jl8b1w3v12] {
    color: var(--tri-green);
    font-size: 1.05rem;
}

/* Tabellarische Liste (Tools/MCP/Skills): je Eintrag eine Kopfzeile, Einstellungen eingerückt darunter. */
.sec-list[b-jl8b1w3v12] { display: flex; flex-direction: column; }
.sec-list-item[b-jl8b1w3v12] { padding: .55rem 0; border-top: 1px solid var(--tri-border); min-width: 0; }
.sec-list-item:first-child[b-jl8b1w3v12] { border-top: none; padding-top: 0; }
.sec-list-head[b-jl8b1w3v12] { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sec-list-head > i[b-jl8b1w3v12] { color: var(--tri-green); font-size: 1.05rem; flex: 0 0 auto; }
.sec-list-name[b-jl8b1w3v12] { font-weight: 600; overflow-wrap: anywhere; }
.sec-list-sub[b-jl8b1w3v12] { display: flex; gap: .5rem; margin-left: 1.55rem; margin-top: .3rem; align-items: baseline; }
.sec-list-sub-label[b-jl8b1w3v12] { flex: 0 0 11rem; max-width: 11rem; color: var(--tri-muted); font-size: .8rem; }
.sec-list-sub-vals[b-jl8b1w3v12] { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
@media (max-width: 575px) {
    .sec-list-sub[b-jl8b1w3v12] { flex-direction: column; gap: .15rem; }
    .sec-list-sub-label[b-jl8b1w3v12] { flex-basis: auto; max-width: none; }
}

.sec-group[b-jl8b1w3v12] {
    margin-top: .55rem;
}

.sec-group-label[b-jl8b1w3v12] {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tri-muted);
    margin-bottom: .25rem;
}

.sec-card .badge[b-jl8b1w3v12] {
    font-weight: 500;
    border-radius: .5rem;
    /* Lange Werte (z. B. Agent-/Empfängernamen) umbrechen statt über den Rand laufen zu lassen. */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    max-width: 100%;
}

/* Flex-Inhalte dürfen schrumpfen (sonst drücken lange Texte/E-Mails über den Rand). */
.sec-row > div[b-jl8b1w3v12] { min-width: 0; overflow-wrap: anywhere; }
.sec-row .d-flex[b-jl8b1w3v12] { min-width: 0; }
.sec-tool[b-jl8b1w3v12], .sec-group[b-jl8b1w3v12] { min-width: 0; }
.sec-tool code[b-jl8b1w3v12] { white-space: normal; overflow-wrap: anywhere; }

.sec-badge-warn[b-jl8b1w3v12] { background: #fbe7e4; color: #b5462f; }
.sec-badge-ok[b-jl8b1w3v12] { background: #e7f4ea; color: var(--tri-green-hover); }
.sec-badge-info[b-jl8b1w3v12] { background: #e8f0fb; color: #2c5fb3; }
.sec-badge-path[b-jl8b1w3v12] { background: #eef6ef; color: #2f6d34; border: 1px solid #d7e8d9; }
.sec-badge-val[b-jl8b1w3v12] { background: var(--tri-surface, #f4f5f7); color: #444; border: 1px solid var(--tri-border); }
.sec-badge-muted[b-jl8b1w3v12] { background: var(--tri-surface, #f4f5f7); color: var(--tri-muted); }
.sec-badge-cred[b-jl8b1w3v12] { background: #fff6e6; color: #9a6b00; border: 1px solid #f0e0bc; }
/* /Components/MarkdownEditor.razor.rz.scp.css */
.md-editor[b-onqr1cl32h] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tri-border, #dee2e6);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}
.md-editor-toolbar[b-onqr1cl32h] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--tri-border, #dee2e6);
    background: #f8f9fa;
    flex: 0 0 auto;
}
.md-editor-area[b-onqr1cl32h] { flex: 1 1 auto; min-height: 0; display: flex; }
.md-editor-text[b-onqr1cl32h] {
    border: 0;
    border-radius: 0;
    resize: vertical;
    width: 100%;
    min-height: 18rem;
    font-size: .88rem;
}
.md-editor-text:focus[b-onqr1cl32h] { box-shadow: none; }
.md-editor-preview[b-onqr1cl32h] {
    width: 100%;
    padding: .75rem 1rem;
    overflow: auto;
    min-height: 18rem;
    max-height: 60vh;
}

/* Vollbild/Zoom: über allem (auch über Modalen), Textbereich füllt die Höhe. */
.md-editor-full[b-onqr1cl32h] {
    position: fixed;
    inset: 4vh 4vw;
    z-index: 2001;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.md-editor-full .md-editor-text[b-onqr1cl32h] { resize: none; height: 100%; min-height: 0; }
.md-editor-full .md-editor-preview[b-onqr1cl32h] { max-height: none; height: 100%; }
.md-editor-backdrop[b-onqr1cl32h] { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .32); }
/* /Components/PromptEditor.razor.rz.scp.css */
/* Wiederverwendbarer Prompt-/Markdown-Editor (EasyMDE). EasyMDE-DOM wird per JS erzeugt (ohne Blazor-Scope)
   → ::deep nötig. Füllt eine Flex-Spalte und zähmt die Überschriften-Größen (sonst rendert CodeMirror „#" riesig). */
.prompt-editor[b-59qjzcs1gz] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.prompt-editor[b-59qjzcs1gz]  .EasyMDEContainer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
.prompt-editor[b-59qjzcs1gz]  .EasyMDEContainer .CodeMirror { flex: 1 1 auto; min-height: 0; font-size: .9rem; }
.prompt-editor[b-59qjzcs1gz]  .editor-toolbar { flex: 0 0 auto; }
.prompt-editor[b-59qjzcs1gz]  .editor-statusbar { flex: 0 0 auto; }

/* FÜLL-MODUS (.fill-grow): Die Höhe gibt der Flex-Vorfahre vor, nicht der Inhalt.
   Wichtig, weil EasyMDE MinHeight/MaxHeight INLINE auf den Rollbereich schreibt (.CodeMirror-Scroll) und
   Inline-Angaben jede Regel hier überstimmen. Eine Mindesthöhe in vh war dann höher als das per Flex
   geschrumpfte .CodeMirror (das overflow:hidden hat): Der Rollbereich lief unter die Karte, der Text war
   unten abgeschnitten UND der Rollbalken lag mit im abgeschnittenen Streifen - man kam nicht mehr hin.
   Deshalb im Füll-Modus beide Inline-Grenzen aufheben; gerollt wird innen, im sichtbaren Bereich. */
.prompt-editor.fill-grow[b-59qjzcs1gz]  .CodeMirror-scroll { min-height: 0 !important; max-height: none !important; }

/* Markdown-Überschriften im Editor (CodeMirror) deutlich kleiner + grün. */
.prompt-editor[b-59qjzcs1gz]  .CodeMirror .cm-header { color: var(--tri-green); font-weight: 600; }
.prompt-editor[b-59qjzcs1gz]  .CodeMirror .cm-header-1 { font-size: 1.55em; }
.prompt-editor[b-59qjzcs1gz]  .CodeMirror .cm-header-2 { font-size: 1.38em; }
.prompt-editor[b-59qjzcs1gz]  .CodeMirror .cm-header-3 { font-size: 1.22em; }
.prompt-editor[b-59qjzcs1gz]  .CodeMirror .cm-header-4 { font-size: 1.12em; }
.prompt-editor[b-59qjzcs1gz]  .CodeMirror .cm-header-5,
.prompt-editor[b-59qjzcs1gz]  .CodeMirror .cm-header-6 { font-size: 1.05em; }

/* Dieselbe Optik in der EasyMDE-Vorschau. */
.prompt-editor[b-59qjzcs1gz]  .editor-preview h1,
.prompt-editor[b-59qjzcs1gz]  .editor-preview h2,
.prompt-editor[b-59qjzcs1gz]  .editor-preview h3,
.prompt-editor[b-59qjzcs1gz]  .editor-preview h4,
.prompt-editor[b-59qjzcs1gz]  .editor-preview h5,
.prompt-editor[b-59qjzcs1gz]  .editor-preview h6,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h1,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h2,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h3,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h4,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h5,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h6 { color: var(--tri-green); }
.prompt-editor[b-59qjzcs1gz]  .editor-preview h1,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h1 { font-size: 1.6em; }
.prompt-editor[b-59qjzcs1gz]  .editor-preview h2,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h2 { font-size: 1.4em; }
.prompt-editor[b-59qjzcs1gz]  .editor-preview h3,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h3 { font-size: 1.24em; }
.prompt-editor[b-59qjzcs1gz]  .editor-preview h4,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h4 { font-size: 1.12em; }
.prompt-editor[b-59qjzcs1gz]  .editor-preview h5,
.prompt-editor[b-59qjzcs1gz]  .editor-preview h6,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h5,
.prompt-editor[b-59qjzcs1gz]  .editor-preview-side h6 { font-size: 1.05em; }
/* /Components/RunBannerHeader.razor.rz.scp.css */
/* Grünes Banner als Seitenkopf – Werte nach der Vorlage „Detail 2 · Grünes Banner".
   Die Vorlage trug sie als Inline-Stile; hier stehen sie an EINER Stelle und greifen auf die
   Haus-Token zu. Das Grün der Vorlage (#2E6B34) ist durch das Markengrün ersetzt: Zwei fast gleiche
   Grüns nebeneinander sind kein Entwurf, sondern ein Versehen. */

/* Das Ganze ist EINE weisse Karte mit feiner Kante; das Grün ist ihr Kopf, der Kennzahlenstreifen
   ihr Fuss.
   KEIN `overflow: hidden` an der Karte (und auch nicht am Kopf): Darin stehen Schaltflächen mit
   Aufklappmenüs, und die wurden an der Kante abgeschnitten. Die Rundung tragen deshalb Kopf und Fuss
   selbst, und was wirklich geschnitten werden muss – die Schmuckbalken – bekommt mit `.rbh-decor`
   eine eigene Ebene dafür. */
.rbh[b-hc6mzs9shs] {
    position: relative;
    margin-bottom: 1rem;
    box-sizing: border-box;
    /* KEIN Rahmen. Er stammt aus der Zeit, als die Karte weiss war und das Gruen nur ihr Kopf;
       seit der Kopf die ganze Fläche ist, lag er als heller Ring um das Gruen - und weil der Kopf
       um die Rahmenstaerke kleiner gerundet war, blitzte in den Ecken zusaetzlich Weiss durch. */
    border: 0;
    /* 14 statt der 18 px der Vorlage: Neben der Liste darunter (12 px) wirkte die staerkere
       Rundung wie eine zweite Bauweise. */
    border-radius: 14px;
    background: transparent;
    /* VIER Lagen statt einer: eine feine Lichtkante oben (das Grün bekommt dadurch eine Oberkante
       statt einer Schnittkante), ein kurzer Kontaktschatten, ein grünlicher Schimmer und ein
       weicher Tiefenschatten. Der Schimmer hängt am Marken-Grün (`--tri-green-rgb`), damit er bei
       einer Kundenfarbe mitgeht. Der SCHWEBENDE Kopf (Szenen, Designer) überschreibt das in
       app.css: Er liegt über einer Szene, nicht auf der Seite. */
    /* Dieselben vier Lagen, aber deutlich knapper gefasst: Der weiche Tiefenschatten reichte
       fast zwei Fingerbreit unter das Banner und sah dort aus wie ein zweiter, verwaschener
       Kasten. Die Lichtkante oben bleibt unveraendert - sie ist kein Schatten, sondern eine Kante. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 1px 2px rgba(20, 50, 25, .18),
        0 4px 9px -3px rgba(var(--tri-green-rgb), .3),
        0 10px 20px -10px rgba(20, 50, 25, .3);
    display: flex;
    flex-direction: column;
    /* Beides ausdrücklich: Der Seitenbereich ist selbst eine Flex-Spalte fester Höhe. Ohne `flex: none`
       STAUCHT er den Kopf, sobald der Seiteninhalt länger ist (gemessen: 156 statt 204 px – die
       Kennzahlenzeile war abgeschnitten), und ohne `stretch` zieht sein `align-items: center` die
       Zeilen in die Mitte, statt sie über die volle Breite zu legen. */
    flex: 0 0 auto;
    align-items: stretch;
    /* NICHTS IM KOPF LAESST SICH MARKIEREN. Wer im Designer einen Knoten nach oben zieht und dabei
       ueber den Kopf faehrt, markierte sonst dessen Text - Ueberschrift, Kennung und sogar die
       Beschriftungen der Schaltflaechen standen danach blau hinterlegt da. Das gilt fuer JEDEN
       Banner: Er ist eine Flaeche zum Ansehen und Anklicken, kein Text zum Herauskopieren.
       Eingabefelder im Anbau (Suche, Zeitraum) bleiben ausgenommen - dort wird getippt. */
    -webkit-user-select: none;
    user-select: none;
}
.rbh input[b-hc6mzs9shs], .rbh textarea[b-hc6mzs9shs], .rbh select[b-hc6mzs9shs],
.rbh[b-hc6mzs9shs]  input, .rbh[b-hc6mzs9shs]  textarea, .rbh[b-hc6mzs9shs]  select,
.rbh[b-hc6mzs9shs]  [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* Der grüne Kopf. Das Polster sitzt HIER und nicht an der Karte, damit der Streifen darunter bis an
   deren Kanten reicht. */
.rbh-body[b-hc6mzs9shs] {
    position: relative;
    /* UEBER dem weissen Anbau: Aus dem Band klappen Fenster auf (im Chat der Verlauf), und der Anbau
       steht im Markup danach - er malte sich sonst darueber. Dass das Band damit ein eigener
       Stapelraum wird, ist unbedenklich, SOLANGE auch der Klickfänger eines solchen Fensters darin
       liegt: Ein Fänger ausserhalb läge mit seinen z 1040 über dem ganzen Band und damit über dem
       Fenster, und ein Klick auf einen Eintrag schlösse es bloss (siehe Chat.razor). */
    z-index: 1;
    /* Die Rundung der Karte, um deren Rahmenstärke verkleinert – sonst bliebe aussen eine Haarlinie
       Weiss stehen. Unten nur dann, wenn kein Anbau folgt. */
    border-radius: 14px 14px 0 0;
    transition: border-radius .18s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Luft zwischen den drei Zeilen. Mit .75 rem standen Pfad, Kennung und Kennzahlen aufeinander –
       und weil der Inhalt die Mindesthöhe inzwischen überschreitet, verteilt `space-between` nichts
       mehr: Was zwischen den Zeilen steht, ist genau dieser Wert. */
    gap: 1.2rem;
    /* 16/24 nach der Vorlage: Mit einer 40 px hohen Zeile ergibt das die vorgesehenen 72 px. Der
       VOLLE Kopf (Lauf-Detail) behält sein grösseres Polster - dort stehen drei Zeilen. */
    padding: 16px 24px;
    /* Dieselbe Flaeche wie Seitenkopf und Dialogband: Mit Branding gilt die Signature-Farbe des Kunden
       (`--wl-signature`, gesetzt am `.page`), ohne Branding das Marken-Gruen. Vorher stand hier fest
       `--tri-green` – in einem gebrandeten System war dieses Band als einziges noch gruen. */
    background: var(--wl-signature, var(--tri-green));
    color: #fff;
}

/* Beim Scrollen bleibt der Kopf stehen, der Anbau klappt zu (siehe js/sticky-banner.js, das die
   Klasse setzt). Über die HÖHE statt `display: none`, damit es gleitet statt zu springen. */
/* Die Klassen sitzen am BEHÄLTER (dort hängt auch das Skript), nicht an der Karte. */
.rbh-sticky.is-on .rbh-attached[b-hc6mzs9shs] {
    overflow: hidden;
    max-height: 20rem;
    transition: max-height .18s ease;
}
/* `is-fest`: Dieser Anbau klappt NICHT zu. Für Seiten, deren Filter beim Scrollen erreichbar
   bleiben soll – in einer langen Agentenliste sucht man mitten im Scrollen weiter. */
.rbh-sticky.is-on.is-geschrumpft:not(.is-fest) .rbh-attached[b-hc6mzs9shs] { max-height: 0; }

/* Der weisse Fuss der Karte. Kein eigener Rahmen und kein Schatten: Es ist dieselbe Fläche wie die
   Karte, nur unterhalb des grünen Kopfes. */
/* Mindesthöhe NUR für den vollen Kopf: Erst damit verteilt `space-between` Pfad, Kennung und
   Fusszeile über die Höhe. Ohne Fusszeile (Übersichtsseiten) stünde darin eine Handbreit leeres Grün.
   Knapper als die 236 px der Vorlage: Der Kopf steht auf JEDER Lauf-Seite über dem Verlauf, und die
   Luft zwischen den drei Zeilen ging von der Zeitleiste ab. */
/* 132 statt 172 px: Die Mindesthöhe stammt aus der Zeit, als hier zwei Pillenreihen standen. Seit die
   Kennzahlen im weissen Fuss stehen, blieb davon nur Leerraum über der Kennung. Der Inhalt bestimmt
   jetzt die Höhe – die Zahl ist die, die Pfadzeile, Abstand und Kennungszeile zusammen ergeben. */
.rbh-body.is-tall[b-hc6mzs9shs] { min-height: 132px; padding: 1.25rem 2rem 1.35rem; }

/* NUR ohne Anbau. Die zweite Bedingung („beim Scrollen geschrumpft") stammt aus der Zeit, als der
   Anbau zuklappte: Dann rundete der gruene Kopf unten nach, weil er der letzte Kasten war. Seit der
   Anbau stehen bleibt, rundete sich der Kopf mitten im Scrollen ab - der Banner sah aus, als
   zerfiele er in zwei Teile. */
.rbh:not(:has(.rbh-attached)) .rbh-body[b-hc6mzs9shs] {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.rbh-attached[b-hc6mzs9shs] {
    position: relative;
    z-index: 0;
    background: #fff;
    color: var(--tri-text);
    border-radius: 0 0 14px 14px;
    /* Beschneiden, sonst malt ein Inhalt mit eigener weisser Fläche (der Kennzahlenstreifen) die
       beiden unteren Ecken wieder quadratisch aus. Hier ist das unbedenklich: In diesem Anbau klebt
       nichts und klappt nichts auf. */
    overflow: hidden;
}

/* Ein Anbau mit gewöhnlichem Inhalt (Filter, Formular) braucht Polster – der Kennzahlenstreifen
   bringt seines in den Spalten selbst mit und bekommt deshalb keines. */
.rbh[b-hc6mzs9shs]  .rbh-pane { padding: 1.1rem 1.5rem 1.25rem; }

/* --- Schmuckbalken ------------------------------------------------------------------------- */
/* Rein dekorativ, deshalb aria-hidden im Markup. Sie „atmen" langsam; wer Bewegung abbestellt hat,
   bekommt sie still (siehe prefers-reduced-motion unten). */
/* Die Ebene, die sie beschneidet. Sie liegt über dem Kopf, nicht am Kopf selbst – sonst müsste der
   wieder `overflow: hidden` tragen und würde die Aufklappmenüs darin abschneiden. */
.rbh-decor[b-hc6mzs9shs] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.rbh-bars[b-hc6mzs9shs] {
    position: absolute;
    right: 21rem;
    bottom: -20px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    opacity: .1;
    pointer-events: none;
}
.rbh-bars span[b-hc6mzs9shs] {
    display: block;
    width: 34px;
    border-radius: 17px;
    background: #fff;
    transform-origin: bottom;
    /* EINMAL, nicht endlos: Ein Kopf, der dauernd atmet, zieht den Blick immer wieder von dem weg,
       weswegen man die Seite geöffnet hat. `both` hält den Endzustand – sonst sprängen die Balken am
       Ende auf ihre Ausgangshöhe zurück. */
    animation: rbh-breathe-b-hc6mzs9shs 3.6s ease-in-out 1 both;
}
/* Mit Branding bleiben sie still – siehe Begründung im Markup. */
.rbh-bars.is-plain span[b-hc6mzs9shs] { animation: none; }
.rbh-bars span:nth-child(1)[b-hc6mzs9shs] { height: 90px; }
.rbh-bars span:nth-child(2)[b-hc6mzs9shs] { height: 150px; animation-delay: .4s; }
.rbh-bars span:nth-child(3)[b-hc6mzs9shs] { height: 220px; animation-delay: .8s; }

@keyframes rbh-breathe-b-hc6mzs9shs { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
@keyframes rbh-rise-b-hc6mzs9shs { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Wappen rechts im Band ------------------------------------------------------------------
   Ein Zeichen, das die Seite kennzeichnet - in voller Hoehe des Bandes und damit ueber dessen
   Polster hinaus. Es ist KEIN Knopf: keine Flaeche, kein Rahmen, kein Zeiger. Die negativen
   Raender heben das Polster des Kopfes auf, damit es wirklich von Kante zu Kante reicht. */
.rbh[b-hc6mzs9shs]  .rbh-wappen {
    display: inline-flex;
    align-items: center;
    /* 43 statt urspruenglich 72 px: In voller Bandhoehe sass das Zeichen bis an beide Kanten und
       wirkte eingeklemmt. Die Raender bleiben negativ, damit es trotzdem mittig im Band steht und
       nicht vom Polster nach unten gedrueckt wird. */
    margin: -16px -4px -16px 0;
    font-size: 43px;
    line-height: 1;
    color: #fff;
    pointer-events: none;
}
.rbh-body.is-tall[b-hc6mzs9shs]  .rbh-wappen { margin: 0; font-size: 34px; }

/* --- Der blasse Schriftzug im Hintergrund ---------------------------------------------------
   Derselbe Name noch einmal, sehr gross und fast unsichtbar: Er gibt der Flaeche Tiefe, ohne etwas
   zu sagen, was nicht schon dasteht. Bewusst OHNE Kontur und mit nur 3,5 % Deckkraft - alles
   darueber liest sich als zweite Ueberschrift.

   Der Kasten darum beschneidet an den runden Ecken; die Schrift ist absichtlich groesser als das
   Banner und wird oben, unten und rechts angeschnitten. */
.rbh-geistbox[b-hc6mzs9shs] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.rbh-geist[b-hc6mzs9shs] {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-46%);
    font-family: 'Space Grotesk', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 132px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: rgba(255, 255, 255, .035);
    white-space: nowrap;
    user-select: none;
    /* Er blendet beim Oeffnen der Seite langsam auf - zwei Sekunden, einmal. Langsam, weil er
       nichts ankuendigt: Waere er sofort da, saehe man ihn gar nicht; kaeme er schnell, zoege er
       den Blick von der Ueberschrift weg, die er nur begleiten soll. */
    animation: rbh-geist-auf-b-hc6mzs9shs 2s ease-out both;
}
@keyframes rbh-geist-auf-b-hc6mzs9shs {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Schmale Fenster: Der Schriftzug fuellte sonst die ganze Breite und stand hinter jedem Wort. */
@media (max-width: 640px) {
    .rbh-geist[b-hc6mzs9shs] { font-size: 96px; }
}

/* --- Punktraster im Hintergrund -------------------------------------------------------------
   Reine Zier (im Markup `aria-hidden`), und bewusst ZWEI Ebenen: Maske und Verschiebung sitzen
   beide an Eigenschaften, die sich gegenseitig überschreiben würden. Aussen liegt deshalb die
   Maske mit der einmaligen Startbewegung, innen das Raster mit der dauerhaften.

   Die Maske blendet links aus: Dort steht die Überschrift, und Punkte hinter einem Wort machen es
   unruhig. Rechts, hinter den Schaltflächen, stehen sie voll. */
.rbh-raster[b-hc6mzs9shs] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Beschnitt an den runden Ecken. Der Kopf selbst darf kein `overflow: hidden` tragen - darin
       hängen Aufklappmenüs, die daran abgeschnitten würden. */
    overflow: hidden;
    border-radius: inherit;
    transform-origin: right center;
    animation: rbh-raster-auf-b-hc6mzs9shs 1.6s cubic-bezier(.16, 1, .3, 1) both;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 30%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 30%, #000 75%);
}
.rbh-raster-gitter[b-hc6mzs9shs] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.4px);
    background-size: 16px 16px;
    animation:
        rbh-raster-zug-b-hc6mzs9shs 12s linear 1.6s infinite,
        rbh-raster-atem-b-hc6mzs9shs 6s ease-in-out 1.6s infinite;
}
/* Start: Die Punkte stehen zusammengedrückt am rechten Rand und verteilen sich einmal nach links. */
@keyframes rbh-raster-auf-b-hc6mzs9shs {
    0% { opacity: 0; transform: scaleX(.08); }
    35% { opacity: 1; }
    100% { opacity: 1; transform: scaleX(1); }
}
/* Dauer: GENAU eine Rasterweite (16 px) - ein anderer Wert liesse das Raster am Schleifenende
   sichtbar springen. */
@keyframes rbh-raster-zug-b-hc6mzs9shs {
    from { background-position: 0 0; }
    to { background-position: -16px 16px; }
}
@keyframes rbh-raster-atem-b-hc6mzs9shs {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* --- Pfadzeile ----------------------------------------------------------------------------- */
.rbh-path[b-hc6mzs9shs] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8125rem;
    color: #d5e8d7;
}
.rbh-back[b-hc6mzs9shs] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}
.rbh-back:hover[b-hc6mzs9shs] { color: #fff; text-decoration: underline; }
.rbh-run[b-hc6mzs9shs] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* --- Kennung ------------------------------------------------------------------------------- */
.rbh-ident[b-hc6mzs9shs] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: rbh-rise-b-hc6mzs9shs .5s both;
}
/* KEIN Ring und keine Fläche darunter: Der helle Saum lag wie ein fremder Rahmen um das Bild, und
   wo das Bild den Kreis nicht ganz füllte, blitzte die Fläche als zweiter Rand durch. Ein Avatar
   steht hier für sich. */
.rbh-visual[b-hc6mzs9shs] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Die Höhe richtet sich nach dem Textblock daneben (Abzeichen + Überschrift): `stretch` nimmt
       dessen Höhe, `aspect-ratio` macht daraus einen Kreis. Eine feste Zahl passte nur zu genau einem
       Schriftgrad – bei 26 px Titel stand der 44-px-Avatar deutlich zu klein daneben. */
    /* Feste Kantenlänge, abgestimmt auf die zwei Zeilen daneben (Abzeichen + Überschrift).
       Mitwachsend über `align-self: stretch` + `aspect-ratio` wurde daraus je nach Zeilenhöhe ein
       Oval – ein Kreis ist es nur, wenn Breite und Höhe GLEICH sind, und das sagt eine Zahl
       zuverlässiger als eine Rechnung des Flexbox-Algorithmus. */
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: transparent;
    color: var(--wl-signature, var(--tri-green));
    overflow: hidden;
}
/* Was auch immer darin steckt (Bild, Sinnbild, Initialen): Es füllt den Kreis, statt seine eigene
   Grösse mitzubringen – sonst bestimmte das Innere die Höhe und nicht der Textblock daneben.
   `::deep`, weil der Inhalt aus einer ANDEREN Komponente kommt (AgentAvatar) und deshalb das
   Bereichs-Attribut dieser hier nicht trägt – ohne das griff die Regel nicht (gemessen: 56 statt 47). */
.rbh-visual[b-hc6mzs9shs]  > * { width: 100% !important; height: 100% !important; }
/* 5 % Zoom: Die Fotos sind runde Freisteller, deren äußerster Rand oft den hellen Hintergrund der
   Aufnahme zeigt – auf dem Grün las sich das wie ein weisser Rahmen um den Kopf. Das Rund beschneidet
   ohnehin, der Zoom schiebt diesen Saum nach aussen hinaus. */
.rbh-visual[b-hc6mzs9shs]  img { object-fit: cover; transform: scale(1.05); }
.rbh-visual.is-tile[b-hc6mzs9shs] {
    border-radius: 12px;
    box-shadow: none;
    font-size: 1.25rem;
}

/* Die Zeile über der Überschrift: hell, klein, ohne Fläche – sie ordnet ein, sie betont nicht. */
.rbh-kicker[b-hc6mzs9shs] {
    align-self: flex-start;
    font-size: .875rem;
    color: #d5e8d7;
    line-height: 1;
}

.rbh-text[b-hc6mzs9shs] { display: flex; flex-direction: column; gap: .375rem; margin-right: auto; min-width: 0; }
.rbh-badge[b-hc6mzs9shs] {
    align-self: flex-start;
    /* Die SCHRIFT im Abzeichen steht buendig unter der Ueberschrift, nicht sein Kaestchen: Das
       Polster links schob den Text um seine Breite nach innen, und darunter begann der Titel - zwei
       Anfaenge in einer Spalte. Der negative Rand nimmt das Polster wieder heraus. */
    margin-left: -.5rem;
    /* Ein Viertel kleiner als die Vorlage – zusammen mit der Überschrift, zu der es gehört. */
    font: 600 .645rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: .3rem .5rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, .16);
}
/* Einzeilig wie bei PageHeader: Ein umbrechender Titel schöbe die Kennzahlenzeile nach unten und
   das Banner wüchse je nach Fensterbreite in der Höhe. */
.rbh-title[b-hc6mzs9shs] {
    margin: 0;
    /* Kleiner als die 34 px der Vorlage: Agentennamen sind hier lang („AT: 26 Drei Kritiker +
       Gatekeeper + Rueckfrage") und füllten damit die halbe Breite. Sie laufen nicht um, sondern
       werden gekürzt – siehe white-space/ellipsis unten. */
    /* Space Grotesk - lokal ausgeliefert, siehe @font-face in app.css. */
    font-family: 'Space Grotesk', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* 32 px in LEICHTER Stärke (300): Grösse führt die Zeile an, nicht Gewicht. Halbfett auf einer
       so grossen Fläche las sich wie ein Ausruf. */
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Im DESIGNER steht der Agentenname fuer sich allein auf dem Band – dort traegt er etwas mehr
   Gewicht (500 statt 300). In den Lauf-Bannern bleibt es bei der leichten Schrift: Dort steht neben
   dem Titel noch eine Kennzahlenzeile, und zwei kraeftige Zeilen uebereinander sind zu viel. */
.rbh.wfd-banner .rbh-title[b-hc6mzs9shs] { font-weight: 500; }
.rbh-title[b-hc6mzs9shs]  a { color: inherit; text-decoration: none; }
.rbh-title[b-hc6mzs9shs]  a:hover { text-decoration: underline; }

/* --- Fußzeile: Kennzahlen und Handlungen --------------------------------------------------- */
/* NICHT umbrechend: Die Handlungen bleiben neben den Kennzahlen, statt bei Platzmangel in eine
   dritte Zeile zu rutschen. Umbrechen sollen die PILLEN – sie tun es früher, weil der Block links
   nur noch die Breite bekommt, die die Schaltflächen übrig lassen. */
.rbh-foot[b-hc6mzs9shs] {
    position: relative;
    display: flex;
    /* Die Schaltflächen stehen UNTEN rechts, auf der Grundlinie der letzten Pillenzeile – mittig
       zwischen zwei Zeilen schwebten sie ohne Bezug. */
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: .75rem;
    /* `backwards` statt `both`. Mit `both` behaelt die Zeile nach dem Einblenden dauerhaft den
       Endzustand der Animation - und dazu gehoert ein (wenn auch leerer) `transform`. Ein
       `transform` macht ein Element zum BEZUGSRAHMEN fuer `position: fixed`: Der seitenweite
       Klickfänger des Verlauf-Fensters war dadurch nicht seitenweit, sondern genau so gross wie
       diese Zeile (gemessen 770 x 40 px) - ein Klick daneben schloss das Fenster nicht mehr.
       `backwards` blendet genauso ein und laesst danach nichts stehen. */
    animation: rbh-rise-b-hc6mzs9shs .5s .12s backwards;
}
.rbh-actions[b-hc6mzs9shs] { margin-left: auto; display: flex; flex: 0 0 auto; gap: 10px; }

/* Die Kennzahlen: ein Block aus Zeilen. Die Seite entscheidet, was zusammengehört. */
.rbh-stats[b-hc6mzs9shs] { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.rbh[b-hc6mzs9shs]  .rbh-statrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Die Zahlen neben der Überschrift (Köpfe ohne Handlungen). Sie brechen bei schmalem Fenster um,
   statt die Überschrift zu quetschen. */
.rbh-identstats[b-hc6mzs9shs] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }

/* Ein Fünftel kleiner als die Vorlage (13 → 10,4 px): Es sind sechs Pillen in zwei Zeilen – in
   voller Grösse trugen sie mehr Gewicht als die Überschrift darüber. Höhe und Polster gehen
   mit, sonst stünde die kleine Schrift in grossen Kapseln. */
.rbh[b-hc6mzs9shs]  .rbh-stat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 28px;
    padding: 0 .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: .715rem;
    color: #fff;
    white-space: nowrap;
}
.rbh[b-hc6mzs9shs]  .rbh-stat b { font-weight: 700; }
/* Ein Punkt vor der Zahl sagt deren Art, bevor man das Wort dahinter liest: weiss = einfach gezählt,
   grün = läuft gerade, rot = mit Fehler. Die Pille der laufenden Dinge ist eine Spur heller – sie ist
   die einzige der drei, die sich von selbst ändert. */
.rbh[b-hc6mzs9shs]  .rbh-dot {
    width: .5rem; height: .5rem; flex: none;
    border-radius: 999px;
    background: #fff;
}
.rbh[b-hc6mzs9shs]  .rbh-dot.is-live { background: #86e08f; }
.rbh[b-hc6mzs9shs]  .rbh-dot.is-error { background: #f38b7b; }
.rbh[b-hc6mzs9shs]  .rbh-stat.is-live { background: rgba(255, 255, 255, .22); }
/* Der Kontext-Ring in der Pille: gerade so gross wie die Zeilenhöhe der Pille. */
.rbh[b-hc6mzs9shs]  .rbh-ring { width: 18px; height: 18px; flex: none; }

/* Die Schaltflächen des Banners. Bootstraps `btn-outline-*` sind für weisse Flächen gedacht und
   verschwinden auf dem Grün – deshalb eigene, gegen Grün gerechnete Varianten. */
.rbh[b-hc6mzs9shs]  .rbh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.rbh[b-hc6mzs9shs]  .rbh-btn:disabled { opacity: .6; cursor: default; transform: none; }

.rbh[b-hc6mzs9shs]  .rbh-btn-w {
    border: 0;
    background: #fff;
    /* Schrift in der Bandfarbe: Auf einem gebrandeten Band stuende sonst Gruen auf z. B. Blau. */
    color: var(--wl-signature, var(--tri-green));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.rbh[b-hc6mzs9shs]  .rbh-btn-w:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }

/* Milchig statt durchsichtig, mit einer hauchduennen Weichzeichnung dahinter - dieselbe Bauart wie
   bei den Bootstrap-Knoepfen im Banner. Das Punktraster bleibt dadurch sichtbar, nur eine Spur
   ruhiger; ab etwa 4 px verschwindet es darunter, und das ist ausdruecklich nicht gewollt. */
.rbh[b-hc6mzs9shs]  .rbh-btn-t {
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    color: #fff;
}
.rbh[b-hc6mzs9shs]  .rbh-btn-t:hover:not(:disabled) { background: rgba(255, 255, 255, .12); color: #fff; }

/* Abbrechen/Stoppen: dieselbe Bauart, aber als Warnung erkennbar. Ein rotes Bootstrap-Rot auf Grün
   wäre unlesbar; hier trägt die Fläche das Signal, nicht die Schrift. */
.rbh[b-hc6mzs9shs]  .rbh-btn-danger {
    border: 1px solid rgba(255, 255, 255, .45);
    background: var(--tri-red);
    color: #fff;
}
.rbh[b-hc6mzs9shs]  .rbh-btn-danger:hover:not(:disabled) { background: var(--tri-red-dark); color: #fff; }

.rbh[b-hc6mzs9shs]  .rbh-ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    color: #fff;
    cursor: pointer;
    transition: background .2s;
}
.rbh[b-hc6mzs9shs]  .rbh-ib:hover:not(:disabled) { background: rgba(255, 255, 255, .12); color: #fff; }
.rbh[b-hc6mzs9shs]  .rbh-ib:disabled { opacity: .6; cursor: default; }

/* Ein Sinnbild-Knopf, der etwas unwiderruflich entfernt, soll sich beim Überfahren als solcher zeigen.
   Ruhend bleibt er wie die anderen - sonst schriee die Kopfzeile dauerhaft rot. */
.rbh[b-hc6mzs9shs]  .rbh-ib-danger:hover:not(:disabled) {
    background: var(--tri-red);
    border-color: var(--tri-red);
    color: #fff;
}

/* --- Kennzahlenstreifen (weisser Fuss der Karte) ------------------------------------------- */
/* Fünf gleich breite Spalten, getrennt durch eine feine Linie LINKS – so trägt die erste keine und
   der Streifen hat am Rand keine Kante, die zur Karte doppelt wäre. */
/* OHNE senkrechtes Polster und mit fester Höhe (116 px wie in der Vorlage): Nur so laufen die
   Trennlinien über die VOLLE Höhe des Streifens. Mit Polster endeten sie an der Textkante und sahen
   aus wie abgeschnitten. */
.rbh[b-hc6mzs9shs]  .rbh-kpis {
    display: grid;
    /* So viele gleich breite Spalten, wie Zellen da sind: Eine feste Fuenf liesse eine Luecke, wenn
       der Lauf keinen Starter nennt. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    /* Flach halten: Der Streifen ist der FUSS des Banners, nicht sein zweiter Kopf. 96 px machten das
       Banner so hoch, dass die Liste darunter erst nach dem Scrollen begann. */
    min-height: 68px;
    padding: .5rem .25rem;
    background: #fff;
}
.rbh[b-hc6mzs9shs]  .rbh-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    min-width: 0;
    padding: 0 1.75rem;
    border-left: 1px solid var(--tri-border);
}
.rbh[b-hc6mzs9shs]  .rbh-kpi:first-child { border-left: 0; }
/* Zahlen in Tabellenziffern: Sonst springt die Breite einer Laufzeit beim Weiterzählen. */
.rbh[b-hc6mzs9shs]  .rbh-kpi-n {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--tri-ink);
    font-variant-numeric: tabular-nums;
}
.rbh[b-hc6mzs9shs]  .rbh-kpi-l {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--tri-muted);
}
/* Die Kontext-Zellen stehen waagerecht: Ring links, Zahl und Beschriftung rechts daneben. */
.rbh[b-hc6mzs9shs]  .rbh-kpi.is-ring { flex-direction: row; align-items: center; gap: .7rem; }
.rbh[b-hc6mzs9shs]  .rbh-kpi-ring { width: 30px; height: 30px; flex: none; }
.rbh[b-hc6mzs9shs]  .rbh-kpi-ringtext { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.rbh[b-hc6mzs9shs]  .rbh-kpi-tokens { font-size: 1.0625rem; font-weight: 700; color: var(--tri-ink); }
.rbh[b-hc6mzs9shs]  .rbh-kpi-unit { font-size: .78rem; font-weight: 500; color: var(--tri-muted); }

/* Schmal: Die Balken stünden sonst unter den Schaltflächen, und der Titel bekäme zu wenig Platz. */
@media (max-width: 992px) {
    .rbh[b-hc6mzs9shs] { border-radius: 0.75rem; }
    .rbh-body[b-hc6mzs9shs] { padding: 1.25rem 1.25rem 1.4rem; }
    .rbh-bars[b-hc6mzs9shs] { display: none; }
    .rbh-title[b-hc6mzs9shs] { font-size: 1.6rem; }
    .rbh-actions[b-hc6mzs9shs] { margin-left: 0; }
    /* Fünf Spalten nebeneinander wären hier je 60 px breit – dann lieber zwei Reihen. */
    .rbh[b-hc6mzs9shs]  .rbh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
    .rbh[b-hc6mzs9shs]  .rbh-kpi:nth-child(odd) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rbh-bars span[b-hc6mzs9shs], .rbh-ident[b-hc6mzs9shs], .rbh-foot[b-hc6mzs9shs], .rbh-line[b-hc6mzs9shs],
    .rbh-raster[b-hc6mzs9shs], .rbh-raster-gitter[b-hc6mzs9shs], .rbh-geist[b-hc6mzs9shs] { animation: none !important; }
    .rbh[b-hc6mzs9shs]  .rbh-btn { transition: none; }
}

/* Klebt der Kopf, trägt der Behälter den Abstand nach unten – die Karte selbst keinen, sonst stünde
   er doppelt. */
.rbh-sticky.is-on > .rbh[b-hc6mzs9shs] { margin-bottom: 0; }

/* --- Einzeilige Bauart ----------------------------------------------------------------------- */
/* Überschrift, Kennzahlen und Handlungen auf EINER Grundlinie. Die Überschrift behält ihre Grösse,
   die Kennzahlen rücken direkt daneben – als Zeile darunter sähe eine Übersicht aus wie eine
   Detailseite, die ihre Einzelheiten vergessen hat. */
.rbh-line[b-hc6mzs9shs] {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    /* 40 px wie die Schaltflächen darin: mit dem Polster von 2 x 16 ergibt das die 72 px der Vorlage. */
    min-height: 40px;
    /* Dasselbe einmalige Aufsteigen wie beim mehrzeiligen Kopf (.rbh-ident/.rbh-foot). Ohne das
       bewegte sich der Kopf der Lauf-Übersicht beim Öffnen und der jeder anderen Seite nicht –
       derselbe Banner darf sich nicht je nach Seite anders verhalten. */
    animation: rbh-rise-b-hc6mzs9shs .5s both;
}
.rbh-line .rbh-title[b-hc6mzs9shs] { flex: 0 0 auto; margin-right: .25rem; }
.rbh-line[b-hc6mzs9shs]  .rbh-statrow { flex: 0 1 auto; }

/* Der Stufenschalter AUF DEM GRÜN: dunkle Spur statt heller, gewählte Stufe als weisse Kachel.
   Die Haus-Variante ist für weisse Flächen gerechnet und verschwände hier. Die Sinnbilder entfallen –
   auf vier Stufen nebeneinander trägt das Wort, nicht das Bild.

   Bewusst `.rbh-body` und nicht `.rbh`: Im weissen Anbau derselben Karte (Filterzeile der
   Lauf-Übersicht) steht ebenfalls ein Stufenfeld – das behält die Haus-Optik. */
.rbh-body[b-hc6mzs9shs]  .seg-switch {
    background: rgba(0, 0, 0, .18);
    /* Abgerundetes Rechteck, keine Pille: dieselbe Formensprache wie Karte, Banner und die Felder
       im Anbau darunter. Als Pille stand es als einziges Element in einer anderen Bauweise da. */
    border-radius: 10px;
    padding: .25rem;
}
.rbh-body[b-hc6mzs9shs]  .seg-switch-btn {
    color: rgba(255, 255, 255, .85);
    border-radius: 7px;
    /* 32 px + 2 x 4 px Polster der Spur = 40 px, also genau die Hoehe der Schaltflaechen daneben.
       Mit einem Polster aus Textzeilen kam das Feld auf 41,8 px und stand sichtbar hoeher. */
    height: 32px;
    padding: 0 .9rem;
    /* Dasselbe Mass wie die Schaltfläche daneben – die beiden stehen in einer Zeile und dürfen
       nicht in zwei Grössen gesetzt sein. */
    font-size: 14px;
    font-weight: 600;
}
.rbh-body[b-hc6mzs9shs]  .seg-switch-btn i { display: none; }
.rbh-body[b-hc6mzs9shs]  .seg-switch-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.rbh-body[b-hc6mzs9shs]  .seg-switch-btn.is-on { background: #fff; color: var(--wl-signature, var(--tri-green)); }

/* Geteilte Schaltfläche („Neuer Agent" + Pfeil) in Weiss: zwei Flächen, eine Form. */
.rbh[b-hc6mzs9shs]  .rbh-split { display: inline-flex; align-items: stretch; }
.rbh[b-hc6mzs9shs]  .rbh-split > .rbh-btn-w,
.rbh[b-hc6mzs9shs]  .rbh-split > .rbh-ib {
    border-radius: 0;
    box-shadow: none;
    border: 0;
    background: #fff;
    color: var(--wl-signature, var(--tri-green));
}
.rbh[b-hc6mzs9shs]  .rbh-split > :first-child { border-top-left-radius: 11px; border-bottom-left-radius: 11px; }
.rbh[b-hc6mzs9shs]  .rbh-split > :last-child { border-top-right-radius: 11px; border-bottom-right-radius: 11px; }
/* Die feine Trennlinie zwischen beiden Hälften – sonst sähe der Pfeil wie ein Teil der Beschriftung aus. */
.rbh[b-hc6mzs9shs]  .rbh-split > :last-child { box-shadow: inset 1px 0 0 rgba(var(--tri-green-rgb), .2); }
.rbh[b-hc6mzs9shs]  .rbh-split > :hover { background: var(--tri-green-bg); color: var(--tri-green); transform: none; }

/* --- Umschalter mit zwei Hälften (2D/3D) ---------------------------------------------------- */
/* EIN Feld mit zwei Hälften, nicht zwei Knöpfe nebeneinander: Die gewählte Hälfte liegt als weisse
   Pille IN der Fassung. Vorher trug die eine Hälfte ihren eigenen Rahmen und die andere die weisse
   Fläche – beide mit eigener Rundung, die an der Stossstelle aufeinander trafen. */
/* Fassung um den Umschalter: Sie traegt nur das Lab-Faehnchen. Die Fassung selbst nimmt KEINE Hoehe
   dazu (das Faehnchen liegt absolut darueber) - sonst wuerde der Umschalter in der Kopfzeile tiefer
   sitzen als die Schaltflaechen daneben. */
.rbh[b-hc6mzs9shs]  .rbh-seg-fassung { position: relative; display: inline-flex; }

.rbh[b-hc6mzs9shs]  .rbh-lab {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 1px 7px;
    border-radius: 999px;
    /* Rot bleibt rot, auch wenn ein Kunde seine eigene Signaturfarbe gesetzt hat: Das Faehnchen ist
       eine Warnung, keine Zierde - es darf nicht im Branding untergehen. */
    background: #d6392b;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #ffffff;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    pointer-events: none;      /* darf den Klick auf „2D" nicht abfangen */
    white-space: nowrap;
}

.rbh[b-hc6mzs9shs]  .rbh-seg {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    height: 40px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 11px;
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

.rbh[b-hc6mzs9shs]  .rbh-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.rbh[b-hc6mzs9shs]  .rbh-seg-btn:hover:not(.is-on) { background: rgba(255, 255, 255, .14); }

.rbh[b-hc6mzs9shs]  .rbh-seg-btn.is-on {
    background: #fff;
    color: var(--wl-signature, var(--tri-green));
}

@media (prefers-reduced-motion: reduce) {
    .rbh[b-hc6mzs9shs]  .rbh-seg-btn { transition: none; }
}

/* --- Haus-Schaltflächen AUF dem Grün ------------------------------------------------------- */
/* Die Seiten, die ihren Kopf auf das Banner umgestellt haben, bringen ihre Knöpfe in Bootstrap-
   Schreibweise mit (`btn-outline-secondary` und Verwandte). Sie sind für weisse Flächen gerechnet
   und verschwänden auf dem Grün. Statt jede Seite umzuschreiben, werden sie HIER übersetzt – dann
   gilt es auch für jede Seite, die später folgt. */
.rbh-body[b-hc6mzs9shs]  .btn-outline-secondary,
.rbh-body[b-hc6mzs9shs]  .btn-outline-primary,
.rbh-body[b-hc6mzs9shs]  .btn-outline-success,
.rbh-body[b-hc6mzs9shs]  .btn-outline-danger {
    border-color: rgba(255, 255, 255, .35);
    /* Milchig statt durchsichtig, mit einer HAUCHDÜNNEN Weichzeichnung dahinter: Das Punktraster
       soll durch den Knopf hindurch zu sehen sein, nur eine Spur ruhiger. Mehr als 2-3 px und die
       Punkte verschwinden darunter - das ist ausdrücklich nicht gewollt. */
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    color: #fff;
}
.rbh-body[b-hc6mzs9shs]  .btn-outline-secondary:hover:not(:disabled),
.rbh-body[b-hc6mzs9shs]  .btn-outline-primary:hover:not(:disabled),
.rbh-body[b-hc6mzs9shs]  .btn-outline-success:hover:not(:disabled),
.rbh-body[b-hc6mzs9shs]  .btn-outline-danger:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
/* Die gefüllten Knöpfe sind auf Grün weiss mit grüner Schrift – wie `rbh-btn-w`. Ein grüner Knopf
   auf grünem Grund wäre nur an seinem Rand zu erkennen. */
.rbh-body[b-hc6mzs9shs]  .btn-primary,
.rbh-body[b-hc6mzs9shs]  .btn-success {
    border: 0;
    background: #fff;
    color: var(--wl-signature, var(--tri-green));
    /* Der einzige Knopf mit eigenem Schatten: Er ist die Hauptsache der Zeile und soll eine Spur
       weiter vorn liegen als die milchigen daneben. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.rbh-body[b-hc6mzs9shs]  .btn-primary:hover:not(:disabled),
.rbh-body[b-hc6mzs9shs]  .btn-success:hover:not(:disabled) { background: var(--tri-green-bg); color: var(--tri-green-dark); }

/* Beschriftungen von Schaltern und Kästchen stehen ebenfalls auf Grün. */
.rbh-body[b-hc6mzs9shs]  .form-check-label,
.rbh-body[b-hc6mzs9shs]  .dash-switch { color: #fff; }
/* Der Schalter selbst: AUS liegt er weiss mit grünem Knopf – auf dem Grün war eine durchscheinende
   Spur kaum vom Grund zu unterscheiden. EIN kippt er ins dunkle Grün mit weissem Knopf und heller
   Kante; die Stellung allein (links/rechts) wäre ein zu leiser Unterschied. */
/* Grösser als Bootstraps Vorgabe (2 × 1 em): Neben einer 40 px hohen Kapsel mit halbfetter Schrift
   war der Schalter ein Detail, das man suchen musste. Der Knopf ist eine Spur kleiner als die Spur
   hoch ist (r = 2,6 statt 3), sonst stiess er an deren Rand. */
.rbh-body[b-hc6mzs9shs]  .form-switch .form-check-input {
    width: 2.3rem;
    height: 1.3rem;
    /* `margin: 0` MIT Nachdruck: Bootstraps `.form-switch .form-check-input` zieht sich mit einem
       negativen linken Rand unter das Polster des Elternteils – in der Kapsel lief es damit über
       deren Kante. */
    margin: 0 !important;
    flex: none;
}
.rbh-body[b-hc6mzs9shs]  .form-check-input:not(:checked) {
    background-color: #fff;
    border-color: #fff;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.6' fill='%23246c30'/%3e%3c/svg%3e");
}
.rbh-body[b-hc6mzs9shs]  .form-check-input:checked {
    background-color: var(--tri-green-active);
    border-color: rgba(255, 255, 255, .8);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.6' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Eine Höhe, eine Form für ALLES in der Handlungszeile: Knöpfe, Schalter und Felder. Die Seiten
   bringen sie in verschiedenen Grössen mit (`btn-sm` neben `btn`), und ein Schalter ohne Kapsel
   stand zwischen zwei Knöpfen wie etwas Vergessenes. */
.rbh-body[b-hc6mzs9shs]  .btn:not(.btn-close) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* Aufklappfenster, die im Kopf hängen, behalten ihre eigene Optik – dort gilt die Zeile nicht mehr. */
.rbh-body[b-hc6mzs9shs]  .chat-history-pop .btn:not(.btn-close),
.rbh-body[b-hc6mzs9shs]  .agent-actions-menu .btn:not(.btn-close) {
    height: auto;
    border-radius: .4rem;
    font-weight: 400;
}

/* Ein Schalter mit Beschriftung bekommt dieselbe Kapsel wie die Knöpfe daneben. */
.rbh-body[b-hc6mzs9shs]  .form-switch,
.rbh-body[b-hc6mzs9shs]  .dash-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 40px;
    /* Mit Nachdruck: Seiten bringen Hilfsklassen wie `ps-0` mit, die das linke Polster sonst
       wegnehmen – der Schalter säße dann auf der Kante der Kapsel. */
    padding: 0 16px !important;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    /* Dieselbe Form UND derselbe milchige Grund wie die Schaltflaechen daneben - sie stehen in
       einer Zeile und duerfen nicht in zwei Bauarten gesetzt sein. */
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.rbh-body[b-hc6mzs9shs]  .form-switch .form-check-label,
.rbh-body[b-hc6mzs9shs]  .dash-switch span { font-size: inherit; font-weight: inherit; margin: 0; }

/* Zahlen an einem Knopf (Verlauf 29): helle Kapsel statt Bootstrap-Grau. */
.rbh-body[b-hc6mzs9shs]  .badge {
    background-color: rgba(255, 255, 255, .22) !important;
    color: #fff;
    font-weight: 700;
}

/* --- Überschriften-Inhalte, die die SEITEN mitbringen ---------------------------------------- */
/* `TitleContent` ist auf vielen Seiten eine Mischung aus Nummernchip, Namen und Abzeichen – alles
   für einen WEISSEN Kopf gerechnet: grüne Schrift, helle Flächen, graue Nebenangaben. Auf dem Grün
   war davon teils nichts zu sehen (gemessen: „#2 LinkedIn-Artikel" zeigte nur ein dunkles „#2").
   Deshalb wird hier alles, was in der Überschrift steht, auf Weiss gezogen. */
.rbh[b-hc6mzs9shs]  .rbh-title,
.rbh[b-hc6mzs9shs]  .rbh-title * { color: #fff; }
.rbh[b-hc6mzs9shs]  .rbh-title a { text-decoration: none; }
.rbh[b-hc6mzs9shs]  .rbh-title a:hover { text-decoration: underline; }
/* Nummern stehen in einer hellen Kapsel statt in der hellgrünen Hausfläche – die ist auf Grün eine
   Fläche auf der Fläche. Die Schreibweisen der Seiten (`agent-num`, `agent-num-inline`,
   `agent-num-badge`, `memory-num` …) sind über das Namensmuster erfasst. */
.rbh[b-hc6mzs9shs]  .rbh-title [class*="-num"] {
    background: rgba(255, 255, 255, .18);
    border: 0;
    border-radius: .35rem;
    padding: .02em .4em;
    margin-right: .3rem;
    font-weight: 700;
}
/* Abzeichen in der Überschrift (Art des Agenten, Archiviert, Dialog) tragen ihre eigene Farbe und
   sind damit auf Grün eine Unruhe – sie werden hell und flach wie die Nummern. */
.rbh[b-hc6mzs9shs]  .rbh-title .badge {
    background-color: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

/* Bootstraps Farb-Hilfsklassen sind für helle Flächen gerechnet und tragen `!important`: `text-muted`
   wird auf Grün zu einem dunklen Fleck, `text-danger` zu einem Rot, das kaum trägt. Hier bekommen
   sie helle Entsprechungen – so bleibt jede Seite lesbar, ohne dass sie umgeschrieben werden muss. */
.rbh-body[b-hc6mzs9shs]  .text-muted,
.rbh-body[b-hc6mzs9shs]  .text-secondary,
.rbh-body[b-hc6mzs9shs]  .text-body-secondary { color: rgba(255, 255, 255, .78) !important; }
.rbh-body[b-hc6mzs9shs]  .text-danger { color: #ffb3a7 !important; }
.rbh-body[b-hc6mzs9shs]  .text-success { color: #bdf0c4 !important; }
.rbh-body[b-hc6mzs9shs]  .text-warning { color: #ffd98a !important; }
.rbh-body[b-hc6mzs9shs]  .text-primary { color: #fff !important; }
.rbh-body[b-hc6mzs9shs]  .text-dark,
.rbh-body[b-hc6mzs9shs]  .text-black { color: #fff !important; }

/* Die GEFÜLLTEN grauen Varianten (`btn-secondary`, `btn-light`, `btn-dark`) zeigen auf den Seiten
   meist die STELLE an, an der man gerade ist – ein Knopf, der nichts mehr tut. Auf Grün war das ein
   grauer Fleck mit grauer Schrift. Hier wird daraus eine helle Fläche mit weisser Schrift, wie die
   gewählte Stufe eines Stufenfelds. */
.rbh-body[b-hc6mzs9shs]  .btn-secondary,
.rbh-body[b-hc6mzs9shs]  .btn-light,
.rbh-body[b-hc6mzs9shs]  .btn-dark {
    background: rgba(255, 255, 255, .22);
    border-color: transparent;
    color: #fff;
}
.rbh-body[b-hc6mzs9shs]  .btn-secondary:disabled,
.rbh-body[b-hc6mzs9shs]  .btn-light:disabled,
.rbh-body[b-hc6mzs9shs]  .btn-dark:disabled { opacity: 1; }
/* /Components/ToolSettingsDialog.razor.rz.scp.css */

/* Register „Mitglieder" des Agententeams: zwei Spalten ueber die volle Dialoghoehe.
   Links die Besetzung mit ihren Rollen, rechts der Ordnerbaum zum Hinzufuegen. Vorher standen beide
   Listen untereinander in Kaesten fester Hoehe - der halbe Dialog blieb ungenutzt. */
.tsd-team-cols[b-glcno4o8vz] { height: 100%; min-height: 0; }
.tsd-team-grid[b-glcno4o8vz] { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; min-height: 0; }
.tsd-team-grid > *[b-glcno4o8vz] { min-height: 0; }
/* /Components/UserProfileDialog.razor.rz.scp.css */
/* Dieser Dialog folgt dem Hausstandard aus app.css (`user-modal user-modal-fixed modal-no-lock`,
   `user-modal-head/-body/-foot`). Die frueheren Eigenbauten `profile-modal/-head/-body/-foot/-close`
   sind entfallen – sie waren der letzte Dialog mit eigener Optik. Hier bleiben nur die Besonderheiten:
   der Foto-Knopf am Avatar und die Abschnitts-Trenner im Body. */

.profile-section[b-mdfez3kx92] {
    padding: 1.25rem 0;
}

.profile-section + .profile-section[b-mdfez3kx92] {
    border-top: 1px solid #eef0ef;
}

.profile-section-title[b-mdfez3kx92] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}


.min-w-0[b-mdfez3kx92] {
    min-width: 0;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Seite: Sidebar (mit schwarzem Kopf) links, Inhalt rechts über die volle Höhe. */
.page[b-ur26oegsde] {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

/* ---------- Sidebar (240px) mit schwarzem Kopfbereich ---------- */
.sidebar[b-ur26oegsde] {
    flex: 0 0 240px;
    width: 240px;
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/* Fläche, Trennlinie und Spaltenaufbau liegen im INNENBEHÄLTER, nicht in der <aside>. Er heisst
   `sidebar-panel` und nicht `sidebar-inner`: Diesen Namen trägt bereits der Behälter in NavMenu.razor,
   und zwei gleich benannte Klassen in derselben Leiste sind eine Falle für den nächsten Leser. Der Grund steht
   beim eingeklappten Zustand: Dort behält die <aside> ihre 64 px im Fluss, während der Innenbehälter
   sich beim Überfahren auf 240 px darüberlegt. Läge der Rand aussen, bliebe seine Linie bei 64 px
   mitten im aufgeklappten Menü stehen. */
.sidebar-panel[b-ur26oegsde] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid var(--tri-border);   /* vertikale Trennlinie über die volle Höhe */
}

/* Heller Kopf – nur über der Sidebar (Hamburger + Logo mit schwarzem Text) */
.sidebar-header[b-ur26oegsde] {
    position: relative;   /* Referenz für das absolut zentrierte Marken-Logo */
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    /* Links 2 px mehr als die Navigation darunter: Das Logo beginnt mit einem hellen Balken, der optisch
       weiter links wirkt als die Symbolkante der Menüpunkte. */
    padding: 0 0.75rem 0 calc(0.75rem + 2px);
    background-color: #fff;
    color: var(--tri-ink);
}

/* KEINE Linie unter dem Logo. Sie lief früher als ::after bündig mit dem Kopfband rechts durch; der
   Kopf der Leiste braucht aber keine eigene Kante – die senkrechte Trennlinie rechts grenzt ihn schon ab. */

/* Bereich unter dem Kopf. Bewusst overflow:visible, damit das Benutzer-Popup (im Fuß) NICHT abgeschnitten
   wird – v. a. bei eingeklappter Sidebar (64px). Das Scrollen übernimmt die innere .sidebar-nav. */
.sidebar-body[b-ur26oegsde] {
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.topbar-toggle[b-ur26oegsde] {
    margin-left: auto;   /* rechtsbündig neben dem Logo */
    background: none;
    border: none;
    /* Sehr hell und kleiner als das Logo: Der Knopf schaltet eine Ansicht um, er ist kein Ziel. In Grün
       und 1,35 rem stand er gleichberechtigt neben der Marke; auch --tri-faint war dafür noch zu kräftig. */
    color: #c0c6cd;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.25rem 0.75rem;   /* = .nav-link, damit das Icon-Kästchen zu den Menü-Icons fluchtet */
    border-radius: 6px;
    flex-shrink: 0;
}

/* Hamburger-Glyph wie ein Menü-Icon zentrieren (gleiche 1.25rem-Box wie .nav-icon). */
.topbar-toggle .bi[b-ur26oegsde] {
    display: inline-block;
    width: 1.25rem;
    text-align: center;
}

.topbar-toggle:hover[b-ur26oegsde] {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--tri-muted);
}

/* Die Marke steht LINKS und nimmt den Platz bis zum Einklapp-Knopf; der schiebt sich mit `margin-left:auto`
   an die rechte Kante. Bis 2.0.632 war es umgekehrt (Knopf links, Logo mittig im Rest) – das Logo stand
   dadurch weder links noch wirklich mittig. */
.topbar-brand[b-ur26oegsde] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    color: var(--tri-ink);
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* Marken-Logo im Sidebar-Kopf: seitenverhältnistreu, max. 29 px hoch (30 % kleiner als zuvor).
   Ein paar Pixel tiefer als die rechnerische Mitte: Der Schriftzug hat oben die Balken des Sinnbilds
   und unten die Unterlänge des „g" – geometrisch zentriert wirkt er dadurch nach oben gerutscht. */
.brand-logo[b-ur26oegsde] {
    margin-top: 4px;
    max-height: 29px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    /* Auch der leere Platzhalter, der steht, solange das Branding noch nicht feststeht, haelt die Hoehe –
       sonst springt der Kopfbereich, sobald das Logo da ist. */
    min-height: 29px;
}

/* Sinnbild der Marke in der eingeklappten Leiste: quadratisch, so groß wie ein Menü-Symbol plus Rahmen.
   Normalfall ist die BREITE Leiste – dort steht der Schriftzug, das Sinnbild bleibt verborgen. */
.brand-icon[b-ur26oegsde] {
    width: 28px; height: 28px; object-fit: contain; display: none;
}

/* EIGENES Logo (Branding aktiv): darf den Kopfbereich ausfüllen. Das triagen-Logo ist ein schmaler
   Schriftzug und sitzt bei 29 px richtig; ein Firmenlogo ist meist quadratischer oder trägt einen
   Zusatz („Innovation, Knowledge & Achievement") und wirkt in derselben Höhe verloren. Die Höhe des
   Kopfbereichs gibt die Grenze vor - nach oben deckelt sie das Layout, nicht die Bilddatei. */
.brand-logo-custom[b-ur26oegsde] {
    max-height: 46px;
    max-width: 100%;
    object-fit: contain;
}

/* ---------- Inhaltsbereich: volle Höhe, beginnt ganz oben ----------
   Eine Spalte, damit die Hinweisbänder am Ende (.app-banners) unten am FENSTER stehen und nicht dort,
   wo der Inhalt zufällig aufhört. Auf einer kurzen Seite hingen sie sonst mitten in der Fläche – gut
   zu sehen, sobald ein zweites Band (etwa die Lizenzwarnung) wegfiel. */
.content-area[b-ur26oegsde] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    background-color: var(--tri-surface);
}

/* Schwebender Menü-Knopf nur auf schmalen Bildschirmen */
.mobile-menu-toggle[b-ur26oegsde] {
    display: none;
}

/* Collapsed (Desktop): schmale Leiste – nur Icons; Logo im Kopf ausblenden.
   ÜBERFAHREN KLAPPT VORÜBERGEHEND AUF: Die <aside> behält ihre 64 px im Fluss, der Innenbehälter legt
   sich auf 240 px darüber – dasselbe Verhalten wie der Ressourcen-Browser im Designer, und aus demselben
   Grund: Der Inhalt daneben darf dabei nicht springen. Jede Regel für den schmalen Zustand trägt deshalb
   `:not(:hover)`; sobald die Maus auf der Leiste steht, gilt wieder das Bild der breiten Leiste. */
@media (min-width: 769px) {
    .sidebar-collapsed .sidebar[b-ur26oegsde] {
        flex-basis: 64px;
        width: 64px;
    }

    .sidebar-collapsed .sidebar-panel[b-ur26oegsde] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 64px;
        transition: width 0.18s ease;
    }

    .sidebar-collapsed .sidebar:hover .sidebar-panel[b-ur26oegsde] {
        width: 240px;
        /* Derselbe Schatten wie der Flyout im Designer – nur zur anderen Seite. */
        box-shadow: 8px 0 22px rgba(0, 0, 0, 0.12);
    }

    /* Der Stapelwert gehört an die <aside>, NICHT an den Innenbehälter: `position: sticky` eröffnet einen
       eigenen Stapelkontext, in dem jeder Wert eines Kindes eingesperrt bleibt. Ohne diese Zeile schob sich
       der Inhalt rechts über die aufgeklappte Leiste, weil er im Markup später steht. */
    .sidebar-collapsed .sidebar:hover[b-ur26oegsde] {
        z-index: 1030;
    }

    .sidebar-collapsed .sidebar:not(:hover) .sidebar-header[b-ur26oegsde] {
        justify-content: center;
        padding: 0;
    }

    /* Eingeklappt: Das Sinnbild steht mittig und ALLEIN – der Umschalter daneben hätte in 64 px keinen
       Platz, und zwei Symbole nebeneinander wären in dieser Breite geraten. Der Klick auf das Sinnbild
       klappt wieder auf. */
    .sidebar-collapsed .sidebar:not(:hover) .sidebar-header .topbar-brand[b-ur26oegsde] {
        flex: 1 1 auto;
        justify-content: center;
    }

    .sidebar-collapsed .sidebar:not(:hover) .sidebar-header .topbar-toggle[b-ur26oegsde] {
        display: none;
    }

    /* Schmal das Sinnbild, überfahren der Schriftzug – beide stehen im Markup. */
    .sidebar-collapsed .sidebar:not(:hover) .brand-icon[b-ur26oegsde] {
        display: block;
    }

    .sidebar-collapsed .sidebar:not(:hover) .brand-logo[b-ur26oegsde] {
        display: none;
    }

    /* Der Fussbereich steht unter allem anderen – was dort wegfällt, verschiebt nichts mehr. */
    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .user-card-text,
    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .user-card-caret {
        display: none;
    }

    /* BESCHRIFTUNGEN verschwinden, ihre ZEILENHÖHE bleibt. `display: none` wäre das Naheliegende und war
       es auch – bis auffiel, dass die Zeilen damit unterschiedlich hoch werden: Wo das Symbol ein
       Schriftzeichen ist (Bootstrap-Glyphe), gibt dieses die Höhe vor; wo es ein Bild oder ein
       Tabler-Symbol ist („triagen KI", „Second Brain", „Ordner", „LLM-Provider"), gibt sie der TEXT vor.
       Ohne Text schrumpften genau diese vier Zeilen um 2–5 px, und beim Überfahren rutschte das ganze
       Menü darunter um bis zu 15 px nach unten – man landete auf einem anderen Punkt als dem, auf den
       man gezeigt hatte.

       Deshalb bleibt die Beschriftung als Flex-Element mit der Breite null stehen: waagerecht beansprucht
       sie nichts (`min-width: 0`, sonst erzwänge ein langes Wort seine Mindestbreite), senkrecht zählt
       ihre Zeilenbox weiter mit. */
    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .nav-link span:not(.nav-badge):not(.nav-icon-wrap) {
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        /* Ohne `nowrap` bräche der Text bei Breite null nach jedem Wort um und die Zeile würde HÖHER
           statt gleich hoch – „Agent Desk" wuchs so von 34 auf 53 px. */
        white-space: nowrap;
        overflow: hidden;
        visibility: hidden;
    }

    /* ABSCHNITTSZEILEN („Verwaltung", „Administration") bleiben eingeklappt STEHEN – als Trennstrich in
       genau derselben Höhe. Nähme man sie heraus, rückten alle Symbole darunter nach oben; beim Überfahren
       rutschte das Menü dann unter dem Zeiger weg, und man landete auf einem anderen Punkt als dem, auf den
       man gezeigt hat.

       `visibility: hidden` statt `display: none`, weil nur so die Höhe erhalten bleibt, OHNE sie irgendwo
       als Zahl zu wiederholen: Schriftgröße und Innenabstand der Zeile bestimmen sie in beiden Zuständen
       gleich. Der Strich hängt als ::after daran und holt sich die Sichtbarkeit ausdrücklich zurück. */
    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .nav-section {
        position: relative;
        visibility: hidden;
    }

    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .nav-section::after {
        content: "";
        visibility: visible;
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        top: 50%;
        height: 1px;
        background-color: var(--tri-border);
    }

    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .user-card {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .sidebar-nav {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .nav-link {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Benutzer-Popup bei eingeklappter Sidebar (64px) als Flyout nach rechts statt auf 64px gestaucht. */
    .sidebar-collapsed .sidebar:not(:hover)[b-ur26oegsde]  .user-menu {
        left: 0;
        right: auto;
        min-width: 230px;
    }
}

/* Mobil: Das Menü ist eine DECKE über der Seite, kein Streifen daneben. Es beginnt immer
   geschlossen; geöffnet wird es über die drei Striche oben links.

   Vorher hing das an `.sidebar-collapsed`, also an der Vorliebe für den Schreibtisch: Wer die
   Leiste dort breit stehen hatte, bekam auf dem Telefon beim Öffnen der Seite das ganze Menü
   über den Inhalt gelegt - und der Hamburger, der es schliessen sollte, lag darunter. */
@media (max-width: 768px) {
    .sidebar[b-ur26oegsde] {
        position: fixed;
        z-index: 1020;
        margin-left: -240px;
        transition: margin-left 0.2s ease-in-out;
    }

    .page.mobile-menu-open .sidebar[b-ur26oegsde] {
        margin-left: 0;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
    }

    /* Eingeklappt heisst auf dem Telefon nichts: Die Leiste ist entweder zu oder ganz da. */
    .page.sidebar-collapsed.mobile-menu-open .sidebar[b-ur26oegsde],
    .page.sidebar-collapsed.mobile-menu-open .sidebar-panel[b-ur26oegsde] {
        width: 240px;
        flex-basis: 240px;
    }

    .mobile-menu-backdrop[b-ur26oegsde] {
        position: fixed;
        inset: 0;
        z-index: 1019;
        background: rgba(0, 0, 0, 0.35);
    }

    /* Offen braucht es ihn nicht: Dann schliesst der Knopf im Kopf der Leiste oder ein Tipp daneben. */
    .page.mobile-menu-open .mobile-menu-toggle[b-ur26oegsde] { display: none; }

    .mobile-menu-toggle[b-ur26oegsde] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0.6rem;
        left: 0.6rem;
        z-index: 1019;
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 8px;
        background-color: var(--tri-ink);
        color: #fff;
        font-size: 1.3rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.sidebar-inner[b-m1wdn3vahv] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Nur die Nav scrollt; der Fuß (mit dem Benutzer-Popup) bleibt außerhalb des überlaufenden Bereichs,
   damit das Popup nicht abgeschnitten wird. */
.sidebar-nav[b-m1wdn3vahv] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}

.nav-section[b-m1wdn3vahv] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tri-faint);
    padding: 0.4rem 0.75rem 0.15rem;
}
.nav-section-toggle[b-m1wdn3vahv] {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;
}
.nav-section-toggle:hover[b-m1wdn3vahv] { color: var(--tri-muted-2); }
.nav-section-toggle > i[b-m1wdn3vahv] { font-size: 0.7rem; }

/* Shared link look (NavLink, button, a) – gilt für Navigation UND Fußbereich */
.sidebar-inner[b-m1wdn3vahv]  .nav-link,
.sidebar-inner .nav-link[b-m1wdn3vahv] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.65rem;
    padding: 0.28rem 0.75rem;
    margin-bottom: 0.01rem;
    border: none;
    background: none;
    text-align: left;
    color: var(--tri-muted-2);
    font-size: 0.92rem;
    font-weight: 400;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.12s ease-in-out, color 0.12s ease-in-out;
}

.sidebar-inner[b-m1wdn3vahv]  .nav-link:hover,
.sidebar-inner .nav-link:hover[b-m1wdn3vahv] {
    background-color: var(--tri-green-bg);
    color: var(--tri-green);
}

.sidebar-inner[b-m1wdn3vahv]  .nav-link.active {
    background-color: var(--tri-green-bg-active);
    color: var(--tri-green);
    font-weight: 600;
}

.nav-icon[b-m1wdn3vahv] {
    font-size: 1.05rem;
    width: 1.25rem;
    text-align: center;
}

/* Roter Zähler direkt am Glocken-Icon (oben rechts) */
.nav-icon-wrap[b-m1wdn3vahv] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-badge[b-m1wdn3vahv] {
    position: absolute;
    top: -7px;
    right: -9px;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    text-align: center;
}

.nav-chevron[b-m1wdn3vahv] {
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform 0.18s ease-in-out;
}

.nav-group-toggle.collapsed .nav-chevron[b-m1wdn3vahv] {
    transform: rotate(-90deg);
}

.nav-group[b-m1wdn3vahv] {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-in-out;
}

    .nav-group.show[b-m1wdn3vahv] {
        max-height: 500px;
    }

.sidebar-nav[b-m1wdn3vahv]  .nav-sub {
    padding-left: 2.6rem;
    font-size: 0.88rem;
}

/* Fußbereich: Einstellungen/Abmelden + Benutzerkarte */
.sidebar-foot[b-m1wdn3vahv] {
    margin-top: auto;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--tri-border);
}

.user-card[b-m1wdn3vahv] {
    position: relative;   /* Anker für den Rollen-Badge oben rechts */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.35rem;
    /* Linker Innenabstand kleiner als bei den Menüpunkten, damit die Avatar-Mitte auf der Icon-Spalte sitzt (#106831);
       die Karte selbst bleibt volle Breite, die Hover-Fläche also bündig zu den Menüpunkten. */
    padding: 0.5rem 0.75rem 0.5rem 0.19rem;
    border: none;
    background: none;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}

.user-card-role[b-m1wdn3vahv] {
    position: absolute;
    top: -0.35rem;
    right: 0.45rem;
    z-index: 3;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
}

.user-card-caret[b-m1wdn3vahv] {
    margin-left: auto;
    color: var(--tri-faint);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Benutzer-Menü (Popup über der Benutzerkarte) */
.user-menu-wrap[b-m1wdn3vahv] {
    position: relative;
}

.user-menu-backdrop[b-m1wdn3vahv] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.user-menu[b-m1wdn3vahv] {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    padding: 0.35rem;
}

.user-menu-item[b-m1wdn3vahv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: none;
    background: none;
    text-align: left;
    border-radius: 0.45rem;
    font-size: 0.9rem;
    color: #2b2f36;
}

.user-menu-item:hover[b-m1wdn3vahv] {
    background-color: #f1f3f5;
}

.user-menu-item.text-danger:hover[b-m1wdn3vahv] {
    background-color: #fdecee;
}

.user-menu-item .bi[b-m1wdn3vahv] {
    width: 1.15rem;
    text-align: center;
    color: #6b7280;
}

.user-menu-item.text-danger .bi[b-m1wdn3vahv] {
    color: inherit;
}

.user-menu-divider[b-m1wdn3vahv] {
    height: 1px;
    background: #eceef0;
    margin: 0.3rem 0.25rem;
}

.user-card:hover[b-m1wdn3vahv] {
    background-color: #f1f3f5;
}

.user-card-text[b-m1wdn3vahv] {
    min-width: 0;
    line-height: 1.15;
}

.user-card-name[b-m1wdn3vahv] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
}

.user-card-name-text[b-m1wdn3vahv] {
    /* Name fett, in hellerem Grau. */
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--tri-faint);
    line-height: 1.2;
    /* Bis zu zwei Zeilen (z. B. Vor- und Nachname) statt Abschneiden */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.user-card-mail[b-m1wdn3vahv] {
    display: block;
    font-size: 0.72rem;
    color: #8a9099;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer (alt) */
.sidebar-footer[b-m1wdn3vahv] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--tri-border);
    background-color: #fbfbfc;
}

    .sidebar-footer .bi-person-circle[b-m1wdn3vahv] {
        font-size: 1.75rem;
        color: var(--tri-faint);
    }

.sidebar-footer-text small[b-m1wdn3vahv] {
    display: block;
    line-height: 1;
    font-size: 0.7rem;
}

.sidebar-footer-text .fw-semibold[b-m1wdn3vahv] {
    font-size: 0.9rem;
}
/* /Pages/Admin/Reminders.razor.rz.scp.css */
/* Der Erinnerungs-Dialog braucht KONSTANTE Höhe (kein Sprung beim Registerwechsel), aber nicht die 780 px
   des Standardmaßes: Der Inhalt füllt sie nicht, und übrig bliebe eine große leere Fläche unter den Feldern.
   Deshalb hier ein knapperes Maß – und im Register „Auftrag" wächst das Anweisungsfeld in den freien Platz,
   statt ihn leer zu lassen. */
.rem-modal.user-modal-fixed[b-9by4ve3api] {
    /* 42rem: genau so viel, dass das Register „Erinnerung" ohne Scrollen hineinpasst (bei 34/38rem wurde die
       Notiz angeschnitten - ein halb sichtbares Feld sieht unfertig aus) und im Register „Auftrag" ein
       ordentliches Schreibfeld bleibt. */
    height: min(42rem, 90vh);
}

.rem-modal .user-modal-body[b-9by4ve3api] {
    display: flex;
    flex-direction: column;
}

/* Das Register, das den restlichen Platz füllen soll. */
.rem-tab-fill[b-9by4ve3api] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.rem-tab-fill textarea[b-9by4ve3api] {
    flex: 1 1 auto;
    min-height: 6rem;
    resize: none;   /* die Höhe ergibt sich aus dem Dialog; Ziehen würde ihn sprengen */
}
/* /Pages/AgentDesk.razor.rz.scp.css */

/* Die stillen Werkzeuge oben rechts (Bearbeiten, Kachel anlegen). Grau und ohne Fläche: Sie gehören
   nicht zum Inhalt der Seite, sondern zu ihrer Einrichtung – und die braucht man selten. */
.adk-werkzeuge[b-d8wl22rc3v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    /* Den Abstand nach oben gibt der Behälter `ohne-kopfband` - hier nur der nach unten. */
    margin: 0 0 .75rem;
}
.adk-werkzeug[b-d8wl22rc3v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--tri-faint);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.adk-werkzeug:hover[b-d8wl22rc3v] { background: rgba(0, 0, 0, .05); color: var(--tri-muted); }
.adk-werkzeug.is-on[b-d8wl22rc3v] { background: var(--tri-green-bg); color: var(--tri-green); }

/* IM EINRICHTEN stehen die Schaltflächen auf dem Hintergrund des Desks – und der kann alles sein:
   ein dunkles Foto, eine kräftige Farbe, ein weichgezeichnetes Bild. Ein Umriss-Knopf verschwindet
   darauf; genau das war zu sehen. Sie bekommen deshalb eine DECKENDE weisse Fläche mit schwarzer
   Schrift. „Fertig" bleibt grün: Es ist die Handlung, die man sucht, und Grün führt dorthin. */
.adk-werkzeuge .btn-outline-secondary[b-d8wl22rc3v] {
    background: #fff;
    border-color: #fff;
    color: var(--tri-ink);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}
.adk-werkzeuge .btn-outline-secondary:hover[b-d8wl22rc3v],
.adk-werkzeuge .btn-outline-secondary:focus[b-d8wl22rc3v] {
    background: var(--tri-surface);
    border-color: var(--tri-surface);
    color: var(--tri-ink);
}
/* /Pages/AgentRunsOverview.razor.rz.scp.css */
/* Die Filterzeile im Kopf der Übersicht.

   Zeitraum und Suche sind je EIN Bedienelement mit Rahmen; die Eingabefelder darin tragen keinen
   eigenen. Zwei Datumsfelder mit je eigenem Rahmen sahen aus wie zwei Angaben – es ist aber ein
   Zeitraum.

   Die Schriftstärken stammen aus der Vorlage: Werte (Datum) und die gewählte Stufe tragen 600, alles
   Begleitende 400. Eine Reihe aus sechs halbfetten Beschriftungen liest sich wie sechs Überschriften. */
.aro-zeitraum[b-2vd204q8v2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 42px;
    padding: 0 .85rem;
    border: 1px solid var(--tri-border);
    /* Derselbe Radius wie Karte und Tabelle – die Pillenform (999px) fiel aus der Reihe. */
    border-radius: .75rem;
    background: #fff;
}
.aro-zeitraum > i[b-2vd204q8v2] { color: var(--tri-faint); flex: none; }

.aro-zeitraum input[b-2vd204q8v2] {
    border: 0;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: .95rem;
    color: var(--tri-text);
}
.aro-zeitraum input:focus[b-2vd204q8v2] { outline: none; box-shadow: none; }

/* Breit genug für ein Datum – mehr zeigt nur Weiss. Das Kalendersymbol des Browsers entfällt: Die
   Gruppe trägt ihr eigenes, zweimal daneben wäre es doppelt. */
/* Halbfett und gedämpft: Die beiden Daten sind die Werte der Gruppe, sollen aber nicht so laut
   sein wie eine Überschrift – Gewicht trägt die Form, die Farbe nimmt es zurück. */
/* Genau so breit wie ein Datum: Die 6,8 rem liessen rechts Weiss stehen, und die beiden Daten
   standen dadurch weit auseinander. */
/* Siehe app.css (.aud-zeitraum): erstes Datum rechtsbuendig, zweites linksbuendig, damit der
   Gedankenstrich genau mittig zwischen beiden steht. */
.aro-zeitraum input[b-2vd204q8v2] { width: auto; min-width: 0; font-weight: 600; color: var(--tri-muted); text-align: right; }
.aro-zeitraum input ~ input[b-2vd204q8v2] { text-align: left; }
.aro-zeitraum input[b-2vd204q8v2]::-webkit-calendar-picker-indicator { display: none; }
.aro-bis[b-2vd204q8v2] { color: var(--tri-faint); font-size: .9rem; margin: 0 -.15rem; }

/* Das Stufenfeld: nur die GEWÄHLTE Stufe halbfett, die übrigen normal – wie in der Vorlage. Bewusst
   nur hier; dasselbe Feld auf anderen Seiten behält sein Gewicht, bis es dort auch gewünscht ist.
   Die Beschriftungen stehen eine Spur unter den Feldern daneben: Sie sind vier an der Zahl und
   sollen die Zeile nicht anführen. */
.rbh-pane .seg-switch[b-2vd204q8v2] { padding: .25rem; border-radius: .75rem; }
.rbh-pane .seg-switch-btn[b-2vd204q8v2] { font-weight: 400; font-size: .85rem; padding: .45rem .85rem; border-radius: .6rem; }
.rbh-pane .seg-switch-btn.is-on[b-2vd204q8v2] { font-weight: 600; }

/* „Filtern" auf dieselbe Höhe und Rundung wie die Felder daneben – und eine Spur kleiner gesetzt:
   Er ist die einzige gefüllte Fläche der Zeile und trägt schon dadurch genug Gewicht. */
.rbh-pane .btn-primary[b-2vd204q8v2] { height: 42px; border-radius: .75rem; padding-inline: 1.1rem; font-size: .9rem; font-weight: 600; }

/* Die Lauf-Tabelle: runde Ecken OHNE `overflow: hidden` an der Karte – jedes `overflow` an einem
   Vorfahren würde das Kleben der Kopfzeile aushebeln. Die Rundung tragen deshalb die vier
   Eck-Zellen selbst. */
/* Ohne eigenen Grund - siehe `.tabelle-klebend` in app.css: Hinter der klebenden Kopfzeile fuellte
   die weisse Karte deren runde Ecken wieder auf. Das Weiss kommt aus den Zellen. */
.aro-tabelle[b-2vd204q8v2] { border-radius: .75rem; background-color: transparent; }
.aro-tabelle thead th:first-child[b-2vd204q8v2] { border-top-left-radius: .75rem; }
.aro-tabelle thead th:last-child[b-2vd204q8v2] { border-top-right-radius: .75rem; }
.aro-tabelle tbody tr:last-child td:first-child[b-2vd204q8v2] { border-bottom-left-radius: .75rem; }
.aro-tabelle tbody tr:last-child td:last-child[b-2vd204q8v2] { border-bottom-right-radius: .75rem; }

/* Die Spaltenüberschriften bleiben sichtbar – direkt unter dem klebenden Kopf. Wie hoch der gerade
   ist, meldet js/sticky-banner.js als `--rbh-sticky-h`; beim Zuklappen rückt die Zeile mit nach oben.
   Eigener Hintergrund und z-index, damit die durchlaufenden Zeilen nicht durchscheinen. */
.aro-tabelle thead th[b-2vd204q8v2] {
    position: sticky;
    /* Bezugsrahmen fuer den Eck-Keil (siehe app.css). */
    isolation: isolate;
    /* Direkt unter dem Behälter des klebenden Kopfes – dessen unteres Polster IST der Abstand. */
    /* EIN Pixel darunter: Dort verdeckt das Band des klebenden Kopfes (z-Wert 30) die Kante,
       und zwischen beiden bleibt kein Spalt, durch den die Zeilen durchlaufen. */
    top: calc(var(--rbh-sticky-h, 0px) - 1px);
    z-index: 5;
    background: #fff;
    /* Die Trennlinie als INNERER Schatten: Bootstrap zeichnet sie über `border-collapse` an der
       Tabelle, und eine klebende Zelle nimmt diese Kante nicht mit – beim Scrollen verschwand sie. */
    box-shadow: inset 0 -1px 0 var(--tri-border);
}

/* Die Tabelle bleibt IM Fenster. Vorher bestimmten die Inhalte die Breite: ein langer Agentenname
   (bis 26 rem) schob Status, Laufzeit und Kosten über den rechten Fensterrand hinaus – und weil die
   Karte bewusst kein `overflow` trägt (sonst klebt die Kopfzeile nicht mehr), gab es dort auch
   keinen Rollbalken, der das aufgefangen hätte. Jetzt legt die Tabelle ihre Spalten fest
   (`table-layout: fixed`); der Agentenname bekommt, was übrig bleibt, und kürzt sich selbst. */
.aro-tabelle table[b-2vd204q8v2] { table-layout: fixed; width: 100%; }

/* Die Breiten der sieben festen Spalten in zwei Fällen – der Agent bekommt nie eine Angabe, er nimmt
   den Rest. Zwei Fälle deshalb, weil eine Tabelle mit festem Layout nur EINE Art von Mass verträgt:
   eine Mischung aus Anteil und Mass (`min(16%, 12rem)`) wertet der Browser als „keine Angabe" und
   verteilt alles gleichmässig – das sah aus wie acht gleich breite Spalten.

   ÜBLICHES FENSTER: feste Masse. Datum, Status oder Kosten brauchen auf einem breiten Bildschirm
   nicht mitzuwachsen – was sie nicht brauchen, geht an den Agentennamen, der als einziger wirklich
   lang werden kann. Die Schwelle liegt dort, wo die Karte die Summe dieser Masse (54,5 rem) trägt. */
@media (min-width: 1180px) {
    .aro-tabelle thead th:nth-child(1)[b-2vd204q8v2] { width: 10.5rem; }   /* Datum / Zeit */
    .aro-tabelle thead th:nth-child(2)[b-2vd204q8v2] { width: 7rem; }      /* Run */
    .aro-tabelle thead th:nth-child(4)[b-2vd204q8v2] { width: 11.5rem; }   /* Benutzer */
    .aro-tabelle thead th:nth-child(5)[b-2vd204q8v2] { width: 8.5rem; }    /* Status */
    .aro-tabelle thead th:nth-child(6)[b-2vd204q8v2] { width: 5.5rem; }    /* Laufzeit */
    .aro-tabelle thead th:nth-child(7)[b-2vd204q8v2] { width: 5rem; }      /* Kosten */
    .aro-tabelle thead th:nth-child(8)[b-2vd204q8v2] { width: 6.5rem; }    /* Wiederholen / Im Designer öffnen */
}

/* SCHMALES FENSTER: Anteile. Feste Masse addieren sich zu einer Mindestbreite, unter die eine
   Tabelle mit festem Layout nicht geht – genau so stand sie vorher über dem rechten Rand. Anteile
   ergeben immer 100 % der Karte, gleich wie schmal das Fenster ist. Dazu eine Spur kleinere Schrift
   und weniger Polster: Nur so bleiben Run-Nummer, Status und die beiden Schaltflächen lesbar; was
   dann noch nicht passt, kürzt der Agentenname, der dafür den Namen im Titel-Hinweis trägt. */
@media (max-width: 1179.98px) {
    .aro-tabelle table[b-2vd204q8v2] { font-size: .8rem; }
    .aro-tabelle thead th:nth-child(1)[b-2vd204q8v2] { width: 13%; }
    .aro-tabelle thead th:nth-child(2)[b-2vd204q8v2] { width: 12%; }
    .aro-tabelle thead th:nth-child(4)[b-2vd204q8v2] { width: 12%; }
    .aro-tabelle thead th:nth-child(5)[b-2vd204q8v2] { width: 15%; }
    .aro-tabelle thead th:nth-child(6)[b-2vd204q8v2] { width: 10.5%; }
    .aro-tabelle thead th:nth-child(7)[b-2vd204q8v2] { width: 8.5%; }
    .aro-tabelle thead th:nth-child(8)[b-2vd204q8v2] { width: 12.5%; }
}

/* Was dann noch nicht passt, wird gekürzt statt überzulaufen – die Auslassungspunkte tragen die
   Zellen selbst, der volle Text steht wie bisher im Titel-Hinweis. */
.aro-tabelle tbody td[b-2vd204q8v2] { overflow: hidden; text-overflow: ellipsis; }

/* Datum und Benutzername dürfen im engen Fenster UMBRECHEN statt gekürzt zu werden: zweizeilig
   liest sich besser als halbiert. Bei üblicher Fensterbreite passen beide weiter in eine Zeile.
   Das `!important` ist nötig, weil beide Zellen im Markup `text-nowrap` tragen und Bootstrap diese
   Klasse selbst mit `!important` setzt. */
.aro-tabelle tbody td:nth-child(1)[b-2vd204q8v2],
.aro-tabelle tbody td:nth-child(4)[b-2vd204q8v2] { white-space: normal !important; }

/* Im schmalen Fenster rücken die Spalten enger zusammen: Das Polster ist dort der einzige Platz,
   den man noch verschenken kann, ohne eine Angabe zu verlieren. Das `!important` gilt dem Polster
   aus den Hilfsklassen `ps-3`/`pe-3` am Zeilenanfang und -ende, das Bootstrap selbst so setzt –
   ohne das blieben in der letzten Spalte 32 px Polster und die zweite Schaltfläche fiel heraus. */
@media (max-width: 1179.98px) {
    .aro-tabelle thead th[b-2vd204q8v2],
    .aro-tabelle tbody td[b-2vd204q8v2] { padding-left: .4rem !important; padding-right: .4rem !important; }
    .aro-tabelle thead th:first-child[b-2vd204q8v2],
    .aro-tabelle tbody td:first-child[b-2vd204q8v2] { padding-left: .6rem !important; }
    .aro-tabelle thead th:last-child[b-2vd204q8v2],
    .aro-tabelle tbody td:last-child[b-2vd204q8v2] { padding-right: .6rem !important; }
}

/* Der Agentenname füllt genau seine Spalte. Dafür müssen die Flex-Kinder schrumpfen dürfen –
   ohne `min-width: 0` hält ein Flex-Element seine Inhaltsbreite und schiebt die Spalte wieder auf. */
.aro-tabelle .run-agent-cell div[b-2vd204q8v2] { min-width: 0; }
/* /Pages/Agents.razor.rz.scp.css */
/* Name-Spalte ist die flexible Spalte der Liste: nimmt die Restbreite ein, sodass die
   Beschreibung dynamisch bis zum Spaltenrand läuft und erst dort mit „…" abgeschnitten wird
   (statt fix bei 320px). Die max-width:0 + width:100%-Kombination ist der Standard-Trick,
   damit text-overflow:ellipsis innerhalb einer Tabellenzelle greift. */
.agentlist-name-cell[b-xzjat2t5zm] {
    max-width: 0;
    width: 100%;
}

/* Drag & Drop in der Ordneransicht: gezogene Agentenzeile abblenden. */
.agentlist-dragging[b-xzjat2t5zm] {
    opacity: 0.5;
}

/* LLM-Provider: breitere Spalte (wird nicht von der flexiblen Name-Spalte erdrückt) und
   höchstens 2 Zeilen – längere Namen werden mit „…" abgekürzt. */
.agentlist-provider-cell[b-xzjat2t5zm] {
    min-width: 13rem;
}

.agentlist-provider-clamp[b-xzjat2t5zm] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Filterzeile im Anbau des Banners (2.0.636) ----
   Dieselbe Bauweise wie auf der Lauf-Übersicht: Jede Gruppe ist EIN Bedienelement mit Rahmen und
   42 px hoch, die Eingabe darin trägt keinen eigenen. Die Werte stehen hier und nicht in app.css,
   weil es die Filterzeile DIESER Seite ist. */
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: .95rem;
    color: var(--tri-text);[b-xzjat2t5zm]
}

/* Das Stufenfeld der Agentenart: nur die gewählte Stufe halbfett. */
.rbh-pane .seg-switch[b-xzjat2t5zm] { padding: .25rem; border-radius: .75rem; }
.rbh-pane .seg-switch-btn[b-xzjat2t5zm] { font-weight: 400; font-size: .85rem; padding: .45rem .85rem; border-radius: .6rem; }
.rbh-pane .seg-switch-btn.is-on[b-xzjat2t5zm] { font-weight: 600; }

/* „Archiviert", „Tags anzeigen", „Tags": Schalter, keine Handlungen – deshalb weiss mit Kante statt
   gefüllt. Eingeschaltet kippt die Fläche ins Hausgrün, damit man den Zustand von weitem sieht. */
.ag-chip[b-xzjat2t5zm] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 42px;
    padding: 0 .95rem;
    border: 1px solid var(--tri-border);
    border-radius: .75rem;
    background: #fff;
    color: var(--tri-text);
    font-size: .9rem;
    white-space: nowrap;
}
.ag-chip > i[b-xzjat2t5zm] { color: var(--tri-muted); }
.ag-chip:hover[b-xzjat2t5zm] { background: var(--tri-surface); }
.ag-chip.is-on[b-xzjat2t5zm] {
    border-color: var(--tri-green);
    background: var(--tri-green-bg);
    color: var(--tri-green);
}
.ag-chip.is-on > i[b-xzjat2t5zm] { color: var(--tri-green); }

/* ---- Die Agentenliste: Kopfzeile bleibt sichtbar ----
   Dieselbe Lösung wie in der Lauf-Übersicht. Wie hoch der klebende Seitenkopf gerade ist, meldet
   js/sticky-banner.js als `--rbh-sticky-h`; beim Zuklappen des Anbaus rückt die Zeile mit nach oben.
   Eigener Hintergrund und z-Wert, damit die durchlaufenden Zeilen nicht durchscheinen. */
/* Ohne eigenen Grund - siehe `.tabelle-klebend` in app.css: Hinter der klebenden Kopfzeile fuellte
   die weisse Karte deren runde Ecken wieder auf. Das Weiss kommt aus den Zellen. */
.agents-tabelle[b-xzjat2t5zm] { border-radius: .75rem; background-color: transparent; }
.agents-table-wrap thead th[b-xzjat2t5zm] {
    position: sticky;
    /* EIN Pixel darunter: Dort verdeckt das Band des klebenden Kopfes (z-Wert 30) die Kante,
       und zwischen beiden bleibt kein Spalt, durch den die Zeilen durchlaufen. */
    top: calc(var(--rbh-sticky-h, 0px) - 1px);
    z-index: 5;
    background: #fff;
    /* Die Trennlinie als INNERER Schatten: Bootstrap zeichnet sie über `border-collapse` an der
       Tabelle, und eine klebende Zelle nimmt diese Kante nicht mit – beim Scrollen verschwand sie. */
    box-shadow: inset 0 -1px 0 var(--tri-border);
}
.agents-table-wrap thead th:first-child[b-xzjat2t5zm] { border-top-left-radius: .75rem; }
.agents-table-wrap thead th:last-child[b-xzjat2t5zm] { border-top-right-radius: .75rem; }
.agents-table-wrap tbody tr:last-child td:first-child[b-xzjat2t5zm] { border-bottom-left-radius: .75rem; }
.agents-table-wrap tbody tr:last-child td:last-child[b-xzjat2t5zm] { border-bottom-right-radius: .75rem; }
/* /Pages/AgentSecurity.razor.rz.scp.css */
.sec-hero-icon[b-cyvq1gf816] {
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--tri-green), var(--tri-green-hover));
    box-shadow: 0 6px 16px rgba(var(--tri-green-rgb), .25);
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ---- Dashboard: modernes Mosaik-Layout ---- */

/* Kopfzeile läuft jetzt über die zentrale <PageHeader>-Komponente; hier nur noch die
   dashboard-spezifischen Aktions-Elemente (Schalter + Aktualisieren-Button). */
.dash-switch[b-1oqpnytxqf] { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: #4b5563; margin: 0; cursor: pointer; white-space: nowrap; }
.dash-switch input[b-1oqpnytxqf] { width: 1rem; height: 1rem; cursor: pointer; }

/* ---- Raster: vier Spalten, feste Rasterhöhe, dichte Packung (möglichst keine Lücken) ---- */
.dash-list[b-1oqpnytxqf] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--dash-row, 150px); grid-auto-flow: row dense; gap: 1rem;
}
@media (max-width: 1200px) { .dash-list[b-1oqpnytxqf] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .dash-list[b-1oqpnytxqf] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .dash-list[b-1oqpnytxqf] { grid-template-columns: 1fr; } }

/* ---- Karte ---- */
.dash-card[b-1oqpnytxqf] {
    display: flex; flex-direction: column; min-height: 0; position: relative; overflow: hidden;
    background: #fff; border: 1.5px solid #c2c8d0; border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(16,24,40,.12), 0 6px 16px rgba(16,24,40,.14);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.dash-card:hover[b-1oqpnytxqf] { box-shadow: 0 4px 12px rgba(16,24,40,.16), 0 18px 42px rgba(16,24,40,.20); }
.dash-card.resizing[b-1oqpnytxqf] { user-select: none; box-shadow: 0 0 0 2px var(--tri-green); }
/* Verschieben: gezogene Karte ausgeblendet; Platzhalter-Rechteck markiert den neuen Platz (folgt dem Ziehen). */
.dash-card.dash-dragging[b-1oqpnytxqf] { opacity: .4; }
.dash-placeholder[b-1oqpnytxqf] {
    border: 2px dashed var(--tri-green); border-radius: 1rem;
    background: rgba(var(--tri-green-rgb),.08); min-height: 0;
}
.dash-card.is-hidden[b-1oqpnytxqf] { opacity: .55; }
.dash-card.is-hidden:hover[b-1oqpnytxqf] { opacity: .8; }

/* Kopf: feste Höhe, trägt die Hintergrundfarbe (einzeiliger Titel + Wichtigkeits-Icon); zugleich Ziehgriff.
   Graue Linie grenzt ihn vom weißen Rest ab. */
.dash-card-head[b-1oqpnytxqf] {
    position: relative;
    flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: .15rem;
    min-height: 2.6rem; padding: .45rem .9rem;
    background: #f3f4f6; cursor: grab; border-bottom: 1px solid #d6dade; user-select: none;
}
.dash-card-head:active[b-1oqpnytxqf] { cursor: grabbing; }
.dash-card-title[b-1oqpnytxqf] {
    flex: 1 1 auto; min-width: 0; font-size: .95rem; font-weight: 650; color: #374151; margin: 0; line-height: 1.3;
    letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Laufkosten klein + grau oben rechts; Titel macht per :has Platz, damit nichts überlappt. */
.dash-cost[b-1oqpnytxqf] {
    position: absolute; top: .42rem; right: .7rem; pointer-events: none;
    font-size: .66rem; color: #9ca3af; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.dash-card-head:has(.dash-cost) .dash-card-title[b-1oqpnytxqf] { padding-right: 2.7rem; }
/* Wichtigkeit: Kartenkopf einfärben – high = hellgelb, urgent = hellrot (Agent-Hintergrundfarbe wird ignoriert). */
.dash-card.imp-high .dash-card-head[b-1oqpnytxqf], .dash-zoom-head.imp-high[b-1oqpnytxqf] { background: #fef3c7; }
.dash-card.imp-urgent .dash-card-head[b-1oqpnytxqf], .dash-zoom-head.imp-urgent[b-1oqpnytxqf] { background: #fee2e2; }
/* Wichtigkeits-Text im Zoom-Popup (normaler Inline-Span, damit er mit den übrigen Texten der Zeile fluchtet). */
.dash-imp-text[b-1oqpnytxqf] { color: #dc2626; font-weight: 600; }

/* Körper: weiß, Markdown-Vorschau in Grau, scrollbar. */
.dash-card-body[b-1oqpnytxqf] {
    flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; padding: .6rem .9rem;
    /* Unten leicht ausfaden (wie im Designer), damit abgeschnittener Text sanft endet. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent 100%);
}
/* Deutlich kleinere Vorschau in Grau. ::deep, da der Markdown-HTML aus der Kind-Komponente stammt. */
.dash-card-summary[b-1oqpnytxqf] {
    font-size: .72rem; line-height: 1.3; color: #4b5563; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-card-preview[b-1oqpnytxqf] { font-size: .62rem; line-height: 1.3; color: #6b7280; }
/* Innerer .markdown-body (aus der Kind-Komponente) trägt global font-size:.95rem – hier explizit verkleinern. */
.dash-card-preview[b-1oqpnytxqf]  .markdown-body { font-size: .62rem; line-height: 1.3; }
.dash-card-preview[b-1oqpnytxqf]  :is(h1,h2,h3,h4,h5,h6) { font-size: .68rem; font-weight: 600; color: var(--tri-green); margin: .1rem 0 .25rem; }
.dash-card-preview[b-1oqpnytxqf]  p { margin: 0 0 .35rem; }
.dash-card-preview[b-1oqpnytxqf]  ul, .dash-card-preview[b-1oqpnytxqf]  ol { margin: 0 0 .35rem; padding-left: 1rem; }
.dash-card-preview[b-1oqpnytxqf]  table { font-size: .66rem; }
.dash-card-preview[b-1oqpnytxqf]  :is(pre,code) { font-size: .66rem; }
.dash-card-preview[b-1oqpnytxqf]  :is(p,li,td,th) { color: #6b7280; }

/* Fußzeile: weiß, Datum + Aktionen. */
.dash-card-foot[b-1oqpnytxqf] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .7rem .4rem 1rem; background: #fff; }
.dash-date[b-1oqpnytxqf] { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: #6b7280; }
.dash-date > i[b-1oqpnytxqf] { opacity: .8; }
.dash-clip[b-1oqpnytxqf] { display: inline-flex; align-items: center; gap: .15rem; margin-left: .35rem; color: #6b7280; }
.dash-card-actions[b-1oqpnytxqf] { display: flex; gap: .3rem; flex: 0 0 auto; align-items: center; }
.dash-ibtn[b-1oqpnytxqf] {
    width: 1.85rem; height: 1.85rem; border-radius: .5rem; border: 1px solid #e5e7eb; background: #fff;
    color: #6b7280; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
    transition: background .15s, color .15s, border-color .15s;
}
.dash-ibtn:hover[b-1oqpnytxqf] { background: #f3f4f6; color: #111827; }
.dash-ibtn-del:hover[b-1oqpnytxqf] { background: #fee2e2; color: var(--tri-red); border-color: var(--tri-red); }

/* Größen-Griffe: hellgrau gefüllte untere Ecken (füllen die 1rem-Kartenrundung exakt; Karte clippt rund). */
.dash-resize[b-1oqpnytxqf] { position: absolute; bottom: 0; width: .7rem; height: .7rem; touch-action: none; transition: background .15s; }
.dash-resize-r[b-1oqpnytxqf] { right: 0; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, #dde1e6 50%); }
.dash-resize-l[b-1oqpnytxqf] { left: 0; cursor: nesw-resize; background: linear-gradient(225deg, transparent 50%, #dde1e6 50%); }
.dash-resize-r:hover[b-1oqpnytxqf] { background: linear-gradient(135deg, transparent 50%, #aab0b8 50%); }
.dash-resize-l:hover[b-1oqpnytxqf] { background: linear-gradient(225deg, transparent 50%, #aab0b8 50%); }

/* Agentennummer im Zoom-Kopf: dunkelgrau, ohne Hintergrund. Run als graues Badge (Link). */
.dash-num[b-1oqpnytxqf] { color: #374151; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-run-badge[b-1oqpnytxqf] {
    display: inline-flex; align-items: center; background: #e9ecef; color: #4b5563;
    border-radius: 999px; padding: .05rem .55rem; font-size: .72rem; font-weight: 600;
}
.dash-run-badge:hover[b-1oqpnytxqf] { background: #dde1e6; color: #1f2937; }

/* ---- Zoom-Popup: nahezu vollflächig, kompakter Kopf, Body füllt + scrollt ---- */
.dash-zoom-dialog[b-1oqpnytxqf] { max-width: 96vw; width: 96vw; }
.dash-zoom-dialog .user-modal[b-1oqpnytxqf] { display: flex; flex-direction: column; height: 94vh; }
.dash-zoom-head[b-1oqpnytxqf] { flex: 0 0 auto; padding: .7rem 1.25rem !important; align-items: center; }
.dash-zoom-body[b-1oqpnytxqf] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* ---- Zoom-Popup: Anhänge ---- */
.dash-att-title[b-1oqpnytxqf] { font-weight: 600; font-size: .9rem; color: #374151; margin-bottom: .5rem; }
.dash-att-list[b-1oqpnytxqf] { display: flex; flex-direction: column; gap: .4rem; }
.dash-att[b-1oqpnytxqf] { display: flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border: 1px solid #eceef1; border-radius: .55rem; }
.dash-att-name[b-1oqpnytxqf] { font-size: .85rem; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Leerzustand ---- */
.dash-empty[b-1oqpnytxqf] {
    display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center;
    padding: 4rem 1.5rem; color: #6b7280; background: #fff; border: 1px dashed #d8dde3; border-radius: 1rem;
}
.dash-empty > i[b-1oqpnytxqf] { font-size: 2.4rem; color: #b6c0cc; margin-bottom: .3rem; }
.dash-empty > div[b-1oqpnytxqf] { font-weight: 600; color: #374151; }
.dash-empty > span[b-1oqpnytxqf] { font-size: .85rem; }

/* Der stille Schalter oben rechts. Grau und ohne Fläche: Er gehört nicht zum Inhalt der Seite,
   sondern zu ihrer Ansicht. */
.dash-werkzeuge[b-1oqpnytxqf] {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 .75rem;
}
.dash-werkzeuge .dash-switch[b-1oqpnytxqf] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--tri-muted);
    font-size: .85rem;
    cursor: pointer;
}
/* /Pages/WorkflowDesigner.razor.rz.scp.css */
.wfd[b-dssmgoa64y] {
    display: flex;
    flex-direction: column;
    /* KEINE geratene Fensterhoehe mehr. `height: 100vh` am Kind hiess: Fensterhoehe PLUS das
       Polster des Inhaltsbereichs - die Seite war damit um dieses Polster rollbar, und jeder
       Rad-Schub, der nicht in einem Rollbereich landete, schob den ganzen Bildschirm. Der
       Designer haengt jetzt in der Haus-Kette fuer Voll-Hoehe (`page-fill`): Der Inhaltsbereich
       ist die Fensterhoehe, der Designer nimmt den Rest. */
    background: #fff;
    /* Bezugsrahmen für den schwebenden Kopf (siehe unten). */
    position: relative;
    /* Die globale Seiten-Kopfband-Regel (.page-content > :first-child) greift hier,
       weil .wfd das erste Kind ist – sie zentriert und verschmälert den Inhalt.
       Diese Eigenschaften neutralisieren das, damit der Designer die volle Breite nutzt. */
    align-items: stretch !important;
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden;          /* nur der Canvas scrollt – Kopf/Fuß bleiben fix */
    border-bottom: none !important;
    margin: 0 -1rem -1.5rem -1rem !important;   /* unterer Negativrand absorbiert das pb-4 des Inhaltsbereichs */
    padding: 0 !important;
}
@media (min-width: 992px) {
    .wfd[b-dssmgoa64y] { margin: 0 -1.5rem -1.5rem -1.5rem !important; }
}

/* Kopfleiste */
.wfd-head[b-dssmgoa64y] {
    /* Exakt wie das Standard-Kopfband (.page-content > :first-child): 64px Mindesthöhe
       und die grüne 2px-Linie unten – damit Höhe und Trennlinie bündig mit dem Logo-Bereich liegen. */
    flex: 0 0 auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    /* Grau und 1 px wie das Standard-Kopfband – die Kante fluchtet mit der Sidebar. */
    border-bottom: 1px solid var(--tri-border);
}
.wfd-brand[b-dssmgoa64y] { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.wfd-brand > i[b-dssmgoa64y] { font-size: 1.7rem; color: var(--tri-green); flex: 0 0 auto; }
.wfd-brand-kicker[b-dssmgoa64y] { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tri-faint); }
/* Titel immer einzeilig; zu lange Namen mit „…" kürzen (voller Name als title-Tooltip). */
.wfd-brand-title[b-dssmgoa64y] { font-size: 1.6rem; font-weight: 700; color: var(--tri-green); line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfd-brand-id[b-dssmgoa64y] { color: var(--tri-text); }
.wfd-badge[b-dssmgoa64y] { font-size: .72rem; font-weight: 600; color: var(--tri-muted); background: var(--tri-surface); border-radius: 1rem; padding: .15rem .6rem; }
.wfd-head-right[b-dssmgoa64y] { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex: 0 0 auto; }
.wfd-head-actions[b-dssmgoa64y] { display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap; }
.wfd-head-actions > *[b-dssmgoa64y] { flex: 0 0 auto; }
.wfd-head-actions .btn[b-dssmgoa64y] { white-space: nowrap; }
.wfd-head-row2[b-dssmgoa64y] { display: flex; justify-content: flex-end; }
.wfd-runchip[b-dssmgoa64y] {
    display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; color: var(--tri-green);
    background: var(--tri-surface); border: 1px solid var(--tri-border); border-radius: 1rem; padding: .25rem .7rem;
}
.wfd-run-status[b-dssmgoa64y] { margin-left: auto; flex: 0 0 auto; font-size: .72rem; font-weight: 700; border-radius: 1rem; padding: .15rem .6rem; }
.wfd-run-status.run[b-dssmgoa64y] { color: var(--tri-green); background: rgba(var(--tri-green-rgb),.12); }
.wfd-run-status.wait[b-dssmgoa64y] { color: #c98a1a; background: rgba(201,138,26,.14); }
.wfd-run-status.err[b-dssmgoa64y] { color: var(--tri-red); background: rgba(192,57,43,.12); }
.wfd-run-status.done[b-dssmgoa64y] { color: var(--tri-muted); background: var(--tri-surface); }
.wfd-chat[b-dssmgoa64y] { margin-bottom: .6rem; border-radius: .6rem; padding: .55rem .7rem; border: 1px solid var(--tri-border); }
.wfd-chat.to[b-dssmgoa64y] { background: rgba(var(--tri-green-rgb),.07); border-color: rgba(var(--tri-green-rgb),.25); }
.wfd-chat.from[b-dssmgoa64y] { background: var(--tri-surface); }
.wfd-chat-role[b-dssmgoa64y] { font-size: .72rem; font-weight: 700; color: var(--tri-faint); margin-bottom: .25rem; }
.wfd-chat-text[b-dssmgoa64y] { font-size: .9rem; color: var(--tri-text); word-break: break-word; }
.wfd-chat-text :last-child[b-dssmgoa64y] { margin-bottom: 0; }
/* Live mitlaufender Generierungstext (Denkprozess/Antwort) im Lauf-Dialog. */
.wfd-live-text[b-dssmgoa64y] { white-space: pre-wrap; font-size: .8rem; line-height: 1.35; color: var(--tri-text, #33373d);
    background: #fff; border: 1px solid var(--tri-border); border-radius: .5rem; padding: .5rem .65rem;
    max-height: 16rem; overflow-y: auto; }
.wfd-root-select[b-dssmgoa64y] { max-width: 18rem; }

.wfd-body[b-dssmgoa64y] { display: flex; flex: 1 1 auto; min-height: 0; position: relative; }
/* Unten angedockt: Canvas oben, Leiste darunter. */
.wfd-body-bottom[b-dssmgoa64y] { flex-direction: column; }
.wfd-tree-bottom[b-dssmgoa64y] { border-left: 0; border-top: 1px solid var(--tri-border); width: auto !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .12); }
/* Ziehgriff an der Oberkante, wenn unten angedockt. */
.wfd-tree-resize-v[b-dssmgoa64y] {
    position: absolute; left: 0; top: -3px; height: 7px; width: 100%;
    cursor: row-resize; z-index: 6;
}
.wfd-tree-resize-v:hover[b-dssmgoa64y] { background: var(--tri-green); opacity: .35; }
/* Unten ist Platz in der Breite: der Assistent nutzt ihn fuer zwei Spalten. */
.wfd-tree-bottom .aip[b-dssmgoa64y] { max-width: none; }
.wfd-tree-bottom .wfd-tree-tabs .nav-link[b-dssmgoa64y] { font-size: .84rem; }

/* Hinzufügen-Leiste unten (horizontal) */
.wfd-toolbar[b-dssmgoa64y] { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-top: 1px solid var(--tri-border); background: #fff; overflow-x: auto; }
.wfd-toolbar-label[b-dssmgoa64y] { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tri-faint); flex: 0 0 auto; }
.wfd-tool-block[b-dssmgoa64y] { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--tri-border); border-radius: .6rem; background: #fff; padding: .35rem .6rem; cursor: pointer; flex: 0 0 auto; }
.wfd-tool-block:hover[b-dssmgoa64y] { border-color: var(--tri-green); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wfd-tool-block-text[b-dssmgoa64y] { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.wfd-toolbar-stats[b-dssmgoa64y] { margin-left: auto; display: flex; gap: 1.1rem; font-size: .78rem; color: var(--tri-muted); white-space: nowrap; }
.wfd-toolbar-stats b[b-dssmgoa64y] { color: var(--tri-green); }

/* Palette */
.wfd-palette[b-dssmgoa64y] {
    width: 250px; flex: 0 0 250px;
    border-right: 1px solid var(--tri-border);
    padding: 1rem; overflow-y: auto;
    display: flex; flex-direction: column; gap: .6rem;
}
.wfd-palette-kicker[b-dssmgoa64y] { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tri-faint); }
.wfd-palette-title[b-dssmgoa64y] { font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; }
.wfd-block[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .6rem;
    border: 1px solid var(--tri-border); border-radius: .7rem; padding: .6rem .7rem; background: #fff;
}
.wfd-block-icon[b-dssmgoa64y] { width: 2rem; height: 2rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; background: var(--tri-surface); }
.wfd-block-icon.trg[b-dssmgoa64y] { color: #2f7dd6; } .wfd-block-icon.agt[b-dssmgoa64y] { color: var(--tri-green); }
.wfd-block-icon.dec[b-dssmgoa64y] { color: #c98a1a; } .wfd-block-icon.res[b-dssmgoa64y] { color: var(--tri-green); }
.wfd-block-name[b-dssmgoa64y] { font-weight: 700; font-size: .9rem; }
.wfd-block-desc[b-dssmgoa64y] { font-size: .76rem; color: var(--tri-muted); line-height: 1.25; }
.wfd-block-add[b-dssmgoa64y] { color: var(--tri-faint); }
.wfd-stats[b-dssmgoa64y] { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; padding-top: 1rem; }
.wfd-stat-num[b-dssmgoa64y] { font-size: 1.4rem; font-weight: 700; color: var(--tri-green); display: block; line-height: 1; }
.wfd-stat-lbl[b-dssmgoa64y] { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tri-faint); }

/* Meldung unter dem schwebenden Kopf - seitlich bündig mit ihm (1,5 rem wie `.rbh-sticky`). */
.wfd-topalert[b-dssmgoa64y] { margin: calc(var(--rbh-float-h, 6rem) + .75rem) 1.5rem 0; }

/* Canvas */
.wfd-canvas-wrap[b-dssmgoa64y] { flex: 1 1 auto; min-width: 0; overflow: auto; position: relative;
    background-color: #fafbfc;
    background-image: radial-gradient(#dfe3e8 1px, transparent 1px);
    background-size: 22px 22px;
    /* Platz fuer den SCHWEBENDEN Kopf. Das Zeichenblatt ist ein Rollbereich, und ganz oben
       angekommen laesst er sich nicht weiter nach unten schieben - was dort liegt, blieb also
       dauerhaft hinter dem Banner verborgen. Das Polster rueckt den Blattanfang unter den Kopf;
       wie hoch der gerade ist, meldet js/sticky-banner.js als `--rbh-float-h`. */
    padding-top: calc(var(--rbh-float-h, 6rem) + .75rem);
    /* Das Rollen bleibt IM Blatt. Ohne das reicht ein Mausrad-Schub, der am Ende des Blattes
       ankommt, an die Seite dahinter weiter - und der ganze Bildschirm wandert mit (auf macOS
       als Gummiband sichtbar). Gescrollt werden soll hier nur der Arbeitsbereich. */
    overscroll-behavior: contain; }

/* Hinweis, wenn der Designer ohne Agent/Run geöffnet wird – mittig (horizontal & vertikal), groß.
   Farbe war einmal #c2c7cd (1,70:1 auf Weiß – praktisch unsichtbar), dann --muted (4,70:1 – zu
   kräftig für einen Platzhalter). Jetzt #9ba3a1: rund 2,9:1, auf Wunsch bewusst zurückhaltend und
   in derselben Helligkeit wie der blasse grüne Link, damit beide Teile eine Zeile bilden.
   pointer-events bleibt aus, damit die Fläche das Ziehen auf die Leinwand nicht abfängt; der Link
   darin ist ausdrücklich wieder anklickbar. */
.wfd-empty-hint[b-dssmgoa64y] {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
    font-size: 1.7rem; font-weight: 500; color: #9ba3a1;
    pointer-events: none; user-select: none;
}
.wfd-empty-hint p[b-dssmgoa64y] { margin: 0; max-width: 22em; line-height: 1.4; }
/* Der Link steht in einem grossen, blassen Hinweis - kraeftiges Gruen mit Unterstreichung
   sprang daraus heraus wie eine Warnung. Blasses Graugruen, ohne Linie; erst beim Zeigen deutlich. */
.wfd-empty-hint a[b-dssmgoa64y] {
    pointer-events: auto; user-select: auto;
    color: #8fae95; text-decoration: none;
}
.wfd-empty-hint a:hover[b-dssmgoa64y] { color: var(--tri-green); }
/* Rechtes Panel: Ordner-/Agentenbaum */
.wfd-tree[b-dssmgoa64y] {
    /* Kein eigener Trennstrich mehr: Die Leiste ist eine Fläche mit Rahmen rundum, kein Streifen,
       der an der Zeichenfläche klebt. */
    background: transparent;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Angeheftet: fest angedockt, nimmt Layout-Breite ein (Breite per Maus ziehbar – inline style überschreibt) */
/* Angeheftet bekommt die Leiste denselben Schatten wie im Flyout - sie soll sich in beiden
   Zustaenden gleich klar vom Zeichenblatt abheben. */
/* Auch angeheftet schwebt das Panel – siehe Begründung an der schmalen Leiste. Die Breite kommt
   weiterhin als Inline-Stil aus dem Markup (ziehbar). */
.wfd-tree-docked[b-dssmgoa64y] { position: absolute;
    top: calc(var(--rbh-float-h, 6rem) + .75rem);
    right: 1.5rem;
    bottom: 1.5rem;
    border: 1px solid var(--tri-border); border-radius: 1rem; overflow: hidden;
    /* ANGEHEFTET deckend: Dann ist es kein Ueberblendeffekt mehr, sondern eine feste Spalte -
       und in einer festen Spalte arbeitet man laenger als einen Wimpernschlag. */
    background: #fff;
    box-shadow: 0 .75rem 2.2rem rgba(16, 24, 40, .22); z-index: 40; }
/* Ziehgriff an der linken Kante des angedockten Panels */
.wfd-tree-resize[b-dssmgoa64y] {
    position: absolute; top: 0; left: -3px; width: 7px; height: 100%;
    cursor: col-resize; z-index: 6;
}
.wfd-tree-resize:hover[b-dssmgoa64y] { background: var(--tri-green); opacity: .35; }
/* Vollflächiges Overlay während des Ziehens – fängt alle Mausbewegungen (auch über dem Canvas) */
.wfd-resize-overlay[b-dssmgoa64y] { position: fixed; inset: 0; z-index: 1000; cursor: col-resize; }

/* Agent-Node als Drop-Ziel beim Ziehen eines Buckets: statischer Glow (wie laufende Agenten, aber ohne Pulsieren).
   grün = Drop erlaubt, rot = Bucket bereits zugeordnet. */
.wfd-node.wfd-node-bucketdrop-ok[b-dssmgoa64y] {
    border-color: var(--tri-green);
    box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 3px rgba(var(--tri-green-rgb), .65), 0 0 22px 6px rgba(var(--tri-green-rgb), .55);
}
.wfd-node.wfd-node-bucketdrop-invalid[b-dssmgoa64y] {
    border-color: var(--tri-red);
    box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 3px rgba(220, 53, 69, .65), 0 0 22px 6px rgba(220, 53, 69, .55);
}

/* Schmale Leiste mit gedrehtem Text; beim Hover klappt das Flyout aus */
/* Sie beginnt UNTER dem schwebenden Kopf und steht wie er als eigene Fläche auf dem Zeichenblatt:
   runde Ecken, feine Kante, leicht durchscheinend. Wie weit der Kopf reicht, meldet
   js/sticky-banner.js als `--rbh-float-h`. */
.wfd-tree-rail[b-dssmgoa64y] {
    /* ABSOLUT, nicht als Spalte im Fluss: Sie schwebt über dem Zeichenblatt wie der Kopf. Als
       Flex-Spalte nahm sie dem Zeichenblatt ihre Breite weg – rechts neben ihr lag ein toter
       Streifen, und die Knoten endeten an ihrer Kante statt darunter weiterzulaufen. */
    position: absolute;
    top: calc(var(--rbh-float-h, 6rem) + .75rem);
    right: 1.5rem;
    bottom: 1.5rem;
    width: 30px;
    border: 1px solid var(--tri-border);
    border-radius: 1rem;
    /* FAST durchsichtig (15 %) und nur leicht weichgezeichnet: Zugeklappt stehen darin nur zwei
       gedrehte Woerter - das Zeichenblatt darunter soll ungestoert weiterlaufen, und was dahinter
       liegt, soll man noch erkennen koennen. Die Woerter tragen ihre Lesbarkeit selbst: dunkles
       Gruen auf hellem Grund. */
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* EIGENER Stapelraum über allem auf dem Zeichenblatt: Ohne ihn mischten sich die Knoten (z 20)
       und das ausgeklappte Panel – einzelne Karten lagen darüber statt darunter. */
    z-index: 40;
    box-shadow: 0 .75rem 2.2rem rgba(16, 24, 40, .18);
    cursor: pointer;
}
/* Beide Reiter stehen mittig direkt beieinander, getrennt durch ein "/" - nicht ueber die
   ganze Leistenhoehe verteilt. Der aktive ist gruen hervorgehoben. */
.wfd-tree-rail-tabs[b-dssmgoa64y] { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .35rem; }
.wfd-tree-rail-sep[b-dssmgoa64y] {
    writing-mode: vertical-rl;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tri-border);
    user-select: none;
}
.wfd-tree-tab[b-dssmgoa64y] {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .8rem;
    font-weight: 600;
    color: var(--tri-green);
    user-select: none;
    cursor: pointer;
}
/* Beide Reiter im selben Gruen - auch der aktive. Welche Ansicht offen ist, zeigt das Panel selbst,
   sobald es aufklappt; in der schmalen Leiste stoerte der Farbunterschied mehr als er half. */
.wfd-tree-tab:hover[b-dssmgoa64y] { color: var(--tri-green-dark); }
.wfd-tree-tab > i[b-dssmgoa64y] { writing-mode: horizontal-tb; }
.wfd-tree-rail:hover[b-dssmgoa64y] { background: rgba(255, 255, 255, .88); }

/* In der raeumlichen Darstellung steht die Leiste auf einer dunklen Flaeche: Hell durchscheinend
   leuchtete sie dort wie ein vergessenes Stueck der gewohnten Ansicht, und das Gruen der Woerter
   war auf dem Dunkel kaum zu lesen. Dieselbe Bauart wie die Ansichts-Kapsel unten links. */
.wfd-tree-rail.is-3d[b-dssmgoa64y] {
    background: rgba(32, 37, 43, .82);
    border-color: #4a525c;
    box-shadow: 0 .75rem 2.2rem rgba(0, 0, 0, .45);
}
.wfd-tree-rail.is-3d:hover[b-dssmgoa64y] { background: rgba(32, 37, 43, .95); }
.wfd-tree-rail.is-3d .wfd-tree-tab[b-dssmgoa64y] { color: #e3e9f0; }
.wfd-tree-rail.is-3d .wfd-tree-tab:hover[b-dssmgoa64y] { color: #ffffff; }
.wfd-tree-rail.is-3d .wfd-tree-rail-sep[b-dssmgoa64y] { color: #6b7681; }

/* Trabanten-Menue der raeumlichen Darstellung: Es haengt nicht am Knoten (den gibt es dort nicht als
   Element), sondern steht fest im Fenster an der Stelle, auf die geklickt wurde. */
.wfd-backdrop-abs[b-dssmgoa64y] { position: absolute; inset: 0; z-index: 55; }
.wfd-popmenu-abs[b-dssmgoa64y] { position: absolute; z-index: 56; }
.wfd-popmenu-abs.is-3d[b-dssmgoa64y] {
    background: rgba(32, 37, 43, .97);
    border-color: #4a525c;
    color: #e3e9f0;
    box-shadow: 0 .75rem 2.2rem rgba(0, 0, 0, .5);
}
.wfd-popmenu-abs.is-3d .wfd-popmenu-title[b-dssmgoa64y] { color: #aab2bc; }
.wfd-popmenu-abs.is-3d .wfd-popmenu-item[b-dssmgoa64y] { color: #e3e9f0; }
.wfd-popmenu-abs.is-3d .wfd-popmenu-item:hover[b-dssmgoa64y] { background: #3a4047; }

/* Die Leiste faengt auch RECHTS von sich. Zwischen ihr und dem Fensterrand liegen 1,5 rem
   Zeichenblatt - wer mit der Maus dort steht, meint die Leiste und nicht die Flaeche dahinter,
   und bisher klappte das Panel genau in diesem Streifen wieder zu. Ein unsichtbarer Streifen in
   genau dieser Breite gehoert deshalb zur Leiste: Er traegt kein Bild, loest aber :hover aus -
   also auch das Ausfahren des Panels. */
.wfd-tree-rail[b-dssmgoa64y]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    /* BIS AN DEN FENSTERRAND, nicht nur die 1,5 rem bis zur Blattkante. Genau abgezaehlt blieben
       sonst die aeussersten Bildpunkte uebrig - und dort landet der Zeiger, wenn man "ganz nach
       rechts" faehrt. Der Streifen darf ruhig zu breit sein: `.wfd` beschneidet (overflow: hidden),
       er endet also an der Kante des Designers. */
    width: 100vw;
}

/* Flyout: liegt absolut über dem Canvas, slidet beim Hover ein */
.wfd-tree-flyout[b-dssmgoa64y] {
    position: absolute;
    top: 0;
    border: 1px solid var(--tri-border);
    border-radius: 1rem;
    /* Nur eine SPUR durchsichtig (10 %): Es ist eine Arbeitsflaeche mit Listen und Eingaben -
       mehr Durchsicht macht jede Zeile darin schwerer lesbar. Die Weichzeichnung dahinter nimmt
       den Knoten die Kontur, sodass nur eine Ahnung von Bewegung bleibt. */
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    /* Per 'right' (statt transform) ein-/ausblenden: ein transform am Eltern-Container bricht in Chrome den
       nativen Drag-Ghost (gezogener Agent „klebt" nicht am Cursor). 'right' animiert ebenso, ohne Transform. */
    right: -280px;
    height: 100%;
    width: 280px;
    z-index: 30;
    box-shadow: 0 .75rem 2.2rem rgba(16, 24, 40, .22);
    opacity: 0;
    pointer-events: none;
    transition: right .18s ease, opacity .18s ease;
}
.wfd-tree-rail:hover .wfd-tree-flyout[b-dssmgoa64y] {
    right: 0;
    opacity: 1;
    pointer-events: auto;
}
.wfd-tree-head[b-dssmgoa64y] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    font-weight: 600;
    color: var(--tri-green);
    border-bottom: 1px solid var(--tri-border);
}
/* Body füllt die Resthöhe der voll-hohen Spalte und scrollt intern (flex:1 + min-height:0 = Pflicht,
   sonst nimmt der Body nur Inhaltshöhe und der Rest läuft unten aus dem Viewport). */
.wfd-tree-body[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .4rem .2rem;
    /* DAS ROLLEN BLEIBT IM PANEL. Am Ende der Liste gab ein weiterer Rad-Schub an die Seite
       dahinter weiter - und weil der Designer genau eine Fensterhoehe hoch ist, bewegte sich
       dabei der ganze Bildschirm (auf macOS als Gummiband). Dasselbe Mittel wie am Zeichenblatt. */
    overscroll-behavior: contain; }
/* Auch die Flaeche SELBST faengt das Rad ab: Ueber Reiterleiste, Suchfeld oder einer Stelle ohne
   Liste liegt gar kein Rollbereich unter dem Zeiger, und der Schub ginge ungebremst an die Seite. */
.wfd-tree-docked[b-dssmgoa64y],
.wfd-tree-flyout[b-dssmgoa64y],
.wfd-toolpanel-docked[b-dssmgoa64y],
.wfd-toolpanel-flyout[b-dssmgoa64y] { overscroll-behavior: contain; }
.wfd-toolpanel-body[b-dssmgoa64y] { overscroll-behavior: contain; }
.wfd-tree-empty[b-dssmgoa64y] { color: var(--tri-muted); font-size: .85rem; padding: .5rem .8rem; }
.wfd-tree-row[b-dssmgoa64y] {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .28rem .6rem;
    font-size: .86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wfd-tree-row.is-folder[b-dssmgoa64y] { color: var(--tri-muted); font-weight: 600; }
.wfd-tree-row.is-agent[b-dssmgoa64y] { cursor: pointer; border-radius: .4rem; margin: 0 .4rem; }
.wfd-tree-row.is-agent:hover[b-dssmgoa64y] { background: var(--tri-surface, #f4f5f7); color: var(--tri-green); }
.wfd-tree-row.is-agent.active[b-dssmgoa64y] { background: #e7f4ea; color: var(--tri-green-hover); font-weight: 600; }
.wfd-tree-num[b-dssmgoa64y] { color: var(--tri-muted); font-size: .76rem; margin-right: .15rem; }
.wfd-tree-row.is-agent.active .wfd-tree-num[b-dssmgoa64y] { color: inherit; }

.wfd-canvas[b-dssmgoa64y] { position: relative; }
/* Beim Ziehen eines Knotens (auch über einen anderen) darf KEIN Text markiert werden – sonst „färbt" das Ziehen
   die Knoteninhalte blau ein. Eingabefelder bleiben ausdrücklich markierbar (Prompt-/Formularfelder). */
.wfd-canvas[b-dssmgoa64y], .wfd-canvas *[b-dssmgoa64y] { user-select: none; -webkit-user-select: none; }
.wfd-canvas input[b-dssmgoa64y], .wfd-canvas textarea[b-dssmgoa64y], .wfd-canvas [contenteditable="true"][b-dssmgoa64y] { user-select: text; -webkit-user-select: text; }
/* overflow:visible → beim Ziehen eines Knotens über die berechnete Canvas-Höhe hinaus
   werden die Kanten/Ports nicht an der Unterkante abgeschnitten ("Pfeile reißen ab"). */
/* Die WEBGL-Leinwand der raeumlichen Darstellung fuellt den Platz des Zeichenblatts. Keine eigene
   Groessenangabe in Pixeln: Das Modul misst die Flaeche und rechnet die Kamera darauf um. */
.wfd-3d[b-dssmgoa64y] { display: block; width: 100%; height: 100%; min-height: 400px; touch-action: none;
    /* Dieselbe helle Flaeche wie die Szene (FARBE.blatt): Waehrend die Laufzeit three.js laedt und
       die Koerper baut, waere der Platz sonst kurz andersfarbig. */
    background: #2f353d; }

/* In der raeumlichen Darstellung fuellt die Leinwand den GANZEN Arbeitsbereich – bis unter den
   schwebenden Kopf, der darueber liegt. Das Polster, das in der gewohnten Darstellung den Blattanfang
   unter den Kopf rueckt, liesse hier oben einen hellen Streifen stehen; und gerollt wird raeumlich
   ohnehin nicht (die Kamera schwenkt). */
.wfd-canvas-wrap.is-3d[b-dssmgoa64y] {
    padding-top: 0;
    overflow: hidden;
    background: #2f353d;
    background-image: none;
}

.wfd-lines[b-dssmgoa64y] { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
/* Die Schattenebene liegt VOR der echten im Markup und damit darunter im Bild. Versatz = Flughoehe der
   Knoten (--wfd-line-lift), weichgezeichnet statt scharf, und bewusst DICKER als die Linie selbst: So
   bleibt vom Schatten nach dem Weichzeichnen noch etwas uebrig. Der Weichzeichner liegt auf der Ebene
   (eine Flaeche), nicht am Pfad (eine je Kante). */
.wfd-lines-shadow[b-dssmgoa64y] {
    transform: translate(var(--wfd-line-drift, -11px), var(--wfd-line-lift, 22px));
    /* Weicher als zuvor (4 statt 3 px) und deutlich blasser: Ein Schatten soll die Hoehe andeuten, nicht
       als zweite Linie mitlaufen. Mit 38 % Deckkraft und 3 px Breite war er kraeftiger als die Linie
       selbst – das Bild bekam dadurch einen doppelten Strich. */
    filter: blur(4px);
}
.wfd-lines-shadow path[b-dssmgoa64y] { stroke: var(--wfd-line-shadow-color, rgba(16, 24, 40, .09)); stroke-width: 2; }
/* Satelliten-Linien sind duenner und heller als die Hauptpfade – ihr Schatten ebenso. Team-Linien sind
   das Gegenteil: 3 px breit, also auch ein breiterer Schatten. */
.wfd-lines-shadow path.is-sat[b-dssmgoa64y] { stroke-width: 1.8; stroke-opacity: .6; }
.wfd-lines-shadow path.is-team[b-dssmgoa64y] { stroke-width: 3.4; }
.wfd-ports[b-dssmgoa64y] { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: visible; }
/* Hinweis unten links über dem Canvas-Bereich fixiert (scrollt nicht mit). */
.wfd-node[b-dssmgoa64y] {
    position: absolute; z-index: 1;
    background: #fff; border: 1px solid var(--tri-border); border-radius: .7rem;
    box-shadow: var(--wfd-shadow); padding: .7rem .85rem;
    /* Kein farbiger Balken mehr oben: Die Art des Knotens steht als kleines Schild DARUEBER
       (.wfd-node-kind). Der Rahmen ist rundum derselbe wie an den uebrigen Seiten. */
    cursor: pointer; transition: box-shadow .12s, transform .12s;
}
.wfd-node.wfd-agent[b-dssmgoa64y] { min-height: 9.5rem; display: flex; flex-direction: column; }
.wfd-node.wfd-agent .wfd-node-foot[b-dssmgoa64y] { margin-top: auto; }
.wfd-node:hover[b-dssmgoa64y] { box-shadow: var(--wfd-shadow-hover); }

/* Gestrichelter roter Rahmen um einen Worker, dessen Eingaben ein aktiver Gatekeeper überwacht.
   inset = GkFrameGap (EdgePath), damit der rote Gatekeeper-Pfeil exakt auf die untere Rahmenkante zeigt. */
.wfd-gk-frame[b-dssmgoa64y] {
    position: absolute; inset: -22px; z-index: 0;
    /* Oben zusaetzlich um die Hoehe des Art-Schildes nach aussen: Das Schild sitzt ausserhalb der Karte
       (bottom: 100%) und lag deshalb fast auf der gestrichelten Linie – der Rahmen wirkte zu eng und
       wurde vom Schild verdeckt. Der Wert ist nicht geschaetzt, sondern aus Innenabstand, Schriftgrad
       und Zeilenhoehe des Schildes gerechnet; die uebrigen drei Seiten bleiben bei 22 px, weil der rote
       Gatekeeper-Pfeil auf die UNTERE Kante zeigt (GkFrameGap in WorkflowDesigner.razor). */
    --wfd-kind-h: calc(.18rem * 2 + .66rem * 1.15);
    top: calc(-22px - var(--wfd-kind-h));
    border: 2px dashed #d12f2f; border-radius: 1.45rem;
    pointer-events: none;
}
.wfd-node.sel[b-dssmgoa64y] {
    border-color: var(--wfd-accent, var(--tri-green));
    box-shadow: 0 0 0 3px var(--wfd-glow, rgba(var(--tri-green-rgb),.2)), 0 0 16px 3px var(--wfd-glow, rgba(var(--tri-green-rgb),.2)), 0 6px 18px rgba(0,0,0,.08);
}
.wfd-node-edit[b-dssmgoa64y] {
    position: absolute; top: .35rem; right: .35rem; z-index: 2;
    width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tri-border); border-radius: .4rem; background: #fff;
    color: var(--tri-muted); font-size: .8rem; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.wfd-node:hover .wfd-node-edit[b-dssmgoa64y] { opacity: 1; }
.wfd-node-edit:hover[b-dssmgoa64y] { color: var(--tri-green); border-color: var(--tri-green); }
.wfd-node-add[b-dssmgoa64y] { right: 2rem; }
.wfd-node-edit-2[b-dssmgoa64y] { right: 3.7rem; }

/* Popover-Menüs (Hinzufügen am Agenten / Satelliten-Aktionen) – auf Canvas-Ebene */
.wfd-backdrop[b-dssmgoa64y] { position: fixed; inset: 0; z-index: 15; background: transparent; }
/* Der Satellit, dessen Menue offen ist, liegt UEBER dem Backdrop. Sonst landet der zweite Klick eines
   Doppelklicks auf dem Backdrop statt auf dem Satelliten – zwei verschiedene Ziele, und der Browser meldet
   gar kein `dblclick`. Genau daran scheiterte „Konfigurieren per Doppelklick" zuerst. */
.wfd-sat.menuopen[b-dssmgoa64y], .wfd-sat-kn.menuopen[b-dssmgoa64y] { z-index: 16; }
.wfd-popmenu[b-dssmgoa64y] {
    position: absolute; z-index: 20;
    background: #fff; border: 1px solid var(--tri-border); border-radius: .55rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.18); padding: .3rem; min-width: 10rem;
}
.wfd-popmenu-title[b-dssmgoa64y] { font-size: .68rem; font-weight: 700; color: var(--tri-faint); padding: .15rem .55rem .3rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfd-popmenu-item[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    border: none; background: none; text-align: left; cursor: pointer;
    padding: .4rem .55rem; border-radius: .4rem; font-size: .86rem; color: var(--tri-text);
}
.wfd-popmenu-item:hover[b-dssmgoa64y] { background: var(--tri-surface); }
.wfd-popmenu-item:disabled[b-dssmgoa64y] { color: var(--tri-faint); cursor: not-allowed; opacity: .6; }
.wfd-popmenu-item:disabled:hover[b-dssmgoa64y] { background: transparent; }
.wfd-popmenu-item i[b-dssmgoa64y] { width: 1.1rem; text-align: center; color: var(--tri-muted); }
.wfd-popmenu-item.text-danger i[b-dssmgoa64y] { color: var(--tri-red); }
.wfd-popmenu-sep[b-dssmgoa64y] { height: 1px; background: var(--tri-border); margin: .3rem .2rem; }
.wfd-popmenu-note[b-dssmgoa64y] { font-size: .74rem; color: var(--tri-muted); padding: .2rem .55rem; max-width: 12rem; }
/* Das Schild ueber dem Knoten: Es traegt die Art (und bei Agenten die Nummer) in der Farbe, die vorher
   der Balken hatte. Es steht AUSSERHALB der Karte, haengt aber an ihr – deshalb absolut zum Knoten, der
   selbst absolut positioniert ist. Die Farbe kommt aus --wfd-accent, das jede Knotenart ohnehin setzt. */
.wfd-node-kind[b-dssmgoa64y] {
    /* Lasche auf der Kartenoberkante: oben abgerundet, unten gerade und buendig aufsitzend. Der Wert
       -1.2rem ist die Hoehe des Schildes (zweimal .18rem Innenabstand plus die Zeile) – so beruehrt seine
       Unterkante genau die Oberkante der Karte, ohne Spalt und ohne Ueberlappung. */
    /* Etwas nach rechts eingerueckt, damit die abgerundete Ecke der Karte links daneben sichtbar
       bleibt – sonst sieht das Schild aus, als waere es die Kartenkante selbst. */
    /* `bottom: 100%` statt eines gerechneten Abstands nach oben: Damit sitzt die UNTERKANTE des Schildes
       exakt auf der Oberkante der Karte – unabhaengig davon, wie hoch das Schild durch Symbol, Schriftgrad
       oder Zoom gerade ist. Jeder feste Wert (-1,2rem …) war geschaetzt und ragte mal zu weit hinein. */
    position: absolute; bottom: 100%; top: auto; left: .6rem; z-index: 2;
    max-width: 100%;
    padding: .18rem .6rem; border-radius: .5rem .5rem 0 0;
    background: var(--wfd-accent, var(--tri-faint)); color: #fff;
    font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    /* Zeilenhoehe ausdruecklich statt geerbt: Nur so laesst sich die Hoehe des Schildes ausrechnen –
       und der gestrichelte Gatekeeper-Rahmen muss sie kennen, um darueber zu liegen. 1,15 entspricht
       der bisher geerbten Hoehe (gemessen 17,8 px), das Schild sieht also unveraendert aus. */
    line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wfd-node-kind .wfd-node-runlink[b-dssmgoa64y] { color: #fff; text-decoration: underline; }
.wfd-node-kind .wfd-node-runlink:hover[b-dssmgoa64y] { color: #fff; }
.wfd-node-runlink[b-dssmgoa64y] { color: var(--tri-green); text-decoration: none; cursor: pointer; }
.wfd-node-runlink:hover[b-dssmgoa64y] { color: var(--tri-green-dark); text-decoration: none; }
/* Zwei Zeilen statt einer: Seit die Nummer im Schild ueber der Karte steht, ist der Platz daneben frei.
   Lange Agentennamen – und viele sind ganze Saetze – brachen vorher nach wenigen Woertern ab. */
.wfd-node-title[b-dssmgoa64y] { font-weight: 700; font-size: .92rem; line-height: 1.2; color: var(--tri-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; }
.wfd-node-model[b-dssmgoa64y] { font-size: .76rem; color: var(--tri-muted); margin-top: .2rem; position: relative; }
/* Text linksbündig zum Titel; das Icon hängt links davor (außerhalb des Textflusses). */
.wfd-node-model > i[b-dssmgoa64y] { position: absolute; left: -1.25em; top: 50%; transform: translateY(-50%); }
/* Demo-Hinweis am Zeit-Trigger: rot und mehrzeilig – der Knoten wächst dafür in der Höhe. */
.wfd-node-demohint[b-dssmgoa64y] {
    font-size: .72rem; line-height: 1.25; color: var(--tri-red); background: rgba(192,57,43,.08);
    border-left: 3px solid var(--tri-red); border-radius: .3rem; padding: .3rem .45rem; margin-top: .35rem;
}
.wfd-node-chips-kicker[b-dssmgoa64y] { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tri-faint); margin: .4rem 0 .2rem; }
.wfd-chip[b-dssmgoa64y] { display: flex; align-items: center; font-size: .76rem; color: var(--tri-text); background: var(--tri-surface); border-radius: .4rem; padding: .15rem .4rem; margin-top: .2rem; }
.wfd-mcp[b-dssmgoa64y] { font-size: .6rem; font-weight: 700; color: #c98a1a; background: #fbf2dd; border-radius: .3rem; padding: 0 .25rem; margin-left: .3rem; }

/* Tools / MCP / Skills als verschiebbare Kreise außerhalb des Agenten (mit Verbindungslinie). */
.wfd-sat[b-dssmgoa64y] {
    position: absolute; z-index: 1;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    /* Derselbe Schatten wie an den Knoten (var(--wfd-shadow)): Die Trabanten lagen mit ihrem
       flacheren Schatten optisch eine Ebene tiefer als die Agenten-Karten. */
    background: #fff; border: 1.5px solid var(--tri-border); box-shadow: var(--wfd-shadow-sat);
    font-size: 1.1rem; color: var(--tri-muted); cursor: grab; touch-action: none;
}
.wfd-sat:hover[b-dssmgoa64y] { box-shadow: var(--wfd-shadow-sat-hover); }
.wfd-sat.sel[b-dssmgoa64y] { box-shadow: 0 0 0 2px var(--wfd-accent, var(--tri-green)); }
.wfd-sat-img[b-dssmgoa64y] { width: 22px; height: 22px; object-fit: contain; }
.wfd-sat-tool[b-dssmgoa64y] { background: #e9f5ec; }
.wfd-sat-mcp[b-dssmgoa64y] { background: #fbf2dd; }
.wfd-sat-skill[b-dssmgoa64y] { background: #e7f0fb; }
/* PILLE: dritte Darstellungsform neben Kreis und Karte (Werkzeug „Instruktionen"). Gleiche Hoehe und
   gleiche Farbwelt wie der Kreis, nur breiter: Symbol plus Anzahl. Die Beschriftung sitzt wie beim Kreis
   darunter, damit die Anordnung (Physik) sie wie gewohnt in die Kollisionsbox einbezieht. */
.wfd-sat-pill[b-dssmgoa64y] {
    width: auto; min-width: 78px; padding: 0 .6rem; gap: .4rem;
    /* Symbol LINKS, Zahl RECHTS: Die Zahl steht damit immer an derselben Stelle, egal ob ein- oder
       zweistellig – die Pille waechst nach aussen, nicht um die Mitte herum. */
    justify-content: space-between;
    border-radius: 999px;
}
.wfd-sat-pill .wfd-sat-pill-count[b-dssmgoa64y] {
    font-size: .85rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
/* Noch keine Anweisung: die Null tritt zurueck – aber nur eine Stufe, sonst wirkt sie ausgegraut. */
.wfd-sat-pill.is-empty .wfd-sat-pill-count[b-dssmgoa64y] { color: var(--tri-muted); font-weight: 600; }

/* Name unter dem Kreis – absolut positioniert, beeinflusst die Kreisgröße (Linienmitte) nicht. */
.wfd-sat-name[b-dssmgoa64y] {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    font-size: .62rem; line-height: 1.15; max-width: 150px; text-align: center; color: var(--tri-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    background: rgba(255,255,255,.85); border-radius: .25rem; padding: 1px 3px; pointer-events: none;
}
.wfd-sat-tool[b-dssmgoa64y] { color: var(--tri-green); border-color: var(--tri-green); --wfd-accent: var(--tri-green); --wfd-glow: rgba(var(--tri-green-rgb),.22); }
.wfd-sat-mcp[b-dssmgoa64y] { color: #c98a1a; border-color: #c98a1a; --wfd-accent: #c98a1a; --wfd-glow: rgba(201,138,26,.26); }
.wfd-sat-skill[b-dssmgoa64y] { color: #2f7dd6; border-color: #2f7dd6; --wfd-accent: #2f7dd6; --wfd-glow: rgba(47,125,214,.22); }

/* ---- Agententeam: Abteilung IM Knoten des Moderators ------------------------------------------
   Die Besetzung steht INNERHALB der Karte, unter der Knopfleiste; die Karte waechst dafuer in der
   Hoehe. Vorher war es ein eigener Kasten, der unten an der Karte hing – zwei Rahmen, zwei Schatten,
   und das Schild des Teams lag auf der Knopfleiste des Moderators. Das Team gehoert dem Moderator,
   also steht es in ihm. Davor waren die Mitglieder sogar frei schwebende Karten mit je einer Linie. */
.wfd-teamgrid[b-dssmgoa64y] {
    /* Im Fluss der Karte, nicht darunter geklebt. Die Ecken zum Kartenrand zieht `margin` nach
       aussen: Die Trennlinie soll ueber die ganze Kartenbreite laufen, nicht nur ueber den
       Innenbereich – wie die Linie ueber der Knopfleiste. */
    margin: .65rem -.85rem 0; padding: .7rem .85rem 0;
    border-top: 1px solid var(--tri-border);
    cursor: default;
}
/* `align-items: stretch` (Vorgabe): Alle Zellen einer Zeile sind gleich hoch. Mit `start` hing die
   kuerzere oben und darunter klaffte eine Luecke – vier Mitglieder sahen aus wie vier verschiedene
   Dinge. Die Rolle wird dafuer auf drei Zeilen gekappt, sonst bestimmt die laengste alle anderen. */
/* EINE Spalte: Der Agentenname ist das, wonach man sucht, und er bekommt jetzt die volle Breite der
   Karte. Zweispaltig kuerzte „Google Ads Analyse Windsor.ai" schon nach dem dritten Wort. */
.wfd-teamgrid-cells[b-dssmgoa64y] { display: grid; grid-template-columns: 1fr; gap: .4rem; }
/* Die Knopfreihe sitzt unten, auch wenn die Rolle kurz ist. */
.wfd-teamgrid-cells > .wfd-tm[b-dssmgoa64y] { display: flex; flex-direction: column; }
.wfd-teamgrid-cells > .wfd-tm > .wfd-tm-btns[b-dssmgoa64y] { margin-top: auto; }

/* Die naechste freie Zelle: ein grosses graues Plus. Grau und gestrichelt, weil die Zelle noch keinen
   Agenten traegt – sie soll neben den besetzten Zellen zuruecktreten. So hoch wie eine Mitgliedszelle,
   damit die Karte beim Aufnehmen nicht springt. */
/* Doppelt ausgezeichnet (.wfd-tm.wfd-tm-add): Die Kachel traegt beide Klassen, und .wfd-tm steht
   weiter unten in dieser Datei – bei gleicher Spezifitaet gewaenne sonst deren durchgezogener Rahmen. */
.wfd-tm.wfd-tm-add[b-dssmgoa64y] {
    display: flex; align-items: center; justify-content: center;
    /* Fuellt die Zeile aus, statt oben zu kleben: Steht neben der Kachel ein Mitglied mit langer Rolle,
       blieb unter ihr sonst ein leerer Streifen bis zur Unterkante der Karte stehen. Die Mindesthoehe
       greift nur, wenn die Kachel allein in ihrer Zeile steht. */
    align-self: stretch; min-height: 3rem; background: #fff; border: 1px dashed var(--tri-border);
    border-radius: .6rem; color: var(--tri-muted); font-size: 2rem; cursor: pointer;
}
.wfd-tm.wfd-tm-add:hover[b-dssmgoa64y] { background: var(--tri-surface); border-color: var(--tri-muted); color: var(--tri-text); }

/* Eine Zelle ist KEINE Karte: kein Schild, kein Schatten, keine Werkzeuge. Nummer, Name, Avatar,
   Rolle und vier Handgriffe – mehr macht ein Mitglied im Team nicht aus. */
.wfd-tm[b-dssmgoa64y] {
    /* Weiss wie der Kasten: Eine graue Flaeche las sich wie ein abgeschalteter Agent. Die Ebenen
       trennt der Rahmen, nicht die Fuellung. */
    background: #fff; border: 1px solid var(--tri-border); border-radius: .6rem;
    /* Eigener Schatten: Die Zellen liegen auf der weissen Karte und waeren sonst nur durch einen
       haarfeinen Rahmen von ihr zu unterscheiden. */
    box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
    padding: .4rem .5rem;
    /* OHNE das darf ein Raster-Element nicht unter seine Mindestbreite schrumpfen (min-width: auto).
       Die zweite Spalte wurde dadurch breiter als ihr Anteil und schob sich ueber den rechten Rand des
       Kastens hinaus – gemessen 27 px, und genau dort fehlte dann der Rahmen. */
    min-width: 0;
}
/* Aufgeklappt: Der Agent steht unterhalb des Teams in voller Groesse. Die Zelle wird dafuer
   HERVORGEHOBEN, nicht ausgeblendet – gruener Rahmen in der Signaturfarbe des Brandings. Ausgegraut
   las sie sich wie abgeschaltet, dabei ist sie gerade die eine, auf die es ankommt. */
/* Die Zelle ist anklickbar: Zeigefinger und ein leichtes Anheben beim Darueberfahren – sonst waere
   nicht zu sehen, dass sie mehr kann als dastehen. */
.wfd-tm.is-clickable[b-dssmgoa64y] { cursor: pointer; }
/* Beim Darueberfahren hebt sich die Zelle an, sie faerbt sich NICHT. Eine gruene Flaeche las sich wie
   eine Auswahl – gemeint ist nur „hier kann man klicken". */
.wfd-tm.is-clickable:hover[b-dssmgoa64y] {
    border-color: var(--tri-green-soft);
    box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.08);
}
.wfd-tm.is-open[b-dssmgoa64y] {
    border-color: var(--tri-green);
    box-shadow: 0 0 0 1px var(--tri-green), 0 2px 8px rgba(var(--tri-green-rgb), .18);
}
/* Ein arbeitendes Mitglied leuchtet wie ein laufender Knoten – derselbe orange Puls, nur eine Nummer
   kleiner, weil eine Zelle keine Karte ist. Zuvor war am Team ueberhaupt nicht zu erkennen, wer gerade
   dran ist: Die Mitglieder sind seit dem Raster keine eigenen Knoten mehr und bekamen deshalb auch den
   Knoten-Glow nicht. Der Puls schlaegt die Hervorhebung des Aufgeklappten (is-open), denn der Zustand
   ist die fluechtigere und damit wichtigere Aussage. */
.wfd-tm.is-running[b-dssmgoa64y], .wfd-tm.is-running.is-open[b-dssmgoa64y], .wfd-tm.is-clickable.is-running:hover[b-dssmgoa64y] {
    border-color: #e08e0b;
    animation: wfd-tm-glow-b-dssmgoa64y 1.3s ease-in-out infinite;
}
@keyframes wfd-tm-glow-b-dssmgoa64y {
    0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 1px rgba(224,142,11,.35), 0 0 8px 1px rgba(224,142,11,.28); }
    50%      { box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 2px rgba(224,142,11,.65), 0 0 18px 4px rgba(224,142,11,.50); }
}
/* Kleinere Schrift als auf der Agenten-Karte: Die Zelle ist eine Kurzfassung in einem Raster, kein
   eigener Knoten. Die Nummer (.agent-num) erbt die Groesse von hier. */
.wfd-tm-head[b-dssmgoa64y] { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .75rem; }
/* Klein gehalten, passend zur Schrift der Zelle (gut 12 px): Die Zelle ist eine Kurzfassung, kein
   Agentenkopf. Mit 30 px war die Kachel fast doppelt so hoch wie die Zeile daneben. */
.wfd-tm-avatar[b-dssmgoa64y] { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
/* Sinnbild ohne eigenes Avatarbild: gruene Kachel mit gruenem Roboter – dasselbe wie am Moderator
   (.wfd-node-ic). Der Standard-Avatar brachte einen GRAUEN Kreis mit, und ein grauer Agent liest sich
   wie ein abgeschalteter. */
.wfd-tm-ic[b-dssmgoa64y] {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: .4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e9f5ec; color: var(--tri-green); font-size: .78rem;
}
.wfd-tm-avatar img[b-dssmgoa64y] { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der Name in der Signatur-Farbe: dieselbe Auszeichnung wie auf der Agenten-Karte. Bei eigenem
   Branding faerbt sich --tri-green mit um; es steht hier bewusst keine feste Farbe. */
/* Die Nummer gehoert zum Agenten und wird wie sein Name ausgezeichnet – nicht grau abgesetzt wie in
   Listen. In der Zelle steht sonst ein graues „#61" vor einem gruenen Namen, als waeren es zwei Dinge. */
/* `margin-right` der Nummer abschalten: Der Kopf ist eine Flex-Zeile mit eigenem Abstand (gap), und
   beide zusammen rissen eine Luecke zwischen „#61" und dem Namen. */
.wfd-tm-head .agent-num[b-dssmgoa64y] { color: var(--tri-green); font-weight: 700; margin-right: 0; }
.wfd-tm-name[b-dssmgoa64y] {
    font-weight: 700; font-size: .78rem; color: var(--tri-green);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.wfd-tm-role[b-dssmgoa64y] {
    display: flex; align-items: flex-start; gap: .4rem;
    margin-top: .3rem; padding: .25rem .4rem;
    background: #fff; border: 1px solid var(--tri-border); border-radius: .4rem;
    font-size: .72rem; line-height: 1.3; color: var(--tri-text); cursor: pointer;
}
.wfd-tm-role:hover[b-dssmgoa64y] { background: var(--tri-green-bg); }
/* Waehrend eines Laufs gesperrt: kein Zeigefinger, kein Aufleuchten – dieselbe Aussage wie bei den
   abgeschalteten Knoepfen daneben. */
.wfd-tm-role.is-locked[b-dssmgoa64y] { cursor: default; opacity: .65; }
.wfd-tm-role.is-locked:hover[b-dssmgoa64y] { background: #fff; }
.wfd-tm-role b[b-dssmgoa64y] { color: var(--tri-green); font-weight: 700; }
/* Hoechstens drei Zeilen, danach „…“: Eine ausfuehrliche Rolle machte ihre Zelle doppelt so hoch wie
   die Nachbarzelle. Der volle Text steht im Stift-Dialog. */
/* EINE Zeile: Die Rolle ist hier ein Stichwort, kein Text. Wer sie ganz lesen oder aendern will, oeffnet
   den Stift. Drei Zeilen machten die Karte bei vier Mitgliedern unnoetig hoch. */
.wfd-tm-role-txt[b-dssmgoa64y] {
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* Ohne Rolle steht hier die Aufforderung – im selben Schriftschnitt und derselben Farbe wie eine
   gesetzte Rolle. Kursiv und grau las sich wie ein abgeschalteter Hinweis statt wie eine Aufgabe. */
.wfd-tm-role-ic[b-dssmgoa64y] { flex: 0 0 auto; color: var(--tri-green); font-size: .78rem; margin-top: .1rem; }
.wfd-tm-btns[b-dssmgoa64y] { display: flex; gap: .3rem; margin-top: .3rem; }
/* Der aufgeklappte Zustand am Knopf selbst sichtbar. */
.wfd-tm-btns .wfd-foot-btn.is-on[b-dssmgoa64y] { border-color: var(--tri-green); color: var(--tri-green); }

/* Aktiv genutztes Tool/MCP bzw. laufender Skill: pulsierender Glow – einheitlich orange (wie der laufende Knoten). */
.wfd-sat-glow[b-dssmgoa64y] {
    z-index: 3;
    border-color: #e08e0b;
    animation: wfd-sat-pulse-b-dssmgoa64y 1.25s ease-in-out infinite;
}
@keyframes wfd-sat-pulse-b-dssmgoa64y {
    0%   { box-shadow: 0 0 0 0 rgba(224,142,11,.5),    var(--wfd-shadow-sat); }
    70%  { box-shadow: 0 0 0 10px rgba(224,142,11,0),  var(--wfd-shadow-sat); }
    100% { box-shadow: 0 0 0 0 rgba(224,142,11,0),     var(--wfd-shadow-sat); }
}

/* Knowledge-Zugriff-Satellit als abgerundetes Rechteck mit Bucket-Liste (statt Kreis). */
.wfd-sat-kn[b-dssmgoa64y] {
    position: absolute; z-index: 2;
    min-width: 150px; max-width: 210px;
    /* Rahmen wie an den Agenten-Karten (neutrales Grau, 1px): Der gruene 1,5px-Rahmen hob die
       eckigen Werkzeuge staerker hervor als die Agenten, um die es im Bild eigentlich geht.
       Die Farbe bleibt der Ueberschrift und den Symbolen vorbehalten. */
    background: #fff; border: 1px solid var(--tri-border); border-radius: .6rem;
    box-shadow: var(--wfd-shadow); padding: .35rem .5rem;
    cursor: grab; touch-action: none;
    --wfd-accent: var(--tri-green); --wfd-glow: rgba(var(--tri-green-rgb),.22);
}
.wfd-sat-kn:hover[b-dssmgoa64y] { box-shadow: var(--wfd-shadow-hover); }
.wfd-sat-kn.sel[b-dssmgoa64y] { box-shadow: 0 0 0 2px var(--tri-green); }
.wfd-sat-kn-head[b-dssmgoa64y] { display: flex; align-items: center; gap: .35rem; color: var(--tri-green); font-weight: 600; font-size: .72rem; margin-bottom: .25rem; }
.wfd-sat-kn-head i[b-dssmgoa64y] { font-size: .95rem; flex: 0 0 auto; }
/* Tabler-Icons (ti) rendern bei gleicher font-size kleiner als Bootstrap-Icons → im Karten-Kopf angleichen. */
.wfd-sat-kn-head i.ti[b-dssmgoa64y] { font-size: 1.1rem; }

/* LLM-Provider-Satellit (grün wie die Tools; Lila ist dem Ergebnis vorbehalten): großes Gehirn links,
   daneben Provider-Logo + Name + Modell + Kontextgröße. */
.wfd-sat-llm[b-dssmgoa64y] { display: flex; align-items: center; gap: .3rem; min-width: 260px; max-width: 300px; padding: 1px 5px; }
.wfd-sat-llm-logo[b-dssmgoa64y] { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; }
.wfd-sat-llm-brain[b-dssmgoa64y] { flex: 0 0 auto; color: var(--tri-green); display: flex; align-items: center; }
.wfd-sat-llm-body[b-dssmgoa64y] { min-width: 0; flex: 1 1 auto; }
.wfd-sat-llm .wfd-sat-kn-head > i[b-dssmgoa64y] { width: 16px; text-align: center; }
.wfd-sat-llm .wfd-sat-kn-list li .wfd-sat-kn-lineic[b-dssmgoa64y] { display: inline-block; width: 16px; text-align: center; margin-right: .35rem; vertical-align: -.1em; }

/* Gatekeeper OHNE lokales Modell: sonst wie jeder andere LLM-Node. NUR der Modellname und das Gehirn werden rot; das
   Gehirn blinkt zusätzlich im Sekundentakt zwischen Grau und Rot (currentColor der BrainIcon-SVG). Provider-Name,
   Kontext-Zeile und Rahmen bleiben normal. Zusätzlich der Warntext „Kein lokales Modell". */
.wfd-sat-llm-nonlocal .wfd-sat-kn-list li:first-child[b-dssmgoa64y] { color: #dc3545 !important; }
.wfd-sat-llm-nonlocal .wfd-sat-llm-brain[b-dssmgoa64y] { animation: wfd-brain-blink-b-dssmgoa64y 1.4s ease-in-out infinite; }
@keyframes wfd-brain-blink-b-dssmgoa64y {
    0%   { color: #dc3545; }
    50%  { color: #9aa0a6; }
    100% { color: #dc3545; }
}
/* Warnzeile wie eine normale Listenzeile: linksbündig, Text NORMAL gefärbt, NUR das Icon rot; das Icon steht in einer
   16px-Spalte (identisch zu .wfd-sat-kn-lineic), damit es senkrecht mit den Icons darüber fluchtet. */
.wfd-sat-llm-warn[b-dssmgoa64y] { font-size: .66rem; font-weight: 600; line-height: 1.25; color: #555; margin-top: 1px; text-align: left; white-space: nowrap; }
.wfd-sat-llm-warn .wfd-warn-ic[b-dssmgoa64y] { display: inline-block; width: 16px; text-align: center; margin-right: .35rem; vertical-align: -.1em; color: #dc3545; }

/* System-Prompt-Kurzvorschau im freien Platz des Agenten-Node: graue, kleine Markdown-Schrift, max. 3 Zeilen.
   ::deep * mit !important, weil MarkdownView eigene (größere) Schriftgrößen mitbringt. */
/* Luft nach unten: Der Zwecktext stand sonst dicht auf der Trennlinie der Knopfleiste. Beim Moderator
   eines Teams faellt das besonders auf – dort fuellt die Besetzung die Karte, und die Leiste wird nicht
   mehr per `margin-top: auto` nach unten geschoben. */
.wfd-node-prompt[b-dssmgoa64y] { margin-top: .35rem; margin-bottom: .55rem; color: #8a9099; font-size: .62rem; line-height: 1.3; max-height: calc(.62rem * 1.3 * 3); overflow: hidden; }
.wfd-node-prompt[b-dssmgoa64y]  * {
    font-size: .62rem !important; line-height: 1.3 !important; margin: 0 0 .1rem 0 !important; padding: 0 !important; color: inherit !important;
}
.wfd-sat-kn-title[b-dssmgoa64y] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfd-sat-kn-list[b-dssmgoa64y] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.wfd-sat-kn-list li[b-dssmgoa64y] { font-size: .66rem; line-height: 1.25; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfd-sat-kn-id[b-dssmgoa64y] { color: #555; font-variant-numeric: tabular-nums; margin-right: .25rem; }
.wfd-sat-kn-lineic[b-dssmgoa64y] { color: #555; margin-right: .25rem; }
.wfd-sat-kn-empty[b-dssmgoa64y] { font-size: .66rem; color: var(--tri-muted); font-style: italic; }
.wfd-sat-kn-empty-error[b-dssmgoa64y] { color: var(--tri-red); font-style: normal; font-weight: 600; }
.wfd-sat-kn-more[b-dssmgoa64y] { display: inline-block; margin-top: .2rem; font-size: .66rem; color: var(--tri-green); text-decoration: underline; cursor: pointer; }
.wfd-sat-kn-more:hover[b-dssmgoa64y] { color: var(--tri-green-dark); }

/* Bucket-Drop direkt auf den Knowledge-Zugriff-Satelliten: grün = erlaubt, rot = bereits zugeordnet. */
.wfd-sat-kn.wfd-sat-bucketdrop-ok[b-dssmgoa64y] {
    border-color: var(--tri-green);
    box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 3px rgba(var(--tri-green-rgb), .65), 0 0 22px 6px rgba(var(--tri-green-rgb), .55);
}
.wfd-sat-kn.wfd-sat-bucketdrop-invalid[b-dssmgoa64y] {
    border-color: var(--tri-red);
    box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 3px rgba(220, 53, 69, .65), 0 0 22px 6px rgba(220, 53, 69, .55);
}

.wfd-agent-worker[b-dssmgoa64y] { --wfd-accent: var(--tri-green); --wfd-glow: rgba(var(--tri-green-rgb),.22); --wfd-tint: #e9f5ec; }
.wfd-agent-critic[b-dssmgoa64y] { --wfd-accent: #7a869a; --wfd-glow: rgba(122,134,154,.26); --wfd-tint: #eef1f4; }
.wfd-agent-gatekeeper[b-dssmgoa64y] { --wfd-accent: var(--tri-red); --wfd-glow: rgba(192,57,43,.22); --wfd-tint: #fbecea; }
.wfd-trigger[b-dssmgoa64y] { --wfd-accent: #2f7dd6; --wfd-glow: rgba(47,125,214,.22); --wfd-tint: #e7f0fb; }
.wfd-decision[b-dssmgoa64y] { --wfd-accent: #c98a1a; --wfd-glow: rgba(201,138,26,.26); --wfd-tint: #fbf2dd; }

.wfd-start[b-dssmgoa64y] { --wfd-accent: #2f7dd6; --wfd-glow: rgba(47,125,214,.22); --wfd-tint: #e7f0fb; }

.wfd-result[b-dssmgoa64y] { --wfd-accent: #7c3aed; --wfd-glow: rgba(124,58,237,.35); --wfd-tint: #f1ebff; }

/* ---- Team-Chat ------------------------------------------------------------------------------
   Der Chat-Knoten am Moderator traegt dieselbe Farbe wie das Team-Werkzeug (Gruen): Er gehoert zum
   Team, nicht zu den Ergebnissen. Lila bleibt dem Ergebnis vorbehalten. */
.wfd-teamchat[b-dssmgoa64y] { --wfd-accent: var(--tri-green); --wfd-glow: rgba(var(--tri-green-rgb),.22); --wfd-tint: #e9f5ec; }
.wfd-teamchat[b-dssmgoa64y] { cursor: pointer; }
.wfd-teamchat .wfd-node-title[b-dssmgoa64y] { color: var(--tri-muted, #6b7280); font-weight: 600; font-size: .8rem; }

/* Vorschau im Knoten: die letzten Wortmeldungen, je eine Zeile. Bewusst KEIN Scrollbereich – wer mehr
   sehen will, klickt den Knoten an und bekommt das ganze Gespraech. */
.wfd-chat-list[b-dssmgoa64y] { margin-top: .5rem; display: flex; flex-direction: column; gap: .45rem; }
.wfd-chat-line[b-dssmgoa64y] { display: flex; flex-direction: column; gap: .15rem; font-size: .62rem; line-height: 1.35; min-width: 0; }
.wfd-chat-line-head[b-dssmgoa64y] { display: flex; align-items: baseline; gap: .35rem; min-width: 0; }
/* Der Anfang des Beitrags: klein, grau, hoechstens drei Zeilen. Ohne die Begrenzung waere der Knoten
   bei einer langen Herleitung so hoch wie die halbe Flaeche. */
.wfd-chat-snippet[b-dssmgoa64y] {
    font-size: .58rem; line-height: 1.4; color: var(--tri-muted, #6b7280);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.wfd-chat-who[b-dssmgoa64y] { font-weight: 700; color: var(--tri-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Art des Eintrags als kleines Schild. Was der Moderator hineingibt, ist anders eingefaerbt als das,
   was zurueckkommt – am Streifenmuster sieht man, wie das Gespraech hin und her ging. */
.wfd-chat-kind[b-dssmgoa64y] {
    flex: 0 0 auto; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    border-radius: .3rem; padding: 0 .3rem; white-space: nowrap;
}
.wfd-chat-kind.is-task[b-dssmgoa64y]        { background: #e7f0fb; color: #2f7dd6; }
.wfd-chat-kind.is-question[b-dssmgoa64y]    { background: #fbf2dd; color: #c98a1a; }
.wfd-chat-kind.is-contribution[b-dssmgoa64y]{ background: #e9f5ec; color: var(--tri-green); }
.wfd-chat-kind.is-tally[b-dssmgoa64y]       { background: #eef1f4; color: #5b6878; }
.wfd-chat-kind.is-verdict[b-dssmgoa64y]     { background: #f1ebff; color: #7c3aed; }
.wfd-chat-kind.is-note[b-dssmgoa64y]        { background: var(--tri-surface); color: var(--tri-muted); }

/* Das ganze Gespraech im Popup: Rundentrenner, dann je Eintrag Avatar links, Kopfzeile und Text. */
/* Die Runde ist eine Ueberschrift, kein Trenner: in der Signaturfarbe, groesser als der Text darunter
   und OHNE die Linie dahinter – die machte aus der Ueberschrift eine Naht. */
.wfd-chat-round[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .6rem;
    font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tri-green); margin: 1.1rem 0 .5rem;
}
.wfd-chat-round:first-child[b-dssmgoa64y] { margin-top: 0; }
.wfd-chat-entry[b-dssmgoa64y] { display: flex; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--tri-border); }
.wfd-chat-entry:first-of-type[b-dssmgoa64y] { border-top: 0; }
.wfd-chat-entry-ava[b-dssmgoa64y] { flex: 0 0 auto; width: 30px; }
.wfd-chat-entry-platform[b-dssmgoa64y] {
    width: 30px; height: 30px; border-radius: 50%; background: var(--tri-surface); color: var(--tri-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.wfd-chat-entry-body[b-dssmgoa64y] { min-width: 0; flex: 1 1 auto; }
.wfd-chat-entry-head[b-dssmgoa64y] { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; margin-bottom: .2rem; font-size: .78rem; }
.wfd-chat-role[b-dssmgoa64y] { font-size: .72rem; color: var(--tri-muted); font-style: italic; }
.wfd-chat-time[b-dssmgoa64y] { margin-left: auto; font-size: .72rem; color: var(--tri-faint); white-space: nowrap; }
/* File-Space im Team-Popup: eine Datei je Zeile, als Schaltflaeche zum Herunterladen. Bewusst eine
   Liste und kein Raster – der Name ist das Wichtigste und darf die ganze Breite haben. */
.wfd-filespace[b-dssmgoa64y] { display: flex; flex-direction: column; gap: .3rem; }
.wfd-file[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    border: 1px solid var(--tri-border); border-radius: .5rem; background: #fff;
    padding: .45rem .6rem;
}
.wfd-file:hover[b-dssmgoa64y] { border-color: var(--tri-green); background: var(--tri-green-bg); }
.wfd-file-ic[b-dssmgoa64y] { flex: 0 0 auto; font-size: 1.1rem; color: var(--tri-green); }
/* Der Name ist die Schaltflaeche zum Anschauen – ohne eigenes Knopf-Aussehen, damit die Zeile eine Zeile
   bleibt. Nur der Zeiger und die Unterstreichung beim Ueberfahren sagen, dass hier etwas passiert. */
.wfd-file-open[b-dssmgoa64y] {
    flex: 1 1 auto; min-width: 0; text-align: left;
    border: 0; background: none; padding: 0; cursor: pointer;
}
.wfd-file-open:hover .wfd-file-name[b-dssmgoa64y] { text-decoration: underline; }
.wfd-file-open.is-plain[b-dssmgoa64y] { cursor: pointer; }
.wfd-file-name[b-dssmgoa64y] { font-weight: 600; font-size: .88rem; color: var(--tri-text); overflow-wrap: anywhere; }
.wfd-file-meta[b-dssmgoa64y] { flex: 0 0 auto; font-size: .74rem; color: var(--tri-muted); white-space: nowrap; }
.wfd-file-dl[b-dssmgoa64y] {
    flex: 0 0 auto; width: 1.8rem; height: 1.8rem; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tri-border); border-radius: .4rem; background: #fff;
    color: var(--tri-muted); cursor: pointer;
}
.wfd-file-dl:hover[b-dssmgoa64y] { color: var(--tri-green); border-color: var(--tri-green); }

.wfd-chat-entry-text[b-dssmgoa64y]  .markdown-body { font-size: .85rem; overflow-wrap: anywhere; }
.wfd-chat-entry-text[b-dssmgoa64y]  .markdown-body > *:last-child { margin-bottom: 0; }
/* Ueberschriften im Beitrag nur leicht hervorheben: Die Mitglieder gliedern ihre Antworten gern mit „#"
   – in voller Groesse zerreisst das den Gespraechsfaden, und eine Wortmeldung sieht aus wie ein Kapitel. */
.wfd-chat-entry-text[b-dssmgoa64y]  .markdown-body :is(h1, h2, h3, h4, h5, h6) {
    font-size: .92rem; line-height: 1.3; font-weight: 700; margin: .2rem 0 .3rem; color: var(--tri-text);
}

/* Run-Nummer im Ergebnis-Knoten grau. */
.wfd-result .wfd-node-title[b-dssmgoa64y] { color: var(--tri-muted, #6b7280); }
/* Ergebnis-Knoten: finale Antwort sehr klein/grau, so viel wie passt. Klick öffnet die größere Ansicht. */
.wfd-result.has-result[b-dssmgoa64y] { cursor: pointer; animation: wfd-result-glow-b-dssmgoa64y 1.6s ease-in-out infinite; }
@keyframes wfd-result-glow-b-dssmgoa64y {
    0%   { box-shadow: 0 0 0 0 var(--wfd-glow), 0 2px 6px rgba(0,0,0,.14); }
    70%  { box-shadow: 0 0 0 9px rgba(124,58,237,0), 0 2px 6px rgba(0,0,0,.14); }
    100% { box-shadow: 0 0 0 0 rgba(124,58,237,0), 0 2px 6px rgba(0,0,0,.14); }
}
.wfd-result-text[b-dssmgoa64y] {
    margin-top: .5rem; color: var(--tri-muted, #6b7280);
    overflow: hidden; max-height: 7.5rem; position: relative;
}
/* Markdown-Vorschau im Node: kompakt/grau, so viel wie passt (unten ausgeblendet). */
.wfd-result-text[b-dssmgoa64y]  .markdown-body { font-size: .6rem; line-height: 1.3; color: var(--tri-muted, #6b7280); overflow-wrap: anywhere; word-break: break-word; }
.wfd-result-text[b-dssmgoa64y]  .markdown-body * { margin-top: 0; margin-bottom: .25rem; }
/* Überschriften in der Vorschau NICHT riesig rendern – nur leicht hervorgehoben, damit sie die Vorschau nicht sprengen. */
.wfd-result-text[b-dssmgoa64y]  .markdown-body :is(h1, h2, h3, h4, h5, h6) { font-size: .72rem; line-height: 1.25; font-weight: 700; margin: 0 0 .2rem; color: var(--tri-muted, #6b7280); }
.wfd-result-text[b-dssmgoa64y]  .markdown-body table { font-size: .55rem; border-collapse: collapse; }
.wfd-result-text[b-dssmgoa64y]  .markdown-body td, .wfd-result-text[b-dssmgoa64y]  .markdown-body th { padding: 0 .25rem; border: 1px solid var(--tri-border); }
.wfd-result-text[b-dssmgoa64y]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.wfd-result-empty[b-dssmgoa64y] { margin-top: .5rem; font-size: .68rem; color: var(--tri-faint, #9aa4af); font-style: italic; }
/* Kein eigener Scrollbereich – der gesamte Modal-Body (Ergebnis-Text + Anhänge) scrollt als Ganzes. */
.wfd-result-full[b-dssmgoa64y] { }

/* ===== Mail-Result-Knoten (Debug-Modus): erfasste, NICHT versendete E-Mails ===== */
.wfd-mailresult[b-dssmgoa64y] { --wfd-accent: #d97706; --wfd-glow: rgba(217,119,6,.35); --wfd-tint: #fff3e2; }

.wfd-mailresult .wfd-node-title[b-dssmgoa64y] { color: var(--tri-muted, #6b7280); }
.wfd-mailresult.has-result[b-dssmgoa64y] { cursor: pointer; }
.wfd-mailresult-list[b-dssmgoa64y] { margin-top: .45rem; display: flex; flex-direction: column; gap: .2rem; }
.wfd-mailresult-item[b-dssmgoa64y] { display: flex; align-items: baseline; gap: .3rem; font-size: .62rem; line-height: 1.25; color: var(--tri-muted, #6b7280); overflow: hidden; }
.wfd-mailresult-item i[b-dssmgoa64y] { color: #d97706; flex: 0 0 auto; }
.wfd-mailresult-to[b-dssmgoa64y] { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.wfd-mailresult-subj[b-dssmgoa64y] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.wfd-mailresult-more[b-dssmgoa64y] { font-size: .6rem; color: var(--tri-faint, #9aa4af); font-style: italic; margin-top: .1rem; }

/* Mail-Karten im Popup */
/* Ohne den orangen Balken links: In der Vorschau steht der Mailtext selbst im Mittelpunkt, und die
   Farbe des Mail-Knotens braucht hier niemanden mehr zu erinnern - das Fenster heisst ja „Mail-Vorschau". */
.wfd-mail-card[b-dssmgoa64y] { border: 1px solid var(--tri-border); border-radius: .5rem; padding: .6rem .75rem; margin-bottom: .75rem; background: #fffdf9; }
.wfd-mail-row[b-dssmgoa64y] { font-size: .85rem; margin-bottom: .15rem; }
.wfd-mail-label[b-dssmgoa64y] { display: inline-block; min-width: 4.5rem; font-weight: 700; color: var(--tri-muted, #6b7280); }
.wfd-mail-body[b-dssmgoa64y] { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--tri-border); }
.wfd-mail-body[b-dssmgoa64y]  .markdown-body { font-size: .85rem; }

/* Kopf mit Icon-Kachel.
   Mittig, und zwar bei JEDEM Knoten: Seit die Art als Schild ueber der Karte sitzt (.wfd-node-kind ist
   `position: absolute`), steht im Kopftext nur noch eine Sache – der Titel bzw. beim Sub-Agenten-Knoten
   der Schalter. Oben ausgerichtet klebte die an der Oberkante von Avatar oder Symbolkachel. */
.wfd-node-head[b-dssmgoa64y] { display: flex; align-items: center; gap: .6rem; }
/* Schalter „Folge-Agenten anzeigen" im Sub-Agent-Knoten (iPhone-Stil), unter dem Kicker. */
.wfd-sub-toggle[b-dssmgoa64y] { display: flex; align-items: center; gap: .45rem; padding-left: 0; cursor: pointer; }
.wfd-sub-toggle .form-check-input[b-dssmgoa64y] { width: 1.65rem; height: .9rem; margin: 0; cursor: pointer; float: none; }
.wfd-sub-toggle .form-check-input:checked[b-dssmgoa64y] { background-color: var(--tri-green); border-color: var(--tri-green); }
.wfd-sub-toggle .form-check-input:focus[b-dssmgoa64y] { border-color: var(--tri-green); box-shadow: 0 0 0 .2rem rgba(var(--tri-green-rgb),.2); }
/* Einzeilig: „Sub-Agenten anzeigen" brach hinter dem ersten Wort um und schob den Knoten in die
   Hoehe. Der Platz reicht, der Umbruch war nur nicht unterbunden. */
.wfd-sub-toggle-lbl[b-dssmgoa64y] { font-size: .74rem; color: #6b7178; user-select: none; white-space: nowrap; }
.wfd-node-ic[b-dssmgoa64y] {
    flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: .55rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wfd-tint, var(--tri-surface)); color: var(--wfd-accent, var(--tri-muted)); font-size: 1.05rem;
}
/* Runder Agenten-Avatar im Knoten (etwas größer als der Icon-Kasten) */
.wfd-node-avatar[b-dssmgoa64y] {
    flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: 50%;
    overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
}
.wfd-node-avatar img[b-dssmgoa64y] { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Rechts bleibt Platz fuer den Status-Punkt (0,6rem Abstand + 12px), der bei Trigger-, Entscheidungs-,
   Ergebnis- und Mail-Knoten absolut in der Ecke sitzt. Der AGENT braucht diesen Platzhalter nicht mehr:
   Dort stehen Laufzeit/Status und Auge seit 2.0.607 als eigene Flex-Zeile IM Kopf (.wfd-node-topright),
   nehmen sich ihren Platz also selbst und koennen den Titel nicht mehr ueberlaufen. */
.wfd-node-headtext[b-dssmgoa64y] { min-width: 0; padding-right: 1.4rem; }
.wfd-agent .wfd-node-headtext[b-dssmgoa64y] { padding-right: 0; }

/* Die Zeile oben rechts im Agenten-Kopf: Laufzeit ODER Status-Punkt, dazu das Auge. Oben ausgerichtet,
   damit sie bei einem zweizeiligen Namen nicht mitwandert. */
.wfd-node-topright[b-dssmgoa64y] {
    flex: 0 0 auto; margin-left: auto; align-self: flex-start;
    display: flex; align-items: center; gap: .45rem;
    /* Auf die Hoehe der ersten Titelzeile heben: Der Kopf ist mittig ausgerichtet, die Zeile soll aber
       in der Ecke sitzen. 2px gleichen die Oberlaenge der Schrift aus. */
    margin-top: 2px;
}
/* Im Fluss statt in der Ecke: Die absoluten Werte galten, solange jedes Stueck einzeln positioniert war. */
.wfd-node-topright .wfd-status-dot[b-dssmgoa64y],
.wfd-node-topright .wfd-node-runtime[b-dssmgoa64y],
.wfd-node-topright .wfd-sat-toggle[b-dssmgoa64y] { position: static; top: auto; right: auto; transform: none; }
/* Laufzeit (mm:ss) oben rechts im Ergebnis-Knoten – grau, klein, wie auf den Pipeline-Karten. */
.wfd-result-time[b-dssmgoa64y] { margin-left: auto; flex: 0 0 auto; align-self: flex-start; color: #9aa0a6; font-size: .76rem; white-space: nowrap; }

/* Fußbereich mit Aktions-Symbolen (immer sichtbar) */
/* Aktions-Buttons IMMER einzeilig: nicht umbrechen; bei zu vielen Buttons horizontal scrollen statt in eine 2. Zeile. */
/* `flex: 0 0 auto` ist kein Beiwerk: Die Agenten-Karte ist eine Flex-SPALTE, und ein Flex-Element darf
   darin standardmaessig schrumpfen. Genau das geschah, sobald die Leiste mehr Platz brauchte als die Karte
   uebrig hatte – sie wurde auf gut die halbe Hoehe gestaucht und schnitt ihre eigenen Knoepfe unten ab
   (gemessen: 20 px Hoehe fuer 38 px Inhalt). Sie behaelt jetzt ihre natuerliche Hoehe. */
.wfd-node-foot[b-dssmgoa64y] { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: .3rem; margin-top: .55rem; padding-top: .45rem; border-top: 1px solid var(--tri-border); overflow-x: auto; scrollbar-width: none; }
.wfd-node-foot[b-dssmgoa64y]::-webkit-scrollbar { display: none; }
.wfd-foot-btn[b-dssmgoa64y] {
    flex: 0 0 auto; width: 1.95rem; height: 1.95rem; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tri-border); border-radius: .4rem; background: #fff;
    color: var(--tri-muted); font-size: .95rem; cursor: pointer;
}
.wfd-foot-btn:hover[b-dssmgoa64y] { color: var(--tri-green); border-color: var(--tri-green); }
/* Tabler-Icons (ti) rendern bei gleicher font-size kleiner als Bootstrap-Icons → im Foot-Button angleichen. */
.wfd-foot-btn .ti[b-dssmgoa64y] { font-size: 1.2rem; }
.wfd-foot-decider[b-dssmgoa64y] { color: #c98a1a; border-color: #e2c89a; }
.wfd-foot-decider:hover[b-dssmgoa64y] { color: #c98a1a; border-color: #c98a1a; }
.wfd-foot-del:hover[b-dssmgoa64y] { color: var(--tri-red); border-color: var(--tri-red); }
/* Delegations-Button: Symbol + Anzahl → automatische Breite statt fester Quadrat-Kachel. */
.wfd-foot-deleg[b-dssmgoa64y] { width: auto; min-width: 1.95rem; padding: 0 .4rem; gap: .2rem; }
.wfd-foot-badge[b-dssmgoa64y] { font-size: .72rem; font-weight: 700; line-height: 1; }
.wfd-foot-stop[b-dssmgoa64y] { width: auto; padding: 0 .5rem; gap: .1rem; font-size: .72rem; font-weight: 400; color: var(--tri-red); background: #fff; border-color: var(--tri-red); }
.wfd-foot-stop:hover[b-dssmgoa64y] { color: #fff; background: var(--tri-red); border-color: var(--tri-red); }
.wfd-addlist[b-dssmgoa64y] { display: flex; flex-direction: column; gap: .25rem; max-height: 18rem; overflow-y: auto; }
.wfd-addlist-item[b-dssmgoa64y] {
    display: flex; align-items: center; width: 100%; text-align: left;
    border: 1px solid var(--tri-border); background: #fff; border-radius: .5rem; padding: .5rem .65rem;
    font-size: .92rem; color: var(--tri-text); cursor: pointer;
}
.wfd-addlist-item:hover[b-dssmgoa64y] { border-color: var(--tri-green); background: var(--tri-surface); }
.wfd-addlist-item > i[b-dssmgoa64y] { color: var(--tri-green); }
.wfd-sel-skill[b-dssmgoa64y] { display: flex; align-items: center; gap: .25rem; padding: .3rem .45rem; border: 1px solid var(--tri-border); border-radius: .5rem; background: #fff; font-size: .92rem; }
.wfd-addlist-item.picked[b-dssmgoa64y] { border-color: var(--tri-green); background: var(--tri-surface); font-weight: 600; }

/* Kompakte Tool-Auswahl mit Checkbox + Kurzbeschreibung (Tools-Popup). */
.wfd-toolpick-list[b-dssmgoa64y] { display: flex; flex-direction: column; gap: .15rem; max-height: 22rem; overflow-y: auto; }
.wfd-toolpick[b-dssmgoa64y] {
    display: flex; align-items: flex-start; gap: .5rem; cursor: pointer;
    padding: .3rem .45rem; border-radius: .4rem;
}
.wfd-toolpick:hover[b-dssmgoa64y] { background: var(--tri-surface); }
.wfd-toolpick > input[b-dssmgoa64y] { width: 1rem; height: 1rem; margin-top: 1px; flex: 0 0 auto; accent-color: var(--tri-green); cursor: pointer; }
.wfd-toolpick-text[b-dssmgoa64y] { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wfd-toolpick-name[b-dssmgoa64y] { font-size: .9rem; color: #4b5159; font-weight: 600; }
.wfd-toolpick-desc[b-dssmgoa64y] { font-size: .76rem; color: var(--tri-muted); }
/* Skill-Auswahl: Checkbox+Name oben, Pro-Skill-Positionsumschalter darunter (rechtsbündig). */
.wfd-skillpick[b-dssmgoa64y] { flex-direction: column; align-items: stretch; gap: .3rem; }
.wfd-skillpick-main[b-dssmgoa64y] { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.wfd-skillpick-main > input[b-dssmgoa64y] { width: 1rem; height: 1rem; margin-top: 1px; flex: 0 0 auto; accent-color: var(--tri-green); cursor: pointer; }
.wfd-skillpos[b-dssmgoa64y] { align-self: flex-end; }
.wfd-skillpos .btn[b-dssmgoa64y] { font-size: .72rem; padding: .12rem .55rem; }
.wfd-orderlist[b-dssmgoa64y] { display: flex; flex-direction: column; gap: .3rem; }
.wfd-order-item[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .25rem; padding: .45rem .55rem; font-size: .92rem;
    border: 1px solid var(--tri-border); border-radius: .5rem; background: #fff; cursor: grab; color: var(--tri-text);
}
.wfd-order-item.dragging[b-dssmgoa64y] { opacity: .5; }
.wfd-order-item .wfd-grip[b-dssmgoa64y] { color: var(--tri-faint); }
.wfd-order-prompt[b-dssmgoa64y] { background: #e7f0fb; border-color: #2f7dd6; color: #1f5c9e; }
.wfd-order-prompt .bi-chat-square-text[b-dssmgoa64y] { color: #2f7dd6; }
.wfd-proptabs .nav-link[b-dssmgoa64y] { padding: .3rem .7rem; font-size: .9rem; color: var(--tri-muted); }
.wfd-proptabs .nav-link.active[b-dssmgoa64y] { color: var(--tri-green); font-weight: 600; }
.wfd-snap[b-dssmgoa64y] {
    display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer;
    font-size: .8rem; color: var(--tri-text);
    /* Wie die schmale Leiste rechts: fast durchsichtig und nur leicht weichgezeichnet. Die beiden
       Kapseln schweben ueber dem Zeichenblatt, und was darunter liegt, soll sichtbar bleiben. */
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid var(--tri-border); border-radius: 1rem; padding: .35rem .7rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.wfd-snap input[b-dssmgoa64y] { cursor: pointer; }
.wfd-run-select[b-dssmgoa64y] { width: auto; max-width: 16rem; }
/* Tags am Knoten (sehr klein) */
.wfd-tags[b-dssmgoa64y] { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .35rem; }
.wfd-tag[b-dssmgoa64y] {
    font-size: .6rem; line-height: 1.2; font-weight: 600; color: #fff;
    background: var(--tg, var(--tri-green)); border-radius: .8rem; padding: .05rem .4rem; white-space: nowrap;
}
/* Tag-Auswahl im Editor-Popup */
.wfd-tagpick[b-dssmgoa64y] {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem;
    border: 1px solid var(--tg, var(--tri-border)); color: var(--tg, var(--tri-text));
    background: #fff; border-radius: 1rem; padding: .2rem .6rem; cursor: pointer;
}
.wfd-tagpick.on[b-dssmgoa64y] { background: var(--tg, var(--tri-green)); color: #fff; }

/* Verbindungs-Griff (rechte Kante, Mitte) – Verbindung ziehen */
/* `--wfd-port-y` setzt die Karte selbst, wenn sie unten ein Team traegt: Der Griff gehoert dann auf die
   halbe Hoehe des MODERATORS, nicht der ganzen Karte – sonst sitzt er neben dem dritten Mitglied. */
.wfd-connect[b-dssmgoa64y] {
    position: absolute; right: 0; top: var(--wfd-port-y, 50%); transform: translate(50%, -50%); width: 12px; height: 12px;
    border-radius: 50%; background: var(--wfd-accent, var(--tri-green)); border: none;
    cursor: crosshair; z-index: 4; touch-action: none;
}
.wfd-connect:hover[b-dssmgoa64y] { box-shadow: 0 0 0 4px var(--wfd-glow, rgba(var(--tri-green-rgb),.25)); }

/* Status-Kreis oben rechts */
.wfd-status-dot[b-dssmgoa64y] { position: absolute; top: .55rem; right: .6rem; width: 12px; height: 12px; border-radius: 50%; background: #c7cdd4; z-index: 3; }
/* Live-Laufzeit (hellgrau) oben rechts, solange der Agent läuft – ersetzt den Status-Punkt. */
.wfd-node-runtime[b-dssmgoa64y] { position: absolute; top: .4rem; right: .55rem; z-index: 3; display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-variant-numeric: tabular-nums; line-height: 1; color: #868e96; cursor: pointer;
    /* Zwei Zeilen untereinander: Laufzeit oben, Kosten darunter. Linksbuendig ausgerichtet, damit
       Uhr und Muenze genau uebereinander stehen - bei rechtsbuendigen Zeilen verschob die
       unterschiedliche Textbreite („0:39" gegen „0,0 ct") die Symbole gegeneinander. */
    flex-direction: column; align-items: flex-start; gap: .1rem;
}
.wfd-node-runtime-row[b-dssmgoa64y] { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.wfd-node-runtime i[b-dssmgoa64y] { font-size: .8rem; color: #868e96; }
.wfd-status-idle[b-dssmgoa64y] { background: #c7cdd4; }
.wfd-status-running[b-dssmgoa64y] { background: var(--tri-green); cursor: pointer; box-shadow: 0 0 0 0 rgba(var(--tri-green-rgb),.5); animation: wfd-pulse-b-dssmgoa64y 0.7s infinite; }
.wfd-status-done[b-dssmgoa64y] { background: var(--tri-green); cursor: pointer; }
.wfd-status-error[b-dssmgoa64y] { background: var(--tri-red); cursor: pointer; }
.wfd-status-waiting[b-dssmgoa64y] { background: #e08e0b; cursor: pointer; }
@keyframes wfd-pulse-b-dssmgoa64y { 0% { box-shadow: 0 0 0 0 rgba(var(--tri-green-rgb),.5); } 70% { box-shadow: 0 0 0 6px rgba(var(--tri-green-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--tri-green-rgb),0); } }
/* Laufender Agent: oranger Glow am Knoten */
.wfd-node.wfd-node-running[b-dssmgoa64y] { border-color: #e08e0b; animation: wfd-node-glow-b-dssmgoa64y 1.3s ease-in-out infinite; }
@keyframes wfd-node-glow-b-dssmgoa64y {
    0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 2px rgba(224,142,11,.35), 0 0 10px 2px rgba(224,142,11,.30); }
    50%      { box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 3px rgba(224,142,11,.65), 0 0 22px 6px rgba(224,142,11,.55); }
}
/* Gatekeeper pulsiert rot mit, solange der überwachte Worker läuft. */
.wfd-node.wfd-node-running-gk[b-dssmgoa64y] { border-color: #d12f2f; animation: wfd-node-glow-gk-b-dssmgoa64y 1.3s ease-in-out infinite; }
@keyframes wfd-node-glow-gk-b-dssmgoa64y {
    0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 2px rgba(209,47,47,.35), 0 0 10px 2px rgba(209,47,47,.30); }
    50%      { box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 3px rgba(209,47,47,.70), 0 0 22px 6px rgba(209,47,47,.55); }
}
.wfd-start-btns[b-dssmgoa64y] { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .5rem; }
.wfd-run-btn[b-dssmgoa64y] {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 2px solid #2f7dd6; border-radius: 50%; background: transparent; color: #2f7dd6;
    font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.wfd-run-btn:hover[b-dssmgoa64y] { background: rgba(47,125,214,.12); }
.wfd-run-btn i[b-dssmgoa64y] { margin-left: 2px; }
/* Chat-/Test-Dialog-Button: gleiche blaue Akzentfarbe wie „Auslösen". */
.wfd-chat-btn i[b-dssmgoa64y] { margin-left: 0; }
/* Debug-Start-Button: bernsteinfarben (Käfer) – startet den Lauf im Debug-Modus (Mail-Erfassung statt Versand). */
.wfd-debug-btn[b-dssmgoa64y] { border-color: #d97706; color: #d97706; }
.wfd-debug-btn i[b-dssmgoa64y] { margin-left: 0; }
.wfd-debug-btn:hover[b-dssmgoa64y] { background: rgba(217,119,6,.12); }

/* Prompt-Popup (Markdown-Editor + Vorschau + Nachschärfen) */
.wfd-modal-backdrop[b-dssmgoa64y] { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.32); display: flex; align-items: center; justify-content: center; }
.wfd-modal[b-dssmgoa64y] { background: #fff; border-radius: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 28px 70px rgba(0,0,0,.55); width: min(740px, 92vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
/* Kopfband aller Designer-Dialoge: dunkel, wie im Zuordnungs-Dialog. Ein heller Kopf mit Trennstrich
   zerschnitt die Fläche zweimal; das dunkle Band trennt Kopf und Arbeitsbereich ohne zusätzliche Linie. */
/* Dieselbe Flaeche wie jeder andere Dialogkopf - siehe .user-modal-head in app.css. */
.wfd-modal-head[b-dssmgoa64y] { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.25rem; background: var(--wl-signature, var(--tri-green)); border-bottom: 0; }
/* Weißes ✕ auf dunklem Feld. Bootstraps `.btn-close` bringt ein SCHWARZES Symbol als background-image
   mit; ein `filter: invert(1)` hätte auch die Fläche mitgedreht (der Knopf wurde weiß). Deshalb wird das
   Bild ersetzt, nicht gefiltert. */
.wfd-modal-head > .btn-close[b-dssmgoa64y] {
    margin-left: auto; flex: 0 0 auto; opacity: 1; width: 2.1rem; height: 2.1rem; padding: 0;
    border-radius: .6rem; background-color: rgba(255, 255, 255, .18); background-size: .85rem; background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.wfd-modal-head > .btn-close:hover[b-dssmgoa64y] { background-color: rgba(255, 255, 255, .3); }
.wfd-modal-ic[b-dssmgoa64y] { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; background: #2c2e30; color: var(--tri-green); font-size: 1.2rem; }
/* Avatar im Kopfband – gleiche Form wie im Zuordnungs-Dialog. */
.wfd-modal-avatar[b-dssmgoa64y] { flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 2px #2c2e30; }
/* Der Zwecktext steht WEISS auf dem grünen Band. Das Grau stammte aus der dunklen
   Seitenleiste, wo es passte; auf dem Kopfband war es kaum zu lesen. Unterschieden
   wird er von der Überschrift über Größe und Versalien, nicht über die Farbe. */
.wfd-modal-head .wfd-panel-kicker[b-dssmgoa64y] { color: #fff; }
.wfd-modal-head .wfd-panel-title[b-dssmgoa64y] { color: #fff; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
/* Die Agentennummer bleibt hellgrün wie überall und steht VOR dem Namen. */
.wfd-modal-head .agent-num-inline[b-dssmgoa64y] { font-size: inherit; margin-right: 0; }
.wfd-modal-headtext[b-dssmgoa64y] { min-width: 0; }
.wfd-modal-body[b-dssmgoa64y] { padding: 1.25rem; overflow-y: auto; }

/* Arbeitsflaeche des Teams: FESTE Hoehe, Register fest, nur der Inhalt darunter scrollt.
   Die feste Hoehe haelt zugleich den Hausstandard ein – der Dialog springt beim Registerwechsel nicht,
   obwohl Gespraech und Dateiliste unterschiedlich lang sind. */
.wfd-team-modal[b-dssmgoa64y] { height: min(88vh, 900px); }
.wfd-team-body[b-dssmgoa64y] { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wfd-team-body > .trinidat-tabs[b-dssmgoa64y] { flex: 0 0 auto; }
.wfd-team-scroll[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Aufgaben-Popup: Master-Detail (links Liste, rechts Details). FESTE Höhe → kein Größensprung bei Task-Auswahl;
   die beiden Spalten scrollen intern. */
.wfd-tasks-modal[b-dssmgoa64y] { height: min(80vh, 760px); }
.wfd-tasks-body[b-dssmgoa64y] { flex: 1 1 auto; display: flex; flex-direction: row; gap: 0; padding: 0; overflow: hidden; min-height: 0; }
.wfd-tasks-list[b-dssmgoa64y] { flex: 0 0 250px; max-width: 250px; border-right: 1px solid var(--tri-border, #e5e7eb); overflow-y: auto; padding: .75rem .5rem; background: #fafbfa; }
.wfd-task-item[b-dssmgoa64y] { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: transparent; border-radius: .5rem; padding: .45rem .6rem; color: inherit; font-size: .9rem; }
.wfd-task-item:hover[b-dssmgoa64y] { background: #eef4ef; }
.wfd-task-item.active[b-dssmgoa64y] { background: var(--tri-green-bg-active); color: var(--tri-green); font-weight: 600; }
.wfd-task-item-title[b-dssmgoa64y] { flex: 1 1 auto; min-width: 0; }
.wfd-task-item-status[b-dssmgoa64y] { font-size: .75rem; color: var(--tri-muted, #6b7280); flex: 0 0 auto; }
.wfd-tasks-detail[b-dssmgoa64y] { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 1rem 1.15rem; }
.wfd-task-detail-head[b-dssmgoa64y] { display: flex; align-items: baseline; gap: .5rem; padding-bottom: .5rem; margin-bottom: .25rem; border-bottom: 1px solid #eef1ee; }
.wfd-task-detail-title[b-dssmgoa64y] { font-weight: 700; font-size: 1.05rem; }
.wfd-task-field-label[b-dssmgoa64y] { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tri-muted, #6b7280); font-weight: 600; margin: .8rem 0 .25rem; }
.wfd-task-field-box[b-dssmgoa64y] { background: #f7f9f7; border: 1px solid #eef1ee; border-radius: .5rem; padding: .5rem .75rem; font-size: .9rem; overflow-x: auto; }
.wfd-modal-body .wfd-lbl:first-child[b-dssmgoa64y] { margin-top: 0; }
.wfd-modal-body .form-control[b-dssmgoa64y], .wfd-modal-body .form-select[b-dssmgoa64y] { border-radius: .6rem; padding: .55rem .75rem; font-size: .92rem; }
.wfd-modal-body .form-control:focus[b-dssmgoa64y], .wfd-modal-body .form-select:focus[b-dssmgoa64y] { border-color: var(--tri-green); box-shadow: 0 0 0 3px rgba(var(--tri-green-rgb),.18); }
/* Fußzeile ohne Trennstrich und ohne graue Fläche; die Schaltflächen stehen rechts. */
.wfd-modal-foot[b-dssmgoa64y] { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .4rem 1.25rem 1rem; border-top: 0; background: transparent; }
.wfd-prompt-area[b-dssmgoa64y] { min-height: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; width: 100%; }
.wfd-prompt-preview[b-dssmgoa64y] { min-height: 360px; max-height: 52vh; overflow: auto; border: 1px solid var(--tri-border); border-radius: .5rem; padding: .75rem; }

/* Editor + Tool-Calls-Panel nebeneinander. Das Panel sitzt rechts (Vorlage: Browser-/TreeView-Fenster). */
.wfd-prompt-main[b-dssmgoa64y] { display: flex; align-items: stretch; gap: 0; position: relative; }
.wfd-prompt-editorcol[b-dssmgoa64y] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Panel-Grundgestalt (angeheftet UND Flyout) */
.wfd-toolpanel[b-dssmgoa64y] { background: var(--tri-surface); display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--tri-border); border-radius: .6rem; }
.wfd-toolpanel-docked[b-dssmgoa64y] { position: relative; margin-left: .6rem; }
/* Ziehgriff an der linken Kante des angedockten Panels */
.wfd-toolpanel-resize[b-dssmgoa64y] { position: absolute; top: 0; left: -6px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; }
.wfd-toolpanel-resize:hover[b-dssmgoa64y] { background: var(--tri-green); opacity: .35; border-radius: .3rem; }
/* Schmale Leiste mit gedrehtem „Tools"-Text; beim Hover klappt das Flyout aus und überlappt das Prompt-Feld */
.wfd-toolpanel-rail[b-dssmgoa64y] { flex: 0 0 30px; width: 30px; margin-left: .6rem; border: 1px solid var(--tri-border); border-radius: .6rem; background: #fff; position: relative; cursor: pointer; }
.wfd-toolpanel-rail:hover[b-dssmgoa64y] { background: var(--tri-surface); }
.wfd-toolpanel-tab[b-dssmgoa64y] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .8rem; font-weight: 600; color: var(--tri-green); user-select: none; }
.wfd-toolpanel-tab > i[b-dssmgoa64y] { writing-mode: horizontal-tb; }
/* Flyout liegt über dem Editor (rechtsbündig, dehnt sich nach links). Im Ruhezustand NICHT nach rechts
   verschieben (das erzeugte sonst einen horizontalen Scrollbalken im Dialog) – nur ein-/ausblenden. */
.wfd-toolpanel-flyout[b-dssmgoa64y] { position: absolute; top: 0; right: 0; height: 100%; z-index: 30; box-shadow: -8px 0 22px rgba(0,0,0,.16); transform: translateX(-6px); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s ease; }
.wfd-toolpanel-rail:hover .wfd-toolpanel-flyout[b-dssmgoa64y] { transform: translateX(0); opacity: 1; pointer-events: auto; }
.wfd-toolpanel-body[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .6rem .75rem; }
.wfd-toolpanel .wfd-tree-head[b-dssmgoa64y] { border-bottom: 1px solid var(--tri-border); }
/* Editor-Werkzeugleiste: bei Bedarf auf zwei Zeilen umbrechen */
.wfd-prompt-toolbar[b-dssmgoa64y] { display: flex; align-items: center; flex-wrap: wrap; row-gap: .35rem; gap: .25rem; margin-bottom: .6rem; }
.wfd-prompt-toolbar .btn[b-dssmgoa64y] { flex: 0 0 auto; }
/* Immer sichtbare Prompt-Suche INNERHALB der Button-Zeile (ersetzt den früheren Abstandshalter, füllt die Mitte). */
.wfd-prompt-find[b-dssmgoa64y] { flex: 1 1 auto; min-width: 8rem; display: flex; align-items: center; gap: .25rem; }
.wfd-prompt-find-ic[b-dssmgoa64y] { color: var(--tri-muted, #6b7280); margin: 0 .05rem 0 .4rem; flex: 0 0 auto; }
.wfd-prompt-find-input[b-dssmgoa64y] { flex: 1 1 auto; min-width: 0; border: 1px solid var(--tri-border, #ced4da); border-radius: .375rem; padding: .25rem .55rem; font-size: .9rem; line-height: 1.4; }
.wfd-prompt-find-input:focus[b-dssmgoa64y] { outline: none; border-color: var(--tri-green); box-shadow: 0 0 0 .15rem rgba(46,125,50,.15); }
.wfd-prompt-find-count[b-dssmgoa64y] { flex: 0 0 auto; font-size: .78rem; color: var(--tri-muted, #6b7280); min-width: 2.6rem; text-align: right; white-space: nowrap; }
/* Vollbild-Variante des Prompt-Modals: am Viewport angeheftet, damit es zuverlässig den ganzen
   Bildschirm füllt (height:92vh greift im zentrierenden Flex-Backdrop nicht immer). */
.wfd-modal.wfd-modal-fs[b-dssmgoa64y] { position: fixed; inset: 3vh 2vw; margin: 0; width: auto !important; max-width: none; height: auto; max-height: none; }
/* Im Vollbild füllt der Editor (Textarea bzw. Vorschau) den gesamten verfügbaren Platz. */
.wfd-modal.wfd-modal-fs .wfd-modal-body[b-dssmgoa64y] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wfd-modal.wfd-modal-fs .wfd-prompt-toolbar[b-dssmgoa64y] { flex: 0 0 auto; }
.wfd-modal.wfd-modal-fs .wfd-prompt-main[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; }
.wfd-modal.wfd-modal-fs .wfd-prompt-editorcol[b-dssmgoa64y] { min-height: 0; }
.wfd-modal.wfd-modal-fs .wfd-prompt-area[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; resize: none; }
.wfd-modal.wfd-modal-fs .wfd-prompt-preview[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Prompt-Dialog (nicht-Vollbild): feste, hohe Dialoghöhe, damit Editor UND Tools-Leiste die
   volle Höhe des Dialogfensters einnehmen (statt nur die Inhaltshöhe der Textarea). */
.wfd-modal-prompt:not(.wfd-modal-fs)[b-dssmgoa64y] { height: 84vh; }
/* Lauf-/Dialog-Popup: feste (eher große) Höhe; der Inhalt scrollt, das Fenster wächst nicht mit. Der Body füllt
   den Platz zwischen Kopf und Fuß (Buttons bleiben unten), der freie Raum steht dem Inhalt zur Verfügung. */
.wfd-modal-run:not(.wfd-modal-fs)[b-dssmgoa64y] { height: min(82vh, 780px); }
.wfd-modal-run .wfd-modal-body[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; }
/* Eigenschaften-Dialog: feste Höhe, damit das Fenster beim Tab-Wechsel NICHT springt. Alle variablen Inhalte
   (auch Name/Provider/Metadaten) liegen im scrollbaren Tab-Body; nur der Tab-Streifen bleibt fix. */
.wfd-modal-props[b-dssmgoa64y] { height: min(92vh, 900px); }   /* Die Sicherheits-Register zeigen Status, Bereiche, Aktion und Ablauf - dafuer braucht der Dialog Hoehe */
.wfd-modal-props .wfd-modal-body[b-dssmgoa64y] { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
/* Die seitlichen .25rem sind kein Schmuck, sondern Platz für die NEGATIVEN Außerabstände der
   Bootstrap-Raster darin (`row g-2` zieht links und rechts je 4px heraus). Ohne sie ragt jedes
   Raster 4px über den Rand, und weil senkrecht gerollt wird, erzwingt das nach CSS-Regel auch
   waagerecht eine Rollleiste - ein grauer Balken unter dem Dialog, ohne dass es etwas zu rollen
   gäbe. Verstecken (`overflow-x: hidden`) wäre die schlechtere Lösung: Dann bliebe echter,
   zu breiter Inhalt unbemerkt abgeschnitten. */
.wfd-prop-tabbody[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-inline: .25rem; }
/* Der Registerrumpf ist eine Flex-Spalte (damit der JSON-Editor mitwachsen kann). Flex-Kinder schrumpfen
   aber von sich aus unter ihre Inhaltshöhe, sobald der Rumpf zu voll wird - dann rutschen die Hinweistexte
   ineinander und überlagern die nächste Zeile (gesehen im Register „Verhalten"). Kein Kind darf schrumpfen;
   der Rumpf scrollt stattdessen. Wer wachsen soll, sagt es ausdrücklich (.json-editor unten). */
.wfd-prop-tabbody > *[b-dssmgoa64y] { flex-shrink: 0; }
/* Payload-Editor füllt den verfügbaren Platz des Tabs (Textarea wächst mit). */
.wfd-prop-tabbody[b-dssmgoa64y]  .json-editor { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wfd-prop-tabbody[b-dssmgoa64y]  .json-editor textarea { flex: 1 1 auto; min-height: 6rem; resize: none; }
/* Beschreibungs-Tab: Textfeld füllt den verfügbaren Platz des Tabs. */
.wfd-desc-tab[b-dssmgoa64y] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wfd-desc-area[b-dssmgoa64y] { flex: 1 1 auto; min-height: 6rem; resize: none; }
/* Beschreibung wird jetzt im Markdown-Editor (EasyMDE) editiert – Spalte füllt den Tab. */
.wfd-desc-mdcol[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wfd-modal-prompt .wfd-modal-body[b-dssmgoa64y] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wfd-modal-prompt .wfd-prompt-toolbar[b-dssmgoa64y] { flex: 0 0 auto; }
.wfd-modal-prompt .wfd-prompt-main[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; }
.wfd-modal-prompt .wfd-prompt-editorcol[b-dssmgoa64y] { min-height: 0; }
.wfd-modal-prompt .wfd-prompt-area[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; resize: none; }
.wfd-modal-prompt .wfd-prompt-preview[b-dssmgoa64y] { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Prompt-/Beschreibungs-Editor-Spalten: fuellen (Editor-Optik + Ueberschriften-Zaehmung liefert die <PromptEditor>-Komponente). */
.wfd-prompt-mdcol[b-dssmgoa64y] { min-height: 0; display: flex; flex-direction: column; }

/* Bestätigungsdialog „Prozess starten?" */
.wfd-confirm-backdrop[b-dssmgoa64y] { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.32); display: flex; align-items: center; justify-content: center; }
.wfd-confirm[b-dssmgoa64y] {
    background: #fff; border-radius: .8rem; box-shadow: 0 20px 50px rgba(0,0,0,.3);
    padding: 1.5rem 1.6rem; max-width: 24rem; text-align: center;
}
.wfd-confirm-icon[b-dssmgoa64y] { font-size: 2.4rem; color: var(--tri-green); line-height: 1; }
.wfd-confirm-title[b-dssmgoa64y] { font-size: 1.1rem; font-weight: 700; color: var(--tri-text); margin-top: .4rem; }
.wfd-confirm-text[b-dssmgoa64y] { font-size: .9rem; color: var(--tri-muted); margin-top: .35rem; }
.wfd-confirm-actions[b-dssmgoa64y] { display: flex; gap: .6rem; justify-content: center; margin-top: 1.1rem; }

/* Agentennamen + Kicker (Typ · #Nr) in der Akzentfarbe (Worker grün) */
.wfd-agent .wfd-node-title[b-dssmgoa64y] { color: var(--tri-green); }
/* (entfallen) Die Art-Zeile ist jetzt ein farbiges Schild mit weisser Schrift – eine
   zweite Farbregel faerbte den Text in der Schildfarbe und machte ihn damit unsichtbar. */
/* Titel bei Trigger/Entscheidung dunkelgrau */
.wfd-trigger .wfd-node-title[b-dssmgoa64y], .wfd-decision .wfd-node-title[b-dssmgoa64y] { color: #3a4047; }

.wfd-option[b-dssmgoa64y] { display: flex; align-items: center; gap: .4rem; font-size: .82rem; padding: .25rem .1rem; border-top: 1px solid var(--tri-border); margin-top: .25rem; }
.wfd-option:first-of-type[b-dssmgoa64y] { border-top: none; }
.wfd-option-dot[b-dssmgoa64y] { width: .5rem; height: .5rem; border-radius: 50%; background: #c98a1a; flex: 0 0 auto; }
.wfd-option-label[b-dssmgoa64y] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.wfd-opt-name[b-dssmgoa64y] { font-weight: 600; color: var(--tri-green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Agentennummer (z. B. „#79") vor dem Sub-Agent-Namen: fett + grau, mit Abstand (analog .agent-num). */
.wfd-opt-num[b-dssmgoa64y] { color: var(--tri-subtle); font-weight: 600; margin-right: .35rem; }
.wfd-option[b-dssmgoa64y] { cursor: pointer; }
.wfd-option:hover .wfd-opt-name[b-dssmgoa64y] { color: var(--tri-green-dark); }
.wfd-opt-cond[b-dssmgoa64y] { font-size: .72rem; color: var(--tri-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfd-option-btn[b-dssmgoa64y] { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tri-border); background: #fff; border-radius: .3rem; color: var(--tri-muted); font-size: .76rem; cursor: pointer; }
.wfd-option-btn:hover[b-dssmgoa64y] { background: var(--tri-surface); color: var(--tri-text); }
.wfd-option-del:hover[b-dssmgoa64y] { color: var(--tri-red); }

/* Drag & Zoom */
.wfd-node[b-dssmgoa64y] { cursor: grab; touch-action: none; }
.wfd-result[b-dssmgoa64y] { cursor: grab; }
.wfd-dragging[b-dssmgoa64y] { cursor: grabbing; box-shadow: 0 14px 30px rgba(0,0,0,.18); opacity: .96; z-index: 5; }
.wfd-zoom .btn[b-dssmgoa64y] { min-width: 2.2rem; }

/* Inline-Bearbeitungspanel */
.wfd-panel[b-dssmgoa64y] {
    width: 360px; flex: 0 0 360px;
    border-left: 1px solid var(--tri-border);
    display: flex; flex-direction: column; min-height: 0; background: #fff;
    position: relative;
}
.wfd-panel-resize[b-dssmgoa64y] { position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
.wfd-panel-resize:hover[b-dssmgoa64y] { background: linear-gradient(to right, var(--tri-green), transparent); opacity: .4; }
.wfd-panel-head[b-dssmgoa64y] { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--tri-border); }
.wfd-panel-kicker[b-dssmgoa64y] { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tri-faint); }
.wfd-panel-title[b-dssmgoa64y] { font-size: 1.05rem; font-weight: 700; color: var(--tri-text); }
.wfd-panel-body[b-dssmgoa64y] { flex: 1 1 auto; overflow-y: auto; padding: .8rem 1rem; }
.wfd-panel-foot[b-dssmgoa64y] { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--tri-border); }
.wfd-lbl[b-dssmgoa64y] { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tri-faint); margin: .85rem 0 .25rem; }
.wfd-panel-body > .wfd-lbl:first-child[b-dssmgoa64y] { margin-top: 0; }
.wfd-prompt[b-dssmgoa64y] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.wfd-checklist[b-dssmgoa64y] { max-height: 9rem; overflow-y: auto; border: 1px solid var(--tri-border); border-radius: .5rem; padding: .4rem .55rem; }
.wfd-check[b-dssmgoa64y] { display: flex; align-items: center; gap: .45rem; font-size: .84rem; padding: .12rem 0; cursor: pointer; }
.wfd-check input[b-dssmgoa64y] { width: 1rem; height: 1rem; flex: 0 0 auto; }
.wfd-empty[b-dssmgoa64y] { font-size: .8rem; color: var(--tri-muted); background: var(--tri-surface); border-radius: .5rem; padding: .5rem .6rem; }
.wfd-decisions[b-dssmgoa64y] { margin-top: .5rem; }
.wfd-decision-row[b-dssmgoa64y] { border: 1px solid var(--tri-border); border-left: 3px solid #c98a1a; border-radius: .5rem; padding: .5rem; margin-bottom: .5rem; }
.wfd-kv[b-dssmgoa64y] { display: flex; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--tri-border); font-size: .86rem; }
.wfd-kv:last-child[b-dssmgoa64y] { border-bottom: none; }
.wfd-kv-k[b-dssmgoa64y] { flex: 0 0 5rem; font-weight: 700; color: var(--tri-faint); }
.wfd-block[b-dssmgoa64y] { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.wfd-block:hover[b-dssmgoa64y] { border-color: var(--tri-green); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Run-Auswahl als suchbares Popup (ersetzt das frühere Dropdown). */
.wfd-runpicker-wrap[b-dssmgoa64y] { position: relative; }
/* Unter dem Kopf (50), ueber Zeichenblatt und Leiste (40) - Begruendung im Markup. */
.wfd-runpicker-backdrop[b-dssmgoa64y] { position: fixed; inset: 0; z-index: 45; }
.wfd-runpicker[b-dssmgoa64y] {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1050;
    width: 22rem; max-height: 24rem; overflow: auto;
    background: #fff; border: 1px solid var(--tri-border); border-radius: .6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .5rem;
}
.wfd-runpicker-list[b-dssmgoa64y] { display: flex; flex-direction: column; gap: 2px; }
.wfd-runpicker-item[b-dssmgoa64y] {
    display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left;
    border: none; background: none; border-radius: .4rem; padding: .35rem .5rem; cursor: pointer; color: var(--tri-text);
}
.wfd-runpicker-item:hover[b-dssmgoa64y] { background: #f1f5f2; }
.wfd-runpicker-item.active[b-dssmgoa64y] { background: var(--tri-bg-active, var(--tri-green-bg-active)); }
.wfd-runpicker-id[b-dssmgoa64y] { font-weight: 600; font-size: .8rem; flex: 0 0 auto; }
.wfd-runpicker-meta[b-dssmgoa64y] { color: var(--tri-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Moderne Auswahl-Dialoge (Tools/MCP/Skills): Suchfeld + Karten mit Toggle (Redmine #106680) */
.wfd-picksearch[b-dssmgoa64y] { position: relative; margin-bottom: .6rem; }
.wfd-picksearch i[b-dssmgoa64y] { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--tri-muted); font-size: .9rem; }
.wfd-picksearch input[b-dssmgoa64y] { width: 100%; padding: .5rem .8rem .5rem 2.1rem; border: 1px solid var(--tri-border, #dee2e6); border-radius: .65rem; font-size: .9rem; outline: none; }
.wfd-picksearch input:focus[b-dssmgoa64y] { border-color: var(--tri-green); box-shadow: 0 0 0 .15rem rgba(var(--tri-green-rgb),.15); }
.wfd-pickcard-list[b-dssmgoa64y] { display: flex; flex-direction: column; gap: .5rem; max-height: 24rem; overflow-y: auto; padding: .15rem; }
.wfd-pickcard[b-dssmgoa64y] { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 1.5px solid var(--tri-border, #e3e6ea); border-radius: .7rem; cursor: pointer; transition: border-color .12s, background .12s; }
.wfd-pickcard:hover[b-dssmgoa64y] { border-color: #bcd9c2; }
.wfd-pickcard.on[b-dssmgoa64y] { border-color: var(--tri-green); background: #f1f8f2; }
.wfd-pickcard-ic[b-dssmgoa64y] { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .6rem; background: #eef1f3; display: flex; align-items: center; justify-content: center; color: #5b6470; font-size: 1.05rem; }
.wfd-pickcard.on .wfd-pickcard-ic[b-dssmgoa64y] { background: #d9efdd; color: var(--tri-green); }
.wfd-pickcard-text[b-dssmgoa64y] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.wfd-pickcard-name[b-dssmgoa64y] { font-weight: 600; color: #3a4047; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.wfd-pickcard-badge[b-dssmgoa64y] { font-size: .62rem; font-weight: 700; letter-spacing: .03em; color: var(--tri-green); background: #e2f3e6; padding: .05rem .4rem; border-radius: .5rem; }
/* Inaktiver (nicht zuordenbarer) Eintrag: ausgegraut, kein Hover, nicht anklickbar. */
.wfd-pickcard.disabled[b-dssmgoa64y] { opacity: .5; cursor: not-allowed; background: #f6f7f8; }
.wfd-pickcard.disabled:hover[b-dssmgoa64y] { border-color: var(--tri-border, #e3e6ea); }
.wfd-pickcard-badge-off[b-dssmgoa64y] { color: #8a929b; background: #e7eaee; }
.wfd-pickcard-desc[b-dssmgoa64y] { font-size: .78rem; color: var(--tri-muted); }
.wfd-pickswitch[b-dssmgoa64y] { flex: 0 0 auto; width: 2.4rem; height: 1.35rem; border-radius: 1rem; background: #cfd5db; position: relative; transition: background .12s; }
.wfd-pickswitch.on[b-dssmgoa64y] { background: var(--tri-green); }
.wfd-pickswitch-knob[b-dssmgoa64y] { position: absolute; top: 2px; left: 2px; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; transition: left .12s; }
.wfd-pickswitch.on .wfd-pickswitch-knob[b-dssmgoa64y] { left: 1.15rem; }



/* Erinnerungen-Popup: Master-Detail (links Liste, rechts Detail/Neuanlage). */
.rem-split[b-dssmgoa64y] { display: flex; gap: 1rem; align-items: stretch; min-height: 20rem; }
.rem-list[b-dssmgoa64y] { flex: 0 0 15rem; max-width: 15rem; border-right: 1px solid var(--tri-border); padding-right: .75rem; max-height: 26rem; overflow-y: auto; }
.rem-detail[b-dssmgoa64y] { flex: 1 1 auto; min-width: 0; }
.rem-list-item[b-dssmgoa64y] {
    display: block; width: 100%; text-align: left; border: 1px solid var(--tri-border);
    border-radius: .5rem; background: #fff; padding: .45rem .6rem; margin-bottom: .4rem; cursor: pointer;
}
.rem-list-item:hover[b-dssmgoa64y] { border-color: var(--tri-green); background: var(--tri-green-bg); }
.rem-list-item.active[b-dssmgoa64y] { border-color: var(--tri-green); background: var(--tri-green-bg-active); }
.rem-list-title[b-dssmgoa64y] { font-weight: 600; font-size: .82rem; color: var(--tri-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-list-meta[b-dssmgoa64y] { font-size: .7rem; color: var(--tri-muted, #6b7280); margin-top: .1rem; }

/* Tool-Calls-Panel: nach Anbieter gruppiert, eingeklappt (Kopf klickbar). */
.wfd-toolgroup[b-dssmgoa64y] { border-bottom: 1px solid var(--tri-border, #e5e7eb); }
.wfd-toolgroup-head[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .35rem; width: 100%;
    background: none; border: 0; padding: .4rem .15rem; text-align: left;
    font-size: .82rem; color: var(--tri-text, #1f2937); cursor: pointer;
}
.wfd-toolgroup-head:hover[b-dssmgoa64y] { color: var(--tri-green); }
.wfd-toolgroup-title[b-dssmgoa64y] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfd-toolgroup-count[b-dssmgoa64y] {
    margin-left: auto; flex-shrink: 0; font-size: .7rem; font-weight: 600;
    color: var(--tri-muted, #6b7280); background: var(--tri-surface, #f1f5f2);
    border-radius: 999px; padding: .05rem .45rem;
}
.wfd-toolgroup-body[b-dssmgoa64y] { padding: .1rem .1rem .4rem 1.15rem; }

/* Kritiker-Anweisung: klickbares Stift-Badge genau mittig auf der Agent↔Kritiker-Verbindungslinie.
   „has-instr" (grün gefüllt), sobald beim Worker eine Anweisung hinterlegt ist. */
.wfd-critic-instr[b-dssmgoa64y] {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 12;
    width: 1.7rem; height: 1.7rem; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tri-border); border-radius: .4rem; background: #fff;
    color: var(--tri-muted); font-size: .82rem; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.wfd-critic-instr:hover[b-dssmgoa64y] { color: var(--tri-green); border-color: var(--tri-green); }
/* „gefüllt" = grüner Rahmen/Icon, aber Hintergrund bleibt DECKEND WEISS, damit die Linie HINTER dem Rechteck
   verläuft (nicht durchscheint). */
.wfd-critic-instr.has-instr[b-dssmgoa64y] { color: var(--tri-green); border-color: var(--tri-green); background: #fff; }

/* ============================================================ Register „Prompt Injection"
   Kein Formular, sondern eine Lagebeschreibung: oben der Schutzstatus, darunter die beiden
   Prüfschichten, dann die Reaktion und zuletzt der Ablauf. Wer die Seite öffnet, soll SEHEN, wie gut
   der Agent geschützt ist – nicht drei Felder lesen und es sich zusammenreimen. */
.wfd-sec-kicker[b-dssmgoa64y] { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; }

.wfd-sec-status[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .75rem;
    background: var(--tri-green-bg); border: 1px solid rgba(var(--tri-green-rgb), .35);
    border-radius: .6rem; padding: .6rem .75rem; margin-bottom: .6rem;
}
.wfd-sec-status.is-off[b-dssmgoa64y] { background: #f6f7f8; border-color: #dee2e6; }
.wfd-sec-status-icon[b-dssmgoa64y] {
    width: 2.3rem; height: 2.3rem; flex: none; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--tri-green); color: #fff; font-size: 1.1rem;
}
.wfd-sec-status.is-off .wfd-sec-status-icon[b-dssmgoa64y] { background: #adb5bd; }
.wfd-sec-status-title[b-dssmgoa64y] { font-size: 1.05rem; font-weight: 700; color: var(--tri-green-dark); line-height: 1.2; }
.wfd-sec-status.is-off .wfd-sec-status-title[b-dssmgoa64y] { color: #495057; }
.wfd-sec-status-text[b-dssmgoa64y] { font-size: .82rem; color: #495057; }
.wfd-sec-bars[b-dssmgoa64y] { display: flex; gap: .2rem; align-items: flex-end; flex: none; }
.wfd-sec-bars span[b-dssmgoa64y] { width: .45rem; height: 1.4rem; border-radius: .15rem; background: #ced4da; }
.wfd-sec-bars span.is-on[b-dssmgoa64y] { background: var(--tri-green); }

.wfd-sec-head[b-dssmgoa64y] { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .3rem; }

/* Die oberste Gliederung auf „Data Governance". Das Register trägt ZWEI Themen (Aufbewahrung und
   Prompt Injection), und darunter stehen die kleinen Großbuchstaben-Kicker, die einzelne Karten und
   Felder beschriften. Wäre die Themenüberschrift genauso gesetzt, läse sich die Seite als eine lange
   Reihe gleichrangiger Zeilen - man sähe nicht, wo ein Thema anfängt und das andere aufhört.
   Deshalb bewusst ANDERS: gemischte Schreibung statt Versalien, größer, dunkelgrün, mit feiner
   Trennlinie. Der Unterschied liegt in der Art der Auszeichnung, nicht nur in der Größe. */
.wfd-gov-head[b-dssmgoa64y] {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wl-signature, var(--tri-green));
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--tri-border);
    margin-bottom: .55rem;
}

/* Das zweite Thema braucht Luft nach oben, damit die Trennung auch ohne Linie sichtbar bliebe. */
.wfd-gov-head.is-second[b-dssmgoa64y] { margin-top: 1.35rem; }

/* Die Datenklassen-Auswahl steht allein. Halbe Breite wie im Raster, aber ohne Raster. */
.wfd-gov-field[b-dssmgoa64y] { max-width: 26rem; margin-bottom: .25rem; }
.wfd-sec-count[b-dssmgoa64y] { font-size: .78rem; color: #6c757d; }

.wfd-sec-layers[b-dssmgoa64y] { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.wfd-sec-card[b-dssmgoa64y] { border: 1px solid #dee2e6; border-radius: .6rem; padding: .5rem .6rem; background: #fff; }
.wfd-sec-card.is-on[b-dssmgoa64y] { border-color: var(--tri-green); background: var(--tri-green-bg); }
.wfd-sec-card-head[b-dssmgoa64y] { display: flex; align-items: center; gap: .5rem; }
.wfd-sec-card-icon[b-dssmgoa64y] {
    width: 1.7rem; height: 1.7rem; flex: none; border-radius: .4rem; background: #eef0f2;
    display: flex; align-items: center; justify-content: center; font-size: .85rem; color: #495057;
}
.wfd-sec-card.is-on .wfd-sec-card-icon[b-dssmgoa64y] { background: #fff; color: var(--tri-green-dark); }
.wfd-sec-card-title[b-dssmgoa64y] { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.wfd-sec-card-text[b-dssmgoa64y] { font-size: .8rem; color: #495057; margin-top: .3rem; }
.wfd-sec-chips[b-dssmgoa64y] { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.wfd-sec-chips span[b-dssmgoa64y] {
    font-size: .72rem; padding: .1rem .45rem; border-radius: 1rem; background: #eef0f2; color: #495057;
}
.wfd-sec-chips span.is-green[b-dssmgoa64y] { background: rgba(var(--tri-green-rgb), .15); color: var(--tri-green-dark); }

.wfd-sec-options[b-dssmgoa64y] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.wfd-sec-opt[b-dssmgoa64y] {
    text-align: left; border: 1px solid #dee2e6; border-radius: .6rem; padding: .5rem .6rem;
    background: #fff; display: flex; flex-direction: column; gap: .25rem; cursor: pointer;
}
.wfd-sec-opt:hover[b-dssmgoa64y] { border-color: var(--tri-green); }
.wfd-sec-opt.is-on[b-dssmgoa64y] { border-color: var(--tri-green); background: var(--tri-green-bg); }
.wfd-sec-opt-head[b-dssmgoa64y] { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .92rem; }
.wfd-sec-opt-text[b-dssmgoa64y] { font-size: .78rem; color: #495057; line-height: 1.3; }
.wfd-sec-radio[b-dssmgoa64y] {
    width: .95rem; height: .95rem; flex: none; border-radius: 50%; border: 2px solid #adb5bd; background: #fff;
}
.wfd-sec-radio.is-on[b-dssmgoa64y] { border-color: var(--tri-green); box-shadow: inset 0 0 0 .19rem var(--tri-green); }
.wfd-sec-badge[b-dssmgoa64y] { font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .08rem .35rem; border-radius: .25rem; }
.wfd-sec-badge.is-red[b-dssmgoa64y] { background: rgba(192, 57, 43, .12); color: var(--tri-red); }
.wfd-sec-badge.is-amber[b-dssmgoa64y] { background: rgba(214, 158, 46, .18); color: #8a6100; }
.wfd-sec-badge.is-green[b-dssmgoa64y] { background: rgba(var(--tri-green-rgb), .16); color: var(--tri-green-dark); }

.wfd-sec-flow[b-dssmgoa64y] { background: #f6f7f8; border-radius: .6rem; padding: .45rem .6rem; margin-top: .55rem; }
.wfd-sec-flow-row[b-dssmgoa64y] { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.wfd-sec-flow-row i[b-dssmgoa64y] { color: #adb5bd; font-size: .75rem; }
.wfd-sec-step[b-dssmgoa64y] {
    font-size: .78rem; background: #fff; border: 1px solid #dee2e6; border-radius: .35rem; padding: .12rem .45rem;
}
.wfd-sec-step.is-red[b-dssmgoa64y] { background: rgba(192, 57, 43, .08); border-color: rgba(192, 57, 43, .3); color: var(--tri-red); }
.wfd-sec-step.is-amber[b-dssmgoa64y] { background: rgba(214, 158, 46, .12); border-color: rgba(214, 158, 46, .35); color: #8a6100; }
.wfd-sec-step.is-green[b-dssmgoa64y] { background: var(--tri-green-bg); border-color: rgba(var(--tri-green-rgb), .4); color: var(--tri-green-dark); }
/* Zweispaltige Aktionsauswahl (Datenschutz hat vier Möglichkeiten, Prompt Injection drei). */
.wfd-sec-options.is-2col[b-dssmgoa64y] { grid-template-columns: 1fr 1fr; }
.wfd-sec-badge.is-blue[b-dssmgoa64y] { background: rgba(13, 110, 253, .12); color: #0a58ca; }
.wfd-sec-step.is-muted[b-dssmgoa64y] { color: #adb5bd; text-decoration: line-through; background: #f1f3f5; }

/* Schalter oben rechts am Agenten-Knoten: blendet seine Satelliten (Werkzeuge, Konnektoren, Skills,
   LLM-Knoten) aus. Sitzt links neben dem Status-Punkt und bleibt unauffaellig, bis man hinzeigt. */
.wfd-sat-toggle[b-dssmgoa64y] {
    /* Mit dem Status-Punkt auf einer Linie: Der Punkt ist 12px hoch und sitzt bei top .55rem – sein
       Mittelpunkt liegt also bei .55rem + 6px. Der Knopf ist 1.1rem hoch und wird daran ausgerichtet. */
    position: absolute; top: calc(.55rem + 6px); right: 1.95rem; transform: translateY(-50%); z-index: 3;
    width: 1.1rem; height: 1.1rem; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: #b6bfc9; font-size: .82rem; cursor: pointer;
}
.wfd-sat-toggle:hover[b-dssmgoa64y] { color: var(--tri-green); }
.wfd-sat-toggle.is-off[b-dssmgoa64y] { color: var(--tri-green); }

/* Kompakte Agenten-Karte: Avatar, Nummer, Name – mehr nicht. Die Beschreibung entfaellt, die
   Schaltflaechen brechen in zwei Zeilen um, die Breite ist halbiert. Gesetzt wird sie ueber denselben
   Schalter wie das Ausblenden der Werkzeuge (Auge oben rechts) und automatisch, sobald ein Agent in ein
   Team aufgenommen wird: Dort stehen die Mitglieder dicht beieinander. */
.wfd-node.wfd-node-compact[b-dssmgoa64y] { min-height: 0; }
.wfd-node-compact .wfd-node-title[b-dssmgoa64y] { font-size: .92rem; line-height: 1.2; }
/* Ohne Beschreibung trennt die Linie nichts mehr – sie stuende direkt unter dem Namen. */
/* DREI Klassen mit Absicht: `.wfd-node.wfd-agent .wfd-node-foot` setzt `margin-top: auto` und schiebt die
   Leiste in der vollen Ansicht an den unteren Rand – dort entsteht der Abstand aus der Mindesthoehe. In der
   reduzierten Ansicht gibt es keine Mindesthoehe, `auto` wird damit zu 0, und eine Regel mit nur zwei
   Klassen verliert gegen sie. Daher hier derselbe Aufbau plus `.wfd-node-compact`. */
.wfd-node.wfd-agent.wfd-node-compact .wfd-node-foot[b-dssmgoa64y] {
    flex-wrap: wrap; row-gap: .3rem; overflow-x: visible;
    /* Nur die LINIE faellt weg, nicht der Abstand: .55rem Aussen- plus .45rem Innenabstand der vollen
       Ansicht ergeben zusammen 1rem – genau das steht hier als Aussenabstand. */
    border-top: 0; padding-top: 0; margin-top: 1rem;
}
.wfd-node-compact .wfd-tags[b-dssmgoa64y] { display: none; }

/* ---- Aufgeklapptes Teammitglied: aus seiner Zelle heraus ------------------------------------- */
/* Die grosse Karte steht weit unterhalb des Moderators. Erschiene sie uebergangslos, waere nicht zu
   sehen, aus welcher Zelle sie stammt – die Verbindungslinie allein ist dafuer zu leise. Sie waechst
   deshalb aus der Zelle: --wfd-ft-x ist deren waagerechter Versatz zur Kartenmitte, der senkrechte
   Weg ist der Abstand nach oben zur Besetzung. */
@keyframes wfd-aus-der-zelle-b-dssmgoa64y {
    from { opacity: 0; transform: translate(var(--wfd-ft-x, 0), -120px) scale(.22); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: none; }
}
.wfd-node-fromteam[b-dssmgoa64y] {
    animation: wfd-aus-der-zelle-b-dssmgoa64y .42s cubic-bezier(.2, .75, .3, 1) both;
    transform-origin: 50% 0;
}
/* Wer das Bild nicht bewegt haben will, bekommt es auch nicht bewegt. */
@media (prefers-reduced-motion: reduce) {
    .wfd-node-fromteam[b-dssmgoa64y] { animation: none; }
}

/* ---- Register „Abstimmungen" in der Arbeitsflaeche des Teams -------------------------------------
   Je Runde zuerst das Ergebnis (das will man wissen), darunter die Zaehlung und erst dann, wer wie
   gestimmt hat. Umgekehrt muesste man jedes Mal bis ans Ende lesen, um zu erfahren, wie es ausging. */
.wfd-vote-round[b-dssmgoa64y] { padding: .75rem 0; border-top: 1px solid var(--tri-border); }
.wfd-vote-round:first-of-type[b-dssmgoa64y] { border-top: 0; padding-top: 0; }
.wfd-vote-head[b-dssmgoa64y] { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.wfd-vote-head .wfd-chat-round[b-dssmgoa64y] { margin: 0; }
.wfd-vote-verdict[b-dssmgoa64y] { font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; }
.wfd-vote-verdict.is-yes[b-dssmgoa64y] { color: var(--tri-green); }
.wfd-vote-verdict.is-no[b-dssmgoa64y] { color: var(--tri-red, #d12f2f); }
.wfd-vote-rule[b-dssmgoa64y] { font-size: .78rem; color: var(--tri-muted); }
.wfd-vote-counts[b-dssmgoa64y] { display: flex; gap: .9rem; flex-wrap: wrap; margin: .45rem 0 .6rem; font-size: .84rem; }
.wfd-vote-count[b-dssmgoa64y] { color: var(--tri-muted); }
.wfd-vote-count.is-approve b[b-dssmgoa64y] { color: var(--tri-green); }
.wfd-vote-count.is-reject b[b-dssmgoa64y] { color: var(--tri-red, #d12f2f); }
.wfd-vote-line[b-dssmgoa64y] { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; padding: .3rem 0; }
/* Die Begruendung steht unter der Zeile und nimmt die volle Breite – bei einer Ablehnung ist sie das
   Wichtigste an der Stimme, nicht eine Fussnote daneben. */
.wfd-vote-reason[b-dssmgoa64y] { flex: 1 0 100%; font-size: .85rem; color: var(--tri-text); margin-top: .15rem; }

/* ---- Register „Tools/Konnektoren" im Browser --------------------------------------------------
   Eine kompakte Liste zum ZIEHEN: Menue-Symbol und Name, keine Nummer (Hausstandard fuer Werkzeuge
   und Konnektoren). Wer vier Werkzeuge verteilen will, zieht sie viermal – statt viermal durch den
   Zuordnungs-Dialog zu gehen. */
.wfd-toollist[b-dssmgoa64y] { padding: .35rem .5rem .75rem; }
.wfd-toollist-head[b-dssmgoa64y] {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tri-muted); margin: .5rem 0 .25rem; display: flex; align-items: center; gap: .4rem;
}
.wfd-toollist-count[b-dssmgoa64y] {
    font-size: .66rem; font-weight: 700; color: var(--tri-muted);
    background: var(--tri-surface); border-radius: 999px; padding: 0 .4rem;
}
.wfd-toollist-item[b-dssmgoa64y] {
    display: flex; align-items: center; gap: .5rem; padding: .25rem .4rem;
    border-radius: .4rem; cursor: grab; font-size: .84rem; color: var(--tri-text);
}
.wfd-toollist-item:hover[b-dssmgoa64y] { background: var(--tri-green-bg); }
.wfd-toollist-item:active[b-dssmgoa64y] { cursor: grabbing; }
.wfd-toollist-ic[b-dssmgoa64y] { flex: 0 0 auto; width: 1.1rem; text-align: center; color: var(--tri-green); }
.wfd-toollist-name[b-dssmgoa64y] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfd-toollist-empty[b-dssmgoa64y] { font-size: .8rem; color: var(--tri-muted); font-style: italic; padding: .1rem .4rem; }

/* ---- Kopf des Designers: grünes Banner, das über der Zeichenfläche schwebt (2.0.636) ----
   Der Designer lebt von der Fläche. Ein Kopf, der sie oben abschneidet, kostet dort mehr als er
   sagt – deshalb liegt er darüber, leicht durchscheinend und mit Schatten, damit man sieht, dass
   die Karte darunter weitergeht. Das Grün, die Durchsicht und die Weichzeichnung stehen zentral in
   app.css bei `.rbh-floating`; hier steht nur, WO er liegt und wie seine Zeile aufgebaut ist. */
.wfd[b-dssmgoa64y]  .rbh-sticky {
    position: absolute;
    top: 1rem;
    /* 1,5 rem: `.wfd` greift mit negativen Rändern über das Polster der Seite hinaus; mit 1 rem
       stand das Banner 8 px weiter aussen als der übrige Seiteninhalt. */
    left: 1.5rem;
    right: 1.5rem;
    /* ÜBER der rechten Leiste (40): Aus dem Kopf klappen Menüs auf (Runs, Neuer Agent), und die
       lagen sonst hinter dem Panel. Der Kopf verdeckt davon nichts – das Panel beginnt unter ihm. */
    z-index: 50;
}
.wfd[b-dssmgoa64y]  .rbh.rbh-floating {
    margin: 0 !important;
    box-shadow: 0 .75rem 2.2rem rgba(16, 24, 40, .26);
}
/* Durchscheinend über dem Zeichenblatt – aber im FARBEINDRUCK wie jeder andere Banner.

   Das ging mit dem gewöhnlichen Grün nicht: Es liegt hier über einem FAST WEISSEN Blatt (#fafbfc),
   und jede Durchsicht hellt es auf. Mit 88 % Deckkraft kam (62, 125, 73) heraus statt der
   (36, 108, 48) der übrigen Banner – sichtbar heller.

   Die Grundfarbe ist deshalb so weit abgedunkelt, dass sie bei 85 % Deckkraft über dem Blatt
   wieder genau diesen Ton ergibt (`--tri-green-schwebend-rgb`, Rechnung dort). Unterm Strich:
   MEHR Durchsicht als vorher und trotzdem derselbe Farbeindruck. Viel weiter geht es nicht –
   Grün ist dunkler als das Blatt, und ab etwa 15 % Durchsicht reicht selbst reines Schwarz als
   Grundfarbe nicht mehr an den Zielton heran.

   Mit BRANDING gilt dieselbe Rechnung mit der Kundenfarbe: `--wl-signature-float` wird von
   js/branding-boot.js auf :root gesetzt – vor dem ersten Bild, damit das Band nicht gruen aufblitzt.
   Ohne Branding bleibt es beim vorberechneten Gruen. */
.wfd[b-dssmgoa64y]  .rbh.rbh-floating .rbh-body {
    background: var(--wl-signature-float, rgba(var(--tri-green-schwebend-rgb), .85));
}

/* EINE Zeile: Links Avatar, Kennung und Name, rechts die Schaltflächen auf gleicher Höhe. Die
   Komponente setzt die Handlungen sonst in eine zweite Zeile unter die Kennung – hier gibt es keine
   Kennzahlen, die diese Zeile füllen würden, und zwei Zeilen wären eine halbe davon leer. */
.wfd[b-dssmgoa64y]  .rbh-body.is-tall { min-height: 0; }
.wfd[b-dssmgoa64y]  .rbh-body { padding: 1.15rem 1.5rem; }
/* Luft zwischen Kennung und Name: Mit .375 rem standen beide Zeilen aufeinander, und die Unterlänge
   des Namens stiess fast an die untere Kante. */
.wfd[b-dssmgoa64y]  .rbh-text { gap: .45rem; }
/* Der Avatar richtet sich nach den ZWEI Zeilen daneben, nicht nach der Vorgabe der Komponente
   (46 px, auf einen einzeiligen Kopf gerechnet). */
.wfd[b-dssmgoa64y]  .rbh-visual { width: 52px; height: 52px; }
/* Der Rumpf wird zur ZEILE statt zur Spalte: links Kennung und Name, rechts die Handlungen. So
   bestimmt die Breite der Handlungen, wo der Name gekürzt wird – mit absolut gesetzten Handlungen
   und einem geschätzten Polster lief ein langer Name darunter hindurch. */
.wfd[b-dssmgoa64y]  .rbh-body { flex-direction: row; align-items: center; }
.wfd[b-dssmgoa64y]  .rbh-ident { flex: 1 1 auto; min-width: 0; }
.wfd[b-dssmgoa64y]  .rbh-foot { flex: 0 0 auto; align-items: center; margin: 0; }
.wfd[b-dssmgoa64y]  .rbh-title { font-size: 1.45rem; }

/* Die Kennung als Kapsel über dem Namen – dieselbe Rolle wie der Nummern-Chip in den Listen. */
.wfd[b-dssmgoa64y]  .wfd-banner-chip {
    /* Um das eigene Polster nach links versetzt: Sonst beginnt die SCHRIFT der Kapsel 8 px weiter
       rechts als der Name darunter – die beiden Zeilen stünden sichtbar versetzt. */
    margin-left: -.5rem;
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .18);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}
/* Der Zurück-Pfeil ist keine Handlung an diesem Agenten, sondern der Weg hinaus – deshalb abgesetzt. */
.wfd[b-dssmgoa64y]  .wfd-banner-sep {
    width: 1px;
    height: 24px;
    margin: 0 .35rem;
    background: rgba(255, 255, 255, .3);
}


/* Die zweite Zeile im Kopf: rechtsbündig unter den Handlungen und eine Spur kleiner – sie betrifft
   nur die Ansicht. */
.wfd[b-dssmgoa64y]  .wfd-banner-tun { display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap; }


/* Zoom und Raster unten LINKS auf dem Zeichenblatt – nebeneinander, als zwei gleich gebaute
   Kapseln. Links, weil die Ecke dort frei ist: Rechts steht die Leiste, und alles daneben müsste
   sich mit deren Breite verschieben. */
.wfd-ansicht[b-dssmgoa64y] {
    position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 7;
    display: flex; align-items: center; gap: .5rem;
}
.wfd-zoomfloat[b-dssmgoa64y] {
    display: inline-flex; align-items: center; gap: .15rem;
    /* Wie die schmale Leiste rechts: fast durchsichtig und nur leicht weichgezeichnet. Die beiden
       Kapseln schweben ueber dem Zeichenblatt, und was darunter liegt, soll sichtbar bleiben. */
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid var(--tri-border); border-radius: 1rem;
    padding: .2rem .25rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.wfd-zoomfloat-btn[b-dssmgoa64y] {
    border: 0; background: transparent; color: var(--tri-muted);
    border-radius: .75rem; padding: .25rem .6rem; font-size: .8rem; line-height: 1.3; cursor: pointer;
}
.wfd-zoomfloat-btn:hover[b-dssmgoa64y] { background: var(--tri-surface); color: var(--tri-text); }
.wfd-zoomfloat-btn.is-wert[b-dssmgoa64y] { color: var(--tri-text); font-weight: 600; min-width: 4rem; }

/* In der raeumlichen Darstellung steht die Kapsel auf Anthrazit: Eine helle Kapsel leuchtete dort wie
   ein Fremdkoerper. Dieselbe Bauart, nur in den Farben der Szene. */
.wfd-ansicht.is-3d .wfd-zoomfloat[b-dssmgoa64y] {
    background: rgba(45, 49, 55, .82);
    border-color: #434a52;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.wfd-ansicht.is-3d .wfd-zoomfloat-btn[b-dssmgoa64y] { color: #949ca6; }
.wfd-ansicht.is-3d .wfd-zoomfloat-btn:hover[b-dssmgoa64y] { background: #3a4047; color: #e6eaef; }
.wfd-ansicht.is-3d .wfd-zoomfloat-btn.is-wert[b-dssmgoa64y] { color: #e6eaef; }