DESIGN.md — VOLTA Elektrotechnik (Demo)

Direction: „Dark Lab mit Stromfluss” (Awwwards-tauglich, bewusst gegensätzlich zur Bau-Demo). Bau = Masse die steht (warm, Beton/Bernstein). VOLTA = Energie die fließt (kühl, Cyan, Mono).

Tokens (Farbe)

• voltage #0A0E12 (Fläche primär, Hero, Footer; leicht blaustichig)
• carbon #12181F (Cards, erhöhte Flächen)
• cyan #00E5FF (Signal-Akzent: Leiterbahnen, aktive Linien, Hover-Glow, CTA, Daten-Peaks) — <10% Fläche
• lime #C6FF3D (nur „Energiegewinn”: PV-Erträge, kWp/kWh-Zähler, online-States)
• violet #7B5BFF (Smart Home/KNX, Cyan→Violet-Verläufe)
• red #FF3B30 (NUR 24/7-Notdienst-Badge/Puls)
• text #EAF2F6 (nie reinweiß) · muted #6B7785
• hairline rgba(0,229,255,.14) (Leiterbahn-Raster, Trennlinien)
• Ein heller Bruch-Abschnitt: #EAF2F6-Fläche, schwarze Typo (PV-Datenblatt) für Kontrast.

Typografie

• Display: Space Grotesk – riesige Headlines, tracking -2%, ein Wort in Cyan.
• Mono: JetBrains Mono – Identitäts-Stimme: Labels // 01 — INSTALLATION, kWp/kWh, 230V/400V, Captions. uppercase + tracking +8%.
• Body: Inter – ruhig, lesbar.

Signature

• PCB-Leiterbahnen (Cyan-Hairlines, 90/45°-Knicke, Vias = Lötpunkt-Kreise) verbinden Sektionen.
• Hero: lebendes Leiterbahn-Geflecht; Cursor = Stromquelle (Bahnen nahe Maus leuchten, Puls läuft).
• PV-Live-Dashboard: Ertragskurve in Volt-Lime + hochzählender kWp-Zähler.
• Notdienst-Puls (Signal-Red, „Herzschlag”-Glow).
• Glow-Hover: Ruhe = 1px Cyan-Hairline; Hover = Kante glüht + Lichtpunkt fährt entlang (Stromkreis schließt).

Rhythmus (Spannungswechsel dunkel↔hell)

Hero(dunkel) → Leistungen(dunkel, Mono-Index) → PV-Datensektion(HELL, Bruch) → Referenzen(dunkel) → Prozess(Leiterbahn-Timeline) → Notdienst-CTA(Red-Band) → Footer(Platinen-Raster). Asymmetrisches 12-Spalten-Grid, nie zentriert. Mono-Koordinaten-Label oben links je Sektion.

Motion (GSAP, prefers-reduced-motion sauber)

Energie-Pulse auf Leiterbahnen (stroke-dashoffset/MotionPath, ease none), Glow-Pulse (~2.4s), kWp/kWh-Zähler, Reveal als kurzes „Einschalt-Flackern” (2 Opacity-Steps), draw-on Leiterbahnen beim Scroll, Hover-Light-Trail.

Accepted Debt

• Lighthouse-Feinmessung pro Demo separat; Bilder als Stock (Unsplash, lokal).