FE × WFA
Design Direction
Version 1.0 — Draft
10. April 2026
REBRAND  ·  SHOP  ·  AUTOMATION

WORLD
FOR ATV.

Die Offroad-Manufaktur 2026+. Nicht der nächste Quad-Shop. Sondern die Adresse für Leute, die wissen wie ihr Fahrzeug heißt — und es so umrüsten wollen wie sie fahren.

Spezialist Tactile Industrial Werkstatt-Native Daten-getrieben Automatisiert

"Staub ist kein Schaden. Staub ist das Produkt."

v1.0
02 / Marken-Kern

Wer ihr seid.
Wer ihr nicht seid.

WFA hat kein Produktproblem. WFA hat ein Sichtbarkeits-Problem. Das Sortiment funktioniert, der Markt wächst — aber niemand erkennt euch wieder. Das löst der Rebrand. Nicht durch lautere Werbung, sondern durch eine schärfere Identität.

Markenkern in einem Satz
Wir sind die Offroad-Manufaktur für ATV / UTV / Quad — pragmatisch, fachlich, aus derselben Werkstatt wie ATV Nation.

WFA verkauft Zubehör nicht als Lifestyle, sondern als Hardware. Wir kennen die Fahrzeuge. Wir kennen den Schlamm. Und wir kennen die Leute, die fahren — weil unsere Schwester-Firma ihnen gerade das Fahrzeug verkauft hat.

Ehrlich

"Wenn's nicht hält, sagen wir's."

Wir verkaufen nur was wir selbst kaufen würden. Produktbeschreibungen mit echten Maßen, echtem Gewicht, echtem Material. Kein Marketing-Sprech.

Praktisch

"Passt, funktioniert, fertig."

Du suchst kein Erlebnis. Du suchst ein Teil, das passt und morgen montiert ist. Unsere Seite macht genau das schnell.

Verbunden

"Aus derselben Werkstatt wie ATV Nation."

Unsere Schwester-Firma verkauft die Fahrzeuge. Wir kennen die Modelle, weil wir sie täglich sehen. Cross-Sell ist natürlich, nicht aufgesetzt.

Offroad-Native

"Staub ist nicht der Schaden. Staub ist das Produkt."

Schlamm, Schnee, Alpen, Bauernhof — unser Zubehör entsteht für die Realität, nicht für Showroom-Fotos.

Was WFA NICHT ist
03 / Bildwelt

Bilder die Schmutz
aushalten.

Drei Bild-Kategorien, klare Regeln. Produktfotos für Produkt­seiten neutral, In-Use für Landing & Social, People für Newsletter & Magazin. Alle drei mit demselben Farb-Grading.

01Hero · Action / In-Use
02Detail · Material
03Werkstatt / Studio
04Fahrer · Portrait
05Landschaft · Alpen
01

Produktfotos · Neutral

Weißer Hintergrund (Stone-50), 45° oder Frontal, scharfe Detail-Schatten. Für PDP & Listing. Keine Lifestyle-Inszenierung.

02

Produkt · In-Use

Zubehör am echten Fahrzeug. Realer Untergrund. Natürliche Tageslicht-Stimmung. Teal-Orange-Grading, dezent. Für Hero, Landing, Social.

03

People · Community

Echte Fahrer am Fahrzeug. Keine Models. Viele davon UGC mit Permission. Für Newsletter, Magazin, About-Page.

✓ DO
  • Staub und Schlamm IMMER drin lassen
  • Produkte am echten Fahrzeug zeigen, nicht freigestellt
  • Tiefe Schatten, hoher Kontrast, kühle Schwarz-Tiefen
  • Teal-Orange Grading subtil verstärken
  • Werkstatt-Texturen (Stahl, Beton, Schmieröl) als Hintergrund
  • Vertikale Crops für Social, breite Crops für Hero
✕ DON'T
  • Stock-Fotos mit Models in sauberer Outdoor-Kleidung
  • Pastell-Filter oder Instagram-Sättigung
  • Glatt-polierte Studio-Fotos ohne Kontext
  • Sonnenuntergangs-Klischee mit Lens-Flares
  • Drohnen-Aufnahmen ohne Subjekt-Bezug
  • Logo-Wasserzeichen auf Produktbildern
04 / Farbsystem · Brand Scales

Eine Palette,
die hält.

Schwarz dominant, Rot als Signalfarbe, Tief-Blau für Vertrauen und B2B, Dust-Orange als seltener Akzent. Jede Skala mit allen Stufen — nicht nur als Brand-Farbe sondern als Production-System für Hover, Active, Disabled, Background-Tints.

Ink
Stone-900
#0A0A0C
DOMINANT
Signal
Red-500
#D12919
CTA / AKZENT
Trust
Navy-700
#0E2C52
SEKUNDÄR
Dust
Dust-500
#E68A2C
SELTENER AKZENT

Signal Red — Primary CTA

Buttons · Brand Marks · Highlights
50
FFF1ED
100
FFD9CC
200
FFB59C
300
FF8A6B
400
F16545
500 ★
D12919
600
B11E12
700
8E160D
800
6B100A
900
3F0805

Industrial Navy — Secondary / Trust

B2B · Links · Trust-Sektionen
50
EDF2F8
100
D0DCEB
200
9DB6D4
300
6E91BB
400
436FA0
500
234F85
600
163964
700 ★
0E2C52
800
081D38
900
03101F

Stone — Neutrals (warm)

Backgrounds · Text · UI-Strukturen
0
FFFFFF
50
FAFAF8
100 ★
F1F0EC
200
E4E2DC
300
C9C6BD
400
95918A
500
6B6863
600
4A4845
700
2F2E2C
800
18181A

Dust Orange — Tertiary Accent

In-Use Highlights · Saison-Tags · sparsam
50
FFF4E6
100
FCE3BF
500 ★
E68A2C
600
B96B1B
700
8C4F12
selten verwenden
max 5%
05 / Farbsystem · States & Semantic

Hover, Active,
Error — alles definiert.

Eine Palette ist erst tauglich für die echte Webseite, wenn jeder Zustand definiert ist. Hier sind die fünf interaktiven States des Primary Buttons + die vier semantischen Farben + das Verteilungs-Verhältnis.

Primary CTA — alle Interaktions-States
DEFAULT
Default
red-500 / #D12919
HOVER
Hover
red-600 / #B11E12
ACTIVE
Active / Pressed
red-700 / #8E160D
DISABLED
Disabled
stone-300 / #C9C6BD
LOADING
Loading
red-500 @ 70%
✓ Success
ok-500 / #1FA46A

"Auf Lager", "Bezahlt", "Versendet", Form-Validation positiv

! Warning
warn-500 / #F2A63B

"Nur noch 2 verfügbar", "Lieferung 7-10 Tage", Achtung-Hinweise

✕ Error
err-500 / #D12919

"Nicht kompatibel", "Pflichtfeld", Form-Validation negativ. Identisch mit Brand-Red.

i Info
info-500 / #234F85

Hinweise, B2B-Marker, Trust-Bar, "Wusstest du schon"

45% NEUTRAL
25% RED
20% NAVY
8% INK
2%

45-25-20-8-2 Regel (Rot-Navy-First). Die Original-Brand-Farben Rot + Navy bleiben primär und sollen das visuelle Gewicht des Shops tragen — nicht Ink. 45% Neutral (Stone-Tones als Background und Luft), 25% Signal-Rot (dominante Brand-Farbe — CTAs, Hero-Akzente, Preis, Hervorhebungen, Topbar), 20% Trust-Navy (Header, B2B-Blöcke, sekundäre Buttons, Footer, Magazin-Bereiche), 8% Ink-Schwarz (nur Typografie + feine Trennlinien — NICHT mehr als Hero-Hintergrund), 2% Dust-Orange (saisonale Akzente). Rot UND Navy dürfen gleichzeitig auf einem Screen sein — sie sind das Markenzeichen. Ink bleibt ausschließlich Text-Rolle.

Anwendung — wo welche Farbe

SALE / NEU
red-500
B2B EXKLUSIV
navy-700
SAISON
dust-500
AUF LAGER
ok-500
NUR 2X
warn-500
PASST AUF
outline ink
06 / Typografie

Bebas baut.
Barlow spricht.

Identisch zu Brunner Jürgen GmbH — schafft visuelle Familienzugehörigkeit der beiden Schwester-Firmen. Bebas Neue für Display, Barlow für Body, Barlow Condensed für UI-Labels und B2B-Tabellen. Alle drei kostenlos via Google Fonts.

Master Type Showcase

WORLD
FOR ATV.

BEBAS NEUE / 88PX LINE-HEIGHT 0.9 LETTER-SPACING 0.005EM UPPERCASE
Display Font
Bebas Neue
UNTERFAHR­SCHUTZ.
4MM ALU.
HEADLINES · NUMBERS · UI-BIG GOOGLE FONTS · FREE
Body Font
Barlow
Hochfester Aluminium-Unterfahrschutz für CFMoto CForce 625. 4 mm Materialstärke, Eloxierung in Schwarz, exakter Sitz für Modelle ab Baujahr 2022. Wir testen jeden Schutz selbst — nicht in der Werkstatt, sondern auf dem Hof.
BODY · UI · FORMS GOOGLE FONTS · FREE

Typo-Scale für die Webseite (Desktop-Basis 16px)

Display
Hero Headline
Bebas Neue 400
96–48 px
H1
Page Title
Bebas Neue 400
64–36 px
H2
Section Headline
Bebas Neue 400
48–28 px
H3
Card Title / Subhead
Bebas Neue 400
32–22 px
H4 / UI
UPPERCASE LABEL · FILTER · SECTION
Barlow Condensed 700
14 px
Body L
Lead-Absatz, Produkt-Intro, längere Texte mit Lesefluss-Priorität.
Barlow 400 · LH 1.65
14 px
Body
Standard-Body. Produktbeschreibungen, FAQ, Magazin-Text. Optimiert für Bildschirm-Lesefluss.
Barlow 400 · LH 1.6
12 px
Body S
Specs-Tabelle, Footer, sekundäre Info, Form-Hints, Disclaimer.
Barlow 400 · LH 1.55
11 px
Caption
EYEBROW · TAG · OVERLINE
Barlow Cond 700 · LS 0.18em
9 px
07 / UI-Elemente

Buttons, Inputs,
Cards — real states.

Alles was die Seite braucht, in den Zuständen die im echten Betrieb auftreten. Direkt übernehmbar für Elementor / Custom CSS.

Buttons — alle Varianten & States

Primary · Default
Jetzt kaufen
Primary · Hover
Jetzt kaufen
Primary · Active
Jetzt kaufen
Primary · Disabled
Ausverkauft
Primary · Loading
Lädt …
Secondary · Default
Mehr erfahren
Secondary · Hover
Mehr erfahren
Ghost · Default
→ Zur Kategorie
Ghost · Hover
→ Zur Kategorie

Form-Inputs — alle Validation-States

Wir senden keinen Spam. Versprochen.
✓ Email validiert
✕ Bitte gültige Email-Adresse eingeben

Product Cards — Listing

NEU
Unterfahrschutz
CForce 625
Alu Skid Plate 4mm
CFMoto · ab 2022 · 6,8 kg
€ 289,–
→ Kaufen
AUF LAGER
LED-Technik
Light Bar 22"
120W Combo
Universal · IP67 · Halterung inkl.
€ 149,–
→ Kaufen
SAISON
Winterdienst
Schneeschild
150 cm Universal
Stahl · Hubgestänge · 28 kg
€ 599,–
→ Kaufen
08 / Layout-Prinzipien

Klare Hierarchie
schlägt Mosaik.

Eine ATV-Käuferin sucht ein Teil — nicht ein Erlebnis. Conversion-optimierte Shops folgen einer klaren Top-Down-Hierarchie. Bento-Layouts wurden geprüft, aber im Hauptfluss verworfen.

Empfehlung — Standard-Hierarchie

Hero → Fit-my-Bike → Top-Kategorien → Bestseller → Magazin-Teaser → Trust-Bar → Newsletter → Footer. Vertikal, klar getrennte Sektionen, EIN dominanter CTA pro Sektion.

Nicht im Haupt-Flow — Bento

Mosaik-Tiles fragmentieren den Blick und konkurrieren um Aufmerksamkeit. Gut für Portfolios, schlecht für Conversion. WFA-Käufer sind aufgaben-orientiert, nicht stöbernd.

Verdict — Bento-Layout

Bento ist 2026 ein dominanter Trend, aber er ist für e-Commerce nicht geeignet, wenn das Ziel "Verkauf abschließen" heißt. ATV-Käufer scrollen nicht durch ein Magazin — sie suchen ein konkretes Teil. Bento splittet die Aufmerksamkeit und schwächt den Hauptpfad.

Faustregel: Bento ja, wenn der Nutzer noch nicht weiß was er will. Bento nein, wenn der Nutzer ein Ziel hat und du ihn dahin bringen sollst.

01
Design-Richtung 01 / 03
OFFROAD
MANUFAKTUR.

Dark-Mode-First. Bebas-Headlines BIG, Grid-strukturiert, taktil. Wie ein Werkstatt-Katalog der Stahl, Schweiß und Diesel atmet — aber mit moderner Webhandwerk-Qualität.

MoodIndustrial · Heavy
ModeDark Default
ZielpersonaA — Freizeit-Abenteurer
Conversion-HebelBrand-Authority
worldforatv.de
FRÜHJAHRS-AKTION · BIS 30. APRIL

BAUE DEIN
FAHRZEUG.

Hochwertiges Zubehör für ATV, UTV und Quad. Made for Schlamm, Schnee, Alpen und Feldweg.

FIT-MY-BIKE CFMoto ▾ CForce 625 ▾ 2023 ▾ SUCHEN →
01
Schutz
Unterfahr · Kotflügel
02
Licht
LED · Bars · Spots
03
Transport
Koffer · Reling
04
Winter
Schild · Streuer
Charakter

Tief, dunkel, taktil. Bebas-Headlines bis 72 px, dünne Grid-Lines, harte Schatten, rote Akzent-Lichter. Erinnert an Werkstatt-Wand und Maschinen-Display.

Best Practices

Iron Baltic, Klim, Athena Motor, Carlsbad Wheels, KTM Powerwear. Dark e-Commerce funktioniert nur mit hartem Kontrast und großen Type-Sizes — sonst wirkt es trüb.

Risiken

Dark Mode reduziert Conversion auf älteren Geräten leicht (~3-7%). Persona B (Landwirt 50+) bevorzugt hellere Layouts. Lösung: Theme-Toggle (Light/Dark) im Header.

02
Design-Richtung 02 / 03
GARAGE
EDITORIAL.

Light-Mode-First, Magazin-inspiriert. Storytelling vor Sortiment, Content vor Catalog, Frauen-Segment direkt angesprochen. Editorial Layouts mit großen Bildräumen und ruhiger Typo.

MoodEditorial · Magazin
ModeLight Default
ZielpersonaC — Frau / Familie / SEO
Conversion-HebelContent + Trust
worldforatv.de
DE · EN
EDITORIAL · ISSUE 04
FRÜHJAHRS-EDITION

Dein Quad
nach dem
Winter.

Acht Teile, ein Wochenende, ein Fahrzeug das wieder fährt. Unsere Empfehlung — getestet auf echtem Untergrund.

AUS DEM MAGAZIN
Ratgeber
Welcher Unterfahrschutz für CFMoto CForce 625?
Frauen im Offroad
Sarah und ihr Loncin XWolf 1000 — Portrait
Test
Iron Baltic vs. Rival — der ehrliche Vergleich
Charakter

Hell, ruhig, viel Whitespace. Editorial Hierarchien, große Hero-Bilder mit Gewicht. Bebas-Headlines kleiner als in Direction 01 (max 48 px), Barlow-Body mit hohem Lese­komfort.

Best Practices

Yeti Coolers Magazin-Bereich, Snow Peak, Filson, Kuiu, Aether Apparel. Wenn Marken Geschichten brauchen statt nur Sortiment, ist editorial das richtige Format.

Risiken

Höherer Content-Aufwand (1 Story/Woche). Conversion pro Klick langsamer, dafür LTV höher. Persona A (Power-Buyer) findet es zu "fluffig" — Lösung: Shop-Button in Hero immer sichtbar.

03
Design-Richtung 03 / 03
FIT &
FORGE.

Function-First. Fit-my-Bike als Hero, technische Daten dominieren, dichte Card-Grids. Wie ein Hardware-Store für Profis — minimale Brand-Inszenierung, maximale Produkt-Information.

MoodTactical · Technisch
ModeMixed (Header dunkel)
ZielpersonaB + D — Utility & B2B
Conversion-HebelSpeed-to-Cart
worldforatv.de
FAHRZEUG WÄHLEN — RESULTATE SOFORT

FIT-MY-BIKE

MARKE ▾
CFMOTO
MODELL ▾
CFORCE 625
BAUJAHR ▾
2023
KATEGORIE ▾
ALLE
SUCHEN

42 PRODUKTE GEFUNDEN · GESPEICHERT IN „MEINE GARAGE"

FÜR DEINEN CFORCE 625
FILTER · SORTIEREN · 42 ARTIKEL
✓ PASST
IRON BALTIC
Skid Plate 4mm
Alu · 6,8 kg · DE-Lager
€ 289,–
✓ PASST
RIVAL
Bumper Stahl
Stahl · 11 kg · 2-3 T
€ 199,–
✓ PASST
KOSO
Light Bar 22"
120W · IP67 · Combo
€ 149,–
✓ PASST
WFA EXKLUSIV
Hard Case 65L
PE · IP65 · Schloss
€ 169,–
Charakter

Funktion vor Form. Header-Bereich dunkel mit Fit-my-Bike als Mission-Control. Body hell, dichte Karten, technische Specs sofort lesbar. Inspiriert von Aviation-Parts-Shops.

Best Practices

Aircraft Spruce, McMaster-Carr, JEGS High Performance, Summit Racing, Monstera Sport. Funktioniert für entscheidungs­schnelle Käufer und B2B-Wiederbestellungen.

Risiken

Wenig Brand-Charakter — austauschbar wenn Logo entfernt. Kein "WOW" im Hero. Lösung: starke Brand-Tonalität in Magazin-Bereich auslagern, Header trotzdem mit Bebas-Marke.

12 / Vergleich & Empfehlung

Drei Wege.
Eine Empfehlung.

Jede Richtung funktioniert — aber jede für eine andere Käufergruppe und eine andere Phase. Hier die Matrix nebeneinander, gefolgt von der FE-Empfehlung.

01 OFFROAD MANUFAKTUR
02 GARAGE EDITORIAL
03 FIT & FORGE
Mood
Dark, taktil, schwer, Werkstatt-Stahl
Hell, editorial, ruhig, Magazin-Whitespace
Tactical, technisch, dicht, Hardware-Store
Hauptpersona
A — Freizeit-Abenteurer (Persona-Kern)
C — Frau/Familie + SEO-Suchverkehr
B — Landwirt/Utility + D — B2B-Händler
Conversion-Hebel
Brand-Authority + Wiedererkennung
Content-Vertrauen + LTV / Wiederkauf
Speed-to-Cart + Kompatibilitäts-Sicherheit
Stärke
Stärkste Marken-Differenzierung im Segment
SEO-Autorität, Frauen-Segment, Press-würdig
Höchste B2B-Eignung, schnellste Conversion
Schwäche
Persona B (Landwirt 50+) findet's "düster"
Höherer Content-Aufwand laufend
Wenig Brand-Charakter, austauschbar
Aufwand Build
Mittel
Hoch (mehr Custom-Layouts)
Mittel-Niedrig (Standard-Patterns)
Aufwand Betrieb
Niedrig (visuelle Konsistenz hält)
Hoch (1 Story/Woche minimum)
Niedrig (datenpflege via PILON)
FE-Empfehlung

01 +
Hero von 03.

Direction 01 (Offroad Manufaktur) als Marken-Kern, ergänzt durch das Fit-my-Bike-Hero von Direction 03 als persistente Sektion direkt unter dem Hero. Direction 02 fließt als Magazin-Bereich ein (Subdomain oder /magazin Pfad). So entsteht ein Shop, der für alle drei Personas funktioniert: Brand-Identität bleibt stark (01), B2B + Power-Buyer kommen schnell zum Ziel (03), Content-Strategie und Frauen-Segment laufen über das Magazin (02). Eine Codebasis, drei Geschwindigkeiten.

13 / Operations-Engine

Martin's Tag —
von 8h auf 1,5h.

Sourcing, Logistik, Versand, Kommunikation, Produktpflege. Heute alles manuell. Ab dem Relaunch automatisiert: DHL Labels drucken sich beim Bezahleingang selbst, Sourcing-Wünsche kommen als wöchentlicher Report, Newsletter und Reviews laufen ohne Eingriff.

Order-to-Print Flow — bei jeder bezahlten Bestellung automatisch

01
Bezahlt

Mollie meldet Status „processing" an WooCommerce.

02
Label

Shiptastic-DHL ruft DHL GK-API, generiert Label-PDF + Tracking.

03
Print

WC-PrintNode-Connector schickt PDF an PrintNode-Cloud.

04
Drucker

Brother QL-820NWB im Lager druckt Label sofort. Martin packt & klebt.

Versand-Automation
Shiptastic + DHL

Im Germanized-Pro-Paket enthalten. DHL Paket, Warenpost, International, Retoure, Packstation. DHL Geschäftskundenvertrag erforderlich (kein Monatsbeitrag).

€ 0 zusätzlich
Auto-Print
PrintNode

Cloud-Service + Desktop-Agent auf Mac Mini. Brother QL-820NWB als Etikettendrucker (62 mm Endlos-Rolle, WLAN). Kein Klick, kein Dialog.

€ 12 / Monat + € 200 Drucker einmalig
Sourcing-Loop
Judge.me + PILON

Custom Review-Frage „Was würdest du gerne als nächstes sehen?" + FluentCRM Survey 20 Tage nach Kauf + PILON wöchentlicher Sourcing-Report an Martin.

€ 15 / Monat (Judge.me Awesome)

Aus 8h Operations
werden 1,5h.

~2 Min/Order × 50 Orders/Tag = 1,6h pro Tag zurück an Martin. OPEX-Aufschlag: nur €27/Monat. Hardware einmalig: €200. Amortisation: 1 Woche.

+€27
/MO
−1,6h pro Tag
14 / Roadmap & Investment

Vom Strategie-Doc
zum Launch.

Zielpunkt 20. Mai 2026 — vor dem Offroad-Saisonstart. Sechs Phasen, Brunner-Stack als Beschleuniger, Lexware-Integration als Pflicht-Meilenstein.

01
KW 15–17 · 2 Wochen

Freigabe & Setup

Kick-off mit Martin + Jürgen, Strategie-Freigabe, Brand-Direction-Wahl, Lexware-Sandbox-Test, Staging bei Hostinger.

02
KW 17–19 · 3 Wochen

Shop-Rebuild

Plugin-Stack identisch Brunner, Germanized + lexoffice-Addon, Mollie, FluentCRM, Design-Umsetzung, Custom Variation Swatches, Fit-my-Bike MVP, 310 Produkte migrieren.

03
KW 19–20 · 1 Woche

Content-Engine & Operations

FluentCRM-Template, 4 Starter-Blog-Posts, Social-Pipeline (Buffer/Make), 4-Wochen Pre-Launch Content. PrintNode + Brother QL-820NWB im Lager installiert. DHL GK-Vertrag aktiviert.

04
KW 20–21 · GO-LIVE

Launch & Lexware Live

Migration Hostinger → IONOS, SEOPress aktiviert, Trusted Shops/judge.me live, 48h Lexware-Dry-Run, Domain-Switch, 20. Mai Launch mit Frühjahrs-Aktion.

05
Juni–September 2026

Skalieren & Messen

Wöchentlicher Content-Rhythmus, erste B2B-Kunden, YouTube-Kanal, monatliche KPI-Reviews. Sourcing-Reports an Martin.

06
Q4 2026

Ausbau

Optional WPML, Loyalty-Programm, B2BKing Pro, Weihnachts-Kampagne (Kids-ATV-Zubehör als Geschenk), Bundle-Crosspollination mit ATV Nation.

Setup einmalig
12,4K
Strategie + Brand + Shop + Migration + Content-Engine. Range 10–14k je nach Umfang.
Laufend pro Monat
500
Plugin-Lizenzen + Hosting + judge.me + PrintNode + FE-Retainer Content-Engine.
ROI 12 Monate
+ 143%
Konservativ. Inkl. B2B-Hebel über Brunner-Händlernetz wahrscheinlich +180–220 %.

Bereit, das aufzuräumen.

Dieses Dokument ist die Diskussions-Grundlage für das Kick-off mit Martin und Jürgen. Nach Freigabe gehen wir in Phase 1 — Zugänge, Sandbox, Brand-Direction-Pick aus 01 / 02 / 03.

FE — FuturElements  ·  10. April 2026  ·  Eduardo Mehl  ·  futurelements.eu