@font-face {
  font-family: 'icomoon';
    /* note: remove ancient eot, ttf, svg - use woff2, woff; use a woff-to-woff2 local converter tool after icomoon export */
    /* when changing woff files' version key, also change it in `src/themes/baumit/snippets/layout/layout.html.twig` */
   src: url('assets/icomoon/fonts/icomoon.woff2?v=k2sbey') format('woff2'),
        url('assets/icomoon/fonts/icomoon.woff?v=k2sbey') format('woff');
   font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-star-full:before {
  content: "\e900";
}
.icon-home:before {
  content: "\e901";
}
.icon-download1:before {
  content: "\e902";
}
.icon-office:before {
  content: "\e903";
}
.icon-uniE91D:before {
  content: "\e91d";
}
.icon-cart:before {
  content: "\e93a";
}
.icon-phone:before {
  content: "\e942";
}
.icon-compass:before {
  content: "\e949";
}
.icon-mobile:before {
  content: "\e958";
}
.icon-download:before {
  content: "\e960";
}
.icon-search:before {
  content: "\e986";
}
.icon-cog:before {
  content: "\e994";
}
.icon-menu:before {
  content: "\e9bd";
}
.icon-cloud:before {
  content: "\e9c1";
}
.icon-bookmarks:before {
  content: "\e9d3";
}
.icon-wondering:before {
  content: "\e9fb";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-minus:before {
  content: "\ea0b";
}
.icon-cross:before {
  content: "\ea0f";
}
.icon-checkmark:before {
  content: "\ea10";
}
.icon-arrow-up:before {
  content: "\ea32";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-rss2:before {
  content: "\ea9c";
}
.icon-star-o:before {
  content: "\f006";
}
.icon-map-marker:before {
  content: "\f041";
}
.icon-chevron-left:before {
  content: "\f053";
}
.icon-chevron-right:before {
  content: "\f054";
}
.icon-chevron-up:before {
  content: "\f077";
}
.icon-chevron-down:before {
  content: "\f078";
}
.icon-angle-left:before {
  content: "\f104";
}
.icon-angle-right:before {
  content: "\f105";
}
.icon-angle-up:before {
  content: "\f106";
}
.icon-angle-down:before {
  content: "\f107";
}
.icon-star-half-empty:before {
  content: "\f123";
}
.icon-checkbox-checked:before {
  content: "\ea52";
}
.icon-checkbox-unchecked:before {
  content: "\ea53";
}
/* Product Comparisons: Calculation of total-width with native CSS */

/* The width must be calculated with the number of products and depending on the screen width. */
/* math function with css variables are not possible in the old less version of this project */
/* and less variables cannot have any dependency to class names or media-queries.*/
/* Therefore here a native css-solution */

/* A calculation of this width with JavaScript is too late for browser rendering with this scrollable table */

.comparison-wrapper .product-comparison table {
    --visible-columns: 2;
    width: calc((100% / var(--visible-columns)) * var(--total-columns));
}
.comparison-wrapper .product-comparison table.total-products-1 {
    --visible-columns: 1;
}

@media screen and (min-width: 768px) {
    .comparison-wrapper .product-comparison table {
        --visible-columns: 3;
        width: calc((100% / var(--visible-columns)) * (var(--total-columns) + 1)); /* +1 first column for attibutes-Titles */
    }
    .comparison-wrapper .product-comparison table.total-products-1 {
        --visible-columns: 2;
    }
}

@media screen and (min-width: 992px) {
    .comparison-wrapper .product-comparison table {
        --visible-columns: 4;
    }
    .comparison-wrapper .product-comparison table.total-products-2 {
        --visible-columns: 3;
    }
    .comparison-wrapper .product-comparison table.total-products-1 {
        --visible-columns: 2;
    }
}

@media screen and (min-width: 1200px) {
    .comparison-wrapper .product-comparison table {
        --visible-columns: 5;
    }
    .comparison-wrapper .product-comparison table.total-products-3 {
        --visible-columns: 4;
    }
    .comparison-wrapper .product-comparison table.total-products-2 {
        --visible-columns: 3;
    }
    .comparison-wrapper .product-comparison table.total-products-1 {
        --visible-columns: 2;
    }
}