/* Menüband-Container */
.menu-container {
    position: fixed; /* Fixiert das Menüband */
    top: 0; /* Startet ganz oben */
    left: -120px; /* Standardmäßig ausgeblendet (außerhalb des Bildschirms) */
    width: 120px; /* Breite des Menüs */
    height: 100%; /* Höhe des Menüs über die gesamte Bildschirmhöhe */
    background-color: #ffff00; /* Heller Hintergrund */
    border-right: 2px solid #ff0000; /* Trennlinie rechts */
    padding-top: 82px; /* Platz für den Header */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    z-index: 1000; /* Sicherstellen, dass das Menü über dem Hauptinhalt liegt */
    overflow-y: auto; /* Scrollbar, falls der Inhalt zu groß ist */
    transition: left 0.3s ease; /* Sanfte Animation beim Ein- und Ausblenden */
}

/* Menü eingeblendet */
.menu-container.visible {
    left: 0; /* Menü wird eingeblendet */
}

/* Menübaum */
.menu-tree {
    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
    padding: 0;
    margin: 0;
}

.menu-tree li {
    margin: 10px 0; /* Abstand zwischen den Links */
}

.menu-tree a {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: #ffff00; /* Textfarbe */
    font-size: 1rem; /* Schriftgröße */
    display: block; /* Block-Layout für die Links */
    padding: 10px 12px; /* Innenabstand: 10px oben/unten, 12px links/rechts */
    background-image: url('../images/button_rot.png'); /* Hintergrundbild */
    background-size: calc(100% - 4px) 100%; /* Bildbreite: 100% minus 4px (2px links + 2px rechts), Höhe: 100% */
    background-repeat: no-repeat; /* Bild nicht wiederholen */
    background-position: center; /* Bild zentrieren */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s ease, color 0.3s ease; /* Sanfte Animation beim Hover */
}

/* Hover-Effekt */
.menu-tree a:hover {
    background-image: url('../images/button_rot.png'); /* Hintergrundbild bleibt gleich */
    color: #fff; /* Weiße Textfarbe beim Hover */
}

/* Aktiver Link */
.menu-tree a.active {
    font-weight: bold; /* Fettgedruckt */
    color: #fff; /* Weiße Textfarbe für die aktive Seite */
    background-image: url('../images/button_rot.png'); /* Hintergrundbild */
    background-size: calc(100% - 4px) 100%; /* Bildbreite: 100% minus 4px (2px links + 2px rechts), Höhe: 100% */
}

/* Untermenü */
.menu-tree ul li ul {
    margin-left: 20px; /* Optional: Einrückung für Untermenüs */
    margin-top: 5px;
    padding-left: 0; /* Entfernt zusätzlichen Innenabstand */
}

.menu-tree ul li ul li a {
    font-weight: normal; /* Normale Schrift für Untermenüs */
    color: #333; /* Dunklere Farbe für Untermenüs */
    text-decoration: none; /* Entfernt Unterstreichung */
}

.menu-tree ul li ul li a:hover {
    background-color: #f1f1f1; /* Heller Hintergrund beim Hover */
    color: #000; /* Schwarze Farbe beim Hover */
}


/* Untermenü standardmäßig ausgeblendet */
.menu-tree .submenu {
    list-style-type: none !important; /* Entfernt die Aufzählungszeichen */
    display: none; /* Versteckt das Untermenü */
    margin-left: 0;
    padding-left: 20px;
}

/* Sichtbares Untermenü */
.menu-tree .submenu.visible {
    display: block; /* Zeigt das Untermenü an */
}

/* Symbol für das Ein-/Ausklappen */
.menu-tree .has-submenu > a::after {
    content: '▼'; /* Pfeil nach unten */
    position: absolute;
    right: 10px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* Symbol drehen, wenn aktiv */
.menu-tree .has-submenu.open > a::after {
    transform: rotate(-180deg); /* Pfeil nach oben */
}

/* Breitere Buttons für Untermenüs */
.menu-tree .has-submenu > a {
    padding-right: 30px; /* Zusätzlicher Platz für das Symbol */
    position: relative; /* Für das Symbol */
}

/* Breitere Buttons für Untermenü-Links */
.menu-tree .submenu li a {
    padding-left: 15px; /* Einrückung für Untermenü-Links */
    background-size: calc(100% - 8px) 100%; /* Breiterer Hintergrund */
}

/* Desktop-Ansicht: Menü immer eingeblendet */
@media (min-width: 769px) {
    .menu-container {
        left: 0; /* Menü immer sichtbar */
        transition: none; /* Keine Animation */
    }

    .header-menu-buerger {
        display: none; /* Menü-Bürger-Button ausblenden */
    }
}

/* Mobile Ansicht: Menü standardmäßig ausgeblendet */
@media (max-width: 768px) {
    .menu-container {
        left: -120px; /* Menü standardmäßig ausgeblendet */
    }

    .menu-container.visible {
        left: 0; /* Menü wird eingeblendet */
    }

    .header-menu-buerger {
        display: block; /* Menü-Bürger-Button anzeigen */
    }
}