@charset "UTF-8";

:root {
    --gutter-micro: 5px;
    --gutter-xs: 15px;
    --gutter-s: 20px;
    --gutter-m: 30px;
    --gutter-l: 45px;
    --gutter-xl: 60px;
    --gutter-xxl: 90px;
    --gutter-xxxl: 120px
}

@media screen and (max-width:960px) {
    :root {
        --gutter-m: 15px;
        --gutter-l: 30px;
        --gutter-xl: 45px;
        --gutter-xxl: 60px;
        --gutter-xxxl: 90px
    }
}


:root {
    --xmas-stage-bg: #fcf7e8
}

:root {
    --swiper-theme-color: #007aff
}

:root {
    --banderoleHeight: 32px;
    --navigationOffset: 20px;
    --navigationOffsetScrolled: 15px
}

:root {
    --modal-maxwidth: 830px
}
:root {
    --navigationHeight: 80px;
    --navigationHeightScrolled: 60px
}
:root {
    --c1: #000000;
    --c2: #7a557e
}




.ff-copy,
.font-secondary {
}

.fw400 {
    font-weight: 400
}

.fw500 {
    font-weight: 500
}

.fw700 {
    font-weight: 700
}

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box
}

:after,
:before {
    box-sizing: border-box
}


html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

body,
html {
    min-height: 100%;
    font-weight: 400;
    font-size: 18px;
    font-family: apercu, sans-serif;
    line-height: 1.5
}

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

    body,
    html {
        font-size: 16px
    }
}

a {
    text-decoration: none;
    transition: all .3s ease
}

img {
    max-width: 100%
}

.h1,
.h2,
.h3,
.h4,
h1,
h2,
h3,
h4 {
    line-height: 1.2
}

.headline__icon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center
}

.headline__icon>span {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}






.headline__icon>span .headline__text {
    font-family: apercu, sans-serif;
    font-size: 28px;
    line-height: 28px;
    font-weight: 400;
    margin-top: 10px
}

.white {
    color: #fff
}

.black {
    color: #000
}

.fade {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
}

.fade-left {
    -webkit-mask-image: linear-gradient(to left, #000 0, transparent 50%);
    mask-image: linear-gradient(to left, #000 0, transparent 50%)
}

.font-headline {
    font-family: "Px Grotesk", sans-serif !important
}

.h3,
h3 {
    font-size: 22px
}

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

    .h3,
    h3 {
        font-size: 20px;
        margin-bottom: 10px
    }
}

.h3.small,
h3.small {
    font-size: 18px
}

.h4,
h4 {
    font-size: 20px
}

.lazy {
    visibility: hidden
}

.tag-above {
    position: relative
}

.tag-above .tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -100%);
    background-color: #b2b2b2;
    color: #fff;
    border-radius: 20px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1
}

.tag-above .tag:before {
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}



button,
input,
textarea {
    outline: 0
}

p {
    font-family: apercu, sans-serif
}

p.primary {
    font-size: 18px
}

p.secondary {
    font-size: 16px
}

p+p {
    margin-top: var(--gutter-m)
}

@media screen and (max-width:670px) {
    p+p {
        margin-top: var(--gutter-xs)
    }
}

hr {
    border-bottom: 2px solid #000;
    margin: 40px 0
}

.light {
    font-weight: 300
}

.bold {
    font-weight: 500
}

.centered {
    text-align: center
}

.vcentered {
    align-items: center
}

.left {
    text-align: left
}

.right {
    text-align: right
}

.subtext {
    font-size: 14px
}

.noOverflow {
    overflow: hidden
}

.noOverflow .button-set {
    margin-bottom: 0
}

.desktop-hidden {
    display: none !important
}

.error404 {
    text-align: right;
    font-size: 200px;
    vertical-align: top;
    line-height: 60%
}

.headline {
    display: block
}

.no-margin {
    margin: 0 !important
}

.no-padding {
    padding: 0 !important
}

.no-padding-top {
    padding-top: 0 !important
}

.no-padding-bottom {
    padding-bottom: 0 !important
}

.no-margin-top {
    margin-top: 0 !important
}

.no-margin-bottom {
    margin-bottom: 0 !important
}

.margin-top-40 {
    margin-top: 40px !important
}

.padding-top-10 {
    padding-top: 10px !important
}

.padding-top-20 {
    padding-top: 20px !important
}

.padding-top-80 {
    padding-top: 80px !important
}

.padding-bottom-80 {
    padding-bottom: 80px !important
}

.overflow-hidden {
    overflow: hidden
}

.icon-card,
.omr-badge {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    padding: 20px 40px
}

.icon-card__icon,
.omr-badge__icon {
    display: flex;
    flex: 0 0 50px;
    margin-right: 40px
}

.icon-card__icon img,
.omr-badge__icon img {
    width: 50px;
    display: block
}

.icon-card__text,
.omr-badge__text {
    flex-grow: 1;
    padding: 0 40px 0 0;
    font-size: 18px
}

.icon-card__text strong,
.omr-badge__text strong {
    font-size: 28px;
    font-family: "Px Grotesk", sans-serif
}

.icon-card__button .button.tertiary.rounded:hover,
.omr-badge__button .button.tertiary.rounded:hover {
    border-color: #f58546
}

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

    .icon-card,
    .omr-badge {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column
    }

    .icon-card__icon,
    .omr-badge__icon {
        margin-bottom: 20px
    }

    .icon-card__text,
    .omr-badge__text {
        margin-bottom: 20px;
        padding: 0;
        text-align: center
    }
}

.omr-badge {
    background-color: rgba(255, 255, 255, .2)
}

.icon-cards a.icon-card:hover .icon-card__text {
    color: #f58546
}

.icon-cards .icon-card {
    background-color: #fff;
    border-radius: 10px;
    color: #000
}

.icon-cards .icon-card__text {
    transition: all .3s ease
}

.icon-cards .icon-card__text h3 {
    font-family: apercu, sans-serif;
    font-weight: 500;
    font-size: 24px
}



.icon-cards .icon-card+.icon-card {
    margin-top: 40px
}

.feature-box {
    background-color: #fff;
    border-radius: 10px;
    border: 2px solid #c6cbb3;
    padding: 20px;
    margin-bottom: 20px
}

.feature-box__icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.feature-box__icons [class*=icon-] {
    border-radius: 20px;
    padding: 6px 10px;
    font-size: 14px;
    margin-right: 10px;
    font-weight: 700;
    line-height: 1
}

.feature-box__icons [class*=icon-]:before {
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}





.feature-box__icons .icon-phone {
    color: #000;
    background-color: #ffb9b9
}



.feature-box__icons .icon-sms {
    color: #000;
    background-color: #76d5ff
}



.feature-box__icons .icon-mail {
    color: #000;
    background-color: #ba76ff
}


.feature-box__icons .icon-fax {
    color: #000;
    background-color: #ffe176
}



.feature-box p {
    font-size: 24px;
    font-weight: 500;
    margin: 0 !important
}

.flex {
    display: flex
}

.flex.wrap {
    flex-wrap: wrap
}

.flex.vcenter {
    align-items: center;
    align-self: center
}

.flex.vend {
    align-items: end;
    align-self: end
}

.relative {
    position: relative
}

.column {
    flex-direction: column
}

.space-between {
    justify-content: space-between
}

.primary-color {
    color: #f58546
}

.trenner {
    width: 30%;
    margin: 40px auto;
    border-width: 5px;
    border-color: rgba(0, 0, 0, .05)
}

.color-green {
    color: #f58546
}

img.img-25 {
    width: 25%
}

img.img-50 {
    width: 50%
}

img.img-75 {
    width: 75%
}

img.img-100 {
    width: 100%
}

@media screen and (max-width:555px) {
    .star {
        display: block;
        font-size: 28px
    }
}

@media screen and (max-width:670px) {
    .error404 {
        text-align: left;
        font-size: 100px;
        vertical-align: middle;
        line-height: 1
    }
}

@media screen and (max-width:1080px) {
    .tablet-hidden {
        display: none !important
    }
}

@media screen and (max-width:960px) {
    .tablet-centered {
        text-align: center
    }
}

@media screen and (max-width:820px) {
    .mobile-hidden {
        display: none !important
    }

    .mobile-hidden+* {
        margin-top: 0 !important
    }

    .desktop-hidden {
        display: block !important
    }

    .desktop-hidden.flex {
        display: flex !important
    }

    .mobile-left {
        text-align: left !important
    }

    .mobile-left .btn--centered,
    .mobile-left img {
        margin-left: initial !important;
        margin-right: initial !important
    }

    .mobile-centered {
        text-align: center
    }

    .mobile-centered.btn-set {
        justify-content: center
    }

    img.img-100,
    img.img-25,
    img.img-50,
    img.img-75 {
        width: 100%
    }
}

.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%
}

.video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.wrapper {
    width: 100%
}

.wrapper .content {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px
}

.wrapper .content:last-child {
    margin-bottom: 20px
}

.wrapper .content.no-gutter-bottom:last-child {
    margin-bottom: 0
}

.wrapper .content.narrow {
    max-width: 960px
}

.wrapper .content.thin {
    max-width: 740px
}

.wrapper .content.wide {
    max-width: 1200px
}

.wrapper .content.wide.left,
.wrapper .content.wide.right {
    display: flex;
    flex-direction: column;
    text-align: initial
}

.wrapper .content.wide.left>.narrow,
.wrapper .content.wide.right>.narrow {
    margin: 0;
    padding: 0
}

.wrapper .content.wide.right {
    align-items: flex-end
}

.wrapper .content.wide.left {
    align-items: flex-start
}

.wrapper .content.background {
    background-color: rgba(0, 0, 0, .7)
}

@media screen and (max-width:800px) {
    .wrapper .content.mobileNoPadding {
        padding: 0
    }
}

.wrapper .content img.white {
    filter: saturate(0) grayscale(100%) brightness(1000%)
}

.wrapper .content img.invert {
    filter: brightness(0) invert(1)
}

.wrapper .content>h1+p {
    margin-bottom: 40px
}

.wrapper .content>h2 {
    font-size: 38px;
    font-weight: 400;
    font-family: apercu, sans-serif;
    width: 100%;
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    text-align: center
}

@media screen and (max-width:500px) {
    .wrapper .content>h2 {
        font-size: 32px
    }
}

.wrapper .content>h2+p {
    width: 100%;
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.wrapper .content .subtitle {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Px Grotesk", sans-serif;
    margin-bottom: 20px;
    width: 100%;
    letter-spacing: .1em;
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.wrapper .content *+h2,
.wrapper .content *+ul,
.wrapper .content :not(p)+p {
    margin-top: 20px
}

.wrapper .content p a:not(.button) {
    color: #000;
    border-bottom: 2px solid #f58546;
    cursor: pointer
}

.wrapper .content p a:not(.button):hover {
    color: #f58546
}

.wrapper .content ol,
.wrapper .content ul {
    line-height: 2
}

.wrapper .content ul {
    list-style: none
}

.wrapper .content ul li {
    padding-left: 1em;
    position: relative
}

.wrapper .content ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    display: block;
    width: 8px;
    height: 8px;
    background-color: #f58546;
    border-radius: 50%
}

.wrapper .content ul.list.approved-list li {
    text-align: left;
    padding-left: 1.5rem;
    margin: 10px 0;
    line-height: 1.5
}



.wrapper .content ul.list.approved-list.approved-list--black:before {
    filter: brightness(0)
}

.wrapper .content ul.list.big-list {
    font-size: 20px
}

.wrapper .content ul.list.big-list .accordion::after {
    top: 10px
}

.wrapper .content ul.menu li:before {
    display: none
}

.wrapper .content ol {
    counter-reset: ol-counter;
    list-style: none
}

.wrapper .content ol li {
    counter-increment: ol-counter
}

.wrapper .content ol li:before {
    content: counter(ol-counter) ".";
    font-weight: 500;
    padding-right: 10px;
    color: #f58546
}

.wrapper .content *+.h3,
.wrapper .content *+h3 {
    margin-top: 40px
}

.wrapper .content .h3+p,
.wrapper .content .h3+ul,
.wrapper .content h3+p,
.wrapper .content h3+ul {
    margin-top: 20px
}

.wrapper .content+.content {
    margin-top: 120px
}

.wrapper .content+.content.no-gutter-top {
    margin-top: 40px
}

.wrapper .content+.content.half-gutter-top {
    margin-top: 0
}

@media screen and (max-width:555px) {
    .wrapper .content {
        padding: 0 20px
    }

    .wrapper .content+.content {
        margin-top: 60px
    }
}

blockquote {
    padding: 40px 80px;
    position: relative
}

blockquote * {
    z-index: 1
}

blockquote img {
    max-width: 150px;
    display: block
}

blockquote p:first-of-type+p {
    margin-top: 20px
}

blockquote.no-padding {
    padding: 0
}

blockquote:after {
    content: "”";
    position: absolute;
    z-index: 0;
    color: #000;
    opacity: .1;
    font-size: 150px;
    bottom: 20px;
    right: 50px;
    font-family: "Px Grotesk", sans-serif;
    transform: rotate(180deg);
    line-height: 1
}

@media screen and (max-width:770px) {
    blockquote {
        padding: 40px
    }
}

@media screen and (max-width:670px) {
    blockquote {
        padding: 40px 40px 80px
    }

    blockquote:after {
        bottom: 0;
        right: 20px
    }
}

.pricetoggle__sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 999;
    background-color: #000;
    display: none
}

.pricetoggle__sticky--active {
    display: block
}

.pricetoggle__stickybuttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 560px;
    margin: 0 auto
}

.pricetoggle__stickybutton {
    text-align: center;
    padding: 20px 40px;
    position: relative;
    font-size: 20px;
    font-family: "Px Grotesk", sans-serif;
    cursor: pointer
}

@media screen and (max-width:800px) {
    .pricetoggle__stickybutton {
        font-size: 16px;
        padding: 10px
    }
}

.pricetoggle__stickybutton:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff
}

.pricetoggle__stickybutton--active {
    color: #f58546
}

.pricetoggle__stickybutton--active:before {
    background-color: #f58546;
    height: 8px
}

.pricetoggle .pricetoggle__stickybutton+.pricetoggle__stickybutton {
    margin-left: 30px
}

.pricetoggle__content {
    display: none;
    text-align: center
}

.pricetoggle__content--active {
    display: block
}

.pricetoggle__content>h2,
.pricetoggle__content>p {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto
}

.pricetoggle__content>h2 {
    font-size: 28px
}

.pricetoggle__content>img {
    display: inline-block;
    margin: 60px auto
}

.pricetoggle__content .grid {
    font-size: 22px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 700;
    line-height: 30px;
    margin: 60px auto
}

.pricetoggle__content .grid img {
    margin-bottom: 20px
}

.pricetoggle__content .grid p {
    font-family: apercu, sans-serif;
    font-weight: 400;
    line-height: normal
}

.pricetoggle__whitebox {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    max-width: 540px;
    width: 100%;
    margin: 60px auto;
    color: #000;
    text-align: left
}

.pricetoggle__whitebox .tag-behind {
    font-size: 24px;
    font-family: apercu, sans-serif;
    font-weight: 400
}

.pricetoggle__whitebox .tag-behind:after {
    content: attr(data-tag);
    background-color: #000;
    color: #fff;
    padding: 2px 8px;
    font-size: 14px;
    margin-left: 10px;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle
}

.pricetoggle__whitebox .grid {
    font-size: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #000;
    margin: 0 0 15px 0;
    font-family: apercu, sans-serif;
    font-weight: 400
}

.pricetoggle__whitebox .grid .col-2 {
    padding: 0;
    margin: 0
}

.pricetoggle__whitebox .grid .col-2:nth-of-type(even) {
    text-align: right
}

.pricetoggle__whitebox .headline-tag {
    position: relative;
    font-size: 28px;
    font-family: apercu, sans-serif
}

.pricetoggle__whitebox .headline-tag:after {
    content: attr(data-tag);
    background-color: #000;
    margin-left: 10px;
    color: #fff;
    font-family: "Px Grotesk", sans-serif;
    border-radius: 10px;
    font-size: 18px;
    padding: 0 8px;
    vertical-align: middle
}

.pricetoggle__whitebox .headline-free {
    font-size: 40px;
    line-height: 48px;
    font-family: "Px Grotesk", sans-serif
}

.pricetoggle__whitebox ul {
    margin-bottom: 20px;
    margin-left: 1em
}


.pricetoggle__whitebox .usercalc {
    margin: 20px 0
}

.pricetoggle__whitebox .usercalc__form--inactive {
    display: none
}

.pricetoggle__whitebox .usercalc__form>p strong {
    font-family: "Px Grotesk", sans-serif;
    font-size: 20px;
    margin-bottom: 10px;
    display: inline-block
}

.pricetoggle__whitebox .usercalc__result {
    display: none
}

.pricetoggle__whitebox .usercalc__result--active {
    display: block
}

.pricetoggle__whitebox .usercalc__box {
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    display: block
}

.pricetoggle__whitebox .usercalc__header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center
}

.pricetoggle__whitebox .usercalc__icon {
    padding-right: 20px
}

.pricetoggle__whitebox .usercalc__title {
    padding-right: 20px;
    flex: 1;
    font-size: 16px;
    line-height: normal
}

.pricetoggle__whitebox .usercalc__title strong {
    font-family: "Px Grotesk", sans-serif;
    font-size: 20px
}

.pricetoggle__whitebox .usercalc__users {
    border: 2px solid #e5e5e5;
    border-radius: 5px;
    font-size: 28px;
    display: inline-block;
    width: 95px;
    text-align: center;
    font-family: "Px Grotesk", sans-serif;
    line-height: 33px;
    padding: 10px 20px;
    margin-right: 10px
}

.pricetoggle__whitebox .usercalc__users+span {
    font-size: 20px;
    line-height: 20px;
    font-family: apercu, sans-serif;
    font-weight: 400
}

.pricetoggle__whitebox .usercalc__price {
    font-size: 40px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 700;
    line-height: 47px;
    margin-right: 10px
}

.pricetoggle__whitebox .usercalc__price+span {
    font-size: 20px;
    line-height: 20px;
    font-family: apercu, sans-serif;
    font-weight: 400;
    white-space: nowrap;
    display: inline-block
}

.pricetoggle__whitebox .usercalc__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center
}

.pricetoggle__whitebox .usercalc__back {
    text-transform: uppercase;
    font-family: "Px Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    cursor: pointer;
    margin-bottom: 25px
}



.pricetoggle__whitebox .usercalc__total,
.pricetoggle__whitebox .usercalc__total2 {
    text-align: right;
    font-size: 20px;
    line-height: 20px
}

.pricetoggle__whitebox .usercalc__total span,
.pricetoggle__whitebox .usercalc__total2 span {
    display: block;
    font-size: 40px;
    font-family: "Px Grotesk", sans-serif;
    line-height: 48px
}

.pricetoggle__whitebox .usercalc__callcenter {
    display: none
}

.pricetoggle__whitebox .usercalc__callcenter--active {
    display: block
}

.pricetoggle__whitebox .usercalc__headline {
    font-size: 20px
}

.pricetoggle__whitebox .usercalc__headline span {
    font-size: 28px;
    line-height: 1.4;
    display: block
}

.pricetoggle__whitebox .usercalc__headline--tag span::after {
    content: attr(data-tag);
    background-color: #000;
    color: #fff;
    font-family: "Px Grotesk", sans-serif;
    padding: 2px 8px;
    font-size: 18px;
    margin-left: 10px;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle
}

.pricetoggle__whitebox .usercalc__subheadline {
    font-size: 24px;
    line-height: 1.4;
    font-family: "Px Grotesk", sans-serif;
    margin-bottom: 10px
}

.pricetoggle__whitebox .usercalc__contact>div+div {
    margin-top: 20px
}

.pricetoggle__whitebox .usercalc__contact label {
    font-size: 14px;
    font-family: apercu, sans-serif;
    display: block;
    margin-bottom: 5px;
    cursor: pointer
}

.pricetoggle__whitebox .usercalc__contact input,
.pricetoggle__whitebox .usercalc__contact textarea {
    width: 100%;
    display: block;
    border: 2px solid rgba(0, 0, 0, .2);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 18px;
    font-family: apercu, sans-serif;
    line-height: 27px;
    resize: none
}

.pricetoggle__whitebox .usercalc hr {
    width: 100%;
    height: 2px;
    background-color: rgba(0, 0, 0, .4);
    border: 0;
    margin: 25px auto
}

.pricetoggle__whitebox .usercalc .subtext {
    color: rgba(0, 0, 0, .5);
    font-size: 14px
}

.pricetoggle__whitebox .usercalc .small {
    font-size: 12px
}

.pricetoggle__whitebox .usercalc input[type=checkbox] {
    display: none
}

.pricetoggle__whitebox .usercalc input[type=checkbox]+label {
    cursor: pointer
}





.pricetoggle__whitebox .usercalc__slider {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 35px 0
}

.pricetoggle__whitebox .usercalc__slider .prerange {
    background-color: #c4c4c4;
    width: 10%;
    height: 18px;
    border-radius: 9px 0 0 9px
}

.pricetoggle__whitebox .usercalc__slider input[type=range] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 90%
}

.pricetoggle__whitebox .usercalc__slider input[type=range]:focus {
    outline: 0
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 18px;
    cursor: pointer;
    background: #f58546;
    border-radius: 0 9px 9px 0
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-webkit-slider-thumb {
    height: 50px;
    width: 20px;
    border-radius: 8px;
    background: #000;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -16px
}

.pricetoggle__whitebox .usercalc__slider input[type=range]:focus::-webkit-slider-runnable-track {
    background: #f58546
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-moz-range-track {
    width: 100%;
    height: 18px;
    cursor: pointer;
    background: #f58546;
    border-radius: 0 9px 9px 0
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-moz-range-thumb {
    height: 50px;
    width: 20px;
    border-radius: 8px;
    background: #000;
    cursor: pointer
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-ms-track {
    width: 100%;
    height: 18px;
    cursor: pointer;
    background: 0 0;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-ms-fill-lower {
    background: #6cc30f;
    border-radius: 0 9px 9px 0
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-ms-fill-upper {
    background: #f58546;
    border-radius: 0 9px 9px 0
}

.pricetoggle__whitebox .usercalc__slider input[type=range]::-ms-thumb {
    height: 50px;
    width: 20px;
    border-radius: 8px;
    background: #000;
    cursor: pointer
}

.pricetoggle__whitebox .usercalc__slider input[type=range]:focus::-ms-fill-lower {
    background: #6cc30f
}

.pricetoggle__whitebox .usercalc__slider input[type=range]:focus::-ms-fill-upper {
    background: #f58546
}

.pricetoggle__buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 560px;
    margin: 80px auto
}

@media screen and (max-width:800px) {
    .pricetoggle__buttons {
        flex-direction: column;
        align-items: center;
        margin: 20px 0
    }
}

.pricetoggle__button {
    border: 2px solid #fff;
    width: 100%;
    max-width: 270px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: all .3s ease
}

.pricetoggle__button img {
    display: block;
    margin-bottom: 30px
}

.pricetoggle__button h3 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-top: 0 !important
}

.pricetoggle__button--active,
.pricetoggle__button:hover {
    border-color: #f58546
}

@media screen and (max-width:800px) {
    .pricetoggle__button {
        flex-direction: row;
        align-items: center;
        text-align: left;
        margin-bottom: 20px;
        padding: 15px
    }

    .pricetoggle__button img {
        margin-bottom: 0;
        margin-right: 30px
    }

    .pricetoggle__button span {
        font-size: 20px
    }
}

.installation__header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 570px;
    width: 100%;
    margin: 0 auto 60px auto
}

.installation__logo img {
    display: block
}

.installation__title {
    flex: 1;
    font-size: 28px;
    line-height: 1
}

.installation__title .headline-tag {
    font-size: 18px;
    background-color: #c4c4c4;
    border-radius: 20px;
    padding: 5px 10px;
    margin-bottom: 16px;
    display: inline-block
}



.installation__rating {
    text-align: right;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1
}

.installation__rating span {
    color: #f58546;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 5px;
    display: inline-block
}

.installation__rating a {
    color: #000;
    font-weight: 700
}

.installation__content {
    border-radius: 20px;
    background-color: #000;
    color: #fff;
    padding: 80px
}

.installation__content .subtitle {
    text-align: center;
    font-size: 16px;
    font-family: "Px Grotesk", sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 15px
}

.installation__content h2 {
    text-align: center;
    font-size: 36px;
    line-height: 54px;
    margin-bottom: 50px;
    font-family: apercu, sans-serif
}

.installation__content h3 {
    text-align: center;
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 50px;
    margin-top: 60px;
    font-family: "Px Grotesk", sans-serif
}

.installation__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.installation__col {
    text-align: center;
    font-size: 22px;
    font-family: "Px Grotesk", sans-serif
}

.installation__col img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px
}

.installation__browsers {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    max-width: 570px;
    margin: 60px auto
}

.installation__browser {
    border: 2px solid #fff;
    padding: 30px 30px 20px 30px;
    text-align: center;
    font-family: "Px Grotesk", sans-serif;
    font-size: 24px;
    width: 174px;
    color: #fff;
    border-radius: 10px
}

.installation__browser--active {
    border-color: #f58546
}

.installation__browser div {
    background-color: #fff;
    padding: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px auto
}

.installation__browser div img {
    display: block;
    width: 40px
}

.installation__button {
    display: none !important
}

.installation__button:hover {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #f58546 !important
}

.installation__button:hover .button__icon {
    filter: invert(0) !important
}

.installation__button--active {
    display: table !important
}

@media screen and (max-width:1000px) {
    .installation__content {
        padding: 20px
    }

    .installation__grid {
        flex-direction: column
    }

    .installation__col+.installation__col {
        margin-top: 20px
    }
}

@media screen and (max-width:768px) {
    .installation__browsers {
        flex-direction: column
    }

    .installation__browser {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 10px;
        font-size: 16px;
        margin: 0 10px;
        text-align: left
    }

    .installation__browser br {
        display: none
    }

    .installation__browser div {
        width: 48px;
        height: 48px;
        margin: 0 20px 0 0
    }

    .installation__browser+.installation__browser {
        margin-top: 10px
    }
}

.browsers {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 45px
}

.browsers__browser {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(196, 196, 196, .3)
}



.browsers__browser--active {
    background-color: #fff;
    border: 4px solid #86ec16
}

.browsers .browsers__browser+.browsers__browser {
    margin-left: 25px
}

.sales-callback-form h2,
.sales-contact-form h2 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 33px;
    text-align: center;
    margin-bottom: 30px
}

.sales-callback-form p,
.sales-contact-form p {
    font-family: apercu, sans-serif;
    font-size: 20px;
    line-height: 1.5
}

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

    .sales-callback-form .ml-10,
    .sales-contact-form .ml-10 {
        margin-left: 10px !important
    }
}

.person-name {
    border-bottom: 2px solid #f58546
}

h2.tag-above {
    position: relative
}

h2.tag-above:before {
    position: absolute;
    content: attr(data-tag);
    transform: translate3d(-50%, -100%, 0);
    top: 10px;
    left: 50%;
    display: block;
    background: #c4c4c4;
    border-radius: 10px;
    padding: 0 8px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .7)
}

address {
    font-style: normal
}

.site-nav {
    display: block;
    padding-top: 20px;
    padding-bottom: 80px;
    max-width: 50%
}

.site-nav .menu {
    list-style: none;
    padding: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    background-color: #fff
}

.site-nav .menu li {
    position: relative;
    display: block;
    margin-top: 5px;
    line-height: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, .05)
}

.site-nav .menu li+li {
    position: relative
}

.site-nav .menu li:last-child {
    border-bottom: none
}

.site-nav .menu li a {
    display: block;
    color: #000
}

.site-nav .menu li a:hover {
    color: #f58546
}



.site-nav .menu li:before {
    display: none
}

@media screen and (max-width:1130px) {
    .site-nav .menu {
        font-size: 16px
    }
}

@media screen and (max-width:1045px) {
    .site-nav {
        padding-bottom: 20px
    }
}

@media screen and (max-width:768px) {
    .site-nav {
        padding-bottom: 20px;
        max-width: 100%
    }

    .site-nav .menu {
        max-width: 100%
    }
}

.button {
    display: table;
    padding: 11px 20px 9px;
    font-family: apercu, sans-serif;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 2px;
    cursor: pointer
}

@media screen and (max-width:400px) {
    .button {
        white-space: inherit
    }
}

.button.break {
    white-space: inherit
}

.button.big {
    padding: 15px 80px;
    font-size: 16px
}

.button.mobileWrap {
    white-space: inherit
}

.button.rounded {
    border-radius: 100px;
    font-family: "Px Grotesk", sans-serif;
    letter-spacing: .1em;
    font-size: 16px
}

.button.small-rounded {
    border-radius: 6px;
    font-family: "Px Grotesk", sans-serif;
    letter-spacing: .1em;
    font-weight: 700;
    font-size: 16px
}

.button--block {
    display: block
}

.button--fullwidth {
    width: 100%;
    text-align: center
}

.button--inline {
    display: inline-block
}

.button--wider {
    padding-left: 40px;
    padding-right: 40px
}



.button.primary {
    background-color: #000;
    border: 2px solid #000;
    color: #f58546;
    text-transform: uppercase
}

.button.primary:hover {
    background-color: #fff;
    color: #000;
    border-color: #f58546
}

.button.primary.borderless {
    background-color: #f58546;
    border: none;
    color: #000;
    text-transform: uppercase
}

.button.primary.silent {
    background-color: inherit;
    border: none;
    color: #f58546;
    text-transform: none;
    font-weight: 400
}

.button.secondary {
    background-color: #fff;
    border: 2px solid #f58546;
    color: #000;
    text-transform: uppercase
}

.button.secondary:hover {
    background-color: #000;
    border-color: #000;
    color: #f58546
}

.button.secondary.silent {
    background-color: inherit;
    border: none;
    color: #000;
    text-transform: none;
    font-weight: 400
}

.button.secondary.black {
    background-color: #000;
    border: 2px solid #000;
    color: #fff
}

.button.tertiary {
    background-color: #f58546;
    border: 2px solid #f58546;
    color: #000;
    text-transform: uppercase;
    transition: all .3s ease
}

.button.tertiary:hover {
    background-color: #000;
    border-color: #000;
    color: #f58546
}

.button.tertiary.silent {
    background-color: inherit;
    border: none;
    color: #000;
    text-transform: none;
    font-weight: 400
}

.button.tertiary.silent.white {
    color: #fff
}

.button.tertiary.black {
    color: #000 !important
}

.button.tertiary.black:hover {
    background-color: #fff;
    border-color: #fff;
    color: #000 !important
}

.button .button__icon {
    display: inline-block;
    vertical-align: middle
}





.button .button__icon.icon-alarm,
.button .button__icon.icon-analysis,
.button .button__icon.icon-automatization,
.button .button__icon.icon-collaboration,
.button .button__icon.icon-integrations,
.button .button__icon.icon-reporting {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 1em;
    height: 1em;
    transition: all .3s ease;
    margin-right: 10px
}



.button .button__icon.icon-reporting {
    background-image: url('reporting-icon.svg')
}

.button .button__icon.icon-automatization {
    background-image: url('automatization-icon.svg')
}

.button .button__icon.icon-analysis {
    background-image: url('analysis-icon.svg')
}

.button .button__icon.icon-alarm {
    background-image: url('alarm-icon.svg')
}

.button .button__icon.icon-collaboration {
    background-image: url('collaboration-icon.svg')
}

.button:hover .icon-jump-forward {
    filter: invert(1)
}

.button.icon {
    background-color: #f1f1f1;
    color: #000;
    border-radius: 10px;
    padding: 15px 25px;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: normal;
    font-family: "Px Grotesk", sans-serif
}

.button.icon:hover {
    background-color: #f58546
}

.button.transparent-border {
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    display: inline-block
}

.button.transparent-border .icon-jump-forward {
    filter: invert(1)
}

.button.transparent-border:hover {
    background-color: #f58546;
    color: #000;
    border-color: #f58546
}

.button.transparent-border:hover .icon-jump-forward {
    filter: invert(0)
}

.button-set {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: -20px
}

.button-set.centered {
    justify-content: center
}

.button-set.no-wrap {
    flex-wrap: nowrap
}

.button-set .button {
    margin-right: 20px;
    margin-bottom: 20px;
    line-height: normal
}

.button-set .button:last-child {
    margin-right: 0
}

.button-set .button.no-margin-bottom {
    margin-bottom: 0
}

.button-set .button:hover {
    transition: all .3s ease
}

.btn--green-brd {
    background: 0 0;
    color: #fff;
    border: 3px solid #f58546;
    font-weight: 700 !important
}

.btn--green-brd:hover {
    border: 3px solid #fff
}

.leftright-equal {
    margin-left: auto !important;
    margin-right: auto !important
}

@media screen and (max-width:1024px) {
    .button.big {
        padding: 15px 20px;
        min-width: 38%
    }
}

@media screen and (max-width:800px) {
    .button-set {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 100%
    }

    .button-set .button {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%
    }
}

p+.button-set {
    margin-top: 40px
}

.switch {
    position: relative;
    display: inline-block !important;
    width: 66px !important;
    height: 100% !important;
    min-height: 36px;
    max-width: 66px !important;
    min-width: 66px !important
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    height: 100%;
    width: 100%;
    margin: 0 !important
}

.switch .switchSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    transition: .4s;
    border: 2px solid #000
}

.switch .switchSlider::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 25px;
    left: 6px;
    bottom: 4px;
    background-color: #000;
    transition: .4s
}

.switch.checked input+.switchSlider {
    background-color: #f58546
}

.switch.checked input:focus+.switchSlider {
    box-shadow: none;
    outline: 0
}

.switch.checked input+.switchSlider:before {
    transform: translateX(26px)
}

a.shadow-box {
    display: block;
    color: #000;
    position: relative;
    border: 2px solid transparent
}

a.shadow-box:visited {
    color: #000
}

a.shadow-box :focus,
a.shadow-box:hover {
    border: 2px solid #f58546
}

.shadow-box {
    box-shadow: 0 0 20px rgba(0, 0, 0, .25);
    background-color: #fff;
    color: #000
}

.shadow-box+.shadow-box {
    margin-top: 40px
}

.shadow-box.padding {
    padding: 40px
}

.shadow-box.padding-tiles {
    padding: 30px 30px 60px
}

.shadow-box.space-between {
    height: 100%
}

.shadow-box.transparent {
    background-color: rgba(255, 255, 255, .75)
}

.shadow-box.animation-1 {
    position: relative
}

.shadow-box.animation-1:before {
    content: "";
    background-image: url('../animations/hands-overlap.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 111px;
    height: 29px;
    position: absolute;
    top: -10px;
    right: 42px
}

.shadow-box.animation-1:after {
    content: "";
    width: 700px;
    height: 700px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: -247px;
    right: -311px;
    z-index: -1
}

.shadow-box.animation-1.visible::after {
    background-image: url('../animations/01_MASTER_HP_transparent.gif')
}

.shadow-box.box-illu-1 {
    position: relative
}

.shadow-box.box-illu-1:after {
    content: "";
    width: 700px;
    height: 700px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    top: -171px;
    right: -140px
}

.shadow-box.box-illu-1.visible::after {
    background-image: url('../images/icons_png/box-illu-1.png')
}

.shadow-box.autoWidth {
    width: auto
}

.shadow-box.no-shadow {
    border: none;
    background-color: #fff;
    height: 100%
}

.shadow-box .text p {
    margin-top: 15px
}

.shadow-box .text-small {
    font-size: 16px
}

.animation-2,
.animation-3,
.animation-4 {
    position: relative
}

.animation-2:after,
.animation-3:after,
.animation-4:after {
    content: "";
    width: 500px;
    height: 400px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    bottom: -80px;
    left: -260px;
    z-index: -2
}


.animation-3::after {
    width: 350px;
    bottom: 93px;
    left: -336px
}



.animation-4::after {
    width: 350px;
    bottom: 93px;
    left: initial;
    right: -334px
}


*+.shadow-box {
    margin-top: 40px
}

@media screen and (max-width:670px) {
    .shadow-box {
        overflow: hidden
    }

    .shadow-box.animation-1 {
        margin-top: 120px;
        overflow: inherit
    }
}

.grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: -40px
}

.grid [class*=col-].card {
    --c: #edf2e2;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    padding: 20px
}

.grid [class*=col-].card--shadow {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1)
}

.grid [class*=col-].card--transparent {
    background-color: transparent
}

.grid [class*=col-].card--transparent .card__image {
    background-color: transparent !important
}

.grid [class*=col-].card .card__image {
    margin-top: -20px;
    margin-left: -20px;
    width: calc(100% + (20px * 2));
    max-width: calc(100% + (20px * 2));
    height: 180px;
    margin-bottom: 20px;
    background-color: var(--c);
    display: flex;
    justify-content: center;
    align-items: center
}

.grid [class*=col-].card .card__image--small {
    height: auto;
    margin-bottom: 40px
}

.grid [class*=col-].card .card__image img {
    display: block
}

.grid [class*=col-].card h3 {
    margin-top: 0;
    font-size: 24px;
    font-family: apercu, sans-serif
}

.grid [class*=col-].card h4 {
    margin-top: 0;
    font-size: 20px;
    font-family: "Px Grotesk", sans-serif !important;
    font-weight: 700 !important
}

.grid [class*=col-].flex {
    display: flex;
    flex-direction: column
}

.grid [class*=col-].flex.row {
    flex-direction: row
}

.grid [class*=col-].space-between {
    justify-content: space-between
}

.grid [class*=col-].space-between blockquote {
    height: 100%;
    padding-bottom: 120px
}

.grid [class*=col-].space-between blockquote.no-sign {
    padding-bottom: 50px
}

.grid [class*=col-].col-50 {
    width: 50%;
    margin-bottom: 0
}

.grid [class*=col-].col-50>img {
    margin: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.grid [class*=col-].col-50>img.logo {
    height: auto;
    width: 100%;
    margin: 0 auto;
    max-width: 300px
}

.grid [class*=col-].col-50.padding {
    padding: 40px
}

.grid [class*=col-].col-50 blockquote {
    padding: 40px 0
}

.grid [class*=col-].col-50 blockquote::after {
    color: #fff;
    font-size: 120px;
    bottom: -40px;
    right: 0
}

.grid [class*=col-].col-50 blockquote.h2 {
    font-size: 22px;
    margin-bottom: 20px
}

.grid [class*=col-].col-50 .h4 {
    font-size: 18px
}

.grid.columns {
    flex-direction: column
}

.grid.tile .col-2,
.grid.tile .col-3 {
    display: flex;
    align-items: stretch;
    position: relative
}

.grid.tile .col-2>div,
.grid.tile .col-3>div {
    margin-top: 40px
}

.grid.tile .col-2 .shadow-box,
.grid.tile .col-3 .shadow-box {
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    width: 100%
}

.grid.tile .col-2:focus .shadow-box,
.grid.tile .col-2:hover .shadow-box,
.grid.tile .col-3:focus .shadow-box,
.grid.tile .col-3:hover .shadow-box {
    transition: all .3s ease
}

.grid img {
    display: block;
    margin: 0 auto
}

.grid img.icon {
    width: 70px;
    margin-bottom: 20px
}

.grid img.icon.icon-small {
    height: 65px
}

.grid [class^=col-] {
    margin-bottom: 40px
}

.grid [class^=col-].padding {
    margin: 0;
    padding: 80px 0 80px 0
}

.grid .col-1 {
    width: calc((100% - ((1 - 1) * 40px))/ 1)
}

.grid .col-2 {
    width: calc((100% - ((2 - 1) * 40px))/ 2)
}

.grid .col-3 {
    width: calc((100% - ((3 - 1) * 40px))/ 3)
}

.grid .col-4 {
    width: calc((100% - ((4 - 1) * 40px))/ 4)
}

.grid .col-5 {
    width: calc((100% - ((5 - 1) * 40px))/ 5)
}

.grid .col-6 {
    width: calc((100% - ((6 - 1) * 40px))/ 6)
}

.grid .col-2-5 {
    width: 40%;
    padding-left: 80px
}

.grid .col-3-5 {
    width: 60%;
    padding-right: 80px
}

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

    .grid .col-2-5,
    .grid .col-3-5 {
        width: 50%
    }
}

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

    .grid .col-2-5,
    .grid .col-3-5 {
        width: 100%;
        padding-left: 0;
        padding-right: 0
    }
}

*+.grid {
    margin-top: 40px
}

@media screen and (max-width:800px) {
    .grid [class*=col-].col-50 {
        width: 100%
    }

    .grid [class*=col-].col-50.padding {
        padding: 30px 20px
    }

    .grid [class*=col-].col-50 blockquote.h2 {
        font-size: 18px
    }

    .grid.tile {
        flex-direction: column
    }

    .grid.tile .col-2 {
        width: 100%
    }

    .grid.tile.column .col-2:nth-child(odd) {
        margin-bottom: 0
    }

    .grid.tile.column .col-2:nth-child(odd)>div {
        margin-bottom: 0
    }

    .grid .col-3,
    .grid .col-4 {
        width: calc((100% - 20px)/ 2)
    }

    #angebote .grid .col-3 {
        width: 100%
    }

    #kontakt .grid .col-2,
    #kontakt .grid .col-3 {
        width: 100%
    }
}

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

    .grid .col-2,
    .grid .col-3,
    .grid .col-4 {
        width: 100%
    }

    .grid [class*=col-].padding {
        padding: 40px 0 20px 0
    }

    .grid [class*=col-].padding:last-child {
        padding: 0 0 40px 0
    }
}

.sl {
    font-family: streamline !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 0;
    font-size: 2rem;
    line-height: 1
}

.sl.white {
    color: #fff
}

.sl.topIcon {
    display: block;
    text-align: center;
    margin: 0 auto 20px;
    padding: 0 20px 20px
}

.sl.sl-before {
    font-family: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    font-variant: inherit !important;
    text-transform: inherit !important;
    color: inherit;
    margin-bottom: inherit;
    font-size: inherit;
    line-height: inherit;
    padding-left: 40px;
    position: relative
}

.sl.sl-before.before-padding-25 {
    padding-left: 25px
}

.sl.sl-before.sl-size-l,
.sl.sl-before.sl-size-m,
.sl.sl-before.sl-size-s,
.sl.sl-before.sl-size-xl,
.sl.sl-before.sl-size-xs,
.sl.sl-before.sl-size-xxs {
    font-size: inherit
}

.sl.sl-before:before {
    content: "";
    font-family: streamline !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: 0;
    top: -5px
}

.sl.sl-before.relative:before {
    position: relative;
    display: inline-block;
    padding-right: 10px;
    top: 0
}

@media screen and (max-width:555px) {
    .sl.sl-before {
        padding-left: inherit
    }

    .sl.sl-before:not(.mobile):before {
        content: none;
        display: none
    }
}

.sl.sl-after {
    font-family: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    font-variant: inherit !important;
    text-transform: inherit !important;
    color: inherit;
    margin-bottom: inherit;
    font-size: inherit;
    line-height: inherit;
    padding-right: 25px;
    position: relative
}

.sl.sl-after.before-padding-25 {
    padding-right: 25px
}

.sl.sl-after.sl-size-l,
.sl.sl-after.sl-size-m,
.sl.sl-after.sl-size-s,
.sl.sl-after.sl-size-xl,
.sl.sl-after.sl-size-xs,
.sl.sl-after.sl-size-xxs {
    font-size: inherit
}

.sl.sl-after:after {
    content: "";
    font-family: streamline !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 0
}

.sl.sl-after.white {
    color: #fff
}

.sl.sl-after.small:after {
    font-size: calc(100% / 1.2);
    bottom: 25%
}

.sl.sl-after.relative:after {
    position: relative;
    display: inline-block;
    padding-left: 10px;
    top: 0
}

@media screen and (max-width:555px) {
    .sl.sl-after {
        padding-right: inherit
    }

    .sl.sl-after:not(.mobile):after {
        content: none;
        display: none
    }
}

.sl:hover.sl-after.sl-arrow-right:after {
    transform: translate3d(5px, 0, 0);
    transition: transform 250ms
}

.sl.sl-size-xxs,
.sl.sl-size-xxs:after,
.sl.sl-size-xxs:before {
    font-size: 26px
}

.sl.sl-size-xs,
.sl.sl-size-xs::after,
.sl.sl-size-xs:before {
    font-size: 33px
}

.sl.sl-size-s,
.sl.sl-size-s:after,
.sl.sl-size-s:before {
    font-size: 40px
}

.sl.sl-size-m,
.sl.sl-size-m:after,
.sl.sl-size-m:before {
    font-size: 52px
}

.sl.sl-size-l,
.sl.sl-size-l::after,
.sl.sl-size-l:before {
    font-size: 64px
}

.sl.sl-size-xl,
.sl.sl-size-xl::after,
.sl.sl-size-xl:before {
    font-size: 78px
}

.sl.sl-bubble:before {
    content: "\e04a"
}

.sl.sl-settings:before {
    content: "\e2b4"
}

.sl.sl-functions:before {
    content: "\e2b6"
}

.sl.sl-pin:before {
    content: "N"
}

.sl.sl-lock:before {
    content: "y"
}

.sl.sl-close:before {
    content: "\e262"
}

.sl.sl-magic-wand:before {
    content: "\e003"
}

.sl.sl-spread:before {
    content: "\e28e"
}

.sl.sl-cloud:before {
    content: "\e532"
}

.sl.sl-bubble-smiley:before {
    content: "\e074"
}

.sl.sl-adjustment:before {
    content: "\e2b3"
}

.sl.sl-hourglass:before {
    content: "\e2c5"
}

.sl.sl-upload-file:before {
    content: "\e0e0"
}

.sl.sl-phone:before {
    content: "\e09e"
}

.sl.sl-search-person:before {
    content: "\e127"
}

.sl.sl-cut:before {
    content: "\e13a"
}

.sl.sl-mail:before {
    content: "\e0c6"
}

.sl.sl-scale:before {
    content: "\e287"
}

.sl.sl-screen:before {
    content: "\e3d6"
}

.sl.sl-feature:before {
    content: "\e384"
}

.sl.sl-chat-acknowledge:before {
    content: "\e05c"
}

.sl.sl-cobrowsing:before {
    content: "\e374"
}

.sl.sl-king:before {
    content: "\e109"
}

.sl.sl-ripped-note:before {
    content: "\e142"
}

.sl.sl-clock:before {
    content: "\e2c3"
}

.sl.sl-plane:before {
    content: "\e551"
}

.sl.sl-wallet:before {
    content: "\e150"
}

.sl.sl-pie-chart:before {
    content: "\e314"
}

.sl.sl-connection:before {
    content: "\e0e8"
}

.sl.sl-target:before {
    content: "\e458"
}

.sl.sl-delete-call:before {
    content: "\e094"
}

.sl.sl-time-document:before {
    content: "\e212"
}

.sl.sl-document1:before {
    content: "\e206"
}

.sl.sl-pointer:before {
    content: "&"
}

.sl.sl-clipboard:before {
    content: "\e1e9"
}

.sl.sl-call-out:before {
    content: "\e095"
}

.sl.sl-arrow-move-up:before {
    content: "\e25a"
}

.sl.sl-arrow-download:before {
    content: "\e252"
}

.sl.sl-recorder:before {
    content: "\e19f"
}

.sl.sl-fax:before {
    content: "\e097"
}

.sl.sl-bubble-chat:before {
    content: "\e05b"
}

.sl.sl-border-chat:before {
    content: "\e062"
}

.sl.sl-consultation:before {
    content: "\e07c"
}

.sl.sl-call:before {
    content: "\e08d"
}

.sl.sl-call-out2:before {
    content: "\e08e"
}

.sl.sl-add-wish:before {
    content: "\e03a"
}

.sl.sl-wish:before {
    content: "\e035"
}

.sl.sl-link:before {
    content: "\e0b2"
}

.sl.sl-profile-serviceman:before {
    content: "\e111"
}

.sl.sl-agent:before {
    content: "\e112"
}

.sl.sl-piggy-bank:before {
    content: "\e315"
}

.sl.sl-company-size:before {
    content: "\e353"
}

.sl.sl-globe:before {
    content: "\e35d"
}

.sl.sl-house:before {
    content: "\e35f"
}

.sl.sl-hand-coin:before {
    content: "\e308"
}

.sl.sl-globe2:before {
    content: "\e336"
}

.sl.sl-award:before {
    content: "\e021"
}

.sl.sl-remote:before {
    content: "\e3d2"
}

.sl.sl-crown:before {
    content: "\e023"
}

.sl.sl-bubble-comment:before {
    content: "\e060"
}

.sl.sl-contacts:before {
    content: "\e0e9"
}

.sl.sl-receipt:before {
    content: "\e141"
}

.sl.sl-book:before {
    content: "\e3ed"
}

.sl.sl-receipt2:before {
    content: "\e143"
}

.sl.sl-database-network:before {
    content: "\e3a4"
}

.sl.sl-lock2:before {
    content: "z"
}

.sl.sl-lock3:before {
    content: "B"
}

.sl.sl-call-block:before {
    content: "\e091"
}

.sl.sl-ambulance:before {
    content: "\e505"
}

.sl.sl-database1:before {
    content: "\e39e"
}

.sl.sl-routing:before {
    content: "\e42a"
}

.sl.sl-phone2:before {
    content: "\e09d"
}

.sl.sl-call-in:before {
    content: "\e093"
}

.sl.sl-connection2:before {
    content: "\e0e7"
}

.sl.sl-soda:before {
    content: "\e4fb"
}

.sl.sl-phone3:before {
    content: "\e09c"
}

.sl.sl-scale-all:before {
    content: "\e286"
}

.sl.sl-bubble-ask:before {
    content: "\e04f"
}

.sl.sl-call-add:before {
    content: "\e090"
}

.sl.sl-mailbox:before {
    content: "\e0cd"
}

.sl.sl-infinity:before {
    content: "\e26a"
}

.sl.sl-phone4:before {
    content: "\e09f"
}

.sl.sl-mobile-phone:before {
    content: "\e09a"
}

.sl.sl-bubble-block2:before {
    content: "\e058"
}

.sl.sl-bubble-star:before {
    content: "\e079"
}

.sl.sl-sofa:before {
    content: "\e455"
}

.sl.sl-kindle:before {
    content: "\e3c5"
}

.sl.sl-transfer:before {
    content: "\e1d5"
}

.sl.sl-chat3:before {
    content: "\e07d"
}

.sl.sl-hourglass2:before {
    content: "\e2c6"
}

.sl.sl-inbox:before {
    content: "\e0c0"
}

.sl.sl-return:before {
    content: "\e285"
}

.sl.sl-bubble-conversation:before {
    content: "\e065"
}

.sl.sl-contacts2:before {
    content: "\e0ec"
}

.sl.sl-letter:before {
    content: "\e0c1"
}

.sl.sl-shopping:before {
    content: "\e144"
}

.sl.sl-chart2:before {
    content: "\e2ed"
}

.sl.sl-chart-up:before {
    content: "\e2f4"
}

.sl.sl-check:before {
    content: "\e2f5"
}

.sl.sl-chart-board:before {
    content: "\e2f2"
}

.sl.sl-location:before {
    content: "\e339"
}

.sl.sl-volume:before {
    content: "\e1aa"
}

.sl.sl-arrow-button-down:before {
    content: "\e5ca"
}

.sl.sl-arrow-button-down2:before {
    content: "\e5c1"
}

.sl.sl-api:before {
    content: "\e42b"
}

.sl.sl-app:before {
    content: "\e420"
}

.sl.sl-pricing:before {
    content: "\e2f7"
}

.sl.sl-apps:before {
    content: "\e37b"
}

.sl.sl-return:before {
    content: "\e284"
}

.sl.sl-conference:before {
    content: "\e0e6"
}

.sl.sl-browsing:before {
    content: "\e3d9"
}

.sl.sl-flower:before {
    content: "\e55d"
}

.sl.sl-vtt:before {
    content: "\e41f"
}

.sl.sl-text-to-speech:before {
    content: "\e526"
}

.sl.sl-music:before {
    content: "\e192"
}

.sl.sl-ok-sign:before {
    content: "\e2a2"
}

.sl.sl-pack:before {
    content: "\e2ab";
    top: -7px
}

.sl.sl-arrow-down-round:before {
    content: "\e5ec"
}

.sl.sl-arrow-right:after {
    content: "\e5a9"
}

.sl.sl-arrow-left:before {
    content: "\e5a8"
}

.sl.sl-plus-sign:before {
    content: "\e24e";
    padding-right: 10px;
    line-height: 24px
}

.chat-conversation {
    position: relative;
    width: 100%;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

@media screen and (max-width:1080px) {
    .chat-conversation {
        display: none
    }
}

.chat-conversation>div {
    position: relative;
    padding: var(--gutter-xs);
    text-align: center;
    width: 66%;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 500;
    font-size: 20px
}

.chat-conversation>div img {
    display: block;
    width: 48px
}

.chat-conversation>div span {
    display: block;
    flex: 1
}

.chat-conversation>div:nth-child(1) {
    background-color: #f58546;
    border-radius: 25px 25px 25px 0;
    color: #000;
    text-align: left;
    transform: translate(-100%, 0);
    opacity: 0
}

.chat-conversation>div:nth-child(1) img {
    margin-right: var(--gutter-xs)
}

.chat-conversation>div:nth-child(2) {
    background-color: #000;
    border-radius: 25px 25px 0 25px;
    text-align: right;
    align-self: flex-end;
    margin-top: var(--gutter-xs);
    transform: translate(100%, 0);
    opacity: 0
}

.chat-conversation>div:nth-child(2) img {
    margin-left: var(--gutter-xs)
}

.chat-conversation>div.do-the-slide {
    -webkit-animation: moveOver 1s ease-in-out;
    animation: moveOver 1s ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.chat-conversation>div.do-the-slide2 {
    -webkit-animation-name: moveOver2;
    animation-name: moveOver2;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes moveOver {
    from {
        opacity: 0;
        transform: translate(-100%, 0)
    }

    80% {
        transform: translate(10%, 0)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes moveOver {
    from {
        opacity: 0;
        transform: translate(-100%, 0)
    }

    80% {
        transform: translate(10%, 0)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@-webkit-keyframes moveOver2 {
    from {
        opacity: 0;
        transform: translate(100%, 0)
    }

    80% {
        transform: translate(-10%, 0)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes moveOver2 {
    from {
        opacity: 0;
        transform: translate(100%, 0)
    }

    80% {
        transform: translate(-10%, 0)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

.animation {
    position: relative;
    height: 100%;
    display: block;
    min-height: 550px
}

.animation.relative {
    min-height: inherit
}

.animation.animation-bg {
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat
}

@media screen and (max-width:1024px) {
    .animation.animation-bg #lottie {
        display: none
    }
}

@media screen and (max-width:340px) {
    .animation.animation-bg.visible {
        background-position: center top +40px
    }
}

@media screen and (max-width:490px) and (min-width:425px) {
    .animation.animation-bg.visible {
        background-size: 89%;
        background-position: center top
    }
}

@media screen and (max-width:800px) and (min-width:490px) {
    .animation.animation-bg {
        background-size: 425px
    }
}

@media screen and (max-width:800px) and (min-width:556px) {
    .animation.animation-bg {
        background-size: 480px
    }
}

@media screen and (max-width:830px) and (min-width:801px) {
    .animation.animation-bg {
        background-position: center center;
        background-size: contain
    }
}

@media screen and (max-width:1024px) and (min-width:831px) {
    .animation.animation-bg {
        background-position: center center;
        background-size: contain
    }
}

@media screen and (min-width:1025px) {
    .animation.animation-bg {
        background: 0 0
    }
}

@media screen and (max-width:800px) {
    .animation {
        width: 100%;
        height: 100%;
        min-height: 500px;
        max-height: 500px;
        margin-bottom: -40px
    }
}

@media screen and (max-width:555px) {
    .animation {
        min-height: 400px;
        max-height: 400px;
        margin-bottom: -40px
    }
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: inherit !important;
    box-shadow: 0 0 0 1000px transparent inset;
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s
}

input:-webkit-autofill:first-line,
input:-webkit-autofill:focus:first-line,
input:-webkit-autofill:hover:first-line,
select:-webkit-autofill:first-line,
select:-webkit-autofill:focus:first-line,
select:-webkit-autofill:hover:first-line,
textarea:-webkit-autofill:first-line,
textarea:-webkit-autofill:focus:first-line,
textarea:-webkit-autofill:hover:first-line {
    font-family: inherit !important;
    font-size: inherit !important
}

form button,
form input,
form select,
form textarea {
    outline: 0
}

form.form label {
    display: block;
    width: 100%;
    font-size: 16px;
    margin-top: 10px
}

form.form label:first-child {
    margin-top: 0
}

form.form label.left {
    text-align: left
}

form.form .customSelect .select-selected,
form.form input,
form.form select,
form.form textarea {
    border: 2px solid #000;
    padding: 5px 20px;
    width: 100%;
    font-size: 16px;
    margin: 5px 0;
    height: 40px;
    color: #000;
    font-family: apercu, sans-serif
}

form.form .customSelect .select-selected.error,
form.form input.error,
form.form select.error,
form.form textarea.error {
    border-color: red
}

form.form textarea {
    max-width: 100%;
    text-align: left;
    height: 80px;
    font-family: apercu, sans-serif;
    line-height: 1.5;
    margin-bottom: 0
}

form.form input[type=email]::-moz-placeholder,
form.form input[type=tel]::-moz-placeholder,
form.form input[type=text]::-moz-placeholder,
form.form textarea::-moz-placeholder {
    color: #949faf
}

form.form input[type=email]:-ms-input-placeholder,
form.form input[type=tel]:-ms-input-placeholder,
form.form input[type=text]:-ms-input-placeholder,
form.form textarea:-ms-input-placeholder {
    color: #949faf
}

form.form input[type=email]::placeholder,
form.form input[type=tel]::placeholder,
form.form input[type=text]::placeholder,
form.form textarea::placeholder {
    color: #949faf
}

form.form input[type=email]::-moz-input-placeholder,
form.form input[type=tel]::-moz-input-placeholder,
form.form input[type=text]::-moz-input-placeholder,
form.form textarea::-moz-input-placeholder {
    color: #949faf
}

form.form input[type=email]::-ms-input-placeholder,
form.form input[type=tel]::-ms-input-placeholder,
form.form input[type=text]::-ms-input-placeholder,
form.form textarea::-ms-input-placeholder {
    color: #949faf
}

form.form input[type=email]:focus,
form.form input[type=tel]:focus,
form.form input[type=text]:focus,
form.form textarea:focus {
    color: #fff;
    background-color: #000;
    font-size: 18px
}

form.form input[type=submit] {
    background-color: #000;
    color: #f58546;
    padding: 10px 20px;
    width: 100%;
    font-size: 18px;
    margin: 5px 0;
    display: block;
    height: 40px
}

form.form .button-set {
    margin: 20px auto 0
}

form.form .button-set .button.big {
    margin-top: 20px
}

form.form .checkboxen .customCheckbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 300;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

form.form .checkboxen .customCheckbox:last-child {
    margin-bottom: 0
}

form.form .checkboxen .customCheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

form.form .checkboxen .customCheckbox .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 3px
}

form.form .checkboxen .customCheckbox .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

form.form .checkboxen .customCheckbox .checkmark:after {
    left: 8px;
    top: -5px;
    width: 11px;
    height: 20px;
    border: solid #f58546;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

form.form .checkboxen .customCheckbox .checkmark.round {
    border-radius: 50%
}

form.form .checkboxen .customCheckbox input:checked .checkmark:after,
form.form .checkboxen .customCheckbox input:checked+.checkmark:after,
form.form .checkboxen .customCheckbox.checked .checkmark:after,
form.form .checkboxen .customCheckbox.checked+.checkmark:after {
    content: "";
    position: absolute;
    display: block
}

form.form .checkboxen .customCheckbox input:checked .checkmark:after,
form.form .checkboxen .customCheckbox input:checked+.checkmark:after,
form.form .checkboxen .customCheckbox.checked .checkmark:after,
form.form .checkboxen .customCheckbox.checked+.checkmark:after {
    left: 8px;
    top: -5px;
    width: 11px;
    height: 20px;
    border: solid #f58546;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg)
}

form.form-1 {
    margin: 20px 0
}

form.form-1 .multipleSelection {
    font-size: 18px;
    margin: 5px 0
}

form.form-1 .multipleSelection .title {
    border: 2px solid #f58546;
    color: #000;
    width: 100%;
    padding: 5px 20px;
    display: block;
    cursor: pointer;
    height: 40px;
    position: relative;
    font-weight: 500;
    text-align: center;
    padding-right: 40px;
    overflow: hidden
}

form.form-1 .multipleSelection .title:after {
    font-family: streamline;
    content: "\e5c1";
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #f58546;
    position: absolute;
    top: -2px;
    right: -2px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    transition: all .3s 0s ease-in-out
}

form.form-1 .multipleSelection .selection {
    display: none;
    padding: 10px;
    margin: 10px 0;
    max-height: 250px;
    min-height: 150px;
    overflow-y: scroll
}

form.form-1 .multipleSelection:focus .title,
form.form-1 .multipleSelection:hover .title {
    background-color: #fff;
    transition: all .3s ease
}

form.form-1 input[type=email],
form.form-1 input[type=text] {
    display: none
}

p+form {
    margin-top: 40px
}

.formSuccess {
    min-height: 603px;
    text-align: left;
    padding-top: 60px;
    margin-bottom: 40px;
    display: none
}

.formSuccess.auto {
    min-height: auto;
    padding-top: 0;
    margin-bottom: 0
}

.formFail {
    display: none;
    text-align: left;
    padding-top: 60px;
    margin-bottom: 40px
}

.formFail.auto {
    min-height: auto;
    padding-top: 0;
    margin-bottom: 0
}

.accordion,
.container {
    padding: 0;
    border: 2px solid #000;
    margin: 20px 0;
    background-color: #fff;
    position: relative
}

.accordion .title,
.container .title {
    cursor: pointer;
    padding: 18px 20px 18px 88px
}

.accordion .title:before,
.container .title:before {
    left: 30px;
    font-family: streamline !important;
    content: "\e24B";
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    position: absolute;
    margin-top: 3px
}

.accordion.blank,
.accordion.list,
.container.blank,
.container.list {
    border: none;
    margin: 0
}

.accordion.blank .title,
.accordion.list .title,
.container.blank .title,
.container.list .title {
    padding: 10px 20px;
    font-size: 14px;
    margin: 0
}

.accordion.blank .title::before,
.accordion.list .title::before,
.container.blank .title::before,
.container.list .title::before {
    content: none
}

.accordion.blank .content,
.accordion.list .content,
.container.blank .content,
.container.list .content {
    padding: 10px 20px 20px
}

.accordion.blank:last-child,
.accordion.list:last-child,
.container.blank:last-child,
.container.list:last-child {
    border-bottom: none
}

.accordion.blank.open .title:before,
.accordion.list.open .title:before,
.container.blank.open .title:before,
.container.list.open .title:before {
    content: none
}

.accordion.blank.open.black,
.accordion.list.open.black,
.container.blank.open.black,
.container.list.open.black {
    background-color: #000
}

.accordion.blank.open.black .title,
.accordion.list.open.black .title,
.container.blank.open.black .title,
.container.list.open.black .title {
    background-color: #000;
    color: #f58546;
    border: 2px solid #000
}

.accordion.blank.open.black .content,
.accordion.list.open.black .content,
.container.blank.open.black .content,
.container.list.open.black .content {
    color: #fff
}

.accordion.blank.open.black .content input[type=email]:focus,
.accordion.blank.open.black .content input[type=tel]:focus,
.accordion.blank.open.black .content input[type=text]:focus,
.accordion.blank.open.black .content textarea:focus,
.accordion.list.open.black .content input[type=email]:focus,
.accordion.list.open.black .content input[type=tel]:focus,
.accordion.list.open.black .content input[type=text]:focus,
.accordion.list.open.black .content textarea:focus,
.container.blank.open.black .content input[type=email]:focus,
.container.blank.open.black .content input[type=tel]:focus,
.container.blank.open.black .content input[type=text]:focus,
.container.blank.open.black .content textarea:focus,
.container.list.open.black .content input[type=email]:focus,
.container.list.open.black .content input[type=tel]:focus,
.container.list.open.black .content input[type=text]:focus,
.container.list.open.black .content textarea:focus {
    border-color: #fff
}

.accordion.list,
.container.list {
    border-bottom: 1px solid #f2f2f2;
    padding: 10px 40px 10px 35px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.accordion.list::before,
.container.list::before {
    padding-top: 10px;
    margin-left: 10px
}

.accordion.list::after,
.container.list::after {
    content: "\e5ca";
    font-family: streamline;
    right: 10px;
    position: absolute;
    top: 7px;
    font-size: 20px
}

.accordion.list .title,
.container.list .title {
    font-weight: 400;
    font-family: apercu;
    font-size: inherit;
    padding: initial
}

.accordion.list.open::after,
.container.list.open::after {
    transform: rotate(180deg)
}

.accordion.list:hover,
.container.list:hover {
    background-color: initial;
    color: initial
}

.accordion.list:hover::after,
.container.list:hover::after {
    color: #f58546
}

.accordion.list .content,
.container.list .content {
    padding: 10px 10px 20px 0;
    font-size: initial
}

.accordion .content,
.container .content {
    display: none;
    margin: 0;
    padding-left: 88px;
    padding-bottom: 18px
}

.accordion .content.open,
.container .content.open {
    display: block
}

.accordion .content:last-child,
.container .content:last-child {
    margin-bottom: 0
}

.accordion:hover,
.container:hover {
    background-color: #000;
    color: #fff
}

.accordion:hover .content a,
.container:hover .content a {
    transition: none;
    color: #fff !important
}

.accordion:hover .content a:hover,
.container:hover .content a:hover {
    transition: all .3s ease;
    color: #f58546 !important
}

.accordion.open .title:before,
.container.open .title:before {
    content: "\e271"
}

.accordion.open .content,
.container.open .content {
    display: block
}

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

    .accordion,
    .container {
        margin: 0;
        border-top: 2px solid #000;
        border-left: 0 none;
        border-right: 0 none;
        border-bottom: 0 none
    }

    .accordion:last-child,
    .container:last-child {
        border-bottom: 2px solid #000
    }

    .accordion .title,
    .container .title {
        cursor: pointer;
        padding-left: 20px;
        margin-left: 48px;
        font-size: 16px
    }

    .accordion .content,
    .container .content {
        padding-left: 68px;
        font-size: 16px;
        font-weight: 300
    }
}

.wrapper.background-image .accordion,
.wrapper.background-image .container {
    background-color: transparent;
    border-color: #fff
}

.accordion {
    background-color: transparent
}

.wrapper .content .accordion p {
    color: initial
}

.main-footer {
    background-color: #000;
    color: #fff
}

.main-footer a,
.main-footer p {
    font-size: 16px;
    font-weight: 300
}

.main-footer .footer-content {
    max-width: 1200px;
    padding: 60px 25px;
    margin: 0 auto
}

.main-footer .footer-content .button-set {
    width: 100%
}

.main-footer .footer-content .button-set .button {
    width: 100%;
    margin: 0 0 20px
}

.main-footer .footer-content.mobile {
    display: none
}

.main-footer .footer-content.mobile p+p {
    margin-top: 20px
}

.main-footer .footer-content.mobile .footer-menu {
    list-style: none;
    border-top: 1px solid #fff;
    margin-top: 20px
}

.main-footer .footer-content.mobile .footer-menu>li+li {
    border-top: 1px solid #fff
}

.main-footer .footer-content.mobile .footer-menu>li span {
    display: block;
    position: relative;
    padding: 10px 0;
    cursor: pointer
}

.main-footer .footer-content.mobile .footer-menu>li span:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 38px;
    transform: translateY(-50%)
}

.main-footer .footer-content.mobile .footer-menu>li ul {
    display: none;
    list-style: none;
    padding-left: 20px
}

.main-footer .footer-content.mobile .footer-menu>li ul li {
    border-top: 1px solid rgba(255, 255, 255, .25);
    padding: 10px 0
}

.main-footer .footer-content.mobile .footer-menu>li ul li a {
    color: #fff
}

.main-footer .footer-content.mobile .footer-menu>li.open span:after {
    content: "-"
}

.main-footer .footer-content.mobile .footer-menu>li.open ul {
    display: block
}

.main-footer .footer-content.mobile .button-set {
    margin-bottom: 20px
}

.main-footer .footer-content.mobile .button-set .button {
    margin-bottom: 10px
}

.main-footer .footer-content.mobile .company {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

.main-footer .footer-content.mobile .button {
    font-weight: 500;
    display: inline-block
}

.main-footer .footer-content.mobile .button.primary {
    color: #f58546
}

.main-footer .footer-content.mobile .button.secondary {
    background-color: #fff;
    color: #000
}

.main-footer .footer-content .footer-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

.main-footer .footer-content .footer-grid .footer-column {
    width: 50%
}

.main-footer .footer-content .footer-grid .footer-column+.footer-column {
    padding-left: 20px;
    padding-bottom: 20px
}

.main-footer .footer-content .footer__headline {
    font-family: "Px Grotesk", sans-serif;
    font-size: 24px;
    padding-bottom: 10px
}

.main-footer .footer-content .footer-note {
    text-align: center;
    font-size: 16px;
    margin-top: 50px;
    padding-top: 50px;
    border-top: 2px solid #fff;
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.main-footer .footer-content .footer-note a {
    display: inline-block;
    color: #fff;
    border-bottom: 2px solid transparent
}

.main-footer .footer-content .footer-note a+a {
    margin-left: 30px
}

.main-footer .footer-content .footer-note a:hover {
    border-color: #fff
}

.main-footer .footer-content p a:not(.btn) {
    color: #fff;
    border-bottom: 2px solid transparent
}

.main-footer .footer-content p a:not(.btn):hover {
    border-color: #fff
}

@media screen and (max-width:1000px) {
    .main-footer .footer-content {
        padding: 40px 20px
    }

    .main-footer .footer-content .footer-grid {
        flex-wrap: wrap;
        align-items: stretch
    }

    .main-footer .footer-content .footer-grid .footer-column {
        width: 25%;
        margin-top: 20px
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(even) {
        padding-left: 0
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(odd) {
        padding-left: 0
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(1) {
        order: 0
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(2) {
        padding-left: 0;
        order: 1
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(3) {
        order: 4
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(4) {
        order: 5
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(5) {
        order: 3
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(6) {
        order: 8
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(7) {
        order: 2
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(8) {
        order: 6
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(9) {
        order: 7
    }

    .main-footer .footer-content .footer-grid .footer-column:nth-of-type(10) {
        order: 9
    }

    .main-footer .footer-content .footer__headline {
        font-family: "Px Grotesk", sans-serif;
        font-size: 24px;
        margin-bottom: 20px
    }

    .main-footer .footer-content .footer-note {
        padding-top: 20px;
        margin-top: 20px
    }
}

@media screen and (max-width:850px) {
    .main-footer .footer-content .footer-note {
        flex-direction: column;
        align-items: center;
        text-align: center
    }
}

@media screen and (max-width:790px) {
    .main-footer .footer-content.desktop {
        display: none
    }

    .main-footer .footer-content.mobile {
        display: block
    }

    .main-footer .footer-content.mobile .footer-note {
        margin-top: 0
    }
}

.slider {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto
}

.slider .slides {
    position: absolute;
    display: flex;
    left: 0;
    top: 0;
    flex-direction: row;
    padding: 20px 0;
    transition: left .3s linear
}

.slider .slides .slide {
    width: calc(1000px / 3);
    padding: 0 10px;
    opacity: .3;
    transition: all .3s ease
}

.slider .slides .slide .slide-content {
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .25);
    padding: 80px 40px;
    border-radius: 10px
}

.slider .slides .slide.active {
    opacity: 1
}

.slider .slides .slide.active .slide-content {
    background-color: #000;
    color: #fff
}

.slider .slider-navigation {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.slider .slider-navigation .btn-slider-nav {
    position: relative;
    width: 33px;
    height: 33px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer
}

.slider .slider-navigation .btn-slider-nav+.btn-slider-nav {
    margin-left: 15px
}

.slider .slider-navigation .btn-slider-nav.active {
    border-color: #000;
    cursor: default
}

.slider .slider-navigation .btn-slider-nav:before {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    background-color: #f58546;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%
}

@media screen and (max-width:1055px) {
    .slider {
        height: auto !important
    }

    .slider .slides {
        position: relative;
        flex-direction: column
    }

    .slider .slides .slide {
        width: 100% !important;
        opacity: 1 !important
    }

    .slider .slides .slide .slide-content {
        padding: 20px;
        background-color: #000;
        color: #fff
    }

    .slider .slides .slide+.slide {
        margin-top: 20px
    }

    .slider .slider-navigation {
        display: none
    }
}

.spinner {
    width: 100px;
    height: 100px;
    display: flex;
    position: relative;
    justify-content: center;
    justify-items: center;
    margin: 40px auto 0
}

.spinner .loader {
    border: .6em solid #fff;
    border-radius: 50%;
    border-top: .6em solid #f58546;
    border-bottom: .6em solid #000;
    width: 60%;
    height: 60%;
    -webkit-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
    position: absolute;
    top: 2%
}

.spinner .loader2 {
    border: .2em solid #fff;
    border-radius: 50%;
    border-top: .2em solid #f58546;
    border-bottom: .2em solid #000;
    width: 95%;
    height: 95%;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
    position: absolute;
    top: -9%
}

.spinner .loader3 {
    border: .4em solid #fff;
    border-radius: 50%;
    border-bottom: .4em solid #000;
    width: 30%;
    height: 30%;
    -webkit-animation: spin-1 3s linear infinite;
    animation: spin-1 3s linear infinite;
    position: absolute;
    top: 20%;
    left: 28%
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spin-1 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-360deg)
    }
}

@keyframes spin-1 {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-360deg)
    }
}

*+.video,
.video+* {
    margin-top: var(--gutter-m)
}

.video video {
    border-radius: 10px
}

.conversation .thumbnail {
    position: absolute;
    width: 64px;
    height: 64px;
    left: 40px
}

.conversation .shadow-box {
    margin-left: 120px;
    border: 2px #000 solid;
    border-radius: 0 !important
}

.conversation .solutionQuestion {
    display: block
}

.conversation .solutionQuestion.goAway {
    display: none
}

.conversation .chatHeader {
    padding: 40px;
    background-color: #edf2e2
}

.conversation .chatHeader:first-of-type {
    border-radius: 0 !important
}

.conversation .chatHeader .h2,
.conversation .chatHeader h2 {
    margin-bottom: 0;
    font-family: apercu, sans-serif;
    font-weight: 700
}

.conversation .chatBody {
    padding: 40px
}

.conversation .accordion {
    padding: 15px;
    list-style-type: none
}

.conversation .accordion:hover {
    background-color: #fff;
    color: #000;
    border-color: #f58546
}

.conversation .accordion .title {
    padding: 0
}

.conversation .accordion .title::before {
    content: none
}

.conversation .accordion .title::after {
    content: "\e5ca";
    font-family: streamline;
    right: 15px;
    position: absolute;
    top: 15px;
    font-size: 20px;
    transform: rotate(0);
    transform-origin: 50% 50%;
    transition: .3s ease all
}

.conversation .accordion.open .title::after {
    transform: rotate(-180deg);
    transform-origin: 50% 50%
}

.conversation .accordion .content {
    padding: 0;
    margin-top: 20px
}

.conversation .noAnimation {
    -webkit-animation-name: none !important;
    animation-name: none !important
}

.conversation.chat .bg-height {
    height: 100%;
    display: none;
    min-height: 1050px
}

.conversation.chat .chatHeaderNav {
    padding-left: 100px
}

.conversation.chat .chatHeaderNav .statusbar {
    margin-bottom: 30px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    height: 36px
}

.conversation.chat .chatHeaderNav .statusbar .progress {
    margin: 11px 0 0;
    width: 70%;
    height: 14px
}

.conversation.chat .chatHeaderNav .progress {
    padding: 2px;
    background: rgba(0, 0, 0, .25);
    border-radius: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 1px rgba(255, 255, 255, .08)
}

.conversation.chat .chatHeaderNav .progress-bar {
    height: 10px;
    border-radius: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05));
    transition: .4s linear;
    transition-property: width, background-color;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .1);
    width: 2%;
    background-color: #9b870c
}

.conversation.chat .chatHeaderNav .progressValue {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px
}

.conversation.chat .go {
    display: block !important
}

.conversation.chat .goAway {
    display: none !important
}

.conversation.chat .step1 .chatHeaderNav .progress .progress-bar {
    width: 25%
}

.conversation.chat .step1 .chatHeaderNav .progress .progress-bar.start {
    width: 50%;
    background-color: #ffd82a
}

.conversation.chat .step2 .chatHeaderNav .progress .progress-bar {
    width: 50%;
    background-color: #ffd82a
}

.conversation.chat .step2 .chatHeaderNav .progress .progress-bar.start {
    width: 75%;
    background-color: #c0ff2a
}

.conversation.chat .step3 .chatHeaderNav .progress .progress-bar {
    width: 75%;
    background-color: #c0ff2a
}

.conversation.chat .step3 .chatHeaderNav .progress .progress-bar.start {
    width: 100%;
    background-color: #f58546
}

.conversation.chat .step {
    position: absolute;
    width: auto;
    width: calc(100% - 80px);
    display: none;
    padding-bottom: 40px
}

.conversation.chat .step.step1 {
    display: block
}

.conversation.chat .step--active {
    position: relative !important;
    display: block
}

.conversation.chat .form .checkboxen.grid {
    margin-bottom: initial
}

.conversation.chat .form .checkboxen .customCheckbox {
    width: 100%;
    border: 2px solid #000;
    padding: 15px;
    display: flex;
    align-items: center
}

.conversation.chat .form .checkboxen .customCheckbox .checkmark {
    display: inline-block;
    position: relative;
    padding-right: 10px;
    top: 0;
    border-radius: 0;
    margin-right: 10px
}

.conversation.chat .form .checkboxen .customCheckbox .checkmark::after {
    left: 6px;
    top: -1px;
    width: 9px;
    height: 18px;
    border: solid #000;
    border-width: 0 2px 2px 0
}

.conversation.chat .form .checkboxen .customCheckbox.checked .checkmark {
    background-color: #f58546;
    border-color: #f58546
}

.conversation.chat .form input[type=text] {
    border-color: #ccc;
    border-radius: 3px;
    padding: 20px 15px;
    font-size: 22px;
    background-color: #f9f9f9
}

.conversation.chat .form input[type=text]:focus {
    background-color: initial;
    color: #f58546
}

.conversation.chat .sl.sl-after {
    padding-right: 20px
}

.conversation.chat .sl.sl-after::after {
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.conversation.chat .smallText {
    font-size: 16px;
    color: #949faf;
    line-height: 20px
}

.conversation.chat .errorMSG {
    padding: 20px;
    background-color: #ff7762;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
    display: none;
    margin: 10px 0
}

.conversation.chat .thumbnail {
    left: 10px
}

.conversation.chat .button.silent {
    border: none;
    color: #949faf;
    text-transform: uppercase;
    font-size: 18px;
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0
}

.conversation.chat .button.silent:hover {
    transform: none;
    color: #000
}

.conversation.chat .button.silent.white:hover {
    color: #fff
}

.conversation.chat .button.silent:before {
    top: 3px
}

.conversation.chat .grid+.grid {
    margin-top: 0
}

.conversation.chat+.shadow-box {
    margin-top: 20px
}

.conversation.chat .accordion {
    border-left: 2px solid #000;
    border-bottom: none;
    margin-left: 17px;
    padding-left: 30px !important
}

.conversation.chat .accordion p {
    line-height: 1.2
}

.conversation.chat .accordion p+p {
    margin-top: 20px
}

.conversation.chat .accordion .circle {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    top: 25px;
    text-align: center;
    left: -16px;
    background-color: #fff;
    font-weight: 600;
    font-family: pxGroteskBold
}

.conversation.chat .accordion .circle::before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 2px solid #000;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 22px;
    background-color: #fff;
    font-size: 21px
}

.conversation.chat .accordion .circle.one::before {
    content: '1'
}

.conversation.chat .accordion .circle.two::before {
    content: '2'
}

.conversation.chat .accordion .circle.three::before {
    content: '3'
}

.conversation.chat .accordion .circle.four::before {
    content: '4'
}

.conversation.chat .accordion .circle.five::before {
    content: '5'
}

.conversation.chat .accordion.open .circle::before {
    background-color: #000;
    color: #fff
}

.conversation.chat .accordion.open:last-child::after {
    content: none
}

.conversation.chat .accordion::before {
    content: none
}

.conversation.chat .accordion:first-child::after {
    content: '';
    height: 30px;
    width: 6px;
    background-color: #fff;
    position: absolute;
    left: -3px;
    top: -5px
}

.conversation.chat .accordion:last-child::after {
    content: '';
    height: 19px;
    width: 6px;
    background-color: #fff;
    position: absolute;
    left: -3px;
    top: initial;
    bottom: 0
}

.conversation.chat .accordion::after {
    content: none
}

.conversation.chat .accordion .title {
    font-family: PxGroteskBold, sans-serif;
    font-size: 27px
}

.conversation.chat .accordion .title::after {
    top: 20px;
    right: 10px
}

.conversation.chat .costs {
    margin: 30px 0 0;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #000;
    justify-content: space-between
}

.conversation.chat .costs>h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 17px
}

.conversation.chat .costs>span {
    padding: 10px 20px;
    background-color: #f58546;
    margin: 0 0 0 10px;
    font-size: 16px;
    font-weight: 600
}

.conversation.chat .time {
    padding: 10px 20px;
    background-color: #e2e2e2;
    font-size: 20px;
    text-align: left;
    font-weight: 500
}

.conversation.chat .time>span {
    font-weight: 400
}

.conversation.chat .effort {
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap
}

.conversation.chat .effort>.h1 {
    font-size: 32px;
    color: initial;
    margin-bottom: 0
}

.conversation.chat .effort>span {
    font-size: 22px;
    color: #f58546
}

.conversation.chat .effort>ul {
    font-size: 22px
}

.conversation.chat .effort>.smallText {
    font-size: 12px;
    color: #949faf
}

.conversation.chat .contact {
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align: center;
    margin: 40px 0 60px
}

.conversation.chat .contact>p {
    color: #fff;
    font-size: 18px;
    line-height: 1.4
}

.conversation.chat .contact>.phonenumber {
    color: #f58546;
    font-size: 24px;
    padding: 20px 0 10px;
    display: block
}

.conversation.chat .contact>.button-set .button {
    left: initial
}

.conversation.chat .prices .grid {
    border-bottom: 2px solid #949faf;
    margin-bottom: initial;
    align-items: center
}

.conversation.chat .prices .grid .h1,
.conversation.chat .prices .grid .h3,
.conversation.chat .prices .grid h1 {
    margin-bottom: 0;
    margin-top: 0
}

.conversation.chat .prices .grid .h1 {
    font-size: 32px
}

.conversation.chat .prices .grid .col-1,
.conversation.chat .prices .grid .col-2 {
    margin-bottom: 0;
    padding: 20px 0
}

.conversation.chat .prices .grid .grid {
    border: none;
    margin-top: 0
}

.conversation.chat .prices .grid .grid .price,
.conversation.chat .prices .grid .grid .priceEntry {
    font-size: 22px
}

.conversation.chat .prices .grid .grid .price>p,
.conversation.chat .prices .grid .grid .priceEntry>p {
    font-size: 22px
}

.conversation.chat .prices .grid .grid .priceEntry>p {
    padding-left: 40px
}

.conversation.chat .prices .price,
.conversation.chat .prices .priceEntry {
    text-align: right;
    font-size: 28px;
    font-family: PxGroteskBold, sans-serif;
    line-height: 1.1
}

.conversation.chat .prices .price .more,
.conversation.chat .prices .priceEntry .more {
    color: #f58546;
    display: block;
    line-height: 1.1;
    font-size: 24px
}

.conversation.chat .prices .price p+p,
.conversation.chat .prices .priceEntry p+p {
    margin-top: 10px
}

.conversation.chat .prices .price>p,
.conversation.chat .prices .priceEntry>p {
    font-family: PxGroteskBold, sans-serif
}

.conversation.chat .prices .priceEntry {
    text-align: left
}

.conversation.chat .projectElements li {
    display: none
}

.conversation.chat .projectElements li.fixed,
.conversation.chat .projectElements li.show {
    display: block
}

@media screen and (max-width:800px) {
    .conversation .segm .accordion {
        margin: 5px 0;
        border: 2px solid #000
    }

    .conversation .segm .accordion .title {
        margin-left: initial
    }

    .conversation.chat .segm .accordion {
        border: none;
        margin-left: 17px
    }

    .conversation.chat .step {
        right: 0;
        width: 100%
    }

    .conversation.chat .button.nextStep {
        left: 0;
        position: relative
    }

    .conversation.chat .button.nextStep:focus,
    .conversation.chat .button.nextStep:hover {
        transform: none
    }

    .conversation.chat .button.silent {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .conversation.chat .time {
        font-size: 17px
    }

    .conversation.chat .smallText {
        font-weight: 400 !important
    }

    .conversation.chat .errorMSG {
        margin-top: 20px
    }
}

@media screen and (max-width:670px) {
    .conversation .thumbnail {
        position: relative;
        width: 150px;
        height: 150px;
        bottom: -50px;
        margin: -140px auto 0;
        left: 0
    }

    .conversation .shadow-box {
        margin-left: 0;
        overflow: visible
    }

    .conversation .grid .col-1:first-of-type .chatHeader {
        padding-top: 60px
    }

    .conversation.chat .thumbnail {
        margin: -80px auto 0;
        width: 150px;
        height: 150px;
        bottom: -70px;
        left: 0
    }

    .conversation.chat .result .thumbnail {
        margin: -60px auto 0;
        bottom: -70px
    }

    .conversation.chat .chatBody,
    .conversation.chat .chatHeader {
        padding: 20px
    }

    .conversation.chat form .checkboxen .customCheckbox .pl {
        width: calc(100% - 35px)
    }

    .conversation.chat .accordion {
        padding-left: 20px !important;
        padding-right: 15px !important
    }

    .conversation.chat .accordion:first-child::after {
        height: 18px
    }

    .conversation.chat .accordion:last-child::after {
        height: 15px
    }

    .conversation.chat .accordion .circle {
        top: 13px
    }

    .conversation.chat .accordion .title {
        font-size: 18px
    }

    .conversation.chat .accordion .title::after {
        top: 8px
    }

    .conversation.chat .time {
        font-size: 18px;
        padding: 5px 10px
    }

    .conversation.chat .costs {
        flex-direction: column-reverse
    }

    .conversation.chat .costs>h3 {
        padding: 10px 10px;
        border-top: 2px solid #000;
        margin-bottom: 0;
        width: 100%;
        font-size: 16px
    }

    .conversation.chat .costs>span {
        align-self: flex-end;
        padding: 5px 10px;
        font-size: 16px
    }

    .conversation.chat .effort>.h1 {
        font-size: 22px
    }

    .conversation.chat .effort>span {
        font-size: 18px
    }

    .conversation.chat .effort>ul {
        font-size: 16px
    }

    .conversation.chat .prices .grid .col-1 {
        width: 100%
    }

    .conversation.chat .prices .grid .col-2 {
        width: initial
    }

    .conversation.chat .prices .grid>.h3 {
        font-size: 18px
    }

    .conversation.chat .prices .grid>.h1 {
        font-size: 24px
    }

    .conversation.chat .prices .grid .price {
        font-size: 24px
    }

    .conversation.chat .prices .grid .price>.more {
        font-size: 18px
    }

    .conversation.chat .prices .grid .grid .priceEntry>p {
        font-size: 18px
    }
}

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

    .conversation .chatBody,
    .conversation .chatHeader {
        padding: 20px
    }

    .conversation .content {
        padding: 0
    }

    .conversation.chat .chatBody,
    .conversation.chat .chatHeader {
        padding: 20px 10px
    }

    .conversation.chat form .checkboxen .customCheckbox .pl {
        font-size: 16px
    }

    .conversation.chat .time {
        font-size: 14px
    }

    .conversation.chat .time>span {
        display: block
    }

    .conversation.chat .costs>h3 {
        font-size: 14px
    }

    .conversation.chat .costs>span {
        font-size: 14px
    }

    .conversation.chat .prices .grid>.h3 {
        font-size: 12px
    }

    .conversation.chat .prices .grid>.h1 {
        font-size: 16px
    }

    .conversation.chat .prices .grid .price {
        font-size: 16px
    }

    .conversation.chat .prices .grid .price>.more {
        font-size: 12px
    }

    .conversation.chat .prices .grid .grid .price>p,
    .conversation.chat .prices .grid .grid .priceEntry>p {
        font-size: 13px
    }
}

.compare {
    margin: 40px 0
}

.compare__header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px
}

.compare__switch {
    padding: 0 90px
}

.compare__switch input {
    display: none
}

.compare__switch input+label {
    position: relative;
    display: block;
    width: 72px;
    height: 40px;
    background-color: #c4c4c4;
    cursor: pointer;
    border-radius: 22px;
    transition: all .3s ease
}

.compare__switch input+label:before {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    background-color: #484848;
    border-radius: 50%;
    transition: all .3s ease
}

.compare__switch input:checked+label {
    background-color: #f58546
}

.compare__switch input:checked+label:before {
    background-color: #fff;
    right: 36px
}

.compare__content {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center
}

.compare__content--active {
    display: flex
}

.compare__content:before {
    content: "";
    display: block;
    width: 100%;
    height: 53px;
    background-image: url('../images/softphone/klammer.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.compare__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: calc(33% - 20px);
    background-color: #fff;
    border: 2px solid #000;
    box-shadow: 0 2px 30px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .1);
    border-radius: 8px;
    padding: 20px;
    margin: 10px;
    flex: 0 1 calc(33% - 20px)
}

.compare__info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: auto
}

.compare__info+.compare__info {
    margin-top: 10px
}

.compare__icon {
    width: 40px;
    margin-right: 10px;
    text-align: center
}

.compare__icon img {
    display: block
}

.compare__text {
    flex: 1;
    line-height: 22px
}

.compare__text h3 {
    font-size: 20px
}

@media screen and (max-width:1000px) {
    .compare__box {
        min-width: calc(50% - 20px);
        flex: 0 1 calc(50% - 20px)
    }
}

@media screen and (max-width:768px) {
    .compare__content {
        flex-direction: column
    }

    .compare__box {
        min-width: 100%;
        flex: 0 1 100%
    }
}

.contactpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
    color: #fff;
    padding: 115px 20px
}

.contactpage__header {
    max-width: 570px;
    width: 100%;
    text-align: center;
    padding-bottom: 80px
}

.contactpage__header h1 {
    font-family: apercu, sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 18px
}

.contactpage__header h2 {
    font-family: apercu, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4
}

.contactpage__content {
    width: 100%;
    max-width: 830px
}

.contactpage__content h2 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 33px;
    margin-bottom: 42px;
    text-align: center
}

.contactpage__footer {
    width: 100%;
    max-width: 830px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 70px 0;
    text-align: center
}

.contactpage__footer>div {
    flex: 1
}

.contactpage__footer h3 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px
}

.contactpage__footer a {
    border-bottom: 2px solid #f58546;
    color: #fff;
    font-size: 18px
}

.contactpage__footer a:hover {
    border-color: #fff
}

.contactoption {
    display: flex;
    flex-direction: column;
    border: 2px solid #fff;
    border-radius: 10px;
    margin-bottom: 25px;
    color: #fff;
    opacity: .5;
    transition: opacity .3s ease
}

.contactoption--highlight {
    background-color: #fff;
    color: #000;
    opacity: 1
}

.contactoption:hover {
    opacity: 1
}

.contactoption__header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 30px;
    cursor: pointer
}

.contactoption__icon {
    width: 70px
}

.contactoption__text {
    flex: 1;
    padding: 0 30px;
    font-family: apercu, sans-serif;
    font-size: 18px;
    line-height: 1.6
}

.contactoption__text strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px
}

.contactoption__content {
    display: none;
    padding: 30px
}

.contactoption__content>p {
    margin-bottom: 25px
}

.contactoption__content>p a {
    color: #f58546
}

.contactoption__content>p a:hover {
    color: #000
}

.contactoption__form--hide {
    display: none
}

.contactoption__form--error,
.contactoption__form--success {
    background-color: #edf2e2;
    border-radius: 6px;
    padding: 50px 20px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.contactoption__form--error img,
.contactoption__form--success img {
    display: block;
    width: 96px;
    margin-bottom: 20px
}

.contactoption__form--error h2,
.contactoption__form--error p,
.contactoption__form--success h2,
.contactoption__form--success p {
    max-width: 435px;
    width: 100%;
    text-align: center
}

.contactoption__form--error h2,
.contactoption__form--success h2 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 33px;
    margin-bottom: 15px
}

.contactoption__form--error p,
.contactoption__form--success p {
    font-family: apercu, sans-serif;
    font-size: 24px;
    line-height: 1.6
}

.contactoption__form--error {
    background-color: #ff7762;
    padding: 10px;
    margin-bottom: 25px
}

.contactoption__form--error h2 {
    font-size: 18px;
    margin-bottom: 10px
}

.contactoption__form--error p {
    font-size: 16px
}

.contactoption--closed {
    display: block
}

.contactoption--open {
    display: none
}

.contactoption__checkbox {
    display: none
}

.contactoption__checkbox:checked+.contactoption {
    background-color: #fff;
    color: #000;
    opacity: 1
}

.contactoption__checkbox:checked+.contactoption .contactoption__content {
    display: block
}

.contactoption__checkbox:checked+.contactoption .contactoption--closed {
    display: none
}

.contactoption__checkbox:checked+.contactoption .contactoption--open {
    display: block
}

@media screen and (max-width:560px) {
    .contactpage {
        padding: 50px 20px
    }

    .contactpage__header {
        text-align: left;
        padding-bottom: 30px
    }

    .contactpage__header h1 {
        font-size: 30px
    }

    .contactpage__header h2 {
        font-size: 16px
    }

    .contactpage__content h1 {
        font-size: 24px;
        text-align: left
    }

    .contactpage__footer {
        padding: 35px 0
    }

    .contactpage__footer h3 {
        font-size: 20px;
        line-height: 24px
    }

    .contactpage__footer a {
        font-size: 14px
    }

    .contactoption__header {
        padding: 15px
    }

    .contactoption__icon {
        width: 50px
    }

    .contactoption__text {
        padding: 0 15px;
        font-size: 14px
    }

    .contactoption__text strong {
        font-size: 18px
    }

    .contactoption__content {
        padding: 15px
    }

    .contactoption__form>div+div {
        margin-top: 15px
    }

    .contactoption__form button {
        margin-top: 15px
    }

    .contactoption__form--success {
        padding: 80px 20px
    }

    .contactoption__form--success h2 {
        font-size: 24px;
        line-height: 29px;
        margin-bottom: 10px
    }

    .contactoption__form--success p {
        font-size: 20px
    }
}

html {
    overflow-x: hidden
}







.submenu__left .submenu__link {
    align-items: center
}

.submenu__left .submenu__column--border-right {
    border-right: 2px solid rgba(255, 255, 255, .2)
}




main {
    flex: 1
}

.form-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.form-switch i {
    position: relative;
    display: inline-block;
    margin-right: .5rem;
    width: 46px;
    height: 26px;
    background-color: #e6e6e6;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all .3s linear
}

.form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transition: all .25s linear
}

.form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .24);
    transform: translate3d(2px, 2px, 0);
    transition: all .2s ease-in-out
}

.form-switch:active i::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0)
}

.form-switch:active input:checked+i::after {
    transform: translate3d(16px, 2px, 0)
}

.form-switch input {
    display: none
}

.form-switch input:checked+i {
    background-color: #4bd763
}

.form-switch input:checked+i::before {
    transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0)
}

.form-switch input:checked+i::after {
    transform: translate3d(22px, 2px, 0)
}




.lp--vb-preise .section--light-green-white {
    background: #000
}

.lp--vb-preise .section * {
    color: #fff
}

.lp--vb-preise .tooltip--dark,
.lp--vb-preise .vb-additional__info {
    background: #4d4d4d
}

.lp--vb-preise .hero__image {
    display: none
}

.lp--vb-preise .hero__text>.tag {
    background: #f58546;
    color: #000
}


.lp--vb-preise .vb-additional,
.lp--vb-preise .vb-package {
    border: 2px solid #303030;
    color: #fff;
    background: #161616
}

.lp--vb-preise .vb-additional,
.lp--vb-preise .vb-additional *,
.lp--vb-preise .vb-package,
.lp--vb-preise .vb-package * {
    color: #fff !important
}

.lp--vb-preise .vb-package:before {
    color: #000
}

.lp--vb-preise .vb-additional:before {
    border-color: #fff
}

.lp--vb-preise .vb-additional__info.tooltip--info {
    border: 2px solid #fff;
    background: 0 0;
    color: #fff !important;
    width: 1.2rem;
    height: 1.2rem
}

.lp--vb-preise .vb-additional__info.tooltip--info:before {
    top: 55%;
    font-weight: 700
}

.lp--vb-preise .vb-additionals .vb-additional {
    aspect-ratio: unset
}

@media (min-width:600px) {
    .lp--vb-preise .vb-additionals .vb-additional {
        width: calc(33% - 8px)
    }
}

.lp--vb-preise .vb-additionals h4 {
    margin-top: .5rem
}

.lp--vb-preise .vb-additionals input:checked+.vb-additional {
    border-color: #e1fbc8;
    background-color: #e1fbc8
}

.lp--vb-preise .vb-additionals input:checked+.vb-additional *,
.lp--vb-preise .vb-additionals input:checked+.vb-additional .tooltip--info:before {
    border-color: #000 !important;
    color: #000 !important
}

.lp--vb-preise .vb-additionals input:checked+.vb-additional .tooltip__content {
    color: #fff !important
}

.lp--vb-preise .vb-additionals input:checked+.vb-additional .vb-count__button {
    background: #fff;
    color: #000 !important;
    border: 1px solid #000
}

.lp--vb-preise .vb-additionals input:checked+.vb-additional:before {
    content: "";
    background: url('checkmark-symble.svg') no-repeat center;
    background-size: 15px;
    background-color: #000;
    border-color: #000;
    font-weight: 900
}

.lp--vb-preise .list-line-cart {
    display: none
}

.lp--vb-preise .cart-icon-img {
    width: 20px !important;
    height: 20px;
    display: block;
    background-size: 20px auto !important
}

.lp--vb-preise .cart-icon-img.gauge-img-cr {
    background: url('icon-gauge.svg') no-repeat center
}

.lp--vb-preise .cart-icon-img.phone-img-cr {
    background: url('icon-phone.svg') no-repeat center
}

.lp--vb-preise .cart-icon-img.message-img-cr {
    background: url('icon-message.svg') no-repeat center
}

.lp--vb-preise .checkout-full-width {
    width: 100%
}

.lp--vb-preise .checkout-full-width .cart-icon-img.gauge-img-cr {
    background: url('icon-gauge-gry.svg') no-repeat center
}

.lp--vb-preise .checkout-full-width .cart-icon-img.phone-img-cr {
    background: url('icon-phone-gry.svg') no-repeat center
}

.lp--vb-preise .checkout-full-width .cart-icon-img.message-img-cr {
    background: url('icon-message-gry.svg') no-repeat center
}

.lp--vb-preise .checkout-full-width .vb-cart {
    background-color: rgba(255, 255, 255, .1);
    margin-bottom: 60px
}

.lp--vb-preise .checkout-full-width .vb-cart-container * {
    color: #fff
}

.lp--vb-preise .checkout-full-width .vb-cart__right .btn--primary {
    display: none
}

.lp--vb-preise .checkout-full-width .vb-cart__right>.vb-cart__content {
    border-top: 1px solid #363636;
    margin-top: 20px
}

.lp--vb-preise .checkout-full-width .vb-cart__right>.vb-cart__content a+p.centered {
    display: none
}

.lp--vb-preise .checkout-full-width .vb-selection__price strong {
    font-size: 24px
}

.lp--vb-preise .checkout-full-width .list-line-cart {
    display: block
}

.lp--vb-preise .checkout-full-width .vb-cart__info br {
    display: none
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c {
    display: flex
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c .vb-cart__right {
    width: 50%
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c>.vb-cart__content {
    width: 50%
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c .vb-selection-attributes * {
    font-size: 1rem
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c .vb-selection-attributes * .co-grid {
    padding-bottom: 12px
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c .list-line-cart {
    list-style: none
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c .list-line-cart li {
    font-size: .9rem !important;
    padding-bottom: .2rem
}

.lp--vb-preise .checkout-full-width .vb-cart-wrap_c .list-line-cart li:before {
    content: "+";
    margin-right: 6px;
    font-size: 17px
}

.lp--vb-preise .checkout-full-width .btn--full-width {
    width: auto
}

.lp--vb-preise .checkout-full-width .btn--full-width:hover {
    background-color: #fff;
    color: #000
}

.lp--vb-preise .vb-cart-container * {
    color: #000
}

.lp--vb-preise .vb-package__ribbon {
    color: #000 !important;
    transform: translateY(calc(-100% - 2px))
}

.lp--vb-preise .vb-count__button {
    background: #f58546;
    color: #000 !important
}

.lp--vb-preise .btn--primary {
    color: #000
}

.lp--vb-preise .floating-form__field {
    border: unset
}

.lp--vb-preise .floating-form__field input {
    background: #2c2c2c;
    color: #fff;
    border-radius: 4px
}

.lp--vb-preise .floating-form__field label {
    background: #2c2c2c;
    color: #7e7e7e;
    border-radius: 4px
}

.lp--vb-preise .floating-form__privacy-toggle input+label {
    background: #2c2c2c;
    color: #fff
}

.lp--vb-preise .floating-form__privacy-toggle * {
    color: #fff !important
}

.lp--vb-preise .floating-form__privacy-toggle input+label:before {
    border: 2px solid #fff;
    border-radius: 4px
}

.lp--vb-preise .floating-form__checkbox input+label:before {
    border: 2px solid #fff;
    border-radius: 4px
}

.lp--vb-preise .list--checkmarks li:before,
.lp--vb-preise .list--checkmarks-top li:before {
    background-image: url('check-green-black.svg')
}

.lp--vb-preise .floating-form__checkbox input:checked+label:before {
    background: url('checkmark-symble.svg') no-repeat center;
    background-size: .85rem
}

.lp--vb-preise .vb-cart-container {
    transform: none;
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 10rem !important;
    height: auto
}

.lp--vb-preise.body {
    overflow: unset !important
}

.lp--vb-preise .vb-package {
    width: auto;
    margin: 0
}

.lp--vb-preise [data-price=individuell] {
    width: 100%;
    background: #161616;
    border-color: #303030
}

.lp--vb-preise [data-price=individuell] .vb-package__price {
    font-size: 1.5rem
}

.lp--vb-preise .vb-packages {
    display: block
}

.lp--vb-preise .vb-packages .vb-grid {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    -moz-column-gap: .5rem;
    column-gap: .5rem;
    margin-bottom: .5rem;
    grid-auto-flow: column
}

@media (max-width:600px) {
    .lp--vb-preise .vb-packages .vb-grid {
        display: block
    }
}

.lp--vb-preise .vb-cart__content {
    margin-bottom: 1rem
}

.lp--vb-preise .vb-cart {
    width: 100%
}

.lp--vb-preise .floating-form__checkbox label {
    display: inline-block
}

.lp--vb-preise #vb_intro-text h2 {
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: -.5rem;
    margin-top: 3rem
}

.lp--vb-preise #vb_intro-text li,
.lp--vb-preise #vb_intro-text p {
    font-size: 1rem
}

.lp--vb-preise #vb_intro-text li.list-upd:before,
.lp--vb-preise #vb_intro-text p.list-upd:before {
    left: 0;
    top: .15rem
}

.lp--vb-preise #vb_intro-text p {
    margin-bottom: -1rem
}

.lp--vb-preise .floating-form__checkbox input {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    transform: none;
    opacity: 0;
    position: absolute;
    left: 6px;
    top: 19px
}

.lp--vb-preise .vb-cart-mobile * {
    COLOR: #000 !important
}

@media (max-width:600px) {
    .lp--vb-preise .vb-package {
        margin-bottom: 2rem
    }
}

@media (max-width:600px) {
    .lp--vb-preise #vb-choosing h2 {
        text-align: left
    }
}

.lp--vb-preise #vb-choosing .praxis {
    display: none
}

@media (max-width:600px) {
    .lp--vb-preise .list--checkmarks {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 2rem
    }

    .lp--vb-preise .list--checkmarks li {
        margin-left: 0
    }
}

.lp--vb-preise .price-popup-style .floating-form__field input {
    background: #fff;
    height: 38px;
    color: #000;
    padding: 5px 25px;
    font-size: 13px;
    border: 2px solid #c4c4c4
}

.lp--vb-preise .price-popup-style .floating-form__field textarea {
    border: 2px solid #c4c4c4;
    border-radius: 5px;
    font-size: 13px
}

.lp--vb-preise .price-popup-style .floating-form__field label {
    background: #fff;
    top: 9px;
    font-size: 13px
}





@font-face {
    font-family: gordita;
    font-style: normal;
    font-weight: 400;
    src: local("gordita regular"), url('../fonts/gorditar-regular.woff') format("woff")
}

@font-face {
    font-family: gordita;
    font-style: normal;
    font-weight: 700;
    src: local("gordita bold"), url('../fonts/gordita-bold.woff') format("woff")
}

body.lp--inopla-style * {
    font-family: gordita, sans-serif !important
}

body.lp--inopla-style .main-footer,
body.lp--inopla-style .navigation,
body.lp--inopla-style .navigation-spacer,
body.lp--inopla-style .navigation__shadow {
    display: none !important
}

body.lp--inopla-style .btn--primary,
body.lp--inopla-style .vb-package__ribbon {
    background-color: #ff4547;
    color: #fff !important
}

body.lp--inopla-style .section,
body.lp--inopla-style .section--black,
body.lp--inopla-style .section--light-green-white {
    background: #091433 !important
}

body.lp--inopla-style .section h1 {
    font-weight: 700;
    max-width: 54rem !important
}

body.lp--inopla-style .section h1 .highlight {
    background-image: none
}

body.lp--inopla-style #vb_intro-text .co-grid {
    max-width: inherit !important
}

body.lp--inopla-style #vb_intro-text li,
body.lp--inopla-style #vb_intro-text p {
    font-size: .95rem;
    line-height: 1.6rem
}

body.lp--inopla-style #vb-choosing .centered {
    text-align: left;
    font-weight: 700
}

body.lp--inopla-style #vb-choosing ul.list--checkmarks {
    justify-content: left !important
}

body.lp--inopla-style #vb-choosing ul.list--horizontal li {
    font-weight: 700
}

body.lp--inopla-style .list--checkmarks li::before {
    background-image: url('check-inopla.svg');
    width: 1.4em;
    height: 1.4em;
    top: .05rem
}

body.lp--inopla-style .tooltip--light {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, .4)
}

body.lp--inopla-style .tooltip::before {
    color: rgba(255, 255, 255, .4)
}

body.lp--inopla-style .tooltip>* {
    background-color: #fff;
    border: none;
    color: #000 !important;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: .7rem
}

body.lp--inopla-style .tooltip>::before {
    border-bottom: 15px solid #fff
}

body.lp--inopla-style .tooltip>::after {
    border-bottom: 18px solid #fff
}

body.lp--inopla-style .vb-additional__info.tooltip--info {
    margin-top: -4px
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional>* {
    border-color: #fff !important;
    color: #fff !important
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional font {
    border-color: #fff !important;
    color: #fff !important
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional .tooltip__content {
    color: #000 !important
}

body.lp--inopla-style .vb-additional .tooltip::before {
    color: #fff
}

body.lp--inopla-style .vb-additional,
body.lp--inopla-style .vb-package {
    border: 2px solid transparent;
    background: #2b3655
}

body.lp--inopla-style .vb-package h4 {
    font-weight: 700;
    font-size: 1rem
}

body.lp--inopla-style .vb-package .vb-package__price {
    font-size: 2rem;
    font-weight: 700
}

body.lp--inopla-style .vb-package .vb-package__price em {
    font-weight: 700
}

body.lp--inopla-style .vb-package::before {
    border: 1px solid transparent
}

body.lp--inopla-style .vb-package ul li {
    font-size: .6rem
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional .vb-count__button {
    border: 1px solid transparent !important
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional .vb-count__current {
    color: #fff !important
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional .vb-count__button font {
    color: #000 !important
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional .vb-count__button font {
    color: #000 !important
}

body.lp--inopla-style .vb-cart-container * {
    line-height: 1rem;
    font-size: .7rem;
    color: #091433
}

body.lp--inopla-style .vb-cart__content h5 {
    font-size: 2rem;
    line-height: 2.8rem
}

body.lp--inopla-style .vb-cart-container strong,
body.lp--inopla-style .vb-cart__content h5 {
    font-weight: 700
}

body.lp--inopla-style .vb-packages input:checked+.vb-package {
    border-color: #c9c9c9
}

body.lp--inopla-style .vb-packages input:checked+.vb-package::before {
    background-size: 15px !important;
    background: url('checkmark-inopla.svg') no-repeat center;
    background-color: transparent;
    border: 2px solid #ff4646
}

body.lp--inopla-style .vb-additionals h2 {
    font-weight: 700
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional {
    border-color: #ff4646;
    background-color: #ff4646
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional::before {
    content: "";
    background: url('checkmark-inopla-white.svg') no-repeat center;
    background-size: 15px;
    background-color: #2b3655;
    border-color: #2b3655
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional>* {
    border-color: #fff !important;
    color: #fff !important
}

body.lp--inopla-style .vb-additionals input:checked+.vb-additional .tooltip--info::before {
    border-color: #fff !important;
    color: #fff !important
}

body.lp--inopla-style .section--black-corner::before {
    display: none
}

body.lp--inopla-style .vb-additional::before {
    border-color: #fff
}

body.lp--inopla-style .vb-additional h4 {
    font-weight: 700;
    font-size: .9rem
}

body.lp--inopla-style .vb-additional__price {
    font-size: .8rem
}

body.lp--inopla-style .vb-count__button {
    background: #fff;
    color: #000 !important;
    font-weight: 700
}

body.lp--inopla-style .section--black {
    background: #fff !important
}

body.lp--inopla-style .section--black * {
    color: #091433
}

body.lp--inopla-style .section--black h2 {
    font-weight: 700;
    font-size: 2rem
}

body.lp--inopla-style #checkout-wrap-stps h2 {
    font-weight: 700
}

body.lp--inopla-style #checkout-wrap-stps h3 {
    font-weight: 700
}

body.lp--inopla-style .toggle-box input+label {
    background: #f5f6fa;
    padding: 30px 40px;
    padding-left: calc(16px + 00px + 20px);
    padding-right: 70px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 6px
}

body.lp--inopla-style .toggle-box input+label::before {
    background-image: url('arrow-down.svg');
    right: 30px;
    left: inherit;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 24px
}

body.lp--inopla-style .toggle-box input:checked+label::before {
    transform: rotate(180deg);
    margin-top: -10px
}

body.lp--inopla-style .toggle-box.active input+label {
    border-radius: 6px 6px 0 0
}

body.lp--inopla-style .checkout-full-width .btn--full-width {
    width: auto;
    border-radius: 8px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700
}

body.lp--inopla-style .checkout-full-width .btn--full-width:hover {
    background: #ff4547
}

body.lp--inopla-style .checkout-full-width .vb-cart__right>.vb-cart__content {
    border-top: 1px solid rgba(255, 255, 255, .08)
}

body.lp--inopla-style .checkout-full-width .cart-icon-img.gauge-img-cr {
    background-image: url('minuten-ink-icon.svg')
}

body.lp--inopla-style .checkout-full-width .cart-icon-img.phone-img-cr {
    background-image: url('calender-monate.svg')
}

body.lp--inopla-style .checkout-full-width .cart-icon-img.message-img-cr {
    background-image: url('phone-icon-spr.svg')
}

body.lp--inopla-style .toggle-box--on-black input+label::before {
    filter: none
}

body.lp--inopla-style .toggle-box__content {
    background: #f5f6fa;
    padding-left: 38px !important;
    border-radius: 0 0 6px 6px
}

body.lp--inopla-style .btn-next-step {
    border-radius: 8px;
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0
}

body.lp--inopla-style .vb-progress::after {
    background: #ff4646
}

body.lp--inopla-style .vb-progress__step--active::before {
    background-color: #ff4646;
    border-color: #ff4646
}

body.lp--inopla-style .floating-form__field input {
    background: #1c2643
}

body.lp--inopla-style .floating-form__field label {
    background: #1c2643;
    color: #72798b
}

body.lp--inopla-style .floating-form__checkbox input:checked+label::before {
    background: url('checkmark-inopla.svg') no-repeat center;
    background-size: 16px
}

body.lp--inopla-style .tracked-ipokla {
    font-size: .9rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
    border-radius: 8px;
    border: none
}

body.lp--inopla-style .toggle-box--on-black {
    background-color: transparent
}

body.lp--inopla-style label[for=package-3],
body.lp--inopla-style label[for=vb-additional-10],
body.lp--inopla-style label[for=vb-additional-11] {
    display: none
}

body.lp--inopla-style #package-3,
body.lp--inopla-style #vb-additional-2,
body.lp--inopla-style label[for=package-3],
body.lp--inopla-style label[for=vb-additional-2] {
    display: none
}

@media screen and (max-width:600px) {
    body.lp--inopla-style .vb-cart-mobile * {
        color: #091433 !important
    }

    body.lp--inopla-style .toggle-box input+label {
        padding: 20px 40px;
        padding-left: calc(0px + 0px + 20px)
    }

    body.lp--inopla-style .toggle-box .toggle-box__content {
        padding-left: 20px !important
    }

    body.lp--inopla-style .vb-cart-mobile {
        border-top: 2px solid #ff4646;
        background-color: #fff;
        box-shadow: none
    }

    body.lp--inopla-style .vb-cart-mobile h6 {
        font-size: 1.1rem;
        text-transform: none;
        letter-spacing: 0;
        opacity: 1
    }

    body.lp--inopla-style .checkout-full-width .vb-cart-wrap_c .list-line-cart li {
        line-height: 1.2rem
    }

    body.lp--inopla-style .toggle-box input+label::before {
        right: 15px;
        background-size: 18px;
        width: 18px;
        height: 18px
    }
}




body.lp--doctors-page .white-doctor-top-bar {
    background: #2454c6;
    padding: 16px 30px;
    margin-top: 42px;
    z-index: 9;
    position: relative
}

body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing {
    list-style: none;
    align-items: center;
    justify-content: center;
    max-width: 1170px;
    margin: 0 auto;
    justify-content: space-around
}

body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list {
    padding: 0 10px;
    font-size: .9rem;
    text-align: center;
    color: #fff
}

body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list a {
    color: #fff;
    text-decoration: underline
}

body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list .doctor-fix-bar-img {
    max-height: 27px;
    vertical-align: top;
    max-width: 150px;
    height: auto
}





body.lp--doctors-page h1.hero-headline .highlight {
    --color: #ffffff;
    background-image: linear-gradient(to right, var(--color), var(--color))
}

body.lp--doctors-page .doctor-centered {
    justify-content: center
}

body.lp--doctors-page .btn--primary--hero {
    background-color: #fff;
    color: #2d6af9;
    border: 1px solid #fff;
    font-size: 1.05rem;
    padding: 12px 35px;
    box-shadow: 0 0 56px #2d6af9
}

body.lp--doctors-page .btn--primary--hero:hover {
    background: 0 0;
    color: #fff
}



body.lp--doctors-page .btn--primary {
    background-color: #2d6af9;
    color: #fff;
    border-color: #2d6af9;
    font-size: 1.05rem;
    padding: 12px 35px
}

body.lp--doctors-page .btn--primary:hover {
    background: 0 0
}



body.lp--doctors-page .digital_practice_section {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%
}

body.lp--doctors-page .digital_practice_section img {
    width: 100%;
    height: auto
}

body.lp--doctors-page .digital_practice_section .digital-practice-img-new {
    position: absolute;
    top: -2px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 32%;
    object-position: 50% 32%
}

@media (max-width:480px) {
    body.lp--doctors-page .digital_practice_section .digital-practice-img-new {
        -o-object-position: 30% 32%;
        object-position: 30% 32%
    }
}

body.lp--doctors-page .digital_practice_section .co-grid__col--53 {
    width: 53% !important
}

@media (max-width:480px) {
    body.lp--doctors-page .digital_practice_section .co-grid__col--53 {
        width: 75% !important
    }
}

@media (max-width:960px) {
    body.lp--doctors-page .digital_practice_section .bigtext {
        font-size: .75rem !important;
        max-width: 80%
    }
}

body.lp--doctors-page .digital_practice_section .hero-headline {
    font-size: 2.8rem;
    line-height: 3.5rem;
    padding-top: 20px;
    letter-spacing: 1px;
    margin-bottom: 2.5rem
}

@media (max-width:1280px) {
    body.lp--doctors-page .digital_practice_section .hero-headline {
        font-size: 2.1rem;
        line-height: 2.6rem;
        max-width: 32rem
    }
}

@media (max-width:960px) {
    body.lp--doctors-page .digital_practice_section .hero-headline {
        font-size: 1.35rem;
        text-shadow: 0 0 1rem #fff;
        margin-bottom: 0
    }
}




body.lp--doctors-page .doctor_review_container {
    background-color: #191919;
    border-radius: 35px;
    margin-top: -60px;
    z-index: 9;
    position: relative;
    padding: 5px 25px
}

body.lp--doctors-page .doctor_review_container .listing-review-star {
    list-style: none
}

body.lp--doctors-page .doctor_review_container .listing-review-star-list {
    padding-right: 5px
}

body.lp--doctors-page .doctor_review_container .review_para {
    font-size: .7rem;
    padding: .6rem 0;
    color: #fff
}

body.lp--doctors-page .doctor_review_container .author-box {
    align-items: center
}

body.lp--doctors-page .doctor_review_container .author-box .right-content {
    padding-left: 10px;
    display: flex;
    flex-direction: column
}

body.lp--doctors-page .doctor_review_container .author-box .right-content .review-author-name {
    font-size: .7rem;
    color: #7b7b7b;
    margin-bottom: 0;
    font-weight: 700
}

body.lp--doctors-page .doctor_review_container .author-box .right-content .review-author-designation {
    font-size: .6rem;
    color: #7b7b7b
}

body.lp--doctors-page .help-practice-step-one-right .btn--primary {
    text-transform: initial;
    font-size: .65rem;
    font-weight: 700;
    padding: 8px 20px
}

body.lp--doctors-page .help-practice-step-one-right .btn--primary:hover {
    background-color: #000
}

body.lp--doctors-page .help-practice-step-one-right .btn--primary .call-btn-img {
    vertical-align: bottom;
    max-width: 14px
}

body.lp--doctors-page .doctor-first-section--doctor {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 4rem !important
}

body.lp--doctors-page .doctor-first-section--doctor .bigtext {
    font-size: 1.1rem
}

body.lp--doctors-page .doctor-first-section--doctor .blue-hilight {
    color: #2d6af9;
    font-size: 1.1rem;
    padding-bottom: 1.5rem
}

body.lp--doctors-page .doctor-first-section--doctor .innovation-headline {
    font-size: 2.5rem;
    margin-bottom: 5px
}

body.lp--doctors-page .doctor-first-section--doctor .innovation-headline u {
    border-bottom: 4px solid #2d6af9 !important
}

body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .innovation-headline {
    padding: 0 5rem
}

body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .innovation-headline span {
    display: block
}

body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .bigtext {
    padding: 0 14rem
}

body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .blue-hilight {
    padding-bottom: 1.5rem
}

body.lp--doctors-page .review_testimonial_container .section__content--wide {
    padding-left: 15px;
    padding-right: 15px
}

body.lp--doctors-page .doctor-first-section {
    padding-left: 0;
    padding-right: 0
}

body.lp--doctors-page .doctor-first-section .section__content--wide {
    padding: 0 15px
}

body.lp--doctors-page .doctor-first-section .innovation-main-section {
    padding-top: 6rem
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .innovation_wrap_left {
    padding-right: 50px
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .innovation-sub-headline {
    font-size: 1.5rem;
    margin-bottom: 5px
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .bigtext {
    font-size: .9rem;
    line-height: 1.1rem
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .blue-hilight {
    color: #2d6af9;
    padding-bottom: .8rem
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .btn--primary {
    text-transform: inherit
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .machineless_automation_video .video_circle_box {
    background: #2d6af9
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .machineless_automation_video .video_circle_box .video-play-icon {
    border-left-color: #fff
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .machineless_automation_video .video-img {
    max-width: 100%
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .dsgvo_video_caption {
    position: absolute;
    background: #2d6af9;
    padding: 10px;
    border-radius: 9999px;
    bottom: 4px;
    font-size: .9rem;
    color: #fff;
    left: 20%;
    right: 20%
}

body.lp--doctors-page .doctor-first-section .innovation-main-section .dsgvo_video_caption strong {
    display: block
}





body.lp--doctors-page .doctor-help-section--doctor .innovation-headline {
    font-size: 2.7rem
}


body.lp--doctors-page .doctor-help-section--doctor .blue-hilight {
    color: #2d6af9;
    font-size: .9rem;
    padding-bottom: .6rem
}

body.lp--doctors-page .doctor-help-section--doctor .green-hilight {
    color: #6ddd14;
    font-size: .9rem;
    padding-bottom: .6rem
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-right {
    padding-top: 20px
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-right .smltext {
    font-size: .8rem
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left {
    position: relative
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left .help-images-person-img {
    position: relative;
    z-index: 10
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left .help-images-person-img img {
    max-width: 380px;
    height: auto
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left .call-help-bg-line1 {
    position: absolute;
    z-index: 9;
    left: 14%;
    top: 57%;
    width: 480px
}



body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2-middle {
    position: relative
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2-middle .step-line3-btn-img {
    position: absolute;
    max-width: 1048px;
    height: auto;
    right: 25px;
    top: -189px;
    z-index: 0
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2_inner {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2_inner .smltext {
    font-size: .8rem;
    padding: 0 5rem
}



body.lp--doctors-page .doctor-help-section--doctor .help-practice-step4-right .smltext {
    font-size: .8rem
}

body.lp--doctors-page .doctor-help-section--doctor .help-practice-step4-right .border-step-last {
    border: 1px solid #707070;
    padding: 10px;
    border-radius: 9px;
    margin: 10px 0 0 -10px
}

#post-navigation body.lp--doctors-page .current,
#post-navigation body.lp--doctors-page .dots,
#post-navigation body.lp--doctors-page a,
body.lp--doctors-page #post-navigation .current,
body.lp--doctors-page #post-navigation .dots,
body.lp--doctors-page #post-navigation a,
body.lp--doctors-page .btn {
    letter-spacing: 0
}

body.lp--doctors-page .humanlike_container {
    background-color: #2d6af9;
    padding-bottom: 0
}

body.lp--doctors-page .humanlike_container .human-wrap-left {
    margin-bottom: 0;
    padding-top: 4rem;
    padding-bottom: 4rem
}

body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg {
    margin: 0 auto
}

body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg .btn--default {
    background-color: #000;
    color: #fff;
    border-color: #2d6af9;
    padding: 24px 50px;
    text-transform: inherit;
    font-weight: 700
}

body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg .btn--default:hover {
    background: #fff;
    color: #000
}

body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg .btn--default:hover img {
    filter: invert(1)
}

body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg .btn--default img {
    width: 22px;
    vertical-align: middle
}

body.lp--doctors-page .humanlike_container .human_extra_info {
    background: #fff;
    font-size: .75rem;
    line-height: 1.2rem;
    color: #000;
    text-align: center;
    padding: 10px 0;
    border-radius: 1rem 1rem 0 0;
    font-weight: 700;
    margin: 20px auto 0;
    max-width: 432px
}

body.lp--doctors-page .humanlike_container .human_extra_info .human-big {
    font-size: 1.2rem;
    vertical-align: middle
}

body.lp--doctors-page .humanlike_container .human-wrap-right {
    padding-left: 80px;
    justify-content: center;
    display: flex;
    flex-direction: column
}

body.lp--doctors-page .humanlike_container .human-wrap-right .human-heading {
    font-size: 1.2rem;
    font-weight: 600
}

body.lp--doctors-page .humanlike_container .human-wrap-right .bigtext {
    font-size: .8rem;
    margin-bottom: 15px
}

body.lp--doctors-page .humanlike_container .human-wrap-right .btn--default {
    background-color: #000;
    color: #fff;
    border-color: #2d6af9;
    text-transform: inherit;
    border-radius: .8rem;
    padding: 16px 80px
}

body.lp--doctors-page .humanlike_container .human-wrap-right .btn--default:hover {
    background-color: #fff;
    color: #000
}

body.lp--doctors-page .doctor-eleven-section.toolset_container .btn--primary {
    text-transform: inherit
}


body.lp--doctors-page .doctor-circle-samdi-wrap {
    position: relative
}

body.lp--doctors-page .doctor-circle-samdi-wrap .doctor-samdi-img-logo {
    position: absolute;
    z-index: 2;
    left: 8px;
    top: -149px;
    width: 178px;
    box-shadow: 0 0 8rem rgba(230, 83, 87, .4);
    border-radius: 50%
}

body.lp--doctors-page .doctor-circle-samdi-wrap .doctor-circle-samdi-img-wrap {
    padding-left: 96px;
    margin-top: 32px;
    position: relative;
    z-index: 1
}

body.lp--doctors-page .doctor-circle-samdi-wrap .doctor-circle-samdi-img-wrap .doctor-circle-samdi-img {
    width: 375px
}

body.lp--doctors-page .section.section--black.doctor_video_and_faq {
    padding-bottom: 3rem
}

body.lp--doctors-page .doctor-eleven-section {
    padding-top: 6rem !important
}





body.lp--doctors-page .initial-consulation-wrapper .step-five-section .small-green-tx {
    color: #fff;
    font-size: .9rem;
    font-weight: 700
}

body.lp--doctors-page .initial-consulation-wrapper .step-five-section .voll-headline {
    color: #fff
}

body.lp--doctors-page .initial-consulation-wrapper .step-five-section .voll-headline span {
    color: #fff;
    display: block
}

body.lp--doctors-page .initial-consulation-wrapper .step-five-section .smalltext {
    color: #fff
}

body.lp--doctors-page .initial-consulation-wrapper .step-five-section .btn--green-btn-stp {
    color: #fff;
    padding: 10px 20px;
    font-weight: 500 !important
}

body.lp--doctors-page .initial-consulation-wrapper .step-five-section .btn--green-btn-stp:hover {
    background: 0 0;
    color: #fff;
    border-color: #fff
}

body.lp--doctors-page .initial-consulation-wrapper .step-five-section .call-mobile-img {
    right: -101px;
    top: -166px;
    width: 469px
}

body.lp--doctors-page .initial-consulation-wrapper .step-five-section .hide-in-desktop {
    display: none
}

body.lp--doctors-page .doctor_video_and_faq .gray-bg {
    background-color: #141414;
    border-radius: 1.2rem;
    height: 100%
}

body.lp--doctors-page .doctor_video_and_faq .gray-bg .gray-box-img-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.3rem
}

body.lp--doctors-page .doctor_video_and_faq .gray-bg .gray-box-inner-w {
    padding: 0 55px 30px
}

body.lp--doctors-page .doctor_video_and_faq .gray-bg .gray-box-inner-w .blue-reachable-block-para {
    font-size: .8rem;
    color: #fff
}

body.lp--doctors-page .doctor_video_and_faq .machineless_automation_video {
    margin-bottom: 18px
}

body.lp--doctors-page .doctor_video_and_faq .machineless_automation_video .video-img {
    border-radius: 1.2rem 1.2rem 0 0
}

body.lp--doctors-page .doctor_video_and_faq .machineless_automation_video .video_circle_box {
    background: #2d6af9
}

body.lp--doctors-page .doctor_video_and_faq .machineless_automation_video .video_circle_box .video-play-icon {
    border-left-color: #fff
}

body.lp--doctors-page .doctor_video_and_faq .video_faq_circle {
    height: 140px;
    width: 140px;
    text-align: center;
    background: #2d6af9;
    border-radius: 100%;
    position: absolute;
    z-index: 10;
    left: -31px;
    top: -30px
}

body.lp--doctors-page .doctor_video_and_faq .video_faq_circle .dis_corcle_heading {
    color: #fff;
    font-size: 3rem;
    line-height: 2.5rem;
    align-content: center;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    height: 100%
}

body.lp--doctors-page .doctor_video_and_faq .video_faq_circle .dis_corcle_heading span {
    font-size: 1rem;
    display: block;
    line-height: 1.4rem
}

body.lp--doctors-page .toolset_container .slider-heading {
    position: relative
}

body.lp--doctors-page .toolset_container .slider-heading span {
    color: #fff;
    font-size: .7rem;
    position: absolute;
    top: -32px;
    background: #2c6af9;
    padding: .25rem 1rem;
    border-radius: 1rem
}


body.lp--doctors-page .doctor-faq h2 {
    font-weight: 400
}

body.lp--doctors-page .doctor-faq h2 strong {
    display: block
}

body.lp--doctors-page .doctor-faq .section__content {
    margin-top: 30px
}

body.lp--doctors-page .doctor-faq .toggle-box input+label {
    padding: 40px 64px 40px 40px
}

body.lp--doctors-page .doctor-faq .toggle-box input+label {
    padding-left: calc(16px + 10px + 20px)
}

body.lp--doctors-page .doctor-faq .toggle-box .toggle-box__content {
    padding-left: calc(16px + 10px + 20px)
}

body.lp--doctors-page .doctor-faq .toggle-box--on-black {
    border-color: #171717;
    background-color: #171717
}




body.lp--doctors-page .doctor-faq .toggle-box--on-black input+label::before {
    filter: invert(0)
}



body.lp--doctors-page .doctor-faq .toggle-box--on-black a {
    color: #fff
}

body.lp--doctors-page .help-practice-step4-right .help-practice-headline {
    padding-bottom: 20px
}

@media screen and (max-width:1280px) {
    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list {
        font-size: .8rem
    }

    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .innovation-headline {
        padding: 0 25px
    }

    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .bigtext {
        padding: 0 25px
    }


    body.lp--doctors-page .initial-consulation-wrapper .step-five-section {
        padding-left: 15px;
        padding-right: 15px
    }

    body.lp--doctors-page .doctor_video_and_faq .video_faq_circle {
        left: -9px
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2-middle .step-line3-btn-img {
        max-width: 88%
    }


    body.lp--doctors-page .doctor-circle-samdi-wrap .doctor-circle-samdi-img-wrap {
        margin-top: -20px
    }


}

@media screen and (min-width:961px) {
    body.lp--doctors-page .desktop-hidden-h {
        display: none
    }
}

@media screen and (max-width:960px) {
    body.lp--doctors-page .desktop-hidden-h {
        display: block;
        margin-top: 1rem
    }


    body.lp--doctors-page .doctor-circle-samdi-wrap .doctor-circle-samdi-img-wrap {
        padding-left: 116px
    }

    body.lp--doctors-page .initial-consulation-wrapper .step-five-section .small-green-tx {
        font-size: .8rem
    }

    body.lp--doctors-page .initial-consulation-wrapper .step-five-section .voll-headline {
        font-size: 1.8rem
    }

    body.lp--doctors-page .white-doctor-top-bar {
        padding: 16px 15px;
        margin-top: 0
    }

    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing {
        justify-content: space-around
    }

    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list:nth-child(1) {
        text-align: left;
        flex-grow: 1;
        padding-right: 15px;
        font-size: .8rem
    }

    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list span {
        text-decoration: underline
    }

    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list:nth-child(2),
    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list:nth-child(3) {
        display: none
    }

    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list:nth-child(4) {
        text-align: right
    }

    body.lp--doctors-page .humanlike_container .human_extra_info {
        padding: 15px 0;
        border-radius: 0;
        font-weight: 700;
        margin: 20px -25px 0;
        max-width: inherit
    }

    body.lp--doctors-page .review_testimonial_container {
        padding: 0 0
    }

    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .bigtext {
        padding: 0 6rem
    }

    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .innovation-headline {
        line-height: 2.75rem;
        font-size: 2.1rem;
        padding: 0
    }

    body.lp--doctors-page .initial-consulation-wrapper .step-five-section {
        padding-left: 0;
        padding-right: 0
    }

    body.lp--doctors-page .doctor-first-section .innovation-main-section .innovation_wrap_left {
        width: 100%;
        padding-right: 15px
    }

    body.lp--doctors-page .doctor-first-section .innovation-main-section .dsgvo_video_caption {
        left: 10%;
        right: 10%
    }

    body.lp--doctors-page .doctor-help-section--doctor .innovation-headline {
        font-size: 2.5rem
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-right {
        text-align: center
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-right .help-practice-para {
        justify-content: center
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-right .call-audio-bg {
        margin-left: 0
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-images-person-mobile-img {
        display: flex;
        justify-content: center;
        margin-right: -3%
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-images-person-mobile-img .call-btn-img {
        width: 70%;
        height: auto
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left .help-images-person-img .call-btn-img {
        max-width: 100%;
        height: auto;
        padding-top: 22px
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left .call-help-bg-line1 {
        left: 15%;
        top: 57%;
        width: 134%
    }



    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2-middle .step-line3-btn-img {
        display: none
    }



    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2_inner .step-lock-info {
        background-position: center center;
        padding: 71px 5px 8px 5px;
        background-size: 33px;
        text-align: center;
        margin-top: -26px !important;
        display: block
    }

    body.lp--doctors-page .doctor-help-section--doctor .doctor-circle-samdi-img {
        display: none
    }

    body.lp--doctors-page .doctor-help-section--doctor .doctor-circle-samdi-mobile-img {
        display: block;
        width: 100%;
        max-width: 395px
    }



    body.lp--doctors-page .doctor-help-section--doctor .doctor-circle-samdi-img-wrap .doctor-circle-samdi-img {
        width: 100%
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step4-right {
        justify-content: center;
        text-align: center
    }

    body.lp--doctors-page .doctor-circle-samdi-wrap .doctor-samdi-img-logo {
        top: -146px;
        width: 40%;
        max-width: 160px;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        margin: 0 auto
    }




    body.lp--doctors-page .doctor_video_and_faq .gray-bg .gray-box-inner-w {
        padding: 0 25px 15px
    }

    body.lp--doctors-page .doctor_video_and_faq .video_faq_circle {
        left: -36px;
        transform: scale(.6)
    }

    body.lp--doctors-page .humanlike_container .human-wrap-left {
        padding-top: 1rem
    }

    body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg {
        padding: 17px 40px;
        margin-top: 5px
    }

    body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg .btn--default {
        padding: 18px 15px
    }

    body.lp--doctors-page .humanlike_container .human-wrap-right {
        padding-left: 0;
        text-align: center;
        padding-top: 40px;
        padding-bottom: 30px;
        padding-top: 0
    }

    body.lp--doctors-page .humanlike_container .human-wrap-right .btn--default {
        padding: 16px 20px
    }



    body.lp--doctors-page .initial-consulation-wrapper .step-five-section .call-mobile-img {
        right: -38px;
        top: -113px;
        width: 364px
    }



    body.lp--doctors-page .doctor-help-section--doctor .co-grid__col--5-md {
        display: none
    }
}

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


    body.lp--doctors-page .doctor_review_container {
        overflow: hidden;
        margin-top: -20px !important
    }

    body.lp--doctors-page .doctor_review_container .review_para {
        font-size: .9rem
    }

    body.lp--doctors-page .doctor_review_container .author-box .right-content .review-author-name {
        font-size: .9rem
    }

    body.lp--doctors-page .doctor_review_container .author-box .right-content .review-author-designation {
        font-size: .8rem
    }
}

@media screen and (max-width:768px) and (max-width:768px) {
    body.lp--doctors-page .doctor_review_container .swiper-wrapper {
        flex-wrap: nowrap !important;
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
        box-sizing: content-box
    }

    body.lp--doctors-page .doctor_review_container .swiper-container {
        width: 100% !important
    }

    body.lp--doctors-page .doctor_review_container .swiper-slide {
        background-color: unset !important;
        display: flex;
        flex-direction: column;
        width: 98% !important;
        box-shadow: none
    }

    body.lp--doctors-page .doctor_review_container .swiper-slide .listing-review-star {
        order: 1
    }

    body.lp--doctors-page .doctor_review_container .swiper-slide .review_para {
        order: 2
    }

    body.lp--doctors-page .doctor_review_container .swiper-slide .author-box {
        order: 3
    }
}

@media screen and (max-width:768px) and (max-width:600px) {
    body.lp--doctors-page .doctor_review_container .swiper-slide {
        width: 96% !important
    }
}

@media screen and (max-width:768px) {
    body.lp--doctors-page .swiper-pagination {
        display: flex;
        justify-content: space-between;
        padding: 0 40%;
        margin-top: 25px;
        margin-bottom: 20px
    }

    body.lp--doctors-page .swiper-pagination-bullet-active {
        background: #d3d3d3 !important
    }

    body.lp--doctors-page .swiper-pagination-bullet {
        background: #737373;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        overflow: hidden
    }

    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .innovation-headline {
        padding: 0 20px
    }

    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .bigtext {
        padding: 0 20px
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left .call-help-bg-line1 {
        top: 91%;
        width: 134%;
        transform: scaleY(1.5)
    }



    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step2_inner .smltext {
        font-size: .8rem;
        padding: 0 2rem
    }



    body.lp--doctors-page .initial-consulation-wrapper .step-five-section .call-mobile-img {
        right: -75px;
        top: -104px;
        width: 364px
    }

    body.lp--doctors-page .doctor-eleven-section {
        padding-top: 2rem !important
    }

    body.lp--doctors-page .doctor-eleven-section {
        padding-bottom: 1rem !important
    }







}

@media screen and (max-width:600px) {
    body.lp--doctors-page .white-doctor-top-bar {
        padding: 12px 15px
    }

    body.lp--doctors-page .white-doctor-top-bar .lerne-den-listing-list {
        padding: 0
    }


    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .innovation-headline {
        padding: 10px 20px 15px;
        font-size: 1.5rem;
        line-height: 2rem
    }

    body.lp--doctors-page .doctor-first-section .innovation-main-section {
        padding-top: 3rem
    }

    body.lp--doctors-page .doctor-help-section--doctor .innovation-headline {
        font-size: 1.5rem
    }

    body.lp--doctors-page .doctor-help-section--doctor .help-practice-step-one-left .help-images-person-img .call-btn-img {
        max-width: 100%;
        height: auto;
        padding-top: 0
    }

    body.lp--doctors-page .step-five-section {
        padding-top: 2rem !important
    }

    body.lp--doctors-page .initial-consulation-wrapper .step-five-section .call-mobile-img {
        right: 13%;
        top: -209px;
        width: 237px;
        left: 13%
    }

    body.lp--doctors-page .initial-consulation-wrapper .step-five-section .hide-in-desktop {
        display: block
    }


    body.lp--doctors-page .doctor-circle-samdi-wrap .doctor-samdi-img-logo {
        top: -106px;
        width: 45%
    }

    body.lp--doctors-page .doctor-faq .toggle-box input+label {
        padding: 20px 40px 20px 20px;
        padding-left: calc(16px + 00px + 10px)
    }

    body.lp--doctors-page .doctor-faq .toggle-box input+label::before {
        right: 15px
    }

    body.lp--doctors-page .doctor-faq .toggle-box .toggle-box__content {
        padding-left: calc(16px + 00px + 10px)
    }




    body.lp--doctors-page .doctor-first-section--doctor .doctor-head-section .innovation-headline span {
        display: inline-block
    }

    body.lp--doctors-page .margin-mobile-boxes {
        margin-top: 5px
    }

    body.lp--doctors-page .hide-btn-mb {
        display: none
    }

    body.lp--doctors-page .initial-consulation-wrapper {
        padding-top: 2.5rem
    }



    body.lp--doctors-page .humanlike_container .human-wrap-left {
        padding-bottom: 0
    }

    body.lp--doctors-page .humanlike_container .human-wrap-left .call-audio-bg {
        padding: 34px 70px;
        display: block
    }
}

body.lp--doctors-page [data-element=overlay-video-container] .close {
    background-color: #2d6af9;
    color: #fff
}



body.lp--doctors-page .section__content p:not(.review-author-designation):not(.review_para):not(.vbd-subline) {
    font-size: 1rem !important;
    line-height: 1.4 !important
}


body.blue-style .btn--green-brd {
    border-color: #2d6af9
}

body.blue-style .vb-package__ribbon {
    background-color: #2d6af9
}

body.blue-style .vb-packages input:checked+.vb-package:before {
    background: url('../images/lp/check-mark-blue.svg') no-repeat center;
    border: 2px solid #2d6af9
}

body.blue-style .btn--primary {
    background-color: #2d6af9
}

body.blue-style .btn--primary:hover {
    background-color: #000
}

body.blue-style .vb-additionals input:checked+.vb-additional {
    border-color: #cadaf6;
    background-color: #cadaf6
}

body.blue-style .vb-additionals input:checked+.vb-additional:before {
    content: "";
    background: url('../images/lp/check-mark-blue.svg') no-repeat center;
    background-size: 15px;
    background-color: #000;
    border-color: #000;
    font-weight: 900
}

body.blue-style .vb-count__button {
    background: #2d6af9;
    color: #000 !important
}

body.blue-style .vb-progress::after {
    background: #2d6af9
}

body.blue-style .vb-progress__step--active::before {
    background-color: #2d6af9;
    border-color: #2d6af9
}

body.blue-style .vb-additional-10,
body.blue-style .vb-additional-11,
body.blue-style .vb-additional-6,
body.blue-style .vb-additional-9 {
    display: none !important
}

body.blue-style .cart-wrapper-section {
    display: none
}

body.blue-style .vb-cart-mobile-hook {
    margin-top: 5rem
}

body.blue-style #vb-choosing .nonpraxis {
    display: none
}

body.blue-style #vb-choosing .praxis {
    display: block
}

@media (max-width:768px) {
    body.blue-style .vb-cart-mobile-hook {
        margin-top: 0
    }
}

body.lp--doctors-page .icon-container {
    width: 16px;
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

body.lp--doctors-page .speaker-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px
}

body.lp--doctors-page .speaker-icon::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

body.lp--doctors-page .help-practice-para .speaker-icon::before {
    border-width: 8px 0 8px 15px !important
}

body.lp--doctors-page .help-practice-para .stop-icon {
    width: 14px;
    height: 14px
}

body.lp--doctors-page .help-practice-para .icon-container {
    width: 14px;
    height: 14px
}

body.lp--doctors-page .play-buttons-a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.05rem !important;
    font-weight: 400 !important
}

body.lp--doctors-page .stop-icon {
    display: none;
    width: 16px;
    height: 16px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px
}

body.lp--doctors-page .text-playbuttons {
    margin-left: 14px
}

body.lp--doctors-page .help-practice-para .play-buttons-a {
    padding: var(--gutter-xs) var(--gutter-m) !important
}

body.lp--doctors-page .btn--default {
    padding: var(--gutter-xs) var(--gutter-m) !important;
    font-size: 1.05rem;
    font-weight: 400 !important
}

body.lp--doctors-page .btn--default:hover .speaker-icon::before {
    border-color: transparent transparent transparent #000
}

body.lp--doctors-page .btn--default:hover .stop-icon {
    background-color: #000
}

@media screen and (max-width:767px) {
    body.lp--doctors-page .call-audio-bg .btn--default {
        padding: 18px 30px !important
    }

    body.lp--doctors-page .play-buttons-a span {
        font-size: 12px;
        text-wrap: nowrap
    }
}

.xmas-puzzl-container.code-accepted .xmas-puzzl {
    display: none
}

.xmas-puzzl-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    height: 100%;
    overflow: hidden;
    position: relative
}

.xmas-bg {
    position: absolute;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    top: 0;
    pointer-events: none
}

.xmas-puzzle-input {
    outline: 0;
    border: none;
    box-shadow: none;
    background: 0 0;
    margin: 0 auto;
    display: block;
    letter-spacing: 2.85rem;
    font-size: 4rem;
    position: absolute;
    margin-left: .7rem;
    margin-top: .2rem
}

.xmas-stage {
    background-color: var(--xmas-stage-bg);
    display: flex;
    margin: 13vw;
    width: 100%;
    padding: 5vw;
    justify-content: center;
    align-items: center;
    z-index: 1
}

.xmas-plants {
    z-index: 2
}

.xmas-plant {
    position: absolute;
    width: clamp(3rem, 12vw, 14rem)
}

.xmas-plant.xmas-plant1 {
    left: 0;
    top: 0;
    transform: translate(0, 3rem) rotate(12deg) scale(1.2)
}

.xmas-plant.xmas-plant2 {
    right: 0;
    top: 0;
    transform: translate(0, 1rem) rotate(-55deg) scale(1.75)
}

.xmas-plant.xmas-plant3 {
    left: 0;
    bottom: 0;
    transform: translate(-1rem, -1rem) rotate(10deg) scale(2)
}

.xmas-plant.xmas-plant4 {
    right: 0;
    bottom: 0;
    transform: translate(1rem, 1rem) rotate(-37deg) scale(2.2)
}

.xmas-puzzl .xmas-headline {
    font-size: 1.5rem;
    line-height: 1.2;
    display: block;
    font-weight: 700;
    text-align: center;
    margin: 0 auto 2rem auto
}

.xmas-feedback {
    display: none;
    gap: 2rem
}

.code-accepted .xmas-feedback {
    display: flex
}

.xmas-feedback>div {
    width: 50%
}

@media (max-width:768px) {
    .xmas-feedback>div {
        width: 100%
    }

    .code-accepted .xmas-feedback {
        display: block
    }
}

.xmas-feedback .xmas-headline {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    margin: 0 auto 1rem auto
}

.xmas-feedback p {
    margin-bottom: 2rem
}

.xmas-pin-code {
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 1rem
}

.xmas-pin-code input {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    white-space: auto;
    text-transform: uppercase;
    border: none;
    text-align: center;
    width: 48px;
    height: 48px;
    font-size: 2rem;
    background-color: #fff;
    border-radius: .5rem;
    transition: all .2s ease-out
}

.xmas-pin-code input:focus {
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, .1);
    transform: translateY(-.2rem);
    outline: 0
}

.xmas-pin-code input::-webkit-inner-spin-button,
.xmas-pin-code input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.xmas-form * {
    font-size: 1rem
}

.xmas-form li,
.xmas-form ul {
    list-style: none !important
}

.xmas-form .zf-nameWrapper {
    display: flex;
    justify-content: space-aruond;
    gap: 1rem
}

.xmas-form .zf-nameWrapper span {
    display: block;
    width: 100%
}

.xmas-form input:not([type=checkbox]),
.xmas-form textarea {
    width: 100%;
    padding: .75rem;
    margin-bottom: 1rem;
    border: 1px solid #d8d8d8;
    border-radius: .5rem;
    font-family: apercu, sans-serif;
    font-size: .8rem
}

.xmas-form textarea {
    min-height: 5rem
}

.xmas-form .zf-clearBoth,
.xmas-form label:not([for=DecisionBox]) {
    display: none
}

.xmas-form label[for=DecisionBox] {
    font-size: .75rem;
    line-height: 1.2
}

.xmas-form .btn-primary {
    margin-top: 1rem;
    width: 100%
}



:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0, 0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    -ms-scroll-snap-type: none;
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-start: var(--swiper-centered-offset-before);
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-before: var(--swiper-centered-offset-before);
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    -webkit-animation: swiper-preloader-spin 1s infinite linear;
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@-webkit-keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.entry {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    padding: 0 !important
}

.entry__image {
    display: block;
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden
}

.entry__image img {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16/9;
    transition: all .3s ease
}

.entry__image:not(.entry__image--teaser) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.entry__image:not(.entry__image--teaser):hover img {
    transform: scale(1.1)
}

.entry__image--teaser img {
    aspect-ratio: unset
}

.entry__title {
    padding: 0 var(--gutter-s)
}

.entry__title a {
    color: #000
}

.entry__title a:hover {
    color: #f58546
}

.entry__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--gutter-s);
    padding-top: 0
}

.entry__content>* {
    margin-bottom: 1rem
}

.entry__content>:last-child {
    margin-bottom: 0;
    margin-top: auto
}

.entry__copy>*+* {
    margin-top: 1em
}

.entry__copy p {
    font-size: 20px
}

.entry__copy ol,
.entry__copy ul {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    padding: var(--gutter-m);
    padding-left: calc(1em + var(--gutter-m));
    border-radius: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto
}

.entry__copy a {
    font-family: "Px Grotesk", sans-serif;
    color: #000;
    border-bottom: 2px solid #f58546
}

.entry__copy a:hover {
    color: #f58546;
    text-decoration: none
}

.entry__copy .fitvid iframe,
.entry__copy video {
    aspect-ratio: 16/9;
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto
}

.entry__copy figure figcaption {
    text-align: center;
    margin-top: var(--gutter-xs);
    font-size: 16px;
    color: rgba(0, 0, 0, .75)
}

#toc_container {
    position: -webkit-sticky;
    position: sticky;
    display: block;
    top: var(--navigationHeightScrolled);
    background-color: #fff;
    z-index: 99;
    width: 100%;
    margin: 30px auto;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    padding: var(--gutter-xs) var(--gutter-s)
}

@media screen and (max-width:768px) {
    #toc_container {
        padding: var(--gutter-micro) var(--gutter-xs)
    }
}

#toc_container .toc_title {
    font-family: "Px Grotesk", sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer
}

#toc_container .toc_title:after {
    content: "";
    display: inline-block;
    margin-left: var(--gutter-micro);
    width: 10px;
    height: 10px;
    background-image: url('arrow-down-black.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .2
}

#toc_container ul {
    box-shadow: unset;
    max-width: unset;
    padding: 0;
    list-style: none;
    counter-reset: list
}

#toc_container ul ul {
    padding-left: 1em
}

#toc_container ul li {
    counter-increment: list;
    font-size: 16px !important
}

#toc_container ul li:before {
    content: counters(list, ".") ". ";
    font-family: "Px Grotesk", sans-serif;
    font-weight: 700
}

#toc_container .toc_list {
    display: none;
    margin-top: var(--gutter-s);
    max-height: calc(100vh - (var(--navigationHeightScrolled) * 2) - 48px);
    overflow-y: auto;
    --scrollbarBG: transparent;
    --thumbBG: #f58546;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG)
}

#toc_container .toc_list::-webkit-scrollbar {
    width: 6px
}

#toc_container .toc_list::-webkit-scrollbar-track {
    background: var(--scrollbarBG)
}

#toc_container .toc_list::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG)
}

#toc_container .toc_list a {
    font-family: apercu, sans-serif
}

#toc_container.toc_container--stuck {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

#toc_container.toc_container--open .toc_title:after {
    background-image: url('arrow-up-black.svg')
}

#toc_container.toc_container--open .toc_list {
    display: block;
    margin-left: 0
}

#toc_container.toc_container--open .toc_list a {
    border-bottom: 0
}

#toc_container a:hover {
    text-decoration: none
}

#post-navigation {
    margin-top: var(--gutter-xl);
    display: flex;
    justify-content: center
}

#post-navigation .post-navigation-inside {
    display: flex;
    justify-content: center
}

#post-navigation .post-navigation-inside *+* {
    margin-left: var(--gutter-xs)
}

#post-navigation .current,
#post-navigation .dots {
    cursor: default !important;
    pointer-events: none
}

.shariff {
    display: flex !important;
    justify-content: center
}

.shariff ul {
    box-shadow: unset;
    padding: unset;
    max-width: unset
}

.shariff li {
    border-radius: 100px
}

#footer a:not(.btn) {
    color: #fff;
    border-bottom: 2px solid transparent
}

#footer a:not(.btn):hover {
    border-bottom-color: #fff
}

#footer ul {
    list-style: none
}

#footer #footer-inside {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 60px 25px 0 25px
}

#footer #footer-inside .widget {
    width: calc(33% - 25px)
}

#footer #footer-inside .widget h3 {
    font-family: "Px Grotesk", sans-serif;
    font-size: 24px;
    margin-bottom: .5em
}

.faq-search {
    display: flex;
    border-radius: 100px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    max-width: 75%;
    margin-left: auto;
    margin-right: auto
}

.faq-search__query {
    padding: 0 var(--gutter-m);
    flex: 1;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    font-family: apercu, sans-serif;
    font-size: inherit
}

.faq-search button {
    width: auto !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 2px solid rgba(0, 0, 0, .1);
    background-color: #fff
}

@media screen and (max-width:768px) {
    .faq-search {
        max-width: 100%
    }
}

*+.faq-list,
.faq-list+* {
    margin-top: var(--gutter-l)
}

.faq-list {
    position: relative;
    list-style: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    height: 100%;
    background-color: #fff;
    overflow: hidden
}

.faq-list li {
    position: relative;
    padding: var(--gutter-xs);
    z-index: 1
}

.faq-list li:nth-child(odd) {
    background-color: #fafafa
}

.faq-list li:not(.faq-list__headline) {
    position: relative;
    padding-right: calc(var(--gutter-xs) + 9px)
}

.faq-list li:not(.faq-list__headline) a {
    display: block;
    color: #000
}

.faq-list li:not(.faq-list__headline) a:hover {
    color: #f58546
}

.faq-list li:not(.faq-list__headline):after {
    content: "";
    position: absolute;
    right: var(--gutter-xs);
    top: calc(50% - 7px);
    display: block;
    width: 9px;
    height: 14px;
    background-image: url('arrow-right-black.svg');
    opacity: .2;
    transition: all .3s ease
}

.faq-list li:not(.faq-list__headline):hover:after {
    opacity: 1
}

.faq-list__headline {
    font-weight: 700;
    font-family: "Px Grotesk", sans-serif;
    font-size: 20px;
    background-color: rgba(134, 237, 24, .2) !important
}

.faq-list__headline a {
    color: inherit
}

.faq-list__headline a:hover {
    color: #f58546
}

.faq-content *+h1,
.faq-content h2,
.faq-content h3,
.faq-content h4,
.faq-content h5,
.faq-content h6 {
    margin-top: 1em
}

*+.co-grid,
.co-grid+* {
    margin-top: 30px
}

.co-grid {
    --gutter: 30px;
    width: calc(100% + var(--gutter));
    margin-left: calc(var(--gutter)/ 2 * -1);
    margin-right: calc(var(--gutter)/ 2 * -1);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch
}

.co-grid--small-gutter {
    --gutter: 15px
}

.co-grid--no-margin-top {
    margin-top: calc(var(--gutter)/ 2 * -1)
}

.co-grid--no-margin-bottom {
    margin-bottom: calc(var(--gutter)/ 2 * -1)
}

.co-grid--center-line {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, .2) calc(50%), rgba(0, 0, 0, 0) calc(50% + 1px));
    background-size: 2px 80%;
    background-position: center;
    background-repeat: no-repeat
}

@media screen and (max-width:1170px) {
    .co-grid--center-line {
        background: 0 0
    }
}

.co-grid__col {
    margin: calc(var(--gutter)/ 2)
}

.co-grid__col>img,
.co-grid__col>picture {
    display: block;
    margin: 0 auto
}

.co-grid__col>img+*,
.co-grid__col>picture+* {
    margin-top: 30px
}

.co-grid__col>.co-grid {
    margin-top: 0;
    margin-bottom: 0
}

.co-grid__col--fill {
    flex: 1
}

.co-grid__col--vcentered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.co-grid__col--vcentered>:not(.co-grid) {
    width: 100%
}

.co-grid__col--vcentered img,
.co-grid__col--vcentered picture {
    width: auto !important
}

.co-grid__col--vend {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start
}

.co-grid__col--vend>:not(.co-grid) {
    width: 100%
}

.co-grid__col--vend img,
.co-grid__col--vend picture {
    width: auto !important
}

.co-grid__col--hcentered {
    align-items: center
}

@media screen and (min-width:0px) {
    .co-grid__col--1-xs {
        width: calc(8.33333% - var(--gutter))
    }

    .co-grid__col--2-xs {
        width: calc(16.66667% - var(--gutter))
    }

    .co-grid__col--3-xs {
        width: calc(25% - var(--gutter))
    }

    .co-grid__col--4-xs {
        width: calc(33.33333% - var(--gutter))
    }

    .co-grid__col--5-xs {
        width: calc(41.66667% - var(--gutter))
    }

    .co-grid__col--6-xs {
        width: calc(50% - var(--gutter))
    }

    .co-grid__col--7-xs {
        width: calc(58.33333% - var(--gutter))
    }

    .co-grid__col--8-xs {
        width: calc(66.66667% - var(--gutter))
    }

    .co-grid__col--9-xs {
        width: calc(75% - var(--gutter))
    }

    .co-grid__col--10-xs {
        width: calc(83.33333% - var(--gutter))
    }

    .co-grid__col--11-xs {
        width: calc(91.66667% - var(--gutter))
    }

    .co-grid__col--12-xs {
        width: calc(100% - var(--gutter))
    }
}

@media screen and (max-width:0px) {
    .co-grid__col--hidden-xs {
        display: none
    }

    .co-grid__col--order-1-xs {
        order: 1
    }

    .co-grid__col--order-2-xs {
        order: 2
    }

    .co-grid__col--order-3-xs {
        order: 3
    }

    .co-grid__col--order-4-xs {
        order: 4
    }

    .co-grid__col--order-5-xs {
        order: 5
    }
}

@media screen and (min-width:600px) {
    .co-grid__col--1-sm {
        width: calc(8.33333% - var(--gutter))
    }

    .co-grid__col--2-sm {
        width: calc(16.66667% - var(--gutter))
    }

    .co-grid__col--3-sm {
        width: calc(25% - var(--gutter))
    }

    .co-grid__col--4-sm {
        width: calc(33.33333% - var(--gutter))
    }

    .co-grid__col--5-sm {
        width: calc(41.66667% - var(--gutter))
    }

    .co-grid__col--6-sm {
        width: calc(50% - var(--gutter))
    }

    .co-grid__col--7-sm {
        width: calc(58.33333% - var(--gutter))
    }

    .co-grid__col--8-sm {
        width: calc(66.66667% - var(--gutter))
    }

    .co-grid__col--9-sm {
        width: calc(75% - var(--gutter))
    }

    .co-grid__col--10-sm {
        width: calc(83.33333% - var(--gutter))
    }

    .co-grid__col--11-sm {
        width: calc(91.66667% - var(--gutter))
    }

    .co-grid__col--12-sm {
        width: calc(100% - var(--gutter))
    }
}

@media screen and (max-width:600px) {
    .co-grid__col--hidden-sm {
        display: none
    }

    .co-grid__col--order-1-sm {
        order: 1
    }

    .co-grid__col--order-2-sm {
        order: 2
    }

    .co-grid__col--order-3-sm {
        order: 3
    }

    .co-grid__col--order-4-sm {
        order: 4
    }

    .co-grid__col--order-5-sm {
        order: 5
    }
}

@media screen and (min-width:960px) {
    .co-grid__col--1-md {
        width: calc(8.33333% - var(--gutter))
    }

    .co-grid__col--2-md {
        width: calc(16.66667% - var(--gutter))
    }

    .co-grid__col--3-md {
        width: calc(25% - var(--gutter))
    }

    .co-grid__col--4-md {
        width: calc(33.33333% - var(--gutter))
    }

    .co-grid__col--5-md {
        width: calc(41.66667% - var(--gutter))
    }

    .co-grid__col--6-md {
        width: calc(50% - var(--gutter))
    }

    .co-grid__col--7-md {
        width: calc(58.33333% - var(--gutter))
    }

    .co-grid__col--8-md {
        width: calc(66.66667% - var(--gutter))
    }

    .co-grid__col--9-md {
        width: calc(75% - var(--gutter))
    }

    .co-grid__col--10-md {
        width: calc(83.33333% - var(--gutter))
    }

    .co-grid__col--11-md {
        width: calc(91.66667% - var(--gutter))
    }

    .co-grid__col--12-md {
        width: calc(100% - var(--gutter))
    }
}

@media screen and (max-width:960px) {
    .co-grid__col--hidden-md {
        display: none
    }

    .co-grid__col--order-1-md {
        order: 1
    }

    .co-grid__col--order-2-md {
        order: 2
    }

    .co-grid__col--order-3-md {
        order: 3
    }

    .co-grid__col--order-4-md {
        order: 4
    }

    .co-grid__col--order-5-md {
        order: 5
    }
}

@media screen and (min-width:1280px) {
    .co-grid__col--1-lg {
        width: calc(8.33333% - var(--gutter))
    }

    .co-grid__col--2-lg {
        width: calc(16.66667% - var(--gutter))
    }

    .co-grid__col--3-lg {
        width: calc(25% - var(--gutter))
    }

    .co-grid__col--4-lg {
        width: calc(33.33333% - var(--gutter))
    }

    .co-grid__col--5-lg {
        width: calc(41.66667% - var(--gutter))
    }

    .co-grid__col--6-lg {
        width: calc(50% - var(--gutter))
    }

    .co-grid__col--7-lg {
        width: calc(58.33333% - var(--gutter))
    }

    .co-grid__col--8-lg {
        width: calc(66.66667% - var(--gutter))
    }

    .co-grid__col--9-lg {
        width: calc(75% - var(--gutter))
    }

    .co-grid__col--10-lg {
        width: calc(83.33333% - var(--gutter))
    }

    .co-grid__col--11-lg {
        width: calc(91.66667% - var(--gutter))
    }

    .co-grid__col--12-lg {
        width: calc(100% - var(--gutter))
    }
}

@media screen and (max-width:1280px) {
    .co-grid__col--hidden-lg {
        display: none
    }

    .co-grid__col--order-1-lg {
        order: 1
    }

    .co-grid__col--order-2-lg {
        order: 2
    }

    .co-grid__col--order-3-lg {
        order: 3
    }

    .co-grid__col--order-4-lg {
        order: 4
    }

    .co-grid__col--order-5-lg {
        order: 5
    }
}

@media screen and (min-width:1920px) {
    .co-grid__col--1-xl {
        width: calc(8.33333% - var(--gutter))
    }

    .co-grid__col--2-xl {
        width: calc(16.66667% - var(--gutter))
    }

    .co-grid__col--3-xl {
        width: calc(25% - var(--gutter))
    }

    .co-grid__col--4-xl {
        width: calc(33.33333% - var(--gutter))
    }

    .co-grid__col--5-xl {
        width: calc(41.66667% - var(--gutter))
    }

    .co-grid__col--6-xl {
        width: calc(50% - var(--gutter))
    }

    .co-grid__col--7-xl {
        width: calc(58.33333% - var(--gutter))
    }

    .co-grid__col--8-xl {
        width: calc(66.66667% - var(--gutter))
    }

    .co-grid__col--9-xl {
        width: calc(75% - var(--gutter))
    }

    .co-grid__col--10-xl {
        width: calc(83.33333% - var(--gutter))
    }

    .co-grid__col--11-xl {
        width: calc(91.66667% - var(--gutter))
    }

    .co-grid__col--12-xl {
        width: calc(100% - var(--gutter))
    }
}

@media screen and (max-width:1920px) {
    .co-grid__col--hidden-xl {
        display: none
    }

    .co-grid__col--order-1-xl {
        order: 1
    }

    .co-grid__col--order-2-xl {
        order: 2
    }

    .co-grid__col--order-3-xl {
        order: 3
    }

    .co-grid__col--order-4-xl {
        order: 4
    }

    .co-grid__col--order-5-xl {
        order: 5
    }
}

@media screen and (min-width:0px) and (max-width:600px) {
    .co-grid__col--order-1-xs {
        order: 1
    }

    .co-grid__col--order-2-xs {
        order: 2
    }

    .co-grid__col--order-3-xs {
        order: 3
    }

    .co-grid__col--order-4-xs {
        order: 4
    }

    .co-grid__col--order-5-xs {
        order: 5
    }
}

@media screen and (min-width:600px) and (max-width:960px) {
    .co-grid__col--order-1-sm {
        order: 1
    }

    .co-grid__col--order-2-sm {
        order: 2
    }

    .co-grid__col--order-3-sm {
        order: 3
    }

    .co-grid__col--order-4-sm {
        order: 4
    }

    .co-grid__col--order-5-sm {
        order: 5
    }
}

@media screen and (min-width:960px) and (max-width:1280px) {
    .co-grid__col--order-1-md {
        order: 1
    }

    .co-grid__col--order-2-md {
        order: 2
    }

    .co-grid__col--order-3-md {
        order: 3
    }

    .co-grid__col--order-4-md {
        order: 4
    }

    .co-grid__col--order-5-md {
        order: 5
    }
}

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

    [class*=co-grid__col--12-]>img:not(.co-grid__image--full-width):not([class*=custom]),
    [class*=co-grid__col--12-]>picture img:not(.co-grid__image--full-width):not([class*=custom]) {
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
        display: block
    }
}

.agenda__title {
    font-family: apercu, sans-serif;
    font-size: 20px;
    line-height: 134.77%;
    text-align: center;
    margin: 20px 0
}

.agenda__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0 30px
}

.agenda__col {
    padding-right: 15px;
    flex: 1
}

.agenda__col+.agenda__col {
    padding-right: 0;
    padding-left: 15px
}

.agenda__item {
    position: relative;
    padding: 8px 8px 8px 60px;
    background-color: #f0f0f0;
    border: 2px solid #cbcbcb;
    border-radius: 6px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: rgba(0, 0, 0, .8);
    display: flex;
    align-items: center
}

.agenda__item+.agenda__item {
    margin-top: 15px
}

.agenda__item:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.agenda__item--blue {
    background-color: #e2e2f6;
    border-color: #6264a7
}

.agenda__item--red {
    background-color: #f6e2e2;
    border-color: #d85353
}

.agenda__item--green {
    background-color: #ebf6e2;
    border-color: #89a762
}

.agenda__item--yellow {
    background-color: #fff5dc;
    border-color: #f1bb51
}

.agenda__item--cup:before {
    background-image: url('cup.svg')
}

.agenda__item--exchange:before {
    background-image: url('exchange.svg')
}

.agenda__item--computer:before {
    background-image: url('computer.svg')
}

.agenda__item--customer-support:before {
    background-image: url('customer-support.svg')
}

.agenda__break {
    border-top: 2px solid rgba(167, 167, 167, .5);
    border-bottom: 2px solid rgba(167, 167, 167, .5);
    background-color: #f0f0f0;
    padding: 10px 0;
    text-align: center;
    font-family: apercu, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: rgba(0, 0, 0, .8);
    margin: 20px 0
}

.agenda__break strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px
}

.agenda__legend {
    border-top: 2px solid rgba(167, 167, 167, .5);
    background-color: #f0f0f0;
    padding: 10px 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 20px
}

.agenda__info {
    font-family: apercu, sans-serif;
    font-size: 14px;
    line-height: 134.77%
}

.agenda__info:before {
    content: "";
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    background-color: rgba(203, 203, 203, .5);
    margin-right: 13px
}

.agenda__info--blue:before {
    background-color: #e2e2f6;
    border-color: #6264a7
}

.agenda__info--red:before {
    background-color: #f6e2e2;
    border-color: #d85353
}

.agenda__info--green:before {
    background-color: #ebf6e2;
    border-color: #89a762
}

.agenda__info--yellow:before {
    background-color: #fff5dc;
    border-color: #f1bb51
}

.agenda__size--1 {
    min-height: 40px
}

.agenda__size--2 {
    min-height: 80px
}

.agenda__size--3 {
    min-height: 120px
}

@media screen and (max-width:600px) {
    .agenda__row {
        flex-direction: column
    }

    .agenda__col {
        padding-right: 0
    }

    .agenda__col+.agenda__col {
        margin-top: 18px;
        padding-left: 0
    }
}

.alertbox {
    border-left: 6px solid #000;
    background-color: rgba(0, 0, 0, .25);
    padding: 15px;
    border-radius: 3px;
    font-family: apercu, sans-serif;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: rgba(0, 0, 0, .8);
    margin: 30px 0
}

.alertbox small {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    color: rgba(0, 0, 0, .5)
}

.alertbox--hint {
    border-color: #6264a7;
    background-color: #e2e2f6
}

*+.anchors,
.anchors+* {
    margin-top: var(--gutter-xl)
}

@media screen and (max-width:800px) {
    .anchors.mobile-hidden+:not(.mobile-hidden) {
        margin-top: 0
    }
}

.anchors__title {
    color: #000;
    font-family: apercu, sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    margin-bottom: var(--gutter-s)
}

.anchors__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.anchors__links a {
    display: block;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    padding: var(--gutter-xs) var(--gutter-s);
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15), 0 4px 20px rgba(0, 0, 0, .05);
    border-radius: 10px;
    margin: var(--gutter-xs);
    color: #000;
    white-space: nowrap
}

.anchors__links a:hover {
    background-color: #f58546
}

.anchors__links a:after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-image: url('jump-to-anchor.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 15px
}

@media screen and (max-width:768px) {
    .anchors__title {
        margin-bottom: var(--gutter-xs)
    }

    .anchors__title strong {
        display: block
    }

    .anchors__links a {
        padding: calc(var(--gutter-xs)/ 2) var(--gutter-xs);
        margin: calc(var(--gutter-xs)/ 2);
        font-size: 16px
    }
}

.atomic-loader {
    position: relative;
    width: 134px;
    height: 134px;
    background-image: url('quantum-computing.svg');
    background-position: center;
    background-repeat: no-repeat;
    margin: 30px auto
}

.atomic-loader--hidden {
    display: none
}

.atomic-loader__circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 6px solid rgba(0, 0, 0, .025);
    border-top-color: transparent;
    border-radius: 50%;
    -webkit-animation: circleSpin 2s infinite linear;
    animation: circleSpin 2s infinite linear;
    z-index: 1
}

.atomic-loader__dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.atomic-loader__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 6px;
    transform-origin: left center;
    transform: translateY(-50%) rotate(-135deg);
    -webkit-animation-name: dotSpin;
    animation-name: dotSpin;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

.atomic-loader__dot:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    background-color: #f58546;
    border-radius: 50%
}

.atomic-loader__dot:nth-of-type(2) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.atomic-loader__dot:nth-of-type(3) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.atomic-loader__dot:nth-of-type(4) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

@-webkit-keyframes circleSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes circleSpin {
    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes dotSpin {
    50% {
        transform: translateY(-50%) rotate(45deg)
    }

    100% {
        transform: translateY(-50%) rotate(225deg)
    }
}

@keyframes dotSpin {
    50% {
        transform: translateY(-50%) rotate(45deg)
    }

    100% {
        transform: translateY(-50%) rotate(225deg)
    }
}

.banderole {
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--banderoleHeight);
    background-size: 200% 200%;
    background-image: repeating-linear-gradient(-45deg, #f58546, #52940b, #f58546);
    background-position: 0 50%;
    -webkit-animation: background 10s infinite linear;
    animation: background 10s infinite linear;
    padding: 0 var(--gutter-micro);
    color: #fff;
    font-weight: 500;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -.05em;
    white-space: nowrap
}

.banderole>*+* {
    margin-left: var(--gutter-xs)
}

.banderole__text {
    overflow: hidden;
    text-overflow: ellipsis
}

.banderole a {
    display: inline-block;
    text-decoration: underline;
    color: currentColor;
    padding: 3px 10px;
    border-radius: 300px
}

.banderole a:before {
    content: 'Mehr';
    font-size: 16px;
    display: none
}

.banderole a:hover {
    background-color: #fff;
    color: #000;
    text-shadow: none
}

.banderole~.navigation {
    top: calc(var(--banderoleHeight) - var(--navigationOffset))
}

.banderole~.navigation-spacer {
    height: calc(var(--banderoleHeight) - var(--navigationOffset) + var(--navigationHeight))
}

@media screen and (max-width:950px),
screen and (max-height:570px) {
    .banderole~.navigation-spacer {
        height: calc(var(--banderoleHeight) - var(--navigationOffset) + var(--navigationHeightScrolled))
    }
}

.banderole~.navigation--scrolled {
    top: calc(var(--banderoleHeight) - var(--navigationOffsetScrolled));
    padding-top: var(--navigationOffsetScrolled)
}

.banderole~.navigation--scrolled .navigation__item {
    padding-top: 0;
    padding-bottom: 0
}

.banderole~.navigation--scrolled .navigation__submenu {
    padding-top: 14px
}

.banderole~.navigation--scrolled~.navigation__shadow {
    top: calc(var(--navigationHeightScrolled) + var(--banderoleHeight) - var(--navigationOffsetScrolled))
}

.banderole~.navigation--scrolled~.navigation-spacer {
    height: calc(var(--navigationHeightScrolled) + var(--banderoleHeight) - var(--navigationOffsetScrolled))
}

.banderole~* #toc_container,
.banderole~* .tablist__links--sticky {
    top: calc(var(--navigationHeightScrolled) + var(--banderoleHeight) - var(--navigationOffsetScrolled))
}

.banderole~* #toc_container .toc_list,
.banderole~* .tablist__links--sticky .toc_list {
    max-height: calc(100vh - ((var(--navigationHeightScrolled) + var(--banderoleHeight) - var(--navigationOffsetScrolled)) * 2) - 48px)
}

.banderole-spacer {
    display: none;
    width: 100%;
    height: var(--banderoleHeight)
}

@-webkit-keyframes background {
    to {
        background-position: 200% 50%
    }
}

@keyframes background {
    to {
        background-position: 200% 50%
    }
}

@media screen and (max-width:950px),
screen and (max-height:570px) {
    .banderole a {
        font-size: 0
    }

    .banderole a:before {
        display: inline-block
    }

    .banderole~.navigation {
        top: calc(var(--banderoleHeight) - var(--navigationOffsetScrolled))
    }

    .banderole~.navigation--mobile-open .navigation__links ul {
        top: calc(var(--banderoleHeight) + var(--navigationHeightScrolled) - var(--navigationOffsetScrolled) - 2px)
    }
}

html {
    scroll-padding-top: calc(var(--navigationHeightScrolled) + 10vh);
    scroll-behavior: smooth
}

::-moz-selection {
    color: #000;
    background: #f58546
}

::selection {
    color: #000;
    background: rgba(134, 237, 24, .35)
}

hr.divider {
    width: 33%;
    border: 0;
    height: 2px;
    background-color: rgba(0, 0, 0, .2);
    margin: var(--gutter-l) auto
}

h1 {
    font-size: 50px;
    line-height: 1.3
}

@media screen and (max-width:800px) {
    h1 {
        font-size: 30px
    }
}

h2 {
    font-size: 38px;
    margin-bottom: var(--gutter-s)
}

@media screen and (max-width:800px) {
    h2 {
        font-size: 28px
    }
}

h1,
h2 {
    font-family: apercu, sans-serif;
    font-weight: 700
}

h3 {
    font-family: "Px Grotesk", sans-serif;
    font-size: 28px
}

@media screen and (max-width:800px) {
    h3 {
        font-size: 24px
    }
}

.subtitle,
h4 {
    font-family: "Px Grotesk", sans-serif;
    font-size: 24px;
    margin-bottom: .5em
}

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

    .subtitle,
    h4 {
        font-size: 20px
    }
}

h5 {
    font-family: apercu, sans-serif;
    font-size: 20px;
    font-weight: 500
}

@media screen and (max-width:800px) {
    h5 {
        font-size: 16px
    }
}

h6 {
    font-family: "Px Grotesk", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .6
}

h6+* {
    margin-top: 1em
}

@media screen and (max-width:800px) {
    h6 {
        font-size: 14px
    }
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: currentColor
}

h1 u,
h2 u,
h3 u,
h4 u,
h5 u,
h6 u {
    text-decoration: none;
    border-bottom: 4px solid #f58546
}

h1 .highlight,
h2 .highlight,
h3 .highlight,
h4 .highlight,
h5 .highlight,
h6 .highlight {
    --color: #f58546;
    background-image: linear-gradient(to right, var(--color), var(--color));
    background-size: 0 33%;
    background-position: left bottom;
    background-repeat: no-repeat;
    -webkit-animation: highlight 2s forwards ease-in-out;
    animation: highlight 2s forwards ease-in-out
}

@-webkit-keyframes highlight {
    to {
        background-size: 100% 33%
    }
}

@keyframes highlight {
    to {
        background-size: 100% 33%
    }
}

p {
    font-size: 18px
}

@media screen and (max-width:800px) {
    p {
        font-size: 16px
    }
}

img {
    max-width: 100%;
    height: auto
}

.image--shadow {
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25)
}

@media screen and (max-width:800px) {
    .mobile-stacked-images img {
        margin-right: -30px
    }
}

.blurry-logo-box {
    display: inline-block;
    background-color: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: var(--gutter-m);
    border-radius: 10px;
    width: auto !important
}

.blurry-logo-box img {
    --w: 100%;
    display: block;
    width: var(--w) !important
}

.no-gutter-bottom {
    margin-bottom: 0 !important
}

.bigtext {
    font-size: 24px
}

.bigtext__price {
    font-size: 2.5em;
    font-family: "Px Grotesk", sans-serif
}

@media screen and (max-width:800px) {
    .bigtext {
        font-size: 18px
    }
}

.subtext {
    font-size: 14px
}

@media screen and (max-width:800px) {
    .subtext {
        font-size: 10px
    }
}

.left-border {
    border-left: 4px solid #f58546;
    padding-left: 18px
}

.faq-content a:not(.btn),
.inline-link {
    font-family: "Px Grotesk", sans-serif;
    border-bottom: 2px solid #f58546;
    color: currentColor
}

.faq-content a:hover:not(.btn),
.inline-link:hover {
    border-color: currentColor
}

.checklist-download {
    margin-top: calc(var(--gutter-m) + 125px * -1);
    margin-bottom: calc(var(--gutter-m) + 125px * -1)
}

@media screen and (max-width:800px) {
    .checklist-download {
        margin-top: 0;
        margin-bottom: 0
    }
}

.breather-box {
    --c-bg: #fff;
    --c-text: #000;
    background-color: var(--c-bg);
    color: var(--c-text);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    padding: var(--gutter-m);
    width: 100%
}

.breather-box--border {
    box-shadow: none;
    border: 2px solid #e5e5e5
}

#post-navigation .current,
#post-navigation .dots,
#post-navigation a,
.btn {
    display: inline-table;
    text-transform: uppercase;
    border-radius: 100px;
    padding: var(--gutter-xs) var(--gutter-m);
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: .1em;
    cursor: pointer;
    transition: all .3s ease
}

.btn--small-padding {
    padding: var(--gutter-xs)
}

.btn--primary {
    background-color: #f58546;
    color: #fff
}

.btn--primary:hover {
    background-color: #f58546;
    color: #fff
}

.btn--primary:hover.btn--arrow-right:after {
    filter: invert(1)
}

.btn--primary:hover.btn--notification:after {
    background-color: #f58546;
    color: #fff
}

.btn--primary.btn--notification:after {
    background-color: #f58546;
    color: #fff
}

.section--black .btn--primary {
    border: 2px solid currentColor
}

#post-navigation a,
.btn--secondary {
    background-color: #000;
    color: #fff
}

#post-navigation a:hover,
.btn--secondary:hover {
    background-color: #f58546;
    color: #000
}

#post-navigation a:hover .btn--notification:after,
.btn--secondary:hover .btn--notification:after {
    background-color: #000;
    color: #fff
}

#post-navigation a.btn--notification:after,
.btn--secondary.btn--notification:after {
    background-color: #f58546;
    color: #000
}

.btn--cta {
    font-size: 1.5em;
    padding: var(--gutter-m) var(--gutter-l);
    background-color: #f58546;
    color: #000
}

.btn--cta:hover {
    background-color: #000;
    color: #fff
}

.btn--application {
    position: relative;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    text-transform: unset;
    line-height: 150%;
    font-family: apercu, sans-serif;
    font-weight: 400;
    border-radius: 10px;
    padding-left: 90px;
    padding-right: 20px
}

.btn--application strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 20px
}

.btn--application:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    background-image: url('application-white.svg');
    width: 50px;
    height: 50px;
    left: 20px
}

.btn--application:hover {
    background-color: #f58546;
    color: #000
}

.btn--application:hover:before {
    background-image: url('application-black.svg')
}

#post-navigation .current,
#post-navigation .dots,
.btn--border-black {
    background-color: transparent;
    color: #000;
    border: 2px solid currentColor
}

#post-navigation .current:hover,
#post-navigation .dots:hover,
.btn--border-black:hover {
    color: #f58546
}

.btn--border-white {
    background-color: transparent;
    color: #fff;
    border: 2px solid currentColor
}

.btn--border-white:hover {
    color: #f58546
}

.btn--border-white.btn--arrow-right:after {
    filter: invert(1)
}

.btn--border-bottom {
    border-radius: 0;
    padding: 0;
    color: #000;
    letter-spacing: unset;
    border-bottom: 2px solid currentColor
}

.btn--border-bottom:hover {
    color: #f58546
}

.btn--tile {
    position: relative;
    overflow: hidden;
    display: block;
    background-color: #fff;
    color: #000;
    border: 2px solid rgba(0, 0, 0, .2);
    padding: calc(var(--gutter-s) + 2px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    letter-spacing: unset;
    line-height: 1.2;
    cursor: pointer;
    text-transform: none
}

.btn--tile:hover {
    background-color: #fefefe;
    border-color: 2px solid #f58546;
    box-shadow: 0 4px 18px rgba(134, 237, 24, .5);
    box-shadow: inset 0 2px 9px rgba(0, 0, 0, .15)
}

.btn--tile__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--gutter-xs)
}

.btn--tile__title h3 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    display: block;
    flex: 1;
    padding-left: var(--gutter-xs) !important
}

.btn--tile__title img {
    margin-bottom: 0
}

.btn--tile__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    transform-origin: 0 0;
    transform: translate(29.3%) rotate(45deg);
    background: #f58546;
    box-shadow: 0 0 0 999px #f58546;
    -webkit-clip-path: inset(0 -100%);
    clip-path: inset(0 -100%);
    font-size: 14px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 500;
    padding: var(--gutter-micro)
}

.btn--centered {
    display: table;
    margin-left: auto;
    margin-right: auto
}

.btn--full-width {
    width: 100%
}

.btn--nowrap {
    white-space: nowrap
}

.btn--arrow-right {
    position: relative;
    text-align: left;
    padding-right: 84px !important
}



.btn--arrow-right-small {
    text-transform: unset
}



.btn--notification {
    position: relative;
    padding-right: 80px
}

.btn--notification:after {
    content: attr(data-notification);
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    font-family: "Px Grotesk", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 20px;
    padding: 0 8px 3px 8px;
    margin-left: 15px;
    display: inline-block;
    vertical-align: middle;
    transition: all .3s ease
}

.btn__notification {
    font-family: "Px Grotesk", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 20px;
    padding: 0 8px;
    margin-left: 15px;
    display: inline-block;
    vertical-align: middle;
    transition: all .3s ease
}

#post-navigation .current:disabled,
#post-navigation .current[disabled],
#post-navigation .dots:disabled,
#post-navigation .dots[disabled],
#post-navigation a:disabled,
#post-navigation a[disabled],
.btn--disabled,
.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed
}

*+.btn-set {
    margin-top: var(--gutter-m)
}

.btn-set+* {
    margin-top: calc(var(--gutter-m) - var(--gutter-xs))
}

.btn-set {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-left: calc(var(--gutter-xs) * -1);
    margin-right: calc(var(--gutter-xs) * -1)
}

.btn-set--centered {
    justify-content: center
}

.btn-set--spread {
    justify-content: space-between
}

#post-navigation .btn-set .current,
#post-navigation .btn-set .dots,
#post-navigation .btn-set a,
.btn-set #post-navigation .current,
.btn-set #post-navigation .dots,
.btn-set #post-navigation a,
.btn-set .btn {
    margin-left: var(--gutter-xs);
    margin-right: var(--gutter-xs);
    margin-bottom: var(--gutter-xs)
}

.calendar {
    display: flex;
    flex-direction: column
}

.calendar__week {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.calendar__week+.calendar__week {
    border-top: 2px solid rgba(167, 167, 167, .5)
}

.calendar__day {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(167, 167, 167, .5);
    border-right: 1px solid rgba(167, 167, 167, .5)
}

.calendar__day-header {
    background-color: #f0f0f0;
    border-bottom: 2px solid rgba(167, 167, 167, .5);
    padding: 8px
}

.calendar__day-header h3 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: rgba(0, 0, 0, .5)
}

.calendar__day-header h3 span {
    font-family: apercu, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: rgba(0, 0, 0, .9)
}

.calendar__day-header p {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    color: rgba(0, 0, 0, .5);
    margin-top: 14px
}

.calendar__day-times {
    flex: 1;
    background-color: rgba(240, 240, 240, .5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.calendar__day-footer {
    background-color: #f0f0f0;
    border-top: 2px solid rgba(167, 167, 167, .5);
    padding: 8px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    color: rgba(0, 0, 0, .5)
}

.calendar__time {
    background-color: rgba(226, 226, 246, .5);
    border-radius: 2px;
    border: 2px solid #fff;
    padding: 6px 8px;
    color: rgba(0, 0, 0, .5);
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    cursor: pointer;
    transition: all .3s ease
}

.calendar__time span {
    display: inline-block;
    background: #6264a7;
    border-radius: 24px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 15px;
    color: #fff;
    opacity: 0;
    transition: all .3s ease
}

.calendar__time:hover {
    background-color: #e2e2f6
}

.calendar__time:hover span {
    opacity: 1
}

.calendar__time--selected {
    background-color: rgba(134, 237, 24, .5)
}

.calendar__time--selected span {
    background-color: #f58546
}

.calendar__time--selected:hover {
    background-color: rgba(134, 237, 24, .5)
}

.calendar__time--selected:hover span {
    opacity: 0
}

@media screen and (max-width:800px) {
    .calendar__week {
        flex-direction: column
    }

    .calendar__day--past {
        display: none
    }
}

.card-link {
    position: relative;
    display: table;
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, .2);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    padding: 20px 80px 20px 20px;
    color: #000;
    transition: all .3s ease
}

.card-link:hover {
    border-color: #f58546
}



.card-link__icons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 10px
}

.card-link__icons img {
    display: block;
    height: 22px;
    margin: 0
}

.card-link__icons img+img {
    margin-left: 10px
}

.card-link__title {
    text-align: left;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px
}

.card-link__subtitle {
    text-align: left;
    font-family: apercu, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%
}

*+.card-link {
    margin-top: 20px
}

*+.carddeck,
.carddeck+* {
    margin-top: var(--gutter-l)
}

.carddeck {
    --color: #f58546;
    position: relative;
    padding-right: 23px
}

.carddeck--on-black .carddeck__indicator:not(.carddeck__indicator--active) {
    background-color: rgba(255, 255, 255, .25)
}

.carddeck__indicators {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 8px;
    height: 100%
}

.carddeck__indicator {
    width: 6px;
    height: auto;
    flex: 1;
    background-color: rgba(0, 0, 0, .25)
}

.carddeck__indicator+.carddeck__indicator {
    margin-top: 8px
}

.carddeck__indicator--active {
    background-color: var(--color);
    width: 8px
}

.carddeck__cards {
    position: relative;
    display: flex;
    width: calc(100% - 18px);
    margin-left: 18px
}

.carddeck__card {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 30px;
    background-color: #fff;
    color: #000;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    opacity: 1;
    transition: all .6s ease
}

.carddeck__card h2 {
    margin-bottom: 15px
}

.carddeck__card div>:first-child {
    padding-top: 0;
    margin-top: 0
}

.carddeck__card div>:last-child {
    padding-bottom: 0;
    margin-bottom: 0
}

.carddeck__card--vcentered {
    justify-content: center
}

.carddeck__card--small-padding {
    padding: 15px
}

.carddeck__card--messured {
    position: absolute
}

.carddeck__card--top {
    transform: scale(1);
    z-index: 3
}

.carddeck__card--center {
    transform: translateX(calc(-5% - 9px)) scale(.9);
    z-index: 2
}

.carddeck__card--bottom {
    transform: translateX(calc(-10% - 18px)) scale(.8);
    z-index: 1
}

.carddeck__card--fade {
    transform: translateX(calc(2.5% + 9px)) scale(1.05);
    opacity: 0;
    z-index: 4
}

.carddeck__card--hidden {
    display: none
}

.carddeck--no-indicators {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.carddeck--no-indicators .carddeck__indicators {
    display: none
}

.carddeck--right {
    padding-right: 0;
    padding-left: 23px
}

.carddeck--right .carddeck__indicators {
    left: 0;
    right: auto;
    align-items: flex-end
}

.carddeck--right .carddeck__cards {
    margin-left: 0
}

.carddeck--right .carddeck__card--center {
    transform: translateX(calc(5% + 9px)) scale(.9)
}

.carddeck--right .carddeck__card--bottom {
    transform: translateX(calc(10% + 18px)) scale(.8)
}

.carddeck--right .carddeck__card--fade {
    transform: translateX(calc(-2.5% - 9px)) scale(1.05)
}

.cards {
    --gutter: 30px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: calc(-1 * var(--gutter))
}

.cards.co-grid {
    margin-bottom: 0
}

.card,
.cards__card {
    padding: 30px 20px 20px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 0 2px 30px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .1);
    border-radius: 8px;
    margin-bottom: var(--gutter);
    overflow: hidden
}

.card>*+*,
.cards__card>*+* {
    margin-top: 15px
}

.card--green {
    background-color: #f58546;
    color: #000
}

.card--green a {
    color: #000;
    text-decoration: underline
}

.card--green a:hover {
    opacity: .5
}

.card--infobox {
    padding: 20px;
    border-radius: 20px
}

.cards__card--no-padding {
    padding: 0
}

.cards__card--flex-vertical {
    display: flex;
    flex-direction: column
}

.cards__card--transparent {
    background: 0 0;
    border: 0
}

.card {
    margin-bottom: 0
}

.cards__card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    padding: 30px 20px
}

.cards__card-image img {
    display: block;
    max-height: 100%
}

@media screen and (max-width:600px) {
    .cards__card-image {
        height: 125px;
        padding: 20px
    }
}

.cards__card--dark-top {
    background-color: rgba(237, 242, 226, .2);
    padding: 15px;
    border-radius: 8px 8px 0 0
}

.cards__card--dark-bottom {
    background-color: #1e221e;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    margin-top: 0 !important;
    flex: 1
}

.cards__card--3 {
    width: calc(33.33333% - calc(2 * var(--gutter)/ 3));
    margin-right: var(--gutter)
}

.cards__card--3:nth-child(3n) {
    margin-right: 0
}

@media screen and (max-width:950px) {
    .cards__card--3 {
        width: calc(50% - calc(1 * var(--gutter)/ 2))
    }

    .cards__card--3:nth-child(3n) {
        margin-right: var(--gutter)
    }

    .cards__card--3:nth-child(2n) {
        margin-right: 0
    }
}

@media screen and (max-width:550px) {
    .cards__card--3 {
        width: 100%;
        margin-right: 0 !important
    }
}

*+.collage,
.collage+* {
    margin-top: var(--gutter-l) !important
}

.collage {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 20%
}

.collage__big img,
.collage__small img {
    display: block;
    width: 100% !important
}

.collage__big {
    align-self: flex-end;
    aspect-ratio: 164/117;
    width: 100%
}

.collage__small {
    position: absolute;
    left: 0;
    bottom: 0;
    aspect-ratio: 131/126;
    width: 40%
}

.collage__text {
    border-left: 2px solid #f58546;
    padding-left: var(--gutter-xs);
    margin-top: var(--gutter-m);
    margin-left: calc(20% + (20px + var(--gutter-m)))
}

.collage__text strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400
}

*+.content-box,
.content-box+* {
    margin-top: var(--gutter-l)
}

.content-box {
    border-radius: 10px;
    padding: var(--gutter-m);
    margin: 0 auto;
    max-width: 570px;
    width: 100%;
    overflow: hidden
}

.content-box--wide {
    max-width: 1030px
}

.content-box--small-padding {
    padding: var(--gutter-xs)
}

.content-box--big-padding {
    padding: var(--gutter-xxl)
}

@media screen and (max-width:760px) {
    .content-box--big-padding {
        padding: var(--gutter-m)
    }
}

.content-box--shadow {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25)
}

.content-box--border {
    border: 2px solid rgba(0, 0, 0, .1)
}



@media screen and (max-width:959px) {
    .content-box--purple-queue {
        padding-bottom: 260px;
        background-size: auto 250px, 100%;
        background-position: center bottom, center
    }
}



@media screen and (max-width:959px) {
    .content-box--green-dataprotection {
        padding-bottom: 260px;
        background-size: auto 250px, 100%;
        background-position: center bottom, center
    }
}



@media screen and (max-width:959px) {
    .content-box--white-datenschutz {
        padding-bottom: 260px;
        background-size: auto 250px, 100%;
        background-position: center bottom
    }
}

.content-box--white-on-black {
    background-color: rgba(255, 255, 255, .2);
    color: #fff
}

.content-box--white {
    background-color: #fff;
    color: #000
}

.content-box--full-width {
    max-width: 100%
}

.content-box p+p {
    margin-top: var(--gutter-xs)
}

.content-box>.co-grid {
    margin-top: 0;
    margin-bottom: 0
}

.co-grid .content-box:not(.content-box--nofill) {
    height: 100%
}

*+.content-box {
    margin-top: var(--gutter-xl)
}



.cookie-indicator:before {
    content: "";
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em;
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    background-color: #fff;
    background-image: var(--icon);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle
}



.cookie-deny-button,
.cookie-link,
.cookie-settings-button {
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, .2)
}

.cookie-deny-button:hover,
.cookie-link:hover,
.cookie-settings-button:hover {
    color: #f58546;
    border-color: #f58546
}

.cookie-info {
    margin: var(--gutter-xs) 0;
    font-size: 12px;
    text-align: left;
    width: 100%
}

.cookie-info th {
    white-space: nowrap;
    width: 120px
}

.cookie-info td,
.cookie-info th {
    padding: var(--gutter-micro)
}

.cookie-info tr:nth-child(odd) td,
.cookie-info tr:nth-child(odd) th {
    background-color: #fafafa
}

.cookie-info tr:nth-child(even) td,
.cookie-info tr:nth-child(even) th {
    background-color: #f0f0f0
}


.cta-contact h2 {
    font-size: 28px;
    line-height: 1.5;
    margin-bottom: 20px
}

.cta-contact>p {
    font-size: 20px;
    line-height: 1.5
}

.cta-contact .co-grid__col img {
    display: block;
    margin-bottom: 8px;
    margin-left: initial;
    margin-right: initial
}

.cta-contact .co-grid__col h4 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px
}

.cta-contact .co-grid__col h4 span {
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .1em;
    color: rgba(0, 0, 0, .5)
}

@media screen and (max-width:1170px) {
    .cta-contact {
        padding: 60px;
        background-image: linear-gradient(0deg, #fff 10.06%, #dcebd8 125.84%)
    }
}

@media screen and (max-width:960px) {
    .cta-contact {
        padding: var(--gutter-m)
    }

    .cta-contact .co-grid__col img {
        display: inline-block;
        margin-bottom: 0
    }

    .cta-contact .co-grid__col img+h4 {
        margin-top: 0
    }
}

*+.expandable,
.expandable+* {
    margin-top: var(--gutter-l)
}

.expandable {
    border-radius: 10px;
    border: 2px solid #e5e5e5;
    background-color: #fff
}

.expandable--shadow {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25)
}

.expandable--no-border {
    border: 0
}

.expandable__main {
    padding: 0 var(--gutter-l);
    padding-bottom: 50px
}

.expandable__main--small-padding {
    padding-left: var(--gutter-s);
    padding-right: var(--gutter-s)
}

.expandable__extra {
    display: none;
    background-color: #f0f0f0;
    border-top: 2px solid #e5e5e5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden
}

.expandable__extra-full {
    background-color: #fff;
    padding: var(--gutter-s)
}

.expandable__extra-left,
.expandable__extra-right {
    flex: 0 0 50%;
    padding: var(--gutter-m) var(--gutter-l)
}

.expandable__extra-left h4,
.expandable__extra-right h4 {
    margin-bottom: var(--gutter-l)
}

.expandable__extra-left {
    border-right: 1px solid #e5e5e5
}

.expandable__extra-right {
    border-left: 1px solid #e5e5e5
}



.expandable>label:hover {
    opacity: 1
}

.expandable>label:before {
    content: "Details ausklappen"
}

.expandable>input[type=checkbox] {
    display: none
}



.expandable>input[type=checkbox]:checked+label:before {
    content: "Details einklappen"
}

.expandable>input[type=checkbox]:checked+label+.expandable__extra {
    display: flex
}

@media screen and (max-width:768px) {
    .expandable__extra {
        flex-direction: column
    }

    .expandable__extra-left,
    .expandable__extra-right {
        flex: 0 0 100%
    }
}

*+.fade-box,
.fade-box+* {
    margin-top: 90px
}

.fade-box {
    background: linear-gradient(360deg, rgba(0, 0, 0, .2) .47%, rgba(0, 0, 0, .09) 95.48%);
    box-shadow: inset 0 4px 20px rgba(134, 236, 22, .05);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    border-radius: 10px;
    padding: 30px
}

.fade-box--on-black {
    background: linear-gradient(360deg, rgba(255, 255, 255, .2) .47%, rgba(255, 255, 255, .09) 95.48%);
    color: #fff
}

.fade-box>p {
    font-size: 20px;
    line-height: 1.5
}

.fade-box .grid {
    margin-top: 40px
}

.fade-box h4 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px
}

.fade-box a:not(.btn) {
    border-bottom: 2px solid #f58546;
    font-size: 18px;
    line-height: 160%;
    color: #fff
}

.fade-box a:not(.btn):hover {
    border-color: #fff
}

.fader {
    display: flex;
    flex-direction: column
}

.fader--no-header .fader__header {
    display: none
}

.fader--centered {
    justify-self: center
}

.fader--indicators-centered .fader__indicators {
    left: 50%;
    right: auto;
    transform: translate3d(-50%, -50%, 0)
}

.fader--header-below .fader__header {
    order: 2;
    margin-bottom: 0;
    margin-top: var(--gutter-m)
}

.fader--header-below .fader__items {
    order: 1
}

.fader__header {
    position: relative;
    order: 1;
    height: 16px;
    margin-bottom: var(--gutter-m)
}

.fader__title {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .5);
    text-align: center
}

.fader__indicators {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center
}

.fader__indicator {
    width: 12px;
    height: 12px;
    background-color: #c4c4c4;
    border-radius: 50%
}

.fader__indicator+.fader__indicator {
    margin-left: 10px
}

.fader__indicator--active {
    width: 16px;
    height: 16px;
    background-color: #f58546
}

.fader__items {
    position: relative;
    order: 2
}

.fader__item {
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity .6s ease;
    z-index: 0
}

.fader__item>img {
    display: block
}

.fader__item--vcentered {
    display: flex;
    align-items: center
}

.fader__item--messured {
    position: absolute
}

.fader__item--active {
    opacity: 1;
    z-index: 1
}

.fader__next {
    cursor: pointer
}

@media screen and (max-width:1000px) {
    .fader__title {
        text-align: left
    }

    .fader__indicators {
        left: auto;
        right: 0
    }
}

*+.floating-form,
.floating-form+* {
    margin-top: 30px
}

.floating-form {
    --gutter: 30px
}

.floating-form>*+* {
    margin-top: var(--gutter)
}

.floating-form__row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center
}

.floating-form__row--centered {
    justify-content: center
}

.floating-form__col {
    --maxWidth: initial;
    flex: 1 1 0px;
    width: 0;
    max-width: var(--maxWidth)
}

.floating-form__col+.floating-form__col {
    margin-left: var(--gutter)
}

.floating-form__col .floating-form__field+.floating-form__field,
.floating-form__col .floating-form__field+.floating-form__select,
.floating-form__col .floating-form__select+.floating-form__field,
.floating-form__col .floating-form__select+.floating-form__select {
    margin-top: var(--gutter)
}

.floating-form__icon {
    margin-right: 20px
}

.floating-form__icon img {
    display: block
}

.floating-form__description {
    margin-left: 20px
}

.floating-form__field {
    position: relative;
    border: 2px solid #c4c4c4;
    border-radius: 5px
}

.floating-form__field input,
.floating-form__field label,
.floating-form__field textarea {
    font-size: 18px;
    font-family: apercu, sans-serif;
    line-height: 1.6
}

.floating-form__field textarea {
    --height: auto;
    resize: none;
    height: var(--height)
}

.floating-form__field label {
    position: absolute;
    top: 12px;
    left: 25px;
    pointer-events: none;
    color: rgba(0, 0, 0, .6);
    transition: all .3s ease;
    background-color: #fff;
    overflow: hidden;
    max-width: calc(100% - 60px);
    text-overflow: ellipsis;
    white-space: nowrap
}

.floating-form__field input,
.floating-form__field textarea {
    display: block;
    width: 100%;
    padding: 10px 25px;
    color: #000
}



.floating-form__field input:not(:-ms-input-placeholder)~label,
.floating-form__field textarea:not(:-ms-input-placeholder)~label {
    transform: translateY(calc(-50% - 12px));
    padding: 0 5px;
    left: 20px;
    font-size: 12px
}

.floating-form__field input:focus~label,
.floating-form__field input:not(:placeholder-shown)~label,
.floating-form__field textarea:focus~label,
.floating-form__field textarea:not(:placeholder-shown)~label {
    transform: translateY(calc(-50% - 12px));
    padding: 0 5px;
    left: 20px;
    font-size: 12px
}

.floating-form__field .customSelect {
    position: relative;
    height: 48px
}

.floating-form__field .customSelect .select-hide {
    display: none
}

.floating-form__field .customSelect .select-items {
    position: absolute
}

.floating-form__field--highlight {
    border-color: #000
}

.floating-form__field--short {
    width: 100%;
    max-width: 180px
}

.floating-form__field--short input {
    font-size: 20px;
    font-family: "Px Grotesk", sans-serif;
    padding: 10px 15px
}


.floating-form__field--short input:not(:-ms-input-placeholder)~label {
    left: 5px;
    max-width: calc(100% - 10px);
    transform: translateY(calc(-50% - 18px))
}

.floating-form__field--short input:focus~label,
.floating-form__field--short input:not(:placeholder-shown)~label {
    left: 5px;
    max-width: calc(100% - 10px);
    transform: translateY(calc(-50% - 18px))
}

.floating-form__field--short label {
    font-size: 12px;
    top: 18px;
    left: 15px;
    max-width: calc(100% - 30px)
}

.floating-form__field--small input,
.floating-form__field--small textarea {
    padding: var(--gutter-micro) var(--gutter-xs);
    font-size: 16px
}

.

.floating-form__field--small input:not(:-ms-input-placeholder)~label,
.floating-form__field--small textarea:not(:-ms-input-placeholder)~label {
    left: calc(var(--gutter-xs) - 5px);
    max-width: calc(100% - (var(--gutter-xs) * 2));
    transform: translateY(calc(-50% - 10px))
}

.floating-form__field--small input:focus~label,
.floating-form__field--small input:not(:placeholder-shown)~label,
.floating-form__field--small textarea:focus~label,
.floating-form__field--small textarea:not(:placeholder-shown)~label {
    left: calc(var(--gutter-xs) - 5px);
    max-width: calc(100% - (var(--gutter-xs) * 2));
    transform: translateY(calc(-50% - 10px))
}







.floating-form__upload {
    position: relative;
    max-width: 570px;
    margin: 0 auto
}

.floating-form__upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
}

.floating-form__upload label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #c4c4c4;
    border-radius: 5px;
    padding: 20px;
    transition: all .3s ease;
    cursor: pointer
}

.floating-form__upload label:hover {
    border-color: #f58546
}

.floating-form__upload label:before {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    padding: 1px 5px;
    background-color: #fff;
    border: 1px solid #fff;
    font-family: apercu, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .6);
    white-space: nowrap
}

.floating-form__upload label span {
    position: relative;
    display: inline-block;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15), 0 4px 20px rgba(0, 0, 0, .05);
    border-radius: 10px;
    padding: 10px 20px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4
}

.floating-form__upload label span.icon-application:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -20px;
    transform: translate3d(-100%, -50%, 0);
    width: 26px;
    height: 34px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

@media screen and (max-width:500px) {
    .floating-form__upload label span.icon-application:before {
        display: none
    }
}

.floating-form__file {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 15px 60px 15px 20px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    margin-top: 20px
}

.floating-form__file span {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url('icon-cancel-round.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer
}

.floating-form__checkbox {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.floating-form__checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transform: scale(.001)
}

.floating-form__checkbox input+label {
    position: relative;
    padding-left: calc(26px + var(--gutter-xs));
    cursor: pointer
}

.floating-form__checkbox input+label:before {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.floating-form__checkbox input:checked+label:before {
}

.floating-form__checkbox input:disabled+label {
    cursor: not-allowed
}

.floating-form__checkbox input:disabled+label:before {
    opacity: .5
}

.floating-form__privacy-toggle {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.floating-form__privacy-toggle input {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 1px;
    right: calc(15px + 13px);
    transform: translateY(-50%)
}

.floating-form__privacy-toggle input+label {
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, .2);
    border-radius: 10px;
    padding: 15px;
    padding-right: calc(15px + 15px + 26px);
    font-size: 18px;
    line-height: 140%
}

.floating-form__privacy-toggle input+label a {
    border-bottom: 2px solid #f58546;
    font-weight: 700;
    color: #000
}

.floating-form__privacy-toggle input+label a:hover {
    border-color: #000
}

.floating-form__privacy-toggle input+label:before {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-image: url('checkbox-unchecked.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer
}

.floating-form__privacy-toggle input:checked+label:before {
    background-image: url('checkbox-checked.svg')
}

.floating-form__submit {
    background-color: #f58546;
    color: #000;
    text-transform: uppercase;
    display: block;
    border-radius: 100px;
    padding: 15px 40px;
    margin: 50px auto;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: .1em;
    cursor: pointer;
    transition: all .3s ease
}

.floating-form__submit:hover {
    background-color: #000;
    color: #fff
}

.floating-form__submit:disabled,
.floating-form__submit[disabled] {
    background-color: #f58546;
    opacity: .5;
    color: currentColor;
    cursor: not-allowed
}

.floating-form__submit--fullwidth {
    width: 100%
}

.floating-form__label--disabled,
.floating-form__label--disabled:hover {
    background-color: #f58546;
    color: currentColor;
    cursor: not-allowed
}

.floating-form__error,
.floating-form__hint {
    border-radius: 6px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-bottom: 25px;
    text-align: center
}

.floating-form__error h2,
.floating-form__hint h2 {
    font-size: 18px;
    margin-bottom: 10px
}

.floating-form__error p,
.floating-form__hint p {
    font-size: 16px
}

.floating-form__error--active,
.floating-form__hint--active {
    display: flex
}

.floating-form__error {
    background-color: #ff7762
}

.floating-form__hint {
    background-color: rgba(102, 130, 232, .4)
}

.floating-form__loader {
    position: relative;
    display: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #f58546;
    margin: var(--gutter) auto;
    overflow: hidden
}

.floating-form__loader:after,
.floating-form__loader:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #fff;
    -webkit-animation: load 2s infinite ease;
    animation: load 2s infinite ease
}

.floating-form__loader:after {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.floating-form__loader--active {
    display: block
}

.floating-form+* {
    margin-top: 30px
}

@-webkit-keyframes load {
    to {
        width: 33%;
        left: 100%
    }
}

@keyframes load {
    to {
        width: 33%;
        left: 100%
    }
}

@media screen and (max-width:800px) {
    .floating-form__row {
        flex-direction: column
    }

    .floating-form__col {
        width: 100%;
        max-width: 100%
    }

    .floating-form__col+.floating-form__col {
        margin-left: 0;
        margin-top: 25px
    }
}

*+.grid-slider,
.grid-slider+* {
    margin-top: 60px
}

.grid-slider {
    position: relative;
    display: flex;
    flex-wrap: wrap
}

.grid-slider__item {
    flex: 1 1 calc(25% - 30px);
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25)
}

.grid-slider__item+.grid-slider__item {
    margin-left: 30px
}

.grid-slider__item--measured {
    position: absolute;
    width: 100%;
    height: calc(100% - 30px);
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s ease
}

.grid-slider__item--active {
    opacity: 1
}

.grid-slider__image {
    display: block;
    border-radius: 10px;
    margin-bottom: 20px
}

.grid-slider__image img {
    border-radius: 10px;
    display: block;
    width: 100%
}

.grid-slider__indicators {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center
}

.grid-slider__indicator {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: #c4c4c4
}

.grid-slider__indicator+.grid-slider__indicator {
    margin-left: 6px
}

.grid-slider__indicator--active {
    width: 10px;
    height: 10px;
    background-color: #f58546
}

@media screen and (max-width:1220px) {
    .grid-slider {
        max-width: 325px;
        width: 100%;
        margin-left: auto;
        margin-right: auto
    }

    .grid-slider__item {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .grid-slider__item+.grid-slider__item {
        margin-left: 0
    }

    .grid-slider__image {
        order: 2;
        width: 100%;
        margin-bottom: 0;
        border-radius: 0 0 10px 10px
    }

    .grid-slider__content {
        order: 1;
        padding: 20px 25px
    }
}

.hero {
    width: 100%;
    max-width: 1250px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto
}

.hero__text {
    width: 100%;
    max-width: 670px
}

.hero__text h1 {
    font-family: apercu, sans-serif;
    font-size: 50px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 15px
}

.hero__text h2 {
    font-family: apercu, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5
}

.hero__text>*+* {
    margin-top: var(--gutter-m)
}

.hero__text+.hero__image {
    margin-left: 30px;
    padding-left: var(--gutter-l);
    padding-right: 0
}

.hero__image {
    width: 100%;
    max-width: 510px;
    padding-right: var(--gutter-l)
}



.hero__image img {
    width: 100%
}

.hero__image+.hero__text {
    margin-left: 30px
}

@media screen and (max-width:1080px) {
    .hero__image {
        max-width: 330px
    }
}

@media screen and (max-width:1000px) {
    .hero {
        flex-direction: column
    }

    .hero__text {
        order: 1;
        max-width: 90%;
        margin: 75px auto 25px auto;
        text-align: center;
    }

    .hero__text h1 {
        font-size: 45px;
        margin-bottom: 25px;
        line-height: 1.2;
    }

    .hero__text h2 {
        font-size: 20px;
        line-height: 1.2
    }

    .hero__text+.hero__image {
        padding-left: 0;
        margin-left: 0
    }

    .hero__image {
        order: 1;
        max-width: 50%;
        margin-bottom: 30px;
        padding-left: 0;
        padding-right: 0
    }

    .hero__image+.hero__text {
        margin-left: 0
    }
}

@media screen and (max-width:550px) {
    .hero__image {
        max-width: 100%
    }
}

.index-card {
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    padding: 30px
}

.index-card__top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 15px
}

.index-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1
}

.index-card__title {
    text-align: center;
    font-family: "Px Grotesk", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .6
}

.index-card__arrow {
    width: 50px;
    height: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .7;
    transition: all .3s ease
}

.index-card__arrow:hover {
    opacity: 1
}

.index-card__arrow--left {
    background-image: url('shift-arrow-left.svg')
}

.index-card__arrow--right {
    background-image: url('shift-arrow-right.svg')
}

.index-card__indicators {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 5px
}

.index-card__indicator {
    background-color: #c4c4c4;
    border-radius: 50%;
    width: 8px;
    height: 8px
}

.index-card__indicator+.index-card__indicator {
    margin-left: 10px
}

.index-card__indicator--active {
    --color: #f58546;
    width: 12px;
    height: 12px;
    background-color: var(--color)
}

.index-card__content {
    display: none
}

.index-card__content--active {
    display: block
}

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

    #post-navigation .index-card .current,
    #post-navigation .index-card .dots,
    #post-navigation .index-card a,
    .index-card #post-navigation .current,
    .index-card #post-navigation .dots,
    .index-card #post-navigation a,
    .index-card .btn {
        width: 100%;
        text-align: center
    }
}

.job-list__item {
    display: flex;
    flex-direction: row;
    align-items: center
}

.job-list__item+.job-list__item {
    margin-top: 50px
}

.job-list__item-icon {
    margin-right: 30px
}

.job-list__item-icon img {
    display: block;
    width: 68px;
    height: auto
}

.job-list__item-info {
    display: block;
    flex: 1;
    font-family: apercu, sans-serif;
    font-size: 28px;
    line-height: 150%;
    color: #000
}

.job-list__item-info small {
    background-color: rgba(196, 196, 196, .25);
    border-radius: 18px;
    padding: 3px 9px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: rgba(0, 0, 0, .35);
    display: inline-block;
    margin-bottom: 10px;
    transition: all .3s ease
}

.job-list__item-info:hover {
    color: #f58546
}

.job-list__item-info:hover small {
    background-color: #c4c4c4;
    color: rgba(0, 0, 0, .7)
}

.job-list__item-action {
    margin-left: 30px
}

.job-details {
    --top-color: #fff;
    --bottom-color: #f2f2f2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: visible;
    z-index: 90;
    position: relative;
    background-image: linear-gradient(var(--top-color) 50%, var(--bottom-color) 50%)
}

.job-details__item {
    background: #fff;
    border: 2px solid #000;
    box-shadow: 0 2px 30px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .1);
    border-radius: 20px;
    width: 160px;
    height: 160px;
    padding: 20px 5px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
    text-align: center;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1
}

.job-details__item img {
    width: auto;
    height: 48px;
    margin-bottom: 5px
}

.job-details__item div {
    display: flex;
    align-items: center;
    flex: 1
}

.job-details__item+.job-details__item {
    margin-left: 60px
}

@media screen and (max-width:1000px) {
    .job-details {
        height: 120px
    }
}

@media screen and (max-width:850px) {
    .job-details {
        height: 80px
    }

    .job-details__item {
        width: 120px;
        height: 120px;
        font-size: 16px;
        line-height: 1.1
    }

    .job-details__item img {
        height: 28px
    }

    .job-details__item+.job-details__item {
        margin-left: 20px
    }
}

@media screen and (max-width:470px) {
    .job-details {
        flex-wrap: wrap;
        height: auto;
        padding-bottom: 20px
    }

    .job-details__item {
        font-size: 14px;
        margin: 10px
    }

    .job-details__item img {
        height: 22px
    }

    .job-details__item+.job-details__item {
        margin-left: 10px
    }
}

.job-quote-image {
    max-width: 150px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2)
}

@media screen and (max-width:860px) {
    .job-list__item {
        flex-direction: column
    }

    .job-list__item+.job-list__item {
        margin-top: 20px
    }

    .job-list__item-icon {
        margin-right: 0;
        margin-bottom: 10px
    }

    .job-list__item-info {
        text-align: center;
        margin-bottom: 10px;
        font-size: 20px
    }

    .job-list__item-info small {
        font-size: 14px
    }

    .job-list__item-action {
        margin-left: 0
    }
}

*+.list,
.list+* {
    margin-top: var(--gutter-l)
}

h2+.list {
    margin-top: var(--gutter-m)
}

.list {
    --fs: inherit
}

@media screen and (max-width:768px) {
    .list {
        --fs: inherit !important
    }
}

.list--checkmarks,
.list--checkmarks-top {
    list-style: none
}

.list--checkmarks li,
.list--checkmarks-top li {
    position: relative;
    padding-left: 2em;
    font-size: var(--fs)
}

.list--checkmarks li+li,
.list--checkmarks-top li+li {
    margin-top: 15px
}

.list--checkmarks li:before,
.list--checkmarks-top li:before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - .5em);
    width: 1em;
    height: 1em;
    display: inline-block;
    background-image: url('checkmark-icon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.list--checkmarks-green li {
    padding-left: calc(2em + var(--gutter-xs));
    font-size: 20px
}

.list--checkmarks-green li+li {
    margin-top: var(--gutter-m)
}

.list--checkmarks-green li:before {
    width: 2em;
    top: calc(50% - 1em);
    height: calc(2em / 43 * 46);
    background-image: url('icon-checkmark-green.svg')
}

@media screen and (max-width:800px) {
    .list--checkmarks-green li {
        font-size: 18px
    }
}

.list--checkmarks-top li:before {
    top: calc(1em / 4)
}

.list--on-black.list--checkmarks li:before {
    filter: invert(1)
}

.list--horizontal {
    display: flex
}

.list--horizontal li+li {
    margin-top: 0;
    margin-left: 15px
}

.logos {
    --height: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.logos--fade img {
    opacity: .66;
    transition: opacity .3s ease
}

.logos--fade img:hover {
    opacity: 1
}

.logos picture {
    display: block;
    width: auto;
    max-width: 100%
}

.logos img {
    display: block;
    margin: var(--gutter-s);
    width: auto;
    height: 100%;
    max-height: var(--height)
}

@media screen and (max-width:800px) {
    .logos img {
        max-height: 50px;
        max-width: 25vw
    }
}




.navigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    height: var(--navigationHeight);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: height .3s ease, top .3s ease, padding-top .3s ease;
    font-size: 16px
}

.navigation__shadow {
    content: "";
    position: fixed;
    top: var(--navigationHeight);
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 97;
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    transition: all .3s ease;
    opacity: 0
}

.navigation--mobile-scrolllock {
    overflow: hidden
}

.navigation--scrolled {
    height: var(--navigationHeightScrolled)
}

.navigation--scrolled~.navigation__shadow {
    opacity: 1;
    top: var(--navigationHeightScrolled)
}

.navigation--scrolled .navigation__logo img {
    width: 117px
}

.navigation--scrolled .navigation__title {
    left: calc(117px + var(--gutter-xs))
}

.navigation--scrolled .navigation__submenu {
    padding-top: 21px
}

.navigation--scrolled~.navigation-spacer {
    height: var(--navigationHeightScrolled)
}

.navigation__links {
    position: relative;
    max-width: 1300px;
    padding: 0 25px;
    width: 100%;
    flex: 1;
    display: flex;
    /*
    justify-content: center;
    */
    align-items: center
}

.navigation__links ul {
    display: flex;
    list-style: none;
    height: 100%;
    justify-content: flex-start;
    align-items: stretch
}

.navigation__item {
    display: flex;
    align-items: stretch;
    transition: padding-top .3s ease, padding-bottom .3s ease;
    padding: calc(var(--gutter-m)/ 2)
}

@media screen and (min-width:950px) and (min-height:570px) {
    .navigation__item:hover .navigation__submenu {
        display: flex
    }

    .navigation__item:hover a,
    .navigation__item:hover span {
        color: #000;
        border-color: #f58546
    }

    .navigation__item:hover:after {
        display: block
    }
}

@media screen and (min-width:950px) and (min-height:570px) {

    .navigation__item .navigation__link a:after,
    .navigation__item .navigation__link span:after {
        background-image: url('arrow-up-black.svg')
    }
}

.navigation__item--active .navigation__link a,
.navigation__item--active .navigation__link span {
    color: #000
}

.navigation__link {
    display: flex;
    align-items: center
}

.navigation__link a,
.navigation__link span {
    cursor: pointer;
    color: rgba(0, 0, 0, .6);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    display: block;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent
}

.navigation__link img {
    display: block
}

.navigation__link--arrow a:after,
.navigation__link--arrow span:after {
    content: "";
    display: inline-block;
    margin-left: var(--gutter-micro);
    width: 10px;
    height: 10px;
    background-image: url('arrow-down-black.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .2
}

.navigation__submenu {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(50% - .5em);
    width: auto;
    z-index: 10;
    padding: 20px;
    padding-top: 31px;
    transform: translateX(-50%) translateY(100%);
    transition: all .3s ease
}

.navigation__logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 25px;
    display: block;
    margin-right: var(--gutter-m);
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap
}

.navigation__logo img {
    position: relative;
    left: -20px;
    display: block;
    width: 167px;
    height: 100%;
    pointer-events: none;
    transition: all .3s ease
}

.navigation__title {
    position: absolute;
    top: 50%;
    left: calc(167px + var(--gutter-xs));
    transform: translateY(calc(-50% + 3px));
    font-size: 14px;
    color: rgba(0, 0, 0, .54);
    letter-spacing: -.05em;
    transition: left .3s ease
}

.navigation__right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    align-items: center
}

.navigation__right a {
    --fw: 500;
    display: block;
    color: rgba(0, 0, 0, .6);
    text-transform: uppercase;
    font-weight: var(--fw);
    letter-spacing: .1em;
    font-size: .8em;
    border-bottom: 1px solid transparent
}

.navigation__right a+a {
    margin-left: var(--gutter-s)
}

.navigation__right a.navigation__phonenumber:before {
    content: "";
    display: none;
    width: 24px;
    height: 24px;
    background-image: url('telephony-indicator.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.navigation__right a:hover {
    color: #000;
    border-color: #f58546
}

.navigation__mobile-button {
    position: absolute;
    right: var(--gutter-m);
    top: calc(50% - 24px);
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.navigation__mobile-button div {
    position: relative;
    width: 32px;
    height: 4px;
    border-radius: 4px;
    background-color: #949faf;
    transition: all .3s ease
}

.navigation__mobile-button div:after,
.navigation__mobile-button div:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-color: #949faf;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    transition: all .3s ease
}

.navigation__mobile-button div:before {
    transform: translateY(-200%) rotate(0)
}

.navigation__mobile-button div:after {
    transform: translateY(200%) rotate(0)
}

.navigation__mobile-button--active div {
    background-color: transparent
}

.navigation__mobile-button--active div:before {
    transform: translateY(0) rotate(45deg)
}

.navigation__mobile-button--active div:after {
    transform: translateY(0) rotate(-45deg)
}

.navigation-spacer {
    position: relative;
    width: 100%;
    height: var(--navigationHeight)
}

.submenu {
    --c-link: #000;
    --c-link-hover: #f58546;
    --c-link-border: 0, 0, 0
}

.submenu__inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    border-radius: 10px
}

.submenu__left,
.submenu__right {
    display: flex;
    flex-direction: column;
    padding: var(--gutter-s) 0
}

.submenu__left {
    background-color: #fff
}

.submenu__right {
    --width: 270px;
    background-color: #edf2e2;
    width: var(--width);
    flex: 0 0 var(--width)
}

.submenu__right--align-bottom {
    justify-content: flex-end
}

.submenu__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.submenu__row--fill {
    flex: 1
}

.submenu__column {
    --col-width: auto;
    width: var(--col-width);
    flex: 0 0 var(--col-width)
}

.submenu__column--border-right {
    border-right: 2px solid rgba(0, 0, 0, .2)
}

.submenu__link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    height: calc(70px + var(--gutter-s));
    padding: calc(var(--gutter-s)/ 2) var(--gutter-s)
}



.submenu__link--lp-vb:hover .submenu__link-text :not(.submenu__link-tag) {
    color: rgba(255, 255, 255, .8) !important
}

.submenu__link--lp-vb .submenu__link-text :not(.submenu__link-tag) {
    color: #fff
}

.submenu__link-icon {
    margin-right: calc(var(--gutter-s)/ 2);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex: 0 0 70px
}

.submenu__link-icon img {
    display: block
}

.submenu__link-text {
    flex: 1
}

.submenu__link-text * {
    transition: color .2s ease-out
}

.submenu__link-text strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 8px;
    font-weight: 500;
    color: #000
}

.submenu__link-text p {
    font-size: 14px;
    color: rgba(0, 0, 0, .6);
    line-height: 1.4
}

.submenu__link-tag {
    border-radius: 24px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.5;
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
    background-color: #f58546;
    font-family: "Px Grotesk", sans-serif;
    color: #000
}

.submenu__link--3-lines {
    height: calc(90px + var(--gutter-s))
}

.submenu__link--border-bottom {
    position: relative;
    padding-bottom: calc(var(--gutter-s) + 2px);
    height: calc(70px + (var(--gutter-s) * 1.5 + 2px))
}

.submenu__link--border-bottom:after {
    content: "";
    position: absolute;
    bottom: calc(var(--gutter-s)/ 2);
    left: var(--gutter-s);
    right: var(--gutter-s);
    background-color: rgba(0, 0, 0, .2);
    width: auto;
    height: 2px
}

.submenu__link--big .submenu__link-text strong {
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 11px;
    font-weight: 400
}

.submenu__ad {
    display: flex;
    align-items: center;
    justify-content: center
}

.submenu__ad img {
    display: block
}

a.submenu__link:not(.submenu__link--custom):hover {
    background-color: rgba(0, 0, 0, .05);
    background-image: unset
}

a.submenu__link:not(.submenu__link--custom):hover .submenu__link-text p {
    color: #000
}



@media screen and (max-width:1180px) {
    .navigation__links ul {
        margin-left: auto
    }

    .navigation__right {
        position: relative;
        top: unset;
        right: unset;
        transform: unset
    }

    .navigation__right a.navigation__phonenumber:before {
        display: block
    }

    .navigation__right a.navigation__phonenumber span {
        display: none
    }

    .navigation__right a.navigation__login {
        display: none
    }

    .submenu {
        left: unset;
        right: 0;
        transform: translateY(100%)
    }
}

@media screen and (max-width:950px),
screen and (max-height:570px) {
    .navigation {
        height: var(--navigationHeightScrolled)
    }

    .navigation__links ul {
        display: none
    }

    .navigation__right {
        display: none
    }

    .navigation__shadow {
        top: var(--navigationHeightScrolled)
    }

    .navigation__mobile-button {
        display: flex
    }

    .navigation__item--active .navigation__link a,
    .navigation__item--active .navigation__link span {
        border-bottom-color: transparent
    }

    .navigation__item--open .navigation__submenu {
        display: flex
    }

    .navigation__item--open .navigation__link a,
    .navigation__item--open .navigation__link span {
        color: #000;
        border-color: #f58546
    }

    .navigation__logo {
        left: 0
    }

    .navigation__logo img {
        width: 117px;
        left: unset;
        margin-right: unset
    }

    .navigation__title {
        font-size: 12px;
        left: calc(117px + var(--gutter-xs))
    }

    .navigation--mobile-open {
        --item-height: 45px
    }

    .navigation--mobile-open .navigation__links ul {
        position: fixed;
        display: flex;
        top: var(--navigationHeightScrolled);
        left: 0;
        width: 100%;
        height: var(--item-height);
        background-color: #fff;
        margin-left: 0;
        justify-content: space-evenly;
        border-bottom: 2px solid rgba(0, 0, 0, .2)
    }

    .navigation--mobile-open .navigation__item {
        height: var(--item-height);
        justify-content: center
    }

    .navigation--mobile-open .navigation__item--hide-mobile .navigation__link {
        display: none
    }

    .navigation--mobile-open .navigation__link {
        text-align: center
    }

    .navigation--mobile-open .navigation__link a,
    .navigation--mobile-open .navigation__link span {
        font-size: 14px;
        letter-spacing: initial
    }

    .navigation--mobile-open .navigation__link--arrow a:after,
    .navigation--mobile-open .navigation__link--arrow span:after {
        display: none
    }

    .navigation--mobile-open .navigation__submenu {
        position: fixed;
        top: calc(var(--navigationHeightScrolled) + var(--item-height));
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        height: auto;
        width: auto;
        padding: 0
    }

    .navigation-spacer {
        height: var(--navigationHeightScrolled)
    }

    .submenu__inner {
        box-shadow: none;
        border-radius: 0;
        flex-direction: column;
        overflow-y: auto;
        width: 100%;
        background-color: #edf2e2
    }

    .submenu__left,
    .submenu__right {
        width: 100%;
        flex: unset;
        display: block
    }

    .submenu__row {
        flex-direction: column
    }

    .submenu__title {
        display: none
    }

    .submenu__link {
        height: auto
    }

    .submenu__ad img {
        display: none
    }

    .submenu__mobile-divider {
        width: calc(100% - (var(--gutter-s) * 2));
        height: 2px;
        margin: var(--gutter-xs) auto;
        background-color: rgba(0, 0, 0, .2)
    }

    .submenu__column {
        width: 100%;
        flex: 1
    }

    .submenu__column--border-right {
        border: none
    }
}

.number-card {
    padding: 20px;
    background-color: rgba(0, 0, 0, .05);
    font-family: apercu, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    border-radius: 10px
}

.number-card--on-black {
    background-color: rgba(255, 255, 255, .2)
}

.number-card--shadow {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15), 0 4px 20px rgba(0, 0, 0, .05)
}

.number-card--no-bg {
    background: 0 0
}

.number-card--no-padding {
    padding: 0
}

.number-card--align-left {
    text-align: left
}

.number-card__number {
    --color: #FF002E;
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    color: var(--color)
}

@media screen and (max-width:1080px) {
    .number-card__number {
        font-size: 48px
    }
}

*+.paper,
.paper+* {
    margin-top: var(--gutter-xl)
}

.paper {
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    background-color: #fff
}

.paper--gradient {
    background-image: linear-gradient(180deg, #f0f0f0 0, #fff 100%)
}

.paper__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.paper__row+.paper__row {
    border-top: 2px solid #e5e5e5
}

.paper__item {
    flex: 1;
    padding: var(--gutter-m)
}

.paper__item+.paper__item {
    border-left: 2px solid #e5e5e5
}

@media screen and (max-width:600px) {
    .paper .paper__row {
        background: 0 0 !important
    }
}

@media screen and (max-width:1170px) {
    .paper:not(.paper--gradient) .paper__row {
        flex-direction: column
    }

    .paper:not(.paper--gradient) .paper__item+.paper__item {
        border-left: 0;
        border-top: 2px solid #e5e5e5
    }
}

.person {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin: 30px auto
}

.person__avatar {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    margin-right: 20px
}

.person__avatar img {
    display: block;
    width: 100%
}

.person__details h4,
.person__details p {
    font-family: "Px Grotesk", sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400
}

.person__details p {
    font-family: apercu, sans-serif;
    margin-top: 5px
}

*+.plans,
.plans+* {
    margin-top: var(--gutter-l)
}

.plans {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 0;
    background-color: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    margin-right: var(--gutter-m)
}

.plan--highlight {
    border: 4px solid #f58546
}

.plan:after {
    content: "*" attr(data-legend);
    position: absolute;
    left: var(--gutter-m);
    bottom: 0;
    transform: translateY(calc(100% + var(--gutter-xs)));
    opacity: .5;
    font-size: 14px
}

.plan__bubble {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    z-index: 0
}

.plan__bubble:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 0;
    padding-bottom: 100%;
    background-color: rgba(134, 237, 24, .1);
    transform: translate(-25%, 0);
    border-radius: 50%
}

.plan__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    transform-origin: 0 0;
    transform: translate(29.3%) rotate(45deg);
    background: #f58546;
    box-shadow: 0 0 0 999px #f58546;
    -webkit-clip-path: inset(0 -100%);
    clip-path: inset(0 -100%);
    font-size: 20px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 500;
    padding: var(--gutter-micro)
}

@media screen and (max-width:840px) {
    .plan__ribbon {
        font-size: 16px;
        transform: translate(0, calc(-50% - 2px));
        box-shadow: none;
        border-radius: 10px;
        padding: var(--gutter-micro) var(--gutter-xs);
        right: var(--gutter-xs)
    }
}

.plan__head {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: var(--gutter-m);
    border-bottom: 2px solid rgba(0, 0, 0, .1)
}

@media screen and (max-width:840px) {
    .plan__head {
        overflow: visible
    }
}

.plan__subtitle {
    font-size: 18px;
    line-height: 1
}

.plan__title {
    font-family: "Px Grotesk", sans-serif;
    font-size: 32px;
    color: #f58546;
    line-height: 1;
    margin-bottom: var(--gutter-m)
}

.plan__price {
    line-height: 1
}

.plan__price strong {
    font-size: 38px;
    display: block;
    color: #000
}

.plan__price span {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    margin-top: var(--gutter-micro)
}

.plan__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: var(--gutter-m)
}

.plan__content h3 {
    font-family: apercu, sans-serif;
    font-weight: 500;
    font-size: 26px
}

.plan__foot {
    position: relative;
    z-index: 1;
    padding: var(--gutter-m);
    padding-top: 0
}

.plan ul {
    list-style: none
}

.plan ul li {
    position: relative;
    font-size: 20px;
    padding-left: calc(1em + var(--gutter-xs));
    font-weight: 500
}

.plan ul li+li {
    margin-top: var(--gutter-xs)
}

.plan ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    display: block;
    width: 1em;
    height: 1em;
    background-image: url('checkbox-checked-green.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.plan:last-child {
    margin-right: 0
}

@media screen and (max-width:768px) {
    .plans {
        flex-direction: column
    }

    .plan {
        margin-right: 0
    }

    .plan+.plan {
        margin-top: var(--gutter-xxl)
    }
}

.quote {
    --fontSize: 34px;
    font-family: apercu, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fontSize);
    line-height: 1.5;
    padding: 0
}

.quote:after,
.quote:before {
    display: none
}

.quote+p {
    margin-top: 30px;
    font-size: calc(var(--fontSize)/ 2)
}

.quote+p strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400
}

@media screen and (max-width:768px) {
    .quote {
        --fontSize: 18px !important
    }
}

.radio-select {
    --padding: 30px;
    --color-active: #86EC16;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    margin: 0 -15px
}

.radio-select+* {
    margin-top: 65px
}

.radio-select__item {
    --width: 100%;
    display: flex;
    flex: 0 0 var(--width);
    margin: 0 15px
}

.radio-select__item>div,
.radio-select__item>label {
    display: block;
    background-color: #fff;
    color: #000;
    border: 2px solid rgba(0, 0, 0, .2);
    padding: calc(var(--padding) + 2px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    cursor: pointer;
    flex: 1 1 0px
}

.radio-select__item>div img,
.radio-select__item>label img {
    display: inline-block;
    margin-bottom: 30px
}

.radio-select__item>div .radio-select__headline,
.radio-select__item>div h2,
.radio-select__item>div h3,
.radio-select__item>label .radio-select__headline,
.radio-select__item>label h2,
.radio-select__item>label h3 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px;
    display: block
}

.radio-select__item>div .radio-select__text,
.radio-select__item>div p,
.radio-select__item>label .radio-select__text,
.radio-select__item>label p {
    font-family: apercu, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    display: block
}

.radio-select__item input {
    display: none
}

.radio-select__item input:checked+label {
    padding: var(--padding);
    border: 4px solid rgba(var(--color-active), 1);
    box-shadow: 0 4px 18px rgba(var(--color-active), .5)
}

.radio-select__item:hover>div {
    background-color: #fefefe;
    border: 2px solid var(--color-active);
    box-shadow: 0 4px 18px rgba(var(--color-active), .5);
    box-shadow: inset 0 2px 9px rgba(0, 0, 0, .15)
}

.radio-select__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--gutter-xs)
}

.radio-select__title .radio-select__headline,
.radio-select__title h2,
.radio-select__title h3 {
    flex: 1;
    padding-left: var(--gutter-m) !important;
    margin-bottom: 0 !important
}

.radio-select__title img {
    margin-bottom: 0
}

@media screen and (max-width:700px) {
    .radio-select {
        --padding: 15px;
        flex-direction: column;
        margin: 0 0 var(--padding) 0
    }

    .radio-select__item {
        margin: 0
    }

    .radio-select__item+.radio-select__item {
        margin-top: var(--padding)
    }
}


.readmore {
    display: inline
}

.readmore__button {
    display: none;
    color: currentColor;
    border-bottom: 2px solid #f58546;
    white-space: nowrap;
    font-weight: 500
}

.readmore__button:hover {
    border-color: #000
}

@media screen and (max-width:768px) {
    .readmore {
        display: none
    }

    .readmore--show {
        display: inline
    }

    .readmore__button {
        display: inline
    }

    .readmore__button--hide {
        display: none
    }
}

[class*=readmore-list--].readmore-list--show li {
    display: list-item !important
}

[class*=readmore-list--].readmore-list--show li.readmore-list__button {
    display: none !important
}

.readmore-list__button {
    display: none
}

.readmore-list__button a {
    color: currentColor;
    border-bottom: 2px solid #f58546;
    white-space: nowrap;
    font-weight: 500
}

.readmore-list__button a:hover {
    border-color: #000
}

@media screen and (max-width:768px) {
    .readmore-list--1 li:nth-child(n+2):not(:last-child) {
        display: none
    }

    .readmore-list--2 li:nth-child(n+3):not(:last-child) {
        display: none
    }

    .readmore-list--3 li:nth-child(n+4):not(:last-child) {
        display: none
    }

    .readmore-list--4 li:nth-child(n+5):not(:last-child) {
        display: none
    }

    .readmore-list--5 li:nth-child(n+6):not(:last-child) {
        display: none
    }

    .readmore-list--6 li:nth-child(n+7):not(:last-child) {
        display: none
    }

    .readmore-list--7 li:nth-child(n+8):not(:last-child) {
        display: none
    }

    .readmore-list--8 li:nth-child(n+9):not(:last-child) {
        display: none
    }

    .readmore-list--9 li:nth-child(n+10):not(:last-child) {
        display: none
    }

    .readmore-list--10 li:nth-child(n+11):not(:last-child) {
        display: none
    }

    .readmore-list__button {
        display: list-item
    }
}

*+.saving-calculation,
.saving-calculation+* {
    margin-top: var(--gutter-l)
}

.saving-calculation--mobile {
    display: none
}

.saving-calculation--desktop {
    display: block
}

.saving-calculation h3 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase
}

.saving-calculation h3 span {
    font-family: apercu, sans-serif;
    font-weight: 400;
    font-size: 54px;
    line-height: 1.5;
    border-bottom: 4px solid #f58546
}

.saving-calculation__loading-text {
    margin-top: 50px;
    text-align: center;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.4;
    display: none
}

.saving-calculation h5 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    min-height: 66px;
    color: rgba(0, 0, 0, .5)
}

.saving-calculation h5 span {
    font-size: 1.75em;
    color: #000;
    border-bottom: 2px solid #f58546
}

.saving-calculation h6 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .5);
    opacity: 1
}

.saving-calculation h6 span {
    color: #f58546;
    font-family: apercu, sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.4
}

.saving-calculation__grid {
    position: relative;
    background-image: url('box-bottom.svg');
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    margin-bottom: 25px;
    padding-bottom: 75px
}

.saving-calculation__col {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
    border-radius: 10px;
    padding: 10px 10px 20px 10px;
    display: flex;
    flex-direction: column
}

.saving-calculation__col--faded {
    opacity: .5
}

.saving-calculation__col-loader {
    position: relative;
    border-radius: 5px;
    width: calc(100% - 90px);
    height: 10px;
    background-color: rgba(255, 255, 255, .5);
    margin: 30px 45px;
    overflow: hidden;
    display: none
}

.saving-calculation__col-loader:before {
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    background-color: #f58546;
    -webkit-animation: loadCol 2s infinite ease;
    animation: loadCol 2s infinite ease
}

@-webkit-keyframes loadCol {
    50% {
        left: 0;
        width: 100%
    }

    100% {
        left: 100%;
        width: 0%
    }
}

@keyframes loadCol {
    50% {
        left: 0;
        width: 100%
    }

    100% {
        left: 100%;
        width: 0%
    }
}

.saving-calculation__form {
    display: flex;
    flex-direction: column;
    align-items: center
}

.saving-calculation__form .floating-form__row {
    width: 425px
}

.saving-calculation__form .floating-form__field {
    border-color: #000
}

.saving-calculation__form .floating-form__field input {
    background-color: transparent;
    color: #000
}

.saving-calculation__form .floating-form__field input:not(:-moz-placeholder-shown)~label {
    transform: translateY(calc(-100% - 18px))
}

.saving-calculation__form .floating-form__field input:not(:-ms-input-placeholder)~label {
    transform: translateY(calc(-100% - 18px))
}

.saving-calculation__form .floating-form__field input:focus~label,
.saving-calculation__form .floating-form__field input:not(:placeholder-shown)~label {
    transform: translateY(calc(-100% - 18px))
}

.saving-calculation__form .floating-form__field label {
    background-color: transparent;
    color: #000
}

.saving-calculation__form .floating-form__error {
    background-color: #ff7762;
    color: #000
}

.saving-calculation__form .floating-form__hint {
    background-color: #6682e8;
    color: #000
}

.saving-calculation__calculation {
    border-radius: 10px;
    background: rgba(0, 0, 0, .025);
    margin: 30px 0;
    padding: 15px 0;
    display: flex;
    flex-direction: column
}

.saving-calculation__calculation--open {
    flex: 1;
    margin-bottom: 0
}

.saving-calculation__details {
    display: none
}

.saving-calculation__details--open {
    display: block
}

.saving-calculation__row,
.saving-calculation__total {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 0
}

.saving-calculation__row+.saving-calculation__row,
.saving-calculation__total+.saving-calculation__row {
    border-top: 4px solid #fff
}

.saving-calculation__entry {
    text-align: center
}

.saving-calculation__entry img {
    vertical-align: middle;
    display: inline-block
}

.saving-calculation__entry img+strong {
    margin-left: 15px
}

.saving-calculation__entry *+em {
    margin-top: 15px
}

.saving-calculation__entry em {
    display: block;
    font-size: 14px;
    line-height: 1;
    font-style: normal
}

.saving-calculation__entry strong {
    font-size: 20px;
    font-family: "Px Grotesk", sans-serif;
    line-height: 24px
}

.saving-calculation__entry strong.highlight {
    background: rgba(0, 0, 0, .1);
    border-radius: 5px;
    padding: 5px 10px
}

.saving-calculation__entry+.saving-calculation__entry {
    margin-left: 20px
}

.saving-calculation__total {
    align-items: center
}

.saving-calculation__total .saving-calculation__entry em {
    margin-top: 0
}

.saving-calculation__total .saving-calculation__entry strong {
    font-size: 33px;
    white-space: nowrap
}

.saving-calculation__content {
    display: flex;
    flex-direction: column;
    height: 100%
}

.saving-calculation__content p>strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .7);
    display: block;
    margin-bottom: 20px
}

.saving-calculation__content p:last-child {
    margin-top: auto;
    padding-top: var(--gutter-s)
}

.saving-calculation__content ul {
    list-style: none
}

.saving-calculation__content ul li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.saving-calculation__content ul li .tooltip {
    margin-left: 15px
}

.saving-calculation__content--hidden {
    display: none
}

.saving-calculation__content--blurred {
    filter: blur(5px);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.saving-calculation__toggle {
    display: block;
    cursor: pointer;
    width: 100%;
    margin-top: 5px;
    padding-top: 16px;
    background-repeat: no-repeat;
    background-position: center top;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, .7);
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    transition: all .3s ease;
    margin-top: auto
}

.saving-calculation__toggle:hover {
    color: #f58546
}

.saving-calculation__toggle--open {
    background-image: url('dropdown-reverse-black.svg')
}

.saving-calculation__toggle--close {
    background-image: url('dropdown-black.svg')
}

.saving-calculation__infos h3 {
    font-family: "Px Grotesk", sans-serif;
    font-size: 24px;
    margin-bottom: 10px
}

.saving-calculation__infos p+p {
    margin-top: 20px
}

.saving-calculation__infos strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400
}

.saving-calculation__infos small {
    font-size: 14px
}

.saving-calculation__overlay {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -35%, 0);
    width: 100%;
    padding: 50px 30px;
    max-width: 770px;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border: 4px solid #000;
    border-radius: 10px;
    z-index: 80
}

.saving-calculation__overlay h3 {
    font-size: 28px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal
}

.saving-calculation--loading .saving-calculation__col>* {
    display: none
}

.saving-calculation--loading .saving-calculation__col-loader {
    display: block
}

@media screen and (max-width:1170px) {
    .saving-calculation--mobile {
        display: block
    }

    .saving-calculation--desktop {
        display: none
    }
}

.scroller {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px
}

@media screen and (max-width:800px) {
    .scroller {
        overflow: visible;
        height: auto !important
    }

    .scroller .scroller-content {
        display: none
    }

    .scroller .scroller-content:first-of-type {
        display: block
    }
}

.scroller .scroller-belt,
.scroller .scroller-content {
    overflow: auto
}

.scroller .scroller-content h2 {
    font-size: 24px !important;
    font-weight: 500 !important;
    margin-bottom: 20px
}

.scroller .scroller-content p {
    margin-bottom: 40px
}

.scroller--fade-white:after,
.scroller--fade-white:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 15%;
    left: 0;
    z-index: 10
}

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

    .scroller--fade-white:after,
    .scroller--fade-white:before {
        display: none
    }
}

.scroller--fade-white:before {
    top: 0;
    background-image: linear-gradient(white, rgba(255, 255, 255, 0))
}

.scroller--fade-white:after {
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #fff)
}

.scroller.fadeOut-lightgrey-2:after,
.scroller.fadeOut-lightgrey-2:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 15%;
    left: 0;
    z-index: 10
}

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

    .scroller.fadeOut-lightgrey-2:after,
    .scroller.fadeOut-lightgrey-2:before {
        display: none
    }
}

.scroller.fadeOut-lightgrey-2:before {
    top: 0;
    background-image: linear-gradient(#edf2e2, rgba(237, 242, 226, 0))
}

.scroller.fadeOut-lightgrey-2:after {
    bottom: 0;
    background-image: linear-gradient(rgba(237, 242, 226, 0), #edf2e2)
}

*+.scroller {
    margin-top: 40px
}

.section {
    --color-text: #000;
    width: 100%;
    padding: 60px 25px
}

.section--small-padding {
    padding: 30px 25px
}

.section--no-padding-top {
    padding-top: 0 !important
}

.section--no-padding-bottom {
    padding-bottom: 0 !important
}

.section--big-padding {
    padding: var(--gutter-xxl) 25px
}

.section--overflow-protection {
    overflow-y: visible;
    overflow-x: hidden
}

.section--white {
    background-color: #fff
}

.section--purple-white {
    background-image: linear-gradient(rgba(219, 0, 197, .05), rgba(219, 0, 197, 0))
}

.section--orange-white {
    background-image: linear-gradient(rgba(255, 123, 27, .05), rgba(255, 123, 27, 0))
}

.section--red-white {
    background-image: linear-gradient(rgba(255, 0, 46, .05), rgba(255, 0, 46, 0))
}

.section--blue-white {
    background-image: linear-gradient(rgba(0, 136, 234, .05), rgba(0, 136, 234, 0))
}

.section--white-blue-white {
    background-image: linear-gradient(rgba(0, 136, 234, 0), rgba(0, 136, 234, .05), rgba(0, 136, 234, 0));
    background-size: cover;
    background-repeat: no-repeat
}

.section--colored {
    --color: black;
    --color-text: var(--color);
    background: var(--bg)
}

.section--colored-gradient {
    --color-text: black;
    background-image: linear-gradient(var(--bg1), var(--bg2))
}

.section--light-grey {
    background: #f2f2f2
}

.section--lighter-grey {
    background: #f5f5f5
}

.section--light-green {
    background-color: #edf2e2
}

.section--white-grey-white {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(235, 235, 235, .51) 46.88%, rgba(196, 196, 196, 0) 100%, rgba(255, 255, 255, 0) 100%)
}

.section--grey-white {
    background: linear-gradient(180deg, #f0f0f0 0, #fff 100%)
}

.section--white-grey {
    background-image: linear-gradient(180deg, #fff 0, #f0f0f0 100%)
}

.section--light-grey-green {
    background: linear-gradient(180deg, #f2f2f2 0, rgba(237, 242, 226, .3) 100%)
}

.section--light-green-white {
    background: linear-gradient(180deg, #edf2e2 70%, rgba(237, 242, 226, 0) 100%)
}

.section--light-green-white-2 {
    background: linear-gradient(180deg, #edf2e2 0, rgba(237, 242, 226, 0) 100%)
}

.section--light-green-white-3 {
    background: linear-gradient(180deg, #edf7e2 0, #f4faee 57.81%, #fff 100%)
}

.section--white-light-green {
    background: linear-gradient(180deg, #fff 0, #edf2e2 100%)
}

.section--light-green-white-map {
    background-image: linear-gradient(180deg, #edf2e2 calc(70% - 550px), rgba(237, 242, 226, 0) calc(100% - 550px)), url('../images/photos/bg-map.jpg');
    background-position: top center, bottom center;
    background-size: 100%;
    background-repeat: no-repeat
}

.section--light-green-white-homeoffice {
    background-image: linear-gradient(180deg, #edf2e2 calc(70% - 550px), rgba(237, 242, 226, 0) calc(100% - 550px)), url('../images/photos/faded-out-homeoffice.jpg');
    background-position: top center, bottom center;
    background-size: 100%;
    background-repeat: no-repeat
}

.section--dark-green-black {
    --color-text: #fff;
    background: linear-gradient(180deg, #213327 0, #000 100%)
}

.section--white-blue {
    background-image: linear-gradient(180deg, #fff 0, #ecf9ff 100%)
}

.section--white-purple {
    background-image: linear-gradient(180deg, #fff 0, #fff0fd 100%)
}

.section--black {
    --color-text: #fff;
    background-color: #000
}

.section--black-corner {
    position: relative
}

.section--black-corner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(calc(-100% + 1px));
    border-left: 10vw solid #000;
    border-bottom: 5vw solid #000;
    border-top: 5vw solid transparent;
    border-right: 10vw solid transparent
}

.section--black-grey {
    --color-text: #fff;
    background-image: linear-gradient(358.98deg, rgba(255, 255, 255, .2) .47%, rgba(255, 255, 255, 0) 95.48%);
    background-color: #000
}

.section--white-grey-green-half-circle {
    background-image: url('../images/backgrounds_svg/green-half-circle-bottom.svg'), linear-gradient(180deg, #fff 0, #f0f0f0 100%);
    background-position: center bottom, center;
    background-repeat: no-repeat, repeat
}

.section--wave-animation {
    position: relative;
    overflow: hidden
}

.section--wave-animation .section__content {
    position: relative;
    z-index: 1
}

.section--wave-animation:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('../images/illus/swoooooooosh.svg');
    background-repeat: no-repeat;
    background-position: 55% 70%;
    z-index: 0
}

.section--wave-animation:after {
    content: "";
    position: absolute;
    width: 561px;
    height: 562px;
    bottom: -180px;
    left: 50%;
    background-image: url('../images/illus/money-hand-illustration.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: rotate(0);
    transform-origin: center bottom;
    -webkit-animation: wave 3s infinite ease;
    animation: wave 3s infinite ease;
    z-index: 0
}

@media screen and (max-width:960px) {
    .section--wave-animation {
        padding-bottom: 35vw !important
    }

    .section--wave-animation:before {
        display: none
    }

    .section--wave-animation:after {
        width: 76vw;
        height: 76vw;
        left: calc(50% - 38vw);
        bottom: -35vw
    }
}

@-webkit-keyframes wave {
    50% {
        transform: rotate(15deg)
    }

    100% {
        transform: rotate(0)
    }
}

@keyframes wave {
    50% {
        transform: rotate(15deg)
    }

    100% {
        transform: rotate(0)
    }
}

.section--telefonanlage-slider {
    padding-bottom: 0 !important;
    background-repeat: no-repeat;
    background-position: calc(50% + 475px) center, calc(50% + 585px) center, center;
    background-size: auto, 731px, auto
}

.section--telefonanlage-slider .index-card {
    display: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: 461px
}

@media screen and (max-width:960px) {
    .section--telefonanlage-slider {
        background-repeat: no-repeat;
        background-position: center 150px, center;
        background-size: 731px, auto
    }

    .section--telefonanlage-slider .index-card {
        margin-left: -25px;
        width: calc(100% + 50px);
        height: auto
    }
}

.section--telefonanlage-slider~.section {
    position: relative;
    z-index: 97
}

.section--telefonanlage-slider-1 {
    background-image: url('../images/backgrounds_png/ansprechpartner-image.png'), url('../images/backgrounds_svg/bg-fullcircle-green.svg'), linear-gradient(180deg, #f0f0f0 0, #fff 100%)
}

.section--telefonanlage-slider-1 .index-card-1 {
    display: block
}

@media screen and (max-width:960px) {
    .section--telefonanlage-slider-1 {
        background-image: url('../images/backgrounds_svg/bg-fullcircle-green.svg'), linear-gradient(180deg, #f0f0f0 0, #fff 100%)
    }
}

.section--telefonanlage-slider-2 {
    background-image: url('../images/backgrounds_png/erreichbarkeit-image.png'), url('../images/backgrounds_svg/bg-fullcircle-green.svg'), linear-gradient(180deg, #f0f0f0 0, #fff 100%)
}

.section--telefonanlage-slider-2 .index-card-2 {
    display: block
}





.section--telefonanlage-slider-3 .index-card-3 {
    display: block
}



.section--teams-slider {
    padding-bottom: 0 !important;
    background-repeat: no-repeat;
    background-position: calc(50% - 475px) center, calc(50% - 485px) center, center;
    background-size: auto, 620px, auto
}

.section--teams-slider .index-card {
    display: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: 424px
}

@media screen and (max-width:960px) {
    .section--teams-slider {
        background-repeat: no-repeat;
        background-position: center 150px, center;
        background-size: 731px, auto
    }

    .section--teams-slider .index-card {
        margin-left: -25px;
        width: calc(100% + 50px);
        height: auto
    }
}

.section--teams-slider~.section {
    position: relative;
    z-index: 97
}



.section--teams-slider-1 .index-card-1 {
    display: block
}



.section--teams-slider-2 .index-card-2 {
    display: block
}





.section--teams-slider-3 .index-card-3 {
    display: block
}


.section--work-bg {
    position: relative;
    overflow: hidden
}



@media screen and (max-width:960px) {
    .section--work-bg:after {
        display: none
    }
}

.section__content {
    --maxWidth: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    color: var(--color-text);
    max-width: var(--maxWidth);
    padding: 75px 0;

}

.section__content>h1 {
    font-size: 50px
}

.section__content>h2 {
    font-size: 38px
}

.section__content h2,
.section__content>h1 {
    font-family: apercu, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--gutter-s)
}

.section__content h2+p:not(.bigtext),
.section__content>h1+p:not(.bigtext) {
    font-size: 20px;
    line-height: 1.5
}

.section__content h2 .bubble,
.section__content>h1 .bubble {
    background-color: #f58546;
    border-radius: 100px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-left: 20px;
    padding: 5px 13px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px
}

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

    .section__content h2 .bubble,
    .section__content>h1 .bubble {
        display: none
    }
}

.section__content h2 .headline-tag,
.section__content>h1 .headline-tag {
    background-color: #c4c4c4;
    border-radius: 10px;
    font-family: "Px Grotesk", sans-serif;
    font-size: 18px;
    line-height: 27px;
    padding: 0 8px
}

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

    .section__content h2,
    .section__content>h1 {
        font-size: 28px
    }
}

.section__content>h1+p.centered,
.section__content>h2+p.centered,
.section__content>h3+p.centered {
    max-width: 770px;
    margin-left: auto;
    margin-right: auto
}

.section__content h3+* {
    margin-top: 20px
}

.section__content+.section__content:not(.section__content--no-gutter-top) {
    margin-top: var(--gutter-xl)
}

.section__content--narrow {
    --maxWidth: 770px
}

.section__content--wide {
    --maxWidth: 1170px
}

.section__content--gutter-top {
    margin-top: 70px
}

.section__content--shadow {
    background: #fff;
    border: 2px solid rgba(0, 0, 0, .2);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    padding: 30px
}

.section--fix-typo *+.h3,
.section--fix-typo *+h3 {
    margin-top: 40px
}

.section--fix-typo .h3+p,
.section--fix-typo .h3+ul,
.section--fix-typo h3+p,
.section--fix-typo h3+ul {
    margin-top: 20px
}

.section--fix-typo *+h2,
.section--fix-typo *+ul,
.section--fix-typo :not(p)+p {
    margin-top: 20px
}

.section--fix-typo p+h2 {
    margin-top: 40px
}

@media screen and (max-width:1000px) {
    .section:not(.section--small-padding) {
        padding: 50px 0px
    }

    .section--mobile-divider {
        padding-bottom: 50px !important;
        border-bottom: 2px solid rgba(0, 0, 0, .3)
    }

    .section--mobile-divider+.section {
        padding-top: 50px !important
    }
}


*+.small-tabs,
.small-tabs+* {
    margin-top: var(--gutter-xl)
}

.small-tabs {
    --linkColor: 0, 0, 0;
    --bgColor: 255, 255, 255;
    display: flex;
    flex-direction: column;
    align-items: center
}

.small-tabs--clear .small-tabs__tabs {
    border: 0;
    border-radius: 0
}

.small-tabs--clear .small-tabs__tab {
    color: rgba(var(--linkColor), .5);
    padding: 0;
    margin: calc(var(--gutter-xs)/ 2) var(--gutter-xs);
    border-bottom: 2px solid transparent
}

.small-tabs--clear .small-tabs__tab:hover {
    color: rgba(134, 237, 24, .5)
}

.small-tabs--clear .small-tabs__tab+.small-tabs__tab {
    border-left: 0;
    margin-left: var(--gutter-m)
}

.small-tabs--clear .small-tabs__tab--active {
    background-color: transparent;
    color: #f58546;
    border-color: #f58546
}

.small-tabs--on-black {
    --linkColor: 255, 255, 255
}

.small-tabs__tabs {
    border: 2px solid rgba(var(--linkColor), 1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px
}

.small-tabs__tab {
    font-family: "Px Grotesk", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .1em;
    padding: 15px 30px;
    text-transform: uppercase;
    color: rgba(var(--linkColor), 1);
    cursor: pointer;
    transition: all .3s ease
}

.small-tabs__tab+.small-tabs__tab {
    border-left: 2px solid rgba(var(--linkColor), 1)
}

.small-tabs__tab--active {
    background-color: rgba(var(--linkColor), 1);
    color: rgba(var(--bgColor), 1)
}

.small-tabs__content {
    display: none;
    width: 100%
}

.small-tabs__content--active {
    display: block
}

@media screen and (max-width:768px) {
    .small-tabs__tabs {
        flex-direction: column
    }

    .small-tabs__tab {
        text-align: center
    }

    .small-tabs__tab+.small-tabs__tab {
        border-left: 0
    }
}

.softphone__btn {
    background: #f4faee;
    color: #000;
    margin-top: var(--gutter-m);
    text-transform: none
}

.softphone__btn:hover {
    background-color: #000;
    color: #fff
}

.softphone__card {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 60px;
    height: 100%;
    max-width: 400px
}

@media screen and (min-width:1025px) {
    .softphone__card {
        width: 400px
    }
}

.softphone__card h2 {
    font-size: 32px
}

.softphone__card--dark-green {
    background: #232f25;
    color: #fff
}

.softphone__card--light-green {
    background: #ddeebf
}

.softphone__download-btn {
    margin-bottom: 15px;
    min-width: 45%;
    text-align: center;
    text-transform: none
}

.softphone__text {
    margin-top: var(--gutter-xs)
}

@media screen and (min-width:1025px) {
    .softphone__text {
        margin-top: var(--gutter-m)
    }
}

.split-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    margin: 90px auto
}

.split-box__item {
    flex: 1;
    text-align: center;
    width: 100%;
    max-width: 320px
}

.split-box__divider {
    position: relative;
    width: 2px;
    height: auto;
    margin: 0 140px;
    background-image: linear-gradient(#c4c4c4 0, #c4c4c4 calc(50% - 10px), transparent calc(50% - 10px), transparent calc(50% + 10px), #c4c4c4 calc(50% + 10px))
}

.split-box__divider:before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    font-family: apercu, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: rgba(0, 0, 0, .6)
}

@media screen and (max-width:900px) {
    .split-box__divider {
        margin: 0 20px
    }
}

@media screen and (max-width:750px) {
    .split-box {
        flex-direction: column;
        align-items: center
    }

    .split-box__divider {
        display: none
    }

    .split-box__divider+.split-box__item {
        margin-top: 40px
    }
}

*+.split-card,
.split-card+* {
    margin-top: var(--gutter-xl)
}

.split-card {
    --bg-color: #EDF2E2;
    background-color: var(--bg-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    color: #000;
    height: 100%
}

.split-card__top {
    padding: var(--gutter-m);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.split-card__bottom {
    border-radius: 10px;
    background-color: #fff;
    padding: var(--gutter-m);
    margin-top: auto
}

*+.step {
    margin-top: var(--gutter-l)
}

.step {
    --color: #000;
    display: flex;
    flex-direction: column;
    align-items: center
}

.step:before {
    content: attr(data-step);
    display: block;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    border: 2px solid var(--color);
    color: var(--color);
    border-radius: 50%
}

.step:after {
    font-size: 24px;
    font-family: "Px Grotesk", sans-serif;
    line-height: 120%
}

.step__mobile-label {
    display: none
}

.step__label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: var(--gutter-xs);
    font-family: "Px Grotesk", sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    color: var(--color);
    opacity: .5
}

.step__label span {
    padding: 0 10px
}

.step__label:after,
.step__label:before {
    content: "";
    display: block;
    width: calc(100% - 50px);
    height: 2px;
    flex: 1;
    background-color: var(--color)
}

@media screen and (max-width:768px) {
    .step[data-mobile-label] {
        flex-direction: row
    }

    .step[data-mobile-label]:before {
        margin-right: var(--gutter-xs)
    }

    .step[data-mobile-label] .step__label {
        display: none
    }

    .step[data-mobile-label]:after {
        content: attr(data-mobile-label)
    }
}

.step-slider {
    margin: 40px auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.step-slider * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.step-slider__steps {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    counter-reset: item
}

.step-slider__step {
    width: 270px;
    flex: 0 0 270px;
    background-color: #f0f0f0;
    color: #000;
    border: 2px solid rgba(0, 0, 0, .2);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 10px;
    padding: 20px;
    counter-increment: item
}

.step-slider__step:before {
    content: counter(item) ".";
    font-family: "Px Grotesk", sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    margin-bottom: 10px
}

.step-slider__step h2 {
    font-family: "Px Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 10px
}

.step-slider__step p {
    font-size: 14px;
    line-height: 1.6
}

.step-slider__step+.step-slider__step {
    margin-left: 30px
}

.step-slider__step--active {
    background-color: #000;
    color: #fff;
    border-color: #000
}

.step-slider__step--no-number:before {
    display: none
}

.step-slider__slider {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background-image: linear-gradient(90deg, #c4c4c4 0, #86ec16 100%);
    margin: 40px 0 20px 0
}

.step-slider__range {
    position: relative;
    width: calc(100% - 54px);
    height: 8px
}

.step-slider__handle {
    position: absolute;
    transform: translateY(-50%);
    cursor: pointer;
    left: 0;
    top: 50%;
    width: 54px;
    height: 30px;
    border: 3px solid #fff;
    background-color: #000;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .05);
    border-radius: 8px
}

.step-slider__handle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #fff 2px, #000 2px, #000 6px, #fff 6px, #fff 8px, #000 8px, #000 12px, #fff 12px, #fff 14px);
    background-position: center;
    background-size: 14px 14px;
    background-repeat: no-repeat
}

.step-slider__hint {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.step-slider__hint-left,
.step-slider__hint-right {
    position: relative;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    padding-top: 15px
}

.step-slider__hint-left:before,
.step-slider__hint-right:before {
    content: "";
    position: absolute;
    top: 0;
    border-bottom: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.step-slider__hint-center {
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    padding: 15px 40px 0 40px
}

.step-slider__hint-right {
    text-align: right
}

.step-slider__hint-right:before {
    right: 0;
    border-bottom-color: #f58546
}

.step-slider--on-black .step-slider__step {
    background: rgba(240, 240, 240, .2);
    border: 2px solid rgba(0, 0, 0, .2);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    color: #fff
}

.step-slider--on-black .step-slider__step--active {
    background-color: #fff;
    color: #000;
    border-color: #fff
}

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

    .step-slider__hint-left,
    .step-slider__hint-right {
        display: none
    }
}

*+.tablist,
.tablist+* {
    margin-top: var(--gutter-l)
}

.tablist {
    position: relative;
    height: auto;
    transition: min-height 5s ease
}

.tablist__links {
    position: relative;
    margin-bottom: -2px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden
}

.tablist__links--full-width .tablist__link {
    flex: 1;
    padding-left: 0;
    padding-right: 0
}

.tablist__links--sticky {
    position: fixed;
    z-index: 99;
    left: auto;
    right: auto;
    border-radius: 0 0 10px 10px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
    top: var(--navigationHeightScrolled);
    background-color: #fff;
    color: #000;
    overflow: hidden;
    opacity: 1 !important;
    transition: opacity .3s ease
}

.tablist__links--sticky .tablist__link {
    flex: initial !important;
    padding: var(--gutter-xs) var(--gutter-s);
    font-size: 0;
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    border: 0;
    background: unset
}

.tablist__links--sticky .tablist__link img {
    display: inline-block;
    width: 24px;
    vertical-align: middle;
    margin-right: 10px
}

.tablist__links--sticky .tablist__link strong {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle
}

.tablist__links--sticky .tablist__link span {
    display: none
}

.tablist__links--sticky .tablist__link[data-sticky-text] strong {
    display: none
}

.tablist__links--sticky .tablist__link[data-sticky-text]:after {
    content: attr(data-sticky-text);
    font-size: 18px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    line-height: 1.4
}

.tablist__links--sticky .tablist__link:hover {
    background: var(--stickyBg);
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.tablist__links--sticky .tablist__link--active {
    border-radius: 0;
    background: var(--stickyBg)
}

.tablist__link {
    --bg: linear-gradient(rgba(134, 237, 24, .2), transparent);
    --stickyBg: linear-gradient(transparent, rgba(134, 237, 24, .2));
    border: 2px solid transparent;
    border-bottom-color: #e5e5e5;
    padding: 15px 100px 15px 100px;
    text-align: center;
    font-family: apercu, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    opacity: .75;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.tablist__link img {
    display: block;
    width: auto;
    height: 48px;
    margin-right: var(--gutter-xs)
}

.tablist__link strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    display: block
}

.tablist__link strong span {
    display: block;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .5
}

.tablist__link strong span.subtext {
    font-family: apercu, sans-serif;
    text-transform: none;
    font-size: 14px;
    line-height: 1.4;
    opacity: 1;
    letter-spacing: normal
}

.tablist__link:hover {
    background: var(--bg);
    border-color: #e5e5e5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.tablist__link--smaller {
    padding: 15px
}

.tablist__link--active {
    background: var(--bg);
    border-color: #e5e5e5;
    border-bottom-color: transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 0;
    padding-bottom: 17px;
    opacity: 1
}

.tablist__indicators {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.tablist__indicator {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    background-color: #c4c4c4
}

.tablist__indicator+.tablist__indicator {
    margin-left: 6px
}

.tablist__indicator--active {
    width: 10px;
    height: 10px;
    background-color: #f58546
}

.tablist__arrow {
    position: absolute;
    display: none;
    width: 16px;
    height: 32px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%)
}




.tablist__content {
    display: none
}

.tablist__content>:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0
}

.tablist__content>:first-child:not(.paper) {
    padding-top: var(--gutter-l)
}

.tablist__content *+h2 {
    margin-top: 20px
}

.tablist__content h2 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.2
}

@media screen and (max-width:800px) {
    .tablist__content h2 {
        font-size: 28px
    }
}

.tablist__content>p {
    max-width: 770px;
    margin-left: auto;
    margin-right: auto
}

.tablist__content--active {
    display: block
}

.tablist__content--border-bottom {
    border-bottom: 2px solid rgba(0, 0, 0, .2)
}


.tablist--on-black .tablist__links {
    border-radius: 10px 10px 0 0
}

.tablist--on-black .tablist__links--sticky {
    border-radius: 0 0 10px 10px
}

.tablist--on-black .tablist__link,
.tablist--on-black .tablist__link--active {
    border: none
}

.tablist--on-black .tablist__link:not(.tablist__link--active) {
    border-bottom: 2px solid rgba(134, 237, 24, .2)
}

.tablist--on-black .tablist__arrow {
    filter: invert(1)
}

@media screen and (max-width:1170px) {
    .tablist__links {
        flex-wrap: wrap;
        position: relative;
        padding: 0 46px;
        border-bottom: 2px solid #e5e5e5;
        background: 0 0
    }

    .tablist__links--sticky {
        position: relative;
        z-index: initial;
        left: initial;
        right: initial;
        border-radius: 0;
        width: auto;
        left: auto;
        transform: none;
        overflow: initial;
        box-shadow: none;
        top: auto !important;
        color: unset;
        background: initial
    }

    .tablist__links--sticky .tablist__link {
        flex: initial;
        padding: 15px 0 17px 0;
        font-size: initial;
        white-space: initial;
        background: 0 0
    }

    .tablist__links--sticky .tablist__link img {
        width: 48px;
        height: auto
    }

    .tablist__links--sticky .tablist__link strong {
        font-size: 20px
    }

    .tablist__links--sticky .tablist__link span {
        display: block
    }

    .tablist__links--sticky .tablist__link[data-sticky-text] strong {
        display: block
    }

    .tablist__links--sticky .tablist__link[data-sticky-text]:after {
        display: none
    }

    .tablist__sticky-placeholder {
        display: none
    }

    .tablist__link {
        padding-left: 0;
        padding-right: 0;
        display: none;
        border: 0;
        background: 0 0
    }

    .tablist__link strong {
        font-size: 20px
    }

    .tablist__link--active {
        display: flex
    }

    .tablist__indicators {
        display: flex
    }

    .tablist__arrow {
        display: block
    }

    .tablist--on-black .tablist__links--sticky {
        background: unset
    }

    .tablist--on-black .tablist__links--sticky .tablist__link {
        font-size: 14px
    }

    .tablist--on-black .tablist__links {
        border-color: rgba(255, 255, 255, .2)
    }

    .tablist__content>:first-child:not(.paper) {
        padding-top: var(--gutter-s)
    }

    .tablist__content--border-bottom {
        border: 0
    }

    .tablist__content--blue-footer,
    .tablist__content--purple-footer,
    .tablist__content--red-footer,
    .tablist__content--yellow-footer {
        background: 0 0;
        margin-bottom: 0
    }
}

.tags {
    display: flex;
    flex-wrap: wrap
}

.tags .tag {
    margin-right: var(--gutter-xs)
}

.tag {
    --color: #fff;
    --bg: #b3b3b3;
    --size: 18px;
    --marginBottom: 15px;
    padding: 0 8px;
    line-height: 1.5;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: var(--size);
    border-radius: 18px;
    background-color: var(--bg);
    color: var(--color);
    display: table;
    margin-bottom: var(--marginBottom);
    width: auto !important;
    white-space: nowrap
}

.tag--inline {
    display: inline-table
}

.tag img {
    height: 14px;
    display: inline-block;
    margin-right: 8px
}

*+.team,
.team+* {
    margin-top: 70px
}

.team__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70px
}

.team__header p {
    font-size: 20px;
    line-height: 1.4
}

.team__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 25px
}

.team__button {
    position: relative;
    border: 2px solid transparent;
    padding: 5px;
    border-radius: 50%;
    width: 84px;
    height: 84px;
    cursor: pointer
}

.team__button img {
    border-radius: 50%
}

.team__button:after {
    content: attr(data-name);
    position: absolute;
    font-size: 12px;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, calc(100% + 5px), 0)
}

.team__button+.team__button {
    margin-left: 20px
}

.team__button--active {
    border-color: #fff
}

.team__member {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.team__member--active {
    display: flex
}

.team__member-left,
.team__member-right {
    width: 100%
}

.team__member-left {
    max-width: 670px;
    margin-right: 30px
}

.team__member-left blockquote {
    font-family: apercu, sans-serif;
    font-size: 34px;
    line-height: 150%;
    padding: 0;
    margin-bottom: 30px
}

.team__member-left blockquote+h6 {
    font-size: 20px;
    line-height: 150%;
    font-weight: 400
}

.team__member-left blockquote+h6 strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400
}

@media screen and (max-width:900px) {
    .team__member-left blockquote {
        font-size: 24px
    }
}

.team__member-right {
    max-width: 368px
}

.team__member-image {
    margin-bottom: 30px
}

.team__member-image img {
    width: 100%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    border-radius: 30px
}

.team__member-booking {
    margin-top: 50px;
    padding: 30px 25px;
    background: linear-gradient(358.98deg, rgba(255, 255, 255, .2) .47%, rgba(255, 255, 255, .09) 95.48%);
    box-shadow: inset 0 4px 20px rgba(134, 236, 22, .05);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    border-radius: 10px
}

.team__member-booking h3 {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 15px
}

.team__member-booking p {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 20px
}

.team__member-booking p u {
    border-bottom: 2px solid #f58546;
    text-decoration: none
}

.team__member-agenda {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 60px 15px 70px;
    font-size: 18px;
    color: #000;
    cursor: pointer;
    transition: all .3s ease
}

.team__member-agenda strong {
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    font-size: 20px
}

.team__member-agenda:after,
.team__member-agenda:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.team__member-agenda:before {
    left: 20px;
    width: 30px;
    height: 30px;
    background-image: url('agenda.svg')
}

.team__member-agenda:after {
    right: 20px;
    width: 20px;
    height: 20px;
    background-image: url('arrow-forward.svg')
}

.team__member-agenda:hover {
    background-color: #f58546
}

@media screen and (max-width:880px) {
    .team__member {
        flex-direction: column;
        align-items: center
    }

    .team__member-left {
        margin-bottom: 30px;
        margin-right: 0
    }

    .team__member-booking {
        padding: 0;
        background: 0 0;
        margin-top: 30px;
        background: 0 0;
        box-shadow: none
    }

    .team__member-booking h3,
    .team__member-booking p {
        display: none
    }

    #post-navigation .team__member-booking .current,
    #post-navigation .team__member-booking .dots,
    #post-navigation .team__member-booking a,
    .team__member-booking #post-navigation .current,
    .team__member-booking #post-navigation .dots,
    .team__member-booking #post-navigation a,
    .team__member-booking .btn {
        margin-left: auto;
        margin-right: auto
    }

    .team__member-agenda {
        display: none
    }
}

.toggle-box {
    border-radius: 10px;
    border: 1px solid #000;
    background-color: rgba(255, 255, 255, .75);
    width: 100%
}

.toggle-box input {
    display: none
}

.toggle-box input+label {
    position: relative;
    font-size: 20px;
    font-weight: 400;
    font-family: "Px Grotesk", sans-serif;
    line-height: 24px;
    cursor: pointer;
    display: block;
    padding: 40px;
    padding-left: calc(16px + 40px + 20px)
}

.toggle-box input+label:before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url('plus-icon.svg');
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    left: 40px
}

.toggle-box input:checked+label:before {
    background-image: url('minus-icon.svg')
}

.toggle-box .toggle-box__content {
    display: none;
    padding: 20px;
    padding-left: calc(16px + 40px + 20px);
    padding-top: 0
}

.toggle-box .toggle-box__content ol,
.toggle-box .toggle-box__content ul {
    padding-left: 2em
}

.toggle-box+.toggle-box {
    margin-top: 20px
}

.toggle-box--checklist {
    border: 0;
    padding: 0
}

.toggle-box--checklist input+label {
    position: relative;
    padding: 20px 0;
    padding-left: calc(20px + 10px);
    padding-right: calc(20px + 10px)
}

.toggle-box--checklist input+label:after,
.toggle-box--checklist input+label:before {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%)
}

.toggle-box--checklist input+label:before {
    background-image: url('checkmark-icon.svg');
    width: 20px;
    height: 15px;
    margin-right: 10px;
    left: 0
}

.toggle-box--checklist input+label:after {
    background-image: url('dropdown-chevron-icon.svg');
    width: 19px;
    height: 11px;
    margin-left: 10px;
    right: 0
}

.toggle-box--checklist input:checked+label:before {
    background-image: url('checkmark-icon.svg')
}

.toggle-box--checklist input:checked+label:after {
    transform: translateY(-50%) rotate(180deg)
}

.toggle-box--checklist .toggle-box__content {
    margin-top: 0;
    padding-left: calc(20px + 10px);
    padding-bottom: 20px
}

.toggle-box--checklist:before {
    display: none
}

.toggle-box--checklist+.toggle-box {
    border-top: 2px solid #f1f1f1;
    margin-top: 0
}

.toggle-box--transparent {
    background-color: transparent
}

.toggle-box--on-black {
    border-color: #fff;
    background-color: rgba(0, 0, 0, .75)
}

.toggle-box--on-black input+label:before {
    filter: invert(1)
}

.toggle-box--on-black a {
    color: #f58546;
    border-bottom: 2px solid #fff
}

.toggle-box--on-black a:hover {
    color: #fff
}

@media screen and (max-width:800px) {
    .toggle-box input+label {
        padding: 20px;
        padding-left: calc(16px + 20px + 10px)
    }

    .toggle-box input+label:before {
        left: 20px
    }

    .toggle-box .toggle-box__content {
        padding: 20px
    }
}

.tooltip {
    --fs: inherit;
    position: relative;
    top: -.1em;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: var(--fs);
    border-radius: 50%;
    background-color: rgba(134, 237, 24, .3);
    vertical-align: middle;
    cursor: help;
    flex-shrink: 0;
    flex-grow: 0
}

.tooltip--light {
    background-color: rgba(255, 255, 255, .3)
}

.tooltip--dark {
    background-color: rgba(0, 0, 0, .3)
}

.tooltip--full-dark {
    background: #000
}

.tooltip:before {
    content: "?";
    position: absolute;
    color: #fff;
    top: calc(50% + .1em);
    left: 50%;
    font-size: .75em;
    line-height: 1;
    transform: translate3d(-50%, -50%, 0)
}

.tooltip--info:before {
    content: "i"
}

.tooltip>* {
    --fs: 16px;
    display: none;
    position: absolute;
    z-index: 90;
    width: 280px;
    padding: 15px;
    background-color: #000;
    border: 2px solid #4c4c4c;
    border-radius: 5px;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: apercu, sans-serif;
    font-size: var(--fs);
    line-height: 1.4;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .15), 0 4px 19px rgba(255, 255, 255, .25)
}

.tooltip>:after,
.tooltip>:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, -100%, 0)
}

.tooltip>:before {
    z-index: 1;
    top: 0;
    border-bottom: 15px solid #000;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent
}

.tooltip>:after {
    top: 0;
    z-index: 0;
    border-bottom: 18px solid #4c4c4c;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent
}

.tooltip--top>* {
    top: -18px;
    transform: translate3d(-50%, -100%, 0)
}

.tooltip--top>:after,
.tooltip--top>:before {
    border-bottom: 0;
    top: auto;
    bottom: 0;
    transform: translate3d(-50%, 100%, 0)
}

.tooltip--top>:before {
    border-top: 15px solid #000
}

.tooltip--top>:after {
    border-top: 18px solid #4c4c4c
}

.tooltip--open>* {
    display: block
}

@media screen and (max-width:900px) {
    .tooltip__content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, .3)
    }

    .tooltip__content:after,
    .tooltip__content:before {
        content: unset
    }
}

.typing-text {
    position: relative;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    margin-top: 0;
    display: inline
}

.typing-text--block {
    display: block
}

.typing-text a {
    color: currentColor
}

.typing-text:before {
    content: " ";
    display: inline-block
}

.typing-text:after {
    content: "";
    display: inline-block;
    bottom: .2em;
    right: calc(-.5em - 2px);
    width: .5em;
    height: 2px;
    background-color: rgba(0, 0, 0, .8);
    -webkit-animation: blink 1s infinite linear;
    animation: blink 1s infinite linear
}

@-webkit-keyframes blink {
    49% {
        opacity: 1
    }

    100%,
    50% {
        opacity: 0
    }
}

@keyframes blink {
    49% {
        opacity: 1
    }

    100%,
    50% {
        opacity: 0
    }
}

h2 span.typing-text {
    font-size: inherit
}


.co-video {
    position: relative
}

.co-video__poster img {
    border-radius: 10px;
    display: block;
    width: 100%
}

.co-video__play {
    --size: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: #f58546;
    transition: all .3s ease;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2)
}

.co-video__play:before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% + 3px);
    transform: translate3d(-50%, -50%, 0);
    border-left: calc(var(--size)/ 4) solid #000;
    border-top: calc(var(--size)/ 5) solid transparent;
    border-bottom: calc(var(--size)/ 5) solid transparent
}

.co-video__play:hover {
    transform: translate3d(-50%, -50%, 0) scale(1.1)
}

.vb-cart-mobile {
    position: fixed;
    display: none;
    z-index: 50;
    border-top: 2px solid #f58546;
    background-color: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    font-size: 16px;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    text-align: right
}

@media screen and (max-width:800px) {
    .vb-cart-mobile.vb-cart-mobile--visible {
        display: block
    }
}

.vb-cart-mobile h6 {
    margin-bottom: 0;
    font-size: 16px
}

.vb-cart-mobile h6+* {
    margin-top: 0
}

.vb-cart-mobile>div {
    display: flex;
    justify-content: flex-end
}

.vb-cart-mobile-hook {
    position: relative
}

.vb-cart-container {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(calc(1040px / 2 + 20px));
    height: 100%
}

.vb-cart {
    position: -webkit-sticky;
    position: sticky;
    width: 350px;
    top: 80px;
    bottom: 20px;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .04);
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

@media screen and (max-width:960px) {
    .vb-cart {
        position: relative;
        overflow: unset;
        top: unset;
        max-height: unset
    }
}

.vb-cart h5 {
    font-weight: 700;
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 10px
}

.vb-cart h6 {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px
}

.vb-cart__info {
    font-size: 14px;
    line-height: 1.2;
    opacity: .6;
    margin-bottom: 20px
}

.vb-cart__scroll {
    overflow-y: auto;
    -ms-overflow-style: auto;
    scrollbar-color: #eee #fff;
    scrollbar-width: thin
}

.vb-cart__scroll::-webkit-scrollbar-thumb {
    background-color: #eee
}

.vb-cart__scroll::-webkit-scrollbar-track {
    background-color: #fff
}

.vb-cart__scroll::-webkit-scrollbar-corner {
    background-color: #fff
}

.vb-cart__scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

@media screen and (max-width:960px) {
    .vb-cart__scroll {
        overflow: unset
    }
}

.vb-cart__content {
    padding: 25px
}

.vb-cart__content+.vb-cart__content {
    border-top: 1px solid rgba(0, 0, 0, .08)
}

.vb-cart__content--no-gutter-top {
    padding-top: 0
}

.vb-cart__content--no-gutter-bottom {
    padding-bottom: 0
}

@media screen and (max-width:1840px),
screen and (max-height:860px) {
    .vb-cart-container {
        position: relative;
        top: unset;
        transform: unset;
        left: unset;
        display: flex;
        justify-content: center;
        margin-top: 20px
    }

    .vb-cart {
        position: relative;
        top: unset;
        bottom: unset;
        max-height: unset
    }

    .vb-cart__scroll {
        overflow: unset
    }
}

.btn-prev-step {
    cursor: pointer
}

.vb-progress {
    --progress: 0%;
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 20px;
    margin-bottom: 80px
}

@media screen and (max-width:550px) {
    .vb-progress {
        display: none
    }
}

.vb-progress:after,
.vb-progress:before {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 0;
    background: #b3b3b3
}

.vb-progress:after {
    background: #86ee22;
    width: var(--progress);
    z-index: 1
}

.vb-progress__step {
    position: relative;
    padding-top: 22px;
    color: #b3b3b3;
    font-weight: 700;
    width: 0;
    z-index: 2
}

.vb-progress__step:first-of-type:after {
    transform: none
}

.vb-progress__step:last-of-type:after {
    transform: translateX(-100%)
}

.vb-progress__step:after {
    content: attr(data-label);
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.vb-progress__step:before {
    content: "";
    position: absolute;
    top: 0;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #b3b3b3;
    border-radius: 50%;
    left: calc(50% - 8px)
}

.vb-progress__step--active {
    color: #000
}

.vb-progress__step--active:before {
    background-color: #86ee22;
    border-color: #86ee22
}

.vb-selection {
    font-size: 16px
}

.vb-selection__title {
    font-size: 18px;
    font-weight: 700;
    display: block
}

.vb-selection__price {
    text-align: right;
    line-height: 1;
    font-size: 14px;
    color: rgba(0, 0, 0, .56)
}

.vb-selection__price strong {
    font-size: 18px;
    color: #000
}

.vb-selection__bots,
.vb-selection__extra-minutes,
.vb-selection__minutes {
    font-size: 14px
}

.vb-selection .co-grid span {
    color: rgba(0, 0, 0, .56);
    font-size: 14px
}

.vb-interval-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px
}

.vb-interval-toggle__label {
    font-weight: 400;
    font-size: 16px
}

.vb-interval-toggle__label strong {
    font-weight: 700
}

.vb-interval-toggle__toggle {
    margin: 0 1rem
}

.vb-interval-toggle__toggle input {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.vb-interval-toggle__toggle input:checked+label {
    background-color: #f58546
}

.vb-interval-toggle__toggle input:checked+label:before {
    left: 32px
}

.vb-interval-toggle__toggle label {
    position: relative;
    display: block;
    border-radius: 16px;
    width: 60px;
    height: 32px;
    background-color: #cecece;
    transition: all .3s ease;
    cursor: pointer
}

.vb-interval-toggle__toggle label:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
    transition: all .3s ease
}

.vb-packages {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 112px
}

.vb-packages input {
    display: none
}

.vb-packages input:checked+.vb-package {
    border-color: #f58546;
    cursor: default
}

.vb-packages input:checked+.vb-package:before {
    content: '✓'
}

.vb-packages label {
    display: block
}

.vb-package {
    --color: #000;
    --highlight: #000;
    --bg: #F5F5F5;
    position: relative;
    width: calc(25% - 8px);
    background: var(--bg);
    border-radius: 14px;
    padding: 24px 16px;
    color: var(--color);
    border: 2px solid #c9c9c9;
    cursor: pointer;
    margin: 4px
}

.vb-package h4 {
    color: var(--color);
    font-family: apercu;
    font-size: 20px;
    margin-bottom: 0
}

.vb-package__subtitle,
.vb-package__subtitle * {
    font-size: 14px
}

.vb-package__ribbon {
    background-color: #f58546;
    border-radius: 5px 5px 0 0;
    position: absolute;
    top: 0;
    right: 14px;
    transform: translateY(-100%);
    font-size: 12px;
    padding: .25em .5em
}

.vb-package:before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid var(--highlight);
    border-radius: 5px;
    border: 1px solid #000;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 16px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #f58546
}

.vb-package__price {
    font-size: 44px;
    font-weight: 700;
    margin: 24px 0
}

.vb-package__price em {
    font-style: normal
}

.vb-package__price span {
    font-size: 16px;
    font-weight: 400
}

.vb-package ul {
    margin-top: 24px;
    list-style: none
}

.vb-package ul li {
    font-size: 14px
}

.vb-package ul li * {
    font-size: 14px
}

.vb-package ul li:before {
    opacity: .5
}

.vb-package ul li span {
    opacity: .5;
    font-size: 14px
}

@media screen and (max-width:750px) {
    .vb-package {
        width: calc(50% - 8px)
    }

    .vb-package--wide {
        width: calc(50% - 8px);
        margin-left: 8px;
        margin-right: 8px
    }
}

@media screen and (max-width:550px) {
    .vb-package {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 20px;
        margin-bottom: 20px
    }
}

.vb-additionals {
    display: flex;
    flex-wrap: wrap;
    margin-top: 48px
}

.vb-additionals input {
    display: none
}

.vb-additionals input:checked+.vb-additional {
    --bg: rgba(134, 238, 34, 0.24)
}

.vb-additionals input:checked+.vb-additional:before {
    content: "✓";
    background-color: #000
}

.vb-additionals-selected {
    font-size: 14px;
    line-height: 1
}

.vb-additionals-selected .co-grid__col:not(.co-grid__col--fill) {
    text-align: right
}

.vb-additional {
    --bg: #F5F5F5;
    position: relative;
    background: var(--bg);
    border-radius: 14px;
    padding: 24px 16px;
    margin: 4px;
    width: calc(25% - 8px);
    aspect-ratio: 1/1;
    cursor: pointer
}

.vb-additional h4 {
    font-size: 20px
}

.vb-additional__price {
    font-size: 16px;
    line-height: 20px;
    color: rgba(0, 0, 0, .56)
}

.vb-additional:before {
    content: "";
    position: absolute;
    top: 24px;
    right: 16px;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 4px;
    display: block;
    margin-bottom: 16px;
    color: #f58546;
    line-height: 18px;
    text-align: center;
    font-size: 14px
}

@media screen and (max-width:750px) {
    .vb-additional {
        width: calc(50% - 8px)
    }
}

@media screen and (max-width:550px) {
    .vb-additional {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        aspect-ratio: unset
    }
}

.vb-count {
    display: flex;
    align-items: center;
    margin-top: 24px
}

.vb-count__current {
    margin: 0 8px;
    width: 32px;
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700
}

.vb-count__button {
    width: 16px;
    height: 16px;
    font-size: 14px;
    text-align: center;
    line-height: 16px;
    border-radius: 4px;
    background: rgba(134, 238, 34, .56)
}

.stickyBanner * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.stickyBanner span {
    display: inline
}



.stickyBanner--animated .stickyBanner__textContainer {
    -webkit-animation: textFadeIn .7s;
    animation: textFadeIn .7s;
    -webkit-animation-delay: 700;
    animation-delay: 700
}

@-webkit-keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.stickyBanner {
    line-height: 1.3;
    display: flex;
    position: fixed !important;
    z-index: 99999999 !important;
    cursor: pointer;
    background-color: var(--c1);
    color: #fff;
    width: 100%;
    bottom: 0;
    left: 0;
    transition: transform cubic-bezier(.16, 1, .3, 1) .4s, background .5s;
    transform: translateY(100%);
    display: flex;
    justify-content: center;
    font-size: 20px;
    border-top: 1px solid #626262
}

.stickyBanner__innerContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    text-decoration: none
}

@media (max-width:1024px) {
    .stickyBanner {
        font-size: 18px
    }
}

@media (max-width:800px) {
    .stickyBanner {
        font-size: 16px
    }
}

@media (max-width:480px) {
    .stickyBanner {
        font-size: 14px
    }
}

@media (max-width:768px) {
    .stickyBanner__innerContainer {
        justify-content: start;
        padding-right: .5rem
    }
}

.stickyBanner__closeButton {
    padding: unset;
    position: absolute;
    right: 10px;
    top: 1rem;
    transform: translateY(-50%);
    height: 15px;
    width: 15px;
    background: 0 0;
    border: none;
    cursor: pointer;
    opacity: .5;
    transition: opacity ease-out .2s
}

.stickyBanner__closeButton:hover {
    opacity: 1
}

.stickyBanner__closeButton:after,
.stickyBanner__closeButton:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #fff
}

.stickyBanner__closeButton:before {
    transform: rotate(45deg)
}

.stickyBanner__closeButton:after {
    transform: rotate(-45deg)
}



@media (max-width:960px) {
    .stickyBanner__textContainer {
        flex-wrap: wrap;
        justify-content: unset
    }
}

@media (max-width:1120px) {
    .stickyBanner__textContainer {
        background-size: 19rem;
        background-position: -4rem 25%;
        padding-left: 14rem
    }
}

@media (max-width:960px) {
    .stickyBanner__textContainer {
        background-size: 11rem;
        background-position: -2.5rem 25%;
        padding-left: 8rem
    }
}

@media (max-width:600px) {
    .stickyBanner__textContainer {
        background-size: 9rem;
        background-position: -1.5rem 0;
        padding-left: 6.5rem
    }
}

@media (max-width:650px) {
    .stickyBanner__textContainer {
        display: block
    }
}

@media (max-width:480px) {
    .stickyBanner__textContainer {
        background-size: 6.5rem;
        background-position: -1.5rem .4rem;
        padding-left: 4.65rem
    }
}

@media (max-width:960px) {
    .stickyBanner__title {
        width: 100%
    }
}

.stickyBanner__innerContainer:hover .stickyBanner__textContainer {
    opacity: .65
}

.stickyBanner--animated {
    transform: translateY(0)
}

.stickyBanner__fontSmaller {
    opacity: .75
}

@media (min-width:481px) {
    .stickyBanner__fontSmaller {
        font-size: 17px
    }
}

@media (max-width:480px) {
    .stickyBanner__textContainer br {
        display: none
    }
}

.warning-tag {
    border-radius: 24px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
    border: 2px solid #ff0;
    color: #ff0
}

@media (max-width:1233px) {
    .warning-tag {
        margin-right: .75rem
    }
}

@media (max-width:960px) {
    .warning-tag {
        margin-left: .75rem
    }
}

@media (max-width:650px) {
    .warning-tag {
        margin-left: 0;
        margin-top: .35rem;
        font-size: 11px
    }
}

.stickyBanner--visible .main-footer {
    padding-bottom: 2rem
}

@media (max-width:960px) {
    .stickyBanner--visible .main-footer {
        padding-bottom: 4rem
    }
}

.tool-colors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-m)
}

.tool-colors__color {
    --color: #000;
    position: relative;
    border-radius: 10px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ccc;
    overflow: hidden
}

.tool-colors__color:before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color)
}

.tool-colors__color span {
    z-index: 1;
    background-color: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: .5em;
    border-radius: 10px;
    font-family: monospace;
    font-size: 12px;
    text-align: center
}

.tool-colors__color--transparent {
    background-image: url('../images/photos/lbs-image.jpg');
    background-size: cover;
    background-position: center
}

.components--scrollbar,
.components__toc ul {
    --scrollbarBG: transparent;
    --thumbBG: #f58546;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG)
}

.components--scrollbar::-webkit-scrollbar,
.components__toc ul::-webkit-scrollbar {
    width: 6px
}

.components--scrollbar::-webkit-scrollbar-track,
.components__toc ul::-webkit-scrollbar-track {
    background: var(--scrollbarBG)
}

.components--scrollbar::-webkit-scrollbar-thumb,
.components__toc ul::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG)
}

.components {
    --gutter: 8px;
    background-color: #eee;
    padding: var(--gutter)
}

.components>h1 {
    font-size: 38px;
    font-family: "Px Grotesk", sans-serif;
    font-weight: 400;
    line-height: 1;
    padding: 20px;
    text-align: center;
    margin: 0
}

.components__toc {
    position: fixed;
    top: var(--navigationHeight);
    left: 0;
    height: 100vh;
    min-width: 300px;
    background: #fff;
    transform: translateX(-100%);
    transition: all .3s ease
}

.components__toc ul {
    display: block;
    padding: 10px 0;
    max-height: 100vh;
    overflow-y: auto;
    list-style: none
}

.components__toc ul li {
    padding: 10px 20px;
    cursor: pointer
}

.components__toc ul li+li {
    border-top: 1px solid #eee
}

.components__toc ul li:hover {
    background-color: #eee
}

.components__toc--open {
    transform: translateX(0);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.components__toc--open .components__toc-button span {
    background-color: transparent
}

.components__toc--open .components__toc-button span:before {
    transform: translateY(0) rotate(45deg)
}

.components__toc--open .components__toc-button span:after {
    transform: translateY(0) rotate(-45deg)
}

.components__toc-button {
    position: absolute;
    width: 48px;
    height: 48px;
    cursor: pointer;
    top: 0;
    right: -48px;
    border-radius: 0 0 10px 0;
    background-color: #f58546;
    display: flex;
    justify-content: center;
    align-items: center
}

.components__toc-button span {
    position: relative;
    width: 50%;
    height: 3px;
    background-color: #fff;
    border-radius: 3px
}

.components__toc-button span:after,
.components__toc-button span:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 3px;
    transition: all .3s ease
}

.components__toc-button span:before {
    transform: translateY(-250%)
}

.components__toc-button span:after {
    transform: translateY(250%)
}

.components__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.components__item+.components__item {
    margin-top: var(--gutter)
}

.components__docs,
.components__preview {
    padding: 40px;
    border-radius: 10px;
    background-color: #fff
}

.components__docs {
    width: calc(40% - var(--gutter))
}

.components__docs>* {
    margin: 0 0 1em 0
}

.components__docs>:last-child {
    margin-bottom: 0
}

.components__docs h1 {
    font-size: 24px;
    line-height: 1
}

.components__docs h1 a {
    color: #000;
    border-bottom: 2px solid #f58546
}

.components__docs p {
    font-size: 16px;
    line-height: 1.5
}

.components__docs p+ul {
    margin-top: -1em
}

.components__docs ul {
    padding-left: 1em
}

.components__docs ul li+li {
    margin-top: 3px
}

.components__docs p code,
.components__docs ul code {
    background-color: #eee;
    border-radius: 3px;
    padding: 3px 6px;
    vertical-align: middle;
    font-family: monospace;
    font-size: .75em
}

.components__preview {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden
}

.components__preview>div {
    min-width: 50%
}

.components__code-popup {
    background-color: rgba(255, 255, 255, .75);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100
}

.components__code-popup pre {
    position: relative;
    z-index: 0;
    min-width: 50vw;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow: auto;
    border-radius: 10px;
    border: 4px solid #c4c4c4;
    font-size: 14px
}


.components__code-popup .components__code-button--close {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 5px;
    width: 48px;
    height: 48px;
    background-color: #c4c4c4;
    border-radius: 50%;
    cursor: pointer
}

.components__code-popup .components__code-button--close:hover {
    background-color: #f58546
}

.components__code-popup .components__code-button--close:after,
.components__code-popup .components__code-button--close:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 3px;
    border-radius: 6px;
    background-color: #fff;
    top: 50%;
    left: 50%
}

.components__code-popup .components__code-button--close:before {
    transform: translate3d(-50%, -50%, 0) rotate(45deg)
}

.components__code-popup .components__code-button--close:after {
    transform: translate3d(-50%, -50%, 0) rotate(-45deg)
}
.bFooter ul {
    list-style-type: none;
}
.bFooter  a, .bFooter a:visited {
    color: #fff;
    text-decoration: underline;
}

.boikContent p {
    margin-bottom: 25px;
}

.section {
    overflow: hidden;
    padding: 10px !important;
}

a.headL, a.headL:visited {
    color: unset;
    text-decoration: none;
    float: left;
    display: flex;
}
.btn:active, button:active {
    background-color: #e47335; /* Dunklerer Ton von Orange */
    color: #ffffff;
    outline: none;
    /* Inset-Schatten hinzufügen */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}