Das entschiedene Zwei-Ebenen-Modell: Eine Seite ist ein Stapel von Sections — die Section ist nur der Rahmen (Hintergrund, Abstand, Anker). Darin sind Elemente frei kombinierbar. Abgeleitet aus Sitemap C, dem Content-File und dem Design-System-Foundation.
Planungsstand vom 23.07.2026, nicht der Bauzustand. Die Status-Marken («neu», «teilweise») beschreiben, was vor dem Astro-Bau noch offen war — gebaut sind inzwischen alle zwanzig Element-Typen. Massgeblich für den heutigen Stand ist die Kitchen-Sink der Astro-App: cyberdise-design.noevu.dev/kitchen-sink.
Trägt keinen eigenen Text. Acht Hintergrund-Varianten — jede eine Rolle aus tokens.css, keine freien Farben —, optional Steinbock-Pattern an der Kante, optional Anker-ID (Sprungziel) und schmale zentrierte Breite für Conversion-Momente.
--surface · Standard, weisser Grund, Pattern optional--surface-sunken · neutrales Grau-Band — trägt heute das Trusted-by-Logoband--surface-muted · leicht violett getönt — Gruppierung, Ruhe--surface-teal · heller Türkis-Tint für abwechselnde Sections--surface-magenta · heller Magenta-Tint--surface-pink · heller Pink-Tint--surface-inverse · Dunkelviolett — Rollen invertieren, Akzent wird Pink. Im DS fertig.--surface-brand · Brand-Statement-Band — Rolle existiert, gestaltetes Band noch nichtWeitere Rahmen-Felder: anchor (Sprungziel, z. B. solutions#mssp — Seiten-Navigation wird daraus generiert) · width normal / schmal-zentriert · pattern an/aus.
Jede Karte: Miniatur des Layouts, Felder, wo es vorkommt, Status im Design-System. Fast-Zwillinge des Wireframes sind bereits zusammengelegt (ein Kachel-Raster mit Stil-Schalter statt fünf).
Eyebrow + Überschrift + Anriss — der Kopf jeder Section.
Redaktionelle Absätze — z. B. das BDE-Manifest.
Button-Gruppe. Fällt ohne Angabe auf die globalen CTAs zurück (Start Free / Book a Demo).
Bild, Produkt-Screenshot oder Personen-Cutout (Prompt-Rezept im DS). Screenshots fehlen noch.
Text neben Medium, optional Bullets, spiegelbar.
Karten-Raster 2–4 Spalten. Stil-Schalter: Icon / Zahl / Häkchen vorne. Das Arbeitspferd — ersetzt fünf Wireframe-Sorten.
Beweiszahlen-Reihe mit Pflicht-Quellenangabe. Bewusst eigenes Element: nur «bis zu 60 %» ist belegt (AISP-Studie).
Nummerierter Prozess, optional als Kreislauf-Diagramm. ⚠︎ Loop-Definition noch offen (4 vs 7 Schritte).
Kundenstimmen, 1–n. Elf echte liegen vor (DE/EN) — Voith, HvS, GLB mit belegter Attribution bereits eingebaut.
Zweispaltiger Kontrast — Conventional Tools vs Cyberdise BDE.
79 Features × 6 Produkte (inkl. Verify), 12 Gruppen — generiert aus der Feature-CSV, nie von Hand. Verify ist seit 24.07.2026 eine eigene Spalte (vorher als Add-on gezählt).
Produkt-Karten: 3 Basisprodukte + Behavioral Defense und MSSP vollbreit. Bildet die Inklusionskette ab. Verify bekommt eine eigene Karte (entschieden 24.07.2026).
Aufklappbare Fragen + FAQ-Structured-Data (Suchmaschinen & KI-Crawler).
Lead-Formular in drei Varianten. Finale Pricing-Copy hängt an Epic CB-1382.
Kundenlogo-Band «Trusted by» — Teleperformance, Helvetia, REWE, Voith, HvS, Marechaux.
Award- und Trust-Pillen — Globee Gold 2024, Cybersecurity Excellence ×2, revDSG/GDPR. (Typ vorher «badges», umbenannt.)
Foto-Raster mit hervorgehobenen Personen (Palo, Joel). Cutout-Bildrezept aus dem DS anwendbar.
Datengetriebene Teaser-Karten — Blog, Whitepapers, Guides, Videos. Quelle statt Handpflege.
Er ist eine Section (Rahmen: light + Pattern-Kante), zusammengesetzt aus sechs Elementen — und existiert im Design-System bereits fertig, inklusive Parallax und Karten-Tilt.
Wie der Hero eine bespoke, von Hand komponierte Section — ausgewählt über das Frame-Feld layout.kind: "bento" (in SectionRenderer.astro geroutet, nicht über die Standard-Component-Map). Apple-Bento-Layout über grid-template-areas. Der Name beschreibt das Muster, nicht den Inhalt: heute trägt es die MSSP-Sektion «for partners», morgen ein anderes Thema. Früher hiess es mssp und wurde am Anker erkannt — eine Sprungmarke ist Inhalt und darf nicht über das Layout entscheiden.
ctas.lead + Schluss-Button, content-getrieben, nie hartkodiert)d (Standard, Home) · b/c (Alternativlayouts für Kitchen-Sink/Vergleich) — aus Prop oder Anker-Suffix, d = RückfallMssp.astro + components/mssp.cssKeine Elemente, sondern Eigenschaften, die auf Rahmen und Elemente angewandt werden. Sie stehen im Design-System als eigene Sektionen und dürfen im Build nicht als Hero-Sonderfall untergehen.
Milchglas-Oberfläche: halbtransparenter Grund, Hintergrund-Unschärfe, feine Lichtkante. Wirkt nur über etwas — Pattern, Verlauf, Bild. Über weisser Fläche ist sie unsichtbar.
Zwei Bewegungen: Parallax (Ebenen verschieben sich unterschiedlich schnell, je Ebene ein depth) und Tilt (Karten kippen leicht unter dem Zeiger). Zurückhaltend, nie als Effekt um seiner selbst willen.
Steinbock-Zuschnitt an einer Kante. Die Ausrichtung bestimmt die Ecke — Drehen heisst in die gegenüberliegende Ecke wechseln. Immer volle Deckkraft; wirkt es zu laut, wird der Hintergrund heller, nie das Motiv schwächer.
Wichtig für den Build: Parallax rechnet gegen die Position der Section im Viewport, nie gegen den absoluten Scrollstand — sonst wandern die Ebenen bei tief liegenden Sections aus dem Rahmen und werden abgeschnitten.
Wireframe-Vokabular übersetzt: band = ink/purple-Rahmen + E1 + E3 · ctaband = schmaler Rahmen + E1 + E3. Elf weitere Slugs sind bewusst Platzhalter (Blog, Webinars, News, Whitepapers, Careers …).
| Seite | Sections in Reihenfolge |
|---|---|
| Home | Hero-Komposition · logoStrip · statRow 60 % · MSSP-Composite (Bento, bespoke) · tileGrid Authority ×4 · Band purple Shift · compareTable Problem · cardFeed Blog · steps Loop · tileGrid Platform ×4 · split ×2 · Band ink Freemium · tileGrid Solutions ×4 · quote ×2 · awardWall · CTA |
| Product | richText Manifest #bde · compareTable · steps Loop · statRow · tileGrid ×8 verlinkt · quote · CTA |
| Phishing & Smishing | Hero · tileGrid ×6 · steps ×3 · quote GLB · CTA |
| Vishing & Deepfake | Hero · tileGrid ×6 · split Deepfake · split Governance · CTA |
| Training + LMS | Hero · tileGrid ×6 · split Policies-first · CTA |
| Phish-Button | Hero · tileGrid ×6 · faq · CTA |
| AI Chatbot | Hero · tileGrid ×3 · CTA |
| AI Campaign Automator | Hero · tileGrid ×2 · CTA |
| Reporting & Risk | Hero · tileGrid ×3 · CTA |
| Solutions | Kopf · tileGrid Need-Grid ×4 (Mapping pending Palo/Sebastian) · split ×3 Segmente · tileGrid ×3 MSSP-Säulen ×3 · split Education · quote ×2 · CTA |
| Pricing | Kopf · split Nesting · productCards 3+2 · tileGrid Add-ons ×2 · featureMatrix 79×6 · Band purple · Band ink MSSP · awardWall · faq · CTA |
| Get pricing | Hero · steps ×4 · form · Band ink · faq · CTA |
| Resources | Kopf · cardFeed Blog · cardFeed Whitepapers · Listen · CTA Newsletter |
| Tools + Guides | Kopf · cardFeed ×6 Guides · CTA |
| Case Studies | Kopf · cardFeed GLB + 2 · quote ×3 · CTA |
| BDE Hub | richText · cardFeed ×3 · CTA |
| About | richText · teamGrid · split Founder · awardWall |
| Partner Program | Hero · split White-label · CTA |
| Contact / Demo | Kopf · form · tileGrid ×3 · steps ×3 · faq · awardWall |
| Start Free | Hero · tileGrid ×3 · steps ×3 · split Download · awardWall · CTA |