Fix: SW Network-First für Navigation + versionierte CSS/JS-URLs (v=32)

- sw.js: index.html nie aus Cache (navigation → network-first)
- index.html: ?v=32 an layout.css, components.css, api/ui/app.js
- sw.js STATIC_ASSETS: versionierte URLs gecacht
- app.js: Sidebar-Background per getComputedStyle statt CSS-Variable-String
- SW by-v31 → by-v32

backend/static/sw.js

@@ -3,18 +3,17 @@
    Offline-Cache + Push Notifications
    ============================================================ */
 
-const CACHE_VERSION = 'by-v31';
+const CACHE_VERSION = 'by-v32';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 
-// Diese Dateien werden beim Install gecacht (App Shell)
+// index.html wird NICHT pre-gecacht (immer Network-First)
 const STATIC_ASSETS = [
-  '/',
   '/css/design-system.css',
-  '/css/layout.css',
-  '/css/components.css',
-  '/js/api.js',
-  '/js/ui.js',
-  '/js/app.js',
+  '/css/layout.css?v=32',
+  '/css/components.css?v=32',
+  '/js/api.js?v=32',
+  '/js/ui.js?v=32',
+  '/js/app.js?v=32',
   '/manifest.json',
   '/icons/icon-192.png',
 ];
@@ -40,14 +39,11 @@ self.addEventListener('activate', event => {
         keys.filter(k => k !== CACHE_STATIC).map(k => caches.delete(k))
       ))
       .then(() => self.clients.claim())
-      // Alle offenen Fenster neu laden, damit neues CSS/JS aktiv wird
-      .then(() => self.clients.matchAll({ type: 'window' }))
-      .then(clients => clients.forEach(c => c.navigate(c.url)))
   );
 });
 
 // ----------------------------------------------------------
-// FETCH — Cache-First für statische Assets, Network-First für API
+// FETCH — Network-First für HTML, Cache-First für Assets, Network für API
 // ----------------------------------------------------------
 self.addEventListener('fetch', event => {
   const url = new URL(event.request.url);
@@ -63,12 +59,25 @@ self.addEventListener('fetch', event => {
     return;
   }
 
+  // Navigation (index.html): immer Network-First
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request)
+        .then(response => {
+          const clone = response.clone();
+          caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
+          return response;
+        })
+        .catch(() => caches.match('/'))
+    );
+    return;
+  }
+
   // Statische Assets: Cache-First
   event.respondWith(
     caches.match(event.request)
       .then(cached => cached || fetch(event.request)
         .then(response => {
-          // Erfolgreiche Responses für statische Assets cachen
           if (response.ok && event.request.method === 'GET') {
             const clone = response.clone();
             caches.open(CACHE_STATIC).then(c => c.put(event.request, clone));
@@ -77,7 +86,6 @@ self.addEventListener('fetch', event => {
         })
       )
       .catch(() => {
-        // Offline-Fallback: App Shell zurückgeben
         if (event.request.mode === 'navigate') {
           return caches.match('/');
         }
@@ -139,7 +147,6 @@ self.addEventListener('notificationclick', event => {
   event.waitUntil(
     clients.matchAll({ type: 'window', includeUncontrolled: true })
       .then(windowClients => {
-        // Offenes Fenster fokussieren
         for (const client of windowClients) {
           if (client.url.includes(self.location.origin)) {
             client.focus();
@@ -147,7 +154,6 @@ self.addEventListener('notificationclick', event => {
             return;
           }
         }
-        // Neues Fenster öffnen
         return clients.openWindow(url);
       })
   );