@import url(./../../global/components/buttons.css);
@import url(./../../global/components/product-card.css);
@import url(./../../global/components/check-box.css);
@import url(./../../global/components/products-grid-section.css);
@import url(./../../global/components/Circle3DSlider/sphere-slider.css);
@import url(./../../global/components/product-section-gray.css);
@import url(./../../global/components/product-section-white.css);
@import url(./../../global/components/product-features-section.css);
@import url(./../../global/components/product-features-toggle-component.css);
@import url(./../../global/components/section.css);

[data-view="qualitaet_testverfahren"] .disturber-button {
  background-color: black;
  box-shadow: 0 0 0 0 black;
  transform: scale(1);
  color: white;
}

[data-view="qualitaet_testverfahren"] .main__inner .section.section--hero {
  background-image: url(../../global/assets/images/qualitaet.png);
}

[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__text-container h2 {
  font-family: var(--ci-font-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-m);
  margin-bottom: 32px;

}

[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__text-container .testprocedure__subtitle,
[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__text-container .testprocedure__subtitle2,
[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__description {
  font-family: var(--ci-font-light);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-xs);

}

[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container {
  background-color: var(--color-gray-light-f5f5);
  padding: 48px 208px;
  margin: 32px 0;
}

[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container h3 {
  text-align: center;
  font-family: var(--ci-font-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-m);
  margin-bottom: 40px;
}

[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item {
  gap: 29px;
  margin-top: 20px;
}

[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item p {
  color: black;
  font-size: var(--font-size-xxxs);
  line-height: 24px;
}


[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item .checkbox-item__icon {
  height: 53px;
  width: 53px;
  border-radius: 53px;
}

[data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item .checkbox-item__icon img {
  width: 53px;
  height: 42px;
}


[data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper {
  height: unset;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 96px 32px;
  overflow: unset;
}

[data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper .circle-wrapper {
  justify-content: start;
  gap: 64px;
  align-items: end;
}

[data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper .circle-wrapper .sphere img {
  width: auto;
}

[data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper .product-togglebox .product-features__toggle-container .toggleDiv {
  background-color: white;
}

[data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper .product-togglebox .product-features__toggle-container .toggleDiv.disabled {
  background-color: var(--color-gray-light-f5f5);
}

  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline {
    display: none;
  }

@media only screen and (max-width: 768px) {

  [data-view="qualitaet_testverfahren"] .main__inner .section.section--hero {
    background-image: url(../../global/assets/images/qualitaet_mobil.jpg);
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__text-container h2 {
    font-size: var(--font-size-s);
    line-height: 32px;
    margin-bottom: 12px;
    margin-top: 0;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__text-container .testprocedure__subtitle {
    margin-bottom: 12px;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__text-container .testprocedure__subtitle,
  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__text-container .testprocedure__subtitle2,
  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__description {
    font-size: var(--font-size-xxs);
    line-height: 24px;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container {
    padding: 32px;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 32px;
    gap: 12px;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container h3 {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 28px;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item .checkbox-item__icon {
    height: 40px;
    width: 40px;
    border-radius: 40px;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item .checkbox-item__icon img {
    width: 40px;
    height: 32px;
  }

  [data-view="qualitaet_testverfahren"] .section.section__testprocedure .section__content-wrapper .testprocedure__checkbox-container .checkbox-item p {
    font-family: var(--ci-font-medium);
    line-height: 20px;
  }

  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline {
    display: block;
    height: 12px;
    width: 100%;
  }

  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.qm {
    background-color: var(--color-qm);
  }
  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.pm {
    background-color: var(--color-pm);
  }
  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.om {
    background-color: var(--color-om);
  }
  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.dm {
    background-color: var(--color-dm);
  }
  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.km {
    background-color: var(--color-km);
  }
  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.multi {
    background-color: var(--color-multi);
  }
  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.care {
    background-color: var(--color-care);
  }
  [data-view="qualitaet_testverfahren"] .main__inner .product-cardline.craft {
    background-color: var(--color-craft002);
  }

  [data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper {
  padding: 48px 32px;
}

[data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper .circle-wrapper {
  justify-content: start;
  gap: 64px;
  padding: 0;
}

[data-view="qualitaet_testverfahren"] .product-card .product-card__image-wrapper .circle-wrapper .sphere {
  display: none;
}
}

/* Puls-Animation Disturber*/
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 black;
  }

  70% {
    transform: scale(1.3);
    box-shadow: 0 0 0 10px #ee8b0000;
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 #ee8b0000;
  }
}


/* Kein Dauer-Puls mehr */
[data-view="qualitaet_testverfahren"] .disturber-button {
  background-color: black;
  box-shadow: 0 0 0 0 black;
  transform: scale(1);
}

/* Klasse zum Aktivieren des Pulsierens */
.pulsing {
  animation: pulse 0.75s 3;
  /* 3 Wiederholungen */
}