MFI-Webseite: erste Fassung als eigenständige index.html

Komplette Seite in einer Datei, ohne externe Abhängigkeiten:
Schriften, Logo, Wolken-SVGs und Deutschlandkarte sind eingebettet.

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

.gitignore

@@ -0,0 +1,6 @@
+# nichts Temporäres oder Systemspezifisches ins Repo
+Thumbs.db
+desktop.ini
+.DS_Store
+*.bak
+index.backup.html

README.md

@@ -0,0 +1,51 @@
+# MFI – Mittelfranken Informatik · Webseite
+
+IT-Systemhaus aus Wittelshofen. Managed Services, Netzwerk, Microsoft 365, IT-Sicherheit.
+
+## Aufbau
+
+Die komplette Seite ist **eine einzige Datei**: `index.html`.
+Alles ist darin eingebettet — es gibt bewusst keine externen Abhängigkeiten:
+
+- **Schriften** (New Rocker, IM Fell English, IBM Plex Mono, Stack Sans Headline)
+  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
+
+`index.html` im Browser öffnen — das ist die Vorschau. Zum Bearbeiten die Datei
+in einem Editor öffnen. Kein Build-Schritt, kein `npm install`, kein Server nötig.
+
+## 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. |
+| 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. |
+| Leistungs- und Sicherheitskarten | Klick klappt Detailtext auf. |
+| Wolken | Schweben dauerhaft (langsamer Drift + Auf/Ab). |
+
+## Wolken-Kit
+
+Die Wolken kommen aus `wolken-kit.html` (Kupferstich-Stil). Beim Bearbeiten gilt:
+
+- **Kein** `preserveAspectRatio` auf den Wolken-SVGs setzen
+- viewBox `0 0 300 150` (freie Wolke) bzw. `0 0 1440 104` (Band) nicht ändern
+- `.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.