/* S T I C K Y  - S T I C K E R */

.sticky{
  display: inline-block;
  position: sticky;
  top: 0px;
  width: 165px;
  height: 60px;
  clip-path: polygon(
    0% 0%, 
    95% 0%, 
    100% 40%,
    10% 100%, 
    0% 60%);
}


/* S C R O L L B A L K E N */

/* green */
section *::-webkit-scrollbar{
  width: 7px;
}
/* track */
section *::-webkit-scrollbar-track{
background: none;
width: 9px;
}
section *::-webkit-scrollbar-track-piece{
  background-color: rgba(185, 252, 84, 0.1);
  border-radius: 20px;
}
/* thumb */
section *::-webkit-scrollbar-thumb{
  background-color: rgb(185, 252, 84);
  border-radius: 20px;
}


/* sorts */
.sorts *::-webkit-scrollbar{
  width: 18px;
}
/* sorts: track */
.sorts *::-webkit-scrollbar-track{
  background: none;  
}
.sorts *::-webkit-scrollbar-track-piece{
  background-color: rgba(250, 125, 0, 0.3);
  border: 5px solid beige;
}
/* sort: thumb */
.sorts *::-webkit-scrollbar-thumb{
  background-color: rgb(250, 125, 0);
  border-radius: 10px;
  border: 5px solid beige;
}






/* T O G G L E - S W I T C H */

.schalter{
  display: block;
  width:70px;
  height:30px;
  background-color: rgb(185, 252, 84);
  transition: 0.5s;
  border-radius: 35px;
  position: relative;
}

/* stylt das LABEL, wenn das Geschwister-Element (durch das + selektiert) die checkbox checked ist */

input[type="checkbox"]:checked + .schalter{
  background-color: rgb(250, 125, 0);
  transition: 0.7s;
}

/* CHECKBOX verstecken */

input[type="checkbox"] {
  display: none;
}

.schalter::before{
  content:"";
  position: absolute;
  background-color: black;
  display: block;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  top:4px;
  left:4px;
  transition: 0.5s;
}

input[type="checkbox"]:checked + .schalter::before{
  left:44px;
  transition: 0.5s;
}