MFI---Webseite/MFI/DESIGN_NOTES.md

DESIGN_NOTES — MFI Wolkensystem & Produktionsreife

Arbeitsstand: 2026-08-06. Autonomer Durchlauf nach Spezifikation „CloudDesign".

1. Audit-Inventar (Ist-Zustand vor dem Umbau)

Eine Datei: index.html (541 KB, 1518 Zeilen, alles inline). Fundstellen Dekoration:

Element	Zeile(n)	Befund
Wolken-Sprite cl-defs (Kit)	653–712	4 Formen aus EINEM Basispfad #cl-p per clip-path Varianten + feTurbulence-Verzerrung; Schraffur = geradliniges <pattern> über die ganze Fläche → mechanisch (Befund 1.3), keine Lichtrichtung (1.4)
Hero-Wolken .c1–.c4	740–743	4 Stück — Budget erlaubt 3; alle gleiche Grundform (1.6: keine Tiefe, gleiche Opazität)
Trennbänder .cl-band	776, 962, 1120	ein sich wiederholender Bogenpfad #cl-bd, oben UND unten gewellt → „Schaum", nicht Kumulus (1.2)
Gespiegelte Bänder .cl-band-up	871, 1048, 1189	scaleY(-1) → Licht käme von unten rechts. Verstößt fundamental gegen die neue Lichtregel (2.2)
Mond, Sterne	1193, 1209	bleiben (Nacht-Footer, eigenes Motiv)
Papier-Korn	—	fehlt (2.9)

Geprüfte Behauptungen aus Abschnitt 1 der Spezifikation:

• 1.1 „H1 von der Kopfzeile geklippt": im aktuellen Build NICHT reproduzierbar — die Kopfzeile ist position:sticky und nimmt Flussplatz ein (H1-Oberkante 159 px, Kopfzeilen-Unterkante 108 px, gemessen bei 1024 px). Der reale Kern des Befunds: scroll-padding-top fehlt, Anker-Sprünge verstecken jede Sektionsüberschrift unter der Leiste. Wird nach Spezifikation gelöst (--header-h + scroll-padding-top), zusätzlich als Absicherung gegen künftige position:fixed-Umbauten.
• 1.5 „Wolke über Fließtext": in der Vorrunde bereits behoben; Messung bestätigt 0 Überdeckungen. Die Platzierungsregeln werden für die neuen Formen neu verifiziert.
• 1.8 „toter Raum unter dem Trenner": bestätigt, 132 px zwischen Bandunterkante und erstem Label.

2. Token-Plan

Farbe (Wolkensystem, abgeleitet aus Bestandstokens)

Token	Wert	Rolle
--wk-paper	#F6F0E3	Wolkenkörper auf Creme-Sektionen
--wk-paper-sky	#F1E6D4	Wolkenkörper über dem Hero (Rost) — kein Reinweiß (1.7)
--wk-ink	#5C4632	Schraffur + Kontur, warmes Braun, nie Schwarz
--wk-shadow	#C9B79B	Untersegel-Tönung vor der Schraffur
Fern-Dunst	Mischung Papier 55 % / Sektionsgrund 45 %	Fern-Ebene

Tuschen-Opazität: nah 0.75, mittel 0.5, fern 0.28.

Abstands-Skala

--s-1:4px bis --s-10:128px (4/8/12/16/24/32/48/64/96/128). Angewandt auf Sektions-Innenabstände und die Trennerfuge; Bestands-clamp()-Werte, die bereits fluid sind, bleiben (sie liegen auf der Skala auf).

Kopfzeile

--header-h wird per ResizeObserver aus der echten Höhe gesetzt; html{scroll-padding-top:calc(var(--header-h) + 12px)}.

3. Wolken-Spezifikation (umgesetzte Fassung)

Sechs handgesetzte Silhouetten #wk-a … #wk-f (kubische Béziers, keine Generator- Geometrie), jede mit:

1. Flache Basis mit höchstens zwei flachen Durchhängen; nie untenrum gewellt.
2. Unregelmäßiges Oberteil, 5–9 Lappen, Radienverhältnis 0.45–1.0, nie zweimal derselbe Radius nacheinander; Hauptmasse bei ~30 % oder ~70 % der Breite.
3. Blumenkohl-Rekursion: 2–3 Sub-Beulen an der oberen LINKEN Kontur der größten Lappen.
4. Fetzenränder: 1–2 dünne Schleier, die auf der Lee-Seite (rechts) auslaufen.
5. Licht von oben links, global. Oben links reines Papier; Schraffur nur unten rechts und an der Basis (dunkelste Zone).
6. Schraffur als Bögen, die der Lappenkrümmung folgen (pfadgeneriert aus den Lappenmittelpunkten der handgesetzten Silhouette — erlaubt laut Spez. „path-derived group"), Strich 1–1.4, Abstand 3–5, geclippt auf die Silhouette, per Verlaufsmaske (unten rechts → oben links) ausgeblendet. Kein <pattern>.
7. Kreuzschraffur nur in 2–3 tiefsten Schattentaschen, ~35°.
8. Kontur mit variabler Stärke: Haarlinie (0.8) als Ganzes + Schattenseiten-Overlay in 2 Segmenten (2.3 → 1.4), auf der Lichtseite läuft die Kontur aus. Keine geschlossene gleichstarke Umrandung.

Tiefenebenen

Ebene	Skala	Tusche	Detail	Bewegung
Fern	0.55–0.65	0.28	nur Silhouette (#wk-*-b-Basissymbole)	Drift 110 s
Mittel	0.8–0.9	0.5	leichte Schraffur, Haarlinie	statisch
Nah	1.0	0.75	volle Schraffur, variable Kontur, Fetzen	statisch

Fern sitzt höher und kleiner; mindestens eine Mittel-Wolke läuft teilweise HINTER einer Nah-Wolke (Überlappung verkauft die Tiefe).

Trenner

• Hero→Creme: Wolkenbank aus 5 überlappenden Symbolen in 3 Ebenen, zwei brechen klar nach oben aus, eine kleine Fern-Wolke schwebt frei darüber. Creme der Folgesektion füllt unter der Bank.
• preserveAspectRatio="xMidYMax slice" + min-width im Wrapper → beschneidet statt zu quetschen.
• Eigene Mobilvariante (weniger, höhere Wolken) unter 700 px — kein Herunterskalieren.
• Himmel→Papier-Grenzen tiefer auf der Seite: schlichtere Niedrigbank (Fern/Mittel).
• Papier→Himmel-Grenzen (bisher gespiegelte Bänder): ersatzlos glatte Kante. Begründung: gespiegelte Wolken hätten Licht von unten; Wolken, die von einer Papierkante herabhängen, gibt es nicht. Weniger Dekoration = Teil des Looks.

Korn

Ein feTurbulence-Papierkorn (baseFrequency .75, numOctaves 3) als fixes Ganzseiten-Overlay, Opazität 0.035, mix-blend-mode:multiply, pointer-events:none.

Platzierung

Dekoschicht position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden, Inhalt auf z-index ≥ 1. Null Überschneidung mit Text/Bedienelementen (numerisch verifiziert inkl. Drift-Amplitude). Max. 3 Deko-Wolken pro Viewport-Höhe plus Trenner.

4. Selbstkritik des Plans (vor dem Code) und Revision

1. Kritik: Die Verlaufsmaske pro Symbol plus Clip plus zwei Konturpfade macht 6 × ~40 Knoten — Payload-Risiko gegen das 40-KB-Budget. Revision: Schraffurbögen auf 12–22 Pfade je Symbol begrenzen, Koordinaten auf eine Dezimale gerundet, Fern-Ebene referenziert nur die Basispfade (kein Duplikat).
2. Kritik: Ganzseiten-Multiply-Overlay kann beim Scrollen Repaints kosten. Revision: Overlay als eigenes komposit-freundliches Layer (transform:translateZ(0)), Korn-Kachel klein halten (256²), bei prefers-reduced-transparency nicht nötig — bleibt, da statisch.
3. Kritik: Bank mit slice beschneidet bei 360 px die Nah-Wolke möglicherweise mitten im Lappen → wirkt versehentlich. Revision: Mobilbank als eigene Komposition, deren Randwolken absichtlich und deutlich über die Kante laufen; Schnittkanten liegen in Lappentälern.
4. Kritik: Drift auf Fern-Ebene + slice-Beschnitt können die Wolke aus dem sichtbaren Bereich fahren. Revision: Driftamplitude ±10 Einheiten, Ruheposition mit ≥ 24 Einheiten Abstand zur Schnittkante; im Hero (kein slice) unkritisch.
5. Kritik: Die Spezifikation nennt für JSON-LD „Gunzenhausen" als Adresse. Der Kunde hat den Sitz aber ausdrücklich auf Wittelshofen (Vorstadt 3, 91749) korrigiert; Karte, Fußzeile und Text nennen Wittelshofen. Revision: JSON-LD führt Wittelshofen als Adresse und Gunzenhausen/Mittelfranken/ Deutschland als areaServed. Öffnungszeiten werden NICHT erfunden — Feld entfällt, bis der Kunde sie liefert.
6. Kritik: Honeypot-Feld ist gefordert, das Formular versendet aber per mailto: ohne Server — ein Honeypot hätte keinerlei Wirkung. Revision: entfällt mit Begründung; stattdessen Datenschutzhinweis am Formular geschärft und Autocomplete vervollständigt.
7. Kritik: Lighthouse ist in dieser Umgebung nicht lauffähig (kein Chrome-Headless- Zugriff aus dem Werkzeug), Screenshots der Browserfläche komponieren nicht. Revision: Wolken werden über Canvas-Rasterung als echte PNGs gerendert und visuell geprüft (das Kernstück hat damit eine echte Sichtprüfung); Layout, Kontrast, Überdeckung, CLS-Quellen und Gewicht werden numerisch im echten Browser gemessen. Lighthouse-Zahlen werden im Bericht ehrlich als „nicht messbar" geführt.

5. Entscheidungsprotokoll

Wird während der Umsetzung fortgeschrieben.

• Gespiegelte Bänder ersatzlos gestrichen (Lichtregel > Symmetrie-Gewohnheit).

• Hero-Wolkenzahl 4 → 3 (Budget), die gestrichene ist die, die am wenigsten arbeitet (kleinste, halb hinter der Wetterkarte).

• Adresse Wittelshofen statt Gunzenhausen (Kundenkorrektur schlägt Prompt-Text).

• Öffnungszeiten im Schema weggelassen statt erfunden.

• Sub-Seiten (leistungen.html usw., altes Platzhalter-Design) sind NICHT Teil dieses Durchlaufs; die Startseite verlinkt sie nicht. Impressum/Datenschutz bleiben verlinkt (Pflicht), tragen aber weiterhin Platzhalterdaten — vom Kunden zu liefern.

• Fern-Wolke im Hero (wk-h3) im Restraint-Schlusstest entfernt: rostgetönt auf Rost war sie das Deko-Element mit der geringsten Wirkung; die drei Tiefenebenen trägt die Hero→Creme-Bank. Damit ist die Seite standardmäßig komplett bewegungsfrei (Drift-Regeln mit entfernt, kein toter CSS).

• Trefferflächen: Buttons min-height 47px (Reserve gegen Transform-Skalierung der Bürokarte), Telefon-/Mail-Links als inline-flex mit 44px, Karten-Pin bekam einen unsichtbaren Trefferkreis (gemessen 44×44). Inline-Links im Fließtext bleiben ausgenommen (WCAG 2.5.8 Inline-Ausnahme).

• Rechtsseiten: Google-Fonts-CDN entfernt (LG München I, 3 O 17493/20); sie fallen auf Systemschrift zurück, bis sie das neue Design bekommen. Navigationen zeigen auf Startseiten-Anker; die drei Platzhalter-Unterseiten wurden gelöscht, sitemap.xml auf 3 URLs gekürzt.

• Sichtprüfung: echte Rasterbilder über foreignObject→Canvas (die Seite ist komplett inline, darum funktioniert das). Gesichtet: Wolkenatlas v1+v2, Hero 1024/1440, Gesamtseite 1440, Gesamtseite 360. Browserfenster- Screenshots komponieren in dieser Umgebung nicht (Pane nicht dargestellt).

• Lighthouse ist in dieser Umgebung nicht lauffähig – ersatzweise gemessen: 0 externe Requests, 0 Konsolenfehler, Tag-Balance sauber, 0 doppelte IDs, CLS-Quellen: keine (keine dimensionslosen Bilder, Fonts mit swap und identischen Fallback-Metriken nicht garantiert → mögliche geringe Font-Swap-Verschiebung bleibt).

6. Prüfprotokoll (Checkliste Abschnitt 6, zwei Durchläufe)

Gemessen bei 360/390/768/1024/1440/1920 px, nach jedem Fix erneut:

Prüfung	Ergebnis
H1 frei von der Kopfzeile (alle 6 Breiten + 150 % Zoom)	✅
Anker-Sprünge (scroll-padding-top = Kopfzeile + 12px)	✅ 90–120px je Breite
Wolke über Text/Bedienelement (inkl. Drift-Puffer)	✅ 0 Treffer
Flache Basis / unregelmäßiges Oberteil / Licht oben links	✅ per Konstruktion + Sichtbild
Schraffur folgt Krümmung, nur Schattenseite, ausblendend	✅ Sichtbild v2
Kontur variabel, keine gleichstarke Umrandung	✅ Maske + 2-Segment-Overlay
Drei Tiefenebenen mit Überlappung	✅ in der Hero-Bank
Kein Reinweiß/Reinschwarz im Wolkensystem	✅ #F6F0E3/#F1E6D4/#5C4632
Keine zwei identischen Formen im Viewport	✅ 6 Symbole, je Bank verschieden
Trenner beschneidet statt quetscht; Mobilbank eigene Komposition	✅ slice + wk-band-m
Papierkorn subtil	✅ Opazität .035
Horizontaler Überlauf	✅ keiner (alle 6 Breiten)
Trefferflächen ≥ 44px	✅ (Pin 44×44, Buttons ≥ 47)
Kontrast: Senf-CTA auf Rost	✅ Text 7,30 / Fläche 3,85
Kontrast: Hero hell auf Rost	✅ min. 4,44 (Soll 3) über eigenen Hero-Verlauf
Kontrast: Fußzeile auf Nacht	✅ 10,55
prefers-reduced-motion	✅ alle 6 Animationsfamilien abgedeckt
Konsole	✅ 0 Fehler/Warnungen
Tag-Balance (Wohlgeformtheit)	✅ sauber
Keine Tracker/CDN/Cookie-Banner	✅ 0 externe Requests
Lighthouse ≥ 95	❌ nicht messbar in dieser Umgebung (siehe oben)