.portal-menu {
    font-family: inherit;
    width: 100%;
}

.portal-menu__list,
.portal-menu__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-menu__item {
    margin-bottom: 4px;
}

/* Base Links & Triggers */
.portal-menu__link,
.portal-menu__accordion-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--pm-radius);
    transition: background 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

/* Standard Hover & Focus */
.portal-menu__link:hover,
.portal-menu__accordion-trigger:hover,
.portal-menu__link:focus,
.portal-menu__accordion-trigger:focus {
    background: var(--pm-hover-bg);
    outline: 2px solid transparent; /* Fallback */
}

/* Tastatur-Fokus Barrierefreiheit */
.portal-menu__link:focus-visible,
.portal-menu__accordion-trigger:focus-visible {
    outline: 2px solid var(--pm-active-bg);
    outline-offset: -2px;
}

/* ==================================================
   ACTIVE STATES (ERSTE EBENE) 
   ================================================== */

/* Hauptpunkt aktiv: Sowohl Accordion-Button als auch direkter Link */
.portal-menu__item--active > .portal-menu__accordion-trigger,
.portal-menu__item--active > .portal-menu__link,
.portal-menu__link--current {
    background-color: var(--pm-active-bg) !important;
    color: var(--pm-active-text) !important;
}

/* Verhindert, dass der Hover-Zustand die aktive Farbe wegnimmt */
.portal-menu__item--active > .portal-menu__accordion-trigger:hover,
.portal-menu__item--active > .portal-menu__link:hover,
.portal-menu__link--current:hover {
    background-color: var(--pm-active-bg) !important;
    filter: brightness(0.9); /* Dezente Verdunklung beim Hover, damit es reagiert */
    color: var(--pm-active-text) !important;
}

/* ==================================================
   SUBMENU STYLES (ZWEITE EBENE) 
   ================================================== */

.portal-menu__sublist {
    padding-left: 16px;
    margin-top: 4px;
    overflow: hidden;
}

.portal-menu__subitem {
    margin-bottom: 2px;
}

.portal-menu__subitem .portal-menu__link {
    font-weight: 400;
    font-size: 0.95rem;
    padding: 8px 16px;
}

/* Der aktive Unterpunkt selbst */
.portal-menu__subitem--current .portal-menu__link {
    font-weight: 700;
    color: var(--pm-active-bg);
    background-color: rgba(0, 0, 0, 0.03); /* Ganz zarter Hintergrund */
}

/* ==================================================
   BADGES & ICONS
   ================================================== */

.portal-menu__badge {
    background: var(--pm-badge-bg);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

/* Badge-Farbe umkehren, wenn der Hauptpunkt farbig (aktiv) hinterlegt ist */
.portal-menu__item--active > .portal-menu__accordion-trigger .portal-menu__badge,
.portal-menu__item--active > .portal-menu__link .portal-menu__badge {
    background-color: var(--pm-active-text) !important;
    color: var(--pm-active-bg) !important;
}

.portal-menu__text {
    flex-grow: 1;
}

/* Accordion Arrow */
.portal-menu__icon-arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.portal-menu__accordion-trigger[aria-expanded="true"] .portal-menu__icon-arrow {
    transform: rotate(180deg);
}