From 3b9f69fa0b6b84c4864f873dea11948233a4af6c Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Mon, 27 Apr 2026 19:14:30 +0200
Subject: [PATCH] =?UTF-8?q?UX:=20Dots=E2=86=92Z=C3=A4hler,=20Anmelden-Butt?=
 =?UTF-8?q?on=20Kontrast,=20Trust-Strip=20einzeilig=20=E2=80=94=20SW=20by-?=
 =?UTF-8?q?v448,=20APP=5FVER=20427?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/js/app.js           |  2 +-
 backend/static/js/pages/welcome.js | 51 ++++++++++++++----------------
 backend/static/sw.js               |  2 +-
 3 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 93d5984..7b4a07e 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '426'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '427'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 
diff --git a/backend/static/js/pages/welcome.js b/backend/static/js/pages/welcome.js
index d7b45fd..f11a1c5 100644
--- a/backend/static/js/pages/welcome.js
+++ b/backend/static/js/pages/welcome.js
@@ -97,9 +97,7 @@ window.Page_welcome = (() => {
           <img src="/icons/icon-180.png" alt="Ban Yaro" class="wc-lhero-icon">
           <h1 class="wc-lhero-headline" id="wc-hero-headline">${HERO_SLIDES[0].headline}</h1>
           <p class="wc-lhero-sub" id="wc-hero-sub">${HERO_SLIDES[0].sub}</p>
-          <div class="wc-hero-dots" id="wc-hero-dots">
-            ${HERO_SLIDES.map((_, i) => `<span class="wc-hero-dot${i === 0 ? ' wc-hero-dot--active' : ''}"></span>`).join('')}
-          </div>
+          <span class="wc-hero-counter" id="wc-hero-counter">1 / ${HERO_SLIDES.length}</span>
 
           <div class="wc-lhero-cta">
             ${hasPrompt ? `
@@ -113,7 +111,7 @@ window.Page_welcome = (() => {
                 Kostenlos loslegen
               </button>
             `}
-            <button class="btn btn-ghost wc-btn-login" id="welcome-login-btn">
+            <button class="btn wc-btn-login" id="welcome-login-btn">
               Schon dabei? Anmelden
             </button>
           </div>
@@ -342,18 +340,11 @@ window.Page_welcome = (() => {
         position: relative;
         transition: opacity 0.4s ease;
       }
-      .wc-hero-dots {
-        display: flex; justify-content: center; gap: 6px;
-        margin-bottom: var(--space-6); position: relative;
-      }
-      .wc-hero-dot {
-        width: 6px; height: 6px; border-radius: 50%;
-        background: rgba(255,255,255,0.35);
-        transition: background 0.3s, transform 0.3s;
-      }
-      .wc-hero-dot--active {
-        background: rgba(255,255,255,0.9);
-        transform: scale(1.3);
+      .wc-hero-counter {
+        display: block; text-align: center;
+        font-size: var(--text-xs); color: rgba(255,255,255,0.55);
+        font-weight: var(--weight-semibold); letter-spacing: 0.08em;
+        margin-bottom: var(--space-5); position: relative;
       }
       .wc-lhero-cta {
         display: flex; flex-direction: column;
@@ -372,22 +363,28 @@ window.Page_welcome = (() => {
       }
       .wc-btn-hero:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
       .wc-btn-login {
-        color: rgba(255,255,255,0.9) !important;
-        font-size: var(--text-sm);
-        padding: var(--space-2) var(--space-4);
-        border-color: rgba(255,255,255,0.35) !important;
+        background: rgba(255,255,255,0.15);
+        color: #fff;
+        font-size: var(--text-sm); font-weight: var(--weight-semibold);
+        padding: 12px var(--space-6); border-radius: 100px;
+        border: 1.5px solid rgba(255,255,255,0.65);
+        width: 100%; max-width: 320px;
+        display: flex; align-items: center; justify-content: center;
+        transition: background 0.15s;
       }
+      .wc-btn-login:hover  { background: rgba(255,255,255,0.22); }
+      .wc-btn-login:active { background: rgba(255,255,255,0.28); }
       .wc-trust-strip {
         display: flex; justify-content: center;
-        gap: var(--space-4); flex-wrap: wrap;
+        gap: var(--space-3); flex-wrap: nowrap;
         position: relative;
       }
       .wc-trust-strip span {
-        display: flex; align-items: center; gap: 5px;
-        font-size: var(--text-xs); color: rgba(255,255,255,0.8);
-        font-weight: var(--weight-semibold);
+        display: flex; align-items: center; gap: 4px;
+        font-size: 0.7rem; color: rgba(255,255,255,0.8);
+        font-weight: var(--weight-semibold); white-space: nowrap;
       }
-      .wc-trust-strip .ph-icon { width: 13px; height: 13px; }
+      .wc-trust-strip .ph-icon { width: 12px; height: 12px; flex-shrink: 0; }
 
       /* Feature Cards */
       .wc-feature {
@@ -572,7 +569,7 @@ window.Page_welcome = (() => {
     let idx = 0;
     const headline = _container.querySelector('#wc-hero-headline');
     const sub      = _container.querySelector('#wc-hero-sub');
-    const dots     = _container.querySelectorAll('.wc-hero-dot');
+    const counter  = _container.querySelector('#wc-hero-counter');
     if (!headline || !sub) return;
 
     _heroInterval = setInterval(() => {
@@ -585,7 +582,7 @@ window.Page_welcome = (() => {
         sub.textContent      = HERO_SLIDES[idx].sub;
         headline.style.opacity = '1';
         sub.style.opacity      = '1';
-        dots.forEach((d, i) => d.classList.toggle('wc-hero-dot--active', i === idx));
+        if (counter) counter.textContent = `${idx + 1} / ${HERO_SLIDES.length}`;
       }, 400);
     }, 6000);
   }
diff --git a/backend/static/sw.js b/backend/static/sw.js
index b953882..130979a 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v447';
+const CACHE_VERSION = 'by-v448';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten