From 9491b78c2dd4ecb873061abec6757ba69caf48d4 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@v2202605360184461552.supersrv.de>
Date: Fri, 10 Jul 2026 00:11:36 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20BSN=20Dark-Mode-CSS=20f=C3=BCr=20Vorbes?=
 =?UTF-8?q?tell-Box=20&=20bsn-facts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- --vb-* Design-Token für [data-bs-theme=dark] überschrieben
- .vorbestell-box: background:#fff → #1e1e2e
- .vorbestell-box__panel: tint → dark tint
- .bsn-facts: background:#fff → #1e1e2e
- .bsn-facts__tile: tint → dark tint
- bsn-infobox, bsn-table, bsn-dachzeile, bsn-meta, bsn-recherche
  Text- und Border-Farben für Dark Mode

Einfügen in: Astroid → Template Options → Custom Code → Custom CSS
---
 references/bsn-dark-mode-vorbestell.css | 87 +++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 references/bsn-dark-mode-vorbestell.css

diff --git a/references/bsn-dark-mode-vorbestell.css b/references/bsn-dark-mode-vorbestell.css
new file mode 100644
index 0000000..8253a4d
--- /dev/null
+++ b/references/bsn-dark-mode-vorbestell.css
@@ -0,0 +1,87 @@
+/* ═══════════════════════════════════════════════════════════════════
+   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);
+}