fix(#28): show progress indicator on all steps with 7-step count

- Added indicator to BreakRule and BreakOrder steps
- Updated all steps to display 7 dots and correct active state

Refs #28

src/components/NewGame.tsx

@@ -134,6 +134,8 @@ const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
       </div>
       <div 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>
@@ -361,6 +363,8 @@ const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
       </div>
       <div 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>
@@ -505,6 +509,8 @@ const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue = '' }:
         <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['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
         <label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
@@ -633,6 +639,8 @@ const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeStepProps
         <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['game-type-selection']}>
         {gameTypes.map(type => (
@@ -737,6 +745,8 @@ const RaceToStep = ({ onNext, onCancel, initialValue = '', gameType }: RaceToSte
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot']} />
         <span className={styles['progress-dot'] + ' ' + styles['active']} />
+        <span className={styles['progress-dot']} />
+        <span className={styles['progress-dot']} />
       </div>
       <div className={styles['endlos-container']}>
         <button
@@ -806,6 +816,15 @@ 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']}>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' },
@@ -861,6 +880,15 @@ const BreakOrderStep = ({ players, rule, onNext, onCancel, initialFirst = 1, ini
   return (
     <form className={styles['new-game-form']} aria-label="Break-Reihenfolge wählen">
       <div className={styles['screen-title']}>Wer bricht zuerst?</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 bricht zuerst?</div>
       <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
         {players.filter(Boolean).map((name, idx) => (