.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative; /* Um das "X" korrekt zu positionieren */
}

.hamburger-bar {
  background-color: #fff;
  height: 3px;
  width: 100%;
  transition:
    transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    opacity 0.2s ease;
}

/* Animation für das Ausblenden des mittleren Balkens */
@keyframes fadeOutMiddleBar {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px) rotate(0); /* Ändern Sie die Translation, um geradeaus zu fliegen */
  }
}

/* Animation für das Einblenden des mittleren Balkens beim Schließen */
@keyframes fadeInMiddleBar {
  0% {
    opacity: 0;
    transform: translateX(-20px) rotate(0); /* Ändern Sie die Translation, um geradeaus zu fliegen */
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* Aktivierte (geöffnete) Zustandsstile */
.hamburger-menu.active .hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Animation für das Ausblenden des mittleren Balkens */
.hamburger-menu.active .hamburger-bar:nth-child(2) {
  opacity: 0;
  animation: fadeOutMiddleBar 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)
    forwards;
}

/* Animation für das Einblenden des mittleren Balkens beim Schließen */
.hamburger-menu:not(.active) .hamburger-bar:nth-child(2) {
  animation: fadeInMiddleBar 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .hamburger-menu {
    width: 35px;
    height: 30px;
  }
}

/* Responsive Anpassungen für eine verbesserte Touch-Interaktion */
@media (max-width: 768px) {
  .hamburger-menu {
    width: 35px;
    height: 30px;
  }
  .hamburger-bar {
    width: 100%;
  }
}

/* Animation für das Ausblenden der Striche und das Einblenden des Menüs */
/* Animation für das Ausblenden der Striche */
@keyframes fadeOutStrips {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

/* Wenden Sie die kombinierte Animation auf das Öffnen des Menüs an */
/* Anpassung für das Öffnen des Menüs */
.hamburger-menu.open .hamburger-bar {
  animation: fadeOutStrips 0.5s ease forwards;
}

/* Fügt den Menütitel und den Unterstrich hinzu, wenn das Menü geöffnet ist */
.hamburger-menu.open::after,
.hamburger-menu.open::before {
  opacity: 0; /* Initial unsichtbar machen */
  transition: opacity 0.5s ease 0.5s; /* Verzögerung, um das Ausblenden der Striche zu berücksichtigen */
}