# 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) |