diff --git a/vorschau/css/style.css b/vorschau/css/style.css
index 4c58ddd..c40342f 100644
--- a/vorschau/css/style.css
+++ b/vorschau/css/style.css
@@ -435,3 +435,24 @@ a.dev-source-pill:hover {
     line-height: 1.45;
     color: #E8ECF4;
 }
+
+/* ==================== HELLIGKEITS-TONLEITER (Test) ==================== */
+/* Vier helle Sections in vier Helligkeitsstufen — Seite "atmet" beim Scrollen
+   sanft von hell nach kühler, mündet hart in den dunklen Footer. */
+:root {
+    --tone-1: #F5F7FA;  /* Problem (hellster) */
+    --tone-2: #ECF0F5;  /* Workflow */
+    --tone-3: #E4EAF1;  /* Demos */
+    --tone-4: #ECF2F9;  /* Contact (hell blau-grau-weiß, frischer Akzent vor Trust) */
+}
+#problem  { background: var(--tone-1); }
+#solution { background: var(--tone-2); }
+#demos    { background: var(--tone-3); }
+#contact  { background: var(--tone-4); }
+
+/* Divider-Übergänge an die Tonstufen anpassen (Adjacent-Sibling) */
+#problem + .divider  { background: linear-gradient(to bottom, var(--tone-1), var(--tone-2)); }
+#solution + .divider { background: linear-gradient(to bottom, var(--tone-2), var(--tone-3)); }
+#demos + .divider    { background: linear-gradient(to bottom, var(--tone-3), var(--tone-4)); height: 60px; }
+#contact + .divider  { background: var(--tone-4); }                                    /* diagonal-dark Contact->Trust, Top-Farbe an Contact angleichen */
+#trust { margin-top: -1px; }                                                           /* schließt Subpixel-Lücke zum Diagonal-Divider darüber */
diff --git a/vorschau/index.html b/vorschau/index.html
index fecad7c..b6750ce 100644
--- a/vorschau/index.html
+++ b/vorschau/index.html
@@ -365,7 +365,19 @@
         </div>
     </section>
 
-    <!-- Diagonal: Demos -> Trust -->
+    <!-- Gradient: Demos -> Contact -->
+    <div class="divider"></div>
+
+    <!-- Contact CTA -->
+    <section class="section section-base" id="contact">
+        <div class="container cta-container">
+            <h2 class="section-title">Interesse am AegisSight Monitor?</h2>
+            <p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
+            <button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
+        </div>
+    </section>
+
+    <!-- Diagonal: Contact -> Trust -->
     <div class="divider divider-diagonal-dark">
         <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#132844"/></svg>
     </div>
@@ -407,23 +419,6 @@
         </div>
     </section>
 
-    <!-- Gradient: Trust -> Contact -->
-    <div class="divider divider-gradient-dark-to-base"></div>
-
-    <!-- Contact CTA -->
-    <section class="section section-base" id="contact">
-        <div class="container cta-container">
-            <h2 class="section-title">Interesse am AegisSight Monitor?</h2>
-            <p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
-            <button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
-        </div>
-    </section>
-
-    <!-- Diagonal: Contact -> Footer -->
-    <div class="divider divider-diagonal-dark">
-        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#0A1832"/></svg>
-    </div>
-
     <!-- Footer -->
     <footer class="footer">
         <div class="container">