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