/* =========================================================
   Vindicators Mobile Menu — eolotec
   ---------------------------------------------------------
   Off-Canvas-Reveal: .tm-page wird beim Öffnen in eine
   viewportgroße Box eingefroren (Position/Scroll übernimmt
   das JS), nach rechts geschoben und auf 0.95 skaliert.
   Darunter liegt permanent der Menü-Layer (#vin-mnav).

   Der Breakpoint hier (max-width: 959.98px) muss zum Wert
   'breakpoint' (960) in bootstrap.php passen.
   ========================================================= */

:root {
    /* Farben */
    --vin-mnav-bg: #fff;                       /* Menü-Hintergrund */
    --vin-mnav-item: #3E3E3E;                     /* inaktive Menüpunkte */
    --vin-mnav-item-active: #3E3E3E;              /* aktiver Punkt / Akzente */
    --vin-mnav-divider: #707070;  /* Trennlinien */

    /* Geometrie & Timing */
    --vin-mnav-reveal: 56px;                      /* sichtbarer Seitenstreifen rechts */
    --vin-mnav-scale: 0.95;                       /* Skalierung der Seiten-Card */
    --vin-mnav-radius: 22px;                      /* Border-Radius der Card */
    --vin-mnav-duration: 0.5s;
    --vin-mnav-ease: cubic-bezier(0.32, 0.72, 0.28, 1);
    --vin-mnav-stagger: 70ms;                     /* Versatz zwischen den Menüpunkten */
}

/* Desktop: Layer existiert nicht */
.vin-mnav {
    display: none;
}

/* Eigener box-sizing-Scope: UIkit setzt KEINEN globalen border-box-Reset.
   Ohne diesen Block hängt die Höhenrechnung (height: 100% + Padding) davon
   ab, ob das jeweilige Site-CSS zufällig einen Reset mitbringt — auf
   Sites ohne Reset ragt der Inhalt sonst ~56px unten aus dem Viewport
   (Kontakt-Button halb abgeschnitten, kein Scrollen möglich). */
.vin-mnav,
.vin-mnav *,
.vin-mnav *::before,
.vin-mnav *::after {
    box-sizing: border-box;
}

@media (max-width: 1199.98px) {

    /* ----------------------------------------------------
       Menü-Layer (liegt permanent UNTER der Seite)
       ---------------------------------------------------- */

    .vin-mnav {
        position: fixed;
        inset: 0;
        z-index: 0;
        display: flex;
        background: var(--vin-mnav-bg);
        visibility: hidden;
        transition: visibility 0s calc(var(--vin-mnav-duration) + 0.2s);
    }

    html.vin-mnav-fixed .vin-mnav {
        visibility: visible;
        transition-delay: 0s;
    }

    .vin-mnav-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 28px;
        padding-left: max(28px, env(safe-area-inset-left));
        padding-right: calc(var(--vin-mnav-reveal) + 24px);
        padding-bottom: 80px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* ----------------------------------------------------
       Logo
       ---------------------------------------------------- */

    .vin-mnav-logo {
        display: inline-block;
        flex: none;
        align-self: flex-start;
    }

    .vin-mnav-logo img {
        display: block;
        width: auto;
        max-width: 80%;
        margin-top: 2%;
    }

    /* Geklonte Inline-SVG-Logos (adoptLogo-Fallback im JS) */
    .vin-mnav-logo svg {
        display: block;
        height: 52px;
        width: auto;
    }

    .vin-mnav-logo-text {
        font-size: 24px;
        font-weight: 700;
        color: var(--vin-mnav-item-active);
    }


    /* ----------------------------------------------------
       Schließen-Button
       ---------------------------------------------------- */

    .vin-mnav-close {
        position: absolute;
        top: 67px;
        right: calc(var(--vin-mnav-reveal) + 24px);
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        color: var(--vin-mnav-item-active);
        border: 1px solid var(--vin-mnav-item-active);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: none;
    }

    /* ----------------------------------------------------
       Fokus-Ringe: nur für Tastaturnutzer (:focus-visible),
       nicht nach Klick/Touch
       ---------------------------------------------------- */

    .vin-mnav a:focus:not(:focus-visible),
    .vin-mnav button:focus:not(:focus-visible) {
        outline: none;
    }

    .vin-mnav a:focus-visible,
    .vin-mnav button:focus-visible {
        outline: 2px solid var(--vin-mnav-item-active);
        outline-offset: 3px;
    }

    /* ----------------------------------------------------
       Menüpunkte
       ---------------------------------------------------- */

    .vin-mnav-nav {
        margin-top: auto; /* drückt Menü + CTA nach unten */
    }

    /* Strukturbasierte Selektoren: greifen unabhängig davon, welche
       Klassen WP/YTP/Plugins der Menü-<ul> tatsächlich verpassen. */
    .vin-mnav-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .vin-mnav-nav li {
        border-bottom: 1px solid var(--vin-mnav-divider);
    }

    .vin-mnav-nav li:last-child {
        border-bottom: 0;
    }

    .vin-mnav-nav li > a {
        display: block;
        padding: 15px 0 !important;
        font-size: 26px;
        line-height: 1.15;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        text-decoration: none;
        color: var(--vin-mnav-item);
        transition: color 0.2s ease;
    }

    .vin-mnav-nav li > a:hover,
    .vin-mnav-nav li > a:active,
    .vin-mnav-nav li.uk-active > a,
    .vin-mnav-nav li.current-menu-item > a,
    .vin-mnav-nav li.current-menu-parent > a,
    .vin-mnav-nav li.current-menu-ancestor > a {
        color: var(--vin-mnav-item-active);
        font-weight: bolder;
    }

    /* ----------------------------------------------------
       Kontakt-Button
       ---------------------------------------------------- */

    .vin-mnav-cta {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 44px;
        padding: 10px;
        background: #D9D5D0;
        border-radius: 9px;
        color: var(--vin-mnav-cta-text);
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        text-decoration: none;
        box-shadow: none;
        text-align: center;
    }

    .vin-mnav-cta:hover,
    .vin-mnav-cta:focus {
        color: var(--vin-mnav-cta-text);
        text-decoration: none;
    }

    .vin-mnav-cta-icon {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--vin-mnav-cta-circle);
        color: #fff;
    }

    /* ----------------------------------------------------
       Stagger-Einblendung
       ---------------------------------------------------- */

    .vin-mnav-logo,
    .vin-mnav-close,
    .vin-mnav-cta,
    .vin-mnav-nav li {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.4s ease, transform 0.45s var(--vin-mnav-ease);
    }

    .vin-mnav-close {
        transform: scale(0.6);
    }

    html.vin-mnav-open .vin-mnav-logo,
    html.vin-mnav-open .vin-mnav-close,
    html.vin-mnav-open .vin-mnav-cta,
    html.vin-mnav-open .vin-mnav-nav li {
        opacity: 1;
        transform: none;
    }

    html.vin-mnav-open .vin-mnav-logo  { transition-delay: 120ms; }
    html.vin-mnav-open .vin-mnav-close { transition-delay: 220ms; }

    /* --i wird per JS auf die <li> verteilt, CTA bekommt --i = Anzahl Items */
    html.vin-mnav-open .vin-mnav-nav li {
        transition-delay: calc(var(--i, 0) * var(--vin-mnav-stagger) + 180ms);
    }

    html.vin-mnav-open .vin-mnav-cta {
        transition-delay: calc(var(--i, 5) * var(--vin-mnav-stagger) + 220ms);
    }

    /* ----------------------------------------------------
       Seite (.tm-page) — die "Card"
       ---------------------------------------------------- */

    .tm-page {
        position: relative;
        z-index: 1; /* liegt über dem Menü-Layer */
        background: var(--vin-mnav-page-bg);
    }

    html.vin-mnav-fixed,
    html.vin-mnav-fixed body {
        overflow: hidden;
    }

    html.vin-mnav-fixed .tm-page {
        position: fixed;
        inset: 0;
        overflow: hidden;
        /* Identity-Transform: macht .tm-page ab dem ersten Frame zum
           Containing Block für fixe/gestickte Elemente — der Sticky-
           Header springt so nicht, sondern fährt mit der Card mit. */
        transform: translateX(0) scale(1);
        transform-origin: 0 50%;
        will-change: transform;
        transition:
            transform var(--vin-mnav-duration) var(--vin-mnav-ease),
            border-radius var(--vin-mnav-duration) var(--vin-mnav-ease),
            box-shadow var(--vin-mnav-duration) var(--vin-mnav-ease);
    }

    html.vin-mnav-open .tm-page {
        transform: translateX(calc(100vw - var(--vin-mnav-reveal))) scale(var(--vin-mnav-scale));
        border-radius: var(--vin-mnav-radius);
        box-shadow: 0 18px 60px rgba(8, 24, 55, 0.32);
        cursor: pointer;
    }

    /* Gestickter Header (uk-sticky) bleibt beim Öffnen optisch an Ort
       und Stelle: --vin-scroll-y setzt das JS beim Öffnen. */
    html.vin-mnav-fixed .tm-page .uk-sticky-fixed {
        top: var(--vin-scroll-y, 0px) !important;
    }

    /* Instant-Close ohne Animation (z. B. Resize auf Desktop-Breite) */
    html.vin-mnav-notrans .tm-page,
    html.vin-mnav-notrans .vin-mnav-nav li,
    html.vin-mnav-notrans .vin-mnav-logo,
    html.vin-mnav-notrans .vin-mnav-close,
    html.vin-mnav-notrans .vin-mnav-cta {
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.vin-mnav-fixed .tm-page,
    .vin-mnav-nav li,
    .vin-mnav-logo,
    .vin-mnav-close,
    .vin-mnav-cta {
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }
}