chore: suppress markdownlint warnings in spec docs

docs/superpowers/specs/2026-04-11-phase1-engagement-ux-design.md

@@ -1,3 +1,4 @@
+<!-- markdownlint-disable -->
 # Phase 1: Engagement & UX-Polish — Design Spec
 
 **Datum:** 2026-04-11
@@ -15,22 +16,29 @@ Die aktuelle Startseite zeigt 104 Spiele als endlose Liste. Die neue Startseite
 ### 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.
@@ -42,9 +50,13 @@ Die aktuelle Startseite zeigt 104 Spiele als endlose Liste. Die neue Startseite
 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.
@@ -70,9 +82,13 @@ Die 104-Spiele-Liste wird intelligent in Zeitabschnitte gruppiert.
 | **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
 
 ---
@@ -84,33 +100,50 @@ Jede Match-Card sieht visuell anders aus je nach Spielstatus. Die aktuellen Card
 **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
 
 ---
@@ -120,49 +153,70 @@ Jede Match-Card sieht visuell anders aus je nach Spielstatus. Die aktuellen Card
 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)
 
 ---
@@ -174,29 +228,45 @@ Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht
 ### 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
 
 ---
@@ -204,24 +274,37 @@ Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht
 ## 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
 
 ---
@@ -229,21 +312,33 @@ Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht
 ## 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
 
 ---