:root {
   --color1: #ae9a84;
}

.conny {max-width: 50px;height:50px; margin:10px auto;}
.sterne {max-width: 156px; height:auto; margin: 0 auto 30px;}


#intro { background: #f2f2f2; 
      & .cfs {max-width: 1473px; margin: 0 auto;  padding: 100px 0 80px; color: #222222;}
      & .item {text-align: center;}
      & span.sub {font-size: 80px; display: block; line-height: 100%;}
      & span.selber {font-size: 60px; display: block; line-height: 100%;margin-bottom: 10px;}
      & p {max-width: 525px; margin:0 auto;}
}


#statement {padding:0 10px; background:#000000; color:#a4a4a4;
 .cfs {max-width: 700px; margin: 0 auto; text-align: center; border-radius: 30px;  border: 1px solid rgba(0,0,0,.2); padding:min(65px, 8%);}
 & p.name {margin-bottom: 0;}
 & small {display: block; margin-top: -4px;}
}

.tiefbass {color:var(--color1);}

  @media screen and (max-width:1150px) {
    #header {
     & .header{justify-content: center;}
     & .item:nth-child(2) {order:1; flex: 1 1 100%;}
     & .item:nth-child(1) {order:2;}
     & .item:nth-child(3) {order:3;}
     & .logo {max-width:80px; margin:0 auto 20px;}
     & .menucontainer {width:auto;  }
    }

  }
    @media screen and (max-width:610px) {
      #header {padding: 5px 20px 24px; 
       & .item:nth-child(2) {flex: 1 1 100%;}       
      }
     }
    @media screen and (min-width:901px) {
      #header {
        .left {justify-content: left;}
        .right {justify-content: right;}
      }
    }
    

#prinzipien {padding:100px 0; background:#f2f2f2;
.cfs {max-width: 1900px; 
  & .item {flex:1 1 270px; max-width: 290px; margin:0 10px 20px; border-radius: 20px; background:#fff; padding:min(40px, 8%); box-shadow: 0 10px 20px rgba(0,0,0,.05);display:flex; flex-direction: column;
    justify-content: space-between;
    & img {width: auto; margin:0 auto 20px;}
    & h3 {font-size:16px; font-weight: 500; text-align: center; color:#555;}
    }
  & .itemfull {flex:1 1 100%; text-align: center; margin-bottom: 50px;
    & small {display: block;}
    & p {max-width: 800px; margin:0 auto}
    }
  }
  .pic1 {max-height: 137px;}
}
  
.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;}

.vorteilnachteil {flex:1 1 200px; max-width: 386px; padding:20px; & li {list-style: none; line-height: normal; font-weight:500; font-size:14px;}
& ul li {position: relative; color:#aaa;}
& ul:nth-child(1) li::after {position: absolute; content:''; top:2px; left:-21px; background:url(images/green.png) center center no-repeat; background-size:contain;width:14px;height:14px;}
& ul:nth-child(2) li::after {position: absolute; content:''; top:2px; left:-21px; background:url(images/red.png) center center no-repeat; background-size:contain;width:14px;height:14px;}
}
.geeignet {color: var(--color1); font-size: 15px; line-height: 22px; border-top: 1px solid #e9e5e1; padding-top: 13px;}

#prinzipien_description {padding:100px 0;
  & .cfs {max-width: 1600px; .itemfull {flex:1 1 100%; text-align: center; margin-bottom: 50px;}}
  & img {max-width: 100%; height:auto;}
  .pic {flex: 1 1 150px; max-width: 170px; padding: 20px;}
  .text {flex:1 1 400px; padding:20px; & h2 {font-size:18px; font-weight: 500; margin-bottom: 10px;} & p {font-size:16px;}}
}

#schallgesetze {padding:100px 0; background:#f2f2f2;
  .cfs {max-width: 1200px;
  & .item {padding: 30px; border-radius: 30px; background: #fff; box-shadow: 0 10px 20px #e2e2e2; margin-bottom: 30px; }
}
  .itemfull {max-width: 800px;
    & h2 {display: inline-block; border-radius: 100px; padding: 10px 30px; border: 1px solid rgba(0,0,0,1); margin-bottom: 30px;}}
  & small {font-weight: 500; color:var(--color1);}
  & h1 {font-size: 40px; margin: 14px 0 16px;}
  & p.color {color:#000; font-size:17px;}
  & p {font-size:15px;font-weight:500;color:var(--color1);}
}

#planung {padding:100px 0; background:#f2f2f2;
  .cfs {max-width: 1600px;}
  & h2 {font-size: 50px;}
  & .itemfull p {font-size:20px; font-weight: 500; max-width: 800px; margin:20px auto;}
  & .item {max-width: 1200px; padding:min(45px, 8%); margin:10px 0; background:#fff; border-radius: 20px;
  & .frage {font-weight: 500; font-size:20px; margin-bottom: 10px; }      
  }
  .materialien {display: flex;flex-wrap: wrap; 
    .item {flex: 1 1 100px; text-align: center; padding:4px;max-width: 279px;}
   }

}

.hochleistungssubwoofer {padding: 100px 0;
  & .cfs {max-width: 1600px; .itemfull {flex:1 1 100%; text-align: center; margin-bottom: 50px;}}
  & .cfs2 {max-width: 1600px; margin:0 auto;}
  & img {max-width: 100%; height:auto;}
  .pic {flex: 1 1 400px; max-width: 470px; padding: 20px;}
  .text {flex:1 1 400px; padding:20px; & h2 {font-size:18px; font-weight: 500; margin-bottom: 10px;} & p {font-size:16px;}} 
  & h2 {font-size: 50px;}
  & .itemfull p {font-size:20px; font-weight: 500; max-width: 800px; margin:20px auto;}
}

#bandpass2x30cmWoofer {}
#bassreflexhorn4x3cmwoofer {background:#f2f2f2;}