.process .scene{display:none}
.process.leiste-animiert .process-list>div:before{display:none}

.process.leiste-animiert .process-list{container-type:inline-size}
.process.leiste-animiert .scene{
  --ink:#242923;--muted:#7b8177;--skel:#ddd8cb;--card:#fbfaf6;--green:#3f6b58;--warm:#76793a;--grey:#b9bcb0;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;position:relative;aspect-ratio:3/2;margin-bottom:24px;padding:6%;border-radius:12px;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 10%,#efebe1 0%,#e3ddd0 55%,#d8d1c1 100%);
  box-shadow:0 0 0 1px rgba(36,41,35,.08),0 24px 50px -28px rgba(36,41,35,.5);
  font-size:clamp(10px,calc((100cqw - 80px)/3*.0305),13.5px);line-height:1.35;color:var(--ink);text-align:left}
.process .scene p{margin:0;max-width:none;font-size:inherit;line-height:inherit;color:inherit;grid-column:auto} 
.process .scene span,.process .scene strong{font-variant-numeric:normal;letter-spacing:normal}


.sc-note,.sc-site,.sc-comment,.sc-palette{background:var(--card);border-radius:.7em;box-shadow:0 0 0 1px rgba(36,41,35,.06),0 1.4em 2.8em -1.3em rgba(36,41,35,.55)}
.sc-bar{display:flex;align-items:center;gap:.3em;padding:.42em .7em;background:#ebe7dd;border-bottom:1px solid #dcd7ca}
.sc-bar i{width:.5em;height:.5em;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sc-bar i:nth-child(2){background:#febc2e}
.sc-bar i:nth-child(3){background:#28c840}
.process .scene .sc-bar span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.5em;font-size:max(.66em,7px);color:var(--muted);background:#f6f4ee;border-radius:99px;padding:.12em .9em}
.sc-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:.85em;padding:.85em;align-items:center;border-top:.18em solid var(--acc)}
.sc-copy{display:grid;gap:.45em;justify-items:start;align-content:center}
.process .scene .sc-h{display:block;font-size:1.12em;line-height:1.12;font-weight:600;letter-spacing:-.02em;border-radius:.25em}
.sc-h b{color:var(--acc)}
.process .scene .sc-sub{display:block;font-size:.74em;color:#63665e;border-radius:.25em}
.process .scene .sc-btn{display:inline-block;font-size:.7em;font-weight:600;color:#fff;background:var(--acc);border-radius:99px;padding:.38em 1.05em}
.sc-img{border-radius:.45em;overflow:hidden;aspect-ratio:5/4;background:var(--skel)}
.sc-img img{display:block;width:100%;height:100%;object-fit:cover}


.scene--notes .sc-note,.scene--notes .sc-sheet{grid-area:1/1;justify-self:center;width:min(100%,25em)}
.sc-note{position:relative;padding:1.05em 1.25em 1.1em}

.sc-sheet{align-self:stretch;border-radius:.7em;background:#f1eee6;transform:rotate(-3.2deg) translate(-.3em,.35em);box-shadow:0 0 0 1px rgba(36,41,35,.06),0 1em 2em -1.2em rgba(36,41,35,.45)}
.process .scene .sc-label{font-size:max(.66em,7px);letter-spacing:.14em;font-weight:600;color:var(--muted);text-transform:uppercase;margin-bottom:.55em}
.process .scene .sc-row{display:grid;gap:.08em;padding:.5em 0 .1em;border-top:1px solid #e3dfd4}
.process .scene .sc-q{font-size:.76em;color:var(--muted)}
.process .scene .sc-a{display:block;font-size:1.04em;font-weight:500;color:var(--ink)}
.sc-a mark{color:inherit;background:linear-gradient(transparent 52%,#e5edbc 52%,#e5edbc 92%,transparent 92%) no-repeat 0 0/100% 100%;padding:0 .08em;margin:0 -.08em}


.scene--build{gap:.7em}
.scene--build .sc-site{--acc:var(--green);overflow:hidden}
.sc-palette{justify-self:end;display:flex;align-items:center;gap:.5em;padding:.4em .6em .4em .75em;border-radius:99px}
.process .scene .sc-palette span{font-size:max(.66em,7px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:.2em}
.sc-palette i{width:1.15em;height:1.15em;border-radius:50%;background:var(--c);box-shadow:0 0 0 .14em rgba(251,250,246,0),0 0 0 .28em rgba(36,41,35,0)}
.sc-palette i:nth-of-type(1){--c:#3c5a7a}
.sc-palette i:nth-of-type(2){--c:#a0643c}
.sc-palette i:nth-of-type(3){--c:var(--green);box-shadow:0 0 0 .14em var(--card),0 0 0 .28em var(--ink)}


.process.leiste-animiert .scene--refine{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.8em;align-items:center}
.scene--refine .sc-site{--acc:var(--warm);position:relative}
.scene--refine .sc-page{grid-template-columns:1fr;gap:.55em;padding:.7em}
.scene--refine .sc-img{aspect-ratio:2/1;order:-1}
.process .scene--refine .sc-h{font-size:.98em}
.process .scene--refine .sc-sub{display:none}
.scene--refine .sc-btn{position:relative}
.process .scene .sc-pin{position:absolute;top:.2em;right:-2.15em;width:1.7em;height:1.7em;border-radius:50% 50% 50% .2em;background:var(--ink);color:var(--card);font-size:.9em;font-weight:700;display:grid;place-items:center;box-shadow:0 .5em 1em -.4em rgba(0,0,0,.6)}
.sc-side{display:grid;gap:.6em;justify-items:start}
.sc-comment{padding:.7em .8em;display:grid;gap:.55em;width:100%}
.process .scene .sc-comment p{font-size:.82em;line-height:1.35}
.sc-comment strong{display:block;font-size:.8em;font-weight:700;letter-spacing:.02em;color:var(--muted);margin-bottom:.1em}
.sc-c2{padding-top:.5em;border-top:1px solid #e3dfd4}


body.js-reveal .process.leiste-animiert .scene{opacity:0;transform:scale(1.04);filter:blur(14px)}
body.js-reveal .process.leiste-animiert.is-in .scene{animation:pl-in 1.1s cubic-bezier(.16,1,.3,1) calc(.7s + var(--k)*.55s) forwards}


.process.scenes-armed .scene:not(.is-playing) *{animation-play-state:paused!important}
@keyframes sc-in{from{opacity:0;transform:translateY(.6em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes sc-pop{0%{opacity:0;transform:scale(.3);filter:blur(4px)}70%{opacity:1;transform:scale(1.12);filter:none}100%{opacity:1;transform:scale(1)}}


.process .scene .tc{font:inherit;letter-spacing:inherit;color:inherit;font-variant-numeric:inherit}
.process.scenes-armed .tc{visibility:hidden}
.process.scenes-armed .tc.on{visibility:visible}
.process .tc.cur{position:relative}
.process .tc.cur:after{content:"";visibility:visible;position:absolute;top:.08em;bottom:0;right:-2px;width:1px;background:currentColor}
.process .tc.cur.pre:after{right:auto;left:-2px;animation:tp-blink .9s steps(1,end) infinite}
@keyframes tp-blink{50%{opacity:0}}


@keyframes sc-sheet{from{opacity:0;transform:none}to{opacity:1;transform:rotate(-3.2deg) translate(-.3em,.35em)}}
.process.scenes-armed .scene--notes .sc-sheet{animation:sc-sheet .9s cubic-bezier(.16,1,.3,1) .35s both}
.process.scenes-armed .scene--notes .sc-note{animation:sc-in .7s cubic-bezier(.16,1,.3,1) both}
.process.scenes-armed .scene--notes .sc-label{animation:sc-in .5s cubic-bezier(.16,1,.3,1) .3s both}
.process.scenes-armed .scene--notes .sc-row{animation:sc-in .45s cubic-bezier(.16,1,.3,1) var(--d) both}
.process.scenes-armed .scene--notes .sc-a mark{background-size:0% 100%;transition:background-size .45s cubic-bezier(.55,0,.35,1)}
.process.scenes-armed .scene--notes .sc-a mark.is-marked{background-size:100% 100%}

.scene--notes .sc-row:nth-of-type(2){--d:.3s}
.scene--notes .sc-row:nth-of-type(3){--d:1.5s}
.scene--notes .sc-row:nth-of-type(4){--d:2.55s}


@keyframes sc2-site{0%{opacity:.5;transform:perspective(40em) rotateX(16deg) rotateY(-12deg) scale(.9);filter:blur(3px)}13%{opacity:1;filter:none}49%,100%{opacity:1;transform:none;filter:none}}
@keyframes sc2-h{0%,9%{color:transparent;background-color:var(--skel)}12%,100%{color:var(--ink);background-color:rgba(221,216,203,0)}}
@keyframes sc2-dot{0%,9%{color:transparent}12%,90%{color:var(--grey)}99%,100%{color:var(--green)}}
@keyframes sc2-sub{0%,33%{color:transparent;background-color:var(--skel)}36.5%,100%{color:#63665e;background-color:rgba(221,216,203,0)}}
@keyframes sc2-btn{0%,65.5%{color:transparent;background-color:var(--skel)}73%,90%{color:#fff;background-color:var(--grey)}99%,100%{color:#fff;background-color:var(--green)}}
@keyframes sc2-line{0%,90%{border-top-color:var(--grey)}99%,100%{border-top-color:var(--green)}}
@keyframes sc2-img{0%,66.5%{opacity:0;filter:blur(10px);transform:scale(1.08)}80%,100%{opacity:1;filter:none;transform:none}}
@keyframes sc2-pal{0%,72%{opacity:0;transform:translateY(.6em);filter:blur(4px)}78%,100%{opacity:1;transform:none;filter:none}}
@keyframes sc2-r1{0%,78.5%{box-shadow:0 0 0 .14em rgba(251,250,246,0),0 0 0 .28em rgba(36,41,35,0)}80.5%,83%{box-shadow:0 0 0 .14em #fbfaf6,0 0 0 .28em #242923}85%,100%{box-shadow:0 0 0 .14em rgba(251,250,246,0),0 0 0 .28em rgba(36,41,35,0)}}
@keyframes sc2-r2{0%,83%{box-shadow:0 0 0 .14em rgba(251,250,246,0),0 0 0 .28em rgba(36,41,35,0)}85%,87.5%{box-shadow:0 0 0 .14em #fbfaf6,0 0 0 .28em #242923}89.5%,100%{box-shadow:0 0 0 .14em rgba(251,250,246,0),0 0 0 .28em rgba(36,41,35,0)}}
@keyframes sc2-r3{0%,87.5%{box-shadow:0 0 0 .14em rgba(251,250,246,0),0 0 0 .28em rgba(36,41,35,0)}89.5%,100%{box-shadow:0 0 0 .14em #fbfaf6,0 0 0 .28em #242923}}
.process.scenes-armed .scene--build .sc-site{animation:sc2-site 4.5s cubic-bezier(.2,.7,.2,1) both}
.process.scenes-armed .scene--build .sc-h{animation:sc2-h 4.5s ease-out both}
.process.scenes-armed .scene--build .sc-h b{animation:sc2-dot 4.5s ease-out both}
.process.scenes-armed .scene--build .sc-sub{animation:sc2-sub 4.5s ease-out both}
.process.scenes-armed .scene--build .sc-btn{animation:sc2-btn 4.5s ease-out both}
.process.scenes-armed .scene--build .sc-page{animation:sc2-line 4.5s ease-out both}
.process.scenes-armed .scene--build .sc-img img{animation:sc2-img 4.5s ease-out both}
.process.scenes-armed .scene--build .sc-palette{animation:sc2-pal 4.5s ease-out both}
.process.scenes-armed .scene--build .sc-palette i:nth-of-type(1){animation:sc2-r1 4.5s linear both}
.process.scenes-armed .scene--build .sc-palette i:nth-of-type(2){animation:sc2-r2 4.5s linear both}
.process.scenes-armed .scene--build .sc-palette i:nth-of-type(3){animation:sc2-r3 4.5s linear both}


@keyframes sc3-acc{0%,73.5%{background-color:var(--green)}92.5%,100%{background-color:var(--warm)}}
@keyframes sc3-dot{0%,73.5%{color:var(--green)}92.5%,100%{color:var(--warm)}}
@keyframes sc3-page{0%,73.5%{border-top-color:var(--green);filter:none}82%{filter:blur(3px)}92.5%,100%{border-top-color:var(--warm);filter:none}}
@keyframes sc3-site{from{opacity:.45;filter:blur(4px);transform:scale(.97)}to{opacity:1;filter:none;transform:none}}
.process.scenes-armed .scene--refine .sc-site{animation:sc3-site .7s cubic-bezier(.16,1,.3,1) both}
.process.scenes-armed .scene--refine .sc-pin{animation:sc-pop .45s cubic-bezier(.16,1,.3,1) .5s both}
.process.scenes-armed .scene--refine .sc-comment{animation:sc-in .45s cubic-bezier(.16,1,.3,1) .6s both}
.process.scenes-armed .scene--refine .sc-c2{animation:sc-in .4s cubic-bezier(.16,1,.3,1) 2.05s both}
.process.scenes-armed .scene--refine .sc-btn{animation:sc3-acc 4s ease-in-out both}
.process.scenes-armed .scene--refine .sc-h b{animation:sc3-dot 4s ease-in-out both}
.process.scenes-armed .scene--refine .sc-page{animation:sc3-page 4s ease-in-out both}


.process.ablauf-folge .process-list:after{content:"";position:absolute;left:calc((100% - 80px)/6);right:calc((100% - 80px)/6);top:17px;height:2px;background:var(--deep);transform:scaleX(var(--fill,0));transform-origin:left center;transition:transform var(--fill-ms,1s) linear}
.process.ablauf-folge .process-list>div>span{transition:background-color .6s ease,box-shadow .6s ease,color .3s ease .3s}
.process.ablauf-folge .process-list>div:not(.is-active)>span{background:var(--paper);color:#8a8f84;box-shadow:inset 0 0 0 2px var(--line),0 0 0 6px var(--paper)}

.process.ablauf-folge .process-list>div.is-active>span{box-shadow:inset 0 0 0 2px var(--deep),0 0 0 6px var(--paper)}

.process.leiste-animiert:not(.ablauf-folge) .process-list:before{background:var(--deep)}


@media(max-width:1280px){
  .process.leiste-animiert .scene{aspect-ratio:auto;font-size:10.5px;padding:14px}
  
  .process.leiste-animiert .process-list{grid-template-rows:auto auto 1fr}
  
  .process.leiste-animiert .process-list>div{display:grid;grid-template-columns:minmax(0,1fr);grid-row:span 3;grid-template-rows:subgrid;gap:0;align-items:stretch}
  .process.leiste-animiert .scene--refine{grid-template-columns:1fr}
}

@media(max-width:700px){
  .process.leiste-animiert .process-list{grid-template-rows:none}
  .process.leiste-animiert .process-list>div{display:block;grid-row:auto}
  .process.leiste-animiert .scene{font-size:12px;padding:16px;margin-bottom:16px}
  .process.ablauf-folge .process-list:after{left:17px;right:auto;top:18px;bottom:18px;width:2px;height:auto;transform:scaleY(var(--fill,0));transform-origin:center top}
  .process.leiste-animiert .scene--refine{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}