# Homepage topic cards: functional links + hover affordance

Use when a marketing/local-business homepage has topical cards that read like content but do not yet do anything, or when the user asks to make sections more functional/attractive.

## Pattern

1. Convert inert topic `article` cards into semantic links (`<a>`), preserving accessible names with `aria-label` when the visible heading is not enough.
2. Route each topic to the most useful existing destination, not merely to a generic page:
   - business/process/scope topic → project inquiry/contact flow if the next user intent is conversion
   - service-specific topic → matching service detail page
   - proof/example topic → relevant references/category page
3. Add a short visible CTA inside each card (`Projekt anfragen`, `Umbauten ansehen`, etc.) so users understand the click target before hovering.
4. Add a restrained hover/focus affordance:
   - small lift/box-shadow
   - brand-color top line expanding
   - CTA arrow moving slightly
   - optional one-shot sheen/radial highlight
5. Include `:focus-visible` behavior equivalent to hover; keep keyboard users first-class.
6. Respect reduced motion with `@media (prefers-reduced-motion: reduce)` disabling card/arrow/sheen animations.

## Verification

- Run the normal static build (`npm run build` for Astro repos) and confirm 0 errors.
- Check each new link returns HTTP 200 locally and after deployment.
- On the deployed URL, poll for a deterministic marker (e.g. class name plus one CTA text) before declaring Vercel live.
- Avoid over-animating trades/local-business sites; the interaction should signal quality and clickability, not feel like a SaaS/gaming landing page.