# webklar.com

Website of WEBklar GbR (a small web agency in Winnweiler, Rhineland-Palatinate). Vite + React 18 + TypeScript + Tailwind + shadcn/ui, client-rendered SPA with React Router.

**Current project: the relaunch.** Read `docs/superpowers/specs/2026-10-01-relaunch-design.md` before any change. The material for it (Germany map, customer portal screenshots) is in `docs/relaunch/`.

Status: the spec is waiting for the owner's approval. Once it is approved, write an implementation plan with the `superpowers:writing-plans` skill and save it to `docs/superpowers/plans/`. Implement only after that.

## Commands

```bash
npm install
npm run dev          # local dev server
npm test             # Vitest + Testing Library (must stay green)
npm run build        # production build into dist/
npm run lint         # ESLint (main already has old errors; add no new ones)
```

## How this repository relates to the live site

- This GitHub repository is the **workspace**. Its `main` is **not** live.
- webklar.com is built from a separate internal repository on the owner's server. Only the owner, or a session on that server, transfers an approved state there. Never try to deploy from here.

## Rules

- **Language:** everything user-facing is German, in the polite form **"Sie"**. Brand spelling is always **"WEBklar"**. Write commit messages, PR texts and notes for the owner in German.
- **The wording of the legal pages stays unchanged without the owner's explicit OK:** `src/pages/AGB.tsx`, `Impressum.tsx`, `WartungsAbo.tsx`, `HostingAbo.tsx`, and the privacy policy (the `/datenschutz` redirect to the customer portal).
  - For the new layout you may change their markup and CSS classes: remove their own header block, replace uppercase and old font/button classes.
  - Keep their wording, order and structure.
  - The tests in `src/test/abos.test.tsx`, `agb-haftung.test.tsx` and `agb-verguetung.test.tsx` protect them; never weaken or delete these three files.
  - `src/test/sofort-paket.test.tsx` may be adapted where it pins old copy or removed components. Keep its source-code scans against banned statements.
- **No invented content:**
  - no numbers without a source (no "99,9 %", no project counters);
  - no references without the customer's consent (AGB § 13);
  - no stock or AI images of people;
  - no promises of success (AGB § 2: no result is owed);
  - SEO only as a separately ordered service;
  - support after launch only through the subscriptions.
- **Fixed facts:**
  - Phone: only 0176 23726355 (`tel:+4917623726355`). E-mail: support@webklar.com.
  - Reply time: only "spätestens am nächsten Werktag".
  - Servers: Hetzner in Falkenstein/Vogtland, Saxony. This applies **only to the website and the customer portal**. Never write "all data in Germany".
  - Prices are final prices, small-business rule § 19 UStG, no VAT. Hosting-Abo 20 € per month, Wartungs-Abo 50 € per month, 12 months minimum term each. Extra work 100 € per hour in 15-minute steps, only after approval.
- **Customer portal screenshots** show only the invented demo customer "Bäckerei Sonnenschein". Never use real customer data.
- **Privacy:** no requests to third-party servers. Host fonts, images and scripts yourself; no Google Fonts, no CDNs, no tracking.
- **Secrets:** never commit them. `.env` stays local; `.env.example` holds only public client IDs.
- **This repository may be public.** Do not check in internal data: price calculations, customer names without consent, server details, logins.
- **Before every push:** run `npm test`, `npm run build`, and `npm run lint` (no new errors). For visual changes, put screenshots in the pull request: 1440 × 900 and 390 × 844, light and dark.
- **Work on branches and merge through pull requests.** The relaunch branch is `relaunch`.
- **Code style:**
  - Match the existing code.
  - German comments where the code already uses them.
  - Only `transform`/`opacity` animations, always behind `prefers-reduced-motion`. The spec section 8.4 lists the only exceptions: map outline drawing, a 3× pulse around the map dot, the rotating hero headline (one pass, with a pause button), and the scroll-linked word highlight.
  - Hover effects only for `(hover: hover) and (pointer: fine)`.

## Structure (short)

- `src/routes.tsx`: all routes. Subpages share one layout with the footer (`SubpageLayout`).
- `src/App.tsx`: providers, `ScrollToTop`. It jumps to anchors such as `/#leistungen` once the fonts have loaded.
- `src/hooks/use-page-meta.ts`: title and description per route.
- `src/pages/`: pages. `src/components/`: sections and parts. `src/components/ui/`: shadcn.
- `src/test/`: tests. `sofort-paket.test.tsx` holds source-code scans against banned statements: the old phone number, Unsplash, "24 Stunden", "99,9", success promises. Keep these scans when sections are removed.