diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 5525e873e..f1b2e0ef9 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -55,6 +55,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build shared packages
+        run: pnpm run build:packages
+
       - name: Type check
         run: pnpm --filter @${{ matrix.project }}/backend type-check
         continue-on-error: true
@@ -117,6 +120,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build shared packages
+        run: pnpm run build:packages
+
       - name: Type check
         run: pnpm --filter @${{ matrix.project }}/mobile type-check
         continue-on-error: true
@@ -176,6 +182,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build shared packages
+        run: pnpm run build:packages
+
       - name: Type check
         run: pnpm --filter @${{ matrix.project }}/web check
         continue-on-error: true
@@ -228,6 +237,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build shared packages
+        run: pnpm run build:packages
+
       - name: Install Playwright browsers
         run: pnpm --filter @${{ matrix.project }}/web exec playwright install --with-deps chromium
 
@@ -273,6 +285,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build shared packages
+        run: pnpm run build:packages
+
       - name: Type check shared packages
         run: pnpm --filter '@manacore/*' type-check
         continue-on-error: true
@@ -318,6 +333,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build shared packages
+        run: pnpm run build:packages
+
       - name: Check formatting
         run: pnpm run format:check
 
diff --git a/.prettierignore b/.prettierignore
index 3e227d090..3b5590518 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,6 +11,9 @@ build/
 node_modules/
 .turbo/
 
+# Archived apps (excluded from workspace)
+apps-archived/
+
 # Lock files
 pnpm-lock.yaml
 package-lock.json
@@ -31,8 +34,57 @@ TESTING_STRATEGY_AUTH_CREDITS.md
 .eslintcache
 .prettiercache
 
-# Files with pseudo-code or example syntax
-apps/maerchenzauber/apps/mobile/ANALYTICS.md
-apps/maerchenzauber/apps/landing/src/components/sections/CharacterGallery.astro
-apps/maerchenzauber/apps/landing/src/components/sections/StoryShowcase.astro
-apps/maerchenzauber/apps/landing/src/pages/privacy.astro
+# Astro files with JSX-style comments (valid Astro but Prettier can't parse)
+apps/manacore/apps/landing/src/components/content/HeroSection.astro
+apps/manacore/apps/landing/src/components/sections/ManaPrinciple.astro
+apps/manacore/apps/landing/src/pages/apps/index.astro
+apps/manacore/apps/landing/src/pages/privacy/index.astro
+games/mana-games/apps/web/src/layouts/Layout.astro
+games/mana-games/apps/web/src/pages/games/[slug].astro
+games/mana-games/apps/web/src/pages/games/*.astro
+packages/shared-landing-ui/src/sections/HeroSection.astro
+packages/shared-landing-ui/src/sections/StepsSection.astro
+packages/shared-landing-ui/src/sections/TestimonialSection.astro
+
+# Documentation files with unfenced code examples
+**/docs/**/*.md
+**/Docs/**/*.md
+**/*CLAUDE.md
+**/*README.md
+**/*GUIDE*.md
+**/*SETUP*.md
+**/*ARCHITECTURE*.md
+**/*PLAN*.md
+**/*REPORT*.md
+**/*MIGRATION*.md
+**/*SYSTEM*.md
+**/*IMPLEMENTATION*.md
+**/*TESTING*.md
+**/*SPACING*.md
+**/*CREDIT*.md
+**/*AUTH*.md
+**/*JWT*.md
+**/*I18N*.md
+**/*ROUTE*.md
+**/*ANDROID*.md
+**/*IOS*.md
+apps/chat/FEATURE_REQUIREMENTS.md
+apps/manadeck/CI_CD_SETUP_GUIDE.md
+apps/manadeck/MANA_CORE_INTEGRATION_CHECKLIST.md
+apps/picture/DEPLOYMENT_COMPLETE.md
+apps/zitare/apps/web/THEMING.md
+BACKEND_DESIGN_PATTERN_AUDIT.md
+COMPATIBILITY_MATRIX_AND_REMEDIATION.md
+cicd/
+
+# Astro files with JSX comments
+apps/picture/apps/landing/src/components/Features.astro
+apps/picture/apps/landing/src/components/promptTemplates/CategoryGrid.astro
+
+# Partial/temporary files
+**/.!*
+
+# Quick start guides with code examples
+**/*QUICK*.md
+**/*QUICKSTART*.md
+
diff --git a/AUTH_DOCUMENTATION_INDEX.md b/AUTH_DOCUMENTATION_INDEX.md
index 98f29900b..3d0edf2ed 100644
--- a/AUTH_DOCUMENTATION_INDEX.md
+++ b/AUTH_DOCUMENTATION_INDEX.md
@@ -12,7 +12,9 @@
 Choose the document that best fits your needs:
 
 ### I need quick answers
+
 → **AUTH_QUICK_REFERENCE.md** (6.4 KB)
+
 - Essential endpoints table
 - Common curl commands
 - Guard patterns
@@ -21,7 +23,9 @@ Choose the document that best fits your needs:
 - 5-minute read
 
 ### I'm implementing auth in a new backend
+
 → **AUTH_VALIDATION_CHECKLIST.md** (11 KB)
+
 - Pre-integration checklist
 - Implementation steps
 - Testing procedures
@@ -30,7 +34,9 @@ Choose the document that best fits your needs:
 - Use for approval
 
 ### I need comprehensive details
+
 → **AUTH_ARCHITECTURE_REPORT.md** (24 KB)
+
 - Complete 15-section guide
 - API routes documented
 - JWT format explained
@@ -41,7 +47,9 @@ Choose the document that best fits your needs:
 - Use as reference
 
 ### I need executive summary
+
 → **AUTH_ANALYSIS_SUMMARY.md** (11 KB)
+
 - Key findings
 - Architecture decisions
 - Validation results
@@ -53,14 +61,14 @@ Choose the document that best fits your needs:
 
 ## Document Comparison
 
-| Aspect | Quick Ref | Checklist | Report | Summary |
-|--------|-----------|-----------|--------|---------|
-| **Audience** | Developers | Implementers | Architects | Managers |
-| **Length** | Short | Medium | Comprehensive | Medium |
-| **Details** | Minimal | Practical | Complete | Strategic |
-| **Use Case** | Daily lookup | Integration | Reference | Overview |
-| **Sign-off** | N/A | Yes | N/A | N/A |
-| **Code Examples** | Many | Some | Complete | Few |
+| Aspect            | Quick Ref    | Checklist    | Report        | Summary   |
+| ----------------- | ------------ | ------------ | ------------- | --------- |
+| **Audience**      | Developers   | Implementers | Architects    | Managers  |
+| **Length**        | Short        | Medium       | Comprehensive | Medium    |
+| **Details**       | Minimal      | Practical    | Complete      | Strategic |
+| **Use Case**      | Daily lookup | Integration  | Reference     | Overview  |
+| **Sign-off**      | N/A          | Yes          | N/A           | N/A       |
+| **Code Examples** | Many         | Some         | Complete      | Few       |
 
 ---
 
@@ -69,6 +77,7 @@ Choose the document that best fits your needs:
 ### Core Concepts
 
 **Covered in:**
+
 - **Service Architecture** → Report (Section 1)
 - **JWT Algorithm** → Report (Section 2), Summary (Finding 2)
 - **Token Claims** → Report (Section 2), Quick Ref (Token Structure)
@@ -77,6 +86,7 @@ Choose the document that best fits your needs:
 ### Implementation
 
 **Covered in:**
+
 - **Backend Setup** → Checklist (Implementation), Report (Section 9)
 - **Guard Usage** → Quick Ref (Guard Patterns), Report (Section 4)
 - **Decorator Patterns** → Report (Section 4), Checklist (Guard Setup)
@@ -85,6 +95,7 @@ Choose the document that best fits your needs:
 ### Testing & Validation
 
 **Covered in:**
+
 - **Manual Testing** → Checklist (Testing section), Quick Ref (Requests)
 - **Dev Bypass** → Quick Ref (Development Bypass), Checklist (Testing)
 - **Integration Testing** → Checklist (Integration Testing)
@@ -93,6 +104,7 @@ Choose the document that best fits your needs:
 ### Security & Operations
 
 **Covered in:**
+
 - **Security** → Report (Section 13), Summary (Risk Assessment)
 - **Environment Config** → Report (Section 6), Checklist (Env Variables)
 - **Troubleshooting** → Report (Section 10), Quick Ref (Troubleshooting)
@@ -103,26 +115,31 @@ Choose the document that best fits your needs:
 ## Implementation Workflow
 
 ### Step 1: Review Architecture (30 min)
+
 1. Start with **AUTH_QUICK_REFERENCE.md** - understand basics
 2. Read **AUTH_ANALYSIS_SUMMARY.md** - understand decisions
 3. Skim **AUTH_ARCHITECTURE_REPORT.md** sections 1-4
 
 ### Step 2: Plan Integration (15 min)
+
 1. Read **AUTH_VALIDATION_CHECKLIST.md** Pre-Integration section
 2. Determine integration path (A or B)
 3. Set up environment variables
 
 ### Step 3: Implement (2-3 hours)
+
 1. Reference **AUTH_ARCHITECTURE_REPORT.md** Section 9
 2. Follow **AUTH_VALIDATION_CHECKLIST.md** Implementation section
 3. Use code examples from Quick Reference
 
 ### Step 4: Test (1-2 hours)
+
 1. Follow **AUTH_VALIDATION_CHECKLIST.md** Testing section
 2. Use curl commands from Quick Reference
 3. Verify development bypass works
 
 ### Step 5: Validate (30 min)
+
 1. Complete **AUTH_VALIDATION_CHECKLIST.md** all sections
 2. Get code review approval
 3. Sign off checklist
@@ -132,6 +149,7 @@ Choose the document that best fits your needs:
 ## File Locations in Monorepo
 
 ### Documentation (At Monorepo Root)
+
 ```
 /
 ├── AUTH_DOCUMENTATION_INDEX.md (this file)
@@ -142,6 +160,7 @@ Choose the document that best fits your needs:
 ```
 
 ### Source Code (Analyzed)
+
 ```
 services/mana-core-auth/
 ├── src/auth/
@@ -163,6 +182,7 @@ packages/
 ## Key Findings Summary
 
 ### Central Service
+
 - **Name:** mana-core-auth
 - **Port:** 3001
 - **Framework:** NestJS + Better Auth
@@ -170,11 +190,13 @@ packages/
 - **Database:** PostgreSQL with Drizzle
 
 ### Integration Patterns
+
 - **Path A:** `@manacore/shared-nestjs-auth` (lightweight)
 - **Path B:** `@mana-core/nestjs-integration` (with credits)
 - **Pattern:** Centralized validation via `/api/v1/auth/validate`
 
 ### Canonical Design
+
 - **JWT Claims:** Minimal (sub, email, role, sid only)
 - **Token Expiry:** 15 minutes (access), 7 days (refresh)
 - **Rotation:** Refresh token rotation + soft delete
@@ -182,6 +204,7 @@ packages/
 - **Injection:** Use `@CurrentUser()` decorator
 
 ### Environment Setup
+
 ```env
 # Required
 MANA_CORE_AUTH_URL=http://localhost:3001
@@ -251,6 +274,7 @@ See **AUTH_ARCHITECTURE_REPORT.md** Section 10 for troubleshooting guide.
 ## Testing Quick Commands
 
 ### Get Token
+
 ```bash
 curl -X POST http://localhost:3001/api/v1/auth/login \
   -H "Content-Type: application/json" \
@@ -258,12 +282,14 @@ curl -X POST http://localhost:3001/api/v1/auth/login \
 ```
 
 ### Test Protected Endpoint
+
 ```bash
 curl http://localhost:3007/api/favorites \
   -H "Authorization: Bearer $TOKEN"
 ```
 
 ### Validate Token
+
 ```bash
 curl -X POST http://localhost:3001/api/v1/auth/validate \
   -H "Content-Type: application/json" \
@@ -271,6 +297,7 @@ curl -X POST http://localhost:3001/api/v1/auth/validate \
 ```
 
 ### Decode Token
+
 ```bash
 echo $TOKEN | cut -d'.' -f2 | base64 -d | jq '.'
 ```
@@ -299,17 +326,20 @@ More commands in **AUTH_QUICK_REFERENCE.md**.
 ## Support & Resources
 
 ### Documents in This Analysis
+
 - **Getting started?** → AUTH_QUICK_REFERENCE.md
 - **Implementing?** → AUTH_VALIDATION_CHECKLIST.md
 - **Deep dive?** → AUTH_ARCHITECTURE_REPORT.md
 - **Executive brief?** → AUTH_ANALYSIS_SUMMARY.md
 
 ### External Resources
+
 - **Better Auth Docs:** https://www.better-auth.com/docs
 - **JWT.io:** https://jwt.io (decoder)
 - **EdDSA:** https://en.wikipedia.org/wiki/EdDSA
 
 ### Project Resources
+
 - **Source code:** services/mana-core-auth/
 - **Project guide:** services/mana-core-auth/CLAUDE.md
 - **Example backend:** apps/zitare/apps/backend/
@@ -323,12 +353,14 @@ More commands in **AUTH_QUICK_REFERENCE.md**.
 **Version:** 1.0
 
 ### When to Update
+
 - Architecture changes
 - New integration patterns discovered
 - Breaking changes to API
 - Security updates
 
 ### Update Process
+
 1. Update AUTH_ARCHITECTURE_REPORT.md (source of truth)
 2. Update AUTH_VALIDATION_CHECKLIST.md if implementation changes
 3. Update AUTH_QUICK_REFERENCE.md if commands change
@@ -344,6 +376,7 @@ More commands in **AUTH_QUICK_REFERENCE.md**.
 **Status:** APPROVED FOR PRODUCTION USE
 
 **Next Steps:**
+
 1. Share documents with development team
 2. Reference in PR review process
 3. Use checklist for new backend integrations
@@ -356,6 +389,7 @@ More commands in **AUTH_QUICK_REFERENCE.md**.
 ## Table of Contents (All Documents)
 
 ### AUTH_QUICK_REFERENCE.md
+
 1. Core Service
 2. Essential Endpoints
 3. Backend Integration
@@ -371,6 +405,7 @@ More commands in **AUTH_QUICK_REFERENCE.md**.
 13. Related Packages
 
 ### AUTH_VALIDATION_CHECKLIST.md
+
 1. Pre-Integration Checklist
 2. Implementation Checklist
 3. API Route Validation
@@ -384,6 +419,7 @@ More commands in **AUTH_QUICK_REFERENCE.md**.
 11. Sign-Off
 
 ### AUTH_ARCHITECTURE_REPORT.md
+
 1. Executive Summary
 2. API Route Structure & Versioning
 3. JWT Token Format & Structure
@@ -401,6 +437,7 @@ More commands in **AUTH_QUICK_REFERENCE.md**.
 15. References & Further Reading
 
 ### AUTH_ANALYSIS_SUMMARY.md
+
 1. Objective
 2. Key Findings
 3. Architecture Decisions (Validated)
diff --git a/CLAUDE.md b/CLAUDE.md
index 10946440c..6ad47d2e6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -157,12 +157,12 @@ All projects use **mana-core-auth** as the central authentication service:
 
 #### Key Components
 
-| Component | Purpose |
-|-----------|---------|
-| `services/mana-core-auth` | Central auth service (Better Auth + EdDSA JWT) |
-| `@manacore/shared-nestjs-auth` | Shared NestJS guards/decorators for JWT validation |
-| `@mana-core/nestjs-integration` | Extended NestJS module with auth + credits |
-| `@manacore/shared-auth` | Client-side auth for web/mobile apps |
+| Component                       | Purpose                                            |
+| ------------------------------- | -------------------------------------------------- |
+| `services/mana-core-auth`       | Central auth service (Better Auth + EdDSA JWT)     |
+| `@manacore/shared-nestjs-auth`  | Shared NestJS guards/decorators for JWT validation |
+| `@mana-core/nestjs-integration` | Extended NestJS module with auth + credits         |
+| `@manacore/shared-auth`         | Client-side auth for web/mobile apps               |
 
 #### NestJS Backend Integration
 
@@ -175,10 +175,10 @@ import { JwtAuthGuard, CurrentUser, CurrentUserData } from '@manacore/shared-nes
 @Controller('api')
 @UseGuards(JwtAuthGuard)
 export class MyController {
-  @Get('profile')
-  getProfile(@CurrentUser() user: CurrentUserData) {
-    return { userId: user.userId, email: user.email };
-  }
+	@Get('profile')
+	getProfile(@CurrentUser() user: CurrentUserData) {
+		return { userId: user.userId, email: user.email };
+	}
 }
 ```
 
@@ -189,17 +189,17 @@ export class MyController {
 import { ManaCoreModule } from '@mana-core/nestjs-integration';
 
 @Module({
-  imports: [
-    ManaCoreModule.forRootAsync({
-      imports: [ConfigModule],
-      useFactory: (config: ConfigService) => ({
-        appId: config.get('APP_ID'),
-        serviceKey: config.get('MANA_CORE_SERVICE_KEY'),
-        debug: config.get('NODE_ENV') === 'development',
-      }),
-      inject: [ConfigService],
-    }),
-  ],
+	imports: [
+		ManaCoreModule.forRootAsync({
+			imports: [ConfigModule],
+			useFactory: (config: ConfigService) => ({
+				appId: config.get('APP_ID'),
+				serviceKey: config.get('MANA_CORE_SERVICE_KEY'),
+				debug: config.get('NODE_ENV') === 'development',
+			}),
+			inject: [ConfigService],
+		}),
+	],
 })
 export class AppModule {}
 
@@ -211,13 +211,13 @@ import { CreditClientService } from '@mana-core/nestjs-integration';
 @Controller('api')
 @UseGuards(AuthGuard)
 export class ApiController {
-  constructor(private creditClient: CreditClientService) {}
+	constructor(private creditClient: CreditClientService) {}
 
-  @Post('generate')
-  async generate(@CurrentUser() user: any) {
-    await this.creditClient.consumeCredits(user.sub, 'generation', 10, 'AI generation');
-    // ... do work
-  }
+	@Post('generate')
+	async generate(@CurrentUser() user: any) {
+		await this.creditClient.consumeCredits(user.sub, 'generation', 10, 'AI generation');
+		// ... do work
+	}
 }
 ```
 
@@ -241,13 +241,13 @@ APP_ID=your-app-id
 
 ```json
 {
-  "sub": "user-id",
-  "email": "user@example.com",
-  "role": "user",
-  "sid": "session-id",
-  "exp": 1764606251,
-  "iss": "manacore",
-  "aud": "manacore"
+	"sub": "user-id",
+	"email": "user@example.com",
+	"role": "user",
+	"sid": "session-id",
+	"exp": 1764606251,
+	"iss": "manacore",
+	"aud": "manacore"
 }
 ```
 
@@ -272,12 +272,12 @@ curl http://localhost:3007/api/favorites \
 
 #### Integrated Backends
 
-| Backend | Package | Port |
-|---------|---------|------|
-| Chat | `@mana-core/nestjs-integration` | 3002 |
-| Picture | `@manacore/shared-nestjs-auth` | 3006 |
-| Zitare | `@manacore/shared-nestjs-auth` | 3007 |
-| Presi | Custom (same pattern) | 3008 |
+| Backend  | Package                         | Port |
+| -------- | ------------------------------- | ---- |
+| Chat     | `@mana-core/nestjs-integration` | 3002 |
+| Picture  | `@manacore/shared-nestjs-auth`  | 3006 |
+| Zitare   | `@manacore/shared-nestjs-auth`  | 3007 |
+| Presi    | Custom (same pattern)           | 3008 |
 | ManaDeck | `@mana-core/nestjs-integration` | 3009 |
 
 ### Svelte 5 Runes Mode (Web Apps)
@@ -299,17 +299,17 @@ $: doubled = count * 2;
 
 ## Shared Packages (`packages/`)
 
-| Package                          | Purpose                                                 |
-| -------------------------------- | ------------------------------------------------------- |
-| `@manacore/shared-nestjs-auth`   | NestJS JWT validation guards via mana-core-auth         |
-| `@mana-core/nestjs-integration`  | NestJS module with auth guards + credit client          |
-| `@manacore/shared-auth`          | Client-side auth service for web/mobile apps            |
-| `@manacore/shared-supabase`      | Unified Supabase client                                 |
-| `@manacore/shared-types`         | Common TypeScript types                                 |
-| `@manacore/shared-utils`         | Utility functions                                       |
-| `@manacore/shared-ui`            | React Native UI components                              |
-| `@manacore/shared-theme`         | Theme configuration                                     |
-| `@manacore/shared-i18n`          | Internationalization                                    |
+| Package                         | Purpose                                         |
+| ------------------------------- | ----------------------------------------------- |
+| `@manacore/shared-nestjs-auth`  | NestJS JWT validation guards via mana-core-auth |
+| `@mana-core/nestjs-integration` | NestJS module with auth guards + credit client  |
+| `@manacore/shared-auth`         | Client-side auth service for web/mobile apps    |
+| `@manacore/shared-supabase`     | Unified Supabase client                         |
+| `@manacore/shared-types`        | Common TypeScript types                         |
+| `@manacore/shared-utils`        | Utility functions                               |
+| `@manacore/shared-ui`           | React Native UI components                      |
+| `@manacore/shared-theme`        | Theme configuration                             |
+| `@manacore/shared-i18n`         | Internationalization                            |
 
 Import shared packages:
 
diff --git a/COMMANDS.md b/COMMANDS.md
index 395271bb6..3ce65006d 100644
--- a/COMMANDS.md
+++ b/COMMANDS.md
@@ -1,4 +1,5 @@
 # Manacore Monorepo - Befehle
+
 # Alles starten (PostgreSQL, Redis, Auth, Chat)
 
 pnpm docker:up:all
@@ -10,8 +11,6 @@ pnpm dev:manacore:app
 pnpm dev:zitare:app
 pnpm dev:presi:app
 
-
-
 Übersicht aller wichtigen Befehle zum Starten, Stoppen und Verwalten der Apps.
 
 ## Inhaltsverzeichnis
@@ -116,12 +115,12 @@ pnpm db:studio            # Drizzle Studio öffnen
 
 ## Chat
 
-| App | Port | Befehl |
-|-----|------|--------|
-| Web | 5174 | `pnpm dev:chat:web` |
+| App     | Port | Befehl                  |
+| ------- | ---- | ----------------------- |
+| Web     | 5174 | `pnpm dev:chat:web`     |
 | Backend | 3002 | `pnpm dev:chat:backend` |
-| Mobile | 8081 | `pnpm dev:chat:mobile` |
-| Landing | - | `pnpm dev:chat:landing` |
+| Mobile  | 8081 | `pnpm dev:chat:mobile`  |
+| Landing | -    | `pnpm dev:chat:landing` |
 
 ```bash
 # Web + Backend zusammen starten
@@ -135,12 +134,12 @@ pnpm chat:dev
 
 ## Picture
 
-| App | Port | Befehl |
-|-----|------|--------|
-| Web | 5173 | `pnpm dev:picture:web` |
-| Backend | - | `pnpm dev:picture:backend` |
-| Mobile | 8081 | `pnpm dev:picture:mobile` |
-| Landing | - | `pnpm dev:picture:landing` |
+| App     | Port | Befehl                     |
+| ------- | ---- | -------------------------- |
+| Web     | 5173 | `pnpm dev:picture:web`     |
+| Backend | -    | `pnpm dev:picture:backend` |
+| Mobile  | 8081 | `pnpm dev:picture:mobile`  |
+| Landing | -    | `pnpm dev:picture:landing` |
 
 ```bash
 # Web + Backend zusammen starten
@@ -154,12 +153,12 @@ pnpm picture:dev
 
 ## Manadeck
 
-| App | Port | Befehl |
-|-----|------|--------|
-| Web | - | `pnpm dev:manadeck:web` |
-| Backend | - | `pnpm dev:manadeck:backend` |
-| Mobile | 8081 | `pnpm dev:manadeck:mobile` |
-| Landing | - | `pnpm dev:manadeck:landing` |
+| App     | Port | Befehl                      |
+| ------- | ---- | --------------------------- |
+| Web     | -    | `pnpm dev:manadeck:web`     |
+| Backend | -    | `pnpm dev:manadeck:backend` |
+| Mobile  | 8081 | `pnpm dev:manadeck:mobile`  |
+| Landing | -    | `pnpm dev:manadeck:landing` |
 
 ```bash
 # Web + Backend zusammen starten
@@ -173,12 +172,12 @@ pnpm manadeck:dev
 
 ## Zitare
 
-| App | Port | Befehl |
-|-----|------|--------|
-| Web | - | `pnpm dev:zitare:web` |
-| Backend | - | `pnpm dev:zitare:backend` |
-| Mobile | 8081 | `pnpm dev:zitare:mobile` |
-| Landing | - | `pnpm dev:zitare:landing` |
+| App     | Port | Befehl                    |
+| ------- | ---- | ------------------------- |
+| Web     | -    | `pnpm dev:zitare:web`     |
+| Backend | -    | `pnpm dev:zitare:backend` |
+| Mobile  | 8081 | `pnpm dev:zitare:mobile`  |
+| Landing | -    | `pnpm dev:zitare:landing` |
 
 ```bash
 # Web + Backend zusammen starten
@@ -192,11 +191,11 @@ pnpm zitare:dev
 
 ## Presi
 
-| App | Port | Befehl |
-|-----|------|--------|
-| Web | - | `pnpm dev:presi:web` |
-| Backend | - | `pnpm dev:presi:backend` |
-| Mobile | 8081 | `pnpm dev:presi:mobile` |
+| App     | Port | Befehl                   |
+| ------- | ---- | ------------------------ |
+| Web     | -    | `pnpm dev:presi:web`     |
+| Backend | -    | `pnpm dev:presi:backend` |
+| Mobile  | 8081 | `pnpm dev:presi:mobile`  |
 
 ```bash
 # Web + Backend zusammen starten
@@ -215,11 +214,11 @@ pnpm presi:db:seed     # Seed-Daten
 
 ## Manacore
 
-| App | Port | Befehl |
-|-----|------|--------|
-| Web | - | `pnpm dev:manacore:web` |
-| Mobile | 8081 | `pnpm dev:manacore:mobile` |
-| Landing | - | `pnpm dev:manacore:landing` |
+| App     | Port | Befehl                      |
+| ------- | ---- | --------------------------- |
+| Web     | -    | `pnpm dev:manacore:web`     |
+| Mobile  | 8081 | `pnpm dev:manacore:mobile`  |
+| Landing | -    | `pnpm dev:manacore:landing` |
 
 ```bash
 # Alles
diff --git a/apps/chat/CLAUDE.md b/apps/chat/CLAUDE.md
index 1e1569ef5..8dc0f8a9b 100644
--- a/apps/chat/CLAUDE.md
+++ b/apps/chat/CLAUDE.md
@@ -114,11 +114,11 @@ EXPO_PUBLIC_BACKEND_URL=http://localhost:3001
 
 ## AI Models Available
 
-| Model ID                             | Name              | Description                    | Default |
-| ------------------------------------ | ----------------- | ------------------------------ | ------- |
-| 550e8400-e29b-41d4-a716-446655440101 | Gemini 2.5 Flash  | Fast, efficient responses      | Yes     |
-| 550e8400-e29b-41d4-a716-446655440102 | Gemini 2.0 Flash-Lite | Ultra-lightweight model    | No      |
-| 550e8400-e29b-41d4-a716-446655440103 | Gemini 2.5 Pro    | Most capable model             | No      |
+| Model ID                             | Name                  | Description               | Default |
+| ------------------------------------ | --------------------- | ------------------------- | ------- |
+| 550e8400-e29b-41d4-a716-446655440101 | Gemini 2.5 Flash      | Fast, efficient responses | Yes     |
+| 550e8400-e29b-41d4-a716-446655440102 | Gemini 2.0 Flash-Lite | Ultra-lightweight model   | No      |
+| 550e8400-e29b-41d4-a716-446655440103 | Gemini 2.5 Pro        | Most capable model        | No      |
 
 ## Important Notes
 
diff --git a/apps/chat/apps/mobile/app/settings.tsx b/apps/chat/apps/mobile/app/settings.tsx
index 974c3fc2c..985077615 100644
--- a/apps/chat/apps/mobile/app/settings.tsx
+++ b/apps/chat/apps/mobile/app/settings.tsx
@@ -134,8 +134,7 @@ export default function SettingsScreen() {
 									style={[
 										styles.themeOption,
 										{
-											borderColor:
-												selectedTheme === theme.id ? colors.primary : colors.border,
+											borderColor: selectedTheme === theme.id ? colors.primary : colors.border,
 											backgroundColor:
 												selectedTheme === theme.id ? colors.primary + '10' : 'transparent',
 										},
@@ -272,9 +271,7 @@ export default function SettingsScreen() {
 								style={styles.settingIcon}
 							/>
 							<View>
-								<Text style={[styles.settingLabel, { color: colors.text }]}>
-									Passwort ändern
-								</Text>
+								<Text style={[styles.settingLabel, { color: colors.text }]}>Passwort ändern</Text>
 								<Text style={[styles.settingDescription, { color: colors.text + '70' }]}>
 									Aktualisiere dein Passwort regelmäßig
 								</Text>
@@ -285,12 +282,7 @@ export default function SettingsScreen() {
 
 					<TouchableOpacity style={styles.actionRowLast} onPress={handleDeleteChatHistory}>
 						<View style={styles.settingInfo}>
-							<Ionicons
-								name="trash-outline"
-								size={22}
-								color="#FF3B30"
-								style={styles.settingIcon}
-							/>
+							<Ionicons name="trash-outline" size={22} color="#FF3B30" style={styles.settingIcon} />
 							<View>
 								<Text style={[styles.settingLabel, { color: '#FF3B30' }]}>
 									Chat-Verlauf löschen
diff --git a/apps/chat/apps/web/src/lib/components/Toast.svelte b/apps/chat/apps/web/src/lib/components/Toast.svelte
index af43a277e..f56e66e97 100644
--- a/apps/chat/apps/web/src/lib/components/Toast.svelte
+++ b/apps/chat/apps/web/src/lib/components/Toast.svelte
@@ -28,7 +28,9 @@
 		{#each toasts as toast (toast.id)}
 			{@const Icon = icons[toast.type]}
 			<div
-				class="flex items-start gap-3 px-4 py-3 rounded-xl shadow-lg backdrop-blur-xl border border-white/20 animate-slide-in {colors[toast.type]}"
+				class="flex items-start gap-3 px-4 py-3 rounded-xl shadow-lg backdrop-blur-xl border border-white/20 animate-slide-in {colors[
+					toast.type
+				]}"
 				role="alert"
 			>
 				<Icon size={20} weight="fill" class="flex-shrink-0 mt-0.5" />
diff --git a/apps/chat/apps/web/src/lib/components/chat/ChatLayout.svelte b/apps/chat/apps/web/src/lib/components/chat/ChatLayout.svelte
index 192558f3b..4456c5a5d 100644
--- a/apps/chat/apps/web/src/lib/components/chat/ChatLayout.svelte
+++ b/apps/chat/apps/web/src/lib/components/chat/ChatLayout.svelte
@@ -4,7 +4,15 @@
 	import { conversationsStore } from '$lib/stores/conversations.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { isSidebarMode, isNavCollapsed } from '$lib/stores/navigation';
-	import { MagnifyingGlass, X, Plus, ChatCircle, Archive, Trash, PushPin } from '@manacore/shared-icons';
+	import {
+		MagnifyingGlass,
+		X,
+		Plus,
+		ChatCircle,
+		Archive,
+		Trash,
+		PushPin,
+	} from '@manacore/shared-icons';
 	import { ConfirmationModal } from '@manacore/shared-ui';
 	import { goto } from '$app/navigation';
 	import type { Snippet } from 'svelte';
@@ -72,7 +80,7 @@
 		yesterday: 'Gestern',
 		thisWeek: 'Diese Woche',
 		thisMonth: 'Dieser Monat',
-		older: 'Älter'
+		older: 'Älter',
 	};
 
 	function getDateSection(dateString: string): DateSection {
@@ -117,7 +125,7 @@
 			yesterday: [],
 			thisWeek: [],
 			thisMonth: [],
-			older: []
+			older: [],
 		};
 
 		for (const conv of unpinnedConversations) {
@@ -331,7 +339,9 @@
 					<!-- Pinned Section -->
 					{#if pinnedConversations.length > 0}
 						<div class="mb-5">
-							<h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 flex items-center gap-1.5">
+							<h4
+								class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 flex items-center gap-1.5"
+							>
 								<PushPin size={12} weight="fill" class="text-primary" />
 								Angepinnt
 							</h4>
@@ -339,17 +349,11 @@
 								<a
 									href="/chat/{conv.id}"
 									class="group block w-full rounded-xl bg-white/60 dark:bg-white/5 backdrop-blur-sm border border-black/10 dark:border-white/20 p-4 text-left transition-all mb-3 hover:shadow-md hover:bg-white/80 dark:hover:bg-white/10
-										   {isActive(conv.id)
-										? 'bg-white/90 dark:bg-white/15 shadow-md border-primary/30'
-										: ''}"
+										   {isActive(conv.id) ? 'bg-white/90 dark:bg-white/15 shadow-md border-primary/30' : ''}"
 								>
 									<!-- Title Row -->
 									<div class="mb-1.5 flex items-center gap-2">
-										<PushPin
-											size={16}
-											weight="fill"
-											class="flex-shrink-0 text-primary"
-										/>
+										<PushPin size={16} weight="fill" class="flex-shrink-0 text-primary" />
 										<h3 class="text-sm font-semibold line-clamp-1 text-foreground flex-1">
 											{conv.title || 'Neue Konversation'}
 										</h3>
@@ -367,14 +371,14 @@
 										</span>
 										<div class="flex items-center gap-1">
 											{#if conv.documentMode}
-												<span
-													class="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full"
-												>
+												<span class="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full">
 													Dokument
 												</span>
 											{/if}
 											<!-- Action Buttons (visible on hover) -->
-											<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+											<div
+												class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
+											>
 												<button
 													onclick={(e) => handleTogglePin(e, conv.id, true)}
 													class="p-1.5 text-primary hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
@@ -409,16 +413,16 @@
 						{@const convs = groupedConversations()[section]}
 						{#if convs.length > 0}
 							<div class="mb-5">
-								<h4 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+								<h4
+									class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2"
+								>
 									{sectionLabels[section]}
 								</h4>
 								{#each convs as conv (conv.id)}
 									<a
 										href="/chat/{conv.id}"
 										class="group block w-full rounded-xl bg-white/60 dark:bg-white/5 backdrop-blur-sm border border-black/10 dark:border-white/20 p-4 text-left transition-all mb-3 hover:shadow-md hover:bg-white/80 dark:hover:bg-white/10
-											   {isActive(conv.id)
-											? 'bg-white/90 dark:bg-white/15 shadow-md border-primary/30'
-											: ''}"
+											   {isActive(conv.id) ? 'bg-white/90 dark:bg-white/15 shadow-md border-primary/30' : ''}"
 									>
 										<!-- Title Row -->
 										<div class="mb-1.5 flex items-center gap-2">
@@ -446,14 +450,14 @@
 											</span>
 											<div class="flex items-center gap-1">
 												{#if conv.documentMode}
-													<span
-														class="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full"
-													>
+													<span class="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full">
 														Dokument
 													</span>
 												{/if}
 												<!-- Action Buttons (visible on hover) -->
-												<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+												<div
+													class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
+												>
 													<button
 														onclick={(e) => handleTogglePin(e, conv.id, false)}
 														class="p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
diff --git a/apps/chat/apps/web/src/lib/components/chat/ConversationList.svelte b/apps/chat/apps/web/src/lib/components/chat/ConversationList.svelte
index 317ac3e82..26e10c394 100644
--- a/apps/chat/apps/web/src/lib/components/chat/ConversationList.svelte
+++ b/apps/chat/apps/web/src/lib/components/chat/ConversationList.svelte
@@ -138,9 +138,7 @@
 							<a
 								href="/chat/{conv.id}"
 								class="block px-3 py-2 mx-2 rounded-lg transition-colors
-								       {isActive
-									? 'bg-primary/10 text-primary'
-									: 'hover:bg-muted text-foreground'}"
+								       {isActive ? 'bg-primary/10 text-primary' : 'hover:bg-muted text-foreground'}"
 							>
 								<div class="flex items-center justify-between gap-2">
 									<span class="text-sm font-medium truncate pr-6">
diff --git a/apps/chat/apps/web/src/lib/components/spaces/SpaceCard.svelte b/apps/chat/apps/web/src/lib/components/spaces/SpaceCard.svelte
index 079c0b14f..2987e1a10 100644
--- a/apps/chat/apps/web/src/lib/components/spaces/SpaceCard.svelte
+++ b/apps/chat/apps/web/src/lib/components/spaces/SpaceCard.svelte
@@ -52,9 +52,7 @@
 						{space.name}
 					</h3>
 					{#if isOwner}
-						<span
-							class="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded"
-						>
+						<span class="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded">
 							Besitzer
 						</span>
 					{/if}
diff --git a/apps/chat/apps/web/src/lib/components/spaces/SpaceForm.svelte b/apps/chat/apps/web/src/lib/components/spaces/SpaceForm.svelte
index f4282daed..34fbd9763 100644
--- a/apps/chat/apps/web/src/lib/components/spaces/SpaceForm.svelte
+++ b/apps/chat/apps/web/src/lib/components/spaces/SpaceForm.svelte
@@ -50,9 +50,7 @@
 	>
 		<!-- Name -->
 		<div>
-			<label for="name" class="block text-sm font-medium text-foreground mb-1">
-				Name *
-			</label>
+			<label for="name" class="block text-sm font-medium text-foreground mb-1"> Name * </label>
 			<input
 				type="text"
 				id="name"
@@ -71,10 +69,7 @@
 
 		<!-- Description -->
 		<div>
-			<label
-				for="description"
-				class="block text-sm font-medium text-foreground mb-1"
-			>
+			<label for="description" class="block text-sm font-medium text-foreground mb-1">
 				Beschreibung (optional)
 			</label>
 			<textarea
diff --git a/apps/chat/apps/web/src/lib/components/templates/TemplateCard.svelte b/apps/chat/apps/web/src/lib/components/templates/TemplateCard.svelte
index 82153cb22..88a9b4f82 100644
--- a/apps/chat/apps/web/src/lib/components/templates/TemplateCard.svelte
+++ b/apps/chat/apps/web/src/lib/components/templates/TemplateCard.svelte
@@ -20,9 +20,7 @@
 
 <div
 	class="group relative flex rounded-xl overflow-hidden bg-surface shadow-sm hover:shadow-md transition-all
-         {template.isDefault
-		? 'ring-2 ring-primary'
-		: 'border border-border'}"
+         {template.isDefault ? 'ring-2 ring-primary' : 'border border-border'}"
 >
 	<!-- Color Indicator -->
 	<div class="w-2 flex-shrink-0" style="background-color: {template.color}"></div>
@@ -36,7 +34,9 @@
 						{template.name}
 					</h3>
 					{#if template.isDefault}
-						<span class="px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded">
+						<span
+							class="px-2 py-0.5 text-xs font-medium bg-primary text-primary-foreground rounded"
+						>
 							Standard
 						</span>
 					{/if}
diff --git a/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte b/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte
index 53268721f..834f40bdd 100644
--- a/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte
+++ b/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte
@@ -90,9 +90,7 @@
 	>
 		<!-- Name -->
 		<div>
-			<label for="name" class="block text-sm font-medium text-foreground mb-1">
-				Name *
-			</label>
+			<label for="name" class="block text-sm font-medium text-foreground mb-1"> Name * </label>
 			<input
 				type="text"
 				id="name"
@@ -111,10 +109,7 @@
 
 		<!-- Description -->
 		<div>
-			<label
-				for="description"
-				class="block text-sm font-medium text-foreground mb-1"
-			>
+			<label for="description" class="block text-sm font-medium text-foreground mb-1">
 				Beschreibung (optional)
 			</label>
 			<textarea
@@ -131,10 +126,7 @@
 
 		<!-- System Prompt -->
 		<div>
-			<label
-				for="systemPrompt"
-				class="block text-sm font-medium text-foreground mb-1"
-			>
+			<label for="systemPrompt" class="block text-sm font-medium text-foreground mb-1">
 				System-Prompt *
 			</label>
 			<textarea
@@ -158,10 +150,7 @@
 
 		<!-- Initial Question -->
 		<div>
-			<label
-				for="initialQuestion"
-				class="block text-sm font-medium text-foreground mb-1"
-			>
+			<label for="initialQuestion" class="block text-sm font-medium text-foreground mb-1">
 				Beispielfrage (optional)
 			</label>
 			<textarea
@@ -236,9 +225,7 @@
 				type="button"
 				onclick={() => (documentMode = !documentMode)}
 				class="w-full flex items-center justify-between p-4 border rounded-lg transition-colors
-               {documentMode
-					? 'border-primary bg-primary/10'
-					: 'border-border bg-muted'}"
+               {documentMode ? 'border-primary bg-primary/10' : 'border-border bg-muted'}"
 			>
 				<div class="text-left">
 					<p class="font-medium text-foreground">Dokumentmodus aktivieren</p>
diff --git a/apps/chat/apps/web/src/lib/stores/conversations.svelte.ts b/apps/chat/apps/web/src/lib/stores/conversations.svelte.ts
index fe48688d9..a55e9653f 100644
--- a/apps/chat/apps/web/src/lib/stores/conversations.svelte.ts
+++ b/apps/chat/apps/web/src/lib/stores/conversations.svelte.ts
@@ -48,7 +48,8 @@ export const conversationsStore = {
 		try {
 			conversations = await conversationService.getConversations(spaceId);
 		} catch (e) {
-			const message = e instanceof Error ? e.message : 'Konversationen konnten nicht geladen werden';
+			const message =
+				e instanceof Error ? e.message : 'Konversationen konnten nicht geladen werden';
 			error = message;
 			toastStore.error(message);
 			conversations = [];
@@ -67,7 +68,8 @@ export const conversationsStore = {
 		try {
 			archivedConversations = await conversationService.getArchivedConversations();
 		} catch (e) {
-			const message = e instanceof Error ? e.message : 'Archivierte Konversationen konnten nicht geladen werden';
+			const message =
+				e instanceof Error ? e.message : 'Archivierte Konversationen konnten nicht geladen werden';
 			error = message;
 			toastStore.error(message);
 			archivedConversations = [];
@@ -131,7 +133,10 @@ export const conversationsStore = {
 			const conversation = archivedConversations.find((c) => c.id === conversationId);
 			if (conversation) {
 				archivedConversations = archivedConversations.filter((c) => c.id !== conversationId);
-				conversations = sortConversations([{ ...conversation, isArchived: false }, ...conversations]);
+				conversations = sortConversations([
+					{ ...conversation, isArchived: false },
+					...conversations,
+				]);
 			}
 			toastStore.success('Konversation wiederhergestellt');
 		} else {
diff --git a/apps/chat/apps/web/src/lib/stores/toast.svelte.ts b/apps/chat/apps/web/src/lib/stores/toast.svelte.ts
index af686ceab..5528237ff 100644
--- a/apps/chat/apps/web/src/lib/stores/toast.svelte.ts
+++ b/apps/chat/apps/web/src/lib/stores/toast.svelte.ts
@@ -93,7 +93,10 @@ export const toastStore = {
  * Helper function for API error handling
  * Use this in services/stores to show user-friendly error messages
  */
-export function handleApiError(error: unknown, fallbackMessage: string = 'Ein Fehler ist aufgetreten'): string {
+export function handleApiError(
+	error: unknown,
+	fallbackMessage: string = 'Ein Fehler ist aufgetreten'
+): string {
 	const message = error instanceof Error ? error.message : fallbackMessage;
 	toastStore.error(message);
 	return message;
diff --git a/apps/chat/apps/web/src/routes/(protected)/archive/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/archive/+page.svelte
index f1015b53a..8cadc3776 100644
--- a/apps/chat/apps/web/src/routes/(protected)/archive/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/archive/+page.svelte
@@ -81,9 +81,7 @@
 						d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
 					/>
 				</svg>
-				<h3 class="text-lg font-medium text-foreground mb-1">
-					Keine archivierten Konversationen
-				</h3>
+				<h3 class="text-lg font-medium text-foreground mb-1">Keine archivierten Konversationen</h3>
 				<p class="text-muted-foreground">Archivierte Gespräche erscheinen hier.</p>
 			</div>
 		{:else}
@@ -128,9 +126,7 @@
 						</button>
 
 						<!-- Actions -->
-						<div
-							class="flex justify-end gap-2 px-4 py-2 border-t border-border bg-muted/50"
-						>
+						<div class="flex justify-end gap-2 px-4 py-2 border-t border-border bg-muted/50">
 							<button
 								onclick={() => handleUnarchive(conv.id)}
 								class="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground
diff --git a/apps/chat/apps/web/src/routes/(protected)/chat/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/chat/+page.svelte
index e45b992f2..7ba91f7c6 100644
--- a/apps/chat/apps/web/src/routes/(protected)/chat/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/chat/+page.svelte
@@ -148,7 +148,9 @@
 							</div>
 
 							<!-- Title -->
-							<h3 class="text-2xl font-semibold text-foreground mb-3">Worüber möchtest du reden?</h3>
+							<h3 class="text-2xl font-semibold text-foreground mb-3">
+								Worüber möchtest du reden?
+							</h3>
 							<p class="text-muted-foreground mb-8">
 								Stelle eine Frage, bitte um Hilfe bei einem Projekt oder starte einfach eine
 								Unterhaltung.
diff --git a/apps/chat/apps/web/src/routes/(protected)/chat/[id]/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/chat/[id]/+page.svelte
index 69a3b5670..a9b58b72e 100644
--- a/apps/chat/apps/web/src/routes/(protected)/chat/[id]/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/chat/[id]/+page.svelte
@@ -10,12 +10,7 @@
 	import ChatInput from '$lib/components/chat/ChatInput.svelte';
 	import ChatLayout from '$lib/components/chat/ChatLayout.svelte';
 	import type { Conversation, Message, AIModel, Document } from '@chat/types';
-	import {
-		FileText,
-		ClockCounterClockwise,
-		X,
-		FloppyDisk,
-	} from '@manacore/shared-icons';
+	import { FileText, ClockCounterClockwise, X, FloppyDisk } from '@manacore/shared-icons';
 
 	let conversation = $state<Conversation | null>(null);
 	let messages = $state<Message[]>([]);
@@ -247,9 +242,7 @@
 									<FileText size={18} weight="bold" class="text-primary" />
 									<span class="font-medium text-foreground">Dokument</span>
 									{#if document}
-										<span
-											class="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-lg"
-										>
+										<span class="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-lg">
 											v{document.version}
 										</span>
 									{/if}
diff --git a/apps/chat/apps/web/src/routes/(protected)/documents/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/documents/+page.svelte
index 6f8a7fc50..947ca034a 100644
--- a/apps/chat/apps/web/src/routes/(protected)/documents/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/documents/+page.svelte
@@ -127,9 +127,7 @@
 						d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
 					/>
 				</svg>
-				<h3 class="text-lg font-medium text-foreground mb-1">
-					Keine Dokumente gefunden
-				</h3>
+				<h3 class="text-lg font-medium text-foreground mb-1">Keine Dokumente gefunden</h3>
 				<p class="text-muted-foreground max-w-sm mx-auto">
 					Erstelle ein neues Dokument in einer Konversation mit aktiviertem Dokumentmodus.
 				</p>
diff --git a/apps/chat/apps/web/src/routes/(protected)/feedback/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/feedback/+page.svelte
index 3dc3965bf..a3abf48ca 100644
--- a/apps/chat/apps/web/src/routes/(protected)/feedback/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/feedback/+page.svelte
@@ -4,8 +4,4 @@
 	import { authStore } from '$lib/stores/auth.svelte';
 </script>
 
-<FeedbackPage
-	{feedbackService}
-	appName="ManaChat"
-	currentUserId={authStore.user?.id}
-/>
+<FeedbackPage {feedbackService} appName="ManaChat" currentUserId={authStore.user?.id} />
diff --git a/apps/chat/apps/web/src/routes/(protected)/profile/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/profile/+page.svelte
index 187bd83ec..72a6973f4 100644
--- a/apps/chat/apps/web/src/routes/(protected)/profile/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/profile/+page.svelte
@@ -31,7 +31,11 @@
 	}
 
 	function handleDeleteAccount() {
-		if (confirm('Bist du sicher, dass du dein Konto löschen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.')) {
+		if (
+			confirm(
+				'Bist du sicher, dass du dein Konto löschen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.'
+			)
+		) {
 			alert('Konto löschen wird noch implementiert.');
 		}
 	}
diff --git a/apps/chat/apps/web/src/routes/(protected)/spaces/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/spaces/+page.svelte
index 77c8de63f..4c73c58a7 100644
--- a/apps/chat/apps/web/src/routes/(protected)/spaces/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/spaces/+page.svelte
@@ -136,9 +136,7 @@
 						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
 					/>
 				</svg>
-				<h3 class="text-lg font-medium text-foreground mb-1">
-					Keine Spaces gefunden
-				</h3>
+				<h3 class="text-lg font-medium text-foreground mb-1">Keine Spaces gefunden</h3>
 				<p class="text-muted-foreground mb-4">
 					Erstelle einen neuen Space oder frage nach einer Einladung
 				</p>
diff --git a/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte
index 4ecc7c487..148de849e 100644
--- a/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte
@@ -98,17 +98,10 @@
 {:else if space}
 	<div class="min-h-[calc(100vh-4rem)] bg-background py-8">
 		<div class="max-w-4xl mx-auto px-4">
-			<PageHeader
-				title={space.name}
-				description={space.description}
-				backHref="/spaces"
-				size="lg"
-			/>
+			<PageHeader title={space.name} description={space.description} backHref="/spaces" size="lg" />
 
 			<!-- New Chat Section -->
-			<div
-				class="mb-8 p-4 bg-surface rounded-xl border border-border"
-			>
+			<div class="mb-8 p-4 bg-surface rounded-xl border border-border">
 				<h2 class="text-lg font-semibold text-foreground mb-3">Neuen Chat starten</h2>
 				<div class="flex items-center gap-3">
 					<select
@@ -133,14 +126,10 @@
 
 			<!-- Conversations List -->
 			<div>
-				<h2 class="text-lg font-semibold text-foreground mb-4">
-					Konversationen in diesem Space
-				</h2>
+				<h2 class="text-lg font-semibold text-foreground mb-4">Konversationen in diesem Space</h2>
 
 				{#if conversations.length === 0}
-					<div
-						class="text-center py-12 bg-surface rounded-xl border border-border"
-					>
+					<div class="text-center py-12 bg-surface rounded-xl border border-border">
 						<svg
 							class="w-12 h-12 text-muted-foreground mx-auto mb-3"
 							fill="none"
@@ -154,9 +143,7 @@
 								d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
 							/>
 						</svg>
-						<p class="text-muted-foreground">
-							Noch keine Konversationen in diesem Space.
-						</p>
+						<p class="text-muted-foreground">Noch keine Konversationen in diesem Space.</p>
 					</div>
 				{:else}
 					<div class="space-y-3">
diff --git a/apps/chat/apps/web/src/routes/(protected)/templates/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/templates/+page.svelte
index 976246bcc..deaf8eafa 100644
--- a/apps/chat/apps/web/src/routes/(protected)/templates/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/templates/+page.svelte
@@ -154,12 +154,8 @@
 						d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
 					/>
 				</svg>
-				<h3 class="text-lg font-medium text-foreground mb-1">
-					Keine Vorlagen vorhanden
-				</h3>
-				<p class="text-muted-foreground mb-4">
-					Erstelle deine erste Vorlage, um loszulegen
-				</p>
+				<h3 class="text-lg font-medium text-foreground mb-1">Keine Vorlagen vorhanden</h3>
+				<p class="text-muted-foreground mb-4">Erstelle deine erste Vorlage, um loszulegen</p>
 				<button
 					onclick={handleCreateNew}
 					class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium
diff --git a/apps/chat/packages/chat-types/src/index.ts b/apps/chat/packages/chat-types/src/index.ts
index 96bec8c77..fec5145e5 100644
--- a/apps/chat/packages/chat-types/src/index.ts
+++ b/apps/chat/packages/chat-types/src/index.ts
@@ -83,9 +83,7 @@ export interface Template {
 }
 
 export type TemplateCreate = Omit<Template, 'id' | 'createdAt' | 'updatedAt'>;
-export type TemplateUpdate = Partial<
-	Omit<Template, 'id' | 'userId' | 'createdAt' | 'updatedAt'>
->;
+export type TemplateUpdate = Partial<Omit<Template, 'id' | 'userId' | 'createdAt' | 'updatedAt'>>;
 
 // Space Types
 export interface Space {
diff --git a/apps/manacore/apps/web/src/routes/(app)/credits/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/credits/+page.svelte
index fe1510489..b55c889ea 100644
--- a/apps/manacore/apps/web/src/routes/(app)/credits/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/credits/+page.svelte
@@ -92,20 +92,20 @@
 
 	function handleBuyPackage(pkg: CreditPackage) {
 		// TODO: Integrate with Stripe
-		alert(`Paket "${pkg.name}" kaufen\n\n${formatCredits(pkg.credits)} Credits für ${formatPrice(pkg.priceEuroCents)}\n\nStripe-Integration kommt bald!`);
+		alert(
+			`Paket "${pkg.name}" kaufen\n\n${formatCredits(pkg.credits)} Credits für ${formatPrice(pkg.priceEuroCents)}\n\nStripe-Integration kommt bald!`
+		);
 	}
 </script>
 
 <div>
-	<PageHeader
-		title="Credits"
-		description="Verwalte deine Mana Credits"
-		size="lg"
-	/>
+	<PageHeader title="Credits" description="Verwalte deine Mana Credits" size="lg" />
 
 	{#if loading}
 		<div class="flex items-center justify-center py-12">
-			<div class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+			<div
+				class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+			></div>
 		</div>
 	{:else if error}
 		<Card>
@@ -195,7 +195,9 @@
 					{:else}
 						<div class="space-y-3">
 							{#each transactions.slice(0, 5) as tx}
-								<div class="flex items-center justify-between py-2 border-b border-border last:border-0">
+								<div
+									class="flex items-center justify-between py-2 border-b border-border last:border-0"
+								>
 									<div class="flex items-center gap-3">
 										<span class="text-xl">{getTransactionIcon(tx.type)}</span>
 										<div>
@@ -232,7 +234,9 @@
 								>
 									<div class="text-left">
 										<p class="font-medium">{pkg.name}</p>
-										<p class="text-sm text-muted-foreground">{formatCredits(pkg.credits)} Credits</p>
+										<p class="text-sm text-muted-foreground">
+											{formatCredits(pkg.credits)} Credits
+										</p>
 									</div>
 									<span class="font-semibold text-primary">{formatPrice(pkg.priceEuroCents)}</span>
 								</button>
@@ -247,7 +251,6 @@
 					{/if}
 				</Card>
 			</div>
-
 		{:else if activeTab === 'transactions'}
 			<Card>
 				<h3 class="text-lg font-semibold mb-4">Transaktionsverlauf</h3>
@@ -288,7 +291,6 @@
 					</div>
 				{/if}
 			</Card>
-
 		{:else if activeTab === 'packages'}
 			<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
 				{#each packages as pkg}
diff --git a/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte
index 5c55bbd8d..d1a92822d 100644
--- a/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte
@@ -38,7 +38,9 @@
 		},
 		{
 			name: 'Gratis-Credits heute',
-			value: creditBalance ? `${creditBalance.freeCreditsRemaining}/${creditBalance.dailyFreeCredits}` : '...',
+			value: creditBalance
+				? `${creditBalance.freeCreditsRemaining}/${creditBalance.dailyFreeCredits}`
+				: '...',
 			icon: '🎁',
 			href: '/credits',
 		},
@@ -56,10 +58,14 @@
 
 	function getTransactionIcon(type: string): string {
 		switch (type) {
-			case 'purchase': return '💳';
-			case 'usage': return '⚡';
-			case 'bonus': return '🎁';
-			default: return '📝';
+			case 'purchase':
+				return '💳';
+			case 'usage':
+				return '⚡';
+			case 'bonus':
+				return '🎁';
+			default:
+				return '📝';
 		}
 	}
 </script>
@@ -99,10 +105,7 @@
 		<Card>
 			<h2 class="mb-4 text-lg font-semibold">Schnellzugriff</h2>
 			<div class="space-y-2">
-				<a
-					href="/credits"
-					class="block rounded-lg p-3 hover:bg-surface-hover transition-colors"
-				>
+				<a href="/credits" class="block rounded-lg p-3 hover:bg-surface-hover transition-colors">
 					<div class="flex items-center">
 						<span class="text-2xl">💰</span>
 						<div class="ml-3">
@@ -111,10 +114,7 @@
 						</div>
 					</div>
 				</a>
-				<a
-					href="/feedback"
-					class="block rounded-lg p-3 hover:bg-surface-hover transition-colors"
-				>
+				<a href="/feedback" class="block rounded-lg p-3 hover:bg-surface-hover transition-colors">
 					<div class="flex items-center">
 						<span class="text-2xl">💬</span>
 						<div class="ml-3">
@@ -123,10 +123,7 @@
 						</div>
 					</div>
 				</a>
-				<a
-					href="/profile"
-					class="block rounded-lg p-3 hover:bg-surface-hover transition-colors"
-				>
+				<a href="/profile" class="block rounded-lg p-3 hover:bg-surface-hover transition-colors">
 					<div class="flex items-center">
 						<span class="text-2xl">👤</span>
 						<div class="ml-3">
@@ -163,7 +160,9 @@
 			{:else}
 				<div class="space-y-3">
 					{#each recentTransactions as tx}
-						<div class="flex items-center justify-between py-2 border-b border-border last:border-0">
+						<div
+							class="flex items-center justify-between py-2 border-b border-border last:border-0"
+						>
 							<div class="flex items-center gap-3">
 								<span class="text-xl">{getTransactionIcon(tx.type)}</span>
 								<div>
@@ -173,7 +172,11 @@
 									</p>
 								</div>
 							</div>
-							<span class="font-semibold {tx.amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}">
+							<span
+								class="font-semibold {tx.amount > 0
+									? 'text-green-600 dark:text-green-400'
+									: 'text-red-600 dark:text-red-400'}"
+							>
 								{tx.amount > 0 ? '+' : ''}{formatCredits(tx.amount)}
 							</span>
 						</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/feedback/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/feedback/+page.svelte
index 9ab4cb4da..46fae75f6 100644
--- a/apps/manacore/apps/web/src/routes/(app)/feedback/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/feedback/+page.svelte
@@ -4,8 +4,4 @@
 	import { authStore } from '$lib/stores/authStore.svelte';
 </script>
 
-<FeedbackPage
-	{feedbackService}
-	appName="ManaCore"
-	currentUserId={authStore.user?.id}
-/>
+<FeedbackPage {feedbackService} appName="ManaCore" currentUserId={authStore.user?.id} />
diff --git a/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte
index 38eed0083..21f31f8bd 100644
--- a/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte
@@ -31,7 +31,12 @@
 		{#snippet actions()}
 			<Button variant="primary">
 				<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
 				</svg>
 				Create Organization
 			</Button>
diff --git a/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte
index 643ff85d7..c130eb364 100644
--- a/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte
@@ -57,7 +57,9 @@
 
 	{#if loading}
 		<div class="flex items-center justify-center py-12">
-			<div class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+			<div
+				class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+			></div>
 		</div>
 	{:else}
 		<div class="space-y-6">
@@ -65,7 +67,9 @@
 			<Card>
 				<div class="p-6">
 					<div class="flex items-center gap-3 mb-6">
-						<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary"
+						>
 							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path
 									stroke-linecap="round"
@@ -82,13 +86,17 @@
 					</div>
 
 					{#if profileSuccess}
-						<div class="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-800 dark:bg-green-900/20 dark:text-green-400">
+						<div
+							class="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-800 dark:bg-green-900/20 dark:text-green-400"
+						>
 							Profil erfolgreich aktualisiert!
 						</div>
 					{/if}
 
 					{#if profileError}
-						<div class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400">
+						<div
+							class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400"
+						>
 							{profileError}
 						</div>
 					{/if}
@@ -109,30 +117,16 @@
 						<div class="grid gap-4 sm:grid-cols-2">
 							<div>
 								<label for="firstName" class="mb-2 block text-sm font-medium">Vorname</label>
-								<Input
-									type="text"
-									id="firstName"
-									bind:value={firstName}
-									placeholder="Max"
-								/>
+								<Input type="text" id="firstName" bind:value={firstName} placeholder="Max" />
 							</div>
 
 							<div>
 								<label for="lastName" class="mb-2 block text-sm font-medium">Nachname</label>
-								<Input
-									type="text"
-									id="lastName"
-									bind:value={lastName}
-									placeholder="Mustermann"
-								/>
+								<Input type="text" id="lastName" bind:value={lastName} placeholder="Mustermann" />
 							</div>
 						</div>
 
-						<Button
-							onclick={handleUpdateProfile}
-							loading={savingProfile}
-							class="w-full sm:w-auto"
-						>
+						<Button onclick={handleUpdateProfile} loading={savingProfile} class="w-full sm:w-auto">
 							{savingProfile ? 'Speichern...' : 'Änderungen speichern'}
 						</Button>
 					</div>
@@ -144,7 +138,9 @@
 				<div class="p-6">
 					<div class="flex items-center justify-between mb-6">
 						<div class="flex items-center gap-3">
-							<div class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400">
+							<div
+								class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400"
+							>
 								<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path
 										stroke-linecap="round"
@@ -172,7 +168,9 @@
 						<div class="rounded-lg bg-surface-hover p-4 text-center">
 							<p class="text-sm text-muted-foreground">Gratis heute</p>
 							<p class="text-2xl font-bold text-green-600 dark:text-green-400">
-								{creditBalance ? `${creditBalance.freeCreditsRemaining}/${creditBalance.dailyFreeCredits}` : '...'}
+								{creditBalance
+									? `${creditBalance.freeCreditsRemaining}/${creditBalance.dailyFreeCredits}`
+									: '...'}
 							</p>
 						</div>
 						<div class="rounded-lg bg-surface-hover p-4 text-center">
@@ -204,7 +202,9 @@
 			<Card>
 				<div class="p-6">
 					<div class="flex items-center gap-3 mb-6">
-						<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400">
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
+						>
 							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path
 									stroke-linecap="round"
@@ -226,7 +226,9 @@
 								<p class="font-medium">Konto-Status</p>
 								<p class="text-sm text-muted-foreground">Dein aktueller Kontostatus</p>
 							</div>
-							<span class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800 dark:bg-green-900/20 dark:text-green-400">
+							<span
+								class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800 dark:bg-green-900/20 dark:text-green-400"
+							>
 								Aktiv
 							</span>
 						</div>
@@ -236,7 +238,9 @@
 								<p class="font-medium">Rolle</p>
 								<p class="text-sm text-muted-foreground">Deine Berechtigungsstufe</p>
 							</div>
-							<span class="rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900/20 dark:text-blue-400">
+							<span
+								class="rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
+							>
 								{authStore.user?.role || 'user'}
 							</span>
 						</div>
@@ -258,7 +262,9 @@
 			<Card>
 				<div class="p-6 border-red-200 dark:border-red-800">
 					<div class="flex items-center gap-3 mb-6">
-						<div class="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400">
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400"
+						>
 							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path
 									stroke-linecap="round"
@@ -282,11 +288,7 @@
 									Das Löschen deines Kontos kann nicht rückgängig gemacht werden.
 								</p>
 							</div>
-							<Button
-								variant="destructive"
-								disabled
-								class="bg-red-600 hover:bg-red-700 text-white"
-							>
+							<Button variant="destructive" disabled class="bg-red-600 hover:bg-red-700 text-white">
 								Konto löschen
 							</Button>
 						</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/teams/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/teams/+page.svelte
index 79ea071f3..037cb6113 100644
--- a/apps/manacore/apps/web/src/routes/(app)/teams/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/teams/+page.svelte
@@ -19,15 +19,16 @@
 </script>
 
 <div>
-	<PageHeader
-		title="Teams"
-		description="Manage your teams and collaborate with members"
-		size="lg"
-	>
+	<PageHeader title="Teams" description="Manage your teams and collaborate with members" size="lg">
 		{#snippet actions()}
 			<Button variant="primary">
 				<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
 				</svg>
 				Create Team
 			</Button>
diff --git a/apps/manadeck/apps/web/src/routes/(app)/feedback/+page.svelte b/apps/manadeck/apps/web/src/routes/(app)/feedback/+page.svelte
index 62515ede6..4eb005b89 100644
--- a/apps/manadeck/apps/web/src/routes/(app)/feedback/+page.svelte
+++ b/apps/manadeck/apps/web/src/routes/(app)/feedback/+page.svelte
@@ -4,8 +4,4 @@
 	import { authStore } from '$lib/stores/authStore.svelte';
 </script>
 
-<FeedbackPage
-	{feedbackService}
-	appName="ManaDeck"
-	currentUserId={authStore.user?.id}
-/>
+<FeedbackPage {feedbackService} appName="ManaDeck" currentUserId={authStore.user?.id} />
diff --git a/apps/picture/apps/backend/src/profile/profile.controller.ts b/apps/picture/apps/backend/src/profile/profile.controller.ts
index 44f3d1a6a..6a0d09e68 100644
--- a/apps/picture/apps/backend/src/profile/profile.controller.ts
+++ b/apps/picture/apps/backend/src/profile/profile.controller.ts
@@ -1,7 +1,12 @@
 import { Controller, Get, Patch, Body, UseGuards } from '@nestjs/common';
 import { ProfileService } from './profile.service';
 import { JwtAuthGuard, CurrentUser, CurrentUserData } from '@manacore/shared-nestjs-auth';
-import { UpdateProfileDto, ProfileResponse, UserStatsResponse, RateLimitsResponse } from './dto/profile.dto';
+import {
+	UpdateProfileDto,
+	ProfileResponse,
+	UserStatsResponse,
+	RateLimitsResponse,
+} from './dto/profile.dto';
 
 @Controller('profiles')
 @UseGuards(JwtAuthGuard)
diff --git a/apps/picture/apps/backend/src/profile/profile.service.ts b/apps/picture/apps/backend/src/profile/profile.service.ts
index 9f99164aa..c9c222433 100644
--- a/apps/picture/apps/backend/src/profile/profile.service.ts
+++ b/apps/picture/apps/backend/src/profile/profile.service.ts
@@ -3,7 +3,12 @@ import { eq, and, isNull, isNotNull, sql, gte, inArray } from 'drizzle-orm';
 import { DATABASE_CONNECTION } from '../db/database.module';
 import { type Database } from '../db/connection';
 import { profiles, images, imageGenerations, type Profile } from '../db/schema';
-import { UpdateProfileDto, ProfileResponse, UserStatsResponse, RateLimitsResponse } from './dto/profile.dto';
+import {
+	UpdateProfileDto,
+	ProfileResponse,
+	UserStatsResponse,
+	RateLimitsResponse,
+} from './dto/profile.dto';
 
 @Injectable()
 export class ProfileService {
@@ -156,13 +161,17 @@ export class ProfileService {
 			const dailyResult = await this.db
 				.select({ count: sql<number>`count(*)` })
 				.from(imageGenerations)
-				.where(and(eq(imageGenerations.userId, userId), gte(imageGenerations.createdAt, startOfDay)));
+				.where(
+					and(eq(imageGenerations.userId, userId), gte(imageGenerations.createdAt, startOfDay))
+				);
 
 			// Count hourly generations
 			const hourlyResult = await this.db
 				.select({ count: sql<number>`count(*)` })
 				.from(imageGenerations)
-				.where(and(eq(imageGenerations.userId, userId), gte(imageGenerations.createdAt, startOfHour)));
+				.where(
+					and(eq(imageGenerations.userId, userId), gte(imageGenerations.createdAt, startOfHour))
+				);
 
 			// Count active generations (pending, queued, processing)
 			const activeResult = await this.db
diff --git a/apps/picture/apps/web/src/lib/components/board/ImagePropertiesPanel.svelte b/apps/picture/apps/web/src/lib/components/board/ImagePropertiesPanel.svelte
index 6556a713f..4e6c8aeb3 100644
--- a/apps/picture/apps/web/src/lib/components/board/ImagePropertiesPanel.svelte
+++ b/apps/picture/apps/web/src/lib/components/board/ImagePropertiesPanel.svelte
@@ -15,7 +15,9 @@
 
 	const selectedItem = $derived($selectedItems[0] || null);
 	const hasMultipleSelected = $derived($selectedItems.length > 1);
-	const selectedImageItem = $derived(selectedItem && isImageItem(selectedItem) ? selectedItem : null);
+	const selectedImageItem = $derived(
+		selectedItem && isImageItem(selectedItem) ? selectedItem : null
+	);
 
 	// Local state for inputs (synced with selected item)
 	let positionX = $state(0);
diff --git a/apps/picture/apps/web/src/lib/components/layout/Header.svelte b/apps/picture/apps/web/src/lib/components/layout/Header.svelte
index a78077f88..be36cc7b4 100644
--- a/apps/picture/apps/web/src/lib/components/layout/Header.svelte
+++ b/apps/picture/apps/web/src/lib/components/layout/Header.svelte
@@ -93,7 +93,9 @@
 						class="absolute right-0 mt-2 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800"
 					>
 						<div class="border-b border-gray-100 px-4 py-2 dark:border-gray-700">
-							<p class="text-sm font-medium text-gray-900 dark:text-gray-100">{authStore.user?.email}</p>
+							<p class="text-sm font-medium text-gray-900 dark:text-gray-100">
+								{authStore.user?.email}
+							</p>
 						</div>
 						<a
 							href="/app/profile"
diff --git a/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte b/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte
index cd879f670..21f026e6a 100644
--- a/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte
+++ b/apps/picture/apps/web/src/lib/components/layout/Sidebar.svelte
@@ -173,9 +173,9 @@
 					: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'}"
 			>
 				<span
-					class="{active
+					class={active
 						? 'text-blue-600 dark:text-blue-400'
-						: 'text-gray-400 group-hover:text-gray-600 dark:text-gray-500 dark:group-hover:text-gray-300'}"
+						: 'text-gray-400 group-hover:text-gray-600 dark:text-gray-500 dark:group-hover:text-gray-300'}
 				>
 					{#if item.iconName === 'gallery'}
 						<Image size={20} />
@@ -193,7 +193,9 @@
 						<Archive size={20} />
 					{:else if item.iconName === 'mana'}
 						<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-							<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+							<path
+								d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z"
+							/>
 						</svg>
 					{/if}
 				</span>
@@ -209,7 +211,9 @@
 			onclick={() => showKeyboardShortcuts.set(true)}
 			class="group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 transition-all hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
 		>
-			<span class="text-gray-400 group-hover:text-gray-600 dark:text-gray-500 dark:group-hover:text-gray-300">
+			<span
+				class="text-gray-400 group-hover:text-gray-600 dark:text-gray-500 dark:group-hover:text-gray-300"
+			>
 				<Question size={20} />
 			</span>
 			<span>Tastaturkürzel</span>
@@ -472,7 +476,7 @@
 							? 'bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400'
 							: 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800'}"
 					>
-						<span class="{active ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}">
+						<span class={active ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}>
 							{#if item.iconName === 'gallery'}
 								<Image size={20} />
 							{:else if item.iconName === 'board'}
@@ -489,7 +493,9 @@
 								<Archive size={20} />
 							{:else if item.iconName === 'mana'}
 								<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-									<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+									<path
+										d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z"
+									/>
 								</svg>
 							{/if}
 						</span>
@@ -547,7 +553,9 @@
 					<Archive size={24} />
 				{:else if item.iconName === 'mana'}
 					<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-						<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+						<path
+							d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z"
+						/>
 					</svg>
 				{/if}
 				<span class="text-xs font-medium">{item.label}</span>
diff --git a/apps/picture/apps/web/src/routes/app/+layout.svelte b/apps/picture/apps/web/src/routes/app/+layout.svelte
index 40cd5fcc8..9fd9638f3 100644
--- a/apps/picture/apps/web/src/routes/app/+layout.svelte
+++ b/apps/picture/apps/web/src/routes/app/+layout.svelte
@@ -125,7 +125,7 @@
 			options: viewModeOptions,
 			value: $viewMode === 'grid5' ? 'gridSmall' : $viewMode,
 			onChange: (id: string) => {
-				const mode = id === 'gridSmall' ? 'grid5' : id as ViewMode;
+				const mode = id === 'gridSmall' ? 'grid5' : (id as ViewMode);
 				setViewMode(mode);
 			},
 		},
diff --git a/apps/picture/apps/web/src/routes/app/explore/+page.svelte b/apps/picture/apps/web/src/routes/app/explore/+page.svelte
index 2844d3130..57695414f 100644
--- a/apps/picture/apps/web/src/routes/app/explore/+page.svelte
+++ b/apps/picture/apps/web/src/routes/app/explore/+page.svelte
@@ -178,7 +178,10 @@
 				placeholder="Bilder suchen..."
 				class="w-full rounded-full border border-gray-300/50 bg-white/80 px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 backdrop-blur-xl transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600/50 dark:bg-gray-800/80 dark:text-gray-100 dark:placeholder-gray-400"
 			/>
-			<MagnifyingGlass size={16} class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+			<MagnifyingGlass
+				size={16}
+				class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+			/>
 			{#if searchInput}
 				<button
 					onclick={() => {
diff --git a/apps/picture/apps/web/src/routes/app/feedback/+page.svelte b/apps/picture/apps/web/src/routes/app/feedback/+page.svelte
index aea3c1329..60aa15a3c 100644
--- a/apps/picture/apps/web/src/routes/app/feedback/+page.svelte
+++ b/apps/picture/apps/web/src/routes/app/feedback/+page.svelte
@@ -4,8 +4,4 @@
 	import { authStore } from '$lib/stores/auth.svelte';
 </script>
 
-<FeedbackPage
-	{feedbackService}
-	appName="Picture"
-	currentUserId={authStore.user?.id}
-/>
+<FeedbackPage {feedbackService} appName="Picture" currentUserId={authStore.user?.id} />
diff --git a/apps/picture/apps/web/src/routes/app/gallery/+page.svelte b/apps/picture/apps/web/src/routes/app/gallery/+page.svelte
index 208e03c36..3cff141ea 100644
--- a/apps/picture/apps/web/src/routes/app/gallery/+page.svelte
+++ b/apps/picture/apps/web/src/routes/app/gallery/+page.svelte
@@ -137,7 +137,9 @@
 		<!-- Tags -->
 		{#if $tags.length > 0}
 			<div class="flex flex-wrap items-center gap-2">
-				<span class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Tags:</span>
+				<span class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"
+					>Tags:</span
+				>
 				<TagPills />
 			</div>
 		{/if}
diff --git a/apps/picture/packages/design-tokens/native/theme.d.ts b/apps/picture/packages/design-tokens/native/theme.d.ts
index 9df08e0f7..95fde6bf6 100644
--- a/apps/picture/packages/design-tokens/native/theme.d.ts
+++ b/apps/picture/packages/design-tokens/native/theme.d.ts
@@ -949,4 +949,13 @@ declare function isValidThemeVariant(variant: string): variant is ThemeVariant;
  */
 type NativeTheme = ReturnType<typeof createNativeTheme>;
 
-export { type ColorMode, type NativeTheme, type SemanticColors, type ThemeVariant, createNativeTheme, getThemeColors, getThemeVariants, isValidThemeVariant };
+export {
+	type ColorMode,
+	type NativeTheme,
+	type SemanticColors,
+	type ThemeVariant,
+	createNativeTheme,
+	getThemeColors,
+	getThemeVariants,
+	isValidThemeVariant,
+};
diff --git a/apps/picture/packages/design-tokens/native/theme.js b/apps/picture/packages/design-tokens/native/theme.js
index 2d3202f72..88ca1c413 100644
--- a/apps/picture/packages/design-tokens/native/theme.js
+++ b/apps/picture/packages/design-tokens/native/theme.js
@@ -1,577 +1,580 @@
-"use strict";
+'use strict';
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+	for (var name in all) __defProp(target, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+	if ((from && typeof from === 'object') || typeof from === 'function') {
+		for (let key of __getOwnPropNames(from))
+			if (!__hasOwnProp.call(to, key) && key !== except)
+				__defProp(to, key, {
+					get: () => from[key],
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
+				});
+	}
+	return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, '__esModule', { value: true }), mod);
 
 // native/theme.ts
 var theme_exports = {};
 __export(theme_exports, {
-  createNativeTheme: () => createNativeTheme,
-  getThemeColors: () => getThemeColors,
-  getThemeVariants: () => getThemeVariants,
-  isValidThemeVariant: () => isValidThemeVariant
+	createNativeTheme: () => createNativeTheme,
+	getThemeColors: () => getThemeColors,
+	getThemeVariants: () => getThemeVariants,
+	isValidThemeVariant: () => isValidThemeVariant,
 });
 module.exports = __toCommonJS(theme_exports);
 
 // src/colors.ts
 var baseColors = {
-  // Pure colors
-  black: "#000000",
-  white: "#ffffff",
-  // Grays
-  gray: {
-    50: "#f9fafb",
-    100: "#f3f4f6",
-    200: "#e5e7eb",
-    300: "#d1d5db",
-    400: "#9ca3af",
-    500: "#6b7280",
-    600: "#4b5563",
-    700: "#374151",
-    800: "#1f2937",
-    900: "#111827",
-    950: "#0a0a0a"
-  },
-  // Indigo (Default primary)
-  indigo: {
-    200: "#c7d2fe",
-    300: "#a5b4fc",
-    400: "#818cf8",
-    500: "#6366f1",
-    600: "#4f46e5",
-    700: "#4338ca",
-    800: "#3730a3"
-  },
-  // Violet (Default secondary)
-  violet: {
-    300: "#c4b5fd",
-    400: "#a78bfa",
-    500: "#8b5cf6",
-    600: "#7c3aed"
-  },
-  // Orange (Sunset theme)
-  orange: {
-    300: "#fdba74",
-    400: "#fb923c",
-    500: "#f97316",
-    600: "#ea580c"
-  },
-  // Pink (Sunset theme)
-  pink: {
-    300: "#f9a8d4",
-    400: "#f472b6",
-    500: "#ec4899",
-    600: "#db2777"
-  },
-  // Sky (Ocean theme)
-  sky: {
-    300: "#7dd3fc",
-    400: "#38bdf8",
-    500: "#0ea5e9",
-    600: "#0284c7"
-  },
-  // Emerald (Ocean theme + status)
-  emerald: {
-    300: "#6ee7b7",
-    400: "#34d399",
-    500: "#10b981",
-    600: "#059669"
-  },
-  // Status colors
-  red: {
-    500: "#ef4444",
-    600: "#dc2626"
-  },
-  amber: {
-    500: "#f59e0b"
-  },
-  blue: {
-    500: "#3b82f6"
-  }
+	// Pure colors
+	black: '#000000',
+	white: '#ffffff',
+	// Grays
+	gray: {
+		50: '#f9fafb',
+		100: '#f3f4f6',
+		200: '#e5e7eb',
+		300: '#d1d5db',
+		400: '#9ca3af',
+		500: '#6b7280',
+		600: '#4b5563',
+		700: '#374151',
+		800: '#1f2937',
+		900: '#111827',
+		950: '#0a0a0a',
+	},
+	// Indigo (Default primary)
+	indigo: {
+		200: '#c7d2fe',
+		300: '#a5b4fc',
+		400: '#818cf8',
+		500: '#6366f1',
+		600: '#4f46e5',
+		700: '#4338ca',
+		800: '#3730a3',
+	},
+	// Violet (Default secondary)
+	violet: {
+		300: '#c4b5fd',
+		400: '#a78bfa',
+		500: '#8b5cf6',
+		600: '#7c3aed',
+	},
+	// Orange (Sunset theme)
+	orange: {
+		300: '#fdba74',
+		400: '#fb923c',
+		500: '#f97316',
+		600: '#ea580c',
+	},
+	// Pink (Sunset theme)
+	pink: {
+		300: '#f9a8d4',
+		400: '#f472b6',
+		500: '#ec4899',
+		600: '#db2777',
+	},
+	// Sky (Ocean theme)
+	sky: {
+		300: '#7dd3fc',
+		400: '#38bdf8',
+		500: '#0ea5e9',
+		600: '#0284c7',
+	},
+	// Emerald (Ocean theme + status)
+	emerald: {
+		300: '#6ee7b7',
+		400: '#34d399',
+		500: '#10b981',
+		600: '#059669',
+	},
+	// Status colors
+	red: {
+		500: '#ef4444',
+		600: '#dc2626',
+	},
+	amber: {
+		500: '#f59e0b',
+	},
+	blue: {
+		500: '#3b82f6',
+	},
 };
 var semanticColors = {
-  /**
-   * Dark mode colors
-   */
-  dark: {
-    // Backgrounds
-    background: baseColors.black,
-    surface: "#1a1a1a",
-    elevated: "#242424",
-    overlay: "rgba(0, 0, 0, 0.8)",
-    // Borders & Dividers
-    border: "#383838",
-    divider: "#2a2a2a",
-    // Input fields
-    input: {
-      background: "#1f1f1f",
-      border: "#383838",
-      text: baseColors.gray[100],
-      placeholder: baseColors.gray[500]
-    },
-    // Text colors
-    text: {
-      primary: baseColors.gray[100],
-      secondary: baseColors.gray[300],
-      tertiary: baseColors.gray[400],
-      disabled: baseColors.gray[500],
-      inverse: baseColors.black
-    },
-    // Primary brand color (Indigo)
-    primary: {
-      default: baseColors.indigo[400],
-      hover: baseColors.indigo[300],
-      active: baseColors.indigo[500],
-      light: baseColors.indigo[200],
-      dark: baseColors.indigo[600],
-      contrast: baseColors.white
-    },
-    // Secondary accent color (Violet)
-    secondary: {
-      default: baseColors.violet[400],
-      light: baseColors.violet[300],
-      dark: baseColors.violet[500],
-      contrast: baseColors.white
-    },
-    // Status colors
-    success: baseColors.emerald[500],
-    warning: baseColors.amber[500],
-    error: baseColors.red[500],
-    info: baseColors.blue[500],
-    // Semantic colors
-    favorite: baseColors.red[500],
-    like: baseColors.red[500],
-    tag: baseColors.indigo[400],
-    // Special UI elements
-    skeleton: "#2a2a2a",
-    shimmer: "#383838"
-  },
-  /**
-   * Light mode colors
-   */
-  light: {
-    // Backgrounds
-    background: baseColors.white,
-    surface: baseColors.gray[50],
-    elevated: baseColors.white,
-    overlay: "rgba(0, 0, 0, 0.5)",
-    // Borders & Dividers
-    border: baseColors.gray[200],
-    divider: baseColors.gray[100],
-    // Input fields
-    input: {
-      background: baseColors.white,
-      border: baseColors.gray[300],
-      text: baseColors.gray[900],
-      placeholder: baseColors.gray[400]
-    },
-    // Text colors
-    text: {
-      primary: baseColors.gray[900],
-      secondary: baseColors.gray[700],
-      tertiary: baseColors.gray[500],
-      disabled: baseColors.gray[400],
-      inverse: baseColors.white
-    },
-    // Primary brand color (Indigo)
-    primary: {
-      default: baseColors.indigo[500],
-      hover: baseColors.indigo[600],
-      active: baseColors.indigo[700],
-      light: baseColors.indigo[400],
-      dark: baseColors.indigo[800],
-      contrast: baseColors.white
-    },
-    // Secondary accent color (Violet)
-    secondary: {
-      default: baseColors.violet[500],
-      light: baseColors.violet[400],
-      dark: baseColors.violet[600],
-      contrast: baseColors.white
-    },
-    // Status colors
-    success: baseColors.emerald[500],
-    warning: baseColors.amber[500],
-    error: baseColors.red[500],
-    info: baseColors.blue[500],
-    // Semantic colors
-    favorite: baseColors.red[500],
-    like: baseColors.red[500],
-    tag: baseColors.indigo[500],
-    // Special UI elements
-    skeleton: baseColors.gray[200],
-    shimmer: baseColors.gray[100]
-  }
+	/**
+	 * Dark mode colors
+	 */
+	dark: {
+		// Backgrounds
+		background: baseColors.black,
+		surface: '#1a1a1a',
+		elevated: '#242424',
+		overlay: 'rgba(0, 0, 0, 0.8)',
+		// Borders & Dividers
+		border: '#383838',
+		divider: '#2a2a2a',
+		// Input fields
+		input: {
+			background: '#1f1f1f',
+			border: '#383838',
+			text: baseColors.gray[100],
+			placeholder: baseColors.gray[500],
+		},
+		// Text colors
+		text: {
+			primary: baseColors.gray[100],
+			secondary: baseColors.gray[300],
+			tertiary: baseColors.gray[400],
+			disabled: baseColors.gray[500],
+			inverse: baseColors.black,
+		},
+		// Primary brand color (Indigo)
+		primary: {
+			default: baseColors.indigo[400],
+			hover: baseColors.indigo[300],
+			active: baseColors.indigo[500],
+			light: baseColors.indigo[200],
+			dark: baseColors.indigo[600],
+			contrast: baseColors.white,
+		},
+		// Secondary accent color (Violet)
+		secondary: {
+			default: baseColors.violet[400],
+			light: baseColors.violet[300],
+			dark: baseColors.violet[500],
+			contrast: baseColors.white,
+		},
+		// Status colors
+		success: baseColors.emerald[500],
+		warning: baseColors.amber[500],
+		error: baseColors.red[500],
+		info: baseColors.blue[500],
+		// Semantic colors
+		favorite: baseColors.red[500],
+		like: baseColors.red[500],
+		tag: baseColors.indigo[400],
+		// Special UI elements
+		skeleton: '#2a2a2a',
+		shimmer: '#383838',
+	},
+	/**
+	 * Light mode colors
+	 */
+	light: {
+		// Backgrounds
+		background: baseColors.white,
+		surface: baseColors.gray[50],
+		elevated: baseColors.white,
+		overlay: 'rgba(0, 0, 0, 0.5)',
+		// Borders & Dividers
+		border: baseColors.gray[200],
+		divider: baseColors.gray[100],
+		// Input fields
+		input: {
+			background: baseColors.white,
+			border: baseColors.gray[300],
+			text: baseColors.gray[900],
+			placeholder: baseColors.gray[400],
+		},
+		// Text colors
+		text: {
+			primary: baseColors.gray[900],
+			secondary: baseColors.gray[700],
+			tertiary: baseColors.gray[500],
+			disabled: baseColors.gray[400],
+			inverse: baseColors.white,
+		},
+		// Primary brand color (Indigo)
+		primary: {
+			default: baseColors.indigo[500],
+			hover: baseColors.indigo[600],
+			active: baseColors.indigo[700],
+			light: baseColors.indigo[400],
+			dark: baseColors.indigo[800],
+			contrast: baseColors.white,
+		},
+		// Secondary accent color (Violet)
+		secondary: {
+			default: baseColors.violet[500],
+			light: baseColors.violet[400],
+			dark: baseColors.violet[600],
+			contrast: baseColors.white,
+		},
+		// Status colors
+		success: baseColors.emerald[500],
+		warning: baseColors.amber[500],
+		error: baseColors.red[500],
+		info: baseColors.blue[500],
+		// Semantic colors
+		favorite: baseColors.red[500],
+		like: baseColors.red[500],
+		tag: baseColors.indigo[500],
+		// Special UI elements
+		skeleton: baseColors.gray[200],
+		shimmer: baseColors.gray[100],
+	},
 };
 
 // src/shadows.ts
 var shadows = {
-  dark: {
-    sm: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.2,
-      shadowRadius: 2,
-      elevation: 2
-      // Android
-    },
-    md: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.3,
-      shadowRadius: 6,
-      elevation: 4
-    },
-    lg: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 10 },
-      shadowOpacity: 0.4,
-      shadowRadius: 15,
-      elevation: 8
-    }
-  },
-  light: {
-    sm: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.1,
-      shadowRadius: 2,
-      elevation: 2
-    },
-    md: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.15,
-      shadowRadius: 6,
-      elevation: 4
-    },
-    lg: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 10 },
-      shadowOpacity: 0.2,
-      shadowRadius: 15,
-      elevation: 8
-    }
-  }
+	dark: {
+		sm: {
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 1 },
+			shadowOpacity: 0.2,
+			shadowRadius: 2,
+			elevation: 2,
+			// Android
+		},
+		md: {
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 4 },
+			shadowOpacity: 0.3,
+			shadowRadius: 6,
+			elevation: 4,
+		},
+		lg: {
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 10 },
+			shadowOpacity: 0.4,
+			shadowRadius: 15,
+			elevation: 8,
+		},
+	},
+	light: {
+		sm: {
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 1 },
+			shadowOpacity: 0.1,
+			shadowRadius: 2,
+			elevation: 2,
+		},
+		md: {
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 4 },
+			shadowOpacity: 0.15,
+			shadowRadius: 6,
+			elevation: 4,
+		},
+		lg: {
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 10 },
+			shadowOpacity: 0.2,
+			shadowRadius: 15,
+			elevation: 8,
+		},
+	},
 };
 var opacity = {
-  disabled: 0.5,
-  overlay: 0.8,
-  hover: 0.9,
-  pressed: 0.7
+	disabled: 0.5,
+	overlay: 0.8,
+	hover: 0.9,
+	pressed: 0.7,
 };
 
 // src/themes/default.ts
 var defaultTheme = {
-  name: "default",
-  displayName: "Indigo",
-  colors: {
-    light: semanticColors.light,
-    dark: semanticColors.dark
-  },
-  shadows,
-  opacity
+	name: 'default',
+	displayName: 'Indigo',
+	colors: {
+		light: semanticColors.light,
+		dark: semanticColors.dark,
+	},
+	shadows,
+	opacity,
 };
 
 // src/themes/sunset.ts
 var sunsetTheme = {
-  name: "sunset",
-  displayName: "Sunset",
-  colors: {
-    light: semanticColors.light,
-    // Uses default light mode
-    dark: {
-      ...semanticColors.dark,
-      // Override backgrounds for warmer tone
-      background: "#0a0a0a",
-      surface: "#1f1410",
-      elevated: "#2a1f1a",
-      // Override borders
-      border: "#3d2f28",
-      divider: "#2a1f1a",
-      // Override input
-      input: {
-        background: "#1a1410",
-        border: "#3d2f28",
-        text: "#fef3c7",
-        // amber-100
-        placeholder: "#92400e"
-        // amber-800
-      },
-      // Override text colors (warmer)
-      text: {
-        primary: "#fef3c7",
-        // amber-100
-        secondary: "#fcd34d",
-        // amber-300
-        tertiary: "#f59e0b",
-        // amber-500
-        disabled: "#92400e",
-        // amber-800
-        inverse: "#0a0a0a"
-      },
-      // Primary: Orange
-      primary: {
-        default: baseColors.orange[400],
-        hover: baseColors.orange[300],
-        active: baseColors.orange[500],
-        light: "#fed7aa",
-        // orange-200
-        dark: baseColors.orange[600],
-        contrast: baseColors.white
-      },
-      // Secondary: Pink
-      secondary: {
-        default: baseColors.pink[400],
-        light: baseColors.pink[300],
-        dark: baseColors.pink[500],
-        contrast: baseColors.white
-      },
-      // Status
-      success: baseColors.emerald[500],
-      warning: "#fbbf24",
-      // amber-400
-      error: "#f43f5e",
-      // rose-500
-      info: "#60a5fa",
-      // blue-400
-      // Semantic
-      favorite: "#f43f5e",
-      // rose-500
-      like: "#f43f5e",
-      // rose-500
-      tag: baseColors.orange[400],
-      // Special
-      skeleton: "#2a1f1a",
-      shimmer: "#3d2f28"
-    }
-  },
-  shadows,
-  opacity
+	name: 'sunset',
+	displayName: 'Sunset',
+	colors: {
+		light: semanticColors.light,
+		// Uses default light mode
+		dark: {
+			...semanticColors.dark,
+			// Override backgrounds for warmer tone
+			background: '#0a0a0a',
+			surface: '#1f1410',
+			elevated: '#2a1f1a',
+			// Override borders
+			border: '#3d2f28',
+			divider: '#2a1f1a',
+			// Override input
+			input: {
+				background: '#1a1410',
+				border: '#3d2f28',
+				text: '#fef3c7',
+				// amber-100
+				placeholder: '#92400e',
+				// amber-800
+			},
+			// Override text colors (warmer)
+			text: {
+				primary: '#fef3c7',
+				// amber-100
+				secondary: '#fcd34d',
+				// amber-300
+				tertiary: '#f59e0b',
+				// amber-500
+				disabled: '#92400e',
+				// amber-800
+				inverse: '#0a0a0a',
+			},
+			// Primary: Orange
+			primary: {
+				default: baseColors.orange[400],
+				hover: baseColors.orange[300],
+				active: baseColors.orange[500],
+				light: '#fed7aa',
+				// orange-200
+				dark: baseColors.orange[600],
+				contrast: baseColors.white,
+			},
+			// Secondary: Pink
+			secondary: {
+				default: baseColors.pink[400],
+				light: baseColors.pink[300],
+				dark: baseColors.pink[500],
+				contrast: baseColors.white,
+			},
+			// Status
+			success: baseColors.emerald[500],
+			warning: '#fbbf24',
+			// amber-400
+			error: '#f43f5e',
+			// rose-500
+			info: '#60a5fa',
+			// blue-400
+			// Semantic
+			favorite: '#f43f5e',
+			// rose-500
+			like: '#f43f5e',
+			// rose-500
+			tag: baseColors.orange[400],
+			// Special
+			skeleton: '#2a1f1a',
+			shimmer: '#3d2f28',
+		},
+	},
+	shadows,
+	opacity,
 };
 
 // src/themes/ocean.ts
 var oceanColors = {
-  teal: {
-    200: "#99f6e4",
-    300: "#5eead4",
-    400: "#2dd4bf",
-    500: "#14b8a6",
-    600: "#0d9488"
-  },
-  cyan: {
-    300: "#67e8f9",
-    400: "#22d3ee",
-    500: "#06b6d4"
-  },
-  slate: {
-    700: "#334155",
-    800: "#1e293b",
-    900: "#0f172a",
-    950: "#020617"
-  }
+	teal: {
+		200: '#99f6e4',
+		300: '#5eead4',
+		400: '#2dd4bf',
+		500: '#14b8a6',
+		600: '#0d9488',
+	},
+	cyan: {
+		300: '#67e8f9',
+		400: '#22d3ee',
+		500: '#06b6d4',
+	},
+	slate: {
+		700: '#334155',
+		800: '#1e293b',
+		900: '#0f172a',
+		950: '#020617',
+	},
 };
 var oceanTheme = {
-  name: "ocean",
-  displayName: "Ocean",
-  colors: {
-    light: semanticColors.light,
-    // Uses default light mode
-    dark: {
-      ...semanticColors.dark,
-      // Override backgrounds for cooler tone
-      background: oceanColors.slate[950],
-      surface: oceanColors.slate[900],
-      elevated: oceanColors.slate[800],
-      // Override borders
-      border: oceanColors.slate[700],
-      divider: oceanColors.slate[800],
-      // Override input
-      input: {
-        background: oceanColors.slate[900],
-        border: oceanColors.slate[700],
-        text: "#e0f2fe",
-        // sky-100
-        placeholder: "#0c4a6e"
-        // sky-900
-      },
-      // Override text colors (cooler)
-      text: {
-        primary: "#e0f2fe",
-        // sky-100
-        secondary: "#7dd3fc",
-        // sky-300
-        tertiary: "#38bdf8",
-        // sky-400
-        disabled: "#0c4a6e",
-        // sky-900
-        inverse: oceanColors.slate[950]
-      },
-      // Primary: Teal
-      primary: {
-        default: oceanColors.teal[400],
-        hover: oceanColors.teal[300],
-        active: oceanColors.teal[500],
-        light: oceanColors.teal[200],
-        dark: oceanColors.teal[600],
-        contrast: baseColors.white
-      },
-      // Secondary: Cyan
-      secondary: {
-        default: oceanColors.cyan[400],
-        light: oceanColors.cyan[300],
-        dark: oceanColors.cyan[500],
-        contrast: baseColors.white
-      },
-      // Status
-      success: baseColors.emerald[500],
-      warning: "#fbbf24",
-      // amber-400
-      error: "#f43f5e",
-      // rose-500
-      info: "#0ea5e9",
-      // sky-500
-      // Semantic
-      favorite: "#f43f5e",
-      // rose-500
-      like: "#f43f5e",
-      // rose-500
-      tag: oceanColors.teal[400],
-      // Special
-      skeleton: oceanColors.slate[800],
-      shimmer: oceanColors.slate[700]
-    }
-  },
-  shadows,
-  opacity
+	name: 'ocean',
+	displayName: 'Ocean',
+	colors: {
+		light: semanticColors.light,
+		// Uses default light mode
+		dark: {
+			...semanticColors.dark,
+			// Override backgrounds for cooler tone
+			background: oceanColors.slate[950],
+			surface: oceanColors.slate[900],
+			elevated: oceanColors.slate[800],
+			// Override borders
+			border: oceanColors.slate[700],
+			divider: oceanColors.slate[800],
+			// Override input
+			input: {
+				background: oceanColors.slate[900],
+				border: oceanColors.slate[700],
+				text: '#e0f2fe',
+				// sky-100
+				placeholder: '#0c4a6e',
+				// sky-900
+			},
+			// Override text colors (cooler)
+			text: {
+				primary: '#e0f2fe',
+				// sky-100
+				secondary: '#7dd3fc',
+				// sky-300
+				tertiary: '#38bdf8',
+				// sky-400
+				disabled: '#0c4a6e',
+				// sky-900
+				inverse: oceanColors.slate[950],
+			},
+			// Primary: Teal
+			primary: {
+				default: oceanColors.teal[400],
+				hover: oceanColors.teal[300],
+				active: oceanColors.teal[500],
+				light: oceanColors.teal[200],
+				dark: oceanColors.teal[600],
+				contrast: baseColors.white,
+			},
+			// Secondary: Cyan
+			secondary: {
+				default: oceanColors.cyan[400],
+				light: oceanColors.cyan[300],
+				dark: oceanColors.cyan[500],
+				contrast: baseColors.white,
+			},
+			// Status
+			success: baseColors.emerald[500],
+			warning: '#fbbf24',
+			// amber-400
+			error: '#f43f5e',
+			// rose-500
+			info: '#0ea5e9',
+			// sky-500
+			// Semantic
+			favorite: '#f43f5e',
+			// rose-500
+			like: '#f43f5e',
+			// rose-500
+			tag: oceanColors.teal[400],
+			// Special
+			skeleton: oceanColors.slate[800],
+			shimmer: oceanColors.slate[700],
+		},
+	},
+	shadows,
+	opacity,
 };
 
 // src/themes/index.ts
 var themes = {
-  default: defaultTheme,
-  sunset: sunsetTheme,
-  ocean: oceanTheme
+	default: defaultTheme,
+	sunset: sunsetTheme,
+	ocean: oceanTheme,
 };
 
 // src/spacing.ts
 var spacing = {
-  0: 0,
-  1: 4,
-  // 0.25rem
-  2: 8,
-  // 0.5rem
-  3: 12,
-  // 0.75rem
-  4: 16,
-  // 1rem
-  5: 20,
-  // 1.25rem
-  6: 24,
-  // 1.5rem
-  7: 28,
-  // 1.75rem
-  8: 32,
-  // 2rem
-  9: 36,
-  // 2.25rem
-  10: 40,
-  // 2.5rem
-  11: 44,
-  // 2.75rem
-  12: 48,
-  // 3rem
-  14: 56,
-  // 3.5rem
-  16: 64,
-  // 4rem
-  20: 80,
-  // 5rem
-  24: 96,
-  // 6rem
-  28: 112,
-  // 7rem
-  32: 128
-  // 8rem
+	0: 0,
+	1: 4,
+	// 0.25rem
+	2: 8,
+	// 0.5rem
+	3: 12,
+	// 0.75rem
+	4: 16,
+	// 1rem
+	5: 20,
+	// 1.25rem
+	6: 24,
+	// 1.5rem
+	7: 28,
+	// 1.75rem
+	8: 32,
+	// 2rem
+	9: 36,
+	// 2.25rem
+	10: 40,
+	// 2.5rem
+	11: 44,
+	// 2.75rem
+	12: 48,
+	// 3rem
+	14: 56,
+	// 3.5rem
+	16: 64,
+	// 4rem
+	20: 80,
+	// 5rem
+	24: 96,
+	// 6rem
+	28: 112,
+	// 7rem
+	32: 128,
+	// 8rem
 };
 var borderRadius = {
-  none: 0,
-  sm: 4,
-  DEFAULT: 8,
-  md: 8,
-  lg: 12,
-  xl: 16,
-  "2xl": 24,
-  "3xl": 32,
-  full: 9999
+	none: 0,
+	sm: 4,
+	DEFAULT: 8,
+	md: 8,
+	lg: 12,
+	xl: 16,
+	'2xl': 24,
+	'3xl': 32,
+	full: 9999,
 };
 
 // src/typography.ts
 var fontSize = {
-  xs: 12,
-  sm: 14,
-  base: 16,
-  lg: 18,
-  xl: 20,
-  "2xl": 24,
-  "3xl": 30,
-  "4xl": 36,
-  "5xl": 48,
-  "6xl": 60,
-  "7xl": 72,
-  "8xl": 96
+	xs: 12,
+	sm: 14,
+	base: 16,
+	lg: 18,
+	xl: 20,
+	'2xl': 24,
+	'3xl': 30,
+	'4xl': 36,
+	'5xl': 48,
+	'6xl': 60,
+	'7xl': 72,
+	'8xl': 96,
 };
 var fontWeight = {
-  regular: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700"
+	regular: '400',
+	medium: '500',
+	semibold: '600',
+	bold: '700',
 };
 
 // native/theme.ts
-function getThemeColors(variant = "default", mode = "dark") {
-  const theme = themes[variant];
-  return theme.colors[mode];
+function getThemeColors(variant = 'default', mode = 'dark') {
+	const theme = themes[variant];
+	return theme.colors[mode];
 }
-function createNativeTheme(variant = "default", mode = "dark") {
-  const theme = themes[variant];
-  const colors = theme.colors[mode];
-  const shadows2 = theme.shadows[mode];
-  return {
-    variant,
-    mode,
-    colors,
-    spacing,
-    borderRadius,
-    fontSize,
-    fontWeight,
-    shadows: shadows2,
-    opacity: theme.opacity
-  };
+function createNativeTheme(variant = 'default', mode = 'dark') {
+	const theme = themes[variant];
+	const colors = theme.colors[mode];
+	const shadows2 = theme.shadows[mode];
+	return {
+		variant,
+		mode,
+		colors,
+		spacing,
+		borderRadius,
+		fontSize,
+		fontWeight,
+		shadows: shadows2,
+		opacity: theme.opacity,
+	};
 }
 function getThemeVariants() {
-  return Object.keys(themes);
+	return Object.keys(themes);
 }
 function isValidThemeVariant(variant) {
-  return variant in themes;
+	return variant in themes;
 }
 // Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createNativeTheme,
-  getThemeColors,
-  getThemeVariants,
-  isValidThemeVariant
-});
+0 &&
+	(module.exports = {
+		createNativeTheme,
+		getThemeColors,
+		getThemeVariants,
+		isValidThemeVariant,
+	});
diff --git a/apps/presi/apps/backend/src/deck/deck.controller.ts b/apps/presi/apps/backend/src/deck/deck.controller.ts
index f58c3a00e..1fde404f8 100644
--- a/apps/presi/apps/backend/src/deck/deck.controller.ts
+++ b/apps/presi/apps/backend/src/deck/deck.controller.ts
@@ -1,13 +1,4 @@
-import {
-	Controller,
-	Get,
-	Post,
-	Put,
-	Delete,
-	Body,
-	Param,
-	UseGuards,
-} from '@nestjs/common';
+import { Controller, Get, Post, Put, Delete, Body, Param, UseGuards } from '@nestjs/common';
 import { DeckService } from './deck.service';
 import { CreateDeckDto, UpdateDeckDto } from './deck.dto';
 import { JwtAuthGuard, CurrentUser, CurrentUserData } from '@manacore/shared-nestjs-auth';
diff --git a/apps/presi/apps/backend/src/share/share.controller.ts b/apps/presi/apps/backend/src/share/share.controller.ts
index db55ca835..3250d29f2 100644
--- a/apps/presi/apps/backend/src/share/share.controller.ts
+++ b/apps/presi/apps/backend/src/share/share.controller.ts
@@ -27,10 +27,7 @@ export class ShareController {
 
 	@Get('deck/:deckId/links')
 	@UseGuards(JwtAuthGuard)
-	async getSharesForDeck(
-		@Param('deckId') deckId: string,
-		@CurrentUser() user: CurrentUserData
-	) {
+	async getSharesForDeck(@Param('deckId') deckId: string, @CurrentUser() user: CurrentUserData) {
 		return this.shareService.getSharesForDeck(deckId, user.userId);
 	}
 
diff --git a/apps/presi/apps/web/src/routes/+page.svelte b/apps/presi/apps/web/src/routes/+page.svelte
index 908372625..6c18709db 100644
--- a/apps/presi/apps/web/src/routes/+page.svelte
+++ b/apps/presi/apps/web/src/routes/+page.svelte
@@ -61,11 +61,7 @@
 </svelte:head>
 
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-	<PageHeader
-		title="My Presentations"
-		description="Create and manage your slide decks"
-		size="lg"
-	>
+	<PageHeader title="My Presentations" description="Create and manage your slide decks" size="lg">
 		{#snippet actions()}
 			<button
 				onclick={() => (showCreateModal = true)}
diff --git a/apps/presi/apps/web/src/routes/feedback/+page.svelte b/apps/presi/apps/web/src/routes/feedback/+page.svelte
index 7eba9a895..33a35694a 100644
--- a/apps/presi/apps/web/src/routes/feedback/+page.svelte
+++ b/apps/presi/apps/web/src/routes/feedback/+page.svelte
@@ -4,8 +4,4 @@
 	import { auth } from '$lib/stores/auth.svelte';
 </script>
 
-<FeedbackPage
-	{feedbackService}
-	appName="Presi"
-	currentUserId={auth.user?.id}
-/>
+<FeedbackPage {feedbackService} appName="Presi" currentUserId={auth.user?.id} />
diff --git a/apps/presi/apps/web/src/routes/profile/+page.svelte b/apps/presi/apps/web/src/routes/profile/+page.svelte
index 5d475cb47..70466165e 100644
--- a/apps/presi/apps/web/src/routes/profile/+page.svelte
+++ b/apps/presi/apps/web/src/routes/profile/+page.svelte
@@ -110,9 +110,7 @@
 								class="flex items-center justify-between p-4 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
 							>
 								<div class="flex items-center gap-3">
-									<div
-										class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center"
-									>
+									<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
 										<FolderOpen class="w-5 h-5 text-primary" />
 									</div>
 									<div>
diff --git a/apps/presi/apps/web/src/routes/settings/+page.svelte b/apps/presi/apps/web/src/routes/settings/+page.svelte
index c5e816257..da88bc280 100644
--- a/apps/presi/apps/web/src/routes/settings/+page.svelte
+++ b/apps/presi/apps/web/src/routes/settings/+page.svelte
@@ -64,7 +64,9 @@
 						/>
 					</svg>
 				{/snippet}
-				<span class="font-mono text-xs text-[hsl(var(--muted-foreground))]">{auth.user?.id || '-'}</span>
+				<span class="font-mono text-xs text-[hsl(var(--muted-foreground))]"
+					>{auth.user?.id || '-'}</span
+				>
 			</SettingsRow>
 		</SettingsCard>
 	</SettingsSection>
@@ -85,9 +87,7 @@
 		<SettingsCard>
 			<div class="px-5 py-4">
 				<p class="font-medium text-[hsl(var(--foreground))] mb-2">Theme</p>
-				<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">
-					Choose your preferred theme
-				</p>
+				<p class="text-sm text-[hsl(var(--muted-foreground))] mb-4">Choose your preferred theme</p>
 				<div class="grid grid-cols-3 gap-3">
 					<button
 						onclick={() => setThemeMode('light')}
@@ -96,7 +96,12 @@
 							? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
 							: 'border-[hsl(var(--border))]'}"
 					>
-						<svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<svg
+							class="w-6 h-6 text-amber-500"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
@@ -113,7 +118,12 @@
 							? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
 							: 'border-[hsl(var(--border))]'}"
 					>
-						<svg class="w-6 h-6 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<svg
+							class="w-6 h-6 text-indigo-500"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
@@ -130,7 +140,12 @@
 							? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
 							: 'border-[hsl(var(--border))]'}"
 					>
-						<svg class="w-6 h-6 text-[hsl(var(--muted-foreground))]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<svg
+							class="w-6 h-6 text-[hsl(var(--muted-foreground))]"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
diff --git a/apps/zitare/apps/backend/src/list/list.controller.ts b/apps/zitare/apps/backend/src/list/list.controller.ts
index 2810a0edd..dc1bb825f 100644
--- a/apps/zitare/apps/backend/src/list/list.controller.ts
+++ b/apps/zitare/apps/backend/src/list/list.controller.ts
@@ -1,13 +1,4 @@
-import {
-	Controller,
-	Get,
-	Post,
-	Put,
-	Delete,
-	Body,
-	Param,
-	UseGuards,
-} from '@nestjs/common';
+import { Controller, Get, Post, Put, Delete, Body, Param, UseGuards } from '@nestjs/common';
 import { JwtAuthGuard, CurrentUser, CurrentUserData } from '@manacore/shared-nestjs-auth';
 import { ListService } from './list.service';
 import { IsString, IsNotEmpty, IsOptional, IsArray } from 'class-validator';
diff --git a/apps/zitare/apps/web/src/routes/+page.svelte b/apps/zitare/apps/web/src/routes/+page.svelte
index 4a36baf81..e0c787bf3 100644
--- a/apps/zitare/apps/web/src/routes/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/+page.svelte
@@ -43,7 +43,9 @@
 		favorites = new Set(favorites);
 
 		// Update quote's favorite status
-		quotes = quotes.map((q) => (q.id === quoteId ? { ...q, isFavorite: favorites.has(quoteId) } : q));
+		quotes = quotes.map((q) =>
+			q.id === quoteId ? { ...q, isFavorite: favorites.has(quoteId) } : q
+		);
 
 		// Save to localStorage
 		localStorage.setItem('favorites', JSON.stringify([...favorites]));
@@ -85,7 +87,17 @@
 
 	{#if quotes.length > 0}
 		<div class="scroll-hint">
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
 				<polyline points="6 9 12 15 18 9"></polyline>
 			</svg>
 			<span>Scrollen für mehr</span>
@@ -144,7 +156,11 @@
 	}
 
 	@keyframes bounce-arrow {
-		0%, 20%, 50%, 80%, 100% {
+		0%,
+		20%,
+		50%,
+		80%,
+		100% {
 			transform: translateY(0);
 		}
 		40% {
diff --git a/apps/zitare/apps/web/src/routes/feedback/+page.svelte b/apps/zitare/apps/web/src/routes/feedback/+page.svelte
index 9c699656c..499a8cd34 100644
--- a/apps/zitare/apps/web/src/routes/feedback/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/feedback/+page.svelte
@@ -4,8 +4,4 @@
 	import { authStore } from '$lib/stores/auth.svelte';
 </script>
 
-<FeedbackPage
-	{feedbackService}
-	appName="Zitare"
-	currentUserId={authStore.user?.id}
-/>
+<FeedbackPage {feedbackService} appName="Zitare" currentUserId={authStore.user?.id} />
diff --git a/apps/zitare/apps/web/src/routes/search/+page.svelte b/apps/zitare/apps/web/src/routes/search/+page.svelte
index a53a3d4a9..b50a3a472 100644
--- a/apps/zitare/apps/web/src/routes/search/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/search/+page.svelte
@@ -131,8 +131,20 @@
 	<div class="search-header">
 		<h2>Suche</h2>
 		<div class="search-input-wrapper">
-			<svg class="search-icon" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+			<svg
+				class="search-icon"
+				width="20"
+				height="20"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+				/>
 			</svg>
 			<input
 				type="text"
@@ -144,7 +156,12 @@
 			{#if searchTerm}
 				<button class="clear-btn" onclick={() => (searchTerm = '')} aria-label="Clear search">
 					<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
 					</svg>
 				</button>
 			{/if}
@@ -157,10 +174,18 @@
 			<button class="tab" class:active={activeTab === 'all'} onclick={() => (activeTab = 'all')}>
 				Alle ({filteredQuotes.length + filteredAuthors.length})
 			</button>
-			<button class="tab" class:active={activeTab === 'quotes'} onclick={() => (activeTab = 'quotes')}>
+			<button
+				class="tab"
+				class:active={activeTab === 'quotes'}
+				onclick={() => (activeTab = 'quotes')}
+			>
 				Zitate ({filteredQuotes.length})
 			</button>
-			<button class="tab" class:active={activeTab === 'authors'} onclick={() => (activeTab = 'authors')}>
+			<button
+				class="tab"
+				class:active={activeTab === 'authors'}
+				onclick={() => (activeTab = 'authors')}
+			>
 				Autoren ({filteredAuthors.length})
 			</button>
 		</div>
@@ -168,7 +193,15 @@
 		{#if totalResults === 0}
 			<div class="empty-state">
 				<div class="empty-icon">
-					<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="64"
+						height="64"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.5"
+					>
 						<circle cx="11" cy="11" r="8"></circle>
 						<path d="m21 21-4.35-4.35"></path>
 					</svg>
@@ -234,7 +267,15 @@
 	{:else}
 		<div class="hint">
 			<div class="hint-icon">
-				<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="48"
+					height="48"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+				>
 					<circle cx="11" cy="11" r="8"></circle>
 					<path d="m21 21-4.35-4.35"></path>
 				</svg>
diff --git a/apps/zitare/apps/web/src/routes/settings/+page.svelte b/apps/zitare/apps/web/src/routes/settings/+page.svelte
index ad5be416c..19b8efc19 100644
--- a/apps/zitare/apps/web/src/routes/settings/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/settings/+page.svelte
@@ -139,7 +139,9 @@
 						/>
 					</svg>
 				{/snippet}
-				<span class="px-3 py-1.5 text-sm font-medium bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] rounded-lg">
+				<span
+					class="px-3 py-1.5 text-sm font-medium bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] rounded-lg"
+				>
 					Themes wählen
 				</span>
 			</SettingsRow>
diff --git a/cicd/README.md b/cicd/README.md
index 80d0c7889..fd6752f1f 100644
--- a/cicd/README.md
+++ b/cicd/README.md
@@ -179,14 +179,14 @@ The Hive Mind has delivered:
 
 **Estimated Total**: 5-7 days for full implementation
 
-| Week        | Focus                 | Deliverable                            |
-| ----------- | --------------------- | -------------------------------------- |
-| **Week 1**  | Infrastructure setup  | Hetzner server + Docker Compose setup  |
-| **Week 1**  | Secrets configuration | All GitHub secrets configured          |
-| **Week 1**  | First deployment      | Chat project deployed to staging       |
-| **Week 2**  | Testing validation    | CI/CD pipeline tested end-to-end       |
-| **Week 2**  | Production deployment | First project in production            |
-| **Week 3+** | Full rollout          | All 10 projects deployed               |
+| Week        | Focus                 | Deliverable                           |
+| ----------- | --------------------- | ------------------------------------- |
+| **Week 1**  | Infrastructure setup  | Hetzner server + Docker Compose setup |
+| **Week 1**  | Secrets configuration | All GitHub secrets configured         |
+| **Week 1**  | First deployment      | Chat project deployed to staging      |
+| **Week 2**  | Testing validation    | CI/CD pipeline tested end-to-end      |
+| **Week 2**  | Production deployment | First project in production           |
+| **Week 3+** | Full rollout          | All 10 projects deployed              |
 
 ---
 
diff --git a/docs/ENV_AUDIT_SUMMARY.md b/docs/ENV_AUDIT_SUMMARY.md
index 8295f198a..69c143cf2 100644
--- a/docs/ENV_AUDIT_SUMMARY.md
+++ b/docs/ENV_AUDIT_SUMMARY.md
@@ -5,17 +5,20 @@
 ### BLOCKING (Fix immediately - prevent simultaneous backend execution)
 
 **Port Conflicts:**
+
 ```
 Port 3002: Chat (3002) ← → Nutriphi (3002)  [CONFLICT]
 Port 3003: Picture (3003) ← → Maerchenzauber (3003)  [CONFLICT]
 ```
 
 **Hardcoded Values:**
+
 - Chat backend hardcodes DEV_USER_ID instead of reading from env
 
 ### MAJOR (Inconsistencies across codebase)
 
 **Auth URL Variable Names (Choose One):**
+
 - Chat: MANA_CORE_AUTH_URL ✓
 - Picture: MANA_CORE_AUTH_URL ✓
 - Zitare: MANA_CORE_AUTH_URL ✓
@@ -24,16 +27,19 @@ Port 3003: Picture (3003) ← → Maerchenzauber (3003)  [CONFLICT]
 - **Nutriphi: MANACORE_AUTH_URL** ← Should standardize
 
 **CORS Origins:**
+
 - Hardcoded in 4 backends (Chat, Picture, Zitare, Presi)
 - Should use CORS_ORIGINS from environment
 
 **Missing Documentation:**
+
 - No .env.example for Zitare backend
 - No .env.example for Presi backend
 
 ### MEDIUM (Code quality)
 
 **Validation Schemas:**
+
 - Chat: Missing
 - Picture: Missing
 - Zitare: Missing
@@ -46,18 +52,21 @@ Port 3003: Picture (3003) ← → Maerchenzauber (3003)  [CONFLICT]
 ## Quick Fix Checklist
 
 ### Phase 1: Critical (1-2 hours)
+
 - [ ] Reassign Picture from port 3003 → 3005
 - [ ] Reassign Nutriphi from port 3002 → 3006
 - [ ] Add DEV_USER_ID to .env.development
 - [ ] Update Chat to load DEV_USER_ID from ConfigService
 
 ### Phase 2: Major (2-3 hours)
+
 - [ ] Rename MANA_SERVICE_URL to MANA_CORE_AUTH_URL in Manadeck
 - [ ] Rename MANACORE_AUTH_URL to MANA_CORE_AUTH_URL in Nutriphi
 - [ ] Create .env.example for Zitare
 - [ ] Create .env.example for Presi
 
 ### Phase 3: Quality (3-4 hours)
+
 - [ ] Add validation schemas to Chat, Picture, Zitare, Presi
 - [ ] Extract CORS origins to environment variables
 - [ ] Update all backends to read CORS_ORIGINS from env
@@ -85,12 +94,14 @@ Current:                          Recommended:
 ## Environment Variables Status
 
 ### Well-Configured
+
 - MANA_CORE_AUTH_URL (central + mapped)
 - JWT keys (central)
 - API keys (central)
 - Database URLs (individual + mapped)
 
 ### Needs Work
+
 - DEV_USER_ID (hardcoded, not in env)
 - DEV_BYPASS_AUTH (partial, only Chat)
 - CORS_ORIGINS (hardcoded, not used by all)
@@ -101,31 +112,37 @@ Current:                          Recommended:
 ## Files to Modify
 
 ### .env.development
+
 - [ ] Add DEV_USER_ID line
 - [ ] Fix PICTURE_BACKEND_PORT (3003 → 3005)
 - [ ] Fix NUTRIPHI_BACKEND_PORT (3002 → 3006)
 
 ### scripts/generate-env.mjs
+
 - [ ] Line 205: MANA_SERVICE_URL → MANA_CORE_AUTH_URL (Manadeck)
 - [ ] Line 272: MANACORE_AUTH_URL → MANA_CORE_AUTH_URL (Nutriphi)
 
 ### Backend Apps (4 files each)
+
 - [ ] apps/chat/apps/backend/src/config/validation.schema.ts (create)
 - [ ] apps/picture/apps/backend/src/config/validation.schema.ts (create)
 - [ ] apps/zitare/apps/backend/src/config/validation.schema.ts (create)
 - [ ] apps/presi/apps/backend/src/config/validation.schema.ts (create)
 
 ### Backend Main Files (4 files)
+
 - [ ] apps/chat/apps/backend/src/main.ts (extract CORS)
 - [ ] apps/picture/apps/backend/src/main.ts (extract CORS)
 - [ ] apps/zitare/apps/backend/src/main.ts (extract CORS)
 - [ ] apps/presi/apps/backend/src/main.ts (extract CORS)
 
 ### Backend Examples (2 files)
+
 - [ ] apps/zitare/apps/backend/.env.example (create)
 - [ ] apps/presi/apps/backend/.env.example (create)
 
 ### Chat Guard
+
 - [ ] apps/chat/apps/backend/src/common/guards/jwt-auth.guard.ts
   - Remove hardcoded DEV_USER_ID
   - Read from configService instead
@@ -160,6 +177,7 @@ curl http://localhost:3008/api/health  # Presi
 See full audit report: `/docs/ENV_CONFIGURATION_AUDIT.md`
 
 Key sections:
+
 - Environment Variable Mapping (section 3)
 - Hardcoded Values & Security (section 4)
 - Configuration Best Practices (section 5)
diff --git a/docs/ENV_BACKEND_MATRIX.md b/docs/ENV_BACKEND_MATRIX.md
index 888807c8d..31263f6f8 100644
--- a/docs/ENV_BACKEND_MATRIX.md
+++ b/docs/ENV_BACKEND_MATRIX.md
@@ -20,6 +20,7 @@
 ```
 
 Legend:
+
 - ✓ = Implemented/Present
 - ✗ = Missing/Not implemented
 - ? = Not analyzed in this audit
@@ -63,19 +64,20 @@ Legend:
 ```
 
 Current hardcoded CORS allowed origins (should be environment variable):
+
 ```javascript
 // In 4 backends
 const allowedOrigins = [
-  'http://localhost:3000',
-  'http://localhost:5173',    // Primary web dev port
-  'http://localhost:5174',    // Secondary web port
-  'http://localhost:5175',    // Tertiary web port
-  'http://localhost:5177',    // Zitare web
-  'http://localhost:5178',    // Chat web / Presi web
-  'http://localhost:8081',    // Expo dev server
-  'exp://localhost:8081',     // Expo protocol
-  'http://localhost:3001',    // Mana Core Auth
-]
+	'http://localhost:3000',
+	'http://localhost:5173', // Primary web dev port
+	'http://localhost:5174', // Secondary web port
+	'http://localhost:5175', // Tertiary web port
+	'http://localhost:5177', // Zitare web
+	'http://localhost:5178', // Chat web / Presi web
+	'http://localhost:8081', // Expo dev server
+	'exp://localhost:8081', // Expo protocol
+	'http://localhost:3001', // Mana Core Auth
+];
 ```
 
 ---
@@ -113,11 +115,11 @@ Port 3011 ━━━━━━━━ Mana Games (ACTIVE)
 MANA_CORE_AUTH_PORT (3001)
   ↓ (generate-env.mjs line 61)
   ├→ services/mana-core-auth/.env {PORT}
-  
+
 CHAT_BACKEND_PORT (3002)
   ↓ (generate-env.mjs line 89)
   ├→ apps/chat/apps/backend/.env {PORT}
-  
+
 MANA_CORE_AUTH_URL (http://localhost:3001)
   ↓ (generate-env.mjs multiple lines)
   ├→ apps/chat/apps/backend/.env {MANA_CORE_AUTH_URL}
diff --git a/docs/ENV_CONFIGURATION_AUDIT.md b/docs/ENV_CONFIGURATION_AUDIT.md
index 396c3ea97..5f625419d 100644
--- a/docs/ENV_CONFIGURATION_AUDIT.md
+++ b/docs/ENV_CONFIGURATION_AUDIT.md
@@ -1,4 +1,5 @@
 # Environment Configuration Audit Report
+
 ## Mana Universe Monorepo - Backend Authentication & Configuration
 
 **Date:** December 1, 2025
@@ -12,6 +13,7 @@
 The monorepo has **CRITICAL PORT CONFLICTS** that will prevent multiple backends from running simultaneously. Additionally, there are inconsistencies in environment variable naming conventions across backends and missing configuration examples for some projects.
 
 **Status:** NEEDS IMMEDIATE ACTION
+
 - 2 port conflicts identified
 - 3 naming convention inconsistencies
 - 5 backends missing .env.example files
@@ -23,18 +25,18 @@ The monorepo has **CRITICAL PORT CONFLICTS** that will prevent multiple backends
 
 ### Current Assignments (from .env.development)
 
-| Backend | Port | Env Variable | Status | Conflict |
-|---------|------|--------------|--------|----------|
-| Mana Core Auth | 3001 | MANA_CORE_AUTH_PORT | ✓ Unique | No |
-| Chat | 3002 | CHAT_BACKEND_PORT | ✓ Unique | No |
-| **Maerchenzauber** | **3003** | MAERCHENZAUBER_BACKEND_PORT | ⚠ CONFLICT | **Yes** |
-| Manadeck | 3004 | MANADECK_BACKEND_PORT | ✓ Unique | No |
-| **Picture** | **3003** | PICTURE_BACKEND_PORT | ⚠ CONFLICT | **Yes** |
-| **Nutriphi** | **3002** | NUTRIPHI_BACKEND_PORT | ⚠ CONFLICT | **Yes** |
-| Zitare | 3007 | ZITARE_BACKEND_PORT | ✓ Unique | No |
-| Presi | 3008 | PRESI_BACKEND_PORT | ✓ Unique | No |
-| Mana Games | 3011 | MANA_GAMES_BACKEND_PORT | ✓ Unique | No |
-| Voxel Lava | 3010 | VOXEL_LAVA_BACKEND_PORT | ✓ Unique | No |
+| Backend            | Port     | Env Variable                | Status      | Conflict |
+| ------------------ | -------- | --------------------------- | ----------- | -------- |
+| Mana Core Auth     | 3001     | MANA_CORE_AUTH_PORT         | ✓ Unique    | No       |
+| Chat               | 3002     | CHAT_BACKEND_PORT           | ✓ Unique    | No       |
+| **Maerchenzauber** | **3003** | MAERCHENZAUBER_BACKEND_PORT | ⚠ CONFLICT | **Yes**  |
+| Manadeck           | 3004     | MANADECK_BACKEND_PORT       | ✓ Unique    | No       |
+| **Picture**        | **3003** | PICTURE_BACKEND_PORT        | ⚠ CONFLICT | **Yes**  |
+| **Nutriphi**       | **3002** | NUTRIPHI_BACKEND_PORT       | ⚠ CONFLICT | **Yes**  |
+| Zitare             | 3007     | ZITARE_BACKEND_PORT         | ✓ Unique    | No       |
+| Presi              | 3008     | PRESI_BACKEND_PORT          | ✓ Unique    | No       |
+| Mana Games         | 3011     | MANA_GAMES_BACKEND_PORT     | ✓ Unique    | No       |
+| Voxel Lava         | 3010     | VOXEL_LAVA_BACKEND_PORT     | ✓ Unique    | No       |
 
 ### PORT CONFLICTS FOUND
 
@@ -47,7 +49,9 @@ The monorepo has **CRITICAL PORT CONFLICTS** that will prevent multiple backends
    - Nutriphi Backend: `NUTRIPHI_BACKEND_PORT=3002`
 
 ### RECOMMENDATION
+
 Reassign conflicting ports:
+
 - Maerchenzauber: Keep 3003, reassign Picture to **3005** or **3006**
 - OR reassign Maerchenzauber to **3005** and keep Picture at 3003
 - Nutriphi: Reassign to **3006** or another available port
@@ -61,12 +65,14 @@ Reassign conflicting ports:
 ### Central Configuration (.env.development)
 
 **PRESENT & CONFIGURED:**
+
 - ✓ `MANA_CORE_AUTH_URL=http://localhost:3001` (Line 16)
 - ✓ `DEV_BYPASS_AUTH=true` (Line 59 - Chat only)
 - ✓ JWT_PRIVATE_KEY & JWT_PUBLIC_KEY (Lines 19-20)
 - ✓ CORS_ORIGINS=... (Line 41)
 
 **MISSING CENTRALIZED:**
+
 - ✗ `DEV_USER_ID` - NOT in .env.development
   - Used hardcoded in Chat: `17cb0be7-058a-4964-9e18-1fe7055fd014`
   - Should be centralized in .env.development
@@ -77,13 +83,13 @@ Reassign conflicting ports:
 
 ### Backend-Specific Auth Configuration
 
-| Backend | Auth URL Var | Dev Bypass | Dev User ID | Status |
-|---------|--------------|-----------|-------------|--------|
-| **Chat** | MANA_CORE_AUTH_URL | ✓ Configured | ✗ Hardcoded | ⚠ Partially |
-| **Picture** | MANA_CORE_AUTH_URL | ✗ Missing | ✗ Not checked | ✗ Incomplete |
-| **Zitare** | MANA_CORE_AUTH_URL | ✗ Missing | ✗ Not checked | ✗ Incomplete |
-| **Presi** | MANA_CORE_AUTH_URL | ✗ Missing | ✗ Not checked | ✗ Incomplete |
-| **Manadeck** | MANA_SERVICE_URL | ✗ Not in generation | ✗ Not mapped | ✗ Not generated |
+| Backend      | Auth URL Var       | Dev Bypass          | Dev User ID   | Status          |
+| ------------ | ------------------ | ------------------- | ------------- | --------------- |
+| **Chat**     | MANA_CORE_AUTH_URL | ✓ Configured        | ✗ Hardcoded   | ⚠ Partially    |
+| **Picture**  | MANA_CORE_AUTH_URL | ✗ Missing           | ✗ Not checked | ✗ Incomplete    |
+| **Zitare**   | MANA_CORE_AUTH_URL | ✗ Missing           | ✗ Not checked | ✗ Incomplete    |
+| **Presi**    | MANA_CORE_AUTH_URL | ✗ Missing           | ✗ Not checked | ✗ Incomplete    |
+| **Manadeck** | MANA_SERVICE_URL   | ✗ Not in generation | ✗ Not mapped  | ✗ Not generated |
 
 ### ISSUE: Naming Convention Inconsistency
 
@@ -104,6 +110,7 @@ INCONSISTENT:
 
 **STANDARDIZATION NEEDED:**
 All backends should use consistent naming:
+
 - Recommend: `MANA_CORE_AUTH_URL` (most common)
 
 ---
@@ -112,16 +119,17 @@ All backends should use consistent naming:
 
 ### Generate-env.mjs Coverage Analysis
 
-| Backend | .env.example | generate-env.mjs | .env Generated | Coverage |
-|---------|--------------|------------------|----------------|----------|
-| Chat | ✓ Exists | ✓ Lines 85-98 | ✓ Will generate | ✓ Complete |
-| Picture | ✓ Exists | ✓ Lines 223-243 | ✓ Will generate | ✓ Complete |
-| Manadeck | ✓ Exists | ✓ Lines 199-209 | ✓ Will generate | ✓ Complete |
-| **Zitare** | ✗ Missing | ✓ Lines 294-303 | ✓ Will generate | ⚠ Missing example |
-| **Presi** | ✗ Missing | ✓ Lines 323-334 | ✓ Will generate | ⚠ Missing example |
-| Mana-Core-Auth | ✓ Exists | ✓ Lines 57-82 | ✓ Will generate | ✓ Complete |
+| Backend        | .env.example | generate-env.mjs | .env Generated  | Coverage           |
+| -------------- | ------------ | ---------------- | --------------- | ------------------ |
+| Chat           | ✓ Exists     | ✓ Lines 85-98    | ✓ Will generate | ✓ Complete         |
+| Picture        | ✓ Exists     | ✓ Lines 223-243  | ✓ Will generate | ✓ Complete         |
+| Manadeck       | ✓ Exists     | ✓ Lines 199-209  | ✓ Will generate | ✓ Complete         |
+| **Zitare**     | ✗ Missing    | ✓ Lines 294-303  | ✓ Will generate | ⚠ Missing example |
+| **Presi**      | ✗ Missing    | ✓ Lines 323-334  | ✓ Will generate | ⚠ Missing example |
+| Mana-Core-Auth | ✓ Exists     | ✓ Lines 57-82    | ✓ Will generate | ✓ Complete         |
 
 **Missing .env.example files:**
+
 - `/apps/zitare/apps/backend/.env.example` - Should document PORT, DATABASE_URL, MANA_CORE_AUTH_URL, CORS_ORIGINS
 - `/apps/presi/apps/backend/.env.example` - Should document PORT, DATABASE_URL, MANA_CORE_AUTH_URL, JWT_PUBLIC_KEY, CORS_ORIGINS
 
@@ -132,63 +140,69 @@ All backends should use consistent naming:
 ### Hardcoded in Source Code
 
 **Chat Backend** (`apps/chat/apps/backend/src/common/guards/jwt-auth.guard.ts`):
+
 ```typescript
-const DEV_USER_ID = '17cb0be7-058a-4964-9e18-1fe7055fd014';  // Line 1
+const DEV_USER_ID = '17cb0be7-058a-4964-9e18-1fe7055fd014'; // Line 1
 ```
+
 - Should be: `configService.get('DEV_USER_ID')`
 - Should be in .env.development: `DEV_USER_ID=17cb0be7-058a-4964-9e18-1fe7055fd014`
 
 ### Hardcoded CORS Origins in main.ts
 
 **Chat** (`src/main.ts` lines 10-18):
+
 ```typescript
 origin: [
-    'http://localhost:3000',
-    'http://localhost:5173',
-    'http://localhost:5174',
-    'http://localhost:5178',
-    'http://localhost:8081',
-    'exp://localhost:8081',
-    'http://localhost:3001', // Mana Core Auth
-]
+	'http://localhost:3000',
+	'http://localhost:5173',
+	'http://localhost:5174',
+	'http://localhost:5178',
+	'http://localhost:8081',
+	'exp://localhost:8081',
+	'http://localhost:3001', // Mana Core Auth
+];
 ```
 
 **Picture** (`src/main.ts` lines 11-19):
+
 ```typescript
 const allowedOrigins = [
-    'http://localhost:3000',
-    'http://localhost:5173',
-    'http://localhost:5174',
-    'http://localhost:5175',
-    'http://localhost:8081',
-    'exp://localhost:8081',
-    'http://localhost:3001',
-]
+	'http://localhost:3000',
+	'http://localhost:5173',
+	'http://localhost:5174',
+	'http://localhost:5175',
+	'http://localhost:8081',
+	'exp://localhost:8081',
+	'http://localhost:3001',
+];
 ```
 
 **Presi** (`src/main.ts` lines 10-17):
+
 ```typescript
 origin: [
-    'http://localhost:3000',
-    'http://localhost:5173',
-    'http://localhost:5177',
-    'http://localhost:5178',
-    'http://localhost:8081',
-    'exp://localhost:8081',
-    'http://localhost:3001',
-]
+	'http://localhost:3000',
+	'http://localhost:5173',
+	'http://localhost:5177',
+	'http://localhost:5178',
+	'http://localhost:8081',
+	'exp://localhost:8081',
+	'http://localhost:3001',
+];
 ```
 
 **Zitare** (`src/main.ts` lines 10-16):
+
 ```typescript
 origin: [
-    'http://localhost:3000',
-    'http://localhost:5173',
-    'http://localhost:5177',
-    'http://localhost:8081',
-    'exp://localhost:8081',
-    'http://localhost:3001',
-]
+	'http://localhost:3000',
+	'http://localhost:5173',
+	'http://localhost:5177',
+	'http://localhost:8081',
+	'exp://localhost:8081',
+	'http://localhost:3001',
+];
 ```
 
 **RECOMMENDATION:** Move CORS_ORIGINS to .env.development (already exists as CORS_ORIGINS global variable, but not used by all backends)
@@ -199,25 +213,26 @@ origin: [
 
 ### Configuration Module Setup
 
-| Backend | ConfigModule | Validation | Env File Path | Status |
-|---------|--------------|-----------|----------------|--------|
-| Chat | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env` | ⚠ Minimal |
-| Picture | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env` | ⚠ Minimal |
-| Zitare | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env` | ⚠ Minimal |
-| Presi | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env` | ⚠ Minimal |
-| Manadeck | ✓ ConfigModule.forRoot() | ✓ Joi schema | `.env` | ✓ Complete |
-| Mana-Core-Auth | ✓ ConfigModule.forRoot() | ✓ Config service | `.env` | ✓ Complete |
+| Backend        | ConfigModule             | Validation             | Env File Path | Status     |
+| -------------- | ------------------------ | ---------------------- | ------------- | ---------- |
+| Chat           | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env`        | ⚠ Minimal |
+| Picture        | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env`        | ⚠ Minimal |
+| Zitare         | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env`        | ⚠ Minimal |
+| Presi          | ✓ ConfigModule.forRoot() | ✗ No validation schema | `.env`        | ⚠ Minimal |
+| Manadeck       | ✓ ConfigModule.forRoot() | ✓ Joi schema           | `.env`        | ✓ Complete |
+| Mana-Core-Auth | ✓ ConfigModule.forRoot() | ✓ Config service       | `.env`        | ✓ Complete |
 
 **ISSUE:** Chat, Picture, Zitare, Presi lack validation schemas.
 
 **EXAMPLE (Manadeck validation.schema.ts):**
+
 ```typescript
 export const validationSchema = Joi.object({
-    NODE_ENV: Joi.string().valid('development', 'production'),
-    PORT: Joi.number().required(),
-    DATABASE_URL: Joi.string().required(),
-    MANA_CORE_AUTH_URL: Joi.string().required(),
-    // ... etc
+	NODE_ENV: Joi.string().valid('development', 'production'),
+	PORT: Joi.number().required(),
+	DATABASE_URL: Joi.string().required(),
+	MANA_CORE_AUTH_URL: Joi.string().required(),
+	// ... etc
 });
 ```
 
@@ -321,18 +336,18 @@ export const validationSchema = Joi.object({
 
 ## 8. UPDATED PORT ASSIGNMENTS (RECOMMENDED)
 
-| Backend | Recommended Port | Current | Status |
-|---------|-----------------|---------|--------|
-| Mana Core Auth | 3001 | 3001 | ✓ Keep |
-| Chat | 3002 | 3002 | ✓ Keep |
-| Maerchenzauber | 3003 | 3003 | ✓ Keep |
-| Manadeck | 3004 | 3004 | ✓ Keep |
-| Picture | **3005** | 3003 | **CHANGE** |
-| Nutriphi | **3006** | 3002 | **CHANGE** |
-| Zitare | 3007 | 3007 | ✓ Keep |
-| Presi | 3008 | 3008 | ✓ Keep |
-| Voxel Lava | 3010 | 3010 | ✓ Keep |
-| Mana Games | 3011 | 3011 | ✓ Keep |
+| Backend        | Recommended Port | Current | Status     |
+| -------------- | ---------------- | ------- | ---------- |
+| Mana Core Auth | 3001             | 3001    | ✓ Keep     |
+| Chat           | 3002             | 3002    | ✓ Keep     |
+| Maerchenzauber | 3003             | 3003    | ✓ Keep     |
+| Manadeck       | 3004             | 3004    | ✓ Keep     |
+| Picture        | **3005**         | 3003    | **CHANGE** |
+| Nutriphi       | **3006**         | 3002    | **CHANGE** |
+| Zitare         | 3007             | 3007    | ✓ Keep     |
+| Presi          | 3008             | 3008    | ✓ Keep     |
+| Voxel Lava     | 3010             | 3010    | ✓ Keep     |
+| Mana Games     | 3011             | 3011    | ✓ Keep     |
 
 ---
 
@@ -340,32 +355,32 @@ export const validationSchema = Joi.object({
 
 ### Required for All Backends
 
-| Variable | Purpose | Centralized | Backend Usage |
-|----------|---------|------------|---|
-| NODE_ENV | Environment type | ✓ .env.development | All |
-| PORT | Server port | ✓ Individual vars | All |
-| DATABASE_URL | PostgreSQL connection | ✓ Individual vars | Chat, Manadeck, Picture, Zitare, Presi |
-| MANA_CORE_AUTH_URL | Auth service URL | ✓ .env.development | Chat, Picture, Zitare, Presi, Manadeck |
-| CORS_ORIGINS | Allowed origins | ✓ .env.development | All (hardcoded, should use env) |
+| Variable           | Purpose               | Centralized        | Backend Usage                          |
+| ------------------ | --------------------- | ------------------ | -------------------------------------- |
+| NODE_ENV           | Environment type      | ✓ .env.development | All                                    |
+| PORT               | Server port           | ✓ Individual vars  | All                                    |
+| DATABASE_URL       | PostgreSQL connection | ✓ Individual vars  | Chat, Manadeck, Picture, Zitare, Presi |
+| MANA_CORE_AUTH_URL | Auth service URL      | ✓ .env.development | Chat, Picture, Zitare, Presi, Manadeck |
+| CORS_ORIGINS       | Allowed origins       | ✓ .env.development | All (hardcoded, should use env)        |
 
 ### Optional but Recommended
 
-| Variable | Purpose | Centralized | Backend Usage |
-|----------|---------|------------|---|
-| DEV_BYPASS_AUTH | Skip auth in dev | ⚠ Partial | Chat only |
-| DEV_USER_ID | Dev test user | ✗ Hardcoded | Chat |
-| JWT_PUBLIC_KEY | Token validation | ✓ .env.development | Presi |
+| Variable        | Purpose          | Centralized        | Backend Usage |
+| --------------- | ---------------- | ------------------ | ------------- |
+| DEV_BYPASS_AUTH | Skip auth in dev | ⚠ Partial         | Chat only     |
+| DEV_USER_ID     | Dev test user    | ✗ Hardcoded        | Chat          |
+| JWT_PUBLIC_KEY  | Token validation | ✓ .env.development | Presi         |
 
 ### Backend-Specific
 
-| Backend | Key Variables | Centralized |
-|---------|---|---|
-| Chat | GOOGLE_GENAI_API_KEY, AZURE_OPENAI_* | ✓ .env.development |
-| Picture | REPLICATE_API_TOKEN, S3_* vars | ✓ .env.development |
-| Zitare | (None beyond base) | ✓ .env.development |
-| Presi | (None beyond base) | ✓ .env.development |
-| Manadeck | GOOGLE_GENAI_API_KEY | ✓ .env.development |
-| Mana-Core-Auth | JWT_*, STRIPE_*, CREDITS_* | ✓ .env.development |
+| Backend        | Key Variables                         | Centralized        |
+| -------------- | ------------------------------------- | ------------------ |
+| Chat           | GOOGLE*GENAI_API_KEY, AZURE_OPENAI*\* | ✓ .env.development |
+| Picture        | REPLICATE*API_TOKEN, S3*\* vars       | ✓ .env.development |
+| Zitare         | (None beyond base)                    | ✓ .env.development |
+| Presi          | (None beyond base)                    | ✓ .env.development |
+| Manadeck       | GOOGLE_GENAI_API_KEY                  | ✓ .env.development |
+| Mana-Core-Auth | JWT*\*, STRIPE*_, CREDITS\__          | ✓ .env.development |
 
 ---
 
@@ -393,6 +408,7 @@ export const validationSchema = Joi.object({
 ## AUDIT DETAILS
 
 **Files Reviewed:**
+
 - .env.development (202 lines)
 - scripts/generate-env.mjs (433 lines)
 - 6 backends app.module.ts files
@@ -405,4 +421,3 @@ export const validationSchema = Joi.object({
 **Lines of Code Reviewed:** 2,000+
 **Issues Identified:** 8 critical/major issues
 **Port Conflicts Found:** 2 (affecting 3 backends)
-
diff --git a/docs/HETZNER_DEPLOYMENT_SUMMARY.md b/docs/HETZNER_DEPLOYMENT_SUMMARY.md
index 3f6a87e14..b741da0a6 100644
--- a/docs/HETZNER_DEPLOYMENT_SUMMARY.md
+++ b/docs/HETZNER_DEPLOYMENT_SUMMARY.md
@@ -13,12 +13,14 @@ Your monorepo has **solid Docker foundations** but needs **4 critical fixes** (2
 ### Current State: ⚠️ Not Production Ready
 
 **What's Working**:
+
 - Multi-environment Docker Compose setups ✅
 - 4 containerized backends (auth, chat, picture, manadeck) ✅
 - Health checks and dependency management ✅
 - Security best practices (non-root, Alpine, network isolation) ✅
 
 **What Needs Fixing**:
+
 1. ❌ Missing Prometheus configuration (`docker/prometheus/prometheus.yml`)
 2. ❌ Missing Grafana provisioning (`docker/grafana/provisioning/`)
 3. ❌ ManaDeck uses Node 18 (should be Node 20)
@@ -113,6 +115,7 @@ echo "0 2 * * * /usr/local/bin/docker-backup.sh" | crontab -
 ### For Your Monorepo Size (10 backends, 10 web apps)
 
 **Option 1: Single Server (Development/Staging)** - €28/month
+
 ```
 Server: Hetzner CX33 (4 vCPU, 8GB RAM)
 - All services on one server
@@ -121,6 +124,7 @@ Server: Hetzner CX33 (4 vCPU, 8GB RAM)
 ```
 
 **Option 2: Production HA Setup** - €37/month
+
 ```
 2x Hetzner CPX21 (3 vCPU, 4GB RAM) - €14/month
 + Load Balancer - €5.39/month
@@ -129,6 +133,7 @@ Server: Hetzner CX33 (4 vCPU, 8GB RAM)
 ```
 
 **Option 3: Full Monorepo (All Services)** - €166/month
+
 ```
 3x App Servers (CX33) - €84/month
 1x DB Server (CX31) - €28/month
@@ -146,6 +151,7 @@ Savings: 60-75%
 ## Cost Breakdown: What You'll Pay Monthly
 
 ### Minimal Production (5 services)
+
 ```
 Server (CPX21):              €7.00/month
 Volume (50GB):               €2.50/month
@@ -155,6 +161,7 @@ Total:                      €13.81/month
 ```
 
 ### Your Current Setup (Full Monorepo)
+
 ```
 3x Servers (CX33):          €84.00/month
 1x Database Server:         €28.00/month
@@ -217,27 +224,32 @@ Traefik (SSL + Reverse Proxy)
 ## Key Files & Locations
 
 ### Documentation (Created Today)
+
 - `docs/DOCKER_SETUP_ANALYSIS.md` - Complete current state analysis
 - `docs/HETZNER_PRODUCTION_GUIDE.md` - Comprehensive deployment guide
 - `docs/HETZNER_DEPLOYMENT_SUMMARY.md` - This quick reference
 
 ### Existing Documentation
+
 - `docs/DEPLOYMENT_HETZNER.md` - Deployment options comparison (German)
 - `docs/DOCKER_GUIDE.md` - Docker usage guide
 - `docs/DEPLOYMENT_ARCHITECTURE.md` - Architecture details
 
 ### Docker Configuration Files
+
 - `docker-compose.yml` - Full stack with monitoring
 - `docker-compose.dev.yml` - Development environment
 - `docker-compose.staging.yml` - Staging deployment
 - `docker-compose.production.yml` - Production deployment
 
 ### Docker Templates
+
 - `docker/templates/Dockerfile.nestjs` - NestJS backend template
 - `docker/templates/Dockerfile.sveltekit` - SvelteKit web template
 - `docker/templates/Dockerfile.astro` - Astro landing page template
 
 ### Active Service Dockerfiles
+
 - `services/mana-core-auth/Dockerfile` ✅
 - `apps/chat/apps/backend/Dockerfile` ✅
 - `apps/picture/apps/backend/Dockerfile` ✅
@@ -277,19 +289,23 @@ Traefik (SSL + Reverse Proxy)
 ### What You Get
 
 **Metrics Collection**:
+
 - Prometheus - Time-series metrics database
 - cAdvisor - Container resource usage
 - Node Exporter - Host system metrics
 
 **Visualization**:
+
 - Grafana - Dashboards and alerts
 - Pre-built dashboards for Docker, PostgreSQL, Redis
 
 **Logging**:
+
 - Loki - Log aggregation
 - Promtail - Log collection from containers
 
 **Access**:
+
 - Grafana UI: `http://your-server:3000`
 - Prometheus UI: `http://your-server:9090`
 
@@ -524,30 +540,35 @@ curl http://localhost:3000/health
 ### How to Know You're Production Ready
 
 ✅ **Infrastructure**
+
 - [ ] Server accessible via SSH with key authentication
 - [ ] Docker and docker-compose installed and working
 - [ ] Firewall configured (Hetzner + UFW)
 - [ ] Private network configured (if multi-server)
 
 ✅ **Application**
+
 - [ ] All services start and pass health checks
 - [ ] Environment variables properly configured
 - [ ] SSL/TLS working (Let's Encrypt)
 - [ ] Database migrations run successfully
 
 ✅ **Monitoring**
+
 - [ ] Prometheus collecting metrics
 - [ ] Grafana dashboards accessible
 - [ ] Alerts configured and tested
 - [ ] Logs centralized in Loki
 
 ✅ **Backups**
+
 - [ ] Automated daily backups running
 - [ ] Storage Box configured
 - [ ] Restore procedure tested
 - [ ] Retention policy configured
 
 ✅ **CI/CD**
+
 - [ ] GitHub Actions workflow working
 - [ ] Automated deployments successful
 - [ ] Rollback procedure tested
@@ -581,12 +602,14 @@ curl http://localhost:3000/health
 ## Summary
 
 You have:
+
 - ✅ **Solid foundation** with multi-environment Docker setup
 - ✅ **4 containerized services** ready to deploy
 - ✅ **Complete documentation** for production deployment
 - ⚠️ **4 critical fixes** needed (2-4 hours of work)
 
 After fixes:
+
 - 🚀 **2-4 hours** to deploy to Hetzner
 - 💰 **€14-166/month** depending on scale (60-75% cheaper than AWS)
 - 📊 **Complete monitoring** with Prometheus + Grafana
diff --git a/docs/HETZNER_PRODUCTION_GUIDE.md b/docs/HETZNER_PRODUCTION_GUIDE.md
index 1f7eac0b2..6f9b572a7 100644
--- a/docs/HETZNER_PRODUCTION_GUIDE.md
+++ b/docs/HETZNER_PRODUCTION_GUIDE.md
@@ -28,6 +28,7 @@
 #### Entry-Level Production (Small Applications)
 
 **Hetzner CX23**: 2 vCPUs, 4 GB RAM, 40 GB storage, 20 TB traffic
+
 - **Price**: €3.49/month
 - **Use Case**: Single container apps, development/staging environments
 - **Suitable For**: Individual microservices, low-traffic applications
@@ -35,11 +36,13 @@
 #### Mid-Tier Production (Standard Applications)
 
 **Hetzner CPX21**: 3 shared vCPUs, 4 GB RAM, 80 GB storage
+
 - **Price**: ~€7/month
 - **Use Case**: Multi-container applications, small microservices
 - **Best For**: 2-3 backend services + web apps
 
 **Hetzner CX33**: 2 vCPUs, 8 GB RAM, 80 GB storage, 20 TB traffic
+
 - **Price**: €5.49/month
 - **Use Case**: Standard production workloads
 - **Best For**: Full stack with 5-6 services
@@ -47,11 +50,13 @@
 #### High-Performance Production
 
 **CCX Series**: Dedicated vCPUs for CPU-intensive workloads
+
 - **CCX42**: 16 vCPU, 64 GB RAM - €101/month
 - **Use Case**: High-traffic applications, full monorepo deployment
 - **Best For**: 10+ services with monitoring stack
 
 **CAX ARM Series**: 40% better cost efficiency
+
 - **CAX21**: 4 ARM vCPUs, 8 GB RAM - ~€8/month
 - **Use Case**: ARM-compatible Docker images
 - **Benefit**: Better performance-per-euro
@@ -59,11 +64,13 @@
 ### ARM vs x86 Considerations
 
 **ARM64 (CAX) Advantages**:
+
 - 40% cost savings
 - Better performance-per-euro
 - Modern Docker images support ARM64
 
 **Compatibility Check**:
+
 - Node.js: ✅ Full ARM64 support
 - Python: ✅ Full ARM64 support
 - Go: ✅ Native ARM64
@@ -71,6 +78,7 @@
 - Redis: ✅ Official ARM images
 
 **Check Your Dependencies**:
+
 ```bash
 # Test ARM compatibility locally (M1/M2 Mac)
 docker buildx build --platform linux/arm64 .
@@ -85,11 +93,13 @@ docker buildx build --platform linux/arm64 .
 **Recommended**: Use **Docker CE App** from Hetzner Cloud Apps during server creation.
 
 **Benefits**:
+
 - Docker and docker-compose pre-installed
 - Optimized for Hetzner infrastructure
 - Eliminates manual installation errors
 
 **Alternative** (Manual Installation):
+
 ```bash
 curl -fsSL https://get.docker.com -o get-docker.sh
 sh get-docker.sh
@@ -144,18 +154,17 @@ hcloud server attach-to-network <server-id> --network production-network --ip 10
 ```json
 // /etc/docker/daemon.json
 {
-  "mtu": 1450,
-  "default-address-pools": [
-    {"base": "172.17.0.0/12", "size": 24}
-  ],
-  "live-restore": true,
-  "userland-proxy": false,
-  "no-new-privileges": true,
-  "icc": false
+	"mtu": 1450,
+	"default-address-pools": [{ "base": "172.17.0.0/12", "size": 24 }],
+	"live-restore": true,
+	"userland-proxy": false,
+	"no-new-privileges": true,
+	"icc": false
 }
 ```
 
 **Apply Configuration**:
+
 ```bash
 systemctl restart docker
 ```
@@ -170,6 +179,7 @@ systemctl restart docker
 ### Floating IPs (High Availability)
 
 **Use Cases**:
+
 - High availability setups
 - Zero-downtime deployments
 - Failover scenarios
@@ -213,22 +223,24 @@ Internet → Hetzner LB → Private Network → Docker Containers
 **Configuration Options**:
 
 1. **Direct Binding**: App containers bind to private IPs
+
    ```yaml
    services:
      web:
        networks:
          - private
        ports:
-         - "10.0.1.2:3000:3000"
+         - '10.0.1.2:3000:3000'
    ```
 
 2. **Traefik Reverse Proxy**: LB routes to Traefik on Docker Swarm
+
    ```yaml
    services:
      traefik:
        ports:
-         - "80:80"
-         - "443:443"
+         - '80:80'
+         - '443:443'
        networks:
          - public
          - private
@@ -252,6 +264,7 @@ Internet → Hetzner LB → Private Network → Docker Containers
 ### Block Storage Volumes
 
 **Characteristics**:
+
 - Attach to **single server only** (not shared)
 - ext4 or xfs filesystems (ext4 recommended)
 - Up to 10 TB per volume
@@ -297,6 +310,7 @@ volumes:
 #### Option 1: Borg Backup with Storage Box (Recommended)
 
 **Why Borg?**
+
 - Deduplication (saves space)
 - Compression (lz4, zstd)
 - Encryption (AES-256)
@@ -434,6 +448,7 @@ cp /var/lib/docker/volumes/redis-data/_data/dump.rdb \
 **Critical Warning**:
 
 ❌ **DO NOT store Docker images on Storage Box**
+
 - Causes instability (storage can disconnect)
 - Docker requires 100% available storage
 - Use only for application data, NOT `/var/lib/docker`
@@ -447,8 +462,8 @@ volumes:
     driver: local
     driver_opts:
       type: cifs
-      o: "username=u123456,password=${STORAGE_BOX_PASSWORD},addr=u123456.your-storagebox.de"
-      device: "//u123456.your-storagebox.de/uploads"
+      o: 'username=u123456,password=${STORAGE_BOX_PASSWORD},addr=u123456.your-storagebox.de'
+      device: '//u123456.your-storagebox.de/uploads'
 ```
 
 ---
@@ -549,17 +564,17 @@ ufw status verbose
 ```json
 // /etc/docker/daemon.json
 {
-  "live-restore": true,
-  "userland-proxy": false,
-  "no-new-privileges": true,
-  "icc": false,
-  "log-driver": "json-file",
-  "log-opts": {
-    "max-size": "10m",
-    "max-file": "3"
-  },
-  "metrics-addr": "127.0.0.1:9323",
-  "experimental": true
+	"live-restore": true,
+	"userland-proxy": false,
+	"no-new-privileges": true,
+	"icc": false,
+	"log-driver": "json-file",
+	"log-opts": {
+		"max-size": "10m",
+		"max-file": "3"
+	},
+	"metrics-addr": "127.0.0.1:9323",
+	"experimental": true
 }
 ```
 
@@ -578,7 +593,7 @@ services:
       - NET_BIND_SERVICE
     tmpfs:
       - /tmp:noexec,nosuid,size=100m
-    user: "1000:1000"
+    user: '1000:1000'
 ```
 
 #### 4. Fail2ban Configuration
@@ -683,6 +698,7 @@ cd /opt/prometheus-grafana
 ```
 
 **Included Components**:
+
 - Prometheus (metrics collection)
 - Grafana (visualization)
 - cAdvisor (container metrics)
@@ -708,7 +724,7 @@ services:
       - '--storage.tsdb.retention.time=30d'
       - '--web.enable-lifecycle'
     ports:
-      - "127.0.0.1:9090:9090"
+      - '127.0.0.1:9090:9090'
     restart: unless-stopped
     networks:
       - monitoring
@@ -724,7 +740,7 @@ services:
       - GF_INSTALL_PLUGINS=redis-datasource,grafana-piechart-panel
       - GF_SERVER_ROOT_URL=https://grafana.yourdomain.com
     ports:
-      - "127.0.0.1:3000:3000"
+      - '127.0.0.1:3000:3000'
     restart: unless-stopped
     networks:
       - monitoring
@@ -741,7 +757,7 @@ services:
       - /var/lib/docker/:/var/lib/docker:ro
       - /dev/disk/:/dev/disk:ro
     ports:
-      - "127.0.0.1:8080:8080"
+      - '127.0.0.1:8080:8080'
     restart: unless-stopped
     networks:
       - monitoring
@@ -757,7 +773,7 @@ services:
     volumes:
       - '/:/host:ro,rslave'
     ports:
-      - "127.0.0.1:9100:9100"
+      - '127.0.0.1:9100:9100'
     restart: unless-stopped
     networks:
       - monitoring
@@ -769,7 +785,7 @@ services:
       - loki-data:/loki
       - ./docker/loki/loki-config.yml:/etc/loki/local-config.yaml:ro
     ports:
-      - "127.0.0.1:3100:3100"
+      - '127.0.0.1:3100:3100'
     restart: unless-stopped
     networks:
       - monitoring
@@ -861,8 +877,8 @@ groups:
         labels:
           severity: critical
         annotations:
-          summary: "Container {{ $labels.job }} is down"
-          description: "Container {{ $labels.job }} has been down for more than 1 minute."
+          summary: 'Container {{ $labels.job }} is down'
+          description: 'Container {{ $labels.job }} has been down for more than 1 minute.'
 
       - alert: HighMemoryUsage
         expr: (container_memory_usage_bytes / container_spec_memory_limit_bytes) > 0.9
@@ -870,8 +886,8 @@ groups:
         labels:
           severity: warning
         annotations:
-          summary: "High memory usage on {{ $labels.name }}"
-          description: "Container {{ $labels.name }} memory usage is above 90%."
+          summary: 'High memory usage on {{ $labels.name }}'
+          description: 'Container {{ $labels.name }} memory usage is above 90%.'
 
       - alert: HighCPUUsage
         expr: rate(container_cpu_usage_seconds_total[5m]) > 0.8
@@ -879,8 +895,8 @@ groups:
         labels:
           severity: warning
         annotations:
-          summary: "High CPU usage on {{ $labels.name }}"
-          description: "Container {{ $labels.name }} CPU usage is above 80%."
+          summary: 'High CPU usage on {{ $labels.name }}'
+          description: 'Container {{ $labels.name }} CPU usage is above 80%.'
 
   - name: host
     interval: 30s
@@ -891,8 +907,8 @@ groups:
         labels:
           severity: critical
         annotations:
-          summary: "Host out of disk space"
-          description: "Disk space is below 10%."
+          summary: 'Host out of disk space'
+          description: 'Disk space is below 10%.'
 
       - alert: HostHighCPULoad
         expr: 100 - (avg by(instance) (irate(node_cpu_seconds_total{mode="idle"}[5m])) * 100) > 80
@@ -900,8 +916,8 @@ groups:
         labels:
           severity: warning
         annotations:
-          summary: "Host high CPU load"
-          description: "CPU load is > 80%."
+          summary: 'Host high CPU load'
+          description: 'CPU load is > 80%.'
 ```
 
 ### Hetzner-Specific Monitoring
@@ -926,6 +942,7 @@ scrape_configs:
 ```
 
 **Available Grafana Dashboards**:
+
 - **Hetzner Cloud Servers**: Dashboard ID 16169
 - **Hetzner Cloud Servers & Load Balancers**: Dashboard ID 20257
 
@@ -1131,6 +1148,7 @@ jobs:
 #### Option 2: Self-Hosted GitHub Runner on Hetzner
 
 **Benefits**:
+
 - 3-10x cheaper than GitHub-hosted runners
 - Faster builds with persistent caching
 - Full control over environment
@@ -1275,11 +1293,13 @@ Production (Large): CCX42 (€101/month)
 **Cost Savings**: 40% lower operational costs vs x86
 
 **Example**:
+
 - **CX21** (x86): 2 vCPU, 4GB RAM - €6/month
 - **CAX21** (ARM): 4 vCPU, 8GB RAM - ~€8/month
 - **Better**: More CPUs, more RAM, same price range
 
 **Requirements**:
+
 - ARM64-compatible Docker images
 - Test thoroughly before production migration
 
@@ -1322,6 +1342,7 @@ hcloud snapshot list -o json | \
 ```
 
 **Cost Impact**:
+
 - Volumes: €0.05/GB/month (even when detached)
 - Snapshots: €0.01/GB/month
 - Storage Box: €0.04/GB/month (cheaper for cold storage)
@@ -1332,6 +1353,7 @@ hcloud snapshot list -o json | \
 **Additional Traffic**: €1.19/TB
 
 **Optimization**:
+
 - Use private networks for inter-server communication (free)
 - Enable compression in Nginx/Traefik
 - Serve static assets from CDN (Cloudflare free)
@@ -1347,21 +1369,25 @@ gzip_types text/plain text/css text/xml application/json application/javascript;
 #### 5. Load Balancer Optimization
 
 **Pricing**:
+
 - Small LB (5K connections): €5.39/month
 - Large LB (40K connections): €15.49/month
 
 **When to Use**:
+
 - Multi-server setups only
 - For single server, use Nginx/Traefik directly (no LB cost)
 
 #### 6. Monitoring Costs
 
 **Self-Hosted** (Prometheus + Grafana):
+
 - Cost: ~€0/month (runs on same server)
 - Overhead: ~200MB RAM
 - No external service fees
 
 **External Monitoring** (Datadog, New Relic):
+
 - Cost: $20-50+/month per host
 - Only if specific features required
 
@@ -1430,6 +1456,7 @@ hcloud billing get-month $YEAR_MONTH | jq
 ```
 
 **Set Billing Alerts** (via Hetzner Console):
+
 - Alert at €50
 - Alert at €100
 - Alert at €150
@@ -1454,6 +1481,7 @@ hcloud billing get-month $YEAR_MONTH | jq
 ### When to Use Docker Swarm
 
 **Best For**:
+
 - Small to medium deployments (<50 nodes)
 - Teams familiar with Docker Compose
 - Quick setup requirements (<30 minutes to production)
@@ -1461,6 +1489,7 @@ hcloud billing get-month $YEAR_MONTH | jq
 - Projects prioritizing simplicity over features
 
 **Advantages**:
+
 - Native Docker integration (same CLI)
 - Easy migration from docker-compose
 - Lower learning curve
@@ -1491,6 +1520,7 @@ docker service update \
 ### When to Use Kubernetes (k3s)
 
 **Best For**:
+
 - Medium to large deployments (>20 nodes)
 - Complex microservices architectures
 - Need for advanced networking (service mesh)
@@ -1498,6 +1528,7 @@ docker service update \
 - Enterprise compliance requirements
 
 **Advantages on Hetzner**:
+
 - k3s optimized for Hetzner's cost structure
 - 40% lower costs vs MicroK8s
 - Production-grade availability
@@ -1505,29 +1536,31 @@ docker service update \
 - Better for multi-tenant applications
 
 **k3s Recommended** over full Kubernetes:
+
 - 50% less memory usage
 - Single binary installation
 - Hetzner-specific tooling available
 
 ### Quick Comparison
 
-| Factor | Docker Swarm | k3s on Hetzner |
-|--------|--------------|----------------|
-| **Setup Time** | 15 minutes | 30-60 minutes |
-| **Learning Curve** | Low | Medium |
-| **Resource Overhead** | Minimal (~100MB) | Low (~500MB) |
-| **Ecosystem** | Limited | Extensive |
-| **Cost (3 nodes)** | ~€21/month | ~€21/month |
-| **Operational Complexity** | Lower | Higher |
-| **Max Scale** | ~50 nodes | 1000+ nodes |
-| **Auto-Scaling** | Manual | HPA (Horizontal Pod Autoscaler) |
-| **Service Mesh** | No | Yes (Linkerd, Istio) |
+| Factor                     | Docker Swarm     | k3s on Hetzner                  |
+| -------------------------- | ---------------- | ------------------------------- |
+| **Setup Time**             | 15 minutes       | 30-60 minutes                   |
+| **Learning Curve**         | Low              | Medium                          |
+| **Resource Overhead**      | Minimal (~100MB) | Low (~500MB)                    |
+| **Ecosystem**              | Limited          | Extensive                       |
+| **Cost (3 nodes)**         | ~€21/month       | ~€21/month                      |
+| **Operational Complexity** | Lower            | Higher                          |
+| **Max Scale**              | ~50 nodes        | 1000+ nodes                     |
+| **Auto-Scaling**           | Manual           | HPA (Horizontal Pod Autoscaler) |
+| **Service Mesh**           | No               | Yes (Linkerd, Istio)            |
 
 ### Recommendation for Manacore Monorepo
 
 **Start with Docker Swarm**, then migrate to k3s if needed:
 
 **Rationale**:
+
 1. **Faster Time to Market**: 15-minute setup vs 1+ week for K8s
 2. **Lower Complexity**: Existing Docker Compose knowledge sufficient
 3. **Cost Effective**: Same infrastructure cost, lower ops overhead
@@ -1952,12 +1985,14 @@ This guide provides a comprehensive production deployment strategy for the Manac
 - **Maintainable**: Automated deployments and backups
 
 **Estimated Time to Production**:
+
 - Initial setup: 4-6 hours
 - Application deployment: 2-3 hours
 - Testing and hardening: 4-6 hours
 - **Total**: ~10-15 hours for complete production deployment
 
 **Monthly Operational Cost**:
+
 - Single server: €14-28/month
 - HA setup: €37-50/month
 - Full monorepo: €166/month
@@ -1965,6 +2000,7 @@ This guide provides a comprehensive production deployment strategy for the Manac
 ---
 
 **Related Documentation**:
+
 - `DOCKER_SETUP_ANALYSIS.md` - Current Docker setup analysis
 - `DOCKER_COMPOSE_PRODUCTION_ARCHITECTURE.md` - Architecture design
 - `DEPLOYMENT_HETZNER.md` - Deployment options comparison
diff --git a/docs/README_ENV_AUDIT.md b/docs/README_ENV_AUDIT.md
index 60a287eca..ca55d6f45 100644
--- a/docs/README_ENV_AUDIT.md
+++ b/docs/README_ENV_AUDIT.md
@@ -5,6 +5,7 @@ This folder contains a comprehensive audit of all backend environment variable c
 ## Documents
 
 ### 1. [ENV_CONFIGURATION_AUDIT.md](ENV_CONFIGURATION_AUDIT.md) - MAIN REPORT
+
 **The complete audit with all findings and detailed analysis**
 
 - **Section 1:** Port Assignment Matrix (identifies 2 port conflicts)
@@ -25,6 +26,7 @@ This folder contains a comprehensive audit of all backend environment variable c
 ---
 
 ### 2. [ENV_AUDIT_SUMMARY.md](ENV_AUDIT_SUMMARY.md) - QUICK START GUIDE
+
 **Executive summary with actionable checklists and next steps**
 
 - **Quick Issue Overview:** Blocking, Major, and Medium issues at a glance
@@ -42,6 +44,7 @@ This folder contains a comprehensive audit of all backend environment variable c
 ---
 
 ### 3. [ENV_BACKEND_MATRIX.md](ENV_BACKEND_MATRIX.md) - DETAILED MATRIX VISUALIZATION
+
 **Backend configuration status visualized in detailed tables and matrices**
 
 - **Backend Status Matrix:** Port, Auth URL, Dev Bypass, Validation status
@@ -90,11 +93,11 @@ This folder contains a comprehensive audit of all backend environment variable c
 
 ## Quick Fix Timeline
 
-| Phase | Tasks | Time | Impact |
-|-------|-------|------|--------|
-| Phase 1 | Fix ports + add DEV_USER_ID | 15-30 min | CRITICAL - Enables simultaneous backend execution |
-| Phase 2 | Standardize naming + add .env examples | 30 min | MAJOR - Improves consistency |
-| Phase 3 | Add validation schemas + extract CORS | 2-3 hours | QUALITY - Code quality improvement |
+| Phase   | Tasks                                  | Time      | Impact                                            |
+| ------- | -------------------------------------- | --------- | ------------------------------------------------- |
+| Phase 1 | Fix ports + add DEV_USER_ID            | 15-30 min | CRITICAL - Enables simultaneous backend execution |
+| Phase 2 | Standardize naming + add .env examples | 30 min    | MAJOR - Improves consistency                      |
+| Phase 3 | Add validation schemas + extract CORS  | 2-3 hours | QUALITY - Code quality improvement                |
 
 **Total estimated time to fix all issues: 6-8 hours**
 
@@ -124,16 +127,19 @@ This folder contains a comprehensive audit of all backend environment variable c
 ## Implementation Roadmap
 
 ### If you have 30 minutes
+
 1. Read ENV_AUDIT_SUMMARY.md
 2. Fix port conflicts in .env.development
 3. Add DEV_USER_ID variable
 
 ### If you have 1-2 hours
+
 1. Complete Phase 1 fixes
 2. Update generate-env.mjs variable names
 3. Create .env.example files for Zitare and Presi
 
 ### If you have 4+ hours
+
 1. Complete all Phase 1 & 2 fixes
 2. Add validation schemas to all backends
 3. Extract CORS origins to environment variables
@@ -144,6 +150,7 @@ This folder contains a comprehensive audit of all backend environment variable c
 ## Files Analyzed in This Audit
 
 **Configuration Files:**
+
 - .env.development (202 lines)
 - scripts/generate-env.mjs (433 lines)
 - services/mana-core-auth/.env.example
@@ -152,6 +159,7 @@ This folder contains a comprehensive audit of all backend environment variable c
 - apps/manadeck/apps/backend/.env.example
 
 **Backend Configuration:**
+
 - 6 app.module.ts files (NestJS configuration)
 - 5 main.ts files (server bootstrap & CORS)
 - 1 validation.schema.ts file (Manadeck)
@@ -166,24 +174,28 @@ This folder contains a comprehensive audit of all backend environment variable c
 ## Recommendations by Priority
 
 ### Priority 1: BLOCKING (Do Today)
+
 - [ ] Fix PICTURE_BACKEND_PORT: 3003 → 3005
 - [ ] Fix NUTRIPHI_BACKEND_PORT: 3002 → 3006
 - [ ] Add DEV_USER_ID to .env.development
 - [ ] Update Chat backend to read DEV_USER_ID from ConfigService
 
 ### Priority 2: MAJOR (Do This Week)
+
 - [ ] Rename MANA_SERVICE_URL to MANA_CORE_AUTH_URL in Manadeck
 - [ ] Rename MANACORE_AUTH_URL to MANA_CORE_AUTH_URL in Nutriphi
 - [ ] Create .env.example for Zitare backend
 - [ ] Create .env.example for Presi backend
 
 ### Priority 3: MEDIUM (Plan This Week)
+
 - [ ] Add validation schemas to 4 backends (Chat, Picture, Zitare, Presi)
 - [ ] Extract CORS origins to CORS_ORIGINS environment variable
 - [ ] Update all backends to use env variable for CORS
 - [ ] Document final port assignments in project CLAUDE.md files
 
 ### Priority 4: LONG-TERM (Future Improvement)
+
 - [ ] Implement consistent dev bypass auth pattern across all backends
 - [ ] Add comprehensive integration tests for all backends
 - [ ] Document environment configuration in deployment guide
@@ -196,6 +208,7 @@ This folder contains a comprehensive audit of all backend environment variable c
 After implementing all recommendations, you should be able to:
 
 1. **Run all 8 active backends simultaneously without port conflicts**
+
    ```bash
    pnpm dev:auth &
    pnpm dev:chat:backend &
diff --git a/games/mana-games/apps/backend/nest-cli.json b/games/mana-games/apps/backend/nest-cli.json
index f9aa683b1..95538fb90 100644
--- a/games/mana-games/apps/backend/nest-cli.json
+++ b/games/mana-games/apps/backend/nest-cli.json
@@ -1,8 +1,8 @@
 {
-  "$schema": "https://json.schemastore.org/nest-cli",
-  "collection": "@nestjs/schematics",
-  "sourceRoot": "src",
-  "compilerOptions": {
-    "deleteOutDir": true
-  }
+	"$schema": "https://json.schemastore.org/nest-cli",
+	"collection": "@nestjs/schematics",
+	"sourceRoot": "src",
+	"compilerOptions": {
+		"deleteOutDir": true
+	}
 }
diff --git a/games/mana-games/apps/backend/package.json b/games/mana-games/apps/backend/package.json
index 0470299c3..fe6dc2102 100644
--- a/games/mana-games/apps/backend/package.json
+++ b/games/mana-games/apps/backend/package.json
@@ -1,33 +1,33 @@
 {
-  "name": "@mana-games/backend",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "nest start --watch",
-    "build": "nest build",
-    "start": "nest start",
-    "start:prod": "node dist/main"
-  },
-  "dependencies": {
-    "@anthropic-ai/sdk": "^0.65.0",
-    "@azure/openai": "^2.0.0",
-    "@google/genai": "^1.14.0",
-    "@nestjs/common": "^10.4.15",
-    "@nestjs/config": "^3.3.0",
-    "@nestjs/core": "^10.4.15",
-    "@nestjs/platform-express": "^10.4.15",
-    "class-transformer": "^0.5.1",
-    "class-validator": "^0.14.1",
-    "reflect-metadata": "^0.2.2",
-    "rxjs": "^7.8.1"
-  },
-  "devDependencies": {
-    "@nestjs/cli": "^10.4.9",
-    "@nestjs/schematics": "^10.2.3",
-    "@types/express": "^5.0.0",
-    "@types/node": "^22.10.2",
-    "ts-node": "^10.9.2",
-    "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.7.2"
-  }
+	"name": "@mana-games/backend",
+	"version": "1.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "nest start --watch",
+		"build": "nest build",
+		"start": "nest start",
+		"start:prod": "node dist/main"
+	},
+	"dependencies": {
+		"@anthropic-ai/sdk": "^0.65.0",
+		"@azure/openai": "^2.0.0",
+		"@google/genai": "^1.14.0",
+		"@nestjs/common": "^10.4.15",
+		"@nestjs/config": "^3.3.0",
+		"@nestjs/core": "^10.4.15",
+		"@nestjs/platform-express": "^10.4.15",
+		"class-transformer": "^0.5.1",
+		"class-validator": "^0.14.1",
+		"reflect-metadata": "^0.2.2",
+		"rxjs": "^7.8.1"
+	},
+	"devDependencies": {
+		"@nestjs/cli": "^10.4.9",
+		"@nestjs/schematics": "^10.2.3",
+		"@types/express": "^5.0.0",
+		"@types/node": "^22.10.2",
+		"ts-node": "^10.9.2",
+		"tsconfig-paths": "^4.2.0",
+		"typescript": "^5.7.2"
+	}
 }
diff --git a/games/mana-games/apps/backend/src/app.module.ts b/games/mana-games/apps/backend/src/app.module.ts
index caeb8ba86..5fc6f7e31 100644
--- a/games/mana-games/apps/backend/src/app.module.ts
+++ b/games/mana-games/apps/backend/src/app.module.ts
@@ -5,13 +5,13 @@ import { GameSubmissionModule } from './game-submission/game-submission.module';
 import { HealthModule } from './health/health.module';
 
 @Module({
-  imports: [
-    ConfigModule.forRoot({
-      isGlobal: true,
-    }),
-    HealthModule,
-    GameGeneratorModule,
-    GameSubmissionModule,
-  ],
+	imports: [
+		ConfigModule.forRoot({
+			isGlobal: true,
+		}),
+		HealthModule,
+		GameGeneratorModule,
+		GameSubmissionModule,
+	],
 })
 export class AppModule {}
diff --git a/games/mana-games/apps/backend/src/game-generator/dto/generate-game.dto.ts b/games/mana-games/apps/backend/src/game-generator/dto/generate-game.dto.ts
index 2462e7e97..dbcbba92e 100644
--- a/games/mana-games/apps/backend/src/game-generator/dto/generate-game.dto.ts
+++ b/games/mana-games/apps/backend/src/game-generator/dto/generate-game.dto.ts
@@ -1,36 +1,36 @@
 import { IsString, IsOptional, IsIn, MinLength, IsNumber } from 'class-validator';
 
 export class GenerateGameDto {
-  @IsString()
-  @MinLength(10, { message: 'Bitte gib eine Spielbeschreibung mit mindestens 10 Zeichen ein' })
-  description: string;
+	@IsString()
+	@MinLength(10, { message: 'Bitte gib eine Spielbeschreibung mit mindestens 10 Zeichen ein' })
+	description: string;
 
-  @IsOptional()
-  @IsIn(['create', 'iterate'])
-  mode?: 'create' | 'iterate' = 'create';
+	@IsOptional()
+	@IsIn(['create', 'iterate'])
+	mode?: 'create' | 'iterate' = 'create';
 
-  @IsOptional()
-  @IsString()
-  originalPrompt?: string;
+	@IsOptional()
+	@IsString()
+	originalPrompt?: string;
 
-  @IsOptional()
-  @IsString()
-  currentCode?: string;
+	@IsOptional()
+	@IsString()
+	currentCode?: string;
 
-  @IsOptional()
-  @IsNumber()
-  iterationCount?: number = 0;
+	@IsOptional()
+	@IsNumber()
+	iterationCount?: number = 0;
 
-  @IsOptional()
-  @IsString()
-  model?: string = 'gemini-2.0-flash';
+	@IsOptional()
+	@IsString()
+	model?: string = 'gemini-2.0-flash';
 }
 
 export class GenerateGameResponseDto {
-  success: boolean;
-  html: string;
-  metadata: {
-    description: string;
-    generatedAt: string;
-  };
+	success: boolean;
+	html: string;
+	metadata: {
+		description: string;
+		generatedAt: string;
+	};
 }
diff --git a/games/mana-games/apps/backend/src/game-generator/game-generator.controller.ts b/games/mana-games/apps/backend/src/game-generator/game-generator.controller.ts
index d5cc09245..da87397cf 100644
--- a/games/mana-games/apps/backend/src/game-generator/game-generator.controller.ts
+++ b/games/mana-games/apps/backend/src/game-generator/game-generator.controller.ts
@@ -4,10 +4,10 @@ import { GenerateGameDto, GenerateGameResponseDto } from './dto/generate-game.dt
 
 @Controller('games')
 export class GameGeneratorController {
-  constructor(private readonly gameGeneratorService: GameGeneratorService) {}
+	constructor(private readonly gameGeneratorService: GameGeneratorService) {}
 
-  @Post('generate')
-  async generateGame(@Body() dto: GenerateGameDto): Promise<GenerateGameResponseDto> {
-    return this.gameGeneratorService.generateGame(dto);
-  }
+	@Post('generate')
+	async generateGame(@Body() dto: GenerateGameDto): Promise<GenerateGameResponseDto> {
+		return this.gameGeneratorService.generateGame(dto);
+	}
 }
diff --git a/games/mana-games/apps/backend/src/game-generator/game-generator.module.ts b/games/mana-games/apps/backend/src/game-generator/game-generator.module.ts
index e3336f37c..05df97353 100644
--- a/games/mana-games/apps/backend/src/game-generator/game-generator.module.ts
+++ b/games/mana-games/apps/backend/src/game-generator/game-generator.module.ts
@@ -3,7 +3,7 @@ import { GameGeneratorController } from './game-generator.controller';
 import { GameGeneratorService } from './game-generator.service';
 
 @Module({
-  controllers: [GameGeneratorController],
-  providers: [GameGeneratorService],
+	controllers: [GameGeneratorController],
+	providers: [GameGeneratorService],
 })
 export class GameGeneratorModule {}
diff --git a/games/mana-games/apps/backend/src/game-generator/game-generator.service.ts b/games/mana-games/apps/backend/src/game-generator/game-generator.service.ts
index b194dfb20..96042159e 100644
--- a/games/mana-games/apps/backend/src/game-generator/game-generator.service.ts
+++ b/games/mana-games/apps/backend/src/game-generator/game-generator.service.ts
@@ -1,4 +1,9 @@
-import { Injectable, BadRequestException, InternalServerErrorException, Logger } from '@nestjs/common';
+import {
+	Injectable,
+	BadRequestException,
+	InternalServerErrorException,
+	Logger,
+} from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { GenerateGameDto, GenerateGameResponseDto } from './dto/generate-game.dto';
 import { GoogleGenAI } from '@google/genai';
@@ -8,231 +13,257 @@ import { AzureOpenAI } from '@azure/openai';
 type AIProvider = 'google' | 'anthropic' | 'azure';
 
 interface ModelConfig {
-  provider: AIProvider;
-  modelId: string;
-  displayName: string;
+	provider: AIProvider;
+	modelId: string;
+	displayName: string;
 }
 
 @Injectable()
 export class GameGeneratorService {
-  private readonly logger = new Logger(GameGeneratorService.name);
+	private readonly logger = new Logger(GameGeneratorService.name);
 
-  // Model configurations
-  private readonly modelConfigs: Record<string, ModelConfig> = {
-    // Google Gemini Models
-    'gemini-2.0-flash': { provider: 'google', modelId: 'gemini-2.0-flash', displayName: 'Gemini 2.0 Flash' },
-    'gemini-2.5-flash': { provider: 'google', modelId: 'gemini-2.5-flash-preview-05-20', displayName: 'Gemini 2.5 Flash' },
-    'gemini-2.5-pro': { provider: 'google', modelId: 'gemini-2.5-pro-preview-05-06', displayName: 'Gemini 2.5 Pro' },
-    // Anthropic Claude Models
-    'claude-3.5-haiku': { provider: 'anthropic', modelId: 'claude-3-5-haiku-20241022', displayName: 'Claude 3.5 Haiku' },
-    'claude-3.5-sonnet': { provider: 'anthropic', modelId: 'claude-sonnet-4-20250514', displayName: 'Claude Sonnet 4' },
-    // Azure OpenAI Models
-    'gpt-4o': { provider: 'azure', modelId: 'gpt-4o', displayName: 'GPT-4o' },
-    'gpt-4o-mini': { provider: 'azure', modelId: 'gpt-4o-mini', displayName: 'GPT-4o Mini' },
-  };
+	// Model configurations
+	private readonly modelConfigs: Record<string, ModelConfig> = {
+		// Google Gemini Models
+		'gemini-2.0-flash': {
+			provider: 'google',
+			modelId: 'gemini-2.0-flash',
+			displayName: 'Gemini 2.0 Flash',
+		},
+		'gemini-2.5-flash': {
+			provider: 'google',
+			modelId: 'gemini-2.5-flash-preview-05-20',
+			displayName: 'Gemini 2.5 Flash',
+		},
+		'gemini-2.5-pro': {
+			provider: 'google',
+			modelId: 'gemini-2.5-pro-preview-05-06',
+			displayName: 'Gemini 2.5 Pro',
+		},
+		// Anthropic Claude Models
+		'claude-3.5-haiku': {
+			provider: 'anthropic',
+			modelId: 'claude-3-5-haiku-20241022',
+			displayName: 'Claude 3.5 Haiku',
+		},
+		'claude-3.5-sonnet': {
+			provider: 'anthropic',
+			modelId: 'claude-sonnet-4-20250514',
+			displayName: 'Claude Sonnet 4',
+		},
+		// Azure OpenAI Models
+		'gpt-4o': { provider: 'azure', modelId: 'gpt-4o', displayName: 'GPT-4o' },
+		'gpt-4o-mini': { provider: 'azure', modelId: 'gpt-4o-mini', displayName: 'GPT-4o Mini' },
+	};
 
-  // AI Clients
-  private googleClient: GoogleGenAI | null = null;
-  private anthropicClient: Anthropic | null = null;
-  private azureClient: AzureOpenAI | null = null;
+	// AI Clients
+	private googleClient: GoogleGenAI | null = null;
+	private anthropicClient: Anthropic | null = null;
+	private azureClient: AzureOpenAI | null = null;
 
-  constructor(private readonly configService: ConfigService) {
-    this.initializeClients();
-  }
+	constructor(private readonly configService: ConfigService) {
+		this.initializeClients();
+	}
 
-  private initializeClients(): void {
-    // Initialize Google Gemini
-    const googleApiKey = this.configService.get<string>('GOOGLE_GENAI_API_KEY');
-    if (googleApiKey && googleApiKey !== 'your_google_genai_key_here') {
-      this.googleClient = new GoogleGenAI({ apiKey: googleApiKey });
-      this.logger.log('Google Gemini client initialized');
-    }
+	private initializeClients(): void {
+		// Initialize Google Gemini
+		const googleApiKey = this.configService.get<string>('GOOGLE_GENAI_API_KEY');
+		if (googleApiKey && googleApiKey !== 'your_google_genai_key_here') {
+			this.googleClient = new GoogleGenAI({ apiKey: googleApiKey });
+			this.logger.log('Google Gemini client initialized');
+		}
 
-    // Initialize Anthropic Claude
-    const anthropicApiKey = this.configService.get<string>('ANTHROPIC_API_KEY');
-    if (anthropicApiKey && anthropicApiKey !== 'your_anthropic_key_here') {
-      this.anthropicClient = new Anthropic({ apiKey: anthropicApiKey });
-      this.logger.log('Anthropic Claude client initialized');
-    }
+		// Initialize Anthropic Claude
+		const anthropicApiKey = this.configService.get<string>('ANTHROPIC_API_KEY');
+		if (anthropicApiKey && anthropicApiKey !== 'your_anthropic_key_here') {
+			this.anthropicClient = new Anthropic({ apiKey: anthropicApiKey });
+			this.logger.log('Anthropic Claude client initialized');
+		}
 
-    // Initialize Azure OpenAI
-    const azureEndpoint = this.configService.get<string>('AZURE_OPENAI_ENDPOINT');
-    const azureApiKey = this.configService.get<string>('AZURE_OPENAI_API_KEY');
-    if (azureEndpoint && azureApiKey && azureApiKey !== 'your_azure_openai_key_here') {
-      this.azureClient = new AzureOpenAI({
-        endpoint: azureEndpoint,
-        apiKey: azureApiKey,
-        apiVersion: '2024-08-01-preview',
-      });
-      this.logger.log('Azure OpenAI client initialized');
-    }
-  }
+		// Initialize Azure OpenAI
+		const azureEndpoint = this.configService.get<string>('AZURE_OPENAI_ENDPOINT');
+		const azureApiKey = this.configService.get<string>('AZURE_OPENAI_API_KEY');
+		if (azureEndpoint && azureApiKey && azureApiKey !== 'your_azure_openai_key_here') {
+			this.azureClient = new AzureOpenAI({
+				endpoint: azureEndpoint,
+				apiKey: azureApiKey,
+				apiVersion: '2024-08-01-preview',
+			});
+			this.logger.log('Azure OpenAI client initialized');
+		}
+	}
 
-  async generateGame(dto: GenerateGameDto): Promise<GenerateGameResponseDto> {
-    const model = dto.model || 'gemini-2.0-flash';
-    const config = this.modelConfigs[model];
+	async generateGame(dto: GenerateGameDto): Promise<GenerateGameResponseDto> {
+		const model = dto.model || 'gemini-2.0-flash';
+		const config = this.modelConfigs[model];
 
-    if (!config) {
-      this.logger.warn(`Unknown model: ${model}, falling back to gemini-2.0-flash`);
-      return this.generateGame({ ...dto, model: 'gemini-2.0-flash' });
-    }
+		if (!config) {
+			this.logger.warn(`Unknown model: ${model}, falling back to gemini-2.0-flash`);
+			return this.generateGame({ ...dto, model: 'gemini-2.0-flash' });
+		}
 
-    // Check if the provider is available
-    const providerAvailable = this.isProviderAvailable(config.provider);
-    if (!providerAvailable) {
-      this.logger.error(`Provider ${config.provider} is not configured`);
-      throw new InternalServerErrorException(`AI provider ${config.provider} is not configured. Please add the API key.`);
-    }
+		// Check if the provider is available
+		const providerAvailable = this.isProviderAvailable(config.provider);
+		if (!providerAvailable) {
+			this.logger.error(`Provider ${config.provider} is not configured`);
+			throw new InternalServerErrorException(
+				`AI provider ${config.provider} is not configured. Please add the API key.`
+			);
+		}
 
-    // Build prompt
-    const prompt = this.createGamePrompt(
-      dto.description.trim(),
-      dto.mode || 'create',
-      dto.originalPrompt,
-      dto.currentCode,
-    );
+		// Build prompt
+		const prompt = this.createGamePrompt(
+			dto.description.trim(),
+			dto.mode || 'create',
+			dto.originalPrompt,
+			dto.currentCode
+		);
 
-    this.logger.log(`${dto.mode === 'iterate' ? 'Iterating' : 'Generating'} game with model: ${config.displayName} (${config.provider})`);
+		this.logger.log(
+			`${dto.mode === 'iterate' ? 'Iterating' : 'Generating'} game with model: ${config.displayName} (${config.provider})`
+		);
 
-    try {
-      let generatedContent: string;
+		try {
+			let generatedContent: string;
 
-      switch (config.provider) {
-        case 'google':
-          generatedContent = await this.generateWithGoogle(config.modelId, prompt);
-          break;
-        case 'anthropic':
-          generatedContent = await this.generateWithAnthropic(config.modelId, prompt);
-          break;
-        case 'azure':
-          generatedContent = await this.generateWithAzure(config.modelId, prompt);
-          break;
-        default:
-          throw new InternalServerErrorException(`Unknown provider: ${config.provider}`);
-      }
+			switch (config.provider) {
+				case 'google':
+					generatedContent = await this.generateWithGoogle(config.modelId, prompt);
+					break;
+				case 'anthropic':
+					generatedContent = await this.generateWithAnthropic(config.modelId, prompt);
+					break;
+				case 'azure':
+					generatedContent = await this.generateWithAzure(config.modelId, prompt);
+					break;
+				default:
+					throw new InternalServerErrorException(`Unknown provider: ${config.provider}`);
+			}
 
-      // Extract HTML from response
-      let html = generatedContent;
-      const htmlMatch = generatedContent.match(/```html\n([\s\S]*?)\n```/);
-      if (htmlMatch) {
-        html = htmlMatch[1];
-      }
+			// Extract HTML from response
+			let html = generatedContent;
+			const htmlMatch = generatedContent.match(/```html\n([\s\S]*?)\n```/);
+			if (htmlMatch) {
+				html = htmlMatch[1];
+			}
 
-      // Validate and sanitize
-      const safeHtml = this.validateAndSanitizeGame(html);
+			// Validate and sanitize
+			const safeHtml = this.validateAndSanitizeGame(html);
 
-      this.logger.log(`Game generated successfully with ${config.displayName}`);
+			this.logger.log(`Game generated successfully with ${config.displayName}`);
 
-      return {
-        success: true,
-        html: safeHtml,
-        metadata: {
-          description: dto.description.trim(),
-          generatedAt: new Date().toISOString(),
-        },
-      };
-    } catch (error: any) {
-      if (error instanceof BadRequestException || error instanceof InternalServerErrorException) {
-        throw error;
-      }
-      this.logger.error(`Generation error with ${config.displayName}:`, error);
-      throw new InternalServerErrorException(`Failed to generate game: ${error.message || 'Unknown error'}`);
-    }
-  }
+			return {
+				success: true,
+				html: safeHtml,
+				metadata: {
+					description: dto.description.trim(),
+					generatedAt: new Date().toISOString(),
+				},
+			};
+		} catch (error: any) {
+			if (error instanceof BadRequestException || error instanceof InternalServerErrorException) {
+				throw error;
+			}
+			this.logger.error(`Generation error with ${config.displayName}:`, error);
+			throw new InternalServerErrorException(
+				`Failed to generate game: ${error.message || 'Unknown error'}`
+			);
+		}
+	}
 
-  private isProviderAvailable(provider: AIProvider): boolean {
-    switch (provider) {
-      case 'google':
-        return this.googleClient !== null;
-      case 'anthropic':
-        return this.anthropicClient !== null;
-      case 'azure':
-        return this.azureClient !== null;
-      default:
-        return false;
-    }
-  }
+	private isProviderAvailable(provider: AIProvider): boolean {
+		switch (provider) {
+			case 'google':
+				return this.googleClient !== null;
+			case 'anthropic':
+				return this.anthropicClient !== null;
+			case 'azure':
+				return this.azureClient !== null;
+			default:
+				return false;
+		}
+	}
 
-  private async generateWithGoogle(modelId: string, prompt: string): Promise<string> {
-    if (!this.googleClient) {
-      throw new InternalServerErrorException('Google Gemini client not initialized');
-    }
+	private async generateWithGoogle(modelId: string, prompt: string): Promise<string> {
+		if (!this.googleClient) {
+			throw new InternalServerErrorException('Google Gemini client not initialized');
+		}
 
-    const response = await this.googleClient.models.generateContent({
-      model: modelId,
-      contents: prompt,
-      config: {
-        temperature: 0.7,
-        maxOutputTokens: 8192,
-      },
-    });
+		const response = await this.googleClient.models.generateContent({
+			model: modelId,
+			contents: prompt,
+			config: {
+				temperature: 0.7,
+				maxOutputTokens: 8192,
+			},
+		});
 
-    const content = response.text;
-    if (!content) {
-      throw new InternalServerErrorException('No content generated by Google Gemini');
-    }
+		const content = response.text;
+		if (!content) {
+			throw new InternalServerErrorException('No content generated by Google Gemini');
+		}
 
-    return content;
-  }
+		return content;
+	}
 
-  private async generateWithAnthropic(modelId: string, prompt: string): Promise<string> {
-    if (!this.anthropicClient) {
-      throw new InternalServerErrorException('Anthropic Claude client not initialized');
-    }
+	private async generateWithAnthropic(modelId: string, prompt: string): Promise<string> {
+		if (!this.anthropicClient) {
+			throw new InternalServerErrorException('Anthropic Claude client not initialized');
+		}
 
-    const response = await this.anthropicClient.messages.create({
-      model: modelId,
-      max_tokens: 8192,
-      messages: [{ role: 'user', content: prompt }],
-    });
+		const response = await this.anthropicClient.messages.create({
+			model: modelId,
+			max_tokens: 8192,
+			messages: [{ role: 'user', content: prompt }],
+		});
 
-    const content = response.content[0];
-    if (!content || content.type !== 'text') {
-      throw new InternalServerErrorException('No content generated by Anthropic Claude');
-    }
+		const content = response.content[0];
+		if (!content || content.type !== 'text') {
+			throw new InternalServerErrorException('No content generated by Anthropic Claude');
+		}
 
-    return content.text;
-  }
+		return content.text;
+	}
 
-  private async generateWithAzure(modelId: string, prompt: string): Promise<string> {
-    if (!this.azureClient) {
-      throw new InternalServerErrorException('Azure OpenAI client not initialized');
-    }
+	private async generateWithAzure(modelId: string, prompt: string): Promise<string> {
+		if (!this.azureClient) {
+			throw new InternalServerErrorException('Azure OpenAI client not initialized');
+		}
 
-    const deployment = this.configService.get<string>('AZURE_OPENAI_DEPLOYMENT') || modelId;
+		const deployment = this.configService.get<string>('AZURE_OPENAI_DEPLOYMENT') || modelId;
 
-    const response = await this.azureClient.chat.completions.create({
-      model: deployment,
-      messages: [{ role: 'user', content: prompt }],
-      temperature: 0.7,
-      max_tokens: 8192,
-    });
+		const response = await this.azureClient.chat.completions.create({
+			model: deployment,
+			messages: [{ role: 'user', content: prompt }],
+			temperature: 0.7,
+			max_tokens: 8192,
+		});
 
-    const content = response.choices?.[0]?.message?.content;
-    if (!content) {
-      throw new InternalServerErrorException('No content generated by Azure OpenAI');
-    }
+		const content = response.choices?.[0]?.message?.content;
+		if (!content) {
+			throw new InternalServerErrorException('No content generated by Azure OpenAI');
+		}
 
-    return content;
-  }
+		return content;
+	}
 
-  getAvailableModels(): { id: string; name: string; provider: string; available: boolean }[] {
-    return Object.entries(this.modelConfigs).map(([id, config]) => ({
-      id,
-      name: config.displayName,
-      provider: config.provider,
-      available: this.isProviderAvailable(config.provider),
-    }));
-  }
+	getAvailableModels(): { id: string; name: string; provider: string; available: boolean }[] {
+		return Object.entries(this.modelConfigs).map(([id, config]) => ({
+			id,
+			name: config.displayName,
+			provider: config.provider,
+			available: this.isProviderAvailable(config.provider),
+		}));
+	}
 
-  private createGamePrompt(
-    description: string,
-    mode: 'create' | 'iterate',
-    originalPrompt?: string,
-    currentCode?: string,
-  ): string {
-    if (mode === 'iterate' && originalPrompt && currentCode) {
-      return `Du bist ein begabter Coder und Gamedesigner.
+	private createGamePrompt(
+		description: string,
+		mode: 'create' | 'iterate',
+		originalPrompt?: string,
+		currentCode?: string
+	): string {
+		if (mode === 'iterate' && originalPrompt && currentCode) {
+			return `Du bist ein begabter Coder und Gamedesigner.
 
 Der Nutzer hat ursprünglich folgendes Spiel gewünscht: "${originalPrompt}"
 
@@ -271,9 +302,9 @@ STRUKTUR:
 </html>
 
 Schreibe nur den Code, keine weiteren Kommentare. Nutze keine externen Bibliotheken, Bilder oder Sounds.`;
-    }
+		}
 
-    return `Du bist ein begabter Coder und Gamedesigner. Erstelle ein HTML5-Spiel basierend auf dieser Beschreibung: ${description}
+		return `Du bist ein begabter Coder und Gamedesigner. Erstelle ein HTML5-Spiel basierend auf dieser Beschreibung: ${description}
 
 WICHTIGE REGELN:
 - Maximal 400 Zeilen Code insgesamt
@@ -307,25 +338,25 @@ STRUKTUR:
 </html>
 
 Schreibe nur den Code, keine weiteren Kommentare. Nutze keine externen Bibliotheken, Bilder oder Sounds.`;
-  }
+	}
 
-  private validateAndSanitizeGame(html: string): string {
-    if (!html || typeof html !== 'string') {
-      throw new BadRequestException('Invalid HTML content');
-    }
+	private validateAndSanitizeGame(html: string): string {
+		if (!html || typeof html !== 'string') {
+			throw new BadRequestException('Invalid HTML content');
+		}
 
-    if (!html.includes('<!DOCTYPE html>')) {
-      throw new BadRequestException('Invalid game HTML structure');
-    }
+		if (!html.includes('<!DOCTYPE html>')) {
+			throw new BadRequestException('Invalid game HTML structure');
+		}
 
-    // Security sanitization
-    const sanitized = html
-      .replace(/<script[^>]*src=[^>]*>/gi, '')
-      .replace(/<link[^>]*href=[^>]*>/gi, '')
-      .replace(/fetch\s*\(/gi, '// fetch disabled: fetch(')
-      .replace(/XMLHttpRequest/gi, '// XMLHttpRequest disabled')
-      .replace(/eval\s*\(/gi, '// eval disabled: eval(');
+		// Security sanitization
+		const sanitized = html
+			.replace(/<script[^>]*src=[^>]*>/gi, '')
+			.replace(/<link[^>]*href=[^>]*>/gi, '')
+			.replace(/fetch\s*\(/gi, '// fetch disabled: fetch(')
+			.replace(/XMLHttpRequest/gi, '// XMLHttpRequest disabled')
+			.replace(/eval\s*\(/gi, '// eval disabled: eval(');
 
-    return sanitized;
-  }
+		return sanitized;
+	}
 }
diff --git a/games/mana-games/apps/backend/src/game-submission/dto/submit-game.dto.ts b/games/mana-games/apps/backend/src/game-submission/dto/submit-game.dto.ts
index cfb922e97..48c4f1112 100644
--- a/games/mana-games/apps/backend/src/game-submission/dto/submit-game.dto.ts
+++ b/games/mana-games/apps/backend/src/game-submission/dto/submit-game.dto.ts
@@ -2,71 +2,71 @@ import { IsString, IsArray, IsOptional, IsObject, ValidateNested, IsIn } from 'c
 import { Type } from 'class-transformer';
 
 class AuthorDto {
-  @IsString()
-  name: string;
+	@IsString()
+	name: string;
 
-  @IsOptional()
-  @IsString()
-  email?: string;
+	@IsOptional()
+	@IsString()
+	email?: string;
 
-  @IsOptional()
-  @IsString()
-  github?: string;
+	@IsOptional()
+	@IsString()
+	github?: string;
 }
 
 class FileDto {
-  @IsString()
-  name: string;
+	@IsString()
+	name: string;
 
-  @IsString()
-  content: string;
+	@IsString()
+	content: string;
 }
 
 class FilesDto {
-  @ValidateNested()
-  @Type(() => FileDto)
-  html: FileDto;
+	@ValidateNested()
+	@Type(() => FileDto)
+	html: FileDto;
 
-  @ValidateNested()
-  @Type(() => FileDto)
-  screenshot: FileDto;
+	@ValidateNested()
+	@Type(() => FileDto)
+	screenshot: FileDto;
 }
 
 export class SubmitGameDto {
-  @IsString()
-  title: string;
+	@IsString()
+	title: string;
 
-  @IsString()
-  description: string;
+	@IsString()
+	description: string;
 
-  @IsString()
-  controls: string;
+	@IsString()
+	controls: string;
 
-  @IsIn(['Einfach', 'Mittel', 'Schwer'])
-  difficulty: string;
+	@IsIn(['Einfach', 'Mittel', 'Schwer'])
+	difficulty: string;
 
-  @IsIn(['Minimal', 'Einfach', 'Mittel', 'Komplex'])
-  complexity: string;
+	@IsIn(['Minimal', 'Einfach', 'Mittel', 'Komplex'])
+	complexity: string;
 
-  @IsArray()
-  @IsString({ each: true })
-  tags: string[];
+	@IsArray()
+	@IsString({ each: true })
+	tags: string[];
 
-  @ValidateNested()
-  @Type(() => AuthorDto)
-  author: AuthorDto;
+	@ValidateNested()
+	@Type(() => AuthorDto)
+	author: AuthorDto;
 
-  @ValidateNested()
-  @Type(() => FilesDto)
-  files: FilesDto;
+	@ValidateNested()
+	@Type(() => FilesDto)
+	files: FilesDto;
 
-  @IsString()
-  submittedAt: string;
+	@IsString()
+	submittedAt: string;
 }
 
 export class SubmitGameResponseDto {
-  success: boolean;
-  message: string;
-  prUrl: string;
-  prNumber: number;
+	success: boolean;
+	message: string;
+	prUrl: string;
+	prNumber: number;
 }
diff --git a/games/mana-games/apps/backend/src/game-submission/game-submission.controller.ts b/games/mana-games/apps/backend/src/game-submission/game-submission.controller.ts
index 574d91bb7..f897b4a6c 100644
--- a/games/mana-games/apps/backend/src/game-submission/game-submission.controller.ts
+++ b/games/mana-games/apps/backend/src/game-submission/game-submission.controller.ts
@@ -4,10 +4,10 @@ import { SubmitGameDto, SubmitGameResponseDto } from './dto/submit-game.dto';
 
 @Controller('games')
 export class GameSubmissionController {
-  constructor(private readonly gameSubmissionService: GameSubmissionService) {}
+	constructor(private readonly gameSubmissionService: GameSubmissionService) {}
 
-  @Post('submit')
-  async submitGame(@Body() dto: SubmitGameDto): Promise<SubmitGameResponseDto> {
-    return this.gameSubmissionService.submitGame(dto);
-  }
+	@Post('submit')
+	async submitGame(@Body() dto: SubmitGameDto): Promise<SubmitGameResponseDto> {
+		return this.gameSubmissionService.submitGame(dto);
+	}
 }
diff --git a/games/mana-games/apps/backend/src/game-submission/game-submission.module.ts b/games/mana-games/apps/backend/src/game-submission/game-submission.module.ts
index ef8df428f..054f6556f 100644
--- a/games/mana-games/apps/backend/src/game-submission/game-submission.module.ts
+++ b/games/mana-games/apps/backend/src/game-submission/game-submission.module.ts
@@ -3,7 +3,7 @@ import { GameSubmissionController } from './game-submission.controller';
 import { GameSubmissionService } from './game-submission.service';
 
 @Module({
-  controllers: [GameSubmissionController],
-  providers: [GameSubmissionService],
+	controllers: [GameSubmissionController],
+	providers: [GameSubmissionService],
 })
 export class GameSubmissionModule {}
diff --git a/games/mana-games/apps/backend/src/game-submission/game-submission.service.ts b/games/mana-games/apps/backend/src/game-submission/game-submission.service.ts
index 4db0beb70..1d2352b24 100644
--- a/games/mana-games/apps/backend/src/game-submission/game-submission.service.ts
+++ b/games/mana-games/apps/backend/src/game-submission/game-submission.service.ts
@@ -1,164 +1,177 @@
-import { Injectable, BadRequestException, InternalServerErrorException, Logger } from '@nestjs/common';
+import {
+	Injectable,
+	BadRequestException,
+	InternalServerErrorException,
+	Logger,
+} from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { SubmitGameDto, SubmitGameResponseDto } from './dto/submit-game.dto';
 
 @Injectable()
 export class GameSubmissionService {
-  private readonly logger = new Logger(GameSubmissionService.name);
+	private readonly logger = new Logger(GameSubmissionService.name);
 
-  constructor(private readonly configService: ConfigService) {}
+	constructor(private readonly configService: ConfigService) {}
 
-  async submitGame(dto: SubmitGameDto): Promise<SubmitGameResponseDto> {
-    const githubToken = this.configService.get<string>('GITHUB_TOKEN');
-    const githubOwner = this.configService.get<string>('GITHUB_OWNER') || 'tillschneider';
-    const githubRepo = this.configService.get<string>('GITHUB_REPO') || 'mana-games';
+	async submitGame(dto: SubmitGameDto): Promise<SubmitGameResponseDto> {
+		const githubToken = this.configService.get<string>('GITHUB_TOKEN');
+		const githubOwner = this.configService.get<string>('GITHUB_OWNER') || 'tillschneider';
+		const githubRepo = this.configService.get<string>('GITHUB_REPO') || 'mana-games';
 
-    if (!githubToken) {
-      this.logger.error('GitHub token not configured');
-      throw new InternalServerErrorException('Server configuration error - GitHub token missing');
-    }
+		if (!githubToken) {
+			this.logger.error('GitHub token not configured');
+			throw new InternalServerErrorException('Server configuration error - GitHub token missing');
+		}
 
-    // Generate safe file names
-    const gameSlug = dto.title
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-|-$/g, '');
-    const timestamp = Date.now();
-    const branchName = `community-game-${gameSlug}-${timestamp}`;
+		// Generate safe file names
+		const gameSlug = dto.title
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-|-$/g, '');
+		const timestamp = Date.now();
+		const branchName = `community-game-${gameSlug}-${timestamp}`;
 
-    const headers = {
-      Authorization: `Bearer ${githubToken}`,
-      Accept: 'application/vnd.github.v3+json',
-      'Content-Type': 'application/json',
-    };
+		const headers = {
+			Authorization: `Bearer ${githubToken}`,
+			Accept: 'application/vnd.github.v3+json',
+			'Content-Type': 'application/json',
+		};
 
-    try {
-      // 1. Get the default branch
-      this.logger.log(`Fetching repo: ${githubOwner}/${githubRepo}`);
-      const repoResponse = await fetch(`https://api.github.com/repos/${githubOwner}/${githubRepo}`, { headers });
+		try {
+			// 1. Get the default branch
+			this.logger.log(`Fetching repo: ${githubOwner}/${githubRepo}`);
+			const repoResponse = await fetch(
+				`https://api.github.com/repos/${githubOwner}/${githubRepo}`,
+				{ headers }
+			);
 
-      if (!repoResponse.ok) {
-        const errorBody = await repoResponse.text();
-        this.logger.error('GitHub API Error:', { status: repoResponse.status, body: errorBody });
-        throw new InternalServerErrorException(`Failed to fetch repository info: ${repoResponse.status}`);
-      }
+			if (!repoResponse.ok) {
+				const errorBody = await repoResponse.text();
+				this.logger.error('GitHub API Error:', { status: repoResponse.status, body: errorBody });
+				throw new InternalServerErrorException(
+					`Failed to fetch repository info: ${repoResponse.status}`
+				);
+			}
 
-      const repoData = await repoResponse.json();
-      const defaultBranch = repoData.default_branch;
+			const repoData = await repoResponse.json();
+			const defaultBranch = repoData.default_branch;
 
-      // 2. Get the latest commit SHA from the default branch
-      const refResponse = await fetch(
-        `https://api.github.com/repos/${githubOwner}/${githubRepo}/git/refs/heads/${defaultBranch}`,
-        { headers },
-      );
+			// 2. Get the latest commit SHA from the default branch
+			const refResponse = await fetch(
+				`https://api.github.com/repos/${githubOwner}/${githubRepo}/git/refs/heads/${defaultBranch}`,
+				{ headers }
+			);
 
-      if (!refResponse.ok) {
-        throw new InternalServerErrorException('Failed to fetch branch info');
-      }
+			if (!refResponse.ok) {
+				throw new InternalServerErrorException('Failed to fetch branch info');
+			}
 
-      const refData = await refResponse.json();
-      const baseSha = refData.object.sha;
+			const refData = await refResponse.json();
+			const baseSha = refData.object.sha;
 
-      // 3. Create a new branch
-      const createBranchResponse = await fetch(`https://api.github.com/repos/${githubOwner}/${githubRepo}/git/refs`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify({
-          ref: `refs/heads/${branchName}`,
-          sha: baseSha,
-        }),
-      });
+			// 3. Create a new branch
+			const createBranchResponse = await fetch(
+				`https://api.github.com/repos/${githubOwner}/${githubRepo}/git/refs`,
+				{
+					method: 'POST',
+					headers,
+					body: JSON.stringify({
+						ref: `refs/heads/${branchName}`,
+						sha: baseSha,
+					}),
+				}
+			);
 
-      if (!createBranchResponse.ok) {
-        throw new InternalServerErrorException('Failed to create branch');
-      }
+			if (!createBranchResponse.ok) {
+				throw new InternalServerErrorException('Failed to create branch');
+			}
 
-      // 4. Prepare game data
-      const nextId = String(Date.now());
-      const gameData = {
-        id: nextId,
-        title: dto.title,
-        description: dto.description,
-        slug: gameSlug,
-        htmlFile: `/games/${gameSlug}.html`,
-        thumbnail: `/screenshots/${gameSlug}.jpg`,
-        tags: dto.tags,
-        difficulty: dto.difficulty,
-        complexity: dto.complexity,
-        controls: dto.controls,
-        community: true,
-        author: dto.author.name,
-        submittedAt: dto.submittedAt,
-      };
+			// 4. Prepare game data
+			const nextId = String(Date.now());
+			const gameData = {
+				id: nextId,
+				title: dto.title,
+				description: dto.description,
+				slug: gameSlug,
+				htmlFile: `/games/${gameSlug}.html`,
+				thumbnail: `/screenshots/${gameSlug}.jpg`,
+				tags: dto.tags,
+				difficulty: dto.difficulty,
+				complexity: dto.complexity,
+				controls: dto.controls,
+				community: true,
+				author: dto.author.name,
+				submittedAt: dto.submittedAt,
+			};
 
-      // 5. Create files
-      const filesToCreate = [
-        {
-          path: `public/games/${gameSlug}.html`,
-          content: dto.files.html.content,
-          encoding: 'utf-8' as const,
-        },
-        {
-          path: `public/screenshots/${gameSlug}.jpg`,
-          content: dto.files.screenshot.content.split(',')[1], // Remove data:image/jpeg;base64,
-          encoding: 'base64' as const,
-        },
-      ];
+			// 5. Create files
+			const filesToCreate = [
+				{
+					path: `public/games/${gameSlug}.html`,
+					content: dto.files.html.content,
+					encoding: 'utf-8' as const,
+				},
+				{
+					path: `public/screenshots/${gameSlug}.jpg`,
+					content: dto.files.screenshot.content.split(',')[1], // Remove data:image/jpeg;base64,
+					encoding: 'base64' as const,
+				},
+			];
 
-      // Fetch existing community games
-      const communityGamesPath = 'src/data/community-games.json';
-      let communityGames: any[] = [];
+			// Fetch existing community games
+			const communityGamesPath = 'src/data/community-games.json';
+			let communityGames: any[] = [];
 
-      try {
-        const existingFileResponse = await fetch(
-          `https://api.github.com/repos/${githubOwner}/${githubRepo}/contents/${communityGamesPath}?ref=${defaultBranch}`,
-          { headers },
-        );
+			try {
+				const existingFileResponse = await fetch(
+					`https://api.github.com/repos/${githubOwner}/${githubRepo}/contents/${communityGamesPath}?ref=${defaultBranch}`,
+					{ headers }
+				);
 
-        if (existingFileResponse.ok) {
-          const existingFile = await existingFileResponse.json();
-          const content = Buffer.from(existingFile.content, 'base64').toString('utf-8');
-          communityGames = JSON.parse(content);
-        }
-      } catch {
-        // File doesn't exist yet
-      }
+				if (existingFileResponse.ok) {
+					const existingFile = await existingFileResponse.json();
+					const content = Buffer.from(existingFile.content, 'base64').toString('utf-8');
+					communityGames = JSON.parse(content);
+				}
+			} catch {
+				// File doesn't exist yet
+			}
 
-      communityGames.push(gameData);
+			communityGames.push(gameData);
 
-      filesToCreate.push({
-        path: communityGamesPath,
-        content: JSON.stringify(communityGames, null, 2),
-        encoding: 'utf-8',
-      });
+			filesToCreate.push({
+				path: communityGamesPath,
+				content: JSON.stringify(communityGames, null, 2),
+				encoding: 'utf-8',
+			});
 
-      // Create all files
-      for (const file of filesToCreate) {
-        const fileContent =
-          file.encoding === 'base64' ? file.content : Buffer.from(file.content).toString('base64');
+			// Create all files
+			for (const file of filesToCreate) {
+				const fileContent =
+					file.encoding === 'base64' ? file.content : Buffer.from(file.content).toString('base64');
 
-        const createFileResponse = await fetch(
-          `https://api.github.com/repos/${githubOwner}/${githubRepo}/contents/${file.path}`,
-          {
-            method: 'PUT',
-            headers,
-            body: JSON.stringify({
-              message: `Add community game: ${dto.title}`,
-              content: fileContent,
-              branch: branchName,
-            }),
-          },
-        );
+				const createFileResponse = await fetch(
+					`https://api.github.com/repos/${githubOwner}/${githubRepo}/contents/${file.path}`,
+					{
+						method: 'PUT',
+						headers,
+						body: JSON.stringify({
+							message: `Add community game: ${dto.title}`,
+							content: fileContent,
+							branch: branchName,
+						}),
+					}
+				);
 
-        if (!createFileResponse.ok) {
-          const error = await createFileResponse.text();
-          this.logger.error(`Failed to create file ${file.path}:`, error);
-          throw new InternalServerErrorException(`Failed to create file ${file.path}`);
-        }
-      }
+				if (!createFileResponse.ok) {
+					const error = await createFileResponse.text();
+					this.logger.error(`Failed to create file ${file.path}:`, error);
+					throw new InternalServerErrorException(`Failed to create file ${file.path}`);
+				}
+			}
 
-      // 6. Create pull request
-      const prBody = `## Neues Community-Spiel: ${dto.title}
+			// 6. Create pull request
+			const prBody = `## Neues Community-Spiel: ${dto.title}
 
 ### Spiel-Details
 - **Autor:** ${dto.author.name}${dto.author.github ? ` (@${dto.author.github})` : ''}
@@ -183,37 +196,42 @@ export class GameSubmissionService {
 *Eingereicht am: ${new Date(dto.submittedAt).toLocaleString('de-DE')}*
 ${dto.author.email ? `*Kontakt: ${dto.author.email}*` : ''}`;
 
-      const prResponse = await fetch(`https://api.github.com/repos/${githubOwner}/${githubRepo}/pulls`, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify({
-          title: `Community: ${dto.title}`,
-          body: prBody,
-          head: branchName,
-          base: defaultBranch,
-        }),
-      });
+			const prResponse = await fetch(
+				`https://api.github.com/repos/${githubOwner}/${githubRepo}/pulls`,
+				{
+					method: 'POST',
+					headers,
+					body: JSON.stringify({
+						title: `Community: ${dto.title}`,
+						body: prBody,
+						head: branchName,
+						base: defaultBranch,
+					}),
+				}
+			);
 
-      if (!prResponse.ok) {
-        const error = await prResponse.text();
-        this.logger.error('Failed to create PR:', error);
-        throw new InternalServerErrorException('Failed to create pull request');
-      }
+			if (!prResponse.ok) {
+				const error = await prResponse.text();
+				this.logger.error('Failed to create PR:', error);
+				throw new InternalServerErrorException('Failed to create pull request');
+			}
 
-      const prData = await prResponse.json();
+			const prData = await prResponse.json();
 
-      return {
-        success: true,
-        message: 'Game submitted successfully',
-        prUrl: prData.html_url,
-        prNumber: prData.number,
-      };
-    } catch (error: any) {
-      this.logger.error('Submission error:', error);
-      if (error instanceof BadRequestException || error instanceof InternalServerErrorException) {
-        throw error;
-      }
-      throw new InternalServerErrorException('Failed to submit game: ' + (error.message || 'Unknown error'));
-    }
-  }
+			return {
+				success: true,
+				message: 'Game submitted successfully',
+				prUrl: prData.html_url,
+				prNumber: prData.number,
+			};
+		} catch (error: any) {
+			this.logger.error('Submission error:', error);
+			if (error instanceof BadRequestException || error instanceof InternalServerErrorException) {
+				throw error;
+			}
+			throw new InternalServerErrorException(
+				'Failed to submit game: ' + (error.message || 'Unknown error')
+			);
+		}
+	}
 }
diff --git a/games/mana-games/apps/backend/src/health/health.controller.ts b/games/mana-games/apps/backend/src/health/health.controller.ts
index e32b9644a..7f3ee573c 100644
--- a/games/mana-games/apps/backend/src/health/health.controller.ts
+++ b/games/mana-games/apps/backend/src/health/health.controller.ts
@@ -2,12 +2,12 @@ import { Controller, Get } from '@nestjs/common';
 
 @Controller('health')
 export class HealthController {
-  @Get()
-  check() {
-    return {
-      status: 'ok',
-      timestamp: new Date().toISOString(),
-      service: 'mana-games-backend',
-    };
-  }
+	@Get()
+	check() {
+		return {
+			status: 'ok',
+			timestamp: new Date().toISOString(),
+			service: 'mana-games-backend',
+		};
+	}
 }
diff --git a/games/mana-games/apps/backend/src/health/health.module.ts b/games/mana-games/apps/backend/src/health/health.module.ts
index 7476abedd..a61d8b044 100644
--- a/games/mana-games/apps/backend/src/health/health.module.ts
+++ b/games/mana-games/apps/backend/src/health/health.module.ts
@@ -2,6 +2,6 @@ import { Module } from '@nestjs/common';
 import { HealthController } from './health.controller';
 
 @Module({
-  controllers: [HealthController],
+	controllers: [HealthController],
 })
 export class HealthModule {}
diff --git a/games/mana-games/apps/backend/src/main.ts b/games/mana-games/apps/backend/src/main.ts
index 3ff9aca66..8eab5c819 100644
--- a/games/mana-games/apps/backend/src/main.ts
+++ b/games/mana-games/apps/backend/src/main.ts
@@ -3,35 +3,35 @@ import { ValidationPipe } from '@nestjs/common';
 import { AppModule } from './app.module';
 
 async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
+	const app = await NestFactory.create(AppModule);
 
-  // CORS configuration
-  app.enableCors({
-    origin: [
-      'http://localhost:4321', // Astro dev
-      'http://localhost:3000', // Alternative dev
-      /\.netlify\.app$/, // Legacy Netlify
-    ],
-    methods: ['GET', 'POST', 'OPTIONS'],
-    credentials: false,
-  });
+	// CORS configuration
+	app.enableCors({
+		origin: [
+			'http://localhost:4321', // Astro dev
+			'http://localhost:3000', // Alternative dev
+			/\.netlify\.app$/, // Legacy Netlify
+		],
+		methods: ['GET', 'POST', 'OPTIONS'],
+		credentials: false,
+	});
 
-  app.setGlobalPrefix('api');
+	app.setGlobalPrefix('api');
 
-  app.useGlobalPipes(
-    new ValidationPipe({
-      whitelist: true,
-      transform: true,
-      forbidNonWhitelisted: true,
-    }),
-  );
+	app.useGlobalPipes(
+		new ValidationPipe({
+			whitelist: true,
+			transform: true,
+			forbidNonWhitelisted: true,
+		})
+	);
 
-  const port = process.env.PORT || 3010;
+	const port = process.env.PORT || 3010;
 
-  // Increase timeout for long-running AI requests (2 minutes)
-  const server = await app.listen(port);
-  server.setTimeout(120000);
+	// Increase timeout for long-running AI requests (2 minutes)
+	const server = await app.listen(port);
+	server.setTimeout(120000);
 
-  console.log(`Mana Games backend running on http://localhost:${port}`);
+	console.log(`Mana Games backend running on http://localhost:${port}`);
 }
 bootstrap();
diff --git a/games/mana-games/apps/backend/tsconfig.json b/games/mana-games/apps/backend/tsconfig.json
index a3fd2c514..edf10cd0d 100644
--- a/games/mana-games/apps/backend/tsconfig.json
+++ b/games/mana-games/apps/backend/tsconfig.json
@@ -1,22 +1,22 @@
 {
-  "compilerOptions": {
-    "module": "commonjs",
-    "declaration": true,
-    "removeComments": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "target": "ES2021",
-    "sourceMap": true,
-    "outDir": "./dist",
-    "baseUrl": "./",
-    "incremental": true,
-    "skipLibCheck": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
-    "strictBindCallApply": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "esModuleInterop": true
-  }
+	"compilerOptions": {
+		"module": "commonjs",
+		"declaration": true,
+		"removeComments": true,
+		"emitDecoratorMetadata": true,
+		"experimentalDecorators": true,
+		"allowSyntheticDefaultImports": true,
+		"target": "ES2021",
+		"sourceMap": true,
+		"outDir": "./dist",
+		"baseUrl": "./",
+		"incremental": true,
+		"skipLibCheck": true,
+		"strictNullChecks": true,
+		"noImplicitAny": true,
+		"strictBindCallApply": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"esModuleInterop": true
+	}
 }
diff --git a/games/mana-games/apps/web/package.json b/games/mana-games/apps/web/package.json
index 68f88418c..1460c8e55 100644
--- a/games/mana-games/apps/web/package.json
+++ b/games/mana-games/apps/web/package.json
@@ -1,18 +1,18 @@
 {
-  "name": "@mana-games/web",
-  "version": "1.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "astro": "^5.10.1"
-  },
-  "devDependencies": {
-    "sharp": "^0.34.2"
-  }
+	"name": "@mana-games/web",
+	"version": "1.0.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"astro": "^5.10.1"
+	},
+	"devDependencies": {
+		"sharp": "^0.34.2"
+	}
 }
diff --git a/games/mana-games/apps/web/public/manifest.json b/games/mana-games/apps/web/public/manifest.json
index 1714d7da9..80344cc70 100644
--- a/games/mana-games/apps/web/public/manifest.json
+++ b/games/mana-games/apps/web/public/manifest.json
@@ -1,89 +1,89 @@
 {
-  "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"
-    }
-  ]
-}
\ No newline at end of file
+	"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/sw.js b/games/mana-games/apps/web/public/sw.js
index e57c129fc..755f125f7 100644
--- a/games/mana-games/apps/web/public/sw.js
+++ b/games/mana-games/apps/web/public/sw.js
@@ -2,169 +2,160 @@ 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'
-];
+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$/
-  ]
+	// 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())
-  );
+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())
-  );
+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);
+self.addEventListener('fetch', (event) => {
+	const { request } = event;
+	const url = new URL(request.url);
 
-  // Ignoriere Chrome Extension Requests
-  if (url.protocol === 'chrome-extension:') {
-    return;
-  }
+	// Ignoriere Chrome Extension Requests
+	if (url.protocol === 'chrome-extension:') {
+		return;
+	}
 
-  // Bestimme die Cache-Strategie
-  const strategy = getStrategy(url.pathname);
+	// 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));
-  }
+	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;
-  }
+	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;
-  }
+	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;
-  }
+	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);
+	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';
+	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 });
-      });
-  }
-});
\ No newline at end of file
+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/components/Button.astro b/games/mana-games/apps/web/src/components/Button.astro
index 2d47cc6f6..4895fb1fe 100644
--- a/games/mana-games/apps/web/src/components/Button.astro
+++ b/games/mana-games/apps/web/src/components/Button.astro
@@ -1,191 +1,188 @@
 ---
 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';
+	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'
+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 classes = ['btn', `btn-${variant}`, `btn-${size}`, className].filter(Boolean).join(' ');
 
 const props = {
-  class: classes,
-  ...(id && { id }),
-  ...(title && { title }),
-  ...(isLink ? { href } : { type, disabled }),
-  ...(onclick && { onclick })
+	class: classes,
+	...(id && { id }),
+	...(title && { title }),
+	...(isLink ? { href } : { type, disabled }),
+	...(onclick && { onclick }),
 };
 ---
 
 <Component {...props}>
-  <slot />
+	<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 {
+		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;
-  }
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-  /* Sizes */
-  .btn-small {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-  }
+	/* Sizes */
+	.btn-small {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+	}
 
-  .btn-medium {
-    padding: 0.5rem 1rem;
-    font-size: 1rem;
-  }
+	.btn-medium {
+		padding: 0.5rem 1rem;
+		font-size: 1rem;
+	}
 
-  .btn-large {
-    padding: 0.75rem 1.5rem;
-    font-size: 1.125rem;
-  }
+	.btn-large {
+		padding: 0.75rem 1.5rem;
+		font-size: 1.125rem;
+	}
 
-  .btn-icon {
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    font-size: 1.2rem;
-  }
+	.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);
-  }
+	/* 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: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-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 {
+		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-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 {
+		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-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 {
+		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-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 {
+		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;
-  }
+	.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;
-  }
+	/* 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;
-  }
+	.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>
\ No newline at end of file
+	/* 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
index 071799aa7..e7ae28858 100644
--- a/games/mana-games/apps/web/src/components/Footer.astro
+++ b/games/mana-games/apps/web/src/components/Footer.astro
@@ -3,187 +3,191 @@
 ---
 
 <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>
+	<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>
+			<!-- 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>Ü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>
+				<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>
+		<!-- 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;
-  }
+	.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-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;
-  }
+	.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;
-  }
+	/* 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 {
+		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;
-  }
+	.footer-logo:hover {
+		opacity: 0.8;
+	}
 
-  .logo-text {
-    color: var(--color-text);
-  }
+	.logo-text {
+		color: var(--color-text);
+	}
 
-  .logo-accent {
-    color: var(--color-accent);
-    margin-left: 0.25rem;
-  }
+	.logo-accent {
+		color: var(--color-accent);
+		margin-left: 0.25rem;
+	}
 
-  .footer-tagline {
-    color: var(--color-text-secondary);
-    font-size: 0.9rem;
-    margin: 0;
-  }
+	.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;
-  }
+	/* 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 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 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 {
+		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);
-  }
+	.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;
-  }
+	/* 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;
-  }
+	.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;
-    }
+	/* Responsive */
+	@media (max-width: 768px) {
+		.site-footer {
+			margin-top: 3rem;
+			padding: 2rem 0 1rem;
+		}
 
-    .footer-content {
-      grid-template-columns: 1fr;
-      gap: 2rem;
-    }
+		.footer-content {
+			grid-template-columns: 1fr;
+			gap: 2rem;
+		}
 
-    .footer-nav {
-      grid-template-columns: 1fr;
-      gap: 1.5rem;
-    }
+		.footer-nav {
+			grid-template-columns: 1fr;
+			gap: 1.5rem;
+		}
 
-    .footer-bottom {
-      text-align: center;
-    }
-  }
+		.footer-bottom {
+			text-align: center;
+		}
+	}
 
-  /* Full width pages adjustment */
-  body.full-width .site-footer {
-    margin-top: 0;
-  }
-</style>
\ No newline at end of file
+	/* 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
index 5e9de1db0..04f4a3e9f 100644
--- a/games/mana-games/apps/web/src/components/GameCard.astro
+++ b/games/mana-games/apps/web/src/components/GameCard.astro
@@ -3,303 +3,307 @@ 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;
-  };
+	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>
+	<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;
-  }
+	/* 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);
-  }
+	.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;
-  }
+	/* 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;
-  }
+	/* 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;
-  }
+	.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);
-  }
+	.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;
-  }
+	/* 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-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);
-  }
+	.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;
-  }
+	/* 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;
-  }
+	.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;
-  }
+	/* Hover Buttons */
+	.hover-buttons {
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.2s ease;
+	}
 
-  .game-card:hover .hover-buttons {
-    opacity: 1;
-    pointer-events: all;
-  }
+	.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(.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);
-  }
+	.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;
-    }
+	/* Responsive */
+	@media (max-width: 768px) {
+		.card-image {
+			height: 150px;
+		}
 
-    .card-content {
-      padding: 1.25rem;
-    }
+		.card-content {
+			padding: 1.25rem;
+		}
 
-    .card-title {
-      font-size: 1.25rem;
-    }
+		.card-title {
+			font-size: 1.25rem;
+		}
 
-    .card-description {
-      font-size: 0.9rem;
-    }
-  }
+		.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 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 {
+		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-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;
-  }
+	.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;
-  }
+	/* 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 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-minimal {
+		background: #4ade80;
+		color: #000;
+	}
 
-  .complexity-einfach {
-    background: #60a5fa;
-    color: #000;
-  }
+	.complexity-einfach {
+		background: #60a5fa;
+		color: #000;
+	}
 
-  .complexity-mittel {
-    background: #fbbf24;
-    color: #000;
-  }
+	.complexity-mittel {
+		background: #fbbf24;
+		color: #000;
+	}
 
-  .complexity-komplex {
-    background: #f87171;
-    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>
\ No newline at end of file
+	// 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
index e1f3b8d9b..f84e7f6e8 100644
--- a/games/mana-games/apps/web/src/components/GameStats.astro
+++ b/games/mana-games/apps/web/src/components/GameStats.astro
@@ -2,143 +2,145 @@
 import { statsService } from '../services/statsService';
 
 export interface Props {
-  gameId: string;
-  showDetails?: boolean;
+	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>
-)}
+{
+	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;
-  }
+	.game-stats {
+		margin-top: 0.5rem;
+		font-size: 0.85rem;
+	}
 
-  .stats-row {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-  }
+	.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-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-icon {
+		font-size: 0.9rem;
+	}
 
-  .stat-value {
-    font-weight: 600;
-    color: var(--color-text);
-  }
+	.stat-value {
+		font-weight: 600;
+		color: var(--color-text);
+	}
 
-  .highscore .stat-value {
-    color: #fbbf24;
-  }
+	.highscore .stat-value {
+		color: #fbbf24;
+	}
 
-  .games-played .stat-value {
-    color: #60a5fa;
-  }
+	.games-played .stat-value {
+		color: #60a5fa;
+	}
 
-  .play-time .stat-value {
-    color: #4ade80;
-  }
+	.play-time .stat-value {
+		color: #4ade80;
+	}
 
-  .last-played {
-    margin-top: 0.5rem;
-    color: var(--color-text-secondary);
-    font-size: 0.75rem;
-  }
+	.last-played {
+		margin-top: 0.5rem;
+		color: var(--color-text-secondary);
+		font-size: 0.75rem;
+	}
 
-  .achievements {
-    margin-top: 1rem;
-  }
+	.achievements {
+		margin-top: 1rem;
+	}
 
-  .achievements h4 {
-    margin: 0 0 0.5rem 0;
-    font-size: 0.9rem;
-    color: var(--color-text);
-  }
+	.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-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 {
+		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-icon {
+		font-size: 0.8rem;
+	}
 
-  .achievement-name {
-    color: #fbbf24;
-    font-weight: 500;
-  }
-</style>
\ No newline at end of file
+	.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
index d61f7af12..c0ffa105e 100644
--- a/games/mana-games/apps/web/src/components/HorizontalScroller.astro
+++ b/games/mana-games/apps/web/src/components/HorizontalScroller.astro
@@ -2,313 +2,351 @@
 import GameCard from './GameCard.astro';
 
 export interface Props {
-  title: string;
-  games: any[];
-  id?: string;
+	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"/>
-        </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"/>
-        </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>
+	<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-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 {
+		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-header h2 {
+		font-size: 1.75rem;
+		font-weight: 700;
+		color: var(--color-text);
+		margin: 0;
+	}
 
-  .scroller-controls {
-    display: flex;
-    gap: 0.5rem;
-  }
+	.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 {
+		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: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;
-  }
+	.scroll-btn:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
 
-  .scroller-container {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-  }
+	.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,
+	.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-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-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-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 {
+		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-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-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 {
+		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; }
+	.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);
-    }
-  }
+	@keyframes scrollerItemFadeIn {
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  @media (hover: hover) {
-    .scroller-item {
-      transition: transform 0.2s ease;
-    }
+	@media (hover: hover) {
+		.scroller-item {
+			transition: transform 0.2s ease;
+		}
 
-    .scroller-item:hover {
-      transform: scale(1.02);
-    }
-  }
+		.scroller-item:hover {
+			transform: scale(1.02);
+		}
+	}
 
-  @media (max-width: 768px) {
-    .scroller-header {
-      padding: 0 1rem;
-    }
+	@media (max-width: 768px) {
+		.scroller-header {
+			padding: 0 1rem;
+		}
 
-    .scroller-content {
-      padding: 0 1rem;
-      gap: 1rem;
-    }
+		.scroller-content {
+			padding: 0 1rem;
+			gap: 1rem;
+		}
 
-    .scroller-item {
-      flex: 0 0 280px;
-      max-width: 280px;
-    }
+		.scroller-item {
+			flex: 0 0 280px;
+			max-width: 280px;
+		}
 
-    .scroll-btn {
-      width: 36px;
-      height: 36px;
-    }
+		.scroll-btn {
+			width: 36px;
+			height: 36px;
+		}
 
-    .scroller-gradient-left,
-    .scroller-gradient-right {
-      width: 50px;
-    }
-  }
+		.scroller-gradient-left,
+		.scroller-gradient-right {
+			width: 50px;
+		}
+	}
 
-  @media (max-width: 480px) {
-    .scroller-item {
-      flex: 0 0 240px;
-      max-width: 240px;
-    }
+	@media (max-width: 480px) {
+		.scroller-item {
+			flex: 0 0 240px;
+			max-width: 240px;
+		}
 
-    .scroller-controls {
-      display: none;
-    }
-  }
+		.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;
+	document.addEventListener('DOMContentLoaded', () => {
+		const scrollers = document.querySelectorAll('.scroller-track');
 
-      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');
-        }
-      };
+		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;
 
-      const scrollAmount = () => {
-        const item = scroller.querySelector('.scroller-item') as HTMLElement;
-        if (!item) return 320;
-        return item.offsetWidth + 24;
-      };
+			if (!container || !leftBtn || !rightBtn) return;
 
-      leftBtn.addEventListener('click', () => {
-        scroller.scrollBy({ left: -scrollAmount(), behavior: 'smooth' });
-      });
+			const updateButtons = () => {
+				const scrollLeft = scroller.scrollLeft;
+				const scrollWidth = scroller.scrollWidth;
+				const clientWidth = scroller.clientWidth;
 
-      rightBtn.addEventListener('click', () => {
-        scroller.scrollBy({ left: scrollAmount(), behavior: 'smooth' });
-      });
+				leftBtn.disabled = scrollLeft <= 0;
+				rightBtn.disabled = scrollLeft >= scrollWidth - clientWidth - 1;
 
-      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>
\ No newline at end of file
+				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
index 03757de4c..ece6b2ccb 100644
--- a/games/mana-games/apps/web/src/components/InstallPrompt.astro
+++ b/games/mana-games/apps/web/src/components/InstallPrompt.astro
@@ -3,181 +3,181 @@
 ---
 
 <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 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 {
+		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;
-  }
+	.install-prompt.hidden {
+		display: none;
+	}
 
-  .prompt-content {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
+	.prompt-content {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
 
-  .prompt-icon {
-    font-size: 2.5rem;
-    flex-shrink: 0;
-  }
+	.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 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-text p {
+		margin: 0;
+		font-size: 0.9rem;
+		color: var(--color-text-secondary);
+	}
 
-  .prompt-actions {
-    display: flex;
-    gap: 0.5rem;
-    flex-shrink: 0;
-  }
+	.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,
+	.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 {
+		background-color: var(--color-accent);
+		color: #000;
+	}
 
-  .install-btn:hover {
-    background-color: var(--color-accent-secondary);
-    transform: translateY(-1px);
-  }
+	.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 {
+		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);
-  }
+	.dismiss-btn:hover {
+		background-color: rgba(255, 255, 255, 0.05);
+	}
 
-  @media (max-width: 768px) {
-    .install-prompt {
-      bottom: 1rem;
-      padding: 1rem;
-    }
+	@media (max-width: 768px) {
+		.install-prompt {
+			bottom: 1rem;
+			padding: 1rem;
+		}
 
-    .prompt-content {
-      flex-wrap: wrap;
-    }
+		.prompt-content {
+			flex-wrap: wrap;
+		}
 
-    .prompt-icon {
-      font-size: 2rem;
-    }
+		.prompt-icon {
+			font-size: 2rem;
+		}
 
-    .prompt-actions {
-      width: 100%;
-      margin-top: 1rem;
-    }
+		.prompt-actions {
+			width: 100%;
+			margin-top: 1rem;
+		}
 
-    .install-btn,
-    .dismiss-btn {
-      flex: 1;
-    }
-  }
+		.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');
+	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());
+	// 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);
-    }
-  }
+		if (!promptShown && pageViews >= 3) {
+			setTimeout(() => {
+				if (installPrompt && deferredPrompt) {
+					installPrompt.classList.remove('hidden');
+				}
+			}, 30000);
+		}
+	}
 
-  // Installationsprompt abfangen
-  window.addEventListener('beforeinstallprompt', (e) => {
-    e.preventDefault();
-    deferredPrompt = e;
-  });
+	// Installationsprompt abfangen
+	window.addEventListener('beforeinstallprompt', (e) => {
+		e.preventDefault();
+		deferredPrompt = e;
+	});
 
-  // Install Button Handler
-  installButton?.addEventListener('click', async () => {
-    if (!deferredPrompt) return;
+	// 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');
-  });
+		deferredPrompt.prompt();
+		const { outcome } = await deferredPrompt.userChoice;
 
-  // Dismiss Button Handler
-  dismissButton?.addEventListener('click', () => {
-    installPrompt?.classList.add('hidden');
-    localStorage.setItem('install-prompt-shown', 'true');
-  });
+		if (outcome === 'accepted') {
+			console.log('PWA wurde installiert');
+		}
 
-  // App wurde installiert
-  window.addEventListener('appinstalled', () => {
-    console.log('PWA wurde erfolgreich installiert');
-    installPrompt?.classList.add('hidden');
-  });
-</script>
\ No newline at end of file
+		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
index 7c9e59563..85220c973 100644
--- a/games/mana-games/apps/web/src/components/MyGamesSection.astro
+++ b/games/mana-games/apps/web/src/components/MyGamesSection.astro
@@ -1,234 +1,234 @@
 ---
 export interface Props {
-  maxGames?: number;
+	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 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;
-    };
-  }
+	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;
+	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();
-    }
+		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;
 
-    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();
-        }
-      });
-    }
+			this.init();
+		}
 
-    async openDB(): Promise<void> {
-      return new Promise((resolve, reject) => {
-        const request = indexedDB.open(this.dbName, 1);
+		async init() {
+			await this.openDB();
+			await this.loadGames();
 
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => {
-          this.db = request.result;
-          resolve();
-        };
+			// Event listeners
+			this.viewAllBtn.addEventListener('click', () => {
+				window.location.href = '/my-games';
+			});
 
-        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 });
-          }
-        };
-      });
-    }
+			this.clearBtn.addEventListener('click', async () => {
+				if (confirm('Bist du sicher, dass du alle deine generierten Spiele löschen möchtest?')) {
+					await this.clearAllGames();
+				}
+			});
+		}
 
-    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 openDB(): Promise<void> {
+			return new Promise((resolve, reject) => {
+				const request = indexedDB.open(this.dbName, 1);
 
-    async getAllGames(): Promise<SavedGame[]> {
-      if (!this.db) await this.openDB();
+				request.onerror = () => reject(request.error);
+				request.onsuccess = () => {
+					this.db = request.result;
+					resolve();
+				};
 
-      return new Promise((resolve, reject) => {
-        const transaction = this.db!.transaction([this.storeName], 'readonly');
-        const store = transaction.objectStore(this.storeName);
-        const request = store.getAll();
+				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 });
+					}
+				};
+			});
+		}
 
-        request.onsuccess = () => resolve(request.result || []);
-        request.onerror = () => reject(request.error);
-      });
-    }
+		async loadGames() {
+			try {
+				const games = await this.getAllGames();
 
-    async deleteGame(id: string): Promise<void> {
-      if (!this.db) await this.openDB();
+				if (games.length === 0) {
+					this.showEmptyState();
+					return;
+				}
 
-      return new Promise((resolve, reject) => {
-        const transaction = this.db!.transaction([this.storeName], 'readwrite');
-        const store = transaction.objectStore(this.storeName);
-        const request = store.delete(id);
+				// Sort by creation date (newest first)
+				games.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
 
-        request.onsuccess = () => resolve();
-        request.onerror = () => reject(request.error);
-      });
-    }
+				// Show only first maxGames
+				const displayGames = games.slice(0, this.maxGames);
+				this.renderGames(displayGames, games.length);
 
-    async clearAllGames() {
-      if (!this.db) await this.openDB();
+				// 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();
+			}
+		}
 
-      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');
-    }
+		async getAllGames(): Promise<SavedGame[]> {
+			if (!this.db) await this.openDB();
 
-    renderGames(games: SavedGame[], totalCount: number) {
-      const gamesHTML = games.map(game => this.createGameCard(game)).join('');
-      
-      this.container.innerHTML = `
+			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 ? `
+        ${
+					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 `
+			// 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>`
-            }
+            ${
+							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>
@@ -236,294 +236,302 @@ const { maxGames = 8 } = Astro.props;
           <div class="game-info">
             <h3>${game.title}</h3>
             <p class="game-date">${date}</p>
-            ${game.stats ? `
+            ${
+							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');
-    }
+		showEmptyState() {
+			this.container.classList.add('hidden');
+			this.emptyState.classList.remove('hidden');
+		}
 
-    showError() {
-      this.container.innerHTML = `
+		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);
-  });
+	// 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;
-  }
+	.my-games-section {
+		margin: 3rem 0;
+	}
 
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-  }
+	.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-header h2 {
+		font-size: 1.75rem;
+		font-weight: 700;
+		color: var(--color-text);
+		margin: 0;
+	}
 
-  .section-actions {
-    display: flex;
-    gap: 1rem;
-  }
+	.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 {
+		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: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 {
+		color: #ef4444;
+		border-color: rgba(239, 68, 68, 0.3);
+	}
 
-  .action-btn.danger:hover {
-    background: rgba(239, 68, 68, 0.1);
-    border-color: #ef4444;
-  }
+	.action-btn.danger:hover {
+		background: rgba(239, 68, 68, 0.1);
+		border-color: #ef4444;
+	}
 
-  .my-games-container {
-    min-height: 200px;
-  }
+	.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);
-  }
+	.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;
-  }
+	.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); }
-  }
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
 
-  .games-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 1.5rem;
-  }
+	.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 {
+		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);
-  }
+	.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 {
+		position: relative;
+		aspect-ratio: 4/3;
+		background: var(--color-bg);
+		overflow: hidden;
+	}
 
-  .game-thumbnail img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+	.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);
-  }
+	.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;
-  }
+	.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;
-  }
+	.my-game-card:hover .delete-game-btn {
+		opacity: 1;
+	}
 
-  .delete-game-btn:hover {
-    background: rgba(239, 68, 68, 0.9);
-    transform: scale(1.1);
-  }
+	.delete-game-btn:hover {
+		background: rgba(239, 68, 68, 0.9);
+		transform: scale(1.1);
+	}
 
-  .game-info {
-    padding: 1rem;
-  }
+	.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-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-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 {
+		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;
-  }
+	.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;
-  }
+	.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-state {
+		padding: 4rem 2rem;
+		text-align: center;
+	}
 
-  .empty-content {
-    max-width: 400px;
-    margin: 0 auto;
-  }
+	.empty-content {
+		max-width: 400px;
+		margin: 0 auto;
+	}
 
-  .empty-icon {
-    font-size: 4rem;
-    margin: 0 0 1rem 0;
-    opacity: 0.3;
-  }
+	.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;
-  }
+	.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 {
+		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);
-  }
+	.create-btn:hover {
+		background: var(--color-accent-hover);
+		transform: translateY(-1px);
+	}
 
-  .error-state {
-    text-align: center;
-    padding: 3rem;
-    color: #ef4444;
-  }
+	.error-state {
+		text-align: center;
+		padding: 3rem;
+		color: #ef4444;
+	}
 
-  .hidden {
-    display: none !important;
-  }
+	.hidden {
+		display: none !important;
+	}
 
-  @media (max-width: 768px) {
-    .games-grid {
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      gap: 1rem;
-    }
+	@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-header {
+			flex-direction: column;
+			gap: 1rem;
+			align-items: flex-start;
+		}
 
-    .section-actions {
-      width: 100%;
-      justify-content: flex-start;
-    }
-  }
-</style>
\ No newline at end of file
+		.section-actions {
+			width: 100%;
+			justify-content: flex-start;
+		}
+	}
+</style>
diff --git a/games/mana-games/apps/web/src/data/games.ts b/games/mana-games/apps/web/src/data/games.ts
index 2aac276f3..24a0c5208 100644
--- a/games/mana-games/apps/web/src/data/games.ts
+++ b/games/mana-games/apps/web/src/data/games.ts
@@ -1,381 +1,401 @@
 export interface Game {
-  id: string;
-  title: string;
-  description: string;
-  slug: string;
-  htmlFile: string;
-  thumbnail?: string;
-  tags: string[];
-  difficulty: 'Einfach' | 'Mittel' | 'Schwer';
-  complexity: 'Minimal' | 'Einfach' | 'Mittel' | 'Komplex';
-  controls: string;
-  codeStats?: {
-    total: number;
-    code: number;
-    comments: number;
-  };
-  // Community game fields
-  community?: boolean;
-  author?: string;
-  submittedAt?: string;
+	id: string;
+	title: string;
+	description: string;
+	slug: string;
+	htmlFile: string;
+	thumbnail?: string;
+	tags: string[];
+	difficulty: 'Einfach' | 'Mittel' | 'Schwer';
+	complexity: 'Minimal' | 'Einfach' | 'Mittel' | 'Komplex';
+	controls: string;
+	codeStats?: {
+		total: number;
+		code: number;
+		comments: number;
+	};
+	// Community game fields
+	community?: boolean;
+	author?: string;
+	submittedAt?: string;
 }
 
 export const games: Game[] = [
-  {
-    id: '1',
-    title: 'Snake',
-    description: 'Der Klassiker! Steuere die Schlange und sammle Nahrung, aber vermeide die roten Felder!',
-    slug: 'snake',
-    htmlFile: '/games/snake_game.html',
-    thumbnail: '/screenshots/snake.jpg',
-    tags: ['Arcade', 'Klassiker', 'Retro'],
-    difficulty: 'Einfach',
-    complexity: 'Komplex',
-    controls: 'Pfeiltasten oder WASD zum Steuern',
-    codeStats: {
-      total: 604,
-      code: 338,
-      comments: 192
-    }
-  },
-  {
-    id: '2',
-    title: 'Space Defender',
-    description: 'Verteidige dein Raumschiff gegen Wellen von Aliens. Die Schwierigkeit steigt mit der Zeit!',
-    slug: 'space-defender',
-    htmlFile: '/games/space_defender_game.html',
-    thumbnail: '/screenshots/space-defenders.jpg',
-    tags: ['Shooter', 'Arcade', 'Action'],
-    difficulty: 'Mittel',
-    complexity: 'Mittel',
-    controls: 'A/D oder Pfeiltasten zum Bewegen, Leertaste zum Schießen',
-    codeStats: {
-      total: 436,
-      code: 348,
-      comments: 32
-    }
-  },
-  {
-    id: '3',
-    title: 'Gravity Painter',
-    description: 'Ein kreatives Physik-Puzzle! Setze Gravitationspunkte und lenke Partikel zu den Zielen.',
-    slug: 'gravity-painter',
-    htmlFile: '/games/gravity_painter.html',
-    thumbnail: '/screenshots/gravity-painter.jpg',
-    tags: ['Puzzle', 'Physik', 'Kreativ'],
-    difficulty: 'Schwer',
-    complexity: 'Mittel',
-    controls: 'Klicke für Gravitationspunkte, Leertaste für Partikel',
-    codeStats: {
-      total: 426,
-      code: 348,
-      comments: 21
-    }
-  },
-  {
-    id: '4',
-    title: 'Bounce & Catch Tutorial',
-    description: 'Ein einfaches Lernspiel, das die Grundlagen der Spieleentwicklung zeigt. Perfekt für Anfänger!',
-    slug: 'bounce-catch-tutorial',
-    htmlFile: '/games/bounce_catch_tutorial.html',
-    thumbnail: '/screenshots/bounce-catch.jpg',
-    tags: ['Tutorial', 'Lernspiel', 'Arcade'],
-    difficulty: 'Einfach',
-    complexity: 'Einfach',
-    controls: 'Mausbewegung zum Steuern des Paddles',
-    codeStats: {
-      total: 437,
-      code: 289,
-      comments: 87
-    }
-  },
-  {
-    id: '5',
-    title: 'Neon Maze Runner',
-    description: 'Navigiere durch prozedural generierte Labyrinthe! Sammle Diamanten, nutze Power-ups und finde den Ausgang.',
-    slug: 'neon-maze-runner',
-    htmlFile: '/games/neon_maze_runner.html',
-    thumbnail: '/screenshots/neon-maze-runner.jpg',
-    tags: ['Puzzle', 'Labyrinth', 'Arcade'],
-    difficulty: 'Mittel',
-    complexity: 'Komplex',
-    controls: 'WASD oder Pfeiltasten zum Bewegen',
-    codeStats: {
-      total: 832,
-      code: 644,
-      comments: 69
-    }
-  },
-  {
-    id: '6',
-    title: 'Rhythm Defender',
-    description: 'Verteidige dich im Takt der Musik! Drücke die richtigen Tasten im perfekten Timing für maximale Combos.',
-    slug: 'rhythm-defender',
-    htmlFile: '/games/rhythm_defender.html',
-    thumbnail: '/screenshots/rhythm-defender.jpg',
-    tags: ['Rhythmus', 'Musik', 'Arcade'],
-    difficulty: 'Mittel',
-    complexity: 'Komplex',
-    controls: 'A, S, D, F Tasten im Rhythmus drücken',
-    codeStats: {
-      total: 741,
-      code: 584,
-      comments: 56
-    }
-  },
-  {
-    id: '7',
-    title: 'Click Race',
-    description: 'Das schnellste Spiel! Klicke 30 mal so schnell du kannst. Wie schnell bist du?',
-    slug: 'click-race',
-    htmlFile: '/games/click_race.html',
-    thumbnail: '/screenshots/click-race.jpg',
-    tags: ['Geschwindigkeit', 'Minimal', 'Arcade'],
-    difficulty: 'Einfach',
-    complexity: 'Minimal',
-    controls: 'Klicke auf das rote Quadrat',
-    codeStats: {
-      total: 111,
-      code: 88,
-      comments: 23
-    }
-  },
-  {
-    id: '8',
-    title: 'Color Memory',
-    description: 'Merke dir die Farbreihenfolge! Ein klassisches Gedächtnisspiel das immer schwerer wird.',
-    slug: 'color-memory',
-    htmlFile: '/games/color_memory.html',
-    thumbnail: '/screenshots/color-memory.jpg',
-    tags: ['Gedächtnis', 'Minimal', 'Puzzle'],
-    difficulty: 'Einfach',
-    complexity: 'Minimal',
-    controls: 'Klicke die Farben in der richtigen Reihenfolge',
-    codeStats: {
-      total: 86,
-      code: 86,
-      comments: 0
-    }
-  },
-  {
-    id: '9',
-    title: 'Reaction Test',
-    description: 'Wie schnell sind deine Reflexe? Klicke so schnell wie möglich wenn der Bildschirm grün wird!',
-    slug: 'reaction-test',
-    htmlFile: '/games/reaction_test.html',
-    thumbnail: '/screenshots/reaction-test.jpg',
-    tags: ['Reaktion', 'Minimal', 'Test'],
-    difficulty: 'Einfach',
-    complexity: 'Minimal',
-    controls: 'Klicke wenn der Bildschirm grün wird',
-    codeStats: {
-      total: 78,
-      code: 78,
-      comments: 0
-    }
-  },
-  {
-    id: '10',
-    title: 'Asteroid Dash',
-    description: 'Fliege durch gefährliche Asteroidenfelder! Sammle Energie-Kristalle, nutze Power-ups und weiche den rotierenden Asteroiden aus.',
-    slug: 'asteroid-dash',
-    htmlFile: '/games/asteroid_dash.html',
-    thumbnail: '/screenshots/asteroid-dash.jpg',
-    tags: ['Action', 'Arcade', 'Weltraum'],
-    difficulty: 'Mittel',
-    complexity: 'Mittel',
-    controls: 'WASD oder Pfeiltasten zum Fliegen, Leertaste für Boost',
-    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.',
-    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
-    }
-  },
-  {
-    id: '12',
-    title: 'Balloon Pop',
-    description: 'Platze bunte Ballons bevor sie entkommen! Verschiedene Ballonarten, Power-ups und Combo-System für maximalen Spaß.',
-    slug: 'balloon-pop',
-    htmlFile: '/games/balloon_pop.html',
-    thumbnail: '/screenshots/balloon-pop.jpg',
-    tags: ['Geschicklichkeit', 'Familie', 'Bunt'],
-    difficulty: 'Einfach',
-    complexity: 'Einfach',
-    controls: 'Maus zum Klicken auf Ballons',
-    codeStats: {
-      total: 398,
-      code: 351,
-      comments: 47
-    }
-  },
-  {
-    id: '13',
-    title: 'Word Scramble',
-    description: '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
-    }
-  },
-  {
-    id: '14',
-    title: 'Memory Card Match',
-    description: 'Das klassische Memory-Spiel! Finde alle Kartenpaare mit Emojis. Drei Schwierigkeitsstufen für jeden Spieler.',
-    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
-    }
-  },
-  {
-    id: '15',
-    title: 'Turbo Racer',
-    description: '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
-    }
-  },
-  {
-    id: '16',
-    title: 'Card Stack Rush',
-    description: 'Sortiere Karten blitzschnell auf die richtigen Stapel! Mit wechselnden Regeln, Combo-System und Zeitdruck.',
-    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
-    }
-  },
-  {
-    id: '17',
-    title: 'Flappy Mana',
-    description: 'Fliege durch Röhren und sammle Punkte! Ein Flappy Bird Klon mit Partikeleffekten und Highscore-System.',
-    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
-    }
-  },
-  {
-    id: '18',
-    title: 'Mana Runner',
-    description: 'Laufe und springe durch magische Welten! Sammle Mana-Kristalle, weiche Hindernissen aus und schalte den Doppelsprung frei.',
-    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
-    }
-  },
-  {
-    id: '19',
-    title: 'Mana Defense',
-    description: 'Verteidige deinen Mana-Kristall! Baue Türme, plane deine Strategie und überlebe 20 Wellen von Gegnern.',
-    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
-    }
-  },
-  {
-    id: '20',
-    title: 'Mana Factory',
-    description: 'Baue die größte Mana-Produktionsanlage! Ein Idle-Game mit Upgrades, Prestige-System und exponentiellem Wachstum.',
-    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
-    }
-  },
-  {
-    id: '21',
-    title: 'Puzzle Blocks',
-    description: '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
-    }
-  }
-];
\ No newline at end of file
+	{
+		id: '1',
+		title: 'Snake',
+		description:
+			'Der Klassiker! Steuere die Schlange und sammle Nahrung, aber vermeide die roten Felder!',
+		slug: 'snake',
+		htmlFile: '/games/snake_game.html',
+		thumbnail: '/screenshots/snake.jpg',
+		tags: ['Arcade', 'Klassiker', 'Retro'],
+		difficulty: 'Einfach',
+		complexity: 'Komplex',
+		controls: 'Pfeiltasten oder WASD zum Steuern',
+		codeStats: {
+			total: 604,
+			code: 338,
+			comments: 192,
+		},
+	},
+	{
+		id: '2',
+		title: 'Space Defender',
+		description:
+			'Verteidige dein Raumschiff gegen Wellen von Aliens. Die Schwierigkeit steigt mit der Zeit!',
+		slug: 'space-defender',
+		htmlFile: '/games/space_defender_game.html',
+		thumbnail: '/screenshots/space-defenders.jpg',
+		tags: ['Shooter', 'Arcade', 'Action'],
+		difficulty: 'Mittel',
+		complexity: 'Mittel',
+		controls: 'A/D oder Pfeiltasten zum Bewegen, Leertaste zum Schießen',
+		codeStats: {
+			total: 436,
+			code: 348,
+			comments: 32,
+		},
+	},
+	{
+		id: '3',
+		title: 'Gravity Painter',
+		description:
+			'Ein kreatives Physik-Puzzle! Setze Gravitationspunkte und lenke Partikel zu den Zielen.',
+		slug: 'gravity-painter',
+		htmlFile: '/games/gravity_painter.html',
+		thumbnail: '/screenshots/gravity-painter.jpg',
+		tags: ['Puzzle', 'Physik', 'Kreativ'],
+		difficulty: 'Schwer',
+		complexity: 'Mittel',
+		controls: 'Klicke für Gravitationspunkte, Leertaste für Partikel',
+		codeStats: {
+			total: 426,
+			code: 348,
+			comments: 21,
+		},
+	},
+	{
+		id: '4',
+		title: 'Bounce & Catch Tutorial',
+		description:
+			'Ein einfaches Lernspiel, das die Grundlagen der Spieleentwicklung zeigt. Perfekt für Anfänger!',
+		slug: 'bounce-catch-tutorial',
+		htmlFile: '/games/bounce_catch_tutorial.html',
+		thumbnail: '/screenshots/bounce-catch.jpg',
+		tags: ['Tutorial', 'Lernspiel', 'Arcade'],
+		difficulty: 'Einfach',
+		complexity: 'Einfach',
+		controls: 'Mausbewegung zum Steuern des Paddles',
+		codeStats: {
+			total: 437,
+			code: 289,
+			comments: 87,
+		},
+	},
+	{
+		id: '5',
+		title: 'Neon Maze Runner',
+		description:
+			'Navigiere durch prozedural generierte Labyrinthe! Sammle Diamanten, nutze Power-ups und finde den Ausgang.',
+		slug: 'neon-maze-runner',
+		htmlFile: '/games/neon_maze_runner.html',
+		thumbnail: '/screenshots/neon-maze-runner.jpg',
+		tags: ['Puzzle', 'Labyrinth', 'Arcade'],
+		difficulty: 'Mittel',
+		complexity: 'Komplex',
+		controls: 'WASD oder Pfeiltasten zum Bewegen',
+		codeStats: {
+			total: 832,
+			code: 644,
+			comments: 69,
+		},
+	},
+	{
+		id: '6',
+		title: 'Rhythm Defender',
+		description:
+			'Verteidige dich im Takt der Musik! Drücke die richtigen Tasten im perfekten Timing für maximale Combos.',
+		slug: 'rhythm-defender',
+		htmlFile: '/games/rhythm_defender.html',
+		thumbnail: '/screenshots/rhythm-defender.jpg',
+		tags: ['Rhythmus', 'Musik', 'Arcade'],
+		difficulty: 'Mittel',
+		complexity: 'Komplex',
+		controls: 'A, S, D, F Tasten im Rhythmus drücken',
+		codeStats: {
+			total: 741,
+			code: 584,
+			comments: 56,
+		},
+	},
+	{
+		id: '7',
+		title: 'Click Race',
+		description: 'Das schnellste Spiel! Klicke 30 mal so schnell du kannst. Wie schnell bist du?',
+		slug: 'click-race',
+		htmlFile: '/games/click_race.html',
+		thumbnail: '/screenshots/click-race.jpg',
+		tags: ['Geschwindigkeit', 'Minimal', 'Arcade'],
+		difficulty: 'Einfach',
+		complexity: 'Minimal',
+		controls: 'Klicke auf das rote Quadrat',
+		codeStats: {
+			total: 111,
+			code: 88,
+			comments: 23,
+		},
+	},
+	{
+		id: '8',
+		title: 'Color Memory',
+		description:
+			'Merke dir die Farbreihenfolge! Ein klassisches Gedächtnisspiel das immer schwerer wird.',
+		slug: 'color-memory',
+		htmlFile: '/games/color_memory.html',
+		thumbnail: '/screenshots/color-memory.jpg',
+		tags: ['Gedächtnis', 'Minimal', 'Puzzle'],
+		difficulty: 'Einfach',
+		complexity: 'Minimal',
+		controls: 'Klicke die Farben in der richtigen Reihenfolge',
+		codeStats: {
+			total: 86,
+			code: 86,
+			comments: 0,
+		},
+	},
+	{
+		id: '9',
+		title: 'Reaction Test',
+		description:
+			'Wie schnell sind deine Reflexe? Klicke so schnell wie möglich wenn der Bildschirm grün wird!',
+		slug: 'reaction-test',
+		htmlFile: '/games/reaction_test.html',
+		thumbnail: '/screenshots/reaction-test.jpg',
+		tags: ['Reaktion', 'Minimal', 'Test'],
+		difficulty: 'Einfach',
+		complexity: 'Minimal',
+		controls: 'Klicke wenn der Bildschirm grün wird',
+		codeStats: {
+			total: 78,
+			code: 78,
+			comments: 0,
+		},
+	},
+	{
+		id: '10',
+		title: 'Asteroid Dash',
+		description:
+			'Fliege durch gefährliche Asteroidenfelder! Sammle Energie-Kristalle, nutze Power-ups und weiche den rotierenden Asteroiden aus.',
+		slug: 'asteroid-dash',
+		htmlFile: '/games/asteroid_dash.html',
+		thumbnail: '/screenshots/asteroid-dash.jpg',
+		tags: ['Action', 'Arcade', 'Weltraum'],
+		difficulty: 'Mittel',
+		complexity: 'Mittel',
+		controls: 'WASD oder Pfeiltasten zum Fliegen, Leertaste für Boost',
+		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.',
+		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,
+		},
+	},
+	{
+		id: '12',
+		title: 'Balloon Pop',
+		description:
+			'Platze bunte Ballons bevor sie entkommen! Verschiedene Ballonarten, Power-ups und Combo-System für maximalen Spaß.',
+		slug: 'balloon-pop',
+		htmlFile: '/games/balloon_pop.html',
+		thumbnail: '/screenshots/balloon-pop.jpg',
+		tags: ['Geschicklichkeit', 'Familie', 'Bunt'],
+		difficulty: 'Einfach',
+		complexity: 'Einfach',
+		controls: 'Maus zum Klicken auf Ballons',
+		codeStats: {
+			total: 398,
+			code: 351,
+			comments: 47,
+		},
+	},
+	{
+		id: '13',
+		title: 'Word Scramble',
+		description:
+			'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,
+		},
+	},
+	{
+		id: '14',
+		title: 'Memory Card Match',
+		description:
+			'Das klassische Memory-Spiel! Finde alle Kartenpaare mit Emojis. Drei Schwierigkeitsstufen für jeden Spieler.',
+		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,
+		},
+	},
+	{
+		id: '15',
+		title: 'Turbo Racer',
+		description:
+			'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,
+		},
+	},
+	{
+		id: '16',
+		title: 'Card Stack Rush',
+		description:
+			'Sortiere Karten blitzschnell auf die richtigen Stapel! Mit wechselnden Regeln, Combo-System und Zeitdruck.',
+		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,
+		},
+	},
+	{
+		id: '17',
+		title: 'Flappy Mana',
+		description:
+			'Fliege durch Röhren und sammle Punkte! Ein Flappy Bird Klon mit Partikeleffekten und Highscore-System.',
+		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,
+		},
+	},
+	{
+		id: '18',
+		title: 'Mana Runner',
+		description:
+			'Laufe und springe durch magische Welten! Sammle Mana-Kristalle, weiche Hindernissen aus und schalte den Doppelsprung frei.',
+		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,
+		},
+	},
+	{
+		id: '19',
+		title: 'Mana Defense',
+		description:
+			'Verteidige deinen Mana-Kristall! Baue Türme, plane deine Strategie und überlebe 20 Wellen von Gegnern.',
+		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,
+		},
+	},
+	{
+		id: '20',
+		title: 'Mana Factory',
+		description:
+			'Baue die größte Mana-Produktionsanlage! Ein Idle-Game mit Upgrades, Prestige-System und exponentiellem Wachstum.',
+		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,
+		},
+	},
+	{
+		id: '21',
+		title: 'Puzzle Blocks',
+		description:
+			'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,
+		},
+	},
+];
diff --git a/games/mana-games/apps/web/src/pages/about.astro b/games/mana-games/apps/web/src/pages/about.astro
index 55e974b2c..e7512cf4f 100644
--- a/games/mana-games/apps/web/src/pages/about.astro
+++ b/games/mana-games/apps/web/src/pages/about.astro
@@ -6,667 +6,679 @@ 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 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
+	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-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>
+	<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>
+		<!-- 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>
+		<!-- 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>
+		<!-- 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>
+		<!-- 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>
+		<!-- 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>
\ No newline at end of file
+	/* 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
index 6241f4c4f..bb9a8a034 100644
--- a/games/mana-games/apps/web/src/pages/agb.astro
+++ b/games/mana-games/apps/web/src/pages/agb.astro
@@ -4,467 +4,469 @@ 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>
+	<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>
+		<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="geltungsbereich" class="content-section">
+			<h2>§ 1 Geltungsbereich</h2>
 
-    <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>
+			<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>
 
-    <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>
+			<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>
 
-    <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>
+			<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="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="nutzung" class="content-section">
+			<h2>§ 2 Nutzung der Plattform</h2>
 
-    <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>
+			<p>
+				(1) Die Nutzung der Plattform und der darauf angebotenen Spiele ist grundsätzlich kostenlos
+				und ohne Registrierung möglich.
+			</p>
 
-    <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>
+			<p>
+				(2) Wir gewähren Ihnen ein nicht-exklusives, nicht übertragbares, widerrufliches Recht zur
+				persönlichen Nutzung der Plattform und der Spiele.
+			</p>
 
-    <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>
+			<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>
 
-    <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>
+			<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="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>
+		<section id="registrierung" class="content-section">
+			<h2>§ 3 Registrierung und Nutzerkonto</h2>
 
-    <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>
+			<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-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 {
+		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;
-  }
+	.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;
-  }
+	.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;
-  }
+	.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 {
+		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 h2 {
+		font-size: 1.5rem;
+		margin-bottom: 1rem;
+		color: var(--color-text);
+	}
 
-  .toc ol {
-    padding-left: 1.5rem;
-  }
+	.toc ol {
+		padding-left: 1.5rem;
+	}
 
-  .toc li {
-    color: var(--color-text-secondary);
-    margin-bottom: 0.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 {
+		color: var(--color-text-secondary);
+		text-decoration: none;
+		transition: color 0.2s ease;
+	}
 
-  .toc a:hover {
-    color: var(--color-accent);
-  }
+	.toc a:hover {
+		color: var(--color-accent);
+	}
 
-  .content-section {
-    margin-bottom: 3rem;
-    scroll-margin-top: 2rem;
-  }
+	.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 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 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;
-  }
+	.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,
+	.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);
-  }
+	.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);
-  }
+	.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);
-  }
+	.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 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,
+	.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);
-  }
+	.highlight-box li::before {
+		content: '✓';
+		position: absolute;
+		left: 0;
+		color: var(--color-accent);
+	}
 
-  .warning-box li::before {
-    content: "✗";
-    position: absolute;
-    left: 0;
-    color: #ff3b30;
-  }
+	.warning-box li::before {
+		content: '✗';
+		position: absolute;
+		left: 0;
+		color: #ff3b30;
+	}
 
-  .content-list li::before {
-    content: "•";
-    position: absolute;
-    left: 0;
-    color: var(--color-accent);
-  }
+	.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;
-  }
+	.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 {
+		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.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.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 h4 {
+		margin-bottom: 1rem;
+	}
 
-  .rule-card ul {
-    list-style: none;
-    padding: 0;
-  }
+	.rule-card ul {
+		list-style: none;
+		padding: 0;
+	}
 
-  .rule-card li {
-    padding: 0.5rem 0;
-    color: var(--color-text-secondary);
-    font-size: 0.9rem;
-  }
+	.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;
-  }
+	.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 {
+		color: var(--color-accent);
+		text-decoration: none;
+	}
 
-  a:hover {
-    text-decoration: underline;
-  }
+	a:hover {
+		text-decoration: underline;
+	}
 
-  @media (max-width: 768px) {
-    .agb-header h1 {
-      font-size: 2rem;
-    }
+	@media (max-width: 768px) {
+		.agb-header h1 {
+			font-size: 2rem;
+		}
 
-    .content-section h2 {
-      font-size: 1.5rem;
-    }
+		.content-section h2 {
+			font-size: 1.5rem;
+		}
 
-    .toc {
-      padding: 1.5rem;
-    }
+		.toc {
+			padding: 1.5rem;
+		}
 
-    .rules-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>
\ No newline at end of file
+		.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
index 924d538b3..880487d17 100644
--- a/games/mana-games/apps/web/src/pages/community.astro
+++ b/games/mana-games/apps/web/src/pages/community.astro
@@ -4,7 +4,7 @@ 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);
+const communityGames = games.filter((game) => 'community' in game && game.community === true);
 
 // Try to load additional community games from JSON file
 let additionalCommunityGames = [];
@@ -15,308 +15,307 @@ let additionalCommunityGames = [];
 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>
+<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="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>
+			<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>
-    )}
+		{
+			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>
+		<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;
-  }
+	.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 {
+		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 h3 {
+		color: #00ff88;
+		margin-bottom: 1rem;
+		font-size: 1.3rem;
+	}
 
-  .info-card p {
-    margin-bottom: 1.5rem;
-    color: #cccccc;
-  }
+	.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 {
+		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);
-  }
+	.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;
-  }
+	.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-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-number {
+		font-size: 2rem;
+		font-weight: bold;
+		color: #00ff88;
+		margin-bottom: 0.5rem;
+	}
 
-  .stat-label {
-    font-size: 0.9rem;
-    color: #888;
-  }
+	.stat-label {
+		font-size: 0.9rem;
+		color: #888;
+	}
 
-  .games-section {
-    margin-bottom: 3rem;
-  }
+	.games-section {
+		margin-bottom: 3rem;
+	}
 
-  .games-section h2 {
-    color: #00ff88;
-    margin-bottom: 1.5rem;
-  }
+	.games-section h2 {
+		color: #00ff88;
+		margin-bottom: 1.5rem;
+	}
 
-  .games-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 2rem;
-  }
+	.games-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 2rem;
+	}
 
-  .community-game-card {
-    position: relative;
-  }
+	.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-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-label {
+		color: #888;
+		margin-right: 0.5rem;
+	}
 
-  .author-name {
-    color: #00ff88;
-    font-weight: 500;
-  }
+	.author-name {
+		color: #00ff88;
+		font-weight: 500;
+	}
 
-  .submission-date {
-    font-size: 0.8rem;
-    color: #666;
-    margin-top: 0.5rem;
-  }
+	.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-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-icon {
+		font-size: 4rem;
+		margin-bottom: 1rem;
+	}
 
-  .empty-state h2 {
-    color: #ffffff;
-    margin-bottom: 1rem;
-  }
+	.empty-state h2 {
+		color: #ffffff;
+		margin-bottom: 1rem;
+	}
 
-  .empty-state p {
-    color: #888;
-    margin-bottom: 2rem;
-  }
+	.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 {
+		margin-top: 3rem;
+		background: #1a1a1a;
+		border: 1px solid #2a2a2a;
+		border-radius: 8px;
+		padding: 2rem;
+	}
 
-  .pending-section h2 {
-    color: #00ff88;
-    margin-bottom: 1rem;
-  }
+	.pending-section h2 {
+		color: #00ff88;
+		margin-bottom: 1rem;
+	}
 
-  .pending-section p {
-    color: #888;
-    margin-bottom: 1.5rem;
-  }
+	.pending-section p {
+		color: #888;
+		margin-bottom: 1.5rem;
+	}
 
-  .pending-list {
-    display: grid;
-    gap: 1rem;
-  }
+	.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-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 h4 {
+		color: #ffffff;
+		margin-bottom: 0.25rem;
+	}
 
-  .pending-info p {
-    font-size: 0.9rem;
-    color: #888;
-    margin: 0;
-  }
+	.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 {
+		color: #00ff88;
+		text-decoration: none;
+		font-size: 0.9rem;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
 
-  .pr-link:hover {
-    text-decoration: underline;
-  }
+	.pr-link:hover {
+		text-decoration: underline;
+	}
 
-  .loading {
-    text-align: center;
-    color: #888;
-    padding: 2rem;
-  }
+	.loading {
+		text-align: center;
+		color: #888;
+		padding: 2rem;
+	}
 
-  @media (max-width: 768px) {
-    .games-grid {
-      grid-template-columns: 1fr;
-    }
+	@media (max-width: 768px) {
+		.games-grid {
+			grid-template-columns: 1fr;
+		}
 
-    .stats-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 = `
+	// 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>
@@ -324,8 +323,8 @@ const allCommunityGames = [...communityGames, ...additionalCommunityGames];
         </div>
       `;
 
-      // Example of what it would look like with real data:
-      /*
+			// Example of what it would look like with real data:
+			/*
       const response = await fetch('/.netlify/functions/get-pending-games');
       const pendingGames = await response.json();
       
@@ -345,12 +344,13 @@ const allCommunityGames = [...communityGames, ...additionalCommunityGames];
         `).join('');
       }
       */
-    } catch (error) {
-      console.error('Error fetching pending games:', error);
-      pendingList.innerHTML = '<p style="color: #ff4444;">Fehler beim Laden der ausstehenden Spiele</p>';
-    }
-  }
+		} 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>
\ No newline at end of file
+	// 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
index bfa774d30..88d6fc8e4 100644
--- a/games/mana-games/apps/web/src/pages/copyright.astro
+++ b/games/mana-games/apps/web/src/pages/copyright.astro
@@ -4,704 +4,716 @@ 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>
+	<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="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>Projekt-Lizenz</h2>
 
-    <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>
+			<div class="license-card main-license">
+				<div class="license-header">
+					<h3>MIT License</h3>
+					<span class="license-badge">Hauptlizenz</span>
+				</div>
 
-    <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>
+				<div class="license-content">
+					<p>Copyright (c) 2024 [Ihr Name]</p>
 
-    <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>
+					<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>
 
-    <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>
+					<p>
+						The above copyright notice and this permission notice shall be included in all copies or
+						substantial portions of the Software.
+					</p>
 
-    <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>
+					<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>
 
-    <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="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>
 
-    <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>
+		<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-container {
+		max-width: 900px;
+		margin: 0 auto;
+		padding: 2rem 0;
+	}
 
-  .copyright-header {
-    text-align: center;
-    margin-bottom: 3rem;
-  }
+	.copyright-header {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
 
-  .header-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    display: inline-block;
-  }
+	.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;
-  }
+	.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);
-  }
+	.subtitle {
+		font-size: 1.2rem;
+		color: var(--color-text-secondary);
+	}
 
-  .intro-section {
-    margin-bottom: 3rem;
-  }
+	.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;
-  }
+	.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-icon {
+		font-size: 4rem;
+		flex-shrink: 0;
+	}
 
-  .banner-content h2 {
-    margin-bottom: 0.5rem;
-    color: var(--color-text);
-  }
+	.banner-content h2 {
+		margin-bottom: 0.5rem;
+		color: var(--color-text);
+	}
 
-  .banner-content p {
-    color: var(--color-text-secondary);
-    margin-bottom: 1.5rem;
-  }
+	.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 {
+		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);
-  }
+	.github-button:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
+	}
 
-  .content-section {
-    margin-bottom: 4rem;
-  }
+	.content-section {
+		margin-bottom: 4rem;
+	}
 
-  .content-section h2 {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 2rem;
-    color: var(--color-text);
-  }
+	.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 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);
-  }
+	.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;
-  }
+	.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);
-  }
+	.main-license {
+		border: 2px solid var(--color-accent);
+	}
 
-  .license-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-  }
+	.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-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 {
+		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-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 {
+		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 ul {
+		list-style: none;
+		padding: 0;
+	}
 
-  .license-explanation li {
-    padding: 0.5rem 0;
-    color: var(--color-text-secondary);
-  }
+	.license-explanation li {
+		padding: 0.5rem 0;
+		color: var(--color-text-secondary);
+	}
 
-  .games-licenses {
-    display: grid;
-    gap: 1.5rem;
-  }
+	.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;
-  }
+	.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;
-  }
+	.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-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-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-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;
-  }
+	.credit-name {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
 
-  .version {
-    font-size: 0.85rem;
-    color: var(--color-text-secondary);
-  }
+	.version {
+		font-size: 0.85rem;
+		color: var(--color-text-secondary);
+	}
 
-  .credit-info {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
+	.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;
-  }
+	.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 {
+		color: var(--color-text-secondary);
+		text-decoration: none;
+		font-size: 0.9rem;
+	}
 
-  .credit-info a:hover {
-    color: var(--color-accent);
-  }
+	.credit-info a:hover {
+		color: var(--color-accent);
+	}
 
-  .assets-info {
-    display: grid;
-    gap: 1.5rem;
-  }
+	.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 {
+		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);
-  }
+	.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-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;
-  }
+	.contribute-steps {
+		display: grid;
+		gap: 1.5rem;
+		margin: 1.5rem 0;
+	}
 
-  .step {
-    display: flex;
-    gap: 1.5rem;
-    align-items: start;
-  }
+	.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-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 h4 {
+		margin-bottom: 0.25rem;
+	}
 
-  .step-content p {
-    color: var(--color-text-secondary);
-    margin: 0;
-  }
+	.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;
-  }
+	.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;
-  }
+	.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 {
+		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 p {
+		margin: 0;
+		font-weight: 600;
+	}
 
-  .developer-card .role {
-    font-weight: 400;
-    color: var(--color-text-secondary);
-    font-size: 0.9rem;
-  }
+	.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 {
+		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 {
+		padding: 0.5rem 0;
+		color: var(--color-text-secondary);
+		position: relative;
+		padding-left: 1.5rem;
+	}
 
-  .thanks-list li::before {
-    content: "❤️";
-    position: absolute;
-    left: 0;
-  }
+	.thanks-list li::before {
+		content: '❤️';
+		position: absolute;
+		left: 0;
+	}
 
-  .legal-notes {
-    display: grid;
-    gap: 1.5rem;
-  }
+	.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 {
+		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;
-  }
+	.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;
-  }
+	.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 {
+		color: var(--color-accent);
+		text-decoration: none;
+	}
 
-  a:hover {
-    text-decoration: underline;
-  }
+	a:hover {
+		text-decoration: underline;
+	}
 
-  @media (max-width: 768px) {
-    .copyright-header h1 {
-      font-size: 2rem;
-    }
+	@media (max-width: 768px) {
+		.copyright-header h1 {
+			font-size: 2rem;
+		}
 
-    .open-source-banner {
-      flex-direction: column;
-      text-align: center;
-    }
+		.open-source-banner {
+			flex-direction: column;
+			text-align: center;
+		}
 
-    .content-section h2 {
-      font-size: 1.5rem;
-    }
+		.content-section h2 {
+			font-size: 1.5rem;
+		}
 
-    .credit-item {
-      flex-direction: column;
-      gap: 0.5rem;
-      text-align: center;
-    }
-  }
-</style>
\ No newline at end of file
+		.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
index 55f225953..0685dfa84 100644
--- a/games/mana-games/apps/web/src/pages/create.astro
+++ b/games/mana-games/apps/web/src/pages/create.astro
@@ -3,909 +3,972 @@ 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="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>
+					<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>
+							<!-- 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>
+							<!-- 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>
+							<!-- 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>
+							<!-- 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>
+					<!-- 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>
+					<!-- 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>
+				<!-- 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>
+			<!-- 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 = `
+	// 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">
@@ -913,670 +976,676 @@ import Layout from '../layouts/Layout.astro';
           </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);
-  }
+			// 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>
\ No newline at end of file
+	.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
index f0927cf66..e1727041e 100644
--- a/games/mana-games/apps/web/src/pages/datenschutz.astro
+++ b/games/mana-games/apps/web/src/pages/datenschutz.astro
@@ -4,448 +4,442 @@ 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>
+	<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>
+		<section class="content-section">
+			<h2>1. Datenschutz auf einen Blick</h2>
 
-      <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>
+			<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>
 
-    <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>
+			<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>
 
-      <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>
+		<section class="content-section">
+			<h2>2. Datenerfassung auf dieser Website</h2>
 
-      <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>
+			<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>
 
-    <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>
+			<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>
 
-    <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>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>
 
-      <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>
+		<section class="content-section">
+			<h2>3. Hosting und Content Delivery Networks (CDN)</h2>
 
-      <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>
+			<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>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>
+		<section class="content-section">
+			<h2>4. Allgemeine Hinweise und Pflichtinformationen</h2>
 
-      <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>
+			<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>
 
-    <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>
+			<h3>Hinweis zur verantwortlichen Stelle</h3>
+			<p>Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:</p>
 
-      <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>
+			<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>
 
-    <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>
+			<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>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>5. Datenerfassung auf dieser Website</h2>
 
-    <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>
+			<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>
 
-    <div class="footer-actions">
-      <Button href="/" variant="ghost">Zurück zur Startseite</Button>
-    </div>
-  </div>
+			<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-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 {
+		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;
-  }
+	.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;
-  }
+	.last-updated {
+		color: var(--color-text-secondary);
+		font-size: 1.1rem;
+	}
 
-  .content-section {
-    margin-bottom: 4rem;
-  }
+	.content-section {
+		margin-bottom: 4rem;
+	}
 
-  .content-section h2 {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 1.5rem;
-    color: var(--color-text);
-  }
+	.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 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 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;
-  }
+	.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;
-  }
+	.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 {
+		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-box.positive {
+		background: rgba(0, 255, 136, 0.1);
+		border-color: var(--color-accent);
+	}
 
-  .highlight-icon {
-    font-size: 2rem;
-    flex-shrink: 0;
-  }
+	.highlight-icon {
+		font-size: 2rem;
+		flex-shrink: 0;
+	}
 
-  .highlight-content h4 {
-    margin-bottom: 0.5rem;
-  }
+	.highlight-content h4 {
+		margin-bottom: 0.5rem;
+	}
 
-  .highlight-content p {
-    margin-bottom: 0;
-  }
+	.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 {
+		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;
-  }
+	.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;
-  }
+	.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 {
+		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 {
+		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);
-  }
+	.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;
-  }
+	.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 {
+		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:hover {
+		border-color: var(--color-accent);
+		transform: translateY(-2px);
+	}
 
-  .right-card h4 {
-    color: var(--color-accent);
-    margin-bottom: 0.5rem;
-  }
+	.right-card h4 {
+		color: var(--color-accent);
+		margin-bottom: 0.5rem;
+	}
 
-  .right-card p {
-    font-size: 0.9rem;
-    margin-bottom: 0;
-  }
+	.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;
-  }
+	.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 {
+		color: var(--color-accent);
+		text-decoration: none;
+		transition: opacity 0.2s ease;
+	}
 
-  a:hover {
-    opacity: 0.8;
-    text-decoration: underline;
-  }
+	a:hover {
+		opacity: 0.8;
+		text-decoration: underline;
+	}
 
-  /* Responsive */
-  @media (max-width: 768px) {
-    .datenschutz-header h1 {
-      font-size: 2rem;
-    }
+	/* Responsive */
+	@media (max-width: 768px) {
+		.datenschutz-header h1 {
+			font-size: 2rem;
+		}
 
-    .content-section h2 {
-      font-size: 1.5rem;
-    }
+		.content-section h2 {
+			font-size: 1.5rem;
+		}
 
-    .content-section h3 {
-      font-size: 1.25rem;
-    }
+		.content-section h3 {
+			font-size: 1.25rem;
+		}
 
-    .highlight-box {
-      flex-direction: column;
-      gap: 1rem;
-    }
+		.highlight-box {
+			flex-direction: column;
+			gap: 1rem;
+		}
 
-    .rights-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>
\ No newline at end of file
+		.rights-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
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
index 95f755946..eb9adfddf 100644
--- a/games/mana-games/apps/web/src/pages/games/[slug]/playground.astro
+++ b/games/mana-games/apps/web/src/pages/games/[slug]/playground.astro
@@ -3,414 +3,425 @@ import Layout from '../../../layouts/Layout.astro';
 import { games } from '../../../data/games';
 
 export function getStaticPaths() {
-  return games.map((game) => ({
-    params: { slug: game.slug },
-    props: { game },
-  }));
+	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>
+<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 id="loadingOverlay" class="loading-overlay">
-    <div class="spinner"></div>
-    <p>Code wird geladen...</p>
-  </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);
+	// Add no-scroll class to body
+	document.body.classList.add('no-scroll');
 
-  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 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);
 
-  // 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);
+	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);
 
-  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();
-        }
-      };
-    });
-  };
+	// 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);
 
-  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;
+	script.onload = () => {
+		// Load modes
+		const modes = ['xml', 'javascript', 'css', 'htmlmixed'];
+		let loadedModes = 0;
 
-    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
-      });
+		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();
+				}
+			};
+		});
+	};
 
-      // Force CodeMirror to fill the container
-      setTimeout(() => {
-        cm.setSize('100%', '100%');
-        cm.refresh();
-      }, 100);
+	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`;
 
-      // 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>';
-    }
+		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');
 
-    // Run button
-    runBtn?.addEventListener('click', () => {
-      const code = cm.getValue();
-      updatePreview(code);
-      showNotification('Code ausgeführt!', 'success');
-    });
+		let originalCode = '';
+		let cm: any;
 
-    // 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');
-      }
-    });
+		try {
+			// Fetch the game HTML
+			const response = await fetch(htmlFile);
+			originalCode = await response.text();
 
-    // Fullscreen preview
-    fullscreenPreviewBtn?.addEventListener('click', () => {
-      if (preview.requestFullscreen) {
-        preview.requestFullscreen();
-      }
-    });
+			// 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,
+			});
 
-    // Handle window resize
-    window.addEventListener('resize', () => {
-      cm.refresh();
-    });
+			// Force CodeMirror to fill the container
+			setTimeout(() => {
+				cm.setSize('100%', '100%');
+				cm.refresh();
+			}, 100);
 
-    // Auto-save to localStorage
-    cm.on('change', () => {
-      const code = cm.getValue();
-      localStorage.setItem(`playground_${gameUrl}`, code);
-    });
+			// Initial preview
+			updatePreview(originalCode);
 
-    // 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);
-      }
-    }
+			// Hide loading overlay
+			loadingOverlay?.classList.add('hidden');
+		} catch (error) {
+			console.error('Error loading game:', error);
+			loadingOverlay!.innerHTML = '<p>Fehler beim Laden des Spiels</p>';
+		}
 
-    function updatePreview(code: string) {
-      const blob = new Blob([code], { type: 'text/html' });
-      const url = URL.createObjectURL(blob);
-      preview.src = url;
-    }
-  }
+		// Run button
+		runBtn?.addEventListener('click', () => {
+			const code = cm.getValue();
+			updatePreview(code);
+			showNotification('Code ausgeführt!', 'success');
+		});
 
-  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);
-  }
+		// 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;
+	// 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-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);
-  }
+	.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-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,
+	.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-header h3,
+	.preview-header h3 {
+		margin: 0;
+		font-size: 1rem;
+		color: var(--color-text-secondary);
+	}
 
-  .editor-actions {
-    display: flex;
-    gap: 0.5rem;
-  }
+	.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 {
+		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: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 {
+		background: var(--color-accent);
+		color: #000;
+		border-color: var(--color-accent);
+	}
 
-  .editor-btn.primary:hover {
-    background: var(--color-accent-secondary);
-  }
+	.editor-btn.primary:hover {
+		background: var(--color-accent-secondary);
+	}
 
-  .editor-btn .icon {
-    font-size: 1rem;
-  }
+	.editor-btn .icon {
+		font-size: 1rem;
+	}
 
-  .code-editor {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    min-height: 0;
-  }
+	.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;
-  }
+	/* 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 {
+		flex: 1;
+		position: relative;
+		background: #000;
+	}
 
-  .preview-frame iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
-  }
+	.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 */
+	.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;
-  }
+	.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;
-  }
+	.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); }
-  }
+	@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;
-  }
+	/* 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.show {
+		transform: translateX(-50%) translateY(0);
+	}
 
-  .notification-success {
-    border: 1px solid var(--color-accent);
-    color: var(--color-accent);
-  }
+	.notification-success {
+		border: 1px solid var(--color-accent);
+		color: var(--color-accent);
+	}
 
-  .notification-info {
-    border: 1px solid #3b82f6;
-    color: #3b82f6;
-  }
+	.notification-info {
+		border: 1px solid #3b82f6;
+		color: #3b82f6;
+	}
 
-  .notification-error {
-    border: 1px solid #ef4444;
-    color: #ef4444;
-  }
+	.notification-error {
+		border: 1px solid #ef4444;
+		color: #ef4444;
+	}
 
-  @media (max-width: 768px) {
-    .playground-container {
-      grid-template-columns: 1fr;
-    }
+	@media (max-width: 768px) {
+		.playground-container {
+			grid-template-columns: 1fr;
+		}
 
-    .preview-panel {
-      display: none;
-    }
+		.preview-panel {
+			display: none;
+		}
 
-    .editor-header h3::after {
-      content: ' (Vorschau ausgeblendet)';
-      font-size: 0.8rem;
-      opacity: 0.6;
-    }
-  }
-</style>
\ No newline at end of file
+		.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
index b5f7d9e41..e4bfe3a50 100644
--- a/games/mana-games/apps/web/src/pages/impressum.astro
+++ b/games/mana-games/apps/web/src/pages/impressum.astro
@@ -4,431 +4,429 @@ 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>
+	<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>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>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>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>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>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>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>
+		<section class="content-section">
+			<h2>Haftungsausschluss (Disclaimer)</h2>
 
-      <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>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>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>
+			<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>
 
-    <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>
+			<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>
 
-    <div class="footer-actions">
-      <Button href="/" variant="ghost">Zurück zur Startseite</Button>
-      <Button href="/datenschutz" variant="ghost">Datenschutz</Button>
-    </div>
-  </div>
+		<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-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 {
+		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;
-  }
+	.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;
-  }
+	.subtitle {
+		color: var(--color-text-secondary);
+		font-size: 1.1rem;
+	}
 
-  .content-section {
-    margin-bottom: 3rem;
-  }
+	.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 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 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 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;
-  }
+	.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-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-icon {
+		font-size: 3rem;
+		opacity: 0.5;
+	}
 
-  .contact-info p {
-    margin-bottom: 0.5rem;
-    font-family: monospace;
-  }
+	.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-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-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 {
+		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 .icon {
+		font-size: 2rem;
+		flex-shrink: 0;
+	}
 
-  .contact-item h4 {
-    margin-bottom: 0.25rem;
-  }
+	.contact-item h4 {
+		margin-bottom: 0.25rem;
+	}
 
-  .contact-item p {
-    margin-bottom: 0;
-    font-family: monospace;
-  }
+	.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 {
+		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;
-  }
+	.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;
-  }
+	.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 {
+		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;
-  }
+	.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 {
+		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 {
+		color: var(--color-accent);
+		text-decoration: none;
+		word-break: break-all;
+	}
 
-  .link-box a:hover {
-    text-decoration: underline;
-  }
+	.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-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-icon {
+		font-size: 3rem;
+		flex-shrink: 0;
+	}
 
-  .opensource-content h4 {
-    color: var(--color-accent);
-    margin-bottom: 0.5rem;
-  }
+	.opensource-content h4 {
+		color: var(--color-accent);
+		margin-bottom: 0.5rem;
+	}
 
-  .opensource-content p {
-    margin-bottom: 1rem;
-  }
+	.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 {
+		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);
-  }
+	.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;
-  }
+	.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 {
+		color: var(--color-accent);
+		text-decoration: none;
+		transition: opacity 0.2s ease;
+	}
 
-  a:hover {
-    opacity: 0.8;
-    text-decoration: underline;
-  }
+	a:hover {
+		opacity: 0.8;
+		text-decoration: underline;
+	}
 
-  /* Responsive */
-  @media (max-width: 768px) {
-    .impressum-header h1 {
-      font-size: 2rem;
-    }
+	/* Responsive */
+	@media (max-width: 768px) {
+		.impressum-header h1 {
+			font-size: 2rem;
+		}
 
-    .content-section h2 {
-      font-size: 1.5rem;
-    }
+		.content-section h2 {
+			font-size: 1.5rem;
+		}
 
-    .content-section h3 {
-      font-size: 1.2rem;
-    }
+		.content-section h3 {
+			font-size: 1.2rem;
+		}
 
-    .contact-card {
-      flex-direction: column;
-      gap: 1rem;
-      text-align: center;
-    }
+		.contact-card {
+			flex-direction: column;
+			gap: 1rem;
+			text-align: center;
+		}
 
-    .contact-grid {
-      grid-template-columns: 1fr;
-    }
+		.contact-grid {
+			grid-template-columns: 1fr;
+		}
 
-    .opensource-box {
-      flex-direction: column;
-      text-align: center;
-      gap: 1rem;
-    }
-  }
-</style>
\ No newline at end of file
+		.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
index c1e380315..43f65844c 100644
--- a/games/mana-games/apps/web/src/pages/index.astro
+++ b/games/mana-games/apps/web/src/pages/index.astro
@@ -6,13 +6,16 @@ import HorizontalScroller from '../components/HorizontalScroller.astro';
 import { games } from '../data/games';
 
 // Filtere offizielle Spiele (ohne community flag)
-const officialGames = games.filter(game => !game.community);
+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')
+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
@@ -20,633 +23,615 @@ 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="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>
+	<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"
-  />
+	<!-- Featured Official Games - Netflix Style -->
+	<HorizontalScroller title="Offizielle Mana Games" games={featuredGames} id="featured-scroller" />
 
-  <!-- My Games Section -->
-  <MyGamesSection maxGames={4} />
+	<!-- My Games Section -->
+	<MyGamesSection maxGames={4} />
 
-  <!-- Genre-basierte Scroller -->
-  {arcadeGames.length > 0 && (
-    <HorizontalScroller 
-      title="Arcade Spiele" 
-      games={arcadeGames}
-      id="arcade-scroller"
-    />
-  )}
+	<!-- 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"
-    />
-  )}
+	{
+		puzzleGames.length > 0 && (
+			<HorizontalScroller title="Puzzle & Denkspiele" games={puzzleGames} id="puzzle-scroller" />
+		)
+	}
 
-  {actionGames.length > 0 && (
-    <HorizontalScroller 
-      title="Action & Adventure" 
-      games={actionGames}
-      id="action-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>
+	<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 {
+		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-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;
-  }
+	.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 {
+		display: inline;
+		opacity: 0;
+		transform: translateY(20px);
+		animation: fadeInUp 0.4s ease forwards;
+	}
 
-  .line-1 {
-    animation-delay: 0s;
-  }
+	.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;
-  }
+	.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);
-  }
+	#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-out {
+		animation: fadeOut 0.3s ease-out forwards;
+	}
 
-  .word-fade-in {
-    animation: fadeIn 0.3s ease-in forwards;
-  }
+	.word-fade-in {
+		animation: fadeIn 0.3s ease-in forwards;
+	}
 
-  @keyframes fadeOut {
-    to {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-  }
+	@keyframes fadeOut {
+		to {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+	}
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@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 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%;
+	}
 
-  .floating-squares {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
+	.square {
+		position: absolute;
+		border: 1px solid rgba(0, 255, 136, 0.2);
+		border-radius: 1rem;
+	}
 
-  .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(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(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);
+	}
 
-  .square:nth-child(3) {
-    width: 150px;
-    height: 150px;
-    bottom: 10%;
-    left: 50%;
-    transform: rotate(45deg);
-  }
+	@keyframes fadeInUp {
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  @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 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;
+	}
 
-  .stats-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 2.5rem;
-    flex-wrap: wrap;
-  }
+	.stat {
+		text-align: center;
+	}
 
-  .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-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-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-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 {
-    text-decoration: none;
-    transition: all 0.2s ease;
-    cursor: pointer;
-  }
+	.stat-link:hover {
+		transform: translateY(-2px);
+	}
 
-  .stat-link:hover {
-    transform: translateY(-2px);
-  }
+	.stat-link .stat-number {
+		font-size: 2rem;
+	}
 
-  .stat-link .stat-number {
-    font-size: 2rem;
-  }
+	.stat-link:hover .stat-number {
+		transform: scale(1.1);
+		transition: transform 0.2s ease;
+	}
 
-  .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);
+	}
 
-  /* 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 {
-    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;
+	}
 
-  .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-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 {
-    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: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);
+	}
 
-  .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;
+	}
 
-  .hidden {
-    display: none !important;
-  }
+	.games-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 2rem;
+		align-items: stretch;
+	}
 
-  .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;
+	}
 
-  .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);
+	}
 
-  /* 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;
+	}
 
-  /* 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: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 {
-    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 .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 .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-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-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-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 .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 .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);
+	}
 
-  .my-game-card .creation-date {
-    color: var(--color-text-muted);
-  }
+	@media (max-width: 768px) {
+		.hero {
+			min-height: 25vh;
+			margin-bottom: 1rem;
+		}
 
-  @media (max-width: 768px) {
-    .hero {
-      min-height: 25vh;
-      margin-bottom: 1rem;
-    }
+		.hero-title {
+			font-size: clamp(2rem, 9vw, 3rem);
+		}
 
-    .hero-title {
-      font-size: clamp(2rem, 9vw, 3rem);
-    }
+		.stats-container {
+			gap: 2rem;
+		}
 
+		.stats-section {
+			margin-top: -0.5rem;
+			margin-bottom: 2rem;
+		}
 
-    .stats-container {
-      gap: 2rem;
-    }
+		.stat-number {
+			font-size: 1.5rem;
+		}
 
-    .stats-section {
-      margin-top: -0.5rem;
-      margin-bottom: 2rem;
-    }
+		.stat-label {
+			font-size: 0.7rem;
+		}
 
-    .stat-number {
-      font-size: 1.5rem;
-    }
+		.stat-divider {
+			height: 25px;
+		}
 
-    .stat-label {
-      font-size: 0.7rem;
-    }
+		.games-grid {
+			grid-template-columns: 1fr;
+			gap: 1.5rem;
+		}
 
-    .stat-divider {
-      height: 25px;
-    }
-
-    .games-grid {
-      grid-template-columns: 1fr;
-      gap: 1.5rem;
-    }
-
-    .square {
-      display: none;
-    }
-  }
+		.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');
+	// 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);
-  }
+	function changeWord() {
+		// Fade out
+		changingWord.classList.add('word-fade-out');
 
-  // Starte Animation nach 2 Sekunden, dann alle 3 Sekunden
-  setTimeout(() => {
-    changeWord();
-    setInterval(changeWord, 3000);
-  }, 2000);
+		setTimeout(() => {
+			// Wechsle zum nächsten Wort
+			currentWordIndex = (currentWordIndex + 1) % words.length;
+			changingWord.textContent = words[currentWordIndex];
 
-  // 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');
+			// Fade in
+			changingWord.classList.remove('word-fade-out');
+			changingWord.classList.add('word-fade-in');
 
-  // GameStorage class (simplified version for reading)
-  class GameStorage {
-    private dbName = 'ManaGamesDB';
-    private storeName = 'generatedGames';
-    private db: IDBDatabase | null = null;
+			setTimeout(() => {
+				changingWord.classList.remove('word-fade-in');
+			}, 300);
+		}, 300);
+	}
 
-    async init(): Promise<void> {
-      return new Promise((resolve, reject) => {
-        const request = indexedDB.open(this.dbName, 1);
+	// Starte Animation nach 2 Sekunden, dann alle 3 Sekunden
+	setTimeout(() => {
+		changeWord();
+		setInterval(changeWord, 3000);
+	}, 2000);
 
-        request.onerror = () => reject(request.error);
-        request.onsuccess = () => {
-          this.db = request.result;
-          resolve();
-        };
+	// 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');
 
-        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 });
-          }
-        };
-      });
-    }
+	// GameStorage class (simplified version for reading)
+	class GameStorage {
+		private dbName = 'ManaGamesDB';
+		private storeName = 'generatedGames';
+		private db: IDBDatabase | null = null;
 
-    async getAllGames(): Promise<any[]> {
-      if (!this.db) await this.init();
+		async init(): Promise<void> {
+			return new Promise((resolve, reject) => {
+				const request = indexedDB.open(this.dbName, 1);
 
-      return new Promise((resolve, reject) => {
-        const transaction = this.db!.transaction([this.storeName], 'readonly');
-        const store = transaction.objectStore(this.storeName);
-        const request = store.getAll();
+				request.onerror = () => reject(request.error);
+				request.onsuccess = () => {
+					this.db = request.result;
+					resolve();
+				};
 
-        request.onsuccess = () => resolve(request.result || []);
-        request.onerror = () => reject(request.error);
-      });
-    }
-  }
+				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 });
+					}
+				};
+			});
+		}
 
-  const gameStorage = new GameStorage();
+		async getAllGames(): Promise<any[]> {
+			if (!this.db) await this.init();
 
-  // Load and display my games
-  async function loadMyGames() {
-    try {
-      const myGames = await gameStorage.getAllGames();
-      
-      if (myGames.length === 0) {
-        myGamesGrid.innerHTML = `
+			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
@@ -656,23 +641,25 @@ const featuredGames = [...officialGames].slice(0, 8);
             </a>
           </div>
         `;
-        return;
-      }
+				return;
+			}
 
-      // Sort by creation date (newest first)
-      myGames.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+			// 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 `
+			// 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>`
-                }
+                ${
+									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>
@@ -685,20 +672,20 @@ const featuredGames = [...officialGames].slice(0, 8);
             </div>
           </div>
         `;
-      }).join('');
+				})
+				.join('');
 
-      myGamesGrid.innerHTML = gameCards;
+			myGamesGrid.innerHTML = gameCards;
+		} catch (error) {
+			console.error('Error loading my games:', error);
+			myGamesGrid.innerHTML = '<p style="color: #ef4444;">Fehler beim Laden der Spiele</p>';
+		}
+	}
 
-    } 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 = `
+	// 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
@@ -708,71 +695,71 @@ const featuredGames = [...officialGames].slice(0, 8);
         </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;
-    }
-  }
+	// Merge official and my games for "All" view
+	async function loadAllGames() {
+		const officialGamesHTML = officialGames.innerHTML;
+		const myGames = await gameStorage.getAllGames();
 
-  // 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;
-      }
-    });
-  });
+		// Clone official games
+		allGamesGrid.innerHTML = officialGamesHTML;
 
-  // 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();
-    }
-  });
+		// 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
index 53acaa29d..6deb86dd9 100644
--- a/games/mana-games/apps/web/src/pages/jugendschutz.astro
+++ b/games/mana-games/apps/web/src/pages/jugendschutz.astro
@@ -4,598 +4,598 @@ 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>
+	<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="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>Unsere Jugendschutz-Prinzipien</h2>
 
-    <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>
+			<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>
 
-    <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>
+				<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>
 
-    <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>
+				<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>
 
-    <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>
+				<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>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>Altersempfehlungen</h2>
 
-    <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="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="footer-actions">
-      <Button href="/" variant="ghost">Zurück zur Startseite</Button>
-      <Button href="/agb" variant="ghost">Nutzungsbedingungen</Button>
-    </div>
-  </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-container {
+		max-width: 900px;
+		margin: 0 auto;
+		padding: 2rem 0;
+	}
 
-  .jugendschutz-header {
-    text-align: center;
-    margin-bottom: 3rem;
-  }
+	.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;
-  }
+	.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); }
-  }
+	@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;
-  }
+	.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);
-  }
+	.subtitle {
+		font-size: 1.2rem;
+		color: var(--color-text-secondary);
+	}
 
-  .intro-section {
-    margin-bottom: 3rem;
-  }
+	.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 {
+		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;
-  }
+	.intro-card p {
+		font-size: 1.1rem;
+		line-height: 1.8;
+		color: var(--color-text);
+		margin: 0;
+	}
 
-  .content-section {
-    margin-bottom: 4rem;
-  }
+	.content-section {
+		margin-bottom: 4rem;
+	}
 
-  .content-section h2 {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 2rem;
-    color: var(--color-text);
-  }
+	.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 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 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;
-  }
+	.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;
-  }
+	.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 {
+		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);
-  }
+	.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;
-  }
+	.card-icon {
+		font-size: 3rem;
+		margin-bottom: 1rem;
+	}
 
-  .age-recommendations {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 2rem;
-  }
+	.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-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-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 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 {
+		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);
-  }
+	.age-group li::before {
+		content: '•';
+		position: absolute;
+		left: 0;
+		color: var(--color-accent);
+	}
 
-  .parent-tips {
-    display: grid;
-    gap: 2rem;
-  }
+	.parent-tips {
+		display: grid;
+		gap: 2rem;
+	}
 
-  .tip-card {
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
-    border-radius: 1rem;
-    padding: 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-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);
-  }
+	.time-item {
+		padding: 0.5rem 0;
+		color: var(--color-text-secondary);
+	}
 
-  .complexity-list {
-    list-style: none;
-    padding: 0;
-    margin-top: 1rem;
-  }
+	.complexity-list {
+		list-style: none;
+		padding: 0;
+		margin-top: 1rem;
+	}
 
-  .complexity-list li {
-    padding: 0.5rem 0;
-    display: flex;
-    align-items: center;
-    gap: 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 {
+		padding: 0.25rem 0.75rem;
+		border-radius: 1rem;
+		font-size: 0.85rem;
+		font-weight: 600;
+	}
 
-  .badge.minimal {
-    background: #4ade80;
-    color: #000;
-  }
+	.badge.minimal {
+		background: #4ade80;
+		color: #000;
+	}
 
-  .badge.einfach {
-    background: #22d3ee;
-    color: #000;
-  }
+	.badge.einfach {
+		background: #22d3ee;
+		color: #000;
+	}
 
-  .badge.mittel {
-    background: #fbbf24;
-    color: #000;
-  }
+	.badge.mittel {
+		background: #fbbf24;
+		color: #000;
+	}
 
-  .badge.komplex {
-    background: #f87171;
-    color: #000;
-  }
+	.badge.komplex {
+		background: #f87171;
+		color: #000;
+	}
 
-  .ai-safety {
-    display: grid;
-    gap: 2rem;
-  }
+	.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 {
+		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 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 {
+		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);
-  }
+	.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;
-  }
+	.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;
-  }
+	.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 {
+		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;
-  }
+	.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-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;
-  }
+	.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 {
+		list-style: none;
+		padding: 0;
+		margin-top: 1rem;
+	}
 
-  .resource-list li {
-    padding: 0.75rem 0;
-  }
+	.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 {
+		color: var(--color-accent);
+		text-decoration: none;
+		transition: opacity 0.2s ease;
+	}
 
-  .resource-list a:hover {
-    opacity: 0.8;
-    text-decoration: underline;
-  }
+	.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;
-  }
+	.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;
-    }
+	@media (max-width: 768px) {
+		.jugendschutz-header h1 {
+			font-size: 2rem;
+		}
 
-    .content-section h2 {
-      font-size: 1.5rem;
-    }
+		.content-section h2 {
+			font-size: 1.5rem;
+		}
 
-    .principles-grid {
-      grid-template-columns: 1fr;
-    }
+		.principles-grid {
+			grid-template-columns: 1fr;
+		}
 
-    .age-recommendations {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>
\ No newline at end of file
+		.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
index 4c6a5bec8..37005f562 100644
--- a/games/mana-games/apps/web/src/pages/mitmachen.astro
+++ b/games/mana-games/apps/web/src/pages/mitmachen.astro
@@ -4,633 +4,641 @@ 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-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>
+	<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>
+		<!-- 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-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-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-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>
+				<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>
 
-    <!-- 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>
+				<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>
 
-    <!-- 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>
+		<!-- 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>
 
-    <!-- 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>
+		<!-- 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>
 
-    <!-- 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>
+		<!-- 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 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;
-  }
+	.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;
-  }
+	.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-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-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;
-  }
+	.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); }
-  }
+	@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-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;
-  }
+	.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-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;
-  }
+	.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;
-  }
+	.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);
-    }
-  }
+	@keyframes fadeInUp {
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  /* Container */
-  .mitmachen-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
+	/* 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;
-  }
+	/* 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-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;
-  }
+	.section-number {
+		font-size: 3rem;
+		font-weight: 900;
+		color: var(--color-accent);
+		opacity: 0.3;
+	}
 
-  h2 {
-    font-size: 2.5rem;
-    font-weight: 900;
-  }
+	h2 {
+		font-size: 2.5rem;
+		font-weight: 900;
+	}
 
-  /* Intro Section */
-  .intro-section {
-    text-align: center;
-    margin-bottom: 4rem;
-  }
+	/* 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;
-  }
+	.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 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;
-  }
+	.contribute-row {
+		display: grid;
+		grid-template-columns: 1fr 2fr;
+		gap: 3rem;
+		align-items: center;
+	}
 
-  .row-right {
-    grid-template-columns: 2fr 1fr;
-  }
+	.row-right {
+		grid-template-columns: 2fr 1fr;
+	}
 
-  .contribute-visual {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+	.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;
-  }
+	.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); }
-  }
+	@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 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;
-  }
+	.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 {
+		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 {
+		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);
-  }
+	.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;
-  }
+	/* 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 {
+		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-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-icon {
+		font-size: 3rem;
+		margin-bottom: 1rem;
+	}
 
-  .benefit-card h4 {
-    color: var(--color-text);
-    margin-bottom: 0.5rem;
-  }
+	.benefit-card h4 {
+		color: var(--color-text);
+		margin-bottom: 0.5rem;
+	}
 
-  .benefit-card p {
-    color: var(--color-text-secondary);
-    font-size: 0.9rem;
-  }
+	.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 Section */
+	.guidelines-section {
+		background: var(--color-bg-secondary);
+		border-radius: 2rem;
+		padding: 3rem;
+		margin: 4rem 0;
+	}
 
-  .guidelines-content {
-    display: grid;
-    gap: 2rem;
-  }
+	.guidelines-content {
+		display: grid;
+		gap: 2rem;
+	}
 
-  .guideline {
-    display: flex;
-    gap: 1.5rem;
-    align-items: start;
-  }
+	.guideline {
+		display: flex;
+		gap: 1.5rem;
+		align-items: start;
+	}
 
-  .guideline-icon {
-    font-size: 2rem;
-    flex-shrink: 0;
-  }
+	.guideline-icon {
+		font-size: 2rem;
+		flex-shrink: 0;
+	}
 
-  .guideline strong {
-    display: block;
-    color: var(--color-text);
-    margin-bottom: 0.25rem;
-  }
+	.guideline strong {
+		display: block;
+		color: var(--color-text);
+		margin-bottom: 0.25rem;
+	}
 
-  .guideline p {
-    color: var(--color-text-secondary);
-  }
+	.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 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-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-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 {
+		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: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 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;
-  }
+	.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 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 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-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;
-  }
+	.cta-buttons {
+		display: flex;
+		gap: 1rem;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
 
-  /* Responsive */
-  @media (max-width: 768px) {
-    .hero-title {
-      font-size: 3rem;
-    }
+	/* Responsive */
+	@media (max-width: 768px) {
+		.hero-title {
+			font-size: 3rem;
+		}
 
-    .hero-subtitle {
-      font-size: 1.2rem;
-    }
+		.hero-subtitle {
+			font-size: 1.2rem;
+		}
 
-    section {
-      margin-bottom: 4rem;
-    }
+		section {
+			margin-bottom: 4rem;
+		}
 
-    .section-header {
-      flex-direction: column;
-      text-align: center;
-    }
+		.section-header {
+			flex-direction: column;
+			text-align: center;
+		}
 
-    h2 {
-      font-size: 2rem;
-    }
+		h2 {
+			font-size: 2rem;
+		}
 
-    .contribute-row {
-      grid-template-columns: 1fr;
-      text-align: center;
-    }
+		.contribute-row {
+			grid-template-columns: 1fr;
+			text-align: center;
+		}
 
-    .row-right {
-      grid-template-columns: 1fr;
-    }
+		.row-right {
+			grid-template-columns: 1fr;
+		}
 
-    .contribute-visual {
-      order: -1;
-    }
+		.contribute-visual {
+			order: -1;
+		}
 
-    .icon-box {
-      width: 120px;
-      height: 120px;
-      font-size: 3rem;
-    }
+		.icon-box {
+			width: 120px;
+			height: 120px;
+			font-size: 3rem;
+		}
 
-    .guidelines-section {
-      padding: 2rem;
-    }
+		.guidelines-section {
+			padding: 2rem;
+		}
 
-    .cta-section {
-      padding: 2rem;
-    }
-  }
-</style>
\ No newline at end of file
+		.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
index 0a2ffe8a9..bc05d5e29 100644
--- a/games/mana-games/apps/web/src/pages/play-generated.astro
+++ b/games/mana-games/apps/web/src/pages/play-generated.astro
@@ -3,399 +3,395 @@ 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>
+	<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');
+	// Get game ID from URL parameters
+	const urlParams = new URLSearchParams(window.location.search);
+	const gameId = urlParams.get('id');
 
-  if (!gameId) {
-    window.location.href = '/';
-  }
+	if (!gameId) {
+		window.location.href = '/';
+	}
 
-  // Game Storage
-  class GameStorage {
-    constructor() {
-      this.dbName = 'ManaGamesDB';
-      this.storeName = 'generatedGames';
-      this.db = null;
-    }
+	// 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);
+		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.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 });
-          }
-        };
-      });
-    }
+				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();
+		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);
+			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);
-      });
-    }
+				request.onsuccess = () => resolve(request.result || null);
+				request.onerror = () => reject(request.error);
+			});
+		}
 
-    async deleteGame(id) {
-      if (!this.db) await this.init();
+		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);
+			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);
-      });
-    }
-  }
+				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');
+	// 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;
-      }
+	// Load game
+	async function loadGame() {
+		try {
+			const game = await gameStorage.getGame(gameId);
 
-      // 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}`;
+			if (!game) {
+				showError();
+				return;
+			}
 
-      // Display game
-      const blob = new Blob([game.html], { type: 'text/html' });
-      const url = URL.createObjectURL(blob);
-      gameFrame.src = url;
+			// Update UI
+			document.title = `${game.title} - ManaGames`;
+			gameTitle.textContent = game.title;
+			gameDescription.textContent = game.description || game.prompt;
 
-      gameFrame.addEventListener('load', () => {
-        URL.revokeObjectURL(url);
-        hideLoading();
-      }, { once: true });
+			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}`;
 
-    } catch (error) {
-      console.error('Error loading game:', error);
-      showError();
-    }
-  }
+			// Display game
+			const blob = new Blob([game.html], { type: 'text/html' });
+			const url = URL.createObjectURL(blob);
+			gameFrame.src = url;
 
-  function hideLoading() {
-    loadingState.classList.add('hidden');
-    gameFrame.classList.remove('hidden');
-  }
+			gameFrame.addEventListener(
+				'load',
+				() => {
+					URL.revokeObjectURL(url);
+					hideLoading();
+				},
+				{ once: true }
+			);
+		} catch (error) {
+			console.error('Error loading game:', error);
+			showError();
+		}
+	}
 
-  function showError() {
-    loadingState.classList.add('hidden');
-    errorState.classList.remove('hidden');
-  }
+	function hideLoading() {
+		loadingState.classList.add('hidden');
+		gameFrame.classList.remove('hidden');
+	}
 
-  // Event handlers
-  backBtn.addEventListener('click', () => {
-    window.history.back();
-  });
+	function showError() {
+		loadingState.classList.add('hidden');
+		errorState.classList.remove('hidden');
+	}
 
-  editBtn.addEventListener('click', () => {
-    // Store game ID in sessionStorage for the create page to load
-    sessionStorage.setItem('editGameId', gameId);
-    window.location.href = '/create';
-  });
+	// Event handlers
+	backBtn.addEventListener('click', () => {
+		window.history.back();
+	});
 
-  fullscreenBtn.addEventListener('click', () => {
-    if (gameFrame.requestFullscreen) {
-      gameFrame.requestFullscreen();
-    }
-  });
+	editBtn.addEventListener('click', () => {
+		// Store game ID in sessionStorage for the create page to load
+		sessionStorage.setItem('editGameId', gameId);
+		window.location.href = '/create';
+	});
 
-  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');
-      }
-    }
-  });
+	fullscreenBtn.addEventListener('click', () => {
+		if (gameFrame.requestFullscreen) {
+			gameFrame.requestFullscreen();
+		}
+	});
 
-  // Load game on page load
-  loadGame();
+	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-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;
-  }
+	.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 {
+		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);
-  }
+	.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;
-  }
+	#gameTitle {
+		font-size: 1.5rem;
+		font-weight: 700;
+		color: var(--color-text);
+		margin: 0;
+	}
 
-  .game-actions {
-    display: flex;
-    gap: 0.5rem;
-  }
+	.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 {
+		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: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 {
+		color: #ef4444;
+		border-color: rgba(239, 68, 68, 0.3);
+	}
 
-  .action-btn.danger:hover {
-    background: rgba(239, 68, 68, 0.1);
-    border-color: #ef4444;
-  }
+	.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-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;
-  }
+	.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);
-  }
+	.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;
-  }
+	.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); }
-  }
+	@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;
-  }
+	.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;
-  }
+	.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 {
+		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);
-  }
+	.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-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-description {
+		color: var(--color-text);
+		margin: 0 0 0.5rem 0;
+	}
 
-  .game-date {
-    color: var(--color-text-secondary);
-    font-size: 0.875rem;
-    margin: 0;
-  }
+	.game-date {
+		color: var(--color-text-secondary);
+		font-size: 0.875rem;
+		margin: 0;
+	}
 
-  .hidden {
-    display: none !important;
-  }
+	.hidden {
+		display: none !important;
+	}
 
-  @media (max-width: 768px) {
-    .game-container {
-      padding: 0.5rem;
-    }
+	@media (max-width: 768px) {
+		.game-container {
+			padding: 0.5rem;
+		}
 
-    .game-header {
-      flex-direction: column;
-      gap: 1rem;
-      text-align: center;
-    }
+		.game-header {
+			flex-direction: column;
+			gap: 1rem;
+			text-align: center;
+		}
 
-    .game-actions {
-      width: 100%;
-      justify-content: center;
-    }
+		.game-actions {
+			width: 100%;
+			justify-content: center;
+		}
 
-    #gameTitle {
-      font-size: 1.25rem;
-    }
-  }
-</style>
\ No newline at end of file
+		#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
index c9df136ce..5a1879fc9 100644
--- a/games/mana-games/apps/web/src/pages/stats.astro
+++ b/games/mana-games/apps/web/src/pages/stats.astro
@@ -4,90 +4,89 @@ 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>
+	<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);
+	// 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 {};
+			}
+		},
 
-      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 = `
+		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>
@@ -105,7 +104,9 @@ import { games } from '../data/games';
           </div>
         </div>
         
-        ${favoriteGame ? `
+        ${
+					favoriteGame
+						? `
           <div class="stat-card favorite">
             <div class="stat-icon">❤️</div>
             <div class="stat-content">
@@ -113,7 +114,9 @@ import { games } from '../data/games';
               <div class="stat-label">Lieblingsspiel</div>
             </div>
           </div>
-        ` : ''}
+        `
+						: ''
+				}
         
         <div class="stat-card games-tried">
           <div class="stat-icon">📊</div>
@@ -124,9 +127,9 @@ import { games } from '../data/games';
         </div>
       </section>
     `;
-    
-    if (statsArray.length > 0) {
-      html += `
+
+			if (statsArray.length > 0) {
+				html += `
         <section class="games-stats">
           <h2>Spieleübersicht</h2>
           
@@ -191,14 +194,14 @@ import { games } from '../data/games';
               </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 += `
+
+				// 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">
@@ -219,11 +222,15 @@ import { games } from '../data/games';
                 <span class="date-value">${statsService.getRelativeTime(stat.lastPlayed)}</span>
               </td>
               <td class="td-achievements">
-                ${stat.achievements && stat.achievements.length > 0 ? `
+                ${
+									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 => `
+                      ${stat.achievements
+												.map(
+													(achievement) => `
                         <div class="tooltip-achievement">
                           <span class="tooltip-icon">🏅</span>
                           <div>
@@ -231,10 +238,14 @@ import { games } from '../data/games';
                             <div class="tooltip-desc">${achievement.description}</div>
                           </div>
                         </div>
-                      `).join('')}
+                      `
+												)
+												.join('')}
                     </div>
                   </div>
-                ` : '<span class="no-achievements">-</span>'}
+                `
+										: '<span class="no-achievements">-</span>'
+								}
               </td>
               <td class="td-action">
                 <a href="/games/${gameId}" class="play-btn-small">
@@ -243,10 +254,10 @@ import { games } from '../data/games';
               </td>
             </tr>
           `;
-        }
-      });
-      
-      html += `
+					}
+				});
+
+				html += `
               </tbody>
             </table>
           </div>
@@ -254,12 +265,12 @@ import { games } from '../data/games';
           <!-- 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 += `
+
+				// 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" />` : ''}
@@ -288,1187 +299,1217 @@ import { games } from '../data/games';
                 </div>
               </div>
               
-              ${stat.achievements && stat.achievements.length > 0 ? `
+              ${
+								stat.achievements && stat.achievements.length > 0
+									? `
                 <div class="achievements-section">
                   <h4>Achievements (${stat.achievements.length})</h4>
                   <div class="achievement-badges">
-                    ${stat.achievements.map(achievement => `
+                    ${stat.achievements
+											.map(
+												(achievement) => `
                       <div class="achievement-badge" title="${achievement.description}">
                         🏅 ${achievement.name}
                       </div>
-                    `).join('')}
+                    `
+											)
+											.join('')}
                   </div>
                 </div>
-              ` : ''}
+              `
+									: ''
+							}
               
               <a href="/games/${gameId}" class="play-again-btn">
                 Nochmal spielen →
               </a>
             </div>
           `;
-        }
-      });
-      
-      html += `
+					}
+				});
+
+				html += `
           </div>
         </section>
       `;
-    } else {
-      html += `
+			} 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
-  });
+			}
+
+			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>
\ No newline at end of file
+	.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
index 35bcc2c5f..ac928afa2 100644
--- a/games/mana-games/apps/web/src/pages/submit.astro
+++ b/games/mana-games/apps/web/src/pages/submit.astro
@@ -2,743 +2,753 @@
 import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout 
-  title="Spiel einreichen - MANA Games" 
-  description="Reiche dein eigenes Spiel für die MANA Games Community ein"
+<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>
+	<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>
+		<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>
+			<form id="submitForm" class="submit-form">
+				<div class="form-section">
+					<h3>Spiel-Informationen</h3>
 
-          <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="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="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-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-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="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-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-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="gameTags">Tags (kommagetrennt) *</label>
-            <input 
-              type="text" 
-              id="gameTags" 
-              name="gameTags" 
-              required
-              placeholder="z.B. Arcade, Shooter, Retro"
-            />
-          </div>
-        </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-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"></code></pre>
-            </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-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>Dateien hochladen</h3>
 
-        <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="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="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="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-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">
+					<h3>Deine Informationen</h3>
 
-        <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-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-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 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 id="validationResults" class="validation-results" style="display: none;">
-        <h3>Validierungsergebnisse</h3>
-        <div class="validation-content"></div>
-      </div>
-    </div>
-  </main>
+					<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;
-  }
+	.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 {
+		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 h2 {
+		color: #00ff88;
+		margin-bottom: 1rem;
+		font-size: 1.2rem;
+	}
 
-  .guidelines ul {
-    list-style: none;
-    padding: 0;
-  }
+	.guidelines ul {
+		list-style: none;
+		padding: 0;
+	}
 
-  .guidelines li {
-    padding: 0.5rem 0;
-    padding-left: 1.5rem;
-    position: relative;
-  }
+	.guidelines li {
+		padding: 0.5rem 0;
+		padding-left: 1.5rem;
+		position: relative;
+	}
 
-  .guidelines li::before {
-    content: "✓";
-    position: absolute;
-    left: 0;
-    color: #00ff88;
-  }
+	.guidelines li::before {
+		content: '✓';
+		position: absolute;
+		left: 0;
+		color: #00ff88;
+	}
 
-  .submit-form {
-    background: #1a1a1a;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    padding: 2rem;
-  }
+	.submit-form {
+		background: #1a1a1a;
+		border: 1px solid #2a2a2a;
+		border-radius: 8px;
+		padding: 2rem;
+	}
 
-  .form-section {
-    margin-bottom: 2rem;
-  }
+	.form-section {
+		margin-bottom: 2rem;
+	}
 
-  .form-section:last-child {
-    margin-bottom: 0;
-  }
+	.form-section:last-child {
+		margin-bottom: 0;
+	}
 
-  .form-section h3 {
-    color: #00ff88;
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-  }
+	.form-section h3 {
+		color: #00ff88;
+		margin-bottom: 1rem;
+		font-size: 1.1rem;
+	}
 
-  .form-group {
-    margin-bottom: 1.5rem;
-  }
+	.form-group {
+		margin-bottom: 1.5rem;
+	}
 
-  .form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: #ffffff;
-    font-weight: 500;
-  }
+	.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[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-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;
-  }
+	.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 {
+		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: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-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-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
 
-  .file-name {
-    font-weight: 500;
-  }
+	.file-name {
+		font-weight: 500;
+	}
 
-  .file-size {
-    font-size: 0.9rem;
-    color: #888;
-  }
+	.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,
+	.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 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;
-  }
+	.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;
-  }
+	.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 {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
 
-  .checkbox-group input[type="checkbox"] {
-    margin-top: 0.25rem;
-  }
+	.checkbox-group input[type='checkbox'] {
+		margin-top: 0.25rem;
+	}
 
-  .form-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: flex-end;
-    margin-top: 2rem;
-  }
+	.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,
+	.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 {
+		background: #00ff88;
+		color: #0a0a0a;
+	}
 
-  .btn-primary:hover:not(:disabled) {
-    background: #00cc6a;
-    transform: translateY(-2px);
-  }
+	.btn-primary:hover:not(:disabled) {
+		background: #00cc6a;
+		transform: translateY(-2px);
+	}
 
-  .btn-primary:disabled {
-    background: #2a2a2a;
-    color: #666;
-    cursor: not-allowed;
-  }
+	.btn-primary:disabled {
+		background: #2a2a2a;
+		color: #666;
+		cursor: not-allowed;
+	}
 
-  .btn-secondary {
-    background: #2a2a2a;
-    color: #ffffff;
-  }
+	.btn-secondary {
+		background: #2a2a2a;
+		color: #ffffff;
+	}
 
-  .btn-secondary:hover {
-    background: #3a3a3a;
-  }
+	.btn-secondary:hover {
+		background: #3a3a3a;
+	}
 
-  .validation-results {
-    margin-top: 2rem;
-    background: #1a1a1a;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    padding: 1.5rem;
-  }
+	.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-results h3 {
+		color: #00ff88;
+		margin-bottom: 1rem;
+	}
 
-  .validation-item {
-    padding: 0.5rem 0;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
+	.validation-item {
+		padding: 0.5rem 0;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
 
-  .validation-item.success {
-    color: #00ff88;
-  }
+	.validation-item.success {
+		color: #00ff88;
+	}
 
-  .validation-item.error {
-    color: #ff4444;
-  }
+	.validation-item.error {
+		color: #ff4444;
+	}
 
-  .validation-item.warning {
-    color: #ffaa00;
-  }
+	.validation-item.warning {
+		color: #ffaa00;
+	}
 
-  @media (max-width: 768px) {
-    .submit-container {
-      padding: 1rem;
-    }
+	@media (max-width: 768px) {
+		.submit-container {
+			padding: 1rem;
+		}
 
-    .form-row {
-      grid-template-columns: 1fr;
-    }
+		.form-row {
+			grid-template-columns: 1fr;
+		}
 
-    .form-actions {
-      flex-direction: column;
-    }
+		.form-actions {
+			flex-direction: column;
+		}
 
-    .btn-primary,
-    .btn-secondary {
-      width: 100%;
-      justify-content: center;
-    }
-  }
+		.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;
+	// 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;
+	// 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;
+	// 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;
+	// 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');
+		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`;
+		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';
+		// 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';
-  });
+		// 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;
+	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');
+		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`;
+		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);
+		// 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';
-  });
+		// 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];
+	// 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;
-    }
+		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';
+		validationContent.innerHTML = '<div class="validation-item">🔄 Validierung läuft...</div>';
+		validationResults.style.display = 'block';
 
-    const results: Array<{type: 'success' | 'error' | 'warning', message: string}> = [];
+		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'});
-    }
+		// 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'});
-    }
+		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'});
-    }
+		// HTML content checks
+		const htmlContent = await htmlFile.text();
 
-    // 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 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 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 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 potentially malicious code
-    const suspiciousPatterns = [
-      'eval(',
-      'document.write(',
-      'innerHTML =',
-      '.cookie',
-      'localStorage.clear()',
-      'XMLHttpRequest',
-      'fetch('
-    ];
+		// 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' });
+		}
 
-    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'});
-    }
+		// Check for potentially malicious code
+		const suspiciousPatterns = [
+			'eval(',
+			'document.write(',
+			'innerHTML =',
+			'.cookie',
+			'localStorage.clear()',
+			'XMLHttpRequest',
+			'fetch(',
+		];
 
-    // 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('');
+		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' });
+		}
 
-    // Check if validation passed
-    const hasErrors = results.some(r => r.type === 'error');
-    validationPassed = !hasErrors;
-    isValidated = true;
-    submitBtn.disabled = !validationPassed;
+		// 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('');
 
-    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>';
-    }
-  });
+		// Check if validation passed
+		const hasErrors = results.some((r) => r.type === 'error');
+		validationPassed = !hasErrors;
+		isValidated = true;
+		submitBtn.disabled = !validationPassed;
 
-  // Form submission
-  form.addEventListener('submit', async (e) => {
-    e.preventDefault();
+		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>';
+		}
+	});
 
-    if (!isValidated || !validationPassed) {
-      alert('Bitte validiere dein Spiel zuerst!');
-      return;
-    }
+	// Form submission
+	form.addEventListener('submit', async (e) => {
+		e.preventDefault();
 
-    submitBtn.disabled = true;
-    submitBtn.innerHTML = '<span class="icon">⏳</span> Wird eingereicht...';
+		if (!isValidated || !validationPassed) {
+			alert('Bitte validiere dein Spiel zuerst!');
+			return;
+		}
 
-    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');
-      }
+		submitBtn.disabled = true;
+		submitBtn.innerHTML = '<span class="icon">⏳</span> Wird eingereicht...';
 
-      // 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);
-      });
+		try {
+			// Prepare form data
+			const formData = new FormData(form);
 
-      // 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()
-      };
+			// Add files
+			const htmlFile = htmlFileInput.files?.[0];
+			const screenshotFile = screenshotFileInput.files?.[0];
 
-      // 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 (!htmlFile || !screenshotFile) {
+				throw new Error('Dateien fehlen');
+			}
 
-      if (!response.ok) {
-        throw new Error('Einreichung fehlgeschlagen');
-      }
+			// 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);
+			});
 
-      const result = await response.json();
+			// 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(),
+			};
 
-      // 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;
+			// 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),
+			});
 
-    } 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>
\ No newline at end of file
+			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/scripts/game-communication.ts b/games/mana-games/apps/web/src/scripts/game-communication.ts
index 6a0e893e6..7140205fa 100644
--- a/games/mana-games/apps/web/src/scripts/game-communication.ts
+++ b/games/mana-games/apps/web/src/scripts/game-communication.ts
@@ -1,71 +1,71 @@
 import { statsService } from '../services/statsService';
 
 export interface GameMessage {
-  type: 'GAME_EVENT' | 'GAME_LOADED' | 'GAME_ENDED';
-  gameId: string;
-  event?: string;
-  data?: any;
+	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);
-    }
-  });
+	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;
-  }
-}
\ No newline at end of file
+	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
index 5e2d55e07..a71d33cf9 100644
--- a/games/mana-games/apps/web/src/scripts/stats-integration-template.js
+++ b/games/mana-games/apps/web/src/scripts/stats-integration-template.js
@@ -6,57 +6,72 @@ const GAME_ID = 'dein-spiel-slug';
 
 // 2. Beim Spielstart senden
 window.addEventListener('load', () => {
-    window.parent.postMessage({
-        type: 'GAME_LOADED',
-        gameId: GAME_ID
-    }, '*');
+	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 }
-    }, '*');
+	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!'
-                }
-            }
-        }, '*');
-    }
+	// 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
-    }, '*');
-});
\ No newline at end of file
+	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
index a0a677e20..f51431a6a 100644
--- a/games/mana-games/apps/web/src/services/statsService.ts
+++ b/games/mana-games/apps/web/src/services/statsService.ts
@@ -1,192 +1,192 @@
 export interface GameStats {
-  gameId: string;
-  highScore: number;
-  lastScore: number;
-  gamesPlayed: number;
-  totalPlayTime: number;
-  lastPlayed: string;
-  achievements?: Achievement[];
+	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;
+	id: string;
+	name: string;
+	description: string;
+	unlockedAt?: string;
 }
 
 export interface GlobalStats {
-  totalGamesPlayed: number;
-  totalPlayTime: number;
-  favoriteGame?: string;
-  lastPlayedGame?: string;
-  gamesWithStats: number;
+	totalGamesPlayed: number;
+	totalPlayTime: number;
+	favoriteGame?: string;
+	lastPlayedGame?: string;
+	gamesWithStats: number;
 }
 
 class StatsService {
-  private readonly STATS_KEY = 'mana-games-stats';
+	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 getStoredStats(): Record<string, GameStats> {
+		if (typeof window === 'undefined') 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);
-    }
-  }
+		try {
+			const stored = localStorage.getItem(this.STATS_KEY);
+			return stored ? JSON.parse(stored) : {};
+		} catch (error) {
+			console.error('Error reading stats:', error);
+			return {};
+		}
+	}
 
-  getStats(gameId: string): GameStats | null {
-    const allStats = this.getStoredStats();
-    return allStats[gameId] || null;
-  }
+	private saveStats(stats: Record<string, GameStats>): void {
+		if (typeof window === 'undefined') return;
 
-  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: []
-    };
+		try {
+			localStorage.setItem(this.STATS_KEY, JSON.stringify(stats));
+		} catch (error) {
+			console.error('Error saving stats:', error);
+		}
+	}
 
-    allStats[gameId] = {
-      ...currentStats,
-      ...update,
-      gameId,
-      lastPlayed: new Date().toISOString()
-    };
+	getStats(gameId: string): GameStats | null {
+		const allStats = this.getStoredStats();
+		return allStats[gameId] || null;
+	}
 
-    if (update.lastScore && update.lastScore > currentStats.highScore) {
-      allStats[gameId].highScore = update.lastScore;
-    }
+	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: [],
+		};
 
-    this.saveStats(allStats);
-  }
+		allStats[gameId] = {
+			...currentStats,
+			...update,
+			gameId,
+			lastPlayed: new Date().toISOString(),
+		};
 
-  getAllStats(): Record<string, GameStats> {
-    return this.getStoredStats();
-  }
+		if (update.lastScore && update.lastScore > currentStats.highScore) {
+			allStats[gameId].highScore = update.lastScore;
+		}
 
-  getGlobalStats(): GlobalStats {
-    const allStats = this.getStoredStats();
-    const statsArray = Object.values(allStats);
+		this.saveStats(allStats);
+	}
 
-    if (statsArray.length === 0) {
-      return {
-        totalGamesPlayed: 0,
-        totalPlayTime: 0,
-        gamesWithStats: 0
-      };
-    }
+	getAllStats(): Record<string, GameStats> {
+		return this.getStoredStats();
+	}
 
-    const totalGamesPlayed = statsArray.reduce((sum, stat) => sum + stat.gamesPlayed, 0);
-    const totalPlayTime = statsArray.reduce((sum, stat) => sum + stat.totalPlayTime, 0);
+	getGlobalStats(): GlobalStats {
+		const allStats = this.getStoredStats();
+		const statsArray = Object.values(allStats);
 
-    const favoriteGame = statsArray.reduce((fav, stat) => 
-      (!fav || stat.gamesPlayed > fav.gamesPlayed) ? stat : fav
-    ).gameId;
+		if (statsArray.length === 0) {
+			return {
+				totalGamesPlayed: 0,
+				totalPlayTime: 0,
+				gamesWithStats: 0,
+			};
+		}
 
-    const lastPlayedGame = statsArray.reduce((last, stat) => 
-      (!last || new Date(stat.lastPlayed) > new Date(last.lastPlayed)) ? stat : last
-    ).gameId;
+		const totalGamesPlayed = statsArray.reduce((sum, stat) => sum + stat.gamesPlayed, 0);
+		const totalPlayTime = statsArray.reduce((sum, stat) => sum + stat.totalPlayTime, 0);
 
-    return {
-      totalGamesPlayed,
-      totalPlayTime,
-      favoriteGame,
-      lastPlayedGame,
-      gamesWithStats: statsArray.length
-    };
-  }
+		const favoriteGame = statsArray.reduce((fav, stat) =>
+			!fav || stat.gamesPlayed > fav.gamesPlayed ? stat : fav
+		).gameId;
 
-  incrementGamesPlayed(gameId: string): void {
-    const stats = this.getStats(gameId) || {
-      gameId,
-      highScore: 0,
-      lastScore: 0,
-      gamesPlayed: 0,
-      totalPlayTime: 0,
-      lastPlayed: new Date().toISOString()
-    };
+		const lastPlayedGame = statsArray.reduce((last, stat) =>
+			!last || new Date(stat.lastPlayed) > new Date(last.lastPlayed) ? stat : last
+		).gameId;
 
-    this.updateStats(gameId, {
-      gamesPlayed: stats.gamesPlayed + 1
-    });
-  }
+		return {
+			totalGamesPlayed,
+			totalPlayTime,
+			favoriteGame,
+			lastPlayedGame,
+			gamesWithStats: statsArray.length,
+		};
+	}
 
-  addPlayTime(gameId: string, seconds: number): void {
-    const stats = this.getStats(gameId) || {
-      gameId,
-      highScore: 0,
-      lastScore: 0,
-      gamesPlayed: 0,
-      totalPlayTime: 0,
-      lastPlayed: new Date().toISOString()
-    };
+	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, {
-      totalPlayTime: stats.totalPlayTime + seconds
-    });
-  }
+		this.updateStats(gameId, {
+			gamesPlayed: stats.gamesPlayed + 1,
+		});
+	}
 
-  unlockAchievement(gameId: string, achievement: Achievement): void {
-    const stats = this.getStats(gameId);
-    if (!stats) return;
+	addPlayTime(gameId: string, seconds: number): void {
+		const stats = this.getStats(gameId) || {
+			gameId,
+			highScore: 0,
+			lastScore: 0,
+			gamesPlayed: 0,
+			totalPlayTime: 0,
+			lastPlayed: new Date().toISOString(),
+		};
 
-    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, {
+			totalPlayTime: stats.totalPlayTime + seconds,
+		});
+	}
 
-      this.updateStats(gameId, { achievements });
-    }
-  }
+	unlockAchievement(gameId: string, achievement: Achievement): void {
+		const stats = this.getStats(gameId);
+		if (!stats) return;
 
-  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`;
-  }
+		const achievements = stats.achievements || [];
+		const exists = achievements.find((a) => a.id === achievement.id);
 
-  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 (!exists) {
+			achievements.push({
+				...achievement,
+				unlockedAt: new Date().toISOString(),
+			});
 
-    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');
-  }
+			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();
\ No newline at end of file
+export const statsService = new StatsService();
diff --git a/games/mana-games/apps/web/tsconfig.json b/games/mana-games/apps/web/tsconfig.json
index 8bf91d3bb..a9210e68f 100644
--- a/games/mana-games/apps/web/tsconfig.json
+++ b/games/mana-games/apps/web/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
+	"extends": "astro/tsconfigs/strict",
+	"include": [".astro/types.d.ts", "**/*"],
+	"exclude": ["dist"]
 }
diff --git a/games/mana-games/package.json b/games/mana-games/package.json
index 07c5ec9d3..6f7d57760 100644
--- a/games/mana-games/package.json
+++ b/games/mana-games/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "mana-games",
-  "version": "1.0.0",
-  "private": true,
-  "description": "AI-powered browser games platform",
-  "scripts": {
-    "dev": "turbo run dev",
-    "build": "turbo run build"
-  }
+	"name": "mana-games",
+	"version": "1.0.0",
+	"private": true,
+	"description": "AI-powered browser games platform",
+	"scripts": {
+		"dev": "turbo run dev",
+		"build": "turbo run build"
+	}
 }
diff --git a/packages/mana-core-nestjs-integration/src/guards/optional-auth.guard.ts b/packages/mana-core-nestjs-integration/src/guards/optional-auth.guard.ts
index 11506a522..ee5ba7442 100644
--- a/packages/mana-core-nestjs-integration/src/guards/optional-auth.guard.ts
+++ b/packages/mana-core-nestjs-integration/src/guards/optional-auth.guard.ts
@@ -1,10 +1,4 @@
-import {
-	Injectable,
-	CanActivate,
-	ExecutionContext,
-	Inject,
-	Optional,
-} from '@nestjs/common';
+import { Injectable, CanActivate, ExecutionContext, Inject, Optional } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { MANA_CORE_OPTIONS } from '../mana-core.module';
 import { ManaCoreModuleOptions } from '../interfaces/mana-core-options.interface';
diff --git a/packages/mana-core-nestjs-integration/src/services/credit-client.service.ts b/packages/mana-core-nestjs-integration/src/services/credit-client.service.ts
index 1e62022aa..2ea4f9729 100644
--- a/packages/mana-core-nestjs-integration/src/services/credit-client.service.ts
+++ b/packages/mana-core-nestjs-integration/src/services/credit-client.service.ts
@@ -47,10 +47,7 @@ export class CreditClientService {
 
 	private getAppId(): string {
 		return (
-			this.options?.appId ||
-			this.configService?.get<string>('APP_ID') ||
-			process.env.APP_ID ||
-			''
+			this.options?.appId || this.configService?.get<string>('APP_ID') || process.env.APP_ID || ''
 		);
 	}
 
diff --git a/packages/shared-auth-ui/src/pages/ForgotPasswordPage.svelte b/packages/shared-auth-ui/src/pages/ForgotPasswordPage.svelte
index 886a10ee1..9db522ddc 100644
--- a/packages/shared-auth-ui/src/pages/ForgotPasswordPage.svelte
+++ b/packages/shared-auth-ui/src/pages/ForgotPasswordPage.svelte
@@ -99,7 +99,9 @@
 	);
 
 	// Effective dark mode based on user preference or system
-	let isDark = $derived(userThemePreference !== null ? userThemePreference === 'dark' : systemIsDark);
+	let isDark = $derived(
+		userThemePreference !== null ? userThemePreference === 'dark' : systemIsDark
+	);
 
 	$effect(() => {
 		if (typeof window !== 'undefined') {
@@ -159,7 +161,13 @@
 	<button
 		type="button"
 		onclick={toggleTheme}
-		style="position: absolute; top: 1rem; left: 1rem; z-index: 50; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid {isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'}; background: {isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)'}; color: {isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'}; cursor: pointer; transition: all 0.2s ease;"
+		style="position: absolute; top: 1rem; left: 1rem; z-index: 50; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid {isDark
+			? 'rgba(255, 255, 255, 0.2)'
+			: 'rgba(0, 0, 0, 0.2)'}; background: {isDark
+			? 'rgba(255, 255, 255, 0.1)'
+			: 'rgba(0, 0, 0, 0.05)'}; color: {isDark
+			? 'rgba(255, 255, 255, 0.7)'
+			: 'rgba(0, 0, 0, 0.7)'}; cursor: pointer; transition: all 0.2s ease;"
 		aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 	>
 		{#if isDark}
@@ -170,7 +178,9 @@
 	</button>
 
 	{#if headerControls}
-		<div style="position: absolute; top: 1rem; right: 1rem; z-index: 50; opacity: 0.6; display: flex; gap: 0.75rem;">
+		<div
+			style="position: absolute; top: 1rem; right: 1rem; z-index: 50; opacity: 0.6; display: flex; gap: 0.75rem;"
+		>
 			{@render headerControls()}
 		</div>
 	{/if}
diff --git a/packages/shared-auth-ui/src/pages/LoginPage.svelte b/packages/shared-auth-ui/src/pages/LoginPage.svelte
index c398acee3..dc6e8fcfb 100644
--- a/packages/shared-auth-ui/src/pages/LoginPage.svelte
+++ b/packages/shared-auth-ui/src/pages/LoginPage.svelte
@@ -120,7 +120,9 @@
 	);
 
 	// Effective dark mode based on user preference or system
-	let isDark = $derived(userThemePreference !== null ? userThemePreference === 'dark' : systemIsDark);
+	let isDark = $derived(
+		userThemePreference !== null ? userThemePreference === 'dark' : systemIsDark
+	);
 
 	$effect(() => {
 		if (typeof window !== 'undefined') {
@@ -293,10 +295,7 @@
 
 		<!-- Form Section -->
 		<div class="form-section">
-			<div
-				class="form-card"
-				class:shake={shakeError}
-			>
+			<div class="form-card" class:shake={shakeError}>
 				<div class="form-header">
 					<h2 class="form-title">{t.title}</h2>
 					<p class="form-subtitle">{t.subtitle}</p>
@@ -309,7 +308,13 @@
 					</div>
 				{/if}
 
-				<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }} aria-busy={loading}>
+				<form
+					onsubmit={(e) => {
+						e.preventDefault();
+						handleLogin();
+					}}
+					aria-busy={loading}
+				>
 					<!-- Email -->
 					<div class="input-group">
 						<label for="email" class="sr-only">{t.emailPlaceholder}</label>
@@ -366,7 +371,12 @@
 							<input type="checkbox" bind:checked={rememberMe} style:accent-color={primaryColor} />
 							<span>{t.rememberMe}</span>
 						</label>
-						<button type="button" onclick={() => goto(forgotPasswordPath)} class="forgot-link" style:color={primaryColor}>
+						<button
+							type="button"
+							onclick={() => goto(forgotPasswordPath)}
+							class="forgot-link"
+							style:color={primaryColor}
+						>
 							{t.forgotPassword}
 						</button>
 					</div>
@@ -380,7 +390,13 @@
 						style:border-color={showSuccess ? '#22c55e' : primaryColor}
 					>
 						{#if loading}
-							<svg class="spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<svg
+								class="spinner"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+							>
 								<circle cx="12" cy="12" r="10" stroke-opacity="0.25" />
 								<path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
 							</svg>
@@ -624,7 +640,9 @@
 		border: 1px solid;
 		border-radius: 0.75rem;
 		font-size: 1rem;
-		transition: border-color 0.2s, box-shadow 0.2s;
+		transition:
+			border-color 0.2s,
+			box-shadow 0.2s;
 		/* Dark mode default */
 		background-color: rgba(0, 0, 0, 0.2);
 		border-color: rgba(255, 255, 255, 0.2);
@@ -698,7 +716,7 @@
 		color: rgba(0, 0, 0, 0.7);
 	}
 
-	.remember-label input[type="checkbox"] {
+	.remember-label input[type='checkbox'] {
 		width: 1.125rem;
 		height: 1.125rem;
 		cursor: pointer;
@@ -711,8 +729,8 @@
 		place-content: center;
 	}
 
-	.remember-label input[type="checkbox"]::before {
-		content: "";
+	.remember-label input[type='checkbox']::before {
+		content: '';
 		width: 0.65rem;
 		height: 0.65rem;
 		transform: scale(0);
@@ -721,15 +739,15 @@
 		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 	}
 
-	.remember-label input[type="checkbox"]:checked {
+	.remember-label input[type='checkbox']:checked {
 		border-color: var(--primary-color, #fff);
 	}
 
-	.remember-label input[type="checkbox"]:checked::before {
+	.remember-label input[type='checkbox']:checked::before {
 		transform: scale(1);
 	}
 
-	.light .remember-label input[type="checkbox"] {
+	.light .remember-label input[type='checkbox'] {
 		border-color: rgba(0, 0, 0, 0.3);
 	}
 
@@ -857,8 +875,12 @@
 	}
 
 	@keyframes fadeIn {
-		from { opacity: 0; }
-		to { opacity: 1; }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 
 	.logo-section {
@@ -875,9 +897,23 @@
 
 	/* Interactive Animations */
 	@keyframes shake {
-		0%, 100% { transform: translateX(0); }
-		10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
-		20%, 40%, 60%, 80% { transform: translateX(4px); }
+		0%,
+		100% {
+			transform: translateX(0);
+		}
+		10%,
+		30%,
+		50%,
+		70%,
+		90% {
+			transform: translateX(-4px);
+		}
+		20%,
+		40%,
+		60%,
+		80% {
+			transform: translateX(4px);
+		}
 	}
 
 	.shake {
@@ -885,7 +921,9 @@
 	}
 
 	@keyframes spin {
-		to { transform: rotate(360deg); }
+		to {
+			transform: rotate(360deg);
+		}
 	}
 
 	.spinner {
@@ -895,8 +933,13 @@
 	}
 
 	@keyframes success-pulse {
-		0%, 100% { transform: scale(1); }
-		50% { transform: scale(1.05); }
+		0%,
+		100% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.05);
+		}
 	}
 
 	.success-pulse {
diff --git a/packages/shared-auth-ui/src/pages/RegisterPage.svelte b/packages/shared-auth-ui/src/pages/RegisterPage.svelte
index b917de3b3..4b80f787e 100644
--- a/packages/shared-auth-ui/src/pages/RegisterPage.svelte
+++ b/packages/shared-auth-ui/src/pages/RegisterPage.svelte
@@ -117,7 +117,9 @@
 	);
 
 	// Effective dark mode based on user preference or system
-	let isDark = $derived(userThemePreference !== null ? userThemePreference === 'dark' : systemIsDark);
+	let isDark = $derived(
+		userThemePreference !== null ? userThemePreference === 'dark' : systemIsDark
+	);
 
 	$effect(() => {
 		if (typeof window !== 'undefined') {
@@ -241,7 +243,13 @@
 	<button
 		type="button"
 		onclick={toggleTheme}
-		style="position: absolute; top: 1rem; left: 1rem; z-index: 50; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid {isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'}; background: {isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)'}; color: {isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'}; cursor: pointer; transition: all 0.2s ease;"
+		style="position: absolute; top: 1rem; left: 1rem; z-index: 50; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid {isDark
+			? 'rgba(255, 255, 255, 0.2)'
+			: 'rgba(0, 0, 0, 0.2)'}; background: {isDark
+			? 'rgba(255, 255, 255, 0.1)'
+			: 'rgba(0, 0, 0, 0.05)'}; color: {isDark
+			? 'rgba(255, 255, 255, 0.7)'
+			: 'rgba(0, 0, 0, 0.7)'}; cursor: pointer; transition: all 0.2s ease;"
 		aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 	>
 		{#if isDark}
@@ -252,7 +260,9 @@
 	</button>
 
 	{#if headerControls}
-		<div style="position: absolute; top: 1rem; right: 1rem; z-index: 50; opacity: 0.6; display: flex; gap: 0.75rem;">
+		<div
+			style="position: absolute; top: 1rem; right: 1rem; z-index: 50; opacity: 0.6; display: flex; gap: 0.75rem;"
+		>
 			{@render headerControls()}
 		</div>
 	{/if}
diff --git a/packages/shared-auth-ui/src/types.ts b/packages/shared-auth-ui/src/types.ts
index a02e5f5ff..e522a53b0 100644
--- a/packages/shared-auth-ui/src/types.ts
+++ b/packages/shared-auth-ui/src/types.ts
@@ -60,4 +60,3 @@ export interface AuthResult {
 	error?: string;
 	needsVerification?: boolean;
 }
-
diff --git a/packages/shared-branding/src/app-icons.ts b/packages/shared-branding/src/app-icons.ts
index 487915d39..91b9ad413 100644
--- a/packages/shared-branding/src/app-icons.ts
+++ b/packages/shared-branding/src/app-icons.ts
@@ -5,9 +5,7 @@
 
 // Helper to convert SVG string to data URL
 const svgToDataUrl = (svg: string): string => {
-	const encoded = encodeURIComponent(svg)
-		.replace(/'/g, '%27')
-		.replace(/"/g, '%22');
+	const encoded = encodeURIComponent(svg).replace(/'/g, '%27').replace(/"/g, '%22');
 	return `data:image/svg+xml,${encoded}`;
 };
 
diff --git a/packages/shared-branding/src/mana-apps.ts b/packages/shared-branding/src/mana-apps.ts
index 083bd8479..e10410e08 100644
--- a/packages/shared-branding/src/mana-apps.ts
+++ b/packages/shared-branding/src/mana-apps.ts
@@ -286,7 +286,8 @@ export function getPillAppItems(
 	isDev?: boolean,
 	customUrls?: Partial<Record<AppIconId, string>>
 ): PillAppItemConfig[] {
-	const isDevMode = isDev ?? (typeof window !== 'undefined' && window.location.hostname === 'localhost');
+	const isDevMode =
+		isDev ?? (typeof window !== 'undefined' && window.location.hostname === 'localhost');
 
 	// Only show active (non-archived) apps
 	return getActiveManaApps().map((app) => ({
diff --git a/packages/shared-branding/src/types.ts b/packages/shared-branding/src/types.ts
index 13191ede8..41066bb1d 100644
--- a/packages/shared-branding/src/types.ts
+++ b/packages/shared-branding/src/types.ts
@@ -1,7 +1,17 @@
 /**
  * App identifiers for branding
  */
-export type AppId = 'memoro' | 'manacore' | 'manadeck' | 'maerchenzauber' | 'uload' | 'chat' | 'presi' | 'nutriphi' | 'zitare' | 'picture';
+export type AppId =
+	| 'memoro'
+	| 'manacore'
+	| 'manadeck'
+	| 'maerchenzauber'
+	| 'uload'
+	| 'chat'
+	| 'presi'
+	| 'nutriphi'
+	| 'zitare'
+	| 'picture';
 
 /**
  * App branding configuration
diff --git a/packages/shared-feedback-service/package.json b/packages/shared-feedback-service/package.json
index d6cdc97f1..757f070c6 100644
--- a/packages/shared-feedback-service/package.json
+++ b/packages/shared-feedback-service/package.json
@@ -11,7 +11,9 @@
 	},
 	"main": "./src/index.ts",
 	"types": "./src/index.ts",
-	"files": ["src"],
+	"files": [
+		"src"
+	],
 	"scripts": {
 		"type-check": "tsc --noEmit"
 	},
diff --git a/packages/shared-feedback-service/src/createFeedbackService.ts b/packages/shared-feedback-service/src/createFeedbackService.ts
index 9213cc2eb..e0f0563c3 100644
--- a/packages/shared-feedback-service/src/createFeedbackService.ts
+++ b/packages/shared-feedback-service/src/createFeedbackService.ts
@@ -39,10 +39,7 @@ export function createFeedbackService(config: FeedbackServiceConfig) {
 	/**
 	 * Helper to make authenticated requests
 	 */
-	async function fetchWithAuth<T>(
-		endpoint: string,
-		options: RequestInit = {}
-	): Promise<T> {
+	async function fetchWithAuth<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
 		const token = await getAuthToken();
 
 		if (!token) {
diff --git a/packages/shared-feedback-ui/src/FeedbackPage.svelte b/packages/shared-feedback-ui/src/FeedbackPage.svelte
index b9251e12c..8dc68b39b 100644
--- a/packages/shared-feedback-ui/src/FeedbackPage.svelte
+++ b/packages/shared-feedback-ui/src/FeedbackPage.svelte
@@ -104,8 +104,17 @@
 		<!-- Header -->
 		<div class="feedback-page__header">
 			<div class="feedback-page__icon">
-				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-					<path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+				<svg
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path
+						d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+					/>
 				</svg>
 			</div>
 			<h1 class="feedback-page__title">{pageTitle}</h1>
diff --git a/packages/shared-nestjs-auth/src/guards/jwt-auth.guard.ts b/packages/shared-nestjs-auth/src/guards/jwt-auth.guard.ts
index 7f38c5ae8..4cb51f668 100644
--- a/packages/shared-nestjs-auth/src/guards/jwt-auth.guard.ts
+++ b/packages/shared-nestjs-auth/src/guards/jwt-auth.guard.ts
@@ -89,8 +89,7 @@ export class JwtAuthGuard implements CanActivate {
 	 * Validate token with Mana Core Auth service
 	 */
 	private async validateToken(token: string): Promise<CurrentUserData> {
-		const authUrl =
-			this.configService.get<string>('MANA_CORE_AUTH_URL') || 'http://localhost:3001';
+		const authUrl = this.configService.get<string>('MANA_CORE_AUTH_URL') || 'http://localhost:3001';
 
 		const response = await fetch(`${authUrl}/api/v1/auth/validate`, {
 			method: 'POST',
diff --git a/packages/shared-profile-ui/src/ProfilePage.svelte b/packages/shared-profile-ui/src/ProfilePage.svelte
index 0ea56bc28..95e3220bc 100644
--- a/packages/shared-profile-ui/src/ProfilePage.svelte
+++ b/packages/shared-profile-ui/src/ProfilePage.svelte
@@ -126,7 +126,12 @@
 						<div class="profile-page__info-item">
 							<div class="profile-page__info-icon">
 								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+									/>
 								</svg>
 							</div>
 							<div class="profile-page__info-content">
@@ -140,7 +145,12 @@
 							<div class="profile-page__info-item">
 								<div class="profile-page__info-icon">
 									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+										/>
 									</svg>
 								</div>
 								<div class="profile-page__info-content">
@@ -155,7 +165,12 @@
 							<div class="profile-page__info-item">
 								<div class="profile-page__info-icon">
 									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+										/>
 									</svg>
 								</div>
 								<div class="profile-page__info-content">
@@ -170,7 +185,12 @@
 							<div class="profile-page__info-item">
 								<div class="profile-page__info-icon">
 									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
 									</svg>
 								</div>
 								<div class="profile-page__info-content">
@@ -185,7 +205,12 @@
 							<div class="profile-page__info-item">
 								<div class="profile-page__info-icon">
 									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
 									</svg>
 								</div>
 								<div class="profile-page__info-content">
@@ -207,7 +232,12 @@
 						{#if actions.onEditProfile}
 							<button class="profile-page__action-btn" onclick={actions.onEditProfile}>
 								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+									/>
 								</svg>
 								<span>{editProfileLabel}</span>
 							</button>
@@ -216,25 +246,46 @@
 						{#if actions.onChangePassword}
 							<button class="profile-page__action-btn" onclick={actions.onChangePassword}>
 								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+									/>
 								</svg>
 								<span>{changePasswordLabel}</span>
 							</button>
 						{/if}
 
 						{#if actions.onLogout}
-							<button class="profile-page__action-btn profile-page__action-btn--secondary" onclick={actions.onLogout}>
+							<button
+								class="profile-page__action-btn profile-page__action-btn--secondary"
+								onclick={actions.onLogout}
+							>
 								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+									/>
 								</svg>
 								<span>{logoutLabel}</span>
 							</button>
 						{/if}
 
 						{#if actions.onDeleteAccount}
-							<button class="profile-page__action-btn profile-page__action-btn--danger" onclick={actions.onDeleteAccount}>
+							<button
+								class="profile-page__action-btn profile-page__action-btn--danger"
+								onclick={actions.onDeleteAccount}
+							>
 								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+									/>
 								</svg>
 								<span>{deleteAccountLabel}</span>
 							</button>
@@ -289,7 +340,9 @@
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		overflow: hidden;
 	}
 
@@ -341,7 +394,9 @@
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 	}
 
 	:global(.dark) .profile-page__card {
diff --git a/packages/shared-subscription-ui/src/CostCard.svelte b/packages/shared-subscription-ui/src/CostCard.svelte
index 1103d0cea..7642be423 100644
--- a/packages/shared-subscription-ui/src/CostCard.svelte
+++ b/packages/shared-subscription-ui/src/CostCard.svelte
@@ -61,7 +61,9 @@
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 	}
 
 	:global(.dark) .cost-card {
diff --git a/packages/shared-subscription-ui/src/PackageCard.svelte b/packages/shared-subscription-ui/src/PackageCard.svelte
index d2365273b..3d394961a 100644
--- a/packages/shared-subscription-ui/src/PackageCard.svelte
+++ b/packages/shared-subscription-ui/src/PackageCard.svelte
@@ -108,7 +108,9 @@
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		min-width: 0;
 		overflow: hidden;
 	}
@@ -120,7 +122,9 @@
 
 	.package-card:hover {
 		transform: translateY(-2px);
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
 	}
 
 	:global(.dark) .package-card:hover {
diff --git a/packages/shared-subscription-ui/src/SubscriptionCard.svelte b/packages/shared-subscription-ui/src/SubscriptionCard.svelte
index a549aec89..7f68d4901 100644
--- a/packages/shared-subscription-ui/src/SubscriptionCard.svelte
+++ b/packages/shared-subscription-ui/src/SubscriptionCard.svelte
@@ -139,7 +139,9 @@
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		min-width: 0;
 		overflow: hidden;
 	}
@@ -151,7 +153,9 @@
 
 	.subscription-card:hover {
 		transform: translateY(-2px);
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
 	}
 
 	:global(.dark) .subscription-card:hover {
diff --git a/packages/shared-subscription-ui/src/UsageCard.svelte b/packages/shared-subscription-ui/src/UsageCard.svelte
index 312b32bce..d2a636206 100644
--- a/packages/shared-subscription-ui/src/UsageCard.svelte
+++ b/packages/shared-subscription-ui/src/UsageCard.svelte
@@ -53,10 +53,7 @@
 
 		<!-- Progress Bar -->
 		<div class="usage-card__progress-track">
-			<div
-				class="usage-card__progress-fill"
-				style="width: {availablePercentage}%;"
-			></div>
+			<div class="usage-card__progress-fill" style="width: {availablePercentage}%;"></div>
 		</div>
 
 		<!-- Percentage -->
@@ -91,7 +88,9 @@
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 	}
 
 	:global(.dark) .usage-card {
@@ -156,7 +155,7 @@
 	.usage-card__progress-fill {
 		height: 100%;
 		border-radius: 0.5rem;
-		background: linear-gradient(90deg, #4287f5 0%, #66B2FF 100%);
+		background: linear-gradient(90deg, #4287f5 0%, #66b2ff 100%);
 		box-shadow: 0 0 4px rgba(66, 135, 245, 0.5);
 	}
 
diff --git a/packages/shared-subscription-ui/src/pages/SubscriptionPage.svelte b/packages/shared-subscription-ui/src/pages/SubscriptionPage.svelte
index 88edadd01..a157d4303 100644
--- a/packages/shared-subscription-ui/src/pages/SubscriptionPage.svelte
+++ b/packages/shared-subscription-ui/src/pages/SubscriptionPage.svelte
@@ -92,7 +92,9 @@
 			<div class="subscription-page__header">
 				<div class="subscription-page__icon">
 					<svg viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10">
-						<path d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z" />
+						<path
+							d="M12.3 1c.03.05 7.3 9.67 7.3 13.7 0 4.03-3.27 7.3-7.3 7.3S5 18.73 5 14.7C5 10.66 12.3 1 12.3 1zm0 6.4c-.02.03-3.65 4.83-3.65 6.84 0 2.02 1.64 3.65 3.65 3.65s3.65-1.64 3.65-3.65c0-2.01-3.62-6.81-3.65-6.84z"
+						/>
 					</svg>
 				</div>
 				<h1 class="subscription-page__title">{pageTitle}</h1>
@@ -195,7 +197,9 @@
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		color: hsl(var(--primary, 221 83% 53%));
 	}
 
diff --git a/packages/shared-theme-ui/src/index.ts b/packages/shared-theme-ui/src/index.ts
index 965241238..932837aa2 100644
--- a/packages/shared-theme-ui/src/index.ts
+++ b/packages/shared-theme-ui/src/index.ts
@@ -12,10 +12,5 @@ export { default as ThemeGrid } from './components/ThemeGrid.svelte';
 export { default as ThemePage } from './pages/ThemePage.svelte';
 
 // Types
-export type {
-	ThemeStatus,
-	ThemeCardData,
-	ThemePageProps,
-	ThemePageTranslations,
-} from './types';
+export type { ThemeStatus, ThemeCardData, ThemePageProps, ThemePageTranslations } from './types';
 export { defaultTranslations } from './types';
diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index 0fc560ced..21c0a722a 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -13,7 +13,15 @@
 		header?: Snippet;
 	}
 
-	let { items, direction = 'down', label, icon, isOpen = false, onToggle, header }: Props = $props();
+	let {
+		items,
+		direction = 'down',
+		label,
+		icon,
+		isOpen = false,
+		onToggle,
+		header,
+	}: Props = $props();
 
 	let internalOpen = $state(false);
 	let triggerButton: HTMLButtonElement;
@@ -90,13 +98,13 @@
 		sparkle:
 			'M12 2L13.09 8.26L18 6L15.74 10.91L22 12L15.74 13.09L18 18L13.09 15.74L12 22L10.91 15.74L6 18L8.26 13.09L2 12L8.26 10.91L6 6L10.91 8.26L12 2Z',
 		leaf: 'M6.5 21.5C3.5 18.5 3.5 12.5 6.5 8.5C9.5 4.5 15 3 20 3C20 8 18.5 13.5 14.5 16.5C10.5 19.5 4.5 19.5 4.5 19.5M6.5 21.5L4.5 19.5M6.5 21.5C6.5 21.5 12 18 14.5 16.5',
-		hexagon:
-			'M12 2L21.5 7.5V16.5L12 22L2.5 16.5V7.5L12 2Z',
+		hexagon: 'M12 2L21.5 7.5V16.5L12 22L2.5 16.5V7.5L12 2Z',
 		waves:
 			'M2 12C2 12 5 8 9 8C13 8 15 12 15 12C15 12 17 16 21 16M2 17C2 17 5 13 9 13C13 13 15 17 15 17C15 17 17 21 21 21M2 7C2 7 5 3 9 3C13 3 15 7 15 7C15 7 17 11 21 11',
 		// User menu icons
 		user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
-		settings: 'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93s.844.083 1.16-.175l.713-.57a1.125 1.125 0 011.578.112l.773.773a1.125 1.125 0 01.112 1.578l-.57.713c-.258.316-.29.756-.175 1.16s.506.71.93.78l.894.15c.542.09.94.56.94 1.109v1.094c0 .55-.398 1.02-.94 1.11l-.894.149c-.424.07-.764.384-.93.78s-.083.844.175 1.16l.57.713a1.125 1.125 0 01-.112 1.578l-.773.773a1.125 1.125 0 01-1.578.112l-.713-.57c-.316-.258-.756-.29-1.16-.175s-.71.506-.78.93l-.15.894c-.09.542-.56.94-1.109.94h-1.094c-.55 0-1.02-.398-1.11-.94l-.149-.894c-.07-.424-.384-.764-.78-.93s-.844-.083-1.16.175l-.713.57a1.125 1.125 0 01-1.578-.112l-.773-.773a1.125 1.125 0 01-.112-1.578l.57-.713c.258-.316.29-.756.175-1.16s-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.764-.384.93-.78s.083-.844-.175-1.16l-.57-.713a1.125 1.125 0 01.112-1.578l.773-.773a1.125 1.125 0 011.578-.112l.713.57c.316.258.756.29 1.16.175s.71-.506.78-.93l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z',
+		settings:
+			'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93s.844.083 1.16-.175l.713-.57a1.125 1.125 0 011.578.112l.773.773a1.125 1.125 0 01.112 1.578l-.57.713c-.258.316-.29.756-.175 1.16s.506.71.93.78l.894.15c.542.09.94.56.94 1.109v1.094c0 .55-.398 1.02-.94 1.11l-.894.149c-.424.07-.764.384-.93.78s-.083.844.175 1.16l.57.713a1.125 1.125 0 01-.112 1.578l-.773.773a1.125 1.125 0 01-1.578.112l-.713-.57c-.316-.258-.756-.29-1.16-.175s-.71.506-.78.93l-.15.894c-.09.542-.56.94-1.109.94h-1.094c-.55 0-1.02-.398-1.11-.94l-.149-.894c-.07-.424-.384-.764-.78-.93s-.844-.083-1.16.175l-.713.57a1.125 1.125 0 01-1.578-.112l-.773-.773a1.125 1.125 0 01-.112-1.578l.57-.713c.258-.316.29-.756.175-1.16s-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.764-.384.93-.78s.083-.844-.175-1.16l-.57-.713a1.125 1.125 0 01.112-1.578l.773-.773a1.125 1.125 0 011.578-.112l.713.57c.316.258.756.29 1.16.175s.71-.506.78-.93l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z',
 		logout:
 			'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
 		// App icons
@@ -156,7 +164,10 @@
 
 			{#each items.filter((i) => !i.disabled) as item, i (item.id)}
 				{#if item.divider}
-					<div class="dropdown-divider" style="animation-delay: {(header ? i + 1 : i) * 15}ms"></div>
+					<div
+						class="dropdown-divider"
+						style="animation-delay: {(header ? i + 1 : i) * 15}ms"
+					></div>
 				{:else}
 					<button
 						onclick={() => handleItemClick(item)}
@@ -194,7 +205,13 @@
 								/>
 							</svg>
 						{:else if item.submenu && item.submenu.length > 0}
-							<svg class="chevron-submenu" class:rotated={openSubmenuId === item.id} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<svg
+								class="chevron-submenu"
+								class:rotated={openSubmenuId === item.id}
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
 								<path
 									stroke-linecap="round"
 									stroke-linejoin="round"
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 6dc94fc4a..e62ace379 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { PillNavItem, PillDropdownItem, PillNavElement, PillTabGroupConfig, PillAppItem } from './types';
+	import type {
+		PillNavItem,
+		PillDropdownItem,
+		PillNavElement,
+		PillTabGroupConfig,
+		PillAppItem,
+	} from './types';
 	import PillDropdown from './PillDropdown.svelte';
 	import PillTabGroup from './PillTabGroup.svelte';
 
@@ -256,7 +262,8 @@
 		creditCard:
 			'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z',
 		search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
-		heart: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z',
+		heart:
+			'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z',
 		list: 'M4 6h16M4 10h16M4 14h16M4 18h16',
 		compass:
 			'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM16.24 7.76L14.12 14.12L7.76 16.24L9.88 9.88L16.24 7.76Z',
@@ -379,7 +386,7 @@
 				{/if}
 			{/each}
 
-				<!-- Theme Variant Selector -->
+			<!-- Theme Variant Selector -->
 			{#if showThemeVariants && themeVariantItems.length > 0}
 				<PillDropdown
 					items={themeVariantItems}
@@ -397,7 +404,12 @@
 								title="Light mode"
 							>
 								<svg class="mode-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getIconPath('sun')} />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d={getIconPath('sun')}
+									/>
 								</svg>
 							</button>
 							<button
@@ -408,7 +420,12 @@
 								title="Dark mode"
 							>
 								<svg class="mode-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getIconPath('moon')} />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d={getIconPath('moon')}
+									/>
 								</svg>
 							</button>
 							<button
@@ -420,7 +437,12 @@
 							>
 								<svg class="mode-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<rect x="2" y="3" width="20" height="14" rx="2" stroke-width="2" />
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 21h8M12 17v4" />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M8 21h8M12 17v4"
+									/>
 								</svg>
 							</button>
 						</div>
@@ -1086,7 +1108,9 @@
 		border-radius: 9999px !important;
 		background: rgba(245, 245, 245, 0.95) !important;
 		border: 1px solid rgba(0, 0, 0, 0.1) !important;
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 		color: #374151 !important;
 	}
 
diff --git a/packages/shared-ui/src/organisms/AppSlider.svelte b/packages/shared-ui/src/organisms/AppSlider.svelte
index 03b99a683..d85d3407f 100644
--- a/packages/shared-ui/src/organisms/AppSlider.svelte
+++ b/packages/shared-ui/src/organisms/AppSlider.svelte
@@ -113,7 +113,9 @@
 				>
 					<div
 						class="status-indicator"
-						style="background-color: {getStatusColor(app.status)}; box-shadow: 0 0 8px {getStatusColor(app.status)};"
+						style="background-color: {getStatusColor(
+							app.status
+						)}; box-shadow: 0 0 8px {getStatusColor(app.status)};"
 					></div>
 
 					<div class="app-icon-wrapper">
@@ -142,26 +144,29 @@
 		aria-modal="true"
 		tabindex="-1"
 	>
-		<button
-			onclick={closeModal}
-			class="modal-close-btn"
-			aria-label="Close modal"
-		>
-			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<button onclick={closeModal} class="modal-close-btn" aria-label="Close modal">
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
 				<path d="M18 6L6 18M6 6l12 12" />
 			</svg>
 		</button>
 
-		<div
-			bind:this={modalScrollContainer}
-			class="modal-scroll-container scrollbar-hide"
-		>
+		<div bind:this={modalScrollContainer} class="modal-scroll-container scrollbar-hide">
 			<div class="modal-cards-wrapper">
 				{#each apps as app, index}
 					<div
 						class="modal-card"
 						class:active={selectedApp === index}
-						style="transform: perspective(1000px) rotateX({cardRotations[index]?.rotateX || 0}deg) rotateY({cardRotations[index]?.rotateY || 0}deg);"
+						style="transform: perspective(1000px) rotateX({cardRotations[index]?.rotateX ||
+							0}deg) rotateY({cardRotations[index]?.rotateY || 0}deg);"
 						onclick={(e) => {
 							e.stopPropagation();
 							selectedApp = index;
@@ -274,7 +279,9 @@
 		border: 1px solid rgba(255, 255, 255, 0.1);
 		background-color: rgba(255, 255, 255, 0.06);
 		backdrop-filter: blur(10px);
-		transition: transform 0.2s ease, background-color 0.2s ease;
+		transition:
+			transform 0.2s ease,
+			background-color 0.2s ease;
 		/* Staggered entrance animation */
 		animation: fadeInUp 0.4s ease-out both;
 		animation-delay: calc(0.3s + var(--index) * 0.08s);
@@ -363,7 +370,8 @@
 	}
 
 	@keyframes pulse {
-		0%, 100% {
+		0%,
+		100% {
 			opacity: 1;
 		}
 		50% {
@@ -418,7 +426,9 @@
 		background-color: rgba(255, 255, 255, 0.1);
 		color: #fff;
 		cursor: pointer;
-		transition: background-color 0.2s, transform 0.2s;
+		transition:
+			background-color 0.2s,
+			transform 0.2s;
 	}
 
 	.modal-close-btn:hover {
@@ -455,7 +465,9 @@
 		background-color: rgba(255, 255, 255, 0.08);
 		backdrop-filter: blur(20px);
 		transform-style: preserve-3d;
-		transition: transform 0.1s ease-out, background-color 0.2s ease;
+		transition:
+			transform 0.1s ease-out,
+			background-color 0.2s ease;
 		animation: modalCardIn 0.3s ease-out both;
 	}
 
@@ -593,7 +605,9 @@
 		font-weight: 600;
 		border: 2px solid;
 		cursor: pointer;
-		transition: opacity 0.2s, transform 0.2s;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
 		color: #fff;
 	}
 
@@ -609,8 +623,12 @@
 	}
 
 	@keyframes fadeIn {
-		from { opacity: 0; }
-		to { opacity: 1; }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 
 	@keyframes modalCardIn {
diff --git a/packages/shared-ui/src/organisms/ConfirmationModal.svelte b/packages/shared-ui/src/organisms/ConfirmationModal.svelte
index 41fb7da22..6e6988160 100644
--- a/packages/shared-ui/src/organisms/ConfirmationModal.svelte
+++ b/packages/shared-ui/src/organisms/ConfirmationModal.svelte
@@ -135,7 +135,14 @@
 			>
 				{#if loading}
 					<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
-						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+						<circle
+							class="opacity-25"
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							stroke-width="4"
+						/>
 						<path
 							class="opacity-75"
 							fill="currentColor"
diff --git a/packages/shared-ui/src/organisms/Modal.svelte b/packages/shared-ui/src/organisms/Modal.svelte
index 799ad238b..58dfa6f91 100644
--- a/packages/shared-ui/src/organisms/Modal.svelte
+++ b/packages/shared-ui/src/organisms/Modal.svelte
@@ -71,7 +71,9 @@
 		>
 			{#if showHeader}
 				<!-- Header -->
-				<div class="flex items-center justify-between p-6 border-b border-black/10 dark:border-white/10">
+				<div
+					class="flex items-center justify-between p-6 border-b border-black/10 dark:border-white/10"
+				>
 					<div class="flex items-center gap-3 flex-1">
 						{#if icon}
 							{@render icon()}
diff --git a/packages/shared-ui/src/pages/AppsPage.svelte b/packages/shared-ui/src/pages/AppsPage.svelte
index 5f69fd0c1..310cd36af 100644
--- a/packages/shared-ui/src/pages/AppsPage.svelte
+++ b/packages/shared-ui/src/pages/AppsPage.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { MANA_APPS, APP_URLS, APP_STATUS_LABELS, type ManaApp, type AppIconId } from '@manacore/shared-branding';
+	import {
+		MANA_APPS,
+		APP_URLS,
+		APP_STATUS_LABELS,
+		type ManaApp,
+		type AppIconId,
+	} from '@manacore/shared-branding';
 
 	interface Props {
 		/** Current app ID to highlight */
@@ -12,12 +18,7 @@
 		onAppClick?: (app: ManaApp) => void;
 	}
 
-	let {
-		currentAppId,
-		title = 'Alle Apps',
-		locale = 'de',
-		onAppClick,
-	}: Props = $props();
+	let { currentAppId, title = 'Alle Apps', locale = 'de', onAppClick }: Props = $props();
 
 	// Filter active apps (non-archived)
 	const apps = $derived(MANA_APPS.filter((app) => !app.archived));
@@ -155,13 +156,7 @@
 
 <!-- Modal -->
 {#if selectedAppIndex !== null}
-	<div
-		class="modal-overlay"
-		onclick={closeModal}
-		role="dialog"
-		aria-modal="true"
-		tabindex="-1"
-	>
+	<div class="modal-overlay" onclick={closeModal} role="dialog" aria-modal="true" tabindex="-1">
 		<button onclick={closeModal} class="modal-close-btn" aria-label="Close modal">
 			<svg
 				width="24"
@@ -202,7 +197,10 @@
 						tabindex="0"
 					>
 						<div class="modal-card-status">
-							<div class="modal-status-dot" style="background-color: {getStatusColor(app.status)};"></div>
+							<div
+								class="modal-status-dot"
+								style="background-color: {getStatusColor(app.status)};"
+							></div>
 							<span class="modal-status-label">{statusLabels[app.status]}</span>
 						</div>
 
@@ -224,7 +222,9 @@
 
 						<div class="modal-app-action">
 							{#if app.comingSoon}
-								<span class="modal-coming-soon">{locale === 'de' ? 'Demnächst' : 'Coming Soon'}</span>
+								<span class="modal-coming-soon"
+									>{locale === 'de' ? 'Demnächst' : 'Coming Soon'}</span
+								>
 							{:else}
 								<button
 									class="modal-open-btn"
@@ -303,7 +303,10 @@
 		border: 1px solid rgba(0, 0, 0, 0.08);
 		background-color: rgba(255, 255, 255, 0.8);
 		backdrop-filter: blur(10px);
-		transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease,
+			border-color 0.2s ease;
 		text-align: center;
 	}
 
@@ -427,7 +430,9 @@
 		background-color: rgba(255, 255, 255, 0.1);
 		color: #fff;
 		cursor: pointer;
-		transition: background-color 0.2s, transform 0.2s;
+		transition:
+			background-color 0.2s,
+			transform 0.2s;
 	}
 
 	.modal-close-btn:hover {
@@ -473,7 +478,9 @@
 		background-color: rgba(255, 255, 255, 0.08);
 		backdrop-filter: blur(20px);
 		transform-style: preserve-3d;
-		transition: transform 0.1s ease-out, background-color 0.2s ease;
+		transition:
+			transform 0.1s ease-out,
+			background-color 0.2s ease;
 		animation: modalCardIn 0.3s ease-out both;
 	}
 
@@ -575,7 +582,9 @@
 		font-weight: 600;
 		border: 2px solid;
 		cursor: pointer;
-		transition: opacity 0.2s, transform 0.2s;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
 		color: #fff;
 	}
 
diff --git a/packages/shared-ui/src/settings/SettingsDangerButton.svelte b/packages/shared-ui/src/settings/SettingsDangerButton.svelte
index a0278d453..ceeabba0f 100644
--- a/packages/shared-ui/src/settings/SettingsDangerButton.svelte
+++ b/packages/shared-ui/src/settings/SettingsDangerButton.svelte
@@ -33,7 +33,9 @@
 </script>
 
 <div
-	class="settings-danger-button {border ? 'settings-danger-button--border' : ''} {disabled ? 'settings-danger-button--disabled' : ''} {className}"
+	class="settings-danger-button {border ? 'settings-danger-button--border' : ''} {disabled
+		? 'settings-danger-button--disabled'
+		: ''} {className}"
 >
 	<div class="settings-danger-button__content">
 		{#if icon}
@@ -49,12 +51,7 @@
 		</div>
 	</div>
 
-	<button
-		type="button"
-		{onclick}
-		class="settings-danger-button__button"
-		{disabled}
-	>
+	<button type="button" {onclick} class="settings-danger-button__button" {disabled}>
 		{buttonText || label}
 	</button>
 </div>
diff --git a/packages/shared-ui/src/settings/SettingsDangerZone.svelte b/packages/shared-ui/src/settings/SettingsDangerZone.svelte
index 9b256d179..648126fb6 100644
--- a/packages/shared-ui/src/settings/SettingsDangerZone.svelte
+++ b/packages/shared-ui/src/settings/SettingsDangerZone.svelte
@@ -10,11 +10,7 @@
 		children: Snippet;
 	}
 
-	let {
-		title = 'Danger Zone',
-		class: className = '',
-		children,
-	}: Props = $props();
+	let { title = 'Danger Zone', class: className = '', children }: Props = $props();
 </script>
 
 <section class="settings-danger-zone {className}">
diff --git a/packages/shared-ui/src/settings/SettingsPage.svelte b/packages/shared-ui/src/settings/SettingsPage.svelte
index 87665c36b..5131b047e 100644
--- a/packages/shared-ui/src/settings/SettingsPage.svelte
+++ b/packages/shared-ui/src/settings/SettingsPage.svelte
@@ -14,13 +14,7 @@
 		children: Snippet;
 	}
 
-	let {
-		title,
-		subtitle,
-		maxWidth = 'md',
-		class: className = '',
-		children,
-	}: Props = $props();
+	let { title, subtitle, maxWidth = 'md', class: className = '', children }: Props = $props();
 
 	const maxWidthClasses = {
 		sm: 'max-w-lg',
diff --git a/packages/shared-ui/src/settings/SettingsRow.svelte b/packages/shared-ui/src/settings/SettingsRow.svelte
index c8ef8df0e..dd07cae6e 100644
--- a/packages/shared-ui/src/settings/SettingsRow.svelte
+++ b/packages/shared-ui/src/settings/SettingsRow.svelte
@@ -40,7 +40,9 @@
 {#if href}
 	<a
 		{href}
-		class="settings-row {border ? 'settings-row--border' : ''} settings-row--clickable {disabled ? 'settings-row--disabled' : ''} {className}"
+		class="settings-row {border ? 'settings-row--border' : ''} settings-row--clickable {disabled
+			? 'settings-row--disabled'
+			: ''} {className}"
 	>
 		<div class="settings-row__content">
 			{#if icon}
@@ -69,7 +71,9 @@
 	<button
 		type="button"
 		{onclick}
-		class="settings-row {border ? 'settings-row--border' : ''} settings-row--clickable {disabled ? 'settings-row--disabled' : ''} {className}"
+		class="settings-row {border ? 'settings-row--border' : ''} settings-row--clickable {disabled
+			? 'settings-row--disabled'
+			: ''} {className}"
 		{disabled}
 	>
 		<div class="settings-row__content">
@@ -97,7 +101,9 @@
 	</button>
 {:else}
 	<div
-		class="settings-row {border ? 'settings-row--border' : ''} {disabled ? 'settings-row--disabled' : ''} {className}"
+		class="settings-row {border ? 'settings-row--border' : ''} {disabled
+			? 'settings-row--disabled'
+			: ''} {className}"
 	>
 		<div class="settings-row__content">
 			{#if icon}
diff --git a/packages/shared-ui/src/settings/SettingsSection.svelte b/packages/shared-ui/src/settings/SettingsSection.svelte
index 8600633bf..c0b24f5e6 100644
--- a/packages/shared-ui/src/settings/SettingsSection.svelte
+++ b/packages/shared-ui/src/settings/SettingsSection.svelte
@@ -12,12 +12,7 @@
 		children: Snippet;
 	}
 
-	let {
-		title,
-		icon,
-		class: className = '',
-		children,
-	}: Props = $props();
+	let { title, icon, class: className = '', children }: Props = $props();
 </script>
 
 <section class="settings-section {className}">
diff --git a/packages/shared-ui/src/settings/SettingsToggle.svelte b/packages/shared-ui/src/settings/SettingsToggle.svelte
index 183c2518b..c4c0dd6a7 100644
--- a/packages/shared-ui/src/settings/SettingsToggle.svelte
+++ b/packages/shared-ui/src/settings/SettingsToggle.svelte
@@ -39,7 +39,9 @@
 </script>
 
 <div
-	class="settings-toggle {border ? 'settings-toggle--border' : ''} {disabled ? 'settings-toggle--disabled' : ''} {className}"
+	class="settings-toggle {border ? 'settings-toggle--border' : ''} {disabled
+		? 'settings-toggle--disabled'
+		: ''} {className}"
 >
 	<div class="settings-toggle__content">
 		{#if icon}
diff --git a/services/mana-core-auth/CLAUDE.md b/services/mana-core-auth/CLAUDE.md
index 389916e52..fff9c7d9a 100644
--- a/services/mana-core-auth/CLAUDE.md
+++ b/services/mana-core-auth/CLAUDE.md
@@ -9,6 +9,7 @@ Mana Core Auth is the central authentication service for the Mana Universe ecosy
 ### 1. ALWAYS USE BETTER AUTH - NO EXCEPTIONS
 
 **DO NOT** implement custom authentication logic. Better Auth handles:
+
 - User registration and sign-in
 - JWT token generation (EdDSA algorithm)
 - JWT token verification (via JWKS)
@@ -19,13 +20,13 @@ Mana Core Auth is the central authentication service for the Mana Universe ecosy
 
 ### 2. JWT Rules
 
-| DO | DON'T |
-|----|-------|
-| Use `jose` library for JWT operations | Use `jsonwebtoken` library |
-| Use Better Auth's JWKS endpoint | Configure RSA keys in `.env` |
-| Use EdDSA algorithm (Better Auth default) | Use RS256 or HS256 |
-| Fetch JWKS from `/api/v1/auth/jwks` | Hardcode public keys |
-| Keep JWT claims minimal | Add credit_balance, org data to JWT |
+| DO                                        | DON'T                               |
+| ----------------------------------------- | ----------------------------------- |
+| Use `jose` library for JWT operations     | Use `jsonwebtoken` library          |
+| Use Better Auth's JWKS endpoint           | Configure RSA keys in `.env`        |
+| Use EdDSA algorithm (Better Auth default) | Use RS256 or HS256                  |
+| Fetch JWKS from `/api/v1/auth/jwks`       | Hardcode public keys                |
+| Keep JWT claims minimal                   | Add credit_balance, org data to JWT |
 
 ### 3. Before Making Auth Changes
 
@@ -100,12 +101,12 @@ services/mana-core-auth/
 
 ## Key Files
 
-| File | Purpose |
-|------|---------|
-| `src/auth/better-auth.config.ts` | Better Auth configuration with JWT + Org plugins |
-| `src/auth/services/better-auth.service.ts` | Main auth service - ALL auth logic here |
-| `src/db/schema/auth.schema.ts` | User, session, account, jwks tables |
-| `docs/AUTHENTICATION_ARCHITECTURE.md` | Comprehensive auth documentation |
+| File                                       | Purpose                                          |
+| ------------------------------------------ | ------------------------------------------------ |
+| `src/auth/better-auth.config.ts`           | Better Auth configuration with JWT + Org plugins |
+| `src/auth/services/better-auth.service.ts` | Main auth service - ALL auth logic here          |
+| `src/db/schema/auth.schema.ts`             | User, session, account, jwks tables              |
+| `docs/AUTHENTICATION_ARCHITECTURE.md`      | Comprehensive auth documentation                 |
 
 ## Environment Variables
 
@@ -136,6 +137,7 @@ Other services call `POST /api/v1/auth/validate` with the JWT. The validation us
 ### Adding JWT claims
 
 **DON'T** add dynamic data to JWT claims. Keep them minimal:
+
 - `sub` (user ID)
 - `email`
 - `role`
diff --git a/services/mana-core-auth/MIGRATIONS.md b/services/mana-core-auth/MIGRATIONS.md
index 80669e066..27ccfdc0e 100644
--- a/services/mana-core-auth/MIGRATIONS.md
+++ b/services/mana-core-auth/MIGRATIONS.md
@@ -18,10 +18,10 @@ src/db/schema/
 
 ## Commands
 
-| Command         | Description                           |
-| --------------- | ------------------------------------- |
-| `pnpm db:push`  | Sync schema to database               |
-| `pnpm db:studio`| Open Drizzle Studio to view/edit data |
+| Command          | Description                           |
+| ---------------- | ------------------------------------- |
+| `pnpm db:push`   | Sync schema to database               |
+| `pnpm db:studio` | Open Drizzle Studio to view/edit data |
 
 ## First-Time Setup
 
diff --git a/services/mana-core-auth/docs/DATABASE_SCHEMA.md b/services/mana-core-auth/docs/DATABASE_SCHEMA.md
index 5a5d4dd34..c2f653c5a 100644
--- a/services/mana-core-auth/docs/DATABASE_SCHEMA.md
+++ b/services/mana-core-auth/docs/DATABASE_SCHEMA.md
@@ -3,6 +3,7 @@
 ## Overview
 
 The Mana Core authentication service uses PostgreSQL with two main schemas:
+
 - `auth` - User authentication, sessions, and organization management
 - `credits` - Credit system for B2C and B2B customers
 
@@ -43,6 +44,7 @@ credits.organization_balances ←───────────────
 ### Core Tables
 
 #### auth.organizations
+
 Stores organization/company information for B2B customers.
 
 ```sql
@@ -58,11 +60,13 @@ CREATE TABLE auth.organizations (
 ```
 
 **Key Design Decisions:**
+
 - Uses TEXT for IDs (Better Auth requirement - nanoid/ULID format)
 - Slug is unique and URL-friendly for organization pages
 - Metadata field allows flexible custom attributes
 
 #### auth.members
+
 Links users to organizations with roles (owner, admin, member).
 
 ```sql
@@ -80,11 +84,13 @@ CREATE INDEX members_organization_user_idx ON auth.members(organization_id, user
 ```
 
 **Key Design Decisions:**
+
 - Composite index on (organization_id, user_id) for fast membership checks
 - user_id is TEXT to match Better Auth expectations (actual data is UUID cast to TEXT)
 - ON DELETE CASCADE ensures members are removed when org is deleted
 
 #### auth.invitations
+
 Tracks pending, accepted, and rejected organization invitations.
 
 ```sql
@@ -105,6 +111,7 @@ CREATE INDEX invitations_status_idx ON auth.invitations(status);
 ```
 
 **Key Design Decisions:**
+
 - Index on email for quick lookup of pending invitations
 - Index on status for filtering active invitations
 - ON DELETE SET NULL for inviter (keeps history even if inviter deleted)
@@ -113,6 +120,7 @@ CREATE INDEX invitations_status_idx ON auth.invitations(status);
 ## Organization Credit Management
 
 ### credits.organization_balances
+
 Tracks credit pools for B2B organizations.
 
 ```sql
@@ -130,6 +138,7 @@ CREATE TABLE credits.organization_balances (
 ```
 
 **Key Design Decisions:**
+
 - `balance`: Organization's total purchased credits
 - `allocated_credits`: Sum of credits allocated to employees (not yet spent)
 - `available_credits`: Credits owner can still allocate (calculated: balance - allocated_credits)
@@ -138,12 +147,14 @@ CREATE TABLE credits.organization_balances (
 - `version`: Enables optimistic locking to prevent race conditions
 
 **Credit Flow:**
+
 1. Owner purchases credits → `balance` increases
 2. Owner allocates to employee → `allocated_credits` increases, `available_credits` decreases
 3. Employee spends credits → employee's `credits.balances.balance` decreases
 4. Owner deallocates from employee → `allocated_credits` decreases, `available_credits` increases
 
 ### credits.credit_allocations
+
 Immutable audit trail of all credit allocations.
 
 ```sql
@@ -167,6 +178,7 @@ CREATE INDEX credit_allocations_created_at_idx ON credits.credit_allocations(cre
 ```
 
 **Key Design Decisions:**
+
 - **Immutable**: No updates or deletes allowed (audit trail)
 - `amount` can be positive (allocation) or negative (deallocation/adjustment)
 - `balance_before`/`balance_after` track exact state changes
@@ -174,6 +186,7 @@ CREATE INDEX credit_allocations_created_at_idx ON credits.credit_allocations(cre
 - `reason` field for transparency and accountability
 
 ### credits.transactions (Updated)
+
 Extended to support B2B transactions.
 
 ```sql
@@ -185,6 +198,7 @@ CREATE INDEX transactions_organization_id_idx ON credits.transactions(organizati
 ```
 
 **Key Design Decisions:**
+
 - `organization_id` is **nullable** (NULL for B2C users, set for B2B employees)
 - ON DELETE SET NULL preserves transaction history even if org deleted
 - Enables organization-wide usage analytics and reporting
@@ -194,6 +208,7 @@ CREATE INDEX transactions_organization_id_idx ON credits.transactions(organizati
 ### The UUID vs TEXT Challenge
 
 **Problem:**
+
 - Better Auth uses TEXT IDs (nanoid/ULID format like "abc123xyz")
 - Our existing system uses UUID for user IDs
 - PostgreSQL doesn't allow direct foreign keys between UUID and TEXT
@@ -211,18 +226,19 @@ FOREIGN KEY (user_id) REFERENCES auth.users(id) ON DELETE CASCADE;
 ```
 
 **In Application Code:**
+
 ```typescript
 // When inserting a member
 await db.insert(members).values({
-  id: nanoid(),
-  organization_id: "org_abc123",
-  user_id: userId.toString(), // Convert UUID to TEXT
-  role: 'member'
+	id: nanoid(),
+	organization_id: 'org_abc123',
+	user_id: userId.toString(), // Convert UUID to TEXT
+	role: 'member',
 });
 
 // When querying
 const member = await db.query.members.findFirst({
-  where: eq(members.userId, userId.toString())
+	where: eq(members.userId, userId.toString()),
 });
 ```
 
@@ -243,26 +259,31 @@ auth.is_organization_owner(org_id TEXT) → BOOLEAN
 ### Key Policies
 
 **Organizations:**
+
 - Members can view their organizations
 - Any user can create organizations (Better Auth adds them as owner)
 - Only owners can update/delete organizations
 
 **Members:**
+
 - Members can view other members in their orgs
 - Owners/admins can add/remove/update members
 - Members can remove themselves
 
 **Invitations:**
+
 - Members can view org invitations
 - Invitees can view invitations sent to them
 - Owners/admins can create/manage invitations
 - Inviters and invitees can delete invitations
 
 **Organization Balances:**
+
 - Members can view org balance
 - Only owners can modify balances
 
 **Credit Allocations:**
+
 - Employees can view allocations to them
 - Owners/admins can view all org allocations
 - Only owners can create allocations
@@ -286,16 +307,19 @@ psql $DATABASE_URL -f src/db/migrations/0001_better_auth_organizations.sql
 ### Migration Files
 
 **Up Migration:** `0001_better_auth_organizations.sql`
+
 - Creates organization tables
 - Creates credit management tables
 - Adds foreign keys and indexes
 - Sets up triggers
 
 **Down Migration:** `0001_better_auth_organizations_down.sql`
+
 - Reverses all changes
 - Safe rollback path
 
 **RLS Policies:** `postgres/init/03-organization-rls.sql`
+
 - Applied automatically in Docker
 - Can be run manually: `psql $DATABASE_URL -f postgres/init/03-organization-rls.sql`
 
@@ -332,6 +356,7 @@ VALUES ('org_abc123');
 ### Indexes
 
 All critical query paths are indexed:
+
 - Organization lookups by slug
 - Member lookups by user_id and organization_id
 - Invitation lookups by email and status
@@ -343,15 +368,18 @@ Both `credits.balances` and `credits.organization_balances` use a `version` colu
 
 ```typescript
 // Prevent race conditions when allocating credits
-await db.update(organizationBalances)
-  .set({
-    allocated_credits: sql`allocated_credits + ${amount}`,
-    version: sql`version + 1`
-  })
-  .where(and(
-    eq(organizationBalances.organizationId, orgId),
-    eq(organizationBalances.version, currentVersion)
-  ));
+await db
+	.update(organizationBalances)
+	.set({
+		allocated_credits: sql`allocated_credits + ${amount}`,
+		version: sql`version + 1`,
+	})
+	.where(
+		and(
+			eq(organizationBalances.organizationId, orgId),
+			eq(organizationBalances.version, currentVersion)
+		)
+	);
 ```
 
 ## Schema Relationships
@@ -399,12 +427,14 @@ ADD COLUMN credits_expire_at TIMESTAMPTZ;
 ### Common Issues
 
 **Foreign Key Errors (UUID vs TEXT):**
+
 ```sql
 -- Check if casting is needed
 SELECT user_id::uuid FROM auth.members WHERE user_id ~ '^[0-9a-f-]{36}$';
 ```
 
 **RLS Policy Blocking Queries:**
+
 ```sql
 -- Temporarily disable RLS for debugging (development only!)
 ALTER TABLE auth.organizations DISABLE ROW LEVEL SECURITY;
@@ -414,17 +444,18 @@ SELECT * FROM pg_policies WHERE tablename = 'organizations';
 ```
 
 **Optimistic Lock Failures:**
+
 ```typescript
 // Retry logic for version conflicts
 const maxRetries = 3;
 for (let i = 0; i < maxRetries; i++) {
-  try {
-    await allocateCredits(orgId, employeeId, amount);
-    break;
-  } catch (err) {
-    if (i === maxRetries - 1) throw err;
-    await sleep(100 * Math.pow(2, i)); // Exponential backoff
-  }
+	try {
+		await allocateCredits(orgId, employeeId, amount);
+		break;
+	} catch (err) {
+		if (i === maxRetries - 1) throw err;
+		await sleep(100 * Math.pow(2, i)); // Exponential backoff
+	}
 }
 ```
 
diff --git a/services/mana-core-auth/jest.config.js b/services/mana-core-auth/jest.config.js
index 0abbbf4f9..1fa95540c 100644
--- a/services/mana-core-auth/jest.config.js
+++ b/services/mana-core-auth/jest.config.js
@@ -19,9 +19,7 @@ module.exports = {
 	coverageDirectory: '../coverage',
 	testEnvironment: 'node',
 	// Handle ESM modules (nanoid, better-auth)
-	transformIgnorePatterns: [
-		'node_modules/(?!(nanoid|better-auth)/)',
-	],
+	transformIgnorePatterns: ['node_modules/(?!(nanoid|better-auth)/)'],
 	moduleNameMapper: {
 		'^src/(.*)$': '<rootDir>/$1',
 		'^nanoid$': '<rootDir>/../test/__mocks__/nanoid.ts',
diff --git a/services/mana-core-auth/src/__tests__/utils/mock-factories.ts b/services/mana-core-auth/src/__tests__/utils/mock-factories.ts
index cb77c3859..0b3508fdf 100644
--- a/services/mana-core-auth/src/__tests__/utils/mock-factories.ts
+++ b/services/mana-core-auth/src/__tests__/utils/mock-factories.ts
@@ -303,7 +303,12 @@ export const mockMemberFactory = {
  * Mock Credit Allocation Factory
  */
 export const mockCreditAllocationFactory = {
-	create: (organizationId: string, employeeId: string, allocatedBy: string, overrides: Partial<any> = {}) => ({
+	create: (
+		organizationId: string,
+		employeeId: string,
+		allocatedBy: string,
+		overrides: Partial<any> = {}
+	) => ({
 		id: nanoid(),
 		organizationId,
 		employeeId,
diff --git a/services/mana-core-auth/src/__tests__/utils/test-helpers.ts b/services/mana-core-auth/src/__tests__/utils/test-helpers.ts
index 8905808aa..eb557b512 100644
--- a/services/mana-core-auth/src/__tests__/utils/test-helpers.ts
+++ b/services/mana-core-auth/src/__tests__/utils/test-helpers.ts
@@ -103,8 +103,7 @@ export const assertHelpers = {
 	 * Assert that a value is a valid UUID
 	 */
 	assertIsUuid: (value: string) => {
-		const uuidRegex =
-			/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+		const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 		expect(value).toMatch(uuidRegex);
 	},
 
diff --git a/services/mana-core-auth/src/ai/ai.service.ts b/services/mana-core-auth/src/ai/ai.service.ts
index 87b38ad82..22b4405c4 100644
--- a/services/mana-core-auth/src/ai/ai.service.ts
+++ b/services/mana-core-auth/src/ai/ai.service.ts
@@ -74,8 +74,7 @@ Antworte NUR mit validem JSON in diesem Format (keine Markdown-Codeblocks, kein
 
 	private fallbackAnalysis(feedbackText: string): FeedbackAnalysis {
 		// Simple fallback: use first 60 chars as title, default category
-		const title =
-			feedbackText.length > 60 ? feedbackText.substring(0, 57) + '...' : feedbackText;
+		const title = feedbackText.length > 60 ? feedbackText.substring(0, 57) + '...' : feedbackText;
 
 		// Simple keyword-based category detection
 		const lowerText = feedbackText.toLowerCase();
@@ -88,7 +87,11 @@ Antworte NUR mit validem JSON in diesem Format (keine Markdown-Codeblocks, kein
 			lowerText.includes('funktioniert nicht')
 		) {
 			category = 'bug';
-		} else if (lowerText.includes('?') || lowerText.includes('frage') || lowerText.includes('wie')) {
+		} else if (
+			lowerText.includes('?') ||
+			lowerText.includes('frage') ||
+			lowerText.includes('wie')
+		) {
 			category = 'question';
 		} else if (
 			lowerText.includes('besser') ||
diff --git a/services/mana-core-auth/src/auth/auth.controller.spec.ts b/services/mana-core-auth/src/auth/auth.controller.spec.ts
index 61322aea6..8330103f8 100644
--- a/services/mana-core-auth/src/auth/auth.controller.spec.ts
+++ b/services/mana-core-auth/src/auth/auth.controller.spec.ts
@@ -341,7 +341,10 @@ describe('AuthController', () => {
 		it('should return invalid for expired token', async () => {
 			const body = { token: 'expired-token' };
 
-			betterAuthService.validateToken.mockResolvedValue({ valid: false, error: 'Token expired' } as any);
+			betterAuthService.validateToken.mockResolvedValue({
+				valid: false,
+				error: 'Token expired',
+			} as any);
 
 			const result = await controller.validate(body);
 
@@ -483,7 +486,11 @@ describe('AuthController', () => {
 	describe('POST /auth/organizations/:id/invite', () => {
 		it('should invite an employee to organization', async () => {
 			const orgId = 'org-123';
-			const inviteDto = { organizationId: orgId, employeeEmail: 'employee@acme.com', role: 'member' as const };
+			const inviteDto = {
+				organizationId: orgId,
+				employeeEmail: 'employee@acme.com',
+				role: 'member' as const,
+			};
 
 			const expectedResult = {
 				id: 'invitation-123',
@@ -508,7 +515,11 @@ describe('AuthController', () => {
 
 		it('should throw ForbiddenException when inviter lacks permission', async () => {
 			const orgId = 'org-123';
-			const inviteDto = { organizationId: orgId, employeeEmail: 'employee@acme.com', role: 'member' as const };
+			const inviteDto = {
+				organizationId: orgId,
+				employeeEmail: 'employee@acme.com',
+				role: 'member' as const,
+			};
 
 			betterAuthService.inviteEmployee.mockRejectedValue(
 				new ForbiddenException('You do not have permission to invite members')
@@ -585,9 +596,9 @@ describe('AuthController', () => {
 				new ForbiddenException('You do not have permission to remove members')
 			);
 
-			await expect(controller.removeMember('org-123', 'member-456', mockAuthHeader)).rejects.toThrow(
-				ForbiddenException
-			);
+			await expect(
+				controller.removeMember('org-123', 'member-456', mockAuthHeader)
+			).rejects.toThrow(ForbiddenException);
 		});
 	});
 
diff --git a/services/mana-core-auth/src/auth/better-auth.config.ts b/services/mana-core-auth/src/auth/better-auth.config.ts
index e2b64ca5d..0f0018824 100644
--- a/services/mana-core-auth/src/auth/better-auth.config.ts
+++ b/services/mana-core-auth/src/auth/better-auth.config.ts
@@ -19,18 +19,8 @@ import { drizzleAdapter } from 'better-auth/adapters/drizzle';
 import { jwt } from 'better-auth/plugins/jwt';
 import { organization } from 'better-auth/plugins/organization';
 import { getDb } from '../db/connection';
-import {
-	organizations,
-	members,
-	invitations,
-} from '../db/schema/organizations.schema';
-import {
-	users,
-	sessions,
-	accounts,
-	verificationTokens,
-	jwks,
-} from '../db/schema/auth.schema';
+import { organizations, members, invitations } from '../db/schema/organizations.schema';
+import { users, sessions, accounts, verificationTokens, jwks } from '../db/schema/auth.schema';
 import type { JWTPayloadContext } from './types/better-auth.types';
 
 /**
diff --git a/services/mana-core-auth/src/auth/jwt-validation.spec.ts b/services/mana-core-auth/src/auth/jwt-validation.spec.ts
index a8f95dfb8..1e542af7c 100644
--- a/services/mana-core-auth/src/auth/jwt-validation.spec.ts
+++ b/services/mana-core-auth/src/auth/jwt-validation.spec.ts
@@ -287,9 +287,9 @@ describe('JWT Token Validation (Minimal Claims)', () => {
 
 			// Tamper with the token - try to change role to admin
 			const parts = token.split('.');
-			const tamperedPayload = Buffer.from(
-				JSON.stringify({ ...payload, role: 'admin' })
-			).toString('base64url');
+			const tamperedPayload = Buffer.from(JSON.stringify({ ...payload, role: 'admin' })).toString(
+				'base64url'
+			);
 			const tamperedToken = `${parts[0]}.${tamperedPayload}.${parts[2]}`;
 
 			expect(() => {
diff --git a/services/mana-core-auth/src/auth/services/better-auth.service.spec.ts b/services/mana-core-auth/src/auth/services/better-auth.service.spec.ts
index 66844b4c0..1bcc1f132 100644
--- a/services/mana-core-auth/src/auth/services/better-auth.service.spec.ts
+++ b/services/mana-core-auth/src/auth/services/better-auth.service.spec.ts
@@ -11,11 +11,7 @@
 
 import { Test, TestingModule } from '@nestjs/testing';
 import { ConfigService } from '@nestjs/config';
-import {
-	ConflictException,
-	NotFoundException,
-	ForbiddenException,
-} from '@nestjs/common';
+import { ConflictException, NotFoundException, ForbiddenException } from '@nestjs/common';
 import { BetterAuthService } from './better-auth.service';
 import { createMockConfigService } from '../../__tests__/utils/test-helpers';
 
@@ -156,9 +152,7 @@ describe('BetterAuthService', () => {
 			};
 
 			// Mock Better Auth error for existing user
-			mockAuthApi.signUpEmail.mockRejectedValue(
-				new Error('User with this email already exists')
-			);
+			mockAuthApi.signUpEmail.mockRejectedValue(new Error('User with this email already exists'));
 
 			await expect(service.registerB2C(registerDto)).rejects.toThrow(ConflictException);
 			await expect(service.registerB2C(registerDto)).rejects.toThrow(
@@ -365,9 +359,7 @@ describe('BetterAuthService', () => {
 			});
 
 			// Mock organization creation failure
-			mockAuthApi.createOrganization.mockRejectedValue(
-				new Error('Failed to create organization')
-			);
+			mockAuthApi.createOrganization.mockRejectedValue(new Error('Failed to create organization'));
 
 			await expect(service.registerB2B(registerDto)).rejects.toThrow(
 				'Failed to create organization'
@@ -411,9 +403,7 @@ describe('BetterAuthService', () => {
 				organizationName: 'Acme Corporation',
 			};
 
-			mockAuthApi.signUpEmail.mockRejectedValue(
-				new Error('User with this email already exists')
-			);
+			mockAuthApi.signUpEmail.mockRejectedValue(new Error('User with this email already exists'));
 
 			await expect(service.registerB2B(registerDto)).rejects.toThrow(ConflictException);
 			await expect(service.registerB2B(registerDto)).rejects.toThrow('Owner email already exists');
@@ -526,13 +516,9 @@ describe('BetterAuthService', () => {
 				inviterToken: 'inviter-token',
 			};
 
-			mockAuthApi.inviteMember.mockRejectedValue(
-				new Error('User is already a member')
-			);
+			mockAuthApi.inviteMember.mockRejectedValue(new Error('User is already a member'));
 
-			await expect(service.inviteEmployee(inviteDto)).rejects.toThrow(
-				'User is already a member'
-			);
+			await expect(service.inviteEmployee(inviteDto)).rejects.toThrow('User is already a member');
 		});
 
 		it('should throw ForbiddenException if inviter lacks permission', async () => {
@@ -588,9 +574,7 @@ describe('BetterAuthService', () => {
 				userToken: 'user-token',
 			};
 
-			mockAuthApi.acceptInvitation.mockRejectedValue(
-				new Error('Invitation expired')
-			);
+			mockAuthApi.acceptInvitation.mockRejectedValue(new Error('Invitation expired'));
 
 			await expect(service.acceptInvitation(acceptDto)).rejects.toThrow(NotFoundException);
 			await expect(service.acceptInvitation(acceptDto)).rejects.toThrow(
@@ -604,9 +588,7 @@ describe('BetterAuthService', () => {
 				userToken: 'user-token',
 			};
 
-			mockAuthApi.acceptInvitation.mockRejectedValue(
-				new Error('Invitation not found')
-			);
+			mockAuthApi.acceptInvitation.mockRejectedValue(new Error('Invitation not found'));
 
 			await expect(service.acceptInvitation(acceptDto)).rejects.toThrow(NotFoundException);
 		});
@@ -652,9 +634,7 @@ describe('BetterAuthService', () => {
 		});
 
 		it('should return empty array on error', async () => {
-			mockAuthApi.getFullOrganization.mockRejectedValue(
-				new Error('Database error')
-			);
+			mockAuthApi.getFullOrganization.mockRejectedValue(new Error('Database error'));
 
 			const result = await service.getOrganizationMembers('org-123');
 
@@ -698,13 +678,9 @@ describe('BetterAuthService', () => {
 				removerToken: 'admin-token',
 			};
 
-			mockAuthApi.removeMember.mockRejectedValue(
-				new Error('Member not found')
-			);
+			mockAuthApi.removeMember.mockRejectedValue(new Error('Member not found'));
 
-			await expect(service.removeMember(removeDto)).rejects.toThrow(
-				'Member not found'
-			);
+			await expect(service.removeMember(removeDto)).rejects.toThrow('Member not found');
 		});
 
 		it('should throw ForbiddenException if remover lacks permission', async () => {
@@ -782,9 +758,7 @@ describe('BetterAuthService', () => {
 				new Error('Organization not found or you are not a member')
 			);
 
-			await expect(service.setActiveOrganization(setActiveDto)).rejects.toThrow(
-				NotFoundException
-			);
+			await expect(service.setActiveOrganization(setActiveDto)).rejects.toThrow(NotFoundException);
 			await expect(service.setActiveOrganization(setActiveDto)).rejects.toThrow(
 				'Organization not found or you are not a member'
 			);
@@ -970,13 +944,9 @@ describe('BetterAuthService', () => {
 				name: 'Test User',
 			};
 
-			mockAuthApi.signUpEmail.mockRejectedValue(
-				new Error('Unexpected server error')
-			);
+			mockAuthApi.signUpEmail.mockRejectedValue(new Error('Unexpected server error'));
 
-			await expect(service.registerB2C(registerDto)).rejects.toThrow(
-				'Unexpected server error'
-			);
+			await expect(service.registerB2C(registerDto)).rejects.toThrow('Unexpected server error');
 		});
 
 		it('should propagate network errors', async () => {
@@ -987,13 +957,9 @@ describe('BetterAuthService', () => {
 				inviterToken: 'token',
 			};
 
-			mockAuthApi.inviteMember.mockRejectedValue(
-				new Error('Network timeout')
-			);
+			mockAuthApi.inviteMember.mockRejectedValue(new Error('Network timeout'));
 
-			await expect(service.inviteEmployee(inviteDto)).rejects.toThrow(
-				'Network timeout'
-			);
+			await expect(service.inviteEmployee(inviteDto)).rejects.toThrow('Network timeout');
 		});
 	});
 });
diff --git a/services/mana-core-auth/src/auth/services/better-auth.service.ts b/services/mana-core-auth/src/auth/services/better-auth.service.ts
index 3d07d852b..20233d5e2 100644
--- a/services/mana-core-auth/src/auth/services/better-auth.service.ts
+++ b/services/mana-core-auth/src/auth/services/better-auth.service.ts
@@ -24,13 +24,7 @@ import { ConfigService } from '@nestjs/config';
 import { createBetterAuth, type BetterAuthInstance } from '../better-auth.config';
 import { getDb } from '../../db/connection';
 import { balances, organizationBalances } from '../../db/schema/credits.schema';
-import {
-	hasUser,
-	hasToken,
-	hasMember,
-	hasMembers,
-	hasSession,
-} from '../types/better-auth.types';
+import { hasUser, hasToken, hasMember, hasMembers, hasSession } from '../types/better-auth.types';
 import type {
 	RegisterB2CDto,
 	RegisterB2BDto,
diff --git a/services/mana-core-auth/src/credits/credits.service.spec.ts b/services/mana-core-auth/src/credits/credits.service.spec.ts
index 86b9d0ca3..430d88af6 100644
--- a/services/mana-core-auth/src/credits/credits.service.spec.ts
+++ b/services/mana-core-auth/src/credits/credits.service.spec.ts
@@ -360,9 +360,7 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(
-				BadRequestException
-			);
+			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(BadRequestException);
 			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(
 				'Insufficient credits'
 			);
@@ -387,9 +385,7 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(
-				NotFoundException
-			);
+			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(NotFoundException);
 			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(
 				'User balance not found'
 			);
@@ -436,9 +432,7 @@ describe('CreditsService', () => {
 					values: jest.fn().mockReturnThis(),
 				};
 
-				txMock.returning.mockResolvedValue([
-					mockTransactionFactory.create(userId),
-				]);
+				txMock.returning.mockResolvedValue([mockTransactionFactory.create(userId)]);
 
 				return callback(txMock);
 			});
@@ -477,9 +471,7 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(
-				ConflictException
-			);
+			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(ConflictException);
 			await expect(service.useCredits(userId, useCreditsDto)).rejects.toThrow(
 				'Balance was modified by another transaction'
 			);
@@ -551,9 +543,7 @@ describe('CreditsService', () => {
 					}),
 				};
 
-				txMock.returning.mockResolvedValue([
-					mockTransactionFactory.create(userId),
-				]);
+				txMock.returning.mockResolvedValue([mockTransactionFactory.create(userId)]);
 
 				return callback(txMock);
 			});
@@ -615,9 +605,7 @@ describe('CreditsService', () => {
 					}),
 				};
 
-				txMock.returning.mockResolvedValue([
-					mockTransactionFactory.create(userId),
-				]);
+				txMock.returning.mockResolvedValue([mockTransactionFactory.create(userId)]);
 
 				return callback(txMock);
 			});
@@ -795,12 +783,7 @@ describe('CreditsService', () => {
 				lastDailyResetAt: lastMonth,
 			});
 
-			mockDb.mockResults(
-				[mockBalance],
-				[],
-				[],
-				[{ ...mockBalance, freeCreditsRemaining: 55 }]
-			);
+			mockDb.mockResults([mockBalance], [], [], [{ ...mockBalance, freeCreditsRemaining: 55 }]);
 
 			await service.getBalance(userId);
 
@@ -863,9 +846,7 @@ describe('CreditsService', () => {
 					values: jest.fn().mockReturnThis(),
 				};
 
-				txMock.returning.mockResolvedValue([
-					mockTransactionFactory.create(userId, { amount: 0 }),
-				]);
+				txMock.returning.mockResolvedValue([mockTransactionFactory.create(userId, { amount: 0 })]);
 
 				return callback(txMock);
 			});
@@ -908,9 +889,7 @@ describe('CreditsService', () => {
 					values: jest.fn().mockReturnThis(),
 				};
 
-				txMock.returning.mockResolvedValue([
-					mockTransactionFactory.create(userId),
-				]);
+				txMock.returning.mockResolvedValue([mockTransactionFactory.create(userId)]);
 
 				return callback(txMock);
 			});
@@ -1126,9 +1105,9 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(
-				service.allocateCredits(allocatorUserId, allocateDto)
-			).rejects.toThrow(ForbiddenException);
+			await expect(service.allocateCredits(allocatorUserId, allocateDto)).rejects.toThrow(
+				ForbiddenException
+			);
 		});
 
 		it('should throw BadRequestException if org has insufficient available credits', async () => {
@@ -1167,9 +1146,9 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(
-				service.allocateCredits(allocatorUserId, allocateDto)
-			).rejects.toThrow(BadRequestException);
+			await expect(service.allocateCredits(allocatorUserId, allocateDto)).rejects.toThrow(
+				BadRequestException
+			);
 		});
 
 		it('should auto-create employee balance if it does not exist', async () => {
@@ -1530,12 +1509,12 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(
-				service.allocateCredits(allocatorUserId, allocateDto)
-			).rejects.toThrow(ConflictException);
-			await expect(
-				service.allocateCredits(allocatorUserId, allocateDto)
-			).rejects.toThrow('Organization balance was modified by another transaction');
+			await expect(service.allocateCredits(allocatorUserId, allocateDto)).rejects.toThrow(
+				ConflictException
+			);
+			await expect(service.allocateCredits(allocatorUserId, allocateDto)).rejects.toThrow(
+				'Organization balance was modified by another transaction'
+			);
 		});
 	});
 
@@ -1671,12 +1650,12 @@ describe('CreditsService', () => {
 			// Mock: No org balance found - .limit(1) returns empty
 			mockDb.limit.mockResolvedValueOnce([]);
 
-			await expect(
-				service.getOrganizationBalance(organizationId)
-			).rejects.toThrow(NotFoundException);
-			await expect(
-				service.getOrganizationBalance(organizationId)
-			).rejects.toThrow('Organization balance not found');
+			await expect(service.getOrganizationBalance(organizationId)).rejects.toThrow(
+				NotFoundException
+			);
+			await expect(service.getOrganizationBalance(organizationId)).rejects.toThrow(
+				'Organization balance not found'
+			);
 		});
 	});
 
@@ -1716,9 +1695,7 @@ describe('CreditsService', () => {
 					}),
 				};
 
-				txMock.returning.mockResolvedValue([
-					mockTransactionFactory.create(userId),
-				]);
+				txMock.returning.mockResolvedValue([mockTransactionFactory.create(userId)]);
 
 				return callback(txMock);
 			});
@@ -1769,9 +1746,7 @@ describe('CreditsService', () => {
 					}),
 				};
 
-				txMock.returning.mockResolvedValue([
-					mockTransactionFactory.create(userId),
-				]);
+				txMock.returning.mockResolvedValue([mockTransactionFactory.create(userId)]);
 
 				return callback(txMock);
 			});
@@ -1843,12 +1818,12 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(
-				service.deductCredits(userId, useCreditsDto, organizationId)
-			).rejects.toThrow(ConflictException);
-			await expect(
-				service.deductCredits(userId, useCreditsDto, organizationId)
-			).rejects.toThrow('Balance was modified by another transaction');
+			await expect(service.deductCredits(userId, useCreditsDto, organizationId)).rejects.toThrow(
+				ConflictException
+			);
+			await expect(service.deductCredits(userId, useCreditsDto, organizationId)).rejects.toThrow(
+				'Balance was modified by another transaction'
+			);
 		});
 
 		it('should handle insufficient credits error', async () => {
@@ -1876,12 +1851,12 @@ describe('CreditsService', () => {
 				return callback(txMock);
 			});
 
-			await expect(
-				service.deductCredits(userId, useCreditsDto, organizationId)
-			).rejects.toThrow(BadRequestException);
-			await expect(
-				service.deductCredits(userId, useCreditsDto, organizationId)
-			).rejects.toThrow('Insufficient credits');
+			await expect(service.deductCredits(userId, useCreditsDto, organizationId)).rejects.toThrow(
+				BadRequestException
+			);
+			await expect(service.deductCredits(userId, useCreditsDto, organizationId)).rejects.toThrow(
+				'Insufficient credits'
+			);
 		});
 	});
 });
diff --git a/services/mana-core-auth/src/credits/credits.service.ts b/services/mana-core-auth/src/credits/credits.service.ts
index f7b5e8511..c19cff448 100644
--- a/services/mana-core-auth/src/credits/credits.service.ts
+++ b/services/mana-core-auth/src/credits/credits.service.ts
@@ -341,18 +341,11 @@ export class CreditsService {
 			const [member] = await tx
 				.select()
 				.from(members)
-				.where(
-					and(
-						eq(members.organizationId, organizationId),
-						eq(members.userId, allocatorUserId)
-					)
-				)
+				.where(and(eq(members.organizationId, organizationId), eq(members.userId, allocatorUserId)))
 				.limit(1);
 
 			if (!member || member.role !== 'owner') {
-				throw new ForbiddenException(
-					'Only organization owners can allocate credits'
-				);
+				throw new ForbiddenException('Only organization owners can allocate credits');
 			}
 
 			// 2. Get organization balance with row lock
@@ -441,12 +434,7 @@ export class CreditsService {
 					version: employeeBalance.version + 1,
 					updatedAt: new Date(),
 				})
-				.where(
-					and(
-						eq(balances.userId, employeeId),
-						eq(balances.version, employeeBalance.version)
-					)
-				)
+				.where(and(eq(balances.userId, employeeId), eq(balances.version, employeeBalance.version)))
 				.returning();
 
 			if (updateEmployeeResult.length === 0) {
@@ -506,11 +494,7 @@ export class CreditsService {
 		const db = this.getDb();
 
 		// Get employee's personal balance
-		const [balance] = await db
-			.select()
-			.from(balances)
-			.where(eq(balances.userId, userId))
-			.limit(1);
+		const [balance] = await db.select().from(balances).where(eq(balances.userId, userId)).limit(1);
 
 		if (!balance) {
 			return null;
@@ -571,11 +555,7 @@ export class CreditsService {
 	 * Deduct credits with organization tracking
 	 * Enhanced version of useCredits that tracks organization_id for B2B users
 	 */
-	async deductCredits(
-		userId: string,
-		useCreditsDto: UseCreditsDto,
-		organizationId?: string
-	) {
+	async deductCredits(userId: string, useCreditsDto: UseCreditsDto, organizationId?: string) {
 		const db = this.getDb();
 
 		// Check for idempotency
diff --git a/services/mana-core-auth/src/db/migrations/meta/0001_snapshot.json b/services/mana-core-auth/src/db/migrations/meta/0001_snapshot.json
index 4a2b5fe3e..c3e223168 100644
--- a/services/mana-core-auth/src/db/migrations/meta/0001_snapshot.json
+++ b/services/mana-core-auth/src/db/migrations/meta/0001_snapshot.json
@@ -1,1600 +1,1501 @@
 {
-  "id": "ecb1358f-1cde-49ae-973b-4a2d9d7d5c2b",
-  "prevId": "83697ac3-d241-4743-96a1-880ad990aa0b",
-  "version": "7",
-  "dialect": "postgresql",
-  "tables": {
-    "auth.accounts": {
-      "name": "accounts",
-      "schema": "auth",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "provider": {
-          "name": "provider",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "provider_account_id": {
-          "name": "provider_account_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "access_token": {
-          "name": "access_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "refresh_token": {
-          "name": "refresh_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "token_type": {
-          "name": "token_type",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "scope": {
-          "name": "scope",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "id_token": {
-          "name": "id_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "metadata": {
-          "name": "metadata",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "accounts_user_id_users_id_fk": {
-          "name": "accounts_user_id_users_id_fk",
-          "tableFrom": "accounts",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "auth.passwords": {
-      "name": "passwords",
-      "schema": "auth",
-      "columns": {
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "hashed_password": {
-          "name": "hashed_password",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "passwords_user_id_users_id_fk": {
-          "name": "passwords_user_id_users_id_fk",
-          "tableFrom": "passwords",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "auth.security_events": {
-      "name": "security_events",
-      "schema": "auth",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "event_type": {
-          "name": "event_type",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "ip_address": {
-          "name": "ip_address",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_agent": {
-          "name": "user_agent",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "metadata": {
-          "name": "metadata",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "security_events_user_id_users_id_fk": {
-          "name": "security_events_user_id_users_id_fk",
-          "tableFrom": "security_events",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "auth.sessions": {
-      "name": "sessions",
-      "schema": "auth",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "token": {
-          "name": "token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "refresh_token": {
-          "name": "refresh_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "refresh_token_expires_at": {
-          "name": "refresh_token_expires_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "ip_address": {
-          "name": "ip_address",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_agent": {
-          "name": "user_agent",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "device_id": {
-          "name": "device_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "device_name": {
-          "name": "device_name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "last_activity_at": {
-          "name": "last_activity_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "revoked_at": {
-          "name": "revoked_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "sessions_user_id_users_id_fk": {
-          "name": "sessions_user_id_users_id_fk",
-          "tableFrom": "sessions",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "sessions_token_unique": {
-          "name": "sessions_token_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
-        },
-        "sessions_refresh_token_unique": {
-          "name": "sessions_refresh_token_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "refresh_token"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "auth.two_factor_auth": {
-      "name": "two_factor_auth",
-      "schema": "auth",
-      "columns": {
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "secret": {
-          "name": "secret",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "enabled": {
-          "name": "enabled",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "backup_codes": {
-          "name": "backup_codes",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "enabled_at": {
-          "name": "enabled_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "two_factor_auth_user_id_users_id_fk": {
-          "name": "two_factor_auth_user_id_users_id_fk",
-          "tableFrom": "two_factor_auth",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "auth.users": {
-      "name": "users",
-      "schema": "auth",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email_verified": {
-          "name": "email_verified",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "avatar_url": {
-          "name": "avatar_url",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "role": {
-          "name": "role",
-          "type": "user_role",
-          "typeSchema": "public",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'user'"
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "deleted_at": {
-          "name": "deleted_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "users_email_unique": {
-          "name": "users_email_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "email"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "auth.verification_tokens": {
-      "name": "verification_tokens",
-      "schema": "auth",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "token": {
-          "name": "token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "type": {
-          "name": "type",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "used_at": {
-          "name": "used_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "verification_tokens_user_id_users_id_fk": {
-          "name": "verification_tokens_user_id_users_id_fk",
-          "tableFrom": "verification_tokens",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "verification_tokens_token_unique": {
-          "name": "verification_tokens_token_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "token"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "credits.balances": {
-      "name": "balances",
-      "schema": "credits",
-      "columns": {
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "balance": {
-          "name": "balance",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        },
-        "free_credits_remaining": {
-          "name": "free_credits_remaining",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 150
-        },
-        "daily_free_credits": {
-          "name": "daily_free_credits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 5
-        },
-        "last_daily_reset_at": {
-          "name": "last_daily_reset_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false,
-          "default": "now()"
-        },
-        "total_earned": {
-          "name": "total_earned",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        },
-        "total_spent": {
-          "name": "total_spent",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        },
-        "version": {
-          "name": "version",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "balances_user_id_users_id_fk": {
-          "name": "balances_user_id_users_id_fk",
-          "tableFrom": "balances",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "credits.packages": {
-      "name": "packages",
-      "schema": "credits",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "credits": {
-          "name": "credits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "price_euro_cents": {
-          "name": "price_euro_cents",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "stripe_price_id": {
-          "name": "stripe_price_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "active": {
-          "name": "active",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": true
-        },
-        "sort_order": {
-          "name": "sort_order",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        },
-        "metadata": {
-          "name": "metadata",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "packages_stripe_price_id_unique": {
-          "name": "packages_stripe_price_id_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "stripe_price_id"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "credits.purchases": {
-      "name": "purchases",
-      "schema": "credits",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "package_id": {
-          "name": "package_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "credits": {
-          "name": "credits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "price_euro_cents": {
-          "name": "price_euro_cents",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "stripe_payment_intent_id": {
-          "name": "stripe_payment_intent_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "stripe_customer_id": {
-          "name": "stripe_customer_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "status": {
-          "name": "status",
-          "type": "transaction_status",
-          "typeSchema": "public",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'pending'"
-        },
-        "metadata": {
-          "name": "metadata",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "completed_at": {
-          "name": "completed_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {
-        "purchases_user_id_idx": {
-          "name": "purchases_user_id_idx",
-          "columns": [
-            {
-              "expression": "user_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "purchases_stripe_payment_intent_id_idx": {
-          "name": "purchases_stripe_payment_intent_id_idx",
-          "columns": [
-            {
-              "expression": "stripe_payment_intent_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "purchases_user_id_users_id_fk": {
-          "name": "purchases_user_id_users_id_fk",
-          "tableFrom": "purchases",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "purchases_package_id_packages_id_fk": {
-          "name": "purchases_package_id_packages_id_fk",
-          "tableFrom": "purchases",
-          "tableTo": "packages",
-          "schemaTo": "credits",
-          "columnsFrom": [
-            "package_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "purchases_stripe_payment_intent_id_unique": {
-          "name": "purchases_stripe_payment_intent_id_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "stripe_payment_intent_id"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "credits.transactions": {
-      "name": "transactions",
-      "schema": "credits",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "type": {
-          "name": "type",
-          "type": "transaction_type",
-          "typeSchema": "public",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "status": {
-          "name": "status",
-          "type": "transaction_status",
-          "typeSchema": "public",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'pending'"
-        },
-        "amount": {
-          "name": "amount",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "balance_before": {
-          "name": "balance_before",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "balance_after": {
-          "name": "balance_after",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "metadata": {
-          "name": "metadata",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "idempotency_key": {
-          "name": "idempotency_key",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "completed_at": {
-          "name": "completed_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {
-        "transactions_user_id_idx": {
-          "name": "transactions_user_id_idx",
-          "columns": [
-            {
-              "expression": "user_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "transactions_app_id_idx": {
-          "name": "transactions_app_id_idx",
-          "columns": [
-            {
-              "expression": "app_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "transactions_created_at_idx": {
-          "name": "transactions_created_at_idx",
-          "columns": [
-            {
-              "expression": "created_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "transactions_idempotency_key_idx": {
-          "name": "transactions_idempotency_key_idx",
-          "columns": [
-            {
-              "expression": "idempotency_key",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "transactions_user_id_users_id_fk": {
-          "name": "transactions_user_id_users_id_fk",
-          "tableFrom": "transactions",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "transactions_idempotency_key_unique": {
-          "name": "transactions_idempotency_key_unique",
-          "nullsNotDistinct": false,
-          "columns": [
-            "idempotency_key"
-          ]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "credits.usage_stats": {
-      "name": "usage_stats",
-      "schema": "credits",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "credits_used": {
-          "name": "credits_used",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "date": {
-          "name": "date",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "metadata": {
-          "name": "metadata",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {
-        "usage_stats_user_id_date_idx": {
-          "name": "usage_stats_user_id_date_idx",
-          "columns": [
-            {
-              "expression": "user_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            },
-            {
-              "expression": "date",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "usage_stats_app_id_date_idx": {
-          "name": "usage_stats_app_id_date_idx",
-          "columns": [
-            {
-              "expression": "app_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            },
-            {
-              "expression": "date",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "usage_stats_user_id_users_id_fk": {
-          "name": "usage_stats_user_id_users_id_fk",
-          "tableFrom": "usage_stats",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "feedback.feedback_votes": {
-      "name": "feedback_votes",
-      "schema": "feedback",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "feedback_id": {
-          "name": "feedback_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        }
-      },
-      "indexes": {
-        "feedback_vote_unique": {
-          "name": "feedback_vote_unique",
-          "columns": [
-            {
-              "expression": "feedback_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            },
-            {
-              "expression": "user_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": true,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "feedback_votes_feedback_idx": {
-          "name": "feedback_votes_feedback_idx",
-          "columns": [
-            {
-              "expression": "feedback_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "feedback_votes_feedback_id_user_feedback_id_fk": {
-          "name": "feedback_votes_feedback_id_user_feedback_id_fk",
-          "tableFrom": "feedback_votes",
-          "tableTo": "user_feedback",
-          "schemaTo": "feedback",
-          "columnsFrom": [
-            "feedback_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        },
-        "feedback_votes_user_id_users_id_fk": {
-          "name": "feedback_votes_user_id_users_id_fk",
-          "tableFrom": "feedback_votes",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    },
-    "feedback.user_feedback": {
-      "name": "user_feedback",
-      "schema": "feedback",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "app_id": {
-          "name": "app_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "title": {
-          "name": "title",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "feedback_text": {
-          "name": "feedback_text",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "category": {
-          "name": "category",
-          "type": "feedback_category",
-          "typeSchema": "public",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'feature'"
-        },
-        "status": {
-          "name": "status",
-          "type": "feedback_status",
-          "typeSchema": "public",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "'submitted'"
-        },
-        "is_public": {
-          "name": "is_public",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "admin_response": {
-          "name": "admin_response",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "vote_count": {
-          "name": "vote_count",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": true,
-          "default": 0
-        },
-        "device_info": {
-          "name": "device_info",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": true,
-          "default": "now()"
-        },
-        "published_at": {
-          "name": "published_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "completed_at": {
-          "name": "completed_at",
-          "type": "timestamp with time zone",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {
-        "feedback_user_idx": {
-          "name": "feedback_user_idx",
-          "columns": [
-            {
-              "expression": "user_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "feedback_app_idx": {
-          "name": "feedback_app_idx",
-          "columns": [
-            {
-              "expression": "app_id",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "feedback_public_idx": {
-          "name": "feedback_public_idx",
-          "columns": [
-            {
-              "expression": "is_public",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "feedback_status_idx": {
-          "name": "feedback_status_idx",
-          "columns": [
-            {
-              "expression": "status",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        },
-        "feedback_created_at_idx": {
-          "name": "feedback_created_at_idx",
-          "columns": [
-            {
-              "expression": "created_at",
-              "isExpression": false,
-              "asc": true,
-              "nulls": "last"
-            }
-          ],
-          "isUnique": false,
-          "concurrently": false,
-          "method": "btree",
-          "with": {}
-        }
-      },
-      "foreignKeys": {
-        "user_feedback_user_id_users_id_fk": {
-          "name": "user_feedback_user_id_users_id_fk",
-          "tableFrom": "user_feedback",
-          "tableTo": "users",
-          "schemaTo": "auth",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": false
-    }
-  },
-  "enums": {
-    "public.user_role": {
-      "name": "user_role",
-      "schema": "public",
-      "values": [
-        "user",
-        "admin",
-        "service"
-      ]
-    },
-    "public.transaction_status": {
-      "name": "transaction_status",
-      "schema": "public",
-      "values": [
-        "pending",
-        "completed",
-        "failed",
-        "cancelled"
-      ]
-    },
-    "public.transaction_type": {
-      "name": "transaction_type",
-      "schema": "public",
-      "values": [
-        "purchase",
-        "usage",
-        "refund",
-        "bonus",
-        "expiry",
-        "adjustment"
-      ]
-    },
-    "public.feedback_category": {
-      "name": "feedback_category",
-      "schema": "public",
-      "values": [
-        "bug",
-        "feature",
-        "improvement",
-        "question",
-        "other"
-      ]
-    },
-    "public.feedback_status": {
-      "name": "feedback_status",
-      "schema": "public",
-      "values": [
-        "submitted",
-        "under_review",
-        "planned",
-        "in_progress",
-        "completed",
-        "declined"
-      ]
-    }
-  },
-  "schemas": {
-    "auth": "auth",
-    "credits": "credits",
-    "feedback": "feedback"
-  },
-  "sequences": {},
-  "roles": {},
-  "policies": {},
-  "views": {},
-  "_meta": {
-    "columns": {},
-    "schemas": {},
-    "tables": {}
-  }
-}
\ No newline at end of file
+	"id": "ecb1358f-1cde-49ae-973b-4a2d9d7d5c2b",
+	"prevId": "83697ac3-d241-4743-96a1-880ad990aa0b",
+	"version": "7",
+	"dialect": "postgresql",
+	"tables": {
+		"auth.accounts": {
+			"name": "accounts",
+			"schema": "auth",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"provider": {
+					"name": "provider",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"provider_account_id": {
+					"name": "provider_account_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"access_token": {
+					"name": "access_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"refresh_token": {
+					"name": "refresh_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"token_type": {
+					"name": "token_type",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"scope": {
+					"name": "scope",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"id_token": {
+					"name": "id_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"metadata": {
+					"name": "metadata",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"accounts_user_id_users_id_fk": {
+					"name": "accounts_user_id_users_id_fk",
+					"tableFrom": "accounts",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"auth.passwords": {
+			"name": "passwords",
+			"schema": "auth",
+			"columns": {
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"hashed_password": {
+					"name": "hashed_password",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"passwords_user_id_users_id_fk": {
+					"name": "passwords_user_id_users_id_fk",
+					"tableFrom": "passwords",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"auth.security_events": {
+			"name": "security_events",
+			"schema": "auth",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"event_type": {
+					"name": "event_type",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"ip_address": {
+					"name": "ip_address",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"user_agent": {
+					"name": "user_agent",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"metadata": {
+					"name": "metadata",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"security_events_user_id_users_id_fk": {
+					"name": "security_events_user_id_users_id_fk",
+					"tableFrom": "security_events",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"auth.sessions": {
+			"name": "sessions",
+			"schema": "auth",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"token": {
+					"name": "token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"refresh_token": {
+					"name": "refresh_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"refresh_token_expires_at": {
+					"name": "refresh_token_expires_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"ip_address": {
+					"name": "ip_address",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"user_agent": {
+					"name": "user_agent",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"device_id": {
+					"name": "device_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"device_name": {
+					"name": "device_name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"last_activity_at": {
+					"name": "last_activity_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"revoked_at": {
+					"name": "revoked_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"sessions_user_id_users_id_fk": {
+					"name": "sessions_user_id_users_id_fk",
+					"tableFrom": "sessions",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"sessions_token_unique": {
+					"name": "sessions_token_unique",
+					"nullsNotDistinct": false,
+					"columns": ["token"]
+				},
+				"sessions_refresh_token_unique": {
+					"name": "sessions_refresh_token_unique",
+					"nullsNotDistinct": false,
+					"columns": ["refresh_token"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"auth.two_factor_auth": {
+			"name": "two_factor_auth",
+			"schema": "auth",
+			"columns": {
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"secret": {
+					"name": "secret",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"enabled": {
+					"name": "enabled",
+					"type": "boolean",
+					"primaryKey": false,
+					"notNull": true,
+					"default": false
+				},
+				"backup_codes": {
+					"name": "backup_codes",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"enabled_at": {
+					"name": "enabled_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"two_factor_auth_user_id_users_id_fk": {
+					"name": "two_factor_auth_user_id_users_id_fk",
+					"tableFrom": "two_factor_auth",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"auth.users": {
+			"name": "users",
+			"schema": "auth",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"email": {
+					"name": "email",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"email_verified": {
+					"name": "email_verified",
+					"type": "boolean",
+					"primaryKey": false,
+					"notNull": true,
+					"default": false
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"avatar_url": {
+					"name": "avatar_url",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"role": {
+					"name": "role",
+					"type": "user_role",
+					"typeSchema": "public",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "'user'"
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"deleted_at": {
+					"name": "deleted_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"users_email_unique": {
+					"name": "users_email_unique",
+					"nullsNotDistinct": false,
+					"columns": ["email"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"auth.verification_tokens": {
+			"name": "verification_tokens",
+			"schema": "auth",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"token": {
+					"name": "token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"type": {
+					"name": "type",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"used_at": {
+					"name": "used_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"verification_tokens_user_id_users_id_fk": {
+					"name": "verification_tokens_user_id_users_id_fk",
+					"tableFrom": "verification_tokens",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"verification_tokens_token_unique": {
+					"name": "verification_tokens_token_unique",
+					"nullsNotDistinct": false,
+					"columns": ["token"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"credits.balances": {
+			"name": "balances",
+			"schema": "credits",
+			"columns": {
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"balance": {
+					"name": "balance",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 0
+				},
+				"free_credits_remaining": {
+					"name": "free_credits_remaining",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 150
+				},
+				"daily_free_credits": {
+					"name": "daily_free_credits",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 5
+				},
+				"last_daily_reset_at": {
+					"name": "last_daily_reset_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false,
+					"default": "now()"
+				},
+				"total_earned": {
+					"name": "total_earned",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 0
+				},
+				"total_spent": {
+					"name": "total_spent",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 0
+				},
+				"version": {
+					"name": "version",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 0
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"balances_user_id_users_id_fk": {
+					"name": "balances_user_id_users_id_fk",
+					"tableFrom": "balances",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"credits.packages": {
+			"name": "packages",
+			"schema": "credits",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"description": {
+					"name": "description",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"credits": {
+					"name": "credits",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"price_euro_cents": {
+					"name": "price_euro_cents",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"stripe_price_id": {
+					"name": "stripe_price_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"active": {
+					"name": "active",
+					"type": "boolean",
+					"primaryKey": false,
+					"notNull": true,
+					"default": true
+				},
+				"sort_order": {
+					"name": "sort_order",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 0
+				},
+				"metadata": {
+					"name": "metadata",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"packages_stripe_price_id_unique": {
+					"name": "packages_stripe_price_id_unique",
+					"nullsNotDistinct": false,
+					"columns": ["stripe_price_id"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"credits.purchases": {
+			"name": "purchases",
+			"schema": "credits",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"package_id": {
+					"name": "package_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"credits": {
+					"name": "credits",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"price_euro_cents": {
+					"name": "price_euro_cents",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"stripe_payment_intent_id": {
+					"name": "stripe_payment_intent_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"stripe_customer_id": {
+					"name": "stripe_customer_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"status": {
+					"name": "status",
+					"type": "transaction_status",
+					"typeSchema": "public",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "'pending'"
+				},
+				"metadata": {
+					"name": "metadata",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"completed_at": {
+					"name": "completed_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {
+				"purchases_user_id_idx": {
+					"name": "purchases_user_id_idx",
+					"columns": [
+						{
+							"expression": "user_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"purchases_stripe_payment_intent_id_idx": {
+					"name": "purchases_stripe_payment_intent_id_idx",
+					"columns": [
+						{
+							"expression": "stripe_payment_intent_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				}
+			},
+			"foreignKeys": {
+				"purchases_user_id_users_id_fk": {
+					"name": "purchases_user_id_users_id_fk",
+					"tableFrom": "purchases",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				},
+				"purchases_package_id_packages_id_fk": {
+					"name": "purchases_package_id_packages_id_fk",
+					"tableFrom": "purchases",
+					"tableTo": "packages",
+					"schemaTo": "credits",
+					"columnsFrom": ["package_id"],
+					"columnsTo": ["id"],
+					"onDelete": "no action",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"purchases_stripe_payment_intent_id_unique": {
+					"name": "purchases_stripe_payment_intent_id_unique",
+					"nullsNotDistinct": false,
+					"columns": ["stripe_payment_intent_id"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"credits.transactions": {
+			"name": "transactions",
+			"schema": "credits",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"type": {
+					"name": "type",
+					"type": "transaction_type",
+					"typeSchema": "public",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"status": {
+					"name": "status",
+					"type": "transaction_status",
+					"typeSchema": "public",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "'pending'"
+				},
+				"amount": {
+					"name": "amount",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"balance_before": {
+					"name": "balance_before",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"balance_after": {
+					"name": "balance_after",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"app_id": {
+					"name": "app_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"description": {
+					"name": "description",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"metadata": {
+					"name": "metadata",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"idempotency_key": {
+					"name": "idempotency_key",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"completed_at": {
+					"name": "completed_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {
+				"transactions_user_id_idx": {
+					"name": "transactions_user_id_idx",
+					"columns": [
+						{
+							"expression": "user_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"transactions_app_id_idx": {
+					"name": "transactions_app_id_idx",
+					"columns": [
+						{
+							"expression": "app_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"transactions_created_at_idx": {
+					"name": "transactions_created_at_idx",
+					"columns": [
+						{
+							"expression": "created_at",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"transactions_idempotency_key_idx": {
+					"name": "transactions_idempotency_key_idx",
+					"columns": [
+						{
+							"expression": "idempotency_key",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				}
+			},
+			"foreignKeys": {
+				"transactions_user_id_users_id_fk": {
+					"name": "transactions_user_id_users_id_fk",
+					"tableFrom": "transactions",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"transactions_idempotency_key_unique": {
+					"name": "transactions_idempotency_key_unique",
+					"nullsNotDistinct": false,
+					"columns": ["idempotency_key"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"credits.usage_stats": {
+			"name": "usage_stats",
+			"schema": "credits",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"app_id": {
+					"name": "app_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"credits_used": {
+					"name": "credits_used",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"date": {
+					"name": "date",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"metadata": {
+					"name": "metadata",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {
+				"usage_stats_user_id_date_idx": {
+					"name": "usage_stats_user_id_date_idx",
+					"columns": [
+						{
+							"expression": "user_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						},
+						{
+							"expression": "date",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"usage_stats_app_id_date_idx": {
+					"name": "usage_stats_app_id_date_idx",
+					"columns": [
+						{
+							"expression": "app_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						},
+						{
+							"expression": "date",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				}
+			},
+			"foreignKeys": {
+				"usage_stats_user_id_users_id_fk": {
+					"name": "usage_stats_user_id_users_id_fk",
+					"tableFrom": "usage_stats",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"feedback.feedback_votes": {
+			"name": "feedback_votes",
+			"schema": "feedback",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"feedback_id": {
+					"name": "feedback_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				}
+			},
+			"indexes": {
+				"feedback_vote_unique": {
+					"name": "feedback_vote_unique",
+					"columns": [
+						{
+							"expression": "feedback_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						},
+						{
+							"expression": "user_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": true,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"feedback_votes_feedback_idx": {
+					"name": "feedback_votes_feedback_idx",
+					"columns": [
+						{
+							"expression": "feedback_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				}
+			},
+			"foreignKeys": {
+				"feedback_votes_feedback_id_user_feedback_id_fk": {
+					"name": "feedback_votes_feedback_id_user_feedback_id_fk",
+					"tableFrom": "feedback_votes",
+					"tableTo": "user_feedback",
+					"schemaTo": "feedback",
+					"columnsFrom": ["feedback_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				},
+				"feedback_votes_user_id_users_id_fk": {
+					"name": "feedback_votes_user_id_users_id_fk",
+					"tableFrom": "feedback_votes",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		},
+		"feedback.user_feedback": {
+			"name": "user_feedback",
+			"schema": "feedback",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "uuid",
+					"primaryKey": true,
+					"notNull": true,
+					"default": "gen_random_uuid()"
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "uuid",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"app_id": {
+					"name": "app_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"title": {
+					"name": "title",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"feedback_text": {
+					"name": "feedback_text",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"category": {
+					"name": "category",
+					"type": "feedback_category",
+					"typeSchema": "public",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "'feature'"
+				},
+				"status": {
+					"name": "status",
+					"type": "feedback_status",
+					"typeSchema": "public",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "'submitted'"
+				},
+				"is_public": {
+					"name": "is_public",
+					"type": "boolean",
+					"primaryKey": false,
+					"notNull": true,
+					"default": false
+				},
+				"admin_response": {
+					"name": "admin_response",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"vote_count": {
+					"name": "vote_count",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"default": 0
+				},
+				"device_info": {
+					"name": "device_info",
+					"type": "jsonb",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": true,
+					"default": "now()"
+				},
+				"published_at": {
+					"name": "published_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"completed_at": {
+					"name": "completed_at",
+					"type": "timestamp with time zone",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {
+				"feedback_user_idx": {
+					"name": "feedback_user_idx",
+					"columns": [
+						{
+							"expression": "user_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"feedback_app_idx": {
+					"name": "feedback_app_idx",
+					"columns": [
+						{
+							"expression": "app_id",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"feedback_public_idx": {
+					"name": "feedback_public_idx",
+					"columns": [
+						{
+							"expression": "is_public",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"feedback_status_idx": {
+					"name": "feedback_status_idx",
+					"columns": [
+						{
+							"expression": "status",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				},
+				"feedback_created_at_idx": {
+					"name": "feedback_created_at_idx",
+					"columns": [
+						{
+							"expression": "created_at",
+							"isExpression": false,
+							"asc": true,
+							"nulls": "last"
+						}
+					],
+					"isUnique": false,
+					"concurrently": false,
+					"method": "btree",
+					"with": {}
+				}
+			},
+			"foreignKeys": {
+				"user_feedback_user_id_users_id_fk": {
+					"name": "user_feedback_user_id_users_id_fk",
+					"tableFrom": "user_feedback",
+					"tableTo": "users",
+					"schemaTo": "auth",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": false
+		}
+	},
+	"enums": {
+		"public.user_role": {
+			"name": "user_role",
+			"schema": "public",
+			"values": ["user", "admin", "service"]
+		},
+		"public.transaction_status": {
+			"name": "transaction_status",
+			"schema": "public",
+			"values": ["pending", "completed", "failed", "cancelled"]
+		},
+		"public.transaction_type": {
+			"name": "transaction_type",
+			"schema": "public",
+			"values": ["purchase", "usage", "refund", "bonus", "expiry", "adjustment"]
+		},
+		"public.feedback_category": {
+			"name": "feedback_category",
+			"schema": "public",
+			"values": ["bug", "feature", "improvement", "question", "other"]
+		},
+		"public.feedback_status": {
+			"name": "feedback_status",
+			"schema": "public",
+			"values": ["submitted", "under_review", "planned", "in_progress", "completed", "declined"]
+		}
+	},
+	"schemas": {
+		"auth": "auth",
+		"credits": "credits",
+		"feedback": "feedback"
+	},
+	"sequences": {},
+	"roles": {},
+	"policies": {},
+	"views": {},
+	"_meta": {
+		"columns": {},
+		"schemas": {},
+		"tables": {}
+	}
+}
diff --git a/services/mana-core-auth/src/db/schema/auth.schema.ts b/services/mana-core-auth/src/db/schema/auth.schema.ts
index 6cd683b50..1b509a2e3 100644
--- a/services/mana-core-auth/src/db/schema/auth.schema.ts
+++ b/services/mana-core-auth/src/db/schema/auth.schema.ts
@@ -1,4 +1,13 @@
-import { pgSchema, uuid, text, timestamp, boolean, jsonb, pgEnum, index } from 'drizzle-orm/pg-core';
+import {
+	pgSchema,
+	uuid,
+	text,
+	timestamp,
+	boolean,
+	jsonb,
+	pgEnum,
+	index,
+} from 'drizzle-orm/pg-core';
 
 export const authSchema = pgSchema('auth');
 
diff --git a/services/mana-core-auth/src/feedback/feedback.controller.ts b/services/mana-core-auth/src/feedback/feedback.controller.ts
index 8bb5b18aa..1488263de 100644
--- a/services/mana-core-auth/src/feedback/feedback.controller.ts
+++ b/services/mana-core-auth/src/feedback/feedback.controller.ts
@@ -41,10 +41,7 @@ export class FeedbackController {
 
 	@Get('my')
 	@UseGuards(JwtAuthGuard)
-	async getMyFeedback(
-		@CurrentUser() user: CurrentUserData,
-		@Query('appId') appId?: string
-	) {
+	async getMyFeedback(@CurrentUser() user: CurrentUserData, @Query('appId') appId?: string) {
 		return this.feedbackService.getMyFeedback(user.userId, appId);
 	}
 
diff --git a/services/mana-core-auth/src/feedback/feedback.service.ts b/services/mana-core-auth/src/feedback/feedback.service.ts
index 7ef55cb6b..9bcd914e3 100644
--- a/services/mana-core-auth/src/feedback/feedback.service.ts
+++ b/services/mana-core-auth/src/feedback/feedback.service.ts
@@ -105,7 +105,7 @@ export class FeedbackService {
 									sql`${feedbackVotes.feedbackId} = ANY(${feedbackIds})`
 								)
 							)
-						: [];
+					: [];
 
 			votedFeedbackIds = new Set(userVotes.map((v) => v.feedbackId));
 		}
@@ -144,7 +144,7 @@ export class FeedbackService {
 								sql`${feedbackVotes.feedbackId} = ANY(${feedbackIds})`
 							)
 						)
-					: [];
+				: [];
 
 		const votedFeedbackIds = new Set(userVotes.map((v) => v.feedbackId));
 
diff --git a/services/mana-core-auth/test/e2e/b2b-journey.e2e-spec.ts b/services/mana-core-auth/test/e2e/b2b-journey.e2e-spec.ts
index 996b81ceb..6e28b8d60 100644
--- a/services/mana-core-auth/test/e2e/b2b-journey.e2e-spec.ts
+++ b/services/mana-core-auth/test/e2e/b2b-journey.e2e-spec.ts
@@ -26,7 +26,9 @@ import { randomBytes } from 'crypto';
 
 // Helper to generate random IDs (avoiding nanoid ESM issues in Jest)
 const generateId = (length: number = 16): string => {
-	return randomBytes(Math.ceil(length / 2)).toString('hex').slice(0, length);
+	return randomBytes(Math.ceil(length / 2))
+		.toString('hex')
+		.slice(0, length);
 };
 
 describe('B2B Organization Journey (E2E)', () => {
diff --git a/services/mana-core-auth/test/e2e/b2c-journey.e2e-spec.ts b/services/mana-core-auth/test/e2e/b2c-journey.e2e-spec.ts
index 5c8397259..37d27c8e3 100644
--- a/services/mana-core-auth/test/e2e/b2c-journey.e2e-spec.ts
+++ b/services/mana-core-auth/test/e2e/b2c-journey.e2e-spec.ts
@@ -486,19 +486,13 @@ describe('B2C User Journey (E2E)', () => {
 		});
 
 		it('should reject SQL injection attempts in email field', async () => {
-			const sqlInjectionPayloads = [
-				"admin'--",
-				"' OR '1'='1",
-				"'; DROP TABLE users; --",
-			];
+			const sqlInjectionPayloads = ["admin'--", "' OR '1'='1", "'; DROP TABLE users; --"];
 
 			for (const payload of sqlInjectionPayloads) {
-				const response = await request(app.getHttpServer())
-					.post('/auth/login')
-					.send({
-						email: payload,
-						password: 'SomePassword123!',
-					});
+				const response = await request(app.getHttpServer()).post('/auth/login').send({
+					email: payload,
+					password: 'SomePassword123!',
+				});
 
 				// Should fail safely without SQL injection
 				expect([400, 401]).toContain(response.status);
diff --git a/services/mana-core-auth/test/integration/auth-flow.integration.spec.ts b/services/mana-core-auth/test/integration/auth-flow.integration.spec.ts
index fd0fe98df..c1b71d91a 100644
--- a/services/mana-core-auth/test/integration/auth-flow.integration.spec.ts
+++ b/services/mana-core-auth/test/integration/auth-flow.integration.spec.ts
@@ -217,9 +217,7 @@ describe('Authentication Flow Integration Tests', () => {
 			await authService.logout(sessionId);
 
 			// Attempt to refresh with revoked token
-			await expect(authService.refreshToken(refreshToken)).rejects.toThrow(
-				'Invalid refresh token'
-			);
+			await expect(authService.refreshToken(refreshToken)).rejects.toThrow('Invalid refresh token');
 		});
 	});
 
diff --git a/services/mana-core-auth/test/integration/credit-flow.integration.spec.ts b/services/mana-core-auth/test/integration/credit-flow.integration.spec.ts
index 017b6422e..4589fd3c5 100644
--- a/services/mana-core-auth/test/integration/credit-flow.integration.spec.ts
+++ b/services/mana-core-auth/test/integration/credit-flow.integration.spec.ts
@@ -165,9 +165,7 @@ describe('Credit Flow Integration Tests', () => {
 			// Balance should be unchanged
 			const balanceAfterSecond = await creditsService.getBalance(userId);
 
-			expect(balanceAfterSecond.freeCreditsRemaining).toBe(
-				balanceAfterFirst.freeCreditsRemaining
-			);
+			expect(balanceAfterSecond.freeCreditsRemaining).toBe(balanceAfterFirst.freeCreditsRemaining);
 			expect(balanceAfterSecond.totalSpent).toBe(balanceAfterFirst.totalSpent);
 		});
 
@@ -447,9 +445,7 @@ describe('Credit Flow Integration Tests', () => {
 			// Balance should be unchanged
 			const balanceAfterError = await creditsService.getBalance(userId);
 
-			expect(balanceAfterError.freeCreditsRemaining).toBe(
-				initialBalance.freeCreditsRemaining
-			);
+			expect(balanceAfterError.freeCreditsRemaining).toBe(initialBalance.freeCreditsRemaining);
 			expect(balanceAfterError.balance).toBe(initialBalance.balance);
 			expect(balanceAfterError.totalSpent).toBe(initialBalance.totalSpent);
 		});
diff --git a/services/mana-core-auth/test/jest-e2e.json b/services/mana-core-auth/test/jest-e2e.json
index 81eb3035d..f060d2667 100644
--- a/services/mana-core-auth/test/jest-e2e.json
+++ b/services/mana-core-auth/test/jest-e2e.json
@@ -4,16 +4,17 @@
 	"testEnvironment": "node",
 	"testRegex": ".e2e-spec.ts$",
 	"transform": {
-		"^.+\\.(t|j)s$": ["ts-jest", {
-			"tsconfig": {
-				"esModuleInterop": true,
-				"allowSyntheticDefaultImports": true
+		"^.+\\.(t|j)s$": [
+			"ts-jest",
+			{
+				"tsconfig": {
+					"esModuleInterop": true,
+					"allowSyntheticDefaultImports": true
+				}
 			}
-		}]
+		]
 	},
-	"transformIgnorePatterns": [
-		"node_modules/(?!(nanoid|better-auth)/)"
-	],
+	"transformIgnorePatterns": ["node_modules/(?!(nanoid|better-auth)/)"],
 	"moduleNameMapper": {
 		"^nanoid$": "<rootDir>/__mocks__/nanoid.ts",
 		"^better-auth$": "<rootDir>/__mocks__/better-auth.ts",
diff --git a/services/mana-core-auth/test/setup-e2e.ts b/services/mana-core-auth/test/setup-e2e.ts
index 1af240aab..11590182c 100644
--- a/services/mana-core-auth/test/setup-e2e.ts
+++ b/services/mana-core-auth/test/setup-e2e.ts
@@ -12,7 +12,10 @@ jest.setTimeout(30000);
  * Generate random ID using crypto
  */
 const generateRandomId = (length: number = 10): string => {
-	return crypto.randomBytes(Math.ceil(length / 2)).toString('hex').slice(0, length);
+	return crypto
+		.randomBytes(Math.ceil(length / 2))
+		.toString('hex')
+		.slice(0, length);
 };
 
 /**