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);
+}