Kommunikation & Präferenzen. Direkt einsetzbar.

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Newsletter · Ein guter Gedanke · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-engagement.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="be-block be-newsletter-layout" id="be-newsletter" data-be-newsletter aria-labelledby="be-newsletter-title">
  <div class="be-stack be-newsletter-mark">
<p class="be-eyebrow">Studio Notizen / Newsletter-Vorlage</p>
<h2 class="be-title" id="be-newsletter-title">Weniger Rauschen.<br>Ein guter Gedanke.</h2>
<p class="be-muted be-measure">Ein ruhiger Platz für neue Perspektiven, nützliche Werkzeuge und sorgfältig ausgewählte Ideen. So könnte die Anmeldung zu deinem Newsletter aussehen.</p>
<p class="be-small be-muted">Dies ist eine lokale Demonstration. Es gibt keinen echten Verteiler und keine Zustellung.</p>
</div>
  <form class="be-inline-form" method="dialog" aria-label="Newsletter lokal ausprobieren">
<div>
<label class="r-label" for="be-newsletter-email">Demo-E-Mail-Adresse</label>
<input class="r-input" id="be-newsletter-email" name="email" type="email" maxlength="120" required placeholder="name@example.com" autocomplete="off" aria-describedby="be-newsletter-help">
</div>
<button class="r-button r-button-primary" type="submit">Demo prüfen</button>
<p class="be-small be-muted be-wide" id="be-newsletter-help">Nur Testdaten eingeben. Die Adresse wird weder übertragen noch gespeichert. Ohne JavaScript wird ebenfalls nichts versendet.</p>
<div class="be-wide">
<button class="r-button r-button-sm" type="reset">Eingabe leeren</button>
</div>
<p class="be-small be-status be-wide" data-be-status role="status">
</p>
</form>
</section>
<script type="module">
import {initEngagementBlocks} from 'https://ui.rittek.de/assets/modules/blocks-engagement.js';
const cleanup = initEngagementBlocks(document.getElementById('be-newsletter'));
// Beim Entfernen: cleanup(); Erneutes Init ersetzt die bisherigen Listener.
// Präferenzen gelten nur bis Cleanup/Neuladen; keine Speicherung.
</script>
</body>
</html>

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ankündigung · Zum richtigen Zeitpunkt · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-engagement.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="be-block be-announcement be-stack" id="be-announcement" data-be-announcement aria-label="Ankündigungsbanner ausprobieren">
  <div class="be-banner" data-be-banner>
<div class="be-stack">
<p class="be-eyebrow">Neu im Studio / Beispielankündigung</p>
<h2 class="be-banner-title">Gute Ideen brauchen einen gemeinsamen Ort.</h2>
<p class="be-small be-muted">Unsere neue Projektübersicht verbindet Aufgaben und Entscheidungen in einem klaren Arbeitsbereich. Entdecke das Konzept in der Dokumentation.</p>
<div>
<a class="r-button r-button-sm" href="/docs/">Dokumentation ansehen</a>
</div>
</div>
<button class="r-button" type="button" data-be-dismiss aria-label="Ankündigung ausblenden">Schließen ×</button>
</div>
  <button class="r-button" type="button" data-be-reopen hidden>Ankündigung wieder anzeigen</button>
<p class="be-small be-muted">Die Sichtbarkeit gilt nur für diese Ansicht. Kein Cookie und keine Speicherung. Nach dem Schließen bleibt die Aktion zum Wiederanzeigen erreichbar.</p>
</section>
<script type="module">
import {initEngagementBlocks} from 'https://ui.rittek.de/assets/modules/blocks-engagement.js';
const cleanup = initEngagementBlocks(document.getElementById('be-announcement'));
// Beim Entfernen: cleanup(); Erneutes Init ersetzt die bisherigen Listener.
// Präferenzen gelten nur bis Cleanup/Neuladen; keine Speicherung.
</script>
</body>
</html>

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Präferenzen · Du entscheidest · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-engagement.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="be-block be-stack-lg" id="be-cookies" data-be-cookies aria-labelledby="be-cookies-title">
<div class="be-cookie-layout">
<header class="be-stack">
<p class="be-eyebrow">Präferenzen / reine UI-Demonstration</p>
<h2 class="be-title" id="be-cookies-title">Eine klare Entscheidung.<br>In deiner Hand.</h2>
<p class="be-muted be-measure">Dieses Beispiel zeigt einen Dialog für freiwillige Kategorien. Es setzt keine Cookies, speichert nichts und bindet keine Analyse- oder Marketingdienste ein.</p>
</header>
<button class="r-button r-button-primary" type="button" data-be-cookie-open aria-haspopup="dialog" aria-controls="be-cookies-dialog">Präferenzen öffnen</button>
</div>
<div class="be-cookie-summary">
<p class="be-small be-muted">Notwendig ist in der Darstellung immer aktiv. Statistik und Marketing starten ausgeschaltet. Deine Demo-Auswahl bleibt nur im Arbeitsspeicher bis zum Neuladen oder Entfernen des Moduls.</p>
</div>
<p class="be-small be-status" data-be-status role="status">
</p>
<noscript>
<p class="be-small be-muted">Der Einstellungsdialog benötigt JavaScript. Unabhängig davon lädt dieses Beispiel keine Tracker und setzt keine Cookies.</p>
</noscript>
  <dialog class="be-dialog" id="be-cookies-dialog" aria-labelledby="be-cookies-dialog-title" aria-describedby="be-cookies-dialog-help">
<div class="be-stack-lg">
<div class="be-dialog-header">
<div class="be-stack">
<p class="be-eyebrow">Deine Demo-Präferenzen</p>
<h3 class="be-dialog-title" id="be-cookies-dialog-title">Was darf dabei sein?</h3>
</div>
<button class="r-button r-button-sm" type="button" data-be-cookie-close aria-label="Präferenzen ohne Änderung schließen" autofocus>Schließen ×</button>
</div>
<p class="be-small be-muted" id="be-cookies-dialog-help">Nur eine Bedienungsdemo, keine Einwilligungsplattform. Schließen oder Escape verwirft ungespeicherte Änderungen. Es werden keine Dienste aktiviert.</p>
<div class="be-preference-list">
<div class="be-preference">
<div>
<label for="be-cookies-necessary">Notwendig · immer aktiv</label>
<p class="be-small be-muted" id="be-cookies-necessary-help">Steht für grundlegende Funktionen einer echten Anwendung. Diese Demo erzeugt auch dafür keine Cookies.</p>
</div>
<input class="r-check" id="be-cookies-necessary" name="necessary" type="checkbox" checked disabled aria-describedby="be-cookies-necessary-help">
</div>
<div class="be-preference">
<div>
<label for="be-cookies-statistics">Statistik · optional</label>
<p class="be-small be-muted" id="be-cookies-statistics-help">Würde die Nutzung einer Anwendung messbar machen. Hier wird kein Analysedienst geladen.</p>
</div>
<input class="r-check" id="be-cookies-statistics" name="statistics" type="checkbox" aria-describedby="be-cookies-statistics-help">
</div>
<div class="be-preference">
<div>
<label for="be-cookies-marketing">Marketing · optional</label>
<p class="be-small be-muted" id="be-cookies-marketing-help">Würde externe Marketingfunktionen erlauben. Hier werden weder Werbung noch externe Skripte eingebunden.</p>
</div>
<input class="r-check" id="be-cookies-marketing" name="marketing" type="checkbox" aria-describedby="be-cookies-marketing-help">
</div>
</div>
<div class="be-actions">
<button class="r-button" type="button" data-be-cookie-action="necessary">Nur notwendig</button>
<button class="r-button" type="button" data-be-cookie-action="all">Alle auswählen</button>
<button class="r-button r-button-primary" type="button" data-be-cookie-action="save">Auswahl speichern</button>
</div>
<p class="be-small be-muted">„Speichern“ bedeutet hier ausschließlich flüchtigen Demo-Zustand. Beim Wiederöffnen kannst du ihn erneut ändern.</p>
</div>
</dialog>
</section>
<script type="module">
import {initEngagementBlocks} from 'https://ui.rittek.de/assets/modules/blocks-engagement.js';
const cleanup = initEngagementBlocks(document.getElementById('be-cookies'));
// Beim Entfernen: cleanup(); Erneutes Init ersetzt die bisherigen Listener.
// Präferenzen gelten nur bis Cleanup/Neuladen; keine Speicherung.
</script>
</body>
</html>

<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Stimmen · Perspektiven wechseln · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-engagement.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="be-block be-testimonial-layout" id="be-testimonials" data-be-testimonials aria-labelledby="be-testimonials-title">
<header class="be-stack">
<p class="be-eyebrow">Beispielstimmen / fiktive Personen</p>
<h2 class="be-title" id="be-testimonials-title" tabindex="-1" data-be-quote-focus>Was gute Zusammenarbeit verändert.</h2>
<p class="be-muted">Drei erfundene Perspektiven zeigen, wie ein Referenzbereich aufgebaut sein kann. Keine echten Kundenbewertungen oder Leistungsversprechen.</p>
<p class="be-small be-muted">Wechsle die Stimmen in deinem Tempo. Es gibt keine automatische Rotation. Ohne JavaScript bleiben alle drei sichtbar.</p>
</header>
<div class="be-quotes">
<div>
<figure class="be-quote" data-be-quote>
<blockquote>
<p>„Zum ersten Mal lagen die Entscheidung und ihr Kontext nebeneinander. Das hat unsere Gespräche konkreter gemacht – und den nächsten Schritt viel klarer.“</p>
</blockquote>
<figcaption>
<span class="be-avatar" aria-hidden="true">MN</span>
<div>
<strong>Mara Nord</strong>
<p class="be-small be-muted">Fiktives Profil · Produktstrategie</p>
</div>
</figcaption>
</figure>
<figure class="be-quote" data-be-quote>
<blockquote>
<p>„Ein gutes System nimmt uns die Arbeit nicht ab. Aber es hilft uns, die richtigen Fragen früher zu stellen und Verantwortlichkeiten gemeinsam zu verstehen.“</p>
</blockquote>
<figcaption>
<span class="be-avatar" aria-hidden="true">TK</span>
<div>
<strong>Theo Kern</strong>
<p class="be-small be-muted">Fiktives Profil · Projektleitung</p>
</div>
</figcaption>
</figure>
<figure class="be-quote" data-be-quote>
<blockquote>
<p>„Die ruhige Oberfläche hat Raum für die Inhalte geschaffen. Wir mussten weniger erklären und konnten uns stärker darauf konzentrieren, was wir eigentlich erreichen wollten.“</p>
</blockquote>
<figcaption>
<span class="be-avatar" aria-hidden="true">AS</span>
<div>
<strong>Ari Sommer</strong>
<p class="be-small be-muted">Fiktives Profil · Gestaltung</p>
</div>
</figcaption>
</figure>
</div>
<div class="be-quote-controls" data-be-quote-controls hidden>
<button class="r-button" type="button" data-be-previous aria-label="Vorherige Beispielstimme">← Zurück</button>
<span class="be-small be-muted" data-be-quote-index aria-label="Aktuelle Beispielstimme">1 / 3</span>
<button class="r-button" type="button" data-be-next aria-label="Nächste Beispielstimme">Weiter →</button>
</div>
<p class="be-small be-status" data-be-status role="status">
</p>
</div>
</section>
<script type="module">
import {initEngagementBlocks} from 'https://ui.rittek.de/assets/modules/blocks-engagement.js';
const cleanup = initEngagementBlocks(document.getElementById('be-testimonials'));
// Beim Entfernen: cleanup(); Erneutes Init ersetzt die bisherigen Listener.
// Präferenzen gelten nur bis Cleanup/Neuladen; keine Speicherung.
</script>
</body>
</html>