@layer responsive {
    /**
     * Dieses Stylesheet enthält spezielle Angaben für sehr breite Bildschirme
     * (mindestens 1920 Pixel, entspricht 120rem). Es wird im HTML mit dem Media-Query
     * media="screen and (width >= 119.5rem)" eingebunden. Somit greift es also schon
     * etwas früher - in Edge ist das nötig, weil sonst auch bei 1920px Bildschirmbreite
     * diese Styles hier noch nicht angewendet werden. Das Stylesheet überschreibt für
     * diese Bildschirme Angaben aus dem Standard-Stylesheet style.css.
     */
    @media screen and (width >= 119.5rem) {

        :root {
            /* Die Abstände zwischen den Spalten/Zeilen etwas vergrößern */
            --column-gap: var(--space-6xl);
            --row-gap: var(--space-5xl);

            /* Die gesamte Seite etwas größer darstellen */
            --font-size-body: 1.8rem;
            --font-size-homepage-link-title: 4.0rem;
            --font-size-homepage-link-subtitle: 2.0rem;
            --font-size-main-nav: 1.8rem;
            --font-size-search-input: 1.8rem;
            --font-size-search-hint: 1.5rem;
            --font-size-menu-item: 1.8rem;
            --font-size-side-nav: 1.8rem;
        }

        .page {
            /* 15.46rem entspricht der Höhe, die .main-nav-container in der breiten Ansicht benötigt, wenn alle Paddings sichtbar sind (also bevor .main-nav-container stuck wird). */
            grid-template-rows: auto 15.46rem 1fr auto;
        }
        
        header .header-image {
            padding-top: var(--space-5xl);
        }

        header .branding {
            /* Dieses padding-top muss dem padding-top von .main-nav-container entsprechen, damit die Abstände zwischen den Elementen gleich sind */
            padding-top: var(--space-lg);
        }
        /* Wenn das Header-Bild deaktiviert ist, soll das Padding oberhalb von .homepage-link genau so hoch sein wie sonst das Padding über .header-image wäre,
           damit die Abstände im Header weiter harmonisch bleiben (über .homepage-link genau so hoch wie unter .main-nav-container). */
        .flex-container:not(:has(> .header-image)) .branding {
            padding-top: var(--space-0);
        }

        header .homepage-link {
            padding-top: var(--space-3xl);
            padding-bottom: var(--space-3xl);
        }
        .flex-container:not(:has(> .header-image)) .homepage-link {
            padding-top: var(--space-5xl);
        }

        .header-actions {
            /* Die Buttons sollen etwas weniger hoch sein als die Leiste mit dem Hauptmenü */
            --header-action-height: 6.0rem;
        }
        .flex-container:not(:has(> .header-image)) .header-actions {
            margin-top: var(--space-2xl);
        }

        .cta {
            padding-inline: calc(1.2 * var(--space-2xl));
        }

        .main-nav-container {
            padding-top: var(--space-lg);
            padding-bottom: var(--space-5xl);

            column-gap: var(--space-3xl);
        }
        .main-nav-container.stuck {
            padding-bottom: var(--space-lg);
        }

        body:has(.main-nav) {
            --main-nav-width: 105rem;
        }
        /* Das Hauptmenü je nach Anzahl der Menüpunkte auf Ebene 1 dynamisch breiter machen.
           Bei 6 oder mehr Elementen */
        body:has(.main-nav:has(.navbar-nav > ul > li:nth-child(6))) {
            --main-nav-width: 120rem;
        }
        /* Bei 9 oder mehr Elementen */
        body:has(.main-nav:has(.navbar-nav > ul > li:nth-child(9))) {
            --main-nav-width: 135rem;
        }

        .main-nav .sub li a {
            padding-inline: var(--space-2xl);
        }

        main h2 {
            margin-top: calc(1.4 * var(--space-6xl));
        }
        main .back-to-top {
            min-width: 7.1em;
        }
        main input[type="button"], main input[type="submit"] {
            min-width: 7.1em;
            padding-inline: var(--space-2xl);
        }

        footer {
            padding-top: var(--space-6xl);
            padding-bottom: var(--space-6xl);
            padding-inline: calc( 2 * var(--space-5xl));
        }
        footer .footer-container {
            justify-content: space-evenly;
            margin-bottom: var(--space-2xl);
        }
        footer .footer-column {
            /* Jeder Block bekommt so viel Platz, wie er braucht - ermöglicht Benutzung von justify-content: space-evenly; */
            flex: 0;
            min-width: 25%;
        }
        footer h2 {
            margin-top: var(--space-3xl);
        }
        footer .footer-bottom p {
            margin-bottom: var(--space-3xl);
        }

        .search-overlay .search-form__icon {
            margin-bottom: 4px;
        }
    }
}