Header

Non-sticky Shop-Header mit Logo, Navigation und Warenkorb – Desktop und Mobile

Desktop Header

NON-STICKY · BG WHITE · LOGO LINKS · NAV RECHTS · WARENKORB · H-80PX

Produkte

ELEMENTE

Element	Token	Aufgelöst
Container	h-[80px], bg-[var(--ce-surface-card)]	80px, #FFFFFF
Border Bottom	border-b border-[var(--ce-border-default)]	1px solid #EDEEEF
Max Width	max-w-[1140px] mx-auto	1140px, centered
Padding	px-6	0 24px
Logo	w-[190px] h-auto	KCE-Type-T.svg, 190px wide
Nav Links	text-[15px] font-light text-[var(--ce-text-heading)]	Pressura 15px/300, #313337
Nav Link Padding	px-3 py-1.5 rounded-[6px]	6px 12px, radius 6px
Produkte Button	text-[13px] font-light bg-[var(--ce-surface-invert)] text-[var(--ce-text-on-invert)] rounded-[8px]	Pressura Mono 13px/300, bg #18181B, text #FFFFFF, radius 8px
Warenkorb	text-[15px] font-light text-[var(--ce-text-body)]	Pressura Mono 15px/300, #313337

STATES

Element	State	Änderung
Nav Link	hover	bg-[var(--ce-surface-muted)], transition 200ms
Nav Link	focus	outline-2 outline-[var(--ce-surface-invert)] outline-offset-2
Produkte Button	hover	bg-[var(--ce-surface-invert-hover)], transition 200ms
Produkte Button	focus	outline-2 outline-[var(--ce-surface-invert)] outline-offset-2

RESPONSIVE

BEZIEHUNGEN

Element	Beziehung
Produkte Button	= Button Small Grösse (px-3 py-1.5, text-[13px])
Nav Links	Pressura (nicht Mono) — einzige Stelle im Header
Warenkorb	Pressura Mono — gleiche Schrift wie Produkte Button

Agent-Checkliste

Alle Werte aus Spezifikationstabelle uebernommen

Responsive Breakpoints implementiert (mobile / md / xl)

Hover/Focus/Active/Disabled States implementiert

Dark Mode getestet (Token-Swap funktioniert)

Konsistenz mit Guidelines geprueft (Font-Zuordnung, Spacing-Grid, Farb-Tokens)

Keine verbotenen Patterns (Card-in-Card, eigene Shadows, Nicht-Grid-Spacing)