nav.navigation-bar {
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 2;
    flex: 0;
    background-color: #333;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 234, 62, 0.2);
    align-items: center;
    justify-content: space-between;
}

nav.navigation-bar > svg {
    max-width: 9rem;
}

nav.navigation-bar > svg path {
    fill: var(--primary-color);
}

nav.navigation-bar button#menu-button {
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    cursor: pointer;
    padding: .5rem .5rem;
    border-radius: .25rem;
    transition: background 0.3s ease;
}

nav.navigation-bar button.menu-button:hover {
    background: rgba(255, 234, 62, 0.2);
}

.sidebar {
    width: 80vw;
    background: linear-gradient(to right, #1f2532cc, #333333cc);
    backdrop-filter: blur(5px);
    padding: 2rem;
    border-right: 1px solid rgba(255, 234, 62, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

body.menu-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
}

/*
Erklärung zum Responsive Design:

Oben die Sidebar erstellt und wir sagen, sie soll "fixed" sein, also immer am Bildschirmrand kleben.
Mit translateX(-100%) verstecken wir sie aber, indem wir sie links aus dem Bildschirm ziehen.
Erst, wenn der Body Tag die Klasse "menu-open" bekommt, soll die Sidebar sichtbar werden, indem
wir mit translateX(0) die Sidebar wieder in den sichtbaren Bereich schieben.

Ab 1024 Pixeln Bildschirmbreite sagen wir nun, dass die Sidebar immer sichtbar sein soll und wir blenden
den Menü Button aus, da er nicht mehr benötigt wird.
*/
@media screen and (min-width: 1024px) {
    .sidebar {
        padding-top: 4rem;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(0);
        background: rgba(255, 234, 62, 0.05);
        width: 300px;
    }
    nav.navigation-bar {
        padding: 1rem 2rem;
    }
    button#menu-button {
        display: none;
    }

    #content {
        margin-left: 300px;
    }
}

.sidebar-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffea3e;
}

.sidebar-item {
    display: block;
    background: rgba(255, 234, 62, 0.1);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 234, 62, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.sidebar-item:hover, .sidebar-item.active {
    background: rgba(255, 234, 62, 0.2);
    transform: translateX(5px);
}

.sidebar-item h3 {
    margin: 0 0 0.5rem 0;
    color: #ffea3e;
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0.8;
}

.sidebar-item p {
    margin: 0;
    color: #dac73b;
    font-size: 0.9rem;
    opacity: 0.6;
}