/* ============================================================
   NAV-DESKTOP.CSS (BEREINIGT)
   ------------------------------------------------------------
   Desktop-Navigation (ab 1025px): zentrierte Links, saubere States,
   ruhige Typografie. Keine Mobile-Regeln, keine Header-Layout-Regeln.
============================================================ */

:root {
  --nav-item-gap: 2.25rem;
  --nav-underline-height: 1px;
}

/* Desktop-Navigation nur auf Desktop anzeigen */
@media (max-width: 1024px) {
  .desktop-nav {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .desktop-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--nav-item-gap);
  }

  .desktop-menu-item {
    display: block;
  }

  .desktop-menu-item a {
    position: relative;
    display: inline-block;
    padding: 0.5rem 0;

    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;

    color: var(--header-link-color, var(--text-secondary, #6e6e73));
    text-decoration: none;

    transition: color 0.15s ease;
  }

  .desktop-menu-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    width: 100%;
    height: var(--nav-underline-height);
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.92);
    transform-origin: center;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .desktop-menu-item a:hover {
    color: var(--header-link-hover, var(--foreground, #1d1d1f));
  }

  .desktop-menu-item a:hover::after {
    opacity: 0.55;
    transform: scaleX(1);
  }

  .desktop-menu-item a:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 3px;
    border-radius: 8px;
  }

  .desktop-menu-item a[aria-current="page"] {
    color: var(--header-link-active, var(--foreground, #1d1d1f));
    font-weight: 600;
  }

  .desktop-menu-item a[aria-current="page"]::after {
    opacity: 0.85;
    transform: scaleX(1);
  }
}