/* ============================================================================
   agentbooks.de — Site-Header (geteilte Komponente)
   Präfix sn- (site nav; ab- bleibt dem Design-System vorbehalten,
   sf- ist der Footer, lib-/nf-/… sind seitengebunden).

   Der Header selbst ist der kanonische ab-topnav des Design-Systems und wird
   von components/navigation/navigation.css gestylt — hier stehen nur die zwei
   Dinge, die das Design-System nicht liefert:

   1. Umbruchverhalten der Navigationsleiste. Das neue Nav-Modell trägt sieben
      Einträge (Für dich … So funktioniert's) statt vier; .ab-topnav__links ist
      im DS `flex:none` und schöbe damit ab ~900px die Aktionen aus dem Bild.
      Hier wird die Leiste schrumpfbar und, wenn nötig, horizontal scrollbar.
   2. Die Breakpoint-Regeln des Headers für Seiten ohne eigene Topnav-Regeln
      (index.html). Auf der Bibliothek und den doc-Seiten stehen dieselben
      Regeln zusätzlich seitenlokal (.lib-topnav, …) — sie sind regelgleich,
      kein Konflikt.

   3. Der aktive Punkt der Hauptnavigation trägt einen Ring in seiner
      Weltfarbe (Für dich … Government), der Balken darunter folgt ihr. Die
      Farbe kommt als --a aus css/gen/accents.css über die Klasse a-w-*, die
      partials/nav.j2 nur am aktiven Link setzt; ohne Weltfarbe
      (So funktioniert's) gilt der Markenakzent.
   4. DS-Korrektur für solide Schaltflächen als <a>: tokens/base.css setzt
      a:hover{color:…} und ist spezifischer als .ab-btn--primary allein, und
      die :hover-Regeln der soliden Varianten in components/core/core.css
      setzen keine Textfarbe — weißer Knopftext würde beim Überfahren blau.
      Das DS-CSS ist unantastbar (CLAUDE.md), deshalb steht die Korrektur hier,
      in der einen Datei, die jede Seite mit Navigation lädt; 404.html nutzt
      nf-btn (css/404.css). Gehört eigentlich ins Design-System.

   Eingebunden von allen Seiten mit Navigation (alle außer 404.html).
   ============================================================================ */

.sn-sticky{position:sticky;top:0;z-index:30}
.sn-topnav .ab-topnav__links{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.sn-topnav .ab-topnav__links::-webkit-scrollbar{display:none}

/* Aktiver Punkt: Ring innen (kein Layoutsprung, bleibt auch unter dem
   Hover-Grund sichtbar) und Balken in derselben Farbe. */
.sn-topnav .ab-topnav__link--active{box-shadow:inset 0 0 0 1px var(--a,var(--border-accent))}
.sn-topnav .ab-topnav__link--active::after{background:var(--a,var(--interactive-primary))}

/* DS-Korrektur: Knopftext bleibt beim Überfahren weiß. */
.ab-btn--primary:hover,.ab-btn--agent:hover,.ab-btn--destructive:hover{color:var(--text-on-accent)}

/* ============================================================================
   RESPONSIVE — Gutter-Stufen 48/32/20 wie auf den Seiten selbst.
   ============================================================================ */

@media (max-width:1024px){
  .sn-topnav{padding:0 var(--space-8)}
}

@media (max-width:720px){
  /* Kompakter Header: die Navigation entfällt, Marke, Suche und Aktionen
     bleiben. Das Design-System liefert bewusst keine Mobile-Navigation
     (siehe design/_ds/…/readme.md, „Not built"). */
  .sn-topnav{height:var(--header-height-mobile);padding:0 var(--space-5);gap:var(--space-3)}
  .sn-topnav .ab-topnav__links{display:none}
}

/* Kundenbereich-Icon links neben dem Bibliothek-Knopf (User-Entscheid
   2026-08-30, Go-Live): auf jeder Breite sichtbar, auch wenn die Links
   unter 720 px ausgeblendet sind. */
.sn-account{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:var(--text-secondary);text-decoration:none}
.sn-account:hover,.sn-account:focus-visible{color:var(--text-primary);background:var(--surface-hover)}