From c2e0b229776e237656866c0509be4692f32da80d Mon Sep 17 00:00:00 2001
From: Lara <d-w.loehr@t-online.de>
Date: Mon, 5 Oct 2026 09:56:29 +0200
Subject: [PATCH] Bring back the dark bands for offer and contact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The original prototype broke up the light page with two dark "Nacht"
bands (#1E1A14): the offer right after the hero, and the contact at the
end. Restored as .section-dark, which redefines the color variables
instead of overriding single rules, so cards, buttons, form fields and
placeholders all turn with it. Measured in the rendered DOM: 42 text
elements, 0 WCAG AA failures; form field borders 3.41:1.

Also fixes the missing space in "der Datenschutzerklärung" below the
contact form (Astro dropped the line break before the link).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/pages/index.astro |  6 +++---
 src/styles/global.css | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

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);