1. Globale Rahmen-Elemente (Navigation & Abschluss)

1.1 Header-Typen

Standard Left: Logo links, Navigation mittig, CTA rechts.

Centered Logo: Logo mittig oben, Navigation darunter zentriert.

Minimal Stack: Logo links, nur Burger-Menü rechts (für Desktop & Mobile).

Utility Header: Mit Top-Bar für Kontakt-Infos oder Sprachwechsler.

1.2 Footer-Typen

Fat Footer: Mehrspaltige Sitemap, Newsletter-Box, Social Media.

Minimal Footer: Einzeiler mit Copyright, Logo und rechtlichen Links.

E-Commerce Footer: Fokus auf Trust-Signale (Zahlungsarten, Support-Hotline).

2. Hero-Sektionen (Einstieg & Fokus)

Full-Screen Image: 80vh Hintergrundmedium mit zentriertem Text-Overlay.

Full-Screen Image: 80vh Hintergrundmedium mit linksbündiger Text-Box.

Split-Screen (50/50): Text-Stack links, Bild/Video/Illustration rechts.

Centered Stack: Puristischer Fokus auf Headline, Subline und CTA (ohne großes Bild).

Product Showcase: Freigestelltes Produktbild (PNG), das die Headline überlagert.

Hero with Form: Text-Content links, direktes Lead-Formular rechts in einer Box.

3. Bild-Text- & Storytelling-Layouts

Classic Zig-Zag: Wechselnde Anordnung (Bild/Text -> Text/Bild).

Overlapping Layout: Versetztes Bild und Text-Box für visuelle Tiefe.

Feature Highlight: Zentrales Medium mit radial angeordneten Text-Bullets.

Parallax Media Banner: Full-Width Medium mit Scroll-Effekt als Flow-Breaker.

4. Karten, Grids & Listen

4.1 Card-Varianten

Content Card: Vertikal (Bild, Titel, Text, Button).

Horizontal Card: Bild und Text nebeneinander (kompakt).

Service Card: Fokus auf Icon/Illustration und kurze Beschreibung.

Pricing Card: Preis-Fokus, Feature-Liste (Checkliste) und CTA.

Profile/Team Card: Foto, Name, Position und Social-Links.

4.2 Grid-Systeme

Equal Height Grid: Klassische Spalten (2er, 3er, 4er) mit bündigem Abschluss.

Bento / Masonry Grid: Asymmetrische Kacheln für unterschiedliche Gewichtung.

Horizontal Slider: Karten-Karussell für Platzersparnis (besonders Mobile).

5. Interaktions- & Konvertierungs-Module

Accordion-Stack: Klappbare Zeilen für FAQs oder technische Details.

Tabbed Content: Umschaltbare Inhaltsflächen (z. B. Zielgruppen-Switch).

Logo-Marquee: Laufband für Social Proof (Partner-Logos).

CTA Banner: Auffällige Full-Width Sektion mit finaler Handlungsaufforderung.

Statistic Bar: Schmale Sektion mit animierten Zahlen/Countern.

Contact/Newsletter Stack: Verschiedene Formular-Layouts (Inline vs. Block).

6. UX-Status & Utility Sektionen

Feedback Sektionen: Erfolg (Success/Thank You) und Fehler (404/Error).

Empty States: Platzhalter-Layouts, wenn noch kein Content vorhanden ist.

Overlay-Modals: Designs für Pop-ups, Video-Lightboxen oder Cookie-Banner.

Sticky Elements: Mitscrollende Inhaltsverzeichnisse oder "Back-to-Top" Buttons.