Typografie

H1 – Präzise Headlines mit Barlow Condensed

Lead-Text: klar, kontraststark, gut lesbar. Fließtext bleibt Source Sans Pro 18px.

H2 – Schlank, linear, ausdrucksstark

Standardabsatz. Sichtbarer Link. Fett und kursiv zur Betonung. Kleine Hinweise (Meta-Text).

Stil	Font	Größe	Gewicht	Beispiel
H1	Barlow Condensed	`2.8rem`	700	Mehr Leads. Weniger Reibung.
H2	Barlow Condensed	`2.2rem`	700	Schnell zur Anfrage
H3	Barlow Condensed	`1.8rem`	700	CTA im Fokus
Body	Source Sans Pro	`1rem`	400	Lesbarer Fließtext
Small	Source Sans Pro	`.9rem`	400	Hinweis / Label

Farben

Hintergrund
#FDFDFD

Sehr hell. Text dunkel für AA/AAA je nach Größe.

Text
#1A1A1A

Primärtext. Kontrast >> 7:1.

CTA
#FFB400

Buttons, Highlights. Textfarbe #1e1e1e.

Akzent Rot
#B80000

Linien, Border-Left, Unterstreichungen.

Card
#FFFFFF

Panele, Module, Formularflächen.

Border
#DDDDDD

Dezente Trennlinien.

Komponenten

CTA #FFB400 auf hell mit dunklem Text erfüllt AA.

Name E-Mail Nachricht

Beispiel-Link im Textfluss.

Textboxen über Bildern

Heller Scrim, roter Border-Left, sichere Lesbarkeit.

CTA warm, nicht aufdringlich.

Hinweis: Auf sehr hellem Bild ggf. Deckkraft des Scrims leicht erhöhen (rgba(255,255,255,.9)).

Richtlinien

Kontrast: Text auf #FDFDFD in #1A1A1A ≥ 7:1; CTA-Text auf Amber dunkel (#1e1e1e).
Rot #B80000 nur für Linien, Marker, Unterstreichungen.
Max. ein primärer CTA pro Abschnitt. Sekundär als Ghost/Alt.
Typo: H1–H3 fett (700), H4–H5 mittel (500), H6 leicht (300). Body 400.
Spacing: var(--sp-…) einsetzen; keine harten Pixel.
Radius: Karten 16px, Inputs/Buttons 10–12px.