Feature: Dark-Mode Overlay auf Welten-Panorama (rgba 0,0,0,0.45), SW by-v1033

backend/main.py

@@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request):
         raise _HE(404, "Nicht gefunden.")
     return _media_response(filepath)
 
-APP_VER = "1032"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "1033"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '1032'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1033'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen

backend/static/js/worlds.js

@@ -982,6 +982,19 @@ window.Worlds = (() => {
 
   let _bgUrl = null; // aktuell gesetztes Hintergrundbild
 
+  function _isDarkMode() {
+    const t = document.documentElement.getAttribute('data-theme');
+    if (t === 'dark') return true;
+    if (t === 'light') return false;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function _bgWithOverlay(url) {
+    return _isDarkMode()
+      ? `linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url('${url}')`
+      : `url('${url}')`;
+  }
+
   function _applyBgOrientation() {
     const ov    = document.getElementById('worlds-overlay');
     const track = document.getElementById('worlds-track');
@@ -990,14 +1003,14 @@ window.Worlds = (() => {
     if (portrait) {
       // Panorama: Bild über alle drei Welten, scrollt mit dem Swipe
       ov.style.backgroundImage    = '';
-      track.style.backgroundImage    = `url('${_bgUrl}')`;
+      track.style.backgroundImage    = _bgWithOverlay(_bgUrl);
       track.style.backgroundSize     = 'cover';
       track.style.backgroundPosition = 'center 40%';
       track.style.backgroundRepeat   = 'no-repeat';
     } else {
       // Vollbild pro Welt (Landscape / Desktop)
       track.style.backgroundImage    = '';
-      ov.style.backgroundImage    = `url('${_bgUrl}')`;
+      ov.style.backgroundImage    = _bgWithOverlay(_bgUrl);
       ov.style.backgroundSize     = 'cover';
       ov.style.backgroundPosition = 'center 40%';
       ov.style.backgroundRepeat   = 'no-repeat';
@@ -1007,6 +1020,10 @@ window.Worlds = (() => {
   // Orientierungswechsel → Bild neu setzen
   window.matchMedia('(orientation: portrait)').addEventListener('change', _applyBgOrientation);
 
+  // Theme-Wechsel → Overlay-Intensität anpassen
+  new MutationObserver(_applyBgOrientation)
+    .observe(document.documentElement, { attributeFilter: ['data-theme'] });
+
   function _applyBgImage(url) {
     const ov    = document.getElementById('worlds-overlay');
     const track = document.getElementById('worlds-track');

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v1032';
+const CACHE_VERSION = 'by-v1033';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache