Die Bausteine der neuen Visualsprache — Tokens, Buttons, Pills, Chips, Karten und kleine
Molekül-Kombinationen. Alles per Cascade-Order, kein body.v2.
Farben, Typo, Abstände, Radien und Schatten — jeder Baustein höher oben referenziert ausschließlich diese Variablen.
.rc-display-1 · Plus Jakarta Sans 700 / -0.022em
.rc-display-2
.rc-h1
.rc-h2
.rc-h3
.rc-h4
Lede — der ruhige Einleitungs-Absatz, mit dem ein Abschnitt anfängt. Inter 400 mit weicher Zeilenhöhe (1.55) und etwas größerem Schriftgrad als der Body.
.rc-lede · 18px
Body — die Standard-Lauftextgröße der Plattform. Verwendet für Erklärungen, Listenpunkte und alles, was länger als zwei Zeilen ist. Inter 400 / 16px / 1.62.
.rc-body-md · 16px
.rc-small · 14px — Bildunterschriften, Hilfstexte, Kennzeichnungen.
„Drei Vormittage Verhandlung statt acht Monate Verfahren — wenn Abfindung, Freistellung und Zeugnis-Note sauber zusammenpassen."
.rc-quote · 22px / 1.45
Wenn Inhalte auf --rc-blau
liegen, regelt eine einzelne Zusatzklasse die Inversion — keine doppelten Komponenten.
Die kleinsten interaktiven Bausteine. Jeder Knopf ist eine Klasse,
jede Pill ein Tonwert, jede Chip ein aria-pressed.
Hover: orange wechselt auf --rc-orange-600, secondary auf --rc-blau-pastel, ghost-dark auf --rc-grau.
.btn-ghost-light gehört nur auf dunkle Bänder.
.btn-tertiary sitzt auf dunklen / petrol-getönten Bändern (weiße Fläche, blauer Text).
Hover invertiert auf solides Blau. Vier Größen: .btn-small, Standard, .btn-large, .btn-big.
Die Größen-Klassen .btn-small / .btn-large / .btn-big kombinieren sich mit jeder Variante.
Ohne Größen-Klasse rendert der Button auf der Standard-Größe der jeweiligen Variante.
Vier Tonwerte für hellen Untergrund. Verwendung: Eyebrow-Marker, Trust-Badges, Tag-Labels.
.pill-on-dark nutzt 12% Weiß als Hintergrund.
Klick toggelt aria-pressed. Hover färbt Border und Text auf Petrol.
Drei Größen (40/56/80) plus zwei Ringfarben — ring-petrol für Standard-Trust, ring-orange für Akzent.
Inline-SVG mit stroke="currentColor" — Icons färben sich am umgebenden Text.
Vier Navbar-Varianten für unterschiedliche Kontexte. Alle teilen die Basisklasse .navbar;
Suffix-Klassen bestimmen Hintergrund und Hierarchie.
Klasse: .navbar. Standard für Marketing- und Produktseiten mit primärem CTA.
Klasse: .navbar.navbar--transparent. Für Hero-getriebene Landing-Pages, wo die Navbar über einem Bild schwebt.
Klasse: .navbar.navbar--minimal. Für Editorial-Seiten, Magazin-Layouts, Blog-Übersichten.
Klasse: .navbar mit Telefon-CTA. Für Dienstleister, wo der direkte Kontakt konvertiert.
Alle Eingabe-Typen, die das System unterstützt — von einfachem Text bis zu Datums-, Farb- und Range-Wählern. Validierungs-Zustände inklusive.
data-rc-check-group="single"
Ändern Sie eine Zahl — der obere Range-Slider re-initialisiert sich sofort mit den neuen data-rc-range-config Werten.
Alerts, Toasts, Banner, Progress-Indikatoren, Empty-States. Jeder Zustand bekommt seine eigene visuelle Stimme.
In Produktion erscheinen Toasts am unteren Bildschirmrand mit 4 s Auto-Dismiss.
Modale Dialoge, Tooltips, Dropdown-Menüs und Command-Palettes. UI-Schichten, die nur dann erscheinen, wenn sie wirklich gebraucht werden.
Wir leiten Ihre Anfrage an einen Fachanwalt weiter — Antwort innerhalb von 48 h, garantiert.
Klasse: .modal-backdrop > .modal. Backdrop dimmt den Hintergrund auf 60 % schwarz mit Blur.
Wir prüfen Ihren Fall unverbindlich und melden uns innerhalb von 48 h.
Vier Stil-Varianten — schaltbar über den Range-Regler. In Produktion wählt man eine Variante und bleibt dabei; der Schalter ist nur ein Showroom-Werkzeug.
| Mandat | Status | Streitwert | Zuständig | Aktualisiert |
|---|---|---|---|---|
| Müller · Aufhebungsvertrag | Aktiv | 12 400 € | Dr. Schmidt | vor 2 Std. |
| Weber · Kündigungsschutz | Wartend | 8 900 € | Dr. Bauer | gestern |
| Schneider · Abmahnung | Blockiert | 3 100 € | Dr. Bauer | 30. April |
| Hoffmann · Mietrecht | Entwurf | — € | Dr. Schmidt | letzte Woche |
| Krüger · Verkehrsrecht | Aktiv | 5 600 € | Dr. Vogel | vor 4 Std. |
Stat-Strip, Karten, Headline-Cluster, Quote-Block. Alles, was unter dem Hero noch kein Organism ist — aber bereits eine wiedererkennbare Komposition.
Eine Standard-Karte hat einen Eyebrow als Marker, eine kompakte Headline, einen Lauftext-Block und einen sekundären Aktions-Footer.
Wenn ein Erfolgs- oder Trust-Hinweis stärker hervorstechen soll, übernimmt eine pastellige Hintergrundfarbe — die Innenstruktur bleibt identisch.
Wirksam kündigen — bevor das Arbeitsgericht Ihre Entscheidung kippt.
Rechtssicher abmahnen, ohne den Boden für eine spätere Kündigung zu verlieren.
Aktive Variante bekommt einen Petrol-Outline. Hover hebt die Karte um 2px an.
Sie wissen schon, worum es geht? Schildern Sie Ihren Fall in 2 Minuten — wir melden uns innerhalb von 48 h.
Auf der TopicGrid sitzt die Direct-Check-Karte am Ende der 6er-Reihe als farblich kontrastierender Shortcut zur Erstprüfung — Orange schlägt Foto-Karten optisch.
Eine Abmahnung muss das Fehlverhalten so genau beschreiben, dass ein Außenstehender es nachvollziehen kann — mit Datum, Uhrzeit und beobachteter Handlung.
Drei-Zeilen-Komposition: Eyebrow → Headline (rc-h2 oder rc-h1) → Lede. Wiederholt sich auf jeder Sektion.
Fokus: Petrol-Border + Petrol-Pastel-Glow. Eingebetteter Button erbt das Karten-Inset-Padding.
Pill-förmige Tab-Leiste mit animierten Inhalts-Panels. Jeder Tab enthält eigenes Markup — Karten, Bilder, Tabellen oder Sub-Sektionen.
Das Standard-Panel beim Laden. Wechseln Sie über die Tabs oben, um andere Inhalte einzublenden — der Übergang fadet sanft ein.
Beratung in Arbeitsrecht, Mietrecht, Familienrecht und Verkehrsrecht. Jedes Panel kann frei strukturiert sein — Karten, Bilder, Listen oder ganze Sub-Sektionen.
Tabs werden über main.js verdrahtet — kein Inline-Handler nötig.
Markup-driven: einfach data-action="tab-switch" + data-tab="..." setzen.
FAQ-Stil mit zwei Optionen: data-faq-single="true" erzwingt
einzelnes Öffnen; data-faq-duration="<ms>" überschreibt das Timing.
Smooth scroll auf das gerade geöffnete Element ist standardmäßig aktiv.
is-open und ist beim Laden offen — gibt Krawlern eine sichtbare Antwort über dem Falz.data-faq-single bleiben beide Items gleichzeitig offen.data-faq-single="true" data-faq-duration="220"--faq-duration appliziert, damit Toggle-Icon-Rotation synchron bleibt.Ein 2×2-Text-Raster flankiert ein mittiges Bild oder Video. Der Play-Button-Overlay ist optional und kennzeichnet Video-Inhalte.