# Light Mode — Design-Spec

## Überblick

Ergänzung eines Light Mode zur bestehenden MBO-Tech-IT-Webseite (Next.js 15 / Tailwind CSS v3). Die Seite war zuvor rein im Dark Mode. Der Light Mode wird über `next-themes` und Tailwinds `dark:`-Klassen-Strategie implementiert.

## Entscheidungen

- **Theme-Verwaltung:** `next-themes` mit `attribute="class"` und `defaultTheme="system"` — erkennt OS-Präferenz, speichert manuelle Auswahl in localStorage, kein Theme-Flash beim Laden
- **Tailwind-Strategie:** `darkMode: "class"` — Light = Default (kein Präfix), Dark = `dark:` Präfix
- **Toggle-Platzierung:** Ganz rechts im Header (nach dem "Jetzt anfragen" CTA), auch im mobilen Menü
- **Farbpalette:** Cool Blue-Gray (#f0f4f8 / #e8eef4)

## Farbmapping

| Token | Light | Dark |
|---|---|---|
| bg-primary | `#f0f4f8` | `#18212f` |
| bg-section | `#e8eef4` | `#111925` |
| bg-card | `#ffffff` | `gray-900` |
| bg-modal | `#dde4ed` | `#1a2535` |
| text-primary | `#1a202c` (slate-900) | `white` |
| text-secondary | `#4a5568` (slate-600) | `slate-400` |
| text-muted | `#718096` (slate-500) | `slate-500` |
| border | `#cbd5e0` (slate-200/300) | `gray-800` |
| accent-orange | `orange-500` | `orange-500` (unverändert) |
| accent-blue | `blue-600` | `blue-400` |

## Komponenten

- `components/Providers.tsx` — ThemeProvider Wrapper
- `components/ThemeToggle.tsx` — Sun/Moon Toggle mit `mounted`-Guard
- `tailwind.config.ts` — `darkMode: "class"` ergänzt
- `app/layout.tsx` — Providers-Wrapper, `suppressHydrationWarning`
- `app/globals.css` — Body/Scrollbar/bg-grid/legal-content/.btn-secondary im Light/Dark
- `app/page.tsx` — Hintergrundfarbe
- `app/pakete/page.tsx` — vollständig
- `components/Header.tsx` — ThemeToggle eingebunden
- `components/Hero.tsx`, `StatsBar.tsx`, `Footer.tsx` — Farbanpassungen
- `components/Services.tsx`, `PaperlessSection.tsx`, `DataSovereignty.tsx`, `About.tsx` — Farbanpassungen
- `components/Contact.tsx`, `Technologies.tsx`, `LegalLayout.tsx` — Farbanpassungen

## ThemeToggle Details

```tsx
"use client"
// useTheme() aus next-themes
// resolvedTheme (nicht theme) für korrekte system-default-Erkennung
// mounted-Guard verhindert SSR-Hydration-Mismatch
// SVG Sonne (im Dark Mode) / SVG Mond (im Light Mode)
```