/* ==========================================================================
   Farbwelt 11-2025 — Token-Layer und Utility-Overlay
   Wird nur geladen, wenn wv_farbwelt_active() (functions.php) zutrifft.
   Konzept: KONZEPT-IMPLEMENTIERUNG.md im Projekt-Repo.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Rohwerte laut farbwelt_2511_v6.pdf */
  --wv-rose-cream: #ebdedc;
  --wv-japan-weiss: #ece6d9;
  --wv-farnhell: #e3e6d0;
  --wv-kontrast-blau: #254d50;
  --wv-kontrast-gruen: #4f4d01;
  --wv-kontrast-gruen2: #4b4a02;
  --wv-akzent-blau: #325f61;
  --wv-akzent-oliv: #595835;
  --wv-akzent-wein: #7c4551;
  --wv-gelb: #f8c700;
}

/* --------------------------------------------------------------------------
   Schema-Definitionen: jede Fläche bringt ihr WCAG-geprüftes Farbpaar mit.
   -s- = Fläche, -t- = Text/Überschrift, jeweils hell und dunkel.
   -------------------------------------------------------------------------- */
/* Dunkles Schema: vier eigene Flächen statt einer einheitlichen
   (korrigiert 29.07.2026 — Seite 2 von farbwelt_2511_v6.pdf zeigt drei
   parallele Dunkel-Mockups, deren Hintergründe pixelgenau vermessen
   #325f61/#595835/#7c4551 ergeben, also genau die drei Akzenttöne).
   Standard-Mapping laut Vorgabe (29.07.2026, zweite Korrektur — ersetzt
   die zuvor selbst hergeleitete Hue-Zuordnung):
     Japanisch Weiß (Sand)  → Akzent-Blau  #325f61
     Farnhellgrün (Farn)    → Akzent-Oliv  #595835
     Rose Cream (Rose)      → Akzent-Wein  #7c4551
     Löwenzahngelb, Positiv-Fall (Start/Illus) → Akzent-Blau #325f61
       (teilt sich die Fläche bewusst mit Sand — "Standard"-Zuordnung)
   Löwenzahngelb ist damit als vollwertiges viertes Schema "mitgezogen":
   eigener Slug `gelb` in wv_schema_valid(), wählbar in Meta-Box/Termmeta-
   Dropdown und im Debug-Panel, nicht mehr nur an die Start-/Illus-Templates
   gebunden (siehe functions.php). Für .start/.illus bleibt zusätzlich die
   Sonderbehandlung (Hintergrundgrafik etc.) bestehen; die Farb-Tokens sind
   mit schema-gelb identisch, damit Redaktion Gelb künftig auch auf anderen
   Seiten zuweisen kann.
   --wv-cta-dark bleibt einheitlich Gelb (siehe „Bug: Nachtmodus-CTA"
   20.07.2026): Wein/Oliv/Blau als CTA direkt auf der jeweils dunklen
   Fläche liegen bei ~1,1:1 Kontrast — deutlich unter den WCAG-geforderten
   3:1. Gelb erreicht gegen alle drei Akzentflächen rechnerisch 4,2–4,7:1
   und ist der einzige Farbwelt-Ton, der auf jeder zuverlässig trägt. */
body.farbwelt.schema-sand {
  --wv-s-light: var(--wv-japan-weiss);
  --wv-t-light: var(--wv-kontrast-gruen);
  --wv-s-dark: var(--wv-akzent-blau);
  --wv-cta-light: var(--wv-akzent-wein);
  --wv-cta-dark: var(--wv-gelb);
}

body.farbwelt.schema-farn {
  --wv-s-light: var(--wv-farnhell);
  --wv-t-light: var(--wv-kontrast-gruen2);
  --wv-s-dark: var(--wv-akzent-oliv);
  --wv-cta-light: var(--wv-akzent-blau);
  --wv-cta-dark: var(--wv-gelb);
}

body.farbwelt.schema-rose {
  --wv-s-light: var(--wv-rose-cream);
  --wv-t-light: var(--wv-kontrast-blau);
  --wv-s-dark: var(--wv-akzent-wein);
  --wv-cta-light: var(--wv-akzent-wein);
  --wv-cta-dark: var(--wv-gelb);
}

/* Löwenzahngelb als viertes Schema (Slug `gelb`) — Text dunkel, Dunkelmodus
   Akzent-Blau wie Sand ("Positiv-Fall"-Standard). Gilt sowohl für die per
   Meta zugewiesene Variante als auch für die Start-/Illus-Templates. */
body.farbwelt.schema-gelb,
body.farbwelt.start,
body.farbwelt.illus {
  --wv-s-light: var(--wv-gelb);
  --wv-t-light: #1e1e1c;
  --wv-text: #1e1e1c;
  --wv-s-dark: var(--wv-akzent-blau);
  --wv-cta-light: var(--wv-kontrast-blau);
  --wv-cta-dark: var(--wv-gelb);
}

/* Dunkel-Override (29.07.2026): weicht bewusst vom Standard-Mapping oben
   ab — Redaktionsfeld "Dunkel-Override" (Postmeta/Termmeta wv_schema_dark)
   bzw. Debug-Panel. !important, damit die feste Zuordnung der Schema-
   Blöcke oben zuverlässig überstimmt wird, unabhängig von Selektor-
   Reihenfolge. Nie Gelb als Dunkelfläche zur Wahl — Gelb ist der CTA-Ton,
   der gerade GEGEN diese drei Flächen Kontrast hält (Bug-#4-Fix); als
   eigene Fläche würde der CTA darauf verschwinden. */
body.farbwelt.wv-dark-blau { --wv-s-dark: var(--wv-akzent-blau) !important; }
body.farbwelt.wv-dark-oliv { --wv-s-dark: var(--wv-akzent-oliv) !important; }
body.farbwelt.wv-dark-wein { --wv-s-dark: var(--wv-akzent-wein) !important; }

/* „Negativ"-Seiten als Gestaltungsprinzip (z. B. Anmeldung): bewusst
   invertiert statt einfach wie jede andere Seite (Entscheidung 21.07.2026,
   löst den Vortagesbefund "Toggle wirkt hier nicht" eleganter als schlichtes
   Entfernen). Tagmodus zeigt hier die DUNKLE Fläche (Akzent-Blau/Weiß/Gelb-
   CTA), Nachtmodus die HELLE des zugewiesenen Pastell-Schemas — die Seite
   bleibt dadurch immer der optische Kontrapunkt zum Rest der Seite, der
   Toggle bekommt hier eine wirksame, nur eben umgekehrte Bedeutung.

   Bewusst NICHT die alte .negativ-Klasse wiederverwendet: style.scss hat
   darauf eigene !important-Regeln (h1-h6 immer weiß, aktiver Menüpunkt
   immer weißer Chip) aus der Alt-Gestaltung, die mit gleicher Spezifität
   gegen unsere Tokens liefen und genau die Weiß-auf-Sand-Regression vom
   20.07. verursacht haben. Neue Klasse `.wv-negativ` umgeht das vollständig
   (siehe category-anmeldung.php). */
body.farbwelt.wv-negativ {
  --wv-surface: var(--wv-s-dark);
  --wv-text: #fff;
  --wv-heading: #fff;
  --wv-cta-bg: var(--wv-cta-dark);
  --wv-cta-text: #1e1e1c;
  --wv-focus: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.farbwelt.wv-negativ {
    --wv-surface: var(--wv-s-light);
    --wv-text: #212529;
    --wv-heading: var(--wv-t-light);
    --wv-cta-bg: var(--wv-cta-light);
    --wv-cta-text: #fff;
    --wv-focus: var(--wv-t-light);
  }
}
:root[data-theme="dark"] body.farbwelt.wv-negativ {
  --wv-surface: var(--wv-s-light);
  --wv-text: #212529;
  --wv-heading: var(--wv-t-light);
  --wv-cta-bg: var(--wv-cta-light);
  --wv-cta-text: #fff;
  --wv-focus: var(--wv-t-light);
}

/* --------------------------------------------------------------------------
   Anwendung der Tokens: hell ist Default, dunkel via Systemeinstellung
   (prefers-color-scheme) oder manuell via html[data-theme].
   -------------------------------------------------------------------------- */
body.farbwelt {
  /* Fallback, falls kein schema-X- bzw. start/illus-Block --wv-s-dark
     eigens setzt (z. B. Kategorie-Archive ohne Schema-Zuweisung). Die drei
     Pastell-Schemata und start/illus setzen ihre eigene Dunkelfläche oben. */
  --wv-s-dark: var(--wv-akzent-blau);
  --wv-surface: var(--wv-s-light);
  /* Fließtext bleibt neutral (POC-Layouts) — nur Überschriften/Akzente
     tragen die Schema-Kontrastfarbe. */
  --wv-text: #212529;
  --wv-on-surface: var(--wv-t-light);
  --wv-heading: var(--wv-t-light);
  --wv-cta-bg: var(--wv-cta-light);
  --wv-cta-text: #fff;
  --wv-focus: var(--wv-t-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.farbwelt {
    --wv-surface: var(--wv-s-dark);
    --wv-text: #fff;
    --wv-on-surface: #fff;
    --wv-heading: #fff;
    --wv-cta-bg: var(--wv-cta-dark);
    --wv-cta-text: #fff;
    --wv-focus: #fff;
  }
}

:root[data-theme="dark"] body.farbwelt {
  --wv-surface: var(--wv-s-dark);
  --wv-text: #fff;
  --wv-on-surface: #fff;
  --wv-heading: #fff;
  --wv-cta-bg: var(--wv-cta-dark);
  --wv-cta-text: #fff;
  --wv-focus: #fff;
}

/* Gelber CTA im Dunkelmodus braucht überall dunklen statt weißen Text
   (Negativ setzt das schon selbst; jetzt für alle vier Schemata + Illus,
   da --wv-cta-dark oben auf Gelb umgestellt wurde — Illus fehlte hier
   zuvor versehentlich, obwohl es dieselben Tokens wie Start/schema-gelb
   nutzt). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.farbwelt.start,
  :root:not([data-theme="light"]) body.farbwelt.illus,
  :root:not([data-theme="light"]) body.farbwelt.schema-gelb,
  :root:not([data-theme="light"]) body.farbwelt.schema-rose,
  :root:not([data-theme="light"]) body.farbwelt.schema-sand,
  :root:not([data-theme="light"]) body.farbwelt.schema-farn {
    --wv-cta-text: #1e1e1c;
  }
}
:root[data-theme="dark"] body.farbwelt.start,
:root[data-theme="dark"] body.farbwelt.illus,
:root[data-theme="dark"] body.farbwelt.schema-gelb,
:root[data-theme="dark"] body.farbwelt.schema-rose,
:root[data-theme="dark"] body.farbwelt.schema-sand,
:root[data-theme="dark"] body.farbwelt.schema-farn {
  --wv-cta-text: #1e1e1c;
}

/* --------------------------------------------------------------------------
   Logos: durchgängig monochrom (Entscheidung 17.07.2026, POC „Jp White"
   zeigt keine farbige Variante). Wortmarke (--wm-*) und Träger-Logo (--tb-*)
   bekommen bewusst keine Werte zugewiesen und fallen auf currentColor
   zurück = Text-/Überschriftfarbe des jeweiligen Schemas.
   -------------------------------------------------------------------------- */

body.farbwelt .wv-brand {
  height: 2.5em;
  width: auto;
  color: var(--wv-text);
}

/* Logos aus dem Seiteninhalt (via the_content-Filter geinlinet):
   volle Breite wie das ersetzte <img>, Farben folgen den Tokens. */
body.farbwelt .wv-brand-content {
  width: 100%;
  height: auto;
  color: var(--wv-text);
}

/* Logos, die als <img> im Seiteninhalt stecken (z. B. große Wortmarke auf der
   Startseite): CSS-Variablen erreichen sie nicht, im dunklen Schema werden sie
   per Filter weiß. Ersetzt dort auch den alten contrast(850%)-Inline-Filter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.farbwelt img[src*="Brand.svg"] {
    filter: brightness(0) invert(1) !important;
  }
}

:root[data-theme="dark"] body.farbwelt img[src*="Brand.svg"] {
  filter: brightness(0) invert(1) !important;
}

/* --------------------------------------------------------------------------
   Flächen und Grundfarben
   -------------------------------------------------------------------------- */
body.farbwelt {
  background-color: var(--wv-surface);
  color: var(--wv-text);
}

body.farbwelt .row > * {
  background-color: inherit;
}

body.farbwelt h1, body.farbwelt h2, body.farbwelt h3,
body.farbwelt h4, body.farbwelt h5, body.farbwelt h6 {
  color: var(--wv-heading);
}

body.farbwelt a {
  color: inherit;
}

/* Gedrehter Seitentitel (div.head) trägt die Flächenfarbe als Hintergrund */
body.farbwelt div.head h1:first-child,
body.farbwelt div.head h3:first-child {
  background-color: var(--wv-surface);
  color: var(--wv-heading);
}

/* Header/Footer: weiße Verläufe des Alt-Themes durch Flächenfarbe ersetzen */
body.farbwelt header.navbar,
body.farbwelt footer.navbar {
  background: var(--wv-surface);
  color: var(--wv-on-surface);
}

body.farbwelt .navbar-light .navbar-nav .nav-link,
body.farbwelt .navbar-light .navbar-nav .show > .nav-link {
  color: var(--wv-text);
}

/* Aktiver Menüpunkt (POC-Layouts): gefüllter Chip in beiden Modi.
   Hell: Chip in der Schema-Kontrastfarbe mit Schrift in Flächenfarbe;
   dunkel: weißer Chip mit Schrift in Flächenfarbe — beides über Tokens.
   !important schlägt die Alt-Regeln aus style.scss (negativ: weiß). */
body.farbwelt .navbar-light .navbar-nav .current-menu-item > .nav-link,
body.farbwelt .navbar-light .navbar-nav .nav-link.active {
  background-color: var(--wv-heading);
  color: var(--wv-surface) !important;
}

/* --------------------------------------------------------------------------
   Utility-Overlay: von den Templates genutzte Bootstrap-Klassen auf Tokens
   mappen (Bootstrap-Utilities sind !important, Overlay entsprechend auch).
   -------------------------------------------------------------------------- */
body.farbwelt .text-success,
body.farbwelt .text-primary,
body.farbwelt .text-secondary {
  color: var(--wv-heading) !important;
}

/* .text-black (style.scss) nutzt fest var(--bs-dark) (#212529) — im
   Dunkelmodus auf dunklem Grund unsichtbar. Neutraler Fließtext-Token
   statt Kontrastfarbe, da "schwarzer Text" semantisch Fließtext meint,
   keine Überschrift/Akzent. */
body.farbwelt .text-black,
body.farbwelt .text-dark {
  color: var(--wv-text) !important;
}

body.farbwelt .bg-primary {
  background-color: var(--wv-cta-bg) !important;
  color: var(--wv-cta-text);
}

body.farbwelt .bg-secondary {
  background-color: var(--wv-gelb) !important;
  color: #1e1e1c;
}

body.farbwelt .btn-primary,
body.farbwelt .btn-success {
  background-color: var(--wv-cta-bg);
  border-color: var(--wv-cta-bg);
  color: var(--wv-cta-text);
}

body.farbwelt .btn-secondary {
  background-color: var(--wv-gelb);
  border-color: var(--wv-gelb);
  color: #1e1e1c;
}

/* Jobs-Plugin: große Ornamentflächen (Titelbanner, Seitenkasten) auf
   Löwenzahngelb mit dunklem Text — in beiden Schemata lesbar. */
body.farbwelt .jobs-row.position_title,
body.farbwelt .job-side .job-content-wrap {
  background-color: var(--wv-gelb) !important;
}

/* Vollständig statt Tag-für-Tag aufgezählt (h1/h2/h3/span/p/div/…):
   Die vorherige Liste erfasste z. B. .jobs-row-input im Banner-Untertitel
   ("Buchhalterin (m/w/d) in Teilzeit") und svg-Icons im Seitenkasten
   (Kalender-Symbol bei "Veröffentlichungsdatum") nicht — diese folgten
   weiter dem mode-abhängigen Plugin-Style (jobs_subheading_text_color
   u. Ä. = var(--wv-text)) und wechselten dadurch zwischen Tag/Nacht
   Farbe, obwohl die Fläche selbst immer Gelb bleibt. Jetzt Wildcard
   (color) + eigene Regel für SVG-Icons (fill) statt Aufzählung. */
body.farbwelt .jobs-row.position_title,
body.farbwelt .jobs-row.position_title *,
body.farbwelt .job-side .job-content-wrap,
body.farbwelt .job-side .job-content-wrap *:not(.jp-apply-button) {
  color: #1e1e1c !important;
}

body.farbwelt .jobs-row.position_title svg *,
body.farbwelt .job-side .job-content-wrap svg * {
  fill: #1e1e1c !important;
}

/* "Jetzt bewerben" sitzt IM gelben Seitenkasten — kann deshalb nicht dem
   normalen CTA-Token folgen (der ist im Dunkelmodus jetzt selbst Gelb, siehe
   die schema-Blöcke weiter oben, Eigenschaft --wv-cta-dark: Button würde
   auf der Box verschwinden). Fest auf Hochkontrast-Blau statt Schema-/
   Modus-abhängig, funktioniert auf Gelb in jeder Kombination. */
body.farbwelt .job-side .job-content-wrap .jp-apply-button {
  background-color: var(--wv-kontrast-blau) !important;
  color: #fff !important;
}

/* Jobs-Plugin: Buttons (Ansehen/Bewerben/Absenden) auf CTA-Tokens.
   .apply-btn ist die Job-Postings-Karte auf der Archivseite (/jobs/,
   Shortcode) — eigene Klasse, nicht im Einzel-Template enthalten. */
body.farbwelt .jp-apply-button,
body.farbwelt .primary-style,
body.farbwelt .job-listing .job-preview .job-cta .apply-btn,
body.farbwelt .jobs-modal-form .job-submit,
body.farbwelt .jobs-modal-form .choose_file,
body.farbwelt .jobs-modal-form .choose_file_multi,
body.farbwelt .jobs-modal-form .choose_file_multi_add {
  background-color: var(--wv-cta-bg) !important;
  color: var(--wv-cta-text) !important;
}

/* Jobs-Plugin: Titel/Zwischenüberschriften auf der Archivseite (/jobs/)
   und im Bewerbungsformular. Die Job-Postings-Plugin-eigenen Einstellungen
   (jobs_heading_text_color etc.) sind in der Live-DB leer, daher greift
   hier kein Options-gesteuertes CSS — Overlay übernimmt die Rolle. */
body.farbwelt .job-listing .job-preview .job-content h5 a,
body.farbwelt .jobs-row-apply .jobs-modal-form h3,
body.farbwelt .jobs-modal-form .jobs-section-row .jobs-section-heading,
body.farbwelt .jobs-modal-form h4,
body.farbwelt .job-post .job-content .jobs-row .jobs-row-label span {
  color: var(--wv-heading) !important;
}

/* --------------------------------------------------------------------------
   Standorte: MapSVG-Plugin (Kartenliste "Alle anzeigen")
   -------------------------------------------------------------------------- */

/* Das Directory-Panel setzt seinen weißen Hintergrund als Inline-Style
   (JS-generiert, aus der Kartenkonfiguration) — dagegen hilft nur
   !important. Der generische a{color:inherit}-Regel (weiter oben) machte
   die Links im Dunkelmodus weiß auf diesem (weiterhin weißen) Panel
   unsichtbar; jetzt folgt die Fläche selbst dem Schema, Text bleibt konsistent. */
body.farbwelt .mapsvg-controller-container.mapsvg-directory {
  background-color: var(--wv-surface) !important;
}

/* Kartenkarte selbst: Hintergrund ebenfalls Inline-Style, ebenfalls weiß
   (width/height/padding-bottom im gleichen style-Attribut, background
   separat überschreiben). Karten-Vordergrund (Regionen, Marker, Labels)
   ist selbst eingefärbt und bleibt unverändert; nur die Kartenfläche
   folgt jetzt dem Schema statt fix Weiß zu sein. */
body.farbwelt .mapsvg {
  background-color: var(--wv-surface) !important;
}

/* Filter-Leiste ("Hier der aktuelle Stand:", Radio-Labels): Label-Text kam
   grau (#aaa) bzw. dunkelgrau (#333) aus dem Plugin, ohne Bezug zu unseren
   Tokens — auf dunkler Fläche zu kontrastarm. */
body.farbwelt .mapsvg-filter-label,
body.farbwelt .mapsvg-data-form-view .form-check-label {
  color: var(--wv-text) !important;
}

/* "Alle anzeigen"-Button: Bootstrap .btn-outline-secondary verwendet fest
   var(--bs-secondary) (Löwenzahngelb) für Rahmen/Text, unabhängig vom
   Schema. Auf CTA-Token umgestellt, Hover füllt mit CTA-Fläche. */
body.farbwelt .mapsvg-filters-reset {
  color: var(--wv-cta-bg) !important;
  border-color: var(--wv-cta-bg) !important;
}

body.farbwelt .mapsvg-filters-reset:hover,
body.farbwelt .mapsvg-filters-reset:focus {
  background-color: var(--wv-cta-bg) !important;
  color: var(--wv-cta-text) !important;
}

/* --------------------------------------------------------------------------
   Fokus-Sichtbarkeit (WCAG 2.4.7)
   -------------------------------------------------------------------------- */
body.farbwelt :focus-visible {
  outline: 3px solid var(--wv-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hell/Dunkel-Umschalter im Footer
   -------------------------------------------------------------------------- */
/* Der Umschalter ist ein Menüpunkt der Footer-Navigation (Footer + mobiles
   Menü). Er erbt Schrift, Padding und damit die Grundlinie der .nav-link-
   Nachbarn; nur das Icon bleibt bewusst klein. */
button.wv-theme-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  width: 100%;
  text-align: left;
}

/* Typografie des Umfelds spiegeln: `footer a` (style.scss) matcht den
   <button> nicht, daher hier identisch für den Footer; im mobilen Menü
   erbt der Button die normale nav-link-Schrift seiner Nachbarn. */
footer .wv-theme-toggle {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .8em;
}

.wv-theme-toggle svg {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
}

/* Icon- und Label-Wechsel: hell zeigt Mond („Nachtmodus"),
   dunkel zeigt Sonne („Tagmodus"). */
.wv-theme-toggle .wv-icon-sun,
.wv-theme-toggle .wv-label-day {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wv-theme-toggle .wv-icon-sun { display: block; }
  :root:not([data-theme="light"]) .wv-theme-toggle .wv-label-day { display: inline; }
  :root:not([data-theme="light"]) .wv-theme-toggle .wv-icon-moon,
  :root:not([data-theme="light"]) .wv-theme-toggle .wv-label-night { display: none; }
}

:root[data-theme="dark"] .wv-theme-toggle .wv-icon-sun { display: block; }
:root[data-theme="dark"] .wv-theme-toggle .wv-label-day { display: inline; }
:root[data-theme="dark"] .wv-theme-toggle .wv-icon-moon,
:root[data-theme="dark"] .wv-theme-toggle .wv-label-night { display: none; }