Header · Desktop & Mobile.
Drei-Stufen-Aufbau, Mega-Menü, Mobile-Drawer.

Telefon + Live-Status oben links — Erreichbarkeit auf einen Blick Wer 2.000–10.000 € für einen Tresor ausgibt, ruft vorm Kauf gerne nochmal an. Nummer + Live-Status direkt im Header rausgezogen, weil das in High-Value-Shops einer der konsistentesten Conversion-Hebel ist. Wer anrufen will soll nicht erst nach „Kontakt“ suchen müssen. Außerhalb der Geschäftszeiten (Mo–Fr 08:00–16:30) blendet sich automatisch „Rückruf buchen“ ein und der Status springt auf „Gerade geschlossen“ — der Kontaktwunsch geht nie verloren.

Top-Bar im tink-Stil — heller Trust-Streifen mit echtem Siegel Heller Service-Streifen (#f7f7f8, ohne Trennlinie) über der Main-Bar: links Telefon + Live-Status, mittig das Trusted-Shops-Badge mit Original-Siegel und Bewertungsanzahl (Platzhalter „> X.XXX“, sobald die Zahl gesichert ist), rechts der Sprach-Toggle. Weitere Siegel (Google, Trustpilot) lassen sich in derselben Zeile ergänzen.

DE/EN-Toggle mit Flagge statt Sprachcode Internationale Kunden scannen Flaggen schneller als „EN“ oder „DE“. Klein gehalten (18×12 px) damit der Toggle nicht mit den Trust-Signalen konkurriert. Vorbereitet für einen EN-Storefront falls B2B-Export Thema wird — Skalierbarkeit ohne Re-Design.

Suchleiste groß, zentral, mit Smart-Placeholder Bei 1.000+ SKUs und Modellbezeichnungen wie „Hades 70“ oder „EN 1143-1“ ist Suche der dominante Findability-Path. Der Placeholder „Suche nach Tresor, SKU oder EN-Norm…“ zeigt dem Kunden direkt was geht — keine leere Box, kein Raten. Das Feld ist schlank im tink-Stil gehalten — heller Rahmen, dezenter Icon-Button statt klobigem Block — und teilt sich den einheitlichen Radius (--bt-radius) mit dem restlichen UI.

Icons MIT Beschriftung — nicht ohne Für eure Zielgruppe (40+, oft Erst-Online-Tresorkäufer) performen Icon-only Headers messbar schwächer. Die 11-px Caption kostet 24 px Vertical und gewinnt deutlich Erkennbarkeit. „Service“ ist als blau gefüllter Chip mit weißem Icon hervorgehoben (Kundenservice = euer Kern-USP), „B2B“ sitzt als eigenes Icon neben „Konto“ und führt in den Gewerbe-Bereich. Erste Position plus Farbe geben der Beratung den stärksten Scan-Anker.

Cart-Counter in Gelb — als einziger Akzent in der Main-Bar Das einzige Gelb in der Main-Bar — damit auffällig, aber nicht aggressiv. Dunkelblau auf Gelb statt umgekehrt, weil das genauso aussieht wie der ATC-Button auf der PDP. Gleicher Visual-Token = gleiche Funktion. Der Kunde lernt die Marke schneller wenn „Gelb“ immer dasselbe bedeutet.

Hauptnav fokussiert — nur die 5 Tresorarten, jede mit Dropdown-Pfeil Die Hauptnavigation trägt ausschließlich die fünf Kauf-Kategorien — jede mit Chevron, der das Mega-Menü ankündigt. „Geschäftskunden“ sitzt als eigenes „B2B“-Icon neben „Konto“ (Einstieg in den Gewerbe-Bereich mit Netto-Preisen), „Über uns“ wandert in den Footer. Kundenservice bleibt als blau hervorgehobener „Service“-Anker in der Main-Bar. So konkurrieren in der Hauptnav nur noch die fünf Kauf-Kategorien.

Tresorfinder als Conversion-Accelerator — gelb, rechts angedockt Drei Personas, drei mentale Modelle: wer schon weiß was er will, wer beraten werden möchte, und wer komplett unentschlossen ist. Der Tresorfinder bedient den dritten Pfad — geführter Fragebogen statt verlorene Suche. Gelb macht ihn auffindbar, rechts angedockt drängt er sich nicht in die Navigation. Standard-Pattern aus jedem ernsthaften Konfigurator-Shop.

Drei Spalten, KI-Empfehlungen vorne Spalte 1 öffnet sofort mit personalisierten Vorschlägen (basierend auf Verlauf, gespeicherten Filtern, Stufen-Affinität). Drei konkrete Produkte mit Preis, Stufe, Gewicht, Lieferstatus — der Kunde muss nicht mal tippen um den wahrscheinlich richtigen Tresor zu sehen. Predictive UX, wie sie große DTC-Brands seit Jahren machen.

Trend-Chip — meistgesuchter Begriff der Woche Beliebte Suchen kommen aus Live-Daten, nicht aus statischen Listen. Top-Trend hebt sich als gelber Chip mit ↑-Pfeil ab — gibt Erstbesuchern einen Einstieg ohne „HOT!“-Geschrei. Die Footer-Trendleiste in Dunkelblau wiederholt die Info beim Verlassen des Suchfelds — zwei Touchpoints für denselben Trend.

Quick-Paths mit klarer Farb-Hierarchie Tresorfinder gelb (Conversion-Akzent), Telefon dunkelblau (Trust-Anker), vier weitere Links als dezente Ghost-Buttons. Reihenfolge spiegelt die drei Beratungs-Modi: digital geführt → analog beraten → spezifisch recherchieren. Wer ankommt findet seinen eigenen Pfad sofort.

Beliebte Kategorien als 2×2-Tile-Grid Vier BT-Piktogramm-Tiles für die meistfrequentierten Tresorarten — ankert die Marke visuell als Tresor-Spezialist, nicht als breiter Sicherheitsshop. Hover invertiert (Dunkelblau-Bg, Gelb-Icon) — gleiche Treatment-Logik wie das gesamte Icon-System.

Foot-Bar mit Keyboard-Hints für Power-User Trend-Info + Tastatur-Shortcuts („↵ starten · esc schließen · ab 2 Zeichen live“). Power-User bekommen Speed, Casuals sehen den Trend — niemand verliert. Schließt das Panel visuell mit der Markenfarbe ab, saubere Klammer nach unten.

Ab 2 Zeichen schaltet das Layout auf Predictive um KI-Empfehlungen werden zu Live-Treffern (mit Highlight des Suchbegriffs), Chips zu Suchvorschlägen, Tiles zu passenden Kategorien. Position bleibt konstant — keine Layout-Sprünge die den Tippfluss stören. Standard-Pattern aus großen DTC-Shops, in DE noch erstaunlich selten sauber umgesetzt.