diff --git a/backend/static/index.html b/backend/static/index.html
index 82258db..3f4acbb 100644
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -94,15 +94,6 @@
 </head>
 <body>
 
-<!-- Staging-Banner (nur auf staging.banyaro.app) -->
-<div id="staging-banner"
-     style="display:none;position:fixed;top:0;left:0;right:0;z-index:10000;
-            background:#7c3aed;color:#fff;font-size:0.75rem;font-weight:700;
-            padding:5px 16px;align-items:center;justify-content:center;gap:8px;
-            letter-spacing:0.04em;text-transform:uppercase">
-  ⚗️ Staging-Umgebung — Keine Produktionsdaten
-</div>
-
 <!-- Offline-Banner -->
 <div id="offline-banner" aria-live="polite"
      style="display:none;position:fixed;top:0;left:0;right:0;z-index:9999;
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 1be6acf..4495386 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -864,9 +864,21 @@ const App = (() => {
 // App starten
 document.addEventListener('DOMContentLoaded', () => {
   if (IS_STAGING) {
-    const b = document.getElementById('staging-banner');
-    if (b) b.style.display = 'flex';
     document.title = '⚗️ ' + document.title;
+    // Bottom-Nav lila einfärben als Staging-Indikator
+    const style = document.createElement('style');
+    style.textContent = `
+      #bottom-nav {
+        background: #2d1b69 !important;
+        border-top-color: #7c3aed !important;
+      }
+      #bottom-nav .nav-item-label { color: rgba(255,255,255,0.6) !important; }
+      #bottom-nav .nav-item.active .nav-item-label { color: #c4b5fd !important; }
+      #bottom-nav .nav-item svg { color: rgba(255,255,255,0.5) !important; }
+      #bottom-nav .nav-item.active svg { color: #c4b5fd !important; }
+      #bottom-nav .nav-item-center .plus-btn { background: #7c3aed !important; }
+    `;
+    document.head.appendChild(style);
   }
   App.init();
 });
