From 9a5f212ef8c09cf4c809ac5f01fa68e9d982a1d7 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@MacBook-Pro.local>
Date: Tue, 31 Mar 2026 14:15:01 +0200
Subject: [PATCH] chore: initial project state with snake and design docs

---
 CLAUDE.md                                     |   19 +
 docs/.DS_Store                                |  Bin 0 -> 6148 bytes
 docs/superpowers/.DS_Store                    |  Bin 0 -> 6148 bytes
 .../plans/2026-03-31-retro-arcade-platform.md | 1022 +++++++++++++++++
 ...2026-03-31-retro-arcade-platform-design.md |   97 ++
 snake.html                                    |  275 +++++
 6 files changed, 1413 insertions(+)
 create mode 100644 CLAUDE.md
 create mode 100644 docs/.DS_Store
 create mode 100644 docs/superpowers/.DS_Store
 create mode 100644 docs/superpowers/plans/2026-03-31-retro-arcade-platform.md
 create mode 100644 docs/superpowers/specs/2026-03-31-retro-arcade-platform-design.md
 create mode 100644 snake.html

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..6a00325
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,19 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+Regeln
+Du darfst auf keinen Fall aus dem Projektordner ausbrechen!!!
+
+## Project
+
+This is a single-file browser game (`snake.html`) — a self-contained Snake implementation in plain HTML, CSS, and JavaScript with no build step, no dependencies, and no package manager.
+
+## Running the game
+
+Open directly in a browser:
+```
+open snake.html
+```
+
+No server, compilation, or installation required.
diff --git a/docs/.DS_Store b/docs/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..52a89a9b82a7036eee1bb7f549ac80c3bc17f3af
GIT binary patch
literal 6148
zcmeHK-A)rh6g~r0wji=VtALtp?2QSi)Ih`-LoFC>jDb*sMZmgkhq88=X?C|%AS8VO
zO?&_!z-QpbOK-gO&iDv=>y@7Q*&x<lYQ*eGX1+5s=bPF2HuDDnB-^N@0ZafeFbRzH
zV)h#o?IN{Vm#&E+64{3bb>Pqh3SL`uR1ql<De$i;Al7al_|U+WD^~5%`t@@zFPB_i
z!U(ZFWHDX)E)BhotWwjjYt~_@?mB)jIr))vb;nMf?lF3dK4T-l#hdxS4jO*e_SQsc
znRB-k`gUo>q0OS1nBy$49Y#G#a4Hl-)*m~p!kby%U=?3-^Qys!8}XufVSoQ>dU|SR
z!n%>3Ihe5a)9G8&6V}b?$%BKqkxX5`y;Q8Z+l;@IQvib7mb8A2A-qDTgDg&YM^BJ^
z2q*a2G{Y&zd;8AxpB*p<hlU3egUMv_-1(8wv9XIqbGT%eYgJEt`W$z;mvtL-t?D_I
zeBCZPtXc@@iy-gp(V{u@OXw1<JUyyf-mPOy;;2G)ci*Fw$^I5LH+>oue)3m~=73-J
zxa%%*-w7PfR@Z$LJ{QpK9NXkL;tq<wP!~=93iW)%HcnyH_B@+aX?AzRwM*1pU|Ajn
zd|O0{-pZUUdQ|jOaL^ZXNzHy$nx--jL+6TeOh_pQkC#N~X(Xw4HB0)-j58XKr!tGW
z$$)XV3y)w0YOn{d;SIcnLwFCL;0t^sJ!F(zCgWs^+#$2%0m+dkq)fJmL!K*sSNO{>
z>HahjADs@rd?)WQm$NEHgzV$wlUdSpG5SvC=SN>1DG({}2Ne+egM~?8Mq^8%+&VCm
zPXI)5jgW@ExGV^cr7@$ir4U=th@v7YD$!32qUcy}>9~x>mO@1bB1gu4^vFcNP>38I
z>n#}$B%?6OBLyM_jw{fuil#XK?{$9vA16hnNP$R!|4IQ8o6paS=e<5#+a@Q@S_{)N
sOu|H5OQED-rjKLkh@*G}lQe9zgoBvT*iwi!XwgML$`ECd0)JJ3AD#o>vj6}9

literal 0
HcmV?d00001

diff --git a/docs/superpowers/.DS_Store b/docs/superpowers/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..2ae6d19d443fc0bbeb77b85b26f1e717aecf4217
GIT binary patch
literal 6148
zcmeHKPfrs;6rX`2TToe`RX|NP_F@7mH4rhzPzy#IV<41Z5wPxVhq88=X?C|%ASC?)
zn)m_y0DcB89=&+=X8Z_x^`vk9Y$#R_UW}1>$(!GsH}B2t`)zh+2O)&>jY<|F6Cq@P
za!m9=^9$kQTsx#oc@ltF%n=rR<~lxeI%2g$GoTsx_ZZ;cZVw7k9TDWB_V1T(33<?K
z--U=rZ;N!AVO@Rchfdx1!f0~xBkt->^qlH7dX0W#qqxPI#mJ5tVcrhbcyF08--&J8
zS@B4-Y^LTIjckvSKqPn-0wL><Jz8PSJZsQOC~}K(z(^X&vUy>D|7v!6YG%T^k)1i1
zu=carThkNP&FRU5gQStpT)(|kuKC-Py%dj)Fl<jk&M1uG6&P(rdG3xX3V(=;`fQqU
zS;@Zs(`U{On1e&ZgQ>xEI(_c^$mrPE#j-i<*lw*F@W-8FJ`3`GgRE5puTreru1Bk-
zh`fl3-X1BNLqCNsk;>B}*Ya*1Vp2yAG2Q)u5Gv+d*xU?BRBE$V%jQ7n2F&*tS?EO`
zqpRy7kX?w#c7bj(SaAo4Ua0e-aD@aRU`I}A)eZuiR!M$$!?zvcFVH-TBDT#V`D`wu
zivi&?l{~O{Et%P`lE+N$VQgHHhKVxLfTJT7TMBXJUCk2qGG&w`lbPJ28Zyv0x{Ds6
z6;wle=rwwS-l9YF9(_Vz&^O$RNAYDmj;HV)Jc}RT0)B#ByoEjdT;_MhulbUiPXP|W
zXnV~&#en*ZR>2!*98WkIJypBWe=^F|RcZz_1Ao8(-ybYcjyZ)biDK)3MqB{^`EP^}
zu=$Sz&#@Hd6t*P72nd#`fHD=UD+ZS7;I~v<PGL);Oh;I(4D+a!vAUsPu{!uI5sq+9
zqHZ+<nt|gCbjz;E&;NVBzyBXk(ml<9X5hbK04L^)^Zcr>&eo3N_*rX#J_F^#<606$
l3N-3C76w0xM?i(Zn8gjioWhnw@POza0YQUqGy{K?fgi8P)zJU|

literal 0
HcmV?d00001

diff --git a/docs/superpowers/plans/2026-03-31-retro-arcade-platform.md b/docs/superpowers/plans/2026-03-31-retro-arcade-platform.md
new file mode 100644
index 0000000..a8a7a0b
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-31-retro-arcade-platform.md
@@ -0,0 +1,1022 @@
+# Retro Arcade Platform Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Erweitere das bestehende Snake-Spiel zu einer Retro-Arcade-Plattform mit vier Spielen (Snake, Tetris, Breakout, Space Invaders), einem gemeinsamen Startmenü und localStorage-Highscores.
+
+**Architecture:** Shared `style.css` und `scores.js` werden von allen Spielen eingebunden. `index.html` dient als Startmenü mit Spielkacheln und Highscores. Jedes Spiel ist eine eigenständige HTML-Datei. Kein Build-Schritt, kein Server — direkt im Browser öffenbar.
+
+**Tech Stack:** Plain HTML5, CSS3, JavaScript (Canvas API), localStorage
+
+---
+
+## Dateiübersicht
+
+| Datei | Aktion | Verantwortung |
+|---|---|---|
+| `style.css` | Neu | Navy/Teal-Theme, gemeinsame Klassen |
+| `scores.js` | Neu | getHighscore / setHighscore via localStorage |
+| `index.html` | Neu | Startmenü, 2×2 Spielkacheln mit Highscores |
+| `snake.html` | Anpassen | shared assets einbinden, Menü-Link, setHighscore aufrufen |
+| `tetris.html` | Neu | Tetris-Implementierung |
+| `breakout.html` | Neu | Breakout-Implementierung |
+| `spaceinvaders.html` | Neu | Space Invaders-Implementierung |
+
+---
+
+### Task 1: Gemeinsames Stylesheet
+
+**Files:**
+- Create: `style.css`
+
+- [ ] **Schritt 1: `style.css` erstellen**
+
+```css
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  background: #1a1a2e;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  font-family: 'Courier New', monospace;
+  color: #e0e0e0;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 12px;
+  color: #4ecca3;
+  letter-spacing: 4px;
+}
+
+.hud {
+  display: flex;
+  gap: 40px;
+  margin-bottom: 12px;
+  font-size: 1rem;
+  color: #a0a0c0;
+}
+
+.hud span { color: #4ecca3; font-weight: bold; }
+
+canvas {
+  border: 2px solid #4ecca3;
+  box-shadow: 0 0 20px rgba(78, 204, 163, 0.3);
+  display: block;
+}
+
+.overlay {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.overlay h2 { color: #4ecca3; font-size: 1.5rem; letter-spacing: 3px; }
+.overlay p  { color: #a0a0c0; font-size: 0.9rem; }
+
+.retro-btn {
+  background: transparent;
+  border: 2px solid #4ecca3;
+  color: #4ecca3;
+  padding: 10px 24px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+  text-transform: uppercase;
+}
+
+.retro-btn:hover { background: #4ecca3; color: #1a1a2e; }
+
+.menu-link {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  color: #4ecca3;
+  text-decoration: none;
+  font-size: 0.85rem;
+  letter-spacing: 2px;
+  opacity: 0.7;
+}
+
+.menu-link:hover { opacity: 1; }
+```
+
+- [ ] **Schritt 2: Im Browser prüfen**
+
+Erstelle eine temporäre `test.html` mit `<link rel="stylesheet" href="style.css">` und einem `<button class="retro-btn">TEST</button>`. Öffne im Browser — Button muss transparent mit Teal-Border erscheinen, Hover muss den Hintergrund füllen. Danach `test.html` löschen.
+
+- [ ] **Schritt 3: Commit**
+
+```bash
+git add style.css
+git commit -m "feat: add shared retro arcade stylesheet"
+```
+
+---
+
+### Task 2: Highscore-Modul
+
+**Files:**
+- Create: `scores.js`
+
+- [ ] **Schritt 1: `scores.js` erstellen**
+
+```js
+function getHighscore(game) {
+  return parseInt(localStorage.getItem('hs_' + game) || '0', 10);
+}
+
+function setHighscore(game, score) {
+  if (score > getHighscore(game)) {
+    localStorage.setItem('hs_' + game, score);
+  }
+}
+```
+
+- [ ] **Schritt 2: Im Browser-Konsole prüfen**
+
+Öffne eine beliebige HTML-Datei mit `<script src="scores.js"></script>`. In der DevTools-Konsole:
+```js
+setHighscore('test', 100);
+getHighscore('test'); // → 100
+setHighscore('test', 50);
+getHighscore('test'); // → 100 (nicht überschrieben, da niedriger)
+setHighscore('test', 200);
+getHighscore('test'); // → 200
+localStorage.removeItem('hs_test');
+```
+
+- [ ] **Schritt 3: Commit**
+
+```bash
+git add scores.js
+git commit -m "feat: add localStorage highscore module"
+```
+
+---
+
+### Task 3: Startmenü
+
+**Files:**
+- Create: `index.html`
+
+- [ ] **Schritt 1: `index.html` erstellen**
+
+```html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Retro Arcade</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    .game-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      margin-top: 24px;
+    }
+
+    .game-tile {
+      border: 2px solid #4ecca3;
+      padding: 24px 20px;
+      text-align: center;
+      text-decoration: none;
+      color: inherit;
+      transition: background 0.15s;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .game-tile:hover { background: rgba(78, 204, 163, 0.08); }
+
+    .game-title {
+      color: #4ecca3;
+      font-size: 1rem;
+      letter-spacing: 3px;
+    }
+
+    .hs-label {
+      color: #555;
+      font-size: 0.7rem;
+      letter-spacing: 2px;
+    }
+
+    .hs-value {
+      color: #a0a0c0;
+      font-size: 0.9rem;
+    }
+  </style>
+</head>
+<body>
+  <h1>RETRO ARCADE</h1>
+  <div class="game-grid">
+    <a class="game-tile" href="snake.html">
+      <div class="game-title">SNAKE</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-snake">—</div>
+    </a>
+    <a class="game-tile" href="tetris.html">
+      <div class="game-title">TETRIS</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-tetris">—</div>
+    </a>
+    <a class="game-tile" href="breakout.html">
+      <div class="game-title">BREAKOUT</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-breakout">—</div>
+    </a>
+    <a class="game-tile" href="spaceinvaders.html">
+      <div class="game-title">SPACE INV.</div>
+      <div class="hs-label">HIGHSCORE</div>
+      <div class="hs-value" id="hs-spaceinvaders">—</div>
+    </a>
+  </div>
+
+  <script src="scores.js"></script>
+  <script>
+    ['snake', 'tetris', 'breakout', 'spaceinvaders'].forEach(game => {
+      const hs = getHighscore(game);
+      document.getElementById('hs-' + game).textContent = hs > 0 ? hs.toLocaleString('de-DE') : '—';
+    });
+  </script>
+</body>
+</html>
+```
+
+- [ ] **Schritt 2: Im Browser prüfen**
+
+`open index.html` — Vier Kacheln müssen im 2×2-Grid erscheinen, alle Highscores zeigen „—". Links zu den Spielen müssen vorhanden sein (noch 404, da Spiele noch nicht existieren). Hover-Effekt auf Kacheln muss sichtbar sein.
+
+- [ ] **Schritt 3: Commit**
+
+```bash
+git add index.html
+git commit -m "feat: add retro arcade start menu"
+```
+
+---
+
+### Task 4: Snake anpassen
+
+**Files:**
+- Modify: `snake.html`
+
+Das bestehende `snake.html` muss folgende Änderungen bekommen:
+1. `style.css` und `scores.js` einbinden
+2. Den bestehenden `<style>`-Block auf spiel-spezifische Styles reduzieren (gemeinsame Styles entfernen)
+3. `#hud` → `.hud` (ID zu Klasse)
+4. `#overlay` → `.overlay` (ID zu Klasse — auch im JS anpassen)
+5. `← Menü`-Link hinzufügen
+6. `setHighscore('snake', score)` bei Game Over aufrufen
+
+- [ ] **Schritt 1: Head anpassen**
+
+Im `<head>` nach `<meta charset>` einfügen:
+```html
+<link rel="stylesheet" href="style.css">
+```
+
+Ganz unten vor `</body>` vor dem vorhandenen `<script>`-Tag einfügen:
+```html
+<script src="scores.js"></script>
+```
+
+- [ ] **Schritt 2: Menü-Link hinzufügen**
+
+Direkt nach `<body>` einfügen:
+```html
+<a class="menu-link" href="index.html">← Menü</a>
+```
+
+- [ ] **Schritt 3: Doppelte Styles entfernen**
+
+Im `<style>`-Block des `snake.html` folgende Regeln entfernen, da sie jetzt in `style.css` sind:
+- `* { margin: 0; ... }`
+- `body { ... }`
+- `h1 { ... }`
+- `#hud { ... }` und `#hud span { ... }`
+- `canvas { ... }`
+- `#overlay { ... }`
+
+Alle Button-Styles (`.btn`, Neustart-Button) auf `.retro-btn` umstellen oder behalten — je nachdem ob sie identisch sind. Identische Stile entfernen, spiel-spezifische behalten.
+
+- [ ] **Schritt 4: IDs zu Klassen ändern**
+
+Im HTML:
+- `id="hud"` → `class="hud"`
+- `id="overlay"` → `class="overlay"`
+
+Im JavaScript alle Vorkommen von:
+- `document.getElementById('hud')` → `document.querySelector('.hud')`
+- `document.getElementById('overlay')` → `document.querySelector('.overlay')`
+
+- [ ] **Schritt 5: setHighscore aufrufen**
+
+Im JavaScript die Game-Over-Funktion finden (wo der Score zurückgesetzt oder der Overlay gezeigt wird). Direkt vor dem Anzeigen des Overlays einfügen:
+```js
+setHighscore('snake', score);
+```
+
+`score` durch den tatsächlichen Score-Variablennamen im bestehenden Code ersetzen.
+
+- [ ] **Schritt 6: Im Browser prüfen**
+
+`open snake.html` — Spiel muss funktionieren wie zuvor. „← Menü" oben links muss sichtbar sein und zu `index.html` navigieren. Nach einem Game Over muss der Highscore in `localStorage` unter `hs_snake` gespeichert sein (DevTools → Application → Local Storage prüfen). `open index.html` — Highscore muss auf der Snake-Kachel erscheinen.
+
+- [ ] **Schritt 7: Commit**
+
+```bash
+git add snake.html
+git commit -m "feat: integrate snake into arcade platform"
+```
+
+---
+
+### Task 5: Tetris
+
+**Files:**
+- Create: `tetris.html`
+
+- [ ] **Schritt 1: `tetris.html` erstellen**
+
+```html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Tetris</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    #wrapper {
+      position: relative;
+      display: flex;
+      gap: 24px;
+      align-items: flex-start;
+    }
+    #sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      color: #a0a0c0;
+      font-size: 0.85rem;
+      padding-top: 4px;
+      min-width: 80px;
+    }
+    #sidebar .label { color: #555; font-size: 0.7rem; letter-spacing: 2px; }
+    #sidebar .value { color: #4ecca3; font-size: 1.1rem; font-weight: bold; }
+    #next-canvas { border: 1px solid #2a2a4a; display: block; }
+  </style>
+</head>
+<body>
+  <a class="menu-link" href="index.html">← Menü</a>
+  <h1>TETRIS</h1>
+
+  <div id="wrapper">
+    <canvas id="canvas" width="300" height="600"></canvas>
+    <div id="sidebar">
+      <div>
+        <div class="label">SCORE</div>
+        <div class="value" id="score-display">0</div>
+      </div>
+      <div>
+        <div class="label">LEVEL</div>
+        <div class="value" id="level-display">1</div>
+      </div>
+      <div>
+        <div class="label">LINES</div>
+        <div class="value" id="lines-display">0</div>
+      </div>
+      <div>
+        <div class="label">BEST</div>
+        <div class="value" id="hs-display">0</div>
+      </div>
+      <div>
+        <div class="label">NÄCHSTES</div>
+        <canvas id="next-canvas" width="80" height="80"></canvas>
+      </div>
+    </div>
+  </div>
+
+  <div class="overlay" id="overlay">
+    <h2>GAME OVER</h2>
+    <p id="final-score"></p>
+    <button class="retro-btn" onclick="startGame()">NEU STARTEN</button>
+    <a class="retro-btn" href="index.html" style="text-decoration:none;text-align:center;">← MENÜ</a>
+  </div>
+
+  <script src="scores.js"></script>
+  <script>
+    const COLS = 10, ROWS = 20, BLOCK = 30;
+    const COLORS = ['', '#ff6b6b','#ffd93d','#6bcb77','#4d96ff','#ff9f43','#a29bfe','#fd79a8'];
+    const SHAPES = [
+      [],
+      [[1,1,1,1]],
+      [[2,2],[2,2]],
+      [[0,3,0],[3,3,3]],
+      [[0,4,4],[4,4,0]],
+      [[5,5,0],[0,5,5]],
+      [[6,0,0],[6,6,6]],
+      [[0,0,7],[7,7,7]],
+    ];
+
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    const nextCanvas = document.getElementById('next-canvas');
+    const nextCtx = nextCanvas.getContext('2d');
+    const overlay = document.getElementById('overlay');
+
+    let board, piece, nextPiece, score, level, lines, dropInterval, lastTime, animId;
+
+    function createBoard() {
+      return Array.from({length: ROWS}, () => Array(COLS).fill(0));
+    }
+
+    function randomPiece() {
+      const id = Math.ceil(Math.random() * 7);
+      const shape = SHAPES[id].map(r => [...r]);
+      return { id, shape, x: Math.floor(COLS / 2) - Math.floor(shape[0].length / 2), y: 0 };
+    }
+
+    function drawBlock(context, x, y, colorId, size) {
+      context.fillStyle = COLORS[colorId];
+      context.fillRect(x * size + 1, y * size + 1, size - 2, size - 2);
+    }
+
+    function drawBoard() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      board.forEach((row, y) => row.forEach((val, x) => { if (val) drawBlock(ctx, x, y, val, BLOCK); }));
+    }
+
+    function drawPiece(p) {
+      p.shape.forEach((row, dy) => row.forEach((val, dx) => {
+        if (val) drawBlock(ctx, p.x + dx, p.y + dy, val, BLOCK);
+      }));
+    }
+
+    function drawNext() {
+      nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);
+      const size = 20;
+      const offX = Math.floor((4 - nextPiece.shape[0].length) / 2);
+      const offY = Math.floor((4 - nextPiece.shape.length) / 2);
+      nextPiece.shape.forEach((row, dy) => row.forEach((val, dx) => {
+        if (val) drawBlock(nextCtx, offX + dx, offY + dy, val, size);
+      }));
+    }
+
+    function collides(p, board) {
+      return p.shape.some((row, dy) => row.some((val, dx) => {
+        if (!val) return false;
+        const nx = p.x + dx, ny = p.y + dy;
+        return nx < 0 || nx >= COLS || ny >= ROWS || (ny >= 0 && board[ny][nx]);
+      }));
+    }
+
+    function merge(p) {
+      p.shape.forEach((row, dy) => row.forEach((val, dx) => {
+        if (val) board[p.y + dy][p.x + dx] = val;
+      }));
+    }
+
+    function clearLines() {
+      let cleared = 0;
+      for (let y = ROWS - 1; y >= 0; y--) {
+        if (board[y].every(v => v)) {
+          board.splice(y, 1);
+          board.unshift(Array(COLS).fill(0));
+          cleared++;
+          y++;
+        }
+      }
+      if (cleared) {
+        const pts = [0, 100, 300, 500, 800][cleared] * level;
+        score += pts;
+        lines += cleared;
+        level = Math.floor(lines / 10) + 1;
+        dropInterval = Math.max(100, 1000 - (level - 1) * 90);
+        updateHUD();
+      }
+    }
+
+    function rotate(shape) {
+      return shape[0].map((_, i) => shape.map(row => row[i]).reverse());
+    }
+
+    function updateHUD() {
+      document.getElementById('score-display').textContent = score.toLocaleString('de-DE');
+      document.getElementById('level-display').textContent = level;
+      document.getElementById('lines-display').textContent = lines;
+      document.getElementById('hs-display').textContent = getHighscore('tetris').toLocaleString('de-DE');
+    }
+
+    function gameOver() {
+      cancelAnimationFrame(animId);
+      setHighscore('tetris', score);
+      document.getElementById('final-score').textContent = 'SCORE: ' + score.toLocaleString('de-DE');
+      document.getElementById('hs-display').textContent = getHighscore('tetris').toLocaleString('de-DE');
+      overlay.style.display = 'flex';
+    }
+
+    function startGame() {
+      board = createBoard();
+      score = 0; level = 1; lines = 0; dropInterval = 1000; lastTime = 0;
+      piece = randomPiece();
+      nextPiece = randomPiece();
+      overlay.style.display = 'none';
+      updateHUD();
+      drawNext();
+      animId = requestAnimationFrame(loop);
+    }
+
+    function loop(timestamp) {
+      const delta = timestamp - lastTime;
+      if (delta > dropInterval) {
+        lastTime = timestamp;
+        const moved = { ...piece, shape: piece.shape.map(r => [...r]), y: piece.y + 1 };
+        if (!collides(moved, board)) {
+          piece = moved;
+        } else {
+          merge(piece);
+          clearLines();
+          piece = nextPiece;
+          nextPiece = randomPiece();
+          drawNext();
+          if (collides(piece, board)) { gameOver(); return; }
+        }
+      }
+      drawBoard();
+      drawPiece(piece);
+      animId = requestAnimationFrame(loop);
+    }
+
+    document.addEventListener('keydown', e => {
+      if (overlay.style.display === 'flex') return;
+      if (e.key === 'ArrowLeft') {
+        const m = { ...piece, shape: piece.shape.map(r => [...r]), x: piece.x - 1 };
+        if (!collides(m, board)) piece = m;
+      } else if (e.key === 'ArrowRight') {
+        const m = { ...piece, shape: piece.shape.map(r => [...r]), x: piece.x + 1 };
+        if (!collides(m, board)) piece = m;
+      } else if (e.key === 'ArrowDown') {
+        const m = { ...piece, shape: piece.shape.map(r => [...r]), y: piece.y + 1 };
+        if (!collides(m, board)) piece = m; else { merge(piece); clearLines(); piece = nextPiece; nextPiece = randomPiece(); drawNext(); if (collides(piece, board)) { gameOver(); return; } }
+      } else if (e.key === 'ArrowUp') {
+        const rotated = rotate(piece.shape);
+        const m = { ...piece, shape: rotated };
+        if (!collides(m, board)) piece = m;
+      } else if (e.key === ' ') {
+        e.preventDefault();
+        while (true) {
+          const m = { ...piece, shape: piece.shape.map(r => [...r]), y: piece.y + 1 };
+          if (collides(m, board)) { merge(piece); clearLines(); piece = nextPiece; nextPiece = randomPiece(); drawNext(); if (collides(piece, board)) gameOver(); break; }
+          piece = m;
+        }
+      }
+    });
+
+    startGame();
+  </script>
+</body>
+</html>
+```
+
+- [ ] **Schritt 2: Im Browser prüfen**
+
+`open tetris.html`. Prüfen:
+- Blöcke fallen automatisch
+- Pfeiltasten links/rechts bewegen, oben rotiert, unten beschleunigt, Leertaste lässt fallen
+- Vollständige Reihen verschwinden, Score steigt
+- Level steigt nach je 10 Zeilen, Fallgeschwindigkeit nimmt zu
+- Game Over erscheint wenn Stapel die Decke erreicht
+- „← Menü" führt zu index.html
+- Nach Game Over: `hs_tetris` in localStorage vorhanden (DevTools prüfen)
+- index.html zeigt den Tetris-Highscore
+
+- [ ] **Schritt 3: Commit**
+
+```bash
+git add tetris.html
+git commit -m "feat: add Tetris game"
+```
+
+---
+
+### Task 6: Breakout
+
+**Files:**
+- Create: `breakout.html`
+
+- [ ] **Schritt 1: `breakout.html` erstellen**
+
+```html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Breakout</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <a class="menu-link" href="index.html">← Menü</a>
+  <h1>BREAKOUT</h1>
+  <div class="hud">
+    <div>SCORE <span id="score-display">0</span></div>
+    <div>LIVES <span id="lives-display">3</span></div>
+    <div>BEST <span id="hs-display">0</span></div>
+  </div>
+  <canvas id="canvas" width="480" height="400"></canvas>
+
+  <div class="overlay" id="overlay">
+    <h2 id="overlay-title">GAME OVER</h2>
+    <p id="final-score"></p>
+    <button class="retro-btn" onclick="startGame()">NEU STARTEN</button>
+    <a class="retro-btn" href="index.html" style="text-decoration:none;text-align:center;">← MENÜ</a>
+  </div>
+
+  <script src="scores.js"></script>
+  <script>
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    const overlay = document.getElementById('overlay');
+
+    const PADDLE_W = 80, PADDLE_H = 10, PADDLE_Y = 370;
+    const BALL_R = 8;
+    const BRICK_COLS = 10, BRICK_ROWS = 5, BRICK_W = 44, BRICK_H = 18, BRICK_PAD = 4, BRICK_TOP = 40;
+    const BRICK_COLORS = ['#ff6b6b','#ffd93d','#6bcb77','#4d96ff','#a29bfe'];
+
+    let paddle, ball, bricks, score, lives, animId, keys;
+
+    function createBricks() {
+      const b = [];
+      for (let r = 0; r < BRICK_ROWS; r++)
+        for (let c = 0; c < BRICK_COLS; c++)
+          b.push({ x: c * (BRICK_W + BRICK_PAD) + BRICK_PAD, y: r * (BRICK_H + BRICK_PAD) + BRICK_TOP, alive: true, color: BRICK_COLORS[r] });
+      return b;
+    }
+
+    function updateHUD() {
+      document.getElementById('score-display').textContent = score.toLocaleString('de-DE');
+      document.getElementById('lives-display').textContent = lives;
+      document.getElementById('hs-display').textContent = getHighscore('breakout').toLocaleString('de-DE');
+    }
+
+    function showOverlay(title) {
+      cancelAnimationFrame(animId);
+      setHighscore('breakout', score);
+      document.getElementById('overlay-title').textContent = title;
+      document.getElementById('final-score').textContent = 'SCORE: ' + score.toLocaleString('de-DE');
+      document.getElementById('hs-display').textContent = getHighscore('breakout').toLocaleString('de-DE');
+      overlay.style.display = 'flex';
+    }
+
+    function startGame() {
+      paddle = { x: 200, w: PADDLE_W };
+      ball = { x: 240, y: 340, vx: 3, vy: -4 };
+      bricks = createBricks();
+      score = 0; lives = 3;
+      keys = {};
+      overlay.style.display = 'none';
+      updateHUD();
+      animId = requestAnimationFrame(loop);
+    }
+
+    function loop() {
+      // Paddle bewegen
+      if (keys['ArrowLeft'])  paddle.x = Math.max(0, paddle.x - 5);
+      if (keys['ArrowRight']) paddle.x = Math.min(canvas.width - paddle.w, paddle.x + 5);
+
+      // Ball bewegen
+      ball.x += ball.vx;
+      ball.y += ball.vy;
+
+      // Wände
+      if (ball.x - BALL_R < 0)                    { ball.x = BALL_R; ball.vx *= -1; }
+      if (ball.x + BALL_R > canvas.width)          { ball.x = canvas.width - BALL_R; ball.vx *= -1; }
+      if (ball.y - BALL_R < 0)                     { ball.y = BALL_R; ball.vy *= -1; }
+
+      // Ball verloren
+      if (ball.y + BALL_R > canvas.height) {
+        lives--;
+        updateHUD();
+        if (lives <= 0) { showOverlay('GAME OVER'); return; }
+        ball = { x: paddle.x + paddle.w / 2, y: PADDLE_Y - BALL_R - 10, vx: 3 * (Math.random() > 0.5 ? 1 : -1), vy: -4 };
+      }
+
+      // Paddle-Kollision
+      if (ball.y + BALL_R >= PADDLE_Y && ball.y + BALL_R <= PADDLE_Y + PADDLE_H &&
+          ball.x >= paddle.x && ball.x <= paddle.x + paddle.w && ball.vy > 0) {
+        ball.vy *= -1;
+        const offset = (ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2);
+        ball.vx = offset * 5;
+      }
+
+      // Brick-Kollision
+      let remaining = 0;
+      bricks.forEach(b => {
+        if (!b.alive) return;
+        remaining++;
+        if (ball.x + BALL_R > b.x && ball.x - BALL_R < b.x + BRICK_W &&
+            ball.y + BALL_R > b.y && ball.y - BALL_R < b.y + BRICK_H) {
+          b.alive = false;
+          remaining--;
+          ball.vy *= -1;
+          score += 10;
+          updateHUD();
+        }
+      });
+
+      if (remaining === 0) { showOverlay('GEWONNEN!'); return; }
+
+      // Zeichnen
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // Paddle
+      ctx.fillStyle = '#4ecca3';
+      ctx.fillRect(paddle.x, PADDLE_Y, paddle.w, PADDLE_H);
+      // Ball
+      ctx.beginPath();
+      ctx.arc(ball.x, ball.y, BALL_R, 0, Math.PI * 2);
+      ctx.fillStyle = '#e0e0e0';
+      ctx.fill();
+      // Bricks
+      bricks.forEach(b => {
+        if (!b.alive) return;
+        ctx.fillStyle = b.color;
+        ctx.fillRect(b.x, b.y, BRICK_W, BRICK_H);
+      });
+
+      animId = requestAnimationFrame(loop);
+    }
+
+    document.addEventListener('keydown', e => { keys[e.key] = true; e.preventDefault(); });
+    document.addEventListener('keyup',   e => { keys[e.key] = false; });
+
+    document.getElementById('hs-display').textContent = getHighscore('breakout').toLocaleString('de-DE');
+    startGame();
+  </script>
+</body>
+</html>
+```
+
+- [ ] **Schritt 2: Im Browser prüfen**
+
+`open breakout.html`. Prüfen:
+- Paddle bewegt sich mit Pfeiltasten links/rechts
+- Ball prallt von Wänden, Paddle und Steinen ab
+- Steine verschwinden bei Treffer, Score steigt um 10
+- Bei 3 verlorenen Leben: Game Over-Overlay
+- Wenn alle Steine weg: „GEWONNEN!"-Overlay
+- Highscore in localStorage unter `hs_breakout` nach Game Over
+- index.html zeigt Breakout-Highscore
+
+- [ ] **Schritt 3: Commit**
+
+```bash
+git add breakout.html
+git commit -m "feat: add Breakout game"
+```
+
+---
+
+### Task 7: Space Invaders
+
+**Files:**
+- Create: `spaceinvaders.html`
+
+- [ ] **Schritt 1: `spaceinvaders.html` erstellen**
+
+```html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Space Invaders</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <a class="menu-link" href="index.html">← Menü</a>
+  <h1>SPACE INVADERS</h1>
+  <div class="hud">
+    <div>SCORE <span id="score-display">0</span></div>
+    <div>LIVES <span id="lives-display">3</span></div>
+    <div>BEST <span id="hs-display">0</span></div>
+  </div>
+  <canvas id="canvas" width="480" height="480"></canvas>
+
+  <div class="overlay" id="overlay">
+    <h2 id="overlay-title">GAME OVER</h2>
+    <p id="final-score"></p>
+    <button class="retro-btn" onclick="startGame()">NEU STARTEN</button>
+    <a class="retro-btn" href="index.html" style="text-decoration:none;text-align:center;">← MENÜ</a>
+  </div>
+
+  <script src="scores.js"></script>
+  <script>
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    const overlay = document.getElementById('overlay');
+
+    const COLS = 11, ROWS = 5;
+    const ALIEN_W = 32, ALIEN_H = 24, ALIEN_PAD_X = 10, ALIEN_PAD_Y = 16;
+    const ALIEN_POINTS = [30, 20, 20, 10, 10]; // pro Reihe, oben nach unten
+    const PLAYER_W = 36, PLAYER_H = 16, PLAYER_Y = 440, PLAYER_SPEED = 5;
+    const BULLET_W = 3, BULLET_H = 12, BULLET_SPEED = 8;
+    const ENEMY_BULLET_SPEED = 4;
+
+    let player, bullets, enemyBullets, aliens, alienDir, alienSpeed, alienDropped;
+    let score, lives, animId, keys, lastEnemyShot, alienMoveTimer, alienMoveInterval;
+
+    function createAliens() {
+      const arr = [];
+      for (let r = 0; r < ROWS; r++)
+        for (let c = 0; c < COLS; c++)
+          arr.push({ x: c * (ALIEN_W + ALIEN_PAD_X) + 40, y: r * (ALIEN_H + ALIEN_PAD_Y) + 60, alive: true, row: r, col: c });
+      return arr;
+    }
+
+    function updateHUD() {
+      document.getElementById('score-display').textContent = score.toLocaleString('de-DE');
+      document.getElementById('lives-display').textContent = lives;
+      document.getElementById('hs-display').textContent = getHighscore('spaceinvaders').toLocaleString('de-DE');
+    }
+
+    function showOverlay(title) {
+      cancelAnimationFrame(animId);
+      setHighscore('spaceinvaders', score);
+      document.getElementById('overlay-title').textContent = title;
+      document.getElementById('final-score').textContent = 'SCORE: ' + score.toLocaleString('de-DE');
+      document.getElementById('hs-display').textContent = getHighscore('spaceinvaders').toLocaleString('de-DE');
+      overlay.style.display = 'flex';
+    }
+
+    function startGame() {
+      player = { x: 220 };
+      bullets = []; enemyBullets = [];
+      aliens = createAliens();
+      alienDir = 1; alienSpeed = 20; alienDropped = false;
+      score = 0; lives = 3;
+      keys = {}; lastEnemyShot = 0; alienMoveTimer = 0; alienMoveInterval = 800;
+      overlay.style.display = 'none';
+      updateHUD();
+      animId = requestAnimationFrame(loop);
+    }
+
+    function drawAlien(x, y, row) {
+      ctx.fillStyle = row === 0 ? '#fd79a8' : row < 3 ? '#a29bfe' : '#4ecca3';
+      // Einfaches Alien-Symbol als Rechteck mit "Augen"
+      ctx.fillRect(x + 4, y + 4, ALIEN_W - 8, ALIEN_H - 8);
+      ctx.fillStyle = '#1a1a2e';
+      ctx.fillRect(x + 8, y + 8, 4, 4);
+      ctx.fillRect(x + ALIEN_W - 12, y + 8, 4, 4);
+    }
+
+    function loop(timestamp) {
+      // Spieler bewegen
+      if (keys['ArrowLeft'])  player.x = Math.max(0, player.x - PLAYER_SPEED);
+      if (keys['ArrowRight']) player.x = Math.min(canvas.width - PLAYER_W, player.x + PLAYER_SPEED);
+
+      // Spieler-Bullets
+      bullets.forEach(b => b.y -= BULLET_SPEED);
+      bullets = bullets.filter(b => b.y > 0);
+
+      // Alien-Bewegung
+      alienMoveTimer += 16;
+      if (alienMoveTimer >= alienMoveInterval) {
+        alienMoveTimer = 0;
+        const alive = aliens.filter(a => a.alive);
+        const maxX = Math.max(...alive.map(a => a.x));
+        const minX = Math.min(...alive.map(a => a.x));
+        if ((alienDir > 0 && maxX + ALIEN_W >= canvas.width - 10) ||
+            (alienDir < 0 && minX <= 10)) {
+          aliens.forEach(a => { a.y += 20; });
+          alienDir *= -1;
+          alienMoveInterval = Math.max(100, alienMoveInterval - 30);
+        } else {
+          aliens.forEach(a => { a.x += alienDir * alienSpeed; });
+        }
+      }
+
+      // Alien beschießt Spieler zufällig
+      if (timestamp - lastEnemyShot > 1200) {
+        lastEnemyShot = timestamp;
+        const alive = aliens.filter(a => a.alive);
+        if (alive.length) {
+          const shooter = alive[Math.floor(Math.random() * alive.length)];
+          enemyBullets.push({ x: shooter.x + ALIEN_W / 2, y: shooter.y + ALIEN_H });
+        }
+      }
+      enemyBullets.forEach(b => b.y += ENEMY_BULLET_SPEED);
+      enemyBullets = enemyBullets.filter(b => b.y < canvas.height);
+
+      // Kollision: Spieler-Bullets vs Aliens
+      bullets.forEach(bull => {
+        aliens.forEach(a => {
+          if (!a.alive) return;
+          if (bull.x > a.x && bull.x < a.x + ALIEN_W && bull.y > a.y && bull.y < a.y + ALIEN_H) {
+            a.alive = false;
+            bull.y = -100;
+            score += ALIEN_POINTS[a.row];
+            updateHUD();
+          }
+        });
+      });
+
+      // Kollision: Alien-Bullets vs Spieler
+      enemyBullets.forEach(b => {
+        if (b.x > player.x && b.x < player.x + PLAYER_W && b.y > PLAYER_Y && b.y < PLAYER_Y + PLAYER_H) {
+          b.y = canvas.height + 1;
+          lives--;
+          updateHUD();
+        }
+      });
+      if (lives <= 0) { showOverlay('GAME OVER'); return; }
+
+      // Aliens erreichen Boden
+      if (aliens.some(a => a.alive && a.y + ALIEN_H >= PLAYER_Y)) { showOverlay('GAME OVER'); return; }
+
+      // Alle Aliens besiegt
+      if (!aliens.some(a => a.alive)) { showOverlay('GEWONNEN!'); return; }
+
+      // Zeichnen
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // Aliens
+      aliens.forEach(a => { if (a.alive) drawAlien(a.x, a.y, a.row); });
+      // Spieler (Dreieck als Raumschiff)
+      ctx.fillStyle = '#4ecca3';
+      ctx.beginPath();
+      ctx.moveTo(player.x + PLAYER_W / 2, PLAYER_Y);
+      ctx.lineTo(player.x, PLAYER_Y + PLAYER_H);
+      ctx.lineTo(player.x + PLAYER_W, PLAYER_Y + PLAYER_H);
+      ctx.closePath();
+      ctx.fill();
+      // Spieler-Bullets
+      ctx.fillStyle = '#4ecca3';
+      bullets.forEach(b => ctx.fillRect(b.x, b.y, BULLET_W, BULLET_H));
+      // Alien-Bullets
+      ctx.fillStyle = '#ff6b6b';
+      enemyBullets.forEach(b => ctx.fillRect(b.x, b.y, BULLET_W, BULLET_H));
+
+      if (lives > 0) animId = requestAnimationFrame(loop);
+    }
+
+    document.addEventListener('keydown', e => {
+      keys[e.key] = true;
+      if (e.key === ' ' && overlay.style.display !== 'flex') {
+        e.preventDefault();
+        if (bullets.length < 3) bullets.push({ x: player.x + PLAYER_W / 2 - BULLET_W / 2, y: PLAYER_Y });
+      }
+    });
+    document.addEventListener('keyup', e => { keys[e.key] = false; });
+
+    document.getElementById('hs-display').textContent = getHighscore('spaceinvaders').toLocaleString('de-DE');
+    startGame();
+  </script>
+</body>
+</html>
+```
+
+- [ ] **Schritt 2: Im Browser prüfen**
+
+`open spaceinvaders.html`. Prüfen:
+- Spieler bewegt sich links/rechts mit Pfeiltasten
+- Leertaste schießt (max. 3 gleichzeitige Bullets)
+- Aliens bewegen sich seitwärts und rücken nach unten wenn sie den Rand erreichen
+- Aliens schießen zufällig zurück
+- Treffer: Alien verschwindet, Score steigt
+- Leben sinkt bei Treffer durch Alien-Bullet oder wenn Aliens den Boden erreichen
+- Game Over / Gewonnen-Overlay erscheint korrekt
+- Highscore in localStorage unter `hs_spaceinvaders`
+- index.html zeigt Space-Invaders-Highscore
+
+- [ ] **Schritt 3: Commit**
+
+```bash
+git add spaceinvaders.html
+git commit -m "feat: add Space Invaders game"
+```
+
+---
+
+### Task 8: Abschlusscheck
+
+- [ ] **Schritt 1: Alle Spiele von index.html aus starten**
+
+`open index.html` — alle vier Kacheln klickbar, Links funktionieren, Highscores werden angezeigt (oder — wenn noch keine gespielt).
+
+- [ ] **Schritt 2: Highscore-Persistenz prüfen**
+
+In jedem Spiel ein Game Over provozieren. Dann `index.html` öffnen und prüfen, ob alle vier Highscores korrekt angezeigt werden.
+
+- [ ] **Schritt 3: Finaler Commit**
+
+```bash
+git add .
+git commit -m "feat: complete retro arcade platform with 4 games"
+```
diff --git a/docs/superpowers/specs/2026-03-31-retro-arcade-platform-design.md b/docs/superpowers/specs/2026-03-31-retro-arcade-platform-design.md
new file mode 100644
index 0000000..109b45b
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-31-retro-arcade-platform-design.md
@@ -0,0 +1,97 @@
+# Retro Arcade Platform — Design Spec
+
+**Date:** 2026-03-31
+
+## Overview
+
+Erweiterung des bestehenden Snake-Spiels zu einer kleinen Retro-Arcade-Plattform mit vier Spielen. Alle Dateien sind plain HTML/CSS/JS, kein Build-Schritt, kein Server, kein Package Manager — direkt im Browser öffenbar.
+
+## Spiele
+
+1. **Snake** — bestehendes `snake.html`, minimal angepasst
+2. **Tetris** — neu
+3. **Breakout** — neu
+4. **Space Invaders** — neu
+
+## Dateistruktur
+
+```
+testprojekt/
+├── index.html          ← Startmenü (neu)
+├── style.css           ← gemeinsame Styles (neu)
+├── scores.js           ← Highscore-Logik (neu)
+├── snake.html          ← angepasst (shared assets einbinden)
+├── tetris.html         ← neu
+├── breakout.html       ← neu
+└── spaceinvaders.html  ← neu
+```
+
+## Architektur
+
+### Gemeinsame Assets
+
+**`style.css`**
+- Navy/Teal-Theme: Hintergrund `#1a1a2e`, Akzent `#4ecca3`, Schrift `Courier New`
+- Gemeinsame Klassen: Body-Layout, Überschriften, HUD, Canvas-Border, Overlay, Buttons, Game-Kacheln
+- Wird von allen HTML-Dateien via `<link rel="stylesheet" href="style.css">` eingebunden
+
+**`scores.js`**
+- `getHighscore(game)` — liest aus `localStorage` (`hs_snake`, `hs_tetris`, `hs_breakout`, `hs_spaceinvaders`), gibt `0` zurück wenn kein Eintrag
+- `setHighscore(game, score)` — speichert nur wenn `score > getHighscore(game)`
+- Wird via `<script src="scores.js"></script>` eingebunden
+
+### Startmenü (`index.html`)
+
+- Titel: "RETRO ARCADE" in Teal, zentriert
+- 2×2 Grid mit einer Kachel pro Spiel
+- Jede Kachel zeigt: Spielname + aktuellen Highscore (gelesen beim Seitenload via `scores.js`)
+- Klick auf Kachel → öffnet die jeweilige Spieldatei (`href="snake.html"` etc.)
+- Highscores werden beim Öffnen von `index.html` frisch aus `localStorage` gelesen — immer aktuell
+
+### Einzelne Spiele
+
+Jedes Spiel bekommt:
+- `<link rel="stylesheet" href="style.css">` und `<script src="scores.js"></script>` im Head
+- "← Menü"-Button oben links, verlinkt auf `index.html`
+- Beim Game Over: `setHighscore('tetris', score)` (bzw. jeweiliger Spielname) aufrufen, bevor der Overlay angezeigt wird
+- Spielspezifische Styles (z.B. Tetris-Blockfarben) inline im jeweiligen `<style>`-Block
+
+### Snake-Anpassung
+
+`snake.html` wird minimal geändert:
+- Inline-CSS für gemeinsame Stile auf `style.css` auslagern
+- `scores.js` einbinden
+- "← Menü"-Button hinzufügen
+- `setHighscore('snake', score)` bei Game Over aufrufen
+
+## Highscore-Speicherung
+
+| localStorage-Key    | Spiel         |
+|---------------------|---------------|
+| `hs_snake`          | Snake         |
+| `hs_tetris`         | Tetris        |
+| `hs_breakout`       | Breakout      |
+| `hs_spaceinvaders`  | Space Invaders|
+
+Ein Highscore wird nur überschrieben wenn der neue Score höher ist.
+
+## Visueller Stil
+
+Einheitliches Navy/Teal-Theme, abgeleitet vom bestehenden Snake-Design:
+
+- Background: `#1a1a2e`
+- Akzentfarbe: `#4ecca3`
+- Text: `#e0e0e0`
+- Sekundärtext: `#a0a0c0`
+- Schrift: `'Courier New', monospace`
+- Canvas/Kachel-Border: `2px solid #4ecca3`, Glow via `box-shadow`
+
+Jedes Spiel behält seine eigenen Spielmechanik-spezifischen Farben (z.B. Tetris-Blockfarben), aber das Rahmenlayout (HUD, Overlay, Menübutton) ist identisch.
+
+## Nicht im Scope
+
+- Sound / Musik
+- Mobile-Touch-Steuerung
+- Globale Ranglisten / Server
+- Animierte Übergänge zwischen Spielen
+- Schwierigkeitsstufen
diff --git a/snake.html b/snake.html
new file mode 100644
index 0000000..aef7fdd
--- /dev/null
+++ b/snake.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Snake</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      background: #1a1a2e;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      font-family: 'Courier New', monospace;
+      color: #e0e0e0;
+    }
+
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 12px;
+      color: #4ecca3;
+      letter-spacing: 4px;
+    }
+
+    #hud {
+      display: flex;
+      gap: 40px;
+      margin-bottom: 12px;
+      font-size: 1rem;
+      color: #a0a0c0;
+    }
+
+    #hud span { color: #4ecca3; font-weight: bold; }
+
+    canvas {
+      border: 2px solid #4ecca3;
+      box-shadow: 0 0 20px rgba(78, 204, 163, 0.3);
+      display: block;
+    }
+
+    #overlay {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+    }
+
+    #overlay h2 {
+      font-size: 2.5rem;
+      color: #ff6b6b;
+    }
+
+    #overlay p {
+      font-size: 1rem;
+      color: #a0a0c0;
+    }
+
+    #overlay.hidden { display: none; }
+
+    button {
+      margin-top: 8px;
+      padding: 10px 28px;
+      font-size: 1rem;
+      font-family: inherit;
+      background: #4ecca3;
+      color: #1a1a2e;
+      border: none;
+      cursor: pointer;
+      letter-spacing: 2px;
+      font-weight: bold;
+    }
+
+    button:hover { background: #38b28a; }
+
+    #controls {
+      margin-top: 12px;
+      font-size: 0.75rem;
+      color: #606080;
+    }
+  </style>
+</head>
+<body>
+  <h1>SNAKE</h1>
+  <div id="hud">
+    Score: <span id="score">0</span> &nbsp;&nbsp; Highscore: <span id="highscore">0</span>
+  </div>
+
+  <div style="position:relative;">
+    <canvas id="canvas" width="400" height="400"></canvas>
+    <div id="overlay">
+      <h2 id="overlay-title">SNAKE</h2>
+      <p id="overlay-msg">Steuere die Schlange mit den Pfeiltasten oder WASD</p>
+      <button id="btn">STARTEN</button>
+    </div>
+  </div>
+
+  <div id="controls">Pfeiltasten / WASD &nbsp;|&nbsp; P = Pause</div>
+
+<script>
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('2d');
+  const overlay = document.getElementById('overlay');
+  const overlayTitle = document.getElementById('overlay-title');
+  const overlayMsg = document.getElementById('overlay-msg');
+  const btn = document.getElementById('btn');
+  const scoreEl = document.getElementById('score');
+  const highscoreEl = document.getElementById('highscore');
+
+  const COLS = 20, ROWS = 20;
+  const CELL = canvas.width / COLS;
+
+  let snake, dir, nextDir, food, score, highscore, running, paused, animId;
+
+  highscore = parseInt(localStorage.getItem('snake_hs') || '0');
+  highscoreEl.textContent = highscore;
+
+  function init() {
+    snake = [
+      { x: 10, y: 10 },
+      { x: 9,  y: 10 },
+      { x: 8,  y: 10 },
+    ];
+    dir = { x: 1, y: 0 };
+    nextDir = { x: 1, y: 0 };
+    score = 0;
+    scoreEl.textContent = 0;
+    spawnFood();
+  }
+
+  function spawnFood() {
+    let pos;
+    do {
+      pos = { x: Math.floor(Math.random() * COLS), y: Math.floor(Math.random() * ROWS) };
+    } while (snake.some(s => s.x === pos.x && s.y === pos.y));
+    food = pos;
+  }
+
+  function step() {
+    dir = nextDir;
+    const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
+
+    // Wall collision
+    if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) return gameOver();
+    // Self collision
+    if (snake.some(s => s.x === head.x && s.y === head.y)) return gameOver();
+
+    snake.unshift(head);
+
+    if (head.x === food.x && head.y === food.y) {
+      score++;
+      scoreEl.textContent = score;
+      if (score > highscore) {
+        highscore = score;
+        highscoreEl.textContent = highscore;
+        localStorage.setItem('snake_hs', highscore);
+      }
+      spawnFood();
+    } else {
+      snake.pop();
+    }
+  }
+
+  function draw() {
+    // Background
+    ctx.fillStyle = '#0f0f1a';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Grid (subtle)
+    ctx.strokeStyle = 'rgba(255,255,255,0.03)';
+    ctx.lineWidth = 0.5;
+    for (let x = 0; x <= COLS; x++) {
+      ctx.beginPath(); ctx.moveTo(x * CELL, 0); ctx.lineTo(x * CELL, canvas.height); ctx.stroke();
+    }
+    for (let y = 0; y <= ROWS; y++) {
+      ctx.beginPath(); ctx.moveTo(0, y * CELL); ctx.lineTo(canvas.width, y * CELL); ctx.stroke();
+    }
+
+    // Food
+    const fx = food.x * CELL, fy = food.y * CELL;
+    ctx.fillStyle = '#ff6b6b';
+    ctx.beginPath();
+    ctx.arc(fx + CELL / 2, fy + CELL / 2, CELL / 2 - 2, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Snake
+    snake.forEach((seg, i) => {
+      const t = i / snake.length;
+      const r = Math.round(78 + (30 - 78) * t);
+      const g = Math.round(204 + (150 - 204) * t);
+      const b = Math.round(163 + (80 - 163) * t);
+      ctx.fillStyle = `rgb(${r},${g},${b})`;
+      const pad = i === 0 ? 1 : 2;
+      ctx.fillRect(seg.x * CELL + pad, seg.y * CELL + pad, CELL - pad * 2, CELL - pad * 2);
+
+      // Eyes on head
+      if (i === 0) {
+        ctx.fillStyle = '#1a1a2e';
+        const ex = dir.y !== 0 ? [CELL * 0.3, CELL * 0.7] : [CELL * 0.6, CELL * 0.6];
+        const ey = dir.x !== 0 ? [CELL * 0.3, CELL * 0.7] : [CELL * 0.6, CELL * 0.6];
+        const ox = dir.x === -1 ? CELL * 0.2 : 0;
+        const oy = dir.y === -1 ? CELL * 0.2 : 0;
+        ctx.beginPath();
+        ctx.arc(seg.x * CELL + ex[0] + ox, seg.y * CELL + ey[0] + oy, 2, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(seg.x * CELL + ex[1] + ox, seg.y * CELL + ey[1] + oy, 2, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    });
+  }
+
+  let lastTime = 0;
+  const SPEED = 120; // ms per step
+
+  function loop(ts) {
+    if (!running || paused) return;
+    if (ts - lastTime >= SPEED) {
+      step();
+      lastTime = ts;
+    }
+    if (running) draw();
+    animId = requestAnimationFrame(loop);
+  }
+
+  function startGame() {
+    init();
+    running = true;
+    paused = false;
+    overlay.classList.add('hidden');
+    lastTime = 0;
+    animId = requestAnimationFrame(loop);
+  }
+
+  function gameOver() {
+    running = false;
+    cancelAnimationFrame(animId);
+    overlayTitle.textContent = 'GAME OVER';
+    overlayTitle.style.color = '#ff6b6b';
+    overlayMsg.textContent = `Punkte: ${score}`;
+    btn.textContent = 'NEU STARTEN';
+    overlay.classList.remove('hidden');
+  }
+
+  btn.addEventListener('click', startGame);
+
+  document.addEventListener('keydown', e => {
+    const keys = {
+      ArrowUp: { x: 0, y: -1 }, w: { x: 0, y: -1 }, W: { x: 0, y: -1 },
+      ArrowDown: { x: 0, y: 1 },  s: { x: 0, y: 1 },  S: { x: 0, y: 1 },
+      ArrowLeft: { x: -1, y: 0 }, a: { x: -1, y: 0 }, A: { x: -1, y: 0 },
+      ArrowRight: { x: 1, y: 0 }, d: { x: 1, y: 0 },  D: { x: 1, y: 0 },
+    };
+    if (keys[e.key]) {
+      const d = keys[e.key];
+      // Prevent 180 turn
+      if (d.x !== -dir.x || d.y !== -dir.y) nextDir = d;
+      e.preventDefault();
+    }
+    if (e.key === 'p' || e.key === 'P') {
+      if (!running) return;
+      paused = !paused;
+      if (!paused) animId = requestAnimationFrame(loop);
+    }
+  });
+
+  // Initial draw
+  init();
+  draw();
+</script>
+</body>
+</html>