Footer
Monochromatischer Shop-Footer – folgt dem Theme (hell in Light, dunkel in Dark Mode)
Footer (Monochromatic)
BG SURFACE-CARD · LOGO --ce-logo-filter · 6 SPALTEN (4 LINK + CONTACT SPAN-2) · HEADINGS PRESSURA 16px/500 · LINKS INTER 14px/400
Elemente
| Element | Font | Size/Weight | Farbe (Token + Hex) | Extra |
|---|---|---|---|---|
| Column Heading | Pressura | 16px / 500 | --ce-text-heading (#18191A) | — |
| Links | Inter | 14px / 400 | --ce-text-secondary (#575A61) | hover: --ce-text-heading, line-height 28px |
| Contact Pill | Pressura Mono | 14px / 400 | --ce-text-secondary | border: border-default, rounded-[8px], px-3 py-1.5 |
| Contact Pill Icon | Remixicon SVG | 14px | --ce-text-secondary | inline, line style |
| Copyright | Pressura Mono | 12px / 400 | --ce-text-tertiary (#69727D) | — |
| Social Icons | Remixicon | 18px | --ce-text-tertiary | hover: --ce-text-heading |
Grid / Responsive
| Breakpoint | Spalten | Padding |
|---|---|---|
| < 768px (mobile) | 2 columns | px-6 py-8 |
| ≥ 768px (md) | 3 columns | px-8 py-12 |
| ≥ 1280px (xl) | 6 columns (4 link + 2 contact) | px-8 py-12 |
States
| Element | State | Verhalten |
|---|---|---|
| Links | Hover | color: --ce-text-secondary → --ce-text-heading, transition 200ms |
| Social Icons | Hover | color: --ce-text-tertiary → --ce-text-heading, transition 200ms |
| Contact Pills | Hover | color → --ce-text-heading, border-color → --ce-border-strong, transition 200ms |
Agent Checklist
| # | Aufgabe | Hinweis |
|---|---|---|
| 1 | Headings: Pressura 16px/500 | Nicht 14px — aktualisiert |
| 2 | Grid: 6 Spalten (4 Link + Contact span-2) | XL Breakpoint |
| 3 | Responsive: S=2col, M-L=3col, XL=6col | Breakpoints prüfen |
| 4 | Contact Pills: Pressura Mono, border, rounded-[8px] | Hover: --ce-text-heading + --ce-border-strong |
| 5 | Social Icons: Remixicon 18px | Hover: --ce-text-tertiary → --ce-text-heading |
| 6 | Copyright: Pressura Mono 12px | --ce-text-tertiary (#69727D) |
| 7 | Monochromatisch: kein invertierter Hintergrund | Folgt Theme |
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)