/*
 * ngo-tokens.css — NGO-Files Token-Layer (Rebrand-Welle Phase 3+4+6, 2026-05-15)
 *
 * Zweite Sub-Sprache neben tokens.css (NGO-Files-Public --sl-*). Synchron zu
 * startseite-v3-preview.html: HSL-Tokens, 3-Layer-Hintergrund, Sun/Moon-Toggle,
 * Zurück-Door. Auto-eingehängt via _lib/ngo-shell.js.
 *
 * Inklusion:  <link rel="stylesheet" href="_lib/ngo-tokens.css">
 *             <script src="_lib/ngo-shell.js" defer></script>
 *
 * Mode-Persistenz: localStorage['ngo3-mode'] = 'light' | 'dark'
 * (synchron mit Frontpage-Toggle)
 *
 * Backward-Compat: Bestehende --sl-* + --blue/--ink/--bg/--white/--border bleiben
 * unangetastet. NGO-Tokens überlagern nur, wo bewusst Dark/Light-Switch nötig ist.
 */

:root {
  --background: 220 20% 97%;
  --foreground: 220 15% 15%;
  --card-hsl: 0 0% 100%;
  --muted: 220 15% 92%;
  --muted-foreground: 220 10% 45%;
  --border-hsl: 220 15% 88%;
  --primary: 200 85% 45%;
  --primary-foreground: 0 0% 100%;
  --ngo-radius: .75rem;
  --grid-stroke: 220 10% 70%;
  --grid-opacity: .06;
}
html[data-mode="dark"] {
  /* Variante A — Soft Dark (Linear/Notion-Inspiration, User-Auswahl 2026-05-15) */
  --background: 220 13% 16%;       /* echtes Mittelgrau, kein Schwarz */
  --foreground: 220 14% 90%;       /* softes Off-White */
  --card-hsl: 220 13% 20%;         /* +4 % L */
  --card-elevated: 220 13% 23%;    /* +7 % L für Infobox/Recherche-Block */
  --muted: 220 12% 24%;            /* Code-Bg, Pill-Bg */
  --muted-foreground: 220 8% 68%;
  --border-hsl: 220 10% 28%;       /* weich */
  --border-strong: 220 10% 36%;    /* Sidebar-Trenner */
  --primary: 195 75% 62%;          /* Cyan etwas entsättigt */
  --primary-foreground: 220 30% 10%;
  --ring: 195 75% 62%;
  --grid-stroke: 220 12% 32%;
  --grid-opacity: .07;
  /* Alias-Mapping: ersetzt --white/--bg/--navy/--ink/--grey/--blue
     im Dark-Branch, damit wiki-style.css + artikel-components.css +
     Inline-Styles wie style="background:var(--white)" automatisch
     mit Dark-Tönen rendern. Löst ~80% der bisherigen !important-Overrides. */
  --white: hsl(220 13% 20%);
  --bg: hsl(220 13% 17%);
  --navy: hsl(220 14% 90%);
  --ink: hsl(220 14% 90%);
  /* Body-/Card-Text-Aliasse (Klemmbrett #55, 2026-05-30): --ink-sec/--ink-muted
     waren im Dark-Branch NICHT remappt → behielten ihre Light-Hex (#475569 /
     #94a3b8) und rendern als dunkle Slate-Töne auf dunklen Cards (Glossar
     .gloss-long ≈ 1,7:1 Kontrast). Anhebung in die bestehende Token-Leiter:
     ink 90% (Headings) → ink-sec 80% (Fließtext) → ink-muted 70% (Captions)
     → grey/muted-foreground 68% (Labels). Kontrast auf Card-Bg jetzt ~8:1
     (ink-sec, AAA) bzw. ~5,7:1 (ink-muted, AA). */
  --ink-sec: hsl(220 12% 80%);
  --ink-muted: hsl(220 10% 70%);
  --grey: hsl(220 8% 68%);
  --blue: hsl(195 75% 62%);
  --blue-bg: hsl(195 75% 62% / .12);
  --red: hsl(0 70% 65%);
  --shadow: 0 1px 0 hsl(220 15% 10%), 0 0 0 1px hsl(220 10% 28%);
}

/* ───── Body-Layer (sanft, ohne Bestand-CSS zu killen) ───── */
html[data-mode="dark"] body {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground));
  transition: background .35s ease, color .35s ease;
}

/* ───── 3-Layer-Hintergrund (fixed, hinter allem) ───── */
.ngo-bg-stack {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
}
.ngo-bg-stack .bg-1 {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    hsl(var(--background)),
    hsl(220 25% 95%) 40%,
    hsl(200 30% 92%) 100%);
}
html[data-mode="dark"] .ngo-bg-stack .bg-1 {
  background: linear-gradient(135deg,
    hsl(220 15% 8%),
    hsl(220 18% 10%) 40%,
    hsl(210 25% 11%) 100%);
}
.ngo-bg-stack .bg-2 {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(hsl(var(--grid-stroke) / var(--grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--grid-stroke) / var(--grid-opacity)) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 60%, transparent 100%);
}
.ngo-bg-stack .bg-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%,
    hsl(var(--primary) / .12), transparent 65%);
}
html[data-mode="dark"] .ngo-bg-stack .bg-glow {
  background: radial-gradient(ellipse 60% 40% at 50% 0%,
    hsl(var(--primary) / .18), transparent 65%);
}

/* ───── Dark-Mode Overrides für Bestand-CSS ───── */
/* Wiki-Style: Sidebar + Header + Cards lesbar im Dark-Mode halten */
html[data-mode="dark"] .wiki-header {
  background: hsl(var(--card-hsl) / .9) !important;
  border-bottom-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] .wiki-header .wiki-nav a,
html[data-mode="dark"] .wiki-header .wiki-nav input {
  color: hsl(var(--foreground));
  border-color: hsl(var(--border-hsl));
}
html[data-mode="dark"] .sidebar,
html[data-mode="dark"] .wiki-search,
html[data-mode="dark"] .wiki-search-box,
html[data-mode="dark"] .wiki-search-results {
  background: hsl(var(--card-hsl)) !important;
  border-color: hsl(var(--border-hsl)) !important;
  color: hsl(var(--foreground)) !important;
}
html[data-mode="dark"] .toc-link {
  color: hsl(var(--muted-foreground)) !important;
}
html[data-mode="dark"] .toc-link:hover,
html[data-mode="dark"] .toc-link.active {
  color: hsl(var(--primary)) !important;
}
html[data-mode="dark"] .content,
html[data-mode="dark"] main.content,
html[data-mode="dark"] section,
html[data-mode="dark"] .article-card,
html[data-mode="dark"] .source-card,
html[data-mode="dark"] .drs-note,
html[data-mode="dark"] .news-card,
html[data-mode="dark"] .info-box {
  background: hsl(var(--card-hsl)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] h1, html[data-mode="dark"] h2,
html[data-mode="dark"] h3, html[data-mode="dark"] h4 {
  color: hsl(var(--foreground)) !important;
}
html[data-mode="dark"] p, html[data-mode="dark"] li, html[data-mode="dark"] td {
  color: hsl(var(--foreground)) !important;
}
html[data-mode="dark"] code, html[data-mode="dark"] pre {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] table {
  background: hsl(var(--card-hsl)) !important;
  color: hsl(var(--foreground)) !important;
}
html[data-mode="dark"] th {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] td {
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] a {
  color: hsl(var(--primary));
}
/* Hauptseite (Blog) Header sticky background */
html[data-mode="dark"] .header {
  background: hsl(var(--card-hsl) / .85) !important;
  border-bottom-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] .nav a {
  color: hsl(var(--foreground)) !important;
}
html[data-mode="dark"] .case-card,
html[data-mode="dark"] .v7-tab,
html[data-mode="dark"] .pitch-card {
  background: hsl(var(--card-hsl)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}

/* Wiki-Komponenten mit hardcoded Hex / unzureichender Transparenz */
html[data-mode="dark"] .infobox,
html[data-mode="dark"] .nb-hub,
html[data-mode="dark"] .nb-card-active {
  background: hsl(var(--card-elevated)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] .rp-block,
html[data-mode="dark"] .recherche-protokoll {
  background: hsl(var(--card-elevated)) !important;
  border-color: hsl(var(--border-hsl)) !important;
  color: hsl(var(--foreground)) !important;
}
html[data-mode="dark"] .rp-iter-pill,
html[data-mode="dark"] .iter-pill {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border-hsl));
}
html[data-mode="dark"] .iter-z-typed-luecken,
html[data-mode="dark"] .conn-tag,
html[data-mode="dark"] .connections .conn-tag {
  background: hsl(var(--primary) / .12) !important;
  border-color: hsl(var(--primary) / .35) !important;
  color: hsl(var(--foreground)) !important;
}
html[data-mode="dark"] .sl-drehtuer-station,
html[data-mode="dark"] .sl-timeline-item::before {
  background: hsl(var(--card-elevated)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
/* Blog-Sonderseiten-Komponenten (artikel-components.css) */
html[data-mode="dark"] .sl-chapter-btn {
  background: hsl(var(--card-elevated)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] .sl-parl-box {
  background: hsl(var(--primary) / .10) !important;
  border-color: hsl(var(--primary) / .25) !important;
  color: hsl(var(--foreground)) !important;
}
/* Lektions-Quiz + Karteikarten (Klemmbrett #57/#58, 2026-05-30):
   wiki-style.css gibt diesen Komponenten hartkodierte helle Hintergründe
   (#fff / #fafaf7 / --blue-bg), während der Text über --ink/--ink-sec im
   Dark-Mode hell wird → heller Text auf hellem Grund, faktisch unlesbar.
   Analog zu .article-card/.info-box in den Dark-Mode-Kanon holen. */
html[data-mode="dark"] .lesson-quiz,
html[data-mode="dark"] .lesson-cards {
  background: hsl(var(--card-hsl)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] .lesson-quiz .lq-opt {
  background: hsl(var(--card-elevated)) !important;
  border-color: hsl(var(--border-hsl)) !important;
  color: var(--ink) !important;
}
html[data-mode="dark"] .lesson-quiz .lq-opt.is-correct {
  background: hsl(142 38% 22%) !important;
  border-color: hsl(142 45% 42%) !important;
  color: hsl(142 55% 82%) !important;
}
html[data-mode="dark"] .lesson-quiz .lq-opt.is-wrong {
  background: hsl(0 38% 24%) !important;
  border-color: hsl(0 50% 48%) !important;
  color: hsl(0 60% 85%) !important;
}
html[data-mode="dark"] .lesson-quiz .lq-explain {
  background: hsl(var(--card-elevated)) !important;
  color: var(--ink-sec) !important;
}
html[data-mode="dark"] .lesson-quiz .lq-result {
  background: hsl(var(--card-elevated)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] .lesson-quiz .lq-badge,
html[data-mode="dark"] .lesson-cards .lc-badge {
  background: hsl(var(--primary) / .16) !important;
}
html[data-mode="dark"] .lesson-cards .lc-face {
  border-color: hsl(var(--border-hsl)) !important;
}
html[data-mode="dark"] .lesson-cards .lc-front {
  background: hsl(var(--card-elevated)) !important;
}
html[data-mode="dark"] .lesson-cards .lc-front .lc-term {
  color: var(--ink) !important;
}
html[data-mode="dark"] .lesson-cards .lc-back {
  background: hsl(var(--card-hsl)) !important;
}
html[data-mode="dark"] .lesson-dl a {
  background: hsl(var(--card-hsl)) !important;
  border-color: hsl(var(--border-hsl)) !important;
}
/* Aktenschrank (Klemmbrett #56, 2026-05-31): Die Seite hängt sich neu in die
   Dark-Mode-Schicht ein. Das Alias-Mapping (--white/--bg/--ink/--navy) deckt
   Flächen + Fließtext schon ab; diese Badges nutzen aber hartkodierte helle
   Hex bzw. --navy/--blue-dark als Hintergrund/Text und blieben sonst unlesbar
   (weißer Text auf hell remapptem --navy, helles --ink-sec auf #f1f5f9 usw.). */
html[data-mode="dark"] .akte-region {
  background: hsl(220 13% 32%) !important;
  color: hsl(220 14% 92%) !important;
}
html[data-mode="dark"] .akte-mediatype {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
}
html[data-mode="dark"] .akte-sammelakte {
  color: hsl(45 70% 72%) !important;
}
html[data-mode="dark"] .akte-primaer,
html[data-mode="dark"] .status-pill {
  color: hsl(var(--primary)) !important;
}
/* Light-grey Bestand-Border (#e2e8f0) leuchtet auf dunklen Cards — weich ziehen. */
html[data-mode="dark"] .filter-bar,
html[data-mode="dark"] .akte-card,
html[data-mode="dark"] .filter-select,
html[data-mode="dark"] .filter-reset {
  border-color: hsl(var(--border-hsl)) !important;
}

/* Transkript-Header (Klemmbrett #56, 2026-05-31): .ts-header hat
   background:rgba(255,255,255,.92) hart verdrahtet → blieb im Dark-Mode ein
   weißer Balken auf dunkler Seite. Analog zu .wiki-header/.header in den
   Dark-Kanon holen. */
html[data-mode="dark"] .ts-header {
  background: hsl(var(--card-hsl) / .9) !important;
  border-bottom-color: hsl(var(--border-hsl)) !important;
}

/* Inline-styled "background:var(--white)" und Co. werden bereits durch
   das Alias-Mapping oben (--white/--bg/--navy/--ink) im Dark-Branch
   automatisch korrigiert — keine zusätzliche Override nötig. */

/* ───── Toggle-Dock (auto-injected via ngo-shell.js) ─────
   Klemmbrett #60 (2026-05-31): Beide Schalter (Hell/Dunkel + Logo-Stil) saßen
   früher getrennt oben rechts und überlappten auf schmalen Screens. Jetzt sitzen
   sie als EIN Paar unten links nebeneinander — eine Variante auf allen Seiten
   (Desktop wie Mobil). Unten rechts bleibt dem Klemmbrett vorbehalten, daher
   links verankert: kein Überlappen mit Toggles, Klemmbrett oder Navigations-
   Flügeln mehr möglich. */
.ngo-toggle-dock {
  position: fixed; z-index: 200;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 28px);
  flex-wrap: nowrap; justify-content: flex-start;
}

/* ───── Sun/Moon-Toggle (auto-injected) ───── */
.ngo-mode-toggle {
  order: 2;
  display: flex; gap: 2px; padding: 4px;
  background: hsl(var(--card-hsl) / .85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid hsl(var(--border-hsl));
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  font-family: 'Inter', system-ui, sans-serif;
}
.ngo-mode-toggle button {
  appearance: none; border: 0; background: transparent;
  width: 28px; height: 28px; padding: 0;
  color: hsl(var(--muted-foreground));
  border-radius: 999px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .2s;
}
.ngo-mode-toggle button:hover { color: hsl(var(--foreground)); }
.ngo-mode-toggle button.on {
  background: hsl(var(--card-hsl));
  color: hsl(var(--primary));
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.ngo-mode-toggle svg { width: 14px; height: 14px; }

/* ───── Logo-Stil-Toggle (Klassisch/Outline, auto-injected) ───── */
.ngo-style-toggle {
  order: 1;
  display: flex; gap: 2px; padding: 4px;
  background: hsl(var(--card-hsl) / .85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid hsl(var(--border-hsl));
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  font-family: 'Inter', system-ui, sans-serif;
}
.ngo-style-toggle button {
  appearance: none; border: 0; background: transparent;
  padding: 5px 11px;
  color: hsl(var(--muted-foreground));
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  transition: all .2s;
}
.ngo-style-toggle button:hover { color: hsl(var(--foreground)); }
.ngo-style-toggle button.on {
  background: hsl(var(--card-hsl));
  color: hsl(var(--primary));
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
@media (max-width: 640px) {
  .ngo-style-toggle button { padding: 5px 8px; font-size: 10.5px; }
}

/* ───── Navigations-Flügel (auto-injected via ngo-shell.js) ─────
   Vereinheitlicht 2026-05-30 (Klemmbrett #35): EINE Variante überall — die
   breiten „Flügel" wie auf der Frontseite (html/index.html .side-doors), nicht
   mehr die schmale vertikale „Säulen"-Variante (writing-mode). Identisches
   Verhalten auf Desktop UND Mobil.

   Ruhezustand: kompakte Logo-Pille am Rand. Nur das Akten-Logo ist sichtbar —
   es passt exakt in das reservierte Body-Padding und überlappt daher NIE den
   Artikel-Inhalt (Sidebar/Lesespalte). Das Logo trägt die Wiedererkennung zur
   Frontseite. Hover/Focus: die Pille wächst zum vollen Flügel (Logo + Label +
   Name in Fraunces-Italic + Pfeil) und gleitet kurz über den Rand-Whitespace.

   Warum Peek statt dauerhaft-voll (wie die Frontseite): die Artikelseiten haben
   bei üblichen Laptop-Breiten (~1280px) kaum Seitenrand — ein dauerhaft voll
   ausgefahrener Flügel würde Sidebar/Text überdecken. Die Logo-Pille + Hover-
   Expand ist die einzige Variante, die auf allen Sub-Seiten ohne Inhalts-
   Kollision funktioniert und trotzdem dieselbe Flügel-Bildsprache zeigt. */

/* Body-Padding reserviert exakt die Ruhe-Breite der Logo-Pille (kein Overlap). */
body.ngo-has-back-door { padding-left: 56px; }
body.ngo-has-forward-door { padding-right: 56px; }
@media (max-width: 760px) {
  /* Mobil: seitliches Padding weg, dafür unten Platz für die Flügel-Leiste reservieren. */
  body.ngo-has-back-door, body.ngo-has-forward-door {
    padding-left: 0; padding-right: 0; padding-bottom: 60px;
  }
}

.ngo-back-door,
.ngo-forward-door {
  position: fixed; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 11px;
  height: 64px; padding: 0 13px; overflow: hidden;
  background: hsl(var(--card-hsl));
  border: 1px solid hsl(var(--border-hsl));
  box-shadow: 0 8px 26px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.4) inset;
  cursor: pointer; text-decoration: none;
  color: hsl(var(--foreground));
  z-index: 40;
  font-family: 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  transition: max-width .34s cubic-bezier(.22,.61,.36,1), box-shadow .3s, background .2s;
}
.ngo-back-door {
  left: 0; flex-direction: row;
  border-left: 0; border-radius: 0 16px 16px 0;
  max-width: 56px;                /* Ruhe: nur Logo (30px + 2×13px Pad) */
}
.ngo-forward-door {
  right: 0; flex-direction: row-reverse;
  border-right: 0; border-radius: 16px 0 0 16px;
  max-width: 56px;
}
.ngo-back-door:hover, .ngo-back-door:focus-visible, .ngo-back-door:focus-within,
.ngo-forward-door:hover, .ngo-forward-door:focus-visible, .ngo-forward-door:focus-within {
  max-width: 260px;
  box-shadow: 0 12px 34px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.5) inset;
}
html[data-mode="dark"] .ngo-back-door,
html[data-mode="dark"] .ngo-forward-door {
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
}

/* Logo (order 0 = an der Rand-Seite, im Ruhezustand sichtbar) */
.ngo-back-door img, .ngo-back-door .ngo-back-door-fallback,
.ngo-forward-door img, .ngo-forward-door .ngo-forward-door-fallback {
  width: 30px; height: 30px; flex: none; order: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.ngo-back-door .ngo-back-door-fallback,
.ngo-forward-door .ngo-forward-door-fallback {
  display: none; align-items: center; justify-content: center;
}
.ngo-back-door .ngo-back-door-fallback svg,
.ngo-forward-door .ngo-forward-door-fallback svg { width: 100%; height: 100%; }

/* Text (Label + Name), erscheint beim Ausfahren */
.ngo-back-door-text, .ngo-forward-door-text {
  display: flex; flex-direction: column; gap: 1px; order: 1; line-height: 1.2;
}
.ngo-forward-door-text { align-items: flex-end; text-align: right; }
.ngo-back-door-label, .ngo-forward-door-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: hsl(var(--muted-foreground)); font-weight: 600;
}
.ngo-back-door-name, .ngo-forward-door-name {
  font-size: 18px; font-weight: 700;
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-style: italic; color: hsl(var(--primary)); letter-spacing: -.01em;
}

/* Pfeil — erst beim Ausfahren als subtiler Hinweis */
.ngo-back-door-arrow, .ngo-forward-door-arrow {
  order: 2; color: hsl(var(--muted-foreground)); font-size: 15px;
  opacity: 0; transition: opacity .25s, color .2s;
}
.ngo-back-door:hover .ngo-back-door-arrow,
.ngo-back-door:focus-visible .ngo-back-door-arrow,
.ngo-forward-door:hover .ngo-forward-door-arrow,
.ngo-forward-door:focus-visible .ngo-forward-door-arrow {
  opacity: .6; color: hsl(var(--primary));
}

/* Mobil (≤760px): identisch zur Startseite — die beiden Flügel klappen in eine
   schlanke UNTERE LEISTE (kein seitlicher Säulen-Grip mehr). Back-Door = linke
   Hälfte ("Zurück zur Suche"), Forward-Door = rechte Hälfte (Wiki↔Blog); ohne
   Forward-Door nimmt die Back-Door die volle Breite. ~90 %-Skalierung
   (Logo 24px, Name 15px). Martin 2026-06-01: Wiki/Blog so wie Startseite. */
@media (max-width: 760px) {
  .ngo-back-door, .ngo-forward-door {
    top: auto; bottom: 0; height: auto;
    transform: none; max-width: none; overflow: visible;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
    justify-content: center; gap: 8px;
    border: 0; border-radius: 0;
    border-top: 1px solid hsl(var(--border-hsl));
    background: hsl(var(--background) / .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 -2px 14px rgba(0,0,0,.07);
    z-index: 60;
  }
  /* Back-Door links: volle Breite, sofern keine Forward-Door existiert. */
  .ngo-back-door { left: 0; right: 0; }
  /* Mit Forward-Door teilt sich die Leiste 50/50. */
  body.ngo-has-forward-door .ngo-back-door { right: 50%; }
  .ngo-forward-door {
    left: 50%; right: 0;
    border-left: 1px solid hsl(var(--border-hsl));
  }
  .ngo-back-door img, .ngo-back-door .ngo-back-door-fallback,
  .ngo-forward-door img, .ngo-forward-door .ngo-forward-door-fallback {
    width: 24px; height: 24px;
  }
  .ngo-back-door-name, .ngo-forward-door-name { font-size: 15px; }
  .ngo-back-door-label, .ngo-forward-door-label { font-size: 9px; }
  .ngo-back-door-arrow, .ngo-forward-door-arrow { display: none; }
  .ngo-back-door:active, .ngo-forward-door:active { background: hsl(var(--muted) / .55); }
  /* Toggle-Dock (Hell/Dunkel + Logo-Stil) über die neue Flügel-Leiste heben,
     sonst überlappt der unten-links verankerte Dock die Leiste. */
  body.ngo-has-back-door .ngo-toggle-dock,
  body.ngo-has-forward-door .ngo-toggle-dock {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══ Dark-Mode-Fixes Blog-Layout (Phase 1+2+3) ═════════════════
   Phase 3 Design-Update (User 2026-05-21): Cards waren ~1pt HELLER als
   Page-Bg → wirkten wie "draufgesetzt", unaufgeräumt. Jetzt SUBTLE DEEP:
   Cards 2-3pt DUNKLER als Page (Page = hsl 220 13% 17%, Cards = 13%),
   Border stark transparent. Ergebnis: ruhiger, fließender. */
html[data-mode="dark"] .v5c-hlogo {
  background: hsl(220 14% 13%);
  border-color: hsl(220 15% 22% / .4);
}
html[data-mode="dark"] .v5c-hlogo svg {
  filter: brightness(1.15);
}
html[data-mode="dark"] .v7-text,
html[data-mode="dark"] .v7-tabs,
html[data-mode="dark"] .v7-tab {
  background: hsl(220 14% 13%);
}
html[data-mode="dark"] .v7-tab {
  border-right-color: hsl(220 15% 22% / .4);
}
html[data-mode="dark"] .v7-tabs {
  border-top-color: hsl(220 15% 22% / .4);
}

/* Recherche-Werkzeuge-Sektion oben */
html[data-mode="dark"] .v5c-collapsible-head {
  background: hsl(220 14% 13%) !important;
  border-color: hsl(220 15% 22% / .35);
  box-shadow: none;
}
html[data-mode="dark"] .v5c-collapsible-head:hover {
  border-color: hsl(195 75% 55% / .45);
  box-shadow: 0 4px 18px hsl(195 75% 55% / .08);
}
html[data-mode="dark"] .v5c-collapsible-title {
  color: hsl(220 14% 92%);
}
html[data-mode="dark"] .v5c-collapsible-icon {
  background: hsl(195 60% 30% / .18);
  color: hsl(195 75% 70%);
}
html[data-mode="dark"] .v5c-collapsible-chev {
  background: hsl(195 60% 30% / .14);
  color: hsl(195 75% 70%);
}

/* Suchfeld (Artikel durchsuchen) — auch leiser, fließt mit der Page */
html[data-mode="dark"] .search-input {
  background: hsl(220 14% 13%);
  border-color: hsl(220 15% 22% / .4);
  color: hsl(220 14% 92%);
}
html[data-mode="dark"] .search-input::placeholder {
  color: hsl(220 10% 60%);
}
html[data-mode="dark"] .search-input:focus {
  border-color: hsl(195 75% 55% / .6);
  box-shadow: 0 0 0 3px hsl(195 75% 55% / .14);
}

/* Player-Bar unten — var(--navy) wird im Dark-Alias hell (90%);
   für den Player wollen wir aber dunkel + helle Schrift. Direkter
   Override mit echten Werten. */
html[data-mode="dark"] .stl-player-bar,
html[data-mode="dark"] .stl-player-panel {
  background: hsl(220 22% 10%) !important;
  color: hsl(220 14% 95%);
  border-top-color: hsl(220 15% 22%);
}
html[data-mode="dark"] .stl-player-bar *,
html[data-mode="dark"] .stl-player-panel * {
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────
   Liquid-Glass + Search-Box (portiert aus html/index.html inline-Style,
   2026-05-22, #design.blog-filter-refactor v2). Identische Selektoren
   wie auf Frontpage, damit blog/wiki dieselben Komponenten nutzen ohne
   eigene Variante zu pflegen. Frontpage hat eigene inline-Definition
   und lädt ngo-tokens.css NICHT — keine Kollision. ───────────────── */
.btn-liquid-glass {
  position: relative; isolation: isolate;
  background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.6), rgba(255,255,255,.7));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 8px 32px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.03);
  overflow: hidden;
  transition: all .25s ease;
  color: hsl(var(--foreground));
}
html[data-mode="dark"] .btn-liquid-glass {
  background: linear-gradient(145deg, hsl(220 15% 20% / .8), hsl(220 15% 14% / .55), hsl(220 15% 18% / .7));
  border-color: hsl(220 15% 30% / .85);
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 2px 8px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.btn-liquid-glass-accent {
  position: relative; isolation: isolate;
  background: linear-gradient(145deg,
    hsl(var(--primary) / .9),
    hsl(var(--primary) / .85),
    hsl(var(--primary) / .88));
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  border: 1.5px solid hsl(var(--primary) / .6);
  box-shadow:
    0 0 24px hsl(var(--primary) / .35),
    0 12px 48px rgba(0,0,0,.12),
    0 4px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.05);
  overflow: hidden;
  transition: all .25s ease;
  color: hsl(var(--primary-foreground));
}
.btn-liquid-glass-accent:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 32px hsl(var(--primary) / .5),
    0 16px 56px rgba(0,0,0,.14),
    0 6px 20px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.05);
}

/* Search-Box — gleiches Layout wie Frontpage-Hero */
.search-box {
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 12px;
  transition: transform .25s, box-shadow .25s;
  max-width: 720px;
  margin: 0 auto;
}
.search-box:focus-within {
  box-shadow:
    0 0 0 4px hsl(var(--primary) / .18),
    0 12px 48px rgba(0,0,0,.14),
    0 4px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-mode="dark"] .search-box:focus-within {
  box-shadow:
    0 0 0 4px hsl(var(--primary) / .25),
    0 12px 48px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.search-box input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: hsl(var(--foreground));
  font: inherit; font-size: 16px;
  padding: 10px 0;
  font-family: 'Inter', 'DM Sans', sans-serif;
}
.search-box input::placeholder { color: hsl(var(--foreground) / .42); }
.search-box .send {
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.search-box .send svg { width: 16px; height: 16px; }
.search-box .search-clear {
  width: 30px; height: 30px;
  display: none;
  align-items: center; justify-content: center;
  border: 0; background: hsl(var(--muted, var(--border)) / .7);
  color: hsl(var(--muted-foreground));
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.search-box.has-value .search-clear { display: inline-flex; }
.search-box .search-clear:hover {
  background: hsl(var(--muted, var(--border)));
  color: hsl(var(--foreground));
}

.search-hint {
  margin-top: 14px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  text-align: center;
}
.search-hint kbd {
  display: inline-block;
  padding: 2px 7px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: hsl(var(--foreground) / .7);
}

/* Blog-Hero-Wrap zentriert die Liquid-Glass-Pille horizontal */
.blog-search-hero-wrap {
  margin: 18px 0 14px;
  display: flex; flex-direction: column; align-items: center;
}

/* Flat-Liste (Suche oder Filter aktiv) — Media-Karten sind im Bestand
   `grid-column:1/-1; flex-direction:row` und erzeugen breite Listen-
   Zeilen, die nicht zur Tile-Design-Sprache passen. Im Flat-Modus
   zwingen wir sie in die normale 2-Spalten-Grid-Zelle und stellen
   das Bild oben + Text unten dar — analog zu Text-Akten. */
.cases-grid--flat .case.case-media {
  grid-column: auto;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
html[data-mode="dark"] .cases-grid--flat .case.case-media {
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.cases-grid--flat .case.case-media .case-img {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
}
.cases-grid--flat .case.case-media .case-body {
  padding: 16px 18px 18px;
  justify-content: flex-start;
  min-width: 0;
}
.cases-grid--flat .case.case-media .case-title {
  font-size: 17px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.35;
}
.cases-grid--flat .case.case-media .case-state {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  margin-bottom: 6px;
}
.cases-grid--flat .case.case-media .case-excerpt {
  font-size: 13px;
  color: hsl(var(--foreground) / .75);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.55;
}

/* Filter-Bar: Trigger + view-switch nebeneinander */
.blog-filter-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.blog-filter-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.blog-filter-trigger:hover {
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
}
.blog-filter-trigger[aria-expanded="true"] {
  background: hsl(var(--primary) / .08);
  border-color: hsl(var(--primary) / .35);
  color: hsl(var(--primary));
}
.blog-filter-trigger > svg { width: 14px; height: 14px; }
.blog-filter-trigger .blog-filter-trigger-chevron {
  transition: transform .2s;
}
.blog-filter-trigger[aria-expanded="true"] .blog-filter-trigger-chevron {
  transform: rotate(180deg);
}
.blog-filter-trigger-badge {
  display: inline-flex;
  padding: 2px 8px;
  background: hsl(var(--primary) / .15);
  color: hsl(var(--primary));
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
}
.blog-filter-trigger-badge[data-count="0"] {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* Panel mit den 3 Sektionen */
.blog-filter-panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 16px 18px;
  margin: -4px 0 18px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
html[data-mode="dark"] .blog-filter-panel {
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.blog-filter-panel[hidden] { display: none; }
.blog-filter-section { display: flex; flex-direction: column; gap: 8px; }
.blog-filter-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.blog-filter-panel .filters { gap: 6px; flex-wrap: wrap; }

/* view-switch bleibt rechts, gleiche Höhe wie Trigger */
.blog-filter-bar .view-switch { margin-left: auto; }

@media (max-width: 640px) {
  .blog-search-hero { margin: 12px 4px 12px; padding: 8px 10px 8px 14px; }
  .blog-filter-bar .view-switch { margin-left: 0; }
}

/* ═══ FLÜGEL-TEXT + TOGGLE-DOCK Desktop (promoted aus Stacking 2026-06-05) ═══
   Stammt aus der Stacking-Sichtung 2026-06-04 (Depot STACKING-VORSCHAU-Block),
   Freigabe-Weg: Stacking → Martins Rundgang → live (Handoff 2026-06-05).

   1) Flügel: im Ruhezustand ragte ein 1–2px-Streifen der Schrift in die
      Logo-Pille (overflow-Schnitt mitten im Text). Text ist eingefahren
      voll transparent und blendet erst beim Ausfahren ein. Nur Desktop —
      in der mobilen Unter-Leiste ist der Text gewollt sichtbar.

   2) Toggle-Dock (Hell/Dunkel + Klassisch/Outline): auf Desktop OBEN RECHTS
      wie auf der Startseite. Mobil bleibt unten links (oben kollidiert es
      mit Titel bzw. Stacking-Leiste). */

@media (min-width: 761px) {
  .ngo-back-door-text, .ngo-forward-door-text {
    opacity: 0;
    transition: opacity .18s ease .08s;
  }
  .ngo-back-door:hover .ngo-back-door-text,
  .ngo-back-door:focus-visible .ngo-back-door-text,
  .ngo-back-door:focus-within .ngo-back-door-text,
  .ngo-forward-door:hover .ngo-forward-door-text,
  .ngo-forward-door:focus-visible .ngo-forward-door-text,
  .ngo-forward-door:focus-within .ngo-forward-door-text {
    opacity: 1;
  }

  .ngo-toggle-dock {
    left: auto; bottom: auto;
    right: 14px;
    /* --stacking-bar-h setzt stacking-bar.js (38px); ohne Leiste (live) = 0 */
    top: calc(14px + var(--stacking-bar-h, 0px));
  }
}

/* ngo-vt: weiche Seitenwechsel (seiten-sweep) */
/*ngo-vt-v3*/@media (prefers-reduced-motion: no-preference){@view-transition{navigation:auto;}@keyframes ngo-vts-out{to{opacity:0;transform:scale(1.02)}}@keyframes ngo-vts-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}::view-transition-old(root){animation:ngo-vts-out 340ms cubic-bezier(.4,0,.2,1) both}::view-transition-new(root){animation:ngo-vts-in 340ms cubic-bezier(.2,0,.2,1) both}@keyframes ngo-paper-out{to{transform:translateX(-16%) scale(.985);opacity:.5;filter:brightness(.95)}}@keyframes ngo-paper-in{from{transform:translateX(102%);box-shadow:-30px 0 64px rgba(0,0,0,.30)}to{transform:translateX(0);box-shadow:-30px 0 64px rgba(0,0,0,0)}}:root[data-vt=papier]::view-transition-old(root){animation:ngo-paper-out 420ms cubic-bezier(.32,.72,.28,1) both}:root[data-vt=papier]::view-transition-new(root){animation:ngo-paper-in 420ms cubic-bezier(.32,.72,.28,1) both}@keyframes ngo-vtb-out{50%{filter:brightness(.96) blur(2px)}to{transform:translateX(-16%) scale(.985);opacity:.45;filter:brightness(.95) blur(0)}}@keyframes ngo-vtb-in{from{transform:translateX(102%) scaleX(1);filter:blur(0);box-shadow:-30px 0 64px rgba(0,0,0,.30)}40%{transform:translateX(44%) scaleX(1.03);filter:blur(3px)}to{transform:translateX(0) scaleX(1);filter:blur(0);box-shadow:-30px 0 64px rgba(0,0,0,0)}}:root[data-vt=blur]::view-transition-old(root){animation:ngo-vtb-out 460ms cubic-bezier(.30,.70,.25,1) both}:root[data-vt=blur]::view-transition-new(root){animation:ngo-vtb-in 460ms cubic-bezier(.30,.70,.25,1) both}@keyframes ngo-vtg-out{to{transform:translateX(-10%);opacity:.35}}@keyframes ngo-vtg-in{from{transform:translateX(100%);box-shadow:-20px 0 44px rgba(0,0,0,.22)}to{transform:translateX(0);box-shadow:-20px 0 44px rgba(0,0,0,0)}}:root[data-vt=glide]::view-transition-old(root){animation:ngo-vtg-out 520ms cubic-bezier(.16,1,.3,1) both}:root[data-vt=glide]::view-transition-new(root){animation:ngo-vtg-in 520ms cubic-bezier(.16,1,.3,1) both}@keyframes ngo-vtp-out{to{transform:translateX(-25%);filter:brightness(.72)}}@keyframes ngo-vtp-in{from{transform:translateX(100%);box-shadow:-24px 0 48px rgba(0,0,0,.35)}to{transform:translateX(0);box-shadow:-24px 0 48px rgba(0,0,0,0)}}:root[data-vt=parallax]::view-transition-old(root){animation:ngo-vtp-out 400ms cubic-bezier(.35,.85,.25,1) both}:root[data-vt=parallax]::view-transition-new(root){animation:ngo-vtp-in 400ms cubic-bezier(.35,.85,.25,1) both}}