# Process / Ablauf section UX for local-business websites

Use when a homepage or service page explains a customer journey, workflow, construction process, or project phases.

## Pattern

- Prefer a high-legibility card/grid layout over decorative dark overlays when the section carries important decision text.
- Make each phase a semantic link when it can lead to a useful next action: request form, contact page, services, references, FAQ, etc.
- Give every card a visible interaction affordance: short CTA label, arrow, hover/focus elevation, clear focus state.
- Keep the process copy practical and scannable: numbered step, short action label, 1 compact sentence, CTA.
- Use brand accents sparingly for structure (top bar, number, badge), not as a full-card background that can reduce contrast.
- Preserve reduced-motion handling for hover animations and scroll-reveal effects.

## Local trades / construction specifics

Good steps for a Baumeister/local construction process:

1. Anfrage — project briefly described, ideally photos/plans/address.
2. Besichtigung — inspect access, existing structure, levels/heights, dependencies.
3. Planung & Offerte — clarify material, stages, responsibilities, timing, costs.
4. Ausführung — calm site work, clear communication, orderly execution, especially in occupied buildings.
5. Übergabe — final check, close-out, result handed over cleanly.

## Verification

- Run the site build/check command.
- Verify generated HTML contains the section heading and anchor cards.
- If possible, screenshot the section at desktop and mobile widths to catch contrast/layout issues.