/* Timeline – Vanilla-CSS-Fassung der Tailwind-Klassen aus timeline.tsx (Hyperiux Vault).
   Maße 1:1 übernommen (vw-basiert), Umschaltpunkt Handy < 600px. */
.tl-section { position: relative; width: 100%; height: 200vw; }
.tl-section *, .tl-section *::before, .tl-section *::after { box-sizing: border-box; }
.tl-section h2, .tl-section h4, .tl-section p { margin: 0; font-weight: inherit; }
.tl-sticky { position: sticky; top: 0; width: 100vw; height: 100vh; padding-top: 10%; overflow: hidden; }
.tl-slider { will-change: transform; display: flex; align-items: center; gap: 5vw; width: 240vw; height: 30vw; margin-right: 2vw; padding: 0 5vw; }
.tl-bild { flex: 0 1 auto; width: 30vw; height: 100%; overflow: hidden; border-radius: 1vw; }
.tl-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-bahn { position: relative; width: 100%; height: 100%; }

.tl-linie { position: absolute; left: 0; top: 49%; display: flex; align-items: center; width: 100%; height: fit-content; }
.tl-endpunkt { width: .8vw; height: .8vw; border-radius: 9999px; flex: 0 1 auto; }
.journey-line { width: 0%; height: 1px; border-radius: 9999px; }

.tl-oben { display: flex; align-items: center; justify-content: flex-start; gap: .5vw; width: 100%; height: 50%; }
.tl-titelbox { width: 20%; height: 100%; padding-top: 2vw; }
.tl-titel { width: 65%; font-size: 3vw; line-height: .95; }
.tl-reihe { display: flex; width: 100%; height: 100%; column-gap: 15vw; }
.tl-punkt-oben { position: relative; width: 30vw; height: 100%; padding: 0 3vw; }
.tl-stiel-oben { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; height: 100%; }
.tl-punkt { position: relative; width: 1vw; height: 1vw; aspect-ratio: 1 / 1; border-radius: 9999px; transform: translateX(-50%); }
.tl-strich { width: 1px; height: 94%; border-radius: 9999px; }
.tl-stiel-oben .tl-strich { transform-origin: bottom; }
.tl-text-oben { margin-top: -1vw; }
.tl-text-oben > * + *, .tl-text-unten > * + * { margin-top: 1vw; }
.tl-jahr { font-size: 2.5vw; line-height: 1; }
.tl-beschr { width: 90%; font-size: 1.5vw; line-height: 1.15; }

.tl-unten { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 50%; }
.tl-zeitraumbox { width: 34%; height: 100%; padding-top: 2vw; }
.tl-zeitraum { font-size: 1.65vw; line-height: 1; }
.tl-reihe-unten { display: flex; width: 100%; height: 100%; column-gap: 20vw; margin-left: 7vw; }
.tl-punkt-unten { position: relative; width: 25vw; height: 100%; padding: 0 3vw; }
.tl-stiel-unten { position: absolute; left: 0; bottom: -1%; width: 100%; height: 100%; }
.tl-stiel-unten .tl-strich { transform-origin: top; }
.tl-stiel-unten .tl-punkt { width: auto; }
.tl-text-unten { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; }

@media (max-width: 600px) {
  .tl-section { height: 320vh; }
  .tl-sticky { top: 5%; }
  .tl-slider { width: 800vw; height: 80vh; padding: 0 7vw; }
  .tl-bild { width: 85vw; height: 65vw; border-radius: 5vw; }
  .tl-endpunkt { width: 2vw; height: 2vw; }
  .tl-titelbox { height: fit-content; padding-top: 5vw; }
  .tl-titel { font-size: 8.5vw; }
  .tl-reihe, .tl-reihe-unten { column-gap: 40vw; }
  .tl-punkt-oben { display: flex; flex-direction: column; width: 70vw; padding: 0 7vw; }
  .tl-punkt { width: 2.5vw; height: 2.5vw; }
  .tl-text-oben { margin-top: -2vw; }
  .tl-jahr { font-size: 6.4vw; }
  .tl-beschr { width: 90%; font-size: 4.8vw; }
  .tl-zeitraumbox { width: 30%; padding-top: 5vw; }
  .tl-zeitraum { font-size: 4.2vw; }
  .tl-reihe-unten { margin-left: 7vw; }
  .tl-punkt-unten { width: 70vw; padding: 0 7vw; }
  .tl-stiel-unten .tl-strich { height: 100%; }
}