From 0c1983cb1f6f4adcb6c6914386e7e23351d4dd45 Mon Sep 17 00:00:00 2001
From: fds2610-bot <claude@sonnengetrock.net>
Date: Thu, 1 Oct 2026 08:42:28 +0200
Subject: [PATCH] Fix n.n.: Darkmode-Farben nach Mockup angepasst

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 Changes.md            |  4 ++++
 public/static/app.css | 45 +++++++++++++++++++++++--------------------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/Changes.md b/Changes.md
index cfe1fc0..7d6f867 100644
--- a/Changes.md
+++ b/Changes.md
@@ -1,5 +1,9 @@
 # Änderungen
 
+## Darkmode-Farben nach Mockup (01.10.2026)
+
+- Dunkle Palette bläulicher (Navy) statt grau-blau, Seitenleiste, Flächen, Ränder und Akzent angepasst. Der aktive Menüeintrag ist wie im hellen Modus blau hinterlegt (`--navi-aktiv`), der Balken links bleibt weiß (neue Variable `--navi-balken`). Nur Farben, nur im Darkmode (`app.css`).
+
 ## Favicon in hellem und dunklem Modus (01.10.2026)
 
 - Das Favicon war ein schwarzes „€“ ohne Hintergrund und im Darkmode kaum zu erkennen. Jetzt weißes „€“ auf blauer Kachel – in beiden Modi gut sichtbar (`kopf.php`, `schlicht.php`).
diff --git a/public/static/app.css b/public/static/app.css
index 0b755f7..18d0f4e 100644
--- a/public/static/app.css
+++ b/public/static/app.css
@@ -25,6 +25,7 @@
     --navi-text-aktiv: #ffffff;
     --navi-aktiv: #1f6feb;
     --navi-marke: #6ea8fe;
+    --navi-balken: #ffffff;
     --positiv: #1a7f4b;
     --negativ: #c0392b;
     --warnung: #9a6700;
@@ -37,20 +38,21 @@
 
 @media (prefers-color-scheme: dark) {
     :root:not([data-thema="hell"]) {
-        --grund: #161b22;
-        --flaeche: #1c2330;
-        --flaeche-gedaempft: #232b39;
-        --rand: #303a49;
-        --rand-kraeftig: #44506180;
+        --grund: #0d1624;
+        --flaeche: #121c2e;
+        --flaeche-gedaempft: #17233a;
+        --rand: #1f2b3f;
+        --rand-kraeftig: #2c3a52;
         --text: #e5eaf1;
         --text-gedaempft: #9aa7b6;
-        --akzent: #4d8ef7;
+        --akzent: #3e87fd;
         --akzent-text: #0d1117;
-        --akzent-schwach: #1d2b45;
-        --navi-grund: #10151c;
-        --navi-text: #9aa7b6;
+        --akzent-schwach: #172a4a;
+        --navi-grund: #0a111e;
+        --navi-text: #9fb0c8;
         --navi-text-aktiv: #ffffff;
-        --navi-aktiv: #2f6fd0;
+        --navi-aktiv: #1f6feb;
+        --navi-balken: #ffffff;
         --positiv: #46b877;
         --negativ: #f0705f;
         --warnung: #d9a441;
@@ -59,20 +61,21 @@
 }
 
 :root[data-thema="dunkel"] {
-    --grund: #161b22;
-    --flaeche: #1c2330;
-    --flaeche-gedaempft: #232b39;
-    --rand: #303a49;
-    --rand-kraeftig: #445061;
+    --grund: #0d1624;
+    --flaeche: #121c2e;
+    --flaeche-gedaempft: #17233a;
+    --rand: #1f2b3f;
+    --rand-kraeftig: #2c3a52;
     --text: #e5eaf1;
     --text-gedaempft: #9aa7b6;
-    --akzent: #4d8ef7;
+    --akzent: #3e87fd;
     --akzent-text: #0d1117;
-    --akzent-schwach: #1d2b45;
-    --navi-grund: #10151c;
-    --navi-text: #9aa7b6;
+    --akzent-schwach: #172a4a;
+    --navi-grund: #0a111e;
+    --navi-text: #9fb0c8;
     --navi-text-aktiv: #ffffff;
-    --navi-aktiv: #2f6fd0;
+    --navi-aktiv: #1f6feb;
+    --navi-balken: #ffffff;
     --positiv: #46b877;
     --negativ: #f0705f;
     --warnung: #d9a441;
@@ -177,7 +180,7 @@ code {
 
 .seitenleiste a.aktiv {
     background: var(--navi-aktiv);
-    border-left-color: #fff;
+    border-left-color: var(--navi-balken);
     color: var(--navi-text-aktiv);
     font-weight: 500;
 }