tickte-system/docs/superpowers/specs/2026-10-04-weisses-design-design.md

WOMS „Weißes Design“ – Konzept

Stand 2026-10-04. Freigegeben im Gespräch:

• Prototyp angesehen, Akzentfarbe „Schwarz passt“.
• Ticket öffnet als eigene Seite.
• Paketablauf und alle Standardentscheidungen mit „ja passt“.

Danach gegen den Code geprüft: 4 Prüfer, Gegenprüfung jedes Befunds, 66 bestätigte Befunde eingearbeitet.

Grundlage:

• Klick-Prototyp im Repo WEBklar/ticketsystem-design, Vorschau https://ticketsystem-design.project.webklar.com mit Mitarbeiter-Login. Kopie unter /root/reports/ticketsystem-design-2026-10-04/quelle/.
• Bestandsaufnahme aller 104 Quelldateien in 2026-10-04-weisses-design-umbaukarte.md (gleicher Ordner). Bei Widersprüchen gilt dieses Dokument.

Ziel

Das ganze Ticketsystem (ticket.webklar.com) bekommt ein neues Aussehen:

• steriles Weiß, sehr minimalistisch,
• kaum Rahmen, kaum Icons,
• angelehnt an das Stripe-Dashboard und trotzdem übersichtlich.

Das dunkle Design entfällt vollständig. Es gibt keinen Umschalter.

Der Umbau ist rein visuell, mit zwei Ausnahmen:

• die in „Bewusste Änderungen am Verhalten“ genannten Punkte,
• vor allem: Ein Ticket öffnet als eigene Seite mit eigenem Link (/tickets/<Nummer>), statt in der Liste aufzuklappen.

Erfolg heißt:

• Jede Seite folgt den Gestaltungsregeln.
• Keine heutige Funktion geht verloren, außer den ausdrücklich genannten.
• Alle Tests sind grün.
• Jedes Paket geht einzeln live.
• Das jüngste Paket lässt sich per Revert zurücknehmen.

Nicht im Umfang:

• Dark Mode, neue Funktionen
• Änderungen am Datenmodell, an Rechten oder am Server
• das Kundenportal, auch nicht dessen Chat-Composer
• Terminplaner TP2
• flächige Rechtschreibkorrekturen (ae/ue) in Bestandstexten

Gestaltungsregeln

1. Weiß überall.

   • Seite, Menü und Dialoge haben #ffffff.
   • Es gibt keine Verläufe, Leuchteffekte, Glas-Effekte oder Hintergrundanimationen.
   • Einzige Ausnahme sind Bildansicht und Kamera des fremden Chat-Composers. Sie bleiben dunkel, weil sie Medienbetrachter sind.

2. Kaum Rahmen.

   • Struktur entsteht durch Weißraum, Schriftgrößen und einzelne 1-px-Haarlinien #ebeef1.
   • Haarlinien stehen zwischen Tabellen- und Listenzeilen, unter Reitern, rechts neben dem Menü, zwischen Schlüsselwerten (.fact) und zwischen den Tagesspalten im Planboard.
   • Karten oder Kästen um Inhalte gibt es nicht.
   • Eingabefelder und Zweitknöpfe tragen statt Rahmen einen feinen Ring-Schatten.

3. Kaum Icons.

   • Menü, Knöpfe, Überschriften und Badges tragen keine Icons.
   • Handelnde Zeichen werden als Schriftzeichen gesetzt, nicht als Icon-Komponente: Schließen „ד, Pfeile „← →“, Sortierung „↑ ↓“.
   • Am Ende fliegen react-icons und @tabler/icons-react aus package.json.

4. Eine Akzentfarbe: Schwarz #111111.

   • Sparsam eingesetzt: Primärknöpfe, aktiver Reiter, aktiver Menüpunkt, heutige Datumspille im Planboard.
   • Pro Seitenkopf höchstens ein schwarzer Knopf.
   • Links sind am feinen Unterstrich erkennbar, nicht an der Farbe.

5. Statusfarben sind leicht getönte Pillen ohne Rahmen: Radius 4 px, Höhe 20 px, Schrift 12 px/500.

   Ton	Hintergrund	Schrift	Ticketstatus (gespeicherte Werte)
   grau	#ebeef1	#414552	Offen (Open), leer oder unbekannt
   blau	#e0f2fe	#075985	In Arbeit (Occupied, Assigned, Added Info, In Kontakt)
   orange	#fcedb9	#a82c00	Wartet auf Kunde (Awaiting, Halted)
   violett	#efeafe	#5b21b6	Prüfung (In Test)
   grün	#d7f7c2	#006908	Erledigt (Closed, Zugesagt)
   plain	–	#5e6678	Storniert (Cancelled, Aborted, Abgesagt)
   rot	#ffe7f2	#b3093c	kein Status: Badge „Dringend“

6. Schrift.

   • Systemschrift -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Lato und src/assets/fonts entfallen.
   • Größen: h1 28/34 700 (Handy 24/30), Abschnitt-h2 16/24 600, Dialogtitel 18/26 600, Text 14/20, klein 13, sehr klein 12/16, Kennzahl 22/30 600.
   • Gewicht 800 entfällt. Großbuchstaben mit Sperrung gibt es nur noch für die Wochentage im Planboard.
   • Zahlen und Beträge nutzen tabular-nums.

7. Breakpoints der WOMS-Seiten: 1100 px und 860 px.

   • Unter 1100 px werden Nebenspalten ausgeblendet (.hide-md).
   • Unter 860 px:
     • Das Menü wird zur Schublade mit Menü-Knopf.
     • Seitenköpfe stapeln sich.
     • Tabellen zeigen nur Kernspalten (.hide-sm).
     • Dialoge erscheinen als Bottom-Sheet.
     • Der Chat wechselt zwischen Liste und Verlauf (heute 720 px).
   • Ausgenommen:
     • die Container-Queries der Finanztabellen (560/640/860)
     • die Breakpoints des fremden Chat-Composers (640/880)

8. Lesbarkeit.

   • Text #1a1f36, Nebentext #5e6678 (5,8:1).
   • Tertiärtext #8a93a3 (3,1:1) nur für Nicht-Essenzielles, nämlich Nummern, „–“ und leere Zustände. Inhalte und Status nutzen ihn nie.
   • Fehlerrot #c0123c.
   • Fokus ist immer sichtbar:
     • Knöpfe und Links: 2 px durchgezogen #111111 mit 2 px Abstand.
     • Felder: 1 px #111111 plus Ring rgba(17,17,17,.14).
   • Deaktiviert: Deckkraft .55, Cursor not-allowed. Schreibgeschützte Felder bekommen den Hintergrund #f8f9fb.

Design-Tokens

Die Tokens stehen in :root in src/styles/global.css. Quelle ist der Prototyp mit festem Akzent, ohne html[data-accent] und ohne Prototyp-Leiste.

:root {
  --bg: #ffffff; --bg-hover: #f6f8fa; --bg-subtle: #f8f9fb;
  --text: #1a1f36; --text-2: #5e6678; --text-3: #8a93a3;
  --line: #ebeef1; --line-strong: #d8dde3;
  --accent: #111111; --accent-hover: #2b2b2b; --accent-ink: #111111;
  --accent-soft: rgba(17,17,17,.06); --accent-ring: rgba(17,17,17,.14);
  --grey-bg: #ebeef1; --grey-fg: #414552; --blue-bg: #e0f2fe; --blue-fg: #075985;
  --orange-bg: #fcedb9; --orange-fg: #a82c00; --violet-bg: #efeafe; --violet-fg: #5b21b6;
  --green-bg: #d7f7c2; --green-fg: #006908; --red-bg: #ffe7f2; --red-fg: #b3093c;
  --danger: #c0123c; --danger-ring: rgba(192,18,60,.18);
  --radius: 6px; --radius-lg: 12px;
  --ring: 0 0 0 1px rgba(60,66,87,.16), 0 1px 1px rgba(0,0,0,.06);
  --shadow-btn: 0 1px 1px rgba(0,0,0,.12), 0 2px 5px rgba(60,66,87,.08);
  --shadow-pop: 0 0 0 1px rgba(60,66,87,.06), 0 12px 32px rgba(26,31,54,.14), 0 2px 6px rgba(26,31,54,.06);
  --overlay: rgba(26,31,54,.32); --scrim: rgba(26,31,54,.24);
  --nav-dot: #e5a000;
  --appt-akquise: #fdf4e3; --appt-akquise-hover: #fbeccd; --appt-hover: #eef1f4;
  --sidebar-w: 232px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { color-scheme: light; }

Alte Token-Namen bleiben bis P10 als Aliase. Fremd-CSS und JSX benutzen sie noch, so wird Bestandscode sofort weiß.

Alter Name	Neuer Wert
--surface-1, --surface-3, --surface, --dark-bg, --dark-card-bg	--bg
--surface-2, --surface-hover	--bg-hover
--border, --gray-700, --admin-line	--line
--border-strong, --admin-line-strong	--line-strong
--border-accent	--accent-ring
--text-muted, --text-faint, --gray-800	--text-2 (Altcode setzt --text-faint auch für Inhalte ein)
--dark-text, --gray-900	--text
--accent-2, --green-secondary	--accent-hover
--green-primary	--accent
--info	--blue-fg
--warn	--orange-fg
--ok	--green-fg
--r-sm	--radius
--r-md, --r-lg	--radius-lg
--r-pill	4px
--shadow-1	none
--shadow-2	--shadow-btn
--shadow-3	--shadow-pop
--sp-1…6	bleiben unverändert
--sidebar-w-collapsed	entfällt

Diagrammfarben. Canvas kann kein var() lesen. Deshalb stehen die Farben der Diagramme (uPlot) als Konstanten in der neuen Datei src/components/serverpuls/chartColors.js. Sie wird schon in P1 angelegt und von Chart.jsx und ServerpulsPage genutzt.

Element	Farbe
Linie	#111111
Füllung	rgba(17,17,17,.06)
Spitze	#8a93a3, gestrichelt
Achsen	#5e6678
Raster	#ebeef1, nur horizontal
Ticks	#d8dde3

Bausteine

Die Klassennamen folgen dem Prototyp (styles.css). Wo eine Komponente existiert, behält sie ihre Schnittstelle, außer wo unten anders vermerkt. Es ändern sich Markup und Klassen.

Baustein	Umsetzung
App-Gerüst	.shell mit Menü <aside class="sidebar"> (fest, 232 px) und .main. In .main liegen .mobile-bar und <main id="inhalt"> mit den Routen, ohne eigene Klasse .page. Jede Seite behält ihre Wurzel mit Klasse page, die den Prototyp-Look bekommt (max. 1160 px, Abstand 36/48/80). ProjectsPage wechselt in P1 von main-content auf page. AdminPage wechselt in P1 von <main className="page admin-page"> auf <div className="page admin-page">, die maximale Breite 1480 px von .admin-page bleibt. Gescrollt wird das Dokument, ein innerer Scroll-Container entfällt. Der Footer entfällt, sein Text steht künftig im Login-Fuß. Unter 860 px ist das Menü eine Schublade mit .scrim. Sie schließt bei Klick daneben, bei Esc (Listener nur aktiv, solange sie offen ist) und bei Wechsel des Pfads. Die Seite springt nur bei Wechsel von location.pathname nach oben, nie bei Änderungen am Suchteil der URL.
Menü	Reine Textliste .nav-item mit Unterpunkten .sub und Zählern .nav-count. Chat-Ungelesene bekommen .hot (neues Feld hot am Chat-Eintrag in navLinks.js). „Leads“ erscheint grau mit „pausiert“. Serverpuls-Punkt: .nav-dot gelb bei medium, .nav-dot.critical rot bei critical. data-testid="sp-nav-dot", Titel, 5-Minuten-Abfrage und useSidebarCounts bleiben. Fuß .sidebar-foot: Name (gekürzt mit Ellipsis) und „Abmelden“. Das Einklappen entfällt samt lib/sidebar.js und Test. Reihenfolge, Texte und Ziele in navLinks.js bleiben.
Logo	Neue components/Logo.jsx mit dem SVG-Zeichen aus dem Prototyp, 24 px im Menü und in der Mobil-Leiste, 40 px im Login. Dazu public/favicon.svg und <link rel="icon"> in index.html. <title> bleibt.
Seitenkopf	PageHeader rendert .page-head mit h1, .sub und .actions. Neue optionale Props eyebrow und crumb. Brotkrumen .crumb, z. B. „Kunden / Name“.
Abschnitt	Card rendert <section> mit <h2 class="section">: Titel links, Aktion rechts, ohne Hintergrund, Rand, Schatten und Innenabstand. pad, bodyStyle und style wirken nicht mehr. className bleibt, Finanzen braucht es für Container-Queries.
Knöpfe	Button: Standard und ghost werden .btn (weiß mit Ring), primary wird .btn.btn-primary (schwarz). Neu ist quiet als .btn.btn-quiet. danger wird .link-danger (roter Textlink). Die Prop size wird angenommen, wirkt aber nicht: Alle Knöpfe sind 32 px hoch, nur der Login-Knopf 36 px. Zeilenaktionen in Tabellen sind Textlinks .link. Während einer Anfrage sind Knöpfe disabled und zeigen Text („Speichert …“), keinen Spinner.
Links	a.link mit feinem Unterstrich (--line-strong, beim Überfahren currentColor). Basisregel a:not([class]) mit demselben Unterstrich, damit auch klassenlose Links (Rechtstext-Dateien, AVV-Link der Analyse-Zustimmung u. a.) erkennbar bleiben. Neuer Code vergibt immer eine Klasse.
Badge	<span class="badge {ton}">. Die Ton-Namen der Logik (muted, info, ok, warn, danger) bleiben, Tests pinnen sie. Badge.jsx übersetzt: muted → grau, info → blau, ok → grün, warn → orange, danger → rot. Neu sind violet und plain. Die Prop dot entfällt.
Ticketstatus	Neue Funktion statusTone(status) in lib/ticketStatus.js mit den Rückgaben '' | 'blue' | 'orange' | 'violet' | 'green' | 'plain' nach der Tabelle oben. Leer, undefined und unbekannt ergeben ''. Der Test deckt jeden gespeicherten Wert ab. StatusPill rendert badge {ton} direkt, ohne das Mapping in Badge.jsx. UrgentPill rendert „Dringend“ in Rot. statusClass entfällt mit P2.
Reiter	Tabs rendert .tabs und .tab mit 2-px-Unterstrich und optionalem Zähler <span class="count">. Auf dem Handy scrollen die Reiter waagerecht. Zähler werden beim Rendern ergänzt, nie in lib/customerTabs.js.
Umschalter	.seg: graue Schiene, der aktive Teil ist weiß mit Ring, dazu aria-pressed.
Tabelle	.table mit Kopf 12 px/500 und Haarlinien. tr.row ist klickbar und wird beim Überfahren --bg-subtle. Weitere Klassen: .cell-title, .cell-sub, .id, .right, .num, .table-foot, .hide-md, .hide-sm. Die erste Zelle enthält immer ein echtes Bedienelement für Tastatur und Mittelklick: einen Link oder, wenn die Zeile einen Dialog öffnet, einen <button class="link">. Klicks auf a, button, select, input und label in der Zeile lösen keine Zeilenaktion aus.
Liste	.list-row mit Haarlinie. Bei Link-Zeilen färbt sich beim Überfahren der Titel.
Schlüsselwerte	.facts/.fact für den Ticketkopf. .stats/.stat für Kennzahlen: .v.warn orange, neu .v.neg rot für negative Beträge. .kv für Beschriftung und Wert, mobil einspaltig. Dazu .two-col und .prose (Fließtext mit Zeilenumbrüchen). Neue Komponente Stat mit Prop tone, ohne Icon und ohne Farbstreifen. Kpi bleibt bis P7 als Export erhalten und rendert Stat: accent = var(--danger) wird neg, alle anderen accent werden ignoriert.
Formular	.field > label (500) mit .input, .select oder .textarea (32 px, Ring statt Rand, zweistufiger Fokus) und .hint. Mehrspaltige Formulare nutzen .field-row und .field-row-3, Kästchen .check. Fehler zeigt ein roter Ring (--danger, --danger-ring), auch bei [aria-invalid="true"]. Field, FormField, DateTimeInput, DurationSelect und AutocompleteInput übernehmen die Klassen. Die Vorschlagsliste ist ein weißes Popover mit --shadow-pop.
Dialog	Neue ui/Dialog.jsx mit den Props title, onClose, busy, wide, footer. Aufbau: .overlay (--overlay) mit .dialog (weiß, Radius 12, --shadow-pop, 520 px, mit wide 760 px). Der Kopf enthält h3 und den Knopf „ד (aria-label="Schließen"), danach folgen .dialog-body (scrollt) und .dialog-foot. Attribute: role="dialog", aria-modal, aria-labelledby. Den Fokus regelt useDialogFocus. Unter 860 px erscheint der Dialog als Bottom-Sheet. Schließen geht nur über × und Esc. Ein Klick auf den Hintergrund schließt nicht, damit lange Eingaben nicht verloren gehen (Abweichung vom Prototyp). Esc greift nur, wenn !e.defaultPrevented, so schließt eine offene Vorschlagsliste zuerst sich selbst. Solange busy gilt, wirken × und Esc nicht, und × ist disabled. Beide Wege rufen genau das onClose des Aufrufers. AssignDialog übergibt sein close() samt refresh. Die eigenen Esc-Listener in InvoiceCreateModal und AssignDialog entfallen. lockRef und busyRef bleiben als Doppelklick-Sperre. Die native required-Prüfung bleibt.
Leerer Zustand	<div class="empty"><strong>Titel</strong>Hinweis</div> mit optionaler Aktion. Die Prop icon entfällt.
Meldungen	Ohne Kasten: .msg.err (rot, role="alert"), .msg.ok (grün), .msg.warn (orange), alle 13 px. Flüchtige Bestätigungen dürfen .toast nutzen.
Laden	.loading mit Text „Wird geladen …“. AdminRoute behält wörtlich <p>Wird geladen …</p> ohne Klasse, weil ein Test darauf prüft. Der Seitenabstand kommt dort vom Elternelement.
Dringend-Schalter	UrgentToggle rendert den kleinen Schalter .sw mit dem Wort „Dringend“. Eingeschaltet ist er rot. aria-pressed und die Logik bleiben.
Login	Aufbau: .login > .login-box (360 px), Logo, h1 „Anmelden“, .sub „Ticketsystem für das WEBklar-Team“, Felder „E-Mail“ und „Passwort“ mit autocomplete, Knopf „Weiter“. Danach die Schritte „Code senden“ und „Code eingeben“ (h1 „Code eingeben“, .code-input, Links „Code erneut senden“ · „Abbrechen“). Die erklärenden Texte der Code-Schritte bleiben wörtlich wie heute: „Wir schicken dir einen Code an deine E-Mail-Adresse.“, „Wir haben dir einen Code an {E-Mail} geschickt.“, „Code aus der E-Mail“, „Neuer Code ist unterwegs.“. Die Prototyp-Hinweise zum Testbetrieb kommen nicht ins echte System. .login-foot zeigt „Webklar Ticket-Plattform · © {Jahr}“. Die Logik (login, sendCode, verifyCode, cancelMfa, NO_STAFF_ACCESS, safeReturnPath) bleibt unverändert. LetterGlitch.jsx entfällt.

Übergangsschicht KOMPAT (P1 bis P10)

Ein markierter Block „KOMPAT“ in global.css bildet alte Klassen auf den neuen Look ab. So sind noch nicht umgebaute Seiten weiß, kastenlos und lesbar. Er gilt von P1 bis P10.

Alte Klasse	Darstellung im neuen Look
.ui-card*	Abschnitt ohne Kasten, .ui-card-head h3 wie h2.section
.ui-btn*	wie .btn / .btn-primary / .link-danger
.form-group, .form-label, .form-control	wie .field, Label, .input / .select / .textarea
.badge-*, .status-*, .priority-*	Badge-Töne
.overlay (Altform)	behält overflow-y: auto, align-items: flex-start und 24/16 px Abstand, Hintergrund --overlay
.overlay-content	weiße Box: width: 100%, max-width: 520px (Inline-maxWidth der Aufrufer wirkt weiter, .fin-dialog 760 px), margin: 0 auto, Radius 12, --shadow-pop, Abstand 24, Schrift --text
.overlay-close	fest oben rechts im Fenster, 32×32 px, weißer runder Knopf mit „ד in --text-2
.seg button.active	wie .seg button.on
.bg-red (mit oder ohne .text-white)	kein Hintergrund, Schrift --red-fg, 13 px
.text-white allein	keine Regel
.text-grey	--text-2
.text-red	--red-fg
.side-count	kleine graue Zahl, bis P6 (Chat-Liste)
.side-logo	Initiale ohne Verlauf, bis P4 (Kundenliste)
.btn-dark, .btn-teal	wie .btn-primary
.card*, .row, .col*, .dropdown*	neutral
.spinner	neutraler grauer Ring
.page .page, .page .main-content	Abstand und Breite neutralisiert, falls eine Seite verschachtelt
Links in Bestandsklassen, die bisher --accent als Farbe nutzten (.fin-link, .legal-files a, .credit-cols a, .area-rows a)	feiner Unterstrich

Alle !important-Regeln des Altbestands werden gelöscht, nicht überschrieben. Tote Klassen löscht P1 nur nach einer Liste aus einem Abgleich-Skript:

• Das Skript vergleicht alle Klassen in global.css mit Klassen-Literalen in JSX, mit Template-Präfixen (z. B. fin-fixed-${…}, legal-tone-${…}) und mit Zeichenketten in lib/*.js.
• Gelöscht wird erst nach Gegenprobe mit rg -w <name> src --glob '!*.css'.
• Dynamisch gebaute Klassen gelten nicht als tot. Beispiele: fin-neg, fin-fixed-off, legal-tone-*, legal-version-*, badge-*, status-*, ticket-tab-active, ui-btn-*.
• Die Liste steht im Plan.

P10 entfernt den KOMPAT-Block.

Ticket als eigene Seite

Route und Links

• Route /tickets/:ref/:tab?.
  • Sie ist wie alle anderen eine ProtectedRoute und steht vor dem Fallback *.
  • tab ist details (Standard) oder arbeitsblaetter. Ein unbekannter tab leitet mit replace auf Details um.
  • Das Menü markiert „Tickets“ auch auf Unterseiten.
• Neue lib/ticketRoutes.js mit ticketPath(ref, tab) und Test.
  • ref ist ticket.woid || ticket.$id. Reine woid-Aufrufer übergeben die woid.
  • Rückgabe ist /tickets/ + encodeURIComponent(ref), bei arbeitsblaetter mit /arbeitsblaetter.
  • Ein leeres ref ergibt /tickets.
  • Die angezeigte Kurznummer $id.slice(-5) ist nie Linkziel.
• Bestehende Links auf /tickets?woid=N gibt es heute an sechs Stellen. Alle nutzen künftig ticketPath:
  • PlanboardPage
  • AssignProjectPage (2×)
  • ServicesPage
  • ProjectContextPanel
  • CustomerFunktionen
• Neue Links:
  • Zeilen der Ticketliste (P2)
  • Tickets-Reiter der Kundenseite (P4, heute ohne Link)
  • Ticket-Spalte der Projekte (P5, project.ticketId ist eine $id)
• Alte Links /tickets?woid=N leiten mit replace auf /tickets/N um.
  • Das bleibt dauerhaft, auch nach P10, weil Portal-Mails so verlinken.
  • Die Umleitung liegt innerhalb der geschützten Route, damit safeReturnPath samt Suchteil nach dem Login greift.

Laden

Neuer Hook useWorkorder(ref):

1. Zuerst sucht er per Query.equal('woid', [String(ref)]), Query.orderDesc('$createdAt'), Query.limit(1).
2. Findet er nichts, holt er das Ticket per getDocument(ref) als $id.
3. 400 und 404 gelten beide als „Ticket nicht gefunden“.

Der Hook liefert dasselbe Schreib-API wie useWorkorders (updateWorkorder). Er kennt die Zustände Laden, Fehler und „Ticket nicht gefunden“.

Arbeitsblätter und CreateWorksheetModal nutzen immer ticket.woid des geladenen Tickets, nie den URL-Parameter. Für Tickets ohne woid zeigt der Reiter Arbeitsblätter den Hinweis „Für dieses Ticket gibt es keine Ticketnummer, Arbeitsblätter sind nicht möglich.“ statt eines Fehlers. worksheets.woid ist Pflicht.

Seite pages/TicketPage.jsx

• Kopf:
  • Brotkrumen „Tickets / Nummer“. Der Link „Tickets“ führt mit dem Suchteil zurück, den die Liste per Link-State listSearch mitgibt. Ohne State führt er auf /tickets.
  • Eyebrow „Nummer · Art“. Die Art kommt aus ticketTypeLabel, „Webpage“ bleibt „Webpage“.
  • h1 mit dem Betreff (Rückfall „Kein Betreff“), .sub mit dem Kunden als Link und dem Ort.
  • Aktionen: Dringend-Schalter, Status-Auswahl und der schwarze Knopf „Arbeitsblatt hinzufügen“. Der Knopf erscheint für alle Ticketarten, auch Akquise, wie heute. Der Prototyp blendet ihn bei Akquise aus, das wird nicht übernommen.
• .facts:
  • Zuständig als Auswahl
  • Termin: startDate mit startTime–endTime, ohne Rückfall auf das Erstelldatum, leer „Kein Termin“
  • Fällig: deadline, leer „–“
  • Einsatz: serviceTypeLabel
  • Angefragt von, leer „–“
  • Erstellt: formatDistanceToNow, deutsch, wie heute
• Datumsfelder sind Freitext.
  • Angezeigt wird über parseGermanDate und formatTime aus lib/planboard.js.
  • Ist ein Wert nicht lesbar, steht der Rohtext da.
  • Nie wird new Date() oder format() direkt auf den gespeicherten Text angewendet.
• Reiter: „Details“ und „Arbeitsblätter (n)“.
  • Details zeigt die Beschreibung als .prose, den Projekt-Abschnitt (TicketProjects, optisch bis P5 unverändert) und „Weitere Tickets von {Kunde}“ (ProjectContextPanel, Sichtbarkeitsregel wie heute).
  • Arbeitsblätter zeigt .stats und die Arbeitsblatt-Zeilen.
• Status-Auswahl (natives <select>):
  • Sie bietet die sechs Werte aus TICKET_STATUSES an, für Akquise ebenfalls.
  • Ist der aktuelle Wert nicht dabei (Akquise- oder Altwert), steht er zusätzlich als gewählte Option darin.
  • Geschrieben wird nur { status }.
• Zuständig (natives <select>):
  • Optionen: „Nicht zugewiesen“ und die Mitarbeiter mit vollem Namen.
  • Ist assignedTo nicht in der Mitarbeiterliste, steht zusätzlich eine gewählte Option mit assignedName, sonst „Unbekannte Person“.
  • Solange die Liste lädt, ist die Auswahl deaktiviert.
  • Geschrieben wird nur { assignedTo }, für niemanden ein leerer String.
  • useEmployees läuft einmal pro Seite.
• TicketCard.jsx entfällt.
  • Vorher wandert die ungetestete Logik aus handleCreateWorksheet in eine Lib-Funktion mit Test: Status zurückschreiben und Akquise-Ergebnis setzen.
  • Testfälle: Akquise + Zugesagt → Kunde fest, Akquise + Abgesagt → verloren, Akquise + In Kontakt → keine Änderung, Nicht-Akquise → nie eine Änderung.
  • useWorksheets(ticket.woid) und useCustomerAbo laufen einmal pro Seite.
  • aboHoursAllowed, onTogglePlan, canEditWorksheetTimes, canAddOwnSupport und die drei Dialoge werden unverändert verdrahtet.

Ticketliste TicketsPage

• Reiter mit Zählern: Aktiv · Offen · In Arbeit · Wartet auf Kunde · Prüfung · Erledigt · Storniert · Alle.
  • Aktiv = DEFAULT_STATUS_GROUPS (offen, in Arbeit, wartend, Prüfung).
  • Die übrigen Reiter entsprechen je einer Gruppe aus STATUS_GROUPS.
  • Alle bedeutet: kein Statusfilter.
  • „Storniert“ ist neu gegenüber dem Prototyp, damit die heutige Auswahl „nur stornierte“ nicht verloren geht.
  • Startzustand: Reiter Aktiv, Art Aufträge, „Nur dringende“ aus.
• Art-Auswahl (.select-quiet) mit allen sechs heutigen TYPE_FILTERS: Aufträge (Standard, ohne Akquise) · Webpage · Migration · Projekt · Akquise · „Aufträge und Akquise“ (heute „Alle“).
• Kästchen „Nur dringende“.
• Suche:
  • Sie läuft im Browser über ticketMatches, wie heute.
  • Sie startet 300 ms nach der letzten Eingabe oder per Enter.
  • Der Knopf „Anwenden“ entfällt.
• Veraltete Antworten: useWorkorders darf als einzige Hook-Änderung veraltete Antworten verwerfen (Anfrage-Zähler). So kann eine ältere Antwort nie eine neuere überschreiben.
• URL-Zustand (useSearchParams):
  • Reiter, Art, Dringend, Suche und limit (Anzahl geladener Tickets, keine Seiten) stehen in der URL.
  • Geschrieben wird immer mit replace, Standardwerte werden nicht geschrieben.
  • Ungültige Werte fallen auf den Standard zurück. limit wird auf 10 bis 500 begrenzt.
  • Jede Filteränderung setzt limit auf 10 zurück.
  • ?woid= hat Vorrang und leitet um.
  • Die Helfer stehen in neuer lib/ticketListUrl.js mit Test.
• Nachladen:
  • Beim Nachladen bleiben die alten Zeilen sichtbar, im Fuß steht dezent „Wird geladen …“.
  • Den leeren Ladezustand gibt es nur beim allerersten Laden.
  • „Mehr laden“ bleibt (+10), ohne Suche wie heute.
• Zähler:
  • Je Reiter läuft eine Abfrage mit Query.limit(1), die total liest. Sie nutzt dieselbe Art und denselben Dringend-Filter wie die Liste, nie den Suchtext.
  • Die Zähler laden beim Öffnen, bei Wechsel von Art oder Dringend und nach dem Anlegen eines Tickets, nicht bei Reiterwechsel oder Tastendruck.
  • Bei aktiver Suche werden sie ausgeblendet, der Fuß zeigt dann die Trefferzahl.
  • Schlägt eine Abfrage fehl, fehlt nur der Zähler.
  • Eigener Hook, useWorkorders bleibt dafür unberührt.
• Tabellenspalten:
  • Ticket: Nummer, Betreff, Badge „Dringend“, darunter Kunde · Ort.
  • Status.
  • Zuständig: „Vorname N.“ aus der Mitarbeiterliste, Rückfall assignedName, sonst „Unbekannt“. Ohne Zuweisung steht „Niemand“ in Grau.
  • Termin: wie in den Facts, Fehlwert „–“.
  • Zeit: siehe unten.
  • Erstellt.
• Spalte „Zeit“:
  • Wert ist die Summe von worksheetMinutes über alle Arbeitsblätter ohne Kommentar. Das ist dieselbe Regel wie „Arbeitszeit gesamt“ auf der Ticketseite. Formatiert wird mit stepLabel.
  • Geladen wird für die geladenen Zeilen in Blöcken von höchstens 100 woids: Query.equal('woid', block), Query.select([...]), Query.limit(5000), höchstens 3 Blöcke gleichzeitig.
  • Das Ergebnis wird je woid zwischengespeichert, „Mehr laden“ holt nur neue Zeilen.
  • Die Zeit wird höchstens für die ersten 200 Zeilen berechnet. Sind mehr geladen, nennt der Fuß das.
  • Ein Block mit 5000 Treffern könnte abgeschnitten sein. Er und ein Fehler zeigen „–“, nie eine falsche Zahl. Die Liste bleibt bedienbar.
  • Tickets ohne woid zeigen „–“.
  • Die Summenfunktion bekommt einen Test.
• Sortierung: Sie bleibt $createdAt absteigend, der Fuß sagt „Neueste zuerst“.
• Navigation:
  • Die Zeilen verlinken mit state={{ listSearch: location.search }}.
  • Nach „Neues Ticket“ springt die App auf die neue Ticket-Seite (createWorkorder liefert die woid).

Arbeitsblätter (WorksheetList neu)

• Aufbau: flache Zeilen .ws in drei Bereichen:
  • links Datum und Uhrzeit
  • in der Mitte Person, Einsatz (bei Kommentaren das Wort „Kommentar“), Nummer, Badges, Text, Unterstützung, „Status danach: X“ und Aktionen
  • rechts die Zeit
• Es gibt kein Aufklappen, keine Verläufe und keine Animation.
• Kommentare stehen in Nebentextfarbe.
• Git-Push: ohne Zeit Badge „Zeit offen“ (orange), mit Zeit „Zeit eingetragen“ (grün).
• Abo: Der Umschalter heißt „Abo“ beziehungsweise „+ Abo“. Seine Sichtbarkeitsregel bleibt exakt: onTogglePlan && !isComment && totalTime > 0 && (aboHoursAllowed || countsToPlan).
• Bedingungen, die bleiben: canEditTimes, canAddSupport, isGit und needsTimeEntry.
• Texte, die bleiben: „Zeit nachtragen“, „Zeiten bearbeiten“, „Ich habe unterstützt“ und „Meine Unterstützung bearbeiten“. Letzteres erscheint, sobald man schon unterstützt. OwnSupportModal behält „Eintrag entfernen“ und maxLength 200.
• Reihenfolge: neueste zuerst.
• Zeitformat: überall stepLabel („1 h 30 min“, heute „1h 30min“).
• Kennzahlen:
  • Arbeitszeit gesamt = Summe worksheetMinutes ohne Kommentare
  • davon Abo-Stunden = dieselbe Summe über countsToPlan && !isComment
  • Zeiten offen = Anzahl needsTimeEntry, orange bei mehr als 0

Bewusste Änderungen am Verhalten

Bisher	Künftig
Ticket klappt in der Liste auf	eigene Seite mit Link
Statusfilter als Mehrfachauswahl mit „Anwenden“	Reiter (Einfachwahl)
Suche nach Klick auf „Anwenden“	Suche nach Tipp-Pause
Footer auf jeder Seite	Footer entfällt, Text steht im Login-Fuß
Menü einklappbar	nicht mehr einklappbar, auf dem Handy eine Schublade
Dialoge schließen nur mit ×	Dialoge schließen mit × und neu mit Esc
Statusfarben: Offen grün, Erledigt grau	Farben wie in der Tabelle oben. Das Team wird beim Live-Gang von P1 informiert.
Kein Link auf die Tickets einer Kundenseite oder in der Projektliste	beide verlinkt

Alle anderen Funktionen bleiben erhalten.

Pakete

Arbeitsweise

• Branch: Gearbeitet wird im Worktree dev-design auf feature/design-weiss, abgezweigt von test 603d08c.
• Commits: Jedes Paket ist ein eigener Commit-Stapel. git add nur mit ausdrücklichen Pfaden.
• Rebase: Vor jedem Paket und unmittelbar vor jeder Abnahme läuft git fetch origin && git rebase origin/test, kein Merge.
• Tag: Erst danach wird das Tag design-p<N> auf den abgenommenen Stand gesetzt und nicht mehr bewegt. Korrekturen nach dem Push sind Folge-Commits mit eigenem Tag design-p<N>-fix<k>.
• Live-Gang: Live geht ein Paket nur über das Tag, nie über die Branch-Spitze. Der Eigentümer führt aus: git -C /home/webklar/apps/ticket.webklar.com/dev-design push origin 'design-p<N>^{commit}:refs/heads/test' Das ist ein reiner Fast-Forward. Seit 2026-09-30 deployt nur test. Vor dem Push nennt der Agent die genaue Zeile, den SHA und git log --oneline origin/test..design-p<N>.
• Nach dem Push:
  • Der Agent prüft im Log von webklar-ticket-build die Zeile „Deployment completed successfully“.
  • Er vergleicht den Asset-Hash von https://ticket.webklar.com/ mit dist/index.html.
  • Er macht einen kurzen Sichttest im Chrome des Eigentümers, nur lesend.
• Zurücknehmen: Per Revert-Commit, immer das jüngste Paket. Ein früheres Paket geht nur zusammen mit allen späteren: git revert --no-commit design-p<N-1>..design-p<N>.
• Reihenfolge:
  • Live gehen die Pakete in der Reihenfolge P1 bis P10.
  • P3 bis P5 brauchen ticketPath aus P2.
  • P4 liegt vor P5, weil P4 den Aufruf von CreateCustomerForm in AssignProjectPage umstellt.
  • P7, P8 und P9 hängen fachlich nicht voneinander ab, gehen aber auf demselben Branch in dieser Reihenfolge live.
• Parallelarbeit: Am nächsten Paket wird erst nach dem Tag des vorigen gearbeitet. Die Commits liegen hinter dem Tag und gehen deshalb nicht mit live.

Inhalt

Paket	Umfang	Danach sichtbar
P0 Vorbereitung	LeadsPage.jsx und hooks/useLeads.js löschen. Beide sind toter Code. Die /leads-Umleitung, der pausierte Menüpunkt und lib/leads.js bleiben. node_modules wird aus Git genommen (git rm -r --cached node_modules; .gitignore führt es schon). Der Deploy installiert ohnehin neu. Im Worktree folgt ein echtes npm ci unter systemd-run mit Speichergrenze, ohne Symlink. Danach muss git status --short ohne ??-Zeilen leer sein. Das Screenshot-Werkzeug entsteht außerhalb des Repos (siehe Abnahme), und es werden Vorher-Bilder erzeugt. Fertig, wenn npm test und npm run build im Worktree grün laufen und ein Befehl alle Vorher-Bilder erzeugt.	nichts
P1 Fundament	Tokens, Aliase und KOMPAT, Basis, Gerüst, Menü, Logo, Favicon. Alle ui/*-Bausteine samt Dialog und Stat, außerdem statusTone und der neue Login. Löschen: Lato, Footer.jsx, LetterGlitch.jsx, lib/sidebar.js samt Test und tote CSS-Regeln laut Skript-Liste. Pflicht-Fixes gegen Unlesbares: Chat-Variablen in chat.css unter .woms-chat (--chat-on-accent: #fff, --chat-line: var(--line-strong), --chat-muted: var(--text-2), Fehler- und Hinweistexte --red-fg/--text-2). .admin-primary-button bekommt weiße Schrift, Hover --accent-hover. Farbliterale umstellen in AssignedProjectCard, PreviewBlock, PreviewLinkButton, GiteaLinkButton, AnalyseRow, CreateWorksheetModal und WorksheetTimesModal (#a0aec0) sowie die helle Warn- und Fehlerschrift in admin-areas.css, serverpuls.css, AdminPage.css und im Finanz- und Rechtlich-Teil von global.css. chartColors.js wird angelegt und in Chart.jsx und ServerpulsPage benutzt. Abschluss-Prüfung: rg über alle Farbliterale in src. Jedes Literal mit Kontrast unter 3:1 auf Weiß, jede dunkle Schrift auf --accent und jedes Weiß-Alpha ist entweder behoben oder im Plan mit Zielpaket als bewusst offen eingetragen.	ganze App weiß, Menü als Text, neues Login, alle Dialoge weiß; Innenlayouts noch alt, aber lesbar
P2 Tickets	Ticketliste, Ticket-Seite, Route, ticketRoutes.js, ticketListUrl.js und Arbeitsblätter. Dialoge CreateTicketModal, CreateWorksheetModal, WorksheetTimesModal, OwnSupportModal; SupportersEditor als Feldblock in den Arbeitsblatt-Dialogen. Native Auswahlfelder statt StatusDropdown/EditorDropdown, dazu der Dringend-Schalter und „Weitere Tickets“. Die sechs Link-Stellen wechseln auf ticketPath. Altklassen .tcard*, .dropdown*, .ticket-tab*, .worksheet-summary und .chevron löschen. „Neues Ticket“ bleibt inhaltlich wie heute, also automatische Zuweisung und kein Einsatzfeld.	Ticket-Arbeitsplatz wie im Prototyp
P3 Planboard	.week mit sieben Spalten, Haarlinien und Wochenende --bg-subtle. Heute als schwarze Datumspille, Termine als Links auf ticketPath. Akquise-Termine hell orange, stornierte bleiben sichtbar wie heute. Kopf: „Kalenderwoche N · Datum bis Datum · n Termine“, Aktionen ← · Heute · →. Unter 860 px eine Spalte.	Planboard ohne Karten
P4 Kunden	Kundenliste mit Reitern Feste Kunden · Leads · Archiviert · Alle. Die Zähler nutzen dieselbe Filterfunktion wie die Liste (lib/leads.js). Dazu Suche und Tabelle mit Unternehmen und Ansprechpartner, Kundennummer, Standort, E-Mail, Telefon. Badges „Lead“, „Abgesagt“, „Archiviert“ neben dem Namen wie heute; „Wichtig“ als Badge statt Stern. Kopf: für Admins „Neuer Kunde“ schwarz und „Neuer Lead“ als Standardknopf, für andere nur „Neuer Lead“ als Standardknopf. CreateCustomerForm und CreateLeadForm werden Dialoge, Hinweis- und Knopftexte bleiben; der Aufruf in AssignProjectPage wird mit umgestellt. Kundenseite mit Brotkrumen, Eyebrow und Reitern; ihr Tickets-Reiter verlinkt die Tickets. Übersicht als .two-col mit .kv, Stammdaten bleiben direkt bearbeitbar. CustomerFunktionen als Tabelle, die weiter abgeschaltetText zeigt (kommt aus tp2, siehe Risiken). Außerdem AboStatusCard, CustomerViewLog, KundenansichtButton (Standardknopf) und Grundstil von admin-areas.css.	Kundenbereich wie im Prototyp
P5 Projekte	ProjectsPage als eine Tabelle: Projekt + Repo, Kunde (Auswahl je Zeile wie heute, deaktiviert bei archiviert oder während der Zuordnung, Rückfrage beim Entfernen), Art, Adresse, Ticket als Link, Status, Zuletzt geändert = $updatedAt, Aktionen. Die Aktionen sind Textlinks, nur wenn zutreffend: „Vorschau öffnen“, „In Gitea öffnen“, „Hosten“ (mit Ladezustand), „Aktualisieren“. Die erste Zelle ist ein <button class="link"> mit dem Projektnamen und öffnet „Projekt bearbeiten“. Auf dem Handy bleiben Projekt, Kunde, Status und Aktionen sichtbar. Die heutigen sechs Ansichten werden 1:1 Reiter: Aktive Projekte · Unzugeordnet · Zugeordnet · Vorlagen (nur Admins) · Archiviert · Alle inkl. Archiv. Dazu Suche, Auswahl Kunde und Mitarbeiter, „Weitere Treffer“ und Hinweiszeile. „Neues Projekt“ als Dialog mit Repo-Name. PreviewBlock steht außerhalb des Formulars, der Dialog ist wide. Die Liste zeigt „Wird geladen …“ nur beim ersten Laden. Außerdem: AssignProjectPage mit Schritten als Abschnitten und Auswahl auch als Text markiert; ServicesPage; TicketProjects; AssignedProjectCard; AnalyseRow (Zustimmung als Dialog, Wortlaut unverändert); PreviewBlock; PreviewLinkButton („Vorschau öffnen“); GiteaLinkButton („In Gitea öffnen“); CopyableCredential („Anzeigen“/„Verbergen“, „Kopieren“/„Kopiert“).	Projektbereich wie im Prototyp
P6 Kunden-Unterseiten	Chat: Liste als Haarlinien-Zeilen. Alle Regeln, die Elemente im Verlauf und in der Eingabezeile gestalten, tragen das Präfix .woms-chat, bei Bedarf .woms-chat.woms-chat, nie !important. Das Seitenlayout (.chat-page, .chat-side, .chat-list*, .chat-main, .chat-back) bleibt ohne Präfix. Fremde Blase --bg-hover, eigene --grey-bg. loadChatComposer.js, sein Test und die Container in ChatThread.jsx bleiben unverändert. Gutschriften: Filter als Reiter, Tabelle mit Spaltenpriorität, Detail als .two-col, Knöpfe Genehmigen (schwarz), Rückfrage (Standard), Ablehnen (rot als Text). Abo-Angebote: Tabelle, Formular als Dialog. E-Mail-Speicher: Tabelle mit data-storage-done.	Chat und Kunden-Unterseiten hell
P7 Finanzen	Finanz-CSS neu (ca. 320 Zeilen), alle Finanzkomponenten. LiquidityHead wechselt von Kpi auf Stat, der Kpi-Export wird gelöscht. Dialoge AssignDialog und InvoiceCreateModal (wide). Bleiben: die Anker INVOICES_ANCHOR und finanzen-buchungen samt scroll-margin-top, die Klassen-Hooks, data-label, role-Attribute und Container-Queries; container-type wandert auf die Wrapper. Beträge behalten ihr Vorzeichen, negative sind rot.	Finanzen ohne Karten
P8 Rechtliches, Admin	LegalPage, LegalTextsTab, ProviderContractsTab als Tabelle, ContractForm/VersionForm als Dialoge. AdminPage mit Tabelle, Formular als Dialog und Textaktionen „Bearbeiten“/„Löschen“. Fehler erscheinen als .msg.err im Dialog, der erst bei Erfolg schließt. Die einmal angezeigten Zugangsdaten bleiben ein Abschnitt auf der Seite. AdminPage.css wird neu geschrieben; .credential*, .sr-only und .spin ziehen nach global.css um.	Rechtliches und Admin ohne Karten
P9 Serverpuls	Kopf mit Text-Badge statt Emoji. Warnungen als Listenzeilen mit Stufen-Badge, Kacheln als .stats mit Sparkline. Deltas als Textfarbe (rot = gestiegen, grün = gesunken), Umschalter .seg. Alle data-testid bleiben.	Serverpuls hell
P10 Aufräumen	react-icons und @tabler/icons-react deinstallieren, sobald rg "react-icons|@tabler" src 0 Treffer liefert. KOMPAT-Block, Aliase und tote Klassen löschen. previewEnv.dotColor samt Test entfernen. Die Kommentare zu Icons in navLinks.js und im Test anpassen. Die Bundle-Größe vorher und nachher dokumentieren. Die ?woid=-Umleitung bleibt.	nichts Neues, kleineres Bundle

Seiten ohne Prototyp-Vorlage

Gemeint sind P6 bis P9, ServicesPage und AssignProjectPage. Sie entstehen aus denselben Bausteinen nach festen Ersetzungen:

• Karte → Abschnitt
• Kachelraster → Tabelle oder Liste
• farbiger Streifen → Badge
• Icon-Knopf → Textknopf oder Textlink

Der Eigentümer nimmt diese Pakete anhand von Screenshots ab, bevor er pusht.

Texte

Texte bleiben wörtlich erhalten. Ausnahmen sind nur diese neuen oder geänderten Texte:

Login: „Anmelden“, „E-Mail“, „Passwort“, „Weiter“, „Code eingeben“, „Code erneut senden“, „Abbrechen“ sowie der Untertitel „Ticketsystem für das WEBklar-Team“.

Menü und Laden: „Abmelden“, „Menü“, „Wird geladen …“ statt „Loading...“.

Ticketliste:

• Reiter und Art-Eintrag „Aufträge und Akquise“
• Fuß „Neueste zuerst“
• „Niemand“, „Unbekannt“

Ticketseite:

• „Nicht zugewiesen“ (statt „(Unassigned)“), „Unbekannte Person“
• „Kein Termin“
• „Weitere Tickets von {Kunde}“
• „Status danach: X“
• Hinweis für Tickets ohne Ticketnummer
• Zeitformat stepLabel

Weitere Seiten:

• Planboard-Kopf
• Badge „Wichtig“
• Spaltenköpfe der neuen Tabellen

Knöpfe: Textknöpfe, die bisher Icons waren:

• „Vorschau öffnen“, „In Gitea öffnen“
• „Bearbeiten“, „Löschen“, „Entfernen“, „Lösen“
• „Anzeigen“, „Verbergen“, „Kopieren“, „Kopiert“
• „Erneut versuchen“, „Aktualisieren“, „Hosten“

Ladetexte in Knöpfen: „Speichert …“, „Sendet …“, „Wird geladen …“.

Was gleich bleibt

Verhalten:

• Alle Hooks und alle Lib-Logik. Einzige Ausnahme: das Verwerfen veralteter Antworten in useWorkorders. Neue Hooks sind erlaubt (useWorkorder, Zähler, Zeitsummen).
• Auth und 2FA.
• Alle Abfrage-Intervalle.
• Pflichtfelder und 15-Minuten-Schritte.
• Doppelklick-Sperren.
• Alle window.confirm-Rückfragen.
• Alle data-testid.
• Die URL-Parameter ?tab=, ?antrag=, ?kunde=.

Daten:

• Appwrite-Schema, Rechte und gespeicherte Werte (englische Status, die das Kundenportal auswertet).
• Server-APIs.
• Portal-Repo.
• .env*: Latin-1, nicht anfassen.

Texte:

• Alle rechtlich relevanten Texte:
  • Zustimmung zur Website-Analyse
  • Abo-, Gutschrift- und § 19-Hinweise
  • Steuer-Hinweis
• Mail- und Chat-Vorlagen.
• Fehlermeldungen.

Risiken und Gegenmaßnahmen

Risiko	Gegenmaßnahme
Ein einziges CSS-Bündel: umbenannte Klassen brechen Seiten, die gerade niemand ansieht	KOMPAT ab P1. Am Ende von P1 ein Skript, das alle in JSX und lib/*.js benutzten Klassen gegen die CSS-Regeln abgleicht; Ergebnis im Plan. Screenshot-Pflichtliste nach jedem Paket.
Namensgleiche Klassen mit anderer Bedeutung: .btn, .badge, .page, .field, .seg, .toolbar, .empty, .list-row, .urgent-toggle, .overlay, .id	in P1 bewusst ersetzen, jede Altverwendung im Screenshot prüfen
79 !important im Altbestand	löschen statt überschreiben
Alt-Dialoge bleiben bis P2/P5/P7/P8 in Betrieb	KOMPAT-Regeln für .overlay, .overlay-content, .overlay-close. P1-Abnahme: jedes der 10 Alt-Dialoge bei 390×700 und 1440×700, Speichern-Knopf erreichbar.
Fremder Chat-Composer, sein CSS lädt nach dem WOMS-CSS	Präfix-Regel und --chat-*-Variablen, siehe P1 und P6
Diagramme auf Canvas	Farbkonstanten statt Variablen, ab P1 hell
Statusfarben ändern ihre Bedeutung	Hinweis an das Team beim Live-Gang von P1
Dokument-Scroll statt innerem Scroller: position: sticky in AdminPage, Scroll-Anker der Finanzen	in der Abnahme gezielt prüfen
Vorschlagslisten in scrollenden Dialogen werden abgeschnitten	in P2, P6 und P7 prüfen
Freitext-Datumsfelder, keine Fehlergrenze: ein Parserfehler legt die App lahm	nur über parseGermanDate/formatTime anzeigen. Testdaten mit Altwerten: 2.5.2026, 31.02.2026, ISO-Datum, leer, ohne woid, unbekannter Status.
Paralleler Branch feature/terminplaner-tp2: Commit 6f03712 ändert CustomerFunktionen.jsx, lib/funktionenView.js (neue Funktion abgeschaltetText) und den Test (+4 Tests)	vor P4 nach test bringen (Eigentümer) oder per git cherry-pick 6f03712 in dev-design holen. Die Testzahl steigt dann um 4.
node_modules aus Git nehmen (P0)	betrifft nur Git, nicht den Deploy, weil deploy.sh löscht und neu installiert. Andere Worktrees mit Symlink sind unkritisch.
Speicher knapp	Installation, Build und Screenshots unter systemd-run mit Speichergrenze

Abnahme

Ein Paket ist fertig, wenn alles Folgende erfüllt ist:

1. Tests: npm test läuft im Worktree grün. Die Testzahl wird je Paket notiert. Ausgangsstand 312; P1 minus 3 (sidebar) plus neue Tests; nach tp2 plus 4. Neue Tests gibt es für statusTone, ticketPath, ticketListUrl, die ausgelagerte Arbeitsblatt-Logik und die Zeitsummen.
2. Build: npm run build ist grün, die Bundle-Größe wird notiert.
3. Screenshots mit 1440 px und 390 px über die Pflichtliste:
   • Login inklusive beider Code-Schritte
   • Ticketliste (mit und ohne Suche), Ticket mit beiden Reitern, alle Ticket-Dialoge
   • Planboard
   • Kundenliste und Kundenseite mit allen Reitern
   • Chat
   • Gutschriften, Abo-Angebote, E-Mail-Speicher
   • Projekte mit beiden Dialogen, Zuordnen, Services
   • Zustimmung der Website-Analyse
   • Finanzen mit Dialogen
   • Rechtliches
   • Admin inklusive „Mitarbeiter anlegen“
   • Serverpuls mit Diagrammen
   • in P1 zusätzlich die 10 Alt-Dialoge
4. Screenshot-Werkzeug:
   • Es liegt unter /root/reports/ticketsystem-design-2026-10-04/werkzeug/, außerhalb des Repos, und ändert weder package.json noch Lock noch tests/.
   • Aufbau: esbuild-Bündel und Playwright Headless mit nachgebildetem Appwrite. Es nutzt nur Testdaten, inklusive der Altwerte aus der Risikotabelle, keine Produktionsdaten und keine echten Logins.
   • Es läuft unter systemd-run mit MemoryMax.
   • Die Ausgabe liegt je Paket unter shots/p<N>/1440 und shots/p<N>/390.
5. Code-Hygiene im umgebauten Bereich:
   • keine Icon-Importe
   • keine neuen style={{…}}, außer für Werte, die erst zur Laufzeit feststehen (z. B. berechnete Breiten)
   • Texte nur wie unter „Texte“ geändert
6. Code-Review: Ein Review (sonnet) ist gelaufen, wichtige Befunde sind behoben.
7. Freigabe: Der Eigentümer hat die Screenshots gesehen, bevor er das Tag pusht.