Konzept

Ein Radar-Konzept in drei Verfeinerungen (Run-Doktrin: Tiefe statt Streuung). „Leitstand" ist die immersivste Ausführung: Der Besucher betritt den Kontrollraum, in dem sein Zielmarkt überwacht wird. Das Canvas-Radar ist Umgebung (full-bleed, 100svh), nicht Illustration. HUD-Elemente (Status, Log-Ticker, Legende) rahmen die Kernaussage „Sie kontaktieren. Wir liefern das Timing."

Design-Token

Farb-Anker: Logo-Gradient (Azur #2AA6F2 → Royal #0B50E6, aus FlowQ_only_black_trans_cropped.png gesampelt). Day = farbiges Logo, Night = weißes Logo (FlowQ_all_white_trans_370x100.png). Logo unangetastet.

Typografie

• Space Grotesk 400/500/600/700 - Display + Copy
• IBM Plex Mono 400/500 - Instrument-Labels, Kicker, HUD
• Selbst gehostet als woff2 unter /assets/fonts/ (kein Google-CDN - DSGVO/LG-München-Risiko vermieden)

Radar-Engine (geteilt über alle Varianten)

/assets/radar.js - Canvas-2D-Engine, Vanilla JS, ~9 KB. Konfiguration dieser Variante:

• Hero: geometry:'full', intensity:0.85, sweepPeriod:10, maxBlips:15, centerX:0.62, centerY:0.44
• Kalibrier-Dial (Sektion Funktionsweise): geometry:'dial', intensity:0.75, sweepPeriod:8, maxBlips:9
• Mechanik: rotierender Sweep mit Phosphor-Trail (26-Stufen-Wedge), Blips flammen beim Sweep-Pass auf (Glow=1, Ring-Puls) und verglimmen exponentiell; endliche Lebensdauer → Despawn/Respawn (Timing-Metapher: Signale sind vergänglich)
• Variable Palette: 8 Signal-Kategorien + offener „… Ihr Markt"-Chip; radar.setCategories([...]) blendet Blip-Klassen live aus/ein (Kalibrierung pro Kunde als Interaktion)
• Interaktion: Pointer-Hover/Tap → Signal-Karte (Kategorie + relativer Zeitstempel + Quellentyp + „Gesprächseinstieg: vorbereitet") - bewusst schematisch, NIE erfundene Firmennamen (UWG/Real-Copy-Regel)
• Farben aus CSS-Vars (--radar-*) → Day/Night-Umschaltung restylt das Radar ohne Engine-Kenntnis
• A11y/Perf: prefers-reduced-motion → statisches Einzel-Render; IntersectionObserver pausiert offscreen; DPR≤2; Canvas mit role="img" + Beschreibung

Seitenarchitektur

• One-Pager, 7 Sektionen: Hero → 01 Unterschied (WER→WANN-Diptychon + Nicht-Karten) → 02 Funktionsweise (Kalibrier-Chips + Dial + Liefer-Muster) → 03 Zwei Linien → 04 Für wen / nicht → 05 Vertrauen → 06 Pilot → „FlowQ kann mehr"-Band → 07 FAQ → Footer (4 Spalten)
• Zweisprachig: DE default, EN via [lang]-Duale + CSS-Switch (html[data-lang]), Toggle persistiert (localStorage), ?lang=-Deep-Links + hreflang
• Day/Night: prefers-color-scheme-Default + Toggle + Persistenz; beide Modi first-class gestaltet
• cal.com als Brand-Overlay mit 2-Klick-Consent (iframe erst nach Klick, calLink flowq/flowq-orientierung, layout=month_view, Theme folgt Modus)
• Eigene Impressum-/Datenschutz-Seiten im Design (DE/EN); Datenschutz: Hosting=Netlify(Preview), Flag Produktion=fq-auto-02, Fonts lokal, keine Tracker
• SEO/AI: title/meta/OG/Twitter, JSON-LD (Organization+Service+FAQPage), sitemap.xml, llms.txt; noindex,nofollow als Ein-Zeilen-Flip pro Seite

Higgsfield-Assets

• atmo-night.webp - Phosphor-Ring-Atmosphäre (Seedream 4.5, 21:9), Hero-Underlay Night + Pilot-Panel
• atmo-day.webp - Papierweiß + Signal-Bogen (Seedream 4.5, 21:9), Hero-Underlay Day
• og.jpg - 1200×630-Crop aus der Night-Atmosphäre
• Radar-Mechanik selbst = Code, nie Bild (Run-Doktrin)

Rebuild

• Statisch: index.html, impressum/, datenschutz/, guide/, assets/, sitemap.xml, robots.txt, llms.txt - 1:1 auf beliebigen Static-Host kopierbar
• Go-live-Flips: (1) noindex,nofollow → index,follow in allen Seiten, (2) Canonical/OG/Sitemap-URLs auf flowq.de, (3) Datenschutz-Hosting-Abschnitt auf fq-auto-02 umstellen
• Kein Build-Step, keine externen Runtime-Dependencies, Fonts/Bilder lokal