/* Block: Verweis-Karten („Das könnte Sie auch interessieren")
   Sollwerte (User, 2026-08-07):
   Sektions-Überschrift  34 / 22 / 22 px, Literata Bold, var(--color-dark)
                         Zeilenhöhen wie Sprint 1: 34→normal · 22→26px
   Kartentitel           24px / 30px, Literata Bold, var(--color-dark), grünes Quadrat davor
   Kartentext            Poppins 16px, var(--color-text)
   Button                .btn-blue (BG var(--color-dark), Schrift var(--color-primary)) – global in buttons.css
   Aufteilung            Bild ca. 1/3, Text 2/3
   Karte innen           Padding 40px · Titel→Text 22px · Text→Button 32px (ergibt ~314px Höhe)
   Umbruch               Mobil Bild oben · ab 576px Bild links · ab 1200px zwei Karten nebeneinander
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */

/* ── Sektions-Überschrift ────────────────────────────────── */
.related-links-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    font-size: 22px;
    line-height: 26px;
    margin-top: 0;
    margin-bottom: var(--space-md);            /* 32px */
}

/* ── Karte ───────────────────────────────────────────────── */
.related-card {
    background-color: var(--color-white);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

/* Hover und ganze Karte klickbar (Chris 2026-09-18) – dieselbe Bewegung wie
   die Auswahlkarten (choice-cards.css), Muster wie .blog-card-link: das
   ::after des Knopfs legt sich über die Karte. Fokusring innen, weil
   overflow: hidden einen äußeren abschneiden würde. */
.related-card--link {
    position: relative;
}

.related-card--link:hover,
.related-card--link:focus-within {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .related-card--link:hover,
    .related-card--link:focus-within { transform: none; }
}

/* ⚠️ Knopf ohne eigene Hover-Bewegung: `.btn:hover` verschiebt per transform,
   und ein transform machte den Knopf zum Bezugsrahmen seines ::after – die
   Überdeckung schrumpfte auf Knopfgröße (siehe choice-cards.css). */
.related-card--link .related-card-btn,
.related-card--link .related-card-btn:hover,
.related-card--link .related-card-btn:focus {
    transform: none;
}

.related-card--link .related-card-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

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

/* Bild: auf Mobil oben im festen Format, ab Tablet über die volle Kartenhöhe. */
.related-card-media {
    height: 100%;
    aspect-ratio: 3 / 2;
}

.related-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-card-body {
    padding: 40px;
}

/* ── Kartentitel mit grünem Quadrat ──────────────────────── */
.related-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    margin-bottom: 22px;
}

.related-card-marker {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: var(--color-green);
}

.related-card-text {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-text);                  /* var(--color-text) */
    margin-bottom: var(--space-md);            /* 32px */
}

.related-card-btn {
    font-size: var(--fs-copy-xs);              /* 14px */
}

/* ── Ab 576px: Bild links neben dem Text ─────────────────── */
@media (min-width: 576px) {
    .related-card-media {
        aspect-ratio: auto;                    /* Höhe folgt der Karte */
    }
}

/* ── Desktop (≥1200px) ───────────────────────────────────── */
@media (min-width: 1200px) {
    .related-links-headline {
        font-size: 34px;
        line-height: normal;
    }
}

/* Mobil: „Planungsservice" lief bei 320px 15px aus der Karte (2026-09-16).
   Der Titel ist ein Flex-Container – sein Text ist ein anonymes Flex-Element,
   das nicht schmaler als sein längstes Wort wird. `anywhere` zählt beim
   Mindestmaß mit, `break-word` (typography.css) nicht. Getrennt wird nur, wenn
   das Wort sonst überliefe. */
@media (max-width: 767.98px) {
    .related-card-title {
        overflow-wrap: anywhere;
    }
}