Styleguide/CORPORATE_DESIGN_DARK_MODE.md

# 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, Validierungsfehler
  
- **Erfolg**: `#4CAF50` (Grün)
  - Verwendung: Erfolgreiche Aktionen, positive Statusmeldungen
  
- **Warnung**: `#FFC107` (Gelb)
  - Verwendung: Warnhinweise, Aufmerksamkeit erfordernde Elemente
  
- **Information**: `#2196F3` (Blau)
  - Verwendung: Informative Hinweise, neutrale Statusmeldungen
  
- **Sidebar-Hintergrund**: `#0A0A0A` (Fast-Schwarz)
  - Verwendung: Sidebar-Bereich

### 2. TYPOGRAFIE

#### Schriftfamilie
```css
/* Primär - für Überschriften und wichtige UI-Elemente */
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Standard - für Fließtext */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

/* Monospace für Code/Daten */
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
```

**Hinweis**: Poppins sollte über Google Fonts eingebunden werden:
```html
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
```

#### 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 (Große Überschriften mit Poppins)
- **Semibold**: 600 (Buttons, wichtige Labels - bevorzugt mit Poppins)
- **Medium**: 500 (Navigation)
- **Regular**: 400 (Normaler Text)

#### Text-Eigenschaften
- **Letter-Spacing für Überschriften**: 1-2px
- **Letter-Spacing für Buttons**: 0.5-1px
- **Text-Transform**: Uppercase für Navigation und kleine Labels
- **Line-Height**: 1.5-1.6 für bessere Lesbarkeit

#### Verwendung von Poppins
- **Logo-Text**: Immer Poppins 600
- **Hauptüberschriften**: Poppins 700
- **Buttons**: Poppins 600
- **Navigation**: Poppins 500
- **Karten-Titel**: Poppins 600

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

#### Tabellen
```css
- Header-Hintergrund: #232D53
- Header-Text: #FFFFFF
- Zeilen-Hintergrund: transparent
- Zeilen-Hover: #1A1F3A
- Alternating Rows: rgba(26, 31, 58, 0.3)
- Borders: 1px solid rgba(255, 255, 255, 0.1)
- Padding: 12px 16px
```

#### Form-Elemente

**Select/Dropdown**
```css
- Gleicher Style wie Eingabefelder
- Dropdown-Hintergrund: rgba(26, 31, 58, 0.95)
- Backdrop-Filter: blur(5px)
- Option-Hover: #232D53
```

**Checkbox/Radio**
```css
- Border: 2px solid #232D53
- Checked-Hintergrund: #00D4FF
- Checked-Icon: #000000
- Größe: 20x20px
- Border-Radius: 4px (Checkbox), 50% (Radio)
```

**Toggle Switch**
```css
- Hintergrund: #232D53
- Active: #00D4FF
- Slider: #FFFFFF
- Größe: 44x24px
- Border-Radius: 12px
```

#### Progress Bar
```css
- Hintergrund: #232D53
- Füllung: #00D4FF
- Höhe: 8px
- Border-Radius: 4px
- Animation: ease-out 0.3s
```

#### Badges & Tags
```css
- Default: Background rgba(255, 255, 255, 0.1), Text #FFFFFF
- Primary: Background #00D4FF, Text #000000
- Success: Background #4CAF50, Text #FFFFFF
- Warning: Background #FFC107, Text #000000
- Error: Background #FF4444, Text #FFFFFF
- Padding: 4px 12px
- Border-Radius: 12px
- Font-Size: 12px
- Font-Weight: 600
```

#### Tooltips & Popovers
```css
- Hintergrund: #232D53
- Border: 1px solid rgba(0, 212, 255, 0.2)
- Box-Shadow: 0 4px 12px rgba(0, 0, 0, 0.4)
- Border-Radius: 8px
- Padding: 8px 12px
- Font-Size: 13px
- Z-Index: 1000
```

#### Loading States
```css
/* Spinner */
- Farbe: #00D4FF
- Größe: 24px, 32px, 48px
- Animation: rotate 1s linear infinite

/* Skeleton Screen */
- Hintergrund: linear-gradient(90deg, #1A1F3A 0%, #232D53 50%, #1A1F3A 100%)
- Animation: shimmer 1.5s infinite
```

#### Tabs
```css
- Inaktiv: Background transparent, Text rgba(255, 255, 255, 0.6)
- Aktiv: Background transparent, Text #FFFFFF, Bottom-Border 2px solid #00D4FF
- Hover: Background rgba(35, 45, 83, 0.3)
- Padding: 12px 24px
- Transition: all 0.2s ease
```

#### Modal/Dialog Overlay
```css
- Overlay: rgba(0, 0, 0, 0.8)
- Backdrop-Filter: blur(4px)
- Z-Index: 999
```

### 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
- **Links**: Underline oder Farbwechsel zu #00D4FF

#### Transitions
- Standard: `transition: all 0.3s ease`
- Schnell: `transition: all 0.2s ease` (für kleinere Elemente)
- Nur für Hover-States, nicht für normale Zustände

#### Focus-States
- Standard: `outline: 2px solid #00D4FF, outline-offset: 2px`
- Alternative: Hintergrundfarben-Änderung
- Wichtig für Keyboard-Navigation

#### Active States
- Buttons: Leicht dunklere Farbe + `transform: scale(0.98)`
- Links: Gleiche Farbe wie Hover

#### Disabled States
- Opacity: 0.5
- Cursor: not-allowed
- Keine Hover-Effekte

### 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. ICONS & RESSOURCEN

#### Mode Toggle
- **Dark Mode Icon**: `/ressources/dark-and-light-mode/moon.svg`
- **Light Mode Icon**: `/ressources/dark-and-light-mode/sun.svg`
- **Größe**: 20x20px bis 24x24px
- **Farbe**: #00D4FF

#### Logos
- **Hauptlogo**: Immer weiße Variante (transparent)
- **Verfügbare Varianten**:
  - `/ressources/logo/intelsight-full-dark.svg` - Vollständiges Logo (weiß auf transparent)
  - `/ressources/logo/intelsight-name-dark.svg` - Nur Name (weiß auf transparent)
  - `/ressources/logo/intelsight-icon-dark.svg` - Nur Icon (weiß auf transparent)
- **Mindestabstand**: 20px zu anderen Elementen
- **Hinweis**: Alle Dark Mode Logos sind transparent und optimal für dunkle Hintergründe

#### Sprach-Flags
- **Verfügbar**: DE, EN, ES, FR, JA
- **Pfad**: `/ressources/flags/[sprache].svg`
- **Größe**: 24x16px
- **Styling**: 
  ```css
  opacity: 0.8;
  border-radius: 2px;
  transition: opacity 0.2s ease;
  ```

### 8. 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
- Focus-Indikatoren für Keyboard-Navigation
- Unterstützung für prefers-reduced-motion

### 9. NAVIGATION & SIDEBAR

#### Sidebar-Navigation
```css
- Hintergrund: #0A0A0A
- Breite: 260px
- Padding: 20px
- Item-Padding: 12px 16px
- Item-Hover: Background rgba(35, 45, 83, 0.5)
- Active-Item: Background #232D53, Left-Border 3px solid #00D4FF
- Divider: 1px solid rgba(255, 255, 255, 0.1)
- Icon-Größe: 20x20px
- Icon-Margin: 12px
```

#### Breadcrumbs
```css
- Text: rgba(255, 255, 255, 0.6)
- Separator: rgba(255, 255, 255, 0.3)
- Active: #FFFFFF
- Hover: #00D4FF
- Font-Size: 13px
```

### 10. TRANSPARENZEN & EFFEKTE

#### Glassmorphism (dezent)
```css
- Modal-Overlay: rgba(0, 0, 0, 0.8)
- Dropdown-Background: rgba(26, 31, 58, 0.95)
- Backdrop-Filter: blur(5px) - nur sparsam verwenden
- Box-Shadow: 0 8px 32px rgba(0, 0, 0, 0.4)
```

#### Schatten
```css
- Klein: 0 2px 4px rgba(0, 0, 0, 0.3)
- Mittel: 0 4px 12px rgba(0, 0, 0, 0.4)
- Groß: 0 8px 24px rgba(0, 0, 0, 0.5)
- Glow: 0 0 20px rgba(0, 212, 255, 0.3) - nur für wichtige Elemente
```

### 11. 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;
    }
""")
```

### 12. WEITERE CODE-BEISPIELE

#### CSS Variables
```css
:root {
    /* Farben */
    --primary-blue: #232D53;
    --accent-cyan: #00D4FF;
    --accent-cyan-hover: #00B8E6;
    --bg-black: #000000;
    --bg-secondary: #1A1F3A;
    --bg-sidebar: #0A0A0A;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --success: #4CAF50;
    --warning: #FFC107;
    --error: #FF4444;
    --info: #2196F3;
    
    /* Schriftarten */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}
```

#### HTML/CSS Beispiel
```html
<!-- Badge Component -->
<span class="badge badge-primary">Neu</span>

<style>
.badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background-color: var(--accent-cyan);
    color: var(--bg-black);
}
</style>
```

#### React/TypeScript Beispiel
```tsx
// Toggle Switch Component
const ToggleSwitch: React.FC<{checked: boolean}> = ({checked}) => (
    <div className={`toggle ${checked ? 'active' : ''}`}>
        <div className="toggle-slider" />
    </div>
);

// Styles
const toggleStyles = {
    background: checked ? '#00D4FF' : '#232D53',
    transition: 'all 0.3s ease'
};
```

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