Zum Inhalt
r/ rittek uiDOCS

RITTEK BLOCKS / Inhalte & Redaktion

Inhalte & Redaktion. 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.

Inhalte & Redaktion

Journal · Gedanken in Ordnung

Sechs eigene redaktionelle Karten mit kombinierbarer Volltextsuche und nativer Kategorienauswahl; ganze Kurzbeiträge über native Details.

Vollständiges HTML herunterladen ↧

Rittek / Journal

Gedanken, die
weiterführen.

Eigene Beispieltexte über Gestaltung, Praxis und Zusammenarbeit. Suche und Kategorie wirken auf dieselben Beiträge; ohne JavaScript bleiben alle lesbar.

6 Beispielbeiträge.

Gestaltung / Studio Notizen

Wie viel System braucht eine gute Idee?

Ein System ist kein Selbstzweck. Es soll die Arbeit mit Inhalten erleichtern und Raum für das Eigene lassen.

Redaktion / fiktive Beispielbeiträge

Beitrag im Raster lesen

Beginne mit wiederkehrenden Entscheidungen. Halte fest, was zusammengehört, und prüfe dein System an echten Inhalten statt an leeren Platzhaltern.

Praxis / Studio Notizen

Weniger Felder, bessere Fragen.

Formulare gewinnen, wenn ihre Fragen verständlich sind und der nächste Schritt vorhersehbar bleibt.

Redaktion / fiktive Beispielbeiträge

Beitrag im Raster lesen

Jedes Feld braucht einen nachvollziehbaren Zweck. Hilfetexte erklären die Erwartung, Fehlermeldungen zeigen einen konkreten Weg zur Korrektur.

Zusammenarbeit / Studio Notizen

Entscheidungen brauchen einen Ort.

Gemeinsame Arbeit wird leichter, wenn der Kontext nicht zwischen Chats und Dokumenten verloren geht.

Redaktion / fiktive Beispielbeiträge

Beitrag im Raster lesen

Eine Entscheidung ist mehr als ihr Ergebnis. Notiere Anlass, Beteiligte und den nächsten Prüfzeitpunkt, damit auch spätere Teammitglieder folgen können.

Gestaltung / Studio Notizen

Lesbarkeit ist eine Gestaltungsentscheidung.

Rhythmus entsteht aus Hierarchie, Zeilenlänge und sinnvollen Abständen.

Redaktion / fiktive Beispielbeiträge

Beitrag im Raster lesen

Prüfe lange Überschriften und echte Absätze. Eine Oberfläche sollte auch bei größerer Schrift und kompakten Abständen noch Orientierung geben.

Praxis / Studio Notizen

Ein kleiner Test vor dem großen Start.

Ein überschaubarer Prototyp zeigt früh, ob eine Idee im Arbeitsalltag trägt.

Redaktion / fiktive Beispielbeiträge

Beitrag im Raster lesen

Wähle einen konkreten Ablauf. Beobachte, wo Menschen zögern, und verbessere diese Stelle, bevor du weitere Funktionen ergänzt.

Zusammenarbeit / Studio Notizen

Feedback mit einem klaren Auftrag.

Eine gute Rückmeldung beginnt mit der Frage, welche Entscheidung sie ermöglichen soll.

Redaktion / fiktive Beispielbeiträge

Beitrag im Raster lesen

Trenne Beobachtung, Wirkung und Vorschlag. So bleibt die Rückmeldung verständlich und das Team kann unterschiedliche Möglichkeiten bewusst abwägen.

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>Journal · Gedanken in Ordnung · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-editorial.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ed-block ed-stack-lg" id="ed-journal" data-ed-list aria-labelledby="ed-journal-title">
<header class="ed-stack">
<p class="ed-eyebrow">Rittek / Journal</p>
<h2 class="ed-title" id="ed-journal-title">Gedanken, die<br>weiterführen.</h2>
<p class="ed-muted">Eigene Beispieltexte über Gestaltung, Praxis und Zusammenarbeit. Suche und Kategorie wirken auf dieselben Beiträge; ohne JavaScript bleiben alle lesbar.</p>
</header>
<form class="ed-filters" method="dialog" data-ed-filter-form aria-label="Einträge filtern">
<label class="r-label" for="ed-journal-search">Suchen<input class="r-input" id="ed-journal-search" type="search" data-ed-search placeholder="Suchbegriff" autocomplete="off">
</label>
<label class="r-label" for="ed-journal-category">Bereich<select class="r-input" id="ed-journal-category" data-ed-category>
<option value="all">Alle Bereiche</option>
<option value="design">Gestaltung</option>
<option value="praxis">Praxis</option>
<option value="team">Zusammenarbeit</option>
</select>
</label>
<button class="r-button" type="reset">Zurücksetzen</button>
</form>
<p class="ed-small ed-muted" data-ed-status role="status">6 Beispielbeiträge.</p>
<p class="r-alert" data-ed-empty hidden>Keine passenden Beiträge. Ändere die Suche oder setze die Filter zurück.</p>
<div class="ed-grid">
<article class="ed-card" data-ed-item data-ed-category="design">
<span class="ed-card-number" aria-hidden="true">01</span>
<p class="ed-eyebrow">Gestaltung / Studio Notizen</p>
<h3 class="ed-heading">Wie viel System braucht eine gute Idee?</h3>
<p class="ed-muted">Ein System ist kein Selbstzweck. Es soll die Arbeit mit Inhalten erleichtern und Raum für das Eigene lassen.</p>
<p class="ed-small ed-muted">Redaktion / fiktive Beispielbeiträge</p>
<details>
<summary>Beitrag im Raster lesen</summary>
<p>Beginne mit wiederkehrenden Entscheidungen. Halte fest, was zusammengehört, und prüfe dein System an echten Inhalten statt an leeren Platzhaltern.</p>
</details>
</article>
<article class="ed-card" data-ed-item data-ed-category="praxis">
<span class="ed-card-number" aria-hidden="true">02</span>
<p class="ed-eyebrow">Praxis / Studio Notizen</p>
<h3 class="ed-heading">Weniger Felder, bessere Fragen.</h3>
<p class="ed-muted">Formulare gewinnen, wenn ihre Fragen verständlich sind und der nächste Schritt vorhersehbar bleibt.</p>
<p class="ed-small ed-muted">Redaktion / fiktive Beispielbeiträge</p>
<details>
<summary>Beitrag im Raster lesen</summary>
<p>Jedes Feld braucht einen nachvollziehbaren Zweck. Hilfetexte erklären die Erwartung, Fehlermeldungen zeigen einen konkreten Weg zur Korrektur.</p>
</details>
</article>
<article class="ed-card" data-ed-item data-ed-category="team">
<span class="ed-card-number" aria-hidden="true">03</span>
<p class="ed-eyebrow">Zusammenarbeit / Studio Notizen</p>
<h3 class="ed-heading">Entscheidungen brauchen einen Ort.</h3>
<p class="ed-muted">Gemeinsame Arbeit wird leichter, wenn der Kontext nicht zwischen Chats und Dokumenten verloren geht.</p>
<p class="ed-small ed-muted">Redaktion / fiktive Beispielbeiträge</p>
<details>
<summary>Beitrag im Raster lesen</summary>
<p>Eine Entscheidung ist mehr als ihr Ergebnis. Notiere Anlass, Beteiligte und den nächsten Prüfzeitpunkt, damit auch spätere Teammitglieder folgen können.</p>
</details>
</article>
<article class="ed-card" data-ed-item data-ed-category="design">
<span class="ed-card-number" aria-hidden="true">04</span>
<p class="ed-eyebrow">Gestaltung / Studio Notizen</p>
<h3 class="ed-heading">Lesbarkeit ist eine Gestaltungsentscheidung.</h3>
<p class="ed-muted">Rhythmus entsteht aus Hierarchie, Zeilenlänge und sinnvollen Abständen.</p>
<p class="ed-small ed-muted">Redaktion / fiktive Beispielbeiträge</p>
<details>
<summary>Beitrag im Raster lesen</summary>
<p>Prüfe lange Überschriften und echte Absätze. Eine Oberfläche sollte auch bei größerer Schrift und kompakten Abständen noch Orientierung geben.</p>
</details>
</article>
<article class="ed-card" data-ed-item data-ed-category="praxis">
<span class="ed-card-number" aria-hidden="true">05</span>
<p class="ed-eyebrow">Praxis / Studio Notizen</p>
<h3 class="ed-heading">Ein kleiner Test vor dem großen Start.</h3>
<p class="ed-muted">Ein überschaubarer Prototyp zeigt früh, ob eine Idee im Arbeitsalltag trägt.</p>
<p class="ed-small ed-muted">Redaktion / fiktive Beispielbeiträge</p>
<details>
<summary>Beitrag im Raster lesen</summary>
<p>Wähle einen konkreten Ablauf. Beobachte, wo Menschen zögern, und verbessere diese Stelle, bevor du weitere Funktionen ergänzt.</p>
</details>
</article>
<article class="ed-card" data-ed-item data-ed-category="team">
<span class="ed-card-number" aria-hidden="true">06</span>
<p class="ed-eyebrow">Zusammenarbeit / Studio Notizen</p>
<h3 class="ed-heading">Feedback mit einem klaren Auftrag.</h3>
<p class="ed-muted">Eine gute Rückmeldung beginnt mit der Frage, welche Entscheidung sie ermöglichen soll.</p>
<p class="ed-small ed-muted">Redaktion / fiktive Beispielbeiträge</p>
<details>
<summary>Beitrag im Raster lesen</summary>
<p>Trenne Beobachtung, Wirkung und Vorschlag. So bleibt die Rückmeldung verständlich und das Team kann unterschiedliche Möglichkeiten bewusst abwägen.</p>
</details>
</article>
</div>
</section>
<script type="module">
import {initEditorialBlocks} from 'https://ui.rittek.de/assets/modules/blocks-editorial.js';
const cleanup = initEditorialBlocks(document.getElementById('ed-journal'));
// Beim Entfernen cleanup(); erneutes Init setzt den Ausgangszustand zurück.
// Keine Übertragung oder dauerhafte Speicherung.
</script>
</body>
</html>

Inhalte & Redaktion

Leseraum · Ein klarer Rahmen

Semantischer Artikel mit eigener Kapitelstruktur, nativen Ankerzielen und optionalem scrollabhängigem Lesefortschritt.

Vollständiges HTML herunterladen ↧

Essay / eigener Beispieltext

Ein klarer Rahmen
für gute Arbeit.

Ein System kann Orientierung geben, ohne alle Antworten vorwegzunehmen. Entscheidend ist, welche Entscheidungen es leichter macht.

Rittek Redaktion / 24. Oktober 2026 / Beispielartikel

Kontext verstehen.

Eine Oberfläche entsteht selten auf einem leeren Blatt. Menschen bringen Erwartungen, Begriffe und eingespielte Abläufe mit. Wer nur einzelne Komponenten betrachtet, übersieht leicht die Zusammenhänge, in denen sie gebraucht werden.

Deshalb beginnt gute Gestaltung mit einer konkreten Situation. Welche Entscheidung steht an? Was weiß die Person bereits? Welcher nächste Schritt wäre hilfreich? Die Antworten bestimmen, welche Inhalte sichtbar sein sollten und welche zunächst warten können.

Ein System ist dann nützlich, wenn es wiederkehrende Entscheidungen verständlich macht.

Rhythmus finden.

Wiederholung gibt Orientierung. Überschriften, Abstände und Beschriftungen helfen, verwandte Dinge als zusammengehörig zu erkennen. Dieser Rhythmus muss nicht überall gleich laut sein. Ein Einstieg darf großzügig sein, eine Arbeitsliste kompakt.

Die gemeinsame Grundlage liegt in den Beziehungen. Ein Feld bleibt ein Feld, eine Aktion bleibt eine Aktion. Farben und Schriftgrößen unterstützen diese Bedeutung, tragen sie aber nicht allein. Auch lange Texte oder ein anderer Kontrastmodus müssen funktionieren.

Am Alltag prüfen.

Ein sauberer Entwurf ist ein Anfang. Ob er hilft, zeigt sich erst bei echten Aufgaben: mit langen Namen, fehlenden Informationen und einem Fehler kurz vor dem Abschluss. Solche Situationen sind keine Randfälle, sondern Teil des Produkts.

Prüfe deshalb früh einen vollständigen Weg. Kann jemand den Anfang erkennen, einen Fehler korrigieren und den Abschluss verstehen? Ein guter Rahmen nimmt diese Unsicherheit ernst und macht den nächsten sinnvollen Schritt sichtbar.

Das Ziel ist kein starres Raster. Es ist ein gemeinsames Verständnis, das Veränderungen zulässt und trotzdem verlässlich bleibt.

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>Leseraum · Ein klarer Rahmen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-editorial.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ed-block ed-stack-lg" id="ed-reading" data-ed-article aria-labelledby="ed-reading-title">
<header class="ed-stack">
<p class="ed-eyebrow">Essay / eigener Beispieltext</p>
<h2 class="ed-title" id="ed-reading-title">Ein klarer Rahmen<br>für gute Arbeit.</h2>
<p class="ed-muted">Ein System kann Orientierung geben, ohne alle Antworten vorwegzunehmen. Entscheidend ist, welche Entscheidungen es leichter macht.</p>
<p class="ed-small ed-muted">Rittek Redaktion / 24. Oktober 2026 / Beispielartikel</p>
</header>
<div class="ed-reading-layout">
<aside class="ed-stack">
<nav class="ed-toc" data-ed-toc aria-label="In diesem Artikel">
<a href="#ed-reading-context">01 / Kontext verstehen</a>
<a href="#ed-reading-rhythm">02 / Rhythmus finden</a>
<a href="#ed-reading-proof">03 / Am Alltag prüfen</a>
</nav>
<label class="ed-small" for="ed-reading-progress" data-ed-progress-label>0 % gelesen</label>
<progress class="ed-progress" id="ed-reading-progress" value="0" max="100" aria-label="Lesefortschritt im Artikel">
</progress>
<p class="ed-small ed-muted">Ohne JavaScript bleibt der gesamte Artikel mit Inhaltsnavigation lesbar. Der Fortschritt ist eine lokale Scrollschätzung, kein Nachweis gelesener Inhalte.</p>
</aside>
<article class="ed-reading" data-ed-reading>
<section aria-labelledby="ed-reading-context">
<h3 class="ed-heading" id="ed-reading-context" tabindex="-1">Kontext verstehen.</h3>
<p>Eine Oberfläche entsteht selten auf einem leeren Blatt. Menschen bringen Erwartungen, Begriffe und eingespielte Abläufe mit. Wer nur einzelne Komponenten betrachtet, übersieht leicht die Zusammenhänge, in denen sie gebraucht werden.</p>
<p>Deshalb beginnt gute Gestaltung mit einer konkreten Situation. Welche Entscheidung steht an? Was weiß die Person bereits? Welcher nächste Schritt wäre hilfreich? Die Antworten bestimmen, welche Inhalte sichtbar sein sollten und welche zunächst warten können.</p>
<blockquote>Ein System ist dann nützlich, wenn es wiederkehrende Entscheidungen verständlich macht.</blockquote>
</section>
<section aria-labelledby="ed-reading-rhythm">
<h3 class="ed-heading" id="ed-reading-rhythm" tabindex="-1">Rhythmus finden.</h3>
<p>Wiederholung gibt Orientierung. Überschriften, Abstände und Beschriftungen helfen, verwandte Dinge als zusammengehörig zu erkennen. Dieser Rhythmus muss nicht überall gleich laut sein. Ein Einstieg darf großzügig sein, eine Arbeitsliste kompakt.</p>
<p>Die gemeinsame Grundlage liegt in den Beziehungen. Ein Feld bleibt ein Feld, eine Aktion bleibt eine Aktion. Farben und Schriftgrößen unterstützen diese Bedeutung, tragen sie aber nicht allein. Auch lange Texte oder ein anderer Kontrastmodus müssen funktionieren.</p>
</section>
<section aria-labelledby="ed-reading-proof">
<h3 class="ed-heading" id="ed-reading-proof" tabindex="-1">Am Alltag prüfen.</h3>
<p>Ein sauberer Entwurf ist ein Anfang. Ob er hilft, zeigt sich erst bei echten Aufgaben: mit langen Namen, fehlenden Informationen und einem Fehler kurz vor dem Abschluss. Solche Situationen sind keine Randfälle, sondern Teil des Produkts.</p>
<p>Prüfe deshalb früh einen vollständigen Weg. Kann jemand den Anfang erkennen, einen Fehler korrigieren und den Abschluss verstehen? Ein guter Rahmen nimmt diese Unsicherheit ernst und macht den nächsten sinnvollen Schritt sichtbar.</p>
<p>Das Ziel ist kein starres Raster. Es ist ein gemeinsames Verständnis, das Veränderungen zulässt und trotzdem verlässlich bleibt.</p>
</section>
</article>
</div>
</section>
<script type="module">
import {initEditorialBlocks} from 'https://ui.rittek.de/assets/modules/blocks-editorial.js';
const cleanup = initEditorialBlocks(document.getElementById('ed-reading'));
// Beim Entfernen cleanup(); erneutes Init setzt den Ausgangszustand zurück.
// Keine Übertragung oder dauerhafte Speicherung.
</script>
</body>
</html>

Inhalte & Redaktion

Umfrage · Eine Frage, klare Zahlen

Lokale Themenwahl mit ausdrücklich fiktivem Ausgangsstand, exakt auf 100 Prozent gerundeten Ergebnissen und vollständigem Reset.

Vollständiges HTML herunterladen ↧

Leserfrage / lokale Demonstration

Worüber möchtest
du mehr lesen?

Der Ausgangsstand besteht aus 40 frei erfundenen Demo-Stimmen. Deine Wahl ergänzt ihn ausschließlich in dieser Ansicht. Keine echte Befragung und keine Speicherung.

Ein Thema auswählen

Ohne JavaScript wird ebenfalls keine Stimme versendet.

Fiktiver Beispielstand

Designsysteme45 % (18)
Formulare30 % (12)
Zusammenarbeit25 % (10)

40 fiktive Demo-Stimmen. Noch keine lokale Auswahl addiert.

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>Umfrage · Eine Frage, klare Zahlen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-editorial.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ed-block ed-stack-lg" id="ed-poll" data-ed-poll aria-labelledby="ed-poll-title">
<header class="ed-stack">
<p class="ed-eyebrow">Leserfrage / lokale Demonstration</p>
<h2 class="ed-title" id="ed-poll-title">Worüber möchtest<br>du mehr lesen?</h2>
<p class="ed-muted">Der Ausgangsstand besteht aus 40 frei erfundenen Demo-Stimmen. Deine Wahl ergänzt ihn ausschließlich in dieser Ansicht. Keine echte Befragung und keine Speicherung.</p>
</header>
<div class="ed-poll-layout">
<form class="ed-stack" method="dialog" aria-label="Thema lokal wählen">
<fieldset class="r-fieldset ed-stack">
<legend>Ein Thema auswählen</legend>
<label class="ed-option" for="ed-poll-design">
<input class="r-check" id="ed-poll-design" type="radio" name="topic" value="design" required>
<span>Designsysteme im Alltag</span>
</label>
<label class="ed-option" for="ed-poll-forms">
<input class="r-check" id="ed-poll-forms" type="radio" name="topic" value="forms">
<span>Verständliche Formulare</span>
</label>
<label class="ed-option" for="ed-poll-team">
<input class="r-check" id="ed-poll-team" type="radio" name="topic" value="team">
<span>Bessere Zusammenarbeit</span>
</label>
</fieldset>
<div class="ed-actions">
<button class="r-button r-button-primary" type="submit">Lokal ausprobieren</button>
<button class="r-button" type="reset">Beispiel zurücksetzen</button>
</div>
<p class="ed-small ed-muted">Ohne JavaScript wird ebenfalls keine Stimme versendet.</p>
</form>
<div class="ed-stack">
<h3 class="ed-heading">Fiktiver Beispielstand</h3>
<div class="ed-result" data-ed-result>
<div class="ed-result-top">
<span>Designsysteme</span>
<span data-ed-percentage>45 % (18)</span>
</div>
<progress class="ed-progress" max="100" value="45" aria-label="Designsysteme: Anteil am Demo-Ergebnis">
</progress>
</div>
<div class="ed-result" data-ed-result>
<div class="ed-result-top">
<span>Formulare</span>
<span data-ed-percentage>30 % (12)</span>
</div>
<progress class="ed-progress" max="100" value="30" aria-label="Formulare: Anteil am Demo-Ergebnis">
</progress>
</div>
<div class="ed-result" data-ed-result>
<div class="ed-result-top">
<span>Zusammenarbeit</span>
<span data-ed-percentage>25 % (10)</span>
</div>
<progress class="ed-progress" max="100" value="25" aria-label="Zusammenarbeit: Anteil am Demo-Ergebnis">
</progress>
</div>
<p class="ed-small ed-muted" data-ed-total>40 fiktive Demo-Stimmen. Noch keine lokale Auswahl addiert.</p>
</div>
</div>
<p class="ed-small" data-ed-status role="status">
</p>
</section>
<script type="module">
import {initEditorialBlocks} from 'https://ui.rittek.de/assets/modules/blocks-editorial.js';
const cleanup = initEditorialBlocks(document.getElementById('ed-poll'));
// Beim Entfernen cleanup(); erneutes Init setzt den Ausgangszustand zurück.
// Keine Übertragung oder dauerhafte Speicherung.
</script>
</body>
</html>

Inhalte & Redaktion

Karriere · Zusammen besser

Filterbares Verzeichnis mit vier fiktiven Rollen, Fachbereichen und nativen Stellendetails; ohne erfundenen Bewerbungsprozess.

Vollständiges HTML herunterladen ↧

Beispielteam / keine echten Stellenangebote

Gute Arbeit entsteht
nicht allein.

Diese Karriereseite zeigt eine Struktur für unterschiedliche Rollen. Suche, Fachbereich und native Details funktionieren unabhängig von einer Bewerbungsplattform.

4 fiktive Rollen.

Produktdesigner:in / Remote / BeispielVollzeit

Du verbindest Nutzerperspektive, Inhalte und ein konsistentes visuelles System. Gemeinsam mit dem Team entwickelst du nachvollziehbare Wege durch komplexe Aufgaben.

Du denkst in Zusammenhängen und kannst Entscheidungen erklären. Die Stelle ist fiktiv; hier kann keine Bewerbung abgegeben werden.

Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.

Frontend-Entwickler:in / Hamburg / BeispielTeilzeit

Du baust robuste Oberflächen mit nativem HTML, verständlichen Zuständen und einem bewussten Umgang mit optionalem JavaScript.

Dir sind Fokus, Fehlermeldungen und langfristige Wartbarkeit genauso wichtig wie der erste Eindruck.

Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.

Content Designer:in / Berlin / BeispielVollzeit

Du bringst Klarheit in Texte, Beschriftungen und die Struktur redaktioneller Inhalte. Sprache und Oberfläche entstehen für dich gemeinsam.

Du prüfst Inhalte im konkreten Ablauf und formulierst so, dass Menschen den nächsten Schritt verstehen.

Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.

UI-Systementwickler:in / Remote / BeispielProjektbasis

Du entwickelst wiederverwendbare Komponenten und beschreibst ihren Bedienvertrag, ihre Grenzen und ihre Einbindung.

Du bevorzugst kleine nachvollziehbare Modelle und testest Grenzfälle ebenso sorgfältig wie den normalen Weg.

Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.

Keine Lebensläufe hochladen oder persönlichen Angaben eingeben. Diese Demo lädt keine Stellen von einem Server.

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>Karriere · Zusammen besser · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-editorial.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ed-block ed-stack-lg" id="ed-careers" data-ed-careers aria-labelledby="ed-careers-title">
<header class="ed-stack">
<p class="ed-eyebrow">Beispielteam / keine echten Stellenangebote</p>
<h2 class="ed-title" id="ed-careers-title">Gute Arbeit entsteht<br>nicht allein.</h2>
<p class="ed-muted">Diese Karriereseite zeigt eine Struktur für unterschiedliche Rollen. Suche, Fachbereich und native Details funktionieren unabhängig von einer Bewerbungsplattform.</p>
</header>
<form class="ed-filters" method="dialog" data-ed-filter-form aria-label="Beispielstellen filtern">
<label class="r-label" for="ed-careers-search">Rolle oder Ort<input class="r-input" type="search" id="ed-careers-search" data-ed-search autocomplete="off">
</label>
<label class="r-label" for="ed-careers-category">Fachbereich<select class="r-input" id="ed-careers-category" data-ed-category>
<option value="all">Alle Bereiche</option>
<option value="design">Design</option>
<option value="engineering">Entwicklung</option>
<option value="content">Inhalte</option>
</select>
</label>
<button class="r-button" type="reset">Filter löschen</button>
</form>
<p class="ed-small ed-muted" data-ed-status role="status">4 fiktive Rollen.</p>
<p class="r-alert" data-ed-empty hidden>Keine passenden Beispielrollen. Versuche einen anderen Begriff oder Fachbereich.</p>
<div class="ed-jobs">
<article class="ed-job" data-ed-item data-ed-category="design">
<details>
<summary>
<span>
<strong class="ed-heading">Produktdesigner:in</strong>
<span class="ed-small ed-muted"> / Remote / Beispiel</span>
</span>
<span class="ed-tag">Vollzeit</span>
</summary>
<div class="ed-stack">
<p>Du verbindest Nutzerperspektive, Inhalte und ein konsistentes visuelles System. Gemeinsam mit dem Team entwickelst du nachvollziehbare Wege durch komplexe Aufgaben.</p>
<p class="ed-muted">Du denkst in Zusammenhängen und kannst Entscheidungen erklären. Die Stelle ist fiktiv; hier kann keine Bewerbung abgegeben werden.</p>
<p class="ed-small ed-muted">Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.</p>
</div>
</details>
</article>
<article class="ed-job" data-ed-item data-ed-category="engineering">
<details>
<summary>
<span>
<strong class="ed-heading">Frontend-Entwickler:in</strong>
<span class="ed-small ed-muted"> / Hamburg / Beispiel</span>
</span>
<span class="ed-tag">Teilzeit</span>
</summary>
<div class="ed-stack">
<p>Du baust robuste Oberflächen mit nativem HTML, verständlichen Zuständen und einem bewussten Umgang mit optionalem JavaScript.</p>
<p class="ed-muted">Dir sind Fokus, Fehlermeldungen und langfristige Wartbarkeit genauso wichtig wie der erste Eindruck.</p>
<p class="ed-small ed-muted">Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.</p>
</div>
</details>
</article>
<article class="ed-job" data-ed-item data-ed-category="content">
<details>
<summary>
<span>
<strong class="ed-heading">Content Designer:in</strong>
<span class="ed-small ed-muted"> / Berlin / Beispiel</span>
</span>
<span class="ed-tag">Vollzeit</span>
</summary>
<div class="ed-stack">
<p>Du bringst Klarheit in Texte, Beschriftungen und die Struktur redaktioneller Inhalte. Sprache und Oberfläche entstehen für dich gemeinsam.</p>
<p class="ed-muted">Du prüfst Inhalte im konkreten Ablauf und formulierst so, dass Menschen den nächsten Schritt verstehen.</p>
<p class="ed-small ed-muted">Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.</p>
</div>
</details>
</article>
<article class="ed-job" data-ed-item data-ed-category="engineering">
<details>
<summary>
<span>
<strong class="ed-heading">UI-Systementwickler:in</strong>
<span class="ed-small ed-muted"> / Remote / Beispiel</span>
</span>
<span class="ed-tag">Projektbasis</span>
</summary>
<div class="ed-stack">
<p>Du entwickelst wiederverwendbare Komponenten und beschreibst ihren Bedienvertrag, ihre Grenzen und ihre Einbindung.</p>
<p class="ed-muted">Du bevorzugst kleine nachvollziehbare Modelle und testest Grenzfälle ebenso sorgfältig wie den normalen Weg.</p>
<p class="ed-small ed-muted">Fiktive Ausschreibung: keine tatsächliche offene Stelle und kein Bewerbungsversand. Die Details sind ohne JavaScript zugänglich.</p>
</div>
</details>
</article>
</div>
<p class="ed-small ed-muted">Keine Lebensläufe hochladen oder persönlichen Angaben eingeben. Diese Demo lädt keine Stellen von einem Server.</p>
</section>
<script type="module">
import {initEditorialBlocks} from 'https://ui.rittek.de/assets/modules/blocks-editorial.js';
const cleanup = initEditorialBlocks(document.getElementById('ed-careers'));
// Beim Entfernen cleanup(); keine Übertragung oder dauerhafte Speicherung.
</script>
</body>
</html>

Inhalte & Redaktion

Kontakt & FAQ · Erst verstehen

Native Hilfefragen neben einer kompakten Projektanfrage; konkrete Anfragefelder statt Kopie des allgemeinen Kontaktblocks.

Vollständiges HTML herunterladen ↧

Projektanfrage / lokale Vorlage

Erst verstehen.
Dann gemeinsam planen.

Drei kurze Antworten helfen beim Einstieg. Das Formular prüft eine beispielhafte Projektanfrage nur lokal und versendet nichts.

Vor der ersten Anfrage

Was sollte eine erste Beschreibung enthalten?

Ein kurzer Überblick über Zielgruppe, Aufgabe und vorhandene Inhalte reicht für den Anfang. Vertrauliche Informationen gehören nicht in diese Demo.

Muss der Umfang bereits feststehen?

Ein grober Rahmen hilft, ist aber keine Voraussetzung. Benenne lieber die offene Frage, die du als Nächstes klären möchtest.

Wird hier ein Termin gebucht?

Nein. Es werden weder Nachrichten gesendet noch Termine reserviert. Der Abschluss bestätigt ausschließlich die lokale Formularprüfung.

Für einen echten Anfrageprozess brauchst du einen eigenen Serververtrag mit Validierung und verständlicher Rückmeldung.

10–1.500 Zeichen, nur Testinhalte. Keine Speicherung oder Übertragung.

* Pflichtfelder. Auch ohne JavaScript erfolgt kein Versand.

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 &amp; FAQ · Erst verstehen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-editorial.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="ed-block ed-stack-lg" id="ed-briefing" data-ed-contact aria-labelledby="ed-briefing-title">
<header class="ed-stack">
<p class="ed-eyebrow">Projektanfrage / lokale Vorlage</p>
<h2 class="ed-title" id="ed-briefing-title">Erst verstehen.<br>Dann gemeinsam planen.</h2>
<p class="ed-muted">Drei kurze Antworten helfen beim Einstieg. Das Formular prüft eine beispielhafte Projektanfrage nur lokal und versendet nichts.</p>
</header>
<div class="ed-contact-layout">
<div class="ed-stack">
<h3 class="ed-heading">Vor der ersten Anfrage</h3>
<div class="ed-faq">
<details open>
<summary>Was sollte eine erste Beschreibung enthalten?</summary>
<p>Ein kurzer Überblick über Zielgruppe, Aufgabe und vorhandene Inhalte reicht für den Anfang. Vertrauliche Informationen gehören nicht in diese Demo.</p>
</details>
<details>
<summary>Muss der Umfang bereits feststehen?</summary>
<p>Ein grober Rahmen hilft, ist aber keine Voraussetzung. Benenne lieber die offene Frage, die du als Nächstes klären möchtest.</p>
</details>
<details>
<summary>Wird hier ein Termin gebucht?</summary>
<p>Nein. Es werden weder Nachrichten gesendet noch Termine reserviert. Der Abschluss bestätigt ausschließlich die lokale Formularprüfung.</p>
</details>
</div>
<p class="ed-small ed-muted">Für einen echten Anfrageprozess brauchst du einen eigenen Serververtrag mit Validierung und verständlicher Rückmeldung.</p>
</div>
<form class="ed-form ed-stack" method="dialog" aria-label="Projektanfrage lokal prüfen">
<div>
<label class="r-label" for="ed-briefing-topic">Projektbereich</label>
<select class="r-input" id="ed-briefing-topic" name="topic">
<option value="website">Website & Redaktion</option>
<option value="application">Anwendung & Arbeitsabläufe</option>
<option value="system">Designsystem</option>
</select>
</div>
<div>
<label class="r-label" for="ed-briefing-email">Demo-E-Mail *</label>
<input class="r-input" type="email" id="ed-briefing-email" name="email" required maxlength="120" autocomplete="off">
</div>
<div>
<label class="r-label" for="ed-briefing-message">Welche Frage möchtest du klären? *</label>
<textarea class="r-input ed-message" id="ed-briefing-message" name="message" required minlength="10" maxlength="1500" aria-describedby="ed-briefing-help">
</textarea>
<p class="ed-small ed-muted" id="ed-briefing-help">10–1.500 Zeichen, nur Testinhalte. Keine Speicherung oder Übertragung.</p>
</div>
<div class="ed-actions">
<button class="r-button r-button-primary" type="submit">Angaben lokal prüfen</button>
<button class="r-button" type="reset">Verwerfen</button>
</div>
<p class="ed-small" data-ed-status role="status">
</p>
<p class="ed-small ed-muted">* Pflichtfelder. Auch ohne JavaScript erfolgt kein Versand.</p>
</form>
</div>
</section>
<script type="module">
import {initEditorialBlocks} from 'https://ui.rittek.de/assets/modules/blocks-editorial.js';
const cleanup = initEditorialBlocks(document.getElementById('ed-briefing'));
// Beim Entfernen cleanup(); keine Übertragung oder dauerhafte Speicherung.
</script>
</body>
</html>