/* ── Kachelslider ── */
:root {
    --clr-primary: #0081c3;
    --clr-white: #ffffff;
    --radius-image: 12px;
    --content-width: 1200px;
}

/* Frame: remove right padding so slider can bleed to viewport edge */
@media (min-width: 1200px) {
    .frame-type-km_kachelslider {
        padding-right: 0 !important;
        padding-left: 0.75rem !important;
    }
}

.ce-kachelslider {
    /* Desktop: extend right to viewport edge.
       Formula: 100% (frame content box minus left padding)
       + half the remaining viewport space on each side */
    @media (min-width: 1200px) {
        --slide-gap: 30px;
        width: calc(100% + (100vw - var(--content-width)) / 2);

        /* 2 slides = content width: (1200px - 1 gap) / 2 */
        .swiper-slide {
            width: calc((var(--content-width) - var(--slide-gap)) / 2);
        }
    }
    overflow: hidden;

    .kachel {
        height: auto;
        display: flex;
        flex-direction: column;

        &:hover .kachel-img {
            transform: scale(1.04);
        }
    }

    .kachel-bild {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: var(--radius-image);
        flex: 0 0 auto;
    }

    .kachel-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .kachel-inhalt {
        padding: 1.25rem 1.5rem 1.5rem 0;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .kachel-headline {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 0.5rem;
    }

    .kachel-text {
        font-size: 0.8rem;
        line-height: 1.6;
        margin: 0 0 1rem;
        flex: 1;
    }

    .kachel-mehr {
        display: inline-block;
        font-size: 0.75rem;
        text-decoration: underline;
        margin-top: auto;
        color: var(--clr-white);
    }

    /* ── Combined navigation ── */
    .kachel-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 1.5rem 0 0.5rem;
        color: inherit;
    }

    .kachel-nav-pill {
        border: 1.5px solid var(--clr-primary);
        border-radius: 100px;
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swiper-pagination {
        position: static;
        width: auto;
        bottom: auto;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        border-radius: 12px;
        background: var(--clr-white);
        opacity: 1;
        margin: 0 !important;
        transition: width 0.3s ease, background-color 0.3s ease;
    }

    .swiper-pagination-bullet-active {
        width: 2rem;
        background: var(--clr-primary);
    }

    .swiper-button-prev,
    .swiper-button-next {
        position: static;
        width: 48px;
        height: 48px;
        margin-top: 0;
        color: var(--clr-primary);
        flex-shrink: 0;
        transition: color 0.2s ease;

        &:hover {
            color: var(--clr-primary);
        }

        &.swiper-button-disabled {
            color: rgb(0 129 195 / 0.22);
        }

        &::after {
            font-size: 28px;
            font-weight: 400;
        }
    }
}