Fix: Welten-Chips letzte Zeile zentriert (Flex statt Grid), force-update setzt Cooldown gegen Dauerschleife, SW v1129

VERSION

@@ -1 +1 @@
-1120
+1129

backend/main.py

@@ -1772,6 +1772,10 @@ border-radius:8px;font-size:16px;cursor:pointer}</style></head>
 <button id="b" style="display:none" onclick="location.replace('/?_t='+Date.now())">App neu starten</button>
 <script>
 sessionStorage.setItem('by_skip_sw_reload','1');
+// Cooldown setzen, BEVOR neu geladen wird — sonst kann ein direkter
+// Aufruf von /force-update (ohne navigate()) bei kurzem Versions-Mismatch
+// eine Dauerschleife auslösen, weil der Loop-Schutz in app.js nie greift.
+try { localStorage.setItem('by_last_force_update', String(Date.now())); } catch(e) {}
 // Cleanup IM HINTERGRUND starten (fire-and-forget) — kein await,
 // kein Blockieren. Selbst wenn die Promises nie resolven (iOS-Bug),
 // hängen wir nicht.

backend/static/css/components.css

@@ -8179,10 +8179,10 @@ svg.empty-state-icon {
 
 /* Frosted-Glass Info-Card (oben in jeder Welt) */
 .world-info-card {
-  background: rgba(0, 0, 0, 0.38);
-  backdrop-filter: blur(18px) saturate(1.6);
-  -webkit-backdrop-filter: blur(18px) saturate(1.6);
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(0, 0, 0, var(--wbg-dim, 0.38));
+  backdrop-filter: blur(var(--wbg-blur, 18px)) saturate(1.6);
+  -webkit-backdrop-filter: blur(var(--wbg-blur, 18px)) saturate(1.6);
+  border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
   border-radius: 20px;
   padding: 16px 18px;
   color: white;
@@ -8202,9 +8202,10 @@ svg.empty-state-icon {
 
 /* Frosted-Glass Reminder-Card (für Streak, Alerts) */
 .world-reminder {
-  background: rgba(0, 0, 0, 0.32);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, var(--wbg-dim, 0.32));
+  backdrop-filter: blur(var(--wbg-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
+  border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
   border-radius: 16px;
   padding: 12px 16px;
   display: flex;
@@ -8224,11 +8225,26 @@ svg.empty-state-icon {
   gap: 7px;
 }
 
+/* Handy: Flexbox statt Grid, damit eine unvollständige letzte Zeile
+   horizontal zentriert wird (volle Zeilen bleiben randbündig).
+   Chip-Breite exakt wie im 4er-Raster (3 Gaps × 7px = 21px),
+   1px Puffer gegen Subpixel-Umbruch. */
+@media (max-width: 767px) {
+  .world-chips-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .world-chips-grid .world-chip {
+    width: calc((100% - 22px) / 4);
+  }
+}
+
 /* Einzelner Chip: Frosted Glass */
 .world-chip {
-  background: rgba(0, 0, 0, 0.35);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, var(--wbg-dim, 0.35));
+  backdrop-filter: blur(var(--wbg-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
   border-radius: 16px;
   padding: 12px 6px;
   text-align: center;
@@ -8262,10 +8278,15 @@ svg.empty-state-icon {
   -webkit-box-orient: vertical;
 }
 
-/* Chip-Umrandung je Welt */
-#wp-jetzt .world-chip { border: 1px solid rgba(196, 132, 58, 0.55); }
-#wp-hund  .world-chip { border: 1px solid rgba(196, 132, 58, 0.65); }
-#wp-welt  .world-chip { border: 1px solid rgba(99, 130, 220, 0.55); }
+/* Chip/Banner-Abdunklung + Blur: einheitlich auf allen drei Welten (reduziert) */
+.world-panel { --wbg-dim: 0.14; --wbg-blur: 3px; }
+
+/* Rahmenfarbe je Welt (Alpha einheitlich 0.55) — gilt für Chips + Banner oben
+   Gedämpfte Erdtöne: JETZT orange, HUND naturgrün, WELT blaugrau */
+#wp-jetzt { --wborder: rgba(196, 132, 58, 0.55); }  /* #C4843A Bernstein */
+#wp-hund  { --wborder: rgba(107, 128, 85, 0.55); }  /* #6B8055 Naturgrün */
+#wp-welt  { --wborder: rgba(74, 122, 155, 0.55); }  /* #4A7A9B Blaugrau */
+.world-chip { border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55)); }
 
 /* Sektion-Label über Chip-Gruppen */
 .world-section-label {
@@ -8285,9 +8306,10 @@ svg.empty-state-icon {
 .wj-chip {
   flex: 1;
   min-width: 0;
-  background: rgba(0, 0, 0, 0.32);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, var(--wbg-dim, 0.32));
+  backdrop-filter: blur(var(--wbg-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--wbg-blur, 12px));
+  border: 1px solid var(--wborder, rgba(99, 130, 220, 0.55));
   border-radius: 14px;
   padding: 10px 6px 9px;
   display: flex;

backend/static/index.html

@@ -86,14 +86,14 @@
   <title>Ban Yaro</title>
 
   <!-- Theme + theme-color Statusleiste vor CSS setzen -->
-  <script src="/js/boot-early.js?v=1120"></script>
+  <script src="/js/boot-early.js?v=1129"></script>
 
   <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
-  <link rel="stylesheet" href="/css/design-system.css?v=1120">
-  <link rel="stylesheet" href="/css/layout.css?v=1120">
-  <link rel="stylesheet" href="/css/components.css?v=1120">
-  <link rel="stylesheet" href="/css/utilities.css?v=1120">
-  <link rel="stylesheet" href="/css/lists.css?v=1120">
+  <link rel="stylesheet" href="/css/design-system.css?v=1129">
+  <link rel="stylesheet" href="/css/layout.css?v=1129">
+  <link rel="stylesheet" href="/css/components.css?v=1129">
+  <link rel="stylesheet" href="/css/utilities.css?v=1129">
+  <link rel="stylesheet" href="/css/lists.css?v=1129">
 </head>
 <body>
 
@@ -617,11 +617,11 @@
 <div id="modal-container"></div>
 
 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=1120"></script>
-<script src="/js/ui.js?v=1120"></script>
-<script src="/js/app.js?v=1120"></script>
-<script src="/js/worlds.js?v=1120"></script>
-<script src="/js/offline-indicator.js?v=1120"></script>
+<script src="/js/api.js?v=1129"></script>
+<script src="/js/ui.js?v=1129"></script>
+<script src="/js/app.js?v=1129"></script>
+<script src="/js/worlds.js?v=1129"></script>
+<script src="/js/offline-indicator.js?v=1129"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 
@@ -631,7 +631,7 @@
 
 
 <!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
-<script src="/js/boot.js?v=1120"></script>
+<script src="/js/boot.js?v=1129"></script>
 
 
 </body>

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '1120'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1129'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 window.APP_VER     = APP_VER;       // global verfügbar für andere Module (z.B. offline-indicator)
 window.APP_VERSION = APP_VERSION;

backend/static/js/pages/wetter.js

@@ -58,6 +58,7 @@ window.Page_wetter = (() => {
   let _container    = null;
   let _appState     = null;
   let _data         = null;
+  let _current      = null;
   let _selDay       = 0;
   let _loading      = false;
   let _recordsLoaded = false;
@@ -239,8 +240,13 @@ window.Page_wetter = (() => {
     if (_loading) return;
     _loading = true;
     try {
-      _data = await API.weather.forecast(lat, lon);
-      _selDay = 0;
+      const [forecast, current] = await Promise.all([
+        API.weather.forecast(lat, lon),
+        API.weather.get(lat, lon).catch(() => null),  // Ist-Temperatur, best-effort
+      ]);
+      _data    = forecast;
+      _current = current;
+      _selDay  = 0;
       _renderWeather();
     } catch {
       const body = _container.querySelector('#wttr-body');
@@ -275,6 +281,8 @@ window.Page_wetter = (() => {
     if (!days.length) return;
 
     body.innerHTML = `
+      ${_nowBanner()}
+
       <!-- 7-Tage-Strip -->
       <div id="wttr-strip-wrap"
            style="overflow-x:auto;-webkit-overflow-scrolling:touch;
@@ -320,6 +328,43 @@ window.Page_wetter = (() => {
     _loadRecords();
   }
 
+  // ----------------------------------------------------------
+  // "JETZT"-BANNER (aktuelle Ist-Temperatur)
+  // ----------------------------------------------------------
+  function _nowBanner() {
+    const c = _current;
+    if (!c || c.temp_c == null) return '';
+
+    const desc  = c.desc || WMO_DESC[c.weathercode] || '';
+    const place = c.location_name || '';
+    const feels = c.feels_like_c != null && Math.round(c.feels_like_c) !== Math.round(c.temp_c)
+      ? `Gefühlt ${Math.round(c.feels_like_c)}°`
+      : '';
+    const sub = [desc, feels, place].filter(Boolean).join(' · ');
+
+    return `
+      <div class="section-card mb-4"
+           style="display:flex;align-items:center;gap:var(--space-3);
+                  padding:var(--space-3) var(--space-4)">
+        ${_wmoIcon(c.weathercode, '3rem')}
+        <div style="display:flex;flex-direction:column;line-height:1.1">
+          <span style="font-size:2.25rem;font-weight:700;letter-spacing:-1px">
+            ${Math.round(c.temp_c)}°
+          </span>
+          <span style="font-size:var(--text-xs);color:var(--c-text-secondary);
+                       font-weight:600;text-transform:uppercase;letter-spacing:.5px">
+            Jetzt
+          </span>
+        </div>
+        <div style="margin-left:auto;text-align:right;
+                    font-size:var(--text-sm);color:var(--c-text-secondary);
+                    max-width:55%">
+          ${UI.escape(sub)}
+        </div>
+      </div>
+    `;
+  }
+
   // ----------------------------------------------------------
   // STRIP AKTUALISIEREN (aktiver Tag)
   // ----------------------------------------------------------

backend/static/js/worlds.js

@@ -1147,13 +1147,13 @@ window.Worlds = (() => {
     }
     const gassiScore = _calcGassiScore(w);
     const gassiColor = gassiScore >= 8 ? '#10B981' : gassiScore >= 5 ? '#F59E0B' : '#EF4444';
-    const weatherEmoji = !w ? '🌤️'
-      : w.thunderstorm ? '⛈️'
-      : (w.precip_prob ?? 0) > 70 ? '🌧️'
-      : (w.precip_prob ?? 0) > 30 ? '🌦️'
-      : (w.temp_c ?? 20) > 28 ? '☀️🔥'
-      : (w.temp_c ?? 20) < 2 ? '🌨️'
-      : '☀️';
+    const weatherEmoji = !w ? ['🌤️']
+      : w.thunderstorm ? ['⛈️']
+      : (w.precip_prob ?? 0) > 70 ? ['🌧️']
+      : (w.precip_prob ?? 0) > 30 ? ['🌦️']
+      : (w.temp_c ?? 20) > 28 ? ['☀️', '🔥']
+      : (w.temp_c ?? 20) < 2 ? ['🌨️']
+      : ['☀️'];
 
     // User-Geburtstag Reminder
     const userBdayHtml = userBdayToday ? `
@@ -1227,7 +1227,10 @@ window.Worlds = (() => {
         <div class="wj-chip-row">
           <div class="wj-chip" data-wnav="wetter">
             <div style="display:flex;align-items:center;gap:6px;width:100%">
-              <span style="font-size:1.4rem;line-height:1;flex-shrink:0">${weatherEmoji}</span>
+              <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;
+                          gap:1px;flex-shrink:0;font-size:1.4rem;line-height:1">
+                ${weatherEmoji.map(e => `<span>${e}</span>`).join('')}
+              </div>
               <div style="flex:1;min-width:0">
                 <div style="font-size:9px;color:rgba(255,255,255,0.55);font-weight:600;letter-spacing:.05em;text-transform:uppercase">Gassi-Score</div>
                 <div style="display:flex;align-items:baseline;gap:3px;margin-top:1px">

backend/static/landing.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="color-scheme" content="light dark">
-  <script src="/js/landing-init.js?v=1120"></script>
+  <script src="/js/landing-init.js?v=1129"></script>
   <title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
   <meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
   <meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">

backend/static/sw.js

@@ -4,7 +4,7 @@
    ============================================================ */
 
 // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
-const VER           = '1120';
+const VER           = '1129';
 const CACHE_VERSION = `by-v${VER}`;
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten