feat: add pwa manifest and service worker

Wire up a production service worker and web app manifest with install metadata and icon assets.
Bump project version to 2.1.0 and register the worker from the main page for offline-ready behavior.

Made-with: Cursor

README.md

@@ -80,6 +80,111 @@ npm run test:record
 npm run test:e2e
 ```
 
+### Seed test matches via browser console
+
+Copy/paste this snippet in your browser devtools console while the app is open. It inserts 10 sample matches (mix of 2/3 players, 8/9/10-ball, completed + active) into IndexedDB and reloads the page.
+
+```js
+await (async () => {
+  const DB_NAME = 'BSCScoreDB';
+  const DB_VERSION = 1;
+  const GAMES_STORE = 'games';
+
+  const openDb = () =>
+    new Promise((resolve, reject) => {
+      const request = indexedDB.open(DB_NAME, DB_VERSION);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+
+  const now = Date.now();
+  const minute = 60 * 1000;
+
+  const seedGames = [
+    { players: ['Alex', 'Ben'], gameType: '8-Ball', raceTo: 5, scores: [5, 2], status: 'completed', minutesAgo: 190 },
+    { players: ['Chris', 'Dana', 'Eli'], gameType: '8-Ball', raceTo: 6, scores: [4, 6, 2], status: 'completed', minutesAgo: 175 },
+    { players: ['Faye', 'Gus'], gameType: '9-Ball', raceTo: 7, scores: [7, 5], status: 'completed', minutesAgo: 160 },
+    { players: ['Hugo', 'Iris', 'Jade'], gameType: '9-Ball', raceTo: 4, scores: [2, 3, 1], status: 'active', minutesAgo: 145 },
+    { players: ['Kai', 'Lena'], gameType: '10-Ball', raceTo: 8, scores: [8, 6], status: 'completed', minutesAgo: 130 },
+    { players: ['Mona', 'Nico', 'Omar'], gameType: '10-Ball', raceTo: 5, scores: [5, 1, 4], status: 'completed', minutesAgo: 115 },
+    { players: ['Pia', 'Quin'], gameType: '8-Ball', raceTo: 4, scores: [1, 1], status: 'active', minutesAgo: 100 },
+    { players: ['Rex', 'Sara', 'Timo'], gameType: '9-Ball', raceTo: 3, scores: [3, 2, 0], status: 'completed', minutesAgo: 85 },
+    { players: ['Uma', 'Vik'], gameType: '10-Ball', raceTo: 6, scores: [2, 4], status: 'active', minutesAgo: 70 },
+    { players: ['Will', 'Xena', 'Yara'], gameType: '8-Ball', raceTo: 7, scores: [6, 4, 7], status: 'completed', minutesAgo: 55 },
+  ];
+
+  const gameRecords = seedGames.map((entry, index) => {
+    const createdAtMs = now - entry.minutesAgo * minute;
+    const updatedAtMs = createdAtMs + 15 * 1000;
+    const id = now + index + 1;
+    const isThreePlayer = entry.players.length === 3;
+    const winnerIndex = entry.scores.indexOf(Math.max(...entry.scores));
+
+    const game = {
+      id,
+      gameType: entry.gameType,
+      raceTo: entry.raceTo,
+      status: entry.status,
+      createdAt: new Date(createdAtMs).toISOString(),
+      updatedAt: new Date(updatedAtMs).toISOString(),
+      log: [
+        {
+          type: 'score_change',
+          timestamp: new Date(createdAtMs + 5 * 1000).toISOString(),
+          description: 'Seed data: score progression',
+        },
+        ...(entry.status === 'completed'
+          ? [
+              {
+                type: 'game_complete',
+                timestamp: new Date(updatedAtMs).toISOString(),
+                description: `Winner: ${entry.players[winnerIndex]}`,
+              },
+            ]
+          : []),
+      ],
+      undoStack: [],
+      player1: entry.players[0],
+      player2: entry.players[1],
+      ...(isThreePlayer ? { player3: entry.players[2] } : {}),
+      score1: entry.scores[0],
+      score2: entry.scores[1],
+      ...(isThreePlayer ? { score3: entry.scores[2] } : {}),
+      breakRule: 'winnerbreak',
+      breakOrder: isThreePlayer ? [1, 2, 3] : [1, 2],
+      currentBreakerIdx: index % entry.players.length,
+    };
+
+    return {
+      id,
+      game,
+      lastModified: updatedAtMs,
+      syncStatus: 'local',
+      version: 1,
+      createdAt: createdAtMs,
+    };
+  });
+
+  const db = await openDb();
+
+  await new Promise((resolve, reject) => {
+    const tx = db.transaction([GAMES_STORE], 'readwrite');
+    const store = tx.objectStore(GAMES_STORE);
+
+    for (const record of gameRecords) {
+      store.put(record);
+    }
+
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+    tx.onabort = () => reject(tx.error);
+  });
+
+  console.log(`Inserted ${gameRecords.length} test matches into IndexedDB.`);
+  window.location.reload();
+})();
+```
+
 ### Features
 
 - **Record interactions**: Use Playwright codegen to capture clicks, form fills, and navigation

compose.yml

@@ -0,0 +1,20 @@
+services:
+
+  scorebscgpde:
+    image: nginx
+    restart: unless-stopped
+    volumes:
+      - ./dist:/usr/share/nginx/html:ro
+    container_name: scorebscgpde
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.scorebscgpde.rule=Host(`score.bsc-gp.de`)"
+      - "traefik.http.routers.scorebscgpde.entrypoints=websecure"
+      - "traefik.http.routers.scorebscgpde.tls.certresolver=myresolver"
+    networks:
+      - traefik
+
+# Externes Traefik-Netzwerk für Reverse Proxy
+networks:
+  traefik:
+    external: true

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "growing-galaxy",
-  "version": "0.0.1",
+  "version": "2.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "growing-galaxy",
-      "version": "0.0.1",
+      "version": "2.1.0",
       "dependencies": {
         "@astrojs/preact": "^4.1.3",
         "astro": "^5.15.5",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "growing-galaxy",
   "type": "module",
-  "version": "0.0.1",
+  "version": "2.1.0",
   "scripts": {
     "dev": "astro dev --host",
     "build": "astro build",

public/manifest.webmanifest

@@ -0,0 +1,35 @@
+{
+  "name": "BSC Score",
+  "short_name": "BSC Score",
+  "description": "Professional pool and billiards scoring application",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#1a1a1a",
+  "theme_color": "#1a1a1a",
+  "lang": "de",
+  "categories": [
+    "sports",
+    "utilities",
+    "productivity"
+  ],
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

public/sw.js

@@ -0,0 +1,68 @@
+const CACHE_NAME = 'bscscore-v2.1.0';
+const APP_SHELL = [
+  '/',
+  '/index.html',
+  '/manifest.webmanifest',
+  '/favicon.ico',
+  '/icon-192.png',
+  '/icon-512.png',
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)),
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys.map((key) => {
+          if (key !== CACHE_NAME) {
+            return caches.delete(key);
+          }
+          return Promise.resolve();
+        }),
+      ),
+    ),
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const requestUrl = new URL(request.url);
+
+  if (request.method !== 'GET' || requestUrl.origin !== self.location.origin) {
+    return;
+  }
+
+  if (request.mode === 'navigate') {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, responseClone));
+          return response;
+        })
+        .catch(() => caches.match(request).then((cached) => cached || caches.match('/'))),
+    );
+    return;
+  }
+
+  event.respondWith(
+    caches.match(request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+
+      return fetch(request).then((networkResponse) => {
+        const networkClone = networkResponse.clone();
+        caches.open(CACHE_NAME).then((cache) => cache.put(request, networkClone));
+        return networkResponse;
+      });
+    }),
+  );
+});

src/components/App.tsx

@@ -33,6 +33,35 @@ export default function App() {
   const validationModal = useValidationModal();
   const completionModal = useCompletionModal();
 
+  // Keep viewport height stable on Android tablets when virtual keyboard opens.
+  useEffect(() => {
+    const root = document.documentElement;
+
+    const updateViewportVars = () => {
+      const viewport = window.visualViewport;
+      const appHeight = viewport ? viewport.height : window.innerHeight;
+      const keyboardOffset = viewport
+        ? Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop)
+        : 0;
+
+      root.style.setProperty('--app-height', `${Math.round(appHeight)}px`);
+      root.style.setProperty('--keyboard-offset', `${Math.round(keyboardOffset)}px`);
+    };
+
+    updateViewportVars();
+    window.addEventListener('resize', updateViewportVars);
+    window.addEventListener('orientationchange', updateViewportVars);
+    window.visualViewport?.addEventListener('resize', updateViewportVars);
+    window.visualViewport?.addEventListener('scroll', updateViewportVars);
+
+    return () => {
+      window.removeEventListener('resize', updateViewportVars);
+      window.removeEventListener('orientationchange', updateViewportVars);
+      window.visualViewport?.removeEventListener('resize', updateViewportVars);
+      window.visualViewport?.removeEventListener('scroll', updateViewportVars);
+    };
+  }, []);
+
   // Game lifecycle handlers
   const handleCreateGame = useCallback(async (gameData: any) => {
     try {

src/components/NewGame.tsx

@@ -1,77 +0,0 @@
-import { h } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
-import styles from './NewGame.module.css';
-import modalStyles from './PlayerSelectModal.module.css';
-import { PlayerSelectModal } from './new-game/PlayerSelectModal';
-import { 
-  UI_CONSTANTS, 
-  WIZARD_STEPS, 
-  GAME_TYPE_OPTIONS, 
-  RACE_TO_QUICK_PICKS, 
-  RACE_TO_DEFAULT, 
-  RACE_TO_INFINITY,
-  ERROR_MESSAGES,
-  ARIA_LABELS,
-  FORM_CONFIG,
-  ERROR_STYLES
-} from '../utils/constants';
-import { Player1Step } from './new-game/Player1Step';
-import { Player2Step } from './new-game/Player2Step';
-import { Player3Step } from './new-game/Player3Step';
-import { GameTypeStep } from './new-game/GameTypeStep';
-import { RaceToStep } from './new-game/RaceToStep';
-import { BreakRuleStep } from './new-game/BreakRuleStep';
-import { BreakOrderStep } from './new-game/BreakOrderStep';
-import type { BreakRule } from '@lib/domain/types';
-
-// PlayerSelectModal moved to ./new-game/PlayerSelectModal
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-// Player1Step moved to ./new-game/Player1Step
-
-// Player2Step moved to ./new-game/Player2Step
-
-// Player3Step moved to ./new-game/Player3Step
-
-interface GameTypeStepProps {
-  onNext: (type: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-
-interface RaceToStepProps {
-  onNext: (raceTo: string | number) => void;
-  onCancel: () => void;
-  initialValue?: string | number;
-  gameType?: string;
-}
-
-// GameTypeStep and RaceToStep moved to ./new-game
-
-interface BreakRuleStepProps {
-  onNext: (rule: BreakRule) => void;
-  onCancel: () => void;
-  initialValue?: BreakRule | 'winnerbreak';
-}
-
-// BreakRuleStep moved to ./new-game/BreakRuleStep
-
-interface BreakOrderStepProps {
-  players: string[];
-  rule: BreakRule;
-  onNext: (first: number, second?: number) => void;
-  onCancel: () => void;
-  initialFirst?: number;
-  initialSecond?: number;
-}
-
-// BreakOrderStep moved to ./new-game/BreakOrderStep
-
-export { Player1Step, Player2Step, Player3Step, GameTypeStep, BreakRuleStep, BreakOrderStep, RaceToStep };

src/components/new-game/BreakOrderStep.tsx

@@ -1,113 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import type { BreakRule } from '@lib/domain/types';
-
-interface BreakOrderStepProps {
-  players: string[];
-  rule: BreakRule;
-  onNext: (first: number, second?: number) => void;
-  onCancel: () => void;
-  initialFirst?: number;
-  initialSecond?: number;
-}
-
-export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst = 1, initialSecond }: BreakOrderStepProps) => {
-  const playerCount = players.filter(Boolean).length;
-  const [first, setFirst] = useState<number>(initialFirst);
-  const [second, setSecond] = useState<number | undefined>(initialSecond);
-
-  useEffect(() => {
-    if (!initialSecond && rule === 'wechselbreak' && playerCount === 3) {
-      setSecond(2);
-    }
-  }, [initialSecond, rule, playerCount]);
-
-  const handleFirst = (idx: number) => {
-    setFirst(idx);
-    if (rule === 'winnerbreak' || (rule === 'wechselbreak' && playerCount === 2)) {
-      onNext(idx);
-    }
-  };
-
-  const handleSecond = (idx: number) => {
-    setSecond(idx);
-    onNext(first, idx);
-  };
-
-  return (
-    <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
-      <div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot'] + ' ' + styles['active']} />
-      </div>
-      <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
-      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-        {players.filter(Boolean).map((name, idx) => (
-          <button
-            key={`first-${idx}`}
-            type="button"
-            className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
-            onClick={() => handleFirst(idx + 1)}
-            aria-label={`Zuerst: ${name}`}
-          >
-            {name}
-          </button>
-        ))}
-      </div>
-      {rule === 'wechselbreak' && playerCount === 3 && (
-        <>
-          <div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
-          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-            {players.filter(Boolean).map((name, idx) => (
-              <button
-                key={`second-${idx}`}
-                type="button"
-                className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
-                onClick={() => handleSecond(idx + 1)}
-                aria-label={`Zweites Break: ${name}`}
-              >
-                {name}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-        <button type="button" className={styles['arrow-btn']} aria-label="Zurück" onClick={onCancel} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
-          &#8592;
-        </button>
-        <button
-          type="button"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          onClick={() => {
-            if (rule === 'wechselbreak' && playerCount === 3) {
-              if (first > 0 && (second ?? 0) > 0) {
-                handleSecond(second as number);
-              }
-            } else {
-              if (first > 0) {
-                onNext(first);
-              }
-            }
-          }}
-          disabled={
-            (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
-          }
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: ((rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)) ? 0.5 : 1 }}
-        >
-          &#8594;
-        </button>
-      </div>
-    </form>
-  );
-};
-
-

src/components/new-game/BreakRuleStep.tsx

@@ -1,55 +0,0 @@
-import { h } from 'preact';
-import { useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import type { BreakRule } from '@lib/domain/types';
-
-interface BreakRuleStepProps {
-  onNext: (rule: BreakRule) => void;
-  onCancel: () => void;
-  initialValue?: BreakRule;
-}
-
-export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
-  const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');
-
-  return (
-    <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
-      <div className={styles['screen-title']}>Break-Regel wählen</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot'] + ' ' + styles['active']} />
-        <span className={styles['progress-dot']} />
-      </div>
-      <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
-        {[
-          { key: 'winnerbreak', label: 'Winnerbreak' },
-          { key: 'wechselbreak', label: 'Wechselbreak' },
-        ].map(opt => (
-          <button
-            key={opt.key}
-            type="button"
-            className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
-            onClick={() => { setRule(opt.key as BreakRule); onNext(opt.key as BreakRule); }}
-            aria-label={`Break-Regel wählen: ${opt.label}`}
-          >
-            {opt.label}
-          </button>
-        ))}
-      </div>
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-        <button type="button" className={styles['arrow-btn']} aria-label="Zurück" onClick={onCancel} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
-          &#8592;
-        </button>
-        <button type="button" className={styles['arrow-btn']} aria-label="Weiter" onClick={() => onNext(rule)} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
-          &#8594;
-        </button>
-      </div>
-    </form>
-  );
-};
-
-

src/components/screens/NewGameScreen.tsx

@@ -1,16 +1,17 @@
 import { h } from 'preact';
+import type { ComponentProps } from 'preact';
+import { useEffect, useMemo, useState } from 'preact/hooks';
 import { Screen } from '@lib/ui/Layout';
 import {
-  Player1Step,
-  Player2Step,
-  Player3Step,
+  PlayerNameStep,
   GameTypeStep,
   BreakRuleStep,
   BreakOrderStep,
   RaceToStep,
 } from '@lib/features/new-game';
 import type { NewGameStep, NewGameData, GameType } from '@lib/domain/types';
-import { GAME_TYPES, RACE_TO_DEFAULT } from '@lib/domain/constants';
+import { ERROR_MESSAGES, GAME_TYPES, RACE_TO_DEFAULT } from '@lib/domain/constants';
+import newGameStyles from '@lib/features/new-game/NewGame.module.css';
 
 interface NewGameScreenProps {
   step: NewGameStep;
@@ -23,6 +24,10 @@ interface NewGameScreenProps {
   onShowValidation: (message: string) => void;
 }
 
+type PlayerStepKey = 'player1' | 'player2' | 'player3';
+type PlayerStepConfig = Omit<ComponentProps<typeof PlayerNameStep>, 'playerNameHistory'>;
+type PlayerStepConfigMap = Record<PlayerStepKey, PlayerStepConfig>;
+
 export default function NewGameScreen({
   step,
   data,
@@ -33,19 +38,29 @@ export default function NewGameScreen({
   onCancel,
   onShowValidation,
 }: NewGameScreenProps) {
-  const handlePlayer1Next = (name: string) => {
-    onDataChange({ player1: name });
-    onStepChange('player2');
-  };
+  const [temporaryPlayerNames, setTemporaryPlayerNames] = useState<string[]>([]);
 
-  const handlePlayer2Next = (name: string) => {
-    onDataChange({ player2: name });
-    onStepChange('player3');
-  };
+  useEffect(() => {
+    // Reset wizard-local names when a fresh wizard starts at player 1.
+    if (
+      step === 'player1' &&
+      !data.player1 &&
+      !data.player2 &&
+      !data.player3
+    ) {
+      setTemporaryPlayerNames([]);
+    }
+  }, [step, data.player1, data.player2, data.player3]);
 
-  const handlePlayer3Next = (name: string) => {
-    onDataChange({ player3: name });
-    onStepChange('gameType');
+  const playerNameOptions = useMemo(
+    () => Array.from(new Set([...temporaryPlayerNames, ...playerHistory])),
+    [temporaryPlayerNames, playerHistory],
+  );
+
+  const addTemporaryPlayerName = (name: string) => {
+    setTemporaryPlayerNames((prev) =>
+      prev.includes(name) ? prev : [name, ...prev],
+    );
   };
 
   const handleGameTypeNext = (type: string) => {
@@ -79,7 +94,6 @@ export default function NewGameScreen({
   const handleRaceToNext = (raceTo: string | number) => {
     // Convert to string, handling Infinity case explicitly
     const raceToStr = raceTo === Infinity ? 'Infinity' : String(raceTo);
-    const finalData = { ...data, raceTo: raceToStr };
     // After race to, go to break rule selection
     onDataChange({ raceTo: raceToStr });
     onStepChange('breakRule');
@@ -110,32 +124,75 @@ export default function NewGameScreen({
     }
   };
 
+  const playerStepConfig: PlayerStepConfigMap = {
+    player1: {
+      stepNumber: 1,
+      title: 'Name Spieler 1',
+      label: 'Spieler 1',
+      placeholder: 'Name Spieler 1',
+      inputId: 'player1-input',
+      playerInputClassName: newGameStyles['player1-input'],
+      initialValue: data.player1,
+      onNext: (name: string) => {
+        onDataChange({ player1: name });
+        onStepChange('player2');
+      },
+      onCancel,
+      required: true,
+      requiredErrorMessage: ERROR_MESSAGES.PLAYER1_REQUIRED,
+      enterKeyHint: 'next',
+      showMorePlayersModal: true,
+    },
+    player2: {
+      stepNumber: 2,
+      title: 'Name Spieler 2',
+      label: 'Spieler 2',
+      placeholder: 'Name Spieler 2',
+      inputId: 'player2-input',
+      playerInputClassName: newGameStyles['player2-input'],
+      initialValue: data.player2,
+      onNext: (name: string) => {
+        onDataChange({ player2: name });
+        onStepChange('player3');
+      },
+      onCancel: handleStepBack,
+      required: true,
+      requiredErrorMessage: ERROR_MESSAGES.PLAYER2_REQUIRED,
+      enterKeyHint: 'next',
+      showMorePlayersModal: true,
+      prefillNameEntry: false,
+      onCreateTemporaryName: addTemporaryPlayerName,
+    },
+    player3: {
+      stepNumber: 3,
+      title: 'Name Spieler 3 (optional)',
+      label: 'Spieler 3 (optional)',
+      placeholder: 'Name Spieler 3 (optional)',
+      inputId: 'player3-input',
+      playerInputClassName: newGameStyles['player3-input'],
+      initialValue: data.player3,
+      onNext: (name: string) => {
+        onDataChange({ player3: name });
+        onStepChange('gameType');
+      },
+      onCancel: handleStepBack,
+      required: false,
+      enterKeyHint: 'done',
+      showSkipButton: true,
+      skipLabel: 'Überspringen',
+      showMorePlayersModal: true,
+      prefillNameEntry: false,
+      onCreateTemporaryName: addTemporaryPlayerName,
+    },
+  };
+
   return (
     <Screen>
-      {step === 'player1' && (
-        <Player1Step
-          playerNameHistory={playerHistory}
-          onNext={handlePlayer1Next}
-          onCancel={onCancel}
-          initialValue={data.player1}
-        />
-      )}
-      
-      {step === 'player2' && (
-        <Player2Step
-          playerNameHistory={playerHistory}
-          onNext={handlePlayer2Next}
-          onCancel={handleStepBack}
-          initialValue={data.player2}
-        />
-      )}
-      
-      {step === 'player3' && (
-        <Player3Step
-          playerNameHistory={playerHistory}
-          onNext={handlePlayer3Next}
-          onCancel={handleStepBack}
-          initialValue={data.player3}
+      {(step === 'player1' || step === 'player2' || step === 'player3') && (
+        <PlayerNameStep
+          key={step}
+          {...playerStepConfig[step]}
+          playerNameHistory={playerNameOptions}
         />
       )}
       

src/lib/features/README.md

@@ -11,7 +11,7 @@ Feature directories compose domain, data, state, and UI primitives into end-user
 - `game-lifecycle`
   - `GameCompletionModal` summarising winners + rematch CTA.
 - `new-game`
-  - Wizard step components (`Player1Step`, `BreakOrderStep`, etc.) and modal pickers.
+  - Wizard step components (`PlayerNameStep`, `BreakOrderStep`, etc.) and modal pickers.
 
 ## Usage Example
 

src/lib/features/game-detail/GameDetail.module.css

@@ -4,7 +4,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    min-height: 100vh;
+    min-height: var(--app-height);
     display: none;
     opacity: 0;
     transform: translateX(100%);

src/lib/features/game-list/GameList.module.css

@@ -9,7 +9,7 @@
 .screen-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    min-height: var(--app-height);
     padding: var(--space-lg);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;

src/lib/features/new-game/NewGame.module.css

@@ -4,7 +4,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    min-height: 100vh;
+    min-height: var(--app-height);
     display: none;
     opacity: 0;
     transform: translateX(100%);
@@ -140,13 +140,15 @@
 
 .form-header {
     flex-shrink: 0;
-    padding: clamp(0.5rem, 2vh, 2rem) var(--space-lg) clamp(0.25rem, 1vh, 1rem) var(--space-lg);
+    padding: clamp(0.4rem, 1.5vh, 1.25rem) var(--space-lg) clamp(0.2rem, 0.8vh, 0.75rem) var(--space-lg);
 }
 
 .form-content {
     flex: 1;
-    overflow: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
     padding: 0 var(--space-lg);
+    padding-bottom: var(--space-sm);
     min-height: 0;
     display: flex;
     flex-direction: column;
@@ -154,7 +156,12 @@
 
 .form-footer {
     flex-shrink: 0;
-    padding: var(--space-lg);
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+    background: var(--color-surface);
+    padding: var(--space-sm) var(--space-lg) calc(var(--space-sm) + var(--keyboard-offset)) var(--space-lg);
+    border-top: 1px solid var(--color-border);
 }
 .progress-indicator {
     display: flex;
@@ -188,14 +195,14 @@
 
 .quick-pick-btn {
     min-width: 60px;
-    min-height: 36px;
+    min-height: 32px;
     font-size: clamp(0.75rem, 2vw, 1rem);
     border-radius: var(--radius-md);
     background: var(--color-secondary);
     color: var(--color-text);
     border: 1px solid var(--color-border);
     cursor: pointer;
-    padding: 0.4rem 0.8rem;
+    padding: 0.3rem 0.7rem;
     transition: all var(--transition-base);
     font-weight: 500;
     flex-shrink: 0;
@@ -210,14 +217,19 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: var(--space-xxl);
+    margin-top: var(--space-xs);
     width: 100%;
-    gap: var(--space-lg);
+    gap: var(--space-sm);
+}
+.arrow-nav-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
 }
 .arrow-btn {
-    font-size: 48px;
-    width: 80px;
-    height: 80px;
+    font-size: 28px;
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
     background: var(--color-secondary);
     color: var(--color-text);
@@ -230,6 +242,11 @@
     transition: all var(--transition-base);
     font-weight: bold;
 }
+.arrow-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
 .arrow-btn:hover, .arrow-btn:focus {
     background: var(--color-secondary-hover);
     border-color: var(--color-primary);
@@ -265,6 +282,44 @@
     background: var(--color-secondary);
     outline: none;
 }
+.name-input-wrapper {
+    position: relative;
+    width: 100%;
+}
+.character-counter {
+    font-size: 0.875rem;
+    margin-top: 4px;
+    text-align: right;
+}
+.quick-picks-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 4px;
+}
+.quick-pick-action-btn {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: #fff;
+}
+.quick-pick-action-btn:hover,
+.quick-pick-action-btn:focus {
+    background: var(--color-primary-hover);
+    border-color: var(--color-primary-hover);
+}
+.quick-pick-actions-separator {
+    width: 10px;
+    height: 1px;
+    margin: 0 4px;
+}
+.choice-heading {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+}
+.choice-heading:first-child {
+    margin-top: 0;
+}
 .game-type-selection {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -390,9 +445,9 @@
         font-size: var(--font-size-xxxl);
     }
     .arrow-btn {
-        width: 100px;
-        height: 100px;
-        font-size: 56px;
+        width: 56px;
+        height: 56px;
+        font-size: 34px;
     }
     .game-type-btn,
     .race-to-btn {
@@ -412,7 +467,7 @@
     }
     .new-game-form {
         margin: var(--space-lg) auto 0 auto;
-        padding: var(--space-lg);
+        padding: var(--space-sm);
     }
     .game-type-selection {
         grid-template-columns: 1fr;
@@ -424,8 +479,28 @@
         gap: var(--space-md);
     }
     .arrow-btn {
-        width: 70px;
-        height: 70px;
-        font-size: 40px;
+        width: 40px;
+        height: 40px;
+        font-size: 24px;
+    }
+}
+
+@media (max-height: 560px) {
+    .screen-title {
+        margin-bottom: 0.35rem;
+    }
+    .progress-indicator {
+        margin-bottom: 0.35rem;
+    }
+    .player-input {
+        padding: var(--space-sm);
+    }
+    .form-header {
+        padding-top: 0.4rem;
+        padding-bottom: 0.3rem;
+    }
+    .form-footer {
+        padding-top: 0.3rem;
+        padding-bottom: calc(0.35rem + var(--keyboard-offset));
     }
 }

src/lib/features/new-game/README.md

@@ -4,7 +4,7 @@ Composable building blocks for the multi-step "start a new game" workflow.
 
 ## Exports
 
-- `Player1Step`, `Player2Step`, `Player3Step` – Player name capture with history + quick picks.
+- `PlayerNameStep` – Configurable player name capture step with history + quick picks.
 - `GameTypeStep` – Game type selector.
 - `RaceToStep` – Numeric race-to chooser with infinity support.
 - `BreakRuleStep`, `BreakOrderStep` – Break configuration helpers.
@@ -21,7 +21,7 @@ All exports are surfaced via `@lib/features/new-game`.
 ## Integrating the Wizard
 
 ```tsx
-import { Player1Step, Player2Step } from '@lib/features/new-game';
+import { PlayerNameStep } from '@lib/features/new-game';
 import { useNewGameWizard } from '@lib/state';
 
 const wizard = useNewGameWizard();
@@ -29,13 +29,23 @@ const wizard = useNewGameWizard();
 return (
   <>
     {wizard.newGameStep === 'player1' && (
-      <Player1Step
+      <PlayerNameStep
+        stepNumber={1}
+        title="Name Spieler 1"
+        label="Spieler 1"
+        placeholder="Name Spieler 1"
+        inputId="player1-input"
+        playerInputClassName={styles['player1-input']}
         playerNameHistory={playerHistory}
         onNext={(name) => {
           wizard.updateGameData({ player1: name });
           wizard.nextStep('player2');
         }}
         onCancel={wizard.resetWizard}
+        required
+        requiredErrorMessage="Bitte Namen für Spieler 1 eingeben"
+        enterKeyHint="next"
+        showMorePlayersModal
       />
     )}
     {/* render subsequent steps analogously */}

src/lib/features/new-game/components/NameEntryModal.module.css

@@ -0,0 +1,66 @@
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modalContent {
+  width: min(420px, 100%);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.modalTitle {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--color-text);
+}
+
+.modalInput {
+  width: 100%;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.actionButton {
+  border: 1px solid var(--color-border);
+  background: var(--color-secondary);
+  color: var(--color-text);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  cursor: pointer;
+  min-height: var(--touch-target-min);
+}
+
+.actionButton:hover,
+.actionButton:focus {
+  border-color: var(--color-primary);
+  outline: none;
+}
+
+.confirmButton {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+}
+
+.errorText {
+  color: var(--color-danger);
+  font-size: 0.9rem;
+  margin: 0;
+}

src/lib/features/new-game/components/NameEntryModal.tsx

@@ -0,0 +1,89 @@
+import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import styles from './NameEntryModal.module.css';
+import newGameStyles from '../NewGame.module.css';
+
+interface NameEntryModalProps {
+  open: boolean;
+  title: string;
+  placeholder: string;
+  inputId: string;
+  initialValue?: string;
+  enterKeyHint?: 'next' | 'done';
+  onClose: () => void;
+  onConfirm: (name: string) => string | null;
+}
+
+export function NameEntryModal({
+  open,
+  title,
+  placeholder,
+  inputId,
+  initialValue = '',
+  enterKeyHint = 'done',
+  onClose,
+  onConfirm,
+}: NameEntryModalProps) {
+  const [name, setName] = useState(initialValue);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(initialValue);
+    setError(null);
+    window.setTimeout(() => inputRef.current?.focus(), 0);
+  }, [open, initialValue]);
+
+  if (!open) return null;
+
+  return (
+    <div className={styles.modalOverlay} onClick={onClose} role="dialog" aria-modal="true" aria-labelledby={`${inputId}-title`}>
+      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+        <h3 id={`${inputId}-title`} className={styles.modalTitle}>
+          {title}
+        </h3>
+
+        <input
+          id={inputId}
+          ref={inputRef}
+          className={`${newGameStyles['name-input']} ${styles.modalInput}`}
+          value={name}
+          placeholder={placeholder}
+          autoComplete="off"
+          autoCapitalize="words"
+          spellCheck={false}
+          enterKeyHint={enterKeyHint}
+          onInput={(e: Event) => {
+            setName((e.target as HTMLInputElement).value);
+            if (error) setError(null);
+          }}
+          onKeyDown={(e) => {
+            if (e.key !== 'Enter') return;
+            e.preventDefault();
+            const validationError = onConfirm(name);
+            if (validationError) setError(validationError);
+          }}
+        />
+
+        {error && <p className={styles.errorText}>{error}</p>}
+
+        <div className={styles.modalActions}>
+          <button type="button" className={styles.actionButton} onClick={onClose}>
+            Abbrechen
+          </button>
+          <button
+            type="button"
+            className={`${styles.actionButton} ${styles.confirmButton}`}
+            onClick={() => {
+              const validationError = onConfirm(name);
+              if (validationError) setError(validationError);
+            }}
+          >
+            Übernehmen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/features/new-game/components/PlayerNameStep.tsx

@@ -0,0 +1,231 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import styles from '../NewGame.module.css';
+import {
+  ARIA_LABELS,
+  ERROR_STYLES,
+  FORM_CONFIG,
+  UI_CONSTANTS,
+} from '@lib/domain/constants';
+import { PlayerSelectModal } from '../steps/PlayerSelectModal';
+import { NameEntryModal } from './NameEntryModal';
+import { WizardNav } from './WizardNav';
+import { WizardStepForm } from './WizardStepForm';
+
+interface PlayerNameStepProps {
+  stepNumber: number;
+  title: string;
+  label: string;
+  placeholder: string;
+  inputId: string;
+  playerInputClassName: string;
+  playerNameHistory: string[];
+  onNext: (name: string) => void;
+  onCancel: () => void;
+  initialValue?: string;
+  required?: boolean;
+  requiredErrorMessage?: string;
+  enterKeyHint: 'next' | 'done';
+  showSkipButton?: boolean;
+  skipLabel?: string;
+  showMorePlayersModal?: boolean;
+  prefillNameEntry?: boolean;
+  onCreateTemporaryName?: (name: string) => void;
+}
+
+export function PlayerNameStep({
+  stepNumber,
+  title,
+  label,
+  placeholder,
+  inputId,
+  playerInputClassName,
+  playerNameHistory,
+  onNext,
+  onCancel,
+  initialValue = '',
+  required = true,
+  requiredErrorMessage,
+  enterKeyHint,
+  showSkipButton = false,
+  skipLabel = 'Überspringen',
+  showMorePlayersModal = false,
+  prefillNameEntry = true,
+  onCreateTemporaryName,
+}: PlayerNameStepProps) {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState<string | null>(null);
+  const [isPlayerListOpen, setIsPlayerListOpen] = useState(false);
+  const [isNameEntryOpen, setIsNameEntryOpen] = useState(false);
+
+  const validate = (name: string): string | null => {
+    const trimmedName = name.trim();
+
+    if (required && !trimmedName) {
+      return requiredErrorMessage ?? 'Bitte Namen eingeben';
+    }
+
+    if (trimmedName.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH) {
+      return `Spielername darf maximal ${FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen lang sein`;
+    }
+
+    return null;
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    const trimmedValue = value.trim();
+    const validationError = validate(trimmedValue);
+
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    setError(null);
+    onNext(trimmedValue);
+  };
+
+  const handleQuickPick = (name: string) => {
+    setValue(name);
+    setError(null);
+    onNext(name);
+  };
+
+  const handleSkip = () => {
+    setValue('');
+    setError(null);
+    onNext('');
+  };
+
+  const handleManualNameSubmit = (name: string): string | null => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      return 'Bitte Namen eingeben';
+    }
+
+    const manualNameError = validate(trimmedName);
+    if (manualNameError) {
+      return manualNameError;
+    }
+
+    setValue(trimmedName);
+    setError(null);
+    setIsNameEntryOpen(false);
+    onCreateTemporaryName?.(trimmedName);
+    onNext(trimmedName);
+    return null;
+  };
+
+  return (
+    <WizardStepForm
+      ariaLabel={ARIA_LABELS.PLAYER_INPUT(label)}
+      title={title}
+      currentStep={stepNumber}
+      onSubmit={handleSubmit}
+      footer={
+        <WizardNav
+          onBack={onCancel}
+          nextDisabled={!value.trim()}
+          middleContent={
+            showSkipButton ? (
+              <button
+                type="button"
+                onClick={handleSkip}
+                className={styles['quick-pick-btn']}
+              >
+                {skipLabel}
+              </button>
+            ) : undefined
+          }
+        />
+      }
+    >
+      <div
+        className={`${styles['player-input']} ${playerInputClassName}`}
+        style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_LARGE }}
+      >
+        <div className={styles['quick-picks-row']}>
+          {showMorePlayersModal && playerNameHistory.length > 0 && (
+            <button
+              type="button"
+              className={`${styles['quick-pick-btn']} ${styles['quick-pick-action-btn']}`}
+              onClick={() => setIsPlayerListOpen(true)}
+              aria-label="Liste anzeigen"
+            >
+              Liste anzeigen
+            </button>
+          )}
+
+          <button
+            type="button"
+            className={`${styles['quick-pick-btn']} ${styles['quick-pick-action-btn']}`}
+            onClick={() => setIsNameEntryOpen(true)}
+            aria-label={`Name für ${label} eingeben`}
+          >
+            Name eingeben
+          </button>
+
+          {playerNameHistory.length > 0 && (
+            <span className={styles['quick-pick-actions-separator']} aria-hidden="true" />
+          )}
+
+          {playerNameHistory.slice(0, UI_CONSTANTS.MAX_QUICK_PICKS).map((name, idx) => (
+            <button
+              type="button"
+              key={name + idx}
+              className={`${styles['quick-pick-btn']} ${value === name ? styles['selected'] : ''}`}
+              onClick={() => handleQuickPick(name)}
+              aria-label={ARIA_LABELS.QUICK_PICK(name)}
+            >
+              {name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {error && (
+        <div
+          className={styles['validation-error']}
+          style={{ marginBottom: 16, ...ERROR_STYLES.CONTAINER }}
+          role="alert"
+          aria-live="polite"
+        >
+          <span style={ERROR_STYLES.ICON}>⚠️</span>
+          {error}
+        </div>
+      )}
+
+      {isPlayerListOpen && (
+        <PlayerSelectModal
+          players={playerNameHistory}
+          onSelect={(name) => {
+            setIsPlayerListOpen(false);
+            handleQuickPick(name);
+          }}
+          onClose={() => setIsPlayerListOpen(false)}
+        />
+      )}
+
+      <NameEntryModal
+        open={isNameEntryOpen}
+        title={`Name für ${label}`}
+        placeholder={placeholder}
+        inputId={inputId}
+        initialValue={prefillNameEntry ? value : ''}
+        enterKeyHint={enterKeyHint}
+        onClose={() => setIsNameEntryOpen(false)}
+        onConfirm={handleManualNameSubmit}
+      />
+
+      {value.length > FORM_CONFIG.CHARACTER_COUNT_WARNING_THRESHOLD && (
+        <div
+          className={styles['character-counter']}
+          style={{ color: value.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH ? '#f44336' : '#ff9800' }}
+        >
+          {value.length}/{FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen
+        </div>
+      )}
+    </WizardStepForm>
+  );
+}

src/lib/features/new-game/components/WizardNav.tsx

@@ -0,0 +1,45 @@
+import { h } from 'preact';
+import type { ComponentChildren } from 'preact';
+import styles from '../NewGame.module.css';
+import { ARIA_LABELS } from '@lib/domain/constants';
+
+interface WizardNavProps {
+  onBack: () => void;
+  nextDisabled?: boolean;
+  nextType?: 'submit' | 'button';
+  nextButtonAriaLabel?: string;
+  middleContent?: ComponentChildren;
+}
+
+export function WizardNav({
+  onBack,
+  nextDisabled = false,
+  nextType = 'submit',
+  nextButtonAriaLabel = ARIA_LABELS.NEXT,
+  middleContent,
+}: WizardNavProps) {
+  return (
+    <div className={styles['arrow-nav']}>
+      <button
+        type="button"
+        className={styles['arrow-btn']}
+        aria-label={ARIA_LABELS.BACK}
+        onClick={onBack}
+      >
+        &#8592;
+      </button>
+
+      <div className={styles['arrow-nav-actions']}>
+        {middleContent}
+        <button
+          type={nextType}
+          className={styles['arrow-btn']}
+          aria-label={nextButtonAriaLabel}
+          disabled={nextDisabled}
+        >
+          &#8594;
+        </button>
+      </div>
+    </div>
+  );
+}

src/lib/features/new-game/components/WizardStepForm.tsx

@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import type { ComponentChildren } from 'preact';
+import { ProgressIndicator } from '../ProgressIndicator';
+import styles from '../NewGame.module.css';
+import { UI_CONSTANTS } from '@lib/domain/constants';
+
+interface WizardStepFormProps {
+  ariaLabel: string;
+  title: string;
+  currentStep: number;
+  onSubmit?: (e: Event) => void;
+  children: ComponentChildren;
+  footer: ComponentChildren;
+}
+
+export function WizardStepForm({
+  ariaLabel,
+  title,
+  currentStep,
+  onSubmit,
+  children,
+  footer,
+}: WizardStepFormProps) {
+  return (
+    <form className={styles['new-game-form']} onSubmit={onSubmit} aria-label={ariaLabel} autoComplete="off">
+      <div className={styles['form-header']}>
+        <div className={styles['screen-title']}>{title}</div>
+        <ProgressIndicator currentStep={currentStep} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }} />
+      </div>
+
+      <div className={styles['form-content']}>{children}</div>
+
+      <div className={styles['form-footer']}>{footer}</div>
+    </form>
+  );
+}

src/lib/features/new-game/index.ts

@@ -1,7 +1,5 @@
 export { PlayerSelectModal } from './steps/PlayerSelectModal';
-export { Player1Step } from './steps/Player1Step';
-export { Player2Step } from './steps/Player2Step';
-export { Player3Step } from './steps/Player3Step';
+export { PlayerNameStep } from './components/PlayerNameStep';
 export { GameTypeStep } from './steps/GameTypeStep';
 export { RaceToStep } from './steps/RaceToStep';
 export { BreakRuleStep } from './steps/BreakRuleStep';

src/lib/features/new-game/steps/BreakOrderStep.tsx

@@ -1,8 +1,9 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import type { BreakRule } from '@lib/domain/types';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface BreakOrderStepProps {
   players: string[];
@@ -26,26 +27,51 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
 
   const handleFirst = (idx: number) => {
     setFirst(idx);
-    if (rule === 'winnerbreak' || (rule === 'wechselbreak' && playerCount === 2)) {
+    const isImmediateFlow = rule !== 'wechselbreak' || playerCount !== 3;
+    if (isImmediateFlow) {
       onNext(idx);
     }
   };
 
   const handleSecond = (idx: number) => {
     setSecond(idx);
+    if (rule === 'wechselbreak' && playerCount === 3 && first > 0) {
       onNext(first, idx);
+    }
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+
+    if (rule === 'wechselbreak' && playerCount === 3) {
+      if (first > 0 && (second ?? 0) > 0) {
+        onNext(first, second);
+      }
+      return;
+    }
+
+    if (first > 0) {
+      onNext(first);
+    }
   };
 
   return (
-    <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Wer hat den ersten Anstoss?</div>
-        <ProgressIndicator currentStep={7} style={{ marginBottom: 24 }} />
-      </div>
-
-      <div className={styles['form-content']}>
-        <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer hat den ersten Anstoss?</div>
-        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+    <WizardStepForm
+      ariaLabel="Break-Reihenfolge wählen"
+      title="Wer hat den ersten Anstoss?"
+      currentStep={7}
+      onSubmit={handleSubmit}
+      footer={
+        <WizardNav
+          onBack={onCancel}
+          nextDisabled={
+            (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
+          }
+        />
+      }
+    >
+        <div className={styles['choice-heading']}>Wer hat den ersten Anstoss?</div>
+        <div className={styles['quick-picks-row']}>
           {players.filter(Boolean).map((name, idx) => (
             <button
               key={`first-${idx}`}
@@ -53,7 +79,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
               className={`${styles['quick-pick-btn']} ${first === (idx + 1) ? styles['selected'] : ''}`}
               onClick={() => handleFirst(idx + 1)}
               aria-label={`Zuerst: ${name}`}
-              style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+              style={{ minWidth: 160, minHeight: 64 }}
             >
               {name}
             </button>
@@ -62,8 +88,8 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
 
         {rule === 'wechselbreak' && playerCount === 3 && (
           <>
-            <div style={{ marginTop: 24, marginBottom: 16, fontWeight: 600 }}>Wer hat den zweiten Anstoss?</div>
-            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <div className={styles['choice-heading']}>Wer hat den zweiten Anstoss?</div>
+            <div className={styles['quick-picks-row']}>
               {players.filter(Boolean).map((name, idx) => (
                 <button
                   key={`second-${idx}`}
@@ -71,7 +97,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
                   className={`${styles['quick-pick-btn']} ${second === (idx + 1) ? styles['selected'] : ''}`}
                   onClick={() => handleSecond(idx + 1)}
                   aria-label={`Zweites Break: ${name}`}
-                  style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+                  style={{ minWidth: 160, minHeight: 64 }}
                 >
                   {name}
                 </button>
@@ -79,36 +105,7 @@ export const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst =
             </div>
           </>
         )}
-      </div>
-
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-          <button type="button" className={styles['arrow-btn']} aria-label="Zurück" onClick={onCancel} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
-            &#8592;
-          </button>
-          <button
-            type="button"
-            className={styles['arrow-btn']}
-            aria-label="Weiter"
-            onClick={() => {
-              if (rule === 'wechselbreak' && playerCount === 3) {
-                if (first > 0 && (second ?? 0) > 0) {
-                  handleSecond(second as number);
-                }
-              } else if (first > 0) {
-                onNext(first);
-              }
-            }}
-            disabled={
-              (rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)
-            }
-            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: ((rule === 'wechselbreak' && playerCount === 3) ? !(first > 0 && (second ?? 0) > 0) : !(first > 0)) ? 0.5 : 1 }}
-          >
-            &#8594;
-          </button>
-        </div>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };
 

src/lib/features/new-game/steps/BreakRuleStep.tsx

@@ -1,8 +1,9 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import type { BreakRule } from '@lib/domain/types';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface BreakRuleStepProps {
   onNext: (rule: BreakRule) => void;
@@ -13,15 +14,25 @@ interface BreakRuleStepProps {
 export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: BreakRuleStepProps) => {
   const [rule, setRule] = useState<BreakRule>(initialValue ?? 'winnerbreak');
   
-  return (
-    <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Break-Regel wählen</div>
-        <ProgressIndicator currentStep={6} style={{ marginBottom: 24 }} />
-      </div>
+  const handleSelect = (nextRule: BreakRule) => {
+    setRule(nextRule);
+    onNext(nextRule);
+  };
 
-      <div className={styles['form-content']}>
-        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    onNext(rule);
+  };
+
+  return (
+    <WizardStepForm
+      ariaLabel="Break-Regel wählen"
+      title="Break-Regel wählen"
+      currentStep={6}
+      onSubmit={handleSubmit}
+      footer={<WizardNav onBack={onCancel} />}
+    >
+        <div className={styles['quick-picks-row']}>
           {[
             { key: 'winnerbreak', label: 'Winnerbreak' },
             { key: 'wechselbreak', label: 'Wechselbreak' },
@@ -30,30 +41,15 @@ export const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }
               key={opt.key}
               type="button"
               className={`${styles['quick-pick-btn']} ${rule === (opt.key as BreakRule) ? styles['selected'] : ''}`}
-              onClick={() => {
-                setRule(opt.key as BreakRule);
-                onNext(opt.key as BreakRule);
-              }}
+              onClick={() => handleSelect(opt.key as BreakRule)}
               aria-label={`Break-Regel wählen: ${opt.label}`}
-              style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+              style={{ minWidth: 160, minHeight: 64 }}
             >
               {opt.label}
             </button>
           ))}
         </div>
-      </div>
-
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-          <button type="button" className={styles['arrow-btn']} aria-label="Zurück" onClick={onCancel} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
-            &#8592;
-          </button>
-          <button type="button" className={styles['arrow-btn']} aria-label="Weiter" onClick={() => onNext(rule)} style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}>
-            &#8594;
-          </button>
-        </div>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };
 

src/lib/features/new-game/steps/GameTypeStep.tsx

@@ -1,8 +1,9 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import { GAME_TYPES } from '@lib/domain/constants';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface GameTypeStepProps {
   onNext: (type: string) => void;
@@ -26,13 +27,13 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
   };
 
   return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Spielart auswählen</div>
-        <ProgressIndicator currentStep={4} style={{ marginBottom: 24 }} />
-      </div>
-      
-      <div className={styles['form-content']}>
+    <WizardStepForm
+      ariaLabel="Spielart auswählen"
+      title="Spielart auswählen"
+      currentStep={4}
+      onSubmit={handleSubmit}
+      footer={<WizardNav onBack={onCancel} nextDisabled={!gameType} />}
+    >
         <div className={styles['game-type-selection']}>
           {GAME_TYPES.map(({ value, label }) => (
             <button
@@ -45,42 +46,7 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
             </button>
           ))}
         </div>
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <button
-          type="button"
-          className={styles['arrow-btn']}
-          aria-label="Zurück"
-          onClick={onCancel}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
-        >
-          &#8592;
-        </button>
-        <button
-          type="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          disabled={!gameType}
-          style={{
-            fontSize: 48,
-            width: 80,
-            height: 80,
-            borderRadius: '50%',
-            background: '#222',
-            color: '#fff',
-            border: 'none',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-            cursor: 'pointer',
-            opacity: !gameType ? 0.5 : 1,
-          }}
-        >
-          &#8594;
-        </button>
-        </div>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };
 

src/lib/features/new-game/steps/Player1Step.tsx

@@ -1,258 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import {
-  UI_CONSTANTS,
-  ERROR_MESSAGES,
-  ARIA_LABELS,
-  FORM_CONFIG,
-  ERROR_STYLES,
-} from '@lib/domain/constants';
-import { PlayerSelectModal } from './PlayerSelectModal';
-import { ProgressIndicator } from '../ProgressIndicator';
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
-  const [player1, setPlayer1] = useState(initialValue);
-  const [error, setError] = useState<string | null>(null);
-  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!player1) {
-      setFilteredNames(playerNameHistory);
-    } else {
-      setFilteredNames(
-        playerNameHistory.filter(name =>
-          name.toLowerCase().includes(player1.toLowerCase())
-        )
-      );
-    }
-  }, [player1, playerNameHistory]);
-
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-    const trimmedName = player1.trim();
-    if (!trimmedName) {
-      setError(ERROR_MESSAGES.PLAYER1_REQUIRED);
-      if (inputRef.current) {
-        inputRef.current.focus();
-        inputRef.current.setAttribute('aria-invalid', 'true');
-      }
-      return;
-    }
-    if (trimmedName.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH) {
-      setError(`Spielername darf maximal ${FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen lang sein`);
-      if (inputRef.current) {
-        inputRef.current.focus();
-        inputRef.current.setAttribute('aria-invalid', 'true');
-      }
-      return;
-    }
-    setError(null);
-    if (inputRef.current) {
-      inputRef.current.setAttribute('aria-invalid', 'false');
-    }
-    onNext(trimmedName);
-  };
-
-  const handleQuickPick = (name: string) => {
-    setError(null);
-    onNext(name);
-  };
-
-  const handleModalSelect = (name: string) => {
-    setIsModalOpen(false);
-    handleQuickPick(name);
-  };
-
-  const handleClear = () => {
-    setPlayer1('');
-    setError(null);
-    if (inputRef.current) inputRef.current.focus();
-  };
-
-  return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Name Spieler 1</div>
-        <ProgressIndicator
-          currentStep={1}
-          style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}
-        />
-      </div>
-      
-      <div className={styles['form-content']}>
-        <div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_LARGE, position: 'relative' }}>
-        <label htmlFor="player1-input" style={{ fontSize: UI_CONSTANTS.LABEL_FONT_SIZE, fontWeight: 600 }}>Spieler 1</label>
-        <div style={{ position: 'relative', width: '100%' }}>
-          <input
-            id="player1-input"
-            className={styles['name-input']}
-            placeholder="Name Spieler 1"
-            value={player1}
-            onInput={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              const value = target.value;
-              setPlayer1(value);
-              if (value.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH) {
-                setError(`Spielername darf maximal ${FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen lang sein`);
-                target.setAttribute('aria-invalid', 'true');
-              } else if (value.trim() && error) {
-                setError(null);
-                target.setAttribute('aria-invalid', 'false');
-              }
-            }}
-            autoComplete="off"
-            aria-label="Name Spieler 1"
-            aria-describedby="player1-help"
-            style={{ 
-              fontSize: UI_CONSTANTS.INPUT_FONT_SIZE, 
-              minHeight: UI_CONSTANTS.INPUT_MIN_HEIGHT, 
-              marginTop: 12, 
-              marginBottom: 12, 
-              width: '100%', 
-              paddingRight: UI_CONSTANTS.INPUT_PADDING_RIGHT 
-            }}
-            ref={inputRef}
-          />
-          <div id="player1-help" className="sr-only">
-            Geben Sie den Namen für Spieler 1 ein. Maximal {FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen erlaubt.
-          </div>
-          {player1.length > FORM_CONFIG.CHARACTER_COUNT_WARNING_THRESHOLD && (
-            <div style={{ 
-              fontSize: '0.875rem', 
-              color: player1.length > FORM_CONFIG.MAX_PLAYER_NAME_LENGTH ? '#f44336' : '#ff9800',
-              marginTop: '4px',
-              textAlign: 'right'
-            }}>
-              {player1.length}/{FORM_CONFIG.MAX_PLAYER_NAME_LENGTH} Zeichen
-            </div>
-          )}
-          {player1 && (
-            <button
-              type="button"
-              className={styles['clear-input-btn']}
-              aria-label="Feld leeren"
-              onClick={handleClear}
-              style={{
-                position: 'absolute',
-                right: 8,
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: 24,
-                color: '#aaa',
-                padding: 0,
-                zIndex: 2
-              }}
-              tabIndex={0}
-            >
-              ×
-            </button>
-          )}
-        </div>
-        {filteredNames.length > 0 && (
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
-            {filteredNames.slice(0, UI_CONSTANTS.MAX_QUICK_PICKS).map((name, idx) => (
-              <button
-                type="button"
-                key={name + idx}
-                className={styles['quick-pick-btn']}
-                style={{ 
-                  fontSize: UI_CONSTANTS.QUICK_PICK_FONT_SIZE, 
-                  padding: UI_CONSTANTS.QUICK_PICK_PADDING, 
-                  borderRadius: 8, 
-                  background: '#333', 
-                  color: '#fff', 
-                  border: 'none', 
-                  cursor: 'pointer' 
-                }}
-                onClick={() => handleQuickPick(name)}
-                aria-label={ARIA_LABELS.QUICK_PICK(name)}
-              >
-                {name}
-              </button>
-            ))}
-            {playerNameHistory.length > UI_CONSTANTS.MAX_QUICK_PICKS && (
-              <button
-                type="button"
-                className={styles['quick-pick-btn']}
-                style={{ 
-                  fontSize: UI_CONSTANTS.QUICK_PICK_FONT_SIZE, 
-                  padding: UI_CONSTANTS.QUICK_PICK_PADDING, 
-                  borderRadius: 8, 
-                  background: '#333', 
-                  color: '#fff', 
-                  border: 'none', 
-                  cursor: 'pointer' 
-                }}
-                onClick={() => setIsModalOpen(true)}
-                aria-label={ARIA_LABELS.SHOW_MORE_PLAYERS}
-              >
-                ...
-              </button>
-            )}
-          </div>
-        )}
-        </div>
-        {error && (
-          <div 
-            className={styles['validation-error']} 
-            style={{ 
-              marginBottom: 16,
-              ...ERROR_STYLES.CONTAINER
-            }}
-            role="alert"
-            aria-live="polite"
-          >
-            <span style={ERROR_STYLES.ICON}>⚠️</span>
-            {error}
-          </div>
-        )}
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <button
-          type="button"
-          className={styles['arrow-btn']}
-          aria-label="Zurück"
-          onClick={onCancel}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
-        >
-          &#8592;
-        </button>
-        <button
-          type="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          disabled={!player1.trim()}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player1.trim() ? 0.5 : 1 }}
-        >
-          &#8594;
-        </button>
-        </div>
-      </div>
-      
-      {isModalOpen && (
-        <PlayerSelectModal
-          players={playerNameHistory}
-          onSelect={handleModalSelect}
-          onClose={() => setIsModalOpen(false)}
-        />
-      )}
-    </form>
-  );
-};
-
-

src/lib/features/new-game/steps/Player2Step.tsx

@@ -1,148 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
-  const [player2, setPlayer2] = useState(initialValue);
-  const [error, setError] = useState<string | null>(null);
-  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!player2) {
-      setFilteredNames(playerNameHistory);
-    } else {
-      setFilteredNames(
-        playerNameHistory.filter(name =>
-          name.toLowerCase().includes(player2.toLowerCase())
-        )
-      );
-    }
-  }, [player2, playerNameHistory]);
-
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-    if (!player2.trim()) {
-      setError('Bitte Namen für Spieler 2 eingeben');
-      return;
-    }
-    setError(null);
-    onNext(player2.trim());
-  };
-
-  const handleQuickPick = (name: string) => {
-    setError(null);
-    onNext(name);
-  };
-
-  const handleClear = () => {
-    setPlayer2('');
-    setError(null);
-    if (inputRef.current) inputRef.current.focus();
-  };
-
-  return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 2 Eingabe" autoComplete="off">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Name Spieler 2</div>
-        <ProgressIndicator currentStep={2} style={{ marginBottom: 24 }} />
-      </div>
-      
-      <div className={styles['form-content']}>
-        <div className={styles['player-input'] + ' ' + styles['player2-input']} style={{ marginBottom: 32, position: 'relative' }}>
-        <label htmlFor="player2-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 2</label>
-        <div style={{ position: 'relative', width: '100%' }}>
-          <input
-            id="player2-input"
-            className={styles['name-input']}
-            placeholder="Name Spieler 2"
-            value={player2}
-            onInput={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              setPlayer2(target.value);
-            }}
-            autoComplete="off"
-            aria-label="Name Spieler 2"
-            style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
-            ref={inputRef}
-          />
-          {player2 && (
-            <button
-              type="button"
-              className={styles['clear-input-btn']}
-              aria-label="Feld leeren"
-              onClick={handleClear}
-              style={{
-                position: 'absolute',
-                right: 8,
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: 24,
-                color: '#aaa',
-                padding: 0,
-                zIndex: 2
-              }}
-              tabIndex={0}
-            >
-              ×
-            </button>
-          )}
-        </div>
-        {filteredNames.length > 0 && (
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
-            {filteredNames.slice(0, 10).map((name, idx) => (
-              <button
-                type="button"
-                key={name + idx}
-                className={styles['quick-pick-btn']}
-                style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
-                onClick={() => handleQuickPick(name)}
-                aria-label={`Schnellauswahl: ${name}`}
-              >
-                {name}
-              </button>
-            ))}
-          </div>
-        )}
-        </div>
-        {error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <button
-            type="button"
-            className={styles['arrow-btn']}
-            aria-label="Zurück"
-            onClick={onCancel}
-            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
-          >
-            &#8592;
-          </button>
-          <button
-            type="submit"
-            className={styles['arrow-btn']}
-            aria-label="Weiter"
-            disabled={!player2.trim()}
-            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player2.trim() ? 0.5 : 1 }}
-          >
-            &#8594;
-          </button>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-

src/lib/features/new-game/steps/Player3Step.tsx

@@ -1,154 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
-
-interface PlayerStepProps {
-  playerNameHistory: string[];
-  onNext: (name: string) => void;
-  onCancel: () => void;
-  initialValue?: string;
-}
-
-export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }: PlayerStepProps) => {
-  const [player3, setPlayer3] = useState(initialValue);
-  const [filteredNames, setFilteredNames] = useState(playerNameHistory);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!player3) {
-      setFilteredNames(playerNameHistory);
-    } else {
-      setFilteredNames(
-        playerNameHistory.filter(name =>
-          name.toLowerCase().includes(player3.toLowerCase())
-        )
-      );
-    }
-  }, [player3, playerNameHistory]);
-
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-    onNext(player3.trim());
-  };
-
-  const handleQuickPick = (name: string) => {
-    onNext(name);
-  };
-
-  const handleClear = () => {
-    setPlayer3('');
-    if (inputRef.current) inputRef.current.focus();
-  };
-
-  const handleSkip = (e: Event) => {
-    e.preventDefault();
-    onNext('');
-  };
-
-  return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
-      <div className={styles['form-header']}>
-        <div className={styles['screen-title']}>Name Spieler 3 (optional)</div>
-        <ProgressIndicator currentStep={3} style={{ marginBottom: 24 }} />
-      </div>
-      
-      <div className={styles['form-content']}>
-        <div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
-        <label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
-        <div style={{ position: 'relative', width: '100%' }}>
-          <input
-            id="player3-input"
-            className={styles['name-input']}
-            placeholder="Name Spieler 3 (optional)"
-            value={player3}
-            onInput={(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              setPlayer3(target.value);
-            }}
-            autoComplete="off"
-            aria-label="Name Spieler 3"
-            style={{ fontSize: '1.2rem', minHeight: 48, marginTop: 12, marginBottom: 12, width: '100%', paddingRight: 44 }}
-            ref={inputRef}
-          />
-          {player3 && (
-            <button
-              type="button"
-              className={styles['clear-input-btn']}
-              aria-label="Feld leeren"
-              onClick={handleClear}
-              style={{
-                position: 'absolute',
-                right: 8,
-                top: '50%',
-                transform: 'translateY(-50%)',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: 24,
-                color: '#aaa',
-                padding: 0,
-                zIndex: 2
-              }}
-              tabIndex={0}
-            >
-              ×
-            </button>
-          )}
-        </div>
-        {filteredNames.length > 0 && (
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
-            {filteredNames.slice(0, 10).map((name, idx) => (
-              <button
-                type="button"
-                key={name + idx}
-                className={styles['quick-pick-btn']}
-                style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
-                onClick={() => handleQuickPick(name)}
-                aria-label={`Schnellauswahl: ${name}`}
-              >
-                {name}
-              </button>
-            ))}
-          </div>
-        )}
-        </div>
-      </div>
-      
-      <div className={styles['form-footer']}>
-        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <button
-            type="button"
-            className={styles['arrow-btn']}
-            aria-label="Zurück"
-            onClick={onCancel}
-            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
-          >
-            &#8592;
-          </button>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-            <button
-              type="button"
-              onClick={handleSkip}
-              className={styles['quick-pick-btn']}
-              style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
-            >
-              Überspringen
-            </button>
-            <button
-              type="submit"
-              className={styles['arrow-btn']}
-              aria-label="Weiter"
-              disabled={!player3.trim()}
-              style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player3.trim() ? 0.5 : 1 }}
-            >
-              &#8594;
-            </button>
-          </div>
-        </div>
-      </div>
-    </form>
-  );
-};
-
-

src/lib/features/new-game/steps/RaceToStep.tsx

@@ -1,12 +1,13 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import styles from '../NewGame.module.css';
-import { ProgressIndicator } from '../ProgressIndicator';
 import {
   RACE_TO_QUICK_PICKS,
   RACE_TO_DEFAULT,
   RACE_TO_INFINITY,
 } from '@lib/domain/constants';
+import { WizardNav } from '../components/WizardNav';
+import { WizardStepForm } from '../components/WizardStepForm';
 
 interface RaceToStepProps {
   onNext: (raceTo: string | number) => void;
@@ -22,6 +23,11 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
     initialValue !== '' ? initialValue : defaultValue
   );
 
+  const toRaceToValue = (value: string | number) => {
+    if (value === RACE_TO_INFINITY || value === 'Infinity') return Infinity;
+    return parseInt(String(value), 10) || 0;
+  };
+
   useEffect(() => {
     if (initialValue === '' || initialValue === undefined) {
       setRaceTo(defaultValue);
@@ -33,9 +39,7 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
   const handleQuickPick = (value: number | typeof RACE_TO_INFINITY) => {
     const selected = value === RACE_TO_INFINITY ? RACE_TO_INFINITY : value;
     setRaceTo(selected);
-    const raceToValue =
-      selected === RACE_TO_INFINITY ? Infinity : parseInt(String(selected), 10) || 0;
-    onNext(raceToValue);
+    onNext(toRaceToValue(selected));
   };
 
   const handleInputChange = (e: Event) => {
@@ -45,14 +49,17 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
 
   const handleSubmit = (e: Event) => {
     e.preventDefault();
-    const raceToValue = raceTo === 'Infinity' ? Infinity : (parseInt(String(raceTo), 10) || 0);
-    onNext(raceToValue);
+    onNext(toRaceToValue(raceTo));
   };
 
   return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Race To auswählen">
-      <div className={styles['screen-title']}>Race To auswählen</div>
-      <ProgressIndicator currentStep={5} style={{ marginBottom: 24 }} />
+    <WizardStepForm
+      ariaLabel="Race To auswählen"
+      title="Race To auswählen"
+      currentStep={5}
+      onSubmit={handleSubmit}
+      footer={<WizardNav onBack={onCancel} nextDisabled={String(raceTo).trim() === ''} />}
+    >
       <div className={styles['endlos-container']}>
         <button
           type="button"
@@ -88,27 +95,7 @@ export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: Ra
           placeholder="manuelle Eingabe"
         />
       </div>
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-        <button
-          type="button"
-          className={styles['arrow-btn']}
-          aria-label="Zurück"
-          onClick={onCancel}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
-        >
-          &#8592;
-        </button>
-        <button
-          type="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          disabled={String(raceTo).trim() === ''}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: String(raceTo).trim() === '' ? 0.5 : 1 }}
-        >
-          &#8594;
-        </button>
-      </div>
-    </form>
+    </WizardStepForm>
   );
 };
 

src/lib/ui/Layout.module.css

@@ -1,5 +1,5 @@
 .layout {
-  height: 100vh;
+  height: var(--app-height);
   overflow: hidden;
   background-color: var(--color-background);
   color: var(--color-text);

src/pages/index.astro

@@ -8,7 +8,7 @@ import App from "../components/App";
 <html lang="de">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
   <title>BSC Score - Pool Scoring App</title>
   <meta name="description" content="Professional pool/billiards scoring application for tournaments and casual games">
   
@@ -19,11 +19,14 @@ import App from "../components/App";
   <meta name="theme-color" content="#1a1a1a">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="mobile-web-app-capable" content="yes">
+  <link rel="manifest" href="/manifest.webmanifest">
   
   <!-- Favicon -->
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
   <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
+  <link rel="apple-touch-icon" href="/icon-192.png">
 </head>
 
 <body>
@@ -34,5 +37,14 @@ import App from "../components/App";
     -->
     <App client:only="preact" slot="app-content" />
   </BscScoreApp>
+  <script>
+    if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/sw.js').catch((error) => {
+          console.error('Service worker registration failed:', error);
+        });
+      });
+    }
+  </script>
 </body>
 </html>

src/styles/index.css

@@ -3,17 +3,13 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
     -webkit-tap-highlight-color: transparent;
 }
 
 /* Design system tokens */
 :root {
+    --app-height: 100dvh;
+    --keyboard-offset: 0px;
     /* Colors */
     --color-primary: #ff9800;
     --color-primary-hover: #ffa726;
@@ -87,7 +83,7 @@
 
 html, body {
     height: 100%;
-    overflow: hidden;
+    min-height: 100%;
 }
 
 body {
@@ -98,6 +94,13 @@ body {
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    min-height: var(--app-height);
+}
+
+button, .btn, .button {
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
 }
 
 /* Improved input styling for better tablet experience */

tests/recordings/viewport-matrix-landscape-keyboard.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+const LANDSCAPE_VIEWPORTS = [
+  { name: 'small-landscape', width: 1024, height: 600 },
+  { name: 'tablet-landscape', width: 1280, height: 800 },
+  { name: 'large-landscape', width: 1366, height: 768 },
+];
+
+for (const viewport of LANDSCAPE_VIEWPORTS) {
+  test(`viewport matrix: ${viewport.name}`, async ({ page }) => {
+    await page.setViewportSize({ width: viewport.width, height: viewport.height });
+    await page.goto('http://localhost:3000/');
+
+    await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+
+    // Step 1: ensure keyboard-sized viewport still keeps controls usable.
+    await page.getByLabel('Name Spieler 1').fill('Alpha');
+    await page.setViewportSize({
+      width: viewport.width,
+      height: Math.max(360, viewport.height - Math.floor(viewport.height * 0.35)),
+    });
+    const nextButton = page.getByRole('button', { name: 'Weiter' });
+    await nextButton.scrollIntoViewIfNeeded();
+    await expect(nextButton).toBeVisible();
+    await nextButton.click();
+
+    // Step 2: keep reduced height and verify progression still works.
+    await page.getByLabel('Name Spieler 2').fill('Beta');
+    await page.getByRole('button', { name: 'Weiter' }).click();
+    await page.getByRole('button', { name: 'Überspringen' }).click();
+
+    // Restore full landscape viewport for remaining wizard steps.
+    await page.setViewportSize({ width: viewport.width, height: viewport.height });
+
+    await page.getByRole('button', { name: '8-Ball' }).click();
+    await page.getByRole('button', { name: 'Weiter' }).click();
+    await page.getByRole('button', { name: '5' }).click();
+    await page.getByRole('button', { name: 'Weiter' }).click();
+    await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
+    await page.getByRole('button', { name: 'Weiter' }).click();
+    await page.getByRole('button', { name: 'Zuerst: Alpha' }).click();
+    await page.getByRole('button', { name: 'Weiter' }).click();
+
+    await expect(page.getByRole('button', { name: /Aktueller Punktestand für Alpha/i })).toBeVisible();
+    await expect(page.getByRole('button', { name: /Aktueller Punktestand für Beta/i })).toBeVisible();
+  });
+}
+