/* ============================================
   BILDFLÄCHE (CType hansmeier_bildflaeche)
   Geladen per f:asset.css aus Templates/Content/Bildflaeche.html - nur auf Seiten mit diesem Element.
   Werte je Element als CSS-Variablen im style-Attribut (BildflaecheProcessor: geprüft, Vererbung aufgelöst):
     --bf-v-<stufe>  Versatz oben (margin-top, rem; negativ = ragt nach oben)
     --bf-u-<stufe>  Verlängerung nach unten (rem)
     --bf-g-<stufe>  1 = bis zum Ende der Rasterzeile füllen, 0 = nicht
     --bf-x-<stufe>  Bildausschnitt waagerecht
     --bf-format     Breite / Höhe des Fotos = Mindestformat der Fläche
   Stufen (min-width): 0, 768, 992, 1200, 1400, 1600, 1920.
   Höhe = Seitenverhältnis (::before) + Verlängerung; beim Füllen wird die Rasterspalte zur senkrechten
   Flexbox, .row streckt sie auf die Zeilenhöhe und die Fläche wächst bis unten. Ohne :has() oder außerhalb
   einer .row bleibt es beim eigenen Format (plus Verlängerung).
   ============================================ */
.bildflaeche {
    position: relative;
    margin-top: var(--bf-v-0, 0rem);
    padding-bottom: var(--bf-u-0, 0rem);
    flex: var(--bf-g-0, 0) 0 auto;
}

.bildflaeche::before {
    content: "";
    display: block;
    aspect-ratio: var(--bf-format, 3 / 2);
}

.bildflaeche > picture {
    position: absolute;
    inset: 0;
    display: block;
}

.bildflaeche__bild {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--bf-x-0, 50%) 50%;
}

/* Eigene Regel: Browser ohne :has() verwerfen nur diese */
.row > :has(> .bildflaeche--fuellen) {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .bildflaeche { margin-top: var(--bf-v-768, 0rem); padding-bottom: var(--bf-u-768, 0rem); flex-grow: var(--bf-g-768, 0); }
    .bildflaeche__bild { object-position: var(--bf-x-768, 50%) 50%; }
}

@media (min-width: 992px) {
    .bildflaeche { margin-top: var(--bf-v-992, 0rem); padding-bottom: var(--bf-u-992, 0rem); flex-grow: var(--bf-g-992, 0); }
    .bildflaeche__bild { object-position: var(--bf-x-992, 50%) 50%; }
}

@media (min-width: 1200px) {
    .bildflaeche { margin-top: var(--bf-v-1200, 0rem); padding-bottom: var(--bf-u-1200, 0rem); flex-grow: var(--bf-g-1200, 0); }
    .bildflaeche__bild { object-position: var(--bf-x-1200, 50%) 50%; }
}

@media (min-width: 1400px) {
    .bildflaeche { margin-top: var(--bf-v-1400, 0rem); padding-bottom: var(--bf-u-1400, 0rem); flex-grow: var(--bf-g-1400, 0); }
    .bildflaeche__bild { object-position: var(--bf-x-1400, 50%) 50%; }
}

@media (min-width: 1600px) {
    .bildflaeche { margin-top: var(--bf-v-1600, 0rem); padding-bottom: var(--bf-u-1600, 0rem); flex-grow: var(--bf-g-1600, 0); }
    .bildflaeche__bild { object-position: var(--bf-x-1600, 50%) 50%; }
}

@media (min-width: 1920px) {
    .bildflaeche { margin-top: var(--bf-v-1920, 0rem); padding-bottom: var(--bf-u-1920, 0rem); flex-grow: var(--bf-g-1920, 0); }
    .bildflaeche__bild { object-position: var(--bf-x-1920, 50%) 50%; }
}

@media print {
    .bildflaeche {
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        break-inside: avoid;
    }
}