Style-Guide

1 · Hauptmenü, Submenüs & Mobile-Drawer

Den Live-Header siehst Du oben in dieser Page. Hover über die Hauptmenü-Punkte öffnet die Mega-Menüs. Vorschläge zur Header- Optik kommen in einem separaten Schritt — erst Buttons + Kacheln.

Header: Backdrop-Filter blur(6px) saturate(300%)
Mega-Menü: Border-Radius 12 px, Padding 28 px
Mega-Menü Icon-Container: 40×40 px, Border-Radius 8 px
Featured-CTA im Mega-Menü: Border-Radius 10 px
Mobile-Drawer-CTA: Border-Radius 8 px
Burger-Button: 44×44 px, 3-Lines-Animation zu X

2 · Buttons

Aktuell 5 verschiedene Border-Radius-Werte (0/6/8/10/999) plus eine 0→20-Animation. Vorschlag: überall Radius 0, Hover-Effekt einheitlich als box-shadow inset-Strich (analog Variante C). Kein Lift, kein Outer-Shadow, kein Gradient.

Primary — HomeHero CTA

Aktuell

Projekt besprechen

Radius 10 px · Solid Lila · Hover-Lift -2 px + Outer-Shadow

Vorschlag

Projekt besprechen

Radius 0 · Solid Lila · Hover: harter schwarzer Offset-Schatten 4×4 px

Primary — HomeContactCTA Pill

Aktuell

Primärer CTA

Radius 999 px · Lila→Pink-Gradient (#7500EC → #a855f7) · Hover-Lift

Vorschlag

Primärer CTA

Radius 0 · Solid CI-Lila (kein Gradient) · Hover: schwarzer Offset-Schatten 4×4 px

Primary — Mobile-Header-CTA

Aktuell

Kontakt

Radius 8 px · Solid Lila

Vorschlag

Kontakt

Radius 0 · Solid Lila · Hover: schwarzer Offset-Schatten 4×4 px

Secondary — HomeHero Outline

Aktuell

Mehr erfahren

Radius 10 px · Outline 2 px · Hover: Lift + Background-Invert

Vorschlag

Mehr erfahren

Radius 0 · Outline 1 px · Hover: Background-Invert (kein Lift)

Secondary auf dunklem Background — HomeContactCTA

Aktuell

Sekundärer CTA

Radius 999 px · weißer Tint

Vorschlag

Sekundärer CTA

Radius 0 · weißer Tint · Hover: weißer Offset-Schatten 4×4 px

Standard-Button mit 0 → 20 Hover-Animation

Diese Variante steckt in vier Komponenten (ProjectsGrid, Testimonials, ContactBoxes, ContactCTA). Die Radius-Animation wird abgelöst.

Aktuell

Mehr Projekte

Radius 0 → 20 px Hover · Background-Invert

Vorschlag

Mehr Projekte

Radius 0 konstant · Hover: Background-Invert (keine Radius-Animation)

Pill-Outline (Reviews)

Aktuell

Alle Reviews ansehen

Radius 999 px · Outline 1 px

Vorschlag

Alle Reviews ansehen

Radius 0 · Outline 1 px · Hover: Background-Invert

Pill-Solid (HomeProjekte More-Link)

Aktuell

Mehr Projekte

Radius 999 px · Solid Lila · Hover-Lift -2 px

Vorschlag

Mehr Projekte

Radius 0 · Solid Lila · Hover: schwarzer Offset-Schatten 4×4 px

Hover-Varianten — Solid-Lila Buttons

Alternativen zum Offset-Schatten. Hover über jede Variante zum Vergleichen — die gewählte Mechanik gilt dann für alle Solid-Lila Buttons (Hero, CTA, Mobile, Pill-Solid).

Offset-Schatten

1 · Aktueller Vorschlag
Hover: 4×4 px schwarzer Offset-Schatten · Brutalist-light

BG → Schwarz

2 · Background-Invert
CI-Lila → Solid Schwarz · klassisch klar

BG → Dunkel-Lila

3 · Brand-Shift
#7500EC → #3D0080 · subtil, bleibt im CI-Spektrum

Innerer Ring

4 · Inset-Border
2 px schwarzer Ring innen · kein Layout-Shift

Strich-Akzent

5 · Schwarzer Strich
2 → 6 px Strich-Inset · konsistent zur Card-Sprache

Anchor-Link „Mehr erfahren →" — bleibt

Aktuell

Mehr erfahren

Mono-Caps · CI-Lila · Pfeil rückt 4 px bei Hover

Vorschlag

Mehr erfahren

Identisch — passt schon zur Editorial-Linie

3 · Kacheln & Cards

BentoTile-Familie + Live-Beispiel HomeLeistungen Variante C (bereits umgesetzt). Vorschlag durchgängig: 0 Radius, Off-White oder zartes Lila als Background, Box-Shadow inset 2 → 6 px als Hover-Akzent statt Lift + Outer-Shadow.

BentoTile — Default

Aktuell

Default

Standard-Tile

Beispieltext, wie er aktuell auf der Startseite eingesetzt ist.

Radius 20 px · weißer BG · Lila-Tint Border · Hover-Lift -4 px + Shadow

Vorschlag

Default

Standard-Tile

Beispieltext, wie er aktuell auf der Startseite eingesetzt ist.

Radius 0 · Off-White BG · Box-Shadow inset 2 → 6 px CI-Lila Strich

BentoTile — Hero (großes Padding)

Aktuell

Hero-Variante

Größeres Padding

Hero-Variante hebt sich durch mehr Innenraum hervor.

Radius 20 px · größeres Padding · Hover-Lift -6 px

Vorschlag

Hero-Variante

Größeres Padding

Hero-Variante hebt sich durch mehr Innenraum hervor.

Radius 0 · Off-White · größeres Padding bleibt · Strich-Akzent

BentoTile — Dark

Aktuell

Dark

Dunkler Tile

Dunkler Hintergrund #0b0b0d, weißer Text.

Radius 20 px · Hover-Lift

Vorschlag

Dark

Dunkler Tile

Dunkler Hintergrund #0b0b0d, weißer Text.

Radius 0 · Hover: weißer Strich-Akzent inset

BentoTile — Accent (aktuell Lila-Gradient)

Aktuell

Accent

Lila-Gradient

Mit #7500EC → #a855f7 (Tailwind-purple-500). Slop-Tell.

Radius 20 px · Lila→Pink-Gradient · Slop-Tell #1

Vorschlag

Accent

Akzent-Tile

Zartes Lila #F5EFFC + CI-Lila Strich (analog KI-Tile in Variante C).

Radius 0 · zartes Lila #F5EFFC · CI-Lila Strich · kein Gradient

HomeLeistungen-Card — Variante C (bereits umgesetzt)

Live-Beispiel der gewählten Variante C — der Pattern, an dem sich die anderen Vorschläge oben orientieren:

Live — Variante C

4 · Border-Radius-Inventur

Aktuell 13 verschiedene Werte. Vorschlag: Reduktion auf 3 Werte — 0 für alle eckigen Container und Buttons, 999 px für echte semantische Pills (z. B. Status-Badges/Tags), 50 % für Kreise (Stars, Avatare, Dots).

Wert Aktuell Vorschlag Verwendet bei

0 px 11× im Einsatz

bleibt

ContactBox, ContactCTA-Card, Standard-Buttons

2 px 1× im Einsatz

→ 0

SearchOverlay-Highlight

6 px 2× im Einsatz

→ 0

ProvenExpert-Widget, Nav Featured-CTA

8 px 4× im Einsatz

→ 0

Mobile-Header-CTA, Mega-Menu Icon-Container

10 px 4× im Einsatz

→ 0

HomeHero CTAs, Nav Featured-CTA

12 px 3× im Einsatz

→ 0

Icon-Container ContactBox + KPI, Mega-Menu

14 px 2× im Einsatz

→ 0

HomeLeistung Icon-Container (Outlier!)

16 px 3× im Einsatz

→ 0

HomeLeistung Card (alt), BentoTile-Mobile

20 px 8× im Einsatz

→ 0

BentoTile, Project-Category-Pill, Button-Hover-State

30 px 1× im Einsatz

→ 0

HomeHero Eyebrow

50 % 5× im Einsatz

bleibt

Glows, Stars, Nav-Dot

999 px 4× im Einsatz

bleibt

HomeContactCTA-Buttons, Reviews-Pills

1 · Hauptmenü, Submenüs & Mobile-Drawer

2 · Buttons

Primary — HomeHero CTA

Primary — HomeContactCTA Pill

Primary — Mobile-Header-CTA

Secondary — HomeHero Outline

Secondary auf dunklem Background — HomeContactCTA

Standard-Button mit 0 → 20 Hover-Animation

Pill-Outline (Reviews)

Pill-Solid (HomeProjekte More-Link)

Hover-Varianten — Solid-Lila Buttons

Anchor-Link „Mehr erfahren →" — bleibt

3 · Kacheln & Cards

BentoTile — Default

Standard-Tile

Standard-Tile

BentoTile — Hero (großes Padding)

Größeres Padding

Größeres Padding

BentoTile — Dark

Dunkler Tile

Dunkler Tile

BentoTile — Accent (aktuell Lila-Gradient)

Lila-Gradient

Akzent-Tile

HomeLeistungen-Card — Variante C (bereits umgesetzt)

Webdesign

Webseitenerstellung

Beratung

Hosting bei mittwald

4 · Border-Radius-Inventur