concept

docs/ARCHITECTURE.md

@@ -0,0 +1,55 @@
+# Technisches Architekturkonzept
+
+## Leitplanken
+
+* Frontend: React + TypeScript, statisch gebaut.
+* Server: Minimaler Node/Express-Server im selben Docker-Image.
+  * Liefert statische Assets aus.
+  * Stellt genau eine API für Kontaktformular bereit.
+* Deployment: Docker auf Hetzner.
+
+## Komponenten
+
+### Frontend
+
+* Build: Vite
+* Routing: react-router (Client-Side)
+* UI: eigene Komponenten, kein UI-Framework (um Stil strikt zu halten)
+
+Seiten:
+
+* Startseite
+* Über uns
+* Kontakt
+* Impressum
+* Datenschutz
+* AGB optional
+
+### Backend
+
+* Express-Server
+* Eine API: Kontaktformular
+* SMTP Versand via nodemailer
+* Konfiguration via Environment-Variablen
+
+## Runtime-Flow
+
+```mermaid
+flowchart TD
+  U[Browser] -->|GET Seiten und Assets| S[Node Server]
+  S -->|statische Dateien| U
+  U -->|POST Kontakt| A[API Endpoint]
+  A -->|SMTP| M[Mail Server]
+  M -->|E-Mail| R[Empfaenger Inbox]
+```
+
+## Clean Architecture Perspektive
+
+Auch wenn die App klein ist, bleiben die Grenzen klar:
+
+* UI-Layer: React Komponenten und Form-Handling
+* Application: Use-Case Kontaktformular senden (Validierung, Mapping)
+* Infrastructure: SMTP Versand, Express Adapter
+
+Ziel: Testbarkeit und minimale Kopplung, ohne Overengineering.
+

docs/CONTACT_API.md

@@ -0,0 +1,59 @@
+# Kontaktformular API (minimal)
+
+## Endpoint
+
+* Methode: POST
+* Pfad: /api/contact
+* Payload: JSON
+
+Empfohlene Felder:
+
+* name (string, required)
+* email (string, required)
+* company (string, optional)
+* message (string, required)
+* website (string, optional, Honeypot Feld, muss leer bleiben)
+
+## Validierung
+
+* name: min 2 Zeichen, max 100
+* email: simple RFC-validierung (pragmatisch)
+* message: min 20 Zeichen, max z.B. 4000
+* honeypot: muss leer sein
+
+## Anti-Spam / Abuse
+
+Minimal und wirksam:
+
+* Rate Limit pro IP (z.B. 5 Requests pro 10 Minuten)
+* Logging nur technisch, keine Volltexte im Log (Datenschutz)
+* Generic Error Responses
+
+Optional (V2): CAPTCHA nur, wenn Spam real auftritt.
+
+## SMTP Versand
+
+Nodemailer mit SMTP Settings.
+
+Empfohlene Env Vars:
+
+* SMTP_HOST
+* SMTP_PORT
+* SMTP_USER
+* SMTP_PASS
+* SMTP_FROM
+* CONTACT_RECIPIENT
+
+E-Mail Inhalt:
+
+* Subject: Kontaktanfrage von name
+* Reply-To: email
+* Body: Name, Firma, E-Mail, Nachricht, Zeitpunkt, IP anonymisiert (optional)
+
+## Responses
+
+* 200: Ok (immer gleiche Success Message)
+* 400: Validation Fehler (für UI nutzbar)
+* 429: Rate Limit
+* 500: SMTP/Server Fehler (generic)
+

docs/DEPLOYMENT_HETZNER.md

@@ -0,0 +1,36 @@
+# Deployment via Docker auf Hetzner
+
+## Zielzustand
+
+* Ein Docker-Container:
+  * enthält statisches Frontend Build
+  * enthält minimalen Node/Express Server
+* Konfiguration über Environment-Variablen (SMTP + Recipient)
+* HTTPS Terminierung über Reverse Proxy (z.B. Caddy oder Nginx) oder über Hetzner-Setup
+
+## Container Ports
+
+* App hört intern auf einem Port (z.B. 3000)
+* Reverse Proxy übernimmt 80/443
+
+## Build-Strategie
+
+Multi-stage:
+
+1) Node Build Stage
+
+* npm ci
+* Frontend build
+* Backend build (TypeScript)
+
+2) Runtime Stage
+
+* Nur dist + node_modules prod
+* Start: node server
+
+## Ops
+
+* Health Endpoint (z.B. /healthz)
+* Structured logs
+* Rate limit und sensible Daten nicht loggen
+

docs/LEGAL_PAGES.md

@@ -0,0 +1,35 @@
+# Rechtliche Seiten (DE)
+
+## Ausgangslage
+
+* Es existieren Texte aus KLZ, die angepasst werden sollen:
+  * [`context/legal.md`](context/legal.md) (aktuell Englisch, muss zu deutschem Impressum werden)
+  * [`context/datenschutz.md`](context/datenschutz.md)
+  * [`context/agbs.md`](context/agbs.md)
+
+## Anpassungen (konkret)
+
+### Impressum
+
+* Überschrift und Sprache: DE
+* Unternehmensdaten: laut Vorgabe identisch zu KLZ (vom Auftraggeber bestätigt)
+* Domain/E-Mail: müssen auf die neue Domain und Mailadresse zeigen (falls abweichend)
+
+### Datenschutzerklärung
+
+Mindestens ergänzen/konkretisieren:
+
+* Hosting: Hetzner (Serverstandort, Auftragsverarbeitung sofern zutreffend)
+* Server-Logs (Zweck, Rechtsgrundlage, Speicherdauer)
+* Kontaktformular: verarbeitete Daten, Zweck, Rechtsgrundlage, Speicherdauer
+* Versand: SMTP Mailserver als Empfänger/Verarbeiter
+* Betroffenenrechte und Kontakt
+
+### AGB
+
+Nur veröffentlichen, wenn geschäftlich gewünscht.
+
+## Hinweis
+
+Die Dokumente werden technisch integriert, die juristische Prüfung liegt beim Betreiber.
+

docs/README.md

@@ -0,0 +1,11 @@
+# Dokumentation
+
+Diese Dokumente beschreiben das Website-Konzept, die Ziel-Informationsarchitektur, das Design-System und die Deployment-Strategie.
+
+* Website-Konzept und Seitenstruktur: siehe [`docs/WEB_CONCEPT.md`](docs/WEB_CONCEPT.md)
+* UI-Style / Designregeln: siehe [`docs/STYLEGUIDE.md`](docs/STYLEGUIDE.md)
+* Technisches Architekturkonzept: siehe [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md)
+* Kontaktformular API (minimal, im selben Docker): siehe [`docs/CONTACT_API.md`](docs/CONTACT_API.md)
+* Docker + Hetzner Deployment: siehe [`docs/DEPLOYMENT_HETZNER.md`](docs/DEPLOYMENT_HETZNER.md)
+* Rechtliches (DE): siehe [`docs/LEGAL_PAGES.md`](docs/LEGAL_PAGES.md)
+

docs/WEB_CONCEPT.md

@@ -0,0 +1,121 @@
+# Website-Konzept MB Grid Solution
+
+## Ziel
+
+Eine überwiegend statische Website (Deutsch), die MB Grid Solution als technisch präzisen, unabhängigen Partner für anspruchsvolle Energiekabelprojekte bis 110 kV positioniert.
+
+Ziele:
+
+* Klarer Nutzen: technische Beratung, Design, Projektbegleitung, herstellerneutral.
+* Seriöse Kontaktaufnahme: Kontaktformular (Spam-resistent) + direkte Kontaktinfos.
+* Rechtssicherheit: Impressum + Datenschutzerklärung (DE) und optional AGB.
+
+Nicht-Ziele:
+
+* Kein Blog/CMS in V1.
+* Keine Mehrsprachigkeit.
+* Keine spielerischen Animationen oder dekorative UI.
+
+## Informationsarchitektur (Sitemap)
+
+Primärnavigation:
+
+* Startseite
+* Über uns
+* Kontakt
+
+Footer:
+
+* Impressum
+* Datenschutz
+* AGB (optional)
+
+Empfohlene Routes:
+
+* /
+* /ueber-uns
+* /kontakt
+* /impressum
+* /datenschutz
+* /agb (optional)
+
+## Seitenkonzept
+
+### Startseite
+
+Sektionen (streng, modular):
+
+1) Hero
+
+* Kernbotschaft: Spezialisierter Partner für Energiekabelprojekte bis 110 kV
+* Subline: Herstellerneutrale technische Beratung und Projektbegleitung
+* CTA: Kontakt aufnehmen
+
+2) Leistungsportfolio
+
+* Technische Beratung und Design
+* Projektbegleitung und Service
+* Produktbeschaffung
+
+3) Typische Anwendungen und Zielgruppen
+
+* Energieversorger
+* Ingenieur- und Planungsbüros
+* Tiefbauunternehmen
+* Industrie / Projektierer EE
+
+4) Produkte und Spannungsebenen (kurz, bebildert)
+
+* N2XS(FL)2Y
+* N2X(F)KLD2Y
+* NA2XS(FL)2Y
+* NA2X(F)KLD2Y
+* 64/110 kV und weitere Spannungsebenen mit Beratungsbedarf
+* Leiter: Massivleiter, mehrdrähtig, Millikenleiter
+
+5) Prinzipien
+
+* Exzellenz und Präzision
+* Nachhaltigkeit und Qualität
+* Transparenz und Vertrauen
+
+6) Ansprechpartner Teaser
+
+Kurzer Block mit Verweis auf Über uns.
+
+### Über uns
+
+Inhalte:
+
+* Kurzprofil: Was MB Grid Solution macht (aus [`context/concept.md`](context/concept.md))
+* Selbstverständnis: technischer Lotse, keine Generalunternehmer-Rolle
+* Geschäftsführung: Michael Bodemer, Klaus Mintel
+  * Je Person: 3–5 Stichpunkte (Erfahrung, Rolle, Schwerpunkt)
+* Netzwerk/Partner: kurzer seriöser Hinweis, keine Marketingfloskeln
+
+### Kontakt
+
+Inhalte:
+
+* Kontaktformular (Name, Firma optional, E-Mail, Nachricht)
+* Direkte Kontaktinfos (E-Mail, Telefon)
+* Hinweis zu Datenschutz: kurzer Satz + Link auf Datenschutz
+
+Form-UX:
+
+* Validierung (Pflichtfelder, Format, minimale Länge)
+* Erfolgsmeldung (ohne Details, die Spammern helfen)
+* Fehlermeldungen: technisch nüchtern
+
+### Rechtliche Seiten
+
+* Impressum (DE)
+* Datenschutzerklärung (DE, angepasst an Hetzner-Hosting + Kontaktformular)
+* AGB optional: nur, wenn fachlich gewünscht
+
+## SEO-Grundlage
+
+* Titel/Meta pro Seite mit klaren Keywords: Energiekabel, 110 kV, technische Beratung, Kabeldesign
+* OpenGraph minimal (Logo, Titel, Beschreibung)
+* Keine Tracking-/Analytics-Komponenten in V1 (GDPR-robust)
+