diff --git a/css/navigation.css b/css/navigation.css
index 125b87e..5d4d585 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -2,6 +2,21 @@
 :root {
     --navigation-height: 99px;
 }
+.site-navigation {
+/* Werte per Pixel-Sampling aus dem Referenz-Screenshot (Produktübersicht) übernommen */
+    --background: #071419; /* früher "bg-dark */
+    --background-rgb: 7 20 25;  /* gleiche Basisfarbe wie --background, 
+    aber ohne fixes Alpha – für Gradient-Stops 
+    wird benutzt um Bildern einen gradient zu verpassen */
+    --background-panel: #152027; /* früher "primary */
+    --accent: #4597A3;
+    --accent-soft: rgba(69, 151, 163, 0.14);
+    --text-primary: #ffffff;
+    --text-muted: #7e858a;
+
+    --font-display: "Sora", "Inter", system-ui, sans-serif;
+    --font-body: "Inter", system-ui, sans-serif;
+}
 
 .site-navigation,
 .site-navigation * {
@@ -13,9 +28,9 @@
     position: sticky;
     top: 0;
     z-index: 100;
-    border-top: 3px solid #4597a3;
-    background: #071419;
-    color: #fff;
+    border-top: 3px solid var(--accent);
+    background: var(--background);
+    color: var(--text-primary);
     font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
     line-height: 1.6;
     box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
@@ -38,7 +53,7 @@
     width: 60px;
     height: 60px;
     border-radius: 22px;
-    background: #fff;
+    background: var(--text-primary);
 }
 
 .site-navigation .brand__logo img {
@@ -56,7 +71,7 @@
 }
 
 .site-navigation .brand__name {
-    color: #8a9093;
+    color: var(--text-muted);
     font-size: 14px;
     font-weight: 650;
     line-height: 1.4;