:root {
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f8f8f8;
    --vt-c-white-mute: #f2f2f2;
    --vt-c-black: #181818;
    --vt-c-black-soft: #222222;
    --vt-c-black-mute: #282828;
    --vt-c-indigo: #2c3e50;
    --vt-c-divider-light-1: rgba(60, 60, 60, .29);
    --vt-c-divider-light-2: rgba(60, 60, 60, .12);
    --vt-c-divider-dark-1: #545454a6;
    --vt-c-divider-dark-2: rgba(84, 84, 84, .48);
    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgba(60, 60, 60, .66);
    --vt-c-text-dark-1: var(--vt-c-white);
    --vt-c-text-dark-2: rgba(235, 235, 235, .64)
}

:root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);
    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);
    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
    --section-gap: 160px;
    --s-c-bg-primary: linear-gradient(137deg, #4095bb 0%, #1f759c 100%);
    --s-c-bg-primary-soft: linear-gradient(137deg, #57b3dc 0%, #278fbe 100%);
    --s-c-primary: #4095bb;
    --s-c-primary-dark: #234452;
    --s-c-primary-hover: #3888ad;
    --s-c-secondary: #ffffff;
    --s-c-grey: #b9b9b9;
    --s-c-bg-secondary: linear-gradient(106deg, #262626 0%, #2f2f2f 100%);
    --s-c-border: #606060;
    --s-c-disabled: #303030;
    --s-c-dark-2: #010101;
    --s-c-dark-soft: #2f2f2f;
    --s-c-dark-soft-2: #1c1c1c;
    --s-c-scrollbar-track: var(--vt-c-black-soft);
    --s-c-scrollbar-thumb: var(--vt-c-divider-dark-1);
    --s-c-scrollbar-thumb-hover: var(--vt-c-divider-dark-2)
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    font-weight: 400
}

* {
    font-family: Montserrat, Helvetica Neue, sans-serif
}

@font-face {
    font-family: Material Icons;
    src: url(../icons.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    src: url(../montserrat/Montserrat-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    src: url(../montserrat/Montserrat-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

#app {
    width: 100%;
    height: 100% . icon {
    font-family: Material Icons;
    font-size: 24px
}

    .button {
        display: inline-block;
        padding: 0 16px;
        font-size: 20px;
        min-width: 100px;
        border: none;
        border-radius: 5px;
        height: 55px;
        cursor: pointer;
        background-color: var(--s-c-primary);
        color: #fff;
        transition: background-color .3s ease;
        font-family: Montserrat, Helvetica Neue, sans-serif
    }

    .button:hover {
        background-color: var(--s-c-primary-hover);
        transform: scale(.99)
    }

    .button.light {
        background-color: var(--s-c-secondary);
        color: var(--s-c-primary)
    }

    .button.light:hover {
        color: var(--s-c-primary-hover)
    }

    .button.outline {
        background-color: transparent;
        border: 2px solid var(--s-c-primary);
        color: var(--s-c-primary)
    }

    .button.outline:hover {
        background-color: var(--s-c-primary-hover);
        color: #fff
    }

    .button.outline.light {
        border-color: var(--s-c-secondary);
        color: var(--s-c-secondary)
    }

    .button.outline.light:hover {
        background-color: var(--s-c-secondary-hover);
        color: #fff
    }

    .button.inline {
        background-color: transparent;
        color: var(--s-c-primary);
        padding: 0
    }

    .button.inline.light {
        color: var(--s-c-secondary)
    }

    .button.inline.light:hover {
        color: var(--s-c-secondary-hover)
    }

    .button.inline:hover {
        color: var(--s-c-primary-hover)
    }

    .button .label {
        display: block
    }

    .button .icon {
        display: none
    }

    .button.disabled {
        background-color: var(--s-c-disabled);
        color: var(--s-c-secondary);
        cursor: not-allowed
    }

    .button.disabled:hover {
        background-color: var(--s-c-disabled);
        transform: none
    }

    @media (max-width: 768px) {
        .button.responsiveIcon {
            display: inline-block;
            font-size: 24px;
            padding: 0 !important;
            width: 55px;
            min-width: 0
        }

        .button.responsiveIcon .icon {
            display: block
        }

        .button.responsiveIcon .label {
            display: none
        }
    }

    .appointment {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px
    }

    .appointment .description {
        font-size: 16px;
        color: var(--s-c-secondary);
        text-align: start
    }

    .appointment.right {
        justify-content: flex-end !important;
        align-items: flex-end !important
    }

    .appointment.right .description {
        text-align: end
    }

    .appointment.center {
        align-items: center;
        justify-content: center;
        text-align: center
    }

    .appointment .button {
        line-height: 26px;
        height: auto;
        padding: 8px 16px;      
    }

    @media (max-width: 1120px) {
        .appointment {
            align-items: center;
            justify-content: center;
            text-align: center
        }
    }

    .stepper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 8px
    }

    .stepper .step-outline {
        width: 100%;
        max-width: 70px;
        height: 24px;
        background-color: transparent;
        padding: 4px;
        border-radius: 12px;
        cursor: not-allowed
    }

    .stepper .step-outline .step {
        background-color: var(--s-c-disabled);
        height: 100%;
        width: 100%;
        border-radius: 8px
    }

    .stepper .step-outline.activated {
        cursor: pointer;
        background: transparent
    }

    .stepper .step-outline.activated .step {
        background: var(--s-c-primary-dark)
    }

    .stepper .step-outline.active {
        cursor: pointer;
        background: var(--s-c-bg-primary-soft)
    }

    .stepper .step-outline.active .step {
        background: var(--s-c-bg-primary)
    }

    .stepper .indicator {
        display: none
    }

    @media (max-width: 768px) {
        .stepper .step-outline {
            display: none
        }

        .stepper .indicator {
            display: block;
            color: var(--s-c-secondary);
            font-size: 14px;
            font-weight: 500;
            background: var(--s-c-bg-secondary);
            height: 40px;
            width: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center
        }
    }

    .icon {
        font-family: Material Icons;
        flex-shrink: 0;
        color: var(--s-c-secondary);
        line-height: 1
    }

    .select {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 16px
    }

    .option {
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: center;
        height: 55px;
        padding: 0 16px;
        border-radius: 5px;
        cursor: pointer;
        background-color: var(--s-c-dark-2);
        color: var(--s-c-secondary);
        width: 100%
    }

    .option.selectedOption {
        background: var(--s-c-bg-primary)
    }

    .circle {
        width: 24px;
        height: 24px;
        border: 2px solid var(--s-c-secondary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        flex-shrink: 0
    }

    .circle.multiple {
        border-radius: 5px
    }

    .selected-dot {
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background-color: var(--s-c-secondary)
    }

    .text-option {
        background-color: var(--s-c-dark-2);
        color: var(--s-c-secondary);
        padding: 16px;
        width: 100%;
        height: 200px;
        border: none;
        border-radius: 5px;
        resize: none;
        font-size: 16px
    }

    .text-option:focus {
        border: 2px solid var(--s-c-primary);
        outline: none
    }

    .text-option::placeholder {
        color: var(--s-c-grey)
    }

    .selectedTextOption {
        border: 2px solid var(--s-c-primary)
    }

    .slider {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .slider .sliderValue {
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%
    }

    .slider .sliderValue .answer-short {
        font-size: 32px;
        display: block;
        text-align: center;
        color: var(--s-c-secondary)
    }

    .slider .sliderValue .answer {
        font-size: 20px;
        color: var(--s-c-primary);
        font-weight: 700;
        text-align: center
    }

    .slider input[type=range] {
        width: 100%;
        outline: none;
        border: none;
        -webkit-appearance: none;
        background: transparent
    }

    .slider input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background: var(--s-c-primary);
        cursor: pointer;
        margin-top: -10px
    }

    .slider input[type=range]::-moz-range-thumb {
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background: var(--s-c-primary);
        cursor: pointer
    }

    .slider input[type=range]::-webkit-slider-runnable-track {
        height: 6px;
        background: linear-gradient(to right, var(--s-c-primary) 0%, var(--s-c-primary) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) 100%);
        border-radius: 4px
    }

    .slider input[type=range]::-moz-range-track {
        height: 6px;
        background: linear-gradient(to right, var(--s-c-primary) 0%, var(--s-c-primary) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), var(--s-c-grey) 100%);
        border-radius: 4px
    }

    .slider .scale {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 8px
    }

    .slider .scale span {
        font-size: 16px;
        color: var(--s-c-grey)
    }

    @media (max-width: 1120px) {
        .slider .scale span {
            font-size: 16px
        }
    }

    .options {
        display: flex;
        gap: 16px;
        justify-content: center;
        margin-top: 16px
    }

    .options .option {
        position: relative;
        overflow: hidden;
        flex-grow: 1;
        flex: 1;
        background-size: cover;
        aspect-ratio: 1/1;
        border-radius: 12px;
        padding: 16px
    }

    .options .option:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to top, #000c, #0000);
        z-index: 1
    }

    .options .option .option-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        justify-content: space-between
    }

    .options .option .option-content .top {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px
    }

    .options .option .option-content .top .selection {
        width: 32px;
        height: 32px;
        border: 2px solid var(--s-c-secondary);
        border-radius: 50%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .options .option .option-content .top .selection.active {
        border-color: var(--s-c-primary)
    }

    .options .option .option-content .top .selection .active {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--s-c-primary)
    }

    .options .option .option-content .bottom h3 {
        font-size: 20px;
        color: var(--s-c-secondary);
        font-weight: 600
    }

    .options .option .option-content .bottom p {
        font-size: 16px;
        color: var(--s-c-grey)
    }

    @media (max-width: 1120px),(max-height: 850px) {
        h3 {
            font-size: 16px !important
        }

        p {
            font-size: 14px !important
        }
    }

    @media (max-width: 768px) {
        .options {
            flex-direction: column;
            align-items: center
        }
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        padding: 32px
    }

    .container .slide {
        height: 100%;
        position: relative
    }

    .container .slide .information {
        height: calc(100% - 24px);
        width: calc(100% - 24px);
        background: var(--s-c-bg-primary);
        border-radius: 16px;
        padding: 24px
    }

    .container .slide .information .content {
        height: 100%;
        width: calc(50% - 24px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px
    }

    .container .slide .information .content .logo {
        width: 100%;
        max-width: 120px;
        margin-bottom: 24px
    }

    .container .slide .information .content .headline {
        color: #fff;
        font-family: Montserrat;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        margin-bottom: 16px
    }

    .container .slide .information .content .description {
        color: #fff;
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%
    }

    .container .slide .interaction {
        background: var(--s-c-bg-secondary);
        height: calc(100% - 24px);
        width: 50%;
        position: absolute;
        border-radius: 16px;
        top: 24px;
        right: 0;
        box-shadow: 0 0 24px #ffffff29;
        display: flex;
        flex-direction: column;
        justify-content: flex-start
    }

    .container .slide .interaction .inputs {
        display: flex;
        flex-direction: column;
        gap: 24px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 24px;
        align-items: flex-start;
        width: 100%
    }

    .container .slide .interaction .inputs::-webkit-scrollbar {
        width: 8px
    }

    .container .slide .interaction .inputs::-webkit-scrollbar-thumb {
        background: var(--s-c-scrollbar-thumb);
        border-radius: 4px
    }

    .container .slide .interaction .inputs::-webkit-scrollbar-track {
        background: var(--s-c-scrollbar-track);
        border-radius: 4px
    }

    .container .slide .interaction .inputs .input-wrapper {
        border-bottom: 1px solid var(--s-c-border);
        padding-bottom: 24px;
        width: 100%
    }

    .container .slide .interaction .inputs .input-wrapper .label {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        margin-bottom: 16px
    }

    .container .slide .interaction .inputs .input-wrapper:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

    .container .slide .interaction .impact {
        padding: 24px;
        border-radius: 0 0 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        background-color: var(--s-c-dark-2)
    }

    .container .slide .interaction .impact .label {
        color: #fff;
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%
    }

    .container .slide .interaction .impact .value {
        color: #fff;
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%
    }

    .container .slide .interaction .impact .value b {
        color: #4095bb;
        font-weight: 700
    }

    .container .toolbar {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-shrink: 0;
        height: 55px;
        z-index: 10
    }

    .container .toolbar .left {
        padding-right: 16px;
        flex-shrink: 0;
        border-right: 1px solid var(--s-c-border);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .container .toolbar .center {
        flex-grow: 1;
        height: 100%;
        margin: 0 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .container .toolbar .right {
        padding-left: 16px;
        flex-shrink: 0;
        border-left: 1px solid var(--s-c-border);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px
    }

    @media (max-width: 1120px),(max-height: 850px) {
        .container {
            padding: 0 0 32px !important;
            overflow: auto !important;
            height: auto !important
        }

        .container .slide .information {
            width: 100%;
            height: auto;
            margin-bottom: -190px;
            border-radius: 0;
            padding-bottom: 200px !important
        }

        .container .slide .information .content {
            width: 100%;
            align-items: center;
            text-align: center
        }

        .container .slide .information .content .logo {
            max-width: 80px
        }

        .container .slide .information .content .headline {
            font-size: 32px;
            margin-bottom: 12px
        }

        .container .slide .information .content .description {
            font-size: 16px
        }

        .container .slide .information .content .appointment {
            display: none
        }

        .container .slide .interaction {
            width: calc(100% - 32px);
            margin-left: 16px;
            position: relative !important;
            border-radius: 16px;
            height: auto !important
        }

        .container .slide .interaction .inputs .input-wrapper {
            width: 100%
        }

        .container .slide .interaction .inputs .input-wrapper .label {
            font-size: 16px !important
        }

        .container .slide .interaction .impact .value {
            font-size: 20px
        }

        .container .toolbar {
            position: relative;
            bottom: 0;
            left: 0;
            right: 0;
            top: 30px;
            background: var(--color-background);
            overflow: hidden;
            padding: 0 16px !important;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }
    }

    .value b {
        color: #4095bb !important;
        font-weight: 700 !important
    }

    .language-switch {
        display: flex;
        justify-content: center;
        background: var(--s-c-bg-secondary);
        padding: 4px;
        border-radius: 30px
    }

    .language-switch .language-options {
        display: flex;
        gap: 4px
    }

    .language-switch .language-options button {
        padding: 8px 16px;
        height: 55px;
        border: none;
        border-radius: 30px;
        background-color: transparent;
        cursor: pointer;
        font-size: 16px;
        color: var(--s-c-primary)
    }

    .language-switch .language-options button:nth-child(1) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px
    }

    .language-switch .language-options button:nth-child(2) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px
    }

    .language-switch .language-options button.active {
        background: var(--s-c-bg-primary);
        color: var(--s-c-secondary)
    }

    .language-switch .language-options button:hover {
        background: var(--s-c-primary-hover);
        color: var(--s-c-secondary)
    }

    .start {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 16px
    }

    .start .logo {
        width: 200px;
        height: auto;
        margin-bottom: 64px
    }

    .start .headline {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%
    }

    .start .description {
        margin-top: 16px;
        margin-bottom: 24px;
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 125%
    }

    .start .roles {
        margin-top: 32px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 16px
    }

    .start .roles .role {
        background: var(--s-c-bg-secondary);
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between
    }

    .start .roles .role .image-wrapper {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 16px
    }

    .start .roles .role .role-image {
        flex-grow: 1;
        width: 100%;
        height: auto;
        border-radius: 5px;
        max-width: 200px
    }

    .start .roles .role .role-title {
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        margin-bottom: 8px
    }

    .start .roles .role .role-description {
        color: #cbcbcb;
        text-align: center;
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%
    }

    .start .roles .role .role-button {
        margin-top: 16px;
        align-self: flex-end
    }

    @media (max-width: 1120px) {
        .headline {
            font-size: 32px !important
        }

        .description {
            font-size: 20px !important
        }

        .roles {
            flex-direction: column !important;
            align-items: center
        }

        .roles .role {
            width: 100%
        }
    }

    .end-result-numbers {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px
    }

    .end-result-numbers .number-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .end-result-numbers .number-wrapper .description {
        font-size: 16px;
        color: var(--s-c-secondary)
    }

    .end-result-numbers .number-wrapper .result {
        font-size: 32px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--s-c-secondary)
    }

    @media (max-width: 1180px) {
        .end-result-numbers .number-wrapper .description {
            font-size: 14px
        }

        .end-result-numbers .number-wrapper .result {
            font-size: 24px
        }
    }

    .modal-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000e6;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
        padding: 16px
    }

    .modal {
        background-color: var(--s-c-dark-soft-2);
        border-radius: 16px;
        overflow: auto;
        max-height: calc(100svh - 32px);
        width: 100%;
        max-width: 800px;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-top: 100px;
        height: auto
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background-color: var(--s-c-dark-soft);
        position: sticky;
        top: 0
    }

    .modal-body {
        padding: 32px 16px
    }

    .modal-body.no-padding {
        padding: 0
    }

    .title {
        color: var(--s-c-secondary);
        font-size: 20px;
        font-weight: 600
    }

    .close {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--s-c-secondary)
    }

    .close:hover {
        color: var(--s-c-hover-secondary)
    }

    .loading {
        height: 128px;
        width: 128px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin: 0 auto
    }

    .dot {
        height: 32px;
        width: 32px;
        background-color: #fff;
        border-radius: 50%;
        display: inline-block;
        animation: bounce .5s infinite alternate
    }

    .dot:nth-child(2) {
        animation-delay: .1s
    }

    .dot:nth-child(3) {
        animation-delay: .2s
    }

    @keyframes bounce {
        0% {
            transform: translateY(0)
        }
        to {
            transform: translateY(-32px)
        }
    }

    .contact-form {
        background-color: var(--s-c-dark-soft-2);
        padding: 32px;
        border-radius: 16px;
        max-width: 450px;
        width: 100%;
        z-index: 1;
        transition: height .3s ease
    }

    .contact-form.full-width {
        width: 100%;
        max-width: none
    }

    .contact-form.no-padding {
        padding: 0
    }

    .contact-form .form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: flex-start;
        align-items: flex-end
    }

    .contact-form .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%
    }

    .contact-form .form-group label {
        color: var(--s-c-secondary)
    }

    .contact-form .form-group input, .contact-form .form-group textarea {
        padding: 16px 8px;
        border: 2px solid transparent;
        border-radius: 5px;
        font-family: Montserrat, sans-serif;
        font-size: 16px
    }

    .contact-form .form-group input:focus {
        outline: none;
        border: 2px solid var(--s-c-primary)
    }

    .contact-form .form-group input {
        background-color: var(--s-c-dark-soft);
        color: var(--s-c-secondary)
    }

    .contact-form .form-group textarea {
        background-color: var(--s-c-dark-soft);
        color: var(--s-c-secondary);
        resize: none;
        height: 100px
    }

    .contact-form .form-group textarea:focus {
        outline: none;
        border: 2px solid var(--s-c-primary)
    }

    .contact-form .dsgvo {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        width: 100%
    }

    .contact-form .dsgvo input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border: 2px solid var(--s-c-secondary);
        border-radius: 4px;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        outline: none;
        transition: all .3s ease;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .contact-form .dsgvo input[type=checkbox]:checked {
        background-color: var(--s-c-secondary)
    }

    .contact-form .dsgvo input[type=checkbox]:checked:after {
        content: "✔";
        color: var(--s-c-primary);
        font-size: 16px;
        position: absolute;
        top: 0;
        left: 4px;
        transform: scale(1);
        transition: all .3s ease;
        background-color: transparent
    }

    .contact-form .dsgvo label {
        color: var(--s-c-secondary)
    }

    .button {
        margin-top: 16px
    }

    .title {
        font-size: 24px;
        color: var(--s-c-secondary);
        margin-bottom: 16px;
        text-align: left
    }

    .loading {
        margin-top: 64px
    }

    .sr-only {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0
    }

    a {
        color: var(--s-c-primary);
        text-decoration: underline
    }

    a:hover {
        color: var(--s-c-primary-hover)
    }

    .end-result {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 32px 16px 16px 32px;
        background: --s-c-bg-primary;
        border-radius: 16px;
        width: 100%;
        background: var(--s-c-bg-primary)
    }

    .end-result .calculation-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }

    .end-result .description {
        font-size: 20px;
        color: var(--s-c-secondary);
        text-align: start;
        margin-bottom: 8px
    }

    .end-result .headline {
        font-size: 48px;
        font-weight: 700;
        color: var(--s-c-secondary);
        text-align: start;
        margin-bottom: 16px;
        line-height: 125%
    }

    .end-result .end-results-numbers-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px
    }

    .end-result .actions-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: 32px;
        width: 100%;
        gap: 12px
    }

    .end-result .actions-wrapper .marketing-spot {
        background: var(--s-c-dark-soft-2);
        width: 100%;
        border-radius: 10px;
        overflow: hidden
    }

    .end-result .actions-wrapper .marketing-spot img {
        width: 100%
    }

    .end-result .actions-wrapper .marketing-spot .btn {
        padding: 8px 16px 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end
    }

    @media (max-width: 1180px) {
        .end-result {
            border-radius: 0 0 20px 20px
        }

        .end-result .calculation-wrapper {
            width: 100%;
            justify-content: flex-end
        }

        .end-result .calculation-wrapper .headline {
            font-size: 32px;
            margin-bottom: 32px
        }

        .end-result .calculation-wrapper .description {
            font-size: 16px
        }
    }

    .calculator {
        background: var(--s-c-bg-secondary);
        border-radius: 16px;
        box-shadow: 0 0 20px #ffffff40;
        width: 100%
    }

    .calculator .inputfields {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 16px 32px;
        gap: 16px;
        border-bottom: 1px solid var(--s-c-border)
    }

    .calculator .inputfields .input-wrapper {
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: flex-start
    }

    .calculator .inputfields .input-wrapper .label {
        color: var(--s-c-grey);
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        line-height: 150%
    }

    .calculator .inputfields .input {
        width: 200px;
        padding: 12px;
        border: 1px solid var(--s-c-border);
        border-radius: 8px;
        font-size: 20px;
        color: var(--s-c-secondary);
        background-color: var(--s-c-bg-primary)
    }

    .calculator .inputfields .input:focus {
        outline: none;
        border: 2px solid var(--s-c-primary)
    }

    .calculator .inputfields .input::-webkit-inner-spin-button, .calculator .inputfields .input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .calculator .inputfields .input[type=number] {
        -moz-appearance: textfield
    }

    .calculator .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--s-c-border);
        height: 120px;
        padding: 0 16px
    }

    .calculator .item:last-child {
        border-bottom: none;
        margin-bottom: 0
    }

    .calculator .item .meta {
        width: 40%;
        padding: 16px
    }

    .calculator .item .meta .title {
        color: var(--s-c-secondary);
        font-family: Montserrat;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 125%;
        margin-bottom: 8px
    }

    .calculator .item .meta .description {
        color: var(--s-c-secondary-soft);
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%
    }

    .calculator .item .slider-wrapper-x {
        width: 40%;
        padding: 16px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .calculator .item .result {
        width: 20%;
        color: var(--s-c-secondary);
        text-align: right;
        font-size: 20px;
        font-style: normal;
        padding: 16px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-left: 1px solid var(--s-c-border);
        font-weight: 700;
        line-height: 125%
    }

    @media (max-width: 1180px) {
        .calculator .item {
            flex-direction: column;
            align-items: flex-start;
            height: auto;
            padding: 16px
        }

        .calculator .item .meta, .calculator .item .slider-wrapper-x {
            width: 100%
        }

        .calculator .item .result {
            display: none
        }
    }

    @media (max-width: 520px) {
        .inputfields {
            flex-direction: column !important;
            padding: 16px;
            gap: 8px
        }

        .inputfields .input-wrapper {
            width: 100%
        }

        .inputfields .input-wrapper .input {
            width: 100%;
            max-width: 350px
        }
    }

    .result {
        height: 100%;
        padding: 32px
    }

    .result .numbers {
        position: relative;
        width: 100%;
        margin-top: -64px;
        height: max-content
    }

    .result .numbers .calc {
        z-index: 5;
        left: 0;
        right: 32px;
        width: calc(66% + 16px);
        position: absolute
    }

    .result .numbers .end-result-x {
        position: absolute;
        z-index: 4;
        top: -64px;
        right: 0;
        width: 34%
    }

    .result .header-wrapper {
        padding-top: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        background-image: url(../media/outro/st.png);
        background-size: cover;
        overflow: hidden;
        width: 100%;
        border-radius: 16px;
        padding-bottom: 128px;
        position: relative
    }

    .result .header-wrapper:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(137deg, #4095bbb3, #1f759cb3);
        z-index: 1
    }

    .result .header-wrapper .back-button {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 3;
        width: calc(100% - 32px);
        display: flex;
        justify-content: flex-start
    }

    .result .header-wrapper .header {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 2
    }

    .result .header-wrapper .header .logo {
        max-width: 150px
    }

    .result .header-wrapper .header .headline {
        font-size: 48px;
        font-weight: 600;
        margin-top: 32px;
        color: var(--s-c-secondary);
        line-height: 1.25
    }

    .result .header-wrapper .header .description {
        font-size: 24px;
        font-weight: 500;
        margin-top: 16px;
        color: var(--s-c-secondary);
        line-height: 1.5;
        max-width: 600px;
        margin-bottom: 16px
    }

    @media (max-width: 1180px) {
        .result {
            padding: 0
        }

        .result .partners-x, .result .contact-x {
            padding: 0 16px
        }

        .result .numbers {
            position: relative;
            width: calc(100% - 32px);
            margin-top: -64px;
            height: max-content;
            left: 16px
        }

        .result .numbers .calc {
            position: relative;
            width: 100%;
            top: 0;
            left: 0;
            right: 0;
            margin-top: -32px
        }

        .result .numbers .end-result-x {
            position: relative;
            z-index: 4;
            left: 50%;
            margin-top: -16px;
            right: 0;
            top: 0;
            transform: translate(-50%);
            width: 100%;
            max-width: 500px;
            box-shadow: none;
            justify-content: space-between
        }

        .result .numbers .header-wrapper {
            padding-top: 32px;
            padding-bottom: 16px
        }

        .result .numbers .header-wrapper .header .headline {
            font-size: 32px !important
        }

        .result .numbers .header-wrapper .header .description {
            font-size: 16px
        }

        .result .header-wrapper {
            border-radius: 0
        }

        .result .header-wrapper .header .headline {
            font-size: 32px !important
        }

        .result .header-wrapper .header .description {
            font-size: 16px
        }
    }

    .st-outro {
        padding: 32px
    }

    .st-outro .content-wrapper {
        padding-bottom: 64px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-image: url(../media/outro/st.png);
        background-size: cover;
        overflow: hidden;
        height: 100%;
        width: 100%;
        border-radius: 16px
    }

    .st-outro .content-wrapper:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(137deg, #4095bbb3, #1f759cb3);
        z-index: 1
    }

    .st-outro .content-wrapper .appointment {
        margin-top: 16px
    }

    .st-outro .content-wrapper .back-button {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 3;
        width: calc(100% - 32px);
        display: flex;
        justify-content: flex-start
    }

    .st-outro .content-wrapper .content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2;
        padding: 32px
    }

    .st-outro .content-wrapper .content .logo {
        max-width: 150px
    }

    .st-outro .content-wrapper .content .headline {
        font-size: 48px;
        font-weight: 600;
        margin-top: 32px;
        color: var(--s-c-secondary);
        line-height: 1.25
    }

    .st-outro .content-wrapper .content .description {
        font-size: 24px;
        font-weight: 500;
        margin-top: 16px;
        color: var(--s-c-secondary);
        line-height: 1.5;
        max-width: 600px;
        margin-bottom: 16px
    }

    .st-outro .benefits-wrapper {
        position: relative;
        width: 100%;
        height: max-content;
        margin-top: -32px
    }

    .st-outro .benefits-wrapper .benefits {
        box-shadow: 0 0 20px #ffffff40;
        left: 50%;
        right: 0;
        transform: translate(-50%);
        border-radius: 16px;
        position: absolute;
        z-index: 100;
        width: calc(100% - 32px);
        max-width: 800px;
        background: var(--s-c-bg-secondary);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }

    .st-outro .benefits-wrapper .benefits .headline {
        font-size: 24px;
        font-weight: 600;
        color: var(--s-c-secondary);
        text-align: center;
        width: 100%;
        padding: 32px
    }

    .st-outro .benefits-wrapper .benefits .benefit {
        padding: 32px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
        border-top: 1px solid var(--s-c-border);
        width: 100%
    }

    .st-outro .benefits-wrapper .benefits .benefit .text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }

    .st-outro .benefits-wrapper .benefits .benefit .text-wrapper .title {
        font-size: 16px;
        font-weight: 500;
        color: var(--s-c-secondary)
    }

    .st-outro .benefits-wrapper .benefits .benefit .text-wrapper .description {
        font-size: 24px;
        color: var(--s-c-secondary);
        font-weight: 700
    }

    @media (max-width: 1120px) {
        .st-outro {
            padding: 0
        }

        .st-outro .content-wrapper {
            border-radius: 0
        }

        .st-outro .content-wrapper .content .headline {
            font-size: 32px
        }

        .st-outro .content-wrapper .content .description, .st-outro .benefits .headline {
            font-size: 20px
        }

        .st-outro .benefits .benefit .text-wrapper .title {
            font-size: 14px
        }

        .st-outro .benefits .benefit .text-wrapper .description {
            font-size: 20px
        }
    }

    @media (max-width: 500px) {
        .st-outro {
            padding: 0
        }

        .st-outro .content-wrapper {
            border-radius: 0
        }

        .st-outro .content-wrapper .content .headline {
            font-size: 24px
        }

        .st-outro .content-wrapper .content .description {
            font-size: 16px
        }
    }

    main {
        position: relative;
        height: 100%;
        width: 100% !important;
        flex: 1;
        max-width: 1500px;
        margin: auto
    }

    main .simulation {
        position: relative
    }

    main .slide-container {
        position: relative;
        height: auto;
        transition: height .5s ease
    }

    main .slide-wrapper {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%
    }

    main .slide-wrapper.active {
        opacity: 1;
        pointer-events: auto;
        left: 0
    }
}