# Leistungstest Ergebnisse — Neue Ansicht

## Overview

Der "ergebnisse" Tab im Leistungstest zeigt ab sofort Ergebnisse in einer modernen Karten-Ansicht mit Toggle-Option zwischen Karten und Tabelle.

## Design

### Karten-Ansicht (Default)
- Pro Ergebnis eine übersichtliche Karte
- Header: Ringer-Avatar (initialbasiert), Name, Datum, Vorlage
- Header-Right: Score (%) in groß (farbcodiert: grün ≥100%, gelb ≥80%, rot <80%), Gesamtzeit
- Body: Liste aller Übungen mit Soll/Reps, elapsed_seconds, Done-Check
- Footer: Bewertung (Sterne), Bearbeiten/Löschen Buttons

### Toggle
- Toggle-Button-Leiste oben rechts: "⊞ Tabelle" | "📋 Karten"
- Aktive Ansicht ist hervorgehoben (weißer Hintergrund, Schatten)
- Auswahl wird in User-Preferences gespeichert (optional, falls bereits Preferences-System existiert)

### Farbcodierung
- Score ≥100%: Grün (`#16a34a`)
- Score ≥80%: Gelb (`#ca8a04`)
- Score <80%: Rot (`#dc2626`)

### Filter
- Vorlage-Dropdown (alle Vorlagen oder spezifische)
- Ringer-Dropdown (optional)
- Sortierung: Neueste zuerst (default)

### Detail-Ansicht pro Ergebnis
- Alle Übungen mit:
  - Übungsname
  - Soll: `targetReps` (z.B. "3×10")
  - Zeit: `elapsedSeconds` formatiert als `m:ss`
  - Status: ✓ wenn done

## Komponenten

### ResultsCardsView
- Rendering aller Ergebnis-Karten
- Filter-Logik
- Toggle-State

### ResultCard
- Einzelne Ergebniskarte
- Avatar mit Initial des Ringers
- Farbcodierter Score
- Übungsliste mit Zeiten
- Aktions-Buttons

## API

Ergebnisse werden via `apiFetch("/leistungstest/results/")` geladen (existierendes API).

Response-Shape:
```typescript
{
  id: number
  template: number
  template_name: string
  wrestler: number
  wrestler_name: string
  total_time_seconds: number
  rating: number
  score_percent: number
  completed_at: string
  items: Array<{
    id: number
    exercise: number
    exercise_name: string
    target_reps: number
    actual_reps: number
    elapsed_seconds: number
    order: number
  }>
}
```

## Backend

Keine Änderungen notwendig — bestehendes API wird verwendet.

## Implementierung

1. Neuer State `resultViewMode: "cards" | "table"` (default: "cards")
2. `ResultsCardsView` Component mit Karten-Logic
3. Toggle-Buttons im CardHeader
4. Ergebnis-Karten mit allen Details
5. Filter funktionieren wie bisher
6. Pagination bleibt bestehen