/* Menü-Button */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 28px;
    height: 28px;
    z-index: 2;
    margin-left: auto;
}

.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Hamburger Icon Animation */
.menu-toggle.active .top {
  transform: rotate(45deg) translate(7px, 10px); /* Top line rotiert und verschiebt */
}

.menu-toggle.active .middle {
  animation: splitMiddle 1s forwards; /* Animation für die mittlere Linie, langsamer */
}

.menu-toggle.active .bottom {
  transform: rotate(-45deg) translate(7px, -10px); /* Bottom line rotiert und verschiebt */
  background-color: red; /* Rote Farbe für Bottom Linie im "X" */
}

/* Animation für die mittlere Linie (split und auseinander bewegen) */
@keyframes splitMiddle {
  0% {
    transform: translateX(0);
    opacity: 1;
    background-color: #fff; /* Anfangsfarbe weiß */
  }
  40% {
    transform: translateX(-18px); /* Erste Hälfte nach links */
    opacity: 1;
    background-color: blue; /* Mittlere Linie wird blau */
  }
  60% {
    transform: translateX(18px); /* Zweite Hälfte nach rechts */
    opacity: 1;
    background-color: blue; /* Mittlere Linie bleibt blau */
  }
  100% {
    transform: translateX(0); /* Zurück zur Mitte und ausblenden */
    opacity: 0;
    background-color: #fff; /* Zurück zur ursprünglichen Farbe */
  }
}

/* Farbe des X (oben und unten) nach der Animation */
.menu-toggle.active .top,
.menu-toggle.active .bottom {
  background-color: red; /* Rote Farbe für die Linien im "X" */
}