/* ======================================================
   Bootstrap 5.3 Navigation Animation
   - Opacity Fade
   - Animated Underline
   - Dropdown Hover bleibt aktiv
   - Kein Konflikt mit Bootstrap-Pfeil (::after)
   ====================================================== */

@media (min-width: 992px) {

  /* =====================================
     BASIS
     ===================================== */

  #mainNav .navbar-nav .nav-link {
    position: relative;              /* nötig für ::before / ::after */
    transition: opacity 0.25s ease;
  }

  /* =====================================
     OPACITY EFFECT
     ===================================== */

  /* Wenn Navigation gehovert wird → alle dimmen */
  #mainNav .navbar-nav:hover .nav-link {
    opacity: 1;
  }

  /* Direkt gehoverter Link */
  #mainNav .navbar-nav .nav-link:hover {
    opacity: 1;
  }

  /* Aktiver Menüpunkt */
  #mainNav .navbar-nav .nav-link.active {
    opacity: 1;
  }

  /* Dropdown-Link bleibt aktiv,
     solange Maus im gesamten nav-item ist */
  #mainNav .navbar-nav .nav-item.dropdown:hover > .nav-link {
    opacity: 1;
  }

  /* 🔥 WICHTIG:
     Wenn Maus im Dropdown-Menü ist (Hover-Open Szenario),
     bleibt Toggle aktiv */
  #mainNav .nav-item.dropdown:has(.dropdown-menu:hover) > .nav-link {
    opacity: 1;
  }

  /* =====================================
     UNDERLINE – NORMALE LINKS
     nutzt ::after
     ===================================== */

  #mainNav .navbar-nav .nav-link:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: currentColor;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    pointer-events: none;
  }

  #mainNav .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
  #mainNav .navbar-nav .nav-link:not(.dropdown-toggle).active::after {
    transform: scaleX(1);
  }

  /* =====================================
     UNDERLINE – DROPDOWN TOGGLE
     nutzt ::before (weil ::after der Pfeil ist)
     ===================================== */

  #mainNav .navbar-nav .nav-link.dropdown-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: currentColor;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    pointer-events: none;
  }

  /* Hover auf Toggle */
  #mainNav .navbar-nav .nav-link.dropdown-toggle:hover::before,
  #mainNav .navbar-nav .nav-link.dropdown-toggle.active::before {
    transform: scaleX(1);
  }

  /* Toggle bleibt unterstrichen,
     wenn Maus im gesamten Dropdown ist */
  #mainNav .navbar-nav .nav-item.dropdown:hover > .nav-link.dropdown-toggle::before {
    transform: scaleX(1);
  }

  /* 🔥 wichtig für Hover-Dropdown ohne .show */
  #mainNav .nav-item.dropdown:has(.dropdown-menu:hover) 
  > .nav-link.dropdown-toggle::before {
    transform: scaleX(1);
  }

}