/* Haupt-Navigationsleiste */
.navbar {
    background-color: #333;  /* Hintergrundfarbe der Navigationsleiste */
    overflow: hidden;        /* Verhindert Überlauf von Inhalten */
    color: white;            /* Textfarbe in der Navigationsleiste */
    padding: 14px 20px;      /* Innenabstand oben/unten und links/rechts */
    text-align: left;        /* Textausrichtung auf der linken Seite */
    position: relative;      /* Ermöglicht die Positionierung von Kind-Elementen */
}

/* Rechte Seite der Navigationsleiste für Links */
.navbar .nav-right {
    position: absolute;      /* Positioniert das Element relativ zur .navbar */
    right: 20px;             /* Abstand von der rechten Seite */
    top: 0;                  /* Abstand von der oberen Seite */
    display: flex;           /* Verwenden von Flexbox für die Ausrichtung */
    align-items: center;     /* Zentriert die Elemente vertikal */
    height: 100%;            /* Höhe auf 100% der Elternhöhe setzen */
}

/* Links auf der rechten Seite der Navigationsleiste */
.navbar .nav-right a {
    color: white;            /* Textfarbe der Links */
    padding: 0 5px;          /* Innenabstand links/rechts */
    text-decoration: none;   /* Entfernt die Unterstreichung der Links */
}

/* Hover-Effekt für Links auf der rechten Seite der Navigationsleiste */
.navbar .nav-right a:hover {
    text-decoration: underline;  /* Unterstreichung bei Hover-Effekt */
}

/* Seitennavigation (Sidebar) */
.sidenav {
    height: 100%;            /* Höhe auf 100% des Bildschirms setzen */
    width: 0;                /* Startbreite auf 0 setzen (eingeklappt) */
    position: fixed;         /* Fixiert die Sidebar relativ zum Bildschirm */
    z-index: 1;              /* Stellt sicher, dass die Sidebar über anderen Inhalten liegt */
    top: 0;                  /* Abstand von der oberen Seite */
    left: 0;                 /* Abstand von der linken Seite */
    background-color: #333;  /* Hintergrundfarbe der Sidebar */
    overflow-x: hidden;      /* Verhindert horizontales Scrollen */
    transition: 0.5s;        /* Übergangseffekt bei Öffnen/Schließen */
    padding-top: 60px;       /* Innenabstand oben */
}

/* Links innerhalb der Sidebar */
.sidenav a {
    padding: 8px 8px 8px 32px; /* Innenabstand der Links (oben, rechts, unten, links) */
    text-decoration: none;     /* Entfernt die Unterstreichung der Links */
    font-size: 18px;           /* Schriftgröße der Links */
    color: white;              /* Textfarbe der Links */
    display: block;            /* Macht die Links block-level Elemente */
    transition: 0.3s;          /* Übergangseffekt bei Hover-Effekt */
}

/* Hover-Effekt für Links in der Sidebar */
.sidenav a:hover {
    background-color: #575757; /* Hintergrundfarbe bei Hover-Effekt */
}

/* Schließen-Button der Sidebar */
.sidenav .closebtn {
    position: absolute;      /* Positioniert den Button relativ zur Sidebar */
    top: 0;                  /* Abstand von der oberen Seite */
    right: 25px;             /* Abstand von der rechten Seite */
    font-size: 36px;         /* Schriftgröße des Buttons */
    margin-left: 50px;       /* Abstand nach links */
}

/* Dropdown-Button innerhalb der Sidebar */
.dropdown-btn {
    cursor: pointer;         /* Cursor als Zeiger anzeigen */
    font-size: 18px;         /* Schriftgröße des Buttons */
    border: none;            /* Entfernt den Rahmen des Buttons */
    background: none;        /* Kein Hintergrund */
    color: white;            /* Textfarbe des Buttons */
    text-align: left;        /* Textausrichtung auf der linken Seite */
    padding: 8px 8px 8px 32px; /* Innenabstand des Buttons */
    width: 100%;             /* Breite auf 100% der Sidebar setzen */
    outline: none;           /* Entfernt den Umriss des Buttons */
}

/* Container für Dropdown-Menü in der Sidebar */
.dropdown-container {
    display: none;           /* Anfangs nicht angezeigt */
    background-color: #444; /* Hintergrundfarbe des Dropdown-Menüs */
    padding-left: 8px;      /* Innenabstand links */
}

/* Button zum Öffnen der Sidebar auf kleinen Bildschirmen */
.open-btn {
    cursor: pointer;         /* Cursor als Zeiger anzeigen */
    font-size: 18px;         /* Schriftgröße des Buttons */
}

/* Stile für Bildschirme mit einer maximalen Breite von 768px (Responsive Design) */
@media screen and (max-width: 768px) {
    .open-btn {
        display: block;      /* Zeigt den Button an */
    }

    .navbar .nav-right {
        position: static;   /* Positionierung ändern, um in den Fluss des Dokuments zu passen */
        display: block;     /* Zeigt die Links als Block-Elemente an */
        text-align: right;  /* Textausrichtung auf der rechten Seite */
        margin-top: 10px;   /* Abstand nach oben */
    }

    .navbar .nav-right a {
        display: inline-block; /* Zeigt die Links nebeneinander an */
        margin: 0 5px;         /* Abstand zwischen den Links */
    }
}