UX: Landing-Page für Hundebesitzer + Züchter — Split-Hero, Zwei-Welten-Section, Verzahnungs-Section

backend/static/landing.html

@@ -472,6 +472,15 @@
       color: white;
     }
 
+    /* Audience Cards */
+    .audience-card > div { transition: border-color .2s, transform .15s; }
+    .audience-card:hover > div { transform: translateY(-3px); }
+    .audience-card:first-child:hover > div { border-color: var(--primary); }
+    .audience-card:last-child:hover > div  { border-color: rgba(196,132,58,.7); }
+    @media (max-width: 600px) {
+      #fuer-beide .container > div { grid-template-columns: 1fr !important; }
+    }
+
     /* Footer */
     footer {
       background: #1a1a1a;
@@ -492,8 +501,8 @@
       <img src="/icons/icon-180.png" alt="Ban Yaro App Icon">
       <span class="logo-name">Ban Yaro</span>
     </div>
-    <h1>Die deutschsprachige Hunde-Plattform</h1>
+    <h1>Für Hundebesitzer.<br>Für Züchter.<br><em style="font-style:normal;color:#f5c07a">Eine App.</em></h1>
-    <p>Alles rund um deinen Hund — von Welpe bis Opa. Kostenlos, ohne App Store, Daten in Deutschland.</p>
+    <p>Tagebuch, Training und Gesundheit für Hundebesitzer. Stammbaum, Wurfverwaltung und Warteliste für Züchter. Nahtlos verbunden — kostenlos, ohne App Store, Daten in Deutschland.</p>
     <div class="header-badges">
       <span class="badge">Kostenlos nutzbar</span>
       <span class="badge">Daten in Deutschland</span>
@@ -501,7 +510,10 @@
       <span class="badge">Made in Germany</span>
       <span class="badge">Offline-fähig</span>
     </div>
-    <a href="/" class="cta-btn">Jetzt kostenlos starten</a>
+    <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem">
+      <a href="/" class="cta-btn" onclick="sessionStorage.setItem('by_stay_in_app','1')">Ich bin Hundebesitzer</a>
+      <a href="/zuechter" class="cta-btn" style="background:transparent;color:white;border:2px solid rgba(255,255,255,.6)">Ich bin Züchter</a>
+    </div>
   </div>
 </header>
 
@@ -509,16 +521,55 @@
   <div class="container">
     <span class="nav-brand">Ban Yaro</span>
     <a href="#demo">Demo</a>
+    <a href="#fuer-beide">Übersicht</a>
     <a href="#funktionen">Hundebesitzer</a>
     <a href="#zuechter">Züchter</a>
-    <a href="#welpen">Welpen</a>
+    <a href="#verbindung">Verzahnung</a>
     <a href="#vergleich">Vergleich</a>
     <a href="#preise">Preise</a>
-    <a href="#warum">Warum Ban Yaro?</a>
     <a href="/">App öffnen</a>
   </div>
 </nav>
 
+<!-- Zwei Welten, eine App -->
+<section id="fuer-beide" style="background:white;padding:3rem 0">
+  <div class="container">
+    <h2 style="text-align:center;margin-bottom:0.5rem">Zwei Zielgruppen. Eine Plattform.</h2>
+    <p class="section-intro" style="text-align:center;margin:0 auto 2.5rem">Ban Yaro ist die einzige App die Hundebesitzer und Züchter nahtlos verbindet — weil Züchter und Käufer die gleiche App benutzen.</p>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:860px;margin:0 auto">
+
+      <!-- Hundebesitzer -->
+      <a href="#funktionen" style="text-decoration:none" class="audience-card">
+        <div style="background:var(--bg);border:2px solid var(--border);border-radius:14px;padding:2rem;height:100%;display:flex;flex-direction:column;gap:1rem;transition:border-color .2s">
+          <div style="width:52px;height:52px;background:var(--primary-light);border-radius:14px;display:flex;align-items:center;justify-content:center">
+            <svg style="width:28px;height:28px;color:var(--primary)" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#paw-print"></use></svg>
+          </div>
+          <div>
+            <h3 style="margin:0 0 .5rem;font-size:1.15rem">Für Hundebesitzer</h3>
+            <p style="margin:0;color:var(--text-secondary);font-size:.9rem;line-height:1.6">Tagebuch · Gesundheitsakte · KI-Trainer · Giftköder-Alarm · Gassi-Routen · Wetter · Forum · Wurfbörse</p>
+          </div>
+          <span style="color:var(--primary);font-size:.85rem;font-weight:600;margin-top:auto">Alle Features ansehen →</span>
+        </div>
+      </a>
+
+      <!-- Züchter -->
+      <a href="/zuechter" style="text-decoration:none" class="audience-card">
+        <div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);border:2px solid rgba(196,132,58,.4);border-radius:14px;padding:2rem;height:100%;display:flex;flex-direction:column;gap:1rem">
+          <div style="width:52px;height:52px;background:rgba(196,132,58,.15);border-radius:14px;display:flex;align-items:center;justify-content:center">
+            <svg style="width:28px;height:28px;color:#C4843A" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#certificate"></use></svg>
+          </div>
+          <div>
+            <h3 style="margin:0 0 .5rem;font-size:1.15rem;color:white">Für Züchter</h3>
+            <p style="margin:0;color:rgba(255,255,255,.65);font-size:.9rem;line-height:1.6">Stammbaum · Inzuchtkoeffizient · Wurfverwaltung · Warteliste · Läufigkeit · Kaufvertrag · KI-Assistent</p>
+          </div>
+          <span style="color:#C4843A;font-size:.85rem;font-weight:600;margin-top:auto">Züchter-Tool entdecken →</span>
+        </div>
+      </a>
+
+    </div>
+  </div>
+</section>
+
 <!-- Demo-Video -->
 <section id="demo" style="background:#1a1a1a;padding:64px 20px;text-align:center">
   <div style="max-width:480px;margin:0 auto">
@@ -716,6 +767,43 @@
   </div>
 </section>
 
+<!-- Verzahnung -->
+<section id="verbindung" style="background:linear-gradient(135deg,#1a1208 0%,#2d1f0e 50%,#1a1208 100%);padding:4rem 0;color:white">
+  <div class="container" style="text-align:center">
+    <p style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(196,132,58,.7);margin:0 0 .75rem">Das Alleinstellungsmerkmal</p>
+    <h2 style="color:white;margin-bottom:1rem">Der Welpe geht mit.</h2>
+    <p style="color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 3rem;font-size:1.05rem;line-height:1.7">Züchter und Käufer benutzen dieselbe App. Das Welpen-Profil mit Gewichtsverlauf, Impfungen und Stammbaum überträgt sich bei der Abgabe direkt — kein Papierstapel, kein vergessener Impfausweis.</p>
+
+    <div style="display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;max-width:720px;margin:0 auto">
+
+      <div style="background:rgba(255,255,255,.08);border:1px solid rgba(196,132,58,.3);border-radius:12px;padding:1.25rem 1.5rem;flex:1;min-width:160px;text-align:left">
+        <div style="font-size:1.4rem;margin-bottom:.5rem">🏡</div>
+        <div style="font-weight:700;font-size:.95rem;margin-bottom:.25rem">Züchter</div>
+        <div style="font-size:.82rem;color:rgba(255,255,255,.6)">Legt Wurf an, dokumentiert Welpen, veröffentlicht in der Wurfbörse</div>
+      </div>
+
+      <div style="color:rgba(196,132,58,.8);font-size:1.5rem;flex-shrink:0">→</div>
+
+      <div style="background:rgba(255,255,255,.08);border:1px solid rgba(196,132,58,.3);border-radius:12px;padding:1.25rem 1.5rem;flex:1;min-width:160px;text-align:left">
+        <div style="font-size:1.4rem;margin-bottom:.5rem">🔍</div>
+        <div style="font-weight:700;font-size:.95rem;margin-bottom:.25rem">Käufer</div>
+        <div style="font-size:.82rem;color:rgba(255,255,255,.6)">Findet Wurf in der Wurfbörse, kontaktiert Züchter direkt per Chat</div>
+      </div>
+
+      <div style="color:rgba(196,132,58,.8);font-size:1.5rem;flex-shrink:0">→</div>
+
+      <div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.5);border-radius:12px;padding:1.25rem 1.5rem;flex:1;min-width:160px;text-align:left">
+        <div style="font-size:1.4rem;margin-bottom:.5rem">🐶</div>
+        <div style="font-weight:700;font-size:.95rem;margin-bottom:.25rem;color:#f5c07a">Übergabe</div>
+        <div style="font-size:.82rem;color:rgba(255,255,255,.6)">Welpen-Profil mit allem landet direkt in der App des neuen Besitzers</div>
+      </div>
+
+    </div>
+
+    <p style="margin:2.5rem auto 0;font-size:.85rem;color:rgba(255,255,255,.4);max-width:480px">Das kann keine reine Züchter-Software. Das kann keine reine Community-App. Nur eine Plattform die beide verbindet.</p>
+  </div>
+</section>
+
 <!-- Sektion C: Für Welpenkäufer -->
 <section id="welpen" style="background: white;">
   <div class="container">