.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; transform: translate(0, 0);}

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


/* Navigation */ 

nav {
  & .cfs {justify-content: space-between; align-items: center; padding:min(30px,5%);}
  & .left {flex-grow: 1; width:33%;}
  & .right {flex-grow: 1; text-align: right; width:33%;}
  & .logo {margin:0 auto; max-width: 300px;}
  & .telnr {width: 199px; display: flex; align-items: center;}
  & .nummern {line-height: 20px; font-weight:400;}
  & small {font-size:13px; font-weight:100;}
  & .logo img {max-width: 100%; height:auto;}
  & a {margin:0 min(20px, 1%);}
  @media (width < 1000px) {
    .center {order:1; flex: 1 1 100%; text-align: center; margin-bottom: 30px;}
    .left {order:2}
    .right {order:3}
  }
  @media (width < 680px) {
    .left, .right {width: 100%; text-align: center;}
    .telnr {margin:0 auto 40px;}
    .link::after {display: none;}
    .link {display: inline-block; padding: 4px 20px; border-radius: 20px; color: #fff; font-size: 13px; letter-spacing: .3px; font-family: 'SFPRODISPLAYMEDIUM';font-weight: 500; background: #595f64;}
    .link, .button {font-size:18px; padding: 8px 25px; margin:0 5px 10px;}
   
    }
}

.fett {font-weight: 400; font-size: 20px; line-height: 26px;}
.divider {width: 150px; height:2px; background:#DAD4CC; margin:20px auto;}

@media (width < 1250px) {
  #start {background: url(images/eingebaute_duschwanne_small.jpg) center bottom no-repeat; background-size: cover; height:400px;}
  #middle {background: url(images/modernes_badezimmer_small.jpg) center bottom no-repeat; background-size: cover; height:400px;}
}

@media (width > 1250px) {
#start {max-width: 1800px; background: url(images/eingebaute_duschwanne.jpg) center bottom no-repeat; background-size: cover; height:800px; margin: 0 auto 15px;}
#middle {max-width: 1800px; background: url(images/modernes_badezimmer.jpg) center bottom no-repeat; background-size: cover; height:800px; margin: 0 auto 15px;}
}


#intro {padding:min(70px,8%);
& .item {text-align: center;}
& p {font-size: 20px;font-weight: 400; max-width: 680px; margin: 32px auto 20px; color: #000000; line-height: 140%;}
}


.planung { margin: 0 auto;
& .cfs {max-width: 1430px; padding:0 7.5px; align-items: center; align-items: unset;}
& .item {flex:1 1 300px; background: transparent; transition:all .5s ease; padding:0; margin:0 min(20px,3%) min(40px,5%); text-align: center; 
  & .img-fluid:hover {opacity:.3; transition: all .3s ease;}
  & h3 {margin:0;}
}
& .item:hover {background:#211104; color:#fff; transition:all .5s ease;}
& .item:hover svg {stroke: #fff;  transition: all 0.3s ease-in-out; animation: aniborder 1s linear;}
& .text {padding:min(30px,6%); width: 100%; display: flex; flex-direction: column; justify-content: space-between; & a {position: relative;}}
& svg {margin:0 auto; box-sizing:unset; border-radius: 50px; scale: 1.5; transition: all .3s ease;transform: rotate(-90deg);}
& svg:hover {transition: all .3s ease;}
& .img-fluid {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
& .item2, .item1, .item3 {border-radius: 20px; background:#f0f0f0;}
}

#zubehoer {
  & .text {height:240px;}
}



/* P A G E N A V I */

#pagenavi {margin:0 auto 15px;
  & h3 {font-size: 18px;}
  & .cfs {background:#edefef; max-width:var(--seitenbreite); padding:30px 7.5px 20px; justify-content: center;}
  & .item {flex:1 1 200px;padding:20px; margin:0 5px 10px; border-radius:20px; text-align: center; transition:all .5s ease;
  }
  & .item:hover {scale:1.05; box-shadow: 0 16px 12px -9px rgba(0,0,0,1);background:#585e61; color:#fff; transition:all .5s ease;}
  & .item:hover svg {stroke: #fff;  transition: all 0.3s ease-in-out; animation: aniborder 1s linear;}
  & .text {padding:min(30px,6%); height: 110px; display: flex; flex-direction: column; justify-content: space-between; & a {position: relative;}}
& svg {margin:20px auto 0; box-sizing:unset; border-radius: 50px; scale: 1.5; transition: all .3s ease;transform: rotate(-90deg);}
& svg:hover {transition: all .3s ease;}
}

.produktlink {color:#000000;}
/* S U B M E N U */

.submenu {padding:min(30px, 10%); flex: 1 1 300px; border-radius: 20px; background:#fff; margin-bottom: 15px; margin:0 15px 30px; display:flex; flex-direction: column; justify-content: space-between; box-shadow: 0 31px 31px -40px rgba(0,0,0,1); transition: scale .4s linear;}
.submenu:hover {scale:1.05; transition: scale .4s linear;}

.submenu4 {background:#869191 url(images/hintergrund-submenu4.jpg) center bottom no-repeat; background-size:100%; color:#fff; box-shadow: 0 31px 31px -40px rgba(0,0,0,1);
   & :is(.produktlink, h3) {color:#fff;} 
   & .produktlink {color:#000;}
   & .produktlink::before {background:url(images/pfeil2.png) center center no-repeat;  background-size: cover;} 
  }
  
.submenu5 {background:url(images/hintergrund-submenu.jpg) center bottom no-repeat; background-size:cover; text-align: center;
  & :is(.produktlink, h3) {color:#fff;} 
  & h3 {font-size: 17px;}
  & .img-fluid {filter: drop-shadow(5px 20px 10px rgba(0,0,0,.3));}
}

.h1class {font-family: 'SFPRODISPLAYMEDIUM'; letter-spacing: 0; max-width: 800px; margin:0 auto; line-height:32px; font-size:24px; color:#aea399;}

#seite_planung {
  & .cfs {align-items: center;}
  & .cfs2 {align-items: unset; max-width: 1460px;}
  & .flexfull {padding-bottom: min(150px, 15%);}
  & .nopadding {padding:0 0 50px 0;}
  & h1 {margin-bottom: 20px;}
  & h3 {font-size: 22px;}
  & p {margin-bottom: 30px;}
  & .divider {background: #c4c4c4; max-width: 1000px; height: 1px; width: 50%;}
  & .duschwannen {display: flex; margin-top: 30px; justify-content: center;
    & .icons {margin:5px; text-align: center;}
    & .img-fluid {border-radius: 8px; padding:0; margin:0 auto; width:100%; transition: all .4s ease; max-width: 160px;}
    & .img-fluid:hover {scale:1.08; transition: all .4s ease;}  
  }
}


@media (width < 1040px) {
  .tausche {
    & .flex500:nth-child(1) {order:2;}
    & .flex500:nth-child(2) {order:1;}
  }
}

.produktlinks_nobox {display:flex; flex-wrap: wrap; align-items: center; border-top:1px solid rgba(0,0,0,.3); padding-top: 20px;
  & .produktlink {font-weight: 400; padding:0 0 0 25px; margin-right: 10px;}
  & .linkbox {padding:0 25px 0 0;} 
}

#acrylduschwannen,
#duschabtrennungen,
#mineralgussduschwannen,
#verbundwerkstoffuschwannen,
#reviews

 {padding-block:min(40px,5%); padding-top:min(70px,10%);
  & h2 {text-align: center; font-size:26px; font-weight: 100; color: #222;}
  & .h1class {font-size: 16px; display: block; text-align: center;}
}



/*  REVIEWS  */


#reviews {
  & h2 {font-size: 32px; margin-bottom: 10px;}
  & .contentbereich {padding-top:0;}
  & .product-item {
    & .img-fluid {border-radius: 0; border-top-right-radius: 20px; border-top-left-radius: 20px;}
  }
  & .cfs {align-items: unset; max-width: 1650px;}
  & .text {padding:min(20px, 10%); background:#fff; flex-grow: 1; text-align: center; & h3 {font-size: 17px; margin-bottom: 20px;}}
  & small {padding:0;margin:0;}
  & .produktlink {font-weight:400;}
  & .grow {flex-grow: 1;font-weight: 200; font-family: 'SFPRODISPLAYMEDIUM'; color: #7c7c7c; font-size: 14px;line-height: 20px;}
  & .produktlink {color:#ffffff; background: #5a5f64;padding: 10px 20px 10px 43px; border-radius: 30px; transition: all .3s ease;}
  & .produktlink:hover {background:coral; scale:1.2; transition: all .3s ease;}
  & .produktlink::before {bottom:9px; left:15px; background: url(images/pfeil_w.png); background-size: cover;} 
  & .linkbox {margin:0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 25px 20px 35px 20px; text-align: center;}
  
}



/*   CONTENTBEREICH   */


.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;}
  & small {line-height: 20px;margin: 12px 20px;display: block;}
  & .start {align-items: start;}
  & .notwendig {font-family: 'SFPRODISPLAYMEDIUM';margin:30px 0;font-size: 14px; line-height:20px;color:#7c7c7c; }
  & .cards {display:flex; flex-wrap:wrap; font-size: 14px; line-height:20px; margin:30px 0;}
  & .vorteil {font-family: 'SFPRODISPLAYMEDIUM'; margin:0 0 20px; flex:1 1 200px; color:#7c7c7c; padding:0 min(30px,5%) 0 0; border-radius: 20px;}
  & .hinweis {font-family: 'SFPRODISPLAYMEDIUM'; margin:0 0 20px; color:#cc6461; flex:1 1 200px; padding:0 min(30px,5%) 0 0; border-radius: 20px; }
   @media (width < 1039px) {
  .flex500 {text-align: center;}
  .subhead {padding:0 10px;}
  .headimage {padding:0 7%;}
  }
}

#beratung {background:#fff;
 & .cfs {max-width: 1200px;}
 & h2 {font-size: 26px; margin: 10px 0;}
 & .flex500 {flex:1 1 250px;}
 & .beraterin {max-width: 200px;border-radius: 117px;margin: 30px auto 0;  width: 200px; height: 200px;}
 & .link::after {width:100%;}
 @media (width > 540px) {
 & .text-right {text-align: right;}
 & .text-left {text-align: left;}
 & .border-left {border-left:2px solid #2b2b2b;}
}
}

#impressum {
  & .cfs {align-items: start;} 
}

#service {background:#fff;
  & .cfs {max-width: 1200px;}
  & h2 {font-size: 26px; margin: 10px 0;}
  & .flex500 {flex:1 1 250px;}
  & .link::after {width: 100%;}
  @media (width > 540px) {
  & .text-right {text-align: right;}
  & .text-left {text-align: left;}
  & .border-right {border-right:2px solid #2b2b2b;}
 }
 }


#vergleich {
  font-family: 'SFPRODISPLAYMEDIUM';
  & ul {width: 100%;}
  & li {padding: 0; margin:0;width: 100%; display: block; color:#000;}
  & .button {margin:10px 0; background:#5a5f64; font-size:16px; padding:5px 20px;}
  & .flex200 > .zelle:last-child {border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
  & .zelle:nth-child(even) {background: #FFFFFF; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 50%, rgba(255, 255, 255, 1) 100%);}

}

.shopprodukte {max-width: var(--seitenbreite); margin:0 auto 15px; padding-bottom: var(--padding-bottom); padding-top: var(--padding-top); background: #efefef; font-family: 'SFPRODISPLAYMEDIUM';
  & .cfs {align-items:unset; max-width: 1700px;}
  & .pic {background: url(images/hintergrund-submenu.jpg) center bottom no-repeat; background-size: cover; border-top-right-radius: 20px; border-top-left-radius: 20px;padding:min(30px,10%); & .img-fluid {filter: drop-shadow(5px 20px 10px rgba(0,0,0,.3));}}
  & .pic2 {background: url(images/hintergrund-submenu2.jpg) center bottom no-repeat; background-size: cover; & .img-fluid {filter: drop-shadow(5px 20px 10px rgba(0,0,0,.3));}}
  & .pic3 {background: url(images/hintergrund-submenu3.jpg) center bottom no-repeat; background-size: cover; & .img-fluid {filter: drop-shadow(5px 20px 10px rgba(0,0,0,.3));}}
  & .divider {width: 100%; margin:0 auto; height:1px; background:rgba(0,0,0,.1);}
  & .headline {background:none; min-height:60px;}
  & .img-fluid {opacity: 1; filter: blur();transform: translate(0, 0);margin:0;}
  & .pic:hover .img-fluid {scale:1.1;}
  & .non_bg {background: none; padding:0;  & .img-fluid {filter:none !important;border-bottom-left-radius: 0; border-bottom-right-radius: 0; }}
  & .non_bg:hover .img-fluid {scale:1;}
  /*
  & .flex200 {color:#a5a5a5;transform: translate(0, 20px);flex: 1 1 237px; max-width:350px; opacity: 0; transition:all 1.5s ease; transition-delay: .5s; margin:0 10px 20px;display: flex; flex-direction: column; justify-content: space-between;}
  & .flex200.in-view {transform: translate(0, 0); opacity: 1; transition:all 1.5s ease;}
  */
  & .text {min-height:70px; }
  & .groessen {min-height:70px;}
  & h3 {font-size:16px; margin: 0; margin: auto; color:#a5a5a5;}
  & p {font-size:14px;line-height: 18px;margin:0;}
  & .infos {width:100%; display: flex; justify-content: space-between; flex-direction: row; align-items: center;}
  & .button {font-size:14px; background: #36373b;} 
  & .einbausituation, .material, .farbe, .groessen {color:#000;}
  & .kaufen {min-height: 88px;}
  & .informationen {padding:0; & .zelle {border-top:1px solid rgba(0,0,0,.1);} }
  & .zelle {padding:min(10px,4%) min(30px,7%); text-align: center;}

  }


#vergleich {
& .flex200 {max-width:400px;border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 10px 20px -10px rgba(0,0,0,.3);}
}
.property {color:#a5a5a5; font-size: 13px;}
.zelle {padding:min(20px,4%) min(40px,10%); display: flex; justify-content: center; align-items: center; flex-direction: column;}
.flex {display: flex;}
.zel1 {border-top-left-radius: 20px;border-top-right-radius: 20px;min-height: 202px;padding-block:min(30px,10%);
  & h2 {color:#fff; margin-bottom: 30px; font-size: 24px; }
  & .img {filter: drop-shadow(5px 20px 10px rgba(0,0,0,.3));}
}


.bg1 {background:url(images/hintergrund-submenu.jpg) center bottom no-repeat; background-size:cover;}
.bg2 {background:url(images/hintergrund-submenu2.jpg) center bottom no-repeat; background-size:cover;}
.bg3 {background:url(images/hintergrund-submenu3.jpg) center bottom no-repeat; background-size:cover;}
.zel3 {padding: 20px 80px; min-height:120px;}
.zel5 {min-height:150px;padding:0;}
.zel6 {min-height: 112px;}
.zel7 {min-height: 112px;}
.zel9 {min-height: 112px;}
.img {max-width: 100%; width: 100%; height:auto;max-width: 220px;opacity:.5;}

.footer-img {margin-top: 10px;}