/* =============================================================================
   Block „Timeline" (Über mich, Werdegang) — sebastianklingel.com, 09/2026
   Linie füllt sich beim Scrollen (--tl-fill, px), erreichte Stationen bekommen .is-on (assets/js/timeline.js).
   Ohne JS: .tl__body ohne [data-tl-ready] zeigt alles aktiv.
   ============================================================================= */

.tl__head { max-width: 720px; margin: 0 auto; text-align: center; }
.tl__head .section-label { justify-content: center; }
.tl__intro { margin: 14px auto 0; color: var(--color-text-faded); font-size: 1.05rem; line-height: 1.65; }

.tl__body { position: relative; max-width: 1000px; margin: 56px auto 0; }
.tl__list { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }

/* Linie in der Punkt-Spalte (Jahr 170px + halbe Punktspalte 32px) */
.tl__line { position: absolute; z-index: 0; left: 201px; top: 22px; bottom: 60px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--color-border); }
.tl__fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--tl-fill, 100%); border-radius: 2px; background: linear-gradient(to bottom, var(--color-accent), #3b8686); }

.tl__item { display: grid; grid-template-columns: 170px 64px minmax(0, 1fr); align-items: start; padding: 0 0 36px; }
.tl__item:last-child { padding-bottom: 0; }

.tl__jahr { margin: 6px 0 0; padding-right: 24px; text-align: right; font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--color-primary); transition: color .4s ease; }
.tl__jahr--wort { padding-top: 9px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }

.tl__dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border: 2px solid var(--color-border); border-radius: 50%; background: #fff; color: var(--color-text-faded); font-size: .95rem; transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1); }

.tl__card { padding: 20px 24px 22px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); transition: opacity .5s ease, transform .5s ease, border-color .4s ease; }
.fn-section--alt .tl__card { border-color: transparent; }
.tl__titel { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.35; color: var(--color-heading); }
.tl__text { margin: 0; line-height: 1.65; color: var(--color-text); }
.tl__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.tl__link i { font-size: .8em; transition: transform .25s ease; }
.tl__link:hover i { transform: translateX(3px); }

/* Aktuelle Station */
.tl__item--heute .tl__card { border-color: rgba(121, 219, 154, .7); background: linear-gradient(135deg, #fff 55%, rgba(121, 219, 154, .16)); }

/* Zustände mit JS: noch nicht erreicht = gedämpft, erreicht = leuchtet */
.tl__body[data-tl-ready] .tl__item:not(.is-on) .tl__card { opacity: .45; transform: translateY(10px); }
.tl__body[data-tl-ready] .tl__item:not(.is-on) .tl__jahr { color: #9fb3bf; }
.tl__item.is-on .tl__dot,
.tl__body:not([data-tl-ready]) .tl__dot { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-accent); }
.tl__item.is-now .tl__dot { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(121, 219, 154, .28); }

@media (max-width: 899px) {
    .tl__body { margin-top: 40px; }
    .tl__line { left: 22px; top: 22px; }
    .tl__item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-bottom: 28px; }
    .tl__dot { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
    .tl__jahr { grid-column: 2; grid-row: 1; margin: 0; padding: 10px 0 10px; text-align: left; font-size: 1.5rem; }
    .tl__jahr--wort { padding-top: 12px; font-size: 1rem; }
    .tl__card { grid-column: 2; grid-row: 2; padding: 16px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .tl__card, .tl__dot, .tl__jahr { transition: none; }
}