/* Grundstyling für die Kopfzeile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: #8d0303;
    display: flex;
    justify-content: flex-start;
    padding: 0 20px;
}

/* Hauptmenü-Liste */
.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* Einzelne Menüpunkte */
.nav-item {
    position: relative; /* Wichtig für die Positionierung des Dropdowns */
}

/* Styling der Hauptlinks */
.nav-item > a {
    display: block;
    color: white;
    padding: 15px 20px;
    text-decoration: none;
}

.nav-item > a:hover {
    background-color: #575757;
}

/* Das versteckte Dropdown-Menü */
.dropdown-menu {
    display: none; /* Standardmäßig unsichtbar */
    position: absolute;
    top: 100%; /* Direkt unterhalb des Hauptlinks positionieren */
    left: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1;
}

/* Links innerhalb des Dropdowns */
.dropdown-menu a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap; /* VERHINDERT DEN ZEILENUMBRUCH */
}

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

/* DER SCHLÜSSEL: Dropdown einblenden, wenn die Maus über den Nav-Item schwebt */
.nav-item:hover .dropdown-menu {
    display: block;
}
/* Styling für den reinen Text-Header im Menü */
.nav-item .nav-text {
    display: block;
    color: white;
    padding: 15px 20px;
    cursor: pointer; /* Zeigt die Hand als Mauszeiger */
}

/* Hover-Effekt für den reinen Text-Header */
.nav-item .nav-text:hover {
    background-color: #575757;
}

/* Styling für den Menü-Button (setzt Browser-Standards zurück) */
.nav-item .nav-btn {
    background: none;        /* Entfernt den grauen Standard-Hintergrund */
    border: none;            /* Entfernt den Standard-Rahmen */
    padding: 15px 20px;      /* Gleicher Innenabstand wie die normalen Links */
    color: white;            /* Textfarbe Weiß */
    font-family: inherit;    /* Übernimmt die Schriftart der restlichen Seite */
    font-size: inherit;      /* Übernimmt die Schriftgröße der restlichen Seite */
    cursor: pointer;         /* Zeigt die Hand als Mauszeiger */
    display: block;          /* Füllt die volle Höhe des Menüpunkts aus */
    width: 100%;             /* Nutzt die volle verfügbare Breite */
    text-align: left;        /* Richtet den Text linksbündig aus */
}

/* Hover-Effekt für den Button */
.nav-item .nav-btn:hover {
    background-color: #575757; /* Gleicher Hintergrund beim Überfahren wie die Links */
}