.insightsreihe {
    padding: 12rem 0;
    background: var(--color-base);
    overflow-x: clip;
}

.insightsreihe[hidden] {
    display: none;
}

.insightsreihe__inner {
    width: var(--content-width);
    max-width: var(--content-width);
    margin: 0 auto;
}

.insightsreihe__label {
    margin-bottom: 1.6rem;
    color: var(--color-text);
}

.insightsreihe__aufmacher {
    margin: 0 0 4.8rem;
    font-size: var(--h2-size);
    font-weight: var(--fw-regular);
    line-height: 1.08;
    letter-spacing: var(--h2-tracking);
    color: var(--color-text);
}

.insightsreihe__link {
    display: flex;
    justify-content: center;
    margin: 6.4rem 0 0;
}

.insightsreihe__mehr {
    --ldet-leitfarbe: var(--color-schwarz);
    --knopf-polster: 3.6rem;
    padding: 1.2rem var(--knopf-polster);
    font-size: 1.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: -0.014em;
}

.insightsreihe__mehr .link-winkel__mark {
    right: 0.8rem;
}



.insightsreihe__lauf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
}

.insightsreihe .insightsreihe__kachel {
    aspect-ratio: 4 / 5;
    min-width: 0;
    min-height: 0;
    padding: 2.4rem;
    opacity: 0;
    transform: translateX(6rem);
    transition: background-color 0.55s var(--ease-cubic) 0s,
                color 0.55s var(--ease-cubic) 0s,
                opacity 1.1s var(--ease-cubic) var(--in-delay, 0s),
                transform 1.1s var(--ease-cubic) var(--in-delay, 0s);
}

.insightsreihe .insightsreihe__kachel .cta__card-title {
    font-size: 1.9rem;
}

.insightsreihe .insightsreihe__lesezeit {
    align-self: flex-end;
    margin-left: 0;
    margin-right: -0.9rem;
    letter-spacing: 0.02em;
}



.insightsreihe__lauf > :first-child {
    transform: translateX(-6rem);
}

.insightsreihe__lauf > :nth-child(2) { --in-delay: 0.12s; }
.insightsreihe__lauf > :nth-child(3) { --in-delay: 0.24s; }
.insightsreihe__lauf > :nth-child(4) { --in-delay: 0.36s; }

.insightsreihe.is-in .insightsreihe__kachel {
    opacity: 1;
    transform: translateX(0);
}

.insightsreihe__label,
.insightsreihe__aufmacher,
.insightsreihe__link {
    opacity: 0;
    transform: translateX(-6rem);
    transition: opacity 0.7s var(--ease-quart) var(--in-delay, 0s),
                transform 0.7s var(--ease-quart) var(--in-delay, 0s);
}

.insightsreihe__aufmacher { --in-delay: 0.06s; }
.insightsreihe__link { --in-delay: 0.3s; }

.insightsreihe.is-in .insightsreihe__label,
.insightsreihe.is-in .insightsreihe__aufmacher,
.insightsreihe.is-in .insightsreihe__link {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .insightsreihe .insightsreihe__kachel,
    .insightsreihe__lauf > :first-child,
    .insightsreihe__label,
    .insightsreihe__aufmacher,
    .insightsreihe__link {
        transform: none;
    }
}



@media (max-width: 767px) {
    .insightsreihe {
        padding: 8rem 0;
    }

    .insightsreihe__aufmacher {
        margin-bottom: 3.2rem;
    }

    .insightsreihe__lauf {
        display: flex;
        gap: 1.8rem;
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        padding-inline: 7.5vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .insightsreihe__lauf::-webkit-scrollbar {
        display: none;
    }

    .insightsreihe .insightsreihe__kachel {
        flex: 0 0 85vw;
        scroll-snap-align: center;
        aspect-ratio: 1.2 / 1;
        min-height: auto;
        padding: 2.4rem;
        overflow: clip;
        transform: translateX(4rem);
    }

    .insightsreihe__lauf > :first-child {
        transform: translateX(4rem);
    }

    .insightsreihe .insightsreihe__kachel .cta__card-title {
        font-size: 2rem;
    }

    .insightsreihe .cta__card-tags {
        margin-top: -0.6rem;
        margin-bottom: 0.6rem;
    }

    .insightsreihe .insightsreihe__lesezeit {
        margin-right: -0.6rem;
    }

    .insightsreihe__link {
        margin-top: 4.8rem;
    }

    .insightsreihe__mehr.cta-knopf {
        --knopf-polster: 0rem;
        padding: 0;
        gap: 0.8rem;
        overflow: visible;
        color: var(--ldet-leitfarbe);
    }

    .insightsreihe__mehr.cta-knopf::before {
        display: none;
    }

    .insightsreihe__mehr .cta-knopf__wort {
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: var(--ldet-leitfarbe);
    }

    .insightsreihe__mehr .link-winkel__mark {
        position: static;
        right: auto;
        width: 0.7em;
        height: 0.7em;
        opacity: 1;
        transform: none;
        background: var(--ldet-leitfarbe);
    }
}