/* ==========================================================================
   mobile-nav.css
   --------------------------------------------------------------------------
   Mobile burger menu: open-state styles + animation.

   Markup (already exists in every page):
     <nav class="primary-nav">
       <button class="nav-toggle"><span></span><span></span><span></span></button>
       <ul class="nav-list">...</ul>
       <a class="btn btn-primary nav-cta">Termin / Anfrage</a>
     </nav>

   When the burger is clicked, JS toggles class "is-open" on .primary-nav.
   This stylesheet provides:
     - dropdown layout for the nav-list once open
     - X-animation for the three burger lines
     - CTA-Button below the nav links inside the open menu

   Only active at viewports <=900px (where the burger replaces the inline nav).
   ========================================================================== */

@media (max-width: 900px) {
    /* Burger animates to an X when menu is open */
    .site-header-v3 .primary-nav.is-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .site-header-v3 .primary-nav.is-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    .site-header-v3 .primary-nav.is-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* nav-list as full-width dropdown below the logo row when open */
    .site-header-v3 .primary-nav.is-open .nav-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-basis: 100%;
        order: 99;
        gap: 0;
        padding: 12px 0 8px;
        margin: 12px 0 0;
        border-top: 1px solid #DDD6C8;
    }
    .site-header-v3 .primary-nav.is-open .nav-list li {
        width: 100%;
    }
    .site-header-v3 .primary-nav.is-open .nav-list a {
        display: block;
        padding: 12px 4px;
        font-size: 15px;
        width: 100%;
    }
    /* Underline-Effekt unter den Nav-Links nicht sinnvoll auf Mobile */
    .site-header-v3 .primary-nav.is-open .nav-list a::after {
        display: none;
    }
    .site-header-v3 .primary-nav.is-open .nav-list a.active {
        color: #1F344D;
        font-weight: 500;
    }

    /* CTA-Button erscheint zentriert unter den Nav-Links */
    .site-header-v3 .primary-nav.is-open .nav-cta {
        display: inline-flex;
        flex-basis: 100%;
        order: 100;
        justify-content: center;
        margin: 6px 0 4px;
        padding: 14px 22px;
    }
}