Fix: Hintergrundbild auf worlds-overlay statt worlds-track — cover statt 100%-Track-Breite (war 3x überzoomt) (SW by-v783)

backend/main.py

@@ -327,7 +327,7 @@ MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
 os.makedirs(MEDIA_DIR, exist_ok=True)
 app.mount("/media", StaticFiles(directory=MEDIA_DIR), name="media")
 
-APP_VER = "781"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "783"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():

backend/static/index.html

@@ -575,10 +575,10 @@
 <div id="modal-container"></div>
 
 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=781"></script>
-<script src="/js/ui.js?v=781"></script>
-<script src="/js/app.js?v=781"></script>
-<script src="/js/worlds.js?v=781"></script>
+<script src="/js/api.js?v=783"></script>
+<script src="/js/ui.js?v=783"></script>
+<script src="/js/app.js?v=783"></script>
+<script src="/js/worlds.js?v=783"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '781'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '783'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.5.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

@@ -918,24 +918,24 @@ window.Worlds = (() => {
   }
 
   function _applyBgImage(url) {
-    const track = document.getElementById('worlds-track');
-    if (!track) return;
+    const ov = document.getElementById('worlds-overlay');
+    if (!ov) return;
     if (url) {
       const toLoad = new Image();
       toLoad.onload = () => {
         _hasBgPhoto = true;
-        track.style.backgroundImage    = `url('${url}')`;
-        track.style.backgroundSize     = '100% auto';
-        track.style.backgroundPosition = '0 40%';
-        track.style.backgroundRepeat   = 'no-repeat';
+        ov.style.backgroundImage    = `url('${url}')`;
+        ov.style.backgroundSize     = 'cover';
+        ov.style.backgroundPosition = 'center 40%';
+        ov.style.backgroundRepeat   = 'no-repeat';
         document.getElementById('wh-photo-hint')?.remove();
       };
       toLoad.onerror = () => _applyBgImage(null);
       toLoad.src = url;
     } else {
       _hasBgPhoto = false;
-      track.style.backgroundImage = 'linear-gradient(160deg,#1a1f35 0%,#16213e 33%,#1a2535 67%,#0f1921 100%)';
-      track.style.backgroundSize  = '100% 100%';
+      ov.style.backgroundImage = 'linear-gradient(160deg,#1a1f35 0%,#16213e 33%,#1a2535 67%,#0f1921 100%)';
+      ov.style.backgroundSize  = '100% 100%';
     }
   }
 
@@ -979,8 +979,8 @@ window.Worlds = (() => {
     const staleMin   = Math.max(weatherObj.ageMin || 0, dogsObj.ageMin || 0);
 
     // Panorama-Bild setzen (nur wenn noch kein Bild vorhanden)
-    const track = document.getElementById('worlds-track');
-    if (dog && !track?.style.backgroundImage?.startsWith('url')) {
+    const ov = document.getElementById('worlds-overlay');
+    if (dog && !ov?.style.backgroundImage?.startsWith('url')) {
       _loadDailyImage(dog).then(_applyBgImage);
     } else if (!dog) { _applyBgImage(null); }
 
@@ -1325,24 +1325,29 @@ window.Worlds = (() => {
         <div class="world-reminder bday-pop" id="wh-bday-banner" style="flex-direction:column;align-items:center;
                     text-align:center;gap:6px;padding:14px 16px;cursor:pointer;
                     background:rgba(0,0,0,0.42);border-color:rgba(196,132,58,0.6)">
-          <div style="display:flex;gap:6px;font-size:1.5rem;line-height:1">
-            <span class="bday-fw1">🎆</span>
-            <span style="font-size:2rem">${bday === 'today' ? '🎂' : '🎁'}</span>
-            <span class="bday-fw2">🎇</span>
+          <div style="display:flex;gap:10px;align-items:center;justify-content:center">
+            <svg class="ph-icon bday-fw1" style="width:1.6rem;height:1.6rem;color:#f59e0b"><use href="/icons/phosphor.svg#confetti"></use></svg>
+            <svg class="ph-icon bday-pop" style="width:2.2rem;height:2.2rem;color:#fff"><use href="/icons/phosphor.svg#${bday === 'today' ? 'cake' : 'gift'}"></use></svg>
+            <svg class="ph-icon bday-fw2" style="width:1.6rem;height:1.6rem;color:#f59e0b"><use href="/icons/phosphor.svg#confetti"></use></svg>
           </div>
           <div style="font-weight:800;font-size:var(--text-sm);color:#fff;letter-spacing:0.01em">
             ${bday === 'today'
               ? `Alles Gute zum ${bdayYear}. Geburtstag, ${_esc(dog.name)}!`
-              : `Morgen hat ${_esc(dog.name)} Geburtstag! 🥳`}
+              : `Morgen hat ${_esc(dog.name)} Geburtstag!`}
           </div>
-          <div style="display:flex;gap:4px;font-size:1.1rem">
-            <span class="bday-fw3">🎉</span><span class="bday-fw1">✨</span><span class="bday-fw2">🎊</span><span class="bday-fw3">✨</span><span class="bday-fw1">🎉</span>
+          <div style="display:flex;gap:8px;align-items:center">
+            <svg class="ph-icon bday-fw3" style="width:1rem;height:1rem;color:#e8c96e"><use href="/icons/phosphor.svg#sparkle"></use></svg>
+            <svg class="ph-icon bday-fw1" style="width:1rem;height:1rem;color:#f59e0b"><use href="/icons/phosphor.svg#star"></use></svg>
+            <svg class="ph-icon bday-fw2" style="width:1.1rem;height:1.1rem;color:#e8c96e"><use href="/icons/phosphor.svg#balloon"></use></svg>
+            <svg class="ph-icon bday-fw3" style="width:1rem;height:1rem;color:#f59e0b"><use href="/icons/phosphor.svg#star"></use></svg>
+            <svg class="ph-icon bday-fw1" style="width:1rem;height:1rem;color:#e8c96e"><use href="/icons/phosphor.svg#sparkle"></use></svg>
           </div>
           ${bdayYear ? `<div style="font-size:10px;color:rgba(255,255,255,0.55)">
-            ${bday === 'today' ? `${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} gemeinsam 🐾` : `Wird ${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} alt`}
+            ${bday === 'today' ? `${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} gemeinsam` : `Wird ${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} alt`}
           </div>` : ''}
-          <div style="font-size:10px;color:rgba(196,132,58,0.9);font-weight:700;margin-top:2px">
-            ${bday === 'today' ? '🐾 Was hat sich Ban Yaro gewünscht? →' : '✨ KI-Überraschungsideen →'}
+          <div style="display:flex;align-items:center;gap:4px;font-size:10px;color:rgba(196,132,58,0.9);font-weight:700;margin-top:2px">
+            <svg class="ph-icon" style="width:11px;height:11px"><use href="/icons/phosphor.svg#magic-wand"></use></svg>
+            ${bday === 'today' ? 'Was hat sich Ban Yaro gewünscht?' : 'KI-Überraschungsideen'}
           </div>
         </div>
         ${bday === 'today' && new Date().getHours() >= 18 ? `

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v781';
+const CACHE_VERSION = 'by-v783';
 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