.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu > ul {
    display: flex;
}
.menu > ul li a{
    text-transform:uppercase;
    text-decoration:none;  
    color:white!important; 
}
.menu > ul li:hover {
    color:white!important;
}
.menu > ul li:hover a{
    color:white!important;
}
.main-item {
    color: white;
    cursor: pointer;
    margin-inline:1rem;
}

.main-item:hover {
}


/* Großes Menü als Grid */
.big-size-menu {
    display: none; /* Standardmäßig versteckt */
    position: absolute;
    left: -10px;
    width: 100vw; /* Ganze Breite des Bildschirms */
    padding-block: 20px;
    box-sizing: border-box;
    z-index: 9999; /* Über anderen Inhalten anzeigen */
    color: white;
    /* transform: translateX(-100vw); */
}
.big-size-inner {
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 15px;
    background-color: hsl(0deg 0% 44% / 95%);
    padding: 2.5rem;
}
/* Untermenüpunkt-Stil */
.sub-menu-item {
    padding: 10px;
}

.sub-menu-item span {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.submenu {
    list-style: none;
    padding: 0;
}

.submenu li {
    padding: 5px 0;
}

.submenu-link {
    color: white;
    text-decoration: none;
}

.submenu-link:hover {
    color: #000;
}
.big-size-inner span {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: normal;
}

.big-size-inner ul.submenu {
    margin-left: 20px;
}
/* Großes Menü anzeigen bei Hover auf Hauptmenü */
.menu:hover .big-size-menu {
    display: inline-grid;
}



@media (max-width: 768px) {
    /* Grundstruktur des Menüs anpassen */
    .menu ul {
        display: flex;
        flex-direction: column;
        background-color: #333;
    }

    .main-item {
        padding: 15px;
    }

    /* Submenüs verstecken und als akordeonartige Ansicht vorbereiten */
    .big-size-menu {
        display: none;
        position: relative;
        width: 100%;
        background-color: #333;
        padding: 10px;
        box-sizing: border-box;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Aktivieren und Deaktivieren von geöffneten Untermenüs */
    .big-size-menu.active {
        display: grid; /* Das ausgewählte Untermenü wird eingeblendet */
    }
}







nav#navbar-main {
    justify-content: flex-start;
    padding-inline: 3rem;
    align-items: flex-start;
}

div#CollapsingNavbar {
    display: flex!important;
    flex-basis: auto;
    width: 100%;
    justify-content: space-between!important;
    padding-inline: 2rem;
}



div#CollapsingNavbar .nav.navbar-nav {
    display: flex;
    justify-content: space-evenly;
}
div#CollapsingNavbar .nav.navbar-nav > li > a {
    color: white;
    /* text-transform: uppercase; */
}
.dropdown ul.dropdown-menu {
    background: #353535e6!important;
    padding-inline: 1rem;
    padding-block:1rem;
    margin-inline: 2rem;
    width: max-content;
    border-radius: 30px;
    border: 4px solid var(--first-clr-100);
    max-width: var(--container-w);
    margin-inline: auto;
    left: 0;
    right: 0;
}
.dropdown ul.dropdown-menu a{
    color:white;
    text-decoration:none;
}
.dropdown-item:focus, 
.dropdown-item:hover {
    background-color: var(--first-clr-100);
}
.dropdown-item:focus a, 
.dropdown-item:hover a{
    color: black!important;
}

@media (max-width:980px) {
    .navbar-toggler {
        background-color: var(--first-clr-100)!important;
    }
    nav#block-stv-barrio-subtheme-main-menu {
        background: #353535e6!important;
        padding: 2rem 1rem;
        border-radius: 30px;
        border: 4px solid var(--first-clr-100);
    }
    .dropdown ul.dropdown-menu {
        background: transparent!important;
        padding-inline: 0rem;
        padding-block: 0 1rem;
        margin-inline: 0rem;
        border: none;
        margin-inline: 1rem;

    }
}