/* mende.info / Szene „Zeitstrahl“ – nur im Live-Zustand; die Ruhefassung ist die senkrechte Zeitleiste in styles.css.
   Die Leiste läuft von oben nach unten durch die Bühne: die aktive Station steht in der Mitte, Jahre groß, Achse füllt sich golden. */
.cv.scene.is-live { padding: 0; }
.cv.scene.is-live > .scene-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: clamp(3rem, 7vh, 5rem) var(--margin) 0; row-gap: 0; }
.cv.scene.is-live .shead { grid-column: 1; margin-bottom: 0; align-content: start; position: relative; z-index: 2; }
.cv.scene.is-live .scene-track { grid-column: 1; position: relative; overflow: clip; align-self: stretch; } /* the window the stations pass through */
.cv.scene.is-live .timeline { --year-w: 8.5rem; --spine-w: 2rem; --gap: var(--gutter); width: 100%; will-change: transform; }
.cv.scene.is-live .timeline::before, .cv.scene.is-live .timeline__fill { top: 0; bottom: 0; left: calc(var(--year-w) + var(--gap) + var(--spine-w) / 2 - 2px); width: 4px; height: auto; }
.cv.scene.is-live .timeline__fill { transform-origin: 50% 0; transform: scaleY(0); }
.cv.scene.is-live .timeline__list { display: grid; row-gap: clamp(1.75rem, 4vh, 3rem); padding-block: 45vh; }
.cv.scene.is-live .timeline__group { grid-column: 1 / -1; padding: 0.5rem 0 0.5rem calc(var(--year-w) + var(--spine-w) + 2 * var(--gap)); }
.cv.scene.is-live .timeline__group h3 { font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--white); }
.cv.scene.is-live .timeline__entry { grid-template-columns: var(--year-w) var(--spine-w) minmax(0, 1fr); column-gap: var(--gap); align-items: center; transform-origin: 0 50%; opacity: 0; visibility: hidden; transform: scale(0.96); will-change: transform, opacity; }
.cv.scene.is-live .timeline__group { opacity: 0; visibility: hidden; transform-origin: 0 50%; }
.cv.scene.is-live .timeline__year { font-size: clamp(2.75rem, 4.6vw, 4.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; text-align: right; padding: 0; color: var(--muted-dark); transition: none; }
.cv.scene.is-live .timeline__dot { justify-self: center; align-self: center; margin: 0; background: var(--line-dark); transition: none; }
.cv.scene.is-live .timeline__dot::after { display: none; }
.cv.scene.is-live .timeline__what { grid-column: 3; font-size: var(--step-lead); line-height: 1.2; max-width: 30ch; }
.cv.scene.is-live .timeline__kind { grid-column: 3; margin-top: 0.3rem; font-size: var(--step-small); color: var(--muted-dark); }
.cv.scene.is-live .timeline__entry:hover { translate: 0; }