/*
 * SuperBeste Forum – LED Navigation
 * SMF 2.1 / Default Theme
 *
 * Normal: Hellblau, erhaben, LED aus
 * Aktiv:  Hellblau, versenkt, rote Schrift, LED an
 */

@media screen and (min-width: 561px) {

    /* ========================================
       1. Navigationsleiste
       ======================================== */

    ul.dropmenu.menu_nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;

        margin: 0 0 4px 0;
        padding: 0;
    }

    ul.dropmenu.menu_nav > li {
        display: block;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;
        line-height: normal;
        vertical-align: middle;
    }


    /* ========================================
       2. Normaler Button
       ======================================== */

    ul.menu_nav > li > a,
    ul.menu_nav > li > a:visited {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        column-gap: 7px;

        box-sizing: border-box;
        height: 28px;
        min-height: 28px;

        margin: 0;
        padding: 2px 27px 2px 10px;

        border: 1px solid #aac9de;
        border-radius: 9px;

        background: linear-gradient(
            to bottom,
            #f9fdff 0%,
            #e5f2fb 48%,
            #d0e5f4 100%
        );

        color: #315b82;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        text-decoration: none;
        text-shadow: none;

        box-shadow:
            0 2px 3px rgba(55, 92, 122, .16),
            inset 0 1px 1px #fff;

        transition:
            background .15s ease,
            box-shadow .15s ease,
            color .15s ease;
    }


    /* ========================================
       3. Einheitliche Icon-Spalte
       ======================================== */

    ul.menu_nav > li > a > .main_icons,
    ul.menu_nav > li > a > img,
    ul.menu_nav > li > a > svg,
    ul.menu_nav > li > a > .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        width: 20px;
        min-width: 20px;
        height: 20px;

        flex: 0 0 20px;

        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle;
    }

    /* SMF-Sprite-Icons */
    ul.menu_nav > li > a > .main_icons::before {
        display: block;
        flex: 0 0 16px;

        width: 16px;
        height: 16px;

        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle;
    }

    /* Bild-Icons */
    ul.menu_nav > li > a > img {
        object-fit: contain;
    }

    /* SVG-Icons */
    ul.menu_nav > li > a > svg {
        object-fit: contain;
    }


    /* ========================================
       4. Beschriftung
       ======================================== */

    ul.menu_nav > li > a > .textmenu {
        display: inline-block;
        flex: 0 0 auto;

        margin: 0 !important;
        padding: 0 !important;

        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: 20px;
        white-space: nowrap;
        text-shadow: inherit;
    }


    /* ========================================
       5. LED – ausgeschaltet
       ======================================== */

    ul.menu_nav > li > a::after {
        content: "";
        position: absolute;

        right: 10px;
        top: 50%;
        transform: translateY(-50%);

        width: 8px;
        height: 8px;

        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid #718ca2;

        background: radial-gradient(
            circle at 35% 30%,
            #edf5fa 0%,
            #a4b9c9 40%,
            #667f93 100%
        );

        box-shadow:
            inset 0 1px 2px rgba(35, 55, 75, .4),
            0 1px 1px rgba(255, 255, 255, .8);

        pointer-events: none;
    }


    /* ========================================
       6. Hover – normaler Button
       ======================================== */

    ul.menu_nav > li:hover > a:not(.active),
    ul.menu_nav > li > a:not(.active):focus-visible {
        color: #24547e;

        border-color: #91b6d0;

        background: linear-gradient(
            to bottom,
            #ffffff 0%,
            #edf7ff 45%,
            #dceefa 100%
        );

        text-decoration: none;
        text-shadow: none;

        box-shadow:
            0 2px 5px rgba(60, 100, 135, .22),
            inset 0 1px 2px #fff;
    }


    /* ========================================
       7. Aktiver Button – eingedrückt
       ======================================== */

    ul.menu_nav > li > a.active,
    ul.menu_nav > li > a.active:visited,
    ul.menu_nav > li > a.active:hover,
    ul.menu_nav > li > a.active:focus,
    ul.menu_nav > li:hover > a.active {
        color: #ce3038;
        font-weight: 600;

        border: 1px solid #96b7d0;

        /* Bleibt hellblau */
        background: linear-gradient(
            to bottom,
            #d7eafa 0%,
            #e0f0fa 50%,
            #e9f5fc 100%
        );

        text-decoration: none;

        text-shadow:
            0 0 4px rgba(245, 48, 55, .45);

        /* Innen- statt Außenschatten */
        box-shadow:
            inset 2px 3px 5px rgba(65, 100, 130, .28),
            inset -1px -1px 2px rgba(255, 255, 255, .9),
            0 0 5px rgba(255, 60, 65, .14);
    }


    /* ========================================
       8. LED – eingeschaltet
       ======================================== */

    ul.menu_nav > li > a.active::after,
    ul.menu_nav > li > a.active:hover::after {
        border-color: #e53c43;

        background: radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #ff9a98 24%,
            #ff333c 55%,
            #bf101c 100%
        );

        box-shadow:
            0 0 4px #ff5555,
            0 0 8px rgba(255, 45, 55, .65),
            0 0 12px rgba(255, 35, 45, .25),
            inset 0 0 2px #fff;
    }


    /* ========================================
       9. SMF-Untermenüs
       ======================================== */

    /* Untermenüs behalten das SMF-Design */
    ul.menu_nav > li > ul a {
        display: block;
    }

    /* Verhindert eine LED in Untermenüs */
    ul.menu_nav > li > ul a::after {
        content: none;
    }

    /* Untermenü-Positionierung */
    ul.menu_nav > li {
        position: relative;
    }

    /* Tastaturfokus */
    ul.menu_nav > li > a:focus-visible {
        outline: 2px solid #638fb3;
        outline-offset: 2px;
    }

}


/* ========================================
   10. Mobile Darstellung
   SMF-Standardnavigation beibehalten
   ======================================== */

@media screen and (max-width: 560px) {

    ul.menu_nav > li > a::after {
        content: none;
    }

}

/* ==========================================
   SuperBeste – eigene SVG-Navigationsicons
   ========================================== */

@media screen and (min-width: 561px) {

    /* Standard-SMF-Icons ausblenden,
       Platz und Ausrichtung beibehalten */
    ul.menu_nav > li > a > .main_icons::before {
        display: none;
    }

    /* Neue Icons als Hintergrundbild */
    ul.menu_nav > li > a > .main_icons {
        display: inline-block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;

        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
    }

    /* Übersicht */
    ul.menu_nav > li.button_home > a > .main_icons {
        background-image: url("../images/led-icons/uebersicht.svg");
    }

    /* Forum */
    ul.menu_nav > li.button_forum > a > .main_icons {
        background-image: url("../images/led-icons/forum.svg");
    }

    /* Suche */
    ul.menu_nav > li.button_search > a > .main_icons {
        background-image: url("../images/led-icons/suche.svg");
    }

    /* Moderieren */
    ul.menu_nav > li.button_moderate > a > .main_icons {
        background-image: url("../images/led-icons/moderieren.svg");
    }

    /* Kalender */
    ul.menu_nav > li.button_calendar > a > .main_icons {
        background-image: url("../images/led-icons/kalender.svg");
    }

    /* Mitglieder */
    ul.menu_nav > li.button_mlist > a > .main_icons {
        background-image: url("../images/led-icons/mitglieder.svg");
    }

}

/* Übersicht – altes PNG ersetzen */
ul.menu_nav > li.button_home > a > img {
    content: url("../images/led-icons/uebersicht.svg");
}

/* Forum – altes GIF ersetzen */
ul.menu_nav > li.button_forum > a > img {
    content: url("../images/led-icons/forum.svg");
}

/* Beide Icons identisch ausrichten */
ul.menu_nav > li.button_home > a > img,
ul.menu_nav > li.button_forum > a > img {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
}

/* SuperBeste – blauer Hintergrundverlauf */

html {
    background: #e9eef2;
}

body {
    background:
        linear-gradient(
            to bottom,
            #365d7c 0px,
            #527b9a 180px,
            #8caec6 420px,
            #dbe7ef 750px,
            #e9eef2 1050px
        ) no-repeat;

    background-color: #e9eef2;
}

/* SuperBeste – Header in Eisblau */

/* Header-Hintergrund */
#header {
    background: #EDF4FA;
    border: 1px solid #a5bed4;
    border-radius: 12px;
    padding: 10px 14px;
    overflow: hidden;
}

/* Titelbild sanft ausblenden */
#header img {
    display: block;
    border-radius: 4px;

    -webkit-mask-image:
        linear-gradient(to right,
            transparent, black 4%, black 96%, transparent),
        linear-gradient(to bottom,
            transparent, black 8%, black 92%, transparent);

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(to right,
            transparent, black 4%, black 96%, transparent),
        linear-gradient(to bottom,
            transparent, black 8%, black 92%, transparent);

    mask-composite: intersect;
}


/* SuperBeste – Rundenplanung */

@media screen and (min-width: 561px) {

    ul.menu_nav > li.button_rundenplanung > a > .main_icons::before {
        display: none;
    }

    ul.menu_nav > li.button_rundenplanung > a > .main_icons {
        display: inline-block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;

        background: url("../images/led-icons/rundenplanung.svg")
                    center / 20px 20px no-repeat;
    }
}

ul.menu_nav > li.button_rundenplanung > a > .main_icons {
    background-image: url("../images/led-icons/rundenplanung.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

ul.menu_nav > li.button_rundenplanung > a:focus,
ul.menu_nav > li.button_rundenplanung > a:active,
ul.menu_nav > li.button_rundenplanung > a:visited {
    background: linear-gradient(
        to bottom,
        #f0f8ff 0%,
        #d4e8f7 100%
    ) !important;

    color: #315b82 !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8) !important;
}

ul.menu_nav > li.button_rundenplanung > a,
ul.menu_nav > li.button_rundenplanung > a:link,
ul.menu_nav > li.button_rundenplanung > a:visited,
ul.menu_nav > li.button_rundenplanung > a:focus,
ul.menu_nav > li.button_rundenplanung > a:active {
    color: #315b82 !important;
    text-shadow: none !important;
    font-weight: 600;
    filter: none !important;
}

/* Beschriftung ausdrücklich vereinheitlichen */
ul.menu_nav > li.button_rundenplanung > a > .textmenu {
    color: inherit !important;
    text-shadow: none !important;
    font: inherit;
    letter-spacing: normal;
}

/* Administration – LED-Icon */

ul.menu_nav > li.button_admin > a > .main_icons {
    background-image: url("../images/led-icons/admin.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

ul.menu_nav > li.button_admin > a > .main_icons::before {
    display: none;
}