/* ==========================================================================

   1. RESPONSIVE HEADER & PADDINGS

   ========================================================================== */


/* Desktop (Groß) */

@media (max-width: 1750px) and (min-width: 1351px) {

    #mein-geheim-header {

        padding-left: 10% !important;

        padding-right: 10% !important;

    }

}

   

/* Desktop (Mittel) / Laptop */

@media (max-width: 1350px) and (min-width: 1025px) {

    #mein-geheim-header {

        padding-left: 1% !important;

        padding-right: 1% !important;

    }

    .elementor-nav-menu .menu-item a {

        font-size: 13px !important;

    }

}


/* Standard-Zustand (Desktop & Tablet): Fixiert über dem Inhalt */

#mein-geheim-header {

    position: fixed !important;

    top: 20px !important;

    left: 1% !important;  

    box-sizing: border-box !important;

    z-index: 9999 !important;

    background-color: transparent;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out !important;

}


#meine-hero {

    position: relative !important;

    z-index: 10 !important;

}    


/* Scroll-Zustand: Wenn die Hero verlassen wurde */

#mein-geheim-header.wieder-obenauf {

    background-color: #283E2B !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

}


/* ==========================================================================

   2. NORMALE MENÜPUNKTE (Abstände & Unterstriche)

   ========================================================================== */


/* Entfernt Padding direkt an den Links, damit der Unterstrich exakt so lang wie das Wort ist */

#menu-1-e60dd92 a.elementor-item,

#menu-1-e60dd92 .elementor-nav-menu a.elementor-item,

#mein-geheim-header .elementor-nav-menu a.elementor-item {

    padding-left: 0 !important;

    padding-right: 0 !important;

    --n-menu-item-pad-left: 0px !important;  

    --n-menu-item-pad-right: 0px !important;

}


/* Abstand zwischen den einzelnen Menüpunkten */

#menu-1-e60dd92 li.menu-item,

#mein-geheim-header .elementor-nav-menu li.menu-item {

    margin-left: 15px !important;

    margin-right: 15px !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

}


/* Rahmen für aktive normale Menüpunkte (außer Kontakt-Button) */

selector li:not(.menu-kontakt-btn) .elementor-item.elementor-item-active {

    border: 2px solid #678C56 !important;

    border-radius: 25px !important;

}



/* ==========================================================================

   3. SPEZIELLER KONTAKT-BUTTON (CTA) - BOMBENSICHERER FIX

   ========================================================================== */


/* BASIS-STYLING: Gilt immer für die Kapsel */

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn {

    border-radius: 25px !important;

    padding: 10px 24px !important; /* Definiert die feste Kapselgröße */

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-sizing: border-box !important;

    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out !important;

}


/* Innenliegender Link: Säuberung */

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn a.elementor-item,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn a {

    padding: 0 !important;  

    margin: 0 !important;    

    border: none !important;

    background: transparent !important;

    background-color: transparent !important;

    display: inline-block !important;

    box-shadow: none !important;

    transition: color 0.3s ease-in-out !important;

}


/* -------------------------------------------------------------

   ZUSTAND 1: STANDARD (Grüner Hintergrund, weißer Text)

   ------------------------------------------------------------- */

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn {

    background-color: #678C56 !important;

    border: 1px solid #678C56 !important;

}

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn a.elementor-item,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn a {

    color: #ffffff !important;

}


/* -------------------------------------------------------------

   ZUSTAND 2 & 3: HOVER & AKTIV (Weißer Hintergrund, grüner Text/Rand)

   ------------------------------------------------------------- */


/* Wenn gehovert ODER wenn die Seite aktiv/current ist */

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn:hover,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn.current-menu-item,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn.current_page_item,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn:has(.elementor-item-active) {

    background-color: #ffffff !important;

    border: 2px solid #678C56 !important;

}


/* Textfarbe bei Hover ODER Aktiv */

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn:hover a,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn.current-menu-item a,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn.current_page_item a,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn .elementor-item-active {

    color: #678C56 !important;

}


/* -------------------------------------------------------------

   ELEMENTOR LINE-POINTER EFFEKTE DEAKTIVIEREN

   ------------------------------------------------------------- */

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn a::after,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn a::before,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn .elementor-item::after,

#mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn .elementor-item::before {

    display: none !important;

    content: none !important;

    opacity: 0 !important;

    height: 0 !important;

}


/* ABSTAND FÜR DEN BUTTON (Desktop ab 1024px) */

@media (min-width: 1024px) {

    #mein-geheim-header .elementor-nav-menu li.menu-kontakt-btn {

        margin-left: 30px !important;

    }

}


/* ==========================================================================

   4. MOBIL-ANPASSUNGEN (Unter 1024px)

   ========================================================================== */

@media (max-width: 1024px) {

    #mein-geheim-header .elementor-nav-menu--dropdown {

        position: absolute !important;

        top: 100% !important;

        right: 0 !important;

        width: auto !important;

        min-width: 250px !important;

        z-index: 99999 !important;

    }


    #mein-geheim-header .elementor-nav-menu--dropdown .elementor-item {

        text-align: center !important;

        display: block !important;

    }


    #mein-geheim-header .elementor-menu-toggle i,

    #mein-geheim-header .elementor-menu-toggle svg {

        fill: #F0EEE8 !important;

        color: #F0EEE8 !important;

    }


    #mein-geheim-header .elementor-menu-toggle {

        border-color: #F0EEE8 !important;

        border-radius: 5px !important;

        height: 50px !important;

        width: 75px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }


    /* SAFEGUARD FÜR MOBILE FLICKER BEIM KONTAKT-BUTTON */

    selector .elementor-nav-menu--dropdown li.menu-kontakt-btn {

        border-top: none !important;

        border-bottom: none !important;

    }

    selector .elementor-nav-menu--dropdown li.menu-kontakt-btn:not(.current-menu-item):not(.current_page_item):not(:has(.elementor-item-active)) {

        background-color: #678C56 !important;

    }

}


/* ==========================================================================

   5. SMARTPHONES (Unter 768px bis unter 360px)

   ========================================================================== */

@media (max-width: 768px) {

    #mein-geheim-header,

    #mein-geheim-header * {

        box-sizing: border-box !important;

        max-width: 100% !important;

    }


    #mein-geheim-header > .elementor-container,

    #mein-geheim-header > .e-con-inner,

    #mein-geheim-header {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: center !important;

        justify-content: space-between !important;

        left: 0px !important;

        width: 100% !important;

    }


    #mein-geheim-header .elementor-nav-menu--dropdown {

        top: 100% !important;

        right: 0 !important;

        width: auto !important;

        min-width: 250px !important;

        z-index: 99999 !important;

    }

       

    #mein-geheim-header .elementor-widget-theme-site-logo,

    #mein-geheim-header .elementor-widget-image,

    #mein-geheim-header .elementor-widget-nav-menu {

        width: auto !important;

        max-width: max-content !important;

    }

   

    #mein-geheim-header.wieder-obenauf {

        top: 20px !important;

        left: 0px !important;

    }

}


/* Schmale Smartphones (< 440px) */

@media (max-width: 440px) {

    #mein-geheim-header,

    #mein-geheim-header .elementor-container,

    #mein-geheim-header .elementor-column,

    #mein-geheim-header .elementor-widget-wrap {

        padding-left: 6px !important;  

        padding-right: 6px !important;

        margin-left: 0px !important;

        margin-right: 0px !important;

    }


    #mein-geheim-header .elementor-widget-theme-site-logo img,

    #mein-geheim-header .elementor-widget-image img {

        max-width: 130px !important;

        height: auto !important;

    }

}


/* Extrem schmale Smartphones (< 360px) */

@media (max-width: 360px) {

    #mein-geheim-header .elementor-widget-theme-site-logo img,

    #mein-geheim-header .elementor-widget-image img {

        max-width: 110px !important;

    }


    #mein-geheim-header .elementor-menu-toggle {

        width: 60px !important;  

        height: 45px !important;

    }

}


@media (max-width: 1024px) {

    #mein-geheim-header .elementor-nav-menu--dropdown li.menu-kontakt-btn {

        display: flex !important;

        width: fit-content !important;

        margin: 10px auto 0 auto !important;

    }

}


/* ==========================================================================

   FIX: Lücke zwischen 768px-Block und 440px-Block schließen

   ========================================================================== */

@media (max-width: 445px) {

    #mein-geheim-header,

    #mein-geheim-header .elementor-container,

    #mein-geheim-header .elementor-column,

    #mein-geheim-header .elementor-widget-wrap {

        padding-left: 6px !important;

        padding-right: 6px !important;

        margin-left: 0px !important;

        margin-right: 0px !important;

    }


    #mein-geheim-header .elementor-widget-theme-site-logo img,

    #mein-geheim-header .elementor-widget-image img {

        max-width: 130px !important;

        height: auto !important;

    }

}


/* ==========================================================================

   FIX: Header-Inhalt darf schrumpfen statt zu überlaufen (350–768px)

   ========================================================================== */

@media (max-width: 768px) {

    /* Erzwingt 100% Breite auf ALLEN Wrapper-Ebenen im Header, egal was Elementor inline setzt */

    #mein-geheim-header,

    #mein-geheim-header .e-con-inner,

    #mein-geheim-header .elementor-container,

    #mein-geheim-header > * {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

    }

}

@media (max-width: 500px) {

    /* Toggle-Button bei sehr schmalen Screens verkleinern, damit er reinpasst */

    #mein-geheim-header #logo-name-container {

        padding-left: 45px;

    }

} 


@media (max-width: 445px) {

    /* Toggle-Button bei sehr schmalen Screens verkleinern, damit er reinpasst */

    #mein-geheim-header .elementor-menu-toggle {

        width: 50px !important;

        height: 42px !important;

    }

} 

/* Dropdown-Menü Padding oben & unten auf 20px setzen */
#mein-geheim-header .elementor-nav-menu--dropdown {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}