.intro {
  background-image: url(/images/endometriose-dokumentation-zertifizierung-audit.webp);
  background-position: 50% 49%;
  background-size: cover;
  padding-top: 55px;
  padding-bottom: 55px;
}
.intro .content {
  display: flex;
}
.intro .left {
  flex: 1 1 50%;
}
.intro .right {
  flex: 10000 1 50%;
  padding-left: 20px;
  box-sizing: border-box;
  position: relative;
}
.intro .right img:nth-child(1) {
  position: absolute;
  margin-left: 11.5%;
  width: 60%;
}
.intro .right img:nth-child(2) {
  position: relative;
  margin-top: 21%;
}
.intro h3 {
  text-transform: uppercase;
  color: hsl(220, 60%, 45%);
  font-size: 14px;
  margin: 0px;
}
.intro p {
  color: hsl(220, 86%, 16%);
  margin-top: 15px;
  margin-bottom: 35px;
}
.intro .box {
  background-color: white;
  margin-right: 50px;
  border-radius: 25px;
  padding: 25px 20px;
  position: relative;
  box-shadow: 3px 3px 15px 7px rgba(174, 219, 252, 0.21);
  font-family: ubuntu, sans-serif;
}
.intro .box section {
  position: absolute;
  background-color: hsl(200, 75%, 91%);
  width: 45px;
  height: 45px;
  border-radius: 100px;
  left: 24px;
  top: 27px;
  padding: 10px;
  box-sizing: border-box;
}
.intro .box section svg {
  width: 100%;
  height: 100%;
  fill: hsl(220, 60%, 45%);
}
.intro .box h3 {
  text-transform: none;
  font-size: 16px;
  margin-bottom: 10px;
  margin-left: 70px;
}
.intro .box p {
  color: hsl(220, 35%, 45%);
  font-size: 14px;
  line-height: 1.4;
  margin-top: 0px;
  margin-bottom: 15px;
  margin-left: 70px;
}

.md .intro .box {
  margin-right: 0px;
}
.md .intro .box section {
  left: 20px;
}
.md .intro .box h3,
.md .intro .box p {
  margin-left: 60px;
}
.md .intro .left {
  flex: 0 0 367px;
}
.md .intro .right {
  padding-top: 7px;
}
.md .intro .right img:nth-child(1) {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 350px;
}
.md .intro .right img:nth-child(2) {
  display: none;
}

.sm .intro {
  background-position: 20% 49%;
}
.sm .intro .content {
  flex-flow: column-reverse;
}
.sm .intro .left {
  flex: 1 1 auto;
}
.sm .intro .right {
  padding: 0px 18px 43px 0px;
}
.sm .intro .box p {
  font-size: 15px;
}

.xs .intro {
  background-position: 28% 49%;
}

.flowchart {
  padding-top: 45px;
  padding-bottom: 106px;
}
.flowchart section {
  margin-top: 40px;
}
.flowchart img.small {
  display: none;
}

.sm .flowchart section {
  margin-top: 30px;
}
.sm .flowchart img.small {
  display: block;
}
.sm .flowchart img.large {
  display: none;
}

.features {
  background-image: url(/images/sef-minimaldatensatz-automatisch.webp);
  background-position: 50% 31%;
  background-size: cover;
  padding-top: 55px;
  padding-bottom: 25px;
}
.features .content {
  display: flex;
}
.features .left {
  flex: 1 1 50%;
}
.features .left ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  margin-top: -2px;
}
.features .left li {
  margin-top: 2px;
}
.features .right {
  flex: 10000 1 50%;
  padding-left: 20px;
  box-sizing: border-box;
  position: relative;
}
.features .window {
  max-width: 490px;
}
.features .description {
  margin-right: -70px;
  margin-top: 15px;
  min-height: 110px;
}

.lg .features {
  padding-bottom: 10px;
}
.lg .features .carousel {
  margin-left: 22px;
}
.lg .features .description {
  margin-right: -15px;
  min-height: 130px;
}

.md .features {
  background-position: 60% 31%;
  padding-bottom: 45px;
}
.md .features .content {
  flex-flow: column-reverse;
}
.md .features .left {
  flex: 1 1 auto;
  padding-top: 30px;
}
.md .features .right {
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
}
.md .features .carousel {
  margin-left: 0px;
  margin-right: 0px;
}
@media (max-height: 550px) {
  .md .features .window {
    max-width: 280px;
  }
}
.md .features .description {
  margin-right: 0px;
  min-height: 95px;
}
.md .features .carousel-selector {
  margin-left: 0px;
  width: 100%;
  padding: 5px 0px;
  pointer-events: none;
  font-size: 17px;
  text-shadow: 1px 1px 3px white;
}
.md .features .carousel-selector.selected, .md .features .carousel-selector:hover {
  background-color: inherit;
  box-shadow: none;
}
.md .features .carousel-selector.selected::after {
  content: " ";
  display: none;
}
.md .features .carousel-selector.selected .arrow {
  display: none;
}

.sm .features .description {
  min-height: 110px;
}

.xs .features .left {
  padding-top: 40px;
}
.xs .features .carousel-selector {
  font-size: 15px;
}
.xs .features .description {
  min-height: 130px;
}

.problem {
  padding-top: 30px;
  padding-bottom: 40px;
}
.problem h3 {
  margin-top: 40px;
  margin-bottom: 20px;
}
.problem p {
  margin-top: 20px;
  margin-bottom: 30px;
}
.problem strong.purple {
  color: hsl(301, 100%, 37%);
}
.problem .compare {
  display: flex;
  margin-left: -50px;
  margin-top: 60px;
  margin-bottom: -10px;
}
.problem .compare .box {
  border-radius: 25px;
  border: 1px solid white;
  padding: 25px 35px 38px 42px;
  box-shadow: -1px -1px 3px 0px rgba(0, 0, 0, 0.08), 1px 1px 3px 0px rgba(0, 0, 0, 0.23);
  margin-left: 50px;
  margin-bottom: 40px;
  flex: 1 1 50%;
}
.problem .compare .box h4 {
  margin-top: 0px;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-size: 28px;
}
.problem .compare .box .subtitle {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 22px;
}
.problem .compare .box.vorher {
  background: linear-gradient(to right, hsl(300, 5%, 97%), hsl(270, 17%, 93%));
}
.problem .compare .box.vorher h4 {
  color: rgb(81, 81, 81);
}
.problem .compare .box.vorher .subtitle {
  color: rgb(151, 151, 151);
}
.problem .compare .box.nachher {
  background: linear-gradient(to right, hsl(200, 81%, 97%), hsl(206, 91%, 93%));
}
.problem .compare .box.nachher h4 {
  color: hsl(200, 100%, 45%);
}
.problem .compare .box.nachher .subtitle {
  color: hsl(200, 85%, 67%);
}

.lg .problem .compare {
  margin-left: -27px;
}
.lg .problem .compare .box {
  margin-left: 27px;
  padding-left: 30px;
  padding-right: 25px;
}
.lg .problem .compare .box .subtitle {
  letter-spacing: normal;
  font-size: 13px;
}

.md .problem .compare {
  flex-wrap: wrap;
}
.md .problem .compare .box {
  padding-left: 35px;
  padding-right: 40px;
  flex: 1 1 100%;
}
.md .problem .compare .box .subtitle {
  letter-spacing: 1px;
  font-size: 14px;
}

.xs .problem .compare .box {
  padding-left: 30px;
  padding-right: 25px;
}
.xs .problem .compare .box .subtitle {
  letter-spacing: normal;
  font-size: 13px;
}

.ergebnis {
  background-image: url(/images/auditsicherheit-endometriose.webp);
  background-position: center;
  background-size: 100% 100%;
}
.ergebnis .content {
  padding-top: 38px;
  padding-bottom: 70px;
}
.ergebnis h2 {
  font-size: 35px;
  margin-top: 0px;
  margin-bottom: 35px;
  color: hsl(301, 100%, 37%);
  font-weight: 500;
}

.lg .icon-box {
  margin-left: -20px;
}
.lg .icon-box section {
  margin-left: 20px;
}

.md .icon-box section {
  padding-top: 12px;
  padding-bottom: 12px;
}
.md .icon-box article {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: hsl(200, 75%, 91%);
  border-radius: 100px;
  padding: 10px;
  margin-right: 10px;
}
.md .icon-box p {
  font-size: 15px;
}

.sm .icon-box {
  margin-top: -10px;
}
.sm .icon-box section {
  margin-top: 10px;
  flex: 0 1 500px;
  max-width: unset;
  padding-top: 14px;
  padding-bottom: 14px;
}
.sm .icon-box article {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  background-color: hsl(200, 75%, 91%);
  border-radius: 100px;
  padding: 13px;
  margin-right: 15px;
}
.sm .icon-box p {
  font-size: 17px;
}

.sm .ergebnis h2 {
  font-size: 30px;
}

.social-proof {
  padding-top: 60px;
  padding-bottom: 60px;
}
.social-proof .kliniken {
  display: flex;
  justify-content: space-between;
  margin-right: 150px;
  margin-top: 44px;
  padding-bottom: 70px;
}
.social-proof .kliniken img {
  height: 65px;
}

.lg .social-proof .kliniken {
  margin-right: 0px;
}

.md .social-proof .kliniken img {
  height: 53px;
}

.sm .social-proof .kliniken img {
  height: 43px;
}

.xs .social-proof .kliniken img {
  height: 33px;
}

.neue-produkte {
  background-image: url(/images/arztbrief-endometriose-dokumentation.webp);
  background-position: 50% 100%;
  background-size: cover;
  padding-top: 5px;
  padding-bottom: 10px;
}
.neue-produkte h2 {
  font-size: 30px;
  margin-top: 50px;
  margin-bottom: 15px;
  color: hsl(301, 100%, 37%);
  font-weight: 500;
  line-height: 1.1;
}
.neue-produkte p {
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 55px;
}
.neue-produkte .white-space {
  height: 10px;
  background-color: white;
}

.md .neue-produkte h2 {
  margin-top: 40px;
}
.md .neue-produkte p {
  margin-bottom: 45px;
}

.sm .neue-produkte h2 {
  font-size: 28px;
}

.abos {
  padding-top: 30px;
  padding-bottom: 119px;
}
.abos h2 {
  margin-top: 40px;
  margin-bottom: 0px;
  font-size: 24px;
  color: rgb(151, 151, 151);
}
.abos h2 + p {
  margin-top: 20px;
  margin-bottom: 59px;
}
.abos h3 {
  margin-top: 59px;
  margin-bottom: 0px;
}
.abos h3 + p {
  margin-top: 20px;
  margin-bottom: 39px;
}
.abos .hint {
  margin-top: 15px;
  font-size: 14px;
  color: rgb(167, 167, 167);
  margin-bottom: 50px;
}

.call-to-action {
  background-image: url(/images/endometriose-dokumentation-endotracer.webp);
  background-position: 50% 69%;
  background-size: cover;
  padding-top: 69px;
  padding-bottom: 68px;
}
.call-to-action .content {
  display: flex;
  align-items: center;
}
.call-to-action .left {
  flex: 1 1 auto;
  position: relative;
}
.call-to-action .right {
  flex: 0 0 273px;
  margin-left: 60px;
}
.call-to-action .overlay {
  display: none;
  position: absolute;
}
.call-to-action .box {
  background-color: white;
  border-radius: 39px;
  padding: 37px 50px 42px 55px;
  position: relative;
  box-shadow: 3px 3px 15px 7px rgba(174, 219, 252, 0.21);
  font-weight: 500;
}
.call-to-action .box h3 {
  font-size: 22px;
  line-height: 1.2;
  color: hsl(220, 60%, 45%);
  margin-top: 0px;
  margin-bottom: 15px;
}
.call-to-action .box p {
  color: hsl(220, 35%, 45%);
  margin-top: 0px;
  margin-bottom: 12px;
  line-height: normal;
}
.call-to-action .box .compare-line {
  font-size: 17px;
  color: hsl(220, 35%, 45%);
  margin-bottom: 21px;
}

.xl .call-to-action .right {
  margin-left: 5vw;
}

.lg .call-to-action .left {
  max-width: 566px;
}
.lg .call-to-action .right {
  flex: 1 0 245px;
  margin-left: 3vw;
}
.lg .call-to-action .box {
  padding: 37px 30px 42px 40px;
}
.lg .call-to-action .box p {
  font-size: 16px;
}
.lg .call-to-action .box .compare-line {
  font-size: 16px;
}

.md .call-to-action .left {
  display: block;
}
.md .call-to-action .right {
  display: none;
}
.md .call-to-action .overlay {
  display: block;
  right: -56px;
  top: -20px;
  width: 150px;
}
.md .call-to-action .box {
  padding: 37px 50px 42px 55px;
}

.sm .call-to-action .left {
  display: block;
}
.sm .call-to-action .right {
  display: none;
}
.sm .call-to-action .overlay {
  display: none;
}
.sm .call-to-action .box {
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 23px;
}
.sm .call-to-action .box h3 {
  font-size: 21px;
}

.xs .call-to-action .box {
  padding: 25px 15px 32px 25px;
  border-radius: 23px;
}
.xs .call-to-action .box h3 {
  font-size: 20px;
}