Konzept

Ein Radar-Konzept in drei Verfeinerungen (Run-Doktrin: Tiefe statt Streuung). „Kartenwerk" ist die ruhigste, editorialste Ausführung - maximale 5-Sekunden-Klarheit für den Geschäftsführer: links die typografische Kernaussage, rechts das Radar als rundes, eingefasstes Präzisionsinstrument (Bezel, Skalenring, Peilungs-Readout). Schweizer Ruhe statt Kontrollraum-Immersion; dasselbe Instrument, andere Fassung.

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

• Inter Tight 500/600/700 - Display
• Inter 400/500/600 - Body
• JetBrains Mono 400/500 - Labels, Kicker, Readouts
• 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:'dial', intensity:0.62, sweepPeriod:12, maxBlips:9, radiusFrac:0.98 + degreeLabels - gefasstes Instrument im Split-Hero, langsamer Sweep, weniger Blips (chirurgisch statt immersiv)
• Kalibrier-Dial (Sektion Funktionsweise): geometry:'dial', intensity:0.55, sweepPeriod:10, maxBlips:8
• Live-Peilungs-Readout unter dem Hero-Dial (#bearing, liest hero.sweepA pro Frame, tabellarische Ziffern, reduced-motion: ausgeblendet)
• 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: Split-Hero (Typo links, Dial rechts, „Jedes Signal"-Faktenzeile) → 01 Unterschied → 02 Funktionsweise (Kalibrier-Chips + Dial) → 03 Zwei Linien → 04 Für wen / nicht → 05 Vertrauen → 06 Pilot → „FlowQ kann mehr"-Band → 07 FAQ → Footer (4 Spalten). Editorial-Marginalien: outlined Sektions-Numerale, Rounded-Cards, Hairlines statt Glow.
• 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

• macro-night.webp - dunkles Glas mit Phosphor-Kante (Seedream 4.5, 3:2), Pilot-Panel Night
• macro-day.webp - Milchglas mit Lichtbrechung (Seedream 4.5, 3:2), Pilot-Panel Day
• og.jpg - 1200×630-Crop aus der Day-Signal-Bogen-Atmosphäre
• Hero bewusst OHNE Foto-Layer - Materialität kommt aus Papier-Grain (SVG-Noise) + Licht-Wash (CSS), das Instrument bleibt die einzige Bühne
• 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