/* K³ VISUALS · Werdegang auf „Über mich“: senkrechte Linie mit fünf Stationen, nach Florians Skizze rechts
   neben dem Text. Grundzustand (ohne JS, reduzierte Bewegung): fertig gezeichnet.
   html.k3-tl (Kopf-Skript, vor dem ersten Paint): Linie grau, Stationen blass und unscharf; k3-timeline.js
   zeichnet die grüne Linie beim Scrollen nach unten und schaltet jede Station ein (.is-on), sobald die Linie
   sie erreicht. */

/* ---------- Platz: ab 1360 px Überschrift über zwei Spalten, darunter Text links, Werdegang rechts ---------- */
.um .um-grid > .um-text > .tl { margin-top: 18px; }

@media (width >= 1360px) {
  .um .container.um-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .um .um-grid > .um-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, .76fr);
    grid-template-rows: auto auto auto 1fr;          /* Überhang des Werdegangs landet unter den Fakten */
    column-gap: clamp(40px, 3.6vw, 64px);
  }
  .um .um-grid > .um-text > * { grid-column: 1 / -1; }
  .um .um-grid > .um-text > .eyebrow { grid-row: 1; }
  .um .um-grid > .um-text > h1 { grid-row: 2; }
  .um .um-grid > .um-text > .prose { grid-column: 1; grid-row: 3; }
  .um .um-grid > .um-text > .um-facts { grid-column: 1; grid-row: 4; align-self: start; }
  .um .um-grid > .um-text > .tl { grid-column: 2; grid-row: 3 / 5; margin-top: 0; }
}

/* ---------- Werdegang ---------- */
.tl { --tl-node: 14px; --tl-x: 7px; --tl-cy: 9px; --tl-pad: 36px; min-width: 0; }
.tl .tl-title { margin-bottom: 1.5rem; }
.tl-wrap { position: relative; }
.tl-item { position: relative; padding: 0 0 30px var(--tl-pad); }
.tl-item:last-child { padding-bottom: 0; }

/* Linie als Teilstücke von Knoten zu Knoten: endet auch ohne JS genau an der letzten Station */
.tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--tl-x) - 1px); top: var(--tl-cy); bottom: calc(-1 * var(--tl-cy));
  width: 2px; border-radius: 1px; background: var(--green);
}

.tl-node {
  position: absolute; left: 0; top: calc(var(--tl-cy) - var(--tl-node) / 2); z-index: 2;
  width: var(--tl-node); height: var(--tl-node); border-radius: 50%;
  border: 2px solid var(--green); background: var(--ink-950);
  box-shadow: 0 0 0 4px rgba(76, 192, 140, .1), 0 0 16px rgba(76, 192, 140, .35);
  transition: border-color .45s var(--ease-out), box-shadow .6s var(--ease-out);
}
.tl-node::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--green-bright);
  transition: transform .5s var(--ease-out), opacity .35s;
}
.tl-ping, .tl-ring {
  position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--green);
  opacity: 0; pointer-events: none;
}
/* Gegenwart: die letzte Station pulsiert wie der Pin auf der Karte */
.tl-item--now .tl-ring { animation: tl-pulse 2.6s var(--ease-out) infinite; }
.tl-item--now .tl-ring + .tl-ring { animation-delay: 1.3s; }
@keyframes tl-pulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(3); opacity: 0; } }

.tl-date {
  font-size: .76rem; line-height: 18px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; font-variant-numeric: tabular-nums; color: var(--green);
}
.tl-org { margin-top: 5px; font-size: 1.06rem; line-height: 1.3; letter-spacing: -.012em; color: var(--white); }
.tl-lines { margin-top: 8px; display: grid; gap: 5px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.tl-lines li { position: relative; padding-left: 15px; text-wrap: pretty; }
/* Punkt statt Strich: ein Strich vor der Zeile liest sich wie ein Gedankenstrich */
.tl-lines li::before {
  content: ""; position: absolute; left: 1px; top: calc(.75em - 2px); width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-400);
}
/* Kennzahlen: Zahlen in einer gemeinsamen Spalte, Texte fluchten. Linksbündig, weil Poppins keine
   Tabellenziffern hat: rechtsbündig stünde „115“ neben „250“ sichtbar eingerückt. */
.tl-stats {
  margin-top: 10px; display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px; row-gap: 3px; align-items: baseline;
}
.tl-stats li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.tl-num {
  justify-self: start; font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -.02em;
  color: var(--white); white-space: nowrap;
}
.tl-num i { font-style: normal; color: var(--green); margin-left: .04em; }
.tl-stat { color: var(--muted); font-size: .88rem; line-height: 1.4; }
@supports not (grid-template-columns: subgrid) {
  .tl-stats li { display: flex; gap: 12px; }
  .tl-num { min-width: 2.6em; }
}

/* Grüne Linie, die JS von Knoten 1 bis Knoten 5 legt und per scaleY füllt */
.tl-rail {
  display: none; position: absolute; left: calc(var(--tl-x) - 1px); top: var(--tl-cy);
  width: 2px; height: 0; z-index: 1; pointer-events: none;
}
.tl-fill {
  position: absolute; inset: 0; border-radius: 1px; transform-origin: 50% 0; transform: scaleY(0);
  background: linear-gradient(180deg, var(--green-strong), var(--green) 55%, var(--green-bright));
}
.tl-head {
  position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--green-bright); opacity: 0;
  box-shadow: 0 0 0 3px rgba(98, 214, 159, .16), 0 0 18px 5px rgba(98, 214, 159, .45);
}

/* ---------- Wartezustand, solange JS zeichnet ---------- */
html.k3-tl .tl-rail { display: block; }
html.k3-tl .tl-item:not(:last-child)::before { background: rgba(255, 255, 255, .1); }
html.k3-tl .tl-item:not(.is-on) .tl-node {
  border-color: var(--ink-600);
  box-shadow: 0 0 0 4px rgba(76, 192, 140, 0), 0 0 16px rgba(76, 192, 140, 0);
}
html.k3-tl .tl-item:not(.is-on) .tl-node::after { transform: scale(0); opacity: 0; }
html.k3-tl .tl-item:not(.is-on) .tl-body { opacity: .14; filter: blur(6px); transform: translateX(-12px); }
html.k3-tl .tl-item--now:not(.is-on) .tl-ring { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .tl-item--now .tl-ring { animation: none; opacity: .45; transform: scale(1.9); }
  .tl-item--now .tl-ring + .tl-ring { display: none; }
}