#products {padding:100px 0; background:#f2f2f2;
    & .headline {max-width: 1900px;}
    & .headline h2 {font-size: clamp(1rem, -0.5rem + 80vw, 3rem); font-weight: 100; letter-spacing: 1px;}
    & .headline & p {margin: 0; font-size: 20px; font-weight: 400; text-align: left; line-height: 120%; color: #c0c0c0;}
    & .headline .item {text-align: left; flex:1 1 85px;}
    & .big {font-size: 42px; font-weight: 600; text-decoration: none; position: relative;line-height: 120%; text-align: center;margin-bottom: 12px;}
    & .flexfull {flex: 1 1 100%;  padding: 0 0 20px 0; margin: 0 10px 60px; line-height: 220%; font-size: 20px; font-weight: 500;}
    & .item {flex:1 1 250px;margin:0 10px 20px; text-align: center;}
    & .pic {padding:4px;
    & img {max-width:100%; height:auto; display: block;}
    }
    & small {font-weight: 400; color: #6f6b88;}
    & h2 {font-size: 24px; font-weight: 600; margin: 30px 0 0;}
    & h3 {margin: 10px 0; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.1);}
    & ul {margin: 22px 0 24px 7px;}
    & li {list-style: none; color: #958676;font-weight: 500;margin:0 0 5px 20px;}
    
    & .flexfull a {text-decoration: none; color:#968f8a; position:relative;}
    & .flexfull a::after {content:''; position:absolute; bottom:5px; right:-15px; background:url(images/pfeil.png); background-size: cover; background-position: center; background-repeat: no-repeat; width: 6px; height: 11px;transition: all .3s ease;}
    & .flexfull a:hover {color:#000; transition: all .3s ease;}
    & .flexfull a:hover::after {right:-20px; transition: all .3s ease; }
  
    & ul.farben {margin: 0;display: flex; flex-wrap: nowrap;justify-content: center;align-items: center; padding: 25px 0 0;}
    & ul.farben li {transition: all .3s ease; list-style: none; color:#afafaf; border-radius: 100px; margin: 0 -10px -5px; box-shadow:0px 10px 10px rgba(0,0,0,.30); height:60px; min-width: 60px; text-align: center;}
    
    & .farbe {padding: 0 0 55px 0; position: relative; z-index: 10; font-size: 14px; border-bottom: 1px solid Rgba(0,0,0,.1);}
    & li.weiss {background:#fff;}
    & li.schwarz {background: #222;}
    & li.holz {background: url(images/holz.jpg) center center no-repeat; background-size: cover;}
    & li.taupe {background:#a39a90;}
    
    & ul.farben li:nth-child(1) {z-index: 30;}
    & ul.farben li:nth-child(2) {z-index: 20;}
    & ul.farben li:nth-child(3) {z-index: 18;}
    & ul.farben li:nth-child(4) {z-index: 16;}
    & ul.farben li:nth-child(5) {z-index: 10;}
    & ul.farben li:hover {transition: all .3s ease; z-index:30; margin: 0 15px -5px; scale: 1.4;}
  
    & .farbe .name {position: absolute;bottom: -24px; left: -24px; color: transparent; font-size: 10px; transition: all .4s ease; min-width: 105px;}
    & .farbe li:hover .name {color:#000; transition: all .4s ease;}
  
    & .text {padding:10px 0; text-align: center;}
    & .product_item {flex: 1 1 250px; margin: 0 1px 20px; text-align: center; display: flex; flex-direction: column;}
    & .product_item .text:nth-child(even) {background:#fff;}
    & span {font-weight: 500;}
    & .price {padding: 25px 0 0;}
    & a.link {letter-spacing: 0; color:#6b89ae;}
  }
  
  @media screen and (max-width:1200px) {
    #products {padding:60px 0; font-size: .9rem;
    & .item {margin: 0 3px 10px;}
    & ul.farben li {height: 40px; min-width: 40px; margin: 0 -6px -5px;}
    & ul.farben li:nth-child(even) {margin-top: -15px;}
    & ul.farben li:hover {scale: 1;margin: 0 5px -5px;}
    & ul.farben li:hover:nth-child(even) {margin: -15px 5px -5px;}
    }
  }