create styleguide.

1. 1Establishes an expert role in brand strategy and UI/UX design to enforce technical depth and tone.
2. 2Uses seven input variables covering brand name, industry, target audience, aesthetic, and existing assets.
3. 3Requires output across eight chapters, ranging from logo rules and typography to interactive UI components.
4. 4Enforces concrete technical parameters including an 8px spacing grid, rem/px units, and WCAG AA contrast compliance.

# Role & Context
Du agierst als erfahrener **Brand Strategist und Senior UI/UX Designer**. Deine Aufgabe ist es, einen umfassenden, ästhetischen und praxisnahen **Digitalen Styleguide (Design System Foundation)** für eine Website zu erstellen. Dein Ziel ist es, visuelle Konsistenz, Barrierefreiheit (Accessibility) und eine hohe Usability sicherzustellen.

# Input-Variablen (Bitte nutze diese als Basis)
1. WEBSITE-/MARKENNAME: [Name einfügen]
2. BRANCHE/NICHE: [Branche einfügen]
3. ZIELGRUPPE: [Zielgruppe beschreiben]
4. MARKENPERSÖNLICHKEIT: [3-5 Adjektive]
5. GEWÜNSCHTE ÄSTHETIK/VIBE: [Look & Feel beschreiben]
6. HAUPTZIEL DER WEBSITE: [Ziel definieren]
7. BESTEHENDE ASSETS: [Falls vorhanden, z.B. Logofarben, sonst "Keine"]

---

# Aufgabe
Erstelle den Styleguide strukturiert in den folgenden Kapiteln. Sei präzise. Liefere konkrete technische Werte (HEX-Codes, Pixel/REM-Werte). Formatiere die Ausgabe sauber in Markdown.

## 1. Grundlagen & Prinzipien
* Verfasse eine prägnante Zusammenfassung der Markenpersönlichkeit.
* Formuliere **3 zentrale Design-Prinzipien**, die als Leitplanken für alle Designentscheidungen dienen (ableitet aus Persönlichkeit und Website-Ziel).

## 2. Logo-Richtlinien
* Beschreibe die Hierarchie: Hauptlogo vs. Icon/Favicon.
* Definiere Regeln für den **Schutzraum (Clear Space)** (z.B. basierend auf der x-Höhe oder einem fixen Wert).
* Liste **3 explizite "Don'ts"** auf (häufige Fehler, die vermieden werden müssen).

## 3. Farbpalette & Barrierefreiheit
Entwickle ein harmonisches Farbschema. Gib für jede Farbe den **HEX-Code** und einen semantischen Namen an (z.B. `primary-500`).
* **Primärfarbe(n):** Hauptmarkenfarbe.
* **Sekundär-/Akzentfarbe(n):** Speziell für Call-to-Actions (CTAs) und Highlights.
* **Neutrale Farben:** Eine Abstufung von Grautönen für Text, Hintergründe und Rahmen (z.B. Gray-50 bis Gray-900).
* **Systemfarben:** Farben für Statusmeldungen (Success/Green, Warning/Yellow, Error/Red).
* *Wichtig:* Bestätige kurz, dass die Textfarben auf den Hintergrundfarben den **WCAG AA Standard** für Kontrast erfüllen.

## 4. Typografie
Wähle 1-2 passende Schriftarten (bevorzugt Google Fonts oder gängige Webfonts).
Erstelle eine **Typografische Skala** (Type Scale). Gib Werte für `font-size` (in rem und px), `line-height` und `font-weight` an für:
* **H1, H2, H3, H4** (Überschriften)
* **Body Copy / P** (Fließtext - Ziel: optimale Lesbarkeit)
* **Button Text** (oft Uppercase oder Bold)
* **Caption / Small Text**

## 5. Layout, Raster & Abstände
* Definiere ein **Spacing-System** (bevorzugt basierend auf einem 8px Grid). Nenne konkrete Variablen (z.B. `spacing-s = 8px`, `spacing-m = 16px`, `spacing-l = 32px`, `spacing-xl = 64px`).
* Beschreibe die Grundstruktur: Maximale Containerbreite (z.B. 1200px oder 1440px) und Spalten-Setup (Grid).

## 6. Bildsprache & Ikonografie
* **Ikonografie:** Definiere den Stil (z.B. Solid vs. Outline, Strichstärke, Eckenradius).
* **Fotografie/Illustration:** Beschreibe das gewünschte "Look & Feel". Welche Emotionen sollen Bilder wecken? (z.B. "Natürliches Licht, authentische Menschen, keine gestellten Stock-Fotos").

## 7. Stimme & Tonalität (Voice & Tone)
* Beschreibe die **Voice** (Grundsätzlicher Charakter der Marke).
* Lege die **Ansprache** fest (Du vs. Sie).
* Gib ein Beispiel für den **Tone** in zwei Situationen:
    1.  Eine motivierende Marketing-Headline.
    2.  Eine hilfreiche Fehlermeldung (z.B. bei falschem Login).

## 8. Komponenten (UI-Elemente)
Definiere die visuellen Eigenschaften für die wichtigsten Elemente:
* **Buttons:** Primär vs. Sekundär. Definiere `border-radius`, `padding` und den visuellen Effekt beim `hover`-Zustand.
* **Inputs:** Rahmenfarbe, Hintergrund, Label-Positionierung und Fokus-Zustand.