/* Weser Theme – Block: Besonderheiten-Slider („Was macht Weserwaben so besonders?")
   ==========================================================================
   Gemessen aus `.figma-ref/Sprint 3/Weserwaben_Startseite.png` und dem
   isolierten Export `Intro_bulletpoints.png` (Desktop 1728):

   - Karte      x 130–1598 = 1468px = exakt die Container-Innenbreite,
                Höhe 268px, hälftig geteilt (734 / 734)
   - Blau       var(--color-dark), Überschrift Literata SemiBold, Versalhöhe 29px → 40px,
                Farbe var(--color-primary), waagerecht UND senkrecht zentriert
   - Grau       var(--color-surface-alt), Fließtext Poppins 16px, Innenabstand links 68px,
                senkrecht zentriert
   - Ecken      Das Designmotiv ist EINE große Rundung diagonal versetzt:
                blau unten-links 32px, grau oben-rechts 32px, die beiden
                anderen Außenecken bleiben scharf. Dieselbe Figur benutzen
                die Kategorie-Kacheln (dort 48px).
   - Pagination Quadrate 24×24px, 12px Abstand, zentriert, 25px unter der
                Karte; aktiv var(--color-primary), inaktiv var(--color-dark). KEINE Punkte.

   ⚠️ Swiper-CSS wird erst beim Rendern des Blocks eingereiht und liegt damit
   HINTER dem Theme-CSS. Alle Regeln, die Swiper überschreiben, brauchen
   deshalb zwei Klassen (`.feature-swiper .swiper-slide`), sonst gewinnt bei
   gleicher Spezifität die spätere Swiper-Regel.

   Tablet/Mobil sind ABGELEITET – für Sprint 3 lagen nur Desktop-Screenshots
   vor. Auf Mobil bricht die Karte untereinander um; die blaue Fläche steht
   oben, die Rundungen wandern entsprechend mit (oben-links, unten-rechts).
   ========================================================================== */

.feature-slider-headline {
    text-align: center;
    color: var(--color-dark);
    margin: 0 0 40px;
}

/* ---- Karte --------------------------------------------------------------- */
.feature-swiper .fs-card {
    min-height: 268px;
}

.fs-card-title-col {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-dark);
    border-radius: 16px 0 0 32px;
    padding: 32px 24px;
}

.fs-card-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 40px;
    line-height: 1.2;
    color: var(--color-primary);
    text-align: center;
    margin: 0;
}

.fs-card-text-col {
    display: flex;
    align-items: center;
    background: var(--color-surface-alt);
    border-radius: 0 32px 0 0;
    padding: 40px 92px 40px 68px;
}

.fs-card-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text);
    margin: 0;
}

/* ---- Pagination: Quadrate statt Punkte -----------------------------------
   Zwei Klassen, damit die Swiper-Vorgaben (border-radius: 50%, opacity) sicher
   überschrieben werden – siehe Hinweis im Kopf. */
.block-feature-slider .swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
}

.block-feature-slider .swiper-pagination .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 0;
    background: var(--color-pagination);
    opacity: 1;
    transition: background var(--transition);
}

.block-feature-slider .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary);
}

/* ---- Tablet (768–1199) – abgeleitet -------------------------------------- */
@media (max-width: 1199.98px) {
    .feature-slider-headline {
        margin-bottom: 32px;
    }

    .feature-swiper .fs-card {
        min-height: 220px;
    }

    .fs-card-title {
        font-size: 25px;
    }

    .fs-card-text-col {
        padding: 32px 32px 32px 40px;
    }
}

/* ---- Mobil (<768) – abgeleitet -------------------------------------------
   Die Karte bricht um: blaue Fläche oben, graue darunter. Damit die
   Diagonal-Rundung erhalten bleibt, wandert sie auf oben-links und
   unten-rechts. */
@media (max-width: 767.98px) {
    .feature-swiper .fs-card {
        min-height: 0;
    }

    .fs-card-title-col,
    .fs-card-text-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .fs-card-title-col {
        border-radius: 32px 0 0 0;
        padding: 28px 24px;
    }

    .fs-card-text-col {
        border-radius: 0 0 32px 0;
        padding: 28px 24px;
    }

    .block-feature-slider .swiper-pagination {
        gap: 8px;
        margin-top: 20px;
    }

    .block-feature-slider .swiper-pagination .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
    }
}