/* =====================================================================
 * steckbrief.css — Lovable-Dichte-Variante (siehe agentensystem/PATTERNS.md
 * §1.10). Polish-Pass Block 2, 2026-05-06. Token-strikt — keine Hex/rgb-
 * Literale, alles über var(--…) aus design-tokens.css.
 *
 * Anatomie:
 *   .steckbrief
 *     .steckbrief__header           — Score-Header (volle Breite, Hero)
 *       .steckbrief__score-block    — Badge + Klasse + Begründung + Peer
 *     .steckbrief__grid             — 2×2-Karten-Grid (Lovable-Dichte)
 *       .steckbrief__karte          — eine von 4 Karten
 *         .steckbrief__karte--anschluss  — Karte 1 (Anschluss-Strip)
 *     .steckbrief__footer           — Anfrage-Pattern + Notizen
 *
 * Motion:
 *   - Stagger-Mount der 4 Karten (50ms Delta)
 *   - Score-Badge-Pulse 1× beim Mount (600ms)
 *   - Tooltip fade-in 150ms
 *   - alle Animationen auf prefers-reduced-motion deaktiviert
 *
 * State Coverage:
 *   - .steckbrief__skeleton-wrap     — Loading-Skeleton (Block 3)
 *   - .steckbrief__error-state       — Recovery-Pfad
 *   - .steckbrief__stale-pill        — Stale-Cache (_veraltet)
 *   - .steckbrief__empty-state       — Anfrage-Pattern leer
 * ===================================================================== */

.shell--steckbrief {
    padding: var(--space-5);
}

.steckbrief {
    max-width: var(--layout-content-max);
    margin: 0 auto;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Header (Hero / Score-Block) ────────────────────────────────── */

.steckbrief__header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "linke rechte"
        "score score";
    gap: var(--space-3) var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

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

.steckbrief__header-linke { grid-area: linke; display: flex; flex-direction: column; gap: var(--space-2); }
.steckbrief__header-rechte { grid-area: rechte; display: flex; gap: var(--space-2); align-items: flex-start; }
.steckbrief__score-block { grid-area: score; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

.steckbrief__zurueck {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    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);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-self: flex-start;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

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

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

.steckbrief__name-zeile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
}

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

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

.steckbrief__stale-pill {
    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-phase-passiv-border);
    background: var(--color-phase-passiv-bg);
    color: var(--color-phase-passiv-text);
    border-radius: var(--radius-pill);
}

.steckbrief__drucken {
    background: var(--color-accent);
    border: 0;
    color: var(--color-text-inverse);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}

.steckbrief__drucken:hover { background: var(--color-accent-hover); }
.steckbrief__drucken:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Score-Badge (Wow-Element) ──────────────────────────────────── */

.steckbrief__score-badge {
    --badge-size: 96px;
    width: var(--badge-size);
    height: var(--badge-size);
    border-radius: var(--radius-pill);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    animation: steckbrief-badge-pulse 600ms var(--ease-out) 1 backwards;
}

.steckbrief__score-wert {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.steckbrief__score-skala {
    font-size: var(--font-size-micro);
    opacity: 0.7;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.steckbrief__score-badge--produktiv {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    color: var(--color-phase-aktiv-text);
}
.steckbrief__score-badge--mittel {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.steckbrief__score-badge--passiv {
    background: var(--color-phase-passiv-bg);
    border-color: var(--color-phase-passiv-border);
    color: var(--color-phase-passiv-text);
}
.steckbrief__score-badge--karteileiche {
    background: var(--color-phase-abgewandert-bg);
    border-color: var(--color-phase-abgewandert-border);
    color: var(--color-phase-abgewandert-text);
}

@keyframes steckbrief-badge-pulse {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.steckbrief__score-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 240px;
}

.steckbrief__klasse-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.steckbrief__klasse-label--produktiv     { color: var(--color-phase-aktiv-text); }
.steckbrief__klasse-label--mittel        { color: var(--color-accent); }
.steckbrief__klasse-label--passiv        { color: var(--color-phase-passiv-text); }
.steckbrief__klasse-label--karteileiche  { color: var(--color-phase-abgewandert-text); }

.steckbrief__begruendung {
    font-size: var(--font-size-body);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 80ch;
}

.steckbrief__peer-benchmark {
    font-size: var(--font-size-small);
    color: var(--color-text-subtle);
    margin: 0;
    font-style: italic;
}

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

/* ── 4-Karten-Grid (Lovable-Dichte; ab 2026-05-21 erweitert auf 6 Karten) ─── */

.steckbrief__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

/* Tom 2026-05-21: Vertriebs-Kontext-Karte */
.vk-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
    font-size: var(--font-size-sm, 0.92rem);
}
.vk-zeile:last-child { border-bottom: 0; }
.vk-label {
    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);
}
.vk-wert { color: var(--color-text); text-align: right; }
.vk-wert--ff { font-style: italic; color: var(--color-text-muted); }
.vk-kanal-grund { color: var(--color-text-muted); font-size: 0.85em; font-style: italic; }
.vk-pille {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: help;
}
.vk-pille--gruen  { background: hsl(140 50% 45% / 0.12); color: var(--color-success, hsl(140 50% 45%)); border: 1px solid hsl(140 50% 45% / 0.35); }
.vk-pille--gelb   { background: hsl(40 80% 55% / 0.12); color: var(--color-warn, hsl(40 80% 55%)); border: 1px solid hsl(40 80% 55% / 0.35); }
.vk-pille--rot    { background: hsl(0 70% 55% / 0.12); color: hsl(0 70% 55%); border: 1px solid hsl(0 70% 55% / 0.35); }
.vk-pille--info   { background: hsl(210 80% 60% / 0.12); color: var(--color-info, hsl(210 80% 60%)); border: 1px solid hsl(210 80% 60% / 0.35); }
.vk-pille--neu    { background: hsl(280 60% 55% / 0.12); color: hsl(280 60% 55%); border: 1px solid hsl(280 60% 55% / 0.35); }
.vk-pille--grau   { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.vk-tage {
    font-family: var(--font-mono);
    font-size: 0.92em;
}
.vk-tage--gruen { color: var(--color-success, hsl(140 50% 45%)); }
.vk-tage--gelb  { color: var(--color-warn, hsl(40 80% 55%)); }
.vk-tage--rot   { color: hsl(0 70% 55%); }
.vk-potential-grund {
    margin: var(--space-1) 0 0;
    padding: var(--space-2);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-style: italic;
    line-height: 1.4;
}

/* Tom 2026-05-21: Anbindungen & Courtagen Karte */
.anb-warn { color: var(--color-warn, hsl(40 80% 55%)); font-weight: 600; }
.anb-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}
.anb-tabelle th, .anb-tabelle td {
    padding: var(--space-1) var(--space-2);
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}
.anb-tabelle th {
    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);
    font-weight: 600;
}
.anb-zelle--num {
    text-align: right;
    color: var(--color-text);
}
.anb-status {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.78em;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.anb-status--aktiv {
    color: var(--color-success, hsl(140 50% 45%));
    background: hsl(140 50% 45% / 0.10);
    border: 1px solid hsl(140 50% 45% / 0.30);
}
.anb-status--gekuendigt {
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    text-decoration: line-through;
}
.anb-mehr-btn {
    margin-top: var(--space-2);
    background: transparent;
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    width: 100%;
}
.anb-mehr-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.anb-courtagen {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border-subtle, var(--color-border));
}
.anb-courtagen__titel {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-warn, hsl(40 80% 55%));
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}
.anb-courtagen__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.anb-courtagen__liste li {
    padding: var(--space-1) var(--space-2);
    background: hsl(40 80% 55% / 0.08);
    border-left: 2px solid var(--color-warn, hsl(40 80% 55%));
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Tom 2026-05-21: Share-of-Wallet-Karte */
.steckbrief__karte--wallet { /* nutzt Standard-Karten-Layout */ }

.wallet-balken {
    display: flex;
    height: 28px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: var(--space-2) 0;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle, var(--color-border));
}
.wallet-balken__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: 600;
    color: white;
    min-width: 0;
    transition: filter 120ms ease;
}
.wallet-balken__seg:hover { filter: brightness(1.1); }
.wallet-balken__seg--demv  { background: var(--color-success, hsl(140 50% 45%)); }
.wallet-balken__seg--fremd { background: var(--color-text-muted, hsl(0 0% 50%)); }
.wallet-balken__seg--uv    { background: var(--color-warn, hsl(40 80% 55%)); }
.wallet-balken__seg-label {
    padding: 0 6px;
    white-space: nowrap;
    text-shadow: 0 1px 1px hsl(0 0% 0% / 0.25);
}

.wallet-legende {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm, 0.9rem);
}
.wallet-legende__zeile {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: var(--space-2);
    align-items: baseline;
    color: var(--color-text);
}
.wallet-legende__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-top: 4px;
}
.wallet-legende__dot--demv  { background: var(--color-success, hsl(140 50% 45%)); }
.wallet-legende__dot--fremd { background: var(--color-text-muted, hsl(0 0% 50%)); }
.wallet-legende__dot--uv    { background: var(--color-warn, hsl(40 80% 55%)); }
.wallet-legende__label { color: var(--color-text); }
.wallet-legende__wert {
    text-align: right;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.wallet-hebel {
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warn, hsl(40 80% 55%));
    background: hsl(40 80% 55% / 0.06);
}
.wallet-hebel--hebel {
    border-left-color: var(--color-warn, hsl(40 80% 55%));
    background: hsl(40 80% 55% / 0.10);
}
.wallet-hebel--wettbewerb {
    border-left-color: var(--color-info, hsl(210 80% 60%));
    background: hsl(210 80% 60% / 0.08);
}
.wallet-hebel--stark {
    border-left-color: var(--color-success, hsl(140 50% 45%));
    background: hsl(140 50% 45% / 0.08);
}
.wallet-hebel__titel {
    display: block;
    color: var(--color-text);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm, 0.95rem);
}
.wallet-hebel__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm, 0.9rem);
    line-height: 1.45;
}

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

.steckbrief__karte {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    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);
    /* Stagger-Mount via :nth-child unten */
    animation: steckbrief-karte-enter var(--duration-base) var(--ease-out) backwards;
}

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

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

.steckbrief__karte--anschluss {
    grid-column: span 2;
}

@media (max-width: 880px) {
    .steckbrief__karte--anschluss { grid-column: span 1; }
}

.steckbrief__grid > .steckbrief__karte:nth-child(1) { animation-delay: 50ms; }
.steckbrief__grid > .steckbrief__karte:nth-child(2) { animation-delay: 100ms; }
.steckbrief__grid > .steckbrief__karte:nth-child(3) { animation-delay: 150ms; }
.steckbrief__grid > .steckbrief__karte:nth-child(4) { animation-delay: 200ms; }
.steckbrief__grid > .steckbrief__karte:nth-child(5) { animation-delay: 250ms; }

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

.steckbrief__karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-2);
}

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

.steckbrief__counter {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    letter-spacing: var(--letter-spacing-caps);
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}

/* ── Zeile (Label/Wert mit optionaler KPI-Ampel) ────────────────── */

.steckbrief__zeile {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    align-items: baseline;
    font-size: var(--font-size-small);
    border-bottom: 1px dotted var(--color-border-subtle);
}

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

.steckbrief__label {
    color: var(--color-text-muted);
}

.steckbrief__wert {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.steckbrief__wert[data-kpi-ampel="gruen"] { color: var(--color-phase-aktiv-text); }
.steckbrief__wert[data-kpi-ampel="gelb"]  { color: var(--color-phase-passiv-text); }
.steckbrief__wert[data-kpi-ampel="rot"]   { color: var(--color-phase-abgewandert-text); }

/* ── Sub-Block (z.B. Top-3 Anrufer, DV-Listen, Sparten-Block) ────── */

.steckbrief__sub-block {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-subtle);
}

.steckbrief__sub-titel {
    font-size: var(--font-size-micro);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-subtle);
    margin: 0 0 var(--space-1);
}

.steckbrief__sub-liste,
.steckbrief__mitarbeiter {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
}

.steckbrief__sub-liste li,
.steckbrief__mitarbeiter li {
    padding: 2px 0;
    color: var(--color-text-muted);
    border-bottom: 1px dotted var(--color-border-subtle);
}

.steckbrief__sub-liste li:last-child,
.steckbrief__mitarbeiter li:last-child {
    border-bottom: 0;
}

.steckbrief__mitarbeiter li[data-aktiv="true"] {
    color: var(--color-phase-aktiv-text);
}

.steckbrief__leer {
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    margin: 0;
    font-style: italic;
    list-style: none;
}

/* ── Onboarding-Status-Pill ──────────────────────────────────────── */

.steckbrief__status-pill {
    display: inline-block;
    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-radius: var(--radius-pill);
    border: 1px solid;
}

.steckbrief__status-pill--complete,
.steckbrief__status-pill--aktiv {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    color: var(--color-phase-aktiv-text);
}

.steckbrief__status-pill--in-progress {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ── Anschluss-Pillen-Strip (Daten-Souveränität) ────────────────── */

.steckbrief__pille-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.steckbrief__pille-wrapper {
    position: relative;
    display: inline-block;
}

.steckbrief__pille {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    cursor: help;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

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

.steckbrief__pille-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steckbrief__pille--gruen {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    color: var(--color-phase-aktiv-text);
}

.steckbrief__pille--gelb {
    background: var(--color-phase-passiv-bg);
    border-color: var(--color-phase-passiv-border);
    color: var(--color-phase-passiv-text);
}

.steckbrief__pille--rot {
    background: var(--color-phase-abgewandert-bg);
    border-color: var(--color-phase-abgewandert-border);
    color: var(--color-phase-abgewandert-text);
}

.steckbrief__pille:hover { transform: translateY(-1px); }

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

/* Tooltip — CSS-only, fade-in 150ms beim Hover/Focus */
.steckbrief__tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-1));
    left: 0;
    z-index: 30;
    background: var(--color-surface-3);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--font-size-micro);
    line-height: var(--line-height-normal);
    white-space: pre-line;
    min-width: 240px;
    max-width: 360px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                visibility 0s linear var(--duration-fast);
}

.steckbrief__pille-wrapper:hover .steckbrief__tooltip,
.steckbrief__pille:focus-visible + .steckbrief__tooltip,
.steckbrief__pille-wrapper:focus-within .steckbrief__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* ── Sparten-Bar (4-Segment, horizontal) ─────────────────────────── */

.steckbrief__sparten-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.steckbrief__sparten-bar {
    display: flex;
    width: 100%;
    height: 14px;
    min-height: 12px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
}

.steckbrief__sparten-segment {
    display: block;
    height: 100%;
    transition: filter var(--duration-fast) var(--ease-out);
}

.steckbrief__sparten-segment:hover { filter: brightness(1.15); }
.steckbrief__sparten-segment--komposit { background: var(--color-sparte-komposit); }
.steckbrief__sparten-segment--leben    { background: var(--color-sparte-leben); }
.steckbrief__sparten-segment--kranken  { background: var(--color-sparte-kranken); }
.steckbrief__sparten-segment--gewerbe  { background: var(--color-sparte-gewerbe); }
.steckbrief__sparten-segment--leer     { background: var(--color-surface-3); }

.steckbrief__sparten-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
}

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

.steckbrief__sparten-legende-item::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-xs);
    background: currentColor;
    display: inline-block;
}

.steckbrief__sparten-legende-item--komposit { color: var(--color-sparte-komposit); }
.steckbrief__sparten-legende-item--leben    { color: var(--color-sparte-leben); }
.steckbrief__sparten-legende-item--kranken  { color: var(--color-sparte-kranken); }
.steckbrief__sparten-legende-item--gewerbe  { color: var(--color-sparte-gewerbe); }

/* ── Footer (Anfrage-Pattern + Notizen) ──────────────────────────── */

.steckbrief__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

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

.steckbrief__pattern,
.steckbrief__notizen {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.steckbrief__pattern:hover,
.steckbrief__notizen:hover {
    box-shadow: var(--shadow-md);
}

.steckbrief__pattern-titel,
.steckbrief__notizen-titel {
    font-size: var(--font-size-micro);
    font-family: var(--font-mono);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

.steckbrief__pattern-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
}

.steckbrief__pattern-liste li {
    padding: var(--space-1) 0;
    border-bottom: 1px dotted var(--color-border-subtle);
}

.steckbrief__pattern-liste li:last-child {
    border-bottom: 0;
}

.steckbrief__notizen-feld {
    width: 100%;
    background: var(--color-bg);
    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);
    resize: vertical;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.steckbrief__notizen-feld:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ── Empty-State (Anfrage-Pattern leer) ──────────────────────────── */

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

.steckbrief__empty-icon {
    width: 32px;
    height: 32px;
    color: var(--color-text-subtle);
}

.steckbrief__empty-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);
}

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

/* ── Loading-Skeleton (Block 3) ─────────────────────────────────── */

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

.steckbrief__skeleton-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

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

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

.steckbrief__skeleton-card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.steckbrief__skeleton-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-surface-2) 0%,
        var(--color-surface-3) 50%,
        var(--color-surface-2) 100%
    );
    background-size: 200% 100%;
    animation: steckbrief-shimmer 1.5s infinite var(--ease-out);
    border-radius: var(--radius-sm);
}

.steckbrief__skeleton-badge {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.steckbrief__skeleton-line {
    height: 12px;
    border-radius: var(--radius-xs);
}

.steckbrief__skeleton-line--lang   { width: 80%; }
.steckbrief__skeleton-line--mittel { width: 60%; }
.steckbrief__skeleton-line--kurz   { width: 35%; }

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

/* ── Error-State (Recovery) ──────────────────────────────────────── */

.steckbrief__error-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-phase-abgewandert-border);
    background: var(--color-phase-abgewandert-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.steckbrief__error-titel {
    margin: 0;
    font-size: var(--font-size-h2);
    color: var(--color-phase-abgewandert-text);
    letter-spacing: var(--letter-spacing-tight);
}

.steckbrief__error-text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    color: var(--color-phase-abgewandert-text);
}

.steckbrief__error-aktion {
    margin-top: var(--space-2);
    background: var(--color-phase-abgewandert-solid);
    border: 0;
    color: var(--color-text-inverse);
    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-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter var(--duration-fast) var(--ease-out);
}

.steckbrief__error-aktion:hover { filter: brightness(1.1); }
.steckbrief__error-aktion:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Phase 2 (2026-05-07): KPI-Pille in Bestand-/Compliance-Zeile ── */

.steckbrief__zeile--kpi-pille {
    grid-template-columns: 1fr auto;
}

.steckbrief__zeile-wert-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.steckbrief__kpi-pille {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    line-height: 1.3;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    cursor: help;
}

.steckbrief__kpi-pille::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
    flex-shrink: 0;
}

.steckbrief__kpi-pille[data-kpi-ampel="gruen"] {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    color: var(--color-phase-aktiv-text);
}

.steckbrief__kpi-pille[data-kpi-ampel="gelb"] {
    background: var(--color-phase-passiv-bg);
    border-color: var(--color-phase-passiv-border);
    color: var(--color-phase-passiv-text);
}

.steckbrief__kpi-pille[data-kpi-ampel="rot"] {
    background: var(--color-phase-abgewandert-bg);
    border-color: var(--color-phase-abgewandert-border);
    color: var(--color-phase-abgewandert-text);
}

.steckbrief__kpi-pille:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Tooltip pro Zeile (für Bestand-Phase-2 + Compliance-Karte). */
.steckbrief__zeile-tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-1));
    right: 0;
    z-index: 30;
    background: var(--color-surface-3);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--font-size-micro);
    line-height: var(--line-height-normal);
    white-space: pre-line;
    min-width: 220px;
    max-width: 320px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                visibility 0s linear var(--duration-fast);
}

.steckbrief__zeile-wert-wrapper:hover .steckbrief__zeile-tooltip,
.steckbrief__zeile-wert-wrapper:focus-within .steckbrief__zeile-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* ── Phase 2 (2026-05-07): Compliance-Karte ─────────────────────── */

.steckbrief__karte--compliance {
    /* Border-left-Akzent in Ampel-Farbe — Karte ist auf einen Blick lesbar. */
    border-left-width: 3px;
}

.steckbrief__karte--compliance-gruen {
    border-left-color: var(--color-phase-aktiv-border);
}
.steckbrief__karte--compliance-gelb {
    border-left-color: var(--color-phase-passiv-border);
}
.steckbrief__karte--compliance-rot {
    border-left-color: var(--color-phase-abgewandert-border);
}

.steckbrief__idd-hero {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}

.steckbrief__idd-pille {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.steckbrief__idd-pille-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: currentColor;
    flex-shrink: 0;
}

.steckbrief__idd-pille--gruen {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    color: var(--color-phase-aktiv-text);
}

.steckbrief__idd-pille--gelb {
    background: var(--color-phase-passiv-bg);
    border-color: var(--color-phase-passiv-border);
    color: var(--color-phase-passiv-text);
}

.steckbrief__idd-pille--rot {
    background: var(--color-phase-abgewandert-bg);
    border-color: var(--color-phase-abgewandert-border);
    color: var(--color-phase-abgewandert-text);
}

.steckbrief__idd-hero-sub {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.steckbrief__compliance-hinweis {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-phase-abgewandert-bg);
    border: 1px solid var(--color-phase-abgewandert-border);
    border-radius: var(--radius-sm);
    color: var(--color-phase-abgewandert-text);
    font-size: var(--font-size-micro);
    line-height: var(--line-height-normal);
    font-family: var(--font-sans);
}

.steckbrief__compliance-empty {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
    font-size: var(--font-size-micro);
    font-style: italic;
}

/* ── Reaktiv-Aufhänger-Strip (Spec 2026-05-12) ──────────────────────
 *
 * Eigene Sektion zwischen Pre-Call-Brief und 5-Karten-Grid. 3 große
 * Pillen + Inline-Detail-Panel. Token-only (keine Hex/rgb-Literale).
 * Lovable-Dichte: Schatten, Radien, Hover/Focus, Empty/Error-States.
 *
 * Polish-Pass 2026-05-12 (ui-veredler, A11y-Schwerpunkt):
 *   - Ampel-Differenzierung NICHT nur über Farbe: linker Akzent-Balken
 *     in Ampelfarbe + Border-Stilistik (solid 🟢 / double 🟡 / dashed 🔴)
 *     + Inline-SVG-Form-Icon (Häkchen / Frage / Ausruf).
 *   - 🟢-Aussage-Sätze sind typografisch prominent (Tom liest vor).
 *   - All-Grün-Empty-State: titel-Ruhezeile statt leere Detail-Box.
 *   - Panel: smooth max-height-Aufklapp via [data-state=open|closed].
 *   - Focus-Visible: deutlicher Outline-Ring + Offset (Tastatur-Nav im Call).
 */

.steckbrief__reaktiv {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.steckbrief__reaktiv-titel {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.steckbrief__reaktiv-titel-label {
    font-family: var(--font-sans);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}

/* All-Grün-Empty: ruhige Status-Zeile (kein "nichts da"-Gefühl). */
.steckbrief__reaktiv-titel-ruhe {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-phase-aktiv-text);
    font-style: italic;
}

.steckbrief__reaktiv-titel-ruhe::before {
    content: "✓ ";
    font-style: normal;
    font-weight: var(--font-weight-bold);
    margin-right: 2px;
}

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

@media (max-width: 720px) {
    .steckbrief__reaktiv-reihe { grid-template-columns: 1fr; }
}

/* Pille: linker Akzent-Balken via border-left, Border-Stilistik pro
 * Ampel (Form-Hinweis zusätzlich zur Farbe). Inline-SVG-Icon links,
 * Label mittig, Chevron rechts (sichtbarer „klickbar"-Affordance). */
.steckbrief__reaktiv-pille {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 52px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

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

/* Focus-Visible: prominenter Doppel-Ring (Outline + Box-Shadow), damit
 * im Call auf einen Blick klar ist „ich bin auf der Postfach-Pille". */
.steckbrief__reaktiv-pille:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus), var(--shadow-md);
    transform: translateY(-1px);
    z-index: 1;
}

.steckbrief__reaktiv-pille[aria-expanded="true"] {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Ampel-Modifier — Farbe + Border-Stilistik (Farbenblindheits-tauglich). */
.steckbrief__reaktiv-pille--gruen {
    background: var(--color-phase-aktiv-bg);
    border-color: var(--color-phase-aktiv-border);
    border-left-color: var(--color-phase-aktiv-solid);
    border-left-style: solid;
    color: var(--color-phase-aktiv-text);
}

.steckbrief__reaktiv-pille--gelb {
    background: var(--color-phase-passiv-bg);
    border-color: var(--color-phase-passiv-border);
    border-left-color: var(--color-phase-passiv-solid);
    border-left-style: double;
    border-left-width: 6px;
    color: var(--color-phase-passiv-text);
}

.steckbrief__reaktiv-pille--rot {
    background: var(--color-phase-abgewandert-bg);
    border-color: var(--color-phase-abgewandert-border);
    border-left-color: var(--color-phase-abgewandert-solid);
    border-left-style: dashed;
    color: var(--color-phase-abgewandert-text);
}

/* Inline-SVG-Form-Icon (Häkchen/Frage/Ausruf). Erbt currentColor von
 * der Pille → folgt der Ampel-Tokenfarbe in Light + Dark. */
.steckbrief__reaktiv-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

.steckbrief__reaktiv-punkt {
    font-size: var(--font-size-body);
    flex-shrink: 0;
    line-height: 1;
}

.steckbrief__reaktiv-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.steckbrief__reaktiv-chev {
    font-family: var(--font-mono);
    font-size: var(--font-size-h2);
    line-height: 1;
    opacity: 0.55;
    transition: transform var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}

.steckbrief__reaktiv-pille:hover .steckbrief__reaktiv-chev,
.steckbrief__reaktiv-pille:focus-visible .steckbrief__reaktiv-chev {
    opacity: 1;
}

.steckbrief__reaktiv-pille[aria-expanded="true"] .steckbrief__reaktiv-chev {
    transform: rotate(90deg);
    opacity: 1;
}

/* ── Detail-Panel (smooth max-height-Aufklapp) ───────────────────── */

.steckbrief__reaktiv-panel-wrap {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.steckbrief__reaktiv-panel-wrap[data-state="open"] {
    grid-template-rows: 1fr;
}

.steckbrief__reaktiv-panel {
    min-height: 0;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.steckbrief__reaktiv-panel[hidden] { display: none; }

/* Linker Akzent-Balken auf dem Panel, passend zur geklickten Pille —
 * stützt den optischen Bezug "Pille X → Panel-Inhalt X". */
.steckbrief__reaktiv-panel[data-ampel="gruen"] { border-left: 4px solid var(--color-phase-aktiv-solid); }
.steckbrief__reaktiv-panel[data-ampel="gelb"]  { border-left: 4px solid var(--color-phase-passiv-solid); }
.steckbrief__reaktiv-panel[data-ampel="rot"]   { border-left: 4px solid var(--color-phase-abgewandert-solid); }

.steckbrief__reaktiv-panel-kopf {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}

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

.steckbrief__reaktiv-satz {
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border-subtle);
}

/* 🟢-Aussage-Schablonen typografisch prominent — Tom liest sie laut vor,
 * der Lesefluss soll im Call ohne Mehrfach-Auge funktionieren. */
.steckbrief__reaktiv-satz--gruen {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-loose);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text);
    border-left-color: var(--color-phase-aktiv-solid);
    padding-left: var(--space-4);
}

.steckbrief__reaktiv-satz--gelb {
    border-left-color: var(--color-phase-passiv-solid);
    color: var(--color-text);
    font-style: italic;
}

.steckbrief__reaktiv-hinweis {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    color: var(--color-phase-abgewandert-text);
    line-height: var(--line-height-normal);
}

.steckbrief__reaktiv-nextstep {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

.steckbrief__reaktiv-nextstep-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.steckbrief__reaktiv-empty {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-style: italic;
}

/* All-Grün-Zustand: Pillen optisch leicht zurückhaltend (kein Schreien),
 * damit der entspannte Charakter rüberkommt. */
.steckbrief__reaktiv[data-all-gruen="true"] .steckbrief__reaktiv-pille {
    box-shadow: none;
}

.steckbrief__reaktiv[data-all-gruen="true"] .steckbrief__reaktiv-pille:hover,
.steckbrief__reaktiv[data-all-gruen="true"] .steckbrief__reaktiv-pille:focus-visible {
    box-shadow: var(--shadow-sm);
}

/* ── Reduced-Motion (Pflicht) ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .steckbrief__score-badge { animation: none; }
    .steckbrief__karte { animation: none; transition: none; }
    .steckbrief__karte:hover { transform: none; }
    .steckbrief__pille { transition: none; }
    .steckbrief__pille:hover { transform: none; }
    .steckbrief__sparten-segment:hover { filter: none; }
    .steckbrief__skeleton-shimmer { animation: none; opacity: 0.6; }
    .steckbrief__tooltip { transition: none; }
    .steckbrief__kpi-pille { transition: none; }
    .steckbrief__kpi-pille:hover { transform: none; box-shadow: none; }
    .steckbrief__zeile-tooltip { transition: none; }
    .steckbrief__reaktiv-pille { transition: none; }
    .steckbrief__reaktiv-pille:hover { transform: none; box-shadow: var(--shadow-sm); }
    .steckbrief__reaktiv-pille:focus-visible { transform: none; }
    .steckbrief__reaktiv-pille[aria-expanded="true"] { transform: none; }
    .steckbrief__reaktiv-chev { transition: none; }
    .steckbrief__reaktiv-panel-wrap { transition: none; }
    .steckbrief__reaktiv-panel { animation: none; }
}

/* ── Print ────────────────────────────────────────────────────────── */

@media print {
    .steckbrief__zurueck,
    .steckbrief__drucken,
    .steckbrief__error-aktion {
        display: none !important;
    }

    .shell--steckbrief { padding: 0; }
    .steckbrief { color: CanvasText; }

    .steckbrief__header,
    .steckbrief__karte,
    .steckbrief__pattern,
    .steckbrief__notizen {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
        box-shadow: none;
        break-inside: avoid;
    }

    .steckbrief__grid,
    .steckbrief__footer { grid-template-columns: 1fr 1fr; }
    .steckbrief__karte--anschluss { grid-column: span 2; }

    .steckbrief__pille-strip { grid-template-columns: repeat(2, 1fr); }

    .steckbrief__tooltip { display: none; }

    .steckbrief__karte { animation: none; }
    .steckbrief__score-badge { animation: none; box-shadow: none; }
}

/* ── Anruf-Score-Pille (4. Pille im Reaktiv-Strip) ────────────────────
 * Spec 2026-05-13 vd-sparten-lifecycle-empfehlungen. Wiederverwendung
 * der --color-phase-*-Tokens (gruen=ok, gelb=beobachten, rot=anrufen,
 * abgewandert=muted+strike). Keine neuen Tokens.
 */
.steckbrief__reaktiv-reihe[data-cols="4"] {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 960px) {
    .steckbrief__reaktiv-reihe[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .steckbrief__reaktiv-reihe[data-cols="4"] { grid-template-columns: 1fr; }
}
.steckbrief__reaktiv-pille--abgewandert {
    background: var(--color-surface-2);
    border-color: var(--color-border-subtle);
    border-left-color: var(--color-text-muted);
    border-left-style: dotted;
    color: var(--color-text-muted);
}
.steckbrief__reaktiv-label--strike {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.steckbrief__reaktiv-mini-badge {
    display: inline-block;
    margin-left: var(--space-1, 4px);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-phase-abgewandert-solid);
    color: var(--color-surface-1);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    vertical-align: middle;
}
.steckbrief__reaktiv-komponenten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
}
.steckbrief__reaktiv-komponenten dt {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
}
.steckbrief__reaktiv-komponenten dd {
    margin: 0;
    color: var(--color-text);
}

/* ── Cross-Sell-Kandidaten (Steckbrief, karte-bestand) ───────────────── */
.steckbrief__cross-sell-leer {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-style: italic;
}
.steckbrief__cross-sell-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.steckbrief__cross-sell-zeile {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.steckbrief__cross-sell-zeile:last-child { border-bottom: none; }
.steckbrief__cross-sell-ziel {
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}
.steckbrief__cross-sell-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}
.steckbrief__cross-sell-badge--g3 {
    background: var(--color-phase-aktiv-bg);
    color: var(--color-phase-aktiv-text);
    border: 1px solid var(--color-phase-aktiv-border);
}
.steckbrief__cross-sell-badge--g2 {
    background: var(--color-phase-passiv-bg);
    color: var(--color-phase-passiv-text);
    border: 1px solid var(--color-phase-passiv-border);
}
.steckbrief__cross-sell-badge--g1 {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
}
.steckbrief__cross-sell-herkunft {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* ── Potenzial-Lücken-Karte (ADR-0005, Stufe 3, 2026-05-13) ──────────── */

.steckbrief__potenzial-wrap {
    margin-bottom: var(--space-4);
}

.pl-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.pl-abschnitt {
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: var(--space-3);
}

.pl-abschnitt:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pl-abschnitt__kopf {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.pl-abschnitt__titel {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    flex: 1;
}

.pl-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}

.pl-badge--gruen {
    background: var(--color-phase-aktiv-bg);
    color: var(--color-phase-aktiv-text);
    border: 1px solid var(--color-phase-aktiv-border);
}

.pl-badge--gelb {
    background: var(--color-phase-passiv-bg);
    color: var(--color-phase-passiv-text);
    border: 1px solid var(--color-phase-passiv-border);
}

.pl-badge--rot {
    background: var(--color-phase-abgewandert-bg);
    color: var(--color-phase-abgewandert-text);
    border: 1px solid var(--color-phase-abgewandert-border);
}

.pl-badge--neutral {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
}

/* Gesellschafts-Liste */

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

.pl-gesellschaft {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
}

.pl-gesellschaft:last-child { border-bottom: none; }

.pl-gesellschaft__symbol {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    text-align: center;
}

.pl-gesellschaft--ok .pl-gesellschaft__symbol { color: var(--color-phase-aktiv-text); }
.pl-gesellschaft--fehlt .pl-gesellschaft__symbol { color: var(--color-phase-abgewandert-text); }
.pl-gesellschaft--veraltet .pl-gesellschaft__symbol { color: var(--color-phase-passiv-text); }
.pl-gesellschaft--warnung .pl-gesellschaft__symbol { color: var(--color-phase-passiv-text); }

.pl-gesellschaft__name {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.pl-gesellschaft__sparte {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-style: italic;
}

/* Externe Verträge Block */

.pl-extern-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pl-extern-zeile {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.pl-extern__label {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    flex: 1;
}

.pl-extern__wert {
    font-family: var(--font-mono);
    font-size: var(--font-size-body);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.pl-extern__wert--highlight {
    color: var(--color-phase-abgewandert-text);
    font-weight: var(--font-weight-semibold);
}

/* Berechnungs-Anteil Block */

.pl-berechnungs-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pl-annahme-hinweis {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-subtle);
    font-style: italic;
}

/* Leer-Zustand */

.pl-leer {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-3) var(--space-4);
}

/* Demo-Banner */

.pl-demo-banner {
    background: var(--color-phase-neu-bg);
    color: var(--color-phase-neu-text);
    border: 1px solid var(--color-phase-neu-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-3) var(--space-4) 0;
}

/* Fachfragen-Hilfe (Demo) */

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

.pl-fachfragen__item {
    border-left: 3px solid var(--color-phase-aktiv-border);
    padding-left: var(--space-3);
}

.pl-fachfragen__frage {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.pl-fachfragen__antwort {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── DV-Hero-Block (Pre-Call-Sicht, 2026-05-21) ──────────────────────────
 * Drei grosse monospace-Werte direkt im Score-Header unterhalb des Namens.
 * data-kritisch="true" wenn dv_offen > 0 → rote Akzentlinie.
 * ----------------------------------------------------------------------- */
.detail__dv-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    grid-column: 1 / -1;
}

.detail__dv-hero[data-kritisch="true"] {
    border-color: var(--ampel-rot-border);
    background: var(--ampel-rot-bg);
}

.detail__dv-hero-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.detail__dv-hero-wert {
    font-family: var(--font-mono);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.detail__dv-hero[data-kritisch="true"] .detail__dv-hero-kpi:nth-child(2) .detail__dv-hero-wert {
    color: var(--ampel-rot);
}

.detail__dv-hero-label {
    font-family: var(--font-sans);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* ── Compliance-Details-Block (zugeklappt per default) ───────────────────
 * <details>-Wrapper in karte-compliance.js. Kein sichtbarer Compliance-Hero
 * mehr — nur aufklappbar wenn Tom es braucht.
 * ----------------------------------------------------------------------- */
.steckbrief__compliance-details {
    margin-top: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.steckbrief__compliance-summary {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    list-style: none;
    user-select: none;
}

.steckbrief__compliance-summary::-webkit-details-marker {
    display: none;
}

.steckbrief__compliance-summary::before {
    content: "▶ ";
    font-size: 0.65em;
    vertical-align: middle;
    margin-right: var(--space-1);
    transition: transform 150ms ease;
    display: inline-block;
}

.steckbrief__compliance-details[open] .steckbrief__compliance-summary::before {
    transform: rotate(90deg);
}

.steckbrief__compliance-details[open] .steckbrief__compliance-summary {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.steckbrief__compliance-details > *:not(summary) {
    padding: var(--space-2) var(--space-3);
}