/* Eén herkenbare routevorm voor de vier processtappen op Artsen en Werken bij. */
.route-steps{
  position:relative;
  isolation:isolate;
  padding-top:64px;
}
.route-steps-line{
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  width:100%;
  height:54px;
  overflow:visible;
  pointer-events:none;
}
.route-steps-line .route-steps-stem{
  fill:none;
  stroke:rgba(15,63,28,.82);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
}
.route-steps-line .route-steps-sprig{
  display:none!important;
}
.route-steps-line .route-sprig-stem{fill:none;stroke:rgba(79,125,62,.72);stroke-width:1.6;stroke-linecap:round}
.route-steps-line .route-sprig-leaf{fill:rgba(150,183,126,.34);stroke:rgba(79,125,62,.62);stroke-width:1.15}
.route-steps>:is(.step,.partner-step){
  position:relative;
  z-index:1;
}
.route-steps>:is(.step,.partner-step)>:is(.num,.partner-step-number){
  position:absolute;
  z-index:2;
  top:-58px;
  left:24px;
  margin:0;
  border:4px solid #f5f8f7;
  box-shadow:0 5px 14px rgba(6,31,59,.12);
}
.route-motion-ready .route-steps-line .route-steps-stem{stroke-dashoffset:1}
.route-motion-ready .route-steps-line .route-steps-sprig{opacity:0}
.route-motion-ready .route-steps.route-line-visible .route-steps-line .route-steps-stem{
  animation:draw-route-steps 1.35s cubic-bezier(.55,.05,.25,1) forwards;
}
.route-motion-ready .route-steps.route-line-visible .route-steps-line .route-steps-sprig{
  animation:show-route-steps-leaf .28s ease 1.18s forwards;
}
@keyframes draw-route-steps{to{stroke-dashoffset:0}}
@keyframes show-route-steps-leaf{to{opacity:1}}

@media(max-width:980px){
  .route-steps{
    padding-top:0;
    padding-left:56px;
  }
  .partner-route-steps{grid-template-columns:1fr!important}
  .route-steps-line{display:none}
  .route-steps::before{
    content:"";
    position:absolute;
    z-index:0;
    top:38px;
    bottom:auto;
    height:var(--route-mobile-line-height,calc(100% - 76px));
    left:22px;
    width:4px;
    border-radius:999px;
    background:rgba(15,63,28,.82);
    transform:scaleY(1);
    transform-origin:top;
  }
  .route-steps>:is(.step,.partner-step)>:is(.num,.partner-step-number){
    top:22px;
    left:-53px;
    border-color:#f5f8f7;
  }
  .route-motion-ready .route-steps::before{transform:scaleY(0)}
  .route-motion-ready .route-steps.route-line-visible::before{
    animation:draw-route-steps-mobile 1.15s cubic-bezier(.55,.05,.25,1) forwards;
  }
  @keyframes draw-route-steps-mobile{to{transform:scaleY(1)}}
}

@media(prefers-reduced-motion:reduce){
  .route-steps-line .route-steps-stem{stroke-dashoffset:0!important;animation:none!important}
  .route-steps-line .route-steps-sprig{display:none!important}
  .route-steps::before{transform:scaleY(1)!important;animation:none!important}
}