/* ==========================================================================
   A49 — Vita-Timeline (Linie & Punkte)
   assets/css/timeline-a49.css
   ========================================================================== */

:root {
    --a49-tl-text: rgba(255,255,255,1);
    --a49-tl-muted: rgba(255,255,255,.85);
    --a49-tl-line: rgba(255,255,255,.3);
    --a49-tl-border: rgba(255,255,255,.5);
    --a49-tl-hover: rgba(255,255,255,.12);
    --a49-tl-accent: var(--orange);
    --a49-tl-bg: var(--blue);
    --a49-tl-visible: 2.5;                                  /* sichtbare Elemente */
    --a49-tl-ease: cubic-bezier(.28, 1.45, .4, 1);         /* deutliches Nachfedern */
}

.a49-tl {
    color: var(--a49-tl-text);
}

/* --- Kopfzeile: Zähler + Pfeile ------------------------------------------- */

.a49-tl__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 3vw, 40px);
}

.a49-tl__count {
    font-size: 15px;
    letter-spacing: .08em;
    color: var(--a49-tl-muted);
    font-variant-numeric: tabular-nums;
}

.a49-tl__count strong {
    display: inline-block;
    color: var(--a49-tl-text);
    font-weight: 700;
}

.a49-tl__nav {
    display: flex;
    gap: 10px;
}

.a49-tl__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--a49-tl-border);
    border-radius: 50%;
    background: transparent;
    color: var(--a49-tl-text);
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
}

.a49-tl__btn:hover,
.a49-tl__btn:focus-visible {
    background: var(--a49-tl-hover);
    border-color: var(--a49-tl-text);
}

.a49-tl__btn:active {
    transform: scale(.94);
}

.a49-tl__btn--next {
    border-color: var(--a49-tl-accent);
    background: var(--a49-tl-accent);
}

.a49-tl__btn--next:hover,
.a49-tl__btn--next:focus-visible {
    background: var(--a49-tl-accent);
    border-color: var(--a49-tl-text);
}

/* --- Zeitstrahl ----------------------------------------------------------- */

.a49-tl__viewport {
    position: relative;
    overflow: hidden;
    /* Platz für aktiven Punkt + Puls; negative Margins halten die Bündigkeit */
    margin: -32px 0 0 -32px;
    padding: 32px 0 0 32px;
    touch-action: pan-y;
    /* angeschnittenes Element weich ausblenden */
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
            mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}

/* Linie läuft jetzt pro Element mit (siehe .a49-tl__item::before/::after) */
.a49-tl__line {
    display: none;
}

.a49-tl__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(0);
    transition: transform 1s var(--a49-tl-ease);
    will-change: transform;
}

.a49-tl__item {
    position: relative;
    flex: 0 0 calc(100% / var(--a49-tl-visible));
    padding: 0 clamp(40px, 5vw, 96px) 0 0;
    margin: 0;
    cursor: pointer;
}

.a49-tl__item.is-active {
    cursor: default;
}

/* Liniensegment bis zum nächsten Punkt */
.a49-tl__item::before,
.a49-tl__item::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 2px;
}

.a49-tl__item::before {
    background: var(--a49-tl-line);
}

/* Füllung: vergangene Segmente laufen weiß voll */
.a49-tl__item::after {
    background: var(--a49-tl-text);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}

.a49-tl__item.is-past::after {
    transform: scaleX(1);
}

/* Inhalte: inaktiv gedimmt */
.a49-tl__year,
.a49-tl .a49-tl__title,
.a49-tl__text {
    opacity: .5;
    transition: opacity .7s ease;
    backface-visibility: hidden;
}

.a49-tl__item:hover .a49-tl__year,
.a49-tl__item:hover .a49-tl__title,
.a49-tl__item:hover .a49-tl__text {
    opacity: .8;
}

.a49-tl__item.is-active .a49-tl__year,
.a49-tl__item.is-active .a49-tl__title,
.a49-tl__item.is-active .a49-tl__text {
    opacity: 1;
}

/* Aktiv: Inhalte steigen gestaffelt auf */
.a49-tl__item.is-active .a49-tl__year  { animation: a49-tl-rise .9s cubic-bezier(.22, 1.2, .3, 1) backwards; }
.a49-tl__item.is-active .a49-tl__title { animation: a49-tl-rise .9s .12s cubic-bezier(.22, 1.2, .3, 1) backwards; }
.a49-tl__item.is-active .a49-tl__text  { animation: a49-tl-rise .9s .24s cubic-bezier(.22, 1.2, .3, 1) backwards; }

@keyframes a49-tl-rise {
    from { transform: translateY(40px); }
    to   { transform: translateY(0); }
}

/* --- Punkt ---------------------------------------------------------------- */

.a49-tl__dot {
    position: relative;
    z-index: 1;
    display: block;
    width: 20px;
    height: 20px;
    margin-bottom: 26px;
    border: 2px solid var(--a49-tl-text);
    border-radius: 50%;
    background: var(--a49-tl-bg);
    transform-origin: center;
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background .35s ease;
}

.a49-tl__item.is-past .a49-tl__dot {
    background: var(--a49-tl-text);
}

.a49-tl__item.is-active .a49-tl__dot {
    background: var(--a49-tl-accent);
    border-color: var(--a49-tl-text);
    transform: scale(1.45);
}

/* Pulsierender Ring um den aktiven Punkt */
.a49-tl__dot::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--a49-tl-text);
    border-radius: 50%;
    opacity: 0;
}

.a49-tl__item.is-active .a49-tl__dot::after {
    animation: a49-tl-pulse 2.2s .5s ease-out infinite;
}

@keyframes a49-tl-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* --- Typografie ----------------------------------------------------------- */

.a49-tl__year {
    display: block;
    margin-bottom: 12px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--a49-tl-text);
}

.a49-tl .a49-tl__title {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: clamp(19px, 1.5vw, 22px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--a49-tl-text);
}

.a49-tl__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--a49-tl-muted);
    max-width: 34em;
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1199px) {
    :root { --a49-tl-visible: 2.2; }
}

@media (max-width: 767px) {
    :root { --a49-tl-visible: 1.5; }
}

@media (max-width: 575px) {
    :root { --a49-tl-visible: 1.15; }

    .a49-tl__btn {
        width: 48px;
        height: 48px;
    }
}

/* --- Reduzierte Bewegung -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .a49-tl__track,
    .a49-tl__item::after,
    .a49-tl__dot,
    .a49-tl__year,
    .a49-tl .a49-tl__title,
    .a49-tl__text {
        transition: none;
        animation: none !important;
    }

    .a49-tl__dot::after {
        display: none;
    }
}