/* ═══════════════════════════════════════════════════════════════════
   BSN Dark Mode — Vorbestell-Box & bsn-facts (09.07.2026)
   ═══════════════════════════════════════════════════════════════════
   EINFÜGEN IN: Astroid → Template Options → Custom Code → Custom CSS
   Die Variablen-Überschreibungen müssen VOR den Komponenten-Regeln stehen.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN-TOKEN: vb-Variablen für Dark Mode ── */
[data-bs-theme="dark"] {
  --vb-tint: #252538;
  --vb-tint-border: #3a3a5c;
  --vb-muted: #9090c0;
  --vb-text: #c8c8d8;
  --vb-accent: #7b7fd4;
  --vb-accent-dark: #a0a4e8;
  --vb-accent-hover: #9498e0;
}

/* ── 2. Vorbestell-Box ── */
[data-bs-theme="dark"] .vorbestell-box {
  background: #1e1e2e;
}

[data-bs-theme="dark"] .vorbestell-box__panel {
  background: var(--vb-tint);
}

[data-bs-theme="dark"] .vorbestell-box__btn {
  background: var(--vb-accent);
}

[data-bs-theme="dark"] .vorbestell-box__btn:hover {
  background: var(--vb-accent-hover);
}

/* ── 3. bsn-facts ── */
[data-bs-theme="dark"] .bsn-facts {
  background: #1e1e2e;
}

[data-bs-theme="dark"] .bsn-facts__tile {
  background: var(--vb-tint);
}

/* ── 4. bsn-infobox (Legacy) ── */
[data-bs-theme="dark"] .bsn-infobox {
  background: #1e1e2e;
  border-color: var(--vb-tint-border);
}

[data-bs-theme="dark"] .bsn-infobox td {
  border-color: var(--vb-tint-border);
  color: var(--vb-text);
}

[data-bs-theme="dark"] .bsn-infobox td:first-child {
  color: var(--vb-accent-dark);
}

/* ── 5. bsn-table (Legacy) ── */
[data-bs-theme="dark"] .bsn-table td {
  border-color: var(--vb-tint-border);
  color: var(--vb-text);
}

[data-bs-theme="dark"] .bsn-table td:first-child {
  color: var(--vb-accent-dark);
}

/* ── 6. Text-Elemente ── */
[data-bs-theme="dark"] .bsn-dachzeile {
  color: #aaa;
  border-color: var(--vb-tint-border);
}

[data-bs-theme="dark"] .bsn-meta {
  color: #888;
}

[data-bs-theme="dark"] .bsn-recherche {
  color: #888;
  border-color: var(--vb-tint-border);
}

[data-bs-theme="dark"] .bsn-quellen h3 {
  color: var(--vb-accent-dark);
}