.element {opacity:0;}
.element.in-view {opacity: 1; transition: opacity 1s ease; transition-delay: .3s;}

nav {padding:30px 20px; background:var(--background);
 & .cfs {justify-content: space-between; max-width: 1400px;}
 & .logo {max-width:140px; height: auto;}
 & a {color:#fff; text-decoration: none; font-weight: 100; position:relative; margin:0 10px;}
 & a::before {content:''; position:absolute; right:-12px; bottom:3px; height:12px; width:1px; background:rgba(255,255,255,.75); transition: all .3s ease;}
 & a:last-child::before {display: none;}
 & a::after {content:''; left:0; bottom:0; position:absolute; background: #fff; height:1px; width:0px; bottom:-1px; transition: all .3s ease;}
 & a:hover::after {width:100%; transition: all .3s ease;}
 & a:hover::before {height:1px; transition: all .3s ease;}
}



@media screen and (max-width:600px) {
  nav {
    & .cfs {flex-direction: column;}
    & .logo {max-width:200px; margin-bottom: 20px;}
  }
}


#slide1 {color:#fff; display:flex; position: relative; background: var(--background);
  & .cfs {max-width:1400px; margin:0 auto; padding:20px 20px 50px;}
  & h1 {margin-bottom: 20px; text-align: left; opacity: 0; transition: opacity 1s ease;}
  & h1.in-view {opacity: 1; transition: opacity 1s ease; transition-delay: .3s;}
  & h2 {text-align: left; opacity: 0; transition: opacity 1s ease; flex: 1 1; max-width: 670px;}
  & h2.in-view {opacity: 1; transition: opacity 1s ease; transition-delay: .7s;  } 
  & p {font-size:clamp(1.0625rem, 0.8281rem + 0.75vw, 1.25rem); line-height: 150%; text-align: left; max-width: 800px;}
  & .item {flex: 1 1 500px;padding: 0 20px; text-align: center;}
  & .item:nth-child(2) {max-width: 700px;padding: 0 60px; text-align: left;}
  & p {opacity: 0; transition: opacity 1s ease; margin: 50px 0; font-size: 18px; text-align: left; color:#fff;max-width: 776px;}
  & p.in-view {opacity: 1; transition: opacity 1s ease; transition-delay: 1.4s;}
  & .buttons {text-align: left; opacity: 0; transition: opacity 1s ease;}
  & .buttons.in-view {opacity: 1; transition: opacity 1s ease; transition-delay: 2s;}
  & .img-fluid {width: 100%; height: auto; margin: 0 auto; max-width: 444px;}
  & .eins {background: var(--base3); color: #ffffff; border: 1px solid var(--base3)}
  & .zwei {background: transparent; color: #fff; border:1px solid #fff;}
  }
  
@media screen and (min-width:1800px) {
  #slide1 {
    & .cfs { padding:20px 20px 80px;}
    & .img-fluid {max-width: 555px;}
  }
}



#allgemein {background:#fff; 
  & h2 {margin-bottom: 16px; text-transform: none; font-size: clamp(1.25rem, 1.125rem + 0.4vw, 1.4rem);}
  & .cfs {padding:140px 0 130px; max-width: 1200px; align-items: start;}
  & .item {flex:1 1 500px; margin-bottom:30px; padding:0 30px;}
  & p {line-height: 24px;font-size:15px; text-align: justify;}
  & li {line-height: 30px;font-size:18px; font-weight: 100;}
}


#slide3 {
  background: #826a7d url(images/seniorin.jpg) center center no-repeat;
  background-size: cover;
  height: 700px;
}

@media screen and (min-width:1600px) {
  #slide3 {height:1000px;}
}
@media screen and (max-width:1000px) {
  #slide3 {height:580px; background: #826a7d url(images/seniorin_small.jpg) center center no-repeat;}
}



#details {background:#ffffff; padding:50px 15px 0; text-align: center;
  & small {text-transform: uppercase; letter-spacing: 3px; display:inline-block; margin-bottom:30px;border-radius: 15px;}
  & .flexfull {height: 137px; order:7;}
  & .cfs {max-width: 1200px;}
  & .item {flex:1 1 450px;margin-bottom: 50px; padding:0 20px;}
  & p {margin-bottom: 30px;}
  & .actionbutton {background: var(--base); color: #fff; font-weight: 400;} 
  & small {color: #fff; background: var(--base3); display: inline-block; padding: 4px 11px; font-weight: 400;}
}
@media screen and (min-width:930px) {
#details {padding:100px 15px 0;
  & .item {text-align: left; margin-bottom: 100px;}
  & .item:nth-child(5) {margin-bottom: 60px;}
  & .item:nth-child(6) {margin-bottom: 60px;}
}
}

@media screen and (max-width:929px) {
  #details {
    & .item {padding:0;}
    & .cfs {max-width: 561px;}
    & .item:nth-child(4) {order:3;}
    & .item:nth-child(3) {order:4;}
   
  }
  }
  


  #alternativen {background:#e7dde2; padding:100px 15px 60px; text-align: center;
    & h2 {margin-bottom: 20px; text-transform: none; color:var(--base2);}
    & p {color:var(--base2); max-width: 900px; margin:0 auto;}
    & .cfs {padding:75px 0 55px; max-width: 1000px; align-items: inherit;}
    & .item {text-align: center; flex: 1 1 250px; padding:30px 30px 40px; margin:0 20px 30px; background: #fff; opacity:0; border-radius: 30px; box-shadow: 0 20px 20px rgba(0,0,0,.1); transition:all .3s ease;}
    & .item.in-view {opacity:1; transition: all .8s ease; transition-delay: .3s;}
    & .item:hover {scale: 1.05; transition:all .3s ease;}
    & .item h3 {font-size:21px;}
    & .content {padding:30px 0;}
    & .actionbutton  {background:var(--base); color:#fff; font-weight:400;}
    & .img-fluid {border-radius: 20px;}
  }

  


#slide5 {background-color: #ffffff;
  & h2 {margin-bottom: 20px;}
  & .cfs {max-width:1400px;padding:100px 20px; align-items: center;}
  & .flexfull {padding:0 0 100px; width:100%;}
  & .item {flex: 1 1 600px; max-width: 700px; padding:0 33px 33px; margin-bottom: 80px;}
  & small {text-transform: uppercase; letter-spacing: 2px; font-size:12px; margin-bottom: 20px; display: inline-block;}
  & p {margin-bottom: 10px; text-align: center;}
  & p:last-child {margin-bottom: 0;}
}

@media screen and (min-width:991px) {
  #allgemein p {text-align: justify;}  
  #slide5 p {text-align: justify;}  
  #allgemein h2 {text-align: left;}  
  #slide5 h2 {text-align: left;} 
}

#vorteile { background:#ffffff;
  & .cfs {padding:150px 0 120px; max-width: 1400px;}
  & .item {flex:1 1 500px; padding:0 50px; margin-bottom: 30px;}
  & h2 {font-size: clamp(1.25rem, 1.125rem + 0.4vw, 1.4rem); margin-bottom: 30px; text-align: left;}
  & li {line-height: 35px; list-style: none; position:relative; padding-left: 28px;}
  & li::after {content: ''; position: absolute; left: 0; top: 8px; background:var(--base3) url(images/haken.png); background-size: 14px 13px; background-position: center; background-repeat: no-repeat; width: 20px; height: 20px; border-radius: 50px;}
}


#zuschuss {background: var(--background); color:#fff; position: relative; overflow: auto;
  & .cfs {padding:150px 0; max-width: 830px;}
  & .item {text-align: center; padding:0 15px;}
  & span.zuschuss {font-size: clamp(1.25rem, 0.625rem + 2vw, 2.5rem); margin-bottom: 40px; display: block;}
  & .muhsagtdiekuh {position:absolute; right:-200px; top:29px; width:200px; height:50px; background:#fff; color:#9e8091; display: flex; justify-content: center; align-items: center; font-weight: 400; font-size:20px;}
  & .muhsagtdiekuh.in-view {right:0; transition:all .6s ease;}
}



#counter {display: flex; justify-content: center; margin-bottom: 30px; min-height: 143px;
  & .box {display: inline-block; height:1.1em; overflow: hidden;line-height: 1em; font-size: 4em; opacity:0; position:relative; font-weight:400;}
  & .box.in-view {opacity: 1; font-size: 8em; transition: all 4s ease;}
  
  & .box.erste-number::after {position:relative; white-space: pre; content: "0\A 1\A 2\A 3\A 4\A";}
  & .box.erste-number.in-view::after  {animation: erste-animate 5s forwards; animation-delay: 1s;}
  & .box.zweite-number::after {position:relative; white-space: pre; content: "0\A 1\A";}
  & .box.zweite-number.in-view::after  {animation: zweite-animate 5s forwards; animation-delay: 1.3s;}
  & .box.dritte-number::after {position:relative; white-space: pre; content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A";}
  & .box.dritte-number.in-view::after  {animation: dritte-animate 5s forwards; animation-delay: 1.3s;}
  & .box.vierte-number::after {position:relative; white-space: pre; content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A";}
  & .box.vierte-number.in-view::after  {animation: vierte-animate 5s forwards; animation-delay: 1.3s;}
  & .box.fuenfte-number::after {position:relative; white-space: pre; content: "€";}
  
 }
 
footer {padding: 0 0;
& .copyright {display: flex;justify-content: center; align-items: center; background: #222; color: rgba(255,255,255,.3);margin-top: 80px;padding: 30px;font-size: 11px;letter-spacing: .4px; text-transform: uppercase;}
& .copyright a {color:rgba(255,255,255,.5); text-decoration: none; transition: all .3s ease;}
& .copyright a:hover {color:rgba(255,255,255,1); transition: all .3s ease;}
}


#impressum {padding:100px 20px; line-height: 25px;
  & h2 {margin: 0 0 50px; text-align: left;}
  & .cfs {max-width: 1400px; align-items: start;}
  & .item {flex:1 1 400px; opacity:0; padding:0 20px;}
  & .item.in-view {opacity:1; transition: all 1s ease; transition-delay: .5s;}
  & .actionbutton {background:var(--base); color:#fff;margin-top:50px;}
}

#datenschutz {padding:100px 20px; line-height: 25px;
  & h2 {margin: 0 0 50px; text-align: left;}
  & .cfs {max-width: 1400px; align-items: start;}
  & .item {flex:1 1 400px; opacity:0; padding:0 20px;}
  & .item.in-view {opacity:1; transition: all 1s ease; transition-delay: .5s;}
  & .actionbutton {background:var(--base); color:#fff;margin-top:50px;}
}


#beratung {
  background: #826a7d url(images/beratung.jpg) center center no-repeat;
  background-size: cover;
  height: 700px;
}
@media screen and (min-width:1600px) {
  #beratung {height:1000px;}
}
@media screen and (max-width:1000px) {
  #beratung {height:800px; background: #826a7d url(images/beratung_small.jpg) center center no-repeat;}
}




@media screen and (max-width:991px) {
  #zuschuss {
  & .cfs {padding: 100px 0 50px;}
  & span.zuschuss {margin-bottom: 0;}
  }

  #vorteile .item, #allgemein .item {padding:0 15px;}
  #alternativen {padding: 50px 15px;
  & .item {margin: 0 10px 20px;}
  & .cfs {padding: 36px 0 0px;}
  }
}


 @media screen and (max-width:650px) {
     #slide11 {
         & .cfs {padding:50px 0;}         
     }
     #counter {margin:20px 0;
    & .box {font-size:5em;}
    }
    footer span.big {font-size:20px;}

  }






@media screen and (max-width: 1146px) {
  
  .item {padding:0;}

  #slide1 {min-height: auto;
  & .cfs {padding:50px 10px; height:auto;}
  & :is(h1, h2, p, .buttons) {text-align: center;} 
  & .img-fluid {max-width: 400px;}
  & .item:nth-child(2) {border-top: 1px solid #fff; margin-top: 50px; padding-top: 20px;}
  & .buttons {margin-bottom: 30px;}
  }
  #vorteile {
    & .cfs {padding: 60px 0 20px;}
    & .item {max-width: 600px;}
  }
  #allgemein {
    & .cfs {padding: 50px 0 30px;}
  }
}

@media screen and (max-width: 500px) {
  #slide1 {
    & .item:nth-child(2) {padding: 0; border-top:0;}
    & h1 {margin-bottom: 0;}
    & p {margin:10px 0;}
    & .buttons {margin-bottom: 0;}
    }
  nav {
    & a::before {display:none;}
    & a {display: block; text-align: center; margin-bottom: 12px;}
    & a::after {width:100%;}
  }

  #allgemein {
    & .cfs {padding: 50px 0 30px;}
  }

}

#kontaktform {padding: 100px 0 0;
& .cfs {max-width: 1400px;}
& .item {flex:1 1 250px; opacity:0;text-align: center; margin:0 50px 90px;}
& .item.in-view {opacity:1; transition: all 1s ease; transition-delay: .5s;}
& .item:nth-child(2) {text-align: center; margin-bottom: 0;}
& p {line-height: 27px; margin:15px 0 15px;}
& span.big {font-size: 26px; display: block; margin-bottom: 5px; }
& span.small {font-size:14px; display: block; margin-bottom: 30px;}
& .icon_headphones {width:60px; height:110px;}
& .col-sm-8 {text-align: left;}
& .col-sm-4 {text-align: left;}  
}