/* ============================================
   VERTIKALES MENÜ – BASIS
   ============================================ */

.side-menu-vertical {
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0;
}

.side-menu-vertical > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-menu-vertical > ul > li > a {
    display: block;
    background-color: #da121a;
    color: #fff;
    padding: 12px 16px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
}

.side-menu-vertical > ul > li > a:hover {
    background-color: #7a0000;
}

/* ============================================
   UNTERMENÜ – STANDARD ZU
   ============================================ */

.side-menu-vertical ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    background: #fff;
}

/* ============================================
   UNTERMENÜ – ÖFFNEN PER HOVER + TASTATUR
   ============================================ */

.side-menu-vertical li.m-has-submenu:hover > ul,
.side-menu-vertical li.m-has-submenu:focus-within > ul {
    display: block;
}

/* ============================================
   UNTERMENÜ – LINKS
   ============================================ */

.side-menu-vertical ul ul li a {
    display: block;
    padding: 6px 14px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.side-menu-vertical ul ul li a:hover {
    background-color: #f2f2f2;
}

/* ============================================
   OPTIONAL: MEHRERE EBENEN
   ============================================ */

.side-menu-vertical ul ul ul {
    margin-left: 10px;
    border-left: 2px solid #eee;
}

/* Aktiver Hauptpunkt */
.side-menu-vertical > ul > li > a.active {
    background-color: #7a0000;
    color: #fff;
}

/* Aktiver Unterpunkt */
.side-menu-vertical ul ul li a.active {
    background-color: #ccc;
    color: #000;
    font-weight: 600;
}

/* Pfeile */
.side-menu-vertical > ul > li > a[role="button"] {
    position: relative;
    padding-right: 30px;
}

.side-menu-vertical > ul > li > a[role="button"]::after {
    content: "▸";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

/* Pfeil offen */
.side-menu-vertical li.m-has-submenu:hover > a[role="button"]::after,
.side-menu-vertical li.m-has-submenu:focus-within > a[role="button"]::after {
    content: "▾";
}

/* Pfeil vor Untermenü-Links */
.side-menu-vertical ul ul li a {
    position: relative;
    padding-left: 22px;
}

.side-menu-vertical ul ul li a::before {
    content: "›";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #666;
}

.side-menu-vertical ul ul li a.active::before {
    content: "▸";
    color: #000;
}