diff --git a/vorschau/css/style.css b/vorschau/css/style.css
index 491bf12..4c58ddd 100644
--- a/vorschau/css/style.css
+++ b/vorschau/css/style.css
@@ -139,6 +139,7 @@ a { color:inherit; text-decoration:none; }
 .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-base-to-alt { height:60px; background:linear-gradient(to bottom, var(--base), var(--alt-solid)); }
 .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)); }
 
@@ -172,12 +173,20 @@ a { color:inherit; text-decoration:none; }
 .workflow-connector { width:60px; height:2px; background:var(--gold); margin-top:23px; flex-shrink:0; opacity:0.4; }
 
 /* ==================== FEATURES ==================== */
-.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s; }
+.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s,background 0.3s; border:1px solid transparent; }
 .feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
-.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; }
+.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; border:1px solid transparent; }
 .feature-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
 .feature-card p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
 
+/* Features im dunklen Section-Kontext: Glasmorphism mit Gold-Akzent */
+.section-dark .feature-card { background:rgba(255,255,255,0.04); border-color:rgba(200,168,81,0.2); box-shadow:none; }
+.section-dark .feature-card:hover { border-color:rgba(200,168,81,0.5); background:rgba(255,255,255,0.06); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
+.section-dark .feature-card h3 { color:var(--white); }
+.section-dark .feature-card p { color:rgba(255,255,255,0.7); }
+.section-dark .feature-icon { background:rgba(200,168,81,0.15); border-color:rgba(200,168,81,0.3); }
+.section-dark .feature-icon img { filter:brightness(0) saturate(100%) invert(74%) sepia(49%) saturate(471%) hue-rotate(2deg) brightness(91%) contrast(83%); }
+
 /* ==================== DEMOS SECTION ==================== */
 #demos { padding-top:48px; }
 
@@ -193,6 +202,8 @@ a { color:inherit; text-decoration:none; }
 .feature-statement { text-align:center; max-width:700px; margin:0 auto 48px; padding:0 24px; }
 .feature-statement-text { font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:12px; letter-spacing:-0.01em; }
 .feature-statement-sub { font-size:1rem; color:var(--text-light); line-height:1.6; }
+.section-dark .feature-statement-text { color:var(--white); }
+.section-dark .feature-statement-sub { color:rgba(255,255,255,0.7); }
 @media(max-width:768px) { .feature-statement-text { font-size:1.3rem; } }
 
 /* ==================== 3D CAROUSEL ==================== */
diff --git a/vorschau/index.html b/vorschau/index.html
index c6a21dc..5c3731e 100644
--- a/vorschau/index.html
+++ b/vorschau/index.html
@@ -174,28 +174,82 @@
         </div>
     </section>
 
-    <!-- Problem Statement (dark) -->
-    <section class="section section-dark" id="problem">
+    <!-- Features -->
+    <section class="section section-dark" id="features">
+        <div class="container">
+            <h2 class="section-title">Was der Monitor leistet</h2>
+            <!-- Highlight: Faktenprüfung -->
+            <div class="feature-statement">
+                <p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
+                <p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
+            </div>
+
+            <div class="grid-3">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
+                    </div>
+                    <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/cube.svg" alt="" width="36" height="36">
+                    </div>
+                    <h3>Quellenanalyse</h3>
+                    <p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
+                    </div>
+                    <h3>Geografische Verortung</h3>
+                    <p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
+                    </div>
+                    <h3>Mehrsprachige Auswertung</h3>
+                    <p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
+                    </div>
+                    <h3>Strukturierte Lagebilder</h3>
+                    <p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gradient: Features -> Problem -->
+    <div class="divider divider-gradient-dark-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>
-            <p class="section-subtitle section-subtitle-light">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
+            <p class="section-subtitle">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
             <div class="grid-3">
-                <div class="problem-card problem-card-dark">
-                    <div class="problem-icon problem-icon-dark">
+                <div class="problem-card">
+                    <div class="problem-icon">
                         <img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
                     </div>
                     <h3>Quellenvielfalt</h3>
                     <p>Hunderte Nachrichtenagenturen, Telegram-Kanäle und soziale Medien in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
                 </div>
-                <div class="problem-card problem-card-dark">
-                    <div class="problem-icon problem-icon-dark">
+                <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 problem-card-dark">
-                    <div class="problem-icon problem-icon-dark">
+                <div class="problem-card">
+                    <div class="problem-icon">
                         <img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
                     </div>
                     <h3>Informationsflut</h3>
@@ -206,7 +260,7 @@
     </section>
 
     <!-- Gradient: Problem -> Workflow -->
-    <div class="divider divider-gradient-dark-to-alt"></div>
+    <div class="divider divider-gradient-base-to-alt"></div>
 
     <!-- Solution / Workflow -->
     <section class="section section-alt" id="solution">
@@ -311,63 +365,6 @@
         </div>
     </section>
 
-
-    <!-- Gradient: Solution -> Features -->
-    <div class="divider divider-gradient-alt-to-base"></div>
-
-    <!-- Features -->
-    <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-statement">
-                <p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
-                <p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
-            </div>
-
-            <div class="grid-3">
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
-                    </div>
-                    <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/cube.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Quellenanalyse</h3>
-                    <p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Geografische Verortung</h3>
-                    <p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Mehrsprachige Auswertung</h3>
-                    <p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Strukturierte Lagebilder</h3>
-                    <p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-
     <!-- Contact CTA -->
     <section class="section section-base" id="contact">
         <div class="container cta-container">