/*!***********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/teaser-usage/style.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
/*$h5-font-size:                $font-size-base * 1.25;*/
/*
@mixin project-title-bg-sm() {
    background-image: repeating-linear-gradient(60deg, transparent, transparent 4px, #ccc 5px, #ccc 5px);
    color: $primary;
    padding-left: $spacer * 1.25;
    padding-right: $spacer * 1.25;
    line-height: $line-height-sm;
}



@mixin project-title-bg-lg() {
    background-image: repeating-linear-gradient(60deg, transparent, transparent 8px, #ccc 10px, #ccc 10px);
    color: $primary;
}
*/
:root {
  --bs-container-half: 100%;
}
@media (min-width: 992px) {
  :root {
    --bs-container-half: calc(960px * 0.5);
  }
}
@media (min-width: 1200px) {
  :root {
    --bs-container-half: calc(1140px * 0.5);
  }
}
@media (min-width: 1600px) {
  :root {
    --bs-container-half: calc(1520px * 0.5);
  }
}

.sec-teaser-usage .g-0 > .col-lg-6:nth-child(1) {
  background-image: linear-gradient(180deg, #CDE9E6 0%, #CDE9E6 70%, #74A69E 100%);
}
@media (min-width: 992px) {
  .sec-teaser-usage .g-1 {
    height: 100%;
  }
  .sec-teaser-usage .g-1 > div {
    height: 50%;
  }
  .sec-teaser-usage .g-1 .item {
    height: 100%;
  }
  .sec-teaser-usage .g-1 .item > div:nth-child(1) {
    height: 100%;
  }
}
.sec-teaser-usage .item > div:nth-child(1) {
  background-color: #92D1C4;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 992px) {
  .sec-teaser-usage .item > div:nth-child(1) {
    padding-bottom: 0;
    padding-top: 0;
  }
}
.sec-teaser-usage .item .position-absolute {
  padding-left: calc(1.325rem + 0.9vw);
  padding-right: calc(1.325rem + 0.9vw);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1rem;
  transform: translateY(100%);
  z-index: 1;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .sec-teaser-usage .item .position-absolute {
    transition: transform 0.2s ease;
  }
}
@media screen and (prefers-reduced-motion) {
  .sec-teaser-usage .item .position-absolute {
    transition: none !important;
  }
}
@media (min-width: 1200px) {
  .sec-teaser-usage .item .position-absolute {
    padding-left: 2rem;
  }
}
@media (min-width: 1200px) {
  .sec-teaser-usage .item .position-absolute {
    padding-right: 2rem;
  }
}
.sec-teaser-usage .item .item-dot {
  left: 50%;
  position: absolute;
  top: 54%;
  width: clamp(250px, 65%, 65%);
  min-width: 250px;
  transform: translate(-50%, -50%);
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .sec-teaser-usage .item .item-dot {
    width: 85%;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sec-teaser-usage .item .item-dot {
    width: 95%;
  }
}
@media (min-width: 992px) {
  .sec-teaser-usage .item .item-dot {
    top: 53.5%;
  }
}
.sec-teaser-usage .item:hover .position-absolute, .sec-teaser-usage .item:focus .position-absolute {
  transform: translateY(0);
}
.sec-teaser-usage .item img {
  border-radius: 50%;
  margin: auto;
  max-width: 150px;
  overflow: hidden;
  width: initial;
  z-index: 1;
}
.sec-teaser-usage .item svg {
  overflow: visible;
}
.sec-teaser-usage .inner {
  position: relative;
}
.sec-teaser-usage .col-sm-6:nth-child(1) .svg-circle-wirkung.animation path {
  animation-name: pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transform: scale(1);
  animation-delay: 0s;
}
.sec-teaser-usage .col-sm-6:nth-child(1) .svg-circle-wirkung.animation path:nth-last-child(2) {
  animation-delay: 0.05s;
}
.sec-teaser-usage .col-sm-6:nth-child(1) .svg-circle-wirkung.animation path:nth-last-child(3) {
  animation-delay: 0.1s;
}
.sec-teaser-usage .col-sm-6:nth-child(2) .svg-circle-wirkung.animation path {
  animation-name: pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transform: scale(1);
  animation-delay: 1s;
}
.sec-teaser-usage .col-sm-6:nth-child(2) .svg-circle-wirkung.animation path:nth-last-child(2) {
  animation-delay: 1.05s;
}
.sec-teaser-usage .col-sm-6:nth-child(2) .svg-circle-wirkung.animation path:nth-last-child(3) {
  animation-delay: 1.1s;
}
.sec-teaser-usage .col-sm-6:nth-child(4) .svg-circle-wirkung.animation path {
  animation-name: pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transform: scale(1);
  animation-delay: 2s;
}
.sec-teaser-usage .col-sm-6:nth-child(4) .svg-circle-wirkung.animation path:nth-last-child(2) {
  animation-delay: 2.05s;
}
.sec-teaser-usage .col-sm-6:nth-child(4) .svg-circle-wirkung.animation path:nth-last-child(3) {
  animation-delay: 2.1s;
}
.sec-teaser-usage .col-sm-6:nth-child(3) .svg-circle-wirkung.animation path {
  animation-name: pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transform: scale(1);
  animation-delay: 3s;
}
.sec-teaser-usage .col-sm-6:nth-child(3) .svg-circle-wirkung.animation path:nth-last-child(2) {
  animation-delay: 3.05s;
}
.sec-teaser-usage .col-sm-6:nth-child(3) .svg-circle-wirkung.animation path:nth-last-child(3) {
  animation-delay: 3.1s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1);
    transform-origin: center;
  }
  60% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1);
    transform-origin: center;
  }
  100% {
    transform: scale(1);
    transform-origin: center;
  }
}

/*# sourceMappingURL=style-index.css.map*/