feat(#28): reorder new game steps and remove step labels

- Order: player1 → player2 → player3 → game type → race to → break type → first break
- Removed all step title labels from forms; kept progress dots only
- Adjusted navigation and back behavior accordingly

Refs #28

src/components/NewGame.tsx

@@ -127,7 +127,6 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
 
   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']} />
@@ -354,7 +353,6 @@ const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
 
   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']} />
@@ -498,7 +496,6 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
 
   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']} />
@@ -626,7 +623,6 @@ const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps
 
   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']} />
@@ -730,7 +726,6 @@ const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToSte
 
   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']} />
@@ -805,7 +800,6 @@ const BreakRuleStep = ({ onNext, onCancel, initialValue = 'winnerbreak' }: Break
 
   return (
     <form className={styles['new-game-form']} aria-label="Break-Regel wählen">
-      <div className={styles['screen-title']}>Neues Spiel – Schritt 4/6</div>
       <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
         {[
           { key: 'winnerbreak', label: 'Winnerbreak' },
@@ -858,7 +852,6 @@ const BreakOrderStep = ({ players, rule, onNext, onCancel }: BreakOrderStepProps
 
   return (
     <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
-      <div className={styles['screen-title']}>Neues Spiel – Schritt 5/6</div>
       <div style={{ marginBottom: 16, fontWeight: 600 }}>Wer bricht zuerst?</div>
       <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
         {players.filter(Boolean).map((name, idx) => (

src/components/screens/NewGameScreen.tsx

@@ -44,7 +44,7 @@ export default function NewGameScreen({
       gameType: type as any, // Type assertion for now, could be improved with proper validation
       raceTo: '8'
     });
-    onStepChange('breakRule');
+    onStepChange('raceTo');
   };
 
   const handleBreakRuleNext = (rule: 'winnerbreak' | 'wechselbreak') => {
@@ -54,12 +54,15 @@ export default function NewGameScreen({
 
   const handleBreakOrderNext = (first: number, second?: number) => {
     onDataChange({ breakFirst: first, breakSecond: second ?? '' });
-    onStepChange('raceTo');
+    // Final step completes via RaceTo already
+    onStepChange(null);
   };
 
   const handleRaceToNext = (raceTo: string) => {
     const finalData = { ...data, raceTo };
-    onCreateGame(finalData);
+    // After race to, go to break rule selection
+    onDataChange({ raceTo });
+    onStepChange('breakRule');
   };
 
   const handleStepBack = () => {
@@ -73,15 +76,12 @@ export default function NewGameScreen({
       case 'gameType':
         onStepChange('player3');
         break;
-      case 'breakRule':
+      case 'raceTo':
         onStepChange('gameType');
         break;
       case 'breakOrder':
         onStepChange('breakRule');
         break;
-      case 'raceTo':
-        onStepChange('breakOrder');
-        break;
       default:
         onCancel();
     }
@@ -149,6 +149,23 @@ export default function NewGameScreen({
           gameType={data.gameType}
         />
       )}
+
+      {step === 'breakRule' && (
+        <BreakRuleStep
+          onNext={handleBreakRuleNext}
+          onCancel={handleStepBack}
+          initialValue={(data.breakRule as any) || 'winnerbreak'}
+        />
+      )}
+
+      {step === 'breakOrder' && (
+        <BreakOrderStep
+          players={[data.player1, data.player2, data.player3]}
+          rule={(data.breakRule as any) || 'winnerbreak'}
+          onNext={handleBreakOrderNext}
+          onCancel={handleStepBack}
+        />
+      )}
     </Screen>
   );
 }