# Tool calculator UI parity (Ordio)

**Purpose:** Keep high-traffic payroll/social calculators visually and structurally aligned — reference implementation: **Kurzarbeitergeld-Rechner** (`kug-*` classes, [`v2/pages/tools_kurzarbeitergeld_rechner.php`](../../../v2/pages/tools_kurzarbeitergeld_rechner.php) + [`v2/includes/tools/kurzarbeitergeld-rechner/calculator-section.php`](../../../v2/includes/tools/kurzarbeitergeld-rechner/calculator-section.php)). **Krankengeld** uses the parallel **`kg-*`** prefix.

## Checklist (new or refactored tool)

1. **Form grid:** Primary inputs in a **two-column** grid on `md+` with **equal hint row height** (`*-hint-slot`, `*-brutto-row-label` + `min-height` on `md`).
2. **Native selects:** Shared styling (`*-select`) — chevron, focus ring, min-height 2.75rem.
3. **Steuerklasse:** Prefer **segmented radios** (I–VI) + `fieldset`/`legend`, not a lone `<select>`, when tax class is user-visible.
4. **Progressive disclosure:** Optional blocks behind a **button** with `aria-expanded`, `aria-controls`, and `x-show` / `role="region"` — not only `<details>` if you want KUG parity.
5. **Primary CTA:** Centered submit, `pt-3`, same Ordio blue pill pattern; preserve `data-event-type` / `data-event-name` for analytics.
6. **Form footnote:** Centered `text-xs` under the card for BBG/year/legal one-liner to reduce inline hint clutter.
7. **Results shell:** `*-results-shell` relative card, **absolute** export cluster top-right, inner `pt-12 sm:pt-0 pr-0 sm:pr-36` for title clearance.
8. **Hero KPIs:** Two large cards with **icon header**, subtitle, `tabular-nums` main value; primary = blue gradient; secondary = semantic (slate for “gap”, green for “positive total”, etc.).
9. **Optional bar:** Single explanatory progress bar with `role="img"` + descriptive `aria-label` if a ratio helps (e.g. coverage / replacement %).
10. **Intermediate numbers:** Either compact **summary tiles** (KUG) or a single **Rechenweg** list (Krankengeld) — avoid showing the same figures twice.
11. **Accordions:** “Deine Angaben” (`<dl>` grid), “So setzt sich das Ergebnis zusammen” (step list / panel); default **open on `lg+`** optional via `x-init` + `matchMedia`.
12. **Rechenweg:** White panel, `ul` rows, small icon boxes, final **footer** row for end result — match stroke colors via scoped `.*-rw-icon--*` rules if Heroicons clash with global CSS.
13. **Disclaimer strip:** Bottom `border-l-4 border-blue-400 bg-slate-50` (or equivalent) for legal/KV-PV pointers — avoid duplicating the same wall of text in multiple amber boxes.
14. **Motion:** Optional entrance animation on result blocks + **`prefers-reduced-motion: reduce`** disables animations/transitions on results.
15. **Mobile:** Tighter export button padding under 768px (match KUG/KG rules).
16. **JS:** After edits to `v2/js/<tool>/`, run **`npm run minify`**.
17. **Tests:** Run tool-specific `node v2/scripts/dev-helpers/test-*` if present.
18. **Gated exports (PDF/CSV):** If the tool offers downloads, align with **Kurzarbeitergeld** / **Krankengeld**: `exportFormat` + one modal, `collect-lead.php` + `signuptype`, jsPDF (`defer`) when PDF exists, dual buttons (PDF primary blue, CSV outline), `GTMFormTracker` per format, `getCalculationData()` complete for HubSpot `tool_data`.

## QA

- **Tools CSS bundle:** Do not rely on Tailwind **arbitrary** utilities (e.g. `bg-[#…]`, `from-[#…]`) for critical layout or contrast on tool pages: `tools-pages.min.css` is a curated bundle, not full JIT. Use **`v2/css/tools-pages.css`** and/or **scoped inline `<style>`** on the tool page for anything that must always render (gradients, step badges, Ablauf panels).
- **Keyboard:** Tab through toggle → panel → segments → submit; open/close `details`/`summary` with Enter/Space.
- **Responsive:** 375 / 768 / 1024 — no overlapping export button on title.
- **Regression:** PDF/CSV/email gate, GTM attributes, calculation output unchanged.

## Future (Phase B)

Extract duplicated **form + results** CSS from Krankengeld and Kurzarbeitergeld into a shared PHP partial (e.g. `v2/includes/tools/partials/tool-calculator-shared-styles.php`) included by both pages to reduce drift. Until then, **edit `kg-*` and `kug-*` blocks in sync** when changing shared patterns.