diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 7016f7d..8812d99 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     = '545'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '546'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.1.4'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 
@@ -76,13 +76,15 @@ const App = (() => {
   // AUTH GUARD — Login-Gate Texte pro Seite
   // ----------------------------------------------------------
   const AUTH_GATE = {
-    diary:        { icon: 'book-open',       text: 'Halte besondere Momente mit deinem Hund fest — Spaziergänge, Meilensteine, Fotos.' },
-    health:       { icon: 'syringe',         text: 'Impfungen, Tierarztbesuche, Medikamente und Allergien deines Hundes immer im Blick.' },
-    'dog-profile':{ icon: 'paw-print',       text: 'Erstelle ein Profil für deinen Hund — mit Foto, Bio und NFC-Tag.' },
-    friends:      { icon: 'users',           text: 'Finde Hundebesitzer in deiner Nähe und baue ein Netzwerk auf.' },
-    chat:         { icon: 'chat-circle-dots', text: 'Schreibe direkt mit anderen Hundebesitzern.' },
-    walks:        { icon: 'paw-print',       text: 'Organisiere Gassi-Treffen und triff andere Hunde in deiner Gegend.' },
-    sitting:      { icon: 'house-line',      text: 'Finde einen Dogsitter oder biete selbst Sitting an.' },
+    diary:        { icon: 'book-open',        text: 'Dein persönliches Hunde-Tagebuch — Fotos, Notizen, Stimmungen. Nur für dich, privat und sicher.', preview: '/img/screenshots/screen-1.jpg' },
+    health:       { icon: 'syringe',          text: 'Impfungen, Tierarztbesuche, Gewicht und Medikamente — alles an einem Ort, immer abrufbar.', preview: '/img/screenshots/screen-3.jpg' },
+    'dog-profile':{ icon: 'paw-print',        text: 'Erstelle ein Profil für deinen Hund mit Foto, Bio, Chip-Nr. und NFC-Tag.', preview: null },
+    friends:      { icon: 'users',            text: 'Finde Hundebesitzer in deiner Nähe und tausche dich aus.', preview: null },
+    chat:         { icon: 'chat-circle-dots', text: 'Schreibe direkt mit anderen Hundebesitzern.', preview: null },
+    walks:        { icon: 'paw-print',        text: 'Organisiere Gassi-Treffen und triff andere Hunde.', preview: '/img/screenshots/screen-5.jpg' },
+    sitting:      { icon: 'house-line',       text: 'Finde einen Dogsitter oder biete selbst Sitting an.', preview: null },
+    uebungen:     { icon: 'target',           text: 'Über 100 Übungen mit Anleitungen — tracke deinen Trainingsfortschritt.', preview: '/img/screenshots/screen-4.jpg' },
+    notes:        { icon: 'note-pencil',      text: 'Dein persönlicher Notizblock — für alles was du nicht vergessen willst.', preview: null },
   };
 
   // ----------------------------------------------------------
@@ -188,16 +190,34 @@ const App = (() => {
 
     container.innerHTML = `
       <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;
-                  min-height:60vh;padding:var(--space-8) var(--space-5);text-align:center;gap:var(--space-5)">
+                  min-height:60vh;padding:var(--space-6) var(--space-5);text-align:center;gap:var(--space-4)">
 
-        <!-- Icon -->
-        <div style="width:72px;height:72px;border-radius:50%;
+        <!-- Preview-Screenshot (wenn vorhanden) -->
+        ${gate.preview ? `
+        <div style="position:relative;width:100%;max-width:280px;border-radius:var(--radius-lg);
+                    overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15)">
+          <img src="${gate.preview}" alt="${UI.escape(title)}"
+               style="width:100%;display:block;filter:blur(3px) brightness(0.7);transform:scale(1.05)">
+          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center">
+            <div style="background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);
+                        border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
+                        border:1px solid rgba(255,255,255,0.3)">
+              <svg style="width:28px;height:28px;color:#fff;display:block;margin:0 auto" aria-hidden="true">
+                <use href="/icons/phosphor.svg#lock-simple"></use>
+              </svg>
+              <span style="font-size:var(--text-xs);color:#fff;font-weight:700;display:block;margin-top:4px">
+                Nur für Mitglieder
+              </span>
+            </div>
+          </div>
+        </div>` : `
+        <div style="width:64px;height:64px;border-radius:50%;
                     background:var(--c-primary-subtle);
                     display:flex;align-items:center;justify-content:center">
-          <svg style="width:36px;height:36px;color:var(--c-primary)" aria-hidden="true">
+          <svg style="width:32px;height:32px;color:var(--c-primary)" aria-hidden="true">
             <use href="/icons/phosphor.svg#${UI.escape(gate.icon)}"></use>
           </svg>
-        </div>
+        </div>`}
 
         <!-- Text -->
         <div style="max-width:300px">
@@ -213,14 +233,13 @@ const App = (() => {
 
         <!-- CTAs -->
         <div style="display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:280px">
-          <button class="btn btn-primary" id="gate-login-btn">
-            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#sign-out"></use></svg>
-            Anmelden
-          </button>
-          <button class="btn btn-secondary" id="gate-register-btn">
+          <button class="btn btn-primary" id="gate-register-btn">
             <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#user-plus"></use></svg>
             Kostenlos registrieren
           </button>
+          <button class="btn btn-ghost" id="gate-login-btn" style="font-size:var(--text-sm)">
+            Schon dabei? Anmelden
+          </button>
         </div>
 
         <!-- Hinweis was sonst frei ist -->
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 9a5beac..42b4212 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-v568';
+const CACHE_VERSION = 'by-v569';
 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