:root {
    --menu-icon-line-height: 6px;
    --menu-icon-line-space: 10px;
    --menu-icon-line-offsetY: calc(var(--menu-icon-line-height) + var(--menu-icon-line-space));
    --menu-icon-height: calc((3 * var(--menu-icon-line-height)) + (2 * var(--menu-icon-line-space)));
    --cubic-bezier-in: cubic-bezier(0.30, 1, 0.70, 1);
    --cubic-bezier-out: cubic-bezier(1, 0.70, 1, 0.30);
}

.menu-icon {
    position: absolute;
    top: calc((80px - var(--menu-icon-height)) / 2);
    right: 10px;
    width: 50px;
    height: var(--menu-icon-height);
    cursor: pointer;
    z-index: 999;
}

.menu-icon .line-1,
.menu-icon .line-2,
.menu-icon .line-3 {
    height: var(--menu-icon-line-height);
    width: 100%;
    background-color: var(--wp--preset--color--custom-color-1);
    border-radius: 3px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease-in-out;
}

.menu-icon .line-2 {
    margin: var(--menu-icon-line-space) 0;
}

.menu-icon .line-1 {
    animation: animate-line-1-rev 0.7s ease-in-out;
}

.menu-icon .line-2 {
    animation: animate-line-2-rev 0.7s ease-in-out;
}

.menu-icon .line-3 {
    animation: animate-line-3-rev 0.7s ease-in-out;
}

.menu-icon.active .line-1 {
    animation: animate-line-1 0.7s var(--cubic-bezier-in) forwards;
}

.menu-icon.active .line-2 {
    animation: animate-line-2 0.7s var(--cubic-bezier-in) forwards;
}

.menu-icon.active .line-3 {
    animation: animate-line-3 0.7s var(--cubic-bezier-in) forwards;
}

.no-animation {
    -webkit-animation: none !important;
    animation: none !important;
}

/* Animationen */
@keyframes animate-line-1 {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(0);
    }
    100% {
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(45deg);
    }
}

@keyframes animate-line-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes animate-line-3 {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(0);
    }
    100% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(135deg);
    }
}

@keyframes animate-line-1-rev {
    0% {
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(45deg);
    }
    50% {
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(0);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes animate-line-2-rev {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes animate-line-3-rev {
    0% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(135deg);
    }
    50% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(0);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

.mobile-menu {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    background-color: var(--wp--preset--color--custom-color-4);
    transform: translateY(-100%);
    transition: transform 1s ease;
    overflow-y:visible;
    z-index: 996;
}

.mobile-menu.open {
    transform: translateY(0);
}

.mobile-menu > div {
    height: auto;
    overflow-y: visible;
    box-sizing: border-box;
}

.mobile-menu > div > div {
    padding-bottom: 100px!important;
}

body.no-scroll {
    height: calc(50vh);
    overflow: hidden!important;
}

@media (min-width: 948px) {
    .menu-icon {
        display: none;
    }

    .mobile-menu {
        display: none;
    }
}