refactor: Update Race To step UI and logic

- Renames 'Offen' to 'Endlos' and moves it to a separate line.
- Extends quick-pick buttons to include 1-9.
- Removes 'Custom' button and makes numeric input always visible.
- Updates placeholder text for the custom input.
- Closes #10

src/components/NewGame.jsx

@@ -483,4 +483,86 @@ const GameTypeStep = ({ onNext, onCancel, initialValue = '' }) => {
   );
 };
 
-export { Player1Step, Player2Step, Player3Step, GameTypeStep }; 
+/**
+ * Race To selection step for multi-step game creation wizard.
+ * @param {object} props
+ * @param {Function} props.onNext
+ * @param {Function} props.onCancel
+ * @param {string|number} [props.initialValue]
+ * @returns {import('preact').VNode}
+ */
+const RaceToStep = ({ onNext, onCancel, initialValue = '' }) => {
+  const [currentValue, setCurrentValue] = useState(initialValue);
+  const quickPicks = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  const handleQuickPick = (value) => {
+    onNext(value);
+  };
+
+  const handleInputChange = (e) => {
+    setCurrentValue(e.target.value);
+  };
+
+  const handleCustomSubmit = (e) => {
+    e.preventDefault();
+    onNext(parseInt(currentValue, 10) || 0);
+  };
+
+  return (
+    <form className={styles['new-game-form']} onSubmit={handleCustomSubmit} 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']} ${initialValue === 0 ? 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(initialValue, 10) === value ? styles.selected : ''}`}
+            onClick={() => handleQuickPick(value)}
+          >
+            {value}
+          </button>
+        ))}
+      </div>
+      <div className={styles['custom-race-to']}>
+        <input
+          type="number"
+          pattern="[0-9]*"
+          value={currentValue}
+          onInput={handleInputChange}
+          className={styles['name-input']}
+          placeholder="manuelle Eingabe"
+        />
+        <button type="submit" className={styles['arrow-btn']} aria-label="Bestätigen">&#10003;</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}
+        >
+          &#8592;
+        </button>
+        <div style={{ width: 80 }} />
+      </div>
+    </form>
+  );
+};
+
+export { Player1Step, Player2Step, Player3Step, GameTypeStep, RaceToStep };