Layout
Container, 12-Spalten-Raster, Sektionswrapper mit Flächen und Abständen, Sektionskopf mit Marker, Trennlinie. Definiert in src/styles/layout.css.
Raster
.grid-12 mit Tailwind-Spannen (col-span-12 lg:col-span-8). Mobil kollabiert alles auf eine Spalte. Typische Spannen: 8+4 (Statement + Erläuterung), 4+8 (Titel + Inhalt), 7+5 (Bild + Text), 5+7 (Text + Screen), 6+6.
Automatisches Raster
.grid-auto mit --grid-min (Standard 18rem) für Kartenreihen mit variabler Anzahl.
Sektionen und Rhythmus
.section trägt den vertikalen Abstand. Modifikatoren: --sm, --lg, --flush, --alt (helle Wechselfläche), --dark. Zwei gleiche helle Flächen hintereinander: die zweite verliert den oberen Abstand. Empfohlene Abfolge auf der Startseite: dunkel (Hero) → weiß → alt → weiß → alt → weiß → dunkel → weiß → alt → weiß → alt (CTA) → Footer.
Beispiel
Weiße Sektion mit Sektionskopf
Eyebrow, Titel, Lead. Der Eyebrow ist optional: ohne Text entfällt er ersatzlos.
Inhalt. Zeilenlänge über measure begrenzt.
Wechselfläche mit geteiltem Kopf
Inhalt.
Kompakte Sektion (--sm), etwa für Vertrauensbalken und Logos.
Auf Dunkel
Dunkle Sektion
Der Strich wechselt auf --site-bright, die Schrift auf Weiß.
Trennlinie innerhalb der Sektion.
Marker und Trennlinie
Der Eyebrow (.eyebrow) ist eine kurze Einordnung über der Überschrift, mit 40 × 2 px Strich in der -ink-Stufe der Bereichsfarbe davor. Er ist optional: ohne Text wird nichts ausgegeben. Der Strich ist ein Rahmen, keine Fläche, damit er im Windows-Kontrastmodus und im Druck überlebt. Die Trennlinie (.divider) ist eine schlichte Hairline und trennt innerhalb von Sektionen.
Mit Einordnung
Ohne Einordnung entfällt er