<!-- markdownlint-disable -->
# Phase 1: Engagement & UX-Polish — Design Spec

**Datum:** 2026-04-11
**Projekt:** WM 2026 Tippspiel
**Ziel:** Die App von "funktional" zu "macht Spaß" transformieren. Mitarbeiter sollen beim Öffnen lächeln und täglich zurückkommen.
**Zielplattform:** Mobile-First (Staffbase-App auf Smartphone), Desktop als Bonus
**Launch:** Anfang Juni 2026 (Intranet-Post), WM-Start 11. Juni 2026

---

## 1. Neue Startseite: Dashboard

Die aktuelle Startseite zeigt 104 Spiele als endlose Liste. Die neue Startseite wird ein persönliches WM-Cockpit.

### Layout: "Hero + Stats + Nudges"

**Hero-Bereich (oberes Drittel):**

- Nächstes tippbares Spiel prominent angezeigt mit Team-Flaggen und Countdown-Timer

- Wenn bereits getippt: Tipp anzeigen mit Häkchen ("Dein Tipp: 2:1 ✓")

- Wenn noch nicht getippt: "Jetzt tippen"-Button

- Wenn kein Spiel ansteht: Nächstes Spiel mit Datum ("Nächstes Spiel: Morgen 21:00")

**Stats-Kacheln (mittleres Drittel):**

- Drei kompakte Kacheln nebeneinander:
  - **Dein Rang** (Platzierung mit Pfeil hoch/runter seit letzter Änderung)
  - **Punkte** (Gesamtpunktzahl)
  - **Streak** (🔥-Counter, aktuelle Serie an abgegebenen Tipps)

**Nudge-Bereich (unteres Drittel):**

- Kontextabhängige Handlungsaufforderungen:
  - "📅 Heute noch 2 Spiele ohne Tipp" → Link zum Spielplan
  - "🏆 Max führt mit 15 Punkten" → Link zur Rangliste
  - "🎯 Letzte Auswertung: 3 Punkte für Brazil vs Serbia!" → Link zum Ergebnis

- Maximal 2-3 Nudges, priorisiert nach Relevanz

**Navigationsänderung:** Der volle Spielplan wird zur eigenen Seite "Spiele" in der Navigation. Dashboard ist die neue Startseite.

---

## 2. Bottom Navigation Bar

Die Header-Navigation wird durch eine feste Bottom Navigation ersetzt (Mobile-First-Standard).

**4 Haupttabs:**

- 🏠 **Home** — Dashboard (neue Startseite)

- ⚽ **Spiele** — Spielplan mit Smart Sections

- 🏆 **Rangliste** — Leaderboard

- 👤 **Profil** — Persönliche Statistiken

**Header:** Wird schlank — nur Logo ("WM 2026 Tippspiel"), optional Notification-Badge, Theme-Toggle.

**Admin:** Nicht mehr in der Hauptnavigation. Nur für Editoren sichtbar als Zahnrad-Icon im Header. Viewer sehen es nicht.

**Desktop:** Bottom Nav wird zur Standard-Sidebar oder bleibt als Header-Nav — sekundäre Priorität, Mobile-Erlebnis bestimmt das Design.

---

## 3. Smart Sections im Spielplan

Die 104-Spiele-Liste wird intelligent in Zeitabschnitte gruppiert.

**Abschnitte (automatisch basierend auf aktuellem Datum):**

| Abschnitt | Default-Zustand | Inhalt |
|-----------|----------------|--------|
| **Heute** | Expandiert, farbig hervorgehoben | Alle Spiele des Tages |
| **Morgen** | Expandiert | Alle Spiele des Folgetags |
| **Diese Woche** | Kollapsiert, Anzahl angezeigt | Restliche Spiele der Woche |
| **Nächste Woche+** | Kollapsiert | Spätere Spiele |
| **Vergangene Spiele** | Kollapsiert | Letzte Ergebnisse + eigene Punkte |

**Verhalten:**

- Abschnitte sind auf-/zuklappbar (Accordion)

- "Heute" scrollt automatisch in den Viewport beim Öffnen

- Leerer Abschnitt wird ausgeblendet (z.B. "Heute" wenn kein Spiel)

- Stage-Filter (Gruppenphase, Achtelfinale...) wird zum optionalen Dropdown statt Button-Leiste

---

## 4. Zustandsbasierte Match-Cards

Jede Match-Card sieht visuell anders aus je nach Spielstatus. Die aktuellen Cards sind identisch unabhängig vom Zustand.

**5 visuelle Zustände:**

### ⏳ Offen (tippbar)

- Standard-Design mit Team-Flaggen und Kick-off-Zeit

- "Tipp abgeben"-Button prominent

- Countdown wenn <24h bis Anpfiff

- Pulsierender roter Countdown wenn <1h

### ✅ Getippt

- Grüner linker Rand / Akzent

- Tipp prominent angezeigt ("Dein Tipp: 2:1")

- "Ändern"-Link statt "Tipp abgeben"

- Häkchen-Icon

### 🔴 Live (in Spielgang)

- Pulsierender roter Punkt neben "LIVE"

- Aktueller Spielstand (wenn über Sync verfügbar)

- Tipp daneben zum Vergleich

- Tippfenster geschlossen — Schloss-Icon

### 🏁 Beendet (ausgewertet)

- Endergebnis prominent

- Dein Tipp + Punkte-Badge:
  - 🥇 **Gold-Badge (3 Pkt):** Exakter Treffer, goldener Schimmer-Effekt
  - ✅ **Grüner Badge (1 Pkt):** Richtige Tendenz
  - ❌ **Grauer Badge (0 Pkt):** Falsch getippt

### 🔒 Verpasst (nicht getippt, Spiel vorbei)

- Ausgegraut / reduzierte Opacity

- "Nicht getippt" Label

- Leichter visueller "Shame-Effekt" als Motivation fürs nächste Mal

---

## 5. Emotionale Momente & Animationen

5 Schlüsselmomente, die die App lebendig machen.

### 5.1 Tipp-Bestätigung

- **Trigger:** User klickt "Tipp bestätigen"

- **Animation:** Card pulsiert kurz grün, animiertes Häkchen fliegt rein

- **Text:** "Dein Tipp ist drin! 🎯" als kurze Success-Message

- **Mobile:** Subtiles Haptic-Feedback (Vibration via `navigator.vibrate`)

- **Dauer:** ~1 Sekunde, dann Modal schließt

### 5.2 Live-Countdown vor Anpfiff

- **Trigger:** Spiel startet in <1 Stunde

- **Anzeige:** Pulsierender roter Countdown-Timer auf der Match-Card ("Noch 12 Min!")

- **Urgency-Stufen:**
  - <24h: Countdown in Stunden ("in 5h")
  - <1h: Pulsierender roter Countdown in Minuten
  - <5min: Schnelleres Pulsieren

- **Nach Anpfiff:** "Tippfenster geschlossen" mit Schloss-Icon, sanfte Transition

### 5.3 Punkte-Reveal nach Spielende

- **Trigger:** User öffnet App / navigiert zu einem ausgewerteten Spiel, das noch nicht "gesehen" wurde

- **Sequenz (gestaffelt, ~2-3 Sekunden):**
  1. Endergebnis einblenden (z.B. "Brazil 3:1 Serbia")
  2. "Dein Tipp war: 3:1" einblenden
  3. Punkte-Counter animiert hochzählen

- **Varianten nach Ergebnis:**
  - **Exakt (3 Pkt):** 🎉 Konfetti-Explosion, goldener "EXAKT!"-Badge, Celebratory-Puls
  - **Tendenz (1 Pkt):** 👏 Grüner Puls-Effekt, "Richtige Tendenz!"
  - **Falsch (0 Pkt):** 😅 Kurzes Kopfschütteln-Emoji, "Knapp daneben..."

- **"Gesehen"-Flag:** Jeder Reveal wird nur einmal gezeigt (localStorage-basiert)

### 5.4 Ranglistenveränderung

- **Trigger:** Rang hat sich seit letztem Besuch geändert

- **Anzeige:** Toast-Notification beim App-Öffnen:
  - Aufstieg: "⬆️ Du bist auf Platz 3 aufgestiegen!"
  - Abstieg: "⬇️ Du bist auf Platz 7 gerutscht — hol dir die Punkte zurück!"
  - Knapper Verfolger: "⚠️ Anna ist nur noch 1 Punkt hinter dir!"

- **Speicherung:** Letzter bekannter Rang in localStorage, Vergleich bei jedem Laden

### 5.5 Streak-Tracker

- **Definition:** Anzahl aufeinanderfolgender Spiele, für die ein Tipp abgegeben wurde (nicht Korrektheit, nur Teilnahme)

- **Anzeige:** 🔥-Counter auf dem Dashboard und im Profil

- **Meilensteine:**
  - 3er-Streak: 🔥 Feuer-Icon erscheint
  - 10er-Streak: 🔥🔥 Doppel-Feuer
  - 20er-Streak: ⚡ Blitz-Icon

- **Streak-Bruch:** "Deine 7er-Serie ist gerissen! Starte eine neue." als Nudge auf dem Dashboard

- **Backend:** Streak wird bei Tipp-Abgabe berechnet (aufeinanderfolgende Spiele nach Kick-off-Datum)

---

## 6. Profil-Seite: Reiches Profil

Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht sie persönlich und interessant.

### Layout (von oben nach unten):

**Header-Card:**

- Initialen-Avatar (bestehendes Design)

- Name + Rang-Badge ("🏆 Platz 5")

- Lieblingsteam mit Flagge (bestehende "Team hinzufügen"-Funktion, prominenter platziert)

**Stats-Ring:**

- Kreisdiagramm (Donut-Chart) mit Verteilung: Exakt / Tendenz / Falsch

- Gesamtpunktzahl in der Mitte des Rings

- Legende darunter

**Tipp-Historie:**

- Scrollbare Liste: "Deine letzten 10 Tipps"

- Jeder Eintrag: Teams, dein Tipp, Ergebnis, Punkte-Badge

- Expandierbar auf alle Tipps

**Fun-Stats:**

- "Dein Lieblings-Tipp: 1:0 (5x getippt)"

- "Du tippst 70% Heimsiege"

- "Längste Streak: 🔥12"

- Rotiert oder zeigt 2-3 gleichzeitig

**Achievement-Platzhalter (Vorgriff Phase 2):**

- Badge-Leiste am unteren Rand

- Grau/locked wenn noch nicht erreicht, farbig wenn freigeschaltet

- Phase 1: Platzhalter-UI, Logik kommt in Phase 2

---

## 7. Entfernte / Vereinfachte Features

### KI-Agent / Expertenblick — ENTFERNT

- Chat-Widget (Fußball-Icon unten rechts) wird entfernt

- "Expertenblick"-Accordion im Tipp-Modal wird entfernt

- Dateien: `AgentChat.tsx`, Agent-Route im Backend (`/api/agent`) können entfernt oder deaktiviert werden

- Begründung: Nice-to-have, lenkt vom Kernflow ab, spart Platz auf Mobile

### Tipp-Modal — VERSCHLANKT

- **Entfernt:** Gruppeninfo-Header, Kick-off-Datum (steht schon auf der Card), Expertenblick-Accordion

- **Bleibt:** Team-Flaggen + Namen, Score-Picker (+/-), Tendenz-Anzeige, "Tipp bestätigen"-Button

- **Neu:** Erfolgsanimation nach Bestätigung (siehe 5.1)

### Stage-Filter — VEREINFACHT

- Aktuell: 8 horizontale Filter-Buttons

- Neu: Dropdown/Select im Spielplan-Header

- Smart Sections übernehmen die Hauptnavigation im Spielplan

### Admin-Navigation — VERSTECKT

- Nicht mehr als Haupttab sichtbar

- Nur für User mit Editor-Rolle: Zahnrad-Icon im Header

- Viewer sehen keine Admin-UI

---

## 8. Technische Hinweise

### Frontend

- **Framework:** React + Vite + TypeScript (bestehend)

- **Animationen:** CSS-Animationen + `framer-motion` für komplexere Sequenzen (Konfetti, Punkte-Reveal)

- **Konfetti:** Lightweight-Library wie `canvas-confetti` (~3KB)

- **Charts:** Donut-Chart für Profil — entweder SVG-basiert selbst gebaut oder leichtgewichtige Library

- **Haptic:** `navigator.vibrate(50)` für Mobile (Progressive Enhancement, kein Fallback nötig)

- **State:** localStorage für Streak, gesehene Reveals, letzter Rang

### Backend

- **Streak-Berechnung:** Neue Query oder Service-Funktion, die aufeinanderfolgende Tipps zählt

- **Dashboard-Daten:** Neuer Endpoint `/api/dashboard` der Hero-Spiel, Stats und Nudges gebündelt liefert

- **Cleanup:** Agent-Route kann deaktiviert werden (Feature-Flag oder entfernen)

### Kein Breaking Change

- Bestehende API-Endpoints bleiben kompatibel

- Datenbank-Schema braucht keine Migration (Streak wird berechnet, nicht gespeichert)

- Bestehende Tipps und Punkte bleiben erhalten

---

## 9. Phasen-Übersicht

| Phase | Inhalt | Zeitrahmen |
|-------|--------|------------|
| **Phase 1** (dieses Dokument) | Dashboard, Bottom Nav, Smart Sections, Emotionale Momente, Match-Cards, Profil, Cleanup | Vor Launch (bis Ende Mai) |
| **Phase 2** | Badges & Achievements, Wochenwertung, Streak-Meilenstein-Rewards | Zum Launch / erste WM-Woche |
| **Phase 3** | Tipps anderer sehen, Reaktionen/Emojis, Abteilungs-Challenge | Während der WM, iterativ |