/* =====================================================================
 * dashboard.css — Lovable-Dichte-Variante (siehe agentensystem/PATTERNS.md §1.10).
 * Baut auf design-tokens.css + base.css auf. Keine neuen Tokens, keine
 * Hex-Werte. Datendichte Strukturen bleiben (Monospace-Zahlen, sticky
 * Header, Zebra-Tint), aber polished: Schatten (var(--shadow-sm)),
 * Border-Radien (≥ var(--radius-md)) auf Cards/Modulen, Hover-Lift mit
 * transform + Shadow-Step, Focus-Visible-Ring, Transitions ≤ 250ms mit
 * var(--ease-out). Reduced-Motion-Support ist global in base.css plus
 * lokale @media-Spezialfälle hier.
 * ===================================================================== */

/* ---------- Layout-Shell -------------------------------------------------- */

html, body {
    height: 100%;
}

body {
    /* Lovable-Dichte: subtiler Akzent-Verlauf bleibt aktiv (siehe base.css).
     * Kein vollflächiger Glow, aber kein Bloomberg-Pur-schwarz mehr. */
}

.topbar {
    height: var(--layout-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
    /* Glassmorphism-Topbar: leicht durchsichtig + Blur für Tiefe */
    background: hsl(var(--hsl-neutral-900) / 0.88);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    position: sticky;
    top: 0;
    z-index: 10;
    /* Subtile Akzentlinie oben für Premium-Feel */
    box-shadow: inset 0 -1px 0 0 var(--color-border),
                0 1px 0 0 hsl(var(--hsl-neutral-950) / 0.6);
}

[data-theme="light"] .topbar {
    background: hsl(0 0% 100% / 0.9);
    box-shadow: inset 0 -1px 0 0 var(--color-border),
                0 2px 8px -2px hsl(220 30% 20% / 0.06);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.topbar__mark {
    color: var(--color-text-inverse);
    background: var(--color-accent);
    padding: 3px var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-caps);
    /* Akzent-Glow hinter dem Brand-Badge */
    box-shadow: 0 0 12px hsl(var(--hsl-accent-500) / 0.35);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.topbar__mark:hover {
    box-shadow: 0 0 20px hsl(var(--hsl-accent-500) / 0.55);
}

.topbar__title {
    font-size: var(--font-size-small);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.topbar__sub {
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
}

.topbar__meta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
}

.topbar__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.topbar__label {
    color: var(--color-text-subtle);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    font-size: 9px;
}

.shell {
    display: grid;
    grid-template-columns: minmax(360px, 40%) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "filter filter"
        "liste detail";
    height: calc(100vh - var(--layout-topbar-height));
    min-height: 0;
}

.filter-region { grid-area: filter; border-bottom: 1px solid var(--color-border); }
.liste-region {
    grid-area: liste;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    background: var(--color-surface-1);
}
.detail-region {
    grid-area: detail;
    overflow-y: auto;
    background: var(--color-bg);
}

/* ---------- Filter-Bar ---------------------------------------------------- */

.filter-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface-1);
    overflow-x: auto;
}

.filter-bar__item {
    appearance: none;
    background: transparent;
    color: var(--color-text-muted);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-right: 1px solid var(--color-border-subtle);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.filter-bar__item:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.filter-bar__item[data-aktiv="true"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.filter-bar__count {
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    padding: 1px var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xs);
}

.filter-bar__item[data-aktiv="true"] .filter-bar__count {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ---------- Firmen-Liste -------------------------------------------------- */

.firmen-liste__head {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 0.9fr 0.5fr;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
}

.firmen-liste__row {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 0.9fr 0.5fr;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    cursor: pointer;
    align-items: center;
    transition: background var(--duration-instant) var(--ease-out);
}

.firmen-liste__row:hover {
    background: var(--color-surface-hover);
}

.firmen-liste__row[data-selected="true"] {
    background: var(--color-accent-soft);
    box-shadow: inset 2px 0 0 0 var(--color-accent);
}

.firmen-liste__name {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.firmen-liste__sub {
    color: var(--color-text-subtle);
    font-size: var(--font-size-micro);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    margin-top: 2px;
}

.firmen-liste__cell {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.firmen-liste__cell--num {
    text-align: right;
}

.firmen-liste__empty {
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-subtle);
    text-align: center;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    font-size: var(--font-size-small);
}

/* ---------- Lifecycle-Badge ---------------------------------------------- */

.lifecycle-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border: 1px solid;
    border-radius: var(--radius-xs);
    line-height: 1.4;
    background: transparent;
    white-space: nowrap;
}

.lifecycle-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: currentColor;
    display: inline-block;
}

.lifecycle-badge[data-phase="neu"] {
    color: var(--color-phase-neu-text);
    border-color: var(--color-phase-neu-border);
    background: var(--color-phase-neu-bg);
}
.lifecycle-badge[data-phase="aktiv"] {
    color: var(--color-phase-aktiv-text);
    border-color: var(--color-phase-aktiv-border);
    background: var(--color-phase-aktiv-bg);
}
.lifecycle-badge[data-phase="passiv"] {
    color: var(--color-phase-passiv-text);
    border-color: var(--color-phase-passiv-border);
    background: var(--color-phase-passiv-bg);
}
.lifecycle-badge[data-phase="reaktivierung"] {
    color: var(--color-phase-reaktivierung-text);
    border-color: var(--color-phase-reaktivierung-border);
    background: var(--color-phase-reaktivierung-bg);
}
.lifecycle-badge[data-phase="abgewandert"] {
    color: var(--color-phase-abgewandert-text);
    border-color: var(--color-phase-abgewandert-border);
    background: var(--color-phase-abgewandert-bg);
}
.lifecycle-badge[data-phase="unbekannt"] {
    color: var(--color-phase-unbekannt-text);
    border-color: var(--color-phase-unbekannt-border);
    background: var(--color-phase-unbekannt-bg);
}

/* Tom 2026-05-21: Drift-Pille rechts neben dem Phase-Badge */
.lifecycle-badge-gruppe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lifecycle-drift-pille {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--color-warn, hsl(40 80% 55%));
    background: hsl(40 80% 55% / 0.12);
    border: 1px solid hsl(40 80% 55% / 0.4);
    cursor: help;
}
.quick-filter__btn--drift[data-aktiv="true"] {
    border-color: var(--color-warn, hsl(40 80% 55%));
    background: hsl(40 80% 55% / 0.15);
    color: var(--color-warn, hsl(40 80% 55%));
    font-weight: 600;
}

/* Tom 2026-05-21: Pipeline-Modul + Bucket-Hinweis */
.modul-card--pipeline { /* eigene Akzent-Farbe später */ }
.pipeline-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pipeline-item {
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, background 120ms ease;
}
.pipeline-item[data-farbe="warn"] { border-left-color: var(--color-warn, hsl(40 80% 55%)); }
.pipeline-item[data-farbe="hebel"] { border-left-color: var(--color-accent, hsl(210 80% 55%)); }
.pipeline-item[data-farbe="info"] { border-left-color: var(--color-info, hsl(210 80% 60%)); }
.pipeline-item[data-farbe="neu"] { border-left-color: var(--color-success, hsl(140 50% 50%)); }
.pipeline-item[data-farbe="passiv"] { border-left-color: var(--color-text-muted); }
.pipeline-item[data-farbe="akzent"] { border-left-color: var(--color-accent, hsl(210 80% 55%)); }
.pipeline-item__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.92rem);
    transition: background 120ms ease;
}
.pipeline-item__btn:hover {
    background: var(--color-surface-3, hsl(0 0% 100% / 0.04));
}
.pipeline-item__links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.pipeline-item__icon { font-size: 1.05em; }
.pipeline-item__label {
    font-weight: 500;
}
.pipeline-item__count {
    padding: 1px 8px;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    font-weight: 600;
    min-width: 2em;
    text-align: center;
}
.pipeline-item__count[data-leer="true"] {
    color: var(--color-text-muted);
    background: transparent;
    font-weight: 400;
}
.pipeline-fuss {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border-subtle, var(--color-border));
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    text-align: center;
}

.uebersicht__bucket-hinweis {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--color-accent, hsl(210 80% 55%));
    background: hsl(210 80% 55% / 0.08);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.uebersicht__bucket-reset {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
}
.uebersicht__bucket-reset:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
}

/* Tom 2026-05-21: Aktionsplan-Karte (über der Firmen-Liste bei aktivem Bucket) */
.uebersicht__aktionsplan-host {
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
}
.aktionsplan-karte {
    padding: var(--space-4);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.aktionsplan-karte__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.aktionsplan-karte__titel {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
}
.aktionsplan-karte__meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
}
.aktionsplan-karte__empfehlung {
    margin: 0;
    padding: var(--space-3);
    background: hsl(210 80% 55% / 0.08);
    border-left: 3px solid var(--color-accent, hsl(210 80% 55%));
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.95rem);
    line-height: 1.4;
}
.aktionsplan-karte__subtitel {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    font-family: var(--font-mono);
}
.aktionsplan-karte__kanal-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.aktionsplan-karte__kanal-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.aktionsplan-karte__kanal-icon { font-size: 1.1em; }
.aktionsplan-karte__kanal-label { font-size: var(--font-size-sm); color: var(--color-text); }
.aktionsplan-karte__kanal-zahl { color: var(--color-accent); }

.aktionsplan-karte__tab-bar {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.aktionsplan-karte__tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-sm);
}
.aktionsplan-karte__tab:hover { color: var(--color-text); }
.aktionsplan-karte__tab[data-aktiv="true"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}
.aktionsplan-karte__tab-inhalt {
    padding: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.aktionsplan-karte__vorlage {
    margin: 0;
    padding: var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-left: 2px solid var(--color-border);
}
.aktionsplan-karte__copy {
    align-self: flex-start;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-micro);
    cursor: pointer;
}
.aktionsplan-karte__copy:hover { border-color: var(--color-accent); color: var(--color-accent); }

.aktionsplan-karte__tool-btns {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.aktionsplan-karte__tool-btn {
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: border-color 120ms ease, color 120ms ease;
}
.aktionsplan-karte__tool-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Tom 2026-05-21: Kanal-Icon in der Firmen-Liste vor dem Namen */
.firmen-liste__kanal {
    display: inline-block;
    font-size: 0.92em;
    margin-right: 4px;
    cursor: help;
    vertical-align: baseline;
}

/* Tom 2026-05-21: Demo-Pille — markiert Werte die aus Demo-KPI-Anreicherung kommen,
   nicht aus echten Daten. Klein, dezent, aber eindeutig. */
.demo-pille {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    font-size: 9px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: hsl(0 0% 50% / 0.10);
    border: 1px dashed hsl(0 0% 50% / 0.35);
    vertical-align: middle;
    cursor: help;
}

/* Verkleinerte Badge in der Liste */
.firmen-liste__row .lifecycle-badge {
    font-size: 10px;
    padding: 1px var(--space-2);
}

/* ---------- Firma-Detail -------------------------------------------------- */

.detail {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: var(--layout-content-max);
}

.detail__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.detail__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.detail__id {
    font-family: var(--font-mono);
    color: var(--color-text-subtle);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.detail__name {
    font-size: var(--font-size-h1);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

.detail__meta {
    display: flex;
    gap: var(--space-6);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}

.detail__meta-label {
    color: var(--color-text-subtle);
    margin-right: var(--space-2);
}

.detail__section-title {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-3);
}

.detail__begruendung {
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--color-accent);
    background: var(--color-accent-soft);
    font-family: var(--font-mono);
    color: var(--color-text);
    font-size: var(--font-size-small);
}

.detail__begruendung[data-phase="passiv"] { border-left-color: var(--color-phase-passiv-border); background: var(--color-phase-passiv-bg); }
.detail__begruendung[data-phase="abgewandert"] { border-left-color: var(--color-phase-abgewandert-border); background: var(--color-phase-abgewandert-bg); }
.detail__begruendung[data-phase="reaktivierung"] { border-left-color: var(--color-phase-reaktivierung-border); background: var(--color-phase-reaktivierung-bg); }
.detail__begruendung[data-phase="neu"] { border-left-color: var(--color-phase-neu-border); background: var(--color-phase-neu-bg); }
.detail__begruendung[data-phase="aktiv"] { border-left-color: var(--color-phase-aktiv-border); background: var(--color-phase-aktiv-bg); }

/* Sparten-Chips */
.sparten {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sparten__chip {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: var(--radius-xs);
}

.sparten__chip[data-leer="true"] {
    color: var(--color-text-subtle);
    border-style: dashed;
}

/* ---------- KPI-Block ----------------------------------------------------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.kpi-grid:hover {
    box-shadow: var(--shadow-md);
}

.kpi {
    padding: var(--space-4);
    border-right: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-surface-1);
    transition: background var(--duration-fast) var(--ease-out);
}

.kpi:hover {
    background: var(--color-surface-hover);
}

.kpi:last-child { border-right: 0; }

.kpi__label {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.kpi__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "ss01";
    font-size: 1.5rem;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.kpi__unit {
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.kpi__delta {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    color: var(--color-accent);
}

/* ---------- Mitarbeiter-Liste -------------------------------------------- */

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

.mitarbeiter__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    align-items: center;
}

.mitarbeiter__row:last-child { border-bottom: 0; }

.mitarbeiter__row--head {
    background: var(--color-surface-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.mitarbeiter__name {
    color: var(--color-text);
    font-size: var(--font-size-small);
}

.mitarbeiter__rolle {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.mitarbeiter__login {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: right;
}

.mitarbeiter__login[data-leer="true"] {
    color: var(--color-text-subtle);
    font-style: italic;
}

/* ---------- Empty-State / Boot-Error ------------------------------------ */

.empty {
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    font-size: var(--font-size-small);
}

.boot-error {
    position: fixed;
    inset: auto var(--space-4) var(--space-4) auto;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-phase-abgewandert-border);
    background: var(--color-phase-abgewandert-bg);
    color: var(--color-phase-abgewandert-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-width: 480px;
}

/* =====================================================================
 * Tages-Copilot — Hauptseite (Default-Route)
 * ===================================================================== */

.tages-copilot {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: var(--layout-content-max);
}

.tages-copilot__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* Tab-Bar (Tagesstart | E-Mails) */
.tab-bar {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-sm);
    align-self: flex-start;
    overflow: hidden;
}

.tab-bar__item {
    appearance: none;
    background: transparent;
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-right: 1px solid var(--color-border-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.tab-bar__item:last-child { border-right: 0; }

.tab-bar__item:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.tab-bar__item:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    z-index: 1;
}

.tab-bar__item[data-aktiv="true"] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

.tab-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Modul-Grid: 3-spaltig auf breit, 1-spaltig schmal */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
}

/* Lovable-Dichte-Card: rund + subtiler Schatten + Hover-Lift.
 * Border-Radius via var(--radius-md), Schatten var(--shadow-sm), beim
 * Hover Shadow-Step auf var(--shadow-md) plus 1px translateY-Lift. */
.modul-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.modul-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
}

.modul-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    transform: translateY(-1px);
}

.modul-card[data-state="loading"] {
    pointer-events: none;
    opacity: 0.85;
}

.modul-card[data-state="error"] {
    border-color: var(--color-phase-abgewandert-border);
}

.modul-card__head {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.modul-card__head--toggle { cursor: pointer; user-select: none; }
.modul-card__head--toggle:hover { background: var(--color-surface-3, var(--color-surface-2)); }
.modul-card__head-titel-gruppe { display: flex; align-items: center; gap: var(--space-3); }

.modul-card__toggle {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: 0 var(--space-2);
    line-height: 1;
    transition: color 120ms ease;
}
.modul-card__toggle:hover { color: var(--color-text); }
.modul-card__toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.modul-card--collapsible[data-collapsed="true"] .modul-card__body { display: none; }
.modul-card--collapsible[data-collapsed="true"] { box-shadow: none; }

.modul-card__titel {
    margin: 0;
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text);
}

.modul-card__count {
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.modul-card__body {
    display: flex;
    flex-direction: column;
}

/* Tom 2026-05-21: VTT-Destillat-Anzeige im Termin-Nachbereitungs-Tab */
.destillat-anzeige {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface-2);
    border-left: 3px solid var(--color-accent, hsl(210 80% 55%));
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm, 0.9rem);
}
.destillat-anzeige__meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
}
.destillat-anzeige__themen { color: var(--color-text); }
.destillat-thema {
    display: inline-block;
    padding: 1px 6px;
    background: var(--color-surface-3, hsl(0 0% 100% / 0.04));
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--color-accent, hsl(210 80% 55%));
    margin-right: 2px;
}
.destillat-anzeige__zusagen ul,
.destillat-anzeige__luecken ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
}
.destillat-anzeige__zusagen li,
.destillat-anzeige__luecken li {
    margin-bottom: var(--space-1);
    line-height: 1.4;
    color: var(--color-text);
}
.destillat-anzeige__zusagen em {
    color: var(--color-accent, hsl(210 80% 55%));
    font-weight: 600;
    font-style: normal;
}
.destillat-anzeige__luecken {
    border-top: 1px dashed var(--color-border-subtle, var(--color-border));
    padding-top: var(--space-2);
    color: var(--color-warn-text, var(--color-text));
}
.destillat-anzeige__fuss {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-micro);
}

/* Tom 2026-05-21: „Offene Versprechen"-Modul */
.versprechen-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.versprechen-item {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-subtle, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    transition: background 120ms ease;
}
.versprechen-item:hover { background: var(--color-surface-3, var(--color-surface-2)); }
.versprechen-item__label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}
.versprechen-item__check {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.versprechen-item__inhalt { flex: 1; min-width: 0; }
.versprechen-item__kopf {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
}
.versprechen-item__quelle {
    font-family: var(--font-mono);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}
.versprechen-item__quelle[data-quelle="vtt"] {
    color: var(--color-accent, hsl(210 80% 55%));
    background: hsl(210 80% 55% / 0.10);
    border: 1px solid hsl(210 80% 55% / 0.3);
}
.versprechen-item__quelle[data-quelle="termin"] {
    color: var(--color-success, hsl(140 50% 45%));
    background: hsl(140 50% 45% / 0.10);
    border: 1px solid hsl(140 50% 45% / 0.3);
}
.versprechen-item__datum {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}
.versprechen-item__woher {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.92rem);
    margin-top: var(--space-1);
}
.versprechen-item__firma-link {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
    font-size: inherit;
    text-align: left;
}
.versprechen-item__firma-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}
.versprechen-item__text {
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.9rem);
    margin-top: var(--space-1);
    line-height: 1.4;
    font-style: italic;
}
.versprechen-fuss {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border-subtle, var(--color-border));
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    text-align: right;
}

/* Tom 2026-05-21: „Letzte Gespräche"-Modul im Tages-Copilot */
.letzte-gespraeche {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.letzte-gespraeche__item {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-subtle, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.letzte-gespraeche__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
}
.letzte-gespraeche__partner {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.92rem);
    margin: var(--space-1) 0;
}
.letzte-gespraeche__zahlen {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}
.letzte-gespraeche__zahlen .badge-zus {
    color: var(--color-success, hsl(140 50% 50%));
}
.letzte-gespraeche__zahlen .badge-lck {
    color: var(--color-warn, hsl(40 80% 55%));
}

/* Tom 2026-05-21: Slack-Modul-Liste. Kompakt, monospace-Akzente, klare Sprecher-Trennung. */
.slack-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.slack-liste__item {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-subtle, hsl(0 0% 80% / 0.2));
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle, transparent);
}
.slack-liste__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-1);
}
.slack-liste__kanal {
    color: var(--color-accent);
    letter-spacing: var(--letter-spacing-caps);
}
.slack-liste__von {
    font-weight: 600;
    font-size: var(--font-size-small);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.slack-liste__text {
    font-size: var(--font-size-small);
    color: var(--color-text);
    line-height: 1.4;
}
.slack-liste__fuss {
    margin-top: var(--space-3);
    display: flex;
    justify-content: flex-end;
}

/* Empty-State (Lovable-Pattern): Icon + Titel + Erklärung + primäre Aktion.
 * Nicht mehr nur die alte uppercase-Mono-Zeile — die bleibt als Fallback
 * für Mini-Listen-Empty (z.B. einzelne Spalten). */
.modul-card__leer {
    padding: var(--space-3);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-align: center;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state__icon {
    width: 32px;
    height: 32px;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-1);
}

.empty-state__titel {
    margin: 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: none;
}

.empty-state__text {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
    max-width: 28ch;
}

.empty-state__aktion {
    margin-top: var(--space-2);
}

/* Error-State: rote Akzent-Linie, Hinweis + Recovery-Button. */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    border-left: 3px solid var(--color-phase-abgewandert-border);
    background: var(--color-phase-abgewandert-bg);
    color: var(--color-phase-abgewandert-text);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

.error-state__titel {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    color: var(--color-phase-abgewandert-text);
}

.error-state__text {
    color: var(--color-phase-abgewandert-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
}

/* Loading-Skeleton (siehe PATTERNS.md §1.4).
 * Shimmer mit gleicher Box-Geometrie wie Ziel. Reduced-Motion: animation
 * none, opacity 0.6. */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface-2) 0%,
        var(--color-surface-3) 50%,
        var(--color-surface-2) 100%
    );
    background-size: 200% 100%;
    animation: vd-shimmer 1.5s infinite var(--ease-out);
    border-radius: var(--radius-sm);
}

.skeleton-line {
    height: 0.875rem;
    width: 100%;
    margin-bottom: var(--space-2);
}

.skeleton-line--kurz { width: 40%; }
.skeleton-line--mittel { width: 70%; }

.skeleton-zeile {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    align-items: center;
}

.skeleton-zeile:last-child { border-bottom: 0; }

.skeleton-zeile .skeleton {
    height: 0.875rem;
}

.skeleton-zeile .skeleton:nth-child(1) { width: 48px; }
.skeleton-zeile .skeleton:nth-child(2) { width: 100%; }
.skeleton-zeile .skeleton:nth-child(3) { width: 56px; }

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

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        opacity: 0.6;
    }

    .modul-card,
    .heute-liste__item,
    .makler-liste__item,
    .erinnerung-liste__item,
    .todo-liste__item {
        transition: none;
    }

    .modul-card:hover {
        transform: none;
    }
}

/* Modul 1 — Heute */
.heute-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.heute-liste__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    align-items: center;
    transition: background var(--duration-fast) var(--ease-out);
}

.heute-liste__item:hover {
    background: var(--color-surface-hover);
}

.heute-liste__item:last-child { border-bottom: 0; }

.heute-liste__zeit {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    font-size: var(--font-size-small);
}

.heute-liste__titel {
    color: var(--color-text);
    font-size: var(--font-size-small);
}

.heute-liste__typ {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    border: 1px solid var(--color-border-subtle);
    padding: 0 var(--space-2);
    border-radius: var(--radius-xs);
}

.heute-liste__item[data-typ="termin"] .heute-liste__typ {
    color: var(--color-phase-aktiv-text);
    border-color: var(--color-phase-aktiv-border);
}

.heute-liste__item[data-typ="eingang"] .heute-liste__typ {
    color: var(--color-phase-neu-text);
    border-color: var(--color-phase-neu-border);
}

/* Termin-Items: zweispaltig (Zeitinfo links, Kontext/Mehrwert rechts) */
.heute-liste__item--termin {
    display: grid;
    /* Vertikal gestapelt: Info-Block oben, Kontext-Spalte mittig, Kontext-Block unten */
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
}

.heute-liste__item-links {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--space-3);
    align-items: center;
}

.heute-liste__item-kontext {
    display: flex;
    align-items: center;
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border-subtle);
}

.heute-liste__kontext-text {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Termin-Kontext-Block "Warum / Frage / Chance" */
/* .heute-liste__item--termin wird jetzt vertikal gestapelt statt 2-spaltig */
.termin-kontext {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-raised, var(--color-surface-secondary));
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-accent-muted, var(--color-brand-secondary));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.termin-kontext__zeile {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-2);
    align-items: baseline;
}

.termin-kontext__label {
    font-size: var(--font-size-tiny, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.termin-kontext__wert {
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* Fehlende Datenquelle: abgedimmt, Marker sichtbar als politischer Druckpunkt */
.termin-kontext__zeile--offen .termin-kontext__wert {
    color: var(--color-text-disabled, var(--color-text-muted));
    font-style: italic;
}

/* Modul 2 — Makler heute */
.makler-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.makler-liste__item {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: background var(--duration-fast) var(--ease-out);
}

.makler-liste__item:hover {
    background: var(--color-surface-hover);
}

.makler-liste__item:last-child { border-bottom: 0; }

.makler-liste__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.makler-liste__name {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: 0;
    text-align: left;
    border-radius: var(--radius-xs);
    transition: color var(--duration-fast) var(--ease-out);
}

.makler-liste__name:hover {
    color: var(--color-accent);
}

.makler-liste__name:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.makler-liste__grund {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.makler-liste__aktionen {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn--klein {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-micro);
    text-decoration: none;
    line-height: 1.4;
}

/* Modul 3 — To-dos */
.todo-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo-liste__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background var(--duration-fast) var(--ease-out);
}

.todo-liste__item:hover {
    background: var(--color-surface-hover);
}

.todo-liste__item:last-child { border-bottom: 0; }

.todo-liste__check {
    cursor: pointer;
    accent-color: var(--color-accent);
}

.todo-liste__text {
    color: var(--color-text);
    font-size: var(--font-size-small);
    flex: 1;
}

.todo-liste__item[data-erledigt="true"] .todo-liste__text {
    color: var(--color-text-subtle);
    text-decoration: line-through;
}

.todo-eingabe {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}

.todo-eingabe .modal__input {
    flex: 1;
}

/* Modul 4 — Erinnerungen */
.erinnerung-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.erinnerung-liste__item {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background var(--duration-fast) var(--ease-out);
}

.erinnerung-liste__item:hover {
    background: var(--color-surface-hover);
}

.erinnerung-liste__item:last-child { border-bottom: 0; }

.erinnerung-liste__item[data-erledigt="true"] {
    opacity: 0.55;
}

.erinnerung-liste__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
}

.erinnerung-liste__titel {
    color: var(--color-text);
    font-size: var(--font-size-small);
}

.erinnerung-liste__kontext {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
}

/* Modul 5 — Terminquote */
.quote-zeile {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3);
}

.quote-zeile__ist {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
}

.quote-zeile__label {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.quote-balken {
    height: 8px;
    margin: 0 var(--space-3) var(--space-3) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    overflow: hidden;
}

.quote-balken__fuell {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: width var(--duration-slow) var(--ease-out);
}

.quote-balken__fuell[data-aktiv="true"] {
    background: var(--color-phase-aktiv-solid);
}

/* E-Mail-Tab */
.email-tab__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-3);
}

.email-cluster {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-3);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.email-cluster:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .email-cluster { transition: none; }
    .email-cluster:hover { transform: none; }
}

.email-cluster__head {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.email-cluster__thema {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.email-cluster__anzahl {
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.email-cluster__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.email-cluster__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-small);
    transition: background var(--duration-fast) var(--ease-out);
}

.email-cluster__item:hover {
    background: var(--color-surface-hover);
}

.email-cluster__item:last-child { border-bottom: 0; }

.email-cluster__von {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-cluster__betreff {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-cluster__aktionen {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: flex-end;
}

/* Toast (für "Erinnerung versendet" etc.) */
.vd-toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface-2);
    border: 1px solid var(--color-accent);
    color: var(--color-text);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    animation: vd-toast-in var(--duration-base) var(--ease-out);
}

@keyframes vd-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0);   }
}

@media (prefers-reduced-motion: reduce) {
    .vd-toast { animation: none; }
}

/* Module beim Mount sanft fade-in (Micro-Interaction, einmal pro Session).
 * Nutzt nur opacity + transform, keine Layout-Shifts. */
.module-grid > * {
    animation: vd-modul-enter var(--duration-base) var(--ease-out) backwards;
}

.module-grid > *:nth-child(1) { animation-delay: 40ms; }
.module-grid > *:nth-child(2) { animation-delay: 80ms; }
.module-grid > *:nth-child(3) { animation-delay: 120ms; }
.module-grid > *:nth-child(4) { animation-delay: 160ms; }
.module-grid > *:nth-child(5) { animation-delay: 200ms; }

@keyframes vd-modul-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: reduce) {
    .module-grid > * { animation: none; }
}

/* Modal-Textarea */
.modal__textarea {
    min-height: 8rem;
    resize: vertical;
    font-family: var(--font-mono);
}

/* =====================================================================
 * Pipeline-Erweiterung: Wert-Score / Trend-Pfeil + Export-Button
 * ===================================================================== */

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

.pipeline__export {
    align-self: flex-end;
}

/* Pipeline-Tabelle: 7 Spalten (Firma, Phase, Verlauf, Tendenz, Tage, Wert, Trend) */
.pipeline-zeile {
    grid-template-columns: 1.5fr 0.7fr 1fr 0.6fr 0.4fr 0.4fr 0.3fr;
}

.pipeline-zeile__trend {
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    text-align: center;
    color: var(--color-text-muted);
}

.pipeline-zeile__trend[data-tendenz="steigend"] { color: var(--color-phase-aktiv-text); }
.pipeline-zeile__trend[data-tendenz="sinkend"]  { color: var(--color-phase-reaktivierung-text); }
.pipeline-zeile__trend[data-tendenz="verloren"] { color: var(--color-phase-abgewandert-text); }

/* =====================================================================
 * Block 3 — Polish #pipeline (ui-veredler, 2026-05-06)
 * Hero-Charts-Row (Donut + Bar) als Lovable-Dichte-Cards, Bucket-Karten
 * mit Phase-Akzent links + Stagger-Mount der Zeilen, SVG-Sparkline statt
 * DOM-Bars. Token-strikt — keine Hex-Literale.
 * ===================================================================== */

.pipeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    max-width: var(--layout-content-max);
}

.pipeline__empty {
    margin: var(--space-8) auto;
    max-width: 480px;
}

.pipeline-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

@media (max-width: 880px) {
    .pipeline-hero { grid-template-columns: 1fr; }
}

.pipeline-hero__karte {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    animation: pipeline-hero-enter var(--duration-base) var(--ease-out) backwards;
}

.pipeline-hero__karte:nth-child(1) { animation-delay: 50ms; }
.pipeline-hero__karte:nth-child(2) { animation-delay: 100ms; }

.pipeline-hero__karte:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
}

.pipeline-hero__karte:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    transform: translateY(-1px);
}

.pipeline-hero__kopf {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

.pipeline-hero__titel {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
}

.pipeline-hero__sub {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text-subtle);
    line-height: var(--line-height-normal);
}

.pipeline-hero__chart {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2) 0;
    overflow-x: auto;
}

.pipeline-hero__chart svg {
    max-width: 100%;
    height: auto;
}

.pipeline-hero__leer {
    padding: var(--space-6);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    text-align: center;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.pipeline-hero__legende {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.pipeline-hero__legende-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.pipeline-hero__legende-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.pipeline-hero__legende-dot[data-phase="neu"]            { background: var(--color-phase-neu-solid); }
.pipeline-hero__legende-dot[data-phase="aktiv"]          { background: var(--color-phase-aktiv-solid); }
.pipeline-hero__legende-dot[data-phase="passiv"]         { background: var(--color-phase-passiv-solid); }
.pipeline-hero__legende-dot[data-phase="reaktivierung"]  { background: var(--color-phase-reaktivierung-solid); }
.pipeline-hero__legende-dot[data-phase="abgewandert"]    { background: var(--color-phase-abgewandert-solid); }
.pipeline-hero__legende-dot[data-phase="unbekannt"]      { background: var(--color-phase-unbekannt-solid); }

@keyframes pipeline-hero-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bucket-Karten: Phase-Akzent links via CSS-Variable --phase-akzent */
.pipeline__inhalt {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pipeline-gruppe {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--phase-akzent, var(--color-accent));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.pipeline-gruppe:hover {
    box-shadow: var(--shadow-md);
}

.pipeline-gruppe__titel {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
}

.pipeline-gruppe__titel[data-phase="aktiv"]        { color: var(--color-phase-aktiv-text); }
.pipeline-gruppe__titel[data-phase="passiv"]       { color: var(--color-phase-passiv-text); }
.pipeline-gruppe__titel[data-phase="abgewandert"]  { color: var(--color-phase-abgewandert-text); }
.pipeline-gruppe__titel[data-phase="neu"]          { color: var(--color-phase-neu-text); }
.pipeline-gruppe__titel[data-phase="unbekannt"]    { color: var(--color-phase-unbekannt-text); }

.pipeline-gruppe__leer {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-sm);
}

.pipeline-tabelle {
    display: flex;
    flex-direction: column;
}

.pipeline-zeile--head {
    background: var(--color-surface-2);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-3);
    display: grid;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.pipeline-zeile {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    display: grid;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
    opacity: 0;
    transform: translateY(6px);
    animation: pipeline-zeile-enter var(--duration-base) var(--ease-out) forwards;
    animation-delay: var(--zeile-stagger, 0ms);
}

.pipeline-zeile--head { animation: none; opacity: 1; transform: none; cursor: default; }

.pipeline-zeile:last-child { border-bottom: 0; }

.pipeline-zeile:hover {
    background: var(--color-surface-hover);
}

.pipeline-zeile:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.pipeline-zeile__name {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-zeile__num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: right;
}

.pipeline-zeile__spark {
    display: flex;
    align-items: center;
    min-height: 22px;
}

.pipeline-zeile__spark svg {
    display: block;
    width: 100%;
    max-width: 96px;
    height: 22px;
}

.tendenz-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    line-height: 1.4;
    white-space: nowrap;
}

.tendenz-pill[data-tendenz="steigend"]   { color: var(--color-phase-aktiv-text);    border-color: var(--color-phase-aktiv-border); background: var(--color-phase-aktiv-bg); }
.tendenz-pill[data-tendenz="stabil"]     { color: var(--color-phase-aktiv-text);    border-color: var(--color-phase-aktiv-border); }
.tendenz-pill[data-tendenz="schwankend"] { color: var(--color-phase-passiv-text);   border-color: var(--color-phase-passiv-border); background: var(--color-phase-passiv-bg); }
.tendenz-pill[data-tendenz="sinkend"]    { color: var(--color-phase-reaktivierung-text); border-color: var(--color-phase-reaktivierung-border); background: var(--color-phase-reaktivierung-bg); }
.tendenz-pill[data-tendenz="verloren"]   { color: var(--color-phase-abgewandert-text); border-color: var(--color-phase-abgewandert-border); background: var(--color-phase-abgewandert-bg); }
.tendenz-pill[data-tendenz="neutral"]    { color: var(--color-text-subtle); }

@keyframes pipeline-zeile-enter {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-hero__karte { animation: none; transition: none; }
    .pipeline-hero__karte:hover { transform: none; }
    .pipeline-zeile { animation: none; opacity: 1; transform: none; }
    .pipeline-gruppe { transition: none; }
}

/* =====================================================================
 * Block 3 — Polish #firmen (ui-veredler, 2026-05-06)
 * KPI-Strip auf Cards, Briefing-Stapel mit Icons + Stagger, Tabelle mit
 * Status-Pillen + Mini-Sparkline. Token-strikt.
 * ===================================================================== */

.uebersicht {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    max-width: var(--layout-content-max);
}

.uebersicht__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* KPI-Strip auf Cards (5 Kacheln) */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
}

@media (max-width: 880px) {
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

.kpi-strip .kpi {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    animation: uebersicht-card-enter var(--duration-base) var(--ease-out) backwards;
}

.kpi-strip .kpi:nth-child(1) { animation-delay: 40ms; }
.kpi-strip .kpi:nth-child(2) { animation-delay: 80ms; }
.kpi-strip .kpi:nth-child(3) { animation-delay: 120ms; }
.kpi-strip .kpi:nth-child(4) { animation-delay: 160ms; }
.kpi-strip .kpi:nth-child(5) { animation-delay: 200ms; }

.kpi-strip .kpi:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
}

.kpi-strip .kpi:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    transform: translateY(-1px);
}

/* Briefing-Stapel-Row */
.briefing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 880px) {
    .briefing { grid-template-columns: 1fr; }
}

.briefing-stapel {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    animation: uebersicht-card-enter var(--duration-base) var(--ease-out) backwards;
}

.briefing-stapel:nth-child(1) { animation-delay: 60ms; }
.briefing-stapel:nth-child(2) { animation-delay: 120ms; }
.briefing-stapel:nth-child(3) { animation-delay: 180ms; }

.briefing-stapel:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.briefing-stapel__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.briefing-stapel__icon {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.briefing-stapel__titel {
    flex: 1;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.briefing-stapel__count {
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
    font-size: var(--font-size-micro);
}

.briefing-stapel__body {
    display: flex;
    flex-direction: column;
}

.briefing-stapel__leer {
    padding: var(--space-3) 0;
    font-size: var(--font-size-small);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    text-align: center;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.briefing-stapel__item {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px dotted var(--color-border-subtle);
    text-align: left;
    padding: var(--space-2) 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background var(--duration-fast) var(--ease-out),
                padding-left var(--duration-fast) var(--ease-out);
    opacity: 0;
    transform: translateY(4px);
    animation: uebersicht-row-enter var(--duration-base) var(--ease-out) forwards;
}

.briefing-stapel__item:nth-child(1) { animation-delay: 100ms; }
.briefing-stapel__item:nth-child(2) { animation-delay: 140ms; }
.briefing-stapel__item:nth-child(3) { animation-delay: 180ms; }
.briefing-stapel__item:nth-child(4) { animation-delay: 220ms; }
.briefing-stapel__item:nth-child(5) { animation-delay: 260ms; }

.briefing-stapel__item:last-child { border-bottom: 0; }

.briefing-stapel__item:hover {
    background: var(--color-surface-hover);
    padding-left: var(--space-1);
}

.briefing-stapel__item:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.briefing-stapel__item-name {
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
}

.briefing-stapel__item-sub {
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

/* Phasen-Bar in der Firmen-KPI-Card */
.phasen-bar {
    display: flex;
    height: 4px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--color-surface-3);
    margin-top: var(--space-1);
}

.phasen-bar__segment[data-phase="neu"]            { background: var(--color-phase-neu-solid); }
.phasen-bar__segment[data-phase="aktiv"]          { background: var(--color-phase-aktiv-solid); }
.phasen-bar__segment[data-phase="passiv"]         { background: var(--color-phase-passiv-solid); }
.phasen-bar__segment[data-phase="reaktivierung"]  { background: var(--color-phase-reaktivierung-solid); }
.phasen-bar__segment[data-phase="abgewandert"]    { background: var(--color-phase-abgewandert-solid); }
.phasen-bar__segment[data-phase="unbekannt"]      { background: var(--color-phase-unbekannt-solid); }

.phasen-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    margin-top: var(--space-1);
}

.phasen-legende__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.phasen-legende__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.phasen-legende__dot[data-phase="neu"]           { background: var(--color-phase-neu-solid); }
.phasen-legende__dot[data-phase="aktiv"]         { background: var(--color-phase-aktiv-solid); }
.phasen-legende__dot[data-phase="passiv"]        { background: var(--color-phase-passiv-solid); }
.phasen-legende__dot[data-phase="reaktivierung"] { background: var(--color-phase-reaktivierung-solid); }
.phasen-legende__dot[data-phase="abgewandert"]   { background: var(--color-phase-abgewandert-solid); }
.phasen-legende__dot[data-phase="unbekannt"]     { background: var(--color-phase-unbekannt-solid); }

/* Such-/Sortier-Bar */
.uebersicht__suche {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.suche-input,
.sortier-select {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.suche-input { flex: 1; min-width: 240px; }

.suche-input:focus,
.sortier-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

/* Übersicht-Tabelle: 7 Spalten (Firma, Phase, Status, Logins-Spark, Verträge, Bestand, Wert) */
.firmen-liste__head--block3 {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.9fr 0.8fr 0.5fr 0.7fr 0.5fr;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
    position: sticky;
    top: 0;
    z-index: 1;
}

.firmen-liste__row--block3 {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.9fr 0.8fr 0.5fr 0.7fr 0.5fr;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    cursor: pointer;
    align-items: center;
    transition: background var(--duration-fast) var(--ease-out);
    opacity: 0;
    transform: translateY(4px);
    animation: uebersicht-row-enter var(--duration-base) var(--ease-out) forwards;
    animation-delay: var(--zeile-stagger, 0ms);
}

.firmen-liste__row--block3:hover {
    background: var(--color-surface-hover);
}

.firmen-liste__row--block3:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.firmen-liste__sparkline {
    display: flex;
    align-items: center;
}

.firmen-liste__sparkline svg {
    display: block;
    width: 64px;
    height: 18px;
}

/* Status-Pillen-Group: 3 mini-Pillen (PWX / Logins / Bria) */
.status-pillen {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.status-pillen__pille {
    width: 24px;
    height: 6px;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
    background: currentColor;
    cursor: help;
    transition: transform var(--duration-fast) var(--ease-out);
}

.status-pillen__pille:hover { transform: scale(1.15); }

.status-pillen__pille[data-status="gruen"] { color: var(--color-phase-aktiv-solid); }
.status-pillen__pille[data-status="gelb"]  { color: var(--color-phase-passiv-solid); }
.status-pillen__pille[data-status="rot"]   { color: var(--color-phase-abgewandert-solid); }

.lifecycle-badge--klein {
    font-size: 10px;
    padding: 1px var(--space-2);
}

@keyframes uebersicht-card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes uebersicht-row-enter {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .kpi-strip .kpi,
    .briefing-stapel,
    .briefing-stapel__item,
    .firmen-liste__row--block3 {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
    .kpi-strip .kpi:hover,
    .briefing-stapel:hover { transform: none; }
    .status-pillen__pille:hover { transform: none; }
}

/* =====================================================================
 * Block 3 Pass 3 — Polish #firma/<id> (ui-veredler, 2026-05-06)
 * Begründung-Karte mit Phase-Akzent links, KPI-Row, Mitarbeiter-Grid
 * mit Avatar-Bubbles + Sparkline + Status-Pille, Quick-Actions-Footer.
 * ===================================================================== */

.detail__begruendung-card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--phase-akzent, var(--color-accent));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.detail__begruendung-card[data-phase="neu"]           { border-left-color: var(--color-phase-neu-border); }
.detail__begruendung-card[data-phase="aktiv"]         { border-left-color: var(--color-phase-aktiv-border); }
.detail__begruendung-card[data-phase="passiv"]        { border-left-color: var(--color-phase-passiv-border); }
.detail__begruendung-card[data-phase="reaktivierung"] { border-left-color: var(--color-phase-reaktivierung-border); }
.detail__begruendung-card[data-phase="abgewandert"]   { border-left-color: var(--color-phase-abgewandert-border); }

.detail__begruendung-card:hover { box-shadow: var(--shadow-md); }

.detail__begruendung-text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
}

.lifecycle-badge--gross {
    font-size: var(--font-size-small);
    padding: var(--space-1) var(--space-3);
}

.detail-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

@media (max-width: 880px) {
    .detail-kpis { grid-template-columns: repeat(2, 1fr); }
}

.detail-kpis__card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    animation: detail-card-enter var(--duration-base) var(--ease-out) backwards;
}

.detail-kpis__card:nth-child(1) { animation-delay: 60ms; }
.detail-kpis__card:nth-child(2) { animation-delay: 100ms; }
.detail-kpis__card:nth-child(3) { animation-delay: 140ms; }
.detail-kpis__card:nth-child(4) { animation-delay: 180ms; }

.detail-kpis__card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Mitarbeiter-Karte */
.detail-mitarbeiter {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

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

.mitarbeiter-grid__row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    align-items: center;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background var(--duration-fast) var(--ease-out);
}

.mitarbeiter-grid__row:last-child { border-bottom: 0; }

.mitarbeiter-grid__row:hover {
    background: var(--color-surface-hover);
}

.mitarbeiter-grid__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    color: var(--color-text-inverse);
    background: var(--color-accent);
    flex-shrink: 0;
}

.mitarbeiter-grid__avatar[data-phase="neu"]           { background: var(--color-phase-neu-solid); }
.mitarbeiter-grid__avatar[data-phase="aktiv"]         { background: var(--color-phase-aktiv-solid); }
.mitarbeiter-grid__avatar[data-phase="passiv"]        { background: var(--color-phase-passiv-solid); color: var(--color-text); }
.mitarbeiter-grid__avatar[data-phase="reaktivierung"] { background: var(--color-phase-reaktivierung-solid); color: var(--color-text-inverse); }
.mitarbeiter-grid__avatar[data-phase="abgewandert"]   { background: var(--color-phase-abgewandert-solid); }

.mitarbeiter-grid__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mitarbeiter-grid__name {
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mitarbeiter-grid__rolle {
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.mitarbeiter-grid__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.mitarbeiter-grid__spark {
    width: 80px;
    height: 18px;
}

.mitarbeiter-grid__spark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mitarbeiter-grid__pille {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border: 1px solid;
    border-radius: var(--radius-pill);
    line-height: 1.4;
    white-space: nowrap;
}

.mitarbeiter-grid__pille[data-status="gruen"] { color: var(--color-phase-aktiv-text); border-color: var(--color-phase-aktiv-border); background: var(--color-phase-aktiv-bg); }
.mitarbeiter-grid__pille[data-status="gelb"]  { color: var(--color-phase-passiv-text); border-color: var(--color-phase-passiv-border); background: var(--color-phase-passiv-bg); }
.mitarbeiter-grid__pille[data-status="rot"]   { color: var(--color-phase-abgewandert-text); border-color: var(--color-phase-abgewandert-border); background: var(--color-phase-abgewandert-bg); }

/* Quick-Actions-Footer */
.detail__quick-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.detail__quick-actions .btn {
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-surface-1);
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.detail__quick-actions .btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.detail__quick-actions .btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.detail__quick-actions .btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.detail__quick-actions .btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text-inverse);
}

@keyframes detail-card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .detail-kpis__card { animation: none; transition: none; }
    .detail-kpis__card:hover { transform: none; }
    .mitarbeiter-grid__row { transition: none; }
}

/* =====================================================================
 * Block 4 — Demo-Banner + Theme-Toggle (ui-veredler-Pass 2026-05-06)
 * Token-strikt (var(--color-warn-*), var(--shadow-sm), var(--radius-*),
 * var(--space-*), var(--duration-*), var(--ease-*)). Light + Dark per
 * design-tokens.css automatisch.
 * ===================================================================== */

/* ---------- Demo-Banner ----------------------------------------------- */

.demo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: var(--color-warn-bg);
    color: var(--color-warn-text);
    border-bottom: 1px solid var(--color-warn-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-normal);
    position: relative;
    z-index: 11;
    animation: demo-banner-enter var(--duration-base) var(--ease-out);
}

.demo-banner__label {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    font-size: var(--font-size-small);
}

.demo-banner__close {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-warn-text);
    font-size: var(--font-size-h3);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.demo-banner__close:hover {
    background: hsl(0 0% 0% / 0.12);
    transform: translateY(-50%) scale(1.08);
}

.demo-banner__close:active {
    transform: translateY(-50%) scale(0.96);
}

.demo-banner__close:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

@keyframes demo-banner-enter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-banner { animation: none; }
    .demo-banner__close,
    .demo-banner__close:hover,
    .demo-banner__close:active {
        transition: none;
        transform: translateY(-50%);
    }
}

/* ---------- Theme-Toggle ---------------------------------------------- */

.topbar__cell--theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    position: relative;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    transform: translateY(-1px);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.theme-toggle__icon {
    width: 18px;
    height: 18px;
    color: currentColor;
    transition:
        opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
    animation: theme-icon-swap var(--duration-base) var(--ease-out);
}

@keyframes theme-icon-swap {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(0.6);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle:hover,
    .theme-toggle:active {
        transition: none;
        transform: none;
    }
    .theme-toggle__icon {
        transition: none;
        animation: none;
    }
}

/* =====================================================================
 * Phase 2 — Realdaten-Umstellung (2026-05-19)
 * Neue Komponenten: Snapshot-Stand, Tabellen-Layout (neu), Quick-Filter,
 * Sparten-Badges, Pagination, Aktionen-Modul.
 * Token-strikt: keine Hex/rgb-Literale.
 * ===================================================================== */

/* --- Topbar Datenstand ------------------------------------------------ */

#topbar-datenstand {
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-subtle);
    white-space: nowrap;
}

/* --- Neue Tabellen-Struktur (9 Spalten, dicht) ----------------------- */

.firmen-liste__head--neu {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 0.5fr 1fr 0.6fr 0.6fr 0.9fr 1fr;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border: 1px solid var(--color-border);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    position: sticky;
    top: var(--layout-topbar-height);
    z-index: 5;
}

.firmen-liste__row--neu {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 0.5fr 1fr 0.6fr 0.6fr 0.9fr 1fr;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
    align-items: center;
    contain: layout;
}

.firmen-liste__row--neu:hover {
    background: var(--color-surface-hover);
}

.firmen-liste__row--neu:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.firmen-liste__col-name { min-width: 0; }

.firmen-liste__cell--muted {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.firmen-liste__cell--warnung {
    color: var(--color-phase-passiv-text);
    font-weight: var(--font-weight-semibold);
}

.firmen-liste__cell--date {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* --- Sparten-Badges --------------------------------------------------- */

.sparten-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.sparte-badge {
    display: inline-block;
    padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    white-space: nowrap;
    background: var(--color-surface-3);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
}

.sparte-badge[data-sparte="leben"] {
    background: hsl(150 65% 45% / 0.15);
    color: var(--color-phase-aktiv-text);
    border-color: hsl(150 65% 45% / 0.3);
}

.sparte-badge[data-sparte="pkv"] {
    background: hsl(212 95% 55% / 0.15);
    color: var(--color-phase-neu-text);
    border-color: hsl(212 95% 55% / 0.3);
}

.sparte-badge[data-sparte="kv_zusatz"] {
    background: hsl(45 95% 55% / 0.15);
    color: var(--color-phase-passiv-text);
    border-color: hsl(45 95% 55% / 0.3);
}

.sparte-badge[data-sparte="sach"] {
    background: hsl(280 65% 60% / 0.15);
    color: hsl(280 65% 80%);
    border-color: hsl(280 65% 60% / 0.3);
}

/* Light-Mode Sparten-Badge-Overrides */
[data-theme="light"] .sparte-badge[data-sparte="leben"]   { color: hsl(150 65% 25%); }
[data-theme="light"] .sparte-badge[data-sparte="pkv"]      { color: hsl(212 95% 35%); }
[data-theme="light"] .sparte-badge[data-sparte="kv_zusatz"] { color: hsl(38 90% 30%); }
[data-theme="light"] .sparte-badge[data-sparte="sach"]     { color: hsl(280 65% 35%); }

/* --- Quick-Filter Bar ------------------------------------------------- */

.quick-filter-bar {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    flex-wrap: wrap;
}

.quick-filter__btn {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    font-family: var(--font-sans);
}

.quick-filter__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.quick-filter__btn[data-aktiv="true"] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}

/* --- Pagination -------------------------------------------------------- */

.pagination-host {
    padding: var(--space-3) 0;
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pagination__info {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    margin: 0 var(--space-2);
}

.pagination__seiten {
    display: flex;
    gap: 2px;
}

.pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.pagination__btn:hover:not(:disabled) {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-accent);
}

.pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination__btn--seite[data-aktiv="true"],
.pagination__btn--seite[aria-current="page"] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

/* --- Aktionen-Modul --------------------------------------------------- */

.aktionen-zeile {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.aktionen-zeile:last-child {
    border-bottom: none;
}

.aktionen-zeile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

.aktionen-zeile__icon .empty-state__icon {
    width: 1.25rem;
    height: 1.25rem;
}

.aktionen-zeile__text { min-width: 0; }

.aktionen-zeile__regel {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.aktionen-zeile__beschreibung {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-top: 1px;
}

.aktionen-zeile__rechts {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.aktionen-zeile__anzahl {
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    min-width: 2.5rem;
    text-align: right;
}

/* --- Detail KPIs (Sektionen) ------------------------------------------ */

.detail-kpis__section {
    margin-bottom: var(--space-4);
}

.detail-kpis__section-label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.detail-kpis--compact {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.detail-kpis--compact .detail-kpis__card {
    padding: var(--space-3);
}

/* Einzelvermittler */
.detail__name--einzelvermittler {
    color: var(--color-text-muted);
    font-style: italic;
}

/* --- DM-Settings reload hint ------------------------------------------ */

.dm-settings__reload-hint {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-warn-bg-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-warn-border);
    color: var(--color-warn-text-soft);
    font-size: var(--font-size-small);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dm-settings__info-block {
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
}

/* Mitarbeiter last-seen */
.mitarbeiter-grid__last-seen {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* =====================================================================
 * Print-CSS — Druckbereich für Teamleiter-Export.
 * Bildschirm: druck-region versteckt. Print: nur druck-region sichtbar.
 * ===================================================================== */

.druck-region {
    display: none;
}

@media print {
    /* Bildschirm-Chrome ausblenden */
    .topbar,
    #app-root,
    #boot-error,
    .modal-backdrop,
    .vd-toast {
        display: none !important;
    }

    body {
        background: Canvas;
        color: CanvasText;
    }

    .druck-region {
        display: block;
        padding: 1cm;
        font-family: "JetBrains Mono", ui-monospace, monospace;
        color: CanvasText;
    }

    .druck-titel {
        font-size: 14pt;
        margin: 0 0 0.6cm 0;
        border-bottom: 1px solid CanvasText;
        padding-bottom: 0.2cm;
    }

    .druck-tabelle {
        width: 100%;
        border-collapse: collapse;
        font-size: 10pt;
    }

    .druck-tabelle th,
    .druck-tabelle td {
        border: 1px solid CanvasText;
        padding: 4pt 6pt;
        text-align: left;
    }

    .druck-tabelle thead th {
        font-weight: bold;
        border-bottom: 2pt solid CanvasText;
    }
}


/* =====================================================================
 * Scope-Toggle (Topbar) — Pill-Switch "Eigene / Alle"
 * ===================================================================== */

.topbar__cell--scope {
    display: flex;
    align-items: center;
}

.scope-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: var(--font-size-micro);
    font-family: var(--font-mono);
}

.scope-toggle__btn {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: none;
    padding: 3px var(--space-3);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    font-size: inherit;
    font-family: inherit;
    letter-spacing: var(--letter-spacing-caps);
}

.scope-toggle__btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.scope-toggle__btn[data-aktiv="true"] {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
}

/* =====================================================================
 * KPI-Kacheln — Subtitle-Zeile
 * ===================================================================== */

.kpi__subtitle {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    font-family: var(--font-mono);
}

/* =====================================================================
 * Tages-Copilot — Erklärungszeile Top-20
 * ===================================================================== */

.aktionen-zeile__erklaerung {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-1);
    font-family: var(--font-mono);
}

/* =====================================================================
 * Ticket-Verteilung (team-dm-karte.js)
 * ===================================================================== */

.dm-karte__ticket-block {
    padding: var(--space-4);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    min-width: 200px;
}

.ticket-bar {
    display: flex;
    height: 28px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    margin-block: var(--space-3);
}

.ticket-bar__seg {
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: width var(--transition-fast);
    min-width: 0;
}

.ticket-bar__seg--tn {
    background: hsl(var(--hsl-accent));
    opacity: 0.8;
}

.ticket-bar__seg--hv {
    background: hsl(var(--hsl-warn));
    opacity: 0.8;
}

.ticket-bar__label {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--color-bg);
    padding: 0 var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-bar__leer {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    padding: 0 var(--space-3);
    display: flex;
    align-items: center;
}

.ticket-bar__legende {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.ticket-bar__leg-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ticket-bar__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ticket-bar__dot--tn {
    background: hsl(var(--hsl-accent));
}

.ticket-bar__dot--hv {
    background: hsl(var(--hsl-warn));
}

.ticket-bar__meta {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--font-size-small);
    flex-wrap: wrap;
}

.ticket-bar__konversion {
    font-family: var(--font-mono);
    color: var(--color-text);
}

.ticket-bar__sla {
    font-family: var(--font-mono);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    font-weight: 600;
}

.ticket-bar__sla--gruen {
    background: var(--color-phase-aktiv-bg, hsl(142 60% 15%));
    color: var(--color-phase-aktiv, hsl(142 65% 55%));
}

.ticket-bar__sla--gelb {
    background: var(--color-warn-bg);
    color: var(--color-warn-text-soft);
}

.ticket-bar__sla--rot {
    background: var(--color-phase-abgewandert-bg, hsl(0 60% 15%));
    color: var(--color-phase-abgewandert, hsl(0 65% 65%));
}

/* =====================================================================
 * Upload-Sektion (settings-page.js)
 * ===================================================================== */

.upload__status-msg {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    margin-top: var(--space-2);
    font-family: var(--font-mono);
}

.upload__status-msg--ok {
    background: var(--color-phase-aktiv-bg, hsl(142 60% 15%));
    color: var(--color-phase-aktiv, hsl(142 65% 55%));
    border: 1px solid var(--color-phase-aktiv, hsl(142 65% 30%));
}

.upload__status-msg--fehler {
    background: var(--color-phase-abgewandert-bg, hsl(0 60% 15%));
    color: var(--color-phase-abgewandert, hsl(0 65% 65%));
    border: 1px solid var(--color-phase-abgewandert, hsl(0 50% 30%));
}

/* === Termin-Briefing-Modul (2026-05-20) ============================= */

.modul-card--termine .modul-card__body--termine {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.termine-leer {
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

.termine-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.termine-liste__item {
    display: grid;
    grid-template-columns: 4em 1fr auto auto auto;
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background 120ms ease;
}
.termine-liste__item:hover { background: var(--color-surface-3, var(--color-surface-2)); }
.termine-liste__item[data-status="erledigt"] { opacity: 0.55; }
.termine-liste__item[data-status="erledigt"] .termine-liste__titel { text-decoration: line-through; }

/* Quelle-Badge: Tom (grün) vs Booking (blau) — sofort erkennbar */
.termine-liste__quelle {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
    border: 1px solid var(--color-border-subtle, var(--color-border));
}
.termine-liste__quelle[data-quelle="booking"] {
    color: var(--color-info, hsl(210 80% 60%));
    border-color: var(--color-info, hsl(210 80% 60% / 0.4));
    background: hsl(210 80% 60% / 0.08);
}
.termine-liste__quelle[data-quelle="tom"] {
    color: var(--color-success, hsl(140 50% 50%));
    border-color: var(--color-success, hsl(140 50% 50% / 0.4));
    background: hsl(140 50% 50% / 0.08);
}

/* Vertriebs-Hebel-Zeile — kompakt, Punkte mit Trennern, eigene Zeile */
.termine-liste__hebel {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px dashed var(--color-border-subtle, var(--color-border));
    font-size: var(--font-size-micro);
    line-height: 1.4;
}
.termine-liste__hebel-status {
    font-family: var(--font-mono);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    font-size: 0.72rem;
}
.termine-liste__hebel-status--ok {
    color: var(--color-success, hsl(140 50% 50%));
}
.termine-liste__hebel-status--folge {
    color: var(--color-warn, hsl(40 80% 55%));
}
.termine-liste__hebel-sep {
    color: var(--color-text-muted);
    font-style: italic;
}
.termine-liste__hebel-text {
    color: var(--color-text);
    font-style: italic;
}
.termine-liste__hebel-pkt {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-3, hsl(0 0% 100% / 0.04));
    border: 1px solid var(--color-border-subtle, var(--color-border));
    color: var(--color-text);
    cursor: help;
}
.termine-liste__hebel-pkt[data-prio="1"] {
    border-color: var(--color-warn, hsl(40 80% 55% / 0.4));
    color: var(--color-warn-text, var(--color-text));
}
.termine-liste__hebel-pkt[data-prio="2"] {
    border-color: var(--color-info, hsl(210 80% 60% / 0.3));
}
.termine-liste__hebel-pkt + .termine-liste__hebel-pkt::before {
    content: "·";
    color: var(--color-text-muted);
    margin-right: 0.4em;
    margin-left: -0.2em;
}

.termine-liste__zeit {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.termine-liste__titel {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-align: left;
}
.termine-liste__titel:hover { color: var(--color-accent); text-decoration: underline; }

.termine-liste__anlass {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm, 0.9rem);
    grid-column: 2 / span 4;
    grid-row: 2;
}

.termine-liste__status {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
}

.termine-liste__aktion { display: flex; }

/* Eingabe-Form */
.termine-eingabe {
    border-top: 1px dashed var(--color-border);
    padding-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.termine-eingabe__titel {
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
    margin: 0;
    font-family: var(--font-mono);
}

.termine-eingabe__grid {
    display: grid;
    grid-template-columns: 5em 1fr auto;
    gap: var(--space-2);
    align-items: stretch;
}
.termine-eingabe__grid > .termine-eingabe__firma-wrap { grid-column: 1 / -1; }
.termine-eingabe__grid > .termine-eingabe__anlass { grid-column: 1 / -1; }

.termine-eingabe input {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    font-family: inherit;
}
.termine-eingabe input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
}

.termine-eingabe__hinweis {
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
}

/* Detail-View */
.termine-detail__back {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    padding: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    margin-bottom: var(--space-3);
}
.termine-detail__back:hover { color: var(--color-text); }

.termine-detail__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.termine-detail__zeit {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm, 0.9rem);
}

.termine-detail__firma {
    margin: 0;
    font-size: var(--font-size-lg, 1.1rem);
}

.termine-detail__meta {
    font-size: var(--font-size-sm, 0.9rem);
    color: var(--color-text-muted);
}

.briefing-block {
    margin-bottom: var(--space-4);
}

.briefing-block__titel {
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-mono);
}

.briefing-block__text {
    margin: 0;
    color: var(--color-text);
}

.briefing-block__text--anlass {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    background: var(--color-surface-2);
    padding: var(--space-3);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.briefing-notiz {
    width: 100%;
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-family: inherit;
    resize: vertical;
}
.briefing-notiz:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }

.briefing-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.briefing-item {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.briefing-item[data-stufe="warnung"] { border-left-color: var(--ampel-gelb, hsl(40 95% 55%)); }
.briefing-item[data-stufe="info"]    { border-left-color: var(--color-accent); }
.briefing-item[data-prio="1"] { border-left-color: var(--ampel-rot, hsl(0 70% 55%)); }
.briefing-item[data-prio="2"] { border-left-color: var(--ampel-gelb, hsl(40 95% 55%)); }
.briefing-item[data-prio="3"] { border-left-color: var(--ampel-gruen, hsl(140 50% 50%)); }

.briefing-item__titel {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.briefing-item__detail,
.briefing-item__formulierung {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm, 0.9rem);
}

.briefing-item__formulierung {
    font-style: italic;
}

.briefing-stamm {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
}

.briefing-stamm__label {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
}

.briefing-stamm__wert {
    margin: 0;
    color: var(--color-text);
}

.termine-detail__aktionen {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.btn--gefahr {
    background: transparent;
    color: var(--ampel-rot, hsl(0 70% 55%));
    border: 1px solid var(--ampel-rot, hsl(0 70% 55%));
}
.btn--gefahr:hover {
    background: var(--ampel-rot, hsl(0 70% 55%));
    color: var(--color-surface, white);
}

/* === Briefing-Kontext-Block (warum/frage/chance) ==================== */

.briefing-block--kontext .briefing-kontext {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

.briefing-kontext__label {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
    padding-top: 0.15em;
}

.briefing-kontext__wert {
    margin: 0;
    color: var(--color-text);
}

.termine-detail__beispiel {
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    margin-bottom: var(--space-3);
}

/* Slack-Button + Email-Aktionen-Reihe */
.email-cluster__aktionen {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-2);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn--ghost:hover {
    background: var(--color-surface-2);
    border-color: var(--color-text-muted);
}
.btn--klein { padding: 0.3em 0.6em; font-size: var(--font-size-micro); }

/* Termine-Leer-Block prominenter */
.termine-leer {
    padding: var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}
.termine-leer__titel {
    margin: 0 0 var(--space-1) 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.termine-leer__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm, 0.9rem);
}

/* ─── Termin-Detail Tab-Navigation ───────────────────────────────────────── */

.termine-detail__tab-bar {
    margin-bottom: var(--space-3);
}

.termine-detail__pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* VTT-Bereich */
.briefing-block--vtt {
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--color-surface-2);
}

.briefing-block__text--vtt {
    margin: 0;
    color: var(--color-text);
    white-space: pre-wrap;
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

.briefing-block__text--vtt-placeholder {
    margin: 0;
    color: var(--color-text-subtle);
    font-style: italic;
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

/* ---------- Pending-Kacheln (Tages-Copilot Snapshot-Modus) ---------------- */

.pending-kacheln-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.pending-kachel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.pending-kachel__kopf {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pending-kachel__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.pending-kachel__titel {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    flex: 1;
}

.pending-badge {
    background: var(--color-surface-1);
    color: var(--color-text-subtle);
    font-size: var(--font-size-micro);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    white-space: nowrap;
}

.pending-kachel__text {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}