.callout {font-size: 16px;
  line-height: 1.21053;
  font-weight: 400;
  letter-spacing: .012em;
  color:#373737; 
  margin: 19px 0 28px;
  font-weight: 400;
  font-family: sans-serif;
}

.lang {width: 25px; height:54px; position: fixed;left: 2px; z-index: 99;mix-blend-mode: difference;
& .de {width: 25px;background-color: #3b3e40; color: #fff; padding:3px; display: block; text-decoration: none; font-size: 13px; display: flex; justify-content: center; transition: all .3s ease;}
& .de:hover {width: 50px; background:#7f8488; transition: all .3s ease;}
& .en {width: 25px;background-color: #3b3e40; color: #fff; padding:3px; display: block; text-decoration: none; font-size: 13px; display: flex; justify-content: center; margin-top:2px; transition: all .3s ease;}
& .en:hover {width: 50px; background:#7f8488; transition: all .3s ease;}
}



#startbild {margin-bottom: 15px; position: relative;
      & .cfs {max-width: var(--seitenbreite); margin: 0 auto;  padding: 277px 0; color: #ffffff;background:#3b3e41 url(images/ESD-Verpackungen-Startseite2.jpg) center center no-repeat; background-size: cover; }
      & .item {flex:1 1 400px;}     
      & .callout {color:#989c9e;}
      & .subhead {margin: 10px 0 0; padding:0;}
      & .action {background:#6d7173;}
      & .action2 {border-color: #6d7173; color:#fff;}
      @media screen and (width < 1755px) {
       & .cfs {padding: 277px 0;}            
      }
      @media screen and (width < 1450px) {
       & .cfs {padding: 200px 0;}
      }
}

#gefache_karton {margin-bottom: 15px; position: relative;
      & .cfs {max-width: var(--seitenbreite); margin: 0 auto; padding: 277px 0; color: #ffffff; background:#efefef url(images/Gefache_Unterseite.jpg) center center no-repeat; background-size: cover; }
      & .item {flex:1 1 400px; text-align: center;}     
      & .callout {color:#bfbfbf;}
      & .action2 {border-color:#fff;color:#fff} 
}

#startbild.in-view, #gefache_karton.in-view  {opacity: 1; transition: all 1.5s ease; transition-delay: 1s;}
.telnr {width: 210px; display: flex; & small {display: block;}}
.headphones { margin-right: 12px;}
.desktop_off {width: 100%; max-width: 100%; height:auto;}
.img-fluid {opacity: 0; filter: blur(5px); transform: translate(0, 20px); transition: all .4s ease;}
.img-fluid.in-view {opacity: 1; filter: blur(0px);transition: all 1.5s ease; transition-delay: .2s; transform: translate(0, 0);}

@media screen and (width > 1220px) {
.desktop_off {display: none;}
.menucontainer {width: 540px;}
}

  @media screen and (width < 1220px) {
    #startbild {background:#3b3e41;
      & .subhead {margin: 10px auto; max-width: 400px;}
      & .desktop_off {max-width: 700px; margin: 0 auto;}
      & .cfs {background:none; flex-direction: column-reverse; padding: 0; }
      & .item:nth-child(1) {padding: 0;}
      & .item:nth-child(2) {padding:60px 20px 0;}
      & .item {text-align: center; flex:auto;}
    }
    #gefache_karton {background:#4f5356;
      & .cfs {background:none; flex-direction: column-reverse; padding: 0; }
      & .item:nth-child(1) {padding: 0;}
      & .item:nth-child(2) {padding:60px 20px 0;}
      & .item {text-align: center; flex:auto;}
    }
    #header {
      & .header{justify-content: center;}
      & .item:nth-child(2) {order:1; flex: 1 1 100%; height:70px;}
      & .item:nth-child(1) {order:2;height:35px;}
      & .item:nth-child(3) {order:3;height:35px;}
      & .logo {margin:0 auto;}
      }
   }

  @media screen and (width < 570px) {
    #header {
      & .header{      
      & .item:nth-child(1) {height:auto;}
      & .item:nth-child(3) {height:auto;}
      & .item:nth-child(1) {order:2;}
      & .right {margin-top:20px; justify-content: center;flex-direction: column; & a {text-align:center;}}
      & .right .link {background: var(--color2); border-radius: 20px; padding: 9px 36px; margin: 0 0 5px;font-size: 18px; color:#fff;}
      & .left {flex-direction: column;text-align: center;}
      & .left .link {font-size: 19px;}
      & a.link::after {display:none;}
    }
   }
   #startbild {
    & .item:nth-child(2) {padding: 60px 10px 0;}
     }
     h1 {font-size: 36px;}
  }

@media screen and (width > 570px) {
  .menu {height:23px;}  
}

#wald {background: #eaeaea url(images/Wald2.jpg) center top no-repeat;max-width: var(--seitenbreite);margin:0 auto 15px; background-size: cover;  padding: 106px 0 668px; padding-top: var(--padding-top);
  & h2 {margin-bottom: 15px;}  
  & .subhead {font-size:20px; max-width: 556px;margin: 0 auto;}
  & .flexfull {padding-bottom: min(36px, 9%);}
  & .item {padding:0 5px;}
  & .siegel {height:65px; width:auto; transition: all .3s ease;}
  & .siegel:hover {scale: 1.5; transition: all .3s ease;}
  @media (width < 450px) {
    .subhead {padding: 0 10px; font-size: 16px;}
  }
}

.email {padding:5px 20px; border:1px solid rgba(0,0,0,.5); border-radius: 30px; display: inline-block; margin: 5px 0 10px;}
.text {opacity: .2; padding:20px; color:#515151}
.text.in-view {opacity: 1; transition: all 2.5s ease; transition-delay: .5s;}
.text p {font-weight: 400; margin-bottom: 10px; font-size: 15px; letter-spacing: 0px; font-family: sans-serif;line-height: 150%;}
.text h3 {font-size:21px;color:#000;}

#gefache {background: #efefef; max-width: var(--seitenbreite); margin:0 auto 15px;
  & .cfs {align-items: center; padding:0 0 0 100px;}
  & .subhead {margin-bottom: 25px;}
  & .item:nth-child(1) {text-align: center;}
  & .item:nth-child(2) {flex: 1 1 70%;}
  & .item:nth-child(1) {flex: 1 1 30%;}
  & .item {flex: 1 1 500px; padding:0; align-items: center;}
  @media (width < 1150px) {
  .cfs {flex-direction: column; padding:0;}
  .item:nth-child(1) {padding-top:65px;} 
  .subhead {max-width:400px; padding:0 20px;}
  }
}
 
#polsterpack {margin-bottom: 15px;color:#000; max-width: var(--seitenbreite);background:#f3f3f3; margin:0 auto 15px;
  & .cfs {color: #000000; align-items: center; padding:0 100px 0 0;}
  & .subhead {margin-bottom: 25px;max-width:400px; padding:0 20px;}
  & .item {flex:1 1 400px; text-align: center; padding:0;}  
  & .item:nth-child(1) {flex: 1 1 70%;}
  & .item:nth-child(2) {flex: 1 1 30%;}
  @media (width < 1150px) {
  .cfs {background:#f3f3f3; flex-direction: column; padding: 0 10px; }
  .item:nth-child(1) {padding: 0; order:2; }
  .item:nth-child(2) {padding:65px 0 0 0; order:1;}
  .item {text-align: center; flex:auto;} 
}
} 
#informationen {background:#ffffff; padding-bottom: min(90px, 9%);max-width:var(--seitenbreite); margin:0 auto 15px;
  & .cfs {max-width: 1500px;}
  & .item {flex:1 1 300px;}
  & .padding {padding:3%;}
  & p {font-weight: 100; font-size:15px;font-family: sans-serif;}
  @media (width < 1150px) {
   & h3 {padding:0 20px;}
   & .cfs {padding:0;}
   & .text h3 {padding:0;}
   }
   @media (width < 600px) {
    & .text {text-align: center;}
   }
}


#ueberuns {background: #efefef; max-width: var(--seitenbreite); margin: 0 auto 15px; padding-bottom: var(--padding-bottom);
  & .cfs {max-width: 1380px; align-items: start;}
  & .flex500 {text-align: justify;}
  & .flexfull {padding-bottom: min(34px, 5%);}
  & h3 {text-align: center;font-family: 'SFPRODISPLAYMEDIUM';}
  & .item200 {max-width: 200px; text-align: center; padding: 1%; font-size:13px; font-weight:100; font-family: sans-serif; 
    & .img-fluid {border-radius: 10px;}
    & .img-fluid:hover {scale:1.05; transition: all .3s ease; box-shadow: 0 7px 15px rgba(0,0,0,.2);}}
}

#beratung {padding:min(6%,100px); padding-bottom:var(--padding-bottom);
& .img-fluid {border-radius: 0;}
& .cfs {padding:0; max-width: 100%;}
& .item {padding:0;}
& .img-fluid {width:100%;max-width: 100%;}
& .mb50 {margin-bottom: min(80px, 5%);}
& .unterstuetzung {max-width: 800px; padding: 0 20px; font-family: sans-serif; & .link {color:#000;} & h2 {margin-bottom: 20px;}}
/* & .action {background: #fff; color:#000;}
& .action2 {border-color:#fff; color:#fff;} */
}

#esdgefache {
  & .headimage {max-width: 600px;}
}

#esd-einleitung {background:var(--bg-esd); color:#f3f3f3;
& .cfs {align-items: start;}
& h3 {color: #fff;}
}

#esdkartonagen {
  & .headimage {max-width:860px;}
  & .cfs {max-width: 1380px;}
}


#esdmaeander {
  & .headimage {max-width:630px;}
  & .flex200 {flex: 1 1 280px;}
}

#esdwickel {padding-bottom: 0;
  & .starterset {padding: 62px;background: #2f3339;border-radius: 20px;}
  & .action {color:#fff;}
  & ul {margin-bottom: 50px;}
  & li {flex:1 1 100%; padding:0;}
  & h3 {font-size:20px; margin-bottom: 15px;}
}

.disc {max-width: 8px; height: auto;}

.video-wickelverpackung {overflow: hidden; & video {max-width: 124%;margin-left: -71px;display: block;}}
.borderradius {border-radius: 20px; overflow: hidden;position: relative;}
.borderradius::after {content: ''; position: absolute; left:0; bottom:0; height:100%; width:100%; background:rgba(0,0,0,.1);}


.wichtig {background:#515151; color:#fff; padding:3px;}



#polster2 {margin-bottom: 15px; position: relative;
  & h1 {text-align: center; color: #ffffff;}
  & .flex500 {padding:0; text-align: center;}
  & .subhead {color:#ffffff; text-align: center; margin-bottom: 20px; max-width: 530px;}
  & .cfs {background:#6b7073 url(images/packpapier_streifen2.jpg) right center no-repeat; background-size: cover; max-width: var(--seitenbreite); margin: 0 auto; align-items: center; padding-block: 280px;}
  & .action2 {border-color:#ffffff; color:#ffffff; margin:0;}
  @media (width > 1500px) {
      & .flex500:nth-child(1) {flex:1 1 60%;}
      & .flex500:nth-child(2) {flex:1 1 40%;}   
  }
  @media  (width < 900px) {  
    & .cfs {background:#6b7073 url(images/packpapier_streifen_smartphone.jpg) top center no-repeat; background-size: cover; padding-top: 10%; padding-bottom: 500px;}
  }
}

#polster2_en {margin-bottom: 15px; position: relative;
  & h1 {text-align: center; color: #ffffff;}
  & .flex500 {padding:0; text-align: center;}
  & .subhead {color:#ffffff; text-align: center; margin-bottom: 20px; max-width: 530px;}
  & .cfs {background:#6b7073 url(images/packing_paper2.jpg) right center no-repeat; background-size: cover; max-width: var(--seitenbreite); margin: 0 auto; align-items: center; padding-block: 280px;}
  & .action2 {border-color:#ffffff; color:#ffffff; margin:0;}
  @media (width > 1500px) {
      & .flex500:nth-child(1) {flex:1 1 60%;}
      & .flex500:nth-child(2) {flex:1 1 40%;}   
  }
  @media  (width < 900px) {  
    & .cfs {background:#6b7073 url(images/packing_paper_small.jpg) top center no-repeat; background-size: cover; padding-top: 10%; padding-bottom: 500px;}
  }
}


#polster3 {
  & .cfs {max-width: 1380px; align-items: center; padding-top:0;}
  & .headimage {max-width:860px;}
  & .flexfull {padding-bottom: 40px;}
}

#polsterpack_gal, #polsterpack_gal2 {
  & .cfs {padding:15px 10px 5px;max-width: 1330px;}
  & .flex200 {flex:1 1 280px; margin: 0 10px 20px;}
}
#polsterpack-packpapier {
  & .cfs {background: #fff; align-items: center; max-width: 1300px;}
  & .action2 {margin-left:0; margin-right:10px; margin-top:20px; color:#000; border-color:#000;}
  & .action {background:#000;}
  & .beratung {display: flex; margin-top:30px; & .bigger {font-size:20px; margin-left: 10px;}}
}

.shopprodukte {max-width: var(--seitenbreite); margin:0 auto 15px; padding-bottom: var(--padding-bottom); background: #efefef;
& .cfs {max-width: 1400px;}
& .img-fluid {opacity: 1; filter: blur();transform: translate(0, 0);}
& .flex200 {transform: translate(0, 20px);flex: 1 1 237px; padding:0 10px 20px; opacity: 0; transition:all 1.5s ease; transition-delay: .5s;}
& .flex200.in-view {transform: translate(0, 0); opacity: 1; transition:all 1.5s ease; transition-delay: .5s;}
& h3 {font-size:16px; margin-bottom: 3px;}
& p {font-family: sans-serif;}
& img {margin-bottom: 20px;}
& .box {background: #fff; border-radius: 20px; text-align: center; padding: 20px 10px 30px; box-shadow: 0 9px 20px rgba(0,0,0,.02); display: flex; flex-direction: column; justify-content: space-between; height: 100%;transition: all .3s ease}
& .box:hover {scale:1.05; transition: all .3s ease;}
& .action {background:#000; padding: 7px 25px; width: 100px; margin:20px auto 0;}
& .flexfull3 a {color:#000;font-family: sans-serif;}
}

.kontaktbutton {display:inline-block; padding: 15px 60px; background: #1b1b1b; color:#fff; transition: all .3s ease; border-radius: 150px; text-decoration: none; font-size: 26px;}
.kontaktbutton:hover {background: #367fb4; scale: 1.1; transition: all .3s ease;}

.logo_w {max-width: 200px; height: auto; margin:50px auto; opacity: .9;}


#bedruckteverpackungen {margin-bottom: 15px; position: relative;
  & h1 i {text-align: center; color: #ffffff; font-size:95px;}
  & .flex500 {padding:0; text-align: center;}
  & .subhead {color:#ffffff; text-align: center; margin-bottom: 20px; max-width: 530px; opacity: 0;transition: all .5s ease;}
  & .cfs {background:#6b7073 url(images/Verpackungsdruck.jpg) left center no-repeat; background-size: cover; max-width: var(--seitenbreite); margin: 0 auto; align-items: center; padding-block: 15%; opacity:0;}
  & .cfs.in-view {opacity:1;transition: all 2s ease; }
  & .action2 {border-color:#ffffff; color:#ffffff; margin:0;}
  & .flex500:nth-child(1) {flex:1 1 340px;}
  & .flex500:nth-child(2) {flex:1 1 660px;}
  & h1 i {opacity:0; transition: all .5s ease;font-style: normal;letter-spacing: -17px; display: inline-block;}
  & h1 i.in-view {opacity: 1; transition: all .3s ease;}
  & h1 i:nth-child(1) {transition-delay: 1.1s;}
  & h1 i:nth-child(2) {transition-delay: 1.2s;}
  & h1 i:nth-child(3) {transition-delay: 1.3s;}
  & h1 i:nth-child(4) {transition-delay: 1.4s;}
  & h1 i:nth-child(5) {transition-delay: 1.5s;}
  & h1 i:nth-child(6) {transition-delay: 1.6s;}
  & h1 i:nth-child(7) {transition-delay: 1.7s;}
  & h1 i:nth-child(8) {transition-delay: 1.8s;}
  & h1 i:nth-child(9) {transition-delay: 1.9s;}
  & h1 i:nth-child(10) {transition-delay: 2s;}
  & h1 i:nth-child(11) {transition-delay: 2.1s;}
  & h1 i:nth-child(12) {transition-delay: 2.2s;}
  & h1 i:nth-child(13) {transition-delay: 2.3s;}
  & h1 i:nth-child(14) {transition-delay: 2.4s;}
  & h1 i:nth-child(15) {transition-delay: 2.5s;}
  & h1 i:nth-child(16) {transition-delay: 2.6s;}
  & h1 i:nth-child(17) {transition-delay: 2.7s;}
  & h1 i:nth-child(18) {transition-delay: 2.8s;}
  & .subhead.in-view {opacity: 1; transition: all 2s ease;transition-delay: 3s;}
  & .action2 {opacity: 0;}
  & .action2.in-view {opacity: 1;transition: all 2s ease;transition-delay: 3.5s;}

  @media (width < 1300px) {  
    & h1 i {font-size: 60px; letter-spacing: -12px;}
  }
  @media (width < 1040px) {
     .cfs {background:#6b7073 url(images/Verpackungsdruck_small.jpg) left center no-repeat; background-size: cover; padding-block: 25%;}
  }
}

.gal .img-fluid { transition: all 0.3s ease 0s;}
.gal .img-fluid:hover  {scale: 1.05; transition: all 0.3s ease 0s;}


.contentbereich {max-width: var(--seitenbreite); margin: 0 auto 15px; padding-top:var(--padding-top); padding-bottom:var(--padding-bottom); background:#efefef; 
  & .cfs {max-width: 1500px;align-items: center;}
  & .flex200 {margin:0 10px 20px;}
  & h2 {margin-bottom: 25px;}
  & h3 {margin-bottom: 20px; color: #2b2b2b; font-size: 20px;}
  & ul {display: flex; flex-wrap: wrap;}
  & li { transition: all 0.8s ease 0s; list-style:none; color:#717171; flex:1 1 200px; min-width: 300px; display: flex; justify-content: left; align-items: center; margin:0 20px 10px 0; & img {margin-right:10px;}}
  & li:hover {color:#000; transition: all 0.8s ease 0s;}
  & li .icon { transition: all 0.8s ease 0s; }
  & li:hover .icon {opacity: 1; scale: 1.2; transition: all 0.8s ease 0s;}
  & .headimage {max-width: 800px; margin:0 auto;}
 
  @media (width < 1039px) {
  .flex500 {text-align: center;}
  .subhead {padding:0 10px;}
  .headimage {padding:0 7%;}
  }

}

#impressum {
  & .cfs {align-items: start;} 
}
#leistungen {
  & h3 {margin-bottom: 10px;}
  & h1 {font-size:40px;}
}
#esdgefache {
  & .headimage {max-width: 600px;}
}

@media (width < 1039px) {
  .flex500 {text-align: center;}
  .flexfull {padding-bottom: 4%;}
  li {text-align: left;}
  .subhead, h2, h3 {padding:0 10px;}
  .action2 {margin:0;}
  .beratung {justify-content: center;}
  #leistungen {
    & h1 {font-size: 30px;}
  }
  #esdtueten, #esdpapier, .shopprodukte {
    & .cfs {padding: 0;}
  }
  .ausbildungssymbol  {margin:20px auto;}
}




@media (width < 570px) {
  #bedruckteverpackungen {
    & h1 {letter-spacing: 8px; font-size: 15px;}
  } 
}

#ausbildung {
  & h1 {font-size: 35px;}
  & .cfs {align-items: start;}
  .tel {font-size: 20px;}
}

#guete {
  & .item {margin:0 10px; text-align: center;}
  & .icon {opacity: 1; width:100%; height: auto; margin: 0 auto;}
}
#agb {
  .cfs {align-items: start;}
}