Hustler-Pixelwelt T5: Hochhaus-Welt (Ebenen, Figuren nach Status, graue Räume, Etagen) und Kamera

HochhausWelt.jsx baut die Welt 1:1 aus dem Markup der Zeichenfläche (Himmel, Bühne 2400x1200, Haus-, Licht- und Fensterebenen, Neon, Aufzug,
Raumschilder, Bildschirme, Radar, Schilder, Etagen, 19 Hustler, Schnee); Figuren, Zusätze, graue Raum-Ebenen samt Papier-Zettel, Briefkasten-Zähler
und Etagen-Links folgen dem Dienst-Zustand. useKamera.js ist der Hook für Rad, Ziehen, Pinch, Doppeltipp, Tasten und Gleiten.

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

src/styles/hustler/hustler-welt.css

@@ -0,0 +1,59 @@
+/* Handgeschriebene Regeln der Hochhaus-Welt (HochhausWelt.jsx, Hustler-Pixelwelt T5). Nicht erzeugt: hochhaus.css kommt von scripts/hustler-import.mjs und
+   wird nie von Hand geändert. Hier steht nur, was die Zeichenfläche als Inline-Stile hatte (Sichtfenster, Bühne, Raumschilder, Zettel, Schildtexte,
+   Briefkasten-Zähler, Neon, Antenne, Sprite-Lagen der Figuren) und deshalb nicht im erzeugten CSS ist. Inline bleibt im JSX nur Geometrie aus
+   lib/hustlerWelt.js und alles, was vom Zoom abhängt (transform der Bühne, Schriftgrößen über --hk-etikett und --hk-name). Alle Klassen beginnen mit hk-
+   und stehen unter der Wurzel .hk-hochhaus. */
+
+/* ---------- Sichtfenster: füllt die Wurzel, Ziehen und Pinch gehören der Kamera (touch-action: none) ---------- */
+.hk-hochhaus .hk-sicht {
+  position: absolute; inset: 0;
+  overflow: hidden; overflow: clip;
+  touch-action: none; -webkit-user-select: none; user-select: none;
+  cursor: grab;
+  font-size: 15px; line-height: 20px;
+}
+.hk-hochhaus .hk-sicht.hk-zieht { cursor: grabbing; }
+.hk-hochhaus .hk-sicht > .hk-himmel,
+.hk-hochhaus .hk-sicht > .hk-funkeln { position: absolute; inset: 0; }
+.hk-hochhaus .hk-sicht > .hk-mond { position: absolute; right: 13%; top: 15%; width: 80px; height: 80px; }
+
+/* ---------- Bühne: 2400 x 1200 Weltpixel, transform setzt die Kamera (translate und scale, Ursprung links oben) ---------- */
+.hk-hochhaus .hk-buehne { position: absolute; left: 0; top: 0; width: 2400px; height: 1200px; transform-origin: 0 0; }
+.hk-hochhaus .hk-buehne.hk-gleitet { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
+@media (prefers-reduced-motion: reduce) {
+  .hk-hochhaus .hk-buehne.hk-gleitet { transition: none; }
+}
+
+/* Schriftgrößen der Etagen-Namen und Namensschilder: wachsen beim Herauszoomen, damit sie lesbar bleiben (Werte setzt die Bühne) */
+.hk-hochhaus .hk-buehne .hk-etage-name { font-size: var(--hk-etikett, 15px); }
+.hk-hochhaus .hk-buehne .hk-namensschild { font-size: var(--hk-name, 12px); }
+
+/* ---------- Neon „HUSTLER“ und Antenne (Lage und Größe inline aus hustlerWelt.js; Blinken steht in hochhaus.css) ---------- */
+.hk-hochhaus .hk-neon {
+  position: absolute; display: flex; align-items: center; justify-content: center;
+  font-family: 'Press Start 2P', 'Pixelify Sans', monospace; letter-spacing: 2px;
+  color: #ffe27a; text-shadow: 0 0 4px #ffb84d, 0 0 12px #ff8a3d; pointer-events: none;
+}
+.hk-hochhaus .hk-antenne { position: absolute; background: #ff4d4d; box-shadow: 0 0 6px 2px rgba(255, 77, 77, 0.6); pointer-events: none; }
+
+/* ---------- Raumschilder, Papier-Zettel für nicht angeschlossene Räume, Schildtexte, Briefkasten-Zähler ---------- */
+.hk-hochhaus .hk-raumschild { position: absolute; font-size: 8px; line-height: 9px; color: #4a5266; white-space: nowrap; pointer-events: none; }
+.hk-hochhaus .hk-zettel {
+  position: absolute; padding: 1px 0; background: #f1ede4; color: #2b2230;
+  font-size: 6px; line-height: 7px; text-align: center; white-space: nowrap;
+  box-shadow: 0 0 0 1px #3a2f3d; pointer-events: none;
+}
+.hk-hochhaus .hk-schildtext { position: absolute; white-space: nowrap; pointer-events: none; }
+.hk-hochhaus .hk-schildtext-tresor { color: #2b3a33; }
+.hk-hochhaus .hk-schildtext-keller { color: #2f3646; }
+.hk-hochhaus .hk-briefkasten {
+  position: absolute; box-sizing: border-box; padding: 0 2px;
+  display: flex; align-items: center; justify-content: center;
+  background: #e2483d; color: #ffffff; font-family: 'Press Start 2P', 'Pixelify Sans', monospace;
+  box-shadow: 0 0 0 1px #3a1216, inset 0 1px 0 0 #ff7d70; pointer-events: none;
+}
+
+/* ---------- Figuren im Knopf: Sprite oben links, Kaffeepunkte und Zzz über dem Kopf (der Fehler-Marker steht in hustler-ui.css) ---------- */
+.hk-hochhaus .hk-hustler > .hk-spr { left: 0; top: 0; }
+.hk-hochhaus .hk-hustler > .hk-punkte { left: 14px; top: -6px; }
+.hk-hochhaus .hk-hustler > .hk-zzz { left: 15px; top: -11px; }