/**
 * variant-timeline.css — SVG-Styling der Timeline-Visualisierung (Variante A).
 * Quelle: docs/curriculum-source/reference-implementation/styles.css §
 * VARIANT A · TIMELINE.
 */

.va-root, .vb-root, .vc-root {
    position: relative;
    padding: 0;
    background: var(--bg);
    margin: 0 auto;
}

.va-svg { display: block; }

.va-stage-label {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.18em;
    fill: var(--ink-soft);
}

.va-sem { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
.va-sem-y { font-size: 9.5px; fill: var(--ink-soft); }

.va-lane-label { font-family: var(--serif); font-size: 17px; fill: var(--ink); }
.va-lane-sub { font-family: var(--mono); font-size: 10px; fill: var(--ink-soft); letter-spacing: 0.1em; }

.va-mod { cursor: pointer; transition: opacity 0.15s; }
.va-mod-dim { opacity: 0.18; pointer-events: none; }
.va-mod-active rect { filter: drop-shadow(0 4px 12px oklch(20% 0.05 50 / 0.15)); }
.va-mod-name { font-family: var(--sans); font-size: 11.5px; font-weight: 500; pointer-events: none; }
.va-mod-ects { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-soft); pointer-events: none; }

.va-pruef {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--accent);
    letter-spacing: 0.05em;
}

.va-workload {
    padding: 18px 22px 28px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}

.va-wl-title {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 10px;
    padding-left: 220px;
}

.va-wl-bars {
    display: flex;
    padding-left: 220px;
}

.va-wl-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.va-wl-bar {
    width: 60%;
    background: var(--bg);
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
}

.va-wl-fill {
    width: 100%;
    background: oklch(60% 0.1 35);
    border-radius: 4px;
}

.va-wl-num { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); }

.va-tooltip {
    position: absolute;
    padding: 6px 10px;
    background: var(--ink);
    color: var(--surface);
    font-size: 11.5px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.va-tooltip strong { font-weight: 500; }
.va-tooltip span { font-family: var(--mono); font-size: 10px; opacity: 0.8; }

/* Hinweis-Banner für Daten-Pflege-Bedarf */
.va-data-note {
    max-width: 1700px;
    margin: 16px auto 0;
    padding: 10px 22px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 8px;
}