/*  MENU MIT MENU ICON */

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

.hide-menu .site-header {
    transform: translateY(-100%);
}

/* MENU ICON über 50rem Viewport-Breite deaktiviert, die Elemente werden nicht angezeigt! */
.menu-container input,
.menu-icon span {
    display: none;
    cursor: pointer;
}


@media screen and (max-width:50rem), screen and (max-height:30rem) {

    .hide-menu .site-header {
        transform: none;
    }
    
    .menu-container {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        
        width: 100%;
        -webkit-user-select: none;
        user-select: none;
    }

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

        width: 40px;
        height: 32px;
    }

    .menu-icon {
        z-index: 1001;
    }

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

    /* MENU ICON mit drei SPANs gebaut */

    .menu-icon span {
        display: block;
        position: relative;

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

        background: white;

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

    .menu-icon span:first-child {
        transform-origin: 10% 30%;
    }

    .menu-icon span:last-child {
        transform-origin: 0% 30%;
    }


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

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

    .menu-container input:checked ~ .menu-icon > 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;
        padding: 2em;

        background: rgba(161, 166, 221, 0.83);
        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;
    }
    
    .main-menu,
    .main-menu ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;

        font-size: 1.2em;
    }


    .main-menu li {
        margin: 0.6em;
    }

}

/*  ENDE MENU ICON */