/* ===== Interim HR vs. Festanstellung, Prefix: ivf- ===== */



.hk-hero.hk-hero--light .ivf-hero-h1 { color: var(--text); }

.hk-hero.hk-hero--light .ivf-hero-sub { color: var(--body); margin-bottom: 1.75rem; }
/* style.css gibt .hk-hero--light einen Verlauf, die Interim-Seiten liegen flach. */
.hk-hero.hk-hero--light.ivf-hero { background: var(--bg-light); }
.ivf-hero-h1 { color: var(--text); }
.ivf-hero-sub { color: var(--body); }
.ivf-table-wrap { overflow-x: auto; border-radius: 3px; }
.ivf-compare-table { width: 100%; border-collapse: collapse; background: var(--white); }
.ivf-compare-table thead tr { background: var(--text); }
.ivf-th-label { background: var(--text) !important; color: var(--white); padding: 1rem 1.25rem; text-align: left; font-size: 0.88rem; font-weight: 700; }
.ivf-th-interim { background: var(--primary) !important; color: var(--white); padding: 1rem 1.25rem; text-align: left; font-size: 0.88rem; font-weight: 700; }
.ivf-th-fest { background: var(--text) !important; color: var(--white); padding: 1rem 1.25rem; text-align: left; font-size: 0.88rem; font-weight: 700; }
.ivf-compare-table td { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); font-size: 0.93rem; color: var(--body); }
.ivf-compare-table tbody tr:last-child td { border-bottom: none; }
.ivf-compare-table tbody tr:nth-child(even) td { background: var(--bg-light); }
.ivf-td-label { font-weight: 600; color: var(--text) !important; }
.ivf-td-interim { background: var(--bg-teal) !important; }
.ivf-good { color: var(--primary); font-weight: 600; }
.ivf-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.ivf-decision-col { border-radius: 3px; padding: 2rem; }
.ivf-decision-col--interim { background: var(--bg-teal); border: 1px solid var(--primary); }
.ivf-decision-col--fest { background: #eff6ff; border: 1px solid #2563eb; }
.ivf-decision-col h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 1.25rem; }
.ivf-decision-item { display: flex; gap: 1rem; margin-bottom: 1.25rem; align-items: flex-start; }
.ivf-check { font-size: 1.1rem; color: var(--primary); font-weight: 700; flex-shrink: 0; margin-top: 0.1rem; }
.ivf-arrow { font-size: 1.1rem; color: #2563eb; font-weight: 700; flex-shrink: 0; margin-top: 0.1rem; }
.ivf-decision-item strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
.ivf-decision-item p { font-size: 0.85rem; color: var(--body); line-height: 1.6; margin: 0; }
.ivf-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ivf-scenario-card { background: var(--white); border-radius: 3px; padding: 1.75rem; border: 1px solid var(--border); }
.ivf-scenario--interim { border-color: var(--primary); }
.ivf-scenario--mixed { border-color: #2563eb; }
.ivf-scenario--fest { border-color: var(--border); }
.ivf-scenario-label { font-size: 0.78rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.ivf-scenario--mixed .ivf-scenario-label { color: #2563eb; }
.ivf-scenario--fest .ivf-scenario-label { color: var(--subtle); }
.ivf-scenario-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.ivf-scenario-card p { font-size: 0.87rem; color: var(--body); line-height: 1.6; margin-bottom: 0.5rem; }
.ivf-scenario-card p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .ivf-decision-grid { grid-template-columns: 1fr; }
    .ivf-scenarios { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .ivf-table-wrap { font-size: 0.8rem; }
    .ivf-compare-table td, .ivf-compare-table th { padding: 0.6rem 0.75rem; } }

/* ===== Hero-Figur, Prefix ivff-: Anlaufzeit auf einer Achse =====
   24 Monate, Interim oben, Festanstellung unten in drei Phasen. Flache
   Flaechen, 3px, kein Schatten. Kontraste auf Weiss: Weiss auf --primary
   6,12:1, --text auf --primary-light 13,9:1, --subtle auf --bg-light
   6,7:1, Weiss auf --text 18,3:1. */
.ivff-fig { margin-left: auto; }
.ivff-zeit { margin-bottom: 0.6rem; }
.ivff-zeile + .ivff-zeile { margin-top: 1rem; }
.ivff-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 0.35rem;
}
.ivff-spur {
    position: relative;
    height: 34px;
    border-bottom: 1px solid var(--border);
}
.ivff-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--von);
    width: calc(var(--bis) - var(--von));
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    transform: scaleX(0);
    transform-origin: left center;
    animation: hk-figure-wach 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.3s + var(--i) * 0.25s);
}
.ivff-seg--interim      { background: var(--primary); color: #fff; }
.ivff-seg--suche        { background: var(--bg-light); color: var(--subtle); box-shadow: inset 0 0 0 1px var(--border); }
.ivff-seg--einarbeitung { background: var(--primary-light); color: var(--text); }
.ivff-seg--voll         { background: var(--text); color: #fff; }
/* 1px Luft zwischen den drei Phasen, damit sie als Abschnitte lesbar bleiben. */
.ivff-seg--einarbeitung,
.ivff-seg--voll { margin-left: 2px; width: calc(var(--bis) - var(--von) - 2px); }

.ivff-skala {
    position: relative;
    height: 1.05rem;
    margin-top: 0.45rem;
}
.ivff-skala span {
    position: absolute;
    left: var(--p);
    transform: translateX(-50%);
    font-size: 0.645rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted);
    white-space: nowrap;
}
.ivff-skala span:first-child { transform: none; }
.ivff-skala span:last-child  { left: auto; right: 0; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ivff-seg { animation: none; transform: scaleX(1); }
}
@media (max-width: 560px) {
    .ivff-spur { height: 30px; }
    .ivff-seg { font-size: 0.6rem; padding: 0 0.4rem; }
}