Konzept

Ein Radar-Konzept in drei Verfeinerungen (Run-Doktrin: Tiefe statt Streuung). „Puls" ist die energetischste Ausführung: Das Radar-Zentrum ankert RECHTS AUSSERHALB des Viewports (centerX 1.06) — der Sweep zieht als übergroßer Bogen durch den Hero, Signale tauchen aus der Tiefe des Marktes auf. Higgsfield-Aurora-Atmosphären (Ripple-Ringe Night, Silk-Wash Day) tragen die Stimmung, eine Scroll-Puls-Linie am linken Rand begleitet den Leser durch alle Sektionen. Gradient-Akzente (Cyan→Royal, aus dem Logo-Verlauf) statt Flat-Blau.

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

• Sora 400/600/700 — Display (mutigste Skalensprünge der drei Varianten)
• Inter 400/500 — Body
• IBM Plex Mono 400/500 — 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.95, sweepPeriod:9, maxBlips:26, centerX:1.06, centerY:0.34, radiusFrac:0.99 — Zentrum off-canvas rechts, der Sweep läuft als Riesen-Bogen durch den Viewport
• Kalibrier-Dial (Sektion Funktionsweise): geometry:'dial', intensity:0.8, sweepPeriod:8, maxBlips:10 + degreeLabels — hier zeigt sich das Vollinstrument
• Scroll-Puls-Linie (.pulse-line, fixed links, Gradient-Füllstand = Scroll-Fortschritt) — das Signal begleitet den Leser
• 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 — Ripple-Ring-Atmosphäre mit Volumen-Glow (Seedream 4.5, 16:9) — stärkster Bildeinsatz aller Varianten, Hero + Pilot Night
• atmo-day.webp — Silk-/Aurora-Wash auf Weiß (Seedream 4.5, 16:9), Hero + Pilot Day
• og.jpg — 1200×630-Crop aus der Ripple-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