{%  import  '../tools/_macros.css' as macro %}

    .content-wrapper--vertical-spacing, .dnd-section {
        padding: 0 !important;
    }

.hero-banner {
    position: relative;
    --item-height: var(--hero-banner-item-height);
    max-width: var(--hero-banner-max-width);
    margin-left: auto;
    margin-right: auto;
    --padding-default: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: 'Roboto', sans-serif !important;
}

.hero-banner--dense {
    --item-height: var(--hero-banner-item-height-dense);
}

.hero-banner__wrapper > .container,
.hero-banner__wrapper > .container-fluid,
.hero-banner > .container,
.hero-banner > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.hero-banner__item {
    position: relative;
}

.hero-banner__item > picture,
.hero-banner__item > .hero-banner__item-videos,
.hero-banner__item > .hero-banner__item-videos .hero-banner__item-video,
.hero-banner__item > picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.hero-banner__item > .hs-video-widget {
    overflow: hidden;
}

.hero-banner__item > .hs-video-widget .hs-video-container {
    width: 100%;
}

.hero-banner__content .hero-banner__headline .element-header > span {
    display: table;
    text-align: center;
}


.hero-banner__content {
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: var(--item-height);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 860px;
    flex-wrap: wrap;
    justify-content: center;
}

@media(max-width: 991px) {
  .hero-banner__content {
    width: 90%
  }
}

.hero-banner__content a.button {
    clear: both;
    margin-top: calc(var(--grid-gutter));
}

.hero-banner__headline {
    margin-bottom: 0;
    margin-top: var(--grid-gutter);
}

@media(max-width: 959px) {
  .hero-banner--startpage,
  .hero-banner--productpage {
      margin-top: 80px;
  }
}

.hero-banner__headline h1, .hero-banner__headline .h1{
    margin-bottom: 40px;
}

.hero-banner__headline > span {
    background: rgba(0, 0, 0, 0.6);
    color: inherit;
    display: table;
    padding: 0 var(--grid-gutter);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
}

.hero-banner__headline--primary > span {
    color: var(--primary);
}

.hero-banner__headline > span > span {
    color: var(--primary);
}

.hero-banner__headline--with-sub > span:first-of-type {
    margin-bottom: calc(var(--grid-gutter) / 2);
}


.hero-banner-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hero-banner-video .hs-video-wrapper,
.hero-banner-video .hs-video-container,
.hero-banner-video .hs-video-widget {
    height: 100%;
}

.hero-banner-video .hs-video-wrapper {
    height: 100% !important;
    padding-bottom: 0 !important;
}

.hero-banner__bg2 {
    display: flex;
    background: rgba(255, 255, 255, 0.0);
    width: 100%;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
    padding-bottom: 0;

}
.hero-banner--productpage .hero-banner__bg2 {

    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1662 1024'%3E%3Cpath fill='%239c5395' d='M614.837 457.566c0 0.213 0 0.465 0 0.718 0 73.311 13.687 143.426 38.644 207.927l-1.339-3.936c13.48 35.814 28.452 66.353 45.923 95.21l-1.424-2.533c25.196 42.424 53.22 79.149 84.948 112.299l-0.212-0.223c16.109 16.841 32.863 32.596 50.421 47.433l0.957 0.788h0.158c18.528-15.592 35.284-31.352 51.139-47.98l0.237-0.251c31.611-32.915 59.689-69.643 83.363-109.305l1.532-2.771c15.998-26.308 30.952-56.846 43.131-88.754l1.315-3.923c23.618-60.567 37.305-130.681 37.305-203.992 0-0.253 0-0.505 0-0.758v0.040c0-0.21 0-0.459 0-0.707 0-73.274-13.687-143.353-38.643-207.817l1.338 3.93c-13.511-35.835-28.463-66.369-45.888-95.244l1.442 2.576c-25.205-42.412-53.283-79.122-85.089-112.224l0.193 0.202c-16.098-16.902-32.854-32.679-50.435-47.511l-0.941-0.773h-0.16c-18.507 15.641-35.26 31.416-51.139 48.036l-0.235 0.248c-31.516 32.911-59.54 69.618-83.194 109.236l-1.541 2.786c-16.032 26.317-31.003 56.855-43.189 88.769l-1.311 3.908c-23.619 60.535-37.307 130.615-37.307 203.892 0 0.247 0 0.493 0 0.74v-0.038z'%3E%3C/path%3E%3Cpath fill='%239c5395' d='M1180.767 544.252c-71.997 71.921-125.334 162.507-152.133 263.88l-0.916 4.078c-11.218 41.348-18.258 89.068-19.489 138.23l-0.015 0.768c-0.121 4.658-0.189 10.142-0.189 15.643 0 19.254 0.842 38.311 2.491 57.137l-0.172-2.441 0.053 0.107c16.338 1.487 35.338 2.334 54.537 2.334 5.653 0 11.289-0.073 16.907-0.22l-0.83 0.017c50.031-1.142 97.909-8.151 143.661-20.364l-4.246 0.964c37.529-9.604 69.877-21.288 100.736-35.637l-3.535 1.476c66.431-30.385 123.203-70.188 171.498-118.472l-0.001 0.001c48.382-48.116 88.266-104.715 117.244-167.389l1.483-3.576c12.876-27.223 24.591-59.464 33.374-92.892l0.894-4.006c11.249-41.411 18.257-89.177 19.387-138.396l0.013-0.7c0.147-4.992 0.231-10.865 0.231-16.758 0-18.866-0.858-37.531-2.537-55.96l0.174 2.37-0.053-0.107c-16.569-1.469-35.843-2.307-55.314-2.307-5.361 0-10.707 0.063-16.037 0.19l0.792-0.015c-50.078 1.256-97.94 8.304-143.7 20.5l4.292-0.973c-105.619 27.569-196.41 80.726-268.624 152.544l0.027-0.026z'%3E%3C/path%3E%3Cpath fill='%239c5395' d='M481.098 544.335c-48.303-48.295-105.096-88.101-167.947-116.986l-3.604-1.485c-27.281-12.829-59.612-24.509-93.125-33.263l-4.029-0.894c-41.451-11.171-89.298-18.192-138.579-19.438l-0.782-0.016c-4.672-0.121-10.172-0.189-15.689-0.189-19.316 0-38.434 0.843-57.321 2.494l2.45-0.173-0.107 0.053c-1.486 16.292-2.334 35.237-2.334 54.381 0 5.63 0.073 11.242 0.219 16.836l-0.017-0.827c1.135 49.901 8.165 97.652 20.423 143.262l-0.963-4.209c9.608 37.386 21.327 69.629 35.728 100.366l-1.46-3.468c59.664 128.925 161.093 230.097 286.609 287.931l3.617 1.494c27.326 12.896 59.66 24.581 93.194 33.288l3.96 0.873c41.522 11.246 89.417 18.254 138.765 19.387l0.703 0.013c4.896 0.138 10.658 0.216 16.439 0.216 19.053 0 37.906-0.853 56.524-2.522l-2.403 0.174 0.107-0.053c1.469-16.528 2.307-35.753 2.307-55.175 0-5.35-0.064-10.686-0.19-16.006l0.015 0.791c-1.271-49.941-8.329-97.657-20.531-143.271l0.973 4.273c-9.632-37.403-21.351-69.645-35.736-100.39l1.468 3.492c-30.459-66.243-70.327-122.839-118.659-170.937l-0.023-0.023z'%3E%3C/path%3E%3C/svg%3E%0A");
      background-size: cover;
      background-position: center 0;
      background-color: #ab63a5;

}



@media (min-width: 1140px) {
    .hero-banner--productpage .hero-banner__text {
        font-size: 25px;
    }

    .hero-banner--productpage .hero-banner__bg2 {
        background-size: contain;
        background-position: center 130px;
    }
}

.hero-banner--default .hero-banner__bg2 {
    justify-content: flex-end;
    padding-bottom: 100px;
}

@media (min-width: 1140px) {
    .hero-banner--default .hero-banner__bg2 {
        padding-bottom: 260px;
    }
}


.hero-banner-product-image {
    margin-top: -200px;
    width: 60%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
@media (min-width: 1140px) {

    .hero-banner-product-image {
        margin-top: -200px;
        width: 860px;
    }
}


.hero-banner--startpage .hero-banner__bg2 {
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .hero-banner--startpage .hero-banner__bg2 {
        background: rgba(255, 255, 255, 0.5);
        margin-bottom: 80px;
    }
}

.hero-banner--startpage .hero-banner__text {
    padding-bottom: 50px;
}

.hero-banner--startpage .hero-banner__text h2 span{
    font-weight: 500;
    color: #115376;
}

@media(max-width: 991px) {
  .hero-banner--startpage .hero-banner__text {
    padding-bottom: 40px;
    margin-top: 0;
}
}

.hero-banner--startpage .hero-banner__content img {
    max-width: 60%;
    margin-top: 130px;
}

@media(max-width: 991px) {
  .hero-banner--startpage .hero-banner__content img {
    max-width: 60%;
    margin-top: 100px;
}
}

@media(max-width: 480px) {
  .hero-banner--startpage .hero-banner__content img {

    max-width: 80%;

}
}

@media (min-width: 1140px) {

    .hero-banner--startpage .hero-banner__headline {
        margin-top: 80px;
    }

    .hero-banner--startpage .hero-banner__headline h1 {
        font-size: 60px;
    }

    .hero-banner--startpage .hero-banner__content img {
        max-width: 380px;
        margin-top: 100px;
    }
}
.hero-banner--startpage,
.hero-banner--productpage {
    --hero-banner-item-height: 300px;
}

@media (min-width: 1140px) {
    .hero-banner--startpage,
    .hero-banner--productpage {
        --hero-banner-item-height: 700px;
    }

    .hero-banner--productpage .hero-banner__bg2 {
        padding-top: 80px;
        margin-bottom: 80px;
    }
}
@media (min-width: 1140px) {
    .hero-banner--productpage .hero-banner__bg2 {
        padding-bottom: 200px;
    }
}

.hero-banner--productpage .hero-banner__headline .element-header,
.hero-banner--productpage .hero-banner__text {
    color: #fff;
}

.hero-banner--productpage .hero-banner__preheadline {
    font-size: 25px;
    line-height: 1;
    font-weight: 300;
}
.hero-banner--productpage .hero-banner__headline .element-header {
    font-size: 60px;
    line-height: 1;
    font-weight: 600;
}

@media (min-width: 1140px) {
    .hero-banner--productpage .hero-banner__preheadline {
        font-size: 50px;
        font-weight: 500;
    }
    .hero-banner--productpage .hero-banner__headline .element-header {
        font-size: 125px;
    }
}

.hero-banner--default .hero-banner__headline .element-header {
    font-size: 30px;
    margin-top: 40px;
    font-weight: 600;
    text-align: center;
}

.test-image {
    width: 400px;
    max-width: 100%;
}

.test {
    position: absolute;
    top: calc(100% - 150px);
}


@media (min-width: 1140px) {
    .hero-banner--default .hero-banner__headline .element-header {
        font-size: 70px;
        margin-top: 80px;
        font-weight: 600;
        text-align: center;
    }
    .test {
        top: calc(100% - 280px);
    }

    .test-image {
        width: 660px;
    }

}