# TrainingsTagebuch Design Guide

## Übersicht

Das TrainingsTagebuch verwendet ein modernes, frisches Design mit einer konsistenten Farbpalette und modernen UI-Elementen. Alle bestehenden Farben wurden beibehalten, aber mit verbesserten Schatten, Abständen und Animationen versehen.

## Farbpalette

### Primärfarben
- **Primärgrün**: `#4CAF50` - Hauptfarbe für Buttons und Akzente
- **Primärgrün Hover**: `#45a049` - Hover-Zustand für Primärfarbe
- **Sekundärbraun**: `#a07040` - Sekundärfarbe für Navigation und Menüs
- **Sekundärbraun Hover**: `#804b29` - Hover-Zustand für Sekundärfarbe

### Neutrale Farben
- **Text Primär**: `#333` - Haupttextfarbe
- **Text Sekundär**: `#666` - Sekundärtextfarbe
- **Text Hell**: `#999` - Helle Textfarbe
- **Hintergrund Hell**: `#f8f9fa` - Haupthintergrundfarbe
- **Rahmenfarbe**: `#e9ecef` - Rahmen und Trennlinien

## Design-Tokens

### Schatten
- **Schatten Hell**: `0 2px 8px rgba(0, 0, 0, 0.1)`
- **Schatten Mittel**: `0 4px 16px rgba(0, 0, 0, 0.15)`
- **Schatten Schwer**: `0 8px 32px rgba(0, 0, 0, 0.2)`

### Abstände
- **Border Radius**: `8px` (Standard), `12px` (Groß)
- **Transition**: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`

## Typografie

### Schriftarten
- **Primär**: Inter (mit Fallbacks zu System-Schriften)
- **Größen**: 
  - Basis: `16px`
  - Klein: `14px` (Mobile)
  - Überschriften: `1.5rem` - `2rem`

### Zeilenhöhe
- **Standard**: `1.6` für optimale Lesbarkeit

## Komponenten

### Buttons

#### Primärer Button
```html
<button class="btn-primary">Primärer Button</button>
```

#### Sekundärer Button
```html
<button class="btn-secondary">Sekundärer Button</button>
```

#### Button-Varianten
- `.btn-primary` - Primärer Button (Grün)
- `.btn-secondary` - Sekundärer Button (Braun)
- `.btn-primary.small` - Kleiner Button
- `.btn-primary.large` - Großer Button
- `.btn-primary.icon` - Icon-Button (rund)

### Karten

#### Standard-Karte
```html
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Kartentitel</h3>
  </div>
  <div class="card-body">
    <p>Karteninhalt</p>
  </div>
</div>
```

### Formularelemente

#### Input-Felder
```html
<input type="text" placeholder="Text eingeben">
<select>
  <option>Option wählen</option>
</select>
<textarea placeholder="Mehrzeiliger Text"></textarea>
```

### Tabellen

#### Standard-Tabelle
```html
<table>
  <thead>
    <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Daten 1</td>
      <td>Daten 2</td>
    </tr>
  </tbody>
</table>
```

### Alerts

#### Verschiedene Alert-Typen
```html
<div class="alert alert-success">
  <span class="alert-icon">✅</span>
  <div class="alert-content">
    <div class="alert-title">Erfolg!</div>
    <div class="alert-message">Operation erfolgreich abgeschlossen.</div>
  </div>
</div>

<div class="alert alert-danger">
  <span class="alert-icon">❌</span>
  <div class="alert-content">
    <div class="alert-title">Fehler!</div>
    <div class="alert-message">Ein Fehler ist aufgetreten.</div>
  </div>
</div>
```

### Badges

#### Verschiedene Badge-Typen
```html
<span class="badge badge-primary">Primär</span>
<span class="badge badge-secondary">Sekundär</span>
<span class="badge badge-success">Erfolg</span>
<span class="badge badge-danger">Gefahr</span>
<span class="badge badge-warning">Warnung</span>
<span class="badge badge-info">Info</span>
```

### Progress-Bars

#### Standard-Progress-Bar
```html
<div class="progress">
  <div class="progress-bar" style="width: 75%">75%</div>
</div>
```

### Tabs

#### Tab-Navigation
```html
<div class="tabs">
  <ul class="tab-list">
    <li class="tab-item">
      <button class="tab-button active">Tab 1</button>
    </li>
    <li class="tab-item">
      <button class="tab-button">Tab 2</button>
    </li>
  </ul>
</div>

<div class="tab-content active">
  <p>Inhalt von Tab 1</p>
</div>
```

### Accordion

#### Akkordeon-Element
```html
<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">
      <span>Akkordeon-Titel</span>
      <span class="accordion-icon">▼</span>
    </button>
    <div class="accordion-content">
      <div class="accordion-body">
        <p>Akkordeon-Inhalt</p>
      </div>
    </div>
  </div>
</div>
```

### Breadcrumbs

#### Navigationspfad
```html
<nav class="breadcrumb">
  <div class="breadcrumb-item">
    <a href="/" class="breadcrumb-link">Start</a>
  </div>
  <span class="breadcrumb-separator">/</span>
  <div class="breadcrumb-item">
    <a href="/verein" class="breadcrumb-link">Verein</a>
  </div>
  <span class="breadcrumb-separator">/</span>
  <div class="breadcrumb-item">
    <span class="breadcrumb-current">Mitglieder</span>
  </div>
</nav>
```

### Pagination

#### Seitenzahlen
```html
<nav class="pagination">
  <ul>
    <li class="page-item">
      <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link active">2</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link">3</a>
    </li>
  </ul>
</nav>
```

## Utility-Klassen

### Abstände
- `.mb-1` bis `.mb-5` - Margin Bottom
- `.mt-1` bis `.mt-5` - Margin Top
- `.p-1` bis `.p-5` - Padding
- `.gap-1` bis `.gap-5` - Gap zwischen Flexbox-Elementen

### Ausrichtung
- `.text-center` - Text zentrieren
- `.text-left` - Text links ausrichten
- `.text-right` - Text rechts ausrichten

### Flexbox
- `.d-flex` - Display Flex
- `.flex-column` - Flex Direction Column
- `.justify-content-center` - Zentrieren
- `.align-items-center` - Vertikal zentrieren

### Farben
- `.text-primary` - Primärfarbe für Text
- `.text-secondary` - Sekundärfarbe für Text
- `.bg-primary` - Primärfarbe für Hintergrund
- `.bg-secondary` - Sekundärfarbe für Hintergrund

### Schatten
- `.shadow-sm` - Kleiner Schatten
- `.shadow` - Standard-Schatten
- `.shadow-md` - Mittlerer Schatten
- `.shadow-lg` - Großer Schatten
- `.shadow-xl` - Sehr großer Schatten

## Responsive Design

### Breakpoints
- **Desktop**: `> 1024px`
- **Tablet**: `768px - 1024px`
- **Mobile**: `< 768px`
- **Small Mobile**: `< 480px`

### Mobile-First Ansatz
Alle Komponenten sind mobile-first entwickelt und werden für größere Bildschirme erweitert.

## Animationen

### Standard-Animationen
- **Fade In**: `.fade-in` - Sanftes Einblenden
- **Slide In**: `.slide-in` - Von links einschieben
- **Hover-Effekte**: Alle interaktiven Elemente haben sanfte Hover-Übergänge

### Transition-Zeiten
- **Standard**: `0.3s` für alle Übergänge
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` für natürliche Bewegungen

## Verwendung

### CSS-Import
```scss
// In Ihrer Vue-Komponente
<style lang="scss">
@import '@/assets/css/main.scss';

// Ihre spezifischen Styles hier
</style>
```

### Komponenten verwenden
Alle Komponenten sind sofort verfügbar, sobald die CSS-Dateien importiert sind. Es sind keine zusätzlichen JavaScript-Bibliotheken erforderlich.

## Best Practices

1. **Konsistenz**: Verwenden Sie immer die vordefinierten Farben und Abstände
2. **Accessibility**: Alle interaktiven Elemente haben Hover- und Focus-States
3. **Performance**: Animationen verwenden CSS-Transforms und Opacity für optimale Performance
4. **Mobile**: Testen Sie alle Komponenten auf verschiedenen Bildschirmgrößen

## Browser-Support

- **Modern**: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- **Fallbacks**: Ältere Browser erhalten eine funktionale, aber weniger animierte Version
