Netzwerk-Labor · Doku Entwurf – Bento 2.5 „Arbeitsplatz" (Gestaltungsvertrag, 30.10.2026) Zum Spiel Online

Entwurf – Bento 2.5 „Arbeitsplatz" (Gestaltungsvertrag, 30.10.2026)

Auftrag des Nutzers (wörtlich, sinngemäß zusammengefasst). Das Netzwerk-Labor sieht „noch ziemlich shitty" aus. Das Postfach ist „lieblos und unpersönlich". Der Kundenbereich wirkt „zu kindlich und weniger wie in einer Job-Simulation mit Kundenprofil", verlangt ist eine „ansprechende Bento-Ästhetik". Am Dashboard liegen Ziele, Sitzungen und Klassenraum so, dass es „wie ein einzelnes unordentliches Objekt" aussieht. Das Training ist „zu sehr altes Design, kindlich und unprofessionell" und „nur eine unübersichtliche Kaskade an Einheiten" — es soll „nach den Bento-Styleregeln" neu gebaut werden. Die minimierte Fassung zum Nebenbei-Arbeiten wird „komplett überarbeitet": neues Design, „viel interaktiver, bessere und innovativere Inhalte". Dazu kommt der Auftrag aus dem ersten Screenshot: der Hilfeleiter-/Diagnoseblock im Labor (großer grüner Slogan, „Senior fragen frei") wirkt ebenfalls nicht professionell und wird mitgezogen.

Zielbild. Eine ruhige, dichte Arbeitsoberfläche eines IT-Dienstleisters: Bento-Kacheln mit klaren Kanten, echte Hierarchie, glaubwürdige Kundendaten, wenig Farbe, keine Emoji-Deko, keine Riesen-Slogans in Funktionsflächen. Der Spieler soll das Gefühl haben, in einem Werkzeug zu arbeiten — mit Charakter, nicht in einer Kinder-Lern-App.

1 · Was bleibt (nicht verhandelbar)

  1. Bedienlogik und Datenwege bleiben. Kein neues Feature, das einen neuen Spielzustand braucht; keine Änderung an src/sim/, src/modell/, src/kern/, src/cli/. Die Ansichten rufen weiter dieselben Spiel.*-Funktionen, dieselben Bus-Ereignisse, dieselben Handler.
  2. Test-Haken bleiben. Bestehende Klassen, die Tests prüfen, bleiben im DOM und in ihrer Bedeutung: .sp-postfach, .sp-pf-liste, .sp-leser, .sp-mail, .sp-brief, .sp-knoepfe, .sp-blatt, .sp-hilfe, .sp-leiter; .hb-seite; .kr-seite/.kr-kopf/.kr-raster/.kr-kunde, .ka-block; .tr-seite, .tr-liste, .tr-karte (je Szenario genau eine), .tr-geruest, .tr-quelle, .tr-ergebnis, .tr-offen, .tr-grund, .tr-lernen, .tr-fehler*; .lk-zeile mit genau den Kindern `lk-griff, lk-ampeln, lk-werte, lk-mini-wartet, lk-hilfe-knopf, lk-oeffnen,.lk-auf,.lk-mini,.lk-mini-hilfe,.leiste-karte`, .lk-mini-wartet (Text „Mini"), .lk-hilfe-knopf (aria-label „Denkhilfe und Lernanker öffnen").
  3. Zustände bleiben erreichbar: Hover, Tastaturfokus (:focus-visible), „Bewegung aus", fünf Themes (Nordlicht, Messing, Papier, Pulsar, Keramik), Hell/Dunkel. Neue Flächen nutzen ausschließlich Tokens aus basis.css (kein Farb-/Maß-Literal), damit die Themes tragen.
  4. Keine Emoji in UI-Chrome (tests/ui-symbole.test.js, Ziel 0). Bestehende UI.symbol-Glyphen nutzen; Emoji aus DATEN (z. B. k.symbol) wird in den umgebauten Kundenflächen durch Monogramme ersetzt, nicht neu eingebaut.
  5. Keine erfundenen Zahlen. Anzeigen nur Werte, die aus Spiel.*/DATEN kommen. Keine „SLA 99,9 %", keine „Reaktionszeit 4 min", keine Fake-Balken. Was nicht gemessen/gespeichert ist, wird nicht behauptet.
  6. Sprache: Deutsch, professionell, ruhig, kurze Sätze. Keine Ausrufezeichen-Ketten, keine Werbeslogans („Die Simulation zeigt jede Etappe …"), keine Verniedlichung. Kundenstimmen dürfen warm und persönlich sein (die vorhandenen DATEN.kunden-Sätze und briefing-Texte tragen das).
  7. Bedienregeln: Klickziele ≥ 44 px Höhe (bestehender Projektstandard), kein horizontaler Überlauf bei 1366/960/720, keine abgeschnittenen Texte, prefers-reduced-motion respektiert.

2 · Gestaltungssprache „Bento 2.5"

2.1 Raster und Fläche

2.2 Typografie (Skala bleibt die des Projekts)

2.3 Farbe

2.4 Bausteine (neu, von der Leitung bereitgestellt)

2.5 Bewegung und Interaktion

3 · Die fünf Bereiche — Zielbild, Aufbau, Inhalt

3.1 Postfach + Hilfeleiter (Dateien: src/ui/spiel.js, src/stil/spiel.css)

Problem heute: flache Briefliste mit abgeschnittenen Absendern („SALON LOCKENWE…"), Datenkacheln im Leser ohne Inhalt (leere hohe Kästen), kein Gesicht, kein Ton; Hilfeleiter mit 44-px-Grünslogan mitten im Labor.

Zielbild Postfach: „Posteingang eines Dienstleisters".

Zielbild Hilfeleiter: „Diagnose-Assistent", kein Werbeplakat.

Dateigrenzen: nur src/ui/spiel.js (Postfach-Funktionen und hilfePanel/hilfeInhalt, keine Labor-Engine-Funktionen) + src/stil/spiel.css (Abschnitte Hilfeleiter und Postfach). Die .sp-brief-Klassen werden auch vom Ergebnis/Willkommen genutzt — nicht umbenennen, nur ergänzen.

3.2 Kunden + Kundenakte (Dateien: src/ui/karriere.js, src/stil/karriere.css)

Problem heute: sechs Regenbogenkarten mit Emoji-Platten, Herzchenreihen, „Akte ▸"-Knopf; kein Profil, keine Branche, kein Vertragswert auf einen Blick; wirkt wie ein Kinderquartett.

Zielbild Kundenliste: „Kundenportfolio eines Systemhauses".

Zielbild Kundenakte (Profil): „Kundendossier als Bento".

Dateigrenzen: src/ui/karriere.js nur die Abschnitte „Kunden" und „Kundenakte" (Zeilen ~11–101), src/stil/karriere.css + src/stil/kundenakte.css. Andere Abschnitte in karriere.js (Shop, Lernstand, Wiki, Einstellungen, Leisten-Mini) sind tabu — dort arbeitet niemand sonst, aber sie bleiben unverändert, damit der Umbau nicht streut.

3.3 Dashboard „Heute" (Dateien: src/ui/hub.js, src/stil/hub.css)

Problem heute: Hero, Kennzahlen, Tagesziel, Letzte Sitzung und Klassenraum stehen mit unterschiedlichen Einzügen/ohne Kanten in einem Raster; die drei Bereiche „Ziele, Sitzungen, Klassenraum" wirken wie ein einziger unordentlicher Block; darunter hängt das Lagerbild; das Signal zeigt erfundene Werte („PAKETE/S 3").

Zielbild: „Arbeitsplatz am Morgen" als klares Bento.

Dateigrenzen: src/ui/hub.js, src/stil/hub.css. Theme-Dateien werden nicht angefasst; die vorhandenen Theme-Regeln auf .hb-* bleiben gültig, weil die Klassennamen bleiben.

3.4 Training (Dateien: src/ui/training.js, src/stil/training.css)

Problem heute: 52 Szenarien als endlose Kaskade gleich aussehender, textschwerer Karten in 3 Spalten; keine Filter, keine Lernpfade, keine Priorität; wirkt wie eine alte Liste.

Zielbild: „Trainingsarena" als Bento mit Hierarchie.

Dateigrenzen: src/ui/training.js, src/stil/training.css. src/daten/trainings.js, src/spiel/training.js und Tests bleiben unverändert (keine Inhalts-/Verhaltensänderung).

3.5 Minimierte Leiste (Dateien: src/ui/leiste.js, src/stil/leiste.css)

Problem heute: 300 × 56 zeigt nur Ampeln, €/h, Ruf, Zahl, „Mini" und ein Fragezeichen; aufgeklappt eine enge Spalte mit Mini-Ticket; kaum Interaktion, kaum Inhalt.

Zielbild: „Nebenbei-Cockpit" — klein, aber lebendig, nur Maus.

  1. Jetzt dran — nächster offener Auftrag/aktives Ticket: Kunde, Titel, Lohn/Zeit, Knopf „Fortsetzen"/„Öffnen" (ruft UI.spiel.oeffnen / UI.app.ansicht("postfach")).
  2. Mini-Ticket — der vorhandene interaktive Mini-Bereich (lk-mini + lk-mini-hilfe), Antworten/Denkhilfe/Lernanker bleiben; Darstellung kompakt und lesbar.
  3. Status & Verträge — Ampelzeilen je Vertrag (Name · Zustand), €/h passiv, Serie/offene Tickets; wenn nichts da ist, ehrlicher Leerzustand.

Plus eine Leiste mit Schnellaktionen: Postfach (mit Zähler), Labor, Pause (nur wenn ein echter Weg existiert — sonst weglassen). Keine erfundenen Kennzahlen.

Dateigrenzen: src/ui/leiste.js, src/stil/leiste.css. src/ui/karriere.js wird nicht angefasst (Mini-HTML kommt von dort); neue .mk-*-Gestaltung gehört in leiste.css, das schon dem Baustein Leiste gehört.

4 · Schreibrechte (ein Schreiber je Datei)

BereichSchreiberDateien
Postfach + HilfeleiterPostfach-Teamsrc/ui/spiel.js, src/stil/spiel.css
Kunden + KundenakteKunden-Teamsrc/ui/karriere.js, src/stil/karriere.css, src/stil/kundenakte.css
DashboardDashboard-Teamsrc/ui/hub.js, src/stil/hub.css
TrainingTraining-Teamsrc/ui/training.js, src/stil/training.css
LeisteLeisten-Teamsrc/ui/leiste.js, src/stil/leiste.css
Grundlage/IntegrationLeitungsrc/stil/bento.css, src/ui/bento.js, docs/Architektur.md, docs/entwicklung/*, tools/vorschau.py, Nachweise

Verboten für alle Bereichsteams: src/stil/basis.css, src/stil/zz*.css (Themes/Lagebild), src/ui/app.js, src/ui/dom.js, src/ui/geraetebilder.js, src/ui/hub.js|karriere.js|spiel.js| training.js|leiste.js außer der eigenen Datei, src/sim/**, src/modell/**, src/kern/**, src/cli/**, tools/**, tests/**, bauen.py, README.md, docs/**, Git-Befehle. Braucht ein Team etwas davon: Meldung an die Leitung, nicht selbst ändern.

5 · Abnahme (je Bereich)

  1. python tools/vorschau.py --name <bereich> baut eine private Fassung, danach `python Nachweise/bento/foto.py --html vorschau-<bereich>.html --marke <bereich> --nur <ansichten>` liefert Bilder 1440/960 (zusätzlich 720 für die eigene Ansicht).
  2. Sichtprüfung der Bilder: keine abgeschnittenen Texte, keine Überläufe, klare Kachelkanten, eine Hauptaktion, keine Emoji, keine erfundenen Zahlen. Mindestens zwei Iterationen.
  3. node tests/run.js (bzw. sh tools/test.sh) muss grün bleiben; python tools/klassen.py 0; python tools/ethos.py GRÜN; python tools/umlaute.py GRÜN. Keine Teständerung ohne Rücksprache mit der Leitung; Verbesserungen der Stilzahlen sind erwünscht, Verschlechterungen nicht (R4/R9/R10 dürfen nicht steigen).
  4. Kurzer Bericht an die Leitung: Dateien, was gebaut, Bilderpfad, Testzahlen, offene Punkte und „nicht geprüft".

6 · Was bewusst nicht Teil dieses Umbaus ist