Webklar/docs/relaunch

Material für den Relaunch

Dieses Verzeichnis gehört zur Spezifikation docs/superpowers/specs/2026-10-01-relaunch-design.md.

Deutschland-Karte

• assets/deutschland-umriss.svg – Umriss von Deutschland mit rotem Punkt auf dem Serverstandort Falkenstein/Vogtland (Sachsen).
  • Ein <path> (nur Linie, stroke="currentColor", vector-effect="non-scaling-stroke") plus ein <circle> (#e5251c), viewBox 0 0 663 892, ca. 7 KB.
  • Quelle: Natural Earth, „Admin 0 – Countries“, Maßstab 1:10 m. Gemeinfrei (Public Domain): „All versions of Natural Earth raster + vector map data … are in the public domain.“ Ein Quellenhinweis ist nicht nötig („Made with Natural Earth.“ ist freiwillig).
  • Behalten: Festland, Rügen, Usedom, Fehmarn, Sylt, Föhr/Amrum. Vereinfacht (Douglas-Peucker, ca. 0,9 km Toleranz).
  • Projektion: Lambert-Azimutal-flächentreu (wie ETRS89-LAEA), Mitte 10° O / 52° N, Kugelradius 6371 km. 1 Einheit ≈ 1 km. Geprüft: Berlin–München 504 km auf der Karte wie in echt.
  • Punkt Falkenstein (50,477 N, 12,371 O): cx = 469.6, cy = 520.5 (70,8 % von links, 58,4 % von oben; liegt im Festland, 13,9 km von der tschechischen Grenze).

Weitere Punkte setzen (z. B. Büro Winnweiler, ca. 49,567 N, 7,850 O – Koordinaten vor Einbau prüfen):

const R = 6371, lon0 = 10 * Math.PI / 180, lat0 = 52 * Math.PI / 180;
// Grad -> SVG-Koordinaten in der viewBox 0 0 663 892
function project(lon, lat) {
  const l = lon * Math.PI / 180, p = lat * Math.PI / 180;
  const k = Math.sqrt(2 / (1 + Math.sin(lat0) * Math.sin(p) + Math.cos(lat0) * Math.cos(p) * Math.cos(l - lon0)));
  const x = R * k * Math.cos(p) * Math.sin(l - lon0);
  const y = R * k * (Math.cos(lat0) * Math.sin(p) - Math.sin(lat0) * Math.cos(p) * Math.cos(l - lon0));
  return [x + 289.794 + 12, 341.920 - y + 12];
}
project(12.371, 50.477); // -> [469.6, 520.5] Falkenstein

Für das Zeichnen des Umrisses per stroke-dasharray das Attribut vector-effect="non-scaling-stroke" entfernen und pathLength="1" setzen (sonst stimmen die Strichlängen nicht).

Kundenportal-Screenshots

assets/portal/ – Aufnahmen des echten Kundenportals (project.webklar.com) mit erfundenen Demodaten („Bäckerei Sonnenschein“, Rechnungsbeträge, Chatverlauf). Es sind keine echten Kundendaten enthalten. Das Brotfoto ist eine selbst gezeichnete Grafik, die Demo-Website der Bäckerei eine selbst erstellte Seite; beides sind keine Stock- oder KI-Bilder. Aufgenommen am 2026-10-01 mit dem damaligen Stand des Portals.

Vor dem Livegang neu aufnehmen (das Aufnahme-Werkzeug liegt intern beim Inhaber): wenn sich das Portal sichtbar ändert, und damit Auftrags-, Rechnungs- und Kundennummern offensichtlich erfunden aussehen (z. B. Auftrag 1001, Rechnung 2026-0001). Die heutigen Nummern sind zwar erfunden, wirken aber wie echte Zählerstände.

Datei	Größe (px)	Inhalt
00-uebersicht.png	2360 × 1229	Übersicht aller Aufnahmen (nur zur Orientierung, nicht ausliefern)
desktop-1-projekte.webp	2880 × 1800	Projektübersicht mit Live-Vorschau der Website
desktop-2-fortschritt.webp	2880 × 1800	„Was wir zuletzt erledigt haben“ – Fortschritt in Klartext
desktop-3-chat.webp	2880 × 1800	Chat mit Sprachnachricht und Datei
desktop-3b-chat-foto.webp	2880 × 1800	Chat mit Foto
desktop-4-rechnungen.webp	2880 × 1800	Rechnungen
desktop-5-stundenkonto.webp	2880 × 1800	Stundenkonto des Wartungs-Abos (nur nach Freigabe zeigen)
desktop-6-funktionen.webp	2880 × 1800	Funktionen (Terminplaner/Analyse dort sind Platzhalter – nicht bewerben)
desktop-7-news-pinnwand.webp	2880 × 1800	News-Pinnwand mit Vorschau
phone-0-login.webp	780 × 1688	Anmeldung (Handy)
phone-1-projekte.webp	780 × 1688	Projekte mit Vorschau (Handy-App)
phone-1b-tabbar.webp	780 × 192	untere Tab-Leiste der Handy-App
phone-2-projekte-lang.webp	780 × 5428	lange Projektseite zum Durchscrollen im Handy-Rahmen
phone-3-projektdetails.webp	780 × 1688	Projektdetails mit letzten Änderungen
phone-4-chat.webp	780 × 1688	Chat
phone-4b-chat-foto.webp	780 × 1688	Chat mit Foto
phone-5-rechnungen.webp	780 × 1688	Rechnungen
phone-6-vertraege.webp	780 × 1688	Verträge (nur nach Freigabe zeigen)
phone-7-news.webp	780 × 1688	News-Pinnwand bearbeiten
phone-8-news-vorschau.webp	780 × 1688	News-Pinnwand, Vorschau „So sehen es alle“

Die Handy-Aufnahmen haben oben 47 px und unten 34 px Rand für Uhrzeit und Home-Leiste (Safe Area). Die Dateien sind Rohexporte in doppelter Auflösung; für die Website verkleinern (Budgets in der Spec, Abschnitt 9.5).