/*  HAMBURGER-MENU */

#main-menu, #site-header {
    transition: transform 0.6s ease-in-out;
}
.down #site-header {
   transform: translateY(-100%); 
}

/* HAMBURGER ab 64rem deaktiviert, die Elemente werden nicht angezeigt! */
#menu-container #onoff-menu,
#menu-container span {
    display: none;
    cursor: pointer;
}


@media screen and (max-width:64rem) {

    #menu-container {
        position: fixed;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        -webkit-user-select: none;
        user-select: none;
    }

    #menu-container #onoff-menu,
    #hamburger {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;

        width: 40px;
        height: 32px;
    }

    #hamburger {
        z-index: 10001;
    }

    #menu-container #onoff-menu {
        /* unsichtbare CHECKBOX */
        -webkit-appearance: none;
        appearance: none;
        opacity: 0;
        z-index: 10002;
    }

    /* Hamburger mit drei SPANs gebaut */

    #menu-container span {
        display: block;
        position: relative;

        width: 33px;
        height: 4px;
        margin-bottom: 5px;

        background: #000;

        transform-origin: center;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu-container span:first-child {
        transform-origin: 10% 30%;
    }

    #menu-container span:last-child {
        transform-origin: 0% 30%;
    }


    /* die SPANS werden zum Kreuz, wenn die unsichtbare CHECKBOX geklickt ist - */
    #menu-container #onoff-menu:checked ~ #hamburger > span {
        transform: rotate(45deg) translate(-1px, -1px);
        background: #ffffff;
    }

    /* der mittlere Strich muss verschwinden! */
    #menu-container #onoff-menu:checked ~ #hamburger > span:nth-last-child(2) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    #menu-container #onoff-menu:checked ~ #hamburger > span:last-child {
        transform: rotate(-45deg) translate(-1px, 1px);
    }

    /* Das Menü wird absolut positioniert und über das gesamte Browserfenster gelegt. */
    #main-menu {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10000;

        width: 100vw;
        min-height: 100vh;
        padding:3rem 0;

        /* falls Animationen flackern aktivieren:
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; */

        background: rgba(0, 0, 0, 0.85);
        /* gegen Flackern von Text und pro normales Antialiasing in Safari */
        -webkit-font-smoothing: antialiased;

        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
    }


    /* wenn die CHECKBOX geklickt ist, wird das mit TRANSFORM hinausgeschobene Menü wieder sichtbar */
    #menu-container #onoff-menu:checked ~ #main-menu {
        transform: none;
    }

}

/*  ENDE HAMBURGER */