Landing: 7 Unsplash-Fotos mit Fotografen-Credits eingebaut (SW by-v957)

- Eric Ward: emotionaler 50/50-Split nach Stats-Band
- Baptist Standaert: subtiles Hintergrundbild Demo-Section
- Alvan Nee / Nicholas Brownlow / Wade Austin Ellis / Tamas Pap: 4er-Foto-Strip vor Testimonials
- Chewy: Header-Bild Welpenkäufer-Section
- Alle Fotos mit © Name · Unsplash Credit-Overlay

backend/main.py

@@ -406,7 +406,7 @@ async def serve_media(path: str, request: _Request):
         raise _HE(404, "Nicht gefunden.")
     return _media_response(filepath)
 
-APP_VER = "956"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "957"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '956'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '957'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen

backend/static/landing.html

@@ -596,6 +596,65 @@
     .testimonial-dog    { font-size: 0.8rem; color: var(--primary); font-weight: 500; margin-top: 0.1rem; }
     .testimonial-placeholder { opacity: 0.4; font-style: italic; }
 
+    /* Foto-Sections */
+    .photo-credit {
+      position: absolute;
+      bottom: 7px; right: 9px;
+      font-size: 0.62rem;
+      color: rgba(255,255,255,0.8);
+      background: rgba(0,0,0,0.32);
+      padding: 2px 7px;
+      border-radius: 4px;
+      letter-spacing: 0.03em;
+      backdrop-filter: blur(3px);
+      pointer-events: none;
+    }
+    .photo-strip {
+      display: grid;
+      grid-template-columns: repeat(4,1fr);
+      gap: 3px;
+    }
+    @media (max-width: 640px) { .photo-strip { grid-template-columns: repeat(2,1fr); } }
+    .photo-strip-item {
+      position: relative;
+      aspect-ratio: 1;
+      overflow: hidden;
+    }
+    .photo-strip-item img {
+      width: 100%; height: 100%;
+      object-fit: cover;
+      transition: transform 0.45s ease;
+      display: block;
+    }
+    .photo-strip-item:hover img { transform: scale(1.04); }
+    .moment-split {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      min-height: 420px;
+    }
+    @media (max-width: 700px) {
+      .moment-split { grid-template-columns: 1fr; }
+      .moment-split .moment-photo { aspect-ratio: 4/3; min-height: unset; }
+    }
+    .moment-photo { position: relative; overflow: hidden; }
+    .moment-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .moment-text {
+      background: linear-gradient(135deg, #C4843A 0%, #d4944a 100%);
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: clamp(2rem,5vw,3.5rem);
+      gap: 1.5rem;
+    }
+    .moment-text blockquote {
+      font-size: clamp(1.3rem,2.5vw,1.9rem);
+      font-weight: 800;
+      line-height: 1.3;
+      margin: 0;
+    }
+    .moment-text p { font-size: 1rem; opacity: 0.88; margin: 0; line-height: 1.65; }
+
     /* Scroll animations */
     .fade-up {
       opacity: 0;
@@ -769,8 +828,28 @@
   </div>
 </section>
 
+<!-- Emotionaler Split: Eric Ward -->
+<section style="padding:0;overflow:hidden">
+  <div class="moment-split">
+    <div class="moment-photo">
+      <img src="/img/landing/eric-ward.jpg" alt="Hundebesitzer umarmt seinen Golden Retriever" loading="lazy">
+      <span class="photo-credit">© Eric Ward · Unsplash</span>
+    </div>
+    <div class="moment-text">
+      <blockquote>„Ich kann mir ein Leben ohne ihn nicht mehr vorstellen."</blockquote>
+      <p>Das sagen uns Tausende Hundemenschen täglich. Ban Yaro begleitet diese Liebe — mit Tagebuch, Gesundheit, Training und einer Gemeinschaft die genauso fühlt wie du.</p>
+      <a href="/" class="cta-btn" style="align-self:flex-start;background:white;color:#a86e2e;margin:0;box-shadow:0 4px 20px rgba(0,0,0,.15)"
+         onclick="sessionStorage.setItem('by_stay_in_app','1')">Kostenlos starten</a>
+    </div>
+  </div>
+</section>
+
 <!-- Demo-Video -->
-<section id="demo" style="background:#1a1a1a;padding:64px 20px;text-align:center">
+<section id="demo" style="position:relative;background:#1a1a1a;padding:64px 20px;text-align:center;overflow:hidden">
+  <img src="/img/landing/baptist-standaert.jpg" alt=""
+       loading="lazy" aria-hidden="true"
+       style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:0.15;filter:grayscale(50%)">
+  <span class="photo-credit" style="position:absolute;top:7px;right:9px">© Baptist Standaert · Unsplash</span>
   <div style="max-width:480px;margin:0 auto">
     <h2 style="color:white;font-size:clamp(1.3rem,3.5vw,1.8rem);font-weight:800;margin:0 0 12px">
       Sieh selbst wie es sich anfühlt
@@ -933,6 +1012,28 @@
   </div>
 </section>
 
+<!-- Foto-Strip -->
+<section style="padding:0;overflow:hidden">
+  <div class="photo-strip">
+    <div class="photo-strip-item">
+      <img src="/img/landing/alvan-nee.jpg" alt="Zwei Hunde laufen einen Waldweg entlang" loading="lazy">
+      <span class="photo-credit">© Alvan Nee · Unsplash</span>
+    </div>
+    <div class="photo-strip-item">
+      <img src="/img/landing/nicholas-brownlow.jpg" alt="Frau gibt ihrem Golden Retriever einen Kuss" loading="lazy">
+      <span class="photo-credit">© Nicholas Brownlow · Unsplash</span>
+    </div>
+    <div class="photo-strip-item">
+      <img src="/img/landing/wade-austin-ellis.jpg" alt="Frau mit Labrador auf der Wiese" loading="lazy">
+      <span class="photo-credit">© Wade Austin Ellis · Unsplash</span>
+    </div>
+    <div class="photo-strip-item">
+      <img src="/img/landing/tamas-pap.jpg" alt="Frau lacht während ihr Hund sie abschleckt" loading="lazy">
+      <span class="photo-credit">© Tamas Pap · Unsplash</span>
+    </div>
+  </div>
+</section>
+
 <!-- Testimonials -->
 <section id="stimmen" style="background:white">
   <div class="container">
@@ -1049,8 +1150,14 @@
 
 <!-- Sektion C: Für Welpenkäufer -->
 <section id="welpen" style="background: white;">
+  <div style="position:relative;height:280px;overflow:hidden">
+    <img src="/img/landing/chewy.jpg" alt="Pärchen mit Hund aus dem Tierheim" loading="lazy"
+         style="width:100%;height:100%;object-fit:cover;object-position:center 40%">
+    <div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.55))"></div>
+    <span class="photo-credit">© Chewy · Unsplash</span>
+  </div>
   <div class="container">
-    <h2>Den richtigen Welpen finden. Sicher.</h2>
+    <h2 style="margin-top:2.5rem">Den richtigen Welpen finden. Sicher.</h2>
     <p class="section-intro">Verifizierte Züchter, transparente Gesundheitsdaten, direkter Kontakt. Kein Kleinanzeigen-Chaos.</p>
 
     <div class="outcome-grid">

backend/static/sw.js

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