/* ============================================================
   DER WEG ZUM 15.09. — Zeitstrahl, der beim Scrollen mitläuft
   ============================================================ */

.roadmap {
  background: var(--surface);
}

.roadmap__title {
  margin-bottom: 32px;
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.roadmap__subtitle {
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--ink);
}

.roadmap__lead {
  max-width: 720px;
  margin-bottom: 32px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  font-weight: var(--fw-medium);
}

/* ---------- Zeitstrahl ---------- */
.timeline {
  position: relative;
}

/* Schiene liegt hinter den Punkten und reicht vom ersten bis
   zum letzten Punkt. */
.timeline__track {
  position: absolute;
  top: calc(var(--dot-size) / 2 - 1px);
  left: 0;
  width: calc(2 * (var(--step-w) + var(--step-gap)) + var(--dot-size));
  max-width: 100%;
  height: 2px;
  background: var(--line);
}

.timeline__fill {
  display: block;
  width: calc(var(--progress, 0) * 100%);
  height: 100%;
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease);
}

.timeline__steps {
  display: flex;
  gap: var(--step-gap);
}

.timeline__step {
  flex: 0 0 var(--step-w);
  max-width: var(--step-w);
}

/* ---------- Punkt ---------- */
.timeline__dot {
  position: relative;
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-bottom: 32px;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}

.timeline__dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: var(--radius-pill);
  background: var(--line);
  transition: background-color var(--dur) var(--ease);
}

.timeline__step.is-active .timeline__dot {
  border-color: var(--brand);
}

.timeline__step.is-active .timeline__dot::after {
  background: var(--brand);
}

/* ---------- Texte ----------
   Noch nicht erreichte Etappen stehen etwas heller und ziehen beim
   Aktivieren sanft nach oben.

   Die Deckkraft lag hier auf 0.35. Das sah gut aus, ließ den
   Fließtext auf Weiß aber bei 1.74:1 landen — WCAG verlangt 4.5:1.
   Betroffen waren alle drei Etappen gleichzeitig, und ohne
   JavaScript blieb es dauerhaft so, weil `is-active` dann nie
   gesetzt wird.

   0.82 ist der höchste Wert, der noch als Abstufung wirkt und den
   Text zugleich über die Schwelle hebt: --ink-soft (#555) auf Weiß
   ergibt gemischt #7C7C7C und damit 4.55:1. Der Unterschied
   zwischen erreicht und nicht erreicht trägt dafür stärker über
   den Punkt (grau → talents-Rot) und die Bewegung. */
.timeline__body {
  opacity: 0.82;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.timeline__step.is-active .timeline__body {
  opacity: 1;
  transform: none;
}

.timeline__when {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--brand);
}

/* Steht wie im Layout einzeilig — darf dafür bis in den Abstand
   zur nächsten Etappe hineinragen, aber nicht weiter. */
.timeline__what {
  width: max-content;
  max-width: calc(var(--step-w) + var(--step-gap));
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 33px;
  color: var(--ink);
}

/* Nur der Fließtext ist auf die Spaltenbreite begrenzt —
   Headline und Zwischenzeile dürfen breiter laufen. */
.timeline__text {
  max-width: var(--step-w);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}