/* Dark Mode für EPOCHE NAPOLEON — siehe docs/superpowers/specs/
   2026-07-13-reading-dark-mode-design.md für Herleitung und
   WCAG-2.2-AAA-Kontrastwerte (alle Werte dort per Relativluminanz-
   Berechnung verifiziert). Aktiviert via [data-theme="dark"] auf <html>,
   gesetzt durch das Flash-Prevention-Script (page.headerData.20) bzw.
   theme-toggle.js. Kein Eingriff in ns_theme_extend — reine Ergänzung. */

/* :root[data-theme="dark"] statt nur [data-theme="dark"] (2026-07-15,
   Regression aus dem Screenshot-Review gefunden): page.headerData.170 rendert
   den Light-Mode-Grundfarben-Block als :root { --primary-color: #7A1F2E; ... }
   in einem Inline-<style>, das im <head> NACH dem gemergten CSS-Bundle mit
   dark-mode.css steht. :root und [data-theme="dark"] haben identische
   Spezifität (0,1,0) — bei Gleichstand gewinnt die Regel, die später im
   Dokument steht, hier also immer der Light-Mode-Block. Ergebnis: --primary-
   color/--secondary-color/--secondary-color-light/--text-color wurden im
   Dark Mode zwar neu zugewiesen, aber sofort wieder auf die Light-Mode-Werte
   zurücküberschrieben — betraf jede Komponente, die diese Variablen nur
   *erbt* (Trikolore-Divider im Header, .person-men/.person-women-Icons,
   Blockquote-Icons, Buchnavigation-Hover, A-Z-Navigation), nicht nur die
   wenigen Stellen unten, die direkt eine Eigenschaft auf einem spezifischeren
   Selektor setzen (body, .book-navigation-list a). :root[data-theme="dark"]
   hat Spezifität (0,2,0) und gewinnt dadurch unabhängig von der Ladereihen-
   folge. */
:root[data-theme="dark"] {
    /* Rohwerte der Dark-Mode-Palette */
    --bg-color-dark: #1A1A2E;
    --surface-color-dark: #232342;
    --text-color-dark: #E8E0D0;
    --primary-color-dark: #E79BA8;
    --primary-button-bg-dark: #5C1622;
    --secondary-color-dark: #9FC3EA;
    --accent-brass-dark: #D4A843;
    --border-color-dark: #6B6B96;

    /* Bestehende, sitesweit genutzte Variablen überschreiben, damit alle
       bereits vorbereiteten var(--primary-color, ...)-Stellen automatisch
       mitwechseln (Buchnavigation, Personen-Icons, Blockquote-Icons,
       Normdaten-SeeAlso-Buttons-Rahmen/-Text) */
    --primary-color: var(--primary-color-dark);
    --secondary-color: var(--secondary-color-dark);
    --secondary-color-light: var(--secondary-color-dark);
    --text-color: var(--text-color-dark);

    /* Neue Variablen ohne Light-Mode-Vorbelegung */
    --bg-color: var(--bg-color-dark);
    --surface-color: var(--surface-color-dark);
    --border-color: var(--border-color-dark);

    /* ns_theme_extend/custom.css definiert --custom-gray-bg (#f5f6f9, helle
       Kartenoptik) sitesweit an :root, ohne Dark-Mode-Gegenstück — betraf
       u.a. Teasermenu-Karten, Events2-Terminliste, Glossar2-Scroll-Items:
       heller Kartenhintergrund blieb bestehen, während der Fließtext
       (--text-color, siehe oben) bereits auf die helle Pergament-Dark-Mode-
       Farbe wechselte — helle Schrift auf hellem Hintergrund. Hier auf
       --surface-color-dark umgestellt (gleiche Fläche wie der Seitenkopf,
       11,51:1 mit --text-color-dark). --custom-border-color analog auf
       --border-color-dark (3,00:1, Non-Text-Minimum erfüllt), damit der
       Rahmen nicht als grelle helle Linie auf dunklem Grund übrig bleibt. */
    --custom-gray-bg: var(--surface-color-dark);
    --custom-border-color: var(--border-color-dark);

    /* Verlinkungen im Fließtext (allgemeine a-Regel aus Bootstraps Reboot:
       a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1)); }
       betrifft jeden unklassifizierten Link im Content, z. B. Personennamen-
       Verweise wie "Hellmut G. Haasis"): --bs-link-color-rgb/--bs-link-hover-
       color-rgb sind dieselbe Art fest einkompilierter Bootstrap-Variable wie
       --bs-btn-bg/--bs-link-color weiter unten bzw. bei der Hauptnavigation —
       unabhängig von --primary-color, WCAG-Kontrast auf dunklem Grund nur
       1,68:1. RGB-Tripel statt Hex, weil die Bootstrap-Regel rgba(var(...))
       konsumiert. Normalfarbe = --primary-color-dark (7,84:1). Hover-Farbe um
       20% Richtung Weiß aufgehellt (Muster wie --bs-btn-hover-bg unten), da
       ein Hover-Zustand auf dunklem Grund heller statt dunkler wirken soll —
       9,26:1 gegen --bg-color-dark, 8,20:1 gegen --surface-color-dark. */
    --bs-link-color-rgb: 231, 155, 168;
    --bs-link-hover-color-rgb: 236, 175, 185;

    /* Obiger --bs-link-color-rgb-Fix griff NICHT für Links ohne class-Attribut
       innerhalb eines .frame-Wrappers (jedes tt_content-Element) — z. B.
       News-Teaser-Überschriften (georgringer/news Partials/List/Item.html:
       <h3><a itemprop="url">…</a></h3>, kein class) oder unklassifizierte
       Personennamen-Verweise wie "Hellmut G. Haasis" im Fließtext. Ursache:
       bootstrap_package definiert zusätzlich ".frame a[class=''], .frame
       a:not([class]) { color: var(--frame-link-color); }" (Spezifität 0,2,1)
       — schlägt die allgemeine "a { color: rgba(var(--bs-link-color-rgb)…) }"-
       Regel (0,0,1) unabhängig vom Variablenwert. --frame-link-color hat zwar
       eine eigene Dark-Variante im Bootstrap-5-Theme, aber nur unter
       [data-bs-theme="dark"] (Bootstraps eigenes Farbschema-Attribut) — unser
       Toggle setzt ausschließlich [data-theme="dark"] (siehe Kommentar oben),
       daher nie aktiv. Per Playwright gegen /nachrichtenarchiv verifiziert
       (computed color vorher rgb(122,31,46), nachher rgb(231,155,168)).
       Gleiche Werte wie --bs-link-color-rgb oben, nur als Hex statt RGB-Tripel,
       weil --frame-link-color direkt als color-Wert konsumiert wird. */
    --frame-link-color: var(--primary-color-dark);
    --frame-link-hover-color: #ECAFB9;

    /* Events2-Terminliste (vendor/jweiland/events2/Resources/Private/Partials/
       Event/List.html: <ul class="list-group"><li class="list-group-item">
       — Termin-Zeile, Beschreibung/Teaser als reiner <p> ohne eigene Klasse)
       zeigte Text in rgb(33,33,33) auf dunklem Grund. Ursache liegt eine
       Ebene tiefer als bei --frame-link-color oben: bootstrap5-theme.css
       definiert ".list-group { --bs-list-group-color: var(--bs-body-color);
       … }" — eine LOKALE Neuableitung direkt auf dem Komponenten-Wrapper,
       die --bs-body-color an genau dieser Stelle im Baum erneut auswertet.
       Ein Fix, der nur --bs-list-group-color an :root setzt, wird von dieser
       lokalen Neuableitung überschrieben, weil --bs-body-color selbst nie
       unter [data-theme="dark"] neu belegt wurde (nur unter Bootstraps
       eigenem, hier ungenutztem [data-bs-theme="dark"]) — per Playwright an
       den berechneten --bs-list-group-color-Werten entlang der Elternkette
       nachvollzogen (:root/body/…/.list scroll-container: bereits korrekt
       #E8E0D0, aber .list-group selbst wieder #212121).
       Da --bs-list-group-color nur eine von mindestens 21 Stellen in
       bootstrap5-theme.css ist, die var(--bs-body-color) konsumieren (u. a.
       vermutlich weitere, hier noch nicht aufgefallene Komponenten wie
       Cards/Dropdowns) — hier bewusst die Basisvariable selbst gefixt statt
       erneut nur die abgeleitete, um dieselbe Fehlerklasse nicht bei jeder
       weiteren Komponente einzeln nachziehen zu müssen. RGB-Variante
       ergänzt, da mind. 3 Stellen rgba(var(--bs-body-color-rgb),…)
       konsumieren (Reboot-Analogie zu --bs-link-color-rgb oben). Per
       Playwright gegen /veranstaltung verifiziert (computed color der
       .list-group-item vorher rgb(33,33,33), nachher rgb(232,224,208)). */
    --bs-body-color: var(--text-color-dark);
    --bs-body-color-rgb: 232, 224, 208;

    /* --bs-body-bg (2026-08-01, gefunden am gedankenfolger_faq-Layout 100
       "Bootstrap accordion", derselbe Mechanismus wie oben bei --bs-body-
       color/.list-group beschrieben): bootstrap5-theme.css definiert
       ".accordion { --bs-accordion-bg: var(--bs-body-bg); … }" — eine
       LOKALE Neuableitung direkt auf dem Komponenten-Wrapper. Ein erster
       Versuch, nur --bs-accordion-bg an :root zu setzen, wurde von dieser
       lokalen Neuableitung überschrieben (dieselbe Fehlerklasse wie beim
       --bs-list-group-color-Fund oben) — per Playwright verifiziert:
       computed .accordion-item background blieb rgb(255,255,255), obwohl
       computed body_color (via --bs-accordion-color: var(--bs-body-color))
       bereits korrekt rgb(232,224,208) war, da NUR --bs-body-color, nicht
       --bs-body-bg, bis dahin im Dark Mode überschrieben war: heller Text
       auf weißem Grund, praktisch unlesbar.
       --bs-body-bg wird laut Grep-Auszählung an mind. 22 Stellen in
       bootstrap5-theme.css lokal neu abgeleitet (.table, .form-check-input,
       .dropdown-menu, .card, .accordion, .pagination, .list-group, .modal,
       .tooltip, .popover, .offcanvas, u. a.) — .list-group-bg war darunter,
       d. h. dieselbe Lücke bestand vermutlich bereits vorher unbemerkt bei
       jedem list-group-Hintergrund (nur dessen Textfarbe wurde beim
       ursprünglichen --bs-body-color-Fund mitgeprüft, nicht der
       Hintergrund). Analog zur dortigen Entscheidung hier bewusst die
       Basisvariable selbst gefixt statt nur die von der FAQ-Extension
       konkret genutzte --bs-accordion-bg, um dieselbe Fehlerklasse nicht
       bei jeder der 22 Stellen einzeln nachziehen zu müssen.
       body selbst bleibt unberührt von dieser Änderung — dessen Hintergrund
       läuft über eine eigene, explizite [data-theme="dark"] body-Regel
       weiter unten in dieser Datei (--bg-color-dark), nicht über --bs-body-
       bg. --surface-color-dark identisch zur bereits an anderer Stelle
       etablierten Kartenfläche (11,51:1 mit --text-color-dark, siehe
       Kommentar zu --custom-gray-bg weiter oben) — passend für Kasten-/
       Card-artige Komponenten wie Accordion, die sich vom Seitenhintergrund
       abheben sollen. Per Playwright gegen /bio/a/aachen verifiziert
       (computed .accordion-item background vorher rgb(255,255,255),
       nachher rgb(35,35,66) = #232342). */
    --bs-body-bg: var(--surface-color-dark);
}

/* Teasermenu-Bilder (Desktop-Breite, custom.css Zeile ~1297-1304): nutzen
   mix-blend-mode: multiply, damit der weiße Bildhintergrund gescannter
   Porträts optisch mit der Karte verschmilzt — ein Trick, der nur auf einem
   nahezu weißen Hintergrund unauffällig bleibt. Seit --custom-gray-bg oben
   auf --surface-color-dark (dunkles Blau) zeigt, multipliziert derselbe
   Blend-Modus jedes Bild mit diesem dunklen Blauton: helle Bildbereiche
   erscheinen bläulich verfärbt, Farbfotos bekommen einen Blauschleier.
   Blend-Modus im Dark Mode daher deaktiviert — Bilder zeigen ihren
   tatsächlichen (ggf. weißen) Bildhintergrund auf der dunklen Karte, statt
   verfälscht zu werden. */
[data-theme="dark"] .teasermenu .teaser-image img {
    mix-blend-mode: normal;
}

/* Breadcrumb (.breadcrumb-section, jetzt sitesweit ab Ebene 1 sichtbar, siehe
   settings.yaml page.theme.breadcrumb.enableLevel): .breadcrumb-section hat
   in bootstrap5-theme.css einen fest kompilierten hellgrauen Hintergrund
   (#f8f8f8), unabhängig von --custom-gray-bg. Die einzelnen Link-Einträge
   (.breadcrumb-link) sind bereits über die allgemeine a-Regel (siehe oben)
   korrekt eingefärbt — nur der aktive (aktuelle Seite, nicht verlinkte)
   Eintrag und das "/"-Trennzeichen bleiben über Bootstraps
   --bs-secondary-color (neutrales Grau, für den hellen Hintergrund gedacht)
   fast unsichtbar auf dunklem Grund. */
[data-theme="dark"] .breadcrumb-section {
    background-color: var(--surface-color-dark);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-color-dark);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--border-color-dark);
}

/* Seitenhintergrund und Fließtext */
[data-theme="dark"] body {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
}

/* Buchnavigation-Buttons: Hintergrund wird durch die var(--secondary-color)/
   var(--primary-color)-Überschreibung oben bereits hell (Dark-Mode-Akzent-
   farben) — Text muss daher dunkel sein, nicht var(--white-color) wie im
   Light Mode (weiß auf hellem Blau/Rosa würde WCAG AAA klar verfehlen,
   siehe Spec-Berechnung: nur 1,83:1). Dunkler Text auf beiden Akzentfarben
   liegt bei 7,84:1 (Bordeaux) bzw. 9,32:1 (Blau) — beide AAA-konform. */
[data-theme="dark"] .book-navigation-list a {
    color: var(--bg-color-dark);
}

[data-theme="dark"] .book-navigation-list a:hover,
[data-theme="dark"] .book-navigation-list a:focus {
    color: var(--bg-color-dark);
}

/* Normdaten-SeeAlso-Buttons: Rahmen/Text-Farbe wechseln bereits automatisch
   über var(--primary-color) mit. Der Hover-/Focus-Zustand nutzt aber
   var(--white-color) als Textfarbe auf dem jetzt hellen Akzent-Hintergrund
   (SeeAlso.css Zeile 34-35) — dieselbe Kontrastfalle wie bei der
   Buchnavigation (nur 2,18:1 statt AAA), daher hier auf dunklen Text
   umgestellt. */
[data-theme="dark"] .ennormdata-seealso__button:hover,
[data-theme="dark"] .ennormdata-seealso__button:focus-visible {
    color: var(--bg-color-dark);
}

/* Toggle-Buttons selbst */
[data-theme="dark"] .theme-toggle-btn {
    color: var(--text-color-dark);
}

/* Seitenkopf (#page-header.navbar-default): Bootstraps kompilierte Regel
   ".bg-white, .navbar-default { background-color: rgba(var(--bs-white-rgb),
   ...) !important; }" ist fest verdrahtet und wurde bislang von keiner Dark-
   Mode-Regel angefasst — der Header blieb dadurch immer weiß. !important
   erzwingt hier ebenfalls !important; die zusätzliche ID (#page-header) sorgt
   für den Ausschlag bei gleicher !important-Priorität. Text-/Logo-Farben
   (navbar-brand*) werden separat gesetzt, weil sie über Bootstraps
   --bs-navbar-brand-color (für Weiß optimiert) kommen und beim dunkleren
   Hintergrund sonst zu dunkel blieben (11,51:1 gegen --surface-color-dark). */
[data-theme="dark"] #page-header.navbar-default {
    background-color: var(--surface-color-dark) !important;
}

[data-theme="dark"] #page-header.navbar-default .navbar-brand,
[data-theme="dark"] #page-header.navbar-default .navbar-brand-headline,
[data-theme="dark"] #page-header.navbar-default .navbar-brand-subheadline {
    color: var(--text-color-dark);
}

/* Hauptnavigation (<nav aria-label="Hauptnavigation" id="mainnavigation">,
   mobiles Hamburger-Menü unter 992px): .nav-link bezieht seine Farbe über
   --bs-nav-link-color: var(--bs-navbar-color) von Bootstrap, kompiliert für
   den weißen Light-Mode-Header (rgba(0,0,0,.65), also schwarze Schrift) —
   beim Umfärben des Headers oben unverändert gelassen, dadurch schwarze
   Schrift auf dem jetzt dunklen Header. Hier auf die Dark-Mode-Palette
   umgestellt: --text-color-dark normal (11,51:1), --primary-color-dark für
   Hover/Aktiv als Akzent (6,94:1), beide gegen --surface-color-dark AAA. */
[data-theme="dark"] #page-header.navbar-default {
    --bs-navbar-color: var(--text-color-dark);
    --bs-navbar-hover-color: var(--primary-color-dark);
    --bs-navbar-active-color: var(--primary-color-dark);
    --bs-navbar-disabled-color: var(--border-color-dark);
}

/* Hauptnavigation auf Desktop-Breiten (≥992px): lebt laut setup.typoscript
   ("Auf breiten Bildschirmen lebt das Hauptmenü jetzt in der linken
   subnav-wrap-Spalte") NICHT im #page-header, sondern als eigene Spalte
   .subnav-wrap im Hauptinhalt — der Fix oben (#page-header-Scope) erreicht
   sie daher nicht. .subnav-wrap .subnav-link nutzt color: var(--bs-nav-link-
   color), das außerhalb von .navbar auf Bootstraps kompilierte --bs-link-
   color (#7A1F2E, dieselbe fest einkompilierte SCSS-Variable wie beim
   Such-Button, siehe unten) zurückfällt — unabhängig von --primary-color,
   daher vom Cascade-Fix ganz oben nicht erfasst. Bordeaux auf dunklem
   Seitenhintergrund: nur 1,68:1, wirkt praktisch schwarz auf schwarz. */
[data-theme="dark"] .subnav-wrap .subnav-link {
    color: var(--text-color-dark);
}

[data-theme="dark"] .subnav-wrap .subnav-link:hover,
[data-theme="dark"] .subnav-wrap .subnav-link:focus {
    color: var(--primary-color-dark);
}

[data-theme="dark"] .subnav-wrap .active > .subnav-link {
    color: var(--primary-color-dark) !important;
}

/* Such-Button (.btn-primary, u.a. das Lupen-Icon im Suchformular, SVG mit
   fill="currentColor"): Hintergrund kommt aus der beim Build fest
   einkompilierten SCSS-Variable scss.primary (#7A1F2E, siehe settings.yaml)
   über --bs-btn-bg — unabhängig von --primary-color, daher von Fix A oben
   nicht erfasst. Erster Fix (2026-07-15) hatte dafür --primary-button-bg-dark
   (#5C1622, dunkles Bordeaux mit weißem Text/Icon) aus dem Design-Dokument
   verdrahtet — funktional AAA-konform (13,18:1), wirkte aber im Rendering
   weiterhin wie derselbe dunkle Bordeaux-Ton, nicht wie ein an den Dark
   Mode angepasstes Element (Nutzer-Feedback). Jetzt stattdessen auf das
   bereits etablierte "helle Akzentfarbe + dunkler Text"-Muster umgestellt,
   das Buchnavigation und SeeAlso-Buttons im Dark Mode schon nutzen:
   --primary-color-dark (#E79BA8) als Hintergrund, --bg-color-dark (#1A1A2E)
   als Text-/Icon-Farbe — 7,84:1 (AAA). Hover/Aktiv abgedunkelt auf #C4848F
   (var(--primary-color-dark) 85% Richtung Schwarz gemischt, hier als fester
   Wert dokumentiert statt color-mix(), da sich der Farbtripel sonst nicht
   sauber für --bs-btn-hover-bg herleiten lässt) — 5,72:1 mit demselben
   dunklen Text, AA-konform (Hover-Zustände sind laut WCAG nicht AAA-
   pflichtig, siehe auch Light-Mode-Hover #621925, ebenfalls nicht AAA-
   auditiert). */
[data-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--primary-color-dark);
    --bs-btn-border-color: var(--primary-color-dark);
    --bs-btn-color: var(--bg-color-dark);
    --bs-btn-hover-bg: #C4848F;
    --bs-btn-hover-border-color: #C4848F;
    --bs-btn-hover-color: var(--bg-color-dark);
    --bs-btn-active-bg: #C4848F;
    --bs-btn-active-border-color: #C4848F;
    --bs-btn-active-color: var(--bg-color-dark);
    --bs-btn-disabled-bg: var(--primary-color-dark);
    --bs-btn-disabled-border-color: var(--primary-color-dark);
    --bs-btn-disabled-color: var(--bg-color-dark);
}

/* gedankenfolger/gedankenfolger-faq (2026-08-01): Der ausgeklappte
   Antworttext (.gedankenfolger_faq__answer-inner) sowie die Trennlinie
   zwischen FAQ-Items (.gedankenfolger_faq__accordionitem, border-bottom)
   sind im vorkompilierten faq.css fest auf #111827 (fast schwarz) bzw.
   #e5e7eb (helles Grau) kodiert — anders als die Frage-Buttons (siehe
   setup.typoscript, .gedankenfolger_faq { --gf-faq-*: ... }) NICHT über
   eine der site-eigenen CSS-Variablen gesteuert, wechselt also im Dark
   Mode nicht automatisch mit. Da der answer-Bereich keinen eigenen
   Hintergrund setzt, erbt er im Dark Mode den dunklen Body-Hintergrund
   (--bg-color-dark, #1A1A2E) — fast schwarzer Text darauf war praktisch
   unlesbar. Fix: --text-color-dark (bereits an anderer Stelle in dieser
   Datei als 11,51:1 gegen --bg-color-dark verifiziert, AAA) bzw.
   --border-color-dark (3,00:1, Non-Text-Minimum erfüllt, siehe Kommentar
   zu --custom-gray-bg weiter oben). Voller Original-Selektorpfad
   übernommen (Spezifität 0-6-0 in faq.css) statt eines kürzeren, sonst
   verliert die Regel gegen das früher geladene, spezifischere faq.css. */
[data-theme="dark"] .gedankenfolger_faq.layout-0 .gedankenfolger_faq__list .gedankenfolger_faq__accordionitem .gedankenfolger_faq__answer .gedankenfolger_faq__answer-inner {
    color: var(--text-color-dark);
}

[data-theme="dark"] .gedankenfolger_faq__accordionitem {
    border-bottom-color: var(--border-color-dark);
}

/* OS-Kontrastmodi (Barrierefreiheitsschicht, sitzt über Dark Mode) */
@media (forced-colors: active) {
    /* Windows Hochkontrast überschreibt ohnehin alle Farben — nur
       sicherstellen, dass interaktive Elemente über eine sichtbare
       Rahmenlinie (System-Farbe ButtonText) erkennbar bleiben, da
       box-shadow/background-image vom Browser entfernt werden. */
    .book-navigation-list a,
    .theme-toggle-btn,
    .ennormdata-seealso__button {
        border: 1px solid ButtonText;
    }
}

@media (prefers-contrast: more) {
    /* Fließtext liegt in Light (17,55:1) und Dark Mode (13,00:1) bereits
       deutlich über AAA — keine weitere Anhebung nötig. Der Rahmen-Farbwert
       (3,39:1, nur knapp über dem Non-Text-Minimum) wird hier verstärkt
       auf 7,45:1. */
    [data-theme="dark"] {
        --border-color-dark: #A8A8D0;
    }
}
