/* Menü */
#nav {
    margin: 0;
    padding: 0;
    position: relative;
}

#menu1 {
    display: none; /* Zuerst verstecken */
    position: relative; /* Ändere es zu relative */
    z-index: 1000;
    width: 100%;
    background: #4caf50; /* Hintergrundfarbe */
    transition: max-height 0.3s ease; /* Für eine sanfte Animation */
    max-height: 0; /* Startwert für max-height */
    overflow: hidden; /* Versteckt überlaufenden Inhalt */
    text-align: center; /* Zentriere den Text */
}

#menu1 ul {
    display: flex; /* Flexbox verwenden */
    flex-direction: column; /* Elemente in einer Spalte anordnen */
    align-items: center; /* Zentriert die Elemente horizontal */
    padding: 0; /* Entferne Standard-Padding */
    margin: 0; /* Entferne Standard-Margin */
}

#menu1 li {
    list-style-type: none;
    margin: 10px 0; /* Abstand zwischen den Elementen */
}

#menu1 li a {
    text-decoration: none;
    color: #fff; /* Textfarbe */
    font-size: 1.5rem; /* Schriftgröße */
    text-transform: none; /* Keine Großbuchstaben */
    font-family: 'Quicksand', sans-serif; /* Neue Schriftart */
}

#menu1 li a:hover {
    color: #F44336; /* Hover-Farbe */
}

/* Hamburger Menü Button */
.menu-toggle {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 0px;  
    right: 0px;
    z-index: 1010; 
    width: 55px; 
    height: 55px; 
    background-color: #2f2f2f; /* Dunkelgrau */
    border-radius: 50%; 
    display: flex;
    flex-direction: column; /* Spaltenanordnung für die Striche */
    justify-content: center; /* Zentriert die Striche */
    align-items: center; 
    border: 2px solid #fff; 
}

.menu-toggle span {
    display: block;
    width: 25px; 
    height: 4px; 
    background-color: #ffffff; /* Farbe der Striche */
    margin: 3px 0; /* Abstand zwischen den Strichen */
    transition: 0.3s ease; 
}

/* Buttons */
#nav label.button-open,
#nav label.button-close {
    cursor: pointer;
    position: absolute;
    top: 1rem;
    z-index: 1001; 
    background: transparent; 
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 3rem;
    width: 3rem;
    height: 3rem;
}

#nav label.button-open {
    left: 1rem;
}

#nav label.button-close {
    right: 1rem;
    opacity: 0;
}

input[type="checkbox"] {
    display: none; /* Checkbox verstecken */
}

input#open-menue:checked ~ #menu1 {
    display: block; /* Zeige das Menü */
    max-height: 500px; /* Setze eine maximale Höhe für das Menü */
}