diff --git a/games/mana-games/CLAUDE.md b/games/mana-games/CLAUDE.md
index 9620552cc..95c14bc9f 100644
--- a/games/mana-games/CLAUDE.md
+++ b/games/mana-games/CLAUDE.md
@@ -7,32 +7,55 @@ AI-powered browser games platform mit 22+ Spielen und KI-Spielgenerierung.
 ```
 games/mana-games/
 ├── apps/
-│   ├── web/              # Astro PWA (@mana-games/web)
+│   ├── web/              # SvelteKit Web-App (@mana-games/web)
 │   │   ├── src/
-│   │   │   ├── pages/    # Astro-Seiten
-│   │   │   ├── layouts/  # Layout-Komponenten
-│   │   │   ├── components/
-│   │   │   ├── data/     # Spielekatalog (games.ts)
-│   │   │   └── services/ # Stats, etc.
-│   │   └── public/
-│   │       ├── games/    # 22 HTML-Spiele
-│   │       ├── screenshots/
-│   │       └── icons/    # PWA Icons
+│   │   │   ├── routes/   # SvelteKit-Routen
+│   │   │   │   ├── (app)/          # App-Routen mit PillNavigation
+│   │   │   │   │   ├── play/[slug] # Spiel im iframe
+│   │   │   │   │   ├── create/     # AI Game Generator
+│   │   │   │   │   ├── community/  # Community-Spiele
+│   │   │   │   │   ├── stats/      # Spieler-Statistiken
+│   │   │   │   │   └── play-generated/ # Generierte Spiele
+│   │   │   │   └── (auth)/         # Login/Register
+│   │   │   └── lib/
+│   │   │       ├── components/     # Svelte 5 Komponenten
+│   │   │       ├── data/           # Local-first Store, Game-Katalog
+│   │   │       ├── stores/         # Theme, Auth, Navigation
+│   │   │       ├── services/       # Game-Kommunikation (postMessage)
+│   │   │       └── i18n/           # DE + EN Übersetzungen
+│   │   └── static/
+│   │       ├── games/              # 22 HTML-Spiele
+│   │       └── screenshots/        # Game-Thumbnails
+│   ├── web-astro/        # Alte Astro-App (Referenz, zum Löschen)
 │   └── backend/          # NestJS API (@mana-games/backend)
 │       └── src/
-│           ├── game-generator/   # AI-Spielgenerierung (OpenRouter)
+│           ├── game-generator/   # AI-Spielgenerierung (Gemini, Claude, GPT-4)
 │           ├── game-submission/  # Community-Einreichungen (GitHub API)
 │           └── health/
 └── package.json          # Root (mana-games)
 ```
 
+## Tech Stack
+
+| Aspekt | Technologie |
+|--------|-------------|
+| Frontend | SvelteKit 2 + Svelte 5 (Runes) |
+| Styling | Tailwind CSS 4 + @manacore/shared-tailwind |
+| Auth | @manacore/shared-auth (SSO) |
+| PWA | @vite-pwa/sveltekit + @manacore/shared-pwa |
+| State | @manacore/local-store (Dexie.js + sync) |
+| i18n | svelte-i18n (DE + EN) |
+| UI | @manacore/shared-ui (PillNav, AuthGate, etc.) |
+| Theming | @manacore/shared-theme (multi-theme) |
+| Backend | NestJS (AI-Generierung, Community) |
+
 ## Entwicklung
 
 ```bash
 # Alles starten (Web + Backend)
 pnpm mana-games:dev
 
-# Nur Web (Astro)
+# Nur Web (SvelteKit)
 pnpm dev:mana-games:web
 
 # Nur Backend (NestJS)
@@ -43,9 +66,23 @@ pnpm dev:mana-games:app
 ```
 
 **Ports:**
-- Web: http://localhost:4321
+- Web: http://localhost:5210
 - Backend: http://localhost:3011
 
+## Local-First Daten
+
+Stats und generierte Spiele werden in IndexedDB gespeichert (Dexie.js) mit optionalem Sync:
+
+**Collections:**
+- `gameStats` — Highscores, Spielzeit, Spiele pro Game
+- `generatedGames` — Mit KI erstellte Spiele (HTML, Prompt, Modell)
+- `favorites` — Favorisierte Spiele
+
+**Dateien:**
+- `src/lib/data/local-store.ts` — Dexie-Store Definition
+- `src/lib/data/queries.ts` — Reactive Queries (useLiveQuery)
+- `src/lib/data/games.ts` — Statischer Spielekatalog (21 Spiele)
+
 ## API Endpoints
 
 | Endpoint | Method | Beschreibung |
@@ -59,10 +96,10 @@ pnpm dev:mana-games:app
 ```json
 {
   "description": "Ein Snake-Spiel im Neon-Stil",
-  "mode": "create",  // oder "iterate"
+  "mode": "create",
   "model": "gemini-2.0-flash",
-  "originalPrompt": "...",  // nur bei iterate
-  "currentCode": "..."      // nur bei iterate
+  "originalPrompt": "...",
+  "currentCode": "..."
 }
 ```
 
@@ -80,99 +117,43 @@ pnpm dev:mana-games:app
 
 ## Environment Variables
 
-Die Variablen werden zentral in `.env.development` verwaltet:
-
 ```bash
 MANA_GAMES_BACKEND_PORT=3011
-
-# Google Gemini API
 MANA_GAMES_GOOGLE_GENAI_API_KEY=your_key
-
-# Anthropic Claude API
 MANA_GAMES_ANTHROPIC_API_KEY=your_key
-
-# Azure OpenAI API
 MANA_GAMES_AZURE_OPENAI_ENDPOINT=https://your-endpoint.openai.azure.com
 MANA_GAMES_AZURE_OPENAI_API_KEY=your_key
 MANA_GAMES_AZURE_OPENAI_DEPLOYMENT=gpt-4o
-
-# GitHub (für Community-Einreichungen)
 MANA_GAMES_GITHUB_TOKEN=your_token
 MANA_GAMES_GITHUB_OWNER=tillschneider
 MANA_GAMES_GITHUB_REPO=mana-games
 ```
 
-Nach Änderungen: `pnpm setup:env`
-
 ## Spiel hinzufügen
 
-1. HTML-Datei erstellen in `apps/web/public/games/spiel_name.html`
-2. Screenshot in `apps/web/public/screenshots/spiel-name.jpg`
-3. Registrieren in `apps/web/src/data/games.ts`:
-
-```typescript
-{
-  id: '23',
-  title: 'Spiel Titel',
-  description: 'Beschreibung',
-  slug: 'spiel-name',
-  htmlFile: '/games/spiel_name.html',
-  thumbnail: '/screenshots/spiel-name.jpg',
-  tags: ['Arcade', 'Action'],
-  difficulty: 'Mittel',
-  complexity: 'Einfach',
-  controls: 'Pfeiltasten zum Steuern'
-}
-```
+1. HTML-Datei in `apps/web/static/games/spiel_name.html`
+2. Screenshot in `apps/web/static/screenshots/spiel-name.jpg`
+3. Registrieren in `apps/web/src/lib/data/games.ts`
 
 ## Spiel-postMessage Integration
 
 ```javascript
 // Beim Laden
-window.parent.postMessage({
-  type: 'GAME_LOADED',
-  gameId: 'spiel-slug'
-}, '*');
+window.parent.postMessage({ type: 'GAME_LOADED', gameId: 'spiel-slug' }, '*');
 
 // Bei Score-Update
 window.parent.postMessage({
-  type: 'GAME_EVENT',
-  gameId: 'spiel-slug',
-  event: 'SCORE_UPDATE',
-  data: { score: 123 }
+  type: 'GAME_EVENT', gameId: 'spiel-slug',
+  event: 'SCORE_UPDATE', data: { score: 123 }
 }, '*');
 
 // Bei Game Over
 window.parent.postMessage({
-  type: 'GAME_EVENT',
-  gameId: 'spiel-slug',
-  event: 'GAME_OVER',
-  data: { score: 123 }
+  type: 'GAME_EVENT', gameId: 'spiel-slug',
+  event: 'GAME_OVER', data: { score: 123 }
 }, '*');
 ```
 
-## Design
-
-**Farbschema:**
-- Primary Background: `#0a0a0a`
-- Secondary Background: `#1a1a1a`
-- Accent: `#00ff88`
-- Text: `#ffffff`
-- Border: `#2a2a2a`
-
-## PWA
-
-- Manifest: `apps/web/public/manifest.json`
-- Service Worker: `apps/web/public/sw.js`
-- Icons in `apps/web/public/icons/` (72x72 bis 512x512)
-
 ## Spielekatalog
 
-**22 Spiele** in folgenden Genres:
-- Arcade
-- Puzzle
-- Tower Defense
-- Idle/Incremental
-- Jump 'n' Run
-- Action
-- Strategie
+**21 Spiele** in folgenden Genres: Arcade, Puzzle, Tower Defense, Idle/Incremental, Jump 'n' Run, Action, Strategie
diff --git a/games/mana-games/apps/backend/src/main.ts b/games/mana-games/apps/backend/src/main.ts
index 8eab5c819..6c632accb 100644
--- a/games/mana-games/apps/backend/src/main.ts
+++ b/games/mana-games/apps/backend/src/main.ts
@@ -8,9 +8,9 @@ async function bootstrap() {
 	// CORS configuration
 	app.enableCors({
 		origin: [
-			'http://localhost:4321', // Astro dev
+			'http://localhost:5210', // SvelteKit dev
+			'http://localhost:4321', // Legacy Astro dev
 			'http://localhost:3000', // Alternative dev
-			/\.netlify\.app$/, // Legacy Netlify
 		],
 		methods: ['GET', 'POST', 'OPTIONS'],
 		credentials: false,
diff --git a/games/mana-games/apps/web/.env.example b/games/mana-games/apps/web/.env.example
deleted file mode 100644
index b5ff4f29e..000000000
--- a/games/mana-games/apps/web/.env.example
+++ /dev/null
@@ -1,11 +0,0 @@
-# OpenRouter API Key
-# Get your API key from https://openrouter.ai/keys
-OPENROUTER_API_KEY=your_api_key_here
-
-# GitHub API Token (for community submissions)
-# Create a personal access token with 'repo' scope at https://github.com/settings/tokens
-GITHUB_TOKEN=your_github_token_here
-
-# GitHub Repository Settings (optional - defaults to current repo)
-GITHUB_OWNER=your_github_username
-GITHUB_REPO=mana-games
\ No newline at end of file
diff --git a/games/mana-games/apps/web/astro.config.mjs b/games/mana-games/apps/web/astro.config.mjs
deleted file mode 100644
index e762ba5cf..000000000
--- a/games/mana-games/apps/web/astro.config.mjs
+++ /dev/null
@@ -1,5 +0,0 @@
-// @ts-check
-import { defineConfig } from 'astro/config';
-
-// https://astro.build/config
-export default defineConfig({});
diff --git a/games/mana-games/apps/web/eslint.config.js b/games/mana-games/apps/web/eslint.config.js
deleted file mode 100644
index 62349efa0..000000000
--- a/games/mana-games/apps/web/eslint.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// @ts-check
-import {
-	baseConfig,
-	typescriptConfig,
-	svelteConfig,
-	prettierConfig,
-} from '@manacore/eslint-config';
-
-export default [
-	{
-		ignores: [
-			'dist/**',
-			'.svelte-kit/**',
-			'.astro/**',
-			'node_modules/**',
-			'**/stats-integration-template.js',
-		],
-	},
-	...baseConfig,
-	...typescriptConfig,
-	...svelteConfig,
-	...prettierConfig,
-];
diff --git a/games/mana-games/apps/web/package.json b/games/mana-games/apps/web/package.json
index b064a6624..a2f2309f7 100644
--- a/games/mana-games/apps/web/package.json
+++ b/games/mana-games/apps/web/package.json
@@ -1,19 +1,58 @@
 {
 	"name": "@mana-games/web",
-	"version": "1.0.0",
+	"version": "0.1.0",
 	"private": true,
-	"type": "module",
 	"scripts": {
-		"dev": "astro dev",
-		"build": "rm -rf dist && astro build",
-		"preview": "astro preview",
-		"astro": "astro",
-		"lint": "eslint ."
-	},
-	"dependencies": {
-		"astro": "^5.10.1"
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint .",
+		"format": "prettier --write .",
+		"type-check": "svelte-kit sync && svelte-check --threshold error"
 	},
 	"devDependencies": {
-		"sharp": "^0.34.2"
-	}
+		"@manacore/shared-pwa": "workspace:*",
+		"@manacore/shared-vite-config": "workspace:*",
+		"@sveltejs/adapter-node": "^5.0.0",
+		"@sveltejs/kit": "^2.47.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.1.7",
+		"@types/node": "^20.0.0",
+		"@vite-pwa/sveltekit": "^1.1.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^5.41.0",
+		"svelte-check": "^4.3.3",
+		"tailwindcss": "^4.1.7",
+		"tslib": "^2.4.1",
+		"typescript": "^5.9.3",
+		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"@manacore/local-store": "workspace:*",
+		"@manacore/shared-app-onboarding": "workspace:*",
+		"@manacore/shared-auth": "workspace:*",
+		"@manacore/shared-auth-stores": "workspace:*",
+		"@manacore/shared-auth-ui": "workspace:*",
+		"@manacore/shared-branding": "workspace:*",
+		"@manacore/shared-error-tracking": "workspace:*",
+		"@manacore/feedback": "workspace:*",
+		"@manacore/shared-i18n": "workspace:*",
+		"@manacore/help": "workspace:*",
+		"@manacore/shared-icons": "workspace:*",
+		"@manacore/shared-profile-ui": "workspace:*",
+		"@manacore/shared-stores": "workspace:*",
+		"@manacore/shared-tags": "workspace:*",
+		"@manacore/subscriptions": "workspace:*",
+		"@manacore/shared-tailwind": "workspace:*",
+		"@manacore/shared-theme": "workspace:*",
+		"@manacore/shared-theme-ui": "workspace:*",
+		"@manacore/shared-ui": "workspace:*",
+		"@manacore/shared-utils": "workspace:*",
+		"svelte-i18n": "^4.0.1"
+	},
+	"type": "module"
 }
diff --git a/games/mana-games/apps/web/public/icons/icon-120x120.png b/games/mana-games/apps/web/public/icons/icon-120x120.png
deleted file mode 100644
index 172bbcaf2..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-120x120.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-128x128.png b/games/mana-games/apps/web/public/icons/icon-128x128.png
deleted file mode 100644
index 7d28b8534..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-128x128.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-144x144.png b/games/mana-games/apps/web/public/icons/icon-144x144.png
deleted file mode 100644
index 63165eb24..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-144x144.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-152x152.png b/games/mana-games/apps/web/public/icons/icon-152x152.png
deleted file mode 100644
index 4b81c5755..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-152x152.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-167x167.png b/games/mana-games/apps/web/public/icons/icon-167x167.png
deleted file mode 100644
index 9063b8c72..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-167x167.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-180x180.png b/games/mana-games/apps/web/public/icons/icon-180x180.png
deleted file mode 100644
index 81e7610cb..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-180x180.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-192x192.png b/games/mana-games/apps/web/public/icons/icon-192x192.png
deleted file mode 100644
index 355007c45..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-192x192.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-384x384.png b/games/mana-games/apps/web/public/icons/icon-384x384.png
deleted file mode 100644
index aac3099d2..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-384x384.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-512x512.png b/games/mana-games/apps/web/public/icons/icon-512x512.png
deleted file mode 100644
index 7195360c9..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-512x512.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-72x72.png b/games/mana-games/apps/web/public/icons/icon-72x72.png
deleted file mode 100644
index bc2d228cb..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-72x72.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-96x96.png b/games/mana-games/apps/web/public/icons/icon-96x96.png
deleted file mode 100644
index 4437e7bed..000000000
Binary files a/games/mana-games/apps/web/public/icons/icon-96x96.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/icons/icon-base.svg b/games/mana-games/apps/web/public/icons/icon-base.svg
deleted file mode 100644
index e4ff4c7d1..000000000
--- a/games/mana-games/apps/web/public/icons/icon-base.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="512" height="512" fill="#0a0a0a"/>
-  <defs>
-    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#00ff88;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#00cc6a;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <text x="256" y="280" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif" font-size="200" font-weight="900" text-anchor="middle" fill="url(#gradient)">MG</text>
-</svg>
\ No newline at end of file
diff --git a/games/mana-games/apps/web/public/manifest.json b/games/mana-games/apps/web/public/manifest.json
deleted file mode 100644
index 80344cc70..000000000
--- a/games/mana-games/apps/web/public/manifest.json
+++ /dev/null
@@ -1,89 +0,0 @@
-{
-	"name": "Mana Games - Spiele ohne Grenzen",
-	"short_name": "Mana Games",
-	"description": "Eine Sammlung kostenloser, werbefreier Web-Spiele zum Spielen, Bauen und Lernen",
-	"start_url": "/",
-	"display": "standalone",
-	"orientation": "portrait",
-	"theme_color": "#1a1a1a",
-	"background_color": "#0a0a0a",
-	"categories": ["games", "education", "entertainment"],
-	"lang": "de",
-	"dir": "ltr",
-	"icons": [
-		{
-			"src": "/icons/icon-72x72.png",
-			"sizes": "72x72",
-			"type": "image/png",
-			"purpose": "any maskable"
-		},
-		{
-			"src": "/icons/icon-96x96.png",
-			"sizes": "96x96",
-			"type": "image/png",
-			"purpose": "any maskable"
-		},
-		{
-			"src": "/icons/icon-128x128.png",
-			"sizes": "128x128",
-			"type": "image/png",
-			"purpose": "any maskable"
-		},
-		{
-			"src": "/icons/icon-144x144.png",
-			"sizes": "144x144",
-			"type": "image/png",
-			"purpose": "any maskable"
-		},
-		{
-			"src": "/icons/icon-152x152.png",
-			"sizes": "152x152",
-			"type": "image/png",
-			"purpose": "any maskable"
-		},
-		{
-			"src": "/icons/icon-192x192.png",
-			"sizes": "192x192",
-			"type": "image/png",
-			"purpose": "any maskable"
-		},
-		{
-			"src": "/icons/icon-384x384.png",
-			"sizes": "384x384",
-			"type": "image/png",
-			"purpose": "any maskable"
-		},
-		{
-			"src": "/icons/icon-512x512.png",
-			"sizes": "512x512",
-			"type": "image/png",
-			"purpose": "any maskable"
-		}
-	],
-	"screenshots": [
-		{
-			"src": "/screenshots/desktop-home.png",
-			"sizes": "1280x720",
-			"type": "image/png",
-			"label": "Mana Games Startseite"
-		},
-		{
-			"src": "/screenshots/mobile-home.png",
-			"sizes": "750x1334",
-			"type": "image/png",
-			"label": "Mobile Ansicht"
-		}
-	],
-	"shortcuts": [
-		{
-			"name": "Snake Game",
-			"url": "/games/snake",
-			"description": "Klassisches Snake-Spiel spielen"
-		},
-		{
-			"name": "Meine Statistiken",
-			"url": "/stats",
-			"description": "Spielstatistiken anzeigen"
-		}
-	]
-}
diff --git a/games/mana-games/apps/web/public/offline.html b/games/mana-games/apps/web/public/offline.html
deleted file mode 100644
index c1b60aa92..000000000
--- a/games/mana-games/apps/web/public/offline.html
+++ /dev/null
@@ -1,184 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <title>Offline - Mana Games</title>
-    <style>
-        :root {
-            --color-bg: #0a0a0a;
-            --color-bg-secondary: #1a1a1a;
-            --color-text: #ffffff;
-            --color-text-secondary: #b0b0b0;
-            --color-accent: #00ff88;
-            --color-accent-secondary: #00cc6a;
-            --color-border: #2a2a2a;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background-color: var(--color-bg);
-            color: var(--color-text);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 2rem;
-        }
-
-        .offline-container {
-            text-align: center;
-            max-width: 500px;
-        }
-
-        .offline-icon {
-            font-size: 4rem;
-            margin-bottom: 1.5rem;
-            opacity: 0.5;
-        }
-
-        h1 {
-            font-size: 2.5rem;
-            font-weight: 900;
-            margin-bottom: 1rem;
-            letter-spacing: -0.05em;
-        }
-
-        .accent {
-            color: var(--color-accent);
-        }
-
-        p {
-            color: var(--color-text-secondary);
-            line-height: 1.6;
-            margin-bottom: 2rem;
-        }
-
-        .offline-games {
-            margin-top: 3rem;
-        }
-
-        .offline-games h2 {
-            font-size: 1.5rem;
-            margin-bottom: 1rem;
-            color: var(--color-accent);
-        }
-
-        .games-list {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            margin-top: 1rem;
-        }
-
-        .game-item {
-            background-color: var(--color-bg-secondary);
-            border: 1px solid var(--color-border);
-            padding: 1rem;
-            border-radius: 0.5rem;
-            text-align: left;
-        }
-
-        .game-item h3 {
-            color: var(--color-text);
-            font-size: 1.1rem;
-            margin-bottom: 0.25rem;
-        }
-
-        .game-item p {
-            font-size: 0.9rem;
-            margin-bottom: 0;
-        }
-
-        .reload-button {
-            background-color: var(--color-accent);
-            color: #000;
-            border: none;
-            padding: 0.75rem 2rem;
-            border-radius: 0.5rem;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            text-decoration: none;
-            display: inline-block;
-        }
-
-        .reload-button:hover {
-            background-color: var(--color-accent-secondary);
-            transform: translateY(-2px);
-        }
-
-        @media (max-width: 768px) {
-            h1 {
-                font-size: 2rem;
-            }
-            
-            .offline-icon {
-                font-size: 3rem;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="offline-container">
-        <div class="offline-icon">📡</div>
-        <h1>Du bist <span class="accent">offline</span></h1>
-        <p>
-            Keine Internetverbindung gefunden. Aber keine Sorge! 
-            Einige Spiele, die du bereits gespielt hast, sind möglicherweise 
-            noch im Cache verfügbar.
-        </p>
-        <button class="reload-button" onclick="window.location.reload()">
-            Erneut versuchen
-        </button>
-        
-        <div class="offline-games" id="offline-games" style="display: none;">
-            <h2>Verfügbare Offline-Spiele</h2>
-            <div class="games-list" id="games-list"></div>
-        </div>
-    </div>
-
-    <script>
-        // Prüfe gecachte Spiele
-        if ('caches' in window) {
-            caches.open('mana-games-v1').then(cache => {
-                cache.keys().then(requests => {
-                    const gameUrls = requests
-                        .map(request => request.url)
-                        .filter(url => url.includes('/games/') && url.endsWith('.html'));
-                    
-                    if (gameUrls.length > 0) {
-                        document.getElementById('offline-games').style.display = 'block';
-                        const gamesList = document.getElementById('games-list');
-                        
-                        gameUrls.forEach(url => {
-                            const gameName = url.split('/').pop().replace('.html', '').replace(/_/g, ' ');
-                            const gameItem = document.createElement('div');
-                            gameItem.className = 'game-item';
-                            gameItem.innerHTML = `
-                                <h3>${gameName}</h3>
-                                <p>Dieses Spiel ist offline verfügbar</p>
-                            `;
-                            gameItem.style.cursor = 'pointer';
-                            gameItem.onclick = () => window.location.href = url;
-                            gamesList.appendChild(gameItem);
-                        });
-                    }
-                });
-            });
-        }
-
-        // Automatisch neu laden, wenn wieder online
-        window.addEventListener('online', () => {
-            window.location.reload();
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/games/mana-games/apps/web/public/splash/splash-1125x2436.png b/games/mana-games/apps/web/public/splash/splash-1125x2436.png
deleted file mode 100644
index fbab093d6..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-1125x2436.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/splash/splash-1242x2688.png b/games/mana-games/apps/web/public/splash/splash-1242x2688.png
deleted file mode 100644
index e37234898..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-1242x2688.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/splash/splash-1536x2048.png b/games/mana-games/apps/web/public/splash/splash-1536x2048.png
deleted file mode 100644
index b7358ae1f..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-1536x2048.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/splash/splash-1668x2224.png b/games/mana-games/apps/web/public/splash/splash-1668x2224.png
deleted file mode 100644
index 7de3ee1d7..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-1668x2224.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/splash/splash-2048x2732.png b/games/mana-games/apps/web/public/splash/splash-2048x2732.png
deleted file mode 100644
index 911db7a74..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-2048x2732.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/splash/splash-640x1136.png b/games/mana-games/apps/web/public/splash/splash-640x1136.png
deleted file mode 100644
index 90997853b..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-640x1136.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/splash/splash-750x1334.png b/games/mana-games/apps/web/public/splash/splash-750x1334.png
deleted file mode 100644
index 68c9c51fa..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-750x1334.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/splash/splash-828x1792.png b/games/mana-games/apps/web/public/splash/splash-828x1792.png
deleted file mode 100644
index 4022d5a27..000000000
Binary files a/games/mana-games/apps/web/public/splash/splash-828x1792.png and /dev/null differ
diff --git a/games/mana-games/apps/web/public/sw.js b/games/mana-games/apps/web/public/sw.js
deleted file mode 100644
index 755f125f7..000000000
--- a/games/mana-games/apps/web/public/sw.js
+++ /dev/null
@@ -1,161 +0,0 @@
-const CACHE_NAME = 'mana-games-v1';
-const OFFLINE_URL = '/offline.html';
-
-// Assets, die immer gecacht werden sollen
-const STATIC_CACHE_URLS = ['/', '/offline.html', '/favicon.svg', '/manifest.json'];
-
-// Cache-Strategien für verschiedene Ressourcen
-const CACHE_STRATEGIES = {
-	// Netzwerk zuerst, dann Cache (für HTML)
-	networkFirst: [/\/$/, /\.html$/, /\.astro$/],
-	// Cache zuerst, dann Netzwerk (für Assets)
-	cacheFirst: [
-		/\.css$/,
-		/\.js$/,
-		/\.woff2?$/,
-		/\.ttf$/,
-		/\.otf$/,
-		/\.svg$/,
-		/\.png$/,
-		/\.jpg$/,
-		/\.jpeg$/,
-		/\.webp$/,
-		/\.ico$/,
-	],
-	// Nur Netzwerk (für API-Calls)
-	networkOnly: [/\/api\//, /\.json$/],
-};
-
-// Service Worker Installation
-self.addEventListener('install', (event) => {
-	event.waitUntil(
-		caches
-			.open(CACHE_NAME)
-			.then((cache) => {
-				console.log('Service Worker: Caching static assets');
-				return cache.addAll(STATIC_CACHE_URLS);
-			})
-			.then(() => self.skipWaiting())
-	);
-});
-
-// Service Worker Aktivierung
-self.addEventListener('activate', (event) => {
-	event.waitUntil(
-		caches
-			.keys()
-			.then((cacheNames) => {
-				return Promise.all(
-					cacheNames
-						.filter((cacheName) => cacheName !== CACHE_NAME)
-						.map((cacheName) => caches.delete(cacheName))
-				);
-			})
-			.then(() => self.clients.claim())
-	);
-});
-
-// Fetch-Event Handler
-self.addEventListener('fetch', (event) => {
-	const { request } = event;
-	const url = new URL(request.url);
-
-	// Ignoriere Chrome Extension Requests
-	if (url.protocol === 'chrome-extension:') {
-		return;
-	}
-
-	// Bestimme die Cache-Strategie
-	const strategy = getStrategy(url.pathname);
-
-	if (strategy === 'networkFirst') {
-		event.respondWith(networkFirst(request));
-	} else if (strategy === 'cacheFirst') {
-		event.respondWith(cacheFirst(request));
-	} else if (strategy === 'networkOnly') {
-		event.respondWith(networkOnly(request));
-	} else {
-		// Standard: Network First
-		event.respondWith(networkFirst(request));
-	}
-});
-
-// Cache-Strategien Implementierung
-async function networkFirst(request) {
-	try {
-		const networkResponse = await fetch(request);
-		if (networkResponse.ok) {
-			const cache = await caches.open(CACHE_NAME);
-			cache.put(request, networkResponse.clone());
-		}
-		return networkResponse;
-	} catch (error) {
-		const cachedResponse = await caches.match(request);
-		if (cachedResponse) {
-			return cachedResponse;
-		}
-
-		// Wenn es eine Navigation ist und wir offline sind, zeige die Offline-Seite
-		if (request.mode === 'navigate') {
-			const offlineResponse = await caches.match(OFFLINE_URL);
-			if (offlineResponse) {
-				return offlineResponse;
-			}
-		}
-
-		throw error;
-	}
-}
-
-async function cacheFirst(request) {
-	const cachedResponse = await caches.match(request);
-	if (cachedResponse) {
-		return cachedResponse;
-	}
-
-	try {
-		const networkResponse = await fetch(request);
-		if (networkResponse.ok) {
-			const cache = await caches.open(CACHE_NAME);
-			cache.put(request, networkResponse.clone());
-		}
-		return networkResponse;
-	} catch (error) {
-		console.error('Fetch failed:', error);
-		throw error;
-	}
-}
-
-async function networkOnly(request) {
-	return fetch(request);
-}
-
-// Hilfsfunktion zur Bestimmung der Cache-Strategie
-function getStrategy(pathname) {
-	for (const [strategy, patterns] of Object.entries(CACHE_STRATEGIES)) {
-		if (patterns.some((pattern) => pattern.test(pathname))) {
-			return strategy;
-		}
-	}
-	return 'networkFirst';
-}
-
-// Message Handler für Cache-Updates
-self.addEventListener('message', (event) => {
-	if (event.data && event.data.type === 'SKIP_WAITING') {
-		self.skipWaiting();
-	}
-
-	if (event.data && event.data.type === 'CACHE_GAME') {
-		const gameUrl = event.data.url;
-		caches
-			.open(CACHE_NAME)
-			.then((cache) => cache.add(gameUrl))
-			.then(() => {
-				event.ports[0].postMessage({ cached: true });
-			})
-			.catch((error) => {
-				event.ports[0].postMessage({ cached: false, error: error.message });
-			});
-	}
-});
diff --git a/games/mana-games/apps/web/src/app.css b/games/mana-games/apps/web/src/app.css
new file mode 100644
index 000000000..f28dfe97c
--- /dev/null
+++ b/games/mana-games/apps/web/src/app.css
@@ -0,0 +1,10 @@
+@import "tailwindcss";
+@import "@manacore/shared-tailwind/themes.css";
+
+/* Scan shared packages for Tailwind classes */
+@source "../../../../../../packages/shared-ui/src";
+@source "../../../../../../packages/shared-auth-ui/src";
+@source "../../../../../../packages/shared-branding/src";
+@source "../../../../../../packages/shared-theme-ui/src";
+@source "../../../../../../packages/shared-theme-ui/src/components";
+@source "../../../../../../packages/shared-theme-ui/src/pages";
diff --git a/games/mana-games/apps/web/src/app.html b/games/mana-games/apps/web/src/app.html
new file mode 100644
index 000000000..e31c3501d
--- /dev/null
+++ b/games/mana-games/apps/web/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/games/mana-games/apps/web/src/components/Button.astro b/games/mana-games/apps/web/src/components/Button.astro
deleted file mode 100644
index 4895fb1fe..000000000
--- a/games/mana-games/apps/web/src/components/Button.astro
+++ /dev/null
@@ -1,188 +0,0 @@
----
-export interface Props {
-	variant?: 'primary' | 'secondary' | 'accent' | 'ghost' | 'danger';
-	size?: 'small' | 'medium' | 'large' | 'icon';
-	href?: string;
-	onclick?: string;
-	id?: string;
-	class?: string;
-	title?: string;
-	disabled?: boolean;
-	type?: 'button' | 'submit' | 'reset';
-}
-
-const {
-	variant = 'secondary',
-	size = 'medium',
-	href,
-	onclick,
-	id,
-	class: className = '',
-	title,
-	disabled = false,
-	type = 'button',
-} = Astro.props;
-
-const isLink = Boolean(href);
-const Component = isLink ? 'a' : 'button';
-
-const classes = ['btn', `btn-${variant}`, `btn-${size}`, className].filter(Boolean).join(' ');
-
-const props = {
-	class: classes,
-	...(id && { id }),
-	...(title && { title }),
-	...(isLink ? { href } : { type, disabled }),
-	...(onclick && { onclick }),
-};
----
-
-<Component {...props}>
-	<slot />
-</Component>
-
-<style>
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5rem;
-		font-family: inherit;
-		font-weight: 500;
-		text-decoration: none;
-		border-radius: 0.5rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		outline: none;
-		position: relative;
-		overflow: hidden;
-	}
-
-	.btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Sizes */
-	.btn-small {
-		padding: 0.375rem 0.75rem;
-		font-size: 0.875rem;
-	}
-
-	.btn-medium {
-		padding: 0.5rem 1rem;
-		font-size: 1rem;
-	}
-
-	.btn-large {
-		padding: 0.75rem 1.5rem;
-		font-size: 1.125rem;
-	}
-
-	.btn-icon {
-		width: 40px;
-		height: 40px;
-		padding: 0;
-		font-size: 1.2rem;
-	}
-
-	/* Variants */
-	.btn-primary {
-		background-color: var(--color-accent);
-		color: #000;
-		border: 1px solid var(--color-accent);
-	}
-
-	.btn-primary:hover:not(:disabled) {
-		background-color: var(--color-accent-secondary);
-		border-color: var(--color-accent-secondary);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
-	}
-
-	.btn-primary:active:not(:disabled) {
-		transform: translateY(0);
-		box-shadow: 0 2px 6px rgba(0, 255, 136, 0.2);
-	}
-
-	.btn-secondary {
-		background-color: var(--color-bg-secondary);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-	}
-
-	.btn-secondary:hover:not(:disabled) {
-		background-color: #252525;
-		border-color: #404040;
-	}
-
-	.btn-accent {
-		background-color: rgba(0, 255, 136, 0.1);
-		color: var(--color-accent);
-		border: 1px solid var(--color-accent);
-	}
-
-	.btn-accent:hover:not(:disabled) {
-		background-color: var(--color-accent);
-		color: #000;
-	}
-
-	.btn-ghost {
-		background-color: transparent;
-		color: var(--color-text-secondary);
-		border: 1px solid var(--color-border);
-	}
-
-	.btn-ghost:hover:not(:disabled) {
-		background-color: rgba(255, 255, 255, 0.05);
-		color: var(--color-text);
-		border-color: rgba(255, 255, 255, 0.2);
-	}
-
-	.btn-danger {
-		background-color: transparent;
-		color: var(--color-text-secondary);
-		border: 1px solid var(--color-border);
-	}
-
-	.btn-danger:hover:not(:disabled) {
-		background-color: #ff4444;
-		color: #fff;
-		border-color: #ff4444;
-	}
-
-	/* Special hover effects */
-	.btn::before {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 0;
-		height: 0;
-		border-radius: 50%;
-		background: rgba(255, 255, 255, 0.1);
-		transform: translate(-50%, -50%);
-		transition:
-			width 0.6s,
-			height 0.6s;
-	}
-
-	.btn:hover::before {
-		width: 300px;
-		height: 300px;
-	}
-
-	/* Mobile optimizations */
-	@media (max-width: 768px) {
-		.btn-icon {
-			width: 36px;
-			height: 36px;
-			font-size: 1.1rem;
-		}
-
-		.btn-small {
-			padding: 0.25rem 0.5rem;
-			font-size: 0.8125rem;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/components/Footer.astro b/games/mana-games/apps/web/src/components/Footer.astro
deleted file mode 100644
index e7ae28858..000000000
--- a/games/mana-games/apps/web/src/components/Footer.astro
+++ /dev/null
@@ -1,193 +0,0 @@
----
-// Footer component with compact site navigation
----
-
-<footer class="site-footer">
-	<div class="footer-container">
-		<div class="footer-content">
-			<!-- Brand -->
-			<div class="footer-brand">
-				<a href="/" class="footer-logo">
-					<span class="logo-text">MANA</span>
-					<span class="logo-accent">GAMES</span>
-				</a>
-				<p class="footer-tagline">Spiele ohne Grenzen</p>
-			</div>
-
-			<!-- Navigation Links -->
-			<div class="footer-nav">
-				<div class="footer-section">
-					<h4>Spielen</h4>
-					<ul>
-						<li><a href="/">Alle Spiele</a></li>
-						<li><a href="/create">KI Generator</a></li>
-						<li><a href="/stats">Meine Stats</a></li>
-					</ul>
-				</div>
-
-				<div class="footer-section">
-					<h4>Über Uns</h4>
-					<ul>
-						<li><a href="/about">Vision</a></li>
-						<li><a href="/mitmachen">Mitmachen</a></li>
-						<li>
-							<a href="https://github.com/anthropics/mana-games" target="_blank" rel="noopener"
-								>GitHub</a
-							>
-						</li>
-					</ul>
-				</div>
-
-				<div class="footer-section">
-					<h4>Rechtliches</h4>
-					<ul>
-						<li><a href="/impressum">Impressum</a></li>
-						<li><a href="/datenschutz">Datenschutz</a></li>
-						<li><a href="/agb">AGB</a></li>
-						<li><a href="/jugendschutz">Jugendschutz</a></li>
-						<li><a href="/copyright">Copyright</a></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-
-		<!-- Bottom Bar -->
-		<div class="footer-bottom">
-			<p>&copy; 2024 Mana Games. Alle Rechte vorbehalten.</p>
-		</div>
-	</div>
-</footer>
-
-<style>
-	.site-footer {
-		background: var(--color-bg-secondary);
-		border-top: 1px solid var(--color-border);
-		margin-top: 4rem;
-		padding: 3rem 0 1.5rem;
-	}
-
-	.footer-container {
-		max-width: var(--max-width);
-		margin: 0 auto;
-		padding: 0 2rem;
-	}
-
-	.footer-content {
-		display: grid;
-		grid-template-columns: 1fr 2fr;
-		gap: 4rem;
-		margin-bottom: 3rem;
-	}
-
-	/* Brand Section */
-	.footer-brand {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	.footer-logo {
-		text-decoration: none;
-		font-size: 1.5rem;
-		font-weight: 900;
-		letter-spacing: -0.05em;
-		display: inline-block;
-		transition: opacity 0.2s ease;
-	}
-
-	.footer-logo:hover {
-		opacity: 0.8;
-	}
-
-	.logo-text {
-		color: var(--color-text);
-	}
-
-	.logo-accent {
-		color: var(--color-accent);
-		margin-left: 0.25rem;
-	}
-
-	.footer-tagline {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-		margin: 0;
-	}
-
-	/* Navigation */
-	.footer-nav {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 2rem;
-	}
-
-	.footer-section h4 {
-		color: var(--color-text);
-		font-size: 0.875rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		margin: 0 0 1rem 0;
-	}
-
-	.footer-section ul {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.footer-section a {
-		color: var(--color-text-secondary);
-		text-decoration: none;
-		font-size: 0.875rem;
-		transition: color 0.2s ease;
-		display: inline-block;
-	}
-
-	.footer-section a:hover {
-		color: var(--color-accent);
-	}
-
-	/* Bottom Bar */
-	.footer-bottom {
-		padding-top: 2rem;
-		border-top: 1px solid var(--color-border);
-		text-align: center;
-	}
-
-	.footer-bottom p {
-		color: var(--color-text-muted);
-		font-size: 0.75rem;
-		margin: 0;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.site-footer {
-			margin-top: 3rem;
-			padding: 2rem 0 1rem;
-		}
-
-		.footer-content {
-			grid-template-columns: 1fr;
-			gap: 2rem;
-		}
-
-		.footer-nav {
-			grid-template-columns: 1fr;
-			gap: 1.5rem;
-		}
-
-		.footer-bottom {
-			text-align: center;
-		}
-	}
-
-	/* Full width pages adjustment */
-	body.full-width .site-footer {
-		margin-top: 0;
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/components/GameCard.astro b/games/mana-games/apps/web/src/components/GameCard.astro
deleted file mode 100644
index 04f4a3e9f..000000000
--- a/games/mana-games/apps/web/src/components/GameCard.astro
+++ /dev/null
@@ -1,309 +0,0 @@
----
-import GameStats from './GameStats.astro';
-import Button from './Button.astro';
-
-export interface Props {
-	title: string;
-	description: string;
-	slug: string;
-	thumbnail?: string;
-	tags?: string[];
-	complexity?: 'Minimal' | 'Einfach' | 'Mittel' | 'Komplex';
-	codeStats?: {
-		total: number;
-		code: number;
-		comments: number;
-	};
-}
-
-const { title, description, slug, thumbnail, tags = [], complexity, codeStats } = Astro.props;
----
-
-<article class="game-card">
-	<a href={`/games/${slug}`} class="card-link">
-		<div class="card-image">
-			{
-				thumbnail ? (
-					<img src={thumbnail} alt={title} />
-				) : (
-					<div class="placeholder">
-						<span>{title.charAt(0)}</span>
-					</div>
-				)
-			}
-		</div>
-
-		<div class="card-content">
-			<h3 class="card-title">{title}</h3>
-			<p class="card-description">{description}</p>
-
-			<div class="card-meta">
-				{
-					complexity && (
-						<span class={`complexity complexity-${complexity.toLowerCase()}`}>{complexity}</span>
-					)
-				}
-
-				{
-					tags.length > 0 && (
-						<div class="card-tags">
-							{tags.map((tag) => (
-								<span class="tag">{tag}</span>
-							))}
-						</div>
-					)
-				}
-			</div>
-
-			{
-				codeStats && (
-					<div class="code-info">
-						<span class="code-lines">
-							{codeStats.total} Zeilen
-							<span class="code-detail">
-								({codeStats.code} Code / {codeStats.comments} Kommentare)
-							</span>
-						</span>
-					</div>
-				)
-			}
-
-			<GameStats gameId={slug} />
-		</div>
-
-		<div class="hover-buttons">
-			<Button
-				href={`/games/${slug}/playground`}
-				variant="secondary"
-				size="small"
-				class="code-btn"
-				onclick="event.stopPropagation(); event.preventDefault(); window.location.href=this.href;"
-			>
-				Code
-			</Button>
-			<Button variant="primary" size="small" class="play-btn"> Spielen </Button>
-		</div>
-	</a>
-</article>
-
-<style>
-	/* Basis Card Styling */
-	.game-card {
-		position: relative;
-		width: 100%;
-		background: rgba(255, 255, 255, 0.02);
-		border: 1px solid rgba(255, 255, 255, 0.08);
-		border-radius: 1rem;
-		overflow: hidden;
-		transition:
-			transform 0.2s ease,
-			box-shadow 0.2s ease;
-	}
-
-	.game-card:hover {
-		transform: translateY(-4px);
-		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
-		border-color: rgba(255, 255, 255, 0.15);
-	}
-
-	/* Link Container */
-	.card-link {
-		display: block;
-		text-decoration: none;
-		color: inherit;
-	}
-
-	/* Bild/Placeholder Section */
-	.card-image {
-		position: relative;
-		width: 100%;
-		aspect-ratio: 4/3;
-		background: #0a0a0a;
-		overflow: hidden;
-	}
-
-	.card-image img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		display: block;
-	}
-
-	.placeholder {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
-		color: var(--color-accent);
-		font-size: 4rem;
-		font-weight: 900;
-		text-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
-	}
-
-	/* Content Section */
-	.card-content {
-		padding: 1.5rem;
-	}
-
-	.card-title {
-		margin: 0 0 0.75rem 0;
-		font-size: 1.5rem;
-		font-weight: 700;
-		color: var(--color-text);
-	}
-
-	.card-description {
-		margin: 0 0 1rem 0;
-		font-size: 0.95rem;
-		line-height: 1.5;
-		color: var(--color-text-secondary);
-	}
-
-	/* Tags */
-	.card-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-
-	.tag {
-		padding: 0.25rem 0.75rem;
-		font-size: 0.75rem;
-		background: rgba(255, 255, 255, 0.05);
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		border-radius: 20px;
-		color: var(--color-text-secondary);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	/* Hover Buttons */
-	.hover-buttons {
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 0.2s ease;
-	}
-
-	.game-card:hover .hover-buttons {
-		opacity: 1;
-		pointer-events: all;
-	}
-
-	.hover-buttons :global(.play-btn) {
-		position: absolute;
-		top: 1rem;
-		right: 1rem;
-		border-radius: 20px;
-	}
-
-	.hover-buttons :global(.code-btn) {
-		position: absolute;
-		top: 1rem;
-		left: 1rem;
-		border-radius: 20px;
-		background: rgba(0, 0, 0, 0.8);
-		backdrop-filter: blur(10px);
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.card-image {
-			height: 150px;
-		}
-
-		.card-content {
-			padding: 1.25rem;
-		}
-
-		.card-title {
-			font-size: 1.25rem;
-		}
-
-		.card-description {
-			font-size: 0.9rem;
-		}
-	}
-
-	/* Code Info */
-	.code-info {
-		margin-top: 0.75rem;
-		padding-top: 0.75rem;
-		border-top: 1px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.code-lines {
-		font-size: 0.8rem;
-		color: var(--color-accent);
-		font-weight: 600;
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-	}
-
-	.code-lines::before {
-		content: '< >';
-		font-family: monospace;
-		opacity: 0.7;
-	}
-
-	.code-detail {
-		font-size: 0.75rem;
-		color: var(--color-text-secondary);
-		font-weight: normal;
-		margin-left: 0.25rem;
-	}
-
-	/* Card Meta Section */
-	.card-meta {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	/* Complexity Badge */
-	.complexity {
-		display: inline-block;
-		padding: 0.25rem 0.75rem;
-		font-size: 0.7rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		border-radius: 12px;
-		align-self: flex-start;
-	}
-
-	.complexity-minimal {
-		background: #4ade80;
-		color: #000;
-	}
-
-	.complexity-einfach {
-		background: #60a5fa;
-		color: #000;
-	}
-
-	.complexity-mittel {
-		background: #fbbf24;
-		color: #000;
-	}
-
-	.complexity-komplex {
-		background: #f87171;
-		color: #000;
-	}
-</style>
-
-<script>
-	// Fallback für fehlende Bilder
-	const images = document.querySelectorAll('.card-image img');
-	images.forEach((img) => {
-		img.addEventListener('error', function () {
-			const placeholder = document.createElement('div');
-			placeholder.className = 'placeholder';
-			placeholder.innerHTML = `<span>${this.alt.charAt(0)}</span>`;
-			this.parentElement.replaceChild(placeholder, this);
-		});
-	});
-</script>
diff --git a/games/mana-games/apps/web/src/components/GameStats.astro b/games/mana-games/apps/web/src/components/GameStats.astro
deleted file mode 100644
index f84e7f6e8..000000000
--- a/games/mana-games/apps/web/src/components/GameStats.astro
+++ /dev/null
@@ -1,146 +0,0 @@
----
-import { statsService } from '../services/statsService';
-
-export interface Props {
-	gameId: string;
-	showDetails?: boolean;
-}
-
-const { gameId, showDetails = false } = Astro.props;
-const stats = statsService.getStats(gameId);
----
-
-{
-	stats && (
-		<div class="game-stats">
-			<div class="stats-row">
-				{stats.highScore > 0 && (
-					<div class="stat-item highscore">
-						<span class="stat-icon">🏆</span>
-						<span class="stat-value">{stats.highScore.toLocaleString('de-DE')}</span>
-					</div>
-				)}
-
-				{stats.gamesPlayed > 0 && (
-					<div class="stat-item games-played">
-						<span class="stat-icon">🎮</span>
-						<span class="stat-value">{stats.gamesPlayed}x</span>
-					</div>
-				)}
-
-				{stats.totalPlayTime > 0 && (
-					<div class="stat-item play-time">
-						<span class="stat-icon">⏱️</span>
-						<span class="stat-value">{statsService.formatPlayTime(stats.totalPlayTime)}</span>
-					</div>
-				)}
-			</div>
-
-			{showDetails && stats.lastPlayed && (
-				<div class="last-played">
-					Zuletzt gespielt: {statsService.getRelativeTime(stats.lastPlayed)}
-				</div>
-			)}
-
-			{showDetails && stats.achievements && stats.achievements.length > 0 && (
-				<div class="achievements">
-					<h4>Achievements</h4>
-					<div class="achievement-list">
-						{stats.achievements.map((achievement) => (
-							<div class="achievement" title={achievement.description}>
-								<span class="achievement-icon">🏅</span>
-								<span class="achievement-name">{achievement.name}</span>
-							</div>
-						))}
-					</div>
-				</div>
-			)}
-		</div>
-	)
-}
-
-<style>
-	.game-stats {
-		margin-top: 0.5rem;
-		font-size: 0.85rem;
-	}
-
-	.stats-row {
-		display: flex;
-		gap: 1rem;
-		flex-wrap: wrap;
-	}
-
-	.stat-item {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.25rem 0.5rem;
-		background: rgba(255, 255, 255, 0.05);
-		border-radius: 12px;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.stat-icon {
-		font-size: 0.9rem;
-	}
-
-	.stat-value {
-		font-weight: 600;
-		color: var(--color-text);
-	}
-
-	.highscore .stat-value {
-		color: #fbbf24;
-	}
-
-	.games-played .stat-value {
-		color: #60a5fa;
-	}
-
-	.play-time .stat-value {
-		color: #4ade80;
-	}
-
-	.last-played {
-		margin-top: 0.5rem;
-		color: var(--color-text-secondary);
-		font-size: 0.75rem;
-	}
-
-	.achievements {
-		margin-top: 1rem;
-	}
-
-	.achievements h4 {
-		margin: 0 0 0.5rem 0;
-		font-size: 0.9rem;
-		color: var(--color-text);
-	}
-
-	.achievement-list {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-
-	.achievement {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.25rem 0.5rem;
-		background: rgba(255, 215, 0, 0.1);
-		border: 1px solid rgba(255, 215, 0, 0.3);
-		border-radius: 8px;
-		font-size: 0.75rem;
-	}
-
-	.achievement-icon {
-		font-size: 0.8rem;
-	}
-
-	.achievement-name {
-		color: #fbbf24;
-		font-weight: 500;
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/components/HorizontalScroller.astro b/games/mana-games/apps/web/src/components/HorizontalScroller.astro
deleted file mode 100644
index c0ffa105e..000000000
--- a/games/mana-games/apps/web/src/components/HorizontalScroller.astro
+++ /dev/null
@@ -1,352 +0,0 @@
----
-import GameCard from './GameCard.astro';
-
-export interface Props {
-	title: string;
-	games: any[];
-	id?: string;
-}
-
-const { title, games, id = 'scroller' } = Astro.props;
----
-
-<section class="scroller-section">
-	<div class="scroller-header">
-		<h2>{title}</h2>
-		<div class="scroller-controls">
-			<button class="scroll-btn scroll-left" data-scroller={id} aria-label="Nach links scrollen">
-				<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-					<path
-						d="M15 18L9 12L15 6"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"></path>
-				</svg>
-			</button>
-			<button class="scroll-btn scroll-right" data-scroller={id} aria-label="Nach rechts scrollen">
-				<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-					<path
-						d="M9 18L15 12L9 6"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"></path>
-				</svg>
-			</button>
-		</div>
-	</div>
-
-	<div class="scroller-container">
-		<div class="scroller-gradient-left"></div>
-		<div class="scroller-gradient-right"></div>
-
-		<div class="scroller-track" id={id}>
-			<div class="scroller-content">
-				{
-					games.map((game) => (
-						<div class="scroller-item">
-							<GameCard
-								title={game.title}
-								description={game.description}
-								slug={game.slug}
-								thumbnail={game.thumbnail}
-								tags={game.tags}
-								complexity={game.complexity}
-								codeStats={game.codeStats}
-							/>
-						</div>
-					))
-				}
-			</div>
-		</div>
-	</div>
-</section>
-
-<style>
-	.scroller-section {
-		position: relative;
-		margin-bottom: 3rem;
-		width: 100%;
-	}
-
-	.scroller-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 1.5rem;
-		padding: 0 max(1.5rem, calc((100vw - 1400px) / 2));
-	}
-
-	.scroller-header h2 {
-		font-size: 1.75rem;
-		font-weight: 700;
-		color: var(--color-text);
-		margin: 0;
-	}
-
-	.scroller-controls {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.scroll-btn {
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-		background: rgba(255, 255, 255, 0.1);
-		border: 1px solid rgba(255, 255, 255, 0.2);
-		color: var(--color-text);
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s ease;
-		opacity: 0.6;
-	}
-
-	.scroll-btn:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.15);
-		opacity: 1;
-		transform: scale(1.05);
-	}
-
-	.scroll-btn:disabled {
-		opacity: 0.3;
-		cursor: not-allowed;
-	}
-
-	.scroller-container {
-		position: relative;
-		width: 100%;
-		overflow: hidden;
-	}
-
-	.scroller-gradient-left,
-	.scroller-gradient-right {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 100px;
-		z-index: 2;
-		pointer-events: none;
-		opacity: 0;
-		transition: opacity 0.3s ease;
-	}
-
-	.scroller-gradient-left {
-		left: 0;
-		background: linear-gradient(90deg, var(--color-bg) 0%, transparent 100%);
-	}
-
-	.scroller-gradient-right {
-		right: 0;
-		background: linear-gradient(270deg, var(--color-bg) 0%, transparent 100%);
-	}
-
-	.scroller-container.has-scroll-left .scroller-gradient-left,
-	.scroller-container.has-scroll-right .scroller-gradient-right {
-		opacity: 1;
-	}
-
-	.scroller-track {
-		overflow-x: auto;
-		overflow-y: hidden;
-		scroll-behavior: smooth;
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-		padding: 0.5rem 0 1.5rem;
-	}
-
-	.scroller-track::-webkit-scrollbar {
-		display: none;
-	}
-
-	.scroller-content {
-		display: flex;
-		gap: 1.5rem;
-		padding: 0 max(1.5rem, calc((100vw - 1400px) / 2));
-		min-width: min-content;
-	}
-
-	.scroller-item {
-		flex: 0 0 320px;
-		max-width: 320px;
-		opacity: 0;
-		transform: translateY(20px);
-		animation: scrollerItemFadeIn 0.4s ease forwards;
-	}
-
-	.scroller-item:nth-child(1) {
-		animation-delay: 0s;
-	}
-	.scroller-item:nth-child(2) {
-		animation-delay: 0.05s;
-	}
-	.scroller-item:nth-child(3) {
-		animation-delay: 0.1s;
-	}
-	.scroller-item:nth-child(4) {
-		animation-delay: 0.15s;
-	}
-	.scroller-item:nth-child(5) {
-		animation-delay: 0.2s;
-	}
-	.scroller-item:nth-child(6) {
-		animation-delay: 0.25s;
-	}
-	.scroller-item:nth-child(n + 7) {
-		animation-delay: 0.3s;
-	}
-
-	@keyframes scrollerItemFadeIn {
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	@media (hover: hover) {
-		.scroller-item {
-			transition: transform 0.2s ease;
-		}
-
-		.scroller-item:hover {
-			transform: scale(1.02);
-		}
-	}
-
-	@media (max-width: 768px) {
-		.scroller-header {
-			padding: 0 1rem;
-		}
-
-		.scroller-content {
-			padding: 0 1rem;
-			gap: 1rem;
-		}
-
-		.scroller-item {
-			flex: 0 0 280px;
-			max-width: 280px;
-		}
-
-		.scroll-btn {
-			width: 36px;
-			height: 36px;
-		}
-
-		.scroller-gradient-left,
-		.scroller-gradient-right {
-			width: 50px;
-		}
-	}
-
-	@media (max-width: 480px) {
-		.scroller-item {
-			flex: 0 0 240px;
-			max-width: 240px;
-		}
-
-		.scroller-controls {
-			display: none;
-		}
-	}
-</style>
-
-<script>
-	document.addEventListener('DOMContentLoaded', () => {
-		const scrollers = document.querySelectorAll('.scroller-track');
-
-		scrollers.forEach((scroller) => {
-			const scrollerId = scroller.id;
-			const container = scroller.closest('.scroller-container');
-			const leftBtn = document.querySelector(
-				`.scroll-left[data-scroller="${scrollerId}"]`
-			) as HTMLButtonElement;
-			const rightBtn = document.querySelector(
-				`.scroll-right[data-scroller="${scrollerId}"]`
-			) as HTMLButtonElement;
-
-			if (!container || !leftBtn || !rightBtn) return;
-
-			const updateButtons = () => {
-				const scrollLeft = scroller.scrollLeft;
-				const scrollWidth = scroller.scrollWidth;
-				const clientWidth = scroller.clientWidth;
-
-				leftBtn.disabled = scrollLeft <= 0;
-				rightBtn.disabled = scrollLeft >= scrollWidth - clientWidth - 1;
-
-				if (scrollLeft > 0) {
-					container.classList.add('has-scroll-left');
-				} else {
-					container.classList.remove('has-scroll-left');
-				}
-
-				if (scrollLeft < scrollWidth - clientWidth - 1) {
-					container.classList.add('has-scroll-right');
-				} else {
-					container.classList.remove('has-scroll-right');
-				}
-			};
-
-			const scrollAmount = () => {
-				const item = scroller.querySelector('.scroller-item') as HTMLElement;
-				if (!item) return 320;
-				return item.offsetWidth + 24;
-			};
-
-			leftBtn.addEventListener('click', () => {
-				scroller.scrollBy({ left: -scrollAmount(), behavior: 'smooth' });
-			});
-
-			rightBtn.addEventListener('click', () => {
-				scroller.scrollBy({ left: scrollAmount(), behavior: 'smooth' });
-			});
-
-			scroller.addEventListener('scroll', updateButtons);
-			window.addEventListener('resize', updateButtons);
-
-			setTimeout(updateButtons, 100);
-
-			let touchStartX = 0;
-			let touchEndX = 0;
-			let isSwiping = false;
-
-			scroller.addEventListener(
-				'touchstart',
-				(e) => {
-					touchStartX = e.touches[0].clientX;
-					isSwiping = true;
-				},
-				{ passive: true }
-			);
-
-			scroller.addEventListener(
-				'touchmove',
-				(e) => {
-					if (!isSwiping) return;
-					touchEndX = e.touches[0].clientX;
-				},
-				{ passive: true }
-			);
-
-			scroller.addEventListener('touchend', () => {
-				if (!isSwiping) return;
-				isSwiping = false;
-
-				const swipeDistance = touchEndX - touchStartX;
-				const threshold = 50;
-
-				if (Math.abs(swipeDistance) > threshold) {
-					if (swipeDistance > 0) {
-						scroller.scrollBy({ left: -scrollAmount(), behavior: 'smooth' });
-					} else {
-						scroller.scrollBy({ left: scrollAmount(), behavior: 'smooth' });
-					}
-				}
-			});
-		});
-	});
-</script>
diff --git a/games/mana-games/apps/web/src/components/InstallPrompt.astro b/games/mana-games/apps/web/src/components/InstallPrompt.astro
deleted file mode 100644
index ece6b2ccb..000000000
--- a/games/mana-games/apps/web/src/components/InstallPrompt.astro
+++ /dev/null
@@ -1,183 +0,0 @@
----
-// Keine Props benötigt
----
-
-<div id="install-prompt" class="install-prompt hidden">
-	<div class="prompt-content">
-		<div class="prompt-icon">📱</div>
-		<div class="prompt-text">
-			<h3>App installieren</h3>
-			<p>Installiere Mana Games für schnelleren Zugriff!</p>
-		</div>
-		<div class="prompt-actions">
-			<button id="install-button" class="install-btn">Installieren</button>
-			<button id="dismiss-button" class="dismiss-btn">Später</button>
-		</div>
-	</div>
-</div>
-
-<style>
-	.install-prompt {
-		position: fixed;
-		bottom: 2rem;
-		left: 50%;
-		transform: translateX(-50%);
-		background-color: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 1.5rem;
-		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-		z-index: 1000;
-		max-width: 400px;
-		width: calc(100% - 2rem);
-		transition: all 0.3s ease;
-	}
-
-	.install-prompt.hidden {
-		display: none;
-	}
-
-	.prompt-content {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.prompt-icon {
-		font-size: 2.5rem;
-		flex-shrink: 0;
-	}
-
-	.prompt-text h3 {
-		margin: 0 0 0.25rem 0;
-		font-size: 1.1rem;
-		color: var(--color-text);
-	}
-
-	.prompt-text p {
-		margin: 0;
-		font-size: 0.9rem;
-		color: var(--color-text-secondary);
-	}
-
-	.prompt-actions {
-		display: flex;
-		gap: 0.5rem;
-		flex-shrink: 0;
-	}
-
-	.install-btn,
-	.dismiss-btn {
-		padding: 0.5rem 1rem;
-		border-radius: 0.5rem;
-		font-size: 0.9rem;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		border: none;
-	}
-
-	.install-btn {
-		background-color: var(--color-accent);
-		color: #000;
-	}
-
-	.install-btn:hover {
-		background-color: var(--color-accent-secondary);
-		transform: translateY(-1px);
-	}
-
-	.dismiss-btn {
-		background-color: transparent;
-		color: var(--color-text-secondary);
-		border: 1px solid var(--color-border);
-	}
-
-	.dismiss-btn:hover {
-		background-color: rgba(255, 255, 255, 0.05);
-	}
-
-	@media (max-width: 768px) {
-		.install-prompt {
-			bottom: 1rem;
-			padding: 1rem;
-		}
-
-		.prompt-content {
-			flex-wrap: wrap;
-		}
-
-		.prompt-icon {
-			font-size: 2rem;
-		}
-
-		.prompt-actions {
-			width: 100%;
-			margin-top: 1rem;
-		}
-
-		.install-btn,
-		.dismiss-btn {
-			flex: 1;
-		}
-	}
-</style>
-
-<script>
-	let deferredPrompt: any;
-	const installPrompt = document.getElementById('install-prompt');
-	const installButton = document.getElementById('install-button');
-	const dismissButton = document.getElementById('dismiss-button');
-
-	// Prüfe ob App bereits installiert ist
-	if (window.matchMedia('(display-mode: standalone)').matches) {
-		// App ist bereits installiert
-	} else {
-		// Zeige Prompt nach 30 Sekunden oder 3 Seitenaufrufen
-		const promptShown = localStorage.getItem('install-prompt-shown');
-		const pageViews = parseInt(localStorage.getItem('page-views') || '0') + 1;
-		localStorage.setItem('page-views', pageViews.toString());
-
-		if (!promptShown && pageViews >= 3) {
-			setTimeout(() => {
-				if (installPrompt && deferredPrompt) {
-					installPrompt.classList.remove('hidden');
-				}
-			}, 30000);
-		}
-	}
-
-	// Installationsprompt abfangen
-	window.addEventListener('beforeinstallprompt', (e) => {
-		e.preventDefault();
-		deferredPrompt = e;
-	});
-
-	// Install Button Handler
-	installButton?.addEventListener('click', async () => {
-		if (!deferredPrompt) return;
-
-		deferredPrompt.prompt();
-		const { outcome } = await deferredPrompt.userChoice;
-
-		if (outcome === 'accepted') {
-			console.log('PWA wurde installiert');
-		}
-
-		deferredPrompt = null;
-		installPrompt?.classList.add('hidden');
-		localStorage.setItem('install-prompt-shown', 'true');
-	});
-
-	// Dismiss Button Handler
-	dismissButton?.addEventListener('click', () => {
-		installPrompt?.classList.add('hidden');
-		localStorage.setItem('install-prompt-shown', 'true');
-	});
-
-	// App wurde installiert
-	window.addEventListener('appinstalled', () => {
-		console.log('PWA wurde erfolgreich installiert');
-		installPrompt?.classList.add('hidden');
-	});
-</script>
diff --git a/games/mana-games/apps/web/src/components/MyGamesSection.astro b/games/mana-games/apps/web/src/components/MyGamesSection.astro
deleted file mode 100644
index 85220c973..000000000
--- a/games/mana-games/apps/web/src/components/MyGamesSection.astro
+++ /dev/null
@@ -1,537 +0,0 @@
----
-export interface Props {
-	maxGames?: number;
-}
-
-const { maxGames = 8 } = Astro.props;
----
-
-<div class="my-games-section">
-	<div class="section-header">
-		<h2>Meine generierten Spiele</h2>
-		<div class="section-actions">
-			<button id="viewAllMyGames" class="action-btn"> Alle anzeigen </button>
-			<button id="clearMyGames" class="action-btn danger hidden"> Alle löschen </button>
-		</div>
-	</div>
-
-	<div id="myGamesContainer" class="my-games-container">
-		<div class="loading-state">
-			<div class="spinner"></div>
-			<p>Lade deine Spiele...</p>
-		</div>
-	</div>
-
-	<div id="emptyState" class="empty-state hidden">
-		<div class="empty-content">
-			<p class="empty-icon">🎮</p>
-			<p class="empty-text">Du hast noch keine Spiele erstellt</p>
-			<a href="/create" class="create-btn"> Erstelle dein erstes Spiel </a>
-		</div>
-	</div>
-</div>
-
-<script>
-	interface SavedGame {
-		id: string;
-		title: string;
-		description: string;
-		prompt: string;
-		html: string;
-		createdAt: Date;
-		updatedAt: Date;
-		thumbnail?: string;
-		stats?: {
-			linesOfCode: number;
-			hasAnimation: boolean;
-			hasSound: boolean;
-		};
-	}
-
-	class MyGamesManager {
-		private dbName = 'ManaGamesDB';
-		private storeName = 'generatedGames';
-		private db: IDBDatabase | null = null;
-		private container: HTMLElement;
-		private emptyState: HTMLElement;
-		private viewAllBtn: HTMLElement;
-		private clearBtn: HTMLElement;
-		private maxGames: number;
-
-		constructor(maxGames: number = 8) {
-			this.container = document.getElementById('myGamesContainer')!;
-			this.emptyState = document.getElementById('emptyState')!;
-			this.viewAllBtn = document.getElementById('viewAllMyGames')!;
-			this.clearBtn = document.getElementById('clearMyGames')!;
-			this.maxGames = maxGames;
-
-			this.init();
-		}
-
-		async init() {
-			await this.openDB();
-			await this.loadGames();
-
-			// Event listeners
-			this.viewAllBtn.addEventListener('click', () => {
-				window.location.href = '/my-games';
-			});
-
-			this.clearBtn.addEventListener('click', async () => {
-				if (confirm('Bist du sicher, dass du alle deine generierten Spiele löschen möchtest?')) {
-					await this.clearAllGames();
-				}
-			});
-		}
-
-		async openDB(): Promise<void> {
-			return new Promise((resolve, reject) => {
-				const request = indexedDB.open(this.dbName, 1);
-
-				request.onerror = () => reject(request.error);
-				request.onsuccess = () => {
-					this.db = request.result;
-					resolve();
-				};
-
-				request.onupgradeneeded = (event) => {
-					const db = (event.target as IDBOpenDBRequest).result;
-					if (!db.objectStoreNames.contains(this.storeName)) {
-						const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
-						store.createIndex('createdAt', 'createdAt', { unique: false });
-						store.createIndex('title', 'title', { unique: false });
-					}
-				};
-			});
-		}
-
-		async loadGames() {
-			try {
-				const games = await this.getAllGames();
-
-				if (games.length === 0) {
-					this.showEmptyState();
-					return;
-				}
-
-				// Sort by creation date (newest first)
-				games.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-
-				// Show only first maxGames
-				const displayGames = games.slice(0, this.maxGames);
-				this.renderGames(displayGames, games.length);
-
-				// Show/hide buttons
-				if (games.length > this.maxGames) {
-					this.viewAllBtn.classList.remove('hidden');
-				}
-				this.clearBtn.classList.remove('hidden');
-			} catch (error) {
-				console.error('Error loading games:', error);
-				this.showError();
-			}
-		}
-
-		async getAllGames(): Promise<SavedGame[]> {
-			if (!this.db) await this.openDB();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readonly');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.getAll();
-
-				request.onsuccess = () => resolve(request.result || []);
-				request.onerror = () => reject(request.error);
-			});
-		}
-
-		async deleteGame(id: string): Promise<void> {
-			if (!this.db) await this.openDB();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readwrite');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.delete(id);
-
-				request.onsuccess = () => resolve();
-				request.onerror = () => reject(request.error);
-			});
-		}
-
-		async clearAllGames() {
-			if (!this.db) await this.openDB();
-
-			const transaction = this.db!.transaction([this.storeName], 'readwrite');
-			const store = transaction.objectStore(this.storeName);
-			await store.clear();
-
-			this.showEmptyState();
-			this.clearBtn.classList.add('hidden');
-			this.viewAllBtn.classList.add('hidden');
-		}
-
-		renderGames(games: SavedGame[], totalCount: number) {
-			const gamesHTML = games.map((game) => this.createGameCard(game)).join('');
-
-			this.container.innerHTML = `
-        <div class="games-grid">
-          ${gamesHTML}
-        </div>
-        ${
-					totalCount > this.maxGames
-						? `
-          <p class="more-games-text">
-            +${totalCount - this.maxGames} weitere Spiele in deiner Bibliothek
-          </p>
-        `
-						: ''
-				}
-      `;
-
-			// Add event listeners to game cards
-			this.container.querySelectorAll('.delete-game-btn').forEach((btn) => {
-				btn.addEventListener('click', async (e) => {
-					e.stopPropagation();
-					const gameId = (e.target as HTMLElement)
-						.closest('.delete-game-btn')
-						?.getAttribute('data-game-id');
-					if (gameId) {
-						await this.deleteGame(gameId);
-						await this.loadGames();
-					}
-				});
-			});
-
-			this.container.querySelectorAll('.my-game-card').forEach((card) => {
-				card.addEventListener('click', (e) => {
-					if (!(e.target as HTMLElement).closest('.delete-game-btn')) {
-						const gameId = card.getAttribute('data-game-id');
-						if (gameId) {
-							window.location.href = `/play-generated?id=${gameId}`;
-						}
-					}
-				});
-			});
-		}
-
-		createGameCard(game: SavedGame): string {
-			const date = new Date(game.createdAt).toLocaleDateString('de-DE', {
-				day: '2-digit',
-				month: '2-digit',
-				year: 'numeric',
-			});
-
-			return `
-        <div class="my-game-card" data-game-id="${game.id}">
-          <div class="game-thumbnail">
-            ${
-							game.thumbnail
-								? `<img src="${game.thumbnail}" alt="${game.title}" />`
-								: `<div class="placeholder-thumbnail">🎮</div>`
-						}
-            <button class="delete-game-btn" data-game-id="${game.id}" title="Spiel löschen">
-              <span>×</span>
-            </button>
-          </div>
-          <div class="game-info">
-            <h3>${game.title}</h3>
-            <p class="game-date">${date}</p>
-            ${
-							game.stats
-								? `
-              <div class="game-stats">
-                <span>${game.stats.linesOfCode} Zeilen</span>
-                ${game.stats.hasAnimation ? '<span>🎬</span>' : ''}
-                ${game.stats.hasSound ? '<span>🔊</span>' : ''}
-              </div>
-            `
-								: ''
-						}
-          </div>
-        </div>
-      `;
-		}
-
-		showEmptyState() {
-			this.container.classList.add('hidden');
-			this.emptyState.classList.remove('hidden');
-		}
-
-		showError() {
-			this.container.innerHTML = `
-        <div class="error-state">
-          <p>Fehler beim Laden der Spiele</p>
-        </div>
-      `;
-		}
-	}
-
-	// Initialize when DOM is ready
-	document.addEventListener('DOMContentLoaded', () => {
-		const maxGames = parseInt(
-			document.querySelector('.my-games-section')?.getAttribute('data-max-games') || '8'
-		);
-		new MyGamesManager(maxGames);
-	});
-</script>
-
-<style>
-	.my-games-section {
-		margin: 3rem 0;
-	}
-
-	.section-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 2rem;
-	}
-
-	.section-header h2 {
-		font-size: 1.75rem;
-		font-weight: 700;
-		color: var(--color-text);
-		margin: 0;
-	}
-
-	.section-actions {
-		display: flex;
-		gap: 1rem;
-	}
-
-	.action-btn {
-		background: var(--color-surface);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 0.5rem 1rem;
-		font-size: 0.875rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		font-family: inherit;
-	}
-
-	.action-btn:hover {
-		background: var(--color-bg);
-		border-color: var(--color-accent);
-	}
-
-	.action-btn.danger {
-		color: #ef4444;
-		border-color: rgba(239, 68, 68, 0.3);
-	}
-
-	.action-btn.danger:hover {
-		background: rgba(239, 68, 68, 0.1);
-		border-color: #ef4444;
-	}
-
-	.my-games-container {
-		min-height: 200px;
-	}
-
-	.loading-state {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 3rem;
-		color: var(--color-text-secondary);
-	}
-
-	.spinner {
-		width: 2rem;
-		height: 2rem;
-		border: 2px solid var(--color-border);
-		border-top-color: var(--color-accent);
-		border-radius: 50%;
-		animation: spin 1s linear infinite;
-		margin-bottom: 1rem;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.games-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-		gap: 1.5rem;
-	}
-
-	.my-game-card {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		overflow: hidden;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		position: relative;
-	}
-
-	.my-game-card:hover {
-		transform: translateY(-2px);
-		border-color: var(--color-accent);
-		box-shadow: 0 4px 12px rgba(0, 255, 136, 0.1);
-	}
-
-	.game-thumbnail {
-		position: relative;
-		aspect-ratio: 4/3;
-		background: var(--color-bg);
-		overflow: hidden;
-	}
-
-	.game-thumbnail img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.placeholder-thumbnail {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 3rem;
-		color: var(--color-text-muted);
-	}
-
-	.delete-game-btn {
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		background: rgba(0, 0, 0, 0.8);
-		color: white;
-		border: none;
-		border-radius: 50%;
-		width: 32px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		opacity: 0;
-		transition: all 0.2s ease;
-		font-size: 1.5rem;
-		line-height: 1;
-	}
-
-	.my-game-card:hover .delete-game-btn {
-		opacity: 1;
-	}
-
-	.delete-game-btn:hover {
-		background: rgba(239, 68, 68, 0.9);
-		transform: scale(1.1);
-	}
-
-	.game-info {
-		padding: 1rem;
-	}
-
-	.game-info h3 {
-		margin: 0 0 0.5rem 0;
-		font-size: 1rem;
-		font-weight: 600;
-		color: var(--color-text);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.game-date {
-		color: var(--color-text-secondary);
-		font-size: 0.875rem;
-		margin: 0 0 0.5rem 0;
-	}
-
-	.game-stats {
-		display: flex;
-		gap: 0.75rem;
-		font-size: 0.75rem;
-		color: var(--color-text-muted);
-	}
-
-	.game-stats span {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-	}
-
-	.more-games-text {
-		text-align: center;
-		color: var(--color-text-secondary);
-		margin-top: 2rem;
-		font-size: 0.9rem;
-	}
-
-	.empty-state {
-		padding: 4rem 2rem;
-		text-align: center;
-	}
-
-	.empty-content {
-		max-width: 400px;
-		margin: 0 auto;
-	}
-
-	.empty-icon {
-		font-size: 4rem;
-		margin: 0 0 1rem 0;
-		opacity: 0.3;
-	}
-
-	.empty-text {
-		color: var(--color-text-secondary);
-		font-size: 1.1rem;
-		margin: 0 0 2rem 0;
-	}
-
-	.create-btn {
-		display: inline-block;
-		background: var(--color-accent);
-		color: var(--color-bg);
-		padding: 0.75rem 2rem;
-		border-radius: 8px;
-		text-decoration: none;
-		font-weight: 600;
-		transition: all 0.2s ease;
-	}
-
-	.create-btn:hover {
-		background: var(--color-accent-hover);
-		transform: translateY(-1px);
-	}
-
-	.error-state {
-		text-align: center;
-		padding: 3rem;
-		color: #ef4444;
-	}
-
-	.hidden {
-		display: none !important;
-	}
-
-	@media (max-width: 768px) {
-		.games-grid {
-			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-			gap: 1rem;
-		}
-
-		.section-header {
-			flex-direction: column;
-			gap: 1rem;
-			align-items: flex-start;
-		}
-
-		.section-actions {
-			width: 100%;
-			justify-content: flex-start;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/layouts/Layout.astro b/games/mana-games/apps/web/src/layouts/Layout.astro
deleted file mode 100644
index efcc33870..000000000
--- a/games/mana-games/apps/web/src/layouts/Layout.astro
+++ /dev/null
@@ -1,713 +0,0 @@
----
-import Button from '../components/Button.astro';
-import InstallPrompt from '../components/InstallPrompt.astro';
-import Footer from '../components/Footer.astro';
-
-export interface Props {
-  title: string;
-  description?: string;
-  isGamePage?: boolean;
-  gameTitle?: string;
-  gameSlug?: string;
-  isPlayground?: boolean;
-  fullWidth?: boolean;
-  hideFooter?: boolean;
-}
-
-const { title, description = "Mana Games - Eine Sammlung von Web-basierten Spielen", isGamePage = false, gameTitle, gameSlug, isPlayground = false, fullWidth = false, hideFooter = false } = Astro.props;
----
-
-<!DOCTYPE html>
-<html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content={description} />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title} | Mana Games</title>
-    
-    <!-- PWA Manifest -->
-    <link rel="manifest" href="/manifest.json" />
-    
-    <!-- Theme Color -->
-    <meta name="theme-color" content="#1a1a1a" />
-    
-    <!-- iOS Meta Tags -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="apple-mobile-web-app-title" content="Mana Games" />
-    
-    <!-- iOS Icons -->
-    <link rel="apple-touch-icon" href="/icons/icon-180x180.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="167x167" href="/icons/icon-167x167.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png" />
-    
-    <!-- iOS Splash Screens -->
-    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/splash/splash-640x1136.png" />
-    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/splash/splash-750x1334.png" />
-    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="/splash/splash-828x1792.png" />
-    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/splash/splash-1125x2436.png" />
-    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="/splash/splash-1242x2688.png" />
-    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/splash/splash-1536x2048.png" />
-    <link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/splash/splash-1668x2224.png" />
-    <link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/splash/splash-2048x2732.png" />
-    
-    <!-- Microsoft Tiles -->
-    <meta name="msapplication-TileColor" content="#1a1a1a" />
-    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png" />
-    
-    <!-- Open Graph -->
-    <meta property="og:title" content={title + " | Mana Games"} />
-    <meta property="og:description" content={description} />
-    <meta property="og:type" content="website" />
-    <meta property="og:image" content="/icons/icon-512x512.png" />
-  </head>
-  <body class={fullWidth ? 'full-width' : ''}>
-    <nav>
-      <div class="nav-container">
-        {isGamePage ? (
-          <div class="breadcrumb">
-            <a href="/" class="breadcrumb-logo">
-              <span class="logo-text">MANA</span>
-              <span class="logo-accent">GAMES</span>
-            </a>
-            <span class="breadcrumb-separator">›</span>
-            <span class="breadcrumb-game">{gameTitle}</span>
-          </div>
-        ) : (
-          <a href="/" class="logo">
-            <span class="logo-text">MANA</span>
-            <span class="logo-accent">GAMES</span>
-          </a>
-        )}
-        <div class="nav-links">
-          {isGamePage ? (
-            <div class="game-controls">
-              <Button 
-                href="/" 
-                variant="ghost" 
-                size="icon" 
-                title="Zurück zur Spieleübersicht"
-                class="back-btn"
-              >
-                <span class="icon">←</span>
-              </Button>
-              <div class="separator"></div>
-              <Button 
-                id="menuBtn" 
-                variant="ghost" 
-                size="icon"
-                title="Menü öffnen"
-              >
-                <span class="icon">☰</span>
-              </Button>
-              <Button 
-                id="refreshBtn" 
-                variant="ghost" 
-                size="icon"
-                title="Spiel neu laden"
-              >
-                <span class="icon">↻</span>
-              </Button>
-              <Button 
-                id="fullscreenBtn" 
-                variant="ghost" 
-                size="icon"
-                title="Vollbild"
-              >
-                <span class="icon">⛶</span>
-              </Button>
-              <div class="separator"></div>
-              {isPlayground ? (
-                <Button 
-                  href={`/games/${gameSlug}`} 
-                  variant="accent" 
-                  size="icon"
-                  title="Zum Spiel"
-                >
-                  <span class="icon">🎮</span>
-                </Button>
-              ) : (
-                <Button 
-                  href={`/games/${gameSlug}/playground`} 
-                  variant="accent" 
-                  size="icon"
-                  title="Code bearbeiten"
-                >
-                  <span class="icon">🔧</span>
-                </Button>
-              )}
-            </div>
-          ) : (
-            <div class="nav-menu">
-              <Button href="/" variant="accent">Spiele</Button>
-              <Button href="/create" variant="accent">KI Generator</Button>
-              <Button href="/community" variant="accent">Community</Button>
-              <Button href="/submit" variant="ghost">Einreichen</Button>
-              <Button href="/stats" variant="ghost">Stats</Button>
-              
-              <!-- More Dropdown -->
-              <div class="dropdown">
-                <button class="dropdown-toggle" id="moreDropdown" title="Mehr Optionen">
-                  <span class="icon">⋮</span>
-                </button>
-                <div class="dropdown-menu" id="moreDropdownMenu">
-                  <button class="dropdown-item" id="debugToggleDropdown">
-                    <span class="icon">🐛</span>
-                    <span>Debug Borders</span>
-                  </button>
-                  <div class="dropdown-divider"></div>
-                  <a href="/datenschutz" class="dropdown-item">
-                    <span class="icon">🔒</span>
-                    <span>Datenschutz</span>
-                  </a>
-                  <a href="/impressum" class="dropdown-item">
-                    <span class="icon">📋</span>
-                    <span>Impressum</span>
-                  </a>
-                  <div class="dropdown-divider"></div>
-                  <a href="/agb" class="dropdown-item">
-                    <span class="icon">📜</span>
-                    <span>AGB</span>
-                  </a>
-                  <a href="/jugendschutz" class="dropdown-item">
-                    <span class="icon">🛡️</span>
-                    <span>Jugendschutz</span>
-                  </a>
-                  <a href="/copyright" class="dropdown-item">
-                    <span class="icon">©️</span>
-                    <span>Copyright</span>
-                  </a>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </nav>
-    <main>
-      <slot />
-    </main>
-    {!hideFooter && <Footer />}
-    <InstallPrompt />
-    <script>
-      // Service Worker Registration
-      if ('serviceWorker' in navigator) {
-        window.addEventListener('load', async () => {
-          try {
-            const registration = await navigator.serviceWorker.register('/sw.js');
-            console.log('Service Worker registriert:', registration);
-            
-            // Update gefunden
-            registration.addEventListener('updatefound', () => {
-              const newWorker = registration.installing;
-              newWorker.addEventListener('statechange', () => {
-                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
-                  // Neuer Service Worker verfügbar
-                  if (confirm('Neue Version verfügbar! Jetzt aktualisieren?')) {
-                    newWorker.postMessage({ type: 'SKIP_WAITING' });
-                    window.location.reload();
-                  }
-                }
-              });
-            });
-          } catch (error) {
-            console.error('Service Worker Registrierung fehlgeschlagen:', error);
-          }
-        });
-      }
-      
-      // iOS PWA Detection
-      if (window.navigator.standalone === true) {
-        document.documentElement.classList.add('ios-pwa');
-      }
-      
-      // Debug Borders Toggle
-      const debugToggleDropdown = document.getElementById('debugToggleDropdown');
-      const debugState = localStorage.getItem('debugBorders') === 'true';
-      
-      // Apply initial state
-      if (debugState) {
-        document.body.classList.add('debug-borders');
-      }
-      
-      // Function to toggle debug borders
-      function toggleDebugBorders() {
-        const isEnabled = document.body.classList.toggle('debug-borders');
-        localStorage.setItem('debugBorders', isEnabled.toString());
-      }
-      
-      // Add click handler for dropdown button
-      debugToggleDropdown?.addEventListener('click', () => {
-        toggleDebugBorders();
-        // Close dropdown after clicking
-        document.getElementById('moreDropdownMenu')?.classList.remove('show');
-      });
-      
-      // Dropdown Menu Toggle
-      const moreDropdown = document.getElementById('moreDropdown');
-      const moreDropdownMenu = document.getElementById('moreDropdownMenu');
-      
-      moreDropdown?.addEventListener('click', (e) => {
-        e.stopPropagation();
-        moreDropdownMenu?.classList.toggle('show');
-      });
-      
-      // Close dropdown when clicking outside
-      document.addEventListener('click', () => {
-        moreDropdownMenu?.classList.remove('show');
-      });
-      
-      // Prevent dropdown from closing when clicking inside
-      moreDropdownMenu?.addEventListener('click', (e) => {
-        e.stopPropagation();
-      });
-      
-      // Install Prompt für Android
-      let deferredPrompt;
-      window.addEventListener('beforeinstallprompt', (e) => {
-        e.preventDefault();
-        deferredPrompt = e;
-        
-        // Zeige Install-Button wenn gewünscht
-        const installButton = document.getElementById('install-button');
-        if (installButton) {
-          installButton.style.display = 'block';
-          installButton.addEventListener('click', async () => {
-            deferredPrompt.prompt();
-            const { outcome } = await deferredPrompt.userChoice;
-            console.log(`User ${outcome} the install prompt`);
-            deferredPrompt = null;
-          });
-        }
-      });
-    </script>
-  </body>
-</html>
-
-<style is:global>
-  :root {
-    --color-bg: #0a0a0a;
-    --color-bg-secondary: #1a1a1a;
-    --color-text: #ffffff;
-    --color-text-secondary: #b0b0b0;
-    --color-accent: #00ff88;
-    --color-accent-secondary: #00cc6a;
-    --color-border: #2a2a2a;
-    --max-width: 1200px;
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  html {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    line-height: 1.6;
-  }
-
-  body {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  body.no-scroll {
-    overflow: hidden;
-    height: 100vh;
-  }
-
-  main {
-    flex: 1;
-    width: 100%;
-    max-width: var(--max-width);
-    margin: 0 auto;
-    padding: 2rem;
-  }
-
-  body.full-width main {
-    max-width: none;
-    padding: 0;
-  }
-  
-  /* Override container widths for full-width pages */
-  body.full-width .hero,
-  body.full-width .games-section,
-  body.full-width .stats-section,
-  body.full-width section {
-    max-width: none !important;
-    width: 100% !important;
-  }
-  
-  body.full-width .games-grid {
-    max-width: none !important;
-    padding: 0 2rem;
-  }
-  
-  body.full-width .section-content,
-  body.full-width .stats-container {
-    max-width: none !important;
-  }
-
-  body.no-scroll main {
-    padding: 0;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  nav {
-    background-color: var(--color-bg-secondary);
-    border-bottom: 1px solid var(--color-border);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-  
-  /* Nav Left Container */
-  .nav-left {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-  
-  /* Debug Toggle Button */
-  .debug-toggle {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text-secondary);
-    font-size: 1rem;
-    padding: 0.5rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-radius: 4px;
-    opacity: 0.7;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  /* Dropdown Styles */
-  .dropdown {
-    position: relative;
-  }
-  
-  .dropdown-toggle {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text);
-    padding: 0.5rem 0.75rem;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 1.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .dropdown-toggle:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: var(--color-accent);
-  }
-  
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 0.5rem;
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    min-width: 200px;
-    padding: 0.5rem;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-10px);
-    transition: all 0.2s ease;
-    z-index: 1000;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-  
-  .dropdown-menu.show {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-  
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background: transparent;
-    border: none;
-    color: var(--color-text);
-    text-decoration: none;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-radius: 4px;
-    font-family: inherit;
-  }
-  
-  .dropdown-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    color: var(--color-accent);
-  }
-  
-  .dropdown-item .icon {
-    font-size: 1.1rem;
-    width: 1.5rem;
-    text-align: center;
-  }
-  
-  .dropdown-divider {
-    height: 1px;
-    background: var(--color-border);
-    margin: 0.5rem 0;
-  }
-  
-  .debug-toggle:hover {
-    opacity: 1;
-    background: rgba(255, 255, 255, 0.05);
-    border-color: var(--color-border);
-  }
-  
-  .debug-toggle.clicked {
-    animation: pulse 0.3s ease;
-  }
-  
-  body.debug-borders .debug-toggle {
-    opacity: 1;
-    color: var(--color-accent);
-    border-color: var(--color-accent);
-  }
-  
-  @keyframes pulse {
-    0% { transform: translateY(-50%) scale(1); }
-    50% { transform: translateY(-50%) scale(1.2); }
-    100% { transform: translateY(-50%) scale(1); }
-  }
-
-  .nav-container {
-    max-width: var(--max-width);
-    margin: 0 auto;
-    padding: 1rem 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .logo {
-    text-decoration: none;
-    font-size: 1.5rem;
-    font-weight: 900;
-    letter-spacing: -0.05em;
-  }
-
-  .logo-text {
-    color: var(--color-text);
-  }
-
-  .logo-accent {
-    color: var(--color-accent);
-    margin-left: 0.25rem;
-  }
-
-  .nav-links {
-    display: flex;
-    gap: 2rem;
-  }
-
-  .nav-menu {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-  }
-
-  .game-controls {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-  }
-
-  .separator {
-    width: 1px;
-    height: 24px;
-    background-color: var(--color-border);
-    margin: 0 0.5rem;
-  }
-
-  /* Special styling for back button */
-  .back-btn:hover {
-    background-color: var(--color-text) !important;
-    color: var(--color-bg) !important;
-    border-color: var(--color-text) !important;
-  }
-
-  /* Breadcrumb Navigation */
-  .breadcrumb {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-
-  .breadcrumb-logo {
-    text-decoration: none;
-    font-size: 1.5rem;
-    font-weight: 900;
-    letter-spacing: -0.05em;
-    opacity: 0.5;
-    transition: opacity 0.2s ease;
-  }
-
-  .breadcrumb-logo:hover {
-    opacity: 0.8;
-  }
-
-  .breadcrumb-logo .logo-text {
-    color: var(--color-text);
-  }
-
-  .breadcrumb-logo .logo-accent {
-    color: var(--color-accent);
-    margin-left: 0.25rem;
-  }
-
-  .breadcrumb-separator {
-    color: var(--color-text-secondary);
-    opacity: 0.3;
-    font-size: 1.5rem;
-    margin: 0 0.25rem;
-  }
-
-  .breadcrumb-game {
-    color: var(--color-text);
-    font-size: 1.5rem;
-    font-weight: 900;
-    letter-spacing: -0.05em;
-  }
-
-
-  h1, h2, h3, h4, h5, h6 {
-    color: var(--color-text);
-    margin-bottom: 1rem;
-  }
-
-  p {
-    margin-bottom: 1rem;
-  }
-
-  @media (max-width: 768px) {
-    main {
-      padding: 1rem;
-    }
-
-    .nav-container {
-      padding: 1rem;
-    }
-
-    .nav-links {
-      gap: 1rem;
-    }
-
-    .logo {
-      font-size: 1.25rem;
-    }
-
-    .breadcrumb-logo {
-      font-size: 1.25rem;
-    }
-
-    .breadcrumb-game {
-      font-size: 1.25rem;
-    }
-
-    .breadcrumb-separator {
-      font-size: 1.25rem;
-    }
-    
-    .debug-toggle {
-      font-size: 0.9rem;
-      padding: 0.4rem;
-    }
-    
-    .dropdown-toggle {
-      padding: 0.4rem 0.6rem;
-      font-size: 1rem;
-    }
-    
-    .dropdown-menu {
-      min-width: 180px;
-    }
-  }
-  
-  /* Debug Borders Styles */
-  body.debug-borders * {
-    outline: 1px solid rgba(255, 0, 0, 0.25);
-  }
-  
-  body.debug-borders div {
-    outline-color: rgba(0, 255, 0, 0.3);
-  }
-  
-  body.debug-borders button,
-  body.debug-borders a {
-    outline-color: rgba(0, 255, 255, 0.4);
-  }
-  
-  body.debug-borders section,
-  body.debug-borders article,
-  body.debug-borders main,
-  body.debug-borders nav,
-  body.debug-borders header,
-  body.debug-borders footer {
-    outline-color: rgba(255, 255, 0, 0.4);
-    outline-width: 2px;
-  }
-  
-  body.debug-borders form,
-  body.debug-borders input,
-  body.debug-borders textarea,
-  body.debug-borders select {
-    outline-color: rgba(255, 0, 255, 0.4);
-  }
-  
-  body.debug-borders img,
-  body.debug-borders video,
-  body.debug-borders iframe,
-  body.debug-borders canvas {
-    outline-color: rgba(255, 128, 0, 0.5);
-    outline-width: 2px;
-  }
-  
-  body.debug-borders .container,
-  body.debug-borders .wrapper,
-  body.debug-borders .panel,
-  body.debug-borders .split-container,
-  body.debug-borders .left-panel,
-  body.debug-borders .right-panel {
-    outline-color: rgba(128, 128, 255, 0.5);
-    outline-width: 2px;
-    outline-style: dashed;
-  }
-  
-  /* Hover effect for debug mode */
-  body.debug-borders *:hover {
-    outline-width: 2px;
-    outline-style: solid;
-  }
-  
-  /* Exclude debug button from debug borders */
-  body.debug-borders .debug-toggle {
-    outline: none !important;
-  }
-</style>
\ No newline at end of file
diff --git a/games/mana-games/apps/web/src/lib/components/GameCard.svelte b/games/mana-games/apps/web/src/lib/components/GameCard.svelte
new file mode 100644
index 000000000..a1ad111b8
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/components/GameCard.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Game } from '$lib/data/games';
+
+	let { game, href }: { game: Game; href: string } = $props();
+
+	const difficultyColors: Record<string, string> = {
+		Einfach: 'bg-green-500/20 text-green-400',
+		Mittel: 'bg-yellow-500/20 text-yellow-400',
+		Schwer: 'bg-red-500/20 text-red-400',
+	};
+</script>
+
+<a
+	{href}
+	class="group block rounded-xl border border-border bg-card p-0 overflow-hidden transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5"
+>
+	{#if game.thumbnail}
+		<div class="aspect-video w-full overflow-hidden bg-muted">
+			<img
+				src={game.thumbnail}
+				alt={game.title}
+				class="h-full w-full object-cover transition-transform group-hover:scale-105"
+				loading="lazy"
+			/>
+		</div>
+	{:else}
+		<div class="aspect-video w-full bg-muted flex items-center justify-center">
+			<span class="text-4xl opacity-40">🎮</span>
+		</div>
+	{/if}
+
+	<div class="p-4">
+		<div class="flex items-start justify-between gap-2 mb-2">
+			<h3 class="font-semibold text-foreground group-hover:text-primary transition-colors">
+				{game.title}
+			</h3>
+			<span class="shrink-0 text-xs px-2 py-0.5 rounded-full {difficultyColors[game.difficulty]}">
+				{game.difficulty}
+			</span>
+		</div>
+
+		<p class="text-sm text-muted-foreground line-clamp-2 mb-3">
+			{game.description}
+		</p>
+
+		<div class="flex flex-wrap gap-1">
+			{#each game.tags.slice(0, 3) as tag}
+				<span class="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
+					{tag}
+				</span>
+			{/each}
+		</div>
+	</div>
+</a>
diff --git a/games/mana-games/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte b/games/mana-games/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte
new file mode 100644
index 000000000..cc9f6e177
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { SkeletonBox } from '@manacore/shared-ui';
+</script>
+
+<div class="app-loading-skeleton" role="status" aria-label="App wird geladen...">
+	<div class="header-skeleton">
+		<SkeletonBox width="120px" height="32px" borderRadius="8px" />
+		<div class="header-nav">
+			<SkeletonBox width="80px" height="32px" borderRadius="16px" />
+			<SkeletonBox width="80px" height="32px" borderRadius="16px" />
+		</div>
+		<SkeletonBox width="36px" height="36px" borderRadius="50%" />
+	</div>
+
+	<div class="content-skeleton">
+		<div class="games-placeholder">
+			{#each Array(6) as _}
+				<SkeletonBox width="100%" height="200px" borderRadius="12px" />
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.app-loading-skeleton {
+		min-height: 100vh;
+		background: hsl(var(--background));
+	}
+
+	.header-skeleton {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 2rem;
+		border-bottom: 1px solid hsl(var(--border));
+	}
+
+	.header-nav {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.content-skeleton {
+		max-width: 80rem;
+		margin: 0 auto;
+		padding: 2rem;
+	}
+
+	.games-placeholder {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+		gap: 1.5rem;
+	}
+
+	@media (max-width: 768px) {
+		.header-nav {
+			display: none;
+		}
+
+		.header-skeleton {
+			padding: 1rem;
+		}
+
+		.content-skeleton {
+			padding: 1rem;
+		}
+
+		.games-placeholder {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/games/mana-games/apps/web/src/lib/components/skeletons/index.ts b/games/mana-games/apps/web/src/lib/components/skeletons/index.ts
new file mode 100644
index 000000000..f09e744bb
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/components/skeletons/index.ts
@@ -0,0 +1 @@
+export { default as AppLoadingSkeleton } from './AppLoadingSkeleton.svelte';
diff --git a/games/mana-games/apps/web/src/data/games.ts b/games/mana-games/apps/web/src/lib/data/games.ts
similarity index 78%
rename from games/mana-games/apps/web/src/data/games.ts
rename to games/mana-games/apps/web/src/lib/data/games.ts
index 24a0c5208..d3cf640dc 100644
--- a/games/mana-games/apps/web/src/data/games.ts
+++ b/games/mana-games/apps/web/src/lib/data/games.ts
@@ -14,7 +14,6 @@ export interface Game {
 		code: number;
 		comments: number;
 	};
-	// Community game fields
 	community?: boolean;
 	author?: string;
 	submittedAt?: string;
@@ -33,11 +32,7 @@ export const games: Game[] = [
 		difficulty: 'Einfach',
 		complexity: 'Komplex',
 		controls: 'Pfeiltasten oder WASD zum Steuern',
-		codeStats: {
-			total: 604,
-			code: 338,
-			comments: 192,
-		},
+		codeStats: { total: 604, code: 338, comments: 192 },
 	},
 	{
 		id: '2',
@@ -51,11 +46,7 @@ export const games: Game[] = [
 		difficulty: 'Mittel',
 		complexity: 'Mittel',
 		controls: 'A/D oder Pfeiltasten zum Bewegen, Leertaste zum Schießen',
-		codeStats: {
-			total: 436,
-			code: 348,
-			comments: 32,
-		},
+		codeStats: { total: 436, code: 348, comments: 32 },
 	},
 	{
 		id: '3',
@@ -69,11 +60,7 @@ export const games: Game[] = [
 		difficulty: 'Schwer',
 		complexity: 'Mittel',
 		controls: 'Klicke für Gravitationspunkte, Leertaste für Partikel',
-		codeStats: {
-			total: 426,
-			code: 348,
-			comments: 21,
-		},
+		codeStats: { total: 426, code: 348, comments: 21 },
 	},
 	{
 		id: '4',
@@ -87,11 +74,7 @@ export const games: Game[] = [
 		difficulty: 'Einfach',
 		complexity: 'Einfach',
 		controls: 'Mausbewegung zum Steuern des Paddles',
-		codeStats: {
-			total: 437,
-			code: 289,
-			comments: 87,
-		},
+		codeStats: { total: 437, code: 289, comments: 87 },
 	},
 	{
 		id: '5',
@@ -105,11 +88,7 @@ export const games: Game[] = [
 		difficulty: 'Mittel',
 		complexity: 'Komplex',
 		controls: 'WASD oder Pfeiltasten zum Bewegen',
-		codeStats: {
-			total: 832,
-			code: 644,
-			comments: 69,
-		},
+		codeStats: { total: 832, code: 644, comments: 69 },
 	},
 	{
 		id: '6',
@@ -123,11 +102,7 @@ export const games: Game[] = [
 		difficulty: 'Mittel',
 		complexity: 'Komplex',
 		controls: 'A, S, D, F Tasten im Rhythmus drücken',
-		codeStats: {
-			total: 741,
-			code: 584,
-			comments: 56,
-		},
+		codeStats: { total: 741, code: 584, comments: 56 },
 	},
 	{
 		id: '7',
@@ -140,11 +115,7 @@ export const games: Game[] = [
 		difficulty: 'Einfach',
 		complexity: 'Minimal',
 		controls: 'Klicke auf das rote Quadrat',
-		codeStats: {
-			total: 111,
-			code: 88,
-			comments: 23,
-		},
+		codeStats: { total: 111, code: 88, comments: 23 },
 	},
 	{
 		id: '8',
@@ -158,11 +129,7 @@ export const games: Game[] = [
 		difficulty: 'Einfach',
 		complexity: 'Minimal',
 		controls: 'Klicke die Farben in der richtigen Reihenfolge',
-		codeStats: {
-			total: 86,
-			code: 86,
-			comments: 0,
-		},
+		codeStats: { total: 86, code: 86, comments: 0 },
 	},
 	{
 		id: '9',
@@ -176,11 +143,7 @@ export const games: Game[] = [
 		difficulty: 'Einfach',
 		complexity: 'Minimal',
 		controls: 'Klicke wenn der Bildschirm grün wird',
-		codeStats: {
-			total: 78,
-			code: 78,
-			comments: 0,
-		},
+		codeStats: { total: 78, code: 78, comments: 0 },
 	},
 	{
 		id: '10',
@@ -194,35 +157,27 @@ export const games: Game[] = [
 		difficulty: 'Mittel',
 		complexity: 'Mittel',
 		controls: 'WASD oder Pfeiltasten zum Fliegen, Leertaste für Boost',
-		codeStats: {
-			total: 485,
-			code: 428,
-			comments: 57,
-		},
+		codeStats: { total: 485, code: 428, comments: 57 },
 	},
 	{
 		id: '11',
 		title: 'Fish Catcher',
 		description:
-			'Fange Fische mit deinem Boot! Verschiedene Fischarten bringen unterschiedliche Punkte. Sammle Power-ups für größere Netze und Boni.',
+			'Fange Fische mit deinem Boot! Verschiedene Fischarten bringen unterschiedliche Punkte.',
 		slug: 'fish-catcher',
 		htmlFile: '/games/fish_catcher.html',
 		thumbnail: '/screenshots/fish-catcher.jpg',
 		tags: ['Arcade', 'Familie', 'Entspannend'],
 		difficulty: 'Einfach',
 		complexity: 'Einfach',
-		controls: 'A/D oder Pfeiltasten zum Bewegen, Maus für sanfte Steuerung',
-		codeStats: {
-			total: 362,
-			code: 321,
-			comments: 41,
-		},
+		controls: 'A/D oder Pfeiltasten zum Bewegen',
+		codeStats: { total: 362, code: 321, comments: 41 },
 	},
 	{
 		id: '12',
 		title: 'Balloon Pop',
 		description:
-			'Platze bunte Ballons bevor sie entkommen! Verschiedene Ballonarten, Power-ups und Combo-System für maximalen Spaß.',
+			'Platze bunte Ballons bevor sie entkommen! Verschiedene Ballonarten, Power-ups und Combo-System.',
 		slug: 'balloon-pop',
 		htmlFile: '/games/balloon_pop.html',
 		thumbnail: '/screenshots/balloon-pop.jpg',
@@ -230,11 +185,7 @@ export const games: Game[] = [
 		difficulty: 'Einfach',
 		complexity: 'Einfach',
 		controls: 'Maus zum Klicken auf Ballons',
-		codeStats: {
-			total: 398,
-			code: 351,
-			comments: 47,
-		},
+		codeStats: { total: 398, code: 351, comments: 47 },
 	},
 	{
 		id: '13',
@@ -243,34 +194,24 @@ export const games: Game[] = [
 			'Entschlüssele durcheinandergewürfelte Wörter! Mit 5 Kategorien, Combo-System und steigender Schwierigkeit.',
 		slug: 'word-scramble',
 		htmlFile: '/games/word_scramble.html',
-		thumbnail: '/screenshots/word-scramble.jpg',
 		tags: ['Puzzle', 'Wortspiel', 'Bildung'],
 		difficulty: 'Mittel',
 		complexity: 'Mittel',
 		controls: 'Tastatur zum Eingeben, Maus zum Klicken auf Buchstaben',
-		codeStats: {
-			total: 850,
-			code: 720,
-			comments: 130,
-		},
+		codeStats: { total: 850, code: 720, comments: 130 },
 	},
 	{
 		id: '14',
 		title: 'Memory Card Match',
 		description:
-			'Das klassische Memory-Spiel! Finde alle Kartenpaare mit Emojis. Drei Schwierigkeitsstufen für jeden Spieler.',
+			'Das klassische Memory-Spiel! Finde alle Kartenpaare mit Emojis. Drei Schwierigkeitsstufen.',
 		slug: 'memory-card-match',
 		htmlFile: '/games/memory_card_match.html',
-		thumbnail: '/screenshots/memory-card-match.jpg',
 		tags: ['Gedächtnis', 'Kartenspiel', 'Familie'],
 		difficulty: 'Einfach',
 		complexity: 'Einfach',
 		controls: 'Maus zum Aufdecken der Karten',
-		codeStats: {
-			total: 415,
-			code: 350,
-			comments: 0,
-		},
+		codeStats: { total: 415, code: 350, comments: 0 },
 	},
 	{
 		id: '15',
@@ -279,106 +220,76 @@ export const games: Game[] = [
 			'Drift durch die Kurven und stelle Bestzeiten auf! Mit realistischer Drift-Physik und Nitro-Boost.',
 		slug: 'turbo-racer',
 		htmlFile: '/games/turbo_racer.html',
-		thumbnail: '/screenshots/turbo-racer.jpg',
 		tags: ['Rennen', 'Action', 'Arcade'],
 		difficulty: 'Mittel',
 		complexity: 'Mittel',
 		controls: 'WASD oder Pfeiltasten zum Fahren, Leertaste für Boost',
-		codeStats: {
-			total: 680,
-			code: 620,
-			comments: 60,
-		},
+		codeStats: { total: 680, code: 620, comments: 60 },
 	},
 	{
 		id: '16',
 		title: 'Card Stack Rush',
 		description:
-			'Sortiere Karten blitzschnell auf die richtigen Stapel! Mit wechselnden Regeln, Combo-System und Zeitdruck.',
+			'Sortiere Karten blitzschnell auf die richtigen Stapel! Mit wechselnden Regeln und Combo-System.',
 		slug: 'card-stack-rush',
 		htmlFile: '/games/card_stack_rush.html',
-		thumbnail: '/screenshots/card-stack-rush.jpg',
 		tags: ['Kartenspiel', 'Geschwindigkeit', 'Arcade'],
 		difficulty: 'Mittel',
 		complexity: 'Einfach',
 		controls: 'Drag & Drop oder Klicken zum Platzieren',
-		codeStats: {
-			total: 520,
-			code: 480,
-			comments: 0,
-		},
+		codeStats: { total: 520, code: 480, comments: 0 },
 	},
 	{
 		id: '17',
 		title: 'Flappy Mana',
 		description:
-			'Fliege durch Röhren und sammle Punkte! Ein Flappy Bird Klon mit Partikeleffekten und Highscore-System.',
+			'Fliege durch Röhren und sammle Punkte! Ein Flappy Bird Klon mit Partikeleffekten.',
 		slug: 'flappy-mana',
 		htmlFile: '/games/flappy_mana.html',
-		thumbnail: '/screenshots/flappy-mana.jpg',
 		tags: ['Arcade', 'Geschicklichkeit', 'Endless'],
 		difficulty: 'Mittel',
 		complexity: 'Einfach',
 		controls: 'Klick oder Leertaste zum Fliegen',
-		codeStats: {
-			total: 450,
-			code: 430,
-			comments: 20,
-		},
+		codeStats: { total: 450, code: 430, comments: 20 },
 	},
 	{
 		id: '18',
 		title: 'Mana Runner',
 		description:
-			'Laufe und springe durch magische Welten! Sammle Mana-Kristalle, weiche Hindernissen aus und schalte den Doppelsprung frei.',
+			'Laufe und springe durch magische Welten! Sammle Mana-Kristalle und weiche Hindernissen aus.',
 		slug: 'mana-runner',
 		htmlFile: '/games/mana_runner.html',
-		thumbnail: '/screenshots/mana-runner.jpg',
 		tags: ['Jump n Run', 'Arcade', 'Endless'],
 		difficulty: 'Mittel',
 		complexity: 'Mittel',
 		controls: 'Leertaste zum Springen, Doppelsprung nach 10 Kristallen',
-		codeStats: {
-			total: 600,
-			code: 580,
-			comments: 20,
-		},
+		codeStats: { total: 600, code: 580, comments: 20 },
 	},
 	{
 		id: '19',
 		title: 'Mana Defense',
 		description:
-			'Verteidige deinen Mana-Kristall! Baue Türme, plane deine Strategie und überlebe 20 Wellen von Gegnern.',
+			'Verteidige deinen Mana-Kristall! Baue Türme, plane deine Strategie und überlebe 20 Wellen.',
 		slug: 'mana-defense',
 		htmlFile: '/games/mana_defense.html',
-		thumbnail: '/screenshots/mana-defense.jpg',
 		tags: ['Tower Defense', 'Strategie', 'Aufbau'],
 		difficulty: 'Schwer',
 		complexity: 'Komplex',
 		controls: 'Maus zum Platzieren, 1-3 für Turmauswahl, S zum Verkaufen',
-		codeStats: {
-			total: 900,
-			code: 850,
-			comments: 50,
-		},
+		codeStats: { total: 900, code: 850, comments: 50 },
 	},
 	{
 		id: '20',
 		title: 'Mana Factory',
 		description:
-			'Baue die größte Mana-Produktionsanlage! Ein Idle-Game mit Upgrades, Prestige-System und exponentiellem Wachstum.',
+			'Baue die größte Mana-Produktionsanlage! Ein Idle-Game mit Upgrades und Prestige-System.',
 		slug: 'mana-factory',
 		htmlFile: '/games/mana_factory.html',
-		thumbnail: '/screenshots/mana-factory.jpg',
 		tags: ['Idle', 'Incremental', 'Aufbau'],
 		difficulty: 'Einfach',
 		complexity: 'Mittel',
 		controls: 'Maus zum Klicken und Kaufen',
-		codeStats: {
-			total: 800,
-			code: 750,
-			comments: 50,
-		},
+		codeStats: { total: 800, code: 750, comments: 50 },
 	},
 	{
 		id: '21',
@@ -387,15 +298,28 @@ export const games: Game[] = [
 			'Klassisches Tetris-Gameplay! Stapele fallende Blöcke, vervollständige Reihen und erreiche den höchsten Score.',
 		slug: 'puzzle-blocks',
 		htmlFile: '/games/puzzle_blocks.html',
-		thumbnail: '/screenshots/puzzle-blocks.jpg',
 		tags: ['Puzzle', 'Klassiker', 'Arcade'],
 		difficulty: 'Mittel',
 		complexity: 'Einfach',
 		controls: '← → zum Bewegen, ↑ zum Drehen, ↓ schneller fallen, Space für Harddrop',
-		codeStats: {
-			total: 450,
-			code: 420,
-			comments: 30,
-		},
+		codeStats: { total: 450, code: 420, comments: 30 },
 	},
 ];
+
+export function getGameBySlug(slug: string): Game | undefined {
+	return games.find((g) => g.slug === slug);
+}
+
+export function getGamesByTag(tag: string): Game[] {
+	return games.filter((g) => g.tags.includes(tag));
+}
+
+export function getAllTags(): string[] {
+	const tagSet = new Set<string>();
+	for (const game of games) {
+		for (const tag of game.tags) {
+			tagSet.add(tag);
+		}
+	}
+	return [...tagSet].sort();
+}
diff --git a/games/mana-games/apps/web/src/lib/data/guest-seed.ts b/games/mana-games/apps/web/src/lib/data/guest-seed.ts
new file mode 100644
index 000000000..221cf78d6
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/data/guest-seed.ts
@@ -0,0 +1 @@
+// No guest seed data needed — games are static HTML files, stats build up from play
diff --git a/games/mana-games/apps/web/src/lib/data/local-store.ts b/games/mana-games/apps/web/src/lib/data/local-store.ts
new file mode 100644
index 000000000..d172c2da5
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/data/local-store.ts
@@ -0,0 +1,55 @@
+import { createLocalStore, type BaseRecord } from '@manacore/local-store';
+
+// ─── Types ──────────────────────────────────────────────────
+
+export interface LocalGameStats extends BaseRecord {
+	gameId: string;
+	highScore: number;
+	lastScore: number;
+	gamesPlayed: number;
+	totalPlayTime: number;
+	lastPlayed: string;
+}
+
+export interface LocalGeneratedGame extends BaseRecord {
+	title: string;
+	description: string;
+	htmlCode: string;
+	prompt: string;
+	model: string;
+	iterationCount: number;
+}
+
+export interface LocalFavorite extends BaseRecord {
+	gameId: string;
+}
+
+// ─── Store ──────────────────────────────────────────────────
+
+const SYNC_SERVER_URL = import.meta.env.PUBLIC_SYNC_SERVER_URL || 'http://localhost:3050';
+
+export const gamesStore = createLocalStore({
+	appId: 'mana-games',
+	collections: [
+		{
+			name: 'gameStats',
+			indexes: ['gameId', 'highScore'],
+		},
+		{
+			name: 'generatedGames',
+			indexes: ['title'],
+		},
+		{
+			name: 'favorites',
+			indexes: ['gameId'],
+		},
+	],
+	sync: {
+		serverUrl: SYNC_SERVER_URL,
+	},
+});
+
+// Typed collection accessors
+export const gameStatsCollection = gamesStore.collection<LocalGameStats>('gameStats');
+export const generatedGameCollection = gamesStore.collection<LocalGeneratedGame>('generatedGames');
+export const favoriteCollection = gamesStore.collection<LocalFavorite>('favorites');
diff --git a/games/mana-games/apps/web/src/lib/data/queries.ts b/games/mana-games/apps/web/src/lib/data/queries.ts
new file mode 100644
index 000000000..65cde2135
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/data/queries.ts
@@ -0,0 +1,24 @@
+import { useLiveQueryWithDefault } from '@manacore/local-store/svelte';
+import {
+	gameStatsCollection,
+	generatedGameCollection,
+	favoriteCollection,
+	type LocalGameStats,
+	type LocalGeneratedGame,
+	type LocalFavorite,
+} from './local-store';
+
+export function useAllGameStats() {
+	return useLiveQueryWithDefault(async () => gameStatsCollection.getAll(), [] as LocalGameStats[]);
+}
+
+export function useAllGeneratedGames() {
+	return useLiveQueryWithDefault(async () => {
+		const games = await generatedGameCollection.getAll();
+		return games.reverse();
+	}, [] as LocalGeneratedGame[]);
+}
+
+export function useAllFavorites() {
+	return useLiveQueryWithDefault(async () => favoriteCollection.getAll(), [] as LocalFavorite[]);
+}
diff --git a/games/mana-games/apps/web/src/lib/i18n/index.ts b/games/mana-games/apps/web/src/lib/i18n/index.ts
new file mode 100644
index 000000000..99d8bb6c8
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/i18n/index.ts
@@ -0,0 +1,38 @@
+import { browser } from '$app/environment';
+import { init, register, locale, waitLocale } from 'svelte-i18n';
+
+export const supportedLocales = ['de', 'en'] as const;
+export type SupportedLocale = (typeof supportedLocales)[number];
+
+const defaultLocale = 'de';
+
+register('de', () => import('./locales/de.json'));
+register('en', () => import('./locales/en.json'));
+
+function getInitialLocale(): SupportedLocale {
+	if (browser) {
+		const stored = localStorage.getItem('mana_games_locale');
+		if (stored && supportedLocales.includes(stored as SupportedLocale)) {
+			return stored as SupportedLocale;
+		}
+		const browserLang = navigator.language.split('-')[0];
+		if (supportedLocales.includes(browserLang as SupportedLocale)) {
+			return browserLang as SupportedLocale;
+		}
+	}
+	return defaultLocale;
+}
+
+init({
+	fallbackLocale: defaultLocale,
+	initialLocale: getInitialLocale(),
+});
+
+export function setLocale(newLocale: SupportedLocale) {
+	locale.set(newLocale);
+	if (browser) {
+		localStorage.setItem('mana_games_locale', newLocale);
+	}
+}
+
+export { waitLocale };
diff --git a/games/mana-games/apps/web/src/lib/i18n/locales/de.json b/games/mana-games/apps/web/src/lib/i18n/locales/de.json
new file mode 100644
index 000000000..55092c71c
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/i18n/locales/de.json
@@ -0,0 +1,66 @@
+{
+	"app": {
+		"name": "Mana Games",
+		"loading": "Wird geladen..."
+	},
+	"nav": {
+		"home": "Spiele",
+		"create": "Erstellen",
+		"community": "Community",
+		"stats": "Statistiken",
+		"settings": "Einstellungen"
+	},
+	"home": {
+		"title": "Browser-Spiele",
+		"subtitle": "22+ Spiele direkt im Browser spielen",
+		"search": "Spiel suchen...",
+		"noResults": "Keine Spiele gefunden",
+		"allGames": "Alle Spiele",
+		"favorites": "Favoriten",
+		"recentlyPlayed": "Zuletzt gespielt"
+	},
+	"game": {
+		"play": "Spielen",
+		"difficulty": "Schwierigkeit",
+		"controls": "Steuerung",
+		"tags": "Tags",
+		"stats": "Statistiken",
+		"highScore": "Highscore",
+		"gamesPlayed": "Spiele gespielt",
+		"totalPlayTime": "Gesamtspielzeit",
+		"lastPlayed": "Zuletzt gespielt",
+		"back": "Zurück",
+		"fullscreen": "Vollbild",
+		"editor": "Code ansehen"
+	},
+	"create": {
+		"title": "Spiel erstellen",
+		"subtitle": "Beschreibe dein Spiel und lass es von KI generieren",
+		"prompt": "Was für ein Spiel soll erstellt werden?",
+		"promptPlaceholder": "Ein Neon-Snake-Spiel mit Partikeleffekten...",
+		"generate": "Generieren",
+		"generating": "Generiere Spiel...",
+		"model": "KI-Modell",
+		"iterate": "Verbessern",
+		"save": "Speichern",
+		"preview": "Vorschau"
+	},
+	"stats": {
+		"title": "Deine Statistiken",
+		"totalGames": "Gespielte Spiele",
+		"totalTime": "Gesamtspielzeit",
+		"favoriteGame": "Lieblingsspiel",
+		"noStats": "Noch keine Statistiken. Spiele ein paar Spiele!"
+	},
+	"difficulty": {
+		"Einfach": "Einfach",
+		"Mittel": "Mittel",
+		"Schwer": "Schwer"
+	},
+	"time": {
+		"justNow": "Gerade eben",
+		"minutesAgo": "Vor {minutes} Minuten",
+		"hoursAgo": "Vor {hours} Stunden",
+		"daysAgo": "Vor {days} Tagen"
+	}
+}
diff --git a/games/mana-games/apps/web/src/lib/i18n/locales/en.json b/games/mana-games/apps/web/src/lib/i18n/locales/en.json
new file mode 100644
index 000000000..9c7a22192
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/i18n/locales/en.json
@@ -0,0 +1,66 @@
+{
+	"app": {
+		"name": "Mana Games",
+		"loading": "Loading..."
+	},
+	"nav": {
+		"home": "Games",
+		"create": "Create",
+		"community": "Community",
+		"stats": "Statistics",
+		"settings": "Settings"
+	},
+	"home": {
+		"title": "Browser Games",
+		"subtitle": "22+ games to play right in your browser",
+		"search": "Search games...",
+		"noResults": "No games found",
+		"allGames": "All Games",
+		"favorites": "Favorites",
+		"recentlyPlayed": "Recently Played"
+	},
+	"game": {
+		"play": "Play",
+		"difficulty": "Difficulty",
+		"controls": "Controls",
+		"tags": "Tags",
+		"stats": "Statistics",
+		"highScore": "High Score",
+		"gamesPlayed": "Games Played",
+		"totalPlayTime": "Total Play Time",
+		"lastPlayed": "Last Played",
+		"back": "Back",
+		"fullscreen": "Fullscreen",
+		"editor": "View Code"
+	},
+	"create": {
+		"title": "Create Game",
+		"subtitle": "Describe your game and let AI generate it",
+		"prompt": "What kind of game should be created?",
+		"promptPlaceholder": "A neon snake game with particle effects...",
+		"generate": "Generate",
+		"generating": "Generating game...",
+		"model": "AI Model",
+		"iterate": "Improve",
+		"save": "Save",
+		"preview": "Preview"
+	},
+	"stats": {
+		"title": "Your Statistics",
+		"totalGames": "Games Played",
+		"totalTime": "Total Play Time",
+		"favoriteGame": "Favorite Game",
+		"noStats": "No statistics yet. Play some games!"
+	},
+	"difficulty": {
+		"Einfach": "Easy",
+		"Mittel": "Medium",
+		"Schwer": "Hard"
+	},
+	"time": {
+		"justNow": "Just now",
+		"minutesAgo": "{minutes} minutes ago",
+		"hoursAgo": "{hours} hours ago",
+		"daysAgo": "{days} days ago"
+	}
+}
diff --git a/games/mana-games/apps/web/src/lib/services/game-communication.ts b/games/mana-games/apps/web/src/lib/services/game-communication.ts
new file mode 100644
index 000000000..5ce7836f3
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/services/game-communication.ts
@@ -0,0 +1,114 @@
+import { gameStatsCollection, type LocalGameStats } from '$lib/data/local-store';
+
+export interface GameMessage {
+	type: 'GAME_EVENT' | 'GAME_LOADED' | 'GAME_ENDED';
+	gameId: string;
+	event?: string;
+	data?: Record<string, unknown>;
+}
+
+export function initGameCommunication(gameSlug: string) {
+	let gameStartTime: number | null = null;
+
+	async function getOrCreateStats(gameId: string): Promise<LocalGameStats | null> {
+		const all = await gameStatsCollection.getAll();
+		return all.find((s) => s.gameId === gameId) || null;
+	}
+
+	async function updateGameStats(gameId: string, update: Partial<LocalGameStats>) {
+		const existing = await getOrCreateStats(gameId);
+
+		if (existing) {
+			await gameStatsCollection.update(existing.id, {
+				...update,
+				lastPlayed: new Date().toISOString(),
+			});
+		} else {
+			await gameStatsCollection.insert({
+				gameId,
+				highScore: 0,
+				lastScore: 0,
+				gamesPlayed: 0,
+				totalPlayTime: 0,
+				lastPlayed: new Date().toISOString(),
+				...update,
+			});
+		}
+	}
+
+	function handleMessage(event: MessageEvent) {
+		if (event.origin !== window.location.origin) return;
+
+		const message = event.data as GameMessage;
+		if (!message.type || message.gameId !== gameSlug) return;
+
+		switch (message.type) {
+			case 'GAME_LOADED':
+				gameStartTime = Date.now();
+				getOrCreateStats(gameSlug).then((stats) => {
+					updateGameStats(gameSlug, {
+						gamesPlayed: (stats?.gamesPlayed || 0) + 1,
+					});
+				});
+				break;
+
+			case 'GAME_EVENT':
+				handleGameEvent(gameSlug, message.event!, message.data);
+				break;
+
+			case 'GAME_ENDED':
+				if (gameStartTime) {
+					const playTime = Math.floor((Date.now() - gameStartTime) / 1000);
+					getOrCreateStats(gameSlug).then((stats) => {
+						updateGameStats(gameSlug, {
+							totalPlayTime: (stats?.totalPlayTime || 0) + playTime,
+						});
+					});
+					gameStartTime = null;
+				}
+				break;
+		}
+	}
+
+	function handleBeforeUnload() {
+		if (gameStartTime) {
+			const playTime = Math.floor((Date.now() - gameStartTime) / 1000);
+			getOrCreateStats(gameSlug).then((stats) => {
+				updateGameStats(gameSlug, {
+					totalPlayTime: (stats?.totalPlayTime || 0) + playTime,
+				});
+			});
+		}
+	}
+
+	window.addEventListener('message', handleMessage);
+	window.addEventListener('beforeunload', handleBeforeUnload);
+
+	return () => {
+		window.removeEventListener('message', handleMessage);
+		window.removeEventListener('beforeunload', handleBeforeUnload);
+	};
+
+	async function handleGameEvent(
+		gameId: string,
+		event: string,
+		data: Record<string, unknown> | undefined
+	) {
+		if (!data) return;
+
+		switch (event) {
+			case 'SCORE_UPDATE':
+			case 'GAME_OVER': {
+				const score = data.score as number;
+				if (score) {
+					const stats = await getOrCreateStats(gameId);
+					await updateGameStats(gameId, {
+						lastScore: score,
+						highScore: Math.max(score, stats?.highScore || 0),
+					});
+				}
+				break;
+			}
+		}
+	}
+}
diff --git a/games/mana-games/apps/web/src/lib/stores/auth.svelte.ts b/games/mana-games/apps/web/src/lib/stores/auth.svelte.ts
new file mode 100644
index 000000000..060eba973
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/stores/auth.svelte.ts
@@ -0,0 +1,5 @@
+import { createManaAuthStore } from '@manacore/shared-auth-stores';
+
+export const authStore = createManaAuthStore({
+	devBackendPort: 3011,
+});
diff --git a/games/mana-games/apps/web/src/lib/stores/navigation.ts b/games/mana-games/apps/web/src/lib/stores/navigation.ts
new file mode 100644
index 000000000..cf9f78ecb
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/stores/navigation.ts
@@ -0,0 +1,5 @@
+import { createSimpleNavigationStores } from '@manacore/shared-stores';
+
+export const { isNavCollapsed } = createSimpleNavigationStores({
+	storageKey: 'mana-games',
+});
diff --git a/games/mana-games/apps/web/src/lib/stores/theme.svelte.ts b/games/mana-games/apps/web/src/lib/stores/theme.svelte.ts
new file mode 100644
index 000000000..a6469410b
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/stores/theme.svelte.ts
@@ -0,0 +1,6 @@
+import { createThemeStore } from '@manacore/shared-theme';
+
+export const theme = createThemeStore({
+	appId: 'mana-games',
+	defaultVariant: 'lume',
+});
diff --git a/games/mana-games/apps/web/src/lib/stores/user-settings.svelte.ts b/games/mana-games/apps/web/src/lib/stores/user-settings.svelte.ts
new file mode 100644
index 000000000..adee3724a
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/stores/user-settings.svelte.ts
@@ -0,0 +1,18 @@
+import { browser } from '$app/environment';
+import { createUserSettingsStore } from '@manacore/shared-theme';
+import { authStore } from './auth.svelte';
+
+function getAuthUrl(): string {
+	if (browser && typeof window !== 'undefined') {
+		const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+			.__PUBLIC_MANA_CORE_AUTH_URL__;
+		if (injectedUrl) return injectedUrl;
+	}
+	return import.meta.env.DEV ? 'http://localhost:3001' : '';
+}
+
+export const userSettings = createUserSettingsStore({
+	appId: 'mana-games',
+	authUrl: getAuthUrl,
+	getAccessToken: () => authStore.getAccessToken(),
+});
diff --git a/games/mana-games/apps/web/src/pages/about.astro b/games/mana-games/apps/web/src/pages/about.astro
deleted file mode 100644
index e7512cf4f..000000000
--- a/games/mana-games/apps/web/src/pages/about.astro
+++ /dev/null
@@ -1,684 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Button from '../components/Button.astro';
-import { games } from '../data/games';
-
-// Statistiken berechnen
-const totalGames = games.length;
-const totalLines = games.reduce((sum, game) => sum + (game.codeStats?.total || 0), 0);
-const genres = [...new Set(games.flatMap((game) => game.tags))].length;
-const complexityBreakdown = {
-	Minimal: games.filter((g) => g.complexity === 'Minimal').length,
-	Einfach: games.filter((g) => g.complexity === 'Einfach').length,
-	Mittel: games.filter((g) => g.complexity === 'Mittel').length,
-	Komplex: games.filter((g) => g.complexity === 'Komplex').length,
-};
----
-
-<Layout title="Über uns">
-	<div class="about-hero">
-		<div class="hero-background">
-			<div class="floating-element element-1"></div>
-			<div class="floating-element element-2"></div>
-			<div class="floating-element element-3"></div>
-		</div>
-		<div class="hero-content">
-			<h1 class="hero-title">
-				<span class="title-line">Mehr als nur</span>
-				<span class="title-highlight">Spiele</span>
-			</h1>
-			<p class="hero-subtitle">Eine Plattform für Kreativität, Lernen und Spaß</p>
-		</div>
-	</div>
-
-	<div class="about-container">
-		<!-- Mission Section -->
-		<section class="mission-section">
-			<div class="section-header">
-				<span class="section-number">01</span>
-				<h2>Unsere Mission</h2>
-			</div>
-			<div class="mission-grid">
-				<div class="mission-card">
-					<div class="card-icon">🎮</div>
-					<h3>Spielen ohne Grenzen</h3>
-					<p>
-						Keine Downloads, keine Installationen. Einfach spielen - direkt im Browser, auf jedem
-						Gerät.
-					</p>
-				</div>
-				<div class="mission-card">
-					<div class="card-icon">🎨</div>
-					<h3>Kreativität fördern</h3>
-					<p>
-						Jedes Spiel ist ein Kunstwerk aus Code. Von minimalistisch bis komplex - wir zeigen die
-						Vielfalt der Spieleentwicklung.
-					</p>
-				</div>
-				<div class="mission-card">
-					<div class="card-icon">📚</div>
-					<h3>Lernen durch Code</h3>
-					<p>
-						Unsere Spiele sind vollständig dokumentiert und dienen als Lernressource für angehende
-						Entwickler.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<!-- Stats Section -->
-		<section class="stats-section">
-			<div class="stats-grid">
-				<div class="stat-card">
-					<div class="stat-number">{totalGames}</div>
-					<div class="stat-label">Spiele</div>
-					<div class="stat-detail">und es werden mehr</div>
-				</div>
-				<div class="stat-card">
-					<div class="stat-number">{totalLines.toLocaleString('de-DE')}</div>
-					<div class="stat-label">Zeilen Code</div>
-					<div class="stat-detail">handgeschrieben</div>
-				</div>
-				<div class="stat-card">
-					<div class="stat-number">{genres}</div>
-					<div class="stat-label">Genres</div>
-					<div class="stat-detail">für jeden Geschmack</div>
-				</div>
-				<div class="stat-card">
-					<div class="stat-number">100%</div>
-					<div class="stat-label">Open Source</div>
-					<div class="stat-detail">lerne vom Code</div>
-				</div>
-			</div>
-		</section>
-
-		<!-- Games Showcase -->
-		<section class="showcase-section">
-			<div class="section-header">
-				<span class="section-number">02</span>
-				<h2>Unser Spielekatalog</h2>
-			</div>
-			<div class="showcase-content">
-				<div class="complexity-chart">
-					<h3>Komplexität unserer Spiele</h3>
-					<div class="chart-bars">
-						{
-							Object.entries(complexityBreakdown).map(([level, count]) => (
-								<div class="chart-bar">
-									<div class="bar-fill" style={`height: ${(count / totalGames) * 100}%`}>
-										<span class="bar-count">{count}</span>
-									</div>
-									<span class="bar-label">{level}</span>
-								</div>
-							))
-						}
-					</div>
-				</div>
-				<div class="featured-games">
-					<h3>Beliebte Kategorien</h3>
-					<div class="category-tags">
-						<span class="tag">🕹️ Arcade</span>
-						<span class="tag">🧩 Puzzle</span>
-						<span class="tag">🚀 Action</span>
-						<span class="tag">🎵 Rhythmus</span>
-						<span class="tag">🏃 Jump'n'Run</span>
-						<span class="tag">🗼 Tower Defense</span>
-					</div>
-					<p class="showcase-text">
-						Von klassischen Arcade-Spielen wie Snake bis zu innovativen Physik-Puzzles wie Gravity
-						Painter - unsere Sammlung wächst stetig. Jedes Spiel ist mit Liebe zum Detail entwickelt
-						und optimiert für flüssige Performance auf allen Geräten.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<!-- Technology Section -->
-		<section class="tech-section">
-			<div class="section-header">
-				<span class="section-number">03</span>
-				<h2>Moderne Technologie</h2>
-			</div>
-			<div class="tech-grid">
-				<div class="tech-card">
-					<div class="tech-icon">
-						<span>HTML5</span>
-					</div>
-					<h4>Canvas API</h4>
-					<p>Flüssige 60 FPS Grafiken direkt im Browser</p>
-				</div>
-				<div class="tech-card">
-					<div class="tech-icon">
-						<span>JS</span>
-					</div>
-					<h4>Vanilla JavaScript</h4>
-					<p>Keine Dependencies, pure Performance</p>
-				</div>
-				<div class="tech-card">
-					<div class="tech-icon">
-						<span>PWA</span>
-					</div>
-					<h4>Progressive Web App</h4>
-					<p>Installierbar, offline spielbar</p>
-				</div>
-				<div class="tech-card">
-					<div class="tech-icon">
-						<span>📱</span>
-					</div>
-					<h4>Responsive Design</h4>
-					<p>Perfekt auf jedem Bildschirm</p>
-				</div>
-			</div>
-		</section>
-
-		<!-- Philosophy Section -->
-		<section class="philosophy-section">
-			<div class="philosophy-content">
-				<h2>Unsere Philosophie</h2>
-				<blockquote>
-					"Spiele sollten mehr sein als nur Unterhaltung. Sie sind interaktive Kunst, technische
-					Meisterwerke und Lernwerkzeuge in einem."
-				</blockquote>
-				<div class="philosophy-points">
-					<div class="point">
-						<span class="point-icon">✨</span>
-						<div>
-							<strong>Qualität vor Quantität</strong>
-							<p>Jedes Spiel wird sorgfältig entwickelt und getestet</p>
-						</div>
-					</div>
-					<div class="point">
-						<span class="point-icon">🌍</span>
-						<div>
-							<strong>Zugänglichkeit für alle</strong>
-							<p>Kostenlos, werbefrei und ohne versteckte Kosten</p>
-						</div>
-					</div>
-					<div class="point">
-						<span class="point-icon">💡</span>
-						<div>
-							<strong>Innovation fördern</strong>
-							<p>Neue Spielkonzepte und kreative Mechaniken</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<!-- CTA Section -->
-		<section class="cta-section">
-			<div class="cta-content">
-				<h2>Werde Teil der Community</h2>
-				<p>
-					Hast du Ideen für neue Spiele? Möchtest du zur Plattform beitragen? Oder einfach nur
-					Feedback geben? Wir freuen uns von dir zu hören!
-				</p>
-				<div class="cta-buttons">
-					<Button href="/" variant="primary" size="large"> Spiele entdecken </Button>
-					<Button href="/stats" variant="accent" size="large"> Deine Statistiken </Button>
-				</div>
-			</div>
-		</section>
-	</div>
-</Layout>
-
-<style>
-	/* Hero Section */
-	.about-hero {
-		position: relative;
-		min-height: 50vh;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-		margin-bottom: 4rem;
-	}
-
-	.hero-background {
-		position: absolute;
-		inset: 0;
-		opacity: 0.1;
-	}
-
-	.floating-element {
-		position: absolute;
-		border: 2px solid var(--color-accent);
-		border-radius: 50%;
-		animation: float 20s ease-in-out infinite;
-	}
-
-	.element-1 {
-		width: 300px;
-		height: 300px;
-		top: -100px;
-		left: -100px;
-		animation-delay: 0s;
-	}
-
-	.element-2 {
-		width: 200px;
-		height: 200px;
-		bottom: -50px;
-		right: -50px;
-		animation-delay: 5s;
-	}
-
-	.element-3 {
-		width: 150px;
-		height: 150px;
-		top: 50%;
-		left: 80%;
-		animation-delay: 10s;
-	}
-
-	@keyframes float {
-		0%,
-		100% {
-			transform: translate(0, 0) rotate(0deg);
-		}
-		33% {
-			transform: translate(30px, -30px) rotate(120deg);
-		}
-		66% {
-			transform: translate(-20px, 20px) rotate(240deg);
-		}
-	}
-
-	.hero-content {
-		position: relative;
-		z-index: 1;
-		text-align: center;
-	}
-
-	.hero-title {
-		font-size: clamp(3rem, 8vw, 5rem);
-		font-weight: 900;
-		line-height: 1;
-		margin-bottom: 1rem;
-	}
-
-	.title-line {
-		display: block;
-		opacity: 0;
-		transform: translateY(20px);
-		animation: fadeInUp 0.6s ease forwards;
-	}
-
-	.title-highlight {
-		display: block;
-		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		opacity: 0;
-		transform: translateY(20px);
-		animation: fadeInUp 0.6s ease 0.2s forwards;
-	}
-
-	.hero-subtitle {
-		font-size: 1.5rem;
-		color: var(--color-text-secondary);
-		opacity: 0;
-		transform: translateY(20px);
-		animation: fadeInUp 0.6s ease 0.4s forwards;
-	}
-
-	@keyframes fadeInUp {
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* Container */
-	.about-container {
-		max-width: 1200px;
-		margin: 0 auto;
-	}
-
-	/* Sections */
-	section {
-		margin-bottom: 6rem;
-		opacity: 0;
-		transform: translateY(30px);
-		animation: fadeInUp 0.8s ease forwards;
-	}
-
-	.section-header {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		margin-bottom: 3rem;
-	}
-
-	.section-number {
-		font-size: 3rem;
-		font-weight: 900;
-		color: var(--color-accent);
-		opacity: 0.3;
-	}
-
-	h2 {
-		font-size: 2.5rem;
-		font-weight: 900;
-	}
-
-	/* Mission Section */
-	.mission-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-		gap: 2rem;
-	}
-
-	.mission-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-		transition: all 0.3s ease;
-	}
-
-	.mission-card:hover {
-		transform: translateY(-5px);
-		border-color: var(--color-accent);
-		box-shadow: 0 10px 30px rgba(0, 255, 136, 0.1);
-	}
-
-	.card-icon {
-		font-size: 3rem;
-		margin-bottom: 1rem;
-	}
-
-	.mission-card h3 {
-		color: var(--color-text);
-		margin-bottom: 0.5rem;
-	}
-
-	.mission-card p {
-		color: var(--color-text-secondary);
-		line-height: 1.6;
-	}
-
-	/* Stats Section */
-	.stats-section {
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent);
-		border-radius: 2rem;
-		padding: 3rem;
-		margin: 4rem 0;
-	}
-
-	.stats-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: 2rem;
-	}
-
-	.stat-card {
-		text-align: center;
-	}
-
-	.stat-number {
-		font-size: 3rem;
-		font-weight: 900;
-		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.stat-label {
-		font-size: 1.2rem;
-		color: var(--color-text);
-		margin: 0.5rem 0;
-	}
-
-	.stat-detail {
-		font-size: 0.9rem;
-		color: var(--color-text-secondary);
-	}
-
-	/* Showcase Section */
-	.showcase-content {
-		display: grid;
-		grid-template-columns: 1fr 2fr;
-		gap: 3rem;
-		align-items: start;
-	}
-
-	.complexity-chart {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.complexity-chart h3 {
-		margin-bottom: 1.5rem;
-		color: var(--color-text);
-	}
-
-	.chart-bars {
-		display: flex;
-		justify-content: space-around;
-		align-items: flex-end;
-		height: 200px;
-		gap: 1rem;
-	}
-
-	.chart-bar {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.bar-fill {
-		width: 100%;
-		background: linear-gradient(to top, var(--color-accent), var(--color-accent-secondary));
-		border-radius: 0.5rem 0.5rem 0 0;
-		display: flex;
-		align-items: flex-start;
-		justify-content: center;
-		padding-top: 0.5rem;
-		transition: height 0.5s ease;
-	}
-
-	.bar-count {
-		color: #000;
-		font-weight: 700;
-	}
-
-	.bar-label {
-		font-size: 0.9rem;
-		color: var(--color-text-secondary);
-	}
-
-	.featured-games h3 {
-		margin-bottom: 1rem;
-		color: var(--color-text);
-	}
-
-	.category-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		margin-bottom: 1.5rem;
-	}
-
-	.tag {
-		background: rgba(0, 255, 136, 0.1);
-		border: 1px solid var(--color-accent);
-		color: var(--color-accent);
-		padding: 0.5rem 1rem;
-		border-radius: 2rem;
-		font-size: 0.9rem;
-	}
-
-	.showcase-text {
-		color: var(--color-text-secondary);
-		line-height: 1.8;
-	}
-
-	/* Tech Section */
-	.tech-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-		gap: 2rem;
-	}
-
-	.tech-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-		text-align: center;
-		transition: all 0.3s ease;
-	}
-
-	.tech-card:hover {
-		transform: translateY(-5px);
-		border-color: var(--color-accent);
-	}
-
-	.tech-icon {
-		width: 80px;
-		height: 80px;
-		margin: 0 auto 1rem;
-		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
-		border-radius: 1rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-weight: 900;
-		font-size: 1.5rem;
-		color: #000;
-	}
-
-	.tech-card h4 {
-		color: var(--color-text);
-		margin-bottom: 0.5rem;
-	}
-
-	.tech-card p {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-	}
-
-	/* Philosophy Section */
-	.philosophy-section {
-		background: var(--color-bg-secondary);
-		border-radius: 2rem;
-		padding: 4rem;
-		margin: 4rem 0;
-	}
-
-	.philosophy-content h2 {
-		text-align: center;
-		margin-bottom: 2rem;
-	}
-
-	blockquote {
-		font-size: 1.5rem;
-		font-style: italic;
-		text-align: center;
-		color: var(--color-text-secondary);
-		margin: 2rem 0 3rem;
-		padding: 0 2rem;
-	}
-
-	.philosophy-points {
-		display: flex;
-		flex-direction: column;
-		gap: 2rem;
-	}
-
-	.point {
-		display: flex;
-		gap: 1.5rem;
-		align-items: start;
-	}
-
-	.point-icon {
-		font-size: 2rem;
-		flex-shrink: 0;
-	}
-
-	.point strong {
-		display: block;
-		color: var(--color-text);
-		margin-bottom: 0.25rem;
-	}
-
-	.point p {
-		color: var(--color-text-secondary);
-	}
-
-	/* CTA Section */
-	.cta-section {
-		text-align: center;
-		padding: 4rem;
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), transparent);
-		border-radius: 2rem;
-	}
-
-	.cta-content h2 {
-		margin-bottom: 1rem;
-	}
-
-	.cta-content p {
-		font-size: 1.2rem;
-		color: var(--color-text-secondary);
-		margin-bottom: 2rem;
-		max-width: 600px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.cta-buttons {
-		display: flex;
-		gap: 1rem;
-		justify-content: center;
-		flex-wrap: wrap;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.hero-title {
-			font-size: 3rem;
-		}
-
-		.hero-subtitle {
-			font-size: 1.2rem;
-		}
-
-		section {
-			margin-bottom: 4rem;
-		}
-
-		.section-header {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		h2 {
-			font-size: 2rem;
-		}
-
-		.showcase-content {
-			grid-template-columns: 1fr;
-		}
-
-		.philosophy-section {
-			padding: 2rem;
-		}
-
-		blockquote {
-			font-size: 1.2rem;
-		}
-
-		.cta-section {
-			padding: 2rem;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/agb.astro b/games/mana-games/apps/web/src/pages/agb.astro
deleted file mode 100644
index bb9a8a034..000000000
--- a/games/mana-games/apps/web/src/pages/agb.astro
+++ /dev/null
@@ -1,472 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Button from '../components/Button.astro';
----
-
-<Layout title="Nutzungsbedingungen">
-	<div class="agb-container">
-		<header class="agb-header">
-			<h1>Allgemeine Geschäftsbedingungen</h1>
-			<p class="subtitle">Nutzungsbedingungen für Mana Games</p>
-			<p class="last-updated">Stand: Januar 2024</p>
-		</header>
-
-		<nav class="toc">
-			<h2>Inhaltsverzeichnis</h2>
-			<ol>
-				<li><a href="#geltungsbereich">Geltungsbereich</a></li>
-				<li><a href="#nutzung">Nutzung der Plattform</a></li>
-				<li><a href="#registrierung">Registrierung und Nutzerkonto</a></li>
-				<li><a href="#inhalte">Nutzergenierte Inhalte</a></li>
-				<li><a href="#verhaltensregeln">Verhaltensregeln</a></li>
-				<li><a href="#geistigeseigentum">Geistiges Eigentum</a></li>
-				<li><a href="#haftung">Haftungsausschluss</a></li>
-				<li><a href="#datenschutz">Datenschutz</a></li>
-				<li><a href="#aenderungen">Änderungen der AGB</a></li>
-				<li><a href="#schlussbestimmungen">Schlussbestimmungen</a></li>
-			</ol>
-		</nav>
-
-		<section id="geltungsbereich" class="content-section">
-			<h2>§ 1 Geltungsbereich</h2>
-
-			<p>
-				(1) Diese Allgemeinen Geschäftsbedingungen (nachfolgend "AGB") gelten für die Nutzung der
-				Website mana-games.netlify.app (nachfolgend "Plattform") und alle darauf angebotenen Dienste
-				und Spiele.
-			</p>
-
-			<p>
-				(2) Mit der Nutzung der Plattform akzeptieren Sie diese AGB. Wenn Sie mit diesen Bedingungen
-				nicht einverstanden sind, nutzen Sie bitte unsere Dienste nicht.
-			</p>
-
-			<p>
-				(3) Die Plattform richtet sich an Nutzer aller Altersgruppen. Für minderjährige Nutzer
-				gelten zusätzlich unsere <a href="/jugendschutz">Jugendschutzbestimmungen</a>.
-			</p>
-		</section>
-
-		<section id="nutzung" class="content-section">
-			<h2>§ 2 Nutzung der Plattform</h2>
-
-			<p>
-				(1) Die Nutzung der Plattform und der darauf angebotenen Spiele ist grundsätzlich kostenlos
-				und ohne Registrierung möglich.
-			</p>
-
-			<p>
-				(2) Wir gewähren Ihnen ein nicht-exklusives, nicht übertragbares, widerrufliches Recht zur
-				persönlichen Nutzung der Plattform und der Spiele.
-			</p>
-
-			<div class="highlight-box">
-				<h4>Erlaubte Nutzung umfasst:</h4>
-				<ul>
-					<li>Spielen aller verfügbaren Spiele</li>
-					<li>Erstellen eigener Spiele mit dem KI-Generator</li>
-					<li>Speichern von Spielständen im lokalen Browser-Speicher</li>
-					<li>Teilen von Links zu Spielen</li>
-				</ul>
-			</div>
-
-			<div class="warning-box">
-				<h4>Nicht erlaubt ist:</h4>
-				<ul>
-					<li>Kommerzielle Nutzung ohne ausdrückliche Genehmigung</li>
-					<li>Automatisierte Zugriffe (Bots, Scraping)</li>
-					<li>Umgehung von Sicherheitsmaßnahmen</li>
-					<li>Verbreitung von Schadsoftware</li>
-				</ul>
-			</div>
-		</section>
-
-		<section id="registrierung" class="content-section">
-			<h2>§ 3 Registrierung und Nutzerkonto</h2>
-
-			<p>
-				(1) Aktuell ist keine Registrierung für die Nutzung der Plattform erforderlich. Alle Daten
-				werden lokal in Ihrem Browser gespeichert.
-			</p>
-
-			<p>
-				(2) Sollten wir in Zukunft Nutzerkonten einführen, werden wir Sie rechtzeitig informieren
-				und separate Bedingungen dafür bereitstellen.
-			</p>
-		</section>
-
-		<section id="inhalte" class="content-section">
-			<h2>§ 4 Nutzergenierte Inhalte</h2>
-
-			<p>
-				(1) Mit unserem KI-Generator können Sie eigene Spiele erstellen. Diese werden ausschließlich
-				lokal in Ihrem Browser gespeichert.
-			</p>
-
-			<p>
-				(2) Sie sind für die von Ihnen erstellten Inhalte selbst verantwortlich und stellen sicher,
-				dass diese:
-			</p>
-
-			<ul class="content-list">
-				<li>Keine Rechte Dritter verletzen</li>
-				<li>Keine illegalen Inhalte enthalten</li>
-				<li>Nicht diskriminierend, beleidigend oder anstößig sind</li>
-				<li>Keine Gewaltverherrlichung oder extremistische Inhalte beinhalten</li>
-				<li>Jugendschutzbestimmungen einhalten</li>
-			</ul>
-
-			<p>
-				(3) Wir behalten uns vor, bei Kenntnis von rechtswidrigen Inhalten entsprechende Maßnahmen
-				zu ergreifen.
-			</p>
-		</section>
-
-		<section id="verhaltensregeln" class="content-section">
-			<h2>§ 5 Verhaltensregeln</h2>
-
-			<div class="rules-grid">
-				<div class="rule-card positive">
-					<h4>✅ Erwünschtes Verhalten</h4>
-					<ul>
-						<li>Respektvoller Umgang mit anderen Nutzern</li>
-						<li>Konstruktives Feedback</li>
-						<li>Melden von Bugs und Problemen</li>
-						<li>Teilen von kreativen Ideen</li>
-					</ul>
-				</div>
-
-				<div class="rule-card negative">
-					<h4>❌ Unerwünschtes Verhalten</h4>
-					<ul>
-						<li>Spam oder Werbung</li>
-						<li>Hacking-Versuche</li>
-						<li>Verbreitung falscher Informationen</li>
-						<li>Belästigung anderer Nutzer</li>
-					</ul>
-				</div>
-			</div>
-		</section>
-
-		<section id="geistigeseigentum" class="content-section">
-			<h2>§ 6 Geistiges Eigentum</h2>
-
-			<p>
-				(1) Alle Rechte an der Plattform, dem Design, den offiziellen Spielen und dem Quellcode
-				liegen bei uns bzw. unseren Lizenzgebern.
-			</p>
-
-			<p>
-				(2) Die Plattform ist Open Source. Details zur Lizenzierung finden Sie auf unserer
-				<a href="/copyright">Copyright-Seite</a>.
-			</p>
-
-			<p>
-				(3) An den von Ihnen mit dem KI-Generator erstellten Spielen räumen Sie uns ein einfaches,
-				nicht-exklusives Nutzungsrecht ein, sofern Sie diese öffentlich teilen.
-			</p>
-		</section>
-
-		<section id="haftung" class="content-section">
-			<h2>§ 7 Haftungsausschluss</h2>
-
-			<div class="info-box">
-				<p>
-					(1) Die Nutzung der Plattform erfolgt auf eigene Gefahr. Wir übernehmen keine Gewähr für
-					die ständige Verfügbarkeit, Fehlerfreiheit oder Vollständigkeit der angebotenen Dienste.
-				</p>
-			</div>
-
-			<p>
-				(2) Wir haften nur für Schäden, die durch vorsätzliches oder grob fahrlässiges Verhalten
-				unsererseits entstehen. Die Haftung für leichte Fahrlässigkeit ist ausgeschlossen, soweit
-				keine wesentlichen Vertragspflichten verletzt werden.
-			</p>
-
-			<p>
-				(3) Für Datenverluste, insbesondere von lokal gespeicherten Spielständen oder selbst
-				erstellten Spielen, übernehmen wir keine Haftung. Wir empfehlen regelmäßige Backups
-				wichtiger Daten.
-			</p>
-
-			<p>(4) Die Haftung für mittelbare und Folgeschäden ist ausgeschlossen.</p>
-		</section>
-
-		<section id="datenschutz" class="content-section">
-			<h2>§ 8 Datenschutz</h2>
-
-			<p>
-				Der Schutz Ihrer Daten ist uns wichtig. Einzelheiten zur Datenverarbeitung finden Sie in
-				unserer <a href="/datenschutz">Datenschutzerklärung</a>.
-			</p>
-		</section>
-
-		<section id="aenderungen" class="content-section">
-			<h2>§ 9 Änderungen der AGB</h2>
-
-			<p>
-				(1) Wir behalten uns vor, diese AGB jederzeit zu ändern. Änderungen werden auf der Plattform
-				bekannt gegeben.
-			</p>
-
-			<p>
-				(2) Die weitere Nutzung der Plattform nach Bekanntgabe von Änderungen gilt als Zustimmung zu
-				den geänderten Bedingungen.
-			</p>
-		</section>
-
-		<section id="schlussbestimmungen" class="content-section">
-			<h2>§ 10 Schlussbestimmungen</h2>
-
-			<p>
-				(1) Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts.
-			</p>
-
-			<p>
-				(2) Sollten einzelne Bestimmungen dieser AGB unwirksam sein oder werden, berührt dies die
-				Wirksamkeit der übrigen Bestimmungen nicht.
-			</p>
-
-			<p>
-				(3) Gerichtsstand für alle Streitigkeiten aus diesem Vertragsverhältnis ist, soweit
-				gesetzlich zulässig, [Ihr Ort].
-			</p>
-		</section>
-
-		<div class="footer-actions">
-			<Button href="/" variant="ghost">Zurück zur Startseite</Button>
-			<Button href="/datenschutz" variant="ghost">Datenschutz</Button>
-			<Button href="/impressum" variant="ghost">Impressum</Button>
-		</div>
-	</div>
-</Layout>
-
-<style>
-	.agb-container {
-		max-width: 800px;
-		margin: 0 auto;
-		padding: 2rem 0;
-	}
-
-	.agb-header {
-		text-align: center;
-		margin-bottom: 3rem;
-		padding-bottom: 2rem;
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	.agb-header h1 {
-		font-size: 3rem;
-		font-weight: 900;
-		margin-bottom: 0.5rem;
-		background: linear-gradient(135deg, var(--color-text), var(--color-text-secondary));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.subtitle {
-		font-size: 1.2rem;
-		color: var(--color-text-secondary);
-		margin-bottom: 0.5rem;
-	}
-
-	.last-updated {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-		opacity: 0.8;
-	}
-
-	.toc {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-		margin-bottom: 3rem;
-	}
-
-	.toc h2 {
-		font-size: 1.5rem;
-		margin-bottom: 1rem;
-		color: var(--color-text);
-	}
-
-	.toc ol {
-		padding-left: 1.5rem;
-	}
-
-	.toc li {
-		color: var(--color-text-secondary);
-		margin-bottom: 0.5rem;
-	}
-
-	.toc a {
-		color: var(--color-text-secondary);
-		text-decoration: none;
-		transition: color 0.2s ease;
-	}
-
-	.toc a:hover {
-		color: var(--color-accent);
-	}
-
-	.content-section {
-		margin-bottom: 3rem;
-		scroll-margin-top: 2rem;
-	}
-
-	.content-section h2 {
-		font-size: 1.75rem;
-		font-weight: 700;
-		margin-bottom: 1.5rem;
-		color: var(--color-text);
-	}
-
-	.content-section h4 {
-		font-size: 1.1rem;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
-		color: var(--color-text);
-	}
-
-	.content-section p {
-		color: var(--color-text-secondary);
-		line-height: 1.8;
-		margin-bottom: 1rem;
-	}
-
-	.highlight-box,
-	.warning-box,
-	.info-box {
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-		margin: 1.5rem 0;
-	}
-
-	.highlight-box {
-		background: rgba(0, 255, 136, 0.1);
-		border: 1px solid rgba(0, 255, 136, 0.3);
-	}
-
-	.warning-box {
-		background: rgba(255, 59, 48, 0.1);
-		border: 1px solid rgba(255, 59, 48, 0.3);
-	}
-
-	.info-box {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-	}
-
-	.highlight-box ul,
-	.warning-box ul,
-	.content-list {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem 0;
-	}
-
-	.highlight-box li,
-	.warning-box li,
-	.content-list li {
-		padding: 0.5rem 0;
-		padding-left: 1.5rem;
-		position: relative;
-		color: var(--color-text-secondary);
-	}
-
-	.highlight-box li::before {
-		content: '✓';
-		position: absolute;
-		left: 0;
-		color: var(--color-accent);
-	}
-
-	.warning-box li::before {
-		content: '✗';
-		position: absolute;
-		left: 0;
-		color: #ff3b30;
-	}
-
-	.content-list li::before {
-		content: '•';
-		position: absolute;
-		left: 0;
-		color: var(--color-accent);
-	}
-
-	.rules-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-		gap: 1.5rem;
-		margin: 1.5rem 0;
-	}
-
-	.rule-card {
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.rule-card.positive {
-		background: rgba(0, 255, 136, 0.05);
-		border: 1px solid rgba(0, 255, 136, 0.2);
-	}
-
-	.rule-card.negative {
-		background: rgba(255, 59, 48, 0.05);
-		border: 1px solid rgba(255, 59, 48, 0.2);
-	}
-
-	.rule-card h4 {
-		margin-bottom: 1rem;
-	}
-
-	.rule-card ul {
-		list-style: none;
-		padding: 0;
-	}
-
-	.rule-card li {
-		padding: 0.5rem 0;
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-	}
-
-	.footer-actions {
-		margin-top: 4rem;
-		padding-top: 2rem;
-		border-top: 1px solid var(--color-border);
-		display: flex;
-		gap: 1rem;
-		justify-content: center;
-		flex-wrap: wrap;
-	}
-
-	a {
-		color: var(--color-accent);
-		text-decoration: none;
-	}
-
-	a:hover {
-		text-decoration: underline;
-	}
-
-	@media (max-width: 768px) {
-		.agb-header h1 {
-			font-size: 2rem;
-		}
-
-		.content-section h2 {
-			font-size: 1.5rem;
-		}
-
-		.toc {
-			padding: 1.5rem;
-		}
-
-		.rules-grid {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/community.astro b/games/mana-games/apps/web/src/pages/community.astro
deleted file mode 100644
index 880487d17..000000000
--- a/games/mana-games/apps/web/src/pages/community.astro
+++ /dev/null
@@ -1,356 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import GameCard from '../components/GameCard.astro';
-import { games } from '../data/games';
-
-// Filter community games
-const communityGames = games.filter((game) => 'community' in game && game.community === true);
-
-// Try to load additional community games from JSON file
-let additionalCommunityGames = [];
-// TODO: When community-games.json exists, load it here
-// For now, we'll just use an empty array until the first game is submitted
-
-// Combine all community games
-const allCommunityGames = [...communityGames, ...additionalCommunityGames];
----
-
-<Layout title="Community Spiele - MANA Games" description="Von der Community erstellte Spiele">
-	<main>
-		<div class="page-header">
-			<h1>Community Spiele</h1>
-			<p>Entdecke Spiele, die von unserer talentierten Community erstellt wurden!</p>
-		</div>
-
-		<div class="community-info">
-			<div class="info-card">
-				<h3>🎮 Werde Teil der Community!</h3>
-				<p>Hast du ein eigenes Spiel erstellt? Reiche es ein und teile es mit anderen Spielern!</p>
-				<a href="/submit" class="submit-button">
-					<span class="icon">📤</span>
-					Spiel einreichen
-				</a>
-			</div>
-
-			<div class="stats-grid">
-				<div class="stat-card">
-					<div class="stat-number">{allCommunityGames.length}</div>
-					<div class="stat-label">Community Spiele</div>
-				</div>
-				<div class="stat-card">
-					<div class="stat-number">🏆</div>
-					<div class="stat-label">Top bewertete Spiele</div>
-				</div>
-				<div class="stat-card">
-					<div class="stat-number">👥</div>
-					<div class="stat-label">Aktive Entwickler</div>
-				</div>
-			</div>
-		</div>
-
-		{
-			allCommunityGames.length > 0 ? (
-				<div class="games-section">
-					<h2>Eingereichte Spiele</h2>
-					<div class="games-grid">
-						{allCommunityGames.map((game) => (
-							<div class="community-game-card">
-								<GameCard game={game} />
-								{game.author && (
-									<div class="author-info">
-										<span class="author-label">Von:</span>
-										<span class="author-name">{game.author}</span>
-									</div>
-								)}
-								{game.submittedAt && (
-									<div class="submission-date">
-										Eingereicht am {new Date(game.submittedAt).toLocaleDateString('de-DE')}
-									</div>
-								)}
-							</div>
-						))}
-					</div>
-				</div>
-			) : (
-				<div class="empty-state">
-					<div class="empty-icon">🎯</div>
-					<h2>Noch keine Community-Spiele</h2>
-					<p>Sei der Erste, der ein Spiel einreicht!</p>
-					<a href="/submit" class="submit-button">
-						<span class="icon">📤</span>
-						Erstes Spiel einreichen
-					</a>
-				</div>
-			)
-		}
-
-		<div class="pending-section">
-			<h2>🔄 In Prüfung</h2>
-			<p>Diese Spiele werden gerade von unserem Team geprüft:</p>
-			<div class="pending-list" id="pendingList">
-				<div class="loading">Lade ausstehende Einreichungen...</div>
-			</div>
-		</div>
-	</main>
-</Layout>
-
-<style>
-	.community-info {
-		display: grid;
-		gap: 2rem;
-		margin-bottom: 3rem;
-	}
-
-	.info-card {
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
-		border-radius: 8px;
-		padding: 2rem;
-		text-align: center;
-	}
-
-	.info-card h3 {
-		color: #00ff88;
-		margin-bottom: 1rem;
-		font-size: 1.3rem;
-	}
-
-	.info-card p {
-		margin-bottom: 1.5rem;
-		color: #cccccc;
-	}
-
-	.submit-button {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-		background: #00ff88;
-		color: #0a0a0a;
-		padding: 0.75rem 1.5rem;
-		border-radius: 4px;
-		text-decoration: none;
-		font-weight: 500;
-		transition: all 0.3s ease;
-	}
-
-	.submit-button:hover {
-		background: #00cc6a;
-		transform: translateY(-2px);
-	}
-
-	.stats-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-		gap: 1rem;
-		margin-top: 2rem;
-	}
-
-	.stat-card {
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
-		border-radius: 8px;
-		padding: 1.5rem;
-		text-align: center;
-	}
-
-	.stat-number {
-		font-size: 2rem;
-		font-weight: bold;
-		color: #00ff88;
-		margin-bottom: 0.5rem;
-	}
-
-	.stat-label {
-		font-size: 0.9rem;
-		color: #888;
-	}
-
-	.games-section {
-		margin-bottom: 3rem;
-	}
-
-	.games-section h2 {
-		color: #00ff88;
-		margin-bottom: 1.5rem;
-	}
-
-	.games-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		gap: 2rem;
-	}
-
-	.community-game-card {
-		position: relative;
-	}
-
-	.author-info {
-		margin-top: 0.5rem;
-		padding: 0.5rem 1rem;
-		background: rgba(0, 255, 136, 0.1);
-		border: 1px solid rgba(0, 255, 136, 0.3);
-		border-radius: 4px;
-		font-size: 0.9rem;
-	}
-
-	.author-label {
-		color: #888;
-		margin-right: 0.5rem;
-	}
-
-	.author-name {
-		color: #00ff88;
-		font-weight: 500;
-	}
-
-	.submission-date {
-		font-size: 0.8rem;
-		color: #666;
-		margin-top: 0.5rem;
-	}
-
-	.empty-state {
-		text-align: center;
-		padding: 4rem 2rem;
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
-		border-radius: 8px;
-		margin: 2rem 0;
-	}
-
-	.empty-icon {
-		font-size: 4rem;
-		margin-bottom: 1rem;
-	}
-
-	.empty-state h2 {
-		color: #ffffff;
-		margin-bottom: 1rem;
-	}
-
-	.empty-state p {
-		color: #888;
-		margin-bottom: 2rem;
-	}
-
-	.pending-section {
-		margin-top: 3rem;
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
-		border-radius: 8px;
-		padding: 2rem;
-	}
-
-	.pending-section h2 {
-		color: #00ff88;
-		margin-bottom: 1rem;
-	}
-
-	.pending-section p {
-		color: #888;
-		margin-bottom: 1.5rem;
-	}
-
-	.pending-list {
-		display: grid;
-		gap: 1rem;
-	}
-
-	.pending-item {
-		background: #0a0a0a;
-		border: 1px solid #2a2a2a;
-		border-radius: 4px;
-		padding: 1rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.pending-info h4 {
-		color: #ffffff;
-		margin-bottom: 0.25rem;
-	}
-
-	.pending-info p {
-		font-size: 0.9rem;
-		color: #888;
-		margin: 0;
-	}
-
-	.pr-link {
-		color: #00ff88;
-		text-decoration: none;
-		font-size: 0.9rem;
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-	}
-
-	.pr-link:hover {
-		text-decoration: underline;
-	}
-
-	.loading {
-		text-align: center;
-		color: #888;
-		padding: 2rem;
-	}
-
-	@media (max-width: 768px) {
-		.games-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.stats-grid {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>
-
-<script>
-	// Fetch pending PRs from GitHub
-	async function fetchPendingGames() {
-		const pendingList = document.getElementById('pendingList');
-
-		try {
-			// For now, we'll show a placeholder since we need GitHub API access
-			// In production, this would fetch actual PRs
-			pendingList.innerHTML = `
-        <div class="pending-item">
-          <div class="pending-info">
-            <p>Ausstehende Einreichungen werden hier angezeigt, sobald das GitHub-Repository konfiguriert ist.</p>
-          </div>
-        </div>
-      `;
-
-			// Example of what it would look like with real data:
-			/*
-      const response = await fetch('/.netlify/functions/get-pending-games');
-      const pendingGames = await response.json();
-      
-      if (pendingGames.length === 0) {
-        pendingList.innerHTML = '<p style="color: #888; text-align: center;">Keine ausstehenden Einreichungen</p>';
-      } else {
-        pendingList.innerHTML = pendingGames.map(game => `
-          <div class="pending-item">
-            <div class="pending-info">
-              <h4>${game.title}</h4>
-              <p>Von ${game.author} • ${new Date(game.submittedAt).toLocaleDateString('de-DE')}</p>
-            </div>
-            <a href="${game.prUrl}" target="_blank" class="pr-link">
-              PR #${game.prNumber} →
-            </a>
-          </div>
-        `).join('');
-      }
-      */
-		} catch (error) {
-			console.error('Error fetching pending games:', error);
-			pendingList.innerHTML =
-				'<p style="color: #ff4444;">Fehler beim Laden der ausstehenden Spiele</p>';
-		}
-	}
-
-	// Load pending games on page load
-	fetchPendingGames();
-</script>
diff --git a/games/mana-games/apps/web/src/pages/copyright.astro b/games/mana-games/apps/web/src/pages/copyright.astro
deleted file mode 100644
index 88d6fc8e4..000000000
--- a/games/mana-games/apps/web/src/pages/copyright.astro
+++ /dev/null
@@ -1,719 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Button from '../components/Button.astro';
----
-
-<Layout title="Copyright & Lizenzen">
-	<div class="copyright-container">
-		<header class="copyright-header">
-			<div class="header-icon">©️</div>
-			<h1>Copyright & Lizenzen</h1>
-			<p class="subtitle">Open Source mit Herz</p>
-		</header>
-
-		<section class="intro-section">
-			<div class="open-source-banner">
-				<div class="banner-icon">🌟</div>
-				<div class="banner-content">
-					<h2>100% Open Source</h2>
-					<p>
-						Mana Games ist ein Open-Source-Projekt. Der gesamte Quellcode ist öffentlich verfügbar
-						und kann frei verwendet, modifiziert und weitergegeben werden.
-					</p>
-					<a
-						href="https://github.com/yourusername/mana-games"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="github-button"
-					>
-						<span class="icon">📦</span>
-						Zum GitHub Repository
-					</a>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Projekt-Lizenz</h2>
-
-			<div class="license-card main-license">
-				<div class="license-header">
-					<h3>MIT License</h3>
-					<span class="license-badge">Hauptlizenz</span>
-				</div>
-
-				<div class="license-content">
-					<p>Copyright (c) 2024 [Ihr Name]</p>
-
-					<p>
-						Permission is hereby granted, free of charge, to any person obtaining a copy of this
-						software and associated documentation files (the "Software"), to deal in the Software
-						without restriction, including without limitation the rights to use, copy, modify,
-						merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
-						permit persons to whom the Software is furnished to do so, subject to the following
-						conditions:
-					</p>
-
-					<p>
-						The above copyright notice and this permission notice shall be included in all copies or
-						substantial portions of the Software.
-					</p>
-
-					<p>
-						THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-						INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-						PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-						LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
-						OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-						OTHER DEALINGS IN THE SOFTWARE.
-					</p>
-				</div>
-
-				<div class="license-explanation">
-					<h4>Was bedeutet das für Sie?</h4>
-					<ul>
-						<li>✅ Sie können den Code frei verwenden</li>
-						<li>✅ Sie können den Code modifizieren</li>
-						<li>✅ Sie können den Code in kommerziellen Projekten nutzen</li>
-						<li>✅ Sie können den Code weitergeben</li>
-						<li>⚠️ Keine Garantie oder Haftung</li>
-						<li>📋 Copyright-Hinweis muss erhalten bleiben</li>
-					</ul>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Spiele-Lizenzen</h2>
-
-			<div class="games-licenses">
-				<div class="license-info">
-					<h3>Offizielle Spiele</h3>
-					<p>
-						Alle offiziellen Spiele auf unserer Plattform unterliegen ebenfalls der MIT-Lizenz. Sie
-						können den Code jedes Spiels frei verwenden, studieren und modifizieren.
-					</p>
-				</div>
-
-				<div class="license-info">
-					<h3>Nutzer-generierte Spiele</h3>
-					<p>
-						Spiele, die mit unserem KI-Generator erstellt werden, gehören dem jeweiligen Ersteller.
-						Die Ersteller können selbst entscheiden, unter welcher Lizenz sie ihre Spiele
-						veröffentlichen möchten.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Verwendete Technologien & Bibliotheken</h2>
-
-			<div class="tech-credits">
-				<div class="credit-category">
-					<h3>Framework & Build-Tools</h3>
-					<div class="credit-list">
-						<div class="credit-item">
-							<div class="credit-name">
-								<strong>Astro</strong>
-								<span class="version">v4.x</span>
-							</div>
-							<div class="credit-info">
-								<span class="license">MIT License</span>
-								<a href="https://astro.build" target="_blank" rel="noopener noreferrer"
-									>astro.build</a
-								>
-							</div>
-						</div>
-
-						<div class="credit-item">
-							<div class="credit-name">
-								<strong>TypeScript</strong>
-								<span class="version">v5.x</span>
-							</div>
-							<div class="credit-info">
-								<span class="license">Apache-2.0 License</span>
-								<a href="https://www.typescriptlang.org" target="_blank" rel="noopener noreferrer"
-									>typescriptlang.org</a
-								>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="credit-category">
-					<h3>Deployment & Hosting</h3>
-					<div class="credit-list">
-						<div class="credit-item">
-							<div class="credit-name">
-								<strong>Netlify</strong>
-							</div>
-							<div class="credit-info">
-								<span class="license">Hosting Service</span>
-								<a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer"
-									>netlify.com</a
-								>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="credit-category">
-					<h3>KI-Integration</h3>
-					<div class="credit-list">
-						<div class="credit-item">
-							<div class="credit-name">
-								<strong>OpenRouter API</strong>
-							</div>
-							<div class="credit-info">
-								<span class="license">API Service</span>
-								<a href="https://openrouter.ai" target="_blank" rel="noopener noreferrer"
-									>openrouter.ai</a
-								>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Assets & Medien</h2>
-
-			<div class="assets-info">
-				<div class="asset-category">
-					<h3>Icons & Emojis</h3>
-					<p>
-						Wir verwenden System-Emojis, die je nach Betriebssystem unterschiedlich dargestellt
-						werden können. Diese sind gemeinfrei oder unterliegen den jeweiligen Systemlizenzen.
-					</p>
-				</div>
-
-				<div class="asset-category">
-					<h3>Schriftarten</h3>
-					<p>
-						Wir nutzen System-Schriftarten für optimale Performance und Lesbarkeit. Keine externen
-						Schriftarten werden geladen.
-					</p>
-				</div>
-
-				<div class="asset-category">
-					<h3>Grafiken</h3>
-					<p>
-						Alle Spielgrafiken werden programmatisch mit Canvas API erstellt. Es werden keine
-						externen Bilddateien in den Spielen verwendet.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Beitragen zum Projekt</h2>
-
-			<div class="contribute-section">
-				<h3>Wie Sie beitragen können</h3>
-
-				<div class="contribute-steps">
-					<div class="step">
-						<div class="step-number">1</div>
-						<div class="step-content">
-							<h4>Fork erstellen</h4>
-							<p>Erstellen Sie einen Fork des Repositories auf GitHub</p>
-						</div>
-					</div>
-
-					<div class="step">
-						<div class="step-number">2</div>
-						<div class="step-content">
-							<h4>Änderungen vornehmen</h4>
-							<p>Entwickeln Sie Ihre Features oder Bugfixes</p>
-						</div>
-					</div>
-
-					<div class="step">
-						<div class="step-number">3</div>
-						<div class="step-content">
-							<h4>Pull Request</h4>
-							<p>Reichen Sie einen Pull Request mit Ihren Änderungen ein</p>
-						</div>
-					</div>
-				</div>
-
-				<div class="contribute-note">
-					<p>
-						<strong>Wichtig:</strong> Mit dem Einreichen eines Pull Requests stimmen Sie zu, dass Ihre
-						Beiträge unter der MIT-Lizenz veröffentlicht werden.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Namensnennung & Credits</h2>
-
-			<div class="credits-section">
-				<h3>Hauptentwickler</h3>
-				<div class="developer-card">
-					<p>[Ihr Name]</p>
-					<p class="role">Projektinitiator & Hauptentwickler</p>
-				</div>
-
-				<h3>Contributors</h3>
-				<p>
-					Eine vollständige Liste aller Contributors finden Sie auf unserer
-					<a
-						href="https://github.com/yourusername/mana-games/graphs/contributors"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						GitHub Contributors-Seite
-					</a>
-				</p>
-
-				<h3>Besonderer Dank</h3>
-				<ul class="thanks-list">
-					<li>An die Open-Source-Community für ihre großartigen Tools</li>
-					<li>An alle Spieler, die uns Feedback geben</li>
-					<li>An alle Contributors, die das Projekt verbessern</li>
-				</ul>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Rechtliche Hinweise</h2>
-
-			<div class="legal-notes">
-				<div class="note-card">
-					<h3>Markenrechte</h3>
-					<p>
-						"Mana Games" ist eine eingetragene Marke. Die Verwendung des Namens bedarf unserer
-						ausdrücklichen Genehmigung.
-					</p>
-				</div>
-
-				<div class="note-card">
-					<h3>Haftungsausschluss</h3>
-					<p>
-						Die Software wird "wie besehen" ohne jegliche Garantie bereitgestellt. Details finden
-						Sie in der MIT-Lizenz.
-					</p>
-				</div>
-
-				<div class="note-card">
-					<h3>Externe Links</h3>
-					<p>Wir übernehmen keine Verantwortung für die Inhalte verlinkter externer Websites.</p>
-				</div>
-			</div>
-		</section>
-
-		<div class="footer-actions">
-			<Button href="/" variant="ghost">Zurück zur Startseite</Button>
-			<Button href="/impressum" variant="ghost">Impressum</Button>
-			<Button href="/datenschutz" variant="ghost">Datenschutz</Button>
-		</div>
-	</div>
-</Layout>
-
-<style>
-	.copyright-container {
-		max-width: 900px;
-		margin: 0 auto;
-		padding: 2rem 0;
-	}
-
-	.copyright-header {
-		text-align: center;
-		margin-bottom: 3rem;
-	}
-
-	.header-icon {
-		font-size: 4rem;
-		margin-bottom: 1rem;
-		display: inline-block;
-	}
-
-	.copyright-header h1 {
-		font-size: 3rem;
-		font-weight: 900;
-		margin-bottom: 0.5rem;
-		background: linear-gradient(135deg, var(--color-text), var(--color-accent));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.subtitle {
-		font-size: 1.2rem;
-		color: var(--color-text-secondary);
-	}
-
-	.intro-section {
-		margin-bottom: 3rem;
-	}
-
-	.open-source-banner {
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.05));
-		border: 2px solid var(--color-accent);
-		border-radius: 1rem;
-		padding: 2rem;
-		display: flex;
-		gap: 2rem;
-		align-items: center;
-	}
-
-	.banner-icon {
-		font-size: 4rem;
-		flex-shrink: 0;
-	}
-
-	.banner-content h2 {
-		margin-bottom: 0.5rem;
-		color: var(--color-text);
-	}
-
-	.banner-content p {
-		color: var(--color-text-secondary);
-		margin-bottom: 1.5rem;
-	}
-
-	.github-button {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-		background: var(--color-accent);
-		color: #000;
-		padding: 0.75rem 1.5rem;
-		border-radius: 0.5rem;
-		text-decoration: none;
-		font-weight: 700;
-		transition: all 0.3s ease;
-	}
-
-	.github-button:hover {
-		transform: translateY(-2px);
-		box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
-	}
-
-	.content-section {
-		margin-bottom: 4rem;
-	}
-
-	.content-section h2 {
-		font-size: 2rem;
-		font-weight: 700;
-		margin-bottom: 2rem;
-		color: var(--color-text);
-	}
-
-	.content-section h3 {
-		font-size: 1.5rem;
-		font-weight: 600;
-		margin-bottom: 1rem;
-		color: var(--color-text);
-	}
-
-	.content-section h4 {
-		font-size: 1.2rem;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
-		color: var(--color-text);
-	}
-
-	.license-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.main-license {
-		border: 2px solid var(--color-accent);
-	}
-
-	.license-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 1.5rem;
-	}
-
-	.license-badge {
-		background: var(--color-accent);
-		color: #000;
-		padding: 0.25rem 1rem;
-		border-radius: 2rem;
-		font-size: 0.85rem;
-		font-weight: 600;
-	}
-
-	.license-content {
-		background: var(--color-bg);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-		margin-bottom: 1.5rem;
-		font-family: monospace;
-		font-size: 0.9rem;
-		color: var(--color-text-secondary);
-		overflow-x: auto;
-	}
-
-	.license-content p {
-		margin-bottom: 1rem;
-	}
-
-	.license-explanation {
-		background: rgba(0, 255, 136, 0.05);
-		border: 1px solid rgba(0, 255, 136, 0.2);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.license-explanation ul {
-		list-style: none;
-		padding: 0;
-	}
-
-	.license-explanation li {
-		padding: 0.5rem 0;
-		color: var(--color-text-secondary);
-	}
-
-	.games-licenses {
-		display: grid;
-		gap: 1.5rem;
-	}
-
-	.license-info {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.tech-credits {
-		display: grid;
-		gap: 2rem;
-	}
-
-	.credit-category {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 1.5rem;
-	}
-
-	.credit-list {
-		display: grid;
-		gap: 1rem;
-		margin-top: 1rem;
-	}
-
-	.credit-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0.75rem;
-		background: var(--color-bg);
-		border-radius: 0.5rem;
-	}
-
-	.credit-name {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.version {
-		font-size: 0.85rem;
-		color: var(--color-text-secondary);
-	}
-
-	.credit-info {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.license {
-		background: rgba(0, 255, 136, 0.1);
-		color: var(--color-accent);
-		padding: 0.25rem 0.75rem;
-		border-radius: 1rem;
-		font-size: 0.8rem;
-	}
-
-	.credit-info a {
-		color: var(--color-text-secondary);
-		text-decoration: none;
-		font-size: 0.9rem;
-	}
-
-	.credit-info a:hover {
-		color: var(--color-accent);
-	}
-
-	.assets-info {
-		display: grid;
-		gap: 1.5rem;
-	}
-
-	.asset-category {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.asset-category p {
-		color: var(--color-text-secondary);
-	}
-
-	.contribute-section {
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.contribute-steps {
-		display: grid;
-		gap: 1.5rem;
-		margin: 1.5rem 0;
-	}
-
-	.step {
-		display: flex;
-		gap: 1.5rem;
-		align-items: start;
-	}
-
-	.step-number {
-		width: 40px;
-		height: 40px;
-		background: var(--color-accent);
-		color: #000;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-weight: 900;
-		flex-shrink: 0;
-	}
-
-	.step-content h4 {
-		margin-bottom: 0.25rem;
-	}
-
-	.step-content p {
-		color: var(--color-text-secondary);
-		margin: 0;
-	}
-
-	.contribute-note {
-		background: rgba(255, 193, 7, 0.1);
-		border: 1px solid rgba(255, 193, 7, 0.3);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		margin-top: 1.5rem;
-	}
-
-	.credits-section {
-		background: var(--color-bg-secondary);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.developer-card {
-		background: var(--color-bg);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		margin: 1rem 0;
-	}
-
-	.developer-card p {
-		margin: 0;
-		font-weight: 600;
-	}
-
-	.developer-card .role {
-		font-weight: 400;
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-	}
-
-	.thanks-list {
-		list-style: none;
-		padding: 0;
-		margin-top: 1rem;
-	}
-
-	.thanks-list li {
-		padding: 0.5rem 0;
-		color: var(--color-text-secondary);
-		position: relative;
-		padding-left: 1.5rem;
-	}
-
-	.thanks-list li::before {
-		content: '❤️';
-		position: absolute;
-		left: 0;
-	}
-
-	.legal-notes {
-		display: grid;
-		gap: 1.5rem;
-	}
-
-	.note-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.note-card p {
-		color: var(--color-text-secondary);
-		margin: 0;
-	}
-
-	.footer-actions {
-		margin-top: 4rem;
-		padding-top: 2rem;
-		border-top: 1px solid var(--color-border);
-		display: flex;
-		gap: 1rem;
-		justify-content: center;
-		flex-wrap: wrap;
-	}
-
-	a {
-		color: var(--color-accent);
-		text-decoration: none;
-	}
-
-	a:hover {
-		text-decoration: underline;
-	}
-
-	@media (max-width: 768px) {
-		.copyright-header h1 {
-			font-size: 2rem;
-		}
-
-		.open-source-banner {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		.content-section h2 {
-			font-size: 1.5rem;
-		}
-
-		.credit-item {
-			flex-direction: column;
-			gap: 0.5rem;
-			text-align: center;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/create.astro b/games/mana-games/apps/web/src/pages/create.astro
deleted file mode 100644
index 0685dfa84..000000000
--- a/games/mana-games/apps/web/src/pages/create.astro
+++ /dev/null
@@ -1,1651 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
----
-
-<Layout title="Spiel erstellen - ManaGames" fullWidth={true} hideFooter={true}>
-	<div class="create-page">
-		<div class="split-container">
-			<!-- Left Side: Generator Form & Editor -->
-			<div class="left-panel">
-				<!-- Generator Form -->
-				<div id="generatorSection" class="generator-section">
-					<div class="page-header">
-						<h1>KI Spiel Generator</h1>
-						<p class="subtitle">Beschreibe dein Traumspiel und die KI erstellt es für dich</p>
-					</div>
-
-					<div class="form-card">
-						<div class="form-content">
-							<!-- Game Description Textarea -->
-							<div class="form-group">
-								<label class="form-label" id="formLabel">Was für ein Spiel möchtest du?</label>
-								<textarea
-									id="gameDescription"
-									placeholder="Beispiel: Ein einfaches Weltraum-Shooter Spiel wo ich mit einem Raumschiff Asteroiden ausweichen muss. Das Spiel sollte immer schneller werden und Punkte für überlebte Zeit geben."
-									class="form-textarea"
-									rows="6"></textarea>
-								<div class="form-hints" id="formHints">
-									<p class="hint-title">💡 Tipps für gute Beschreibungen:</p>
-									<ul class="hint-list">
-										<li>
-											Beschreibe das Spielziel (z.B. "Sammle Münzen", "Weiche Hindernissen aus")
-										</li>
-										<li>
-											Nenne das Setting/Thema (z.B. "im Weltraum", "Unterwasser", "Retro-Arcade")
-										</li>
-										<li>
-											Erwähne gewünschte Mechaniken (z.B. "mit Maus steuern", "Power-ups sammeln")
-										</li>
-										<li>Halte es einfach - komplexe Spiele brauchen länger</li>
-									</ul>
-								</div>
-							</div>
-
-							<!-- Quick Actions (Initially Hidden) -->
-							<div id="quickActions" class="quick-actions hidden">
-								<p class="quick-actions-title">Schnell-Verbesserungen:</p>
-								<div class="quick-actions-grid">
-									<button
-										class="quick-action-btn"
-										data-prompt="Mache das Spiel deutlich schwieriger und herausfordernder"
-									>
-										⚡ Schwieriger
-									</button>
-									<button
-										class="quick-action-btn"
-										data-prompt="Verbessere die Grafik mit schöneren Farben und flüssigeren Animationen"
-									>
-										🎨 Bessere Grafik
-									</button>
-									<button
-										class="quick-action-btn"
-										data-prompt="Füge Soundeffekte und Hintergrundmusik hinzu"
-									>
-										🎵 Sound hinzufügen
-									</button>
-									<button
-										class="quick-action-btn"
-										data-prompt="Füge ein besseres Punkte-System mit Highscore und Combos hinzu"
-									>
-										🏆 Punkte-System
-									</button>
-									<button
-										class="quick-action-btn"
-										data-prompt="Füge Power-ups und Bonus-Items hinzu"
-									>
-										💎 Power-ups
-									</button>
-									<button
-										class="quick-action-btn"
-										data-prompt="Füge verschiedene Level oder Spielmodi hinzu"
-									>
-										🎯 Mehr Level
-									</button>
-								</div>
-							</div>
-
-							<!-- Model Selection -->
-							<div class="model-selection">
-								<label class="form-label">KI-Modell auswählen:</label>
-								<div class="model-grid">
-									<!-- Google Gemini -->
-									<label class="model-option">
-										<input type="radio" name="model" value="gemini-2.0-flash" checked />
-										<span class="model-card">
-											<span class="model-provider">Google</span>
-											<span class="model-name">Gemini 2.0 Flash</span>
-											<span class="model-desc">Schnell & günstig</span>
-										</span>
-									</label>
-									<label class="model-option">
-										<input type="radio" name="model" value="gemini-2.5-flash" />
-										<span class="model-card">
-											<span class="model-provider">Google</span>
-											<span class="model-name">Gemini 2.5 Flash</span>
-											<span class="model-desc">Schnell & gut</span>
-										</span>
-									</label>
-									<label class="model-option">
-										<input type="radio" name="model" value="gemini-2.5-pro" />
-										<span class="model-card">
-											<span class="model-provider">Google</span>
-											<span class="model-name">Gemini 2.5 Pro</span>
-											<span class="model-desc">Höchste Qualität</span>
-										</span>
-									</label>
-									<!-- Anthropic Claude -->
-									<label class="model-option">
-										<input type="radio" name="model" value="claude-3.5-haiku" />
-										<span class="model-card">
-											<span class="model-provider">Anthropic</span>
-											<span class="model-name">Claude 3.5 Haiku</span>
-											<span class="model-desc">Schnell & präzise</span>
-										</span>
-									</label>
-									<label class="model-option">
-										<input type="radio" name="model" value="claude-3.5-sonnet" />
-										<span class="model-card">
-											<span class="model-provider">Anthropic</span>
-											<span class="model-name">Claude Sonnet 4</span>
-											<span class="model-desc">Beste Code-Qualität</span>
-										</span>
-									</label>
-									<!-- Azure OpenAI -->
-									<label class="model-option">
-										<input type="radio" name="model" value="gpt-4o-mini" />
-										<span class="model-card">
-											<span class="model-provider">OpenAI</span>
-											<span class="model-name">GPT-4o Mini</span>
-											<span class="model-desc">Ausgewogen</span>
-										</span>
-									</label>
-									<label class="model-option">
-										<input type="radio" name="model" value="gpt-4o" />
-										<span class="model-card">
-											<span class="model-provider">OpenAI</span>
-											<span class="model-name">GPT-4o</span>
-											<span class="model-desc">Sehr gut</span>
-										</span>
-									</label>
-								</div>
-							</div>
-
-							<!-- Generate Button -->
-							<button id="generateBtn" class="generate-btn" disabled> Spiel generieren </button>
-
-							<!-- Example Prompts -->
-							<div class="examples" id="examplePrompts">
-								<p class="examples-title">Beispiele zum Ausprobieren:</p>
-								<div class="example-grid">
-									<button
-										class="example-btn"
-										data-prompt="Ein Snake-Spiel im Neon-Stil wo die Schlange immer schneller wird"
-									>
-										🐍 Neon Snake
-									</button>
-									<button
-										class="example-btn"
-										data-prompt="Ein Plattformspiel wo ich als Astronaut auf dem Mond herumhüpfe und Sterne sammle"
-									>
-										🚀 Mond-Abenteuer
-									</button>
-									<button
-										class="example-btn"
-										data-prompt="Ein Puzzle-Spiel wo ich farbige Blöcke matching muss, ähnlich wie Tetris aber einfacher"
-									>
-										🧩 Block Puzzle
-									</button>
-									<button
-										class="example-btn"
-										data-prompt="Ein Reaktionsspiel wo bunte Kreise erscheinen die ich schnell anklicken muss"
-									>
-										🎯 Klick-Challenge
-									</button>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<!-- Loading State -->
-					<div id="loading" class="loading-container hidden">
-						<div class="loading-content">
-							<svg
-								class="spinner"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-							>
-								<circle
-									class="opacity-25"
-									cx="12"
-									cy="12"
-									r="10"
-									stroke="currentColor"
-									stroke-width="4"></circle>
-								<path
-									class="opacity-75"
-									fill="currentColor"
-									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-								></path>
-							</svg>
-							<span class="loading-text" id="loadingText"
-								>KI generiert dein Spiel... (kann 10-20 Sekunden dauern)</span
-							>
-						</div>
-					</div>
-
-					<!-- Error State -->
-					<div id="error" class="error-container hidden">
-						<p class="error-message" id="errorMessage"></p>
-					</div>
-				</div>
-
-				<!-- Editor Panel (Initially Hidden) -->
-				<div id="editorPanel" class="editor-panel hidden">
-					<div class="editor-header">
-						<h3>Code Editor</h3>
-						<div class="editor-actions">
-							<button id="runBtn" class="editor-btn primary">
-								<span class="icon">▶</span>
-								Ausführen
-							</button>
-							<button id="closeEditorBtn" class="editor-btn">
-								<span class="icon">✕</span>
-							</button>
-						</div>
-					</div>
-					<div id="editor" class="code-editor"></div>
-				</div>
-			</div>
-
-			<!-- Right Side: Game Preview -->
-			<div class="right-panel">
-				<div id="gamePreviewSection" class="game-preview-section">
-					<div class="preview-panel">
-						<div class="preview-header">
-							<h3>Generiertes Spiel</h3>
-							<div class="preview-actions">
-								<button id="toggleEditorBtn" class="editor-btn">
-									<span class="icon">📝</span>
-									Code bearbeiten
-								</button>
-								<button id="fullscreenPreviewBtn" class="editor-btn">
-									<span class="icon">⛶</span>
-								</button>
-								<button id="downloadBtn" class="editor-btn">
-									<span class="icon">💾</span>
-								</button>
-								<button id="saveToLibraryBtn" class="editor-btn hidden">
-									<span class="icon">📚</span>
-									Speichern
-								</button>
-							</div>
-						</div>
-						<div class="preview-frame">
-							<div id="placeholderMessage" class="placeholder-message">
-								<p>🎮 Hier erscheint dein generiertes Spiel</p>
-							</div>
-							<iframe
-								id="gameFrame"
-								class="game-iframe hidden"
-								sandbox="allow-scripts allow-same-origin"></iframe>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</Layout>
-
-<script>
-	// Form elements
-	const gameDescriptionTextarea = document.getElementById('gameDescription') as HTMLTextAreaElement;
-	const generateBtn = document.getElementById('generateBtn') as HTMLButtonElement;
-	const exampleBtns = document.querySelectorAll('.example-btn');
-	const quickActionBtns = document.querySelectorAll('.quick-action-btn');
-
-	// State elements
-	const loadingDiv = document.getElementById('loading')!;
-	const loadingText = document.getElementById('loadingText')!;
-	const errorDiv = document.getElementById('error')!;
-	const errorMessage = document.getElementById('errorMessage')!;
-	const gameFrame = document.getElementById('gameFrame') as HTMLIFrameElement;
-	const downloadBtn = document.getElementById('downloadBtn')!;
-	const fullscreenPreviewBtn = document.getElementById('fullscreenPreviewBtn')!;
-	const toggleEditorBtn = document.getElementById('toggleEditorBtn')!;
-	const closeEditorBtn = document.getElementById('closeEditorBtn')!;
-	const runBtn = document.getElementById('runBtn')!;
-	const rightPanel = document.querySelector('.right-panel') as HTMLElement;
-	const saveToLibraryBtn = document.getElementById('saveToLibraryBtn')!;
-
-	// Sections
-	const gamePreviewSection = document.getElementById('gamePreviewSection')!;
-	const editorPanel = document.getElementById('editorPanel')!;
-	const generatorSection = document.getElementById('generatorSection')!;
-	const formLabel = document.getElementById('formLabel')!;
-	const formHints = document.getElementById('formHints')!;
-	const quickActions = document.getElementById('quickActions')!;
-	const examplePrompts = document.getElementById('examplePrompts')!;
-
-	// Game state
-	interface GameState {
-		originalPrompt: string;
-		currentCode: string;
-		isIterating: boolean;
-		iterationCount: number;
-		editingGameId?: string;
-	}
-
-	let gameState: GameState = {
-		originalPrompt: '',
-		currentCode: '',
-		isIterating: false,
-		iterationCount: 0,
-		editingGameId: undefined,
-	};
-
-	// Save selected model preference
-	function saveModelPreference(model: string) {
-		localStorage.setItem('preferredModel', model);
-	}
-
-	// Load model preference
-	function loadModelPreference() {
-		const saved = localStorage.getItem('preferredModel');
-		if (saved) {
-			const radio = document.querySelector(
-				`input[name="model"][value="${saved}"]`
-			) as HTMLInputElement;
-			if (radio) {
-				radio.checked = true;
-			}
-		}
-	}
-
-	let cm: any; // CodeMirror instance
-
-	// IndexedDB Setup
-	interface SavedGame {
-		id: string;
-		title: string;
-		description: string;
-		prompt: string;
-		html: string;
-		createdAt: Date;
-		updatedAt: Date;
-		thumbnail?: string;
-		stats?: {
-			linesOfCode: number;
-			hasAnimation: boolean;
-			hasSound: boolean;
-		};
-	}
-
-	class GameStorage {
-		private dbName = 'ManaGamesDB';
-		private storeName = 'generatedGames';
-		private db: IDBDatabase | null = null;
-
-		async init(): Promise<void> {
-			return new Promise((resolve, reject) => {
-				const request = indexedDB.open(this.dbName, 1);
-
-				request.onerror = () => reject(request.error);
-				request.onsuccess = () => {
-					this.db = request.result;
-					resolve();
-				};
-
-				request.onupgradeneeded = (event) => {
-					const db = (event.target as IDBOpenDBRequest).result;
-					if (!db.objectStoreNames.contains(this.storeName)) {
-						const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
-						store.createIndex('createdAt', 'createdAt', { unique: false });
-						store.createIndex('title', 'title', { unique: false });
-					}
-				};
-			});
-		}
-
-		async saveGame(game: Omit<SavedGame, 'id' | 'createdAt' | 'updatedAt'>): Promise<string> {
-			if (!this.db) await this.init();
-
-			const id = `game_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-			const savedGame: SavedGame = {
-				...game,
-				id,
-				createdAt: new Date(),
-				updatedAt: new Date(),
-			};
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readwrite');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.add(savedGame);
-
-				request.onsuccess = () => resolve(id);
-				request.onerror = () => reject(request.error);
-			});
-		}
-
-		async getGame(id: string): Promise<SavedGame | null> {
-			if (!this.db) await this.init();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readonly');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.get(id);
-
-				request.onsuccess = () => resolve(request.result || null);
-				request.onerror = () => reject(request.error);
-			});
-		}
-
-		async getAllGames(): Promise<SavedGame[]> {
-			if (!this.db) await this.init();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readonly');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.getAll();
-
-				request.onsuccess = () => resolve(request.result || []);
-				request.onerror = () => reject(request.error);
-			});
-		}
-
-		async deleteGame(id: string): Promise<void> {
-			if (!this.db) await this.init();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readwrite');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.delete(id);
-
-				request.onsuccess = () => resolve();
-				request.onerror = () => reject(request.error);
-			});
-		}
-
-		async updateGame(id: string, updates: Partial<SavedGame>): Promise<void> {
-			if (!this.db) await this.init();
-
-			const existingGame = await this.getGame(id);
-			if (!existingGame) throw new Error('Game not found');
-
-			const updatedGame: SavedGame = {
-				...existingGame,
-				...updates,
-				updatedAt: new Date(),
-			};
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readwrite');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.put(updatedGame);
-
-				request.onsuccess = () => resolve();
-				request.onerror = () => reject(request.error);
-			});
-		}
-	}
-
-	const gameStorage = new GameStorage();
-
-	// Check if we're editing an existing game
-	async function checkForEditMode() {
-		const editGameId = sessionStorage.getItem('editGameId');
-		if (editGameId) {
-			sessionStorage.removeItem('editGameId'); // Clear it so it doesn't persist
-
-			try {
-				const game = await gameStorage.getGame(editGameId);
-				if (game) {
-					// Load the game into the editor
-					gameState.originalPrompt = game.prompt || game.description;
-					gameState.currentCode = game.html;
-					gameState.isIterating = true;
-					gameState.iterationCount = 1;
-					gameState.editingGameId = editGameId;
-
-					// Update UI to show the game
-					displayGame(game.html);
-
-					// Update editor if initialized
-					if (cm) {
-						cm.setValue(game.html);
-					}
-
-					// Switch to iteration mode
-					enableIterationMode();
-
-					// Pre-fill the description with a message
-					gameDescriptionTextarea.value = '';
-					gameDescriptionTextarea.placeholder = `Du bearbeitest "${game.title}". Was möchtest du ändern?`;
-
-					// Show the game frame
-					const placeholderMessage = document.getElementById('placeholderMessage');
-					if (placeholderMessage) {
-						placeholderMessage.classList.add('hidden');
-					}
-					gameFrame.classList.remove('hidden');
-					saveToLibraryBtn.classList.remove('hidden');
-
-					// Show notification
-					showNotification(`Spiel "${game.title}" wurde geladen`, 'success');
-				}
-			} catch (error) {
-				console.error('Error loading game for edit:', error);
-				showNotification('Fehler beim Laden des Spiels', 'error');
-			}
-		}
-	}
-
-	// Import CodeMirror CSS
-	const link = document.createElement('link');
-	link.rel = 'stylesheet';
-	link.href = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css';
-	document.head.appendChild(link);
-
-	const themeLink = document.createElement('link');
-	themeLink.rel = 'stylesheet';
-	themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css';
-	document.head.appendChild(themeLink);
-
-	// Import CodeMirror
-	const script = document.createElement('script');
-	script.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js';
-	document.head.appendChild(script);
-
-	script.onload = () => {
-		// Load modes
-		const modes = ['xml', 'javascript', 'css', 'htmlmixed'];
-		let loadedModes = 0;
-
-		modes.forEach((mode) => {
-			const modeScript = document.createElement('script');
-			modeScript.src = `https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/${mode}/${mode}.min.js`;
-			document.head.appendChild(modeScript);
-			modeScript.onload = () => {
-				loadedModes++;
-				if (loadedModes === modes.length) {
-					initializeEditor();
-					// Check for edit mode after editor is initialized
-					checkForEditMode();
-					// Load model preference
-					loadModelPreference();
-
-					// Add event listeners to model radio buttons
-					document.querySelectorAll('input[name="model"]').forEach((radio) => {
-						radio.addEventListener('change', (e) => {
-							const model = (e.target as HTMLInputElement).value;
-							saveModelPreference(model);
-						});
-					});
-				}
-			};
-		});
-	};
-
-	function initializeEditor() {
-		const editor = document.getElementById('editor');
-
-		// Initialize CodeMirror
-		cm = (window as any).CodeMirror(editor, {
-			value: '',
-			mode: 'htmlmixed',
-			theme: 'monokai',
-			lineNumbers: true,
-			lineWrapping: true,
-			indentUnit: 2,
-			tabSize: 2,
-			viewportMargin: Infinity,
-		});
-
-		// Force CodeMirror to fill the container
-		setTimeout(() => {
-			cm.setSize('100%', '100%');
-			cm.refresh();
-		}, 100);
-	}
-
-	// Enable iteration mode after successful generation
-	function enableIterationMode() {
-		gameState.isIterating = true;
-
-		// Hide page header when game is generated
-		const pageHeader = document.querySelector('.page-header') as HTMLElement;
-		if (pageHeader) {
-			pageHeader.classList.add('hidden');
-		}
-
-		// Update button
-		generateBtn.innerHTML = '<span class="icon">🔄</span> Spiel verbessern';
-		generateBtn.classList.add('iteration-mode');
-
-		// Update form
-		formLabel.textContent = 'Was möchtest du am Spiel ändern?';
-		gameDescriptionTextarea.placeholder =
-			'z.B. "Füge Power-ups hinzu", "Mache es schwieriger", "Bessere Grafik"...';
-		gameDescriptionTextarea.value = '';
-
-		// Hide original hints and examples, show quick actions
-		formHints.classList.add('hidden');
-		examplePrompts.classList.add('hidden');
-		quickActions.classList.remove('hidden');
-	}
-
-	// Disable iteration mode (for new game)
-	function disableIterationMode() {
-		gameState = {
-			originalPrompt: '',
-			currentCode: '',
-			isIterating: false,
-			iterationCount: 0,
-			editingGameId: undefined,
-		};
-
-		// Show page header again
-		const pageHeader = document.querySelector('.page-header') as HTMLElement;
-		if (pageHeader) {
-			pageHeader.classList.remove('hidden');
-		}
-
-		// Reset button
-		generateBtn.innerHTML = 'Spiel generieren';
-		generateBtn.classList.remove('iteration-mode');
-
-		// Reset form
-		formLabel.textContent = 'Was für ein Spiel möchtest du?';
-		gameDescriptionTextarea.placeholder =
-			'Beispiel: Ein einfaches Weltraum-Shooter Spiel wo ich mit einem Raumschiff Asteroiden ausweichen muss. Das Spiel sollte immer schneller werden und Punkte für überlebte Zeit geben.';
-
-		// Show original hints and examples, hide quick actions
-		formHints.classList.remove('hidden');
-		examplePrompts.classList.remove('hidden');
-		quickActions.classList.add('hidden');
-	}
-
-	// Example button clicks
-	exampleBtns.forEach((btn) => {
-		btn.addEventListener('click', () => {
-			const prompt = btn.getAttribute('data-prompt');
-			if (prompt) {
-				gameDescriptionTextarea.value = prompt;
-				checkFormValidity();
-				gameDescriptionTextarea.focus();
-			}
-		});
-	});
-
-	// Quick action button clicks
-	quickActionBtns.forEach((btn) => {
-		btn.addEventListener('click', () => {
-			const prompt = btn.getAttribute('data-prompt');
-			if (prompt) {
-				gameDescriptionTextarea.value = prompt;
-				checkFormValidity();
-				generateBtn.click(); // Auto-submit
-			}
-		});
-	});
-
-	// Form validation
-	function checkFormValidity() {
-		const isValid = gameDescriptionTextarea.value.trim().length > 10;
-		generateBtn.disabled = !isValid;
-	}
-
-	gameDescriptionTextarea.addEventListener('input', checkFormValidity);
-
-	// Generate/Iterate game
-	generateBtn.addEventListener('click', async () => {
-		// Reset states
-		errorDiv.classList.add('hidden');
-		loadingDiv.classList.remove('hidden');
-		generateBtn.disabled = true;
-
-		const description = gameDescriptionTextarea.value.trim();
-		const selectedModel =
-			(document.querySelector('input[name="model"]:checked') as HTMLInputElement)?.value ||
-			'gemini-2.0-flash';
-
-		// Save the selected model preference
-		saveModelPreference(selectedModel);
-
-		// Update loading text based on mode and model
-		const modelName =
-			document
-				.querySelector(`input[name="model"][value="${selectedModel}"]`)
-				?.parentElement?.querySelector('.model-name')?.textContent || 'KI';
-		const isSlowModel =
-			selectedModel === 'gemini-2.5-pro' ||
-			selectedModel === 'claude-3.5-sonnet' ||
-			selectedModel === 'gpt-4o';
-
-		if (gameState.isIterating) {
-			loadingText.textContent = isSlowModel
-				? `${modelName} verbessert dein Spiel... (kann 30-60 Sekunden dauern)`
-				: `${modelName} verbessert dein Spiel... (kann 10-20 Sekunden dauern)`;
-		} else {
-			loadingText.textContent = isSlowModel
-				? `${modelName} generiert dein Spiel... (kann 30-60 Sekunden dauern)`
-				: `${modelName} generiert dein Spiel... (kann 10-20 Sekunden dauern)`;
-		}
-
-		try {
-			const requestBody: any = {
-				description: description,
-				mode: gameState.isIterating ? 'iterate' : 'create',
-				model: selectedModel,
-			};
-
-			// If iterating, include original prompt and current code
-			if (gameState.isIterating) {
-				requestBody.originalPrompt = gameState.originalPrompt;
-				requestBody.currentCode = gameState.currentCode;
-				requestBody.iterationCount = gameState.iterationCount;
-			}
-
-			// Backend URL (from environment or default)
-			const backendUrl = import.meta.env.PUBLIC_BACKEND_URL || 'http://localhost:3011';
-			const apiUrl = `${backendUrl}/api/games/generate`;
-
-			// Hinweis für langsame Modelle
-			if (isSlowModel) {
-				loadingText.textContent += '\n⚠️ Dieses Modell ist langsamer. Bitte hab Geduld...';
-			}
-
-			const response = await fetch(apiUrl, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify(requestBody),
-			});
-
-			const data = await response.json();
-
-			if (!response.ok) {
-				// Spezielle Fehlerbehandlung für verschiedene Status-Codes
-				if (response.status === 504) {
-					throw new Error(
-						data.error ||
-							'Zeitüberschreitung - bitte versuche es erneut oder wähle ein schnelleres Modell'
-					);
-				} else if (response.status === 502) {
-					throw new Error('Server-Fehler - bitte versuche es in ein paar Sekunden erneut');
-				} else if (response.status === 500) {
-					throw new Error(data.error || 'Interner Server-Fehler');
-				} else {
-					throw new Error(data.error || 'Fehler beim Generieren des Spiels');
-				}
-			}
-
-			// Success - update game state
-			if (!gameState.isIterating) {
-				gameState.originalPrompt = description;
-			}
-			gameState.currentCode = data.html;
-			gameState.iterationCount++;
-
-			// Display game
-			displayGame(data.html);
-
-			// Update editor
-			if (cm) {
-				cm.setValue(data.html);
-			}
-
-			loadingDiv.classList.add('hidden');
-
-			// Show game frame and hide placeholder
-			const placeholderMessage = document.getElementById('placeholderMessage');
-			if (placeholderMessage) {
-				placeholderMessage.classList.add('hidden');
-			}
-			gameFrame.classList.remove('hidden');
-
-			// Show save button
-			saveToLibraryBtn.classList.remove('hidden');
-
-			// Enable iteration mode if not already
-			if (!gameState.isIterating) {
-				enableIterationMode();
-			}
-
-			// Show success notification for iterations
-			if (gameState.isIterating) {
-				showNotification('Spiel wurde verbessert!', 'success');
-			}
-		} catch (error) {
-			loadingDiv.classList.add('hidden');
-			errorDiv.classList.remove('hidden');
-			errorMessage.textContent =
-				error instanceof Error ? error.message : 'Ein unerwarteter Fehler ist aufgetreten';
-		} finally {
-			generateBtn.disabled = false;
-			checkFormValidity();
-		}
-	});
-
-	// Display game in iframe
-	function displayGame(html: string) {
-		const blob = new Blob([html], { type: 'text/html' });
-		const url = URL.createObjectURL(blob);
-		gameFrame.src = url;
-
-		// Clean up old blob URLs
-		gameFrame.addEventListener(
-			'load',
-			() => {
-				URL.revokeObjectURL(url);
-			},
-			{ once: true }
-		);
-	}
-
-	// Toggle editor
-	toggleEditorBtn.addEventListener('click', () => {
-		editorPanel.classList.toggle('hidden');
-		generatorSection.classList.toggle('hidden');
-
-		if (!editorPanel.classList.contains('hidden')) {
-			toggleEditorBtn.innerHTML = '<span class="icon">📝</span> Generator anzeigen';
-			setTimeout(() => {
-				cm.refresh();
-			}, 100);
-		} else {
-			toggleEditorBtn.innerHTML = '<span class="icon">📝</span> Code bearbeiten';
-		}
-	});
-
-	// Close editor
-	closeEditorBtn.addEventListener('click', () => {
-		editorPanel.classList.add('hidden');
-		generatorSection.classList.remove('hidden');
-		toggleEditorBtn.innerHTML = '<span class="icon">📝</span> Code bearbeiten';
-	});
-
-	// Run code
-	runBtn.addEventListener('click', () => {
-		const code = cm.getValue();
-		gameState.currentCode = code;
-		displayGame(code);
-		showNotification('Code ausgeführt!', 'success');
-	});
-
-	// Fullscreen
-	fullscreenPreviewBtn.addEventListener('click', () => {
-		if (gameFrame.requestFullscreen) {
-			gameFrame.requestFullscreen();
-		}
-	});
-
-	// Download
-	downloadBtn.addEventListener('click', () => {
-		const blob = new Blob([gameState.currentCode], { type: 'text/html' });
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement('a');
-		a.href = url;
-		a.download = `mana-game-${Date.now()}.html`;
-		a.click();
-		URL.revokeObjectURL(url);
-	});
-
-	// Save to Library
-	saveToLibraryBtn.addEventListener('click', async () => {
-		if (!gameState.currentCode) {
-			showNotification('Kein Spiel zum Speichern vorhanden', 'error');
-			return;
-		}
-
-		try {
-			saveToLibraryBtn.disabled = true;
-			saveToLibraryBtn.innerHTML = '<span class="icon">⏳</span> Speichern...';
-
-			const title = extractGameTitle(gameState.currentCode);
-			const stats = analyzeGameStats(gameState.currentCode);
-			const thumbnail = await generateThumbnail(gameState.currentCode);
-
-			if (gameState.editingGameId) {
-				// Update existing game
-				await gameStorage.updateGame(gameState.editingGameId, {
-					title,
-					html: gameState.currentCode,
-					thumbnail,
-					stats,
-				});
-				showNotification(`"${title}" wurde aktualisiert!`, 'success');
-			} else {
-				// Save new game
-				const gameId = await gameStorage.saveGame({
-					title,
-					description: gameState.originalPrompt,
-					prompt: gameState.originalPrompt,
-					html: gameState.currentCode,
-					thumbnail,
-					stats,
-				});
-				showNotification(`"${title}" wurde in deiner Bibliothek gespeichert!`, 'success');
-			}
-
-			// Update button to show saved state
-			saveToLibraryBtn.innerHTML = '<span class="icon">✓</span> Gespeichert';
-			setTimeout(() => {
-				saveToLibraryBtn.innerHTML = '<span class="icon">📚</span> Speichern';
-				saveToLibraryBtn.disabled = false;
-			}, 2000);
-		} catch (error) {
-			console.error('Error saving game:', error);
-			showNotification('Fehler beim Speichern des Spiels', 'error');
-			saveToLibraryBtn.innerHTML = '<span class="icon">📚</span> Speichern';
-			saveToLibraryBtn.disabled = false;
-		}
-	});
-
-	// Listen for game messages
-	window.addEventListener('message', (event) => {
-		if (event.source === gameFrame.contentWindow) {
-			console.log('Game message:', event.data);
-		}
-	});
-
-	// Auto-resize textarea
-	gameDescriptionTextarea.addEventListener('input', () => {
-		gameDescriptionTextarea.style.height = 'auto';
-		gameDescriptionTextarea.style.height = gameDescriptionTextarea.scrollHeight + 'px';
-	});
-
-	// Helper functions for game metadata extraction
-	function extractGameTitle(html: string): string {
-		const titleMatch = html.match(/<title>(.*?)<\/title>/i);
-		if (titleMatch) {
-			return titleMatch[1].replace(' - ManaGames', '').trim();
-		}
-
-		// Fallback: Try to find game name in comments or h1
-		const h1Match = html.match(/<h1[^>]*>(.*?)<\/h1>/i);
-		if (h1Match) {
-			return h1Match[1].trim();
-		}
-
-		return 'Unbenanntes Spiel';
-	}
-
-	function analyzeGameStats(html: string) {
-		const lines = html.split('\n');
-		const codeLines = lines.filter((line) => line.trim().length > 0);
-
-		return {
-			linesOfCode: codeLines.length,
-			hasAnimation: html.includes('requestAnimationFrame') || html.includes('setInterval'),
-			hasSound: html.includes('Audio') || html.includes('sound') || html.includes('music'),
-		};
-	}
-
-	function generateThumbnail(html: string): Promise<string> {
-		return new Promise((resolve) => {
-			// For now, return a placeholder
-			// In future, we could capture actual game screenshot
-			const svg = `
-        <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
-          <rect width="400" height="300" fill="#1a1a1a"/>
-          <text x="200" y="150" font-family="Arial" font-size="24" fill="#00ff88" text-anchor="middle">
-            Generated Game
-          </text>
-        </svg>
-      `;
-
-			// Convert string to base64 with proper encoding for Unicode
-			const base64 = btoa(unescape(encodeURIComponent(svg)));
-			resolve('data:image/svg+xml;base64,' + base64);
-		});
-	}
-
-	// Notification helper
-	function showNotification(message: string, type: 'success' | 'error' = 'success') {
-		const notification = document.createElement('div');
-		notification.className = `notification ${type}`;
-		notification.textContent = message;
-		document.body.appendChild(notification);
-
-		setTimeout(() => {
-			notification.classList.add('show');
-		}, 10);
-
-		setTimeout(() => {
-			notification.classList.remove('show');
-			setTimeout(() => notification.remove(), 300);
-		}, 2000);
-	}
-</script>
-
-<style>
-	.create-page {
-		height: calc(100vh - 60px);
-		overflow: hidden;
-		padding: 1rem;
-		box-sizing: border-box;
-	}
-
-	.split-container {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		height: 100%;
-		gap: 1px;
-		background: var(--color-border);
-		border-radius: 12px;
-		overflow: hidden;
-	}
-
-	/* Left Panel */
-	.left-panel {
-		background: var(--color-bg);
-		display: flex;
-		flex-direction: column;
-		overflow-y: auto;
-		padding: 2rem;
-		align-items: center;
-	}
-
-	.left-panel > * {
-		width: 100%;
-		max-width: 600px;
-	}
-
-	/* Right Panel */
-	.right-panel {
-		background: var(--color-bg);
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	/* Game Preview Section */
-	.game-preview-section {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.preview-panel {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		overflow: hidden;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.preview-header {
-		background: var(--color-bg);
-		padding: 0.75rem 1rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: 1px solid var(--color-border);
-		flex-shrink: 0;
-	}
-
-	.preview-header h3 {
-		margin: 0;
-		font-size: 1rem;
-		color: var(--color-text);
-	}
-
-	.preview-actions {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.preview-frame {
-		flex: 1;
-		background: var(--color-bg);
-		position: relative;
-		overflow: hidden;
-	}
-
-	.game-iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-		display: block;
-	}
-
-	/* Editor Panel */
-	.editor-panel {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-		height: calc(100% - 2rem);
-		margin-top: 1rem;
-		width: 100%;
-	}
-
-	.editor-panel.hidden {
-		display: none;
-	}
-
-	.editor-header {
-		background: var(--color-bg);
-		padding: 0.75rem 1rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	.editor-header h3 {
-		margin: 0;
-		font-size: 1rem;
-		color: var(--color-text);
-	}
-
-	.editor-actions {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.code-editor {
-		flex: 1;
-		overflow: hidden;
-	}
-
-	.code-editor .CodeMirror {
-		height: 100%;
-		font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
-		font-size: 14px;
-	}
-
-	/* Generator Section */
-	.generator-section {
-		flex: 1;
-		width: 100%;
-	}
-
-	.generator-section.hidden {
-		display: none;
-	}
-
-	.page-header {
-		text-align: center;
-		margin-bottom: 2rem;
-		transition:
-			opacity 0.3s ease,
-			max-height 0.3s ease;
-	}
-
-	.page-header.hidden {
-		opacity: 0;
-		max-height: 0;
-		margin: 0;
-		overflow: hidden;
-	}
-
-	.page-header h1 {
-		font-size: 2rem;
-		font-weight: 700;
-		color: var(--color-text);
-		margin-bottom: 0.5rem;
-	}
-
-	.subtitle {
-		color: var(--color-text-secondary);
-		font-size: 1.1rem;
-	}
-
-	/* Form Card */
-	.form-card {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		padding: 1.5rem;
-		margin-bottom: 1rem;
-	}
-
-	.form-content {
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-	}
-
-	.form-group {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-
-	.form-label {
-		color: var(--color-text);
-		font-weight: 500;
-		font-size: 1.1rem;
-	}
-
-	.form-textarea {
-		background: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 1rem;
-		font-size: 1rem;
-		font-family: inherit;
-		transition: all 0.2s ease;
-		resize: vertical;
-		min-height: 120px;
-	}
-
-	.form-textarea:focus {
-		outline: none;
-		border-color: var(--color-accent);
-		box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
-	}
-
-	.form-textarea::placeholder {
-		color: var(--color-text-muted);
-		font-size: 0.95rem;
-	}
-
-	/* Hints */
-	.form-hints {
-		background: var(--color-bg);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 1rem;
-		margin-top: 0.5rem;
-	}
-
-	.hint-title {
-		color: var(--color-text);
-		font-weight: 500;
-		margin: 0 0 0.5rem 0;
-		font-size: 0.9rem;
-	}
-
-	.hint-list {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.hint-list li {
-		color: var(--color-text-secondary);
-		font-size: 0.85rem;
-		padding-left: 1.5rem;
-		position: relative;
-	}
-
-	.hint-list li::before {
-		content: '•';
-		position: absolute;
-		left: 0.5rem;
-		color: var(--color-accent);
-	}
-
-	/* Quick Actions */
-	.quick-actions {
-		margin-top: 1rem;
-	}
-
-	.quick-actions-title {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-		margin: 0 0 0.75rem 0;
-	}
-
-	.quick-actions-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-		gap: 0.5rem;
-	}
-
-	.quick-action-btn {
-		background: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 0.75rem 1rem;
-		font-size: 0.9rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		text-align: center;
-		font-family: inherit;
-	}
-
-	.quick-action-btn:hover {
-		border-color: var(--color-accent);
-		background: rgba(0, 255, 136, 0.05);
-		transform: translateY(-1px);
-	}
-
-	/* Model Selection */
-	.model-selection {
-		margin-top: 1rem;
-	}
-
-	.model-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-		gap: 0.75rem;
-		margin-top: 0.75rem;
-	}
-
-	.model-option {
-		position: relative;
-		cursor: pointer;
-	}
-
-	.model-option input[type='radio'] {
-		position: absolute;
-		opacity: 0;
-		pointer-events: none;
-	}
-
-	.model-card {
-		display: flex;
-		flex-direction: column;
-		padding: 0.75rem;
-		background: var(--color-bg);
-		border: 2px solid var(--color-border);
-		border-radius: 8px;
-		transition: all 0.2s ease;
-		text-align: center;
-	}
-
-	.model-option:hover .model-card {
-		border-color: var(--color-accent);
-		background: rgba(0, 255, 136, 0.05);
-	}
-
-	.model-option input[type='radio']:checked + .model-card {
-		border-color: var(--color-accent);
-		background: rgba(0, 255, 136, 0.1);
-		box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.2);
-	}
-
-	.model-provider {
-		font-size: 0.65rem;
-		color: var(--color-accent);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		margin-bottom: 0.15rem;
-	}
-
-	.model-name {
-		font-weight: 600;
-		color: var(--color-text);
-		font-size: 0.9rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.model-desc {
-		font-size: 0.75rem;
-		color: var(--color-text-secondary);
-	}
-
-	/* Examples */
-	.examples {
-		margin-top: 1rem;
-	}
-
-	.examples-title {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-		margin: 0 0 0.75rem 0;
-	}
-
-	.example-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: 0.75rem;
-	}
-
-	.example-btn {
-		background: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 0.75rem 1rem;
-		font-size: 0.9rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		text-align: left;
-		font-family: inherit;
-	}
-
-	.example-btn:hover {
-		border-color: var(--color-accent);
-		background: rgba(0, 255, 136, 0.05);
-	}
-
-	/* Editor Buttons */
-	.editor-btn {
-		background: var(--color-surface);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 6px;
-		padding: 0.5rem 1rem;
-		font-size: 0.875rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		font-family: inherit;
-	}
-
-	.editor-btn:hover {
-		background: var(--color-bg);
-		border-color: var(--color-accent);
-	}
-
-	.editor-btn.primary {
-		background: var(--color-accent);
-		color: var(--color-bg);
-		border-color: var(--color-accent);
-	}
-
-	.editor-btn.primary:hover {
-		background: var(--color-accent-hover);
-	}
-
-	.editor-btn .icon {
-		font-size: 1rem;
-	}
-
-	/* Generate Button */
-	.generate-btn {
-		background: var(--color-accent);
-		color: var(--color-bg);
-		border: none;
-		border-radius: 8px;
-		padding: 1rem;
-		font-size: 1.1rem;
-		font-weight: 700;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5rem;
-	}
-
-	.generate-btn:hover:not(:disabled) {
-		background: var(--color-accent-hover);
-		transform: translateY(-1px);
-	}
-
-	.generate-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.generate-btn.iteration-mode {
-		background: #3b82f6;
-	}
-
-	.generate-btn.iteration-mode:hover:not(:disabled) {
-		background: #2563eb;
-	}
-
-	.generate-btn .icon {
-		font-size: 1.2rem;
-	}
-
-	/* Loading State */
-	.loading-container {
-		background: rgba(0, 0, 0, 0.8);
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1000;
-	}
-
-	.loading-content {
-		background: var(--color-surface);
-		padding: 2rem;
-		border-radius: 12px;
-		border: 1px solid var(--color-border);
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.spinner {
-		width: 2rem;
-		height: 2rem;
-		color: var(--color-accent);
-		animation: spin 1s linear infinite;
-	}
-
-	@keyframes spin {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.loading-text {
-		color: var(--color-text);
-		font-size: 1.1rem;
-	}
-
-	/* Error State */
-	.error-container {
-		background: rgba(239, 68, 68, 0.1);
-		border: 1px solid rgba(239, 68, 68, 0.5);
-		border-radius: 8px;
-		padding: 1rem;
-		margin: 2rem 0;
-	}
-
-	.error-message {
-		color: #ef4444;
-		margin: 0;
-	}
-
-	/* Notifications */
-	.notification {
-		position: fixed;
-		bottom: 2rem;
-		right: 2rem;
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 1rem 1.5rem;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-		transform: translateY(100px);
-		opacity: 0;
-		transition: all 0.3s ease;
-		z-index: 1000;
-	}
-
-	.notification.show {
-		transform: translateY(0);
-		opacity: 1;
-	}
-
-	.notification.success {
-		border-color: var(--color-accent);
-		background: rgba(0, 255, 136, 0.1);
-	}
-
-	.notification.error {
-		border-color: #ef4444;
-		background: rgba(239, 68, 68, 0.1);
-	}
-
-	/* Utilities */
-	.hidden {
-		display: none !important;
-	}
-
-	/* Placeholder Message */
-	.placeholder-message {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		text-align: center;
-		color: var(--color-text-muted);
-		font-size: 1.2rem;
-	}
-
-	.placeholder-message p {
-		margin: 0;
-	}
-
-	/* Responsive */
-	@media (max-width: 1200px) {
-		.split-container {
-			grid-template-columns: 1fr;
-			grid-template-rows: 1fr 1fr;
-		}
-	}
-
-	@media (max-width: 768px) {
-		.create-page {
-			padding: 0.5rem;
-		}
-
-		.page-header h1 {
-			font-size: 2rem;
-		}
-
-		.form-card {
-			padding: 1.5rem;
-		}
-
-		.example-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.quick-actions-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.preview-frame {
-			height: 400px;
-		}
-	}
-
-	/* Debug Borders for Create Page */
-	body.debug-borders .split-container {
-		outline-color: rgba(255, 0, 255, 0.8) !important;
-		outline-width: 3px !important;
-	}
-
-	body.debug-borders .left-panel {
-		outline-color: rgba(0, 255, 255, 0.6) !important;
-	}
-
-	body.debug-borders .right-panel {
-		outline-color: rgba(255, 255, 0, 0.6) !important;
-	}
-
-	body.debug-borders .generator-section {
-		outline-color: rgba(0, 255, 0, 0.5) !important;
-	}
-
-	body.debug-borders .editor-panel {
-		outline-color: rgba(255, 128, 0, 0.6) !important;
-	}
-
-	body.debug-borders .preview-panel {
-		outline-color: rgba(128, 0, 255, 0.6) !important;
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/datenschutz.astro b/games/mana-games/apps/web/src/pages/datenschutz.astro
deleted file mode 100644
index e1727041e..000000000
--- a/games/mana-games/apps/web/src/pages/datenschutz.astro
+++ /dev/null
@@ -1,445 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Button from '../components/Button.astro';
----
-
-<Layout title="Datenschutz">
-	<div class="datenschutz-container">
-		<header class="datenschutz-header">
-			<h1>Datenschutzerklärung</h1>
-			<p class="last-updated">Stand: Januar 2024</p>
-		</header>
-
-		<section class="content-section">
-			<h2>1. Datenschutz auf einen Blick</h2>
-
-			<div class="info-box">
-				<h3>Allgemeine Hinweise</h3>
-				<p>
-					Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren
-					personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten
-					sind alle Daten, mit denen Sie persönlich identifiziert werden können.
-				</p>
-			</div>
-
-			<div class="highlight-box">
-				<div class="highlight-icon">🛡️</div>
-				<div class="highlight-content">
-					<h4>Ihre Daten sind bei uns sicher</h4>
-					<p>
-						Wir erheben nur minimal notwendige Daten. Keine Tracker, keine Werbung, keine
-						versteckten Datensammlungen. Ihre Privatsphäre ist uns wichtig.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>2. Datenerfassung auf dieser Website</h2>
-
-			<h3>Wer ist verantwortlich für die Datenerfassung?</h3>
-			<p>
-				Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Die
-				Kontaktdaten können Sie dem Abschnitt „Hinweis zur verantwortlichen Stelle" in dieser
-				Datenschutzerklärung entnehmen.
-			</p>
-
-			<h3>Wie erfassen wir Ihre Daten?</h3>
-			<p>
-				Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es
-				sich z.B. um Daten handeln, die Sie in ein Kontaktformular eingeben.
-			</p>
-			<p>
-				Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch
-				unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z.B. Internetbrowser,
-				Betriebssystem oder Uhrzeit des Seitenaufrufs).
-			</p>
-
-			<h3>Wofür nutzen wir Ihre Daten?</h3>
-			<p>
-				Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung der Website zu
-				gewährleisten. Andere Daten können zur Analyse Ihres Nutzerverhaltens verwendet werden.
-			</p>
-		</section>
-
-		<section class="content-section">
-			<h2>3. Hosting und Content Delivery Networks (CDN)</h2>
-
-			<div class="service-box">
-				<h3>Netlify</h3>
-				<p>
-					Wir hosten unsere Website bei Netlify. Anbieter ist die Netlify, Inc., 2325 3rd Street,
-					Suite 296, San Francisco, CA 94107, USA.
-				</p>
-				<p>
-					Beim Besuch unserer Website erfasst Netlify verschiedene Logfiles inklusive Ihrer
-					IP-Adressen. Details entnehmen Sie der Datenschutzerklärung von Netlify:
-					<a href="https://www.netlify.com/privacy/" target="_blank" rel="noopener noreferrer">
-						https://www.netlify.com/privacy/
-					</a>
-				</p>
-				<p>
-					Die Verwendung von Netlify erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Wir haben
-					ein berechtigtes Interesse an einer möglichst zuverlässigen Darstellung unserer Website.
-				</p>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>4. Allgemeine Hinweise und Pflichtinformationen</h2>
-
-			<h3>Datenschutz</h3>
-			<p>
-				Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir
-				behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen
-				Datenschutzvorschriften sowie dieser Datenschutzerklärung.
-			</p>
-
-			<h3>Hinweis zur verantwortlichen Stelle</h3>
-			<p>Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:</p>
-
-			<div class="contact-box">
-				<p>
-					[Ihr Name/Firma]<br />
-					[Ihre Adresse]<br />
-					[PLZ und Ort]
-				</p>
-				<p>E-Mail: [Ihre E-Mail-Adresse]</p>
-			</div>
-
-			<h3>Speicherdauer</h3>
-			<p>
-				Soweit innerhalb dieser Datenschutzerklärung keine speziellere Speicherdauer genannt wurde,
-				verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck für die Datenverarbeitung
-				entfällt.
-			</p>
-		</section>
-
-		<section class="content-section">
-			<h2>5. Datenerfassung auf dieser Website</h2>
-
-			<h3>Server-Log-Dateien</h3>
-			<p>
-				Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten
-				Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:
-			</p>
-			<ul class="data-list">
-				<li>Browsertyp und Browserversion</li>
-				<li>Verwendetes Betriebssystem</li>
-				<li>Referrer URL</li>
-				<li>Hostname des zugreifenden Rechners</li>
-				<li>Uhrzeit der Serveranfrage</li>
-				<li>IP-Adresse</li>
-			</ul>
-			<p>Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.</p>
-
-			<h3>Progressive Web App (PWA)</h3>
-			<p>
-				Diese Website kann als Progressive Web App (PWA) installiert werden. Bei der Installation
-				werden folgende Daten lokal auf Ihrem Gerät gespeichert:
-			</p>
-			<ul class="data-list">
-				<li>App-Manifest und Icons</li>
-				<li>Service Worker für Offline-Funktionalität</li>
-				<li>Spielstände und Einstellungen (im localStorage)</li>
-			</ul>
-			<p>
-				Diese Daten verbleiben ausschließlich auf Ihrem Gerät und werden nicht an uns oder Dritte
-				übertragen.
-			</p>
-		</section>
-
-		<section class="content-section">
-			<h2>6. Analyse-Tools und Werbung</h2>
-
-			<div class="highlight-box positive">
-				<div class="highlight-icon">✅</div>
-				<div class="highlight-content">
-					<h4>Keine Analyse-Tools</h4>
-					<p>
-						Wir verwenden keine Analyse-Tools wie Google Analytics oder ähnliche Dienste. Ihre
-						Nutzung unserer Website wird nicht getrackt oder analysiert.
-					</p>
-				</div>
-			</div>
-
-			<div class="highlight-box positive">
-				<div class="highlight-icon">🚫</div>
-				<div class="highlight-content">
-					<h4>Keine Werbung</h4>
-					<p>
-						Unsere Website ist komplett werbefrei. Wir verwenden keine Werbenetzwerke oder
-						Display-Werbung jeglicher Art.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>7. Plugins und Tools</h2>
-
-			<h3>Keine externen Plugins</h3>
-			<p>
-				Wir verwenden keine Social Media Plugins, keine eingebetteten Videos von Drittanbietern und
-				keine externen Schriftarten. Alle Ressourcen werden direkt von unserem Server ausgeliefert.
-			</p>
-		</section>
-
-		<section class="content-section">
-			<h2>8. Ihre Rechte</h2>
-
-			<h3>Sie haben folgende Rechte:</h3>
-			<div class="rights-grid">
-				<div class="right-card">
-					<h4>Auskunftsrecht</h4>
-					<p>Sie können Auskunft über Ihre gespeicherten personenbezogenen Daten verlangen.</p>
-				</div>
-				<div class="right-card">
-					<h4>Berichtigung</h4>
-					<p>Sie können die Berichtigung unrichtiger Daten verlangen.</p>
-				</div>
-				<div class="right-card">
-					<h4>Löschung</h4>
-					<p>Sie können die Löschung Ihrer personenbezogenen Daten verlangen.</p>
-				</div>
-				<div class="right-card">
-					<h4>Einschränkung</h4>
-					<p>Sie können die Einschränkung der Verarbeitung verlangen.</p>
-				</div>
-				<div class="right-card">
-					<h4>Widerspruch</h4>
-					<p>Sie können der Verarbeitung Ihrer Daten widersprechen.</p>
-				</div>
-				<div class="right-card">
-					<h4>Datenübertragbarkeit</h4>
-					<p>Sie haben das Recht auf Datenübertragbarkeit.</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>9. Änderungen</h2>
-			<p>
-				Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit sie stets den aktuellen
-				rechtlichen Anforderungen entspricht oder um Änderungen unserer Leistungen in der
-				Datenschutzerklärung umzusetzen, z.B. bei der Einführung neuer Services. Für Ihren erneuten
-				Besuch gilt dann die neue Datenschutzerklärung.
-			</p>
-		</section>
-
-		<div class="footer-actions">
-			<Button href="/" variant="ghost">Zurück zur Startseite</Button>
-		</div>
-	</div>
-</Layout>
-
-<style>
-	.datenschutz-container {
-		max-width: 800px;
-		margin: 0 auto;
-		padding: 2rem 0;
-	}
-
-	.datenschutz-header {
-		text-align: center;
-		margin-bottom: 3rem;
-		padding-bottom: 2rem;
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	.datenschutz-header h1 {
-		font-size: 3rem;
-		font-weight: 900;
-		margin-bottom: 1rem;
-		background: linear-gradient(135deg, var(--color-text), var(--color-text-secondary));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.last-updated {
-		color: var(--color-text-secondary);
-		font-size: 1.1rem;
-	}
-
-	.content-section {
-		margin-bottom: 4rem;
-	}
-
-	.content-section h2 {
-		font-size: 2rem;
-		font-weight: 700;
-		margin-bottom: 1.5rem;
-		color: var(--color-text);
-	}
-
-	.content-section h3 {
-		font-size: 1.5rem;
-		font-weight: 600;
-		margin-top: 2rem;
-		margin-bottom: 1rem;
-		color: var(--color-text);
-	}
-
-	.content-section h4 {
-		font-size: 1.2rem;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
-		color: var(--color-text);
-	}
-
-	.content-section p {
-		color: var(--color-text-secondary);
-		line-height: 1.8;
-		margin-bottom: 1rem;
-	}
-
-	.info-box {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 1.5rem;
-		margin: 1.5rem 0;
-	}
-
-	.highlight-box {
-		display: flex;
-		gap: 1.5rem;
-		align-items: start;
-		background: rgba(0, 255, 136, 0.05);
-		border: 1px solid rgba(0, 255, 136, 0.2);
-		border-radius: 1rem;
-		padding: 1.5rem;
-		margin: 2rem 0;
-	}
-
-	.highlight-box.positive {
-		background: rgba(0, 255, 136, 0.1);
-		border-color: var(--color-accent);
-	}
-
-	.highlight-icon {
-		font-size: 2rem;
-		flex-shrink: 0;
-	}
-
-	.highlight-content h4 {
-		margin-bottom: 0.5rem;
-	}
-
-	.highlight-content p {
-		margin-bottom: 0;
-	}
-
-	.service-box {
-		background: var(--color-bg-secondary);
-		border-left: 3px solid var(--color-accent);
-		padding: 1.5rem;
-		margin: 1.5rem 0;
-	}
-
-	.service-box h3 {
-		margin-top: 0;
-	}
-
-	.contact-box {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-		margin: 1rem 0;
-		font-family: monospace;
-	}
-
-	.data-list {
-		list-style: none;
-		padding: 0;
-		margin: 1rem 0;
-	}
-
-	.data-list li {
-		color: var(--color-text-secondary);
-		padding: 0.5rem 0;
-		padding-left: 1.5rem;
-		position: relative;
-	}
-
-	.data-list li::before {
-		content: '•';
-		position: absolute;
-		left: 0;
-		color: var(--color-accent);
-	}
-
-	.rights-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: 1.5rem;
-		margin: 1.5rem 0;
-	}
-
-	.right-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-		transition: all 0.3s ease;
-	}
-
-	.right-card:hover {
-		border-color: var(--color-accent);
-		transform: translateY(-2px);
-	}
-
-	.right-card h4 {
-		color: var(--color-accent);
-		margin-bottom: 0.5rem;
-	}
-
-	.right-card p {
-		font-size: 0.9rem;
-		margin-bottom: 0;
-	}
-
-	.footer-actions {
-		margin-top: 4rem;
-		padding-top: 2rem;
-		border-top: 1px solid var(--color-border);
-		text-align: center;
-	}
-
-	a {
-		color: var(--color-accent);
-		text-decoration: none;
-		transition: opacity 0.2s ease;
-	}
-
-	a:hover {
-		opacity: 0.8;
-		text-decoration: underline;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.datenschutz-header h1 {
-			font-size: 2rem;
-		}
-
-		.content-section h2 {
-			font-size: 1.5rem;
-		}
-
-		.content-section h3 {
-			font-size: 1.25rem;
-		}
-
-		.highlight-box {
-			flex-direction: column;
-			gap: 1rem;
-		}
-
-		.rights-grid {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/games/[slug].astro b/games/mana-games/apps/web/src/pages/games/[slug].astro
deleted file mode 100644
index 1434c2e84..000000000
--- a/games/mana-games/apps/web/src/pages/games/[slug].astro
+++ /dev/null
@@ -1,1101 +0,0 @@
----
-import Layout from '../../layouts/Layout.astro';
-import Button from '../../components/Button.astro';
-import { games } from '../../data/games';
-
-export function getStaticPaths() {
-  return games.map((game) => ({
-    params: { slug: game.slug },
-    props: { game },
-  }));
-}
-
-const { game } = Astro.props;
----
-
-<Layout title={game.title} description={game.description} isGamePage={true} gameTitle={game.title} gameSlug={game.slug} hideFooter={true}>
-  <div class="game-page">
-    <div class="game-container" id="gameContainer">
-      <div class="game-panel">
-        <iframe 
-          src={game.htmlFile} 
-          title={game.title}
-          allowfullscreen
-        ></iframe>
-      </div>
-      
-      <div class="description-panel" id="descriptionPanel">
-        <div class="description-header">
-          <h3>Spielinfo</h3>
-          <Button 
-            id="closeDescriptionBtn" 
-            variant="ghost" 
-            size="icon"
-            class="close-btn"
-          >
-            ✕
-          </Button>
-        </div>
-        <div class="description-content">
-          <div class="description-section stats-section">
-            <h4>📊 Deine Statistiken</h4>
-            <div id="game-stats-panel" class="stats-loading">
-              <p>Lade Statistiken...</p>
-            </div>
-          </div>
-          
-          <div class="description-section">
-            <h4>{game.title}</h4>
-            <p>{game.description}</p>
-          </div>
-          
-          <div class="description-section">
-            <h4>Steuerung</h4>
-            <p>{game.controls}</p>
-          </div>
-          
-          <div class="description-section">
-            <h4>Details</h4>
-            <div class="game-meta">
-              <div class="meta-item">
-                <span class="meta-label">Schwierigkeit:</span>
-                <span class={`difficulty difficulty-${game.difficulty.toLowerCase()}`}>{game.difficulty}</span>
-              </div>
-              {game.codeStats && (
-                <div class="meta-item">
-                  <span class="meta-label">Code:</span>
-                  <span class="code-stats">
-                    <span class="code-symbol">< ></span>
-                    {game.codeStats.total} Zeilen ({game.codeStats.code} Code / {game.codeStats.comments} Kommentare)
-                  </span>
-                </div>
-              )}
-            </div>
-            <div class="tags">
-              {game.tags.map((tag) => (
-                <span class="tag">{tag}</span>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div id="gameMenu" class="game-menu">
-      <div class="menu-header">
-        <h2>{game.title}</h2>
-        <Button 
-          id="closeMenuBtn" 
-          variant="ghost" 
-          size="icon"
-          class="close-btn"
-        >
-          ✕
-        </Button>
-      </div>
-      
-      <div class="menu-content">
-        <div class="menu-section">
-          <h3>Beschreibung</h3>
-          <p>{game.description}</p>
-        </div>
-        
-        <div class="menu-section">
-          <h3>Steuerung</h3>
-          <p>{game.controls}</p>
-        </div>
-        
-        <div class="menu-section">
-          <h3>Details</h3>
-          <div class="game-meta">
-            <div class="meta-item">
-              <span class="meta-label">Schwierigkeit:</span>
-              <span class={`difficulty difficulty-${game.difficulty.toLowerCase()}`}>{game.difficulty}</span>
-            </div>
-          </div>
-          <div class="tags">
-            {game.tags.map((tag) => (
-              <span class="tag">{tag}</span>
-            ))}
-          </div>
-        </div>
-        
-        <div class="menu-section">
-          <h3>Deine Statistiken</h3>
-          <div id="game-stats-menu" class="stats-loading">
-            <p>Lade Statistiken...</p>
-          </div>
-        </div>
-        
-        <div class="menu-section playground-section">
-          <Button 
-            href={`/games/${game.slug}/playground`} 
-            variant="accent"
-            class="menu-link playground-link"
-          >
-            <span>🔧</span>
-            <span>Code bearbeiten</span>
-          </Button>
-        </div>
-        
-        <div class="menu-section">
-          <Button 
-            href="/" 
-            variant="secondary"
-            class="menu-link back-link"
-          >
-            <span>←</span>
-            <span>Zurück zur Spieleübersicht</span>
-          </Button>
-        </div>
-      </div>
-    </div>
-  </div>
-</Layout>
-
-<script>
-  // Game communication inline to avoid module issues
-  const gameSlug = window.location.pathname.split('/').filter(p => p).pop();
-  let gameStartTime = null;
-  
-  // Stats service functions
-  const statsService = {
-    getStoredStats() {
-      try {
-        const stored = localStorage.getItem('mana-games-stats');
-        return stored ? JSON.parse(stored) : {};
-      } catch (error) {
-        console.error('Error reading stats:', error);
-        return {};
-      }
-    },
-    
-    saveStats(stats) {
-      try {
-        localStorage.setItem('mana-games-stats', JSON.stringify(stats));
-      } catch (error) {
-        console.error('Error saving stats:', error);
-      }
-    },
-    
-    updateStats(gameId, update) {
-      const allStats = this.getStoredStats();
-      const currentStats = allStats[gameId] || {
-        gameId,
-        highScore: 0,
-        lastScore: 0,
-        gamesPlayed: 0,
-        totalPlayTime: 0,
-        lastPlayed: new Date().toISOString(),
-        achievements: []
-      };
-
-      allStats[gameId] = {
-        ...currentStats,
-        ...update,
-        gameId,
-        lastPlayed: new Date().toISOString()
-      };
-
-      // Update highscore for click-race (lower is better)
-      if (gameId === 'click-race' && update.lastScore) {
-        if (currentStats.highScore === 0 || update.lastScore < currentStats.highScore) {
-          allStats[gameId].highScore = update.lastScore;
-        }
-      } else if (update.lastScore && update.lastScore > currentStats.highScore) {
-        allStats[gameId].highScore = update.lastScore;
-      }
-
-      this.saveStats(allStats);
-    },
-    
-    incrementGamesPlayed(gameId) {
-      const allStats = this.getStoredStats();
-      const stats = allStats[gameId] || {
-        gameId,
-        highScore: 0,
-        lastScore: 0,
-        gamesPlayed: 0,
-        totalPlayTime: 0,
-        lastPlayed: new Date().toISOString()
-      };
-      
-      this.updateStats(gameId, {
-        gamesPlayed: stats.gamesPlayed + 1
-      });
-    },
-    
-    addPlayTime(gameId, seconds) {
-      const allStats = this.getStoredStats();
-      const stats = allStats[gameId] || {
-        gameId,
-        highScore: 0,
-        lastScore: 0,
-        gamesPlayed: 0,
-        totalPlayTime: 0,
-        lastPlayed: new Date().toISOString()
-      };
-      
-      this.updateStats(gameId, {
-        totalPlayTime: stats.totalPlayTime + seconds
-      });
-    },
-    
-    unlockAchievement(gameId, achievement) {
-      const allStats = this.getStoredStats();
-      const stats = allStats[gameId];
-      if (!stats) return;
-      
-      const achievements = stats.achievements || [];
-      const exists = achievements.find(a => a.id === achievement.id);
-      
-      if (!exists) {
-        achievements.push({
-          ...achievement,
-          unlockedAt: new Date().toISOString()
-        });
-        
-        this.updateStats(gameId, { achievements });
-      }
-    }
-  };
-  
-  // Listen for game messages
-  window.addEventListener('message', (event) => {
-    if (event.origin !== window.location.origin) return;
-    
-    const message = event.data;
-    if (!message.type || message.gameId !== gameSlug) return;
-    
-    console.log('Received game message:', message);
-    
-    switch (message.type) {
-      case 'GAME_LOADED':
-        gameStartTime = Date.now();
-        statsService.incrementGamesPlayed(gameSlug);
-        break;
-        
-      case 'GAME_EVENT':
-        if (message.event === 'SCORE_UPDATE' && message.data?.score) {
-          statsService.updateStats(gameSlug, {
-            lastScore: message.data.score
-          });
-        } else if (message.event === 'ACHIEVEMENT_UNLOCKED' && message.data?.achievement) {
-          statsService.unlockAchievement(gameSlug, message.data.achievement);
-        } else if (message.event === 'GAME_OVER' && message.data?.score) {
-          statsService.updateStats(gameSlug, {
-            lastScore: message.data.score
-          });
-        }
-        break;
-        
-      case 'GAME_ENDED':
-        if (gameStartTime) {
-          const playTime = Math.floor((Date.now() - gameStartTime) / 1000);
-          statsService.addPlayTime(gameSlug, playTime);
-          gameStartTime = null;
-        }
-        break;
-    }
-  });
-  
-  // Track play time on page unload
-  window.addEventListener('beforeunload', () => {
-    if (gameStartTime) {
-      const playTime = Math.floor((Date.now() - gameStartTime) / 1000);
-      statsService.addPlayTime(gameSlug, playTime);
-    }
-  });
-  
-  // Load and display game stats
-  function loadGameStats() {
-    const stats = statsService.getStoredStats()[gameSlug];
-    const panelElement = document.getElementById('game-stats-panel');
-    const menuElement = document.getElementById('game-stats-menu');
-    
-    let statsHTML = '';
-    
-    if (stats) {
-      statsHTML = `
-        <table style="width: 100%; border-collapse: collapse; margin-bottom: 0.75rem;">
-          <tbody>
-            <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
-              <td style="padding: 0.3rem 0.5rem 0.3rem 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); font-weight: 500;">Highscore</td>
-              <td style="padding: 0.3rem 0; font-size: 0.8rem; color: #fff; font-weight: 700; font-family: monospace;">${statsService.formatScore(gameSlug, stats.highScore)}</td>
-            </tr>
-            <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
-              <td style="padding: 0.3rem 0.5rem 0.3rem 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); font-weight: 500;">Letzter Score</td>
-              <td style="padding: 0.3rem 0; font-size: 0.8rem; color: #fff; font-weight: 700; font-family: monospace;">${statsService.formatScore(gameSlug, stats.lastScore)}</td>
-            </tr>
-            <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
-              <td style="padding: 0.3rem 0.5rem 0.3rem 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); font-weight: 500;">Gespielt</td>
-              <td style="padding: 0.3rem 0; font-size: 0.8rem; color: #fff; font-weight: 700; font-family: monospace;">${stats.gamesPlayed}x</td>
-            </tr>
-            <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
-              <td style="padding: 0.3rem 0.5rem 0.3rem 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); font-weight: 500;">Spielzeit</td>
-              <td style="padding: 0.3rem 0; font-size: 0.8rem; color: #fff; font-weight: 700; font-family: monospace;">${statsService.formatPlayTime(stats.totalPlayTime)}</td>
-            </tr>
-            <tr>
-              <td style="padding: 0.3rem 0.5rem 0.3rem 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); font-weight: 500;">Zuletzt</td>
-              <td style="padding: 0.3rem 0; font-size: 0.8rem; color: #fff; font-weight: 700; font-family: monospace;">${statsService.getRelativeTime(stats.lastPlayed)}</td>
-            </tr>
-          </tbody>
-        </table>
-        ${stats.achievements && stats.achievements.length > 0 ? `
-          <style>
-            .game-achievements {
-              margin-top: 1rem;
-              padding-top: 1rem;
-              border-top: 1px solid rgba(255, 255, 255, 0.08);
-            }
-            .game-achievements-header {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              margin-bottom: 0.75rem;
-            }
-            .game-achievements-title {
-              font-size: 0.95rem;
-              font-weight: 700;
-              color: #fff;
-            }
-            .game-achievements-count {
-              font-size: 0.8rem;
-              color: #00ff88;
-              font-weight: 600;
-              padding: 0.2rem 0.6rem;
-              background: rgba(0, 255, 136, 0.1);
-              border-radius: 1rem;
-            }
-            .game-achievement-item {
-              display: flex;
-              align-items: flex-start;
-              gap: 0.5rem;
-              padding: 0.5rem;
-              background: rgba(255, 215, 0, 0.05);
-              border: 1px solid rgba(255, 215, 0, 0.15);
-              border-radius: 0.5rem;
-              margin-bottom: 0.5rem;
-            }
-            .game-achievement-item:hover {
-              background: rgba(255, 215, 0, 0.08);
-              border-color: rgba(255, 215, 0, 0.25);
-            }
-            .game-achievement-name {
-              font-weight: 600;
-              color: #fbbf24;
-              font-size: 0.9rem;
-            }
-            .game-achievement-desc {
-              font-size: 0.8rem;
-              color: rgba(255, 255, 255, 0.6);
-              margin-top: 0.2rem;
-            }
-          </style>
-          <div class="game-achievements">
-            <div class="game-achievements-header">
-              <span class="game-achievements-title">🏆 Achievements</span>
-              <span class="game-achievements-count">${stats.achievements.length} freigeschaltet</span>
-            </div>
-            <div>
-              ${stats.achievements.map(a => `
-                <div class="game-achievement-item">
-                  <span>🏅</span>
-                  <div>
-                    <div class="game-achievement-name">${a.name}</div>
-                    <div class="game-achievement-desc">${a.description}</div>
-                  </div>
-                </div>
-              `).join('')}
-            </div>
-          </div>
-        ` : `
-          <style>
-            .game-achievements-empty {
-              margin-top: 1rem;
-              padding-top: 1rem;
-              border-top: 1px solid rgba(255, 255, 255, 0.08);
-              opacity: 0.6;
-            }
-            .game-no-achievements {
-              text-align: center;
-              color: rgba(255, 255, 255, 0.5);
-              font-style: italic;
-              font-size: 0.85rem;
-              padding: 1rem 0;
-            }
-          </style>
-          <div class="game-achievements-empty">
-            <div class="game-achievements-header">
-              <span class="game-achievements-title">🏆 Achievements</span>
-              <span class="game-achievements-count">0 freigeschaltet</span>
-            </div>
-            <p class="game-no-achievements">Noch keine Achievements freigeschaltet</p>
-          </div>
-        `}
-      `;
-    } else {
-      statsHTML = '<p class="no-stats">Noch keine Statistiken vorhanden. Spiele das Spiel, um Statistiken zu sammeln!</p>';
-    }
-    
-    if (panelElement) panelElement.innerHTML = statsHTML;
-    if (menuElement) menuElement.innerHTML = statsHTML;
-  }
-  
-  // Format score based on game type
-  statsService.formatScore = function(gameId, score) {
-    if (gameId === 'click-race' || gameId === 'reaction-test') {
-      return `${(score / 1000).toFixed(2)}s`;
-    }
-    return score.toLocaleString('de-DE');
-  };
-  
-  statsService.formatPlayTime = function(seconds) {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    
-    if (hours > 0) {
-      return `${hours}h ${minutes}m`;
-    }
-    return `${minutes}m`;
-  };
-  
-  statsService.getRelativeTime = function(dateString) {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'Gerade eben';
-    if (diffMins < 60) return `Vor ${diffMins} Minuten`;
-    if (diffHours < 24) return `Vor ${diffHours} Stunden`;
-    if (diffDays < 7) return `Vor ${diffDays} Tagen`;
-    
-    return date.toLocaleDateString('de-DE');
-  };
-  
-  // Load stats on page load
-  window.addEventListener('DOMContentLoaded', () => {
-    loadGameStats();
-  });
-  
-  // Reload stats when panel opens
-  const menuBtn = document.getElementById('menuBtn');
-  if (menuBtn) {
-    menuBtn.addEventListener('click', () => {
-      setTimeout(loadGameStats, 100);
-    });
-  }
-  
-  // Listen for stats updates
-  window.addEventListener('message', (event) => {
-    if (event.data.type && event.data.gameId === gameSlug) {
-      setTimeout(loadGameStats, 100);
-    }
-  });
-</script>
-
-<script>
-  // Add no-scroll class to body for game pages
-  document.body.classList.add('no-scroll');
-  
-  // Wait for DOM to be fully loaded
-  window.addEventListener('DOMContentLoaded', () => {
-    const iframe = document.querySelector('iframe') as HTMLIFrameElement;
-    const fullscreenBtn = document.getElementById('fullscreenBtn');
-    const refreshBtn = document.getElementById('refreshBtn');
-    const menuBtn = document.getElementById('menuBtn');
-    const gameMenu = document.getElementById('gameMenu');
-    const closeMenuBtn = document.getElementById('closeMenuBtn');
-
-    fullscreenBtn?.addEventListener('click', () => {
-      if (iframe.requestFullscreen) {
-        iframe.requestFullscreen();
-      }
-    });
-
-    refreshBtn?.addEventListener('click', () => {
-      iframe.src = iframe.src;
-    });
-
-    const gameContainer = document.getElementById('gameContainer');
-    const descriptionPanel = document.getElementById('descriptionPanel');
-    const closeDescriptionBtn = document.getElementById('closeDescriptionBtn');
-
-    menuBtn?.addEventListener('click', () => {
-      // Toggle zwischen Overlay-Menu und Split-Screen
-      if (descriptionPanel?.classList.contains('active')) {
-        descriptionPanel.classList.remove('active');
-        gameContainer?.classList.remove('split-view');
-      } else {
-        descriptionPanel?.classList.add('active');
-        gameContainer?.classList.add('split-view');
-      }
-    });
-
-    closeDescriptionBtn?.addEventListener('click', () => {
-      descriptionPanel?.classList.remove('active');
-      gameContainer?.classList.remove('split-view');
-    });
-
-    closeMenuBtn?.addEventListener('click', () => {
-      gameMenu?.classList.remove('active');
-    });
-
-    // Close menu when clicking outside
-    gameMenu?.addEventListener('click', (e) => {
-      if (e.target === gameMenu) {
-        gameMenu.classList.remove('active');
-      }
-    });
-
-    // Handle ESC key to exit fullscreen or close menu
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape' && gameMenu?.classList.contains('active')) {
-        gameMenu.classList.remove('active');
-      }
-    });
-
-    // Prevent scrolling on the page
-    window.addEventListener('wheel', (e) => {
-      if (!gameMenu?.classList.contains('active')) {
-        e.preventDefault();
-      }
-    }, { passive: false });
-
-    window.addEventListener('touchmove', (e) => {
-      if (!gameMenu?.classList.contains('active')) {
-        e.preventDefault();
-      }
-    }, { passive: false });
-  });
-</script>
-
-<style>
-  .game-page {
-    position: fixed;
-    top: 60px; /* Height of nav */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: calc(100vh - 60px);
-  }
-
-  .game-container {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
-    transition: all 0.3s ease;
-  }
-
-  .game-container.split-view {
-    grid-template-columns: 1fr 400px;
-    gap: 1px;
-    background: var(--color-border);
-  }
-
-  .game-panel {
-    background: #000;
-    overflow: hidden;
-  }
-
-  .game-panel iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-    background-color: #000;
-  }
-
-  .description-panel {
-    background: var(--color-bg);
-    display: none;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .description-panel.active {
-    display: flex;
-  }
-
-  .description-header {
-    background: var(--color-bg-secondary);
-    padding: 1rem;
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .description-header h3 {
-    margin: 0;
-    font-size: 1rem;
-    color: var(--color-text);
-    font-weight: 600;
-  }
-
-  .description-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-  }
-
-  .description-section {
-    margin-bottom: 1.5rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .description-section:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
-  }
-
-  .description-section h4 {
-    color: var(--color-accent);
-    margin-bottom: 0.75rem;
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  .description-section p {
-    color: var(--color-text-secondary);
-    line-height: 1.6;
-    font-size: 0.9rem;
-    margin: 0;
-  }
-
-  .code-stats {
-    color: var(--color-accent);
-    font-weight: 600;
-    font-size: 0.85rem;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  .code-symbol {
-    font-family: monospace;
-    opacity: 0.7;
-  }
-
-  /* Menu Overlay */
-  .game-menu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.95);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s ease;
-    z-index: 1000;
-    padding: 1rem;
-  }
-
-  .game-menu.active {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .game-menu > div {
-    background-color: var(--color-bg-secondary);
-    border: 2px solid var(--color-accent);
-    border-radius: 1rem;
-    max-width: 600px;
-    width: 100%;
-    max-height: 90vh;
-    overflow-y: auto;
-    transform: translateY(20px) scale(0.95);
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    box-shadow: 0 20px 60px rgba(0, 255, 136, 0.2);
-  }
-
-  .game-menu.active > div {
-    transform: translateY(0) scale(1);
-  }
-
-  /* Custom scrollbar for menu */
-  .game-menu > div::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  .game-menu > div::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 4px;
-  }
-
-  .game-menu > div::-webkit-scrollbar-thumb {
-    background: var(--color-accent);
-    border-radius: 4px;
-    transition: background 0.2s ease;
-  }
-
-  .game-menu > div::-webkit-scrollbar-thumb:hover {
-    background: var(--color-accent-secondary);
-  }
-
-  .menu-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2rem;
-    border-bottom: 2px solid var(--color-border);
-    background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg));
-  }
-
-  .menu-header h2 {
-    margin: 0;
-    color: var(--color-accent);
-    font-size: 1.75rem;
-    font-weight: 800;
-    letter-spacing: -0.02em;
-  }
-
-  .close-btn {
-    font-size: 1.25rem !important;
-  }
-
-  .close-btn:hover {
-    transform: rotate(90deg);
-  }
-
-  .menu-content {
-    padding: 2rem;
-  }
-
-  .menu-section {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    transition: all 0.2s ease;
-  }
-
-  .menu-section:hover {
-    background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(0, 255, 136, 0.2);
-    transform: translateY(-2px);
-  }
-
-  .menu-section:last-child {
-    margin-bottom: 0;
-    background: none;
-    border: none;
-    padding-top: 0.5rem;
-  }
-
-  .menu-section:last-child:hover {
-    transform: none;
-  }
-
-  .menu-section h3 {
-    color: var(--color-accent);
-    margin-bottom: 0.75rem;
-    font-size: 1rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .menu-section p {
-    color: var(--color-text-secondary);
-    line-height: 1.7;
-    font-size: 0.95rem;
-  }
-
-  .game-meta {
-    margin-bottom: 1rem;
-  }
-
-  .meta-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .meta-label {
-    color: var(--color-text-secondary);
-    font-size: 0.9rem;
-    min-width: 100px;
-  }
-
-  .difficulty {
-    padding: 0.35rem 1rem;
-    border-radius: 2rem;
-    font-weight: bold;
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-
-  .difficulty-einfach {
-    background: linear-gradient(135deg, #22c55e, #16a34a);
-    color: #fff;
-  }
-
-  .difficulty-mittel {
-    background: linear-gradient(135deg, #f59e0b, #d97706);
-    color: #fff;
-  }
-
-  .difficulty-schwer {
-    background: linear-gradient(135deg, #ef4444, #dc2626);
-    color: #fff;
-  }
-
-  .tags {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    margin-top: 1rem;
-  }
-
-  .tag {
-    background: rgba(0, 255, 136, 0.1);
-    color: var(--color-accent);
-    padding: 0.35rem 1rem;
-    border-radius: 2rem;
-    font-size: 0.85rem;
-    border: 1px solid rgba(0, 255, 136, 0.3);
-    transition: all 0.2s ease;
-  }
-
-  .tag:hover {
-    background: rgba(0, 255, 136, 0.2);
-    border-color: var(--color-accent);
-    transform: translateY(-1px);
-  }
-
-  .menu-link {
-    width: 100%;
-    justify-content: center;
-    font-size: 0.95rem;
-    font-weight: bold;
-    gap: 0.5rem;
-  }
-
-  .back-link:hover {
-    transform: translateX(-4px);
-  }
-
-  .playground-section {
-    background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 255, 136, 0.02));
-    border-color: rgba(0, 255, 136, 0.2);
-  }
-
-  .playground-link:hover {
-    transform: scale(1.05);
-  }
-
-  .playground-link span:first-child {
-    font-size: 1.2rem;
-  }
-
-  /* Mobile Responsive */
-  /* Stats Section Styling */
-  .stats-section {
-    background: rgba(0, 255, 136, 0.03);
-    border: 1px solid rgba(0, 255, 136, 0.1);
-    border-radius: 0.5rem;
-    padding: 0.75rem !important;
-    margin-bottom: 1.5rem !important;
-  }
-
-  .stats-section h4 {
-    color: var(--color-accent);
-    margin-bottom: 0.75rem;
-    font-size: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .stats-loading {
-    text-align: center;
-    color: var(--color-text-secondary);
-    padding: 1rem;
-    font-style: italic;
-    opacity: 0.6;
-  }
-
-  /* Stats Table */
-  .stats-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 0.75rem;
-  }
-
-  .stats-table tbody tr {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    transition: background 0.2s ease;
-  }
-
-  .stats-table tbody tr:hover {
-    background: rgba(255, 255, 255, 0.02);
-  }
-
-  .stats-table tbody tr:last-child {
-    border-bottom: none;
-  }
-
-  .stats-table td {
-    padding: 0.4rem 0.5rem;
-    font-size: 0.85rem;
-  }
-
-  .stats-table .stat-label {
-    color: var(--color-text-secondary);
-    font-weight: 500;
-    width: auto;
-    padding-right: 1.5rem;
-  }
-
-  .stats-table .stat-value {
-    color: var(--color-text);
-    font-weight: 700;
-    text-align: left;
-    font-family: 'Courier New', monospace;
-    letter-spacing: -0.02em;
-  }
-
-  /* Achievements Section */
-  .achievements-section {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-  }
-
-  .achievements-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.75rem;
-  }
-
-  .achievements-title {
-    font-size: 0.95rem;
-    font-weight: 700;
-    color: var(--color-text);
-  }
-
-  .achievements-count {
-    font-size: 0.8rem;
-    color: var(--color-accent);
-    font-weight: 600;
-    padding: 0.2rem 0.6rem;
-    background: rgba(0, 255, 136, 0.1);
-    border-radius: 1rem;
-  }
-
-  .achievement-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .achievement-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    background: rgba(255, 215, 0, 0.05);
-    border: 1px solid rgba(255, 215, 0, 0.15);
-    border-radius: 0.5rem;
-    transition: all 0.2s ease;
-  }
-
-  .achievement-item:hover {
-    background: rgba(255, 215, 0, 0.08);
-    border-color: rgba(255, 215, 0, 0.25);
-    transform: translateX(2px);
-  }
-
-  .achievement-icon {
-    font-size: 1.2rem;
-    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
-  }
-
-  .achievement-info {
-    flex: 1;
-  }
-
-  .achievement-name {
-    font-weight: 600;
-    color: #fbbf24;
-    font-size: 0.9rem;
-    margin-bottom: 0.2rem;
-  }
-
-  .achievement-desc {
-    font-size: 0.8rem;
-    color: var(--color-text-secondary);
-    line-height: 1.3;
-  }
-
-  .achievements-section.empty {
-    opacity: 0.6;
-  }
-
-  .no-achievements {
-    text-align: center;
-    color: var(--color-text-secondary);
-    font-style: italic;
-    font-size: 0.85rem;
-    padding: 1rem;
-    margin: 0;
-  }
-
-  .no-stats {
-    text-align: center;
-    color: var(--color-text-secondary);
-    font-style: italic;
-    padding: 1rem;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: 0.5rem;
-    border: 1px dashed rgba(255, 255, 255, 0.1);
-  }
-
-  /* Menu Stats Adjustments */
-  #game-stats-menu .stats-table {
-    font-size: 0.85rem;
-  }
-
-  #game-stats-menu .achievement-item {
-    padding: 0.6rem;
-  }
-
-  @media (max-width: 768px) {
-    .game-menu > div {
-      margin: 1rem;
-    }
-    
-    .game-container.split-view {
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 300px;
-    }
-    
-    .description-panel {
-      border-top: 1px solid var(--color-border);
-    }
-
-    .stats-table {
-      font-size: 0.85rem;
-    }
-    
-    .stats-table td {
-      padding: 0.5rem;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/games/mana-games/apps/web/src/pages/games/[slug]/playground.astro b/games/mana-games/apps/web/src/pages/games/[slug]/playground.astro
deleted file mode 100644
index eb9adfddf..000000000
--- a/games/mana-games/apps/web/src/pages/games/[slug]/playground.astro
+++ /dev/null
@@ -1,427 +0,0 @@
----
-import Layout from '../../../layouts/Layout.astro';
-import { games } from '../../../data/games';
-
-export function getStaticPaths() {
-	return games.map((game) => ({
-		params: { slug: game.slug },
-		props: { game },
-	}));
-}
-
-const { game } = Astro.props;
----
-
-<Layout
-	title={`${game.title} - Playground`}
-	description={`Code bearbeiten für ${game.title}`}
-	isGamePage={true}
-	gameTitle={`${game.title} - Playground`}
-	gameSlug={game.slug}
-	isPlayground={true}
-	hideFooter={true}
->
-	<div class="playground-page">
-		<div class="playground-container">
-			<div class="editor-panel">
-				<div class="editor-header">
-					<h3>Code Editor</h3>
-					<div class="editor-actions">
-						<button id="resetBtn" class="editor-btn">
-							<span class="icon">↺</span>
-							Reset
-						</button>
-						<button id="runBtn" class="editor-btn primary">
-							<span class="icon">▶</span>
-							Ausführen
-						</button>
-					</div>
-				</div>
-				<div id="editor" class="code-editor"></div>
-			</div>
-
-			<div class="preview-panel">
-				<div class="preview-header">
-					<h3>Vorschau</h3>
-					<button id="fullscreenPreviewBtn" class="editor-btn">
-						<span class="icon">⛶</span>
-					</button>
-				</div>
-				<div class="preview-frame">
-					<iframe
-						id="preview"
-						title={`${game.title} Preview`}
-						sandbox="allow-scripts allow-same-origin"></iframe>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div id="loadingOverlay" class="loading-overlay">
-		<div class="spinner"></div>
-		<p>Code wird geladen...</p>
-	</div>
-</Layout>
-
-<script>
-	// Add no-scroll class to body
-	document.body.classList.add('no-scroll');
-
-	// Import CodeMirror CSS
-	const link = document.createElement('link');
-	link.rel = 'stylesheet';
-	link.href = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css';
-	document.head.appendChild(link);
-
-	const themeLink = document.createElement('link');
-	themeLink.rel = 'stylesheet';
-	themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css';
-	document.head.appendChild(themeLink);
-
-	// Import CodeMirror
-	const script = document.createElement('script');
-	script.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js';
-	document.head.appendChild(script);
-
-	script.onload = () => {
-		// Load modes
-		const modes = ['xml', 'javascript', 'css', 'htmlmixed'];
-		let loadedModes = 0;
-
-		modes.forEach((mode) => {
-			const modeScript = document.createElement('script');
-			modeScript.src = `https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/${mode}/${mode}.min.js`;
-			document.head.appendChild(modeScript);
-			modeScript.onload = () => {
-				loadedModes++;
-				if (loadedModes === modes.length) {
-					initializePlayground();
-				}
-			};
-		});
-	};
-
-	async function initializePlayground() {
-		const gameUrl = window.location.pathname.replace('/playground', '');
-		const htmlFile =
-			document.querySelector<HTMLElement>('[data-game-file]')?.dataset.gameFile ||
-			`/games/${gameUrl.split('/').pop()}_game.html`;
-
-		const editor = document.getElementById('editor');
-		const preview = document.getElementById('preview') as HTMLIFrameElement;
-		const runBtn = document.getElementById('runBtn');
-		const resetBtn = document.getElementById('resetBtn');
-		const fullscreenPreviewBtn = document.getElementById('fullscreenPreviewBtn');
-		const loadingOverlay = document.getElementById('loadingOverlay');
-
-		let originalCode = '';
-		let cm: any;
-
-		try {
-			// Fetch the game HTML
-			const response = await fetch(htmlFile);
-			originalCode = await response.text();
-
-			// Initialize CodeMirror
-			cm = (window as any).CodeMirror(editor, {
-				value: originalCode,
-				mode: 'htmlmixed',
-				theme: 'monokai',
-				lineNumbers: true,
-				lineWrapping: true,
-				indentUnit: 2,
-				tabSize: 2,
-				autofocus: true,
-				viewportMargin: Infinity,
-			});
-
-			// Force CodeMirror to fill the container
-			setTimeout(() => {
-				cm.setSize('100%', '100%');
-				cm.refresh();
-			}, 100);
-
-			// Initial preview
-			updatePreview(originalCode);
-
-			// Hide loading overlay
-			loadingOverlay?.classList.add('hidden');
-		} catch (error) {
-			console.error('Error loading game:', error);
-			loadingOverlay!.innerHTML = '<p>Fehler beim Laden des Spiels</p>';
-		}
-
-		// Run button
-		runBtn?.addEventListener('click', () => {
-			const code = cm.getValue();
-			updatePreview(code);
-			showNotification('Code ausgeführt!', 'success');
-		});
-
-		// Reset button
-		resetBtn?.addEventListener('click', () => {
-			if (confirm('Möchtest du wirklich alle Änderungen zurücksetzen?')) {
-				cm.setValue(originalCode);
-				updatePreview(originalCode);
-				showNotification('Code zurückgesetzt!', 'info');
-			}
-		});
-
-		// Fullscreen preview
-		fullscreenPreviewBtn?.addEventListener('click', () => {
-			if (preview.requestFullscreen) {
-				preview.requestFullscreen();
-			}
-		});
-
-		// Handle window resize
-		window.addEventListener('resize', () => {
-			cm.refresh();
-		});
-
-		// Auto-save to localStorage
-		cm.on('change', () => {
-			const code = cm.getValue();
-			localStorage.setItem(`playground_${gameUrl}`, code);
-		});
-
-		// Load from localStorage if available
-		const savedCode = localStorage.getItem(`playground_${gameUrl}`);
-		if (savedCode && savedCode !== originalCode) {
-			if (confirm('Es gibt gespeicherte Änderungen. Möchtest du diese laden?')) {
-				cm.setValue(savedCode);
-				updatePreview(savedCode);
-			}
-		}
-
-		function updatePreview(code: string) {
-			const blob = new Blob([code], { type: 'text/html' });
-			const url = URL.createObjectURL(blob);
-			preview.src = url;
-		}
-	}
-
-	function showNotification(message: string, type: 'success' | 'info' | 'error' = 'info') {
-		const notification = document.createElement('div');
-		notification.className = `notification notification-${type}`;
-		notification.textContent = message;
-
-		document.body.appendChild(notification);
-
-		setTimeout(() => notification.classList.add('show'), 10);
-
-		setTimeout(() => {
-			notification.classList.remove('show');
-			setTimeout(() => notification.remove(), 300);
-		}, 2000);
-	}
-</script>
-
-<script define:vars={{ gameFile: game.htmlFile }}>
-	// Pass game file to the script
-	document.body.dataset.gameFile = gameFile;
-</script>
-
-<style>
-	.playground-page {
-		position: fixed;
-		top: 60px;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		width: 100%;
-		height: calc(100vh - 60px);
-	}
-
-	.playground-container {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		height: 100%;
-		gap: 1px;
-		background: var(--color-border);
-	}
-
-	.editor-panel,
-	.preview-panel {
-		background: var(--color-bg);
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	.editor-header,
-	.preview-header {
-		background: var(--color-bg-secondary);
-		padding: 1rem;
-		border-bottom: 1px solid var(--color-border);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.editor-header h3,
-	.preview-header h3 {
-		margin: 0;
-		font-size: 1rem;
-		color: var(--color-text-secondary);
-	}
-
-	.editor-actions {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.editor-btn {
-		background: var(--color-bg);
-		color: var(--color-text-secondary);
-		border: 1px solid var(--color-border);
-		padding: 0.5rem 1rem;
-		border-radius: 0.25rem;
-		font-size: 0.85rem;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		transition: all 0.2s ease;
-	}
-
-	.editor-btn:hover {
-		background: var(--color-bg-secondary);
-		border-color: var(--color-accent);
-	}
-
-	.editor-btn.primary {
-		background: var(--color-accent);
-		color: #000;
-		border-color: var(--color-accent);
-	}
-
-	.editor-btn.primary:hover {
-		background: var(--color-accent-secondary);
-	}
-
-	.editor-btn .icon {
-		font-size: 1rem;
-	}
-
-	.code-editor {
-		flex: 1;
-		overflow: hidden;
-		position: relative;
-		min-height: 0;
-	}
-
-	/* CodeMirror overrides */
-	.code-editor .CodeMirror {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		height: 100%;
-		font-family: 'Fira Code', 'Consolas', monospace;
-		font-size: 14px;
-	}
-
-	.preview-frame {
-		flex: 1;
-		position: relative;
-		background: #000;
-	}
-
-	.preview-frame iframe {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		border: none;
-	}
-
-	/* Loading overlay */
-	.loading-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: var(--color-bg);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		z-index: 1000;
-		transition: opacity 0.3s ease;
-	}
-
-	.loading-overlay.hidden {
-		opacity: 0;
-		pointer-events: none;
-	}
-
-	.spinner {
-		width: 40px;
-		height: 40px;
-		border: 3px solid var(--color-border);
-		border-top-color: var(--color-accent);
-		border-radius: 50%;
-		animation: spin 1s linear infinite;
-		margin-bottom: 1rem;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	/* Notifications */
-	.notification {
-		position: fixed;
-		bottom: 2rem;
-		left: 50%;
-		transform: translateX(-50%) translateY(100px);
-		background: var(--color-bg-secondary);
-		padding: 0.75rem 1.5rem;
-		border-radius: 0.25rem;
-		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-		z-index: 2000;
-		transition: transform 0.3s ease;
-		font-size: 0.9rem;
-	}
-
-	.notification.show {
-		transform: translateX(-50%) translateY(0);
-	}
-
-	.notification-success {
-		border: 1px solid var(--color-accent);
-		color: var(--color-accent);
-	}
-
-	.notification-info {
-		border: 1px solid #3b82f6;
-		color: #3b82f6;
-	}
-
-	.notification-error {
-		border: 1px solid #ef4444;
-		color: #ef4444;
-	}
-
-	@media (max-width: 768px) {
-		.playground-container {
-			grid-template-columns: 1fr;
-		}
-
-		.preview-panel {
-			display: none;
-		}
-
-		.editor-header h3::after {
-			content: ' (Vorschau ausgeblendet)';
-			font-size: 0.8rem;
-			opacity: 0.6;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/impressum.astro b/games/mana-games/apps/web/src/pages/impressum.astro
deleted file mode 100644
index e4bfe3a50..000000000
--- a/games/mana-games/apps/web/src/pages/impressum.astro
+++ /dev/null
@@ -1,432 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Button from '../components/Button.astro';
----
-
-<Layout title="Impressum">
-	<div class="impressum-container">
-		<header class="impressum-header">
-			<h1>Impressum</h1>
-			<p class="subtitle">Angaben gemäß § 5 TMG</p>
-		</header>
-
-		<section class="content-section">
-			<h2>Verantwortlich für den Inhalt</h2>
-			<div class="contact-card">
-				<div class="contact-icon">👤</div>
-				<div class="contact-info">
-					<p class="name">[Ihr Name]</p>
-					<p>[Ihre Straße und Hausnummer]</p>
-					<p>[PLZ und Ort]</p>
-					<p>Deutschland</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Kontakt</h2>
-			<div class="contact-grid">
-				<div class="contact-item">
-					<span class="icon">📧</span>
-					<div>
-						<h4>E-Mail</h4>
-						<p>[ihre-email@beispiel.de]</p>
-					</div>
-				</div>
-				<div class="contact-item">
-					<span class="icon">📱</span>
-					<div>
-						<h4>Telefon</h4>
-						<p>[+49 123 456789]</p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Umsatzsteuer-ID</h2>
-			<p>Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:</p>
-			<div class="highlight-box">
-				<code>DE[IHRE-UST-ID]</code>
-			</div>
-			<p class="note">
-				Falls Sie keine Umsatzsteuer-ID haben, können Sie diesen Abschnitt entfernen.
-			</p>
-		</section>
-
-		<section class="content-section">
-			<h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
-			<div class="responsible-box">
-				<p>[Ihr Name]</p>
-				<p>[Ihre Adresse]</p>
-				<p>[PLZ und Ort]</p>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>EU-Streitschlichtung</h2>
-			<p>
-				Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
-			</p>
-			<div class="link-box">
-				<a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer">
-					https://ec.europa.eu/consumers/odr/
-				</a>
-			</div>
-			<p>Unsere E-Mail-Adresse finden Sie oben im Impressum.</p>
-		</section>
-
-		<section class="content-section">
-			<h2>Verbraucherstreitbeilegung / Universalschlichtungsstelle</h2>
-			<p>
-				Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
-				Verbraucherschlichtungsstelle teilzunehmen.
-			</p>
-		</section>
-
-		<section class="content-section">
-			<h2>Haftungsausschluss (Disclaimer)</h2>
-
-			<h3>Haftung für Inhalte</h3>
-			<p>
-				Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach
-				den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter
-				jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen
-				oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
-			</p>
-			<p>
-				Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den
-				allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst
-				ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden
-				von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
-			</p>
-
-			<h3>Haftung für Links</h3>
-			<p>
-				Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen
-				Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen.
-				Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der
-				Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf
-				mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung
-				nicht erkennbar.
-			</p>
-			<p>
-				Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete
-				Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von
-				Rechtsverletzungen werden wir derartige Links umgehend entfernen.
-			</p>
-
-			<h3>Urheberrecht</h3>
-			<p>
-				Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem
-				deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der
-				Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung
-				des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den
-				privaten, nicht kommerziellen Gebrauch gestattet.
-			</p>
-			<p>
-				Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die
-				Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche
-				gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden,
-				bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden
-				wir derartige Inhalte umgehend entfernen.
-			</p>
-		</section>
-
-		<section class="content-section">
-			<h2>Open Source Hinweis</h2>
-			<div class="opensource-box">
-				<div class="opensource-icon">💻</div>
-				<div class="opensource-content">
-					<h4>Diese Website ist Open Source</h4>
-					<p>
-						Der Quellcode dieser Website ist öffentlich verfügbar. Sie finden das Repository auf:
-					</p>
-					<a
-						href="https://github.com/yourusername/mana-games"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="github-link"
-					>
-						<span class="icon">📦</span>
-						GitHub Repository
-					</a>
-				</div>
-			</div>
-		</section>
-
-		<div class="footer-actions">
-			<Button href="/" variant="ghost">Zurück zur Startseite</Button>
-			<Button href="/datenschutz" variant="ghost">Datenschutz</Button>
-		</div>
-	</div>
-</Layout>
-
-<style>
-	.impressum-container {
-		max-width: 800px;
-		margin: 0 auto;
-		padding: 2rem 0;
-	}
-
-	.impressum-header {
-		text-align: center;
-		margin-bottom: 3rem;
-		padding-bottom: 2rem;
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	.impressum-header h1 {
-		font-size: 3rem;
-		font-weight: 900;
-		margin-bottom: 0.5rem;
-		background: linear-gradient(135deg, var(--color-text), var(--color-text-secondary));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.subtitle {
-		color: var(--color-text-secondary);
-		font-size: 1.1rem;
-	}
-
-	.content-section {
-		margin-bottom: 3rem;
-	}
-
-	.content-section h2 {
-		font-size: 1.75rem;
-		font-weight: 700;
-		margin-bottom: 1.5rem;
-		color: var(--color-text);
-	}
-
-	.content-section h3 {
-		font-size: 1.3rem;
-		font-weight: 600;
-		margin-top: 2rem;
-		margin-bottom: 1rem;
-		color: var(--color-text);
-	}
-
-	.content-section h4 {
-		font-size: 1.1rem;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
-		color: var(--color-text);
-	}
-
-	.content-section p {
-		color: var(--color-text-secondary);
-		line-height: 1.8;
-		margin-bottom: 1rem;
-	}
-
-	.contact-card {
-		display: flex;
-		gap: 2rem;
-		align-items: start;
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-		margin-bottom: 1rem;
-	}
-
-	.contact-icon {
-		font-size: 3rem;
-		opacity: 0.5;
-	}
-
-	.contact-info p {
-		margin-bottom: 0.5rem;
-		font-family: monospace;
-	}
-
-	.contact-info .name {
-		font-weight: 600;
-		color: var(--color-text);
-		font-size: 1.2rem;
-		margin-bottom: 1rem;
-	}
-
-	.contact-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-		gap: 1.5rem;
-		margin-bottom: 1rem;
-	}
-
-	.contact-item {
-		display: flex;
-		gap: 1rem;
-		align-items: start;
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.contact-item .icon {
-		font-size: 2rem;
-		flex-shrink: 0;
-	}
-
-	.contact-item h4 {
-		margin-bottom: 0.25rem;
-	}
-
-	.contact-item p {
-		margin-bottom: 0;
-		font-family: monospace;
-	}
-
-	.highlight-box {
-		background: rgba(0, 255, 136, 0.1);
-		border: 1px solid var(--color-accent);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		margin: 1rem 0;
-		text-align: center;
-	}
-
-	.highlight-box code {
-		color: var(--color-accent);
-		font-size: 1.2rem;
-		font-weight: 600;
-	}
-
-	.note {
-		font-size: 0.9rem;
-		font-style: italic;
-		opacity: 0.8;
-	}
-
-	.responsible-box {
-		background: var(--color-bg-secondary);
-		border-left: 3px solid var(--color-accent);
-		padding: 1.5rem;
-		margin: 1rem 0;
-	}
-
-	.responsible-box p {
-		margin-bottom: 0.5rem;
-		font-family: monospace;
-	}
-
-	.link-box {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		margin: 1rem 0;
-		text-align: center;
-	}
-
-	.link-box a {
-		color: var(--color-accent);
-		text-decoration: none;
-		word-break: break-all;
-	}
-
-	.link-box a:hover {
-		text-decoration: underline;
-	}
-
-	.opensource-box {
-		display: flex;
-		gap: 2rem;
-		align-items: center;
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent);
-		border: 1px solid rgba(0, 255, 136, 0.2);
-		border-radius: 1rem;
-		padding: 2rem;
-		margin: 2rem 0;
-	}
-
-	.opensource-icon {
-		font-size: 3rem;
-		flex-shrink: 0;
-	}
-
-	.opensource-content h4 {
-		color: var(--color-accent);
-		margin-bottom: 0.5rem;
-	}
-
-	.opensource-content p {
-		margin-bottom: 1rem;
-	}
-
-	.github-link {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.5rem;
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		padding: 0.75rem 1.5rem;
-		border-radius: 0.5rem;
-		color: var(--color-text);
-		text-decoration: none;
-		transition: all 0.3s ease;
-	}
-
-	.github-link:hover {
-		border-color: var(--color-accent);
-		color: var(--color-accent);
-		transform: translateY(-2px);
-	}
-
-	.footer-actions {
-		margin-top: 4rem;
-		padding-top: 2rem;
-		border-top: 1px solid var(--color-border);
-		display: flex;
-		gap: 1rem;
-		justify-content: center;
-		flex-wrap: wrap;
-	}
-
-	a {
-		color: var(--color-accent);
-		text-decoration: none;
-		transition: opacity 0.2s ease;
-	}
-
-	a:hover {
-		opacity: 0.8;
-		text-decoration: underline;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.impressum-header h1 {
-			font-size: 2rem;
-		}
-
-		.content-section h2 {
-			font-size: 1.5rem;
-		}
-
-		.content-section h3 {
-			font-size: 1.2rem;
-		}
-
-		.contact-card {
-			flex-direction: column;
-			gap: 1rem;
-			text-align: center;
-		}
-
-		.contact-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.opensource-box {
-			flex-direction: column;
-			text-align: center;
-			gap: 1rem;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/index.astro b/games/mana-games/apps/web/src/pages/index.astro
deleted file mode 100644
index 43f65844c..000000000
--- a/games/mana-games/apps/web/src/pages/index.astro
+++ /dev/null
@@ -1,765 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import GameCard from '../components/GameCard.astro';
-import MyGamesSection from '../components/MyGamesSection.astro';
-import HorizontalScroller from '../components/HorizontalScroller.astro';
-import { games } from '../data/games';
-
-// Filtere offizielle Spiele (ohne community flag)
-const officialGames = games.filter((game) => !game.community);
-
-// Kategorisiere Spiele nach Genres für verschiedene Scroller
-const arcadeGames = officialGames.filter((game) => game.tags.includes('Arcade'));
-const puzzleGames = officialGames.filter((game) => game.tags.includes('Puzzle'));
-const actionGames = officialGames.filter(
-	(game) =>
-		game.tags.includes('Action') ||
-		game.tags.includes('Shooter') ||
-		game.tags.includes('Jump n Run')
-);
-
-// Sortiere nach Beliebtheit/Komplexität
-const featuredGames = [...officialGames].slice(0, 8);
----
-
-<Layout title="Startseite" fullWidth={true}>
-	<section class="hero">
-		<div class="hero-content">
-			<h1 class="hero-title">
-				<span class="line line-1">
-					<span id="changingWord">Spiele</span>
-					<span class="line line-2">ohne&nbsp;&nbsp;&nbsp;Grenzen</span>
-				</span>
-			</h1>
-		</div>
-		<div class="hero-visual">
-			<div class="floating-squares">
-				<div class="square"></div>
-				<div class="square"></div>
-				<div class="square"></div>
-			</div>
-		</div>
-	</section>
-
-	<section class="stats-section">
-		<div class="stats-container">
-			<div class="stat">
-				<span class="stat-number">{officialGames.length}</span>
-				<span class="stat-label">Spiele</span>
-			</div>
-			<div class="stat-divider"></div>
-			<div class="stat">
-				<span class="stat-number">100%</span>
-				<span class="stat-label">Kostenlos</span>
-			</div>
-			<div class="stat-divider"></div>
-			<div class="stat">
-				<span class="stat-number">100%</span>
-				<span class="stat-label">Werbefrei</span>
-			</div>
-			<div class="stat-divider"></div>
-			<a href="/stats" class="stat stat-link">
-				<span class="stat-number">📊</span>
-				<span class="stat-label">Meine Stats</span>
-			</a>
-		</div>
-	</section>
-
-	<!-- Featured Official Games - Netflix Style -->
-	<HorizontalScroller title="Offizielle Mana Games" games={featuredGames} id="featured-scroller" />
-
-	<!-- My Games Section -->
-	<MyGamesSection maxGames={4} />
-
-	<!-- Genre-basierte Scroller -->
-	{
-		arcadeGames.length > 0 && (
-			<HorizontalScroller title="Arcade Spiele" games={arcadeGames} id="arcade-scroller" />
-		)
-	}
-
-	{
-		puzzleGames.length > 0 && (
-			<HorizontalScroller title="Puzzle & Denkspiele" games={puzzleGames} id="puzzle-scroller" />
-		)
-	}
-
-	{
-		actionGames.length > 0 && (
-			<HorizontalScroller title="Action & Adventure" games={actionGames} id="action-scroller" />
-		)
-	}
-
-	<section class="games-section">
-		<div class="section-header">
-			<h2>Alle Spiele durchsuchen</h2>
-			<div class="filter-tabs">
-				<button class="filter-tab active" data-filter="all"> Alle </button>
-				<button class="filter-tab" data-filter="official"> Offizielle </button>
-				<button class="filter-tab" data-filter="my-games"> Meine Spiele </button>
-				<button class="filter-tab" data-filter="community"> Community </button>
-			</div>
-		</div>
-
-		<div id="officialGames" class="games-grid">
-			{
-				officialGames.map((game, index) => (
-					<div class="game-wrapper" style={`--delay: ${0.4 + index * 0.1}s`}>
-						<GameCard
-							title={game.title}
-							description={game.description}
-							slug={game.slug}
-							thumbnail={game.thumbnail}
-							tags={game.tags}
-							complexity={game.complexity}
-							codeStats={game.codeStats}
-						/>
-					</div>
-				))
-			}
-		</div>
-
-		<div id="myGamesGrid" class="games-grid hidden">
-			<!-- Will be populated by JavaScript -->
-		</div>
-
-		<div id="communityGamesGrid" class="games-grid hidden">
-			<!-- Will be populated by JavaScript -->
-		</div>
-
-		<div id="allGamesGrid" class="games-grid hidden">
-			<!-- Will be populated by JavaScript -->
-		</div>
-	</section>
-</Layout>
-
-<style>
-	.hero {
-		position: relative;
-		min-height: 30vh;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-bottom: 1.5rem;
-		overflow: hidden;
-	}
-
-	.hero-content {
-		position: relative;
-		z-index: 2;
-		text-align: center;
-	}
-
-	.hero-title {
-		font-size: clamp(2.5rem, 7vw, 4.5rem);
-		font-weight: 900;
-		line-height: 0.85;
-		margin-bottom: 1rem;
-		letter-spacing: -0.05em;
-	}
-
-	.line {
-		display: inline;
-		opacity: 0;
-		transform: translateY(20px);
-		animation: fadeInUp 0.4s ease forwards;
-	}
-
-	.line-1 {
-		animation-delay: 0s;
-	}
-
-	.line-2 {
-		animation-delay: 0.1s;
-		background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		margin-left: 0.1em;
-	}
-
-	#changingWord {
-		display: inline-block;
-		min-width: 3em;
-		text-align: right;
-		position: relative;
-		color: var(--color-text);
-	}
-
-	.word-fade-out {
-		animation: fadeOut 0.3s ease-out forwards;
-	}
-
-	.word-fade-in {
-		animation: fadeIn 0.3s ease-in forwards;
-	}
-
-	@keyframes fadeOut {
-		to {
-			opacity: 0;
-			transform: translateY(-10px);
-		}
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* Floating visual elements */
-	.hero-visual {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		pointer-events: none;
-		opacity: 0.1;
-	}
-
-	.floating-squares {
-		position: relative;
-		width: 100%;
-		height: 100%;
-	}
-
-	.square {
-		position: absolute;
-		border: 1px solid rgba(0, 255, 136, 0.2);
-		border-radius: 1rem;
-	}
-
-	.square:nth-child(1) {
-		width: 200px;
-		height: 200px;
-		top: 10%;
-		left: 10%;
-		transform: rotate(15deg);
-	}
-
-	.square:nth-child(2) {
-		width: 300px;
-		height: 300px;
-		top: 50%;
-		right: 10%;
-		transform: rotate(-20deg);
-	}
-
-	.square:nth-child(3) {
-		width: 150px;
-		height: 150px;
-		bottom: 10%;
-		left: 50%;
-		transform: rotate(45deg);
-	}
-
-	@keyframes fadeInUp {
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* Stats Section */
-	.stats-section {
-		margin-top: -1rem;
-		margin-bottom: 2.5rem;
-		opacity: 0;
-		transform: translateY(15px);
-		animation: fadeInUp 0.4s ease 0.3s forwards;
-	}
-
-	.stats-container {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 2.5rem;
-		flex-wrap: wrap;
-	}
-
-	.stat {
-		text-align: center;
-	}
-
-	.stat-number {
-		display: block;
-		font-size: 1.75rem;
-		font-weight: 900;
-		color: var(--color-accent);
-		line-height: 1;
-		margin-bottom: 0.25rem;
-	}
-
-	.stat-label {
-		display: block;
-		font-size: 0.75rem;
-		color: var(--color-text-secondary);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		opacity: 0.7;
-	}
-
-	.stat-divider {
-		width: 1px;
-		height: 30px;
-		background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
-	}
-
-	.stat-link {
-		text-decoration: none;
-		transition: all 0.2s ease;
-		cursor: pointer;
-	}
-
-	.stat-link:hover {
-		transform: translateY(-2px);
-	}
-
-	.stat-link .stat-number {
-		font-size: 2rem;
-	}
-
-	.stat-link:hover .stat-number {
-		transform: scale(1.1);
-		transition: transform 0.2s ease;
-	}
-
-	/* Games Section */
-	.games-section {
-		position: relative;
-		margin-top: 4rem;
-		margin-bottom: 6rem;
-		padding-top: 3rem;
-		border-top: 1px solid var(--color-border);
-	}
-
-	.section-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 3rem;
-	}
-
-	.section-header h2 {
-		font-size: 1.75rem;
-		font-weight: 700;
-		color: var(--color-text);
-		margin: 0;
-	}
-
-	.filter-tabs {
-		display: flex;
-		gap: 0.5rem;
-		background: var(--color-surface);
-		padding: 0.25rem;
-		border-radius: 10px;
-		border: 1px solid var(--color-border);
-	}
-
-	.filter-tab {
-		background: transparent;
-		color: var(--color-text-secondary);
-		border: none;
-		border-radius: 8px;
-		padding: 0.5rem 1.25rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		font-family: inherit;
-	}
-
-	.filter-tab:hover {
-		color: var(--color-text);
-	}
-
-	.filter-tab.active {
-		background: var(--color-bg);
-		color: var(--color-accent);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	}
-
-	.hidden {
-		display: none !important;
-	}
-
-	.games-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		gap: 2rem;
-		align-items: stretch;
-	}
-
-	.game-wrapper {
-		opacity: 0;
-		transform: translateY(15px);
-		animation: fadeInUp 0.3s ease var(--delay) forwards;
-	}
-
-	/* Minimal grid line decoration */
-	.games-section::before {
-		content: '';
-		position: absolute;
-		top: -3rem;
-		left: 0;
-		width: 100px;
-		height: 2px;
-		background: linear-gradient(90deg, var(--color-accent), transparent);
-	}
-
-	/* Generated game cards styling */
-	.my-game-card {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		overflow: hidden;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.my-game-card:hover {
-		transform: translateY(-2px);
-		border-color: var(--color-accent);
-		box-shadow: 0 4px 12px rgba(0, 255, 136, 0.1);
-	}
-
-	.my-game-card .card-thumbnail {
-		aspect-ratio: 16/9;
-		background: var(--color-bg);
-		overflow: hidden;
-	}
-
-	.my-game-card .card-thumbnail img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.my-game-card .placeholder-thumbnail {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 3rem;
-		color: var(--color-text-muted);
-	}
-
-	.my-game-card .card-content {
-		padding: 1.5rem;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.my-game-card .card-title {
-		font-size: 1.1rem;
-		font-weight: 700;
-		color: var(--color-text);
-		margin: 0 0 0.5rem 0;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.my-game-card .card-description {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-		margin: 0 0 1rem 0;
-		flex: 1;
-		overflow: hidden;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-	}
-
-	.my-game-card .card-meta {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		font-size: 0.85rem;
-	}
-
-	.my-game-card .complexity-badge {
-		background: var(--color-accent);
-		color: var(--color-bg);
-		padding: 0.25rem 0.75rem;
-		border-radius: 12px;
-		font-weight: 600;
-		font-size: 0.75rem;
-	}
-
-	.my-game-card .creation-date {
-		color: var(--color-text-muted);
-	}
-
-	@media (max-width: 768px) {
-		.hero {
-			min-height: 25vh;
-			margin-bottom: 1rem;
-		}
-
-		.hero-title {
-			font-size: clamp(2rem, 9vw, 3rem);
-		}
-
-		.stats-container {
-			gap: 2rem;
-		}
-
-		.stats-section {
-			margin-top: -0.5rem;
-			margin-bottom: 2rem;
-		}
-
-		.stat-number {
-			font-size: 1.5rem;
-		}
-
-		.stat-label {
-			font-size: 0.7rem;
-		}
-
-		.stat-divider {
-			height: 25px;
-		}
-
-		.games-grid {
-			grid-template-columns: 1fr;
-			gap: 1.5rem;
-		}
-
-		.square {
-			display: none;
-		}
-	}
-</style>
-
-<script>
-	// Wörter-Animation für den Hero-Text
-	const words = ['Spiele', 'Baue', 'Lerne'];
-	let currentWordIndex = 0;
-	const changingWord = document.getElementById('changingWord');
-
-	function changeWord() {
-		// Fade out
-		changingWord.classList.add('word-fade-out');
-
-		setTimeout(() => {
-			// Wechsle zum nächsten Wort
-			currentWordIndex = (currentWordIndex + 1) % words.length;
-			changingWord.textContent = words[currentWordIndex];
-
-			// Fade in
-			changingWord.classList.remove('word-fade-out');
-			changingWord.classList.add('word-fade-in');
-
-			setTimeout(() => {
-				changingWord.classList.remove('word-fade-in');
-			}, 300);
-		}, 300);
-	}
-
-	// Starte Animation nach 2 Sekunden, dann alle 3 Sekunden
-	setTimeout(() => {
-		changeWord();
-		setInterval(changeWord, 3000);
-	}, 2000);
-
-	// Filter functionality
-	const filterTabs = document.querySelectorAll('.filter-tab');
-	const officialGames = document.getElementById('officialGames');
-	const myGamesGrid = document.getElementById('myGamesGrid');
-	const communityGamesGrid = document.getElementById('communityGamesGrid');
-	const allGamesGrid = document.getElementById('allGamesGrid');
-
-	// GameStorage class (simplified version for reading)
-	class GameStorage {
-		private dbName = 'ManaGamesDB';
-		private storeName = 'generatedGames';
-		private db: IDBDatabase | null = null;
-
-		async init(): Promise<void> {
-			return new Promise((resolve, reject) => {
-				const request = indexedDB.open(this.dbName, 1);
-
-				request.onerror = () => reject(request.error);
-				request.onsuccess = () => {
-					this.db = request.result;
-					resolve();
-				};
-
-				request.onupgradeneeded = (event) => {
-					const db = (event.target as IDBOpenDBRequest).result;
-					if (!db.objectStoreNames.contains(this.storeName)) {
-						const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
-						store.createIndex('createdAt', 'createdAt', { unique: false });
-						store.createIndex('title', 'title', { unique: false });
-					}
-				};
-			});
-		}
-
-		async getAllGames(): Promise<any[]> {
-			if (!this.db) await this.init();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db!.transaction([this.storeName], 'readonly');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.getAll();
-
-				request.onsuccess = () => resolve(request.result || []);
-				request.onerror = () => reject(request.error);
-			});
-		}
-	}
-
-	const gameStorage = new GameStorage();
-
-	// Load and display my games
-	async function loadMyGames() {
-		try {
-			const myGames = await gameStorage.getAllGames();
-
-			if (myGames.length === 0) {
-				myGamesGrid.innerHTML = `
-          <div style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
-            <p style="color: var(--color-text-secondary); font-size: 1.1rem;">
-              Du hast noch keine eigenen Spiele erstellt
-            </p>
-            <a href="/create" style="display: inline-block; margin-top: 1rem; background: var(--color-accent); color: var(--color-bg); padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600;">
-              Erstelle dein erstes Spiel
-            </a>
-          </div>
-        `;
-				return;
-			}
-
-			// Sort by creation date (newest first)
-			myGames.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-
-			// Create game cards
-			const gameCards = myGames
-				.map((game, index) => {
-					const date = new Date(game.createdAt).toLocaleDateString('de-DE');
-					return `
-          <div class="game-wrapper" style="--delay: ${0.4 + index * 0.1}s">
-            <div class="game-card my-game-card" onclick="window.location.href='/play-generated?id=${game.id}'">
-              <div class="card-thumbnail">
-                ${
-									game.thumbnail
-										? `<img src="${game.thumbnail}" alt="${game.title}" />`
-										: `<div class="placeholder-thumbnail">🎮</div>`
-								}
-              </div>
-              <div class="card-content">
-                <h3 class="card-title">${game.title}</h3>
-                <p class="card-description">${game.description || game.prompt}</p>
-                <div class="card-meta">
-                  <span class="complexity-badge">Generiert</span>
-                  <span class="creation-date">${date}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        `;
-				})
-				.join('');
-
-			myGamesGrid.innerHTML = gameCards;
-		} catch (error) {
-			console.error('Error loading my games:', error);
-			myGamesGrid.innerHTML = '<p style="color: #ef4444;">Fehler beim Laden der Spiele</p>';
-		}
-	}
-
-	// Load community games
-	async function loadCommunityGames() {
-		// For now, show a placeholder - will be populated when community games are added
-		communityGamesGrid.innerHTML = `
-      <div style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
-        <p style="color: var(--color-text-secondary); font-size: 1.1rem;">
-          Noch keine Community-Spiele verfügbar
-        </p>
-        <a href="/submit" style="display: inline-block; margin-top: 1rem; background: var(--color-accent); color: var(--color-bg); padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600;">
-          Reiche dein Spiel ein
-        </a>
-      </div>
-    `;
-	}
-
-	// Merge official and my games for "All" view
-	async function loadAllGames() {
-		const officialGamesHTML = officialGames.innerHTML;
-		const myGames = await gameStorage.getAllGames();
-
-		// Clone official games
-		allGamesGrid.innerHTML = officialGamesHTML;
-
-		// Add my games if any
-		if (myGames.length > 0) {
-			const myGamesHTML = myGamesGrid.innerHTML;
-			allGamesGrid.innerHTML = officialGamesHTML + myGamesHTML;
-		}
-	}
-
-	// Filter tab click handlers
-	filterTabs.forEach((tab) => {
-		tab.addEventListener('click', async () => {
-			// Update active tab
-			filterTabs.forEach((t) => t.classList.remove('active'));
-			tab.classList.add('active');
-
-			const filter = tab.getAttribute('data-filter');
-
-			// Show/hide appropriate grids
-			officialGames.classList.add('hidden');
-			myGamesGrid.classList.add('hidden');
-			communityGamesGrid.classList.add('hidden');
-			allGamesGrid.classList.add('hidden');
-
-			switch (filter) {
-				case 'official':
-					officialGames.classList.remove('hidden');
-					break;
-				case 'my-games':
-					if (myGamesGrid.innerHTML === '') {
-						await loadMyGames();
-					}
-					myGamesGrid.classList.remove('hidden');
-					break;
-				case 'community':
-					if (communityGamesGrid.innerHTML === '') {
-						await loadCommunityGames();
-					}
-					communityGamesGrid.classList.remove('hidden');
-					break;
-				case 'all':
-				default:
-					if (allGamesGrid.innerHTML === '') {
-						await loadAllGames();
-					}
-					allGamesGrid.classList.remove('hidden');
-					break;
-			}
-		});
-	});
-
-	// Initialize with "All" view
-	document.addEventListener('DOMContentLoaded', async () => {
-		// Trigger click on "All" tab to load combined view
-		const allTab = document.querySelector('[data-filter="all"]');
-		if (allTab) {
-			(allTab as HTMLElement).click();
-		}
-	});
-</script>
diff --git a/games/mana-games/apps/web/src/pages/jugendschutz.astro b/games/mana-games/apps/web/src/pages/jugendschutz.astro
deleted file mode 100644
index 6deb86dd9..000000000
--- a/games/mana-games/apps/web/src/pages/jugendschutz.astro
+++ /dev/null
@@ -1,601 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Button from '../components/Button.astro';
----
-
-<Layout title="Jugendschutz">
-	<div class="jugendschutz-container">
-		<header class="jugendschutz-header">
-			<div class="header-icon">🛡️</div>
-			<h1>Jugendschutz bei Mana Games</h1>
-			<p class="subtitle">Sicher spielen für alle Altersgruppen</p>
-		</header>
-
-		<section class="intro-section">
-			<div class="intro-card">
-				<p>
-					Bei Mana Games liegt uns die Sicherheit und das Wohlbefinden junger Spieler besonders am
-					Herzen. Unsere Plattform ist so gestaltet, dass Kinder und Jugendliche sicher und
-					altersgerecht spielen können.
-				</p>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Unsere Jugendschutz-Prinzipien</h2>
-
-			<div class="principles-grid">
-				<div class="principle-card">
-					<div class="card-icon">🎮</div>
-					<h3>Altersgerechte Inhalte</h3>
-					<p>
-						Alle unsere Spiele sind familienfreundlich und enthalten keine Gewalt, explizite Inhalte
-						oder verstörende Elemente.
-					</p>
-				</div>
-
-				<div class="principle-card">
-					<div class="card-icon">🚫</div>
-					<h3>Keine Werbung</h3>
-					<p>
-						Unsere Plattform ist komplett werbefrei. Kinder werden nicht mit kommerziellen Inhalten
-						oder In-App-Käufen konfrontiert.
-					</p>
-				</div>
-
-				<div class="principle-card">
-					<div class="card-icon">🔒</div>
-					<h3>Datenschutz</h3>
-					<p>
-						Wir sammeln keine persönlichen Daten von Kindern. Alle Spielstände werden nur lokal im
-						Browser gespeichert.
-					</p>
-				</div>
-
-				<div class="principle-card">
-					<div class="card-icon">💬</div>
-					<h3>Kein Chat</h3>
-					<p>
-						Es gibt keine Chat-Funktionen oder soziale Features, die eine Kontaktaufnahme zwischen
-						Nutzern ermöglichen.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Altersempfehlungen</h2>
-
-			<div class="age-recommendations">
-				<div class="age-group">
-					<div class="age-badge" style="--badge-color: #4ade80;">0-6 Jahre</div>
-					<h4>Vorschulalter</h4>
-					<p>Einfache Spiele mit großen Buttons und klaren visuellen Elementen:</p>
-					<ul>
-						<li>Memory-Spiele</li>
-						<li>Einfache Puzzle</li>
-						<li>Farb- und Formspiele</li>
-					</ul>
-				</div>
-
-				<div class="age-group">
-					<div class="age-badge" style="--badge-color: #22d3ee;">6-12 Jahre</div>
-					<h4>Grundschulalter</h4>
-					<p>Spiele die Geschicklichkeit und logisches Denken fördern:</p>
-					<ul>
-						<li>Jump'n'Run Spiele</li>
-						<li>Einfache Strategiespiele</li>
-						<li>Lernspiele</li>
-					</ul>
-				</div>
-
-				<div class="age-group">
-					<div class="age-badge" style="--badge-color: #a78bfa;">12+ Jahre</div>
-					<h4>Jugendliche</h4>
-					<p>Komplexere Spiele mit anspruchsvollen Herausforderungen:</p>
-					<ul>
-						<li>Tower Defense</li>
-						<li>Komplexe Puzzle</li>
-						<li>Strategiespiele</li>
-					</ul>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Hinweise für Eltern</h2>
-
-			<div class="parent-tips">
-				<div class="tip-card">
-					<h3>🕐 Spielzeiten begrenzen</h3>
-					<p>
-						Auch wenn unsere Spiele pädagogisch wertvoll sind, empfehlen wir altersgerechte
-						Bildschirmzeiten einzuhalten.
-					</p>
-					<div class="time-recommendations">
-						<div class="time-item">
-							<strong>3-6 Jahre:</strong> max. 30 Minuten täglich
-						</div>
-						<div class="time-item">
-							<strong>6-9 Jahre:</strong> max. 1 Stunde täglich
-						</div>
-						<div class="time-item">
-							<strong>10+ Jahre:</strong> max. 2 Stunden täglich
-						</div>
-					</div>
-				</div>
-
-				<div class="tip-card">
-					<h3>👨‍👩‍👧 Gemeinsam spielen</h3>
-					<p>
-						Nutzen Sie die Gelegenheit, mit Ihren Kindern gemeinsam zu spielen. Das fördert nicht
-						nur die Bindung, sondern ermöglicht auch Gespräche über das Spielerlebnis.
-					</p>
-				</div>
-
-				<div class="tip-card">
-					<h3>🎯 Altersgerechte Auswahl</h3>
-					<p>Achten Sie auf die Komplexitätsstufen unserer Spiele:</p>
-					<ul class="complexity-list">
-						<li><span class="badge minimal">Minimal</span> - Für die Kleinsten</li>
-						<li><span class="badge einfach">Einfach</span> - Ab Grundschulalter</li>
-						<li><span class="badge mittel">Mittel</span> - Für erfahrene Spieler</li>
-						<li><span class="badge komplex">Komplex</span> - Herausfordernd</li>
-					</ul>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>KI-Generator und Jugendschutz</h2>
-
-			<div class="ai-safety">
-				<div class="safety-info">
-					<h3>Sichere KI-Nutzung</h3>
-					<p>Unser KI-Spielegenerator verfügt über eingebaute Sicherheitsmechanismen:</p>
-					<ul>
-						<li>Filterung ungeeigneter Begriffe und Themen</li>
-						<li>Automatische Prüfung generierter Inhalte</li>
-						<li>Keine Generierung von gewalttätigen oder ungeeigneten Spielen</li>
-					</ul>
-				</div>
-
-				<div class="warning-box">
-					<h4>⚠️ Empfehlung</h4>
-					<p>
-						Wir empfehlen, dass Kinder unter 12 Jahren den KI-Generator nur unter Aufsicht von
-						Erwachsenen nutzen.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Technische Schutzmaßnahmen</h2>
-
-			<div class="tech-measures">
-				<div class="measure">
-					<div class="measure-icon">🌐</div>
-					<div class="measure-content">
-						<h4>Keine externen Links</h4>
-						<p>Unsere Spiele enthalten keine Links zu externen Websites.</p>
-					</div>
-				</div>
-
-				<div class="measure">
-					<div class="measure-icon">📵</div>
-					<div class="measure-content">
-						<h4>Offline spielbar</h4>
-						<p>Nach dem ersten Laden können alle Spiele offline gespielt werden.</p>
-					</div>
-				</div>
-
-				<div class="measure">
-					<div class="measure-icon">🔐</div>
-					<div class="measure-content">
-						<h4>Lokale Datenspeicherung</h4>
-						<p>Alle Daten bleiben auf dem Gerät des Nutzers.</p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Kontakt und Meldungen</h2>
-
-			<div class="contact-info">
-				<p>
-					Haben Sie Bedenken bezüglich eines Spiels oder möchten Sie uns auf problematische Inhalte
-					hinweisen? Wir nehmen jeden Hinweis ernst.
-				</p>
-
-				<div class="contact-card">
-					<h3>Jugendschutzbeauftragter</h3>
-					<p>
-						E-Mail: jugendschutz@[ihre-domain].de<br />
-						Wir antworten innerhalb von 24 Stunden auf alle Anfragen.
-					</p>
-				</div>
-			</div>
-		</section>
-
-		<section class="content-section">
-			<h2>Weitere Ressourcen</h2>
-
-			<div class="resources">
-				<h3>Hilfreiche Links für Eltern:</h3>
-				<ul class="resource-list">
-					<li>
-						<a href="https://www.klicksafe.de" target="_blank" rel="noopener noreferrer">
-							klicksafe.de - EU-Initiative für mehr Sicherheit im Netz
-						</a>
-					</li>
-					<li>
-						<a href="https://www.schau-hin.info" target="_blank" rel="noopener noreferrer">
-							SCHAU HIN! - Medienratgeber für Familien
-						</a>
-					</li>
-					<li>
-						<a href="https://www.jugendschutz.net" target="_blank" rel="noopener noreferrer">
-							jugendschutz.net - Kompetenzzentrum für Jugendschutz im Internet
-						</a>
-					</li>
-				</ul>
-			</div>
-		</section>
-
-		<div class="footer-actions">
-			<Button href="/" variant="ghost">Zurück zur Startseite</Button>
-			<Button href="/agb" variant="ghost">Nutzungsbedingungen</Button>
-		</div>
-	</div>
-</Layout>
-
-<style>
-	.jugendschutz-container {
-		max-width: 900px;
-		margin: 0 auto;
-		padding: 2rem 0;
-	}
-
-	.jugendschutz-header {
-		text-align: center;
-		margin-bottom: 3rem;
-	}
-
-	.header-icon {
-		font-size: 4rem;
-		margin-bottom: 1rem;
-		display: inline-block;
-		animation: pulse 2s ease-in-out infinite;
-	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			transform: scale(1);
-		}
-		50% {
-			transform: scale(1.05);
-		}
-	}
-
-	.jugendschutz-header h1 {
-		font-size: 3rem;
-		font-weight: 900;
-		margin-bottom: 0.5rem;
-		background: linear-gradient(135deg, var(--color-text), var(--color-accent));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-	}
-
-	.subtitle {
-		font-size: 1.2rem;
-		color: var(--color-text-secondary);
-	}
-
-	.intro-section {
-		margin-bottom: 3rem;
-	}
-
-	.intro-card {
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), transparent);
-		border: 1px solid rgba(0, 255, 136, 0.2);
-		border-radius: 1rem;
-		padding: 2rem;
-		text-align: center;
-	}
-
-	.intro-card p {
-		font-size: 1.1rem;
-		line-height: 1.8;
-		color: var(--color-text);
-		margin: 0;
-	}
-
-	.content-section {
-		margin-bottom: 4rem;
-	}
-
-	.content-section h2 {
-		font-size: 2rem;
-		font-weight: 700;
-		margin-bottom: 2rem;
-		color: var(--color-text);
-	}
-
-	.content-section h3 {
-		font-size: 1.3rem;
-		font-weight: 600;
-		margin-bottom: 1rem;
-		color: var(--color-text);
-	}
-
-	.content-section h4 {
-		font-size: 1.1rem;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
-		color: var(--color-text);
-	}
-
-	.content-section p {
-		color: var(--color-text-secondary);
-		line-height: 1.8;
-		margin-bottom: 1rem;
-	}
-
-	.principles-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-		gap: 2rem;
-	}
-
-	.principle-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-		text-align: center;
-		transition: all 0.3s ease;
-	}
-
-	.principle-card:hover {
-		transform: translateY(-5px);
-		border-color: var(--color-accent);
-		box-shadow: 0 10px 30px rgba(0, 255, 136, 0.1);
-	}
-
-	.card-icon {
-		font-size: 3rem;
-		margin-bottom: 1rem;
-	}
-
-	.age-recommendations {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-		gap: 2rem;
-	}
-
-	.age-group {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.age-badge {
-		display: inline-block;
-		background: var(--badge-color, var(--color-accent));
-		color: #000;
-		padding: 0.5rem 1.5rem;
-		border-radius: 2rem;
-		font-weight: 700;
-		margin-bottom: 1rem;
-	}
-
-	.age-group ul {
-		list-style: none;
-		padding: 0;
-	}
-
-	.age-group li {
-		padding: 0.5rem 0;
-		color: var(--color-text-secondary);
-		position: relative;
-		padding-left: 1.5rem;
-	}
-
-	.age-group li::before {
-		content: '•';
-		position: absolute;
-		left: 0;
-		color: var(--color-accent);
-	}
-
-	.parent-tips {
-		display: grid;
-		gap: 2rem;
-	}
-
-	.tip-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.time-recommendations {
-		background: var(--color-bg);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		margin-top: 1rem;
-	}
-
-	.time-item {
-		padding: 0.5rem 0;
-		color: var(--color-text-secondary);
-	}
-
-	.complexity-list {
-		list-style: none;
-		padding: 0;
-		margin-top: 1rem;
-	}
-
-	.complexity-list li {
-		padding: 0.5rem 0;
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.badge {
-		padding: 0.25rem 0.75rem;
-		border-radius: 1rem;
-		font-size: 0.85rem;
-		font-weight: 600;
-	}
-
-	.badge.minimal {
-		background: #4ade80;
-		color: #000;
-	}
-
-	.badge.einfach {
-		background: #22d3ee;
-		color: #000;
-	}
-
-	.badge.mittel {
-		background: #fbbf24;
-		color: #000;
-	}
-
-	.badge.komplex {
-		background: #f87171;
-		color: #000;
-	}
-
-	.ai-safety {
-		display: grid;
-		gap: 2rem;
-	}
-
-	.safety-info {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.safety-info ul {
-		list-style: none;
-		padding: 0;
-		margin-top: 1rem;
-	}
-
-	.safety-info li {
-		padding: 0.5rem 0;
-		padding-left: 1.5rem;
-		position: relative;
-		color: var(--color-text-secondary);
-	}
-
-	.safety-info li::before {
-		content: '✓';
-		position: absolute;
-		left: 0;
-		color: var(--color-accent);
-	}
-
-	.warning-box {
-		background: rgba(255, 193, 7, 0.1);
-		border: 1px solid rgba(255, 193, 7, 0.3);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.tech-measures {
-		display: grid;
-		gap: 1.5rem;
-	}
-
-	.measure {
-		display: flex;
-		gap: 1.5rem;
-		align-items: start;
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-	}
-
-	.measure-icon {
-		font-size: 2rem;
-		flex-shrink: 0;
-	}
-
-	.contact-info {
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.contact-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-		margin-top: 1rem;
-	}
-
-	.resource-list {
-		list-style: none;
-		padding: 0;
-		margin-top: 1rem;
-	}
-
-	.resource-list li {
-		padding: 0.75rem 0;
-	}
-
-	.resource-list a {
-		color: var(--color-accent);
-		text-decoration: none;
-		transition: opacity 0.2s ease;
-	}
-
-	.resource-list a:hover {
-		opacity: 0.8;
-		text-decoration: underline;
-	}
-
-	.footer-actions {
-		margin-top: 4rem;
-		padding-top: 2rem;
-		border-top: 1px solid var(--color-border);
-		display: flex;
-		gap: 1rem;
-		justify-content: center;
-		flex-wrap: wrap;
-	}
-
-	@media (max-width: 768px) {
-		.jugendschutz-header h1 {
-			font-size: 2rem;
-		}
-
-		.content-section h2 {
-			font-size: 1.5rem;
-		}
-
-		.principles-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.age-recommendations {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/mitmachen.astro b/games/mana-games/apps/web/src/pages/mitmachen.astro
deleted file mode 100644
index 37005f562..000000000
--- a/games/mana-games/apps/web/src/pages/mitmachen.astro
+++ /dev/null
@@ -1,644 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Button from '../components/Button.astro';
----
-
-<Layout title="Mitmachen">
-	<div class="mitmachen-hero">
-		<div class="hero-background">
-			<div class="floating-element element-1"></div>
-			<div class="floating-element element-2"></div>
-			<div class="floating-element element-3"></div>
-		</div>
-		<div class="hero-content">
-			<h1 class="hero-title">
-				<span class="title-line">Werde Teil der</span>
-				<span class="title-highlight">Community</span>
-			</h1>
-			<p class="hero-subtitle">Gemeinsam erschaffen wir die Zukunft des Web-Gaming</p>
-		</div>
-	</div>
-
-	<div class="mitmachen-container">
-		<!-- Intro Section -->
-		<section class="intro-section">
-			<div class="intro-content">
-				<p class="intro-text">
-					Mana Games ist mehr als nur eine Spielesammlung – es ist eine wachsende Community von
-					Entwicklern, Kreativen und Gaming-Enthusiasten. Deine Ideen und Beiträge können Teil
-					dieser Vision werden.
-				</p>
-			</div>
-		</section>
-
-		<!-- Ways to Contribute -->
-		<section class="contribute-section">
-			<div class="section-header">
-				<span class="section-number">01</span>
-				<h2>Wie du beitragen kannst</h2>
-			</div>
-
-			<div class="contribute-cards">
-				<div class="contribute-row row-left">
-					<div class="contribute-visual">
-						<div class="icon-box">💡</div>
-					</div>
-					<div class="contribute-content">
-						<h3>Spielideen einreichen</h3>
-						<p>
-							Du hast eine geniale Spielidee? Teile sie mit uns! Wir sind immer auf der Suche nach
-							innovativen Konzepten, die Spaß machen und gleichzeitig technisch interessant sind.
-						</p>
-						<ul class="feature-list">
-							<li>Neue Gameplay-Mechaniken</li>
-							<li>Kreative Themes und Settings</li>
-							<li>Innovative Steuerungskonzepte</li>
-						</ul>
-					</div>
-				</div>
-
-				<div class="contribute-row row-right">
-					<div class="contribute-content">
-						<h3>Code & Entwicklung</h3>
-						<p>
-							Als Open-Source-Projekt freuen wir uns über Code-Beiträge jeder Art. Ob Bug-Fixes,
-							Performance-Optimierungen oder neue Features – jeder Beitrag zählt.
-						</p>
-						<ul class="feature-list">
-							<li>JavaScript/HTML5 Canvas Expertise</li>
-							<li>Performance-Optimierungen</li>
-							<li>Bug-Fixes und Verbesserungen</li>
-						</ul>
-					</div>
-					<div class="contribute-visual">
-						<div class="icon-box">🚀</div>
-					</div>
-				</div>
-
-				<div class="contribute-row row-left">
-					<div class="contribute-visual">
-						<div class="icon-box">🎨</div>
-					</div>
-					<div class="contribute-content">
-						<h3>Design & Grafik</h3>
-						<p>
-							Hilf uns dabei, Mana Games noch schöner zu machen! Von Spiel-Assets über
-							UI-Verbesserungen bis hin zu komplett neuen visuellen Konzepten.
-						</p>
-						<ul class="feature-list">
-							<li>Pixel Art & Sprites</li>
-							<li>UI/UX Verbesserungen</li>
-							<li>Visuelle Effekte & Animationen</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<!-- Benefits Section -->
-		<section class="benefits-section">
-			<div class="section-header">
-				<span class="section-number">02</span>
-				<h2>Was dich erwartet</h2>
-			</div>
-			<div class="benefits-grid">
-				<div class="benefit-card">
-					<div class="benefit-icon">🏆</div>
-					<h4>Anerkennung</h4>
-					<p>Dein Name in den Credits und der Contributors-Liste</p>
-				</div>
-				<div class="benefit-card">
-					<div class="benefit-icon">📚</div>
-					<h4>Lernerfahrung</h4>
-					<p>Arbeite mit modernen Web-Technologien und lerne von der Community</p>
-				</div>
-				<div class="benefit-card">
-					<div class="benefit-icon">🌍</div>
-					<h4>Reichweite</h4>
-					<p>Deine Arbeit wird von Spielern weltweit gesehen und gespielt</p>
-				</div>
-				<div class="benefit-card">
-					<div class="benefit-icon">🤝</div>
-					<h4>Netzwerk</h4>
-					<p>Verbinde dich mit gleichgesinnten Entwicklern und Kreativen</p>
-				</div>
-			</div>
-		</section>
-
-		<!-- Guidelines Section -->
-		<section class="guidelines-section">
-			<div class="section-header">
-				<span class="section-number">03</span>
-				<h2>Unsere Richtlinien</h2>
-			</div>
-			<div class="guidelines-content">
-				<div class="guideline">
-					<span class="guideline-icon">✅</span>
-					<div>
-						<strong>Qualität über Quantität</strong>
-						<p>Wir legen Wert auf durchdachte, gut implementierte Beiträge</p>
-					</div>
-				</div>
-				<div class="guideline">
-					<span class="guideline-icon">🎯</span>
-					<div>
-						<strong>Performance im Fokus</strong>
-						<p>Spiele müssen flüssig auf allen Geräten laufen</p>
-					</div>
-				</div>
-				<div class="guideline">
-					<span class="guideline-icon">🌟</span>
-					<div>
-						<strong>Kreativität fördern</strong>
-						<p>Neue Ideen und innovative Ansätze sind immer willkommen</p>
-					</div>
-				</div>
-				<div class="guideline">
-					<span class="guideline-icon">👥</span>
-					<div>
-						<strong>Respektvolle Community</strong>
-						<p>Ein freundlicher und konstruktiver Umgang miteinander</p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<!-- Tech Stack -->
-		<section class="tech-section">
-			<div class="section-header">
-				<span class="section-number">04</span>
-				<h2>Unser Tech-Stack</h2>
-			</div>
-			<div class="tech-info">
-				<p class="tech-intro">
-					Arbeite mit modernen Web-Technologien und erweitere deine Fähigkeiten:
-				</p>
-				<div class="tech-grid">
-					<div class="tech-item">
-						<code>HTML5 Canvas</code>
-						<span>Grafik-Engine</span>
-					</div>
-					<div class="tech-item">
-						<code>JavaScript ES6+</code>
-						<span>Programmierung</span>
-					</div>
-					<div class="tech-item">
-						<code>Astro</code>
-						<span>Framework</span>
-					</div>
-					<div class="tech-item">
-						<code>PWA</code>
-						<span>App-Technologie</span>
-					</div>
-				</div>
-			</div>
-		</section>
-
-		<!-- CTA Section -->
-		<section class="cta-section">
-			<div class="cta-content">
-				<h2>Bereit durchzustarten?</h2>
-				<p>
-					Egal ob du Entwickler, Designer oder einfach voller Ideen bist – wir freuen uns auf deinen
-					Beitrag zur Mana Games Community!
-				</p>
-				<div class="cta-buttons">
-					<Button href="https://github.com/yourusername/mana-games" variant="primary" size="large">
-						GitHub Repository
-					</Button>
-					<Button href="/contact" variant="accent" size="large"> Kontakt aufnehmen </Button>
-				</div>
-			</div>
-		</section>
-	</div>
-</Layout>
-
-<style>
-	/* Hero Section */
-	.mitmachen-hero {
-		position: relative;
-		min-height: 50vh;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-		margin-bottom: 4rem;
-	}
-
-	.hero-background {
-		position: absolute;
-		inset: 0;
-		opacity: 0.1;
-	}
-
-	.floating-element {
-		position: absolute;
-		border: 2px solid var(--color-accent);
-		border-radius: 50%;
-		animation: float 20s ease-in-out infinite;
-	}
-
-	.element-1 {
-		width: 300px;
-		height: 300px;
-		top: -100px;
-		left: -100px;
-		animation-delay: 0s;
-	}
-
-	.element-2 {
-		width: 200px;
-		height: 200px;
-		bottom: -50px;
-		right: -50px;
-		animation-delay: 5s;
-	}
-
-	.element-3 {
-		width: 150px;
-		height: 150px;
-		top: 50%;
-		left: 80%;
-		animation-delay: 10s;
-	}
-
-	@keyframes float {
-		0%,
-		100% {
-			transform: translate(0, 0) rotate(0deg);
-		}
-		33% {
-			transform: translate(30px, -30px) rotate(120deg);
-		}
-		66% {
-			transform: translate(-20px, 20px) rotate(240deg);
-		}
-	}
-
-	.hero-content {
-		position: relative;
-		z-index: 1;
-		text-align: center;
-	}
-
-	.hero-title {
-		font-size: clamp(3rem, 8vw, 5rem);
-		font-weight: 900;
-		line-height: 1;
-		margin-bottom: 1rem;
-	}
-
-	.title-line {
-		display: block;
-		opacity: 0;
-		transform: translateY(20px);
-		animation: fadeInUp 0.6s ease forwards;
-	}
-
-	.title-highlight {
-		display: block;
-		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		opacity: 0;
-		transform: translateY(20px);
-		animation: fadeInUp 0.6s ease 0.2s forwards;
-	}
-
-	.hero-subtitle {
-		font-size: 1.5rem;
-		color: var(--color-text-secondary);
-		opacity: 0;
-		transform: translateY(20px);
-		animation: fadeInUp 0.6s ease 0.4s forwards;
-	}
-
-	@keyframes fadeInUp {
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* Container */
-	.mitmachen-container {
-		max-width: 1200px;
-		margin: 0 auto;
-	}
-
-	/* Sections */
-	section {
-		margin-bottom: 6rem;
-		opacity: 0;
-		transform: translateY(30px);
-		animation: fadeInUp 0.8s ease forwards;
-	}
-
-	.section-header {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		margin-bottom: 3rem;
-	}
-
-	.section-number {
-		font-size: 3rem;
-		font-weight: 900;
-		color: var(--color-accent);
-		opacity: 0.3;
-	}
-
-	h2 {
-		font-size: 2.5rem;
-		font-weight: 900;
-	}
-
-	/* Intro Section */
-	.intro-section {
-		text-align: center;
-		margin-bottom: 4rem;
-	}
-
-	.intro-text {
-		font-size: 1.25rem;
-		color: var(--color-text-secondary);
-		line-height: 1.8;
-		max-width: 800px;
-		margin: 0 auto;
-	}
-
-	/* Contribute Section - Alternating Layout */
-	.contribute-cards {
-		display: flex;
-		flex-direction: column;
-		gap: 4rem;
-	}
-
-	.contribute-row {
-		display: grid;
-		grid-template-columns: 1fr 2fr;
-		gap: 3rem;
-		align-items: center;
-	}
-
-	.row-right {
-		grid-template-columns: 2fr 1fr;
-	}
-
-	.contribute-visual {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.icon-box {
-		width: 150px;
-		height: 150px;
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.05));
-		border: 2px solid var(--color-accent);
-		border-radius: 2rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 4rem;
-		animation: pulse 3s ease-in-out infinite;
-	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			transform: scale(1);
-		}
-		50% {
-			transform: scale(1.05);
-		}
-	}
-
-	.contribute-content h3 {
-		color: var(--color-text);
-		margin-bottom: 1rem;
-		font-size: 1.75rem;
-	}
-
-	.contribute-content p {
-		color: var(--color-text-secondary);
-		line-height: 1.8;
-		margin-bottom: 1.5rem;
-	}
-
-	.feature-list {
-		list-style: none;
-		padding: 0;
-	}
-
-	.feature-list li {
-		color: var(--color-text-secondary);
-		padding: 0.5rem 0;
-		padding-left: 1.5rem;
-		position: relative;
-	}
-
-	.feature-list li::before {
-		content: '→';
-		position: absolute;
-		left: 0;
-		color: var(--color-accent);
-	}
-
-	/* Benefits Section */
-	.benefits-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-		gap: 2rem;
-	}
-
-	.benefit-card {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 1rem;
-		padding: 2rem;
-		text-align: center;
-		transition: all 0.3s ease;
-	}
-
-	.benefit-card:hover {
-		transform: translateY(-5px);
-		border-color: var(--color-accent);
-		box-shadow: 0 10px 30px rgba(0, 255, 136, 0.1);
-	}
-
-	.benefit-icon {
-		font-size: 3rem;
-		margin-bottom: 1rem;
-	}
-
-	.benefit-card h4 {
-		color: var(--color-text);
-		margin-bottom: 0.5rem;
-	}
-
-	.benefit-card p {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-	}
-
-	/* Guidelines Section */
-	.guidelines-section {
-		background: var(--color-bg-secondary);
-		border-radius: 2rem;
-		padding: 3rem;
-		margin: 4rem 0;
-	}
-
-	.guidelines-content {
-		display: grid;
-		gap: 2rem;
-	}
-
-	.guideline {
-		display: flex;
-		gap: 1.5rem;
-		align-items: start;
-	}
-
-	.guideline-icon {
-		font-size: 2rem;
-		flex-shrink: 0;
-	}
-
-	.guideline strong {
-		display: block;
-		color: var(--color-text);
-		margin-bottom: 0.25rem;
-	}
-
-	.guideline p {
-		color: var(--color-text-secondary);
-	}
-
-	/* Tech Section */
-	.tech-info {
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent);
-		border-radius: 1rem;
-		padding: 2rem;
-	}
-
-	.tech-intro {
-		color: var(--color-text-secondary);
-		margin-bottom: 2rem;
-		text-align: center;
-	}
-
-	.tech-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: 1.5rem;
-	}
-
-	.tech-item {
-		background: var(--color-bg-secondary);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		padding: 1.5rem;
-		text-align: center;
-		transition: all 0.3s ease;
-	}
-
-	.tech-item:hover {
-		border-color: var(--color-accent);
-		transform: translateY(-2px);
-	}
-
-	.tech-item code {
-		display: block;
-		color: var(--color-accent);
-		font-size: 1.1rem;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
-	}
-
-	.tech-item span {
-		color: var(--color-text-secondary);
-		font-size: 0.9rem;
-	}
-
-	/* CTA Section */
-	.cta-section {
-		text-align: center;
-		padding: 4rem;
-		background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), transparent);
-		border-radius: 2rem;
-	}
-
-	.cta-content h2 {
-		margin-bottom: 1rem;
-	}
-
-	.cta-content p {
-		font-size: 1.2rem;
-		color: var(--color-text-secondary);
-		margin-bottom: 2rem;
-		max-width: 600px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.cta-buttons {
-		display: flex;
-		gap: 1rem;
-		justify-content: center;
-		flex-wrap: wrap;
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.hero-title {
-			font-size: 3rem;
-		}
-
-		.hero-subtitle {
-			font-size: 1.2rem;
-		}
-
-		section {
-			margin-bottom: 4rem;
-		}
-
-		.section-header {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		h2 {
-			font-size: 2rem;
-		}
-
-		.contribute-row {
-			grid-template-columns: 1fr;
-			text-align: center;
-		}
-
-		.row-right {
-			grid-template-columns: 1fr;
-		}
-
-		.contribute-visual {
-			order: -1;
-		}
-
-		.icon-box {
-			width: 120px;
-			height: 120px;
-			font-size: 3rem;
-		}
-
-		.guidelines-section {
-			padding: 2rem;
-		}
-
-		.cta-section {
-			padding: 2rem;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/play-generated.astro b/games/mana-games/apps/web/src/pages/play-generated.astro
deleted file mode 100644
index bc05d5e29..000000000
--- a/games/mana-games/apps/web/src/pages/play-generated.astro
+++ /dev/null
@@ -1,397 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
----
-
-<Layout title="Generiertes Spiel" fullWidth={true} hideFooter={true}>
-	<div class="game-container">
-		<div class="game-header">
-			<button id="backBtn" class="back-btn"> ← Zurück </button>
-			<h1 id="gameTitle">Lade Spiel...</h1>
-			<div class="game-actions">
-				<button id="editBtn" class="action-btn"> 📝 Bearbeiten </button>
-				<button id="fullscreenBtn" class="action-btn"> ⛶ Vollbild </button>
-				<button id="deleteBtn" class="action-btn danger"> 🗑️ Löschen </button>
-			</div>
-		</div>
-
-		<div class="game-frame-container">
-			<div id="loadingState" class="loading-state">
-				<div class="spinner"></div>
-				<p>Lade dein Spiel...</p>
-			</div>
-
-			<iframe id="gameFrame" class="game-iframe hidden" sandbox="allow-scripts allow-same-origin"
-			></iframe>
-
-			<div id="errorState" class="error-state hidden">
-				<p>❌ Spiel konnte nicht geladen werden</p>
-				<p class="error-detail">Das gesuchte Spiel wurde nicht gefunden.</p>
-				<a href="/" class="home-link">Zurück zur Startseite</a>
-			</div>
-		</div>
-
-		<div class="game-info">
-			<p id="gameDescription" class="game-description"></p>
-			<p id="gameDate" class="game-date"></p>
-		</div>
-	</div>
-</Layout>
-
-<script>
-	// Get game ID from URL parameters
-	const urlParams = new URLSearchParams(window.location.search);
-	const gameId = urlParams.get('id');
-
-	if (!gameId) {
-		window.location.href = '/';
-	}
-
-	// Game Storage
-	class GameStorage {
-		constructor() {
-			this.dbName = 'ManaGamesDB';
-			this.storeName = 'generatedGames';
-			this.db = null;
-		}
-
-		async init() {
-			return new Promise((resolve, reject) => {
-				const request = indexedDB.open(this.dbName, 1);
-
-				request.onerror = () => reject(request.error);
-				request.onsuccess = () => {
-					this.db = request.result;
-					resolve();
-				};
-
-				request.onupgradeneeded = (event) => {
-					const db = event.target.result;
-					if (!db.objectStoreNames.contains(this.storeName)) {
-						const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
-						store.createIndex('createdAt', 'createdAt', { unique: false });
-						store.createIndex('title', 'title', { unique: false });
-					}
-				};
-			});
-		}
-
-		async getGame(id) {
-			if (!this.db) await this.init();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db.transaction([this.storeName], 'readonly');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.get(id);
-
-				request.onsuccess = () => resolve(request.result || null);
-				request.onerror = () => reject(request.error);
-			});
-		}
-
-		async deleteGame(id) {
-			if (!this.db) await this.init();
-
-			return new Promise((resolve, reject) => {
-				const transaction = this.db.transaction([this.storeName], 'readwrite');
-				const store = transaction.objectStore(this.storeName);
-				const request = store.delete(id);
-
-				request.onsuccess = () => resolve();
-				request.onerror = () => reject(request.error);
-			});
-		}
-	}
-
-	// Initialize
-	const gameStorage = new GameStorage();
-	const loadingState = document.getElementById('loadingState');
-	const errorState = document.getElementById('errorState');
-	const gameFrame = document.getElementById('gameFrame');
-	const gameTitle = document.getElementById('gameTitle');
-	const gameDescription = document.getElementById('gameDescription');
-	const gameDate = document.getElementById('gameDate');
-	const backBtn = document.getElementById('backBtn');
-	const editBtn = document.getElementById('editBtn');
-	const fullscreenBtn = document.getElementById('fullscreenBtn');
-	const deleteBtn = document.getElementById('deleteBtn');
-
-	// Load game
-	async function loadGame() {
-		try {
-			const game = await gameStorage.getGame(gameId);
-
-			if (!game) {
-				showError();
-				return;
-			}
-
-			// Update UI
-			document.title = `${game.title} - ManaGames`;
-			gameTitle.textContent = game.title;
-			gameDescription.textContent = game.description || game.prompt;
-
-			const date = new Date(game.createdAt).toLocaleDateString('de-DE', {
-				day: '2-digit',
-				month: 'long',
-				year: 'numeric',
-				hour: '2-digit',
-				minute: '2-digit',
-			});
-			gameDate.textContent = `Erstellt am ${date}`;
-
-			// Display game
-			const blob = new Blob([game.html], { type: 'text/html' });
-			const url = URL.createObjectURL(blob);
-			gameFrame.src = url;
-
-			gameFrame.addEventListener(
-				'load',
-				() => {
-					URL.revokeObjectURL(url);
-					hideLoading();
-				},
-				{ once: true }
-			);
-		} catch (error) {
-			console.error('Error loading game:', error);
-			showError();
-		}
-	}
-
-	function hideLoading() {
-		loadingState.classList.add('hidden');
-		gameFrame.classList.remove('hidden');
-	}
-
-	function showError() {
-		loadingState.classList.add('hidden');
-		errorState.classList.remove('hidden');
-	}
-
-	// Event handlers
-	backBtn.addEventListener('click', () => {
-		window.history.back();
-	});
-
-	editBtn.addEventListener('click', () => {
-		// Store game ID in sessionStorage for the create page to load
-		sessionStorage.setItem('editGameId', gameId);
-		window.location.href = '/create';
-	});
-
-	fullscreenBtn.addEventListener('click', () => {
-		if (gameFrame.requestFullscreen) {
-			gameFrame.requestFullscreen();
-		}
-	});
-
-	deleteBtn.addEventListener('click', async () => {
-		if (confirm('Bist du sicher, dass du dieses Spiel löschen möchtest?')) {
-			try {
-				await gameStorage.deleteGame(gameId);
-				window.location.href = '/';
-			} catch (error) {
-				console.error('Error deleting game:', error);
-				alert('Fehler beim Löschen des Spiels');
-			}
-		}
-	});
-
-	// Load game on page load
-	loadGame();
-</script>
-
-<style>
-	.game-container {
-		height: calc(100vh - 60px);
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		max-width: 1400px;
-		margin: 0 auto;
-	}
-
-	.game-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 1rem;
-		padding: 1rem;
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-	}
-
-	.back-btn {
-		background: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 0.5rem 1rem;
-		font-size: 0.875rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		font-family: inherit;
-	}
-
-	.back-btn:hover {
-		border-color: var(--color-accent);
-		transform: translateX(-2px);
-	}
-
-	#gameTitle {
-		font-size: 1.5rem;
-		font-weight: 700;
-		color: var(--color-text);
-		margin: 0;
-	}
-
-	.game-actions {
-		display: flex;
-		gap: 0.5rem;
-	}
-
-	.action-btn {
-		background: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 8px;
-		padding: 0.5rem 1rem;
-		font-size: 0.875rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		font-family: inherit;
-	}
-
-	.action-btn:hover {
-		background: var(--color-surface);
-		border-color: var(--color-accent);
-	}
-
-	.action-btn.danger {
-		color: #ef4444;
-		border-color: rgba(239, 68, 68, 0.3);
-	}
-
-	.action-btn.danger:hover {
-		background: rgba(239, 68, 68, 0.1);
-		border-color: #ef4444;
-	}
-
-	.game-frame-container {
-		flex: 1;
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		overflow: hidden;
-		position: relative;
-	}
-
-	.game-iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-	}
-
-	.loading-state,
-	.error-state {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		background: var(--color-bg);
-	}
-
-	.spinner {
-		width: 3rem;
-		height: 3rem;
-		border: 3px solid var(--color-border);
-		border-top-color: var(--color-accent);
-		border-radius: 50%;
-		animation: spin 1s linear infinite;
-		margin-bottom: 1rem;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.loading-state p,
-	.error-state p {
-		color: var(--color-text-secondary);
-		font-size: 1.1rem;
-		margin: 0.5rem 0;
-	}
-
-	.error-detail {
-		font-size: 0.9rem !important;
-		color: var(--color-text-muted) !important;
-	}
-
-	.home-link {
-		margin-top: 1rem;
-		background: var(--color-accent);
-		color: var(--color-bg);
-		padding: 0.75rem 2rem;
-		border-radius: 8px;
-		text-decoration: none;
-		font-weight: 600;
-		transition: all 0.2s ease;
-	}
-
-	.home-link:hover {
-		background: var(--color-accent-hover);
-		transform: translateY(-1px);
-	}
-
-	.game-info {
-		margin-top: 1rem;
-		padding: 1rem;
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-	}
-
-	.game-description {
-		color: var(--color-text);
-		margin: 0 0 0.5rem 0;
-	}
-
-	.game-date {
-		color: var(--color-text-secondary);
-		font-size: 0.875rem;
-		margin: 0;
-	}
-
-	.hidden {
-		display: none !important;
-	}
-
-	@media (max-width: 768px) {
-		.game-container {
-			padding: 0.5rem;
-		}
-
-		.game-header {
-			flex-direction: column;
-			gap: 1rem;
-			text-align: center;
-		}
-
-		.game-actions {
-			width: 100%;
-			justify-content: center;
-		}
-
-		#gameTitle {
-			font-size: 1.25rem;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/stats.astro b/games/mana-games/apps/web/src/pages/stats.astro
deleted file mode 100644
index 5a1879fc9..000000000
--- a/games/mana-games/apps/web/src/pages/stats.astro
+++ /dev/null
@@ -1,1515 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import { games } from '../data/games';
----
-
-<Layout title="Meine Statistiken">
-	<div class="stats-page">
-		<h1>Meine Spielstatistiken</h1>
-
-		<div id="stats-container">
-			<!-- Wird von JavaScript gefüllt -->
-			<div class="loading">Lade Statistiken...</div>
-		</div>
-	</div>
-</Layout>
-
-<script define:vars={{ games }}>
-	// Stats service functions
-	const statsService = {
-		getStoredStats() {
-			try {
-				const stored = localStorage.getItem('mana-games-stats');
-				return stored ? JSON.parse(stored) : {};
-			} catch (error) {
-				console.error('Error reading stats:', error);
-				return {};
-			}
-		},
-
-		formatPlayTime(seconds) {
-			const hours = Math.floor(seconds / 3600);
-			const minutes = Math.floor((seconds % 3600) / 60);
-
-			if (hours > 0) {
-				return `${hours}h ${minutes}m`;
-			}
-			return `${minutes}m`;
-		},
-
-		getRelativeTime(dateString) {
-			const date = new Date(dateString);
-			const now = new Date();
-			const diffMs = now.getTime() - date.getTime();
-			const diffMins = Math.floor(diffMs / 60000);
-			const diffHours = Math.floor(diffMs / 3600000);
-			const diffDays = Math.floor(diffMs / 86400000);
-
-			if (diffMins < 1) return 'Gerade eben';
-			if (diffMins < 60) return `Vor ${diffMins} Minuten`;
-			if (diffHours < 24) return `Vor ${diffHours} Stunden`;
-			if (diffDays < 7) return `Vor ${diffDays} Tagen`;
-
-			return date.toLocaleDateString('de-DE');
-		},
-
-		formatScore(gameId, score) {
-			// Für Click Race: Zeit in Sekunden anzeigen
-			if (gameId === 'click-race') {
-				return `${(score / 1000).toFixed(2)}s`;
-			}
-			return score.toLocaleString('de-DE');
-		},
-	};
-
-	// Load stats on page load with performance optimization
-	window.addEventListener('DOMContentLoaded', () => {
-		const container = document.getElementById('stats-container');
-		const allStats = statsService.getStoredStats();
-		const statsArray = Object.entries(allStats);
-
-		// Use requestAnimationFrame for smoother rendering
-		requestAnimationFrame(() => {
-			// Calculate global stats
-			const totalGamesPlayed = statsArray.reduce((sum, [_, stat]) => sum + stat.gamesPlayed, 0);
-			const totalPlayTime = statsArray.reduce((sum, [_, stat]) => sum + stat.totalPlayTime, 0);
-
-			let favoriteGameId = null;
-			let maxPlays = 0;
-			statsArray.forEach(([gameId, stat]) => {
-				if (stat.gamesPlayed > maxPlays) {
-					maxPlays = stat.gamesPlayed;
-					favoriteGameId = gameId;
-				}
-			});
-
-			const favoriteGame = games.find((g) => g.slug === favoriteGameId);
-
-			// Build HTML
-			let html = `
-      <section class="global-stats">
-        <div class="stat-card total-games">
-          <div class="stat-icon">🎮</div>
-          <div class="stat-content">
-            <div class="stat-number">${totalGamesPlayed}</div>
-            <div class="stat-label">Spiele gespielt</div>
-          </div>
-        </div>
-        
-        <div class="stat-card total-time">
-          <div class="stat-icon">⏱️</div>
-          <div class="stat-content">
-            <div class="stat-number">${statsService.formatPlayTime(totalPlayTime)}</div>
-            <div class="stat-label">Gesamtspielzeit</div>
-          </div>
-        </div>
-        
-        ${
-					favoriteGame
-						? `
-          <div class="stat-card favorite">
-            <div class="stat-icon">❤️</div>
-            <div class="stat-content">
-              <div class="stat-number">${favoriteGame.title}</div>
-              <div class="stat-label">Lieblingsspiel</div>
-            </div>
-          </div>
-        `
-						: ''
-				}
-        
-        <div class="stat-card games-tried">
-          <div class="stat-icon">📊</div>
-          <div class="stat-content">
-            <div class="stat-number">${statsArray.length}/${games.length}</div>
-            <div class="stat-label">Spiele ausprobiert</div>
-          </div>
-        </div>
-      </section>
-    `;
-
-			if (statsArray.length > 0) {
-				html += `
-        <section class="games-stats">
-          <h2>Spieleübersicht</h2>
-          
-          <!-- Tabellen-Ansicht -->
-          <div class="table-controls">
-            <div class="view-toggle">
-              <button class="view-btn active" data-view="table">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                  <rect x="1" y="1" width="14" height="3" rx="0.5"/>
-                  <rect x="1" y="6" width="14" height="3" rx="0.5"/>
-                  <rect x="1" y="11" width="14" height="3" rx="0.5"/>
-                </svg>
-                Tabelle
-              </button>
-              <button class="view-btn" data-view="cards">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                  <rect x="1" y="1" width="6" height="6" rx="0.5"/>
-                  <rect x="9" y="1" width="6" height="6" rx="0.5"/>
-                  <rect x="1" y="9" width="6" height="6" rx="0.5"/>
-                  <rect x="9" y="9" width="6" height="6" rx="0.5"/>
-                </svg>
-                Karten
-              </button>
-            </div>
-            <div class="sort-control">
-              <label for="sort-select">Sortieren nach:</label>
-              <select id="sort-select" class="sort-select">
-                <option value="gamesPlayed">Meistgespielt</option>
-                <option value="highScore">Highscore</option>
-                <option value="totalPlayTime">Spielzeit</option>
-                <option value="lastPlayed">Zuletzt gespielt</option>
-                <option value="name">Name</option>
-              </select>
-            </div>
-          </div>
-          
-          <!-- Tabellen-Ansicht -->
-          <div class="table-container" id="table-view">
-            <table class="stats-table">
-              <thead>
-                <tr>
-                  <th class="th-game">Spiel</th>
-                  <th class="th-numeric sortable" data-sort="gamesPlayed">
-                    Gespielt
-                    <span class="sort-icon">↓</span>
-                  </th>
-                  <th class="th-numeric sortable" data-sort="highScore">
-                    Highscore
-                    <span class="sort-icon"></span>
-                  </th>
-                  <th class="th-numeric sortable" data-sort="totalPlayTime">
-                    Spielzeit
-                    <span class="sort-icon"></span>
-                  </th>
-                  <th class="th-date sortable" data-sort="lastPlayed">
-                    Zuletzt gespielt
-                    <span class="sort-icon"></span>
-                  </th>
-                  <th class="th-achievements">Achievements</th>
-                  <th class="th-action">Aktion</th>
-                </tr>
-              </thead>
-              <tbody id="stats-table-body">
-      `;
-
-				// Sort by games played initially
-				statsArray.sort((a, b) => b[1].gamesPlayed - a[1].gamesPlayed);
-
-				statsArray.forEach(([gameId, stat]) => {
-					const gameInfo = games.find((g) => g.slug === gameId);
-					if (gameInfo) {
-						html += `
-            <tr data-game-id="${gameId}" data-games-played="${stat.gamesPlayed}" data-high-score="${stat.highScore}" data-total-play-time="${stat.totalPlayTime}" data-last-played="${stat.lastPlayed}" data-name="${gameInfo.title}">
-              <td class="td-game">
-                <div class="game-cell">
-                  ${gameInfo.thumbnail ? `<img src="${gameInfo.thumbnail}" alt="${gameInfo.title}" class="game-thumb-small" />` : '<div class="game-thumb-placeholder">🎮</div>'}
-                  <span class="game-name">${gameInfo.title}</span>
-                </div>
-              </td>
-              <td class="td-numeric">
-                <span class="stat-value">${stat.gamesPlayed}x</span>
-              </td>
-              <td class="td-numeric">
-                <span class="stat-value highlight-score">${statsService.formatScore(gameId, stat.highScore)}</span>
-              </td>
-              <td class="td-numeric">
-                <span class="stat-value">${statsService.formatPlayTime(stat.totalPlayTime)}</span>
-              </td>
-              <td class="td-date">
-                <span class="date-value">${statsService.getRelativeTime(stat.lastPlayed)}</span>
-              </td>
-              <td class="td-achievements">
-                ${
-									stat.achievements && stat.achievements.length > 0
-										? `
-                  <div class="achievements-compact">
-                    <span class="achievement-count">${stat.achievements.length} 🏅</span>
-                    <div class="achievements-tooltip">
-                      ${stat.achievements
-												.map(
-													(achievement) => `
-                        <div class="tooltip-achievement">
-                          <span class="tooltip-icon">🏅</span>
-                          <div>
-                            <div class="tooltip-name">${achievement.name}</div>
-                            <div class="tooltip-desc">${achievement.description}</div>
-                          </div>
-                        </div>
-                      `
-												)
-												.join('')}
-                    </div>
-                  </div>
-                `
-										: '<span class="no-achievements">-</span>'
-								}
-              </td>
-              <td class="td-action">
-                <a href="/games/${gameId}" class="play-btn-small">
-                  Spielen →
-                </a>
-              </td>
-            </tr>
-          `;
-					}
-				});
-
-				html += `
-              </tbody>
-            </table>
-          </div>
-          
-          <!-- Karten-Ansicht (versteckt) -->
-          <div class="games-list" id="cards-view" style="display: none;">
-      `;
-
-				// Karten-Ansicht bleibt unverändert
-				statsArray.forEach(([gameId, stat]) => {
-					const gameInfo = games.find((g) => g.slug === gameId);
-					if (gameInfo) {
-						html += `
-            <div class="game-stat-card" data-game-id="${gameId}" data-games-played="${stat.gamesPlayed}" data-high-score="${stat.highScore}" data-total-play-time="${stat.totalPlayTime}" data-last-played="${stat.lastPlayed}" data-name="${gameInfo.title}">
-              <div class="game-header">
-                ${gameInfo.thumbnail ? `<img src="${gameInfo.thumbnail}" alt="${gameInfo.title}" class="game-thumb" />` : ''}
-                <div class="game-info">
-                  <h3>${gameInfo.title}</h3>
-                  <div class="game-meta">
-                    <span class="last-played">
-                      Zuletzt: ${statsService.getRelativeTime(stat.lastPlayed)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              
-              <div class="game-stats-grid">
-                <div class="mini-stat">
-                  <span class="mini-label">Highscore</span>
-                  <span class="mini-value">${statsService.formatScore(gameId, stat.highScore)}</span>
-                </div>
-                <div class="mini-stat">
-                  <span class="mini-label">Gespielt</span>
-                  <span class="mini-value">${stat.gamesPlayed}x</span>
-                </div>
-                <div class="mini-stat">
-                  <span class="mini-label">Spielzeit</span>
-                  <span class="mini-value">${statsService.formatPlayTime(stat.totalPlayTime)}</span>
-                </div>
-              </div>
-              
-              ${
-								stat.achievements && stat.achievements.length > 0
-									? `
-                <div class="achievements-section">
-                  <h4>Achievements (${stat.achievements.length})</h4>
-                  <div class="achievement-badges">
-                    ${stat.achievements
-											.map(
-												(achievement) => `
-                      <div class="achievement-badge" title="${achievement.description}">
-                        🏅 ${achievement.name}
-                      </div>
-                    `
-											)
-											.join('')}
-                  </div>
-                </div>
-              `
-									: ''
-							}
-              
-              <a href="/games/${gameId}" class="play-again-btn">
-                Nochmal spielen →
-              </a>
-            </div>
-          `;
-					}
-				});
-
-				html += `
-          </div>
-        </section>
-      `;
-			} else {
-				html += `
-        <section class="empty-state">
-          <p>Du hast noch keine Spiele gespielt. Probiere eines aus!</p>
-          <a href="/" class="cta-button">Zu den Spielen</a>
-        </section>
-      `;
-			}
-
-			container.innerHTML = html;
-
-			// View Toggle
-			const viewBtns = document.querySelectorAll('.view-btn');
-			const tableView = document.getElementById('table-view');
-			const cardsView = document.getElementById('cards-view');
-
-			viewBtns.forEach((btn) => {
-				btn.addEventListener('click', () => {
-					const view = btn.getAttribute('data-view');
-
-					viewBtns.forEach((b) => b.classList.remove('active'));
-					btn.classList.add('active');
-
-					if (view === 'table') {
-						tableView.style.display = 'block';
-						cardsView.style.display = 'none';
-					} else {
-						tableView.style.display = 'none';
-						cardsView.style.display = 'grid';
-					}
-				});
-			});
-
-			// Sorting functionality
-			const sortSelect = document.getElementById('sort-select');
-			const tableBody = document.getElementById('stats-table-body');
-			const cardsContainer = document.getElementById('cards-view');
-			let currentSort = 'gamesPlayed';
-			let sortDirection = 'desc';
-
-			// Table header sorting
-			const sortableHeaders = document.querySelectorAll('.sortable');
-			sortableHeaders.forEach((header) => {
-				header.addEventListener('click', () => {
-					const sortBy = header.getAttribute('data-sort');
-
-					// Update sort direction
-					if (currentSort === sortBy) {
-						sortDirection = sortDirection === 'desc' ? 'asc' : 'desc';
-					} else {
-						sortDirection = 'desc';
-					}
-
-					currentSort = sortBy;
-					sortSelect.value = sortBy;
-
-					// Update sort icons
-					sortableHeaders.forEach((h) => {
-						const icon = h.querySelector('.sort-icon');
-						icon.textContent = '';
-					});
-
-					const currentIcon = header.querySelector('.sort-icon');
-					currentIcon.textContent = sortDirection === 'desc' ? '↓' : '↑';
-
-					sortData();
-				});
-			});
-
-			// Dropdown sorting
-			sortSelect.addEventListener('change', (e) => {
-				currentSort = e.target.value;
-				sortDirection = 'desc';
-
-				// Update header icons
-				sortableHeaders.forEach((h) => {
-					const icon = h.querySelector('.sort-icon');
-					icon.textContent = h.getAttribute('data-sort') === currentSort ? '↓' : '';
-				});
-
-				sortData();
-			});
-
-			function sortData() {
-				// Sort table rows with performance optimization
-				const rows = Array.from(tableBody.querySelectorAll('tr'));
-				const fragment = document.createDocumentFragment();
-
-				rows.sort((a, b) => {
-					let aVal, bVal;
-
-					switch (currentSort) {
-						case 'gamesPlayed':
-							aVal = parseInt(a.getAttribute('data-games-played'));
-							bVal = parseInt(b.getAttribute('data-games-played'));
-							break;
-						case 'highScore':
-							aVal = parseInt(a.getAttribute('data-high-score'));
-							bVal = parseInt(b.getAttribute('data-high-score'));
-							break;
-						case 'totalPlayTime':
-							aVal = parseInt(a.getAttribute('data-total-play-time'));
-							bVal = parseInt(b.getAttribute('data-total-play-time'));
-							break;
-						case 'lastPlayed':
-							aVal = new Date(a.getAttribute('data-last-played')).getTime();
-							bVal = new Date(b.getAttribute('data-last-played')).getTime();
-							break;
-						case 'name':
-							aVal = a.getAttribute('data-name').toLowerCase();
-							bVal = b.getAttribute('data-name').toLowerCase();
-							break;
-					}
-
-					if (currentSort === 'name') {
-						return sortDirection === 'desc' ? bVal.localeCompare(aVal) : aVal.localeCompare(bVal);
-					}
-
-					return sortDirection === 'desc' ? bVal - aVal : aVal - bVal;
-				});
-
-				// Re-append sorted rows using fragment for better performance
-				rows.forEach((row) => fragment.appendChild(row));
-				tableBody.appendChild(fragment);
-
-				// Sort cards with performance optimization
-				const cards = Array.from(cardsContainer.querySelectorAll('.game-stat-card'));
-				const cardsFragment = document.createDocumentFragment();
-
-				cards.sort((a, b) => {
-					let aVal, bVal;
-
-					switch (currentSort) {
-						case 'gamesPlayed':
-							aVal = parseInt(a.getAttribute('data-games-played'));
-							bVal = parseInt(b.getAttribute('data-games-played'));
-							break;
-						case 'highScore':
-							aVal = parseInt(a.getAttribute('data-high-score'));
-							bVal = parseInt(b.getAttribute('data-high-score'));
-							break;
-						case 'totalPlayTime':
-							aVal = parseInt(a.getAttribute('data-total-play-time'));
-							bVal = parseInt(b.getAttribute('data-total-play-time'));
-							break;
-						case 'lastPlayed':
-							aVal = new Date(a.getAttribute('data-last-played')).getTime();
-							bVal = new Date(b.getAttribute('data-last-played')).getTime();
-							break;
-						case 'name':
-							aVal = a.getAttribute('data-name').toLowerCase();
-							bVal = b.getAttribute('data-name').toLowerCase();
-							break;
-					}
-
-					if (currentSort === 'name') {
-						return sortDirection === 'desc' ? bVal.localeCompare(aVal) : aVal.localeCompare(bVal);
-					}
-
-					return sortDirection === 'desc' ? bVal - aVal : aVal - bVal;
-				});
-
-				// Re-append sorted cards using fragment for better performance
-				cards.forEach((card) => cardsFragment.appendChild(card));
-				cardsContainer.appendChild(cardsFragment);
-			}
-		}); // Close requestAnimationFrame
-	});
-</script>
-
-<style is:inline>
-	.stats-page {
-		max-width: 1200px;
-		margin: 0 auto;
-		padding: 2rem 1rem;
-		min-height: calc(100vh - 200px);
-	}
-
-	.loading {
-		text-align: center;
-		color: var(--color-text-secondary);
-		padding: 3rem;
-		font-size: 1.1rem;
-		opacity: 0.7;
-	}
-
-	h1 {
-		font-size: clamp(2rem, 5vw, 3.5rem);
-		font-weight: 900;
-		margin-bottom: 0.5rem;
-		text-align: center;
-		position: relative;
-		padding-bottom: 2rem;
-		background: linear-gradient(
-			90deg,
-			var(--color-accent),
-			var(--color-accent-secondary),
-			var(--color-accent)
-		);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		background-size: 200% auto;
-		animation: shine 3s linear infinite;
-	}
-
-	@keyframes shine {
-		to {
-			background-position: 200% center;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		* {
-			animation-duration: 0.01ms !important;
-			animation-iteration-count: 1 !important;
-			transition-duration: 0.01ms !important;
-		}
-	}
-
-	h1::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 100px;
-		height: 4px;
-		background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
-		border-radius: 2px;
-	}
-
-	h2 {
-		font-size: 1.5rem;
-		font-weight: 800;
-		margin-bottom: 2rem;
-		color: var(--color-text);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		position: relative;
-		padding-left: 1.5rem;
-	}
-
-	h2::before {
-		content: '';
-		position: absolute;
-		left: 0;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 4px;
-		height: 70%;
-		background: var(--color-accent);
-		border-radius: 2px;
-	}
-
-	/* Global Stats Section */
-	.global-stats {
-		display: flex;
-		gap: 1rem;
-		margin-bottom: 3rem;
-		padding: 1.5rem 0;
-		overflow-x: auto;
-		scrollbar-width: thin;
-		scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
-	}
-
-	.global-stats::-webkit-scrollbar {
-		height: 6px;
-	}
-
-	.global-stats::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.global-stats::-webkit-scrollbar-thumb {
-		background: rgba(255, 255, 255, 0.1);
-		border-radius: 3px;
-	}
-
-	.stat-card {
-		flex: 1;
-		min-width: 140px;
-		position: relative;
-		background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
-		border: 1px solid rgba(255, 255, 255, 0.06);
-		border-radius: 1rem;
-		padding: 1.25rem 1rem;
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		transition:
-			transform 0.2s ease,
-			border-color 0.2s ease;
-		overflow: hidden;
-	}
-
-	.stat-card::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		height: 3px;
-		background: linear-gradient(90deg, transparent, currentColor, transparent);
-		opacity: 0;
-		transition: opacity 0.2s ease;
-	}
-
-	.stat-card:hover {
-		transform: translateY(-4px);
-		border-color: rgba(255, 255, 255, 0.12);
-	}
-
-	.stat-card:hover::before {
-		opacity: 1;
-	}
-
-	.stat-icon {
-		font-size: 2rem;
-		flex-shrink: 0;
-	}
-
-	.stat-content {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		min-width: 0;
-	}
-
-	.stat-number {
-		font-size: 1.5rem;
-		font-weight: 900;
-		line-height: 1;
-		letter-spacing: -0.02em;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.stat-label {
-		font-size: 0.75rem;
-		color: var(--color-text-secondary);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		opacity: 0.7;
-		white-space: nowrap;
-	}
-
-	.total-games {
-		--card-color: #60a5fa;
-		color: var(--card-color);
-	}
-
-	.total-time {
-		--card-color: #4ade80;
-		color: var(--card-color);
-	}
-
-	.favorite {
-		--card-color: #f87171;
-		color: var(--card-color);
-	}
-
-	.games-tried {
-		--card-color: #fbbf24;
-		color: var(--card-color);
-	}
-
-	/* Games List Section */
-	.games-stats {
-		margin-bottom: 3rem;
-	}
-
-	.games-list {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-		gap: 2rem;
-	}
-
-	.game-stat-card {
-		background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
-		border: 1px solid rgba(255, 255, 255, 0.08);
-		border-radius: 1.5rem;
-		padding: 0;
-		overflow: hidden;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		position: relative;
-	}
-
-	.game-stat-card::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		background: linear-gradient(135deg, transparent 40%, rgba(0, 255, 136, 0.05));
-		opacity: 0;
-		transition: opacity 0.3s ease;
-	}
-
-	.game-stat-card:hover {
-		transform: translateY(-8px);
-		border-color: rgba(0, 255, 136, 0.3);
-		box-shadow:
-			0 20px 40px rgba(0, 0, 0, 0.4),
-			0 0 60px rgba(0, 255, 136, 0.1);
-	}
-
-	.game-stat-card:hover::after {
-		opacity: 1;
-	}
-
-	.game-header {
-		display: flex;
-		gap: 1.5rem;
-		padding: 1.5rem;
-		background: rgba(0, 0, 0, 0.3);
-		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-	}
-
-	.game-thumb {
-		width: 100px;
-		height: 75px;
-		object-fit: cover;
-		border-radius: 0.75rem;
-		border: 2px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.game-info {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.game-info h3 {
-		margin: 0 0 0.5rem 0;
-		font-size: 1.4rem;
-		font-weight: 800;
-		color: var(--color-text);
-		letter-spacing: -0.02em;
-	}
-
-	.last-played {
-		font-size: 0.85rem;
-		color: var(--color-text-secondary);
-		opacity: 0.7;
-	}
-
-	.game-stats-grid {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 1px;
-		background: rgba(255, 255, 255, 0.05);
-		padding: 1px;
-		margin: 1.5rem;
-		border-radius: 0.75rem;
-		overflow: hidden;
-	}
-
-	.mini-stat {
-		background: rgba(0, 0, 0, 0.4);
-		padding: 1.25rem 0.75rem;
-		text-align: center;
-		position: relative;
-		overflow: hidden;
-	}
-
-	.mini-stat::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 40px;
-		height: 2px;
-		background: currentColor;
-		opacity: 0.3;
-	}
-
-	.mini-stat:nth-child(1) {
-		color: #60a5fa;
-	}
-	.mini-stat:nth-child(2) {
-		color: #4ade80;
-	}
-	.mini-stat:nth-child(3) {
-		color: #fbbf24;
-	}
-
-	.mini-label {
-		display: block;
-		font-size: 0.7rem;
-		color: var(--color-text-secondary);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		margin-bottom: 0.5rem;
-		opacity: 0.6;
-	}
-
-	.mini-value {
-		display: block;
-		font-size: 1.5rem;
-		font-weight: 900;
-		letter-spacing: -0.02em;
-	}
-
-	/* Achievements */
-	.achievements-section {
-		padding: 1.5rem;
-		border-top: 1px solid rgba(255, 255, 255, 0.05);
-	}
-
-	.achievements-section h4 {
-		font-size: 0.9rem;
-		margin-bottom: 1rem;
-		color: var(--color-text);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		opacity: 0.8;
-	}
-
-	.achievement-badges {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.75rem;
-	}
-
-	.achievement-badge {
-		padding: 0.5rem 1rem;
-		background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
-		border: 1px solid rgba(255, 215, 0, 0.3);
-		border-radius: 2rem;
-		font-size: 0.85rem;
-		color: #fbbf24;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		transition: all 0.2s ease;
-	}
-
-	.achievement-badge:hover {
-		background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.1));
-		border-color: #fbbf24;
-		transform: translateY(-2px);
-		box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
-	}
-
-	/* Play Again Button */
-	.play-again-btn {
-		display: block;
-		margin: 1.5rem;
-		padding: 1rem;
-		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
-		color: #000;
-		text-decoration: none;
-		border-radius: 0.75rem;
-		font-weight: 700;
-		text-align: center;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		font-size: 0.9rem;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		position: relative;
-		overflow: hidden;
-	}
-
-	.play-again-btn::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: -100%;
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-		transition: left 0.5s ease;
-	}
-
-	.play-again-btn:hover {
-		transform: translateY(-2px);
-		box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);
-	}
-
-	.play-again-btn:hover::before {
-		left: 100%;
-	}
-
-	/* Empty State */
-	.empty-state {
-		text-align: center;
-		padding: 5rem 2rem;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 2rem;
-	}
-
-	.empty-state::before {
-		content: '🎮';
-		font-size: 5rem;
-		opacity: 0.2;
-	}
-
-	.empty-state p {
-		font-size: 1.25rem;
-		color: var(--color-text-secondary);
-		max-width: 500px;
-		line-height: 1.6;
-	}
-
-	.cta-button {
-		display: inline-block;
-		padding: 1rem 3rem;
-		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
-		color: #000;
-		text-decoration: none;
-		border-radius: 3rem;
-		font-weight: 800;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		position: relative;
-		overflow: hidden;
-	}
-
-	.cta-button::before {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 0;
-		height: 0;
-		background: rgba(255, 255, 255, 0.2);
-		border-radius: 50%;
-		transform: translate(-50%, -50%);
-		transition:
-			width 0.6s ease,
-			height 0.6s ease;
-	}
-
-	.cta-button:hover {
-		transform: translateY(-3px);
-		box-shadow: 0 15px 40px rgba(0, 255, 136, 0.4);
-	}
-
-	.cta-button:hover::before {
-		width: 300px;
-		height: 300px;
-	}
-
-	/* Animations - Optimized for Performance */
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.stat-card {
-		animation: fadeIn 0.3s ease backwards;
-		will-change: transform;
-	}
-
-	.stat-card:nth-child(1) {
-		animation-delay: 0.05s;
-	}
-	.stat-card:nth-child(2) {
-		animation-delay: 0.1s;
-	}
-	.stat-card:nth-child(3) {
-		animation-delay: 0.15s;
-	}
-	.stat-card:nth-child(4) {
-		animation-delay: 0.2s;
-	}
-
-	.game-stat-card {
-		animation: fadeIn 0.3s ease backwards;
-		contain: layout style paint;
-	}
-
-	/* Table Controls */
-	.table-controls {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 1.5rem;
-		gap: 1rem;
-		flex-wrap: wrap;
-	}
-
-	.view-toggle {
-		display: flex;
-		background: rgba(255, 255, 255, 0.05);
-		border-radius: 0.5rem;
-		padding: 0.25rem;
-		gap: 0.25rem;
-	}
-
-	.view-btn {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 1rem;
-		background: transparent;
-		border: none;
-		color: var(--color-text-secondary);
-		cursor: pointer;
-		border-radius: 0.375rem;
-		transition: all 0.2s ease;
-		font-size: 0.875rem;
-		font-weight: 600;
-	}
-
-	.view-btn svg {
-		width: 16px;
-		height: 16px;
-		opacity: 0.7;
-	}
-
-	.view-btn.active {
-		background: var(--color-accent);
-		color: #000;
-	}
-
-	.view-btn:hover:not(.active) {
-		background: rgba(255, 255, 255, 0.1);
-		color: var(--color-text);
-	}
-
-	.sort-control {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-	}
-
-	.sort-control label {
-		font-size: 0.875rem;
-		color: var(--color-text-secondary);
-		font-weight: 500;
-	}
-
-	.sort-select {
-		padding: 0.5rem 2rem 0.5rem 1rem;
-		background: rgba(255, 255, 255, 0.05);
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		border-radius: 0.5rem;
-		color: var(--color-text);
-		font-size: 0.875rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		appearance: none;
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8.5L1.5 4h9L6 8.5z'/%3E%3C/svg%3E");
-		background-repeat: no-repeat;
-		background-position: right 0.75rem center;
-	}
-
-	.sort-select:hover {
-		background-color: rgba(255, 255, 255, 0.08);
-		border-color: rgba(255, 255, 255, 0.2);
-	}
-
-	.sort-select:focus {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 2px;
-	}
-
-	/* Table Styles */
-	.table-container {
-		overflow-x: auto;
-		background: rgba(255, 255, 255, 0.02);
-		border-radius: 1rem;
-		border: 1px solid rgba(255, 255, 255, 0.05);
-	}
-
-	.stats-table {
-		width: 100%;
-		border-collapse: collapse;
-	}
-
-	.stats-table thead {
-		background: rgba(0, 0, 0, 0.3);
-		border-bottom: 2px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.stats-table th {
-		padding: 1rem 1.5rem;
-		text-align: left;
-		font-weight: 700;
-		font-size: 0.875rem;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--color-text-secondary);
-		white-space: nowrap;
-	}
-
-	.stats-table th.sortable {
-		cursor: pointer;
-		user-select: none;
-		transition: color 0.2s ease;
-	}
-
-	.stats-table th.sortable:hover {
-		color: var(--color-text);
-	}
-
-	.sort-icon {
-		display: inline-block;
-		margin-left: 0.5rem;
-		color: var(--color-accent);
-		font-size: 0.75rem;
-	}
-
-	.th-numeric {
-		text-align: center;
-	}
-
-	.th-date {
-		text-align: center;
-	}
-
-	.th-achievements {
-		text-align: center;
-	}
-
-	.th-action {
-		text-align: center;
-	}
-
-	.stats-table tbody tr {
-		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-		transition: background 0.2s ease;
-	}
-
-	.stats-table tbody tr:hover {
-		background: rgba(255, 255, 255, 0.03);
-	}
-
-	.stats-table td {
-		padding: 1rem 1.5rem;
-		font-size: 0.9rem;
-	}
-
-	.td-game {
-		min-width: 200px;
-	}
-
-	.game-cell {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.game-thumb-small {
-		width: 48px;
-		height: 36px;
-		object-fit: cover;
-		border-radius: 0.5rem;
-		border: 1px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.game-thumb-placeholder {
-		width: 48px;
-		height: 36px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: rgba(255, 255, 255, 0.05);
-		border-radius: 0.5rem;
-		font-size: 1.5rem;
-		opacity: 0.5;
-	}
-
-	.game-name {
-		font-weight: 600;
-		color: var(--color-text);
-	}
-
-	.td-numeric {
-		text-align: center;
-	}
-
-	.stat-value {
-		font-weight: 700;
-		color: var(--color-text);
-	}
-
-	.highlight-score {
-		color: var(--color-accent);
-		font-size: 1rem;
-	}
-
-	.td-date {
-		text-align: center;
-	}
-
-	.date-value {
-		color: var(--color-text-secondary);
-		font-size: 0.85rem;
-	}
-
-	.td-achievements {
-		text-align: center;
-	}
-
-	.achievements-compact {
-		position: relative;
-		display: inline-block;
-	}
-
-	.achievement-count {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.25rem 0.75rem;
-		background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
-		border: 1px solid rgba(255, 215, 0, 0.3);
-		border-radius: 1rem;
-		font-size: 0.85rem;
-		color: #fbbf24;
-		cursor: help;
-		transition: all 0.2s ease;
-	}
-
-	.achievement-count:hover {
-		background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.1));
-		transform: translateY(-1px);
-	}
-
-	.achievements-tooltip {
-		position: absolute;
-		top: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		margin-top: 0.5rem;
-		background: rgba(0, 0, 0, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		border-radius: 0.75rem;
-		padding: 1rem;
-		min-width: 250px;
-		display: none;
-		z-index: 10;
-		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-	}
-
-	.achievements-compact:hover .achievements-tooltip {
-		display: block;
-	}
-
-	.tooltip-achievement {
-		display: flex;
-		align-items: start;
-		gap: 0.75rem;
-		padding: 0.5rem 0;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-	}
-
-	.tooltip-achievement:last-child {
-		border-bottom: none;
-	}
-
-	.tooltip-icon {
-		font-size: 1.25rem;
-		flex-shrink: 0;
-	}
-
-	.tooltip-name {
-		font-weight: 600;
-		color: #fbbf24;
-		margin-bottom: 0.25rem;
-	}
-
-	.tooltip-desc {
-		font-size: 0.85rem;
-		color: var(--color-text-secondary);
-		line-height: 1.4;
-	}
-
-	.no-achievements {
-		color: var(--color-text-secondary);
-		opacity: 0.5;
-	}
-
-	.td-action {
-		text-align: center;
-	}
-
-	.play-btn-small {
-		display: inline-block;
-		padding: 0.5rem 1rem;
-		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
-		color: #000;
-		text-decoration: none;
-		border-radius: 0.5rem;
-		font-weight: 600;
-		font-size: 0.85rem;
-		transition: all 0.2s ease;
-		white-space: nowrap;
-	}
-
-	.play-btn-small:hover {
-		transform: translateY(-2px);
-		box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
-	}
-
-	/* Responsive */
-	@media (max-width: 768px) {
-		.stats-page {
-			padding: 1.5rem 0.75rem;
-		}
-
-		h1 {
-			font-size: 2rem;
-		}
-
-		.global-stats {
-			gap: 0.75rem;
-			padding: 1rem 0;
-		}
-
-		.stat-card {
-			min-width: 120px;
-			padding: 1rem 0.75rem;
-			gap: 0.75rem;
-		}
-
-		.stat-icon {
-			font-size: 1.75rem;
-		}
-
-		.stat-number {
-			font-size: 1.25rem;
-		}
-
-		.stat-label {
-			font-size: 0.7rem;
-		}
-
-		.games-list {
-			grid-template-columns: 1fr;
-			gap: 1.5rem;
-		}
-
-		.game-stats-grid {
-			margin: 1rem;
-		}
-
-		.game-header {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		.game-thumb {
-			width: 120px;
-			height: 90px;
-			margin: 0 auto;
-		}
-	}
-
-	@media (max-width: 480px) {
-		.global-stats {
-			gap: 0.5rem;
-		}
-
-		.stat-card {
-			min-width: 100px;
-			padding: 0.75rem 0.5rem;
-			flex-direction: column;
-			text-align: center;
-		}
-
-		.stat-icon {
-			font-size: 1.5rem;
-		}
-
-		.stat-number {
-			font-size: 1.1rem;
-		}
-
-		.mini-stat {
-			padding: 1rem 0.5rem;
-		}
-
-		.mini-value {
-			font-size: 1.25rem;
-		}
-
-		/* Table Responsive */
-		.table-controls {
-			flex-direction: column;
-			align-items: stretch;
-		}
-
-		.view-toggle {
-			width: 100%;
-			justify-content: center;
-		}
-
-		.sort-control {
-			width: 100%;
-			justify-content: space-between;
-		}
-
-		.sort-select {
-			flex: 1;
-			max-width: 200px;
-		}
-
-		.table-container {
-			border-radius: 0.75rem;
-			margin: 0 -0.75rem;
-			border-left: none;
-			border-right: none;
-		}
-
-		.stats-table {
-			font-size: 0.85rem;
-		}
-
-		.stats-table th,
-		.stats-table td {
-			padding: 0.75rem 0.5rem;
-		}
-
-		.th-achievements,
-		.td-achievements {
-			display: none;
-		}
-
-		.game-thumb-small {
-			width: 40px;
-			height: 30px;
-		}
-
-		.game-thumb-placeholder {
-			width: 40px;
-			height: 30px;
-			font-size: 1.25rem;
-		}
-
-		.game-name {
-			font-size: 0.875rem;
-		}
-
-		.stat-value {
-			font-size: 0.875rem;
-		}
-
-		.highlight-score {
-			font-size: 0.9rem;
-		}
-
-		.date-value {
-			font-size: 0.8rem;
-		}
-
-		.play-btn-small {
-			padding: 0.375rem 0.75rem;
-			font-size: 0.8rem;
-		}
-	}
-
-	@media (max-width: 480px) {
-		.stats-table th:nth-child(4),
-		.stats-table td:nth-child(4) {
-			display: none;
-		}
-
-		.game-cell {
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 0.5rem;
-		}
-
-		.td-game {
-			min-width: unset;
-		}
-	}
-</style>
diff --git a/games/mana-games/apps/web/src/pages/submit.astro b/games/mana-games/apps/web/src/pages/submit.astro
deleted file mode 100644
index ac928afa2..000000000
--- a/games/mana-games/apps/web/src/pages/submit.astro
+++ /dev/null
@@ -1,754 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
----
-
-<Layout
-	title="Spiel einreichen - MANA Games"
-	description="Reiche dein eigenes Spiel für die MANA Games Community ein"
->
-	<main>
-		<div class="page-header">
-			<h1>Community Spiel einreichen</h1>
-			<p>Teile dein selbst erstelltes Spiel mit der MANA Games Community!</p>
-		</div>
-
-		<div class="submit-container">
-			<div class="guidelines">
-				<h2>📋 Richtlinien für Einreichungen</h2>
-				<ul>
-					<li>Das Spiel muss in einer einzelnen HTML-Datei funktionieren</li>
-					<li>Keine externen Abhängigkeiten (CDNs sind erlaubt)</li>
-					<li>Maximale Dateigröße: 1MB für HTML, 500KB für Screenshot</li>
-					<li>Das Spiel muss familienfreundlich sein</li>
-					<li>Kein urheberrechtlich geschütztes Material</li>
-					<li>Das Spiel sollte die postMessage API für Score-Integration nutzen</li>
-				</ul>
-			</div>
-
-			<form id="submitForm" class="submit-form">
-				<div class="form-section">
-					<h3>Spiel-Informationen</h3>
-
-					<div class="form-group">
-						<label for="gameTitle">Spiel-Titel *</label>
-						<input
-							type="text"
-							id="gameTitle"
-							name="gameTitle"
-							required
-							maxlength="50"
-							placeholder="z.B. Space Defender"
-						/>
-					</div>
-
-					<div class="form-group">
-						<label for="gameDescription">Beschreibung *</label>
-						<textarea
-							id="gameDescription"
-							name="gameDescription"
-							required
-							maxlength="200"
-							rows="3"
-							placeholder="Kurze Beschreibung deines Spiels..."></textarea>
-					</div>
-
-					<div class="form-group">
-						<label for="gameControls">Steuerung *</label>
-						<input
-							type="text"
-							id="gameControls"
-							name="gameControls"
-							required
-							placeholder="z.B. Pfeiltasten zum Bewegen, Leertaste zum Schießen"
-						/>
-					</div>
-
-					<div class="form-row">
-						<div class="form-group">
-							<label for="gameDifficulty">Schwierigkeit *</label>
-							<select id="gameDifficulty" name="gameDifficulty" required>
-								<option value="">Wähle...</option>
-								<option value="Einfach">Einfach</option>
-								<option value="Mittel">Mittel</option>
-								<option value="Schwer">Schwer</option>
-							</select>
-						</div>
-
-						<div class="form-group">
-							<label for="gameComplexity">Komplexität *</label>
-							<select id="gameComplexity" name="gameComplexity" required>
-								<option value="">Wähle...</option>
-								<option value="Minimal">Minimal</option>
-								<option value="Einfach">Einfach</option>
-								<option value="Mittel">Mittel</option>
-								<option value="Komplex">Komplex</option>
-							</select>
-						</div>
-					</div>
-
-					<div class="form-group">
-						<label for="gameTags">Tags (kommagetrennt) *</label>
-						<input
-							type="text"
-							id="gameTags"
-							name="gameTags"
-							required
-							placeholder="z.B. Arcade, Shooter, Retro"
-						/>
-					</div>
-				</div>
-
-				<div class="form-section">
-					<h3>Dateien hochladen</h3>
-
-					<div class="form-group">
-						<label for="htmlFile">HTML-Datei *</label>
-						<div class="file-upload">
-							<input type="file" id="htmlFile" name="htmlFile" accept=".html,.htm" required />
-							<div class="file-info">
-								<span class="file-name">Keine Datei ausgewählt</span>
-								<span class="file-size"></span>
-							</div>
-						</div>
-						<div class="file-preview" id="codePreview" style="display: none;">
-							<h4>Code-Vorschau:</h4>
-							<pre><code id="codeContent" /></pre>
-						</div>
-					</div>
-
-					<div class="form-group">
-						<label for="screenshotFile">Screenshot (JPG/PNG) *</label>
-						<div class="file-upload">
-							<input
-								type="file"
-								id="screenshotFile"
-								name="screenshotFile"
-								accept=".jpg,.jpeg,.png"
-								required
-							/>
-							<div class="file-info">
-								<span class="file-name">Keine Datei ausgewählt</span>
-								<span class="file-size"></span>
-							</div>
-						</div>
-						<div class="image-preview" id="imagePreview" style="display: none;">
-							<img id="previewImage" alt="Screenshot-Vorschau" />
-						</div>
-					</div>
-				</div>
-
-				<div class="form-section">
-					<h3>Deine Informationen</h3>
-
-					<div class="form-group">
-						<label for="authorName">Dein Name/Pseudonym *</label>
-						<input
-							type="text"
-							id="authorName"
-							name="authorName"
-							required
-							placeholder="Dein Name oder Pseudonym (wird öffentlich angezeigt)"
-						/>
-					</div>
-
-					<div class="form-group">
-						<label for="authorEmail">E-Mail (für Rückfragen)</label>
-						<input
-							type="email"
-							id="authorEmail"
-							name="authorEmail"
-							placeholder="deine.email@beispiel.de (nur für Rückfragen, nicht öffentlich)"
-						/>
-					</div>
-
-					<div class="form-group">
-						<label for="authorGithub">GitHub Username</label>
-						<input
-							type="text"
-							id="authorGithub"
-							name="authorGithub"
-							placeholder="Dein GitHub Username für Attribution (optional)"
-						/>
-					</div>
-				</div>
-
-				<div class="form-section">
-					<div class="form-group checkbox-group">
-						<label>
-							<input type="checkbox" id="acceptTerms" name="acceptTerms" required />
-							<span
-								>Ich bestätige, dass dieses Spiel meine eigene Arbeit ist und ich die Rechte
-								besitze, es zu teilen.</span
-							>
-						</label>
-					</div>
-				</div>
-
-				<div class="form-actions">
-					<button type="button" id="validateBtn" class="btn-secondary">
-						<span class="icon">🔍</span>
-						Validieren
-					</button>
-					<button type="submit" id="submitBtn" class="btn-primary" disabled>
-						<span class="icon">📤</span>
-						Einreichen
-					</button>
-				</div>
-			</form>
-
-			<div id="validationResults" class="validation-results" style="display: none;">
-				<h3>Validierungsergebnisse</h3>
-				<div class="validation-content"></div>
-			</div>
-		</div>
-	</main>
-</Layout>
-
-<style>
-	.submit-container {
-		max-width: 800px;
-		margin: 0 auto;
-		padding: 2rem;
-	}
-
-	.guidelines {
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
-		border-radius: 8px;
-		padding: 1.5rem;
-		margin-bottom: 2rem;
-	}
-
-	.guidelines h2 {
-		color: #00ff88;
-		margin-bottom: 1rem;
-		font-size: 1.2rem;
-	}
-
-	.guidelines ul {
-		list-style: none;
-		padding: 0;
-	}
-
-	.guidelines li {
-		padding: 0.5rem 0;
-		padding-left: 1.5rem;
-		position: relative;
-	}
-
-	.guidelines li::before {
-		content: '✓';
-		position: absolute;
-		left: 0;
-		color: #00ff88;
-	}
-
-	.submit-form {
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
-		border-radius: 8px;
-		padding: 2rem;
-	}
-
-	.form-section {
-		margin-bottom: 2rem;
-	}
-
-	.form-section:last-child {
-		margin-bottom: 0;
-	}
-
-	.form-section h3 {
-		color: #00ff88;
-		margin-bottom: 1rem;
-		font-size: 1.1rem;
-	}
-
-	.form-group {
-		margin-bottom: 1.5rem;
-	}
-
-	.form-group label {
-		display: block;
-		margin-bottom: 0.5rem;
-		color: #ffffff;
-		font-weight: 500;
-	}
-
-	.form-group input[type='text'],
-	.form-group input[type='email'],
-	.form-group textarea,
-	.form-group select {
-		width: 100%;
-		padding: 0.75rem;
-		background: #0a0a0a;
-		border: 1px solid #2a2a2a;
-		border-radius: 4px;
-		color: #ffffff;
-		font-size: 1rem;
-	}
-
-	.form-group input:focus,
-	.form-group textarea:focus,
-	.form-group select:focus {
-		outline: none;
-		border-color: #00ff88;
-		box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.1);
-	}
-
-	.form-row {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 1rem;
-	}
-
-	.file-upload {
-		position: relative;
-		background: #0a0a0a;
-		border: 2px dashed #2a2a2a;
-		border-radius: 4px;
-		padding: 1rem;
-		text-align: center;
-		cursor: pointer;
-		transition: all 0.3s ease;
-	}
-
-	.file-upload:hover {
-		border-color: #00ff88;
-		background: rgba(0, 255, 136, 0.05);
-	}
-
-	.file-upload input[type='file'] {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-		opacity: 0;
-		cursor: pointer;
-	}
-
-	.file-info {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.file-name {
-		font-weight: 500;
-	}
-
-	.file-size {
-		font-size: 0.9rem;
-		color: #888;
-	}
-
-	.file-preview,
-	.image-preview {
-		margin-top: 1rem;
-		background: #0a0a0a;
-		border: 1px solid #2a2a2a;
-		border-radius: 4px;
-		padding: 1rem;
-	}
-
-	.file-preview h4 {
-		color: #00ff88;
-		margin-bottom: 0.5rem;
-		font-size: 0.9rem;
-	}
-
-	.file-preview pre {
-		max-height: 200px;
-		overflow-y: auto;
-		background: #000;
-		padding: 0.5rem;
-		border-radius: 4px;
-		font-size: 0.8rem;
-	}
-
-	.image-preview img {
-		max-width: 100%;
-		max-height: 300px;
-		display: block;
-		margin: 0 auto;
-		border-radius: 4px;
-	}
-
-	.checkbox-group {
-		display: flex;
-		align-items: flex-start;
-		gap: 0.5rem;
-	}
-
-	.checkbox-group input[type='checkbox'] {
-		margin-top: 0.25rem;
-	}
-
-	.form-actions {
-		display: flex;
-		gap: 1rem;
-		justify-content: flex-end;
-		margin-top: 2rem;
-	}
-
-	.btn-primary,
-	.btn-secondary {
-		padding: 0.75rem 1.5rem;
-		border: none;
-		border-radius: 4px;
-		font-size: 1rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.3s ease;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.btn-primary {
-		background: #00ff88;
-		color: #0a0a0a;
-	}
-
-	.btn-primary:hover:not(:disabled) {
-		background: #00cc6a;
-		transform: translateY(-2px);
-	}
-
-	.btn-primary:disabled {
-		background: #2a2a2a;
-		color: #666;
-		cursor: not-allowed;
-	}
-
-	.btn-secondary {
-		background: #2a2a2a;
-		color: #ffffff;
-	}
-
-	.btn-secondary:hover {
-		background: #3a3a3a;
-	}
-
-	.validation-results {
-		margin-top: 2rem;
-		background: #1a1a1a;
-		border: 1px solid #2a2a2a;
-		border-radius: 8px;
-		padding: 1.5rem;
-	}
-
-	.validation-results h3 {
-		color: #00ff88;
-		margin-bottom: 1rem;
-	}
-
-	.validation-item {
-		padding: 0.5rem 0;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.validation-item.success {
-		color: #00ff88;
-	}
-
-	.validation-item.error {
-		color: #ff4444;
-	}
-
-	.validation-item.warning {
-		color: #ffaa00;
-	}
-
-	@media (max-width: 768px) {
-		.submit-container {
-			padding: 1rem;
-		}
-
-		.form-row {
-			grid-template-columns: 1fr;
-		}
-
-		.form-actions {
-			flex-direction: column;
-		}
-
-		.btn-primary,
-		.btn-secondary {
-			width: 100%;
-			justify-content: center;
-		}
-	}
-</style>
-
-<script>
-	// Form elements
-	const form = document.getElementById('submitForm') as HTMLFormElement;
-	const htmlFileInput = document.getElementById('htmlFile') as HTMLInputElement;
-	const screenshotFileInput = document.getElementById('screenshotFile') as HTMLInputElement;
-	const validateBtn = document.getElementById('validateBtn') as HTMLButtonElement;
-	const submitBtn = document.getElementById('submitBtn') as HTMLButtonElement;
-	const validationResults = document.getElementById('validationResults') as HTMLDivElement;
-	const validationContent = validationResults.querySelector(
-		'.validation-content'
-	) as HTMLDivElement;
-
-	// File preview elements
-	const codePreview = document.getElementById('codePreview') as HTMLDivElement;
-	const codeContent = document.getElementById('codeContent') as HTMLElement;
-	const imagePreview = document.getElementById('imagePreview') as HTMLDivElement;
-	const previewImage = document.getElementById('previewImage') as HTMLImageElement;
-
-	// Validation state
-	let isValidated = false;
-	let validationPassed = false;
-
-	// File handling
-	htmlFileInput.addEventListener('change', async (e) => {
-		const file = (e.target as HTMLInputElement).files?.[0];
-		if (!file) return;
-
-		const fileInfo = htmlFileInput.parentElement?.querySelector('.file-info');
-		const fileName = fileInfo?.querySelector('.file-name');
-		const fileSize = fileInfo?.querySelector('.file-size');
-
-		if (fileName) fileName.textContent = file.name;
-		if (fileSize) fileSize.textContent = `${(file.size / 1024).toFixed(1)} KB`;
-
-		// Show code preview
-		const text = await file.text();
-		codeContent.textContent = text.substring(0, 1000) + (text.length > 1000 ? '...' : '');
-		codePreview.style.display = 'block';
-
-		// Reset validation
-		isValidated = false;
-		validationPassed = false;
-		submitBtn.disabled = true;
-		validationResults.style.display = 'none';
-	});
-
-	screenshotFileInput.addEventListener('change', async (e) => {
-		const file = (e.target as HTMLInputElement).files?.[0];
-		if (!file) return;
-
-		const fileInfo = screenshotFileInput.parentElement?.querySelector('.file-info');
-		const fileName = fileInfo?.querySelector('.file-name');
-		const fileSize = fileInfo?.querySelector('.file-size');
-
-		if (fileName) fileName.textContent = file.name;
-		if (fileSize) fileSize.textContent = `${(file.size / 1024).toFixed(1)} KB`;
-
-		// Show image preview
-		const reader = new FileReader();
-		reader.onload = (e) => {
-			previewImage.src = e.target?.result as string;
-			imagePreview.style.display = 'block';
-		};
-		reader.readAsDataURL(file);
-
-		// Reset validation
-		isValidated = false;
-		validationPassed = false;
-		submitBtn.disabled = true;
-		validationResults.style.display = 'none';
-	});
-
-	// Validation
-	validateBtn.addEventListener('click', async () => {
-		const htmlFile = htmlFileInput.files?.[0];
-		const screenshotFile = screenshotFileInput.files?.[0];
-
-		if (!htmlFile || !screenshotFile) {
-			alert('Bitte lade beide Dateien hoch bevor du validierst.');
-			return;
-		}
-
-		validationContent.innerHTML = '<div class="validation-item">🔄 Validierung läuft...</div>';
-		validationResults.style.display = 'block';
-
-		const results: Array<{ type: 'success' | 'error' | 'warning'; message: string }> = [];
-
-		// File size checks
-		if (htmlFile.size > 1024 * 1024) {
-			results.push({ type: 'error', message: 'HTML-Datei ist zu groß (max. 1MB)' });
-		} else {
-			results.push({ type: 'success', message: 'HTML-Dateigröße OK' });
-		}
-
-		if (screenshotFile.size > 512 * 1024) {
-			results.push({ type: 'error', message: 'Screenshot ist zu groß (max. 500KB)' });
-		} else {
-			results.push({ type: 'success', message: 'Screenshot-Größe OK' });
-		}
-
-		// HTML content checks
-		const htmlContent = await htmlFile.text();
-
-		// Check for required game structure
-		if (htmlContent.includes('<canvas') || htmlContent.includes('<game')) {
-			results.push({ type: 'success', message: 'Spiel-Element gefunden' });
-		} else {
-			results.push({ type: 'warning', message: 'Kein Canvas-Element gefunden' });
-		}
-
-		// Check for postMessage integration
-		if (htmlContent.includes('postMessage')) {
-			results.push({ type: 'success', message: 'postMessage-Integration gefunden' });
-		} else {
-			results.push({
-				type: 'warning',
-				message: 'Keine postMessage-Integration gefunden (empfohlen für Scores)',
-			});
-		}
-
-		// Check for external dependencies
-		const externalScripts = (htmlContent.match(/<script[^>]+src=['"](https?:\/\/[^'"]+)/g) || [])
-			.length;
-		if (externalScripts > 0) {
-			results.push({ type: 'warning', message: `${externalScripts} externe Script(s) gefunden` });
-		} else {
-			results.push({ type: 'success', message: 'Keine externen Abhängigkeiten' });
-		}
-
-		// Check for potentially malicious code
-		const suspiciousPatterns = [
-			'eval(',
-			'document.write(',
-			'innerHTML =',
-			'.cookie',
-			'localStorage.clear()',
-			'XMLHttpRequest',
-			'fetch(',
-		];
-
-		const foundSuspicious = suspiciousPatterns.filter((pattern) => htmlContent.includes(pattern));
-		if (foundSuspicious.length > 0) {
-			results.push({
-				type: 'warning',
-				message: `Potenziell unsicherer Code gefunden: ${foundSuspicious.join(', ')}`,
-			});
-		} else {
-			results.push({ type: 'success', message: 'Keine verdächtigen Code-Muster gefunden' });
-		}
-
-		// Display results
-		validationContent.innerHTML = results
-			.map((result) => {
-				const icon = result.type === 'success' ? '✅' : result.type === 'error' ? '❌' : '⚠️';
-				return `<div class="validation-item ${result.type}">${icon} ${result.message}</div>`;
-			})
-			.join('');
-
-		// Check if validation passed
-		const hasErrors = results.some((r) => r.type === 'error');
-		validationPassed = !hasErrors;
-		isValidated = true;
-		submitBtn.disabled = !validationPassed;
-
-		if (validationPassed) {
-			validationContent.innerHTML +=
-				'<div class="validation-item success" style="margin-top: 1rem; font-weight: bold;">✅ Validierung erfolgreich! Du kannst dein Spiel einreichen.</div>';
-		} else {
-			validationContent.innerHTML +=
-				'<div class="validation-item error" style="margin-top: 1rem; font-weight: bold;">❌ Bitte behebe die Fehler vor dem Einreichen.</div>';
-		}
-	});
-
-	// Form submission
-	form.addEventListener('submit', async (e) => {
-		e.preventDefault();
-
-		if (!isValidated || !validationPassed) {
-			alert('Bitte validiere dein Spiel zuerst!');
-			return;
-		}
-
-		submitBtn.disabled = true;
-		submitBtn.innerHTML = '<span class="icon">⏳</span> Wird eingereicht...';
-
-		try {
-			// Prepare form data
-			const formData = new FormData(form);
-
-			// Add files
-			const htmlFile = htmlFileInput.files?.[0];
-			const screenshotFile = screenshotFileInput.files?.[0];
-
-			if (!htmlFile || !screenshotFile) {
-				throw new Error('Dateien fehlen');
-			}
-
-			// Read file contents
-			const htmlContent = await htmlFile.text();
-			const screenshotBase64 = await new Promise<string>((resolve) => {
-				const reader = new FileReader();
-				reader.onload = (e) => resolve(e.target?.result as string);
-				reader.readAsDataURL(screenshotFile);
-			});
-
-			// Create submission data
-			const submission = {
-				title: formData.get('gameTitle'),
-				description: formData.get('gameDescription'),
-				controls: formData.get('gameControls'),
-				difficulty: formData.get('gameDifficulty'),
-				complexity: formData.get('gameComplexity'),
-				tags: (formData.get('gameTags') as string).split(',').map((t) => t.trim()),
-				author: {
-					name: formData.get('authorName'),
-					email: formData.get('authorEmail'),
-					github: formData.get('authorGithub'),
-				},
-				files: {
-					html: {
-						name: htmlFile.name,
-						content: htmlContent,
-					},
-					screenshot: {
-						name: screenshotFile.name,
-						content: screenshotBase64,
-					},
-				},
-				submittedAt: new Date().toISOString(),
-			};
-
-			// Send to backend API
-			const backendUrl = import.meta.env.PUBLIC_BACKEND_URL || 'http://localhost:3011';
-			const response = await fetch(`${backendUrl}/api/games/submit`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify(submission),
-			});
-
-			if (!response.ok) {
-				throw new Error('Einreichung fehlgeschlagen');
-			}
-
-			const result = await response.json();
-
-			// Show success message
-			alert(
-				`Vielen Dank! Dein Spiel "${submission.title}" wurde erfolgreich eingereicht. Du erhältst Updates über den Pull Request: ${result.prUrl}`
-			);
-
-			// Reset form
-			form.reset();
-			codePreview.style.display = 'none';
-			imagePreview.style.display = 'none';
-			validationResults.style.display = 'none';
-			isValidated = false;
-			validationPassed = false;
-		} catch (error) {
-			console.error('Submission error:', error);
-			alert('Fehler beim Einreichen. Bitte versuche es später erneut.');
-		} finally {
-			submitBtn.disabled = false;
-			submitBtn.innerHTML = '<span class="icon">📤</span> Einreichen';
-		}
-	});
-</script>
diff --git a/games/mana-games/apps/web/src/routes/(app)/+layout.svelte b/games/mana-games/apps/web/src/routes/(app)/+layout.svelte
new file mode 100644
index 000000000..31f297173
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/(app)/+layout.svelte
@@ -0,0 +1,292 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { locale } from 'svelte-i18n';
+	import { PillNavigation, CommandBar, SyncIndicator } from '@manacore/shared-ui';
+	import type {
+		PillNavItem,
+		PillDropdownItem,
+		CommandBarItem,
+		QuickAction,
+	} from '@manacore/shared-ui';
+	import { theme } from '$lib/stores/theme.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { userSettings } from '$lib/stores/user-settings.svelte';
+	import { games, getGameBySlug } from '$lib/data/games';
+	import {
+		THEME_DEFINITIONS,
+		DEFAULT_THEME_VARIANTS,
+		EXTENDED_THEME_VARIANTS,
+	} from '@manacore/shared-theme';
+	import type { ThemeVariant } from '@manacore/shared-theme';
+	import { filterHiddenNavItems } from '@manacore/shared-theme';
+	import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation';
+	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
+	import { getPillAppItems } from '@manacore/shared-branding';
+	import { setLocale, supportedLocales } from '$lib/i18n';
+	import { SessionExpiredBanner, AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui';
+	import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
+	import { gamesStore } from '$lib/data/local-store';
+	import {
+		tagLocalStore,
+		tagMutations,
+		useAllTags as useAllSharedTags,
+	} from '@manacore/shared-stores';
+
+	const allTags = useAllSharedTags();
+
+	let showGuestWelcome = $state(false);
+
+	function initGuestWelcome() {
+		if (!authStore.isAuthenticated && shouldShowGuestWelcome('mana-games')) {
+			showGuestWelcome = true;
+		}
+	}
+
+	const appItems = getPillAppItems('mana-games');
+
+	let { children } = $props();
+
+	let commandBarOpen = $state(false);
+
+	const commandBarQuickActions: QuickAction[] = [
+		{ id: 'home', label: 'Alle Spiele', icon: 'gamepad-2', href: '/', shortcut: '1' },
+		{ id: 'create', label: 'Spiel erstellen', icon: 'sparkles', href: '/create', shortcut: '2' },
+		{ id: 'community', label: 'Community', icon: 'users', href: '/community', shortcut: '3' },
+		{ id: 'stats', label: 'Statistiken', icon: 'bar-chart-3', href: '/stats', shortcut: '4' },
+		{ id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' },
+	];
+
+	async function handleCommandBarSearch(query: string): Promise<CommandBarItem[]> {
+		if (!query.trim()) return [];
+		const queryLower = query.toLowerCase();
+
+		return games
+			.filter(
+				(g) =>
+					g.title.toLowerCase().includes(queryLower) ||
+					g.tags.some((t) => t.toLowerCase().includes(queryLower))
+			)
+			.slice(0, 10)
+			.map((g) => ({
+				id: `game-${g.slug}`,
+				title: g.title,
+				subtitle: g.tags.join(', '),
+			}));
+	}
+
+	function handleCommandBarSelect(item: CommandBarItem) {
+		const slug = item.id.replace('game-', '');
+		goto(`/play/${slug}`);
+	}
+
+	let isCollapsed = $state(false);
+	let isDark = $derived(theme.isDark);
+
+	let pinnedThemes = $derived<ThemeVariant[]>(
+		(userSettings.theme?.pinnedThemes || []).filter((t): t is ThemeVariant =>
+			EXTENDED_THEME_VARIANTS.includes(t as ThemeVariant)
+		)
+	);
+
+	let visibleThemes = $derived<ThemeVariant[]>([...DEFAULT_THEME_VARIANTS, ...pinnedThemes]);
+
+	let themeVariantItems = $derived<PillDropdownItem[]>([
+		...visibleThemes.map((variant) => ({
+			id: variant,
+			label: THEME_DEFINITIONS[variant]?.label || variant,
+			icon: THEME_DEFINITIONS[variant]?.icon || '🎨',
+			onClick: () => theme.setVariant(variant),
+			active: (theme.variant || 'lume') === variant,
+		})),
+		{
+			id: 'all-themes',
+			label: 'Alle Themes',
+			icon: 'palette',
+			onClick: () => goto('/themes'),
+			active: false,
+		},
+	]);
+
+	let currentThemeVariantLabel = $derived(
+		THEME_DEFINITIONS[theme.variant]?.label || THEME_DEFINITIONS.lume?.label || 'Lume'
+	);
+
+	let currentLocale = $derived($locale || 'de');
+	function handleLocaleChange(newLocale: string) {
+		setLocale(newLocale as any);
+	}
+	let languageItems = $derived(
+		getLanguageDropdownItems(supportedLocales, currentLocale, handleLocaleChange)
+	);
+	let currentLanguageLabel = $derived(getCurrentLanguageLabel(currentLocale));
+
+	let userEmail = $derived(authStore.isAuthenticated ? authStore.user?.email || 'Menü' : '');
+
+	const baseNavItems: PillNavItem[] = [
+		{ href: '/', label: 'Spiele', icon: 'gamepad-2' },
+		{ href: '/create', label: 'Erstellen', icon: 'sparkles' },
+		{ href: '/community', label: 'Community', icon: 'users' },
+		{ href: '/stats', label: 'Statistiken', icon: 'bar-chart-3' },
+		{ href: '/settings', label: 'Einstellungen', icon: 'settings' },
+	];
+
+	const navItems = $derived(
+		filterHiddenNavItems('mana-games', baseNavItems, userSettings.nav?.hiddenNavItems || {})
+	);
+
+	function handleKeydown(event: KeyboardEvent) {
+		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+			event.preventDefault();
+			commandBarOpen = true;
+		}
+	}
+
+	function handleCollapsedChange(collapsed: boolean) {
+		isCollapsed = collapsed;
+		collapsedStore.set(collapsed);
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem('mana-games-nav-collapsed', String(collapsed));
+		}
+	}
+
+	function handleToggleTheme() {
+		theme.toggleMode();
+	}
+
+	function handleThemeModeChange(mode: 'light' | 'dark' | 'system') {
+		theme.setMode(mode);
+	}
+
+	async function handleLogout() {
+		await authStore.signOut();
+		goto('/login');
+	}
+
+	async function handleAuthReady() {
+		await Promise.all([gamesStore.initialize(), tagLocalStore.initialize()]);
+
+		if (authStore.isAuthenticated) {
+			const getToken = () => authStore.getValidToken();
+			gamesStore.startSync(getToken);
+			tagMutations.startSync(getToken);
+		}
+
+		const savedCollapsed = localStorage.getItem('mana-games-nav-collapsed');
+		if (savedCollapsed === 'true') {
+			isCollapsed = true;
+			collapsedStore.set(true);
+		}
+
+		initGuestWelcome();
+
+		if (authStore.isAuthenticated) {
+			await userSettings.load();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<AuthGate {authStore} {goto} allowGuest={true} onReady={handleAuthReady}>
+	<div class="layout-container">
+		<PillNavigation
+			items={navItems}
+			currentPath={$page.url.pathname}
+			appName="Mana Games"
+			homeRoute="/"
+			onToggleTheme={handleToggleTheme}
+			{isDark}
+			{isCollapsed}
+			onCollapsedChange={handleCollapsedChange}
+			showThemeToggle={true}
+			showThemeVariants={true}
+			{themeVariantItems}
+			{currentThemeVariantLabel}
+			themeMode={theme.mode}
+			onThemeModeChange={handleThemeModeChange}
+			showLanguageSwitcher={true}
+			{languageItems}
+			{currentLanguageLabel}
+			showLogout={authStore.isAuthenticated}
+			onLogout={handleLogout}
+			loginHref="/login"
+			primaryColor="#00ff88"
+			showAppSwitcher={true}
+			{appItems}
+			{userEmail}
+			settingsHref="/settings"
+			manaHref="/mana"
+			profileHref="/profile"
+			themesHref="/themes"
+			helpHref="/help"
+			allAppsHref="/apps"
+		/>
+
+		<main class="main-content bg-background">
+			<div class="content-wrapper">
+				{@render children()}
+			</div>
+		</main>
+
+		<CommandBar
+			bind:open={commandBarOpen}
+			onClose={() => (commandBarOpen = false)}
+			onSearch={handleCommandBarSearch}
+			onSelect={handleCommandBarSelect}
+			quickActions={commandBarQuickActions}
+			placeholder="Spiel suchen..."
+			emptyText="Keine Ergebnisse"
+			searchingText="Suche..."
+		/>
+	</div>
+
+	<GuestWelcomeModal
+		appId="mana-games"
+		visible={showGuestWelcome}
+		onClose={() => (showGuestWelcome = false)}
+		onLogin={() => goto('/login')}
+		onRegister={() => goto('/register')}
+		locale={($locale || 'de') === 'de' ? 'de' : 'en'}
+	/>
+
+	{#if authStore.isAuthenticated}
+		<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
+	{/if}
+	<SyncIndicator />
+</AuthGate>
+
+<style>
+	.layout-container {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	.main-content {
+		position: relative;
+		z-index: 0;
+		padding-bottom: 100px;
+	}
+
+	.content-wrapper {
+		max-width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+		padding: 1rem;
+		position: relative;
+		z-index: 0;
+	}
+
+	@media (min-width: 640px) {
+		.content-wrapper {
+			padding: 1.5rem;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.content-wrapper {
+			padding: 2rem;
+		}
+	}
+</style>
diff --git a/games/mana-games/apps/web/src/routes/(app)/+page.svelte b/games/mana-games/apps/web/src/routes/(app)/+page.svelte
new file mode 100644
index 000000000..ff7e4f615
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/(app)/+page.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { games, getAllTags } from '$lib/data/games';
+	import GameCard from '$lib/components/GameCard.svelte';
+
+	let searchQuery = $state('');
+	let selectedTag = $state<string | null>(null);
+
+	const allTags = getAllTags();
+
+	let filteredGames = $derived(() => {
+		let result = games;
+
+		if (searchQuery.trim()) {
+			const q = searchQuery.toLowerCase();
+			result = result.filter(
+				(g) =>
+					g.title.toLowerCase().includes(q) ||
+					g.description.toLowerCase().includes(q) ||
+					g.tags.some((t) => t.toLowerCase().includes(q))
+			);
+		}
+
+		if (selectedTag) {
+			result = result.filter((g) => g.tags.includes(selectedTag!));
+		}
+
+		return result;
+	});
+</script>
+
+<svelte:head>
+	<title>{$_('app.name')} - {$_('home.title')}</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<div>
+		<h1 class="text-2xl font-bold text-foreground">{$_('home.title')}</h1>
+		<p class="text-muted-foreground mt-1">{$_('home.subtitle')}</p>
+	</div>
+
+	<div class="flex flex-col sm:flex-row gap-3">
+		<input
+			type="text"
+			bind:value={searchQuery}
+			placeholder={$_('home.search')}
+			class="flex-1 rounded-lg border border-border bg-background px-4 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
+		/>
+	</div>
+
+	<div class="flex flex-wrap gap-2">
+		<button
+			class="text-xs px-3 py-1.5 rounded-full transition-colors {selectedTag === null
+				? 'bg-primary text-primary-foreground'
+				: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
+			onclick={() => (selectedTag = null)}
+		>
+			{$_('home.allGames')}
+		</button>
+		{#each allTags as tag}
+			<button
+				class="text-xs px-3 py-1.5 rounded-full transition-colors {selectedTag === tag
+					? 'bg-primary text-primary-foreground'
+					: 'bg-muted text-muted-foreground hover:bg-muted/80'}"
+				onclick={() => (selectedTag = selectedTag === tag ? null : tag)}
+			>
+				{tag}
+			</button>
+		{/each}
+	</div>
+
+	{#if filteredGames().length === 0}
+		<div class="text-center py-12">
+			<p class="text-muted-foreground">{$_('home.noResults')}</p>
+		</div>
+	{:else}
+		<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+			{#each filteredGames() as game (game.id)}
+				<GameCard {game} href="/play/{game.slug}" />
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/games/mana-games/apps/web/src/routes/(app)/community/+page.svelte b/games/mana-games/apps/web/src/routes/(app)/community/+page.svelte
new file mode 100644
index 000000000..54e1bd776
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/(app)/community/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+</script>
+
+<svelte:head>
+	<title>{$_('nav.community')} - Mana Games</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<div>
+		<h1 class="text-2xl font-bold text-foreground">{$_('nav.community')}</h1>
+		<p class="text-muted-foreground mt-1">
+			Von der Community erstellte Spiele. Reiche dein eigenes Spiel ein!
+		</p>
+	</div>
+
+	<div class="text-center py-12 rounded-xl border border-dashed border-border">
+		<p class="text-4xl mb-4">🎮</p>
+		<p class="text-muted-foreground">Noch keine Community-Spiele vorhanden.</p>
+		<a
+			href="/create"
+			class="inline-block mt-4 px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+		>
+			Erstelle das erste Spiel!
+		</a>
+	</div>
+</div>
diff --git a/games/mana-games/apps/web/src/routes/(app)/create/+page.svelte b/games/mana-games/apps/web/src/routes/(app)/create/+page.svelte
new file mode 100644
index 000000000..77a866143
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/(app)/create/+page.svelte
@@ -0,0 +1,211 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { generatedGameCollection } from '$lib/data/local-store';
+
+	const BACKEND_URL = import.meta.env.DEV
+		? 'http://localhost:3011'
+		: import.meta.env.PUBLIC_MANA_GAMES_BACKEND_URL || '';
+
+	const models = [
+		{ id: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash', provider: 'Google', speed: 'Schnell' },
+		{ id: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash', provider: 'Google', speed: 'Schnell' },
+		{ id: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro', provider: 'Google', speed: 'Langsam' },
+		{ id: 'claude-3.5-haiku', label: 'Claude 3.5 Haiku', provider: 'Anthropic', speed: 'Schnell' },
+		{ id: 'claude-3.5-sonnet', label: 'Claude Sonnet', provider: 'Anthropic', speed: 'Mittel' },
+		{ id: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'Azure', speed: 'Schnell' },
+		{ id: 'gpt-4o', label: 'GPT-4o', provider: 'Azure', speed: 'Mittel' },
+	];
+
+	let prompt = $state('');
+	let selectedModel = $state('gemini-2.0-flash');
+	let isGenerating = $state(false);
+	let generatedHtml = $state('');
+	let error = $state('');
+	let iterationCount = $state(0);
+	let originalPrompt = $state('');
+
+	async function generateGame() {
+		if (!prompt.trim() || isGenerating) return;
+
+		isGenerating = true;
+		error = '';
+
+		try {
+			const body: Record<string, unknown> = {
+				description: prompt,
+				model: selectedModel,
+				mode: iterationCount > 0 ? 'iterate' : 'create',
+			};
+
+			if (iterationCount > 0 && generatedHtml) {
+				body.originalPrompt = originalPrompt;
+				body.currentCode = generatedHtml;
+				body.iterationCount = iterationCount;
+			}
+
+			const response = await fetch(`${BACKEND_URL}/api/games/generate`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(body),
+			});
+
+			if (!response.ok) {
+				throw new Error(`Fehler: ${response.status} ${response.statusText}`);
+			}
+
+			const data = await response.json();
+
+			if (data.success && data.html) {
+				generatedHtml = data.html;
+				if (iterationCount === 0) {
+					originalPrompt = prompt;
+				}
+				iterationCount++;
+			} else {
+				error = data.error || 'Unbekannter Fehler bei der Generierung.';
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Verbindungsfehler zum Backend.';
+		} finally {
+			isGenerating = false;
+		}
+	}
+
+	async function saveGame() {
+		if (!generatedHtml || !prompt) return;
+
+		await generatedGameCollection.insert({
+			title: originalPrompt || prompt,
+			description: prompt,
+			htmlCode: generatedHtml,
+			prompt: originalPrompt || prompt,
+			model: selectedModel,
+			iterationCount,
+		});
+
+		// Reset
+		prompt = '';
+		generatedHtml = '';
+		iterationCount = 0;
+		originalPrompt = '';
+	}
+
+	function resetGame() {
+		generatedHtml = '';
+		iterationCount = 0;
+		originalPrompt = '';
+		prompt = '';
+		error = '';
+	}
+</script>
+
+<svelte:head>
+	<title>{$_('create.title')} - Mana Games</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<div>
+		<h1 class="text-2xl font-bold text-foreground">{$_('create.title')}</h1>
+		<p class="text-muted-foreground mt-1">{$_('create.subtitle')}</p>
+	</div>
+
+	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+		<!-- Input Panel -->
+		<div class="space-y-4">
+			<div>
+				<label for="prompt" class="block text-sm font-medium text-foreground mb-2">
+					{$_('create.prompt')}
+				</label>
+				<textarea
+					id="prompt"
+					bind:value={prompt}
+					placeholder={$_('create.promptPlaceholder')}
+					rows="4"
+					class="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none"
+				></textarea>
+			</div>
+
+			<div>
+				<label for="model" class="block text-sm font-medium text-foreground mb-2">
+					{$_('create.model')}
+				</label>
+				<select
+					id="model"
+					bind:value={selectedModel}
+					class="w-full rounded-lg border border-border bg-background px-4 py-2.5 text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
+				>
+					{#each models as model}
+						<option value={model.id}>
+							{model.label} ({model.provider} - {model.speed})
+						</option>
+					{/each}
+				</select>
+			</div>
+
+			{#if error}
+				<div class="rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-400">
+					{error}
+				</div>
+			{/if}
+
+			<div class="flex gap-2">
+				<button
+					onclick={generateGame}
+					disabled={!prompt.trim() || isGenerating}
+					class="flex-1 px-4 py-2.5 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+				>
+					{#if isGenerating}
+						<span class="inline-flex items-center gap-2">
+							<span class="animate-spin">⚡</span>
+							{$_('create.generating')}
+						</span>
+					{:else if iterationCount > 0}
+						{$_('create.iterate')}
+					{:else}
+						{$_('create.generate')}
+					{/if}
+				</button>
+
+				{#if generatedHtml}
+					<button
+						onclick={saveGame}
+						class="px-4 py-2.5 rounded-lg border border-border bg-card text-foreground hover:bg-muted transition-colors"
+					>
+						{$_('create.save')}
+					</button>
+					<button
+						onclick={resetGame}
+						class="px-4 py-2.5 rounded-lg border border-border bg-card text-muted-foreground hover:bg-muted transition-colors"
+					>
+						Neu
+					</button>
+				{/if}
+			</div>
+
+			{#if iterationCount > 0}
+				<p class="text-xs text-muted-foreground">
+					Iteration {iterationCount} &middot; Beschreibe Änderungen im Prompt-Feld
+				</p>
+			{/if}
+		</div>
+
+		<!-- Preview Panel -->
+		<div class="rounded-xl border border-border bg-black overflow-hidden">
+			{#if generatedHtml}
+				<iframe
+					srcdoc={generatedHtml}
+					title="Generiertes Spiel"
+					class="w-full aspect-[16/10] border-0"
+					sandbox="allow-scripts"
+				></iframe>
+			{:else}
+				<div class="w-full aspect-[16/10] flex items-center justify-center">
+					<div class="text-center">
+						<p class="text-4xl mb-3 opacity-40">🎮</p>
+						<p class="text-muted-foreground text-sm">{$_('create.preview')}</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
diff --git a/games/mana-games/apps/web/src/routes/(app)/play-generated/+page.svelte b/games/mana-games/apps/web/src/routes/(app)/play-generated/+page.svelte
new file mode 100644
index 000000000..f5baec300
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/(app)/play-generated/+page.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { useAllGeneratedGames } from '$lib/data/queries';
+	import { generatedGameCollection } from '$lib/data/local-store';
+
+	const generatedGames = useAllGeneratedGames();
+
+	let selectedGameId = $state<string | null>(null);
+
+	let selectedGame = $derived(generatedGames.value.find((g) => g.id === selectedGameId));
+
+	async function deleteGame(id: string) {
+		await generatedGameCollection.remove(id);
+		if (selectedGameId === id) {
+			selectedGameId = null;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Generierte Spiele - Mana Games</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<div>
+		<h1 class="text-2xl font-bold text-foreground">Generierte Spiele</h1>
+		<p class="text-muted-foreground mt-1">Deine mit KI erstellten Spiele</p>
+	</div>
+
+	{#if generatedGames.value.length === 0}
+		<div class="text-center py-12 rounded-xl border border-dashed border-border">
+			<p class="text-4xl mb-4">✨</p>
+			<p class="text-muted-foreground">Noch keine generierten Spiele.</p>
+			<a
+				href="/create"
+				class="inline-block mt-4 px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+			>
+				Erstelle dein erstes Spiel!
+			</a>
+		</div>
+	{:else}
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+			<div class="space-y-2 lg:col-span-1">
+				{#each generatedGames.value as game (game.id)}
+					<button
+						onclick={() => (selectedGameId = game.id)}
+						class="w-full text-left rounded-lg border p-3 transition-colors {selectedGameId ===
+						game.id
+							? 'border-primary bg-primary/5'
+							: 'border-border bg-card hover:bg-muted/50'}"
+					>
+						<p class="font-medium text-foreground text-sm truncate">{game.title}</p>
+						<p class="text-xs text-muted-foreground mt-1">
+							{game.model} &middot; {game.iterationCount} Iterationen
+						</p>
+					</button>
+				{/each}
+			</div>
+
+			<div class="lg:col-span-2 rounded-xl border border-border bg-black overflow-hidden">
+				{#if selectedGame}
+					<div class="flex items-center justify-between px-3 py-2 bg-card border-b border-border">
+						<span class="text-sm text-foreground truncate">{selectedGame.title}</span>
+						<button
+							onclick={() => deleteGame(selectedGame!.id)}
+							class="text-xs text-red-400 hover:text-red-300 transition-colors"
+						>
+							Löschen
+						</button>
+					</div>
+					<iframe
+						srcdoc={selectedGame.htmlCode}
+						title={selectedGame.title}
+						class="w-full aspect-[16/10] border-0"
+						sandbox="allow-scripts"
+					></iframe>
+				{:else}
+					<div class="w-full aspect-[16/10] flex items-center justify-center">
+						<p class="text-muted-foreground text-sm">Wähle ein Spiel aus der Liste</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/games/mana-games/apps/web/src/routes/(app)/play/[slug]/+page.svelte b/games/mana-games/apps/web/src/routes/(app)/play/[slug]/+page.svelte
new file mode 100644
index 000000000..80291f7d7
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/(app)/play/[slug]/+page.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { onMount, onDestroy } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { getGameBySlug } from '$lib/data/games';
+	import { initGameCommunication } from '$lib/services/game-communication';
+	import { gameStatsCollection, type LocalGameStats } from '$lib/data/local-store';
+
+	const slug = $derived($page.params.slug);
+	const game = $derived(getGameBySlug(slug));
+
+	let stats = $state<LocalGameStats | null>(null);
+	let isFullscreen = $state(false);
+	let iframeEl: HTMLIFrameElement;
+	let cleanup: (() => void) | undefined;
+
+	onMount(async () => {
+		if (!slug) return;
+		cleanup = initGameCommunication(slug);
+
+		const all = await gameStatsCollection.getAll();
+		stats = all.find((s) => s.gameId === slug) || null;
+	});
+
+	onDestroy(() => {
+		cleanup?.();
+	});
+
+	function toggleFullscreen() {
+		if (!iframeEl) return;
+		if (!document.fullscreenElement) {
+			iframeEl.requestFullscreen();
+			isFullscreen = true;
+		} else {
+			document.exitFullscreen();
+			isFullscreen = false;
+		}
+	}
+
+	function formatPlayTime(seconds: number): string {
+		const hours = Math.floor(seconds / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+		if (hours > 0) return `${hours}h ${minutes}m`;
+		return `${minutes}m`;
+	}
+</script>
+
+<svelte:head>
+	<title>{game?.title || 'Spiel'} - Mana Games</title>
+</svelte:head>
+
+{#if game}
+	<div class="space-y-4">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-3">
+				<a href="/" class="text-muted-foreground hover:text-foreground transition-colors">
+					&larr; {$_('game.back')}
+				</a>
+				<h1 class="text-xl font-bold text-foreground">{game.title}</h1>
+			</div>
+			<div class="flex gap-2">
+				<button
+					onclick={toggleFullscreen}
+					class="px-3 py-1.5 text-sm rounded-lg border border-border bg-card text-foreground hover:bg-muted transition-colors"
+				>
+					{$_('game.fullscreen')}
+				</button>
+			</div>
+		</div>
+
+		<div class="rounded-xl overflow-hidden border border-border bg-black">
+			<iframe
+				bind:this={iframeEl}
+				src={game.htmlFile}
+				title={game.title}
+				class="w-full aspect-[16/10] border-0"
+				sandbox="allow-scripts allow-same-origin"
+			></iframe>
+		</div>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="rounded-xl border border-border bg-card p-4 space-y-3">
+				<h2 class="font-semibold text-foreground">{game.title}</h2>
+				<p class="text-sm text-muted-foreground">{game.description}</p>
+
+				<div class="space-y-2 text-sm">
+					<div class="flex justify-between">
+						<span class="text-muted-foreground">{$_('game.difficulty')}</span>
+						<span class="text-foreground">{game.difficulty}</span>
+					</div>
+					<div class="flex justify-between">
+						<span class="text-muted-foreground">{$_('game.controls')}</span>
+						<span class="text-foreground text-right max-w-[60%]">{game.controls}</span>
+					</div>
+				</div>
+
+				<div class="flex flex-wrap gap-1 pt-2">
+					{#each game.tags as tag}
+						<span class="text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
+							{tag}
+						</span>
+					{/each}
+				</div>
+			</div>
+
+			{#if stats}
+				<div class="rounded-xl border border-border bg-card p-4 space-y-3">
+					<h2 class="font-semibold text-foreground">{$_('game.stats')}</h2>
+					<div class="space-y-2 text-sm">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">{$_('game.highScore')}</span>
+							<span class="text-foreground font-mono">{stats.highScore.toLocaleString()}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">{$_('game.gamesPlayed')}</span>
+							<span class="text-foreground">{stats.gamesPlayed}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">{$_('game.totalPlayTime')}</span>
+							<span class="text-foreground">{formatPlayTime(stats.totalPlayTime)}</span>
+						</div>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+{:else}
+	<div class="text-center py-12">
+		<p class="text-muted-foreground">Spiel nicht gefunden.</p>
+		<a href="/" class="text-primary hover:underline mt-2 inline-block">Zurück zur Übersicht</a>
+	</div>
+{/if}
diff --git a/games/mana-games/apps/web/src/routes/(app)/stats/+page.svelte b/games/mana-games/apps/web/src/routes/(app)/stats/+page.svelte
new file mode 100644
index 000000000..33a588a8e
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/(app)/stats/+page.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { useAllGameStats } from '$lib/data/queries';
+	import { games } from '$lib/data/games';
+
+	const allStats = useAllGameStats();
+
+	let totalGamesPlayed = $derived(allStats.value.reduce((sum, s) => sum + s.gamesPlayed, 0));
+
+	let totalPlayTime = $derived(allStats.value.reduce((sum, s) => sum + s.totalPlayTime, 0));
+
+	let favoriteGame = $derived(() => {
+		if (allStats.value.length === 0) return null;
+		const top = allStats.value.reduce((fav, s) => (s.gamesPlayed > fav.gamesPlayed ? s : fav));
+		return games.find((g) => g.slug === top.gameId || g.id === top.gameId);
+	});
+
+	let sortedStats = $derived([...allStats.value].sort((a, b) => b.highScore - a.highScore));
+
+	function formatPlayTime(seconds: number): string {
+		const hours = Math.floor(seconds / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+		if (hours > 0) return `${hours}h ${minutes}m`;
+		return `${minutes}m`;
+	}
+
+	function getGameTitle(gameId: string): string {
+		return games.find((g) => g.slug === gameId || g.id === gameId)?.title || gameId;
+	}
+</script>
+
+<svelte:head>
+	<title>{$_('stats.title')} - Mana Games</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<h1 class="text-2xl font-bold text-foreground">{$_('stats.title')}</h1>
+
+	{#if allStats.value.length === 0}
+		<div class="text-center py-12">
+			<p class="text-4xl mb-4">📊</p>
+			<p class="text-muted-foreground">{$_('stats.noStats')}</p>
+		</div>
+	{:else}
+		<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+			<div class="rounded-xl border border-border bg-card p-4 text-center">
+				<p class="text-3xl font-bold text-primary">{totalGamesPlayed}</p>
+				<p class="text-sm text-muted-foreground mt-1">{$_('stats.totalGames')}</p>
+			</div>
+			<div class="rounded-xl border border-border bg-card p-4 text-center">
+				<p class="text-3xl font-bold text-primary">{formatPlayTime(totalPlayTime)}</p>
+				<p class="text-sm text-muted-foreground mt-1">{$_('stats.totalTime')}</p>
+			</div>
+			<div class="rounded-xl border border-border bg-card p-4 text-center">
+				<p class="text-3xl font-bold text-primary">{favoriteGame()?.title || '-'}</p>
+				<p class="text-sm text-muted-foreground mt-1">{$_('stats.favoriteGame')}</p>
+			</div>
+		</div>
+
+		<div class="rounded-xl border border-border bg-card overflow-hidden">
+			<table class="w-full text-sm">
+				<thead>
+					<tr class="border-b border-border text-left">
+						<th class="px-4 py-3 text-muted-foreground font-medium">Spiel</th>
+						<th class="px-4 py-3 text-muted-foreground font-medium text-right"
+							>{$_('game.highScore')}</th
+						>
+						<th class="px-4 py-3 text-muted-foreground font-medium text-right hidden sm:table-cell"
+							>{$_('game.gamesPlayed')}</th
+						>
+						<th class="px-4 py-3 text-muted-foreground font-medium text-right hidden md:table-cell"
+							>{$_('game.totalPlayTime')}</th
+						>
+					</tr>
+				</thead>
+				<tbody>
+					{#each sortedStats as stat (stat.id)}
+						<tr class="border-b border-border/50 hover:bg-muted/30 transition-colors">
+							<td class="px-4 py-3 text-foreground">{getGameTitle(stat.gameId)}</td>
+							<td class="px-4 py-3 text-foreground font-mono text-right"
+								>{stat.highScore.toLocaleString()}</td
+							>
+							<td class="px-4 py-3 text-muted-foreground text-right hidden sm:table-cell"
+								>{stat.gamesPlayed}</td
+							>
+							<td class="px-4 py-3 text-muted-foreground text-right hidden md:table-cell"
+								>{formatPlayTime(stat.totalPlayTime)}</td
+							>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
diff --git a/games/mana-games/apps/web/src/routes/+layout.svelte b/games/mana-games/apps/web/src/routes/+layout.svelte
new file mode 100644
index 000000000..f599b48aa
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/+layout.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import '../app.css';
+	import { onMount } from 'svelte';
+	import { isLoading as isLocaleLoading } from 'svelte-i18n';
+	import { theme } from '$lib/stores/theme.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { waitLocale } from '$lib/i18n';
+	import { ToastContainer, setupGlobalErrorHandler } from '@manacore/shared-ui';
+	import { AppLoadingSkeleton } from '$lib/components/skeletons';
+
+	let { children } = $props();
+
+	let loading = $state(true);
+
+	onMount(() => {
+		const cleanupErrorHandler = setupGlobalErrorHandler();
+
+		const init = async () => {
+			await waitLocale();
+			theme.initialize();
+			await authStore.initialize();
+			loading = false;
+		};
+
+		init();
+
+		return cleanupErrorHandler;
+	});
+</script>
+
+<ToastContainer />
+
+{#if $isLocaleLoading || loading}
+	<AppLoadingSkeleton />
+{:else}
+	<div class="min-h-screen bg-background text-foreground">
+		{@render children()}
+	</div>
+{/if}
diff --git a/games/mana-games/apps/web/src/routes/+layout.ts b/games/mana-games/apps/web/src/routes/+layout.ts
new file mode 100644
index 000000000..ad6cddb06
--- /dev/null
+++ b/games/mana-games/apps/web/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+// Disable SSR — all data is local-first (IndexedDB + mana-sync)
+export const ssr = false;
diff --git a/games/mana-games/apps/web/src/scripts/game-communication.ts b/games/mana-games/apps/web/src/scripts/game-communication.ts
deleted file mode 100644
index 7140205fa..000000000
--- a/games/mana-games/apps/web/src/scripts/game-communication.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { statsService } from '../services/statsService';
-
-export interface GameMessage {
-	type: 'GAME_EVENT' | 'GAME_LOADED' | 'GAME_ENDED';
-	gameId: string;
-	event?: string;
-	data?: any;
-}
-
-export function initGameCommunication(gameSlug: string) {
-	let gameStartTime: number | null = null;
-
-	window.addEventListener('message', (event) => {
-		if (event.origin !== window.location.origin) return;
-
-		const message = event.data as GameMessage;
-		if (!message.type || message.gameId !== gameSlug) return;
-
-		switch (message.type) {
-			case 'GAME_LOADED':
-				gameStartTime = Date.now();
-				statsService.incrementGamesPlayed(gameSlug);
-				break;
-
-			case 'GAME_EVENT':
-				handleGameEvent(gameSlug, message.event!, message.data);
-				break;
-
-			case 'GAME_ENDED':
-				if (gameStartTime) {
-					const playTime = Math.floor((Date.now() - gameStartTime) / 1000);
-					statsService.addPlayTime(gameSlug, playTime);
-					gameStartTime = null;
-				}
-				break;
-		}
-	});
-
-	window.addEventListener('beforeunload', () => {
-		if (gameStartTime) {
-			const playTime = Math.floor((Date.now() - gameStartTime) / 1000);
-			statsService.addPlayTime(gameSlug, playTime);
-		}
-	});
-}
-
-function handleGameEvent(gameId: string, event: string, data: any) {
-	switch (event) {
-		case 'SCORE_UPDATE':
-			if (data.score) {
-				statsService.updateStats(gameId, {
-					lastScore: data.score,
-				});
-			}
-			break;
-
-		case 'ACHIEVEMENT_UNLOCKED':
-			if (data.achievement) {
-				statsService.unlockAchievement(gameId, data.achievement);
-			}
-			break;
-
-		case 'GAME_OVER':
-			if (data.score) {
-				statsService.updateStats(gameId, {
-					lastScore: data.score,
-				});
-			}
-			break;
-	}
-}
diff --git a/games/mana-games/apps/web/src/scripts/stats-integration-template.js b/games/mana-games/apps/web/src/scripts/stats-integration-template.js
deleted file mode 100644
index a71d33cf9..000000000
--- a/games/mana-games/apps/web/src/scripts/stats-integration-template.js
+++ /dev/null
@@ -1,77 +0,0 @@
-// Template für Stats-Integration in Spiele
-// Dieses Template zeigt, wie man die Stats-Integration in ein Spiel einbaut
-
-// 1. Game ID definieren (muss mit dem Slug in games.ts übereinstimmen)
-const GAME_ID = 'dein-spiel-slug';
-
-// 2. Beim Spielstart senden
-window.addEventListener('load', () => {
-	window.parent.postMessage(
-		{
-			type: 'GAME_LOADED',
-			gameId: GAME_ID,
-		},
-		'*'
-	);
-});
-
-// 3. Bei Score-Updates senden
-function updateScore(newScore) {
-	score = newScore;
-	// UI Update...
-
-	window.parent.postMessage(
-		{
-			type: 'GAME_EVENT',
-			gameId: GAME_ID,
-			event: 'SCORE_UPDATE',
-			data: { score: score },
-		},
-		'*'
-	);
-}
-
-// 4. Bei Game Over senden
-function gameOver() {
-	// Game Over Logik...
-
-	window.parent.postMessage(
-		{
-			type: 'GAME_EVENT',
-			gameId: GAME_ID,
-			event: 'GAME_OVER',
-			data: { score: finalScore },
-		},
-		'*'
-	);
-
-	// Achievement Beispiele
-	if (score >= 100) {
-		window.parent.postMessage(
-			{
-				type: 'GAME_EVENT',
-				gameId: GAME_ID,
-				event: 'ACHIEVEMENT_UNLOCKED',
-				data: {
-					achievement: {
-						id: 'first-100',
-						name: 'Erste 100',
-						description: '100 Punkte erreicht!',
-					},
-				},
-			},
-			'*'
-		);
-	}
-}
-
-// 5. Optional: Bei Spielende/Verlassen
-window.addEventListener('beforeunload', () => {
-	window.parent.postMessage(
-		{
-			type: 'GAME_ENDED',
-			gameId: GAME_ID,
-		},
-		'*'
-	);
-});
diff --git a/games/mana-games/apps/web/src/services/statsService.ts b/games/mana-games/apps/web/src/services/statsService.ts
deleted file mode 100644
index f51431a6a..000000000
--- a/games/mana-games/apps/web/src/services/statsService.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-export interface GameStats {
-	gameId: string;
-	highScore: number;
-	lastScore: number;
-	gamesPlayed: number;
-	totalPlayTime: number;
-	lastPlayed: string;
-	achievements?: Achievement[];
-}
-
-export interface Achievement {
-	id: string;
-	name: string;
-	description: string;
-	unlockedAt?: string;
-}
-
-export interface GlobalStats {
-	totalGamesPlayed: number;
-	totalPlayTime: number;
-	favoriteGame?: string;
-	lastPlayedGame?: string;
-	gamesWithStats: number;
-}
-
-class StatsService {
-	private readonly STATS_KEY = 'mana-games-stats';
-
-	private getStoredStats(): Record<string, GameStats> {
-		if (typeof window === 'undefined') return {};
-
-		try {
-			const stored = localStorage.getItem(this.STATS_KEY);
-			return stored ? JSON.parse(stored) : {};
-		} catch (error) {
-			console.error('Error reading stats:', error);
-			return {};
-		}
-	}
-
-	private saveStats(stats: Record<string, GameStats>): void {
-		if (typeof window === 'undefined') return;
-
-		try {
-			localStorage.setItem(this.STATS_KEY, JSON.stringify(stats));
-		} catch (error) {
-			console.error('Error saving stats:', error);
-		}
-	}
-
-	getStats(gameId: string): GameStats | null {
-		const allStats = this.getStoredStats();
-		return allStats[gameId] || null;
-	}
-
-	updateStats(gameId: string, update: Partial<GameStats>): void {
-		const allStats = this.getStoredStats();
-		const currentStats = allStats[gameId] || {
-			gameId,
-			highScore: 0,
-			lastScore: 0,
-			gamesPlayed: 0,
-			totalPlayTime: 0,
-			lastPlayed: new Date().toISOString(),
-			achievements: [],
-		};
-
-		allStats[gameId] = {
-			...currentStats,
-			...update,
-			gameId,
-			lastPlayed: new Date().toISOString(),
-		};
-
-		if (update.lastScore && update.lastScore > currentStats.highScore) {
-			allStats[gameId].highScore = update.lastScore;
-		}
-
-		this.saveStats(allStats);
-	}
-
-	getAllStats(): Record<string, GameStats> {
-		return this.getStoredStats();
-	}
-
-	getGlobalStats(): GlobalStats {
-		const allStats = this.getStoredStats();
-		const statsArray = Object.values(allStats);
-
-		if (statsArray.length === 0) {
-			return {
-				totalGamesPlayed: 0,
-				totalPlayTime: 0,
-				gamesWithStats: 0,
-			};
-		}
-
-		const totalGamesPlayed = statsArray.reduce((sum, stat) => sum + stat.gamesPlayed, 0);
-		const totalPlayTime = statsArray.reduce((sum, stat) => sum + stat.totalPlayTime, 0);
-
-		const favoriteGame = statsArray.reduce((fav, stat) =>
-			!fav || stat.gamesPlayed > fav.gamesPlayed ? stat : fav
-		).gameId;
-
-		const lastPlayedGame = statsArray.reduce((last, stat) =>
-			!last || new Date(stat.lastPlayed) > new Date(last.lastPlayed) ? stat : last
-		).gameId;
-
-		return {
-			totalGamesPlayed,
-			totalPlayTime,
-			favoriteGame,
-			lastPlayedGame,
-			gamesWithStats: statsArray.length,
-		};
-	}
-
-	incrementGamesPlayed(gameId: string): void {
-		const stats = this.getStats(gameId) || {
-			gameId,
-			highScore: 0,
-			lastScore: 0,
-			gamesPlayed: 0,
-			totalPlayTime: 0,
-			lastPlayed: new Date().toISOString(),
-		};
-
-		this.updateStats(gameId, {
-			gamesPlayed: stats.gamesPlayed + 1,
-		});
-	}
-
-	addPlayTime(gameId: string, seconds: number): void {
-		const stats = this.getStats(gameId) || {
-			gameId,
-			highScore: 0,
-			lastScore: 0,
-			gamesPlayed: 0,
-			totalPlayTime: 0,
-			lastPlayed: new Date().toISOString(),
-		};
-
-		this.updateStats(gameId, {
-			totalPlayTime: stats.totalPlayTime + seconds,
-		});
-	}
-
-	unlockAchievement(gameId: string, achievement: Achievement): void {
-		const stats = this.getStats(gameId);
-		if (!stats) return;
-
-		const achievements = stats.achievements || [];
-		const exists = achievements.find((a) => a.id === achievement.id);
-
-		if (!exists) {
-			achievements.push({
-				...achievement,
-				unlockedAt: new Date().toISOString(),
-			});
-
-			this.updateStats(gameId, { achievements });
-		}
-	}
-
-	formatPlayTime(seconds: number): string {
-		const hours = Math.floor(seconds / 3600);
-		const minutes = Math.floor((seconds % 3600) / 60);
-
-		if (hours > 0) {
-			return `${hours}h ${minutes}m`;
-		}
-		return `${minutes}m`;
-	}
-
-	getRelativeTime(dateString: string): string {
-		const date = new Date(dateString);
-		const now = new Date();
-		const diffMs = now.getTime() - date.getTime();
-		const diffMins = Math.floor(diffMs / 60000);
-		const diffHours = Math.floor(diffMs / 3600000);
-		const diffDays = Math.floor(diffMs / 86400000);
-
-		if (diffMins < 1) return 'Gerade eben';
-		if (diffMins < 60) return `Vor ${diffMins} Minuten`;
-		if (diffHours < 24) return `Vor ${diffHours} Stunden`;
-		if (diffDays < 7) return `Vor ${diffDays} Tagen`;
-
-		return date.toLocaleDateString('de-DE');
-	}
-}
-
-export const statsService = new StatsService();
diff --git a/games/mana-games/apps/web/public/favicon.svg b/games/mana-games/apps/web/static/favicon.png
similarity index 100%
rename from games/mana-games/apps/web/public/favicon.svg
rename to games/mana-games/apps/web/static/favicon.png
diff --git a/games/mana-games/apps/web/public/games/asteroid_dash.html b/games/mana-games/apps/web/static/games/asteroid_dash.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/asteroid_dash.html
rename to games/mana-games/apps/web/static/games/asteroid_dash.html
diff --git a/games/mana-games/apps/web/public/games/balloon_pop.html b/games/mana-games/apps/web/static/games/balloon_pop.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/balloon_pop.html
rename to games/mana-games/apps/web/static/games/balloon_pop.html
diff --git a/games/mana-games/apps/web/public/games/bounce_catch_tutorial.html b/games/mana-games/apps/web/static/games/bounce_catch_tutorial.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/bounce_catch_tutorial.html
rename to games/mana-games/apps/web/static/games/bounce_catch_tutorial.html
diff --git a/games/mana-games/apps/web/public/games/card_stack_rush.html b/games/mana-games/apps/web/static/games/card_stack_rush.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/card_stack_rush.html
rename to games/mana-games/apps/web/static/games/card_stack_rush.html
diff --git a/games/mana-games/apps/web/public/games/click_race.html b/games/mana-games/apps/web/static/games/click_race.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/click_race.html
rename to games/mana-games/apps/web/static/games/click_race.html
diff --git a/games/mana-games/apps/web/public/games/color_memory.html b/games/mana-games/apps/web/static/games/color_memory.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/color_memory.html
rename to games/mana-games/apps/web/static/games/color_memory.html
diff --git a/games/mana-games/apps/web/public/games/fish_catcher.html b/games/mana-games/apps/web/static/games/fish_catcher.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/fish_catcher.html
rename to games/mana-games/apps/web/static/games/fish_catcher.html
diff --git a/games/mana-games/apps/web/public/games/flappy_mana.html b/games/mana-games/apps/web/static/games/flappy_mana.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/flappy_mana.html
rename to games/mana-games/apps/web/static/games/flappy_mana.html
diff --git a/games/mana-games/apps/web/public/games/game-stats-example.html b/games/mana-games/apps/web/static/games/game-stats-example.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/game-stats-example.html
rename to games/mana-games/apps/web/static/games/game-stats-example.html
diff --git a/games/mana-games/apps/web/public/games/gravity_painter.html b/games/mana-games/apps/web/static/games/gravity_painter.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/gravity_painter.html
rename to games/mana-games/apps/web/static/games/gravity_painter.html
diff --git a/games/mana-games/apps/web/public/games/mana_defense.html b/games/mana-games/apps/web/static/games/mana_defense.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/mana_defense.html
rename to games/mana-games/apps/web/static/games/mana_defense.html
diff --git a/games/mana-games/apps/web/public/games/mana_factory.html b/games/mana-games/apps/web/static/games/mana_factory.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/mana_factory.html
rename to games/mana-games/apps/web/static/games/mana_factory.html
diff --git a/games/mana-games/apps/web/public/games/mana_runner.html b/games/mana-games/apps/web/static/games/mana_runner.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/mana_runner.html
rename to games/mana-games/apps/web/static/games/mana_runner.html
diff --git a/games/mana-games/apps/web/public/games/memory_card_match.html b/games/mana-games/apps/web/static/games/memory_card_match.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/memory_card_match.html
rename to games/mana-games/apps/web/static/games/memory_card_match.html
diff --git a/games/mana-games/apps/web/public/games/neon_maze_runner.html b/games/mana-games/apps/web/static/games/neon_maze_runner.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/neon_maze_runner.html
rename to games/mana-games/apps/web/static/games/neon_maze_runner.html
diff --git a/games/mana-games/apps/web/public/games/puzzle_blocks.html b/games/mana-games/apps/web/static/games/puzzle_blocks.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/puzzle_blocks.html
rename to games/mana-games/apps/web/static/games/puzzle_blocks.html
diff --git a/games/mana-games/apps/web/public/games/reaction_test.html b/games/mana-games/apps/web/static/games/reaction_test.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/reaction_test.html
rename to games/mana-games/apps/web/static/games/reaction_test.html
diff --git a/games/mana-games/apps/web/public/games/rhythm_defender.html b/games/mana-games/apps/web/static/games/rhythm_defender.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/rhythm_defender.html
rename to games/mana-games/apps/web/static/games/rhythm_defender.html
diff --git a/games/mana-games/apps/web/public/games/snake_game.html b/games/mana-games/apps/web/static/games/snake_game.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/snake_game.html
rename to games/mana-games/apps/web/static/games/snake_game.html
diff --git a/games/mana-games/apps/web/public/games/space_defender_game.html b/games/mana-games/apps/web/static/games/space_defender_game.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/space_defender_game.html
rename to games/mana-games/apps/web/static/games/space_defender_game.html
diff --git a/games/mana-games/apps/web/public/games/turbo_racer.html b/games/mana-games/apps/web/static/games/turbo_racer.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/turbo_racer.html
rename to games/mana-games/apps/web/static/games/turbo_racer.html
diff --git a/games/mana-games/apps/web/public/games/word_scramble.html b/games/mana-games/apps/web/static/games/word_scramble.html
similarity index 100%
rename from games/mana-games/apps/web/public/games/word_scramble.html
rename to games/mana-games/apps/web/static/games/word_scramble.html
diff --git a/games/mana-games/apps/web/public/screenshots/asteroid-dash.jpg b/games/mana-games/apps/web/static/screenshots/asteroid-dash.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/asteroid-dash.jpg
rename to games/mana-games/apps/web/static/screenshots/asteroid-dash.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/balloon-pop.jpg b/games/mana-games/apps/web/static/screenshots/balloon-pop.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/balloon-pop.jpg
rename to games/mana-games/apps/web/static/screenshots/balloon-pop.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/bounce-catch.jpg b/games/mana-games/apps/web/static/screenshots/bounce-catch.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/bounce-catch.jpg
rename to games/mana-games/apps/web/static/screenshots/bounce-catch.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/click-race.jpg b/games/mana-games/apps/web/static/screenshots/click-race.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/click-race.jpg
rename to games/mana-games/apps/web/static/screenshots/click-race.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/color-memory.jpg b/games/mana-games/apps/web/static/screenshots/color-memory.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/color-memory.jpg
rename to games/mana-games/apps/web/static/screenshots/color-memory.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/fish-catcher.jpg b/games/mana-games/apps/web/static/screenshots/fish-catcher.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/fish-catcher.jpg
rename to games/mana-games/apps/web/static/screenshots/fish-catcher.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/gravity-painter.jpg b/games/mana-games/apps/web/static/screenshots/gravity-painter.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/gravity-painter.jpg
rename to games/mana-games/apps/web/static/screenshots/gravity-painter.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/neon-maze-runner.jpg b/games/mana-games/apps/web/static/screenshots/neon-maze-runner.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/neon-maze-runner.jpg
rename to games/mana-games/apps/web/static/screenshots/neon-maze-runner.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/reaction-test.jpg b/games/mana-games/apps/web/static/screenshots/reaction-test.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/reaction-test.jpg
rename to games/mana-games/apps/web/static/screenshots/reaction-test.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/rhythm-defender.jpg b/games/mana-games/apps/web/static/screenshots/rhythm-defender.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/rhythm-defender.jpg
rename to games/mana-games/apps/web/static/screenshots/rhythm-defender.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/snake.jpg b/games/mana-games/apps/web/static/screenshots/snake.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/snake.jpg
rename to games/mana-games/apps/web/static/screenshots/snake.jpg
diff --git a/games/mana-games/apps/web/public/screenshots/space-defenders.jpg b/games/mana-games/apps/web/static/screenshots/space-defenders.jpg
similarity index 100%
rename from games/mana-games/apps/web/public/screenshots/space-defenders.jpg
rename to games/mana-games/apps/web/static/screenshots/space-defenders.jpg
diff --git a/games/mana-games/apps/web/svelte.config.js b/games/mana-games/apps/web/svelte.config.js
new file mode 100644
index 000000000..f290ef5a6
--- /dev/null
+++ b/games/mana-games/apps/web/svelte.config.js
@@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter({
+			out: 'build',
+		}),
+		prerender: {
+			handleHttpError: ({ path, message }) => {
+				if (path === '/favicon.png') return;
+				throw new Error(message);
+			},
+		},
+	},
+};
+
+export default config;
diff --git a/games/mana-games/apps/web/tsconfig.json b/games/mana-games/apps/web/tsconfig.json
index a9210e68f..a8f10c8e3 100644
--- a/games/mana-games/apps/web/tsconfig.json
+++ b/games/mana-games/apps/web/tsconfig.json
@@ -1,5 +1,14 @@
 {
-	"extends": "astro/tsconfigs/strict",
-	"include": [".astro/types.d.ts", "**/*"],
-	"exclude": ["dist"]
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
 }
diff --git a/games/mana-games/apps/web/vite.config.ts b/games/mana-games/apps/web/vite.config.ts
new file mode 100644
index 000000000..d4e6c2a84
--- /dev/null
+++ b/games/mana-games/apps/web/vite.config.ts
@@ -0,0 +1,33 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
+import { createPWAConfig } from '@manacore/shared-pwa';
+import { MANACORE_SHARED_PACKAGES, getBuildDefines } from '@manacore/shared-vite-config';
+
+export default defineConfig({
+	plugins: [
+		sveltekit(),
+		SvelteKitPWA(
+			createPWAConfig({
+				name: 'Mana Games - Browser-Spiele',
+				shortName: 'Mana Games',
+				description: 'AI-powered Browser-Games Plattform',
+				themeColor: '#00ff88',
+				preset: 'minimal',
+			})
+		),
+	],
+	server: {
+		port: 5210,
+		strictPort: true,
+	},
+	ssr: {
+		noExternal: [...MANACORE_SHARED_PACKAGES],
+	},
+	optimizeDeps: {
+		exclude: [...MANACORE_SHARED_PACKAGES],
+	},
+	define: {
+		...getBuildDefines(),
+	},
+});