From ad02d3e781635a83c321094993e3cd40daac36fa Mon Sep 17 00:00:00 2001
From: MBO-Tech-IT <jonny@mbo-tech-it.de>
Date: Sun, 26 Apr 2026 19:53:28 +0200
Subject: [PATCH] docs: add light mode design spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../specs/2026-04-26-light-mode-design.md     | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-26-light-mode-design.md

diff --git a/docs/superpowers/specs/2026-04-26-light-mode-design.md b/docs/superpowers/specs/2026-04-26-light-mode-design.md
new file mode 100644
index 0000000..c46209a
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-26-light-mode-design.md
@@ -0,0 +1,51 @@
+# 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)
+```