From 5557b263640ca9872aef1e10783e537ffa9e30d7 Mon Sep 17 00:00:00 2001
From: JUSN <justin@webklar.com>
Date: Fri, 24 Jul 2026 13:12:55 +0200
Subject: [PATCH] Startseite: Web-Demo zur Haupt-Handlung machen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero-Knopf ist jetzt die Demo ('Brief testen — 2x gratis', groesser),
  Warteliste rueckt zum sekundaeren Textlink
- Subline: 'Mit Ihrem eigenen Brief, kein Konto, sofort im Browser'
- Zusaetzliche Probier-Box direkt nach dem Vorher/Nachher-Beispiel
  ('Genau das — mit Ihrem Brief') fuer den zweiten Impuls

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 webseite/index.html | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/webseite/index.html b/webseite/index.html
index 025758c..b3e3928 100644
--- a/webseite/index.html
+++ b/webseite/index.html
@@ -99,6 +99,16 @@
       transition: transform 0.12s ease, box-shadow 0.12s ease;
     }
     .cta:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tinte); }
+    .cta-gross { font-size: 20px; padding: 19px 34px; }
+    .hero-unter { margin-top: 16px; font-size: 16px; color: var(--grau); line-height: 1.6; }
+    .hero-unter a { color: var(--amtsblau); font-weight: 700; }
+    .probier-box {
+      margin-top: 26px; text-align: center;
+      background: var(--papier-dunkel); border: 2px dashed var(--tinte);
+      padding: 24px 22px;
+    }
+    .probier-box p { font-size: 18px; margin-bottom: 16px; }
+    .probier-box .cta { width: auto; }
     .stempel {
       display: inline-block; padding: 7px 14px;
       border: 2.5px solid var(--stempelrot); color: var(--stempelrot);
@@ -319,12 +329,12 @@
         Brief in einfachen Worten. <em>Brief rein. Klartext raus.</em>
       </p>
       <div class="hero-fuss">
-        <a class="cta" href="#anmelden">Jetzt anmelden&nbsp;→</a>
+        <a class="cta cta-gross" href="demo.html">📷 Brief testen — 2× gratis</a>
         <span class="stempel">Bald im App&nbsp;Store</span>
       </div>
-      <p style="margin-top: 18px; font-size: 17px;">
-        Erst ausprobieren? <a href="demo.html" style="color: var(--amtsblau); font-weight: 700;">Testen
-        Sie es direkt im Browser</a> — mit Ihrem eigenen Brief, 2&nbsp;Analysen gratis.
+      <p class="hero-unter">
+        Mit Ihrem eigenen Brief · kein Konto · sofort im Browser.<br>
+        Oder <a href="#anmelden">nur auf die Warteliste</a> für den Start.
       </p>
     </header>
 
@@ -354,6 +364,10 @@
         Dazu bekommen Sie: eine Liste, was Sie tun müssen — und wenn Sie
         wollen, eine fertige Antwort.
       </p>
+      <div class="probier-box">
+        <p><strong>Genau das — mit Ihrem Brief.</strong> Kein Konto, sofort im Browser.</p>
+        <a class="cta" href="demo.html">📷 Jetzt 2× gratis testen&nbsp;→</a>
+      </div>
     </section>
 
     <section>