/* ==========================================================================
   6) NAVIGATION / ELEMENTOR (Site-weit!) → ggf. in Theme/Global-CSS auslagern
   ========================================================================== */

.elementor-nav-menu--dropdown {
    width: 100vw !important;
    max-width: none !important;
    z-index: 99 !important;
    text-decoration: none;
    color: var(--nav-text) !important;
    background-color: var(--nav-bg) !important;
}

/* Hintergrund & Padding Untermenüs */
ul.sub-menu.elementor-nav-menu--dropdown.sm-nowrap[style] {
    background-color: var(--nav-bg) !important;
    padding: 20px 0 !important;
}

/* Login/Logout Button */
.loginbutton {
    font-size: 16px;
    font-weight: 400;
    padding: 4px 15px 5px 15px !important;
    color: var(--nav-text) !important;
    background-color: transparent;
    border: 1px solid var(--nav-text);
    border-radius: 30px;
    white-space: nowrap;
}

a.loginbutton[data-login-state="logged-in"]:hover,
a.loginbutton[data-login-state="logged-out"]:hover,
a.loginbutton[data-login-state="logged-in"]:hover .logout-icon {
    background-color: var(--nav-hover-bg) !important;
    color: var(--nav-hover-text) !important;
}

/* Hauptmenüpunkte */
.elementor-nav-menu>li>a.elementor-item {
    padding: 4px 15px 5px 15px !important;
    color: var(--nav-text) !important;
    background-color: transparent;
    border: 1px solid var(--nav-text);
    border-radius: 30px;
    margin-right: 10px !important;
}

.elementor-nav-menu>li>a.elementor-item:hover {
    background-color: var(--nav-hover-bg) !important;
    color: var(--nav-hover-text) !important;
}

.elementor-nav-menu .current-menu-item>a.elementor-item {
    background-color: var(--nav-hover-bg) !important;
    color: var(--nav-hover-text) !important;
}

/* Roter Punkt "Aktionstage" */
.aktionstage-dot {
    content: "";
    position: absolute;
    top: -4px;
    right: 2px;
    width: 14px;
    height: 14px;
    background-color: #FF0000;
    border-radius: 50%;
    z-index: 100;
    pointer-events: none;
}

/* Dropdown-Pfeile */
.user-logged-in .menu-item-has-children:hover>a>.sub-arrow,
.user-logged-out .menu-item-has-children:hover>a>.sub-arrow {
    filter: invert(1) !important;
}

.elementor-nav-menu>li {
    margin-bottom: 8px !important;
}

.elementor-sub-item {
    left: 40px !important;
}

.elementor-nav-menu .current-menu-item>a.elementor-sub-item,
.elementor-nav-menu a.elementor-sub-item.elementor-item-active {
    background-color: var(--nav-bg) !important;
    color: var(--nav-text) !important;
}

/* Untermenü-Hover (underline-Ersatz) */
.elementor-nav-menu--dropdown a {
    display: inline-block;
    border-bottom: 1px solid transparent !important;
}

.elementor-nav-menu--dropdown a:hover {
    text-decoration: none !important;
    border-bottom: 1px solid currentColor !important;
    background-color: var(--nav-bg) !important;
    color: var(--nav-text) !important;
}

.elementor-nav-menu>li>a.elementor-item::after {
    background-color: var(--nav-hover-bg) !important;
    color: var(--nav-hover-text) !important;
}

/* Dropdown-Pfeil-Icon */
.menu-item-has-children>a>.sub-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    margin-top: 2px;
    vertical-align: middle;
    background-image: url('/wp-content/uploads/dropdown-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(0);
}

.menu-item-has-children:hover>a>.sub-arrow,
.menu-item-has-children>a[aria-expanded="true"]>.sub-arrow {
    transform: translateY(0);
}

/* Mobile-Fix: Buttons auf kleinen Screens */
@media (max-width: 768px) {
    .elementor-nav-menu>li>a.elementor-item {
        display: block;
        width: 80% !important;
        text-align: center !important;
        background-color: var(--nav-bg) !important;
        text-align: left;
        padding: 10px 12px !important;
        /* doppelte Angaben bereinigt */
        font-size: 15px;
    }
}