195 lines
12 KiB
Markdown
195 lines
12 KiB
Markdown
# 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) |
|