html {
    scroll-behavior: smooth;
}

.scrollbutton {width:40px; height:40px;}


::-webkit-scrollbar {height: 10px; width:0;  background-color:rgba(0,0,0,.05);}
::-webkit-scrollbar-track {height: auto; box-shadow: inset 0 0 5px rgba(0,0,0,.1); border-radius:4px;}
::-webkit-scrollbar-thumb {height:20px; background:rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.6);}

.startseite { padding:50px 0; text-align: center; background: #f2f2f2;
& h1 {margin-bottom: 0; font-size:30px;}
& h2 {text-align: center; font-size: 20px; font-weight: 100; margin-bottom: 30px; line-height: 40px; font-family: sans-serif; text-transform: uppercase; letter-spacing: 7px;}
& p {margin:0 auto; max-width: 600px; font-weight:500; font-size: 18px;}
}

.input-element label {background:#fff;}

.cfs2 {display: flex; justify-content: center; align-items: start;}
#infoleiste {
    background: linear-gradient(140deg,#7de3ee,#5ab9c4,#0f4868,#045e7b); 
    background-size: 180% 180%;
    animation: gradient-animation 9s ease infinite;
    font-size: 14px;
    & .vorlage_3 {background:transparent;}
    & .text {color: #ffffff;}
    & .text a {color: #ffffff; font-weight: 700;}
}

#megamenu {
    padding: 11px 0;
    background: linear-gradient(335deg,#0d4659,#2bcbd8);
    background: #1d2733;
    
}

.flex-item {margin:0 10px;}
.accept_box a.shipping {color: #000 !important;}

#kategorien {padding:0; background:#f2f2f2; padding:10px 0;
    & .cfs {max-width: 1500px; margin:40px auto 70px; padding: 50px 50px; border-radius: 50px; background:#fff; align-items: center; box-shadow: 4px 10px 30px rgba(0,0,0,.1);} 
    & .cfs h2 {letter-spacing: 1px; text-transform: uppercase; font-size: 24px; font-weight: 100; margin-bottom: 25px;}
    & .item {flex:1 1 300px; margin:0; text-align: center; padding:20px;}
    & p {max-width: 511px; margin: 0 auto 35px; line-height:22px;}
    & .katlink {display:inline-block; color: #fff; background: #1d2733; padding: 10px 22px; margin: 1px; border-radius: 30px; font-weight: 500; transition: all .3s ease; margin-bottom: 30px; font-size:16px;} 
    & .katlink:hover {color: #ffffff;background: #2bcbd8; scale: 1.2; box-shadow: 2px 4px 8px rgba(0,0,0,.25); transition: all .3s ease;}
    & .subnavi { position:relative;}
    & .subnavi a {display: inline-block; color: #4e4e4e; background: #f0f0f0; padding: 2px 8px; margin: 0px 1px 6px; border-radius: 9px; font-weight: 500; transition: all .3s ease;}  
    & .subnavi a:hover {color: #ffffff; background:#2bcbd8; transition: all .3s ease;}
    & .special {background: #1a2734; color: #fff; box-shadow: 4px 10px 30px rgba(0,0,0,.4);}
    & .special .katlink {background: #2bcbd8; color:#000; box-shadow: 0 5px 14px rgba(0,0,0,.4);}
    & .special h2 {font-weight: 500;letter-spacing: 3px; margin-bottom: 30px; font-size: 30px;}
    & .special p {font-size: 17px; margin-bottom: 40px; line-height: 150%;}
    & small { margin: 0 0 30px; text-transform: uppercase; letter-spacing: 2px;}
    & .img-fluid {border-radius: 30px;}

}
@media screen and (max-width:1540px) {
    #kategorien {
        & .cfs {margin-left:20px; margin-right:20px;}
    }
}
@media screen and (max-width:991px) {
    #kategorien {
        & .cfs {margin: 10px 20px 30px; padding: 40px 20px;}
    }
}
@media screen and (max-width:659px) {
    #kategorien {
        & .cfs {padding: 40px 10px 30px;}
        & .cfs:nth-child(odd) .item:nth-child(1) {order:2;}
        & .cfs:nth-child(odd) .item:nth-child(2) {order:1;}
        & .cfs h2 {font-size:20px;}
    }
}

footer {background:#1d2733; color:rgba(255,255,255,.5); padding:100px 0 0;
& a {color:rgba(255,255,255,.8); transition: color .3s ease; position:relative; }
& a:hover {color:rgba(255,255,255,1); text-decoration:none; transition: color .3s ease;}
& .box-heading {font-weight: 100; margin-bottom: 20px;}
& .boxcontent_logofooter {text-align: center;}
& .logo_footer {max-width:192px; height:auto;}
& .copy {margin: 50px 0 0px; padding: 30px 0; background: #151a22;}
& .copy a {color:rgba(255,255,255,.3)}
& .copy a:hover {color:rgba(255,255,255,.6)}
& a::after {content:''; position:absolute; bottom:-2px; left:0; height:1px; width:0; transition: all .3s ease; background:rgba(255,255,255,1)}
& a:hover::after {width:100%; transition: all .3s ease; }
& .box {margin-right: 30px;}
& .box_logofooter {margin-right:0;}
& .box_zahlmehtoden {width:100%;flex:auto; margin-right: 0;}
& .box_blog {margin-right:auto;}
& .boxcontent_zahlmehtoden img {width:60px; height:43px; opacity: .65; transition: opacity .3s ease;}
& .boxcontent_zahlmehtoden:hover img {opacity: 1; transition: opacity .3s ease;}
& .container-flex-special {justify-content: space-between;}
& .container-flex-special .box {flex:none;} 
}

@media screen and (max-width:650px) {
    #footer  .box {flex:1 1 200px;}
}

#beratung {padding:100px 0; 
    & .cfs {max-width: 1490px; margin:0 auto;}
    & .text {flex-grow:1;}
    & .cfs .item {flex:1 1 500px;}
    & .cfs2 { justify-content: space-between}
    & .flexfull {height:100px;}
    & .flexfull h2 {font-size:24px; color:#1a2734;}
    & .faq_icon {margin: 10px 20px;width: 75px;}
    & .cfs2 p {max-width: 520px; line-height: 160%; color:#1a2734;;}
    & .faq_icon img {max-width: 65px; height:auto;}
    & .kontakt {padding: 50px 0;font-size: 22px; border-top:1px solid rgba(0,0,0,.25); line-height: 124%;}
    & .kontakt .item {margin-bottom:0;}
    & .kontakt .text {flex:auto;}
    & .kontakt .cfs2 {align-items: center;}
}

@media screen and (max-width:659px) {
    #beratung {
        & .cfs2 {flex-direction: column;}
        & .cfs2 .faq_icon {margin: 0 0 20px;width: 100%; text-align: center;}
        & .cfs2 .text{margin: 0 0 20px;width: 100%; text-align: center;}
        & .cfs .item {margin:0;}
        }
}



  
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

 
  

#rabatt {padding: 40px 0px;
    & .cfs {max-width: 1500px; margin:40px auto 70px; padding: 100px 50px;color:#fff; border-radius: 50px; background:linear-gradient(141deg,#66ddea,#17618c,#0083ae); 
        align-items: center; box-shadow: 4px 10px 30px rgba(0,0,0,.2);}
    & .cfs {background: linear-gradient(140deg,#7de3ee,#5ab9c4,#0f4868,#045e7b); 
        background-size: 180% 180%; animation: gradient-animation 10s ease infinite;} 
    & .cfs {background: linear-gradient(73deg,#2cc483,#3897a1,#8e1ffa);
    background-size: 180% 180%;
    animation: gradient-animation 9s ease infinite;}

    & .cfs .item {flex:1 1 500px; text-align: center; margin:0;}
    & p {max-width: 500px; margin:auto; font-size:20px; font-weight: 400; line-height:170%;}
    & .wrapp {display: block;}
    & .big {font-size: 160px; font-weight: 600;}
    & span.mittel {font-size: 84px; font-weight: 600; margin:20px 0; display: block;}
    & span.normal {font-size: 27px; font-weight: 600; color:#ffffff; display: block; margin-bottom: 30px;}
    & small {margin:20px 0 0;}
    & a {display: inline-block;color: #0083ae; background: #ffffff;  padding: 10px 22px; margin: 30px 1px 1px 1px; border-radius: 30px; font-weight: 500;transition: all .3s ease; font-size: 16px; transition: all .3s ease;}
    & a:hover {scale:1.2; box-shadow: 0px 3px 12px #00c1f6; color: #00c1f6; transition: all .3s ease;}

}

@media screen and (max-width:1540px) {
    #rabatt {
        & .cfs {margin-left:20px; margin-right:20px;}
    }
}

#counter {display: flex; justify-content: center;
 & .box {display: inline-block; height:1em; overflow: hidden;line-height: 1em; font-weight: bold; font-size: 16em;}
 & .box.first-number::after {position:relative; white-space: pre; content: "0\A 1\A 2\A 3\A 4\A 5\A";}
 & .box.first-number.in-view::after  {animation: first-animate 5s forwards;}
 & .box.second-number::after {position:relative; white-space: pre; content: "0\A 1\A";}
 & .box.second-number.in-view::after  {animation: second-animate 5s forwards;}
}

@keyframes first-animate {
    from {top: 0;}
    to {top: -5em;}
}

@keyframes second-animate {
    from {top: 0;}
    to {top: -1em;}
}

@media screen and (max-width:650px) {
    #rabatt {
        & .cfs {padding:50px 0;}
        
    }
    #counter {scale: .8; margin-bottom: -20px;}

}

.account .accept_box a.shipping {
    color: rgb(0, 0, 0) !important;
}