Rework Lead-Aufnahmebogen: collapsible sections, dynamic roofs, photo upload, filled-only PDF + send-to-office

[Solar-TechNick]

Summary

Full rework of the Lead-Aufnahmebogen — the single-file field intake form a consultant fills in on a phone/tablet at the customer's home (PV / battery / heat pump / wallbox). This is the frontend sub-project; the backend lead.php endpoint is a separate follow-up that implements the payload contract defined here.

Design spec: docs/superpowers/specs/2026-07-09-lead-aufnahmebogen-rework-design.md
Implementation plan: docs/superpowers/plans/2026-07-09-lead-aufnahmebogen-rework.md

What changed

The four requested features:

• Collapsible sections — each section is an accordion card with a filled/total completion badge.
• Dynamic roof surfaces — the fixed Dachfläche 1/2 blocks become an add/remove list (＋ Dachfläche hinzufügen).
• Photo/file upload — camera + gallery capture in Unterlagen/Fotos, stored in IndexedDB (blobs), client-side downscaled (~1600px JPEG) with thumbnails; localStorage keeps metadata only.
• Filled-only PDF — exports only fields that have values (empty sections omitted) and embeds the photos; Lead_<Nr>_<Nachname>_<Datum>.pdf.

The full rework on top:

• Mobile-first redesign — single-column, ≥44px touch targets, high-contrast (WCAG-AA verified), sticky action bar + section jumper.
• Form restructure — trade sections (PV/Speicher/WP/Wallbox) auto-expand when selected in Interesse/Gewerke, collapse otherwise (never hidden), plus an "Alle Abschnitte anzeigen" toggle.
• Code reorganization — killed the full-DOM-rebuild-on-every-keystroke pattern; now event delegation + targeted updates, no inline handlers, hardened esc() (escapes quotes too).
• Offline robustness — bundled DM Sans + html2pdf locally (no CDN), site-root service worker (app-scoped, network-first for the HTML so deploys propagate, cache-first for assets) + web manifest for home-screen install.
• Send to office — An Büro senden POSTs multipart/form-data to ${API_BASE}/lead.php with files[] + honeypot website (mirrors the existing angebot form; no CSRF), with payload.photos[i] aligned 1:1 to files[i], send-status, and offline retry. The mailto: button is removed.

Files

• Rewritten: Lead-Aufnahmebogen.html (single self-contained file).
• New: sw.js (site root), assets/lead/ (manifest, icon, vendored DM Sans woff2 + html2pdf).

Verification

• Automated (passing): node --check on sw.js and the inline script; no CDN refs; no mailto:; no inline handlers; WCAG-AA contrast on action buttons (ratios 7.02 / 4.72 / 7.91 / 5.28). Built subagent-per-task with a spec+quality review after each task and a final whole-branch review (no Critical findings).
• ⚠️ Pending — manual browser QA (there is no JS test framework by design): fill→reload restores draft · collapse/expand + badges · trade conditional sections · add/remove roofs · attach photos (camera+gallery) + reload restores from IndexedDB · PDF filled-only + photos · send offline→flagged+retry (success once the backend exists) · install to home screen + open offline.

Follow-ups (out of scope here)

• Backend lead.php endpoint (separate sub-project) implementing the §7 payload contract.
• Known minor edge cases logged: reset can dangle a saved lead's photo blobs; import can orphan the prior draft's blobs; dead .btn.unsent CSS; send-toast overlaps the save-toast.

🤖 Generated with Claude Code