/* ==========================================================================
   Site navigation — SINGLE SOURCE for every page
   (homepage, blog, Impressum, Datenschutz, 404).

   Markup for blog/static pages is generated from tools/partials/site-nav.mjs;
   the homepage mirrors the same structure in tools/home-src/index.html.
   Behavior (scroll state, hamburger, mobile slide-in) lives in /js/site-nav.js.

   All values are literal (no dependency on a page's CSS variables) so the
   navigation looks identical regardless of the surrounding stylesheet.

   Two modes:
     .nav.nav--auto   — homepage: transparent over the dark hero, turns solid
                        white on scroll (.nav--scrolled added by site-nav.js).
     .nav.nav--solid  — subpages: always solid white, sticky in normal flow.
   ========================================================================== */

/* Self-hosted fonts (DSGVO). Duplicate @font-face is de-duplicated by the
   browser, so this is harmless on pages that already declare them. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-var.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/sora-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/sora-latin-ext-var.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:72px;display:flex;align-items:center;transition:background .35s,border-color .35s,box-shadow .35s;border-bottom:1px solid transparent;}
/* Subpages: solid + in normal flow (no overlap, no offset needed). */
.nav--solid{position:sticky;}
.nav--scrolled,.nav--solid{background:rgba(255,255,255,.94);border-bottom-color:#DDE2EF;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);box-shadow:0 1px 3px rgba(13,20,38,.06),0 1px 2px rgba(13,20,38,.04);}

.nav__inner{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px);width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}

.nav__logo{font-family:'Sora',system-ui,sans-serif;font-size:22px;font-weight:700;color:#fff;transition:color .35s;flex-shrink:0;}
.nav__logo .dev{color:#00C2FF;}
.nav--scrolled .nav__logo,.nav--solid .nav__logo{color:#0D1426;}

.nav__links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
@media (max-width:1023px){.nav__links{display:none;}}
.nav__links a{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;padding:6px 10px;border-radius:6px;color:rgba(255,255,255,.85);transition:color .2s,text-decoration-color .2s;text-underline-offset:4px;text-decoration:none;}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:#1B4FD8;}
.nav--scrolled .nav__links a,.nav--solid .nav__links a{color:#3D4A6B;}
.nav--scrolled .nav__links a:hover,.nav--scrolled .nav__links a[aria-current="page"],.nav--solid .nav__links a:hover,.nav--solid .nav__links a[aria-current="page"]{color:#1B4FD8;}

.nav__right{display:flex;align-items:center;gap:12px;flex-shrink:0;}

.lang-toggle{display:flex;align-items:center;background:rgba(255,255,255,.12);border-radius:9999px;padding:3px;gap:2px;transition:background .35s;}
.nav--scrolled .lang-toggle,.nav--solid .lang-toggle{background:#EEF1F8;}
.lang-toggle__btn{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1;padding:4px 10px;border-radius:9999px;color:rgba(255,255,255,.6);transition:background .2s,color .2s;cursor:pointer;border:none;background:transparent;}
.lang-toggle__btn[aria-pressed="true"],.lang-toggle__btn[aria-current="true"]{background:rgba(255,255,255,.2);color:#fff;}
.nav--scrolled .lang-toggle__btn,.nav--solid .lang-toggle__btn{color:#6B7A99;}
.nav--scrolled .lang-toggle__btn[aria-pressed="true"],.nav--scrolled .lang-toggle__btn[aria-current="true"],.nav--solid .lang-toggle__btn[aria-pressed="true"],.nav--solid .lang-toggle__btn[aria-current="true"]{background:#1B4FD8;color:#fff;}

/* CTA: shared sizing (matches the homepage .btn-sm). On subpages the homepage
   .btn system isn't loaded, so .nav--solid gives it the full primary look. */
.nav__cta{font-size:14px;padding:10px 20px;text-decoration:none;}
@media (max-width:1023px){.nav__cta{display:none;}}
.nav--solid .nav__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:.01em;border-radius:9999px;background:linear-gradient(135deg,#1B4FD8 0%,#1640B0 100%);color:#fff;box-shadow:0 4px 20px rgba(27,79,216,.35);transition:background .2s,transform .2s,box-shadow .2s;}
@media (max-width:1023px){.nav--solid .nav__cta{display:none;}}
.nav--solid .nav__cta:hover{background:linear-gradient(135deg,#1640B0 0%,#1035A0 100%);transform:translateY(-2px);}

.nav__hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:6px;color:#fff;transition:color .35s;background:transparent;border:none;cursor:pointer;}
.nav--scrolled .nav__hamburger,.nav--solid .nav__hamburger{color:#0D1426;}
@media (max-width:1023px){.nav__hamburger{display:flex;}}
.hamburger-icon{display:flex;flex-direction:column;gap:5px;}
.hamburger-icon span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s;transform-origin:center;}
.nav__hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(2){opacity:0;}
.nav__hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile slide-in overlay (identical on every page) */
.mobile-menu{position:fixed;inset:0;z-index:999;background:#0A0F1E;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px clamp(20px,5vw,80px);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);gap:0;}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu__links{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin-bottom:40px;list-style:none;padding:0;}
.mobile-menu__links a{font-family:'Sora',system-ui,sans-serif;font-size:28px;font-weight:600;color:#fff;padding:12px 24px;border-radius:12px;transition:color .2s;text-decoration:none;}
.mobile-menu__links a:hover,.mobile-menu__links a[aria-current="page"]{color:#00C2FF;}
.mobile-menu__bottom{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}
.mobile-menu__bottom .lang-toggle{background:rgba(255,255,255,.10);}
.mobile-menu__bottom .lang-toggle__btn{color:rgba(255,255,255,.6);}
.mobile-menu__bottom .lang-toggle__btn[aria-pressed="true"],.mobile-menu__bottom .lang-toggle__btn[aria-current="true"]{background:rgba(255,255,255,.2);color:#fff;}
.mobile-menu__cta{width:100%;text-align:center;justify-content:center;text-decoration:none;}
/* Subpage mobile CTA: full primary look (homepage uses its own .btn system) */
.mobile-menu--solid .mobile-menu__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:.01em;font-size:15px;padding:14px 28px;border-radius:9999px;background:linear-gradient(135deg,#1B4FD8 0%,#1640B0 100%);color:#fff;box-shadow:0 4px 20px rgba(27,79,216,.35);transition:background .2s,transform .2s;}
.mobile-menu--solid .mobile-menu__cta:hover{background:linear-gradient(135deg,#1640B0 0%,#1035A0 100%);transform:translateY(-2px);}

/* "Blog" vom Abschnitts-Block abheben */
.nav__sep{padding:0 2px;color:rgba(255,255,255,.35);user-select:none;pointer-events:none;align-self:center;font-weight:400;}
.nav--scrolled .nav__sep,.nav--solid .nav__sep{color:#C7CEDB;}
.mobile-menu__links a.mm-sep{margin-top:10px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);}

/* Konsistenter Scrollbalken-Platz auf allen Seiten -> kein horizontaler Versatz der Nav beim Seitenwechsel */
html{scrollbar-gutter:stable;}