Zum Inhalt
r/ rittek uiDOCS

RITTEK BLOCKS / Marketing

Marketing. Direkt einsetzbar.

Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.

Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.

Marketing

Split Hero · Klarer Kurs

Geschäftlicher Einstieg mit eigenem CSS-Dashboard, Leistungsversprechen und klarer Handlungsführung.

Vollständiges HTML herunterladen ↧

Studio Nord / Digitale Arbeitsräume

Mehr Klarheit.
Weniger Umwege.

Dein Team verdient einen Arbeitsplatz, der mitdenkt. Verbinde Projekte, Menschen und Entscheidungen in einer ruhigen, klaren Oberfläche.

Gedacht für
Kleine Teams
Im Mittelpunkt
Dein Workflow
Von Anfang an
Übersichtlich
Workspace / ÜbersichtIm Flow

Dein nächster Meilenstein

Website gemeinsam starten

Dekorative Darstellung eines stetigen Projektfortschritts.

Eine Entscheidung, ein klarer Ort.

Briefing abgestimmt · Nächster Schritt: Entwurf

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Split Hero · Klarer Kurs · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-columns" id="bm-hero" aria-labelledby="bm-hero-title">
  <div class="bm-stack-lg">
    <p class="bm-eyebrow">Studio Nord / Digitale Arbeitsräume</p>
    <h2 class="bm-title" id="bm-hero-title">Mehr Klarheit.<br>
<em>Weniger Umwege.</em>
</h2>
    <p class="bm-lead">Dein Team verdient einen Arbeitsplatz, der mitdenkt. Verbinde Projekte, Menschen und Entscheidungen in einer ruhigen, klaren Oberfläche.</p>
    <div class="bm-actions">
<a class="r-button r-button-primary" href="/docs/">Möglichkeiten entdecken</a>
<a class="r-button" href="#bm-hero-details">Unser Ansatz</a>
</div>
    <dl class="bm-metrics" id="bm-hero-details">
<div>
<dt>Gedacht für</dt>
<dd>Kleine Teams</dd>
</div>
<div>
<dt>Im Mittelpunkt</dt>
<dd>Dein Workflow</dd>
</div>
<div>
<dt>Von Anfang an</dt>
<dd>Übersichtlich</dd>
</div>
</dl>
  </div>
  <div class="bm-board bm-stack" aria-label="Illustrative Projektvorschau, keine echten Geschäftsdaten">
    <div class="bm-board-top">
<strong>Workspace / Übersicht</strong>
<span class="bm-small">
<span class="bm-dot" aria-hidden="true">
</span>Im Flow</span>
</div>
    <div>
<p class="bm-small bm-muted">Dein nächster Meilenstein</p>
<h3 class="bm-subheading">Website gemeinsam starten</h3>
</div>
    <div class="bm-bars" aria-hidden="true">
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</div>
    <p class="bm-small bm-muted">Dekorative Darstellung eines stetigen Projektfortschritts.</p>
    <div class="bm-board-note">
<strong>Eine Entscheidung, ein klarer Ort.</strong>
<p class="bm-small bm-muted">Briefing abgestimmt · Nächster Schritt: Entwurf</p>
</div>
  </div>
</section>
</body>
</html>

Marketing

Bento Features · Ein System

Asymmetrisches Funktionsraster mit fünf inhaltlich ausgearbeiteten Bausteinen und lesbaren Themenchips.

Vollständiges HTML herunterladen ↧

Die richtige Grundlage

Nicht mehr Werkzeuge.
Mehr Zusammenspiel.

Ein durchdachtes System schafft Raum für die eigentliche Arbeit – vom ersten Gedanken bis zum letzten Detail.

01 / ZUSAMMENARBEIT

Ein gemeinsamer Blick auf das Wesentliche.

Halte Entscheidungen, Aufgaben und Kontext zusammen. So kann jedes Teammitglied nachvollziehen, warum der nächste Schritt wichtig ist.

ProjekteVerantwortungTransparenz
02 / STRUKTUR

Ordnung, die bleibt.

Klare Zuständigkeiten und nachvollziehbare Abläufe statt verstreuter Notizen.

03 / FOKUS

Weniger Ablenkung.

Eine ruhige Oberfläche macht die nächste sinnvolle Handlung sichtbar.

04 / FLEXIBILITÄT

Dein eigener Rhythmus.

Vom kompakten Projektboard zur großzügigen Übersicht – passend zu deinem Team.

05 / KONTINUITÄT

Heute starten. Morgen erweitern.

Baue Schritt für Schritt auf einer verständlichen, konsistenten Grundlage auf.

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bento Features · Ein System · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-stack-lg" id="bm-features" aria-labelledby="bm-features-title">
  <header class="bm-stack">
<p class="bm-eyebrow">Die richtige Grundlage</p>
<h2 class="bm-heading" id="bm-features-title">Nicht mehr Werkzeuge.<br>Mehr Zusammenspiel.</h2>
<p class="bm-lead">Ein durchdachtes System schafft Raum für die eigentliche Arbeit – vom ersten Gedanken bis zum letzten Detail.</p>
</header>
  <div class="bm-bento">
    <article class="bm-tile bm-tile-wide bm-tile-accent">
<span class="bm-index">01 / ZUSAMMENARBEIT</span>
<h3 class="bm-subheading">Ein gemeinsamer Blick auf das Wesentliche.</h3>
<p class="bm-muted">Halte Entscheidungen, Aufgaben und Kontext zusammen. So kann jedes Teammitglied nachvollziehen, warum der nächste Schritt wichtig ist.</p>
<div class="bm-token-row">
<span class="bm-token">Projekte</span>
<span class="bm-token">Verantwortung</span>
<span class="bm-token">Transparenz</span>
</div>
</article>
    <article class="bm-tile">
<span class="bm-index">02 / STRUKTUR</span>
<h3 class="bm-subheading">Ordnung, die bleibt.</h3>
<p class="bm-muted">Klare Zuständigkeiten und nachvollziehbare Abläufe statt verstreuter Notizen.</p>
</article>
    <article class="bm-tile">
<span class="bm-index">03 / FOKUS</span>
<h3 class="bm-subheading">Weniger Ablenkung.</h3>
<p class="bm-muted">Eine ruhige Oberfläche macht die nächste sinnvolle Handlung sichtbar.</p>
</article>
    <article class="bm-tile">
<span class="bm-index">04 / FLEXIBILITÄT</span>
<h3 class="bm-subheading">Dein eigener Rhythmus.</h3>
<p class="bm-muted">Vom kompakten Projektboard zur großzügigen Übersicht – passend zu deinem Team.</p>
</article>
    <article class="bm-tile">
<span class="bm-index">05 / KONTINUITÄT</span>
<h3 class="bm-subheading">Heute starten. Morgen erweitern.</h3>
<p class="bm-muted">Baue Schritt für Schritt auf einer verständlichen, konsistenten Grundlage auf.</p>
</article>
  </div>
</section>
</body>
</html>

Marketing

Preise · Transparent planen

Drei ausgearbeitete Tarife, echte Monat/Jahr-Umschaltung und lokale Paketauswahl ohne Bestellvorgang.

Vollständiges HTML herunterladen ↧

Beispieltarife / keine echten Angebote

Passend für deinen nächsten Schritt.

Die Zahlen zeigen die Funktion dieser Vorlage. Alle Beträge sind beispielhafte Gesamtpreise pro Team, nicht pro Person.

Ohne JavaScript gelten die angezeigten Monatspreise. Kein Kauf und keine Zahlung in dieser Demo.

Studio

Für einen guten Anfang.

29 € / Monat

Monatlich abgerechnet. Jederzeit zum Laufzeitende kündbar.

  • Ein gemeinsamer Workspace
  • Bis zu 5 Teammitglieder
  • Unbegrenzte Notizen
  • Standard-Projektansichten

Individuell

Für besondere Abläufe.

Im Gespräch

Umfang und Preis werden gemeinsam festgelegt. Kein Standard-Abonnement.

  • Individuelle Teamgröße
  • Abgestimmte Einführung
  • Eigene Integrationen
  • Persönliche Ansprechperson

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Preise · Transparent planen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-stack-lg" id="bm-pricing" data-bm-pricing aria-labelledby="bm-pricing-title">
  <header class="bm-stack">
<p class="bm-eyebrow">Beispieltarife / keine echten Angebote</p>
<h2 class="bm-heading" id="bm-pricing-title">Passend für deinen nächsten Schritt.</h2>
<p class="bm-lead">Die Zahlen zeigen die Funktion dieser Vorlage. Alle Beträge sind beispielhafte Gesamtpreise pro Team, nicht pro Person.</p>
<div class="bm-price-switch" role="group" aria-label="Abrechnungszeitraum">
<button class="r-button" type="button" data-bm-cycle="monthly" aria-pressed="true">Monatlich</button>
<button class="r-button" type="button" data-bm-cycle="yearly" aria-pressed="false">Jährlich · günstiger pro Monat</button>
</div>
<p class="bm-small bm-muted">Ohne JavaScript gelten die angezeigten Monatspreise. Kein Kauf und keine Zahlung in dieser Demo.</p>
</header>
  <div class="bm-pricing-grid">
    <article class="bm-plan" data-bm-plan="studio">
<p class="bm-eyebrow">Studio</p>
<h3 class="bm-subheading">Für einen guten Anfang.</h3>
<p class="bm-price">
<span data-bm-amount>29 €</span> <small>/ Monat</small>
</p>
<p class="bm-small bm-muted bm-billing" data-bm-billing>Monatlich abgerechnet. Jederzeit zum Laufzeitende kündbar.</p>
<ul>
<li>Ein gemeinsamer Workspace</li>
<li>Bis zu 5 Teammitglieder</li>
<li>Unbegrenzte Notizen</li>
<li>Standard-Projektansichten</li>
</ul>
<button class="r-button" type="button" data-bm-select="Studio">Studio ansehen</button>
</article>
    <article class="bm-plan bm-plan-featured" data-bm-plan="scale">
<p class="bm-eyebrow">Scale / mehr Spielraum</p>
<h3 class="bm-subheading">Wenn dein Team wächst.</h3>
<p class="bm-price">
<span data-bm-amount>59 €</span> <small>/ Monat</small>
</p>
<p class="bm-small bm-muted bm-billing" data-bm-billing>Monatlich abgerechnet. Jederzeit zum Laufzeitende kündbar.</p>
<ul>
<li>Alles aus Studio</li>
<li>Bis zu 20 Teammitglieder</li>
<li>Mehrere Projektbereiche</li>
<li>Erweiterte Übersichten</li>
</ul>
<button class="r-button r-button-primary" type="button" data-bm-select="Scale">Scale ansehen</button>
</article>
    <article class="bm-plan">
<p class="bm-eyebrow">Individuell</p>
<h3 class="bm-subheading">Für besondere Abläufe.</h3>
<p class="bm-price">Im Gespräch</p>
<p class="bm-small bm-muted bm-billing">Umfang und Preis werden gemeinsam festgelegt. Kein Standard-Abonnement.</p>
<ul>
<li>Individuelle Teamgröße</li>
<li>Abgestimmte Einführung</li>
<li>Eigene Integrationen</li>
<li>Persönliche Ansprechperson</li>
</ul>
<button class="r-button" type="button" data-bm-select="Individuell">Bedarf vormerken</button>
</article>
  </div>
<p class="bm-small bm-muted bm-status" data-bm-pricing-status role="status">
</p>
</section>
<script type="module">
import {initMarketingBlocks} from 'https://ui.rittek.de/assets/modules/blocks-marketing.js';
const cleanup = initMarketingBlocks(document.getElementById('bm-pricing'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>

Marketing

FAQ · Gute Antworten

Native Details-Elemente mit sechs vollständigen Antworten, ohne JavaScript und mit Mehrfachöffnung.

Vollständiges HTML herunterladen ↧

Gut zu wissen

Ein paar Fragen.
Klare Antworten.

Die wichtigsten Informationen für deinen Start. Die Antworten sind Beispieltexte und sollten an dein tatsächliches Angebot angepasst werden.

Mehrere Antworten können gleichzeitig geöffnet bleiben.

Für wen ist das Angebot gedacht?

Für kleine und wachsende Teams, die ihre Projekte gemeinsam strukturieren möchten. Der Schwerpunkt liegt auf verständlichen Abläufen und einer klaren Übersicht.

Wie aufwendig ist der Einstieg?

Beginne mit einem Workspace und einem ersten Projekt. Ergänze weitere Bereiche erst dann, wenn sie für deinen Arbeitsalltag hilfreich sind.

Kann ich bestehende Abläufe übernehmen?

Die Vorlage lässt Raum für eigene Prozesse. Welche Daten oder Integrationen übernommen werden können, muss für die konkrete Anwendung gesondert geprüft werden.

Was bedeutet jährliche Abrechnung?

Bei einem Jahrestarif wird der gesamte Jahresbetrag auf einmal abgerechnet. Der angezeigte Monatspreis dient dem Vergleich. Die Demo zeigt beide Beträge ausdrücklich an.

Werden hier bereits Daten gespeichert?

Diese Marketingblöcke sind lokale Demonstrationen. Paketauswahl und Kontaktformular versenden keine Daten und benötigen keine Anmeldung.

Wie passe ich die Gestaltung an?

Farben, Schrift und Dichte folgen den Rittek-Tokens deiner Seite. Inhalte und Komponenten lassen sich unabhängig davon anpassen.

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>FAQ · Gute Antworten · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-columns" id="bm-faq" aria-labelledby="bm-faq-title">
  <header class="bm-stack">
<p class="bm-eyebrow">Gut zu wissen</p>
<h2 class="bm-heading" id="bm-faq-title">Ein paar Fragen.<br>Klare Antworten.</h2>
<p class="bm-lead">Die wichtigsten Informationen für deinen Start. Die Antworten sind Beispieltexte und sollten an dein tatsächliches Angebot angepasst werden.</p>
<p class="bm-small bm-muted">Mehrere Antworten können gleichzeitig geöffnet bleiben.</p>
</header>
  <div class="bm-faq">
<details open>
<summary>Für wen ist das Angebot gedacht?</summary>
<p>Für kleine und wachsende Teams, die ihre Projekte gemeinsam strukturieren möchten. Der Schwerpunkt liegt auf verständlichen Abläufen und einer klaren Übersicht.</p>
</details>
<details>
<summary>Wie aufwendig ist der Einstieg?</summary>
<p>Beginne mit einem Workspace und einem ersten Projekt. Ergänze weitere Bereiche erst dann, wenn sie für deinen Arbeitsalltag hilfreich sind.</p>
</details>
<details>
<summary>Kann ich bestehende Abläufe übernehmen?</summary>
<p>Die Vorlage lässt Raum für eigene Prozesse. Welche Daten oder Integrationen übernommen werden können, muss für die konkrete Anwendung gesondert geprüft werden.</p>
</details>
<details>
<summary>Was bedeutet jährliche Abrechnung?</summary>
<p>Bei einem Jahrestarif wird der gesamte Jahresbetrag auf einmal abgerechnet. Der angezeigte Monatspreis dient dem Vergleich. Die Demo zeigt beide Beträge ausdrücklich an.</p>
</details>
<details>
<summary>Werden hier bereits Daten gespeichert?</summary>
<p>Diese Marketingblöcke sind lokale Demonstrationen. Paketauswahl und Kontaktformular versenden keine Daten und benötigen keine Anmeldung.</p>
</details>
<details>
<summary>Wie passe ich die Gestaltung an?</summary>
<p>Farben, Schrift und Dichte folgen den Rittek-Tokens deiner Seite. Inhalte und Komponenten lassen sich unabhängig davon anpassen.</p>
</details>
</div>
</section>
</body>
</html>

Marketing

Team · Menschen mit Haltung

Drei Teamprofile mit Initialen, Rollen, ausführlichem Fokus und zugänglicher Darstellung ohne Bildabhängigkeit.

Vollständiges HTML herunterladen ↧

Beispielteam / fiktive Profile

Gute Arbeit beginnt
mit guten Verbindungen.

Drei Perspektiven, eine gemeinsame Haltung: Dinge verständlich machen und mit Sorgfalt umsetzen.

Lena Morgen

Strategie & Produkt

Verbindet die Ziele eines Unternehmens mit den Bedürfnissen der Menschen, die täglich mit dem Produkt arbeiten.

Fokus: die richtigen Fragen stellen.

Jonas Kern

Design & Systeme

Entwickelt klare visuelle Systeme, die Orientierung geben und Raum für einen eigenen Charakter lassen.

Fokus: Konsistenz bis ins Detail.

Alex Sommer

Entwicklung & Qualität

Macht aus guten Ideen belastbare Oberflächen und achtet darauf, dass sie im Alltag angenehm bedienbar bleiben.

Fokus: verständliche Technik.

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Team · Menschen mit Haltung · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-stack-lg" id="bm-team" aria-labelledby="bm-team-title">
<header class="bm-stack">
<p class="bm-eyebrow">Beispielteam / fiktive Profile</p>
<h2 class="bm-heading" id="bm-team-title">Gute Arbeit beginnt<br>mit guten Verbindungen.</h2>
<p class="bm-lead">Drei Perspektiven, eine gemeinsame Haltung: Dinge verständlich machen und mit Sorgfalt umsetzen.</p>
</header>
<div class="bm-team-grid">
  <article class="bm-person">
<div class="bm-initials" aria-hidden="true">LM</div>
<div>
<h3 class="bm-subheading">Lena Morgen</h3>
<p class="bm-small bm-muted">Strategie &amp; Produkt</p>
</div>
<p>Verbindet die Ziele eines Unternehmens mit den Bedürfnissen der Menschen, die täglich mit dem Produkt arbeiten.</p>
<p class="bm-small bm-muted">Fokus: die richtigen Fragen stellen.</p>
</article>
  <article class="bm-person">
<div class="bm-initials" aria-hidden="true">JK</div>
<div>
<h3 class="bm-subheading">Jonas Kern</h3>
<p class="bm-small bm-muted">Design &amp; Systeme</p>
</div>
<p>Entwickelt klare visuelle Systeme, die Orientierung geben und Raum für einen eigenen Charakter lassen.</p>
<p class="bm-small bm-muted">Fokus: Konsistenz bis ins Detail.</p>
</article>
  <article class="bm-person">
<div class="bm-initials" aria-hidden="true">AS</div>
<div>
<h3 class="bm-subheading">Alex Sommer</h3>
<p class="bm-small bm-muted">Entwicklung &amp; Qualität</p>
</div>
<p>Macht aus guten Ideen belastbare Oberflächen und achtet darauf, dass sie im Alltag angenehm bedienbar bleiben.</p>
<p class="bm-small bm-muted">Fokus: verständliche Technik.</p>
</article>
</div>
</section>
</body>
</html>

Marketing

Kontakt · Das nächste Gespräch

Vollständiges lokal validiertes Formular mit Pflichtfeldern, Zustimmungsfeld und klar abgegrenztem Demo-Erfolg.

Vollständiges HTML herunterladen ↧

Kontakt / lokale Demonstration

Was hast du vor?

Erzähl uns von deiner Idee. Diese Vorlage zeigt die Bedienung eines Kontaktformulars – sie stellt keine echte Kontaktaufnahme her.

Nur zum Ausprobieren.

Bitte keine persönlichen oder vertraulichen Angaben eingeben. Die Felder werden lokal geprüft; nichts wird versendet oder gespeichert.

10–2.000 Zeichen. Nur Demo-Inhalte eingeben.

* Pflichtfelder. Ohne JavaScript wird ebenfalls nichts versendet.

HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kontakt · Das nächste Gespräch · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-columns" id="bm-contact" aria-labelledby="bm-contact-title">
<header class="bm-stack">
<p class="bm-eyebrow">Kontakt / lokale Demonstration</p>
<h2 class="bm-heading" id="bm-contact-title">Was hast du vor?</h2>
<p class="bm-lead">Erzähl uns von deiner Idee. Diese Vorlage zeigt die Bedienung eines Kontaktformulars – sie stellt keine echte Kontaktaufnahme her.</p>
<div class="bm-board-note">
<h3 class="bm-subheading">Nur zum Ausprobieren.</h3>
<p class="bm-small bm-muted">Bitte keine persönlichen oder vertraulichen Angaben eingeben. Die Felder werden lokal geprüft; nichts wird versendet oder gespeichert.</p>
</div>
</header>
  <form class="bm-stack" method="dialog" data-bm-contact aria-label="Demo-Kontaktformular">
<div class="bm-contact-fields">
<div>
<label class="r-label" for="bm-contact-name">Name *</label>
<input class="r-input" id="bm-contact-name" name="name" type="text" required minlength="2" maxlength="80" autocomplete="off">
</div>
<div>
<label class="r-label" for="bm-contact-email">E-Mail *</label>
<input class="r-input" id="bm-contact-email" name="email" type="email" required maxlength="120" autocomplete="off">
</div>
<div class="bm-contact-wide">
<label class="r-label" for="bm-contact-subject">Worum geht es?</label>
<select class="r-input" id="bm-contact-subject" name="subject">
<option value="project">Ein neues Projekt</option>
<option value="design">Design &amp; Gestaltung</option>
<option value="other">Eine andere Frage</option>
</select>
</div>
<div class="bm-contact-wide">
<label class="r-label" for="bm-contact-message">Deine Nachricht *</label>
<textarea class="r-input bm-contact-message" id="bm-contact-message" name="message" required minlength="10" maxlength="2000" aria-describedby="bm-contact-help">
</textarea>
<p class="bm-small bm-muted" id="bm-contact-help">10–2.000 Zeichen. Nur Demo-Inhalte eingeben.</p>
</div>
</div>
<label class="bm-check-label" for="bm-contact-consent">
<input class="r-check" id="bm-contact-consent" type="checkbox" required name="demoConsent">
<span>Ich habe verstanden, dass diese Demo keine Nachricht versendet. *</span>
</label>
<div class="bm-actions">
<button class="r-button r-button-primary" type="submit">Demo lokal prüfen</button>
<button class="r-button" type="reset">Zurücksetzen</button>
</div>
<p class="bm-small bm-muted">* Pflichtfelder. Ohne JavaScript wird ebenfalls nichts versendet.</p>
<p class="bm-small bm-status" data-bm-contact-status role="status">
</p>
</form>
</section>
<script type="module">
import {initMarketingBlocks} from 'https://ui.rittek.de/assets/modules/blocks-marketing.js';
const cleanup = initMarketingBlocks(document.getElementById('bm-contact'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>