/* Hauptnavigation, gemeinsam für Startseite und alle Unterseiten (seit 22.09.2026).
   Markup steht statisch in jeder Seite (<nav class="site-nav">), Verhalten in assets/site-nav.js.
   Werte = Startseite; Fallbacks, weil nicht jede Unterseite alle Tokens definiert. */

nav.site-nav {
  position:sticky; top:0; z-index:200;
  background:rgba(246,248,252,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  padding:0 5%; height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:box-shadow .3s, border-color .3s, background .3s;
}
nav.site-nav.scrolled, nav.site-nav.is-open { box-shadow:0 6px 24px rgba(20,22,28,.06); border-color:var(--line, rgba(13,19,33,.10)); background:rgba(255,255,255,.94); }

.site-nav .brand { display:flex; align-items:center; text-decoration:none; flex:none; }
.site-nav .brand-text { font-family:'Geist',sans-serif; font-weight:700; font-size:19px; color:var(--ink, #0d1321); letter-spacing:-.4px; }
.site-nav .brand-text b { color:var(--blue, #2447e1); font-weight:700; }

.site-nav .nav-links { display:flex; align-items:center; gap:30px; }
.site-nav .nav-link { font-size:14px; color:var(--muted, #565e73); text-decoration:none; position:relative; transition:color .2s; white-space:nowrap; }
.site-nav .nav-link::after { content:''; position:absolute; left:0; bottom:-5px; height:2px; width:100%; background:var(--blue, #2447e1); border-radius:2px;
  transform:scaleX(0); transform-origin:left center; transition:transform .25s cubic-bezier(.23,1,.32,1); }
.site-nav .nav-link:hover, .site-nav .nav-link[aria-current="page"] { color:var(--ink, #0d1321); }
.site-nav .nav-link:hover::after, .site-nav .nav-link[aria-current="page"]::after { transform:scaleX(1); }
.site-nav .nav-link:focus-visible, .site-nav .drop-link:focus-visible, .site-nav .nav-cta:focus-visible, .site-nav .brand:focus-visible, .site-nav .nav-burger:focus-visible {
  outline:2px solid var(--blue, #2447e1); outline-offset:4px; border-radius:6px;
}

.site-nav .nav-cta { font-size:13.5px; font-weight:600; padding:11px 20px; background:var(--ink, #0d1321); color:#fff; border:none; border-radius:8px; cursor:pointer; text-decoration:none; transition:background .2s, transform .2s, box-shadow .2s; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.site-nav .nav-cta:hover { background:var(--blue, #2447e1); transform:translateY(-2px); box-shadow:var(--shadow-blue, 0 10px 28px rgba(36,71,225,.26)); }
.site-nav .nav-cta:active { transform:scale(.97); }
.site-nav .nav-cta i { font-size:15px; transition:transform .25s; }
.site-nav .nav-cta:hover i { transform:translateX(3px); }

.site-nav .nav-item { position:relative; }
.site-nav .nav-caret { font-size:10px; color:var(--faint, #8a90a3); margin-left:2px; }
.site-nav .nav-drop { position:absolute; top:calc(100% + 10px); left:-14px; min-width:230px; background:var(--surface, #fff);
  border:1px solid var(--line, rgba(13,19,33,.10)); border-radius:var(--r-lg, 14px); box-shadow:var(--shadow-lg, 0 18px 50px rgba(13,19,33,.12)); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98); transform-origin:top left;
  transition:opacity .18s cubic-bezier(.23,1,.32,1), transform .18s cubic-bezier(.23,1,.32,1), visibility .18s; }
.site-nav .nav-item:hover .nav-drop, .site-nav .nav-item:focus-within .nav-drop { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.site-nav .nav-item::after { content:''; position:absolute; left:0; right:0; top:100%; height:12px; }
.site-nav .drop-link { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md, 10px);
  font-size:13.5px; color:var(--ink-2, #242b3f); text-decoration:none; transition:background .15s, color .15s; white-space:nowrap; }
.site-nav .drop-link:hover { background:var(--tint, #e8edfc); color:var(--ink, #0d1321); }
.site-nav .drop-link i { font-size:17px; color:var(--blue, #2447e1); flex:none; }
.site-nav .drop-sep { height:1px; background:var(--line, rgba(13,19,33,.10)); margin:6px 8px; }

/* Burger: erst unterhalb der Breite, in der die Leiste nicht mehr in eine Zeile passt */
.site-nav .nav-burger { display:none; flex:none; width:44px; height:44px; margin-right:-10px; border:none; background:none; border-radius:10px; cursor:pointer; color:var(--ink, #0d1321);
  align-items:center; justify-content:center; transition:background .15s; }
.site-nav .nav-burger:hover { background:var(--tint, #e8edfc); }
.site-nav .nav-burger svg { width:22px; height:22px; }
.site-nav .nav-burger .l { transition:transform .25s cubic-bezier(.23,1,.32,1), opacity .2s; transform-origin:12px 12px; }
.site-nav.is-open .nav-burger .l1 { transform:translateY(5px) rotate(45deg); }
.site-nav.is-open .nav-burger .l2 { opacity:0; }
.site-nav.is-open .nav-burger .l3 { transform:translateY(-5px) rotate(-45deg); }

.nav-mobile { position:fixed; left:0; right:0; top:64px; bottom:0; z-index:1000; overflow-y:auto; overscroll-behavior:contain;
  background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:8px 5% calc(28px + env(safe-area-inset-bottom));
  font-family:'Geist',sans-serif; }
.nav-mobile[hidden] { display:none; }
.nav-mobile .m-list { list-style:none; margin:0; padding:0; }
.nav-mobile .m-list > li { border-bottom:1px solid var(--line, rgba(13,19,33,.10)); margin:0; }
.nav-mobile .m-row { display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:0 2px;
  font-size:17px; font-weight:600; color:var(--ink, #0d1321); text-decoration:none; letter-spacing:-.2px; cursor:pointer; }
.nav-mobile .m-row[aria-current="page"] { color:var(--blue-deep, #1a37b8); }
.nav-mobile details > summary { list-style:none; }
.nav-mobile details > summary::-webkit-details-marker { display:none; }
.nav-mobile .m-chev { width:18px; height:18px; color:var(--faint, #8a90a3); transition:transform .25s cubic-bezier(.23,1,.32,1); }
.nav-mobile details[open] .m-chev { transform:rotate(180deg); }
.nav-mobile .m-sub { padding:0 0 12px; display:grid; gap:2px; }
.nav-mobile .m-sub a { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 10px; border-radius:10px;
  font-size:15px; color:var(--ink-2, #242b3f); text-decoration:none; }
.nav-mobile .m-sub a:active, .nav-mobile .m-sub a:hover { background:var(--tint, #e8edfc); }
.nav-mobile .m-sub a i { font-size:18px; color:var(--blue, #2447e1); flex:none; }
.nav-mobile .m-foot { display:grid; gap:12px; margin-top:22px; }
.nav-mobile .m-cta { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:12px;
  background:var(--blue, #2447e1); color:#fff; font-size:16px; font-weight:600; text-decoration:none; box-shadow:var(--shadow-blue, 0 10px 28px rgba(36,71,225,.26)); }
.nav-mobile .m-cta:active { transform:scale(.98); }
.nav-mobile .m-phone { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:12px;
  border:1px solid var(--line-2, rgba(13,19,33,.17)); color:var(--ink, #0d1321); font-size:15px; font-weight:600; text-decoration:none; font-variant-numeric:tabular-nums; }
.nav-mobile .m-phone i { color:var(--blue, #2447e1); font-size:18px; }
.nav-mobile a:focus-visible, .nav-mobile summary:focus-visible { outline:2px solid var(--blue, #2447e1); outline-offset:2px; border-radius:8px; }

@media (max-width:1000px) {
  nav.site-nav .nav-links { display:none; }
  nav.site-nav .nav-burger { display:inline-flex; }
  nav.site-nav { height:64px; }
}
@media (min-width:1001px) { .nav-mobile { display:none !important; } }
body.nav-locked { overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-burger .l, .nav-mobile .m-chev, .site-nav .nav-drop { transition:none; }
}