Foundation · 6 Varianten

Komposition

components/system/foundations/Komposition.astro

Seitenbau: vier Container-Stufen, vertikaler Rhythmus, Hintergrund-Wechsel, CTA-Dichte, mobile Reihenfolge, Sticky-Ebenen, Grid-Kollaps. Gilt für alle Vorlagen.

Notizen

Container: Bleed 100 %, nw-wide 1440, container 1200, nw-narrow 720 — vier Stufen, keine fünfte.
Rhythmus: jede Sektion py-16 sm:py-24 lg:py-32 (64 / 96 / 128); die Intro-Regel bleibt unverändert.
Hintergrund: Paper ist Grund, Nacht nur für Hero, Stats-Band, Testimonials, Vergleich oder Final-CTA — nie zwei Nacht-Sektionen hintereinander.
CTA-Dichte: der Hero trägt die erste Aktion, danach ein CTA alle zwei bis drei Sektionen, nie zwei Primary in einem Viewport.
Mobil: Satz vor Bild bei Hero, Media-Text und Value-Prop, Bild vor Satz bei Karten, weil das Bild der Kartenkopf ist.
Sticky: Header top-0 (z 50), TOC lg:top-24, Sticky-CTA bottom-0 (z 50), Cookie-Layer z 60 darüber, Toast nie über dem Cookie-Layer.
Grid-Kollaps: 3 → 2 → 1 und 4 → 2 → 1 (lg → sm → base), Tabellen unter sm gestapelt, sonst overflow-x-auto.

Props

Name	Typ	Default	Notiz
variant	"container" \| "rhythmus" \| "hintergrund" \| "cta" \| "mobil" \| "sticky"	"container"	01–06.
surface	"nacht" \| "paper"	"nacht"	Pflicht-Paar.

<Komposition variant="container" surface="nacht" />

01 · Container

Vier Stufen

Bleed, Wide, Default, Narrow mit Maß.

Nacht

Bleed · -mx-6 100 %

Galerie-Band, Cover, Hero-Bild, Marquee

Wide · nw-wide 1440

Hero, Bento, Karussell, Case-Grid

Default · container 1200

alle übrigen Sektionen

Narrow · nw-narrow 720

Prose, Rechtliches, Formular, Thank-you

Paper

Bleed · -mx-6 100 %

Galerie-Band, Cover, Hero-Bild, Marquee

Wide · nw-wide 1440

Hero, Bento, Karussell, Case-Grid

Default · container 1200

alle übrigen Sektionen

Narrow · nw-narrow 720

Prose, Rechtliches, Formular, Thank-you

02 · Rhythmus

64 / 96 / 128

py-16 sm:py-24 lg:py-32, Padding sichtbar.

Nacht

py-16 64 px

Sektion base · 64 px

sm:py-24 96 px

Sektion sm · 96 px

lg:py-32 128 px

Sektion lg · 128 px

Intro-Regel bleibt: H2 mt-12, Block mb-20 lg:mb-24, Grid pt-8. Zwischen Header und Hero kein Abstand.

Paper

py-16 64 px

Sektion base · 64 px

sm:py-24 96 px

Sektion sm · 96 px

lg:py-32 128 px

Sektion lg · 128 px

Intro-Regel bleibt: H2 mt-12, Block mb-20 lg:mb-24, Grid pt-8. Zwischen Header und Hero kein Abstand.

03 · Hintergrund

Paper ist Grund

Abfolge als Streifen, Nacht bleibt Ausnahme.

Nacht

Hero mit ASCII nacht

Problem paper

Leistungen paper

Stats-Band, höchstens eine Viewport-Höhe nacht

Referenzen paper

FAQ paper

Final-CTA, invers zur Vorgänger-Fläche nacht

Paper

Hero mit ASCII nacht

Problem paper

Leistungen paper

Stats-Band, höchstens eine Viewport-Höhe nacht

Referenzen paper

FAQ paper

Final-CTA, invers zur Vorgänger-Fläche nacht

04 · CTA-Dichte

Alle zwei bis drei

Sechs Sektionen, drei markierte Aktionen.

Nacht

Hero erste Aktion: Slot-Pille und Button

Problem —

Leistungen —

Inline-CTA zweite Aktion

Referenzen —

Final-CTA letzte Aktion

Ein CTA alle zwei bis drei Sektionen. Nie zwei Primary in einem Viewport. Landing und Pricing zusätzlich Sticky-CTA unter lg.

Paper

Hero erste Aktion: Slot-Pille und Button

Problem —

Leistungen —

Inline-CTA zweite Aktion

Referenzen —

Final-CTA letzte Aktion

Ein CTA alle zwei bis drei Sektionen. Nie zwei Primary in einem Viewport. Landing und Pricing zusätzlich Sticky-CTA unter lg.

05 · Mobil

Satz oder Bild zuerst

Desktop- gegen Mobil-Reihenfolge je Typ.

Nacht

Sektionstyp	Desktop	Mobil
Hero	Satz · Bild	Satz zuerst
Media-Text	Satz · Bild	Satz zuerst
Value-Prop	Satz · Bild	Satz zuerst
Blog-Karte	Bild · Satz	Bild zuerst
Case-Karte	Bild · Satz	Bild zuerst
Tabelle	Zeilen	Variante mobil, gestapelt

Paper

Sektionstyp	Desktop	Mobil
Hero	Satz · Bild	Satz zuerst
Media-Text	Satz · Bild	Satz zuerst
Value-Prop	Satz · Bild	Satz zuerst
Blog-Karte	Bild · Satz	Bild zuerst
Case-Karte	Bild · Satz	Bild zuerst
Tabelle	Zeilen	Variante mobil, gestapelt

06 · Sticky

z 10 / 50 / 60

Gestapelte Ebenen und die Kollisionsregel.

Nacht

z 60 Cookie-Layer liegt über allem, schließt sich zuerst

z 60 Toast oben rechts, nie über dem Cookie-Layer

z 50 Header v2 sticky top-0, 64 → 48 kompakt

z 50 Sticky-CTA lg:hidden, bottom-0

z 10 TOC · Filter lg:sticky lg:top-24 · Filter top-16, nur ohne TOC

Kollisionsregel: Cookie zuerst entscheiden, dann Toast. Ankündigung ist nicht sticky, sie schiebt den Header.

Paper

z 60 Cookie-Layer liegt über allem, schließt sich zuerst

z 60 Toast oben rechts, nie über dem Cookie-Layer

z 50 Header v2 sticky top-0, 64 → 48 kompakt

z 50 Sticky-CTA lg:hidden, bottom-0

z 10 TOC · Filter lg:sticky lg:top-24 · Filter top-16, nur ohne TOC

Kollisionsregel: Cookie zuerst entscheiden, dann Toast. Ankündigung ist nicht sticky, sie schiebt den Header.