/* Block: Auswahlkarten / Serien-Slider
   ------------------------------------------------------------------
   Gemessen an .figma-ref/20.08/Mauersysteme.png (Desktop 1736):

     Inhaltsbreite   1476 px (Rand 130)
     Raster          3 Spalten, Abstand 16 px → Karte 480 px
     Bild            480 × 300 px  (8:5)
     Innenabstand    28 px links/rechts
     Titel           Literata SemiBold, --color-heading
     Text            Poppins 16, --color-dark
     Button          .btn-blue

   Die zwei Karten der Mauersysteme-Seite füllen die Reihe NICHT – sie
   sitzen links auf den ersten beiden von drei Spalten. So ist es
   gezeichnet, deshalb col-xl-4 und nicht col-xl-6.

   Tablet/Mobil sind abgeleitet (für Sprint 3 lagen nur Desktop-Entwürfe
   vor): Tablet zwei Spalten, Mobil eine. Sobald die Referenzen da sind,
   nachmessen.
   ------------------------------------------------------------------ */

.block-choice-cards {
    background-color: var(--color-white);
}

.choice-cards-headline {
    margin: 0 0 var(--space-sm);
    color: var(--color-heading);
}

.choice-cards-intro {
    max-width: 70ch;
    margin: 0 0 var(--space-md);
    font-size: var(--fs-copy-s);
    line-height: 1.6;
    color: var(--color-dark);
}

/* Bootstrap-Gutter auf den gemessenen Wert. */
.choice-cards-row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

/* Serien-Raster (2.21.0): Reihenabstand 64 aus dem Screenshot „DeRyck_Cards“
   (User 19.10., keine Figma-Vorlage) – Kartenunterkante bis nächste Karte.
   Stufe L, auf Tablet/Mobil also 40. Spalten 16 wie vorher im Slider.
   ⚠️ Zwei Klassen tief: base.css `.row:not([class*="g-"])` setzt den
   Spaltenabstand sonst auf das Seitenraster (24). */
.block-choice-cards .choice-cards-row--raster {
    --bs-gutter-x: 16px;
    --bs-gutter-y: var(--sp-l);
}

/* Kategorietrenner der Serien (2.21.0, „Auf Anfrage“): Größe aus h3
   (typography.css), Abstand oben wie Stufe L, unten wie Überschrift → Karten.
   Linie darunter über die ganze Inhaltsbreite, 2px #A92733 (Figma 28.10.,
   bewusst nicht --deryck #A92738 – so steht es im Entwurf). */
.choice-cards-group {
    margin: var(--sp-l) 0 var(--space-sm);
    padding-bottom: 6px;
    border-bottom: 2px solid #A92733;
    color: var(--color-heading);
}

@media (min-width: 1200px) {
    .choice-cards-group { margin-bottom: var(--space-md); }
}

/* ── Karte ──────────────────────────────────────────────────── */
.choice-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);           /* 16px */
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
}

/* :focus-within – der Fokus sitzt auf dem Knopf-Link in der Karte. */
.choice-card:hover,
.choice-card:focus-within {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Ganze Karte klickbar (Chris 2026-09-18), Muster wie .blog-card-link:
   Das ::after des Knopf-Links legt sich über die Karte. Kein Link um die
   Karte, weil der Knopf selbst schon ein Link ist. Der Fokusring liegt
   INNEN (overflow: hidden würde einen äußeren abschneiden). */
.choice-card--link {
    position: relative;
}

/* ⚠️ Keine Hover-Bewegung am Knopf: `.btn:hover` schiebt ihn per transform
   um 1 px (buttons.css). Ein transform macht den Knopf zum Bezugsrahmen
   seines eigenen ::after – die Überdeckung schrumpfte beim ersten Hover auf
   Knopfgröße, und ein Klick auf Bild oder Text lief ins Leere. Die Karte
   hebt sich ohnehin selbst. */
.choice-card--link .choice-card-btn,
.choice-card--link .choice-card-btn:hover,
.choice-card--link .choice-card-btn:focus {
    transform: none;
}

.choice-card--link .choice-card-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-lg);
}

.choice-card--link .choice-card-btn:focus-visible {
    outline: none;
}

.choice-card--link .choice-card-btn:focus-visible::after {
    outline: 2px solid var(--color-dark);
    outline-offset: -4px;
    border-radius: var(--radius-lg);
}

.choice-card-media {
    /* 8:5 wie gemessen. aspect-ratio statt fester Höhe, damit die Karte auf
       Tablet und Mobil mitwächst, ohne dass das Motiv beschnitten kippt. */
    aspect-ratio: 8 / 5;
    overflow: hidden;
}

.choice-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.choice-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 28px 28px;
}

.choice-card-title {
    margin: 0 0 12px;
    color: var(--color-heading);
}

.choice-card-text {
    margin: 0 0 20px;
    font-size: var(--fs-copy-s);
    line-height: 1.6;
    color: var(--color-dark);
}

/* Der Button sitzt unten – sonst tanzen die Buttons zweier Karten mit
   unterschiedlich langem Text auf verschiedenen Höhen. */
.choice-card-btn {
    align-self: flex-start;
    margin-top: auto;
    font-size: var(--fs-copy-s);
}

/* ── Slider (ab vier Karten) ────────────────────────────────── */
.choice-cards-swiper {
    /* Der Schatten der Karten darf nicht abgeschnitten werden. */
    padding: 4px 4px 12px;
    margin: -4px -4px -12px;
}

.choice-cards-swiper .choice-card-col {
    height: auto;   /* Swiper setzt sonst keine gleiche Kartenhöhe */
}

/* Drei Klassen tief, nicht eine: Swiper lädt sein CSS erst mit dem Block,
   also NACH dieser Datei, und `.swiper-pagination` (position: absolute) bzw.
   `.swiper-pagination-bullets.swiper-pagination-horizontal` (bottom: 8px,
   zentriert) gewannen bei gleicher Stärke. Bis 2.17.1 lagen die Punkte
   deshalb AUF den Karten statt darunter (Kundenfeedback 2026-10-01). */
.block-choice-cards .choice-cards-swiper > .choice-cards-pagination {
    position: static;
    margin-top: var(--space-sm);
    text-align: right;
}

/* Punkte als Kästchen – dieselbe Sprache wie im Inspirations-Slider. */
.choice-cards-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 1px solid var(--color-pagination);
    border-radius: 2px;
    background: transparent;
    opacity: 1;
    margin: 0 4px;
}

.choice-cards-pagination .swiper-pagination-bullet-active {
    background: var(--color-pagination);
}

/* ── Tablet (≥768px) ────────────────────────────────────────── */
@media (min-width: 768px) {
    .choice-card-body { padding: 24px 24px 28px; }
}

/* ── Desktop (≥1200px) ──────────────────────────────────────── */
@media (min-width: 1200px) {
    .choice-cards-headline { margin-bottom: var(--space-md); }
    .choice-card-body      { padding: 24px 28px 28px; }
}