/* steckbrief-precall.css — Pre-Call-Brief-Sektion (Cheap Probe 2026-05-11).
 *
 * Design: docs/design/2026-05-11-vd-precall-brief.md
 *
 * Vertrag:
 *   - Token-only: ausschließlich Variablen aus design-tokens.css.
 *   - Drei-Spalten-Raster Desktop (≥ 960px), Stack Mobile mit Wiedervorlage
 *     zuerst.
 *   - Akzent-Streifen links: amber (≤ 7 T), rot (überfällig).
 *   - Stagger-Mount 60ms (Wiedervorlage zuerst). prefers-reduced-motion → fade.
 *   - Drei-aus-drei-Empty kollabiert zu schmalem Hinweis-Streifen.
 *   - Demo-Pille oben rechts (nur Demo-Modus), Stub-Marker pro Karte (nur Demo).
 */

/* ── Sektions-Container ──────────────────────────────────────────────── */

.steckbrief__precall {
    position: relative;
    padding: var(--space-4);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

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

@media (max-width: 1200px) {
    /* Tablet: 2×2-Grid statt vier-Spalten-Quetschen (Aufgreif-Hinweis-Design §1).
     * Reihenfolge DOM: Wiedervorlage · Letzte Aktion · Zusage · Aufgreif-Hinweis. */
    .steckbrief__precall-inhalt {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    .steckbrief__precall-inhalt {
        grid-template-columns: 1fr;
    }
    /* Reading-Order = DOM-Order auf allen Breakpoints (WCAG 2.4.3):
     * Wiedervorlage → Letzte Aktion → Zusage → Aufgreif-Hinweis. Kein
     * CSS-order-Override. */
}

/* ── Demo-Pille oben rechts ───────────────────────────────────────────── */

.steckbrief__precall-demo-pille {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-micro);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-warn-text-soft);
    background: var(--color-warn-bg-soft);
    border: 1px solid var(--color-warn-border);
    border-radius: var(--radius-pill);
    z-index: 1;
}

.steckbrief__precall-demo-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-warn-bg);
}

/* ── Einzelne Karte ──────────────────────────────────────────────────── */

.precall-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    /* Links 3px Reserve für Akzent-Streifen (auch bei "neutral", damit
     * Karten ohne Streifen denselben horizontalen Offset haben). */
    border-left: 3px solid transparent;
    min-height: 7.5rem;
    /* Stagger-Mount-Animation */
    animation: precall-karte-enter var(--duration-base) var(--ease-out) backwards;
}

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

.precall-karte:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Stagger-Reihenfolge passt jetzt zur DOM-Reihenfolge:
 * Wiedervorlage 0ms (primär) → Letzte Aktion 60ms → Zusage 120ms. */
.precall-karte--wiedervorlage  { animation-delay: 0ms; }
.precall-karte--letzte-aktion  { animation-delay: 60ms; }
.precall-karte--zusage         { animation-delay: 120ms; }
.precall-karte--aufgreif       { animation-delay: 180ms; }

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

/* ── Akzent-Streifen amber/rot ───────────────────────────────────────── */

.precall-karte--streifen-amber {
    border-left-color: var(--color-phase-passiv-solid);
}

.precall-karte--streifen-rot {
    border-left-color: var(--color-phase-abgewandert-solid);
}

/* ── Caps-Label oben ─────────────────────────────────────────────────── */

.precall-karte__label {
    font-size: var(--font-size-micro);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ── Body (zwischen Label und Stub-Marker) ───────────────────────────── */

.precall-karte__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

/* ── Datum-Zeile ─────────────────────────────────────────────────────── */

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

/* ── Titel ───────────────────────────────────────────────────────────── */

.precall-karte__titel {
    font-size: var(--font-size-body);
    color: var(--color-text);
    line-height: 1.35;
    /* max 2 Zeilen, Ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Meta (Person / Kontext) ─────────────────────────────────────────── */

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

/* ── Relativ-Zeit Fuß ────────────────────────────────────────────────── */

.precall-karte__relativ {
    margin-top: auto;
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
    font-style: italic;
}

/* ── Stub-Marker (nur Demo) ──────────────────────────────────────────── */

.precall-karte__stub-marker {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-subtle);
}

/* ── Empty-Block in einer Karte ──────────────────────────────────────── */

.precall-karte__empty {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    flex: 1;
}

.precall-karte__empty-haken {
    font-size: var(--font-size-h3);
    color: var(--color-phase-aktiv-solid);
    line-height: 1;
}

/* ── Drei-aus-drei-Empty: Hinweis-Streifen ───────────────────────────── */

.steckbrief__precall-allleer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--color-phase-aktiv-solid);
}

.steckbrief__precall-allleer-haken {
    font-size: var(--font-size-h2);
    color: var(--color-phase-aktiv-solid);
    line-height: 1;
}

.steckbrief__precall-allleer-text {
    font-size: var(--font-size-body);
    color: var(--color-text);
}

/* ── Inline-Fetch-Fehler-Hinweis (Design §8) ─────────────────────────── */

.steckbrief__precall-fehler {
    grid-column: 1 / -1;
    padding: var(--space-3) var(--space-4);
    background: var(--color-warn-bg-soft);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warn-border);
    font-size: var(--font-size-small);
    color: var(--color-warn-text-soft);
}

/* ── Aufgreif-Hinweis: Sub-Zeile (Kategorie · Tool-Badge) ─────────────── */

.precall-karte__titel--einzeilig {
    /* Aufgreif-Hinweis: Titel einzeilig mit Ellipsis (Design §2, max 36 Zeichen
     * werden JS-seitig gekürzt — CSS-Ellipsis als Safety-Net). */
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.precall-karte__sub {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    line-height: 1.2;
}

.precall-karte__sub-kategorie {
    /* Engine-Kategorie-String (z.B. "feature-aktivierung"). Klein, muted. */
    font-size: var(--font-size-micro);
}

.precall-karte__sub-sep {
    color: var(--color-text-subtle);
}

.precall-karte__tool-badge {
    /* Dezente Pille — sekundäre Karte bleibt sekundär. Kein Farbcode. */
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}

/* ── Aufgreif-Hinweis: Begründung (2 Zeilen, Ellipsis) ────────────────── */

.precall-karte__begruendung {
    font-size: var(--font-size-small);
    color: var(--color-text);
    line-height: 1.4;
    /* max 2 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Aufgreif-Hinweis: Confidence-Zeile (Dots + Prozent) ──────────────── */

.precall-karte__confidence {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.precall-karte__confidence-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.precall-karte__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-text-subtle);
    opacity: 0.4;
}

.precall-karte__dot--an {
    background: var(--color-text);
    opacity: 1;
}

.precall-karte__confidence-pct {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Reduced-Motion: kein Stagger, kein Hover-Lift ───────────────────── */

@media (prefers-reduced-motion: reduce) {
    .precall-karte {
        animation: none;
        transition: none;
    }
    .precall-karte:hover {
        transform: none;
    }
}