.ybl-wissensvorsprung-list{
  position: relative;
  max-width: 1340px;
  padding: 0 20px;
  margin: 0 auto;

  .ybl-list-header{
    margin-bottom: 32px;
    
    .headline-wrapper{
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .ybl-radio-my-wv{
        position: relative;

        input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0;
        }

        &:hover input ~ .checkmark {
        }
      

        input:checked ~ .checkmark {
          background-color: #2196F3;
        }
        
        .checkmark {
          position: absolute;
          top: 0;
          left: -30px;
          height: 24px;
          width: 24px;
          border-radius: 100px;
          background-color: white;
          border: 1px solid #B7B7B7;

          &:after {
            content: "";
            position: absolute;
            display: none;
          }
          > .inner-checkmark{
            width: 18px;
            height: 18px;
            position: absolute;
            background-color: #D2D2D1;
            border-radius: 100px;
            top: 2px;
            left: 2px;
          }
        }

        input:checked ~ .checkmark:after {
        }
        
        input:checked ~ .checkmark .inner-checkmark{
          background-color: #9FD8B4;
        }

        .checkmark:after {
          left: 9px;
          top: 5px;
          width: 5px;
          height: 10px;
          border: solid white;
          border-width: 0 3px 3px 0;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
        }
        
      }
    }
    .filter-wrapper{
      > ul{
        list-style: none;
        padding: 0;
        > li{
          display: inline-block;
          padding: 12px 20px;
          border-radius: 100px;
          background-color: #FFF;
          border: 1px solid #033E46;
          color: #033E46;
          margin-right: 32px;
          line-height: initial;

          &.active{
            background-color: #033E46;
            color: #FFF;
          }

          &:last-of-type{
            margin-right: unset;
          }
        }  
      }
    }
  }

  .ybl-list-wrapper{
    margin-bottom: 120px;
    text-align: center;
    
    @media only screen and (max-width: 768px) {
      margin-bottom: 60px;
    }

    span{
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 0.64px;
      margin-right: 16px;
      > a{
        text-decoration: none;
      }
      
      &:last-of-type{
        margin-right: 0;
      }
      
      &.current{
        font-family: Mulish-ExtraBold, Mulish;
        color: #033E46;
      }

      &.next,
      &.prev{
        display: none;
      }
      
    }

    .teaser-item{
      position: relative;
      display: grid;
      grid-template-columns: 250px 1fr 32px;
      grid-gap: 40px;
      border-top: 1px solid #033E46;
      padding: 32px 32px 32px 0;
      transition: all .5s ease-in-out;

      .teaser-item-anker{
        display: block;
        height: 1px;
        position: absolute;
        top: -90px;
        left: 0;
      }


      @media only screen and (max-width: 678px) {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 16px;
        padding: 24px 0;
      }

      .detail-url{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        padding: 16px 0;
        z-index: 100;
      }
      
      .list-image-wrapper{
        position: relative;
        @media only screen and (max-width: 678px) {
          max-width: 250px;
        }
        
        > .teaser-image{
          border-radius: 8px;
          width: 100%;
          height: auto;
        }
        > .lock-wrapper{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(244, 244, 244, .5);
          > .lock-icon{
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 17px;
            height: auto;
          }
        }
        
      }
      .list-content{
        h4{
          margin: 0 0 14px 0;
          text-align: left;
          transition: all .5s ease-in-out;
          
          > .new-tag,
          > .archiv-tag{
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            line-height: initial;
            font-family: Mulish-ExtraBold, Mulish;
            color: #FFF;
            background-color: #033E46;
            margin-right: 16px;
            text-transform: uppercase;
            top: -3px;
            display: none;
            position: relative;
            
          }
          > .archiv-tag{
            display: inline-block;
            background-color: #B7B7B7;
          }
        }
        > p {
          margin: 0 0 32px 0;
          font-size: 16px;
          line-height: 24px;
          text-align: left;
          @media only screen and (max-width: 678px) {
            margin-bottom: 16px;
          }
          
        }

        .lock-status-wrapper{
          position: relative;

          .unlock-wrapper{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 8px;
            .unlock-icon{
              width: 24px;
              height: 24px;
              margin-top: -5px;
            }
            > p {
              margin: 0;
              font-family: Mulish-ExtraBold, Mulish;
            }
          }
        }
        
        .activate-wissensvorsprung{
          margin: 0;
          color: #033E46;
          font-family: Mulish-ExtraBold, Mulish;
        }
        
      }
      .next-wrapper{
        width: 100%;
        height: 40px;
        position: relative;
        text-align: right;
        @media only screen and (min-width: 678px) {
          display: flex;
          align-items: anchor-center;
          width: 40px;
          height: 100%;
        }
        
        img.next-arrow-icon{
          position: absolute;
          width: 40px;
          height: 40px;
          margin-left: 0;
          opacity: 1;
          transition: all .5s ease-in-out;
          right: 0;

          @media only screen and (min-width: 678px) {
            
            top: 50%;
            transform: translateY(-50%);   
          }

          &.green-icon{
            opacity: 0;
          }
        }
      }

      &:first-of-type{
        .list-content > h4 > .new-tag{
          display: inline-block;
        }
      }

      &:last-of-type{
        margin-bottom: 32px;
        border-bottom: 1px solid #033E46;
      }

      &:hover{
        h4{
          color: #033E46;
        }
        
        > .next-wrapper > img.next-arrow-icon{
          margin-right: -15px;
          opacity:0;
          &.green-icon{
            opacity:1;  
          }
        }
      }
    }
  }
  
}