Spacing

Das Spacing-System basiert auf einer einzigen Basis-Variable, die sich fluid an die Viewportbreite anpasst. Alle Abstaende skalieren proportional — auf dem Handy kompakter, auf dem Desktop luftiger.

Das Prinzip

Es gibt eine --base-spacing Variable, die sich per clamp() zwischen 2.25rem (36px) und 4rem (64px) bewegt. Alle Stufen sind Vielfache davon:

:root { --base-spacing: clamp(2.25rem, calc(1rem + 2vw), 4rem); }

/* Tailwind-nutzbar als: pt-space-sm, mb-space-lg, gap-space-md */
@theme {
  --spacing-space-xs: calc(var(--base-spacing) * 0.5);  /* ~18-32px */
  --spacing-space-sm: var(--base-spacing);               /* ~36-64px */
  --spacing-space-md: calc(var(--base-spacing) * 1.5);   /* ~54-96px */
  --spacing-space-lg: calc(var(--base-spacing) * 2);     /* ~72-128px */
  --spacing-space-xl: calc(var(--base-spacing) * 3);     /* ~108-192px */
  --spacing-space-2xl: calc(var(--base-spacing) * 4);    /* ~144-256px */
}

Alle Stufen

Aendere die Browserbreite — die Balken skalieren mit.

space-xs Faktor 0.5x

Minimaler Abstand: innerhalb von Components, zwischen eng zusammengehoerigen Elementen

Tailwind-Klasse: pt-space-xs, mb-space-xs, gap-space-xs

space-sm Faktor 1x

Kleiner Abstand: zwischen Absaetzen, zwischen Label und Input, innerhalb von Cards

Tailwind-Klasse: pt-space-sm, mb-space-sm, gap-space-sm

space-md Faktor 1.5x

Mittlerer Abstand: zwischen Sections innerhalb eines Bereichs, Grid-Gap Standard

Tailwind-Klasse: pt-space-md, mb-space-md, gap-space-md

space-lg Faktor 2x

Grosser Abstand: zwischen Hauptsections einer Seite, vor/nach wichtigen Bloecken

Tailwind-Klasse: pt-space-lg, mb-space-lg, gap-space-lg

space-xl Faktor 3x

Sehr grosser Abstand: zwischen den grossen Seitenbereichen (Hero, Features, Footer)

Tailwind-Klasse: pt-space-xl, mb-space-xl, gap-space-xl

space-2xl Faktor 4x

Maximaler Abstand: Seitenheader/-footer Padding, extremer visueller Raum

Tailwind-Klasse: pt-space-2xl, mb-space-2xl, gap-space-2xl

Wann welche Stufe?

Stufe	Typische Verwendung	Beispiel
`space-xs`	Innerhalb eines Components	Abstand zwischen Icon und Text in einem Button
`space-sm`	Zwischen nahestehenden Elementen	Grid-Gap zwischen Cards
`space-md`	Zwischen Sektionen eines Bereichs	Abstand zwischen Headline + Text und einer Card-Reihe
`space-lg`	Zwischen Hauptbereichen	Zwischen Hero und Features-Section
`space-xl`	Seitenweite Trennung	Padding oben/unten auf einer Landingpage-Section
`space-2xl`	Maximaler Raum	Selten. Nur bei extrem luftigen Layouts.

Warum nicht einfach Tailwind-Werte?

Normale Tailwind-Abstaende wie mt-8 (2rem) oder mt-16 (4rem) sind statisch. Auf einem grossen Monitor sehen 2rem Abstand fast genauso aus wie kein Abstand. Unser System skaliert: auf Mobile ist space-sm ~36px, auf Desktop ~64px. Dadurch "atmen" Layouts natuerlich mit.