/* Simulation = Mechanik-/Vorbereitungsmaterial, KEIN Nutzer-/Marktbeleg.
*
* Einrichtungsfrontend — Gestaltung (Großlauf GL-08: Design B „Morgenlicht", eine Schrift, nur Hell).
*
* REFERENZ (Runbook app-design-prinzipien §9.1, Referenz-Pflicht):
* Anker ist customer-cockpit/styles.css aus diesem Repo (die abgenommene Kunden-Oberfläche).
* ÜBERNOMMEN: die Rollennamen der Tokenpalette (Werte stehen nur in `marke.css`), die Abstands-/Text-/Radius-Skala, die
* Schaltflächen-Grammatik (primary/secondary/quiet), `status-chip[data-tone]`, die ruhige
* Kontextzeile über der Überschrift (in der einen Schrift), 44px Mindest-Trefferfläche, `:focus-visible` mit 3px
* Aussenring, die `prefers-reduced-motion`-Klausel und der Sprunglink.
* GEÄNDERT: kein Shell-Raster mit Seitennavigation — das ist ein Cockpit-Muster und hier falsch.
* Ein Einrichtungsweg ist linear, deshalb eine einspaltige, zentrierte Bahn mit fester Satzbreite
* und einer nummerierten Schrittleiste. Der Sektionsrhythmus wechselt bewusst (Einstieg
* grosszügig, Formularschritte kompakt) statt überall dasselbe Polster zu setzen.
* NICHT übernommen: Verlaufsflächen, Drei-Karten-Reihen, Milchglaseffekte, eine einzige
* Einheitsschrift über alles — die dokumentierten Slop-Tells.
*
* Keine Fremdschrift, kein externes Asset: die Auslieferung läuft unter einer strengen CSP
* (`default-src 'self'`), und eine Lizenzfrage für eine gekaufte Schrift entsteht gar nicht erst.
*
* TOKEN STEHEN NICHT MEHR HIER (Welle 12 / W2b, D25 §4.1). Der vollständige `:root`-Block ist
* nach `public/basis.css` umgezogen — Farbe, Schrift, Abstand, Text, Radius, Maße, dazu die vier
* dort neuen Gruppen (Höhenordnung, Bewegung, fluide Stufen, dunkler Zwilling). Diese Datei
* behält ihre Komponentenregeln und setzt die Token nur ein. `basis.css` wird als eigene
* ``-Zeile VOR dieser Datei geladen (`index.html:8`, EA-D25-01).
*
* WARUM STATT DESSEN EINE ``-ZEILE: Der kürzere Weg wäre die Einbinde-Regel am Kopf dieser
* Datei gewesen — eine Zeile, die alle drei Seiten ohne fremde Änderung erreicht hätte. Probe 35
* in `produkt-sim/einrichtung/selftest.mjs:906-907` liest genau diese Datei und verlangt, dass
* diese Regel hier NICHT vorkommt (Schutzriegel gegen externe Quellen). Der Riegel wird nicht
* gelockert; drei ``-Zeilen sind der billigere Preis.
* BEACHTEN: die Probe liest die Rohbytes, Kommentare eingeschlossen. Der Name der Regel darf
* deshalb auch in diesem Text nicht stehen — sonst meldet der Riegel die Erklärung als Verstoß.
*/
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
margin: 0;
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
background: var(--canvas);
color: var(--ink);
font-family: var(--sans);
font-size: var(--text-body);
line-height: 1.55;
/* 281b (B-35, Fundament §3): dieselbe Schriftglättung wie auf der Website — die Systemschrift
zeichnet dann so ruhig wie in einer nativen App. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--action); }
h1, h2, h3, p, ul, ol, dl { margin-top: 0; }
/* Politur-Stufe 1 (P-04, Bericht 166): die bare-`h1`-Regel (36px, per `@media(min-width:48rem)`
sogar 56px) entfällt ersatzlos — dieselbe Rolle trägt jetzt `.seitentitel h1` (`basis.css`,
24px/`--tenant-titel`), die eine K-04-Stufe über alle drei Flächen. Jedes `
` dieser Datei
steht seither in einem `.seitentitel`-Wrapper (index.html). */
h2 { margin-bottom: var(--space-2); font-size: var(--t-lauftext); line-height: 1.4; letter-spacing: -.012em; }
/* 281b (B-35, Fundament §3: „keine Versal-Kicker über Abschnitten“): h3 ist eine Zwischenüberschrift in
Satzschreibung, nicht mehr ein gedämpftes Versal-Etikett. Datenlabels bleiben bei `.etikett` (basis.css). */
h3 { margin-bottom: var(--space-2); font-size: var(--text-body); font-weight: 650; letter-spacing: -.005em; color: var(--ink); }
p { max-width: 68ch; text-wrap: pretty; }
.skip-link {
position: fixed; z-index: 30;
top: max(var(--space-2), env(safe-area-inset-top)); left: max(var(--space-2), env(safe-area-inset-left));
padding: var(--space-3) var(--space-4);
background: var(--ink); color: var(--knopf-auf-akzent); border-radius: var(--r-1);
transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
/* Der Fokusring steht seit W2b GENAU EINMAL, in `basis.css` (D25 §7 Punkt 5, LE-294). Hier stand
er als zweite von fünf Fassungen; die Regel dort ist wortgleich (3px, Versatz 3px) und liest
`--fokusring`, damit eine getönte Fläche nur noch den WERT umschreibt. */
/* Ehrlichkeits-Grammatik (Runbook §5): die Grenze steht oben, nicht im Kleingedruckten. */
.grenzleiste {
margin: 0;
/* Die Leiste ist ein Band über die volle Breite, kein Fliesstext: sie muss sich dem globalen
Lesemass `p { max-width: 68ch }` (oben) ausdrücklich entziehen. Ohne diese Zeile endet der
graue Grund bei 571 von 1280 px und die Ehrlichkeits-Leiste sieht aus wie ein verrutschter
Kasten (gemessen im Browser, nicht geschätzt). */
max-width: none;
padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-4) var(--space-2);
background: var(--surface-strong);
border-bottom: 1px solid var(--border);
color: var(--muted);
text-align: start; /* Nachlauf C (A11 A-3, Punkt 6): mehrzeiliger Text steht linksbündig, nie zentriert */
font-size: var(--text-caption);
font-weight: 500; /* 281b: Ruhe statt Fettdruck — die Grenze steht oben, sie muss nicht rufen. */
}
.kopfleiste {
/* K-01: dieselbe Kopfzeilen-Grammatik wie der Verwaltungsrahmen (`.topbar` in
`verwaltung.css`). Beide Werte stehen als `--kopf-hoehe` und `--kopf-polster` in `basis.css`;
aus drei verschiedenen Kopfzeilen wird damit eine (D25 §7 Punkt 4). */
min-height: var(--kopf-hoehe);
padding: var(--kopf-polster);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
/* GL-08 (N-02): der Kopf ist nur die Wortmarke des Logos (Morgenzeile), kein Zusatztext. */
.wortmarke { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* Nachlauf C (A11 A-9): bei 375 px schrumpfte die Wortmarke auf „TMA“ und der Kontostatus brach Wort für Wort um. Die Marke behält ihre Breite;
was nicht daneben passt, rutscht unter sie (die Kopfzeile darf umbrechen, die Chips füllen dann die Zeile). */
.kopfleiste { flex-wrap: wrap; row-gap: var(--space-2); }
.kopf-chips { flex: 1 1 auto; min-width: 0; }
@media (max-width: 30rem) { .kopf-chips .status-chip { flex: 1 1 15rem; } } /* Handy: der Kontostatus steht in einer Zeile über dem Knopf, nicht zu dritt neben ihm */
.wortmarke-bild { display: block; width: auto; height: 1.5rem; }
/* Politur-Stufe 1 (P-24): zwei Chips rechts in der Kopfzeile (Betriebs-Hinweis + Kontostatus),
ohne die bestehende `.kopfleiste`-Grammatik (`space-between`, zwei Kinder) zu ändern. */
.kopf-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
main { min-width: 0; }
.bahn { width: min(100%, var(--bahn)); margin: 0 auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-8)); }
/* --- Fortschritt (D24 §5, F-07) -----------------------------------------------------------------
Die frühere Chip-Reihe ist WEG, samt ihrer Farbregeln. Sie hatte zwei Fehler auf einmal: sie war
die zweite Fortschrittswahrheit neben „Schritt N von 6" im Fliesstext, und sie unterschied ihre
Zustände über die Füllung einer Nummernscheibe — also über Farbe. Die Zustände tragen jetzt
Wörter, und die Anzeige steht in der schwebenden Bodenleiste.
Die Liste `#schrittleiste` bleibt als Vorlesetext im Dokument (`.nur-vorlesen`, basis.css) und
braucht deshalb hier KEINE eigene Regel mehr. Leiste, Strich und Zustandswort kommen aus
`basis.css` (K-11) — diese Datei setzt für den Fortschritt keine einzige Farbe.
Die Knopfreihe der Leiste ist mit Absicht NICHT `.knopfreihe`: die trägt unter 34rem
`width: 100%` je Knopf und einen Aussenabstand nach oben. Beides zusammen verdoppelte die Höhe
der Leiste auf einem Telefon — genau die Stelle, an der sie am wenigsten Platz hat. */
.leiste-knoepfe { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.leiste-knoepfe .knopf { min-height: var(--treffer); padding-block: var(--space-2); white-space: nowrap; }
/* Raum-Regel, präzisiert: `basis.css` rechnet mit der Sollhöhe der Leiste (`--boden-hoehe`). Auf
320 und 360 px bricht sie aber in zwei Zeilen um, und dann reicht dieser Abstand nicht — gemessen
als Überlappung mit der Fusszeile (P-D24-11). `--leisten-hoehe` meldet `app.js` aus der
tatsächlichen Höhe; ohne `ResizeObserver` gilt weiterhin der Sollwert aus dem Fundament. Damit
gibt es KEINE zweite Höhenzahl, die auseinanderlaufen könnte. */
main.hat-bodenleiste {
padding-bottom: calc(
var(--leisten-hoehe, calc(var(--boden-hoehe) + env(safe-area-inset-bottom, 0px))) + var(--space-8)
);
}
/* 17.10.2026 (Welle 3q, F-076/Wiederkehr F-022): Scrollt der Browser ein Feld in Sicht (Klick, Tab, Autofill-Fokus,
Playwright), landete es unter der festen Bodenleiste; die Checkbox „#dok-impressum“ blieb unklickbar.
`scroll-padding-bottom` hält jedes Ziel ÜBER der Leiste; die Scrollposition ändert sich nicht, solange nichts scrollt. */
html:has(main.hat-bodenleiste) {
scroll-padding-bottom: calc(
var(--leisten-hoehe, calc(var(--boden-hoehe) + env(safe-area-inset-bottom, 0px))) + var(--space-4)
);
}
/* Die Anleitung (K-12, basis.css) behält die Schrittnummern ihrer Quelle: WEB.DE und GMX verweisen
im Text auf „den Schalter aus Schritt 2", und Schritt 2 steht in der Füllung darüber. Ein
fortlaufend neu nummerierter Block machte aus einer richtigen Anleitung eine falsche. */
.anleitung-koerper ol { list-style: decimal; }
/* --- Abschnitte: bewusst unterschiedlicher Rhythmus ------------------------------------------- */
/* DASHBOARD-NEUBAU-SPEC §1 Punkt 2/§2.1 NEU `--trennlinie-fein`: Premium entsteht über feine
Flächen-/Linienabstufung statt harter Kontrastsprünge. Der Rhythmus der neun Einrichtungsschritte
ist der dichteste Wiederholungsfall dieser Regel auf der Seite; die gedämpfte Trennlinie
(`--border` bei 70% Deckkraft, `basis.css`) ersetzt hier die volle Randfarbe. Panelränder mit
eigener Fläche (`.vorschlag`, `.platzhalter`, `details.rohfelder`, `.dokumentliste`) bleiben
bewusst auf `--border`: sie grenzen eine Fläche ab, keinen bloßen Fließtext-Absatz. */
.abschnitt { padding-block: var(--space-8); border-top: 1px solid var(--trennlinie-fein); }
.abschnitt:first-of-type { border-top: 0; }
.abschnitt.einstieg { padding-block: clamp(var(--space-8), 7vw, var(--space-12)); }
.abschnitt.schmal { padding-block: var(--space-6); }
/* GL-08 (F-001, 200 % Zoom bei 320 px = 160 CSS-px): ein langes Wort in der Überschrift bricht um, statt die Seite zu verbreitern. */
.bahn :is(h1, h2, h3) { overflow-wrap: anywhere; hyphens: auto; }
.kontext { margin-bottom: var(--space-1); color: var(--muted); font-size: var(--text-prose); line-height: 1.6; }
.einstieg .kontext { font-size: var(--text-lead); }
.fuehrung { color: var(--muted); }
/* R-001 (25.09.2026): die Abschlussseite nach der Kontoanlage, im Stil der Website
(`website-v1/DESIGN-FUNDAMENT.md` §1 „Ruhe durch Entzug", §3 „Serif ist die Stimme der
Korrespondenz", §11 Produkt-Register): ein Titel, ein Satz in Tinte, viel Luft, keine Karte,
kein gefüllter Knopf. Nur Token aus `basis.css` — keine eigene Farbe, keine eigene Schrift. */
/* Keine Haarlinie oben: die Abschlussseite ist der einzige sichtbare Abschnitt, die Linie stand
sonst doppelt unter der Kopfzeile (`.abschnitt:first-of-type` greift nicht, weil die verborgenen
Abschnitte davor mitzählen). */
.abschnitt.ende { padding-block: clamp(var(--space-10), 8vw, var(--space-12)); border-top: 0; }
.ende .seitentitel h1 {
font-size: var(--text-title); font-weight: 650;
line-height: 1.12; letter-spacing: -0.018em;
}
.ende .seitentitel .fuehrung { color: var(--ink); }
.ende .seitentitel .fuehrung strong { font-weight: 650; overflow-wrap: anywhere; }
.ende-zusatz { margin: var(--space-3) 0 0; max-width: var(--satz); color: var(--muted); text-wrap: pretty; }
.ende-zusatz:empty { margin: 0; }
.ende .platzhalter { max-width: var(--satz); }
.ende-erneut {
max-width: var(--satz); margin-top: var(--space-10); padding-top: var(--space-6);
border-top: 1px solid var(--trennlinie-fein);
}
.ende-erneut-titel { margin: 0; font-size: var(--text-body); font-weight: 650; color: var(--ink); }
.ende-erneut .feld { margin-top: var(--space-5); }
/* --- Statuszeichen ---------------------------------------------------------------------------- */
.status-chip {
min-height: 30px; padding: var(--space-1) var(--space-3); border-radius: var(--r-pille);
display: inline-flex; align-items: center; gap: var(--space-2);
background: var(--surface-strong); color: var(--muted);
font-size: var(--text-caption); font-weight: 600; white-space: nowrap;
}
.status-chip[data-tone="success"] { background: var(--success-soft); color: var(--success); }
.status-chip[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.status-chip[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
/* POLITUR WELLE 12 / W6 (Befund E-6): ein Chip in der Kopfleiste darf umbrechen und schrumpfen.
GEMESSEN, nicht am Bild geschaetzt (`80-bau-w6-werkzeug/w6-bilder.mjs breiten`): bei 320 px —
der Referenzbreite aus WCAG 1.4.10, also 400 % Zoom auf 1280 px — schob `#kopf-status` die
EINRICHTUNGSSEITE um 39 px waagerecht auf. Der Chip ist dort 230 px breit und `nowrap`, die
Seite hat 320. Alle 72 uebrigen Messpunkte der Breitenmatrix waren sauber; dieser eine nicht,
in beiden Modi.
Der Befund ist NICHT aus dieser Welle: an `.status-chip` hat W6 nichts geaendert, und der
Chip traegt seinen langen Text („… · Kennwort bestaetigt") seit dem Step-up-Bau.
Die Regel stand bis hierher NUR in `kunde.css` und galt damit nur fuer das Cockpit; ihr
Kommentar dort begruendete das mit „was fuer den Einrichtungsweg richtig ist". Gemessen ist es
das nicht — dieselbe Kopfleiste hat dieselbe Falle. Sie zieht deshalb hierher, wo alle drei
Seiten sie lesen, und die Dublette in `kunde.css` entfaellt ersatzlos (eine Wahrheit pro Sache).
`white-space: normal` ERLAUBT den Umbruch, es erzwingt ihn nicht: solange der Chip passt,
bleibt er einzeilig, und am Rechner aendert sich nichts.
NACHTRAG AUS DEMSELBEN ZUG (EA-D25-06): `.leiste-konto` ist der zweite Ort, an dem ein
`status-chip` in einem SCHMALEN Behaelter steht — der Fuss der Seitenleiste des Cockpits, 15,5rem
breit. Die Chips sind mit EA-D25-06 aus der Kopfzeile dorthin gezogen und standen damit ploetzlich
wieder ohne diese Regel. GEMESSEN von `_qa/d20-marke-ux.mjs` (Nachzug B-W9B-UI-06): die
Seitenleiste lief bei 1280 px um **70 px** ueber ihre Rasterspalte hinaus, weil
`Musterbau GmbH · Kennwort bestaetigt` als `nowrap` breiter ist als die Spalte.
Die Regel bekommt deshalb den zweiten Ort statt einer zweiten Fassung; welcher Behaelter schmal
ist, entscheidet der Selektor, nicht eine Kopie in `kunde.css`.
Dritter Ort (Integration d, Review 306 Befund 2): die Gründe-Chips im Mailverständnis ragten bei
360/375 px über den Rand und erzwangen bei 320 px waagerechtes Scrollen.
Vierter Ort (Welle E, Paket 501, Review R1-b K-1): die Grundwort-Chips einer Karte unter „Braucht
Sie“ — bei WebKit 375 px war „Text nicht gespeichert — bitte im Postfach beant…“ abgeschnitten. */
.kopfleiste .status-chip,
.leiste-konto .status-chip,
.verstaendnis-gruende .status-chip,
.brauchtdichliste .kopf .status-chip {
max-width: 100%; min-width: 0;
overflow-wrap: anywhere; white-space: normal; text-align: left;
}
/* Slop-Kante 1 von 8 (D25 §7 Punkt 3): hier stand eine 4 px starke linke Kante in `--control`.
Ersatz genau wie in der Spec beschrieben — getönte Fläche, Haarlinie rundum in der
Zustandsfarbe und eine fette erste Zeile. Die Fläche und das Wort tragen den Zustand jetzt
gemeinsam; die Farbe steht nie allein.
Die Haarlinie bleibt bewusst auf `--haarlinie`: eine Trennung ist eine Trennung, ein
Zustandsträger ist sie nicht. Das führende Zeichen, das D25 zusätzlich nennt, braucht ein
eigenes Markup-Element (die Verwaltung führt es als `