/* Navigationsleiste: wird beim Scrollen zur schwebenden Pille (Block 4c). Gilt auf allen Seiten.
   Zustand „oben“: sieht aus wie bisher. Zustand „schwebend“ (Klasse .is-floating, gesetzt von js/nav-float.js):
   abgesetzt vom oberen Rand, schmaler als der Inhalt, zentriert, volle Pille auf --card.
   Verhalten nach ecomflow.com gemessen (Werte in docs/update-2026-10.md, „4c Referenz“), eigener Code und eigene Tokens.
   Wird NACH dem seiteneigenen <style> geladen; #nav .nav-inner schlägt die Tailwind-Klassen am selben Element. */

#nav {
  --ease-float: cubic-bezier(.22,1,.36,1);    /* Referenz: Form, Größe, Abstand */
  pointer-events: none;                         /* die Fläche neben der Pille fängt keine Klicks ab */
  backdrop-filter: none;
  transition: padding-top .55s var(--ease-float), background-color .4s ease, box-shadow .4s ease;
}
#nav .nav-inner {
  pointer-events: auto;
  /* Rahmen schon im Zustand „oben“ vorhanden (transparent) und 1px weniger Innenabstand:
     gleiche Maße wie vorher (py-4/px-6), beim Wechsel springt nichts */
  border: 1px solid transparent;
  padding: 15px 23px;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  transition:
    max-width .65s var(--ease-float),
    padding .55s var(--ease-float),
    border-radius .55s var(--ease-float),
    background-color .4s ease,
    border-color .4s ease,
    box-shadow .55s ease;
}

/* ── schwebend ── */
#nav.is-floating {
  padding-top: 16px;                            /* Referenz Desktop: 16px */
  background-color: transparent;
  box-shadow: none;
}
#nav.is-floating .nav-inner {
  /* schmaler als der Inhaltscontainer (1280px), zentriert (mx-auto) */
  max-width: min(1080px, calc(100% - 96px));
  /* gleicher Abstand oben/rechts/unten: der CTA sitzt konzentrisch (CTA-Höhe = Pille − 2 × 6px − Rahmen).
     Links mehr Luft, sonst stößt das Logo an die Rundung der Pille. */
  padding: 6px 6px 6px 18px;
  border-radius: 9999px;
  background-color: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow-float);
}
/* Tablet: Links + CTA brauchen fast die ganze Breite – 12px Rand wie mobil */
@media (max-width: 1023px) {
  #nav.is-floating .nav-inner { max-width: calc(100% - 24px); }
}
/* Mobil (Burger): Pille mit Logo + Burger, 12px von allen Rändern */
@media (max-width: 767px) {
  #nav.is-floating { padding-top: 12px; }
  #nav.is-floating .nav-inner { padding: 6px 6px 6px 14px; }
}

/* Laden mitten auf der Seite / Sprung zu #anker: sofort schwebend, ohne Animation */
#nav.nav-instant, #nav.nav-instant .nav-inner, #nav.nav-instant .ham { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  #nav, #nav .nav-inner, #nav .ham { transition: none; }
}