/* ============================================================
   modvio — Navigation. EINE Quelle für alle Verkaufsseiten.
   Verteilt von `node tools/nav-sync.mjs`. NICHT in den Seiten
   bearbeiten — dort steht seit 04.08.2026 kein Nav-CSS mehr.

   Vorher lag dieser Block als INLINE-Kopie in acht Dateien. Er war
   fast, aber nicht ganz identisch: index.html fehlte die
   pointer:coarse-Regel unten, die die sieben Unterseiten hatten —
   auf der Startseite war die Wortmarke auf Touch also kleiner als
   44 px. Genau diese Art stiller Drift soll die Datei beenden.

   Wird VOR dem seiteneigenen <style> eingebunden, damit eine Seite
   bei Bedarf noch nachbessern kann (Kaskade wie vorher).
   ============================================================ */

/* ---------- NAV: volle Breite → schwebende Pille (qodia) ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;justify-content:center;pointer-events:none}
.nav-in{pointer-events:auto;display:flex;align-items:center;gap:20px;width:100%;max-width:100%;
  background:rgba(251,252,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid transparent;border-bottom-color:var(--line);border-radius:0;
  padding:10px clamp(16px,4vw,44px);margin-top:0;box-shadow:none;
  transition:max-width .45s cubic-bezier(.16,1,.3,1),margin-top .45s cubic-bezier(.16,1,.3,1),
    border-radius .45s cubic-bezier(.16,1,.3,1),padding .45s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease,border-color .35s ease,background .35s ease}
/* Breite 1080 statt 1000: bei 1000 px passten fünf Menüpunkte + Anmelden + CTA nicht nebeneinander,
   „So läuft das" brach um und zog die Pille von 58 auf 104 px hoch (02.08.2026 live gemessen).
   Der Umbruch ist zusätzlich strukturell ausgeschlossen (white-space am Link), nicht nur durch Breite. */
.nav.on .nav-in{max-width:1080px;margin-top:10px;border-radius:var(--r-pill);
  border-color:var(--line);border-bottom-color:var(--line);
  padding:6px 6px 6px 20px;box-shadow:0 18px 44px -18px rgba(3,7,17,.28);background:rgba(255,255,255,.92)}
.nav.on .start{padding:9px 17px}
.brand{font-weight:700;font-size:1.22rem;letter-spacing:-.04em;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand .mk{width:22px;height:22px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.brand .mk i{border-radius:3px;background:var(--ink)}
.brand .mk i.hl{background:var(--indigo)}
.menu{display:flex;align-items:center;gap:2px;margin-left:4px}
.menu a{font-size:.92rem;font-weight:500;white-space:nowrap;padding:8px 11px;border-radius:var(--r-pill);color:var(--ink);opacity:.82;transition:opacity .16s,background .16s}
.menu a:hover{opacity:1;background:rgba(127,127,127,.12)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.login{font-size:.9rem;font-weight:500;padding:9px 14px;border-radius:var(--r-pill);transition:background .15s}
.login:hover{background:rgba(127,127,127,.12)}
.start{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;white-space:nowrap;padding:10px 18px;border-radius:var(--r-pill);color:#fff;background:linear-gradient(180deg,#4b7dff,#2f6bff);box-shadow:0 10px 24px -10px rgba(47,107,255,.7),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .15s,box-shadow .15s}
.start svg{width:13px;height:13px}
.start:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(47,107,255,.85),inset 0 1px 0 rgba(255,255,255,.28)}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-pill);place-items:center;background:rgba(127,127,127,.12);border:0;color:inherit;cursor:pointer}
@media(max-width:1000px){.menu,.login{display:none}.burger{display:grid}.nav.on .nav-in{max-width:min(92vw,520px)}}
/* Auf dem Handy schob der Navbar-CTA den Burger aus dem Bild (bei 390 px endete die Leiste erst bei
   x=419; gemessen x=444–448 bei 320–430 px) — das Menü war schlicht nicht erreichbar. Er entfällt
   hier: der Hero hat denselben Knopf direkt darunter, ab 700 px Scrolltiefe übernimmt auf der
   Startseite die Sticky-Leiste (.mcta, ebenfalls ≤640). */
@media(max-width:640px){.nav .start{display:none}}
/* Touch-Ziel an der Wortmarke. Hängt an pointer:coarse, NICHT an der Breite — ein iPad quer ist
   1180 px breit und fiele durch jedes Breiten-Raster. Fehlte bis 04.08.2026 auf index.html. */
@media(pointer:coarse){.nav .brand{min-height:44px}}
.mnav{position:fixed;inset:0;z-index:95;background:#fff;display:flex;flex-direction:column;gap:2px;padding:88px clamp(22px,7vw,44px) 40px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav a{font-size:1.4rem;font-weight:700;letter-spacing:-.025em;color:var(--ink);padding:15px 0;border-bottom:1px solid var(--line)}
.mnav .mn-cta{margin-top:26px;background:linear-gradient(180deg,#4b7dff,#2f6bff);color:#fff;border:0;border-radius:var(--r-pill);text-align:center;padding:16px;font-size:1.02rem;font-weight:600}
.mnav-x{position:absolute;top:16px;right:clamp(16px,5vw,40px);width:42px;height:42px;border:0;background:var(--paper-blue);border-radius:50%;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.mnav-x svg{width:19px;height:19px}
/* Die prefers-reduced-motion-Regel für .nav-in bleibt bewusst in den Seiten: sie steht dort
   zusammen mit .mcta und den Reveal-Klassen in EINEM Block, den es hier nicht gibt. */