Webklar-Kundenbereich/docs/superpowers/plans/2026-10-06-auftraege-07-kundenportal.md

Kundenportal – Umsetzungsplan (Strang L6)

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Kunden bestätigen ihre Auftragsbestätigung (AB) auf einer öffentlichen Seite (auftrag.html#t=<Token>, Rückfall ?t=; Link aus der Mail K31; Sie-Form) und im angemeldeten Portal (Abschnitt „Aufträge“ im Reiter Rechnungen; Du-Form wie das übrige Portal); die Rechnungsliste nennt das Projekt; die Widerrufsseite kennt die Vertragsart „Projektauftrag (Auftragsbestätigung)“ mit der freiwilligen Nummer der AB.

Architecture: Reine Ansichtslogik (public/auftrag-ansicht.js, ohne DOM) und DOM-Bausteine (public/auftrag-dom.js, nur textContent, Muster shop-dom.js) bedienen drei Oberflächen: die öffentliche Seite (auftrag.html + auftrag.js, eigenes fetch mit credentials: 'omit'), den Portal-Abschnitt (auftrag-portal.js, per import() aus app.js, bekommt api als request) und die Widerrufsseite (auftrag-widerruf.js zeigt das freiwillige Feld abNummer („falls zur Hand“) nur bei „Projektauftrag“ und prüft eine eingegebene Nummer beim Klick auf „Widerruf bestätigen“, bevor initLegalForm sendet). Die Seitentexte stehen in zwei Anreden in auftrag-ansicht.js (texte('sie') für die öffentliche Seite, texte('du') für das Portal). customerInvoices.js liefert das Feld projekt. Die Antworten kommen vom Gegenstück L5 (Übersicht V3/V5); L6 baut gegen deren Form und braucht keinen Servercode von L5.

Tech Stack: Vanilla-JS als ES-Module ohne Build (public/, ausgeliefert von express.static), node --test mit test/support/fakeDom.js, Playwright (playwright-core, Chromium) für die Oberflächenprüfung, Stripe-Metadaten im Server (customerInvoices.js).

Spec: docs/superpowers/specs/2026-10-06-auftraege-und-rechnungen-design.md (Abschnitte 2 „Bestätigung“, 2 „Widerruf“, 3 „Kundenportal“, 6, 9, 10)

Übersicht/Verträge: docs/superpowers/plans/2026-10-06-auftraege-00-uebersicht.md (verbindlich: Abschnitt „Nachträge nach der Planrunde“, Global Constraints, V3 AuftragOeffentlich, V5 Endpunkte, V6 Link auftrag.html#t=<Token>, V7 Texte; Dateizuständigkeit)

Worktree: /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6, Branch auftraege/l6-kundenportal (aus feature/auftraege nach L0). Kein Push.

Dateien dieses Strangs

Datei	Aufgabe	Task
server/services/customerInvoices.js	Feld projekt in customerStripeInvoice	2
public/auftrag-ansicht.js (neu)	Reine Logik: Token, Beträge, Daten, Zustände, Status, AB-Nummer, Texte	3
public/auftrag-dom.js (neu)	DOM-Bausteine: Zusammenfassung, Bestätigt-Block, Unterlagen, Bestätigen-Formular	4
public/auftrag.js (neu)	Seitenlogik der öffentlichen Seite (laden, Zustände, bestätigen)	5
public/auftrag.html, public/auftrag.css (neu)	Hülle und Gestaltung (CSS auch für den Portal-Abschnitt und .inv-project)	6, 7, 8
public/auftrag-portal.js (neu)	Abschnitt „Aufträge“ im Portal	7
public/dashboard.html, public/app.js	Abschnitt einhängen, Projekt unter der Rechnungsnummer	8
public/auftrag-widerruf.js (neu), public/widerrufen.html	Vertragsart „Projektauftrag“, freiwilliges Feld abNummer	9
test/auftraegeKundenportal*.test.js, test/auftraegeKundenportalDaten.js (Hilfsmodul, kein Test), test/ui/auftraege-kundenportal.ui.mjs	Tests, gemeinsame Testdaten, Playwright-Prüfung	2–10
test/customerInvoices.test.js, test/publicForms.test.js	je eine Zeile angepasst (Übersicht, Nachträge)	2, 9

Befunde aus der Codeprüfung (gelten für alle Tasks)

• Service Worker (public/sw.js): legt nur /offline.html ab und fängt nur Seitenaufrufe (navigate) ab (Netz zuerst, ohne Verbindung die Offline-Seite). Es gibt keine Seitenliste: auftrag.html braucht keinen Eintrag, CACHE bleibt kb-offline-v1 (nur bei Änderungen am Worker hochzählen). Token-Seiten und API-Antworten werden nie zwischengespeichert.
• Manifest (scope: "/"): Ein Link aus der Mail kann in der installierten App öffnen. auftrag.html muss deshalb im display-mode: standalone bedienbar sein: Abstand für die durchsichtige Statusleiste (env(safe-area-inset-top)) und ein Zurück-Link zum Kundenbereich, nur dort sichtbar (Muster legal-form.css). Kein Eintrag im Manifest.
• Fußzeile: login.html führt „Datenschutz · Impressum“, termin.html „Impressum WEBklar“, das Dashboard .kb-legal; widerrufen.html und kuendigen.html haben keine (Unterseiten des Kundenbereichs). auftrag.html ist von außen erreichbar und verarbeitet personenbezogene Daten: Fußzeile mit Datenschutz (/datenschutz.html) und Impressum (https://webklar.com/impressum), wie auf login.html (§ 5 DDG „leicht erkennbar, unmittelbar erreichbar“, Art. 13 DSGVO).
• Kundenansicht-Wächter (server/middleware/kundenansichtGuard.js): /api/auftrag/… steht nicht in PASS_PREFIXES; ein Kundenansicht-Cookie im Browser würde dort Schreibzugriffe ohne Kennung mit 409 view_replaced abweisen. Die öffentliche Seite sendet deshalb ohne Cookies (credentials: 'omit', Muster termin.js). Im Portal sperrt der Wächter POST /api/auftraege/:id/bestaetigen mit 403 view_blocked; die Oberfläche sperrt vorher selbst (Ansichtsmodus: chatState.viewAs, Wortwahl „Ansichtsmodus“ wie bei der Übernahmegutschrift).
• Express hat kein Zugriffsprotokoll; express.static(public) liefert auftrag.html ohne eigene Route. K31 verlinkt auftrag.html#t=<Token> (V6): das Fragment geht nie an Server oder Proxy; nur die API-Pfade /api/auftrag/<Token>… tragen den Token (V5).

Global Constraints

• Alle Punkte der Übersicht gelten (Sprache und Anrede, Schreibweise im Code, Cent-Beträge, Berliner Datum, Ressourcen, Git, Sicherheit der Umgebung), ebenso der Abschnitt „Nachträge nach der Planrunde“.
• Nur eigene Dateien (Tabelle oben). Nie ändern: public/legal-form.js, legal-form.css, sw.js, manifest.webmanifest, kundenbereich.css, kundenansicht.js, termine*, shop*, zeiten*, funktionen*. Neue Dateien nur unter public/auftrag*; Tests nur test/auftraegeKundenportal*.
• Kein HTML aus Daten: Kundentext und Servertext nur über textContent/h(); einzige Ausnahme sind die bestehenden escapeHtml-Vorlagen in app.js (Rechnungsnummer-Zelle). Kein confirm/alert/prompt, kein Browserspeicher, keine Cookies, kein console.* (der Token!), nur relative Importe ./auftrag-*.js (je Modul genau die, die sein pruefeQuelltext-Aufruf nennt, in der Reihenfolge ./auftrag-ansicht.js, dann ./auftrag-dom.js), kein dynamischer Import in den Modulen, keine Kundentexte außerhalb von auftrag-ansicht.js (die Anrede wählt der Aufrufer über ANREDE_SIE/ANREDE_DU, nie als Wort du im Code). pruefeQuelltext (Task 3) erzwingt das in jedem Modultest.
• Schreibweise im Code (Übersicht, Global Constraints): nie ein Unicode-Escape mit genau vier Hexziffern schreiben (Backslash, u, vier Ziffern): das Schreibwerkzeug macht daraus das Zeichen selbst, z. B. ein unsichtbares geschütztes Leerzeichen. Stattdessen \u{a0} im String, String.fromCodePoint(0xa0) oder im Regex-Literal mit u-Flag \u{2010}. pruefeQuelltext lehnt ein verstecktes geschütztes Leerzeichen im Quelltext ab.
• Fake-DOM der Tests (test/support/fakeDom.js): Elemente nur mit h()/createElement, append, replaceChildren, insertBefore, remove, setAttribute, classList, dataset, focus; Ziele von Links und Formularfeldern immer als Attribute setzen (href, target, rel, type, value über h bzw. setAttribute). Nicht vorhanden und daher nicht zu benutzen: innerHTML, style, replaceWith, replaceChild, cloneNode, toggleAttribute, insertAdjacentElement, window.scrollTo; fetch liefert nur ok, status und json(). null nie an append/replaceChildren geben (Text „null“): vorher mit .filter(Boolean) bereinigen.
• Öffentliche Seite: genau ein fetch, credentials: 'omit', nur an /api/auftrag/<Token> und …/bestaetigen. Der Token steht nur in Adresse, Links und Speicher der Seite, nie in Text, Ansage, Fehlermeldung oder Protokoll. Meldungen sind feste eigene Texte; vom Server wird nur der Grund eines 410 am Stichwort erkannt.
• Texte: die öffentliche Seite und die Widerrufsseite in der Sie-Form, der Abschnitt „Aufträge“ im angemeldeten Portal in der Du-Form wie das übrige Portal (Übersicht, Global Constraints). Alle Seitentexte stehen als Konstanten in auftrag-ansicht.js: neutrale gemeinsame Texte (TEXTE_GEMEINSAM), Sie-Texte (TEXTE_SIE) und die Du-Varianten für das Portal (TEXTE_DU); texte('sie' | 'du') liefert die Auswahl, renderBestaetigung und renderBestaetigtBlock bekommen anrede. Der Kleinunternehmer-Satz kommt aus auftrag.texte.kleinunternehmer der API, nie aus einer eigenen Konstante. Beträge im Format des Servers (Intl de-DE EUR, geschütztes Leerzeichen vor „€“); Datum TT.MM.JJJJ, Zeitpunkt TT.MM.JJJJ, HH:MM Uhr in Berliner Zeit, nie nach der Zeitzone des Browsers. Die rechtlich gefärbten Sätze der Seiten sammelt L7 im Freigabe-Dokument (Übersicht, Nachträge).
• Gestaltung: öffentliche Seite im Stil der Mailvorlagen (Farben aus server/mail-templates/K05 …, hell und dunkel per prefers-color-scheme); Portal-Abschnitt mit den vorhandenen --kb-*-Farben. Touch-Ziele mindestens 44 px, Hauptknopf 48 px; lange Wörter brechen um (overflow-wrap: anywhere); kein seitliches Scrollen bei 390 px.
• Shell und Läufe: command grep -a (grep ist hier eine Funktion); Node-Läufe mit --test-concurrency=1; Chromium nur hinter dem flock der Übersicht und nach free -m (mindestens 1500 MB „available“).

Review Focus

1. Kaputter, fehlender oder doppelter Token in der Adresse (auftrag.html ohne t, #t=abc, 44 Zeichen, zweimal t; Fragment vor ?t=): Seite sagt „Link ungültig“, nennt den Kontaktweg, stellt keine Anfrage; der Token steht nie im Text, in der Ansage oder in einer Fehlermeldung. → Test: Task 3 Token: …, Task 5 Ohne gültigen Token … und Zustände ….
2. Doppelklick oder Enter während des Sendens, zweite Bestätigung aus einem anderen Tab, Serverantwort weicht vom Häkchen ab: genau ein POST; angezeigt wird, was der Server zurückgibt (z. B. Frühbeginn „nein“ trotz Häkchen). → Test: Task 4 Doppelter Absenden-Versuch …, Task 5 Privatperson: … was der Server meldet ….
3. Fremdtext (Projekttitel, Positionstexte, Zahlungsplan-Freitext mit <, &, ", 200 Zeichen ohne Leerzeichen): immer Text, nie HTML, kein seitliches Scrollen auf dem Handy. → Test: Task 4 Fremdtext bleibt Text, Task 7 Fremdtext …, Task 8 invoiceNumberHtml …, Task 6 (CSS overflow-wrap), Task 10 (kein Überlauf bei 390 px).
4. Kundenansicht und Ausfälle im Portal: Bestätigen gesperrt (Häkchen, Knopf, kein POST), Abschnitt bleibt lesbar; Abschnitt unsichtbar bei aktiv: false, leerer Liste und Ladefehler, ohne die Rechnungen zu stören; Status wechselt (410) → Liste lädt neu. → Test: Task 7 Ansichtsmodus …, Der Abschnitt bleibt weg …, Fehler beim Bestätigen ….
5. Freiwillige AB-Nummer auf der Widerrufsseite: Schreibweisen der Praxis („ab 2026 0001“, Halbgeviertstrich, Leerzeichen am Rand) werden vereinheitlicht, eine eingegebene, aber unpassende Nummer wird gemeldet und stoppt das Absenden, ein leeres Feld lässt den Widerruf durch (Widerruf bleibt formfrei); Wechsel der Vertragsart (Feld nur bei „Projektauftrag“, sonst leer gesendet). → Test: Task 3 AB-Nummer …, Task 9 Projektauftrag: eine eingegebene, aber unpassende Nummer … und Ohne Nummer geht der Projektauftrag durch.

---

Task 1: Worktree einrichten und Ausgangslage prüfen

Files: keine Änderung an Dateien (Worktree, Symlink).

Interfaces:

• Consumes: Branch feature/auftraege mit dem Stand nach L0 (server/services/auftraege/schema.js existiert, dev-auftraege/node_modules ist ein echtes Verzeichnis).

• Produces: Worktree /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 auf Branch auftraege/l6-kundenportal; Liste der Tests, die schon vor der ersten Änderung rot sind.

• Step 1: Prüfen, dass L0 fertig ist

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege && test -f server/services/auftraege/schema.js && test -d node_modules && git log --oneline -3 && git status --short

Erwartet: beide test ohne Ausgabe, drei Commits, git status --short ohne Einträge außer ggf. unversionierten Plan-Dateien unter docs/superpowers/plans/. Fehlt schema.js oder node_modules: stoppen und dem Auftraggeber melden (L0 ist noch nicht fertig).

• Step 2: Worktree und Symlink anlegen

git -C /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege worktree add ../dev-auftraege-l6 -b auftraege/l6-kundenportal feature/auftraege
cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && ln -s ../dev-auftraege/node_modules node_modules && git status --short && git branch --show-current

Erwartet: git status --short ohne Eintrag (L0 stellt .gitignore auf node_modules ohne Schrägstrich, darum wird der Symlink ignoriert; steht trotzdem ?? node_modules da, ist das nur der Symlink und bleibt unversioniert) und auftraege/l6-kundenportal. Nie git add -A, immer Dateien einzeln.

• Step 3: Ausgangslage der berührten bestehenden Tests

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && free -m | head -2 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test --test-concurrency=1 test/customerInvoices.test.js test/publicForms.test.js test/shopWiring.test.js test/termineView.test.js test/zeitenBestellen.test.js test/analyseView.test.js test/funktionenRoutes.test.js test/termineFragebogenView.test.js 2>&1 | tail -15

Erwartet: fail 0. Ist ein Test schon jetzt rot, Namen und Fehler für den Bericht in Task 11 notieren (dort keine Regression). Unter 1500 MB „available“: warten.

Kein Commit.

---

Task 2: Rechnungsliste nennt das Projekt (customerInvoices.js)

Files:

• Modify: server/services/customerInvoices.js (customerStripeInvoice)
• Modify: test/customerInvoices.test.js (genau eine Zeile im Test „Liste: Felder einer bezahlten Abo-Rechnung …“; Übersicht, Nachträge)
• Create: test/auftraegeKundenportalRechnungen.test.js

Interfaces:

• Consumes: Stripe-Metadaten metadata.projektName (schreibt Strang L2 laut Übersicht V4; Abo- und Altrechnungen haben keine).

• Produces: customerStripeInvoice(raw).projekt: string ('' ohne Projekt); GET /api/invoices liefert projekt an jedem Stripe-Eintrag (InvoiceNinja-Einträge bleiben ohne das Feld). Die Oberfläche (Task 8) liest i.projekt.

• Step 1: Failing Test schreiben

test/auftraegeKundenportalRechnungen.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { useTestEnv } from './support/testEnv.js'

// Reiner Test von customerStripeInvoice: config.js liest die Umgebung beim ersten Import, die Adressen werden nie angefragt.
useTestEnv({ appwriteUrl: 'http://127.0.0.1:9', stripeUrl: 'http://127.0.0.1:9' })
const { customerStripeInvoice } = await import('../server/services/customerInvoices.js')

const roh = (over = {}) => ({
  id: 'in_1', number: 'WEBKLAR-0009', status: 'open', effective_at: 1_791_000_000, due_date: 1_792_000_000,
  total: 50000, amount_remaining: 50000, hosted_invoice_url: 'https://invoice.stripe.com/i/in_1',
  invoice_pdf: 'https://pay.stripe.com/invoice/in_1/pdf', metadata: {}, ...over,
})

test('Rechnung der Kunden-Liste: projekt kommt aus metadata.projektName, sonst leer', () => {
  assert.equal(customerStripeInvoice(roh({ metadata: { projektName: 'Website Anelia Wolf' } })).projekt, 'Website Anelia Wolf')
  assert.equal(customerStripeInvoice(roh()).projekt, '')
  assert.equal(customerStripeInvoice(roh({ metadata: { webklarCustomerId: 'c1', art: 'abo' } })).projekt, '')
  const ohneMetadaten = roh()
  delete ohneMetadaten.metadata
  assert.equal(customerStripeInvoice(ohneMetadaten).projekt, '')
})

test('Rechnung der Kunden-Liste: die bisherigen Felder bleiben, projekt kommt dazu', () => {
  assert.deepEqual(Object.keys(customerStripeInvoice(roh())).sort(), [
    'amount', 'balance', 'cancelled', 'date', 'dueDate', 'hasPdf', 'id', 'number', 'overdue', 'paid', 'portalUrl', 'projekt', 'source', 'status',
  ])
})

In test/customerInvoices.test.js im Test „Liste: Felder einer bezahlten Abo-Rechnung (Betraege in Euro, Link zur Rechnungsseite, PDF)“ der erwarteten Form (assert.deepEqual(abo, { … })) die Zeile projekt: '', nach hasPdf: true, hinzufügen. Sonst nichts an dieser Datei.

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test --test-concurrency=1 test/auftraegeKundenportalRechnungen.test.js test/customerInvoices.test.js

Erwartet: FAIL (projekt fehlt: neuer Test und der angepasste deepEqual).

• Step 3: Implementieren in server/services/customerInvoices.js

In customerStripeInvoice(raw, { today }) dem zurückgegebenen Objekt projekt: raw.metadata?.projektName || '' hinzufügen (Stripe-Metadaten sind immer Text; Übersicht V4 „L6“). Den Doc-Kommentar der Funktion um einen Satz ergänzen: „projekt ist der Projektname aus den Stripe-Metadaten (Projektrechnungen aus dem WOMS), sonst leer.“ fromInvoiceNinja bleibt unverändert.

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2. Erwartet: fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add server/services/customerInvoices.js test/customerInvoices.test.js test/auftraegeKundenportalRechnungen.test.js && git commit -m "Kundenportal: Rechnungsliste kennt das Projekt (Feld projekt aus den Stripe-Metadaten)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 3: Reine Ansichtslogik public/auftrag-ansicht.js

Files:

• Create: public/auftrag-ansicht.js
• Create: test/auftraegeKundenportalDaten.js (gemeinsame Testdaten und Quelltext-Regeln; heißt bewusst nicht *.test.js)
• Create: test/auftraegeKundenportalAnsicht.test.js

Interfaces:

• Consumes: nichts (reines Modul ohne Importe, ohne DOM, ohne fetch). Datenformen: Übersicht V3 AuftragOeffentlich.

• Produces (alle Exporte von public/auftrag-ansicht.js; spätere Tasks verlassen sich auf genau diese Namen):

  • TOKEN_MUSTER, KONTAKT ({ email: 'support@webklar.com', telefon: '0176 23726355' }), BESTAETIGUNG_FALLBACK, ANREDE_SIE ('sie'), ANREDE_DU ('du'), TEXTE_GEMEINSAM, TEXTE_SIE, TEXTE_DU (Tabellen in Step 3), texte(anrede = ANREDE_SIE) → object
  • tokenAusAdresse(suche = '', hash = '') → string ('' = ungültig; das Fragment #t= gilt zuerst, dann ?t=)
  • euroDe(cents) → string, datumDe(wert) → string, zeitpunktDe(iso) → string
  • pdfPfad(token) → string, agbPfad(agbUrl) → string ('' = kein sicherer Link)
  • zeigtFruehbeginn(auftrag) → boolean, darfBestaetigen(auftrag) → boolean
  • statusAnzeige(auftrag) → { text, ton } mit ton ∈ 'ok' | 'warn' | 'muted' | 'rot'
  • kartenMeta(auftrag) → string, sortiereAuftraege(liste) → Auftrag[]
  • zusammenfassung(auftrag) → { kopf, art, positionen, summe, aufwand, zahlung, termine, hinweis } (hinweis = auftrag.texte.kleinunternehmer von der API, sonst '')
  • bestaetigtZeilen(auftrag, anrede = ANREDE_SIE) → string[]
  • zustandAusAntwort(status, body) → { zustand: 'ungueltig' | 'beendet' | 'limit' | 'fehler', titel, text } (nur die öffentliche Seite, Sie-Form)
  • fehlerMeldung(status, anrede = ANREDE_SIE) → string
  • abNummerNormalisiert(eingabe) → string ('AB-JJJJ-NNNN' oder '')
  • aus test/auftraegeKundenportalDaten.js: TOKEN, BESTAETIGT_AM, KLEINUNTERNEHMER, ab(over), privat(over), bestaetigt(auftrag), eintrag(over), hatDuForm(text), hatSieForm(text), pruefeQuelltext(datei, { fetchAnzahl, importe, mitTexten })

• Step 1: Failing Test schreiben

test/auftraegeKundenportalDaten.js:

// Gemeinsame Testdaten und Quelltext-Regeln des Strangs L6 (kein Test, daher nicht *.test.js).
// Formen laut Übersicht V3 (AuftragOeffentlich) und V5 (Liste im Portal: plus id und kannBestaetigen).
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'

export const TOKEN = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFG' // 43 Zeichen wie ein echter Token (base64url)
export const BESTAETIGT_AM = '2026-10-07T08:15:00.000Z' // = 07.10.2026, 10:15 Uhr Berliner Zeit (MESZ)
export const KLEINUNTERNEHMER = 'Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.' // wie AB_TEXTE.kleinunternehmer; die API liefert ihn als texte.kleinunternehmer

/** Festpreis-AB eines Unternehmens, gesendet, noch nicht bestätigt. */
export const ab = (over = {}) => ({
  nummer: 'AB-2026-0002', datum: '2026-10-06', titel: 'Website Anelia Wolf', art: 'festpreis',
  positionen: [
    { beschreibung: 'Erstellung der Website anelia-wolf.com', menge: 1, einzelpreisCents: 60000, summeCents: 60000 },
    { beschreibung: 'Texte und Bildbearbeitung', menge: 2, einzelpreisCents: 10000, summeCents: 20000 },
  ],
  summeCents: 80000, stundensatzCents: null, schaetzungMinuten: null, aufwandText: null,
  zahlungsplanText: 'Anzahlung 50 % (400,00 €) nach Auftragsbestätigung, Rest (400,00 €) nach Abnahme; zahlbar jeweils innerhalb von 14 Tagen nach Rechnung.',
  startAm: '2026-10-12', fertigBis: '2026-11-30', kundenart: 'unternehmen', status: 'versendet',
  bestaetigtAm: null, fruehbeginn: false, fruehesterBeginn: null, agbUrl: '/rechtliches/agb-2026-09-30.pdf',
  texte: { bestaetigung: 'Ich bestätige den Auftrag zu diesen Bedingungen.', fruehbeginn: null, kleinunternehmer: KLEINUNTERNEHMER },
  ...over,
})

/** Dieselbe AB für eine Privatperson (zweites, freiwilliges Häkchen; Texte sind Testtexte, nicht die der Rechtsrunde). */
export const privat = (over = {}) => ab({
  kundenart: 'privat', fruehesterBeginn: '2026-10-21',
  texte: {
    bestaetigung: 'Ich bestätige den Auftrag zu diesen Bedingungen.',
    fruehbeginn: 'Ich verlange, dass Sie schon vor Ablauf der Widerrufsfrist mit der Arbeit beginnen.',
    kleinunternehmer: KLEINUNTERNEHMER,
  },
  ...over,
})

/** Die übergebene AB im Zustand „bestätigt“. */
export const bestaetigt = (auftrag) => ({ ...auftrag, status: 'bestaetigt', bestaetigtAm: BESTAETIGT_AM })

/** Eintrag der Portal-Liste (GET /api/auftraege): AB plus id und kannBestaetigen. */
export const eintrag = (over = {}) => ({ id: 'ab1', ...ab(), kannBestaetigen: true, ...over })

const ohneKommentare = (quelle) => quelle.replace(/\/\*[\s\S]*?\*\//g, '').replace(/(^|\s)\/\/.*$/gm, '$1')
const DU = /\b(?:du|dein(?:e[nmrs]?)?|dich|dir)\b/i
const SIE = /\b(?:Sie|Ihr(?:e[nmrs]?)?|Ihnen)\b/
/** Steht eine Du- bzw. Sie-Form im Text? (Anrede-Prüfungen der Tests) */
export const hatDuForm = (text) => DU.test(String(text))
export const hatSieForm = (text) => SIE.test(String(text))

/**
 * Quelltext-Regeln für jedes Modul public/auftrag*.js; gibt den Quelltext ohne Kommentare zurück.
 * mitTexten: nur auftrag-ansicht.js enthält Kundentexte (ihre Anrede prüft der Test selbst); alle anderen Module enthalten weder Du- noch Sie-Formen.
 */
export function pruefeQuelltext(datei, { fetchAnzahl = 0, importe = [], mitTexten = false } = {}) {
  const quelle = ohneKommentare(readFileSync(new URL(`../public/${datei}`, import.meta.url), 'utf8'))
  assert.doesNotMatch(quelle, /innerHTML|insertAdjacentHTML|outerHTML|document\.write|\beval\(|new Function/, `${datei}: Daten nie als HTML`)
  assert.doesNotMatch(quelle, /localStorage|sessionStorage|document\.cookie|indexedDB/, `${datei}: kein Browserspeicher`)
  assert.doesNotMatch(quelle, /\bconsole\./, `${datei}: nichts ins Protokoll (der Token!)`)
  assert.doesNotMatch(quelle, /\bconfirm\(|\balert\(|\bprompt\(/, `${datei}: keine Browser-Rückfragen`)
  assert.doesNotMatch(quelle, /import\s*\(/, `${datei}: kein dynamischer Import`)
  assert.ok(!quelle.includes(String.fromCodePoint(0xa0)), `${datei}: kein verstecktes geschütztes Leerzeichen im Quelltext`)
  if (!mitTexten) assert.ok(!DU.test(quelle) && !hatSieForm(quelle), `${datei}: keine Kundentexte im Modul (sie stehen in auftrag-ansicht.js; Anrede über ANREDE_SIE/ANREDE_DU)`)
  assert.equal([...quelle.matchAll(/\bfetch\(/g)].length, fetchAnzahl, `${datei}: Anzahl fetch`)
  assert.deepEqual([...quelle.matchAll(/\bfrom\s+'([^']+)'/g)].map((m) => m[1]), importe, `${datei}: Importe`)
  return quelle
}

test/auftraegeKundenportalAnsicht.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import {
  TOKEN_MUSTER, KONTAKT, ANREDE_SIE, ANREDE_DU, TEXTE_GEMEINSAM, TEXTE_SIE, TEXTE_DU, texte, tokenAusAdresse, euroDe, datumDe, zeitpunktDe,
  pdfPfad, agbPfad, zeigtFruehbeginn, darfBestaetigen, statusAnzeige, kartenMeta, zusammenfassung, bestaetigtZeilen, zustandAusAntwort,
  fehlerMeldung, sortiereAuftraege, abNummerNormalisiert,
} from '../public/auftrag-ansicht.js'
import { TOKEN, BESTAETIGT_AM, KLEINUNTERNEHMER, ab, privat, bestaetigt, hatDuForm, hatSieForm, pruefeQuelltext } from './auftraegeKundenportalDaten.js'

const NB = '\u{a0}' // geschütztes Leerzeichen vor „€“ (wie euroDe auf dem Server)

test('Token: 43 Zeichen base64url, zuerst aus #t= (so verlinkt K31), sonst aus ?t=, nie mehrdeutig', () => {
  assert.equal(TOKEN.length, 43)
  assert.match(TOKEN, TOKEN_MUSTER)
  assert.equal(tokenAusAdresse('', `#t=${TOKEN}`), TOKEN)
  assert.equal(tokenAusAdresse(`?t=${TOKEN}`, ''), TOKEN)
  assert.equal(tokenAusAdresse(`?x=1&t=${TOKEN}`, ''), TOKEN)
  const anderer = 'y'.repeat(43)
  assert.equal(tokenAusAdresse(`?t=${TOKEN}`, `#t=${anderer}`), anderer, 'das Fragment gewinnt')
  assert.equal(tokenAusAdresse(`?t=${TOKEN}`, '#t=abc'), TOKEN, 'ungültiges Fragment: weiter mit der Suche')
  for (const hash of ['', '#', '#t=', '#t=abc', `#t=${TOKEN}x`, `#t=${TOKEN.slice(0, 42)}!`, `#t=${TOKEN}&t=${TOKEN}`, `#token=${TOKEN}`]) {
    assert.equal(tokenAusAdresse('', hash), '', hash)
  }
  assert.equal(tokenAusAdresse(`?t=${TOKEN}&t=${TOKEN}`, ''), '')
  assert.equal(tokenAusAdresse(undefined, undefined), '')
})

test('Beträge: ganze Cent als deutscher Euro-Betrag wie auf dem Server', () => {
  assert.equal(euroDe(80000), `800,00${NB}€`)
  assert.equal(euroDe(123456), `1.234,56${NB}€`)
  assert.equal(euroDe(5), `0,05${NB}€`)
  assert.equal(euroDe(0), `0,00${NB}€`)
  assert.equal(euroDe(-449), `−4,49${NB}€`)
  for (const kaputt of [1.5, '800', null, undefined, Number.NaN]) assert.equal(euroDe(kaputt), '–')
})

test('Datum und Zeit: Berliner Zeit, unabhängig von der Zeitzone des Browsers', () => {
  assert.equal(datumDe('2026-10-06'), '06.10.2026')
  assert.equal(datumDe('06.10.2026'), '06.10.2026')
  assert.equal(datumDe('2026-10-06T22:30:00.000Z'), '07.10.2026') // 00:30 MESZ am Folgetag
  for (const kaputt of ['', null, undefined, 'morgen', '2026-10', 20261006]) assert.equal(datumDe(kaputt), '')
  assert.equal(zeitpunktDe(BESTAETIGT_AM), '07.10.2026, 10:15 Uhr')
  assert.equal(zeitpunktDe('2026-10-07T08:15:00.000+00:00'), '07.10.2026, 10:15 Uhr') // so liefert Appwrite
  assert.equal(zeitpunktDe('2026-12-01T08:15:00Z'), '01.12.2026, 09:15 Uhr') // Winterzeit
  assert.equal(zeitpunktDe('2026-10-06T22:05:00Z'), '07.10.2026, 00:05 Uhr') // Mitternacht ohne „24“
  for (const kaputt of ['', null, undefined, 'bald']) assert.equal(zeitpunktDe(kaputt), '')
})

test('Links: PDF-Pfad aus dem Token, AGB nur als PDF unter /rechtliches/', () => {
  assert.equal(pdfPfad(TOKEN), `/api/auftrag/${TOKEN}/pdf`)
  assert.equal(agbPfad('/rechtliches/agb-2026-09-30.pdf'), '/rechtliches/agb-2026-09-30.pdf')
  for (const boese of ['https://evil.example/agb.pdf', '//evil.example/agb.pdf', '/rechtliches/../x.pdf', '/rechtliches/agb.pdf?x=1', '/rechtliches/agb.html', 'javascript:alert(1)', '', null, undefined, 5]) {
    assert.equal(agbPfad(boese), '', String(boese))
  }
})

test('Häkchen: Frühbeginn nur mit Text vom Server; Bestätigen nur, solange nicht bestätigt', () => {
  assert.equal(zeigtFruehbeginn(privat()), true)
  assert.equal(zeigtFruehbeginn(ab()), false)
  assert.equal(zeigtFruehbeginn(privat({ texte: { bestaetigung: 'x', fruehbeginn: '   ' } })), false)
  assert.equal(zeigtFruehbeginn({}), false)
  assert.equal(darfBestaetigen(ab()), true)
  assert.equal(darfBestaetigen(ab({ status: 'abgerechnet' })), true) // Schlussrechnung vor der Bestätigung (Übersicht V2)
  assert.equal(darfBestaetigen(bestaetigt(ab())), false)
  assert.equal(darfBestaetigen(ab({ status: 'abgerechnet', bestaetigtAm: BESTAETIGT_AM })), false)
  for (const status of ['storniert', 'ersetzt', 'widerrufen', 'entwurf']) assert.equal(darfBestaetigen(ab({ status })), false, status)
})

test('Status: Beschriftung und Ton; „Bitte bestätigen“ nur mit kannBestaetigen und ohne Bestätigung', () => {
  assert.deepEqual(statusAnzeige({ status: 'versendet', kannBestaetigen: true, bestaetigtAm: null }), { text: 'Bitte bestätigen', ton: 'warn' })
  assert.deepEqual(statusAnzeige({ status: 'abgerechnet', kannBestaetigen: true, bestaetigtAm: null }), { text: 'Bitte bestätigen', ton: 'warn' })
  assert.deepEqual(statusAnzeige({ status: 'versendet' }), { text: 'Versendet', ton: 'muted' })
  assert.deepEqual(statusAnzeige({ status: 'bestaetigt', bestaetigtAm: BESTAETIGT_AM, kannBestaetigen: false }), { text: 'Bestätigt', ton: 'ok' })
  assert.deepEqual(statusAnzeige({ status: 'abgerechnet', bestaetigtAm: BESTAETIGT_AM }), { text: 'Abgerechnet', ton: 'ok' })
  assert.deepEqual(statusAnzeige({ status: 'storniert' }), { text: 'Storniert', ton: 'muted' })
  assert.deepEqual(statusAnzeige({ status: 'ersetzt' }), { text: 'Ersetzt', ton: 'muted' })
  assert.deepEqual(statusAnzeige({ status: 'widerrufen' }), { text: 'Widerrufen', ton: 'rot' })
  assert.deepEqual(statusAnzeige({ status: 'unbekannt' }), { text: '–', ton: 'muted' })
  assert.deepEqual(statusAnzeige(undefined), { text: '–', ton: 'muted' })
})

test('Karten-Zeile und Sortierung der Portalliste', () => {
  assert.equal(kartenMeta(ab()), `vom 06.10.2026 · 800,00${NB}€`)
  assert.equal(kartenMeta(ab({ art: 'aufwand', positionen: [], summeCents: null })), 'vom 06.10.2026 · nach Aufwand')
  assert.equal(kartenMeta(ab({ datum: '' })), `800,00${NB}€`)
  assert.equal(kartenMeta({}), '')
  const liste = [
    { nummer: 'AB-2026-0001', kannBestaetigen: false }, { nummer: 'AB-2026-0003', kannBestaetigen: false },
    { nummer: 'AB-2026-0002', kannBestaetigen: true }, { nummer: 'AB-2025-0009', kannBestaetigen: false },
  ]
  assert.deepEqual(sortiereAuftraege(liste).map((a) => a.nummer), ['AB-2026-0002', 'AB-2026-0003', 'AB-2026-0001', 'AB-2025-0009'])
  assert.equal(liste[0].nummer, 'AB-2026-0001', 'die Eingabe bleibt unverändert')
  assert.deepEqual(sortiereAuftraege(undefined), [])
})

test('Zusammenfassung (Festpreis): Kopf, Positionen, Summe, Zahlungsplan, Termine, § 19 aus der API', () => {
  assert.deepEqual(zusammenfassung(ab()), {
    kopf: [{ label: 'Nummer', wert: 'AB-2026-0002' }, { label: 'Datum', wert: '06.10.2026' }, { label: 'Projekt', wert: 'Website Anelia Wolf' }],
    art: 'festpreis',
    positionen: [
      { beschreibung: 'Erstellung der Website anelia-wolf.com', menge: '1', einzelpreis: `600,00${NB}€`, summe: `600,00${NB}€` },
      { beschreibung: 'Texte und Bildbearbeitung', menge: '2', einzelpreis: `100,00${NB}€`, summe: `200,00${NB}€` },
    ],
    summe: `800,00${NB}€`,
    aufwand: '',
    zahlung: ab().zahlungsplanText,
    termine: [{ label: 'Start', wert: '12.10.2026' }, { label: 'Voraussichtliche Fertigstellung', wert: '30.11.2026' }],
    hinweis: KLEINUNTERNEHMER,
  })
})

test('Zusammenfassung (Aufwand): Aufwandstext statt Positionen; Termine nur, wenn gesetzt; ohne Satz der API kein § 19-Hinweis; leere Eingabe wirft nicht', () => {
  const z = zusammenfassung(ab({
    art: 'aufwand', positionen: [], summeCents: null, aufwandText: '100,00 € pro Stunde in Schritten von 15 Minuten.',
    zahlungsplanText: 'Monatlich nach Aufwand.', startAm: '2026-10-12', fertigBis: '',
  }))
  assert.equal(z.art, 'aufwand')
  assert.deepEqual(z.positionen, [])
  assert.equal(z.summe, '')
  assert.equal(z.aufwand, '100,00 € pro Stunde in Schritten von 15 Minuten.')
  assert.equal(z.zahlung, 'Monatlich nach Aufwand.')
  assert.deepEqual(z.termine, [{ label: 'Start', wert: '12.10.2026' }])
  assert.equal(z.hinweis, KLEINUNTERNEHMER)
  assert.equal(zusammenfassung(ab({ texte: { bestaetigung: 'x', fruehbeginn: null } })).hinweis, '', 'keine eigene Ersatzkonstante: der Satz kommt von der API')
  assert.deepEqual(zusammenfassung({}), { kopf: [], art: 'festpreis', positionen: [], summe: '', aufwand: '', zahlung: '', termine: [], hinweis: '' })
  assert.doesNotThrow(() => zusammenfassung(undefined))
})

test('Bestätigt-Zeilen: Zeitpunkt, bei Privatpersonen Frühbeginn bzw. frühester Beginn, in beiden Anreden', () => {
  assert.deepEqual(bestaetigtZeilen(ab()), [])
  assert.deepEqual(bestaetigtZeilen(bestaetigt(ab())), ['Bestätigt am 07.10.2026, 10:15 Uhr'])
  assert.deepEqual(bestaetigtZeilen(bestaetigt(ab({ fruehesterBeginn: '2026-10-21' }))), ['Bestätigt am 07.10.2026, 10:15 Uhr'], 'Unternehmen: keine Zeile zum Beginn')
  assert.deepEqual(bestaetigtZeilen(bestaetigt(privat())), ['Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen frühestens am 21.10.2026.'])
  const wunsch = bestaetigt(privat({ fruehbeginn: true, fruehesterBeginn: null }))
  assert.deepEqual(bestaetigtZeilen(wunsch), ['Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen auf Ihren Wunsch schon vor Ablauf der Widerrufsfrist.'])
  assert.deepEqual(bestaetigtZeilen(wunsch, ANREDE_DU), ['Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen auf deinen Wunsch schon vor Ablauf der Widerrufsfrist.'])
  assert.deepEqual(bestaetigtZeilen(bestaetigt(privat({ fruehesterBeginn: null }))), ['Bestätigt am 07.10.2026, 10:15 Uhr'])
  assert.deepEqual(bestaetigtZeilen({ bestaetigtAm: 'kaputt' }), ['Bestätigt'])
})

test('Zustände aus der Serverantwort: feste Texte, der 410-Grund nur aus dem Stichwort', () => {
  const kontakt = 'Bitte melden Sie sich bei uns. Wir senden Ihnen gern einen neuen Link.'
  assert.deepEqual(zustandAusAntwort(404, { error: 'Dieser Link ist ungültig oder abgelaufen.' }), { zustand: 'ungueltig', titel: 'Dieser Link ist ungültig oder abgelaufen.', text: kontakt })
  assert.deepEqual(zustandAusAntwort(410, { error: 'Diese Auftragsbestätigung wurde ersetzt.' }), {
    zustand: 'beendet', titel: 'Diese Auftragsbestätigung wurde ersetzt.', text: 'Bitte verwenden Sie den Link in der neuesten Auftragsbestätigung, die wir Ihnen geschickt haben.',
  })
  for (const grund of ['storniert', 'widerrufen']) {
    assert.deepEqual(zustandAusAntwort(410, { error: `Diese Auftragsbestätigung wurde ${grund}.` }), {
      zustand: 'beendet', titel: `Diese Auftragsbestätigung wurde ${grund}.`, text: 'Bei Fragen melden Sie sich gern bei uns.',
    })
  }
  for (const body of [{ error: `Irgendwas mit ${TOKEN}` }, {}, undefined, null]) { // fremder Text (auch mit Token) wird nie angezeigt
    const z = zustandAusAntwort(410, body)
    assert.equal(z.titel, 'Diese Auftragsbestätigung ist nicht mehr gültig.')
    assert.equal(z.text, 'Bei Fragen melden Sie sich gern bei uns.')
  }
  assert.deepEqual(zustandAusAntwort(429, { error: 'Zu viele Anfragen. Bitte später erneut versuchen.' }), { zustand: 'limit', titel: 'Zu viele Anfragen', text: 'Bitte versuchen Sie es in einigen Minuten noch einmal.' })
  for (const status of [0, 400, 401, 500, 502, 503]) {
    assert.deepEqual(zustandAusAntwort(status, { error: 'Interner Fehler.' }), {
      zustand: 'fehler', titel: 'Das hat leider nicht geklappt', text: 'Ihre Auftragsbestätigung konnte gerade nicht geladen werden. Bitte versuchen Sie es in einigen Minuten noch einmal.',
    })
  }
})

test('Fehlermeldungen beim Bestätigen: feste eigene Texte nach Status, Sie auf der Seite und Du im Portal', () => {
  assert.equal(fehlerMeldung(0), 'Keine Verbindung. Bitte prüfen Sie Ihre Internetverbindung und versuchen Sie es erneut.')
  assert.equal(fehlerMeldung(400), 'Bitte setzen Sie das Häkchen, um den Auftrag zu bestätigen.')
  assert.equal(fehlerMeldung(401), 'Ihre Anmeldung ist abgelaufen. Bitte laden Sie die Seite neu und melden Sie sich erneut an.')
  for (const status of [403, 409]) assert.equal(fehlerMeldung(status), 'Das Bestätigen ist gerade nicht möglich. Bitte laden Sie die Seite neu.')
  assert.equal(fehlerMeldung(429), 'Zu viele Anfragen. Bitte versuchen Sie es in einigen Minuten noch einmal.')
  for (const status of [500, 502, 503, undefined]) assert.equal(fehlerMeldung(status), 'Die Bestätigung konnte nicht gespeichert werden. Bitte versuchen Sie es später noch einmal.')
  assert.equal(fehlerMeldung(0, ANREDE_DU), 'Keine Verbindung. Bitte prüfe deine Internetverbindung und versuche es erneut.')
  assert.equal(fehlerMeldung(400, ANREDE_DU), 'Bitte setze das Häkchen, um den Auftrag zu bestätigen.')
  assert.equal(fehlerMeldung(401, ANREDE_DU), 'Deine Anmeldung ist abgelaufen. Bitte lade die Seite neu und melde dich erneut an.')
  for (const status of [403, 409]) assert.equal(fehlerMeldung(status, ANREDE_DU), 'Das Bestätigen ist gerade nicht möglich. Bitte lade die Seite neu.')
  assert.equal(fehlerMeldung(429, ANREDE_DU), 'Zu viele Anfragen. Bitte versuche es in einigen Minuten noch einmal.')
  for (const status of [500, 502, 503, undefined]) assert.equal(fehlerMeldung(status, ANREDE_DU), 'Die Bestätigung konnte nicht gespeichert werden. Bitte versuche es später noch einmal.')
})

const werte = (objekt) => Object.values(objekt).flatMap((wert) => (wert && typeof wert === 'object' ? werte(wert) : [wert])).filter((wert) => typeof wert === 'string')

test('Anrede: gemeinsame Texte neutral, öffentliche Seite Sie, Portal Du; jede Du-Variante hat ihr Sie-Gegenstück', () => {
  assert.equal(ANREDE_SIE, 'sie')
  assert.equal(ANREDE_DU, 'du')
  for (const text of werte(TEXTE_GEMEINSAM)) assert.ok(!hatDuForm(text) && !hatSieForm(text), text)
  for (const text of werte(TEXTE_SIE)) assert.ok(!hatDuForm(text), text)
  for (const text of werte(TEXTE_DU)) assert.ok(!hatSieForm(text), text)
  assert.deepEqual(Object.keys(TEXTE_DU).sort(), ['fehler', 'formular', 'fruehbeginnWunsch', 'speicherHinweis'])
  for (const schluessel of Object.keys(TEXTE_DU)) assert.ok(schluessel in TEXTE_SIE, schluessel)
  assert.deepEqual(Object.keys(TEXTE_DU.fehler), Object.keys(TEXTE_SIE.fehler))
  assert.equal(texte().formular, 'Ihre Bestätigung', 'ohne Angabe gilt Sie')
  assert.equal(texte(ANREDE_SIE).speicherHinweis, 'Ihre Bestätigung wird mit Datum und Uhrzeit gespeichert.')
  assert.equal(texte(ANREDE_DU).formular, 'Deine Bestätigung')
  assert.equal(texte(ANREDE_DU).speicherHinweis, 'Deine Bestätigung wird mit Datum und Uhrzeit gespeichert.')
  assert.equal(texte(ANREDE_DU).knopf, 'Auftrag bestätigen', 'gemeinsame Texte gibt es in beiden Anreden')
  assert.equal(texte(ANREDE_DU).ansichtsmodus, 'Im Ansichtsmodus kann der Auftrag nicht bestätigt werden. Die Bestätigung gibt der Kunde selbst ab.')
})

test('AB-Nummer: Schreibweisen der Praxis werden zu AB-JJJJ-NNNN, alles andere zu leer', () => {
  assert.equal(abNummerNormalisiert('AB-2026-0001'), 'AB-2026-0001')
  assert.equal(abNummerNormalisiert(' ab-2026-0001 '), 'AB-2026-0001')
  assert.equal(abNummerNormalisiert('ab 2026 0001'), 'AB-2026-0001')
  assert.equal(abNummerNormalisiert('AB – 2026 – 0001'), 'AB-2026-0001') // Halbgeviertstrich mit Leerzeichen
  assert.equal(abNummerNormalisiert('AB−2026−0001'), 'AB-2026-0001') // Minuszeichen
  for (const kaputt of ['', '   ', 'AB-2026-01', 'AB-26-0001', 'RE-2026-0001', 'AB-2026-0001-1', 'AB20260001', undefined, null]) assert.equal(abNummerNormalisiert(kaputt), '', String(kaputt))
})

test('Quelltext und Kontakt: reines Modul ohne Importe, fetch und DOM; Kontaktdaten wie in den Rechtstexten', () => {
  pruefeQuelltext('auftrag-ansicht.js', { mitTexten: true })
  assert.deepEqual(KONTAKT, { email: 'support@webklar.com', telefon: '0176 23726355' })
})

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test test/auftraegeKundenportalAnsicht.test.js

Erwartet: FAIL (Cannot find module '../public/auftrag-ansicht.js').

• Step 3: public/auftrag-ansicht.js implementieren

ES-Modul ohne Importe, ohne document/window/fetch. Formatierer einmal anlegen: Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }) wie euroDe in server/services/finance/format.js (negativ mit dem Minuszeichen „−“ (U+2212) davor); Intl.DateTimeFormat('de-DE', { timeZone: 'Europe/Berlin', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }) mit formatToParts; Berliner Tag eines Zeitpunkts mit Intl.DateTimeFormat('sv-SE', { timeZone: 'Europe/Berlin' }) wie berlinDate. Jede Funktion verträgt undefined/null und fehlende Felder (kein Wurf). Kundentexte stehen nur in diesem Modul.

Export	Verhalten
TOKEN_MUSTER	/^[A-Za-z0-9_-]{43}$/
tokenAusAdresse(suche, hash)	Kandidaten in dieser Reihenfolge: Fragment (ohne #, so verlinkt K31, V6), Suche (ohne ?, Rückfall); je new URLSearchParams(teil).getAll('t'): genau ein Wert und TOKEN_MUSTER → Token; sonst weiter; am Ende ''
euroDe(cents)	Number.isSafeInteger sonst '–'; sonst Format wie oben
datumDe(wert)	YYYY-MM-DD → TT.MM.JJJJ; TT.MM.JJJJ bleibt; ISO-Zeitpunkt (YYYY-MM-DDT…) → Berliner Tag; sonst ''
zeitpunktDe(iso)	'TT.MM.JJJJ, HH:MM Uhr' in Berliner Zeit; leer/ungültig → ''
pdfPfad(token)	`/api/auftrag/${encodeURIComponent(token)}/pdf`
agbPfad(agbUrl)	nur Text, der ^/rechtliches/[A-Za-z0-9][A-Za-z0-9._-]*\.pdf$ erfüllt, sonst ''
zeigtFruehbeginn(a)	typeof a?.texte?.fruehbeginn === 'string' und nach trim() nicht leer
darfBestaetigen(a)	!a.bestaetigtAm und status ist versendet oder abgerechnet (V3: kannBestaetigen ohne die Kundenansicht)
statusAnzeige(a)	a.kannBestaetigen === true && !a.bestaetigtAm → { 'Bitte bestätigen', 'warn' }; sonst Tabelle: versendet Versendet/muted, bestaetigt Bestätigt/ok, abgerechnet Abgerechnet/ok, storniert Storniert/muted, ersetzt Ersetzt/muted, widerrufen Widerrufen/rot, sonst { '–', 'muted' }
kartenMeta(a)	Teile vom <datumDe> (nur mit Datum) und nach Aufwand (art aufwand) bzw. euroDe(summeCents) (nur bei ganzer Zahl), verbunden mit ' · '
sortiereAuftraege(liste)	Kopie; zuerst kannBestaetigen, dann nummer absteigend per Zeichenvergleich (nicht localeCompare)
zusammenfassung(a)	Form wie im Test: kopf nur Zeilen mit Wert (Labels Nummer, Datum, Projekt = titel); art aufwand oder sonst festpreis; positionen (menge als Text, Beträge euroDe); summe nur Festpreis mit ganzer Zahl; aufwand nur bei Aufwand (aufwandText); zahlung = zahlungsplanText; termine Start / Voraussichtliche Fertigstellung nur mit Datum; hinweis = a.texte.kleinunternehmer, wenn ein nicht leerer Text (V3), sonst '' – keine eigene Ersatzkonstante
bestaetigtZeilen(a, anrede)	leer ohne bestaetigtAm; sonst Bestätigt am <zeitpunktDe> (ist die Zeit ungültig: Bestätigt); nur bei kundenart === 'privat': fruehbeginn === true → texte(anrede).fruehbeginnWunsch, sonst mit fruehesterBeginn → Wir beginnen frühestens am <datumDe>.
zustandAusAntwort(status, body)	404 → ungueltig; 410 → beendet (Grund aus body?.error per /ersetzt/i, /storniert/i, /widerrufen/i, Titel Diese Auftragsbestätigung wurde <grund>., ohne Grund …ist nicht mehr gültig.; Text bei ersetzt der Hinweis auf die neueste AB, sonst „Bei Fragen …“); 429 → limit; alles andere (auch 0) → fehler. Angezeigt wird nie Servertext. Nur öffentliche Seite, Sie-Form
fehlerMeldung(status, anrede)	aus texte(anrede).fehler: 0 → keine, 400 → haken, 401 → anmeldung, 403/409 → gesperrt, 429 → zuviele, sonst sonst
abNummerNormalisiert(e)	String(e ?? ''), trim, groß, Folgen aus Leerraum und Strichen (/[\s\-\u{2010}-\u{2015}\u{2212}]+/gu) zu einem -; Ergebnis nur, wenn es ^AB-\d{4}-\d{4}$ erfüllt, sonst ''
ANREDE_SIE, ANREDE_DU	'sie', 'du' (die anderen Module benutzen diese Konstanten, nie die Wörter)
texte(anrede)	{ ...TEXTE_GEMEINSAM, ...(anrede === ANREDE_DU ? TEXTE_DU : TEXTE_SIE) }; ohne Angabe Sie
KONTAKT, BESTAETIGUNG_FALLBACK	{ email: 'support@webklar.com', telefon: '0176 23726355' }, 'Ich bestätige den Auftrag zu diesen Bedingungen.' (gleich BESTAETIGUNG_TEXT, V7)

Texte (eingefroren; Task 4 bis 9 nutzen genau diese Schlüssel, die Texte sind wörtlich so zu übernehmen). TEXTE_GEMEINSAM (neutral, in beiden Anreden; weder Du- noch Sie-Formen):

Schlüssel	Text
titelOffen	Auftragsbestätigung (die Seite zeigt Auftragsbestätigung <Nummer>, also Text + Leerzeichen + Nummer)
leistung, aufwand, zahlung, termine, unterlagen	Leistungsumfang · Abrechnung nach Aufwand · Zahlung · Termine · Unterlagen
spalten	['Beschreibung', 'Menge', 'Einzelpreis', 'Summe']
gesamtpreis	Gesamtpreis
linkPdf, linkAgb	Auftragsbestätigung als PDF ansehen · Allgemeine Geschäftsbedingungen (PDF)
freiwillig	(freiwillig)
knopf, sendet	Auftrag bestätigen · Wird gesendet …
ansichtsmodus	Im Ansichtsmodus kann der Auftrag nicht bestätigt werden. Die Bestätigung gibt der Kunde selbst ab.
erneut	Erneut versuchen
kartePdf, karteDetails, karteDetailsBestaetigen	PDF ansehen · Details ansehen · Details ansehen und bestätigen

TEXTE_SIE (öffentliche Seite und Widerrufsseite; enthält auch die Schlüssel, die das Portal in Du überschreibt):

Schlüssel	Text
laedt	Ihre Auftragsbestätigung wird geladen …
geladen	Ihre Auftragsbestätigung wurde geladen.
titelBestaetigt	Ihr Auftrag ist bestätigt.
intro	Bitte prüfen Sie die Angaben. Mit einem Klick bestätigen Sie den Auftrag.
kontaktVor	Sie erreichen uns unter
keinJs	Bitte aktivieren Sie JavaScript, um Ihren Auftrag zu bestätigen.
abNummerUngueltig	Die Nummer sieht anders aus als AB-2026-0001. Bitte prüfen Sie die Nummer oder lassen Sie das Feld leer.
formular	Ihre Bestätigung
speicherHinweis	Ihre Bestätigung wird mit Datum und Uhrzeit gespeichert.
fruehbeginnWunsch	Wir beginnen auf Ihren Wunsch schon vor Ablauf der Widerrufsfrist.
fehler.keine	Keine Verbindung. Bitte prüfen Sie Ihre Internetverbindung und versuchen Sie es erneut.
fehler.haken	Bitte setzen Sie das Häkchen, um den Auftrag zu bestätigen.
fehler.anmeldung	Ihre Anmeldung ist abgelaufen. Bitte laden Sie die Seite neu und melden Sie sich erneut an.
fehler.gesperrt	Das Bestätigen ist gerade nicht möglich. Bitte laden Sie die Seite neu.
fehler.zuviele	Zu viele Anfragen. Bitte versuchen Sie es in einigen Minuten noch einmal.
fehler.sonst	Die Bestätigung konnte nicht gespeichert werden. Bitte versuchen Sie es später noch einmal.

TEXTE_DU (Portal, Du-Form; nur die Schlüssel, die dort anders lauten, mit derselben Struktur):

Schlüssel	Text
formular	Deine Bestätigung
speicherHinweis	Deine Bestätigung wird mit Datum und Uhrzeit gespeichert.
fruehbeginnWunsch	Wir beginnen auf deinen Wunsch schon vor Ablauf der Widerrufsfrist.
fehler.keine	Keine Verbindung. Bitte prüfe deine Internetverbindung und versuche es erneut.
fehler.haken	Bitte setze das Häkchen, um den Auftrag zu bestätigen.
fehler.anmeldung	Deine Anmeldung ist abgelaufen. Bitte lade die Seite neu und melde dich erneut an.
fehler.gesperrt	Das Bestätigen ist gerade nicht möglich. Bitte lade die Seite neu.
fehler.zuviele	Zu viele Anfragen. Bitte versuche es in einigen Minuten noch einmal.
fehler.sonst	Die Bestätigung konnte nicht gespeichert werden. Bitte versuche es später noch einmal.

Die Texte der Zustände (zustandAusAntwort) stehen nur dort (wörtlich aus dem Test); sie gelten nur auf der öffentlichen Seite (Sie-Form).

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2. Erwartet: fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add public/auftrag-ansicht.js test/auftraegeKundenportalDaten.js test/auftraegeKundenportalAnsicht.test.js && git commit -m "Kundenportal Aufträge: reine Ansichtslogik (Token, Beträge, Zustände, Status, AB-Nummer)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 4: DOM-Bausteine public/auftrag-dom.js

Files:

• Create: public/auftrag-dom.js
• Create: test/auftraegeKundenportalDom.test.js

Interfaces:

• Consumes: texte, ANREDE_SIE, zusammenfassung, bestaetigtZeilen, zeigtFruehbeginn, fehlerMeldung, BESTAETIGUNG_FALLBACK aus ./auftrag-ansicht.js (Task 3).

• Produces (Exporte von public/auftrag-dom.js):

  • h(tag, attrs, ...kinder) → HTMLElement (eigene Kopie des Bausteins aus shop-dom.js: Texte nur als Textknoten, Attribute mit on… als Ereignis, true setzt ein Attribut ohne Wert, false/null/undefined lassen es weg)
  • renderZusammenfassung(auftrag, { ebene = 2 } = {}) → HTMLElement
  • renderBestaetigtBlock(auftrag, { anrede = ANREDE_SIE } = {}) → HTMLElement | null
  • renderDokumente({ pdfHref = '', agbHref = '' }) → HTMLElement | null
  • renderBestaetigung(auftrag, { senden, nachErfolg, nachEnde, gesperrt = '', anrede = ANREDE_SIE }) → HTMLFormElement (anrede wählt die Texte: Sie auf der öffentlichen Seite, ANREDE_DU im Portal), mit senden(koerper) → Promise<{ ok: true, auftrag } | { ok: false, status, body }>, nachErfolg(auftrag), nachEnde(status, body) (nur bei 404/410)
  • Vokabular für CSS (Task 6, 7) und Tests: Klassen ab-zusammenfassung, ab-liste, ab-zeile, ab-abschnitt, ab-h2 (für alle Überschriftenebenen), ab-tabelle, ab-gesamt, ab-hinweis, ab-text, ab-bestaetigt, ab-links, ab-link, ab-bestaetigen, ab-feldgruppe, ab-haken, ab-frei, ab-fehler, ab-knopf, ab-notiz, ab-gesperrt; Datenmarken data-art, data-abschnitt (leistung|aufwand|zahlung|termine), data-positionen, data-position, data-gesamt, data-hinweis, data-aufwand, data-zahlung, data-bestaetigt, data-link (pdf|agb), data-feld (bestaetigung|fruehbeginn), data-aktion="bestaetigen", data-fehler, data-gesperrt.

• Step 1: Failing Test schreiben

test/auftraegeKundenportalDom.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { installFakeDom } from './support/fakeDom.js'
import { renderZusammenfassung, renderBestaetigtBlock, renderDokumente, renderBestaetigung } from '../public/auftrag-dom.js'
import { KLEINUNTERNEHMER, ab, privat, bestaetigt, pruefeQuelltext } from './auftraegeKundenportalDaten.js'
import { ANREDE_DU } from '../public/auftrag-ansicht.js'

const NB = '\u{a0}'
const mit = (fn) => async () => {
  const fx = installFakeDom()
  try {
    await fn(fx)
  } finally {
    fx.restore()
  }
}
const paare = (fx, baum) => fx.alle(baum, '.ab-zeile').map((z) => [fx.finde(z, 'dt').textContent, fx.finde(z, 'dd').textContent])

test('Zusammenfassung (Festpreis): Kopfzeilen, Positionen mit Spaltenmarken, Gesamtpreis, § 19, Zahlung, Termine', mit(async (fx) => {
  const el = renderZusammenfassung(ab())
  assert.equal(el.getAttribute('data-art'), 'festpreis')
  assert.deepEqual(paare(fx, el).slice(0, 3), [['Nummer', 'AB-2026-0002'], ['Datum', '06.10.2026'], ['Projekt', 'Website Anelia Wolf']])
  const zeilen = fx.alle(el, '[data-position]')
  assert.equal(zeilen.length, 2)
  assert.deepEqual(fx.alle(zeilen[1], 'td').map((td) => td.textContent), ['Texte und Bildbearbeitung', '2', `100,00${NB}€`, `200,00${NB}€`])
  assert.deepEqual(fx.alle(zeilen[1], 'td').map((td) => td.getAttribute('data-label')), ['Beschreibung', 'Menge', 'Einzelpreis', 'Summe'])
  assert.deepEqual(fx.alle(el, 'th').map((th) => th.textContent), ['Beschreibung', 'Menge', 'Einzelpreis', 'Summe'])
  assert.equal(fx.finde(el, '[data-gesamt] strong').textContent, `800,00${NB}€`)
  assert.equal(fx.finde(el, '[data-hinweis]').textContent, KLEINUNTERNEHMER)
  assert.equal(fx.finde(el, '[data-zahlung]').textContent, ab().zahlungsplanText)
  assert.deepEqual(paare(fx, fx.finde(el, '[data-abschnitt="termine"]')), [['Start', '12.10.2026'], ['Voraussichtliche Fertigstellung', '30.11.2026']])
}))

test('Zusammenfassung (Aufwand): Aufwandstext statt Tabelle und Gesamtpreis; ohne Termine kein Abschnitt', mit(async (fx) => {
  const a = ab({ art: 'aufwand', positionen: [], summeCents: null, aufwandText: '100,00 € pro Stunde in Schritten von 15 Minuten.', startAm: '', fertigBis: '' })
  const el = renderZusammenfassung(a)
  assert.equal(el.getAttribute('data-art'), 'aufwand')
  assert.equal(fx.finde(el, 'table'), null)
  assert.equal(fx.finde(el, '[data-gesamt]'), null)
  assert.equal(fx.finde(el, '[data-aufwand]').textContent, '100,00 € pro Stunde in Schritten von 15 Minuten.')
  assert.equal(fx.finde(el, '[data-hinweis]').textContent, KLEINUNTERNEHMER)
  assert.equal(fx.finde(el, '[data-abschnitt="termine"]'), null)
}))

test('Zusammenfassung: der § 19-Satz kommt nur aus der API; fehlt er, gibt es keinen Hinweis', mit(async (fx) => {
  assert.equal(fx.finde(renderZusammenfassung(ab({ texte: { bestaetigung: 'x', fruehbeginn: null } })), '[data-hinweis]'), null)
}))

test('Zusammenfassung: Überschriftenebene wählbar (Seite h2, Portalkarte h4); leere Eingabe wirft nicht', mit(async (fx) => {
  assert.deepEqual(fx.alle(renderZusammenfassung(ab()), 'h2').map((x) => x.textContent), ['Leistungsumfang', 'Zahlung', 'Termine'])
  const karte = renderZusammenfassung(ab(), { ebene: 4 })
  assert.equal(fx.alle(karte, 'h2').length, 0)
  assert.deepEqual(fx.alle(karte, 'h4').map((x) => x.textContent), ['Leistungsumfang', 'Zahlung', 'Termine'])
  assert.doesNotThrow(() => renderZusammenfassung({}))
}))

test('Fremdtext bleibt Text: Titel, Positionen und Zahlungsplan werden nie als HTML gelesen', mit(async (fx) => {
  const boese = '<img src=x onerror=alert(1)> & <b>fett</b> "Test"'
  const lang = 'x'.repeat(200)
  const el = renderZusammenfassung(ab({
    titel: boese, zahlungsplanText: boese, summeCents: 200,
    positionen: [{ beschreibung: boese, menge: 1, einzelpreisCents: 100, summeCents: 100 }, { beschreibung: lang, menge: 1, einzelpreisCents: 100, summeCents: 100 }],
  }))
  assert.equal(fx.finde(el, 'img'), null)
  assert.equal(fx.finde(el, 'b'), null)
  assert.ok(fx.text(el).includes(boese))
  assert.ok(fx.text(el).includes(lang))
}))

test('Bestätigt-Block: Zeitpunkt in Berliner Zeit und Zeile zum Beginn; ohne Bestätigung null', mit(async (fx) => {
  assert.equal(renderBestaetigtBlock(ab()), null)
  const block = renderBestaetigtBlock(bestaetigt(privat()))
  assert.equal(block.getAttribute('role'), 'status')
  assert.equal(block.getAttribute('tabindex'), '-1')
  assert.equal(block.hasAttribute('data-bestaetigt'), true)
  assert.deepEqual(fx.alle(block, 'p').map((p) => p.textContent), ['Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen frühestens am 21.10.2026.'])
}))

test('Unterlagen: PDF und AGB als Links in neuem Tab, leere Ziele entfallen', mit(async (fx) => {
  const links = fx.alle(renderDokumente({ pdfHref: '/api/auftrag/T/pdf', agbHref: '/rechtliches/agb-2026-09-30.pdf' }), 'a')
  assert.deepEqual(links.map((a) => [a.getAttribute('data-link'), a.getAttribute('href'), a.textContent]), [
    ['pdf', '/api/auftrag/T/pdf', 'Auftragsbestätigung als PDF ansehen'],
    ['agb', '/rechtliches/agb-2026-09-30.pdf', 'Allgemeine Geschäftsbedingungen (PDF)'],
  ])
  for (const a of links) {
    assert.equal(a.getAttribute('target'), '_blank')
    assert.equal(a.getAttribute('rel'), 'noopener noreferrer')
  }
  assert.equal(fx.alle(renderDokumente({ agbHref: '/rechtliches/agb-2026-09-30.pdf' }), 'a').length, 1)
  assert.equal(renderDokumente({}), null)
}))

/* ------------------------------------------------------------ Bestätigen-Formular --- */
const OK = () => Promise.resolve({ ok: true, auftrag: bestaetigt(ab()) })

function monte(fx, a, { antwort = OK, gesperrt = '', anrede } = {}) {
  const aufrufe = []
  const erfolg = []
  const ende = []
  const form = renderBestaetigung(a, {
    senden: (koerper) => { aufrufe.push(koerper); return antwort(koerper) },
    nachErfolg: (x) => erfolg.push(x),
    nachEnde: (status, body) => ende.push([status, body]),
    gesperrt,
    anrede,
  })
  fx.document.body.append(form)
  return {
    form, aufrufe, erfolg, ende,
    knopf: fx.finde(form, '[data-aktion="bestaetigen"]'),
    haken1: fx.finde(form, '[data-feld="bestaetigung"]'),
    haken2: fx.finde(form, '[data-feld="fruehbeginn"]'),
    fehler: fx.finde(form, '[data-fehler]'),
  }
}

test('Bestätigen (Unternehmen): ein Häkchen mit dem Text vom Server, Knopf erst nach dem Haken, Antwort geht an nachErfolg', mit(async (fx) => {
  const t = monte(fx, ab())
  assert.equal(t.haken2, null)
  assert.equal(fx.text(fx.finde(t.form, 'label')), 'Ich bestätige den Auftrag zu diesen Bedingungen.')
  assert.equal(t.knopf.textContent, 'Auftrag bestätigen')
  assert.equal(t.knopf.disabled, true)
  await fx.klick(t.haken1)
  assert.equal(t.knopf.disabled, false)
  await fx.klick(t.haken1)
  assert.equal(t.knopf.disabled, true)
  await fx.klick(t.haken1)
  await fx.klick(t.knopf)
  assert.deepEqual(t.aufrufe, [{ bestaetigt: true, fruehbeginn: false }])
  assert.equal(t.erfolg.length, 1)
  assert.equal(t.erfolg[0].status, 'bestaetigt')
  assert.equal(fx.text(fx.finde(t.form, '.ab-notiz')), 'Ihre Bestätigung wird mit Datum und Uhrzeit gespeichert.')
}))

test('Bestätigen: fehlt der Text vom Server, gilt der feste Wortlaut aus der Übersicht (V7)', mit(async (fx) => {
  const t = monte(fx, ab({ texte: {} }))
  assert.equal(fx.text(fx.finde(t.form, 'label')), 'Ich bestätige den Auftrag zu diesen Bedingungen.')
}))

test('Bestätigen (Privatperson): zweites, freiwilliges Häkchen; ohne Haken fruehbeginn false, mit Haken true', mit(async (fx) => {
  const a = privat()
  for (const [angehakt, soll] of [[false, false], [true, true]]) {
    const t = monte(fx, a)
    const zweites = fx.alle(t.form, 'label')[1]
    assert.equal(fx.text(zweites).startsWith(a.texte.fruehbeginn), true)
    assert.match(fx.text(zweites), /\(freiwillig\)$/)
    assert.equal(t.haken2.checked, false)
    await fx.klick(t.haken1)
    assert.equal(t.knopf.disabled, false, 'das zweite Häkchen ist nicht nötig')
    if (angehakt) await fx.klick(t.haken2)
    await fx.klick(t.knopf)
    assert.deepEqual(t.aufrufe, [{ bestaetigt: true, fruehbeginn: soll }])
    t.form.remove()
  }
}))

test('Bestätigen: Privatperson ohne Frühbeginn-Text vom Server bekommt kein zweites Häkchen und sendet false', mit(async (fx) => {
  const t = monte(fx, privat({ texte: { bestaetigung: 'Ich bestätige den Auftrag zu diesen Bedingungen.', fruehbeginn: null } }))
  assert.equal(t.haken2, null)
  await fx.klick(t.haken1)
  await fx.klick(t.knopf)
  assert.deepEqual(t.aufrufe, [{ bestaetigt: true, fruehbeginn: false }])
}))

test('Doppelter Absenden-Versuch sendet genau einmal; Knopf zeigt „Wird gesendet …“ und bleibt nach Erfolg gesperrt', mit(async (fx) => {
  let fertig
  const t = monte(fx, ab(), { antwort: () => new Promise((resolve) => { fertig = resolve }) })
  await fx.klick(t.haken1)
  const erster = fx.klick(t.knopf)
  assert.equal(t.knopf.textContent, 'Wird gesendet …')
  assert.equal(t.knopf.disabled, true)
  assert.equal(t.knopf.getAttribute('aria-busy'), 'true')
  await fx.sende(t.form, 'submit') // zweiter Versuch (z. B. Enter), während der erste läuft
  assert.equal(t.aufrufe.length, 1)
  fertig({ ok: true, auftrag: bestaetigt(ab()) })
  await erster
  assert.equal(t.erfolg.length, 1)
  assert.equal(t.knopf.disabled, true)
  await fx.sende(t.form, 'submit')
  assert.equal(t.aufrufe.length, 1, 'auch nach dem Erfolg geht nichts mehr raus')
}))

test('Netzfehler: Meldung, Häkchen bleiben stehen, erneutes Senden möglich', mit(async (fx) => {
  const antworten = [{ ok: false, status: 0, body: {} }, { ok: true, auftrag: bestaetigt(privat()) }]
  const t = monte(fx, privat(), { antwort: async () => antworten.shift() })
  await fx.klick(t.haken1)
  await fx.klick(t.haken2)
  await fx.klick(t.knopf)
  assert.equal(t.fehler.hidden, false)
  assert.equal(t.fehler.textContent, 'Keine Verbindung. Bitte prüfen Sie Ihre Internetverbindung und versuchen Sie es erneut.')
  assert.equal(t.haken1.checked, true)
  assert.equal(t.haken2.checked, true)
  assert.equal(t.knopf.disabled, false)
  assert.equal(t.knopf.textContent, 'Auftrag bestätigen')
  assert.equal(t.erfolg.length, 0)
  await fx.klick(t.knopf)
  assert.deepEqual(t.aufrufe, [{ bestaetigt: true, fruehbeginn: true }, { bestaetigt: true, fruehbeginn: true }])
  assert.equal(t.erfolg.length, 1)
}))

test('Fehlertexte nach Status; 404 und 410 gehen an nachEnde statt in die Fehlerzeile', mit(async (fx) => {
  for (const [status, text] of [
    [429, 'Zu viele Anfragen. Bitte versuchen Sie es in einigen Minuten noch einmal.'],
    [500, 'Die Bestätigung konnte nicht gespeichert werden. Bitte versuchen Sie es später noch einmal.'],
    [400, 'Bitte setzen Sie das Häkchen, um den Auftrag zu bestätigen.'],
  ]) {
    const t = monte(fx, ab(), { antwort: async () => ({ ok: false, status, body: { error: 'Servertext, der nie erscheint' } }) })
    await fx.klick(t.haken1)
    await fx.klick(t.knopf)
    assert.equal(t.fehler.textContent, text, String(status))
    t.form.remove()
  }
  const body = { error: 'Diese Auftragsbestätigung wurde ersetzt.' }
  const t = monte(fx, ab(), { antwort: async () => ({ ok: false, status: 410, body }) })
  await fx.klick(t.haken1)
  await fx.klick(t.knopf)
  assert.deepEqual(t.ende, [[410, body]])
  assert.equal(t.fehler.hidden, true)
}))

test('Gesperrt (Ansichtsmodus): Häkchen und Knopf gesperrt, Hinweis sichtbar, kein Senden', mit(async (fx) => {
  const hinweis = 'Im Ansichtsmodus kann der Auftrag nicht bestätigt werden. Die Bestätigung gibt der Kunde selbst ab.'
  const t = monte(fx, privat(), { gesperrt: hinweis })
  assert.equal(fx.alle(t.form, 'input').every((i) => i.disabled), true)
  assert.equal(t.knopf.disabled, true)
  assert.equal(fx.finde(t.form, '[data-gesperrt]').textContent, hinweis)
  await fx.sende(t.form, 'submit')
  assert.equal(t.aufrufe.length, 0)
}))

test('Anrede: im Portal (Du) stehen Überschrift, Hinweis, Fehlertext und die Zeile zum Wunsch in der Du-Form, auf der öffentlichen Seite (Sie) in der Sie-Form', mit(async (fx) => {
  const sie = monte(fx, ab())
  assert.equal(fx.text(fx.finde(sie.form, 'legend')), 'Ihre Bestätigung')
  assert.equal(fx.text(fx.finde(sie.form, '.ab-notiz')), 'Ihre Bestätigung wird mit Datum und Uhrzeit gespeichert.')
  sie.form.remove()
  const du = monte(fx, ab(), { anrede: ANREDE_DU, antwort: async () => ({ ok: false, status: 0, body: {} }) })
  assert.equal(fx.text(fx.finde(du.form, 'legend')), 'Deine Bestätigung')
  assert.equal(fx.text(fx.finde(du.form, '.ab-notiz')), 'Deine Bestätigung wird mit Datum und Uhrzeit gespeichert.')
  await fx.klick(du.haken1)
  await fx.klick(du.knopf)
  assert.equal(du.fehler.textContent, 'Keine Verbindung. Bitte prüfe deine Internetverbindung und versuche es erneut.')
  const wunsch = bestaetigt(privat({ fruehbeginn: true, fruehesterBeginn: null }))
  assert.deepEqual(fx.alle(renderBestaetigtBlock(wunsch), 'p').map((p) => p.textContent), ['Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen auf Ihren Wunsch schon vor Ablauf der Widerrufsfrist.'])
  assert.deepEqual(fx.alle(renderBestaetigtBlock(wunsch, { anrede: ANREDE_DU }), 'p').map((p) => p.textContent), ['Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen auf deinen Wunsch schon vor Ablauf der Widerrufsfrist.'])
}))

test('Quelltext: nur Text, nur ./auftrag-ansicht.js, kein fetch, keine Kundentexte im Modul', () => {
  pruefeQuelltext('auftrag-dom.js', { importe: ['./auftrag-ansicht.js'] })
})

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test test/auftraegeKundenportalDom.test.js

Erwartet: FAIL (Cannot find module '../public/auftrag-dom.js').

• Step 3: public/auftrag-dom.js implementieren

Kopf-Kommentar wie shop-dom.js (Kundentext nur über textContent, nie innerHTML). h liest document bei jedem Aufruf. Aufbau (Klassen und Marken wie in „Produces“; alle Überschriften tragen die Klasse ab-h2):

• renderZusammenfassung(auftrag, { ebene = 2 }) → div.ab-zusammenfassung[data-art] (Daten aus zusammenfassung(auftrag)):

  1. dl.ab-liste mit je div.ab-zeile > dt + dd für kopf (entfällt, wenn leer);
  2. Festpreis: section.ab-abschnitt[data-abschnitt="leistung"] mit Überschrift „Leistungsumfang“, table.ab-tabelle[data-positionen] (thead mit th scope="col" je texte().spalten; je Position tr[data-position] mit vier td[data-label=<Spaltentitel>]; entfällt ohne Positionen), p.ab-gesamt[data-gesamt] = span „Gesamtpreis“ + Leerzeichen + strong (nur mit summe), p.ab-hinweis[data-hinweis] mit hinweis (der § 19-Satz der API; entfällt, wenn leer); Aufwand: section[data-abschnitt="aufwand"] mit Überschrift „Abrechnung nach Aufwand“, p.ab-text[data-aufwand], p.ab-hinweis[data-hinweis] (nur mit hinweis);
  3. section[data-abschnitt="zahlung"] mit „Zahlung“ und p.ab-text[data-zahlung] (nur mit Text);
  4. section[data-abschnitt="termine"] mit „Termine“ und dl.ab-liste (nur mit mindestens einem Termin).

• renderBestaetigtBlock(auftrag, { anrede }) → null ohne Zeilen aus bestaetigtZeilen(auftrag, anrede); sonst div.ab-bestaetigt[data-bestaetigt][role="status"][tabindex="-1"] mit je einem p je Zeile (erste Zeile in strong).

• renderDokumente({ pdfHref, agbHref }) → null ohne Ziele; sonst ul.ab-links mit li > a.ab-link[data-link][target="_blank"][rel="noopener noreferrer"] (Texte linkPdf, linkAgb).

• renderBestaetigung(auftrag, { senden, nachErfolg, nachEnde, gesperrt, anrede }) (alle Texte aus texte(anrede)) → form.ab-bestaetigen[novalidate] > fieldset.ab-feldgruppe mit legend (formular), erstes label.ab-haken (Checkbox [data-feld="bestaetigung"] mit required, span mit auftrag.texte.bestaetigung, bei fehlendem Text BESTAETIGUNG_FALLBACK), nur bei zeigtFruehbeginn(auftrag) zweites label.ab-haken (Checkbox [data-feld="fruehbeginn"], span mit texte.fruehbeginn, Leerzeichen, small.ab-frei „(freiwillig)“); danach außerhalb des Fieldsets p.ab-fehler[data-fehler][role="alert"][hidden], button.ab-knopf[type="submit"][data-aktion="bestaetigen"] (anfangs disabled), p.ab-notiz (speicherHinweis) und bei gesperrt p.ab-gesperrt[data-gesperrt]. Verhalten:

  • Knopf gesperrt, solange gesperrt, busy oder das erste Häkchen fehlt; bei gesperrt sind auch beide Häkchen disabled.
  • submit: preventDefault(); kehrt zurück bei busy, gesperrt oder fehlendem erstem Häkchen. Sonst busy = true (synchron, vor dem await), Fehlerzeile weg, Knopf gesperrt mit aria-busy="true" und Text sendet, dann await senden({ bestaetigt: true, fruehbeginn: <zweites Häkchen angehakt, sonst false> }) (wirft senden, gilt { ok: false, status: 0, body: {} }).
  • ok → nachErfolg(ergebnis.auftrag); busy bleibt true (Knopf bleibt gesperrt, Text zurück auf „Auftrag bestätigen“). !ok mit Status 404 oder 410 → nachEnde(status, body), Formular bleibt gesperrt. Jeder andere Fehler → busy = false, Knopf zurück (Text, aria-busy weg, Zustand nach Häkchen), fehlerMeldung(status, anrede) in die Fehlerzeile (hidden = false); Häkchen bleiben.

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2. Erwartet: fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add public/auftrag-dom.js test/auftraegeKundenportalDom.test.js && git commit -m "Kundenportal Aufträge: DOM-Bausteine (Zusammenfassung, Bestätigen mit Häkchen, Sperre)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 5: Seitenlogik der öffentlichen Seite public/auftrag.js

Files:

• Create: public/auftrag.js
• Create: test/auftraegeKundenportalSeite.test.js

Interfaces:

• Consumes: Task 3 (texte, KONTAKT, tokenAusAdresse, pdfPfad, agbPfad, zustandAusAntwort, darfBestaetigen, statusAnzeige), Task 4 (h, renderZusammenfassung, renderBestaetigtBlock, renderDokumente, renderBestaetigung); HTTP laut Übersicht V5: GET /api/auftrag/:token → { auftrag } | 404 | 410 | 429; POST /api/auftrag/:token/bestaetigen mit { bestaetigt: true, fruehbeginn } → { auftrag } | 400 | 404 | 410 | 429.

• Produces: initAuftragsseite({ root, ansage, suche = '', hash = '' }) → Promise<void>. root bekommt data-zustand ∈ laedt | offen | bestaetigt | ungueltig | beendet | limit | fehler und aria-busy; ansage ist die Live-Region (#ab-ansage). Am Dateiende startet die Seite selbst, wenn document existiert und #ab-wurzel vorhanden ist (suche = window.location.search, hash = window.location.hash). Marken: h1[data-titel] (tabindex="-1"), button[data-aktion="erneut"], p.ab-kontakt, p.ab-pille.ab-pille-<ton>, p.ab-text, p.ab-laden.

• Step 1: Failing Test schreiben

test/auftraegeKundenportalSeite.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { installFakeDom } from './support/fakeDom.js'
import { h } from '../public/auftrag-dom.js'
import { initAuftragsseite } from '../public/auftrag.js'
import { TOKEN, KLEINUNTERNEHMER, ab, privat, bestaetigt, pruefeQuelltext } from './auftraegeKundenportalDaten.js'

const ok = (body, status = 200) => ({ status, body })
const mit = (antworten, fn) => async () => {
  const fx = installFakeDom({ antworten })
  const root = h('div', { id: 'ab-wurzel' })
  const ansage = h('div', { id: 'ab-ansage' })
  fx.document.body.append(root, ansage)
  try {
    await fn(fx, root, ansage)
  } finally {
    fx.restore()
  }
}
const start = (root, ansage, adresse = {}) => initAuftragsseite({ root, ansage, suche: '', hash: `#t=${TOKEN}`, ...adresse }) // K31 verlinkt #t=
const bestaetige = async (fx, root, { frueh = false } = {}) => {
  await fx.klick(fx.finde(root, '[data-feld="bestaetigung"]'))
  if (frueh) await fx.klick(fx.finde(root, '[data-feld="fruehbeginn"]'))
  await fx.klick(fx.finde(root, '[data-aktion="bestaetigen"]'))
}

test('Ohne gültigen Token: „ungültig“ und Kontaktweg, ohne Anfrage', mit([], async (fx, root, ansage) => {
  for (const adresse of [{ hash: '' }, { hash: '#t=' }, { hash: '#t=zu-kurz' }, { hash: `#t=${TOKEN}x` }, { hash: '', suche: '?t=zu-kurz' }]) {
    await start(root, ansage, adresse)
    assert.equal(root.dataset.zustand, 'ungueltig', JSON.stringify(adresse))
    assert.equal(fx.finde(root, 'h1').textContent, 'Dieser Link ist ungültig oder abgelaufen.')
    assert.equal(fx.finde(root, 'a[href="mailto:support@webklar.com"]').textContent, 'support@webklar.com')
    assert.equal(fx.finde(root, 'a[href="tel:017623726355"]').textContent, '0176 23726355')
  }
  assert.equal(fx.fetchLog.length, 0)
}))

test('Laden und Anzeigen: Kopf, Zusammenfassung, Unterlagen, Formular; der Token steht nur in Links', mit([ok({ auftrag: ab() })], async (fx, root, ansage) => {
  await start(root, ansage)
  assert.deepEqual(fx.fetchLog, [{ method: 'GET', url: `/api/auftrag/${TOKEN}`, body: undefined }])
  assert.equal(root.dataset.zustand, 'offen')
  assert.equal(fx.finde(root, 'h1').textContent, 'Auftragsbestätigung AB-2026-0002')
  assert.equal(fx.finde(root, '.ab-pille').textContent, 'Bitte bestätigen')
  assert.equal(fx.alle(root, '[data-position]').length, 2)
  const pdf = fx.finde(root, '[data-link="pdf"]')
  const agb = fx.finde(root, '[data-link="agb"]')
  assert.equal(pdf.getAttribute('href'), `/api/auftrag/${TOKEN}/pdf`)
  assert.equal(agb.getAttribute('href'), '/rechtliches/agb-2026-09-30.pdf')
  assert.ok(fx.finde(root, 'form [data-feld="bestaetigung"]'))
  assert.equal(fx.finde(root, '[data-feld="fruehbeginn"]'), null)
  assert.equal(fx.finde(root, '[data-hinweis]').textContent, KLEINUNTERNEHMER, 'der § 19-Satz kommt aus der API')
  assert.equal(fx.finde(root, 'legend').textContent, 'Ihre Bestätigung', 'öffentliche Seite: Sie-Form')
  assert.equal(fx.text(ansage), 'Ihre Auftragsbestätigung wurde geladen.')
  assert.ok(!fx.text(root).includes(TOKEN) && !fx.text(ansage).includes(TOKEN))
}))

test('Der Token steht im Fragment (#t=, so verlinkt K31); als Rückfall genügt ?t=', mit([ok({ auftrag: ab() }), ok({ auftrag: ab() })], async (fx, root, ansage) => {
  await start(root, ansage)
  assert.equal(root.dataset.zustand, 'offen')
  await start(root, ansage, { hash: '', suche: `?t=${TOKEN}` })
  assert.equal(root.dataset.zustand, 'offen')
  assert.deepEqual(fx.fetchLog.map((a) => a.url), [`/api/auftrag/${TOKEN}`, `/api/auftrag/${TOKEN}`])
}))

test('Aufwand: Aufwandstext statt Tabelle', mit([ok({ auftrag: ab({ art: 'aufwand', positionen: [], summeCents: null, aufwandText: '100,00 € pro Stunde.' }) })], async (fx, root, ansage) => {
  await start(root, ansage)
  assert.equal(fx.finde(root, '[data-aufwand]').textContent, '100,00 € pro Stunde.')
  assert.equal(fx.finde(root, 'table'), null)
}))

test('Bestätigen (Unternehmen): POST mit Häkchen, danach „bestätigt“ mit Zeitpunkt, Fokus und Ansage', mit([ok({ auftrag: ab() }), ok({ auftrag: bestaetigt(ab()) })], async (fx, root, ansage) => {
  await start(root, ansage)
  await bestaetige(fx, root)
  assert.deepEqual(fx.fetchLog[1], { method: 'POST', url: `/api/auftrag/${TOKEN}/bestaetigen`, body: { bestaetigt: true, fruehbeginn: false } })
  assert.equal(root.dataset.zustand, 'bestaetigt')
  assert.equal(fx.finde(root, 'h1').textContent, 'Ihr Auftrag ist bestätigt.')
  assert.equal(fx.finde(root, '.ab-pille').textContent, 'Bestätigt')
  const block = fx.finde(root, '[data-bestaetigt]')
  assert.deepEqual(fx.alle(block, 'p').map((p) => p.textContent), ['Bestätigt am 07.10.2026, 10:15 Uhr'])
  assert.equal(fx.finde(root, 'form'), null)
  assert.equal(fx.document.activeElement, block)
  assert.equal(fx.text(ansage), 'Ihr Auftrag ist bestätigt.')
  assert.ok(fx.finde(root, '[data-link="pdf"]'), 'Unterlagen bleiben erreichbar')
}))

test('Privatperson: zweites Häkchen; angezeigt wird, was der Server meldet (Frühbeginn „nein“ trotz Häkchen)', mit([ok({ auftrag: privat() }), ok({ auftrag: bestaetigt(privat({ fruehbeginn: false })) })], async (fx, root, ansage) => {
  await start(root, ansage)
  assert.ok(fx.finde(root, '[data-feld="fruehbeginn"]'))
  await bestaetige(fx, root, { frueh: true })
  assert.deepEqual(fx.fetchLog[1].body, { bestaetigt: true, fruehbeginn: true })
  assert.deepEqual(fx.alle(fx.finde(root, '[data-bestaetigt]'), 'p').map((p) => p.textContent), [
    'Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen frühestens am 21.10.2026.',
  ])
}))

test('Schon bestätigt beim Laden: „bestätigt“ ohne Formular, mit der Zeile zum Beginn', mit([ok({ auftrag: bestaetigt(privat({ fruehbeginn: true, fruehesterBeginn: null })) })], async (fx, root, ansage) => {
  await start(root, ansage)
  assert.equal(root.dataset.zustand, 'bestaetigt')
  assert.equal(fx.finde(root, 'form'), null)
  assert.deepEqual(fx.alle(fx.finde(root, '[data-bestaetigt]'), 'p').map((p) => p.textContent), [
    'Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen auf Ihren Wunsch schon vor Ablauf der Widerrufsfrist.',
  ])
}))

test('Zustände: ungültig, ersetzt, storniert, widerrufen, zu viele Anfragen, Serverfehler – feste Texte, nie der Token', mit([], async (fx, root, ansage) => {
  const faelle = [
    [ok({ error: 'Dieser Link ist ungültig oder abgelaufen.' }, 404), 'ungueltig', 'Dieser Link ist ungültig oder abgelaufen.'],
    [ok({ error: 'Diese Auftragsbestätigung wurde ersetzt.' }, 410), 'beendet', 'Diese Auftragsbestätigung wurde ersetzt.'],
    [ok({ error: 'Diese Auftragsbestätigung wurde storniert.' }, 410), 'beendet', 'Diese Auftragsbestätigung wurde storniert.'],
    [ok({ error: 'Diese Auftragsbestätigung wurde widerrufen.' }, 410), 'beendet', 'Diese Auftragsbestätigung wurde widerrufen.'],
    [ok({ error: 'Zu viele Anfragen. Bitte später erneut versuchen.' }, 429), 'limit', 'Zu viele Anfragen'],
    [ok({ error: 'Interner Fehler.' }, 500), 'fehler', 'Das hat leider nicht geklappt'],
    [ok({}, 502), 'fehler', 'Das hat leider nicht geklappt'],
    [ok({}, 200), 'fehler', 'Das hat leider nicht geklappt'], // Antwort ohne auftrag
  ]
  for (const [antwort, zustand, titel] of faelle) {
    fx.antworten.push(antwort)
    await start(root, ansage)
    assert.equal(root.dataset.zustand, zustand, titel)
    assert.equal(fx.finde(root, 'h1').textContent, titel)
    assert.equal(fx.text(ansage), titel)
    assert.equal(fx.finde(root, 'form'), null)
    assert.ok(!fx.text(root).includes(TOKEN) && !fx.text(ansage).includes(TOKEN))
    assert.equal(Boolean(fx.finde(root, '[data-aktion="erneut"]')), ['limit', 'fehler'].includes(zustand), `Erneut-Knopf bei ${zustand}`)
  }
  assert.equal(fx.finde(root, 'a[href="mailto:support@webklar.com"]') !== null, true, 'auch beim Fehler steht der Kontaktweg da')
}))

test('Netzfehler beim Laden: Fehlerzustand ohne Fremdtext, „Erneut versuchen“ lädt neu', mit([() => { throw new TypeError('fetch failed') }, ok({ auftrag: ab() })], async (fx, root, ansage) => {
  await start(root, ansage)
  assert.equal(root.dataset.zustand, 'fehler')
  assert.ok(!fx.text(root).includes('fetch failed'))
  await fx.klick(fx.finde(root, '[data-aktion="erneut"]'))
  assert.equal(root.dataset.zustand, 'offen')
  assert.equal(fx.fetchLog.length, 2)
}))

test('Status wechselt zwischen Laden und Bestätigen (410): „storniert“, kein Formular mehr', mit([ok({ auftrag: ab() }), ok({ error: 'Diese Auftragsbestätigung wurde storniert.' }, 410)], async (fx, root, ansage) => {
  await start(root, ansage)
  await bestaetige(fx, root)
  assert.equal(root.dataset.zustand, 'beendet')
  assert.equal(fx.finde(root, 'h1').textContent, 'Diese Auftragsbestätigung wurde storniert.')
  assert.equal(fx.finde(root, 'form'), null)
}))

test('Fehler beim Bestätigen (429): Meldung in der Fehlerzeile, Seite bleibt offen, Häkchen bleiben', mit([ok({ auftrag: ab() }), ok({ error: 'Zu viele Anfragen. Bitte später erneut versuchen.' }, 429)], async (fx, root, ansage) => {
  await start(root, ansage)
  await bestaetige(fx, root)
  assert.equal(root.dataset.zustand, 'offen')
  assert.equal(fx.finde(root, '[data-fehler]').textContent, 'Zu viele Anfragen. Bitte versuchen Sie es in einigen Minuten noch einmal.')
  assert.equal(fx.finde(root, '[data-feld="bestaetigung"]').checked, true)
  assert.equal(fx.finde(root, '[data-aktion="bestaetigen"]').disabled, false)
  assert.ok(!fx.text(root).includes(TOKEN))
}))

test('Quelltext: genau ein fetch ohne Cookies, keine Protokollausgabe, nur relative Importe', () => {
  const quelle = pruefeQuelltext('auftrag.js', { fetchAnzahl: 1, importe: ['./auftrag-ansicht.js', './auftrag-dom.js'] })
  assert.match(quelle, /credentials: 'omit'/)
  assert.doesNotMatch(quelle, /location\.href|history\.|document\.referrer/)
})

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test test/auftraegeKundenportalSeite.test.js

Erwartet: FAIL (Cannot find module '../public/auftrag.js').

• Step 3: public/auftrag.js implementieren

ES-Modul (Kopf-Kommentar wie termin.js: Token nur in Adresse und Speicher, keine Cookies, kein Browserspeicher, nichts ins Protokoll). Struktur:

• Intern anfrage(token, aktion, { method = 'GET', body } = {}) → { status, body }: einziger fetch-Aufruf der Datei, URL /api/auftrag/<encodeURIComponent(token)>[/<aktion>], credentials: 'omit', bei Körper Content-Type: application/json; die Antwort wird mit .json().catch(() => ({})) gelesen (kein Objekt → {}); jeder Fehler des fetch → { status: 0, body: {} }. Nie die Fehlermeldung des Browsers anzeigen oder weiterreichen.

• initAuftragsseite({ root, ansage, suche, hash }): token = tokenAusAdresse(suche, hash) (Fragment #t= zuerst, Rückfall ?t=); alle Texte aus texte() (Sie-Form, die Seite übergibt keine anrede); ohne Token sofort der Zustand ungueltig (keine Anfrage). Sonst lade(): Zustand laedt (p.ab-laden), anfrage(token); Status 200 mit body.auftrag → zeigeAuftrag, Ansage texte().geladen; alles andere → zeigeZustand(zustandAusAntwort(status === 200 ? 0 : status, body)), Ansage = Titel.

• zeige(zustand, ...kinder): setzt root.dataset.zustand, aria-busy ('true' nur bei laedt) und ersetzt den Inhalt mit root.replaceChildren(...kinder.filter(Boolean)) (null nie weiterreichen: der Browser macht daraus den Text „null“; renderBestaetigtBlock und renderDokumente liefern null, wenn es nichts zu zeigen gibt).

• zeigeZustand({ zustand, titel, text }): h1.ab-h1[data-titel][tabindex="-1"] mit dem Titel, p.ab-text mit dem Text, bei ungueltig, beendet und fehler p.ab-kontakt (texte().kontaktVor + Link mailto: + „ oder “ + Link tel: mit den Ziffern von KONTAKT.telefon + „.“), bei limit und fehler button.ab-knopf[data-aktion="erneut"] („Erneut versuchen“), der lade() erneut ruft.

• zeigeAuftrag(auftrag): Kinder in dieser Reihenfolge: p.ab-pille.ab-pille-<ton> aus statusAnzeige({ ...auftrag, kannBestaetigen: darfBestaetigen(auftrag) }); h1[data-titel] mit Auftragsbestätigung <nummer> bzw. (bestätigt, bestaetigtAm gesetzt) Ihr Auftrag ist bestätigt.; nur im offenen Zustand p.ab-intro; renderBestaetigtBlock; renderZusammenfassung; Überschrift „Unterlagen“ mit renderDokumente({ pdfHref: pdfPfad(token), agbHref: agbPfad(auftrag.agbUrl) }); bei darfBestaetigen(auftrag) das Formular renderBestaetigung(auftrag, { senden, nachErfolg, nachEnde }). Zustand bestaetigt bei gesetztem bestaetigtAm, sonst offen.

• senden(koerper): anfrage(token, 'bestaetigen', { method: 'POST', body: koerper }); Status 200 mit body.auftrag → { ok: true, auftrag }, sonst { ok: false, status: <200 → 0>, body }.

• nachErfolg(neu): zeigeAuftrag(neu), Ansage texte().titelBestaetigt, Fokus auf [data-bestaetigt] (falls vorhanden). nachEnde(status, body): zeigeZustand(zustandAusAntwort(status, body)), Ansage = Titel.

• Selbststart am Dateiende: if (typeof document !== 'undefined' && document.getElementById('ab-wurzel')) initAuftragsseite({ root, ansage: document.getElementById('ab-ansage'), suche: window.location.search, hash: window.location.hash }) (der Aufruf liefert ein Promise; Fehler werden nicht ausgegeben).

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2. Erwartet: fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add public/auftrag.js test/auftraegeKundenportalSeite.test.js && git commit -m "Kundenportal Aufträge: Seitenlogik der öffentlichen Bestätigungsseite

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 6: Hülle und Gestaltung public/auftrag.html und public/auftrag.css

Files:

• Create: public/auftrag.html
• Create: public/auftrag.css
• Create: test/auftraegeKundenportalHuelle.test.js

Interfaces:

• Consumes: #ab-wurzel, #ab-ansage (Task 5), das Klassen- und Markenvokabular aus Task 4/5, Bilder /webklar-logo.png, /favicon.ico, /favicon.svg.

• Produces: die Seite /auftrag.html (Token aus #t=, Rückfall ?t=); public/auftrag.css mit den Schlüsseln --ab-* (hell/dunkel) für body.ab-seite. Task 7 ergänzt den Portal-Teil (.ab-portal), Task 8 die Regel .inv-project.

• Step 1: Failing Test schreiben

test/auftraegeKundenportalHuelle.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'

const lies = (pfad) => readFileSync(new URL(`../${pfad}`, import.meta.url), 'utf8')
const html = lies('public/auftrag.html')
const css = lies('public/auftrag.css')

test('auftrag.html: noindex, kein Referrer, Viewport mit Notch, Titel, ein Modul-Skript, kein Inline-Skript', () => {
  assert.match(html, /<meta name="robots" content="noindex, nofollow">/)
  assert.match(html, /<meta name="referrer" content="no-referrer">/)
  assert.match(html, /<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">/)
  assert.match(html, /<meta name="color-scheme" content="light dark">/)
  assert.match(html, /<title>Auftragsbestätigung – WEBklar<\/title>/)
  assert.match(html, /<link rel="stylesheet" href="\/auftrag\.css">/)
  assert.deepEqual(html.match(/<script\b[^>]*>/g), ['<script type="module" src="/auftrag.js">'])
  assert.doesNotMatch(html, /<script>/)
  assert.doesNotMatch(html, /\son[a-z]+=/i, 'keine Ereignis-Attribute')
  assert.doesNotMatch(html, /https?:\/\/(?!webklar\.com\/impressum)/, 'keine Fremdressourcen')
})

test('auftrag.html: Wurzel im Zustand „lädt“, Live-Region, Hinweis ohne JavaScript', () => {
  assert.match(html, /<div class="ab-wurzel" id="ab-wurzel" data-zustand="laedt" aria-busy="true">/)
  assert.match(html, /<p class="ab-laden">Ihre Auftragsbestätigung wird geladen …<\/p>/)
  assert.match(html, /<div class="ab-vh" id="ab-ansage" aria-live="polite"><\/div>/)
  assert.match(html, /<noscript><p>Bitte aktivieren Sie JavaScript, um Ihren Auftrag zu bestätigen\.<\/p><\/noscript>/)
  assert.match(html, /<noscript><style>\.ab-laden\{display:none\}<\/style><\/noscript>/)
})

test('auftrag.html: Fußzeile mit Datenschutz und Impressum; Zurück-Link nur für die installierte App', () => {
  assert.match(html, /<footer class="ab-fuss">[\s\S]*<a href="\/datenschutz\.html" target="_blank" rel="noopener noreferrer">Datenschutz<\/a>[\s\S]*<a href="https:\/\/webklar\.com\/impressum" target="_blank" rel="noopener noreferrer">Impressum<\/a>[\s\S]*<\/footer>/)
  assert.match(html, /<a class="ab-app-back" href="\/dashboard\.html">‹ Zurück zum Kundenbereich<\/a>/)
})

test('auftrag.css: Farben der Mailvorlagen hell und dunkel, Standalone-Modus, Handy-Tabelle, Umbruch, Tippflächen', () => {
  for (const farbe of ['#f1f0ec', '#efe6fb', '#5a2a91', '#e4f2e6', '#1d5b2c', '#161615', '#1f1f1e', '#f2f1ee', '#a8a6a0']) assert.ok(css.includes(farbe), farbe)
  assert.match(css, /@media \(prefers-color-scheme: dark\)/)
  assert.match(css, /@media \(display-mode: standalone\)/)
  assert.match(css, /env\(safe-area-inset-top\)/)
  assert.match(css, /overflow-wrap:\s*anywhere/)
  assert.match(css, /min-height:\s*48px/)
  assert.match(css, /content:\s*attr\(data-label\)/)
  assert.match(css, /\.ab-app-back\s*\{[^}]*display:\s*none/)
  assert.match(css, /\.ab-vh\s*\{/)
  assert.match(css, /body\.ab-seite[^{]*\.hidden|\.ab-seite \.hidden/)
})

test('Service Worker und Manifest brauchen für die neue Seite keinen Eintrag', () => {
  assert.doesNotMatch(lies('public/sw.js'), /auftrag/)
  const manifest = JSON.parse(lies('public/manifest.webmanifest'))
  assert.equal(manifest.scope, '/', 'der Link aus der Mail kann in der installierten App öffnen: darum der Standalone-Modus oben')
})

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test test/auftraegeKundenportalHuelle.test.js

Erwartet: FAIL (ENOENT … public/auftrag.html).

• Step 3: Dateien anlegen

public/auftrag.html (wörtlich, der Test prüft diese Zeilen):

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="robots" content="noindex, nofollow">
  <meta name="referrer" content="no-referrer">
  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" content="#f1f0ec" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#161615" media="(prefers-color-scheme: dark)">
  <title>Auftragsbestätigung – WEBklar</title>
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/auftrag.css">
  <noscript><style>.ab-laden{display:none}</style></noscript>
</head>
<body class="ab-seite">
  <!-- Bestätigungsseite für eine Auftragsbestätigung (Link aus der Mail K31: /auftrag.html#t=<Token>, Rückfall ?t=<Token>).
       Der Token steht nur in der Adresse und im Speicher der Seite: keine Cookies, kein Browserspeicher, keine Fremdanfragen,
       nichts im Protokoll (auftrag.js). Ohne Anmeldung erreichbar, nicht für Suchmaschinen. -->
  <a class="ab-app-back" href="/dashboard.html">‹ Zurück zum Kundenbereich</a>
  <header class="ab-kopf">
    <div class="ab-innen"><img class="ab-logo" src="/webklar-logo.png" width="36" height="36" alt=""><span class="ab-marke">WEBklar</span></div>
  </header>
  <main class="ab-haupt">
    <div class="ab-innen">
      <div class="ab-wurzel" id="ab-wurzel" data-zustand="laedt" aria-busy="true">
        <noscript><p>Bitte aktivieren Sie JavaScript, um Ihren Auftrag zu bestätigen.</p></noscript>
        <p class="ab-laden">Ihre Auftragsbestätigung wird geladen …</p>
      </div>
    </div>
  </main>
  <div class="ab-vh" id="ab-ansage" aria-live="polite"></div>
  <footer class="ab-fuss">
    <div class="ab-innen">
      <a href="/datenschutz.html" target="_blank" rel="noopener noreferrer">Datenschutz</a>
      <a href="https://webklar.com/impressum" target="_blank" rel="noopener noreferrer">Impressum</a>
    </div>
  </footer>
  <script type="module" src="/auftrag.js"></script>
</body>
</html>

public/auftrag.css: Kopf-Kommentar („Bestätigungsseite für Auftragsbestätigungen und Abschnitt ‚Aufträge‘ im Portal; Farben wie die Mailvorlagen“). Die Datei wird auch vom Dashboard geladen, deshalb ist jede Regel an body.ab-seite bzw. .ab-portal gebunden (kein Eingriff in andere Seiten); einzige Ausnahmen sind .ab-rechnungen-titel (Task 7) und .inv-project (Task 8). Inhalt dieses Tasks (Teil „öffentliche Seite“):

Bereich	Vorgabe
Schlüssel (hell, auf body.ab-seite)	--ab-grund #f1f0ec, --ab-karte #ffffff, --ab-text #111111, --ab-weich #4a4843, --ab-linie #e8e6e0, --ab-box #f7f6f3, --ab-knopf #111111, --ab-knopf-text #ffffff, Pillen --ab-warn-bg #efe6fb / --ab-warn-text #5a2a91, --ab-ok-bg #e4f2e6 / --ab-ok-text #1d5b2c, --ab-rot-bg #fbe4e1 / --ab-rot-text #8c1d18, --ab-muted-bg #ecebe6 / --ab-muted-text #4a4843, --ab-fehler #b3261e
Dunkel (@media (prefers-color-scheme: dark))	--ab-grund #161615, --ab-karte #1f1f1e, --ab-text #f2f1ee, --ab-weich #a8a6a0, --ab-linie #3a3a37, --ab-box #2a2a28, --ab-knopf #f2f1ee, --ab-knopf-text #161615, Pillen und --ab-fehler entsprechend abgedunkelt (Kontrast mindestens 4,5 : 1)
Grundlayout	body.ab-seite ohne Rand, -webkit-text-size-adjust: 100%, min-height: 100dvh, Spalte (display: flex; flex-direction: column), Systemschrift 16 px/1,55; .ab-innen höchstens 40 rem, 16 px Rand; .ab-kopf mit Logo (36 px, Radius 10) und Wortmarke, oben max(20px, env(safe-area-inset-top)); .ab-wurzel als Karte (Radius 16, Rand --ab-linie, Innenabstand 28/24 px, auf dem Handy 22/18 px) mit overflow-wrap: anywhere; .ab-haupt { flex: 1 0 auto }
Inhalt	.ab-pille (Kapsel, 12 px fett) mit ab-pille-ok/warn/muted/rot; .ab-h1 1,6 rem; .ab-h2 als Beschriftung (0,8 rem, Großbuchstaben, --ab-weich); .ab-liste Zeilen als Raster 9 rem + Rest (auf dem Handy untereinander); .ab-zeile mit Trennlinie; .ab-gesamt Zeile mit Abstand und fetter Summe; .ab-hinweis klein, --ab-weich; .ab-text behält Zeilenumbrüche (white-space: pre-line); .ab-links a mindestens 44 px hoch; .ab-bestaetigt als grüne Box (--ab-ok-*), :focus-visible mit Rahmen
Tabelle	Desktop: normale Tabelle; unter 640 px: thead nur für Screenreader (.ab-vh-Technik), tr als Block mit Trennlinie, td als Zeile mit td::before { content: attr(data-label) } (erste Zelle ohne Marke, fett)
Formular	.ab-haken Zeile mit 22-px-Haken (accent-color) und Text 15 px; .ab-frei klein, --ab-weich; .ab-fehler in --ab-fehler, fett; .ab-knopf mit min-height: 48px, Radius 10, --ab-knopf/--ab-knopf-text, auf dem Handy volle Breite, :disabled mit opacity .45, :focus-visible mit 3-px-Rahmen; .ab-notiz, .ab-gesperrt klein und --ab-weich
Fuß und Hilfsklassen	.ab-fuss klein, Links nebeneinander mit 16 px Abstand, unten max(24px, env(safe-area-inset-bottom)); .ab-vh (nur für Screenreader); body.ab-seite .hidden { display: none !important }
Installierte App	.ab-app-back { display: none }; @media (display-mode: standalone): .ab-app-back { display: inline-block; … } und .ab-kopf oben calc(env(safe-area-inset-top) + 12px) (Muster legal-form.css)

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2. Erwartet: fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add public/auftrag.html public/auftrag.css test/auftraegeKundenportalHuelle.test.js && git commit -m "Kundenportal Aufträge: auftrag.html und auftrag.css (noindex, Mail-Stil, Fußzeile, Standalone)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 7: Abschnitt „Aufträge“ im Portal public/auftrag-portal.js

Files:

• Create: public/auftrag-portal.js
• Modify: public/auftrag.css (Teil „Portal“, .ab-portal und die Karten)
• Create: test/auftraegeKundenportalPortal.test.js

Interfaces:

• Consumes: Task 3 (texte, ANREDE_DU, statusAnzeige, kartenMeta, sortiereAuftraege, darfBestaetigen, agbPfad), Task 4 (h, renderZusammenfassung, renderDokumente, renderBestaetigtBlock, renderBestaetigung); request(path, { method, body }) wie api() in app.js (liefert JSON, wirft Error mit status; body ist bereits ein JSON-Text); HTTP laut V5: GET /api/auftraege → { aktiv, auftraege: (AuftragOeffentlich & { id, kannBestaetigen })[] } (kannBestaetigen laut Plan von L5: true bei Status versendet/abgerechnet ohne bestaetigtAm, in der Kundenansicht immer false), GET /api/auftraege/:id/pdf (Link), POST /api/auftraege/:id/bestaetigen → { auftrag }; Antworten 404 und 410 beim Bestätigen laut L5-Plan.

• Produces: initAuftraege({ section, body, invoicesTitle, request, viewAs = false }) → Promise<{ sichtbar: boolean }>; Klassen ab-portal, ab-karte, ab-karte-kopf, ab-karte-titel, ab-karte-meta, ab-karte-aktionen, ab-details; Marken data-auftrag="<id>", data-status.

• Step 1: Failing Test schreiben

test/auftraegeKundenportalPortal.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { installFakeDom } from './support/fakeDom.js'
import { h } from '../public/auftrag-dom.js'
import { initAuftraege } from '../public/auftrag-portal.js'
import { ab, privat, bestaetigt, eintrag, pruefeQuelltext } from './auftraegeKundenportalDaten.js'

const NB = '\u{a0}'
const mit = (fn) => async () => {
  const fx = installFakeDom()
  try {
    await fn(fx)
  } finally {
    fx.restore()
  }
}
function aufbau(fx) {
  const body = h('div', { id: 'orders-body' })
  const section = h('section', { id: 'orders-section', class: 'ab-portal hidden' }, body)
  const invoicesTitle = h('h2', { id: 'invoices-title', class: 'hidden' }, 'Rechnungen')
  fx.document.body.append(section, invoicesTitle)
  return { section, body, invoicesTitle }
}
/** request wie api() in app.js: gibt die nächste Antwort zurück oder wirft sie (Error mit status). */
function fakeRequest(antworten) {
  const aufrufe = []
  const request = async (pfad, optionen = {}) => {
    aufrufe.push({ pfad, methode: optionen.method || 'GET', body: optionen.body ? JSON.parse(optionen.body) : undefined })
    const antwort = antworten.shift()
    if (antwort instanceof Error) throw antwort
    return antwort
  }
  return { request, aufrufe }
}
const fehler = (status, text = `Fehler ${status}`) => Object.assign(new Error(text), { status })
const sichtbar = (el) => !el.classList.contains('hidden')
const liste = (...auftraege) => ({ aktiv: true, auftraege })

const A_OFFEN = eintrag({ id: 'ab1', nummer: 'AB-2026-0002' })
const A_OHNE_RECHT = eintrag({ id: 'ab4', nummer: 'AB-2026-0004', kannBestaetigen: false }) // Status offen, der Server erlaubt das Bestätigen nicht
const A_FERTIG = eintrag({ id: 'ab2', ...bestaetigt(privat({ fruehbeginn: true, fruehesterBeginn: null })), nummer: 'AB-2026-0003', kannBestaetigen: false })
const A_STORNO = eintrag({
  id: 'ab0', nummer: 'AB-2026-0001', status: 'storniert', kannBestaetigen: false, art: 'aufwand', positionen: [], summeCents: null,
  aufwandText: '100,00 € pro Stunde in Schritten von 15 Minuten.',
})
const bestaetige = async (fx, wurzel) => {
  await fx.klick(fx.finde(wurzel, '[data-feld="bestaetigung"]'))
  await fx.klick(fx.finde(wurzel, '[data-aktion="bestaetigen"]'))
}

test('Der Abschnitt bleibt weg: Schalter aus, keine Aufträge, Ladefehler', mit(async (fx) => {
  for (const antwort of [{ aktiv: false, auftraege: [] }, { aktiv: false, auftraege: [A_OFFEN] }, liste(), fehler(500), fehler(401)]) {
    const els = aufbau(fx)
    const { request, aufrufe } = fakeRequest([antwort])
    assert.deepEqual(await initAuftraege({ ...els, request, viewAs: false }), { sichtbar: false })
    assert.equal(sichtbar(els.section), false)
    assert.equal(sichtbar(els.invoicesTitle), false)
    assert.deepEqual(aufrufe, [{ pfad: '/api/auftraege', methode: 'GET', body: undefined }])
    els.section.remove()
    els.invoicesTitle.remove()
  }
}))

test('Liste: Bestätigbares zuerst, Status, Zeile, PDF-Link; nur der offene Auftrag ist aufgeklappt und hat das Formular', mit(async (fx) => {
  const els = aufbau(fx)
  const { request } = fakeRequest([liste(A_STORNO, A_FERTIG, A_OHNE_RECHT, A_OFFEN)])
  assert.deepEqual(await initAuftraege({ ...els, request, viewAs: false }), { sichtbar: true })
  assert.equal(sichtbar(els.section), true)
  assert.equal(sichtbar(els.invoicesTitle), true)
  const karten = fx.alle(els.body, '.ab-karte')
  assert.deepEqual(karten.map((k) => k.getAttribute('data-auftrag')), ['ab1', 'ab4', 'ab2', 'ab0'])
  const [offen, ohneRecht, fertig, storno] = karten
  assert.equal(fx.finde(offen, '.ab-pille').textContent, 'Bitte bestätigen')
  assert.equal(fx.finde(ohneRecht, '.ab-pille').textContent, 'Versendet')
  assert.equal(fx.finde(ohneRecht, 'form'), null, 'ohne kannBestaetigen vom Server gibt es kein Formular')
  assert.equal(fx.finde(fertig, '.ab-pille').textContent, 'Bestätigt')
  assert.equal(fx.finde(storno, '.ab-pille').textContent, 'Storniert')
  assert.equal(fx.finde(offen, '.ab-karte-titel').textContent, 'Website Anelia Wolf')
  assert.equal(fx.finde(offen, '.ab-karte-meta').textContent, `vom 06.10.2026 · 800,00${NB}€`)
  assert.equal(fx.finde(storno, '.ab-karte-meta').textContent, 'vom 06.10.2026 · nach Aufwand')
  assert.equal(fx.finde(offen, '[data-link="pdf"]').getAttribute('href'), '/api/auftraege/ab1/pdf')
  assert.equal(fx.finde(offen, '[data-link="pdf"]').textContent, 'PDF ansehen')
  assert.equal(fx.finde(offen, 'summary').textContent, 'Details ansehen und bestätigen')
  assert.equal(fx.finde(fertig, 'summary').textContent, 'Details ansehen')
  assert.equal(fx.finde(offen, 'details').hasAttribute('open'), true)
  assert.equal(fx.finde(fertig, 'details').hasAttribute('open'), false)
  assert.ok(fx.finde(offen, 'form [data-feld="bestaetigung"]'))
  assert.equal(fx.finde(fertig, 'form'), null)
  assert.equal(fx.finde(storno, 'form'), null)
  assert.deepEqual(fx.alle(fx.finde(fertig, '[data-bestaetigt]'), 'p').map((p) => p.textContent), ['Bestätigt am 07.10.2026, 10:15 Uhr', 'Wir beginnen auf deinen Wunsch schon vor Ablauf der Widerrufsfrist.'])
  assert.equal(fx.text(fx.finde(offen, 'legend')), 'Deine Bestätigung', 'Portal: Du-Form')
  assert.equal(fx.text(fx.finde(offen, '.ab-notiz')), 'Deine Bestätigung wird mit Datum und Uhrzeit gespeichert.')
  assert.deepEqual(fx.alle(offen, 'h4').map((x) => x.textContent), ['Leistungsumfang', 'Zahlung', 'Termine'])
  assert.equal(fx.finde(offen, '[data-link="agb"]').getAttribute('href'), '/rechtliches/agb-2026-09-30.pdf')
}))

test('Bestätigen: POST an /api/auftraege/<id>/bestaetigen, die Karte zeigt danach „Bestätigt“ (auch ohne id in der Antwort)', mit(async (fx) => {
  const els = aufbau(fx)
  const { request, aufrufe } = fakeRequest([liste(A_OFFEN), { auftrag: bestaetigt(ab()) }])
  await initAuftraege({ ...els, request, viewAs: false })
  await bestaetige(fx, els.body)
  assert.deepEqual(aufrufe[1], { pfad: '/api/auftraege/ab1/bestaetigen', methode: 'POST', body: { bestaetigt: true, fruehbeginn: false } })
  const karte = fx.finde(els.body, '.ab-karte')
  assert.equal(karte.getAttribute('data-auftrag'), 'ab1')
  assert.equal(fx.finde(karte, '.ab-pille').textContent, 'Bestätigt')
  assert.equal(fx.finde(karte, 'form'), null)
  assert.equal(fx.finde(karte, 'details').hasAttribute('open'), true)
  assert.equal(fx.document.activeElement, fx.finde(karte, '[data-bestaetigt]'))
}))

test('Ansichtsmodus: Häkchen und Knopf gesperrt, Hinweis sichtbar, kein POST; der Abschnitt bleibt lesbar', mit(async (fx) => {
  const els = aufbau(fx)
  // wie L5 es liefert: in der Kundenansicht ist kannBestaetigen immer false; die Oberfläche zeigt die offene AB trotzdem mit gesperrtem Formular
  const { request, aufrufe } = fakeRequest([liste(eintrag({ ...privat(), id: 'ab1', kannBestaetigen: false }))])
  await initAuftraege({ ...els, request, viewAs: true })
  assert.equal(fx.finde(els.body, '.ab-pille').textContent, 'Bitte bestätigen')
  const form = fx.finde(els.body, 'form')
  assert.equal(fx.alle(form, 'input').every((i) => i.disabled), true)
  assert.equal(fx.finde(form, '[data-aktion="bestaetigen"]').disabled, true)
  assert.equal(fx.finde(form, '[data-gesperrt]').textContent, 'Im Ansichtsmodus kann der Auftrag nicht bestätigt werden. Die Bestätigung gibt der Kunde selbst ab.')
  await fx.sende(form, 'submit')
  assert.equal(aufrufe.length, 1, 'nur das Laden der Liste')
  assert.ok(fx.finde(els.body, '[data-link="pdf"]'))
  assert.ok(fx.finde(els.body, '[data-position]'))
}))

test('Fehler beim Bestätigen: feste Meldung statt Servertext; ein 410 lädt die Liste neu', mit(async (fx) => {
  const els = aufbau(fx)
  const storniert = { ...A_OFFEN, status: 'storniert', kannBestaetigen: false }
  const { request, aufrufe } = fakeRequest([liste(A_OFFEN), fehler(500), fehler(410, 'Diese Auftragsbestätigung wurde storniert.'), liste(storniert)])
  await initAuftraege({ ...els, request, viewAs: false })
  await bestaetige(fx, els.body)
  assert.equal(fx.finde(els.body, '[data-fehler]').textContent, 'Die Bestätigung konnte nicht gespeichert werden. Bitte versuche es später noch einmal.')
  assert.ok(!fx.text(els.body).includes('Fehler 500'))
  await fx.klick(fx.finde(els.body, '[data-aktion="bestaetigen"]'))
  assert.equal(aufrufe.length, 4, 'Liste, POST, POST, Liste neu')
  assert.equal(fx.finde(els.body, '.ab-pille').textContent, 'Storniert')
  assert.equal(fx.finde(els.body, 'form'), null)
}))

test('Fremdtext bleibt Text; die ID im PDF-Link wird kodiert', mit(async (fx) => {
  const els = aufbau(fx)
  const boese = '<script>alert(1)</script> & "Test"'
  const { request } = fakeRequest([liste(eintrag({ id: 'a/b', titel: boese }))])
  await initAuftraege({ ...els, request, viewAs: false })
  assert.equal(fx.alle(els.body, 'script').length, 0)
  assert.equal(fx.finde(els.body, '.ab-karte-titel').textContent, boese)
  assert.equal(fx.finde(els.body, '[data-link="pdf"]').getAttribute('href'), '/api/auftraege/a%2Fb/pdf')
}))

test('Quelltext und CSS: kein eigenes fetch, Karten und Abschnitt sind gestaltet', () => {
  pruefeQuelltext('auftrag-portal.js', { importe: ['./auftrag-ansicht.js', './auftrag-dom.js'] })
  const css = readFileSync(new URL('../public/auftrag.css', import.meta.url), 'utf8')
  for (const klasse of ['ab-portal', 'ab-karte', 'ab-karte-kopf', 'ab-karte-titel', 'ab-karte-meta', 'ab-karte-aktionen', 'ab-details']) {
    assert.match(css, new RegExp(`\\.${klasse}[\\s{,.:\\[>]`), `.${klasse} ist gestaltet`)
  }
  assert.match(css, /\.ab-portal\s*\{[^}]*--ab-/, 'der Portal-Abschnitt setzt seine eigenen Farbschlüssel (dunkles Portal)')
})

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test test/auftraegeKundenportalPortal.test.js

Erwartet: FAIL (Cannot find module '../public/auftrag-portal.js').

• Step 3: public/auftrag-portal.js und Portal-CSS

initAuftraege({ section, body, invoicesTitle, request, viewAs }) (ES-Modul, Kopf-Kommentar „Abschnitt ‚Aufträge‘ im Reiter Rechnungen, geladen von app.js, loadCustomerOrders; request ist api aus app.js“). Anrede: Du wie das übrige Portal; das Modul benutzt nur ANREDE_DU und texte(ANREDE_DU), kein eigener Text:

• Wirksames kannBestaetigen je Eintrag, einmal beim Laden gesetzt: darfBestaetigen(eintrag) && (viewAs || eintrag.kannBestaetigen === true). Grund: L5 liefert kannBestaetigen in der Kundenansicht immer als false (Vertragsfrage 3), die Oberfläche soll dort die offene AB trotzdem als „Bitte bestätigen“ mit gesperrtem Formular zeigen. Status-Pille (statusAnzeige), Sortierung, aufgeklappte Karte und Formular benutzen nur dieses wirksame Flag.
• Fehlen section, body oder request: { sichtbar: false }. lade(): await request('/api/auftraege'); jeder Fehler → { sichtbar: false } (kein Wurf, keine Anzeige). data.aktiv !== true oder keine Einträge → { sichtbar: false }, hidden bleibt an Abschnitt und invoicesTitle. Sonst Einträge mit typeof id === 'string' und id nicht leer, sortiereAuftraege, Karten in body (replaceChildren), hidden von section und invoicesTitle entfernen, { sichtbar: true }.
• Karte article.ab-karte[data-auftrag=<id>][data-status=<status>]: div.ab-karte-kopf mit Titelblock (p.ab-karte-nummer > strong Nummer, p.ab-karte-titel Titel (nur wenn vorhanden), p.ab-karte-meta aus kartenMeta) und span.ab-pille.ab-pille-<ton> aus statusAnzeige; div.ab-karte-aktionen mit a.ab-link[data-link="pdf"] (texte(ANREDE_DU).kartePdf, Ziel /api/auftraege/${encodeURIComponent(id)}/pdf, target="_blank", rel="noopener noreferrer"); details.ab-details (Attribut open bei bestätigbaren Aufträgen und bei der Karte, die gerade bestätigt wurde) mit summary (karteDetailsBestaetigen bei bestätigbaren, sonst karteDetails), renderZusammenfassung(auftrag, { ebene: 4 }), renderDokumente({ agbHref: agbPfad(auftrag.agbUrl) }), dann renderBestaetigtBlock(auftrag, { anrede: ANREDE_DU }) bzw. bei wirksamem kannBestaetigen das Formular.
• Formular: renderBestaetigung(auftrag, { senden, nachErfolg, nachEnde, gesperrt: viewAs ? texte(ANREDE_DU).ansichtsmodus : '', anrede: ANREDE_DU }); senden(koerper) ruft request mit dem Pfad /api/auftraege/<id>/bestaetigen (id per encodeURIComponent) und { method: 'POST', body: JSON.stringify(koerper) } auf → { ok: true, auftrag: antwort.auftrag }, bei Wurf { ok: false, status: Number(err?.status) || 0, body: { error: String(err?.message ?? '') } } (der Text dient nur der Erkennung, renderBestaetigung zeigt ihn nie). nachErfolg(neu): den Eintrag in der Liste durch { ...alt, ...neu, id: alt.id, kannBestaetigen: false } ersetzen und alle Karten per replaceChildren neu zeichnen (die eben bestätigte Karte aufgeklappt, Reihenfolge wie beim Laden), dann in ihr [data-bestaetigt] fokussieren (der Plan von L5 liefert id und kannBestaetigen auch in der POST-Antwort; das Zusammenführen bleibt als Vorsicht). nachEnde(): Liste neu laden (GET /api/auftraege) und neu zeichnen; scheitert das, bleibt die Anzeige stehen.

public/auftrag.css (Teil „Portal“, an .ab-portal gebunden): .ab-portal setzt dunkle Schlüssel --ab-* aus den Portalfarben (--kb-surface, --kb-border, --kb-muted, --kb-purple, Pillen wie .pill-ok/-warn/-red/-muted in kundenbereich.css), margin: 0 0 28px; .ab-portal h2 20 px; .ab-karte wie .kb-panel (Radius 16, Rand, 16/18 px Innenabstand, 12 px Abstand zwischen Karten); .ab-karte-kopf Zeile mit Abstand, Pille rechts, overflow-wrap: anywhere; .ab-karte-nummer fett, .ab-karte-meta klein und gedämpft; .ab-karte-aktionen Zeile mit 10 px Abstand, Links als Kapsel mit mindestens 44 px Höhe; .ab-details > summary mindestens 44 px, Farbe #d4b4ff, fett; .ab-knopf im Portal lila (--kb-purple, weiße Schrift, Kapsel, min-height: 48px); .ab-haken, .ab-fehler (#fca5a5), .ab-notiz, .ab-gesperrt, Tabelle (unter 640 px gestapelt wie auf der Seite) in den Portalfarben; .ab-rechnungen-titel 20 px.

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2. Erwartet: fail 0. Danach test/auftraegeKundenportalHuelle.test.js erneut laufen lassen (CSS wurde ergänzt): fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add public/auftrag-portal.js public/auftrag.css test/auftraegeKundenportalPortal.test.js && git commit -m "Kundenportal Aufträge: Abschnitt „Aufträge“ im Portal (Karten, Bestätigen, Ansichtsmodus gesperrt)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 8: Dashboard verdrahten, Projekt unter der Rechnungsnummer

Files:

• Modify: public/dashboard.html (Ansicht view-invoices, Stylesheet)
• Modify: public/app.js (invoiceNumberHtml, loadCustomerOrders, Aufruf in initDashboardPage)
• Modify: public/auftrag.css (Regel .inv-project)
• Create: test/auftraegeKundenportalDashboard.test.js

Interfaces:

• Consumes: initAuftraege (Task 7); api, escapeHtml, chatState.viewAs aus app.js; projekt aus /api/invoices (Task 2).

• Produces: in dashboard.html die Elemente #orders-section, #orders-body, #invoices-title; in app.js die globalen Funktionen invoiceNumberHtml(i) → string (maskiert) und loadCustomerOrders() → Promise.

• Step 1: Failing Test schreiben

test/auftraegeKundenportalDashboard.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import vm from 'node:vm'

const lies = (pfad) => readFileSync(new URL(`../${pfad}`, import.meta.url), 'utf8')
const html = lies('public/dashboard.html')
const app = lies('public/app.js')
const css = lies('public/auftrag.css')

test('dashboard.html: auftrag.css nach zeiten.css; Abschnitt „Aufträge“ vor der Rechnungsliste, zunächst versteckt', () => {
  assert.match(html, /<link rel="stylesheet" href="\/zeiten\.css">\s*<link rel="stylesheet" href="\/auftrag\.css">/)
  const start = html.indexOf('id="view-invoices"')
  const ende = html.indexOf('</section>', html.indexOf('id="invoices-abo-note"'))
  const ansicht = html.slice(start, ende)
  assert.match(ansicht, /<section class="ab-portal hidden" id="orders-section" aria-labelledby="orders-title">\s*<h2 id="orders-title">Aufträge<\/h2>[\s\S]*<div id="orders-body"><\/div>\s*<\/section>\s*<h2 class="ab-rechnungen-titel hidden" id="invoices-title">Rechnungen<\/h2>\s*<div class="kb-panel" id="invoices-body">/)
  assert.match(ansicht, /<p class="kb-note">Deine Auftragsbestätigungen\. Offene Aufträge bestätigst du hier mit einem Klick\.<\/p>/, 'Portal: Du-Form')
  assert.ok(ansicht.indexOf('id="orders-section"') < ansicht.indexOf('id="invoices-body"'))
  assert.equal([...html.matchAll(/id="orders-section"/g)].length, 1)
  assert.match(ansicht, /<h1>Rechnungen<\/h1>/, 'Kopf und Hinweis des Reiters bleiben')
})

test('app.js: loadCustomerOrders lädt auftrag-portal.js nach der Rechnungsliste, mit api und Ansichtsmodus; Fehler bleiben still', () => {
  const funktion = app.slice(app.indexOf('function loadCustomerOrders()'), app.indexOf('/* ---', app.indexOf('function loadCustomerOrders()')))
  assert.ok(funktion.length > 40, 'Funktion gefunden')
  assert.match(funktion, /import\('\/auftrag-portal\.js'\)/)
  assert.match(funktion, /m\.initAuftraege\(/)
  for (const teil of ["section: document.getElementById('orders-section')", "body: document.getElementById('orders-body')", "invoicesTitle: document.getElementById('invoices-title')", 'request: api', 'viewAs: chatState.viewAs']) {
    assert.ok(funktion.includes(teil), teil)
  }
  assert.match(funktion, /\.catch\(\(\) => \{\}\)/)
  const dashboard = app.slice(app.indexOf('async function initDashboardPage'))
  const aufruf = (name) => dashboard.search(new RegExp(`^\\s*${name}\\(\\)\\s*$`, 'm'))
  assert.ok(aufruf('loadCustomerInvoices') > 0 && aufruf('loadCustomerOrders') > aufruf('loadCustomerInvoices'), 'ein eigener Aufruf, nach der Rechnungsliste')
  assert.equal([...app.matchAll(/function loadCustomerOrders\(\)/g)].length, 1)
})

test('invoiceNumberHtml: Projekt unter der Rechnungsnummer, alles maskiert', () => {
  const ausschnitt = (muster) => {
    const treffer = app.match(muster)
    assert.ok(treffer, `${muster} nicht in app.js`)
    return treffer[0]
  }
  const code = [
    ausschnitt(/function escapeHtml\(str\) \{[\s\S]*?\n\}/),
    ausschnitt(/\/\/ @rechnungsnummer-anfang[\s\S]*?\/\/ @rechnungsnummer-ende/),
  ].join('\n')
  const { invoiceNumberHtml } = vm.runInNewContext(`${code}\n({ invoiceNumberHtml })`)
  assert.equal(invoiceNumberHtml({ number: 'WEBKLAR-0009', projekt: 'Website Anelia Wolf' }), 'WEBKLAR-0009<span class="inv-project">Website Anelia Wolf</span>')
  assert.equal(invoiceNumberHtml({ number: 'WEBKLAR-0009', projekt: '' }), 'WEBKLAR-0009')
  assert.equal(invoiceNumberHtml({ number: 'H96T-0004' }), 'H96T-0004')
  assert.equal(
    invoiceNumberHtml({ number: 'X', projekt: '<img src=x onerror=alert(1)> & "Bäckerei"' }),
    'X<span class="inv-project">&lt;img src=x onerror=alert(1)&gt; &amp; &quot;Bäckerei&quot;</span>',
  )
  assert.match(app, /<td class="inv-no">\$\{invoiceNumberHtml\(i\)\}<\/td>/)
  assert.doesNotMatch(app, /\$\{i\.projekt\}/, 'der Projektname geht nie unmaskiert in eine Vorlage')
})

test('auftrag.css: Projektname unter der Rechnungsnummer (Tabelle und Handy-Karte)', () => {
  assert.match(css, /\.inv-project\s*\{[^}]*display:\s*block/)
  assert.match(css, /\.inv-project\s*\{[^}]*overflow-wrap:\s*anywhere/)
})

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test test/auftraegeKundenportalDashboard.test.js

Erwartet: FAIL (kein auftrag.css-Link, kein Abschnitt, keine Funktionen).

• Step 3: Änderungen

public/dashboard.html:

• Nach <link rel="stylesheet" href="/zeiten.css"> die Zeile <link rel="stylesheet" href="/auftrag.css">.
• In #view-invoices zwischen </header> und <div class="kb-panel" id="invoices-body">:

        <!-- Aufträge: Auftragsbestätigungen ansehen und bestätigen (auftrag-portal.js, von app.js loadCustomerOrders); erscheint nur,
             wenn Aufträge freigeschaltet sind und der Kunde welche hat -->
        <section class="ab-portal hidden" id="orders-section" aria-labelledby="orders-title">
          <h2 id="orders-title">Aufträge</h2>
          <p class="kb-note">Deine Auftragsbestätigungen. Offene Aufträge bestätigst du hier mit einem Klick.</p>
          <div id="orders-body"></div>
        </section>
        <h2 class="ab-rechnungen-titel hidden" id="invoices-title">Rechnungen</h2>

public/app.js:

• Direkt über async function loadCustomerInvoices() (unter dem Abschnittskommentar „Rechnungen“):

// @rechnungsnummer-anfang
/** Rechnungsnummer mit dem Projekt darunter (Stripe-Metadaten projektName, Feld `projekt`); beides maskiert. */
function invoiceNumberHtml(i) {
  const project = i.projekt ? `<span class="inv-project">${escapeHtml(i.projekt)}</span>` : ''
  return `${escapeHtml(i.number)}${project}`
}
// @rechnungsnummer-ende

und in der Tabellenzeile <td class="inv-no">${escapeHtml(i.number)}</td> ersetzen durch <td class="inv-no">${invoiceNumberHtml(i)}</td>.

• Hinter loadCustomerInvoices (vor dem Abschnittskommentar „Aktivität“) function loadCustomerOrders(): return import('/auftrag-portal.js').then((m) => m.initAuftraege({ section: document.getElementById('orders-section'), body: document.getElementById('orders-body'), invoicesTitle: document.getElementById('invoices-title'), request: api, viewAs: chatState.viewAs })).catch(() => {}), mit //-Kommentar (nicht /* --- */, der Test schneidet die Funktion am nächsten Abschnittskommentar ab): Abschnitt „Aufträge“ im Reiter Rechnungen, public/auftrag-portal.js; Fehler lassen den Abschnitt weg und stören die Rechnungen nicht.
• In initDashboardPage direkt nach dem Aufruf loadCustomerInvoices() die Zeile loadCustomerOrders() (chatState.viewAs ist dort schon gesetzt).

public/auftrag.css: .inv-project { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--kb-muted, rgba(255, 255, 255, 0.6)); overflow-wrap: anywhere; } (gilt in der Desktop-Tabelle und in der Handy-Karte; der Vorsatz „Rechnung “ steht davor als ::before und bleibt unverändert).

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2, danach die bestehenden Tests, die app.js und dashboard.html festnageln:

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test --test-concurrency=1 test/auftraegeKundenportalDashboard.test.js test/auftraegeKundenportalHuelle.test.js test/shopWiring.test.js test/termineView.test.js test/zeitenBestellen.test.js test/analyseView.test.js test/funktionenRoutes.test.js

Erwartet: fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add public/dashboard.html public/app.js public/auftrag.css test/auftraegeKundenportalDashboard.test.js && git commit -m "Kundenportal Aufträge: Abschnitt im Reiter Rechnungen, Projekt unter der Rechnungsnummer

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 9: Widerrufsseite: Vertragsart „Projektauftrag“ mit freiwilliger Nummer der AB

Files:

• Modify: public/widerrufen.html
• Create: public/auftrag-widerruf.js
• Modify: test/publicForms.test.js (genau eine Zeile im Test widerrufen_html_radio, Vertragsfrage 1)
• Create: test/auftraegeKundenportalWiderruf.test.js

Interfaces:

• Consumes: abNummerNormalisiert, texte().abNummerUngueltig (Task 3); initLegalForm({ endpoint, fields }) aus public/legal-form.js (unverändert: liest je Feld form.elements[name].value, schickt es und zeigt es in der Eingangsbestätigung mit der Beschriftung aus data-label-for/data-label); POST /api/abo/public/withdraw mit order: 'projekt' und abNummer (Strang L5: optional; ohne oder ungültig nur Mails mit dem Vermerk „ungeprüft“).

• Produces: initProjektWiderruf(form) → void in public/auftrag-widerruf.js (Selbststart, wenn document existiert und #decl-form und #ab-nummer-wrap vorhanden sind). Markup: Radioknopf order=projekt, #ab-nummer-wrap mit dem freiwilligen Feld #abNummer (Hinweis „falls zur Hand“; Entscheidung der Planrunde: nicht Pflicht, das Muster AB-JJJJ-NNNN wird nur geprüft, wenn etwas eingegeben ist).

• Step 1: Failing Test schreiben

In test/publicForms.test.js im Test widerrufen_html_radio die Zeile assert.match(src, /fields: \['order', 'name', 'customerNumber', 'email'\]/) ersetzen durch assert.match(src, /fields: \['order', 'abNummer', 'name', 'customerNumber', 'email'\]/). Sonst nichts an dieser Datei.

test/auftraegeKundenportalWiderruf.test.js:

import { test } from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { installFakeDom } from './support/fakeDom.js'
import { h } from '../public/auftrag-dom.js'
import { initProjektWiderruf } from '../public/auftrag-widerruf.js'
import { pruefeQuelltext } from './auftraegeKundenportalDaten.js'

const html = readFileSync(new URL('../public/widerrufen.html', import.meta.url), 'utf8')
const MELDUNG = 'Die Nummer sieht anders aus als AB-2026-0001. Bitte prüfen Sie die Nummer oder lassen Sie das Feld leer.'

test('widerrufen.html: Vertragsart „Projektauftrag“ hinter „Öffnungszeiten live“, freiwilliges Feld abNummer vor dem Namen, Skripte', () => {
  assert.match(html, /name="order" value="zeiten"[^>]*> Öffnungszeiten live<\/label>\s*<label class="radio"><input type="radio" name="order" value="projekt" data-text="Projektauftrag \(Auftragsbestätigung\)"> Projektauftrag \(Auftragsbestätigung\)<\/label>\s*<\/fieldset>/)
  assert.match(html, /<div id="ab-nummer-wrap">\s*<label for="abNummer" data-label-for="abNummer" data-label="Nummer der Auftragsbestätigung">Nummer der Auftragsbestätigung <small>\(falls zur Hand, zum Beispiel AB-2026-0001\)<\/small><\/label>\s*<input id="abNummer" name="abNummer" maxlength="20" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="AB-2026-0001">\s*<\/div>/)
  assert.doesNotMatch(html, /<input id="abNummer"[^>]*required/, 'die Nummer ist freiwillig')
  assert.ok(html.indexOf('id="ab-nummer-wrap"') < html.indexOf('for="name"'), 'das Feld steht vor dem Namen')
  assert.doesNotMatch(html, /id="ab-nummer-wrap"[^>]*hidden/, 'ohne das Skript bleibt das Feld sichtbar')
  assert.match(html, /initLegalForm\(\{ endpoint: '\/api\/abo\/public\/withdraw', fields: \['order', 'abNummer', 'name', 'customerNumber', 'email'\] \}\)/)
  assert.match(html, /<script type="module" src="\/auftrag-widerruf\.js"><\/script>/)
  for (const wert of ['abschluss', 'wechsel', 'zusatzspeicher', 'funktion', 'termine', 'shop', 'zeiten']) assert.match(html, new RegExp(`name="order" value="${wert}"`), `${wert} bleibt`)
})

const mit = (fn) => async () => {
  const fx = installFakeDom()
  try {
    await fn(fx)
  } finally {
    fx.restore()
  }
}
function aufbau(fx, order = 'abschluss') {
  const radios = ['abschluss', 'projekt'].map((wert) => h('input', { type: 'radio', name: 'order', value: wert, checked: wert === order }))
  const nummer = h('input', { id: 'abNummer', name: 'abNummer' })
  const wrap = h('div', { id: 'ab-nummer-wrap' }, h('label', { for: 'abNummer' }, 'Nummer'), nummer)
  const fehler = h('p', { id: 'form-error', class: 'error hidden' })
  const knopf = h('button', { type: 'submit' }, 'Widerruf bestätigen')
  const form = h('form', { id: 'decl-form' }, h('fieldset', {}, ...radios.map((r) => h('label', { class: 'radio' }, r))), wrap, fehler, knopf)
  fx.document.body.append(form)
  const gesendet = []
  form.addEventListener('submit', (ev) => {
    ev.preventDefault()
    gesendet.push(nummer.value)
  })
  initProjektWiderruf(form)
  return { form, radios, nummer, wrap, fehler, knopf, gesendet }
}

test('Das Feld erscheint nur bei „Projektauftrag“ und wird beim Wegwählen geleert', mit(async (fx) => {
  const t = aufbau(fx, 'abschluss')
  assert.equal(t.wrap.classList.contains('hidden'), true)
  await fx.klick(t.radios[1])
  assert.equal(t.wrap.classList.contains('hidden'), false)
  await fx.setze(t.nummer, 'AB-2026-0001')
  await fx.klick(t.radios[0])
  assert.equal(t.wrap.classList.contains('hidden'), true)
  assert.equal(t.nummer.value, '')
}))

test('Ist „Projektauftrag“ schon gewählt, ist das Feld sofort da', mit(async (fx) => {
  const t = aufbau(fx, 'projekt')
  assert.equal(t.wrap.classList.contains('hidden'), false)
}))

test('Projektauftrag: eine eingegebene, aber unpassende Nummer wird gemeldet und stoppt das Absenden; Wechsel der Vertragsart nimmt die Meldung weg', mit(async (fx) => {
  const t = aufbau(fx, 'projekt')
  for (const eingabe of ['AB-2026-01', 'RE-2026-0001', 'irgendwas']) {
    await fx.setze(t.nummer, eingabe)
    await fx.klick(t.knopf)
    assert.deepEqual(t.gesendet, [], eingabe)
    assert.equal(t.fehler.classList.contains('hidden'), false)
    assert.equal(t.fehler.textContent, MELDUNG)
    assert.equal(t.nummer.value, eingabe)
  }
  assert.equal(fx.document.activeElement, t.nummer)
  await fx.klick(t.radios[0])
  assert.equal(t.fehler.classList.contains('hidden'), true)
}))

test('Ohne Nummer geht der Projektauftrag durch (freiwilliges Feld); die eigene Meldung verschwindet, sobald der Widerruf durchgeht', mit(async (fx) => {
  const t = aufbau(fx, 'projekt')
  await fx.klick(t.knopf)
  assert.deepEqual(t.gesendet, [''])
  assert.equal(t.fehler.classList.contains('hidden'), true)
  await fx.setze(t.nummer, 'kaputt')
  await fx.klick(t.knopf)
  assert.deepEqual(t.gesendet, [''], 'unpassende Eingabe: nichts gesendet')
  assert.equal(t.fehler.classList.contains('hidden'), false)
  await fx.setze(t.nummer, '   ')
  await fx.klick(t.knopf)
  assert.deepEqual(t.gesendet, ['', ''], 'nur Leerzeichen zählen als leer')
  assert.equal(t.fehler.classList.contains('hidden'), true)
}))

test('Gültige Nummer in anderer Schreibweise wird vereinheitlicht, dann geht der Widerruf durch', mit(async (fx) => {
  const t = aufbau(fx, 'projekt')
  await fx.setze(t.nummer, ' ab 2026 0001 ')
  await fx.klick(t.knopf)
  assert.deepEqual(t.gesendet, ['AB-2026-0001'])
  assert.equal(t.fehler.classList.contains('hidden'), true)
}))

test('Andere Vertragsart: kein Zwang, das Feld wird leer gesendet', mit(async (fx) => {
  const t = aufbau(fx, 'abschluss')
  await fx.klick(t.knopf)
  assert.deepEqual(t.gesendet, [''])
}))

test('Quelltext: nur ./auftrag-ansicht.js, kein fetch', () => {
  pruefeQuelltext('auftrag-widerruf.js', { importe: ['./auftrag-ansicht.js'] })
})

• Step 2: Lauf, erwartet FAIL

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test --test-concurrency=1 test/auftraegeKundenportalWiderruf.test.js test/publicForms.test.js

Erwartet: FAIL (Modul fehlt; publicForms erwartet das neue fields).

• Step 3: Implementieren

public/widerrufen.html:

• Hinter dem Radioknopf zeiten (vor </fieldset>): <label class="radio"><input type="radio" name="order" value="projekt" data-text="Projektauftrag (Auftragsbestätigung)"> Projektauftrag (Auftragsbestätigung)</label>
• Hinter </fieldset> und vor dem Namensfeld:

    <!-- Nur bei „Projektauftrag“ und freiwillig (auftrag-widerruf.js blendet das Feld sonst aus und leert es); ohne das Skript bleibt es sichtbar -->
    <div id="ab-nummer-wrap">
      <label for="abNummer" data-label-for="abNummer" data-label="Nummer der Auftragsbestätigung">Nummer der Auftragsbestätigung <small>(falls zur Hand, zum Beispiel AB-2026-0001)</small></label>
      <input id="abNummer" name="abNummer" maxlength="20" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="AB-2026-0001">
    </div>

• Den Aufruf ändern in initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['order', 'abNummer', 'name', 'customerNumber', 'email'] }) und danach die Zeile <script type="module" src="/auftrag-widerruf.js"></script> einfügen (das klassische Skript legal-form.js und der Aufruf bleiben unverändert und laufen zuerst; fällt das Modul aus, funktioniert der Widerruf wie bisher).

public/auftrag-widerruf.js (ES-Modul, Kopf-Kommentar: Rechtsfunktion, darf nie die anderen Vertragsarten stören): initProjektWiderruf(form):

• Hilfen: gewaehlt() = form.querySelector('[name="order"]:checked')?.value; wrap = form.querySelector('#ab-nummer-wrap'), feld = form.querySelector('#abNummer'), fehler = form.querySelector('#form-error'); fehlt eines davon, nichts tun.

• zeige(): wrap.classList.toggle('hidden', gewaehlt() !== 'projekt'); beim Verbergen feld.value = '', und eine von diesem Modul gesetzte Meldung entfernen (fehler wieder hidden, Merker zurücksetzen). Sofort einmal aufrufen; Listener change auf dem Formular (steigt von den Radioknöpfen auf).

• Listener click auf dem Formular (steigt vom Knopf auf, läuft vor dem Absenden, unabhängig von der Reihenfolge der submit-Listener): trifft ev.target.closest('button[type="submit"], input[type="submit"]') und ist gewaehlt() === 'projekt': eingabe = feld.value.trim(). Ist sie leer (die Nummer ist freiwillig): feld.value = '', eine eigene Meldung ausblenden, nichts verhindern. Sonst nummer = abNummerNormalisiert(eingabe); ist sie leer (unpassend) → ev.preventDefault(), fehler.textContent = texte().abNummerUngueltig, fehler.classList.remove('hidden'), Merker setzen, feld.focus(); ist sie gültig → feld.value = nummer (der Eintrag von initLegalForm liest danach den vereinheitlichten Wert) und eine eigene Meldung ausblenden.

• Selbststart am Dateiende: if (typeof document !== 'undefined') und Formular und Wrap vorhanden → initProjektWiderruf(document.getElementById('decl-form')).

• Step 4: Lauf, erwartet PASS

Derselbe Befehl wie in Step 2. Erwartet: fail 0.

• Step 5: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add public/widerrufen.html public/auftrag-widerruf.js test/publicForms.test.js test/auftraegeKundenportalWiderruf.test.js && git commit -m "Widerrufsseite: Vertragsart Projektauftrag mit freiwilliger Nummer der Auftragsbestätigung

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

---

Task 10: Oberflächenprüfung mit Playwright und Bildschirmfotos

Dieser Task prüft die fertige Oberfläche im echten Browser: Modul-Laden, Ereignisse, Layout bei 390 und 1440 px, Tippflächen, hell und dunkel, den Ablauf auf der Widerrufsseite mit dem echten legal-form.js. Die Logik haben die fakeDom-Tests der Tasks 3 bis 9 schon festgehalten. Das Skript ist neu; ein Fehlschlag ist ein Fehler aus Task 3 bis 9 und wird dort behoben (mit Test), nicht im Skript versteckt.

Files:

• Create: test/ui/auftraege-kundenportal.ui.mjs (nicht Teil von npm test, Muster test/ui/kundenansicht.ui.mjs)

Interfaces:

• Consumes: alle Seiten aus Task 5 bis 9, test/auftraegeKundenportalDaten.js (TOKEN, ab, privat, bestaetigt, eintrag); Chromium (playwright-core unter /root/.npm/_npx/db89d7302a373f10/node_modules/playwright-core, Fallback /root/.cache/ms-playwright/chromium-1234/chrome-linux64/chrome).

• Produces: 21 Bildschirmfotos in $SHOTS (Standard /tmp/claude-0/-root/dc97e1da-8b3d-40c0-9943-f8c37f910877/scratchpad/auftraege-l6/) als <Name>-<handy|desktop>.png (handy = 390 px, desktop = 1440 px) für die Namen auftrag-offen-unternehmen, auftrag-offen-privat, auftrag-aufwand, auftrag-bestaetigt-privat, auftrag-ungueltig, auftrag-beendet, auftrag-fehler, portal-auftraege, portal-auftraege-ansichtsmodus, widerrufen-projekt (20 Bilder) und auftrag-offen-privat-dunkel-handy.png; Exit-Code 1, wenn eine Prüfung scheitert.

• Step 1: Skript schreiben

test/ui/auftraege-kundenportal.ui.mjs:

// Playwright-Prüfung der Kundenseiten zu Aufträgen (Strang L6): auftrag.html, Abschnitt „Aufträge“ im Dashboard, widerrufen.html.
// Statischer Server für public/ + page.route-Nachbau der /api-Antworten; nichts verlässt den Rechner. Nicht Teil von npm test.
// Aufruf: free -m; flock /tmp/claude-0/-root/dc97e1da-8b3d-40c0-9943-f8c37f910877/scratchpad/auftraege-schwer.lock nice node test/ui/auftraege-kundenportal.ui.mjs
// Bildschirmfotos: $SHOTS (Standard: Scratchpad auftraege-l6/). Exit-Code 1, wenn eine Prüfung scheitert.
import http from 'node:http'
import { readFile, mkdir } from 'node:fs/promises'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { chromium } from '/root/.npm/_npx/db89d7302a373f10/node_modules/playwright-core/index.mjs'
import { TOKEN, ab, privat, bestaetigt, eintrag } from '../auftraegeKundenportalDaten.js'

const pub = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../public')
const SHOTS = process.env.SHOTS || '/tmp/claude-0/-root/dc97e1da-8b3d-40c0-9943-f8c37f910877/scratchpad/auftraege-l6'
await mkdir(SHOTS, { recursive: true })
const TYPES = { '.html': 'text/html; charset=utf-8', '.js': 'text/javascript; charset=utf-8', '.css': 'text/css; charset=utf-8', '.svg': 'image/svg+xml', '.png': 'image/png', '.ico': 'image/x-icon', '.webmanifest': 'application/manifest+json', '.woff2': 'font/woff2' }

const server = http.createServer(async (req, res) => {
  try {
    const datei = path.join(pub, new URL(req.url, 'http://x').pathname)
    if (!datei.startsWith(pub + path.sep)) throw new Error('außerhalb von public/')
    res.writeHead(200, { 'content-type': TYPES[path.extname(datei)] || 'application/octet-stream' })
    res.end(await readFile(datei))
  } catch {
    res.writeHead(404)
    res.end('nicht gefunden')
  }
})
await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve))
const base = `http://127.0.0.1:${server.address().port}`

let failed = 0
const check = (name, ok, detail = '') => {
  console.log(`${ok ? 'OK  ' : 'FAIL'} ${name}${detail ? ` (${detail})` : ''}`)
  if (!ok) failed += 1
}
const norm = (text) => String(text).replace(/\s+/g, ' ').trim() // auch das geschützte Leerzeichen vor „€“
const laufe = async (name, fn) => {
  try {
    await fn()
  } catch (err) {
    check(name, false, String(err.message).split('\n')[0])
  }
}

let aufrufe = [] // alle /api-Anfragen der laufenden Prüfung
async function mocke(page, handler) {
  aufrufe = []
  await page.unroute('**/api/**')
  await page.route('**/api/**', async (route) => {
    const req = route.request()
    const roh = req.postData()
    aufrufe.push({ pfad: new URL(req.url()).pathname, methode: req.method(), body: roh ? JSON.parse(roh) : undefined })
    const antwort = await handler(aufrufe.at(-1))
    if (antwort === 'abbrechen') return route.abort()
    const { status = 200, body = {} } = antwort || {}
    return route.fulfill({ status, contentType: 'application/json', body: JSON.stringify(body) })
  })
}

const GET_AB = `/api/auftrag/${TOKEN}`
const POST_AB = `/api/auftrag/${TOKEN}/bestaetigen`
const KUNDE = { id: 'c1', code: '1001', name: 'Berta Berg', email: 'b@example.test' }
const RECHNUNGEN = [
  { id: 'in_1', source: 'stripe', number: 'WEBKLAR-0009', date: '2026-10-06', dueDate: '2026-10-20', amount: 500, balance: 500, status: 'Offen', paid: false, cancelled: false, overdue: false, portalUrl: 'https://invoice.stripe.test/i/in_1', hasPdf: true, projekt: 'Website Anelia Wolf' },
  { id: 'in_2', source: 'stripe', number: 'H96T-0004', date: '2026-10-01', dueDate: '', amount: 25, balance: 0, status: 'Bezahlt', paid: true, cancelled: false, overdue: false, portalUrl: '', hasPdf: true, projekt: '' },
]
const AUFTRAEGE = [
  eintrag({ id: 'ab3', nummer: 'AB-2026-0003' }),
  eintrag({ id: 'ab2', ...bestaetigt(privat()), nummer: 'AB-2026-0002', titel: 'Logo und Visitenkarten', kannBestaetigen: false }),
  eintrag({ id: 'ab1', nummer: 'AB-2026-0001', titel: 'Wartung Oktober', status: 'storniert', kannBestaetigen: false, art: 'aufwand', positionen: [], summeCents: null, aufwandText: '100,00 € pro Stunde in Schritten von 15 Minuten.' }),
]
const dashboardApi = (me) => ({ pfad, methode }) => {
  if (pfad === '/api/auth/me') return { body: me }
  if (pfad === '/api/invoices') return { body: { invoices: RECHNUNGEN, incomplete: false } }
  // wie L5: in der Kundenansicht ist kannBestaetigen immer false
  if (pfad === '/api/auftraege') return { body: { aktiv: true, auftraege: AUFTRAEGE.map((a) => (me.viewAs ? { ...a, kannBestaetigen: false } : a)) } }
  if (methode === 'POST' && pfad === '/api/auftraege/ab3/bestaetigen') return { body: { auftrag: bestaetigt(ab({ nummer: 'AB-2026-0003' })) } }
  if (pfad === '/api/projects') return { body: { projects: [] } }
  if (pfad === '/api/features') return { body: { features: [] } }
  if (pfad === '/api/activity') return { body: { tickets: [] } }
  if (pfad === '/api/contact') return { body: { name: 'WEBklar-Team', responseTime: 'Antwort meist < 1 Werktag' } }
  if (pfad === '/api/chat/unread-count') return { body: { unread: 0 } }
  if (pfad === '/api/chat/messages') return { body: { messages: [], unread: 0 } }
  return { body: {} }
}
const postBody = () => JSON.stringify(aufrufe.filter((a) => a.methode === 'POST').at(-1)?.body)

const browser = await chromium.launch().catch(() => chromium.launch({ executablePath: '/root/.cache/ms-playwright/chromium-1234/chrome-linux64/chrome' }))
try {
  for (const [label, viewport, mobil] of [['handy', { width: 390, height: 844 }, true], ['desktop', { width: 1440, height: 900 }, false]]) {
    const ctx = await browser.newContext({ viewport, deviceScaleFactor: mobil ? 2 : 1, isMobile: mobil, hasTouch: mobil, locale: 'de-DE', timezoneId: 'Europe/Berlin' })
    const page = await ctx.newPage()
    page.setDefaultTimeout(30000)
    const jsFehler = []
    page.on('pageerror', (e) => jsFehler.push(e.message))
    const foto = (name) => page.screenshot({ path: `${SHOTS}/${name}-${label}.png`, fullPage: true })
    const zustand = (z) => page.waitForSelector(`#ab-wurzel[data-zustand="${z}"]`)
    const ohneUeberlauf = (selektor) => page.evaluate((s) => { const el = document.querySelector(s); return el.scrollWidth <= el.clientWidth + 1 }, selektor)
    const oeffne = async (pfad, handler) => {
      await mocke(page, handler)
      await page.goto('about:blank') // frisch laden, auch wenn sich nur das Fragment unterscheidet
      await page.goto(`${base}${pfad}`)
    }
    const oeffneAuftrag = (handler, adresse = `#t=${TOKEN}`) => oeffne(`/auftrag.html${adresse}`, handler) // K31 verlinkt #t=
    const alsAb = (a, neu) => ({ pfad, methode }) => {
      if (methode === 'GET' && pfad === GET_AB) return { body: { auftrag: a } }
      if (methode === 'POST' && pfad === POST_AB) return { body: { auftrag: neu } }
    }

    await laufe(`${label} unternehmen`, async () => {
      await oeffneAuftrag(alsAb(ab(), bestaetigt(ab())))
      await zustand('offen')
      check(`${label} offen_titel`, norm(await page.textContent('h1')) === 'Auftragsbestätigung AB-2026-0002')
      check(`${label} formular_sie_form`, norm(await page.textContent('legend')) === 'Ihre Bestätigung')
      check(`${label} paragraf_19_aus_der_api`, norm(await page.textContent('[data-hinweis]')) === 'Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.')
      check(`${label} offen_positionen_und_summe`, (await page.locator('[data-position]').count()) === 2 && norm(await page.innerText('[data-gesamt]')) === 'Gesamtpreis 800,00 €')
      check(`${label} offen_links`, (await page.getAttribute('[data-link="pdf"]', 'href')) === `/api/auftrag/${TOKEN}/pdf` && (await page.getAttribute('[data-link="agb"]', 'href')) === '/rechtliches/agb-2026-09-30.pdf')
      check(`${label} offen_kein_zweites_haekchen`, (await page.locator('[data-feld="fruehbeginn"]').count()) === 0)
      check(`${label} fusszeile`, (await page.locator('footer a').allInnerTexts()).join('|') === 'Datenschutz|Impressum')
      check(`${label} kein_seitlicher_ueberlauf`, await ohneUeberlauf('html'))
      const knopf = page.locator('[data-aktion="bestaetigen"]')
      check(`${label} knopf_gesperrt_ohne_haken_und_gross_genug`, (await knopf.isDisabled()) && (await knopf.boundingBox()).height >= 44)
      await foto('auftrag-offen-unternehmen')
      await page.check('[data-feld="bestaetigung"]')
      check(`${label} knopf_frei_mit_haken`, await knopf.isEnabled())
      await knopf.click()
      await zustand('bestaetigt')
      check(`${label} post_koerper`, postBody() === JSON.stringify({ bestaetigt: true, fruehbeginn: false }))
      check(`${label} bestaetigt_zeit`, norm(await page.innerText('[data-bestaetigt]')) === 'Bestätigt am 07.10.2026, 10:15 Uhr')
      check(`${label} token_nicht_im_text`, !(await page.innerText('body')).includes(TOKEN))
    })

    await laufe(`${label} rueckfall`, async () => {
      await oeffneAuftrag(alsAb(ab()), `?t=${TOKEN}`)
      await zustand('offen')
      check(`${label} rueckfall_t_in_der_suche`, aufrufe.some((a) => a.methode === 'GET' && a.pfad === GET_AB))
    })

    await laufe(`${label} privat`, async () => {
      await oeffneAuftrag(alsAb(privat(), bestaetigt(privat())))
      await zustand('offen')
      const frueh = page.locator('[data-feld="fruehbeginn"]')
      check(`${label} privat_zweites_haekchen_frei_waehlbar`, (await frueh.isVisible()) && !(await frueh.isChecked()))
      check(`${label} privat_kein_seitlicher_ueberlauf`, await ohneUeberlauf('html'))
      await foto('auftrag-offen-privat')
      await page.check('[data-feld="bestaetigung"]')
      await page.click('[data-aktion="bestaetigen"]')
      await zustand('bestaetigt')
      check(`${label} privat_ohne_fruehbeginn`, postBody() === JSON.stringify({ bestaetigt: true, fruehbeginn: false }))
      check(`${label} privat_fruehester_beginn`, norm(await page.innerText('[data-bestaetigt]')) === 'Bestätigt am 07.10.2026, 10:15 Uhr Wir beginnen frühestens am 21.10.2026.')
      await foto('auftrag-bestaetigt-privat')
    })

    await laufe(`${label} aufwand`, async () => {
      await oeffneAuftrag(alsAb(ab({ art: 'aufwand', positionen: [], summeCents: null, aufwandText: '100,00 € pro Stunde in Schritten von 15 Minuten. Geschätzter Umfang: etwa 10 Stunden (unverbindlich).', zahlungsplanText: 'Monatlich nach Aufwand.' })))
      await zustand('offen')
      check(`${label} aufwand_text_statt_tabelle`, (await page.locator('[data-aufwand]').count()) === 1 && (await page.locator('table').count()) === 0)
      await foto('auftrag-aufwand')
    })

    await laufe(`${label} fehlerzustaende`, async () => {
      await oeffneAuftrag(() => ({ status: 404, body: { error: 'Dieser Link ist ungültig oder abgelaufen.' } }))
      await zustand('ungueltig')
      check(`${label} ungueltig_kontaktweg`, (await page.locator('a[href="mailto:support@webklar.com"]').count()) === 1)
      await foto('auftrag-ungueltig')
      await oeffneAuftrag(() => ({ status: 410, body: { error: 'Diese Auftragsbestätigung wurde ersetzt.' } }))
      await zustand('beendet')
      check(`${label} beendet_titel`, norm(await page.textContent('h1')) === 'Diese Auftragsbestätigung wurde ersetzt.')
      await foto('auftrag-beendet')
      await oeffneAuftrag(() => ({ status: 429, body: {} }))
      await zustand('limit')
      let versuche = 0
      await oeffneAuftrag(({ pfad }) => {
        if (pfad !== GET_AB) return undefined
        versuche += 1
        return versuche === 1 ? { status: 500, body: { error: 'Interner Fehler.' } } : { body: { auftrag: ab() } }
      })
      await zustand('fehler')
      await foto('auftrag-fehler')
      await page.click('[data-aktion="erneut"]')
      await zustand('offen')
      await oeffneAuftrag(() => 'abbrechen')
      await zustand('fehler')
      check(`${label} netzfehler_ohne_browsertext`, !/Failed to fetch|NetworkError|fetch failed/i.test(await page.innerText('body')))
      await oeffne('/auftrag.html', () => ({}))
      await zustand('ungueltig')
      check(`${label} ohne_token_keine_anfrage`, aufrufe.length === 0)
    })

    await laufe(`${label} portal`, async () => {
      await oeffne('/dashboard.html#rechnungen', dashboardApi({ authenticated: true, customer: KUNDE }))
      await page.waitForSelector('#orders-section:not(.hidden) .ab-karte')
      check(`${label} portal_reihenfolge`, JSON.stringify(await page.$$eval('.ab-karte', (k) => k.map((x) => x.getAttribute('data-auftrag')))) === JSON.stringify(['ab3', 'ab2', 'ab1']))
      check(`${label} portal_du_form`, norm(await page.textContent('#orders-section > p')) === 'Deine Auftragsbestätigungen. Offene Aufträge bestätigst du hier mit einem Klick.' && norm(await page.textContent('.ab-karte[data-auftrag="ab3"] legend')) === 'Deine Bestätigung')
      check(`${label} portal_projekt_unter_rechnungsnummer`, norm(await page.textContent('.inv-no .inv-project')) === 'Website Anelia Wolf')
      check(`${label} portal_offene_ab_aufgeklappt`, (await page.locator('.ab-karte[data-auftrag="ab3"] details').getAttribute('open')) !== null)
      check(`${label} portal_kein_seitlicher_ueberlauf`, await ohneUeberlauf('#orders-section'))
      await foto('portal-auftraege')
      await page.check('.ab-karte[data-auftrag="ab3"] [data-feld="bestaetigung"]')
      await page.click('.ab-karte[data-auftrag="ab3"] [data-aktion="bestaetigen"]')
      await page.waitForSelector('.ab-karte[data-auftrag="ab3"] [data-bestaetigt]')
      check(`${label} portal_post_und_status`, aufrufe.some((a) => a.methode === 'POST' && a.pfad === '/api/auftraege/ab3/bestaetigen') && postBody() === JSON.stringify({ bestaetigt: true, fruehbeginn: false }) && norm(await page.textContent('.ab-karte[data-auftrag="ab3"] .ab-pille')) === 'Bestätigt')
    })

    await laufe(`${label} ansichtsmodus`, async () => {
      const me = { authenticated: true, role: 'admin', viewAs: true, viewId: 'a'.repeat(32), viewExpiresAt: Date.now() + 3_600_000, admin: { name: 'Andrej', email: 'andrej@webklar.com', isAdmin: false }, customer: KUNDE }
      await oeffne('/dashboard.html#rechnungen', dashboardApi(me))
      await page.waitForSelector('#orders-section:not(.hidden) .ab-karte')
      const karte = '.ab-karte[data-auftrag="ab3"]'
      check(`${label} ansicht_gesperrt`, (await page.locator(`${karte} [data-aktion="bestaetigen"]`).isDisabled()) && (await page.locator(`${karte} [data-feld="bestaetigung"]`).isDisabled()))
      check(`${label} ansicht_hinweis`, norm(await page.textContent(`${karte} [data-gesperrt]`)) === 'Im Ansichtsmodus kann der Auftrag nicht bestätigt werden. Die Bestätigung gibt der Kunde selbst ab.')
      await foto('portal-auftraege-ansichtsmodus')
    })

    await laufe(`${label} widerruf`, async () => {
      const api = ({ pfad, methode }) => {
        if (pfad === '/api/auth/me') return { body: { authenticated: false } }
        if (methode === 'POST' && pfad === '/api/abo/public/withdraw') return { body: { receivedAt: '2026-10-07T08:15:00.000Z' } }
      }
      const oeffneWiderruf = async () => {
        await oeffne('/widerrufen.html', api)
        await page.waitForFunction(() => document.getElementById('ab-nummer-wrap')?.classList.contains('hidden'))
      }
      const absenden = async (nummer) => {
        await page.check('input[name="order"][value="projekt"]')
        await page.fill('#name', 'Berta Berg')
        await page.fill('#email', 'b@example.test')
        if (nummer !== undefined) await page.fill('#abNummer', nummer)
        await page.click('button[type="submit"]')
      }
      await oeffneWiderruf()
      check(`${label} widerruf_feld_zuerst_versteckt`, !(await page.locator('#ab-nummer-wrap').isVisible()))
      await absenden('AB-2026-01')
      check(`${label} widerruf_feld_nur_bei_projektauftrag`, await page.locator('#ab-nummer-wrap').isVisible())
      check(`${label} widerruf_unpassende_nummer_gestoppt`, aufrufe.every((a) => a.methode !== 'POST') && norm(await page.textContent('#form-error')).startsWith('Die Nummer sieht anders aus'))
      await foto('widerrufen-projekt')
      await page.fill('#abNummer', 'ab 2026 0001')
      await page.click('button[type="submit"]')
      await page.waitForSelector('#done:not(.hidden)')
      const mitNummer = aufrufe.find((a) => a.methode === 'POST')?.body
      check(`${label} widerruf_nummer_vereinheitlicht`, mitNummer?.order === 'projekt' && mitNummer.abNummer === 'AB-2026-0001', JSON.stringify(mitNummer))
      check(`${label} widerruf_bestaetigung_nennt_nummer`, norm(await page.textContent('#done-list')).includes('Nummer der AuftragsbestätigungAB-2026-0001'))
      await oeffneWiderruf()
      await absenden() // ohne Nummer: freiwillig
      await page.waitForSelector('#done:not(.hidden)')
      const ohneNummer = aufrufe.filter((a) => a.methode === 'POST').at(-1)?.body
      check(`${label} widerruf_ohne_nummer_geht_durch`, ohneNummer?.order === 'projekt' && ohneNummer.abNummer === '', JSON.stringify(ohneNummer))
      await oeffneWiderruf()
      await page.fill('#name', 'Berta Berg')
      await page.fill('#email', 'b@example.test')
      await page.click('button[type="submit"]')
      await page.waitForSelector('#done:not(.hidden)')
      const andere = aufrufe.filter((a) => a.methode === 'POST').at(-1)?.body
      check(`${label} widerruf_andere_art_ohne_nummer`, andere?.order === 'abschluss' && andere.abNummer === '', JSON.stringify(andere))
    })

    check(`${label} keine_js_fehler`, jsFehler.length === 0, jsFehler.join(' | '))
    await ctx.close()
  }

  // Dunkler Modus (Systemeinstellung): die Seite folgt den dunklen Farben der Mailvorlagen
  const dunkel = await browser.newContext({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true, locale: 'de-DE', colorScheme: 'dark' })
  const seite = await dunkel.newPage()
  await laufe('dunkel', async () => {
    await mocke(seite, ({ pfad }) => (pfad === GET_AB ? { body: { auftrag: privat() } } : undefined))
    await seite.goto(`${base}/auftrag.html#t=${TOKEN}`)
    await seite.waitForSelector('#ab-wurzel[data-zustand="offen"]')
    check('dunkel hintergrund', (await seite.evaluate(() => getComputedStyle(document.body).backgroundColor)) === 'rgb(22, 22, 21)')
    await seite.screenshot({ path: `${SHOTS}/auftrag-offen-privat-dunkel-handy.png`, fullPage: true })
  })
  await dunkel.close()
} finally {
  await browser.close()
  server.close()
}
console.log(failed ? `${failed} Check(s) fehlgeschlagen` : 'alle Checks ok')
process.exit(failed ? 1 : 0)

• Step 2: Lauf

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && free -m | head -2 && flock /tmp/claude-0/-root/dc97e1da-8b3d-40c0-9943-f8c37f910877/scratchpad/auftraege-schwer.lock timeout 900 nice -n 10 node --max-old-space-size=1024 test/ui/auftraege-kundenportal.ui.mjs

Erwartet: alle Zeilen OK, letzte Zeile alle Checks ok, Exit-Code 0; danach ls /tmp/claude-0/-root/dc97e1da-8b3d-40c0-9943-f8c37f910877/scratchpad/auftraege-l6/*.png | wc -l ergibt 21. Beim ersten Lauf sind Fehlschläge möglich: Ursache im betroffenen Modul (Task 3 bis 9) beheben, den fehlenden Fall dort mit einem Test festhalten, dann Lauf wiederholen. Unter 1500 MB „available“: warten.

• Step 3: Bildschirmfotos ansehen

Alle 21 Bilder mit dem Lese-Werkzeug öffnen und prüfen: nichts abgeschnitten oder übereinander, Kontrast lesbar (hell und dunkel), Knöpfe auf dem Handy volle Breite, Tabelle auf dem Handy gestapelt, Pillen und Kartenkopf ohne Überlauf, Projektname unter der Rechnungsnummer (Desktop-Tabelle und Handy-Karte), Fußzeile sichtbar. Sichtbare Mängel in public/auftrag.css beheben (nur Regeln, die Task 6, 7 und 8 beschreiben; kein neues Verhalten), Lauf aus Step 2 wiederholen und dazu test/auftraegeKundenportalHuelle.test.js, test/auftraegeKundenportalPortal.test.js und test/auftraegeKundenportalDashboard.test.js (CSS-Tests).

• Step 4: Commit

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && git add test/ui/auftraege-kundenportal.ui.mjs public/auftrag.css && git commit -m "Kundenportal Aufträge: Playwright-Prüfung mit Bildschirmfotos (Handy 390 px, Desktop 1440 px, dunkel)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"

(public/auftrag.css nur mit angeben, wenn Step 3 sie geändert hat; sonst nur das Skript.)

---

Task 11: Selbstprüfung

Files: keine neuen; Korrekturen nur in den Dateien dieses Strangs.

Interfaces:

• Consumes: alle Tasks.

• Produces: Bericht an den Auftraggeber (Zeile je Punkt unten) und die Bildschirmfotos in /tmp/claude-0/-root/dc97e1da-8b3d-40c0-9943-f8c37f910877/scratchpad/auftraege-l6/ für Strang Z.

• Step 1: Eigene Tests

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test --test-concurrency=1 test/auftraegeKundenportal*.test.js 2>&1 | tail -12

Erwartet: fail 0 (acht Testdateien: Rechnungen, Ansicht, Dom, Seite, Huelle, Portal, Dashboard, Widerruf).

• Step 2: Berührte bestehende Tests (dieselbe Liste wie in Task 1)

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && free -m | head -2 && timeout 900 nice -n 10 node --max-old-space-size=1024 --test --test-concurrency=1 test/customerInvoices.test.js test/publicForms.test.js test/shopWiring.test.js test/termineView.test.js test/zeitenBestellen.test.js test/analyseView.test.js test/funktionenRoutes.test.js test/termineFragebogenView.test.js 2>&1 | tail -12

Erwartet: fail 0 (oder genau die in Task 1 notierten, schon vorher roten Tests).

• Step 3: Oberflächenprüfung und Bildschirmfotos (Befehl aus Task 10, Step 2)

Erwartet: alle Checks ok, 21 PNGs im Scratchpad-Ordner auftraege-l6/.

• Step 4: Nur eigene Dateien geändert, Arbeitsbaum sauber

cd /home/webklar/apps/kundenbereich.webklar.com/dev-auftraege-l6 && diff <(git diff --name-only feature/auftraege...HEAD | LC_ALL=C sort) <(LC_ALL=C sort <<'EOF'
public/app.js
public/auftrag-ansicht.js
public/auftrag-dom.js
public/auftrag-portal.js
public/auftrag-widerruf.js
public/auftrag.css
public/auftrag.html
public/auftrag.js
public/dashboard.html
public/widerrufen.html
server/services/customerInvoices.js
test/auftraegeKundenportalAnsicht.test.js
test/auftraegeKundenportalDashboard.test.js
test/auftraegeKundenportalDaten.js
test/auftraegeKundenportalDom.test.js
test/auftraegeKundenportalHuelle.test.js
test/auftraegeKundenportalPortal.test.js
test/auftraegeKundenportalRechnungen.test.js
test/auftraegeKundenportalSeite.test.js
test/auftraegeKundenportalWiderruf.test.js
test/customerInvoices.test.js
test/publicForms.test.js
test/ui/auftraege-kundenportal.ui.mjs
EOF
) && echo "nur eigene Dateien" ; git status --short

Erwartet: nur eigene Dateien und git status --short zeigt höchstens ?? node_modules (der Symlink). Zusätzlich: git diff feature/auftraege...HEAD -- test/customerInvoices.test.js test/publicForms.test.js zeigt je genau eine geänderte Zeile.

• Step 5: Verträge abhaken (je Punkt Beleg im Bericht nennen)

• V3 AuftragOeffentlich gelesen wie definiert (nummer, datum, titel, art, positionen[…summeCents], summeCents, aufwandText, zahlungsplanText, startAm, fertigBis, kundenart, status, bestaetigtAm, fruehbeginn, fruehesterBeginn, agbUrl, texte.bestaetigung/fruehbeginn/kleinunternehmer; Portal zusätzlich id, kannBestaetigen): Fixture ab()/eintrag(), Test Zusammenfassung (Festpreis) ….

• V5 öffentlich: GET /api/auftrag/:token, POST …/bestaetigen mit { bestaetigt: true, fruehbeginn }, Links /api/auftrag/<token>/pdf und agbUrl: Test Laden und Anzeigen …, Bestätigen (Unternehmen) …; 404/410/429 und Netzfehler: Test Zustände ….

• V5 Kunde: GET /api/auftraege (aktiv, Liste), GET /api/auftraege/:id/pdf, POST /api/auftraege/:id/bestaetigen; Schalter aus → Abschnitt weg; Kundenansicht gesperrt: Tests in auftraegeKundenportalPortal.test.js.

• V5 Widerruf: order: 'projekt' und das freiwillige abNummer (Muster AB-JJJJ-NNNN, nur bei Eingabe geprüft): auftraegeKundenportalWiderruf.test.js, UI-Prüfungen widerruf_nummer_vereinheitlicht, widerruf_ohne_nummer_geht_durch, widerruf_andere_art_ohne_nummer.

• V4 L6: customerStripeInvoice(raw).projekt = raw.metadata?.projektName || '': auftraegeKundenportalRechnungen.test.js.

• V7 BESTAETIGUNG_TEXT als Rückfall, texte.fruehbeginn nur bei Privatperson: Test Bestätigen: fehlt der Text vom Server ….

• Globale Regeln: Anrede (Sie auf der öffentlichen Seite und der Widerrufsseite, Du im Portal; Tests Anrede … in auftraegeKundenportalAnsicht.test.js und auftraegeKundenportalDom.test.js), Cent/euroDe, Berliner Zeit, keine IP/Cookies/Browserspeicher, keine Fremdressourcen, kein verstecktes geschütztes Leerzeichen im Quelltext: pruefeQuelltext in allen Modulen, auftrag.html-Test keine Fremdressourcen.

• Step 6: Bericht

Dem Auftraggeber melden: Ergebnis von Step 1 bis 4 (Anzahl Tests, Ausgabe der Läufe), Pfad der Bildschirmfotos, Liste git log --oneline feature/auftraege..HEAD, die Vertragsfragen (alle entschieden, Abschnitt unten) und Hinweise für Z: (a) test/auftraegeKundenportalDaten.js wird auch von test/ui/auftraege-kundenportal.ui.mjs benutzt, (b) Z1 lässt test/ui/auftraege-kundenportal.ui.mjs nach dem Zusammenführen noch einmal laufen, (c) die Seitentexte stehen in public/auftrag-ansicht.js (TEXTE_GEMEINSAM, TEXTE_SIE, TEXTE_DU, zustandAusAntwort) und werden von L7 ins Freigabe-Dokument übernommen.

Kein weiterer Commit, außer Step 1 bis 4 haben eine Korrektur nötig gemacht (dann in der betroffenen Datei, mit Test, kleiner Commit).

---

Vertragsfragen

Alle Fragen dieses Strangs sind in der Übersicht entschieden (Abschnitt „Nachträge nach der Planrunde“ sowie Global Constraints, V3, V5, V6). Der Plan setzt die Entscheidungen um; offen ist nichts.

1. Zusätzliche Dateien und die Zuständigkeitsprüfung in Z – entschieden (siehe Übersicht, Nachträge). public/auftrag-ansicht.js, auftrag-dom.js, auftrag-portal.js, auftrag-widerruf.js, test/auftraegeKundenportalDaten.js, test/ui/auftraege-kundenportal.ui.mjs und je eine Zeile in test/customerInvoices.test.js und test/publicForms.test.js stehen in der Zuständigkeitstabelle. Die LANES in …-12-integration-kontrolle.md müssen dasselbe zulassen (/^public\/auftrag(-[a-z]+)?\.(html|js|css)$/, 'test/customerInvoices.test.js', 'test/publicForms.test.js', /^test\/auftraegeKundenportalDaten\.js$/, /^test\/ui\/auftraege-kundenportal\.ui\.mjs$/).
2. AB-Nummer auf der Widerrufsseite – entschieden (siehe Übersicht, Nachträge): freiwillig („falls zur Hand“); das Muster AB-JJJJ-NNNN wird nur geprüft, wenn etwas eingegeben ist. Umsetzung in Task 9 (auftrag-widerruf.js, TEXTE_SIE.abNummerUngueltig). L5 nimmt jede Eingabe an (ohne oder ungültig nur der Vermerk „ungeprüft“), der Widerruf bleibt formfrei; die Vertragsart steht für alle da (der Widerruf gilt unabhängig vom Schalter).
3. kannBestaetigen – entschieden (siehe V3): (status === 'versendet' || (status === 'abgerechnet' && !bestaetigtAm)) && nicht Kundenansicht; die POST-Antwort der Kundenroute trägt id und kannBestaetigen. Umsetzung in Task 7: in der Kundenansicht gilt die Bestätigbarkeit nach Status, damit der gesperrte Knopf mit Hinweis erscheint.
4. Kleinunternehmer-Satz – entschieden (siehe V3, Nachträge L0): auftrag.texte.kleinunternehmer von der API, keine eigene Konstante (Task 3, 4).
5. Token im Link – entschieden (siehe V6, Nachträge L5/L6): K31 verlinkt auftrag.html#t=<Token>; die Seite liest #t= und als Rückfall ?t= (Task 3, 5, 6).
6. Anrede im Portal – entschieden (siehe Global Constraints der Übersicht): Abschnitt „Aufträge“ im angemeldeten Portal in der Du-Form, öffentliche Seite und Widerrufsseite in der Sie-Form (Task 3, 4, 7, 8; texte('sie' | 'du')).
7. Bestätigen per Link durch das Team – entschieden (siehe V6): K31 geht ohne Team-BCC, die Teamkopie trägt den Link nicht.
8. Rechtlich gefärbte Sätze der Seiten – entschieden (siehe Übersicht, Nachträge L6): L7 sammelt sie im Freigabe-Dokument. Sie stehen in public/auftrag-ansicht.js (TEXTE_SIE, TEXTE_DU, zustandAusAntwort): „Wir beginnen frühestens am …“, „Wir beginnen auf Ihren/deinen Wunsch …“, „… wird mit Datum und Uhrzeit gespeichert.“, der Hinweis zum Widerrufsfeld und die Zustands- und Fehlertexte.