/* =========================================================
   FWG Trier – Modernisierung
   Allgemeine gestalterische Anpassungen der Website
   ========================================================= */


/* =========================================================
   Seitennavigation auf Unterseiten
   ========================================================= */

.frame-type-menu_subpages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.frame-type-menu_subpages li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
}

.frame-type-menu_subpages li:first-child {
    border-top: 1px solid #e5e5e5;
}

.frame-type-menu_subpages li a {
    display: block;
    padding: 12px 10px;
    color: #444 !important;
    font-size: 17px;
    line-height: 1.35;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.frame-type-menu_subpages li a:hover,
.frame-type-menu_subpages li a:focus {
    color: #222 !important;
    background: #f5f7f2;
}


/* =========================================================
   Desktop Navigation
   ========================================================= */

@media (min-width: 992px) {

    /* Grunddesign aller Dropdowns */
    #navbarNavDropdown .dropdown-menu {
        background: #fff3e6 !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 5px !important;
        padding: 8px 0 !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important;
    }

    /* Menüeinträge */
    #navbarNavDropdown .dropdown-menu > li > a {
        display: block !important;
        padding: 8px 18px !important;
        line-height: 1.3 !important;
        color: #3f3f3f !important;
        background: transparent !important;
        white-space: normal !important;
    }

    /* Hover */
    #navbarNavDropdown .dropdown-menu > li > a:hover,
    #navbarNavDropdown .dropdown-menu > li > a:focus,
    #navbarNavDropdown .dropdown-menu a.highlighted {
        color: #222 !important;
        background: #ffe1bf !important;
    }

    /* Normale Unter-Untermenüs */
    #navbarNavDropdown .dropdown-menu li.dropdown > .dropdown-menu {
        min-width: 260px !important;
        max-width: 360px !important;
    }

    /* Geschlossene SmartMenus-Untermenüs ausblenden */
    #navbarNavDropdown .dropdown-menu li.dropdown > .dropdown-menu[aria-hidden="true"] {
        display: none !important;
    }

    /* Einträge in Unter-Untermenüs */
    #navbarNavDropdown .dropdown-menu li.dropdown > .dropdown-menu > li > a {
        display: block !important;
        padding: 8px 12px !important;
        white-space: normal !important;
    }

    /* Pfeile bei weiteren Unterebenen */
    #navbarNavDropdown .dropdown-menu .has-submenu {
        position: relative !important;
        padding-right: 32px !important;
    }

    #navbarNavDropdown .dropdown-menu .sub-arrow {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }


    /* =====================================================
       Fächer – dreispaltig
       ===================================================== */

    #navbarNavDropdown li.dropdown:has(
        > a[href="/schule/faecher/bildende-kunst.html"]
    ) > .dropdown-menu {
        width: 720px !important;
        max-width: 720px !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    #navbarNavDropdown li.dropdown:has(
        > a[href="/schule/faecher/bildende-kunst.html"]
    ) > .dropdown-menu[aria-hidden="false"] {
        display: grid !important;
    }

    #navbarNavDropdown li.dropdown:has(
        > a[href="/schule/faecher/bildende-kunst.html"]
    ) > .dropdown-menu[aria-hidden="true"] {
        display: none !important;
    }


    /* =====================================================
       Bilder – zweispaltig
       ===================================================== */

    #navbarNavDropdown li.dropdown:has(
        > a[href^="/aktuelles/bilder/"]
    ) > .dropdown-menu {
        width: 500px !important;
        max-width: 500px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #navbarNavDropdown li.dropdown:has(
        > a[href^="/aktuelles/bilder/"]
    ) > .dropdown-menu[aria-hidden="false"] {
        display: grid !important;
    }

    #navbarNavDropdown li.dropdown:has(
        > a[href^="/aktuelles/bilder/"]
    ) > .dropdown-menu[aria-hidden="true"] {
        display: none !important;
    }

}