Hustler-Pixelwelt T7: Detailansicht eines Hustlers (Szene nach Status, Daten, Spur, Blättern, Fokus)

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

src/styles/hustler/hustler-detail.css

@@ -0,0 +1,97 @@
+/* Detailansicht eines Hustlers (HustlerDialog.jsx, Spec E10/E13/E14). Handgeschrieben, nicht erzeugt: die Inline-Stile des Aufbaus „offen“ in
+   pixelwelt-v2/entwurf/markup.html stehen hier als Klassen. Szene, Figur, Zusätze (hk-sz, hk-gr-*, hk-monitor-gross, hk-dampf, hk-zzz-gross,
+   hk-wirbel), Panel (hk-panel), Knöpfe (hk-knopf) und Symbole (hk-ic, hk-schliessen, hk-pfeil-*) kommen aus dem erzeugten hochhaus.css;
+   hk-gedimmt und hk-alarm aus hustler-ui.css. Alle Klassen beginnen mit hk- und stehen unter der Wurzel .hk-hochhaus.
+   Die Stylesheets hängt WorkersPage ein (Komponenten importieren kein CSS). */
+
+/* ---------- Überlagerung: dunkler Hintergrund-Knopf und das Panel in der Mitte ---------- */
+.hk-hochhaus .hk-dialog-ueber {
+  position: absolute; inset: 0; z-index: 20;
+  display: flex; align-items: center; justify-content: center;
+  box-sizing: border-box; padding: 16px;
+  font-family: 'Pixelify Sans', ui-monospace, monospace; font-size: 15px; line-height: 20px; color: #e6ebff;
+}
+.hk-hochhaus .hk-dialog-hinten {
+  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
+  background: rgba(5, 8, 26, 0.74); cursor: default;
+  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
+}
+
+/* Panel: Szene links, Daten rechts; wird es zu schmal, rutschen die Daten unter die Szene und das Panel scrollt */
+.hk-hochhaus .hk-dialog {
+  position: relative; display: flex; flex-wrap: wrap; gap: 20px;
+  max-width: 100%; max-height: 100%; min-height: min(560px, 100%);
+  overflow: auto; padding: 4px; outline: none;
+}
+.hk-hochhaus .hk-dialog a:focus-visible { outline: 2px solid #ffd25a; outline-offset: 2px; }
+
+/* ---------- Szene: Hülle und Schild kommen aus hochhaus.css (hk-sz) bzw. hier (Schild) ---------- */
+.hk-hochhaus .hk-dialog-schild {
+  position: absolute; display: flex; align-items: center; justify-content: center;
+  color: #3a2f3d; font-size: 10px; line-height: 13px; text-align: center;
+}
+
+/* ---------- Rechte Spalte: Kopf, Fakten, Spur, Fußzeile ---------- */
+.hk-hochhaus .hk-dialog-daten {
+  flex: 1 1 300px; min-width: 280px; max-width: 380px;
+  display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 2px 0;
+}
+.hk-hochhaus .hk-dialog-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.hk-hochhaus .hk-dialog-name {
+  margin: 0; font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 20px; line-height: 28px; font-weight: 400; color: #ffffff;
+  overflow-wrap: anywhere;
+}
+/* Farbe des Status kommt als --hk-status vom Dienst-Status (statusFarbe) */
+.hk-hochhaus .hk-dialog-status { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--hk-status, #9aa6d6); }
+.hk-hochhaus .hk-dialog-punkt { flex: none; width: 10px; height: 10px; background: var(--hk-status, #9aa6d6); box-shadow: 0 0 0 2px #05081a; }
+
+.hk-hochhaus .hk-dialog-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; }
+.hk-hochhaus .hk-dialog-dl dt { color: #9aa6d6; }
+.hk-hochhaus .hk-dialog-dl dd { margin: 0; overflow-wrap: anywhere; }
+
+.hk-hochhaus .hk-dialog-spurtitel {
+  margin: 0 0 8px; font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 11px; line-height: 14px; font-weight: 400; color: #9aa6d6;
+}
+.hk-hochhaus .hk-dialog-spurliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.hk-hochhaus .hk-dialog-spurzeile { display: flex; gap: 10px; }
+/* Breite für „TT.MM. HH:MM“ (Ereignisse von früheren Tagen), nicht nur „HH:MM“ */
+.hk-hochhaus .hk-dialog-zeit { flex: none; width: 96px; color: #ffd25a; white-space: nowrap; }
+.hk-hochhaus .hk-dialog-spurtext { min-width: 0; overflow-wrap: anywhere; }
+.hk-hochhaus .hk-dialog-hinweis { margin: 0; color: #9aa6d6; }
+.hk-hochhaus .hk-dialog-fehler { margin: 0 0 8px; color: #ff6b6b; overflow-wrap: anywhere; }
+
+.hk-hochhaus .hk-dialog-fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.hk-hochhaus .hk-dialog-nummer { font-family: 'Press Start 2P', 'Pixelify Sans', monospace; font-size: 11px; line-height: 14px; color: #9aa6d6; }
+
+/* ---------- Handy (unter 720 px, Spec E13): Vollbild, Szene oben (auf die Breite verkleinert), Daten darunter scrollbar ---------- */
+@media (max-width: 719px) {
+  .hk-hochhaus .hk-dialog-ueber { padding: 0; }
+  .hk-hochhaus .hk-dialog {
+    /* Container für die Szenen-Skalierung (cqw = Innenbreite des Panels) */
+    container-type: inline-size;
+    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px;
+    width: 100%; max-width: 100%; height: 100%; max-height: 100%; min-height: 0;
+    overflow: hidden;
+  }
+  /* Szene: 640 x 400 wird per zoom auf die Breite des Panels gebracht (Layoutgröße schrumpft mit, kein waagrechtes Scrollen) */
+  .hk-hochhaus .hk-dialog .hk-sz { flex: none; zoom: 0.5; }
+  @supports (zoom: tan(atan2(1px, 1px))) {
+    .hk-hochhaus .hk-dialog .hk-sz { zoom: tan(atan2(100cqw, 640px)); }
+  }
+  /* Daten: füllen den Rest und scrollen für sich; die Fußzeile ◂ n / 19 ▸ bleibt unten stehen */
+  .hk-hochhaus .hk-dialog-daten {
+    flex: 1 1 auto; min-width: 0; max-width: none; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 2px 0 0;
+    -webkit-overflow-scrolling: touch;
+  }
+  .hk-hochhaus .hk-dialog-fuss { position: sticky; bottom: 0; margin-top: 4px; padding: 6px 0 2px; background: #0e1430; }
+}
+
+/* Handy quer (niedrig): Szene links (45 % der Breite), Daten rechts daneben und scrollbar */
+@media (max-width: 719px) and (max-height: 520px) {
+  .hk-hochhaus .hk-dialog { flex-direction: row; align-items: flex-start; }
+  .hk-hochhaus .hk-dialog .hk-sz { zoom: 0.4; }
+  @supports (zoom: tan(atan2(1px, 1px))) {
+    .hk-hochhaus .hk-dialog .hk-sz { zoom: tan(atan2(45cqw, 640px)); }
+  }
+  .hk-hochhaus .hk-dialog-daten { align-self: stretch; }
+}