/*
 * Sticky Hamburger Menu Toggle
 * Einheitliches, kompaktes Toggle-Icon auf allen Bildschirmgroessen
 * Bleibt beim Scrollen immer oben links sichtbar
 * + Sidebar als Overlay auf Bildschirmen <= 1680px
 */

/* Toggle: einheitliches Aussehen */
#sidebar .toggle {
    position: fixed !important;
    top: 1.25em !important;
    height: auto !important;
    line-height: normal !important;
    text-indent: 7.25em !important;
    width: 7.25em !important;
    z-index: 10001 !important;
    transition: left 0.5s ease !important;
}

#sidebar .toggle:before {
    color: #d44040 !important;
    font-size: 1.74rem !important;
    margin-left: -0.0625em !important;
    margin-top: -0.25em !important;
    z-index: 1 !important;
}

#sidebar .toggle:after {
    background: transparent !important;
    border-radius: 0.375em !important;
    content: '' !important;
    height: 3.5em !important;
    left: 1em !important;
    position: absolute !important;
    top: 1em !important;
    width: 5em !important;
}

/* > 1680px: Sidebar ist Teil des Layouts (26em breit) */
@media screen and (min-width: 1681px) {
    #sidebar.inactive .toggle {
        left: 0 !important;
    }
    #sidebar:not(.inactive) .toggle {
        left: 26em !important;
    }
}

/*
 * <= 1680px: Sidebar als Overlay (fixed, ueberlagert Content)
 * Verhindert abgeschnittenes Menue auf Laptops und Tablets
 */
@media screen and (max-width: 1680px) {
    #sidebar {
        box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175) !important;
        height: 100% !important;
        left: 0 !important;
        position: fixed !important;
        top: 0 !important;
        z-index: 10000 !important;
    }

    #sidebar.inactive {
        box-shadow: none !important;
    }

    #sidebar > .inner {
        -webkit-overflow-scrolling: touch !important;
        height: 100% !important;
        left: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: absolute !important;
        top: 0 !important;
    }

    #sidebar.inactive .toggle {
        left: 0 !important;
    }

    #sidebar:not(.inactive) .toggle {
        left: 24em !important;
    }

    #sidebar.inactive {
        margin-left: -24em !important;
    }
}

/* <= 1280px: Sidebar-Breite bleibt bei 26em (wie in main.css definiert) */
@media screen and (max-width: 1280px) {
    #sidebar:not(.inactive) .toggle {
        left: 26em !important;
    }

    #sidebar.inactive {
        margin-left: -26em !important;
    }
}