#invertmenu {
    background-color: black;
    position: fixed;
    top: 1vw;
    right: 1.5vw;
    z-index: 1000;
    transition:all 0.6s ease-in-out;
    -webkit-transition:all 0.6s ease-in-out;
    -moz-transition:all 0.6s ease-in-out;
    -ms-transition:all 0.6s ease-in-out;
    -o-transition:all 0.6s ease-in-out;
    mix-blend-mode: difference;
}

#invertmenu a {
    font-size:1vw;
    display: block;
    margin: 5px 0;
    color: #fff;
    text-decoration: none;
    font-weight:bold;
    width: fit-content;
    font-family: 'Noto';
    position: relative;
    padding: 0.2em 0;
    overflow: hidden;
}

#invertmenu a:hover{
    color:#21FFFF !important;
}
#invertmenu a.active {
    color: #21FFFF !important; 
}


/* Burger Icon */
.burger-icon {
    display: none;
    color: #fff;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1001;
    cursor: pointer;
    mix-blend-mode: difference;

}
.burger-svg {
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
}

.line {
    fill: #ffffff;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Animationszustand für das Kreuz */
.burger-icon.active .line1 {
    transform: translateX(15px) rotate(45deg);
    -webkit-transform: translateX(15px) rotate(45deg);
    -moz-transform: translateX(15px) rotate(45deg);
    -ms-transform: translateX(15px) rotate(45deg);
    -o-transform: translateX(15px) rotate(45deg);
}

.burger-icon.active .line2 {
    opacity: 0; /* Mitte ausblenden */
}

.burger-icon.active .line3 {
    transform: translateX(-35px) translateY(30px) rotate(-45deg);
    -webkit-transform: translateX(-35px) translateY(30px) rotate(-45deg);
    -moz-transform: translateX(-35px) translateY(30px) rotate(-45deg);
    -ms-transform: translateX(-35px) translateY(30px) rotate(-45deg);
    -o-transform: translateX(-35px) translateY(30px) rotate(-45deg);
}

.logo-container {
    color:white;
    position: fixed;
    z-index: 999;
}

.logo-img {
     /* Mix-Blending-Modus für SVG */
    mix-blend-mode: difference;
    position: fixed;
    top: 2.1vh;
    left: 5vw;
    width:4vw;
    height:auto;
    z-index: 999; /* Sicherstellen, dass SVG im Vordergrund bleibt */
    cursor: pointer;
}