/*  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(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: fixed;
        top: 1rem;
        right: 1rem;

        width: 40px;
        height: 32px;
    }

    .hamburger {
        z-index: 10001;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        margin: 3.2rem;

    }

    .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: 5px auto;

        background-color: white;

        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: white;
    }

    /* 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;

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

        background: rgba(0, 0, 0, 0.95);
        /* 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 */