diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0a7174f..919f442 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -30,7 +30,7 @@ const { hero, warum, preis, highlights, leistungen, mappe, ablauf, about, faq, k
   </section>
 
   <!-- Preis / Startangebot -->
-  <section id="preis" class="section-tight">
+  <section id="preis" class="section-tight section-dark">
     <div class="container price-grid">
       <div class="price-main">
         <p class="eyebrow">{preis.eyebrow}</p>
@@ -231,7 +231,7 @@ const { hero, warum, preis, highlights, leistungen, mappe, ablauf, about, faq, k
   </section>
 
   <!-- Kontakt -->
-  <section id="kontakt" class="section-tight contact">
+  <section id="kontakt" class="section-tight section-dark contact">
     <div class="container contact-grid">
       <div class="contact-intro">
         <p class="eyebrow">{kontakt.eyebrow}</p>
@@ -296,7 +296,7 @@ const { hero, warum, preis, highlights, leistungen, mappe, ablauf, about, faq, k
         <button type="submit" class="btn btn-primary form-submit">Anfrage abschicken</button>
         <p class="form-note">
           Das Formular öffnet Ihr E-Mail-Programm mit fertig ausgefülltem Text. Es geht nichts an
-          Dritte. Wie wir mit Ihren Angaben umgehen, steht in der
+          Dritte. Wie wir mit Ihren Angaben umgehen, steht in der{' '}
           <a href="/datenschutz">Datenschutzerklärung</a>.
         </p>
       </form>
diff --git a/src/styles/global.css b/src/styles/global.css
index 24dd61f..6a5b7bd 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -196,6 +196,41 @@ textarea {
   padding-block: var(--space-7);
 }
 
+/* Dunkles Band (aus dem Prototyp "Nacht"): Angebot und Kontakt.
+   Die Farben werden hier als Variablen neu gesetzt, damit Text, Karten,
+   Buttons und Formularfelder darin automatisch mitdrehen - keine
+   Einzelregeln, die gegen Bauteilklassen verlieren koennten.
+   Kontraste auf #1E1A14: Text 15,0 · leise 9,9 · Gold 9,1 · Rand 3,8. */
+.section-dark {
+  --color-bg: #1e1a14;
+  --color-bg-alt: #2a241b;
+  --color-surface: #2a241b;
+  --color-text: #f5eee2;
+  --color-text-muted: #cfc2ac;
+  --color-border: #82755f;
+  --color-primary: #d8b87e;
+  --color-primary-dark: #e8d2a6;
+  --color-primary-contrast: #241c0b;
+  --color-accent: #d8b87e;
+  --color-accent-dark: #e8d2a6;
+  --color-flag: #e0836a;
+  --color-flag-bg: rgba(224, 131, 106, 0.14);
+  background: var(--color-bg);
+  color: var(--color-text);
+  padding-block: var(--space-9);
+}
+
+.section-dark h1,
+.section-dark h2,
+.section-dark h3 {
+  color: #fffaf2;
+}
+
+.section-dark ::placeholder {
+  color: #9a8f7b;
+  opacity: 1;
+}
+
 .eyebrow {
   display: inline-block;
   color: var(--color-primary);