/**
 * Block: Feature Teaser
 *
 * Text-Block mit Button unten und zwei dekorativen Grafiken rechts.
 * Die untere Grafik sitzt bündig am Block-Unterkante (keine Padding /
 * Margin zum Rand).
 *
 * Custom Properties (inline):
 *   --ft-graphic-top-w     Breite der oberen Grafik (z. B. 35%)
 *   --ft-graphic-top-y     Abstand der oberen Grafik von oben (px)
 *   --ft-graphic-bottom-w  Breite der unteren Grafik (z. B. 40%)
 *
 * Modifier:
 *   .block--pad-{none|normal|lg}
 *   .block--bg-{electric-blue|beige|…|transparent}
 */

.block--feature-teaser {
    position: relative;
    overflow: hidden;   /* Grafiken dürfen nicht über den Block hinausragen */
}

.block--feature-teaser.block--pad-none   { padding-block: 0; }
.block--feature-teaser.block--pad-normal { padding-block: var(--space-12); }
.block--feature-teaser.block--pad-lg     { padding-block: var(--space-16); }

/* Background-Farben */
.block--feature-teaser.block--bg-electric-blue { background-color: var(--color-electric-blue); }
.block--feature-teaser.block--bg-beige         { background-color: var(--color-beige); }
.block--feature-teaser.block--bg-dunkelbeige   { background-color: var(--color-bg-alt); }
.block--feature-teaser.block--bg-white         { background-color: var(--color-white); }
.block--feature-teaser.block--bg-navy {
    background-color: var(--color-bg-premium);
    color: var(--color-text-on-navy);
}
.block--feature-teaser.block--bg-neongelb    { background-color: var(--color-neongelb); }
.block--feature-teaser.block--bg-violett {
    background-color: var(--color-violett);
    color: var(--color-text-on-navy);
}
.block--feature-teaser.block--bg-transparent { background-color: transparent; }

/* ── Inner ────────────────────────────────────── */

.feature-teaser__inner {
    position: relative;
}

/* ── Content links ────────────────────────────── */

.feature-teaser__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Text wird nicht von den Grafiken überlagert: maximal ~60 % Breite */
    max-width: 60%;
}

.feature-teaser__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--ft-text-color, var(--color-text));
}

.feature-teaser__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 3.4vw, var(--text-5xl));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--ft-text-color, var(--color-text));
}

.feature-teaser__body {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--ft-text-color, var(--color-text));
    /* Breite wird vom übergeordneten .feature-teaser__content begrenzt */
    max-width: 100%;
}

.feature-teaser__body > *:first-child { margin-top: 0; }
.feature-teaser__body > *:last-child  { margin-bottom: 0; }

.feature-teaser__button-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* ── Grafiken (direkt im Block, damit bottom: 0 am Block-Rand sitzt) ──
 *
 * HTML-Struktur:
 *   <section class="block--feature-teaser">
 *     <div class="feature-teaser__graphic feature-teaser__graphic--top">
 *       <div class="container feature-teaser__graphic-inner">
 *         <img class="feature-teaser__graphic-img">
 *       </div>
 *     </div>
 *     … analog --bottom …
 *     <div class="container block__inner feature-teaser__inner">…</div>
 *   </section>
 *
 * Der äußere .feature-teaser__graphic spannt absolut die ganze
 * Block-Breite, bottom: 0 bezieht sich so auf den Section-Padding-Rand
 * (= Block-Unterkante). Der innere .container kappt das Motiv auf die
 * --container-max-Breite und aligned es rechts. */

.feature-teaser__graphic {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
}

.feature-teaser__graphic-inner {
    display: flex;
    justify-content: flex-end;
}

.feature-teaser__graphic-img {
    display: block;
    height: auto;
    max-width: none;
}

/* Obere Grafik: rechts oben im Block + konfigurierbarer Y-Offset. */
.feature-teaser__graphic--top {
    top: var(--ft-graphic-top-y, 0);
}

.feature-teaser__graphic--top .feature-teaser__graphic-img {
    width: var(--ft-graphic-top-w, 35%);
}

/* Untere Grafik: bündig am Block-Unterkante (= padding-edge der
 * section, unterhalb des padding-bottom). */
.feature-teaser__graphic--bottom {
    bottom: 0;
}

.feature-teaser__graphic--bottom .feature-teaser__graphic-img {
    width: var(--ft-graphic-bottom-w, 40%);
}

/* ── Skalierung (Contain / Cover) ──────────────
 *
 * Der Block hat overflow:hidden — eine Grafik, die größer als der Block ist,
 * wurde sonst an der Block-Kante ANGESCHNITTEN (das object-fit hatte ohne
 * definierte Box keinen Effekt). Contain spannt die Grafik deshalb auf die
 * Block-HÖHE (top/bottom) und passt das Bild komplett ein (kein Anschnitt,
 * ggf. Letterbox); rechts oben/unten verankert. Cover füllt stattdessen eine
 * Box im gewählten Seitenverhältnis und beschneidet. */

/* Contain — ganze Grafik sichtbar, in den Block eingepasst. */
.feature-teaser__graphic--top.feature-teaser__graphic--fit-contain {
    bottom: 0;
}
.feature-teaser__graphic--bottom.feature-teaser__graphic--fit-contain {
    top: 0;
}
.feature-teaser__graphic--fit-contain .feature-teaser__graphic-inner {
    height: 100%;
}
.feature-teaser__graphic--fit-contain .feature-teaser__graphic-img {
    height: 100%;
    object-fit: contain;
}
.feature-teaser__graphic--top.feature-teaser__graphic--fit-contain .feature-teaser__graphic-img {
    object-position: top right;
}
.feature-teaser__graphic--bottom.feature-teaser__graphic--fit-contain .feature-teaser__graphic-img {
    object-position: bottom right;
}

/* Cover — Grafik füllt eine Box im gewählten Seitenverhältnis, beschneidet.
 * aspect-ratio + width (aus den --top/--bottom-Regeln) definieren die Box. */
.feature-teaser__graphic--fit-cover .feature-teaser__graphic-img {
    height: auto;
    object-fit: cover;
}
.feature-teaser__graphic--top.feature-teaser__graphic--fit-cover .feature-teaser__graphic-img {
    aspect-ratio: var(--ft-graphic-top-ratio, 1 / 1);
}
.feature-teaser__graphic--bottom.feature-teaser__graphic--fit-cover .feature-teaser__graphic-img {
    aspect-ratio: var(--ft-graphic-bottom-ratio, 1 / 1);
}

/* ── Empty-State ─────────────────────────────── */

.block--feature-teaser--empty {
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-dunkelbeige);
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--text-sm);
    font-style: italic;
}

/* ── Responsive ─────────────────────────────── */

/* bis einschl. Tablet: Content kann etwas mehr Platz nutzen, Bilder
 * etwas größer. Width-Override auf das IMAGE (nicht auf den Wrapper —
 * der soll full-width bleiben, damit rechts/center-Align greift). */
@media (max-width: 1024px) {
    .feature-teaser__content {
        max-width: 55%;
    }

    .feature-teaser__graphic--top .feature-teaser__graphic-img {
        width: calc(var(--ft-graphic-top-w, 35%) + 5%);
    }

    .feature-teaser__graphic--bottom .feature-teaser__graphic-img {
        width: calc(var(--ft-graphic-bottom-w, 40%) + 5%);
    }
}

/* Mobile + Mobile-Large: Text voll breit, Grafiken in-flow unter dem
 * Text und im Viewport zentriert. */
@media (max-width: 768px) {
    .feature-teaser__content {
        max-width: 100%;
    }

    .feature-teaser__graphic--top,
    .feature-teaser__graphic--bottom {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .feature-teaser__graphic--top {
        margin-top: var(--space-8);
    }

    .feature-teaser__graphic--bottom {
        margin-top: var(--space-6);
        /* Negative bottom margin → bündig am Block-Unterkante
         * (neutralisiert das padding-bottom des Blocks). */
        margin-bottom: calc(var(--space-12) * -1);
    }

    .block--feature-teaser.block--pad-lg .feature-teaser__graphic--bottom {
        margin-bottom: calc(var(--space-16) * -1);
    }

    /* Bilder im Viewport zentrieren (statt rechts-aligned wie Desktop). */
    .feature-teaser__graphic-inner {
        justify-content: center;
    }

    /* Auf Mobile die Bilder in ihrer natürlichen (File-)Größe rendern —
     * keine prozentuale Skalierung, damit sie nicht kleiner werden
     * als beabsichtigt. Überbreite wird durch overflow: hidden am
     * Block rechts/links geclippt. */
    .feature-teaser__graphic--top .feature-teaser__graphic-img,
    .feature-teaser__graphic--bottom .feature-teaser__graphic-img {
        width: auto;
        height: auto;
        max-width: none;
    }
}