.navi-header {    
    padding:0 40px;
    background-color:var(--grau);
    min-height:80px;
    display:none;
}
.navi-header .navi {
    list-style-type: none;
    margin:0;
    padding-left:0;
    font-family:lato;
    font-size:16px;
}

.navi-header .navi li {
    float:left;
    margin-right:30px;
}
.navi-header .navi li a {
    text-decoration:none;
    color:#000000;
}

.navi li a::after {
	content: '';
    display: block;
    width: 0;
    height: 3px;
    background: var(--blau);
    transition: width .3s;
	margin-top:6px;
}
.navi li a:hover::after {
	width:100%;
}

.navi li.active a::after {
	content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: var(--blau);
    transition: width .3s;
	margin-top:6px;
}

/* Stil für das Untermenü */
.navi li .submenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: none; /* Versteckt das Untermenü standardmäßig */
    position: absolute;
    background-color: var(--grau);
    padding: 10px 0;
    min-width: 200px; /* Breite des Dropdowns */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.navi li .submenu li {
    margin: 0;
    padding: 0;
    width:100%;
}

.navi li .submenu li a {
    color: #000000;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}

.navi li .submenu li a:hover {
    background-color: var(--blau); /* Hintergrundfarbe beim Hover */
    color: #ffffff;
}

/* Anzeige des Untermenüs beim Hover auf das übergeordnete Menüelement */
.navi li:hover > .submenu {
    display: block;
}

/* Sicherstellen, dass übergeordnete Elemente korrekt dargestellt werden */
.navi li {
    position: relative; /* Wichtig für das Positionieren des Untermenüs */
}



@media(min-width:950px){
    .navi-header {  
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
}