MFI---Webseite/MFI

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.