Styleguide/CORPORATE_DESIGN_LIGHT_MODE.md

# CORPORATE DESIGN SYSTEM - LIGHT MODE
## Professional Toolbox Design Guidelines

### 1. FARBPALETTE

#### Hauptfarben
- **Primär**: `#3182CE` (Mittleres Blau)
  - Verwendung: Buttons, Icons, Links, Hauptakzente
  - Hover-Variante: `#2563EB` (Dunkleres Blau)
  - Active-Variante: `#1D4ED8` (Noch dunkler für gedrückte Zustände)
  
- **Hintergrund**: `#F8FAFC` (Sehr helles Grau-Blau)
  - Verwendung: Haupthintergrund der Anwendung
  
- **Sekundär-Hintergrund**: `#FFFFFF` (Reines Weiß)
  - Verwendung: Karten, Sidebar, Container
  - Hover-Variante: `#F7FAFC` (Leicht getönt)
  
- **Tertiär-Hintergrund**: `#F0F4F8` (Helles Grau)
  - Verwendung: Title Bar, Header-Bereiche
  
- **Akzent-Hintergrund**: `#E6F2FF` (Sehr helles Blau)
  - Verwendung: Icon-Container, aktive Sidebar-Buttons, Highlight-Bereiche

#### Textfarben
- **Text-Primär**: `#1A365D` (Dunkles Navy-Blau)
  - Verwendung: Überschriften, wichtige Labels, Haupttexte
  
- **Text-Sekundär**: `#2D3748` (Dunkelgrau)
  - Verwendung: Input-Texte, normale Texte
  
- **Text-Tertiär**: `#4A5568` (Mittelgrau)
  - Verwendung: Sekundärtexte, Labels, Beschreibungen
  
- **Text-Quaternär**: `#718096` (Hellgrau)
  - Verwendung: Statusmeldungen, Hilfstexte
  
- **Text-Placeholder**: `#A0AEC0` (Sehr hellgrau)
  - Verwendung: Placeholder-Texte in Eingabefeldern

#### Rahmen & Linien
- **Standard-Rahmen**: `#E2E8F0` (Hellgrau)
  - Verwendung: Standardrahmen für Container und Karten
  
- **Dialog-Rahmen**: `#E1E8F0` (Minimal dunkler)
  - Verwendung: Dialog- und Modal-Rahmen
  
- **Input-Rahmen**: `#CBD5E0` (Mittelgrau)
  - Verwendung: Eingabefeld-Rahmen
  
- **Divider**: `#F1F5F9` (Sehr hell)
  - Verwendung: Trennlinien, Scrollbar-Hintergrund

#### Spezialfarben
- **Erfolg**: `#059669` (Grün)
  - Verwendung: Erfolgreiche Aktionen, positive Statusmeldungen, Aktiv-Status
  - Hintergrund-Variante: `#D1FAE5` (Sehr helles Grün)
  
- **Fehler/Gefahr**: `#DC2626` (Rot)
  - Verwendung: Fehlermeldungen, Löschaktionen, kritische Buttons
  - Hover-Hintergrund: `#FEE2E2` (Sehr helles Rot für Close-Button)
  
- **Warnung**: `#D97706` (Orange)
  - Verwendung: Warnhinweise, Aufmerksamkeit erfordernde Elemente
  - Hintergrund-Variante: `#FEF3C7` (Sehr helles Orange)
  
- **Information**: `#2563EB` (Blau)
  - Verwendung: Informative Hinweise, neutrale Statusmeldungen
  - Hintergrund-Variante: `#DBEAFE` (Sehr helles Blau)

#### Interaktionsfarben
- **Hover-Hintergrund**: `#F7FAFC` (Minimal getönt)
  - Verwendung: Hover-States für Karten und Buttons
  
- **Window-Controls-Hover**: `#E2E8F0` (Grau)
  - Verwendung: Minimize/Maximize Buttons
  
- **Focus-Outline**: `#3182CE` (Primärblau)
  - Verwendung: Keyboard-Navigation Focus-Rahmen
  
- **Active-Button-Text**: `#1E40AF` (Dunkles Blau)
  - Verwendung: Text auf aktiven Sidebar-Buttons

### 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: #FFFFFF
- Größe: 280x320px
- Border: 1px solid #E2E8F0
- Border-Radius: 16px
- Padding: 32px
- Spacing: 24px (Grid-Gap)
- Box-Shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
- Hover: Border 1px solid #3182CE, Background #F7FAFC, translateY(-2px)
- Transition: all 0.3s ease
```

#### Buttons

**Primary Button**
```css
- Hintergrund: #3182CE
- Text: #FFFFFF
- Border-Radius: 24px
- Höhe: 48px
- Padding: 0 32px
- Hover: Background #2563EB
- Active: Background #1D4ED8
- Box-Shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
```

**Secondary Button**
```css
- Hintergrund: transparent
- Text: #1A365D
- Border: 1px solid #E2E8F0
- Border-Radius: 24px
- Höhe: 48px
- Hover: Background #F7FAFC, Border #CBD5E0
```

#### Eingabefelder
```css
- Hintergrund: #FFFFFF
- Border: 1px solid #CBD5E0
- Border-Radius: 8px
- Padding: 12px 16px
- Text: #2D3748
- Placeholder: #A0AEC0
- Focus: Border #3182CE, Box-Shadow 0 0 0 3px rgba(49, 130, 206, 0.1)
```

#### Dialoge/Popups
```css
- Hintergrund: #FFFFFF
- Border: 1px solid #E1E8F0
- Border-Radius: 8px
- Box-Shadow: 0 10px 25px rgba(0, 0, 0, 0.1)
- Titelleiste: Background #F0F4F8, Höhe 40px
- Close-Button: Hover-Background #FEE2E2, Hover-Color #DC2626
```

#### Scrollbar
```css
- Hintergrund: #F1F5F9
- Handle: #CBD5E0
- Handle-Hover: #A0AEC0
- Breite: 8px
- Border-Radius: 4px
```

#### Tabellen
```css
- Header-Hintergrund: #F0F4F8
- Header-Text: #1A365D
- Header-Border: 1px solid #E2E8F0
- Zeilen-Hintergrund: #FFFFFF
- Zeilen-Hover: #F7FAFC
- Alternating Rows: #F8FAFC
- Borders: 1px solid #E2E8F0
- Padding: 12px 16px
```

#### Form-Elemente

**Select/Dropdown**
```css
- Gleicher Style wie Eingabefelder
- Dropdown-Hintergrund: #FFFFFF
- Box-Shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
- Option-Hover: #E6F2FF
- Border: 1px solid #E2E8F0
```

**Checkbox/Radio**
```css
- Border: 2px solid #CBD5E0
- Background: #FFFFFF
- Checked-Hintergrund: #3182CE
- Checked-Icon: #FFFFFF
- Größe: 20x20px
- Border-Radius: 4px (Checkbox), 50% (Radio)
```

**Toggle Switch**
```css
- Hintergrund: #E2E8F0
- Active: #3182CE
- Slider: #FFFFFF
- Größe: 44x24px
- Border-Radius: 12px
- Box-Shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
```

#### Progress Bar
```css
- Hintergrund: #E2E8F0
- Füllung: #3182CE
- Höhe: 8px
- Border-Radius: 4px
- Animation: ease-out 0.3s
```

#### Badges & Tags
```css
- Default: Background #F0F4F8, Text #4A5568
- Primary: Background #3182CE, Text #FFFFFF
- Success: Background #059669, Text #FFFFFF
- Warning: Background #D97706, Text #FFFFFF
- Error: Background #DC2626, Text #FFFFFF
- Light variants:
  - Success-Light: Background #D1FAE5, Text #059669
  - Warning-Light: Background #FEF3C7, Text #D97706
  - Error-Light: Background #FEE2E2, Text #DC2626
  - Info-Light: Background #DBEAFE, Text #2563EB
- Padding: 4px 12px
- Border-Radius: 12px
- Font-Size: 12px
- Font-Weight: 600
```

#### Tooltips & Popovers
```css
- Hintergrund: #1A365D
- Text: #FFFFFF
- Border: none
- Box-Shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
- Border-Radius: 8px
- Padding: 8px 12px
- Font-Size: 13px
- Z-Index: 1000
```

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

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

#### Tabs
```css
- Inaktiv: Background transparent, Text #718096
- Aktiv: Background transparent, Text #1A365D, Bottom-Border 2px solid #3182CE
- Hover: Background #F7FAFC
- Padding: 12px 24px
- Transition: all 0.2s ease
```

#### Modal/Dialog Overlay
```css
- Overlay: rgba(0, 0, 0, 0.5)
- 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
- **Karten**: Blauer Border + leichter Hintergrundwechsel + Schatten + leichtes Anheben
- **Buttons**: Farbintensivierung mit smooth transition
- **Navigation**: Hintergrund-Highlight mit #F7FAFC
- **Links**: Underline oder Farbwechsel zu #2563EB

#### 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 #3182CE, outline-offset: 2px`
- Alternative: Box-Shadow für Eingabefelder
- Wichtig für Keyboard-Navigation

#### Active States
- Buttons: Dunklere Farbe (#1D4ED8) + `transform: scale(0.98)`
- Links: Gleiche Farbe wie Hover

#### Disabled States
- Opacity: 0.6
- Cursor: not-allowed
- Keine Hover-Effekte
- Background: #F0F4F8 für Eingabefelder

### 6. WICHTIGE REGELN

1. **Subtile Borders** - Im Gegensatz zum Dark Mode werden Borders standardmäßig verwendet
2. **Weiche Schatten** - Dezente Box-Shadows für Tiefe
3. **Hoher Kontrast** - Mindestens 4.5:1 für normale Texte, 3:1 für große Texte
4. **Konsistente Radien** - 8px, 16px, 24px je nach Komponente
5. **Behörden-gerecht** - Seriös, professionell, keine verspielten Elemente

### 7. ICONS & RESSOURCEN

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

#### Logos
- **Hauptlogo**: Light-Varianten auf hellem Hintergrund
- **Verfügbare Varianten**:
  - `/ressources/logo/intelsight-full-light.svg` - Vollständiges Logo (jetzt transparent)
  - `/ressources/logo/intelsight-name-light.svg` - Nur Name (jetzt transparent)
  - `/ressources/logo/intelsight-icon-light.svg` - Nur Icon (transparent)
- **Mindestabstand**: 20px zu anderen Elementen

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

### 8. BARRIEREFREIHEIT

- Kontrastverhältnis Text/Hintergrund: Mindestens 4.5:1 (AA), idealerweise 7:1 (AAA)
- 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: #FFFFFF
- Breite: 260px
- Padding: 20px
- Border-Right: 1px solid #E2E8F0
- Item-Padding: 12px 16px
- Item-Hover: Background #F7FAFC
- Active-Item: Background #E6F2FF, Text #1E40AF, Left-Border 3px solid #3182CE
- Divider: 1px solid #F1F5F9
- Icon-Größe: 20x20px
- Icon-Margin: 12px
- Icon-Farbe: #4A5568 (normal), #3182CE (aktiv)
```

#### Breadcrumbs
```css
- Text: #718096
- Separator: #CBD5E0
- Active: #1A365D
- Hover: #3182CE
- Font-Size: 13px
```

### 10. TRANSPARENZEN & EFFEKTE

#### Glassmorphism (sehr dezent)
```css
- Modal-Overlay: rgba(0, 0, 0, 0.5)
- Dropdown-Background: rgba(255, 255, 255, 0.98)
- Backdrop-Filter: blur(8px) - nur für Overlays
- Border für Glassmorphism: 1px solid rgba(255, 255, 255, 0.5)
```

#### Schatten
```css
- Klein: 0 1px 2px rgba(0, 0, 0, 0.05)
- Mittel: 0 4px 6px rgba(0, 0, 0, 0.1)
- Groß: 0 10px 15px rgba(0, 0, 0, 0.1)
- XL: 0 20px 25px rgba(0, 0, 0, 0.1)
- Focus-Glow: 0 0 0 3px rgba(49, 130, 206, 0.1)
```

### 11. ANWENDUNGSBEISPIEL

```python
# PyQt6 Beispiel für Primary Button
button.setStyleSheet("""
    QPushButton {
        background-color: #3182CE;
        color: #FFFFFF;
        border: none;
        border-radius: 24px;
        padding: 0 32px;
        font-size: 15px;
        font-weight: 600;
        min-height: 48px;
    }
    QPushButton:hover {
        background-color: #2563EB;
    }
    QPushButton:pressed {
        background-color: #1D4ED8;
    }
""")
```

### 12. WEITERE CODE-BEISPIELE

#### CSS Variables
```css
:root {
    /* Farben */
    --primary-blue: #3182CE;
    --primary-blue-hover: #2563EB;
    --primary-blue-active: #1D4ED8;
    --primary-blue-dark: #1E40AF;
    --bg-main: #F8FAFC;
    --bg-white: #FFFFFF;
    --bg-gray: #F0F4F8;
    --bg-accent: #E6F2FF;
    --text-primary: #1A365D;
    --text-secondary: #2D3748;
    --text-tertiary: #4A5568;
    --text-quaternary: #718096;
    --text-placeholder: #A0AEC0;
    --border-default: #E2E8F0;
    --border-input: #CBD5E0;
    --success: #059669;
    --warning: #D97706;
    --error: #DC2626;
    --info: #2563EB;
    
    /* 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;
    
    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}
```

#### HTML/CSS Beispiel
```html
<!-- Badge Component -->
<span class="badge badge-success-light">Aktiv</span>

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

.badge-success-light {
    background-color: #D1FAE5;
    color: #059669;
}
</style>
```

#### React/TypeScript Beispiel
```tsx
// Card Component mit Light Mode
const Card: React.FC<{title: string}> = ({title, children}) => (
    <div className="card">
        <h3 className="card-title">{title}</h3>
        {children}
    </div>
);

// Styles
const cardStyles = {
    backgroundColor: '#FFFFFF',
    border: '1px solid #E2E8F0',
    borderRadius: '16px',
    padding: '32px',
    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
    transition: 'all 0.3s ease'
};
```

### 13. DOS AND DON'TS

#### DO ✓
- Verwende die exakten Hex-Codes
- Nutze subtile Schatten für Tiefe
- Halte genügend Kontrast für Lesbarkeit
- Verwende Borders zur Strukturierung
- Nutze ausreichend Weißraum

#### DON'T ✗
- Keine Emojis in professionellen Anwendungen
- Keine zusätzlichen Farben ohne Absprache
- Keine zu starken Schatten
- Keine zu niedrigen Kontraste
- Keine Animationen außer Hover-Transitions