Complete new Design and Structure

BYTEMALTE.md

@@ -0,0 +1,59 @@
+# 🎨 BYTEMALTE Design System v1.1
+
+Dieses Dokument definiert die visuelle Identität für alle Projekte von **ByteMalte**. Konsistenz vor Komplexität.
+
+---
+
+## 🌈 Farbpalette (Hex)
+
+| Rolle | Hex-Code | Kontrast (auf `#0F172A`) | Einsatzbereich |
+| :--- | :--- | :--- | :--- |
+| **Primary** | `#8888FF` | 5.7:1 | Buttons, Links, Brand-Elemente |
+| **Secondary** | `#3DDC84` | 7.0:1 | Success-Meldungen, Akzente, Tags |
+| **Background** | `#0F172A` | — | Haupt-Hintergrund (Dark Mode bevorzugt) |
+| **Surface** | `#1E293B` | — | Karten, Sektionen, Modals |
+| **Text (High)** | `#F8FAFC` | 15.4:1 | Überschriften, Fließtext |
+| **Text (Muted)** | `#B0BDD0` | 7.2:1 | Beschreibungen, Footer, sekundärer Text |
+| **Accent/Error** | `#EF4444` | 4.5:1 | Fehler, Löschen-Buttons |
+
+> Alle Farben erfüllen WCAG AA (mindestens 4.5:1 für normalen Text, 3:1 für großen Text).
+
+---
+
+## 📐 Layout & Abrundungen (Borders)
+
+Wir nutzen ein weiches, modernes Design mit großzügigen Radien.
+
+* **Buttons:** `8px` (Medium Round)
+* **Cards / Container:** `16px` (Large Round)
+* **Inputs / Formulare:** `8px`
+* **Profilbilder:** `50%` (Circle)
+
+---
+
+## 🖋️ Typografie
+
+* **Font Family:** `Inter, system-ui, sans-serif` (Clean & Programmierer-Vibe)
+* **Headline Scale:**
+    * **h1:** `2.5rem` | Bold (700)
+    * **h2:** `1.8rem` | Semi-Bold (600)
+    * **h3:** `1.2rem` | Medium (500)
+* **Body:** `1rem` | Regular (400) | Line-height: `1.6`
+
+---
+
+## ⚡ UI-Komponenten Spezifikationen
+
+### Buttons
+* **Default:** Primary Background, White Text, keine Border.
+* **Hover:** Helligkeit +10%, leichter Box-Shadow (`0 4px 6px -1px rgb(0 0 0 / 0.1)`).
+* **Active:** Skalierung auf `0.98` (Click-Effekt).
+
+### Karten (Cards)
+* **Background:** `Surface` (`#1E293B`)
+* **Border:** `1px solid #334155`
+* **Padding:** `24px`
+
+---
+
+> **Pro-Tipp für die KI:** Kopiere dieses File in den Prompt und sage: "Erstelle die UI basierend auf dem BYTEMALTE Design System."