/* TreuFlow — Marketing-Nav. EINZIGE QUELLE.
 *
 * Diese Datei wird von scripts/sync-marketing-nav.mjs nach public/marketing/nav.css
 * kopiert und von allen statischen Marketing-Seiten per <link> geladen. NIE die
 * Kopie in public/ bearbeiten — sie wird ueberschrieben. Aenderung hier, dann
 *   npm run nav:sync   (stanzt)      npm run verify:nav   (prueft auf Drift)
 *
 * Varianten haengen als Klasse an .np-nav und kommen aus src/marketing/nav/pages.json.
 * Es gibt seit dem 28.07. nur noch EINE, und sie ist inhaltlich begruendet:
 *   .has-switch   Zielgruppen-Umschalter darueber -> Nav 46px tiefer (landing, kmu)
 * Die beiden anderen (.login-flat, .menu-legacy) waren konservierte Drift und sind
 * angeglichen — siehe den Abschnitt am Dateiende, bevor jemand sie zurueckbaut.
 *
 * ABHAENGIGKEIT: .np-menu.open nutzt @keyframes fnxIn. Das Keyframe lebt im
 * SEITEN-CSS (kmu/kontakt/landing nutzen es auch ausserhalb der Nav), nicht hier.
 * verify:nav prueft, dass jede Seite es definiert. */

/* ── Grundgeruest ────────────────────────────────────────────── */
.np-nav{position:fixed;top:20px;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:var(--wrap);margin:0 auto;padding:0 24px;transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .3s ease;will-change:transform}
.np-nav.nav-hidden{transform:translateY(-175%);opacity:0;pointer-events:none}
.np-nav.nav-solid .np-bar,.np-nav.nav-solid .np-login{background:rgba(255,255,255,.94);border-color:rgba(15,29,38,.08)}
.np-logo{width:56px;height:56px;border-radius:20px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;box-shadow:var(--shadow-raised);flex:0 0 auto}
.np-bar{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.62);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-pill);padding:7px 7px 7px 14px;box-shadow:var(--shadow-raised)}
.np-bar>a{font-size:15.5px;font-weight:600;color:var(--ink);padding:11px 20px;border-radius:var(--r-pill);transition:background .15s,color .15s}
.np-bar>a:not(.np-cta):hover{background:rgba(15,29,38,.06)}
.np-bar .np-cta{background:var(--primary);color:#fff;font-weight:600;padding:12px 24px;margin-left:6px}
.np-bar .np-cta:hover{background:var(--primary-hover)}
.np-login{height:56px;padding:0 22px;gap:9px;border-radius:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-raised);flex:0 0 auto;transition:.15s;white-space:nowrap}
.np-login i{font-size:21px}
.np-login:hover{color:var(--primary);background:#fff}
/* Nav-Dropdown „Gut zu wissen" → FAQ + Unser Team */
.np-dd{position:relative;display:inline-flex;align-items:center}
.np-dd-trig{display:inline-flex;align-items:center;gap:5px;font-size:15.5px;font-weight:600;color:var(--ink);padding:11px 20px;border-radius:var(--r-pill);cursor:pointer;transition:background .15s}
.np-dd-trig i{font-size:15px;transition:transform .2s}
.np-dd:hover .np-dd-trig{background:rgba(15,29,38,.06)}
.np-dd:hover .np-dd-trig i{transform:rotate(180deg)}
.np-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}
.np-dd:hover .np-dd-menu{opacity:1;visibility:visible;pointer-events:auto}
.np-dd-card{display:block;min-width:332px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-overlay);padding:8px}
.np-dd-card a{display:block;padding:0;border-radius:var(--r-md);font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.np-dd-card a.np-mcard{display:flex;gap:13px;align-items:center;padding:12px}
.np-mcard:hover{background:var(--card-sunken)}
.np-mi{width:40px;height:40px;flex:0 0 auto;border-radius:11px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:20px}
.np-mtx b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:1px}
.np-mtx small{font-size:12.5px;color:var(--ink-mute)}
.np-dd-card a:hover{background:var(--card-sunken);color:var(--ink)}
@media(max-width:760px){.np-bar>a:not(.np-cta),.np-dd{display:none}.np-bar{justify-content:flex-end;padding:8px}}
/* Mobile-Navigation: Hamburger + Menü-Panel */
.np-burger{display:none;width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.7);align-items:center;justify-content:center;color:var(--ink);font-size:25px;box-shadow:var(--shadow-raised);cursor:pointer;flex:0 0 auto;transition:.15s}
.np-burger:hover{color:var(--primary);background:#fff}
.np-menu{position:absolute;top:70px;left:0;right:0;display:none;flex-direction:column;gap:2px;background:rgba(255,255,255,.98);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(15,29,38,.08);border-radius:22px;box-shadow:var(--shadow-overlay);padding:10px;margin:0 16px;max-height:calc(100vh - var(--np-top,20px) - 92px);max-height:calc(100dvh - var(--np-top,20px) - 92px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.np-menu.open{display:flex;animation:fnxIn .22s ease both}
.np-menu a{font-size:16px;font-weight:600;color:var(--ink);padding:14px 16px;border-radius:12px}
.np-menu a:active,.np-menu a:hover{background:rgba(15,29,38,.05)}
/* Gruppen im Burger-Menü (Sandra 20.07.): Gruppentitel + eingerückte Unterpunkte,
damit die Dropdown-Struktur der Desktop-Nav auch mobil erkennbar ist. */
.np-menu .np-menu-grp{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);padding:14px 16px 6px}
.np-menu .np-menu-sub{font-size:15px;font-weight:500;color:var(--ink-soft);padding:11px 16px 11px 30px;position:relative}
.np-menu .np-menu-sub::before{content:"";position:absolute;left:17px;top:50%;width:7px;height:1px;background:var(--rule-strong)}
.np-menu .np-menu-sub:hover{color:var(--ink)}
.np-menu .np-menu-login{display:flex;align-items:center;gap:9px;color:var(--ink-soft);border-top:1px solid var(--rule-soft);margin-top:6px;border-radius:0 0 12px 12px}
.np-menu .np-menu-login i{font-size:19px}
.np-menu .np-menu-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;margin-top:8px;border-radius:14px}
.np-menu .np-menu-cta i{font-size:18px}
.np-menu .np-menu-cta:hover{background:var(--primary-hover)}
/* Burger bis 900px — die volle Pill-Nav (Logo + Links + Dropdown + Warteliste + Login) passt erst darüber ohne Überlauf */
@media(max-width:900px){.np-bar,.np-login{display:none}.np-burger{display:flex}.np-nav{padding:0 16px}}

/* ── Zielgruppen-Umschalter (.has-switch) ────────────────────── */
/* Zielgruppen-Switch: Business | Treuhänder — zentriert ÜBER der Menü-Pille,
identisch zur KMU-Landing (public/kmu.html), damit der Wechsel zwischen den
beiden Zielgruppen-Seiten in BEIDE Richtungen funktioniert. Die Nav rutscht
dafür von 20px auf 66px; --np-top spiegelt das für den Deckel von .np-menu. */
.np-nav.has-switch{top:66px;--np-top:66px}
.np-switch{position:absolute;top:-52px;left:50%;transform:translateX(-50%);display:inline-flex;gap:3px;background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-pill);padding:3px;box-shadow:var(--shadow-card)}
.np-switch a{font-size:12.5px;font-weight:600;padding:5px 15px;border-radius:var(--r-pill);color:var(--ink-soft);transition:background .15s,color .15s;white-space:nowrap}
.np-switch a.on{background:var(--primary);color:#fff}
.np-switch a:not(.on):hover{background:rgba(15,29,38,.06);color:var(--ink)}
.np-nav.nav-solid .np-switch{background:rgba(255,255,255,.94);border-color:rgba(15,29,38,.08)}
@media(max-width:560px){.np-switch{top:-46px}.np-switch a{padding:4px 13px}}

/* ── Sprach-Umschalter — VORBEREITET, NIE GEBAUT ────── */
/* Diese 11 Regeln lagen in kmu.html, aber der zugehoerige Markup-Block existierte
   dort NIE — es ist vorbereitetes, nie eingeschaltetes Design. Mitgenommen statt
   geloescht, damit die Arbeit nicht verloren geht; ohne Markup wirkungslos. */
/* Sprach-Umschalter oben rechts (neon-Stil: Globus statt Einloggen-Pille; Einloggen ist in der Menü-Pille) */
.np-lang{position:relative;display:flex;flex:0 0 auto}
.np-lang-btn{width:56px;height:56px;border-radius:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--ink);box-shadow:var(--shadow-raised);cursor:pointer;transition:.15s}
.np-lang:hover .np-lang-btn{color:var(--primary);background:#fff}
.np-nav.nav-solid .np-lang-btn{background:rgba(255,255,255,.94);border-color:rgba(15,29,38,.08)}
.np-lang-menu{position:absolute;top:100%;right:0;padding-top:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s;z-index:61}
.np-lang:hover .np-lang-menu{opacity:1;visibility:visible;pointer-events:auto}
.np-lang-card{display:block;min-width:186px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-overlay);padding:8px}
.np-lang-card a,.np-lang-card .dis{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--r-md);font-size:14.5px;font-weight:500;color:var(--ink)}
.np-lang-card a i{color:var(--ok-fg);font-size:17px}
.np-lang-card a:hover{background:var(--card-sunken)}
.np-lang-card .dis{color:var(--ink-faint);cursor:default}
.np-lang-card .dis i{font-size:17px}
@media(max-width:900px){.np-lang{margin-left:auto}}

/* ── Angeglichen am 28.07. ────────────────────────────────────── */
/* Hier standen zwei Varianten-Klassen, die eine ERBTE Abweichung konserviert haben:
   team, presse und kontakt trugen eine flachere Einloggen-Pille (51px statt 56px,
   voll rund statt 20px Radius, 62% statt 82% weiss), und kontakt rueckte die
   Unterpunkte im Handy-Menue 2px weniger ein. Der Kommentar auf diesen drei Seiten
   lautete ausgerechnet «Global Nav (identisch zur Startseite)» — sie war es nicht.

   Beim Zusammenfuehren der 19 Kopien wurden beide zunaechst ERHALTEN, damit der
   Umbau optisch beweisbar nichts veraendert. Auf Entscheid vom 28.07. sind sie
   jetzt angeglichen: alle 19 Seiten tragen dieselbe Nav, ohne Ausnahme.

   Steht hier, damit niemand die 51px fuer ein Design haelt und sie zurueckbaut. */