docs: CLAUDE.md – Fortschritts-/Feier-System + erweiterter API-Vertrag

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.gitignore

@@ -4,3 +4,9 @@ dist/
 .env.local
 .DS_Store
 .claude/
+
+# iOS build artifacts (Capacitor)
+ios/build/
+ios/App/Pods/
+ios/App/output/
+ios/DerivedData/

CLAUDE.md

@@ -0,0 +1,83 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm run dev      # Vite dev server (default http://localhost:5173)
+npm run build    # Production build → dist/
+npm run preview  # Serve the built dist/ locally
+```
+
+There is **no test runner and no linter** configured — `package.json` only defines `dev`, `build`, `preview`. Don't suggest `npm test`/`npm run lint`.
+
+Deployment is a two-stage Docker build (`Dockerfile`): Node builds `dist/`, then it's served by nginx (`nginx.conf`) with SPA fallback (`try_files … /index.html`).
+
+## Environment
+
+`VITE_API_URL` (in `.env` / `.env.production`) points at the backend. It's the **only** runtime config — every API call in `src/api/directus.js` reads `import.meta.env.VITE_API_URL`. `.env` is gitignored.
+
+## Architecture
+
+React 19 + Vite SPA, **no router package**. There are no DB cards/feed entries fetched directly — the app talks to a custom backend, not Directus directly (see below).
+
+**Routing** is `useState`-based in `src/App.jsx`: a `PAGES` map (`feed`/`game`/`pro`/`profil`) swaps the active page component, driven by `BottomNav`. `Game` and `Pro` are placeholders.
+
+**Auth gating:** `App.jsx` renders `<AuthScreen />` unless the user has `username`, `language_native_id`, and `language_target_id`. `AuthContext` (`src/context/AuthContext.jsx`) holds the JWT (localStorage key **`hejyou_token`**), calls `getMe()` on mount, and clears the token on failure. Registration is two steps: `RegisterStep1` (email+password) → `RegisterStep2` (username + native/target language).
+
+### The API client is misnamed
+
+`src/api/directus.js` is **not** a Directus client anymore — the module name is kept "aus historischen Gründen". It is a thin fetch wrapper around a **custom backend (snakkimo-API)** exposing `/auth/*` endpoints:
+
+| Function | Endpoint | Notes |
+|---|---|---|
+| `login` / `registerUser` | `POST /auth/login`, `/auth/register` | return `{ token, userId, needsProfile }` |
+| `getMe` | `GET /auth/me` | auth check + progress: `total_ep`, `streak_days`, `level`, `ep_into_level`, `ep_to_next_level`, `last_practice_at`; also `language_target_greeting` (Profil-Anrede „Hej, …") |
+| `checkUsername` | `GET /auth/check-username` | |
+| `createProfile` | `POST /auth/profile` | username + native/target lang |
+| `getLanguageOptions` | `GET /auth/languages` | merged with local `LANG_META` (flag + Web Speech code) |
+| `getFeedPairs` | `GET /auth/feed?lang=&limit=&exclude=` | returns "pairs", the feed unit |
+| `saveProgress` | `POST /auth/progress` | books EP/streak; returns the **milestone contract** (see below) |
+| `getStats` | `GET /auth/stats` | Profil-Daten: `daily`/`today`/`totals`/`skills` + `categories[]` (Punkte je Kategorie) |
+| `getAchievements` | `GET /auth/achievements` | `[{ key, label, icon, unlocked, unlocked_at }]` für die Profil-Sektion |
+| `setDailyGoal` | `PUT /auth/goal` | Tagesziel (EP/Tag) setzen; Backend klemmt auf 5–500 |
+
+`saveProgress` returns `{ total_ep, level, prev_level, streak_days, streak_increased, daily_ep, daily_goal_ep, goal_just_reached, unlocked_achievements }` — `Feed.jsx` leitet daraus die Feier-Momente ab (Level-Up/Streak/Tagesziel/Achievement). Felder degradieren defensiv: fehlen sie (älteres Backend), greifen lokale Fallbacks.
+
+`src/pages/Profil.jsx` rendert die Begrüßung (`language_target_greeting`), **führt mit Momentum** (`% bis Level X` + Capability-Satz), zeigt Kategorie-Stufen (`stats.categories` + `categoryTier`), Wochenvergleich, Streak-Status, Erfolge-Grid (`getAchievements`) und einen Sound-Toggle.
+
+### Fortschritts-/Feier-System (Momente)
+
+Macht Fortschritt spürbar statt nur zählbar. Bausteine:
+
+- **`src/utils/leveling.js`** — spiegelt die Backend-Level-Kurve (`levelForEp`/`levelInfo`, Level 1 bei 20 EP). Backend ist Single Source of Truth; das ist Fallback + %-Anzeige.
+- **`MilestoneOverlay`** (`components/`) — Vollbild-Feier, getriggert aus der `saveProgress`-Response. Typen: `level` / `streak` (Schwellen 3/7/14/30/50/100/200/365) / `goal` / `achievement`. Konfetti via `utils/confetti.js`.
+- **`EpFloat`** — „+N EP" schwebt am Bestätigen-Button auf; EP-Badge zählt hoch (`hooks/useCountUp.js`).
+- **`SessionSummary`** — ersetzt die End-Sackgasse mit Zahlen + Story-Zeilen.
+- **Combo** + variables Lob/ermutigendes Fehler-Feedback (`utils/praise.js`, dort auch `categoryTier`/`capabilitySentence`).
+- **`utils/sound.js`** — dezente WebAudio-Belohnung (Mute-Pref in localStorage).
+- **`utils/streak.js`** + **`utils/streakReminder.js`** — Loss-Aversion-Nudge im Feed („Serie endet in X Std") und lokale Tages-Erinnerung via **`@capacitor/local-notifications`** (kein APNs nötig; nur nativ, web no-op — braucht `npx cap sync ios`).
+
+Several content functions (`getWords`, `getQuestions`, `getActiveLearningPair`, `assetUrl`, …) are **stubs** returning empty/null — content endpoints are not built yet. Don't assume they fetch anything.
+
+### Feed = "pairs" → cards
+
+`src/pages/Feed.jsx` fetches an array of *pairs* and maps each to one card by its `answer_type`:
+
+| `answer_type` | Component | Points (`POINTS` map) |
+|---|---|---|
+| `text` | `PairSentenceCard` | 2 |
+| `yes_no` | `PairYesNoCard` | 2 |
+| `word` | `PairWordCard` | 3 |
+| `question` | `PairWordCard` | 3 |
+
+On completion, `handleComplete` adds the pair id to a local `done` set (cards are hidden, not removed) and POSTs to `saveProgress`. Target language comes from `user.language_target_short` (fallback `de`).
+
+The **`Pair*` cards** (`PairSentenceCard`, `PairYesNoCard`, `PairWordCard`) are the live card components. The other card files (`NewWord*`, `ImagePick/ImageQuiz`, `AudioQuiz`, `LetterOrder`, `SentenceFill`, `LanguageParentCard`) are an **earlier card model** not wired into the current feed — check `Feed.jsx` before assuming a component is in use.
+
+Several cards use the browser **Web Speech API** (`SpeechRecognition` / `speechSynthesis`) for the `speak`/`listen` flow; `src/utils/confetti.js` wraps `canvas-confetti` for correct-answer feedback.
+
+## `knowledge/directus_struktur.md`
+
+A detailed reference for the **backend data model** (collections, fields, relations) and the original app concept. Useful for understanding the domain and DB schema, but note it predates the custom-backend migration: its "Frontend API-Funktionen" table describes **direct Directus calls that no longer exist** — trust `src/api/directus.js` for the actual frontend contract.

FUNKTIONSUEBERSICHT.md

@@ -0,0 +1,200 @@
+# Funktionsübersicht — Snakkimo iOS-App
+
+> **Zweck:** Vollständige Liste aller Funktionen der **iOS-App** (Endnutzer-App) zur Funktionsüberprüfung durch das Team.
+> Jede Funktion hat eine **Soll-Beschreibung** (so muss es sich verhalten) und eine abhakbare Checkbox.
+> Backend-/Admin-Tools (CMT, Content-Pipeline) sind **nicht** Teil dieses Dokuments.
+
+**Technischer Rahmen**
+- iOS-App = **Capacitor-Wrapper** um eine React-19/Vite-Single-Page-App (`webDir: dist`).
+- Bundle-ID: `com.hyggecraftery.hejyou` · App-Name (iOS-Homescreen): **Snakkimo**.
+- Alle Inhalte/Logins kommen live vom Backend (`VITE_API_URL`) — **es gibt keinen Offline-Modus**, ohne Netz funktioniert die App nicht.
+- Aktiv unterstützte Sprachen: **Deutsch 🇩🇪, Englisch 🇬🇧, Schwedisch 🇸🇪**.
+
+> ⚠️ **Branding-Inkonsistenz (für QA wichtig):** Auf dem Login-Screen steht **„HejYou"**, der iOS-App-Name ist **„Snakkimo"**, der Browser-/Webview-Titel ist **„Language App"**. Bitte als bekannten Punkt behandeln, nicht als neuen Bug.
+
+---
+
+## 1. Allgemeiner Rahmen
+
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 1.1 | App-Start / Ladezustand | Beim Start erscheint ein Spinner, bis Profil geladen ist. | ☐ |
+| 1.2 | Auth-Gating | Ohne gültiges Profil (Username + Mutter- + Zielsprache) erscheint immer der Auth-Screen. | ☐ |
+| 1.3 | Session-Persistenz | Login bleibt nach App-Neustart erhalten (Token in `localStorage: hejyou_token`). | ☐ |
+| 1.4 | Auto-Logout bei ungültigem Token | Ist der Token abgelaufen/ungültig, wird er verworfen und der Auth-Screen erscheint. | ☐ |
+| 1.5 | Untere Navigation (BottomNav) | 4 Tabs: **Feed · Game · Pro · Profil**. Aktiver Tab ist hervorgehoben. | ☐ |
+| 1.6 | Seitenwechsel-Animation | Beim Tab-Wechsel spielt eine kurze Einblend-Animation (`page-enter`). | ☐ |
+| 1.7 | Safe-Area / Notch | Layout respektiert iPhone-Notch/Home-Indicator (`viewport-fit=cover`). | ☐ |
+| 1.8 | Design/Theme | Warmes Creme-/Gold-Design, durchgängige Schrift- und Farb-Tokens. | ☐ |
+
+---
+
+## 2. Onboarding & Authentifizierung
+
+### 2.1 Login (Tab „Anmelden")
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 2.1.1 | Login/Register-Umschalter | Oben umschaltbar zwischen „Anmelden" und „Registrieren"; letzte Wahl wird gemerkt (`hejyou_last_mode`). | ☐ |
+| 2.1.2 | Eingabe E-Mail + Passwort | Beide Felder Pflicht; leeres Feld → Fehlermeldung „Bitte E-Mail und Passwort eingeben.". | ☐ |
+| 2.1.3 | Erfolgreicher Login | Token wird gespeichert, Profil geladen, App öffnet den Feed. | ☐ |
+| 2.1.4 | Falsche Zugangsdaten | Fehlermeldung vom Server wird angezeigt (z. B. „Invalid credentials"). | ☐ |
+| 2.1.5 | Login eines Accounts ohne Profil | Springt direkt in **Profil-Schritt (Step 2)** statt in den Feed. | ☐ |
+| 2.1.6 | Lade-Status | Button zeigt „Anmelden…" und ist während des Requests deaktiviert. | ☐ |
+
+### 2.2 Registrierung — Schritt 1 (E-Mail + Passwort)
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 2.2.1 | Schritt-Anzeige | Zeigt Fortschrittspunkte „Schritt 1 von 2". | ☐ |
+| 2.2.2 | Passwort-Mindestlänge | Passwort < 8 Zeichen → „Passwort muss mindestens 8 Zeichen haben.". | ☐ |
+| 2.2.3 | E-Mail bereits vergeben | Server-Fehler „Email already registered" wird angezeigt. | ☐ |
+| 2.2.4 | Erfolg | Weiter zu Schritt 2 (Profil). | ☐ |
+
+### 2.3 Registrierung — Schritt 2 (Profil)
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 2.3.1 | Username-Regeln | 3–20 Zeichen, nur Buchstaben/Zahlen/Unterstrich; Verstoß → klare Fehlermeldung. | ☐ |
+| 2.3.2 | Username-Verfügbarkeit | Vergebener Username → „Dieser Username ist bereits vergeben.". | ☐ |
+| 2.3.3 | Muttersprache wählen | Dropdown mit Flaggen + Sprachnamen (vom Server geladen). | ☐ |
+| 2.3.4 | Zielsprache wählen | Dropdown; **die gewählte Muttersprache ist hier ausgeblendet**. | ☐ |
+| 2.3.5 | Gleiche Sprachen verhindern | Mutter- = Zielsprache → „… dürfen nicht gleich sein.". | ☐ |
+| 2.3.6 | Profil anlegen | Bei Erfolg: Token persistiert, Profil geladen, Erfolgs-Screen erscheint. | ☐ |
+| 2.3.7 | Sprachen-Ladefehler | Können Sprachen nicht geladen werden, ist der Button deaktiviert + Hinweis. | ☐ |
+
+### 2.4 Erfolgs-Screen & Logout
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 2.4.1 | Willkommens-Screen | Nach Registrierung: „Willkommen, {Username}!" mit Häkchen-Icon. | ☐ |
+| 2.4.2 | Logout | Über das Logout-Icon im Profil; Token wird gelöscht, zurück zum Auth-Screen. | ☐ |
+
+---
+
+## 3. Feed (Kernbereich „Lernen")
+
+### 3.1 Feed-Grundgerüst
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 3.1.1 | Karten laden | Beim Öffnen werden bis zu 20 Lernkarten in der **Zielsprache** geladen. | ☐ |
+| 3.1.2 | EP-Abzeichen oben | Zeigt Fortschritts-Ring (Tagesziel-%), Gesamt-EP und „X/Y heute". | ☐ |
+| 3.1.3 | Karte abschließen | Nach Lösen verschwindet die Karte aus der Liste (bis App-Neustart). | ☐ |
+| 3.1.4 | Fortschritt speichern | Jede gelöste Karte sendet EP/Richtig-Falsch an den Server (EP/Streak aktualisiert sich). | ☐ |
+| 3.1.5 | Ladezustand | „Lade Karten…" während des Ladens. | ☐ |
+| 3.1.6 | Leerer Feed | Keine Inhalte → „Noch keine Inhalte verfügbar.". | ☐ |
+| 3.1.7 | Alles gelöst | Alle Karten erledigt → „Super! Alle Karten abgeschlossen. 🎉". | ☐ |
+
+### 3.2 Gemeinsame Karten-Mechaniken (alle Kartentypen)
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 3.2.1 | Bild | Jede Karte zeigt oben ein Bild (Platzhalter 🖼️, falls keins). | ☐ |
+| 3.2.2 | Satz vorlesen (Audio) | Tippen auf den Satz **oder** den Lautsprecher-Button spielt echtes Audio. | ☐ |
+| 3.2.3 | Verlangsamtes Audio | Audio wird bewusst in **0,7-facher Geschwindigkeit** abgespielt. | ☐ |
+| 3.2.4 | Nur ein Audio gleichzeitig | Startet man ein neues Audio, stoppt das vorherige. | ☐ |
+| 3.2.5 | Karaoke-Hervorhebung | Während des Vorlesens wird das **aktuell gesprochene Wort** im Satz hervorgehoben. | ☐ |
+| 3.2.6 | Wort-Chip antippen | Markiertes Wort antippen → zugehöriges **Label-Abzeichen auf dem Bild**. | ☐ |
+| 3.2.7 | Objekt-Chip antippen | Objekt-Wort antippen → **Bildregion umrandet**, Rest abgedunkelt, Label sichtbar. | ☐ |
+| 3.2.8 | Objekt-Sync beim Vorlesen | Wird ein Objekt-Wort vorgelesen, wird seine Bildregion (nur Umriss) live hervorgehoben. | ☐ |
+| 3.2.9 | Übersetzungs-Hinweis | Unter dem Satz steht die Übersetzung in der Muttersprache (Hint). | ☐ |
+| 3.2.10 | Defensive Token-Anzeige | Unaufgelöste Pipeline-Tokens (`⟦PHn:wort⟧`) werden als reines Wort angezeigt, nicht roh. | ☐ |
+
+### 3.3 Kartentyp „Satz / Lesen" (PairSentenceCard, `text`) — **2 EP**
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 3.3.1 | „Verstanden" gesperrt | Button ist gesperrt, bis man **entweder** vorgelesen **oder** übersetzt hat. | ☐ |
+| 3.3.2 | Halten-zum-Übersetzen | Übersetzungs-Button **2 Sekunden halten** → Übersetzung blendet ein, Button entsperrt. | ☐ |
+| 3.3.3 | Halte-Fortschrittsring | Während des Haltens läuft ein Ring 2 s lang voll. | ☐ |
+| 3.3.4 | TTS-Fallback | Existiert kein Audio-File, wird per Browser-Sprachsynthese vorgelesen (de/en/sv). | ☐ |
+| 3.3.5 | Vokabel-Chips | Im Satz markierte Vokabeln werden als separate Chips gelistet. | ☐ |
+| 3.3.6 | Abschluss | „Verstanden" → Konfetti, Karte zählt als richtig (2 EP). | ☐ |
+
+### 3.4 Kartentyp „Ja/Nein" (PairYesNoCard, `yes_no`) — **2 EP**
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 3.4.1 | Zwei Antwort-Buttons | „✗ Nein" und „✓ Ja". | ☐ |
+| 3.4.2 | Auswertung | Antwort wird gegen die korrekte Lösung des Satzes geprüft. | ☐ |
+| 3.4.3 | Richtig | Konfetti + „✓ Richtig!" (2 EP). | ☐ |
+| 3.4.4 | Falsch | „✗ Die Antwort war: Ja/Nein"; richtige/falsche Buttons farblich markiert. | ☐ |
+| 3.4.5 | Mehrfachklick-Schutz | Nach Beantwortung sind die Buttons gesperrt. | ☐ |
+
+### 3.5 Kartentyp „Wort wählen" (PairWordCard, `word` & `question`) — **3 EP**
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 3.5.1 | Frage + Bild + Audio | Zeigt Frage-Satz, Bild und Vorlesen wie alle Karten. | ☐ |
+| 3.5.2 | Wort-Optionen | Mischung aus richtigen + falschen Wörtern, zufällig gemischt. | ☐ |
+| 3.5.3 | Mehrfachauswahl | Mehrere Optionen an-/abwählbar, dann „Bestätigen". | ☐ |
+| 3.5.4 | „Bestätigen" gesperrt | Solange nichts gewählt ist, ist „Bestätigen" gesperrt. | ☐ |
+| 3.5.5 | Auswertung | **Richtig**, wenn nur richtige Wörter gewählt sind (Teilauswahl der richtigen erlaubt, **kein** falsches dabei). | ☐ |
+| 3.5.6 | Feedback richtig/falsch | Richtig → Konfetti + „✓ Richtig!"; falsch → „✗ Richtig wären: …". | ☐ |
+| 3.5.7 | Übersetzungs-Hinweis | Nach Bestätigen werden bei richtigen Optionen die muttersprachlichen Hints gezeigt. | ☐ |
+
+---
+
+## 4. Game (Tab „Game")
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 4.1 | Platzhalter-Screen | Zeigt **„Bald verfügbar"**-Karte „Spielend lernen" mit Teaser-Punkten. | ☐ |
+| 4.2 | Keine Funktion | Es gibt **noch keine** spielbare Funktion (bewusst Platzhalter, kein Bug). | ☐ |
+
+## 5. Pro (Tab „Pro")
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 5.1 | Platzhalter-Screen | Zeigt **„Bald verfügbar"**-Karte „Snakkimo Pro" mit Teaser-Punkten. | ☐ |
+| 5.2 | Keine Kauf-/Abo-Funktion | Es gibt **noch keine** Bezahl-/Abo-Funktion (bewusst Platzhalter, kein Bug). | ☐ |
+
+---
+
+## 6. Profil (Tab „Profil")
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 6.1 | Avatar + Initialen | Kreis mit den ersten 2 Buchstaben des Usernamens, Online-Punkt. | ☐ |
+| 6.2 | Level-Abzeichen | Sechseck mit Level-Zahl (**Level = Gesamt-EP ÷ 500**, abgerundet). | ☐ |
+| 6.3 | Name + Handle | Anzeigename und „@username". | ☐ |
+| 6.4 | Streak-Anzeige | „🔥 X Tage Streak", wenn Streak > 0. | ☐ |
+| 6.5 | Tagesziel-Karte | Ring mit Tagesziel-%, „heutige EP / Ziel", Restwert-Hinweis bzw. „Geschafft 🎉". | ☐ |
+| 6.6 | Fortschritts-Karte | Zielsprache (Flagge+Name), Gesamt-EP, XP-Balken, Level-Pille, „EP bis Level X+1". | ☐ |
+| 6.7 | Wochen-Aktivität | Balkendiagramm der letzten 7 Tage (heutiger Tag markiert). | ☐ |
+| 6.8 | Aktivitäts-Kalender | Heatmap der letzten 12 Wochen (Farbintensität nach EP/Tag). | ☐ |
+| 6.9 | Eckdaten-Kacheln | „Karten geübt", „Genauigkeit %", „Tage Streak". | ☐ |
+| 6.10 | Fähigkeiten-Radar | Radar-Chart **Vokabular / Lesen / Verständnis** (Genauigkeit je Skill). | ☐ |
+| 6.11 | Leerzustand Skills | Ohne Daten: „Leg los — deine Stärken erscheinen, sobald du Karten löst.". | ☐ |
+| 6.12 | Tracking-Hinweis | Ist die Statistik (noch) nicht verfügbar: dezenter Hinweis „… komm morgen wieder! 🌱". | ☐ |
+| 6.13 | Logout | Abmelde-Button oben rechts (siehe 2.4.2). | ☐ |
+
+> **Mapping Skills:** Vokabular = Kartentypen `word` + `question`; Lesen = `text`; Verständnis = `yes_no`.
+
+---
+
+## 7. iOS-spezifische Prüfpunkte
+| # | Funktion | Soll-Verhalten | OK |
+|---|---|---|---|
+| 7.1 | App-Icon & Name | Auf dem Homescreen erscheint **„Snakkimo"**. | ☐ |
+| 7.2 | Start ohne Netz | Ohne Internet lädt nichts (Login/Feed schlagen fehl) — Verhalten dokumentieren. | ☐ |
+| 7.3 | Audio-Wiedergabe iOS | Vorlesen funktioniert auch im iOS-WebView (Touch löst Audio aus). | ☐ |
+| 7.4 | Touch-Halten (Übersetzen) | 2-Sekunden-Halten funktioniert per Touch (nicht nur Maus). | ☐ |
+| 7.5 | Scrollen | Auth- und Profil-Screens lassen sich vollständig scrollen, ohne „Gummiband"-Leaks. | ☐ |
+| 7.6 | Safe-Area / Statusleiste | Kein Inhalt liegt unter Notch/Statusleiste oder Home-Indicator. | ☐ |
+| 7.7 | Hintergrund/Wiederkehr | App nach Hintergrund zurückholen → Session noch aktiv, Feed nutzbar. | ☐ |
+
+---
+
+## 8. Bekannte Einschränkungen / Auffälligkeiten (für QA, kein Bug-Report nötig)
+- **Game & Pro** sind reine „Bald verfügbar"-Platzhalter.
+- **Kein Offline-Modus** — App braucht durchgehend Verbindung zum Backend.
+- **Feed-Wiederholung:** Bereits gelöste Karten verschwinden nur lokal; nach App-Neustart können dieselben Karten erneut erscheinen (keine Spaced-Repetition-Logik in der App).
+- **Branding uneinheitlich:** „HejYou" (Login) vs. „Snakkimo" (App-Name) vs. „Language App" (Webview-Titel).
+- **Nur 3 Sprachen** (de/en/sv) auswählbar.
+- **Inhaltsmenge begrenzt:** Der Feed kann bei intensivem Üben schnell leer sein („Alle Karten abgeschlossen").
+
+---
+
+## 9. Kompakte Test-Checkliste (Smoke-Test, ~10 Min)
+- [ ] Registrierung (neue E-Mail) → Profil anlegen → landet im Feed
+- [ ] Logout → erneuter Login → Feed
+- [ ] Login bleibt nach App-Neustart bestehen
+- [ ] Feed: Satz-Karte vorlesen (Audio + Karaoke-Highlight)
+- [ ] Feed: Wort-Chip antippen → Bild-Label; Objekt-Chip → Bildregion umrandet
+- [ ] Feed: „Verstanden"-Karte über 2-Sek-Halten entsperren und lösen
+- [ ] Feed: Ja/Nein-Karte richtig + falsch testen (Konfetti / korrekte Lösung)
+- [ ] Feed: Wort-Wahl-Karte mit Mehrfachauswahl lösen
+- [ ] EP-Abzeichen oben steigt nach Lösen einer Karte
+- [ ] Profil: EP/Level, Streak, Wochen-Balken, Heatmap, Radar werden angezeigt
+- [ ] Game-Tab & Pro-Tab zeigen „Bald verfügbar"
+- [ ] iOS: Safe-Area korrekt, Touch-Halten & Audio funktionieren

capacitor.config.json

@@ -0,0 +1,5 @@
+{
+  "appId": "com.hyggecraftery.snakkimo",
+  "appName": "Snakkimo",
+  "webDir": "dist"
+}

index.html

@@ -2,8 +2,8 @@
 <html lang="de">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
-    <title>Language App</title>
+    <title>Snakkimo</title>
   </head>
   <body>
     <div id="root"></div>

ios/.gitignore

@@ -0,0 +1,13 @@
+App/build
+App/Pods
+App/output
+App/App/public
+DerivedData
+xcuserdata
+
+# Cordova plugins for Capacitor
+capacitor-cordova-ios-plugins
+
+# Generated Config files
+App/App/capacitor.config.json
+App/App/config.xml

ios/App/App.xcodeproj/project.pbxproj

@@ -0,0 +1,378 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 60;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
+		4D22ABE92AF431CB00220026 /* CapApp-SPM in Frameworks */ = {isa = PBXBuildFile; productRef = 4D22ABE82AF431CB00220026 /* CapApp-SPM */; };
+		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
+		504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
+		504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
+		504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
+		504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
+		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
+		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
+		504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
+		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
+		958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		504EC3011FED79650016851F /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				4D22ABE92AF431CB00220026 /* CapApp-SPM in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		504EC2FB1FED79650016851F = {
+			isa = PBXGroup;
+			children = (
+				958DCC722DB07C7200EA8C5F /* debug.xcconfig */,
+				504EC3061FED79650016851F /* App */,
+				504EC3051FED79650016851F /* Products */,
+			);
+			sourceTree = "<group>";
+		};
+		504EC3051FED79650016851F /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				504EC3041FED79650016851F /* App.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		504EC3061FED79650016851F /* App */ = {
+			isa = PBXGroup;
+			children = (
+				50379B222058CBB4000EE86E /* capacitor.config.json */,
+				504EC3071FED79650016851F /* AppDelegate.swift */,
+				504EC30B1FED79650016851F /* Main.storyboard */,
+				504EC30E1FED79650016851F /* Assets.xcassets */,
+				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
+				504EC3131FED79650016851F /* Info.plist */,
+				2FAD9762203C412B000D30F8 /* config.xml */,
+				50B271D01FEDC1A000F3C39B /* public */,
+			);
+			path = App;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		504EC3031FED79650016851F /* App */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
+			buildPhases = (
+				504EC3001FED79650016851F /* Sources */,
+				504EC3011FED79650016851F /* Frameworks */,
+				504EC3021FED79650016851F /* Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = App;
+			packageProductDependencies = (
+				4D22ABE82AF431CB00220026 /* CapApp-SPM */,
+			);
+			productName = App;
+			productReference = 504EC3041FED79650016851F /* App.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		504EC2FC1FED79650016851F /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastSwiftUpdateCheck = 0920;
+				LastUpgradeCheck = 0920;
+				TargetAttributes = {
+					504EC3031FED79650016851F = {
+						CreatedOnToolsVersion = 9.2;
+						LastSwiftMigration = 1100;
+						ProvisioningStyle = Automatic;
+					};
+				};
+			};
+			buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
+			compatibilityVersion = "Xcode 8.0";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 504EC2FB1FED79650016851F;
+			packageReferences = (
+				D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */,
+			);
+			productRefGroup = 504EC3051FED79650016851F /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				504EC3031FED79650016851F /* App */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		504EC3021FED79650016851F /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
+				50B271D11FEDC1A000F3C39B /* public in Resources */,
+				504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
+				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
+				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
+				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		504EC3001FED79650016851F /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		504EC30B1FED79650016851F /* Main.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC30C1FED79650016851F /* Base */,
+			);
+			name = Main.storyboard;
+			sourceTree = "<group>";
+		};
+		504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC3111FED79650016851F /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		504EC3141FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+			};
+			name = Debug;
+		};
+		504EC3151FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		504EC3171FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = LKA5KKQKHY;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
+				PRODUCT_BUNDLE_IDENTIFIER = com.hyggecraftery.snakkimo;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		504EC3181FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = LKA5KKQKHY;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				PRODUCT_BUNDLE_IDENTIFIER = com.hyggecraftery.snakkimo;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3141FED79650016851F /* Debug */,
+				504EC3151FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3171FED79650016851F /* Debug */,
+				504EC3181FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+
+/* Begin XCLocalSwiftPackageReference section */
+		D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */ = {
+			isa = XCLocalSwiftPackageReference;
+			relativePath = "CapApp-SPM";
+		};
+/* End XCLocalSwiftPackageReference section */
+
+/* Begin XCSwiftPackageProductDependency section */
+		4D22ABE82AF431CB00220026 /* CapApp-SPM */ = {
+			isa = XCSwiftPackageProductDependency;
+			package = D4C12C0A2AAA248700AAC8A2 /* XCLocalSwiftPackageReference "CapApp-SPM" */;
+			productName = "CapApp-SPM";
+		};
+/* End XCSwiftPackageProductDependency section */
+	};
+	rootObject = 504EC2FC1FED79650016851F /* Project object */;
+}

ios/App/App.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

ios/App/App.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -0,0 +1,24 @@
+{
+  "originHash" : "ba02264f6d4c613de9cfd9120fa05cc1e61acacc858cb62d0cb6cb68ef052757",
+  "pins" : [
+    {
+      "identity" : "capacitor-swift-pm",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/ionic-team/capacitor-swift-pm.git",
+      "state" : {
+        "revision" : "44ae2505f54a80c5e559533950886d0644fc2fca",
+        "version" : "8.4.0"
+      }
+    },
+    {
+      "identity" : "swiftkeychainwrapper",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/jrendel/SwiftKeychainWrapper.git",
+      "state" : {
+        "revision" : "185a3165346a03767101c4f62e9a545a0fe0530f",
+        "version" : "4.0.1"
+      }
+    }
+  ],
+  "version" : 3
+}

ios/App/App/AppDelegate.swift

@@ -0,0 +1,49 @@
+import UIKit
+import Capacitor
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+    var window: UIWindow?
+
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Override point for customization after application launch.
+        return true
+    }
+
+    func applicationWillResignActive(_ application: UIApplication) {
+        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
+        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
+    }
+
+    func applicationDidEnterBackground(_ application: UIApplication) {
+        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
+        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
+    }
+
+    func applicationWillEnterForeground(_ application: UIApplication) {
+        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
+    }
+
+    func applicationDidBecomeActive(_ application: UIApplication) {
+        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
+    }
+
+    func applicationWillTerminate(_ application: UIApplication) {
+        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
+    }
+
+    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
+        // Called when the app was launched with a url. Feel free to add additional processing here,
+        // but if you want the App API to support tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
+    }
+
+    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+        // Called when the app was launched with an activity, including Universal Links.
+        // Feel free to add additional processing here, but if you want the App API to support
+        // tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    }
+
+}

ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,14 @@
+{
+  "images" : [
+    {
+      "filename" : "AppIcon-512@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/App/App/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/App/App/Assets.xcassets/Splash.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732-2.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732-1.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "splash-2732x2732.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/App/App/Base.lproj/LaunchScreen.storyboard

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </imageView>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="Splash" width="1366" height="1366"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>

ios/App/App/Base.lproj/Main.storyboard

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+    </dependencies>
+    <scenes>
+        <!--Bridge View Controller-->
+        <scene sceneID="tne-QT-ifu">
+            <objects>
+                <viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
+            </objects>
+        </scene>
+    </scenes>
+</document>

ios/App/App/Info.plist

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>CAPACITOR_DEBUG</key>
+	<string>$(CAPACITOR_DEBUG)</string>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+        <string>Snakkimo</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleVersion</key>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIMainStoryboardFile</key>
+	<string>Main</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<true/>
+</dict>
+</plist>

ios/App/CapApp-SPM/.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+/.build
+/Packages
+/*.xcodeproj
+xcuserdata/
+DerivedData/
+.swiftpm/config/registries.json
+.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
+.netrc

ios/App/CapApp-SPM/Package.swift

@@ -0,0 +1,27 @@
+// swift-tools-version: 5.9
+import PackageDescription
+
+// DO NOT MODIFY THIS FILE - managed by Capacitor CLI commands
+let package = Package(
+    name: "CapApp-SPM",
+    platforms: [.iOS(.v15)],
+    products: [
+        .library(
+            name: "CapApp-SPM",
+            targets: ["CapApp-SPM"])
+    ],
+    dependencies: [
+        .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", exact: "8.4.0"),
+        .package(name: "CapacitorSecureStoragePlugin", path: "../../../node_modules/capacitor-secure-storage-plugin")
+    ],
+    targets: [
+        .target(
+            name: "CapApp-SPM",
+            dependencies: [
+                .product(name: "Capacitor", package: "capacitor-swift-pm"),
+                .product(name: "Cordova", package: "capacitor-swift-pm"),
+                .product(name: "CapacitorSecureStoragePlugin", package: "CapacitorSecureStoragePlugin")
+            ]
+        )
+    ]
+)

ios/App/CapApp-SPM/README.md

@@ -0,0 +1,5 @@
+# CapApp-SPM
+
+This package is used to host SPM dependencies for your Capacitor project
+
+Do not modify the contents of it or there may be unintended consequences.

ios/App/CapApp-SPM/Sources/CapApp-SPM/CapApp-SPM.swift

@@ -0,0 +1 @@
+public let isCapacitorApp = true

ios/debug.xcconfig

@@ -0,0 +1 @@
+CAPACITOR_DEBUG = true

package.json

@@ -1 +1 @@
-{"name":"language-app","version":"1.0.0","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"canvas-confetti":"^1.9.4","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.4","vite":"^6.3.1"}}
+{"name":"snakkimo","version":"1.0.0","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"@capacitor/cli":"^8.4.0","@capacitor/core":"^8.4.0","@capacitor/ios":"^8.4.0","@capacitor/local-notifications":"^8.2.0","canvas-confetti":"^1.9.4","capacitor-secure-storage-plugin":"^0.13.0","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^4.3.4","vite":"^6.3.1"}}

setup_auth.mjs

@@ -0,0 +1,776 @@
+#!/usr/bin/env node
+// Führe aus: node setup_auth.js
+// Im Verzeichnis: /Users/tim/Documents/GitTea/Language
+
+import { writeFileSync, mkdirSync } from 'fs'
+import { join } from 'path'
+
+const ROOT = '/Users/tim/Documents/GitTea/Language'
+
+const files = {
+  // ─── .env (falls noch nicht vorhanden) ───────────────────
+  '.env': `VITE_DIRECTUS_URL=https://db.hejyou.com
+VITE_DIRECTUS_TOKEN=j6YyjhoFidnU3cI3MSrcgTXqO3t2wbZG
+`,
+
+  // ─── API Service ─────────────────────────────────────────
+  'src/api/directus.js': `const BASE = import.meta.env.VITE_DIRECTUS_URL
+const TOKEN = import.meta.env.VITE_DIRECTUS_TOKEN
+
+const headers = {
+  'Content-Type': 'application/json',
+  'Authorization': \`Bearer \${TOKEN}\`,
+}
+
+export async function login(email, password) {
+  const res = await fetch(\`\${BASE}/auth/login\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  })
+  const data = await res.json()
+  if (!res.ok) throw new Error(data.errors?.[0]?.message || 'Login fehlgeschlagen.')
+  return data.data
+}
+
+export async function getMe(userToken) {
+  const res = await fetch(
+    \`\${BASE}/users/me?fields=id,username,language_native,language_target\`,
+    { headers: { 'Authorization': \`Bearer \${userToken}\` } }
+  )
+  const data = await res.json()
+  if (!res.ok) throw new Error('Profil konnte nicht geladen werden.')
+  return data.data
+}
+
+export async function registerUser(email, password) {
+  const res = await fetch(\`\${BASE}/users\`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ email, password }),
+  })
+  const data = await res.json()
+  if (!res.ok) throw new Error(data.errors?.[0]?.message || 'Registrierung fehlgeschlagen.')
+  return data.data
+}
+
+export async function checkUsername(username) {
+  const clean = username.toLowerCase().replace(/[^a-z0-9_]/g, '')
+  const res = await fetch(
+    \`\${BASE}/items/users_language?filter[username_lowercases][_eq]=\${encodeURIComponent(clean)}&fields=id&limit=1\`,
+    { headers }
+  )
+  const data = await res.json()
+  return data.data?.length === 0
+}
+
+export async function createProfile({ userId, username, nativeLang, targetLang, userToken }) {
+  const clean = username.toLowerCase().replace(/[^a-z0-9_]/g, '')
+  const authHeaders = userToken
+    ? { 'Content-Type': 'application/json', 'Authorization': \`Bearer \${userToken}\` }
+    : headers
+
+  const profileRes = await fetch(\`\${BASE}/items/users_language\`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ username_public: username, username_lowercases: clean, status: 'published' }),
+  })
+  const profileData = await profileRes.json()
+  if (!profileRes.ok) throw new Error(profileData.errors?.[0]?.message || 'Profil konnte nicht erstellt werden.')
+  const profileId = profileData.data.id
+
+  await fetch(\`\${BASE}/users/\${userId}\`, {
+    method: 'PATCH',
+    headers: authHeaders,
+    body: JSON.stringify({ username: profileId, language_native: nativeLang, language_target: targetLang }),
+  })
+
+  await fetch(\`\${BASE}/items/users_language/\${profileId}\`, {
+    method: 'PATCH',
+    headers,
+    body: JSON.stringify({ user: userId }),
+  })
+
+  await fetch(\`\${BASE}/items/learning_pairs\`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      user: profileId,
+      language_from: nativeLang,
+      language_to: targetLang,
+      active: true,
+      current_level: 1,
+      points: 0,
+    }),
+  })
+
+  return profileId
+}
+
+export const LANGUAGE_OPTIONS = [
+  { id: '88053026-3d7e-4799-b10d-67187f7c1709', label: 'Deutsch', flag: '🇩🇪' },
+  { id: '99fbaa9d-3cac-48cb-a5e2-dcb320e913e4', label: 'Englisch', flag: '🇬🇧' },
+  { id: '25350b32-e9ab-4fec-946e-c0f11eff70dd', label: 'Schwedisch', flag: '🇸🇪' },
+]
+`,
+
+  // ─── Auth Context ─────────────────────────────────────────
+  'src/context/AuthContext.jsx': `import { createContext, useContext, useState, useEffect } from 'react'
+import { getMe } from '../api/directus'
+
+const AuthContext = createContext(null)
+
+export function AuthProvider({ children }) {
+  const [token, setToken] = useState(() => localStorage.getItem('hejyou_token'))
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!token) { setLoading(false); return }
+    getMe(token)
+      .then(setUser)
+      .catch(() => { localStorage.removeItem('hejyou_token'); setToken(null) })
+      .finally(() => setLoading(false))
+  }, [token])
+
+  const saveToken = (t) => {
+    localStorage.setItem('hejyou_token', t)
+    setToken(t)
+  }
+
+  const logout = () => {
+    localStorage.removeItem('hejyou_token')
+    setToken(null)
+    setUser(null)
+  }
+
+  return (
+    <AuthContext.Provider value={{ token, user, setUser, saveToken, logout, loading }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => useContext(AuthContext)
+`,
+
+  // ─── UI Components ────────────────────────────────────────
+  'src/components/auth/ui.jsx': `import { useState } from 'react'
+import styles from './auth.module.css'
+
+export function FormGroup({ label, children }) {
+  return (
+    <div className={styles.formGroup}>
+      {label && <label className={styles.label}>{label}</label>}
+      {children}
+    </div>
+  )
+}
+
+export function Input({ className, ...props }) {
+  return <input className={styles.input} {...props} />
+}
+
+export function Select({ children, ...props }) {
+  return (
+    <div className={styles.selectWrap}>
+      <select className={styles.input} {...props}>{children}</select>
+      <div className={styles.selectArrow} />
+    </div>
+  )
+}
+
+export function Button({ loading, children, ...props }) {
+  return (
+    <button className={styles.btn} {...props}>
+      {children}
+      {loading && <span className={styles.spinner} />}
+    </button>
+  )
+}
+
+export function Alert({ message }) {
+  if (!message) return null
+  return <div className={styles.alert}>{message}</div>
+}
+
+export function StepDots({ current, total }) {
+  return (
+    <div className={styles.stepDots}>
+      {Array.from({ length: total }).map((_, i) => (
+        <div
+          key={i}
+          className={styles.stepDot}
+          style={{ background: i === current ? 'var(--accent)' : 'var(--border)', width: i === current ? '18px' : '6px' }}
+        />
+      ))}
+      <span className={styles.stepLabel}>Schritt {current + 1} von {total}</span>
+    </div>
+  )
+}
+`,
+
+  // ─── Auth CSS Module ──────────────────────────────────────
+  'src/components/auth/auth.module.css': `:root {
+  --bg:        #F5F0E8;
+  --surface:   #FFFCF7;
+  --border:    #E2DAD0;
+  --text:      #2C2520;
+  --muted:     #9A8F85;
+  --accent:    #5C7A5E;
+  --accent-lt: #EAF0EA;
+  --danger:    #C0544A;
+  --danger-lt: #FBF0EF;
+  --radius:    14px;
+}
+
+.formGroup { margin-bottom: 16px; }
+
+.label {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--muted);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.input {
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 15px;
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(92,122,94,0.12);
+  background: var(--surface);
+}
+
+.selectWrap { position: relative; }
+.selectArrow {
+  position: absolute;
+  right: 14px; top: 50%;
+  transform: translateY(-50%);
+  width: 0; height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid var(--muted);
+  pointer-events: none;
+}
+.selectWrap .input { padding-right: 36px; cursor: pointer; }
+
+.btn {
+  width: 100%;
+  padding: 13px;
+  margin-top: 8px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: background 0.2s, transform 0.1s;
+}
+.btn:hover { background: #4a6650; }
+.btn:active { transform: scale(0.98); }
+.btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
+
+.spinner {
+  width: 14px; height: 14px;
+  border: 2px solid rgba(255,255,255,0.35);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+.alert {
+  background: var(--danger-lt);
+  border: 1px solid #EBCBC8;
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  font-size: 13px;
+  color: var(--danger);
+  margin-bottom: 16px;
+}
+
+.stepDots {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 24px;
+}
+.stepDot {
+  height: 6px;
+  border-radius: 3px;
+  transition: all 0.25s ease;
+}
+.stepLabel {
+  font-size: 11px;
+  color: var(--muted);
+  margin-left: 4px;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+`,
+
+  // ─── Login Form ───────────────────────────────────────────
+  'src/components/auth/LoginForm.jsx': `import { useState } from 'react'
+import { login, getMe } from '../../api/directus'
+import { useAuth } from '../../context/AuthContext'
+import { FormGroup, Input, Button, Alert } from './ui'
+
+export default function LoginForm({ onNeedsProfile }) {
+  const { saveToken, setUser } = useAuth()
+  const [email, setEmail] = useState('')
+  const [pw, setPw] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e?.preventDefault()
+    if (!email || !pw) { setError('Bitte E-Mail und Passwort eingeben.'); return }
+    setError('')
+    setLoading(true)
+    try {
+      const { access_token } = await login(email, pw)
+      saveToken(access_token)
+      const me = await getMe(access_token)
+      setUser(me)
+      if (!me.username || !me.language_native || !me.language_target) {
+        onNeedsProfile(me.id, access_token)
+      }
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Alert message={error} />
+      <FormGroup label="E-Mail">
+        <Input type="email" placeholder="deine@email.de" value={email}
+          onChange={e => setEmail(e.target.value)} autoComplete="email" autoFocus />
+      </FormGroup>
+      <FormGroup label="Passwort">
+        <Input type="password" placeholder="••••••••" value={pw}
+          onChange={e => setPw(e.target.value)} autoComplete="current-password" />
+      </FormGroup>
+      <Button type="submit" loading={loading} disabled={loading}>
+        {loading ? 'Anmelden…' : 'Anmelden'}
+      </Button>
+    </form>
+  )
+}
+`,
+
+  // ─── Register Step 1 ──────────────────────────────────────
+  'src/components/auth/RegisterStep1.jsx': `import { useState } from 'react'
+import { registerUser, login } from '../../api/directus'
+import { useAuth } from '../../context/AuthContext'
+import { FormGroup, Input, Button, Alert, StepDots } from './ui'
+
+export default function RegisterStep1({ onSuccess }) {
+  const { saveToken } = useAuth()
+  const [email, setEmail] = useState('')
+  const [pw, setPw] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e?.preventDefault()
+    if (!email || !pw) { setError('Bitte alle Felder ausfüllen.'); return }
+    if (pw.length < 8) { setError('Passwort muss mindestens 8 Zeichen haben.'); return }
+    setError('')
+    setLoading(true)
+    try {
+      const newUser = await registerUser(email, pw)
+      const { access_token } = await login(email, pw)
+      saveToken(access_token)
+      onSuccess(newUser.id, access_token)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <StepDots current={0} total={2} />
+      <Alert message={error} />
+      <FormGroup label="E-Mail">
+        <Input type="email" placeholder="deine@email.de" value={email}
+          onChange={e => setEmail(e.target.value)} autoComplete="email" autoFocus />
+      </FormGroup>
+      <FormGroup label="Passwort">
+        <Input type="password" placeholder="Mindestens 8 Zeichen" value={pw}
+          onChange={e => setPw(e.target.value)} autoComplete="new-password" />
+      </FormGroup>
+      <Button type="submit" loading={loading} disabled={loading}>
+        {loading ? 'Weiter…' : 'Weiter'}
+      </Button>
+    </form>
+  )
+}
+`,
+
+  // ─── Register Step 2 ──────────────────────────────────────
+  'src/components/auth/RegisterStep2.jsx': `import { useState, useRef, useCallback } from 'react'
+import { checkUsername, createProfile, LANGUAGE_OPTIONS } from '../../api/directus'
+import { useAuth } from '../../context/AuthContext'
+import { FormGroup, Input, Select, Button, Alert, StepDots } from './ui'
+import styles from './auth.module.css'
+
+export default function RegisterStep2({ userId, userToken, onSuccess }) {
+  const { setUser } = useAuth()
+  const [username, setUsername] = useState('')
+  const [nativeLang, setNativeLang] = useState('')
+  const [targetLang, setTargetLang] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [usernameState, setUsernameState] = useState('idle')
+  const debounceRef = useRef(null)
+
+  const handleUsernameChange = useCallback((val) => {
+    setUsername(val)
+    setUsernameState('idle')
+    clearTimeout(debounceRef.current)
+    if (val.length < 3) return
+    setUsernameState('checking')
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const available = await checkUsername(val)
+        setUsernameState(available ? 'available' : 'taken')
+      } catch { setUsernameState('idle') }
+    }, 450)
+  }, [])
+
+  const handleSubmit = async (e) => {
+    e?.preventDefault()
+    if (!username) { setError('Bitte einen Username wählen.'); return }
+    if (usernameState !== 'available') { setError('Bitte einen verfügbaren Username wählen.'); return }
+    if (!nativeLang) { setError('Bitte Muttersprache wählen.'); return }
+    if (!targetLang) { setError('Bitte Zielsprache wählen.'); return }
+    if (nativeLang === targetLang) { setError('Mutter- und Zielsprache dürfen nicht gleich sein.'); return }
+    setError('')
+    setLoading(true)
+    try {
+      await createProfile({ userId, username, nativeLang, targetLang, userToken })
+      setUser(prev => ({ ...prev, username: true, language_native: nativeLang, language_target: targetLang }))
+      onSuccess(username)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const statusColor = { idle: 'var(--muted)', checking: 'var(--muted)', available: 'var(--accent)', taken: 'var(--danger)' }
+  const statusText = { idle: '', checking: '…', available: '✓ verfügbar', taken: '✕ vergeben' }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <StepDots current={1} total={2} />
+      <Alert message={error} />
+      <FormGroup label="Username">
+        <div style={{ position: 'relative' }}>
+          <Input type="text" placeholder="dein_username" value={username}
+            onChange={e => handleUsernameChange(e.target.value)}
+            autoComplete="off" autoFocus style={{ paddingRight: '110px' }} />
+          {usernameState !== 'idle' && (
+            <span style={{
+              position: 'absolute', right: '12px', top: '50%',
+              transform: 'translateY(-50%)', fontSize: '12px', fontWeight: 500,
+              color: statusColor[usernameState], whiteSpace: 'nowrap',
+            }}>
+              {statusText[usernameState]}
+            </span>
+          )}
+        </div>
+      </FormGroup>
+      <FormGroup label="Muttersprache">
+        <Select value={nativeLang} onChange={e => setNativeLang(e.target.value)}>
+          <option value="">Bitte wählen…</option>
+          {LANGUAGE_OPTIONS.map(l => <option key={l.id} value={l.id}>{l.flag} {l.label}</option>)}
+        </Select>
+      </FormGroup>
+      <FormGroup label="Ich möchte lernen">
+        <Select value={targetLang} onChange={e => setTargetLang(e.target.value)}>
+          <option value="">Bitte wählen…</option>
+          {LANGUAGE_OPTIONS.filter(l => l.id !== nativeLang).map(l => <option key={l.id} value={l.id}>{l.flag} {l.label}</option>)}
+        </Select>
+      </FormGroup>
+      <Button type="submit" loading={loading}
+        disabled={loading || usernameState === 'taken' || usernameState === 'checking'}>
+        {loading ? 'Speichere…' : 'Profil erstellen'}
+      </Button>
+    </form>
+  )
+}
+`,
+
+  // ─── Auth Screen ──────────────────────────────────────────
+  'src/components/auth/AuthScreen.jsx': `import { useState } from 'react'
+import LoginForm from './LoginForm'
+import RegisterStep1 from './RegisterStep1'
+import RegisterStep2 from './RegisterStep2'
+import styles from './AuthScreen.module.css'
+
+function Brand() {
+  return (
+    <div className={styles.brand}>
+      <div className={styles.brandMark}>
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M8 12q2-5 4-4t4 4-4 4-4-4" />
+        </svg>
+      </div>
+      <h1 className={styles.brandTitle}>HejYou</h1>
+      <p className={styles.brandSub}>Sprachen lernen wie ein Kind</p>
+    </div>
+  )
+}
+
+function ModeToggle({ mode, onChange }) {
+  return (
+    <div className={styles.toggle}>
+      {['login', 'register'].map(m => (
+        <button key={m} onClick={() => onChange(m)}
+          className={mode === m ? \`\${styles.toggleBtn} \${styles.toggleBtnActive}\` : styles.toggleBtn}>
+          {m === 'login' ? 'Anmelden' : 'Registrieren'}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function SuccessScreen({ username }) {
+  return (
+    <div className={styles.success}>
+      <div className={styles.successCheck}>
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      </div>
+      <strong className={styles.successTitle}>Willkommen{username ? \`, \${username}\` : ''}!</strong>
+      <p className={styles.successSub}>Dein Abenteuer beginnt jetzt.</p>
+    </div>
+  )
+}
+
+export default function AuthScreen() {
+  const [mode, setMode] = useState(() => localStorage.getItem('hejyou_last_mode') || 'login')
+  const [step, setStep] = useState('main')
+  const [pendingUserId, setPendingUserId] = useState(null)
+  const [pendingToken, setPendingToken] = useState(null)
+  const [successName, setSuccessName] = useState('')
+  const [showToggle, setShowToggle] = useState(true)
+
+  const handleModeChange = (m) => {
+    setMode(m)
+    localStorage.setItem('hejyou_last_mode', m)
+    setStep('main')
+    setShowToggle(true)
+  }
+
+  const handleNeedsProfile = (userId, token) => {
+    setPendingUserId(userId); setPendingToken(token)
+    setShowToggle(false); setStep('profile')
+  }
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.card}>
+        <Brand />
+        {showToggle && step === 'main' && <ModeToggle mode={mode} onChange={handleModeChange} />}
+        {step === 'main' && mode === 'login' && <LoginForm onNeedsProfile={handleNeedsProfile} />}
+        {step === 'main' && mode === 'register' && <RegisterStep1 onSuccess={(id, t) => handleNeedsProfile(id, t)} />}
+        {step === 'profile' && <RegisterStep2 userId={pendingUserId} userToken={pendingToken} onSuccess={(name) => { setSuccessName(name); setStep('success') }} />}
+        {step === 'success' && <SuccessScreen username={successName} />}
+      </div>
+    </div>
+  )
+}
+`,
+
+  // ─── AuthScreen CSS Module ────────────────────────────────
+  'src/components/auth/AuthScreen.module.css': `.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: var(--bg, #F5F0E8);
+}
+
+.card {
+  background: var(--surface, #FFFCF7);
+  border: 1px solid var(--border, #E2DAD0);
+  border-radius: 24px;
+  padding: 48px 44px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: 0 2px 40px rgba(44,37,32,0.06);
+  animation: fadeUp 0.3s ease;
+}
+
+.brand { text-align: center; margin-bottom: 36px; }
+.brandMark {
+  width: 48px; height: 48px;
+  background: var(--accent, #5C7A5E);
+  border-radius: 50%;
+  margin: 0 auto 14px;
+  display: flex; align-items: center; justify-content: center;
+}
+.brandTitle {
+  font-family: 'Lora', serif;
+  font-size: 22px; font-weight: 500;
+  letter-spacing: -0.3px;
+  color: var(--text, #2C2520);
+}
+.brandSub { font-size: 13px; color: var(--muted, #9A8F85); margin-top: 4px; }
+
+.toggle {
+  display: flex;
+  background: var(--bg, #F5F0E8);
+  border: 1px solid var(--border, #E2DAD0);
+  border-radius: 10px;
+  padding: 3px; gap: 3px;
+  margin-bottom: 32px;
+}
+.toggleBtn {
+  flex: 1; padding: 8px;
+  border: none; border-radius: 8px;
+  background: transparent;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 13px; font-weight: 500;
+  color: var(--muted, #9A8F85);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.toggleBtnActive {
+  background: var(--surface, #FFFCF7);
+  color: var(--text, #2C2520);
+  box-shadow: 0 1px 4px rgba(44,37,32,0.08);
+}
+
+.success { text-align: center; padding: 24px 0; }
+.successCheck {
+  width: 52px; height: 52px;
+  background: var(--accent-lt, #EAF0EA);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  margin: 0 auto 16px;
+}
+.successTitle {
+  font-family: 'Lora', serif;
+  font-size: 18px;
+  display: block; margin-bottom: 8px;
+}
+.successSub { font-size: 14px; color: var(--muted, #9A8F85); }
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: none; }
+}
+`,
+
+  // ─── App.jsx (ersetzt bestehende) ─────────────────────────
+  'src/App.jsx': `import { AuthProvider, useAuth } from './context/AuthContext'
+import AuthScreen from './components/auth/AuthScreen'
+
+function AppContent() {
+  const { user, loading, logout } = useAuth()
+
+  if (loading) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{
+          width: '32px', height: '32px',
+          border: '2px solid #E2DAD0',
+          borderTopColor: '#5C7A5E',
+          borderRadius: '50%',
+          animation: 'spin 0.7s linear infinite',
+        }} />
+        <style>{\`@keyframes spin { to { transform: rotate(360deg); } }\`}</style>
+      </div>
+    )
+  }
+
+  // Nicht eingeloggt oder Profil unvollständig → Auth Screen
+  if (!user || !user.username || !user.language_native || !user.language_target) {
+    return <AuthScreen />
+  }
+
+  // ─── Eingeloggt → hier kommt dein bestehender App-Content ──
+  return (
+    <div>
+      {/* TODO: Deine bestehenden Pages/Routes hier einbauen */}
+      <p style={{ padding: 32, fontFamily: 'sans-serif' }}>
+        Eingeloggt ✓ — hier kommt der Feed.
+        <button onClick={logout} style={{ marginLeft: 16, cursor: 'pointer' }}>Logout</button>
+      </p>
+    </div>
+  )
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  )
+}
+`,
+}
+
+// Erstelle alle Verzeichnisse und schreibe Dateien
+const dirs = new Set()
+for (const path of Object.keys(files)) {
+  const parts = path.split('/')
+  for (let i = 1; i < parts.length; i++) {
+    dirs.add(join(ROOT, ...parts.slice(0, i)))
+  }
+}
+for (const dir of dirs) {
+  try { mkdirSync(dir, { recursive: true }) } catch {}
+}
+
+let written = 0
+for (const [path, content] of Object.entries(files)) {
+  const fullPath = join(ROOT, path)
+  // .env nur schreiben wenn noch nicht vorhanden
+  if (path === '.env') {
+    try {
+      const existing = await import('fs').then(m => m.readFileSync(fullPath, 'utf8'))
+      console.log('⏭  .env bereits vorhanden – übersprungen')
+      continue
+    } catch {}
+  }
+  writeFileSync(fullPath, content, 'utf8')
+  console.log(`✓  ${path}`)
+  written++
+}
+
+console.log(\`\nFertig! \${written} Dateien geschrieben.\`)
+console.log('\nJetzt starten:')
+console.log('  npm install  (falls neue Abhängigkeiten fehlen)')
+console.log('  npm run dev')

src/App.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { AuthProvider, useAuth } from './context/AuthContext'
 import AuthScreen from './components/auth/AuthScreen'
 import BottomNav from './BottomNav'
@@ -6,6 +6,7 @@ import Feed   from './pages/Feed'
 import Game   from './pages/Game'
 import Pro    from './pages/Pro'
 import Profil from './pages/Profil'
+import { scheduleStreakReminder } from './utils/streakReminder'
 
 const PAGES = { feed: Feed, game: Game, pro: Pro, profil: Profil }
 
@@ -13,9 +14,14 @@ function AppContent() {
   const { user, loading } = useAuth()
   const [page, setPage] = useState('feed')
 
+  // Lokale Tages-Erinnerung planen, sobald ein eingeloggter Nutzer da ist (nativ; web no-op).
+  useEffect(() => {
+    if (user?.username) scheduleStreakReminder(user.streak_days || 0)
+  }, [user?.username, user?.streak_days])
+
   if (loading) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
+      <div style={{ height: '100%', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
         <div className="app-spinner" />
       </div>
     )

src/api/directus.js

@@ -80,9 +80,11 @@ export function langById(id, options) {
 
 // ── Feed ──────────────────────────────────────────────────────────────────────
 
-export async function getFeedPairs(userToken, lang = 'de', limit = 20) {
+export async function getFeedPairs(userToken, lang = 'de', limit = 20, exclude = []) {
+  const params = new URLSearchParams({ lang, limit: String(limit) })
+  if (exclude.length) params.set('exclude', exclude.join(','))
   const res = await fetch(
-    `${BASE}/auth/feed?lang=${encodeURIComponent(lang)}&limit=${limit}`,
+    `${BASE}/auth/feed?${params}`,
     { headers: auth(userToken) }
   )
   const data = await res.json()
@@ -118,6 +120,14 @@ export async function getStats(userToken) {
   return data
 }
 
+// Alle Erfolge mit Freischalt-Status: [{ key, label, icon, unlocked, unlocked_at }].
+export async function getAchievements(userToken) {
+  const res = await fetch(`${BASE}/auth/achievements`, { headers: auth(userToken) })
+  const data = await res.json().catch(() => [])
+  if (!res.ok) throw new Error('Erfolge konnten nicht geladen werden.')
+  return data
+}
+
 // Tagesziel (EP/Tag) setzen. Gibt { daily_goal_ep } zurück.
 export async function setDailyGoal(dailyGoalEp, userToken) {
   const res = await fetch(`${BASE}/auth/goal`, {

src/assets/logo.svg

@@ -0,0 +1,34 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" role="img">
+  <title>Snakkimo Logo</title>
+  <desc>Offenes Buch mit wachsendem Blatt und Sonne, in den App-Farben</desc>
+  <rect width="1024" height="1024" fill="#EDE0CE"/>
+
+  <path d="M220 400
+           C140 440 130 540 130 620
+           C130 740 230 800 380 810
+           L644 810
+           C794 800 894 740 894 620
+           C894 540 884 440 804 400"
+        fill="none" stroke="#7A5C3A" stroke-width="34" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <g fill="none" stroke="#5C3D22" stroke-width="12" stroke-linecap="round">
+    <path d="M500 800 C460 680 380 540 260 430"/>
+    <path d="M524 800 C580 680 680 540 800 430"/>
+  </g>
+
+  <g>
+    <path d="M512 800
+             C560 620 680 380 820 200
+             C840 380 800 580 700 720
+             C640 790 560 800 512 800 Z" fill="#C4A85A"/>
+    <path d="M520 780 C580 620 700 400 820 220"
+          fill="none" stroke="#7A5C3A" stroke-width="14" stroke-linecap="round"/>
+  </g>
+
+  <g stroke="#C4A85A" stroke-width="22" stroke-linecap="round">
+    <line x1="840" y1="30"  x2="840" y2="75"/>
+    <line x1="790" y1="45"  x2="815" y2="82"/>
+    <line x1="895" y1="50"  x2="872" y2="88"/>
+    <line x1="945" y1="95"  x2="908" y2="118"/>
+  </g>
+</svg>

src/components/EpFloat.jsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import './Moments.css'
+
+// Kurzes „+N EP", das vom Bestätigen-Button aufschwebt — Belohnung genau dort,
+// wo das Auge ist. Eltern-Element braucht position: relative.
+export default function EpFloat({ points, onDone }) {
+  useEffect(() => {
+    const t = setTimeout(() => onDone?.(), 1000)
+    return () => clearTimeout(t)
+  }, [onDone])
+  return <span className="ep-float" aria-hidden="true">+{points} EP</span>
+}

src/components/MilestoneOverlay.jsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react'
+import confetti from 'canvas-confetti'
+import './Moments.css'
+
+const COLORS = ['#C4A85A', '#7A5C2E', '#3D7055', '#E8C9A8', '#fff']
+
+function celebrate() {
+  const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches
+  if (reduce) return
+  confetti({ particleCount: 140, spread: 90, origin: { y: 0.5 }, colors: COLORS, scalar: 1 })
+  setTimeout(() => confetti({ particleCount: 70, spread: 110, origin: { y: 0.45 }, colors: COLORS, scalar: 0.8 }), 220)
+}
+
+// Texte je Milestone-Art. value = Level-Nummer / Streak-Tage / Tagesziel-EP.
+function content(m) {
+  const { kind, value } = m
+  if (kind === 'level')   return { cls: '', icon: '🏆', title: `Level ${value} erreicht!`, sub: 'Du wächst spürbar — weiter so.' }
+  if (kind === 'streak')  return { cls: 'streak', icon: '🔥', title: `${value} Tage am Stück!`, sub: 'Dranbleiben zahlt sich aus.' }
+  if (kind === 'goal')    return { cls: 'goal', icon: '🎯', title: 'Tagesziel erreicht!', sub: 'Stark — heute hast du dein Pensum geschafft.' }
+  if (kind === 'achievement') return { cls: 'streak', icon: m.icon || '🎖️', title: m.label || 'Erfolg!', sub: 'Erfolg freigeschaltet! 🎉' }
+  return { cls: '', icon: '🎉', title: 'Geschafft!', sub: '' }
+}
+
+export default function MilestoneOverlay({ milestone, onClose }) {
+  useEffect(() => { celebrate() }, [milestone])
+  const { cls, icon, title, sub } = content(milestone)
+  return (
+    <div className="milestone-overlay" onClick={onClose} role="dialog" aria-label={title}>
+      <div className="milestone-card" onClick={e => e.stopPropagation()}>
+        <div className={`milestone-badge ${cls}`} aria-hidden="true">{icon}</div>
+        <h2 className="milestone-title">{title}</h2>
+        {sub && <p className="milestone-sub">{sub}</p>}
+        <button className="milestone-btn" onClick={onClose} autoFocus>Weiter</button>
+      </div>
+    </div>
+  )
+}

src/components/Moments.css

@@ -0,0 +1,203 @@
+/* ── EP-Float: „+3 EP" schwebt vom Button auf ───────────────── */
+.ep-float {
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: var(--r-pill);
+  background: var(--gold-soft);
+  color: var(--accent-strong);
+  font-family: var(--font-ui);
+  font-weight: 800;
+  font-size: 15px;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: var(--shadow-soft);
+  animation: epFloatUp 1s var(--ease) forwards;
+}
+@keyframes epFloatUp {
+  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.8); }
+  20%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
+  35%  { transform: translateX(-50%) translateY(0) scale(1); }
+  100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(0.95); }
+}
+
+/* ── Combo-Pill (oben rechts, neben dem zentrierten EP-Badge) ── */
+.combo-pill {
+  position: fixed;
+  top: calc(env(safe-area-inset-top, 0px) + 14px);
+  right: 14px;
+  z-index: 30;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border-radius: var(--r-pill);
+  background: var(--accent);
+  color: #F5EFE6;
+  font-weight: 800;
+  font-size: 13px;
+  box-shadow: var(--shadow-pop);
+  animation: comboPop 0.32s var(--ease);
+}
+@keyframes comboPop {
+  from { opacity: 0; transform: translateY(-6px) scale(0.85); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ── Streak-Nudge (Loss-Aversion-Bar oben) ──────────────────── */
+.streak-nudge {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 40;
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  padding: calc(env(safe-area-inset-top, 0px) + 9px) 16px 9px;
+  background: var(--accent);
+  color: #F5EFE6;
+  font-size: 13px; font-weight: 700;
+  box-shadow: var(--shadow-soft);
+  animation: comboPop 0.3s var(--ease);
+}
+.streak-nudge-x {
+  flex: none;
+  background: rgba(255, 255, 255, 0.18); border: none; color: #F5EFE6;
+  width: 22px; height: 22px; border-radius: 50%;
+  font-size: 15px; line-height: 1; cursor: pointer;
+}
+
+/* ── Milestone-Overlay (Level-Up / Streak / Tagesziel) ──────── */
+.milestone-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sp-5);
+  background: rgba(58, 37, 21, 0.55);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  animation: msFade 0.25s var(--ease);
+}
+@keyframes msFade { from { opacity: 0; } to { opacity: 1; } }
+
+.milestone-card {
+  width: 100%;
+  max-width: 320px;
+  background: var(--surface);
+  border-radius: var(--r-lg);
+  padding: var(--sp-6) var(--sp-5) var(--sp-5);
+  text-align: center;
+  box-shadow: var(--shadow-card);
+  animation: msPop 0.4s var(--ease);
+}
+@keyframes msPop {
+  from { opacity: 0; transform: translateY(14px) scale(0.92); }
+  to   { opacity: 1; transform: none; }
+}
+
+.milestone-badge {
+  width: 84px;
+  height: 84px;
+  margin: 0 auto var(--sp-4);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40px;
+  background: var(--gold-soft);
+  animation: msBadge 0.6s var(--ease) 0.1s both;
+}
+@keyframes msBadge {
+  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
+  60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
+  100% { transform: scale(1) rotate(0); }
+}
+.milestone-badge.streak { background: #F6E0CB; }
+.milestone-badge.goal   { background: var(--success-soft); }
+
+.milestone-title {
+  font-family: var(--font-display);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-strong);
+  margin: 0 0 6px;
+}
+.milestone-sub {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0 0 var(--sp-5);
+  line-height: 1.5;
+}
+.milestone-btn {
+  width: 100%;
+  padding: 13px;
+  border: none;
+  border-radius: var(--r-md);
+  background: var(--accent);
+  color: #F5EFE6;
+  font-family: var(--font-ui);
+  font-weight: 700;
+  font-size: 15px;
+  cursor: pointer;
+  transition: transform var(--dur-fast) var(--ease);
+}
+.milestone-btn:active { transform: scale(0.98); }
+
+/* ── Session-Summary (ersetzt die End-Sackgasse) ────────────── */
+.session-summary {
+  margin: var(--sp-4) auto;
+  width: calc(100% - 2 * var(--sp-4));
+  max-width: 460px;
+  background: var(--surface);
+  border-radius: var(--r-lg);
+  padding: var(--sp-5) var(--sp-5) var(--sp-4);
+  text-align: center;
+  box-shadow: var(--shadow-card);
+}
+.session-summary .ss-icon {
+  width: 64px; height: 64px;
+  margin: 0 auto var(--sp-3);
+  border-radius: 50%;
+  background: var(--gold-soft);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 30px;
+}
+.session-summary .ss-title {
+  font-family: var(--font-display);
+  font-size: 21px; font-weight: 700;
+  color: var(--text-strong);
+  margin: 0 0 2px;
+}
+.session-summary .ss-sub {
+  font-size: 13px; color: var(--text-muted); margin: 0 0 var(--sp-4);
+}
+.ss-stats {
+  display: flex;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-4);
+}
+.ss-stat {
+  flex: 1;
+  background: var(--surface-2);
+  border-radius: var(--r-sm);
+  padding: var(--sp-3) var(--sp-2);
+}
+.ss-stat .n { display: block; font-size: 20px; font-weight: 800; color: var(--text-strong); }
+.ss-stat .c { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+.ss-story {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+  background: var(--accent-soft);
+  border-radius: var(--r-sm);
+  padding: 10px 12px;
+  font-size: 13px;
+  color: var(--text);
+}
+.ss-story .si { font-size: 18px; }

src/components/PairSentenceCard.jsx

@@ -1,6 +1,10 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useMemo } from 'react'
 import confetti from 'canvas-confetti'
 import usePairAudio from '../hooks/usePairAudio'
+import SelectionOverlay from './SelectionOverlay'
+import EpFloat from './EpFloat'
+import { buildChipTimings, activeChipIdAt } from '../utils/chipTimings'
+import { speak } from '../utils/speak'
 import './PairCards.css'
 
 function triggerConfetti() {
@@ -14,42 +18,6 @@ function triggerConfetti() {
   })
 }
 
-function SelectionOverlay({ chip }) {
-  const sels = chip?.selections
-  if (!sels?.length) return null
-  const maskId = `selmask-${chip.id.slice(0, 8)}`
-  const label  = chip.label || ''
-  const toPoints = pts => pts.map(p => `${p.x * 100},${p.y * 100}`).join(' ')
-  const firstPts = sels[0].points
-  const xs = firstPts.map(p => p.x * 100)
-  const ys = firstPts.map(p => p.y * 100)
-  const cx    = (Math.min(...xs) + Math.max(...xs)) / 2
-  const labelY = Math.min(Math.max(...ys) + 6, 94)
-  return (
-    <svg className="pair-bbox-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
-      <defs>
-        <mask id={maskId}>
-          <rect width="100" height="100" fill="white" />
-          {sels.map((s, i) => <polygon key={i} points={toPoints(s.points)} fill="black" />)}
-        </mask>
-      </defs>
-      <rect width="100" height="100" fill="rgba(0,0,0,0.5)" mask={`url(#${maskId})`} />
-      {sels.map((s, i) => (
-        <polygon key={i} points={toPoints(s.points)}
-          fill="rgba(255,215,100,0.08)" stroke="rgba(255,215,100,0.92)"
-          strokeWidth="0.8" strokeLinejoin="round" />
-      ))}
-      {label && (
-        <text x={cx} y={labelY} textAnchor="middle"
-          fill="white" fontSize="5.5" fontWeight="700" fontFamily="Nunito, sans-serif"
-          style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}>
-          {label}
-        </text>
-      )}
-    </svg>
-  )
-}
-
 // Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
 function resolveSentence(sentence, placeholders, onChipClick, activeId) {
   if (!sentence) return null
@@ -87,16 +55,7 @@ function extractVocab(sentence) {
     .map(m => ({ label: m[1], id: m[2] }))
 }
 
-// Strip placeholders to plain text for TTS
-function toPlainText(sentence) {
-  if (!sentence) return ''
-  return sentence
-    .replace(/\{\{([^.]+)\.[wo]:[0-9a-f-]{36}\}\}/g, '$1')
-    .replace(/[⟦〚]PH\d+:([^⟧〛]*)[⟧〛]/g, '$1')
-}
-
 const LANG_LABELS = { sv: 'Svenska', en: 'English', de: 'Deutsch' }
-const LANG_TTS    = { sv: 'sv-SE',  en: 'en-US',   de: 'de-DE'  }
 
 // Circumference of r=16 circle ≈ 100.53
 const RING_C = 2 * Math.PI * 16
@@ -107,7 +66,9 @@ export default function PairSentenceCard({ card, onComplete }) {
   const [showTranslation, setShowTranslation] = useState(false)
   const [holding,         setHolding]         = useState(false)
   const [unlocked,        setUnlocked]        = useState(false)
+  const [showFloat,       setShowFloat]       = useState(false)
   const holdCompleted = useRef(false)
+  const points = card.meta?.points ?? 2
 
   const lang   = card.lang || 'de'
   const native = lang === 'de' ? 'en' : 'de'
@@ -117,7 +78,17 @@ export default function PairSentenceCard({ card, onComplete }) {
   const hint     = stmt?.[`sentence_${native}`] || null
   const pic      = card.picture?.url
 
-  const { play, playing } = usePairAudio(stmt?.audio_url)
+  const { play, playing, currentTime } = usePairAudio(stmt?.audio_url)
+
+  // Karaoke: aktives Chip aus den Audio-Timestamps ableiten, solange vorgelesen wird.
+  const timings = useMemo(
+    () => buildChipTimings(sentence, stmt?.audio_alignment),
+    [sentence, stmt?.audio_alignment],
+  )
+  const audioChipId = playing ? activeChipIdAt(timings, currentTime) : null
+  const audioObject = audioChipId && card.placeholders?.[audioChipId]?.type === 'object'
+    ? { id: audioChipId, ...card.placeholders[audioChipId] }
+    : null
 
   const isWord   = activeChip && activeChip.type === 'word'
   const isObject = activeChip && activeChip.type === 'object' && activeChip.selections?.length
@@ -129,23 +100,19 @@ export default function PairSentenceCard({ card, onComplete }) {
   }
 
   function handleConfirm() {
-    if (!unlocked) return
+    if (done || !unlocked) return
     setDone(true)
     setActiveChip(null)
+    setShowFloat(true)
     triggerConfetti()
     setTimeout(() => onComplete('correct'), 900)
   }
 
   function handlePlay() {
+    // play() liefert false, wenn kein Audio-File da ist ODER es nicht geladen
+    // werden konnte → stiller TTS-Fallback.
     if (play()) { setUnlocked(true); return }
-    // Fallback: Browser-TTS, falls kein Audio-File vorhanden
+    if (speak(sentence, lang)) setUnlocked(true)
-    if (!window.speechSynthesis || !sentence) return
-    window.speechSynthesis.cancel()
-    const utt = new SpeechSynthesisUtterance(toPlainText(sentence))
-    utt.lang = LANG_TTS[lang] || 'de-DE'
-    utt.rate = 0.9
-    window.speechSynthesis.speak(utt)
-    setUnlocked(true)
   }
 
   function startHold() {
@@ -179,6 +146,7 @@ export default function PairSentenceCard({ card, onComplete }) {
           </div>
         )}
         {isObject && <SelectionOverlay chip={activeChip} />}
+        {!isObject && audioObject && <SelectionOverlay chip={audioObject} outlineOnly />}
       </div>
 
       <div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
@@ -189,7 +157,7 @@ export default function PairSentenceCard({ card, onComplete }) {
           <div className="pair-sentence-text">
             <p className="pair-sentence pair-sentence-clickable" onClick={handlePlay}
               style={{ opacity: showTranslation ? 0 : 1, transition: 'opacity 0.18s', margin: 0 }}>
-              {resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
+              {resolveSentence(sentence, card.placeholders, handleChipClick, audioChipId ?? activeChip?.id)}
             </p>
             {hint && (
               <p className="pair-sentence" style={{
@@ -268,7 +236,8 @@ export default function PairSentenceCard({ card, onComplete }) {
           </div>
         )}
 
-        <div className="pair-btn-row" style={{ marginTop: 20 }}>
+        <div className="pair-btn-row" style={{ marginTop: 20, position: 'relative' }}>
+          {showFloat && <EpFloat points={points} onDone={() => setShowFloat(false)} />}
           <button
             className={`pair-btn ${done ? 'pair-btn-correct' : unlocked ? 'pair-btn-primary' : 'pair-btn-locked'}`}
             onClick={handleConfirm}

src/components/PairWordCard.jsx

@@ -1,6 +1,11 @@
 import { useState, useMemo } from 'react'
 import confetti from 'canvas-confetti'
 import usePairAudio from '../hooks/usePairAudio'
+import SelectionOverlay from './SelectionOverlay'
+import EpFloat from './EpFloat'
+import { praise, encourage } from '../utils/praise'
+import { buildChipTimings, activeChipIdAt } from '../utils/chipTimings'
+import { speak } from '../utils/speak'
 import './PairCards.css'
 
 function triggerConfetti() {
@@ -14,42 +19,6 @@ function triggerConfetti() {
   })
 }
 
-function SelectionOverlay({ chip }) {
-  const sels = chip?.selections
-  if (!sels?.length) return null
-  const maskId = `selmask-${chip.id.slice(0, 8)}`
-  const label  = chip.label || ''
-  const toPoints = pts => pts.map(p => `${p.x * 100},${p.y * 100}`).join(' ')
-  const firstPts = sels[0].points
-  const xs = firstPts.map(p => p.x * 100)
-  const ys = firstPts.map(p => p.y * 100)
-  const cx    = (Math.min(...xs) + Math.max(...xs)) / 2
-  const labelY = Math.min(Math.max(...ys) + 6, 94)
-  return (
-    <svg className="pair-bbox-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
-      <defs>
-        <mask id={maskId}>
-          <rect width="100" height="100" fill="white" />
-          {sels.map((s, i) => <polygon key={i} points={toPoints(s.points)} fill="black" />)}
-        </mask>
-      </defs>
-      <rect width="100" height="100" fill="rgba(0,0,0,0.5)" mask={`url(#${maskId})`} />
-      {sels.map((s, i) => (
-        <polygon key={i} points={toPoints(s.points)}
-          fill="rgba(255,215,100,0.08)" stroke="rgba(255,215,100,0.92)"
-          strokeWidth="0.8" strokeLinejoin="round" />
-      ))}
-      {label && (
-        <text x={cx} y={labelY} textAnchor="middle"
-          fill="white" fontSize="5.5" fontWeight="700" fontFamily="Nunito, sans-serif"
-          style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}>
-          {label}
-        </text>
-      )}
-    </svg>
-  )
-}
-
 // Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
 function resolveSentence(sentence, placeholders, onChipClick, activeId) {
   if (!sentence) return null
@@ -91,6 +60,10 @@ export default function PairWordCard({ card, onComplete }) {
   const [confirmed,   setConfirmed]   = useState(false)     // after Bestätigen
   const [isCorrect,   setIsCorrect]   = useState(false)
   const [activeChip,  setActiveChip]  = useState(null)
+  const [showFloat,   setShowFloat]   = useState(false)
+  const [praiseWord]    = useState(() => praise())
+  const [encourageWord] = useState(() => encourage())
+  const points = card.meta?.points ?? 3
 
   const lang   = card.lang || 'de'
   const native = lang === 'de' ? 'en' : 'de'
@@ -106,7 +79,17 @@ export default function PairWordCard({ card, onComplete }) {
   const hint     = q?.[`sentence_${native}`] || null
   const pic      = card.picture?.url
 
-  const { play, playing } = usePairAudio(q?.audio_url)
+  const { play, playing, currentTime } = usePairAudio(q?.audio_url)
+
+  // Karaoke: aktives Chip aus den Audio-Timestamps der Frage ableiten.
+  const timings = useMemo(
+    () => buildChipTimings(sentence, q?.audio_alignment),
+    [sentence, q?.audio_alignment],
+  )
+  const audioChipId = playing ? activeChipIdAt(timings, currentTime) : null
+  const audioObject = audioChipId && card.placeholders?.[audioChipId]?.type === 'object'
+    ? { id: audioChipId, ...card.placeholders[audioChipId] }
+    : null
 
   const options = useMemo(() => {
     const pos  = (stmt?.positive_words || []).map(w => ({ ...w, correct: true }))
@@ -118,6 +101,11 @@ export default function PairWordCard({ card, onComplete }) {
     setActiveChip(prev => prev?.id === id ? null : { id, ...entry })
   }
 
+  // Audio-File abspielen; bei fehlendem/nicht ladbarem File still auf TTS zurückfallen.
+  function handlePlay() {
+    if (!play()) speak(sentence, lang)
+  }
+
   function handleSelect(opt) {
     if (confirmed) return
     setSelectedIds(prev => {
@@ -135,7 +123,7 @@ export default function PairWordCard({ card, onComplete }) {
     const ok = noWrongSelected
     setIsCorrect(ok)
     setConfirmed(true)
-    if (ok) triggerConfetti()
+    if (ok) { setShowFloat(true); triggerConfetti() }
     setTimeout(() => onComplete(ok ? 'correct' : 'wrong'), 900)
   }
 
@@ -156,14 +144,15 @@ export default function PairWordCard({ card, onComplete }) {
           </div>
         )}
         {isObject && <SelectionOverlay chip={activeChip} />}
+        {!isObject && audioObject && <SelectionOverlay chip={audioObject} outlineOnly />}
       </div>
 
       <div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
 
         <div className="pair-sentence-row">
           <div className="pair-sentence-text">
-            <p className="pair-question pair-sentence-clickable" onClick={() => play()}>
+            <p className="pair-question pair-sentence-clickable" onClick={handlePlay}>
-              {resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
+              {resolveSentence(sentence, card.placeholders, handleChipClick, audioChipId ?? activeChip?.id)}
             </p>
             {hint && !confirmed && (
               <p className="pair-hint">
@@ -171,7 +160,7 @@ export default function PairWordCard({ card, onComplete }) {
               </p>
             )}
           </div>
-          <button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={() => play()} title="Vorlesen">
+          <button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={handlePlay} title="Vorlesen">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
               <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
               <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
@@ -205,12 +194,15 @@ export default function PairWordCard({ card, onComplete }) {
         </div>
 
         {confirmed && (
+          <div style={{ position: 'relative' }}>
+            {isCorrect && showFloat && <EpFloat points={points} onDone={() => setShowFloat(false)} />}
             <p className={`pair-feedback ${isCorrect ? 'correct' : 'wrong'}`}>
               {isCorrect
-              ? '✓ Richtig!'
+                ? `✓ ${praiseWord}`
-              : `✗ Richtig wären: ${options.filter(o => o.correct).map(o => o[lang] || o.de).join(', ')}`
+                : `${encourageWord} Richtig wären: ${options.filter(o => o.correct).map(o => o[lang] || o.de).join(', ')}`
               }
             </p>
+          </div>
         )}
 
         {!confirmed && (

src/components/PairYesNoCard.jsx

@@ -1,6 +1,11 @@
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import confetti from 'canvas-confetti'
 import usePairAudio from '../hooks/usePairAudio'
+import SelectionOverlay from './SelectionOverlay'
+import EpFloat from './EpFloat'
+import { praise, encourage } from '../utils/praise'
+import { buildChipTimings, activeChipIdAt } from '../utils/chipTimings'
+import { speak } from '../utils/speak'
 import './PairCards.css'
 
 function triggerConfetti() {
@@ -14,42 +19,6 @@ function triggerConfetti() {
   })
 }
 
-function SelectionOverlay({ chip }) {
-  const sels = chip?.selections
-  if (!sels?.length) return null
-  const maskId = `selmask-${chip.id.slice(0, 8)}`
-  const label  = chip.label || ''
-  const toPoints = pts => pts.map(p => `${p.x * 100},${p.y * 100}`).join(' ')
-  const firstPts = sels[0].points
-  const xs = firstPts.map(p => p.x * 100)
-  const ys = firstPts.map(p => p.y * 100)
-  const cx    = (Math.min(...xs) + Math.max(...xs)) / 2
-  const labelY = Math.min(Math.max(...ys) + 6, 94)
-  return (
-    <svg className="pair-bbox-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
-      <defs>
-        <mask id={maskId}>
-          <rect width="100" height="100" fill="white" />
-          {sels.map((s, i) => <polygon key={i} points={toPoints(s.points)} fill="black" />)}
-        </mask>
-      </defs>
-      <rect width="100" height="100" fill="rgba(0,0,0,0.5)" mask={`url(#${maskId})`} />
-      {sels.map((s, i) => (
-        <polygon key={i} points={toPoints(s.points)}
-          fill="rgba(255,215,100,0.08)" stroke="rgba(255,215,100,0.92)"
-          strokeWidth="0.8" strokeLinejoin="round" />
-      ))}
-      {label && (
-        <text x={cx} y={labelY} textAnchor="middle"
-          fill="white" fontSize="5.5" fontWeight="700" fontFamily="Nunito, sans-serif"
-          style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}>
-          {label}
-        </text>
-      )}
-    </svg>
-  )
-}
-
 // Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
 function resolveSentence(sentence, placeholders, onChipClick, activeId) {
   if (!sentence) return null
@@ -80,6 +49,10 @@ function resolveSentence(sentence, placeholders, onChipClick, activeId) {
 export default function PairYesNoCard({ card, onComplete }) {
   const [result,     setResult]     = useState(null)
   const [activeChip, setActiveChip] = useState(null)
+  const [showFloat,  setShowFloat]  = useState(false)
+  const [praiseWord]    = useState(() => praise())
+  const [encourageWord] = useState(() => encourage())
+  const points = card.meta?.points ?? 2
 
   const lang    = card.lang || 'de'
   const native  = lang === 'de' ? 'en' : 'de'
@@ -94,19 +67,34 @@ export default function PairYesNoCard({ card, onComplete }) {
   const sentence = q?.[`sentence_${lang}`] || q?.sentence_de
   const hint     = q?.[`sentence_${native}`] || null
 
-  const { play, playing } = usePairAudio(q?.audio_url)
+  const { play, playing, currentTime } = usePairAudio(q?.audio_url)
+
+  // Karaoke: aktives Chip aus den Audio-Timestamps der Frage ableiten.
+  const timings = useMemo(
+    () => buildChipTimings(sentence, q?.audio_alignment),
+    [sentence, q?.audio_alignment],
+  )
+  const audioChipId = playing ? activeChipIdAt(timings, currentTime) : null
+  const audioObject = audioChipId && card.placeholders?.[audioChipId]?.type === 'object'
+    ? { id: audioChipId, ...card.placeholders[audioChipId] }
+    : null
 
   function handleChipClick(id, entry) {
     setActiveChip(prev => prev?.id === id ? null : { id, ...entry })
   }
 
+  // Audio-File abspielen; bei fehlendem/nicht ladbarem File still auf TTS zurückfallen.
+  function handlePlay() {
+    if (!play()) speak(sentence, lang)
+  }
+
   function handleAnswer(answer) {
     if (result) return
     setActiveChip(null)
     const isCorrect = answer === correct
     const r = isCorrect ? 'correct' : 'wrong'
     setResult(r)
-    if (isCorrect) triggerConfetti()
+    if (isCorrect) { setShowFloat(true); triggerConfetti() }
     setTimeout(() => onComplete(r), 900)
   }
 
@@ -127,6 +115,7 @@ export default function PairYesNoCard({ card, onComplete }) {
           </div>
         )}
         {isObject && <SelectionOverlay chip={activeChip} />}
+        {!isObject && audioObject && <SelectionOverlay chip={audioObject} outlineOnly />}
       </div>
 
       <div className="pair-card-body" onClick={e => e.stopPropagation()} style={{ paddingTop: 18 }}>
@@ -134,7 +123,7 @@ export default function PairYesNoCard({ card, onComplete }) {
         <div className="pair-sentence-row">
           <div className="pair-sentence-text">
             <p className="pair-question pair-sentence-clickable" onClick={() => play()}>
-              {resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
+              {resolveSentence(sentence, card.placeholders, handleChipClick, audioChipId ?? activeChip?.id)}
             </p>
             {hint && !result && (
               <p className="pair-hint">
@@ -142,7 +131,7 @@ export default function PairYesNoCard({ card, onComplete }) {
               </p>
             )}
           </div>
-          <button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={() => play()} title="Vorlesen">
+          <button className={`pair-icon-btn${playing ? ' active' : ''}`} onClick={handlePlay} title="Vorlesen">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
               <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
               <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
@@ -152,9 +141,12 @@ export default function PairYesNoCard({ card, onComplete }) {
         </div>
 
         {result && (
+          <div style={{ position: 'relative' }}>
+            {result === 'correct' && showFloat && <EpFloat points={points} onDone={() => setShowFloat(false)} />}
             <p className={`pair-feedback ${result}`}>
-            {result === 'correct' ? '✓ Richtig!' : `✗ Die Antwort war: ${correct ? 'Ja' : 'Nein'}`}
+              {result === 'correct' ? `✓ ${praiseWord}` : `${encourageWord} Die Antwort war: ${correct ? 'Ja' : 'Nein'}`}
             </p>
+          </div>
         )}
 
         <div className="pair-btn-row" style={{ marginTop: result ? '12px' : '6px' }}>

src/components/SelectionOverlay.jsx

@@ -0,0 +1,42 @@
+// Bildregion-Overlay für Objekt-Chips.
+// Standard: Rest des Bildes verdunkeln + Region umranden + Label (Klick-Highlight).
+// outlineOnly: nur die Region umranden, kein Verdunkeln, kein Label (Karaoke-Vorlesen).
+export default function SelectionOverlay({ chip, outlineOnly = false }) {
+  const sels = chip?.selections
+  if (!sels?.length) return null
+  const maskId = `selmask-${chip.id.slice(0, 8)}`
+  const label  = chip.label || ''
+  const toPoints = pts => pts.map(p => `${p.x * 100},${p.y * 100}`).join(' ')
+  const firstPts = sels[0].points
+  const xs = firstPts.map(p => p.x * 100)
+  const ys = firstPts.map(p => p.y * 100)
+  const cx    = (Math.min(...xs) + Math.max(...xs)) / 2
+  const labelY = Math.min(Math.max(...ys) + 6, 94)
+  return (
+    <svg className="pair-bbox-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
+      {!outlineOnly && (
+        <>
+          <defs>
+            <mask id={maskId}>
+              <rect width="100" height="100" fill="white" />
+              {sels.map((s, i) => <polygon key={i} points={toPoints(s.points)} fill="black" />)}
+            </mask>
+          </defs>
+          <rect width="100" height="100" fill="rgba(0,0,0,0.5)" mask={`url(#${maskId})`} />
+        </>
+      )}
+      {sels.map((s, i) => (
+        <polygon key={i} points={toPoints(s.points)}
+          fill="rgba(255,215,100,0.08)" stroke="rgba(255,215,100,0.92)"
+          strokeWidth="0.8" strokeLinejoin="round" />
+      ))}
+      {!outlineOnly && label && (
+        <text x={cx} y={labelY} textAnchor="middle"
+          fill="white" fontSize="5.5" fontWeight="700" fontFamily="Nunito, sans-serif"
+          style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}>
+          {label}
+        </text>
+      )}
+    </svg>
+  )
+}

src/components/SessionSummary.jsx

@@ -0,0 +1,47 @@
+import './Moments.css'
+import { categoryTier } from '../utils/praise'
+
+// Ersetzt die End-Sackgasse („Super! Alle Karten…") durch einen echten
+// Abschluss-Moment: Zahlen dieser Session + 1–3 Story-Zeilen.
+export default function SessionSummary({ cards, ep, correct, streak, topCategory, onReload }) {
+  const stories = []
+  if (cards > 0) {
+    stories.push({ icon: '✅', text: `${correct} von ${cards} Karten auf Anhieb richtig` })
+  }
+  if (streak > 0) {
+    stories.push({ icon: '🔥', text: `Tag ${streak} in Folge — Streak gehalten` })
+  }
+  if (topCategory?.label) {
+    const tier = categoryTier(topCategory.points)
+    stories.push({ icon: '📚', text: `„${topCategory.label}" — Stufe ${tier.label}` })
+  }
+
+  return (
+    <div className="session-summary">
+      <div className="ss-icon" aria-hidden="true">🌟</div>
+      <h3 className="ss-title">Stark gemacht!</h3>
+      <p className="ss-sub">Session beendet · {ep} EP gesammelt</p>
+
+      <div className="ss-stats">
+        <div className="ss-stat"><span className="n">{cards}</span><span className="c">Karten</span></div>
+        <div className="ss-stat"><span className="n">{ep}</span><span className="c">EP heute</span></div>
+        <div className="ss-stat"><span className="n">{cards ? Math.round((correct / cards) * 100) : 0}%</span><span className="c">richtig</span></div>
+      </div>
+
+      {stories.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
+          {stories.map((s, i) => (
+            <div key={i} className="ss-story">
+              <span className="si" aria-hidden="true">{s.icon}</span>
+              <span>{s.text}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {onReload && (
+        <button className="milestone-btn" onClick={onReload}>Nach neuen Karten suchen</button>
+      )}
+    </div>
+  )
+}

src/components/auth/AuthScreen.jsx

@@ -16,14 +16,14 @@ const css = `
 `
 
 export default function AuthScreen() {
-  const [mode, setMode] = useState(() => localStorage.getItem('hejyou_last_mode') || 'login')
+  const [mode, setMode] = useState(() => localStorage.getItem('snakkimo_last_mode') || 'login')
   const [step, setStep] = useState('main')
   const [pendingUserId, setPendingUserId] = useState(null)
   const [pendingToken, setPendingToken] = useState(null)
   const [successName, setSuccessName] = useState('')
 
   const handleModeChange = (m) => {
-    setMode(m); localStorage.setItem('hejyou_last_mode', m); setStep('main')
+    setMode(m); localStorage.setItem('snakkimo_last_mode', m); setStep('main')
   }
 
   const handleNeedsProfile = (userId, token) => {
@@ -33,7 +33,7 @@ export default function AuthScreen() {
   return (
     <>
       <style>{css}</style>
-      <div className="auth-root" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', background: 'var(--bg)' }}>
+      <div className="auth-root" style={{ height: '100%', overflowY: 'auto', overscrollBehavior: 'contain', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', background: 'var(--bg)' }}>
         <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: '24px', padding: '48px 44px', width: '100%', maxWidth: '420px', boxShadow: '0 2px 40px rgba(44,37,32,0.06)', animation: 'fadeUp 0.3s ease' }}>
 
           {/* Brand */}
@@ -43,7 +43,7 @@ export default function AuthScreen() {
                 <circle cx="12" cy="12" r="10"/><path d="M8 12q2-5 4-4t4 4-4 4-4-4"/>
               </svg>
             </div>
-            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: '22px', fontWeight: 500, letterSpacing: '-0.3px', color: 'var(--text)' }}>HejYou</h1>
+            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: '22px', fontWeight: 500, letterSpacing: '-0.3px', color: 'var(--text)' }}>Snakkimo</h1>
             <p style={{ fontSize: '13px', color: 'var(--muted)', marginTop: '4px' }}>Sprachen lernen wie ein Kind</p>
           </div>
 

src/components/auth/LoginForm.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { login, getMe } from '../../api/directus'
 import { useAuth } from '../../context/AuthContext'
 import { FormGroup, Input, Button, Alert } from './ui'
@@ -9,10 +9,13 @@ export default function LoginForm({ onNeedsProfile }) {
   const [pw, setPw] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const submittingRef = useRef(false) // race-fester Schutz gegen Doppel-Submit
 
   const handleSubmit = async (e) => {
     e?.preventDefault()
+    if (submittingRef.current) return
     if (!email || !pw) { setError('Bitte E-Mail und Passwort eingeben.'); return }
+    submittingRef.current = true
     setError(''); setLoading(true)
     try {
       const result = await login(email, pw)
@@ -27,6 +30,7 @@ export default function LoginForm({ onNeedsProfile }) {
     } catch (err) {
       setError(err.message)
     } finally {
+      submittingRef.current = false
       setLoading(false)
     }
   }

src/components/auth/RegisterStep1.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { registerUser } from '../../api/directus'
 import { FormGroup, Input, Button, Alert, StepDots } from './ui'
 
@@ -7,11 +7,14 @@ export default function RegisterStep1({ onSuccess }) {
   const [pw, setPw] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
+  const submittingRef = useRef(false) // race-fester Schutz gegen Doppel-Submit
 
   const handleSubmit = async (e) => {
     e?.preventDefault()
+    if (submittingRef.current) return
     if (!email || !pw) { setError('Bitte alle Felder ausfüllen.'); return }
     if (pw.length < 8) { setError('Passwort muss mindestens 8 Zeichen haben.'); return }
+    submittingRef.current = true
     setError(''); setLoading(true)
     try {
       const { token, userId } = await registerUser(email, pw)
@@ -19,6 +22,7 @@ export default function RegisterStep1({ onSuccess }) {
     } catch (err) {
       setError(err.message)
     } finally {
+      submittingRef.current = false
       setLoading(false)
     }
   }

src/components/auth/RegisterStep2.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { checkUsername, createProfile, getLanguageOptions, getMe } from '../../api/directus'
 import { useAuth } from '../../context/AuthContext'
 import { FormGroup, Input, Select, Button, Alert, StepDots } from './ui'
@@ -11,6 +11,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
   const [languages, setLanguages]   = useState([])
   const [error, setError]           = useState('')
   const [loading, setLoading]       = useState(false)
+  const submittingRef = useRef(false) // race-fester Schutz gegen Doppel-Submit
 
   useEffect(() => {
     getLanguageOptions()
@@ -20,6 +21,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
 
   const handleSubmit = async (e) => {
     e?.preventDefault()
+    if (submittingRef.current) return
     if (!username || !nativeLang || !targetLang) {
       setError('Bitte alle Felder ausfüllen.'); return
     }
@@ -29,6 +31,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
     if (!/^[a-zA-Z0-9_]{3,20}$/.test(username)) {
       setError('Username: 3–20 Zeichen, nur Buchstaben, Zahlen und _'); return
     }
+    submittingRef.current = true
     setError(''); setLoading(true)
     try {
       const available = await checkUsername(username, userToken)
@@ -44,6 +47,7 @@ export default function RegisterStep2({ userId, userToken, onSuccess }) {
     } catch (err) {
       setError(err.message)
     } finally {
+      submittingRef.current = false
       setLoading(false)
     }
   }

src/context/AuthContext.jsx

@@ -1,23 +1,35 @@
 import { createContext, useContext, useState, useEffect } from 'react'
 import { getMe } from '../api/directus'
+import { getStoredToken, setStoredToken, clearStoredToken } from '../utils/secureToken'
 
 const AuthContext = createContext(null)
 
 export function AuthProvider({ children }) {
-  const [token, setToken] = useState(() => localStorage.getItem('hejyou_token'))
+  const [token, setToken] = useState(null)
   const [user, setUser] = useState(null)
   const [loading, setLoading] = useState(true)
+  const [bootstrapped, setBootstrapped] = useState(false)
 
+  // Token einmalig aus dem sicheren Speicher laden (inkl. Migration aus localStorage).
   useEffect(() => {
+    getStoredToken()
+      .then(setToken)
+      .catch(() => setToken(null))
+      .finally(() => setBootstrapped(true))
+  }, [])
+
+  // Profil laden, sobald der Token bekannt ist.
+  useEffect(() => {
+    if (!bootstrapped) return
     if (!token) { setLoading(false); return }
     getMe(token)
       .then(setUser)
-      .catch(() => { localStorage.removeItem('hejyou_token'); setToken(null) })
+      .catch(() => { clearStoredToken(); setToken(null) })
       .finally(() => setLoading(false))
-  }, [token])
+  }, [token, bootstrapped])
 
-  const saveToken = (t) => { localStorage.setItem('hejyou_token', t); setToken(t) }
+  const saveToken = async (t) => { await setStoredToken(t); setToken(t) }
-  const logout = () => { localStorage.removeItem('hejyou_token'); setToken(null); setUser(null) }
+  const logout = async () => { await clearStoredToken(); setToken(null); setUser(null) }
 
   return (
     <AuthContext.Provider value={{ token, user, setUser, saveToken, logout, loading }}>

src/hooks/useCountUp.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+
+// Zählt eine Zahl sanft vom alten auf den neuen Wert hoch (EP-Badge etc.),
+// damit Belohnung nicht stumm „umspringt". Respektiert prefers-reduced-motion.
+export default function useCountUp(target, { duration = 600 } = {}) {
+  const [display, setDisplay] = useState(target ?? 0)
+  const fromRef = useRef(target ?? 0)
+  const rafRef = useRef(0)
+
+  useEffect(() => {
+    if (target == null) return
+    const from = fromRef.current
+    const to = target
+    if (from === to) { setDisplay(to); return }
+
+    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches
+    if (reduce) { fromRef.current = to; setDisplay(to); return }
+
+    const start = performance.now()
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / duration)
+      const eased = 1 - Math.pow(1 - t, 3)
+      setDisplay(Math.round(from + (to - from) * eased))
+      if (t < 1) rafRef.current = requestAnimationFrame(tick)
+      else fromRef.current = to
+    }
+    rafRef.current = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(rafRef.current)
+  }, [target, duration])
+
+  return display
+}

src/hooks/usePairAudio.js

@@ -3,25 +3,55 @@ import { useEffect, useRef, useState } from 'react'
 // Nur eine Stimme gleichzeitig im Feed
 let currentAudio = null
 
+// Reines Vorlesen wird gedrosselt (User-Wunsch). Pitch bleibt durch den
+// Browser-Default `preservesPitch` erhalten.
+const PLAYBACK_RATE = 0.7
+
 export default function usePairAudio(url) {
   const audioRef = useRef(null)
+  const rafRef = useRef(null)
+  const failedRef = useRef(false)
   const [playing, setPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [failed, setFailed] = useState(false)
+  const markFailed = () => { failedRef.current = true; setFailed(true) }
 
   useEffect(() => {
     if (!url) { audioRef.current = null; return }
+    failedRef.current = false
+    setFailed(false)
     const audio = new Audio(url)
     audio.preload = 'auto'
-    const onPlay  = () => setPlaying(true)
+    audio.playbackRate = PLAYBACK_RATE
-    const onStop  = () => setPlaying(false)
+
+    // currentTime ~30fps mitschreiben, solange das Audio läuft (für Karaoke-Sync).
+    let lastTick = 0
+    const tick = (ts) => {
+      if (ts - lastTick >= 33) { lastTick = ts; setCurrentTime(audio.currentTime) }
+      rafRef.current = requestAnimationFrame(tick)
+    }
+    const stopLoop = () => {
+      if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null }
+    }
+
+    const onPlay  = () => { setPlaying(true); stopLoop(); rafRef.current = requestAnimationFrame(tick) }
+    const onStop  = () => { setPlaying(false); stopLoop(); setCurrentTime(audio.currentTime) }
+    const onEnded = () => { setPlaying(false); stopLoop(); setCurrentTime(0) }
+    // Netz-/Decode-Fehler eines vorhandenen Files → File gilt als nicht abspielbar,
+    // damit play() den TTS-Fallback der Karte greifen lässt.
+    const onError = () => { setPlaying(false); stopLoop(); markFailed() }
     audio.addEventListener('play', onPlay)
     audio.addEventListener('pause', onStop)
-    audio.addEventListener('ended', onStop)
+    audio.addEventListener('ended', onEnded)
+    audio.addEventListener('error', onError)
     audioRef.current = audio
     return () => {
+      stopLoop()
       audio.pause()
       audio.removeEventListener('play', onPlay)
       audio.removeEventListener('pause', onStop)
-      audio.removeEventListener('ended', onStop)
+      audio.removeEventListener('ended', onEnded)
+      audio.removeEventListener('error', onError)
       if (currentAudio === audio) currentAudio = null
       audio.src = ''
       audioRef.current = null
@@ -30,13 +60,16 @@ export default function usePairAudio(url) {
 
   function play() {
     const audio = audioRef.current
-    if (!audio) return false
+    if (!audio || failedRef.current) return false
     if (currentAudio && currentAudio !== audio) currentAudio.pause()
     currentAudio = audio
     audio.currentTime = 0
-    audio.play().catch(() => {})
+    audio.playbackRate = PLAYBACK_RATE
+    // AbortError = von einem pause() unterbrochen (harmlos); echte Quell-/Decode-Fehler
+    // markieren das File als nicht abspielbar → Karte fällt auf TTS zurück.
+    audio.play().catch((err) => { if (err?.name !== 'AbortError') markFailed() })
     return true
   }
 
-  return { play, playing }
+  return { play, playing, currentTime, failed }
 }

src/index.css

@@ -67,12 +67,28 @@
   box-sizing: border-box;
 }
 
+html {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  touch-action: manipulation;
+}
+
 body {
   font-family: var(--font-ui);
   background: var(--bg);
   color: var(--text);
   height: 100dvh;
+  width: 100%;
+  position: fixed;
+  inset: 0;
   overflow: hidden;
+  overscroll-behavior: none;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;

src/pages/Feed.css

@@ -2,15 +2,17 @@
   height: 100%;
   background: var(--bg);
   overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
   scroll-snap-type: y mandatory;
   -webkit-overflow-scrolling: touch;
+  padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
 }
 
 .feed-slot {
-  scroll-snap-align: start;
+  scroll-snap-align: center;
-  min-height: 100%;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
   padding: var(--sp-4) var(--sp-5);
   padding-bottom: var(--sp-5);
@@ -26,6 +28,12 @@
   font-weight: 600;
 }
 
+/* Trigger für Infinite Scroll – unsichtbar, kein eigener Snap-Punkt. */
+.feed-sentinel {
+  height: 1px;
+  flex-shrink: 0;
+}
+
 /* EP-Badge + Tagesziel-Ring */
 .ep-badge {
   position: sticky;

src/pages/Feed.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import './Feed.css'
 import { useAuth } from '../context/AuthContext'
 import { getFeedPairs, saveProgress, getUserProgress, getStats } from '../api/directus'
@@ -6,9 +6,18 @@ import ProgressRing from '../components/ProgressRing'
 import PairSentenceCard from '../components/PairSentenceCard'
 import PairYesNoCard    from '../components/PairYesNoCard'
 import PairWordCard     from '../components/PairWordCard'
+import MilestoneOverlay from '../components/MilestoneOverlay'
+import SessionSummary   from '../components/SessionSummary'
+import useCountUp from '../hooks/useCountUp'
+import { levelForEp } from '../utils/leveling'
+import { playCorrect, playMilestone } from '../utils/sound'
+import { streakState } from '../utils/streak'
+import { cancelStreakReminder } from '../utils/streakReminder'
 
 // Points per answer_type
 const POINTS = { text: 2, yes_no: 2, word: 3, question: 3 }
+const PAGE_SIZE = 20
+const STREAK_MILESTONES = [3, 7, 14, 30, 50, 100, 200, 365]
 
 function buildCard(pair) {
   return {
@@ -24,49 +33,173 @@ export default function Feed() {
   const [done,  setDone]    = useState(new Set())
   const [loading, setLoading] = useState(true)
   const [empty, setEmpty]   = useState(false)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [exhausted, setExhausted] = useState(false)
   const [totalEp, setTotalEp] = useState(null)
   const [daily, setDaily] = useState(null) // { ep, daily_goal_ep } – wenn /auth/stats verfügbar
+  const [combo, setCombo] = useState(0)            // richtige Antworten in Folge (diese Session)
+  const [milestones, setMilestones] = useState([]) // Queue: Level-Up / Streak / Tagesziel
+  const [topCat, setTopCat] = useState(null)       // stärkste Kategorie für die Session-Summary
+  const [reloadKey, setReloadKey] = useState(0)    // erneutes Laden nach der Summary
+  const [practiced, setPracticed] = useState(false)        // heute in dieser Session geübt?
+  const [streakDismissed, setStreakDismissed] = useState(false)
+
+  // Session-Zähler (lokal, für die Abschluss-Summary) + zuletzt bekannter Fortschritt,
+  // um Level-Up/Streak-Up im saveProgress-Response zu erkennen.
+  const session  = useRef({ cards: 0, correct: 0, ep: 0 })
+  const progress = useRef({ level: 0, streak: 0 })
+
+  // Sanft hochzählender EP-Wert fürs Badge (statt stummem Umspringen).
+  const displayEp = useCountUp(totalEp ?? 0)
+
+  // Refs für den Nachlade-Pfad: Re-Entrancy-Schutz + immer aktuelle Kartenliste
+  // (Closure im IntersectionObserver wäre sonst veraltet).
+  const loadingMoreRef = useRef(false)
+  const exhaustedRef = useRef(false)
+  const cardsRef = useRef(cards)
+  cardsRef.current = cards
+  const sentinelRef = useRef(null)
 
   // Target language from user profile, fall back to 'de'
   const lang = user?.language_target_short || 'de'
 
   useEffect(() => {
-    getFeedPairs(token, lang, 20)
+    getFeedPairs(token, lang, PAGE_SIZE)
       .then(pairs => {
         const built = pairs.map(buildCard)
         setCards(built)
         setEmpty(built.length === 0)
+        if (built.length < PAGE_SIZE) { exhaustedRef.current = true; setExhausted(true) }
       })
       .catch(err => { console.error('Feed load error', err); setEmpty(true) })
       .finally(() => setLoading(false))
-  }, [token, lang])
+  }, [token, lang, reloadKey])
 
   useEffect(() => {
     getUserProgress(token)
-      .then(p => setTotalEp(p.total_ep))
+      .then(p => {
+        setTotalEp(p.total_ep)
+        // Level aus EP über die (mit dem Backend identische) Kurve ableiten, damit Level-Up
+        // unabhängig vom Backend-Deploy korrekt erkannt wird.
+        progress.current = { level: levelForEp(p.total_ep), streak: p.streak_days ?? 0 }
+      })
       .catch(() => {})
-    // Tagesziel-Fortschritt – degradiert lautlos, falls /auth/stats noch nicht deployed ist
+    // Tagesziel-Fortschritt + stärkste Kategorie – degradiert lautlos, falls /auth/stats fehlt
     getStats(token)
-      .then(s => { if (s?.today) setDaily(s.today) })
+      .then(s => {
+        if (s?.today) setDaily(s.today)
+        if (s?.categories?.length) setTopCat(s.categories[0])
+      })
       .catch(() => {})
   }, [token])
 
+  // Weitere Karten nachladen: schon geladene (inkl. erledigte) Pair-IDs ausschließen.
+  // Leere Antwort → Server hat keine weiteren Karten → erschöpft.
+  const loadMore = useCallback(async () => {
+    if (loadingMoreRef.current || exhaustedRef.current) return
+    loadingMoreRef.current = true
+    setLoadingMore(true)
+    try {
+      const known = new Set(cardsRef.current.map(c => c.meta.pairId))
+      const pairs = await getFeedPairs(token, lang, PAGE_SIZE, [...known])
+      const fresh = pairs.filter(p => !known.has(p.id)).map(buildCard)
+      if (fresh.length) setCards(prev => [...prev, ...fresh])
+      if (!fresh.length || pairs.length < PAGE_SIZE) { exhaustedRef.current = true; setExhausted(true) }
+    } catch (err) {
+      console.error('Feed loadMore error', err)
+    } finally {
+      loadingMoreRef.current = false
+      setLoadingMore(false)
+    }
+  }, [token, lang])
+
+  // Infinite Scroll: lädt nach, sobald der Sentinel in die Nähe des Sichtbereichs kommt.
+  // Großzügiger rootMargin, weil scroll-snap-mandatory einen winzigen End-Sentinel
+  // sonst schwer erreichbar macht.
+  useEffect(() => {
+    if (loading || exhausted) return
+    const el = sentinelRef.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => { if (entries[0].isIntersecting) loadMore() },
+      { root: el.closest('.feed'), rootMargin: '300px' },
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [loading, exhausted, loadMore])
+
   function handleComplete(item, result) {
     setDone(prev => new Set([...prev, item.meta.pairId]))
     const correct = result === 'correct'
     const earned = correct ? item.meta.points : 0
-    saveProgress({
+
-      pairId: item.meta.pairId,
+    // Heute geübt → Serie gesichert: Nudge weg + geplante Erinnerung abbrechen.
-      correct,
+    if (!practiced) { setPracticed(true); cancelStreakReminder() }
-      points: earned,
+
-      userToken: token,
+    // Session-Zähler + Combo + Sound
+    session.current.cards += 1
+    if (correct) {
+      session.current.correct += 1
+      session.current.ep += earned
+      setCombo(c => c + 1)
+      playCorrect()
+    } else {
+      setCombo(0)
+    }
+
+    // Optimistische Tagesziel-Erkennung als Fallback, falls die API kein
+    // goal_just_reached liefert (älteres Backend).
+    const dayBefore = daily?.ep ?? null
+    const goalEp = daily?.daily_goal_ep ?? null
+    const optimisticGoal = earned > 0 && dayBefore != null && goalEp != null &&
+      dayBefore < goalEp && dayBefore + earned >= goalEp
+
+    saveProgress({ pairId: item.meta.pairId, correct, points: earned, userToken: token })
+      .then(res => {
+        if (res?.total_ep != null) setTotalEp(res.total_ep)
+        if (res?.daily_ep != null && res?.daily_goal_ep != null) {
+          setDaily(d => ({ ...(d || {}), ep: res.daily_ep, daily_goal_ep: res.daily_goal_ep }))
+        }
+
+        const queued = []
+        // Level aus dem aktuellen EP-Stand ableiten (deploy-unabhängig, identische Kurve);
+        // prev = zuletzt bekannter Level vor dieser Karte.
+        const newLevel  = res?.total_ep != null ? levelForEp(res.total_ep) : progress.current.level
+        const prevLevel = progress.current.level
+        if (newLevel > prevLevel) queued.push({ kind: 'level', value: newLevel })
+
+        const newStreak = res?.streak_days ?? progress.current.streak
+        const streakUp  = res?.streak_increased ?? (newStreak > progress.current.streak)
+        if (streakUp && STREAK_MILESTONES.includes(newStreak)) queued.push({ kind: 'streak', value: newStreak })
+
+        if (res?.goal_just_reached ?? optimisticGoal) {
+          queued.push({ kind: 'goal', value: res?.daily_goal_ep ?? goalEp })
+        }
+
+        // Neu freigeschaltete Erfolge zuletzt feiern
+        for (const a of (res?.unlocked_achievements || [])) {
+          queued.push({ kind: 'achievement', key: a.key, label: a.label, icon: a.icon })
+        }
+
+        progress.current = { level: newLevel, streak: newStreak }
+        if (queued.length) { setMilestones(q => [...q, ...queued]); playMilestone() }
       })
-      .then(res => { if (res?.total_ep != null) setTotalEp(res.total_ep) })
       .catch(err => console.error('saveProgress error', err))
-    // Tagesziel optimistisch hochzählen
+
+    // Tagesziel optimistisch hochzählen (wird vom Server-Response ggf. überschrieben)
     if (earned > 0) setDaily(d => d ? { ...d, ep: (d.ep || 0) + earned } : d)
   }
 
+  // Nach der Summary erneut nach Karten suchen (Server schließt erledigte Pairs aus).
+  const handleReload = () => {
+    setDone(new Set())
+    setExhausted(false); exhaustedRef.current = false
+    session.current = { cards: 0, correct: 0, ep: 0 }
+    setCombo(0)
+    setLoading(true)
+    setReloadKey(k => k + 1)
+  }
+
   const visible = cards.filter(c => !done.has(c.meta.pairId))
 
   if (loading) {
@@ -77,22 +210,42 @@ export default function Feed() {
     )
   }
 
-  if (empty || visible.length === 0) {
+  if (empty) {
     return (
       <div className="feed page-enter">
-        <div className="feed-empty">
+        <div className="feed-empty">Noch keine Inhalte verfügbar.</div>
-          {cards.length === 0
-            ? 'Noch keine Inhalte verfügbar.'
-            : 'Super! Alle Karten abgeschlossen. 🎉'}
-        </div>
       </div>
     )
   }
 
   const goalPct = daily && daily.daily_goal_ep ? (daily.ep || 0) / daily.daily_goal_ep : 0
 
+  // Loss-Aversion-Nudge: Serie läuft heute ab (oder ist gerissen) und heute noch nicht geübt.
+  const streak = streakState(user?.last_practice_at, user?.streak_days || 0)
+  const showStreakNudge = !practiced && !streakDismissed &&
+    (streak.state === 'at_risk' || streak.state === 'broken')
+
   return (
     <div className="feed page-enter">
+      {showStreakNudge && (
+        <div className="streak-nudge" role="status">
+          <span>
+            {streak.state === 'at_risk'
+              ? `🔥 ${streak.streakDays}-Tage-Serie — nur noch ${streak.hoursLeft} Std heute!`
+              : '🌱 Starte heute deine Serie neu'}
+          </span>
+          <button className="streak-nudge-x" onClick={() => setStreakDismissed(true)} aria-label="Schließen">×</button>
+        </div>
+      )}
+      {combo >= 3 && (
+        <div key={combo} className="combo-pill" aria-hidden="true">🔥 {combo} in Folge</div>
+      )}
+      {milestones.length > 0 && (
+        <MilestoneOverlay
+          milestone={milestones[0]}
+          onClose={() => setMilestones(q => q.slice(1))}
+        />
+      )}
       {totalEp != null && (
         <div className="ep-badge">
           <ProgressRing
@@ -103,7 +256,7 @@ export default function Feed() {
             <span style={{ fontSize: 11 }}>{goalPct >= 1 ? '✓' : '⭐'}</span>
           </ProgressRing>
           <span className="ep-value">
-            {totalEp}<small>EP{daily ? ` · ${daily.ep || 0}/${daily.daily_goal_ep} heute` : ''}</small>
+            {displayEp}<small>EP{daily ? ` · ${daily.ep || 0}/${daily.daily_goal_ep} heute` : ''}</small>
           </span>
         </div>
       )}
@@ -119,6 +272,22 @@ export default function Feed() {
           </div>
         )
       })}
+
+      {/* Nachlade-Bereich */}
+      {!exhausted && <div ref={sentinelRef} className="feed-sentinel" aria-hidden="true" />}
+      {loadingMore && <div className="feed-empty">Lade weitere Karten…</div>}
+      {exhausted && (
+        visible.length === 0
+          ? <SessionSummary
+              cards={session.current.cards}
+              ep={session.current.ep}
+              correct={session.current.correct}
+              streak={progress.current.streak}
+              topCategory={topCat}
+              onReload={handleReload}
+            />
+          : <div className="feed-empty">Super! Alle Karten abgeschlossen. 🎉</div>
+      )}
     </div>
   )
 }

src/pages/Profil.css

@@ -2,14 +2,14 @@
 .profil {
   min-height: 100%;
   background: var(--bg);
-  padding: 0 var(--sp-4) var(--sp-6);
+  padding: env(safe-area-inset-top) var(--sp-4) var(--sp-6);
   overflow-y: auto;
   position: relative;
 }
 
 .profil-logout {
   position: absolute;
-  top: 20px;
+  top: calc(env(safe-area-inset-top) + 20px);
   right: 4px;
   background: none;
   border: none;
@@ -37,11 +37,9 @@
 .avatar-ring {
   width: 64px; height: 64px;
   border-radius: 50%;
-  background: conic-gradient(from 0deg, var(--bg), var(--gold), var(--accent), var(--border), var(--bg));
+  background: var(--border-soft);
-  animation: spin-ring 6s linear infinite;
   padding: 2px;
 }
-@keyframes spin-ring { to { transform: rotate(360deg); } }
 
 .avatar-inner {
   width: 100%; height: 100%;
@@ -59,26 +57,6 @@
   font-size: 18px; font-weight: 800; color: #F5EFE6; letter-spacing: 1px;
 }
 
-.online-dot {
-  position: absolute; bottom: 2px; right: 2px;
-  width: 11px; height: 11px;
-  background: var(--success);
-  border-radius: 50%;
-  border: 2px solid var(--bg);
-  z-index: 2;
-}
-.online-dot::after {
-  content: '';
-  position: absolute; inset: -4px;
-  border-radius: 50%;
-  border: 2px solid var(--success);
-  animation: pulse-ring 2s ease-out infinite;
-}
-@keyframes pulse-ring {
-  0%   { opacity: 0.6; transform: scale(0.8); }
-  100% { opacity: 0;   transform: scale(1.8); }
-}
-
 .avatar-level-badge {
   position: absolute; top: -4px; right: -6px; z-index: 3;
   filter: drop-shadow(0 1px 3px rgba(74, 55, 40, 0.3));
@@ -86,8 +64,10 @@
 
 .profil-info { display: flex; flex-direction: column; gap: 2px; }
 .profil-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
-.profil-handle { font-size: 12px; color: var(--accent); }
+.profil-learning { font-size: 12px; color: var(--text-muted); font-weight: 600; }
 .profil-streak { font-size: 12px; color: #C4853A; margin-top: 4px; font-weight: 700; }
+.streak-warn { color: var(--danger); }
+.streak-ok   { color: var(--success); }
 
 /* ── Cards ──────────────────────────────────────────────────── */
 .card {
@@ -132,6 +112,35 @@
 .level-pill { background: var(--accent); color: var(--bg); font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: var(--r-pill); }
 .level-hint { font-size: 11px; color: var(--text-muted); }
 
+/* Capability-Satz: „was du jetzt kannst" statt nur Zahlen */
+.capability-line {
+  margin-top: var(--sp-3);
+  padding-top: var(--sp-3);
+  border-top: 1px solid var(--border-soft);
+  font-size: 13px;
+  font-style: italic;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+/* Wochenvergleich */
+.week-compare { font-size: 12px; font-weight: 700; margin-bottom: var(--sp-3); }
+.week-compare.up   { color: var(--success); }
+.week-compare.down { color: var(--text-muted); }
+
+/* Sound-Toggle (spiegelt den Logout-Button, oben links) */
+.profil-sound {
+  position: absolute;
+  top: calc(env(safe-area-inset-top) + 20px);
+  left: 4px;
+  background: none; border: none; cursor: pointer;
+  padding: 6px; border-radius: var(--r-sm);
+  color: var(--text-soft);
+  display: flex; align-items: center; justify-content: center;
+  transition: color var(--dur-fast), background var(--dur-fast);
+}
+.profil-sound:hover { color: var(--accent); background: var(--accent-soft); }
+
 /* ── Wochen-Graph ── */
 .weekbars { display: flex; align-items: flex-end; gap: var(--sp-2); height: 96px; }
 .weekbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
@@ -148,14 +157,13 @@
 .weekbar-label { font-size: 10px; font-weight: 700; color: var(--text-soft); }
 .weekbar-label.today { color: var(--accent); }
 
-/* ── Heatmap ── */
+/* ── Heatmap (kompakt) ── */
-.heatmap { display: flex; gap: 4px; justify-content: space-between; }
+.heatmap { display: flex; gap: 3px; justify-content: center; }
-.heatmap-col { display: flex; flex-direction: column; gap: 4px; flex: 1; }
+.heatmap-col { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
 .heatmap-cell {
   display: block;
-  width: 100%;
+  width: 13px; height: 13px;
-  aspect-ratio: 1 / 1;
+  border-radius: 2px;
-  border-radius: 3px;
   background: var(--surface-sunk);
 }
 .heatmap-cell.lvl-0 { background: var(--surface-sunk); }
@@ -171,6 +179,39 @@
 }
 .heatmap-legend .heatmap-cell { width: 11px; height: 11px; }
 
+/* ── Kategorien ── */
+.cat-list { display: flex; flex-direction: column; gap: var(--sp-3); }
+.cat-row { display: flex; flex-direction: column; gap: 6px; }
+.cat-head { display: flex; align-items: center; gap: var(--sp-2); }
+.cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
+.cat-label { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
+.cat-tier { font-size: 11px; font-weight: 600; color: var(--text-soft); }
+.cat-points { font-size: 12px; font-weight: 800; color: var(--accent); }
+
+/* ── Erfolge ── */
+.ach-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--sp-2);
+}
+.ach-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: var(--sp-3) var(--sp-2);
+  border-radius: var(--r-sm);
+  text-align: center;
+}
+.ach-tile.on  { background: var(--gold-soft); }
+.ach-tile.off { background: var(--surface-2); opacity: 0.7; }
+.ach-icon { font-size: 24px; line-height: 1; }
+.ach-tile.off .ach-icon { filter: grayscale(1); opacity: 0.6; }
+.ach-label { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.25; }
+.ach-tile.off .ach-label { color: var(--text-muted); }
+.cat-bar { height: 6px; width: 100%; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
+.cat-bar-fill { height: 100%; border-radius: var(--r-pill); transition: width 0.6s var(--ease); }
+
 /* ── Eckdaten ── */
 .stat-grid { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
 .stat-tile {

src/pages/Profil.jsx

@@ -1,8 +1,15 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import './Profil.css'
 import { useAuth } from '../context/AuthContext'
-import { getProfilData, getStats, getLanguageOptions, langById } from '../api/directus'
+import { getProfilData, getStats, getLanguageOptions, langById, getAchievements } from '../api/directus'
 import ProgressRing from '../components/ProgressRing'
+import { levelInfo } from '../utils/leveling'
+import { categoryTier, capabilitySentence } from '../utils/praise'
+import { isMuted, setMuted } from '../utils/sound'
+import { streakState } from '../utils/streak'
+
+// Erdige Palette für die Kategorie-Dots/Balken (harmoniert mit dem Profil-Theme)
+const CAT_COLORS = ['#C4A85A', '#7A5C3A', '#3D7055', '#B5732E', '#5B7DB1', '#9C5A8A']
 
 function LogoutButton() {
   const { logout } = useAuth()
@@ -17,6 +24,24 @@ function LogoutButton() {
   )
 }
 
+function SoundToggle() {
+  const [muted, setM] = useState(isMuted())
+  const toggle = () => { const next = !muted; setMuted(next); setM(next) }
+  return (
+    <button onClick={toggle} title={muted ? 'Töne an' : 'Töne aus'} className="profil-sound">
+      {muted ? (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>
+        </svg>
+      ) : (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
+        </svg>
+      )}
+    </button>
+  )
+}
+
 /* ── Radar Chart (echte Skill-Daten) ─────────────────────────── */
 function RadarChart({ skills, animate }) {
   const size = 220, cx = 110, cy = 105, r = 70, n = skills.length
@@ -122,6 +147,7 @@ export default function Profil() {
   const [profil, setProfil] = useState(null)
   const [stats, setStats]   = useState(null)
   const [langs, setLangs]   = useState([])
+  const [achievements, setAchievements] = useState([])
 
   useEffect(() => {
     const t = setTimeout(() => setRadarReady(true), 120)
@@ -136,20 +162,29 @@ export default function Profil() {
       } catch { /* Fallback unten */ }
       // Stats getrennt – degradiert lautlos, falls /auth/stats noch nicht deployed ist
       try { setStats(await getStats(token)) } catch { /* kein Tracking verfügbar */ }
+      // Erfolge – degradiert lautlos, falls /auth/achievements noch nicht deployed ist
+      try { setAchievements(await getAchievements(token)) } catch { /* keine Erfolge verfügbar */ }
     }
     load()
   }, [token])
 
   const displayName = profil?.username || user?.username || '…'
   const initials    = displayName.slice(0, 2).toUpperCase()
+  const greeting    = profil?.language_target_greeting || 'Hallo'
   const points      = profil?.total_ep ?? user?.total_ep ?? 0
-  const level       = profil?.level ?? Math.floor(points / 500)
+  const li          = levelInfo(points)
-  const epIntoLevel = points - level * 500
+  // Level + Progress immer als Set aus EINER Quelle (sonst „Level 0 / 33 % bis Level 1"-
-  const epPerLevel  = 500
+  // Mischmasch, solange das Backend die neue Kurve noch nicht deployed hat).
+  const hasApiLevel = profil?.ep_to_next_level != null
+  const level       = hasApiLevel ? profil.level : li.level
+  const epIntoLevel = hasApiLevel ? profil.ep_into_level : li.epIntoLevel
+  const epToNext    = hasApiLevel ? profil.ep_to_next_level : li.epToNextLevel
+  const epPerLevel  = Math.max(1, epIntoLevel + epToNext)
   const xpPct       = Math.min((epIntoLevel / epPerLevel) * 100, 100)
   const toLang      = profil?.language_target_id ? langById(profil.language_target_id, langs) : null
   const langLabel   = toLang ? `${toLang.flag} ${toLang.label}` : (profil?.language_target_titel || 'Zielsprache')
   const streak      = profil?.streak_days ?? user?.streak_days ?? 0
+  const streakSt    = streakState(profil?.last_practice_at ?? user?.last_practice_at, streak)
 
   const today    = stats?.today
   const goal     = today?.daily_goal_ep || 30
@@ -160,9 +195,27 @@ export default function Profil() {
   const skills   = stats?.skills || []
   const hasSkillData = skills.some(s => s.seen > 0)
   const accuracyPct = totals ? Math.round((totals.accuracy || 0) * 100) : null
+  const categories   = stats?.categories || []
+  const maxCatPoints = Math.max(1, ...categories.map(c => c.points))
+  const capability   = capabilitySentence(categories)
+
+  // Wochenvergleich (soziale/zeitliche Validierung) aus dem Tagesverlauf.
+  const weekCompare = useMemo(() => {
+    const startOfToday = new Date(); startOfToday.setHours(0, 0, 0, 0)
+    let thisW = 0, lastW = 0
+    for (const d of daily) {
+      const dt = new Date(d.date); dt.setHours(0, 0, 0, 0)
+      const diff = Math.round((startOfToday - dt) / 86400000)
+      if (diff >= 0 && diff < 7) thisW += d.ep || 0
+      else if (diff >= 7 && diff < 14) lastW += d.ep || 0
+    }
+    const delta = lastW > 0 ? Math.round(((thisW - lastW) / lastW) * 100) : null
+    return { thisW, lastW, delta }
+  }, [daily])
 
   return (
     <div className="profil page-enter">
+      <SoundToggle />
       <LogoutButton />
 
       {/* ── Header ── */}
@@ -171,7 +224,6 @@ export default function Profil() {
           <div className="avatar-ring">
             <div className="avatar-inner"><div className="avatar">{initials}</div></div>
           </div>
-          <span className="online-dot" />
           <div className="avatar-level-badge">
             <svg viewBox="0 0 48 54" width="28" height="32">
               <defs>
@@ -185,10 +237,14 @@ export default function Profil() {
           </div>
         </div>
         <div className="profil-info">
-          <h2 className="profil-name">{displayName}</h2>
+          <h2 className="profil-name">{greeting}, {displayName}</h2>
-          <p className="profil-handle">@{displayName.toLowerCase()}</p>
+          <p className="profil-learning">lernt {langLabel}</p>
           {streak > 0 && (
-            <p className="profil-streak">🔥 {streak} Tag{streak !== 1 ? 'e' : ''} Streak</p>
+            <p className="profil-streak">
+              🔥 {streak} Tag{streak !== 1 ? 'e' : ''} Streak
+              {streakSt.state === 'at_risk' && <span className="streak-warn"> · noch {streakSt.hoursLeft} Std heute</span>}
+              {streakSt.state === 'safe'    && <span className="streak-ok"> · heute gesichert ✓</span>}
+            </p>
           )}
         </div>
       </div>
@@ -208,28 +264,81 @@ export default function Profil() {
         </div>
       </div>
 
-      {/* ── Fortschritt (Level/EP) ── */}
+      {/* ── Fortschritt (Level/EP) – führt mit Momentum statt nackter Zahl ── */}
       <div className="card">
         <p className="card-title">DEIN FORTSCHRITT</p>
         <div className="xp-row">
-          <span className="lang-label">{langLabel}</span>
+          <span className="level-pill">Level {level}</span>
-          <span className="xp-value">{points.toLocaleString('de')} EP gesamt</span>
+          <span className="xp-value">{Math.round(xpPct)} % bis Level {level + 1}</span>
         </div>
         <div className="xp-bar"><div className="xp-fill" style={{ width: `${xpPct}%` }} /></div>
         <div className="level-row">
-          <span className="level-pill">Level {level}</span>
+          <span className="level-hint">noch {epToNext.toLocaleString('de')} EP</span>
-          <span className="level-hint">{(epPerLevel - epIntoLevel).toLocaleString('de')} EP bis Level {level + 1}</span>
+          <span className="level-hint">{points.toLocaleString('de')} EP gesamt · {langLabel}</span>
         </div>
+        {capability && <p className="capability-line">{capability}</p>}
       </div>
 
       {/* ── Wochen-Aktivität ── */}
       {stats && (
         <div className="card">
           <p className="card-title">DIESE WOCHE</p>
+          {weekCompare.delta != null && (
+            <p className={`week-compare ${weekCompare.delta >= 0 ? 'up' : 'down'}`}>
+              {weekCompare.thisW} EP · {weekCompare.delta >= 0 ? '▲' : '▼'} {Math.abs(weekCompare.delta)} % {weekCompare.delta >= 0 ? 'mehr' : 'weniger'} als letzte Woche
+            </p>
+          )}
           <WeekBars daily={daily} goal={goal} />
         </div>
       )}
 
+      {/* ── Kategorien (Punkte je Thema) ── */}
+      {stats && (
+        <div className="card">
+          <p className="card-title">KATEGORIEN</p>
+          {categories.length ? (
+            <div className="cat-list">
+              {categories.map((c, i) => {
+                const color = CAT_COLORS[i % CAT_COLORS.length]
+                return (
+                  <div key={c.id} className="cat-row">
+                    <div className="cat-head">
+                      <span className="cat-dot" style={{ background: color }} />
+                      <span className="cat-label">
+                        {c.label || 'Allgemein'}
+                        <span className="cat-tier"> · {categoryTier(c.points).label}</span>
+                      </span>
+                      <span className="cat-points">{c.points} P</span>
+                    </div>
+                    <div className="cat-bar">
+                      <div className="cat-bar-fill"
+                        style={{ width: `${Math.round((c.points / maxCatPoints) * 100)}%`, background: color }} />
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          ) : (
+            <p className="skills-empty">Sammle Punkte — deine Themen erscheinen hier.</p>
+          )}
+        </div>
+      )}
+
+      {/* ── Erfolge ── */}
+      {achievements.length > 0 && (
+        <div className="card">
+          <p className="card-title">ERFOLGE · {achievements.filter(a => a.unlocked).length}/{achievements.length}</p>
+          <div className="ach-grid">
+            {achievements.map(a => (
+              <div key={a.key} className={`ach-tile ${a.unlocked ? 'on' : 'off'}`} title={a.label}>
+                <span className="ach-icon">{a.unlocked ? a.icon : '🔒'}</span>
+                <span className="ach-label">{a.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* ── Streak-Kalender ── */}
       {stats && (
         <div className="card">

src/utils/chipTimings.js

@@ -0,0 +1,48 @@
+// Karaoke-Timing: aus dem Satz + ElevenLabs-`alignment` pro Wort-/Objekt-Chip
+// ein Zeitfenster (Medienzeit in Sekunden) berechnen, damit beim Vorlesen das
+// gerade gesprochene Chip markiert werden kann.
+//
+// alignment-Format (ElevenLabs /with-timestamps):
+//   { characters: string[],
+//     character_start_times_seconds: number[],
+//     character_end_times_seconds: number[] }
+// `characters.join('')` entspricht dem vertonten Klartext (Platzhalter durch Labels ersetzt).
+
+const CHIP_RE = /\{\{([^.]+)\.(w|o):([0-9a-f-]{36})\}\}/g
+
+// Liefert [{ id, label, start, end }] – ein Eintrag pro Chip-Vorkommen im Satz.
+export function buildChipTimings(sentence, alignment) {
+  if (!sentence || !alignment) return []
+  const chars = alignment.characters
+  const starts = alignment.character_start_times_seconds
+  const ends = alignment.character_end_times_seconds
+  if (!Array.isArray(chars) || !Array.isArray(starts) || !Array.isArray(ends) || !chars.length) return []
+
+  const plain = chars.join('')
+  // Satz in derselben Reihenfolge nach Chip-Tokens absuchen; Labels sequenziell
+  // im Klartext lokalisieren (toleriert kleine Whitespace-Unterschiede).
+  const timings = []
+  let cursor = 0
+  for (const m of sentence.matchAll(CHIP_RE)) {
+    const label = m[1]
+    const id = m[3]
+    const startIdx = plain.indexOf(label, cursor)
+    if (startIdx === -1) continue
+    const endIdx = startIdx + label.length - 1
+    cursor = endIdx + 1
+    const start = starts[startIdx]
+    const end = ends[Math.min(endIdx, ends.length - 1)]
+    if (typeof start !== 'number' || typeof end !== 'number') continue
+    timings.push({ id, label, start, end })
+  }
+  return timings
+}
+
+// Id des Chips, dessen Zeitfenster t (Sekunden) enthält – sonst null.
+export function activeChipIdAt(timings, t) {
+  if (!timings?.length || typeof t !== 'number') return null
+  for (const c of timings) {
+    if (t >= c.start && t < c.end) return c.id
+  }
+  return null
+}

src/utils/leveling.js

@@ -0,0 +1,24 @@
+// Spiegelt die Backend-Kurve (snakkimo-API/src/lib/leveling.js).
+// Dient als Fallback, falls die API noch keine level/ep_into_level-Felder liefert,
+// und für die %-Anzeige innerhalb eines Levels.
+export function epForLevel(level) {
+  return level <= 0 ? 0 : 5 * level * (level + 3)
+}
+
+export function levelForEp(ep) {
+  const e = Math.max(0, ep || 0)
+  return Math.floor((-15 + Math.sqrt(225 + 20 * e)) / 10)
+}
+
+export function levelInfo(ep) {
+  const e = Math.max(0, ep || 0)
+  const level = levelForEp(e)
+  const base = epForLevel(level)
+  const next = epForLevel(level + 1)
+  return {
+    level,
+    epIntoLevel: e - base,
+    epToNextLevel: next - e,
+    epForNextLevel: next - base,
+  }
+}

src/utils/praise.js

@@ -0,0 +1,42 @@
+// Variables Erfolgs-Feedback statt immer „✓ Richtig!" — kleine Abwechslung
+// hält den Belohnungsmoment frisch.
+const PRAISE = ['Stark!', 'Genau!', 'Sitzt!', 'Perfekt!', 'Bravo!', 'Sauber!', 'Weiter so!']
+export function praise() {
+  return PRAISE[Math.floor(Math.random() * PRAISE.length)]
+}
+
+// Ermutigende Einleitung für falsche Antworten — Fehler als Lernschritt rahmen,
+// nicht als Bestrafung.
+const ENCOURAGE = ['Fast!', 'Kein Problem —', 'Gleich hast du\'s!', 'Daraus lernst du:']
+export function encourage() {
+  return ENCOURAGE[Math.floor(Math.random() * ENCOURAGE.length)]
+}
+
+// Kategorie-Meisterungsstufen (MVP, client-seitig). Idealerweise später
+// backend-/content-getrieben mit echten Schwellen je Thema → Plan C3.
+const TIERS = [
+  { min: 0,  label: 'Erste Schritte' },
+  { min: 5,  label: 'Vertraut' },
+  { min: 12, label: 'Sicher' },
+  { min: 25, label: 'Gemeistert' },
+]
+export function categoryTier(points) {
+  let tier = TIERS[0]
+  for (const t of TIERS) if ((points || 0) >= t.min) tier = t
+  return tier
+}
+
+// Punkte bis zur nächsten Stufe (für „2 P bis Vertraut").
+export function pointsToNextTier(points) {
+  const p = points || 0
+  for (const t of TIERS) if (p < t.min) return { label: t.label, remaining: t.min - p }
+  return null // bereits höchste Stufe
+}
+
+// Story-Satz für die stärkste Kategorie — „was du jetzt kannst", nicht nur Zahlen.
+export function capabilitySentence(categories) {
+  if (!categories?.length) return null
+  const top = categories[0]
+  const tier = categoryTier(top.points)
+  return `Dein stärkstes Thema: „${top.label}" — Stufe ${tier.label}.`
+}

src/utils/secureToken.js

@@ -0,0 +1,40 @@
+// Sicherer Token-Speicher: iOS-Keychain (nativ, nicht aus dem WebView lesbar),
+// im Browser-Dev fällt das Plugin auf localStorage zurück.
+import { SecureStoragePlugin } from 'capacitor-secure-storage-plugin'
+
+const KEY = 'snakkimo_token'
+const LEGACY_LS_KEY = 'hejyou_token' // Alt-Token aus der localStorage-Ära
+
+// get() wirft, wenn der Key fehlt → als "kein Token" behandeln.
+async function rawGet() {
+  try {
+    const { value } = await SecureStoragePlugin.get({ key: KEY })
+    return value || null
+  } catch {
+    return null
+  }
+}
+
+export async function setStoredToken(token) {
+  await SecureStoragePlugin.set({ key: KEY, value: token })
+}
+
+export async function clearStoredToken() {
+  try { await SecureStoragePlugin.remove({ key: KEY }) } catch {}
+}
+
+// Token aus dem sicheren Speicher lesen. Migriert dabei einmalig einen evtl. noch
+// in localStorage liegenden Alt-Token, damit eingeloggte Nutzer eingeloggt bleiben.
+export async function getStoredToken() {
+  const existing = await rawGet()
+  if (existing) return existing
+  try {
+    const legacy = localStorage.getItem(LEGACY_LS_KEY)
+    if (legacy) {
+      await setStoredToken(legacy)
+      localStorage.removeItem(LEGACY_LS_KEY)
+      return legacy
+    }
+  } catch { /* localStorage nicht verfügbar – ignorieren */ }
+  return null
+}

src/utils/sound.js

@@ -0,0 +1,56 @@
+// Dezente Belohnungs-Sounds via WebAudio (kein Asset-Download nötig).
+// Mute-Pref in localStorage; standardmäßig an.
+const KEY = 'snakkimo_sound'
+let ctx = null
+
+function audioCtx() {
+  if (typeof window === 'undefined') return null
+  if (!ctx) {
+    const C = window.AudioContext || window.webkitAudioContext
+    ctx = C ? new C() : null
+  }
+  return ctx
+}
+
+export function isMuted() {
+  try { return localStorage.getItem(KEY) === 'off' } catch { return false }
+}
+export function setMuted(muted) {
+  try { localStorage.setItem(KEY, muted ? 'off' : 'on') } catch { /* ignore */ }
+}
+
+function tone(freq, startOffset, dur, gain = 0.05) {
+  const ac = audioCtx()
+  if (!ac) return
+  const osc = ac.createOscillator()
+  const g = ac.createGain()
+  osc.type = 'sine'
+  osc.frequency.value = freq
+  osc.connect(g); g.connect(ac.destination)
+  const t = ac.currentTime + startOffset
+  g.gain.setValueAtTime(0.0001, t)
+  g.gain.linearRampToValueAtTime(gain, t + 0.02)
+  g.gain.exponentialRampToValueAtTime(0.0001, t + dur)
+  osc.start(t); osc.stop(t + dur + 0.02)
+}
+
+// Kurzer, freundlicher Zwei-Ton bei richtiger Antwort.
+export function playCorrect() {
+  if (isMuted()) return
+  try {
+    const ac = audioCtx()
+    if (ac?.state === 'suspended') ac.resume()
+    tone(660, 0, 0.12)
+    tone(880, 0.07, 0.16)
+  } catch { /* ignore */ }
+}
+
+// Aufsteigende Fanfare bei Milestones (Level-Up, Streak, Tagesziel).
+export function playMilestone() {
+  if (isMuted()) return
+  try {
+    const ac = audioCtx()
+    if (ac?.state === 'suspended') ac.resume()
+    ;[523, 659, 784, 1047].forEach((f, i) => tone(f, i * 0.09, 0.24, 0.06))
+  } catch { /* ignore */ }
+}

src/utils/speak.js

@@ -0,0 +1,23 @@
+// Browser-TTS-Fallback fürs Vorlesen, wenn kein (ladbares) Audio-File vorhanden ist.
+
+const LANG_TTS = { sv: 'sv-SE', en: 'en-US', de: 'de-DE' }
+
+// {{label.w/o:uuid}} und ⟦PHn:wort⟧-Tokens auf reinen Text reduzieren.
+export function toPlainText(sentence) {
+  if (!sentence) return ''
+  return sentence
+    .replace(/\{\{([^.]+)\.[wo]:[0-9a-f-]{36}\}\}/g, '$1')
+    .replace(/[⟦〚]PH\d+:([^⟧〛]*)[⟧〛]/g, '$1')
+}
+
+// Liest den Satz per SpeechSynthesis vor. Gibt true zurück, wenn tatsächlich
+// vorgelesen wurde (für Karten, die daran ein Unlock koppeln).
+export function speak(sentence, lang) {
+  if (!window.speechSynthesis || !sentence) return false
+  window.speechSynthesis.cancel()
+  const utt = new SpeechSynthesisUtterance(toPlainText(sentence))
+  utt.lang = LANG_TTS[lang] || 'de-DE'
+  utt.rate = 0.7
+  window.speechSynthesis.speak(utt)
+  return true
+}

src/utils/streak.js

@@ -0,0 +1,20 @@
+// Streak-Zustand aus last_practice_at ableiten — für den Loss-Aversion-Nudge.
+//   safe    = heute schon geübt → Serie sicher
+//   at_risk = gestern zuletzt, heute noch nicht → läuft heute ab
+//   broken  = Lücke ≥ 2 Tage → Serie effektiv verloren (Backend setzt beim nächsten Üben zurück)
+//   none    = noch nie geübt
+export function streakState(lastPracticeAt, streakDays = 0, now = new Date()) {
+  if (!lastPracticeAt) return { state: 'none', streakDays: 0, hoursLeft: 0 }
+
+  const last = new Date(lastPracticeAt)
+  const startToday = new Date(now); startToday.setHours(0, 0, 0, 0)
+  const startLast  = new Date(last); startLast.setHours(0, 0, 0, 0)
+  const dayDiff = Math.round((startToday - startLast) / 86400000)
+
+  const endOfDay = new Date(now); endOfDay.setHours(24, 0, 0, 0)
+  const hoursLeft = Math.max(1, Math.ceil((endOfDay - now) / 3600000))
+
+  if (dayDiff <= 0) return { state: 'safe', streakDays, hoursLeft }
+  if (dayDiff === 1) return { state: 'at_risk', streakDays, hoursLeft }
+  return { state: 'broken', streakDays, hoursLeft }
+}

src/utils/streakReminder.js

@@ -0,0 +1,49 @@
+import { Capacitor } from '@capacitor/core'
+
+// Lokale Tages-Erinnerung – plant auf dem Gerät selbst, KEIN APNs/Push-Server nötig.
+// Auf Web/Server ein No-op (Plugin nur nativ verfügbar).
+const REMINDER_ID = 4711
+const REMIND_HOUR = 19
+
+async function getPlugin() {
+  if (!Capacitor?.isNativePlatform?.()) return null
+  try {
+    const mod = await import('@capacitor/local-notifications')
+    return mod.LocalNotifications
+  } catch {
+    return null
+  }
+}
+
+// Erinnerung für heute (oder, wenn 19 Uhr vorbei, morgen) planen.
+// Beim nächsten Login wird neu geplant → faktisch täglich, aber nie nervig wiederholend.
+export async function scheduleStreakReminder(streakDays = 0) {
+  const LN = await getPlugin()
+  if (!LN) return
+  try {
+    const perm = await LN.requestPermissions()
+    if (perm.display !== 'granted') return
+    await LN.cancel({ notifications: [{ id: REMINDER_ID }] })
+
+    const at = new Date(); at.setHours(REMIND_HOUR, 0, 0, 0)
+    if (at <= new Date()) at.setDate(at.getDate() + 1)
+
+    await LN.schedule({
+      notifications: [{
+        id: REMINDER_ID,
+        title: 'Deine Serie wartet 🔥',
+        body: streakDays > 0
+          ? `Halte deine ${streakDays}-Tage-Serie am Leben – kurz üben reicht!`
+          : 'Zeit für deine kurze Lern-Session!',
+        schedule: { at },
+      }],
+    })
+  } catch { /* Erinnerung ist optional */ }
+}
+
+// Abbrechen, sobald heute geübt wurde (Serie ist gesichert).
+export async function cancelStreakReminder() {
+  const LN = await getPlugin()
+  if (!LN) return
+  try { await LN.cancel({ notifications: [{ id: REMINDER_ID }] }) } catch { /* ignore */ }
+}