/* pcw-primary-nav.css — chrome for the primary site navigation.
 *
 * Warum diese Datei hier und nicht in pcw-design.css steht:
 *   pcw-design.css gehört Terminal D1; D2 (dieser Injektor) und D1
 *   laufen parallel. Eigene Datei ⇒ kein Merge-Konflikt. Beim
 *   späteren Zusammenführen gewinnt D1, D2 importiert dessen Tokens
 *   via Var-Fallbacks.
 *
 * Token-Vertrag (PCW-D1):
 *   --pcw-ink, --pcw-ink-muted, --pcw-bg, --pcw-bg-raised,
 *   --pcw-border, --pcw-accent,
 *   --pcw-warn, --pcw-urgent, --pcw-focus,
 *   --pcw-space-1..6, --pcw-text-sm..3xl,
 *   --pcw-radius-sm/md, --pcw-measure
 *
 * Solange D1 noch nicht gemergt ist, fallen alle Custom-Properties
 * auf Quartz' eingebaute Variablen (--light/--secondary/--tertiary
 * /--dark/--darkgray/--lightgray) zurück. Beide Quellen liefern
 * WCAG-AA-kontrastierende Werte für die Lesemodi (light/dark), der
 * Rest ist nur Anordnung.
 *
 * Komponenten-Klassen folgen demselben Vertrag wie D1:
 *   .pcw-card, .pcw-grid, .pcw-stack, .pcw-cluster,
 *   .pcw-callout, .pcw-badge, .pcw-btn, .pcw-meta
 * werden hier nicht benutzt (D2 baut keine Karte, sondern eine
 * Navigationsleiste); die Nav-spezifischen Klassen sind
 *   .pcw-skip, .pcw-primary-nav, .pcw-nav-toggle,
 *   .pcw-primary-nav-list, .pcw-nav-link, .pcw-nav-link-emergency,
 *   .pcw-nav-link-secondary, .pcw-nav-search.
 *
 * Selektoren werden mit .page-header qualifiziert, damit das
 * nav-Styling nicht aus Versehen fremde <nav>-Elemente (Breadcrumb,
 * Lang-Switcher) erwischt.
 */

.page-header .pcw-skip {
  position: absolute;
  left: var(--pcw-space-2, 0.5rem);
  top: var(--pcw-space-2, 0.5rem);
  padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 1rem);
  background: var(--pcw-bg-raised, var(--light, #fafaf7));
  color: var(--pcw-ink, var(--dark, #1c1a16));
  border: 1px solid var(--pcw-border, var(--lightgray, #e6e4df));
  border-radius: var(--pcw-radius-sm, 3px);
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform 0.15s ease-in-out;
  z-index: 100;
}
.page-header .pcw-skip:focus {
  transform: translateY(0);
  outline: 3px solid var(--pcw-focus, var(--secondary, #1f6f5c));
  outline-offset: 2px;
}

.page-header > .pcw-primary-nav {
  display: block;
  margin: 0 0 var(--pcw-space-3, 1rem) 0;
  padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 1rem);
  background: var(--pcw-bg-raised, var(--light, #fafaf7));
  border: 1px solid var(--pcw-border, var(--lightgray, #e6e4df));
  border-radius: var(--pcw-radius-md, 4px);
}

.page-header > .pcw-primary-nav .pcw-primary-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pcw-space-3, 1rem);
}

.page-header .pcw-nav-toggle {
  display: none;
  align-items: center;
  gap: var(--pcw-space-2, 0.5rem);
  padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 1rem);
  background: transparent;
  border: 1px solid var(--pcw-border, var(--lightgray, #e6e4df));
  border-radius: var(--pcw-radius-sm, 3px);
  cursor: pointer;
  color: var(--pcw-ink, var(--dark, #1c1a16));
  font: inherit;
}
.page-header .pcw-nav-toggle:focus-visible {
  outline: 3px solid var(--pcw-focus, var(--secondary, #1f6f5c));
  outline-offset: 2px;
}
.page-header .pcw-nav-toggle-icon {
  display: inline-block;
  width: 1.25rem;
  height: 0.125rem;
  background: currentColor;
  position: relative;
}
.page-header .pcw-nav-toggle-icon::before,
.page-header .pcw-nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: currentColor;
}
.page-header .pcw-nav-toggle-icon::before { top: -0.4rem; }
.page-header .pcw-nav-toggle-icon::after { top: 0.4rem; }

.page-header .pcw-primary-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pcw-space-1, 0.25rem) var(--pcw-space-3, 1rem);
  flex: 1 1 auto;
  min-width: 0;
}

.page-header .pcw-nav-emergency-standalone-list {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-header .pcw-nav-emergency-standalone {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-header .pcw-primary-nav-inner {
  min-width: 0;
}

.page-header .pcw-nav-link {
  display: inline-block;
  padding: var(--pcw-space-1, 0.25rem) var(--pcw-space-2, 0.5rem);
  color: var(--pcw-ink, var(--dark, #1c1a16));
  text-decoration: none;
  border-radius: var(--pcw-radius-sm, 3px);
  font-size: var(--pcw-text-sm, 0.9rem);
  border-bottom: 1px solid transparent;
}
/* --pcw-accent-ink ist die Schrift AUF der Akzentfläche (#fafaf7,
 * fast weiss) — gedacht fuer die Beschriftung eines Primaerbuttons mit
 * grünem Grund. Diese Nav-Links haben KEINEN Grund; sie stehen auf der
 * weissen Kopfzeile. Als Schriftfarbe ergab das 1.05:1 — der jeweils
 * aktive Menüpunkt war unsichtbar, in Hell- UND Dunkelmodus.
 *
 * Der Fallback in derselben Zeile (var(--secondary, #1f6f5c)) zeigt die
 * ursprüngliche Absicht: solange --pcw-accent-ink undefiniert war, kam
 * das richtige Grün heraus. Erst als pcw-design.css den Token einführte,
 * kippte die Farbe. Ein Token zu definieren hat hier eine Regel kaputt
 * gemacht, die vorher funktionierte — deshalb prüft
 * tests/test_design_tokens.py jetzt die BENUTZUNG, nicht nur den Wert.
 *
 * Richtig ist --pcw-accent (#1f6f5c, 6.02:1 auf Weiss) — dieselbe Farbe,
 * die .pcw-btn--secondary als Schrift verwendet.
 * Gemessen am 2026-09-06 im gebauten Stand. Verwandt mit dem
 * Fläche/Schrift-Fehler bei --pcw-urgent weiter unten. */
.page-header .pcw-nav-link:hover {
  color: var(--pcw-accent, var(--secondary, #1f6f5c));
  border-bottom-color: var(--pcw-accent, var(--secondary, #1f6f5c));
}
.page-header .pcw-nav-link:focus-visible {
  outline: 3px solid var(--pcw-focus, var(--secondary, #1f6f5c));
  outline-offset: 2px;
}
.page-header .pcw-nav-link[aria-current="page"] {
  color: var(--pcw-accent, var(--secondary, #1f6f5c));
  font-weight: 600;
  border-bottom-color: var(--pcw-accent, var(--secondary, #1f6f5c));
}

/* Emergency-Hilfe: ruhig, aber erkennbar — bewusst kein CTA-Look.
 * Wärmere Akzentfarbe, dünner linker Rand, normale Schriftgrösse. */
.page-header .pcw-nav-link-emergency {
  margin-left: auto;
  padding: var(--pcw-space-1, 0.25rem) var(--pcw-space-3, 1rem);
  /* --pcw-urgent ist ein FLAECHEN-Merkmal, kein Textmerkmal.
   * Im Hellmodus steht dort #fce6e3 (blassrosa Hintergrund fuer
   * Warnflaechen), im Dunkelmodus #4a2422. Als Schriftfarbe ergab das
   * auf weissem Grund ein Kontrastverhaeltnis von 1.2:1 — WCAG AA
   * verlangt 4.5:1 bei 14px. Der Akuteinstieg, den S2 hervorheben
   * sollte, war damit das am schlechtesten lesbare Element der Seite.
   * Gemessen am 2026-09-06 im gebauten Stand.
   *
   * Fuer Text existiert --pcw-urgent-ink (#842016 hell / heller Ton
   * dunkel). Der Rand darf die Flaechenfarbe behalten — dort traegt
   * sie keine Information, die gelesen werden muss. */
  color: var(--pcw-urgent-ink, #842016);
  border-left: 3px solid var(--pcw-urgent-ink, #842016);
  background: transparent;
  font-weight: 600;
}
.page-header .pcw-nav-link-emergency:hover {
  background: rgba(179, 38, 30, 0.06);
}
.page-header .pcw-nav-link-emergency:focus-visible {
  outline: 3px solid var(--pcw-focus, var(--secondary, #1f6f5c));
  outline-offset: 2px;
}

/* Browse all topics — sekundär, kleiner, nicht konkurrierend mit den
 * sieben Hauptbereichen. */
.page-header .pcw-nav-link-secondary {
  color: var(--pcw-ink-muted, var(--darkgray, #5b564d));
  font-size: var(--pcw-text-sm, 0.85rem);
}
.page-header .pcw-nav-link-secondary:hover {
  color: var(--pcw-accent, var(--secondary, #1f6f5c));
}

/* Such-Button im primären Nav, damit Suche global sichtbar bleibt.
 * Delegiert per JS an den vorhandenen Sidebar-Search-Button. */
.page-header .pcw-nav-search {
  display: inline-flex;
  align-items: center;
  gap: var(--pcw-space-1, 0.25rem);
  padding: var(--pcw-space-1, 0.25rem) var(--pcw-space-3, 1rem);
  background: transparent;
  border: 1px solid var(--pcw-border, var(--lightgray, #e6e4df));
  border-radius: var(--pcw-radius-sm, 3px);
  cursor: pointer;
  color: var(--pcw-ink, var(--dark, #1c1a16));
  font: inherit;
  font-size: var(--pcw-text-sm, 0.9rem);
  text-decoration: none;
}
.page-header .pcw-nav-search:hover {
  border-color: var(--pcw-accent, var(--secondary, #1f6f5c));
}
.page-header .pcw-nav-search:focus-visible {
  outline: 3px solid var(--pcw-focus, var(--secondary, #1f6f5c));
  outline-offset: 2px;
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .page-header > .pcw-primary-nav {
    padding: var(--pcw-space-2, 0.5rem);
  }

  /* S3: drei sichtbare Buttons (Menu + Notfall-Anker + Open search)
   * sollen auf 375 px in EINE Zeile passen, statt wie bisher umzubrechen
   * und 118 px Hoehe zu belegen. flex-wrap:nowrap erzwingt das, auch
   * wenn der verfügbare Platz knapp ist; Menu und Open search duerfen
   * sich notfalls verkuerzen, der Notfall-Anker hat Vorrang.
   *
   * Selektor-Spezifitaet: wir qualifizieren mit > .pcw-primary-nav,
   * damit die Regel an Spezifitaet mit der Desktop-Regel gleichzieht
   * (sonst wuerde die "wrap"-Regel aus der Basis gewinnen). */
  .page-header > .pcw-primary-nav .pcw-primary-nav-inner {
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--pcw-space-2, 0.5rem);
  }

  .page-header .pcw-nav-toggle {
    display: inline-flex;
  }

  /* Drawer ist standardmäßig zu. Offen => flex column, volle Breite. */
  .page-header .pcw-primary-nav-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    gap: var(--pcw-space-1, 0.25rem);
    padding-top: var(--pcw-space-2, 0.5rem);
  }
  .page-header .pcw-primary-nav[data-pcw-open="true"] .pcw-primary-nav-list {
    display: flex;
  }

  .page-header .pcw-nav-link,
  .page-header .pcw-nav-link-emergency,
  .page-header .pcw-nav-link-secondary {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 1rem);
    border-left-width: 3px;
  }
  .page-header .pcw-nav-link-emergency {
    margin-left: 0;
    border-left-width: 3px;
  }

  /* §2b S2 — Emergency-Anker steht ausserhalb der Drawer-Liste und
   * ist auf Mobil IMMER sichtbar, nicht erst nach Oeffnen des
   * Menues. Position rechts neben dem Menu-Toggle und dem Open-
   * search-Button; ueber die Inhalte der Drawer-Liste gestapelt,
   * wenn der Drawer offen ist. Ohne diesen Override waere der
   * Anker ueber das display: none der Liste versteckt. */
  .page-header .pcw-nav-emergency-standalone-list {
    display: inline-flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
  .page-header .pcw-nav-emergency-standalone-list > .pcw-nav-emergency-standalone {
    display: inline-flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .page-header .pcw-nav-emergency-standalone-list > .pcw-nav-emergency-standalone > .pcw-nav-link-emergency {
    display: inline-flex;
    width: auto;
    margin: 0;
    padding: var(--pcw-space-1, 0.25rem) var(--pcw-space-3, 1rem);
  }
  /* Im geoeffneten Drawer fuegt sich der Standalone-Anker unter den
   * Menu-Toggle (er sitzt im Flex-Container). Visuelle Trennung
   * bleibt erhalten (rote Akzentfarbe). */
}

/* ----- Sehr schmal: 320 CSS-px (WCAG 1.4.10 Reflow) ----- */
/* Bei 400 % Zoom bleiben 320 CSS-px übrig. Die drei Bedienelemente
 * der Kopfzeile brauchen dort zusammen 340 px:
 *
 *   Menu 91  +  Notfall 123.4  +  Suche 84.4  +  2x8 Abstand  =  314.8
 *
 * Mit flex-wrap: nowrap (aus S3, damit auf 375 px nichts umbricht)
 * schiebt der Überschuss den Suchknopf bis x = 339.8 — die Seite
 * scrollt waagerecht. WCAG 1.4.10 verlangt 320 px ohne Scrollen in
 * zwei Richtungen; die S3-Zusage lautete 375 px und ist erfüllt.
 * Gemessen am 2026-09-06 im gebauten Stand.
 *
 * Der Suchknopf trägt seinen Namen doppelt: als aria-label und als
 * sichtbares <span>. Unter 360 px fällt das span weg — der
 * zugängliche Name bleibt am aria-label hängen, die Lupe bleibt
 * sichtbar, und das Tap-Ziel bleibt über 44 px, weil das Padding
 * nicht angetastet wird. Das spart 44.6 px Text plus 4 px Abstand.
 *
 * Warum nicht umbrechen lassen: eine zweite Zeile kostet 118 px Höhe
 * genau dort, wo bei 400 % Zoom am wenigsten Platz ist — der
 * Akuteinstieg rutschte unter die Falz. Das war der Grund für S3. */
@media (max-width: 360px) {
  .page-header .pcw-nav-search > span {
    /* Nicht display:none auf dem Knopf selbst — nur der Text geht weg. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .page-header .pcw-nav-search {
    /* Ohne Text bleibt die Lupe; quadratisches Ziel statt Pille. */
    padding: var(--pcw-space-1, 0.25rem) var(--pcw-space-2, 0.5rem);
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .page-header .pcw-skip {
    transition: none;
  }
}