.block-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 500px;
    display: flex;
    align-items: center;
    text-align: center;
}
/* Hero hat sein eigenes vertikales Spacing */
main > section.block-hero { padding: 80px 0 !important; }
.block-hero .hero-content-inner {
    background: rgba(255, 255, 255, 0.92);
    padding: 50px;
    border-radius: var(--radius-lg);
    max-width: 760px;
    margin: 0 auto;
}
.block-hero h1 { margin-bottom: 16px; color: var(--brand-primary-dark); }
.block-hero .hero-text { margin-bottom: 24px; font-size: 1.1rem; color: var(--text-medium); }

/* Variante: links ausgerichtet (über Datenfeld layout='left' steuerbar) */
.block-hero.layout-left { text-align: left; }
.block-hero.layout-left .hero-content-inner { margin: 0; }

@media (max-width: 768px) {
    .block-hero { min-height: 400px; padding: 40px 0; }
    .block-hero .hero-content-inner { padding: 30px 20px; }
}

/* ============================================================
   Bild-only-Hero am Desktop/Tablet (>768px): volle Breite.
   Das Bild füllt den Hero komplett (object-fit: cover), der
   sichtbare Ausschnitt wird über die Block-Einstellung
   'Bild-Ausrichtung' (Oben/Mitte/Unten) gesteuert, die
   render.php als --hero-pos Custom Property durchreicht.
   !important ist hier nötig, um die mobilen Inline-Styles
   (height:100%;width:auto;zentriert) gezielt zu überschreiben —
   Stylesheet-!important schlägt Inline-Styles ohne !important.
   ============================================================ */
@media (min-width: 769px) {
    /* Hero-Höhe folgt dem Bild-Seitenverhältnis (volle Breite, volles
       Bild sichtbar). Deckel bei 88vh: wird er erreicht, beschneidet
       object-fit:cover vertikal gemäß Bild-Ausrichtung (--hero-pos). */
    .block-hero.hero-image-only {
        /* width:100% ist Pflicht: ohne explizite Breite überträgt der
           Browser bei aspect-ratio + max-height die gedeckelte Höhe auf
           die Breite (transferred size) → Section wird schmaler als der
           Viewport und klebt links. Mit fixer Breite berechnet
           aspect-ratio nur noch die Höhe, max-height deckelt sauber. */
        width: 100%;
        aspect-ratio: var(--hero-ar, 21 / 9);
        max-height: 75vh;
        /* Floor statt 0: schützt vor Kollaps, falls aspect-ratio
           nicht greift (sehr alte Browser, Bildmaße nicht ermittelbar) */
        min-height: 320px !important;
        height: auto;
    }
    .block-hero.hero-image-only > img {
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover;
        object-position: var(--hero-pos, center top);
    }
}