# Abläufe und Zahlen — Diagramm-Baukasten
*Brand OS 2.4.0 · Stand 2026-10-19 · Pflege: Creative Strategy Studio*
Wie C3 Prozesse, Diagramme, Statistiken, Tabellen und Schaubilder zeigt. Gilt für Präsentationen (16:9) und Dokumente (A4) gleichermaßen. Statt Kästen untereinander gibt es vierzehn Muster mit einer gemeinsamen Formen- und Farbsprache.
- Bausteine: `design/c3-diagramme.css` (nach `design/c3.css` einbinden, alle Klassen mit Präfix `dg-`)
- Referenz mit jedem Muster in quer und hoch, inklusive Markup: `design/ablaeufe-und-zahlen.html` (online: https://os.c3brandos.com/design/ablaeufe-und-zahlen)
- Rendern: Browser bzw. Chromium (Playwright). Die Bausteine nutzen Container-Einheiten (`cqw`), Subgrid und `:has()`. **WeasyPrint kann das nicht**, A4-Seiten mit Diagrammen deshalb über Chromium rendern (siehe `pdf-render-guide.md`).
## Formensprache
Formen zeigen, was etwas ist. Sie kommen aus den Grundformen der Design DNA (`assets/grafiken/element_circle*.svg`, `element_square*.svg`), keine neue Zeichensprache.
| Form | Bedeutung |
|---|---|
| Kreis | ein Schritt |
| Raute (Quadrat auf der Spitze) | eine Entscheidung |
| **Gelber Punkt ohne Rand**, 1,2-mal so groß wie ein Schritt | das Ergebnis, ein Meilenstein, der aktuelle Stand. Wie der gelbe Punkt der Ein-Wort-Headline: ein Ablauf endet wie ein Satz. |
| Linie, 1,25 px, Schwarz 40 % | Abfolge, ohne Pfeil |
| Pfeil | nur, wo die Richtung offen ist (Schleifen, Rückwege, Bewegung im Schaubild) |
## Farben haben Aufgaben
Wie in `ui-system.md`. Farbe steht nie allein: Status, Ja und Nein stehen immer zusätzlich in Mono daneben. Wer schwarz-weiß druckt, liest den Ablauf trotzdem.
| Farbe | in Abläufen | in Zahlen |
|---|---|---|
| Türkis voll | erledigt, Ja-Ast, Ausgang aus der Schleife | Fokus, eigene Werte, mehr, Zuwachs |
| Türkis halb (Kreis halb gefüllt; Fläche Türkis 45 %) | läuft gerade, hier stehen wir | läuft |
| Koralle | bei Ihnen (der Kunde ist dran), Korrektur, Rückweg, Nein-Ast | weniger, unter Ziel, Achtung |
| Gelb | nur der Ergebnis-Punkt | nur ein Punkt: Ziel oder aktueller Stand |
| Offwhite mit schwarzem Rand | geplant, noch offen | — |
| Schwarz 30 % | — | Vergleich, alles außerhalb des Fokus |
- Phasenfarben als **Vollfläche** bleiben den Phasentrennern curious, clever, creative vorbehalten. In Abläufen tragen die Farben Status, keine Phasen.
- Türkis und Koralle sind auf Offwhite zu hell für Schrift (Kontrast 1,85 : 1 und 2,74 : 1) und für dünne Linien. Werte und Beschriftungen stehen schwarz neben der Farbe.
- Farbtest: Türkis und Koralle bleiben bei Rot-Grün-Schwäche unterscheidbar (Abstand 12,4, Ziel ab 8; normal 32,8).
- Abstufungen für Mengen (Heatmaps, Karten): Schwarz 30, 47, 66 und 100 %.
## Beschriftung: drei Rollen, ein Abstand
| Rolle | Schrift |
|---|---|
| Marker (`dg-nr`) | IBM Plex Mono, versal. Nummer, Zeit, Rolle, Status, kurz. Quelle (`dg-quelle`) und Legende (`dg-dleg`) in Funnel Sans. In den Bausteinen 2 pt kleiner als die Caption-Größe aus `typografie-hierarchie.md` |
| Name (`dg-ht`) | Funnel Display 600, Subhead-Größe, ein bis drei Wörter, höchstens zwei Zeilen |
| Erklärung (`dg-tx`) | Funnel Sans 300, 85 % der Body-Größe, ein Satz, höchstens drei Zeilen |
- Immer in dieser Reihenfolge, mit demselben Zeilenschritt (`dg-stk`). Keine Einzelabstände.
- Nebeneinander stehende Schritte teilen sich ein Zeilenraster (Subgrid): Namen, Erklärungen und Marker stehen auf einer Höhe, die längste Spalte bestimmt die Zeile.
- Beschriftungen hängen an der Kante, die von der Linie weg zeigt, und wachsen von ihr weg.
- Vor der Übergabe jede Fläche rendern und auf Überlagerungen prüfen: Text über Text, Text über Form, Text über Linie, Text zu breit für seine Spalte, Höhensprünge in Zeilen. Null Treffer.
## Die Muster
| | Muster | Für | Nicht für |
|---|---|---|---|
| A | **Gleis.** | geradlinige Abläufe mit drei bis sieben Schritten | Entscheidungen, Wiederholungen |
| B | **Schichten.** | Schritte, die aufeinander aufbauen. Quer als Treppe, hoch als Stapel (von unten gelesen). Linien nur als Trenner: quer senkrecht, hoch waagerecht | Schritte, die parallel laufen könnten |
| C | **Schleife.** | Korrekturen, Freigaben, Sprints, Reportings. Rückweg koralle, Ausgang türkis zum Ergebnis, in der Mitte steht, was die Runde begrenzt | einmalige Abläufe |
| D | **Weiche.** | Wenn-dann. Raute für die Frage, Ja-Ast türkis, Nein-Ast koralle, beide in Mono beschriftet | mehr als zwei Weichen pro Fläche |
| E | **Bahnen.** | mehrere Beteiligte mit Übergaben. Eine Bahn pro Rolle, hoch als Spalten | Abläufe, in denen eine Person alles macht |
| F | **Zeitplan.** | Wochen, Termine, Meilensteine. Balken nach Status, Ergebnisse in eigener Zeile, Stand als schwarze Haarlinie. Hoch bleibt der Plan quer | Abläufe ohne verbindliche Zeiten |
| G | **Zoom.** | zu groß für eine Seite: erst das Gleis, dann eine Seite pro Etappe mit Mini-Gleis | kurze Abläufe |
| H | **Erzählt.** | Abläufe im Fließtext: große Ziffern, Ein-Wort-Headline mit gelbem Punkt, Dauer und Status in Mono | Abläufe, die man auf einen Blick erfassen muss |
| I | **Kennzahl.** | eine Zahl ist die Aussage. Zahl in Funnel Display, darunter eine Grafik, die mitzählt | Vergleiche vieler Werte |
| J | **Balken.** | Vergleiche. Grauer Umriss = das Ganze, Füllung = der Anteil; ein Balken türkis. Abweichung: türkis mehr, koralle weniger, Mitte als Haarlinie | Verläufe über Zeit |
| K | **Verlauf.** | Entwicklung über Zeit als Fläche: Vorjahr grau, Zuwachs türkis obendrauf, Rückgang koralle | zwei Einheiten in einem Bild |
| L | **Anteile.** | 100 Quadrate je Ganzes, gefüllt ist der Teil, grauer Umriss der Rest | mehr als fünf Teile |
| M | **Tabelle.** | genaue Werte. Kopf in Mono, nur waagerechte Haarlinien, Zahlen rechtsbündig mit gleich breiten Ziffern, Mini-Balken als Umriss mit Füllung, Status mit Punkt und Wort | eine Aussage, die man sehen soll |
| N | **Schaubild.** | Positionierungen, Portfolios. Achsen als Haarlinie durch die Mitte, Pole in Mono, andere als offene Kreise, die eigene Marke türkis, das Ziel als gelber Punkt | exakte Messwerte |
Mischformen sind erlaubt (ein Zeitplan mit Bahnen, ein Gleis mit Weiche). Dann gelten die Regeln beider Muster.
## Flächen: das Layout teilt mit
Bisher steht alles auf Offwhite. Für Abläufe darf die Seite selbst teilen:
- **Farbspalte** (quer): Titel links auf Koralle oder Türkis, Ablauf rechts auf Offwhite.
- **Kopfband** (hoch): Titel und Einleitung auf einer Farbfläche oben.
- **Farbige Bahn/Spalte**: die Bahn des Kunden in Koralle 28 % („Wo Koralle ist, sind Sie dran“).
- **Status als Fläche**: jede Spalte trägt ihren Stand als Hintergrund.
- **Register** (hoch, mehrseitig): Etappen als Reiter am rechten Rand.
Regeln: Fläche teilt, Linie verbindet. Höchstens eine Farbfläche pro Seite, angeschnitten bis an den Rand. Türkis und Koralle als Fläche, Gelb nie. Text auf Fläche immer schwarz.
## Regeln
1. **Eine Leserichtung.** Quer von links nach rechts, hoch von oben nach unten. Ausnahme Schichten, dann sagen es die Nummern.
2. **Höchstens sieben Stationen pro Fläche.** Bei mehr: Zoom.
3. **Erst die Aussage.** Die Headline sagt, was der Ablauf oder die Zahl bedeutet („Jede vierte Anfrage kommt über Empfehlung“, nicht „Anfragen nach Kanal“).
4. **Fokus statt bunt.** Eine Reihe in Farbe, der Rest in Schwarz 30 %. Höchstens zwei Farben pro Diagramm, Gelb nur als ein Punkt.
5. **Keine Kästen um Schritte, keine Punkte ohne Aufgabe.** Linie und Form tragen die Struktur, Text steht frei daneben.
6. **Umriss und Füllung.** Jedes Verhältnis zeigt das Ganze als grauen Umriss und den Teil als Füllung. Kein 3D, keine Torten, eine Y-Achse.
7. **Ecken 0, Lücke statt Rahmen.** Segmente trennt eine 2 px breite Offwhite-Lücke.
8. **Zahlen richtig setzen.** Große Kennzahlen in Funnel Display, Tabellenzahlen rechtsbündig mit gleich breiten Ziffern, Quelle in Funnel Sans darunter (`dg-quelle`).
## Einbinden
```html
…
…
```
Eine A4-Seite ist `
`, eine Folie `
`. Die Formen kommen als Symbole; dieses Sprite einmal pro Datei einbetten (Geometrie aus `element_circle_outline.svg` und `element_square_outline.svg`):
```html
```
Verwendung: `` — `dg-ko` geplant, `dg-kt` erledigt, `dg-kh` läuft, `dg-kk` bei Ihnen, `dg-q` Entscheidung, `dg-e` Ergebnis. Das Markup jedes Musters steht in `design/ablaeufe-und-zahlen.html`.