UX/SEO: Landing 3-Zielgruppen-Redesign, PWA-Wording ohne 'installieren' (SW by-v729)

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 = "728"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "729"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/api/version")
 async def app_version():

backend/static/index.html

@@ -578,7 +578,7 @@
 <script src="/js/api.js?v=94"></script>
 <script src="/js/ui.js?v=94"></script>
 <script src="/js/app.js?v=94"></script>
-<script src="/js/worlds.js?v=728"></script>
+<script src="/js/worlds.js?v=729"></script>
 
 <!-- Feature-Seiten werden lazy geladen -->
 

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '728'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '729'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.4.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 

backend/static/js/pages/welcome.js

@@ -108,7 +108,7 @@ window.Page_welcome = (() => {
             ${hasPrompt ? `
               <button class="btn wc-btn-hero" id="welcome-install-hero-btn">
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
-                App installieren
+                Zum Home-Bildschirm hinzufügen
               </button>
             ` : `
               <button class="btn wc-btn-hero" id="welcome-register-btn">
@@ -218,7 +218,7 @@ window.Page_welcome = (() => {
           ${hasPrompt ? `
             <button class="btn wc-btn-hero" id="welcome-install-hero-btn2">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
-              App installieren — kostenlos
+              Zum Home-Bildschirm hinzufügen
             </button>
           ` : `
             <button class="btn wc-btn-hero" id="welcome-register-btn2">
@@ -231,7 +231,7 @@ window.Page_welcome = (() => {
           ${!isInstalled ? `
             <button class="wc-install-link" id="welcome-install-link">
               <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
-              Installationsanleitung
+              Zum Home-Bildschirm hinzufügen
             </button>
           ` : ''}
         </div>
@@ -242,7 +242,7 @@ window.Page_welcome = (() => {
             <div class="card wc-install-card">
               <div class="wc-install-header">
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
-                App installieren
+                Immer griffbereit — kein App Store
               </div>
               <div style="padding:var(--space-4)">${_installHTML()}</div>
             </div>
@@ -481,7 +481,7 @@ window.Page_welcome = (() => {
             <div class="card wc-install-card">
               <div class="wc-install-header">
                 <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
-                App installieren
+                Immer griffbereit — kein App Store
               </div>
               <div style="padding:var(--space-4)">${_installHTML()}</div>
             </div>
@@ -1069,11 +1069,11 @@ window.Page_welcome = (() => {
     if (hasPrompt) {
       return `
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3);line-height:1.5">
-          Kein App Store nötig — direkt auf den Home-Bildschirm.
+          Ban Yaro immer griffbereit — einmal hinzufügen, dann direkt vom Home-Bildschirm öffnen.
         </p>
         <button class="btn btn-primary" id="install-android-btn" style="width:100%;margin-bottom:var(--space-2)">
           <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
-          Ban Yaro installieren
+          Zum Home-Bildschirm hinzufügen
         </button>`;
     }
 
@@ -1095,7 +1095,7 @@ window.Page_welcome = (() => {
     if (isIOS && !isSafari) {
       return `
         <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-4);line-height:1.5">
-          Auf dem iPhone geht die Installation nur über <strong>Safari</strong>.
+          Auf dem iPhone funktioniert das Hinzufügen nur über <strong>Safari</strong>.
         </p>
         ${_steps([
           ['safari-logo',    'Öffne <strong>Safari</strong> auf deinem iPhone'],

backend/static/landing.html

@@ -13,7 +13,7 @@
   <meta property="og:type" content="website">
   <meta property="og:title" content="Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz">
   <meta property="og:description" content="Tagebuch, Giftköder-Alarm, KI-Training, Forum, Wurfbörse, Stammbaum, Inzucht-Check — alles in einer DSGVO-konformen App ohne App Store. Kostenlos.">
-  <meta property="og:url" content="https://banyaro.app/info">
+  <meta property="og:url" content="https://banyaro.app/">
   <meta property="og:image" content="https://banyaro.app/icons/icon-512.png">
   <meta property="og:locale" content="de_DE">
   <meta property="og:site_name" content="Ban Yaro">
@@ -377,6 +377,65 @@
     .usp-item h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
     .usp-item p  { font-size: 0.85rem; color: var(--text-secondary); }
 
+    /* Outcome Cards */
+    .outcome-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 24px;
+      margin-top: 2rem;
+    }
+    .outcome-card {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 2px 12px rgba(0,0,0,.07);
+    }
+    .outcome-card .oc-icon {
+      font-size: 2rem;
+      margin-bottom: 0.75rem;
+    }
+    .outcome-card h3 {
+      font-size: 1.05rem;
+      font-weight: 700;
+      color: var(--text);
+      margin-bottom: 0.5rem;
+    }
+    .outcome-card p {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      line-height: 1.6;
+      margin: 0;
+    }
+    .section-cta-link {
+      display: inline-block;
+      margin-top: 1.75rem;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      cursor: pointer;
+      user-select: none;
+    }
+    .section-cta-link:hover { color: var(--primary); text-decoration: none; }
+    .collapsible-content { display: none; margin-top: 1.5rem; }
+    .collapsible-content.open { display: block; }
+    .section-cta-btn {
+      display: inline-block;
+      background: var(--primary);
+      color: white;
+      font-weight: 700;
+      font-size: 1rem;
+      padding: 0.75rem 2rem;
+      border-radius: 999px;
+      margin-top: 2rem;
+      box-shadow: 0 4px 16px rgba(196,132,58,.35);
+      transition: transform 0.15s, box-shadow 0.15s;
+    }
+    .section-cta-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 24px rgba(196,132,58,.45);
+      text-decoration: none;
+      color: white;
+    }
+
     /* Footer */
     footer {
       background: #1a1a1a;

backend/static/sw.js

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