refactor: extract reusable library

- move reusable domain, data, state, ui code into src/lib - update host screens to consume new library exports - document architecture and configure path aliases - bump astro integration dependencies for compatibility Refs #30
2025-11-13 10:41:55 +01:00
parent 99be99d120
commit 8a46a8a019
77 changed files with 2240 additions and 1035 deletions
--- a/src/lib/features/README.md
+++ b/src/lib/features/README.md
@@ -0,0 +1,30 @@
+# Feature Bundles (`@lib/features`)
+
+Feature directories compose domain, data, state, and UI primitives into end-user flows. Each folder exports React/Preact components that can be dropped into any host application.
+
+## Available Features
+
+- `game-list`
+  - `GameList` component that renders filters + game cards.
+- `game-detail`
+  - `GameDetail` scoreboard with break tracking, undo triggers, and finish controls.
+- `game-lifecycle`
+  - `GameCompletionModal` summarising winners + rematch CTA.
+- `new-game`
+  - Wizard step components (`Player1Step`, `BreakOrderStep`, etc.) and modal pickers.
+
+## Usage Example
+
+```tsx
+import { GameList, GameCompletionModal } from '@lib/features/game-list';
+// or, via umbrella export:
+import { GameDetail, GameCompletionModal } from '@lib';
+```
+
+## Conventions
+
+- Feature components accept plain props (typically typed with `@lib/domain` types) and delegate callbacks to the consumer.
+- State management lives in `@lib/state`. Features should remain stateless except for local UI state (e.g. input fields).
+- Keep CSS modules inside the feature folder to avoid cross-feature leakage.
+
+
--- a/src/lib/features/game-detail/GameDetail.module.css
+++ b/src/lib/features/game-detail/GameDetail.module.css
@@ -0,0 +1,473 @@
+/* GameDetail-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.screen.active {
+    display: block;
+    opacity: 1;
+    transform: translateX(0);
+    position: relative;
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    min-height: 0;
+}
+.game-detail {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--space-md);
+    min-height: 0;
+}
+
+.game-title {
+    font-size: 24px;
+    color: #ccc;
+    flex-shrink: 0;
+}
+.game-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    width: 100%;
+    flex-shrink: 0;
+}
+.scores-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 32px;
+    min-height: 0;
+    flex-shrink: 0;
+}
+.player-score {
+    flex: 1;
+    text-align: center;
+    padding: 30px 20px;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    margin: 0 8px;
+    position: relative;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+    transition: all 0.3s ease;
+}
+
+.player-score:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+}
+.player-score:first-child {
+    background-color: #43a047;
+}
+.player-score:nth-child(2) {
+    background-color: #1565c0;
+}
+.player-score:nth-child(3) {
+    background-color: #333;
+}
+.player-name {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 15px;
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: rgba(255,255,255,0.2);
+    border-radius: 4px;
+    margin: 10px 0;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #fff 0%, #f0f0f0 100%);
+    border-radius: 4px;
+    transition: width 0.5s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.game-status {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.game-status.active {
+    background: #4caf50;
+    color: #fff;
+}
+
+.game-status.completed {
+    background: #ff9800;
+    color: #222;
+}
+.score {
+    font-size: 40vh;
+    font-weight: 900;
+    margin: 20px 0 30px 0;
+    line-height: 1;
+    color: #fff;
+    text-shadow: 0 4px 16px rgba(0,0,0,0.6);
+    text-align: center;
+    display: block;
+    min-height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.score-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: auto;
+}
+.score-button {
+    background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
+    color: #222;
+    border: none;
+    border-radius: 50%;
+    padding: 0;
+    font-size: 2.5rem;
+    font-weight: 900;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 80px;
+    height: 80px;
+    margin: 0 8px;
+    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: manipulation;
+}
+
+.score-button:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
+    background: linear-gradient(135deg, #ffa726 0%, #ffb74d 100%);
+}
+
+.score-button:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
+}
+
+.score-button:disabled {
+    background: #666;
+    color: #999;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+.game-controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+    width: 100%;
+}
+.control-button {
+    flex: 1;
+    padding: 30px;
+    background: #333;
+    color: white;
+    border: none;
+    border-radius: 0;
+    font-size: 24px;
+    cursor: pointer;
+    touch-action: manipulation;
+}
+.control-button.delete {
+    background: #f44336;
+}
+.game-detail-controls {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+    margin: 40px 0 0 0;
+    padding-bottom: var(--space-xl);
+    width: 100%;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.franky .player-name {
+    font-weight: bold;
+    color: #ff8c00; /* Example color */
+}
+.active-player {
+    position: relative;
+    border: 4px solid #ff9800;
+    box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15);
+    background: linear-gradient(90deg, #ff9800 0 8px, rgba(255,152,0,0.15) 8px 100%);
+    color: #222 !important;
+    animation: activePulse 1.2s infinite alternate;
+    z-index: 2;
+}
+.active-player .player-name, .active-player .score {
+    color: #222 !important;
+    text-shadow: 0 2px 8px rgba(255,255,255,0.25);
+}
+.active-player::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 8px;
+    background: #ff9800;
+    border-radius: 8px 0 0 8px;
+}
+@keyframes activePulse {
+    0% { box-shadow: 0 0 32px 8px #ff9800, 0 0 0 8px rgba(255,152,0,0.15); }
+    100% { box-shadow: 0 0 48px 16px #ff9800, 0 0 0 16px rgba(255,152,0,0.22); }
+}
+.turn-indicator {
+    margin: 20px 0;
+    font-size: 1.2rem;
+    text-align: center;
+}
+.potted-balls-container {
+    margin-top: 2rem;
+    padding: 1rem;
+    background: #2a2a2a;
+    border-radius: 8px;
+}
+.potted-balls-header {
+    text-align: center;
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+.potted-balls-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+    gap: 10px;
+}
+.potted-ball-btn {
+    padding: 1rem;
+    font-size: 1.2rem;
+    font-weight: bold;
+    border-radius: 8px;
+    border: 1px solid #444;
+    background-color: #333;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s, transform 0.2s;
+}
+.potted-ball-btn:hover:not(:disabled) {
+    background-color: #45a049;
+    transform: translateY(-2px);
+}
+.potted-ball-btn:disabled {
+    background-color: #222;
+    color: #555;
+    cursor: not-allowed;
+}
+.rerack-controls {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+.rerack-btn {
+    padding: 0.8rem 1.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    border-radius: 8px;
+    border: 1px solid #444;
+    background-color: #3a539b;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+.rerack-btn:hover {
+    background-color: #4a6fbf;
+}
+
+.foul-controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.foul-btn {
+  flex-grow: 1;
+  background-color: #ffc107; /* Amber */
+  color: #212529;
+  border: none;
+  padding: 0.75rem;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s;
+}
+
+.foul-btn:hover {
+  background-color: #ffca2c;
+}
+
+.foul-btn:disabled {
+  background-color: #e0e0e0;
+  color: #9e9e9e;
+  cursor: not-allowed;
+}
+
+.foul-indicator {
+  font-size: 1rem;
+  font-weight: bold;
+  color: #fff;
+  background-color: #c0392b;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-top: 8px;
+  display: inline-block;
+}
+
+.foul-warning {
+  background-color: #f39c12;
+  color: #000;
+}
+
+/* Game Log Styles */
+.game-log {
+  width: 100%;
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: var(--border-radius);
+  border: 1px solid #dee2e6;
+}
+
+.log-title {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1.2rem;
+  color: #495057;
+}
+
+.log-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: 0.9rem;
+}
+
+.log-entry {
+  padding: 0.5rem 0.25rem;
+  border-bottom: 1px solid #e9ecef;
+  color: #6c757d;
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+
+.game-log-table-container {
+  margin: 2.5rem auto 0 auto;
+  max-width: 100vw;
+  width: 100%;
+  overflow-x: auto;
+  background: #181818;
+  border-radius: 12px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
+  padding: 1.5rem 1rem;
+}
+.game-log-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1.05rem;
+  background: #222;
+  color: #fff;
+}
+.game-log-table th, .game-log-table td {
+  border: 1px solid #444;
+  padding: 0.5rem 0.7rem;
+  text-align: center;
+}
+.game-log-table th {
+  background: #333;
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+.game-log-table tr:nth-child(even) td {
+  background: #232323;
+}
+.game-log-table tr:nth-child(odd) td {
+  background: #181818;
+}
+.game-log-table .log-player-col {
+  background: #222;
+  color: #ff9800;
+  font-size: 1.15rem;
+  border-bottom: 2px solid #ff9800;
+}
+
+.turn-change-controls {
+  display: flex;
+  justify-content: center;
+  margin: 2.5rem 0 1.5rem 0;
+}
+.turn-change-btn {
+  background: #ff9800;
+  color: #222;
+  font-size: 2.2rem;
+  font-weight: 900;
+  padding: 2rem 4rem;
+  border: none;
+  border-radius: 18px;
+  box-shadow: 0 4px 32px rgba(255,152,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  letter-spacing: 1px;
+  margin: 0 auto;
+  display: block;
+}
+.turn-change-btn:hover, .turn-change-btn:focus {
+  background: #ffa726;
+  color: #111;
+  box-shadow: 0 6px 40px rgba(255,152,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
+}
+.pending-foul-info {
+  margin-left: 1.5rem;
+  font-size: 1.2rem;
+  color: #ffc107;
+  font-weight: 700;
+}
+.selected {
+  outline: 3px solid #ff9800 !important;
+  background: #fff3e0 !important;
+  color: #222 !important;
+} 
--- a/src/lib/features/game-detail/GameDetail.tsx
+++ b/src/lib/features/game-detail/GameDetail.tsx
@@ -0,0 +1,104 @@
+import { h } from 'preact';
+import styles from './GameDetail.module.css';
+import type { Game, EndlosGame } from '@lib/domain/types';
+
+interface GameDetailProps {
+  game: Game | undefined;
+  onFinishGame: () => void;
+  onUpdateScore: (player: number, change: number) => void;
+  onUpdateGame?: (game: EndlosGame) => void;
+  onUndo?: () => void;
+  onForfeit?: () => void;
+  onBack: () => void;
+}
+
+/**
+ * Game detail view for a single game.
+ */
+const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, onForfeit, onBack }: GameDetailProps) => {
+  if (!game) return null;
+
+  const handleScoreUpdate = (playerIndex: number, change: number) => {
+    onUpdateScore(playerIndex, change);
+    // Silent update; toast notifications removed
+  };
+
+
+  const isCompleted = game.status === 'completed';
+  
+  const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
+  const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
+
+  return (
+    <div className={styles['game-detail']}>
+      <div className={styles['game-title']}>
+        {game.gameType}{game.raceTo ? ` | Race to ${game.raceTo}` : ''}
+      </div>
+      <div className={styles['scores-container']}>
+        {playerNames.map((name, idx) => {
+          const currentScore = scores[idx];
+          const progressPercentage = game.raceTo ? Math.min((currentScore / game.raceTo) * 100, 100) : 0;
+          
+          return (
+            <div
+              className={styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')}
+              key={name + idx}
+            >
+              <span className={styles['player-name']}>
+                {name}
+                {(() => {
+                  const order = (game as any).breakOrder as number[] | undefined;
+                  const breakerIdx = (game as any).currentBreakerIdx as number | undefined;
+                  if (order && typeof breakerIdx === 'number' && order[breakerIdx] === idx + 1) {
+                    return <span title="Break" aria-label="Break" style={{ display: 'inline-block', width: '1em', height: '1em', borderRadius: '50%', background: '#fff', marginLeft: 6, verticalAlign: 'middle' }} />;
+                  }
+                  return null;
+                })()}
+              </span>
+              <div className={styles['progress-bar']}>
+                <div 
+                  className={styles['progress-fill']} 
+                  style={{ width: `${progressPercentage}%` }}
+                />
+              </div>
+              <span
+                className={styles['score']}
+                id={`score${idx + 1}`}
+                onClick={() => !isCompleted && onUpdateScore(idx + 1, 1)}
+                onKeyDown={(e) => {
+                  if (!isCompleted && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    onUpdateScore(idx + 1, 1);
+                  }
+                }}
+                role="button"
+                tabIndex={isCompleted ? -1 : 0}
+                aria-label={`Aktueller Punktestand für ${name}: ${scores[idx]}. Klicken oder Enter drücken zum Erhöhen.`}
+              >
+                {scores[idx]}
+              </span>
+              {/* +/- buttons removed per issue #29. Tap score to +1; use Undo to revert. */}
+            </div>
+          );
+        })}
+      </div>
+      <div className={styles['game-detail-controls']}>
+        <button className="btn" onClick={onBack} aria-label="Zurück zur Liste">Zurück zur Liste</button>
+        {onUndo && (
+          <button 
+            className="btn btn--secondary" 
+            onClick={() => {
+              onUndo();
+            }}
+            aria-label="Rückgängig"
+          >
+            ↶ Rückgängig
+          </button>
+        )}
+        <button className="btn" disabled={isCompleted} onClick={onFinishGame} aria-label={isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button>
+      </div>
+    </div>
+  );
+};
+
+export default GameDetail; 
--- a/src/lib/features/game-detail/README.md
+++ b/src/lib/features/game-detail/README.md
@@ -0,0 +1,34 @@
+# Game Detail (`@lib/features/game-detail`)
+
+`GameDetail` shows a single game's state, including live score controls and break indicators.
+
+## Props
+
+- `game: Game`
+- `onUpdateScore(playerIndex: number, delta: number): void`
+- `onFinishGame(): void`
+- `onUpdateGame?(game: EndlosGame): void`
+- `onUndo?(): void`
+- `onForfeit?(): void`
+- `onBack(): void`
+
+## Highlights
+
+- Handles both standard and endlos game modes.
+- Displays current breaker marker based on `breakOrder` / `currentBreakerIdx`.
+- Uses accessible button semantics so scores can be increased via keyboard.
+
+## Example
+
+```tsx
+import { GameDetail } from '@lib/features/game-detail';
+
+<GameDetail
+  game={selectedGame}
+  onUpdateScore={(player, change) => GameService.saveGame(...)}
+  onFinishGame={endGame}
+  onBack={showGameList}
+/>;
+```
+
+
--- a/src/lib/features/game-detail/index.ts
+++ b/src/lib/features/game-detail/index.ts
@@ -0,0 +1,2 @@
+export { default as GameDetail } from './GameDetail';
+
--- a/src/lib/features/game-lifecycle/GameCompletionModal.module.css
+++ b/src/lib/features/game-lifecycle/GameCompletionModal.module.css
@@ -0,0 +1,160 @@
+/* Only GameCompletionModal-specific styles. Shared modal styles are now in Modal.module.css */
+.final-scores {
+    margin: 20px 0;
+}
+.final-score {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 0;
+    margin-bottom: 8px;
+    background: #333;
+    border-radius: 8px;
+    font-size: 1.2rem;
+    color: #fff;
+}
+.final-score .player-name {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #fff;
+}
+.final-score .score {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #fff;
+}
+.winner-announcement {
+    text-align: center;
+    margin: 20px 0 0 0;
+    padding: 32px 16px 24px 16px; /* extra top padding to keep icons inside */
+    background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
+    border-radius: 16px;
+    font-size: 1.2rem;
+    color: #222;
+    font-weight: 700;
+    box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
+    animation: celebrationPulse 2s ease-in-out infinite;
+    position: relative;
+    overflow: visible; /* avoid clipping decorative icons */
+}
+
+.winner-announcement::before {
+    content: '🎉';
+    position: absolute;
+    top: 6px;
+    left: 20px;
+    font-size: 24px;
+    animation: bounce 1s ease-in-out infinite;
+}
+
+.winner-announcement::after {
+    content: '🏆';
+    position: absolute;
+    top: 6px;
+    right: 20px;
+    font-size: 24px;
+    animation: bounce 1s ease-in-out infinite 0.5s;
+}
+
+.winner-announcement h3 {
+    margin: 0;
+    font-size: 1.8rem;
+    color: #222;
+    text-align: center;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 900;
+}
+
+@keyframes celebrationPulse {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
+    }
+    50% {
+        transform: scale(1.02);
+        box-shadow: 0 12px 40px rgba(255, 152, 0, 0.4);
+    }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-10px);
+    }
+    60% {
+        transform: translateY(-5px);
+    }
+}
+.btn {
+    flex: 1;
+    padding: 18px 0;
+    font-size: 1.1rem;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #fff;
+    background: #333;
+    font-weight: 600;
+    transition: background 0.2s;
+}
+.btn--warning {
+    background: #f44336;
+}
+.btn:not(.btn--warning):hover {
+    background: #444;
+}
+.btn--warning:hover {
+    background: #d32f2f;
+}
+@media (max-width: 600px) {
+    .btn {
+        font-size: 1rem;
+        padding: 14px 0;
+    }
+}
+
+.stats-container {
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid #dee2e6;
+}
+
+.stats-title {
+    text-align: center;
+    font-size: 1.3rem;
+    color: #495057;
+    margin-bottom: 1rem;
+}
+
+.player-stats {
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+}
+
+.player-name-stats {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    color: #343a40;
+}
+
+.stat-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.95rem;
+    color: #6c757d;
+}
+
+.stat-item strong {
+    color: #212529;
+}
+
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+} 
--- a/src/lib/features/game-lifecycle/GameCompletionModal.tsx
+++ b/src/lib/features/game-lifecycle/GameCompletionModal.tsx
@@ -0,0 +1,63 @@
+import { h } from 'preact';
+import modalStyles from '@lib/ui/Modal.module.css';
+import styles from './GameCompletionModal.module.css';
+import type { Game } from '@lib/domain/types';
+
+interface GameCompletionModalProps {
+  open: boolean;
+  game: Game | null;
+  onConfirm: () => void;
+  onClose: () => void;
+  onRematch: () => void;
+}
+
+/**
+ * Modal shown when a game is completed.
+ */
+const GameCompletionModal = ({ open, game, onConfirm, onClose, onRematch }: GameCompletionModalProps) => {
+  if (!open || !game) return null;
+
+  const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
+  const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
+  let maxScore, winners, winnerText;
+
+  if (game.forfeitedBy) {
+    winnerText = `${game.winner} hat gewonnen, da ${game.forfeitedBy} aufgegeben hat.`;
+  } else {
+    maxScore = Math.max(...scores);
+    winners = playerNames.filter((name, idx) => scores[idx] === maxScore);
+    winnerText = winners.length > 1
+      ? `Unentschieden zwischen ${winners.join(' und ')}`
+      : `${winners[0]} hat gewonnen!`;
+  }
+  
+  return (
+    <div id="game-completion-modal" className={modalStyles['modal'] + ' ' + modalStyles['show']} role="dialog" aria-modal="true" aria-labelledby="completion-modal-title">
+      <div className={modalStyles['modal-content']}>
+        <div className={modalStyles['modal-header']}>
+          <span className={modalStyles['modal-title']} id="completion-modal-title">Spiel beendet</span>
+          <button className={modalStyles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
+        </div>
+        <div className={modalStyles['modal-body']}>
+          <div className={styles['final-scores']}>
+            {playerNames.map((name, idx) => (
+              <div className={styles['final-score']} key={name + idx}>
+                <span className={styles['player-name']}>{name}</span>
+                <span className={styles['score']}>{scores[idx]}</span>
+              </div>
+            ))}
+          </div>
+          <div className={styles['winner-announcement']}><h3>{winnerText}</h3></div>
+
+        </div>
+        <div className={modalStyles['modal-footer']}>
+          <button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm} aria-label="Bestätigen">Bestätigen</button>
+          <button className={styles['btn'] + ' ' + styles['btn--primary']} onClick={onRematch} aria-label="Rematch">Rematch</button>
+          <button className={styles['btn']} onClick={onClose} aria-label="Abbrechen">Abbrechen</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GameCompletionModal; 
--- a/src/lib/features/game-lifecycle/README.md
+++ b/src/lib/features/game-lifecycle/README.md
@@ -0,0 +1,30 @@
+# Game Lifecycle (`@lib/features/game-lifecycle`)
+
+Utility components that react to lifecycle transitions in a game session.
+
+## GameCompletionModal
+
+- Props:
+  - `open: boolean`
+  - `game: Game | null`
+  - `onConfirm(): void`
+  - `onClose(): void`
+  - `onRematch(): void`
+- Renders final scores, winner messaging, and rematch CTA.
+- Reuses `@lib/ui/Modal.module.css` for a consistent look-and-feel.
+
+## Example
+
+```tsx
+import { GameCompletionModal } from '@lib/features/game-lifecycle';
+
+<GameCompletionModal
+  open={state.open}
+  game={state.game}
+  onConfirm={finalise}
+  onRematch={startRematch}
+  onClose={closeModal}
+/>;
+```
+
+
--- a/src/lib/features/game-lifecycle/index.ts
+++ b/src/lib/features/game-lifecycle/index.ts
@@ -0,0 +1,2 @@
+export { default as GameCompletionModal } from './GameCompletionModal';
+
--- a/src/lib/features/game-list/GameList.module.css
+++ b/src/lib/features/game-list/GameList.module.css
@@ -0,0 +1,284 @@
+/* GameList-specific styles using design system tokens */
+.screen.active {
+    display: block;
+    opacity: 1;
+    transform: translateX(0);
+    position: relative;
+}
+
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding: var(--space-lg);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.screen-title {
+    font-size: var(--font-size-xxl);
+    margin-bottom: var(--space-lg);
+    font-weight: 700;
+}
+
+.game-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+/* Filter buttons with improved symmetry */
+.filter-buttons {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-sm);
+    margin: var(--space-lg) 0 var(--space-md) 0;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    flex-shrink: 0;
+}
+
+.filter-button {
+    background: var(--color-secondary);
+    color: var(--color-text);
+    border: none;
+    font-size: var(--font-size-base);
+    padding: var(--space-md) 0;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all var(--transition-base);
+    min-height: var(--touch-target-comfortable);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.filter-button:hover {
+    background: var(--color-secondary-hover);
+    transform: translateY(-1px);
+}
+
+.filter-button.active {
+    background: var(--color-primary);
+    color: white;
+    box-shadow: var(--shadow-md);
+}
+
+/* Games container with improved spacing */
+.games-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    padding-bottom: var(--space-md);
+}
+
+/* Game item with better symmetry and spacing */
+.game-item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-lg);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-base);
+    cursor: pointer;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+}
+
+.game-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--color-primary);
+}
+
+.game-item.active {
+    background: var(--color-success);
+    border-color: var(--color-success);
+}
+
+.game-item.completed {
+    background: var(--color-surface);
+    opacity: 0.8;
+    border-color: var(--color-border);
+}
+
+/* Game info with improved layout */
+.game-info {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: var(--space-lg);
+    width: 100%;
+    cursor: pointer;
+}
+
+.game-type {
+    font-weight: 700;
+    font-size: var(--font-size-lg);
+    color: var(--color-text);
+    white-space: nowrap;
+    min-width: 120px;
+    text-align: center;
+    background: var(--color-secondary);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-sm);
+}
+
+.player-names {
+    color: var(--color-text);
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+    text-align: center;
+    flex: 1;
+}
+
+.game-scores {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    text-align: center;
+    color: var(--color-primary);
+    min-width: 120px;
+    background: var(--color-background);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-sm);
+}
+
+/* Delete button with improved touch target */
+.delete-button {
+    width: var(--touch-target-comfortable);
+    height: var(--touch-target-comfortable);
+    border: none;
+    background: var(--color-danger);
+    color: white;
+    border-radius: 50%;
+    font-size: var(--font-size-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-base);
+    cursor: pointer;
+    box-shadow: var(--shadow-sm);
+}
+
+.delete-button::before {
+    content: '🗑️';
+    font-size: var(--font-size-lg);
+}
+
+.delete-button:hover {
+    background: #cc0000;
+    transform: scale(1.05);
+    box-shadow: var(--shadow-md);
+}
+
+.delete-button:active {
+    transform: scale(0.95);
+}
+
+/* Empty state styling */
+.empty-state {
+    text-align: center;
+    padding: var(--space-xxl);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-lg);
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    border: 2px dashed var(--color-border);
+}
+
+/* Page header */
+.page-header {
+    font-size: var(--font-size-xxxl);
+    font-weight: 700;
+    color: var(--color-text);
+    background: var(--color-surface);
+    padding: var(--space-lg) 0 var(--space-md) 0;
+    margin-bottom: var(--space-sm);
+    text-align: left;
+    width: 100%;
+    letter-spacing: 0.5px;
+    border-radius: var(--radius-lg);
+}
+
+/* Tablet-specific improvements */
+@media (min-width: 768px) and (max-width: 1024px) {
+    .screen-content {
+        padding: var(--space-xl);
+    }
+    
+    .filter-buttons {
+        gap: var(--space-md);
+        margin: var(--space-xl) 0 var(--space-lg) 0;
+    }
+    
+    .filter-button {
+        font-size: var(--font-size-lg);
+        padding: var(--space-lg) 0;
+        min-height: var(--touch-target-comfortable);
+    }
+    
+    .game-item {
+        padding: var(--space-xl);
+        gap: var(--space-lg);
+    }
+    
+    .game-info {
+        gap: var(--space-xl);
+    }
+    
+    .game-type {
+        font-size: var(--font-size-xl);
+        min-width: 150px;
+        padding: var(--space-md) var(--space-lg);
+    }
+    
+    .player-names {
+        font-size: var(--font-size-xl);
+    }
+    
+    .game-scores {
+        font-size: var(--font-size-xxl);
+        min-width: 150px;
+        padding: var(--space-md) var(--space-lg);
+    }
+    
+    .delete-button {
+        width: 64px;
+        height: 64px;
+        font-size: var(--font-size-xl);
+    }
+    
+    .empty-state {
+        font-size: var(--font-size-xl);
+        padding: var(--space-xxl) var(--space-xl);
+    }
+}
+
+/* Mobile adjustments */
+@media (max-width: 767px) {
+    .screen-content {
+        padding: var(--space-md);
+    }
+    
+    .game-info {
+        grid-template-columns: 1fr;
+        gap: var(--space-md);
+        text-align: center;
+    }
+    
+    .game-type,
+    .game-scores {
+        min-width: auto;
+        width: 100%;
+    }
+} 
--- a/src/lib/features/game-list/GameList.tsx
+++ b/src/lib/features/game-list/GameList.tsx
@@ -0,0 +1,129 @@
+import { h } from 'preact';
+import { Card } from '@lib/ui/Card';
+import { Button } from '@lib/ui/Button';
+import styles from './GameList.module.css';
+import type { Game, GameFilter, StandardGame } from '@lib/domain/types';
+
+interface GameListProps {
+  games: Game[];
+  filter: GameFilter;
+  setFilter: (filter: GameFilter) => void;
+  onShowGameDetail: (gameId: number) => void;
+  onDeleteGame: (gameId: number) => void;
+}
+
+export default function GameList({ 
+  games, 
+  filter = 'all', 
+  setFilter, 
+  onShowGameDetail, 
+  onDeleteGame 
+}: GameListProps) {
+  const filteredGames = games
+    .filter(game => {
+      if (filter === 'active') return game.status === 'active';
+      if (filter === 'completed') return game.status === 'completed';
+      return true;
+    })
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+  const getPlayerNames = (game: Game): string => {
+    if ('players' in game) {
+      return game.players.map(p => p.name).join(' vs ');
+    } else {
+      const standardGame = game as StandardGame;
+      return standardGame.player3
+        ? `${standardGame.player1} vs ${standardGame.player2} vs ${standardGame.player3}`
+        : `${standardGame.player1} vs ${standardGame.player2}`;
+    }
+  };
+
+  const getScores = (game: Game): string => {
+    if ('players' in game) {
+      return game.players.map(p => p.score).join(' - ');
+    } else {
+      const standardGame = game as StandardGame;
+      return standardGame.player3
+        ? `${standardGame.score1} - ${standardGame.score2} - ${standardGame.score3}`
+        : `${standardGame.score1} - ${standardGame.score2}`;
+    }
+  };
+
+  const filterButtons = [
+    { key: 'all' as const, label: 'Alle', ariaLabel: 'Alle Spiele anzeigen' },
+    { key: 'active' as const, label: 'Aktiv', ariaLabel: 'Nur aktive Spiele anzeigen' },
+    { key: 'completed' as const, label: 'Abgeschlossen', ariaLabel: 'Nur abgeschlossene Spiele anzeigen' },
+  ];
+
+  return (
+    <div className={styles['game-list']}>
+      <div className={styles['filter-buttons']}>
+        {filterButtons.map(({ key, label, ariaLabel }) => (
+          <Button
+            key={key}
+            variant={filter === key ? 'primary' : 'secondary'}
+            size="small"
+            onClick={() => setFilter(key)}
+            aria-label={ariaLabel}
+          >
+            {label}
+          </Button>
+        ))}
+      </div>
+      
+      <div className={styles['games-container']}>
+        {filteredGames.length === 0 ? (
+          <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
+        ) : (
+          filteredGames.map(game => {
+          const playerNames = getPlayerNames(game);
+          const scores = getScores(game);
+          
+          return (
+            <Card
+              key={game.id}
+              variant="elevated"
+              className={
+                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
+              }
+            >
+              <div 
+                className={styles['game-info']} 
+                onClick={() => onShowGameDetail(game.id)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onShowGameDetail(game.id);
+                  }
+                }}
+                role="button" 
+                tabIndex={0} 
+                aria-label={`Details für Spiel ${playerNames}`}
+                aria-describedby={`game-${game.id}-description`}
+              >
+                <div className={styles['game-type']}>
+                  {game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}
+                </div>
+                <div className={styles['player-names']}>{playerNames}</div>
+                <div className={styles['game-scores']}>{scores}</div>
+                <div id={`game-${game.id}-description`} className="sr-only">
+                  {game.gameType} Spiel zwischen {playerNames} mit dem Stand {scores}. 
+                  {game.status === 'completed' ? 'Abgeschlossen' : 'Aktiv'}
+                </div>
+              </div>
+              <Button
+                variant="danger"
+                size="small"
+                onClick={() => onDeleteGame(game.id)}
+                aria-label={`Spiel löschen: ${playerNames}`}
+              >
+                🗑
+              </Button>
+            </Card>
+          );
+        })
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/lib/features/game-list/README.md
+++ b/src/lib/features/game-list/README.md
@@ -0,0 +1,33 @@
+# Game List (`@lib/features/game-list`)
+
+Single component `GameList` renders the scoreboard overview with filter tabs.
+
+## Props
+
+- `games: Game[]`
+- `filter: GameFilter`
+- `setFilter(filter: GameFilter): void`
+- `onShowGameDetail(gameId: number): void`
+- `onDeleteGame(gameId: number): void`
+
+## Behaviour
+
+- Sorts games by `createdAt` (desc) and filters according to `filter`.
+- Derives player names/scores for both `StandardGame` and `EndlosGame`.
+- Uses `@lib/ui` primitives (`Button`, `Card`) for visuals.
+
+## Example
+
+```tsx
+import { GameList } from '@lib/features/game-list';
+
+<GameList
+  games={games}
+  filter={filter}
+  setFilter={setFilter}
+  onShowGameDetail={showDetail}
+  onDeleteGame={openDeleteModal}
+/>;
+```
+
+
--- a/src/lib/features/game-list/index.ts
+++ b/src/lib/features/game-list/index.ts
@@ -0,0 +1,2 @@
+export { default as GameList } from './GameList';
+
--- a/src/lib/features/new-game/NewGame.module.css
+++ b/src/lib/features/new-game/NewGame.module.css
@@ -0,0 +1,431 @@
+/* NewGame-specific styles only. Shared utility classes are now in global CSS. */
+.screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    display: none;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform var(--transition-slow), opacity var(--transition-slow);
+}
+.screen-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: var(--space-lg);
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    min-height: 0;
+}
+.screen-title {
+    font-size: clamp(1.25rem, 3vh, 1.5rem);
+    font-weight: 700;
+    color: var(--color-text);
+    margin-bottom: clamp(0.5rem, 2vh, 2rem);
+    letter-spacing: 0.5px;
+    text-align: center;
+}
+.player-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+    width: 100%;
+    margin-bottom: var(--space-xl);
+    flex-shrink: 1;
+    min-height: 0;
+}
+.player-input {
+    background: var(--color-background);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    border: 2px solid var(--color-border);
+    transition: border-color var(--transition-base);
+    position: relative;
+    flex-shrink: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+.player-input:focus-within {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+.player-input label {
+    display: block;
+    margin-bottom: clamp(0.5rem, 2vh, 1rem);
+    color: var(--color-text);
+    font-size: clamp(1rem, 2.5vh, 1.125rem);
+    font-weight: 600;
+}
+.name-input-container {
+    display: flex;
+    gap: var(--space-md);
+    position: relative;
+}
+.name-input {
+    flex: 1;
+    padding: var(--space-md);
+    border: 2px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: var(--font-size-base);
+    min-height: var(--touch-target-comfortable);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-base);
+}
+.name-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+.game-settings {
+    margin-top: 0;
+    width: 100%;
+    margin-bottom: var(--space-xl);
+}
+.setting-group {
+    margin-bottom: var(--space-lg);
+}
+.setting-group label {
+    display: block;
+    margin-bottom: var(--space-md);
+    color: var(--color-text);
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+}
+.setting-group select, .setting-group input {
+    width: 100%;
+    padding: var(--space-md);
+    border: 2px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: var(--font-size-base);
+    min-height: var(--touch-target-comfortable);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-base);
+}
+.setting-group input:focus, .setting-group select:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+.validation-error {
+    color: var(--color-danger);
+    background: var(--color-surface);
+    border: 1px solid var(--color-danger);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--font-size-base);
+    text-align: center;
+    font-weight: 500;
+}
+.new-game-form {
+    width: 100%;
+    max-width: 600px;
+    margin: var(--space-xl) auto 0 auto;
+    background: var(--color-surface);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--color-border);
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.form-header {
+    flex-shrink: 0;
+    padding: clamp(0.5rem, 2vh, 2rem) var(--space-lg) clamp(0.25rem, 1vh, 1rem) var(--space-lg);
+}
+
+.form-content {
+    flex: 1;
+    overflow: hidden;
+    padding: 0 var(--space-lg);
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.form-footer {
+    flex-shrink: 0;
+    padding: var(--space-lg);
+}
+.progress-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+    margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
+}
+.progress-dot {
+    width: clamp(10px, 2vh, 16px);
+    height: clamp(10px, 2vh, 16px);
+    border-radius: 50%;
+    background: var(--color-border);
+    opacity: 0.4;
+    transition: all var(--transition-base);
+    position: relative;
+}
+.progress-dot.active {
+    background: var(--color-primary);
+    opacity: 1;
+    transform: scale(1.2);
+    box-shadow: 0 0 0 4px var(--color-primary-light);
+}
+.quick-pick-container {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.quick-pick-btn {
+    min-width: 60px;
+    min-height: 36px;
+    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;
+    transition: all var(--transition-base);
+    font-weight: 500;
+    flex-shrink: 0;
+}
+.quick-pick-btn:hover, .quick-pick-btn:focus {
+    background: var(--color-secondary-hover);
+    border-color: var(--color-primary);
+    transform: translateY(-1px);
+    outline: none;
+}
+.arrow-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: var(--space-xxl);
+    width: 100%;
+    gap: var(--space-lg);
+}
+.arrow-btn {
+    font-size: 48px;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: var(--color-secondary);
+    color: var(--color-text);
+    border: 2px solid var(--color-border);
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-base);
+    font-weight: bold;
+}
+.arrow-btn:hover, .arrow-btn:focus {
+    background: var(--color-secondary-hover);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+    outline: none;
+}
+.arrow-btn:active {
+    transform: translateY(0);
+}
+.clear-input-btn {
+    position: absolute;
+    right: var(--space-sm);
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: var(--font-size-xl);
+    color: var(--color-text-muted);
+    padding: var(--space-xs);
+    z-index: 2;
+    transition: color var(--transition-base);
+    border-radius: var(--radius-sm);
+    min-height: var(--touch-target-min);
+    min-width: var(--touch-target-min);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.clear-input-btn:hover, .clear-input-btn:focus {
+    color: var(--color-text);
+    background: var(--color-secondary);
+    outline: none;
+}
+.game-type-selection {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-md);
+    width: 100%;
+    margin: var(--space-md) 0;
+}
+.game-type-btn {
+    background: var(--color-background);
+    border: 2px solid var(--color-border);
+    color: var(--color-text);
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    padding: var(--space-xl);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    text-align: center;
+    transition: all var(--transition-base);
+    min-height: var(--touch-target-comfortable);
+}
+.game-type-btn:hover {
+    background: var(--color-surface);
+    border-color: var(--color-primary);
+    transform: translateY(-1px);
+}
+.game-type-btn.selected {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+    box-shadow: var(--shadow-md);
+}
+.race-to-selection {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: var(--space-md);
+    width: 100%;
+    margin: var(--space-md) 0;
+}
+.race-to-btn {
+    background: var(--color-background);
+    border: 2px solid var(--color-border);
+    color: var(--color-text);
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    padding: var(--space-lg) var(--space-sm);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    text-align: center;
+    transition: all var(--transition-base);
+    min-height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.race-to-btn:hover {
+    background: var(--color-surface);
+    border-color: var(--color-primary);
+    transform: translateY(-1px);
+}
+.race-to-btn.selected {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+    box-shadow: var(--shadow-md);
+}
+/* Match selected styling for quick pick buttons used in BreakRuleStep */
+.quick-pick-btn.selected {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
+    box-shadow: var(--shadow-md);
+}
+.custom-race-to {
+    display: flex;
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+    align-items: center;
+}
+.custom-race-to input {
+    flex-grow: 1;
+}
+.custom-race-to .arrow-btn {
+    width: 60px;
+    height: 60px;
+    font-size: 32px;
+    flex-shrink: 0;
+}
+.endlos-container {
+    width: 100%;
+    margin-bottom: 12px;
+}
+.endlos-btn {
+    width: 100%;
+}
+.player1-input.player-input {
+    border-color: var(--color-success);
+    background: linear-gradient(135deg, var(--color-success) 0%, rgba(76, 175, 80, 0.1) 100%);
+}
+.player2-input.player-input {
+    border-color: #1565c0;
+    background: linear-gradient(135deg, #1565c0 0%, rgba(21, 101, 192, 0.1) 100%);
+}
+.player3-input.player-input {
+    border-color: var(--color-secondary);
+    background: linear-gradient(135deg, var(--color-secondary) 0%, rgba(51, 51, 51, 0.1) 100%);
+}
+.player1-input.player-input input,
+.player2-input.player-input input,
+.player3-input.player-input input {
+    background: #fff;
+    color: #222;
+    border: 1px solid #ccc;
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+    .screen-content {
+        padding: var(--space-xl);
+    }
+    .new-game-form {
+        max-width: 700px;
+        padding: var(--space-xxl) var(--space-xl) var(--space-xl) var(--space-xl);
+    }
+    .screen-title {
+        font-size: var(--font-size-xxxl);
+    }
+    .arrow-btn {
+        width: 100px;
+        height: 100px;
+        font-size: 56px;
+    }
+    .game-type-btn,
+    .race-to-btn {
+        padding: var(--space-xl);
+        font-size: var(--font-size-xl);
+        min-height: var(--touch-target-comfortable);
+    }
+    .quick-pick-btn {
+        min-height: var(--touch-target-comfortable);
+        font-size: var(--font-size-lg);
+        padding: var(--space-md) var(--space-lg);
+    }
+}
+@media (max-width: 767px) {
+    .screen-content {
+        padding: var(--space-md);
+    }
+    .new-game-form {
+        margin: var(--space-lg) auto 0 auto;
+        padding: var(--space-lg);
+    }
+    .game-type-selection {
+        grid-template-columns: 1fr;
+    }
+    .race-to-selection {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .arrow-nav {
+        gap: var(--space-md);
+    }
+    .arrow-btn {
+        width: 70px;
+        height: 70px;
+        font-size: 40px;
+    }
+} 
--- a/src/lib/features/new-game/PlayerSelectModal.module.css
+++ b/src/lib/features/new-game/PlayerSelectModal.module.css
@@ -0,0 +1,70 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background: #2c2c2c;
+  padding: 24px;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.modalHeader h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #aaa;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.playerList {
+  max-height: 60vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.playerItem {
+  background: #444;
+  color: #fff;
+  border: none;
+  padding: 16px;
+  border-radius: 8px;
+  text-align: left;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.playerItem:hover {
+  background: #555;
+} 
--- a/src/lib/features/new-game/README.md
+++ b/src/lib/features/new-game/README.md
@@ -0,0 +1,46 @@
+# New Game Wizard (`@lib/features/new-game`)
+
+Composable building blocks for the multi-step "start a new game" workflow.
+
+## Exports
+
+- `Player1Step`, `Player2Step`, `Player3Step` – Player name capture with history + quick picks.
+- `GameTypeStep` – Game type selector.
+- `RaceToStep` – Numeric race-to chooser with infinity support.
+- `BreakRuleStep`, `BreakOrderStep` – Break configuration helpers.
+- `PlayerSelectModal` – Modal surface for long player lists.
+
+All exports are surfaced via `@lib/features/new-game`.
+
+## Props & Contracts
+
+- Steps expect pure callbacks (`onNext`, `onCancel`) and derive their own UI state.
+- Player history arrays control quick-pick ordering. Empty arrays fall back gracefully.
+- Styling is shared via `NewGame.module.css` to keep a consistent visual language.
+
+## Integrating the Wizard
+
+```tsx
+import { Player1Step, Player2Step } from '@lib/features/new-game';
+import { useNewGameWizard } from '@lib/state';
+
+const wizard = useNewGameWizard();
+
+return (
+  <>
+    {wizard.newGameStep === 'player1' && (
+      <Player1Step
+        playerNameHistory={playerHistory}
+        onNext={(name) => {
+          wizard.updateGameData({ player1: name });
+          wizard.nextStep('player2');
+        }}
+        onCancel={wizard.resetWizard}
+      />
+    )}
+    {/* render subsequent steps analogously */}
+  </>
+);
+```
+
+
--- a/src/lib/features/new-game/index.ts
+++ b/src/lib/features/new-game/index.ts
@@ -0,0 +1,9 @@
+export { PlayerSelectModal } from './steps/PlayerSelectModal';
+export { Player1Step } from './steps/Player1Step';
+export { Player2Step } from './steps/Player2Step';
+export { Player3Step } from './steps/Player3Step';
+export { GameTypeStep } from './steps/GameTypeStep';
+export { RaceToStep } from './steps/RaceToStep';
+export { BreakRuleStep } from './steps/BreakRuleStep';
+export { BreakOrderStep } from './steps/BreakOrderStep';
+
--- a/src/lib/features/new-game/steps/BreakOrderStep.tsx
+++ b/src/lib/features/new-game/steps/BreakOrderStep.tsx
@@ -0,0 +1,113 @@
+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>
+  );
+};
+
+
--- a/src/lib/features/new-game/steps/BreakRuleStep.tsx
+++ b/src/lib/features/new-game/steps/BreakRuleStep.tsx
@@ -0,0 +1,55 @@
+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>
+  );
+};
+
+
--- a/src/lib/features/new-game/steps/GameTypeStep.tsx
+++ b/src/lib/features/new-game/steps/GameTypeStep.tsx
@@ -0,0 +1,94 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import styles from '../NewGame.module.css';
+import { GAME_TYPES } from '@lib/domain/constants';
+
+interface GameTypeStepProps {
+  onNext: (type: string) => void;
+  onCancel: () => void;
+  initialValue?: string;
+}
+
+export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps) => {
+  const [gameType, setGameType] = useState(initialValue);
+
+  const handleSelect = (selectedType: string) => {
+    setGameType(selectedType);
+    onNext(selectedType);
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    if (gameType) {
+      onNext(gameType);
+    }
+  };
+
+  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>
+        <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'] + ' ' + styles['active']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+        </div>
+      </div>
+      
+      <div className={styles['form-content']}>
+        <div className={styles['game-type-selection']}>
+          {GAME_TYPES.map(({ value, label }) => (
+            <button
+              key={value}
+              type="button"
+              className={`${styles['game-type-btn']} ${gameType === value ? styles.selected : ''}`}
+              onClick={() => handleSelect(value)}
+            >
+              {label}
+            </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>
+  );
+};
+
+
--- a/src/lib/features/new-game/steps/Player1Step.tsx
+++ b/src/lib/features/new-game/steps/Player1Step.tsx
@@ -0,0 +1,262 @@
+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';
+
+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>
+        <div className={styles['progress-indicator']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}>
+          <span className={styles['progress-dot'] + ' ' + styles['active']} />
+          <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']} />
+        </div>
+      </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>
+  );
+};
+
+
--- a/src/lib/features/new-game/steps/Player2Step.tsx
+++ b/src/lib/features/new-game/steps/Player2Step.tsx
@@ -0,0 +1,155 @@
+import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import styles from '../NewGame.module.css';
+
+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>
+        <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot'] + ' ' + styles['active']} />
+          <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']} />
+        </div>
+      </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>
+  );
+};
+
+
--- a/src/lib/features/new-game/steps/Player3Step.tsx
+++ b/src/lib/features/new-game/steps/Player3Step.tsx
@@ -0,0 +1,161 @@
+import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import styles from '../NewGame.module.css';
+
+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>
+        <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot'] + ' ' + styles['active']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+        </div>
+      </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>
+  );
+};
+
+
--- a/src/lib/features/new-game/steps/PlayerSelectModal.tsx
+++ b/src/lib/features/new-game/steps/PlayerSelectModal.tsx
@@ -0,0 +1,28 @@
+import { h } from 'preact';
+import modalStyles from '../PlayerSelectModal.module.css';
+
+interface PlayerSelectModalProps {
+  players: string[];
+  onSelect: (player: string) => void;
+  onClose: () => void;
+}
+
+export const PlayerSelectModal = ({ players, onSelect, onClose }: PlayerSelectModalProps) => (
+  <div className={modalStyles.modalOverlay} onClick={onClose}>
+    <div className={modalStyles.modalContent} onClick={e => e.stopPropagation()}>
+      <div className={modalStyles.modalHeader}>
+        <h3>Alle Spieler</h3>
+        <button className={modalStyles.closeButton} onClick={onClose}>×</button>
+      </div>
+      <div className={modalStyles.playerList}>
+        {players.map(player => (
+          <button key={player} className={modalStyles.playerItem} onClick={() => onSelect(player)}>
+            {player}
+          </button>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+
--- a/src/lib/features/new-game/steps/RaceToStep.tsx
+++ b/src/lib/features/new-game/steps/RaceToStep.tsx
@@ -0,0 +1,122 @@
+import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import styles from '../NewGame.module.css';
+import {
+  RACE_TO_QUICK_PICKS,
+  RACE_TO_DEFAULT,
+  RACE_TO_INFINITY,
+} from '@lib/domain/constants';
+
+interface RaceToStepProps {
+  onNext: (raceTo: string | number) => void;
+  onCancel: () => void;
+  initialValue?: string | number;
+  gameType?: string;
+}
+
+export const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToStepProps) => {
+  const quickPicks = [...RACE_TO_QUICK_PICKS];
+  const defaultValue = RACE_TO_DEFAULT;
+  const [raceTo, setRaceTo] = useState<string | number>(
+    initialValue !== '' ? initialValue : defaultValue
+  );
+
+  useEffect(() => {
+    if (initialValue === '' || initialValue === undefined) {
+      setRaceTo(defaultValue);
+    } else {
+      setRaceTo(initialValue);
+    }
+  }, [defaultValue, initialValue, gameType]);
+
+  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);
+  };
+
+  const handleInputChange = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    setRaceTo(target.value);
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    const raceToValue = raceTo === 'Infinity' ? Infinity : (parseInt(String(raceTo), 10) || 0);
+    onNext(raceToValue);
+  };
+
+  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>
+      <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'] + ' ' + styles['active']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+      </div>
+      <div className={styles['endlos-container']}>
+        <button
+          type="button"
+          className={`${styles['race-to-btn']} ${styles['endlos-btn']} ${
+            raceTo === RACE_TO_INFINITY ? styles.selected : ''
+          }`}
+          onClick={() => handleQuickPick(RACE_TO_INFINITY)}
+        >
+          Endlos
+        </button>
+      </div>
+      <div className={styles['race-to-selection']}>
+        {quickPicks.map(value => (
+          <button
+            key={value}
+            type="button"
+          className={`${styles['race-to-btn']} ${
+            parseInt(String(raceTo), 10) === value ? styles.selected : ''
+          }`}
+          onClick={() => handleQuickPick(value)}
+          >
+            {value}
+          </button>
+        ))}
+      </div>
+      <div className={styles['custom-race-to']}>
+        <input
+          type="number"
+          pattern="[0-9]*"
+          value={raceTo}
+          onInput={handleInputChange}
+          className={styles['name-input']}
+          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>
+  );
+};
+
+
				`@@ -0,0 +1,2 @@`
				`export { default as GameDetail } from './GameDetail';`
				`@@ -0,0 +1,2 @@`
				`export { default as GameCompletionModal } from './GameCompletionModal';`
				`@@ -0,0 +1,2 @@`
				`export { default as GameList } from './GameList';`