docs: add CLAUDE.md with architecture and dev commands

CLAUDE.md

@@ -0,0 +1,73 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm run dev        # Dev-Server (http://localhost:3000) — erhöhter Node-Heap (4 GB)
+npm run build      # Produktions-Build (TypeScript + Next.js)
+npm run lint       # ESLint via next lint
+npx tsc --noEmit   # TypeScript-Check ohne Build
+git push           # Remote: https://gitea.mbo-tech-it.de/jonny/MBO-Tech-IT-Webseite.git
+```
+
+## Architektur
+
+**Next.js 15 App Router**, kein Pages Router. Alle Routen liegen unter `app/`.
+
+```
+app/
+  page.tsx           # Startseite — reiht alle Sektionskomponenten auf
+  layout.tsx         # Root Layout mit Metadata (DE, scroll-smooth)
+  globals.css        # Tailwind-Imports, Design-Tokens, globale Klassen
+  impressum/         # Statische Seite
+  datenschutz/       # Statische Seite
+  pakete/            # Statische Seite
+
+components/          # Eine Komponente = eine Sektion oder ein UI-Primitiv
+hooks/               # Client-only Hooks ("use client" in .ts-Dateien)
+```
+
+**Komponentenmodell:** Sektionskomponenten sind standardmäßig React Server Components. `"use client"` nur wenn Browser-APIs oder Hooks verwendet werden (`ScrollReveal`, `StatsBar`, `Hero`, `useTypewriter`).
+
+**Seitenaufbau (app/page.tsx):**
+Header → Hero → TaglineBanner → StatsBar → Services → TaglineBanner → PaperlessSection → DataSovereignty → TaglineBanner → Technologies → About → TaglineBanner → Contact → Footer
+
+## Design-System
+
+**Farbpalette** (in `globals.css` und `tailwind.config.ts` definiert):
+- Hintergrund: `#18212f` (Hauptseite), `#111925` (Sektionen mit dunklem Hintergrund)
+- Akzent Orange: `text-orange-400`, `bg-orange-500`, `border-orange-500/20`
+- Akzent Blau: `text-blue-400`, `bg-blue-500`, `border-blue-500/20`
+
+**Utility-Klassen** (in `globals.css` per `@layer` definiert):
+- `.btn-primary` — oranger Primär-Button
+- `.btn-secondary` — outlined Button
+- `.btn-nav` — kleiner Nav-Button
+- `.text-gradient` — Blau-Verlauf (für Highlights in Überschriften)
+- `.text-gradient-orange` — Orange-Verlauf
+- `.bg-grid` — Dot-Matrix-Hintergrundmuster (orange)
+- `.animate-ticker` — horizontales Lauf-Band (TaglineBanner)
+
+**Animations-Klassen** (Tailwind-Config):
+- `animate-pulse-slow` — 3s Puls
+- `animate-fade-in`, `animate-slide-up` — einmalige Einblend-Animationen
+
+## Scroll-Animationen
+
+`components/ScrollReveal.tsx` ist der Animations-Wrapper für alle Scroll-Effekte:
+```tsx
+<ScrollReveal delay={150}>  {/* delay in ms, optional */}
+  <IrgendEineKomponente />
+</ScrollReveal>
+```
+- Nutzt Intersection Observer (threshold 0.1), feuert einmalig
+- Inline-Styles statt Tailwind (wegen dynamischem Delay-Wert)
+- Muss in Client-Komponenten eingebettet oder selbst als Client-Komponente gerendert werden
+
+## TypeScript-Hinweise
+
+- `@/*` aliased auf das Root-Verzeichnis (z. B. `@/components/Hero`)
+- `strict: true` — keine impliziten `any`
+- `JSX.Element` nicht verwenden — stattdessen `ReactElement` aus `react` importieren (Next.js 15 / React 19 hat `JSX`-Namespace-Änderungen)