Grid
12 Spalten, feste Breakpoints, definierte Container
Die Website nutzt ein flexbox-basiertes 12-Spalten-Grid. In Figma werden Seiten und Sektionen so aufgebaut, dass sie genau auf diese Logik passen.
Merksatz: Erst Container, dann Row, dann Columns.
Beispiel
Container
4 / 12
8 / 12
Breakpoints
Verbindliche Umschaltpunkte
| Breakpoint | Ab Breite | Container-Maxbreite | Hinweis für Figma |
|---|---|---|---|
sm | 576 px | 540 px | große Phones / kleine Tablets |
md | 768 px | 720 px | Tablet |
lg | 992 px | 960 px | Laptop |
xl | 1200 px | 1140 px | Desktop |
xxl | 1400 px | 1320 px | großer Desktop |
Erlaubte Layoutmodule
Nur diese Raster sind freigegeben
1 Spalte
12 / 12Intro, Text, Hero, einzelne Module.
2 Spalten
6 / 6symmetrisch, Text/Bild, Vergleiche, Teaser.
2 Spalten
4 / 8Sidebar + Hauptbereich, kleine Introfläche links.
2 Spalten
8 / 4Schwerpunkt links, kleinere Zusatzfläche rechts.
3 Spalten
4 / 4 / 4Teaser, Vorteile, Karten, strukturierte Gruppen.
4 Spalten
3 / 3 / 3 / 3Logos, kleine Kennzahlen, kompakte Kacheln.
Keine freien Sonderraster ohne technische Freigabe.