Hustler-Pixelwelt T12: Prüfstand auf die Pixelwelt umgestellt (Szenarien A–M), Handy-Kopfzeile zweireihig

Prüfstand: entry.jsx zeigt nur noch die echte Seite WorkersPage (BrowserRouter, Adresse mit ?tab= lesbar); shot.cjs neu mit den Szenarien A–M
(Hochhaus, Regie, Handy, weniger Bewegung, Notbremse, Ausfall, Detail, Etagen, Pause, Pult P3, Pult P4, Keller, Handy Pult/Keller),
harte Prüfungen und Bildern mit Szenario-Vorsilbe; Befunde an der App stehen getrennt von den Verstößen. Skript-API: Gründe der Bot-Leads
wörtlich wie im Dienst. Kopfzeile am Handy: zwei Reihen (Geld + Pause/Zahnrad, dann die fünf Kennzahlen), schmaler Panel-Rand, 40-px-Knöpfe,
Querformat unter 500 px Höhe in einer Reihe; hustlerKopf.test um die Zusicherungen dazu ergänzt.

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

src/styles/hustler/hustler-kopf.css

@@ -49,7 +49,7 @@
 .hk-hochhaus .hk-kopf .hk-nur-tastatur { font: inherit; }
 .hk-hochhaus .hk-hud-knopf {
   display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0; padding: 0;
-  border: 0; background: none; cursor: pointer;
+  border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
 }
 .hk-hochhaus .hk-hud-knopf:disabled { opacity: 0.5; cursor: progress; }
 
@@ -88,19 +88,39 @@
 .hk-hochhaus .hk-rueckfrage-text { margin: 0; color: #b8c2f0; }
 .hk-hochhaus .hk-rueckfrage-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
 
-/* ---------- Handy: die Kopfzeile bricht um, Schrift etwas kleiner ---------- */
+/* ---------- Handy: kompakte Panels, bei Hochformat in zwei Reihen ----------
+   Kompakt (Hochformat unter 720 px und Querformat unter 500 px Höhe): schmaler Rand (8 px statt 16 px, die Rahmenkachel wird 1:1 statt 2:1 gezeichnet), Schrift
+   kleiner, Knöpfe 40 px (Tippfläche). Hochformat unter 720 px: Reihe 1 = Geld + Pause/Zahnrad, Reihe 2 = die fünf Kennzahlen; das Geld-Panel nimmt den Platz,
+   den das rechte Panel übrig lässt, und bricht erst bei sehr langen Beträgen um. Quer (kurz, aber breit) passt alles in eine Reihe. */
+@media (max-width: 719px), (max-height: 500px) {
+  .hk-hochhaus .hk-kopf .hk-panel { border-width: 8px; }
+  .hk-hochhaus .hk-kopf-geld { gap: 12px; padding: 0 4px; }
+  .hk-hochhaus .hk-kopf-wert { gap: 6px; }
+  .hk-hochhaus .hk-kopf-betrag { font-size: 11px; line-height: 16px; }
+  .hk-hochhaus .hk-kopf-rechts { gap: 0; }
+  .hk-hochhaus .hk-hud-knopf { width: 40px; height: 40px; margin: -4px 0; }
+  .hk-hochhaus .hk-kopf-zahlen { gap: 4px 12px; padding: 0 4px; font-size: 11px; line-height: 16px; }
+  .hk-hochhaus .hk-kopf-zahl { gap: 4px; }
+}
 @media (max-width: 719px) {
   .hk-hochhaus .hk-kopf { left: 8px; right: 8px; top: 8px; gap: 8px; font-size: 14px; line-height: 18px; }
-  .hk-hochhaus .hk-kopf-zeile { gap: 6px 8px; }
+  .hk-hochhaus .hk-kopf-zeile { gap: 8px; align-items: stretch; }
   .hk-hochhaus .hk-kopf-abstand { display: none; }
-  .hk-hochhaus .hk-kopf-geld { order: 1; gap: 12px; }
-  .hk-hochhaus .hk-kopf-betrag { font-size: 12px; line-height: 16px; }
-  .hk-hochhaus .hk-kopf-rechts { order: 2; margin-left: auto; }
-  .hk-hochhaus .hk-kopf-zahlen { order: 3; flex: 1 1 100%; gap: 6px 10px; font-size: 11px; line-height: 16px; }
+  .hk-hochhaus .hk-kopf-geld { order: 1; flex: 1 1 0; min-width: 0; justify-content: space-between; gap: 8px; }
+  .hk-hochhaus .hk-kopf-rechts { order: 2; flex: none; }
+  .hk-hochhaus .hk-kopf-zahlen { order: 3; flex: 1 1 100%; justify-content: space-between; flex-wrap: nowrap; gap: 4px; }
   .hk-hochhaus .hk-meldung { padding: 6px 10px 6px 40px; }
   .hk-hochhaus .hk-rueckfrage-hintergrund { padding: 12px; }
   .hk-hochhaus .hk-rueckfrage-titel { font-size: 13px; }
 }
+/* Sehr schmale Handys (bis 379 px): Beträge und Kennzahlen eine Stufe kleiner */
+@media (max-width: 379px) {
+  .hk-hochhaus .hk-kopf-geld { gap: 4px; }
+  .hk-hochhaus .hk-kopf-wert { gap: 4px; }
+  .hk-hochhaus .hk-kopf-betrag { font-size: 9px; line-height: 16px; }
+  .hk-hochhaus .hk-kopf-zahl { gap: 2px; }
+  .hk-hochhaus .hk-kopf-zahlen { font-size: 9px; }
+}
 
 /* ---------- Weniger Bewegung: kein Blinken (der Betrag bleibt auch ohne Blinken erkennbar) ---------- */
 @media (prefers-reduced-motion: reduce) {