/* =======================================================================
   HEADER + NAV + LOGO + WAVES
   Aus custom.css und style.css ausgelagert (zentral steuerbar)
======================================================================= */

/* ===============================
   NAV - einheitlich für alle Seiten
   =============================== */
.nav-m {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background-color: transparent;
    box-shadow: none;
    border-bottom: none;
    padding: 20px 0;
    min-height: 60px;
    transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
}

/* ===================================================================================================================================================================
                                                                                   5) NAVIGATION 
   =================================================================================================================================================================== */

/* ---------- Header + Wrapper ---------- */

header {
    position: relative;
    z-index: 1000;
    background-color: transparent;
    box-shadow: none;
}

header.nav-m {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

    .nav-m .logo img {
        max-height: 80px;
        height: auto;
        width: auto;
    }

    /* Menü-Links vertikal mittig ausrichten - für Startseite + Unterseiten */
    .nav-m .menu-items > li > a,
    .nav-m.scrolled .menu-items > li > a {
        line-height: 1; /* verhindert Überhöhe */
        padding-top: 30px !important;
        display: flex;
        align-items: center; /* vertikal mittig */
    }

    /* Elternzeile korrekt zentrieren */
    .nav-m .menu-items {
        display: flex;
        align-items: center; /* vertikale Zentrierung der gesamten Liste */
    }

/* ---------- Basis-Navigation (für alle Viewports) ---------- */

nav#nav.nav-collapse {
    position: relative;
    z-index: 5000;
    display: block;
}

    nav#nav.nav-collapse ul.menu-items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        nav#nav.nav-collapse ul.menu-items > li {
            position: relative;
        }

            /* Grund-Style für Links (wird in Media Queries verfeinert) */
            nav#nav.nav-collapse ul.menu-items > li > a {
                display: inline-block;
                color: #000066;
                font-family: 'Poppins', sans-serif;
                font-size: 20px;
                padding: 10px 8px;
                text-decoration: none;
                font-weight: 500;
                white-space: nowrap; /* verhindert Zeilenumbruch */
                transition: color 0.2s ease, text-decoration 0.2s ease;
            }
                nav#nav.nav-collapse ul.menu-items > li > a:hover {
                    color: #33cc33;
                }

    /* gemeinsame Submenu-Grundstruktur */
    nav#nav.nav-collapse ul.sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        nav#nav.nav-collapse ul.sub-menu > li {
            margin-bottom: 8px;
        }

            nav#nav.nav-collapse ul.sub-menu > li:last-child {
                margin-bottom: 0;
            }

/* =======================================================================
   5.1     DESKTOP-NAVIGATION (>= 1025px)
======================================================================= */
@media (min-width: 1025px) {

    /* Burger am Desktop ausblenden */
    #nav-toggle,
    .nav-toggle {
        display: none !important;
    }

    nav#nav.nav-collapse {
        background: transparent;
        transform: none;
        opacity: 1;
        height: auto;
    }

        /* Hauptmenü horizontal, rechtsbündig */
        nav#nav.nav-collapse ul.menu-items {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            gap: 24px;
        }

            nav#nav.nav-collapse ul.menu-items > li {
                display: inline-block;
                /* fallback, falls global nicht gesetzt: position: relative */
            }

        /* -------------------------------------------------------------------
       LEVEL 2 SUBMENU (Dropdown)
       – HIER jetzt Firmenblau + Weiß
    ------------------------------------------------------------------- */
        nav#nav.nav-collapse ul.sub-menu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 220px;
            padding: 10px 0;
            /* NEU: Farben */
            background: #002060; /* Firmenblau */
            color: #ffffff;
            box-shadow: 0 6px 18px rgba(0,0,0,0.15);
            border-radius: 4px;
            display: block;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(6px);
            transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.35s;
            z-index: 6000;
        }

            nav#nav.nav-collapse ul.sub-menu li a {
                display: block;
                padding: 0px 20px;
                /* NEU: Weiß als Standardschrift */
                color: #ffffff;
                font-size: 18px;
                white-space: nowrap;
                text-decoration: none;
            }

                nav#nav.nav-collapse ul.sub-menu li a:hover {
                    background: rgba(255,255,255,0.1); /* dezenter hellerer Hover */
                    color: #cfe3ff; /* leichtes Hellblau */
                }

        /* Hover öffnet Submenu (Level 2) */
        nav#nav.nav-collapse ul.menu-items > li:hover > ul.sub-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
            transition-delay: 0s;
        }

        /* ============================================================
       FIX: Level-3 Submenu (Sub-Sub-Menü) sauber am Parent ausrichten
       ============================================================ */

        /* WICHTIG: li in Submenus werden Bezugspunkte */
        nav#nav.nav-collapse ul.sub-menu > li {
            position: relative;
        }

        /* -------------------------------------------------------------------
       LEVEL 3 SUBMENU (rechts daneben)
       – ebenfalls Firmenblau + Weiß
    ------------------------------------------------------------------- */
        nav#nav.nav-collapse ul.sub-menu .sub-menu {
            position: absolute;
            top: 0; /* direkt auf Höhe des Parent-Items */
            left: 100%; /* rechts daneben öffnen */
            min-width: 220px;
            padding: 10px 0;
            /* NEU: Firmenblau + Weiß */
            background: #002060;
            color: #ffffff;
            box-shadow: 0 6px 18px rgba(0,0,0,0.15);
            border-radius: 4px;
            display: block;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(6px);
            transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.35s;
            z-index: 6001;
        }

            nav#nav.nav-collapse ul.sub-menu .sub-menu li a {
                color: #ffffff;
            }

                nav#nav.nav-collapse ul.sub-menu .sub-menu li a:hover {
                    background: rgba(255,255,255,0.1);
                    color: #cfe3ff;
                }

        /* Hover auf Level-2-Eintrag öffnet das Level-3-Menü */
        nav#nav.nav-collapse ul.sub-menu li:hover > ul.sub-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(0);
            transition-delay: 0s;
        }
}

/* =======================================================================
   MOBILE OFFCANVAS (< 1025px)
======================================================================= */

@media (max-width: 1024px) {

    /* --- Hamburger-Button --- */
    #nav-toggle,
    .nav-toggle {
        position: absolute;
        top: 18px;
        right: 22px;
        width: 34px;
        height: 26px;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        z-index: 200000;
    }

        #nav-toggle .bar,
        .nav-toggle .bar {
            width: 100%;
            height: 4px;
            background: #ffffff; /* weißer Burger auf Hero */
            border-radius: 4px;
            transition: 0.3s ease;
        }

        /* Burger – X Animation */
        #nav-toggle.active .bar:nth-child(1),
        .nav-toggle.active .bar:nth-child(1) {
            transform: translateY(10px) rotate(45deg);
        }

        #nav-toggle.active .bar:nth-child(2),
        .nav-toggle.active .bar:nth-child(2) {
            opacity: 0;
        }

        #nav-toggle.active .bar:nth-child(3),
        .nav-toggle.active .bar:nth-child(3) {
            transform: translateY(-10px) rotate(-45deg);
        }

    /* --- Offcanvas-Menü Panel --- */
    nav#nav.nav-collapse {
        position: fixed;
        top: 0;
        right: 0;
        width: 75%;
        max-width: 330px;
        height: 100vh;
        background: #002060;
        padding-top: 100px;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s ease, opacity 0.35s ease;
        overflow-y: auto;
        z-index: 400000; /* ueber .nav-m (300000) damit es sichtbar oeffnet */
    }

        /* sichtbar, wenn JS .opened setzt */
        nav#nav.nav-collapse.opened {
            transform: translateX(0) !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            display: block !important;
            z-index: 400000 !important;
        }

        /* Menüeinträge im Offcanvas */
        nav#nav.nav-collapse ul.menu-items {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 0;
            padding: 0 24px;
        }

            nav#nav.nav-collapse ul.menu-items li a {
                display: block;
                padding: 12px 0;
                font-size: 18px;
                color: #ffffff !important;
                border-bottom: 1px solid rgba(255,255,255,0.2);
                text-decoration: none;
            }

        /* Mobile Submenus - per Klick (.open) */
        nav#nav.nav-collapse ul.sub-menu {
            display: none;
            padding-left: 15px;
            border-left: 1px solid rgba(255,255,255,0.3);
            margin-top: 6px;
        }

        nav#nav.nav-collapse .menu-item-has-children.open > ul.sub-menu {
            display: block !important;
        }
}

/* Fallback: Burger am Desktop sicher weg */
@media (min-width: 1025px) {
    #nav-toggle,
    .nav-toggle {
        display: none !important;
    }
}

/* Entfernt Bullet-/Pseudo-Icons NUR im Menü */
nav#nav.nav-collapse ul.menu-items > li::before,
nav#nav.nav-collapse ul.sub-menu li::before {
    content: none !important;
    display: none !important; /* verhindert Browser-Bug */
}


nav#nav.nav-collapse ul.menu-items > li::before,
nav#nav.nav-collapse ul.sub-menu li::before {
    content: none !important;
}

/* ==========================================================================
   NAV Hover-Optimierungen
   ========================================================================= */
nav#nav.nav-collapse ul.menu-items > li > a {
    transition: color 0.2s ease, text-decoration 0.2s ease, transform 0.2s ease;
    transform-origin: center;
}

nav#nav.nav-collapse ul.menu-items > li > a:hover {
    transform: scale(1.03);
}

nav#nav.nav-collapse ul.sub-menu li a {
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    transform-origin: center;
}

nav#nav.nav-collapse ul.sub-menu li a:hover {
    color: #33cc33 !important;
    transform: scale(1.02);
}

/* =======================================================================
   WAVES - einheitlich (Startseiten-Form für alle)
======================================================================= */

.waves {
    width: 100%;
    height: 380px; /* Basiswelle wie zuvor */
    overflow: hidden;
    z-index: 900; /* unter Navigation, ueber Banner */
    margin-top: -200px; /* 20px höher */
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    pointer-events: none;
}

    /* Welle 1 - statische Hauptwelle (Grau, oben dicker) */
    .waves::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        /* -----------------------------  
       ?? FIX: Lücke oben schließen
       ----------------------------- */
        bottom: 20px; /* tiefer */
        height: 470px; /* mehr Höhe, Welle sichtbarer */

        width: 100%;
        z-index: 501;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'> <path fill='%23E8E8E8' d=' M0,240 C200,310,420,160,720,210 C1040,260,1240,150,1440,220 L1440,0 L0,0 Z'/> </svg>");
    }

    /* Welle 2 - animierte Welle, oben höher */
    .waves::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -40px;
        width: 520%;
        height: 320px;
        opacity: 0.45;
        z-index: 499;
        background-repeat: no-repeat;
        background-size: 520% 150%;
        background-position: center bottom;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'><path fill='%23CCDC7C' d='M0,100 C240,200,480,150,720,180 C960,210,1200,180,1440,100 L1440,0 L0,0 Z'/></svg>");
        animation: waveRight 14s ease-in-out infinite alternate;
    }

    /* Welle 3 - Hintergrundwelle, oben weicher & höher */
.waves .wave3 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 40px;
        width: 450%;
        height: 320px;
        opacity: 0.72;
        z-index: 498;
        background-repeat: no-repeat;
        background-size: 450% 100%;
        background-position: center bottom;
        background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'> <path fill='%2333cc33' d=' M0,90 C180,160,380,200,600,190 C820,180,1080,240,1280,150 L1440,0 L0,0 Z'/> </svg>");
        animation: waveMoveSoft 18s ease-in-out infinite alternate;
}

/* Wave Animations */
@keyframes waveMoveSoft {
    0% {
        background-position: 49% bottom;
    }

    100% {
        background-position: 51% bottom;
    }
}

@keyframes waveLeft {
    0% {
        background-position: 52% bottom;
    }

    100% {
        background-position: 48% bottom;
    }
}

@keyframes waveRight {
    0% {
        background-position: 48% bottom;
    }

    100% {
        background-position: 52% bottom;
    }
}

/* Scroll-Verhalten (aus Unterseiten übernommen) */
header.shrink .nav-m {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #f0f0f0 !important; /* wie >=2000px */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    border-bottom: 5px solid #33cc33 !important;
    padding: 0; /* noch flacher beim Scrollen */
    min-height: 40px;
    z-index: 1200;
    transition: background-color 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease;
}

header.shrink .nav-m .logo {
    top: 0 !important; /* 20px naeher zum Top */
}

header.shrink .nav-m .logo img {
    max-height: 45px !important; /* kleiner beim Scrollen */
}

.nav-m.scrolled .logo img {
    max-height: 45px !important; /* kleiner beim Scrollen */
}

header.shrink .nav-m .menu-items > li > a {
    padding-top: 20px !important; /* 10px hoeher beim Scrollen */
}

/* ============================================
   MOBILE NAV: Hamburger in Firmengruen (Unterseiten)
============================================ */
@media (max-width: 1024px) {
    /* Wichtig: der Toggle kann den Stacking-Context von .nav-m nicht verlassen */
    .nav-m,
    header.shrink .nav-m {
        z-index: 300000 !important;
    }

    #nav-toggle,
    .nav-toggle {
        margin-top: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        position: fixed !important;
        top: 43px !important;
        right: 18px !important;
        width: 38px !important;
        height: 28px !important;
        z-index: 300001 !important; /* ueber dem Panel */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #nav-toggle .bar,
    .nav-toggle .bar {
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        background: #33cc33 !important; /* erzwingt Gruen */
        border-radius: 4px;
        opacity: 1 !important;
    }

    header.shrink .nav-m #nav-toggle,
    header.shrink .nav-m .nav-toggle {
        top: 13px !important; /* 30px hoeher beim Scrollen */
    }
}

/* -----------------------------------------------------------------------
   Header logo: stick to first wave, responsive sizing
   ----------------------------------------------------------------------- */

/* Logo not aligned to grid; anchor to wave width */
body .nav-m .container,
body .nav-m .row,
body .nav-m .row > [class*="col-"] {
    position: static !important;
}

body .nav-m .container {
    padding-left: 15px;
    padding-right: 15px;
}

body .nav-m .logo {
    position: absolute !important;
    top: clamp(16px, 2.4vw, 28px) !important;
    left: clamp(12px, 3vw, 24px) !important;
    margin: 0;
    z-index: 2400;
}

body .nav-m .logo img {
    display: block;
    max-height: clamp(64px, 7vw, 110px);
    height: auto;
    width: auto;
}

/* Home logo size tweak so it stays inside the grey wave (1000–1199px) */
@media (min-width: 1000px) and (max-width: 1199px) {
    body.home .nav-m .logo img {
        max-height: 70px;
    }
}

/* Home logo size tweak so it stays inside the grey wave (1200–1600px) */
@media (min-width: 1200px) and (max-width: 1600px) {
    body.home .nav-m .logo img {
        max-height: 88px; /* 20% smaller than 110px */
    }
}

/* Tablet/Phone: logo in flow */
@media (max-width: 1024px) {
    body .nav-m .logo {
        position: relative !important;
        top: 20px !important;
        left: 0 !important;
        margin-bottom: 8px;
    }

    body .nav-m .container {
        padding-left: 16px;
    }
    body .nav-m .logo img {
        max-height: clamp(36px, 10vw, 50px) !important;
    }
}

/* Guard rails: keep logo + hamburger inside viewport on mobile */
@media (max-width: 1024px) {
    header,
    .nav-m {
        max-width: 100vw;
        overflow-x: clip;
    }

    body .nav-m .row {
        position: relative;
    }

    body .nav-m .logo {
        max-width: calc(100vw - 90px); /* leave space for hamburger */
        margin-right: 64px;
    }

    body .nav-m .logo img {
        max-width: 100%;
        height: auto;
    }

    #nav-toggle,
    .nav-toggle {
        right: max(12px, env(safe-area-inset-right)) !important;
    }
}

/* Hard override: ensure hamburger is visible in device emulation */
@media (max-width: 1024px) {
    header .nav-m .nav-toggle#nav-toggle {
        position: fixed !important;
        top: 66px !important; /* +50px to clear admin bar */
        right: auto !important;
        /* Use visual viewport width so it stays visible in device emulation */
        left: calc(100vw - 50px - max(12px, env(safe-area-inset-right))) !important;
        transform: none !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 38px !important;
        height: 28px !important;
        z-index: 999999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    header.shrink .nav-m .nav-toggle#nav-toggle {
        top: 6px !important; /* 60px hoeher beim Scrollen */
    }

    header .nav-m .nav-toggle#nav-toggle .bar {
        background: #33cc33 !important;
    }
}

/* Mobile (<760px): logo + hamburger higher */
@media (max-width: 760px) {
    body .nav-m .logo {
        top: -10px !important; /* 30px closer to top vs 20px */
    }

    #nav-toggle,
    .nav-toggle {
        top: -7px !important; /* 50px closer to top vs 43px */
    }

    header .nav-m .nav-toggle#nav-toggle {
        top: 16px !important; /* 50px closer to top vs 66px */
    }
}

/* Sehr breite Screens (>=2300px): wie Scroll-Zustand */
@media (min-width: 2300px) {
    body .nav-m {
        background-color: #f0f0f0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        border-bottom: 5px solid #33cc33;
        padding: 0;
        min-height: 40px;
    }

    body.home .nav-m {
        background-color: #e8e8e8;
    }

    body .nav-m .logo {
        top: 0 !important;
    }

    body .nav-m .logo img {
        max-height: 45px !important;
    }

    body .nav-m .menu-items > li > a {
        padding-top: 20px !important;
    }
}

/* Subpages shrink: keep smaller but aligned */
header.shrink .nav-m .logo img {
    max-height: clamp(60px, 7vw, 90px);
}