/* Block: Zeitstrahl (Unternehmenshistorie)
   Sollwerte am Figma-Screenshot ausgemessen (.figma-ref/Sprint 2/Historie*.png
   mit .figma-ref/px.mjs und .figma-ref/ink.mjs), 2026-08-12:

   Jahresleiste  aktiv  Quadrat 32 × 32 #6BE381, Jahr 24px Literata Bold
                 inaktiv Quadrat 24 × 24 #263864, Jahr 20px Literata
                 Verbindungslinie 3px #263864 · Leiste ~650px, zentriert
                 8px zwischen Jahr und Quadrat · 48px bis zum Bild
   Bild          volle Inhaltsbreite, Seitenverhältnis 1468 : 772
   Jahreskarte   464px breit · weiß · Radius 16px
                 Schatten 0 4px 4px rgba(0,0,0,.25) (Figma-Komponente)
                 Innenabstand 40px · 40px vom linken Bildrand
                 Jahr 48px Literata Bold #263864 mit grünem Quadrat 24 × 24
                 Text 16px Poppins Regular
   Mobil         Slider mit Quadrat-Pagination, Bild randlos, Karte darunter.
                 Figma zeigt dort keine Jahresleiste; seit 2.15.7 steht sie
                 trotzdem über dem Slider (Chris, 21.09., Kundenfeedback A15
                 „keine Zeitachse sichtbar"). Maße ohne Figma-Vorlage aus der
                 Desktop-Leiste verkleinert – vorläufig, siehe unten.
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */

/* ── Jahresleiste ────────────────────────────────────────── */

/* Mobil (Grundwert): Die Leiste passt mit sieben Jahren ab rund 375px in die
   Breite. Wird es enger oder kommen Jahre dazu, lässt sie sich waagerecht
   wischen; timeline.js rückt das aktive Jahr dann in die Mitte.
   Vorläufige Werte ohne Figma-Frame: Jahr 16 / aktiv 18 Bold, Quadrat 16 /
   aktiv 20, Linie 2px mit mindestens 12px Länge, 24px bis zum Bild. */
.tl-nav {
    position: relative;                        /* Bezug für offsetLeft in timeline.js */
    display: flex;
    align-items: flex-end;
    margin: 0 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tl-nav::-webkit-scrollbar {
    display: none;
}

.tl-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.tl-nav-year {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 20px;
    line-height: normal;
    color: var(--color-dark);
}

.tl-nav-item.is-active .tl-nav-year {
    font-weight: var(--fw-bold);
    font-size: 24px;
}

.tl-nav-marker {
    width: 24px;
    height: 24px;
    background-color: var(--color-dark);
}

.tl-nav-item.is-active .tl-nav-marker {
    width: 32px;
    height: 32px;
    background-color: var(--color-green);
}

/* Die Linie wächst mit; die Leiste selbst ist auf 650px gedeckelt, damit sie
   wie im Figma mittig steht statt über die ganze Inhaltsbreite zu laufen. */
.tl-nav-line {
    flex: 1 1 auto;
    height: 3px;
    background-color: var(--color-dark);
    /* Auf Höhe der Quadratmitte – die Jahreszahl darüber zählt nicht mit. */
    margin-top: auto;
    margin-bottom: 10px;
    transition: background-color var(--transition);
}

/* Bis zum aktiven Jahr gefüllt – Kundenfeedback 01 vom 2026-09-09.
   Die Klasse setzt timeline.js in show(); ohne JavaScript bleibt die Leiste
   durchgehend dunkelblau und damit so, wie sie vorher war. */
.tl-nav-line.is-filled {
    background-color: var(--color-green);
}

@media (prefers-reduced-motion: reduce) {
    .tl-nav-line { transition: none; }
}

@media (max-width: 767.98px) {
    .tl-nav-item {
        gap: 6px;
    }

    .tl-nav-year {
        font-size: 16px;
    }

    .tl-nav-item.is-active .tl-nav-year {
        font-size: 18px;
    }

    .tl-nav-marker {
        width: 16px;
        height: 16px;
    }

    .tl-nav-item.is-active .tl-nav-marker {
        width: 20px;
        height: 20px;
    }

    .tl-nav-line {
        min-width: 12px;
        height: 2px;
        margin-bottom: 7px;                    /* Mitte des 16px-Quadrats */
    }
}

/* ── Bühne (Bild + Karte) ────────────────────────────────── */

/* Durchgehend mit .block-timeline davor: Swipers CSS wird erst beim Rendern des
   Blocks eingereiht und liegt damit HINTER dem Theme-CSS. Bei gleicher
   Spezifität gewinnt dann Swiper (`.swiper { padding: 0 }`,
   `.swiper-slide { display: block }`) – zwei Klassen drehen das um. */
.block-timeline .tl-stage {
    /* Mobil fast randlos: .container-xl liefert sonst Rand und max-width.
       16px bleiben stehen – Kundenfeedback 01 („Historie vielleicht mobil
       besser Abstaende links/rechts?", M BILD 32 „Klebt ganz links"), vom
       User am 2026-09-09 auf 16px festgelegt. Vorher standen hier 0. */
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
}

.tl-slide-inner {
    position: relative;
}

.tl-image {
    display: block;
    width: 100%;
    aspect-ratio: 1468 / 772;
    object-fit: cover;
}

.tl-card {
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    padding: 24px;
}

.tl-card-year {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 34px;
    line-height: normal;
    color: var(--color-dark);
}

.tl-card-square {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background-color: var(--color-green);
}

.tl-card-text {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-text);
}

/* Pagination: Quadrate statt Punkte. Der Mobil-Screenshot zeigt sie unten
   rechts; seit 2.15.8 mittig – Kundenfeedback 01, Mobil 18 (Chris, 21.09.).
   Sie existiert nur mobil, darüber blendet das CSS sie aus. */
.tl-pagination.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.tl-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-pagination);
    border-radius: 0;
    background: transparent;
    opacity: 1;
}

.tl-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-pagination);
}

/* ── Ab Tablet: Leiste sichtbar, Karte über dem Bild ─────── */
@media (min-width: 768px) {
    .tl-nav {
        display: flex;
        align-items: flex-end;
        max-width: 650px;
        margin: 0 auto 48px;
    }

    .block-timeline .tl-stage {
        max-width: calc(1468px + 2 * var(--grid-margin));
        padding-left: var(--grid-margin);
        padding-right: var(--grid-margin);
    }

    /* Ab hier ist es kein Slider mehr – nur die aktive Station steht da.

       Übergang seit 2.15.10 (Kundenfeedback 01, Desktop: „Können die
       Übergänge zwischen den Bildern etwas dynamischer gestaltet werden?"):
       Alle Stationen liegen im selben Rasterfeld übereinander, statt per
       display: none zu wechseln. So kann die alte ausblenden, während die
       neue einblendet (Überblendung statt harter Schnitt). Dazu zoomt das
       neue Bild leicht auf seine Endgröße und die Karte gleitet kurz nach.
       visibility nimmt die verdeckten Stationen aus Tab-Folge und
       Screenreader – so wie vorher display: none. */
    .block-timeline .swiper-wrapper {
        display: grid;
    }

    .block-timeline .tl-slide {
        grid-area: 1 / 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    }

    .block-timeline .tl-slide.is-active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.6s ease, visibility 0s;
        z-index: 1;
    }

    .block-timeline .tl-slide-inner {
        overflow: hidden;                      /* hält den Zoom im Bildrahmen */
    }

    .block-timeline .tl-slide.is-active .tl-image {
        animation: weser-tl-bild 1.2s ease-out both;
    }

    .block-timeline .tl-slide.is-active .tl-card {
        animation: weser-tl-karte 0.5s ease-out 0.25s both;
    }

    @keyframes weser-tl-bild {
        from { transform: scale(1.04); }
        to   { transform: scale(1); }
    }

    @keyframes weser-tl-karte {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .block-timeline .tl-slide,
        .block-timeline .tl-slide.is-active {
            transition: none;
        }

        .block-timeline .tl-slide.is-active .tl-image,
        .block-timeline .tl-slide.is-active .tl-card {
            animation: none;
        }
    }

    .block-timeline .tl-pagination {
        display: none;
    }

    .tl-card {
        position: absolute;
        left: 40px;
        /* Figma setzt die Karte fest 114px über die Bildunterkante – als
           Anteil der Bildhöhe bleibt das über alle Breiten stabil. */
        bottom: 15%;
        width: 464px;
        max-width: calc(100% - 80px);
        padding: 40px;
    }

    .tl-card-year {
        font-size: 48px;
    }
}