/* Kernflow · horizontale Zeitleiste (Port der Hyperiux-Timeline): Sektion bleibt kleben,
   die Spur schiebt sich seitlich, jeder Schritt zeichnet seinen Stiel und blendet seinen Text ein. */
.tl { position: relative; height: var(--tlh, 200vw); width: 100%; color: var(--ink); }
.tl__pin { position: sticky; top: 0; height: 100vh; width: 100%; display: grid; align-content: center; padding-top: 6vh; overflow: hidden; }
.tl__track { display: flex; align-items: center; gap: 5vw; height: 30vw; width: var(--tlw, 240vw); padding: 0 5vw; margin-right: 2vw; will-change: transform; }
.tl__img { position: relative; height: 100%; width: 30vw; flex: none; overflow: hidden; border-radius: 1vw; background: #14141B; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.tl__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl__img::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: inherit; pointer-events: none; }
.tl__body { position: relative; height: 100%; width: 100%; }
.tl__axis { position: absolute; left: 0; top: 49%; width: 100%; display: flex; align-items: center; }
.tl__axis i { width: .8vw; height: .8vw; border-radius: 50%; background: var(--tl-c, var(--brand)); flex: none; box-shadow: 0 0 12px var(--tl-c, var(--brand)); }
.tl__line { height: 1px; width: 0; border-radius: 1px; background: var(--tl-c, var(--brand)); box-shadow: 0 0 10px var(--tl-c, var(--brand)); }
.tl__row { display: flex; height: 50%; width: 100%; align-items: center; justify-content: flex-start; gap: .5vw; }
.tl__head { height: 100%; width: 20%; padding-top: 2vw; flex: none; }
.tl__head h2 { width: 80%; font-size: 3vw; line-height: .95; letter-spacing: -.03em; }
.tl__period { width: 34%; height: 100%; padding-top: 2vw; flex: none; font-size: 1.5vw; line-height: 1; color: var(--muted); }
.tl__items { display: flex; height: 100%; width: 100%; column-gap: 15vw; }
.tl__row--bottom .tl__items { column-gap: 20vw; margin-left: 7vw; }
.tl__item { position: relative; height: 100%; width: 30vw; padding: 0 3vw; flex: none; }
.tl__row--bottom .tl__item { width: 25vw; }
.tl__stem { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.tl__row--bottom .tl__stem { top: auto; bottom: -1%; height: 100%; }
.tl__dot { position: relative; width: 1vw; height: 1vw; border-radius: 50%; background: var(--tl-c, var(--brand)); transform: translateX(-50%) scale(0); box-shadow: 0 0 14px var(--tl-c, var(--brand)); }
.tl__ln { display: block; height: 94%; width: 1px; border-radius: 1px; background: var(--tl-c, var(--brand)); transform: scaleY(0); transform-origin: bottom; }
.tl__row--bottom .tl__ln { transform-origin: top; }
.tl__txt { margin-top: -1vw; display: grid; gap: 1vw; }
.tl__row--bottom .tl__txt { margin-top: 0; height: 100%; align-content: end; }
.tl__mask { overflow: hidden; }
.tl__mask > * { display: block; will-change: transform; }
.tl__meta { font-family: var(--mono); font-size: .8vw; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-c, var(--brand)); }
.tl__item h4 { margin: 0; font-size: 2.5vw; line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.tl__item p { width: 92%; font-size: 1.35vw; line-height: 1.2; color: var(--muted); }
.tl--sys { --tl-c: var(--c-sys); } .tl--auto { --tl-c: var(--c-auto); } .tl--web { --tl-c: var(--c-web); }

@media (max-width: 600px) {
  .tl { height: var(--tlh-m, 400vh); }
  .tl__pin { top: 0; padding-top: 10vh; align-content: start; }
  .tl__track { height: 80vh; width: var(--tlw-m, 800vw); padding: 0 7vw; }
  .tl__img { height: 65vw; width: 85vw; border-radius: 5vw; }
  .tl__axis i { width: 2vw; height: 2vw; }
  .tl__head { height: auto; padding-top: 5vw; }
  .tl__head h2 { font-size: 8.5vw; }
  .tl__period { width: 30%; padding-top: 5vw; font-size: 4.2vw; }
  .tl__items, .tl__row--bottom .tl__items { column-gap: 40vw; }
  .tl__row--bottom .tl__items { margin-left: 7vw; }
  .tl__item, .tl__row--bottom .tl__item { width: 70vw; padding: 0 7vw; display: flex; flex-direction: column; }
  .tl__dot { width: 2.5vw; height: 2.5vw; }
  .tl__row--bottom .tl__ln { height: 100%; }
  .tl__txt { margin-top: -2vw; gap: 2vw; }
  .tl__meta { font-size: 2.6vw; }
  .tl__item h4 { font-size: 6.4vw; }
  .tl__item p { font-size: 4.8vw; }
}