Interne Vorschau · Werkbank-Bausteine (Issue #119)

Sechs portierte Bausteine, einmal nebeneinander

Lebende Referenz für die Folgevorgänge (Z2-S1, Z2-F1, Z2-P1, Z2-R1, Z2-B1) — nicht verlinkt, kein Produktinhalt. Bausteine:src/styles/global.css (Kommentarblock „Werkbank"), WerkbankWordmark.astro.

1 · Papier-Band (.wb-band, ohne Modifier) · 2 · Display-Skala (.wb-display-xl)

Deine Stunden erfasst. Dein Lohn im Griff.

Kurze Sätze, die Headline ist das Bild — clamp bis ~6rem, Bricolage 800. Marker-Regel gilt unverändert: ein Wort, nur im H1.

3 · Tinte-Band (.wb-band--tinte) — .kp-card, Links, Mono-Labels bleiben lesbar

Ohne Token-Overrides wäre das hier unlesbar

Titel, Fließtext, Mono-Label und Link der Karte unten nutzen dieselben Klassen wie überall sonst auf der Seite — nur die Fläche drumherum ist die Tinte-Fläche.

Mono-Label · Wochenzettel

Kartentitel bleibt „text-kp-tinte"

Fließtext, unverändert text-kp-tinte-sekundaer. Lesbar, weil .kp-card im Tinte-Band eine eigene, hellere Kartenfläche bekommt (lokaler Token-Override, kein Extra-CSS an dieser Stelle).

Ein ganz normaler Link →
Kostenlos testen
4 · UI-Panel (.wb-panel) · Kartentönung (.kp-card--gruen/--amber/--blau) · Chips (.kp-chip)
Wochenzettel

App-Ausschnitt in getöntem Rahmen, Mono-Beschriftungszeile oben — wie ein Beleg auf der Werkbank. Trägt data-wb-panel fürs Messnetz, löst hier selbst noch nichts aus.

Erfasst

Kartentönung Grün

Offen

Kartentönung Amber

Hinweis

Kartentönung Blau

Mint statt Gelb— Abweichung von der Kassenplus-Fassung, siehe CLAUDE.md
5 · Akzent-Band (.wb-band--akzent) — hier Mint-hell, genau eins pro Seite

Der eine Handlungsmoment der Seite

Kostenlos testen
6 · Riesen-Wordmark (WerkbankWordmark.astro)