# StarHero24 – Design-Konzept

## Drei Stilrichtungen

### Option A – "Corporate Authority"
Klassisches B2B-Unternehmensdesign mit Navy-Dominanz, klaren Linien und institutioneller Seriosität.
**Probability:** 0.07

### Option B – "Digital Precision" ← GEWÄHLT
Modernes SaaS-Unternehmensdesign mit technischer Präzision: Navy-Dunkelblau als Basis, Google-Blau als Akzent, viel Weißraum, geometrische Elemente und datengetriebene Visualisierungen. Wirkt wie eine Premium-Software-Firma, nicht wie eine Marketing-Agentur.
**Probability:** 0.03

### Option C – "Trust Architecture"
Architektonisch inspiriertes Design mit starken vertikalen Linien, monumentaler Typografie und Schwarz/Weiß-Basis mit blauem Akzent.
**Probability:** 0.06

---

## Gewählter Ansatz: "Digital Precision"

### Design Movement
Corporate SaaS / Enterprise Software – inspiriert von Stripe, Linear, Notion. Technische Eleganz trifft institutionelle Autorität.

### Core Principles
1. **Präzision über Dekoration** – Jedes Element hat eine Funktion. Keine ornamentalen Elemente.
2. **Daten als Vertrauen** – Zahlen, Statistiken und Visualisierungen schaffen Glaubwürdigkeit.
3. **Weißraum als Luxus** – Großzügige Abstände signalisieren Premium-Positionierung.
4. **Asymmetrische Spannung** – Layouts brechen die Symmetrie bewusst auf, um Dynamik zu erzeugen.

### Color Philosophy
- **Navy #0A1628** – Primäre Hintergrundfarbe für Hero und dunkle Sektionen. Signalisiert Seriosität, Vertrauen, Professionalität.
- **Google Blue #1A73E8** – Akzentfarbe für CTAs, Highlights, interaktive Elemente. Verbindet visuell mit Google.
- **Weiß #FFFFFF** – Haupthintergrund für Content-Sektionen. Schafft Atemraum.
- **Cool Gray #F8FAFC / #E2E8F0** – Dezente Hintergründe für Karten und Sektions-Trennung.
- **Slate #64748B** – Sekundärer Text, Labels, Metadaten.

### Layout Paradigm
Asymmetrisches Split-Layout im Hero (Text links, visuelle Demo rechts). Sektionen wechseln zwischen dunklem Navy-Hintergrund und weißem Hintergrund. Karten-Grid mit subtilen Schatten. Keine zentrierten Layouts außer bei Testimonials.

### Signature Elements
1. **Google-Bewertungs-Mockup** – Realistische UI-Darstellung von Google-Bewertungen als visuelles Kernelement
2. **Vorher/Nachher-Slider** – Interaktiver Beweis der Wirksamkeit
3. **Schwebende Stat-Karten** – Zahlen-Badges die über Hero-Visuals schweben

### Interaction Philosophy
Subtle hover-Effekte auf Karten (leichtes Anheben). Smooth Scroll-Animationen beim Einblenden von Sektionen. CTA-Buttons mit leichtem Scale-Effekt. Keine übertriebenen Animationen.

### Animation
- Entrance: Fade-in + translateY(20px) → 0 beim Scrollen, 400ms ease-out
- Cards: hover → translateY(-4px) + box-shadow-intensivierung, 200ms
- CTA-Buttons: active → scale(0.97), 160ms
- Zahlen-Counter: Animate on scroll (count-up)

### Typography System
- **Headlines:** "Plus Jakarta Sans" – Modern, geometrisch, selbstbewusst. Weights 700/800.
- **Body:** "Inter" – Lesbar, neutral, professionell. Weights 400/500.
- **Mono/Labels:** System-Monospace für technische Elemente.
- Headline-Hierarchie: 64px / 48px / 36px / 24px
- Body: 16px/1.7 für Fließtext

### Brand Essence
**StarHero24 ist der vertrauenswürdigste Partner für Unternehmen, die ihre Google-Reputation rechtssicher schützen wollen – präzise, diskret, erfolgreich.**
Persönlichkeit: Kompetent · Diskret · Verlässlich

### Brand Voice
Direkt, sachlich, ohne Übertreibung. Fakten statt Versprechen.
- Headline-Beispiel: "Negative Google-Bewertungen professionell entfernen lassen."
- CTA-Beispiel: "Kostenlose Erstberatung anfordern"
- Verboten: "Revolutionär", "Weltklasse", "Unschlagbar"

### Wordmark & Logo
Geometrisches Sternzeichen (5-zackig, minimal, als Monogramm) + "StarHero24" in Plus Jakarta Sans Bold. Navy auf Weiß / Weiß auf Navy.

### Signature Brand Color
**Navy #0A1628** – Unverwechselbar, institutionell, vertrauenswürdig.