/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable selector-class-pattern */
.color-filter,
.color-filter--active {
  display: block;
  width: 1.75vw;
  height: 1.75vw;
  min-width: 24px;
  min-height: 24px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 10%;
  margin-right: 2%;
  border: 1px solid #808080;
}

.color-filter--active {
  cursor: auto;
  border: 2px solid var(--main-color);
}

.color-anthrazit {
  background: #383e42;
}

.color-anthrazit-grün {
  background: #383e42;
  background: linear-gradient(
    90deg,
    #383e42 0%,
    #383e42 49%,
    #6aa84f 50%,
    #6aa84f 100%
  );
}

.color-anthrazit-silber {
  background: #383e42;
  background: linear-gradient(
    90deg,
    #383e42 0%,
    #383e42 49%,
    #c0c0c0 50%,
    #c0c0c0 100%
  );
}

.color-beige {
  background: #d1bc8a;
}

.color-berry-rosa {
  background: #fff;
  background: linear-gradient(
    90deg,
    #723747 0%,
    #723747 49%,
    #ea899a 50%,
    #ea899a 100%
  );
}

.color-blau {
  background: #3d85c6;
}

.color-blau-anthrazit {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #383e42 50%,
    #383e42 100%
  );
}

.color-blau-blau {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    light#3d85c6 50%,
    light#3d85c6 100%
  );
}

.color-blau-braun {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #783f04 50%,
    #783f04 100%
  );
}

.color-blau-gelb {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #f4f41c 50%,
    #f4f41c 100%
  );
}

.color-blau-grau {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #808080 50%,
    #808080 100%
  );
}

.color-blau-grün {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #6aa84f 50%,
    #6aa84f 100%
  );
}

.color-blau-grün-gelb {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 33%,
    #6aa84f 34%,
    #6aa84f 66%,
    #f4f41c 67%,
    #f4f41c 100%
  );
}

.color-blau-orange {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #ffa500 50%,
    #ffa500 100%
  );
}

.color-blau-rot {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #c00 50%,
    #c00 100%
  );
}

.color-blau-schwarz {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #000 50%,
    #000 100%
  );
}

.color-blau-weiß {
  background: #3d85c6;
  background: linear-gradient(
    90deg,
    #3d85c6 0%,
    #3d85c6 49%,
    #fff 50%,
    #fff 100%
  );
}

.color-braun {
  background: rgb(90 50 40);
}

.color-braun-blau {
  background: rgb(90 50 40);
  background: linear-gradient(
    90deg,
    rgb(90 50 40) 0%,
    rgb(90 50 40) 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-braun-schwarz {
  background: rgb(90 50 40);
  background: linear-gradient(
    90deg,
    rgb(90 50 40) 0%,
    rgb(90 50 40) 49%,
    #000 50%,
    #000 100%
  );
}

.color-bunt {
  background: #fff;
  background: linear-gradient(
    90deg,
    #f4f41c 0%,
    #f4f41c 20%,
    #c00 21%,
    #c00 40%,
    #6aa84f 41%,
    #6aa84f 60%,
    #3d85c6 61%,
    #3d85c6 80%,
    violet 81%,
    violet 100%
  );
}

.color-gelb {
  background: #f4f41c;
}

.color-gelb-grün {
  background: #f4f41c;
  background: linear-gradient(
    90deg,
    #f4f41c 0%,
    #f4f41c 49%,
    #6aa84f 50%,
    #6aa84f 100%
  );
}

.color-gelb-rot {
  background: #f4f41c;
  background: linear-gradient(
    90deg,
    #f4f41c 0%,
    #f4f41c 49%,
    #c00 50%,
    #c00 100%
  );
}

.color-gold {
  background: #ffd700;
}

.color-grau {
  background-color: #808080;
}

.color-grau-blau {
  background: #808080;
  background: linear-gradient(
    90deg,
    #808080 0%,
    #808080 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-grau-gelb {
  background: #808080;
  background: linear-gradient(
    90deg,
    #808080 0%,
    #808080 49%,
    #f4f41c 50%,
    #f4f41c 100%
  );
}

.color-grau-grün {
  background: #808080;
  background: linear-gradient(
    90deg,
    #808080 0%,
    #808080 49%,
    #6aa84f 50%,
    #6aa84f 100%
  );
}

.color-grau-orange {
  background: #808080;
  background: linear-gradient(
    90deg,
    #808080 0%,
    #808080 49%,
    #ffa500 50%,
    #ffa500 100%
  );
}

.color-grau-rot {
  background: #808080;
  background: linear-gradient(
    90deg,
    #808080 0%,
    #808080 49%,
    #c00 50%,
    #c00 100%
  );
}

.color-grau-schwarz {
  background: #808080;
  background: linear-gradient(
    90deg,
    #808080 0%,
    #808080 49%,
    #000 50%,
    #000 100%
  );
}

.color-grau-weiß {
  background: #808080;
  background: linear-gradient(
    90deg,
    #808080 0%,
    #808080 49%,
    #fff 50%,
    #fff 100%
  );
}

.color-grün {
  background: #6aa84f;
}

.color-grün-beige {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #d1bc8a 50%,
    #d1bc8a 100%
  );
}

.color-grün-blau {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-grün-grau {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #808080 50%,
    #808080 100%
  );
}

.color-grün-blau {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-grün-grün {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    light#6aa84f 50%,
    light#6aa84f 100%
  );
}

.color-grün-#ffa500 {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #ffa500 50%,
    #ffa500 100%
  );
}

.color-grün-schwarz {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #000 50%,
    #000 100%
  );
}

.color-grün-silber {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #c0c0c0 50%,
    #c0c0c0 100%
  );
}

.color-grün-weiß {
  background: #6aa84f;
  background: linear-gradient(
    90deg,
    #6aa84f 0%,
    #6aa84f 49%,
    #fff 50%,
    #fff 100%
  );
}

.color-holz {
  background: #ce7e00;
}

.color-khaki {
  background: #e7dc78;
}

.color-lila {
  background: #800080;
}

.color-lila-blau {
  background: #800080;
  background: linear-gradient(
    90deg,
    #800080 0%,
    #800080 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-lila-blau {
  background: #800080;
  background: linear-gradient(
    90deg,
    #800080 0%,
    #800080 49%,
    #f4f41c 50%,
    #f4f41c 100%
  );
}

.color-lila-pink {
  background: #800080;
  background: linear-gradient(
    90deg,
    #800080 0%,
    #800080 49%,
    #ea9999 50%,
    #ea9999 100%
  );
}

.color-lila-weiß {
  background: #800080;
  background: linear-gradient(
    90deg,
    #800080 0%,
    #800080 49%,
    #fff 50%,
    #fff 100%
  );
}

.color-navy {
  background: #000080;
}

.color-olive {
  background: #808000;
}

.color-orange {
  background: #ffa500;
}

.color-orange-schwarz {
  background: #ffa500;
  background: linear-gradient(
    90deg,
    #ffa500 0%,
    #ffa500 49%,
    #000 50%,
    #000 100%
  );
}

.color-pink {
  background: #ea9999;
}

.color-pink-schwarz {
  background: #ea9999;
  background: linear-gradient(
    90deg,
    #ea9999 0%,
    #ea9999 49%,
    #000 50%,
    #000 100%
  );
}

.color-rosa {
  background: #ea899a;
}

.color-rot {
  background: #c00;
}

.color-rot-blau {
  background: #c00;
  background: linear-gradient(
    90deg,
    #c00 0%,
    #c00 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-rot-gelb {
  background: #c00;
  background: linear-gradient(
    90deg,
    #c00 0%,
    #c00 49%,
    #f4f41c 50%,
    #f4f41c 100%
  );
}

.color-rot-orange {
  background: #c00;
  background: linear-gradient(
    90deg,
    #c00 0%,
    #c00 49%,
    #ffa500 50%,
    #ffa500 100%
  );
}

.color-rot-schwarz {
  background: #c00;
  background: linear-gradient(90deg, #c00 0%, #c00 49%, #000 50%, #000 100%);
}

.color-rot-weiß {
  background: #c00;
  background: linear-gradient(90deg, #c00 0%, #c00 49%, #fff 50%, #fff 100%);
}

.color-schwarz {
  background-color: #000;
}

.color-schwarz-braun {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    rgb(90 50 40) 50%,
    rgb(90 50 40) 100%
  );
}

.color-schwarz-anthrazit {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #383e42 50%,
    #383e42 100%
  );
}

.color-schwarz-blau {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-schwarz-gelb {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #f4f41c 50%,
    #f4f41c 100%
  );
}

.color-schwarz-gold {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #ffd700 50%,
    #ffd700 100%
  );
}

.color-schwarz-grau {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #808080 50%,
    #808080 100%
  );
}

.color-schwarz-grün {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #6aa84f 50%,
    #6aa84f 100%
  );
}

.color-schwarz-lila {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #800080 50%,
    #800080 100%
  );
}

.color-schwarz-orange {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #ffa500 50%,
    #ffa500 100%
  );
}

.color-schwarz-pink {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #ea9999 50%,
    #ea9999 100%
  );
}

.color-schwarz-rot {
  background: #000;
  background: linear-gradient(90deg, #000 0%, #000 49%, #c00 50%, #c00 100%);
}

.color-schwarz-silber {
  background: #000;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 49%,
    #c0c0c0 50%,
    #c0c0c0 100%
  );
}

.color-schwarz-weiß {
  background: #000;
  background: linear-gradient(90deg, #000 0%, #000 49%, #fff 50%, #fff 100%);
}

.color-silber {
  background: #c0c0c0;
}

.color-silber-blau {
  background: #c0c0c0;
  background: linear-gradient(
    90deg,
    #c0c0c0 0%,
    #c0c0c0 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-silber-grau {
  background: #c0c0c0;
  background: linear-gradient(
    90deg,
    #c0c0c0 0%,
    #c0c0c0 49%,
    #808080 50%,
    #808080 100%
  );
}

.color-silber-grün-orange {
  background: #c0c0c0;
  background: linear-gradient(
    90deg,
    #c0c0c0 0%,
    #c0c0c0 33%,
    #6aa84f 34%,
    #6aa84f 66%,
    #ffa500 67%,
    #ffa500 100%
  );
}

.color-silber-lila {
  background: #c0c0c0;
  background: linear-gradient(
    90deg,
    #c0c0c0 0%,
    #c0c0c0 49%,
    #800080 50%,
    #800080 100%
  );
}

.color-silber-orange {
  background: #c0c0c0;
  background: linear-gradient(
    90deg,
    #c0c0c0 0%,
    #c0c0c0 49%,
    #ffa500 50%,
    #ffa500 100%
  );
}

.color-silber-rot {
  background: #c0c0c0;
  background: linear-gradient(
    90deg,
    #c0c0c0 0%,
    #c0c0c0 49%,
    #c00 50%,
    #c00 100%
  );
}

.color-silber-schwarz {
  background: #c0c0c0;
  background: linear-gradient(
    90deg,
    #c0c0c0 0%,
    #c0c0c0 49%,
    #000 50%,
    #000 100%
  );
}

.color-titan {
  background: #34302b;
}

.color-titan-rot {
  background: #34302b;
  background: linear-gradient(
    90deg,
    #34302b 0%,
    #34302b 49%,
    #c00 50%,
    #c00 100%
  );
}

.color-titan-schwarz {
  background: #34302b;
  background: linear-gradient(
    90deg,
    #34302b 0%,
    #34302b 49%,
    #000 50%,
    #000 100%
  );
}

.color-transparent {
  background: #fff;
}

.color-türkis {
  background: #40e0d0;
}

.color-türkis-blau {
  background: #40e0d0;
  background: linear-gradient(
    90deg,
    #40e0d0 0%,
    #40e0d0 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-uni {
  background: #d3b654;
}

.color-violett {
  background: rgb(177 9 177);
}

.color-weiß {
  background: #fff;
}

.color-weiß-blau {
  background: #fff;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 49%,
    #3d85c6 50%,
    #3d85c6 100%
  );
}

.color-weiß-blau-#ffa500 {
  background: #fff;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 33%,
    #3d85c6 34%,
    #3d85c6 66%,
    #ffa500 67%,
    #ffa500 100%
  );
}

.color-weiß-grau {
  background: #fff;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 49%,
    #808080 50%,
    #808080 100%
  );
}

.color-weiß-grün {
  background: #fff;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 49%,
    #6aa84f 50%,
    #6aa84f 100%
  );
}

.color-weiß-pink {
  background: #fff;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 49%,
    #ea9999 50%,
    #ea9999 100%
  );
}

.color-weiß-rot {
  background: #fff;
  background: linear-gradient(90deg, #fff 0%, #fff 49%, #c00 50%, #c00 100%);
}

.color-weiß-schwarz {
  background: #fff;
  background: linear-gradient(90deg, #fff 0%, #fff 49%, #000 50%, #000 100%);
}

.color-weiß-silber {
  background: #fff;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 49%,
    #c0c0c0 50%,
    #c0c0c0 100%
  );
}

.color-weiß-violet {
  background: #fff;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 49%,
    rgb(177 9 177) 50%,
    rgb(177 9 177) 100%
  );
}