/*  =========================================================
    ORTMANN MENÜ – menu.css

    Breakpoint: 1450px (muss mit DESKTOP_QUERY in menu.js übereinstimmen)
      bis 1449px   Mobile-Menü (Hamburger, Akkordeon)
      ab 1450px    Desktop-Menü (Mega-Menü)

    Untermenüs werden ausschließlich über den Zustand des
    Toggle-Buttons gesteuert:
      .__submenu-toggle[aria-expanded="true"] + .__submenu
    Pro Punkt mit Untermenü gibt es Link (.__link) und Button (.__submenu-toggle):
      Mobile   Link sichtbar (führt zur Seite), Button = nur Pfeil
      Desktop  Link ausgeblendet, Button zeigt Text + Pfeil (ein Element)

    Inhalt:
      1. Variablen
      2. Allgemein
      3. Mobile (bis 1449px)
      4. Mobile klein (bis 989px)
      5. Desktop (ab 1450px)
      6. „Übersicht“-Eintrag in Untermenüs
      7. Animationen
      8. Reduzierte Bewegung
    ========================================================= */


/*  =========================================================
    1. VARIABLEN
    ========================================================= */
:root{
    /* Größe der Ausklapp-Pfeile relativ zur Schrift des Menüpunkts.
       1em ≈ volle Schrifthöhe, .75em ≈ Höhe der Großbuchstaben */
    --or-submenu-icon-size: 1.1em;

    /* Farbe des aktiven Menüpunkts. Gold auf Weiß erreicht nur ca. 4,2:1;
       für WCAG AA (4,5:1) auf weißem Grund z. B. #7A6A47 verwenden */
    --or-menu-active-color: var(--or-gold);

    /* Öffnungs-Animation der Untermenüs */
    --or-submenu-duration: .3s;
    --or-submenu-easing: cubic-bezier(.22, .61, .36, 1); /* sanftes Ausrollen */
}


/*  =========================================================
    2. ALLGEMEIN
    ========================================================= */
/* Enfold-Hauptmenü ausblenden (wird zusätzlich per JS entfernt) */
#header_main .inner-container > nav.main_menu{display: none !important;}

/* Button-Reset für Trigger, Toggles und Schließen-Button */
#top #mobile-menu-trigger,
#top #header-navigation .__submenu-toggle,
#top #header-navigation .__submenu-close{
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

/* Listen-Reset */
#top #header-navigation ul{margin: 0; padding: 0; list-style: none;}
#top #header-navigation li{margin: 0; padding: 0;}
#top #header-navigation a{text-decoration: none;}

/* Aktiver Menüpunkt */
#top #header-navigation > ul > li.current-menu-item > a,
#top #header-navigation > ul > li.current-menu-ancestor > a{color: var(--or-menu-active-color);}

/* Toggle-Button: Pfeilgröße folgt der Schrift des Menüpunkts (font-size sitzt am <li>) */
#top #header-navigation .__submenu-toggle{
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 24px;  /* Mindest-Klickfläche nach WCAG 2.5.8 */
    min-height: 24px;
}
#top #header-navigation .__submenu-toggle::after{
    content: '\e877';         /* Pfeil nach unten */
    content: '\e877' / '';    /* leerer Alternativtext: Icon wird nicht vorgelesen */
    font-family: 'entypo-fontello';
    font-size: var(--or-submenu-icon-size);
    font-weight: normal;
    line-height: 1;
    transition: rotate .2s ease;
}

/* Button-Beschriftung: standardmäßig (Mobile) nur für Screenreader, damit der Pfeil-Button
   „Untermenü <Titel>“ heißt. Auf Desktop wird der Text sichtbar (siehe unten). */
#top #header-navigation .__toggle-prefix,
#top #header-navigation .__toggle-text{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/*  =========================================================
    3. MOBILE (bis 1449px)
    ========================================================= */
@media only screen and (max-width: 1449px){

    /* ---------------------------------------------------------
       Hamburger-Trigger
       --------------------------------------------------------- */
    #top #mobile-menu-trigger{
        position: absolute;
        top: 50%;
        right: 0;
        translate: 0 -50%;
        width: 40px;
        height: 24px;
    }

    /* Drei Linien */
    #top #mobile-menu-trigger > span:not(.mobile-menu-close-icon){
        position: absolute;
        left: 50%;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--or-gold);
        translate: -50% 0;
        transition: opacity .2s ease;
    }
    #top #mobile-menu-trigger > span:nth-child(1){top: 0;}
    #top #mobile-menu-trigger > span:nth-child(2){top: calc(50% - 1px); overflow: hidden; text-indent: -10000px;} /* Text „Menü“ nur für Screenreader-Fallback */
    #top #mobile-menu-trigger > span:nth-child(3){bottom: 0;}

    /* Schließen-Icon: nur bei geöffnetem Menü, Linien werden ausgeblendet */
    #top #mobile-menu-trigger > .mobile-menu-close-icon{display: none;}
    html.mobile-menu-active #top #mobile-menu-trigger > .mobile-menu-close-icon{
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        translate: -50% -50%;
        font-size: 32px;
        line-height: 1;
    }
    html.mobile-menu-active #top #mobile-menu-trigger > span:not(.mobile-menu-close-icon){opacity: 0;}

    /* ---------------------------------------------------------
       Menü-Panel
       --------------------------------------------------------- */
    #top #header-navigation{
        position: fixed;
        top: var(--or-header-bottom, var(--or-header-height-mobile)); /* Unterkante des Headers, wird per JS gesetzt */
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        padding: 2rem 5% 4rem;
        background: var(--or-white);
        color: var(--or-black);
        line-height: 1.6;
        border-top: 1px solid var(--or-gold);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    html.mobile-menu-active #top #header-navigation{display: block; animation: or-slide-in .2s ease;}

    /* Seite dahinter nicht scrollen, Scrollposition bleibt erhalten */
    html.mobile-menu-active,
    html.mobile-menu-active body{overflow: hidden;}

    /* ---------------------------------------------------------
       Menüpunkte mit Untermenü: Link + Toggle in einer Zeile,
       Untermenü darunter (Akkordeon)
       --------------------------------------------------------- */
    #top #header-navigation li.menu-item-has-children{display: flex; flex-wrap: wrap; align-items: center;}
    #top #header-navigation li.menu-item-has-children > a{flex: 1 1 0; min-width: 0;}
    #top #header-navigation li.menu-item-has-children > .__submenu{flex: 0 0 100%;}

    /* Toggle: große Touch-Fläche, Pfeil nach rechts, dreht beim Öffnen nach unten */
    #top #header-navigation .__submenu-toggle{width: 44px; height: 44px;}
    #top #header-navigation .__submenu-toggle::after{content: '\e87d'; content: '\e87d' / '';}
    #top #header-navigation .__submenu-toggle[aria-expanded="true"]::after{rotate: 90deg;}

    /* Untermenüs standardmäßig zu, nur Beschreibung und Schließen-Button sind Desktop-Elemente */
    #top #header-navigation .__submenu,
    #top #header-navigation .__description,
    #top #header-navigation .__submenu-close{display: none;}
    #top #header-navigation .__submenu-toggle[aria-expanded="true"] + .__submenu{display: block; animation: or-soft-open var(--or-submenu-duration) var(--or-submenu-easing);}

    /* ---------------------------------------------------------
       Ebene 1
       --------------------------------------------------------- */
    #top #header-navigation > ul#header-menu-ul > li{font-size: var(--step-2);}
    #top #header-navigation > ul#header-menu-ul > li > a{display: block; padding: .4em 0; color: var(--or-black);}

    /* ---------------------------------------------------------
       Ebene 2
       --------------------------------------------------------- */
    #top #header-navigation .__submenu--level-1 > ul{margin-left: 2rem; padding-bottom: 1em;}
    #top #header-navigation .__submenu--level-1 > ul > li{font-size: var(--step-1);}
    #top #header-navigation .__submenu--level-1 > ul > li > a{display: block; padding: .5em 0; color: var(--or-black);}

    /* ---------------------------------------------------------
       Ebene 3
       --------------------------------------------------------- */
    #top #header-navigation .__submenu--level-2 > ul{margin-left: 2rem; padding-bottom: .5em;}
    #top #header-navigation .__submenu--level-2 > ul > li{font-size: var(--step-0);}
    #top #header-navigation .__submenu--level-2 > ul > li > a{display: block; padding: .4em 0; color: var(--or-black);}

    /* ---------------------------------------------------------
       Zweitmenü: normale vertikale Liste
       --------------------------------------------------------- */
    #top #header-navigation > .menu-divider{display: none;}
    #top #header-navigation > ul#header-secondary-menu > li > a{
        display: block;
        padding: .6rem 0;
        color: inherit;
        font-size: var(--step-2);
    }

    /* ---------------------------------------------------------
       Header: Claim + Telefon-Button
       --------------------------------------------------------- */
    #top #header .__claim_plus_phone_button{
        position: absolute;
        right: 80px;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 2em;
        line-height: 1.25;
    }

    /* ---------------------------------------------------------
       Kleines Logo beim Scrollen und bei geöffnetem Menü
       --------------------------------------------------------- */
    #top.__header_scrolled_mobile #header .logo a,
    html.mobile-menu-active #top #header .logo a{position: relative;}

    #top.__header_scrolled_mobile #header .logo a svg,
    html.mobile-menu-active #top #header .logo a svg{opacity: 0 !important; transition: opacity .05s ease;}

    #top.__header_scrolled_mobile #header .logo a::after,
    html.mobile-menu-active #top #header .logo a::after{
        content: "";
        position: absolute;
        inset: 10px;
        z-index: 10;
        background: url("/wp-content/uploads/2026/09/logo-ortmann-small.svg") left center / contain no-repeat;
        pointer-events: none;
    }
}


/*  =========================================================
    4. MOBILE KLEIN (bis 989px)
    ========================================================= */
@media only screen and (max-width: 989px){

    /* Claim + Telefon-Button ausblenden (Telefon ist über die FAB-Leiste erreichbar) */
    #top #header .__claim_plus_phone_button{display: none !important;}
}


/*  =========================================================
    5. DESKTOP (ab 1450px)
    ========================================================= */
@media only screen and (min-width: 1450px){

    /* Hamburger-Trigger ausblenden */
    #top #mobile-menu-trigger{display: none;}

    /* Link ausblenden (display:none = auch für Screenreader und Tastatur weg),
       der Button trägt Text und Pfeil. Spezifität über den Ebenen-Regeln unten. */
    #top #header-navigation li.menu-item-has-children > a.__link{display: none;}

    /* Button: Text sichtbar, Präfix „Untermenü“ weg (sonst stünde es im Namen) */
    #top #header-navigation .__toggle-prefix{display: none;}
    #top #header-navigation .__toggle-text{
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    /* ---------------------------------------------------------
       Navigation: Hauptmenü | Trennlinie | Zweitmenü
       --------------------------------------------------------- */
    #top #header-navigation{
        display: flex;
        align-self: end;
        align-items: center;
        gap: 2rem;
        height: auto;
        margin-left: 20px;
        padding-bottom: 15px;
        line-height: 1.6;
        transition: padding-bottom .2s ease;
    }
    #top.__header_scrolled #header-navigation{padding-bottom: 10px;}

    /* ---------------------------------------------------------
       Ebene 1
       --------------------------------------------------------- */
    #top #header-navigation > ul#header-menu-ul{display: flex; gap: 2rem; height: 100%;}
    #top #header-navigation > ul#header-menu-ul > li{display: flex; align-items: center; gap: .2em; height: 100%;}
    #top #header-navigation > ul#header-menu-ul > li > a{padding: 0; font-weight: 400;}

    /* Button = Text + Pfeil in einem Element */
    #top #header-navigation .__submenu-toggle--level-1{
        gap: .2em;
        min-width: 0;
        font-weight: 400;
        line-height: inherit;
        white-space: nowrap;
    }

    /* Aktiver Bereich: Farbe wie bei normalen Menüpunkten (der Link ist ausgeblendet) */
    #top #header-navigation > ul#header-menu-ul > li.current-menu-item > .__submenu-toggle,
    #top #header-navigation > ul#header-menu-ul > li.current-menu-ancestor > .__submenu-toggle{color: var(--or-menu-active-color);}

    /* Pfeil dreht beim Öffnen nach oben */
    #top #header-navigation .__submenu-toggle--level-1[aria-expanded="true"]::after{rotate: 180deg;}

    /* Hervorgehobener Menüpunkt (Klasse im WP-Backend vergeben) */
    #top #header-navigation > ul#header-menu-ul > li.__bordered > a{border: 2px solid var(--or-black); padding: 0 .5em;}

    /* ---------------------------------------------------------
       Mega-Menü-Panel (Ebene 1 geöffnet)
       --------------------------------------------------------- */
    #top #header-navigation .__submenu--level-1{
        position: absolute;
        top: 100%;
        left: calc(-1 * (100vw - 100%) / 2);
        display: none;
        gap: 8vw;
        box-sizing: border-box;
        width: 100vw;
        max-height: calc(100vh - 160px);
        margin: 0;
        padding: 50px calc((100vw - 100%) / 2);
        background: var(--or-white);
        color: var(--or-black);
        border-top: 1px solid var(--or-black);
        box-shadow: 0 16px 16px -8px #0000001a;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    #top #header-navigation .__submenu-toggle--level-1[aria-expanded="true"] + .__submenu--level-1{display: flex; animation: or-soft-open var(--or-submenu-duration) var(--or-submenu-easing);}

    #top #header-navigation .__submenu--level-1 a{color: var(--or-black); transition: color .2s ease;}

    /* Beschreibung links im Panel */
    #top #header-navigation .__description{max-width: 480px;}
    #top #header-navigation .__description > a{display: block; font-size: var(--step-3); font-weight: 500;}
    #top #header-navigation .__description > p{
        margin: 1.5em 0 0;
        font-size: var(--step-2);
        font-weight: 400;
        line-height: 1.2;
        text-transform: uppercase;
    }

    /* Schließen-Button rechts oben im Panel */
    #top #header-navigation .__submenu--level-1 > .__submenu-close{
        align-self: flex-start;
        margin-left: auto;
        padding: .2em .4em;
        color: var(--or-black);
        font-size: 32px;
    }

    /* ---------------------------------------------------------
       Ebene 2
       --------------------------------------------------------- */
    #top #header-navigation .__submenu--level-1 > ul{position: relative; max-width: 25vw;}
    #top #header-navigation .__submenu--level-1 > ul > li{font-size: var(--step-1);}
    #top #header-navigation .__submenu--level-1 > ul > li > a{display: block; padding: .2em 2em .2em 0; font-weight: 400;}

    /* Mit Unterpunkten: Button mit Text links und Pfeil rechts */
    #top #header-navigation .__submenu--level-1 > ul > li.menu-item-has-children{display: flex; align-items: center;}
    #top #header-navigation .__submenu-toggle--level-2{
        flex: 1 1 auto;
        justify-content: space-between;
        gap: 1em;
        min-width: 0;
        padding: .2em 0;
        font-weight: 400;
        line-height: inherit;
        text-align: left;
    }
    #top #header-navigation .__submenu-toggle--level-2::after{
        content: '\e879'; content: '\e879' / '';
        color: var(--or-gold);
        font-size: calc(var(--or-submenu-icon-size) * 1.3);
    }

    /* Geöffneter Punkt: medium */
    #top #header-navigation .__submenu-toggle--level-2[aria-expanded="true"]{font-weight: 500;}

    /* ---------------------------------------------------------
       Ebene 3: erscheint rechts neben Ebene 2
       --------------------------------------------------------- */
    #top #header-navigation .__submenu--level-2{
        position: absolute;
        top: 0;
        left: calc(100% + 4vw);
        display: none;
    }
    #top #header-navigation .__submenu-toggle--level-2[aria-expanded="true"] + .__submenu--level-2{display: block; animation: or-soft-open-side var(--or-submenu-duration) var(--or-submenu-easing);}
    #top #header-navigation .__submenu--level-2 > ul > li{font-size: var(--step-1);}
    #top #header-navigation .__submenu--level-2 > ul > li > a{
        display: block;
        padding: .2em 0;
        white-space: nowrap; /* absolut positioniert: ohne nowrap bricht der Text sehr schmal um */
    }

    /* ---------------------------------------------------------
       Zweitmenü
       --------------------------------------------------------- */
    #top #header-navigation > .menu-divider{flex: 0 0 1px; width: 1px; height: 2rem; background: var(--or-white);}
    #top #header-navigation > ul#header-secondary-menu{display: flex; align-items: center; gap: 2rem;}
    #top #header-navigation > ul#header-secondary-menu > li > a{display: block; color: inherit;}
    #top #header-navigation > ul#header-secondary-menu > li > a:hover,
    #top #header-navigation > ul#header-secondary-menu > li > a:focus-visible{color: var(--or-gold);}

    /* ---------------------------------------------------------
       Hover (am Ende, damit es die Farbregeln oben überschreibt)
       --------------------------------------------------------- */
    #top #header-navigation a:hover,
    #top #header-navigation a:focus-visible,
    #top #header-navigation .__submenu-toggle:hover,
    #top #header-navigation .__submenu-toggle:focus-visible{color: var(--or-gold);}

    /* ---------------------------------------------------------
       Header: kleines Logo beim Scrollen
       --------------------------------------------------------- */
    #top #header .logo a svg,
    #top #header .logo a::after{transition: opacity .1s ease;}

    #top.__header_scrolled #header .logo a{position: relative;}
    #top.__header_scrolled #header .logo a svg{opacity: 0 !important;}
    #top.__header_scrolled #header .logo a::after{
        content: "";
        position: absolute;
        inset: 10px;
        z-index: 10;
        background: url("/wp-content/uploads/2026/09/logo-ortmann-small.svg") left center / contain no-repeat;
        pointer-events: none;
    }

    /* ---------------------------------------------------------
       Header: Claim + Telefon-Button
       --------------------------------------------------------- */
    #top #header .__claim_plus_phone_button{
        position: absolute;
        top: 10%;
        right: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 2em;
        line-height: 1.25;
    }
    #top.__header_scrolled .__claim_plus_phone_button .avia-button{padding-top: 10px; padding-bottom: 10px;}
}


/*  =========================================================
    6. „ÜBERSICHT“-EINTRAG IM FLYOUT (nur Desktop)
       Erster Eintrag der Liste in .__submenu--level-2 (menu.php), führt zur
       Seite des übergeordneten Punkts. Spezifität bewusst hoch, damit
       font-weight der Ebenen-Regeln oben überschrieben wird.
    ========================================================= */
#top #header-navigation .sub-menu > li.__overview > a{font-weight: 500;}

/* Mobile: kein „Übersicht“ (Link des Punkts führt dort weiter zur Seite) */
@media only screen and (max-width: 1449px){
    #top #header-navigation .sub-menu > li.__overview{display: none;}
}


/*  =========================================================
    7. ANIMATIONEN
    ========================================================= */
@keyframes or-slide-in{
    from{opacity: 0; translate: 0 2rem;}
    to  {opacity: 1; translate: 0 0;}
}

/* Untermenüs: sanft einblenden, leicht von oben nachrutschen */
@keyframes or-soft-open{
    from{opacity: 0; translate: 0 -.5rem;}
    to  {opacity: 1; translate: 0 0;}
}

/* Desktop Ebene 3: sanft einblenden, leicht von links nachrutschen */
@keyframes or-soft-open-side{
    from{opacity: 0; translate: -.5rem 0;}
    to  {opacity: 1; translate: 0 0;}
}


/*  =========================================================
    8. REDUZIERTE BEWEGUNG
    ========================================================= */
@media (prefers-reduced-motion: reduce){
    #top #header-navigation,
    #top #header-navigation *,
    #top #header-navigation *::after,
    #top #mobile-menu-trigger > span{animation: none !important; transition: none !important;}
}