SectionWrapper

Ein Wrapper-Component das Redakteuren und Entwicklern erlaubt, die Breite, den vertikalen Abstand und die Hintergrundfarbe von Content-Sections zu steuern — ohne CSS schreiben zu müssen.

Wann brauche ich das?

Jede Seite besteht aus mehreren Abschnitten: Hero, Intro-Text, Feature-Grid, FAQ, CTA-Banner, Footer. Jeder Abschnitt hat unterschiedliche Anforderungen an Breite und Abstände. Der SectionWrapper macht diese Entscheidungen explizit statt sie in Tailwind-Klassen zu verstecken.

Ohne SectionWrapper

<section class="breakout py-space-lg
  bg-brand-surface-alt">
  <h2>Features</h2>
  ...
</section>

Tailwind-Klassen manuell zusammenstellen. Fehleranfaellig, Inkonsistenzen zwischen Seiten.

Mit SectionWrapper

<SectionWrapper width="breakout"
  spacing="lg" bg="alt">
  <h2>Features</h2>
  ...
</SectionWrapper>

Klare Props statt CSS-Klassen. Selbsterklaerend. Konsistent über alle Seiten.

Praxis-Beispiel: Typische Landingpage

So würde eine typische Landingpage mit SectionWrapper aufgebaut:

<!-- Hero: volle Breite, großer Abstand -->
<SectionWrapper width="full" spacing="xl" bg="primary">
  <h1>Willkommen</h1>
  <p>Unser Angebot in einem Satz.</p>
</SectionWrapper>

<!-- Intro: Fließtext, Standard-Breite -->
<SectionWrapper width="content" spacing="lg">
  <h2>Über uns</h2>
  <p>Hier steht ein laengerer Text. Die content-Breite
     begrenzt auf ~65 Zeichen pro Zeile für optimale
     Lesbarkeit.</p>
</SectionWrapper>

<!-- Features: breiterer Bereich für Cards -->
<SectionWrapper width="breakout" spacing="lg" bg="alt">
  <h2>Unsere Leistungen</h2>
  <div class="auto-grid" data-cols="3">
    <Card title="Leistung A" />
    <Card title="Leistung B" />
    <Card title="Leistung C" />
  </div>
</SectionWrapper>

<!-- Galerie: volle Breite für Bilder -->
<SectionWrapper width="wide" spacing="md">
  <Gallery images={...} cols={4} />
</SectionWrapper>

<!-- CTA: Akzent mit Primary-Hintergrund -->
<SectionWrapper width="full" spacing="xl" bg="primary">
  <h2>Jetzt starten</h2>
  <Button variant="outline">Kontakt aufnehmen</Button>
</SectionWrapper>

Breiten im Vergleich

Alle Breiten-Stufen visualisiert. Beachte die Unterschiede — besonders bei breitem Browserfenster gut sichtbar:

content — max 55rem (880px)

Fließtext, Formulare, Absätze

breakout — max 68.75rem (1100px)

Cards, Teaser-Gruppen, Listen

wide — max 83.125rem (1330px)

Galerien, breite Grids

ultra-wide — max 97.5rem (1560px)

Sonderfaelle, Dashboards

full — 100% Browserbreite

Hero-Bilder, CTA-Banner

Abstände (spacing)

Fluid Spacing — skaliert automatisch zwischen Mobil und Desktop.

xs — Enge Verbindung (z.B. Überschrift + Absatz)

sm — Verwandte Elemente

md — Standard-Section (Default)

lg — Themen-Trennung

xl — Starke Trennung (Hero, CTA)

Hintergründe (bg)

bg="default" — Transparent, nutzt den Seiten-Hintergrund

bg="alt" — Leicht abgehobener Hintergrund für visuellen Kontrast

bg="primary" — Brand-Farbe mit weissem Text (CTA-Bereiche)

bg="dark" — Dunkler Hintergrund (Footer, Kontrast-Sections)

Props-Referenz

Prop	Typ	Default	Beschreibung
`width`	string	`"content"`	content, breakout, wide, ultra-wide, full
`spacing`	string	`"md"`	none, xs, sm, md, lg, xl, 2xl
`bg`	string	`"default"`	default, alt, primary, dark
`tag`	string	`"section"`	HTML-Element: section, div, article, aside, header, footer
`id`	string	—	Für Anker-Links (#features, #kontakt)
`ariaLabel`	string	—	Beschreibung für Screen-Reader
`class`	string	`""`	Zusätzliche CSS-Klassen