/*
 * MHL V9 – DESKTOP AUDIT REPAIR
 *
 * Die EXISTIERENDE Service-Panel-Komponente #service-panel wird als
 * einziges Menü für Entdecken, Community und Küste & Planung benutzt.
 *
 * Das vorhandene Service-CSS bestimmt Farben, Schriften, Kachelrahmen
 * und Raster. Keine Inline-Styles aus JavaScript.
 * Nur Desktop mit echter Maus.
 */

@media screen and (min-width: 800px) and (hover: hover) and (pointer: fine) {

    /*
     * Native Hover-/Klick-Dropdowns dauerhaft ausblenden.
     * Der zusätzliche html.mhl-nav-original-service-panel-v9-Klassenselektor
     * ist spezifischer als die bestehenden display:grid !important-Regeln
     * aus mhl-transparent-menu-final-v1.css und
     * mhl-desktop-global-layout-fix-v4.css.
     */
    html.mhl-nav-original-service-panel-v9
    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__menu:not([hidden]),

    html.mhl-nav-original-service-panel-v9
    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.mhl-nav-original-service-panel-v9
    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.mhl-nav-original-service-panel-v9
    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.mhl-nav-original-service-panel-v9
    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: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /*
     * Das tatsächliche Original-Service-Panel wird in den angeklickten
     * nav-dropdown-Container verschoben.
     *
     * Die Position ist damit relativ zum Button, nicht per Inline-Style
     * relativ zum Viewport. Das verhindert Positionssprünge.
     */
    html.mhl-nav-original-service-panel-v9
    body header.site-header.mhl-transparent-menu-final-v1[data-site-header][data-mhl-r180-header]
    nav#site-nav.site-nav > .nav-dropdown > #service-panel.mhl-nav-panel-active {
        display: grid !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;

        /* Abmessungen des vorhandenen Service-Menüs beibehalten. */
        width: min(720px, calc(100vw - 1.2rem)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1.2rem) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(78dvh, 760px) !important;

        box-sizing: border-box !important;
        margin: 0 !important;
        overflow: hidden !important;
        grid-template-rows: auto minmax(0, 1fr) !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 10200 !important;
        isolation: isolate !important;

        /* Beim Öffnen und Wechseln keine Transition, keine Animation. */
        animation: none !important;
        transition: none !important;
    }

    html.mhl-nav-original-service-panel-v9
    #service-panel.mhl-nav-panel-active .top-panel__head {
        display: flex !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html.mhl-nav-original-service-panel-v9
    #service-panel.mhl-nav-panel-active .service-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(50px, auto) !important;
        gap: .55rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /*
     * Die Links verwenden die tatsächlichen Original-Service-Kachelklassen.
     * Nur Breite und Textumbruch werden abgesichert.
     */
    html.mhl-nav-original-service-panel-v9
    #service-panel.mhl-nav-panel-active .service-grid > a {
        display: flex !important;
        align-items: center !important;
        gap: .55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 50px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        transform: none !important;
    }
}

/* MHL-NAV-DESKTOP-KACHEL-BREITE-V1
 * Ausschließlich die horizontale Menü- und Kachelbreite reduzieren.
 * Originalfarben, Schrift, Kachelhöhe, Innenabstände und Hover-Stil bleiben erhalten.
 */
@media screen and (min-width: 800px) and (hover: hover) and (pointer: fine) {
    html.mhl-nav-original-service-panel-v9
    body header.site-header.mhl-transparent-menu-final-v1[data-site-header][data-mhl-r180-header]
    nav#site-nav.site-nav > .nav-dropdown > #service-panel.mhl-nav-panel-active {
        width: min(620px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
}