/* ===================================================================
   MOBILE MENU – Overlay, Panel, Animationen (inkl. Stagger)
   =================================================================== */

/* Overlay (dunkler Hintergrund) */
.mobile-menu {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--mobile-menu-overlay-bg, rgba(0, 0, 0, .65));
  z-index: 9999;
}

/* Anzeigen, wenn JS den "active"-Status setzt */
.mobile-menu.active {
  display: block;
}

/* Hidden-Attribut technisch überschreiben */
.mobile-menu[hidden] {
  display: none !important;
}

/* ===================================================================
   DIALOG-PANEL – Das eigentliche Menüfenster
   =================================================================== */

.mobile-menu-inner {
  max-width: 720px;
  width: 90%;
  margin: 80px auto 40px;
  padding: 2rem 1.5rem;

  background: var(--mobile-menu-bg, rgba(23, 73, 51, .95));
  border: 1px solid var(--mobile-menu-border, rgba(255, 255, 255, .15));
  border-radius: var(--card-radius, 20px);
  box-shadow: var(--mobile-menu-shadow, 0 20px 60px rgba(0, 0, 0, .45));

  /* Wichtiger Reset: kein Blur → dunkles Panel */
  filter: none !important;
  backdrop-filter: none !important;

  /* Startzustand für Animation */
  opacity: 0;
  transform: translateY(12px) scale(.96);

  transition:
    opacity .38s var(--ease-spring),
    transform .5s var(--ease-spring);

  will-change: transform, opacity;
}

/* Sichtbar-Animation */
.mobile-menu-inner.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Schließen-Animation */
.mobile-menu-inner.closing {
  opacity: 0;
  transform: translateY(10px) scale(.98);
}

/* ===================================================================
   MOBILE LINKS – mit Stagger/Stufen-Animation (bis 12 Links)
   =================================================================== */

.mobile-menu-inner > a {
  display: block;
  color: var(--mobile-menu-link-color, var(--yellow));
  font-size: var(--mobile-menu-link-font-size, 1.6rem);
  font-weight: 600;

  margin-bottom: 1rem;
  padding: .8rem 1.5rem;

  border-radius: 12px;
  text-decoration: none;

  opacity: 0;
  transform: translateY(6px);

  transition: color .25s ease, transform .25s ease;
  animation: staggerIn .5s var(--ease-spring) forwards;
}

.mobile-menu-inner > a:hover {
  color: var(--mobile-menu-link-hover, #fff);
  transform: translateX(2px) scale(1.03);
}

/* Stagger-Animation Keyframe */
@keyframes staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Verzögerungen für bis zu 12 Links */
.mobile-menu-inner > a:nth-of-type(1)  { animation-delay: .05s; }
.mobile-menu-inner > a:nth-of-type(2)  { animation-delay: .10s; }
.mobile-menu-inner > a:nth-of-type(3)  { animation-delay: .15s; }
.mobile-menu-inner > a:nth-of-type(4)  { animation-delay: .20s; }
.mobile-menu-inner > a:nth-of-type(5)  { animation-delay: .25s; }
.mobile-menu-inner > a:nth-of-type(6)  { animation-delay: .30s; }
.mobile-menu-inner > a:nth-of-type(7)  { animation-delay: .35s; }
.mobile-menu-inner > a:nth-of-type(8)  { animation-delay: .40s; }
.mobile-menu-inner > a:nth-of-type(9)  { animation-delay: .45s; }
.mobile-menu-inner > a:nth-of-type(10) { animation-delay: .50s; }
.mobile-menu-inner > a:nth-of-type(11) { animation-delay: .55s; }
.mobile-menu-inner > a:nth-of-type(12) { animation-delay: .60s; }

/* ===================================================================
   EFFECTS ON BODY (Blur/Dim des Inhalts beim Mobile-Menü)
   =================================================================== */

/* Wenn Menü offen → Content abdunkeln und weichzeichnen */
body.menu-open main,
body.menu-open .hero,
body.menu-open footer {
  filter: blur(var(--menu-open-blur, 8px))
          brightness(var(--menu-open-brightness, .85));
  opacity: .95;
  transition:
    filter .4s ease,
    opacity .4s ease;
}

/* Header NICHT blur-en (wichtig für das Menu-Icon) */
body.menu-open header {
  filter: none !important;
}

/* Hover-Fixes */
body.menu-open .tennisball-btn {
  filter: none !important;
}