/* Lokale Kopien der im Handoff festgelegten Familien. Die vier WOFF2-Dateien
* sind variable Fonts; die Regeln geben ausschliesslich die bisher aus
* Google Fonts angeforderten Schnitte frei. OFL-1.1 liegt neben den Dateien
* unter public/fonts/{karla,rokkitt}/OFL.txt. */
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/karla/karla-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/karla/karla-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/karla/karla-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/karla/karla-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/karla/karla-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/karla/karla-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/karla/karla-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/karla/karla-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rokkitt'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/rokkitt/rokkitt-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Carspotter — Oberflaeche nach dem Produktions-Handoff.
*
* WOHER DIE ZAHLEN KOMMEN: aus dem Handoff, nicht aus einer Abschrift.
* Die App-Palette (HANDOFF §11, `--cs-*`), die Schriften (§12), die Skala,
* Rampen, Abstaende, Radien und Schatten stehen NICHT in dieser Datei — sie
* werden von scripts/tokens-erzeugen.js aus design/HANDOFF.md und
* design/_ds/ gelesen und liegen in public/css/tokens.css (Tabelle:
* design/tokens.json). index.html laedt tokens.css VOR dieser Datei.
*
* SEIT WI-0091 IST DER APP-RAUM KEINE ABSCHRIFT MEHR. Bis dahin las der
* Erzeuger das Sheet der TESTVERSION, und alles, was der Produktions-Handoff
* darueber hinaus fuehrt — Grund, Flaechen, Textstufen, Zustandsfarben —
* stand hier von Hand ausgeschrieben. Genau das war die Drift, gegen die
* WI-0044 gebaut wurde. Jetzt verweist jeder dieser Werte auf sein Token aus
* §11; was hier noch mit eigenem Wert steht, fuehrt der Handoff NICHT als
* Token: die Kartenmasse (Designspec Kap. 6) und die Masse der Bildschirme
* (Kap. 8/10).
*
* DIE REGEL DIESER DATEI: unterhalb des Token-Blocks steht KEIN roher Wert
* mehr — keine Farbe, kein Abstand, kein Radius. Jedes Bauteil greift ueber
* var() zu. Stimmt ein Wert nicht, wird das TOKEN korrigiert, nie das Bauteil.
* tests/design.test.js prueft das am GERENDERTEN Bildschirm nach, nicht am
* Dateitext.
*
* Die fuenf Seltenheitsfarben stehen bewusst NICHT hier, sondern in
* public/js/design.js: sie werden je Karte gesetzt und duerfen deshalb nur an
* einer einzigen Stelle existieren. Diese Datei kennt sie nur als
* --r-c / --r-g / --r-glow und faellt ohne sie auf die neutrale Vorstufe
* zurueck (Kap. 6: vor dem Aufdecken #cfc3ab).
*/
/* == TOKEN-BLOCK: ANFANG == */
:root {
/* --- Schriften (Kap. 2) ---
Familien, Skala, Zeilenhoehen und die beiden Laufweiten der Ueberschriften
kommen aus public/css/tokens.css. Hier stehen nur die Groessen und
Gewichte, die der Entwurf NICHT als Token fuehrt. */
--schrift-klein: 12px;
--schrift-winzig: 10px;
--schrift-mini: 8.5px;
/* „Body small" aus HANDOFF §12 (13–14,5 px). Der Entwurf setzt darauf die
Warnzeile unter dem Sucher (13,5 px/700, Artboard 07). */
--schrift-hinweis: 13.5px;
/* Die obere Stufe von „Body small" (§12, 13–14,5 px). Der Entwurf setzt sie
dort, wo eine Zeile eine Zahl traegt, die gelesen werden soll: „6 von 8
gewählt" (Artboard 28), die drei Zeilen des Datenblocks (Artboard 27),
die Handlung einer wartenden Partie (Artboard 22). */
--schrift-zeile: 14px;
/* „Section label" aus HANDOFF §12 — die kleine Versalzeile, mit der der
Entwurf jeden Abschnitt anschreibt (§4.6: 11 px, 800, .08em, versal,
--cs-text-dim). Sie ist NICHT der h6-Grad der Schriftskala (13 px): die
Skala beschreibt eine Ueberschrift, dies hier ein Etikett ueber einer
Gruppe. Bis WI-0096 gab es sie gar nicht, und der Merkmalsvergleich
meldete auf 22/23/24/27 genau diese fehlende Stufe der Groessenleiter. */
--schrift-abschnitt: 11px;
/* „Screen title (tab)" aus HANDOFF §12 — 28 px, zwischen h2 und h3 der
Skala. Der Entwurf setzt jeden Reiter-Bildschirm darauf (22, 23, 24, 42). */
--schrift-titel-reiter: 28px;
/* Die kleinere Stufe daneben: der Bandname der Wurflage (11,5 px/700,
Handoff v2 §5.6) und ueberall dort, wo eine Zeile eine Auskunft traegt
und keine Ueberschrift ist. */
--schrift-hinweis-klein: 11.5px;
/* Die Intervallzeile unter dem Bandnamen der Wurflage. HANDOFF §5.6
schreibt sie ausdruecklich aus: `font-size: 10.5px`. Sie ist NICHT
`--schrift-winzig` (10px) — auf dieser halben Stufe steht die Einheit
eines Kartenwerts, und beides auf denselben Grad zu legen hat die
Groessenleiter von 16 verschoben (WI-0129). */
--schrift-wurf-intervall: 10.5px;
/* „Board eyebrow" aus HANDOFF §12: 11 px/800/.08em in Versalien. Der
Wert stand bis WI-0097 roh in `.abschnitt-label`. */
--schrift-label: 11px;
--gewicht-fett: 800;
/* Das dritte Gewicht der Fliesstextfamilie (§12: „Button secondary",
„Card value", „Tab item"). Es stand bis WI-0068 nicht als Token da,
weshalb 700 im Fliesstext gar nicht vorkam — genau das meldete der
Merkmalsvergleich auf `07-scan-viewfinder` als fehlendes Gewicht. */
--gewicht-kraeftig: 700;
--gewicht-halb: 500;
--laufweite-serie: 0.16em;
--laufweite-wurf: 0.22em;
/* --- Dunkler App-Raum (HANDOFF §11) ---
KEIN Wert steht hier mehr ausgeschrieben. Links der Name, unter dem die
App ihn benutzt, rechts das Token des Handoffs — das ist der ganze
Inhalt dieses Blocks. Aendert der Handoff einen Ton, aendert er ihn hier
mit, ohne dass eine Zeile CSS angefasst wird. */
--raum-bg: var(--cs-bg-top);
--raum-verlauf: var(--cs-bg);
--raum-text: var(--cs-text);
--raum-text-gedaempft: var(--cs-text-mute);
--raum-text-schwach: var(--cs-text-dim);
/* DIE VERSAL-KLEINZEILE (WI-0340). Der eigene Ton der Etiketten — der
Abschnittsmarken, der Feldbeschriftungen, der Einheit hinter einem Wert,
des Laendercodes auf der Karte. Er liegt zwischen `gedaempft` und
`schwach` und ist genau DESHALB jahrelang auf einen der beiden
ausgewichen: §11 fuehrte ihn nicht, und §7 Punkt 12 verbietet einem
Bauteil, sich einen eigenen Ton auszudenken. Seit HANDOFF §16.7
(01.10.2026) steht er als `--cs-label` in §11 — die Luecke ist
geschlossen, nicht umgangen. */
--raum-text-etikett: var(--cs-label);
/* Die Meta-Zeile (Fundzeit, Kartennummer) liegt zwischen gedaempft und
schwach. Der Handoff fuehrt dafuer keine eigene Stufe — §12 nennt fuer
Captions --cs-text-dim, fuer „Body small" --cs-text-mute. Genommen wird
die hellere der beiden, weil die Zeile gelesen werden soll. */
--raum-text-meta: var(--cs-text-mute);
--raum-fliess: var(--cs-text-2);
--karten-koerper: var(--cs-surface-card);
--foto-flaeche: var(--cs-surface-photo);
--blatt-flaeche: var(--cs-surface);
/* Der Schleier ueber einem verdeckten Bildschirm, heute unter der
Loeschabfrage (WI-0070, Artboard 17). */
--schleier-flaeche: var(--cs-scrim);
/* Wie weit ein Bildschirm hinter einem Schleier zuruecktritt — verwischt und
abgedunkelt, aber sichtbar: man soll sehen, worueber man entscheidet. */
--schleier-unschaerfe: 2px;
--schleier-deckkraft: 0.4;
/* Alle hellen Schleier auf dem dunklen Raum sind derselbe Ton in
verschiedenen Staerken. Der Handoff fuehrt die Reihe als --cs-fill-*
(Flaechen) und --cs-line-* (Haarlinien) und braucht dafuer keine
Mischung mehr. */
--blatt-rand: var(--cs-line-2);
--feld-flaeche: var(--cs-fill-2);
--feld-rand: var(--cs-line-3);
--gruen-flaeche: var(--cs-good-tint);
/* Den Rand der Erfolgsflaeche fuehrt §11 nicht — er wird aus derselben
Farbe gemischt statt danebengeschrieben. */
--gruen-rand: color-mix(in srgb, var(--cs-good) 30%, transparent);
--gruen-text: var(--cs-good-soft);
--gruen-icon: var(--cs-good);
/* Die Eroberung. Sie ist KEINE Aktionsfarbe — Terracotta bleibt den
Knoepfen —, sondern die Farbe EINER Auskunft: was auf dem Spiel steht,
und welche Karte gewonnen statt gefunden ist. Der Ton ist derselbe wie
die epische Seltenheit; §11 fuehrt ihn dort und hier. Flaeche und Rand
stehen dort nicht und werden aus --cs-r-epic gemischt. */
--erobert-flaeche: color-mix(in srgb, var(--cs-r-epic) 12%, transparent);
--erobert-rand: color-mix(in srgb, var(--cs-r-epic) 45%, transparent);
--erobert-text: var(--cs-epic-soft);
--erobert-marke: var(--cs-conquered);
--erobert-marke-text: var(--cs-conquered-ink);
--warn-icon: var(--cs-warn);
--warn-flaeche: var(--cs-warn-tint);
/* Der aufgehellte Warnton der Verlustzeilen auf 45b (WI-0164). §11 fuehrt
ihn nicht als eigene Stufe — der Entwurf setzt dort einen helleren Amber
als beim Warnzeichen, damit vier Zeilen hintereinander lesbar bleiben
und nicht wie vier Alarme wirken. Er wird deshalb GEMISCHT statt
danebengeschrieben: bewegt der Handoff den Warnton, geht er mit.
Dieselbe Bauart wie --gruen-rand und --erobert-flaeche darueber. */
--verlust-text: color-mix(in srgb, var(--warn-icon) 55%, var(--cs-on-accent));
/* --- Artboard 38b (WI-0183): die verlorene Eroberung ---
Der Ring: 130px wie in der Niederlage, aber 2,5px Rand im Warnton auf
einer leisen Warnflaeche — der Entwurf schreibt `rgba(232,154,94,.6)` und
`rgba(232,154,94,.08)` aus, und das ist Zeichen fuer Zeichen --cs-warn.
Also wird gemischt, nicht abgeschrieben.
Die Marke `AN MIRA` ist dieselbe Bauart wie --erobert-marke an der
eroberten Karte, nur im Warnton: gefuellte Pille bei 90 % Deckung, Schrift
in einem sehr dunklen Warmton. §11 fuehrt fuer sie keine eigene Stufe —
--cs-conquered/--cs-conquered-ink sind das Gegenstueck, und der Entwurf
baut beide gleich. */
--verlust-ring-rand: 2.5px;
--verlust-ring-farbe: color-mix(in srgb, var(--warn-icon) 60%, transparent);
--verlust-ring-flaeche: color-mix(in srgb, var(--warn-icon) 8%, transparent);
--verlust-marke: color-mix(in srgb, var(--warn-icon) 90%, transparent);
--verlust-marke-text: color-mix(in srgb, var(--warn-icon) 18%, black);
--verlust-marke-schrift: 9.5px;
--verlust-marke-polster: 3px 8px;
/* Artboard 38b setzt die Groessenleiter der Zeile eigens: den Modellnamen
auf 18px (eine Stufe ueber der halben Karte, weil hier kein zweiter Name
danebensteht) und die Herkunftszeile auf 12,5px. Beides steht HIER und
nicht an `.partie__halb-name`/`.meta` — die tragen ihre Groesse auf
anderen Bildschirmen weiter. */
--verlust-name-schrift: 18px;
--verlust-herkunft-schrift: 12.5px;
/* Der Bildschirm faengt HOEHER an als 38 und 39: der Entwurf setzt seinen
ersten Block auf `padding: 28px 26px 138px`, wo die beiden anderen bei
40 bzw. 48px beginnen. Der Grund ist die Liste — was oben zu viel steht,
fehlt ihr unten. */
--verlust-rand-oben: 4px;
/* Die Miniatur der verlorenen Karte steht bei 55 % — sie ist ein Beleg,
kein Angebot (Artboard 38b, HANDOFF §5 Zeile 38b). */
--verlust-streifen-deckkraft: 0.55;
/* Die hervorgehobene Stelle in einem leisen Satz — heller als der Satz,
leiser als eine Ueberschrift. §12 fuehrt den Ton als --cs-text-3. */
--raum-text-hell: var(--cs-text-3);
/* --- Knoepfe (Kap. 4) --- */
--btn-hoehe: 48px;
--btn-hoehe-ghost: 44px;
--btn-schrift: 16px;
/* HANDOFF §12 fuehrt „Button secondary" mit 15px/700 — die App setzte bis
WI-0097 auch den Ghost in 16px/800 und damit so schwer wie die
Hauptaktion. Genau das soll er nicht: der Ghost tritt zurueck. */
--btn-schrift-ghost: 15px;
--btn-text: var(--cs-on-accent);
--btn-glow: var(--cs-glow-btn);
--ghost-rand: 1.5px solid var(--cs-line-4);
--ghost-text: var(--cs-text-3);
/* Der WARNENDE Ghost. Der Entwurf fuehrt ihn neben dem neutralen als
eigene Form — dort, wo der Knopf etwas wegnimmt statt weiterzugehen
(„Ja, löschen", Artboard 17). Er bleibt ein Ghost: Terracotta gehoert der
Hauptaktion, und die Hauptaktion dieser Abfrage ist „Behalten". */
--ghost-warn-rand: 1.5px solid color-mix(in srgb, var(--warn-icon) 55%, transparent);
--ghost-warn-text: var(--warn-icon);
/* Die Pille `Weitere Kartendetails` (WI-0114, §17: 46px, Akzentfuellung,
Rand `rgba(232,154,94,.7)` — also der Warnton auf 70 % —, Ikone 17px).
Sie ist die einzige Form zwischen Hauptaktion und Ghost: gefuellt, aber
nicht Terracotta. */
--details-hoehe: 46px;
--details-rand: color-mix(in srgb, var(--warn-icon) 70%, transparent);
/* DER TON DER AKZENTGEFUELLTEN PILLE (WI-0129).
Hier stand `--color-accent-200` (#ffe1d0) — eine Sprosse der Akzentrampe
aus dem Organic-Sheet. Das Sheet ist laut HANDOFF §16 und Designspec
Kap. 11 Punkt 4 NUR fuer `--color-accent` und die beiden Schriftfamilien
Quelle; jede andere Farbe kommt aus §11 oder aus dem Entwurf selbst.
Der Entwurf faerbt diese Form ueberall gleich und nennt sie zweimal
ausdruecklich: die Pille auf 14/15 und den aktiven Klassen-Chip auf 18/19
(§16: Fuellung `rgba(198,113,57,.16)`, Rand `rgba(232,154,94,.7)`, Text
`#f0d9c2`). §11 fuehrt den Ton nicht als eigenes `--cs-*`-Token — deshalb
steht er HIER, in dem Token, das die Form beschreibt, und nicht im
Bauteil (Designspec Kap. 9). Gemessen war das eine der beiden fehlenden
Textfarben auf 14 und 15. */
--details-text: #f0d9c2;
--details-ikone: 17px;
/* DIE SCHRIFTGROESSE DES AKTIONSBLOCKS AUF 14/15 (WI-0129).
Artboards 14 und 15 zeichnen die Pille und die Reihe darunter
(„Andere Seite" / „Korrigieren") auf 14,5px — eine halbe Stufe unter der
allgemeinen Ghost-Groesse (§4.5 „Button secondary": 15px), und genau die
Stufe, die §12 fuer eine „Quiet text action" (14–14,5px/700) fuehrt.
Die App stand auf 15px; damit fehlte der Groessenleiter von 14 die
Sprosse zwischen 13 und 15, und die 14px der Tableiste standen einen
ganzen Punkt daneben. Der Wert gilt NUR fuer diesen Block — der Rest der
App bleibt bei `--btn-schrift-ghost`. */
--kd-aktion-schrift: 14.5px;
/* DAS BESTAETIGUNGSFELD AUF `45c` (WI-0165, HANDOFF §5.5f).
Der Entwurf zeichnet es als 52-px-Pille mit ambernem Rand und dem
getippten Namen in der Ueberschriftenschrift auf 19px — hoeher, groesser
und lauter als jedes andere Feld der App, weil es das einzige ist, dessen
Inhalt eine ganze Sammlung kostet. Die drei Werte stehen hier zusammen,
in dem Token, das die Form beschreibt; der Rand ist eine ABLEITUNG aus
--warn-icon (derselbe Ton wie der zerstoerende Knopf darunter) und kein
abgeschriebener Farbwert. */
--bestaetigung-hoehe: 52px;
--bestaetigung-rand: color-mix(in srgb, var(--warn-icon) 70%, transparent);
--bestaetigung-schrift: 19px;
/* --- Artboards 45d und 45f (WI-0166, HANDOFF §5.5f) ---
Der Laufzustand zeichnet einen 150-px-Ring mit einem 3-px-Bogen darin und
der Papierkorb-Glyphe auf 54 px; Ring und Bogen tragen den Warnton, der
Ring auf 35 %, der Bogen voll. Die Zahlen stehen so im Entwurf; der
Handoff fuehrt sie nicht als Token, deshalb stehen sie hier — dieselbe
Bauart wie die Erkennungs-Buehne weiter unten.
Die Farben sind ABLEITUNGEN aus --warn-icon und keine abgeschriebenen
Werte: bewegt der Handoff den Warnton, gehen Ring, Bogen, Glyphe und der
Fehlerblock von 45f gemeinsam mit. */
--loeschlauf-ring: 150px;
--loeschlauf-ring-rand: 2px;
--loeschlauf-bogen: 3px;
--loeschlauf-glyphe: 54px;
--loeschlauf-strich: 2.4;
--loeschlauf-ring-farbe: color-mix(in srgb, var(--warn-icon) 35%, transparent);
--loeschlauf-dauer: 1.1s;
/* Die drei Groessen von `45d`. Der Entwurf setzt die Aussage auf 30px —
zwischen h2 (32) und dem Reiter-Titel (28) der Skala —, den Umfangssatz
auf die obere Stufe von „Body small" (§12: 13–14,5px) und die Zeile
„Abbrechen geht ab hier nicht mehr" auf die Caption-Stufe (12,5px, §12
Zeile „helper"). Die Skala fuehrt weder 30 noch 12,5 als Sprosse; sie
stehen deshalb hier, in den Token, die diese Formen beschreiben. */
--loeschlauf-titel-schrift: 30px;
--loeschlauf-umfang-schrift: 14.5px;
--loeschlauf-bleib-schrift: 12.5px;
/* Der Fehlerblock von `45f`: amberne Flaeche auf 10 %, Rand auf 40 %. Er ist
LEISER als die Warnpille (--cs-warn-tint, 16 %) — was hier steht, ist eine
Beruhigung und kein Alarm. */
--loeschfehler-flaeche: color-mix(in srgb, var(--warn-icon) 10%, transparent);
--loeschfehler-rand: color-mix(in srgb, var(--warn-icon) 40%, transparent);
/* DER TON DER ZUSICHERUNGSZEILE (`45f`).
Derselbe Fall wie --details-text darueber: §11 fuehrt diese Aufhellung des
Warntons nicht als eigenes --cs-*-Token, und der Entwurf schreibt sie
ausdruecklich aus (`#f0c79c`). Sie steht deshalb HIER, in dem Token, das
die Form beschreibt, und nicht im Bauteil (Designspec Kap. 9). Eine
Mischung aus --warn-icon traefe sie nur ungefaehr — und dies ist die Zeile,
die eine ganze Sammlung fuer sicher erklaert. */
--loeschfehler-zusicherung-text: #f0c79c;
--loeschfehler-radius: 22px;
--loeschfehler-weg-radius: 20px;
/* ARTBOARD 44 — ADRESSKARTE UND DREI SCHRITTE (WI-0350). Die Werte stehen
so auf dem Brett. Die Nummernkreise mischen sich aus --color-accent
(.18 Flaeche, .55 Rand), die Ziffer traegt dieselbe ausgeschriebene
Aufhellung wie die Zusicherungszeile von `45f` — §11 fuehrt sie nicht. */
--geraetewechsel-adresse-radius: 22px;
--geraetewechsel-adresse-schrift: 23px;
/* Brett 45: dieselbe Karte, 21 px Schrift und 20 px Radius (WI-0351). */
--abmelden-adresse-radius: 20px;
--abmelden-adresse-schrift: 21px;
--abmelden-adresse-polster: 14px;
--abmelden-adresse-zeile: 25px;
--abmelden-adresse-etikett-abstand: 6px;
--geraetewechsel-schritt-hoehe: 44px;
--geraetewechsel-nummer: 28px;
--geraetewechsel-nummer-schrift: 13px;
--geraetewechsel-nummer-flaeche: color-mix(in srgb, var(--color-accent) 18%, transparent);
--geraetewechsel-nummer-rand: color-mix(in srgb, var(--color-accent) 55%, transparent);
--geraetewechsel-nummer-text: #f0c79c;
--geraetewechsel-schritt-schrift: 14.5px;
/* Der Entwurf setzt die Zusicherung auf 14,5 px und den Satz darunter auf
13,5 px — die beiden Stufen von „Body small" (§12), hier bewusst
gegeneinander gesetzt: die erste Zeile ist die Nachricht. Der leise Block
mit dem Weg von Hand steht eine halbe Stufe tiefer (13px, §12 „Body
small" unten), die Ueberschrift auf 26px — eine Sprosse ueber h3 (25),
die die Skala nicht fuehrt. */
--loeschfehler-schrift-zusicherung: 14.5px;
--loeschfehler-schrift-weg: 13px;
--loeschfehler-titel-schrift: 26px;
/* --- Artboard 45e (WI-0167, HANDOFF §5.5f, Umsetzungs-Handoff 13.5) ---
Der Abschluss zeichnet einen 130-px-Kreis mit 2,5-px-Rand, darin der Haken
auf 52 px. Ring, Flaeche und Glyphe tragen den GUT-Ton — dieselbe
Ableitungsbauart wie 45d aus --warn-icon, nur eben aus --gruen-icon. Der
Entwurf schreibt `rgba(164,199,107,…)` aus; das ist Zeichen fuer Zeichen
--cs-good, also wird gemischt und nicht abgeschrieben.
KEINE SELTENHEITSFARBE. --cs-r-uncommon traegt denselben Wert, gehoert
aber ausschliesslich der Seltenheitstabelle (Designspec Kap. 9); ein
Erfolgskreis, der sich daraus bediente, waere beim naechsten Stufenton
stillschweigend mitgewandert. */
--loeschfertig-ring: 130px;
--loeschfertig-ring-rand: 2.5px;
--loeschfertig-ring-farbe: color-mix(in srgb, var(--gruen-icon) 50%, transparent);
--loeschfertig-ring-flaeche: color-mix(in srgb, var(--gruen-icon) 10%, transparent);
--loeschfertig-glyphe: 52px;
--loeschfertig-strich: 2.75;
/* Die drei Groessen von `45e` — dieselbe Ueberlegung wie bei `45d`: die
Aussage auf 32px (die h2-Sprosse aus §12, hier eine Stufe ueber `45d`,
weil dieser Bildschirm keine Zahlen traegt), der Dank auf der oberen
Stufe von „Body small" und die Zeile ueber die Weiterleitung auf der
Caption-Stufe. */
--loeschfertig-titel-schrift: 32px;
--loeschfertig-dank-schrift: 14.5px;
--loeschfertig-gleich-schrift: 12.5px;
/* DER WEITERLEITUNGSBALKEN. 6px hoch, Spur wie beim Rundenauftakt, und der
Lauf traegt die Aktionsfarbe — so zeichnet der Entwurf ihn
(`background: var(--color-accent)`).
DIE DAUER STEHT HIER EIN ZWEITES MAL. Massgeblich ist `LOESCHFERTIG_MS`
in public/js/app.js: die Uhr traegt den Uebergang, der Balken malt ihn
nur mit (bei abgeschalteter Bewegung malt er gar nichts und die Frist
laeuft trotzdem). tests/screens.test.js haelt die beiden Zahlen
gegeneinander, damit sie nicht auseinanderlaufen. */
--loeschfertig-balken: 6px;
--loeschfertig-balken-spur: color-mix(in srgb, var(--cs-text) 10%, transparent);
--loeschfertig-balken-dauer: 4s;
--deaktiviert-deckkraft: 0.4;
/* DIE AUSGESCHALTETE HAUPTAKTION (WI-0112). HANDOFF §4.5, Zeile „Primary
disabled": `background: rgba(198,113,57,.35); color: rgba(249,244,237,.55)`,
kein Schein. §11 fuehrt die Flaeche als eigenes Token
(--cs-accent-disabled) — es war eines der Token, die der Handoff
ausschreibt und die App nirgends benutzte.
Die App hat den Zustand stattdessen ueber die DECKKRAFT des ganzen
Knopfes gemalt. Das sieht aehnlich aus und ist doch etwas anderes: es
blasst auch den Schein und den Rand aus, es haengt am Grund darunter,
und im Vergleich gegen den Entwurf taucht der Knopf mit VOLLER
Terracotta-Farbe auf, weil eine Deckkraft die Farbe nicht aendert. Der
Ton fuer die Schrift steht in §4.5 ohne eigenes Token und wird deshalb
aus --cs-on-accent gemischt. */
--btn-flaeche-aus: var(--cs-accent-disabled);
--btn-text-aus: color-mix(in srgb, var(--cs-on-accent) 55%, transparent);
/* --- Seltenheit: neutrale Vorstufe (Kap. 6) --- */
--neutral-c: var(--color-neutral-800);
--neutral-g: var(--cs-text-2);
--neutral-glow: 207, 195, 171;
--kante-neutral: 0 0 0 1.5px color-mix(in srgb, var(--cs-text) 18%, transparent);
/* Die Seltenheitsfarbe selbst — hier steht sie auf der neutralen Vorstufe
(#cfc3ab, Kap. 6). Sie ist damit UEBERALL belegt: eine Silhouette auf dem
Auswahl-Bildschirm oder im Scan-Sucher steht ausserhalb jeder Karte, und
ihr `stroke: var(--r-g)` darf dort nicht ins Leere zeigen. Die fuenf
echten Toene kommen je Karte aus public/js/design.js und ueberschreiben
diese drei Werte am seltenheitsgefuehrten Element. */
--r-c: var(--neutral-c);
--r-g: var(--neutral-g);
--r-glow: var(--neutral-glow);
/* --- Karte: Format (Kartenspec Kap. 2) --- */
/* Das Format 59:91 gilt fuer JEDE Ansicht der Karte — Wurf, Detail, Vollbild. */
--karte-format-b: 59;
--karte-format-h: 91;
/* --- Karte: Wurfansicht (Artboard 13) --- */
/* WI-0097: der Entwurf zeichnet die Aufdeckkarte 305 px breit, nicht 256.
Die 256x395 aus Designspec Kap. 6 waren die Testversion; `13-card-reveal`
ist das, wogegen jetzt gemessen wird. Wie bei Detail und Vollbild ist
JEDES Innenmass sein Mass aus dem Artboard, geteilt durch die
Bezugsbreite und auf die tatsaechliche Breite hochgerechnet — damit
schrumpft die Karte auf einem schmalen Geraet als Ganzes, statt ihre
Beschriftungen zu sprengen. */
--kw-bezug: 305;
--kw-breite: min(
calc(var(--kw-bezug) * 1px),
calc(100vw - var(--space-4) * 2),
calc((var(--sicher-hoehe) - var(--kw-umfeld)) * var(--karte-format-b) / var(--karte-format-h))
);
/* Was auf dem Aufdeckbildschirm ausser der Karte Hoehe braucht: die
Augenbraue „NEUE KARTE" mit ihrem Polster, das Polster der Buehne und der
untere Block aus Hauptknopf, Ghost, Verweiszeile und ihren Fugen. */
--kw-umfeld: calc(
var(--space-4) + var(--kd-zeile) + var(--space-3) * 2 + var(--btn-hoehe) + var(--btn-hoehe-ghost) +
var(--kd-zeile) + var(--space-3) * 3
);
--kw-hoehe: calc(var(--kw-breite) * var(--karte-format-h) / var(--karte-format-b));
--kw-radius: calc(var(--kw-breite) * 22 / var(--kw-bezug));
--kw-polster-y: calc(var(--kw-breite) * 13 / var(--kw-bezug));
--kw-polster-x: calc(var(--kw-breite) * 14 / var(--kw-bezug));
--kw-kreis: calc(var(--kw-breite) * 42 / var(--kw-bezug));
--kw-kopf: calc(var(--kw-breite) * 33 / var(--kw-bezug));
--kw-flagge-b: calc(var(--kw-breite) * 25 / var(--kw-bezug));
--kw-flagge-h: calc(var(--kw-breite) * 17 / var(--kw-bezug));
/* Der Modellname steht seit dem 29.08.2026 im KOPF, wo bis dahin das
Baujahr stand — und in dessen Groesse (23 px, Designspec Kap. 6). Der
zweite Grad ist der, in dem der Name bis dahin unter dem Foto stand: ein
langer Name (`Mercedes-Benz G-Klasse`) faellt darauf zurueck, statt
abgeschnitten zu werden. Beide Werte sind aus Kap. 6, keiner ist neu. */
/* Fotoband, 305 / 150 = 2,03. Es steht in `FOTOBAENDER`
(public/js/filterchain.js) — wer es aendert, aendert den Zuschnitt der
Filterkette mit; die Herleitung steht dort, die Begruendung an
--km-foto-h. */
--kw-foto-h: calc(var(--kw-breite) * 150 / var(--kw-bezug));
--kw-modell: calc(var(--kw-breite) * 22 / var(--kw-bezug));
--kw-modell-lang: calc(var(--kw-breite) * 16 / var(--kw-bezug));
--kw-land: calc(var(--kw-breite) * 21 / var(--kw-bezug));
--kw-label: calc(var(--kw-breite) * 104 / var(--kw-bezug));
--kw-wert: calc(var(--kw-breite) * 66 / var(--kw-bezug));
/* Die Beschriftung ist KLEINER als der Wert daneben (12,5 gegen 14) und
steht in gemischter Schreibung — siehe .wertzeile__label. */
--kw-label-schrift: calc(var(--kw-breite) * 12.5 / var(--kw-bezug));
--kw-schrift-h5: calc(var(--kw-breite) * 14 / var(--kw-bezug));
--kw-schrift-h6: calc(var(--kw-breite) * 12 / var(--kw-bezug));
/* DER GRUPPENKREIS HAT SEINEN EIGENEN GRAD (WI-0129).
§12 fuehrt „Card group circle" (display, 15–18px) und „Card series bar"
(body, 10,5–12px) als ZWEI Zeilen; die App hat beide auf
`--k-schrift-h6` gelegt und den Kreis damit in der Groesse des
Serienbands gemalt. Gemessen war das der Grund, aus dem der obersten
Sprosse der Groessenleiter auf 16 die Textmenge fehlte, um in die sechs
haeufigsten zu kommen. Die Zahl je Kartengroesse steht im Entwurf:
18px auf 13, 16px auf 14/15, 17px auf 16, 19px auf 15b. */
--kw-gruppe-schrift: calc(var(--kw-breite) * 18 / var(--kw-bezug));
--kw-schrift-winzig: calc(var(--kw-breite) * 11 / var(--kw-bezug));
--kw-schrift-mini: calc(var(--kw-breite) * 10 / var(--kw-bezug));
--kw-balken: calc(var(--kw-breite) * 8 / var(--kw-bezug));
/* --- Karte: Detailansicht (Kap. 6) --- */
/* Die Detailkarte hat seit WI-0038 keine feste Groesse mehr. Fest waren
290x447 — auf 393x793 blieben darunter rund 140px ungenutzt liegen. Jetzt
nimmt sie die Hoehe, die zwischen Buehnenkante und Tableiste frei ist, und
rechnet daraus wie die maximierte Karte (WI-0035) ihre ganze Massreihe:
JEDES Innenmass ist sein Mass aus Kap. 6, geteilt durch die Bezugsbreite
--kd-bezug und auf die neue Breite hochgerechnet. Die Karte waechst damit
als Ganzes, und Knoepfe, Datenblock und Hinweis ruecken einfach mit. */
--kd-bezug: 290;
/* Was auf der Kartenseite ausser der Karte Hoehe braucht — in derselben
Reihenfolge, in der es dort steht: Polster der Buehne oben, die Kopfzeile
mit dem Schliessen-Kreuz, die drei Abstaende der Stapelung, der
Hinweistext (zwei Zeilen) und der zweistoeckige Aktionsblock (Pille plus
Knopfreihe), dazu der Fussfreiraum ueber der Leiste.
DIE METAZEILE STEHT SEIT v3 NICHT MEHR DARIN (§17): sie ist von 14 und 15
in den Abschnitt `Eckdaten` der Detailansicht gewandert. An ihre Stelle
tritt in dieser Rechnung die Pille `Weitere Kartendetails`, die es zu v2
noch nicht gab — der Aktionsblock steht seit WI-0114 auf zwei Ebenen. */
--kd-zeile: calc(var(--schrift-klein) * var(--zeilenhoehe-fliess));
/* Die Kopfzeile des Notausgangs (WI-0055): die Trefferflaeche des Kreuzes
plus die Fuge zur Karte. Sie ist der Grund, warum die Kartenseite oben
mit einem knapperen Polster auskommt als die anderen Bildschirme — sonst
stuenden Polster und Kopfzeile uebereinander und die Karte verloere ohne
Not rund 26px Hoehe. So kostet der Notausgang die Karte nur die
Differenz. */
--kd-rand-oben: var(--space-2);
--kd-kopfzeile: calc(var(--btn-hoehe-ghost) + var(--space-2));
--kd-pille: calc(var(--details-hoehe) + var(--space-3));
--kd-hinweis: calc(var(--kd-zeile) * 2);
/* Der Fussfreiraum der KARTENSEITE: die schwebende Leiste plus eine Reserve
darueber. Die Reserve ist fuer schmale Geraete, auf denen der Hinweis in
eine dritte Zeile bricht — er rutscht dann in sie hinein statt unter die
Leiste. Der allgemeine --buehne-unten ist absichtlich grosszuegiger; hier
gehoert die Differenz der Karte, denn genau dieser ungenutzte Streifen
ueber der Leiste war die Meldung.
WI-0093 HAT DIE RESERVE UM EINE STUFE VERKLEINERT, von einer vollen
Textzeile (--kd-zeile, 18.6px) auf --space-3 (13.2px). Der Grund ist eine
Kollision zweier bindender Zusagen, und die aeltere gewinnt:
- HANDOFF §4.3 macht die Leiste hoeher, als sie war — 44px
Trefferflaeche statt 36px, 6px Polster statt 4.4px. Ihr Platzbedarf
waechst dadurch von 63px auf 74px.
- WI-0038 (Designspec Kap. 10.1, aus echtem Geraetegebrauch und
ausdruecklich NEUER als der Entwurf) sagt zu, dass die Detailkarte
GROESSER ist als die frueher feste 290x447 — dieselbe Groesse, die
der Entwurf in §5.1 fuer `14-card-detail` zeichnet.
Mit voller Reserve waere die Karte auf 393x793 auf 288x445 gefallen, also
unter beide Masse. Die Reserve traegt die Differenz, weil sie das einzige
Mass auf dieser Seite ist, das reine Luft ist und keinen Inhalt. Sie
bleibt eine Reserve — nur eine Stufe knapper. */
--karte-fuss: calc(var(--tableiste-unten) + var(--tableiste-hoehe) + var(--space-3));
--kd-umfeld: calc(
var(--kd-rand-oben) + var(--kd-kopfzeile) + var(--space-3) * 3 + var(--btn-hoehe-ghost) +
var(--kd-pille) + var(--kd-hinweis) + var(--karte-fuss)
);
/* Unter dieses Mass geht die Karte nicht: auf einem sehr niedrigen Fenster
blaettert die Seite lieber, als dass die Karte zur Briefmarke wird. */
--kd-mindest: 180px;
/* So gross, wie Hoehe UND Breite es zulassen — und kein Pixel groesser. */
/* WI-0097 — DIE OBERGRENZE AUS DEM ENTWURF.
`14-card-detail` zeichnet die Karte 290 px breit auf einem 393er Rahmen;
die App liess sie bis hierher auf rund 358 px wachsen und schob damit
Datenblock und Hinweis nach unten aus dem Bild. Das Item nennt die Karte
ausdruecklich „deutlich kompakter, darunter bleibt Platz".
WI-0038 (Designspec Kap. 10.1, aus echtem Geraetegebrauch und bindend)
bleibt dabei UNANGETASTET: seine Forderung war „keine feste Hoehe, wo das
Geraet Platz hat, und keine tote Flaeche unter der Karte". Beides gilt
weiter — die Karte rechnet ihre Masse nach wie vor aus der freien Hoehe,
und der Platz unter ihr ist nicht leer, sondern traegt seit diesem Item
den dreispaltigen Datenblock UND den Satz zur Eroberungshistorie. Was
dazukommt, ist nur eine Decke: sie waechst nicht mehr ueber das Mass
hinaus, das der Entwurf zeichnet. */
--kd-breite: max(
var(--kd-mindest),
min(
calc(var(--kd-bezug) * 1px),
calc(100vw - var(--space-4) * 2),
calc(var(--buehne-max) - var(--space-4) * 2),
calc((var(--sicher-hoehe) - var(--kd-umfeld)) * var(--karte-format-b) / var(--karte-format-h))
)
);
--kd-hoehe: calc(var(--kd-breite) * var(--karte-format-h) / var(--karte-format-b));
--kd-radius: calc(var(--kd-breite) * 20 / var(--kd-bezug));
--kd-polster-y: calc(var(--kd-breite) * 13 / var(--kd-bezug));
--kd-polster-x: calc(var(--kd-breite) * 14 / var(--kd-bezug));
--kd-kreis: calc(var(--kd-breite) * 37 / var(--kd-bezug));
--kd-kopf: calc(var(--kd-breite) * 29 / var(--kd-bezug));
--kd-flagge-b: calc(var(--kd-breite) * 22 / var(--kd-bezug));
--kd-flagge-h: calc(var(--kd-breite) * 15 / var(--kd-bezug));
/* Fotoband, 290 / 140 = 2,07. Es steht in `FOTOBAENDER`
(public/js/filterchain.js) — wer es aendert, aendert den Zuschnitt der
Filterkette mit; Begruendung an --km-foto-h. */
--kd-foto-h: calc(var(--kd-breite) * 140 / var(--kd-bezug));
--kd-modell: calc(var(--kd-breite) * 26 / var(--kd-bezug));
--kd-modell-lang: calc(var(--kd-breite) * 18 / var(--kd-bezug));
--kd-land: calc(var(--kd-breite) * 18 / var(--kd-bezug));
--kd-label: calc(var(--kd-breite) * 88 / var(--kd-bezug));
--kd-wert: calc(var(--kd-breite) * 58 / var(--kd-bezug));
--kd-label-schrift: calc(var(--kd-breite) * 11.5 / var(--kd-bezug));
--kd-schrift-h5: calc(var(--kd-breite) * 13 / var(--kd-bezug));
--kd-schrift-h6: calc(var(--kd-breite) * 11 / var(--kd-bezug));
/* Artboards 14 und 15 zeichnen den Gruppenkreis auf 16px (WI-0129, siehe
die Herleitung an --kw-gruppe-schrift). */
--kd-gruppe-schrift: calc(var(--kd-breite) * 16 / var(--kd-bezug));
--kd-schrift-winzig: calc(var(--kd-breite) * 11 / var(--kd-bezug));
--kd-schrift-mini: calc(var(--kd-breite) * 10 / var(--kd-bezug));
--kd-balken: calc(var(--kd-breite) * 7 / var(--kd-bezug));
/* --- Karte: maximierte Ansicht (Artboard 16, Handoff v2 §5.6) --- */
/* DIE VOLLBILDKARTE IST SEIT v2 EINE ANDERE KARTE ALS DETAIL UND WURF —
nicht in ihrem Aussehen, aber in ihrem Aufbau. §5.6 nennt es „compact
mode": das Fotoband waechst von 104 auf 132 px, und die sechs
Wertezeilen verlieren ihre Balkenspuren und stehen als zwei Spalten reiner
Zahlen. Beides zusammen ist es, was den Platz fuer den Abschnitt „Dein
Wurf" und die Besitzerkette DARUNTER erst schafft.
Deshalb gilt hier das Format 59:91 NICHT. Der Entwurf zeichnet 352 x 412 —
eine breitere, flachere Karte —, und die Hoehe rechnet aus diesem
Verhaeltnis, nicht aus dem Quartettformat. Wurf und Detail sind davon
unberuehrt, sie bleiben 59:91 (Kartenspec Kap. 2).
Wie ueberall gilt: JEDES Innenmass ist sein Mass aus dem Artboard,
geteilt durch die Bezugsbreite und hochgerechnet. */
--kv-bezug: 352;
--kv-format-h: 412;
/* Die Schliesszeile oben (v2 §17: `Schließen` unten ist ENTFALLEN, an seine
Stelle tritt das 34px-Kreuz oben rechts) und der Rand zum Bildschirm. */
--kv-rand: var(--space-3);
--kv-kopfzeile: calc(var(--btn-hoehe-ghost) + var(--space-3) * 2);
/* Die Karte nimmt hoechstens die Haelfte der Hoehe: darunter liegt die
Leseregion, und die ist kein Rest, sondern der halbe Zweck dieses
Bildschirms. Der Entwurf gibt ihr 416 von 793 px. */
--kv-frei: calc((var(--sicher-hoehe) - var(--kv-kopfzeile)) * 416 / 693);
--kv-breite: min(
calc(var(--kv-bezug) * 1px),
calc(100vw - var(--kv-rand) * 2),
calc(var(--kv-frei) * var(--kv-bezug) / var(--kv-format-h))
);
--kv-hoehe: calc(var(--kv-breite) * var(--kv-format-h) / var(--kv-bezug));
--kv-radius: calc(var(--kv-breite) * 24 / var(--kv-bezug));
--kv-polster-y: calc(var(--kv-breite) * 15 / var(--kv-bezug));
--kv-polster-x: calc(var(--kv-breite) * 16 / var(--kv-bezug));
--kv-kreis: calc(var(--kv-breite) * 40 / var(--kv-bezug));
--kv-kopf: calc(var(--kv-breite) * 31 / var(--kv-bezug));
--kv-flagge-b: calc(var(--kv-breite) * 24 / var(--kv-bezug));
--kv-flagge-h: calc(var(--kv-breite) * 16 / var(--kv-bezug));
/* DAS BREITESTE FOTOBAND VON ALLEN, 352 / 132 = 2,667 — und damit das,
das die GEGENPROBE des Zuschnitts setzt (WI-0125): hier ist das
gespeicherte Foto schmaler als das Band, `cover` passt es auf die Breite
ein und laesst von der Hoehe nur 1,522 / 2,667 = 57 % sehen. Deshalb darf
der Fahrzeugkasten hoechstens 57 % der Zuschnitthoehe einnehmen.
Wer diese Zahl aendert, aendert `SICHTBARER_HOEHENANTEIL` in
public/js/filterchain.js mit. */
--kv-foto-h: calc(var(--kv-breite) * 132 / var(--kv-bezug));
--kv-modell: calc(var(--kv-breite) * 21 / var(--kv-bezug));
--kv-modell-lang: calc(var(--kv-breite) * 16 / var(--kv-bezug));
--kv-land: calc(var(--kv-breite) * 20 / var(--kv-bezug));
/* Label- und Wertspalte gibt es im Kompaktmodus nicht mehr — die Zellen
teilen sich zu zweit die Breite. Die beiden Masse bleiben trotzdem
gesetzt, weil `.karte` sie fuer alle Varianten erwartet. */
--kv-label: auto;
--kv-wert: auto;
--kv-label-schrift: calc(var(--kv-breite) * 11.5 / var(--kv-bezug));
--kv-schrift-h5: calc(var(--kv-breite) * 17 / var(--kv-bezug));
--kv-schrift-h6: calc(var(--kv-breite) * 11.5 / var(--kv-bezug));
/* Artboard 16 zeichnet den Gruppenkreis auf 17px — dieselbe Sprosse wie die
Wertespalte daneben (WI-0129, siehe --kw-gruppe-schrift). */
--kv-gruppe-schrift: calc(var(--kv-breite) * 17 / var(--kv-bezug));
--kv-schrift-winzig: calc(var(--kv-breite) * 11 / var(--kv-bezug));
--kv-schrift-mini: calc(var(--kv-breite) * 10 / var(--kv-bezug));
--kv-balken: calc(var(--kv-breite) * 7 / var(--kv-bezug));
/* --- Karte: maximierte Ansicht (Artboard 15b, Handoff v3 §17) --- */
/* DAS ZIEL DES DOPPELTIPPS SEIT v3. Nur die Karte, ganzflaechig — kein
Wurf, keine Kette, kein Aktionsblock, keine Tableiste. Der Entwurf
zeichnet 353 px breit und rund 632 px hoch: eine eigene Form, wie schon
die Vollbildkarte, und wieder NICHT das Quartettformat 59:91 (Wurf und
Detail bleiben davon unberuehrt, Kartenspec Kap. 2).
WAS SIE VON DER VOLLBILDKARTE UNTERSCHEIDET, ist nicht die Groesse,
sondern die Werteliste: hier stehen die sechs Zeilen MIT Balken (§17),
dort ohne. Der Grund ist der Bildschirm darum — auf 16 sagt der Abschnitt
„Dein Wurf" darunter dasselbe genauer, auf 15b steht darunter nichts.
Wie ueberall: jedes Innenmass ist sein Mass aus dem Artboard, geteilt
durch die Bezugsbreite und hochgerechnet. */
--km-bezug: 353;
--km-format-h: 632;
--km-rand: var(--space-3);
/* Kopfzeile (Stand links, 34px-Kreuz rechts) und Punktreihe unten. Was
beide zusammen einnehmen, steht der Karte nicht zur Verfuegung. */
--km-kopfzeile: calc(var(--btn-hoehe-ghost) + var(--space-3) * 2);
--km-punktzeile: calc(var(--km-punkt-hoehe) + var(--space-4) * 2);
--km-breite: min(
calc(var(--km-bezug) * 1px),
calc(100vw - var(--km-rand) * 2),
calc(
(var(--sicher-hoehe) - var(--km-kopfzeile) - var(--km-punktzeile)) * var(--km-bezug) /
var(--km-format-h)
)
);
--km-hoehe: calc(var(--km-breite) * var(--km-format-h) / var(--km-bezug));
--km-radius: calc(var(--km-breite) * 26 / var(--km-bezug));
--km-polster-y: calc(var(--km-breite) * 18 / var(--km-bezug));
--km-polster-x: calc(var(--km-breite) * 18 / var(--km-bezug));
--km-kreis: calc(var(--km-breite) * 46 / var(--km-bezug));
--km-kopf: calc(var(--km-breite) * 36 / var(--km-bezug));
--km-flagge-b: calc(var(--km-breite) * 27 / var(--km-bezug));
--km-flagge-h: calc(var(--km-breite) * 18 / var(--km-bezug));
/* DIESES BAND IST DAS SCHMALSTE VON ALLEN — und damit das, auf dessen
Format die Filterkette jedes Foto zuschneidet (WI-0125).
353 / 232 = 1,522. Die Fotoflaeche zeigt das gespeicherte Bild mit
`object-fit: cover` (.karte__foto img); `cover` schneidet immer die Achse
weg, von der zu viel da ist. Waere das Foto breiter als 1,522, naehme
`cover` hier links und rechts weg — also genau die Laenge des Autos, und
auf dem GROESSTEN Bildschirm am meisten. Genau das war der Fehler, den
Rob am 31.08.2026 gemeldet hat.
WER DIESE ZAHL AENDERT, AENDERT DEN ZUSCHNITT MIT: `FOTOBAENDER` und
`ZUSCHNITT_FORMAT` in public/js/filterchain.js. Dort steht die ganze
Herleitung, hier steht die Kopplung — dieselbe Doppelnotiz, die camera.js
zwischen Sucher und Aufnahme fuehrt. Wird das Band schmaler, muss das
Zielformat mitgehen, sonst schneidet `cover` wieder das Auto an.
Bereits gespeicherte Fotos behalten ihren Zuschnitt: Karten sind
unveraenderlich (Kartenspec Kap. 4/9). */
--km-foto-h: calc(var(--km-breite) * 232 / var(--km-bezug));
--km-modell: calc(var(--km-breite) * 26 / var(--km-bezug));
--km-modell-lang: calc(var(--km-breite) * 19 / var(--km-bezug));
--km-land: calc(var(--km-breite) * 22 / var(--km-bezug));
/* Das Raster der Wertezeilen: `100px / 1fr / 92px` (§17). */
--km-label: calc(var(--km-breite) * 100 / var(--km-bezug));
--km-wert: calc(var(--km-breite) * 92 / var(--km-bezug));
--km-label-schrift: calc(var(--km-breite) * 13 / var(--km-bezug));
--km-schrift-h5: calc(var(--km-breite) * 18 / var(--km-bezug));
--km-schrift-h6: calc(var(--km-breite) * 12.5 / var(--km-bezug));
/* Artboard 15b zeichnet den Gruppenkreis auf 19px (WI-0129, siehe
--kw-gruppe-schrift). */
--km-gruppe-schrift: calc(var(--km-breite) * 19 / var(--km-bezug));
--km-schrift-winzig: calc(var(--km-breite) * 11.5 / var(--km-bezug));
--km-schrift-mini: calc(var(--km-breite) * 12 / var(--km-bezug));
--km-balken: calc(var(--km-breite) * 8 / var(--km-bezug));
/* Der Streifen der Nachbarkarte, der ueber den Rand hinausschaut (§17):
18 px breit, 2 px Rand in IHRER Seltenheitsfarbe, halb durchsichtig. */
--km-nachbar-b: 18px;
--km-nachbar-versatz: -14px;
--km-nachbar-rand: 2px;
--km-nachbar-deckkraft: 0.5;
/* Die Positionspunkte unten: fuenf, der aktive 16 x 5 in der Akzentfarbe. */
--km-punkt-hoehe: 5px;
--km-punkt-aktiv-b: 16px;
--km-punkt-fuge: 7px;
/* Der ruhende Punkt: der Entwurf setzt ihn auf `rgba(245,234,216,.24)` —
das ist die Linienleiter aus §11, Stufe 3. Kein eigener Ton. */
--km-punkt-ruhe: var(--cs-line-3);
/* --- Die Leseregion unter der Vollbildkarte (v2 §5.6) --- */
/* Sie ROLLT, und das ist eine Entscheidung des Entwurfs, kein Notventil:
das Sichtfenster ist 219 px hoch, der fuenfzeilige Fall 299 px. Die
Maskenkante von 12 px sagt an, dass unten noch etwas liegt. */
/* `--wurflage-rand: 32px` ist mit WI-0329 (Befund 16-2) ENTFALLEN. Der
seitliche Rand der Leseregion ist keine eigene Zahl mehr, sondern die
linke Kante der Karte darueber — er wird in `.kartevoll__lesen` aus
`--kv-breite` gerechnet. Zwei Zahlen fuer eine Kante waren der Versatz. */
--wurflage-fuge: 12px;
--wurflage-zeile: 30px;
--wurflage-label: 92px;
--wurflage-band: 104px;
--wurflage-spur: 6px;
--wurflage-marke-b: 4px;
--wurflage-marke-h: 14px;
/* Der Schein um den Marker (§5.6: `0 0 8px`). */
--wurflage-marke-schein: 0 0 8px;
--kette-label: 96px;
/* --- Der Abschnitt `Eckdaten` (v3 §17, Artboard 16) ---
Der erste Abschnitt der Leseregion. Er traegt die Kunde, die bis v2 als
Metazeile UNTER der Karte auf 14 und 15 stand — dort ist sie ersatzlos
entfallen und steht jetzt genau einmal hier.
Das Raster ist `auto auto minmax(0,1fr)` (§5.5b): die beiden festen
Zellen behalten ihre Breite, der Fundort nimmt den Rest und wird am ENDE
beschnitten. Zweizeilig darf er nie werden — die Zeile wuechse und
schoebe die Leseregion. */
--eckdaten-schrift: 12.5px;
/* Die Spaltenfuge: der Entwurf zeichnet 26 px, was auf der 4,4er-Leiter des
Handoffs genau zwei Stufen 3 sind. Sie traegt seit v3 auch der Datenblock
von Artboard 27 — er ist der letzte, der ihn noch benutzt. */
--datenblock-fuge: calc(var(--space-3) * 2);
/* DIE DREI ZEILEN VON ARTBOARD 27 ALS FLAECHE (WI-0188). Der Entwurf
zeichnet sie mit `padding:12px 16px`, `border-radius:16px` und 10 px
Abstand. 12, 16 und 10 stehen nicht auf der 4,4er-Abstandsleiter des
Handoffs — sie sind gezeichnete Masse EINES Bauteils, wie die Geometrie
der schwebenden Leiste weiter oben, und stehen deshalb hier benannt statt
als rohe Zahl in der Regel. Die Rundung ist die Stufe `md` aus §13. */
--datenblock-zeile-polster-oben: 12px;
--datenblock-zeile-polster-seite: 16px;
--datenblock-zeile-luecke: 10px;
--datenblock-zeile-radius: var(--radius-md);
/* Zweizeilige Auskuenfte stehen enger als Fliesstext (§5.6: line-height
1.25 in der rechten Spalte der Wurflage). */
--zeilenhoehe-eng: 1.25;
/* Der Schein hinter dem Marker der Wurflage — je Band derselbe Ton wie der
Marker selbst, auf .75 Deckkraft (§5.6). */
--glow-gut: color-mix(in srgb, var(--cs-good) 75%, transparent);
--glow-neutral: color-mix(in srgb, var(--cs-text-2) 75%, transparent);
--glow-warn: color-mix(in srgb, var(--cs-warn) 75%, transparent);
/* Die Flaeche unter dem Bild einer Kachel: das Artboard zeichnet
rgba(245,234,216,.04), die Reihe des Handoffs beginnt bei .05
(--cs-fill-1). Die naechste Stufe statt eines eigenen Wertes. Der Name
stammt vom entfernten Blatt `Foto wechseln` (WI-0422); die Kacheln des
gleichen Typs (13c) und der Garage nutzen ihn weiter. */
--fotowahl-daten-flaeche: var(--cs-fill-1);
/* --- Der gleiche Typ als eigene Karte (WI-0283, Artboard
13c-card-duplicate im Oktober-Entwurf, HANDOFF §25) ---
EIGENE TOKENS UND KEINE GELIEHENEN. Die Masse stimmen mit denen des alten
Wiederfunds darunter ueberein — derselbe Platz, dieselbe Zeichnung —, aber
der `doppelfund` wird abgerissen (eigenes Item), und mit ihm gehen seine
Tokens. Ein Bildschirm, dessen Masse an einem Block haengen, der
verschwindet, waere beim Abriss still kaputt.
Alle Werte stehen am Artboard und fuehrt der Handoff nicht als globales
Token; sie stehen deshalb hier mit ihrer Herkunft daneben. */
/* Die Karte oben: 118 x 166 px, 16 px Rundung, 2,5 px Ring in der
Seltenheitsfarbe. Der Ring ist ein Schatten und kein Rand — so waechst
die Flaeche nicht, und der Zaehler sitzt an ihrer Ecke wie gezeichnet. */
--duplikat-karte-breite: 118px;
--duplikat-karte-hoehe: 166px;
--duplikat-karte-radius: 16px;
--duplikat-karte-ring: 2.5px;
--duplikat-karte-unten: 20px;
/* Der Zaehler an der Ecke: 44 px hoch (die Mindestgroesse dieses Produkts),
12 px seitlich, 19 px in der Ueberschriftenschrift, 10 px ueber und 14 px
neben den oberen rechten Rand gezogen.
DIE FLAECHE IST DIE SALBEIFARBE DES HANDOFFS (§11 `--cs-good`). DIE TINTE
DARIN IST EINE LUECKE: das Artboard zeichnet #1e2416, §11 fuehrt den Ton
nicht. Genommen ist der dunkelste Grund des Handoffs statt einer eigens
ausgeschriebenen Farbe — gemeldet, nicht gefuellt. */
--duplikat-zaehler-hoehe: 44px;
--duplikat-zaehler-seite: 12px;
--duplikat-zaehler-schrift: 19px;
--duplikat-zaehler-oben: -10px;
--duplikat-zaehler-rechts: -14px;
--duplikat-zaehler-flaeche: var(--cs-good);
--duplikat-zaehler-text: var(--cs-bg-bottom);
/* Der Satz unter dem Titel steht auf 13 px im schwaecheren Textton — leiser
als die Nachricht darueber, weil er die Regel nennt. */
--duplikat-werte-unten: 18px;
/* Die beiden Kacheln: 10 px Fuge, Bildflaeche 96 px, Datenflaeche
`padding: 8px 10px 10px`, 12 px fuer die Rolle, 11 px fuer die Zeile
darunter. Die NEUE Kachel traegt den Akzentring (2,5 px) — sie ist die
Karte, die eben entstanden ist. */
--duplikat-fuge: 10px;
--duplikat-bild-hoehe: 96px;
--duplikat-ring: 2.5px;
--duplikat-daten-oben: 8px;
--duplikat-daten-seite: 10px;
--duplikat-rolle-schrift: 12px;
--duplikat-wann-schrift: var(--schrift-abschnitt);
/* DER TON DER NEUEN ROLLE IST DIESELBE LUECKE WIE AUF 13d: das Artboard
zeichnet #f0b98d, §11 fuehrt ihn nicht und hat --cs-accent-300 daneben.
Die naechstliegende Stufe des Handoffs statt eines eigenen Wertes. */
--duplikat-rolle-neu: var(--cs-accent-300);
/* --- Der Wiederfund (WI-0212, Artboards 13c-card-duplicate und
13d-card-duplicate-early, HANDOFF §8.1) ---
Wie beim Blatt darueber stehen diese Masse auf dem Artboard und fuehrt
der Handoff sie nicht als globales Token. Sie stehen deshalb HIER mit
ihrer Herkunft daneben und nicht roh im Bauteil. */
/* Die Karte oben: 118 x 166 px mit 16 px Rundung und einem 2,5 px breiten
Ring in der Seltenheitsfarbe. Der Ring ist ein Schatten und kein Rand —
so waechst die Flaeche nicht, und der Zaehler an ihrer Ecke sitzt an
derselben Stelle wie im Entwurf. */
--doppelfund-karte-breite: 118px;
--doppelfund-karte-hoehe: 166px;
--doppelfund-karte-ring: 2.5px;
--doppelfund-karte-unten: 20px;
/* Der Zaehler an der Ecke: 44 px hoch (die Mindestgroesse dieses Produkts),
Innenmass 12 px seitlich, 19 px in der Ueberschriftenschrift, 10 px ueber
und 14 px neben den oberen rechten Rand der Karte gezogen. */
--doppelfund-zaehler-hoehe: 44px;
--doppelfund-zaehler-seite: 12px;
--doppelfund-zaehler-schrift: 19px;
--doppelfund-zaehler-oben: -10px;
--doppelfund-zaehler-rechts: -14px;
/* DIE FLAECHE IST DIE SALBEIFARBE DES HANDOFFS (§11 `--cs-good`) — „a sage
4x counter popping at its corner" (§8.1). DIE TINTE DARIN IST EINE LUECKE:
das Artboard zeichnet #1e2416, §11 fuehrt diesen Ton nicht. Genommen ist
der dunkelste Grund des Handoffs (--cs-bg-bottom, #171410) statt einer
eigens ausgeschriebenen Farbe — gemeldet, nicht gefuellt. Dieselbe Regel
wie beim Datum auf 14b darueber. */
--doppelfund-zaehler-flaeche: var(--cs-good);
--doppelfund-zaehler-text: var(--cs-bg-bottom);
/* Die beiden Kacheln: 10 px Fuge, Bildflaeche 104 px auf 13c und 96 px auf
13d (der gesperrte Zustand zeichnet sie flacher, weil der Hinweis darunter
Platz braucht). Der Ring der gewaehlten Kachel ist 2,5 px, wie oben an der
Karte. */
--doppelfund-fuge: 10px;
--doppelfund-bild-hoehe: 104px;
--doppelfund-ring: 2.5px;
/* Datum und Rolle unter der Bildflaeche: `padding: 8px 10px 10px`, 12 px
fuer die Rolle, 11 px fuer die Zeile darunter — dieselben Sprossen wie auf
14b. */
--doppelfund-daten-oben: 8px;
--doppelfund-daten-seite: 10px;
--doppelfund-rolle-schrift: 12px;
--doppelfund-wann-schrift: var(--schrift-abschnitt);
/* DER TON DER GEWAEHLTEN ROLLE IST EINE LUECKE. Das Artboard zeichnet
#f0b98d; §11 fuehrt ihn nicht und hat --cs-accent-300 (#f6a06b) daneben.
Die naechstliegende Stufe des Handoffs statt eines eigenen Wertes. */
--doppelfund-rolle-gewaehlt: var(--cs-accent-300);
/* Der Haken auf der gewaehlten Kachel: 22 px Scheibe, 8 px vom oberen und
rechten Rand, 12 px/800 in der Akzentschrift. */
--doppelfund-haken-scheibe: 22px;
--doppelfund-haken-rand: 8px;
--doppelfund-haken-schrift: 12px;
/* Der gesperrte Hinweis von 13d: gestrichelter Rahmen mit 18 px Rundung und
`padding: 12px 14px`, 12 px unter den Kacheln. 18 px liegt zwischen den
Stufen `md` (16) und `lg` (28) des Handoffs — es ist ein gezeichnetes Mass
DIESES Bauteils und steht deshalb benannt hier. */
--doppelfund-hinweis-radius: 18px;
--doppelfund-hinweis-oben: 12px;
--doppelfund-hinweis-polster-oben: 12px;
--doppelfund-hinweis-polster-seite: 14px;
--doppelfund-hinweis-rand: 1px dashed var(--cs-line-3);
/* Das noch gesperrte neue Bild steht auf .45 Deckkraft (§8.1: „both tiles
are still shown — the new one at 45%"). */
--doppelfund-gesperrt-deckkraft: 0.45;
/* Die Scheibe hinter dem Schliessen-Kreuz (Artboards 14/15/16). Der
Entwurf zeichnet den Rand mit .18 Deckkraft; der Handoff fuehrt an dieser
Stufe kein Token (§11 hat .14 und .22 daneben). Genommen wird die
naechstliegende Stufe des Handoffs statt eines dritten, eigens
ausgeschriebenen Wertes — Designspec Kap. 9: stimmt eine Farbe nicht,
wird das TOKEN korrigiert, nie das Bauteil. */
--kreuz-scheibe: 34px;
--kreuz-flaeche: var(--cs-fill-2);
--kreuz-rand: 1px solid var(--cs-line-2);
--karte-rand: 1.5px;
--karte-kopf-radius: 7px;
/* Die Haarlinie unter jeder Zelle des Kompaktmodus (§5.6) — derselbe Ton
wie die leere Balkenspur, weil es dieselbe Trennung ist. */
--karte-hairline: 1px solid var(--cs-line-1);
/* Die Pille hinter dem Fotovermerk. Sie ist bewusst KEIN Raumton, sondern
Schwarz mit Deckkraft: sie liegt auf einem Foto, dessen Helligkeit
niemand kennt, und muss auf einem weissen Autodach genauso tragen wie auf
einem nachtblauen. */
--foto-vermerk-flaeche: rgba(0, 0, 0, 0.45);
/* Die Fundmarken auf dem Foto (WI-0283, HANDOFF §24.1: „24px circles bottom
left in the photo (`rgba(19,17,16,.72)`), border `line-4`, symbol `text`
13px, 4px gap"). Die Scheibe ist aus demselben Grund kein Raumton wie die
Pille darueber: sie liegt auf einem Foto, dessen Helligkeit niemand kennt.
§24.1 nennt genau diesen Wert — er ist der dunkelste Grund des Handoffs
mit Deckkraft, und er steht hier als Token statt im Bauteil.
KEINE SELTENHEITSFARBE: „Colour carries no meaning, so no rarity colour
is taken." */
--fundmarke-flaeche: rgba(19, 17, 16, 0.72);
--fundmarke-rand: 1px solid var(--cs-line-4);
--fundmarke-scheibe: 24px;
--fundmarke-symbol: 13px;
--fundmarke-strich: 2.75;
--fundmarke-abstand: 4px;
/* Dieselbe Marke im Abschnitt `Fundmarken` des Vollbilds: 28px-Scheibe,
14px-Symbol, 10px zum Satz (Artboard `16-card-fullscreen-marks`). Sie ist
groesser als die auf dem Foto, weil sie nicht auf einem Bild liegt,
sondern in einer Textzeile steht. */
--markenzeile-scheibe: 28px;
--markenzeile-symbol: 14px;
--markenzeile-fuge: 10px;
--balken-hoehe: 7px;
--balken-spur: color-mix(in srgb, var(--cs-text) 10%, transparent);
--karte-abwaerts: var(--warn-icon);
/* DER KARTENRUECKEN IST EIN VERLAUF, KEINE FLAECHE (WI-0112). HANDOFF §5.2
zeichnet ihn als `linear-gradient(165deg,#c67139,#9d5527)`, und §11 fuehrt
genau das als --cs-back. Die App hat stattdessen die flache Aktionsfarbe
genommen — der dunkle zweite Ton (#9d5527) kam auf keinem Bildschirm vor,
obwohl der Entwurf ihn auf jedem Duellbrett zeigt. */
--rueckseite-flaeche: var(--cs-back);
--rueckseite-rand: 5px;
--rueckseite-kreis: 118px;
/* --- Aufdecken (Kap. 7) --- */
--karte-start-skalierung: 0.92;
--perspektive: 1200px;
--flip-start: 180deg;
--flip-dauer: 0.6s;
--flip-kurve: cubic-bezier(0.35, 0.1, 0.25, 1);
--erscheinen-dauer: 0.25s;
--zeile-dauer: 0.28s;
--zeile-versatz: 5px;
--halo-dauer: 2.6s;
/* --- Blaettern (WI-0034/0035, seit WI-0051 in beiden Ansichten gleich) --- */
/* Zurueckfedern unter der Schwelle. */
--wisch-dauer: 0.18s;
/* Weg und Dauer der Aus- und Einflugbewegung. Der Weg reicht ueber die
Breite der Wischflaeche hinaus — die Karte ist wirklich aus dem Bild,
bevor die naechste kommt. */
--wisch-flug-weg: 120%;
--wisch-flug-dauer: 0.18s;
/* Wie weit der Kartenschein ueber die abschneidende Kante hinausdarf: der
Schein misst 26 px (Kap. 5), --space-6 ist das Mass darueber. Ohne diesen
Rand schnitte das waagerechte Abschneiden der Kartenseite ihn mit ab. */
--wisch-schnitt-rand: var(--space-6);
/* --- Der Rueckweg, Artboards 03 und 04 (WI-0172) ---
Drei Masse, die der Entwurf auf diesen beiden Artboards ausdruecklich
setzt und die es sonst nirgends gibt. Sie stehen HIER als benannte Werte
und nicht als Zahl in der Regel darunter — dieselbe Disziplin wie beim
Sucher: wo der Entwurf ein Mass nennt, traegt es seinen Namen. */
/* Die Fusszeile behaelt ihre Hoehe, auch wenn sie nichts sagt (der Entwurf
setzt `height:17px` auf beiden Artboards). Ohne sie huepfte die
Aktionsgruppe, sobald die Zeile etwas zu melden hat. */
--zeile-fussnote: 17px;
--ikone-absage: 18px;
/* --- Der Elternpfad, Artboards 05 und 06 (WI-0174) ---
Die Masse, die der Entwurf auf genau diesen beiden Artboards setzt und
die es sonst nirgends gibt. Sie stehen HIER als benannte Werte und nicht
als Zahl in der Regel darunter — dieselbe Disziplin wie beim Rueckweg
darueber: wo der Entwurf ein Mass nennt, traegt es seinen Namen. */
/* Das Adressfeld auf 05 ist hoeher als ein gewoehnliches Feld (52 px statt
48) — dasselbe Mass wie das Bestaetigungsfeld auf 04, und aus demselben
Grund: es ist das einzige Feld auf seinem Bildschirm. */
--feld-hoehe-eltern: 52px;
/* Die beiden Standzeilen auf 06 (`border-radius:18px; padding:14px 16px`)
und der Abstand zwischen ihnen. */
--elternzeile-radius: 18px;
--elternzeile-polster: 14px 16px;
--elternzeile-ikone: 20px;
/* --- Bildschirme (Kap. 8) --- */
--start-kreis: 56px;
--start-kreis-form: 46% 54% 55% 45% / 52% 44% 56% 48%;
/* Das App-Icon auf Artboard 01 (WI-0223, nachgemessen mit WI-0281).
WI-0223 hat 160/36 aus dem September-Brett gelesen und richtig gebaut;
das Oktober-Brett zeichnet am `` von `01-onboarding-start`
`width:132px;height:132px;border-radius:30px` — dieselben Masse, die
`00-email-entry` daneben traegt. Beide Tokens bleiben trotzdem getrennt:
ein gemeinsames hiesse, dass die naechste Bewegung auf einem der beiden
Artboards das andere ungemessen mitnimmt. Die Scheibe `--start-kreis`
bleibt unberuehrt — sie traegt weiter den Fingerabdruck auf 03. */
--start-marke: 132px;
--start-marke-radius: 30px;
--start-titel: 34px;
/* --- Die E-Mail-Anmeldung (WI-0279, Oktober-Entwurf, Artboards 00–00l,
06b–06f) --- */
/* DAS ICON AUF `00` IST KLEINER ALS DAS AUF `01`. Beide Masse stehen in
ihrem eigenen Artboard: `01-onboarding-start` zeichnet 160/36 (siehe
`--start-marke` darueber, WI-0223), `00-email-entry` zeichnet
`width:132px;height:132px;border-radius:30px`. Ein gemeinsames Token
hiesse, eines der beiden Artboards ungemessen zu veraendern. */
--einstieg-marke: 132px;
--einstieg-marke-radius: 30px;
/* Der Platz der Meldung unter dem Feld. Er steht AUCH LEER, sonst wandert
der ganze Block beim ersten Fehler nach oben — `00d` verlangt
ausdruecklich, dass der Knopf bleibt, wo er war. Der Entwurf gibt dem
Absatz `min-height:38px`. */
--einstieg-meldung-hoehe: 38px;
/* DER RAND DES ADRESSFELDES AUF `00`, `00f` UND `00k`.
Der Entwurf malt ihn `rgba(232,154,94,.7)` — und das ist Zeichen fuer
Zeichen `--cs-warn` bei 70 %, nicht die Aktionsfarbe. Das ist Absicht und
kein Fehler im Brett: das Feld ist die eine Stelle, an der etwas
eingegeben wird, und der warme Rand sagt genau das. Gemischt statt
danebengeschrieben, damit die Quelle der Farbe die eine bleibt (§7 Punkt
12: kein Bauteil denkt sich einen eigenen Ton aus).
DER FEHLERZUSTAND `00d` UNTERSCHEIDET SICH TROTZDEM EINDEUTIG: dort steht
derselbe Ton in VOLLER Staerke und mit `--cs-warn-tint` als Flaeche
(siehe `.feld--warn`). */
--einstieg-feld-rand: color-mix(in srgb, var(--cs-warn) 70%, transparent);
/* Die vier Ziffernkaestchen von `00b` (Entwurf: `height:58px`,
`border-radius:16px`, `gap:12px`, Schriftgrad 26 px in der
Ueberschriftenfamilie). */
--ziffer-hoehe: 58px;
--ziffer-radius: var(--radius-md);
--ziffer-luecke: 12px;
--ziffer-schrift: 26px;
/* Das Kaestchen, das als naechstes dran ist: Akzentfuellung und ein
staerkerer Rand in der Aktionsfarbe. Es ist eine ANZEIGE und keine
Aktion — deshalb nur Rand und Tinte, kein gefuellter Terracottablock
(Designspec Kap. 11: Terracotta bleibt die Aktionsfarbe). */
--ziffer-dran-rand: 2px;
/* Der Hinweiskasten von `00b`, `00h`, `00i`, `00j` und `00l` (Entwurf:
`border-radius:20px`, `padding:16px 18px`, Zeichen 20 px). */
--anmeldekasten-radius: 20px;
--anmeldekasten-polster-y: 16px;
--anmeldekasten-polster-x: 18px;
--anmeldekasten-zeichen: 20px;
/* Die Zurueck-Zeile am Kopf (Entwurf: `min-height:44px`, Winkel 18 px,
Schriftgrad 14 px, Gewicht 700). */
--kopfweg-hoehe: 44px;
--kopfweg-zeichen: 18px;
/* Die Fusszeile unter dem Nebenweg. Sie behaelt ihre Hoehe, auch wenn kein
Satz darin steht (Entwurf: `height:17px` auf jedem dieser Artboards). */
--anmeldefuss-note: 17px;
/* DER FUSSFREIRAUM DIESER BILDSCHIRME IST KLEINER ALS DER ALLGEMEINE.
`--buehne-unten` haelt 90 px frei, weil dort die schwebende Tableiste
steht (HANDOFF §13). Auf keinem der siebzehn Anmeldebildschirme steht
sie — der Entwurf setzt den Aktionsblock auf `padding-bottom:30px`, und
die 90 px waeren hier reine Luft unter dem Hauptknopf, also genau das,
was Designspec Kap. 10.3 Punkt 3 verbietet. */
--anmelde-fuss: 30px;
/* Der Laufring von `06c` (Entwurf: 96 px, Strich 3 px) und die Dauer einer
Umdrehung. */
--anlage-ring: 96px;
--anlage-ring-strich: 3px;
--anlage-ring-dauer: 1.1s;
/* Der kleine Kreisel in der Meldung von `00g` und im Knopf von `00e`
(Entwurf: 16 bzw. 18 px, Strich 2,5 px). */
--kreisel-mass: 16px;
--kreisel-strich: 2.5px;
/* Die Warnscheibe von `06d` (Entwurf: 64 px, Rand 2 px, Glyphe 28 px). */
--warnscheibe-mass: 64px;
--warnscheibe-rand: 2px;
--warnscheibe-zeichen: 28px;
/* Der Angabenkasten von `06d` (Entwurf: `border-radius:20px`,
`padding:16px 18px`, Zeilen 13,5 px). */
--anlage-angaben-radius: 20px;
--anlage-angaben-schrift: var(--schrift-hinweis);
/* Eine Schrittzeile von `06e` (Entwurf: `min-height:44px`, Zeichen 20 px). */
--anlage-schritt-hoehe: 44px;
--anlage-schritt-zeichen: 20px;
--sucher-winkel: 30px;
--sucher-winkel-strich: 3px;
/* Innenabstand der vier Eckwinkel und die Rundung ihrer Aussenecke —
Artboard 07 setzt beide (16 px, 8 px). Vorher hingen sie am allgemeinen
Polster des Rahmens, das es hier gar nicht mehr gibt. */
--sucher-winkel-abstand: 16px;
--sucher-winkel-rundung: 8px;
--sucher-farbe: var(--color-accent-200);
/* DER SUCHER HAT WIEDER EIN FESTES MASS — UND ZWAR AUS DEM ENTWURF (WI-0110).
HANDOFF §6 Zeile 07: `height: 236px; margin-top: 56px; border-radius: 24px`.
Die Auflage aus WI-0049 („nimm die freie Hoehe") ist am 30.08. ZURUECKGEZOGEN
(Designspec Kap. 10.1, Produktspec 4.2), und der Grund ist nicht Platz,
sondern Zweck:
Bildflaeche der Karte ~277 x 150 px (~1,85 : 1, quer)
Sucher im Entwurf 355 x 236 px (~1,50 : 1, quer)
Sucher bis WI-0110 358 x 639 px (~0,56 : 1, hoch)
Ein Auto ist ein BREITES Objekt. Durch ein hochkantes Fenster bekommt man
es nur ganz ins Bild, wenn man weit zurueckgeht — dann ist es klein — oder
man schneidet es an. Danach schneidet die Karte auf ihre quere Bildflaeche
zu, und der groesste Teil des gerahmten Bildes faellt weg. Der gedrungene
Kasten hat die Form des Gegenstands UND die Form des Platzes, in dem er
landet.
WI-0315: HIER STAND 340/28 — DAS WAR DER STAND VOR DEM 02.09.2026.
WI-0110 hat gegen das damalige Brett gebaut und richtig gebaut. Die Runde
vom 02.09. hat den Rahmen danach auf 236 px gesenkt und den Abstand auf
56 px gehoben (HANDOFF §17, Zeile `07-scan-viewfinder` GEOMETRY; §6
Zeile 07 fuehrt seitdem beide Zahlen). Diese Senkung ist in der App nie
angekommen: gemessen 340 px gegen 236 px des Bretts, Verhaeltnis 1,03
statt 1,50. Der Grund aus der Praxis steht im Brett daneben — ein 340er
Fenster fasst ZWEI Autos, und dann landet das falsche im Bild.
WARUM DAS MESSGERAET DAS NIE GEMELDET HAT: die elf Merkmale des
Merkmalsvergleichs (WI-0092, tests/e2e/hilfe/merkmale.js) kennen Farben,
Schrift, Seitenraender, Inhaltsanfang und Fussfreiraum — die HOEHE EINES
ELEMENTS kommt darin nicht vor. Der Bildschirm hat 10 von 11 Merkmalen
erfuellt, waehrend der Rahmen 104 px zu hoch stand. Deshalb traegt
tests/design.test.js die Geometrie jetzt als eigene Zusicherung.
Die Kopplung von Sucher und Aufnahme bleibt davon unberuehrt: die Aufnahme
misst den Kasten zur Laufzeit (coverAusschnitt() in camera.js). Wer die
Hoehe hier aendert, aendert damit auch den Ausschnitt der Karte — das ist
Absicht und der ganze Sinn des Masses. Nachgerechnet in
tests/camera.test.js („WI-0315"). */
--sucher-hoehe: 236px;
/* WI-0341: 56 -> 40px. Der Export `design-update-12-102026zoom` zeichnet
`07` neu und zieht den Rahmen 16 px hoch, um darunter Platz fuer den
Zoom-Regler zu machen — Brett `07`, Rahmenkasten `margin-top:40px`, und
derselbe Satz im Patch (§24.9 Punkt 4: „Frame on `07` moves up 16 px
(margin-top 56 -> 40)"). Die 16 px und der Regler sind EIN Vorgang; wer
eines ohne das andere bewegt, bekommt eine Luecke, die nichts fuellt. */
/* WI-0426: 40 -> 12px. Ueber dem Rahmen steht jetzt die Zaehlerzeile
(Artboards 07/07b/07n: `margin-top:16px; min-height:28px`), und der Rahmen
sitzt 12 px unter ihr. Die 16 px Rahmenhub aus WI-0341 bleiben im Brett
erhalten: 16 + 28 + 12 = 56, das alte Mass vor dem Zoom-Regler. */
--sucher-abstand-oben: 12px;
/* 07b ZEICHNET DENSELBEN RAHMEN NAEHER AN DEN STREIFEN (Artboard 07b:
`margin-top:20px`). Oben steht auf `07` die Hinweispille allein, auf `07b`
zusaetzlich der Reihenstreifen — der Rahmen rutscht dafuer hoch. Ein
gemeinsames Mass hiesse, einen der beiden Bildschirme ungemessen zu
verschieben. */
/* WI-0426: 20 -> 12px. Mit der Zaehlerzeile zeichnet auch `07b` den Rahmen
12 px unter ihr; beide Masse sind seither gleich, bleiben aber zwei
Namen, weil sie zwei Bretter messen. */
--sucher-abstand-oben-reihe: 12px;
--sucher-rundung: 24px;
/* DIE FLAECHE DES RAHMENS IST EINE EIGENE UND NICHT DIE FOTOFLAECHE DER
KARTE (WI-0315).
Artboards `07` und `07b` malen den Rahmen
`linear-gradient(160deg,#23262c 0%,#1a1c21 60%,#15171b 100%)` — und zwar
NUR diese beiden; im ganzen Brett kommen die drei Stufen an keiner
anderen Stelle vor. Die Fotoflaeche der Karte ist etwas anderes:
`--cs-surface-photo` ist `linear-gradient(155deg,#2f3339,#1e2126)`
(HANDOFF §12, Zeile 1149) und traegt die Kartenbilder.
Bis WI-0315 hing der Sucher an der Kartenflaeche. Gemessen hat der
Merkmalsvergleich das als EINE fehlende Flaechenfarbe (`#15171b` kam in
der App nicht vor) — das war die einzige Abweichung, die das Messgeraet
auf diesem Bildschirm je gemeldet hat. */
--sucher-flaeche: linear-gradient(160deg, #23262c 0%, #1a1c21 60%, #15171b 100%);
/* Der Abstand der Hinweispille zum Rahmen darunter (Artboard 07: 14 px).
Zusammen mit --sucher-abstand-oben sind das die 70 px des Entwurfs (bis
WI-0315 waren es 28 und damit 42). */
--pille-abstand-unten: 14px;
/* DER RAND DER HINWEISPILLE (WI-0315, Artboard 07:
`border:1px solid rgba(255,225,208,.3)`).
Gemischt statt danebengeschrieben, damit die Quelle der Farbe die eine
bleibt (HANDOFF §7 Punkt 12: kein Bauteil denkt sich einen eigenen Ton
aus) — dieselbe Disziplin wie bei --einstieg-feld-rand. Der Ton ist
--color-accent-200, derselbe wie an den vier Eckwinkeln und an der
Schrift der Pille. */
--pille-strich: 1px;
--pille-rand: color-mix(in srgb, var(--color-accent-200) 30%, transparent);
/* Die Einpasshilfe: eine Silhouette aus Kap. 6, mittig im Sucher, nur
Kontur, neutral (#cfc3ab) und stark gedaempft — sie zeigt, wo das Auto
sitzen soll, und darf sich nie vor einen Hinweistext draengen.
WI-0054: vorher 62 % der Sucherbreite. Eine Hilfslinie ist eine ANWEISUNG
— wer sein Auto hineinbekommen will, tritt so weit zurueck, bis es dort
hineinpasst. Bei 62 % verlangte sie rund die Haelfte mehr Abstand, als
der Sucher ueberhaupt zeigen musste; zusammen mit dem beschnittenen
Querformat-Strom war das der Grund fuer „zehn Meter zurueck". Sie fuellt
jetzt fast die volle Breite: ein Auto aus Gehsteig-Abstand steht damit
genau so im Rahmen, wie die Hilfe es zeigt. Weniger als 100 %, damit sie
Hilfe bleibt und nicht Rand wird.
WI-0110: Die Breite bleibt. Sie ist die EINPASSHILFE fuer den Kartenschnitt
— wer sein Auto hineinlegt, bekommt ein Bild, das auf die Karte passt —,
und eine schmalere Hilfe verlangte wieder mehr Abstand, als der Sucher
zeigen muss. Nachgerechnet wird das in tests/camera.test.js („WI-0110").
Die Deckkraft geht auf die .24 des Entwurfs. */
--einpass-breite: 86%;
--einpass-deckkraft: 0.24;
/* 76px wie im Entwurf (Artboard 07, HANDOFF §6 Zeile 07). Bis WI-0110 stand
hier 60px, weil der Knopf unten RECHTS im Rahmen sass und dort mit dem
Daumen erreichbar sein musste (WI-0037). Der Entwurf verankert ihn unten
und mittig; faellt die Erreichbarkeit erneut auf, ist das ein Befund und
ein eigenes Item — keine stille Rueckkehr zur alten Loesung. */
--ausloeser: 76px;
--ausloeser-rand: 4px;
/* --- DER SCAN-ZAEHLER UND SEINE AUSLOESER (WI-0426) ---
Jede Zahl steht in den Brettern 07n/07c/07d/07g/07o/07w (hochkant) und
07l/07ld (quer). */
--zaehler-fuge: 10px;
--zaehler-abstand-oben: 16px;
--zaehler-hoehe: 28px;
--zaehler-hoehe-quer: 40px;
--zaehler-rechts-quer: 20px;
--zaehler-schrift: 12.5px;
--zaehler-leiste-b: 96px;
--zaehler-leiste-b-quer: 64px;
--zaehler-leiste-h: 4px;
--zaehler-spur: color-mix(in srgb, var(--cs-text) 12%, transparent);
--zaehler-platzhalter-b: 30px;
--zaehler-platzhalter-h: 8px;
--zaehler-platzhalter: color-mix(in srgb, var(--cs-text) 16%, transparent);
--zaehler-rollen: 320ms;
--ausloeser-plus: 30px;
--ausloeser-ruht-flaeche: color-mix(in srgb, var(--cs-text) 12%, transparent);
--ausloeser-ruht-rand: color-mix(in srgb, var(--cs-text) 25%, transparent);
--ausloeser-kreisel: 18px;
--ausloeser-kreisel-dauer: 0.7s;
--ausloeser-satz-fuge: 10px;
--ausloeser-satz-breite: 250px;
--ausloeser-satz-zeile: 1.45;
/* #e6dcc8 im Brett (07w, 43s) — zwischen `--cs-text` und `--cs-text-2`,
ohne eigenes Token in §11. */
--text-hell: color-mix(in srgb, var(--cs-text) 85%, var(--cs-text-2));
/* --- 43s / 43t, die Kontoseite Scans (WI-0426) --- */
--konto-scans-titel: 30px;
--konto-scans-titel-unten: 14px;
--konto-scans-zahl: 64px;
--konto-scans-wort: 16px;
--konto-scans-fuge: 12px;
--konto-scans-kasten-polster: 22px 22px 20px;
--konto-scans-kasten-unten: 16px;
--konto-scans-kasten-flaeche: color-mix(in srgb, var(--color-accent) 10%, transparent);
--konto-scans-kasten-rand: color-mix(in srgb, var(--color-accent) 40%, transparent);
--konto-scans-strich: 1.5px;
--konto-scans-regel: 14.5px;
--konto-scans-regel-zeile: 1.55;
--konto-scans-regel-unten: 22px;
--konto-scans-abschnitt-unten: 10px;
--konto-scans-abschnitt-laufweite: 0.08em;
--konto-scans-anderswo-polster: 18px;
--konto-scans-anderswo-rundung: 24px;
/* --- DAS KAUFBLATT 50–50g UND DER KASTEN AUF 43s (WI-0427) ---
Werte aus dem Brett „2c · Freie Scans und Pakete". Einen Farbvertrag fuer
diese Bretter gibt es nicht (L-10) — die Farben sind deshalb aus den
§11-Tokens gemischt, deren Wert das Brett traegt. */
--kaufblatt-rand-aussen: 20px;
--kaufblatt-unten: 26px;
--kaufblatt-rundung: 32px;
--kaufblatt-polster: 26px;
--kaufblatt-titel: 25px;
--kaufblatt-text: 14.5px;
--kaufblatt-zeile: 1.55;
--kaufblatt-fuge: 14px;
--kaufblatt-fakt-fuge: 10px;
--kaufblatt-haken: 20px;
--kaufblatt-zeichen: 56px;
--kaufblatt-zeichen-ikone: 26px;
--kaufblatt-plus: 44px;
--kaufblatt-kasten-rundung: 18px;
--kaufblatt-kasten-polster: 14px 16px;
--kaufblatt-kasten-schrift: 14px;
--kaufblatt-laeuft-flaeche: color-mix(in srgb, var(--color-accent) 35%, transparent);
--kaufblatt-gut-flaeche: color-mix(in srgb, var(--cs-good) 16%, transparent);
--kaufblatt-gut-rand: color-mix(in srgb, var(--cs-good) 55%, transparent);
--kaufblatt-akzent-flaeche: color-mix(in srgb, var(--color-accent) 12%, transparent);
--kaufblatt-akzent-rand: color-mix(in srgb, var(--color-accent) 45%, transparent);
--kaufblatt-ruhig-flaeche: color-mix(in srgb, var(--cs-text) 8%, transparent);
--kaufblatt-ruhig-rand: color-mix(in srgb, var(--cs-text) 30%, transparent);
--kaufblatt-fehler-flaeche: color-mix(in srgb, var(--cs-warn) 12%, transparent);
--kaufblatt-fehler-rand: color-mix(in srgb, var(--cs-warn) 40%, transparent);
--kaufblatt-aus-flaeche: color-mix(in srgb, var(--cs-text) 6%, transparent);
--kaufblatt-aus-rand: color-mix(in srgb, var(--cs-text) 18%, transparent);
--kaufblatt-quer-breite: 420px;
--konto-scans-paket-flaeche: color-mix(in srgb, var(--cs-text) 5%, transparent);
--konto-scans-paket-titel: 15px;
--konto-scans-paket-text: 13px;
--konto-scans-paket-zeile: 1.5;
--konto-scans-paket-fuge: 4px;
--konto-scans-paket-vor-knopf: 16px;
/* --- DER ZOOM-REGLER AUF `07` UND `07l` (WI-0341) ---
Von WI-0216 gebaut, von WI-0328 ausgebaut, am 12.10.2026 von Rob
zurueckgeholt: der Export vom 12.10.2026 zeichnet den Regler, und damit
ist der Grund weg, mit dem WI-0328 entschieden hatte („das Brett zeichnet
ihn nicht").
JEDE ZAHL HIER STEHT IM BRETT, und das ist der Unterschied zu WI-0216:
damals waren die Masse ausdruecklich provisorisch, weil es kein Artboard
gab. Jetzt gibt es zwei — `07-scan-viewfinder` und
`07l-scan-viewfinder-landscape` —, und sie zeichnen den Regler in beiden
Lagen mit denselben Bauteilen und denselben Farben. Gegengelesen gegen
`design/handoffs/ux-2026-10-12/HANDOFF-PATCH.md` Zeile 136 (§24.9
Punkt 4); wo Patch und Brett auseinanderliegen, gilt das Brett (die
Beschriftung quer: Brett 12 px, Patch nennt nur die 12,5 px des
Hochformats).
Die 44 ist dabei KEIN Entwurfszufall, sondern dieselbe Ein-Daumen-Regel
wie an Filterzeile, Kontoscheibe und Tableiste (Produktspec 4.0,
Designspec Kap. 10.3 Punkt 1) — das Brett zeichnet sie als Griffreihe
hochkant und als 44-px-Spalte quer. */
/* Die Trefferflaeche des Griffs — in BEIDE Richtungen (Brett `07`:
`height:44px`, Brett `07l`: `width:44px`). */
--scan-zoom-flaeche: 44px;
/* Die Spur (Brett: `height:6px` bzw. `width:6px`). */
--scan-zoom-spur: 6px;
/* Der Griff und sein heller Ring (Brett: 28 px, `border:3px solid`). */
--scan-zoom-griff: 28px;
--scan-zoom-ring: 3px;
/* Der Streifen hochkant: `padding:8px 2px 0`, Fuge zur Beschriftung 2 px. */
--scan-zoom-polster: 8px 2px 0;
--scan-zoom-luecke: 2px;
/* Die Beschriftung: 12,5 px hochkant, 12 px quer — zwei Zahlen, weil das
Brett zwei zeichnet. */
--scan-zoom-schrift: 12.5px;
/* Der Schatten unter dem Griff (Brett: `0 2px 8px rgba(0,0,0,.4)`). Er
steht HIER und nicht im Bauteil, wie jedes andere Mass dieser Seite;
§11 fuehrt ihn nicht, also wird er auch nicht als `--cs-*` erfunden. */
--scan-zoom-schatten: 0 2px 8px rgba(0, 0, 0, 0.4);
/* Die drei Farben kommen aus dem Vertrag und nicht aus dem Bauteil:
Spur `--cs-line-2` ist wertgleich dem gezeichneten
`rgba(245,234,216,.14)`, der gefuellte Teil und der Ring werden aus
`--color-accent` bzw. `--cs-on-accent` gemischt statt danebengeschrieben
(dieselbe Disziplin wie bei --pille-rand und --details-rand). */
--scan-zoom-gefuellt: color-mix(in srgb, var(--color-accent) 55%, transparent);
--scan-zoom-griff-ring: color-mix(in srgb, var(--cs-on-accent) 90%, transparent);
--kz-rahmen-strich: 2px;
--kz-bild-radius: var(--radius-md);
--icon-winzig: 12px;
--icon-klein: 16px;
/* Der Papierkorb auf der Karte (WI-0070, Artboard 14): 17 px Glyph in einem
36-px-Kreis, unten rechts. Der Kreis traegt eine eigene, dunkle Flaeche —
er liegt auf dem Kartenfoto und muesste sich sonst gegen jedes Bild
durchsetzen. */
--icon-loeschen: 17px;
--loeschknopf-groesse: 36px;
--loeschknopf-flaeche: rgba(24, 26, 31, 0.85);
--icon-mittel: 22px;
--icon-gross: 24px;
/* Die Meldung unter dem Freundescode-Feld (WI-0071, Artboard 23): 18 px
Symbol, 2,75 Strichstaerke, 2 px tiefer als die erste Textzeile. Die drei
Werte stehen so im Entwurf. */
--icon-meldung: 18px;
--strich-meldung: 2.75;
--meldung-zeichen-versatz: 2px;
--schritt-zeichen: 22px;
/* --- Die Erkennungs-Buehne, Artboards 08/09/10 (WI-0068) ---
Der Entwurf zeichnet dreimal denselben Aufbau: eine 250-px-Buehne, darin
eine 206-px-Scheibe, darin entweder das gezeichnete Auto (164 px), die
QR-Glyphe (96 px) oder — bei den beiden Fehlern — zusaetzlich das
48-px-Warnabzeichen unten rechts. Die Zahlen stehen so in HANDOFF §6
Zeilen 08 bis 10; der Handoff fuehrt sie nicht als Token, deshalb stehen
sie hier und nicht in tokens.css. */
--lauf-buehne: 250px;
--lauf-scheibe: 206px;
--lauf-spur: 164px;
--lauf-glyphe: 96px;
--lauf-warnzeichen: 48px;
--lauf-strich: 2px;
/* Ring, Scheibe und Lichtstrich in Terracotta-Abstufungen; die angehaltene
Seite in der Warnfarbe. Alle vier sind Mischungen aus §11-Toenen — der
Handoff fuehrt die Deckkraft-Stufen nicht einzeln. */
--lauf-ring-farbe: color-mix(in srgb, var(--color-accent) 55%, transparent);
--lauf-scheibe-flaeche: color-mix(in srgb, var(--color-accent) 10%, transparent);
--lauf-scheibe-rand: color-mix(in srgb, var(--color-accent) 30%, transparent);
--lauf-halt-flaeche: color-mix(in srgb, var(--warn-icon) 7%, transparent);
--lauf-halt-rand: color-mix(in srgb, var(--warn-icon) 45%, transparent);
--lauf-strich-verlauf: linear-gradient(
90deg,
transparent,
var(--color-accent-300),
transparent
);
--lauf-strich-schein: 0 0 14px var(--color-accent-300);
--lauf-ring-dauer: 2.4s;
--lauf-trace-dauer: 2.2s;
--lauf-sweep-dauer: 1.9s;
--lauf-punkte-dauer: 1.4s;
--lauf-spur-strich: 480;
--lauf-still-farbe: var(--cs-text-off);
/* --- Der vierte Schritt, Artboard 08b (WI-0121) ---
Der Entwurf zeichnet die Buehne hier KLEINER und in Sage statt Terracotta:
196 px Buehne, 160 px Scheibe, 112 px Umriss, 62 px Lupe. Die Zahlen
stehen so in HANDOFF §6 Zeile 08b und im Artboard; der Handoff fuehrt sie
nicht als Token, deshalb stehen sie hier wie ihre Geschwister darueber.
DIE FARBEN KOMMEN AUS §11, NICHT AUS DEM HTML DES ENTWURFS: die Ringe aus
--color-accent-2 (#7a8a5e, die Zweitfarbe — der Entwurf schreibt
rgba(122,138,94,…), also genau diesen Ton), Scheibenrand und Abzeichen aus
--cs-good, Umriss und Lupe aus --cs-good-soft. §7 Punkt 12 verbietet einem
Bauteil, sich einen eigenen Ton auszudenken. */
--lauf-neu-buehne: 196px;
--lauf-neu-scheibe: 160px;
--lauf-neu-spur: 112px;
--lauf-lupe: 62px;
--lauf-neu-ring-1: color-mix(in srgb, var(--color-accent-2) 50%, transparent);
--lauf-neu-ring-2: color-mix(in srgb, var(--color-accent-2) 35%, transparent);
--lauf-neu-flaeche: color-mix(in srgb, var(--color-accent-2) 13%, transparent);
--lauf-neu-rand: color-mix(in srgb, var(--cs-good) 32%, transparent);
--lauf-neu-spur-farbe: color-mix(in srgb, var(--cs-good-soft) 70%, transparent);
--lauf-neu-ring-dauer: 2.6s;
--lauf-look-dauer: 3.2s;
/* --- DIE REIHE, Artboards 07b/08c/08d/09b (WI-0211) ---
HANDOFF §5.5b2 beschreibt den Streifen als das EINE neue Bauteil dieser
Strecke und gibt seine Masse woertlich an: „three 58 x 44px slots, radius
12, at `padding: 12px 20px 0`, with a 12px explanatory line to their
right". Die Zahlen stehen deshalb hier und nicht in tokens.css — der
Handoff fuehrt sie nicht als Token.
DIE FARBEN SIND ABLEITUNGEN AUS §11 und keine abgeschriebenen Werte: der
laufende Platz aus --color-accent, der wartende aus der Haarlinien-Leiter,
der gescheiterte aus --warn-icon, der freie aus --cs-line-3. §7 Punkt 12
verbietet einem Bauteil, sich einen eigenen Ton auszudenken. */
--reihe-platz-b: 58px;
--reihe-platz-h: 44px;
--reihe-platz-radius: 12px;
--reihe-luecke: 8px;
/* 12 px unter der Oberkante — der Entwurf setzt den Streifen auf
`padding: 12px 20px 0`. Der seitliche Abstand kommt von der Buehne
(--buehne-seite bzw. --space-6); er steht hier nicht ein zweites Mal. */
--reihe-oben: 12px;
/* Und 20 px von den Seiten. Die Buehne der Scanstrecke traegt 22 bzw. 26 px
(--buehne-seite / --space-6); der Streifen holt die Differenz als
negativen Aussenabstand zurueck, statt die Spalte darunter zu verschieben
— der Entwurf setzt NUR ihn auf 20 px. */
--reihe-seite: 20px;
/* Und 22 px ueber der Unterkante — dort verankern die drei Artboards ihren
Aktionsblock. */
--reihe-unten: 22px;
--reihe-spur-b: 46px;
--reihe-spur-h: 18px;
--reihe-nummer: 9.5px;
--reihe-zeichen: 18px;
--reihe-zeichen-frei: 16px;
--reihe-laeuft-rand: 2px;
--reihe-rand: 1.5px;
--reihe-wartet-rand: var(--cs-line-3);
--reihe-frei-rand: var(--cs-line-3);
--reihe-fehler-flaeche: color-mix(in srgb, var(--warn-icon) 12%, transparent);
--reihe-fehler-rand: color-mix(in srgb, var(--warn-icon) 50%, transparent);
--reihe-wartet-deckkraft: 0.6;
/* Die Zusage von 08d und der Ratkasten von 09b: 22 px Radius, 16/18 Polster.
Der gute Ton fuer „kein Foto geht verloren", der ruhige fuer den Rat. */
--reihe-kasten-radius: 22px;
--reihe-kasten-polster: var(--space-4) 18px;
--reihe-zusage-flaeche: var(--cs-good-tint);
--reihe-zusage-rand: color-mix(in srgb, var(--gruen-icon) 30%, transparent);
/* Die durchgestrichene Kamera von 09b: 52-px-Glyphe in einem 130-px-Kreis. */
--reihe-glyphe-kreis: 130px;
--reihe-glyphe: 52px;
--reihe-glyphe-rand: 2.5px;
--reihe-glyphe-flaeche: color-mix(in srgb, var(--warn-icon) 8%, transparent);
/* --- Querformat: der Fotografier-Weg (WI-0334, HANDOFF §24.7) ---
JEDE ZAHL HIER IST EINE ZAHL AUS DEN VIER ARTBOARDS `07l`, `08l`, `09l`
und `13l` im Brett (`design/Carspotter App.dc.html`, Abschnitt
„2b · Finden quer", gezeichnet auf 793 x 393). Sie gelten AUSSCHLIESSLICH
dort — die Regeln dazu haengen an `[data-ausrichtung='quer']`, ganz unten
in dieser Datei, und `zeichne()` setzt das Attribut nur fuer diese vier
Zustaende. */
/* Die Schutzzone an der Kamerakante und der Innenabstand dahinter: der
Rahmen von `07l` beginnt bei 58 px, die Schutzzone nimmt 48 davon. */
--quer-schutz: 48px;
--quer-rand-innen: 10px;
/* Die Bedienspalte rechts unter dem Daumen (§24.7, „controls in a 128 px
column on the right"). */
--quer-spalte: 128px;
/* DIE ZOOM-SPALTE (WI-0341, Brett `07l`): 48 px breit, LINKS neben der
Bedienspalte bei `right:128px`, auf derselben Hoehe wie der Rahmen
(`top:66px; bottom:50px`). Sie ist der Grund, warum Rahmen, Hinweispille
und Warnzeile im neuen Brett bei `right:176px` stehen statt bei 128:
176 = 128 + 48. Die Zahl steht deshalb EINMAL hier, und die drei
Einrueckungen rechnen damit — eine abgeschriebene 176 waere eine zweite
Wahrheit. Beschriftung quer 12 px (Brett; der Patch nennt nur die 12,5 px
des Hochformats), Fuge zur Spur 4 px. */
--quer-zoom-spalte: 48px;
--quer-zoom-schrift: 12px;
--quer-zoom-luecke: 4px;
/* Die Einrueckung von Rahmen, Pille und Warnzeile an der rechten Kante. */
--quer-rand-rechts: calc(var(--quer-spalte) + var(--quer-zoom-spalte));
/* Der Rahmen: `top:66px; bottom:50px`. */
--quer-sucher-oben: 66px;
--quer-sucher-unten: 50px;
--quer-pille-oben: 16px;
--quer-warnung-unten: 12px;
/* Das Kreuz oben links: 44 x 44 bei `top:12px`, 18-px-Glyphe. */
--quer-kreuz: 44px;
--quer-kreuz-oben: 12px;
--quer-kreuz-ikone: 18px;
/* Die drei Plaetze quer: 52 x 34, Radius 10, Fuge 6 — kleiner als die
58 x 44 von `07b`, weil sie in die 128-px-Spalte muessen. */
--quer-platz-b: 52px;
--quer-platz-h: 34px;
--quer-platz-radius: 10px;
--quer-platz-luecke: 6px;
/* Die Gruppe in der Spalte ist mittig: Plaetzeblock (3 x 34 + 2 x 6 = 114),
Fuge 22, Ausloeser samt Rand (76 + 2 x 4 = 84). Der Versatz gegen die
Gruppenmitte ist deshalb (22 + 84) / 2 = 53 nach oben und
(22 + 114) / 2 = 68 nach unten. */
--quer-reihe-versatz: 53px;
--quer-ausloeser-versatz: 68px;
/* 08l / 09l: Buehnenspalte 300 px ab 58 (die 250-px-Buehne mittig darin),
Textspalte ab 378 bis 40 vor der rechten Kante. Die Fuge zwischen
Buehnenspalte und Textspalte ist damit 378 - 58 - 300 = 20; der rechte
Rand 40. WI-0366: die Fuge stand bis dahin als 70 (gemessen von der
BUEHNE, nicht von ihrer Spalte) — richtig gerechnet nur, solange die
Buehne am linken Spaltenrand klebte. */
--quer-lauf-spalte: 300px;
--quer-lauf-fuge: 20px;
--quer-text-rand: 40px;
/* Der Knopf auf 08l (`Abbrechen`) misst mindestens 200 px, der auf 09l
(`Nochmal versuchen`) mindestens 220 — je Bildschirm sein Mass. */
--quer-knopf-min: 200px;
--quer-knopf-min-nochmal: 220px;
/* 13l: die Karte sitzt `left:96px; top:56px`, die Textspalte `left:350px;
right:44px`, der Knopfblock ist auf 300 px begrenzt. 96 - 48 Schutzzone
= 48 Innenabstand; die Fuge zur Textspalte 350 - 96 - 198 = 56. */
--quer-wurf-links: 48px;
--quer-wurf-oben: 56px;
--quer-wurf-fuge: 56px;
--quer-wurf-rechts: 44px;
--quer-wurf-knopf-max: 300px;
--vorschlag-silhouette-b: 86px;
--vorschlag-silhouette-h: 44px;
--konfidenz-flaeche: var(--warn-flaeche);
--konfidenz-text: var(--warn-icon);
/* Der vorgewaehlte Vorschlag (Artboard 11): 2 px Terracotta statt 1,5 px
Haarlinie, dazu die Akzent-Tinte als Flaeche. */
--vorschlag-wahl-rand: 2px;
--vorschlag-wahl-flaeche: var(--cs-accent-tint);
/* `11c-laden` (WI-0176): fuenf Umrisse in der Hoehe einer Typzeile. Der
Entwurf zeichnet sie mit 56 px. */
--typzeile-skelett-hoehe: 56px;
--garage-titel: 28px;
--fortschritt-hoehe: 8px;
--kachel-radius: 13px;
--kachel-streifen: 9px;
/* Das Fotoband der Garage-Kachel — das einzige ohne feste Breite: drei
Spalten (--kachel-spalten) auf der Buehne, also
(393 - 2 * --buehne-seite - 2 * --raster-luecke) / 3 ~ 110 px auf dem
Bezugsgeraet, mithin rund 110 / 52 = 2,11. Auch dieses Band steht in
`FOTOBAENDER` (public/js/filterchain.js): wer die Hoehe, die Spaltenzahl
oder die Luecke aendert, aendert den Zuschnitt der Filterkette mit
(WI-0125, Begruendung an --km-foto-h). */
--kachel-foto: 52px;
--kachel-spalten: 3;
/* DIE KACHEL IST FLACH, NICHT DIE KARTE (WI-0112). Sie lief auf
--karten-koerper, also auf --cs-surface-card — dem dreistufigen Verlauf
des KARTENKOERPERS. HANDOFF §5.3 schreibt fuer die Kachel dagegen
woertlich `background: #22242b`, und §11 fuehrt genau diesen Ton als
eigenes Token: --cs-tile. Es war das einzige Flaechen-Token des Handoffs,
das die App nirgends benutzte, waehrend an seiner Stelle ein anderes
stand — richtige Quelle, falsche Zuordnung. Sichtbare Folge: jede Kachel
brachte DREI Farben statt einer in den Bildschirm, und auf den
Garagen-, Deckbau- und Partiebildschirmen verdraengten diese drei alles
andere. */
--kachel-flaeche: var(--cs-tile);
/* --- DIE DICHTE DER GARAGE (WI-0098, HANDOFF §5.3/§12/§13) ---
Auf derselben Hoehe zeigte der Entwurf neun Kacheln und sechs
Gruppen-Chips, die App drei und zwei. Die Ursache war nirgends
„weniger Inhalt", sondern durchweg groessere Schrift und mehr Luft: die
Garage lief auf `--space-*` und `--schrift-fliess`/`--schrift-klein` des
Designsystems, waehrend der Entwurf hier seine eigene, engere Leiter
zeichnet. Die Werte darunter stehen so im Handoff — jeder mit seiner
Zeile, damit niemand sie fuer gerundete Schaetzungen haelt. */
--raster-luecke: 10px; /* §13 „Grid gap, garage" */
--chips-luecke: 6px; /* §13 „Chip row gap" */
--chip-schrift: 11px; /* §12 „Chip" (9–11,5 px) */
/* --- WI-0313: DAS KLASSENRASTER DER GARAGE (Artboards 18/19/19b, §5.5b7)
„All nine classes are shown, always … as a 3 × 3 grid of two-line cells,
6px gap, inside the 349px content width — class name on the first line,
the `n×` pill and `k/4` on the second."
Die Zahlen sind am Artboard `19-garage-collection` GEMESSEN (drei Spalten
zu 111,66 px, 6 px Luecke, Zellen 112x39, Radius 12, Polster 6/9) und
stehen hier je mit ihrer Zeile, damit niemand sie fuer gerundete
Schaetzungen haelt. Die Spaltenbreite steht NICHT dabei: sie ist
`1fr` aus der Inhaltsbreite, und genau so bleibt die Reihe bei 349 px
stehen, ohne dass eine zweite Breitenangabe daneben alt werden kann. */
--chip-raster-spalten: 3;
--chip-zelle-hoehe: 39px;
--chip-zelle-radius: 12px;
--chip-zelle-polster: 6px 9px;
--chip-klasse-schrift: 10.5px;
--chip-zaehler-schrift: 10px;
/* DIE ZEILENHOEHEN SIND HIER KEIN SCHMUCK, SONDERN DIE BEDINGUNG. Die Zelle
ist 39 px hoch, davon 12 px Polster — zwei Zeilen muessen in 27 px passen.
Mit der Fliess-Zeilenhoehe (1,55) waeren es 32 px, und die beiden Zeilen
ueberlappen sichtbar. Das Artboard zeichnet 1,2 und 1,15: 12,6 + 11,5 =
24,1 px, und darunter bleibt Luft. Am Bild nachgesehen, nicht gerechnet
geglaubt. */
--chip-klasse-zeile: 1.2;
--chip-zaehler-zeile: 1.15;
--chip-zaehler-luecke: 4px;
--chip-mal-polster: 0 5px;
/* Die drei Behandlungen der SAMMLUNG. Salbei kommt aus dem Zustandston
--cs-good (§11 „status"), NICHT aus --cs-r-uncommon: der traegt denselben
Wert, gehoert aber ausschliesslich der Seltenheitstabelle (Designspec
Kap. 9) — ein Quartettchip, der sich daraus bediente, waere beim naechsten
Stufenton stillschweigend mitgewandert. Dieselbe Regel wie beim
Erfolgskreis auf 45e weiter oben. */
--chip-voll-flaeche: color-mix(in srgb, var(--cs-good) 14%, transparent);
--chip-voll-rand: color-mix(in srgb, var(--cs-good) 35%, transparent);
--chip-voll-name: var(--cs-good-soft);
/* Der Zaehler der vollen Klasse zeichnet #a8b98d — eine halbe Stufe unter
--cs-good-soft. §11 fuehrt den Ton nicht; gemischt wird deshalb aus der
Salbeistufe gegen den Grund, nie ein Wert ohne Quelle. Gemeldete Luecke,
dieselbe Bauart wie --schiene-stumm weiter unten. */
--chip-voll-zahl: color-mix(in srgb, var(--cs-good-soft) 80%, var(--cs-bg-top));
--chip-offen-flaeche: color-mix(in srgb, var(--cs-text) 6%, transparent);
--chip-offen-rand: color-mix(in srgb, var(--cs-text) 18%, transparent);
--chip-offen-name: var(--cs-text-2);
--chip-offen-zahl: var(--cs-text-dim);
/* Die leere Klasse: gestrichelt, durchsichtig, zweimal gedaempft. `0/4`
zeichnet #5f594e — den fuehrt §11 als --cs-text-off. Der Klassenname
darueber zeichnet #6f6659, und DEN fuehrt §11 nicht: er liegt zwischen
der schwachen Stufe und dem Grund, also wird gemischt (72 % trifft den
Wert). Gemeldete Luecke. */
--chip-leer-rand: color-mix(in srgb, var(--cs-text) 20%, transparent);
--chip-leer-name: color-mix(in srgb, var(--cs-text-dim) 72%, var(--cs-bg-top));
--chip-leer-zahl: var(--cs-text-off);
/* Die `n×`-Pille in der vollen Klasse. Die TINTE darin ist dieselbe Luecke
wie am Doppelfund-Zaehler weiter oben: das Artboard zeichnet #1e2416, §11
fuehrt den Ton nicht — genommen ist der dunkelste Grund des Handoffs. */
--chip-mal-flaeche: color-mix(in srgb, var(--cs-good) 90%, transparent);
--chip-mal-text: var(--cs-bg-bottom);
/* --- WI-0313: DER SELTENHEITS-PUNKTSTREIFEN (§4.5c, §1506)
„Dot: 20px circle, border: 2px solid , no fill · Off: opacity .55
· On: opacity 1, fill rgba(, .22), dot grows to 24px · Row:
min-height 44px — the strip is the hit target, not the single dot."
Die fuenf Farben kommen aus der `--cs-r-*`-Tabelle und NUR von dort
(Designspec Kap. 9); je Ring setzt das Markup keine Farbe, sondern das
Stylesheet liest sie unten je `data-stufenring`. */
--stufenringe-luecke: 9px;
--stufenringe-zeile: 44px;
--stufenring: 20px;
--stufenring-an: 24px;
--stufenring-rand: 2px;
--stufenring-aus: 0.55;
/* Im Deckbau dichter (HANDOFF §5.5d2, ux-2026-09-02 §6.1): 18-px-Ringe in
8 px Abstand — die Zaehlerzeile traegt links noch beide Zahlen. */
--stufenring-deckbau: 18px;
--stufenringe-luecke-deckbau: 8px;
--fortschrittszeile-luecke: 12px;
/* --- WI-0313: DIE ZWEI FLAECHEN DER GARAGEN-KOPFZEILE
Gemessen an `19-garage-collection`: die Filterpille traegt
`rgba(198,113,57,.16)`, die Kontoscheibe `rgba(198,113,57,.22)`. Beide
liefen bis hierher auf `--cs-accent-tint` (.14) — EIN Wert fuer zwei
verschiedene gezeichnete Flaechen, und die Scheibe damit zwei Stufen zu
blass. Gemischt wird aus `--color-accent`, nicht abgeschrieben: der Ton
ist derselbe, nur die Deckkraft ist eine andere. */
--garage-filter-flaeche: color-mix(in srgb, var(--color-accent) 16%, transparent);
--kontoscheibe-flaeche: color-mix(in srgb, var(--color-accent) 22%, transparent);
/* BEIDE Werte darueber gelten NUR fuer die Gruppenreihe der Garage
(`.chips--gruppen`), nicht fuer jede Chipreihe der App. §12 fuehrt „Chip"
zwar als Stufe des ganzen Systems, aber die Reihen auf Start, Deckbau und
im Wunschkanal gehoeren anderen Tranchen — sie hier mitzuziehen hiesse,
ihre Artboards ungemessen zu veraendern. Der Befund, dass die uebrigen
Chipreihen mit 12 px ueber der Stufe liegen, steht im Bericht und gehoert
dorthin, wo ihr Bildschirm gemessen wird. */
/* DER GEFILTERTE KLASSENCHIP (Artboard 19b, §5.5b7 „Filtered on").
2 px Akzentrand auf rgba(198,113,57,.18), die Fortschrittszahl in
#e8a877 — der Entwurf schreibt alle drei Werte aus. Sie ueberschreiben
die anderen drei Behandlungen des Chips, weil sie die ANSICHT beschreiben
und nicht die Sammlung; nur die salbeifarbene Auskunft darin bleibt, denn
die gehoert der Sammlung. */
/* --- 20b und 20c: Markenwahl und Fundzeit (WI-0213) ---
Die Zahlen stehen so im Entwurf; jede mit ihrer Zeile, damit niemand sie
fuer gerundete Schaetzungen haelt. */
--radio-punkt: 11px; /* §5.5b5 „filled dot in accent" */
--pfeil-glyphe: 11px; /* Artboard 20: der Winkel an der Zeile */
--lupe-glyphe: 16px; /* Artboard 20b: die Lupe im Suchfeld */
--haarlinie: 1px; /* der Trennstrich unter „Alle Marken" / „Alle" */
/* Der Titel von 20b und 20c: der Entwurf zeichnet ihn auf 26px, also eine
halbe Stufe unter dem h2-Grad der Skala (32px). Er ist die Ueberschrift
eines BLATTS, das aus einer Zeile aufgeht, nicht die eines Reiters — und
der Merkmalsvergleich hat die fehlende Sprosse genau so gemeldet. */
--wahlseite-titel: 26px;
/* Der Fussabstand von 20b/20c. Sie tragen keine Tableiste; die 90px, die
--buehne-unten fuer sie freihaelt, waeren hier verschenkte Listenzeilen.
Der Entwurf setzt seine Spalte auf `padding:20px 22px 0` und laesst die
Liste bis dicht an die Kante laufen. */
--wahlseite-fuss: 24px;
--schiene-breite: 16px; /* §5.5b4 „A 16px column on the right" */
--schiene-schrift: 9.5px; /* §5.5b4 „9.5px/700 monospace" */
--schiene-zeile: 1.5;
/* §5.5b4 nennt fuer die Buchstaben OHNE Eintrag `#4e4840`. Diesen Ton
fuehrt §11 nicht; er liegt zwischen der gedaempften und der schwachen
Textstufe und ist dunkler als beide. Gemischt wird deshalb aus der
schwachen Stufe gegen den Grund — ein Wert ohne Quelle stuende hier
sonst als einziger da (Designspec Kap. 9: tokens only). */
--schiene-stumm: color-mix(in srgb, var(--cs-text-dim) 55%, var(--cs-bg-top));
--laufweite-buchstabe: 0.1em; /* §5.5b4 „letter heading … .1em" */
/* Die einbreite Familie der Buchstabenkoepfe und der Schiene. §12 fuehrt sie
nicht als Token — der Entwurf setzt an beiden Stellen `ui-monospace`, also
die Systemschrift, damit A und W gleich viel Platz nehmen und die Reihe
eine Spalte bildet. */
--font-einbreit: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--stumpf-deckkraft: 0.5; /* eine Zeile ohne Ziel — sichtbar, aber stumm */
--chip-gefiltert-rand: 2px;
--chip-gefiltert-flaeche: color-mix(in srgb, var(--color-accent) 18%, transparent);
/* Fuer `#e8a877` gilt dasselbe wie bei der eigenen Reaktion weiter unten:
§11 fuehrt den Ton nicht, auf der Akzentrampe liegt er zwischen 300 und
400 — genommen wird die Sprosse der Rampe, nie ein Wert ohne Quelle. */
--chip-gefiltert-zahl: var(--color-accent-400);
--garage-meta: 13px; /* §12 „Body small" — die Zaehlerzeile */
--garage-filter-schrift: 13px; /* §12 „Body small" — die Filterpille */
/* §5.3 „caption padding". Die Kurzform steht in zwei benannten Haelften,
seit die Kachelhoehe aus ihr gerechnet wird (WI-0328): in einem `calc()`
ist `7px 8px` kein Wert, und die 7 ein zweites Mal hinzuschreiben waere
die zweite Wahrheit, die beim naechsten Entwurfsstand haengen bleibt. */
--kachel-polster-y: 7px;
--kachel-polster-x: 8px;
--kachel-polster: var(--kachel-polster-y) var(--kachel-polster-x);
--kachel-name: 11px; /* §5.3 „caption font-size" */
--kachel-generation: 10px; /* §5.3 „second line" */
--kachel-abzeichen: 9px; /* §5.2 „NEU" — EROBERT liegt mit 9,5 px daneben */
/* --- DIE KACHEL IST SO HOCH WIE IM BRETT, UND ZWAR JEDE (WI-0328) ---
Gemeldet war (laufende App, 10.10.2026): „Kacheltext zeigt den vollen
Generationsnamen ueber bis zu vier Zeilen, dadurch unterschiedliche
Kachelhoehen in einer Reihe". Der Grund liegt nicht in der Hoehe, sondern
im Text: `19-garage-collection` zeichnet EINE Namenszeile und darunter
EIN kurzes Kuerzel (`8V`, `MK7`, `E46`), und solange beide Zeilen
umbrechen durften, war die Hoehe eine Folge des Inhalts. Im Katalog
stehen 15 von 186 Generationscodes, die dafuer zu lang sind
(`III (319) Facelift 2020`), und ueber das Modellwissen (Spec 6.2e) kann
ein ganzer Satz hereinkommen.
Die Beschriftung ist deshalb zweizeilig FESTGELEGT und die Hoehe daraus
GERECHNET — nicht abgeschrieben: Streifen + Fotoband + zwei Zeilen in
ihren Graden und dem Polster darum. Verschiebt sich eines dieser Masse,
verschiebt sich die Kachel mit; eine Zahl hier wuerde stehenbleiben. */
--kachel-beschriftung: calc(
var(--kachel-polster-y) * 2 + (var(--kachel-name) + var(--kachel-generation)) *
var(--zeilenhoehe-heading)
);
--kachel-hoehe: calc(
var(--kachel-streifen) + var(--kachel-foto) + var(--kachel-beschriftung)
);
/* Der gestrichelte Rahmen der leeren Garage (Artboard 21): 200 x 110. */
--leer-rahmen-b: 200px;
--leer-rahmen-h: 110px;
--leer-silhouette-b: 120px;
--leer-silhouette-deckkraft: 0.5;
/* Der Satz unter der Einladung liest sich enger als der Knopf breit ist —
der Entwurf setzt ihn in ein 44 px eingeruecktes Feld. */
--leer-textbreite: 261px;
/* Das Zeichen des Freundes im Kopf von Artboard 40. */
--freund-zeichen: 44px;
/* Die Kontoscheibe in der Kopfzeile der Garage (Artboards 18/19/21).
Der Entwurf zeichnet sie 38 px. Sie bleibt hier 44 — dieselbe Hoehe, die
die Filterpille daneben schon hat, und die Trefferflaeche, die dieses
Repo seit WI-0044 fuer jedes Bedienelement der Kopfzeile haelt
(Designspec 10.3 Punkt 1). Eine BEWUSSTE Abweichung, und die einzige, die
dieses Item einfuehrt: einen bestehenden Daumenknopf zu verkleinern, um
ein Artboard zu treffen, waere die falsche Richtung. Was der Entwurf an
dieser Stelle wirklich beanstandet hat, war die Wortpille, nicht die
sechs Pixel. */
--kontoscheibe: var(--btn-hoehe-ghost);
/* DER KONTOBEREICH (Artboards 43/44/45, WI-0099). Vier Masse, alle aus dem
Entwurf: das Zeichen im Kopf (52 px), die Zeilenhoehe einer Einstellung
(56 px), die Zeilenhoehe der beiden Wege hinaus (48 px) und die Ikone
davor (20 px). Sie stehen nicht auf der Abstandsleiter — es sind
Trefferflaechen, und die kommen aus dem Entwurf und aus Designspec Kap.
10.3 Punkt 1, nicht aus einer Rechnung. */
--konto-zeichen: 52px;
/* DIE GLYPHE IM MONOGRAMMKREIS DES KONTOKOPFS (HANDOFF §4.5b, Artboard 43).
Sie stand auf --color-accent-400, also auf Terracotta — und Terracotta ist
nach Designspec Kap. 9 den AKTIONEN vorbehalten, waehrend §4.5b fuer eine
Identitaet ausdruecklich einen eigenen Satz Toene fuehrt („rarity colours
and terracotta are both taken"). Der Entwurf zeichnet die Glyphe auf `43`
in #c9c0a8, dem Sandton jener sechs — und Sand ist dort zugleich der
Rueckfall fuer jede Anfangsbuchstabe ohne eigene Farbe. Genau dieser Fall
liegt hier vor: die Farbwahl der sechs Toene ist noch nicht gebaut (der
Avatar der App ist bis heute ein TIER, `avatar_fuchs` und die 30 anderen),
und bis sie es ist, traegt der Kreis den gezeichneten Rueckfallton statt
einer Aktionsfarbe. Scheibe und Rand bleiben, wie der Entwurf sie auf
diesem Artboard zeichnet. */
--konto-zeichen-glyphe: #c9c0a8;
--konto-zeile: 56px;
/* DIE WAHLZEILE AUF `43h` (WI-0357, HANDOFF §28, P-3): 60 px hoch — vier
mehr als die Kontozeile, weil die Zeile `Automatisch` eine Unterzeile
traegt und alle drei gleich hoch stehen. Der Punkt im Ring ist 10 px. */
--sprachwahl-zeile: 60px;
--sprachwahl-punkt: 10px;
/* HIER STAND `--konto-wert-zeile: 30px` — die flachere Hoehe der beiden
Auskunftszeilen „Spitzname" und „Farbe" (WI-0116). ENTFERNT MIT WI-0331
(Befund 43-5) zusammen mit den Zeilen selbst: das Brett zeichnet an
dieser Stelle die zweite Schalterzeile, nicht die beiden Angaben. Der
Grund, aus dem das Mass einmal 30 und nicht 56 px war, ist damit
erledigt — drei reine Auskunftszeilen in Knopfhoehe hatten den Bildschirm
ueber die 793 px geschoben. Dieselbe Hoehe fuer die Zeile, die jetzt dort
steht, waere falsch: sie IST eine Zeile des Bretts, in Zeilenhoehe. */
--konto-ausgang: 48px;
--konto-ikone: 20px;
/* DER SCHALTER unter „Deine Daten" (Artboard 43, WI-0116): 46 x 27 px mit
3 px Polster und einem 21 px runden Knopf darin — die Masse des Entwurfs.
Sie stehen wie die vier darueber nicht auf der Abstandsleiter: es ist eine
Trefferflaeche, keine Rechnung. */
--konto-schalter-b: 46px;
--konto-schalter-h: 27px;
--konto-schalter-polster: 3px;
--konto-schalter-knopf: 21px;
/* Der Winkel am Ende der Loeschzeile (Artboard 43, WI-0164): 15 px, kleiner
als die 20 px der Ikonen darueber — die Fusszeilen tragen keine Ikone,
und ein gleich grosser Winkel machte aus der leisesten Zeile die
lauteste. */
--konto-winkel: 15px;
/* Der Haken der Datenfreigabe-Zeile (Artboard 43, WI-0331): 18 px — kleiner
als die 20 px der Zeilenzeichen links, groesser als der 15-px-Winkel im
Fuss. Das Brett zeichnet genau diese Groesse, und sie steht wie die
anderen hier nicht auf der Abstandsleiter: es ist eine gezeichnete Marke,
keine Rechnung. */
--konto-haken: 18px;
/* Der Aufzaehlungspunkt vor einer Verlustzeile auf 45b (6 px). Er steht
nicht auf der Abstandsleiter: es ist eine gezeichnete Marke, keine
Rechnung — wie `--punkt` eine Zeile weiter unten. */
--verlust-punkt: 6px;
/* Der Farbpunkt vor einer Seltenheitszeile im Filterblatt (Artboard 20:
11 px). Er ist das, was die fuenf Stufen dort unterscheidbar macht —
dieselbe Farbe wie der Streifen der Kachel, aus derselben Quelle. */
--punkt: 11px;
/* Das Kaestchen des Filterblatts (Artboard 20): 22 px mit 7 px Rundung, in
einer 44 px hohen Zeile — das ist die Trefferflaeche eines Daumens. */
--filterblatt-kaestchen: 22px;
--filterblatt-kaestchen-radius: 7px;
--filterblatt-zeile: 44px;
/* Der weiche Verlauf ueber dem stehenden Fussknopf des Filterblatts: er
laesst die Zeile darunter auslaufen, statt sie hart abzuschneiden. */
--filterblatt-fussschatten: 0 -12px 16px var(--blatt-flaeche);
/* DIE BEREICHSSEITE 20w (WI-0424). Saeulen 56 px, Schiene 44 px (die
Trefferflaeche), Spur 6 px, Griff 28 px mit 3 px Rand — Masse des Bretts.
Die Toene: Saeulen im Bereich Terracotta zu 70 %, ausserhalb der Text zu
14 %, der Griffrand die Kartenrueckkante. Das Brett hat fuer 20w keinen
Farbvertrag (L-10); genommen sind die Nachbartokens. */
--wertebereich-saeulen: 56px;
--wertebereich-saeule-radius: 4px 4px 1px 1px;
--wertebereich-saeule-an: color-mix(in srgb, var(--color-accent) 70%, transparent);
--wertebereich-saeule-aus: color-mix(in srgb, var(--cs-text) 14%, transparent);
--wertebereich-schiene: 44px;
--wertebereich-spur: 6px;
--wertebereich-griff: 28px;
--wertebereich-griff-rand: 3px solid color-mix(in srgb, var(--cs-back-edge) 90%, transparent);
--wertebereich-griff-schatten: 0 2px 8px rgba(0, 0, 0, .4);
--wertebereich-feld-flaeche: color-mix(in srgb, var(--cs-text) 5%, transparent);
--wertebereich-feld-radius: 20px;
--wertebereich-feldwert: 18px;
/* DAS STEHENDE KOPFBAND (Artboards 19s und 28s, WI-0424). Das Brett malt
es auf #201c17 mit `0 8px 16px rgba(0,0,0,.35)`; fuer beides gibt es kein
Token und keinen Farbvertrag (L-10). Genommen ist der obere Grund
(--cs-bg-top, #221e18) — auf ihm beginnt der Bildschirm ohnehin, das Band
hebt sich ruhend nicht ab — und der Schatten des Bretts als eigener
Wert neben --cs-shadow-sheet. */
--kopfband-flaeche: var(--cs-bg-top);
--kopfband-schatten: 0 8px 16px rgba(0, 0, 0, .35);
/* Der Verlauf ueber den stehenden Knoepfen von 28s: 34 px bis zum Grund. */
--deckbau-fuss-verlauf: linear-gradient(180deg, transparent 0, var(--cs-bg-bottom) var(--space-8));
/* DIE SECHS AVATARFARBEN — HANDOFF §4.5b, Artboard 01b (WI-0171).
Sie stehen hier und nicht in tokens.css, weil §11 sie nicht fuehrt: der
Handoff nennt sie in §4.5b als eigenen Satz, ausdruecklich NEBEN der
Seltenheitsskala und neben Terracotta („rarity colours and terracotta are
both taken, so the avatar hues are a separate set").
Je Farbe drei Werte, weil §4.5b sie als Dreiklang schreibt: Toenung .16
als Flaeche, Rand .5, Glyphe voll. Sie erscheinen AUSSCHLIESSLICH im
Kreis — nie auf einem Knopf, Chip oder Kartenrahmen und nie anstelle
einer Seltenheitsfarbe. */
--avatar-tuerkis: #5fa39b;
--avatar-tuerkis-ton: rgba(95, 163, 155, 0.16);
--avatar-tuerkis-rand: rgba(95, 163, 155, 0.5);
--avatar-tuerkis-schein: rgba(95, 163, 155, 0.35);
--avatar-rose: #d97ea0;
--avatar-rose-ton: rgba(217, 126, 160, 0.16);
--avatar-rose-rand: rgba(217, 126, 160, 0.5);
--avatar-rose-schein: rgba(217, 126, 160, 0.35);
--avatar-kornblume: #7f9ede;
--avatar-kornblume-ton: rgba(127, 158, 222, 0.16);
--avatar-kornblume-rand: rgba(127, 158, 222, 0.5);
--avatar-kornblume-schein: rgba(127, 158, 222, 0.35);
--avatar-senf: #d9b24a;
--avatar-senf-ton: rgba(217, 178, 74, 0.16);
--avatar-senf-rand: rgba(217, 178, 74, 0.5);
--avatar-senf-schein: rgba(217, 178, 74, 0.35);
--avatar-flieder: #a98cd9;
--avatar-flieder-ton: rgba(169, 140, 217, 0.16);
--avatar-flieder-rand: rgba(169, 140, 217, 0.5);
--avatar-flieder-schein: rgba(169, 140, 217, 0.35);
--avatar-sand: #c9c0a8;
--avatar-sand-ton: rgba(201, 192, 168, 0.16);
--avatar-sand-rand: rgba(201, 192, 168, 0.5);
--avatar-sand-schein: rgba(201, 192, 168, 0.35);
/* Die Groessenleiter der Scheibe (HANDOFF §4.5b). Die Glyphe waechst mit
ihr — deshalb steht sie je Stufe daneben und nicht einmal fuer alle. */
--avatar-gross: 112px;
--avatar-gross-glyphe: 46px;
--avatar-wahl: 52px;
--avatar-wahl-glyphe: 20px;
--avatar-mittel: 62px;
--avatar-mittel-glyphe: 26px;
--avatar-kopf: 44px;
--avatar-kopf-glyphe: 19px;
/* Die Stufe „duel confirm, friend header" aus derselben Leiter (WI-0188).
Sie stand bis hierher nicht als Token da, obwohl §4.5b sie fuehrt — der
Bildschirm hatte an dieser Stelle noch den neutralen Monogrammkreis. */
--avatar-bestaetigung: 48px;
--avatar-bestaetigung-glyphe: 20px;
/* 40 px mit 17 px Glyphe an der Gegnerzeile von 28a. DIESE STUFE FUEHRT
§4.5b NICHT — die Leiter dort springt von 44 auf 34 —, Artboard 28a
zeichnet sie aber ausdruecklich (`width:40px;height:40px;font-size:17px`).
Gemeldet als Luecke; bis der Handoff die Stufe nennt, steht sie hier
benannt statt als roher Wert im Bauteil. */
--avatar-auftakt: 40px;
--avatar-auftakt-glyphe: 17px;
--avatar-reaktion: 30px;
--avatar-reaktion-glyphe: 14px;
--avatar-antwort: 24px;
--avatar-antwort-glyphe: 12px;
--avatar-rand: 1.5px;
--avatar-rand-stark: 2.5px;
/* --- DAS REAKTIONSBLATT (HANDOFF §5.5c, Familie `16r-*`, WI-0181) ---
Wie bei der schwebenden Leiste darunter schreibt der Entwurf die
Geometrie DIESES EINEN Bauteils in festen Pixeln vor und nicht auf der
Abstandsleiter. Die Masse stehen deshalb hier als eigene Tokens: das
Blatt ist EIN Bauteil mit EINER Geometrie, und wer sie aendert, aendert
sie an dieser Stelle statt in einem Dutzend Regeln.
DIE DREI HOEHEN SIND DER KERN. Sie sind fest, weil der Entwurf sie fest
zeichnet: ein Blatt, das mit der Liste waechst, laesst beim Scrollen
Zeilen unter den Knopf rutschen und springt, wenn die Liste ankommt. */
--reaktionen-hoehe-liste: 430px;
--reaktionen-hoehe-kurz: 310px;
--reaktionen-hoehe-auswahl: 466px;
--reaktionen-polster-oben: 14px;
--reaktionen-polster-seite: 22px;
--reaktionen-polster-unten: 26px;
--reaktionen-radius: 32px;
--reaktionen-schatten: 0 -18px 40px rgba(0, 0, 0, 0.55);
/* Der Gradientenschleier: er hebt das Blatt ab, LOESCHT die Karte aber
nicht — man soll weiterlesen koennen, worauf man antwortet. */
--reaktionen-schleier-hoehe: 120px;
--reaktionen-schleier: linear-gradient(180deg, rgba(19, 17, 16, 0), rgba(19, 17, 16, 0.82));
/* Die Maske der rollenden Liste — oben 18 px, unten 14 px. Eine halb
sichtbare Zeile liest sich damit als angeschnitten und nicht als kaputt. */
--reaktionen-maske: linear-gradient(
transparent,
#000 18px,
#000 calc(100% - 14px),
transparent
);
--reaktionen-griff-breite: 36px;
--reaktionen-griff-hoehe: 4px;
--reaktionen-griff-treffer: 44px;
--reaktionen-griff-versatz: 20px;
--reaktionen-griff-abstand: 8px;
--reaktionen-griff-farbe: var(--cs-line-4);
/* Die Ueberschrift des Blatts steht auf 22 px — zwischen h4 (20) und h3
(25) der Skala. §12 fuehrt die Stufe nicht; sie steht deshalb hier
benannt statt als Zahl im Bauteil. */
--reaktionen-titel: 22px;
/* §5.5c schreibt die Grade dieser Zeile aus: Absendername 13,5px/700,
Zeitangabe 11px, Satzpille 13,5px/700, `Antworten` 12,5px/700, die
Zahlzeile 12,5px, der Name einer Antwort 12,5px, das Zeichen in der
Pille 15px. Die Skala der App fuehrt 13,5 (`--schrift-hinweis`) und 11
(`--schrift-abschnitt`); 12,5 ist die Caption-Stufe aus §12, die schon an
mehreren Stellen als eigener Wert steht, und 15px fuehrt sie nirgends. */
--reaktion-name: var(--schrift-hinweis);
--reaktion-zeit: var(--schrift-abschnitt);
--reaktion-satz: var(--schrift-hinweis);
--reaktion-caption: 12.5px;
--reaktion-emoji: 15px;
--reaktion-pille-hoehe: 32px;
/* Die Kopfzeile der Familie `16r-*` (WI-0330, 16r-2): `‹`-Scheibe,
Modellname (15px/700), Sammelnummer (12,5px, leiser Ton). Die 15 fuehrt
die Skala nirgends, die 12,5 ist dieselbe Caption-Stufe wie oben — sie
wird deshalb nicht ein zweites Mal geschrieben. */
--reaktionen-kopf-modell: var(--reaktion-emoji);
/* Salbei fuer das, was jemand anderes gesagt hat. Flaeche und Text fuehrt
§11 als --cs-good-tint / --cs-good-soft; den Rand nennt §5.5c mit .45 und
§11 nicht — er wird deshalb aus derselben Farbe gemischt, nicht daneben
geschrieben. Dieselbe Bauart wie --gruen-rand. */
--reaktion-pille-flaeche: var(--cs-good-tint);
--reaktion-pille-rand: color-mix(in srgb, var(--cs-good) 45%, transparent);
--reaktion-pille-text: var(--cs-good-soft);
/* Terrakotta fuer die EIGENE. Sie ist hier KEINE Aktionsfarbe, sondern eine
Auskunft — „das hast du gesagt" —, und deshalb steht sie an der Pille und
nicht an einem Knopf. Gemischt wird aus --color-accent: es ist wertgleich
mit --cs-accent (#c67139), und §16 bindet es als die Quelle, die die App
durchgaengig abruft. §11 fuehrt fuer die Flaeche --cs-accent-tint (.14),
der Entwurf zeichnet hier .18. */
--reaktion-eigen-flaeche: color-mix(in srgb, var(--color-accent) 18%, transparent);
--reaktion-eigen-rand: color-mix(in srgb, var(--color-accent) 60%, transparent);
/* §5.5c nennt fuer den Text `#e8a877`. Diesen Ton fuehrt §11 nicht; auf der
Akzentrampe des Designsystems liegt er zwischen 300 (#ffc6a5) und 400
(#f6a06b). Genommen wird die naechste Sprosse der Rampe statt eines
Werts, den keine Quelle kennt (Designspec Kap. 9: tokens only). */
--reaktion-eigen-text: var(--color-accent-400);
--reaktion-antwort-einzug: 40px;
--reaktion-antwort-linie: 1.5px solid var(--cs-line-2);
--reaktion-aktion-versatz: -2px;
--reaktion-skelett-hoehe: 64px;
/* Der stumpfe Knopf: er ist NICHT nur abgeblendet, er traegt eine eigene
Flaeche — sonst laese er sich als „gerade nicht getroffen" statt als
„geht noch nicht". §11 fuehrt beide Werte. */
--reaktion-stumpf-flaeche: var(--cs-fill-1);
--reaktion-stumpf-text: var(--cs-text-dim);
--btn-hoehe-treffer: 44px;
--btn-wahl-rand: 2px;
/* Die Altersstufenzeile auf Artboard 02 — 52 px, deutlich ueber den 44 px
Mindesttrefferflaeche aus HANDOFF §4.5. */
--anmeldung-zeile: 52px;
/* DIE SCHWEBENDE PILLE — HANDOFF §4.3, Wert fuer Wert (WI-0093).
Der Entwurf schreibt die Geometrie dieses einen Bauteils in festen
Pixeln vor und nicht auf der Abstandsleiter (§13 fuehrt nur den
Fussfreiraum). Deshalb stehen die Masse hier als eigene Tokens: die
Leiste ist EIN Bauteil mit EINER Geometrie, und wer sie aendert, aendert
sie an dieser Stelle statt in vier Regeln.
Bis WI-0093 waren Polster und Schriftgrad von der Leiter abgeleitet
(`--space-2`, `--schrift-klein`). Das ergab eine Leiste, die nirgends
genau die Masse des Entwurfs traf — und mit dem vierten Eintrag
„Wunsch" war sie breiter als die 393 px des Geraets und hing links und
rechts hinaus. Die Eintraege sind seitdem drei (siehe app.js). */
--tableiste-flaeche: rgba(35, 30, 24, 0.85);
--tableiste-blur: blur(10px);
--tableiste-unten: 16px;
--tableiste-polster: 6px;
--tableiste-luecke: 4px;
--tableiste-randbreite: 1px;
/* §4.3 nennt `rgba(245,234,216,.12)`. Auf der Haarlinien-Rampe des
Handoffs (§11) liegt der Wert zwischen --cs-line-1 (.10) und
--cs-line-2 (.14); genommen wird die naechste Stufe der Rampe statt
eines Werts, den §11 nicht kennt (Designspec Kap. 9: Tokens only). */
--tableiste-randfarbe: var(--cs-line-2);
/* Der Eintrag: 44 px Mindesthoehe (§4.5 „Minimum hit target everywhere"),
0/20 Polster, 14 px — §12, Zeile „Tab item". */
--tableiste-knopf: 44px;
--tableiste-knopf-polster: 20px;
--tableiste-schrift: 14px;
/* Die Leiste traegt ihre Hoehe als Token: die Kartenseite rechnet mit ihr
ihren Fussfreiraum aus — statt zu schaetzen, wie hoch sie gerade ist.
Der Rand zaehlt mit, sonst faellt die Rechnung um zwei Pixel zu knapp
aus. */
--tableiste-hoehe: calc(
var(--tableiste-knopf) + var(--tableiste-polster) * 2 + var(--tableiste-randbreite) * 2
);
/* Der Freiraum am Fuss jeder Buehne. HANDOFF §13 verlangt „Bottom inset
for the tab bar: >= 90px"; die Leiste selbst belegt 16 + 58 = 74 px,
der Rest ist Luft zwischen Inhalt und Leiste. Seit WI-0096 sind es 90
statt 96 px — die Untergrenze aus §13 —, weil auf 393 px jeder Pixel
zaehlt, den ein Bildschirm sonst unter die Falz schiebt.
WI-0323 (Befund G2) — DIE ZAHL IST ABGELEITET, NICHT ABGESCHRIEBEN.
Bis hierher stand hier das Literal `90px`, und die Rechnung, die es
ergibt, stand nur im Satz darueber. Das sind zwei Wahrheiten ueber
DASSELBE Mass: wer die Leiste um einen Pixel aendert, aendert den
Freiraum nicht mit, und der Inhalt laeuft ihr unter — genau der Befund,
der gemeldet wurde. Die Leiste schwebt `--tableiste-unten` ueber der
Kante, ist `--tableiste-hoehe` hoch, und darueber gehoert derselbe
Spalt noch einmal als Luft (der Bericht nennt „tab-bar height + 16 px",
und 16 px IST `--tableiste-unten`). Macht 16 + 58 + 16 = 90 px, also
exakt die Untergrenze aus §13 — die Zahl bewegt sich nicht, nur ihre
Herkunft. Dieselbe Bauart wie `--karte-fuss` weiter oben, das seinen
Fussfreiraum schon so rechnet; zwei Rechenweisen fuer denselben
Freiraum waeren eine zuviel.
SIE GILT UEBER DEN GEMEINSAMEN TRAEGER. Angeschoben wird nichts je
Bildschirm: `.app__buehne` traegt sie als `padding-bottom`, und das
ist der Kasten, in dem JEDER rollende Bildschirm seinen Inhalt hat. */
--buehne-unten: calc(var(--tableiste-unten) * 2 + var(--tableiste-hoehe));
/* SEITLICH: HANDOFF §4.2, Zeile „Tab screen" — `padding: 20–22px 22px 0`.
Bis WI-0096 stand hier die Abstandsleiter (--space-4, also 18 px), und
der Merkmalsvergleich meldete den Seitenrand auf JEDEM zugeordneten
Bildschirm als zu schmal: der Entwurf zeichnet die Inhaltsspalte bei
21–25 px, die App lag bei 18. Ein Bildschirm hat EINE Spalte, nicht jeder
Bildschirm seine eigene — deshalb steht der Wert hier und nicht in einer
Regel je Bildschirm.
OBEN bleibt es bei 26 px, und das ist gemessen statt gewaehlt: der
Entwurf faengt je Bildschirm verschieden an — 20 px im Deckbau, 22 px auf
dem Duell-Einstieg, 24 px in der Garage, 28–30 px auf Auswahl, Korrektur
und der Zustimmung zum Einsatz. Innerhalb der Toleranz von 4 px trifft
26 px die meisten davon; 20 px haette drei Bildschirme aus der Toleranz
geschoben, die vorher darin lagen. Wo der Entwurf weit davon abweicht —
die Buehnen-Seiten mit ihren 56 px —, steht die Zahl weiter unten je
Bildschirm. */
--buehne-oben: 26px;
--buehne-seite: 22px;
/* DIE SYSTEMRAENDER DES GERAETS, AN EINER STELLE (WI-0417).
Die Seite traegt `viewport-fit=cover` (public/index.html), und die
Capacitor-Huelle legt die Webansicht unter Statusleiste, Dynamic Island
und Home-Indikator. Ohne diese Raender standen in der iOS-App Uhrzeit und
Akku auf der Ueberschrift „Garage", dem Filter und dem Konto-Knopf. Wer
einen Systemrand braucht, nimmt DIESE Tokens, nie ein eigenes `env()`:
`.app` polstert damit oben und unten fuer jeden Bildschirm, und nur was
sich aus dem Fluss loest (`position: fixed`) rechnet sie selbst dazu.
Im Browser, auf dem Rechner und auf Android ohne Kerbe ist `env()` 0 —
dort aendert sich kein Pixel. Die Seitenraender gelten nur quer, und quer
gibt es nur den Fotografier-Weg (07l/08l/09l/13l). */
--sicher-oben: env(safe-area-inset-top, 0px);
--sicher-unten: env(safe-area-inset-bottom, 0px);
--sicher-links: env(safe-area-inset-left, 0px);
--sicher-rechts: env(safe-area-inset-right, 0px);
/* Die Hoehe, die zwischen den beiden Systemraendern bleibt. Was seine Masse
aus der Fensterhoehe rechnet, rechnet mit DIESER — sonst wuerde eine
Karte um die Raender zu gross und die Seite rollte. */
--sicher-hoehe: calc(100dvh - var(--sicher-oben) - var(--sicher-unten));
--toast-flaeche: #e2eecb;
--toast-text: #3d4a2c;
--wurf-raum: var(--cs-bg-reveal);
--strich-karte: 1.6;
--strich-kachel: 1.8;
--skelett-flaeche: color-mix(in srgb, var(--cs-text) 6%, transparent);
--buehne-max: 420px;
/* --- Wunschkanal (Spec 12.1) --- */
--wunsch-flaeche-hoehe: 96px;
--wunsch-antwort-hoehe: 60px;
/* Der Anhang wird ganz gezeigt, nur die Hoehe ist gedeckelt — bezogen auf
den Bildschirm, damit ein hochkantes Handyfoto gross genug bleibt und die
Meldungsliste trotzdem blaetterbar bleibt. */
--wunsch-anhang-hoehe: 60vh;
--wunsch-verlauf-strich: 2px;
/* Wie weit eine abgesagte Meldung zuruecktritt (Artboard 47). */
--wunsch-abgesagt-deckkraft: 0.75;
/* --- Bilanz (Artboard 41, Produktspec 4.8, WI-0100) --- */
/* Die Kategorienzeile ist eine dreispaltige Tabelle: Name, Balken, Anteil.
Nur die beiden Aussenspalten haben ein festes Mass, damit die Balken auf
gleicher Hoehe anfangen und enden — sonst laege „0–100 km/h" gegenueber
„Gewicht" um zwei Zentimeter versetzt und die Balken waeren nicht mehr
vergleichbar. Die Werte sind die des Entwurfs (96 px / 34 px). */
--bilanz-name-breite: 96px;
--bilanz-anteil-breite: 34px;
/* Der Balken einer Kategorie, die NICHT die staerkste ist. Der Entwurf
zeichnet dafuer denselben Terracotta-Ton mit halber Deckkraft — er wird
gemischt statt danebengeschrieben, damit Terracotta die eine Aktionsfarbe
bleibt (Designspec Kap. 9). */
--bilanz-balken-leise: color-mix(in srgb, var(--color-accent) 55%, transparent);
/* --- Freunde, Deckbau, Duell (T3) --- */
/* Der eigene Code-QR MUSS in echtem Schwarz auf echtem Weiss stehen — das
ist keine Gestaltungsfrage, sondern die Bedingung, unter der eine Kamera
ihn ueberhaupt liest. Die App-Palette fuehrt bewusst kein reines Weiss
(Kap. 1: "kein Grau"), deshalb sind das die einzigen zwei rohen Farbwerte
in diesem ganzen Block. */
--qr-hell: #fff;
--qr-dunkel: #000;
--qr-flaeche: var(--qr-hell);
/* Artboard 23 zeichnet das Quadrat mit 118 px — NEBEN dem Code, nicht
darueber. Bis WI-0096 stand es mit 176 px allein in der Spalte und schob
das Eingabefeld unter die Falz. 118 px sind fuer eine Handykamera aus
Vorlesedistanz ausreichend; der Code daneben ist ohnehin der zweite Weg. */
--qr-seite: 118px;
/* Der Block „Dein Code", wenn der Abruf scheitert oder noch laeuft
(Artboard 24, WI-0073). Der Entwurf zeichnet einen Kasten mit 24 px
Radius, einem Haarstrich in der Warnfarbe bei 35 %, 22 px Polster und
einem 44-px-Kreis fuer das Symbol; die Flaeche ist der Seitengrund bei
5 % — die schwaechste Stufe desselben Schleiers, den --feld-flaeche bei
8 % und --blatt-rand bei 14 % fuehren. Der Kreisel ist der eingebettete
20-px-Kreisel aus HANDOFF §6 (Strichstaerke 3, 0,7 s je Umlauf); es ist
der erste im Stylesheet, deshalb steht er hier und nicht im Bauteil. */
--code-fehler-radius: 24px;
--code-fehler-flaeche: var(--cs-fill-1);
--code-fehler-rand: color-mix(in srgb, var(--warn-icon) 35%, transparent);
--code-fehler-strich: 1px;
--code-fehler-polster: 22px;
--code-fehler-kreis: 44px;
--code-fehler-zeichen: var(--icon-mittel);
--kreisel-groesse: 20px;
--kreisel-strich: 3;
--kreisel-dauer: 0.7s;
--deckbau-kachel: 84px;
/* „Automatisch füllen" (Artboard 28, WI-0089): eine Pille NEBEN einer
Textzeile, nicht im Handlungsblock — deshalb flacher als der Ghost-Knopf
(44px) und mit einem Haarstrich statt der 1.5px der Karte. Rand und
Schrift kommen aus den vorhandenen Tokens (--feld-rand ist der
Seitengrund bei 22 %, genau der Rand des Entwurfs). */
--fuellen-hoehe: 36px;
--fuellen-strich: 1px;
/* --- Duell aufsetzen (Artboard 26, WI-0096) ---
Der Entwurf zeichnet die Wahlkarten mit 20 px Radius und dem gewaehlten
Rand bei 2 px, die Deckgroessen als 46-px-Pillen. Radius und Hoehe stehen
auf der Leiter aus §13 nicht — deshalb hier, und nur hier. */
--wahlkarte-radius: 20px;
--wahlkarte-rand-aktiv: 2px;
--groesse-hoehe: 46px;
/* --- Die Fahrzeuggruppe waehlen (Artboard 26b, WI-0180) ---
Der Entwurf zeichnet die Gruppenzeilen als 56-px-Bloecke mit 20 px Radius
und 16 px Seitenpolster, den Gruppennamen in der Ueberschriftenschrift auf
19 px, den Haken mit 18 px Kantenlaenge. Die gesperrte Zeile steht bei
45 % Deckkraft — sie bleibt lesbar und ist erkennbar nicht waehlbar.
Radius und Rand sind dieselben Werte wie an der Wahlkarte von Artboard 26;
Hoehe, Namensgrad, Haken und Deckkraft fuehrt die Leiter aus §13 nicht,
deshalb stehen sie hier und nur hier. */
--gruppenzeile-hoehe: 56px;
--gruppenzeile-polster: 16px;
--gruppenzeile-name: 19px;
--gruppenzeile-haken: 18px;
--gruppenzeile-gesperrt: 0.45;
/* Der gestrichelte Einladungskasten, wenn es gar keine Gruppe gibt
(26b-gruppe-keine) — dasselbe Muster wie die leere Garage (Artboard 21):
22 px Radius, 20 px Polster, Haarstrich gestrichelt. */
--gruppen-leer-radius: 22px;
/* Der Fusssatz von 26b steht auf 12,5 px — die Stufe zwischen `--schrift-klein`
(12) und `--schrift-hinweis` (13,5), die die Leiter sonst nicht hat. */
--gruppen-fuss-schrift: 12.5px;
/* Artboard 26b setzt den Handlungsblock auf 30 px ueber der Kante. Der
allgemeine Fussfreiraum haelt die schwebende Tableiste frei — die steht
auf diesem Bildschirm nicht (TABLEISTE_SICHTBAR, public/js/app.js), und
der Raum waere reine Luft. Dieselbe Ueberlegung wie beim Wurf. */
--gruppen-fuss-abstand: 30px;
/* --- Verbindung wird aufgebaut (Artboard 25, WI-0096) ---
Zwei 60-px-Zeichen wandern in 2,6 s aufeinander zu; der Entwurf setzt sie
bei -46/+46 px an. Timing und Kurve sind die des Entwurfs. */
--verbinden-zeichen: 60px;
--verbinden-schrift: 24px;
/* Die EIGENE Scheibe auf Artboard 25: `rgba(198,113,57,.22)` mit einem Rand
auf .6. §11 fuehrt fuer Terracotta nur `--cs-accent-tint` (.14) — die App
hatte deshalb die dunklere Stufe und stand um eine Farbe neben dem
Entwurf. Gemischt aus `--color-accent`, wie das Reaktionsblatt es fuer
seine .18 schon tut: eine Deckkraft daneben zu schreiben waere ein
zweiter Terracotta-Ton. */
--verbinden-eigen-flaeche: color-mix(in srgb, var(--color-accent) 22%, transparent);
--verbinden-eigen-rand: color-mix(in srgb, var(--color-accent) 60%, transparent);
--verbinden-weg: 46px;
--verbinden-dauer: 2.6s;
/* --- Laufende Partien und der Zaehler am Reiter (Artboard 22, WI-0066) ---
Die Werte stehen im HANDOFF: der Zaehler in §4.3 (20px hoch, Pille,
11.5px/800), die Zeilen als Block-Radius aus §13 (20-26px). Die
Akzentflaeche der Einladung ist derselbe Terracotta-Schleier wie ueberall,
hier als Mischung statt als ausgeschriebenes rgba. */
--duell-offen-radius: 22px;
--duell-offen-radius-still: 20px;
--duell-offen-flaeche: var(--cs-accent-tint);
--duell-offen-rand: color-mix(in srgb, var(--color-accent) 50%, transparent);
/* Der Rand der UEBERFAELLIGEN Eroberungs-Wartezeile (Artboard 22e,
WI-0335): `rgba(198,113,57,.45)` im Entwurf — derselbe Terracotta wie
--duell-offen-rand, nur 45 statt 50 % und als Mischung statt als
ausgeschriebenes rgba. */
--duell-offen-rand-ueberfaellig: color-mix(in srgb, var(--color-accent) 45%, transparent);
--duell-offen-zeichen: 34px;
/* Die Glyphe IN dieser Scheibe (Artboard 22: `font-size: 15px`). Sie stand
bis WI-0330 nicht da, weil der Kreis geerbt hat; seit die Gegnerzeile die
getoente Avatarscheibe traegt (22-3), braucht sie ihr eigenes Mass. */
--duell-offen-zeichen-glyphe: 15px;
--duell-offen-uhr: 18px;
/* --- Die Kopfzeile von Artboard 22 (WI-0318 F-1, WI-0330 22-1) ---
Die Hoehe steht im HANDOFF §6, Zeile 22 (38-px-Pille in der Titelzeile).
Die Bilanz-Pille ist seit WI-0330 die EINZIGE dort.
HIER STANDEN `--duell-kopf-freund-flaeche`/`-rand` — die Terrakotta-Werte
der entfallenen `+ Freund`-Pille, zuletzt getragen von der gestrichelten
Zeile am Ende von „Gegner wählen". Beide Zeile und Token sind am
13.10.2026 entfallen (Rob, WI-0344, F-1 aus WI-0343): das Brett zeichnet
die Zeile nicht, und ohne sie hatte keine andere Stelle die Werte mehr
gelesen. */
--duell-kopf-pille-hoehe: 38px;
--duell-kopf-pille-schrift: 13.5px;
--zaehler-seite: 20px;
--zaehler-schrift: 11.5px;
/* §4.3: `padding: 0 6px` — damit auch eine zweistellige Zahl noch in eine
Pille passt, statt das Quadrat zu sprengen. */
--zaehler-polster: 6px;
/* Am AKTIVEN Reiter steht die Zahl hell auf dem Terracotta des Reiters, am
ruhenden auf dem Auskunftston — HANDOFF §4.3, beide Faelle ausdruecklich.
Der Ton der Schrift auf hellem Grund ist die dunkle Stufe der
Akzentrampe; ausgeschrieben stuende er hier ein zweites Mal. */
--zaehler-flaeche: var(--gruen-icon);
--zaehler-text: var(--raum-bg);
--zaehler-flaeche-aktiv: var(--btn-text);
--zaehler-text-aktiv: var(--color-accent-700);
/* --- Duell-Ergebnisring (Designspec 7.2, letzter Absatz) ---
Terracotta bleibt Aktionen vorbehalten; das Ergebnis bekommt trotzdem
eine eigene Farbe je Ausgang. Sieg nimmt den vorhandenen Erfolgston
(--gruen-icon, Kap. 4) — keine neue Farbe. Nur die Sternspitze MUSS rein
weiss sein, die Designspec nennt sie woertlich ("#a4c76b/#fff") und die
App-Palette fuehrt sonst kein reines Weiss. */
/* --- Der Rundenauftakt (Produktspec 7.3a) ---
Der Gewinnhintergrund ist `--cs-bg-win` aus HANDOFF §11. Er liegt heute
unter dem gewonnenen Auftakt; das gewonnene Duell und der gewonnene
Vergleich (Artboards 32/33/38) holen ihn sich von hier. */
--sieg-hintergrund: var(--cs-bg-win);
/* Die Zeichen: 46 px in der Wahl, 62 px im Ergebnis — daneben das Label. */
--auftakt-ikone: 46px;
--auftakt-ikone-gross: 62px;
--auftakt-name: 13.5px;
/* WI-0319 (F-12) — die Beschriftung „Du"/Gegnername ueber dem Zeichen
(Artboard 28b/28c), 10.5 px wie am Artboard gemessen. */
--auftakt-wer: 10.5px;
--auftakt-urteil: 34px;
/* Gewaehlt traegt 2 px Terracotta auf getoenter Flaeche, ungewaehlt die
Haarlinie des Seitengrunds — dieselben zwei Staerken wie ueberall sonst. */
--auftakt-rand: 1.5px solid color-mix(in srgb, var(--cs-text) 18%, transparent);
--auftakt-rand-gewaehlt: 2px solid var(--color-accent);
--auftakt-flaeche-gewaehlt: color-mix(in srgb, var(--color-accent) 16%, transparent);
--auftakt-rand-sieger: 2px solid var(--gruen-icon);
/* Auf 28c traegt die EIGENE, unterlegene Seite eine Warn-Haarlinie statt der
neutralen — der Entwurf zeichnet sie so, und sie sagt ohne Worte, welche
der beiden meine war. */
--auftakt-rand-verloren: 1.5px solid color-mix(in srgb, var(--warn-icon) 45%, transparent);
/* --- „Wer beginnt", 28d/28e (Handoff v3 §17) ---
Die Scheibe traegt den Anfangsbuchstaben dessen, der beginnt: 104 px, die
Marke darin 40 px. Der Leuchtreif sitzt 14 px darum herum — und AUSSCHLIESSLICH
auf 28d (§14 fuehrt ihn nur dort). */
--auftakt-scheibe: 104px;
--auftakt-marke: 40px;
/* Der Rand der grossen Scheibe (28d/28e). Er ist staerker als die 1,5 px
jeder anderen Avatarscheibe (§4.5b) — der Entwurf zeichnet ihn mit 2 px,
weil er hier zugleich der Traeger des Ausgangs ist. */
--auftakt-marke-rand: 2px;
--auftakt-reif-ueberstand: 14px;
--auftakt-scheibe-flaeche: color-mix(in srgb, var(--cs-text) 8%, transparent);
/* Die Aussage („Du beginnst") ist die groesste Schrift der Partie — 46 px. */
--auftakt-aussage: 46px;
--auftakt-aussage-zeile: 15px;
/* Der Fortschrittsbalken: 4 px, die Spur gedaempft, der Lauf in der Farbe
des Ausgangs. Seine Dauer ist dieselbe wie die Frist in app.js. */
--auftakt-balken: 4px;
--auftakt-balken-spur: color-mix(in srgb, var(--cs-text) 12%, transparent);
--auftakt-balken-dauer: 1.6s;
/* --- Die elf Zustaende der laufenden Partie (Artboards 29–39, WI-0095) ---
Alle Masse stehen im Entwurf; hier stehen sie EINMAL, und jedes Bauteil
unten greift ueber var() zu. Farben kommen ausnahmslos aus --cs-*. */
/* Die Raender der Partiebuehne (§5.5: `padding: 12px 20px 0`; die
Inhaltsspalte darunter sitzt bei 24–26 px). */
--partie-rand-oben: 12px;
--partie-rand-seite: 24px;
/* Kopfzeile (§5.5): Einsatz links, Runde mittig, Ausgang rechts. */
--partie-kopf-polster: 12px 20px 0;
--partie-kopf-mitte: 12.5px;
--partie-kopf-ausgang: 13px;
/* Die vier festen Saetze der Partie (§5.5b3, Artboards 31b/31c/31d;
WI-0214). Alle Masse aus dem Entwurf, hier EINMAL. */
--partie-nachricht-knopf: 34px;
--partie-nachricht-glyphe: 16px;
/* An: Rand `rgba(198,113,57,.6)` auf `rgba(198,113,57,.16)`, Glyphe
`#e8a877`. Aus: Rand `rgba(245,234,216,.2)`, durchsichtig, Glyphe
`#8d8272` (§5.5b3). Gemischt statt hingeschrieben, wie ueberall sonst —
eine Deckkraft daneben waere ein zweiter Terracotta-Ton. */
--nachricht-knopf-rand: color-mix(in srgb, var(--color-accent) 60%, transparent);
--nachricht-knopf-flaeche: color-mix(in srgb, var(--color-accent) 16%, transparent);
--nachricht-knopf-glyphe: #e8a877;
--nachricht-knopf-aus-rand: var(--cs-line-3);
--nachricht-knopf-aus-glyphe: var(--raum-text-schwach);
/* Das 2 x 2-Raster im Blatt: 58-px-Zeilen, 10 px Abstand (§6). */
--nachricht-satz-hoehe: 58px;
--nachricht-satz-radius: 18px;
--nachricht-satz-schrift: 14.5px;
--nachricht-satz-zeichen: 17px;
/* Die fliegende Pille (§5.5b3): Radius 999, 28-px-Scheibe, 15px/800,
16-px-Zeichen. */
--nachricht-pille-polster: 8px 16px 8px 8px;
--nachricht-pille-abstand: 9px;
--nachricht-pille-schrift: 15px;
--nachricht-pille-zeichen: 16px;
--avatar-nachricht: 28px;
--avatar-nachricht-glyphe: 13px;
/* Die zwei Spuren: die Hoehen, auf denen der Entwurf die zwei Pillen
zeichnet (214 px und 470 px in einem 793-px-Rahmen = 27 % / 59 %). In
Prozent, damit sie auf jeder Bildschirmhoehe dasselbe Verhaeltnis
halten — ein fester Pixelwert saesse auf einem kurzen Geraet im Fuss. */
--nachricht-spur-1: 27%;
--nachricht-spur-2: 59%;
--nachricht-flug-1: 4.4s;
--nachricht-flug-2: 5.2s;
--nachricht-wippe: 1.6s;
--nachricht-wippe-weg: 5px;
--nachricht-neigung: 3deg;
/* Die ruhige Fassung (`prefers-reduced-motion`, §5.5b3): oben mittig, 2,5 s. */
--nachricht-ruhig-oben: 12%;
--nachricht-ruhig-dauer: 2.5s;
/* Die eine erklaerende Zeile auf 31d. */
--nachricht-aus-radius: 18px;
--nachricht-aus-polster: 12px 14px;
--nachricht-aus-abstand: 11px;
--nachricht-aus-schrift: 12.5px;
/* Die halbe Karte des Vergleichs (§5.4): 150 px, Zahlen statt Balken. */
--partie-halb-breite: 150px;
--partie-halb-radius: var(--radius-md);
--partie-halb-polster: 10px;
--partie-halb-name: 16px;
--partie-halb-klasse: 11px;
/* Fotoband der Halbkarte, 150 / 58 = 2,59 (mit --partie-halb-breite). Es
steht in `FOTOBAENDER` (public/js/filterchain.js) — wer es aendert,
aendert den Zuschnitt der Filterkette mit; Begruendung an --km-foto-h. */
--partie-halb-foto: 58px;
--partie-halb-zeile: 11.5px;
--partie-halb-gespielt: 19px;
--partie-halb-rand-sieger: 0 0 0 2px var(--gruen-icon), 0 0 18px rgba(var(--sieg-farbe-glow), 0.35);
--partie-halb-rand-verlierer: 0 0 0 1.5px var(--feld-rand);
/* Die gespielte Zeile wird aus der Liste HERAUSGEHOBEN — beim Sieger gruen
gefuellt, beim Verlierer nur umrandet. */
--partie-gespielt-radius: 9px;
--partie-gespielt-polster: 6px 8px;
--partie-gespielt-flaeche: color-mix(in srgb, var(--cs-good) 18%, transparent);
--partie-gespielt-rand: 1.5px solid var(--gruen-icon);
--partie-gespielt-rand-verlierer: 1.5px solid
color-mix(in srgb, var(--warn-icon) 50%, transparent);
/* Die Urteilszeile: 23 px im Vergleich (§5.4), 34 px in der Bewegung. */
--partie-urteil: 23px;
--partie-urteil-gross: 34px;
/* Die Stapelzeile auf 29: eine kleine Rueckseite links. */
--partie-ruecken-breite: 48px;
--partie-ruecken-hoehe: 66px;
/* Das dritte Element der Stapelzeile, solange Karten im Topf liegen
(HANDOFF §5.5b6, WI-0346): derselbe lila Ton wie der EROBERT-Chip und
der Gleichstand — `--cs-r-epic` mit `--cs-epic-soft` als Schrift, kein
neuer Farbwert. */
--partie-stapel-topf-flaeche: color-mix(in srgb, var(--cs-r-epic) 14%, transparent);
--partie-stapel-topf-rand: 1px solid color-mix(in srgb, var(--cs-r-epic) 40%, transparent);
--partie-stapel-topf-radius: 12px;
/* 34 px hoch und 11 px Innenpolster — die Masse, die §5.5b6 fuer die
Bloecke der Stapelzeile ausschreibt. */
--partie-stapel-topf-hoehe: 34px;
--partie-stapel-topf-polster: 11px;
/* Der Topf (36): vier Rueckseiten fallen in die Mitte. */
--partie-topfkarte-breite: 76px;
--partie-topfkarte-hoehe: 106px;
--partie-topf-flaeche: color-mix(in srgb, var(--cs-r-legendary) 10%, transparent);
--partie-topf-rand: 1.5px solid color-mix(in srgb, var(--cs-r-legendary) 45%, transparent);
--partie-topf-titel: var(--cs-r-legendary);
--partie-topf-dauer: 900ms;
--partie-topf-versatz: 160ms;
--partie-topf-kurve: cubic-bezier(0.25, 0.9, 0.3, 1);
/* Die Ringe der gewonnenen Runde (33). Bei der verlorenen gibt es KEINE. */
--partie-ring: 300px;
--partie-ring-dauer: 1.6s;
--partie-ring-versatz: 0.55s;
--partie-karten-dauer: 1.8s;
--partie-karten-dauer-verloren: 1.9s;
--partie-karten-kurve: cubic-bezier(0.5, 0, 0.5, 1);
/* Das Ergebnis (38/39): 150 px Ring, 42 px Titel. */
--partie-ergebnis-titel: 42px;
/* --- WI-0208: die Rundenstrecke vom 06.09. (HANDOFF §22) --- */
/* Der Balken des Vergleichs (32/34) laeuft 1,4 s — kuerzer als die 1,6 s des
Auftakts, „weil der Vergleich schon gelesen ist, wenn er erscheint"
(§22.2). Die Zahl ist dieselbe wie die Frist in app.js (`STRECKE_MS`). */
--partie-balken-dauer: 1.4s;
/* Die Aufdeckung auf 31 (§5.5b, §22.4): heben 220 ms, danach 620 ms drehen.
Bei 840 ms steht das Gesicht — dort wechselt der Bildschirm. */
--partie-aufdeck-heben: 220ms;
--partie-aufdeck-drehen: 620ms;
--partie-aufdeck-kurve: cubic-bezier(0.35, 0, 0.2, 1);
/* 33b — der Wartestand. Die Karten sind erledigt, nicht taetig. */
--partie-warten-karten: 0.55;
--partie-warten-titel: 30px;
/* Der Salbei-Block „Du bist durch" — KEIN Knopf. Flaeche und Text fuehrt
§11 als --cs-good-tint / --cs-good-soft; den Rand zeichnet 33b mit .45,
also wird er aus derselben Farbe gemischt statt danebengeschrieben —
dieselbe Bauart wie --gruen-rand und --reaktion-pille-rand. */
--partie-durch-hoehe: 48px;
--partie-durch-flaeche: var(--cs-good-tint);
--partie-durch-rand: color-mix(in srgb, var(--cs-good) 45%, transparent);
--partie-durch-text: var(--cs-good-soft);
--partie-durch-haken: 17px;
--sieg-farbe: var(--gruen-icon);
--sieg-farbe-glow: 164, 199, 107;
--sieg-stern-hell: var(--qr-hell);
--niederlage-farbe: var(--raum-text-gedaempft);
--ergebnis-ring-schein: 0 0 26px rgba(var(--sieg-farbe-glow), 0.6);
--duell-funke-dauer-min: 1.3s;
--duell-funke-dauer-max: 1.9s;
--duell-stern-dauer-min: 1.5s;
--duell-stern-dauer-max: 2s;
}
/* --- Seltenheit: was aus der Farbe folgt (Kap. 5) ---
*
* WARUM DIESE SECHS NICHT IM :root-BLOCK DARUEBER STEHEN: ein `var()` in einer
* EIGENEN Eigenschaft wird dort eingesetzt, wo die Eigenschaft DEKLARIERT ist,
* nicht dort, wo sie benutzt wird. Am `:root` allein waeren sie fertig
* gerechnet — und die Karte, die weiter unten ihren eigenen Ton setzt, erbte
* den fertigen Wert statt der Vorschrift. Genau daran hingen bis WI-0048 die
* fehlende Balkenfuellung, der fehlende Kantenschein, die farblosen Flaechen
* von Kopfbalken und Gruppenkreis und der unsichtbare Streifen der
* Garagenkachel.
*
* Deshalb steht die Vorschrift hier ZWEIMAL zur Auswertung, aber nur EINMAL
* geschrieben: am `:root` rechnet sie mit der neutralen Vorstufe, und an jedem
* Element mit `data-stufe` — das ist das seltenheitsgefuehrte Element, an dem
* public/js/design.js ueber card.faerbe() Ton und Attribut gemeinsam setzt —
* rechnet sie neu mit dessen Ton. Wer eine dieser Eigenschaften braucht,
* benutzt weiter denselben Tokennamen; es gibt keinen zweiten Weg daneben. */
:root,
[data-stufe] {
--kante-gefaerbt: 0 0 0 2.5px var(--r-g), inset 0 0 40px rgba(var(--r-glow), 0.12),
0 0 26px rgba(var(--r-glow), 0.45), var(--cs-shadow-card);
/* Dieselbe Kante eine Stufe kraeftiger — die maximierte Karte des
Doppeltipps (Artboard 15b, §17: Rahmen 3px, inset 52px/.14, Schein
44px/.5). Sie steht allein auf dem Schirm und traegt deshalb mehr. */
--km-kante-gefaerbt: 0 0 0 3px var(--r-g), inset 0 0 52px rgba(var(--r-glow), 0.14),
0 0 44px rgba(var(--r-glow), 0.5), var(--cs-shadow-card);
--glow-flaeche: rgba(var(--r-glow), 0.16);
--balken-fuellung: linear-gradient(90deg, var(--r-c), var(--r-g));
--balken-glow: 0 0 6px rgba(var(--r-glow), 0.6);
--silhouette-glow: drop-shadow(0 0 8px rgba(var(--r-glow), 0.55));
--halo: radial-gradient(ellipse at 50% 45%, rgba(var(--r-glow), 0.22), transparent 62%);
}
/* == TOKEN-BLOCK: ENDE == */
/* --------------------------------------------------------------------------
* Grundlage
* ------------------------------------------------------------------------ */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: var(--raum-bg);
color: var(--raum-text);
font-family: var(--font-body);
font-size: var(--schrift-fliess);
line-height: var(--zeilenhoehe-fliess);
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
letter-spacing: var(--laufweite-heading);
margin: 0;
}
h1 {
font-size: var(--schrift-h1);
}
h2 {
font-size: var(--schrift-h2);
}
h3 {
font-size: var(--schrift-h3);
}
h4 {
font-size: var(--schrift-h4);
}
h5 {
font-size: var(--schrift-h5);
}
h6 {
font-size: var(--schrift-h6);
text-transform: uppercase;
letter-spacing: var(--laufweite-versal);
}
p {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Ikonen tragen ihre Groesse hier, nicht als width/height am Element — sonst
* stuende wieder ein roher Wert im Bauteil. */
.ikone {
flex: none;
width: var(--icon-gross);
height: var(--icon-gross);
}
.ikone--schild {
width: var(--icon-klein);
height: var(--icon-klein);
}
.ikone--haken {
width: var(--icon-winzig);
height: var(--icon-winzig);
}
.app {
position: relative;
min-height: 100dvh;
/* Die Systemraender (WI-0417): JEDER Bildschirm liegt in `.app__buehne`,
und die beginnt damit unter Statusleiste und Dynamic Island und endet
ueber dem Home-Indikator. Der Grund darunter laeuft von Kante zu Kante
weiter. */
padding-top: var(--sicher-oben);
padding-bottom: var(--sicher-unten);
background: var(--raum-verlauf);
display: flex;
flex-direction: column;
}
/* DIE ZWEI SONDERGRUENDE AUS §11 (WI-0188). Der Entwurf malt sie auf den
RAHMEN des Artboards — unter allem, von Kante zu Kante —, und genau das ist
diese Stelle: `#app` ist die einzige Flaeche, die den ganzen Bildschirm
traegt. Welchen Grund ein Bildschirm braucht, sagt er selbst an `data-raum`;
public/js/app.js hebt den Wert hierher.
`--cs-bg-stage` ist die Buehne, auf der gewartet wird (Artboard 25, dieselbe
wie 08); `--cs-bg-win` liegt unter dem gewonnenen Auftakt (28d). Beide sind
Token aus §11 und standen bis hierher an keinem Bildschirm. */
.app[data-raum='buehne'] {
background: var(--cs-bg-stage);
}
.app[data-raum='sieg'] {
background: var(--sieg-hintergrund);
}
.app__buehne {
flex: 1;
width: 100%;
max-width: var(--buehne-max);
margin: 0 auto;
padding: var(--buehne-oben) var(--buehne-seite) var(--buehne-unten);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Die Kartenseite (WI-0038): Hier steht die Karte unter Platzdruck, deshalb
endet die Buehne dicht ueber der schwebenden Leiste statt am allgemeinen
Fussfreiraum. Was dadurch frei wird, nimmt die Karte — verdeckt wird nichts,
denn --karte-fuss deckt die Leiste samt Abstand vollstaendig ab. */
.app__buehne[data-bildschirm='karte'] {
/* Oben traegt seit WI-0055 die Kopfzeile mit dem Schliessen-Kreuz den
Abstand zur Bildkante; das allgemeine Polster kaeme oben drauf und ginge
der Karte verloren. */
padding-top: var(--kd-rand-oben);
padding-bottom: var(--karte-fuss);
/* Die Kante, an der die gewischte Kartenseite verschwindet (WI-0051). Ohne
sie waere der herausgleitende Block scrollbare Breite und das Handy
bekaeme einen waagerechten Balken. `clip` statt `hidden`: `hidden` machte
die Buehne zum Scrollbehaelter und naehme der Seite das senkrechte
Scrollen. Der Schnittrand laesst den Kartenschein stehen, damit die
Ruhelage aussieht wie vorher. */
overflow-x: clip;
overflow-clip-margin: var(--wisch-schnitt-rand);
}
/* DIE RAENDER DES AUFDECKBILDSCHIRMS (WI-0097, Artboard 13).
Der Entwurf setzt ihn auf `16px 26px 0` mit dem Aktionsblock bei `bottom:
26` — er zeigt KEINE Tableiste, und der allgemeine Fussfreiraum von 96px
(der die schwebende Leiste freihaelt) war hier deshalb reine Luft. Oben
dasselbe: die Augenbraue „NEUE KARTE" steht im Entwurf dicht an der Kante,
nicht ein volles Polster darunter. */
.app__buehne[data-bildschirm='wurf'] {
padding: var(--space-2) var(--datenblock-fuge) var(--space-6);
}
/* DER FUSS VON ARTBOARD 26b (WI-0180) — derselbe Gedanke wie beim Wurf: der
Bildschirm zeigt keine Tableiste, der allgemeine Fussfreiraum hielte sie
umsonst frei, und der Entwurf setzt den Handlungsblock auf 30 px ueber der
Kante. */
.app__buehne[data-bildschirm='gruppenwahl'] {
padding-bottom: var(--gruppen-fuss-abstand);
}
/* Dasselbe fuer die beiden Wahlbildschirme des Garagenfilters (20b/20c): auch
sie tragen keine Tableiste, und die 90px, die fuer sie frei blieben, kosten
genau das, was diese Bildschirme brauchen — Listenzeilen. Der Entwurf fuehrt
die Liste auf beiden Artboards bis dicht an die untere Kante. */
.app__buehne[data-bildschirm='garage_marke'],
.app__buehne[data-bildschirm='garage_fundzeit'] {
padding-bottom: var(--wahlseite-fuss);
}
.gestapelt {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.mittig {
text-align: center;
align-items: center;
}
/*
* DIE KLEINE VERSALZEILE UEBER EINER GRUPPE (HANDOFF §4.6 und §12, Zeile
* „Section label"): 11 px, Gewicht 800, .08em Laufweite, versal,
* --cs-text-dim. Der Entwurf schreibt damit JEDEN Abschnitt an — „Wartet auf
* dich", „Gegner wählen", „Dein Code", „Deckgröße".
*
* SIE IST EIN ETIKETT, KEINE UEBERSCHRIFT ZWEITER ORDNUNG, und deshalb eine
* Klasse auf dem vorhandenen h4 statt eines neuen Tags: die Gliederung des
* Dokuments bleibt, wie sie war (h3 Bildschirmtitel, h4 Abschnitt), nur das
* Aussehen folgt dem Entwurf. Der h4-Grad der Skala (20 px) bleibt fuer alles
* andere unveraendert.
*
* IHR TON — ERLEDIGT MIT WI-0340. Der Entwurf faerbt sie im HTML mit
* #a89c88. Bis WI-0340 stand hier --cs-text-dim, weil §4.6 und §12 beide
* dieses Token nennen und §11 #a89c88 gar nicht fuehrte: §7 Punkt 12
* verbietet einem Bauteil, sich einen eigenen Ton auszudenken, also wurde der
* naechstliegende vorhandene genommen und die Abweichung als Befund gemeldet
* (WI-0337/WI-0338: 49 der 171 Farbabweichungen hingen daran). Die Luecke ist
* geschlossen — HANDOFF §16.7 („Add `#A89C88` as `label`", 01.10.2026) fuehrt
* den Ton seit WI-0340 als --cs-label in §11, und die Zeile bindet daran.
* Dass §4.6/§12 im Fliesstext weiter --cs-text-dim nennen, ist die AELTERE
* Stelle; die datierte Entscheidung in §16.7 geht vor.
*/
/*
* DER TITEL EINES REITER-BILDSCHIRMS (HANDOFF §12, Zeile „Screen title
* (tab)"): 28 px in der Ueberschriftenfamilie. Die Skala fuehrt zwischen h2
* (32 px, „Screen title (flow)") und h3 (25 px, „Sheet title") keinen Grad
* dafuer — der Entwurf zeichnet die Duell-Bildschirme aber genau dazwischen.
* Deshalb eine Klasse auf dem vorhandenen h3 statt eines neuen Grades in der
* Skala: die Skala kommt aus dem Handoff und wird nicht von Hand ergaenzt
* (public/css/tokens.css, Kopf).
*/
.bildschirm-titel {
font-size: var(--schrift-titel-reiter);
}
.abschnitt {
font-family: var(--font-body);
font-size: var(--schrift-abschnitt);
font-weight: var(--gewicht-fett);
letter-spacing: var(--laufweite-versal);
line-height: var(--zeilenhoehe-fliess);
text-transform: uppercase;
color: var(--raum-text-etikett);
}
.meta {
color: var(--raum-text-meta);
font-size: var(--schrift-klein);
}
/* „Body small", untere Stufe (§12: 13–14,5 px). Der Entwurf setzt darauf die
erklaerenden Zeilen unter einem Absatz — die Unterzeile des Deckbaus, den
Satz zur Elternmail auf dem gesperrten Duell. */
.hinweis {
font-size: var(--schrift-hinweis);
color: var(--raum-text-gedaempft);
line-height: var(--zeilenhoehe-fliess);
}
/* Die Zeile, die eine Zahl traegt (§12 „Body small", obere Stufe). */
.zeile {
font-size: var(--schrift-zeile);
color: var(--raum-text);
font-weight: var(--gewicht-kraeftig);
}
.gedaempft {
color: var(--raum-text-gedaempft);
}
.fliess {
color: var(--raum-fliess);
}
/* --------------------------------------------------------------------------
* Knoepfe, Felder — Terracotta ist die EINZIGE Aktionsfarbe (Kap. 1)
* ------------------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--btn-hoehe);
padding: 0 var(--space-6);
border: 0;
border-radius: var(--radius-pille);
background: var(--color-accent);
color: var(--btn-text);
font-family: var(--font-body);
font-size: var(--btn-schrift);
font-weight: var(--gewicht-fett);
box-shadow: var(--btn-glow);
cursor: pointer;
}
.btn[disabled] {
box-shadow: none;
cursor: not-allowed;
}
/* Die HAUPTAKTION im ausgeschalteten Zustand — §4.5 „Primary disabled".
Sie traegt eine eigene Flaeche und eine eigene Schriftfarbe, keine
Deckkraft (siehe --btn-flaeche-aus im Token-Block). */
.btn[disabled]:not(.btn--ghost):not(.btn--ghost-warn):not(.btn--gestrichelt):not(.btn--fuellen) {
background: var(--btn-flaeche-aus);
color: var(--btn-text-aus);
}
/* Die zurueckgenommenen Formen haben keine Flaeche, die blasser werden
koennte — sie bleiben bei der Deckkraft. */
.btn--ghost[disabled],
.btn--ghost-warn[disabled],
.btn--gestrichelt[disabled],
.btn--fuellen[disabled] {
opacity: var(--deaktiviert-deckkraft);
}
.btn--ghost {
min-height: var(--btn-hoehe-ghost);
font-size: var(--btn-schrift-ghost);
font-weight: var(--gewicht-kraeftig);
background: transparent;
border: var(--ghost-rand);
color: var(--ghost-text);
box-shadow: none;
}
/* Der warnende Ghost (WI-0070, Artboard 17) — dieselbe Form, warmer Rand und
warme Schrift. Er steht dort, wo ein Knopf etwas WEGNIMMT. */
.btn--ghost-warn {
border: var(--ghost-warn-rand);
color: var(--ghost-warn-text);
}
.btn--gestrichelt {
min-height: var(--btn-hoehe-ghost);
background: transparent;
border: var(--karte-rand) dashed var(--feld-rand);
color: var(--ghost-text);
font-weight: var(--gewicht-halb);
box-shadow: none;
}
.btn--voll {
width: 100%;
}
/* DIE PILLE `Weitere Kartendetails` (WI-0114, Artboards 14 und 15, §17).
Seit v3 der einzige Weg in die Detailansicht mit Wurf und Besitzerkette.
Sie ist die HAUPTAKTION ihres Blocks und sieht danach aus — ohne der volle
Terracotta-Knopf zu sein: der bleibt den Wegen vorbehalten, die etwas
veraendern (Kap. 1, „Terracotta ist die einzige Aktionsfarbe"). Deshalb
Akzentfuellung und warmer Rand statt Flaeche, und deshalb kein Schein. */
.btn--details {
min-height: var(--details-hoehe);
background: var(--cs-accent-tint);
border: var(--karte-rand) solid var(--details-rand);
color: var(--details-text);
font-size: var(--btn-schrift-ghost);
box-shadow: none;
}
/* Die Balkendiagramm-Ikone links in der Pille: sie steht fuer die
Werte-Auskunft dahinter, nicht fuers Vergroessern. */
.ikone--balken {
width: var(--details-ikone);
height: var(--details-ikone);
flex: none;
color: var(--warn-icon);
}
.link {
background: none;
border: 0;
padding: 0;
color: var(--raum-text-gedaempft);
font-family: var(--font-body);
font-size: var(--schrift-klein);
text-decoration: underline;
cursor: pointer;
}
.feld {
width: 100%;
min-height: var(--btn-hoehe);
padding: 0 var(--space-4);
border: var(--karte-rand) solid var(--feld-rand);
border-radius: var(--radius-pille);
background: var(--feld-flaeche);
color: var(--raum-text);
font-family: var(--font-body);
font-size: var(--btn-schrift);
}
.feld::placeholder {
color: var(--raum-text-schwach);
}
.feldgruppe {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/* Die BESCHRIFTUNG einer Feldgruppe steht in Versalien (HANDOFF §12, h6).
Eine Meta-Zeile daneben — der Zeichenzaehler unter dem Beschreibungsfeld,
die Zeile unter „Bild dazu" (Artboard 46) — ist KEINE Beschriftung und
bleibt in normaler Schreibung; sonst schriee der Zaehler lauter als das
Feld, zu dem er gehoert. */
.feldgruppe > span:not(.meta) {
font-size: var(--schrift-h6);
text-transform: uppercase;
letter-spacing: var(--laufweite-versal);
color: var(--raum-text-etikett);
}
.hinweis--gruen {
background: var(--gruen-flaeche);
border: var(--karte-rand) solid var(--gruen-rand);
border-radius: var(--radius-md);
color: var(--gruen-text);
padding: var(--space-3);
font-size: var(--schrift-klein);
}
/* Derselbe Kasten MIT dem Stern davor (Artboard 12, WI-0068). Eigene Klasse
und nicht am Grundbauteil: die Loeschabfrage (Artboard 17) fuehrt in
demselben Kasten Fliesstext mit einer fetten Stelle darin — als Flexzeile
stuende ihre Hervorhebung neben dem Satz statt darin. */
.hinweis--gruen--zeichen {
display: flex;
gap: var(--space-3);
}
.hinweis--gruen--zeichen .ikone--stern {
width: var(--icon-klein);
height: var(--icon-klein);
color: var(--gruen-icon);
}
.blatt {
background: var(--blatt-flaeche);
border: var(--karte-rand) solid var(--blatt-rand);
border-radius: var(--radius-karte);
padding: var(--space-6) var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
box-shadow: var(--shadow-lg);
}
.blatt--unten {
margin-top: auto;
}
/* --------------------------------------------------------------------------
* Die Seite und ihr Aktionsblock (HANDOFF §4.2/§4.4, WI-0068)
*
* Der Entwurf verankert die Hauptaktion jeder Ablaufseite UNTEN: Inhalt oben,
* `margin-top:auto` am Aktionsblock, darunter der Fussabstand. Ohne das stand
* auf `11-scan-pick-model` 276 px und auf `12-scan-manual-entry` 370 px
* ungenutzter Raum unter den Knoepfen — und der Daumen musste in die
* Bildschirmmitte greifen (Designspec 10.3 Punkt 1).
* ------------------------------------------------------------------------ */
.seite {
flex: 1;
min-height: 0;
}
.aktionsblock {
margin-top: auto;
padding-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* --------------------------------------------------------------------------
* Start
* ------------------------------------------------------------------------ */
.start {
justify-content: center;
gap: var(--space-6);
}
/* Artboard 01 zentriert seinen Inhalt senkrecht (`justify-content: center`
ueber die volle Hoehe). Damit das Zentrieren ueberhaupt greift, muss der
Block die Buehne AUSFUELLEN — sonst ist er nur so hoch wie sein Inhalt und
„zentriert" ihn in sich selbst. Das fiel erst mit WI-0171 auf: bis dahin
fuellten Zeichenraster und Altersstufen die Hoehe von allein, und seit die
beiden eigene Schritte sind, ist der Bildschirm kurz.
Nur der Startbildschirm: `.start` traegt auch der Anmeldeweg mit dem Code
und der Codebildschirm, und beide stehen so, wie ihr Entwurf sie zeichnet. */
.app__buehne[data-bildschirm='start'] .start {
flex: 1;
}
/* DIE MARKE AUF ARTBOARD 01 — SEIT WI-0223 DAS APP-ICON, NICHT DIE KAMERA.
`.start__kreis` ist seit WI-0045 der Platz der Marke auf 01; der Name
bleibt, der Inhalt ist getauscht. Was hier WEGFAELLT, ist die
Terracotta-Scheibe samt Glut: sie war der Rahmen des Kameraglyphs, und
Terracotta gehoert der AKTION (Designspec Kap. 11) — der Entwurf zeichnet
an dieser Stelle nur das Icon, ohne Flaeche darunter. Die Tokens
`--start-kreis*` bleiben, weil das Skelett sie weiter fuehrt (die Scheibe
auf 03 ist mit WI-0302 fort). */
.start__kreis {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Das Icon selbst. Die Datei bringt ihre Rundung als Clip-Pfad schon mit —
der Radius steht hier trotzdem, weil er im Entwurf am Element steht und
nicht an der Datei: wer die Datei eines Tages austauscht, soll die Ecken
nicht verlieren. */
.start__marke {
display: block;
width: var(--start-marke);
height: var(--start-marke);
border-radius: var(--start-marke-radius);
}
.start__titel {
font-family: var(--font-heading);
font-size: var(--start-titel);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
letter-spacing: var(--laufweite-heading);
}
/* --------------------------------------------------------------------------
* DER NAMENSSCHRITT GEGEN DAS OKTOBER-BRETT — 01, 01e, 01f (WI-0281, IG-03)
*
* Das Brett zeichnet drei Lagen uebereinander, und `.start` selbst bekommt
* keine davon: die Klasse traegt auch der Altzugang (`altzugang`, `zettel`,
* IG-01), und eine Regel an ihr nahm die beiden mit, ohne dass sie gemessen
* wuerden. Alles Neue haengt deshalb an `.start__*` bzw. an den drei geteilten
* Bauteilen aus WI-0279 (`.kopfweg`, `.anmeldefuss`, `.warnzeile`).
* ------------------------------------------------------------------------ */
/* Die Mitte: Icon, Titel, Frage, Feld, Meldeplatz und Fussabsatz, mittig
ueber die freie Hoehe — `flex:1;justify-content:center` wie im Brett. Feld,
Meldeplatz und Fussabsatz stehen darin auf voller Breite (`align-self:
stretch` im Brett), der Rest mittig. */
.start__mitte {
flex: 1;
min-height: 0;
justify-content: center;
gap: var(--space-2);
}
/* Das Icon hat im Brett 24 px Luft nach unten — mehr als die Luecke des
Stapels, und es ist die einzige Stelle mit einem eigenen Abstand. */
.start__kreis {
margin-bottom: var(--space-3);
}
.start__feld {
align-self: stretch;
}
/* DER PLATZ UNTER DEM FELD, 38 px — auch leer (Artboard 01). Dieselbe Hoehe
wie auf `00` und aus demselben Grund: der Fussblock darf beim ersten zu
kurzen Namen nicht wandern. Deshalb auch dasselbe Token — zwei Zahlen fuer
dieselbe gezeichnete Hoehe waeren zwei Wahrheiten. */
.start__meldung {
align-self: stretch;
display: flex;
flex-direction: column;
min-height: var(--einstieg-meldung-hoehe);
}
/* BEIDE SAETZE STEHEN VORGEZEICHNET IM PLATZ und werden nur ein- und
ausgeblendet (siehe `startNameEl`). `hidden` ALLEIN reicht dafuer nicht:
`.warnzeile` setzt selbst `display:flex`, und eine Autorenregel sticht das
`display:none`, das der Browser dem Attribut mitgibt — die Absage aus `01e`
stand damit auch auf `01` da, bei leerem Feld, und das Referenzbild hat es
gezeigt. Dieselbe Bauart wie `.tableiste[hidden]` und `.toast[hidden]`. */
.start__meldung > [hidden] {
display: none;
}
/* `01f`: die Auskunft zur schon gewaehlten Farbe. Kein Warnton — sie sagt,
dass etwas BLEIBT, und `--cs-warn` gehoert der Absage daneben. */
.start__farbe {
margin: 0;
text-align: left;
/* Derselbe gedaempfte Ton wie der Fussabsatz darunter — das Brett faerbt
beide Zeilen auf `01f` mit #8d8272. */
color: var(--raum-text-schwach);
}
/* Der Schutzsatz unter dem Feld (Artboards 01/01e/01f). Er steht im Brett
LINKS und im gedaempften Ton `--cs-text-dim` — `01` fuehrt `dim` in
design/colours.json als tragende Farbe, und bis WI-0281 fehlte sie dem
Bildschirm. Vor WI-0281 stand der Satz zentriert unter dem Knopf; das
Oktober-Brett setzt ihn ueber den Fussblock, weil der Knopf dort den
unteren Rand haelt. */
.start__fuss {
align-self: stretch;
margin: 0;
text-align: left;
color: var(--raum-text-schwach);
}
/* Die Fusszeile „Drei bis sechzehn Zeichen." traegt im Brett denselben
gedaempften Ton. Die Regel bleibt auf den Namensschritt BESCHRAENKT: die
acht Geschwister aus WI-0279 teilen dieses Bauteil, ihre Artboards zeichnen
den Ton genauso — aber sie sind nicht dieses Item, und ihre App-Seite ist
nicht aufgenommen. Die allgemeine Korrektur gehoert dem Item, das sie
besitzt; gemeldet ist sie im Bericht. */
.start .anmeldefuss__note {
color: var(--raum-text-schwach);
}
/* --------------------------------------------------------------------------
* Anmeldung, Schritt 2 und 3 — Artboards 01b und 02 (WI-0171)
* ------------------------------------------------------------------------ */
/* DIE BEIDEN FOLGESCHRITTE, und warum sie nicht `.start` benutzen.
`.start` zentriert seinen Inhalt (Artboard 01 tut das auch). 01b und 02
sind dagegen von OBEN gesetzt, mit einem `margin-top: auto` vor der
Aktionsgruppe — genau das, was Designspec Kap. 10.3 Punkt 1 und 3
verlangen: die Hauptaktion im unteren Drittel, und kein leerer Raum
darunter, wo das Geraet mehr hergibt. */
.anmeldung {
flex: 1;
justify-content: flex-start;
padding-top: var(--space-4);
gap: var(--space-3);
}
.anmeldung__titel {
margin: 0;
font-family: var(--font-heading);
font-size: var(--schrift-h2);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
}
/* Die Vorschau: Scheibe und Name untereinander, mittig (01b). */
.anmeldung__vorschau {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) 0;
}
/* Auf 02 steht dieselbe Scheibe allein und links — der Entwurf zeigt dort,
WAS gewaehlt wurde, und bietet keine zweite Wahl an. */
.anmeldung__vorschau--zeile {
flex-direction: row;
align-items: center;
align-self: flex-start;
}
.anmeldung__name {
font-family: var(--font-heading);
font-size: var(--schrift-h4);
}
/* Der Satz ueber dem Knopf schiebt die Aktionsgruppe nach unten. */
.anmeldung__fuss {
margin: auto 0 0;
}
/* --------------------------------------------------------------------------
* DIE E-MAIL-ANMELDUNG — Artboards 00, 00b–00l, 06b–06f (WI-0279)
*
* DREI REGELN GELTEN AUF ALLEN SIEBZEHN, und sie sind Designspec Kap. 10.3:
*
* 1. Die Hauptaktion liegt UNTEN. Jeder dieser Bildschirme schiebt seinen
* Aktionsblock mit `margin-top: auto` an den Fuss — kein fester Abstand,
* der auf 393 x 793 zufaellig passt.
* 2. Jeder hat einen sichtbaren Rueckweg. Entweder die Zurueck-Zeile am
* Kopf (`.kopfweg`) oder einen Nebenweg im Fuss; `06c` ist die eine
* begruendete Ausnahme — dort ist nichts zu entscheiden.
* 3. Keine feste Hoehe, wo das Geraet mehr hergibt: `flex: 1` auf dem
* Block, `min-height` statt `height` auf den Plaetzen, die ihre Hoehe
* auch leer behalten muessen.
*
* KEINE HARTKODIERTEN WERTE. Farben kommen aus `--cs-*` bzw. den Aliassen im
* Token-Block, Abstaende aus `--space-*`, Radien aus `--radius-*` und den
* Masse-Tokens darueber. Fehler tragen AUSSCHLIESSLICH `--warn-icon`
* (`--cs-warn`) und `--warn-flaeche` (`--cs-warn-tint`) — Terracotta bleibt
* der Aktion vorbehalten.
* ------------------------------------------------------------------------ */
/* Keine Tableiste, also kein Platz fuer eine: diese Bildschirme enden dicht
ueber der unteren Kante, wie der Entwurf sie zeichnet (siehe
--anmelde-fuss).
`start` STEHT SEIT WI-0281 GANZ IN DIESER LISTE. WI-0279 hat die Auswahl
bewusst auf `[data-stand]` verengt — also auf die vier Anlagezustaende
`06c`–`06f` —, weil der Namensschritt `01` damals nicht umgebaut werden
durfte und mit seinem Fuss auch sein Referenzbild gewandert waere. Das ist
jetzt der Auftrag: Artboard `01` setzt seinen Aktionsblock auf
`padding-bottom:30px`, eine Tableiste steht hier so wenig wie auf den
anderen sechzehn, und die 90 px von `--buehne-unten` waeren genau die
leere Luft unter dem Hauptknopf, die Designspec Kap. 10.3 Punkt 3
verbietet. Mit der ganzen Auswahl springt der Bildschirm beim Wechsel
zwischen `01` und `06c`–`06f` ausserdem nicht mehr. */
/* `konto_email` STEHT MIT IN DIESER LISTE (WI-0287, Artboards 43b/43c).
Beide Bretter setzen ihren Aktionsblock auf `padding-bottom:30px`, und eine
schwebende Tableiste gibt es hier nicht: `konto_email` steht so wenig in
`TABLEISTE_SICHTBAR` wie `konto` selbst (public/js/app.js). Die 90 px von
`--buehne-unten` waeren damit genau die leere Luft unter dem Hauptknopf,
die Designspec Kap. 10.3 Punkt 3 verbietet — die 90-px-Zusage des Entwurfs
gilt dort, wo die Leiste WIRKLICH schwebt. */
.app__buehne[data-bildschirm='anmelden'],
.app__buehne[data-bildschirm='code'],
.app__buehne[data-bildschirm='umstieg'],
.app__buehne[data-bildschirm='botcheck'],
.app__buehne[data-bildschirm='konto_email'],
.app__buehne[data-bildschirm='start'] {
padding-bottom: var(--anmelde-fuss);
}
/* Die Zurueck-Zeile am Kopf von 00b, 00c, 00g–00j und 06d. Sie ist ein KNOPF
und sieht nicht danach aus: der Entwurf zeichnet sie als Textzeile mit
Winkel, ohne Flaeche und ohne Rand. */
.kopfweg {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--space-2);
min-height: var(--kopfweg-hoehe);
padding: 0;
border: 0;
background: none;
color: var(--raum-fliess);
font-family: var(--font-body);
font-size: var(--schrift-zeile);
font-weight: var(--gewicht-kraeftig);
cursor: pointer;
}
/* EIGENE KLASSE, NICHT `.ikone--winkel`: die gehoert dem Winkel nach RECHTS
am Ausgang des Kontobildschirms (Artboard 43). Eine gemeinsame Regel haette
diesem Zeichen hier eine Groesse gegeben — und damit dem anderen dort, ohne
dass es jemand gemessen haette. */
.ikone--kopfweg {
width: var(--kopfweg-zeichen);
height: var(--kopfweg-zeichen);
flex: none;
}
/* Der Fussblock: Hauptknopf, Nebenweg, Fusszeile — in dieser Reihenfolge und
am unteren Rand. Die beiden unteren Plaetze behalten ihre Hoehe, auch wenn
sie leer sind (siehe --anmeldefuss-note im Token-Block). */
.anmeldefuss {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: auto;
}
.anmeldefuss__neben {
display: flex;
flex-direction: column;
min-height: var(--btn-hoehe-ghost);
}
.anmeldefuss__note {
margin: 0;
min-height: var(--anmeldefuss-note);
text-align: center;
}
/* Der Hinweiskasten mit Zeichen links. Dieselbe Flaeche und derselbe Rand wie
jedes andere Blatt der App (--cs-fill-1 / --cs-line-2), nur mit dem
groesseren Radius, den der Entwurf diesen Kaesten gibt. */
.anmeldekasten {
display: flex;
gap: var(--space-3);
padding: var(--anmeldekasten-polster-y) var(--anmeldekasten-polster-x);
border: var(--karte-rand) solid var(--blatt-rand);
border-radius: var(--anmeldekasten-radius);
background: var(--cs-fill-1);
}
/* Der WARNENDE Kasten (Artboard 00j, das Stundenlimit). Flaeche und Rand aus
dem Warnton — und ausdruecklich nicht aus Terracotta: das Limit ist ein
Zustand, keine Aktion (Designspec Kap. 9). */
.anmeldekasten--warn {
border-color: var(--warn-icon);
background: var(--warn-flaeche);
}
.anmeldekasten__text {
display: flex;
flex-direction: column;
gap: var(--space-1);
color: var(--raum-fliess);
font-size: var(--schrift-hinweis);
line-height: var(--zeilenhoehe-fliess);
}
.anmeldekasten__kopf {
color: var(--raum-text);
}
.ikone--brief,
.ikone--uhr,
.ikone--schloss-klein {
width: var(--anmeldekasten-zeichen);
height: var(--anmeldekasten-zeichen);
flex: none;
color: var(--raum-text-hell);
}
.anmeldekasten--warn .ikone--uhr {
color: var(--warn-icon);
}
/* Die Warnzeile unter einem Feld (00d, 00f). Sie steht im Platz, den
`.einstieg__meldung` ohnehin frei haelt — sie schiebt nichts. */
.warnzeile {
display: flex;
gap: var(--space-2);
margin: 0;
color: var(--warn-icon);
font-size: var(--schrift-hinweis);
line-height: var(--zeilenhoehe-fliess);
text-align: left;
}
.warnzeile .ikone {
width: var(--icon-klein);
height: var(--icon-klein);
flex: none;
}
/* --- 00, 00d, 00e, 00f, 00k: der Einstieg --- */
/* Der Inhalt steht MITTIG ueber der ganzen Hoehe, der Aktionsblock am Fuss —
genau so zeichnet es der Entwurf (`flex:1` auf dem Mittelteil,
`margin-top:auto` auf dem Fuss). */
.einstieg {
flex: 1;
gap: var(--space-3);
}
.einstieg__mitte {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-2);
}
.einstieg__marke {
display: block;
width: var(--einstieg-marke);
height: var(--einstieg-marke);
border-radius: var(--einstieg-marke-radius);
margin-bottom: var(--space-3);
}
.einstieg__titel {
margin: 0;
font-family: var(--font-heading);
font-size: var(--start-titel);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
letter-spacing: var(--laufweite-heading);
}
.einstieg__frage {
margin: 0 0 var(--space-2);
}
/* Das Feld traegt auf 00 den AKZENTRAHMEN des Entwurfs: es ist die eine
Stelle, an der etwas eingegeben wird, und der Rahmen sagt genau das. Er ist
eine Markierung, keine Flaeche — Terracotta bleibt der Aktion. */
.einstieg__feld {
align-self: stretch;
border-color: var(--einstieg-feld-rand);
text-align: center;
}
/* Waehrend des Versands (00e) tritt das Feld zurueck: der Entwurf nimmt ihm
Rahmen und Tinte, weil daran gerade nichts zu aendern ist. */
.einstieg__feld[disabled] {
border-color: var(--blatt-rand);
background: var(--cs-fill-1);
color: var(--raum-text-gedaempft);
}
/* Bei abgewiesener Adresse (00d) traegt es den Warnton — Rand UND Flaeche,
wie der Entwurf sie setzt. Als MODIFIKATOR am Feld und nicht als Regel am
Stand der Buehne: dasselbe Feld steht auf 00l, und dort traegt die Buehne
keinen Stand (00l ist ein eigener Bildschirm, kein Zustand von 00). */
.feld--warn {
border-color: var(--warn-icon);
background: var(--warn-flaeche);
}
/* Der Platz der Meldung. Er steht auch leer (siehe Kopf dieses Abschnitts). */
.einstieg__meldung {
align-self: stretch;
display: flex;
min-height: var(--einstieg-meldung-hoehe);
}
.einstieg__zusicherung {
align-self: stretch;
margin: 0;
text-align: center;
}
/* Der kleine Kreisel im Knopf von 00e und in der Meldung von 00g. Er ist
dasselbe Bauteil an zwei Stellen; die Farbe erbt er. */
.kreisel {
width: var(--kreisel-mass);
height: var(--kreisel-mass);
flex: none;
border: var(--kreisel-strich) solid var(--cs-line-4);
border-top-color: currentColor;
border-radius: var(--radius-pille);
animation: kreisel-dreht var(--anlage-ring-dauer) linear infinite;
}
@keyframes kreisel-dreht {
to {
transform: rotate(360deg);
}
}
/* --- 00b, 00c, 00g, 00h, 00i, 00j: das Postfach --- */
.postfach {
flex: 1;
gap: var(--space-3);
}
.postfach__titel {
margin: 0;
font-family: var(--font-heading);
font-size: var(--schrift-h2);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
}
.postfach__an {
margin: 0 0 var(--space-2);
}
/* Die vier Kaestchen. Das Feld darueber ist UNSICHTBAR, aber bedienbar: es
deckt die Reihe vollstaendig ab, damit ein Tipp irgendwo auf die Kaestchen
die Tastatur oeffnet. `opacity:0` statt `display:none` — ein verstecktes
Feld ist nicht fokussierbar, und dann koennte niemand tippen. */
.ziffern {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ziffer-luecke);
}
.ziffern__kasten {
display: flex;
align-items: center;
justify-content: center;
height: var(--ziffer-hoehe);
border: var(--karte-rand) solid var(--cs-line-4);
border-radius: var(--ziffer-radius);
background: var(--feld-flaeche);
color: var(--raum-text);
font-family: var(--font-heading);
font-size: var(--ziffer-schrift);
}
.ziffern__kasten[data-dran='ja'] {
border: var(--ziffer-dran-rand) solid var(--color-accent);
background: var(--cs-accent-tint);
}
/* Abgewiesener Code (00c): alle vier tragen den Warnton. */
.ziffern[data-falsch='ja'] .ziffern__kasten {
border-color: var(--warn-icon);
background: var(--warn-flaeche);
}
/* Gesperrter Code (00i): die Reihe tritt ganz zurueck — hier ist nichts mehr
einzutippen. Der Stand haengt am BEHAELTER und nicht am `disabled` des
Feldes: das Feld steht im Baum NACH den Kaestchen, und ein
Geschwisterwaehler zeigt nur nach vorn. */
.ziffern[data-gesperrt='ja'] .ziffern__kasten {
border-color: var(--cs-line-2);
background: var(--cs-fill-1);
color: var(--cs-text-off);
}
.ziffern__feld {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
padding: 0;
background: none;
color: transparent;
font-size: var(--ziffer-schrift);
text-align: center;
caret-color: transparent;
opacity: 0;
cursor: text;
}
/* Die Zeile unter den Kaestchen. Sie ist NIE leer: Gueltigkeit, Pruefung oder
die benannte Absage — ein stummes Feld gibt es hier nicht. */
.codemeldung {
display: flex;
justify-content: center;
align-items: flex-start;
gap: var(--space-2);
margin: 0;
min-height: var(--einstieg-meldung-hoehe);
color: var(--raum-text-gedaempft);
font-size: var(--schrift-hinweis);
line-height: var(--zeilenhoehe-fliess);
text-align: center;
}
.codemeldung--warn {
justify-content: flex-start;
color: var(--warn-icon);
text-align: left;
}
.codemeldung .kreisel {
color: var(--color-accent);
}
.codemeldung--warn .ikone {
width: var(--icon-klein);
height: var(--icon-klein);
flex: none;
}
/* --- 00l: der Umstieg --- */
.umstieg {
flex: 1;
gap: var(--space-3);
padding-top: var(--space-3);
}
.umstieg__titel {
margin: 0;
font-family: var(--font-heading);
font-size: var(--schrift-h2);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
}
/* --- 06b: die Botpruefung --- */
.botcheck {
flex: 1;
gap: var(--space-3);
}
.botcheck__titel {
margin: 0;
font-family: var(--font-heading);
font-size: var(--schrift-h2);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
}
/* Das Kaestchen ist die ganze Zeile: der Entwurf zeichnet eine Flaeche mit
Rand, in der links das Quadrat und rechts der Satz steht. Angetippt wird
die Zeile, nicht das 26-px-Quadrat — auf einem Handy trifft niemand
zuverlaessig 26 px. */
.botcheck__haken {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: calc(var(--btn-hoehe) + var(--space-8));
padding: 0 var(--anmeldekasten-polster-x);
border: var(--karte-rand) solid var(--blatt-rand);
border-radius: var(--anmeldekasten-radius);
background: var(--cs-fill-1);
color: var(--raum-text);
font-family: var(--font-body);
font-size: var(--schrift-fliess);
text-align: left;
cursor: pointer;
}
.botcheck__kasten {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--anlage-schritt-zeichen);
height: var(--anlage-schritt-zeichen);
flex: none;
border: var(--karte-rand) solid var(--cs-line-4);
border-radius: var(--radius-sm);
}
/* GESETZT heisst Terracotta, und hier ist es richtig: der Haken IST die
Aktion dieses Bildschirms. */
.botcheck__kasten[data-gesetzt='ja'] {
border-color: var(--color-accent);
background: var(--cs-accent-tint);
color: var(--color-accent);
}
.botcheck__kasten .ikone--haken {
width: var(--icon-klein);
height: var(--icon-klein);
}
.botcheck__fussnote {
margin: 0;
}
/* --- 06c, 06d, 06e, 06f: die vier Anlagezustaende --- */
.anlage {
flex: 1;
gap: var(--space-3);
}
/* 06c steht MITTIG und ohne jeden Knopf — es gibt hier nichts zu
entscheiden. */
.anlage--laeuft {
justify-content: center;
gap: var(--space-6);
}
.anlage__ring {
width: var(--anlage-ring);
height: var(--anlage-ring);
border: var(--anlage-ring-strich) solid var(--cs-accent-disabled);
border-top-color: var(--color-accent);
border-radius: var(--radius-pille);
animation: kreisel-dreht var(--anlage-ring-dauer) linear infinite;
}
.anlage__titel {
margin: 0;
font-family: var(--font-heading);
font-size: var(--schrift-h2);
font-weight: var(--gewicht-heading);
line-height: var(--zeilenhoehe-heading);
}
.anlage__titel--fertig {
text-align: center;
}
.warnscheibe {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--warnscheibe-mass);
height: var(--warnscheibe-mass);
flex: none;
border: var(--warnscheibe-rand) solid var(--warn-icon);
border-radius: var(--radius-pille);
background: var(--warn-flaeche);
color: var(--warn-icon);
}
.warnscheibe .ikone {
width: var(--warnscheibe-zeichen);
height: var(--warnscheibe-zeichen);
}
/* Der Angabenkasten von 06d: was behalten wurde, Zeile fuer Zeile. */
.anlage__angaben {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--anmeldekasten-polster-y) var(--anmeldekasten-polster-x);
border: var(--karte-rand) solid var(--cs-line-1);
border-radius: var(--anlage-angaben-radius);
background: var(--cs-fill-1);
}
.anlage__zeile {
display: flex;
justify-content: space-between;
gap: var(--space-3);
font-size: var(--anlage-angaben-schrift);
}
.anlage__etikett {
color: var(--raum-text-hell);
}
.anlage__wert {
color: var(--raum-text);
font-weight: var(--gewicht-kraeftig);
}
/* Die drei Schrittzeilen von 06e. Sie sind eine BILANZ und keine Liste zum
Antippen — ohne Flaeche, ohne Rand, ohne Winkel. */
.anlage__schritte {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.anlage__schritt {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--anlage-schritt-hoehe);
color: var(--raum-text);
font-size: var(--schrift-fliess);
}
.anlage__schritt .ikone {
width: var(--anlage-schritt-zeichen);
height: var(--anlage-schritt-zeichen);
flex: none;
color: var(--gruen-icon);
}
/* Was noch fehlt, traegt den Warnton und ein kraeftigeres Gewicht — es ist
die eine Zeile, auf die es gerade ankommt. */
.anlage__schritt--offen {
color: var(--warn-icon);
font-weight: var(--gewicht-kraeftig);
}
.anlage__schritt--offen .ikone {
color: var(--warn-icon);
}
/* Die Scheibe von 06f: der eben gewaehlte Avatar, mittig. */
.anlage__scheibe {
display: flex;
justify-content: center;
margin-bottom: var(--space-2);
}
.anlage--fertig .ikone--auto {
width: var(--anmeldekasten-zeichen);
height: var(--anmeldekasten-zeichen);
flex: none;
color: var(--gruen-icon);
}
/* --------------------------------------------------------------------------
* HIER STANDEN DIE REGELN DES ALTZUGANGS — ENTFERNT MIT WI-0302
*
* `.rueckwegseite*`, `.wortkarte*`, `.feld--wortfolge`, `.wortfolge__*`
* (Artboards 03 und 04) und `.elternseite*` (Artboards 05 und 06). HANDOFF
* §21.3 fuehrt 03 und 04 als REMOVED, §23.1 nimmt 05 und 06 mit.
* ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
* Scannen
* ------------------------------------------------------------------------ */
/* DIE SCANSEITE IN DER REIHENFOLGE DES ENTWURFS (Artboard 07, WI-0110).
*
* Von oben nach unten: Hinweispille — Sucher (236 px) — Warnzeile —
* Schutzzusage — Ausloeser, unten verankert. Im Rahmen liegen nur noch
* Livebild, Silhouette und die vier Eckwinkel.
*
* Vorgeschichte in einem Absatz: WI-0049 liess den Sucher die freie Hoehe
* nehmen (Designspec Kap. 10.3 Punkt 3, „keine feste Hoehe, wo das Geraet
* mehr hergibt"). Diese Auflage ist am 30.08. zurueckgezogen — sie war eine
* Entscheidung ueber PLATZ, und der Einwand dagegen ist einer ueber den ZWECK:
* das Bild muss auf die Karte passen (siehe --sucher-hoehe oben).
*
* `gap` steht auf 0, und die Abstaende stehen als Rand an den Teilen. Der
* Entwurf setzt sie einzeln (14 / 28 / 10 px); ein gemeinsamer Zwischenraum
* haette jeden davon um denselben Betrag verschoben. */
.scan {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0;
/* Bezugsrahmen fuer das Kennzeichen-Blatt, das die ganze Seite abdeckt. */
position: relative;
}
/* Der Sucher: das Mass steht im Entwurf und nicht im Fenster. `flex: none`
* gehoert dazu — ohne es zoege ein Flex-Elternteil den Kasten wieder auf und
* die 236 px waeren nur noch ein Wunsch. */
.sucher {
position: relative;
flex: none;
width: 100%;
height: var(--sucher-hoehe);
margin-top: var(--sucher-abstand-oben);
border-radius: var(--sucher-rundung);
background: var(--sucher-flaeche);
overflow: hidden;
}
/* DER RAHMEN AUF `07b` SITZT HOEHER (Artboard 07b: `margin-top:20px`).
* Ueber ihm steht dort der Reihenstreifen und nicht nur die Pille; derselbe
* `:has()`-Griff wie bei der Buehne der Reihe weiter unten — die Ausnahme
* gilt NUR fuer den Zustand, der sie braucht, und `07` bleibt unberuehrt. */
.scan:has(.reihe) .sucher {
margin-top: var(--sucher-abstand-oben-reihe);
}
/* --------------------------------------------------------------------------
* DER SCAN-ZAEHLER (WI-0426, Artboards 07n/07c/07d/07g/07o/07w)
*
* Eine Zeile zwischen Pille und Rahmen: Balken 96 x 4, `{count}/{total}`,
* „Scans übrig". Er ist eine ANZEIGE und keine Aktion — kein Zeiger, kein
* Tippziel. Die Farbe traegt der Zustand: knapp, leer und wartend in
* Terracotta-Warnton, unbekannt gedaempft; Balken und Zahl erben sie.
* ------------------------------------------------------------------------ */
.scan-zaehler {
display: flex;
align-items: center;
align-self: center;
gap: var(--zaehler-fuge);
margin-top: var(--zaehler-abstand-oben);
min-height: var(--zaehler-hoehe);
font-size: var(--zaehler-schrift);
font-weight: 700;
color: var(--cs-text-mute);
pointer-events: none;
user-select: none;
}
.scan-zaehler[data-scan-zaehler='07c'],
.scan-zaehler[data-scan-zaehler='07d'],
.scan-zaehler[data-scan-zaehler='07g'],
.scan-zaehler[data-scan-zaehler='07w'] {
color: var(--cs-warn);
}
.scan-zaehler[data-scan-zaehler='07o'] {
color: var(--cs-text-dim);
}
.scan-zaehler__leiste {
position: relative;
flex: none;
width: var(--zaehler-leiste-b);
height: var(--zaehler-leiste-h);
border-radius: var(--radius-pille);
background: var(--zaehler-spur);
overflow: hidden;
}
.scan-zaehler__fuellung {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: currentColor;
transition: width var(--zaehler-rollen) ease-out;
}
.scan-zaehler__zahl {
font-variant-numeric: tabular-nums;
}
/* Nach einer neuen Karte rollt die Zahl einmal von oben herein. */
.scan-zaehler__zahl--rollt {
display: inline-block;
animation: scan-zaehler-rollt var(--zaehler-rollen) ease-out;
}
@keyframes scan-zaehler-rollt {
from {
transform: translateY(-60%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* 07o: der Stand ist nicht geladen — eine Platzhalterpille statt der Zahl. */
.scan-zaehler__platzhalter {
display: inline-block;
width: var(--zaehler-platzhalter-b);
height: var(--zaehler-platzhalter-h);
border-radius: var(--radius-pille);
background: var(--zaehler-platzhalter);
}
@media (prefers-reduced-motion: reduce) {
.scan-zaehler__fuellung {
transition: none;
}
.scan-zaehler__zahl--rollt {
animation: none;
}
}
/* Die Hinweispille steht UEBER dem Rahmen, nicht darin (Artboard 07). Im
* Rahmen war sie eine der Sachen, die dem Livebild Flaeche wegnahmen; der
* Entwurf zaehlt abschliessend auf, was drinsteht, und sie ist nicht dabei. */
.scan > .hinweis-pille {
margin-bottom: var(--pille-abstand-unten);
}
/* SAFE AREAS: bis WI-0417 trug der Sucher als einziger Bildschirm den
* Systemrand selbst (WI-0049/WI-0110) — und alle anderen lagen in der
* iOS-App unter der Statusleiste. Seitdem polstert `.app` mit `--sicher-*`
* fuer JEDEN Bildschirm; hier stuende er doppelt. */
.app__buehne[data-bildschirm='scannen'] {
/* 18 px oben wie im Entwurf (Artboard 07: Inhaltsspalte `padding: 16px 18px`,
gemessen 18 px ueber der ersten Kante). Der allgemeine --buehne-oben von
26 px war die groesste Abweichung dieses Bildschirms im Befund
(`inhalt_oben`, docs/entwurfs-vergleich.md). */
padding-top: var(--space-4);
}
/* DER KONTOBEREICH FAENGT HOEHER AN (WI-0331, Artboard 43).
Dieselbe Bauart und derselbe Grund wie beim Sucher darueber: `--buehne-oben`
ist mit 26 px der gemessene Mittelwert ueber alle Bildschirme, und 43 liegt
nicht in seiner Naehe — das Brett setzt seine Inhaltsspalte auf
`padding: 12px 22px 0`. Solange die Seite mit dem Kopf anfing, waren das
13 px Abstand im Merkmal `inhalt_oben`; seit der Kopfweg (`‹ Zurück`) davor
steht, kommt seine halbe Zeilenhoehe dazu und der Abstand verdoppelte sich.
Der Weg ist gezeichnet, der Abstand war es nicht.
13,2 px (`--space-3`) statt 12: die Abstandsleiter kennt keine 12, und ein
Mass neben ihr waere eine zweite Leiter. 1,2 px liegen weit innerhalb der
Toleranz, mit der dieser Vergleich misst.
NUR 43 UND SEIN BLATT. Die Regel haengt am Bildschirm und nicht an
`--buehne-oben` — die uebrigen Bildschirme bleiben unberuehrt
(Scope-Lock). Der Fussfreiraum bleibt, wie er ist: die Tableiste steht auf
43 ohnehin nicht, und `--buehne-unten` traegt ihn fuer alle.
WI-0357: `43h` (die Sprachwahl) zeichnet dieselbe Inhaltsspalte
(`padding: 12px 22px`) mit demselben Kopfweg davor — gemessen 40 statt 13 px
`inhalt_oben` ohne diese Zeile. */
.app__buehne[data-bildschirm='konto'],
.app__buehne[data-bildschirm='konto_sprache'] {
padding-top: var(--space-3);
}
/* DIE MASSE DER ABLAUFSEITEN AUF DER SCAN-STRECKE (WI-0068).
*
* Der Entwurf setzt die Inhaltsspalte dieser fuenf Bildschirme auf 26–30 px
* Seitenrand und verankert den Aktionsblock 30 px ueber der Unterkante; die
* drei Erkennungs-Seiten beginnen 56 px unter dem Kopf. Die Buehne traegt
* sonst ueberall --space-4 (17,6 px) — gemessen waren das 9 bis 10 px zu
* wenig auf jeder Seite. Hier stehen die Masse je Bildschirm, damit die
* uebrigen 40 Bildschirme davon unberuehrt bleiben (SCOPE-LOCK). */
.app__buehne[data-bildschirm='scan_laeuft'],
.app__buehne[data-bildschirm='scan_fehler'],
.app__buehne[data-bildschirm='scan_qr'],
/* Artboard 25 IST dieselbe Seite (HANDOFF §6 Zeile 25: „Same stage as 08") —
also auch dieselben Masse. Sie steht hier in derselben Regel und nicht in
einer zweiten daneben (WI-0096). */
.app__buehne[data-bildschirm='verbinden'] {
padding: calc(var(--space-6) + var(--space-8)) var(--space-6) var(--space-8);
}
/* DIE BILDSCHIRME OHNE TABLEISTE brauchen ihren Fussfreiraum nicht (HANDOFF
§4.3: die Leiste ist auf allen Duell-Aufsetz-Bildschirmen ausgeblendet).
`--buehne-unten` haelt 96 px fuer eine Leiste frei, die dort gar nicht
steht — gemessen waren das auf dem Aufsetzen 130 px unter der Falz, waehrend
der Entwurf den Bildschirm auf feste 793 px zeichnet (WI-0096). */
.app__buehne[data-bildschirm='aufsetzen'],
.app__buehne[data-bildschirm='deckbau'],
.app__buehne[data-bildschirm='einsatz'],
/* WI-0212: der Wiederfund traegt die Leiste ebenso wenig — die Artboards 13c
und 13d zeichnen ihren Aktionsblock unten verankert auf 24 px und nichts
darunter. Gemessen waren mit dem allgemeinen Fussfreiraum 32 px (13c) und
63 px (13d) unter der Falz, auf Bildschirmen, die der Entwurf auf feste
793 px zeichnet. */
.app__buehne[data-bildschirm='doppelfund'] {
padding-bottom: var(--space-6);
}
/* Der Deckbau faengt hoeher an als die uebrigen — Artboard 28 setzt ihn auf
18 px, und das Kartenraster darunter braucht jede Zeile. */
.app__buehne[data-bildschirm='deckbau'] {
padding-top: var(--space-4);
}
/* Das Aufsetzen traegt VIER Gruppen (Bezugsart, Einsatz, Serie, Groesse) auf
einem Bildschirm, den der Entwurf mit drei zeichnet. Der allgemeine Abstand
der Buehne (13 px je Zwischenraum) summiert sich dabei auf ueber hundert
Pixel — der Entwurf setzt zwischen Versalzeile und Gruppe 8 px und zwischen
den Gruppen 16 px. Deshalb hier die engere Leiter (WI-0096). */
.app__buehne[data-bildschirm='aufsetzen'] > .gestapelt {
gap: var(--space-2);
}
.app__buehne[data-bildschirm='aufsetzen'] .aktionsblock {
padding-top: var(--space-2);
}
.app__buehne[data-bildschirm='auswahl'],
.app__buehne[data-bildschirm='korrektur'] {
padding-left: var(--space-6);
padding-right: var(--space-6);
padding-bottom: var(--space-8);
}
/* ARTBOARD 11c — DIE EINZIGE SEITE DER SCAN-STRECKE, DIE ROLLT (WI-0176).
*
* Der Entwurf zeichnet sie auf feste 793 px: Ueberschrift, Suchpille und
* Aktionsblock stehen, und NUR die Typenliste dazwischen rollt
* (`flex:1;min-height:0;overflow:auto`). Damit das aufgeht, muss die Buehne
* bei der Fensterhoehe enden — `.app` traegt sonst nur `min-height`, waechst
* also mit dem Inhalt, und eine Marke mit zwanzig Typen schoebe „Diesen Typ
* nehmen" unter die Bildkante. Genau das verbietet Designspec 10.3 Punkt 1.
*
* Die Seitenmasse sind die des Artboards (`padding:24px 26px 0`, Aktionsblock
* 30 px ueber der Kante) — dieselbe Leiter wie auf 11 und 12 daneben. */
.app__buehne[data-bildschirm='typen'] {
max-height: var(--sicher-hoehe);
padding: var(--space-6) var(--space-6) var(--space-8);
}
/* Das Livebild fuellt den Rahmen und liegt UNTER den Eckwinkeln und der
* Einpasshilfe — deshalb absolut, nicht im Fluss.
*
* ACHTUNG, `object-fit: cover` IST HIER NICHT NUR GESCHMACK: `cover` fuellt
* den Kasten und schneidet das hochkante Sensorbild dafuer oben und unten ab
* (seit WI-0110 der Regelfall). Der Nutzer rahmt also einen AUSSCHNITT. Die
* Aufnahme in public/js/camera.js rechnet genau diesen Ausschnitt nach und
* zeichnet nur ihn auf die Leinwand — sonst kommt ein anderes Bild an als das
* gerahmte (zwei Drittel Wand, Auto am unteren Rand).
*
* Wer `object-fit`, die Kasten-Masse oder die angeforderte Aufloesung
* aendert, aendert `coverAusschnitt()` in camera.js mit. Sucher und Aufnahme
* brauchen DIESELBE Geometrie.
*
* Deshalb steht hier `inset: 0` und keine eigene Groesse: das Video ist immer
* genau der Kasten. Bei jeder Aenderung der Sucherform — kleiner und hochkant,
* dann volle Hoehe (WI-0049), 340 px gedrungen (WI-0110), jetzt die 236 px des
* Bretts (WI-0315) — wanderte die
* Aufnahme von allein mit, weil sie das Video zur Laufzeit misst. Wer dem
* Video hier eine ANDERE Flaeche gibt als dem Sucher, bricht genau diese
* Kopplung. */
.sucher__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Dieselbe Flaeche wie der Rahmen — sie ist nur sichtbar, solange noch kein
Bild da ist, und zwei Toene uebereinander waeren eine Kante, die der
Entwurf nicht zeichnet. */
background: var(--sucher-flaeche);
}
/* Die Einpasshilfe: sie zeigt, wo das Auto im Bild sitzen soll. Sie liegt
* ueber dem Videobild, aber sie ist KEIN Bedienelement — `pointer-events:
* none` sorgt dafuer, dass jeder Druck durch sie hindurch beim Ausloeser
* ankommt, und sie liegt unter Pille, Fusszeile und dem Kennzeichen-Blatt
* (z-index 1), damit sie keinen Hinweis- oder Fehlertext stoert. Auf die
* Aufnahme hat sie keinen Einfluss: gezeichnet wird das