.color1 {background:#b9c341; z-index:10;}
.color2 {background:#46a0a4; z-index:8;}
.color3 {background:#2a6684; z-index:6;}
.color4 {background:#1c4960; z-index:4;}


#esdtabelle {background:#efefef; color:#f3f3f3; max-width: var(--seitenbreite); margin: 0 auto;
  & .cfs {max-width: 1380px; padding-bottom: var(--padding-bottom); }
 
}

#vergleichstabelle {
    & .cfs {padding-bottom: var(--padding-bottom);max-width: 1000px;opacity:0;}
    & .cfs.in-view {max-width: 1900px; opacity: 1; transition:all 2s ease-in-out; transition-delay: .5s;}
    & img {max-width: 300px;border-radius:0;}
    & .img-fluid {transform: translate(0, 0);}
    & h2 {color:#fff;font-size: 33px;}
    & h3 {text-align: center; font-size:20px;margin: 10px 0;color: #f3f3f3;}
    & .text {padding: 10px 0; text-align: center;}
    & .zeile {display: flex; justify-content: center; align-items: center; height:50px;white-space:nowrap; & .img-fluid {max-width:25px;transform: translate(0, 0);}}
    & .zeile:nth-child(odd) {background:rgba(255,255,255,.1);}
    & .properties {z-index: 12;color: rgba(255,255,255,.6);background: #0e2935; & .pic {max-width: 300px; text-align: center; display: flex; justify-content: center; align-items: center;}}
    & .properties .zeile {justify-content: flex-end; padding:0 20px;}
    & .item {padding:0;}
    & .shadow {box-shadow:25px 10px 20px rgba(0,0,0,.08);transition: all .3s ease;}
    & .shadow:hover {scale:1.04; box-shadow:40px 10px 40px rgba(0,0,0,.3); transition: all .3s ease; z-index: 20;}
    & .pic {width: 100%;}
    & .view {height:80px}
    & .kaufen {background: #28485e; border-radius: 8px; padding: 6px 31px; color: #fff; text-decoration: none;}
    & .flexfull {max-width: 800px; margin:0 auto;}
    & .action {background:#5d9ea3;}
}


@media screen and (width < 1277px) {
    #vergleichstabelle {
    & .cfs {padding:0 10px var(--padding-bottom);}
     & h3 {font-size: 14px;} 
     & .properties .zeile {padding: 0 5px; justify-content: center; text-align: center; } 
     & .kaufen {padding: 6px 15px;}
    }
}

@media screen and (width < 740px) {
    #vergleichstabelle {padding:0 10px; overflow-x: scroll; min-width: 720px;
    & .item {width: 130px;}
    }
}