:root {
    --c-red: #ed1b2f;
    --c-yellow: #fff374;
    --c-bordeaux: #891350;
    --c-violet: #9185be;
    --c-beige: #ead6c1;
    --c-rose: #ffc1d6;
    --c-white: #fff;
    --c-black: #000;
    --c-black-20: #0003;
    --c-black-60: #0009;
    --c-black-80: #000c
}

html.bsi-ce-edit-mode .not-bsi-ce-edit-mode,
html:not(.bsi-ce-edit-mode) .on-bsi-ce-edit-mode {
    display: none
}

@media (min-width:751px) {
    .u-hidden-desktop {
        display: none !important
    }
}

@media (max-width:750px) {
    .u-hidden-mobile {
        display: none !important
    }
}

.u-hidden {
    display: none !important
}

:root {
    --border-radius-m: 18px;
    --border-radius-l: 24px
}

.visuallyhidden {
    border: 0;
    clip-path: inset(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.no-scroll {
    overflow: hidden
}

.as-text-left {
    text-align: left
}

.as-text-center {
    text-align: center
}

.Badge {
    align-items: center;
    background-color: var(--variant-background-color);
    border-radius: 100%;
    color: var(--variant-text-color);
    display: flex;
    height: 244px;
    justify-content: center;
    text-align: center;
    width: 244px
}

.Badge,
.Badge.as-yellow-red {
    --variant-background-color: var(--c-yellow);
    --variant-text-color: var(--c-red)
}

.Badge.as-yellow-bordeaux {
    --variant-background-color: var(--c-yellow);
    --variant-text-color: var(--c-bordeaux)
}

.Badge.as-violet-white {
    --variant-background-color: var(--c-violet);
    --variant-text-color: var(--c-white)
}

.Badge.as-red-white {
    --variant-background-color: var(--c-red);
    --variant-text-color: var(--c-white)
}

.Badge.as-bordeaux-white {
    --variant-background-color: var(--c-bordeaux);
    --variant-text-color: var(--c-white)
}

.Badge .Badge--content {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding: 30px;
    transform: rotate(-15deg)
}

.Badge .Badge--content p.Badge--title {
    font-weight: 700;
    margin-bottom: .2rem
}

.Badge .Badge--content p.Badge--text {
    margin: 0
}

@media (max-width:900px) {
    .Badge {
        height: 148px;
        width: 148px
    }

    .Badge .Badge--content {
        padding: 15px
    }

    .Badge .Badge--content p {
        font-size: 12px
    }
}

@media (max-width:580px) {
    .Badge {
        height: 120px;
        width: 120px
    }

    .Badge .Badge--content {
        padding: 8px
    }

    .Badge .Badge--content p {
        font-size: 10px
    }
}

.ButtonContainer .ButtonContainer--inner {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem
}

.ButtonContainer.as-align-center .ButtonContainer--inner {
    justify-content: center
}

.ButtonContainer.as-align-right .ButtonContainer--inner {
    justify-content: flex-end
}

.ButtonContainer.as-direction-vertical .ButtonContainer--inner {
    flex-direction: column
}

.ButtonContainer.as-direction-vertical.as-align-center .ButtonContainer--inner {
    align-items: center
}

.ButtonContainer.as-direction-vertical.as-align-right .ButtonContainer--inner {
    align-items: flex-end
}

.Button {
    --button-background-color: var(--variant-background-color);
    --button-text-color: var(--variant-text-color);
    border: 2px solid var(--button-background-color);
    border-radius: var(--border-radius-l);
    color: var(--button-text-color) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    font-weight: 400;
    justify-content: center;
    line-height: 1.667;
    padding: 8px 24px;
    text-align: center;
    white-space: nowrap;
    --variant-background-color: var(--c-violet);
    --variant-text-color: var(--c-white);
    --variant-hover-color: var(--c-bordeaux)
}

.Button:focus-visible,
.Button:hover {
    --button-background-color: var(--variant-hover-color)
}

.Button.as-primary {
    background-color: var(--button-background-color)
}

.Button.as-arrow,
.Button.as-secondary {
    --button-text-color: var(--button-background-color)
}

.Button.as-arrow {
    border-radius: 100%;
    padding: 16px
}

.Button.as-arrow:after {
    border: 2px solid;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    content: "";
    display: inline-block;
    height: 12px;
    transform: translateX(-2px) rotate(45deg);
    width: 12px
}

.Button.as-arrow .Button--label {
    border: 0;
    clip-path: inset(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.Button.as-violet {
    --variant-background-color: var(--c-violet);
    --variant-text-color: var(--c-white);
    --variant-hover-color: var(--c-bordeaux)
}

.Button.as-red {
    --variant-background-color: var(--c-red);
    --variant-text-color: var(--c-white);
    --variant-hover-color: var(--c-violet)
}

.Button.as-bordeaux {
    --variant-background-color: var(--c-bordeaux);
    --variant-text-color: var(--c-white);
    --variant-hover-color: var(--c-violet)
}

.Button.as-100 {
    min-width: 100%
}

.Button.as-75 {
    min-width: 75%
}

.Button.as-66 {
    min-width: 66%
}

.Button.as-50 {
    min-width: 50%
}

.Button.as-33 {
    min-width: 33%
}

.Button.as-25 {
    min-width: 25%
}

.bsi--FloatingButton.widget-bar__button {
    position: relative
}

.bsi--FloatingButton.widget-bar__button:before {
    left: 50%;
    position: absolute;
    top: 50%;
    translate: -50% -50%
}

.bsi--FloatingButton.widget-bar__button:focus-visible,
.bsi--FloatingButton.widget-bar__button:focus-within {
    background-color: var(--c-violet);
    color: var(--c-white)
}

.bsi--FloatingButton.widget-bar__button:hover {
    background-color: var(--c-bordeaux);
    color: var(--c-white)
}

.FloatingButtonContainer {
    bottom: 0;
    margin: 0 0 -40px;
    padding: 25px;
    pointer-events: none;
    position: sticky;
    z-index: 1000
}

.FloatingButtonContainer--inner {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: flex-end;
    pointer-events: none
}

.FloatingButtonContainer--inner .bsi--FloatingButton {
    pointer-events: auto
}

@media (max-width:750px) {
    .FloatingButtonContainer--inner {
        justify-content: space-between
    }
}

.form__inner {
    border-radius: var(--border-radius-m)
}

.bsi-Form--inner .content {
    padding-inline: 0
}

.bsi-Form--inner .required:after {
    display: none
}

.bsi-Form--error {
    color: var(--c-red);
    margin-bottom: 1rem
}

.bsi-Form--error li:empty,
.bsi-Form--error ul:empty,
.bsi-Form--error:empty {
    display: none
}

.bsi-Form--checkbox-label {
    min-height: 0
}

.bsi-Form--checkbox-label a {
    align-items: normal !important;
    display: inline;
    min-width: 0 !important
}

input[type=checkbox][required]+.bsi-Form--checkbox-label:after {
    content: " *" /" (required)";
    font-weight: 700
}

.bsi-FormCheckboxConsent--text input,
.bsi-FormCheckboxConsent--text label {
    border: 0;
    clip-path: inset(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.bsi-FormCheckboxGroup.one-option-required legend.input-label:after {
    content: " *" /" (required)";
    font-weight: 700
}

.bsi-FormCheckboxGroup .selection-group {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.bsi-FormCheckboxGroup .selection-group legend.input-label {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 1rem;
    padding: 0
}

.bsi-FormCheckboxGroup .bsi-FormCheckboxGroup--checkboxes>:first-child {
    margin-top: 0
}

.bsi-FormCheckboxGroup .l-horizontal-padding {
    padding: 0
}

.FormInputAutoComplete {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem 0;
    position: relative
}

.FormInputAutoComplete .FormInputAutoComplete--field:has(.FormInputAutoComplete--list):has(.bsi-Form--error) .bsi-Form--error {
    display: none
}

.FormInputAutoComplete .FormInputAutoComplete--list {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    border-top: none;
    list-style: none;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    top: 100%;
    width: calc(66.66% - 2rem);
    z-index: 1000
}

.FormInputAutoComplete .FormInputAutoComplete--list.hidden {
    display: none
}

.FormInputAutoComplete .FormInputAutoComplete--list li {
    cursor: pointer;
    display: block;
    padding: 8px
}

.FormInputAutoComplete .FormInputAutoComplete--list li.highlight,
.FormInputAutoComplete .FormInputAutoComplete--list li:hover {
    background: #f0f0f0
}

.FormInputAutoComplete .FormInputAutoComplete--field-hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    visibility: hidden
}

.FormInputAutoComplete:has(.FormInputAutoComplete--select select option:only-child) .FormInputAutoComplete--select {
    display: none
}

.FormInputAutoComplete:has(.FormInputAutoComplete--select select option:only-child) .FormInputAutoComplete--field,
.FormInputAutoComplete:has(.FormInputAutoComplete--select select option:only-child) .FormInputAutoComplete--zip-city-fields {
    width: 100%
}

@media only screen and (width > 768px) {

    .FormInputAutoComplete .FormInputAutoComplete--field,
    .FormInputAutoComplete .FormInputAutoComplete--zip-city-fields {
        width: 66.66%
    }

    .FormInputAutoComplete .FormInputAutoComplete--select {
        width: 33.33%
    }
}

.FormCondition {
    display: block !important
}

.FormCondition.is-active .FormCondition--content,
.FormCondition.is-active-1-2.is-active-2-2 .FormCondition--content,
.FormCondition.is-active-1-3.is-active-2-3.is-active-3-3 .FormCondition--content {
    display: block
}

.FormCondition .FormCondition--rule {
    display: none !important;
    width: 100%
}

html.bsi-ce-edit-mode .FormCondition .FormCondition--rule {
    border: 1px dotted #ddd;
    color: #ddd;
    display: block !important;
    font-size: 12px
}

.FormCondition .FormCondition--content {
    display: none;
    width: 100%
}

html.bsi-ce-edit-mode .FormCondition .FormCondition--content {
    border: 1px dotted #ddd;
    display: block !important;
    padding: 10px 10px 30px
}

.FormCondition .FormCondition--content .content {
    padding: 0 1rem
}

.FormCondition.is-active .FormCondition--content {
    display: block;
    width: 100%
}

.bsi-FormInput {
    display: inline-flex;
    flex-direction: column;
    gap: 5px
}

.bsi-FormInput:has(input:required) .input-label:after,
.bsi-FormInput:has(select:required) .input-label:after,
.bsi-FormInput:has(textarea:required) .input-label:after {
    content: " *" /" (required)";
    font-weight: 700
}

.bsi-FormInput .input-label {
    order: -1
}

.bsi-FormInput input[type=date],
.bsi-FormInput input[type=datetime-local],
.bsi-FormInput input[type=time] {
    text-transform: uppercase
}

.bsi-FormInput .input--wrapper {
    position: relative
}

.bsi-FormInput-phone-wrapper {
    align-items: center;
    display: flex;
    gap: 10px
}

.FormOptionTeaserContainer--title {
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center
}

.FormOptionTeaserContainer--items {
    display: grid;
    gap: 8px 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-content: center
}

.FormOptionTeaserContainer--name {
    border: 0;
    clip-path: inset(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.FormOptionTeaser.FormOptionTeaser {
    --padding-x: 20px;
    --padding-y: 24px;
    --gap-x: 16px;
    --gap-y: 16px;
    --border-color: #8913501a;
    align-items: center;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--border-radius-m);
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    gap: var(--gap-y) var(--gap-x);
    padding: var(--padding-y) var(--padding-x)
}

.FormOptionTeaser.FormOptionTeaser:has(input:checked) {
    --border-color: var(--c-bordeaux)
}

.FormOptionTeaser--inner {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    gap: var(--gap-y) var(--gap-x)
}

html.bsi-ce-edit-mode .FormOptionTeaser--inner {
    display: contents;
    pointer-events: none
}

html.bsi-ce-edit-mode .FormOptionTeaser--inner>* {
    pointer-events: auto
}

.FormOptionTeaser--media [class*=sy-icon-] {
    align-items: center;
    background-color: #9185be33;
    border-radius: 50%;
    color: var(--c-violet);
    display: flex;
    font-size: 30px;
    height: 64px;
    justify-content: center;
    padding: 16px;
    width: 64px
}

.FormOptionTeaser--media:empty {
    display: none
}

.FormOptionTeaser--body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column
}

.FormOptionTeaser--text,
.FormOptionTeaser--title {
    margin: 0
}

.FormOptionTeaser--title {
    font-size: 14px;
    font-weight: 700
}

.FormOptionTeaser--text {
    color: var(--c-gray-700);
    font-size: 14px
}

.FormOptionTeaser--text:empty {
    display: none
}

.FormOptionTeaser--value {
    border: 0;
    clip-path: inset(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.FormOptionTeaser--checkbox {
    align-items: center;
    background-color: #fff;
    border: 1px solid #0000004d;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px
}

input:checked+.FormOptionTeaser--checkbox:before {
    color: var(--c-bordeaux);
    content: "\e903";
    font-family: sympany_icons;
    font-size: 18px;
    line-height: 18px;
    text-align: center
}

.bsi-FormRadioGroup .selection-group {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.bsi-FormRadioGroup .selection-group legend {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 1rem
}

.bsi-FormRadioGroup .bsi-Form--error {
    margin-top: 1rem
}

.CardTeaser.CardTeaser {
    --padding-x: 48px;
    --padding-y: 40px;
    --gap-x: 24px;
    --gap-y: 32px;
    --border-width: 2px;
    --border-color: #8913501a;
    --border-radius: var(--border-radius-m);
    align-items: center;
    border: var(--border-width) solid var(--border-color) !important;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--gap-y) var(--gap-x);
    padding: var(--padding-y) var(--padding-x)
}

@media (min-width:751px) {

    .CardTeaser.CardTeaser.as-flat,
    .CardTeaser.CardTeaser.as-halfflat {
        flex-direction: row;
        place-items: center flex-start
    }

    .CardTeaser.CardTeaser.as-flat .CardTeaser--content,
    .CardTeaser.CardTeaser.as-halfflat .CardTeaser--content {
        flex-direction: row;
        width: 100%
    }

    .CardTeaser.CardTeaser.as-flat .CardTeaser--media,
    .CardTeaser.CardTeaser.as-halfflat .CardTeaser--media {
        flex: 1 1 auto;
        max-width: calc(50% - var(--gap-x)/2)
    }

    .CardTeaser.CardTeaser.as-flat .CardTeaser--body,
    .CardTeaser.CardTeaser.as-halfflat .CardTeaser--body {
        flex: 1 1 auto;
        text-align: left
    }

    .CardTeaser.CardTeaser.as-no-border {
        --padding-x: 0;
        --padding-y: 0;
        --border-width: 0;
        --border-radius: 0
    }

    .CardTeaser.CardTeaser.as-halfflat .CardTeaser--content {
        flex-direction: column;
        place-items: flex-start;
        width: 100%
    }
}

html:not(.bsi-ce-edit-mode) .CardTeaser.CardTeaser.is-clickable {
    position: relative
}

html:not(.bsi-ce-edit-mode) .CardTeaser.CardTeaser.is-clickable .Button {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.CardTeaser--media [class*=sy-icon-] {
    color: var(--c-violet);
    font-size: 80px
}

.CardTeaser--media .Image {
    border-radius: var(--border-radius-m);
    max-width: 100%;
    overflow: hidden
}

.CardTeaser--media:empty {
    display: none
}

.CardTeaser--content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap-y) var(--gap-x)
}

.CardTeaser--body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center
}

.CardTeaser--title {
    font-size: 20px
}

.CardTeaser--title:empty {
    display: none
}

.CardTeaser--text ol,
.CardTeaser--text ul {
    padding-left: 0
}

.CardTeaser--text ol li,
.CardTeaser--text ul li {
    list-style-position: inside;
    list-style-type: none;
    padding-left: 2rem;
    position: relative
}

.CardTeaser--text ol li:before,
.CardTeaser--text ul li:before {
    display: inline-block;
    left: 0;
    min-width: 1.75em;
    position: absolute;
    top: .25em
}

.CardTeaser--text ul li:before {
    background-color: initial;
    content: "\e903" " ";
    font-family: sympany_icons !important
}

.CardTeaser--text ol {
    counter-reset: list-item
}

.CardTeaser--text ol li:before {
    content: counter(list-item) ". ";
    left: .25em
}

.CardTeaser--text {
    place-items: center center
}

.CardTeaser--text li,
.CardTeaser--text ul {
    display: block;
    text-align: left
}

.CardTeaser--text,
.CardTeaser--text>p {
    font-size: 14px
}

.ImageTeaser {
    border-radius: var(--border-radius-m);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden
}

html:not(.bsi-ce-edit-mode) .ImageTeaser.is-clickable {
    position: relative
}

html:not(.bsi-ce-edit-mode) .ImageTeaser.is-clickable .Button,
html:not(.bsi-ce-edit-mode) .ImageTeaser.is-clickable:before {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

html:not(.bsi-ce-edit-mode) .ImageTeaser.is-clickable:before {
    background: linear-gradient(180deg, #0000, #00000080);
    content: "";
    transition: opacity .3s ease-in-out
}

html:not(.bsi-ce-edit-mode) .ImageTeaser.is-clickable:focus-visible:before,
html:not(.bsi-ce-edit-mode) .ImageTeaser.is-clickable:hover:before {
    opacity: 1
}

.ImageTeaser.as-ratio-4-3 {
    aspect-ratio: 4/3
}

.ImageTeaser.as-ratio-3-4 {
    aspect-ratio: 3/4
}

.ImageTeaser.as-ratio-1-1 {
    aspect-ratio: 1/1
}

.ImageTeaser.as-ratio-1-2 {
    aspect-ratio: 1/2
}

.ImageTeaser.as-ratio-2-1 {
    aspect-ratio: 2/1
}

.ImageTeaser--media {
    grid-area: 1/1/2/2
}

.ImageTeaser--media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%
}

.ImageTeaser--body {
    color: var(--c-white);
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 14px;
    grid-area: 1/1/2/2;
    justify-content: flex-end;
    padding: 24px 40px;
    position: relative;
    text-align: center
}

.ImageTeaser--title {
    font-size: 20px
}

.ImageTeaser--title:empty {
    display: none
}

.ImageTeaser--text {
    display: block
}

.ImageTeaser--text li,
.ImageTeaser--text ul {
    text-align: left
}

.ImageTeaser--text:empty {
    display: none
}

.TeaserGrid {
    --TeaserGrid-gap: 24px
}

@media (max-width:1150px) {
    .TeaserGrid {
        --TeaserGrid-gap: 12px
    }
}

@media (max-width:750px) {
    .TeaserGrid {
        --TeaserGrid-gap: 8px
    }
}

.TeaserGrid.grid-slider {
    overflow: hidden
}

.TeaserGrid.grid-slider .TeaserGrid--inner {
    margin: calc(var(--TeaserGrid-gap)/-2)
}

.TeaserGrid.grid-slider .TeaserGrid--holder {
    position: relative
}

.TeaserGrid.grid-slider .TeaserGrid--holder:after,
.TeaserGrid.grid-slider .TeaserGrid--holder:before {
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    width: calc(50vw - 50%);
    z-index: 1
}

.TeaserGrid.grid-slider .TeaserGrid--holder:before {
    background: linear-gradient(270deg, #fff0 0, #fffffff2);
    right: 100%
}

.TeaserGrid.grid-slider .TeaserGrid--holder:after {
    background: linear-gradient(90deg, #fff0 0, #fffffff2);
    left: 100%
}

.TeaserGrid.grid-slider .TeaserGrid--wrapper {
    flex-flow: row nowrap
}

html.bsi-ce-edit-mode .TeaserGrid.grid-slider .TeaserGrid--wrapper {
    overflow: auto
}

.TeaserGrid.grid-left .TeaserGrid--inner {
    justify-content: flex-start
}

.TeaserGrid.grid-centered .TeaserGrid--inner {
    justify-content: center
}

.TeaserGrid.grid-right .TeaserGrid--inner {
    justify-content: flex-end
}

.TeaserGrid.grid-no-stretch-last .TeaserGrid--inner:after {
    content: "";
    flex-grow: 9999;
    order: 9999
}

.TeaserGrid--slide {
    transition: opacity .3s ease-in-out, transform .3s ease-in-out
}

.TeaserGrid--slide.is-out-of-viewport {
    filter: grayscale(50%);
    opacity: .9;
    pointer-events: none;
    transform: scale(.96)
}

.TeaserGrid--wrapper {
    display: flex;
    flex-wrap: wrap
}

.TeaserGrid--wrapper>* {
    flex-grow: 0;
    flex-shrink: 0;
    margin: calc(var(--TeaserGrid-gap)/2);
    min-width: 300px
}

.TeaserGrid--wrapper .CardTeaser {
    flex-grow: 1
}

@media (max-width:400px) {
    .TeaserGrid--wrapper .CardTeaser {
        flex-shrink: 1
    }
}

.TeaserGrid--wrapper>.one-whole {
    flex-basis: calc(100% - var(--TeaserGrid-gap))
}

.TeaserGrid--wrapper>.one-half {
    flex-basis: calc(50% - var(--TeaserGrid-gap))
}

@media (max-width:400px) {
    .TeaserGrid--wrapper>.one-half {
        flex-basis: calc(100% - var(--TeaserGrid-gap))
    }
}

.TeaserGrid--wrapper>.one-third {
    flex-basis: calc(33.333% - var(--TeaserGrid-gap))
}

@media (max-width:400px) {
    .TeaserGrid--wrapper>.one-third {
        flex-basis: calc(100% - var(--TeaserGrid-gap))
    }
}

.TeaserGrid--wrapper>.two-thirds {
    flex-basis: calc(66.666% - var(--TeaserGrid-gap))
}

@media (max-width:400px) {
    .TeaserGrid--wrapper>.two-thirds {
        flex-basis: calc(100% - var(--TeaserGrid-gap))
    }
}

.TeaserGrid--wrapper>.one-quarter {
    flex-basis: calc(25% - var(--TeaserGrid-gap));
    min-width: 200px
}

@media (max-width:400px) {
    .TeaserGrid--wrapper>.one-quarter {
        flex-basis: calc(100% - var(--TeaserGrid-gap))
    }
}

.TeaserGrid--wrapper>.one-fifth {
    flex-basis: calc(20% - var(--TeaserGrid-gap));
    min-width: 200px
}

@media (max-width:400px) {
    .TeaserGrid--wrapper>.one-fifth {
        flex-basis: calc(100% - var(--TeaserGrid-gap))
    }
}

.TeaserGrid--pagination {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px
}

.TeaserGrid--pagination .swiper-pagination-bullet {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    height: 40px;
    justify-content: center;
    max-width: 60px;
    min-width: 40px
}

.TeaserGrid--pagination .swiper-pagination-bullet:before {
    background-color: #0003;
    border-radius: 2px;
    content: "";
    display: block;
    height: 4px;
    width: 100%
}

.TeaserGrid--pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    background-color: #891350
}

.TeaserGrid--pagination.swiper-pagination-lock {
    display: none
}

[class*=sy-icon-] {
    display: block;
    line-height: 1
}

.Image--img {
    display: block;
    height: auto;
    max-width: 100%
}

.Footer {
    background-color: var(--c-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 90px 0 58px;
    text-align: center
}

@media (max-width:750px) {
    .Footer {
        margin: 90px 0 40px
    }
}

.Footer--content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center
}

.Footer--social-media {
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    gap: 24px;
    justify-content: center
}

.Footer--social-media [class*=sy-icon-] {
    color: var(--c-black-80);
    font-size: 24px
}

.Footer--social-media a {
    justify-content: center
}

.Footer--social-media a:hover {
    -webkit-text-decoration: none;
    text-decoration: none
}

.Footer--legal,
.Footer--social-media a:hover [class*=sy-icon-] {
    color: var(--c-black-60)
}

.Footer--legal {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center
}

@media (max-width:750px) {
    .Footer--legal {
        flex-direction: column-reverse
    }
}

.Footer--legal--copyright {
    font-size: 12px;
    padding: 14px
}

@media (max-width:750px) {
    .Footer--legal--copyright {
        margin-top: 64px
    }
}

.Footer--legal--links {
    display: flex;
    flex-direction: row;
    gap: 0 14px
}

@media (max-width:750px) {
    .Footer--legal--links {
        align-items: center;
        flex-direction: column
    }
}

.Footer--legal--links a {
    color: currentcolor;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: var(--c-black-20)
}

.Footer--legal--links a:hover {
    color: var(--c-black-80);
    text-decoration-color: var(--c-black-80)
}

.Footer--legal--links a:before {
    border-left: 1px solid var(--c-black-20);
    content: "";
    display: inline-block;
    height: 1.5em;
    margin-right: 14px;
    width: 0
}

@media (max-width:750px) {
    .Footer--legal--links a:before {
        display: none
    }
}

.Header {
    align-items: center;
    background-color: var(--variant-background-color);
    color: var(--variant-text-color);
    display: flex;
    min-height: 94px;
    padding: 10px 20px
}

@media (max-width:750px) {
    .Header {
        min-height: 76px
    }
}

.Header--logo,
.Header--logo:hover {
    color: var(--variant-logo-color)
}

.Header--logo .Header--logo--image {
    width: 156px
}

@media (max-width:750px) {
    .Header--logo .Header--logo--image {
        width: 120px
    }
}

.Header--content {
    align-items: center;
    display: flex;
    flex-grow: 1;
    font-size: 14px;
    justify-content: flex-end
}

.Header--links {
    display: flex;
    gap: 16px
}

.Header--links a {
    font-weight: 400
}

.Header--links a,
.Header--links a:hover {
    color: var(--variant-text-color)
}

.Header--language {
    position: relative
}

html:not(.bsi-ce-edit-mode) .Header--language:has(.Header--language--links:not(:empty)) {
    margin-left: 32px
}

html.bsi-ce-edit-mode .Header--language {
    border: 1px solid #ddd;
    padding: 8px
}

html.bsi-ce-edit-mode .Header--language a {
    color: var(--variant-text-color);
    font-weight: 400
}

html.bsi-ce-edit-mode .Header--language a:hover {
    color: var(--variant-text-color)
}

html:not(.bsi-ce-edit-mode) .Header--language label {
    border: 0;
    clip-path: inset(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.Header--language:has(select):after {
    border: 1.5px solid;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    content: "";
    height: 8px;
    pointer-events: none;
    position: absolute;
    right: 4px;
    top: 45%;
    transform: translateY(-50%) rotate(135deg);
    width: 8px;
    z-index: 98
}

html.bsi-ce-edit-mode .Header--language:has(select):after {
    display: none
}

.Header--language select {
    appearance: none;
    background: #0000;
    border: none;
    min-height: 40px;
    min-width: 40px;
    outline: none;
    padding: 0 20px 0 0
}

.Header--language select::-ms-expand {
    display: none
}

.Header--language select:focus {
    box-shadow: none;
    outline: none
}

html.bsi-ce-edit-mode .Header--language select,
html:not(.bsi-ce-edit-mode) .Header--language--links {
    display: none
}

.Header--language--links {
    display: flex;
    flex-direction: column;
    gap: 4px
}

html.bsi-ce-edit-mode .accordion {
    outline: 1px solid #ddd
}

.accordion__subtitle:empty {
    display: none
}

html.bsi-ce-edit-mode .accordion__content {
    display: block
}

.accordion__content .Image {
    border-radius: var(--border-radius-m);
    max-width: 100%;
    overflow: hidden
}

.accordion__content .Button {
    margin-top: 1rem
}

.accordion__content .content {
    max-width: 100%;
    padding: 0
}

.Anchor--name {
    display: none
}

html.bsi-ce-edit-mode .Anchor--name {
    color: #aaa;
    display: block;
    font-size: 24px;
    font-style: italic;
    min-height: 1em;
    width: 100%
}

html.bsi-ce-edit-mode .Anchor--name:before {
    content: "#"
}

.ArticleText ol,
.ArticleText ul {
    padding-left: 0
}

.ArticleText ol li,
.ArticleText ul li {
    list-style-position: inside;
    list-style-type: none;
    padding-left: 2rem;
    position: relative
}

.ArticleText ol li:before,
.ArticleText ul li:before {
    display: inline-block;
    left: 0;
    min-width: 1.75em;
    position: absolute;
    top: .25em
}

.ArticleText ul li:before {
    background-color: initial;
    content: "\e903" " ";
    font-family: sympany_icons !important
}

.ArticleText ol {
    counter-reset: list-item
}

.ArticleText ol li:before {
    content: counter(list-item) ". ";
    left: .25em
}

.HeadlineH1 h1 {
    font: inherit
}

.hero-image.section--tiny {
    margin-top: .5rem
}

.hero-image.section--small {
    margin-top: 1rem
}

.hero-image.section {
    margin-top: 1.5rem
}

.hero-image.section--large {
    margin-top: 2rem
}

.hero-image.section--x-large {
    margin-top: 3rem
}

.hero-image.section--xx-large {
    margin-top: 5rem
}

.hero-image.bsi-herostage-theme-red {
    --variant-background-color: var(--c-red);
    --variant-text-color: var(--c-rose);
    --variant-btn-color: var(--c-violet);
    --variant-btn-hover-color: var(--c-bordeaux)
}

.hero-image.bsi-herostage-theme-yellow {
    --variant-background-color: var(--c-yellow);
    --variant-text-color: var(--c-red);
    --variant-btn-color: var(--c-bordeaux);
    --variant-btn-hover-color: var(--c-violet)
}

.hero-image.bsi-herostage-theme-beige {
    --variant-background-color: var(--c-beige);
    --variant-text-color: var(--c-bordeaux);
    --variant-btn-color: var(--c-red);
    --variant-btn-hover-color: var(--c-violet)
}

.hero-image.bsi-herostage-theme-rose {
    --variant-background-color: var(--c-rose);
    --variant-text-color: var(--c-red);
    --variant-btn-color: var(--c-violet);
    --variant-btn-hover-color: var(--c-bordeaux)
}

.hero-image.bsi-herostage-theme-violet {
    --variant-background-color: var(--c-violet);
    --variant-text-color: var(--c-yellow);
    --variant-btn-color: var(--c-red);
    --variant-btn-hover-color: var(--c-bordeaux)
}

.hero-image,
.hero-image.bsi-herostage-theme-bordeaux {
    --variant-background-color: var(--c-bordeaux);
    --variant-text-color: var(--c-rose);
    --variant-btn-color: var(--c-red);
    --variant-btn-hover-color: var(--c-violet)
}

.hero-image .bsi_design-color {
    background-color: var(--variant-background-color) !important;
    border-color: var(--variant-background-color) !important;
    border-radius: var(-border-radius-m)
}

.hero-image .bsi_design-color.hero-image__overlay__content-text {
    border-radius: 0;
    color: var(--variant-text-color) !important
}

.hero-image .hero-image__image-container {
    border-radius: var(--border-radius-m)
}

.hero-image .Button {
    --button-background-color: var(--variant-btn-color)
}

.hero-image .Button:hover,
.hero-image:hover .Button {
    --button-background-color: var(--variant-btn-hover-color)
}

.bsi-title-herostage:has(.u-hidden-desktop:empty) .u-hidden-mobile {
    display: block !important
}

.HeadlineH2 h2,
.HeadlineH3 h3 {
    font: inherit
}

.HeroTeaser {
    --gap-top: 120px;
    --gap-bottom: 120px;
    color: var(--variant-text-color);
    padding-top: var(--gap-top);
    position: relative
}

.HeroTeaser:after {
    background-color: var(--variant-background-color);
    content: "";
    inset: 0 0 var(--gap-bottom) 0;
    position: absolute
}

@media (max-width:900px) {
    .HeroTeaser {
        --gap-top: 60px
    }
}

@media (max-width:750px) {
    .HeroTeaser {
        --gap-top: 40px
    }
}

.HeroTeaser--grid {
    align-items: start;
    display: grid;
    gap: 60px 40px;
    grid-template: "text image" 1fr "badge image" auto;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    z-index: 2
}

@media (max-width:900px) {
    .HeroTeaser--grid {
        gap: 40px;
        grid-template-areas: "text text" "image image"
    }
}

html.bsi-ce-edit-mode .HeroTeaser--grid {
    grid-template-areas: "text text" "badge badge" "image image"
}

.HeroTeaser--content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-area: text;
    position: relative;
    z-index: 2
}

@media (min-width:1151px) {
    .HeroTeaser--content {
        padding-left: 7rem
    }
}

@media (max-width:900px) {
    .HeroTeaser--content {
        align-items: center;
        justify-self: center;
        text-align: center
    }
}

.HeroTeaser--content .HeroTeaser--title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0
}

@media (max-width:900px) {
    .HeroTeaser--content .HeroTeaser--title {
        font-size: 30px
    }
}

.HeroTeaser--content .HeroTeaser--text {
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0
}

@media (width <=1300px) {
    .HeroTeaser--content .HeroTeaser--text {
        font-size: 16px
    }
}

@media (max-width:900px) {
    .HeroTeaser--content .HeroTeaser--text {
        font-size: 16px
    }
}

.HeroTeaser--image-wrapper {
    aspect-ratio: 1/1;
    display: flex;
    grid-area: image;
    justify-content: flex-end;
    position: relative
}

@media (max-width:900px) {
    .HeroTeaser--image-wrapper {
        aspect-ratio: auto;
        justify-content: center;
        max-height: clamp(300px, 80vw, 500px)
    }
}

.HeroTeaser--image-container {
    border-radius: var(--border-radius-m);
    overflow: hidden;
    position: relative
}

.HeroTeaser--image-container picture {
    display: block;
    height: 100%
}

.HeroTeaser--image-container img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.HeroTeaser--badge-zone {
    grid-area: badge;
    position: relative;
    z-index: 2
}

@media (max-width:900px) {
    .HeroTeaser--badge-zone {
        align-self: flex-end;
        grid-area: image;
        padding: 4vw
    }
}

html.bsi-ce-edit-mode .HeroTeaser--badge-zone {
    grid-area: badge;
    min-height: 40px
}

.hero-image__image-container a {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.HeroTeaserSlider {
    --gap-top: 120px;
    --gap-bottom: 120px;
    color: var(--variant-text-color);
    overflow: hidden;
    padding-top: var(--gap-top);
    position: relative
}

.HeroTeaserSlider:after {
    background-color: var(--variant-background-color);
    content: "";
    inset: 0 0 var(--gap-bottom) 0;
    position: absolute
}

@media (max-width:1150px) {
    .HeroTeaserSlider {
        --gap-top: 60px
    }
}

@media (max-width:750px) {
    .HeroTeaserSlider {
        --gap-top: 40px
    }
}

.HeroTeaserSlider--inner {
    position: relative;
    z-index: 2
}

.HeroTeaserSlider--grid {
    display: flex;
    flex-direction: column;
    gap: 60px
}

@media (max-width:580px) {
    .HeroTeaserSlider--grid {
        gap: 40px
    }
}

.HeroTeaserSlider--content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 max((100% - 62rem)/2, 280px);
    position: relative;
    text-align: center;
    z-index: 2
}

@media (max-width:900px) {
    .HeroTeaserSlider--content {
        padding: 0 max((100% - 62rem)/2, 20px)
    }
}

.HeroTeaserSlider--content .HeroTeaserSlider--title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0
}

@media (width <=1300px) {
    .HeroTeaserSlider--content .HeroTeaserSlider--title {
        font-size: 30px
    }
}

@media (max-width:1150px) {
    .HeroTeaserSlider--content .HeroTeaserSlider--title {
        font-size: 30px
    }
}

.HeroTeaserSlider--content .HeroTeaserSlider--text {
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0
}

@media (width <=1300px) {
    .HeroTeaserSlider--content .HeroTeaserSlider--text {
        font-size: 16px
    }
}

@media (max-width:1150px) {
    .HeroTeaserSlider--content .HeroTeaserSlider--text {
        font-size: 16px
    }
}

.HeroTeaserSlider--badge-zone {
    height: 0;
    padding: 0 max((100% - 62rem - 500px)/2, 20px);
    position: relative;
    z-index: 2
}

html.bsi-ce-edit-mode .HeroTeaserSlider--badge-zone {
    min-height: 40px
}

.HeroTeaserSlider--badge-zone .Badge {
    transform: translateY(-50%) translateX(-80px)
}

@media (max-width:1440px) {
    .HeroTeaserSlider--badge-zone .Badge {
        transform: translateY(-50%) translateX(-20px)
    }
}

@media (max-width:900px) {
    .HeroTeaserSlider--badge-zone .Badge {
        transform: translateY(-40px) translateX(-20px)
    }
}

@media (max-width:580px) {
    .HeroTeaserSlider--badge-zone .Badge {
        transform: translateY(-20px) translateX(-10px)
    }
}

.HeroTeaserSlider--teasers {
    width: 100%
}

@media (max-width:750px) {
    .HeroTeaserSlider--teasers {
        margin: 0 -1rem;
        width: calc(100% + 2rem)
    }
}

.HeroTeaserSlider--slider {
    --Slider-gap: 20px;
    margin: 0 -1rem;
    overflow: hidden
}

.HeroTeaserSlider--slider-slider {
    --slideWidth: 33.33%;
    margin: 0 auto;
    width: var(--slideWidth)
}

@media (max-width:750px) {
    .HeroTeaserSlider--slider-slider {
        --slideWidth: 50%
    }
}

@media (max-width:580px) {
    .HeroTeaserSlider--slider-slider {
        --slideWidth: 75%
    }
}

html.bsi-ce-edit-mode .HeroTeaserSlider--slider-slider {
    width: 100%
}

html.bsi-ce-edit-mode .HeroTeaserSlider--slider-slider .HeroTeaserSlider--slider--wrapper {
    overflow: auto
}

html.bsi-ce-edit-mode .HeroTeaserSlider--slider-slider .HeroTeaserSlider--slider--wrapper>* {
    width: var(--slideWidth)
}

.HeroTeaserSlider--slider-slider .js-Slider--slide {
    opacity: 0;
    scale: .85;
    transition: scale .6s cubic-bezier(.4, 0, .2, 1), opacity .6s cubic-bezier(.4, 0, .2, 1)
}

.HeroTeaserSlider--slider-slider .js-Slider--slide.swiper-slide-active {
    opacity: 1;
    scale: 1
}

.HeroTeaserSlider--slider-slider .js-Slider--slide.swiper-slide-next,
.HeroTeaserSlider--slider-slider .js-Slider--slide.swiper-slide-prev {
    opacity: 1;
    scale: .92
}

.HeroTeaserSlider--slider--wrapper {
    display: flex;
    flex-flow: row nowrap
}

.HeroTeaserSlider--slider--wrapper>* {
    flex: 0 0 auto;
    margin: 0 calc(var(--Slider-gap)/2);
    width: calc(100% - var(--Slider-gap))
}

.HeroTeaserSlider--pagination {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px
}

.HeroTeaserSlider--pagination .swiper-pagination-bullet {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    height: 40px;
    justify-content: center;
    max-width: 60px;
    min-width: 40px
}

.HeroTeaserSlider--pagination .swiper-pagination-bullet:before {
    background-color: #0003;
    border-radius: 2px;
    content: "";
    display: block;
    height: 4px;
    width: 100%
}

.HeroTeaserSlider--pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    background-color: #891350
}

.HeroTeaserSlider--pagination.swiper-pagination-lock {
    display: none
}

html:not(.bsi-ce-edit-mode) .ImageOneWhole.is-clickable {
    position: relative
}

html:not(.bsi-ce-edit-mode) .ImageOneWhole.is-clickable .Button {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.ImageOneWhole--img {
    border-radius: var(--border-radius-m);
    display: block;
    height: auto;
    max-width: 100%
}

.ImageOneWhole--caption {
    margin-top: .5em
}

.HeroTeaserText.bsi-herostage-theme-red {
    --variant-border-color: var(--c-violet);
    --variant-background-color: var(--c-red);
    --variant-text-color: var(--c-rose);
    --variant-highlight-color: var(--c-violet);
    --variant-highlight-text-color: var(--c-bordeaux)
}

.HeroTeaserText.bsi-herostage-theme-yellow {
    --variant-border-color: var(--c-bordeaux);
    --variant-background-color: var(--c-yellow);
    --variant-text-color: var(--c-red);
    --variant-highlight-color: var(--c-bordeaux);
    --variant-highlight-text-color: var(--c-violet)
}

.HeroTeaserText.bsi-herostage-theme-beige {
    --variant-border-color: var(--c-red);
    --variant-background-color: var(--c-beige);
    --variant-text-color: var(--c-bordeaux);
    --variant-highlight-color: var(--c-red);
    --variant-highlight-text-color: var(--c-violet)
}

.HeroTeaserText.bsi-herostage-theme-rose {
    --variant-border-color: var(--c-violet);
    --variant-background-color: var(--c-rose);
    --variant-text-color: var(--c-red);
    --variant-highlight-color: var(--c-violet);
    --variant-highlight-text-color: var(--c-bordeaux)
}

.HeroTeaserText.bsi-herostage-theme-violet {
    --variant-border-color: var(--c-red);
    --variant-background-color: var(--c-violet);
    --variant-text-color: var(--c-yellow);
    --variant-highlight-color: var(--c-red);
    --variant-highlight-text-color: var(--c-bordeaux)
}

.HeroTeaserText,
.HeroTeaserText.bsi-herostage-theme-bordeaux {
    --variant-border-color: var(--c-red);
    --variant-background-color: var(--c-bordeaux);
    --variant-text-color: var(--c-rose);
    --variant-highlight-color: var(--c-red);
    --variant-highlight-text-color: var(--c-violet)
}

.HeroTeaserText {
    background-color: var(--variant-background-color) !important;
    border: 2rem solid var(--variant-border-color) !important;
    border-radius: var(--border-radius-m);
    color: var(--variant-text-color) !important;
    display: flex;
    min-height: 300px;
    padding: 40px 24px;
    -webkit-text-decoration: none !important;
    text-decoration: none !important
}

@media (hover:hover) {
    .HeroTeaserText:hover .HeroTeaserText--title {
        -webkit-text-decoration: underline;
        text-decoration: underline
    }

    .HeroTeaserText:hover .Button.HeroTeaserText--button {
        --button-background-color: var(--variant-highlight-text-color)
    }
}

.HeroTeaserText--inner {
    align-items: flex-end;
    display: flex;
    gap: 40px
}

.HeroTeaserText--content {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.HeroTeaserText--pretitle {
    font-size: 24px
}

.HeroTeaserText--title {
    font-size: 42px;
    font-weight: 700;
    margin: 0
}

.Button.HeroTeaserText--button {
    --button-background-color: var(--variant-highlight-color)
}

.Overlay {
    align-items: center;
    background-color: #00000080;
    border: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translateY(-20px);
    transition: opacity .3s ease-in-out, visibility 0s .3s, transform 0s .3s;
    visibility: hidden;
    width: 100%;
    z-index: 1000
}

.Overlay[open] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .3s ease-in-out, visibility 0s 0s, transform 0s 0s;
    visibility: visible
}

.Overlay [data-js-overlay-id] {
    display: none
}

html.bsi-ce-edit-mode .Overlay {
    background-color: initial;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    position: relative;
    transform: none;
    visibility: visible
}

html.bsi-ce-edit-mode .Overlay .Overlay--inner {
    border: 1px solid #ddd;
    max-height: none;
    min-height: 100px
}

html.bsi-ce-edit-mode .Overlay [data-js-overlay-id] {
    color: #aaa;
    display: block;
    font-size: 24px;
    font-style: italic
}

html.bsi-ce-edit-mode .Overlay [data-js-overlay-id]:before {
    content: "Overlay ID: #"
}

.Overlay--inner {
    background-color: var(--c-white);
    border-radius: var(--border-radius-m);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    max-width: 800px;
    position: relative;
    width: 100%
}

.Overlay--close {
    height: 48px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 48px
}

.Overlay--close:after,
.Overlay--close:before {
    background-color: var(--c-black);
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 24px
}

.Overlay--close:before {
    transform: translate(-50%, -50%) rotate(45deg)
}

.Overlay--close:after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.Overlay--close:hover {
    opacity: .75
}

.Overlay--content {
    flex-grow: 1;
    overflow: auto;
    padding: 20px
}

.Overlay--trigger {
    display: none;
    position: relative
}

html.bsi-ce-edit-mode .Overlay--trigger {
    display: block
}

html.bsi-ce-edit-mode .Overlay--trigger:before {
    color: #aaa;
    content: "Overlay Trigger:";
    display: block;
    font-size: 12px;
    font-style: italic
}

.TwoColumn {
    display: flex;
    flex-flow: row wrap;
    gap: 24px
}

.TwoColumn.as-1-2 .TwoColumn--left {
    flex: 1 0 calc(33.33333% - 1rem)
}

.TwoColumn.as-1-2 .TwoColumn--right,
.TwoColumn.as-2-1 .TwoColumn--left {
    flex: 2 0 calc(66.66667% - 1rem)
}

.TwoColumn.as-2-1 .TwoColumn--right {
    flex: 1 0 calc(33.33333% - 1rem)
}

@media (max-width:750px) {
    .TwoColumn {
        flex-flow: column wrap
    }
}

.TwoColumn--left,
.TwoColumn--right {
    flex: 1 0 calc(50% - 1rem)
}

.TwoColumn--left .Image,
.TwoColumn--right .Image {
    border-radius: var(--border-radius-m);
    max-width: 100%;
    overflow: hidden
}

.TwoColumn--left .content,
.TwoColumn--right .content {
    max-width: 100%;
    padding: 0
}

.TwoColumn--left>:first-child,
.TwoColumn--right>:first-child {
    margin-top: 0
}

.TwoColumn--left>.Headline:first-child>:first-child,
.TwoColumn--right>.Headline:first-child>:first-child {
    margin-top: -.15em
}

body,
button,
input,
select,
textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.bsi-visuallyhidden {
    border: 0;
    clip-path: inset(0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.bsi-theme-red {
    --variant-background-color: var(--c-red);
    --variant-logo-color: var(--c-white);
    --variant-text-color: var(--c-rose);
    --variant-highlight-color: var(--c-yellow);
    --variant-highlight-text-color: var(--c-red)
}

.bsi-theme-yellow {
    --variant-background-color: var(--c-yellow);
    --variant-logo-color: var(--c-red);
    --variant-text-color: var(--c-red);
    --variant-highlight-color: var(--c-violet);
    --variant-highlight-text-color: var(--c-white)
}

.bsi-theme-beige {
    --variant-background-color: var(--c-beige);
    --variant-logo-color: var(--c-red);
    --variant-text-color: var(--c-bordeaux);
    --variant-highlight-color: var(--c-red);
    --variant-highlight-text-color: var(--c-white)
}

.bsi-theme-rose {
    --variant-background-color: var(--c-rose);
    --variant-logo-color: var(--c-red);
    --variant-text-color: var(--c-red);
    --variant-highlight-color: var(--c-bordeaux);
    --variant-highlight-text-color: var(--c-white)
}

.bsi-theme-violet {
    --variant-background-color: var(--c-violet);
    --variant-logo-color: var(--c-white);
    --variant-text-color: var(--c-yellow);
    --variant-highlight-color: var(--c-bordeaux);
    --variant-highlight-text-color: var(--c-white)
}

.bsi-theme-bordeaux {
    --variant-background-color: var(--c-bordeaux);
    --variant-logo-color: var(--c-white);
    --variant-text-color: var(--c-rose);
    --variant-highlight-color: var(--c-yellow);
    --variant-highlight-text-color: var(--c-bordeaux)
}

.bsi-theme-white {
    --variant-background-color: var(--c-white);
    --variant-logo-color: var(--c-red);
    --variant-text-color: var(--c-black);
    --variant-highlight-color: var(--c-red);
    --variant-highlight-text-color: var(--c-white)
}

:root {
    --variant-background-color: var(--c-bordeaux);
    --variant-logo-color: var(--c-white);
    --variant-text-color: var(--c-rose);
    --variant-highlight-color: var(--c-yellow);
    --variant-highlight-text-color: var(--c-bordeaux)
}

html.bsi-ce-edit-mode [data-bsi-dropzone-allowed-elements] {
    min-height: 20px;
    min-width: 20px
}

html.bsi-ce-edit-mode #bsi-main {
    padding-bottom: 80px
}

body.bsi-template-iframe {
    min-width: unset !important
}