@import url("https://use.typekit.net/tvc5fjr.css");
/* ANFANG KREIS BLOG */
span.kreis-startseite {
  display: block;
}


/* START KREIS ANFANG */
/* (A) TABS CONTAINER */
.tab {
  position: relative;
  max-width: auto;
  top: 50px; 
  left: 0px;
  background-color: ;
}

.blatt01 .tab label::after {
    top: 45px;
    right: 97px;
}



.blatt02 .tab label::after {
    top: 13px;
    right: 19px;
}



.blatt03 .tab label::after {
    top: 44px;
    right: 62px;
}

.blatt04 .tab label::after {
    top: 46px;
    right: 35px;
}


.blatt05 .tab label::after {
    top: 45px;
    right: 26px;
}

.blatt06 .tab label::after {
    top: 45px;
    right: 50px;  
}


/* (B) HIDE CHECKBOX */
.tab input { display: none; }


/* (D) TAB CONTENT */
.tab .tab-content {
  background: #7aba4c;
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
  width: 350px;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
   border-radius: 20px;
}

.blatt01 .tab-content {background: #417630 !important;}

.blatt03 .tab-content {background: #417630 !important;}

.blatt05 .tab-content {background: #417630 !important;}


.tab .tab-content a {
color: azure;
}





.tab .tab-content p { padding: 15px; }

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .tab-content { max-height: 100vh; }




/* ANFANG KREIS STARTSEITE */
span.kreis-startseite {
  display: block;

  width: 1300px;
}

/* START KREIS ANFANG */
/* (A) TABS CONTAINER */
.tab {
  position: relative;
  max-width: auto;
  top: 50px; 
  left: 0px;
  background-color: ;
}


/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  content: "\25b6";
  position: absolute;
  right: 0px;
  top: 10px;
  display: block;
  transition: all 0.4s;
  font-size: 18px;
  background-color: ;
  margin-right: 45px;
}
.tab input:checked ~ label::after { transform: rotate(90deg); }






/* (B) HIDE CHECKBOX */
.tab input { display: none; }

/* (C) TAB LABEL */
.tab label {
  font-family: acumin-pro-condensed, sans-serif;
  font-weight: 600; 
  font-style: normal;
  display: block;
  margin-top: 50px;
  padding: 10px 10px 10px 10px;
  color: white;
  font-size: 23px;
  line-height: 32px;
  font-weight: 400;
  cursor: pointer;
  padding-left: 20%;
}


/* (D) TAB CONTENT */
.tab .tab-content {
  background: #7aba4c;
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
  width: 350px;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
   border-radius: 20px;
}

.blatt01 .tab-content {background: #417630 !important;}

.blatt03 .tab-content {background: #417630 !important;}

.blatt05 .tab-content {background: #417630 !important;}


.tab .tab-content a {
color: azure;
}





.tab .tab-content p { padding: 15px; }

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .tab-content { max-height: 100vh; }




/* START KREIS ANFANG */
.blatt01, .blatt02, .blatt03, .blatt04, .blatt05, .blatt06 {
  width: 420px;
  height: 300px;
  font-size: px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.blatt01:before, .blatt02:before, .blatt03:before, .blatt04:before, .blatt05:before, .blatt06:before {
  content: "";
  position: absolute;
  background-size: 280px;
  width:320px;
  height: 150px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-position:  20px; 
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22588.289%22%20height%3D%22378.499%22%20viewBox%3D%220%200%20588.289%20378.499%22%3E%3Cpath%20d%3D%22M1680.305%2C255.067c-110.885-62.659-242.345-83.005-367.33-48.073a258.316%2C258.316%2C0%2C0%2C0-39.172%2C11.891c-94.329%2C36.024-200.083%2C131.149-160.517%2C238.98.042.115%2C35.162%2C74.658%2C99.922%2C96.1%2C12.185%2C4.034%2C24.042%2C9.126%2C36.7%2C11.521%2C50.613%2C9.6%2C106.207-3.773%2C144.979-39.3a260.077%2C260.077%2C0%2C0%2C0%2C26.128-25.975c30.053-32.975%2C47.131-70.559%2C70.366-108.686%2C46.478-76.275%2C118.936-120.878%2C201.665-136.537Q1686.677%2C254.946%2C1680.305%2C255.067Z%22%20transform%3D%22translate%28-1104.76%20-190.004%29%22%20fill%3D%22%23417630%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;

}






.blatt02:before, .blatt04:before, .blatt06:before {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22588.289%22%20height%3D%22378.499%22%20viewBox%3D%220%200%20588.289%20378.499%22%3E%3Cpath%20d%3D%22M1680.305%2C255.067c-110.885-62.659-242.345-83.005-367.33-48.073a258.316%2C258.316%2C0%2C0%2C0-39.172%2C11.891c-94.329%2C36.024-200.083%2C131.149-160.517%2C238.98.042.115%2C35.162%2C74.658%2C99.922%2C96.1%2C12.185%2C4.034%2C24.042%2C9.126%2C36.7%2C11.521%2C50.613%2C9.6%2C106.207-3.773%2C144.979-39.3a260.077%2C260.077%2C0%2C0%2C0%2C26.128-25.975c30.053-32.975%2C47.131-70.559%2C70.366-108.686%2C46.478-76.275%2C118.936-120.878%2C201.665-136.537Q1686.677%2C254.946%2C1680.305%2C255.067Z%22%20transform%3D%22translate%28-1104.76%20-190.004%29%22%20fill%3D%22%237aba4c%22%2F%3E%3C%2Fsvg%3E");
}

.blatt02:before {
  content: "";
  position: absolute;
    background-size: 280px;
  width:320px;
  height: 150px;
  padding-top: 50px;
  padding-bottom: 50px;
  /* top: 20%; */
  /* right: 30%; */
  */
  background-position:  20px; 
  z-index: -1;
}

.inner {
            position: absolute;
            height: 250px;
            width: 250px;
            overflow: visible;
}

.hintergrund {
  

    background-image: url("https://reset-fasten.at/media/bilder/hintergrundgrafik-interaktive-kreise.svg");
  

  
  width: 900px;
  background-repeat: no-repeat;
 background-position: center center;
 background-size: 40%;
  margin: 0 auto;

  
}

#outer{
            position: relative;
            height: 900px;
            width: 900px;
            margin: 0 auto;
            z-index: 1;
}
 /* DREHUNGEN BLAETTER */
 
.blatt06 {
  transform: translate(-5px, 5px);
}

.blatt06 .tab {
transform: translate(0px, 0px);   
}



.blatt06:before {
  transform: rotate(-2deg);   
}

.blatt05 {
transform: scaleX(-1) translate(10px, 10px);   
}

.blatt05:before {
  transform: rotate(4deg) translate(0px, 10px);    
}

.blatt05 .tab {
transform: scaleX(-1) translate(25px, -10px);   
}


.blatt01:before {
  transform: rotate(48deg) translate(20px, 25px);  

}
  .blatt01 .tab {
  transform: translate(50px, -7.5px); 
  }

  .blatt01 {
  transform: translate( -15px, 10px);  
  }
  
.blatt04:before {
  transform: rotate(220deg) translate(0px, 0px) ;   
}

/* scaleX(0); */

  .blatt04 .tab {
  transform: translate(60px, 12px);
  }

  .blatt04 {
  transform: translate( -50px, -10px);
  }


  .blatt02 .tab {
  transform: translate(5px, 5px); 
  }

  .blatt02 {
  transform: translate( 45px, -35px);  
  }

  .blatt02:before {
  transform: translate(0px, 0px) rotate(-10deg) scaleY(-1);
  }



.blatt03:before {
  transform: rotate(190deg) translate(0px, 0px) ;

}
  .blatt03 .tab {
  transform: translate(130px, 0px); 
  }

  .blatt03 {
  transform: translate( -45px, -25px);  
  }

/* ENDE KREIS BLOG */



/* RESPONSIVE */


@media only screen and (min-width: 920px) {
    
        .hintergrund {
    
      width: 900px;
}
    
   #outer{

            height: 900px;
            width: 900px;
    }
    
}

@media only screen and (min-width: 970px) and (max-width: 1200px) {

.hintergrund {
    background-size: 270px !important;
 
}

#outer {transform: scale(0.85) !important;} }


@media only screen and (min-width: 920px) and (max-width: 969px) {

    .hintergrund {
         width: 900px !important;
            background-size: 270px !important;

    }


#outer {
    
    transform: scale(0.75) !important;
        width: 900px !important;
        height: 900px !important;
    
    
    } 
}







@media only screen and (min-width: 860px) and (max-width: 919px) {

    .hintergrund {
         width: 830px !important;
            background-size: 240px !important;

    }


#outer {
    
    transform: scale(0.7) !important;
        width: 830px !important;
        height: 830px !important;
    
    
    } 
}



@media only screen and (min-width: 800px) and (max-width: 859px) {

    .hintergrund {
         width: 790px !important;
            background-size: 200px !important;
    }

#outer {
    
    transform: scale(0.7) !important;
        width: 790px !important;
        height: 790px !important;
    }
}
    

@media only screen and (min-width: 720px) and (max-width: 799px) {
    .hintergrund {
         width: 710px !important;
            background-size: 200px !important;
    }

#outer {
    
    transform: scale(0.7) !important;
        width: 710px !important;
        height: 710px !important; 
    }
        
  .blatt01 {
  transform: translate( 35px, 0px);  
  }

    .blatt02 {
  transform: translate( 70px, 10px);  
  }

  .blatt03 {
  transform: translate( -90px, 30px);  
  }
    
.blatt03 .tab .tab-content {
transform: translate( -70px, 0px);     
}
    
 .blatt04 {
  transform: translate( -105px, -20px);
  }
        

.blatt05 {
transform: scaleX(-1) translate(40px, -35px);   
}

    
.blatt06 {
  transform: translate(35px, -35px);
}
    }

@media only screen and (min-width: 620px) and (max-width: 719px) {
    .hintergrund {
         width: 610px !important;
            background-size: 294px !important;
    }

#outer {

    transform: scale(0.68) !important;
        width: 610px !important;
        height: 610px !important; 
    }
        
  .blatt01 {
  transform: translate( 150px, 0px);  
  }

    
.blatt01 .tab .tab-content {
transform: translate( -70px, 6px);
    z-index: 2;

}

    .blatt02 {
  transform: translate( 103px, 117px);
            z-index: -1;

  }
 
.blatt02 .tab .tab-content {
transform: translate(0px, 0px);
    z-index: 1;
}
  .blatt03 {
  transform: translate( -139px, 130px);  
  }
    
.blatt03 .tab .tab-content {
transform: translate( -70px, 0px);     
}
    
 .blatt04 {
  transform: translate( -211px, -20px);
  }
        

.blatt05 {
transform: scaleX(-1) translate(124px, -135px);   
}
    
    
.blatt05 .tab .tab-content {
transform: translate( -20px, 0px);     
}
       
    
   
.blatt06 {
  transform: translate(162px, -108px);
}
.blatt06 .tab .tab-content {
  transform: translate( -46px, -14px);
  }
    

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  font-size: 21px;

}
    

/* (C) TAB LABEL */
.tab label {

  font-size: 22px;

}

/* (D) TAB CONTENT */
.tab .tab-content {

  font-size: 22px;
}
    
    
    
    }

















@media only screen and (min-width: 520px) and (max-width:619px) {
    .hintergrund {
         width: 510px !important;
            background-size: 245px !important;
                margin-left: 8%;
    }

#outer {

    transform: scale(0.68) !important;
        width: 510px !important;
        height: 510px !important; 
    }
        
  .blatt01 {
  transform: translate( 144px, 0px);  
  }

    
.blatt01 .tab .tab-content {
transform: translate( -70px, 0px);
    z-index: 2;

}
    
    
    
    .blatt02 {
  transform: translate( 117px, 115px);
            z-index: -1;

  }
    
    
.blatt02 .tab .tab-content {
transform: translate(-16px, 0px);
    z-index: 1;
}

  .blatt03 {
  transform: translate( -140px, 128px);  
  }
    
.blatt03 .tab .tab-content {
transform: translate( -70px, 0px);     
}
    
 .blatt04 {
  transform: translate( -218px, -20px);
  }
        

.blatt05 {
transform: scaleX(-1) translate(124px, -158px);   
}
    
    
.blatt05 .tab .tab-content {
transform: translate( -6px, -10px);     
}
       
    
   
.blatt06 {
  transform: translate(71px, -172px);
}
    

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  font-size: 21px;

}
    

/* (C) TAB LABEL */
.tab label {

  font-size: 22px;

}

/* (D) TAB CONTENT */
.tab .tab-content {

  font-size: 22px;
}
    }

label[for="tab-3"]{
  padding-left:0%;
  padding-bottom:1%;
}
.tab label[for="tab-1"]{
  padding-left:10% !important;
}
.tab-content.tab-content-5{
  margin-left:-90px;
}
.tab-content.tab-content-1{
  margin-left:-20px;
  z-index: 99;
}
.inner.blatt02{
  z-index: -1;
}
.tab-content.tab-content-3{
  margin-left:-115px;
}
@media(max-width: 519px){
  .hintergrund{
    transform: scale(0.37) translate(-43rem, -340px) !important;
  }
  .tab-content p{
  font-size: 22px;
}}