refactor: migrate UI to Preact components and remove legacy Astro/JS

- Replaced all .astro components with .jsx Preact components and added corresponding CSS modules.
- Updated index.astro to use the new App Preact component; removed legacy script and Astro imports.
- Deleted obsolete .astro component files and main JS logic (src/scripts/index.js, public/scripts/index.js).
- Updated astro.config.mjs for Preact integration.
- Updated package.json and package-lock.json to include @astrojs/preact and preact.
- Updated tsconfig.json for Preact JSX support.
- Refactored index.css to keep only global resets and utility styles.
- All changes relate to Gitea issue #1 (refactor to astro app).

Migrates the UI from Astro/vanilla JS to a modular Preact component architecture, removing all legacy code and aligning the project with modern best practices.
Refs #1

src/components/NewGame.jsx

@@ -0,0 +1,71 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import styles from './NewGame.module.css';
+
+export default function NewGame({ onCreateGame, playerNameHistory, onCancel }) {
+  const [player1, setPlayer1] = useState('');
+  const [player2, setPlayer2] = useState('');
+  const [player3, setPlayer3] = useState('');
+  const [gameType, setGameType] = useState('8-Ball');
+  const [raceTo, setRaceTo] = useState('');
+  const [error, setError] = useState(null);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!player1.trim() || !player2.trim()) {
+      setError('Bitte Namen für beide Spieler eingeben');
+      return;
+    }
+    onCreateGame({
+      player1: player1.trim(),
+      player2: player2.trim(),
+      player3: player3.trim() || null,
+      gameType,
+      raceTo: raceTo ? parseInt(raceTo) : null
+    });
+    setPlayer1(''); setPlayer2(''); setPlayer3(''); setGameType('8-Ball'); setRaceTo(''); setError(null);
+  }
+
+  return (
+    <form className={styles['new-game-form']} onSubmit={handleSubmit}>
+      <div>
+        <label>Spieler 1:</label>
+        <input value={player1} onInput={e => setPlayer1(e.target.value)} list="player1-history" />
+        <datalist id="player1-history">
+          {playerNameHistory.map(name => <option value={name} key={name} />)}
+        </datalist>
+      </div>
+      <div>
+        <label>Spieler 2:</label>
+        <input value={player2} onInput={e => setPlayer2(e.target.value)} list="player2-history" />
+        <datalist id="player2-history">
+          {playerNameHistory.map(name => <option value={name} key={name} />)}
+        </datalist>
+      </div>
+      <div>
+        <label>Spieler 3 (optional):</label>
+        <input value={player3} onInput={e => setPlayer3(e.target.value)} list="player3-history" />
+        <datalist id="player3-history">
+          {playerNameHistory.map(name => <option value={name} key={name} />)}
+        </datalist>
+      </div>
+      <div>
+        <label>Spieltyp:</label>
+        <select value={gameType} onChange={e => setGameType(e.target.value)}>
+          <option value="8-Ball">8-Ball</option>
+          <option value="9-Ball">9-Ball</option>
+          <option value="10-Ball">10-Ball</option>
+        </select>
+      </div>
+      <div>
+        <label>Race to:</label>
+        <input type="number" value={raceTo} onInput={e => setRaceTo(e.target.value)} min="1" />
+      </div>
+      {error && <div className={styles['validation-error']}>{error}</div>}
+      <div className={styles['form-actions']}>
+        <button type="button" className={styles['nav-button']} onClick={onCancel}>Abbrechen</button>
+        <button type="submit" className={styles['nav-button']}>Spiel starten</button>
+      </div>
+    </form>
+  );
+}