From 064dd2bd31444152ac4f1c48f186475ddab76efd Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Thu, 8 Oct 2026 21:06:34 +0200
Subject: [PATCH] u

---
 src/colors.js | 13 ++++++++++---
 src/index.css |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/colors.js b/src/colors.js
index d417c59..10de5eb 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -345,11 +345,18 @@ export const SHADOW_BUBBLE_ASSISTANT = `0 1px 4px ${TINT_ROW_HOVER}`;
  *     dialog is open (`html.df-dialog-open` in `src/index.css`).
  * -------------------------------------------------------------------------*/
 
-/** Opaque fog base — deep navy with a blue push. */
-export const DIALOG_FOG_SOLID = mix(DARK_6, CHROMA.BLUE.dark, 0.42);
+/** Raw deep-navy base tint used for the dialog fog backdrop. */
+export const DIALOG_FOG_NAVY = mix(DARK_6, CHROMA.BLUE.dark, 0.42);
 
 /** Translucent backdrop wash painted over the page. */
-export const DIALOG_FOG = alpha(DIALOG_FOG_SOLID, 0.72);
+export const DIALOG_FOG = alpha(DIALOG_FOG_NAVY, 0.72);
+
+/**
+ * Solid fog color seen when DIALOG_FOG (72% opacity) is drawn over MAIN_BACKGROUND.
+ * Published as `--df-dialog-fog` so the reserved scrollbar-gutter strip on
+ * `html.df-dialog-open` seamlessly matches the translucent fog backdrop over the app.
+ */
+export const DIALOG_FOG_SOLID = mix(MAIN_BACKGROUND, DIALOG_FOG_NAVY, 0.72);
 
 /* ────────────────────────────────────────────────────────────────────────────
  * 11. CSS VARIABLE BRIDGE
diff --git a/src/index.css b/src/index.css
index f19b475..8bb2919 100644
--- a/src/index.css
+++ b/src/index.css
@@ -51,7 +51,7 @@ html {
 html.df-dialog-open,
 html.df-dialog-open body,
 html.df-dialog-open #root {
-  background-color: var(--df-dialog-fog, #152e73);
+  background-color: var(--df-dialog-fog, #345585);
 }
 
 /* SortableJS: Kategorie-Reorder im Edit-Modus.