# Post 5 · Projektmanagement

Vierter Beitrag der Produktreihe, Termin **Fr 21.08.** laut Redaktionsplan,
Stichwort dort: „Der Überblick, den jeder Betrieb vermisst."

Hell, Theme `modern`, Punktgrund, Text zentriert — dieselbe Anlage wie Post 4,
damit die Reihe als Reihe erkennbar bleibt. Datei `post5.html`, Stand in
`state/post5.json`, erreichbar über das Projektmenü jeder Seite und über
`uebersicht.html`.

**Fünf Slides, und jede zeigt einen anderen Bildschirm.** Das Demo-Projekt hat
für die Pipeline vier davon — Schablone, Board, Liste, Detail — und die tragen
zusammen mehr als ein einzelner. Die fünfte Slide ist die Karte aus der Nähe.

---

## 1. Die fünf Slides

| # | Tag | Überschrift | Screen | Was zu sehen ist |
|---|---|---|---|---|
| 1 | Projektmanagement | Von der Anfrage **bis zur Abnahme.** | 4A | Das Board: drei Phasen mit Anzahl, Summe und Karten |
| 2 | Die Karte | Alles Wichtige **auf einer Karte.** | 4A | Eine Karte groß |
| 3 | Zwei Pipelines | Vom Verkauf **in die Abwicklung.** | 4B | Ein Projekt in „Auftragsabwicklung SHK", mit dem Knopf für den Pipelinewechsel |
| 4 | Die Liste | Board oder **Liste.** | 4C | Dieselben Projekte als Tabelle, mit gesperrten Auftragswerten |
| 5 | Die Schablone | Deine Felder, **deine Regeln.** | 3 | Der Feldeditor, offen auf „Aufmaß erledigt" |

**Slide 3 ist die Pointe.** Das Demo hat nicht eine Pipeline, sondern zwei:
`Vertrieb: Anlagen-Verkauf` und `Auftragsabwicklung SHK`. Ein Projekt liegt in
einer davon und wechselt über den Knopf `Pipeline` in die andere. Das ist der
Unterschied zwischen Vertriebs- und Abwicklungs-Projektmanagement, und er ist
keine Auslegung: die beiden Namen stehen in
`PipelineBoardInteractive.tsx` und `S02PipelinesDetailansicht.tsx`.

**Slide 5 erklärt, warum das eine Software sein kann.** Die Felder hängen an
der Pipeline, nicht am Programm. Siebzehn Feldtypen, dazu drei Stufen unter
`Pflicht ab Board-Spalte`. Ein SHK-Betrieb legt sich „Aufmaß erledigt" an,
ein anderer etwas anderes.

Slide 1 trägt das Board, weil sie im Profilraster eine Kachel von rund 150 px
ist. Dort ist kein Wort lesbar; was ankommt, sind Säulen aus Kärtchen.

Sie trägt **keinen Fließtext**, wie die Titelbilder von Post 3 und Post 4.
„Jedes Projekt im Griff" stand zuerst als Überschrift da: zwei Zeilen von
dreizehn und neun Zeichen liegen als schmaler Block in einer breiten Fläche,
und die Slide wirkte dadurch leer. Jetzt trägt sie die zweite Hälfte derselben
Überschrift aus `lib/produkt-daten.ts`. Die Lücke über dem Board schließt
`visBottom: 215` statt eines Satzes.

---

## 2. Die Bildunterschrift

```
Die häufigste Frage im Handwerksbüro ist keine fachliche. Sie lautet: wo steht das eigentlich gerade?

In HiveGrid steht jedes Projekt in genau einer Phase. Auf der Karte siehst du Gewerk, Auftragswert, Priorität, wer zuständig ist und was als Nächstes ansteht, ohne sie zu öffnen.

Sobald der Auftrag steht, wechselt das Projekt die Pipeline. Aus dem Verkauf wird die Abwicklung, mit denselben Daten. Verkauft ist nicht fertig.

Ob Board oder Liste, entscheidest du. Welche Felder eine Pipeline trägt, ebenfalls: ein SHK-Betrieb legt sich ein Häkchen fürs Aufmaß an, ein anderer Betrieb etwas anderes.

Kein Suchen, kein Nachfragen, kein Zettelchaos.

#handwerk #shk #handwerksbetrieb #digitalisierungimhandwerk #projektmanagement #auftragsabwicklung #vertrieb #hivegrid
```

| Vorgabe | Ist |
|---|---|
| Haken in den ersten 125 Zeichen | erster Absatz, 101 Zeichen |
| 300 bis 800 Zeichen | 651 |
| 5 bis 10 Hashtags, unten abgesetzt | 8 |
| Suchwörter zusätzlich im Fließtext | Handwerk, Projekt, Phase, Auftrag, Vertrieb, Abwicklung, Pipeline, Aufmaß |

„Kein Suchen, kein Nachfragen, kein Zettelchaos" steht wörtlich so schon im
Fließtext der Projektmanagement-Slide von Post 1. Dieselbe Reihe darf denselben
Satz zweimal benutzen.

---

## 3. Woher die Angaben kommen

Quelle ist durchgehend das Pitch-Paket
(*fertig bombo · Kundentermin 30.07.2026*), Ordner `hivegrid-pitch`.

| Was | Woher |
|---|---|
| Die zehn Phasennamen und ihre Reihenfolge | `PipelineBoardInteractive.tsx`, `STAGES` |
| Board / Liste | die `ToggleGroup` in der Kopfzeile, sie kennt genau diese zwei |
| „Vertrieb: Anlagen-Verkauf" | Seitentitel desselben Screens |
| Alle Projekte auf Slide 1 und 2 | `INITIAL_PROJECTS`, wörtlich |
| Anzahl und Summe je Spalte | aus denselben 41 Datensätzen gezählt und addiert |
| Gewerk zu Farbton | `CATEGORY_TONES` |
| Hoch / Mittel / Niedrig, Balkenzahl, Farbrollen | `ProjectCard.tsx`, `PriorityBadge` und `PriorityIndicator` |
| Aufbau der Karte, Umbruch auf zwei Zeilen, getönter Fuß | `ProjectCardRoot`, Klasse für Klasse |
| Farbe des Kürzels | `avatarColor` je Projekt, aufgelöst über `Avatar.tsx` |
| Projekt, Pipeline, Nummer und Rubriken auf Slide 3 | `S02PipelinesDetailansicht.tsx` |
| Zeilen und Spaltenköpfe auf Slide 4 | `S03ProjektListe.tsx` |
| Feldtypen und `Pflicht ab Board-Spalte` auf Slide 5 | `S05DetailSchabloneEditMode.tsx` |
| Plättchen-, Rand- und Textfarben | `ui/theme.css` |
| Alle Symbole | `@subframe/core`, Pfade aus dem Paket kopiert |
| „Jedes Projekt im Griff" | Überschrift in `lib/produkt-daten.ts` der Website |

---

## 4. Wo bewusst abgewichen wird

**Slide 1 zeigt nur das Board selbst.** Seitentitel, der Umschalter
Board/Liste und die Filterleiste standen einmal darüber und sind alle drei
wieder entfallen: ein Titelbild soll in einem Blick sagen, worum es geht, und
was im Profilraster ankommt, sind Säulen aus Kärtchen. Drei Reihen
Bedienoberfläche darüber liest niemand. Wie die Pipeline heißt, sagt Slide 3;
dass es auch eine Liste gibt, sagt Slide 4.

**Zwei bis drei Karten je Spalte, der Kopf zählt vier.** Außen zwei, in der
Mitte drei. So ist es im Werkzeug auch: eine Spalte zeigt, was aufs
Bild passt, der Rest kommt beim Scrollen. Gleich hohe Säulen sahen aus wie eine
Tabelle, ungleiche sehen aus wie ein Board, auf dem gearbeitet wird.



**Slide 4 zeigt vier von neun Tabellenspalten und sieben von elf Zeilen.** Die
Tabelle hat Projekt-Nr., Projektname, Board, Spalte, Auftragswert,
Kunde / Kontaktrolle, Termin / Hinweis, Tags und Sachbearbeiter. Neun
nebeneinander wären auf 1080 px unter zehn Pixel Schrift.

Die Spalte Sachbearbeiter ist zuletzt noch entfallen, damit
„Auftragswert gesperrt" ungekürzt hineinpasst. Der Wortlaut ist der Grund,
warum diese Spalte überhaupt auf der Slide steht — ihn auf „gesperrt" zu
stutzen wäre der bequeme Weg gewesen und kein Zitat mehr. Weggelassen ist nur
Vorhandenes, dazugedichtet nichts.

**Slide 3 stellt die Rubriken untereinander, das Werkzeug stellt sie
nebeneinander.** Hochkant ist untereinander lesbar, die Reihenfolge bleibt.

**Zwei Rubriken fehlen auf Slide 3.** `PDS-INTEGRATION`, weil der Beitrag sich
an Betriebe allgemein richtet und nicht an die, die zufällig dieses eine
Branchenprogramm fahren — dieselbe Entscheidung wie bei Post 4. Und
`ADRESSDATEN · TEST A (ZUSATZADRESSEN AN)`, weil das ein Arbeitstitel aus der
Entwicklung ist und kein Bildschirmtext.

**Die Karte ist 320 breit wie im Original (`w-80`), der Betrag steht auf 26
statt größer.** Bei „Niedrig" ist das Prioritätsplättchen breiter als bei
„Hoch", und der Betrag stieß dagegen.

**Die Maßstäbe sind aufeinander abgestimmt.** Slide 1, 3, 4 und 5 zeigen ihre
Schrift zwischen 16 und 23 px; nur Slide 2 ist als Nahaufnahme gedacht und
liegt bei 47 px. Vorher stand sie auf 59 bis 73 px — eine einzelne Karte wirkte
damit größer als das ganze Board davor, und die Reihe kippte. Wer an einer
Zeichnung dreht, sollte die Tabelle in §6 danach nachrechnen.

---

## 5. Eine Richtigstellung

**Ein früherer Stand dieses Beitrags behauptete, die Detailansicht sei nur ein
Entwurfs-PNG.** Das war falsch. Geprüft worden waren die Beschriftungen des
Bildes `07_Screen-4b_Karten-Detail.png` — `KUNDENDATEN`, `OBJEKTDATEN`,
`AUFTRAG & FÖRDERUNG`, `Wahrscheinlichkeit`, `Heizlast`, `Lead-Quelle` —, und
die kommen im Code tatsächlich nirgends vor. Daraus wurde der falsche Schluss
gezogen, es gebe den Bildschirm nicht.

Es gibt ihn: `app/(screens)/4b/page.tsx` rendert
`S02PipelinesDetailansicht.tsx`, 3150 Zeilen, mit den Rubriken `GRUNDDATEN`,
`PLANUNG & VERANTWORTLICHE`, `PROJEKTKONTAKTDATEN`, `KONTAKTE`, `FIRMENDATEN`,
`ANSPRECHPARTNER`, `PROJEKTADRESSE` und `ZUSATZADRESSEN`. Das PNG ist ein
älterer Entwurf desselben Bildschirms, nicht sein Beleg.

**Die Lehre ist nicht „Screenshots lügen", sondern: die Abwesenheit einer
Zeichenkette beweist die Abwesenheit eines Bildschirms nicht.** Für die zweite
Frage muss man die Routen ansehen, nicht die Wörter.

---

## 6. Stand der Dinge

| | |
|---|---|
| Slides | 5 |
| Format | 1080 × 1350, Ausgabe zweifach: 2160 × 2700 |
| Luft zwischen Text und Zeichnung | 224 / 239 / 123 / 187 / 133 px (Grenze 40) |
| Zeichnung ragt über die Seite | nein, alle innerhalb der 92-px-Schutzzone |
| Stylesheet vollständig | 214 Regeln, `[data-edit]` vorhanden |
| Konsole | keine Fehler |
| Ausgabeweg | geprüft, `01-board-hell.png` bis `05-schablone-hell.png` |

Geprüft wird mit den Hilfsskripten aus dem Sitzungsordner: `flaeche.mjs` misst
über `getBBox()` die tatsächlich gezeichnete Fläche je Slide, `kopf5.mjs` die
Breite jeder Überschriftzeile (sie ist `nowrap`, eine zu lange Zeile bricht
nicht um, sondern läuft über den Rand), `css5.mjs` zählt die Regeln im
Stylesheet und liest die Konsole mit, `export.mjs` fährt den echten Ausgabeweg
und fängt `/save` ab, damit beim Prüfen nichts in *Downloads* landet.

---

## 7. Zwei Fallen aus diesem Bau

**Ein Screenshot ist keine Quelle.** Die Karte war zuerst aus `pipelines.png`
abgemalt. Drei Sachen lagen daneben, und keine davon war im Bild zu erkennen:
Priorität, Balken und Kürzel stehen im Original als Gruppe rechts und hängen
über die Kante des Fußes, im Fuß steht über dem Termin die Zeitspanne des
Projekts, und die Balken sitzen in einem eigenen umrandeten Kasten. Erst
`ProjectCard.tsx` hat das gezeigt.

**Ein Prüfskript hat den Projektstand verstellt.** `export.mjs` schaltet die
Slides mit der Pfeiltaste weiter. Die Seite startet aber im Bearbeiten-Modus
(`editMode = "an"`), und dort verschieben Pfeiltasten das gewählte Element,
statt die Slide zu wechseln. Jeder Prüflauf hat die Zeichnungen also ein Stück
gerückt und das in `state/post5.json` geschrieben: am Ende stand dort
`vis: {dx: 3, dy: -69}` auf Slide 1 und auf Slide 2 sogar ein `size: 762`, das
die im Code eingestellten 720 überschrieb.

Gemerkt habe ich es an Messwerten, die im Code nirgends standen — eine Slide
meldete 89 px Rand rechts bei eingestellten 92, eine andere 177 px unten bei
eingestellten 120. **Zahlen, die man sich nicht erklären kann, sind ein Befund
und keine Messungenauigkeit.** `export.mjs` verlässt jetzt vor dem Blättern den
Bearbeiten-Modus und schreibt den Stand am Ende zurück, falls er sich doch
verändert hat.

**SVG bricht keinen Text um, und Breite schätzen geht schief.** Die
Plättchenbreite war anfangs aus der Zeichenzahl mal 0,52 em gerechnet. Das
stimmt für „Heizung" und geht bei „Wärmepumpe" daneben; das Wort stand über dem
Rand seines Plättchens. Gemessen wird jetzt mit einem Canvas in derselben
Schrift, die das SVG später zeichnet. Aus derselben Messung kommt der
Zeilenumbruch der Titel, der im Original `line-clamp-2` heißt.