/** * agenic Komponenten-CSS – Process-Step (Molekül) — vollständige Übertragung. * * Figma-Quelle: Set `process-step` (1015:15914, Seite 0.5 → `03 · Molecules`, * 8 Varianten, gemessen 19.08.2026). Achsen: Rahmen · Betonung · Theme, * dazu die Properties Label (Text) und Pfeil (Boolean). * * Maße der Quelle: HORIZONTAL, gap 12 (Values/spacing/ms), pad 0. * Rahmen=ohne → Höhe 32, content ohne Polster, ohne Fläche, ohne Kontur * Rahmen=pille → Höhe 43, content pad 12/24/12/24, Radius Values/radius/max, Kontur 1 * * `Betonung` ist KEINE einheitliche Achse (Finding F2, Kontrakt process-chain-Kette): * bei Rahmen=ohne wechselt sie den Text Style, * bei Rahmen=pille wechselt sie Flaeche und Kontur, der Text bleibt gleich. * Deshalb stehen unten zwei getrennte Regelbloecke und nicht einer. * * Markup-Partial: includes/render-process-step.php. * Kontrakt: `KONTRAKT-process-chain-kette-19-08.md` §3. 0 tmp-Punkte. */ .ag-process-step, .ag-process-step * { box-sizing: border-box; } .ag-process-step { /* L3 mit L2-Defaults */ --ag-process-step-gap: var(--spacing-ms); /* Figma Values/spacing/ms = 12 */ --ag-process-step-hoehe: 32px; /* Figma Rahmen=ohne, gemessen */ --ag-process-step-color: var(--color-text-standard); /* Figma Text/standard */ --ag-process-step-fs: var(--fs-600); /* Copy/L = Inter Light 24/32 */ --ag-process-step-lh: calc(32 / 24); --ag-process-step-fw: var(--fw-light); --ag-process-step-ls: -0.02em; /* Figma letterSpacing -2 % */ /* nur Rahmen=pille */ --ag-process-step-pad-block: var(--spacing-ms); /* 12 */ --ag-process-step-pad-inline: var(--spacing-ml); /* 24 */ --ag-process-step-radius: var(--radius-max); /* Figma Values/radius/max = 999 */ --ag-process-step-bg: transparent; --ag-process-step-border: transparent; --ag-process-step-border-width: 0; /* ohne Rahmen hat die Quelle keine Kontur */ display: flex; align-items: center; /* Figma counterAxisAlignItems = CENTER */ gap: var(--ag-process-step-gap); min-height: var(--ag-process-step-hoehe); list-style: none; /* das Glied ist per Default ein
  • */ color: var(--ag-process-step-color); /* Mit Pfeil fuellt das Glied, ohne Pfeil hugt es — so steht es in der Quelle (item-1…5 auf FILL, item-6 auf HUG). */ flex: 1 1 0; min-width: 0; } .ag-process-step--ohne-pfeil { flex: 0 0 auto; } .ag-process-step__content { display: flex; align-items: center; flex: 0 0 auto; /* content hugt in beiden Rahmen */ background: var(--ag-process-step-bg); border-radius: 0; padding: var(--ag-process-step-pad-oben, 0) 0 var(--ag-process-step-pad-unten, 0); /* Kontur als inset-Schatten, NICHT als border. Gemessen am laufenden Server 19.08.2026: mit `border` wurde das Glied 34 statt 32 px hoch und die Pille 45 statt 43 — die Kontur addierte 2 px. In Figma sitzt sie innen und vergroeszert den Rahmen nicht (Pille: 12 + 19 + 12 = 43 exakt). box-shadow liegt auszerhalb des Layouts und trifft die Quelle deshalb genau. */ box-shadow: inset 0 0 0 var(--ag-process-step-border-width) var(--ag-process-step-border); } .ag-process-step__label { font-size: var(--ag-process-step-fs); line-height: var(--ag-process-step-lh); font-weight: var(--ag-process-step-fw); letter-spacing: var(--ag-process-step-ls); /* Regal-Regel „Beschriftungen auf ein bis zwei Woerter halten, damit der Pfeil sichtbar bleibt": bricht die Beschriftung doch um, soll sie das duerfen — abgeschnittener Text waere schlechter als eine zweite Zeile. Englische Fassungen laufen gegenueber dem Deutschen auseinander. */ overflow-wrap: anywhere; } .ag-process-step__arrow { /* Das Atom bringt sein flex: 1 1 0 selbst mit; hier nur der Platz, den es mindestens braucht. */ min-width: var(--spacing-l); /* 32 */ } /* ── Theme-Achse ───────────────────────────────────────────────── */ .ag-process-step--dark { --ag-process-step-color: var(--color-text-inverse-soft); /* Figma Text/inverse = #ebf1f2 ACHTUNG: NICHT --color-text-inverse, das ist #ffffff und hat kein Figma-Gegenstueck (Finding F1) */ } /* ── Betonung bei Rahmen=ohne: wechselt den Text Style ─────────── */ /* Copy/L (Inter Light 24/32) ↔ Headline/M (Inter Medium 24/32). Gleicher Grad, gleiche Zeilenhoehe — nur das Gewicht traegt die Betonung. Das genuegt WCAG, weil Farbe hier nicht der einzige Traeger ist. */ .ag-process-step--rahmen-ohne.ag-process-step--stark { --ag-process-step-fw: var(--fw-medium); /* Headline/M */ } /* ── Rahmen=pille: eigene Optik, eigener Textgrad ──────────────── */ .ag-process-step--rahmen-pille { --ag-process-step-hoehe: 43px; /* Figma, gemessen */ --ag-process-step-fs: var(--fs-200); /* Copy/S = Inter Light 14/19 */ --ag-process-step-lh: calc(19 / 14); --ag-process-step-bg: var(--color-surface-lightest); /* Figma Surface/lightest */ --ag-process-step-border: var(--color-border-soft); /* Figma Border--subtle */ --ag-process-step-border-width: var(--border-width-xs);/* Figma Values/border/xs = 1 */ } .ag-process-step--rahmen-pille .ag-process-step__content { padding: var(--ag-process-step-pad-oben, var(--ag-process-step-pad-block)) var(--ag-process-step-pad-inline) var(--ag-process-step-pad-unten, var(--ag-process-step-pad-block)); border-radius: var(--ag-process-step-radius); } /* Betonung bei Rahmen=pille: Flaeche und Kontur, NICHT der Text Style. Der Text bleibt in allen vier Pillen-Varianten Copy/S Light — gemessen. */ .ag-process-step--rahmen-pille.ag-process-step--stark { --ag-process-step-bg: var(--color-surface-brand); /* Figma Surface/brand = #4db578 */ --ag-process-step-border: var(--color-border); /* Figma Border */ } .ag-process-step--rahmen-pille.ag-process-step--dark { --ag-process-step-bg: var(--color-surface-dark); /* Figma Surface/dark */ --ag-process-step-border: var(--color-border-inverse); /* Figma Border--inverse */ } .ag-process-step--rahmen-pille.ag-process-step--dark.ag-process-step--stark { --ag-process-step-bg: var(--color-surface-brand-strong); /* Figma Surface/brand-strong = #0b4d44 */ --ag-process-step-border: var(--color-border-inverse); /* Figma Border--inverse */ } /* Bekannte Abweichung, im Kontrakt vermerkt: In der hellen Pille steht `Betonung=stark` mit Text/standard (#18181e) auf Surface/brand (#4db578). Das ist der Stand der Quelle und wird hier unveraendert uebernommen; die Kontrastpruefung gehoert in die Abnahme, nicht in eine stille Korrektur. */ /* ══════════════════════════════════════════════════════════════════ Marker-Achse — neu 3.193.0, Figma-Quelle neu gemessen 08.09.2026. `Marker` ist eine eigene Achse neben `Rahmen` (Abweichung A4 im Projekt-Doc b06-prozesskette-varianten-08-09): die Richtung oben/links ist ein zweites Merkmal, kein Rahmen. Die Marker-Varianten fuehren keinen Pfeil und keine Pille — das erzwingt schon das Partial. Gemeinsam fuer oben und links: Abstand 16 (Values/spacing/m) statt 12 · Punkt aus process-marker · Nummer Copy/XS in Text/grey. ══════════════════════════════════════════════════════════════════ */ .ag-process-step--marker-oben, .ag-process-step--marker-links { --ag-process-step-gap: var(--spacing-m); /* Figma Values/spacing/m = 16 */ --ag-process-step-num-color: var(--color-text-grey); /* Figma Text/grey */ --ag-process-step-num-fs: var(--fs-100); /* Copy/XS = Inter Light 12/16 */ --ag-process-step-num-lh: calc(16 / 12); min-height: 0; /* die 32 der Textkette gelten hier nicht */ } .ag-process-step--marker-oben.ag-process-step--dark, .ag-process-step--marker-links.ag-process-step--dark { --ag-process-step-num-color: var(--color-text-grey-inverse); /* Figma Text/grey--inverse */ } .ag-process-step--marker-oben .ag-process-step__num, .ag-process-step--marker-links .ag-process-step__num { color: var(--ag-process-step-num-color); font-size: var(--ag-process-step-num-fs); line-height: var(--ag-process-step-num-lh); font-weight: var(--fw-light); letter-spacing: var(--ag-process-step-ls); } /* ── Marker=oben — Spalte fuer process-chain Layout=raster ──────── Quelle: VERTICAL, gap 16, cnt=MIN, FILL. Der Punkt sitzt oben und traegt die Verlaufslinie der Kette: seine Mitte liegt genau 6 px unter der Oberkante des Glieds — daran haengt die Linienlage im Organismus. Deshalb KEIN vertikales Zentrieren hier. */ .ag-process-step--marker-oben { flex-direction: column; align-items: flex-start; /* Figma counterAxisAlignItems = MIN */ flex: 1 1 0; /* Figma FILL — gleich breite Spalten */ } .ag-process-step--marker-oben .ag-process-step__content { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); /* Figma Values/spacing/xs = 4 */ flex: 1 1 auto; width: 100%; padding: 0; box-shadow: none; } .ag-process-step--marker-oben .ag-process-step__label { --ag-process-step-fs: var(--fs-300); /* Copy/M = Inter Light 16/21 */ --ag-process-step-lh: calc(21 / 16); } /* Betonung=stark: Headline/S (Inter Medium 16/21) — gleicher Grad, nur das Gewicht traegt die Betonung. Zusaetzlich fuellt der Punkt (process-marker Betonung=stark), Farbe ist also nicht der einzige Bedeutungstraeger. */ .ag-process-step--marker-oben.ag-process-step--stark .ag-process-step__label { --ag-process-step-fw: var(--fw-medium); } /* ── Marker=links — Zeile fuer process-chain Layout=vertikal ────── Quelle: HORIZONTAL, gap 16, cnt=CENTER, HUG. Abweichung A7 (dokumentiert): statt CENTER steht hier flex-start, und der Punkt bekommt den Versatz (32 − 12) / 2 = 10 px. Bei einzeiliger Beschriftung ist das Ergebnis identisch mit CENTER; bei einer zweiten Zeile bleibt die Punktmitte aber weiterhin 16 px unter der Oberkante des Glieds. Genau daran endet die senkrechte Linie der Kette — mit CENTER waere die Abnahmeregel „Linie endet in den Punktmitten" bei Umbruch nicht mehr wahr. */ .ag-process-step--marker-links { --ag-process-step-dot-versatz: 10px; /* (32 − 12) / 2, aus Copy/L 24/32 */ flex-direction: row; align-items: flex-start; flex: 0 0 auto; /* Figma HUG */ } .ag-process-step--marker-links .ag-process-step__dot, .ag-process-step--marker-links .ag-process-step__num { margin-block-start: var(--ag-process-step-dot-versatz); } .ag-process-step--marker-links .ag-process-step__num { --ag-process-step-dot-versatz: 8px; /* Nummer 16 hoch: (32 − 16) / 2 */ flex: 0 0 var(--spacing-l); /* Figma feste Breite 32 = Values/spacing/l */ } .ag-process-step--marker-links .ag-process-step__content { padding: 0; box-shadow: none; } .ag-process-step--marker-links .ag-process-step__label { --ag-process-step-fs: var(--fs-600); /* Copy/L = Inter Light 24/32 */ --ag-process-step-lh: calc(32 / 24); } .ag-process-step--marker-links.ag-process-step--stark .ag-process-step__label { --ag-process-step-fw: var(--fw-medium); /* Headline/M */ }