/* =============================================
   ARTIKEL_UEBERSICHT.CSS - Kaskadierendes Menü
   ============================================= */

/* Wrapper für Positionierung */
.cascading-menu-wrapper {
    position: absolute;
    top: 85px; /* Abstand vom oberen Bildschirmrand */
    left: 20px;
    z-index: 1050; /* Über dem Seiteninhalt */
}

/* Der sichtbare Trigger ("KATEGORIEN") */
.category-menu-trigger {
    background-color: var(--color-secondary);
    color: var(--color-text);
    padding: 10px 20px;
    font-family: var(--font-headline);
    font-size: 1.1rem;
    letter-spacing: 1px;
    cursor: pointer;
    border: 1px solid #444;
    border-radius: 4px;
    display: inline-block;
    user-select: none; /* Verhindert Textauswahl beim Klicken */
}
/* Hover/Fokus-Effekt für Desktop & Mobile (Klick) */
.category-menu-trigger:hover,
.category-menu-trigger.menu-active { /* JS fügt .menu-active hinzu */
    background-color: #333;
    color: white;
}

/* Hauptmenü (ul) - Standardmäßig versteckt */
.category-menu-main {
    display: none; /* Wird per JS gesteuert */
    position: absolute;
    top: 100%; /* Direkt unter dem Trigger */
    left: 0;
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    background-color: var(--color-dark);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    width: 300px; /* Breite des Hauptmenüs */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
/* Sichtbar machen via JS */
.category-menu-main.visible {
    display: block;
}

/* Hauptmenü-Einträge (li) */
.category-menu-main > li {
    position: relative; /* Wichtig für Untermenü-Positionierung */
    border-bottom: 1px solid var(--color-secondary);
}
.category-menu-main > li:last-child {
    border-bottom: none;
}

/* Hauptmenü-Links (a) */
.category-menu-main > li > a {
    display: flex; /* Flexbox für Pfeil-Ausrichtung */
    justify-content: space-between; /* Text links, Pfeil rechts */
    align-items: center;
    padding: 12px 20px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 1rem;
    white-space: nowrap;
}
.category-menu-main > li > a:hover,
.category-menu-main > li > a.active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/* Pfeil für Untermenü */
.submenu-arrow {
    margin-left: 10px;
    color: #888;
    font-size: 0.8em;
}
.category-menu-main > li > a:hover .submenu-arrow {
    color: var(--color-primary);
}

/* Untermenü (ul) - Standardmäßig versteckt */
.category-menu-sub {
    display: none; /* Wird per CSS :hover oder JS gesteuert */
    position: absolute;
    top: -1px; /* Leichte Überlappung */
    left: 100%; /* Rechts neben dem Parent */
    list-style: none;
    padding: 0;
    margin: 0 0 0 1px;
    background-color: var(--color-dark);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    width: 300px; /* Breite des Untermenüs */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
    opacity: 0; /* Für sanftes Einblenden */
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Untermenü sichtbar machen (Desktop Hover) */
.category-menu-main > li.has-submenu:hover > .category-menu-sub {
    display: block; /* Oder flex/grid, je nach Inhalt */
    opacity: 1;
    visibility: visible;
}
/* Untermenü sichtbar machen (Mobile Klick via JS) */
.category-menu-main > li.has-submenu.submenu-active > .category-menu-sub {
     display: block;
     opacity: 1;
     visibility: visible;
}


/* Untermenü-Einträge (li) */
.category-menu-sub li {
    border-bottom: 1px solid var(--color-secondary);
}
.category-menu-sub li:last-child {
    border-bottom: none;
}

/* Untermenü-Links (a) */
.category-menu-sub a {
    display: block;
    padding: 10px 20px;
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.category-menu-sub a:hover,
.category-menu-sub a.active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/* Globale Stile für die Seite bleiben erhalten */
.overview-header { padding