# HexaHost Branding Guide

Dieser Guide basiert auf dem bestehenden Design aus `HexaHost-Frontend` und `HexaHost-Backend`.
Nutze ihn als Standard für neue Projekte, damit Optik, Struktur und Tonalität konsistent bleiben.

## 1) Markenidentität

- Positionierung: Zuverlässiges Hosting mit persönlichem Support aus Deutschland.
- Tonalität: Klar, direkt, professionell, vertrauensvoll.
- Bildsprache: Modern, technisch, leicht futuristisch (Glassmorphism + Neon-Akzente).

## 2) Farben

Primäre Farben:

- Hintergrund: `#0d0821`
- Primary: `#ff51f9`
- Accent Violet: `#a348ff`
- Accent Blue: `#3978ff`
- Highlight: `#f093ff`

Weitere Farben:

- Success: `#32fba2`
- Warning: `#ffcc00`
- Error: `#ff4d6d`
- Text Primary: `#ffffff`
- Text Secondary: `#cfc9dd`

Designprinzip:

- Dunkler Hintergrund + leuchtende Akzente.
- Gradient-Buttons für wichtige CTAs.
- Transparente Karten mit Blur für Tiefe.

## 3) Typografie

- Hauptschrift: `Inter` (Body, Navigation, UI)
- Logo/Brand: `Russo One` (nur sparsam nutzen)
- Sekundär: `Source Sans Pro` (optional für Slogans)

Empfohlene Größen:

- H1: `3rem`
- H2: `2.25rem`
- H3: `1.5rem`
- Body: `1rem`
- Small: `0.875rem`

## 4) Layout und Spacing

- Container-Breite: `1200px`
- Standard-Abstand horizontal: `1.5rem`
- Sektionen: `3rem` bis `4rem` vertikales Padding
- Radius: `0.75rem` bis `1.5rem`

## 5) Komponenten

- Header: Fixiert mit Blur-Hintergrund.
- Buttons:
  - Primary: Pink/Violett-Gradient
  - Secondary: Glas-Look mit Border
- Cards: `.glass-card` mit Blur, Border und Shadow.
- Footer: 3-4 Spalten mit Produkt-, Firmen- und Support-Links.

## 6) Inhaltsstruktur (Seiten)

Jede neue Marketing-Seite sollte diese Reihenfolge nutzen:

1. Hero (Claim + CTA)
2. Leistungs- oder Produktsektion
3. Vorteilsektion
4. Vertrauens-/Support-Sektion
5. Abschließende CTA
6. Footer

## 7) Text- und CTA-Regeln

- CTAs immer aktiv formulieren:
  - "Jetzt starten"
  - "Produkte entdecken"
  - "Kontakt aufnehmen"
- Pro Abschnitt ein klares Ziel.
- Kurze, konkrete Nutzenargumente statt technischer Überladung.

## 8) Technische Standards

- Wiederverwendbare Includes für Header/Footer nutzen.
- Styles zentral in `assets/css/style.css`.
- JS nur für Interaktion (Navigation, Accordions, Form-Hinweise).
- Performance: Preconnect für Fonts/CDN und CSS früh laden.

## 9) Template-Nutzung

Verwende den Ordner `HexaHost-Template-Website` als Startpunkt:

- `public/index.php` als Basisseite
- `includes/header.php` und `includes/footer.php` für einheitliches Layout
- `assets/css/style.css` für Designsystem und Komponenten