feat: redesign — one message, one audience, light pages

The site felt old, unfocused and bloated: 11 pages, a features page of 171
bullets, a homepage of 830 words in card grids around seven mockup-style
screenshots, and no single thing it wanted a visitor to understand.

- Message: control instead of drift. Audience: IT departments in small and
  mid-sized companies. Goal: buy a licence — netOrk itself is free, the
  licence adds vulnerability data and image updates.
- Home is under 400 words: the drift comparison of a real access point, three
  steps, the hardware it runs on, vulnerabilities with a licence, what else is
  in the box, one closing band. Features, Drivers and Roadmap are gone; their
  URLs redirect (router and nginx 301).
- New Pricing page: the free core, Starter / Pro / Enterprise on request with
  the plan differences from the licence server, four questions; buttons go to
  the licence portal. The unit-less KB request limit is left out.
- Persona pages are one template; NIS2 and Plugins are cut to half or less.
  Impressum and Datenschutz exist as marked placeholders; the unsupported
  "MIT licence" claim is gone from the footer.
- Look: light paper and ink, the dark product on a stage, Inter self-hosted,
  split sections and ruled lists instead of cards. Four real, cropped
  screenshots replace eight full-window ones.
- Language follows the browser until someone chooses; <html lang> is set.
  Scroll-to-top on navigation, a catch-all route, no dead /docs/architecture.
- CLAUDE.md, DESIGN.md, PAGES.md and PRODUCT.md describe the new rules.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CLAUDE.md

@@ -10,9 +10,12 @@ get started.
 ## Project Purpose
 
 Potential users land here and need to answer three questions in under 10 seconds:
-1. What is this?
-2. Is it for me?
-3. How do I try it?
+1. What is this? — Control instead of drift: define the desired state once,
+   netOrk finds every deviation and puts it back.
+2. Is it for me? — IT departments in small and mid-sized companies with mixed
+   hardware (service providers and IT support are secondary).
+3. What does it cost? — netOrk is free; a licence adds vulnerability data and
+   updates (`/pricing`).
 
 Everything on the site should serve those three questions.
 
@@ -74,13 +77,19 @@ exactly as netOrk's `ui/src/components/ui.tsx` does.
 
 ## Design Rules (summary — full detail in docs/DESIGN.md)
 
-- **Dark theme only.** Background `bg-slate-950`. Cards `bg-slate-900`.
-- **Accent color:** `sky-500` / `sky-600` for CTAs, links, highlights.
-- **No light mode toggle.** Ever.
-- Font stack: system default (Tailwind sans). No Google Fonts.
-- All interactive elements use `transition-colors` — no layout shifts.
-- Screenshots/mockups of the actual app use a `border border-slate-700 rounded-xl
-  overflow-hidden` wrapper to frame them against the dark background.
+- **Light pages, dark product.** Pages are `paper` with `ink`; the only dark
+  surfaces are real netOrk screenshots and code, on the `night` stage.
+- One accent, `accent` (sky-700), for links, eyebrows and focus. Buttons are ink.
+- Font: Inter Variable, self-hosted via `@fontsource-variable/inter`. No Google
+  Fonts, no request to any other origin.
+- Layout from `src/components/ui.tsx`: split sections, ruled lists, numbered
+  steps, bands. No card grids, no icon tiles, no centred text blocks.
+- Motion: `transition-colors` only — no layout shifts.
+- **Screenshots are real.** Taken from the anonymised demo copy with
+  `scripts/screenshots/capture.py`, cropped to what the text talks about, at most
+  four on the site. No mockups, no edited data, no clicks that fake a state.
+- **Less text.** Word budgets per page are in docs/PAGES.md and checked by
+  `scripts/check/site.py`.
 
 ---
 
@@ -108,7 +117,9 @@ netork-website/
 
 ## Tone of Voice
 
-- Direct and technical — audience is engineers, not executives.
+- Direct and technical — audience is the admins of an IT department, not executives.
+- One message: control instead of drift. Everything else supports it.
 - No marketing fluff ("revolutionize", "empower", "seamless").
-- Show, don't tell — a screenshot or code block beats three sentences of prose.
-- German is fine for internal docs; the website copy is in **English**.
+- Show, don't tell — a real screenshot beats three sentences of prose.
+- Website copy exists in **English and German** (German addresses readers with
+  "ihr"); the language follows the browser until the visitor chooses.