/* Nopebyte – Navigation (gemeinsam für index, impressum, datenschutz). Logik in nav.js. */

/* Desktop: Logo | Links (Mitte) | Sprache, Theme, Button */
.nav .wrap{gap:16px}
.nav-panel{flex:1;display:flex;align-items:center;gap:16px;min-width:0}
.nav .links{margin:0 auto;gap:28px;font-size:14.5px;color:var(--muted)}
.nav .links a{transition:color .2s}
.nav .links a:hover,.nav .links a.on{color:var(--ink)}
.nav .links a.on::after{right:0;opacity:.8}
.nav a:focus-visible,.nav button:focus-visible{outline:2px solid var(--vl);outline-offset:3px;border-radius:8px}

/* Sprache und Hell/Dunkel: klein und dezent */
.navr{gap:2px}
.navr .theme-btn{width:36px;height:36px;background:transparent;border-color:transparent}
.navr .lang-btn{height:36px;padding:0 9px;gap:6px;background:transparent;border-color:transparent;font-size:12.5px}
.navr .theme-btn:hover,.navr .lang-btn:hover,.navr .lang.open .lang-btn{background:rgba(255,255,255,.06);border-color:var(--line)}
[data-theme="light"] .navr .theme-btn,[data-theme="light"] .navr .lang-btn{background:transparent;border-color:transparent}
[data-theme="light"] .navr .theme-btn:hover,[data-theme="light"] .navr .lang-btn:hover,[data-theme="light"] .navr .lang.open .lang-btn{background:#fff;border-color:var(--line2)}

.nav-cta{margin-left:6px}
.nav-cta .sm{display:none}

.nav-toggle{display:none;place-items:center;width:40px;height:40px;padding:0;border-radius:11px;background:transparent;border:1px solid var(--line2);color:var(--ink);cursor:pointer}
.nav-toggle .i-x,.nav.open .nav-toggle .i-menu{display:none}
.nav.open .nav-toggle .i-x{display:block}

/* Mobil: Logo | Prüfen | ☰, Rest im aufklappbaren Panel */
@media (max-width:920px){
  .nav-toggle{display:grid}
  html:not(.js) .nav-toggle{display:none}
  .nav-cta{margin-left:auto;padding:9px 14px}
  .nav-cta .lg{display:none}
  .nav-cta .sm{display:inline}
  .nav-panel{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 18px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,0,0,.6)}
  .nav.open .nav-panel{display:flex}
  .nav.open{background:var(--bg);border-color:var(--line)}
  .nav .links{flex-direction:column;margin:0;gap:0;font-size:17px}
  .nav .links a{padding:14px 2px;border-bottom:1px solid var(--line)}
  .nav .links a::after{display:none}
  .nav .links a.on{color:var(--vl)}
  .navr{padding-top:14px;gap:8px}
  .navr .theme-btn,.navr .lang-btn{height:40px;border-color:var(--line)}
  .navr .theme-btn{width:40px}
  .navr .lang-menu{right:auto;left:0}
  [data-theme="light"] .navr .theme-btn,[data-theme="light"] .navr .lang-btn{background:#fff;border-color:var(--line)}
  [data-theme="light"] .nav.open .nav-panel{box-shadow:0 24px 40px -24px rgba(18,20,43,.25)}
}