# 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