Bring back the dark bands for offer and contact

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>
This commit is contained in:
Lara 2026-10-05 09:56:29 +02:00
parent 85c63cd714
commit c2e0b22977
2 changed files with 38 additions and 3 deletions

View file

@ -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>

View file

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