@charset "UTF-8";

#hamburger-menu input {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    z-index: 140;
    top: 25px;
    right: 15px;
    cursor: pointer;
    opacity: 1;
    -webkit-touch-callout: none;
}

#header-item-geld-zurueck-versprechen {
    width: max-content;
    right: 0;
    top: -1.5rem;
}

@media (max-width: 799px) {
    #hamburger-menu input {
        display: block;
        opacity: 0;
    }

    header #hamburger-menu #menu {
        position: fixed;
        z-index: 120;
        height: 100vh;
        width: 15rem;
        background: #F9F9FB;
        top: 0;
        right: -15rem;
        transition: transform 0.5s ease-in-out;
    }

    #hamburger-menu input:checked ~ #menu {
        transform: translate(-100%, 0);
    }

    #hamburger-menu input:checked ~ #hamburger-close {
        opacity: 100%;
    }

    header #menu-header {
        display: block;
        margin-top: 7rem;
        margin-left: 2rem;
    }

    header #menu-header li {
        margin-bottom: 1.5rem;
    }

    header #menu-header li:last-of-type {
        margin-bottom: 0;
    }

    #hamburger-menu .burger-icon {
        display: block;
        width: 32px;
        height: 21px;
        background: url("../img/hamburger-img.svg");
        position: absolute;
        z-index: 110;
        top: 35px;
        right: 20px;
        transition: 0.3s ease-in-out;
    }

    #hamburger-menu .burger-icon-close {
        display: block;
        width: 32px;
        height: 27px;
        background: url("../img/hamburger-close-img.svg");
        position: absolute;
        z-index: 130;
        top: 32px;
        right: 19px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.5s;
    }

    .stop-scrolling {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    @keyframes overlay-einblenden {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes overlay-ausblenden {
        0% {
            opacity: 1;
            height: 100vh;
            width: 100vw;
        }
        99% {
            opacity: 0;
            height: 100vh;
            width: 100vw;
        }
        100% {
            opacity: 0;
            height: 0;
            width: 0;
        }
    }
    header #hamburger-menu #menu-overlay {
        position: fixed;
        content: "";
        display: block;
        z-index: 100;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.25);
    }

    header #hamburger-menu #menu-overlay.animate {
        animation: overlay-ausblenden 1s forwards;
    }

    #hamburger-menu input:checked ~ #menu-overlay {
        height: 100vh;
        width: 100vw;
        animation: overlay-einblenden 1s forwards;
    }

    #header-item-geld-zurueck-versprechen {
        padding: 0.25rem;
        margin-left: -0.25rem;
    }
}
@media (max-width: 799px) and (max-height: 400px) {
    header #menu-header {
        margin-top: 6rem;
    }
}