Prototyp – Partneransicht extraETF
Design-System RentenCheck
Alle Bausteine dieses Prototyps auf einer Seite — Farben, Schrift, Abstände, Bedienelemente. Abgeleitet aus dem extraETF-Auftritt.
Derselbe Funnel existiert zweimal: prototype/ in der Smartbroker-Designsprache und prototype-extraetf/ in dieser. Gleiche Screens, gleiche Dateinamen, gleiche Klassennamen, gleiche Rechenlogik — nur Tokens und Formen unterscheiden sich. Was genau, steht in DESIGN-EXTRAETF.md. Diese Doku-Seite bleibt bewusst in der Sie-Form, weil sie Reviewer anspricht; die Produkt-Screens duzen, wie extraETF es tut.
Diese Seite dient zwei Zwecken: Sie zeigt, wie der Prototyp aussehen soll, und sie funktioniert als Prüfstand. Alle Bausteine werden aus derselben Stilvorlage geladen wie die Screens. Wenn hier etwas bricht, bricht es überall. Kommentare sind auch auf dieser Seite möglich — bitte melden Sie Abweichungen vom extraETF-Auftritt direkt hier.
Es gibt genau eine Stilvorlage: assets/rentencheck.css. Kein <style>-Block auf einer Seite, keine Stilangaben im Attribut. Seiten setzen ausschließlich Klassen zusammen. Wird ein Baustein gebraucht, der hier fehlt, kommt er zuerst in die Stilvorlage und auf diese Seite — danach in den Screen.
Über allem steht seit dem 26. Juli 2026 REDESIGN.md. Wo diese Seite und die Vorgabe auseinandergehen, gilt die Vorgabe — und diese Seite ist zu korrigieren. Die vier Abschnitte unter „Redesign 26.07.2026" beschreiben, was sich geändert hat.
getComputedStyle und aus den Regeln der Stilvorlage; nur diese von Skripten erzeugten Prüf-Kacheln setzen Stilwerte direkt, weil sich eine Farbprobe nicht als Klasse ausdrücken lässt.
Grundlagen
Herkunft
Woraus dieses System entstanden ist: zwei mit SingleFile gesicherte Seiten von extraETF (start.html Startseite mit Verlaufs-Hero und dem vollständigen Tokenblock aus 635 CSS-Variablen, depot.html Depot-Vergleich mit Anbieterkarten, Badges und Schieberegler). Grundlage ist ein Bootstrap 5 mit Material-abgeleiteter Palette. Der vollständige Bericht steht in design-tokens-report.md.
Stand 26. Juli 2026: Redesign. Die erste Fassung war dem Auftraggeber zu voll — zu viel Text, zu viele Kästen, zu viel Erklärung auf jedem Bildschirm. Verbindliche Vorgabe ist seither REDESIGN.md: Minimalismus nach Apple-Vorbild (ein Bildschirm, eine Entscheidung), alle Erklärungen hinter einer leisen Aufdeckung, und der Auftritt muss auf den ersten Blick als extraETF-Seite durchgehen. Die Vorgabe überschreibt ältere Konventionen, auch den neunteiligen Standardaufbau einer Frageseite aus CONTENT.md § 0.8. In der Smartbroker-Variante blieben dabei die Tokens unverändert und nur Menge und Lautstärke des gleichzeitig Sichtbaren änderten sich. Diese Variante dreht es um: die Informationsarchitektur ist identisch — ein Bildschirm, eine Entscheidung, alles hinter einer Aufdeckung — und ausgetauscht ist die Designsprache (Tokens, Schrift, Formen, Farbrollen). Die vier neuen Abschnitte dazu stehen unten unter „Redesign 26.07.2026"; die Werte, die sich nur an ihrer Originalstelle korrigieren ließen, sind in der Stilvorlage mit /* RD: */ markiert.
Wörtlich übernommen
app.jsAngenähert oder ergänzt
extraETF hat keine Fragenstrecke, keine Datentabelle und keine Vertrauensanzeige. Diese Bausteine wurden aus vorhandenen Grundformen gebaut und sind im Bericht einzeln begründet.
.discloseneu, aus dem Redesign--rc-neutraldata-theme statt .darkDie Montserrat-Schriftdateien stammen als base64 aus den Snapshots und sind ausschließlich für diesen internen Prototyp gedacht. Für eine echte Auslieferung braucht extraETF eine eigene Lizenz. Dasselbe gilt für die Wortmarke: Sie ist aus denselben Snapshots extrahiert (assets/extraetf-logo.svg, -dark.svg, -mark.svg) und für die Freigabe durch extraETF vorgesehen, nicht für eine Auslieferung ohne Abstimmung.
Grundlagen
Farben
Marken-, Text-, Flächen- und Signalfarben, je in Hell- und Dunkelansicht mit Kontrastwerten. Die Felder zeigen den Wert der gerade aktiven Ansicht; darunter stehen beide hinterlegten Werte. Kontrastwerte gelten für Textfarben auf ihrer jeweiligen Trägerfläche, berechnet nach WCAG 2.1 mit Überlagerung halbtransparenter Werte.
Grundlagen
Schrift
Montserrat in allen verwendeten Schnitten und Größen. Alle sechs Schnitte 300–800 liegen vor, faux-bold ist also kein Thema; Überschriften stehen in 700, die Display-Klassen in 800 — und anders als in der Smartbroker-Variante nicht in Versalien. Zahlen holen ihre Tabellenziffern aus der eigenen Familie Montserrat Tab, weil das extraETF-Subset kein tnum mitbringt.
Äpfel, Öl, Übertrag, groß, Straße, 1.234,56 €
Äpfel, Öl, Übertrag, groß, Straße, 1.234,56 €
Äpfel, Öl, Übertrag, groß, Straße, 1.234,56 €
Dein Vorteil
1.284 €
Dein Vorteil
Konto anlegen
Was bringt mir das Altersvorsorgedepot?
Ihre Situation
Bestehender Riester-Vertrag
Zurich db FörderRente Premium
Stand der letzten Standmitteilung
Passen Sie Ihren monatlichen Eigenbeitrag an und sehen Sie, wie hoch die staatliche Förderung ausfällt.
Guthaben 27.764,95 €, Beitragsgarantie 37.567,37 €, Zulagen 785,81 €.
Alle Zahlen sind Modellrechnungen auf Basis Ihrer Angaben.
Keine Anlage- oder Rechtsberatung. RentenCheck liefert eine Entscheidungsgrundlage.
Monatlicher Eigenbeitrag
Bruttojahreseinkommen
Förderquote
Dein Vorteil pro Jahr
Farb- und Gewichtungshilfen
Standardfarbe, ohne Zusatzklasse
.subdued — zweite Ebene, Erklärtexte
.muted — dritte Ebene, Beschriftungen
.brand-text — Markenfarbe, lesbar auf Fläche
.semibold — 600, die schwerste Stufe
.center — mittig
Grundlagen
Beträge und Zahlen
Deutsche Formatierung: Punkt als Tausendertrennung, Komma als Dezimaltrennung, Euro-Zeichen nachgestellt. Formatiert wird ausschließlich über RC.fmtEUR, RC.fmtNum und RC.fmtPct aus assets/app.js — die Tabelle darunter ist die echte Ausgabe dieser Funktionen.
Ausgabe der Formatierer
Tabellenziffern
Alle Textklassen setzen font-feature-settings:"tnum", damit Beträge in Spalten untereinander stehen. .tnum erzwingt es zusätzlich.
1.111.111,11 €
8.888.888,88 €
27.764,95 €
175 € · 185 € · 300 € · 60 € · 4 %
Grundlagen
Abstände und Raster
Abstandsskala und Raster für den Seitenaufbau. Alle Werte kommen aus derselben Variablenliste wie die Farben und werden hier zur Laufzeit ausgelesen.
Abstände
Radien
Bedienhöhen
Breiten
Raster und Spalten
.section-containerMarketing-Breite, maximal 96 rem.max-w-textLesespalte, 720 px.wizard-shellFragenspalte, 640 px, mittig — seit dem Redesign 2,5 rem Luft oben (3,5 rem ab 48 rem) und 6 rem unten.rc-headerProduktkopf über allem, randlos, 4,5–5 rem hoch.wizard-q · .disclose-bodybeide auf Lesespalte begrenzt (720 px).frameEinfache Seiten, 72 rem.portal + nav.sideKundenbereich, 15 rem Seitenspalte, unter 48 rem als Schublade.grid-2Automatisches Raster ab 260 px Spaltenbreite.stack + .gap-xs…2xlSenkrechter Stapel mit Abstand aus der Skala.row · .row-wrap · .spreadWaagerechte AnordnungenGrundlagen
Hell und Dunkel
Jede Farbe liegt als Paar vor. Umgeschaltet wird über data-theme="light" oder "dark" am <html>-Element; ohne Angabe folgt der Prototyp der Systemeinstellung. Der Schalter oben rechts in der Prototyp-Leiste setzt den Wert und merkt sich ihn.
Aktive Ansicht: –
#ffffff schreibt, bricht die Dunkelansicht. Es gibt für jede Rolle eine Variable.
Redesign 26.07.2026
White-Label-Header
Jeder Bildschirm trägt oben denselben minimalen Produktkopf: die extraETF-Wortmarke, daneben der Produktname als leiser Text. Er ist das Weiß-Label-Versprechen aus REDESIGN.md — wer den Prototyp öffnet, sieht zuerst extraETF, dann RentenCheck.
Bitte nach oben schauen: Was dort über der grauen Prototyp-Leiste steht, ist genau der Baustein, den dieser Abschnitt beschreibt. Er wird hier absichtlich nicht ein zweites Mal gezeichnet — zwei Wortmarken auf einer Seite wären genau das visuelle Rauschen, das das Redesign abgeschafft hat. Die Kennzahlen darunter werden zur Laufzeit am echten Kopf gemessen.
Am echten Kopf gemessen
Werte aus getBoundingClientRect und getComputedStyle des injizierten #rc-header. Ändert sich die Stilvorlage, ändern sich diese Zeilen mit.
Regeln
Nie von Hand schreiben. app.js setzt den Kopf als erstes Element in <body> ein — vor der Prototyp-Leiste, damit das Produkt über dem Entwicklerstreifen steht. Eine Seite, die einen eigenen Kopf mitbringt, bekommt zwei.
Abschalten nur für kopflose Versuche: <body data-rc-header="off">. Im Funnel gibt es dafür keinen Grund.
Ziel des Logos ist der Streckenstart r1-landing.html, nicht die Entwicklergalerie. Die Galerie hängt an der Prototyp-Leiste.
Rechte Seite (.rc-header-end) ist bewusst leer und reserviert. Der Themenschalter bleibt in der Prototyp-Leiste, damit im Produktkopf nichts steht, was es später nicht gäbe.
Struktur, aus dem eingesetzten Kopf gelesen
Die Pfaddaten der Wortmarke sind hier gekürzt; sie liegen als Zeichenketten SB_PLUS und SB_LETTERS in assets/app.js und werden nie geladen, sondern eingesetzt — ein <img> kann currentColor nicht erben, und ein fetch bräche unter file://.
Themenfähigkeit der Wortmarke: ein SVG, zwei Ansichten
Es gibt keine zwei Logo-Varianten im DOM und kein Umschalten über [data-theme]. Die Marke ist in zwei Teile zerlegt, und jeder Teil holt seine Farbe selbst:
<g fill="currentColor"> und folgen der color des Kopfesapp.js hängt ihm class="sb-plus" an.sb-plusfill: var(--rc-brand) — grün hell wie dunkel, aus demselben TokenviewBox — .rc-mark-plus in der SeitenspalteFolge: kein doppeltes Markup, kein Aufblitzen beim Umschalten, ein Codeweg. extraetf-logo-dark.svg wird zur Laufzeit deshalb nicht gebraucht — die Datei bleibt als extrahiertes Quell-Asset und für <img>-Verwendung liegen, wo currentColor nicht hinkommt.
#324148 mit weißer Wortmarke — gemessen an beiden Snapshots (rgb(50,65,72) bei 50 px Höhe). Das ist der auffälligste Unterschied zur Smartbroker-Variante, deren Kopf randlos auf der Seitenfläche sitzt. Die Leiste bleibt in beiden Themes gleich: sie ist Markenfläche, keine Seitenoberfläche.
Marken-Lockup in der Seitenspalte
.rc-head trägt im Kundenbereich das Kompaktzeichen. Links das echte „+" (.rc-mark-plus, von app.js gezeichnet), rechts der alte CSS-Platzhalter .rc-mark — er bleibt nur noch für handgeschriebene Lockups wie das in der Seitenspalte dieser Seite.
Der Inhalt des ersten Zeichens kommt aus RC.brandMark(). In der mobilen Kopfzeile des Kundenbereichs steht seit dem Redesign kein Lockup mehr, sondern der Seitentitel — drei gestapelte Leisten auf 390 px waren reines Rauschen.
Redesign 26.07.2026
Progressive Disclosure
Der wichtigste neue Baustein. Gesetz 2 aus REDESIGN.md: Jede Erklärung — „Warum fragen wir das?", „Wo finde ich das?", weiterführende Links, rechtliche Zeilen — liegt hinter einer leisen Aufdeckung. Wer weiß, was zu tun ist, klickt durch und sieht keinen einzigen Erklärabsatz.
Lebendes Beispiel — bitte anklicken
Warum fragen wir das?
Ihr Geburtsjahr bestimmt die Restlaufzeit bis zum Rentenbeginn. Je länger die Laufzeit, desto stärker wirkt der Unterschied in der Rendite zwischen Ihrem heutigen Vertrag und einem Altersvorsorgedepot.
Wo finde ich das?In der Standmitteilung Ihres Anbieters, Abschnitt „Persönliche Daten" — meist oben rechts neben Ihrer Versicherungsnummer.
Mehr dazu: § 86 EStG – Mindesteigenbeitrag ↗Das ist die kanonische Form: details.disclose > summary + div.disclose-body. Der Code-Block darüber ist aus diesem gerenderten Beispiel gelesen und damit die verbindliche Vorlage.
Regeln
Eine Aufdeckung pro Bildschirm. Nicht drei nebeneinander. Alles, was erklärt, wandert in dieselbe Klappe — Begründung, Fundstelle, Gesetzeslink, Kleingedrucktes.
Kein Zeichen im Summary. Der Pfeil ist ein gedrehtes CSS-Kästchen auf summary::after und dreht sich bei [open] von selbst. Wer ein ▸ oder ⌄ in den Text schreibt, hat zwei.
Beschriftung ist die Frage des Nutzers, nicht „Details" oder „Mehr". Standard: „Warum fragen wir das?"
Kein Kasten. Das Summary ist ein leiser Textlink in --rc-text-muted; erst das offene Feld bekommt eine weiche --rc-neutral-Fläche ohne Rahmen.
Der Text wird nicht gelöscht. Die Formulierungen aus CONTENT.md ziehen wörtlich um, sie verschwinden nicht.
Altbausteine flachen von selbst ab
Umgezogene Passagen bringen oft ihre alten Hüllen mit. Innerhalb von .disclose-body geben .why-box, .find-hint und .note-box ihren Kasten, ihre Fläche, ihren Innenabstand und ihr Symbol automatisch ab — so entstehen keine Kästen in Kästen. Man darf also relocieren, ohne die Hüllen zu entfernen.
Beispiel mit alten Hüllen (offen)
Diese .why-box hat innerhalb der Aufdeckung keine grüne Fläche mehr.
.find-hint hat ihr Symbol und ihre Fläche abgegeben.
Abgrenzung: .disclose oder details.card?
details.discloseErklärung im Funnel — leiser Textlink, weiche Fläche, kein Rahmendetails.card + summary.h5Strukturblock auf Ergebnis-, Portal- und Übersichtsseiten (siehe „Aufklapper")details.card.rc-legal-blockrechtlicher Langtext im FußbereichAlle drei nutzen denselben Pfeil aus dem summary-Block der Stilvorlage. .disclose holt ihn nur aus der rechten Ecke zurück an den Text und verkleinert ihn.
Redesign 26.07.2026
Leise Warnhinweise
Der Zulagen-Rückzahlungshinweis bleibt Pflicht, wo eine Kündigung vorkommt — aber er schreit nicht mehr. .warn-quiet ist die Regel, der laute .warn-box die begründete Ausnahme.
Regelfall: .warn-quiet
Achtung: Bei Kündigung sind alle Zulagen und Steuervorteile zurückzuzahlen (§ 93 EStG).
.warn-boxBestehende laute Kästen werden leise, indem .warn-quiet dazukommt — das Markup muss nicht umgebaut werden.
Warnfarbe bleibt, Kasten und Fläche fallen weg: background:none, kein Rahmen, kein Innenabstand, Symbol auf 16 px. Beides funktioniert allein und als Zusatzklasse zu .warn-box.
Ausnahme: der laute Kasten bleibt an genau einer Stelle
Eine Kündigung Ihres Riester-Vertrags gilt steuerlich als schädliche Verwendung (§ 93 EStG). Dann müssen alle staatlichen Zulagen und alle Steuervorteile zurückgezahlt werden — nach Ihren Angaben schätzungsweise 13.950 €.
Die Regel. Laut ist der Hinweis nur dort, wo „kündigen" eine angebotene Wahlmöglichkeit ist — im Prototyp ist das Weg 4 auf r52 Übertrag. Überall sonst, wo das Wort nur erwähnt wird (Einstiegsfrage, Ampel auf der Ergebnisseite, Erklärtexte), steht die leise Zeile. Der Pflichtcharakter des Textes ändert sich dadurch nicht, nur seine Lautstärke.
Die volle Langfassung des Pflichttextes samt Rechtsgrundlage steht unter „Hinweisboxen". Den Betrag füllt calc.js über den Platzhalter zulagenRueckzahlung.
Redesign 26.07.2026
Aufbau einer Frageseite
Der verbindliche Bauplan aller Fragebildschirme — und der Ersatz für den neunteiligen Standardaufbau aus CONTENT.md § 0.8, den REDESIGN.md ausdrücklich außer Kraft setzt.
Sichtbar sind genau vier Dinge
.wizard-step-label + .wizard-progress.wizard-q — eine kurze Zeile, optional eine Subline.tile-grid.wizard-navAlles andere liegt hinter der einen Aufdeckung: Begründung, Fundstelle, Gesetzeslink, Speicherhinweis, rechtliche Zeile. Bei Kachelfragen entfällt Punkt 4, weil die Kachel selbst weiterschaltet.
Was ausdrücklich nicht mehr auf einem Fragebildschirm steht
.why-boxzieht in die Aufdeckung.find-hintzieht in die Aufdeckung.info-linkzieht in die AufdeckungDie Type des Frageblocks ist Absicht: 35 px auf schmalen Geräten, 44 px ab 48 rem, halbfett, negativ laufweitig. Das Redesign verlangt große ruhige Type statt vieler kleiner Kästen. .wizard-shell > header erbt dieselben Regeln, damit bereits gebaute Bildschirme ohne Markup-Änderung mitziehen.
Lebendes Beispiel: das ganze Skelett
Wann möchten Sie in Rente gehen?
Nur Ihr Wunsch — das lässt sich später ändern.
Warum fragen wir das?
Der Renteneintritt bestimmt die Restlaufzeit. Sie ist der stärkste Hebel im Vergleich, weil sich Renditeunterschiede über die Jahre aufzinsen.
Ob das gewählte Alter zu Ihrer gesetzlichen Regelaltersgrenze passt, prüfen wir nicht — wir rechnen mit Ihrem Wunsch.
Vier sichtbare Blöcke, eine Klappe. Kein Knopf, weil die Kacheln selbst weiterschalten. Auf einem echten Bildschirm liegt dieses Skelett in main.wizard-shell (640 px, mittig) — hier steht es in einer Karte, damit es neben den anderen Beispielen sitzt.
Eingabe-Variante mit Knopf
In welchem Jahr sind Sie geboren?
Warum fragen wir das?
Ihr Geburtsjahr bestimmt die Restlaufzeit bis zum Rentenbeginn.
Bei Freitext-, Zahlen- und Reglereingaben bleibt der „Weiter"-Knopf: Es gibt keinen Moment, an dem die Antwort eindeutig fertig ist.
Auto-Weiterschaltung: RC.autoAdvance()
Bei eindeutigen Einfachauswahl-Kacheln ist die Auswahl gleichzeitig die Antwort. app.js setzt für rund 250 ms .option-tile.is-picked — ein „ja, das da" —, schreibt den Zustand und navigiert dann. Bei prefers-reduced-motion sind es 60 ms; ein zweiter Klick wird verworfen, bis die Seite wechselt.
// tileEl: die geklickte .option-tile · nextHref: Zielbildschirm
// writeFn: läuft SOFORT — rc_state hier schreiben, vor der Navigation
tiles.forEach(function (tile) {
tile.addEventListener('click', function () {
var v = tile.getAttribute('data-answer');
RC.autoAdvance(tile, 'r12-erwerbsstatus.html', function () {
RC.state.set({ renteneintritt: +v });
});
});
});
nextHref darf null sein — dann wird nur markiert und geschrieben, ohne Navigation. Das ist der Weg für Kacheln, die eine Folgefrage auf derselben Seite aufdecken.
Der Zustand .is-picked
Stärker als :hover, ruhiger als ein 2-px-Ring: Markenrahmen, Markentönung, Maßstab 0,99, Symbolfeld in Markengrün. Die Kachel nimmt keine Zeigerereignisse mehr an — sie ist auf dem Weg nach draußen. Nicht zu verwechseln mit .is-selected, dem dauerhaften „so hatten Sie geantwortet" bei Rückkehr auf den Bildschirm.
Bedienelemente
Schaltflächen
Primär, sekundär, dezent, Text-Link — je in den Zuständen normal, überfahren, aktiv, gesperrt, ladend. Grundform ist der grüne extraETF-Button mit 5 px Radius, 48 px hoch. Grün ist bei extraETF ausschließlich die Handlungsfarbe (--rc-cta); Blau (--rc-brand) markiert Navigation, Auswahl und Fortschritt. Die Zweitaktion ist weiß mit blauem Rand. Unter 48 rem Breite werden Schaltflächen automatisch voll breit; .btn-inline hält sie schmal.
Arten
Größen, Ladezustand und Text-Link
Der Ladezustand ist kein eigener Baustein: gesperrte Schaltfläche plus .spinner. Der Spinner erbt seine Größe nicht — in der Schaltfläche wirkt er dadurch bewusst groß und wird in echten Screens durch einen Textwechsel ersetzt.
Volle Breite und Fragenstrecken-Navigation
Pillen
Nicht bedienbare Kennzeichnungen. Für anklickbare Filter wird .btn-ghost.btn-sm genutzt.
Bedienelemente
Formularelemente
Textfeld, Betragsfeld, Jahresfeld, Auswahlkarten, Ankreuzfeld, Schieberegler, Fehlerzustand. Felder sind weiß mit sichtbarer Kante; im Fokus blaue Kante plus 3-px-Ring — das Bootstrap-Muster, das extraETF durchgehend fährt.
Felder
Fehlerzustand, Ankreuzfeld, Schalter
Schieberegler
Live: bewegen Sie den Regler. Der Füllstand kommt aus --pct, gesetzt von app.js über die Klasse .autofill. Die Marke im Fuß zeigt die Fördergrenze.
Bedienelemente
Auswahlkarten
Die große Bedienform der Fragenstrecke, einfach und mehrfach. Als label mit Radio- oder Ankreuzfeld für echte Formulare, als button für Antworten, die sofort weiterschalten. Live: klicken Sie eine Karte an.
Drei Zustände sind zu unterscheiden: .is-selected ist die dauerhafte Antwort („so hatten Sie geantwortet"), .is-picked der kurze Moment vor der Auto-Weiterschaltung, .is-disabled die gesperrte Option. Die Auto-Weiterschaltung samt Codebeispiel steht unter Aufbau einer Frageseite.
Einfachauswahl mit Radiofeld
Mehrfachauswahl mit Ankreuzfeld
Sofort weiterschaltende Antworten, zweispaltig
Die dritte Kachel zeigt den Zustand, den RC.autoAdvance() für rund 250 ms setzt, bevor die Navigation läuft.
Mit Symbol statt Zahl
Bausteine
Karten und Kacheln
Vertrags-Karte, Ergebnis-Karte, Aufgaben-Kachel, Statistik-Kachel. Grundform ist .card; .pad setzt den Innenabstand, .card-divided erzeugt getrennte Zeilen, .card-head eine abgesetzte Kopfzeile.
Seit dem Redesign ohne Schatten. Eine Karte hebt sich nur noch über eine Haarlinie von der Seitenfläche ab — der Schlagschatten war Rauschen. .card-flat ist damit wirkungslos, bleibt aber für bestehende Seiten stehen. Schatten gibt es weiterhin für Überlagerungen (Dialog, geöffnete Schublade) und für den aktiven Knopf im Segmentschalter.
Drei Lautstärken
.cardFläche + Haarlinie, kein Schatten.card-tintabgesetzte Fläche für Nebeninhalt.card-quietohne Fläche, ohne Rahmen — Weißraum strukturiert.card-quiet ist die neue Standardwahl für die ruhigen Bildschirme des Funnels: Die Klasse behält Innenabstand und Rundung als Layout-Zusage, gibt aber jede sichtbare Begrenzung ab.
Keine Kästen in Kästen
Eine .card innerhalb einer .card verliert Rahmen und Schatten automatisch — verschachtelte Umrandungen waren die Hauptquelle des visuellen Lärms. Das gilt nur für Karten: Eine .tbl-wrap oder .list in einer Karte behält ihre Haarlinie, denn dort ist die Linie die Struktur.
Äußere Karte
Innere Karte — ohne eigenen Rahmen.
Ruhige Karte im Vergleich
.card
Haarlinie, Flächenwechsel.
.card-quiet
Nur Abstand, keine Kante.
Vertrag 1
Zurich db FörderRente Premium
Fondsgebundene Riester-Rente · Versicherungsbeginn 2008 · Zertifikat 003938
Diese Angaben beschreiben die Generationsebene, nicht Ihren individuellen Vertrag.
Altersvorsorgedepot
Verfügbar ab 1. Januar 2027, ohne verpflichtende Beitragsgarantie
5,5 %
Angenommene Nettorendite pro Jahr — Szenario, keine Zusage
Ergebnis-Karte: die eine Zahl
Dein Vorteil pro Jahr
1.284€Gesamtvorteil bis zum Rentenbeginn 2047: 73.305 € gegenüber Ihrem heutigen Riester-Vertrag.
Statistik-Kacheln und Wartezustände
Das Ladeskelett hat keine eigene Höhe — es bekommt sie über eine Textklasse (hier .copy-md) und ein geschütztes Leerzeichen, damit es genau die Zeile ausfüllt, die später den Wert enthält.
Bausteine
Sicherheits-Badges
Hoch, mittel, niedrig — mit Erklärtext. Sie stehen als Pille neben jeder abgeleiteten Aussage und sind der wichtigste Vertrauensbaustein des Produkts: Sie sagen offen, wie gut wir eine Aussage belegen können.
Wir haben Ihren Vertrag eindeutig zugeordnet – über die Zertifizierungsnummer oder über Produktname plus Vertragsbeginn aus Ihrem Dokument.
Was würde die Aussage schärfen? Ihre Versicherungsbedingungen (AVB) oder der Versicherungsschein – damit kommen wir auf Vertragsebene.
Wir haben Anbieter, Produktart und Zeitraum zugeordnet, aber nicht den exakten Tarif. Ein Schreiben Ihres Anbieters würde die Aussage schärfen.
Was würde die Aussage schärfen? Ihre letzte „Information zur Wertentwicklung" (Jahresbescheinigung nach § 92 EStG).
Wir arbeiten mit typischen Werten für diese Produktart und diesen Zeitraum. Ihr Vertrag kann davon abweichen.
Was würde die Aussage schärfen? Ein Foto von irgendeinem Schreiben Ihres Anbieters – das genügt meist schon.
Alle Badge-Arten
.badge-hoch und .badge-ok sind dieselbe Farbrolle, ebenso .badge-mittel und .badge-warn, sowie .badge-niedrig und .badge-neutral. Für Sicherheitsstufen bitte die -hoch/-mittel/-niedrig-Namen nutzen, damit die Absicht im Markup lesbar bleibt.
Bausteine
Ampel
Grün, gelb, rot mit Titel und Text. Die Ampel bewertet auf der Ergebnisseite die drei Wege zum 1. Januar 2027. Gesteuert über data-ampel="gruen|gelb|rot".
Förderunschädlich möglich. Zulagen und Steuervorteile bleiben erhalten, das Guthaben wandert mit.
Möglich und unschädlich, aber Ihr Guthaben bleibt in der teuren Garantiestruktur.
Achtung: Bei Kündigung sind alle Zulagen und Steuervorteile zurückzuzahlen (§ 93 EStG).
Bausteine
Hinweisboxen
Information, Erfolg, Warnung, Fehler. Der Zulagen-Warnhinweis ist die wichtigste Variante: Er ist Pflicht und muss wörtlich überall dort erscheinen, wo „kündigen", „Kündigung", „auflösen" oder „auszahlen lassen" vorkommt.
Wichtig zur Lautstärke: Der laute Kasten unten ist seit dem Redesign nur noch dort richtig, wo Kündigen eine angebotene Wahlmöglichkeit ist (r52, Weg 4). Bei jeder bloßen Erwähnung steht die leise Form — siehe Leise Warnhinweise. Die Pflicht bleibt, die Kastenform nicht.
Der Prototyp rechnet mit dem Entwurfsstand des Altersvorsorgedepots. Die Reform tritt zum 1. Januar 2027 in Kraft, Einzelheiten können sich noch ändern.
Ihr Vertrag ist älter als fünf Jahre — der Übertrag ist nach den Bedingungen dieser Tarifgeneration gebührenfrei möglich.
Eine Kündigung Ihres Riester-Vertrags gilt steuerlich als schädliche Verwendung (§ 93 EStG). Dann müssen alle staatlichen Zulagen und alle Steuervorteile, die Sie über die Jahre erhalten haben, zurückgezahlt werden. Nach Ihren bisherigen Angaben wären das schätzungsweise 13.950 €. Zusätzlich behalten viele Anbieter bereits verrechnete Abschlusskosten ein — der Auszahlungsbetrag liegt dann oft deutlich unter der Summe Ihrer Einzahlungen.
Ein Übertrag auf einen anderen förderfähigen Vertrag oder eine Beitragsfreistellung löst diese Rückzahlung nicht aus. Prüfen Sie diese Wege zuerst.
Rechtsgrundlage: § 93 EStG – Schädliche Verwendung ↗
Bitte fotografieren Sie die Seite noch einmal bei besserem Licht, oder tragen Sie die Werte selbst ein.
Kurzvariante, immer sichtbar und nie eingeklappt — als .warn-quiet gesetzt: „Achtung: Bei Kündigung sind alle Zulagen und Steuervorteile zurückzuzahlen (§ 93 EStG)." Sie ist die Regelform; der laute Kasten die Ausnahme. Der Platzhalter zulagenRueckzahlung wird von calc.js gefüllt.
Bausteine
Aufklapper
Die Erklärbausteine .why-box, .find-hint und .info-link in ihrer Rohform. Sie stehen seit dem Redesign auf keinem Fragebildschirm mehr sichtbar — sie liegen ausnahmslos in der Aufdeckung und geben dort Kasten und Symbol automatisch ab. Dieser Abschnitt zeigt sie nur noch als Quelle, damit erkennbar bleibt, was in der Klappe landet.
Wer .why-box oder .find-hint ungekapselt auf einen Fragebildschirm stellt, verletzt Gesetz 2 aus REDESIGN.md. Richtig ist immer: details.disclose > .disclose-body > …. Außerhalb des Funnels — Kundenbereich, Ergebnisseite, diese Seite — dürfen die Kästen weiterhin sichtbar stehen.
Ihr Geburtsjahr bestimmt die Restlaufzeit bis zum Rentenbeginn. Je länger die Laufzeit, desto stärker wirkt der Unterschied in der Rendite zwischen Ihrem heutigen Vertrag und einem Altersvorsorgedepot.
Bis zum 26. Juli 2026 standen diese beiden Kästen dauerhaft offen auf jeder Frageseite. Der Auftraggeber hat das Ergebnis als überladen zurückgewiesen — die Erklärung bleibt vollständig erhalten, aber sie wird nun angefordert statt aufgedrängt. Der Baustein dafür ist details.disclose.
Struktur-Aufklapper außerhalb des Funnels
Auf Ergebnis-, Portal- und Übersichtsseiten gliedern Aufklapper Inhalt statt Erklärung. Sie tragen die Kartenform, und der Pfeil sitzt rechts in der Kopfzeile.
Annahmen und Grenzen7 Punkte
Nicht gerechnet: Inflation, Renditeschwankung, Verrentungsphase, Übertragungskosten.
Rechtlicher Hinweis
RentenCheck ist ein Informations- und Vergleichswerkzeug und spricht keine Empfehlung aus.
Der Pfeil kommt in allen Formen aus derselben Regel auf summary::after — nie ein ▸ oder ⌄ als Zeichen in den Text schreiben.
Bausteine
Fortschrittsanzeige
Schrittanzeige der Fragenstrecke und Stufenanzeige der Dokumentenauslesung. Der Balken zählt von der ersten Frage bis zum Ergebnis; Nebenwege haben ihren eigenen Drei-Schritt-Fortschritt.
Seit dem Redesign dünner und leiser: 3 px hoch auf der weichen Fläche --rc-neutral statt 4 px auf der kontrastreichen. Das Füllstück behält das Markengrün — es ist der eine Akzent auf dem Bildschirm. Der Balken ist neben Frage, Eingabe und Knopf das einzige Chrome, das ein Fragebildschirm sichtbar tragen darf.
Balken der Fragenstrecke
Die Breite des Füllstücks setzt die Seitenlogik über i.style.width — das ist der einzige Stilwert, den eine Seite selbst setzt.
Stufenanzeige, senkrecht
- 1Dokument hochladenErledigt
- 2Werte auslesenLäuft…
- 3Prüfen und bestätigenRund eine Minute
Stufenanzeige, waagerecht
- 1Angaben
- 2Ergebnis
- 3Konto
Bausteine
Tabellen
Werteliste mit rechtsbündigen Beträgen, wie auf der Prüfseite. .tbl-wrap ist der waagerecht rollende Rahmen — ohne ihn läuft die Tabelle auf schmalen Geräten aus der Seite.
| Vertrag | Anbieter | Typ | Guthaben | Zulagen | Status |
|---|---|---|---|---|---|
| db FörderRente Premium | Zurich Deutscher Herold | Fondsgebunden | 27.764,95 € | 785,81 € | Übertrag möglich |
| RiesterRente Klassik | Allianz | Klassisch | 8.410,20 € | 350,00 € | Prüfung offen |
| Banksparplan | Sparkasse | Banksparplan | 3.120,00 € | 175,00 € | Unklar |
Kurze Wertelisten ohne Tabelle
Für zwei Spalten genügt .dl: Beschriftung links, Betrag rechts, fett und mit Tabellenziffern.
Bausteine
Ablegefeld
Ruhezustand, Datei darüber, Datei geladen, Fehler. Live: ziehen Sie eine Datei über das erste Feld — der Zustand .is-over wird gesetzt, hochgeladen wird nichts.
Bitte bleiben Sie unter 10 MB. Ein Foto der Seite genügt.
Bausteine
Symbole
Alle als eingebettete Vektorgrafik verfügbaren Symbole. Sie liegen in assets/app.js, werden über <span data-icon="name"></span> eingesetzt und erben die Textfarbe. Kein externer Symbolsatz, keine Bilddatei.
Texte
Rechtliche Bausteine
Kurz- und Langform des rechtlichen Hinweises, Warnhinweis Zulagen-Rückzahlung, Datenschutzbausteine. Alle Texte sind in CONTENT.md § 0.3 bis § 0.5 wörtlich festgelegt und werden nicht umformuliert.
Wo sie stehen, hat das Redesign geändert: nur noch einmal und nur an natürlichen Endpunkten — Fußbereich der Landing-Seite, Ergebnisseite, Registrierung. Auf einem Fragebildschirm erscheint keine rechtliche Zeile mehr; gehört sie dort inhaltlich hin, liegt sie in der Aufdeckung. Die Langform gehört in ein details.card.rc-legal-block, nicht offen auf die Seite.
Kurzform, an den Endpunkten der Strecke
Keine Anlage- oder Rechtsberatung. RentenCheck liefert eine Entscheidungsgrundlage, keine Empfehlung.
Langform
RentenCheck ist ein Informations- und Vergleichswerkzeug. Wir bereiten Ihre Entscheidung vor und stellen Ihnen eine Entscheidungsgrundlage bereit. Wir erbringen keine Anlage-, Steuer-, Versicherungs- oder Rechtsberatung und sprechen keine Empfehlung für oder gegen ein bestimmtes Produkt aus.
Alle Zahlen sind Modellrechnungen auf Basis Ihrer Angaben und der gesetzlichen Werte zum Stand Juli 2026. Sie ersetzen keine Prüfung Ihrer vollständigen Vertragsunterlagen. Angaben auf Generationsebene beschreiben typische Merkmale einer Tarifgeneration, nicht die Bedingungen Ihres individuellen Vertrags. Wertentwicklungen der Vergangenheit sind kein verlässlicher Hinweis auf künftige Ergebnisse.
Die Reform der privaten Altersvorsorge tritt zum 1. Januar 2027 in Kraft. Einzelheiten können sich im Gesetzgebungsverfahren noch ändern. Wir aktualisieren die Berechnung, sobald der endgültige Gesetzestext vorliegt.
Datenschutz im Prototyp
Ihre Angaben bleiben in diesem Prototyp ausschließlich in Ihrem Browser gespeichert. Es findet keine Übertragung an Dritte statt.
Schwärzung in der Dokumentenstrecke
Name und Versicherungsnummer werden geschwärzt. Wir erkennen personenbezogene Felder in Ihrem Dokument und entfernen sie, bevor etwas gespeichert wird. Für die Auswertung brauchen wir nur Produktname, Vertragsbeginn, Beträge und Kosten.
Optionale Einwilligung, nicht vorausgewählt
Der Text eines Ankreuzfelds gehört in ein <span>. .check ist ein Flex-Container — fett oder kursiv ausgezeichnete Wörter würden sonst zu eigenen Flex-Elementen und in eine Zeile gedrängt.
Texte
Kommentar-Baustein
Der Kommentarbereich, wie er unter jedem Screen erscheint — auch unter dieser Seite. Er wird von assets/app.js nachgeladen und braucht kein Markup auf der Seite.
Die runde Schaltfläche unten rechts öffnet den Kommentarbereich. Kommentare werden je Seitenpfad gespeichert, sind für alle Zugangsberechtigten sichtbar und tragen Ihre E-Mail-Adresse als Autorenkennung. Ihr Name kommt aus der Zugangsanmeldung — Sie müssen nichts eingeben. Die Anleitung steht in So kommentieren Sie den Prototyp.
Bitte tragen Sie in Kommentaren keine echten Kundendaten und keine Vertragsnummern ein. Der Prototyp ist ein geschlossener Bereich, aber kein Produktionssystem.