feat: Minecraft Clone MVP – prozedurale Welt, Blöcke, Abbauen/Setzen

- Weltgenerierung: FBM-Terrain, 3 Biome (Plains/Wald/Wüste), Höhlen, Wasser, Bäume
- Blöcke: Grass, Dirt, Stein, Sand, Holz, Blätter, Wasser (+Bedrock)
- Interaktion: DDA-Voxel-Raycast, Abbauen (LMB) & Setzen (RMB), Hotbar 1-6
- Spieler: First-Person, Gravitation, AABB-Kollision, Springen, Fly-Mode (F)
- Engine: Chunk-Streaming (16x16x64), Face-Culling, opaker+transparenter Pass
- Stack: Three.js + simplex-noise via CDN, prozedurale Texturen, kein Build-Step

Co-Authored-By: Claude <noreply@anthropic.com>

style.css

@@ -0,0 +1,107 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #8fc3ff;
+  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: #fff;
+  user-select: none;
+}
+
+canvas { display: block; }
+
+/* ---------- Crosshair ---------- */
+#crosshair {
+  position: fixed;
+  left: 50%; top: 50%;
+  width: 22px; height: 22px;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0.85;
+  z-index: 5;
+}
+#crosshair::before, #crosshair::after {
+  content: "";
+  position: absolute;
+  background: #fff;
+  box-shadow: 0 0 2px rgba(0,0,0,0.8);
+}
+#crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
+#crosshair::after  { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
+
+/* ---------- HUD ---------- */
+#hud {
+  position: fixed;
+  top: 8px; left: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
+  pointer-events: none;
+  z-index: 5;
+  white-space: pre;
+}
+
+/* ---------- Hotbar ---------- */
+#hotbar {
+  position: fixed;
+  left: 50%; bottom: 14px;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  padding: 6px;
+  background: rgba(0,0,0,0.35);
+  border: 2px solid rgba(0,0,0,0.5);
+  border-radius: 6px;
+  z-index: 5;
+}
+.slot {
+  width: 52px; height: 52px;
+  border: 2px solid rgba(255,255,255,0.25);
+  border-radius: 4px;
+  background: rgba(0,0,0,0.25);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.slot.active { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.6); }
+.slot .num {
+  position: absolute;
+  top: 2px; left: 4px;
+  font-size: 11px;
+  text-shadow: 1px 1px 2px #000;
+}
+.slot .swatch {
+  width: 34px; height: 34px;
+  border-radius: 3px;
+  border: 1px solid rgba(0,0,0,0.4);
+  image-rendering: pixelated;
+}
+
+/* ---------- Start-Overlay ---------- */
+#overlay {
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(circle at 50% 40%, rgba(40,70,110,0.85), rgba(10,20,35,0.92));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  cursor: pointer;
+  transition: opacity 0.4s ease;
+}
+#overlay.hidden { opacity: 0; pointer-events: none; }
+.panel {
+  text-align: center;
+  background: rgba(0,0,0,0.45);
+  border: 1px solid rgba(255,255,255,0.15);
+  padding: 30px 42px;
+  border-radius: 12px;
+  max-width: 560px;
+}
+.panel h1 { font-size: 30px; margin-bottom: 10px; letter-spacing: 1px; }
+.panel p { font-size: 16px; margin-bottom: 16px; opacity: 0.9; }
+.keys { font-size: 13px; line-height: 1.9; opacity: 0.85; }
+.keys b { color: #ffe08a; }