refactor: standardize new game progress ui

- introduce shared progress indicator component for wizard steps
- align layouts and button sizing across new game panels
- update feature exports to surface the new component

Refs #30

.gitea

@@ -1 +1 @@
-https://gitea.schwenk.online/froxxxy/bscscore/issues/26
+https://gitea.schwenk.online/froxxxy/bscscore/issues/30

.gitignore

@@ -25,3 +25,8 @@ pnpm-debug.log*
 
 .gitea
 dev/.gitea
+
+# Playwright test artifacts
+playwright-report/
+test-results/
+playwright/.cache/

README.md

@@ -14,44 +14,17 @@ A modern, responsive pool/billiards scoring application built with **Astro** and
 
 ## 🏗️ Architecture
 
-This project has been refactored following modern software development best practices:
+Everything reusable now lives under `src/lib`, allowing you to embed the core experience inside another React/Preact host without the Astro shell.
 
-### **Separation of Concerns**
-- **Services Layer**: Game data management and localStorage operations
-- **Custom Hooks**: Reusable state management logic
-- **Components**: UI components with single responsibilities
-- **Utils**: Pure utility functions for common operations
+- **`@lib/domain`** – Pure TypeScript domain model (types, constants, validation, helpers).
+- **`@lib/data`** – Persistence adapters and repositories (IndexedDB, migrations).
+- **`@lib/state`** – Composable hooks that orchestrate domain + data.
+- **`@lib/ui`** – Stateless UI primitives with co-located CSS modules.
+- **`@lib/features/*`** – Feature bundles composing UI + state (game list, detail, lifecycle modals, new-game wizard).
 
-### **Type Safety**
-- Full TypeScript implementation
-- Comprehensive type definitions for game domain
-- Type-safe component props and state management
+The Astro `src/components` folder is now a thin host layer (screens + island bootstrap) that consumes the library.
 
-### **Component Architecture**
-```
-src/
-├── components/
-│   ├── ui/           # Reusable UI components (Button, Card, Layout)
-│   ├── screens/      # Screen-level components
-│   └── ...           # Feature-specific components
-├── hooks/            # Custom React/Preact hooks
-├── services/         # Business logic and data management
-├── types/            # TypeScript type definitions
-├── utils/            # Pure utility functions
-└── styles/           # Global styles and CSS modules
-```
-
-### **State Management**
-- **useGameState**: Centralized game data management
-- **useNavigation**: Screen and routing state
-- **useModal**: Modal state management
-- **Custom hooks**: Encapsulated, reusable state logic
-
-### **Design System**
-- Consistent design tokens and CSS custom properties
-- Reusable UI components with variant support
-- Responsive design patterns
-- Accessibility-first approach
+Detailed module docs live in `src/lib/docs/architecture.md` and the individual `README.md` files under each package.
 
 ## 🚀 Getting Started
 
@@ -77,28 +50,68 @@ npm run dev
 npm run dev      # Start development server
 npm run build    # Build for production
 npm run preview  # Preview production build
+npm run test:record  # Record browser interactions with Playwright
+npm run test:e2e    # Run all recorded browser automation scripts
 ```
 
+### Building with Docker
+```bash
+# Build for production using Docker
+docker run -it -v $(pwd):/app -w /app --rm node:latest npx astro build
+```
+
+## 🧪 Testing
+
+The project uses **Playwright** for browser automation and recording. This allows you to record interactions once and replay them anytime, making it easy to test repetitive workflows.
+
+### Quick Start
+
+**Recording interactions:**
+```bash
+# Terminal 1: Start dev server
+npm run dev
+
+# Terminal 2: Start recording
+npm run test:record
+```
+
+**Running recordings:**
+```bash
+npm run test:e2e
+```
+
+### Features
+
+- **Record interactions**: Use Playwright codegen to capture clicks, form fills, and navigation
+- **Replay scripts**: Run recorded scripts automatically
+- **Duplicate & modify**: Copy any script and modify it (e.g., change the last step from clicking 'z' to clicking 'a')
+- **Full scripting power**: Edit generated TypeScript files directly for custom automation
+
+### Documentation
+
+For detailed instructions on recording, modifying, and running scripts, see:
+- **[tests/recordings/README.md](tests/recordings/README.md)** - Complete workflow documentation
+
 ## 📁 Project Structure
 
 ### **Core Components**
-- `App.tsx` - Main application component with orchestrated state management
-- `screens/` - Screen-level components (GameList, NewGame, GameDetail)
-- `ui/` - Reusable UI components following design system
+- `src/components/App.tsx` - Astro-bound shell orchestrating library modules
+- `src/components/screens/` - Screen containers consuming `@lib/features`
+- `src/lib/` - Reusable application spine (domain/data/state/ui/features)
 
 ### **State Management**
-- `hooks/useGameState.ts` - Game CRUD operations and persistence
-- `hooks/useNavigation.ts` - Application routing and screen state
-- `hooks/useModal.ts` - Modal state management
+- `@lib/state/useGameState` - Game CRUD operations and persistence
+- `@lib/state/useNavigation` - Application routing and screen state
+- `@lib/state/useModal` - Modal state management helpers
 
 ### **Business Logic**
-- `services/gameService.ts` - Game creation, updates, and business rules
-- `utils/gameUtils.ts` - Game-related utility functions
-- `utils/validation.ts` - Input validation and sanitization
+- `@lib/data/gameService` - Game creation, updates, and persistence orchestration
+- `@lib/domain/gameUtils` - Game-related utility functions
+- `@lib/domain/validation` - Input validation and sanitisation
 
 ### **Type Definitions**
-- `types/game.ts` - Game domain types
-- `types/ui.ts` - UI component types
+- `@lib/domain/types` - Game domain types
+- `@lib/ui/types` - UI component types
 - `types/css-modules.d.ts` - CSS modules type support
 
 ## 🎯 Key Improvements
@@ -199,8 +212,7 @@ The application includes PWA features:
 
 ## 📈 Future Improvements
 
-- Unit and integration testing with Vitest
-- E2E testing with Playwright
+- Unit and integration testing (if needed)
 - Internationalization (i18n) support
 - Advanced game statistics and analytics
 - Real-time multiplayer support

astro.config.mjs

@@ -1,5 +1,9 @@
 // @ts-check
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'astro/config';
+
+const srcDir = fileURLToPath(new URL('./src', import.meta.url));
+const libDir = fileURLToPath(new URL('./src/lib', import.meta.url));
 import preact from '@astrojs/preact';
 
 // https://astro.build/config
@@ -17,6 +21,12 @@ export default defineConfig({
   
   // Vite configuration for development
   vite: {
+    resolve: {
+      alias: {
+        '@': srcDir,
+        '@lib': libDir,
+      },
+    },
     define: {
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
     },

package.json

@@ -6,14 +6,19 @@
     "dev": "astro dev --host",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "test:record": "playwright codegen http://localhost:3000",
+    "test:e2e": "playwright test",
+    "test:replay": "playwright test"
   },
   "dependencies": {
-    "@astrojs/preact": "^4.1.0",
-    "astro": "^5.9.0",
+    "@astrojs/preact": "^4.1.3",
+    "astro": "^5.15.5",
     "preact": "^10.26.8"
   },
   "devDependencies": {
-    "@types/node": "^24.0.3"
+    "@playwright/test": "^1.56.1",
+    "@types/node": "^24.0.3",
+    "playwright": "^1.56.1"
   }
 }

playwright.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright configuration for BSC Score browser automation
+ * Configured to work with local dev server on port 3000
+ */
+export default defineConfig({
+  // Test directory - where your recorded scripts live
+  testDir: './tests/recordings',
+  
+  // Match all .ts files in the recordings directory (not just .test.ts or .spec.ts)
+  testMatch: '**/*.ts',
+  
+  // Maximum time one test can run for
+  timeout: 30 * 1000,
+  
+  // Test execution settings
+  fullyParallel: false, // Run tests sequentially to avoid conflicts
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1, // Run one at a time for recordings
+  
+  // Reporter configuration
+  reporter: 'html',
+  
+  // Shared settings for all tests
+  use: {
+    // Base URL for tests
+    baseURL: 'http://localhost:3000',
+    
+    // Browser context options
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    
+    // Viewport size
+    viewport: { width: 1280, height: 720 },
+  },
+
+  // Configure projects for different browsers
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    // Uncomment to add more browsers
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+
+  // Web server configuration - starts dev server automatically if needed
+  // webServer: {
+  //   command: 'npm run dev',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  //   timeout: 120 * 1000,
+  // },
+});
+

src/components/App.tsx

@@ -1,20 +1,24 @@
 import { h } from 'preact';
 import { useEffect, useCallback } from 'preact/hooks';
 
-import { useGameState } from '../hooks/useGameState';
-import { useNavigation, useNewGameWizard } from '../hooks/useNavigation';
-import { useModal, useValidationModal, useCompletionModal } from '../hooks/useModal';
+import {
+  useGameState,
+  useNavigation,
+  useNewGameWizard,
+  useModal,
+  useValidationModal,
+  useCompletionModal,
+} from '@lib/state';
+import { GameService } from '@lib/data/gameService';
+import type { StandardGame, Game, EndlosGame } from '@lib/domain/types';
 
-import { GameService } from '../services/gameService';
-import type { StandardGame, Game, EndlosGame } from '../types/game';
-
-import { Layout } from './ui/Layout';
+import { Layout } from '@lib/ui/Layout';
 import GameListScreen from './screens/GameListScreen';
 import NewGameScreen from './screens/NewGameScreen';
 import GameDetailScreen from './screens/GameDetailScreen';
-import Modal from './Modal';
-import ValidationModal from './ValidationModal';
-import GameCompletionModal from './GameCompletionModal';
+import Modal from '@lib/ui/Modal';
+import ValidationModal from '@lib/ui/ValidationModal';
+import GameCompletionModal from '@lib/features/game-lifecycle/GameCompletionModal';
 import FullscreenToggle from './FullscreenToggle';
 
 /**

src/components/BscScoreApp.astro

@@ -10,8 +10,9 @@
 
 <style>
   #app-root {
-    min-height: 100vh;
+    height: 100%;
     width: 100%;
+    overflow: hidden;
   }
   
   /* Progressive enhancement styles */

src/components/GameCompletionModal.tsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
-import modalStyles from './Modal.module.css';
+import modalStyles from '@lib/ui/Modal.module.css';
 import styles from './GameCompletionModal.module.css';
-import type { Game } from '../types/game';
+import type { Game } from '@lib/domain/types';
 
 interface GameCompletionModalProps {
   open: boolean;

src/components/GameDetail.tsx

@@ -1,8 +1,7 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import styles from './GameDetail.module.css';
-import Toast from './Toast';
-import type { Game, EndlosGame } from '../types/game';
+import type { Game, EndlosGame } from '@lib/domain/types';
 
 interface GameDetailProps {
   game: Game | undefined;
@@ -18,23 +17,11 @@ interface GameDetailProps {
  * Game detail view for a single game.
  */
 const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, onForfeit, onBack }: GameDetailProps) => {
-  const [toast, setToast] = useState<{ show: boolean; message: string; type: 'success' | 'error' | 'info' }>({ 
-    show: false, 
-    message: '', 
-    type: 'info' 
-  });
-
   if (!game) return null;
 
-  const showToast = (message: string, type: 'success' | 'error' | 'info' = 'info') => {
-    setToast({ show: true, message, type });
-  };
-
   const handleScoreUpdate = (playerIndex: number, change: number) => {
     onUpdateScore(playerIndex, change);
-    const playerName = [game.player1, game.player2, game.player3][playerIndex - 1];
-    const action = change > 0 ? 'Punkt hinzugefügt' : 'Punkt abgezogen';
-    showToast(`${action} für ${playerName}`, 'success');
+    // Silent update; toast notifications removed
   };
 
 
@@ -58,7 +45,17 @@ const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, o
               className={styles['player-score'] + (name === 'Fränky' ? ' ' + styles['franky'] : '')}
               key={name + idx}
             >
-              <span className={styles['player-name']}>{name}</span>
+              <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']} 
@@ -81,22 +78,7 @@ const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, o
               >
                 {scores[idx]}
               </span>
-              <div className={styles['score-buttons']}>
-                <button
-                  className={styles['score-button']}
-                  disabled={isCompleted}
-                  onClick={() => handleScoreUpdate(idx+1, -1)}
-                  aria-label={`Punkt abziehen für ${name}`}
-                  title={`Punkt abziehen für ${name}`}
-                >-</button>
-                <button
-                  className={styles['score-button']}
-                  disabled={isCompleted}
-                  onClick={() => handleScoreUpdate(idx+1, 1)}
-                  aria-label={`Punkt hinzufügen für ${name}`}
-                  title={`Punkt hinzufügen für ${name}`}
-                >+</button>
-              </div>
+              {/* +/- buttons removed per issue #29. Tap score to +1; use Undo to revert. */}
             </div>
           );
         })}
@@ -108,7 +90,6 @@ const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, o
             className="btn btn--secondary" 
             onClick={() => {
               onUndo();
-              showToast('Letzte Aktion rückgängig gemacht', 'info');
             }}
             aria-label="Rückgängig"
           >
@@ -117,12 +98,6 @@ const GameDetail = ({ game, onFinishGame, onUpdateScore, onUpdateGame, onUndo, o
         )}
         <button className="btn" disabled={isCompleted} onClick={onFinishGame} aria-label={isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}>{isCompleted ? 'Abgeschlossen' : 'Spiel beenden'}</button>
       </div>
-      <Toast 
-        show={toast.show} 
-        message={toast.message} 
-        type={toast.type} 
-        onClose={() => setToast({ show: false, message: '', type: 'info' })} 
-      />
     </div>
   );
 };

src/components/GameHistory.module.css

@@ -1,24 +0,0 @@
-/* GameHistory-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-content {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    padding: 20px;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-}
-.screen-title {
-    font-size: 24px;
-    margin-bottom: 20px;
-} 

src/components/GameList.tsx

@@ -1,8 +1,8 @@
 import { h } from 'preact';
-import { Card } from './ui/Card';
-import { Button } from './ui/Button';
+import { Card } from '@lib/ui/Card';
+import { Button } from '@lib/ui/Button';
 import styles from './GameList.module.css';
-import type { Game, GameFilter, StandardGame } from '../types/game';
+import type { Game, GameFilter, StandardGame } from '@lib/domain/types';
 
 interface GameListProps {
   games: Game[];
@@ -56,7 +56,7 @@ export default function GameList({
   ];
 
   return (
-    <div className={styles['game-list'] + ' ' + styles['games-container']}>
+    <div className={styles['game-list']}>
       <div className={styles['filter-buttons']}>
         {filterButtons.map(({ key, label, ariaLabel }) => (
           <Button
@@ -71,6 +71,7 @@ export default function GameList({
         ))}
       </div>
       
+      <div className={styles['games-container']}>
         {filteredGames.length === 0 ? (
           <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
         ) : (
@@ -82,7 +83,9 @@ export default function GameList({
             <Card
               key={game.id}
               variant="elevated"
-              className={game.status === 'completed' ? styles['completed'] : styles['active']}
+              className={
+                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
+              }
             >
               <div 
                 className={styles['game-info']} 
@@ -121,5 +124,6 @@ export default function GameList({
         })
         )}
       </div>
+    </div>
   );
 }

src/components/NewGame.tsx

@@ -2,6 +2,7 @@ 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, 
@@ -14,30 +15,16 @@ import {
   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';
 
-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>
-);
+// PlayerSelectModal moved to ./new-game/PlayerSelectModal
 
 interface PlayerStepProps {
   playerNameHistory: string[];
@@ -46,523 +33,11 @@ interface PlayerStepProps {
   initialValue?: string;
 }
 
-/**
- * Player 1 input step for multi-step game creation wizard.
- */
-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);
+// Player1Step moved to ./new-game/Player1Step
 
-  useEffect(() => {
-    if (!player1) {
-      setFilteredNames(playerNameHistory);
-    } else {
-      setFilteredNames(
-        playerNameHistory.filter(name =>
-          name.toLowerCase().includes(player1.toLowerCase())
-        )
-      );
-    }
-  }, [player1, playerNameHistory]);
+// Player2Step moved to ./new-game/Player2Step
 
-  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['screen-title']}>Neues Spiel – Schritt {WIZARD_STEPS.PLAYER1}/{UI_CONSTANTS.TOTAL_WIZARD_STEPS}</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']} />
-      </div>
-      <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);
-              
-              // Real-time validation feedback
-              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}
-            >
-              {/* Unicode heavy multiplication X */}
-              ×
-            </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>
-      )}
-      {isModalOpen && (
-        <PlayerSelectModal
-          players={playerNameHistory}
-          onSelect={handleModalSelect}
-          onClose={() => setIsModalOpen(false)}
-        />
-      )}
-      <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' }}
-        >
-          {/* Unicode left arrow */}
-          &#8592;
-        </button>
-        <button
-          type="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          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' }}
-        >
-          {/* Unicode right arrow */}
-          &#8594;
-        </button>
-      </div>
-    </form>
-  );
-};
-
-/**
- * Player 2 input step for multi-step game creation wizard.
- */
-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['screen-title']}>Neues Spiel – Schritt 2/5</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']} />
-      </div>
-      <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 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"
-          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>
-  );
-};
-
-/**
- * Player 3 input step for multi-step game creation wizard.
- */
-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();
-    // Player 3 is optional, so always allow submission
-    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['screen-title']}>Neues Spiel – Schritt 3/5</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']} />
-      </div>
-      <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 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>
-        <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"
-            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>
-  );
-};
+// Player3Step moved to ./new-game/Player3Step
 
 interface GameTypeStepProps {
   onNext: (type: string) => void;
@@ -570,82 +45,6 @@ interface GameTypeStepProps {
   initialValue?: string;
 }
 
-/**
- * Game Type selection step for multi-step game creation wizard.
- */
-const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps) => {
-  const [gameType, setGameType] = useState(initialValue);
-  const gameTypes = ['8-Ball', '9-Ball', '10-Ball'];
-
-  const handleSelect = (selectedType: string) => {
-    setGameType(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['screen-title']}>Neues Spiel – Schritt 4/5</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']} />
-      </div>
-      <div className={styles['game-type-selection']}>
-        {gameTypes.map(type => (
-          <button
-            key={type}
-            type="button"
-            className={`${styles['game-type-btn']} ${gameType === type ? styles.selected : ''}`}
-            onClick={() => handleSelect(type)}
-          >
-            {type}
-          </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' }}
-        >
-          {/* Unicode left arrow */}
-          &#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,
-          }}
-        >
-          {/* Unicode right arrow */}
-          &#8594;
-        </button>
-      </div>
-    </form>
-  );
-};
 
 interface RaceToStepProps {
   onNext: (raceTo: string | number) => void;
@@ -654,104 +53,25 @@ interface RaceToStepProps {
   gameType?: string;
 }
 
-/**
- * Race To selection step for multi-step game creation wizard.
- */
-const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToStepProps) => {
-  const quickPicks = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-  const defaultValue = 5;
-  const [raceTo, setRaceTo] = useState<string | number>(initialValue !== '' ? initialValue : defaultValue);
+// GameTypeStep and RaceToStep moved to ./new-game
 
-  useEffect(() => {
-    if ((initialValue === '' || initialValue === undefined) && raceTo !== defaultValue) {
-      setRaceTo(defaultValue);
-    }
-    if (initialValue !== '' && initialValue !== undefined && initialValue !== raceTo) {
-      setRaceTo(initialValue);
-    }
-  }, [gameType, initialValue, defaultValue]);
+interface BreakRuleStepProps {
+  onNext: (rule: BreakRule) => void;
+  onCancel: () => void;
+  initialValue?: BreakRule | 'winnerbreak';
+}
 
-  const handleQuickPick = (value: number) => {
-    // For endlos (endless) games, use Infinity to prevent automatic completion
-    setRaceTo(value === 0 ? 'Infinity' : value);
-  };
+// BreakRuleStep moved to ./new-game/BreakRuleStep
 
-  const handleInputChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    setRaceTo(target.value);
-  };
+interface BreakOrderStepProps {
+  players: string[];
+  rule: BreakRule;
+  onNext: (first: number, second?: number) => void;
+  onCancel: () => void;
+  initialFirst?: number;
+  initialSecond?: number;
+}
 
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-    // Handle Infinity for endlos games, otherwise parse as integer
-    const raceToValue = raceTo === 'Infinity' ? Infinity : (parseInt(String(raceTo), 10) || 0);
-    onNext(raceToValue);
-  };
+// BreakOrderStep moved to ./new-game/BreakOrderStep
 
-  return (
-    <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Race To auswählen">
-      <div className={styles['screen-title']}>Neues Spiel – Schritt 5/5</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']} />
-      </div>
-      <div className={styles['endlos-container']}>
-        <button
-          type="button"
-          className={`${styles['race-to-btn']} ${styles['endlos-btn']} ${raceTo === 'Infinity' ? styles.selected : ''}`}
-          onClick={() => handleQuickPick(0)}
-        >
-          Endlos
-        </button>
-      </div>
-      <div className={styles['race-to-selection']}>
-        {quickPicks.map(value => (
-          <button
-            key={value}
-            type="button"
-            className={`${styles['race-to-btn']} ${parseInt(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' }}
-        >
-          {/* Unicode left arrow */}
-          &#8592;
-        </button>
-        <button
-          type="submit"
-          className={styles['arrow-btn']}
-          aria-label="Fertigstellen"
-          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' }}
-        >
-          {/* Unicode checkmark */}
-          &#10003;
-        </button>
-      </div>
-    </form>
-  );
-};
-
-export { Player1Step, Player2Step, Player3Step, GameTypeStep, RaceToStep }; 
+export { Player1Step, Player2Step, Player3Step, GameTypeStep, BreakRuleStep, BreakOrderStep, RaceToStep };

src/components/PlayerInputStep.tsx

@@ -1 +0,0 @@
-import { h } from "preact";

src/components/Toast.module.css

@@ -1,134 +0,0 @@
-.toast {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 10000;
-  min-width: 300px;
-  max-width: 400px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
-  transform: translateX(100%);
-  opacity: 0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-}
-
-.toast.show {
-  transform: translateX(0);
-  opacity: 1;
-}
-
-.toast.hide {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
-.toastContent {
-  display: flex;
-  align-items: center;
-  padding: 16px 20px;
-  gap: 12px;
-}
-
-.toastIcon {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.toastMessage {
-  flex: 1;
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  line-height: 1.4;
-}
-
-.toastClose {
-  background: none;
-  border: none;
-  font-size: 18px;
-  color: #666;
-  cursor: pointer;
-  padding: 0;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.toastClose:hover {
-  background: #f0f0f0;
-  color: #333;
-}
-
-/* Toast types */
-.toast.success {
-  border-left: 4px solid #4caf50;
-}
-
-.toast.success .toastIcon {
-  background: #4caf50;
-  color: #fff;
-}
-
-.toast.error {
-  border-left: 4px solid #f44336;
-}
-
-.toast.error .toastIcon {
-  background: #f44336;
-  color: #fff;
-}
-
-.toast.info {
-  border-left: 4px solid #2196f3;
-}
-
-.toast.info .toastIcon {
-  background: #2196f3;
-  color: #fff;
-}
-
-/* Animation keyframes */
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-.toast.show {
-  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.toast.hide {
-  animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-

src/components/Toast.tsx

@@ -1,59 +0,0 @@
-import { h } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
-import styles from './Toast.module.css';
-
-type ToastType = 'success' | 'error' | 'info';
-
-interface ToastProps {
-  show: boolean;
-  message: string;
-  type?: ToastType;
-  onClose: () => void;
-  duration?: number;
-}
-
-/**
- * Toast notification component for user feedback
- */
-const Toast = ({ show, message, type = 'info', onClose, duration = 3000 }: ToastProps) => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    if (show) {
-      setIsVisible(true);
-      const timer = setTimeout(() => {
-        setIsVisible(false);
-        setTimeout(onClose, 300); // Wait for animation to complete
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [show, duration, onClose]);
-
-  if (!show && !isVisible) return null;
-
-  return (
-    <div className={`${styles.toast} ${styles[type]} ${isVisible ? styles.show : styles.hide}`}>
-      <div className={styles.toastContent}>
-        <div className={styles.toastIcon}>
-          {type === 'success' && '✓'}
-          {type === 'error' && '✕'}
-          {type === 'info' && 'ℹ'}
-        </div>
-        <span className={styles.toastMessage}>{message}</span>
-        <button 
-          className={styles.toastClose} 
-          onClick={() => {
-            setIsVisible(false);
-            setTimeout(onClose, 300);
-          }}
-          aria-label="Schließen"
-        >
-          ×
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Toast;
-

src/components/new-game/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>
+  );
+};
+
+

src/components/new-game/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>
+  );
+};
+
+

src/components/screens/GameDetailScreen.tsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
-import { Screen } from '../ui/Layout';
-import GameDetail from '../GameDetail';
-import type { Game, EndlosGame } from '../../types/game';
+import { Screen } from '@lib/ui/Layout';
+import GameDetail from '@lib/features/game-detail/GameDetail';
+import type { Game, EndlosGame } from '@lib/domain/types';
 
 interface GameDetailScreenProps {
   game?: Game;

src/components/screens/GameListScreen.tsx

@@ -1,8 +1,8 @@
 import { h } from 'preact';
-import { Button } from '../ui/Button';
-import { Screen } from '../ui/Layout';
-import GameList from '../GameList';
-import type { Game, GameFilter } from '../../types/game';
+import { Button } from '@lib/ui/Button';
+import { Screen } from '@lib/ui/Layout';
+import GameList from '@lib/features/game-list/GameList';
+import type { Game, GameFilter } from '@lib/domain/types';
 
 interface GameListScreenProps {
   games: Game[];
@@ -23,6 +23,7 @@ export default function GameListScreen({
 }: GameListScreenProps) {
   return (
     <Screen>
+      <div style={{ flexShrink: 0 }}>
         <Button
           variant="primary"
           size="large"
@@ -32,6 +33,7 @@ export default function GameListScreen({
         >
           + Neues Spiel
         </Button>
+      </div>
       
       <GameList
         games={games}

src/components/screens/NewGameScreen.tsx

@@ -1,7 +1,16 @@
 import { h } from 'preact';
-import { Screen } from '../ui/Layout';
-import { Player1Step, Player2Step, Player3Step, GameTypeStep, RaceToStep } from '../NewGame';
-import type { NewGameStep, NewGameData } from '../../types/game';
+import { Screen } from '@lib/ui/Layout';
+import {
+  Player1Step,
+  Player2Step,
+  Player3Step,
+  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';
 
 interface NewGameScreenProps {
   step: NewGameStep;
@@ -40,16 +49,40 @@ export default function NewGameScreen({
   };
 
   const handleGameTypeNext = (type: string) => {
+    const selectedType = type as GameType;
+    const match = GAME_TYPES.find((item) => item.value === selectedType);
+    const defaultRace = match ? String(match.defaultRaceTo) : String(RACE_TO_DEFAULT);
+
     onDataChange({
-      gameType: type as any, // Type assertion for now, could be improved with proper validation
-      raceTo: '8'
+      gameType: selectedType,
+      raceTo: defaultRace,
     });
     onStepChange('raceTo');
   };
 
-  const handleRaceToNext = (raceTo: string) => {
-    const finalData = { ...data, raceTo };
-    onCreateGame(finalData);
+  const handleBreakRuleNext = (rule: 'winnerbreak' | 'wechselbreak') => {
+    onDataChange({ breakRule: rule });
+    try { localStorage.setItem('lastBreakRule', rule); } catch {}
+    onStepChange('breakOrder');
+  };
+
+  const handleBreakOrderNext = (first: number, second?: number) => {
+    const finalData = { ...data, breakFirst: first, breakSecond: second ?? '' } as any;
+    onDataChange({ breakFirst: first, breakSecond: second ?? '' });
+    try {
+      localStorage.setItem('lastBreakFirst', String(first));
+      if (second) localStorage.setItem('lastBreakSecond', String(second));
+    } catch {}
+    onCreateGame(finalData as any);
+  };
+
+  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');
   };
 
   const handleStepBack = () => {
@@ -66,6 +99,12 @@ export default function NewGameScreen({
       case 'raceTo':
         onStepChange('gameType');
         break;
+      case 'breakRule':
+        onStepChange('raceTo');
+        break;
+      case 'breakOrder':
+        onStepChange('breakRule');
+        break;
       default:
         onCancel();
     }
@@ -108,6 +147,8 @@ export default function NewGameScreen({
         />
       )}
 
+      
+      
       {step === 'raceTo' && (
         <RaceToStep
           onNext={handleRaceToNext}
@@ -116,6 +157,25 @@ export default function NewGameScreen({
           gameType={data.gameType}
         />
       )}
+
+      {step === 'breakRule' && (
+        <BreakRuleStep
+          onNext={handleBreakRuleNext}
+          onCancel={handleStepBack}
+          initialValue={(data.breakRule as any) || (typeof window !== 'undefined' ? (localStorage.getItem('lastBreakRule') as any) : 'winnerbreak') || 'winnerbreak'}
+        />
+      )}
+
+      {step === 'breakOrder' && (
+        <BreakOrderStep
+          players={[data.player1, data.player2, data.player3]}
+          rule={(data.breakRule as any) || 'winnerbreak'}
+          onNext={handleBreakOrderNext}
+          onCancel={handleStepBack}
+          initialFirst={(typeof window !== 'undefined' && localStorage.getItem('lastBreakFirst')) ? parseInt(localStorage.getItem('lastBreakFirst')!, 10) : 1}
+          initialSecond={(typeof window !== 'undefined' && localStorage.getItem('lastBreakSecond')) ? parseInt(localStorage.getItem('lastBreakSecond')!, 10) : undefined}
+        />
+      )}
     </Screen>
   );
 }

src/components/ui/Button.tsx

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import type { ButtonProps } from '../../types/ui';
+import type { ButtonProps } from '@lib/ui/types';
 import styles from './Button.module.css';
 
 export function Button({ 

src/hooks/useGameState.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'preact/hooks';
-import type { Game, NewGameData, GameFilter } from '../types/game';
-import { GameService } from '../services/gameService';
+import type { Game, NewGameData, GameFilter } from '@lib/domain/types';
+import { GameService } from '@lib/data/gameService';
 
 export function useGameState() {
   const [games, setGames] = useState<Game[]>([]);

src/hooks/useModal.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'preact/hooks';
-import type { ModalState, ValidationState, CompletionModalState } from '../types/ui';
-import type { Game } from '../types/game';
+import type { ModalState, ValidationState, CompletionModalState } from '@lib/ui/types';
+import type { Game } from '@lib/domain/types';
 
 export function useModal() {
   const [modal, setModal] = useState<ModalState>({ open: false, gameId: null });

src/hooks/useNavigation.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'preact/hooks';
-import type { NewGameStep, NewGameData } from '../types/game';
+import type { NewGameStep, NewGameData } from '@lib/domain/types';
 
 type Screen = 'game-list' | 'new-game' | 'game-detail';
 

src/lib/data/README.md

@@ -0,0 +1,33 @@
+# Data Layer (`@lib/data`)
+
+Responsible for persistence and data access abstractions. All I/O lives here.
+
+## Modules
+
+- `gameService.ts`
+  - High-level repository for CRUD operations on games.
+  - Bridges domain rules with `IndexedDBService`.
+  - Provides helpers: `loadGames`, `saveGame`, `createGame`, `updateGameScore`, `isGameCompleted`, `getGameWinner`, etc.
+- `indexedDBService.ts`
+  - Low-level IndexedDB wrapper with schema management and convenience indices.
+  - Exposes granular operations (`loadGame`, `deleteGame`, `getGamesByFilter`, `updatePlayerStats`, …).
+- `testing/testIndexedDB.ts`
+  - Browser-side harness to validate IndexedDB flows manually.
+
+## Guidance
+
+- Prefer calling `GameService` from UI/state hooks.  
+  It encapsulates migration logic (localStorage fallback) and player stats updates.
+- Keep new persistence concerns behind small classes or factory functions under `@lib/data`.
+- When a data function starts bleeding UI concerns, move that logic upward into `@lib/state`.
+
+## Example
+
+```ts
+import { GameService } from '@lib/data';
+
+const games = await GameService.loadGames();
+await GameService.saveGame(updatedGame);
+```
+
+

src/lib/data/gameService.ts

@@ -1,4 +1,11 @@
-import type { Game, GameType, StandardGame, EndlosGame, NewGameData } from '../types/game';
+import type {
+  Game,
+  GameType,
+  StandardGame,
+  EndlosGame,
+  NewGameData,
+  BreakRule,
+} from '@lib/domain/types';
 import { IndexedDBService } from './indexedDBService';
 
 const LOCAL_STORAGE_KEY = 'bscscore_games';
@@ -141,10 +148,16 @@ export class GameService {
       throw new Error('Game type is required');
     }
     
-    const raceTo = parseInt(gameData.raceTo, 10);
+    // Handle "endlos" (Infinity) case - raceTo is stored as string but can be "Infinity"
+    let raceTo: number;
+    if (gameData.raceTo === 'Infinity' || gameData.raceTo === 'endlos' || String(gameData.raceTo).toLowerCase() === 'infinity') {
+      raceTo = Infinity;
+    } else {
+      raceTo = parseInt(gameData.raceTo, 10);
       if (isNaN(raceTo) || raceTo <= 0) {
         throw new Error('Invalid race to value');
       }
+    }
 
     const baseGame = {
       id: Date.now(),
@@ -163,6 +176,25 @@ export class GameService {
       player2: gameData.player2,
       score1: 0,
       score2: 0,
+      breakRule: (gameData.breakRule as BreakRule) || 'winnerbreak',
+      breakOrder: (() => {
+        // Determine break order from inputs, fallback defaults
+        const players: number[] = [1, 2];
+        if (gameData.player3?.trim()) players.push(3);
+        const first = (typeof gameData.breakFirst === 'number' ? gameData.breakFirst : 1) as number;
+        const second = (typeof gameData.breakSecond === 'number' ? gameData.breakSecond : (players.includes(2) && first !== 2 ? 2 : (players.includes(3) ? 3 : 2))) as number;
+        const order = [first];
+        if (players.length === 2) {
+          order.push(first === 1 ? 2 : 1);
+        } else {
+          // 3 players: add chosen second, then the remaining third
+          order.push(second);
+          const third = [1,2,3].find(p => p !== first && p !== second)!;
+          order.push(third);
+        }
+        return order;
+      })(),
+      currentBreakerIdx: 0,
     };
 
     if (gameData.player3) {
@@ -185,6 +217,23 @@ export class GameService {
       updated.score3 = Math.max(0, updated.score3 + change);
     }
     
+    // Breaker logic
+    if (change > 0) {
+      if ((updated.breakRule || 'winnerbreak') === 'winnerbreak') {
+        // Winner keeps break: set breaker to this player
+        const order = updated.breakOrder || [1,2].concat(updated.score3 !== undefined ? [3] : []);
+        updated.breakOrder = order;
+        const idx = order.findIndex(p => p === player);
+        updated.currentBreakerIdx = idx >= 0 ? idx : 0;
+      } else {
+        // Wechselbreak: rotate to next
+        const order = updated.breakOrder || [1,2].concat(updated.score3 !== undefined ? [3] : []);
+        updated.breakOrder = order;
+        const curr = typeof updated.currentBreakerIdx === 'number' ? updated.currentBreakerIdx : 0;
+        updated.currentBreakerIdx = (curr + 1) % order.length;
+      }
+    }
+
     updated.updatedAt = new Date().toISOString();
     return updated;
   }

src/lib/data/index.ts

@@ -0,0 +1,3 @@
+export * from './gameService';
+export * from './indexedDBService';
+

src/lib/data/indexedDBService.ts

@@ -1,4 +1,4 @@
-import type { Game, GameType, StandardGame, EndlosGame, NewGameData } from '../types/game';
+import type { Game } from '@lib/domain/types';
 
 const DB_NAME = 'BSCScoreDB';
 const DB_VERSION = 1;

src/lib/data/testing/testIndexedDB.ts

@@ -1,6 +1,6 @@
-import { IndexedDBService } from '../services/indexedDBService';
-import { GameService } from '../services/gameService';
-import type { NewGameData } from '../types/game';
+import { IndexedDBService } from '@lib/data/indexedDBService';
+import { GameService } from '@lib/data/gameService';
+import type { NewGameData } from '@lib/domain/types';
 
 /**
  * Test utility for IndexedDB functionality

src/lib/docs/architecture.md

@@ -0,0 +1,64 @@
+# BSC Score Modular Architecture
+
+This document captures the reusable module layout introduced in the refactor.  
+Everything under `src/lib` is now consumable from other React/Preact hosts without depending on the Astro shell that ships in this repository.
+
+## Module Overview
+
+- `@lib/domain` – **Pure domain logic** (types, constants, validation helpers, formatters).  
+  No framework dependencies, no browser APIs. Safe to re-use from Node or tests.
+- `@lib/data` – **Persistence services** (IndexedDB access, repository abstractions, test harness).  
+  Wraps browser APIs and isolates side-effects away from UI/state.
+- `@lib/state` – **Composable hooks** that orchestrate domain + data layers.  
+  Exported hooks expose serialisable state and imperative actions.
+- `@lib/ui` – **Stateless presentational primitives** (buttons, cards, layout shell, generic modals).  
+  Ship with co-located CSS modules and type-safe props.
+- `@lib/features/*` – **Feature bundles** that compose UI + state to deliver end-user flows.  
+  Current bundles:
+  - `game-list` (list + filter experience)
+  - `game-detail` (scoreboard with break tracking)
+  - `game-lifecycle` (completion modal + rematch workflow)
+  - `new-game` (wizard steps and player pickers)
+
+## Import Surfaces
+
+All entry points are re-exported via `@lib/index.ts`, so consumers can either:
+
+```ts
+import { GameService, useGameState, GameList } from '@lib';
+```
+
+or pick a scoped module:
+
+```ts
+import { GameService } from '@lib/data';
+import { GameList } from '@lib/features/game-list';
+```
+
+## Cross-Cutting Rules
+
+- **Domain first**: New feature logic should be expressed with domain types and helpers before touching hooks/UI.
+- **One-way dependencies**:
+  ```
+  domain → data → state → features → app shell
+  ```
+  Lower layers must not import from higher ones.
+- **CSS modules stay co-located** with the component they style. Consumers receive the compiled class names via the exported component props.
+- **Documentation lives next to code**: every module has a `README.md` describing intent, public API, and integration notes.
+
+## Migration Notes
+
+- Legacy `src/components` now only hosts the Astro shell (`App.tsx`, `BscScoreApp.astro`, etc.).  
+  All reusable React pieces were migrated under `src/lib`.
+- Path aliases:
+  - `@/*` → `src/*`
+  - `@lib/*` → `src/lib/*`
+  Update your editor/tsconfig if you embed these modules elsewhere.
+- Tests should import from `@lib` to avoid depending on Astro-specific wiring.
+
+## Next Steps
+
+- Promote more feature-level Storybook / Playwright fixtures into `src/lib/docs`.
+- When adding new modules, extend `src/lib/index.ts` and document usage in the corresponding folder.
+
+

src/lib/domain/README.md

@@ -0,0 +1,27 @@
+# Domain Layer (`@lib/domain`)
+
+Pure domain model primitives for BSC Score. Everything here is framework-agnostic and free of side effects.
+
+## Exports
+
+- `types.ts` – canonical TypeScript shapes (`Game`, `StandardGame`, `EndlosGame`, `NewGameData`, etc.).
+- `constants.ts` – configuration, validation copy, UI sizing tokens.
+- `validation.ts` – safe helpers for validating/sanitising player & game inputs.
+- `gameUtils.ts` – derived state utilities (duration, winner detection, type guards).
+
+## Usage Guidelines
+
+- Treat the domain layer as the single source of truth for typings across the app (UI, services, tests).
+- Keep functions pure and deterministic; no DOM, storage, or logging side effects beyond debug `console` statements.
+- When extending the data model, update the corresponding domain `README.md` section and propagate new types through `@lib/domain/index.ts`.
+
+## Example
+
+```ts
+import { Game, validateGameData, GAME_TYPES } from '@lib/domain';
+
+const result = validateGameData(dataFromForm); // -> { isValid, errors }
+const isEndlos = GAME_TYPES.some((type) => type.value === '8-Ball');
+```
+
+

src/lib/domain/constants.ts

@@ -1,4 +1,4 @@
-import type { GameType } from '../types/game';
+import type { GameType } from './types';
 
 export const GAME_TYPES: Array<{ value: GameType; label: string; defaultRaceTo: number }> = [
   { value: '8-Ball', label: '8-Ball', defaultRaceTo: 5 },

src/lib/domain/gameUtils.ts

@@ -1,4 +1,4 @@
-import type { Game, StandardGame, EndlosGame } from '../types/game';
+import type { Game, StandardGame, EndlosGame } from './types';
 
 /**
  * Game utility functions for common operations

src/lib/domain/index.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './constants';
+export * from './validation';
+export * from './gameUtils';
+

src/lib/domain/types.ts

@@ -33,6 +33,8 @@ export interface BaseGame {
   lastModified?: number;
 }
 
+export type BreakRule = 'winnerbreak' | 'wechselbreak';
+
 export interface StandardGame extends BaseGame {
   player1: string;
   player2: string;
@@ -40,6 +42,10 @@ export interface StandardGame extends BaseGame {
   score1: number;
   score2: number;
   score3?: number;
+  // Break management
+  breakRule?: BreakRule; // default winnerbreak for backfill
+  breakOrder?: number[]; // 1-based player indices, e.g. [1,2] or [1,2,3]
+  currentBreakerIdx?: number; // index into breakOrder
 }
 
 export interface EndlosGame extends BaseGame {
@@ -58,8 +64,11 @@ export interface NewGameData {
   player3: string;
   gameType: GameType | '';
   raceTo: string;
+  breakRule?: BreakRule | '';
+  breakFirst?: number | '';
+  breakSecond?: number | '';
 }
 
-export type NewGameStep = 'player1' | 'player2' | 'player3' | 'gameType' | 'raceTo' | null;
+export type NewGameStep = 'player1' | 'player2' | 'player3' | 'gameType' | 'breakRule' | 'breakOrder' | 'raceTo' | null;
 
 export type GameFilter = 'all' | 'active' | 'completed';

src/lib/domain/validation.ts

@@ -1,5 +1,5 @@
 import { APP_CONFIG, VALIDATION_MESSAGES } from './constants';
-import type { NewGameData } from '../types/game';
+import type { NewGameData } from './types';
 
 export interface ValidationResult {
   isValid: boolean;

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.
+
+

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

@@ -19,14 +19,27 @@
 .screen-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    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;
@@ -34,12 +47,14 @@
     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;
@@ -120,7 +135,7 @@
     color: #222;
 }
 .score {
-    font-size: 20vh;
+    font-size: 40vh;
     font-weight: 900;
     margin: 20px 0 30px 0;
     line-height: 1;
@@ -202,8 +217,10 @@
     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;

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; 

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}
+/>;
+```
+
+

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

@@ -0,0 +1,2 @@
+export { default as GameDetail } from './GameDetail';
+

src/lib/features/game-lifecycle/GameCompletionModal.module.css

@@ -26,7 +26,7 @@
 .winner-announcement {
     text-align: center;
     margin: 20px 0 0 0;
-    padding: 24px 16px;
+    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;
@@ -35,13 +35,13 @@
     box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
     animation: celebrationPulse 2s ease-in-out infinite;
     position: relative;
-    overflow: hidden;
+    overflow: visible; /* avoid clipping decorative icons */
 }
 
 .winner-announcement::before {
     content: '🎉';
     position: absolute;
-    top: -10px;
+    top: 6px;
     left: 20px;
     font-size: 24px;
     animation: bounce 1s ease-in-out infinite;
@@ -50,7 +50,7 @@
 .winner-announcement::after {
     content: '🏆';
     position: absolute;
-    top: -10px;
+    top: 6px;
     right: 20px;
     font-size: 24px;
     animation: bounce 1s ease-in-out infinite 0.5s;

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; 

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}
+/>;
+```
+
+

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

@@ -0,0 +1,2 @@
+export { default as GameCompletionModal } from './GameCompletionModal';
+

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

@@ -23,8 +23,9 @@
 
 .game-list {
     width: 100%;
-    flex: 1;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
 
 /* Filter buttons with improved symmetry */
@@ -36,6 +37,7 @@
     border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
+    flex-shrink: 0;
 }
 
 .filter-button {
@@ -71,12 +73,17 @@
     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: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     align-items: center;
     gap: var(--space-md);
     padding: var(--space-lg);

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>
+  );
+}

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}
+/>;
+```
+
+

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

@@ -0,0 +1,2 @@
+export { default as GameList } from './GameList';
+

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

@@ -13,16 +13,18 @@
 .screen-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    height: 100%;
     padding: var(--space-lg);
     overflow-y: auto;
+    overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
+    min-height: 0;
 }
 .screen-title {
-    font-size: var(--font-size-xxl);
+    font-size: clamp(1.25rem, 3vh, 1.5rem);
     font-weight: 700;
     color: var(--color-text);
-    margin-bottom: var(--space-xl);
+    margin-bottom: clamp(0.5rem, 2vh, 2rem);
     letter-spacing: 0.5px;
     text-align: center;
 }
@@ -32,6 +34,8 @@
     gap: var(--space-lg);
     width: 100%;
     margin-bottom: var(--space-xl);
+    flex-shrink: 1;
+    min-height: 0;
 }
 .player-input {
     background: var(--color-background);
@@ -40,6 +44,9 @@
     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);
@@ -47,9 +54,9 @@
 }
 .player-input label {
     display: block;
-    margin-bottom: var(--space-md);
+    margin-bottom: clamp(0.5rem, 2vh, 1rem);
     color: var(--color-text);
-    font-size: var(--font-size-lg);
+    font-size: clamp(1rem, 2.5vh, 1.125rem);
     font-weight: 600;
 }
 .name-input-container {
@@ -122,22 +129,43 @@
     background: var(--color-surface);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
-    padding: var(--space-xl) var(--space-lg) var(--space-lg) var(--space-lg);
+    padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--space-lg);
     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: var(--space-md);
-    margin-bottom: var(--space-lg);
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+    margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
 }
 .progress-dot {
-    width: 16px;
-    height: 16px;
+    width: clamp(10px, 2vh, 16px);
+    height: clamp(10px, 2vh, 16px);
     border-radius: 50%;
     background: var(--color-border);
     opacity: 0.4;
@@ -150,18 +178,27 @@
     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: 80px;
-    min-height: var(--touch-target-comfortable);
-    font-size: var(--font-size-base);
+    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: var(--space-sm) var(--space-md);
+    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);
@@ -293,6 +330,13 @@
     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);

src/lib/features/new-game/ProgressIndicator.tsx

@@ -0,0 +1,31 @@
+import { h } from 'preact';
+import type { JSX } from 'preact';
+import styles from './NewGame.module.css';
+
+interface ProgressIndicatorProps {
+  currentStep: number;
+  totalSteps?: number;
+  style?: JSX.CSSProperties;
+}
+
+export function ProgressIndicator({
+  currentStep,
+  totalSteps = 7,
+  style,
+}: ProgressIndicatorProps) {
+  const activeIndex = Math.min(Math.max(currentStep, 1), totalSteps) - 1;
+
+  return (
+    <div className={styles['progress-indicator']} style={style}>
+      {Array.from({ length: totalSteps }, (_, index) => {
+        const isActive = index === activeIndex;
+        const className = isActive
+          ? `${styles['progress-dot']} ${styles['active']}`
+          : styles['progress-dot'];
+
+        return <span key={index} className={className} />;
+      })}
+    </div>
+  );
+}
+

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 */}
+  </>
+);
+```
+
+

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

@@ -0,0 +1,10 @@
+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';
+export { ProgressIndicator } from './ProgressIndicator';
+

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

@@ -0,0 +1,115 @@
+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';
+
+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['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' }}>
+          {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}`}
+              style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+            >
+              {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: 16, 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}`}
+                  style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+                >
+                  {name}
+                </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={() => {
+              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>
+  );
+};
+
+

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

@@ -0,0 +1,60 @@
+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';
+
+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['form-header']}>
+        <div className={styles['screen-title']}>Break-Regel wählen</div>
+        <ProgressIndicator currentStep={6} style={{ marginBottom: 24 }} />
+      </div>
+
+      <div className={styles['form-content']}>
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+          {[
+            { 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}`}
+              style={{ minWidth: 160, minHeight: 64, fontSize: '1.2rem', padding: '16px 32px' }}
+            >
+              {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>
+  );
+};
+
+

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

@@ -0,0 +1,87 @@
+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';
+
+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>
+        <ProgressIndicator currentStep={4} style={{ marginBottom: 24 }} />
+      </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>
+  );
+};
+
+

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

@@ -0,0 +1,258 @@
+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

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,154 @@
+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/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>
+);
+
+

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

@@ -0,0 +1,115 @@
+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';
+
+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>
+      <ProgressIndicator currentStep={5} style={{ marginBottom: 24 }} />
+      <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>
+  );
+};
+
+

src/lib/index.ts

@@ -0,0 +1,9 @@
+export * from './domain';
+export * from './data';
+export * from './state';
+export * from './ui';
+export * from './features/game-list';
+export * from './features/game-detail';
+export * from './features/game-lifecycle';
+export * from './features/new-game';
+

src/lib/state/README.md

@@ -0,0 +1,38 @@
+# State Layer (`@lib/state`)
+
+Compose domain + data layers into reusable hooks. Hooks are Preact-friendly but React-compatible thanks to the astro-preact compat flag.
+
+## Hooks
+
+- `useGameState`
+  - Loads/synchronises game collections.
+  - Exposes CRUD ops (`addGame`, `updateGame`, `deleteGame`), filtering helpers, and cached player history.
+  - Handles persistence errors and loading states.
+- `useNavigation`
+  - Simple screen router for the 3 major views (list, new game, detail).
+  - Tracks selected game id.
+- `useNewGameWizard`
+  - Holds transient wizard form state and immutable steps.
+  - Provides `startWizard`, `resetWizard`, `updateGameData`, `nextStep`.
+- `useModal`, `useValidationModal`, `useCompletionModal`
+  - Encapsulate modal visibility state, ensuring consistent APIs across components.
+
+## Usage
+
+```ts
+import { useGameState, useNavigation, useModal } from '@lib/state';
+
+const gameState = useGameState();
+const navigation = useNavigation();
+const modal = useModal();
+
+// gameState.games, navigation.screen, modal.openModal(), ...
+```
+
+## Design Notes
+
+- Hooks avoid direct DOM work—UI components receive ready-to-render props and callbacks.
+- Side effects (storage, logging) are delegated to `@lib/data`.
+- All exports are re-exported via `@lib/state/index.ts`.
+
+

src/lib/state/index.ts

@@ -0,0 +1,8 @@
+export { useGameState } from './useGameState';
+export {
+  useModal,
+  useValidationModal,
+  useCompletionModal,
+} from './useModal';
+export { useNavigation, useNewGameWizard } from './useNavigation';
+

src/lib/state/useGameState.ts

@@ -0,0 +1,121 @@
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import type { Game, NewGameData, GameFilter } from '@lib/domain/types';
+import { GameService } from '@lib/data/gameService';
+
+export function useGameState() {
+  const [games, setGames] = useState<Game[]>([]);
+  const [filter, setFilter] = useState<GameFilter>('all');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load games from IndexedDB on mount
+  useEffect(() => {
+    const loadGames = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const savedGames = await GameService.loadGames();
+        setGames(savedGames);
+      } catch (err) {
+        console.error('Failed to load games:', err);
+        setError('Failed to load games from storage');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadGames();
+  }, []);
+
+  const addGame = useCallback(async (gameData: NewGameData): Promise<number> => {
+    try {
+      const newGame = GameService.createGame(gameData);
+      await GameService.saveGame(newGame);
+      setGames(prevGames => [newGame, ...prevGames]);
+      return newGame.id;
+    } catch (err) {
+      console.error('Failed to add game:', err);
+      setError('Failed to save new game');
+      throw err;
+    }
+  }, []);
+
+  const updateGame = useCallback(async (gameId: number, updatedGame: Game) => {
+    try {
+      await GameService.saveGame(updatedGame);
+      setGames(prevGames => 
+        prevGames.map(game => game.id === gameId ? updatedGame : game)
+      );
+    } catch (err) {
+      console.error('Failed to update game:', err);
+      setError('Failed to save game changes');
+      throw err;
+    }
+  }, []);
+
+  const deleteGame = useCallback(async (gameId: number) => {
+    try {
+      await GameService.deleteGame(gameId);
+      setGames(prevGames => prevGames.filter(game => game.id !== gameId));
+    } catch (err) {
+      console.error('Failed to delete game:', err);
+      setError('Failed to delete game');
+      throw err;
+    }
+  }, []);
+
+  const getGameById = useCallback((gameId: number): Game | undefined => {
+    return games.find(game => game.id === gameId);
+  }, [games]);
+
+  const getFilteredGames = useCallback(async (): Promise<Game[]> => {
+    try {
+      return await GameService.getGamesByFilter(filter);
+    } catch (err) {
+      console.error('Failed to get filtered games:', err);
+      setError('Failed to load filtered games');
+      return games.filter(game => {
+        if (filter === 'active') return game.status === 'active';
+        if (filter === 'completed') return game.status === 'completed';
+        return true;
+      });
+    }
+  }, [filter, games]);
+
+  const getPlayerNameHistory = useCallback((): string[] => {
+    // Extract player names from current games for immediate UI use
+    const nameLastUsed: Record<string, number> = {};
+    
+    games.forEach(game => {
+      const timestamp = new Date(game.updatedAt).getTime();
+      
+      if ('players' in game) {
+        // EndlosGame
+        game.players.forEach(player => {
+          nameLastUsed[player.name] = Math.max(nameLastUsed[player.name] || 0, timestamp);
+        });
+      } else {
+        // StandardGame
+        if (game.player1) nameLastUsed[game.player1] = Math.max(nameLastUsed[game.player1] || 0, timestamp);
+        if (game.player2) nameLastUsed[game.player2] = Math.max(nameLastUsed[game.player2] || 0, timestamp);
+        if (game.player3) nameLastUsed[game.player3] = Math.max(nameLastUsed[game.player3] || 0, timestamp);
+      }
+    });
+
+    return [...new Set(Object.keys(nameLastUsed))].sort((a, b) => nameLastUsed[b] - nameLastUsed[a]);
+  }, [games]);
+
+  return {
+    games,
+    filter,
+    setFilter,
+    loading,
+    error,
+    addGame,
+    updateGame,
+    deleteGame,
+    getGameById,
+    getFilteredGames,
+    getPlayerNameHistory,
+  };
+}

src/lib/state/useModal.ts

@@ -0,0 +1,60 @@
+import { useState, useCallback } from 'preact/hooks';
+import type { ModalState, ValidationState, CompletionModalState } from '@lib/ui/types';
+import type { Game } from '@lib/domain/types';
+
+export function useModal() {
+  const [modal, setModal] = useState<ModalState>({ open: false, gameId: null });
+
+  const openModal = useCallback((gameId?: number) => {
+    setModal({ open: true, gameId });
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setModal({ open: false, gameId: null });
+  }, []);
+
+  return {
+    modal,
+    openModal,
+    closeModal,
+  };
+}
+
+export function useValidationModal() {
+  const [validation, setValidation] = useState<ValidationState>({ open: false, message: '' });
+
+  const showValidation = useCallback((message: string) => {
+    setValidation({ open: true, message });
+  }, []);
+
+  const closeValidation = useCallback(() => {
+    setValidation({ open: false, message: '' });
+  }, []);
+
+  return {
+    validation,
+    showValidation,
+    closeValidation,
+  };
+}
+
+export function useCompletionModal() {
+  const [completionModal, setCompletionModal] = useState<CompletionModalState>({ 
+    open: false, 
+    game: null 
+  });
+
+  const openCompletionModal = useCallback((game: Game) => {
+    setCompletionModal({ open: true, game });
+  }, []);
+
+  const closeCompletionModal = useCallback(() => {
+    setCompletionModal({ open: false, game: null });
+  }, []);
+
+  return {
+    completionModal,
+    openCompletionModal,
+    closeCompletionModal,
+  };
+}

src/lib/state/useNavigation.ts

@@ -0,0 +1,82 @@
+import { useState, useCallback } from 'preact/hooks';
+import type { NewGameStep, NewGameData } from '@lib/domain/types';
+
+type Screen = 'game-list' | 'new-game' | 'game-detail';
+
+export function useNavigation() {
+  const [screen, setScreen] = useState<Screen>('game-list');
+  const [currentGameId, setCurrentGameId] = useState<number | null>(null);
+
+  const showGameList = useCallback(() => {
+    setScreen('game-list');
+    setCurrentGameId(null);
+  }, []);
+
+  const showNewGame = useCallback(() => {
+    setScreen('new-game');
+    setCurrentGameId(null);
+  }, []);
+
+  const showGameDetail = useCallback((gameId: number) => {
+    setCurrentGameId(gameId);
+    setScreen('game-detail');
+  }, []);
+
+  return {
+    screen,
+    currentGameId,
+    showGameList,
+    showNewGame,
+    showGameDetail,
+  };
+}
+
+export function useNewGameWizard() {
+  const [newGameStep, setNewGameStep] = useState<NewGameStep>(null);
+  const [newGameData, setNewGameData] = useState<NewGameData>({
+    player1: '',
+    player2: '',
+    player3: '',
+    gameType: '',
+    raceTo: '',
+  });
+
+  const startWizard = useCallback(() => {
+    setNewGameStep('player1');
+    setNewGameData({
+      player1: '',
+      player2: '',
+      player3: '',
+      gameType: '',
+      raceTo: '',
+    });
+  }, []);
+
+  const resetWizard = useCallback(() => {
+    setNewGameStep(null);
+    setNewGameData({
+      player1: '',
+      player2: '',
+      player3: '',
+      gameType: '',
+      raceTo: '',
+    });
+  }, []);
+
+  const updateGameData = useCallback((data: Partial<NewGameData>) => {
+    setNewGameData(prev => ({ ...prev, ...data }));
+  }, []);
+
+  const nextStep = useCallback((step: NewGameStep) => {
+    setNewGameStep(step);
+  }, []);
+
+  return {
+    newGameStep,
+    newGameData,
+    startWizard,
+    resetWizard,
+    updateGameData,
+    nextStep,
+  };
+}

src/lib/ui/Button.tsx

@@ -0,0 +1,32 @@
+import { h } from 'preact';
+import type { ButtonProps } from '@lib/ui/types';
+import styles from './Button.module.css';
+
+export function Button({ 
+  variant = 'secondary', 
+  size = 'medium', 
+  disabled = false, 
+  children, 
+  onClick,
+  'aria-label': ariaLabel,
+  ...rest 
+}: ButtonProps) {
+  const classNames = [
+    styles.button,
+    styles[variant],
+    styles[size],
+    disabled && styles.disabled,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      className={classNames}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

src/lib/ui/Layout.module.css

@@ -1,5 +1,6 @@
 .layout {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
   background-color: var(--color-background);
   color: var(--color-text);
   display: flex;
@@ -12,13 +13,19 @@
   margin: 0 auto;
   padding: var(--space-md);
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 .screen {
   width: 100%;
-  min-height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 /* Tablet optimizations */

src/lib/ui/README.md

@@ -0,0 +1,35 @@
+# UI Primitives (`@lib/ui`)
+
+Reusable presentation components with co-located CSS modules. No business logic; just view concerns.
+
+## Components
+
+- `Button` – Variant + size aware button with shared styling.
+- `Card` – Basic container with optional elevated/outlined variants.
+- `Layout` / `Screen` – Page chrome primitives used by the Astro shell.
+- `Modal` – Generic confirmation modal (title, message, confirm/cancel).
+- `ValidationModal` – Specialized modal for validation feedback.
+
+## Types
+
+- `types.ts` defines `ButtonProps`, modal state types, etc. Re-exported via `@lib/ui`.
+
+## Usage
+
+```tsx
+import { Button, Card, Layout } from '@lib/ui';
+
+<Layout>
+  <Card variant="elevated">
+    <Button variant="primary">Start</Button>
+  </Card>
+</Layout>
+```
+
+## Styling
+
+- Each component ships with a `.module.css` file.  
+  Astro/Vite handles module scoping automatically—consumers simply import the component.
+- Custom class names can be injected through the exposed `className` props when required.
+
+

src/lib/ui/index.ts

@@ -0,0 +1,7 @@
+export * from './types';
+export { Button } from './Button';
+export { Card } from './Card';
+export { Layout, Screen } from './Layout';
+export { default as Modal } from './Modal';
+export { default as ValidationModal } from './ValidationModal';
+

src/styles/index.css

@@ -85,11 +85,15 @@
     }
 }
 
+html, body {
+    height: 100%;
+    overflow: hidden;
+}
+
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background-color: var(--color-background);
     color: var(--color-text);
-    min-height: 100vh;
     overscroll-behavior: none;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
@@ -161,7 +165,6 @@ input:focus, select:focus {
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
-}
 
 .btn-primary:hover {
     background: var(--color-primary-hover);
@@ -267,11 +270,6 @@ input:focus, select:focus {
     border: 0;
 }
 
-/* Focus styles for better accessibility */
-*:focus {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
 
 /* Skip link for keyboard navigation */
 .skip-link {

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

tests/recordings/2-10-ball-endlos-wechsel.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Kim');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Leo');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '10-Ball' }).click();
+  await page.getByRole('button', { name: 'Endlos' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Leo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Leo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Kim' }).click();
+  await page.getByRole('button', { name: 'Spiel beenden' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+});
+

tests/recordings/2-10-ball-race3-wechsel.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Charlie');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Diana');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '10-Ball' }).click();
+  await page.getByRole('button', { name: '3' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Diana' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Charlie' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Diana' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/2-8-ball-race5-wechsel.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Wendy');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Xavier');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '8-Ball' }).click();
+  await page.getByRole('button', { name: '5' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Xavier' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Wendy' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Xavier' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/2-8-ball-race9-winner.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Mia');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Noah');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '8-Ball' }).click();
+  await page.getByRole('button', { name: '9' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Noah' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Noah' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Mia' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/2-8-endlos-winner.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Foo');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bar');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '8-Ball' }).click();
+  await page.getByRole('button', { name: 'Endlos' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Spiel beenden' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+});

tests/recordings/2-9-ball-race1-wechsel.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Rita');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Sam');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '9-Ball' }).click();
+  await page.getByRole('button', { name: '1' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Sam' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Sam' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/2-9-ball-race5-winner.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Alice');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bob');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '9-Ball' }).click();
+  await page.getByRole('button', { name: '5' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Alice' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Bob' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Alice' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/3-10-ball-race5-winner.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Oscar');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Paula');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Quinn');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: '10-Ball' }).click();
+  await page.getByRole('button', { name: '5' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Quinn' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Oscar' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Paula' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Quinn' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/3-8-ball-endlos-winner.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Eva');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Frank');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Grace');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: '8-Ball' }).click();
+  await page.getByRole('button', { name: 'Endlos' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Winnerbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Eva' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Frank' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Grace' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Frank' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Grace' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Eva' }).click();
+  await page.getByRole('button', { name: 'Spiel beenden' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+});
+

tests/recordings/3-8-ball-race3-wechsel.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Tom');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Uma');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Victor');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: '8-Ball' }).click();
+  await page.getByRole('button', { name: '3' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Tom' }).click();
+  await page.getByRole('button', { name: 'Zweites Break: Uma' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Uma' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Victor' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Tom' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/3-9-ball-race7-wechsel.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Henry');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Iris');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Jack');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: '9-Ball' }).click();
+  await page.getByRole('button', { name: '7' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Iris' }).click();
+  await page.getByRole('button', { name: 'Zweites Break: Jack' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Henry' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Jack' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Henry' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Iris' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});
+

tests/recordings/README.md

@@ -0,0 +1,147 @@
+# Playwright Recordings
+
+This directory contains recorded browser interaction scripts for BSC Score. Use Playwright's codegen to record interactions once, then replay them anytime.
+
+## Quick Start
+
+### Recording Interactions
+
+1. **Start the dev server** (in a separate terminal):
+   ```bash
+   npm run dev
+   ```
+
+2. **Start Playwright codegen**:
+   ```bash
+   npm run test:record
+   ```
+   
+   This opens:
+   - A browser window (use the app normally)
+   - Playwright Inspector (shows generated code in real-time)
+
+3. **Interact with the app**:
+   - Click buttons, fill forms, navigate
+   - All actions are automatically captured
+   - Code appears in the Playwright Inspector window
+
+4. **Save your recording**:
+   - Copy the generated code from the Inspector
+   - Create a new `.ts` file in this directory
+   - Paste the code and save (e.g., `create-game-basic.ts`)
+
+### Running Recordings
+
+Run all recordings:
+```bash
+npm run test:e2e
+```
+
+Run a specific recording:
+```bash
+npx playwright test tests/recordings/create-game-basic.ts
+```
+
+Run with UI mode (helpful for debugging):
+```bash
+npx playwright test --ui
+```
+
+## Naming Conventions
+
+Use descriptive names that indicate the flow:
+- `create-game-basic.ts` - Basic game creation flow
+- `create-game-3players.ts` - Game creation with 3 players
+- `score-update.ts` - Score update flow
+- `undo-action.ts` - Undo functionality
+
+## Duplicating & Modifying Scripts
+
+This is the key feature! Copy any script to create a variant:
+
+1. **Copy a script**:
+   ```bash
+   cp create-game-basic.ts create-game-variant.ts
+   ```
+
+2. **Modify the copy**:
+   - Change player names
+   - Modify game type
+   - Change the last step (e.g., click 'a' instead of 'z')
+   - Add or remove steps
+
+3. **Run the variant**:
+   ```bash
+   npx playwright test tests/recordings/create-game-variant.ts
+   ```
+
+### Example Modification
+
+```typescript
+// Original: create-game-basic.ts
+await page.click('button:has-text("Option Z")');
+
+// Modified: create-game-variant.ts  
+await page.click('button:has-text("Option A")'); // changed from Z to A
+```
+
+## Script Structure
+
+All recordings follow this structure:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('description of what this script does', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  
+  // Your recorded interactions here
+  await page.click('text=Neues Spiel');
+  await page.fill('input[name="player1"]', 'Alice');
+  // ... more steps
+});
+```
+
+## Tips
+
+- **Use the dev server**: Make sure `npm run dev` is running on port 3000 before recording or running scripts
+- **Descriptive test names**: The test name helps identify what the script does
+- **Comments**: Add comments in scripts to explain non-obvious steps
+- **Wait for navigation**: If something doesn't work, you might need to add `await page.waitForNavigation()` or `await page.waitForSelector()`
+
+## Common Patterns
+
+### Fill a form field
+```typescript
+await page.fill('input[name="fieldName"]', 'value');
+```
+
+### Click a button
+```typescript
+await page.click('button:has-text("Button Text")');
+```
+
+### Wait for element
+```typescript
+await page.waitForSelector('text=Expected Text');
+```
+
+### Check element is visible
+```typescript
+await expect(page.locator('text=Some Text')).toBeVisible();
+```
+
+## Troubleshooting
+
+**Script fails with "element not found"**:
+- Add wait statements: `await page.waitForSelector('selector')`
+- Check if the selector changed (use Playwright Inspector to find new selectors)
+
+**Browser doesn't open during recording**:
+- Make sure dev server is running on port 3000
+- Check if port 3000 is available
+
+**Test runs but doesn't do anything**:
+- Check that baseURL in `playwright.config.ts` is correct
+- Verify the app is accessible at `http://localhost:3000`
+

tests/recordings/example-flow.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('button', { name: 'Neues Spiel starten' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Foo');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).click();
+  await page.getByRole('textbox', { name: 'Name Spieler' }).fill('Bar');
+  await page.getByRole('button', { name: 'Weiter' }).click();
+  await page.getByRole('button', { name: 'Überspringen' }).click();
+  await page.getByRole('button', { name: '8-Ball' }).click();
+  await page.getByRole('button', { name: '6' }).click();
+  await page.getByRole('button', { name: 'Break-Regel wählen: Wechselbreak' }).click();
+  await page.getByRole('button', { name: 'Zuerst: Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Bar' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Aktueller Punktestand für Foo' }).click();
+  await page.getByRole('button', { name: 'Bestätigen' }).click();
+  await page.getByRole('button', { name: 'Zurück zur Liste' }).click();
+});

tsconfig.json

@@ -10,6 +10,11 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@lib/*": ["src/lib/*"]
+    }
   }
 }