/**
 * agenic Komponenten-CSS – Process-Chain (Organismus) — vollständige Übertragung.
 *
 * Figma-Quelle: Set `process-chain` (2924:21787, Seite 0.5 → `04 · Organisms`,
 * 12 Varianten, neu gemessen 08.09.2026 — bis 3.190.0 waren es 2).
 * Achsen: Layout (kette · raster · vertikal), Flaeche (ohne · mit), Theme,
 * dazu die Booleans Trenner und Glied 4/5/6.
 *
 * Maße der Quelle: Wurzel VERTICAL, gap 0, Breite 1200.
 *   items  HORIZONTAL, gap 24 (Values/spacing/ml),
 *          pad 24 oben / 24 unten (Values/spacing/ml), counter=CENTER
 *   Glied  item-1…n-1 FILL, item-n HUG — das regelt process-step selbst
 *
 * Achse `groesse` (standard · kompakt) seit 4.0.0 — ohne Figma-Quelle,
 * Entscheidung Vincent 17.09.2026, Block ganz unten.
 *
 * Markup-Partial: includes/render-process-chain.php.
 * Kontrakt: `KONTRAKT-process-chain-kette-19-08.md` §4.
 */

.ag-process-chain,
.ag-process-chain * {
    box-sizing: border-box;
}

.ag-process-chain {
    /* L3 mit L2-Defaults */
    --ag-process-chain-gap: var(--spacing-ml);            /* Figma Values/spacing/ml = 24 */
    --ag-process-chain-pad-block: var(--spacing-ml);      /* 24 oben und unten */
    --ag-process-chain-space-before: 0px;
    --ag-process-chain-space-after: 0px;
    --ag-process-chain-maske: var(--spacing-xxl);         /* 64 — Breite des Randabschlusses */

    display: flex;
    flex-direction: column;
    gap: 0;                                               /* Figma itemSpacing = 0 */
    width: 100%;
    margin-block: var(--ag-process-chain-space-before) var(--ag-process-chain-space-after);
}

.ag-process-chain__items {
    display: flex;
    flex-direction: row;
    align-items: center;                                  /* Figma counterAxisAlignItems = CENTER */
    gap: var(--ag-process-chain-gap);
    padding: 0;
    margin: 0;
    list-style: none;                                     /* <ol> traegt die Leseordnung, nicht die Optik */
}

/* Nur die waagerechte Textkette hat das Innenpolster 24 oben und unten —
   raster und vertikal stehen in der Quelle auf pad 0 (gemessen 08.09.2026). */
.ag-process-chain--kette .ag-process-chain__items {
    padding-block: var(--ag-process-chain-pad-oben, var(--ag-process-chain-pad-block)) var(--ag-process-chain-pad-unten, var(--ag-process-chain-pad-block));
}

/* Der Scrollbereich ist auf dem Desktop wirkungslos — er existiert fuer Mobil
   und traegt dort den Tastaturfokus. Ohne `min-width: 0` kann ein Flex-Kind
   nicht schmaler werden als sein Inhalt und die Kette sprengt den Container. */
.ag-process-chain__scroll {
    min-width: 0;
}

.ag-process-chain__scroll:focus-visible {
    outline: var(--border-width-s) solid currentColor;
    outline-offset: calc(var(--border-width-s) * -1);
}

/* Die Trennlinien laufen ueber die volle Breite und scrollen NICHT mit —
   sie liegen auszerhalb des Scrollbereichs (Regal-Regel). */
.ag-process-chain__linie {
    flex: 0 0 auto;
}

/* ── Theme-Achse ─────────────────────────────────────────────────
   Die Kette selbst traegt keine Farbe: Text- und Icon-Farben sitzen in
   process-step und arrow-line, die Trennlinie ist in beiden Themes
   derselbe branded-Verlauf (gemessen). Der Modifier reicht das Theme
   nur an die Glieder durch — das erledigt das Partial ueber die
   Klassen der Glieder, hier bleibt nichts zu tun. */

/* ── Mobil: waagerecht scrollbar ─────────────────────────────────
   Entscheidung Vincent, 19.08.2026. KEINE Figma-Quelle — weder
   process-chain noch process-chain-columns haben eine Breakpoint-Achse
   oder ein Mobil-Specimen. Rueckspielpunkt F4 auf 0.8.

   Sechs Glieder waagerecht passen auf 375 px nicht. Statt umzubrechen
   bleibt die Anordnung erhalten und wird seitlich scrollbar. Der bekannte
   Schwachpunkt ist die Auffindbarkeit: dass es rechts weitergeht, muss
   sichtbar sein. Das leistet der Verlaufsabschluss unten. */

@media (max-width: 767px) {   /* --bp-md 768, A5 offen (tmp) */

    .ag-process-chain__scroll {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;

        /* Randabschluss statt hartem Schnitt: die letzten 64 px blenden aus,
           damit erkennbar ist, dass die Kette weitergeht. `mask-image` faellt
           bei fehlender Unterstuetzung folgenlos weg — dann ist die Kette
           weiterhin scrollbar, nur ohne Hinweis. */
        mask-image: linear-gradient(to right, #000 calc(100% - var(--ag-process-chain-maske)), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--ag-process-chain-maske)), transparent 100%);
    }

    /* Am Ende der Kette den Abschluss abschalten — sonst verblasst das
       Endglied, das gerade das Ergebnis traegt. */
    .ag-process-chain__scroll.ist-am-ende {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .ag-process-chain--kette .ag-process-chain__items {
        flex-wrap: nowrap;
        width: max-content;                               /* Inhalt bestimmt die Breite */
        min-width: 100%;
    }

    /* Glieder behalten ihre Inhaltsbreite, sonst quetscht sie der Scrollbereich
       wieder auf die Viewportbreite zusammen. Der Pfeil bekommt ein Mindestmasz,
       damit er nicht auf 0 zusammenfaellt. */
    .ag-process-chain--kette .ag-process-chain__items > .ag-process-step {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .ag-process-chain--kette .ag-process-chain__items > .ag-process-step .ag-arrow-line {
        flex: 0 0 var(--spacing-xxl);                     /* 64 */

        /* Safari-Fix 30.09.2026: WebKit rechnet die Inhaltsbreite des Glieds
           (flex: 0 0 auto) aus der Inhaltsbreite des Pfeils — die ist nur der
           Glyph (6,5 px), die flex-basis 64 zaehlt dort nicht. Das Glied wurde
           zu schmal, der 64-px-Pfeil lief ins Nachbarglied und ueber dessen
           Beschriftung. Eine feste Breite gibt beiden Engines denselben Wert. */
        width: var(--spacing-xxl);                        /* 64 */
    }
}

/* ── Einblendung ─────────────────────────────────────────────────
   Muster wie im Bestand: sichtbar bleibt alles, solange kein JS-Gate
   gesetzt ist. Ohne JavaScript ist die Kette nie unsichtbar. */

html.ag-anim-ready .ag-process-chain--kette[data-ag-anim="reveal"] {
    opacity: 0;
    transform: translateY(var(--motion-reveal-shift, 12px));
    transition: opacity var(--motion-reveal, .6s) var(--motion-ease-standard, ease),
                transform var(--motion-reveal, .6s) var(--motion-ease-standard, ease);
}

html.ag-anim-ready .ag-process-chain--kette[data-ag-anim="reveal"].is-inview {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.ag-anim-ready .ag-process-chain--kette[data-ag-anim="reveal"] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Layout-Achse — neu 3.193.0, Figma-Quelle neu gemessen 08.09.2026.

   `kette` ist der Bestand (oben). `raster` und `vertikal` teilen sich
   dieselbe Bauweise: EINE Verlaufslinie, absolut gesetzt, die genau
   durch die Punktmitten laeuft, und daneben die Glieder aus
   process-step (Marker=oben bzw. Marker=links).

   Die Lage der Linie ist gerechnet, nicht geschaetzt:
     Punkt 12 → Mitte 6 · Linie 2 → Oberkante 6 − 1 = 5   (raster)
     Zeile 32 → Mitte 16                                   (vertikal)
   Beide Werte haengen an --ag-process-marker-size aus dem Atom und an
   der Zeilenhoehe von Copy/L; sie stehen deshalb als L3-Variablen da
   und nicht als Zahlen im Selektor.
   ══════════════════════════════════════════════════════════════════ */

.ag-process-chain--raster,
.ag-process-chain--vertikal {
    --ag-process-chain-punkt: 12px;                       /* = --ag-process-marker-size */
    --ag-process-chain-strich: var(--border-width-s);     /* Figma Values/border/s = 2 */
    --ag-process-chain-zeile: 32px;                       /* Copy/L 24/32 — Hoehe einer Gliedzeile */
    --ag-process-chain-pad: 0px;                          /* wird von Flaeche=mit gesetzt */

    position: relative;                                    /* Bezug fuer die absolute Linie */
}

/* ── Die Verlaufslinie (A4) ──────────────────────────────────────
   Ein Element fuer beide Richtungen. Stops und Staerke sind in beiden
   Themes gleich — gemessen, keine Auslassung. */

.ag-process-chain__rule {
    position: absolute;
    display: block;
    pointer-events: none;
}

.ag-process-chain--raster .ag-process-chain__rule {
    inset-inline: var(--ag-process-chain-pad);
    top: calc(var(--ag-process-chain-pad) + (var(--ag-process-chain-punkt) - var(--ag-process-chain-strich)) / 2);
    height: var(--ag-process-chain-strich);
    background: var(--gradient-fusion-basic);
}

.ag-process-chain--vertikal .ag-process-chain__rule {
    inset-block: calc(var(--ag-process-chain-pad) + var(--ag-process-chain-zeile) / 2);
    inset-inline-start: calc(var(--ag-process-chain-pad) + (var(--ag-process-chain-punkt) - var(--ag-process-chain-strich)) / 2);
    width: var(--ag-process-chain-strich);

    /* tmp — der Paint Style `Fusion | Gradients/fusion-basic--vertikal`
       existiert in Figma noch nicht; die Quelle traegt denselben Verlauf
       um 90 Grad gedreht ohne Style (Abweichung 9.5.1 im Projekt-Doc
       b06-prozesskette-varianten-08-09, Entscheidung Vincent offen).
       Der Token steht in tokens.css, damit hier keine Hex-Werte liegen. */
    background: var(--gradient-fusion-basic--vertikal);
}

/* ── Layout=raster — gleich breite Spalten ───────────────────────
   Quelle: items HORIZONTAL, gap 24 (spacing/ml), pad 0, Glieder FILL. */

.ag-process-chain--raster .ag-process-chain__items {
    align-items: flex-start;                              /* Figma counterAxisAlignItems = MIN */
    gap: var(--ag-process-chain-gap);                     /* 24 = Values/spacing/ml */
}

/* ── Layout=vertikal — Zeilen untereinander ──────────────────────
   Quelle: items VERTICAL, gap 16 (spacing/m), Glieder HUG. */

.ag-process-chain--vertikal .ag-process-chain__items {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-m);                                /* Figma Values/spacing/m = 16 */
}

/* ── Flaeche=mit ─────────────────────────────────────────────────
   Padding 32 (Values/spacing/l), Radius 16 (Values/radius/m),
   Surface/light bzw. Surface/dark. Die Punkte uebernehmen die Flaeche
   als Fuellung — in Figma ein Override je Instanz, hier eine
   Variablen-Ueberschreibung am Atom. Das Endglied bleibt gefuellt. */

.ag-process-chain--flaeche-mit {
    --ag-process-chain-pad: var(--spacing-l);             /* Figma Values/spacing/l = 32 */
    --ag-process-chain-flaeche: var(--color-surface-light);  /* Figma Surface/light */

    padding: var(--ag-process-chain-pad);
    border-radius: var(--radius-m);                       /* Figma Values/radius/m = 16 */
    background: var(--ag-process-chain-flaeche);
}

.ag-process-chain--flaeche-mit.ag-process-chain--dark {
    --ag-process-chain-flaeche: var(--color-surface-dark);   /* Figma Surface/dark */
}

.ag-process-chain--flaeche-mit .ag-process-step__dot {
    --ag-process-marker-fill: var(--ag-process-chain-flaeche);
}

/* Das Endglied bleibt gefuellt — die Flaechenangleichung gilt nur fuer
   die offenen Punkte (gemessen: 5 von 6 Overrides je Variante). */
.ag-process-chain--flaeche-mit .ag-process-step--stark .ag-process-step__dot {
    --ag-process-marker-fill: var(--color-surface-brand);
}

/* ── Mobil-Regel A6 ──────────────────────────────────────────────
   Entscheidung Vincent, 08.09.2026 — kein Mobil-Frame in Figma:
   `raster` kippt unter 1200 px auf die senkrechte Form. Die Marke ist
   die Contentbreite (--content-width 1200), nicht --bp-md: sechs
   Spalten mit umbrechender Beschriftung tragen schon knapp darunter
   nicht mehr.

   Das Markup bleibt unveraendert — nur die Achsen drehen sich. Die
   Beschriftung behaelt Copy/M (die Groesze von `raster`) statt auf
   Copy/L zu wachsen: auf schmalen Schirmen ist der kleinere Grad
   richtig. Das ist eine bewusste Abweichung von `vertikal` und im
   Kontrakt vermerkt. */

@media (max-width: 1199px) {

    .ag-process-chain--raster .ag-process-chain__items {
        flex-direction: column;
        gap: var(--spacing-m);                            /* wie vertikal: 16 */
    }

    /* Reihenfolge beachten: `inset-block` setzt top UND bottom. Ein
       spaeteres `top: auto` wuerde die Oberkante wieder loesen — gemessen
       08.09.2026, die Linie war dadurch 0 px hoch. Deshalb erst die
       waagerechte Lage aufloesen, dann die senkrechte setzen. */
    .ag-process-chain--raster .ag-process-chain__rule {
        inset-inline-end: auto;
        inset-inline-start: calc(var(--ag-process-chain-pad) + (var(--ag-process-chain-punkt) - var(--ag-process-chain-strich)) / 2);
        inset-block: calc(var(--ag-process-chain-pad) + var(--ag-process-chain-zeile-mobil, 21px) / 2);
        width: var(--ag-process-chain-strich);
        height: auto;
        background: var(--gradient-fusion-basic--vertikal);
    }

    /* Aus der Spalte wird eine Zeile: Punkt · Nummer · Beschriftung.
       Die Nummer sitzt in der Quelle von `raster` IM Textblock; sie
       bleibt dort und ruckt nur neben die Beschriftung. */
    .ag-process-chain--raster .ag-process-step--marker-oben {
        flex-direction: row;
        flex: 0 0 auto;
        width: 100%;
    }

    .ag-process-chain--raster .ag-process-step--marker-oben .ag-process-step__dot {
        margin-block-start: calc((var(--ag-process-chain-zeile-mobil, 21px) - var(--ag-process-chain-punkt)) / 2);
    }

    .ag-process-chain--raster .ag-process-step--marker-oben .ag-process-step__content {
        flex-direction: row;
        align-items: baseline;
        gap: var(--spacing-m);                            /* wie Marker=links: 16 */
    }

    .ag-process-chain--raster .ag-process-step--marker-oben .ag-process-step__num {
        flex: 0 0 var(--spacing-l);                       /* feste Breite 32, wie Marker=links */
    }
}

/* ── Einblendung: Choreografie Linie → Punkte → Text ─────────────
   Quelle: 0.7 · shelf/prozesskette-reveal (4222:55355), gemessen
   08.09.2026. Rezept: Linie Motion/expand 550 · Punkt Motion/hover 350 ·
   Text Motion/state 450 · Stagger m 120 je Glied, s 60 Punkt→Text ·
   Weg shift 6 px · Trigger 86 % Viewport, einmalig · nur transform
   und opacity.

   Abweichung A8, ausdruecklich: Das Regal schlaegt die Klassen `.js`
   und `.is-revealed` vor. Der Bestand nutzt `html.ag-anim-ready` als
   JS-Gate und `.is-inview` als Zustand (reveal.js, Trigger ebenfalls
   86 %). Uebernommen wird das Rezept, nicht die Klassennamen — sonst
   liefen zwei Reveal-Systeme nebeneinander. `--i` je Glied setzt das
   Partial im Markup, es braucht dafuer kein eigenes Skript.

   Grundzustand ist sichtbar: ohne JavaScript blendet nichts aus. */

html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] .ag-process-chain__rule,
html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] .ag-process-chain__rule {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--motion-expand) var(--motion-ease-standard);
}

html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] .ag-process-chain__rule {
    transform: scaleY(0);
    transform-origin: 50% 0;
}

html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] .ag-process-step__dot,
html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] .ag-process-step__dot {
    opacity: 0;
    transform: scale(.4);
    transition: opacity var(--motion-hover) var(--motion-ease-standard),
                transform var(--motion-hover) var(--motion-ease-standard);
    transition-delay: calc(var(--i, 0) * var(--motion-stagger-m));
}

html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] .ag-process-step__num,
html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] .ag-process-step__label,
html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] .ag-process-step__num,
html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] .ag-process-step__label {
    opacity: 0;
    transform: translateY(var(--motion-distance-shift));
    transition: opacity var(--motion-state) var(--motion-ease-standard),
                transform var(--motion-state) var(--motion-ease-standard);
    transition-delay: calc(var(--i, 0) * var(--motion-stagger-m) + var(--motion-stagger-s));
}

/* Senkrecht kommt der Text von links wie eine Listenzeile. */
html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] .ag-process-step__num,
html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] .ag-process-step__label {
    transform: translateX(calc(-1 * var(--motion-distance-shift)));
}

html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"].is-inview :is(.ag-process-chain__rule, .ag-process-step__dot, .ag-process-step__num, .ag-process-step__label),
html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"].is-inview :is(.ag-process-chain__rule, .ag-process-step__dot, .ag-process-step__num, .ag-process-step__label) {
    opacity: 1;
    transform: none;
}

/* Unter 1200 px kippt raster auf die senkrechte Form — dann waechst
   auch seine Linie senkrecht und der Text kommt von links. */
@media (max-width: 1199px) {
    html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] .ag-process-chain__rule {
        transform: scaleY(0);
        transform-origin: 50% 0;
    }

    html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] .ag-process-step__num,
    html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] .ag-process-step__label {
        transform: translateX(calc(-1 * var(--motion-distance-shift)));
    }
}

@media (prefers-reduced-motion: reduce) {
    html.ag-anim-ready .ag-process-chain--raster[data-ag-anim="reveal"] :is(.ag-process-chain__rule, .ag-process-step__dot, .ag-process-step__num, .ag-process-step__label),
    html.ag-anim-ready .ag-process-chain--vertikal[data-ag-anim="reveal"] :is(.ag-process-chain__rule, .ag-process-step__dot, .ag-process-step__num, .ag-process-step__label) {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Groesse=kompakt — neu 4.0.0 (A9, Entscheidung Vincent 17.09.2026).

   KEINE Figma-Quelle. Rueckspielpunkt auf 0.8: Achse `Größe` im Set
   process-chain (2924:21787) fehlt noch. Zweck: mehr oder laengere
   Glieder unterbringen. Regel: jede Groesse eine Stufe kleiner, nur
   vorhandene Text Styles und Spacing-Stufen:

     kette     Copy/L 24/32 → Copy/M 16/21 (stark: Headline/S)
               Glied-Luecke 24 → 16 · Polster 24 → 16 · Gliedabstand 12 → 8
     vertikal  Copy/L 24/32 → Copy/M 16/21 · Zeilenabstand 16 → 8
     raster    Copy/M 16/21 → Copy/S 14/19 · Spaltenluecke 24 → 16

   Die Linienlage haengt an der Zeilenhoehe — sie steht deshalb als
   L3-Variable da und wird hier nur umgestellt, nicht neu gerechnet.

   Spezifitaet (0,3,0) mit Absicht: process-step.css laedt nach diesem
   Blatt und setzt die Label-Groesse je Marker mit (0,2,0).
   ══════════════════════════════════════════════════════════════════ */

.ag-process-chain.ag-process-chain--kompakt {
    --ag-process-chain-gap: var(--spacing-m);             /* 16 statt 24 */
    --ag-process-chain-pad-block: var(--spacing-m);       /* 16 statt 24 */
}

/* ── kette ───────────────────────────────────────────────────── */

.ag-process-chain--kompakt.ag-process-chain--kette .ag-process-step {
    --ag-process-step-gap: var(--spacing-s);              /* 8 statt 12 */
    --ag-process-step-hoehe: 21px;                        /* Copy/M 16/21 — eine Zeile */
    --ag-process-step-fs: var(--fs-300);                  /* Copy/M 16 */
    --ag-process-step-lh: calc(21 / 16);
}

.ag-process-chain--kompakt.ag-process-chain--kette .ag-process-step__arrow {
    min-width: var(--spacing-ml);                         /* 24 statt 32 */
}

/* Lange Beschriftungen duerfen umbrechen, statt in das Nachbarglied zu
   laufen. Im Standard hugt der Textblock (Quelle) und die Regal-Regel
   verlangt ein bis zwei Woerter — genau das hebt `kompakt` auf.
   Gemessen 17.09.2026: ohne diese Regel ueberlappten sechs lange Glieder
   auf 1200 px. Umbruch nur an Wortgrenzen, Trennung per Silbe. */
.ag-process-chain--kompakt.ag-process-chain--kette .ag-process-step__content {
    flex: 0 1 auto;
    min-width: 0;
}

.ag-process-chain--kompakt.ag-process-chain--kette .ag-process-step__label {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ── vertikal ────────────────────────────────────────────────── */

.ag-process-chain.ag-process-chain--kompakt.ag-process-chain--vertikal {
    --ag-process-chain-zeile: 21px;                       /* Copy/M 16/21 */
}

.ag-process-chain.ag-process-chain--kompakt.ag-process-chain--vertikal .ag-process-chain__items {
    gap: var(--spacing-s);                                /* 8 statt 16 */
}

.ag-process-chain.ag-process-chain--kompakt .ag-process-step--marker-links {
    --ag-process-step-gap: var(--spacing-ms);             /* 12 statt 16 */
    --ag-process-step-dot-versatz: 4.5px;                 /* (21 − 12) / 2 */
}

.ag-process-chain.ag-process-chain--kompakt .ag-process-step--marker-links .ag-process-step__num {
    --ag-process-step-dot-versatz: 2.5px;                 /* (21 − 16) / 2 */
    flex-basis: var(--spacing-ml);                        /* 24 statt 32 */
}

.ag-process-chain.ag-process-chain--kompakt .ag-process-step--marker-links .ag-process-step__label {
    --ag-process-step-fs: var(--fs-300);                  /* Copy/M 16 */
    --ag-process-step-lh: calc(21 / 16);
}

/* ── raster ──────────────────────────────────────────────────── */

.ag-process-chain.ag-process-chain--kompakt .ag-process-step--marker-oben {
    --ag-process-step-gap: var(--spacing-ms);             /* 12 statt 16 */
}

.ag-process-chain.ag-process-chain--kompakt .ag-process-step--marker-oben .ag-process-step__label {
    --ag-process-step-fs: var(--fs-200);                  /* Copy/S 14 */
    --ag-process-step-lh: calc(19 / 14);
}

.ag-process-chain.ag-process-chain--kompakt.ag-process-chain--raster {
    --ag-process-chain-zeile-mobil: 19px;                 /* Copy/S 14/19 — fuer die Mobil-Regel A6 */
}

@media (max-width: 1199px) {
    .ag-process-chain.ag-process-chain--kompakt.ag-process-chain--raster .ag-process-chain__items {
        gap: var(--spacing-s);                            /* wie kompakt vertikal: 8 */
    }
}