/* MHL-DESKTOP-GLOBAL-LAYOUT-FIX-V4
 *
 * Letzte CSS-Kaskadenebene für den Desktop.
 * Die bisherige mobile und Tablet-CSS-Datei wird nicht verändert.
 */

@media screen
    and (min-width: 800px)
    and (min-device-width: 1280px)
    and (hover: hover) {

    /*
     * Fallback auf den normalen Dokumentfluss, wenn der vorhandene
     * Desktop-Wrapper bei einem schmaleren Fenster nicht aktiv ist.
     *
     * Der feste Header ist 68 px hoch.
     * 128 px Seitenanfang minus 68 px Header = 60 px Abstand.
     */
    html body[class]:not(.mhl-desktop-scroll-active) {
        padding-top: 128px !important;
    }

    html body[class]:not(.mhl-desktop-scroll-active)
    main#content.site-main {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        transform: none !important;
    }

    html.mhl-news-header-spacing body[class]:not(.mhl-desktop-scroll-active)
    main#content.site-main {
        inset: auto !important;
        top: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html body[class]:not(.mhl-desktop-scroll-active)
    main#content.site-main > :first-child {
        margin-block-start: 0 !important;
    }

    /*
     * Footer ohne Wrapper: wieder echte Höhe im Dokumentfluss.
     * Die Dekoration und der vorhandene Footer-Inhalt bleiben erhalten.
     */
    html body[class]:not(.mhl-desktop-scroll-active)
    > footer.site-footer {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 116px !important;
        max-height: none !important;
        margin-top: 2rem !important;
        padding: 0 !important;
        overflow: visible !important;
        flex: 0 0 116px !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }

    html body:has(.mhl-login-background-v1)[class]:not(.mhl-desktop-scroll-active)
    > footer.site-footer {
        min-height: 96px !important;
        flex: 0 0 96px !important;
        margin-top: 0 !important;
    }

    /*
     * Dropdowns: Die bestehenden globalen Sichtbarkeitsregeln dürfen
     * geschlossene Menüs nicht mehr anzeigen.
     */
    html body header.site-header.mhl-transparent-menu-final-v1[data-site-header][data-mhl-r180-header]
    nav#site-nav.site-nav
    > .nav-dropdown:not(.open):not(:hover):not(:focus-within)
    > .nav-dropdown__toggle[aria-expanded="false"]
    + .nav-dropdown__menu:not([hidden]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /*
     * Offene Menüs bleiben per Klick, Hover oder Tastaturfokus sichtbar.
     * Die Breite wird auf kleinere Desktopfenster begrenzt.
     */
    html body header.site-header.mhl-transparent-menu-final-v1[data-site-header][data-mhl-r180-header]
    nav#site-nav.site-nav
    > .nav-dropdown.open > .nav-dropdown__menu:not([hidden]),

    html body header.site-header.mhl-transparent-menu-final-v1[data-site-header][data-mhl-r180-header]
    nav#site-nav.site-nav
    > .nav-dropdown:hover > .nav-dropdown__menu:not([hidden]),

    html body header.site-header.mhl-transparent-menu-final-v1[data-site-header][data-mhl-r180-header]
    nav#site-nav.site-nav
    > .nav-dropdown:focus-within > .nav-dropdown__menu:not([hidden]),

    html body header.site-header.mhl-transparent-menu-final-v1[data-site-header][data-mhl-r180-header]
    nav#site-nav.site-nav
    > .nav-dropdown > .nav-dropdown__toggle[aria-expanded="true"]
    + .nav-dropdown__menu:not([hidden]) {
        display: grid !important;
        position: absolute !important;
        top: 56px !important;
        left: 0 !important;
        right: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(430px, calc(100vw - 24px)) !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10002 !important;
    }
}

/*
 * Regeln für den vorhandenen Desktop-Scroll-Wrapper.
 * Dieser Block nutzt exakt dessen bestehendes Breakpoint-Merkmal.
 */
@media screen
    and (min-width: 1280px)
    and (min-device-width: 1280px)
    and (hover: hover) {

    html body #mhl-desktop-scroll-viewport[data-mhl-desktop-scroll-viewport] {
        display: block !important;
        position: fixed !important;
        inset: 68px 0 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body #mhl-desktop-scroll-viewport > main#content.site-main,
    html.mhl-news-header-spacing body #mhl-desktop-scroll-viewport
    > main#content.site-main {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        margin-top: 0 !important;
        padding-top: 60px !important;
        transform: none !important;
    }

    html body #mhl-desktop-scroll-viewport
    > main#content.site-main > :first-child {
        margin-block-start: 0 !important;
    }

    /*
     * Reale Höhe für den Footer im Wrapper.
     * Die vorhandenen V2-Regeln sahen hier bereits 270 px vor.
     */
    html body #mhl-desktop-scroll-viewport > footer.site-footer {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 270px !important;
        max-height: none !important;
        margin-top: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html body:has(.mhl-login-background-v1)
    #mhl-desktop-scroll-viewport > footer.site-footer {
        min-height: 96px !important;
        flex: 0 0 96px !important;
    }
}