Einführung von Gutters / Hilfsklassen für Abstände

Beschreibung

Aktuell fehlen in unserem Designsystem einfache Möglichkeiten, standardisierte Abstände zwischen Elementen flexibel anzupassen. Dies erschwert eine konsistente Gestaltung und führt teilweise zu redundanten CSS-Regeln.

Wir möchten uns eng an der Bootstrap-Umsetzung orientieren, insbesondere an den Gutters-Utilities aus Bootstrap 5:
👉 https://getbootstrap.com/docs/5.0/layout/gutters/

Ziel

Einführung von Gutters bzw. Hilfsklassen, um Abstände (gap, margin, padding) einheitlich und wiederverwendbar definieren zu können. Die Syntax und Größen sollen so nah wie möglich an Bootstrap 5 angelehnt sein, damit eine einfache Übertragbarkeit und Wiedererkennung gewährleistet ist.

Anforderungen

Definierte Abstandsgrößen analog zu Bootstrap (0 bis 5)
Hilfsklassen wie z. B.:
- g-0, g-1, g-2, g-3, g-4, g-5 für Gutters
- ggf. ergänzend m-0 bis m-5, p-0 bis p-5 für Margin und Padding
Konsistente Anwendung über alle Komponenten hinweg
Dokumentation der verfügbaren Gutters und Abstände in der Storybook-Dokumentation
Abstimmung mit Design, um eine Konsistenz zwischen Code (Hilfsklassen) und Figma (Spacing-System) sicherzustellen.
Benamung sollte möglichst kurz sein und trotzdem KERN spezifisch sein