.obs-training-timeline,
.obs-training-timeline *,
.obs-training-timeline *::before,
.obs-training-timeline *::after { box-sizing: border-box; }

.obs-training-timeline {
    --obs-timeline-green: #97c941;
    --obs-timeline-dark: #202738;
    position: relative;
    width: min(100%, 760px);
    margin-inline: auto;
    padding: .5rem 0;
}

.obs-training-timeline::before {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 2rem;
    width: 4px;
    display: none;
}

.obs-training-timeline__item {
    position: relative;
    z-index: 1;
    min-height: 7rem;
    margin: 0;
    padding: 0 0 clamp(2.5rem, 6vw, 5rem) clamp(5rem, 12vw, 7.5rem);
}

.obs-training-timeline__item:last-child { padding-bottom: 0; }

/* Jede Strecke verbindet zwei Äpfel. Damit beginnt bzw. endet die Linie nie im Symbol. */
.obs-training-timeline__item:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 4.25rem;
    bottom: -.15rem;
    left: 2rem;
    width: 4px;
    background: var(--obs-timeline-green);
    content: '';
}

.obs-training-timeline__marker {
    z-index: 1;
    position: absolute;
    top: -.15rem;
    left: .125rem;
    width: 3.8rem;
    height: 4.4rem;
    background: var(--obs-timeline-green);
    -webkit-mask: url('./apple.svg') center / contain no-repeat;
    mask: url('./apple.svg') center / contain no-repeat;
}

.obs-training-timeline__connections {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.obs-training-timeline__title {
    margin: 0 0 .35rem;
    color: var(--obs-timeline-dark);
    font-size: clamp(1.65rem, 3.5vw, 2.05rem);
    font-weight: 500;
    line-height: 1.08;
}

.obs-training-timeline__subtitle { margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.4; }
.obs-training-timeline__subtitle strong { font-weight: 700; }
.obs-training-timeline__description { max-width: 42rem; }
.obs-training-timeline__description,
.obs-training-timeline__additional-content { min-width: 0; overflow-wrap: anywhere; }
.obs-training-timeline img,
.obs-training-timeline video,
.obs-training-timeline iframe { max-width: 100%; }
.obs-training-timeline__description > :first-child { margin-top: 0; }
.obs-training-timeline__description > :last-child { margin-bottom: 0; }
.obs-training-timeline__additional-content { max-width: 42rem; margin-top: 1.25rem; }
.obs-training-timeline__additional-content > :first-child { margin-top: 0; }
.obs-training-timeline__additional-content > :last-child { margin-bottom: 0; }

/* Geschichts-Zeitachse: die Abschnitte wechseln auf großen Bildschirmen die Seite. */
@media (min-width: 781px) {
    .obs-training-timeline.is-staggered {
        --obs-timeline-offset: clamp(5rem, 13vw, 9rem);
        width: min(100%, 1100px);
        padding-block: 1rem;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__item {
        min-height: 10rem;
        padding: 0 0 clamp(3.5rem, 8vw, 6.5rem);
        padding-right: calc(50% + var(--obs-timeline-offset) + 2.5rem);
        text-align: right;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__item:nth-of-type(even) {
        padding-right: 0;
        padding-left: calc(50% + var(--obs-timeline-offset) + 2.5rem);
        text-align: left;
    }

    /* Im Geschichtsmodus ist die Überschrift die Jahreszahl am Knoten. */
    .obs-training-timeline.is-staggered .obs-training-timeline__title {
        position: absolute;
        top: -.3rem;
        left: calc(50% - var(--obs-timeline-offset) + 2.5rem);
        width: min(9rem, calc(var(--obs-timeline-offset) - 1rem));
        margin: 0;
        font-size: clamp(1.75rem, 3.2vw, 2.05rem);
        font-weight: 700;
        line-height: 1;
        text-align: left;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__item:nth-of-type(even) .obs-training-timeline__title {
        right: calc(50% - var(--obs-timeline-offset) + 2.5rem);
        left: auto;
        text-align: right;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__subtitle {
        margin: 0 0 .35rem;
        font-weight: 700;
        line-height: 1.3;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__description { line-height: 1.35; }

    .obs-training-timeline.is-staggered .obs-training-timeline__marker {
        top: -.15rem;
        left: calc(50% - var(--obs-timeline-offset) - 1.9rem);
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__item:nth-of-type(even) .obs-training-timeline__marker {
        left: calc(50% + var(--obs-timeline-offset) - 1.9rem);
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__item:not(:last-child)::after {
        display: none;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__item:nth-of-type(even):not(:last-child)::after {
        display: none;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__description,
    .obs-training-timeline.is-staggered .obs-training-timeline__additional-content {
        margin-inline: 0;
    }

    .obs-training-timeline.is-staggered .obs-training-timeline__item:nth-of-type(odd) .obs-training-timeline__description,
    .obs-training-timeline.is-staggered .obs-training-timeline__item:nth-of-type(odd) .obs-training-timeline__additional-content {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .obs-training-timeline { padding-inline: 2px; }
    .obs-training-timeline::before { left: 1.25rem; width: 3px; }
    .obs-training-timeline__item { min-height: 0; padding-left: 4rem; padding-bottom: 2.75rem; }
    .obs-training-timeline__marker { left: -.25rem; width: 3rem; height: 3.5rem; }
    .obs-training-timeline__item:not(:last-child)::after { top: 3.35rem; left: 1.25rem; width: 3px; }
    .obs-training-timeline__title { font-size: clamp(1.45rem, 8vw, 1.8rem); }
    .obs-training-timeline__subtitle { margin-bottom: 1rem; }
    .obs-training-timeline__additional-content { margin-top: 1rem; }
}

@media (max-width: 360px) {
    .obs-training-timeline::before { left: 1rem; }
    .obs-training-timeline__item { padding-left: 3.5rem; }
    .obs-training-timeline__marker { left: -.25rem; width: 2.6rem; height: 3.05rem; }
    .obs-training-timeline__item:not(:last-child)::after { top: 2.9rem; left: 1rem; }
}