Neuer Stand aus website-mfi uebernommen: Wolkensystem Stich, Wolkenreich-Uebergaenge, Daemmerung vor dem Footer, SEO/DSGVO-Fixes

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

MFI/DESIGN_NOTES.md

@@ -0,0 +1,194 @@
+# 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) |

MFI/README.md

@@ -1,51 +1,69 @@
-# MFI – Mittelfranken Informatik · Webseite
+# MFI – Mittelfranken Informatik: Website
 
-IT-Systemhaus aus Wittelshofen. Managed Services, Netzwerk, Microsoft 365, IT-Sicherheit.
+Statische Website, reines HTML/CSS/JavaScript – kein Framework, kein
+Build-Step, läuft auf jedem einfachen Webhoster per Datei-Upload.
 
-## Aufbau
+Die **Startseite ist eine einzige, eigenständige `index.html`**: Schriften
+(New Rocker, IM Fell English, Stack Sans Headline, IBM Plex Mono), Logo und
+alle Grafiken sind eingebettet. Keine externen Requests, kein CDN, keine
+Tracker – DSGVO-sauber per Konstruktion.
 
-Die komplette Seite ist **eine einzige Datei**: `index.html`.
+## Lokal öffnen
-Alles ist darin eingebettet — es gibt bewusst keine externen Abhängigkeiten:
 
-- **Schriften** (New Rocker, IM Fell English, IBM Plex Mono, Stack Sans Headline)
+`index.html` im Browser öffnen. Für eine realistischere Vorschau:
-  als WOFF2 im CSS eingebettet, kein Google-Fonts-Aufruf
-- **Logo** als PNG mit Transparenz eingebettet
-- **Wolken** als Inline-SVG (Kupferstich-Kit, siehe unten)
-- **Deutschlandkarte** als Inline-SVG mit allen 16 Bundesländern
-- **JavaScript** inline, kein Framework
 
-## Öffnen und bearbeiten
+```
+python -m http.server 8000
+```
 
-`index.html` im Browser öffnen — das ist die Vorschau. Zum Bearbeiten die Datei
+und `http://localhost:8000` aufrufen.
-in einem Editor öffnen. Kein Build-Schritt, kein `npm install`, kein Server nötig.
+
+## Struktur
+
+```
+index.html          Startseite (eigenständig, alles inline)
+impressum.html      Impressum        – ACHTUNG: noch Platzhalterdaten!
+datenschutz.html    Datenschutz      – ACHTUNG: noch Platzhalterdaten!
+robots.txt
+sitemap.xml
+css/style.css       Stylesheet der Rechtsseiten
+js/main.js          Menü/Reveal der Rechtsseiten
+img/mfi-logo.png    Logo als Datei (OG-Bild, Apple-Touch-Icon)
+DESIGN_NOTES.md     Tokens, Wolken-Spezifikation, Entscheidungsprotokoll
+```
+
+Die früheren Platzhalter-Unterseiten (leistungen/ueber-uns/kontakt) wurden
+entfernt; ihre Inhalte deckt die Startseite ab. Die Navigationen der
+Rechtsseiten zeigen auf die Anker der Startseite.
+
+## Wolkensystem „Stich"
+
+Die Wolken sind handgesetzte Inline-SVGs im Sprite `<svg class="wk-defs">`
+oben im `<body>` (Details in `DESIGN_NOTES.md`). Kurzregeln:
+
+- Licht kommt **immer von oben links** – Wolken nie vertikal spiegeln.
+- Flache Basis, unregelmäßiges Oberteil; kein Reinweiß (`--wk-paper`,
+  `--wk-ink`, `--wk-shadow` in `:root`).
+- Fern-Ebene = nur Silhouette (`#wk-*-b`) im Dunstton, Mittel/Nah über
+  CSS-Variablen `--wk-inkop`, `--wk-x`, `--wk-heavy` gesteuert.
+- Trenner sind Wolkenbänke (`#wk-bank-d/-m/-low/-low2`) mit
+  `preserveAspectRatio="xMidYMax slice"` – sie beschneiden, statt zu
+  quetschen; unter 700 px greift die eigene Mobilbank.
+- Keine Wolke darf Text überdecken (Deko liegt auf z-index 0, Inhalt auf 2).
 
 ## Interaktive Elemente
 
 | Element | Verhalten |
 |---|---|
-| Deutschlandkarte (Abschnitt Standort) | Hover über Mittelfranken färbt die Region; Klick zoomt hinein und zeigt den Büro-Pin. Klick auf den Pin öffnet die Adresskarte mit Route. |
+| Kopfzeile | Farbton folgt der Tageszeit beim Scrollen (`--head-bg`), Höhe in `--header-h` |
-| Schritt-Pfad 1–2–3 (Abschnitt Ablauf) | Easter Egg: mit der Maus darüberfahren lässt die Schritte orange/gelb/grün aufleuchten. Auf Touch per Tap. |
+| Systemwetter | Statuskarte im Hero (Signature-Moment) |
-| Leistungs- und Sicherheitskarten | Klick klappt Detailtext auf. |
+| Deutschlandkarte | Mittelfranken klicken → Zoom, Pin → Bürokarte, „Route planen" |
-| Wolken | Schweben dauerhaft (langsamer Drift + Auf/Ab). |
+| Ablauf 1-2-3 | Easter Egg: leuchtet beim Überfahren mit der Maus |
+| Anfrage | Formular baut eine E-Mail und öffnet das Mailprogramm (kein Server nötig) |
 
-## Wolken-Kit
+## Noch offen (vor Livegang zwingend)
 
-Die Wolken kommen aus `wolken-kit.html` (Kupferstich-Stil). Beim Bearbeiten gilt:
+- **Telefon und E-Mail sind Platzhalter** (`0911 000 000`, `hallo@mfi-mittelfranken.de`).
-
+- **Impressum und Datenschutzerklärung enthalten `[PLATZHALTER: …]`** – Name,
-- **Kein** `preserveAspectRatio` auf den Wolken-SVGs setzen
+  Anschrift, USt-IdNr., Gesellschafter fehlen. In Deutschland Pflicht.
-- viewBox `0 0 300 150` (freie Wolke) bzw. `0 0 1440 104` (Band) nicht ändern
+- OG-Bild ist derzeit das Logo; ein echtes 1200×630-Bild wäre besser.
-- `.cl-base` bekommt keine Kontur
-- Die Wolken-IDs existieren genau einmal pro Seite und werden geteilt — nicht umbenennen
-- Animiert werden nur die Wrapper `.cl-drift` / `.cl-bob` / `.cl-bobb`
-
-## Noch offen
-
-- **Telefonnummer und E-Mail sind Platzhalter** (`hallo@mfi-mittelfranken.de`, `0911 000 000`)
-  und müssen vor dem Livegang ersetzt werden. Beide stehen im Footer-Abschnitt.
-- Impressum und Datenschutz fehlen noch (in Deutschland Pflicht).
-
-## Barrierefreiheit
-
-Alle Texte erfüllen WCAG AA im Kontrast (geprüft gegen den Himmelverlauf),
-Tastaturbedienung und sichtbarer Fokus sind vorhanden, `prefers-reduced-motion`
-schaltet alle Animationen ab.