create styleguide.

1. 1Definiert eine Expertenrolle für Markenstrategie und UI/UX-Design zur Vorgabe von Tonalität und Fachexpertise.
2. 2Nutzt sieben strukturierte Input-Variablen wie Markenname, Branche, Zielgruppe, Ästhetik und bestehende Assets.
3. 3Fordert die Ausarbeitung in acht standardisierten Kernkapiteln von Logo-Richtlinien über Typografie bis hin zu UI-Komponenten.
4. 4Setzt strikte technische Vorgaben wie ein 8px-Raster, Maßeinheiten in rem und px sowie Barrierefreiheit nach WCAG AA durch.

# 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.