.hamburger .line {
        margin: 5.5px;
        display: block;
        width: 24px;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

.hamburger .line:nth-child(1) {
        height: 3px;
        background-color: #7cfc00;
}

.hamburger .line:nth-child(2) {
        position: relative;
        margin: 6px 5.5px; /* ?? optional extra Abstand */
        height: 3px; /* ?? MEHR ABSTAND */
}
/* Text exakt in die Mitte dieses Abstands */
.hamburger .line:nth-child(2)::after {
        font-family: 'BernhardModernW01-Roman';
        content: "menu";
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #7cfc00;
        white-space: nowrap;
}

.hamburger .line:nth-child(3) {
        height: 1px;
        background-color: #7cfc00;
}

.hamburger:hover {
        cursor: pointer;
}

/* ELEVEN */

#hamburger-11{
        -webkit-transition: all 1.3s ease-in-out;
        -o-transition: all 1.3s ease-in-out;
        transition: all 1.3s ease-in-out;
}

#hamburger-11.is-active{
        animation: smallbig 0.9s forwards;
}

@keyframes smallbig {
        0%, 100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
}

        50% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
}

#hamburger-11.is-active .line:nth-child(1),
#hamburger-11.is-active .line:nth-child(2),
#hamburger-11.is-active .line:nth-child(3){
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
}

#hamburger-11.is-active .line:nth-child(2){
        opacity: 0;

        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);

        transition: all 1.6s ease-in-out;
        -webkit-transition: all 1.6s ease-in-out;
        -o-transition: all 1.6s ease-in-out;
}

.hamburger .line:nth-child(2) {
        transition: all 2.0s ease-in-out;
}

#hamburger-11.is-active .line:nth-child(1) {
        -webkit-transform: translateY(10px) rotate(40deg);
        -ms-transform: translateY(10px) rotate(40deg);
        -o-transform: translateY(10px) rotate(40deg);
        transform: translateY(10px) rotate(40deg);
        background-color: #ff0000;
}

#hamburger-11.is-active .line:nth-child(3) {
        -webkit-transform: translateY(-10px) rotate(-40deg);
        -ms-transform: translateY(-10px) rotate(-40deg);
        -o-transform: translateY(-10px) rotate(-40deg);
        transform: translateY(-10px) rotate(-40deg);
        background-color: #ff0000;
}