Image

Einheitliche Bilddarstellung mit weichen Ecken und definierten Seitenverhältnissen je Kontext

Basic Image

Alle Bilder verwenden rounded-md (border-radius 6px)· object-cover

rounded-md, object-cover, aspect-ratio 4:3

Bild + Caption darunter· Caption: Pressura Mono 12px, ce-zinc-500

Gaengige Seitenverhaeltnisse der Website

4:3 · Category Cards

3:4 · Portrait / Team

16:9 · Hero

1:1 · Product

Grosses Bild mit halbtransparentem Banner-Overlay — Headline, Text und zwei Buttons · aspect-[16/9] · overlay bottom · backdrop-blur

Erlebe unsere Maschinen live vor Ort — persönliche Beratung, Verkostung und alles rund um Kaffee.

Element	Token	Aufgelöst
Container	rounded-[16px] overflow-hidden	16px radius, clip children
Image	aspect-[16/9] object-cover	Füllt Container
Overlay	bg-[var(--ce-surface-invert)]/85 backdrop-blur-sm	#18191A @ 85% + blur
Headline	Pressura 24px/500, text-white	#FFFFFF
Body	Inter 14px/400, text-white/70	rgba(255,255,255,0.7)
Primary Button	bg-white text-[--ce-surface-invert] rounded-[8px]	Invertiert: weiss auf dunkel
Outline Button	border-white/40 → hover border-white/70	Transparenter Hintergrund
Padding	px-8 py-6 @3xl:px-10 @3xl:py-8	32/24 → 40/32

Eigenschaft	Wert	Hinweis
Border Radius	rounded-md (6px)	Gilt fuer alle Bilder -- Design-Regel
Object Fit	object-cover	Bild fuellt Container, kein Verzerren
Aspect Ratio 4:3	aspect-[4/3]	Category Cards
Aspect Ratio 3:4	aspect-[3/4]	Portrait, Team-Fotos
Aspect Ratio 16:9	aspect-[16/9]	Hero-Bilder
Aspect Ratio 1:1	aspect-[1/1]	Produkt-Bilder
Caption Font	Pressura Mono 12px	Farbe: ce-zinc-500
Caption Abstand	mt-3 (12px)	Zwischen Bild und Caption