/* ==========================================================================
   Block: Text-Image (bd-text-image)
   ========================================================================== */

.bd-text-image {
    margin-block: 3rem; /* Gut für generellen Abstand */
    /* Optional: Wenn der .container aus dem Template entfernt wird und hier global gesetzt werden soll */
    /* container-type: inline-size; */ /* Für Container Queries, falls benötigt */
}

/* Teaser-Bereich (Headline, Subline, Teaser) */
.block_teaser {
    width: 80%; /* Oder eine spezifischere Breite, wenn --narrow nicht immer passt */
    margin-inline: auto; /* Für links/rechts Zentrierung */
    margin-bottom: 0;
    max-width: var(--narrow, 70ch); /* Fallback für --narrow, anpassbar */
    text-align: center;
}

.block_teaser h2 {
    margin-bottom: 0.5em; /* Standardabstand, anpassbar */
}

.block_teaser .subline {
    display: block; /* Stellt sicher, dass es eine eigene Zeile einnimmt */
    margin-bottom: 0.25em;
    /* Weitere Stile für Subline hier */
}

.block_teaser .teaser {
    font-size: 1.1em; /* Etwas größer für Lesbarkeit, anpassbar */
    line-height: 1.7;
}
.block_teaser .teaser > *:first-child {
    margin-top: 0; /* Verhindert doppelten Abstand, wenn WYSIWYG <p> einfügt */
}
.block_teaser .teaser > *:last-child {
    margin-bottom: 0;
}


/* Innerer Container für Bild und Text */
.bd-text-image__inner {
    display: flex;
    flex-wrap: wrap; /* Wichtig für Responsive Verhalten, falls Spalten nicht passen */
}

/* Bedingter Margin-Top, wenn kein Teaser-Bereich vorhanden ist */
.bd-text-image__inner.no-margin-top {
    /* Diese Klasse wird hinzugefügt, WENN der Teaser-Bereich VORHANDEN ist.
       Die Logik im PHP war: wenn Teaser da, dann no-margin-top für __inner.
       Normalerweise würde man die Klasse hinzufügen, wenn der Teaser *fehlt*,
       um den Abstand zur Section-Oberkante zu reduzieren.
       Überprüfe die PHP-Logik, ob dies das gewünschte Verhalten ist.
       Wenn es so ist, dass bei vorhandenem Teaser der Abstand oben weg soll: */
    margin-top: 0;
    /* Wenn es andersrum sein soll (kein Teaser -> kein margin-top für inner):
       Dann müsste die Klasse im PHP anders gesetzt werden und das CSS hier
       z.B. einen Standard margin-top für __inner definieren, der dann
       durch .no-margin-top (oder eine andere Klasse) aufgehoben wird.
    */
}

/* Vertikale Ausrichtung */
.bd-text-image.align-top .bd-text-image__inner {
    align-items: flex-start;
}
.bd-text-image.align-center .bd-text-image__inner {
    align-items: center;
}
.bd-text-image.align-bottom .bd-text-image__inner {
    align-items: flex-end;
}

/* Korrektur für interne Margins bei vertikaler Zentrierung/Unten-Ausrichtung */
.bd-text-image.align-center .bd-text-image__content > *:first-child,
.bd-text-image.align-bottom .bd-text-image__content > *:first-child {
    margin-top: 0;
}

/* Optional: Wenn auch der untere Margin bei align-center stört */
/*
.bd-text-image.align-center .bd-text-image__content > *:last-child {
    margin-bottom: 0;
}
*/

/* Gap zwischen Bild und Text */
/* Verwendung von CSS Custom Properties für Gap für mehr Flexibilität */
.bd-text-image {
    --bd-text-image-gap: 2rem; /* Standard-Gap (entspricht Medium) */
}
.bd-text-image.gap-small {
    --bd-text-image-gap: 1rem;
}
.bd-text-image.gap-medium {
    --bd-text-image-gap: 2rem;
}
.bd-text-image.gap-large {
    --bd-text-image-gap: 3rem;
}
.bd-text-image__inner {
    gap: var(--bd-text-image-gap);
}


/* Bild-Bereich */
figure.bd-text-image__media {
    margin: 0; /* Entfernt Browser-Standard-Margins von figure */
    /* Die Breite wird durch die col-* Klassen aus dem PHP gesteuert */
}

.bd-text-image__media img,
.bd-text-image__media picture { /* picture auch einbeziehen */
    max-width: 100%;
    height: auto;
    display: block; /* Verhindert unerwünschten Leerraum unter dem Bild */
    /* object-fit: cover; */ /* Optional, falls Bilder beschnitten werden sollen, um einheitliche Höhe zu erzielen */
    /* aspect-ratio: 16/9; */ /* Optional, um ein festes Seitenverhältnis zu erzwingen */
}

/* Text-Inhalt-Bereich */
.bd-text-image__content {
    line-height: 1.6;
    /* Die Breite wird durch die col-* Klassen aus dem PHP gesteuert */
}

/* Optional: Um sicherzustellen, dass der Textinhalt die volle Höhe des Flex-Items nutzt,
   wenn z.B. Hintergrundfarben oder Rahmen auf .bd-text-image__content liegen. */
/*
.bd-text-image.align-center .bd-text-image__content,
.bd-text-image.align-bottom .bd-text-image__content {
    display: flex;
    flex-direction: column;
    justify-content: inherit; // Erbt die Ausrichtung von .bd-text-image__inner
}
*/


/* Responsives Verhalten */
@media (max-width: 768px) {
    .bd-text-image__inner {
        flex-direction: column;
        /* Gap wird auf Mobilgeräten separat gesteuert, falls gewünscht,
           oder erbt von oben, wenn die var(--bd-text-image-gap) Logik beibehalten wird.
           Hier wird der Gap explizit für Mobile überschrieben, wie in deinem Beispiel.
        */
        gap: 1.5rem !important; /* !important beibehalten, wenn es spezifisch sein muss */
    }

    .bd-text-image__media,
    .bd-text-image__content {
        width: 100% !important; /* Volle Breite auf kleinen Bildschirmen */
        /* Die col-* Klassen werden hier effektiv überschrieben */
    }

    /* Auf Mobilgeräten ist die vertikale Ausrichtung oft nicht mehr so relevant,
       da die Elemente untereinander stehen. Ggf. Standard-Ausrichtung (flex-start).
       Die Margin-Korrekturen könnten hier weniger kritisch sein, aber schaden auch nicht.
    */
    .bd-text-image.align-center .bd-text-image__content > *:first-child,
    .bd-text-image.align-bottom .bd-text-image__content > *:first-child {
        /* Bleibt aktiv, kann aber bei flex-direction: column anders wirken */
        /* Ggf. für Mobile anpassen oder entfernen, wenn es Probleme macht */
    }
}