/* Fixierte Glass-Navigation und ihr gleitender aktiver Menüpunkt. */

@keyframes navigation-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Der äußere Header fängt keine Klicks außerhalb der eigentlichen Leiste ab. */
.site-header {
  position: fixed;
  z-index: 10;
  top: max(16px, env(safe-area-inset-top));
  right: 0;
  left: 0;
  pointer-events: none;
}

/* Helle Grundvariante über Video und dunklem Kontaktbereich. */
.navigation-shell {
  --navigation-pill: rgb(255 255 255 / 52%);

  width: min(420px, calc(100% - 24px));
  margin: 0 auto;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 66%);
  border-radius: var(--radius-main-navigation);
  background: rgb(255 255 255 / 88%);
  box-shadow:
    0 12px 32px rgb(0 0 0 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 74%);
  color: var(--color-text);
  pointer-events: auto;
  transition:
    background-color var(--motion-standard) ease,
    border-color var(--motion-standard) ease,
    box-shadow var(--motion-standard) ease;
}

/* Auf dem hellgrauen Leistungsbereich wird die Leiste etwas deutlicher. */
.site-header.is-on-light-surface .navigation-shell {
  --navigation-pill: rgb(255 255 255 / 64%);

  border-color: rgb(255 255 255 / 76%);
  background: rgb(224 228 234 / 86%);
  box-shadow:
    0 10px 28px rgb(25 35 50 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

/* Unschärfe wird nur verwendet, wenn der Browser sie sicher unterstützt. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .navigation-shell {
    background: rgb(255 255 255 / 62%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
  }

  .site-header.is-on-light-surface .navigation-shell {
    background: rgb(224 228 234 / 68%);
  }
}

/* Drei gleich breite Spalten bilden die feste Bahn für den Schieberegler. */
.primary-navigation {
  --active-index: 0;

  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  isolation: isolate;
}

/* Der Hintergrund des aktiven Punkts gleitet per CSS-Variable zwischen Spalten. */
.primary-navigation::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / 3);
  border-radius: var(--radius-main-navigation);
  background: var(--navigation-pill);
  content: "";
  transform: translateX(calc(var(--active-index) * 100%));
  transition:
    transform var(--motion-standard) var(--motion-easing),
    background-color var(--motion-standard) ease;
}

/* Jeder Menüpunkt bleibt mindestens 44 Pixel hoch und damit gut bedienbar. */
.primary-navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min-size);
  padding: 0 12px;
  border-radius: var(--radius-main-navigation);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition:
    color var(--motion-standard) ease,
    background-color var(--motion-fast) ease;
}

/* Aktiver Zustand und dezentes Feedback für präzise Zeiger. */
.primary-navigation a[aria-current="page"] {
  font-weight: 650;
}

@media (hover: hover) {
  .primary-navigation a:hover {
    background: rgb(255 255 255 / 18%);
  }
}

.primary-navigation a:active {
  background: rgb(255 255 255 / 28%);
}

/* Beim ersten Laden erscheint nur die Steuerungsebene kurz und zurückhaltend. */
@media (prefers-reduced-motion: no-preference) {
  .site-header {
    animation: navigation-enter var(--motion-standard) var(--motion-easing) both;
  }
}

/* Mobile Breiten nutzen die Fläche besser, ohne die Bedienhöhe zu verkleinern. */
@media (max-width: 520px) {
  .site-header {
    top: max(12px, env(safe-area-inset-top));
  }

  .navigation-shell {
    width: calc(100% - 20px);
  }

  .primary-navigation a {
    padding: 0 6px;
    font-size: 0.86rem;
  }
}

/* Letzte typografische Anpassung für besonders schmale Geräte. */
@media (max-width: 340px) {
  .primary-navigation a {
    font-size: 0.8rem;
  }
}

/* Höherer Kontrast oder reduzierte Transparenz deaktivieren den Glaseffekt. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .navigation-shell {
    background: rgb(255 255 255 / 96%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header.is-on-light-surface .navigation-shell {
    background: rgb(234 237 241 / 98%);
  }
}

/* Bei reduzierter Bewegung wechseln alle Navigationszustände ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .navigation-shell,
  .primary-navigation::before,
  .primary-navigation a {
    transition: none;
  }
}