@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans);


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  
html, body {
    height: 100%; /* Sichert die Basis für die prozentuale Höhe */
    margin: 0;
    padding: 0;
} 

  body {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      background: #eeeeec;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      
      font-family: 'Open Sans', sans-serif;
      
      overflow: hidden;
    
      display: -webkit-box;
      display: -ms-flexbox;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;

  }
  

  
  .customSlider {
    opacity: 0;
    display: none;
      + label {
          position: relative;
          top: 35px;
          left: 15px;
          cursor: pointer;
          &:before, &:after {
              bg-layer: #FFFFFF;
              position: absolute;
              content: '';
          }
          &:before {
              top: -90px; left: -60px;
              width: 80px;
              height: 40px;
              background: #ccc;
              border-radius: 20px;
              transition: background .75s;
          }
          &:after {
              height: 34px; width: 34px;
              top: -87px; left: -55px;
              border-radius: 50%;
              transition: all .5s;
          }
      }
      
      &:checked + label:after {
          height: 34px; width: 34px;
          top: -87px; left: -19px;
          border-radius: 50%;
      }
      
      &:checked ~ .wrapper {
          color: #fff;
          transition: background .6s ease;
          background: #31394D;
          
          .top-icons {
              i {
                  color: #fff;
              }
          }
          
          .profile {
              // &:after {background: #ececece;}
              .name {
                  color: #FDFEFF;
              }
              
              .title {
                  color: #7C8097;
              } 
              
              .description {
                  color: #FDFEFF;
              }
          }
          .icon {
              h4 {
                  color: #FFFFFF;
              }
              
              p {
                  color: #666B7D;
              }
          }
      }
  }
  
  .wrapper {
    
      width: 100%;
      height: 100%;
      border-radius: 0px;
	
      background: #FDFEFF;
      transition: background .6s ease;
      border-radius: 10px;
      padding: 20px 0px;
      box-shadow: 0 8px 40px rgba(#000000, .2);
      
      display: flex;
      flex-direction: column;
      justify-content: flex-start; /* Verteilt Elemente gleichmäßig von oben nach unten */


      .top-icons {
          width: 100%;
	  padding: 0 20px;
          i {
              color: #080911;
              &:nth-of-type(1) {
                  float: left;
              }
              &:nth-of-type(2) {
                  float: right;
              }
              &:nth-of-type(3) {
                  float: right;
                  padding-right: .8em;
              }
          }
      }
      .profile {
          margin-top: 1.5em;
          position: relative;
          width: 100%;
          padding: 0 20px;

          &:after {
              display: none;
          }
          
          .check {
              position: absolute;
 	    left: calc(50% + 35px); /* Positioniert das Häkchen präzise am Thumbnail */
            bottom: 5.5em;

              i {
                  color: #fff;
                  width: 20px;
                  height: 20px;
                  font-size: 12px;
                  line-height: 20px;
                  text-align: center;
                  border-radius: 100%;
                  background: $purple-gradient;	
              }
          }
          .thumbnail {
              width: 100px;
              height: 100px;
              display: flex;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 0.8em;
              border-radius: 100%;
          }
          .name {
              color: #2D354A;
              font-size: 42px;
              font-weight: 600;
              text-align: center;
          }
          
          .title {
              color: #7C8097;
              font-size: 1.75em;
              font-weight: 300;
              text-align: center;
              padding-top: .3em;
              text-transform: uppercase;
          }
          
          .description {
              display: flex;
              color: #080911;
              font-size: 14px;
              font-weight: 300;
              text-align: center;
              margin-bottom: 1.3em;
          }
          
          .btn {
              color: #fff;
              width: 130px;
              height: 42px;
              outline: none;
              border: none;
              display: block;
              cursor: pointer;
              font-weight: 300;
              margin-left: auto;
              margin-right: auto;
              border-radius: 70px;
              box-shadow: 0 13px 26px rgba(#000, .16), 0 3px 6px rgba(#000, .16);
              background: $purple-gradient;
          }
      }
      
      .social-icons {
          display: flex;
          margin-top: auto;
	  padding: 20px;
	  width: 100%;
          justify-content: space-between;
          
          .icon {
              display: flex;
              align-items: center;
              flex-direction: column;
              a {
                  color: #fff;
                  width: 60px;
                  height: 60px;
                  font-size: 28px;
                  line-height: 60px;
                  text-align: center;
                  border-radius: 30px;
                  box-shadow: $shadow;
              }
              &:nth-of-type(1) {
                  a {
                      background: $purple-gradient;
                  }
              }
              &:nth-of-type(2) {
                  a {
                      background: $blue1-gradient;
                  }
              }
              &:nth-of-type(3) {
                  a {
                      background: $blue2-gradient;
                  }
              }
              
              h4 {
                  color: #080911;
                  font-size: 1em;
                  margin-top: 1.3em;
                  margin-bottom: .2em;
              }
              
              p {
                  color: #666B7D;
                  font-size: 12px;		
              }
          }
      }
  }
  
  .concept {
      position: absolute;
      bottom: 25px;
      color: #AAB0C4;
      font-size: .9em;
      font-weight: 400;
      a {
          color: rgba(172,25,102,1);
          text-decoration: none;
      }
  }



  

  .tab-bar {
    margin: 20px 0 0 0 ;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    -webkit-padding-start: 0;
    padding-start: 0;
    
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    position: relative;
  }
  
  .tab {
    padding: 15px 5px;
    background: white;
    color: #607D8B;
    overflow: hidden;
    font-size: .8em;
    text-align: center;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
	flex-basis: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  
  .indicator {
    width: 33.33%;
    height: 3px;
    background: #2196F3;
    position: absolute;
    bottom: 0;
    margin-left:0;
    
    -webkit-transition: margin 0.5s ease;
    
    transition: margin 0.5s ease;
  }
  
  .cercle {
    width: 0px;
    height: 0px;
    position: absolute;
  }
  
  .light .cercle {background: white}
  .dark .cercle {background: black}
  
  .anim {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    -webkit-animation: touch 1.2s ease-out;
            animation: touch 1.2s ease-out;
  }
  
  @-webkit-keyframes touch {
    100% { 
      width: 600px;
      height: 600px;
      border-radius: 600px;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      margin: -300px;
    }
  }
  
  @keyframes touch {
    100% { 
      width: 600px;
      height: 600px;
      border-radius: 600px;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      margin: -300px;
    }
  }