Initial commit

2025-07-08 22:51:32 +02:00
Commit 899080e56c
--- a/CORPORATE_DESIGN_DARK_MODE.md
+++ b/CORPORATE_DESIGN_DARK_MODE.md
@ -0,0 +1,202 @@
+# CORPORATE DESIGN SYSTEM - DARK MODE
+## Professional Toolbox Design Guidelines
+
+### 1. FARBPALETTE
+
+#### Hauptfarben
+- **Primär**: `#232D53` (Dunkelblau)
+  - Verwendung: Aktive Navigation, Button-Hover, Titelleisten
+  
+- **Akzent**: `#00D4FF` (Cyan)
+  - Verwendung: Primary Buttons, Hover-Borders, Icons, Links
+  - Hover-Variante: `#00B8E6` (Dunkleres Cyan)
+  
+- **Hintergrund**: `#000000` (Schwarz)
+  - Verwendung: Haupthintergrund der Anwendung
+  
+- **Sekundär-Hintergrund**: `#1A1F3A` (Dunkles Blau)
+  - Verwendung: Karten, Container, inaktive Elemente
+  - Hover-Variante: `#232D53` (bei Karten)
+  - Focus-Variante: `#2A3560` (bei Eingabefeldern)
+
+#### Textfarben
+- **Text-Primär**: `#FFFFFF` (Weiß)
+  - Verwendung: Überschriften, Buttons, wichtige Labels
+  
+- **Text-Sekundär**: `rgba(255, 255, 255, 0.7)` (70% Weiß)
+  - Verwendung: Beschreibungen, Hilfstexte
+  
+- **Text-Tertiär**: `rgba(255, 255, 255, 0.6)` (60% Weiß)
+  - Verwendung: Statusmeldungen, Copyright
+
+#### Spezialfarben
+- **Fehler/Gefahr**: `#FF4444` (Rot)
+  - Verwendung: Close-Buttons (Hover), Fehlermeldungen
+  
+- **Sidebar-Hintergrund**: `#0A0A0A` (Fast-Schwarz)
+  - Verwendung: Sidebar-Bereich
+
+### 2. TYPOGRAFIE
+
+#### Schriftfamilie
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+```
+
+#### Schriftgrößen
+- **Große Titel**: 32px (z.B. Seitenüberschriften)
+- **Dialog-Titel**: 24px
+- **Karten-Titel**: 20px
+- **Navigation**: 15px
+- **Standard-Text**: 14px
+- **Kleine Texte**: 13px
+- **Hilfstexte**: 12px
+
+#### Schriftgewichte
+- **Bold**: 700 (Überschriften)
+- **Semibold**: 600 (Buttons, wichtige Labels)
+- **Medium**: 500 (Navigation)
+- **Regular**: 400 (Normaler Text)
+
+### 3. KOMPONENTEN
+
+#### Karten (Tool Cards)
+```css
+- Hintergrund: #1A1F3A
+- Größe: 280x320px
+- Border-Radius: 16px
+- Padding: 32px
+- Spacing: 24px (Grid-Gap)
+- Hover: Border 1px solid #00D4FF, Background #232D53, translateY(-2px)
+- Transition: all 0.3s ease
+```
+
+#### Buttons
+
+**Primary Button**
+```css
+- Hintergrund: #00D4FF
+- Text: #000000
+- Border-Radius: 24px
+- Höhe: 48px
+- Padding: 0 32px
+- Hover: Background #00B8E6, Text #FFFFFF
+```
+
+**Secondary Button**
+```css
+- Hintergrund: transparent
+- Text: #FFFFFF
+- Border: 1px solid #232D53
+- Border-Radius: 24px
+- Höhe: 48px
+- Hover: Background #232D53
+```
+
+#### Eingabefelder
+```css
+- Hintergrund: #232D53
+- Border: none
+- Border-Radius: 8px
+- Padding: 12px 16px
+- Text: #FFFFFF
+- Focus: Background #2A3560
+```
+
+#### Dialoge/Popups
+```css
+- Hintergrund: #000000
+- Border-Radius: 8px
+- Titelleiste: Background #232D53, Höhe 40px
+- Close-Button: Hover-Background #FF4444
+```
+
+#### Scrollbar
+```css
+- Hintergrund: #1A1F3A
+- Handle: #00D4FF
+- Handle-Hover: #00B8E6
+- Breite: 8px
+- Border-Radius: 4px
+```
+
+### 4. LAYOUT & SPACING
+
+#### Grid-System
+- Container-Padding: 40px
+- Karten-Grid: 3 Spalten
+- Grid-Gap: 24px
+- Sidebar-Breite: 260px
+
+#### Standard-Abstände
+- Groß: 40px (Seitencontent)
+- Mittel: 32px (Karten-Innenabstand)
+- Klein: 16px (Zwischen Elementen)
+- Mini: 8px (Inline-Abstände)
+
+### 5. INTERAKTIONSMUSTER
+
+#### Hover-Effekte
+- **Generell**: Keine Borders im Normalzustand
+- **Karten**: Cyan-Border + Hintergrundwechsel + leichtes Anheben
+- **Buttons**: Farbwechsel mit smooth transition
+- **Navigation**: Hintergrund-Highlight
+
+#### Transitions
+- Standard: `transition: all 0.3s ease`
+- Nur für Hover-States, nicht für normale Zustände
+
+#### Focus-States
+- Keine sichtbaren Focus-Borders
+- Stattdessen Hintergrundfarben-Änderung
+
+### 6. WICHTIGE REGELN
+
+1. **Keine Borders** - Nur bei Hover-States verwenden
+2. **Minimalistisch** - Keine überflüssigen Dekorationen
+3. **Hoher Kontrast** - Wichtig für Lesbarkeit auf dunklem Hintergrund
+4. **Konsistente Radien** - 8px, 16px, 24px je nach Komponente
+5. **Behörden-gerecht** - Seriös, professionell, keine verspielten Elemente
+
+### 7. BARRIEREFREIHEIT
+
+- Kontrastverhältnis Text/Hintergrund: Mindestens 7:1
+- Alle interaktiven Elemente mindestens 44x44px
+- Klare Hover-States für alle klickbaren Elemente
+- Keine Information nur durch Farbe vermitteln
+
+### 8. ANWENDUNGSBEISPIEL
+
+```python
+# PyQt6 Beispiel für Primary Button
+button.setStyleSheet("""
+    QPushButton {
+        background-color: #00D4FF;
+        color: #000000;
+        border: none;
+        border-radius: 24px;
+        padding: 0 32px;
+        font-size: 15px;
+        font-weight: 600;
+        min-height: 48px;
+    }
+    QPushButton:hover {
+        background-color: #00B8E6;
+        color: #FFFFFF;
+    }
+""")
+```
+
+### 9. DOS AND DON'TS
+
+#### DO ✓
+- Verwende die exakten Hex-Codes
+- Halte die Hover-Effekte subtil
+- Nutze ausreichend Weißraum
+- Behalte die Hierarchie bei
+
+#### DON'T ✗
+- Keine Emojis in professionellen Anwendungen
+- Keine zusätzlichen Farben ohne Absprache
+- Keine Borders im Normalzustand
+- Keine Animationen außer Hover-Transitions