# MFI – Mittelfranken Informatik: Website Statische Website, reines HTML/CSS/JavaScript – kein Framework, kein Build-Step, läuft auf jedem einfachen Webhoster per Datei-Upload. 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. ## Lokal öffnen `index.html` im Browser öffnen. Für eine realistischere Vorschau: ``` python -m http.server 8000 ``` und `http://localhost:8000` aufrufen. ## 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 `` oben im `` (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 | |---|---| | Kopfzeile | Farbton folgt der Tageszeit beim Scrollen (`--head-bg`), Höhe in `--header-h` | | Systemwetter | Statuskarte im Hero (Signature-Moment) | | Deutschlandkarte | Mittelfranken klicken → Zoom, Pin → Bürokarte, „Route planen" | | 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) | ## Noch offen (vor Livegang zwingend) - **Telefon und E-Mail sind Platzhalter** (`0911 000 000`, `hallo@mfi-mittelfranken.de`). - **Impressum und Datenschutzerklärung enthalten `[PLATZHALTER: …]`** – Name, Anschrift, USt-IdNr., Gesellschafter fehlen. In Deutschland Pflicht. - OG-Bild ist derzeit das Logo; ein echtes 1200×630-Bild wäre besser.