/* ============================================================
   Beirat Editorial Cinema — SITE-THEME (theme.css)
   ============================================================
   V3-Politur (2026-07-03, Charles): DARK ist das Site-Default-Theme fuer
   die GESAMTE Site (nicht mehr OS-abhaengig, nicht mehr nur calm-Seiten);
   im Header gibt es einen Toggle (Nav-Item neben Kontakt) fuer Light.
   Praeferenz: localStorage `beirat_theme` (dark|light, Default dark).

   MECHANIK (FOUC-frei):
   - Der Loader rendert serverseitig data-bc-theme="dark" auf <html> und
     druckt direkt danach ein Inline-Head-Script, das eine gespeicherte
     light-Praeferenz VOR dem ersten Paint anwendet.
   - Block A (dark) == SPIEGEL des @media (prefers-color-scheme: dark)-
     Blocks in wp/additional-css/beirat.css (~2669-2810). CSS kann @media
     und Selektor nicht ODER-verknuepfen -> bewusstes Duplikat.
     >>> BEI AENDERUNGEN AM beirat.css-DARK-BLOCK: HIER NACHZIEHEN. <<<
   - Block B (light) schreibt die Light-Werte FEST — noetig, damit ein
     OS-Dark-Nutzer, der auf Light togglet, nicht vom @media-Block
     zurueck ins Dunkel gezogen wird (html[attr]-Spezifitaet > :root).
   - Diese Datei wird SITE-WEIT inline gedruckt (beirat-cinema.php).
   ============================================================ */

/* --- 1. Beirat-Token-Remap: warme Pflaumen-Dunkelpalette --- */
html[data-bc-theme="dark"] {
  color-scheme: dark;              /* native Widgets (Checkbox/Select/Scrollbar) dunkel */

  --bg-base:      #171214;
  --bg-elevated:  #241C1F;
  --bg-deep:      #100D0E;
  --bg-tint:      #1D1719;

  --text-primary:   #EDE7E3;
  --text-secondary: #B6ABA5;
  --text-on-dark:   #EDE7E3;

  --accent-primary: #CE8B99;
  --accent-hover:   #DDA6B1;
  --accent-soft:    #C7A6AB;
  --link:           #CE8B99;   /* Dark-Links bleiben hell (Charles 2026-07-10); gespiegelt in beirat.css @media dark */
  --link-hover:     #DDA6B1;
  /* --gold bleibt #B5904E (modus-stabil) */

  --border: #3A3134;

  --success: #6F8E4B;
  --warning: #D9A448;
  --error:   #DE8568;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px -2px rgba(0, 0, 0, 0.40);
  --shadow-md:   0 2px 6px rgba(0, 0, 0, 0.40), 0 14px 32px -12px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.45), 0 20px 40px -14px rgba(0, 0, 0, 0.60);

  --contrast:   #EDE7E3;
  --contrast-2: #B6ABA5;
  --contrast-3: #574B4F;
  --base:       #322A2D;
  --base-2:     #1E181A;
  --base-3:     #241C1F;
  --accent:     #CE8B99;
}

/* --- 2. Header-Logo aufhellen (wie im OS-Dark) --- */
html[data-bc-theme="dark"] .site-logo img {
  filter: invert(0.92) sepia(0.06);
}

/* --- 3. Akzent-Rollentausch: auf Rose-Flaechen kippt Button-Text auf dunkel --- */
html[data-bc-theme="dark"] .button,
html[data-bc-theme="dark"] .wp-block-button__link,
html[data-bc-theme="dark"] input[type="submit"],
html[data-bc-theme="dark"] .button:hover,
html[data-bc-theme="dark"] .wp-block-button__link:hover,
html[data-bc-theme="dark"] input[type="submit"]:hover,
html[data-bc-theme="dark"] .btn.btn-primary,
html[data-bc-theme="dark"] .btn.btn-primary:hover,
html[data-bc-theme="dark"] .btn.btn-primary:focus,
html[data-bc-theme="dark"] .btn.btn-secondary:hover,
html[data-bc-theme="dark"] .btn.btn-secondary:focus,
html[data-bc-theme="dark"] .paging-navigation .nav-previous a:hover,
html[data-bc-theme="dark"] .paging-navigation .nav-next a:hover,
html[data-bc-theme="dark"] .paging-navigation .nav-previous a:focus,
html[data-bc-theme="dark"] .paging-navigation .nav-next a:focus,
html[data-bc-theme="dark"] a.wp-block-button__link.has-transparent-background-color:hover,
html[data-bc-theme="dark"] a.wp-block-button__link.has-transparent-background-color:focus {
  color: var(--bg-deep);
}

/* FluentForm-Submit: Inline-Styler im BODY schlaegt Head-CSS -> !important. */
html[data-bc-theme="dark"] .fluent_form_2 .ff-btn-submit,
html[data-bc-theme="dark"] .fluent_form_3 .ff-btn-submit,
html[data-bc-theme="dark"] .fluent_form_5 .ff-btn-submit,
html[data-bc-theme="dark"] .fluent_form_2 .ff-btn-submit:hover,
html[data-bc-theme="dark"] .fluent_form_3 .ff-btn-submit:hover,
html[data-bc-theme="dark"] .fluent_form_5 .ff-btn-submit:hover {
  color: var(--bg-deep) !important;
}
html[data-bc-theme="dark"] .fluent_form_5 .ff-btn-submit {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}
html[data-bc-theme="dark"] .fluent_form_5 .ff-btn-submit:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* --- 4. FluentForm-Felder heller Kontexte --- */
html[data-bc-theme="dark"] .fluentform .ff-el-form-control {
  background-color: var(--base-2);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-bc-theme="dark"] .fluentform .ff-el-form-control::placeholder {
  color: var(--text-secondary);
}
html[data-bc-theme="dark"] input,
html[data-bc-theme="dark"] textarea,
html[data-bc-theme="dark"] select {
  accent-color: var(--accent-primary);
}

/* --- 5. ez-toc-Restwerte des Plugin-Inline-CSS --- */
html[data-bc-theme="dark"] .ez-toc-box-title { color: var(--text-secondary); }
html[data-bc-theme="dark"] div#ez-toc-container nav a { color: var(--accent-primary); }
html[data-bc-theme="dark"] div#ez-toc-container nav a:hover,
html[data-bc-theme="dark"] div#ez-toc-container nav a:focus { color: var(--accent-hover); }

/* --- 6. Autoren-Box-Rolle --- */
html[data-bc-theme="dark"] .beirat-authorbio-role { color: var(--text-secondary); }

/* --- 7. Basics-Diagramme (mu-plugin-<style> im BODY -> !important) --- */
html[data-bc-theme="dark"] .brk-svg-accent-label { fill: var(--bg-deep) !important; }
html[data-bc-theme="dark"] .brk-lk-model { color: var(--bg-deep) !important; }
html[data-bc-theme="dark"] .brk-basics-cta-btn,
html[data-bc-theme="dark"] .brk-basics-cta-btn:hover,
html[data-bc-theme="dark"] .brk-basics-cta-btn:focus { color: var(--bg-deep) !important; }

/* --- 8. Code-Panels: Haarlinie --- */
html[data-bc-theme="dark"] .entry-content pre,
html[data-bc-theme="dark"] .entry-content .wp-block-code {
  border: 1px solid var(--border);
}

/* --- 9. Icon-Data-URIs --- */
html[data-bc-theme="dark"] .beirat-icon-newsletter { filter: brightness(1.85); }

/* --- 10. PDF-Cover-Schatten neu gewichten --- */
html[data-bc-theme="dark"] .nl-cover-img {
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}

/* --- 11. FluentForm-Zustands-UI --- */
html[data-bc-theme="dark"] .fluentform .ff-message-success,
html[data-bc-theme="dark"] .fluentform .ff-el-is-error .text-danger,
html[data-bc-theme="dark"] .fluentform .error-text {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-bc-theme="dark"] .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--error);
}


/* ============================================================
   BLOCK B — LIGHT (Toggle-Zustand): Light-Werte FESTGESCHRIEBEN.
   Spiegel des Haupt-:root von beirat.css (Zeilen ~55-75) + GP-Defaults —
   gewinnt per Spezifitaet gegen den @media-dark-Block bei OS-Dark-Nutzern.
   >>> BEI AENDERUNGEN AN DEN LIGHT-TOKENS IN beirat.css: NACHZIEHEN. <<<
   ============================================================ */
html[data-bc-theme="light"] {
  color-scheme: light;

  --bg-base:      #FAF8F4;
  --bg-elevated:  #F1ECE6;
  --bg-deep:      #1C1416;
  --bg-tint:      #F6F2EC;

  --text-primary:   #221A1C;
  --text-secondary: #5E544E;
  --text-on-dark:   #EDE7E3;

  --accent-primary: #7A2A38;
  --accent-hover:   #5E202C;
  --accent-soft:    #C7A6AB;
  --link:           #A63A4C;   /* Light-Links heller als accent-primary (Charles 2026-07-10); 5.37:1 auf --bg-elevated = AA */
  --link-hover:     #7A2A38;

  --border: #E5DDD3;

  --success: #4F6B33;
  --warning: #9A6B12;
  --error:   #B5462B;

  --shadow-sm:   0 1px 2px rgba(28, 20, 22, 0.05), 0 2px 8px -2px rgba(28, 20, 22, 0.06);
  --shadow-md:   0 2px 4px rgba(28, 20, 22, 0.05), 0 12px 28px -12px rgba(28, 20, 22, 0.14);
  --shadow-lift: 0 4px 8px rgba(28, 20, 22, 0.06), 0 18px 36px -14px rgba(28, 20, 22, 0.18);

  /* GeneratePress-Defaults (Live-Head erhoben 2026-07-03) */
  --contrast:   #222222;
  --contrast-2: #575760;
  --contrast-3: #b2b2be;
  --base:       #f0f0f0;
  --base-2:     #f7f8f9;
  --base-3:     #ffffff;
  --accent:     #1e73be;

  /* Motion-Tokens auf Light-Werte festschreiben (gegen tokens.css-@media
     bei OS-Dark-Nutzern im Light-Toggle): */
  --bc-glow-accent: rgba(122, 42, 56, 0.32);
  --bc-watermark-opacity: 0.09;
}
/* @media-dark-ELEMENT-Regeln neutralisieren (greifen sonst bei OS-dark):
   Mobile-Logo bleibt original-dunkel auf hellem Header; Newsletter-Icon
   unverstaerkt. Desktop-Logo-invert kommt aus cinema.css (Header im All)
   und bleibt unberuehrt (min-width-Regel, spaeteres Stylesheet). */
html[data-bc-theme="light"] .site-logo img { filter: none; }
html[data-bc-theme="light"] .beirat-icon-newsletter { filter: none; }
html[data-bc-theme="light"] .bc-watermark--light { display: block; }

/* Theme-abhaengige Motion-Tokens (Gegenstuecke zu tokens.css-@media): */
html[data-bc-theme="dark"] {
  --bc-glow-accent: rgba(206, 139, 153, 0.32);
  --bc-watermark-opacity: 0.12;
}
html[data-bc-theme="dark"][data-motion="spectacle"] {
  --bc-glow-accent: rgba(206, 139, 153, 0.6);
  --bc-glow-media: rgba(206, 139, 153, 0.6);
  --bc-watermark-opacity: 0.2;
}
html[data-bc-theme="dark"] .bc-watermark--light { display: none; }
html[data-bc-theme="light"][data-motion="spectacle"] {
  --bc-glow-accent: rgba(122, 42, 56, 0.6);
  --bc-glow-media: rgba(122, 42, 56, 0.6);
  --bc-watermark-opacity: 0.16;
}

/* ============================================================
   THEME-TOGGLE (Nav-Item neben «Kontakt», beide Menue-Instanzen)
   ============================================================ */
.bc-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0 12px;
  min-height: 44px;
  cursor: pointer;
  color: inherit;
  line-height: 1;
}
.bc-theme-toggle svg { width: 19px; height: 19px; display: block; }
.bc-theme-toggle:hover, .bc-theme-toggle:focus-visible { color: var(--accent-soft, #C7A6AB); }
.bc-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Icon-Logik: im Dark zeigt der Button die SONNE (Ziel: hell), im Light den MOND. */
.bc-theme-toggle .bc-tt-sun, .bc-theme-toggle .bc-tt-moon { display: none; }
html[data-bc-theme="dark"] .bc-theme-toggle .bc-tt-sun { display: block; }
html[data-bc-theme="light"] .bc-theme-toggle .bc-tt-moon { display: block; }
/* Nav-Item-Anatomie wie die GP-Menuepunkte */
li.bc-theme-item { display: flex; align-items: center; }