/* ── HFH Timeline: zwei Spalten, rechte Spalte versetzt ─── */

.hfh-tl {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0 4rem;
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}

/* Vertikale Mittellinie */
.hfh-tl__line {
    position: absolute;
    left: calc(50% - 0.5px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        color-mix(in srgb, var(--color-content-faded) 30%, transparent) 8%,
        color-mix(in srgb, var(--color-content-faded) 30%, transparent) 92%,
        transparent
    );
    pointer-events: none;
}

/* ── Spalten ── */
.hfh-tl__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Rechte Spalte: ~30% versetzt nach unten */
.hfh-tl__col--right {
    padding-top: 7rem;
}

/* ── Card ── */
.hfh-tl__card {
    background: linear-gradient(170deg, var(--color-content-bg), var(--color-content-bg-alt));
    border: 1px solid color-mix(in srgb, var(--color-content-faded) 28%, transparent);
    border-radius: 18px;
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--color-content-overlay) 80%, transparent),
        0 1px 0 color-mix(in srgb, var(--color-content-border) 6%, transparent) inset;
    overflow: hidden;
    transition: box-shadow .3s ease, border-color .3s ease;
}

.hfh-tl__card:hover {
    box-shadow:
        0 16px 40px color-mix(in srgb, var(--color-content-overlay) 100%, transparent),
        0 1px 0 color-mix(in srgb, var(--color-content-border) 10%, transparent) inset;
    border-color: color-mix(in srgb, var(--color-content-faded) 50%, transparent);
}

/* Beitragsbild */
.hfh-tl__thumb img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 17px 17px 0 0;
}

/* Body */
.hfh-tl__body {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Jahr */
.hfh-tl__year {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-content-link);
    margin-bottom: .3rem;
}

/* Titel */
.hfh-tl__title {
    margin: 0 0 .55rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-content-heading);
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Text */
.hfh-tl__text {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--color-content-text);
    margin: 0;
}

.hfh-tl__text p { margin: 0; }

/* ── Impreza-native Animationen (afl / afr) ─────────────── */

.us-animate[data-anim="afl"] {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .55s ease, transform .55s ease;
}

.us-animate[data-anim="afr"] {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity .55s ease, transform .55s ease;
}

.us-animate.animated {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.us-animate { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
    .us-animate[data-anim="afl"],
    .us-animate[data-anim="afr"] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 680px) {
    .hfh-tl {
        flex-direction: column;
        gap: 1rem;
    }

    .hfh-tl__line { display: none; }

    .hfh-tl__col--right {
        padding-top: 0;
    }
}