refactor: Seitenstruktur, visuelle Differenzierung, Feedback-Fixes

- Problem-Section vor Workflow verschoben (Hero -> Problem -> Workflow)
- Problem-Section dunkel (Navy) fuer visuellen Kontrast
- Faktenprüfung als eigene Highlight-Card hervorgehoben (Gold-Border)
- Tippfehler Grosslage -> Großlage
- Nachhaltigkeit Icon von clock.svg zu shield-check.svg
- Hero Spacing verbessert (mehr Abstand Claim/Subtext)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

vorschau/css/style.css

@@ -70,9 +70,9 @@ a { color:inherit; text-decoration:none; }
 
 .hero-content { position:relative; z-index:2; max-width:700px; padding:80px 24px; color:var(--white); }
 .hero-title { font-size:3.4rem; font-weight:700; line-height:1.1; margin-bottom:20px; letter-spacing:-0.02em; color:var(--white); }
-.hero-claim { font-size:1.45rem; font-weight:300; line-height:1.5; margin-bottom:16px; color:rgba(255,255,255,0.9); }
+.hero-claim { font-size:1.45rem; font-weight:300; line-height:1.5; margin-bottom:24px; color:rgba(255,255,255,0.9); }
 .gold { color:var(--gold); font-weight:600; }
-.hero-sub { font-size:1.05rem; color:rgba(255,255,255,0.65); line-height:1.7; margin-bottom:36px; }
+.hero-sub { font-size:0.95rem; color:rgba(255,255,255,0.55); line-height:1.7; margin-bottom:36px; }
 .hero-cta { display:flex; gap:16px; flex-wrap:wrap; }
 
 /* ==================== BUTTONS ==================== */
@@ -100,10 +100,12 @@ a { color:inherit; text-decoration:none; }
 .divider { line-height:0; margin:0; overflow:hidden; }
 .divider svg { display:block; width:100%; height:auto; }
 .divider-chevron { background:var(--alt-solid); }
+.divider-chevron-dark { background:var(--navy); }
 .divider-diagonal { background:var(--base); }
 .divider-diagonal-dark { background:var(--base); }
 .divider-gradient-alt-to-base { height:40px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
 .divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
+.divider-gradient-dark-to-alt { height:60px; background:linear-gradient(to bottom, var(--navy), var(--alt-solid)); }
 
 /* ==================== GRID ==================== */
 .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@@ -115,6 +117,13 @@ a { color:inherit; text-decoration:none; }
 .problem-card h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
 .problem-card p { font-size:0.93rem; color:var(--text-light); line-height:1.6; }
 
+/* Problem dark variant */
+.problem-card-dark { color:var(--white); }
+.problem-card-dark h3 { color:var(--white); }
+.problem-card-dark p { color:rgba(255,255,255,0.7); }
+.problem-icon-dark { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); box-shadow:none; }
+.problem-icon-dark img { filter:brightness(0) invert(1); }
+
 /* ==================== WORKFLOW ==================== */
 .workflow { display:flex; align-items:flex-start; justify-content:center; margin-top:56px; }
 .workflow-step { flex:1; max-width:300px; text-align:center; padding:0 24px; }
@@ -141,6 +150,13 @@ a { color:inherit; text-decoration:none; }
 .live-stat-value { display:block; font-size:2.4rem; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-0.02em; }
 .live-stat-label { display:block; font-size:0.8rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }
 
+/* ==================== FEATURE HIGHLIGHT ==================== */
+.feature-highlight { display:flex; align-items:center; gap:28px; background:var(--white); border-radius:var(--radius-lg); padding:32px 36px; margin-bottom:32px; box-shadow:var(--shadow-lg); border-left:4px solid var(--gold); }
+.feature-highlight-icon { width:64px; height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(200,168,81,0.1); border-radius:var(--radius); }
+.feature-highlight-content h3 { font-size:1.2rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
+.feature-highlight-content p { font-size:0.95rem; color:var(--text-light); line-height:1.6; }
+@media(max-width:768px) { .feature-highlight { flex-direction:column; text-align:center; padding:24px 20px; } .feature-highlight-icon { margin:0 auto; } }
+
 /* ==================== 3D CAROUSEL ==================== */
 .carousel-viewport { overflow-x:clip; overflow-y:visible; padding:20px 0; position:relative; }
 .carousel-track { display:flex; justify-content:center; position:relative; }

vorschau/index.html

@@ -102,10 +102,43 @@
     </section>
 
     <!-- Chevron: Hero -> Demos -->
-    <div class="divider divider-chevron">
+    <div class="divider divider-chevron-dark">
         <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,0 L720,80 L1440,0 L1440,0 L0,0 Z" fill="#0A1832"/></svg>
     </div>
 
+    <!-- Problem Statement (dark) -->
+    <section class="section section-dark" id="problem">
+        <div class="container">
+            <h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
+            <div class="grid-3">
+                <div class="problem-card problem-card-dark">
+                    <div class="problem-icon problem-icon-dark">
+                        <img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
+                    </div>
+                    <h3>Tausende Quellen</h3>
+                    <p>Hunderte Quellen in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
+                </div>
+                <div class="problem-card problem-card-dark">
+                    <div class="problem-icon problem-icon-dark">
+                        <img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
+                    </div>
+                    <h3>Zeitdruck</h3>
+                    <p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
+                </div>
+                <div class="problem-card problem-card-dark">
+                    <div class="problem-icon problem-icon-dark">
+                        <img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
+                    </div>
+                    <h3>Informationsflut</h3>
+                    <p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gradient: Problem -> Workflow -->
+    <div class="divider divider-gradient-dark-to-alt"></div>
+
     <!-- Solution / Workflow -->
     <section class="section section-alt" id="solution">
         <div class="container">
@@ -140,7 +173,7 @@
         <div class="container">
             <!-- Live Stats Bar -->
             <div class="live-stats-bar">
-                <div class="live-stats-title">Grosslage - Irankonflikt</div>
+                <div class="live-stats-title">Großlage - Irankonflikt</div>
                 <div class="live-stats-row">
                     <div class="live-stat">
                         <span class="live-stat-value" id="stat-articles">...</span>
@@ -201,40 +234,6 @@
         </div>
     </section>
 
-    <!-- Gradient: Demos -> Problem -->
-    <div class="divider divider-gradient-alt-to-base"></div>
-
-    <!-- Problem Statement -->
-    <section class="section section-base" id="problem">
-        <div class="container">
-            <h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
-            <div class="grid-3">
-                <div class="problem-card">
-                    <div class="problem-icon">
-                        <img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
-                    </div>
-                    <h3>Tausende Quellen</h3>
-                    <p>Hunderte Quellen in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
-                </div>
-                <div class="problem-card">
-                    <div class="problem-icon">
-                        <img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
-                    </div>
-                    <h3>Zeitdruck</h3>
-                    <p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
-                </div>
-                <div class="problem-card">
-                    <div class="problem-icon">
-                        <img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
-                    </div>
-                    <h3>Informationsflut</h3>
-                    <p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
 
     <!-- Gradient: Solution -> Features -->
     <div class="divider divider-gradient-alt-to-base"></div>
@@ -243,6 +242,17 @@
     <section class="section section-base" id="features">
         <div class="container">
             <h2 class="section-title">Was der Monitor leistet</h2>
+            <!-- Highlight: Faktenprüfung -->
+            <div class="feature-highlight">
+                <div class="feature-highlight-icon">
+                    <img src="/assets/images/icons/check-circle-filled.svg" alt="" width="48" height="48">
+                </div>
+                <div class="feature-highlight-content">
+                    <h3>Automatische Faktenprüfung</h3>
+                    <p>Jede zentrale Aussage wird automatisch gegen unabhängige Quellen verifiziert. Mit Statusverlauf, Evidenz und Quellenbelegen.</p>
+                </div>
+            </div>
+
             <div class="grid-3">
                 <div class="feature-card">
                     <div class="feature-icon">
@@ -251,13 +261,7 @@
                     <h3>Echtzeit-Monitoring</h3>
                     <p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
                 </div>
-                <div class="feature-card">
+
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/check-circle.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Automatische Faktenprüfung</h3>
-                    <p>Jede zentrale Aussage wird gegen unabhängige Quellen verifiziert.</p>
-                </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
@@ -334,7 +338,7 @@
                 </div>
                 <div class="trust-card">
                     <div class="trust-icon-wrap">
-                        <img src="/assets/images/icons/clock.svg" alt="" width="48" height="48">
+                        <img src="/assets/images/icons/shield-check.svg" alt="" width="48" height="48">
                     </div>
                     <h3>Nachhaltigkeit</h3>
                     <p>Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen</p>
@@ -343,9 +347,6 @@
         </div>
     </section>
 
-
-
-
     <!-- Footer -->
     <footer class="footer">
         <div class="container">