/* ============================================================
   NGO-FILES EINHEITLICHER HEADER  ·  „obere Zeile"
   Eine Header-Komponente für Start · Netz · Wiki · Blog.
   - Logo links, Cross-Nav rechts (aktive Seite als Teal-Pill).
   - Mobil: Hamburger (3 Balken) → Menü fährt nach unten aus.
   - Dark-Mode-CSS vorhanden (greift via html[data-mode="dark"];
     im Launch ist der Umschalter entfernt, Seite bleibt hell).
   Quelle für alle Seiten: /_lib/nf-header.css
   ============================================================ */
.nf-header{
  position:sticky;top:0;z-index:300;
  grid-column:1/-1;            /* falls Header in einem CSS-Grid sitzt (Wiki .page); sonst ignoriert */
  display:flex;align-items:center;gap:20px;
  height:56px;padding:0 28px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--border,#e3e8ef);
}
.nf-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.nf-brand img{height:34px;width:auto;display:block}
.nf-wordmark{
  font-family:'Fraunces','DM Serif Display',serif;font-style:italic;
  font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1;
  color:var(--ink,#1a2332);
}
.nf-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nf-nav a{
  position:relative;
  padding:8px 15px;border-radius:8px;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  color:var(--ink-sec,#46566b);text-decoration:none;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.nf-nav a:hover{background:var(--blue-bg,rgba(0,151,178,.1));color:var(--blue,#0097b2)}
.nf-nav a[aria-current="page"]{
  background:var(--blue-bg,rgba(0,151,178,.12));
  color:var(--blue,#0097b2);
  font-weight:700;
}
.nf-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:15px;right:15px;bottom:-12px;height:2px;
  background:var(--blue,#0097b2);border-radius:2px;
}
/* Hamburger (mobil) */
.nf-burger{
  display:none;margin-left:auto;
  width:42px;height:42px;flex:0 0 auto;
  background:transparent;border:1px solid var(--border,#e3e8ef);border-radius:10px;
  cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nf-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink,#1a2332);transition:transform .2s,opacity .2s}
.nf-header.nf-open .nf-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nf-header.nf-open .nf-burger span:nth-child(2){opacity:0}
.nf-header.nf-open .nf-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Zweite Zeile: seiten-interne Sprungmarken (z. B. Blog) */
.nf-subnav{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  position:sticky;top:56px;z-index:290;
  padding:0 28px;min-height:44px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--border,#e3e8ef);
}
.nf-subnav a{
  padding:6px 12px;border-radius:7px;text-decoration:none;
  font-family:'DM Sans',system-ui,sans-serif;font-size:13px;font-weight:600;
  color:var(--ink-sec,#46566b);transition:background .15s,color .15s;white-space:nowrap;
}
.nf-subnav a:hover,.nf-subnav a.active{background:var(--blue-bg,rgba(0,151,178,.1));color:var(--blue,#0097b2)}

/* Dark-Mode */
html[data-mode="dark"] .nf-header,
html[data-mode="dark"] .nf-subnav{
  background:hsl(220 13% 17% / .85);
  border-bottom-color:hsl(220 10% 28%);
}
html[data-mode="dark"] .nf-wordmark{color:var(--ink,#e6e9ef)}
html[data-mode="dark"] .nf-burger span{background:var(--ink,#e6e9ef)}

/* ── Mobil: Nav als Dropdown, fährt nach unten aus ── */
@media(max-width:680px){
  .nf-header{height:54px;padding:0 14px;gap:10px}
  .nf-wordmark{display:none}
  .nf-brand img{height:30px}
  .nf-burger{display:flex}
  .nf-nav{
    position:absolute;top:100%;left:0;right:0;
    margin:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px;
    background:rgba(255,255,255,.97);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid var(--border,#e3e8ef);
    box-shadow:0 14px 30px rgba(20,30,50,.12);
    /* eingeklappt */
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .25s ease,opacity .2s ease,visibility .2s;
  }
  .nf-header.nf-open .nf-nav{max-height:80vh;opacity:1;visibility:visible}
  .nf-nav a{padding:13px 16px;font-size:15px;border-radius:9px}
  .nf-nav a[aria-current="page"]::after{display:none}
  html[data-mode="dark"] .nf-nav{background:hsl(220 13% 17% / .98)}
  .nf-subnav{top:54px;padding:0 14px;overflow-x:auto;flex-wrap:nowrap}
}

/* ── Einklappbare Karten-Legende (Klemmbrett-Muster, vereinheitlicht #34) ──
   Nur auf Netzwerkkarten relevant; via #legend gescopt, um die alten
   Inline-.legend-Regeln der Karten zu überschreiben. */
#legend{padding:0;overflow:hidden;max-height:none;width:max-content;max-width:248px;box-shadow:0 4px 16px rgba(15,23,42,.10)}
#legend .legend-head{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:9px 14px;background:hsl(220 16% 95%);border:none;border-bottom:1px solid var(--border,#e3e8ef);cursor:pointer;font-family:inherit;text-align:left}
#legend .legend-head-title{font-size:12.5px;font-weight:700;letter-spacing:.2px;color:var(--ink,#1a2332)}
#legend .legend-caret{font-size:11px;color:var(--ink-sec,#46566b);transition:transform .25s}
#legend.collapsed .legend-caret{transform:rotate(-90deg)}
#legend.collapsed .legend-head{border-bottom:none}
#legend .legend-body{padding:12px 16px 14px;max-height:60vh;overflow:auto}
#legend.collapsed .legend-body{display:none}
#legend .legend-title{font-size:11px;font-weight:700;letter-spacing:.2px;color:var(--ink,#1a2332);background:hsl(220 16% 95%);border-radius:6px;padding:5px 9px;margin-bottom:9px}
#legend .legend-title+.legend-row{margin-top:2px}
@keyframes legendAttention{0%,100%{box-shadow:0 4px 16px rgba(15,23,42,.10)}25%{box-shadow:0 0 0 4px rgba(0,151,178,.35),0 8px 22px rgba(0,151,178,.28)}55%{box-shadow:0 0 0 2px rgba(0,151,178,.14),0 4px 16px rgba(15,23,42,.10)}}
#legend.attention{animation:legendAttention 1.5s ease}
html[data-mode="dark"] #legend .legend-head{background:hsl(220 13% 27%);border-bottom-color:hsl(220 10% 32%)}
html[data-mode="dark"] #legend .legend-head-title{color:hsl(220 14% 92%)}
html[data-mode="dark"] #legend .legend-title{background:hsl(220 13% 27%);color:hsl(220 14% 92%)}