/* Grundlegende ul- und li-Stile */
.category-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-navigation li {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
}

.category-navigation li a {
    text-decoration: none;
    display: inline-block;
    padding: 5px 0;
    color: inherit;
    width: calc(100% - 20px); /* Platz schaffen für das Plus/Minus-Symbol */
    box-sizing: border-box;
    position: relative;
}

/* Untermenüs sollen unterhalb der Parent-Kategorien erscheinen */
.category-navigation .sub-menu {
    display: none; /* Standardmäßig ausgeblendet */
    margin-left: 20px; /* Einrückung für Hierarchie */
}

/* Plus/Minus-Symbol neben Kategorien mit Untermenüs */
.category-navigation li.menu-item-has-children > .toggle-button {
    cursor: pointer;
    padding: 0 10px;
    font-size: 1.5em;
    color: inherit;
    transition: transform 0.3s ease;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(calc(50% - 0.75em));
}

/* Plus-Zeichen (standardmäßig) */
.category-navigation li.menu-item-has-children > .toggle-button::before {
    content: '+';
}

/* Minus-Zeichen, wenn das Untermenü geöffnet ist */
.category-navigation li.menu-item-has-children.open > .toggle-button::before {
    content: '-';
}

/* Aktiver Menüpunkt */
.category-navigation li.current-menu-item > a {
    font-weight: bold;
}