Sections

Direkte Kinder von <main> sind Seitenabschnitte: ein Breakout-Grid zentriert den Inhalt, [full]-Kinder laufen randlos durch. Varianten per Attribut.

<main>
  <section>…</section>           zentriert, max 72rem
  <section narrow>…</section>    max 46rem (Lesebreite)
  <section wide>…</section>      max 90rem
  <section alt>…</section>       getönter Hintergrund
  <section hero>…</section>      großer Einstieg
  <section zapp>…</section>      Label links, Inhalt rechts
</main>

section alt

Getönter Hintergrund über --bs-tertiary-bg — funktioniert automatisch im Dark Mode und in jedem Theme.

section narrow

Lesebreite für Text-Seiten: 46rem. Diese Section ist schmäler als die anderen auf dieser Seite — Fließtext bleibt bei angenehmen 60–75 Zeichen pro Zeile, egal wie breit der Monitor ist.

section zapp

Label links, Inhalt rechts

Das Zapp-Muster aus assetdb: ein schmales Label (1/3) führt die Sektion an, der Inhalt (2/3) steht daneben. Unter md stapelt es einspaltig.

Gedacht für Leistungsseiten, Einstellungs-Gruppen, FAQ-Blöcke — überall, wo eine Randspalte Orientierung gibt.

Randlose Kinder mit [full]

Einzelne Kinder brechen aus dem zentrierten Bereich aus:

<div full> — läuft bis an beide Ränder

Der Text danach ist wieder zentriert — ohne Wrapper-Div, ohne Container-Klassen.