/*  HAMBURGER-MENU */

#main-menu,
#site-header {
    transition: transform 0.6s ease-in-out;
}

/* HAMBURGER ab 660px deaktiviert, die Elemente werden nicht angezeigt! */
#menu-container input,
#hamburger span {
    display: none;
    cursor: pointer;
}


@media screen and (max-width:700px) {
    header nav li {
        display: block;
        /* line-height: 3em; */
        font-size: 1.25em;
    }

    header nav ul {
        background: #F4F4F4;
        margin-top: 3.5em;
        height: calc(100vh - 3.5em);
    }

    #main-menu li {
        padding-left: 1em;
        padding-top: 2em;
    }

    /* #main-menu li:first-child {
    padding-top: 2em;
} */

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

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

        width: 40px;
        height: 32px;
    }

    #hamburger {
        z-index: 1001;
    }

    #menu-container input {
        /* unsichtbare CHECKBOX */
        opacity: 0;
        z-index: 1002;
    }

    /* Hamburger mit drei SPANs gebaut */

    #hamburger 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);
    }

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

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


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

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

    #menu-container input: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: 1000;

        width: 100vw;
        min-height: 100vh;

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

        background: rgba(255, 255, 255,
                /* 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 input:checked ~ #main-menu {
        transform: none;
    }

}

/*  ENDE HAMBURGER */