Inital commit

BRANDING-GUIDE.md

@@ -0,0 +1,100 @@
+# 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
+