467 Stellen. Nicht durch einen anderen Strich ersetzt, sondern durch das
Satzzeichen, das an der jeweiligen Stelle richtig ist: Doppelpunkt, wo eine
Erlaeuterung folgt; Komma, wo der Satz weiterlaeuft; Punkt, wo zwei
Hauptsaetze aneinanderstiessen. Ein Halbgeviertstrich waere nur derselbe
Griff mit kuerzerem Strich gewesen.
Regelbasiert ersetzt und danach nachgeprueft, weil eine Regel allein nicht
reicht. Gefunden und einzeln korrigiert:
- Eingeschobene Saetze mit Strichpaar. Nur der oeffnende Strich passte ins
Muster, der schliessende blieb als "—," stehen. Drei Stellen, jetzt mit
Klammern oder als eigener Satz.
- Doppelte Doppelpunkte, wo beide Striche eines Paars zu Doppelpunkten wurden
("Globale Regeln: Schrift, Groessen, Abstaende: kommen aus HiveGrid").
Sieben Stellen in Doku und Oberflaeche, jetzt in Klammern.
- Pfade, denen ein Komma statt eines Doppelpunkts folgte.
- Ausgerichtete Kommentartabellen, in denen der Strich eine Spalte war.
Nicht angefasst: drei Geviertstriche, die keine Prosa sind, sondern
Tabellenplatzhalter fuer "kein Wert" (Trichter, Auftraege, Kunden). Dort ist
der Strich die Angabe selbst; ihn zu entfernen liesse leere Zellen zurueck.
tsc, lint, build, verify:carbon und verify:layout laufen sauber.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Zwei Aenderungen an der Ansprache.
"Guten Tag, [Vorname]" statt eines erfundenen Namens. Ein fester Name sieht in
einer Abnahme aus wie ein fest verdrahteter Wert, und irgendwann fragt jemand,
warum dort immer derselbe steht. Die Klammern sagen, was an der Stelle
eingesetzt wird; beim Einbau kommt der Wert aus der Sitzung.
Und die Anwendung duzt: "2 Punkte brauchen heute deine Aufmerksamkeit."
Vor der Aenderung geprueft, ob es weitere Siez-Formen gibt — es war genau
diese eine Stelle, einmal im View-Model und einmal in der Bausteingalerie.
Halb geduzt liest sich schlechter als durchgehend gesiezt, deshalb steht die
Ansprache jetzt als Regel in DESIGN-SYSTEM.md, zusammen mit dem Hinweis, dass
beim Einbau im Zweifel die Ansprache von HiveGrid Vorrang hat.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Rueckbau des letzten Commits, soweit er zu weit ging. Er hat alle
Diagrammzeilen gestreckt; richtig ist das nur dort, wo die Karten von Natur
aus aehnlich hoch sind.
Gemessen bei 1680 px, Hoehenunterschied innerhalb einer Zeile:
Trichter | Auslastung (Liste | Liste) 0 px / 0 px
Zahlungseingang | Bestand (Chart | Chart) 0 px / 0 px
Zahlungseingang | Gewerk (Chart | Liste) 147 px / 315 px
Vorgaenge Status | Gewerk (Chart | Liste) 190 px / 358 px
(volle Daten / duenne Daten)
Der Grund steckt in der Liste: Eine Balkenliste hat keine Mindesthoehe. Fuenf
Kategorien ergeben 280 px, eine einzige 112 px — daneben liegt ein
Zeitverlauf unveraendert bei 427 px, weil seine Diagrammflaeche fest ist.
Diese Zeile zu strecken heisst, eine Karte mit einem Balken auf 427 px
aufzublasen. Das ist schlimmer als die Luecke, die es vermeiden soll:
Weissraum auf der Seite liest sich als "hier ist gerade wenig", eine riesige
Karte mit einem Balken darin als Fehler.
items-start kehrt deshalb auf allen Zeilen zurueck, in denen ein Diagramm mit
fester Hoehe neben einer Liste steht. Gestreckt bleibt, wo beide Karten
dieselbe Bauart haben — Trichter neben Auslastung.
Das senkrechte Zentrieren im Kartenkoerper bleibt: Auf oben buendigen Zeilen
ist es wirkungslos, auf den gestreckten verteilt es den Ueberschuss oben und
unten statt ihn unten abzuladen. Das war die Verbesserung am Trichter.
Auf dem Dashboard bleibt die Zeile aus Zeitverlauf und Balkenliste gestreckt.
Derselbe Massstab, anderes Ergebnis: Dort gibt es keinen Filter, die Liste hat
immer ihre fuenf Gewerke, und es bleiben rund 90 px. Der Filter ist der
Unterschied, nicht die Kachel.
DESIGN-SYSTEM.md traegt jetzt die Regel mit den Messwerten statt der zu
weit gefassten Fassung von vorhin.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Aus dem Sparring: Bei duenner Datenlage riss die oben buendige Ausrichtung
Loecher in die Seite. Nachgemessen auf /analytics mit Zeitraum "heute" und
Gewerk "Heizung": "Umsatz nach Gewerk" 112 px neben "Zahlungseingang im
Zeitverlauf" 427 px — 315 px Seitenhintergrund dazwischen. Das liest sich
nicht als "wenig Daten", sondern als "etwas ist kaputt".
Zwei Aenderungen, beide klein:
- Der Kartenkoerper zentriert seinen Inhalt senkrecht. Der Ueberschuss geht
je zur Haelfte nach oben und unten, statt unten abgeladen zu werden. Eine
Stelle in ChartCard und eine in WidgetKachel — nicht in fuenf Diagrammen.
- items-start faellt auf den Zeilen, die ausschliesslich Diagrammkarten
tragen. Die Zeile mit den beiden Tabellen auf der Kundenseite bleibt oben
buendig: Eine Tabelle hat ein natuerliches Ende und eine eigene
Blaetterleiste, Strecken schiebt die nur nach unten.
Die Karten bleiben dynamisch — keine feste Hoehe, mehr Inhalt laesst die
Karte und mit ihr die Zeile weiter wachsen.
Die Leere verschwindet nicht, sie zieht aus dem Seitenhintergrund in die
Karte. Das ist der Unterschied zwischen einem Raster mit Luecken und einer
Karte, in der gerade wenig steht.
Nachgemessen nach der Aenderung: 427/427, 389/389 auf /analytics,
372/372 und 423/423 auf /dashboard. Dabei ist nebenbei die Leerflaeche unter
dem Vertriebstrichter verschwunden, die vorher auffiel.
In DESIGN-SYSTEM.md als Regel festgehalten.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Zwei Korrekturen aus dem Review.
1. Die Seitenleiste zeigte die komplette Software-Navigation nach. Falsch:
Kontakte, Leads, Pipelines, Postfach, Termine und Einstellungen stehen dort
bereits, der Prototyp verdoppelt sie nur. Jetzt stehen in der Leiste
ausschließlich unsere beiden Features — Dashboard (eigenes Feature, hier
nicht enthalten) und Analytics — plus die Bausteingalerie im sekundären
Bereich, die zum Prototyp und nicht zum Produkt gehört.
2. Die Schrift stimmte nicht. Die Software nutzt Instrument Sans, selbst
gehostet als variable Schrift. Der Prototyp lud Inter über next/font,
während ui/theme.css für sämtliche Subframe-Typo-Token bereits
'Instrument Sans' verlangte — die Schrift war aber nie geladen und fiel auf
die Systemschrift zurück. Ergebnis waren zwei verschiedene Schriften auf
einer Seite, keine davon die der Software.
Jetzt liegen dieselben woff2-Dateien unter public/fonts/, mit denselben
@font-face-Regeln und derselben Alias-Zuordnung für Komponenten, die noch
direkt auf Inter verweisen. next/font entfällt.
Der Layout-Prüfer lief nach dem Schriftwechsel erneut durch: andere Metrik,
andere Textbreiten — weiterhin keine Kollisionen über 6 Seiten × 7 Breiten.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Gemeldeter Fehler: In der Ringlegende klebten Bezeichnung und Wert aneinander
("Gestellt189,1 T€"). Ursache war eine eigene Regression — beim Beheben der
abgeschnittenen Legendennamen war das truncate entfallen, ohne Ersatz. Damit
schrumpft die Namensspalte durch min-w-0 + grow auf null Breite, und der Text
läuft sichtbar über seinen Kasten hinaus:
1280 px Kastenbreite 0 px, Text 43 px darüber hinaus
1440 px Kastenbreite 25 px, Text 18 px darüber hinaus
1600 px unauffällig
Genau deshalb war es auf den Screenshots nicht zu sehen: Der Fehler tritt nur in
bestimmten Fensterbreiten auf.
Neu: scripts/verify-layout.mjs + npm run verify:layout. Lädt alle sechs Seiten in
sieben Breiten (1024–1920) und misst jede Textzeile über Range.getClientRects.
Gemessen wird auf Textzeilen, nicht auf Elementkästen — sonst melden benachbarte
Tabellenzellen mit Innenabstand falsch positiv. Mindestabstand 8 px = Carbon
$spacing-03. Der Lauf fand 110 Fehler; alle behoben:
- Ringlegende: Container-Query statt fester Zweispaltigkeit. Legende sitzt rechts
vom Ring, wenn Platz ist, sonst darunter — Carbon: "positioned to the right of
the chart when space is plentiful". Namen brechen um statt überzulaufen.
- Auslastungs-Achse: Beschriftungsdichte staffelt sich über drei Container-Stufen,
vorher überlappten die Zahlen in schmalen Karten um bis zu 16 px.
- Handlungsbedarf und Kennzahl-Labels: break-words statt Überlauf.
- Kartentitel und -untertitel: break-words, weil Dateipfade keine Leerzeichen
zum Umbrechen haben.
Dokumentiert als DESIGN-SYSTEM.md §9 mit Begründung, warum das ein gemessener
Prüfer sein muss und keine Sichtprüfung.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
Recherche an der Quelle statt an der Dokumentation. Zwei Ergebnisse:
1. Carbon regelt Datenvisualisierung nur teilweise. Farben, Gitter, Achsen,
Tooltip und Tickanzahl sind verbindlich festgelegt — Paddings, Margins und
Dashboard-Raster dagegen NICHT. Die Carbon-Seiten zu Chart-Anatomie und
Dashboards tragen ausdrücklich den Hinweis "this guidance is a work in
progress" und enthalten keine Zahlenwerte. Unsere Abstandswerte stammen
deshalb aus der Carbon-Spacing-Skala und der Planung mit dem Branchenpartner,
nicht aus der Data-Viz-Norm. Das steht jetzt so in DESIGN-SYSTEM.md §0.
2. Eine echte Abweichung gefunden: Der Tooltip ist seit Carbon v11 hell
(--cds-layer-02 #ffffff auf --cds-text-primary #161616, abgesetzt allein
durch den Schatten). Unser Theme führte den dunklen v10-Stand (#393939) und
berief sich dabei auf das ausgelieferte Stylesheet — die Angabe war veraltet.
Korrigiert.
Neu:
- docs/carbon-referenz.json — kanonische Werte mit Quelle, Version und
Prüfdatum, gezogen aus @carbon/charts 1.23.0 styles.min.css und
configuration.ts. Bewusste Abweichungen (Balkenbreite 48 statt 16, feste
Kategoriefarben statt n-Serien-Paletten) sind dort begründet.
- scripts/verify-carbon.mjs + npm run verify:carbon — gleicht chartTheme.ts
gegen die Referenz ab und bricht bei Drift ab.
- docs/PRUEFFRAGEN.md — Prüffragen für die Gestaltungsabnahme mit
nachprüfbarem Ja/Nein, plus Leseliste (FT Visual Vocabulary, IBCS,
Cleveland & McGill, Few, Datawrapper Academy).
Die 14er-Palette wurde gegen die CSS-Variablen --cds-charts-14-1-* geprüft und
stimmt exakt; ebenso Gitter #e0e0e0, Achse #8d8d8d und Achsentext #525252.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen
SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung,
nicht der Produktivbetrieb.
Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten),
26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein
deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026).
Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner
(Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und
IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste
Abweichungen stehen in docs/HERKUNFT.md.
Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM,
KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in
HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
dejanandClaude Opus 5