@media (max-width: 800px) {
    /* Versteckt das Listen-Menü auf mobilen Geräten */
    li {
        display: none;
    }

    /* Zeigt das mobile Menü auf mobilen Geräten an */
    #mobilemenu {
        display: block;
    }

    /* Optional: Stellen Sie sicher, dass der sidenav-Bereich auch sichtbar ist */
    .sidenav {
        display: block; /* nur sichtbar, wenn das Menü geöffnet ist, gesteuert durch JS */
    }
}

/* Stil für das gesamte Seiten-Navigationsmenü */
.sidenav {
    height: 100%; /* 100% Fensterhöhe */
    width: 0; /* 0 Breite - Das Menü ist standardmäßig ausgeblendet */
    position: fixed; /* Fixiertes Menü über dem Inhalt */
    z-index: 1; /* Liegt über anderen Elementen */
    top: 0; /* Ganz oben auf der Seite */
    left: 0; /* An der linken Seite der Seite */
    background-color: rgba(23, 162, 184, 0.8); /* Dunkler Hintergrund für das Menü */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    transition: 0.5s; /* Glatte Übergänge beim Öffnen/Schließen */
    padding-top: 60px; /* Abstand von oben */
}

/* Stil für Menüeinträge */
.sidenav a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

/* Stil für das Schließen-Kreuz */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.togglemenu {
    font-size: 36px; /* Setzt die Schriftgröße des Symbols */
    cursor: pointer; /* Zeigt einen Zeiger an, wenn man über das Symbol fährt */
    /* Optional: Anpassung des Zeilenabstands für eine bessere vertikale Zentrierung */
    line-height: 36px; /* Stellen Sie dies entsprechend der Schriftgröße ein */
    padding: 10px; /* Fügt etwas Platz um das Symbol für bessere Klickbarkeit hinzu */
}