# 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)