.svg-loader {
  height: auto;
  display: block;
  margin: 60px auto;

  /* Gesamtzyklus (inkl. 0.5s Standzeit) */
  --dur: 3.5s;

  /* nice smooth */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Base colors */
.st2 {
  fill: #003a63;
}

.st0 {
  fill: #ffde14;
}

.st1 {
  fill: none;
  stroke: #ffde14;
  stroke-width: 1.46;
  stroke-miterlimit: 3.864;
}

/*
Timeline (in % von --dur):
0–42   DRAW (Stroke schreibt)
42–84  FILL (Fill baut sich auf, aber wird ERST bei 84% = nach Wave komplett)
70–84  WAVE (erscheint)
84–98  HOLD (Logo komplett, Wave weg)  => ~0.5s bei 3.5s
98–100 RESET
*/

.draw {
  fill: #003a63;
  fill-opacity: 0;

  stroke: #003a63;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 1;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);

  animation:
    write-loop var(--dur) var(--ease) infinite,
    fill-loop var(--dur) var(--ease) infinite,
    stroke-fade var(--dur) var(--ease) infinite;

  will-change: stroke-dashoffset, fill-opacity, stroke-opacity;
}

.audio.draw {
  animation-delay: 0s, 0s, 0s;
}

.electronic .draw {
  animation-delay: var(--d, 0s), 0s, 0s;
}

/* 1) DRAW: schreibt bis 42%, dann bleibt es "fertig" (aber später wird Stroke ausgeblendet) */
@keyframes write-loop {
  0% {
    stroke-dashoffset: var(--len, 1000);
  }

  42% {
    stroke-dashoffset: 0;
  }

  98% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: var(--len, 1000);
  }

  /* Reset ganz am Ende */
}

/* 2) FILL: baut sich auf – WICHTIG: 100% erst bei 84% (nach der Wave) */
@keyframes fill-loop {

  0%,
  42% {
    fill-opacity: 0;
  }

  /* während DRAW keine Füllung */
  70% {
    fill-opacity: 0.35;
  }

  /* beginnt sichtbar zu werden */
  84% {
    fill-opacity: 1;
  }

  /* erst NACH Wave ist es "komplett" */
  98% {
    fill-opacity: 1;
  }

  /* HOLD */
  100% {
    fill-opacity: 0;
  }

  /* Reset */
}

/* Stroke verschwindet während Fill (damit es wirklich "Draw -> Fill" ist) */
@keyframes stroke-fade {

  0%,
  42% {
    stroke-opacity: 1;
  }

  70% {
    stroke-opacity: 0;
  }

  /* ab hier Stroke weg */
  100% {
    stroke-opacity: 0;
  }
}

/* 3) WAVE: erscheint und verschwindet NORMAL, nicht "schneller" */
.wave {
  opacity: 0;
  transform: translateX(45%);
  animation: wave-loop var(--dur) var(--ease) infinite;
  will-change: transform, opacity;
}

@keyframes wave-loop {

  0%,
  70% {
    transform: translateX(45%);
    opacity: 0;
  }

  /* unsichtbar */
  78% {
    transform: translateX(0);
    opacity: 1;
  }

  /* rein */
  84% {
    transform: translateX(45%);
    opacity: 0;
  }

  /* raus (Ende Wave) */
  100% {
    transform: translateX(45%);
    opacity: 0;
  }
}


/* === UNDERLINE === */
.underline-line {
  stroke: gold;
  stroke-width: 0;
  transform: translateX(100%);
  opacity: 0;
  animation: slide-loop 2s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes slide-loop {

  0%,
  30% {
    transform: translateX(100%);
    opacity: 0;
  }

  50%,
  70% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Basis Panel Style */
.menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
  /* Klicks ignorieren wenn unsichtbar */
  background-color: #003a63;
  /* Hintergrundfarbe sicherstellen */
}

/* Aktives Panel */
.menu-panel[data-state="active"] {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  z-index: 20;
}

/* Panel wartet rechts */
.menu-panel[data-state="right"] {
  transform: translateX(100%);
}

/* Panel wartet links */
.menu-panel[data-state="left"] {
  transform: translateX(-100%);
}

/* Fokus Ringe sichtbar machen (Accessibility) */
*:focus-visible {
  outline: 2px solid #fbbf24;
  /* Gelb */
  outline-offset: 2px;
}

/* --- Mobile Menu Smooth Transitions --- */
#mobile-menu {
  transition:
    transform 420ms cubic-bezier(.22, .61, .36, 1),
    opacity 360ms ease,
    backdrop-filter 300ms ease;
  will-change: transform, opacity;
  backdrop-filter: blur(2px);
}

/* States via data-open */
#mobile-menu[data-open="false"] {
  opacity: 0;
  transform: translateX(-6%);
  pointer-events: none;
}

#mobile-menu[data-open="true"] {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Panels slide system */
.menu-panel {
  position: absolute;
  inset: 0;
  padding-bottom: 5rem;
  /* Platz für Close-Button */
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1), opacity 300ms ease;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateX(8%);
  pointer-events: none;
}

.menu-panel[data-state="active"] {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.menu-panel[data-state="left"] {
  opacity: 0;
  transform: translateX(-8%);
}

.menu-panel[data-state="right"] {
  opacity: 0;
  transform: translateX(8%);
}

/* Close button hover micro-interaction */
#mobile-menu-close {
  transition: transform 180ms ease;
}

#mobile-menu-close:hover {
  transform: rotate(90deg) scale(1.05);
}


#mobile-menu {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* When the menu is CLOSED */
#mobile-menu[data-open="false"] {
  opacity: 0;
  visibility: hidden;
  /* Hides it from screen readers/keyboard tabbing */
  pointer-events: none;
  /* Crucial: Allows clicks to pass through to the page below */
}

/* When the menu is OPEN */
#mobile-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Re-enables clicks on the menu */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  #mobile-menu,
  .menu-panel {
    transition: none !important;
  }
}