/* hero-gross.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   „Großer Einstieg": Der Hero füllt die ganze sichtbare Höhe. Links stehen nur Überschrift, Untertitel und die
   beiden Knöpfe, rechts das Foto, deutlich größer. Alles Weitere (die drei Service-Karten usw.) beginnt erst
   UNTER dem Hero und ist beim Laden nicht zu sehen. Die Karten liegen schon im Markup außerhalb des Heros
   (<section class="service-section">, nach </section class="hero">) — es wird nur der Hero höher.
   Wirkt NUR mit <html data-hero="gross">. Navbar ist 70 px hoch (css/navbar.css, body-padding-top).
   Gesehen im Mockup: mockups/mockup-kirsch-gross.html, mockup-sw-gross.html */

:root[data-hero="gross"] .hero {
    min-height: calc(100vh - 70px);
    align-content: center;
    align-items: center;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}
:root[data-hero="gross"] .hero-photo {
    width: auto;
    height: min(76vh, 720px);
    aspect-ratio: 4 / 5;
}

@media (max-width: 760px) {
    :root[data-hero="gross"] .hero { min-height: 0; }
    :root[data-hero="gross"] .hero-photo { width: 100%; height: auto; }
}