.ablauf__kopf .lead {max-width:36rem;margin-top:20px}
.ablauf__demo {display:grid;grid-template-columns:minmax(0,1fr);gap:56px;margin-top:32px}
.branchendemo__wahl {min-width:0;margin-top:32px;grid-column:1/-1}
.branchendemo__wahl legend {margin-bottom:12px;color:var(--tinte);font-size:.9375rem;font-weight:600}
.branchendemo__wahl input:focus-visible + span {transition:none}
.branchendemo__fassung {min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.branchendemo__betrieb {font-weight:600}
.schritte {display:grid;gap:44px}
.schritt {position:relative;padding-left:56px}
.schritt__nr {position:absolute;left:0;top:-4px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--violett-hauch);color:var(--violett);font:800 1rem/1 var(--anzeige)}
.schritt .h3 {margin-bottom:12px}
.schritt > p {color:var(--tinte-weich)}
.schritt__foto {display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:20px;color:var(--tinte-weich)}
.schritt__foto img {width:120px;aspect-ratio:4/5;object-fit:cover;border-radius:12px;box-shadow:var(--schatten-papier)}
.schritt .klein {margin-top:16px}
@media (max-width:699px) {.schritt {padding-left:0} .schritt__nr {position:static;margin-bottom:14px} .stichworte__text {font-size:1.3125rem} .schritt__foto {grid-template-columns:96px minmax(0,1fr)} .schritt__foto img {width:96px}}
.anlass__wahl,.vorlagen__chips {display:flex;flex-wrap:wrap;gap:8px}
.wahlchip {position:relative;display:inline-flex}
.wahlchip input {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wahlchip span {display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--karte);color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--linie);font-size:.9375rem;font-weight:500;transition:scale 140ms var(--e1)}
.wahlchip input:checked + span {background:var(--violett);color:#fff;box-shadow:none}
.wahlchip input:focus-visible + span {outline:3px solid var(--fokus);outline-offset:3px}
.wahlchip input:active + span {scale:.97}
.flaeche-nacht .wahlchip span {background:transparent;color:var(--licht);box-shadow:inset 0 0 0 1.5px var(--nacht-linie)}
.flaeche-nacht .wahlchip input:checked + span {background:var(--violett-knopf);color:#fff;box-shadow:none}
@media (hover:hover) and (pointer:fine) {.wahlchip input:not(:checked):hover + span {box-shadow:inset 0 0 0 1.5px var(--akzent)}}
.stichworte {margin-top:18px;padding:14px 18px 16px;border-radius:12px;background:#FFFDF6;box-shadow:0 1px 0 rgb(36 35 41/.06),0 14px 30px -18px rgb(36 35 41/.45);rotate:-.6deg}
.stichworte__kopf {color:var(--tinte-weich);font:600 .6875rem/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase}
.stichworte__text {margin-top:6px;font:600 1.5rem/1.1 var(--hand)}
.ablauf__ergebnis {display:grid;justify-items:start;gap:16px;width:min(100%,460px)}
.ablauf__beispiel {display:grid;justify-items:start;row-gap:12px;width:100%}
.ablauf__beispiel .beitrag--demo {justify-self:stretch}
.beitrag--demo {width:100%;border-radius:20px;box-shadow:var(--schatten-papier)}
.beitrag--demo .beitrag__text {font-size:.9375rem}
.schritt__kopf {display:flex;align-items:center;gap:18px;margin-bottom:4px}
.schritt__kopf .schritt__nr {position:static}
.ablauf__pruefen {color:var(--tinte-weich)}
.ablauf__ergebnis .knopf {max-width:100%;margin-top:8px;white-space:normal;text-align:center}
.ablauf__kennung {margin:0;color:var(--schrift-weich)}
@media (min-width:700px) and (max-width:1023px) {.ablauf__ergebnis {justify-self:center}}
@media (min-width:1024px) {
    .ablauf {overflow-x:clip}
    .ablauf__kopf {grid-column:1/8}
    .ablauf__demo {grid-column:1/-1;grid-template-columns:subgrid;align-items:start}
    .branchendemo__fassung {grid-column:1/-1;grid-template-columns:subgrid;align-items:start}
    .schritte {grid-column:1/6;padding-top:56px}
    .ablauf__ergebnis {grid-column:7/-1;grid-template-columns:minmax(0,460px);justify-content:center;width:auto;margin-right:calc((min(100vw - 2 * var(--rand),1360px) - 100vw) / 2);padding:44px clamp(2rem,4vw,4.5rem) 52px;border-radius:40px 0 0 40px;background:var(--violett-hauch)}
    .ablauf__ergebnis .schritt__nr {background:var(--karte)}
}
@supports selector(:has(*)) {
    .branchendemo__fassung {grid-column:1/-1;grid-row:1;visibility:hidden;pointer-events:none}
    .ablauf:has(#demobranche-tischlerei:checked) .branchendemo__fassung--tischlerei,
    .ablauf:has(#demobranche-sanitaer:checked) .branchendemo__fassung--sanitaer,
    .ablauf:has(#demobranche-autowerkstatt:checked) .branchendemo__fassung--autowerkstatt,
    .ablauf:has(#demobranche-kraftwerk:checked) .branchendemo__fassung--kraftwerk {visibility:visible;pointer-events:auto}
}
.fuehrung {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;--fuehrung-hoehe:clamp(420px,calc(100svh - var(--kopf) - 92px),640px)}
.fuehrung__schritte {order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;counter-reset:fs}
.fuehrung__schritte li {position:relative;isolation:isolate;counter-increment:fs;display:grid;justify-items:center;gap:4px;color:var(--tinte-weich);font-size:.75rem;text-align:center}
.fuehrung__schritte li::before {content:counter(fs);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--violett-hauch);color:var(--violett);font-weight:600;transition:background-color 240ms var(--e1),color 240ms var(--e1)}
.fuehrung__schritte b {font-weight:600;transition:color 240ms var(--e1)}
.fuehrung__schritte span {display:none}
.fuehrung__schritte li.ist-dran::before {background:var(--violett);color:#fff}
.fuehrung__schritte li.ist-dran b {color:var(--tinte)}
.fuehrung__buehne {order:2;display:flex;flex-direction:column;height:var(--fuehrung-hoehe);margin:0;overflow:hidden;border-radius:20px;background:var(--karte);box-shadow:var(--schatten-papier)}
.fuehrung__bild {position:relative;flex:1 1 0;min-height:0;background:var(--violett-hauch)}
.fuehrung__foto,.fuehrung__beitrag {position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fuehrung__beitrag {transition:opacity 520ms var(--e1),transform 900ms var(--e1)}
.fuehrung__zettel {position:absolute;left:12px;right:12px;bottom:12px;margin:0;opacity:0;transform:translateY(16px);transition:opacity 360ms var(--e1),transform 520ms var(--e1)}
.fuehrung__zettel .stichworte__text {clip-path:inset(0 0 0 0)}
.fuehrung__text {flex:none;padding:12px 16px 0;font-size:.875rem;line-height:1.4;transition:opacity 420ms var(--e1),transform 520ms var(--e1)}
.fuehrung__text p {margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.fuehrung__text .branchendemo__betrieb {display:block;font-weight:600}
.fuehrung__aktion {flex:none;display:grid;align-items:center;justify-items:start;min-height:64px;padding:8px 16px 12px}
.fuehrung__aktion > * {grid-area:1/1;margin:0;transition:opacity 240ms var(--e1),transform 320ms var(--e1)}
.fuehrung__knopf {transform:translateY(6px);justify-self:stretch;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;background:var(--violett);color:#fff;font-size:.9375rem;font-weight:600;opacity:0}
.chip--frei {background:#DDF3E4;color:#14532D}
.fuehrung__frei {opacity:0;transform:translateY(6px)}
.fuehrung__weiter {order:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:8px}
.fuehrung__weiter .knopf {max-width:100%;white-space:normal;text-align:center}
.fuehrung__nochmal {display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--tinte);font:inherit;font-weight:600;cursor:pointer}
.fuehrung__nochmal[hidden] {display:none}
.fuehrung .ablauf__kennung {order:3;margin:0;color:var(--schrift-weich)}
[data-demo-schritt='0'] .fuehrung__beitrag,[data-demo-schritt='1'] .fuehrung__beitrag,[data-demo-schritt='2'] .fuehrung__beitrag {opacity:0;transform:scale(1.025)}
[data-demo-schritt='0'] .fuehrung__text,[data-demo-schritt='1'] .fuehrung__text,[data-demo-schritt='2'] .fuehrung__text {opacity:0;transform:translateY(8px)}
[data-demo-schritt='0'] .fuehrung__aktion > .chip--entwurf,[data-demo-schritt='1'] .fuehrung__aktion > .chip--entwurf,[data-demo-schritt='2'] .fuehrung__aktion > .chip--entwurf {opacity:0;transform:translateY(6px)}
[data-demo-schritt='2'] .fuehrung__zettel {opacity:1;transform:none}
[data-demo-schritt='3'] .fuehrung__beitrag {transition-delay:120ms}
[data-demo-schritt='3'] .fuehrung__text {transition-delay:220ms}
[data-demo-schritt='3'] .fuehrung__aktion > .chip--entwurf {transition-delay:300ms}
:is([data-demo-schritt='0'],[data-demo-schritt='1']) .fuehrung__zettel .stichworte__text {clip-path:inset(0 100% 0 0)}
[data-demo-schritt='2'] .fuehrung__zettel .stichworte__text {clip-path:inset(0 0 0 0);transition:clip-path 1100ms steps(26,end) 300ms}
[data-demo-schritt='1'] .fuehrung__foto {animation:demo-foto 700ms var(--e1) both}
@keyframes demo-foto {from {opacity:0;transform:scale(1.04)}}
:is([data-demo-schritt='4'],[data-demo-schritt='druck'],[data-demo-schritt='fertig']) .fuehrung__aktion > .chip--entwurf {opacity:0}
:is([data-demo-schritt='4'],[data-demo-schritt='druck']) .fuehrung__knopf {opacity:1;transform:none;transition-delay:160ms}
[data-demo-schritt='druck'] .fuehrung__knopf {transform:scale(.97);transition-delay:0ms}
[data-demo-schritt='fertig'] .fuehrung__frei {opacity:1;transform:none;transition-delay:140ms}
[data-demo-schritt='fertig'] .fuehrung__knopf {opacity:0;transform:scale(.97)}
@media (min-width:1024px) {
    .fuehrung {grid-column:1/-1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:16px;align-items:start;--fuehrung-hoehe:clamp(520px,calc(100svh - var(--kopf) - 64px),680px)}
    .fuehrung__schritte {order:0;grid-column:1/7;grid-row:1;grid-template-columns:minmax(0,1fr);gap:12px}
    .fuehrung__schritte li {grid-template-columns:44px minmax(0,1fr);justify-items:start;column-gap:16px;row-gap:2px;padding:16px;border-radius:16px;font-size:1rem;text-align:left}
    .fuehrung__schritte li::after {content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--karte);box-shadow:var(--schatten-papier);opacity:0;transition:opacity 320ms var(--e1)}
    .fuehrung__schritte li.ist-dran::after {opacity:1}
    .fuehrung__schritte li::before {grid-row:1/3;width:44px;height:44px;font-size:1.125rem}
    .fuehrung__schritte b {font-size:1.25rem;color:var(--tinte)}
    .fuehrung__schritte span {display:block;line-height:1.45}
    .fuehrung__weiter {order:0;grid-column:1/7;grid-row:2;margin-top:0}
    .fuehrung__buehne {order:0;grid-column:8/13;grid-row:1/4}
    .fuehrung .ablauf__kennung {order:0;grid-column:1/7;grid-row:3}
    .fuehrung__text {font-size:.9375rem}
}
@media (prefers-reduced-motion: reduce) {
    .ablauf__demo, .ablauf__demo *, .ablauf__demo *::before, .ablauf__demo *::after {transition:none !important;animation:none !important}
}
.fuehrung__lauf {grid-column:1/-1;width:min(100%,56px);height:2px;overflow:hidden;border-radius:2px;background:var(--violett-hauch);opacity:0;transition:opacity 200ms var(--e1)}
.fuehrung__lauf::after {content:'';display:block;height:100%;background:var(--violett);transform:scaleX(0);transform-origin:0 50%}
.ablauf__demo[data-demo-schritt] .fuehrung__schritte li.ist-dran .fuehrung__lauf {opacity:1}
.ablauf__demo[data-demo-schritt] .fuehrung__schritte li.ist-dran .fuehrung__lauf::after {animation:fuehrung-lauf var(--schritt-dauer,2000ms) linear forwards}
.ablauf__demo.ist-angehalten .fuehrung__schritte li.ist-dran .fuehrung__lauf::after {animation-play-state:paused}
@keyframes fuehrung-lauf {to {transform:none}}
@media (min-width:1024px) {
    .fuehrung .fuehrung__lauf {position:absolute;left:76px;right:16px;bottom:9px;width:auto}
}
@supports selector(:has(*)) {
    .ablauf .branchendemo__fassung {opacity:0;transition:opacity 260ms var(--e5),visibility 0s linear 260ms}
    .ablauf:has(#demobranche-tischlerei:checked) .branchendemo__fassung--tischlerei,
    .ablauf:has(#demobranche-sanitaer:checked) .branchendemo__fassung--sanitaer,
    .ablauf:has(#demobranche-autowerkstatt:checked) .branchendemo__fassung--autowerkstatt,
    .ablauf:has(#demobranche-kraftwerk:checked) .branchendemo__fassung--kraftwerk {opacity:1;transition:opacity 420ms var(--e1) 60ms,visibility 0s}
}
@media (prefers-reduced-motion:reduce) {
    .ablauf .ablauf__demo .branchendemo__fassung {transition:opacity 200ms linear,visibility 0s linear 200ms !important}
    .ablauf:has(#demobranche-tischlerei:checked) .ablauf__demo .branchendemo__fassung--tischlerei,
    .ablauf:has(#demobranche-sanitaer:checked) .ablauf__demo .branchendemo__fassung--sanitaer,
    .ablauf:has(#demobranche-autowerkstatt:checked) .ablauf__demo .branchendemo__fassung--autowerkstatt,
    .ablauf:has(#demobranche-kraftwerk:checked) .ablauf__demo .branchendemo__fassung--kraftwerk {transition:opacity 200ms linear,visibility 0s !important}
    .fuehrung__lauf {display:none}
}
@media (max-width:699px) {
    :is([data-demo-schritt='0'],[data-demo-schritt='1'],[data-demo-schritt='2']) :is(.fuehrung__text,.fuehrung__aktion) {display:none}
    :is([data-demo-schritt='0'],[data-demo-schritt='1'],[data-demo-schritt='2']) .fuehrung__foto {object-fit:cover}
}