Dieser Text kommt in jede neue Aufgabe.

Am besten einmal in ein Claude-Projekt unter Projektanweisungen einfügen. Dann gilt er in jedem Chat dieses Projekts automatisch.

DESIGN-BRIEFING · ENERGIEWENDE-BOARDS · MASTER v1 (Stand 10/2026)
Gilt für jede neue Aufgabe. Konkrete Anweisungen in der Aufgabe haben Vorrang.
1 · AUFTRAG
- Output: Webflow-Embed (CSS + HTML + JS in einem Block), Deutsch, für Kommunen, Stadtwerke, Industrie und Haushalte.
- Leitmotiv: „Lasst uns Energie lokal machen!“ Strom und Geld bleiben im Ort.
- Zahlen sind die Helden. Jede Grafik rechnet live mit sichtbaren Annahmen.
- Eine Fläche, eine Aussage. Die Headline nennt das Ergebnis mit Zahl, nicht das Thema.
2 · FARBTOKENS (nur diese)
Basis: ink #14120F · paper #FFFFFF · field #F5F2EB · line #E4DFD5 · mute #8B8579 · Text #332F28 / #413C34 · Notiz #6F695D
Energie: pv #F2B233 · flare #FFB03A (Akzent, Buttons, Sonne) · flow #F2A413 (Leitungen) · wind #3FA8BE (Wind, E-Mobilität) · heat #2B4A6B (Wärmepumpe) · cool #7CC4D3
Bedeutung: ok #5A7247 (Ersparnis, lokal) · cut #D9541C (Kosten, Markt, Problem) · grid #44484C (öffentliches Netz, Fluss in #D9541C)
Fossil: #3D352D Diesel · #7E6F5D Erdgas · #8B7B68 Heizung · #D6CCBA Strom fossil
Szene: Himmel #FFF1D6 → #FBF8F2 · Boden #E8E6D7 / #EEE8DB · Fenster #FFD27A · LED #9BE36B · dunkle Module #1B1814 / #0F1A1C · Nacht-Overlay #44548A multiply
Logik: Grün bleibt bei Ihnen. Orange-Rot geht verloren. Amber fließt. Ersparnis immer als grüne Schraffur 135° (4px Strich, 10px Raster).
3 · TYPOGRAFIE
- Satoshi 500/700/900 (Fontshare) für Headlines und Text. JetBrains Mono 500/700 (Google) für Zahlen, Eyebrows, Tags, Achsen, Buttons, Fußnoten.
- H1: 900, −0,05em, Zeilenhöhe 0,95, ein Akzentwort als <em> in cut oder ok. Unterzeile im H1 als <span> mit 0,4em in #6F695D.
- H2: 900, −0,04em, 1,04, max. 24 Zeichen pro Zeile.
- Lead 15–18px / 1,62, max. 64ch. Eyebrow: Mono 700, 10–11px, Versalien, +0,14–0,2em, mute. Kapitel-Label in cut.
- Zahlen: Mono 700, −0,04em, tabular-nums. Einheit als <s> mit 0,45em in mute. Format de-DE per Intl.NumberFormat.
4 · LAYOUT
- Full-bleed: width:100vw; margin-left:calc(50% − 50vw); overflow-x:clip.
- Modul: weiß, 1px line, Radius 5–6px, Eckmarken oben links und unten rechts (16px, 1px mute, 50 %).
- Präsentations-Frame 16:9: width:min(100%,1680px,calc((100svh − 24px)*16/9)); container-type:inline-size; Größen als max(px, cqw).
- KPI-Raster als Haarlinien-Grid (gap 1px auf line). Footer-Zeile: Mono, Quelle links, Stand rechts.
- Unter 760px: Frames auf aspect-ratio:auto, Spalten stapeln, Diagramme horizontal scrollbar.
5 · KOMPONENTEN
Tag mit pulsierendem Punkt · Kapitel-Label · KPI-Grid mit Count-up · Segment-Buttons (aktiv Ink) · Schalter-Pille am Haus · Slider (2px Track, Ink-Daumen, weißer Rand, Amber-Glow) · Mono-Inputs auf field · Button flare, Hover Ink · Tooltip Ink mit gelbem Wert · Kassenbon mit Zickzack und Barcode · Statement-Band auf field · Durchgestrichen gegen Dunkel · Methodik in 3 Spalten · Quellen in 2 Spalten · CTA-Paar (grün gefüllt + Kontur).
6 · DATENVISUALISIERUNG
- Eigenes SVG, keine Chart-Library. Gitter line, Achsentext Mono mute, Einheit an der Achse.
- Preisvergleich (Standard): Rückblick als Säulen in cut, Zukunft als Marktpreis-Kante in cut, Festpreis als grüne Säule, Differenz schraffiert = Ersparnis. Trenner Rückblick/Zukunft als gestrichelte Ink-Linie mit Mono-Überschriften.
- Preisleiter: horizontale Balken fahren von links ein, rechts „−x ct“.
- Gestapelte Kosten: fossil in Brauntönen gegen elektrisch in Energiefarben, Ersparnis als Schraffur-Feld mit Label.
- Marker: gestrichelte Linie, Punkt mit Amber-Halo. Labels mit weißem Halo (paint-order:stroke), Kollisionen vermeiden.
- Immer: Tooltip per Hover und Tap, aria-label, Legende.
7 · BILDWELT
- Flache, leicht isometrische SVG-Welt, per JS aus Funktionen gebaut: turb, row, bat, house, hp, flow, lab, car, per.
- Gebäude: Kontur Ink 2,5–3px, Front #FBFAF7, Dächer Ink, Fenster #FFD27A, Dach-PV #3E6A92 mit Rasterlinien #9FBBD1.
- 3D: Dachfläche #F2EFE8, Seitenfläche #EDE7DB, Schlagschatten als Parallelogramm #241F18 bei 10 %.
- Wind: schlanke Masten, weiße Blätter mit grauer Kontur. Ferne Anlagen kleiner, heller, langsamer. Rotoren 13–26 s, versetzt.
- PV-Freifläche: perspektivische Reihen, vorne #22384D, nach hinten heller bis #728290.
- Energiefluss: weißer Halo + Hülle #BCB19C + gepunktete Amber-Linie im Lauf. Öffentliches Netz langsamer in Orange-Rot.
- Beschriftung: weiße Pille, Rand #E0DACE, Satoshi 700, Leitlinie mit Punkt in mute. Mobil ausblendbar.
- Himmel warm, Sonne Amber mit zwei Halos, Wolken #F8EACD, Baumkante #BEC8C0. Nachtmodus: Overlay, Sterne, Mond, leuchtende Fenster.
- Referenz-Keyvisual: Mastershot „Lasst uns Energie lokal machen!“ (Teil 2).
8 · BEWEGUNG
Easing cubic-bezier(.2,.8,.2,1). Einblenden per IntersectionObserver (clip-path 0,9–1,1 s, gestaffelt). Count-up 1,5 s easeOutQuart. Flüsse 1,3–1,6 s linear. prefers-reduced-motion schaltet alles ab.
9 · TECHNIK (Webflow)
- Kopfkommentar: <!-- Titel · Version · Teil x von y · Scope #xx · Einbauhinweis -->
- Eindeutige Scope-ID, Reset im Scope (margin, padding, border, background, font: inherit), alle IDs mit Präfix, JS als IIFE.
- Fonts per @import, Libraries nur von cdnjs (jsPDF 2.5.1 für PDF A4 quer oder 16:9).
- Embed-Limit beachten: kompakt, große Daten per gzip + DecompressionStream, sonst in Teile splitten. Teile sprechen über window.XX + CustomEvent.
- Eingaben akzeptieren Komma und Punkt. focus-visible 2px #3FA8BE, aria-label auf SVGs, aria-pressed auf Schaltern.
10 · TEXT UND TON
- Deutsch, aktiv, kurz. Haushalte mit „Sie“, Fachpublikum sachlich.
- Headline = Ergebnis mit Zahl. Doppelpunkt statt Gedankenstrich, Mittelpunkt · als Trenner.
- Ehrliche Grenzen: „Beispielrechnung, kein Angebot“ oder „Rechenfall, keine Marktprognose“. Quellen und Stand immer im Footer.
CHECKLISTE VOR ABGABE
[ ] nur Tokens aus Abschnitt 2   [ ] Zahlen in Mono und de-DE   [ ] jede Annahme sichtbar
[ ] mobil unter 760px geprüft   [ ] reduced-motion   [ ] Scope und Präfixe   [ ] Embed-Größe ok   [ ] Quellen und Stand