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/GameList.jsx

@@ -0,0 +1,41 @@
+import { h } from 'preact';
+import styles from './GameList.module.css';
+
+export default function GameList({ games, filter = 'all', onShowGameDetail, onDeleteGame }) {
+  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) - new Date(a.createdAt));
+
+  if (filteredGames.length === 0) {
+    return <div className={styles['empty-state']}>Keine Spiele vorhanden</div>;
+  }
+
+  return (
+    <div className={styles['game-list'] + ' ' + styles['games-container']}>
+      {filteredGames.map(game => {
+        const playerNames = game.player3
+          ? `${game.player1} vs ${game.player2} vs ${game.player3}`
+          : `${game.player1} vs ${game.player2}`;
+        const scores = game.player3
+          ? `${game.score1} - ${game.score2} - ${game.score3}`
+          : `${game.score1} - ${game.score2}`;
+        return (
+          <div className={
+            styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
+          } key={game.id}>
+            <div className={styles['game-info']} onClick={() => onShowGameDetail(game.id)}>
+              <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>
+            <button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)}></button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}