/**
 * Projektname    : The Story
 * Pfad           : /general/css/
 * Dateiname      : menu.css
 * Erstellungsdatum: 2025-06-06
 * Dateiversion   : 1.9
 * Änderungsdatum : 2025-06-07
 * Entwicklername : Firefly
 */

/* Standard: Hamburger-Button ausblenden */
.topnav .icon {
    display: none;
}

/* Top-Level Menü */
.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    position: relative;
    background-color: #333;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Top-Level Punkte */
.topnav > li {
    position: relative;
}

.topnav a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.topnav a:hover {
    background-color: #575757;
}

/* Überpunkte (ohne URL) → Dropdown Trigger */
.topnav > li.menu-parent {
    cursor: pointer;
    position: relative;
}

.topnav > li.menu-parent > a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.topnav > li.menu-parent > a:hover {
    background-color: #575757;
}

/* Dropdown-Pfeil bei Überpunkt */
.topnav > li.menu-parent > a::after {
    content: " ▼";
    font-size: 12px;
    color: #f2f2f2;
}

/* Dropdown Submenu */
.topnav .submenu {
    display: none;
    position: absolute;
    background-color: #444;
    border-radius: 0 0 8px 8px;
    min-width: 180px;
    z-index: 1;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.topnav .submenu li {
    display: block;
    text-align: left;
}

.topnav .submenu a {
    padding: 10px 16px;
    display: block;
    color: #f2f2f2;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.topnav .submenu a:hover {
    background-color: #575757;
}

/* Submenu "Überschrift" ohne Link */
.submenu-title {
    padding: 10px 16px;
    color: #f2f2f2;
    font-weight: bold;
    background-color: #555;
    cursor: default;
}

/* Hover → show submenu → Desktop */
.topnav > li.menu-parent:hover > .submenu,
.topnav > li.menu-parent:focus-within > .submenu {
    display: block;
}

/* Responsive Menü */
@media screen and (max-width: 600px) {

    /* Standard: nur Icon sichtbar → alle anderen LI ausblenden */
    .topnav li:not(.icon) {
        display: none;
    }

    /* Wenn responsive → alle li sichtbar */
    .topnav.responsive li {
        display: block;
        width: 100%;
    }

    /* Überpunkt + normaler Link → Mobil-Style */
    .topnav.responsive li.menu-parent > a,
    .topnav.responsive li > a {
        background-color: #333;
        color: white;
        padding: 14px 16px;
        cursor: pointer;
        border-top: 1px solid #444;
    }

    /* Dropdown-Pfeil bleibt */
    .topnav.responsive li.menu-parent > a::after {
        content: " ▼";
        font-size: 12px;
        color: #f2f2f2;
    }

    /* Submenu → per .open sichtbar */
    .topnav.responsive .submenu {
        display: none;
        position: static;
        background-color: #444;
        padding-left: 20px;
        padding-bottom: 10px;
        border-left: 3px solid #333;
        margin: 0;
    }

    .topnav.responsive .submenu.open {
        display: block !important;
    }

    .submenu-title {
        padding-left: 20px;
        color: #f2f2f2;
        font-weight: bold;
        background-color: #555;
        padding: 10px 16px;
        cursor: default;
    }

    /* Hamburger-Button → eigene Zeile */
    .topnav .icon {
        display: block;
        width: 100%; /* eigene Zeile */
        position: relative; /* NEU → statt absolute */
        right: auto;
        top: auto;
        text-align: right; /* Icon rechts */
        background-color: #333;
        padding: 14px 16px;
        font-size: 24px;
        cursor: pointer;
    }
}