body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    max-width: 80%;
    margin: 0 auto; /* Zentriert den Inhalt */
}

.menu {
    display: flex; /* Flexbox für das normale Menü */
    justify-content: space-between; /* Verteile den Platz gleichmäßig */
    background-color: #000;
    padding: 10px;
}

.menu a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

.menu a:hover {
    background-color: #444;
}

/* Hamburger Menü Button */
.menu-button {
    display: none; /* Standardmäßig versteckt */
    cursor: pointer;
    color: #fff;
}

/* Responsive Styles */
@media (max-width: 600px) {
    .menu {
        flex-direction: column; /* Menü auf mobilen Geräten vertikal anordnen */
        display: none; /* Standardmäßig versteckt */
    }

    .menu.active {
        display: flex; /* Zeigt das Menü an, wenn aktiv */
    }

    .menu-button {
        display: block; /* Zeigt die Schaltfläche auf mobilen Geräten an */
    }
}