:root {
   --color1: #ae9a84;
}



#startbild {background: url(images/schmiedefelder-alm2.jpg) center top no-repeat; background-size: cover; margin-top: -178px; opacity: 0; transition: all 1.5s ease; z-index: -1;
  position: relative;
      & .cfs {max-width: 1473px; margin: 0 auto;  padding: 800px 0 100px; color: #ffffff;}
      & .item {text-align: center;}
      & p {max-width: 525px; margin:0 auto;}
      & h1 {font-weight: 100;}
}

#startbild.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: 1s;}




@media screen and (max-width:1150px) {
  #startbild {
    & .cfs {padding:300px 0;}
  }
}

  @media screen and (width < 1150px) {
    #startbild {background: url(images/schmiedefelder-alm2_small.jpg) center top no-repeat; background-size: cover;}

    #header {
     & .header{justify-content: center;}
     & .item:nth-child(2) {order:1; flex: 1 1 100%;}
     & .item:nth-child(1) {order:2; flex: 1 1 100%;}
     & .item:nth-child(3) {order:3; flex: 1 1 100%;}
     & .logo {margin:0 auto;}
     }

    #startbild {margin-top:-146px;}
  }

   @media screen and (width > 1149px) {
    #header {
      & .menucontainer {width: 380px;}
    }
   }
    
  
.email {padding:5px 20px; border:1px solid rgba(0,0,0,.5); border-radius: 30px; display: inline-block; margin: 5px 0 10px;}
.cfs2 {display: flex; justify-content: center; flex-wrap: wrap; align-items: center;margin: 30px 0;}

.text {opacity: .2;}
.text.in-view {opacity: 1; transition: all 2.5s ease; transition-delay: .5s;}


#intro {padding-top:min(100px, 10%);padding-bottom:min(50px, 10%);
& .itemfull {margin-bottom:min(100px, 10%);opacity:0; transition: all 1s ease;;}
& .itemfull.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: 1.5s}
& .itemfull p {max-width: 700px; margin:20px auto 0; font-weight: 600;}

& .cfs {max-width: 1500px; align-items: center; padding: 0;
& .item {margin-bottom:min(50px, 10%);; padding:0 40px;}
 
 
& h2 {margin-bottom: 20px;}
& img {margin-bottom: 20px; opacity: 0; transform: translate(0, 40px);}
& img.in-view {opacity: 1; transition: all 1.5s ease;  transform: translate(0, 0);}

}}

@media screen and (width < 1000px) {
  #intro {
    & h1 {font-size:44px; padding:0 20px}
    & p.headline {padding:0 40px;text-align: center;}
    & .flex500 {flex: 1 1 100%;}
    & .flex500:nth-child(1) {order:1;}
    & .flex500:nth-child(2) {order:2;}
    & .flex500:nth-child(3) {order:4;}
    & .flex500:nth-child(4) {order:3;}
    & .flex500:nth-child(5) {order:5;}
    & .flex500:nth-child(6) {order:6;}
    & .flex500:nth-child(7) {order:8;}
    & .flex500:nth-child(8) {order:7;} 
    & p {text-align: center;}
    & h2 {text-align: center;}
  }
}

#infoleiste {background: url(images/bg_infoleiste.jpeg) center center no-repeat; background-size: cover;
  & .cfs {align-items: center; padding:85px 0 50px; }
  & .item {max-width: 200px; text-align: center; font-weight: 500; font-size:14px; color:#9f9fa0; line-height: 20px; margin-bottom: 40px; opacity: 0; transform: translate(0, 20px); position: relative;}
  & .item.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
  & .img-fluid {border-radius: 0; max-height: 67px; width: auto; margin: 0 auto 19px;}
  
}

@media screen and (width > 1000px) {
  #infoleiste {
    & .item {margin-left:10px; margin-right: 10px;}
    & .item::after {content:''; position:absolute; right:-10px; bottom:0; height:0; width:1px; background:#a09fa0;}
    & .item.in-view::after {height: 100%; transition: all 2s ease;}
    & .item:last-child::after {display: none;}
    & .item:nth-child(2)::after {transition-delay: 1s;}
    & .item:nth-child(3)::after {transition-delay: 1.25s;}
    & .item:nth-child(4)::after {transition-delay: 1.5s;}
    & .item:nth-child(5)::after {transition-delay: 1.75s;}
    & .item:nth-child(6)::after {transition-delay: 2s;}
    & .item:nth-child(7)::after {transition-delay: 6s;}
  }
}

#galerie {padding-top:min(100px, 10%);padding-bottom:min(50px, 10%);
  & .img-fluid {border-radius: 15px;}
  & .cfs {max-width: 1526px;}
  & .item {flex:1 1 300px; 
    & img {margin-bottom: 40px; opacity:0; transform: translate(0, 20px);transition: all .4s ease;}
    & img.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
    & img:hover {box-shadow:0 10px 20px rgba(0,0,0,.35); scale: 1.1; transition: all .4s ease; }
  }

}

#aushang {padding-top:min(100px, 10%);padding-bottom:min(65px, 10%); background:#e0e0e0;
  & .img-fluid {border-radius: 15px;}
  & .cfs {max-width: 1526px;}
  & .item {flex:1 1 242px; max-width: 300px; 
    & img {margin-bottom: 40px; opacity:0; transform: translate(0, 20px);transition: all .4s ease; box-shadow:0 5px 10px rgba(0,0,0,.05);}
    & img.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
    & img:hover {box-shadow:0 10px 20px rgba(0,0,0,.35); scale: 1.1; transition: all .4s ease; }
  }
  & .arbeitsschutz {width: 100%; text-align: center; border-radius: 136px; display: block; text-decoration: none; color: #3b3b3b; font-weight: 500; transition-delay: 0s;}
  & .arbeitsschutz:hover {scale:1.1; transition:all .3s ease; transition-delay: 0s;}
  & .arbeitsschutz.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
  & .arbeitsschutz.in-view:hover {scale:1.1; transition:all .3s ease; transition-delay: 0s;}
}

#unterseiten {
.cfs {max-width: 1533px;}
.item {padding:0 35px; margin-bottom: 40px;}
.download {max-width: 125px; height: auto; border-radius: 10px;box-shadow:0 5px 10px rgba(0,0,0,.05);transition: all .4s ease; margin: 30px 0 10px;}
.download:hover {scale:1.1; transition:all .3s ease; transition-delay: 0s;}
.flex250 {flex: 1 1 250px;}
}

#footer {
  .cfs {justify-content: center;}
  .tel {display: flex;}
  .map {opacity: .5; transition: all .3s ease; max-width: 200px; height: auto; margin: 0 auto;}
  .map:hover {opacity:.7; scale: 1.02; transition: all .3s ease;filter:drop-shadow(0px 17px 15px rgba(0,0,0,.4));}
  .logo_footer {opacity: .4;transition: all .3s ease; max-width: 237px; margin: 0 auto;}
  .logo_footer:hover {opacity:.7; scale: 1.02; transition: all .3s ease;filter:drop-shadow(0px 17px 15px rgba(0,0,0,.4));}
  }

  @media screen and (width < 543px) {
    #footer {
      & .cfs {justify-content: center; padding:0}
      & .item {flex: 1 1 100%; text-align: center;}
      & a.link {margin: 0;}
      & .tel {justify-content: center;}
    }
  }


  #ausbildung {padding-top:min(100px, 10%);padding-bottom:min(90px, 10%);
    & h2 {margin-bottom: 20px;}
    & h3 {font-size:18px;}
    & p {margin-bottom: 20px;}
    .cfs {max-width: 1524px;align-items: center;}
    .item {flex:50%; margin-bottom: 40px;}
    .img-fluid {opacity:0; transform: translate(0, 20px);transition: all .4s ease;}
    .img-fluid.in-view {opacity: 1; transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}
  }

  @media screen and (width < 1000px) {
    #ausbildung {text-align: center;
      & h2 {margin-bottom: 20px; text-align: center;}
      & h3 {text-align: center;}
      & p {text-align: center;}

  }

}

  @media screen and (width < 600px) {
    #ausbildung {
      & .item {flex: 1 1 100%;}
      & .cfs {padding:0;}
    }
    #aushang {
      .cfs {padding:0;}
    }
    #intro {
      & h1 {font-size:34px;}
      & p.headline {padding:0 20px;}
    }

  }



  @media screen and (width > 900px) {
    #ausbildung {
      & .item {padding:0 50px;}
    }
  }