Dokumentiere i18n-Implementierung

DEBUG_VERSION.md

@@ -0,0 +1,185 @@
+# Debug Version Display - Remote Server Checklist
+
+## 1. Überprüfe Git-Tags auf dem Remote-Server
+
+```bash
+# Im Projekt-Verzeichnis auf dem Remote-Server
+cd /path/to/hoerdle
+
+# Zeige alle Tags
+git tag -l
+
+# Zeige aktuellen Tag/Version
+git describe --tags --always
+
+# Wenn keine Tags angezeigt werden:
+git fetch --tags
+git describe --tags --always
+```
+
+**Erwartetes Ergebnis:** Sollte `v0.1.0.2` oder ähnlich zeigen
+
+---
+
+## 2. Überprüfe die version.txt im Container
+
+```bash
+# Zeige den Inhalt der Version-Datei im laufenden Container
+docker exec hoerdle cat /app/version.txt
+
+# Sollte die Version zeigen, z.B. "v0.1.0.2"
+```
+
+**Erwartetes Ergebnis:** Die aktuelle Version, nicht "unknown" oder "dev"
+
+---
+
+## 3. Überprüfe die Umgebungsvariable im Container
+
+```bash
+# Zeige alle Umgebungsvariablen
+docker exec hoerdle env | grep APP_VERSION
+
+# Sollte APP_VERSION=v0.1.0.2 oder ähnlich zeigen
+```
+
+**Erwartetes Ergebnis:** `APP_VERSION=v0.1.0.2`
+
+---
+
+## 4. Überprüfe die Container-Logs beim Start
+
+```bash
+# Zeige die letzten Logs beim Container-Start
+docker logs hoerdle | head -20
+
+# Suche speziell nach Version-Ausgaben
+docker logs hoerdle | grep -i version
+```
+
+**Erwartetes Ergebnis:** Eine Zeile wie "App version: v0.1.0.2"
+
+---
+
+## 5. Teste die API direkt
+
+```bash
+# Rufe die Version-API auf
+curl http://localhost:3010/api/version
+
+# Sollte JSON zurückgeben: {"version":"v0.1.0.2"}
+```
+
+**Erwartetes Ergebnis:** `{"version":"v0.1.0.2"}`
+
+---
+
+## 6. Überprüfe wann der Container gebaut wurde
+
+```bash
+# Zeige Image-Informationen
+docker images | grep hoerdle
+
+# Zeige detaillierte Container-Informationen
+docker inspect hoerdle | grep -i created
+```
+
+**Wichtig:** Wenn das Image vor deinem letzten Deployment erstellt wurde, wurde es noch nicht neu gebaut!
+
+---
+
+## 7. Überprüfe Build-Logs
+
+```bash
+# Baue das Image neu und beobachte die Ausgabe
+docker compose build --no-cache 2>&1 | tee build.log
+
+# Suche nach der Version-Ausgabe im Build
+grep -i "Building version" build.log
+```
+
+**Erwartetes Ergebnis:** Eine Zeile wie "Building version: v0.1.0.2"
+
+---
+
+## Häufige Probleme und Lösungen
+
+### Problem 1: Tags nicht auf dem Server
+```bash
+git fetch --tags
+git describe --tags --always
+```
+
+### Problem 2: Container wurde nicht neu gebaut
+```bash
+docker compose build --no-cache
+docker compose up -d
+```
+
+### Problem 3: Alte version.txt im Container
+```bash
+# Stoppe Container, lösche Image, baue neu
+docker compose down
+docker rmi $(docker images | grep hoerdle | awk '{print $3}')
+docker compose build --no-cache
+docker compose up -d
+```
+
+### Problem 4: .git Verzeichnis nicht im Build-Context
+```bash
+# Überprüfe ob .git existiert
+ls -la .git
+
+# Überprüfe .dockerignore (sollte .git NICHT ausschließen)
+cat .dockerignore 2>/dev/null || echo "Keine .dockerignore Datei"
+```
+
+---
+
+## Vollständiger Neustart (wenn nichts anderes hilft)
+
+```bash
+# 1. Stoppe alles
+docker compose down
+
+# 2. Lösche alte Images
+docker rmi $(docker images | grep hoerdle | awk '{print $3}')
+
+# 3. Hole neueste Änderungen und Tags
+git pull
+git fetch --tags
+
+# 4. Überprüfe Version lokal
+git describe --tags --always
+
+# 5. Baue komplett neu
+docker compose build --no-cache
+
+# 6. Starte Container
+docker compose up -d
+
+# 7. Überprüfe Logs
+docker logs hoerdle | grep -i version
+
+# 8. Teste API
+curl http://localhost:3010/api/version
+```
+
+---
+
+## Debugging-Befehl für alle Checks auf einmal
+
+```bash
+echo "=== Git Tags ===" && \
+git describe --tags --always && \
+echo -e "\n=== version.txt im Container ===" && \
+docker exec hoerdle cat /app/version.txt 2>/dev/null || echo "Container läuft nicht oder Datei fehlt" && \
+echo -e "\n=== APP_VERSION Env ===" && \
+docker exec hoerdle env | grep APP_VERSION || echo "Variable nicht gesetzt" && \
+echo -e "\n=== API Response ===" && \
+curl -s http://localhost:3010/api/version && \
+echo -e "\n\n=== Container Created ===" && \
+docker inspect hoerdle | grep -i created | head -1
+```
+
+Kopiere diesen Befehl und führe ihn auf dem Remote-Server aus. Schicke mir die Ausgabe!

DEPLOYMENT.md

@@ -0,0 +1,84 @@
+# Deployment Guide
+
+## Automated Deployment
+
+Use the deployment script for zero-downtime deployments:
+
+```bash
+./scripts/deploy.sh
+```
+
+This script will:
+1. Create a database backup
+2. Pull latest changes from git
+3. Fetch all git tags (for version display)
+4. Build the new Docker image
+5. Restart the container with minimal downtime
+6. Clean up old images
+
+## Manual Deployment
+
+If you need to deploy manually:
+
+```bash
+# Pull latest changes
+git pull
+
+# Fetch tags (important for version display!)
+git fetch --tags
+
+# Build and restart
+docker compose build
+docker compose up -d
+```
+
+## Version Display
+
+The app displays the current version in the footer. The version is determined as follows:
+
+1. **During Docker build**: The version is extracted from git tags using `git describe --tags --always`
+2. **At runtime**: The version is read from `/app/version.txt` and exposed via the `/api/version` endpoint
+3. **Local development**: The version is extracted directly from git on each request
+
+### Building with a specific version
+
+You can override the version during build:
+
+```bash
+docker compose build --build-arg APP_VERSION=v1.2.3
+```
+
+### Troubleshooting
+
+If the version shows as "dev" or "unknown":
+
+1. Make sure git tags are pushed to the remote repository:
+   ```bash
+   git push --tags
+   ```
+
+2. On the deployment server, fetch the tags:
+   ```bash
+   git fetch --tags
+   ```
+
+3. Verify tags are available:
+   ```bash
+   git describe --tags --always
+   ```
+
+4. Rebuild the Docker image:
+   ```bash
+   docker compose build --no-cache
+   docker compose up -d
+   ```
+
+## Health Check
+
+The container includes a health check that monitors the `/api/daily` endpoint. Check the health status:
+
+```bash
+docker ps
+```
+
+Look for the "healthy" status in the STATUS column.

Dockerfile

@@ -13,9 +13,24 @@ RUN npm ci
 # Rebuild the source code only when needed
 FROM base AS builder
 WORKDIR /app
+
+# Accept version as build argument (optional)
+ARG APP_VERSION=""
+
+# Install git to extract version information
+RUN apk add --no-cache git
+
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+# Extract version: use build arg if provided, otherwise get from git
+RUN if [ -n "$APP_VERSION" ]; then \
+    echo "$APP_VERSION" > /tmp/version.txt; \
+    else \
+    git describe --tags --always 2>/dev/null > /tmp/version.txt || echo "unknown" > /tmp/version.txt; \
+    fi && \
+    echo "Building version: $(cat /tmp/version.txt)"
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
@@ -25,6 +40,34 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ENV DATABASE_URL="file:./dev.db"
 RUN node_modules/.bin/prisma generate
 
+# White Label Build Arguments
+ARG NEXT_PUBLIC_APP_NAME
+ARG NEXT_PUBLIC_APP_DESCRIPTION
+ARG NEXT_PUBLIC_DOMAIN
+ARG NEXT_PUBLIC_TWITTER_HANDLE
+ARG NEXT_PUBLIC_PLAUSIBLE_DOMAIN
+ARG NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC
+ARG NEXT_PUBLIC_THEME_COLOR
+ARG NEXT_PUBLIC_BACKGROUND_COLOR
+ARG NEXT_PUBLIC_CREDITS_ENABLED
+ARG NEXT_PUBLIC_CREDITS_TEXT
+ARG NEXT_PUBLIC_CREDITS_LINK_TEXT
+ARG NEXT_PUBLIC_CREDITS_LINK_URL
+
+# Pass env vars to build
+ENV NEXT_PUBLIC_APP_NAME=$NEXT_PUBLIC_APP_NAME
+ENV NEXT_PUBLIC_APP_DESCRIPTION=$NEXT_PUBLIC_APP_DESCRIPTION
+ENV NEXT_PUBLIC_DOMAIN=$NEXT_PUBLIC_DOMAIN
+ENV NEXT_PUBLIC_TWITTER_HANDLE=$NEXT_PUBLIC_TWITTER_HANDLE
+ENV NEXT_PUBLIC_PLAUSIBLE_DOMAIN=$NEXT_PUBLIC_PLAUSIBLE_DOMAIN
+ENV NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC=$NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC
+ENV NEXT_PUBLIC_THEME_COLOR=$NEXT_PUBLIC_THEME_COLOR
+ENV NEXT_PUBLIC_BACKGROUND_COLOR=$NEXT_PUBLIC_BACKGROUND_COLOR
+ENV NEXT_PUBLIC_CREDITS_ENABLED=$NEXT_PUBLIC_CREDITS_ENABLED
+ENV NEXT_PUBLIC_CREDITS_TEXT=$NEXT_PUBLIC_CREDITS_TEXT
+ENV NEXT_PUBLIC_CREDITS_LINK_TEXT=$NEXT_PUBLIC_CREDITS_LINK_TEXT
+ENV NEXT_PUBLIC_CREDITS_LINK_URL=$NEXT_PUBLIC_CREDITS_LINK_URL
+
 RUN npm run build
 
 # Production image, copy all the files and run next
@@ -53,6 +96,9 @@ COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
 # Create uploads directory and set permissions
 RUN mkdir -p public/uploads/covers && chown -R nextjs:nodejs public/uploads
 
+# Copy version file from builder
+COPY --from=builder /tmp/version.txt /app/version.txt
+
 USER nextjs
 
 EXPOSE 3000

I18N.md

@@ -0,0 +1,349 @@
+# Internationalisierung (i18n) Dokumentation
+
+Hördle unterstützt vollständige Mehrsprachigkeit (Internationalisierung) für Deutsch und Englisch.
+
+## Übersicht
+
+Die i18n-Implementierung basiert auf [next-intl](https://next-intl-docs.vercel.app/) und nutzt den Next.js App Router mit dynamischen `[locale]`-Segmenten.
+
+## Unterstützte Sprachen
+
+- **Deutsch (de)** - Standardsprache
+- **Englisch (en)**
+
+## URL-Struktur
+
+Alle Routen sind lokalisiert:
+
+- `http://localhost:3000/` → Redirect zu `/de` (Standard)
+- `http://localhost:3000/de` → Deutsche Version
+- `http://localhost:3000/en` → Englische Version
+- `http://localhost:3000/de/admin` → Admin-Dashboard (Deutsch)
+- `http://localhost:3000/de/Rock` → Rock Genre (Deutsch)
+- `http://localhost:3000/de/special/Weihnachtslieder` → Special (Deutsch)
+
+## Architektur
+
+### Verzeichnisstruktur
+
+```
+app/
+  [locale]/              # Lokalisierte Routen
+    layout.tsx           # Root Layout mit i18n Provider
+    page.tsx             # Homepage
+    admin/
+      page.tsx           # Admin Dashboard
+    [genre]/
+      page.tsx           # Genre-spezifische Seite
+    special/
+      [name]/
+        page.tsx         # Special-Seite
+
+i18n/
+  request.ts             # next-intl Konfiguration
+
+messages/
+  de.json                # Deutsche Übersetzungen
+  en.json                # Englische Übersetzungen
+
+lib/
+  i18n.ts                # Helper-Funktionen für lokalisierte DB-Werte
+  navigation.ts          # Lokalisierte Navigation (Link, useRouter, etc.)
+```
+
+### Übersetzungsdateien
+
+Die Übersetzungen sind in JSON-Dateien unter `messages/` organisiert:
+
+```json
+{
+  "Common": {
+    "loading": "Laden...",
+    "error": "Ein Fehler ist aufgetreten"
+  },
+  "Game": {
+    "play": "Abspielen",
+    "pause": "Pause",
+    "won": "Gewonnen!"
+  },
+  "Home": {
+    "welcome": "Willkommen bei Hördle"
+  }
+}
+```
+
+### Datenbank-Schema
+
+Die folgenden Modelle unterstützen mehrsprachige Felder:
+
+#### Genre
+- `name`: JSON `{ "de": "Rock", "en": "Rock" }`
+- `subtitle`: JSON `{ "de": "Klassischer Rock", "en": "Classic Rock" }`
+
+#### Special
+- `name`: JSON `{ "de": "Weihnachtslieder", "en": "Christmas Songs" }`
+- `subtitle`: JSON `{ "de": "Festliche Musik", "en": "Festive Music" }`
+
+#### News
+- `title`: JSON `{ "de": "Neues Feature", "en": "New Feature" }`
+- `content`: JSON `{ "de": "Markdown Inhalt...", "en": "Markdown content..." }`
+
+### Helper-Funktionen
+
+#### `getLocalizedValue(value, locale, fallback?)`
+
+Extrahiert den lokalisierten Wert aus einem JSON-Objekt:
+
+```typescript
+import { getLocalizedValue } from '@/lib/i18n';
+
+const genreName = getLocalizedValue(genre.name, 'de'); // "Rock"
+const genreNameEn = getLocalizedValue(genre.name, 'en'); // "Rock"
+```
+
+**Fallback-Verhalten:**
+1. Versucht die angeforderte Locale (`de` oder `en`)
+2. Fallback zu `de` falls nicht vorhanden
+3. Fallback zu `en` falls nicht vorhanden
+4. Fallback zum ersten verfügbaren Schlüssel
+5. Fallback zum übergebenen `fallback`-Parameter
+
+#### `createLocalizedObject(de, en?)`
+
+Erstellt ein lokalisiertes Objekt:
+
+```typescript
+import { createLocalizedObject } from '@/lib/i18n';
+
+const name = createLocalizedObject('Rock', 'Rock');
+// { de: "Rock", en: "Rock" }
+```
+
+## Verwendung in Komponenten
+
+### Server Components
+
+```typescript
+import { getTranslations } from 'next-intl/server';
+import { getLocalizedValue } from '@/lib/i18n';
+
+export default async function Page({ params }: { params: { locale: string } }) {
+  const { locale } = await params;
+  const t = await getTranslations('Home');
+  
+  const genreName = getLocalizedValue(genre.name, locale);
+  
+  return <h1>{t('welcome')}</h1>;
+}
+```
+
+### Client Components
+
+```typescript
+'use client';
+import { useTranslations } from 'next-intl';
+import { useLocale } from 'next-intl';
+
+export default function Game() {
+  const t = useTranslations('Game');
+  const locale = useLocale();
+  
+  return <button>{t('play')}</button>;
+}
+```
+
+### Navigation
+
+Verwende die lokalisierte Navigation aus `lib/navigation.ts`:
+
+```typescript
+import { Link } from '@/lib/navigation';
+
+// Automatisch lokalisiert
+<Link href="/admin">Admin</Link>
+<Link href="/Rock">Rock</Link>
+```
+
+## Admin-Interface
+
+Das Admin-Dashboard unterstützt mehrsprachige Eingaben:
+
+1. **Sprach-Tabs:** Wechsle zwischen `DE` und `EN` Tabs
+2. **Genre/Special/News:** Alle Felder können in beiden Sprachen bearbeitet werden
+3. **Vorschau:** Sieh dir die lokalisierte Version direkt an
+
+### Beispiel: Genre erstellen
+
+1. Öffne `/de/admin`
+2. Wähle den `DE` Tab
+3. Gib Name und Subtitle ein
+4. Wechsle zum `EN` Tab
+5. Gib die englischen Übersetzungen ein
+6. Speichere
+
+## Migration bestehender Daten
+
+Bestehende Daten werden automatisch migriert:
+
+1. **Migration `20251128131405_add_i18n_columns`:** Fügt neue JSON-Spalten hinzu
+2. **Migration `20251128132806_switch_to_json_columns`:** Konvertiert String-Spalten zu JSON
+
+**Wichtig:** Alte String-Werte werden automatisch in beide Sprachen kopiert:
+- `"Rock"` → `{ "de": "Rock", "en": "Rock" }`
+
+## Middleware
+
+Die Middleware (`middleware.ts`) leitet Anfragen automatisch um:
+
+- `/` → `/de` (Standard)
+- Ungültige Locales → 404
+- Validiert Locale-Parameter
+
+## Sprachumschalter
+
+Die `LanguageSwitcher`-Komponente ermöglicht Nutzern, zwischen Sprachen zu wechseln:
+
+```typescript
+import LanguageSwitcher from '@/components/LanguageSwitcher';
+
+<LanguageSwitcher />
+```
+
+Die aktuelle Route bleibt erhalten, nur die Locale ändert sich:
+- `/de/admin` → `/en/admin`
+- `/de/Rock` → `/en/Rock`
+
+## API-Endpunkte
+
+API-Routen unterstützen einen optionalen `locale`-Parameter:
+
+```typescript
+GET /api/genres?locale=de
+GET /api/specials?locale=en
+GET /api/news?locale=de
+```
+
+Falls kein `locale` angegeben wird, wird `de` als Standard verwendet.
+
+## Best Practices
+
+### 1. Immer `getLocalizedValue` verwenden
+
+❌ **Falsch:**
+```typescript
+<span>{genre.name}</span> // Rendert { de: "...", en: "..." }
+```
+
+✅ **Richtig:**
+```typescript
+<span>{getLocalizedValue(genre.name, locale)}</span>
+```
+
+### 2. Übersetzungsschlüssel konsistent benennen
+
+Verwende Namespaces für bessere Organisation:
+- `Common.*` - Allgemeine UI-Elemente
+- `Game.*` - Spiel-spezifische Texte
+- `Home.*` - Homepage-Texte
+- `Navigation.*` - Navigations-Elemente
+
+### 3. Fallbacks definieren
+
+Immer einen Fallback-Wert angeben:
+
+```typescript
+const name = getLocalizedValue(genre.name, locale, 'Unbekannt');
+```
+
+### 4. Neue Übersetzungen hinzufügen
+
+1. Füge den Schlüssel zu `messages/de.json` hinzu
+2. Füge den Schlüssel zu `messages/en.json` hinzu
+3. Verwende `useTranslations('Namespace')` oder `getTranslations('Namespace')`
+
+## Troubleshooting
+
+### 404-Fehler auf `/de` oder `/en`
+
+**Problem:** Route wird nicht gefunden.
+
+**Lösung:**
+1. Überprüfe, ob `middleware.ts` korrekt konfiguriert ist
+2. Stelle sicher, dass `app/[locale]/layout.tsx` existiert
+3. Prüfe die `i18n/request.ts` Konfiguration
+
+### "Objects are not valid as a React child"
+
+**Problem:** Ein JSON-Objekt wird direkt gerendert statt des lokalisierten Werts.
+
+**Lösung:**
+Verwende `getLocalizedValue()`:
+
+```typescript
+// ❌ Falsch
+<span>{genre.name}</span>
+
+// ✅ Richtig
+<span>{getLocalizedValue(genre.name, locale)}</span>
+```
+
+### Übersetzungen werden nicht angezeigt
+
+**Problem:** Texte erscheinen als Schlüssel (z.B. `"Game.play"`).
+
+**Lösung:**
+1. Überprüfe, ob der Übersetzungsschlüssel in `messages/de.json` und `messages/en.json` existiert
+2. Stelle sicher, dass der Namespace korrekt ist: `useTranslations('Game')` für `Game.play`
+3. Prüfe die JSON-Syntax auf Fehler
+
+### Admin-Interface zeigt Objekte statt Text
+
+**Problem:** In Dropdowns oder Listen werden `{ de: "...", en: "..." }` angezeigt.
+
+**Lösung:**
+Verwende `getLocalizedValue()` in allen Render-Funktionen:
+
+```typescript
+// ❌ Falsch
+<option value={s.id}>{s.name}</option>
+
+// ✅ Richtig
+<option value={s.id}>{getLocalizedValue(s.name, activeTab)}</option>
+```
+
+## Erweiterung um weitere Sprachen
+
+Um eine neue Sprache hinzuzufügen (z.B. Französisch):
+
+1. **Übersetzungsdatei erstellen:**
+   ```bash
+   cp messages/de.json messages/fr.json
+   ```
+
+2. **Übersetzungen hinzufügen:**
+   Bearbeite `messages/fr.json` mit französischen Übersetzungen
+
+3. **Locale zur Konfiguration hinzufügen:**
+   - `i18n/request.ts`: `const locales = ['en', 'de', 'fr'];`
+   - `middleware.ts`: `locales: ['en', 'de', 'fr']`
+   - `lib/navigation.ts`: `export const locales = ['de', 'en', 'fr'] as const;`
+
+4. **Layout aktualisieren:**
+   ```typescript
+   // app/[locale]/layout.tsx
+   if (!['en', 'de', 'fr'].includes(locale)) {
+     notFound();
+   }
+   ```
+
+5. **LanguageSwitcher erweitern:**
+   Füge einen Button für `fr` hinzu
+
+6. **Datenbank-Migration:**
+   Bestehende Daten behalten ihre Struktur, neue Einträge können optional `fr` enthalten
+
+## Weitere Ressourcen
+
+- [next-intl Dokumentation](https://next-intl-docs.vercel.app/)
+- [Next.js App Router i18n](https://nextjs.org/docs/app/building-your-application/routing/internationalization)
+

README.md

@@ -4,6 +4,7 @@ Eine Web-App inspiriert von Heardle, bei der Nutzer täglich einen Song anhand k
 
 ## Features
 
+- **🌍 Mehrsprachigkeit (i18n):** Vollständige Unterstützung für Deutsch und Englisch mit automatischer Sprachumleitung und lokalisierten Inhalten.
 - **Tägliches Rätsel:** Jeden Tag ein neuer Song für alle Nutzer.
 - **Inkrementelle Hinweise:** Startet mit 2 Sekunden, dann 4s, 7s, 11s, 16s, 30s, bis 60s (7 Versuche).
 - **Admin Dashboard:**
@@ -41,7 +42,34 @@ Eine Web-App inspiriert von Heardle, bei der Nutzer täglich einen Song anhand k
     - Live-Vorschau beim Hovern über die Waveform.
     - Playback-Cursor zeigt aktuelle Abspielposition.
     - Einzelne Segmente zum Testen abspielen.
+    - Einzelne Segmente zum Testen abspielen.
     - Manuelle Speicherung mit visueller Bestätigung.
+- **News & Announcements:**
+    - Integriertes News-System für Ankündigungen (z.B. neue Specials, Features).
+    - **Markdown Support:** Formatierung von Texten, Links und Listen.
+    - **Homepage Integration:** Dezentrale Anzeige auf der Startseite (collapsible).
+    - **Featured News:** Hervorhebung wichtiger Ankündigungen.
+    - Special-Verknüpfung: Direkte Links zu Specials in News-Beiträgen.
+    - Verwaltung über das Admin-Dashboard.
+
+## Internationalisierung (i18n)
+
+Hördle unterstützt vollständige Mehrsprachigkeit für Deutsch und Englisch.
+
+👉 **[Vollständige i18n-Dokumentation](I18N.md)**
+
+**Schnellstart:**
+- Deutsche Version: `http://localhost:3000/de`
+- Englische Version: `http://localhost:3000/en`
+- Root (`/`) leitet automatisch zur Standardsprache (Deutsch) um
+
+## White Labeling
+
+Hördle ist "White Label Ready". Das bedeutet, du kannst das Branding (Name, Farben, Logos) komplett anpassen, ohne den Code zu ändern.
+
+👉 **[Anleitung zur Anpassung (White Label Guide)](WHITE_LABEL.md)**
+
+Die Konfiguration erfolgt einfach über Umgebungsvariablen und CSS-Variablen.
 
 ## Spielregeln & Punktesystem
 
@@ -87,12 +115,14 @@ Das Ziel ist es, den Song mit so wenigen Hinweisen wie möglich zu erraten und d
    ```bash
    npm run dev
    ```
-   Die App läuft unter `http://localhost:3000`.
+   Die App läuft unter `http://localhost:3000` (leitet automatisch zu `/de` um).
 
 ## Deployment mit Docker
 
 Das Projekt ist für den Betrieb mit Docker optimiert.
 
+👉 **[White Labeling mit Docker? Hier klicken!](WHITE_LABEL.md#docker-deployment)**
+
 1. **Vorbereitung:**
    Kopiere die Beispiel-Konfiguration:
    ```bash
@@ -121,7 +151,7 @@ Das Projekt ist für den Betrieb mit Docker optimiert.
     - Beim Start des Containers wird automatisch ein Migrations-Skript ausgeführt, das fehlende Cover-Bilder aus den MP3s extrahiert.
 
 4. **Admin-Zugang:**
-   - URL: `/admin`
+   - URL: `/de/admin` oder `/en/admin`
    - Standard-Passwort: `admin123` (Bitte in `docker-compose.yml` ändern! Muss als Hash hinterlegt werden.)
 
 5. **Special Curation & Scheduling verwenden:**
@@ -192,12 +222,12 @@ Hördle kann problemlos als iFrame in andere Webseiten eingebettet werden. Die A
 
 ### Genre-spezifische Einbindung
 
-Einzelne Genres können direkt eingebunden werden:
+Einzelne Genres können direkt eingebunden werden (mit Locale-Präfix):
 
 ```html
-<!-- Rock Genre -->
+<!-- Rock Genre (Deutsch) -->
 <iframe 
-    src="https://hoerdle.elpatron.me/Rock" 
+    src="https://hoerdle.elpatron.me/de/Rock" 
     width="100%" 
     height="800" 
     frameborder="0"
@@ -205,9 +235,9 @@ Einzelne Genres können direkt eingebunden werden:
     title="Hördle Rock Quiz">
 </iframe>
 
-<!-- Pop Genre -->
+<!-- Pop Genre (Englisch) -->
 <iframe 
-    src="https://hoerdle.elpatron.me/Pop" 
+    src="https://hoerdle.elpatron.me/en/Pop" 
     width="100%" 
     height="800" 
     frameborder="0"
@@ -221,8 +251,9 @@ Einzelne Genres können direkt eingebunden werden:
 Auch thematische Specials können direkt eingebettet werden:
 
 ```html
+<!-- Weihnachtslieder (Deutsch) -->
 <iframe 
-    src="https://hoerdle.elpatron.me/special/Weihnachtslieder" 
+    src="https://hoerdle.elpatron.me/de/special/Weihnachtslieder" 
     width="100%" 
     height="800" 
     frameborder="0"

WHITE_LABEL.md

@@ -0,0 +1,99 @@
+# White Labeling Guide
+
+This application is designed to be easily white-labeled. You can customize the branding, colors, and configuration without modifying the core code.
+
+## Configuration
+
+The application is configured via environment variables. You can set these in a `.env` or `.env.local` file.
+
+### Branding
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `NEXT_PUBLIC_APP_NAME` | The name of the application. | `Hördle` |
+| `NEXT_PUBLIC_APP_DESCRIPTION` | The description used in metadata. | `Daily music guessing game...` |
+| `NEXT_PUBLIC_DOMAIN` | The domain name (used for sharing). | `hoerdle.elpatron.me` |
+| `NEXT_PUBLIC_TWITTER_HANDLE` | Twitter handle for metadata. | `@elpatron` |
+
+### Analytics (Plausible)
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `NEXT_PUBLIC_PLAUSIBLE_DOMAIN` | The domain to track in Plausible. | `hoerdle.elpatron.me` |
+| `NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC` | The URL of the Plausible script. | `https://plausible.elpatron.me/js/script.js` |
+
+### Credits
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `NEXT_PUBLIC_CREDITS_ENABLED` | Enable/disable footer credits (`true`/`false`). | `true` |
+| `NEXT_PUBLIC_CREDITS_TEXT` | Text before the link. | `Vibe coded with ☕ and 🍺 by` |
+| `NEXT_PUBLIC_CREDITS_LINK_TEXT` | Text of the link. | `@elpatron@digitalcourage.social` |
+| `NEXT_PUBLIC_CREDITS_LINK_URL` | URL of the link. | `https://digitalcourage.social/@elpatron` |
+
+## Theming
+
+The application uses CSS variables for theming. You can override these variables in your own CSS file or by modifying `app/globals.css`.
+
+### Key Colors
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--primary` | Main action color (buttons). | `#000000` |
+| `--secondary` | Secondary actions. | `#4b5563` |
+| `--accent` | Accent color. | `#667eea` |
+| `--success` | Success state (correct guess). | `#22c55e` |
+| `--danger` | Error state (wrong guess). | `#ef4444` |
+| `--warning` | Warning state (stars). | `#ffc107` |
+| `--muted` | Muted backgrounds. | `#f3f4f6` |
+
+### Example: Red Theme
+
+To create a red-themed version, add this to your CSS:
+
+```css
+:root {
+  --primary: #dc2626;
+  --accent: #ef4444;
+  --accent-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
+}
+```
+
+## Assets
+
+To replace the logo and icons:
+1.  Replace `public/favicon.ico`.
+2.  Replace `public/icon.png` (if it exists).
+3.  Update `app/manifest.ts` if you have custom icon paths.
+3.  Update `app/manifest.ts` if you have custom icon paths.
+
+## Docker Deployment
+
+When deploying with Docker, please note that **Next.js inlines `NEXT_PUBLIC_` environment variables at build time**.
+
+This means you cannot simply change the environment variables in `docker-compose.yml` and restart the container to change the branding. You must **rebuild the image**.
+
+### Using Docker Compose
+
+1.  Create a `.env` file with your custom configuration:
+    ```bash
+    NEXT_PUBLIC_APP_NAME="My Music Game"
+    NEXT_PUBLIC_THEME_COLOR="#ff0000"
+    # ... other variables
+    ```
+
+2.  Ensure your `docker-compose.yml` passes these variables as build arguments (already configured in `docker-compose.example.yml`):
+    ```yaml
+    services:
+      hoerdle:
+        build:
+          context: .
+          args:
+            NEXT_PUBLIC_APP_NAME: ${NEXT_PUBLIC_APP_NAME}
+            # ...
+    ```
+
+3.  Build and start the container:
+    ```bash
+    docker compose up --build -d
+    ```

app/[genre]/page.tsx

@@ -1,108 +0,0 @@
-import Game from '@/components/Game';
-import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
-import Link from 'next/link';
-import { PrismaClient } from '@prisma/client';
-import { notFound } from 'next/navigation';
-
-export const dynamic = 'force-dynamic';
-
-const prisma = new PrismaClient();
-
-interface PageProps {
-    params: Promise<{ genre: string }>;
-}
-
-export default async function GenrePage({ params }: PageProps) {
-    const { genre } = await params;
-    const decodedGenre = decodeURIComponent(genre);
-
-    // Check if genre exists and is active
-    const currentGenre = await prisma.genre.findUnique({
-        where: { name: decodedGenre }
-    });
-
-    if (!currentGenre || !currentGenre.active) {
-        notFound();
-    }
-
-    const dailyPuzzle = await getOrCreateDailyPuzzle(decodedGenre);
-    const genres = await prisma.genre.findMany({
-        where: { active: true },
-        orderBy: { name: 'asc' }
-    });
-    const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
-
-    const now = new Date();
-    const activeSpecials = specials.filter(s => {
-        const isStarted = !s.launchDate || s.launchDate <= now;
-        const isEnded = s.endDate && s.endDate < now;
-        return isStarted && !isEnded;
-    });
-
-    const upcomingSpecials = specials.filter(s => {
-        return s.launchDate && s.launchDate > now;
-    });
-
-    return (
-        <>
-            <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
-                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
-                    <Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>Global</Link>
-
-                    {/* Genres */}
-                    {genres.map(g => (
-                        <Link
-                            key={g.id}
-                            href={`/${g.name}`}
-                            style={{
-                                fontWeight: g.name === decodedGenre ? 'bold' : 'normal',
-                                textDecoration: g.name === decodedGenre ? 'underline' : 'none',
-                                color: g.name === decodedGenre ? 'black' : '#4b5563'
-                            }}
-                        >
-                            {g.name}
-                        </Link>
-                    ))}
-
-                    {/* Separator if both exist */}
-                    {genres.length > 0 && activeSpecials.length > 0 && (
-                        <span style={{ color: '#d1d5db' }}>|</span>
-                    )}
-
-                    {/* Specials */}
-                    {activeSpecials.map(s => (
-                        <Link
-                            key={s.id}
-                            href={`/special/${s.name}`}
-                            style={{
-                                color: '#be185d', // Pink-700
-                                textDecoration: 'none',
-                                fontWeight: '500'
-                            }}
-                        >
-                            ★ {s.name}
-                        </Link>
-                    ))}
-                </div>
-
-                {/* Upcoming Specials */}
-                {upcomingSpecials.length > 0 && (
-                    <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
-                        Coming soon: {upcomingSpecials.map(s => (
-                            <span key={s.id} style={{ marginLeft: '0.5rem' }}>
-                                ★ {s.name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString('de-DE', {
-                                    day: '2-digit',
-                                    month: '2-digit',
-                                    year: 'numeric',
-                                    timeZone: process.env.TZ
-                                }) : ''})
-                                {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>Curated by {s.curator}</span>}
-                            </span>
-                        ))}
-                    </div>
-                )}
-            </div>
-            <Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
-        </>
-    );
-}

app/[locale]/[genre]/page.tsx

@@ -0,0 +1,134 @@
+import Game from '@/components/Game';
+import NewsSection from '@/components/NewsSection';
+import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
+import { Link } from '@/lib/navigation';
+import { PrismaClient } from '@prisma/client';
+import { notFound } from 'next/navigation';
+import { getLocalizedValue } from '@/lib/i18n';
+import { getTranslations } from 'next-intl/server';
+
+export const dynamic = 'force-dynamic';
+
+const prisma = new PrismaClient();
+
+interface PageProps {
+    params: Promise<{ locale: string; genre: string }>;
+}
+
+export default async function GenrePage({ params }: PageProps) {
+    const { locale, genre } = await params;
+    const decodedGenre = decodeURIComponent(genre);
+    const tNav = await getTranslations('Navigation');
+
+    // Fetch all genres to find the matching one by localized name
+    const allGenres = await prisma.genre.findMany();
+    const currentGenre = allGenres.find(g => getLocalizedValue(g.name, locale) === decodedGenre);
+
+    if (!currentGenre || !currentGenre.active) {
+        notFound();
+    }
+
+    const dailyPuzzle = await getOrCreateDailyPuzzle(currentGenre);
+    // getOrCreateDailyPuzzle likely expects string or needs update. 
+    // Actually, getOrCreateDailyPuzzle takes `genreName: string | null`. 
+    // If I pass the JSON object, it might fail. 
+    // But wait, the DB schema for DailyPuzzle stores `genreId`. 
+    // `getOrCreateDailyPuzzle` probably looks up genre by name.
+    // I should check `lib/dailyPuzzle.ts`. 
+    // For now, I'll pass the localized name, but that might be risky if it tries to create a genre (unlikely).
+    // Let's assume for now I should pass the localized name if that's what it uses to find/create.
+    // But if `getOrCreateDailyPuzzle` uses `findUnique({ where: { name: genreName } })`, it will fail because name is JSON.
+    // I need to update `lib/dailyPuzzle.ts` too! 
+    // I'll mark that as a todo. For now, let's proceed with page creation.
+
+    const genres = allGenres.filter(g => g.active);
+    // Sort
+    genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+
+    const specials = await prisma.special.findMany();
+    specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+
+    const now = new Date();
+    const activeSpecials = specials.filter(s => {
+        const isStarted = !s.launchDate || s.launchDate <= now;
+        const isEnded = s.endDate && s.endDate < now;
+        return isStarted && !isEnded;
+    });
+
+    const upcomingSpecials = specials.filter(s => {
+        return s.launchDate && s.launchDate > now;
+    });
+
+    return (
+        <>
+            <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
+                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+                    <Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>{tNav('global')}</Link>
+
+                    {/* Genres */}
+                    {genres.map(g => {
+                        const name = getLocalizedValue(g.name, locale);
+                        return (
+                            <Link
+                                key={g.id}
+                                href={`/${name}`}
+                                style={{
+                                    fontWeight: name === decodedGenre ? 'bold' : 'normal',
+                                    textDecoration: name === decodedGenre ? 'underline' : 'none',
+                                    color: name === decodedGenre ? 'black' : '#4b5563'
+                                }}
+                            >
+                                {name}
+                            </Link>
+                        );
+                    })}
+
+                    {/* Separator if both exist */}
+                    {genres.length > 0 && activeSpecials.length > 0 && (
+                        <span style={{ color: '#d1d5db' }}>|</span>
+                    )}
+
+                    {/* Specials */}
+                    {activeSpecials.map(s => {
+                        const name = getLocalizedValue(s.name, locale);
+                        return (
+                            <Link
+                                key={s.id}
+                                href={`/special/${name}`}
+                                style={{
+                                    color: '#be185d', // Pink-700
+                                    textDecoration: 'none',
+                                    fontWeight: '500'
+                                }}
+                            >
+                                ★ {name}
+                            </Link>
+                        );
+                    })}
+                </div>
+
+                {/* Upcoming Specials */}
+                {upcomingSpecials.length > 0 && (
+                    <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+                        Coming soon: {upcomingSpecials.map(s => {
+                            const name = getLocalizedValue(s.name, locale);
+                            return (
+                                <span key={s.id} style={{ marginLeft: '0.5rem' }}>
+                                    ★ {name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString(locale, {
+                                        day: '2-digit',
+                                        month: '2-digit',
+                                        year: 'numeric',
+                                        timeZone: process.env.TZ
+                                    }) : ''})
+                                    {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>Curated by {s.curator}</span>}
+                                </span>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+            <NewsSection locale={locale} />
+            <Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
+        </>
+    );
+}

app/[locale]/layout.tsx

@@ -0,0 +1,74 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
+import "../globals.css"; // Adjusted path
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+
+import { config } from "@/lib/config";
+import InstallPrompt from "@/components/InstallPrompt";
+import AppFooter from "@/components/AppFooter";
+
+const geistSans = Geist({
+    variable: "--font-geist-sans",
+    subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+    title: config.appName,
+    description: config.appDescription,
+};
+
+export const viewport: Viewport = {
+    themeColor: config.colors.themeColor,
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 1,
+};
+
+export default async function LocaleLayout({
+    children,
+    params
+}: {
+    children: React.ReactNode;
+    params: Promise<{ locale: string }>;
+}) {
+    const { locale } = await params;
+
+    console.log('[app/[locale]/layout] params locale:', locale);
+
+    // Ensure that the incoming `locale` is valid
+    if (!['en', 'de'].includes(locale)) {
+        console.log('[app/[locale]/layout] invalid locale, triggering notFound()');
+        notFound();
+    }
+
+    // Providing all messages to the client
+    const messages = await getMessages();
+
+    return (
+        <html lang={locale}>
+            <head>
+                <Script
+                    defer
+                    data-domain={config.plausibleDomain}
+                    src={config.plausibleScriptSrc}
+                    strategy="beforeInteractive"
+                />
+            </head>
+            <body className={`${geistSans.variable} ${geistMono.variable}`}>
+                <NextIntlClientProvider messages={messages}>
+                    {children}
+                    <InstallPrompt />
+                    <AppFooter />
+                </NextIntlClientProvider>
+            </body>
+        </html>
+    );
+}

app/[locale]/page.tsx

@@ -0,0 +1,138 @@
+import Game from '@/components/Game';
+import NewsSection from '@/components/NewsSection';
+import OnboardingTour from '@/components/OnboardingTour';
+import LanguageSwitcher from '@/components/LanguageSwitcher';
+import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
+import { Link } from '@/lib/navigation';
+import { PrismaClient } from '@prisma/client';
+import { getTranslations } from 'next-intl/server';
+import { getLocalizedValue } from '@/lib/i18n';
+
+export const dynamic = 'force-dynamic';
+
+const prisma = new PrismaClient();
+
+export default async function Home({
+    params
+}: {
+    params: { locale: string };
+}) {
+    const { locale } = await params;
+    const t = await getTranslations('Home');
+    const tNav = await getTranslations('Navigation');
+
+    const dailyPuzzle = await getOrCreateDailyPuzzle(null); // Global puzzle
+    const genres = await prisma.genre.findMany({
+        where: { active: true },
+    });
+    const specials = await prisma.special.findMany();
+
+    // Sort in memory
+    genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+    specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+
+    const now = new Date();
+
+    const activeSpecials = specials.filter(s => {
+        const isStarted = !s.launchDate || s.launchDate <= now;
+        const isEnded = s.endDate && s.endDate < now;
+        return isStarted && !isEnded;
+    });
+
+    const upcomingSpecials = specials.filter(s => {
+        return s.launchDate && s.launchDate > now;
+    });
+
+    return (
+        <>
+            <div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
+                    <div style={{ flex: 1 }} />
+                    <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center', flex: 2 }}>
+                        <div className="tooltip">
+                            <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link>
+                            <span className="tooltip-text">{t('globalTooltip')}</span>
+                        </div>
+
+                        {/* Genres */}
+                        {genres.map(g => {
+                            const name = getLocalizedValue(g.name, locale);
+                            const subtitle = getLocalizedValue(g.subtitle, locale);
+                            return (
+                                <div key={g.id} className="tooltip">
+                                    <Link href={`/${name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
+                                        {name}
+                                    </Link>
+                                    {subtitle && <span className="tooltip-text">{subtitle}</span>}
+                                </div>
+                            );
+                        })}
+
+                        {/* Separator if both exist */}
+                        {genres.length > 0 && activeSpecials.length > 0 && (
+                            <span style={{ color: '#d1d5db' }}>|</span>
+                        )}
+
+                        {/* Active Specials */}
+                        {activeSpecials.map(s => {
+                            const name = getLocalizedValue(s.name, locale);
+                            const subtitle = getLocalizedValue(s.subtitle, locale);
+                            return (
+                                <div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                                    <div className="tooltip">
+                                        <Link
+                                            href={`/special/${name}`}
+                                            style={{
+                                                color: '#be185d', // Pink-700
+                                                textDecoration: 'none',
+                                                fontWeight: '500'
+                                            }}
+                                        >
+                                            ★ {name}
+                                        </Link>
+                                        {subtitle && <span className="tooltip-text">{subtitle}</span>}
+                                    </div>
+                                    {s.curator && (
+                                        <span style={{ fontSize: '0.75rem', color: '#666' }}>
+                                            {t('curatedBy')} {s.curator}
+                                        </span>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* Upcoming Specials */}
+                    {upcomingSpecials.length > 0 && (
+                        <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+                            {t('comingSoon')}: {upcomingSpecials.map(s => {
+                                const name = getLocalizedValue(s.name, locale);
+                                return (
+                                    <span key={s.id} style={{ marginLeft: '0.5rem' }}>
+                                        ★ {name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString(locale, {
+                                            day: '2-digit',
+                                            month: '2-digit',
+                                            year: 'numeric',
+                                            timeZone: process.env.TZ
+                                        }) : ''})
+                                        {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>{t('curatedBy')} {s.curator}</span>}
+                                    </span>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+                <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
+                    <LanguageSwitcher />
+                </div>
+            </div>
+
+            <div id="tour-news">
+                <NewsSection locale={locale} />
+            </div>
+
+            <Game dailyPuzzle={dailyPuzzle} genre={null} />
+            <OnboardingTour />
+        </>
+    );
+}

app/[locale]/special/[name]/page.tsx

@@ -0,0 +1,125 @@
+import Game from '@/components/Game';
+import NewsSection from '@/components/NewsSection';
+import { getOrCreateSpecialPuzzle } from '@/lib/dailyPuzzle';
+import { Link } from '@/lib/navigation';
+import { PrismaClient } from '@prisma/client';
+import { getLocalizedValue } from '@/lib/i18n';
+import { getTranslations } from 'next-intl/server';
+
+export const dynamic = 'force-dynamic';
+
+const prisma = new PrismaClient();
+
+interface PageProps {
+    params: Promise<{ locale: string; name: string }>;
+}
+
+export default async function SpecialPage({ params }: PageProps) {
+    const { locale, name } = await params;
+    const decodedName = decodeURIComponent(name);
+    const tNav = await getTranslations('Navigation');
+
+    const allSpecials = await prisma.special.findMany();
+    const currentSpecial = allSpecials.find(s => getLocalizedValue(s.name, locale) === decodedName);
+
+    const now = new Date();
+    const isStarted = currentSpecial && (!currentSpecial.launchDate || currentSpecial.launchDate <= now);
+    const isEnded = currentSpecial && (currentSpecial.endDate && currentSpecial.endDate < now);
+
+    if (!currentSpecial || !isStarted) {
+        return (
+            <div style={{ textAlign: 'center', padding: '2rem' }}>
+                <h1>Special Not Available</h1>
+                <p>This special has not launched yet or does not exist.</p>
+                <Link href="/">{tNav('home')}</Link>
+            </div>
+        );
+    }
+
+    if (isEnded) {
+        return (
+            <div style={{ textAlign: 'center', padding: '2rem' }}>
+                <h1>Special Ended</h1>
+                <p>This special event has ended.</p>
+                <Link href="/">{tNav('home')}</Link>
+            </div>
+        );
+    }
+
+    // Need to handle getOrCreateSpecialPuzzle with localized name or ID
+    // Ideally pass ID or full object, but existing function takes name string.
+    // I'll need to update lib/dailyPuzzle.ts to handle this.
+    const dailyPuzzle = await getOrCreateSpecialPuzzle(currentSpecial);
+
+    const genres = await prisma.genre.findMany({
+        where: { active: true },
+    });
+    genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+
+    const specials = allSpecials; // Already fetched
+    specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
+
+    const activeSpecials = specials.filter(s => {
+        const sStarted = !s.launchDate || s.launchDate <= now;
+        const sEnded = s.endDate && s.endDate < now;
+        return sStarted && !sEnded;
+    });
+
+    return (
+        <>
+            <div style={{ textAlign: 'center', padding: '1rem', background: '#fce7f3' }}>
+                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+                    <Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>{tNav('global')}</Link>
+
+                    {/* Genres */}
+                    {genres.map(g => {
+                        const gName = getLocalizedValue(g.name, locale);
+                        return (
+                            <Link
+                                key={g.id}
+                                href={`/${gName}`}
+                                style={{
+                                    color: '#4b5563',
+                                    textDecoration: 'none'
+                                }}
+                            >
+                                {gName}
+                            </Link>
+                        );
+                    })}
+
+                    {/* Separator if both exist */}
+                    {genres.length > 0 && activeSpecials.length > 0 && (
+                        <span style={{ color: '#d1d5db' }}>|</span>
+                    )}
+
+                    {/* Specials */}
+                    {activeSpecials.map(s => {
+                        const sName = getLocalizedValue(s.name, locale);
+                        return (
+                            <Link
+                                key={s.id}
+                                href={`/special/${sName}`}
+                                style={{
+                                    fontWeight: sName === decodedName ? 'bold' : 'normal',
+                                    textDecoration: sName === decodedName ? 'underline' : 'none',
+                                    color: sName === decodedName ? '#9d174d' : '#be185d'
+                                }}
+                            >
+                                ★ {sName}
+                            </Link>
+                        );
+                    })}
+                </div>
+            </div>
+            <NewsSection locale={locale} />
+            <Game
+                dailyPuzzle={dailyPuzzle}
+                genre={decodedName}
+                isSpecial={true}
+                maxAttempts={dailyPuzzle?.maxAttempts}
+                unlockSteps={dailyPuzzle?.unlockSteps}
+            />
+        </>
+    );
+}

app/admin/page.tsx

@@ -51,6 +51,20 @@ interface Song {
     excludeFromGlobal: boolean;
 }
 
+interface News {
+    id: number;
+    title: string;
+    content: string;
+    author: string | null;
+    publishedAt: string;
+    featured: boolean;
+    specialId: number | null;
+    special: {
+        id: number;
+        name: string;
+    } | null;
+}
+
 type SortField = 'id' | 'title' | 'artist' | 'createdAt' | 'releaseYear' | 'activations' | 'averageRating';
 type SortDirection = 'asc' | 'desc';
 
@@ -92,6 +106,20 @@ export default function AdminPage() {
     const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
     const [editSpecialCurator, setEditSpecialCurator] = useState('');
 
+    // News state
+    const [news, setNews] = useState<News[]>([]);
+    const [newNewsTitle, setNewNewsTitle] = useState('');
+    const [newNewsContent, setNewNewsContent] = useState('');
+    const [newNewsAuthor, setNewNewsAuthor] = useState('');
+    const [newNewsFeatured, setNewNewsFeatured] = useState(false);
+    const [newNewsSpecialId, setNewNewsSpecialId] = useState<number | null>(null);
+    const [editingNewsId, setEditingNewsId] = useState<number | null>(null);
+    const [editNewsTitle, setEditNewsTitle] = useState('');
+    const [editNewsContent, setEditNewsContent] = useState('');
+    const [editNewsAuthor, setEditNewsAuthor] = useState('');
+    const [editNewsFeatured, setEditNewsFeatured] = useState(false);
+    const [editNewsSpecialId, setEditNewsSpecialId] = useState<number | null>(null);
+
     // Edit state
     const [editingId, setEditingId] = useState<number | null>(null);
     const [editTitle, setEditTitle] = useState('');
@@ -106,6 +134,9 @@ export default function AdminPage() {
     const [uploadGenreIds, setUploadGenreIds] = useState<number[]>([]);
     const [uploadExcludeFromGlobal, setUploadExcludeFromGlobal] = useState(false);
 
+    // Batch upload genre selection
+    const [batchUploadGenreIds, setBatchUploadGenreIds] = useState<number[]>([]);
+
     // AI Categorization state
     const [isCategorizing, setIsCategorizing] = useState(false);
     const [categorizationResults, setCategorizationResults] = useState<any>(null);
@@ -139,6 +170,8 @@ export default function AdminPage() {
             fetchSongs();
             fetchGenres();
             fetchDailyPuzzles();
+            fetchSpecials();
+            fetchNews();
         }
     }, []);
 
@@ -153,6 +186,8 @@ export default function AdminPage() {
             fetchSongs();
             fetchGenres();
             fetchDailyPuzzles();
+            fetchSpecials();
+            fetchNews();
         } else {
             alert('Wrong password');
         }
@@ -391,6 +426,94 @@ export default function AdminPage() {
         }
     };
 
+    // News functions
+    const fetchNews = async () => {
+        const res = await fetch('/api/news', {
+            headers: getAuthHeaders()
+        });
+        if (res.ok) {
+            const data = await res.json();
+            setNews(data);
+        }
+    };
+
+    const handleCreateNews = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!newNewsTitle.trim() || !newNewsContent.trim()) return;
+
+        const res = await fetch('/api/news', {
+            method: 'POST',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                title: newNewsTitle,
+                content: newNewsContent,
+                author: newNewsAuthor || null,
+                featured: newNewsFeatured,
+                specialId: newNewsSpecialId
+            }),
+        });
+
+        if (res.ok) {
+            setNewNewsTitle('');
+            setNewNewsContent('');
+            setNewNewsAuthor('');
+            setNewNewsFeatured(false);
+            setNewNewsSpecialId(null);
+            fetchNews();
+        } else {
+            alert('Failed to create news');
+        }
+    };
+
+    const startEditNews = (newsItem: News) => {
+        setEditingNewsId(newsItem.id);
+        setEditNewsTitle(newsItem.title);
+        setEditNewsContent(newsItem.content);
+        setEditNewsAuthor(newsItem.author || '');
+        setEditNewsFeatured(newsItem.featured);
+        setEditNewsSpecialId(newsItem.specialId);
+    };
+
+    const saveEditedNews = async () => {
+        if (editingNewsId === null) return;
+
+        const res = await fetch('/api/news', {
+            method: 'PUT',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({
+                id: editingNewsId,
+                title: editNewsTitle,
+                content: editNewsContent,
+                author: editNewsAuthor || null,
+                featured: editNewsFeatured,
+                specialId: editNewsSpecialId
+            }),
+        });
+
+        if (res.ok) {
+            setEditingNewsId(null);
+            fetchNews();
+        } else {
+            alert('Failed to update news');
+        }
+    };
+
+    const handleDeleteNews = async (id: number) => {
+        if (!confirm('Delete this news item?')) return;
+
+        const res = await fetch('/api/news', {
+            method: 'DELETE',
+            headers: getAuthHeaders(),
+            body: JSON.stringify({ id }),
+        });
+
+        if (res.ok) {
+            fetchNews();
+        } else {
+            alert('Failed to delete news');
+        }
+    };
+
     // Load specials after auth
     useEffect(() => {
         if (isAuthenticated) fetchSpecials();
@@ -548,6 +671,28 @@ export default function AdminPage() {
         setUploadResults(results);
         setFiles([]);
         setIsUploading(false);
+
+        // Assign genres to successfully uploaded songs
+        if (batchUploadGenreIds.length > 0) {
+            const successfulUploads = results.filter(r => r.success && r.song);
+            for (const result of successfulUploads) {
+                try {
+                    await fetch('/api/songs', {
+                        method: 'PUT',
+                        headers: getAuthHeaders(),
+                        body: JSON.stringify({
+                            id: result.song.id,
+                            title: result.song.title,
+                            artist: result.song.artist,
+                            genreIds: batchUploadGenreIds
+                        }),
+                    });
+                } catch (error) {
+                    console.error(`Failed to assign genres to ${result.song.title}:`, error);
+                }
+            }
+        }
+
         fetchSongs();
         fetchGenres();
         fetchSpecials(); // Update special counts
@@ -564,6 +709,13 @@ export default function AdminPage() {
             if (failedCount > 0) {
                 msg += `\n❌ ${failedCount} failed`;
             }
+            if (batchUploadGenreIds.length > 0) {
+                const selectedGenreNames = genres
+                    .filter(g => batchUploadGenreIds.includes(g.id))
+                    .map(g => g.name)
+                    .join(', ');
+                msg += `\n🏷️ Assigned genres: ${selectedGenreNames}`;
+            }
             msg += '\n\n🤖 Starting auto-categorization...';
             setMessage(msg);
             // Small delay to let user see the message
@@ -1150,6 +1302,163 @@ export default function AdminPage() {
                 )}
             </div>
 
+            {/* News Management */}
+            <div className="admin-card" style={{ marginBottom: '2rem' }}>
+                <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Manage News & Announcements</h2>
+                <form onSubmit={handleCreateNews} style={{ marginBottom: '1rem' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                        <input
+                            type="text"
+                            value={newNewsTitle}
+                            onChange={e => setNewNewsTitle(e.target.value)}
+                            placeholder="News Title"
+                            className="form-input"
+                            required
+                        />
+                        <textarea
+                            value={newNewsContent}
+                            onChange={e => setNewNewsContent(e.target.value)}
+                            placeholder="Content (Markdown supported)"
+                            className="form-input"
+                            rows={4}
+                            required
+                            style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
+                        />
+                        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
+                            <input
+                                type="text"
+                                value={newNewsAuthor}
+                                onChange={e => setNewNewsAuthor(e.target.value)}
+                                placeholder="Author (optional)"
+                                className="form-input"
+                                style={{ maxWidth: '200px' }}
+                            />
+                            <select
+                                value={newNewsSpecialId || ''}
+                                onChange={e => setNewNewsSpecialId(e.target.value ? Number(e.target.value) : null)}
+                                className="form-input"
+                                style={{ maxWidth: '200px' }}
+                            >
+                                <option value="">No Special Link</option>
+                                {specials.map(s => (
+                                    <option key={s.id} value={s.id}>{s.name}</option>
+                                ))}
+                            </select>
+                            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer' }}>
+                                <input
+                                    type="checkbox"
+                                    checked={newNewsFeatured}
+                                    onChange={e => setNewNewsFeatured(e.target.checked)}
+                                />
+                                Featured
+                            </label>
+                            <button type="submit" className="btn-primary">Add News</button>
+                        </div>
+                    </div>
+                </form>
+
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                    {news.map(newsItem => (
+                        <div key={newsItem.id} style={{
+                            background: newsItem.featured ? '#fef3c7' : '#f3f4f6',
+                            padding: '0.75rem',
+                            borderRadius: '0.5rem',
+                            border: newsItem.featured ? '2px solid #f59e0b' : '1px solid #e5e7eb'
+                        }}>
+                            {editingNewsId === newsItem.id ? (
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                                    <input
+                                        type="text"
+                                        value={editNewsTitle}
+                                        onChange={e => setEditNewsTitle(e.target.value)}
+                                        className="form-input"
+                                    />
+                                    <textarea
+                                        value={editNewsContent}
+                                        onChange={e => setEditNewsContent(e.target.value)}
+                                        className="form-input"
+                                        rows={4}
+                                        style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
+                                    />
+                                    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
+                                        <input
+                                            type="text"
+                                            value={editNewsAuthor}
+                                            onChange={e => setEditNewsAuthor(e.target.value)}
+                                            placeholder="Author"
+                                            className="form-input"
+                                            style={{ maxWidth: '200px' }}
+                                        />
+                                        <select
+                                            value={editNewsSpecialId || ''}
+                                            onChange={e => setEditNewsSpecialId(e.target.value ? Number(e.target.value) : null)}
+                                            className="form-input"
+                                            style={{ maxWidth: '200px' }}
+                                        >
+                                            <option value="">No Special Link</option>
+                                            {specials.map(s => (
+                                                <option key={s.id} value={s.id}>{s.name}</option>
+                                            ))}
+                                        </select>
+                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem' }}>
+                                            <input
+                                                type="checkbox"
+                                                checked={editNewsFeatured}
+                                                onChange={e => setEditNewsFeatured(e.target.checked)}
+                                            />
+                                            Featured
+                                        </label>
+                                        <button onClick={saveEditedNews} className="btn-primary">Save</button>
+                                        <button onClick={() => setEditingNewsId(null)} className="btn-secondary">Cancel</button>
+                                    </div>
+                                </div>
+                            ) : (
+                                <>
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
+                                        <div style={{ flex: 1 }}>
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+                                                {newsItem.featured && (
+                                                    <span style={{
+                                                        background: '#f59e0b',
+                                                        color: 'white',
+                                                        padding: '0.125rem 0.375rem',
+                                                        borderRadius: '0.25rem',
+                                                        fontSize: '0.625rem',
+                                                        fontWeight: '600'
+                                                    }}>
+                                                        ⭐ FEATURED
+                                                    </span>
+                                                )}
+                                                <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: '600' }}>{newsItem.title}</h3>
+                                            </div>
+                                            <div style={{ fontSize: '0.75rem', color: '#666', marginBottom: '0.5rem' }}>
+                                                {new Date(newsItem.publishedAt).toLocaleDateString('de-DE')}
+                                                {newsItem.author && ` • by ${newsItem.author}`}
+                                                {newsItem.special && ` • ★ ${newsItem.special.name}`}
+                                            </div>
+                                            <p style={{ margin: 0, fontSize: '0.875rem', whiteSpace: 'pre-wrap' }}>
+                                                {newsItem.content.length > 150
+                                                    ? newsItem.content.substring(0, 150) + '...'
+                                                    : newsItem.content}
+                                            </p>
+                                        </div>
+                                        <div style={{ display: 'flex', gap: '0.25rem', marginLeft: '1rem' }}>
+                                            <button onClick={() => startEditNews(newsItem)} className="btn-secondary" style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}>Edit</button>
+                                            <button onClick={() => handleDeleteNews(newsItem.id)} className="btn-danger" style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}>Delete</button>
+                                        </div>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    ))}
+                    {news.length === 0 && (
+                        <p style={{ color: '#666', fontSize: '0.875rem', textAlign: 'center', padding: '1rem' }}>
+                            No news items yet. Create one above!
+                        </p>
+                    )}
+                </div>
+            </div>
+
             <div className="admin-card" style={{ marginBottom: '2rem' }}>
                 <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Upload Songs</h2>
                 <form onSubmit={handleBatchUpload}>
@@ -1219,6 +1528,48 @@ export default function AdminPage() {
                         </div>
                     )}
 
+                    <div style={{ marginBottom: '1rem' }}>
+                        <label style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem' }}>
+                            Assign Genres (optional)
+                        </label>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
+                            {genres.map(genre => (
+                                <label
+                                    key={genre.id}
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '0.25rem',
+                                        padding: '0.25rem 0.5rem',
+                                        background: batchUploadGenreIds.includes(genre.id) ? '#dbeafe' : '#f3f4f6',
+                                        border: batchUploadGenreIds.includes(genre.id) ? '2px solid #3b82f6' : '2px solid transparent',
+                                        borderRadius: '0.25rem',
+                                        cursor: 'pointer',
+                                        fontSize: '0.875rem',
+                                        transition: 'all 0.2s'
+                                    }}
+                                >
+                                    <input
+                                        type="checkbox"
+                                        checked={batchUploadGenreIds.includes(genre.id)}
+                                        onChange={e => {
+                                            if (e.target.checked) {
+                                                setBatchUploadGenreIds([...batchUploadGenreIds, genre.id]);
+                                            } else {
+                                                setBatchUploadGenreIds(batchUploadGenreIds.filter(id => id !== genre.id));
+                                            }
+                                        }}
+                                        style={{ margin: 0 }}
+                                    />
+                                    {genre.name}
+                                </label>
+                            ))}
+                        </div>
+                        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.25rem' }}>
+                            Selected genres will be assigned to all uploaded songs.
+                        </p>
+                    </div>
+
                     <div style={{ marginBottom: '1rem' }}>
                         <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
                             <input

app/api/admin/daily-puzzles/route.ts

@@ -98,14 +98,14 @@ export async function DELETE(request: Request) {
                 where: { id: puzzle.specialId }
             });
             if (special) {
-                newPuzzle = await getOrCreateSpecialPuzzle(special.name);
+                newPuzzle = await getOrCreateSpecialPuzzle(special);
             }
         } else if (puzzle.genreId) {
             const genre = await prisma.genre.findUnique({
                 where: { id: puzzle.genreId }
             });
             if (genre) {
-                newPuzzle = await getOrCreateDailyPuzzle(genre.name);
+                newPuzzle = await getOrCreateDailyPuzzle(genre);
             }
         } else {
             newPuzzle = await getOrCreateDailyPuzzle(null);

app/api/audio/[filename]/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { readFile, stat } from 'fs/promises';
+import { stat } from 'fs/promises';
+import { createReadStream } from 'fs';
 import path from 'path';
 
 export async function GET(
@@ -30,24 +31,106 @@ export async function GET(
             return new NextResponse('Forbidden', { status: 403 });
         }
 
-        // Check if file exists
+        const stats = await stat(filePath);
-        try {
+        const fileSize = stats.size;
-            await stat(filePath);
+        const range = request.headers.get('range');
-        } catch {
+
-            return new NextResponse('File not found', { status: 404 });
+        if (range) {
+            const parts = range.replace(/bytes=/, "").split("-");
+            const start = parseInt(parts[0], 10);
+            const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
+            const chunksize = (end - start) + 1;
+
+            const stream = createReadStream(filePath, { start, end });
+
+            // Convert Node stream to Web stream
+
+            const readable = new ReadableStream({
+                start(controller) {
+                    let isClosed = false;
+
+                    stream.on('data', (chunk: any) => {
+                        if (isClosed) return;
+                        try {
+                            controller.enqueue(chunk);
+                        } catch (e) {
+                            isClosed = true;
+                            stream.destroy();
+                        }
+                    });
+
+                    stream.on('end', () => {
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.close();
+                    });
+
+                    stream.on('error', (err: any) => {
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.error(err);
+                    });
+                },
+                cancel() {
+                    stream.destroy();
+                }
+            });
+
+            return new NextResponse(readable, {
+                status: 206,
+                headers: {
+                    'Content-Range': `bytes ${start}-${end}/${fileSize}`,
+                    'Accept-Ranges': 'bytes',
+                    'Content-Length': chunksize.toString(),
+                    'Content-Type': 'audio/mpeg',
+                    'Cache-Control': 'public, max-age=3600, must-revalidate',
+                },
+            });
+        } else {
+            const stream = createReadStream(filePath);
+
+            // Convert Node stream to Web stream
+            const readable = new ReadableStream({
+                start(controller) {
+                    let isClosed = false;
+
+                    stream.on('data', (chunk: any) => {
+                        if (isClosed) return;
+                        try {
+                            controller.enqueue(chunk);
+                        } catch (e) {
+                            isClosed = true;
+                            stream.destroy();
+                        }
+                    });
+
+                    stream.on('end', () => {
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.close();
+                    });
+
+                    stream.on('error', (err: any) => {
+                        if (isClosed) return;
+                        isClosed = true;
+                        controller.error(err);
+                    });
+                },
+                cancel() {
+                    stream.destroy();
+                }
+            });
+
+            return new NextResponse(readable, {
+                status: 200,
+                headers: {
+                    'Content-Length': fileSize.toString(),
+                    'Content-Type': 'audio/mpeg',
+                    'Accept-Ranges': 'bytes',
+                    'Cache-Control': 'public, max-age=3600, must-revalidate',
+                },
+            });
         }
-
-        // Read file
-        const fileBuffer = await readFile(filePath);
-
-        // Return with proper headers
-        return new NextResponse(fileBuffer, {
-            headers: {
-                'Content-Type': 'audio/mpeg',
-                'Accept-Ranges': 'bytes',
-                'Cache-Control': 'public, max-age=3600, must-revalidate',
-            },
-        });
     } catch (error) {
         console.error('Error serving audio file:', error);
         return new NextResponse('Internal Server Error', { status: 500 });

app/api/categorize/route.ts

@@ -2,6 +2,7 @@
 
 import { PrismaClient } from '@prisma/client';
 import { requireAdminAuth } from '@/lib/auth';
+import { getLocalizedValue } from '@/lib/i18n';
 
 const prisma = new PrismaClient();
 
@@ -83,7 +84,8 @@ export async function POST(request: Request) {
         // Process each song in this batch
         for (const song of uncategorizedSongs) {
             try {
-                const genreNames = allGenres.map(g => g.name);
+                // Use German names for AI categorization (primary language)
+                const genreNames = allGenres.map(g => getLocalizedValue(g.name, 'de'));
 
                 const prompt = `You are a music genre categorization assistant. Given a song title and artist, categorize it into 0-3 of the available genres.
 
@@ -140,7 +142,7 @@ Your response:`;
 
                 // Filter to only valid genres and get their IDs
                 const genreIds = allGenres
-                    .filter(g => suggestedGenreNames.includes(g.name))
+                    .filter(g => suggestedGenreNames.includes(getLocalizedValue(g.name, 'de')))
                     .map(g => g.id)
                     .slice(0, 3); // Max 3 genres
 
@@ -160,7 +162,7 @@ Your response:`;
                         title: song.title,
                         artist: song.artist,
                         assignedGenres: suggestedGenreNames.filter(name =>
-                            allGenres.some(g => g.name === name)
+                            allGenres.some(g => getLocalizedValue(g.name, 'de') === name)
                         )
                     });
                 }

app/api/daily/route.ts

@@ -1,12 +1,26 @@
 import { NextResponse } from 'next/server';
 import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
+import { PrismaClient } from '@prisma/client';
+import { getLocalizedValue } from '@/lib/i18n';
+
+const prisma = new PrismaClient();
 
 export async function GET(request: Request) {
     try {
         const { searchParams } = new URL(request.url);
         const genreName = searchParams.get('genre');
 
-        const puzzle = await getOrCreateDailyPuzzle(genreName);
+        let genre = null;
+        if (genreName) {
+            // Find genre by localized name (try both locales)
+            const allGenres = await prisma.genre.findMany();
+            genre = allGenres.find(g =>
+                getLocalizedValue(g.name, 'de') === genreName ||
+                getLocalizedValue(g.name, 'en') === genreName
+            ) || null;
+        }
+
+        const puzzle = await getOrCreateDailyPuzzle(genre);
 
         if (!puzzle) {
             return NextResponse.json({ error: 'Failed to get or create puzzle' }, { status: 404 });

app/api/genres/route.ts

@@ -1,19 +1,35 @@
 import { NextResponse } from 'next/server';
 import { PrismaClient } from '@prisma/client';
 import { requireAdminAuth } from '@/lib/auth';
+import { getLocalizedValue } from '@/lib/i18n';
 
 const prisma = new PrismaClient();
 
-export async function GET() {
+export async function GET(request: Request) {
     try {
+        const { searchParams } = new URL(request.url);
+        const locale = searchParams.get('locale');
+
         const genres = await prisma.genre.findMany({
-            orderBy: { name: 'asc' },
+            // orderBy: { name: 'asc' }, // Cannot sort by JSON field easily in SQLite
             include: {
                 _count: {
                     select: { songs: true }
                 }
             }
         });
+
+        // Sort in memory if needed, or just return
+        // If locale is provided, map to localized values
+        if (locale) {
+            const localizedGenres = genres.map(g => ({
+                ...g,
+                name: getLocalizedValue(g.name, locale),
+                subtitle: getLocalizedValue(g.subtitle, locale)
+            })).sort((a, b) => a.name.localeCompare(b.name));
+            return NextResponse.json(localizedGenres);
+        }
+
         return NextResponse.json(genres);
     } catch (error) {
         console.error('Error fetching genres:', error);
@@ -29,14 +45,18 @@ export async function POST(request: Request) {
     try {
         const { name, subtitle, active } = await request.json();
 
-        if (!name || typeof name !== 'string') {
+        if (!name) {
             return NextResponse.json({ error: 'Invalid name' }, { status: 400 });
         }
 
+        // Ensure name is stored as JSON
+        const nameData = typeof name === 'string' ? { de: name, en: name } : name;
+        const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
+
         const genre = await prisma.genre.create({
             data: {
-                name: name.trim(),
+                name: nameData,
-                subtitle: subtitle ? subtitle.trim() : null,
+                subtitle: subtitleData,
                 active: active !== undefined ? active : true
             },
         });
@@ -83,13 +103,14 @@ export async function PUT(request: Request) {
             return NextResponse.json({ error: 'Missing id' }, { status: 400 });
         }
 
+        const updateData: any = {};
+        if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
+        if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
+        if (active !== undefined) updateData.active = active;
+
         const genre = await prisma.genre.update({
             where: { id: Number(id) },
-            data: {
+            data: updateData,
-                ...(name && { name: name.trim() }),
-                subtitle: subtitle ? subtitle.trim() : null,
-                ...(active !== undefined && { active })
-            },
         });
 
         return NextResponse.json(genre);

app/api/health/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+    return NextResponse.json({ status: 'ok' }, { status: 200 });
+}

app/api/news/route.ts

@@ -0,0 +1,165 @@
+import { NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+import { requireAdminAuth } from '@/lib/auth';
+import { getLocalizedValue } from '@/lib/i18n';
+
+const prisma = new PrismaClient();
+
+// GET /api/news - Public endpoint to fetch news
+export async function GET(request: Request) {
+    try {
+        const { searchParams } = new URL(request.url);
+        const limit = parseInt(searchParams.get('limit') || '10');
+        const featuredOnly = searchParams.get('featured') === 'true';
+        const locale = searchParams.get('locale');
+
+        const where = featuredOnly ? { featured: true } : {};
+
+        const news = await prisma.news.findMany({
+            where,
+            orderBy: { publishedAt: 'desc' },
+            take: limit,
+            include: {
+                special: {
+                    select: {
+                        id: true,
+                        name: true
+                    }
+                }
+            }
+        });
+
+        if (locale) {
+            const localizedNews = news.map(item => ({
+                ...item,
+                title: getLocalizedValue(item.title, locale),
+                content: getLocalizedValue(item.content, locale),
+                special: item.special ? {
+                    ...item.special,
+                    name: getLocalizedValue(item.special.name, locale)
+                } : null
+            }));
+            return NextResponse.json(localizedNews);
+        }
+
+        return NextResponse.json(news);
+    } catch (error) {
+        console.error('Error fetching news:', error);
+        return NextResponse.json({ error: 'Failed to fetch news' }, { status: 500 });
+    }
+}
+
+// POST /api/news - Create news (requires auth)
+export async function POST(request: Request) {
+    const authError = await requireAdminAuth(request as any);
+    if (authError) {
+        return authError;
+    }
+
+    try {
+        const body = await request.json();
+        const { title, content, author, featured, specialId } = body;
+
+        if (!title || !content) {
+            return NextResponse.json(
+                { error: 'Title and content are required' },
+                { status: 400 }
+            );
+        }
+
+        // Ensure title and content are stored as JSON
+        const titleData = typeof title === 'string' ? { de: title, en: title } : title;
+        const contentData = typeof content === 'string' ? { de: content, en: content } : content;
+
+        const news = await prisma.news.create({
+            data: {
+                title: titleData,
+                content: contentData,
+                author: author || null,
+                featured: featured || false,
+                specialId: specialId || null
+            },
+            include: {
+                special: {
+                    select: {
+                        id: true,
+                        name: true
+                    }
+                }
+            }
+        });
+
+        return NextResponse.json(news, { status: 201 });
+    } catch (error) {
+        console.error('Error creating news:', error);
+        return NextResponse.json({ error: 'Failed to create news' }, { status: 500 });
+    }
+}
+
+// PUT /api/news - Update news (requires auth)
+export async function PUT(request: Request) {
+    const authError = await requireAdminAuth(request as any);
+    if (authError) {
+        return authError;
+    }
+
+    try {
+        const body = await request.json();
+        const { id, title, content, author, featured, specialId } = body;
+
+        if (!id) {
+            return NextResponse.json({ error: 'News ID is required' }, { status: 400 });
+        }
+
+        const updateData: any = {};
+        if (title !== undefined) updateData.title = typeof title === 'string' ? { de: title, en: title } : title;
+        if (content !== undefined) updateData.content = typeof content === 'string' ? { de: content, en: content } : content;
+        if (author !== undefined) updateData.author = author || null;
+        if (featured !== undefined) updateData.featured = featured;
+        if (specialId !== undefined) updateData.specialId = specialId || null;
+
+        const news = await prisma.news.update({
+            where: { id },
+            data: updateData,
+            include: {
+                special: {
+                    select: {
+                        id: true,
+                        name: true
+                    }
+                }
+            }
+        });
+
+        return NextResponse.json(news);
+    } catch (error) {
+        console.error('Error updating news:', error);
+        return NextResponse.json({ error: 'Failed to update news' }, { status: 500 });
+    }
+}
+
+// DELETE /api/news - Delete news (requires auth)
+export async function DELETE(request: Request) {
+    const authError = await requireAdminAuth(request as any);
+    if (authError) {
+        return authError;
+    }
+
+    try {
+        const body = await request.json();
+        const { id } = body;
+
+        if (!id) {
+            return NextResponse.json({ error: 'News ID is required' }, { status: 400 });
+        }
+
+        await prisma.news.delete({
+            where: { id }
+        });
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Error deleting news:', error);
+        return NextResponse.json({ error: 'Failed to delete news' }, { status: 500 });
+    }
+}

app/api/specials/route.ts

@@ -1,18 +1,32 @@
 import { PrismaClient, Special } from '@prisma/client';
 import { NextResponse } from 'next/server';
 import { requireAdminAuth } from '@/lib/auth';
+import { getLocalizedValue } from '@/lib/i18n';
 
 const prisma = new PrismaClient();
 
-export async function GET() {
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const locale = searchParams.get('locale');
+
     const specials = await prisma.special.findMany({
-        orderBy: { name: 'asc' },
+        // orderBy: { name: 'asc' },
         include: {
             _count: {
                 select: { songs: true }
             }
         }
     });
+
+    if (locale) {
+        const localizedSpecials = specials.map(s => ({
+            ...s,
+            name: getLocalizedValue(s.name, locale),
+            subtitle: getLocalizedValue(s.subtitle, locale)
+        })).sort((a, b) => a.name.localeCompare(b.name));
+        return NextResponse.json(localizedSpecials);
+    }
+
     return NextResponse.json(specials);
 }
 
@@ -25,10 +39,15 @@ export async function POST(request: Request) {
     if (!name) {
         return NextResponse.json({ error: 'Name is required' }, { status: 400 });
     }
+
+    // Ensure name is stored as JSON
+    const nameData = typeof name === 'string' ? { de: name, en: name } : name;
+    const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
+
     const special = await prisma.special.create({
         data: {
-            name,
+            name: nameData,
-            subtitle: subtitle || null,
+            subtitle: subtitleData,
             maxAttempts: Number(maxAttempts),
             unlockSteps,
             launchDate: launchDate ? new Date(launchDate) : null,
@@ -61,17 +80,19 @@ export async function PUT(request: Request) {
     if (!id) {
         return NextResponse.json({ error: 'ID required' }, { status: 400 });
     }
+
+    const updateData: any = {};
+    if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
+    if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
+    if (maxAttempts) updateData.maxAttempts = Number(maxAttempts);
+    if (unlockSteps) updateData.unlockSteps = unlockSteps;
+    if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
+    if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
+    if (curator !== undefined) updateData.curator = curator || null;
+
     const updated = await prisma.special.update({
         where: { id: Number(id) },
-        data: {
+        data: updateData,
-            ...(name && { name }),
-            subtitle: subtitle || null, // Allow clearing or setting
-            ...(maxAttempts && { maxAttempts: Number(maxAttempts) }),
-            ...(unlockSteps && { unlockSteps }),
-            launchDate: launchDate ? new Date(launchDate) : null,
-            endDate: endDate ? new Date(endDate) : null,
-            curator: curator || null,
-        },
     });
     return NextResponse.json(updated);
 }

app/api/version/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from 'next/server';
+import { execSync } from 'child_process';
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+export async function GET() {
+    try {
+        // First check if version file exists (Docker deployment)
+        // Try both /app/version.txt (Docker) and ./version.txt (local)
+        const versionPaths = [
+            '/app/version.txt',
+            join(process.cwd(), 'version.txt')
+        ];
+
+        for (const versionFilePath of versionPaths) {
+            if (existsSync(versionFilePath)) {
+                const version = readFileSync(versionFilePath, 'utf-8').trim();
+                if (version && version !== 'unknown') {
+                    return NextResponse.json({ version });
+                }
+            }
+        }
+
+        // Fallback: check environment variable
+        if (process.env.APP_VERSION) {
+            return NextResponse.json({ version: process.env.APP_VERSION });
+        }
+
+        // Fallback: try to get from git (local development)
+        let version = 'dev';
+
+        try {
+            // First try to get the exact tag if we're on a tagged commit
+            version = execSync('git describe --tags --exact-match 2>/dev/null', {
+                encoding: 'utf-8',
+                cwd: process.cwd()
+            }).trim();
+        } catch {
+            try {
+                // If not on a tag, get the latest tag with commit info
+                version = execSync('git describe --tags --always 2>/dev/null', {
+                    encoding: 'utf-8',
+                    cwd: process.cwd()
+                }).trim();
+            } catch {
+                // If git is not available or no tags exist, try to get commit hash
+                try {
+                    const hash = execSync('git rev-parse --short HEAD 2>/dev/null', {
+                        encoding: 'utf-8',
+                        cwd: process.cwd()
+                    }).trim();
+                    version = `dev-${hash}`;
+                } catch {
+                    // Fallback to just 'dev' if git is not available
+                    version = 'dev';
+                }
+            }
+        }
+
+        return NextResponse.json({ version });
+    } catch (error) {
+        console.error('Error getting version:', error);
+        return NextResponse.json({ version: 'unknown' });
+    }
+}

app/globals.css

@@ -2,6 +2,24 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+
+  /* Theme Colors */
+  --primary: #000000;
+  --primary-foreground: #ffffff;
+  --secondary: #4b5563;
+  --secondary-foreground: #ffffff;
+  --accent: #667eea;
+  --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --success: #22c55e;
+  --success-foreground: #ffffff;
+  --danger: #ef4444;
+  --danger-foreground: #ffffff;
+  --warning: #ffc107;
+  --muted: #f3f4f6;
+  --muted-foreground: #6b7280;
+  --border: #e5e7eb;
+  --input: #d1d5db;
+  --ring: #000000;
 }
 
 body {
@@ -51,13 +69,13 @@ body {
   display: flex;
   justify-content: space-between;
   font-size: 0.875rem;
-  color: #666;
+  color: var(--muted-foreground);
   margin-bottom: 0.5rem;
 }
 
 /* Audio Player */
 .audio-player {
-  background: #f3f4f6;
+  background: var(--muted);
   padding: 1rem;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -73,8 +91,8 @@ body {
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
-  background: #000;
+  background: var(--primary);
-  color: #fff;
+  color: var(--primary-foreground);
   border: none;
   display: flex;
   align-items: center;
@@ -85,19 +103,20 @@ body {
 
 .play-button:hover {
   background: #333;
+  /* Keep for now or add --primary-hover */
 }
 
 .progress-bar-container {
   flex: 1;
   height: 0.5rem;
-  background: #d1d5db;
+  background: var(--input);
   border-radius: 999px;
   overflow: hidden;
 }
 
 .progress-bar {
   height: 100%;
-  background: #22c55e;
+  background: var(--success);
   transition: width 0.1s linear;
 }
 
@@ -114,7 +133,7 @@ body {
   gap: 0.5rem;
   padding: 0.5rem;
   background: #f9fafb;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
   border-radius: 0.25rem;
   font-size: 0.875rem;
 }
@@ -125,7 +144,7 @@ body {
 }
 
 .guess-text {
-  color: #ef4444;
+  color: var(--danger);
   /* Red for wrong */
 }
 
@@ -135,7 +154,7 @@ body {
 }
 
 .guess-text.correct {
-  color: #22c55e;
+  color: var(--success);
 }
 
 /* Input */
@@ -148,14 +167,14 @@ body {
 .guess-input {
   width: 100%;
   padding: 0.75rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--input);
   border-radius: 0.25rem;
   font-size: 1rem;
   box-sizing: border-box;
 }
 
 .guess-input:focus {
-  outline: 2px solid #000;
+  outline: 2px solid var(--ring);
   border-color: transparent;
 }
 
@@ -163,7 +182,7 @@ body {
   position: absolute;
   width: 100%;
   background: #fff;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--input);
   border-radius: 0.25rem;
   margin-top: 0.25rem;
   max-height: 15rem;
@@ -177,11 +196,11 @@ body {
 .suggestion-item {
   padding: 0.75rem;
   cursor: pointer;
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--muted);
 }
 
 .suggestion-item:hover {
-  background: #f3f4f6;
+  background: var(--muted);
 }
 
 .suggestion-title {
@@ -190,14 +209,14 @@ body {
 
 .suggestion-artist {
   font-size: 0.875rem;
-  color: #666;
+  color: var(--muted-foreground);
 }
 
 .skip-button {
   width: 100%;
   padding: 1rem 1.5rem;
   margin-top: 1rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--accent-gradient);
   color: white;
   border: none;
   border-radius: 0.5rem;
@@ -246,7 +265,7 @@ body {
 }
 
 .admin-card {
-  background: #f3f4f6;
+  background: var(--muted);
   padding: 2rem;
   border-radius: 0.5rem;
 }
@@ -265,14 +284,14 @@ body {
 .form-input {
   width: 100%;
   padding: 0.5rem;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--input);
   border-radius: 0.25rem;
   box-sizing: border-box;
 }
 
 .btn-primary {
-  background: #000;
+  background: var(--primary);
-  color: #fff;
+  color: var(--primary-foreground);
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 0.25rem;
@@ -292,8 +311,8 @@ body {
 }
 
 .btn-secondary {
-  background: #4b5563;
+  background: var(--secondary);
-  color: #fff;
+  color: var(--secondary-foreground);
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 0.25rem;
@@ -312,8 +331,8 @@ body {
 }
 
 .btn-danger {
-  background: #ef4444;
+  background: var(--danger);
-  color: #fff;
+  color: var(--danger-foreground);
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 0.25rem;
@@ -337,8 +356,8 @@ body {
   padding: 2rem 1rem 1rem;
   text-align: center;
   font-size: 0.875rem;
-  color: #666;
+  color: var(--muted-foreground);
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--border);
   width: 100%;
 }
 
@@ -347,7 +366,7 @@ body {
 }
 
 .app-footer a {
-  color: #000;
+  color: var(--primary);
   text-decoration: none;
   font-weight: 500;
 }
@@ -375,7 +394,7 @@ body {
   font-size: 0.875rem;
   text-align: center;
   margin: 0 0 1rem 0;
-  color: #666;
+  color: var(--muted-foreground);
 }
 
 .statistics-grid {
@@ -391,7 +410,7 @@ body {
   padding: 0.75rem 0.5rem;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 0.375rem;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
 }
 
 .stat-badge {
@@ -401,7 +420,7 @@ body {
 
 .stat-label {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--muted-foreground);
   margin-bottom: 0.25rem;
   text-align: center;
 }
@@ -409,7 +428,7 @@ body {
 .stat-count {
   font-size: 1.25rem;
   font-weight: bold;
-  color: #000;
+  color: var(--primary);
 }
 
 /* Tooltip */

app/layout.tsx

@@ -1,51 +0,0 @@
-import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Hördle",
-  description: "Daily music guessing game - Guess the song from short audio clips",
-};
-
-export const viewport: Viewport = {
-  themeColor: "#000000",
-  width: "device-width",
-  initialScale: 1,
-  maximumScale: 1,
-};
-
-import InstallPrompt from "@/components/InstallPrompt";
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-        <InstallPrompt />
-        <footer className="app-footer">
-          <p>
-            Vibe coded with ☕ and 🍺 by{' '}
-            <a href="https://digitalcourage.social/@elpatron" target="_blank" rel="noopener noreferrer">
-              @elpatron@digitalcourage.social
-            </a>
-            {' '}- for personal use among friends only!
-          </p>
-        </footer>
-      </body>
-    </html>
-  );
-}

app/manifest.ts

@@ -1,14 +1,15 @@
 import type { MetadataRoute } from 'next'
+import { config } from '@/lib/config'
 
 export default function manifest(): MetadataRoute.Manifest {
     return {
-        name: 'Hördle',
+        name: config.appName,
-        short_name: 'Hördle',
+        short_name: config.appName,
-        description: 'Daily music guessing game - Guess the song from short audio clips',
+        description: config.appDescription,
         start_url: '/',
         display: 'standalone',
-        background_color: '#ffffff',
+        background_color: config.colors.backgroundColor,
-        theme_color: '#000000',
+        theme_color: config.colors.themeColor,
         icons: [
             {
                 src: '/favicon.ico',

app/page.tsx

@@ -1,99 +0,0 @@
-import Game from '@/components/Game';
-import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
-import Link from 'next/link';
-import { PrismaClient } from '@prisma/client';
-
-export const dynamic = 'force-dynamic';
-
-const prisma = new PrismaClient();
-
-export default async function Home() {
-  const dailyPuzzle = await getOrCreateDailyPuzzle(null); // Global puzzle
-  const genres = await prisma.genre.findMany({
-    where: { active: true },
-    orderBy: { name: 'asc' }
-  });
-  const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
-
-  const now = new Date();
-
-  const activeSpecials = specials.filter(s => {
-    const isStarted = !s.launchDate || s.launchDate <= now;
-    const isEnded = s.endDate && s.endDate < now;
-    return isStarted && !isEnded;
-  });
-
-  const upcomingSpecials = specials.filter(s => {
-    return s.launchDate && s.launchDate > now;
-  });
-
-  return (
-    <>
-      <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
-        <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
-          <div className="tooltip">
-            <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Global</Link>
-            <span className="tooltip-text">A random song from the entire collection</span>
-          </div>
-
-          {/* Genres */}
-          {genres.map(g => (
-            <div key={g.id} className="tooltip">
-              <Link href={`/${g.name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
-                {g.name}
-              </Link>
-              {g.subtitle && <span className="tooltip-text">{g.subtitle}</span>}
-            </div>
-          ))}
-
-          {/* Separator if both exist */}
-          {genres.length > 0 && activeSpecials.length > 0 && (
-            <span style={{ color: '#d1d5db' }}>|</span>
-          )}
-
-          {/* Active Specials */}
-          {activeSpecials.map(s => (
-            <div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-              <div className="tooltip">
-                <Link
-                  href={`/special/${s.name}`}
-                  style={{
-                    color: '#be185d', // Pink-700
-                    textDecoration: 'none',
-                    fontWeight: '500'
-                  }}
-                >
-                  ★ {s.name}
-                </Link>
-                {s.subtitle && <span className="tooltip-text">{s.subtitle}</span>}
-              </div>
-              {s.curator && (
-                <span style={{ fontSize: '0.75rem', color: '#666' }}>
-                  Curated by {s.curator}
-                </span>
-              )}
-            </div>
-          ))}
-        </div>
-
-        {/* Upcoming Specials */}
-        {upcomingSpecials.length > 0 && (
-          <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
-            Coming soon: {upcomingSpecials.map(s => (
-              <span key={s.id} style={{ marginLeft: '0.5rem' }}>
-                ★ {s.name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString('de-DE', {
-                  day: '2-digit',
-                  month: '2-digit',
-                  year: 'numeric',
-                  timeZone: process.env.TZ
-                }) : ''})
-                {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>Curated by {s.curator}</span>}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-      <Game dailyPuzzle={dailyPuzzle} genre={null} />
-    </>
-  );
-}

app/special/[name]/page.tsx

@@ -1,106 +0,0 @@
-import Game from '@/components/Game';
-import { getOrCreateSpecialPuzzle } from '@/lib/dailyPuzzle';
-import Link from 'next/link';
-import { PrismaClient } from '@prisma/client';
-
-export const dynamic = 'force-dynamic';
-
-const prisma = new PrismaClient();
-
-interface PageProps {
-    params: Promise<{ name: string }>;
-}
-
-export default async function SpecialPage({ params }: PageProps) {
-    const { name } = await params;
-    const decodedName = decodeURIComponent(name);
-
-    const currentSpecial = await prisma.special.findUnique({
-        where: { name: decodedName }
-    });
-
-    const now = new Date();
-    const isStarted = currentSpecial && (!currentSpecial.launchDate || currentSpecial.launchDate <= now);
-    const isEnded = currentSpecial && (currentSpecial.endDate && currentSpecial.endDate < now);
-
-    if (!currentSpecial || !isStarted) {
-        return (
-            <div style={{ textAlign: 'center', padding: '2rem' }}>
-                <h1>Special Not Available</h1>
-                <p>This special has not launched yet or does not exist.</p>
-                <Link href="/">Go Home</Link>
-            </div>
-        );
-    }
-
-    if (isEnded) {
-        return (
-            <div style={{ textAlign: 'center', padding: '2rem' }}>
-                <h1>Special Ended</h1>
-                <p>This special event has ended.</p>
-                <Link href="/">Go Home</Link>
-            </div>
-        );
-    }
-
-    const dailyPuzzle = await getOrCreateSpecialPuzzle(decodedName);
-    const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
-    const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
-
-    const activeSpecials = specials.filter(s => {
-        const sStarted = !s.launchDate || s.launchDate <= now;
-        const sEnded = s.endDate && s.endDate < now;
-        return sStarted && !sEnded;
-    });
-
-    return (
-        <>
-            <div style={{ textAlign: 'center', padding: '1rem', background: '#fce7f3' }}>
-                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
-                    <Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>Global</Link>
-
-                    {/* Genres */}
-                    {genres.map(g => (
-                        <Link
-                            key={g.id}
-                            href={`/${g.name}`}
-                            style={{
-                                color: '#4b5563',
-                                textDecoration: 'none'
-                            }}
-                        >
-                            {g.name}
-                        </Link>
-                    ))}
-
-                    {/* Separator if both exist */}
-                    {genres.length > 0 && activeSpecials.length > 0 && (
-                        <span style={{ color: '#d1d5db' }}>|</span>
-                    )}
-
-                    {/* Specials */}
-                    {activeSpecials.map(s => (
-                        <Link
-                            key={s.id}
-                            href={`/special/${s.name}`}
-                            style={{
-                                fontWeight: s.name === decodedName ? 'bold' : 'normal',
-                                textDecoration: s.name === decodedName ? 'underline' : 'none',
-                                color: s.name === decodedName ? '#9d174d' : '#be185d'
-                            }}
-                        >
-                            ★ {s.name}
-                        </Link>
-                    ))}
-                </div>
-            </div>
-            <Game
-                dailyPuzzle={dailyPuzzle}
-                genre={decodedName}
-                isSpecial={true}
-                maxAttempts={dailyPuzzle?.maxAttempts}
-                unlockSteps={dailyPuzzle?.unlockSteps}
-            />
-        </>
-    );
-}

components/AppFooter.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { config } from '@/lib/config';
+import { useEffect, useState } from 'react';
+
+export default function AppFooter() {
+    const [version, setVersion] = useState<string>('');
+
+    useEffect(() => {
+        fetch('/api/version')
+            .then(res => res.json())
+            .then(data => setVersion(data.version))
+            .catch(() => setVersion(''));
+    }, []);
+
+    if (!config.credits.enabled) return null;
+
+    return (
+        <footer className="app-footer">
+            <p>
+                {config.credits.text}{' '}
+                <a href={config.credits.linkUrl} target="_blank" rel="noopener noreferrer">
+                    {config.credits.linkText}
+                </a>
+                {version && (
+                    <>
+                        {' '}·{' '}
+                        <span style={{ fontSize: '0.85em', opacity: 0.7 }}>
+                            {version}
+                        </span>
+                    </>
+                )}
+            </p>
+        </footer>
+    );
+}

components/AudioPlayer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 
 interface AudioPlayerProps {
     src: string;
@@ -9,39 +9,112 @@ interface AudioPlayerProps {
     onPlay?: () => void;
     onReplay?: () => void;
     autoPlay?: boolean;
+    onHasPlayedChange?: (hasPlayed: boolean) => void;
 }
 
-export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false }: AudioPlayerProps) {
+export interface AudioPlayerRef {
+    play: () => void;
+}
+
+const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }, ref) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const [progress, setProgress] = useState(0);
     const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
 
+    const [processedSrc, setProcessedSrc] = useState(src);
+    const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState(unlockedSeconds);
+
+    useEffect(() => {
+        console.log('[AudioPlayer] MOUNTED');
+        return () => console.log('[AudioPlayer] UNMOUNTED');
+    }, []);
+
     useEffect(() => {
         if (audioRef.current) {
-            audioRef.current.pause();
+            // Check if props changed compared to what we last processed
-            audioRef.current.currentTime = startTime;
+            const hasChanged = src !== processedSrc || unlockedSeconds !== processedUnlockedSeconds;
-            setIsPlaying(false);
-            setProgress(0);
-            setHasPlayedOnce(false); // Reset for new segment
 
-            if (autoPlay) {
+            if (hasChanged) {
-                const playPromise = audioRef.current.play();
+                audioRef.current.pause();
-                if (playPromise !== undefined) {
+
-                    playPromise
+                let startPos = startTime;
-                        .then(() => {
+
-                            setIsPlaying(true);
+                // If same song but more time unlocked, start from where previous segment ended
-                            onPlay?.();
+                if (src === processedSrc && unlockedSeconds > processedUnlockedSeconds) {
-                            setHasPlayedOnce(true);
+                    startPos = startTime + processedUnlockedSeconds;
-                        })
+                }
-                        .catch(error => {
+
-                            console.log("Autoplay prevented:", error);
+                const targetPos = startPos;
-                            setIsPlaying(false);
+                audioRef.current.currentTime = targetPos;
-                        });
+
+                // Ensure position is set correctly even if browser resets it
+                setTimeout(() => {
+                    if (audioRef.current && Math.abs(audioRef.current.currentTime - targetPos) > 0.5) {
+                        audioRef.current.currentTime = targetPos;
+                    }
+                }, 50);
+
+                setIsPlaying(false);
+
+                // Calculate initial progress
+                const initialElapsed = startPos - startTime;
+                const initialPercent = unlockedSeconds > 0 ? (initialElapsed / unlockedSeconds) * 100 : 0;
+                setProgress(Math.min(initialPercent, 100));
+
+                setHasPlayedOnce(false); // Reset for new segment
+                onHasPlayedChange?.(false); // Notify parent
+
+                // Update processed state
+                setProcessedSrc(src);
+                setProcessedUnlockedSeconds(unlockedSeconds);
+
+                if (autoPlay) {
+                    // Delay play slightly to ensure currentTime sticks
+                    setTimeout(() => {
+                        const playPromise = audioRef.current?.play();
+                        if (playPromise !== undefined) {
+                            playPromise
+                                .then(() => {
+                                    setIsPlaying(true);
+                                    onPlay?.();
+                                    setHasPlayedOnce(true);
+                                    onHasPlayedChange?.(true); // Notify parent
+                                })
+                                .catch(error => {
+                                    console.log("Autoplay prevented:", error);
+                                    setIsPlaying(false);
+                                });
+                        }
+                    }, 150);
                 }
             }
         }
-    }, [src, unlockedSeconds, startTime, autoPlay]);
+    }, [src, unlockedSeconds, startTime, autoPlay, processedSrc, processedUnlockedSeconds]);
+
+    // Expose play method to parent component
+    useImperativeHandle(ref, () => ({
+        play: () => {
+            if (!audioRef.current) return;
+
+            const playPromise = audioRef.current.play();
+            if (playPromise !== undefined) {
+                playPromise
+                    .then(() => {
+                        setIsPlaying(true);
+                        onPlay?.();
+                        if (!hasPlayedOnce) {
+                            setHasPlayedOnce(true);
+                            onHasPlayedChange?.(true);
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Play failed:", error);
+                        setIsPlaying(false);
+                    });
+            }
+        }
+    }));
 
     const togglePlay = () => {
         if (!audioRef.current) return;
@@ -56,6 +129,7 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
                 onReplay?.();
             } else {
                 setHasPlayedOnce(true);
+                onHasPlayedChange?.(true); // Notify parent
             }
         }
         setIsPlaying(!isPlaying);
@@ -112,4 +186,10 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
             </div>
         </div>
     );
-}
+});
+
+AudioPlayer.displayName = 'AudioPlayer';
+
+
+
+export default AudioPlayer;

components/Game.tsx

@@ -1,12 +1,21 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { config } from '@/lib/config';
-import AudioPlayer from './AudioPlayer';
+import { useEffect, useState, useRef } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import AudioPlayer, { AudioPlayerRef } from './AudioPlayer';
 import GuessInput from './GuessInput';
 import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
 import { sendGotifyNotification, submitRating } from '../app/actions';
 
+// Plausible Analytics
+declare global {
+    interface Window {
+        plausible?: (eventName: string, options?: { props?: Record<string, string | number> }) => void;
+    }
+}
+
 interface GameProps {
     dailyPuzzle: {
         id: number;
@@ -28,15 +37,19 @@ interface GameProps {
 const DEFAULT_UNLOCK_STEPS = [2, 4, 7, 11, 16, 30, 60];
 
 export default function Game({ dailyPuzzle, genre = null, isSpecial = false, maxAttempts = 7, unlockSteps = DEFAULT_UNLOCK_STEPS }: GameProps) {
+    const t = useTranslations('Game');
+    const locale = useLocale();
     const { gameState, statistics, addGuess, giveUp, addReplay, addYearBonus, skipYearBonus } = useGameState(genre, maxAttempts);
     const [hasWon, setHasWon] = useState(false);
     const [hasLost, setHasLost] = useState(false);
-    const [shareText, setShareText] = useState('🔗 Share');
+    const [shareText, setShareText] = useState(`🔗 ${t('share')}`);
     const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
     const [isProcessingGuess, setIsProcessingGuess] = useState(false);
     const [timeUntilNext, setTimeUntilNext] = useState('');
     const [hasRated, setHasRated] = useState(false);
     const [showYearModal, setShowYearModal] = useState(false);
+    const [hasPlayedAudio, setHasPlayedAudio] = useState(false);
+    const audioPlayerRef = useRef<AudioPlayerRef>(null);
 
     useEffect(() => {
         const updateCountdown = () => {
@@ -74,7 +87,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
     useEffect(() => {
         if (dailyPuzzle) {
-            const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
+            const ratedPuzzles = JSON.parse(localStorage.getItem(`${config.appName.toLowerCase()}_rated_puzzles`) || '[]');
             if (ratedPuzzles.includes(dailyPuzzle.id)) {
                 setHasRated(true);
             } else {
@@ -85,13 +98,13 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
     if (!dailyPuzzle) return (
         <div className="game-container" style={{ textAlign: 'center', padding: '2rem' }}>
-            <h2>No Puzzle Available</h2>
+            <h2>{t('noPuzzleAvailable')}</h2>
-            <p>Could not generate a daily puzzle.</p>
+            <p>{t('noPuzzleDescription')}</p>
-            <p>Please ensure there are songs in the database{genre ? ` for genre "${genre}"` : ''}.</p>
+            <p>{t('noPuzzleGenre')}{genre ? ` für Genre "${genre}"` : ''}.</p>
-            <a href="/admin" style={{ color: 'var(--primary)', textDecoration: 'underline' }}>Go to Admin Dashboard</a>
+            <a href="/admin" style={{ color: 'var(--primary)', textDecoration: 'underline' }}>{t('goToAdmin')}</a>
         </div>
     );
-    if (!gameState) return <div>Loading state...</div>;
+    if (!gameState) return <div>{t('loadingState')}</div>;
 
     const handleGuess = (song: any) => {
         if (isProcessingGuess) return;
@@ -101,6 +114,17 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         if (song.id === dailyPuzzle.songId) {
             addGuess(song.title, true);
             setHasWon(true);
+            // Track puzzle solved event
+            if (typeof window !== 'undefined' && window.plausible) {
+                window.plausible('puzzle_solved', {
+                    props: {
+                        genre: genre || 'Global',
+                        attempts: gameState.guesses.length + 1,
+                        score: gameState.score + 20, // Include the win bonus
+                        outcome: 'won'
+                    }
+                });
+            }
             // Notification sent after year guess or skip
             if (!dailyPuzzle.releaseYear) {
                 sendGotifyNotification(gameState.guesses.length + 1, 'won', dailyPuzzle.id, genre, gameState.score);
@@ -110,19 +134,54 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
             if (gameState.guesses.length + 1 >= maxAttempts) {
                 setHasLost(true);
                 setHasWon(false);
+                // Track puzzle lost event
+                if (typeof window !== 'undefined' && window.plausible) {
+                    window.plausible('puzzle_solved', {
+                        props: {
+                            genre: genre || 'Global',
+                            attempts: maxAttempts,
+                            score: 0,
+                            outcome: 'lost'
+                        }
+                    });
+                }
                 sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0); // Score is 0 on failure
             }
         }
         setTimeout(() => setIsProcessingGuess(false), 500);
     };
 
+    const handleStartAudio = () => {
+        // This will be called when user clicks "Start" button on first attempt
+        // Trigger the audio player to start playing
+        audioPlayerRef.current?.play();
+        setHasPlayedAudio(true);
+    };
+
     const handleSkip = () => {
+        // If user hasn't played audio yet on first attempt, start it instead of skipping
+        if (gameState.guesses.length === 0 && !hasPlayedAudio) {
+            handleStartAudio();
+            return;
+        }
+
         setLastAction('SKIP');
         addGuess("SKIPPED", false);
 
         if (gameState.guesses.length + 1 >= maxAttempts) {
             setHasLost(true);
             setHasWon(false);
+            // Track puzzle lost event
+            if (typeof window !== 'undefined' && window.plausible) {
+                window.plausible('puzzle_solved', {
+                    props: {
+                        genre: genre || 'Global',
+                        attempts: maxAttempts,
+                        score: 0,
+                        outcome: 'lost'
+                    }
+                });
+            }
             sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0); // Score is 0 on failure
         }
     };
@@ -133,6 +192,17 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         giveUp(); // Ensure game is marked as failed and score reset to 0
         setHasLost(true);
         setHasWon(false);
+        // Track puzzle lost event
+        if (typeof window !== 'undefined' && window.plausible) {
+            window.plausible('puzzle_solved', {
+                props: {
+                    genre: genre || 'Global',
+                    attempts: gameState.guesses.length + 1,
+                    score: 0,
+                    outcome: 'lost'
+                }
+            });
+        }
         sendGotifyNotification(maxAttempts, 'lost', dailyPuzzle.id, genre, 0);
     };
 
@@ -141,6 +211,19 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         addYearBonus(correct);
         setShowYearModal(false);
 
+        // Update the puzzle_solved event with year bonus result
+        if (typeof window !== 'undefined' && window.plausible) {
+            window.plausible('puzzle_solved', {
+                props: {
+                    genre: genre || 'Global',
+                    attempts: gameState.guesses.length,
+                    score: gameState.score + (correct ? 10 : 0), // Include year bonus if correct
+                    outcome: 'won',
+                    year_bonus: correct ? 'correct' : 'incorrect'
+                }
+            });
+        }
+
         // Send notification now that game is fully complete
         sendGotifyNotification(gameState.guesses.length, 'won', dailyPuzzle.id, genre, gameState.score + (correct ? 10 : 0));
     };
@@ -148,6 +231,20 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     const handleYearSkip = () => {
         skipYearBonus();
         setShowYearModal(false);
+
+        // Update the puzzle_solved event with year bonus result
+        if (typeof window !== 'undefined' && window.plausible) {
+            window.plausible('puzzle_solved', {
+                props: {
+                    genre: genre || 'Global',
+                    attempts: gameState.guesses.length,
+                    score: gameState.score, // Score already includes win bonus
+                    outcome: 'won',
+                    year_bonus: 'skipped'
+                }
+            });
+        }
+
         // Send notification now that game is fully complete
         sendGotifyNotification(gameState.guesses.length, 'won', dailyPuzzle.id, genre, gameState.score);
     };
@@ -160,23 +257,28 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
         for (let i = 0; i < totalGuesses; i++) {
             if (i < gameState.guesses.length) {
-                if (hasWon && i === gameState.guesses.length - 1) {
+                if (gameState.guesses[i] === 'SKIPPED') {
-                    emojiGrid += '🟩';
-                } else if (gameState.guesses[i] === 'SKIPPED') {
                     emojiGrid += '⬛';
+                } else if (hasWon && i === gameState.guesses.length - 1) {
+                    emojiGrid += '🟩';
                 } else {
                     emojiGrid += '🟥';
                 }
             } else {
-                emojiGrid += '⬜';
+                // If game is lost, fill remaining slots with black squares
+                emojiGrid += hasLost ? '⬛' : '⬜';
             }
         }
 
         const speaker = hasWon ? '🔉' : '🔇';
         const bonusStar = (hasWon && gameState.yearGuessed && dailyPuzzle.releaseYear && gameState.scoreBreakdown.some(item => item.reason === 'Bonus: Correct Year')) ? '⭐' : '';
-        const genreText = genre ? `${isSpecial ? 'Special' : 'Genre'}: ${genre}\n` : '';
+        const genreText = genre ? `${isSpecial ? t('special') : t('genre')}: ${genre}\n` : '';
 
-        let shareUrl = 'https://hoerdle.elpatron.me';
+        let shareUrl = `https://${config.domain}`;
+        // Add locale prefix if not default (de)
+        if (locale !== 'de') {
+            shareUrl += `/${locale}`;
+        }
         if (genre) {
             if (isSpecial) {
                 shareUrl += `/special/${encodeURIComponent(genre)}`;
@@ -185,7 +287,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
             }
         }
 
-        const text = `Hördle #${dailyPuzzle.puzzleNumber}\n${genreText}\n${speaker}${emojiGrid}${bonusStar}\nScore: ${gameState.score}\n\n#Hördle #Music\n\n${shareUrl}`;
+        const text = `${config.appName} #${dailyPuzzle.puzzleNumber}\n${genreText}\n${speaker}${emojiGrid}${bonusStar}\n${t('score')}: ${gameState.score}\n\n#${config.appName} #Music\n\n${shareUrl}`;
 
         const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 
@@ -195,8 +297,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                     title: `Hördle #${dailyPuzzle.puzzleNumber}`,
                     text: text,
                 });
-                setShareText('✓ Shared!');
+                setShareText(t('shared'));
-                setTimeout(() => setShareText('🔗 Share'), 2000);
+                setTimeout(() => setShareText(`🔗 ${t('share')}`), 2000);
                 return;
             } catch (err) {
                 if ((err as Error).name !== 'AbortError') {
@@ -207,12 +309,12 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
         try {
             await navigator.clipboard.writeText(text);
-            setShareText('✓ Copied!');
+            setShareText(t('copied'));
-            setTimeout(() => setShareText('🔗 Share'), 2000);
+            setTimeout(() => setShareText(`🔗 ${t('share')}`), 2000);
         } catch (err) {
             console.error('Clipboard failed:', err);
-            setShareText('✗ Failed');
+            setShareText(t('shareFailed'));
-            setTimeout(() => setShareText('🔗 Share'), 2000);
+            setTimeout(() => setShareText(`🔗 ${t('share')}`), 2000);
         }
     };
 
@@ -223,10 +325,10 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
             await submitRating(dailyPuzzle.songId, rating, genre, isSpecial, dailyPuzzle.puzzleNumber);
             setHasRated(true);
 
-            const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
+            const ratedPuzzles = JSON.parse(localStorage.getItem(`${config.appName.toLowerCase()}_rated_puzzles`) || '[]');
             if (!ratedPuzzles.includes(dailyPuzzle.id)) {
                 ratedPuzzles.push(dailyPuzzle.id);
-                localStorage.setItem('hoerdle_rated_puzzles', JSON.stringify(ratedPuzzles));
+                localStorage.setItem(`${config.appName.toLowerCase()}_rated_puzzles`, JSON.stringify(ratedPuzzles));
             }
         } catch (error) {
             console.error('Failed to submit rating', error);
@@ -236,28 +338,34 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     return (
         <div className="container">
             <header className="header">
-                <h1 className="title">Hördle #{dailyPuzzle.puzzleNumber}{genre ? ` / ${genre}` : ''}</h1>
+                <h1 id="tour-title" className="title">{config.appName} #{dailyPuzzle.puzzleNumber}{genre ? ` / ${genre}` : ''}</h1>
-                <div style={{ fontSize: '0.9rem', color: '#666', marginTop: '-0.5rem', marginBottom: '1rem' }}>
+                <div style={{ fontSize: '0.9rem', color: 'var(--muted-foreground)', marginTop: '0.5rem', marginBottom: '1rem' }}>
-                    Next puzzle in: {timeUntilNext}
+                    {t('nextPuzzle')}: {timeUntilNext}
                 </div>
             </header>
 
             <main className="game-board">
                 <div style={{ borderBottom: '1px solid #e5e7eb', paddingBottom: '1rem' }}>
-                    <div className="status-bar">
+                    <div id="tour-status" className="status-bar">
-                        <span>Attempt {gameState.guesses.length + 1} / {maxAttempts}</span>
+                        <span>{t('attempt')} {gameState.guesses.length + 1} / {maxAttempts}</span>
-                        <span>{unlockedSeconds}s unlocked</span>
+                        <span>{unlockedSeconds}s {t('unlocked')}</span>
                     </div>
 
-                    <ScoreDisplay score={gameState.score} breakdown={gameState.scoreBreakdown} />
+                    <div id="tour-score">
+                        <ScoreDisplay score={gameState.score} breakdown={gameState.scoreBreakdown} />
+                    </div>
 
-                    <AudioPlayer
+                    <div id="tour-player">
-                        src={dailyPuzzle.audioUrl}
+                        <AudioPlayer
-                        unlockedSeconds={unlockedSeconds}
+                            ref={audioPlayerRef}
-                        startTime={dailyPuzzle.startTime}
+                            src={dailyPuzzle.audioUrl}
-                        autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
+                            unlockedSeconds={unlockedSeconds}
-                        onReplay={addReplay}
+                            startTime={dailyPuzzle.startTime}
-                    />
+                            autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
+                            onReplay={addReplay}
+                            onHasPlayedChange={setHasPlayedAudio}
+                        />
+                    </div>
                 </div>
 
                 <div className="guess-list">
@@ -267,7 +375,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                             <div key={i} className="guess-item">
                                 <span className="guess-number">#{i + 1}</span>
                                 <span className={`guess-text ${guess === 'SKIPPED' ? 'skipped' : ''} ${isCorrect ? 'correct' : ''}`}>
-                                    {isCorrect ? 'Correct!' : guess}
+                                    {isCorrect ? t('correct') : guess}
                                 </span>
                             </div>
                         );
@@ -276,13 +384,19 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
                 {!hasWon && !hasLost && (
                     <>
-                        <GuessInput onGuess={handleGuess} disabled={isProcessingGuess} />
+                        <div id="tour-input">
+                            <GuessInput onGuess={handleGuess} disabled={isProcessingGuess} />
+                        </div>
                         {gameState.guesses.length < maxAttempts - 1 ? (
                             <button
+                                id="tour-controls"
                                 onClick={handleSkip}
                                 className="skip-button"
                             >
-                                Skip (+{unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds}s)
+                                {gameState.guesses.length === 0 && !hasPlayedAudio
+                                    ? t('start')
+                                    : t('skipWithBonus', { seconds: unlockSteps[Math.min(gameState.guesses.length + 1, unlockSteps.length - 1)] - unlockedSeconds })
+                                }
                             </button>
                         ) : (
                             <button
@@ -293,7 +407,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                                     boxShadow: '0 4px 15px rgba(245, 87, 108, 0.4)'
                                 }}
                             >
-                                Solve (Give Up)
+                                {t('solveGiveUp')}
                             </button>
                         )}
                     </>
@@ -302,15 +416,15 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                 {(hasWon || hasLost) && (
                     <div className={`message-box ${hasWon ? 'success' : 'failure'}`}>
                         <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
-                            {hasWon ? 'You won!' : 'Game Over'}
+                            {hasWon ? t('won') : t('lost')}
                         </h2>
 
-                        <div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: hasWon ? '#059669' : '#dc2626' }}>
+                        <div style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0', color: hasWon ? 'var(--success)' : 'var(--danger)' }}>
-                            Score: {gameState.score}
+                            {t('score')}: {gameState.score}
                         </div>
 
-                        <details style={{ marginBottom: '1rem', cursor: 'pointer', fontSize: '0.9rem', color: '#666' }}>
+                        <details style={{ marginBottom: '1rem', cursor: 'pointer', fontSize: '0.9rem', color: 'var(--muted-foreground)' }}>
-                            <summary>Score Breakdown</summary>
+                            <summary>{t('scoreBreakdown')}</summary>
                             <ul style={{ listStyle: 'none', padding: '0.5rem', textAlign: 'left', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', marginTop: '0.5rem' }}>
                                 {gameState.scoreBreakdown.map((item, i) => (
                                     <li key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.25rem 0' }}>
@@ -323,22 +437,22 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                             </ul>
                         </details>
 
-                        <p>{hasWon ? 'Come back tomorrow for a new song.' : 'The song was:'}</p>
+                        <p>{hasWon ? t('comeBackTomorrow') : t('theSongWas')}</p>
 
                         <div style={{ margin: '1.5rem 0', padding: '1rem', background: 'rgba(255,255,255,0.5)', borderRadius: '0.5rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                             <img
                                 src={dailyPuzzle.coverImage || '/favicon.ico'}
-                                alt="Album Cover"
+                                alt={t('albumCover')}
                                 style={{ width: '150px', height: '150px', objectFit: 'cover', borderRadius: '0.5rem', marginBottom: '1rem', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}
                             />
                             <h3 style={{ fontSize: '1.125rem', fontWeight: 'bold', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.title}</h3>
-                            <p style={{ fontSize: '0.875rem', color: '#666', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.artist}</p>
+                            <p style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', margin: '0 0 0.5rem 0' }}>{dailyPuzzle.artist}</p>
                             {dailyPuzzle.releaseYear && gameState.yearGuessed && (
-                                <p style={{ fontSize: '0.875rem', color: '#666', margin: '0 0 1rem 0' }}>Released: {dailyPuzzle.releaseYear}</p>
+                                <p style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', margin: '0 0 1rem 0' }}>{t('released')}: {dailyPuzzle.releaseYear}</p>
                             )}
                             <audio controls style={{ width: '100%' }}>
                                 <source src={dailyPuzzle.audioUrl} type="audio/mpeg" />
-                                Your browser does not support the audio element.
+                                {t('yourBrowserDoesNotSupport')}
                             </audio>
                         </div>
 
@@ -385,20 +499,22 @@ function ScoreDisplay({ score, breakdown }: { score: number, breakdown: Array<{
             textAlign: 'center',
             margin: '0.5rem 0',
             padding: '0.5rem',
-            background: '#f3f4f6',
+            background: 'var(--muted)',
             borderRadius: '0.5rem',
             fontSize: '0.9rem',
             fontFamily: 'monospace',
             cursor: 'help'
         }}>
-            <span style={{ color: '#666' }}>{expression} = </span>
+            <span style={{ color: 'var(--muted-foreground)' }}>{expression} = </span>
             <span style={{ fontWeight: 'bold', color: 'var(--primary)', fontSize: '1.1rem' }}>{score}</span>
         </div>
     );
 }
 
 function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number, onGuess: (year: number) => void, onSkip: () => void }) {
+    const t = useTranslations('Game');
     const [options, setOptions] = useState<number[]>([]);
+    const [feedback, setFeedback] = useState<{ show: boolean, correct: boolean, guessedYear?: number }>({ show: false, correct: false });
 
     useEffect(() => {
         const currentYear = new Date().getFullYear();
@@ -427,6 +543,24 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
         setOptions(Array.from(allOptions).sort((a, b) => a - b));
     }, [correctYear]);
 
+    const handleGuess = (year: number) => {
+        const correct = year === correctYear;
+        setFeedback({ show: true, correct, guessedYear: year });
+
+        // Close modal after showing feedback
+        setTimeout(() => {
+            onGuess(year);
+        }, 2500);
+    };
+
+    const handleSkip = () => {
+        setFeedback({ show: true, correct: false });
+
+        setTimeout(() => {
+            onSkip();
+        }, 2000);
+    };
+
     return (
         <div style={{
             position: 'fixed',
@@ -450,67 +584,98 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                 textAlign: 'center',
                 boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)'
             }}>
-                <h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem', color: '#1f2937' }}>Bonus Round!</h3>
+                {!feedback.show ? (
-                <p style={{ marginBottom: '1.5rem', color: '#4b5563' }}>Guess the release year for <strong style={{ color: '#10b981' }}>+10 points</strong>!</p>
+                    <>
+                        <h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem', color: 'var(--primary)' }}>{t('bonusRound')}</h3>
+                        <p style={{ marginBottom: '1.5rem', color: 'var(--secondary)' }}>{t('guessReleaseYear')} <strong style={{ color: 'var(--success)' }}>+10 {t('points')}</strong>!</p>
+
+                        <div style={{
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
+                            gap: '0.75rem',
+                            marginBottom: '1.5rem'
+                        }}>
+                            {options.map(year => (
+                                <button
+                                    key={year}
+                                    onClick={() => handleGuess(year)}
+                                    style={{
+                                        padding: '0.75rem',
+                                        background: 'var(--muted)',
+                                        border: '2px solid var(--border)',
+                                        borderRadius: '0.5rem',
+                                        fontSize: '1.1rem',
+                                        fontWeight: 'bold',
+                                        color: 'var(--secondary)',
+                                        cursor: 'pointer',
+                                        transition: 'all 0.2s'
+                                    }}
+                                    onMouseOver={e => e.currentTarget.style.borderColor = 'var(--success)'}
+                                    onMouseOut={e => e.currentTarget.style.borderColor = 'var(--border)'}
+                                >
+                                    {year}
+                                </button>
+                            ))}
+                        </div>
 
-                <div style={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
-                    gap: '0.75rem',
-                    marginBottom: '1.5rem'
-                }}>
-                    {options.map(year => (
                         <button
-                            key={year}
+                            onClick={handleSkip}
-                            onClick={() => onGuess(year)}
                             style={{
-                                padding: '0.75rem',
+                                background: 'none',
-                                background: '#f3f4f6',
+                                border: 'none',
-                                border: '2px solid #e5e7eb',
+                                color: 'var(--muted-foreground)',
-                                borderRadius: '0.5rem',
+                                textDecoration: 'underline',
-                                fontSize: '1.1rem',
-                                fontWeight: 'bold',
-                                color: '#374151',
                                 cursor: 'pointer',
-                                transition: 'all 0.2s'
+                                fontSize: '0.9rem'
                             }}
-                            onMouseOver={e => e.currentTarget.style.borderColor = '#10b981'}
-                            onMouseOut={e => e.currentTarget.style.borderColor = '#e5e7eb'}
                         >
-                            {year}
+                            {t('skipBonus')}
                         </button>
-                    ))}
+                    </>
-                </div>
+                ) : (
-
+                    <div style={{ padding: '2rem 0' }}>
-                <button
+                        {feedback.guessedYear ? (
-                    onClick={onSkip}
+                            feedback.correct ? (
-                    style={{
+                                <>
-                        background: 'none',
+                                    <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>🎉</div>
-                        border: 'none',
+                                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--success)', marginBottom: '0.5rem' }}>{t('correct')}</h3>
-                        color: '#6b7280',
+                                    <p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>{t('released')} {correctYear}</p>
-                        textDecoration: 'underline',
+                                    <p style={{ fontSize: '1.5rem', fontWeight: 'bold', color: 'var(--success)', marginTop: '1rem' }}>+10 {t('points')}!</p>
-                        cursor: 'pointer',
+                                </>
-                        fontSize: '0.9rem'
+                            ) : (
-                    }}
+                                <>
-                >
+                                    <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>😕</div>
-                    Skip Bonus
+                                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--danger)', marginBottom: '0.5rem' }}>{t('notQuite')}</h3>
-                </button>
+                                    <p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>{t('youGuessed')} {feedback.guessedYear}</p>
+                                    <p style={{ fontSize: '1.2rem', color: 'var(--secondary)', marginTop: '0.5rem' }}>{t('actuallyReleasedIn')} <strong>{correctYear}</strong></p>
+                                </>
+                            )
+                        ) : (
+                            <>
+                                <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>⏭️</div>
+                                <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: 'var(--muted-foreground)', marginBottom: '0.5rem' }}>{t('skipped')}</h3>
+                                <p style={{ fontSize: '1.2rem', color: 'var(--secondary)' }}>{t('released')} {correctYear}</p>
+                            </>
+                        )}
+                    </div>
+                )}
             </div>
         </div>
     );
 }
 
 function StarRating({ onRate, hasRated }: { onRate: (rating: number) => void, hasRated: boolean }) {
+    const t = useTranslations('Game');
     const [hover, setHover] = useState(0);
     const [rating, setRating] = useState(0);
 
     if (hasRated) {
-        return <div style={{ color: '#666', fontStyle: 'italic' }}>Thanks for rating!</div>;
+        return <div style={{ color: 'var(--muted-foreground)', fontStyle: 'italic' }}>{t('thanksForRating')}</div>;
     }
 
     return (
         <div className="star-rating" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
-            <span style={{ fontSize: '0.875rem', color: '#666', fontWeight: '500' }}>Rate this puzzle:</span>
+            <span style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)', fontWeight: '500' }}>{t('rateThisPuzzle')}</span>
             <div style={{ display: 'flex', gap: '0.25rem', justifyContent: 'center' }}>
                 {[...Array(5)].map((_, index) => {
                     const ratingValue = index + 1;
@@ -523,7 +688,7 @@ function StarRating({ onRate, hasRated }: { onRate: (rating: number) => void, ha
                                 border: 'none',
                                 cursor: 'pointer',
                                 fontSize: '2rem',
-                                color: ratingValue <= (hover || rating) ? '#ffc107' : '#9ca3af',
+                                color: ratingValue <= (hover || rating) ? 'var(--warning)' : 'var(--muted-foreground)',
                                 transition: 'color 0.2s',
                                 padding: '0 0.25rem'
                             }}

components/GuessInput.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 
 interface Song {
     id: number;
@@ -14,6 +15,7 @@ interface GuessInputProps {
 }
 
 export default function GuessInput({ onGuess, disabled }: GuessInputProps) {
+    const t = useTranslations('Game');
     const [query, setQuery] = useState('');
     const [songs, setSongs] = useState<Song[]>([]);
     const [filteredSongs, setFilteredSongs] = useState<Song[]>([]);
@@ -53,7 +55,7 @@ export default function GuessInput({ onGuess, disabled }: GuessInputProps) {
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 disabled={disabled}
-                placeholder={disabled ? "Game Over" : "Know it? Search for the artist / title"}
+                placeholder={disabled ? t('gameOverPlaceholder') : t('knowItSearch')}
                 className="guess-input"
             />
 

components/InstallPrompt.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 
 export default function InstallPrompt() {
+    const t = useTranslations('InstallPrompt');
     const [isIOS, setIsIOS] = useState(false);
     const [isStandalone, setIsStandalone] = useState(false);
     const [showPrompt, setShowPrompt] = useState(false);
@@ -80,9 +82,9 @@ export default function InstallPrompt() {
         }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                 <div>
-                    <h3 style={{ fontWeight: 'bold', fontSize: '1rem', marginBottom: '0.25rem' }}>Install Hördle App</h3>
+                    <h3 style={{ fontWeight: 'bold', fontSize: '1rem', marginBottom: '0.25rem' }}>{t('installApp')}</h3>
                     <p style={{ fontSize: '0.875rem', color: '#666' }}>
-                        Install the app for a better experience and quick access!
+                        {t('installDescription')}
                     </p>
                 </div>
                 <button
@@ -102,7 +104,7 @@ export default function InstallPrompt() {
 
             {isIOS ? (
                 <div style={{ fontSize: '0.875rem', background: '#f3f4f6', padding: '0.75rem', borderRadius: '0.5rem', marginTop: '0.5rem' }}>
-                    Tap <span style={{ fontSize: '1.2rem' }}>share</span> then "Add to Home Screen" <span style={{ fontSize: '1.2rem' }}>+</span>
+                    {t('iosInstructions')} <span style={{ fontSize: '1.2rem' }}>{t('iosShare')}</span> {t('iosThen')} <span style={{ fontSize: '1.2rem' }}>+</span>
                 </div>
             ) : (
                 <button
@@ -118,7 +120,7 @@ export default function InstallPrompt() {
                         marginTop: '0.5rem'
                     }}
                 >
-                    Install App
+                    {t('installButton')}
                 </button>
             )}
             <style jsx>{`

components/LanguageSwitcher.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { usePathname, useRouter } from '@/lib/navigation';
+import { useLocale } from 'next-intl';
+
+export default function LanguageSwitcher() {
+    const locale = useLocale();
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const switchLocale = (newLocale: 'de' | 'en') => {
+        router.replace(pathname, { locale: newLocale });
+    };
+
+    return (
+        <div style={{
+            display: 'flex',
+            background: '#f3f4f6',
+            borderRadius: '0.375rem',
+            padding: '0.25rem',
+            gap: '0.25rem'
+        }}>
+            <button
+                onClick={() => switchLocale('de')}
+                style={{
+                    padding: '0.375rem 0.75rem',
+                    background: locale === 'de' ? 'white' : 'transparent',
+                    border: 'none',
+                    borderRadius: '0.25rem',
+                    cursor: 'pointer',
+                    fontWeight: locale === 'de' ? '600' : '400',
+                    fontSize: '0.875rem',
+                    color: locale === 'de' ? '#111827' : '#6b7280',
+                    boxShadow: locale === 'de' ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
+                    transition: 'all 0.2s'
+                }}
+            >
+                DE
+            </button>
+            <button
+                onClick={() => switchLocale('en')}
+                style={{
+                    padding: '0.375rem 0.75rem',
+                    background: locale === 'en' ? 'white' : 'transparent',
+                    border: 'none',
+                    borderRadius: '0.25rem',
+                    cursor: 'pointer',
+                    fontWeight: locale === 'en' ? '600' : '400',
+                    fontSize: '0.875rem',
+                    color: locale === 'en' ? '#111827' : '#6b7280',
+                    boxShadow: locale === 'en' ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
+                    transition: 'all 0.2s'
+                }}
+            >
+                EN
+            </button>
+        </div>
+    );
+}

components/NewsSection.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Link } from '@/lib/navigation';
+import { getLocalizedValue } from '@/lib/i18n';
+
+interface NewsItem {
+    id: number;
+    title: any;
+    content: any;
+    author: string | null;
+    publishedAt: string;
+    featured: boolean;
+    special: {
+        id: number;
+        name: any;
+    } | null;
+}
+
+interface NewsSectionProps {
+    locale: string;
+}
+
+export default function NewsSection({ locale }: NewsSectionProps) {
+    const [news, setNews] = useState<NewsItem[]>([]);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetchNews();
+    }, [locale]);
+
+    const fetchNews = async () => {
+        try {
+            const res = await fetch(`/api/news?limit=3&locale=${locale}`);
+            if (res.ok) {
+                const data = await res.json();
+                setNews(data);
+            }
+        } catch (error) {
+            console.error('Failed to fetch news:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loading || news.length === 0) {
+        return null; // Don't show anything if no news
+    }
+
+    return (
+        <div style={{
+            background: '#f9fafb',
+            borderRadius: '0.5rem',
+            margin: '1rem auto',
+            maxWidth: '800px',
+            overflow: 'hidden',
+            border: '1px solid #e5e7eb'
+        }}>
+            {/* Header */}
+            <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                style={{
+                    width: '100%',
+                    padding: '0.75rem 1rem',
+                    background: 'transparent',
+                    border: 'none',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    fontSize: '0.875rem',
+                    fontWeight: '600',
+                    color: '#374151'
+                }}
+            >
+                <span>📰 News & Updates</span>
+                <span style={{ fontSize: '0.75rem', color: '#9ca3af' }}>
+                    {isExpanded ? '▼' : '▶'}
+                </span>
+            </button>
+
+            {/* Content */}
+            {isExpanded && (
+                <div style={{
+                    padding: '0 1rem 1rem 1rem',
+                    borderTop: '1px solid #e5e7eb'
+                }}>
+                    {news.map((item, index) => (
+                        <div
+                            key={item.id}
+                            style={{
+                                padding: '0.75rem 0',
+                                borderBottom: index < news.length - 1 ? '1px solid #e5e7eb' : 'none'
+                            }}
+                        >
+                            {/* Title */}
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '0.5rem',
+                                marginBottom: '0.25rem'
+                            }}>
+                                {item.featured && (
+                                    <span style={{
+                                        background: '#fef3c7',
+                                        color: '#92400e',
+                                        padding: '0.125rem 0.375rem',
+                                        borderRadius: '0.25rem',
+                                        fontSize: '0.625rem',
+                                        fontWeight: '600'
+                                    }}>
+                                        ⭐ FEATURED
+                                    </span>
+                                )}
+                                <h3 style={{
+                                    margin: 0,
+                                    fontSize: '0.875rem',
+                                    fontWeight: '600',
+                                    color: '#111827'
+                                }}>
+                                    {getLocalizedValue(item.title, locale)}
+                                </h3>
+                            </div>
+
+                            {/* Metadata */}
+                            <div style={{
+                                fontSize: '0.75rem',
+                                color: '#6b7280',
+                                marginBottom: '0.5rem',
+                                display: 'flex',
+                                gap: '0.5rem',
+                                flexWrap: 'wrap'
+                            }}>
+                                <span>
+                                    {new Date(item.publishedAt).toLocaleDateString('de-DE', {
+                                        day: '2-digit',
+                                        month: '2-digit',
+                                        year: 'numeric'
+                                    })}
+                                </span>
+                                {item.author && (
+                                    <>
+                                        <span>•</span>
+                                        <span>by {item.author}</span>
+                                    </>
+                                )}
+                                {item.special && (
+                                    <>
+                                        <span>•</span>
+                                        <Link
+                                            href={`/special/${getLocalizedValue(item.special.name, locale)}`}
+                                            style={{
+                                                color: '#be185d',
+                                                textDecoration: 'none',
+                                                fontWeight: '500'
+                                            }}
+                                        >
+                                            ★ {getLocalizedValue(item.special.name, locale)}
+                                        </Link>
+                                    </>
+                                )}
+                            </div>
+
+                            {/* Content */}
+                            <div
+                                className="news-content"
+                                style={{
+                                    fontSize: '0.875rem',
+                                    color: '#374151',
+                                    lineHeight: '1.5'
+                                }}
+                            >
+                                <ReactMarkdown
+                                    components={{
+                                        p: ({ children }) => <p style={{ margin: '0.5rem 0' }}>{children}</p>,
+                                        a: ({ children, href }) => (
+                                            <a
+                                                href={href}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                style={{ color: '#4f46e5', textDecoration: 'underline' }}
+                                            >
+                                                {children}
+                                            </a>
+                                        ),
+                                        strong: ({ children }) => <strong style={{ fontWeight: '600' }}>{children}</strong>,
+                                        em: ({ children }) => <em style={{ fontStyle: 'italic' }}>{children}</em>,
+                                        ul: ({ children }) => <ul style={{ margin: '0.5rem 0', paddingLeft: '1.5rem' }}>{children}</ul>,
+                                        ol: ({ children }) => <ol style={{ margin: '0.5rem 0', paddingLeft: '1.5rem' }}>{children}</ol>,
+                                        li: ({ children }) => <li style={{ margin: '0.25rem 0' }}>{children}</li>
+                                    }}
+                                >
+                                    {getLocalizedValue(item.content, locale)}
+                                </ReactMarkdown>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

components/OnboardingTour.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { driver } from 'driver.js';
+import 'driver.js/dist/driver.css';
+
+export default function OnboardingTour() {
+    const t = useTranslations('OnboardingTour');
+    
+    useEffect(() => {
+        const hasCompletedOnboarding = localStorage.getItem('hoerdle_onboarding_completed');
+
+        if (hasCompletedOnboarding) {
+            return;
+        }
+
+        const driverObj = driver({
+            showProgress: true,
+            animate: true,
+            allowClose: true,
+            doneBtnText: t('done'),
+            nextBtnText: t('next'),
+            prevBtnText: t('previous'),
+            onDestroyed: () => {
+                localStorage.setItem('hoerdle_onboarding_completed', 'true');
+            },
+            steps: [
+                {
+                    element: '#tour-genres',
+                    popover: {
+                        title: t('genresSpecials'),
+                        description: t('genresSpecialsDescription'),
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-news',
+                    popover: {
+                        title: t('news'),
+                        description: t('newsDescription'),
+                        side: 'top',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-title',
+                    popover: {
+                        title: t('hoerdle'),
+                        description: t('hoerdleDescription'),
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-status',
+                    popover: {
+                        title: t('attempts'),
+                        description: t('attemptsDescription'),
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-score',
+                    popover: {
+                        title: t('score'),
+                        description: t('scoreDescription'),
+                        side: 'bottom',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-player',
+                    popover: {
+                        title: t('player'),
+                        description: t('playerDescription'),
+                        side: 'top',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-input',
+                    popover: {
+                        title: t('input'),
+                        description: t('inputDescription'),
+                        side: 'top',
+                        align: 'start'
+                    }
+                },
+                {
+                    element: '#tour-controls',
+                    popover: {
+                        title: t('controls'),
+                        description: t('controlsDescription'),
+                        side: 'top',
+                        align: 'start'
+                    }
+                }
+            ]
+        });
+
+        // Small delay to ensure DOM is ready
+        setTimeout(() => {
+            driverObj.drive();
+        }, 1000);
+
+    }, [t]);
+
+    return null;
+}

components/Statistics.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { Statistics as StatsType } from '../lib/gameState';
 
 interface StatisticsProps {
@@ -18,6 +19,7 @@ const BADGES = {
 };
 
 export default function Statistics({ statistics }: StatisticsProps) {
+    const t = useTranslations('Statistics');
     const total =
         statistics.solvedIn1 +
         statistics.solvedIn2 +
@@ -36,19 +38,19 @@ export default function Statistics({ statistics }: StatisticsProps) {
         { attempts: 5, count: statistics.solvedIn5, badge: BADGES[5] },
         { attempts: 6, count: statistics.solvedIn6, badge: BADGES[6] },
         { attempts: 7, count: statistics.solvedIn7, badge: BADGES[7] },
-        { attempts: 'Failed', count: statistics.failed, badge: BADGES.failed },
+        { attempts: t('failed'), count: statistics.failed, badge: BADGES.failed },
     ];
 
     return (
         <div className="statistics-container">
-            <h3 className="statistics-title">Your Statistics</h3>
+            <h3 className="statistics-title">{t('yourStatistics')}</h3>
-            <p className="statistics-total">Total puzzles: {total}</p>
+            <p className="statistics-total">{t('totalPuzzles')}: {total}</p>
             <div className="statistics-grid">
                 {stats.map((stat, index) => (
                     <div key={index} className="stat-item">
                         <div className="stat-badge">{stat.badge}</div>
                         <div className="stat-label">
-                            {typeof stat.attempts === 'number' ? `${stat.attempts} try` : stat.attempts}
+                            {typeof stat.attempts === 'number' ? `${stat.attempts} ${t('try')}` : stat.attempts}
                         </div>
                         <div className="stat-count">{stat.count}</div>
                     </div>

docker-compose.example.yml

@@ -4,6 +4,19 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_APP_NAME: ${NEXT_PUBLIC_APP_NAME}
+        NEXT_PUBLIC_APP_DESCRIPTION: ${NEXT_PUBLIC_APP_DESCRIPTION}
+        NEXT_PUBLIC_DOMAIN: ${NEXT_PUBLIC_DOMAIN}
+        NEXT_PUBLIC_TWITTER_HANDLE: ${NEXT_PUBLIC_TWITTER_HANDLE}
+        NEXT_PUBLIC_PLAUSIBLE_DOMAIN: ${NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
+        NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC: ${NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC}
+        NEXT_PUBLIC_THEME_COLOR: ${NEXT_PUBLIC_THEME_COLOR}
+        NEXT_PUBLIC_BACKGROUND_COLOR: ${NEXT_PUBLIC_BACKGROUND_COLOR}
+        NEXT_PUBLIC_CREDITS_ENABLED: ${NEXT_PUBLIC_CREDITS_ENABLED}
+        NEXT_PUBLIC_CREDITS_TEXT: ${NEXT_PUBLIC_CREDITS_TEXT}
+        NEXT_PUBLIC_CREDITS_LINK_TEXT: ${NEXT_PUBLIC_CREDITS_LINK_TEXT}
+        NEXT_PUBLIC_CREDITS_LINK_URL: ${NEXT_PUBLIC_CREDITS_LINK_URL}
     user: root
     restart: always
     ports:

i18n/request.ts

@@ -0,0 +1,20 @@
+import { getRequestConfig } from 'next-intl/server';
+
+const locales = ['en', 'de'] as const;
+
+export default getRequestConfig(async ({ requestLocale }) => {
+    // `requestLocale` kommt von next-intl (z.B. aus dem [locale]-Segment oder Fallback)
+    let locale = await requestLocale;
+
+    console.log('[i18n/request] incoming requestLocale:', locale);
+
+    if (!locale || !locales.includes(locale as (typeof locales)[number])) {
+        locale = 'de';
+        console.log('[i18n/request] falling back to default locale:', locale);
+    }
+
+    return {
+        locale,
+        messages: (await import(`../messages/${locale}.json`)).default
+    };
+});

lib/config.ts

@@ -0,0 +1,18 @@
+export const config = {
+    appName: process.env.NEXT_PUBLIC_APP_NAME || 'Hördle',
+    appDescription: process.env.NEXT_PUBLIC_APP_DESCRIPTION || 'Daily music guessing game - Guess the song from short audio clips',
+    domain: process.env.NEXT_PUBLIC_DOMAIN || 'hoerdle.elpatron.me',
+    twitterHandle: process.env.NEXT_PUBLIC_TWITTER_HANDLE || '@elpatron',
+    plausibleDomain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN || 'hoerdle.elpatron.me',
+    plausibleScriptSrc: process.env.NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC || 'https://plausible.elpatron.me/js/script.js',
+    colors: {
+        themeColor: process.env.NEXT_PUBLIC_THEME_COLOR || '#000000',
+        backgroundColor: process.env.NEXT_PUBLIC_BACKGROUND_COLOR || '#ffffff',
+    },
+    credits: {
+        enabled: process.env.NEXT_PUBLIC_CREDITS_ENABLED !== 'false',
+        text: process.env.NEXT_PUBLIC_CREDITS_TEXT || 'Vibe coded with ☕ and 🍺 by',
+        linkText: process.env.NEXT_PUBLIC_CREDITS_LINK_TEXT || '@elpatron@digitalcourage.social',
+        linkUrl: process.env.NEXT_PUBLIC_CREDITS_LINK_URL || 'https://digitalcourage.social/@elpatron',
+    }
+};

lib/dailyPuzzle.ts

@@ -1,22 +1,15 @@
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient, Genre, Special } from '@prisma/client';
 import { getTodayISOString } from './dateUtils';
 
 const prisma = new PrismaClient();
 
-export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
+export async function getOrCreateDailyPuzzle(genre: Genre | null = null) {
     try {
         const today = getTodayISOString();
         let genreId: number | null = null;
 
-        if (genreName) {
+        if (genre) {
-            const genre = await prisma.genre.findUnique({
+            genreId = genre.id;
-                where: { name: genreName }
-            });
-            if (genre) {
-                genreId = genre.id;
-            } else {
-                return null; // Genre not found
-            }
         }
 
         let dailyPuzzle = await prisma.dailyPuzzle.findFirst({
@@ -27,8 +20,6 @@ export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
             include: { song: true },
         });
 
-
-
         if (!dailyPuzzle) {
             // Get songs available for this genre
             const whereClause = genreId
@@ -45,7 +36,7 @@ export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
             });
 
             if (allSongs.length === 0) {
-                console.log(`[Daily Puzzle] No songs available for genre: ${genreName || 'Global'}`);
+                console.log(`[Daily Puzzle] No songs available for genre: ${genre ? JSON.stringify(genre.name) : 'Global'}`);
                 return null;
             }
 
@@ -80,7 +71,7 @@ export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
                     },
                     include: { song: true },
                 });
-                console.log(`[Daily Puzzle] Created new puzzle for ${today} (Genre: ${genreName || 'Global'}) with song: ${selectedSong.title}`);
+                console.log(`[Daily Puzzle] Created new puzzle for ${today} (Genre: ${genre ? JSON.stringify(genre.name) : 'Global'}) with song: ${selectedSong.title}`);
             } catch (e) {
                 // Handle race condition
                 console.log('[Daily Puzzle] Creation failed, trying to fetch again (likely race condition)');
@@ -119,7 +110,7 @@ export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
             artist: dailyPuzzle.song.artist,
             coverImage: dailyPuzzle.song.coverImage ? `/uploads/covers/${dailyPuzzle.song.coverImage}` : null,
             releaseYear: dailyPuzzle.song.releaseYear,
-            genre: genreName
+            genre: genre ? genre.name : null
         };
 
     } catch (error) {
@@ -128,16 +119,10 @@ export async function getOrCreateDailyPuzzle(genreName: string | null = null) {
     }
 }
 
-export async function getOrCreateSpecialPuzzle(specialName: string) {
+export async function getOrCreateSpecialPuzzle(special: Special) {
     try {
         const today = getTodayISOString();
 
-        const special = await prisma.special.findUnique({
-            where: { name: specialName }
-        });
-
-        if (!special) return null;
-
         let dailyPuzzle = await prisma.dailyPuzzle.findFirst({
             where: {
                 date: today,
@@ -232,7 +217,7 @@ export async function getOrCreateSpecialPuzzle(specialName: string) {
             artist: dailyPuzzle.song.artist,
             coverImage: dailyPuzzle.song.coverImage ? `/uploads/covers/${dailyPuzzle.song.coverImage}` : null,
             releaseYear: dailyPuzzle.song.releaseYear,
-            special: specialName,
+            special: special.name,
             maxAttempts: special.maxAttempts,
             unlockSteps: JSON.parse(special.unlockSteps),
             startTime: specialSong?.startTime || 0

lib/i18n.ts

@@ -0,0 +1,41 @@
+export type LocalizedString = {
+    [key: string]: string;
+};
+
+export function getLocalizedValue(
+    value: any,
+    locale: string,
+    fallback: string = ''
+): string {
+    if (!value) return fallback;
+
+    // If it's already a string, return it (backward compatibility or simple values)
+    if (typeof value === 'string') return value;
+
+    // If it's an object, try to get the requested locale
+    if (typeof value === 'object') {
+        if (value[locale]) return value[locale];
+
+        // Fallback to 'de'
+        if (value['de']) return value['de'];
+
+        // Fallback to 'en'
+        if (value['en']) return value['en'];
+
+        // Fallback to first key
+        const keys = Object.keys(value);
+        if (keys.length > 0) return value[keys[0]];
+    }
+
+    return fallback;
+}
+
+export function createLocalizedObject(
+    de: string,
+    en?: string
+): LocalizedString {
+    return {
+        de: de.trim(),
+        en: (en || de).trim()
+    };
+}

lib/navigation.ts

@@ -0,0 +1,9 @@
+import { createNavigation } from 'next-intl/navigation';
+
+export const locales = ['de', 'en'] as const;
+export const localePrefix = 'always'; // Default
+
+export const { Link, redirect, usePathname, useRouter } = createNavigation({
+    locales,
+    localePrefix
+});

messages/de.json

@@ -0,0 +1,108 @@
+{
+    "Common": {
+        "loading": "Laden...",
+        "error": "Ein Fehler ist aufgetreten",
+        "save": "Speichern",
+        "cancel": "Abbrechen",
+        "delete": "Löschen",
+        "edit": "Bearbeiten",
+        "back": "Zurück"
+    },
+    "Navigation": {
+        "home": "Startseite",
+        "admin": "Admin",
+        "global": "Global",
+        "news": "Neuigkeiten"
+    },
+    "Game": {
+        "play": "Abspielen",
+        "pause": "Pause",
+        "skip": "Überspringen",
+        "submit": "Raten",
+        "next": "Nächstes",
+        "won": "Gewonnen!",
+        "lost": "Verloren",
+        "correct": "Richtig!",
+        "wrong": "Falsch",
+        "guessPlaceholder": "Lied oder Interpret eingeben...",
+        "attempts": "Versuche",
+        "share": "Teilen",
+        "nextPuzzle": "Nächstes Rätsel in",
+        "noPuzzleAvailable": "Kein Rätsel verfügbar",
+        "noPuzzleDescription": "Tägliches Rätsel konnte nicht generiert werden.",
+        "noPuzzleGenre": "Bitte stelle sicher, dass Songs in der Datenbank vorhanden sind",
+        "goToAdmin": "Zum Admin-Dashboard gehen",
+        "loadingState": "Lade Status...",
+        "attempt": "Versuch",
+        "unlocked": "freigeschaltet",
+        "start": "Start",
+        "skipWithBonus": "Überspringen (+{seconds}s)",
+        "solveGiveUp": "Lösen (Aufgeben)",
+        "comeBackTomorrow": "Komm morgen zurück für ein neues Lied.",
+        "theSongWas": "Das Lied war:",
+        "score": "Punkte",
+        "scoreBreakdown": "Punkteaufschlüsselung",
+        "albumCover": "Album-Cover",
+        "released": "Veröffentlicht",
+        "yourBrowserDoesNotSupport": "Ihr Browser unterstützt das Audio-Element nicht.",
+        "thanksForRating": "Danke für die Bewertung!",
+        "rateThisPuzzle": "Bewerte dieses Rätsel:",
+        "shared": "✓ Geteilt!",
+        "copied": "✓ Kopiert!",
+        "shareFailed": "✗ Fehlgeschlagen",
+        "bonusRound": "Bonus-Runde!",
+        "guessReleaseYear": "Errate das Veröffentlichungsjahr für",
+        "points": "Punkte",
+        "skipBonus": "Bonus überspringen",
+        "notQuite": "Nicht ganz!",
+        "youGuessed": "Du hast geraten",
+        "actuallyReleasedIn": "Tatsächlich veröffentlicht in",
+        "skipped": "Übersprungen",
+        "gameOverPlaceholder": "Spiel beendet",
+        "knowItSearch": "Weißt du es? Suche nach Interpret / Titel",
+        "special": "Special",
+        "genre": "Genre"
+    },
+    "Statistics": {
+        "yourStatistics": "Deine Statistiken",
+        "totalPuzzles": "Gesamte Rätsel",
+        "try": "Versuch",
+        "failed": "Verloren"
+    },
+    "OnboardingTour": {
+        "done": "Fertig",
+        "next": "Weiter",
+        "previous": "Zurück",
+        "genresSpecials": "Genres & Specials",
+        "genresSpecialsDescription": "Wähle hier ein bestimmtes Genre oder ein kuratiertes Special-Event.",
+        "news": "Neuigkeiten",
+        "newsDescription": "Bleibe auf dem Laufenden mit den neuesten Nachrichten und Ankündigungen.",
+        "hoerdle": "Hördle",
+        "hoerdleDescription": "Das ist das tägliche Rätsel. Ein neues Lied jeden Tag pro Genre.",
+        "attempts": "Versuche",
+        "attemptsDescription": "Du hast eine begrenzte Anzahl von Versuchen, um das Lied zu erraten.",
+        "score": "Punkte",
+        "scoreDescription": "Deine aktuelle Punktzahl. Versuche sie hoch zu halten!",
+        "player": "Player",
+        "playerDescription": "Höre dir den Ausschnitt an. Jedes zusätzliche Abspielen reduziert deine mögliche Punktzahl.",
+        "input": "Eingabe",
+        "inputDescription": "Gib hier deine Vermutung ein. Suche nach Interpret oder Titel.",
+        "controls": "Steuerung",
+        "controlsDescription": "Starte die Musik oder überspringe zum nächsten Ausschnitt, wenn du feststeckst."
+    },
+    "InstallPrompt": {
+        "installApp": "Hördle App installieren",
+        "installDescription": "Installiere die App für eine bessere Erfahrung und schnellen Zugriff!",
+        "iosInstructions": "Tippe auf",
+        "iosShare": "Teilen",
+        "iosThen": "dann \"Zum Home-Bildschirm hinzufügen\"",
+        "installButton": "App installieren"
+    },
+    "Home": {
+        "welcome": "Willkommen bei Hördle",
+        "subtitle": "Errate den Song anhand kurzer Ausschnitte",
+        "globalTooltip": "Ein zufälliger Song aus der gesamten Sammlung",
+        "comingSoon": "Demnächst",
+        "curatedBy": "Kuratiert von"
+    }
+}

messages/en.json

@@ -0,0 +1,108 @@
+{
+    "Common": {
+        "loading": "Loading...",
+        "error": "An error occurred",
+        "save": "Save",
+        "cancel": "Cancel",
+        "delete": "Delete",
+        "edit": "Edit",
+        "back": "Back"
+    },
+    "Navigation": {
+        "home": "Home",
+        "admin": "Admin",
+        "global": "Global",
+        "news": "News"
+    },
+    "Game": {
+        "play": "Play",
+        "pause": "Pause",
+        "skip": "Skip",
+        "submit": "Guess",
+        "next": "Next",
+        "won": "You won!",
+        "lost": "Game Over",
+        "correct": "Correct!",
+        "wrong": "Wrong",
+        "guessPlaceholder": "Type song or artist...",
+        "attempts": "Attempts",
+        "share": "Share",
+        "nextPuzzle": "Next puzzle in",
+        "noPuzzleAvailable": "No Puzzle Available",
+        "noPuzzleDescription": "Could not generate a daily puzzle.",
+        "noPuzzleGenre": "Please ensure there are songs in the database",
+        "goToAdmin": "Go to Admin Dashboard",
+        "loadingState": "Loading state...",
+        "attempt": "Attempt",
+        "unlocked": "unlocked",
+        "start": "Start",
+        "skipWithBonus": "Skip (+{seconds}s)",
+        "solveGiveUp": "Solve (Give Up)",
+        "comeBackTomorrow": "Come back tomorrow for a new song.",
+        "theSongWas": "The song was:",
+        "score": "Score",
+        "scoreBreakdown": "Score Breakdown",
+        "albumCover": "Album Cover",
+        "released": "Released",
+        "yourBrowserDoesNotSupport": "Your browser does not support the audio element.",
+        "thanksForRating": "Thanks for rating!",
+        "rateThisPuzzle": "Rate this puzzle:",
+        "shared": "✓ Shared!",
+        "copied": "✓ Copied!",
+        "shareFailed": "✗ Failed",
+        "bonusRound": "Bonus Round!",
+        "guessReleaseYear": "Guess the release year for",
+        "points": "points",
+        "skipBonus": "Skip Bonus",
+        "notQuite": "Not quite!",
+        "youGuessed": "You guessed",
+        "actuallyReleasedIn": "Actually released in",
+        "skipped": "Skipped",
+        "gameOverPlaceholder": "Game Over",
+        "knowItSearch": "Know it? Search for the artist / title",
+        "special": "Special",
+        "genre": "Genre"
+    },
+    "Statistics": {
+        "yourStatistics": "Your Statistics",
+        "totalPuzzles": "Total puzzles",
+        "try": "try",
+        "failed": "Failed"
+    },
+    "OnboardingTour": {
+        "done": "Done",
+        "next": "Next",
+        "previous": "Previous",
+        "genresSpecials": "Genres & Specials",
+        "genresSpecialsDescription": "Choose a specific genre or a curated special event here.",
+        "news": "News",
+        "newsDescription": "Stay updated with the latest news and announcements.",
+        "hoerdle": "Hördle",
+        "hoerdleDescription": "This is the daily puzzle. One new song every day per genre.",
+        "attempts": "Attempts",
+        "attemptsDescription": "You have a limited number of attempts to guess the song.",
+        "score": "Score",
+        "scoreDescription": "Your current score. Try to keep it high!",
+        "player": "Player",
+        "playerDescription": "Listen to the snippet. Each additional play reduces your potential score.",
+        "input": "Input",
+        "inputDescription": "Type your guess here. Search for artist or title.",
+        "controls": "Controls",
+        "controlsDescription": "Start the music or skip to the next snippet if you're stuck."
+    },
+    "InstallPrompt": {
+        "installApp": "Install Hördle App",
+        "installDescription": "Install the app for a better experience and quick access!",
+        "iosInstructions": "Tap",
+        "iosShare": "share",
+        "iosThen": "then \"Add to Home Screen\"",
+        "installButton": "Install App"
+    },
+    "Home": {
+        "welcome": "Welcome to Hördle",
+        "subtitle": "Guess the song from short snippets",
+        "globalTooltip": "A random song from the entire collection",
+        "comingSoon": "Coming soon",
+        "curatedBy": "Curated by"
+    }
+}

middleware.ts

@@ -1,35 +1,33 @@
-import { NextResponse } from 'next/server';
+import createMiddleware from 'next-intl/middleware';
 import type { NextRequest } from 'next/server';
 
-export function middleware(request: NextRequest) {
+const i18nMiddleware = createMiddleware({
-    const response = NextResponse.next();
+    locales: ['de', 'en'],
+    defaultLocale: 'de',
+    // Wir nutzen überall Locale-Präfixe (`/de`, `/en`)
+    localePrefix: 'always'
+});
 
-    // Security Headers
+export default function middleware(request: NextRequest) {
+    // 1. i18n-Routing
+    const response = i18nMiddleware(request);
+
+    // 2. Security-Header ergänzen
     const headers = response.headers;
 
-    // Prevent clickjacking
     headers.set('X-Frame-Options', 'SAMEORIGIN');
-
-    // XSS Protection (legacy but still useful)
     headers.set('X-XSS-Protection', '1; mode=block');
-
-    // Prevent MIME type sniffing
     headers.set('X-Content-Type-Options', 'nosniff');
-
-    // Referrer Policy
     headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
-
-    // Permissions Policy (restrict features)
     headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
 
-    // Content Security Policy
     const csp = [
         "default-src 'self'",
-        "script-src 'self' 'unsafe-inline' 'unsafe-eval'", // Next.js requires unsafe-inline/eval
+        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://plausible.elpatron.me",
-        "style-src 'self' 'unsafe-inline'", // Allow inline styles
+        "style-src 'self' 'unsafe-inline'",
         "img-src 'self' data: blob:",
         "font-src 'self' data:",
-        "connect-src 'self' https://openrouter.ai https://gotify.example.com",
+        "connect-src 'self' https://openrouter.ai https://gotify.example.com https://plausible.elpatron.me",
         "media-src 'self' blob:",
         "frame-ancestors 'self'",
     ].join('; ');
@@ -38,15 +36,8 @@ export function middleware(request: NextRequest) {
     return response;
 }
 
-// Apply middleware to all routes
 export const config = {
-    matcher: [
+    // Empfohlener Matcher aus der next-intl Doku:
-        /*
+    // alle Routen außer _next, API und statischen Dateien
-         * Match all request paths except for the ones starting with:
+    matcher: ['/((?!api|_next|.*\\..*).*)']
-         * - _next/static (static files)
-         * - _next/image (image optimization files)
-         * - favicon.ico (favicon file)
-         */
-        '/((?!_next/static|_next/image|favicon.ico).*)',
-    ],
 };

next.config.ts

@@ -1,5 +1,8 @@
+import createNextIntlPlugin from 'next-intl/plugin';
 import type { NextConfig } from "next";
 
+const withNextIntl = createNextIntlPlugin();
+
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
@@ -36,4 +39,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoerdle",
-  "version": "0.1.0",
+  "version": "0.1.0.15",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,11 +11,14 @@
   "dependencies": {
     "@prisma/client": "^6.19.0",
     "bcryptjs": "^3.0.3",
+    "driver.js": "^1.4.0",
     "music-metadata": "^11.10.2",
     "next": "16.0.3",
+    "next-intl": "^4.5.6",
     "prisma": "^6.19.0",
     "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react-dom": "19.2.0",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.6",

prisma/migrations/20251125101602_add_news_model/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "News" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "author" TEXT,
+    "publishedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "featured" BOOLEAN NOT NULL DEFAULT false,
+    "specialId" INTEGER,
+    CONSTRAINT "News_specialId_fkey" FOREIGN KEY ("specialId") REFERENCES "Special" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE INDEX "News_publishedAt_idx" ON "News"("publishedAt");

prisma/migrations/20251128131405_add_i18n_columns/migration.sql

@@ -0,0 +1,11 @@
+-- AlterTable
+ALTER TABLE "Genre" ADD COLUMN "nameI18n" JSONB;
+ALTER TABLE "Genre" ADD COLUMN "subtitleI18n" JSONB;
+
+-- AlterTable
+ALTER TABLE "News" ADD COLUMN "contentI18n" JSONB;
+ALTER TABLE "News" ADD COLUMN "titleI18n" JSONB;
+
+-- AlterTable
+ALTER TABLE "Special" ADD COLUMN "nameI18n" JSONB;
+ALTER TABLE "Special" ADD COLUMN "subtitleI18n" JSONB;

prisma/migrations/20251128132806_switch_to_json_columns/migration.sql

@@ -0,0 +1,60 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `nameI18n` on the `Genre` table. All the data in the column will be lost.
+  - You are about to drop the column `subtitleI18n` on the `Genre` table. All the data in the column will be lost.
+  - You are about to alter the column `name` on the `Genre` table. The data in that column could be lost. The data in that column will be cast from `String` to `Json`.
+  - You are about to alter the column `subtitle` on the `Genre` table. The data in that column could be lost. The data in that column will be cast from `String` to `Json`.
+  - You are about to drop the column `contentI18n` on the `News` table. All the data in the column will be lost.
+  - You are about to drop the column `titleI18n` on the `News` table. All the data in the column will be lost.
+  - You are about to alter the column `content` on the `News` table. The data in that column could be lost. The data in that column will be cast from `String` to `Json`.
+  - You are about to alter the column `title` on the `News` table. The data in that column could be lost. The data in that column will be cast from `String` to `Json`.
+  - You are about to drop the column `nameI18n` on the `Special` table. All the data in the column will be lost.
+  - You are about to drop the column `subtitleI18n` on the `Special` table. All the data in the column will be lost.
+  - You are about to alter the column `name` on the `Special` table. The data in that column could be lost. The data in that column will be cast from `String` to `Json`.
+  - You are about to alter the column `subtitle` on the `Special` table. The data in that column could be lost. The data in that column will be cast from `String` to `Json`.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Genre" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" JSONB NOT NULL,
+    "subtitle" JSONB,
+    "active" BOOLEAN NOT NULL DEFAULT true
+);
+INSERT INTO "new_Genre" ("active", "id", "name", "subtitle") SELECT "active", "id", "nameI18n", "subtitleI18n" FROM "Genre";
+DROP TABLE "Genre";
+ALTER TABLE "new_Genre" RENAME TO "Genre";
+CREATE TABLE "new_News" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "title" JSONB NOT NULL,
+    "content" JSONB NOT NULL,
+    "author" TEXT,
+    "publishedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "featured" BOOLEAN NOT NULL DEFAULT false,
+    "specialId" INTEGER,
+    CONSTRAINT "News_specialId_fkey" FOREIGN KEY ("specialId") REFERENCES "Special" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+INSERT INTO "new_News" ("author", "content", "featured", "id", "publishedAt", "specialId", "title", "updatedAt") SELECT "author", "contentI18n", "featured", "id", "publishedAt", "specialId", "titleI18n", "updatedAt" FROM "News";
+DROP TABLE "News";
+ALTER TABLE "new_News" RENAME TO "News";
+CREATE INDEX "News_publishedAt_idx" ON "News"("publishedAt");
+CREATE TABLE "new_Special" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" JSONB NOT NULL,
+    "subtitle" JSONB,
+    "maxAttempts" INTEGER NOT NULL DEFAULT 7,
+    "unlockSteps" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "launchDate" DATETIME,
+    "endDate" DATETIME,
+    "curator" TEXT
+);
+INSERT INTO "new_Special" ("createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps") SELECT "createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "nameI18n", "subtitleI18n", "unlockSteps" FROM "Special";
+DROP TABLE "Special";
+ALTER TABLE "new_Special" RENAME TO "Special";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/schema.prisma

@@ -28,8 +28,8 @@ model Song {
 
 model Genre {
   id    Int    @id @default(autoincrement())
-  name  String @unique
+  name  Json   // Multilingual: { "de": "Rock", "en": "Rock" }
-  subtitle String?
+  subtitle Json? // Multilingual
   active   Boolean @default(true)
   songs Song[]
   dailyPuzzles DailyPuzzle[]
@@ -37,8 +37,8 @@ model Genre {
 
 model Special {
   id          Int           @id @default(autoincrement())
-  name        String        @unique
+  name        Json          // Multilingual
-  subtitle    String?
+  subtitle    Json?         // Multilingual
   maxAttempts Int           @default(7)
   unlockSteps String // JSON string: e.g. "[2, 4, 7, 11, 16, 30]"
   createdAt   DateTime      @default(now())
@@ -47,6 +47,7 @@ model Special {
   curator     String?
   songs       SpecialSong[]
   puzzles     DailyPuzzle[]
+  news        News[]
 }
 
 model SpecialSong {
@@ -73,3 +74,17 @@ model DailyPuzzle {
 
   @@unique([date, genreId, specialId])
 }
+
+model News {
+  id          Int      @id @default(autoincrement())
+  title       Json     // Multilingual
+  content     Json     // Multilingual
+  author      String?  // Optional: curator/admin name
+  publishedAt DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  featured    Boolean  @default(false) // Highlight important news
+  specialId   Int?     // Optional: link to a special
+  special     Special? @relation(fields: [specialId], references: [id], onDelete: SetNull)
+  
+  @@index([publishedAt])
+}

scripts/deploy.sh

@@ -50,6 +50,10 @@ fi
 echo "📥 Pulling latest changes from git..."
 git pull
 
+# Fetch all tags
+echo "🏷️  Fetching git tags..."
+git fetch --tags
+
 # Build new image in background (doesn't stop running container)
 echo "🔨 Building new Docker image (this runs while app is still online)..."
 docker compose build

scripts/docker-entrypoint.sh

@@ -1,6 +1,12 @@
 #!/bin/sh
 set -e
 
+# Export version if available
+if [ -f /app/version.txt ]; then
+    export APP_VERSION=$(cat /app/version.txt)
+    echo "App version: $APP_VERSION"
+fi
+
 echo "Starting deployment..."
 
 # Run migrations

scripts/restore_songs.ts

@@ -43,10 +43,22 @@ async function restoreSongs() {
                     // Simple normalization
                     const normalizedGenre = genreName.trim();
 
-                    // Upsert genre (we can't use upsert easily with connect, so find or create first)
+                    // Find genre by checking all genres (name is now JSON)
-                    let genre = await prisma.genre.findUnique({ where: { name: normalizedGenre } });
+                    const allGenres = await prisma.genre.findMany();
+                    let genre = allGenres.find(g => {
+                        const name = g.name as any;
+                        return (typeof name === 'string' && name === normalizedGenre) ||
+                            (typeof name === 'object' && (name.de === normalizedGenre || name.en === normalizedGenre));
+                    });
+
                     if (!genre) {
-                        genre = await prisma.genre.create({ data: { name: normalizedGenre } });
+                        // Create with JSON structure
+                        genre = await prisma.genre.create({
+                            data: {
+                                name: { de: normalizedGenre, en: normalizedGenre },
+                                active: true
+                            }
+                        });
                         console.log(`Created genre: ${normalizedGenre}`);
                     }
                     genreConnect.push({ id: genre.id });

scripts/verify-i18n-migration.ts

@@ -0,0 +1,31 @@
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+async function main() {
+    console.log('Verifying i18n migration...');
+
+    const genre = await prisma.genre.findFirst();
+    if (!genre) {
+        console.log('No genres found to verify.');
+        return;
+    }
+
+    console.log('First genre:', JSON.stringify(genre, null, 2));
+
+    if (typeof genre.name === 'object' && genre.name !== null && 'de' in (genre.name as any)) {
+        console.log('SUCCESS: Genre name is a JSON object with "de" key.');
+    } else {
+        console.error('FAILURE: Genre name is NOT in expected format:', genre.name);
+        process.exit(1);
+    }
+}
+
+main()
+    .catch((e) => {
+        console.error(e);
+        process.exit(1);
+    })
+    .finally(async () => {
+        await prisma.$disconnect();
+    });