.ablauf-rahmen{container:ablauf / inline-size}.ablauf-reihe{--knoten: 3.5rem;--flaeche: var(--bg);display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}[data-surface=inverse] .ablauf-reihe{--flaeche: var(--surface-inverse)}.ablauf-reihe[data-n="3"]{--n: 3}.ablauf-reihe[data-n="4"]{--n: 4}.ablauf-reihe[data-n="5"]{--n: 5}.a-schritt:nth-child(2){--i: 1}.a-schritt:nth-child(3){--i: 2}.a-schritt:nth-child(4){--i: 3}.a-schritt:nth-child(5){--i: 4}.a-schritt{--i: 0;position:relative;display:grid;grid-template-columns:var(--knoten) minmax(0,1fr);column-gap:var(--space-5);margin:0;padding-bottom:clamp(var(--space-8),6vw,var(--space-12))}.a-schritt:last-child{padding-bottom:0}.a-knoten{position:relative;z-index:2;display:grid;place-items:center;width:var(--knoten);height:var(--knoten);border-radius:50%;background:var(--koralle);color:var(--navy);font-size:var(--fs-text);font-weight:var(--fw-bold);letter-spacing:.04em;box-shadow:0 0 0 .45rem var(--flaeche)}.a-knoten:before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 var(--kante-knopf) var(--creme-leise);opacity:0;pointer-events:none}.a-titel{margin:0;padding-top:var(--space-3);font-size:var(--fs-h4);font-weight:var(--w-schwer);font-style:italic;letter-spacing:var(--track-h2);line-height:var(--lh-titel)}.a-satz{margin:var(--space-2) 0 0;font-size:var(--fs-text);line-height:var(--lh-base)}.a-seg{position:absolute;z-index:1;overflow:visible;pointer-events:none}.a-seg line{fill:none;stroke-width:2;stroke-linecap:butt;vector-effect:non-scaling-stroke}.a-seg .bahn{stroke:var(--linie-stark)}.a-seg .zug{stroke:var(--koralle);stroke-dasharray:1;stroke-dashoffset:0}.a-seg-v{left:calc(var(--knoten) / 2 - 1px);top:calc(var(--knoten) / 2);width:2px;height:100%}.a-seg-h{display:none}@container ablauf (min-width: 56rem){.ablauf-reihe{grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--grid-gap)}.a-schritt{display:block;padding-bottom:0}.a-text{margin-top:var(--space-6)}.a-titel{padding-top:0}.a-seg-v{display:none}.a-seg-h{display:block;left:calc(var(--knoten) / 2);top:calc(var(--knoten) / 2 - 1px);width:calc(100% + var(--grid-gap));height:2px}}@media(prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){.a-schritt .zug{animation:zeichnen linear both;animation-timeline:view();animation-range:entry 45% cover 55%}.a-schritt .a-knoten{animation:knoten linear both;animation-timeline:view();animation-range:entry 35% entry 85%}.a-schritt .a-knoten:before{animation:knoten-ring linear both;animation-timeline:view();animation-range:entry 35% entry 85%}.a-schritt .a-text{animation:hoch linear both;animation-timeline:view();animation-range:entry 30% entry 90%}@container ablauf (min-width: 56rem){.ablauf-reihe{view-timeline:--abl block}.a-schritt :is(.zug,.a-knoten,.a-text),.a-schritt .a-knoten:before{animation-timeline:--abl}.a-schritt .a-knoten,.a-schritt .a-knoten:before{animation-range:cover calc(5% + var(--i) * 10%) cover calc(11% + var(--i) * 10%)}.a-schritt .zug{animation-range:cover calc(11% + var(--i) * 10%) cover calc(19% + var(--i) * 10%)}.a-schritt .a-text{animation-range:cover calc(5% + var(--i) * 10%) cover calc(14% + var(--i) * 10%)}}}}
