/* Hover-Navigation für Bootstrap Package ab Desktop-Breite */
@media (min-width: 992px) {
    /* 1. Zeigt das Dropdown-Menü beim Hovern über den Listenpunkt */
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Verhindert eine Lücke, die den Hover-Effekt abbrechen lässt */
        opacity: 1;
        visibility: visible;
    }

    /* Optional: Aktiviert den Hover-Zustand für den Hauptmenüpunkt */
    .navbar-nav .nav-item.dropdown:hover .nav-link {
        color: var(--bs-navbar-active-color, #000);
    }
}

/* Reine CSS-Hover-Navigation für das Bootstrap Package */
@media (min-width: 992px) {
    /* Öffnet das Menü bei Mausberührung */
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0; /* Verhindert das Schließen durch Abstands-Lücken */
    }
}


/* Aktiviert den Hover-Effekt nur auf Desktop-Bildschirmen 
@media (min-width: 992px) {

  .navbar-nav .nav-item.nav-style-mega:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

@media (min-width: 992px) {

  .navbar-nav .nav-item.nav-style-simple:hover .dropdown-menu {
    display: block;
    margin-top: 50px; 
  }
}
*/


.navbar-nav .nav-link {

}
.dropend .dropdown-toggle {

}
.dropdown-item:hover {

}
.dropdown .dropdown-menu {
  display: none;
}
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}

.navbar-mainnavigation ul.dropdown-nav{width:350px;max-width: auto;}
.navbar-mainnavigation ul.dropdown-nav li.nav-item .nav-link{padding: 0; padding-left: 18px;}
.nav-link{color: #fff!important;}

#mainnavigation > ul >li:last-child .dropdown-menu{
  left: auto!important;
  right: 0!important;
}
.xdropdown-menu, ul.xdropdown-nav, xli.nav-item, .xnavbar-nav, .xnav-item{
  left: auto!important;
  right: 0!important;
}
@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
  .dropend .dropdown-toggle {
    margin-left: 0.5em;
  }
}






@media (min-width: 992px) { /* Oder dein entsprechender Breakpoint */
    .dropdown-menu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
}