/**
 * Telefon im Querformat wie im Hochformat behandeln.
 * ---------------------------------------------------------------------------
 * Das Problem: Elementor entscheidet nur nach BREITE. "Mobil" endet bei 767px.
 * Ein Telefon im Querformat ist aber 844-932px breit (iPhone 14: 844,
 * iPhone 14 Pro Max: 932, Pixel 7: 915) und faellt damit in Elementors
 * TABLET-Bereich. Folge: Das NF-Digital-Mobilmenue traegt
 * .elementor-hidden-tablet und verschwindet, stattdessen erscheint die
 * AKM-Navigation - die bei dieser Breite nicht hinpasst, ueber den Rand
 * laeuft und die Seite waagerecht aufreisst.
 *
 * Die Loesung: ueber die HOEHE unterscheiden. Im Querformat haben Telefone
 * hoechstens rund 430px Hoehe, Tablets dagegen mindestens 768px
 * (iPad mini). 500px trennt beide sauber, ohne an den Breakpoints des
 * uebrigen Designs zu ruehren.
 */
@media screen and (orientation: landscape) and (max-height: 500px) {

    /* 1. Mobilmenue wieder einblenden.
       Zwei Klassen im Selektor schlagen Elementors einklassiges
       .elementor-hidden-tablet { display: none !important; }. */
    .elementor-widget-nfds-mobile-menu.elementor-hidden-tablet,
    .elementor-widget-nfds-mobile-menu.elementor-hidden-desktop {
        display: block !important;
    }

    /* 2. AKM-Navigation ausblenden - samt ihrem Container, damit keine
       leere Zeile mit Innenabstand stehen bleibt. */
    .elementor-widget-akm-navigation,
    .elementor-element:has(> .elementor-widget-akm-navigation) {
        display: none !important;
    }

    /* 3. Waagerechtes Scrollen unterbinden. Bewusst nur hier und nicht
       global - ein generelles overflow-x:hidden bricht klebende
       Kopfzeilen. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Die Hoehe des ausgeklappten Panels regelt das Widget selbst korrekt
       (gemessen: 344px bei 430px Schirm, mit Scrollbalken) - hier bewusst
       keine eigene Regel, die damit kollidieren koennte. */
}