.marketing-demo-page { display: grid; gap: 0; padding: 24px 0 40px; } .marketing-demo-section { padding: var(--ci-space-2xl) 0; } .marketing-demo-section--tight { padding-top: var(--ci-space-xl); padding-bottom: var(--ci-space-xl); } .marketing-demo-shell { width: min(100%, var(--ci-public-shell-max, 1480px)); margin: 0 auto; padding: 0 var(--ci-public-shell-padding, 24px); } .marketing-demo-hero, .marketing-demo-section-head, .marketing-demo-final .ci-card__body { display: grid; gap: var(--ci-space-md); } .marketing-demo-hero { max-width: 68ch; } .marketing-demo-eyebrow { display: inline-flex; width: max-content; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--ci-radius-pill); background: rgba(227, 234, 240, 0.72); color: var(--accent-dark); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .marketing-demo-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--accent-dark); opacity: 0.8; } .marketing-demo-hero h1, .marketing-demo-section-head h2 { margin: 0; line-height: 1.04; } .marketing-demo-hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); max-width: 12ch; } .marketing-demo-hero p, .marketing-demo-section-head p { margin: 0; line-height: 1.7; } .marketing-demo-hero__actions { display: flex; gap: var(--ci-space-md); flex-wrap: wrap; } .marketing-demo-highlights, .marketing-demo-grid { display: grid; gap: var(--ci-space-lg); } .marketing-demo-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); } .marketing-demo-highlights .ci-card__body { min-height: 96px; display: grid; place-items: center; text-align: center; } .marketing-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marketing-demo-card .ci-card__body { display: grid; gap: var(--ci-space-md); } .marketing-demo-preview { min-height: 360px; overflow: hidden; border-radius: calc(var(--ci-radius-lg) - 2px); background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,255,0.94) 100%); border: 1px solid rgba(207, 202, 196, 0.52); } .marketing-demo-preview .template-shell { transform: scale(0.8); transform-origin: top center; width: 125%; margin-left: -12.5%; } .marketing-demo-final { text-align: center; } .marketing-demo-final .ci-card__body { justify-items: center; padding-top: var(--ci-space-2xl); padding-bottom: var(--ci-space-2xl); } .marketing-demo-final p { max-width: 52ch; } @media (max-width: 980px) { .marketing-demo-highlights, .marketing-demo-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .marketing-demo-page { padding-top: 12px; } .marketing-demo-section { padding: var(--ci-space-xl) 0; } .marketing-demo-shell { padding: 0 16px; } } .marketing-faq-page { display: grid; gap: 0; padding: 24px 0 40px; } .marketing-faq-section { padding: var(--ci-space-2xl) 0; } .marketing-faq-shell { width: min(100%, var(--ci-public-shell-max, 1480px)); margin: 0 auto; padding: 0 var(--ci-public-shell-padding, 24px); } .marketing-faq-hero, .marketing-faq-group, .marketing-faq-final .ci-card__body { display: grid; gap: var(--ci-space-md); } .marketing-faq-hero { max-width: 68ch; } .marketing-faq-eyebrow { display: inline-flex; width: max-content; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--ci-radius-pill); background: rgba(227, 234, 240, 0.72); color: var(--accent-dark); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .marketing-faq-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--accent-dark); opacity: 0.8; } .marketing-faq-hero h1, .marketing-faq-group h2, .marketing-faq-item h3 { margin: 0; line-height: 1.04; } .marketing-faq-hero h1 { font-size: clamp(2.3rem, 4.7vw, 3.8rem); max-width: 10ch; } .marketing-faq-hero p, .marketing-faq-item p { margin: 0; line-height: 1.7; } .marketing-faq-groups, .marketing-faq-grid, .marketing-faq-quick-grid, .marketing-faq-next-grid { display: grid; gap: var(--ci-space-lg); } .marketing-faq-grid, .marketing-faq-quick-grid, .marketing-faq-next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .marketing-faq-trust .ci-card__body { display: grid; place-items: center; min-height: 92px; text-align: center; } .marketing-faq-next-card .ci-card__body { display: grid; gap: var(--ci-space-md); } .marketing-faq-final { text-align: center; } .marketing-faq-final .ci-card__body { justify-items: center; padding-top: var(--ci-space-2xl); padding-bottom: var(--ci-space-2xl); } .marketing-faq-final p { max-width: 52ch; } @media (max-width: 980px) { .marketing-faq-grid, .marketing-faq-quick-grid, .marketing-faq-next-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .marketing-faq-page { padding-top: 12px; } .marketing-faq-section { padding: var(--ci-space-xl) 0; } .marketing-faq-shell { padding: 0 16px; } } .marketing-flow-page { display: grid; gap: 0; padding: 24px 0 40px; } .marketing-flow-section { padding: var(--ci-space-2xl) 0; } .marketing-flow-section--tight { padding-top: var(--ci-space-xl); padding-bottom: var(--ci-space-xl); } .marketing-flow-shell { width: min(100%, var(--ci-public-shell-max, 1480px)); margin: 0 auto; padding: 0 var(--ci-public-shell-padding, 24px); } .marketing-flow-hero, .marketing-flow-section-head, .marketing-flow-final .ci-card__body { display: grid; gap: var(--ci-space-md); } .marketing-flow-hero { max-width: 68ch; } .marketing-flow-eyebrow { display: inline-flex; width: max-content; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--ci-radius-pill); background: rgba(227, 234, 240, 0.72); color: var(--accent-dark); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .marketing-flow-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--accent-dark); opacity: 0.8; } .marketing-flow-hero h1, .marketing-flow-section-head h2 { margin: 0; line-height: 1.04; } .marketing-flow-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 12ch; } .marketing-flow-hero p, .marketing-flow-section-head p { margin: 0; line-height: 1.7; } .marketing-flow-hero__actions { display: flex; gap: var(--ci-space-md); flex-wrap: wrap; } .marketing-flow-grid, .marketing-flow-conversion-grid, .marketing-flow-principles, .marketing-flow-stats, .marketing-flow-objection-grid { display: grid; gap: var(--ci-space-lg); } .marketing-flow-grid, .marketing-flow-stats, .marketing-flow-objection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .marketing-flow-conversion-grid, .marketing-flow-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marketing-flow-trust .ci-card__body { display: grid; place-items: center; min-height: 92px; text-align: center; } .marketing-flow-card .ci-card__body, .marketing-flow-principle .ci-card__body, .marketing-flow-conversion-card .ci-card__body, .marketing-flow-objection .ci-card__body { display: grid; gap: var(--ci-space-md); } .marketing-flow-card__number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 16px; background: rgba(227, 234, 240, 0.78); color: var(--accent-dark); font-weight: 800; } .marketing-flow-card__proof { padding-top: var(--ci-space-sm); border-top: 1px solid rgba(62, 92, 115, 0.12); color: var(--text-soft); font-size: 0.95rem; line-height: 1.6; } .marketing-flow-stat .ci-card__body { display: grid; gap: 6px; place-items: center; text-align: center; min-height: 120px; } .marketing-flow-stat strong { font-family: var(--ci-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--text-ink); } .marketing-flow-final { text-align: center; } .marketing-flow-final .ci-card__body { justify-items: center; padding-top: var(--ci-space-2xl); padding-bottom: var(--ci-space-2xl); } .marketing-flow-final p { max-width: 52ch; } @media (max-width: 980px) { .marketing-flow-grid, .marketing-flow-conversion-grid, .marketing-flow-principles, .marketing-flow-stats, .marketing-flow-objection-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .marketing-flow-page { padding-top: 12px; } .marketing-flow-section { padding: var(--ci-space-xl) 0; } .marketing-flow-shell { padding: 0 16px; } .marketing-flow-hero__actions { display: grid; } .marketing-flow-hero__actions .button { width: 100%; } } .marketing-heading-reset { margin: 0; } .marketing-faq-section--flush-top { padding-top: 0; } .marketing-faq-quick-grid--compact { grid-template-columns: repeat(2, minmax(0, 220px)); }

Click & Invite

Jetzt starten

Demo

Sieh frueh, wie dein Event spaeter wirklich wirken kann.

Die Demo-Seite liefert den fruehen Aha-Moment aus dem Zielbild: keine Theorie, sondern eine echte Vorschau mit denselben Templates, denselben Design-Tokens und derselben Renderlogik wie im restlichen System.

Jetzt starten How it works

Frueher Aha-Moment noch vor der eigentlichen Event-Erstellung

Echte Vorschau statt leerem Form-Start

Gleicher Design- und Rendering-Pfad wie im Produkt

Live-Vorschau

Zwei Beispielrichtungen, ein konsistenter Produktpfad.

Die Beispiele sind bewusst unterschiedlich, damit sofort sichtbar wird, dass derselbe Flow sowohl emotionale als auch sachlichere Event-Typen tragen kann.