BDGE

# Design-Brief: Neo-Brutalismus

Kräftige schwarze Konturen, harte versetzte Schatten und hochgesättigte Farbblöcke.

## Design-Tokens

```css
:root {
  --background: #082530;
  --surface: #193f56;
  --foreground: #f8f4e9;
  --muted-foreground: #a9cdd5;
  --accent: #fa5d7b;
  --radius: 4px;
  --font-heading: "Archivo Black", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
}
```

Farbflächenverhältnis: Hintergrund #082530 (~64%) · Oberfläche #193F56 (~7%) · Text #F8F4E9 (~18%) · Gedämpfter Text #A9CDD5 (~1%) · Akzent #FA5D7B (~10%). Hintergrund und Oberfläche dominieren die Fläche; reservieren Sie die Akzentfarbe für primäre Buttons und aktive Zustände.

## Layout- & Conversion-Struktur

- Hero-Layout: Vollbild-Canvas / Video / 3D
- Navigation: Volle Kopfzeile
- Theme & Dichte: Dunkel · Ausgewogen
- Eckenradius & Tiefe: Kleiner Radius; Ebenen durch dezente Schatten trennen
- Primäres visuelles Medium: Reine Typografie & Geometrie
- Conversion-CTA: Kostenlos starten / Registrieren
- Headline-Hook: Markenmanifest & Neugier
- Hinweise zum räumlichen Layout: Vollbild-Canvas / Video / 3D-Hero-Struktur kombiniert mit Kostenlos starten / Registrieren-CTA und Keine explizite Vertrauensleiste.
- Visuelle Zusammenfassung: Neo-Brutalismus (Dunkel-Hintergrund, Dichte: Ausgewogen) mit Vollbild-Canvas / Video / 3D-Layout und Reine Typografie & Geometrie-Visuals.

## Vermeiden

- Weiche, verschwommene Schatten
- Kontrastarme Grau-auf-Grau-Rahmen
- Subtiler, durchscheinender Glassmorphismus

Implementieren Sie die Oberfläche gemäß den obigen Design-Tokens und Layout-Vorgaben: Verwenden Sie ausschließlich diese Farbvariablen und reservieren Sie die Akzentfarbe strikt für primäre Aktionen und aktive Zustände. Übernehmen Sie nur diesen visuellen Stil — kopieren Sie niemals Markennamen, Logos, Texte oder Bilder von Referenzprodukten.