.klachtenwijzer {
  overflow:hidden;
  position:relative;
  padding:100px 0;
}

.numbers {
  display:flex;
  align-items:flex-start;
  justify-content: flex-start;
  gap:30px;
  flex-direction:column;
  height:100%;
  width:100%;
}
  .numbers .number {
    width:100%;
    aspect-ratio:1;
    border-radius:50%;
    border:2px solid var(--orange);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    max-width:50px;
    transition:.3s;
    position:relative;
    overflow:visible;
    background-color:var(--white);
    box-shadow:inset 0px 0px 0px 0px var(--orange);
    z-index:1;
    cursor:pointer;
  }
    .numbers .number:not(:first-of-type):before {
      content:" ";
      width:0;
      height:32px;
      bottom:100%;
      left:calc(50% - 1px);
      position:absolute;
      border-right:2px solid var(--orange);
      z-index:-2;
    }

    .numbers .number.active {
      border-color:var(--orange);
      box-shadow:inset 0px 0px 0px 25px var(--orange);
      background-color:var(--orange);
    }

      .numbers .number.active ~ .number,
      .numbers .number.active ~ .number:before {
        border-color:var(--brown);
        pointer-events:none;

      }
.steps {
  min-height:100%;
  display:flex;
  align-items:center;
  width:100%;

}
.steps .step {
  position:absolute;
  opacity:0;
  transition:.3s;
  transform:translateY(-150px);
  width:100%;
  pointer-events:none;
}
  .steps .step.active {
    position:relative;
    opacity:1;
    transform:translateY(0px);
    pointer-events:auto;
  }
  .steps .step.active ~ .step {
    transform:translateY(150px);
  }


.options {
  display:flex;
  flex-direction:column;
  gap:15px;
  margin-bottom:15px;
}
  .options .option {
    width:100%;
    padding:10px 20px;
    border:2px solid var(--sand);
    border-radius:50px;
    background-color:var(--sand);
    cursor:pointer;
    transition:.3s;
  }
    .options .option:hover {
      border-color:var(--orange);
      background-color:var(--white);
    }
    .options .option.selected {
      border-color:var(--orange);
      background-color:var(--orange);
    }

.patient-cont {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content: center;
}

.patient {
  width:100%;
  max-width:200px;
  aspect-ratio:.36;
  background-image:url('../../img/patient.png');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:visible;
}
  .patient .dot {
    width:20px;
    aspect-ratio:1;
    border-radius:50%;
    background-color:var(--orange);
    opacity:.8;
    box-shadow:0px 0px 0px 10px rgba(253,160,80,.6), 0px 0px 0px 20px rgba(253,160,80,.3);
    position:absolute;
    transform:translate(-50%, -50%);
    transition:.3s;
    cursor:pointer;
  }

  .patient .dot:hover {
    width:28px;
  }
  .patient .dot.selected {
    opacity:1;

    pointer-events:none;
    background-color:var(--red);
    box-shadow:0px 0px 0px 10px rgba(102,41,46,.6), 0px 0px 0px 20px rgba(102,41,46,.3);

  }
    .patient .dot[data-cat="Knie"] { top:74%; left:64%; }
    .patient .dot[data-cat="Heup"] { top:53%; left:34%; }
    .patient .dot[data-cat="Schouder"] { top:21%; left:19%; }
    .patient .dot[data-cat="Elleboog"] { top:37%; left:87%; }
    .patient .dot[data-cat="Hand of pols"] { top:52%; left:92%; }
    .patient .dot[data-cat="Enkel of voet"] { top:95%; left:37%; }



@media (max-width:991px) {
  .numbers {
    flex-direction:row;
    margin-bottom:15px;
  }
    .numbers .number:not(:first-of-type):before {
      width:34px;
      height:0;
      border-right:0;
      border-top:2px solid var(--orange);
      top:calc(50% - 1px);
      right:100%;
      left:unset;
    }
}


@media (max-width:767px) {
  .numbers {
    gap:15px;
  }
  .numbers .number {
    width:30px;
    font-size:16px;
  }
  .numbers .number:not(:first-of-type):before {
      width:19px;
  }
}

.step[data-index='1'] .filterable {
  display:none;
}