@charset "UTF-8";

* {
    color: inherit;
    font: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-decoration: inherit
}

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

figure {
    margin-left: 0;
    margin-right: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

del,
ins {
    -webkit-text-decoration: none;
    text-decoration: none
}

li {
    list-style: none
}

caption,
th {
    text-align: left
}

q:after,
q:before {
    content: ""
}

abbr,
acronym {
    border: 0;
    font-feature-settings: normal;
    font-variant: normal;
    -webkit-text-decoration: none;
    text-decoration: none
}

sub,
sup {
    vertical-align: initial
}

iframe {
    border: 0
}

button,
input[type=button],
input[type=submit] {
    appearance: button;
    background: #0000;
    border: 0;
    border-radius: 0;
    cursor: pointer
}

button[disabled],
input[disabled] {
    cursor: default
}

input[type=search] {
    appearance: textfield
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

audio,
canvas,
img,
svg,
video {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

:root,
[data-theme=light] {
    --danger1: #ffc3cb;
    --danger2: #d80909;
    --danger3: #800817;
    --grapefruit: #ff6469;
    --grapefruit1: #ffd1d2;
    --grapefruit2: #ffb2b4;
    --grapefruit3: #ff9396;
    --grapefruit4: #ff7478;
    --grapefruit5: #e65a61;
    --grapefruit7: #993c44;
    --grapefruit8: #80323a;
    --grapefruit9: #66282f;
    --grapfruit6: #cc5058;
    --grau1: #f8f8f8;
    --grau2: #e6e6e6;
    --grau3: #ccc;
    --grau4: #b3b3b3;
    --grau5: #999;
    --grau6: grey;
    --grau7: #666;
    --grau8: #4d4d4d;
    --hellblau: #00b5d1;
    --hellblau1: #b3e7f1;
    --hellblau2: #80d8e8;
    --hellblau3: #4dcbdf;
    --hellblau4: #19bcd6;
    --hellblau5: #009abc;
    --hellblau6: #0086a7;
    --hellblau7: #007292;
    --hellblau8: #006685;
    --hellblau9: #005a78;
    --info1: #f3f7ff;
    --info2: #105ff9;
    --petrol: #004b5a;
    --petrol1: #eef6f6;
    --petrol10: #00292e;
    --petrol11: #001b1f;
    --petrol2: #d6ebeb;
    --petrol3: #a6d8d9;
    --petrol4: #70bfc2;
    --petrol5: #49a6ab;
    --petrol6: #1a8d93;
    --petrol7: #067079;
    --petrol8: #004b5a;
    --petrol9: #00373d;
    --postfinancegelb: #fc0;
    --schwarz: #333;
    --success1: #eef6f6;
    --success2: #004b5a;
    --warning1: #fef5e5;
    --warning2: orange;
    --weiss: #fff;
    --alert-colors-danger1-danger2: var(--danger1);
    --alert-colors-danger2-danger1: var(--danger2);
    --alert-colors-info1-info2: var(--info1);
    --alert-colors-info2-info1: var(--info2);
    --alert-colors-success1-success2: var(--success1);
    --alert-colors-success2-success1: var(--success2);
    --alert-colors-warning1-warning2: var(--warning1);
    --alert-colors-warning2-warning1: var(--warning2);
    --background-postfinancegelb-petrol8: var(--postfinancegelb);
    --background-weiss-petrol11: var(--weiss);
    --button-grau7-petrol5: var(--grau7);
    --button-petrol8-petrol3: var(--petrol8);
    --container-grau1-petrol10: var(--grau1);
    --divider-grau7-petrol8: var(--grau7);
    --graph-colors-grapefruit1-grapefruit9: var(--grapefruit1);
    --graph-colors-grapefruit2-grapefruit8: var(--grapefruit2);
    --graph-colors-grapefruit3-grapefruit7: var(--grapefruit3);
    --graph-colors-grapefruit4-grapefruit6: var(--grapefruit4);
    --graph-colors-grapefruit5-grapefruit5: var(--grapefruit5);
    --graph-colors-grapefruit6-grapefruit4: var(--grapfruit6);
    --graph-colors-grapefruit7-grapefruit3: var(--grapefruit7);
    --graph-colors-grapefruit8-grapefruit2: var(--grapefruit8);
    --graph-colors-grapefruit9-grapefruit1: var(--grapefruit9);
    --graph-colors-hellblau1-hellblau9: var(--hellblau1);
    --graph-colors-hellblau2-hellblau8: var(--hellblau2);
    --graph-colors-hellblau3-hellblau7: var(--hellblau3);
    --graph-colors-hellblau4-hellblau6: var(--hellblau4);
    --graph-colors-hellblau5-hellblau5: var(--hellblau5);
    --graph-colors-hellblau6-hellblau4: var(--hellblau6);
    --graph-colors-hellblau7-hellblau3: var(--hellblau7);
    --graph-colors-hellblau8-hellblau2: var(--hellblau8);
    --graph-colors-hellblau9-hellblau1: var(--hellblau9);
    --graph-colors-petrol1-petrol10: var(--petrol1);
    --graph-colors-petrol10-petrol2: var(--petrol10);
    --graph-colors-petrol11-petrol1: var(--petrol11);
    --graph-colors-petrol2-petrol10: var(--petrol2);
    --graph-colors-petrol3-petrol9: var(--petrol3);
    --graph-colors-petrol4-petrol8: var(--petrol4);
    --graph-colors-petrol5-petrol7: var(--petrol5);
    --graph-colors-petrol6-petrol6: var(--petrol6);
    --graph-colors-petrol7-petrol5: var(--petrol7);
    --graph-colors-petrol8-petrol4: var(--petrol8);
    --graph-colors-petrol9-petrol3: var(--petrol9);
    --hover-petrol11-grau1: var(--petrol11);
    --supporting-colors-grau1-grau8: var(--grau1);
    --supporting-colors-grau2-grau7: var(--grau2);
    --supporting-colors-grau3-grau6: var(--grau3);
    --supporting-colors-grau4-grau5: var(--grau4);
    --supporting-colors-grau5-grau4: var(--grau5);
    --supporting-colors-grau6-grau3: var(--grau6);
    --supporting-colors-grau7-grau2: var(--grau7);
    --supporting-colors-schwarz-weiss: var(--schwarz);
    --supporting-colors-weiss-schwarz: var(--weiss);
    --typeface-grau7-grau3: var(--grau7);
    --typeface-grau7-petrol8: var(--grau7);
    --typeface-petrol8-petrol3: var(--petrol8);
    --typeface-schwarz-grau1: var(--schwarz);
    --typeface-weiss-grau1: var(--weiss);
    --typeface-weiss-schwarz: var(--weiss);
    --typeface-alert-danger2-grau1: var(--danger2);
    --typeface-alert-info2-grau1: var(--info2);
    --typeface-alert-petrol8-petrol6: var(--petrol8);
    --typeface-alert-warning2-grau1: var(--warning2);
    --typeface-alert-weiss-danger2: var(--weiss);
    --typeface-alert-weiss-info2: var(--weiss);
    --typeface-alert-weiss-petrol8: var(--weiss);
    --typeface-alert-weiss-warning2: var(--weiss);
    --ui-icons-grau6-grau1: var(--grau6);
    --ui-icons-petrol11-grau1: var(--petrol11);
    --ui-icons-petrol8-petrol3: var(--petrol8);
    --divider-schwarz-grau1: var(--schwarz);
    --container-petrol1-petrol10: var(--petrol1);
    --typeface-danger2-grapefruit: var(--danger2);
    --typeface-grau7-grau1: var(--grau7);
    --divider-grau3-petrol8: var(--grau3);
    --container-petrol8-petrol3: var(--petrol8);
    --typeface-grau7-petrol3: var(--grau7);
    --container-grau2-petrol9: var(--grau2);
    --typeface-grau7-petrol9: var(--grau7);
    --container-petrol2-petrol9: var(--petrol2);
    --container-weiss-petrol9: var(--weiss);
    --divider-petrol8-petrol3: var(--petrol8);
    --divider-grau3-petrol3: var(--grau3);
    --divider-grau2-petrol8: var(--grau2);
    --divider-petrol2-petrol9: var(--petrol2);
    --flying-focus-petrol8-petrol3: var(--petrol8);
    --typeface-petrol11-grau1: var(--petrol11);
    --hover-petrol3-petrol4: var(--petrol3)
}

@font-face {
    font-family: PostFinance Grotesk;
    font-weight: 400;
    src: url(../fonts/PostFinance_Grotesk/PostFinanceGrotesk-Light.woff2) format("woff2"), url(../fonts/PostFinance_Grotesk/PostFinanceGrotesk-Light.ttf) format("truetype")
}

@font-face {
    font-family: PostFinance Grotesk;
    font-weight: 500;
    src: url(../fonts/PostFinance_Grotesk/PostFinanceGrotesk-Medium.woff2) format("woff2"), url(../fonts/PostFinance_Grotesk/PostFinanceGrotesk-Medium.ttf) format("truetype")
}

@font-face {
    font-family: PostFinance Grotesk;
    font-weight: 700;
    src: url(../fonts/PostFinance_Grotesk/PostFinanceGrotesk-Bold.woff2) format("woff2"), url(../fonts/PostFinance_Grotesk/PostFinanceGrotesk-Bold.ttf) format("truetype")
}

:root {
    --s-1: 2px;
    --s-2: 4px;
    --s-3: 8px;
    --s-4: 12px;
    --s-5: 16px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 48px;
    --s-9: 56px;
    --s-11: 80px;
    --s-12: 96px;
    --s-13: 96px;
    --s-14: 140px;
    --s-15: 192px;
    --s-page-x: 64px;
    --s-page-y: var(--s-12)
}

@media (max-width:1125px) {
    :root {
        --s-1: 2px;
        --s-2: 4px;
        --s-3: 8px;
        --s-4: 12px;
        --s-5: 16px;
        --s-6: 20px;
        --s-7: 24px;
        --s-8: 40px;
        --s-9: 48px;
        --s-11: 64px;
        --s-12: 80px;
        --s-13: 96px;
        --s-14: 128px;
        --s-15: 160px;
        --s-page-x: 64px
    }
}

@media (max-width:750px) {
    :root {
        --s-1: 2px;
        --s-2: 4px;
        --s-3: 8px;
        --s-4: 12px;
        --s-5: 16px;
        --s-6: 20px;
        --s-7: 24px;
        --s-8: 32px;
        --s-9: 40px;
        --s-11: 56px;
        --s-12: 64px;
        --s-14: 96px;
        --s-15: 128px;
        --s-page-x: 16px
    }
}

html {
    font-family: PostFinance Grotesk, helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent
}

@media (max-width:750px) {
    html {
        font-size: 16px;
        line-height: 1.6
    }
}

html.bsi-ce-edit-mode {
    padding-bottom: 100px
}

[data-theme] {
    background-color: var(--background-weiss-petrol11);
    color: var(--typeface-schwarz-grau1)
}

main {
    position: relative
}

hr {
    border: 0;
    border-top: 1px solid gray;
    margin: var(--s-7, 32px) 0
}

:focus-visible {
    outline: none
}

img {
    display: block;
    max-width: 100%
}

@media (prefers-color-scheme:dark) {
    option {
        background-color: #000;
        color: #fff
    }
}

.visuallyhidden {
    clip-path: inset(0);
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0
}

.no-scroll {
    overflow: hidden
}

.styleguide-example[data-theme=dark] .dark-only,
[data-theme=dark] .dark-only {
    display: block
}

.styleguide-example[data-theme=light] .dark-only,
[data-theme=light] .dark-only {
    display: none
}

.styleguide-example[data-theme=light] .light-only,
[data-theme=light] .light-only {
    display: block
}

.styleguide-example[data-theme=dark] .light-only,
[data-theme=dark] .light-only {
    display: none
}

.Headline {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr)
}

@media (min-width:1423px) {
    .Headline {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Headline {
        --grid-template-gap: 20px
    }
}

.Headline>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .Headline>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .Headline>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.Headline>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .Headline>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .Headline>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.Headline:has(h2) {
    margin-bottom: var(--s-5);
    margin-top: var(--s-12)
}

.Headline:has(h1) {
    margin-bottom: var(--s-8);
    margin-top: var(--s-12)
}

.Headline h1,
.Headline h2,
.Headline h3 {
    display: block
}

.Headline h1:first-child,
.Headline h2:first-child,
.Headline h3:first-child {
    margin-top: 0
}

.Headline h1:last-child,
.Headline h2:last-child,
.Headline h3:last-child {
    margin-bottom: 0
}

.Headline h1 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 56px;
    line-height: 1.25;
    margin-bottom: var(--s-8);
    margin-top: var(--s-9)
}

@media (max-width:1125px) {
    .Headline h1 {
        font-size: 44px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .Headline h1 {
        font-size: 32px;
        line-height: 1.25
    }
}

.Headline h2 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: var(--s-7);
    margin-top: var(--s-8)
}

@media (max-width:1125px) {
    .Headline h2 {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .Headline h2 {
        font-size: 24px;
        line-height: 1.25
    }
}

.Headline h3 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: var(--s-6);
    margin-top: var(--s-7)
}

@media (max-width:750px) {
    .Headline h3 {
        font-size: 20px;
        line-height: 1.25
    }
}

.LeadText {
    margin-bottom: var(--s-8);
    margin-top: var(--s-8)
}

.LeadText--inner {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr)
}

@media (min-width:1423px) {
    .LeadText--inner {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .LeadText--inner {
        --grid-template-gap: 20px
    }
}

.LeadText--inner>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .LeadText--inner>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .LeadText--inner>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.LeadText--inner>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .LeadText--inner>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .LeadText--inner>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.LeadText--content {
    color: var(--typeface-petrol8-petrol3);
    display: flex;
    flex-direction: column;
    font-size: 24px;
    gap: var(--s-8);
    line-height: 1.5
}

@media (max-width:1125px) {
    .LeadText--content {
        font-size: 24px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .LeadText--content {
        font-size: 20px;
        line-height: 1.25
    }
}

.LeadText--cta {
    align-self: flex-start
}

.LeadText--cta:empty {
    display: none
}

.Richtext {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    margin-bottom: var(--s-12)
}

@media (min-width:1423px) {
    .Richtext {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Richtext {
        --grid-template-gap: 20px
    }
}

.Richtext>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .Richtext>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .Richtext>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.Richtext>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .Richtext>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .Richtext>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.Richtext .Richtext--inner h2 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: var(--s-7);
    margin-top: var(--s-8)
}

@media (max-width:1125px) {
    .Richtext .Richtext--inner h2 {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .Richtext .Richtext--inner h2 {
        font-size: 24px;
        line-height: 1.25
    }
}

.Richtext .Richtext--inner h3 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: var(--s-6);
    margin-top: var(--s-7)
}

@media (max-width:750px) {
    .Richtext .Richtext--inner h3 {
        font-size: 20px;
        line-height: 1.25
    }
}

.Richtext .Richtext--inner h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: var(--s-3);
    margin-top: var(--s-6)
}

@media (max-width:750px) {
    .Richtext .Richtext--inner h4 {
        font-size: 16px;
        line-height: 1.6
    }
}

.Richtext .Richtext--inner a:not([class]) {
    color: var(--typeface-petrol8-petrol3);
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.Richtext .Richtext--inner a:not([class]):hover {
    color: var(--typeface-petrol11-grau1)
}

.Richtext .Richtext--inner b,
.Richtext .Richtext--inner strong {
    font-weight: 700
}

.Richtext .Richtext--inner ol,
.Richtext .Richtext--inner p,
.Richtext .Richtext--inner ul {
    margin-bottom: var(--s-5)
}

.Richtext .Richtext--inner ol+h2,
.Richtext .Richtext--inner ol+h3,
.Richtext .Richtext--inner ol+h4,
.Richtext .Richtext--inner p+h2,
.Richtext .Richtext--inner p+h3,
.Richtext .Richtext--inner p+h4,
.Richtext .Richtext--inner ul+h2,
.Richtext .Richtext--inner ul+h3,
.Richtext .Richtext--inner ul+h4 {
    margin-top: var(--s-8)
}

.Richtext .Richtext--inner ol:not([class]),
.Richtext .Richtext--inner ul:not([class]) {
    display: block
}

.Richtext .Richtext--inner ol:not([class]) li,
.Richtext .Richtext--inner ul:not([class]) li {
    list-style-type: none;
    margin-bottom: .5ex;
    padding-left: 3ex;
    position: relative
}

.Richtext .Richtext--inner ol:not([class]) li:before,
.Richtext .Richtext--inner ul:not([class]) li:before {
    content: "•";
    display: inline-block;
    left: 1ex;
    overflow: hidden;
    position: absolute
}

.Richtext .Richtext--inner ol:not([class]) li:last-child,
.Richtext .Richtext--inner ul:not([class]) li:last-child {
    margin-bottom: 0
}

.Richtext .Richtext--inner ol:not([class]) {
    counter-reset: ol--counter
}

.Richtext .Richtext--inner ol:not([class]) li {
    list-style-type: none
}

.Richtext .Richtext--inner ol:not([class]) li:before {
    content: counter(ol--counter) ".";
    counter-increment: ol--counter;
    left: 0;
    text-align: center;
    width: 3ex
}

.Richtext .Richtext--inner ol:not([class]):has(:nth-child(10)) li {
    padding-left: 4ex
}

.Richtext .Richtext--inner ol:not([class]):has(:nth-child(10)) li:before {
    width: 4ex
}

.Richtext .Richtext--inner>:first-child {
    margin-top: 0
}

.Richtext .Richtext--inner>:last-child {
    margin-bottom: 0
}

.Table {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    margin-bottom: var(--s-12)
}

@media (min-width:1423px) {
    .Table {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Table {
        --grid-template-gap: 20px
    }
}

.Table>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .Table>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .Table>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.Table>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .Table>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .Table>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.Table--inner {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.Table--inner table {
    min-width: 100%
}

.Table--inner table .Table--head--text {
    display: none
}

.Table--inner table tr {
    border-bottom: 1px solid var(--divider-grau2-petrol8)
}

.Table--inner table tr>:first-child {
    padding-left: 0
}

.Table--inner table tr>:last-child {
    padding-right: 0
}

.Table--inner table td,
.Table--inner table th {
    padding: var(--s-5) var(--s-3);
    vertical-align: top
}

.Table--inner tbody,
.Table--inner tfoot,
.Table--inner thead {
    font-size: 18px;
    line-height: 1.6
}

@media (max-width:750px) {

    .Table--inner tbody,
    .Table--inner tfoot,
    .Table--inner thead {
        font-size: 16px;
        line-height: 1.6
    }
}

.Table--inner tbody th,
.Table--inner tfoot th,
.Table--inner thead th {
    font-weight: 700
}

.Table--inner.has-claustrophobia table,
.Table--inner.has-claustrophobia tbody,
.Table--inner.has-claustrophobia tfoot {
    display: block
}

.Table--inner.has-claustrophobia thead {
    display: none
}

.Table--inner.has-claustrophobia tr>:first-child {
    padding-top: var(--s-4)
}

.Table--inner.has-claustrophobia tr>:last-child {
    padding-bottom: var(--s-4)
}

.Table--inner.has-claustrophobia td,
.Table--inner.has-claustrophobia th {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: var(--s-3) 0;
    width: 100%
}

.Table--inner.has-claustrophobia td:empty,
.Table--inner.has-claustrophobia th:empty {
    display: none
}

.Table--inner.has-claustrophobia td .Table--head--text,
.Table--inner.has-claustrophobia th .Table--head--text {
    display: block
}

.Table--inner.has-claustrophobia th {
    font-weight: 700
}

.Table--inner.has-claustrophobia tr {
    display: flex;
    flex-flow: row wrap
}

.Table--inner.has-claustrophobia tbody tr.Table--header {
    display: none
}

.Table--caption {
    font-size: 12px;
    line-height: 1;
    margin-top: var(--s-5)
}

.ButtonRow {
    margin-bottom: var(--s-12)
}

.ButtonRow+.ButtonRow {
    margin-top: calc(var(--s-9)*-1)
}

.ButtonRow.linklist {
    margin-bottom: var(--s-8)
}

.ButtonRow.linklist .ButtonRow--buttons {
    align-content: flex-start;
    flex-flow: column wrap
}

.ButtonRow--inner {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr)
}

@media (min-width:1423px) {
    .ButtonRow--inner {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .ButtonRow--inner {
        --grid-template-gap: 20px
    }
}

.ButtonRow--inner>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .ButtonRow--inner>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .ButtonRow--inner>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.ButtonRow--inner>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .ButtonRow--inner>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .ButtonRow--inner>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.ButtonRow--buttons {
    display: flex;
    flex-flow: row-reverse wrap;
    gap: var(--s-5);
    justify-content: flex-start;
    width: 100%
}

@media (max-width:750px) {
    .ButtonRow--buttons {
        align-self: center;
        flex-direction: column
    }

    .ButtonRow--buttons .Link {
        text-align: center;
        width: 100%
    }
}

.ButtonRow--buttons .Link[class=Link] {
    order: 999
}

.ButtonRow--buttons:has(.Link[class=Link]):after {
    content: "";
    flex: 1;
    order: 998
}

.Link:not(.button):not(.button-dark):not(.button-secondary) {
    align-items: center;
    color: var(--typeface-petrol8-petrol3);
    display: inline-flex;
    flex-direction: row;
    font-size: 18px;
    gap: var(--s-2);
    line-height: 1;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none
}

@media (max-width:750px) {
    .Link:not(.button):not(.button-dark):not(.button-secondary) {
        font-size: 16px
    }
}

.Link:not(.button):not(.button-dark):not(.button-secondary):before {
    background-color: currentcolor;
    content: "";
    height: 1px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: width .3s ease-out, opacity .3s linear;
    width: 0
}

.Link:not(.button):not(.button-dark):not(.button-secondary):after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23004B5A' stroke-linecap='round' stroke-linejoin='round' d='M6 2.5 10.5 8 6 13.5'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    flex: 0 0 auto;
    height: 16px;
    transform: translateY(-.05em);
    width: 16px
}

.styleguide-example[data-theme=dark] .Link:not(.button):not(.button-dark):not(.button-secondary):after,
[data-theme=dark] .Link:not(.button):not(.button-dark):not(.button-secondary):after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23a6d8d9' stroke-linecap='round' stroke-linejoin='round' d='M6 2.5 10.5 8 6 13.5'/%3E%3C/svg%3E")
}

.Link:not(.button):not(.button-dark):not(.button-secondary):focus-visible,
.Link:not(.button):not(.button-dark):not(.button-secondary):hover {
    color: var(--hover-petrol11-grau1)
}

.Link:not(.button):not(.button-dark):not(.button-secondary):focus-visible:before,
.Link:not(.button):not(.button-dark):not(.button-secondary):hover:before {
    background-color: var(--hover-petrol11-grau1);
    opacity: 1;
    width: 100%
}

.Link:not(.button):not(.button-dark):not(.button-secondary):focus-visible:after,
.Link:not(.button):not(.button-dark):not(.button-secondary):hover:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23001b1f' stroke-linecap='round' stroke-linejoin='round' d='M6 2.5 10.5 8 6 13.5'/%3E%3C/svg%3E")
}

.styleguide-example[data-theme=dark] .Link:not(.button):not(.button-dark):not(.button-secondary):focus-visible:after,
.styleguide-example[data-theme=dark] .Link:not(.button):not(.button-dark):not(.button-secondary):hover:after,
[data-theme=dark] .Link:not(.button):not(.button-dark):not(.button-secondary):focus-visible:after,
[data-theme=dark] .Link:not(.button):not(.button-dark):not(.button-secondary):hover:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23f8f8f8' stroke-linecap='round' stroke-linejoin='round' d='M6 2.5 10.5 8 6 13.5'/%3E%3C/svg%3E")
}

.Link.button {
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color);
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .Link.button {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.Link.button:focus-visible:not(:disabled):not(.disabled),
.Link.button:hover:not(:disabled):not(.disabled) {
    --Button-outline: var(--Button-outline-hover)
}

.Link.button.disabled,
.Link.button:disabled {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.Link.button-dark {
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color);
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .Link.button-dark {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.Link.button-dark:focus-visible:not(:disabled):not(.disabled),
.Link.button-dark:hover:not(:disabled):not(.disabled) {
    --Button-outline: var(--Button-outline-hover)
}

.Link.button-dark.disabled,
.Link.button-dark:disabled {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.Link.button-dark {
    --Button-color: var(--typeface-weiss-grau1);
    --Button-background: var(--petrol8)
}

.Link.button-secondary {
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color);
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .Link.button-secondary {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.Link.button-secondary:focus-visible:not(:disabled):not(.disabled),
.Link.button-secondary:hover:not(:disabled):not(.disabled) {
    --Button-outline: var(--Button-outline-hover)
}

.Link.button-secondary.disabled,
.Link.button-secondary:disabled {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.Link.button-secondary {
    --Button-background: var(--weiss);
    --Button-outline: 0 0 0 1px var(--petrol8);
    --Button-outline-hover: 0 0 0 2px var(--Button-background), 0 0 0 3px var(--petrol8) !important
}

.Link.button-secondary.disabled,
.Link.button-secondary:disabled {
    --Button-outline: 0 0 0 1px var(--supporting-colors-grau5-grau4)
}

.Link.is-loading {
    opacity: .5;
    pointer-events: none
}

.Image {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    margin-bottom: var(--s-9)
}

@media (min-width:1423px) {
    .Image {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Image {
        --grid-template-gap: 20px
    }
}

.Image>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .Image>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .Image>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.Image>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .Image>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .Image>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.Image--wrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.Image--img {
    width: 100%
}

.Image--caption {
    font-size: 14px;
    line-height: 1.4;
    margin-top: var(--s-4)
}

@media (max-width:750px) {
    .Image--caption {
        font-size: 13px;
        line-height: 1.4
    }
}

.Video {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    margin-bottom: var(--s-9);
    margin-top: var(--s-9)
}

@media (min-width:1423px) {
    .Video {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Video {
        --grid-template-gap: 20px
    }
}

.Video>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .Video>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .Video>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.Video>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .Video>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .Video>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.Video--wrapper {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 0;
    position: relative
}

.Video--wrapper iframe {
    height: 100%;
    left: 0;
    max-height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

html.bsi-ce-edit-mode .Video--wrapper {
    background-color: var(--container-petrol1-petrol10)
}

html.bsi-ce-edit-mode .Video--wrapper iframe {
    display: none
}

html.bsi-ce-edit-mode .Video--wrapper:after {
    border-color: #0000 #0000 #0000 #000;
    border-style: solid;
    border-width: 2.5em 0 2.5em 5em;
    content: "";
    display: inline-block;
    height: 0;
    left: 50%;
    opacity: .75;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    z-index: 0
}

.Video--src,
.Video--title {
    display: none
}

.Accordion {
    margin-bottom: var(--s-12);
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr)
}

@media (min-width:1423px) {
    .Accordion {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Accordion {
        --grid-template-gap: 20px
    }
}

.Accordion>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .Accordion>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .Accordion>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.Accordion>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .Accordion>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .Accordion>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.AccordionItem--inner {
    border-top: 1px solid var(--divider-petrol2-petrol9)
}

.AccordionItem:last-child .AccordionItem--inner {
    border-bottom: 1px solid var(--divider-petrol2-petrol9)
}

.AccordionItem--trigger {
    align-items: center;
    color: var(--typeface-petrol8-petrol3);
    display: flex;
    font-size: 30px;
    gap: var(--s-7);
    justify-content: space-between;
    line-height: 1.25;
    padding: var(--s-7) 0;
    text-align: left;
    width: 100%
}

@media (max-width:1125px) {
    .AccordionItem--trigger {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .AccordionItem--trigger {
        font-size: 24px;
        line-height: 1.25
    }
}

.AccordionItem--trigger:hover {
    color: var(--hover-petrol11-grau1)
}

.AccordionItem--trigger[aria-expanded=true] .Icon,
html.bsi-ce-edit-mode .AccordionItem--trigger .Icon {
    transform: scale(-1)
}

.AccordionItem--content:not(.animation)[data-hidden=true] {
    display: none
}

html.bsi-ce-edit-mode .AccordionItem--content {
    display: block !important
}

.AccordionItem--content.animation {
    height: 0;
    visibility: hidden
}

.AccordionItem--content.animation.in {
    height: auto;
    visibility: visible
}

.AccordionItem--content.animation.out {
    height: 0;
    visibility: hidden
}

.AccordionItem--content--inner:after,
.AccordionItem--content--inner:before {
    content: "";
    display: block;
    margin-bottom: var(--s-7)
}

.AccordionItem .AccordionItem--content--inner>* {
    margin-bottom: var(--s-7);
    margin-top: var(--s-7)
}

.AccordionItem .AccordionItem--content--inner>.Image,
.AccordionItem .AccordionItem--content--inner>.Video {
    margin-bottom: var(--s-9);
    margin-top: var(--s-9)
}

.BlockTeaser {
    display: block;
    margin-inline: auto;
    margin-bottom: var(--s-12);
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px))
}

@media (min-width:1423px) {
    .BlockTeaser {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .BlockTeaser.left .BlockTeaser--inner {
        flex-direction: row-reverse
    }
}

.BlockTeaser.yellow .BlockTeaser--media {
    background: var(--postfinancegelb)
}

.BlockTeaser--inner {
    display: flex;
    flex-direction: row;
    gap: var(--s-8) 0;
    height: 100%
}

@media (max-width:750px) {
    .BlockTeaser--inner {
        flex-direction: column
    }
}

@media (max-width:1125px) and (min-width:751px) {
    .BlockTeaser--inner {
        gap: var(--s-8) var(--s-7)
    }
}

.BlockTeaser--media {
    aspect-ratio: 1;
    background: var(--petrol8);
    border-radius: 20px;
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media (min-width:1126px) {
    .BlockTeaser--media {
        width: 58.3333333333%
    }
}

@media (min-width:751px) {
    .BlockTeaser--media {
        width: 54.1666666667%
    }
}

.BlockTeaser--img {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    transition: scale .3s ease-in-out;
    width: 100%
}

.BlockTeaser:not(:hover) .BlockTeaser--img {
    scale: 1.01
}

.BlockTeaser--body {
    align-items: center;
    align-items: flex-start;
    align-self: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s-6);
    margin: 0 auto;
    position: relative;
    width: 100%
}

@media (min-width:901px) {
    .BlockTeaser--body {
        padding: 0 var(--s-13)
    }
}

.BlockTeaser--content {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--s-4);
    width: 100%
}

.BlockTeaser--title {
    color: var(--typeface-petrol8-petrol3);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6
}

@media (max-width:750px) {
    .BlockTeaser--title {
        font-size: 16px;
        line-height: 1.6
    }
}

.BlockTeaser--text {
    color: var(--typeface-petrol8-petrol3);
    font-size: 24px;
    line-height: 1.5
}

@media (max-width:1125px) {
    .BlockTeaser--text {
        font-size: 24px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .BlockTeaser--text {
        font-size: 20px;
        line-height: 1.25
    }
}

.ButtonRich {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    margin-bottom: var(--s-12);
    --ButtonRich-bg: var(--petrol8);
    --ButtonRich-fg: var(--typeface-weiss-grau1);
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color)
}

@media (min-width:1423px) {
    .ButtonRich {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .ButtonRich {
        --grid-template-gap: 20px
    }
}

.ButtonRich>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .ButtonRich>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .ButtonRich>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.ButtonRich>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .ButtonRich>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .ButtonRich>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.ButtonRich:hover {
    --ButtonRich-bg: var(--petrol9)
}

.ButtonRich.yellow {
    --ButtonRich-bg: var(--postfinancegelb);
    --ButtonRich-fg: var(--petrol8);
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color)
}

.ButtonRich.yellow .ButtonRich--cta {
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .ButtonRich.yellow .ButtonRich--cta {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.ButtonRich.yellow:focus-visible:not(:disabled):not(.disabled) .ButtonRich--cta,
.ButtonRich.yellow:hover:not(:disabled):not(.disabled) .ButtonRich--cta {
    --Button-outline: var(--Button-outline-hover)
}

.ButtonRich.yellow.disabled .ButtonRich--cta,
.ButtonRich.yellow:disabled .ButtonRich--cta {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.ButtonRich.yellow .ButtonRich--cta {
    --Button-color: var(--typeface-weiss-grau1);
    --Button-background: var(--petrol8)
}

.ButtonRich .ButtonRich--cta {
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .ButtonRich .ButtonRich--cta {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.ButtonRich:focus-visible:not(:disabled):not(.disabled) .ButtonRich--cta,
.ButtonRich:hover:not(:disabled):not(.disabled) .ButtonRich--cta {
    --Button-outline: var(--Button-outline-hover)
}

.ButtonRich.disabled .ButtonRich--cta,
.ButtonRich:disabled .ButtonRich--cta {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.ButtonRich--inner {
    align-items: flex-start;
    background: var(--ButtonRich-bg);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
    height: 100%;
    padding: var(--s-7) var(--s-6);
    transition: background .3s ease-in-out
}

.ButtonRich--content {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-flow: wrap;
    gap: 0 var(--s-6)
}

.ButtonRich--title {
    color: var(--ButtonRich-fg);
    font-size: 30px;
    line-height: 1.25
}

@media (max-width:1125px) {
    .ButtonRich--title {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .ButtonRich--title {
        font-size: 24px;
        line-height: 1.25
    }
}

.ButtonRich--text {
    color: var(--ButtonRich-fg);
    font-size: 18px;
    line-height: 1.6
}

@media (max-width:750px) {
    .ButtonRich--text {
        font-size: 16px;
        line-height: 1.6
    }
}

.CardTeaser {
    aspect-ratio: 1;
    display: block
}

.CardTeaser--inner {
    align-items: center;
    background: var(--container-petrol1-petrol10);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    height: 100%;
    justify-content: center;
    padding: var(--s-7) var(--s-6);
    text-align: center;
    transition: background .3s ease-in-out;
    width: 100%
}

.CardTeaser:hover .CardTeaser--inner {
    background: var(--container-petrol2-petrol9)
}

.CardTeaser--media {
    overflow: hidden
}

.CardTeaser--img {
    width: 100%
}

.CardTeaser--body {
    position: relative
}

.CardTeaser--title {
    color: var(--typeface-petrol8-petrol3);
    font-size: 24px;
    line-height: 1.25
}

@media (max-width:750px) {
    .CardTeaser--title {
        font-size: 20px;
        line-height: 1.25
    }
}

.PromoBoxGrid {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    margin-bottom: var(--s-12);
    --gap: 20px;
    --grid-column: 2/-2
}

@media (min-width:1423px) {
    .PromoBoxGrid {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .PromoBoxGrid {
        --grid-template-gap: 20px
    }
}

.PromoBoxGrid>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .PromoBoxGrid>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .PromoBoxGrid>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.PromoBoxGrid>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .PromoBoxGrid>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .PromoBoxGrid>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (max-width:750px) {
    .PromoBoxGrid {
        --grid-column: 1/-1
    }
}

.PromoBoxGrid--inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center
}

.PromoBoxGrid--inner>.PromoBox {
    flex: 0 1 auto;
    width: calc(33.3333% - var(--gap)*2/3)
}

@media (max-width:1125px) {
    .PromoBoxGrid--inner>.PromoBox {
        width: calc(50% - var(--gap)/2)
    }
}

@media (max-width:750px) {
    .PromoBoxGrid--inner>.PromoBox {
        width: 100%
    }
}

.PromoBoxGrid--inner:has(>.PromoBox:first-child:last-child)>.PromoBox {
    width: 100%
}

@media (min-width:751px) {
    .PromoBoxGrid--inner:has(>.PromoBox:first-child:nth-last-child(2))>.PromoBox {
        width: calc(50% - var(--gap))
    }
}

.PromoBox {
    display: block;
    --PromoBox-bg: var(--petrol8);
    --PromoBox-fg: var(--typeface-weiss-grau1)
}

.PromoBox.gray {
    --PromoBox-bg: var(--container-petrol1-petrol10);
    --PromoBox-fg: var(--typeface-petrol8-petrol3)
}

.PromoBox.gray .PromoBox--cta {
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color);
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .PromoBox.gray .PromoBox--cta {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.PromoBox.gray .PromoBox--cta:focus-visible:not(:disabled):not(.disabled),
.PromoBox.gray .PromoBox--cta:hover:not(:disabled):not(.disabled) {
    --Button-outline: var(--Button-outline-hover)
}

.PromoBox.gray .PromoBox--cta.disabled,
.PromoBox.gray .PromoBox--cta:disabled {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.PromoBox.gray .PromoBox--cta {
    --Button-color: var(--typeface-weiss-grau1);
    --Button-background: var(--petrol8)
}

.PromoBox:not(.gray) {
    --FlyingFocus-color: #fff
}

.PromoBox .PromoBox--cta {
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color);
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .PromoBox .PromoBox--cta {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.PromoBox .PromoBox--cta:focus-visible:not(:disabled):not(.disabled),
.PromoBox .PromoBox--cta:hover:not(:disabled):not(.disabled) {
    --Button-outline: var(--Button-outline-hover)
}

.PromoBox .PromoBox--cta.disabled,
.PromoBox .PromoBox--cta:disabled {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.PromoBox--inner {
    align-items: flex-start;
    background: var(--PromoBox-bg);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--s-7) var(--s-6) var(--s-6);
    transition: background .3s ease-in-out
}

.PromoBox--header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    margin-bottom: var(--s-6)
}

.PromoBox--title {
    color: var(--PromoBox-fg);
    font-size: 24px;
    line-height: 1.25
}

@media (max-width:750px) {
    .PromoBox--title {
        font-size: 20px;
        line-height: 1.25
    }
}

.PromoBox--text {
    color: var(--PromoBox-fg);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6
}

@media (max-width:750px) {
    .PromoBox--text {
        font-size: 16px;
        line-height: 1.6
    }
}

.PromoBox--body {
    color: var(--PromoBox-fg);
    flex: 1;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: var(--s-7)
}

.PromoBox--body h2 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: var(--s-7);
    margin-top: var(--s-8)
}

@media (max-width:1125px) {
    .PromoBox--body h2 {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .PromoBox--body h2 {
        font-size: 24px;
        line-height: 1.25
    }
}

.PromoBox--body h3 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: var(--s-6);
    margin-top: var(--s-7)
}

@media (max-width:750px) {
    .PromoBox--body h3 {
        font-size: 20px;
        line-height: 1.25
    }
}

.PromoBox--body h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: var(--s-3);
    margin-top: var(--s-6)
}

@media (max-width:750px) {
    .PromoBox--body h4 {
        font-size: 16px;
        line-height: 1.6
    }
}

.PromoBox--body a:not([class]) {
    color: var(--typeface-petrol8-petrol3);
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.PromoBox--body a:not([class]):hover {
    color: var(--typeface-petrol11-grau1)
}

.PromoBox--body b,
.PromoBox--body strong {
    font-weight: 700
}

.PromoBox--body ol,
.PromoBox--body p,
.PromoBox--body ul {
    margin-bottom: var(--s-5)
}

.PromoBox--body ol+h2,
.PromoBox--body ol+h3,
.PromoBox--body ol+h4,
.PromoBox--body p+h2,
.PromoBox--body p+h3,
.PromoBox--body p+h4,
.PromoBox--body ul+h2,
.PromoBox--body ul+h3,
.PromoBox--body ul+h4 {
    margin-top: var(--s-8)
}

.PromoBox--body ol:not([class]),
.PromoBox--body ul:not([class]) {
    display: block
}

.PromoBox--body ol:not([class]) li,
.PromoBox--body ul:not([class]) li {
    list-style-type: none;
    margin-bottom: .5ex;
    padding-left: 3ex;
    position: relative
}

.PromoBox--body ol:not([class]) li:before,
.PromoBox--body ul:not([class]) li:before {
    content: "•";
    display: inline-block;
    left: 1ex;
    overflow: hidden;
    position: absolute
}

.PromoBox--body ol:not([class]) li:last-child,
.PromoBox--body ul:not([class]) li:last-child {
    margin-bottom: 0
}

.PromoBox--body ol:not([class]) {
    counter-reset: ol--counter
}

.PromoBox--body ol:not([class]) li {
    list-style-type: none
}

.PromoBox--body ol:not([class]) li:before {
    content: counter(ol--counter) ".";
    counter-increment: ol--counter;
    left: 0;
    text-align: center;
    width: 3ex
}

.PromoBox--body ol:not([class]):has(:nth-child(10)) li {
    padding-left: 4ex
}

.PromoBox--body ol:not([class]):has(:nth-child(10)) li:before {
    width: 4ex
}

@media (max-width:750px) {
    .PromoBox--body {
        font-size: 16px;
        line-height: 1.6
    }
}

.PromoBox--body>:first-child {
    margin-top: 0
}

.PromoBox--body>:last-child {
    margin-bottom: 0
}

.PromoBox--body:empty {
    display: none
}

.PromoBubble {
    --PromoBubble-bg: var(--grapefruit);
    --PromoBubble-size: 180px;
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--PromoBubble-bg);
    border-radius: 100%;
    color: var(--schwarz);
    display: flex;
    justify-content: center;
    padding: var(--s-6);
    text-align: center;
    width: var(--PromoBubble-size)
}

@media (max-width:1125px) {
    .PromoBubble {
        --PromoBubble-size: 160px
    }
}

@media (max-width:750px) {
    .PromoBubble {
        --PromoBubble-size: 100px
    }
}

.PromoBubble.blue {
    --PromoBubble-bg: var(--hellblau)
}

.PromoBubble--label {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    transform: rotate(15deg)
}

@media (max-width:750px) {
    .PromoBubble--label {
        font-size: 16px;
        line-height: 1.6
    }
}

.RichTeaser {
    display: block;
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color);
    --RichTeaser-bg: var(--petrol8)
}

.RichTeaser .RichTeaser--cta {
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .RichTeaser .RichTeaser--cta {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.RichTeaser:focus-visible:not(:disabled):not(.disabled) .RichTeaser--cta,
.RichTeaser:hover:not(:disabled):not(.disabled) .RichTeaser--cta {
    --Button-outline: var(--Button-outline-hover)
}

.RichTeaser.disabled .RichTeaser--cta,
.RichTeaser:disabled .RichTeaser--cta {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.RichTeaser:hover {
    --RichTeaser-bg: var(--petrol9)
}

.RichTeaser.small .RichTeaser--body {
    max-width: 100%
}

@media (min-width:751px) {
    .RichTeaser.small .RichTeaser--media {
        width: 50%
    }
}

.RichTeaser--inner {
    background: var(--RichTeaser-bg);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden
}

@media (max-width:750px) {
    .RichTeaser--inner {
        flex-direction: column
    }
}

.RichTeaser--media {
    flex: 0 0 auto;
    overflow: hidden;
    position: relative
}

@media (min-width:751px) {
    .RichTeaser--media {
        aspect-ratio: 1;
        -webkit-mask-image: url(../images/mask-circle.svg);
        mask-image: url(../images/mask-circle.svg);
        -webkit-mask-origin: border-box;
        mask-origin: initial;
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 300%;
        mask-size: 300%;
        width: 60%
    }
}

@media (max-width:750px) {
    .RichTeaser--media {
        aspect-ratio: 3/2
    }

    .RichTeaser--media:after {
        background: var(--RichTeaser-bg);
        content: "";
        inset: 0;
        -webkit-mask-image: url(../images/mask-circle-o.svg);
        mask-image: url(../images/mask-circle-o.svg);
        -webkit-mask-position: 45% -13%;
        mask-position: 45% -13%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 500%;
        mask-size: 500%;
        position: absolute
    }
}

.RichTeaser--img {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    transition: scale .3s ease-in-out;
    width: 100%
}

.RichTeaser:not(:hover) .RichTeaser--img {
    scale: 1.1
}

.RichTeaser--body {
    align-items: flex-start;
    align-self: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s-5);
    margin: 0 auto;
    padding: var(--s-7) var(--s-6);
    position: relative;
    width: 100%
}

@media (min-width:751px) {
    .RichTeaser--body {
        max-width: 333px
    }
}

@media (max-width:1125px) {
    .RichTeaser--body {
        height: 100%
    }
}

.RichTeaser--content {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--s-3);
    width: 100%
}

@media (max-width:1125px) {
    .RichTeaser--content {
        flex: 1 0 auto
    }
}

.RichTeaser--title {
    color: var(--typeface-weiss-grau1);
    font-size: 18px;
    line-height: 1.6
}

@media (max-width:750px) {
    .RichTeaser--title {
        font-size: 16px;
        line-height: 1.6
    }
}

.RichTeaser--text {
    color: var(--typeface-weiss-grau1);
    font-size: 30px;
    line-height: 1.25
}

@media (max-width:1125px) {
    .RichTeaser--text {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .RichTeaser--text {
        font-size: 24px;
        line-height: 1.25
    }
}

.Subheader {
    display: block;
    margin-bottom: var(--s-14);
    --Subheader-bg: var(--petrol8);
    --Subheader-border-top: 64px;
    --Subheader-mask-img: url(../images/mask-circle.svg);
    --Subheader-mask-direction-multiplicand: 1;
    --Subheader-border-left: calc(100% + 25vw);
    --Subheader-height: min(720px, 50vw);
    background: var(--Subheader-bg)
}

@media (min-width:1423px) {
    .Subheader {
        --Subheader-border-left: -1100px
    }
}

.Subheader.image-left,
.Subheader.image-right {
    --Subheader-border-top: 0;
    --Subheader-height: auto
}

.Subheader.image-right {
    --Subheader-border-left: calc(100% + 28vw)
}

@media (min-width:1423px) {
    .Subheader.image-right {
        --Subheader-border-left: -1075px
    }
}

@media (min-width:901px) {
    .Subheader.image-left {
        --Subheader-mask-img: url(../images/mask-circle-90.svg);
        --Subheader-mask-direction-multiplicand: -1;
        --Subheader-border-top: 100%;
        --Subheader-border-left: -28vw
    }
}

@media (min-width:901px) and (min-width:1423px) {
    .Subheader.image-left {
        --Subheader-border-left: calc(100% + 1075px)
    }
}

@media (min-width:901px) {
    .Subheader.image-left .Subheader--media {
        grid-area: 1/1/span 1/span 1
    }

    .Subheader.image-left .Subheader--body--inner {
        grid-area: 1/7/span 1/span 5
    }

    .Subheader.image-left .Subheader--promo .PromoBubble {
        margin-left: calc(var(--PromoBubble-size)*-1)
    }
}

.Subheader--inner {
    display: grid;
    gap: 0 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    position: relative
}

@media (max-width:900px) {
    .Subheader--inner {
        overflow: hidden
    }
}

.Subheader--inner .Subheader--media {
    grid-area: 1/2/span 1/span 1
}

.Subheader--inner .Subheader--body {
    grid-area: 1/1/span 1/span 2
}

@media (max-width:900px) {
    .Subheader--inner {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto
    }

    .Subheader--inner .Subheader--media {
        grid-area: 1/1/span 1/span 1
    }

    .Subheader--inner .Subheader--body {
        grid-area: 2/1/span 1/span 1
    }

    .Subheader--inner .Subheader--promo {
        grid-area: 1/1/span 1/span 1
    }
}

.Subheader--media {
    flex: 0 0 auto;
    overflow: hidden;
    position: relative
}

@media (max-width:900px) {
    .Subheader--media {
        aspect-ratio: 3/2
    }
}

@media (min-width:901px) {
    .Subheader--media {
        height: var(--Subheader-height)
    }

    .Subheader--media .Subheader--img {
        -webkit-mask-image: var(--Subheader-mask-img);
        mask-image: var(--Subheader-mask-img);
        -webkit-mask-origin: border-box;
        mask-origin: initial;
        -webkit-mask-position: var(--Subheader-border-left) var(--Subheader-border-top);
        mask-position: var(--Subheader-border-left) var(--Subheader-border-top);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 150vw;
        mask-size: 150vw
    }
}

@media (min-width:901px) and (min-width:1423px) {
    .Subheader--media .Subheader--img {
        -webkit-mask-size: 2200px;
        mask-size: 2200px
    }
}

.Subheader--img {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    transition: scale .3s ease-in-out;
    width: 100%
}

.Subheader--body {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    overflow: hidden;
    position: relative
}

@media (min-width:1423px) {
    .Subheader--body {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Subheader--body {
        --grid-template-gap: 20px
    }
}

@media (max-width:900px) {
    .Subheader--body {
        overflow: visible
    }

    .Subheader--body:before {
        aspect-ratio: 1;
        background: var(--Subheader-bg);
        border-radius: 100%;
        content: "";
        grid-area: 1/1/span 1/span 6;
        height: 300%;
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(32%, -50%) scaleX(.2);
        z-index: 1
    }
}

@media (max-width:900px) and (max-width:900px) {
    .Subheader--body:before {
        height: auto;
        transform: translate(61%, -2%) scaleY(.2);
        transform-origin: top;
        width: 300vw
    }
}

.Subheader--body--inner {
    align-items: flex-start;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
    grid-area: 1/1/span 1/span 5;
    padding: var(--s-9) 0;
    position: relative;
    z-index: 1
}

@media (max-width:900px) {
    .Subheader--body--inner {
        grid-area: 1/2/span 1/span 10
    }
}

@media (max-width:750px) {
    .Subheader--body--inner {
        grid-area: 1/1/span 1/span 12
    }
}

.Subheader--content {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--s-3);
    width: 100%
}

.Subheader--title {
    color: var(--typeface-weiss-grau1);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6
}

@media (max-width:750px) {
    .Subheader--title {
        font-size: 16px;
        line-height: 1.6
    }
}

.Subheader--text {
    color: var(--typeface-weiss-grau1);
    font-size: 56px;
    line-height: 1.25
}

@media (max-width:1125px) {
    .Subheader--text {
        font-size: 44px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .Subheader--text {
        font-size: 32px;
        line-height: 1.25
    }
}

.Subheader--promo {
    left: 50%;
    position: absolute;
    top: var(--s-7);
    z-index: 1
}

@media (max-width:900px) {
    .Subheader--promo {
        inset: auto var(--s-7) 0 auto;
        margin-bottom: 6%;
        transform: translateY(50%)
    }
}

.TeaserBasic {
    display: block
}

.TeaserBasic--inner {
    background: var(--container-petrol1-petrol10);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: background .3s ease-in-out
}

.TeaserBasic:hover .TeaserBasic--inner {
    background: var(--container-petrol2-petrol9)
}

.TeaserBasic--media {
    overflow: hidden
}

.TeaserBasic--img {
    transition: scale .3s ease-in-out;
    width: 100%
}

.TeaserBasic:not(:hover) .TeaserBasic--img {
    scale: 1.1
}

.TeaserBasic--body {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--s-5);
    padding: var(--s-7) var(--s-6);
    position: relative
}

.TeaserBasic--body:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23004B5A' stroke-linecap='round' stroke-linejoin='round' d='M6 2.5 10.5 8 6 13.5'/%3E%3C/svg%3E");
    background-position-x: center;
    background-position-y: 0;
    background-repeat: repeat-y;
    background-size: contain;
    content: "";
    flex: 0 0 auto;
    font-size: 24px;
    height: 1em;
    line-height: 1.25;
    transition: background-position .3s ease-in-out;
    width: 1em
}

@media (max-width:750px) {
    .TeaserBasic--body:after {
        font-size: 20px;
        line-height: 1.25
    }
}

.styleguide-example[data-theme=dark] .TeaserBasic--body:after,
[data-theme=dark] .TeaserBasic--body:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23a6d8d9' stroke-linecap='round' stroke-linejoin='round' d='M6 2.5 10.5 8 6 13.5'/%3E%3C/svg%3E")
}

.TeaserBasic:hover .TeaserBasic--body:after {
    background-position-y: -1em
}

.TeaserBasic--content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--s-3)
}

.TeaserBasic--title {
    color: var(--typeface-petrol8-petrol3);
    font-size: 24px;
    line-height: 1.25
}

@media (max-width:750px) {
    .TeaserBasic--title {
        font-size: 20px;
        line-height: 1.25
    }
}

.TeaserBasic--text {
    color: var(--typeface-petrol8-petrol3);
    font-size: 18px;
    line-height: 1.6
}

@media (max-width:750px) {
    .TeaserBasic--text {
        font-size: 16px;
        line-height: 1.6
    }
}

.TeaserGrid {
    margin-inline: auto;
    margin-bottom: var(--s-12);
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --gap: 20px
}

@media (min-width:1423px) {
    .TeaserGrid {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

.TeaserGrid .CardTeaser,
.TeaserGrid .TeaserBasic {
    --TeaserGrid-width: 4;
    height: 100%
}

@media (min-width:1126px) {

    .TeaserGrid .CardTeaser.large,
    .TeaserGrid .TeaserBasic.large {
        --TeaserGrid-width: 6
    }

    .TeaserGrid .CardTeaser.small,
    .TeaserGrid .TeaserBasic.small {
        --TeaserGrid-width: 3
    }
}

@media (max-width:1125px) {

    .TeaserGrid .CardTeaser,
    .TeaserGrid .TeaserBasic {
        --TeaserGrid-width: 6
    }
}

@media (max-width:750px) {

    .TeaserGrid .CardTeaser,
    .TeaserGrid .TeaserBasic {
        --TeaserGrid-width: 12
    }
}

.TeaserGrid .RichTeaser {
    --TeaserGrid-width: 12
}

.TeaserGrid .RichTeaser.small {
    --TeaserGrid-width: 8
}

@media (max-width:1125px) {
    .TeaserGrid .RichTeaser.small {
        --TeaserGrid-width: 12
    }
}

.TeaserGrid--inner {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(12, 1fr)
}

.TeaserGrid--inner>* {
    grid-column: span var(--TeaserGrid-width)
}

.Form {
    margin-inline: auto;
    padding-inline: var(--max-content-width-padding, 16px);
    width: min(100%, 1384px + 2 * var(--max-content-width-padding, 16px));
    --grid-template-gap: 16px;
    column-gap: var(--grid-template-gap);
    display: grid;
    grid-template-columns: repeat(var(--grid-template-columns, 12), 1fr);
    margin-bottom: var(--s-12)
}

@media (min-width:1423px) {
    .Form {
        padding-inline: var(--max-content-width-padding, 20px);
        width: min(100%, 1384px + 2 * var(--max-content-width-padding, 20px))
    }
}

@media (min-width:751px) {
    .Form {
        --grid-template-gap: 20px
    }
}

.Form>* {
    grid-column: var(--grid-column, 1/-1)
}

@media (min-width:751px) {
    .Form>* {
        column-gap: 20px;
        grid-column: var(--grid-column, 2/-2)
    }
}

@media (min-width:1126px) {
    .Form>* {
        grid-column: var(--grid-column, 3/-3)
    }
}

.Form>*>* {
    --grid-template-columns: 10 !important;
    --grid-column: 1/-1 !important;
    --max-content-width-padding: 0 !important
}

@media (min-width:751px) {
    .Form>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

@media (min-width:1126px) {
    .Form>*>* {
        --grid-column: 1/-1 !important;
        --max-content-width-padding: 0 !important
    }
}

.Form:not(:valid) .Form--actions {
    position: relative !important
}

.Form .Form--actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--s-12)
}

.Form .Form--submit {
    --Button-color: var(--petrol8);
    --Button-background: var(--postfinancegelb);
    --Button-outline-color: var(--Button-background);
    --Button-outline: 0 0 0 0 var(--Button-outline-color);
    --Button-outline-hover: 0 0 0 2px var(--Button-outline-color);
    align-content: center;
    background: var(--Button-background);
    border-radius: 100px;
    box-shadow: var(--Button-outline);
    color: var(--Button-color);
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: calc(var(--s-6) + var(--s-5)*2);
    padding: var(--s-5) 32px;
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: all .3s ease-out
}

@media (max-width:750px) {
    .Form .Form--submit {
        font-size: 14px;
        min-height: calc(var(--s-7) + var(--s-4)*2);
        padding: var(--s-4) var(--s-7)
    }
}

.Form .Form--submit:focus-visible:not(:disabled):not(.disabled),
.Form .Form--submit:hover:not(:disabled):not(.disabled) {
    --Button-outline: var(--Button-outline-hover)
}

.Form .Form--submit.disabled,
.Form .Form--submit:disabled {
    --Button-color: var(--supporting-colors-grau5-grau4);
    --Button-background: var(--container-grau1-petrol10);
    cursor: not-allowed
}

.Form--inner.Form--inner {
    display: grid;
    gap: var(--s-7) 20px
}

.Form--inner.Form--inner .Width-100,
.Form--inner.Form--inner>* {
    grid-column: span 12
}

.Form--inner.Form--inner .Width-25 {
    grid-column: span 3
}

.Form--inner.Form--inner .Width-33 {
    grid-column: span 4
}

.Form--inner.Form--inner .Width-50 {
    grid-column: span 6
}

.Form--inner.Form--inner .Width-66 {
    grid-column: span 8
}

.Form--inner.Form--inner .Width-75 {
    grid-column: span 9
}

.Form--inner.Form--inner>[class*=Width-] {
    box-sizing: border-box;
    width: auto
}

.Form--inner.Form--inner>:first-child {
    margin-top: 0
}

.Form--inner.Form--inner>:last-child {
    margin-bottom: 0
}

.Form--validation {
    color: var(--typeface-danger2-grapefruit);
    display: flex;
    flex-direction: column;
    gap: var(--s-2)
}

.Form--validation h2 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: var(--s-7);
    margin-top: var(--s-8)
}

@media (max-width:1125px) {
    .Form--validation h2 {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .Form--validation h2 {
        font-size: 24px;
        line-height: 1.25
    }
}

.Form--validation h3 {
    color: var(--typeface-petrol8-petrol3);
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: var(--s-6);
    margin-top: var(--s-7)
}

@media (max-width:750px) {
    .Form--validation h3 {
        font-size: 20px;
        line-height: 1.25
    }
}

.Form--validation h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: var(--s-3);
    margin-top: var(--s-6)
}

@media (max-width:750px) {
    .Form--validation h4 {
        font-size: 16px;
        line-height: 1.6
    }
}

.Form--validation a:not([class]) {
    color: var(--typeface-petrol8-petrol3);
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.Form--validation a:not([class]):hover {
    color: var(--typeface-petrol11-grau1)
}

.Form--validation b,
.Form--validation strong {
    font-weight: 700
}

.Form--validation ol,
.Form--validation p,
.Form--validation ul {
    margin-bottom: var(--s-5)
}

.Form--validation ol+h2,
.Form--validation ol+h3,
.Form--validation ol+h4,
.Form--validation p+h2,
.Form--validation p+h3,
.Form--validation p+h4,
.Form--validation ul+h2,
.Form--validation ul+h3,
.Form--validation ul+h4 {
    margin-top: var(--s-8)
}

.Form--validation ol:not([class]),
.Form--validation ul:not([class]) {
    display: block
}

.Form--validation ol:not([class]) li,
.Form--validation ul:not([class]) li {
    list-style-type: none;
    margin-bottom: .5ex;
    padding-left: 3ex;
    position: relative
}

.Form--validation ol:not([class]) li:before,
.Form--validation ul:not([class]) li:before {
    content: "•";
    display: inline-block;
    left: 1ex;
    overflow: hidden;
    position: absolute
}

.Form--validation ol:not([class]) li:last-child,
.Form--validation ul:not([class]) li:last-child {
    margin-bottom: 0
}

.Form--validation ol:not([class]) {
    counter-reset: ol--counter
}

.Form--validation ol:not([class]) li {
    list-style-type: none
}

.Form--validation ol:not([class]) li:before {
    content: counter(ol--counter) ".";
    counter-increment: ol--counter;
    left: 0;
    text-align: center;
    width: 3ex
}

.Form--validation ol:not([class]):has(:nth-child(10)) li {
    padding-left: 4ex
}

.Form--validation ol:not([class]):has(:nth-child(10)) li:before {
    width: 4ex
}

.Form--validation>:first-child {
    margin-top: 0
}

.Form--validation>:last-child {
    margin-bottom: 0
}

.Form--validation .Form--validation--item:not(:empty):last-child {
    margin-bottom: var(--s-8)
}

.FormElement--Hint {
    font-size: 12px;
    line-height: 1;
    margin-top: var(--s-3)
}

.FormElement--Hint:empty {
    display: none
}

.FormElement--Error {
    color: var(--typeface-danger2-grapefruit);
    font-size: 12px;
    line-height: 1;
    margin-top: var(--s-3)
}

.FormElement--Error:empty {
    display: none
}

.FormCheckbox {
    position: relative;
    margin-bottom: 15px
}

.FormCheckbox>input[type=checkbox],
.FormCheckbox>label:after,
.FormCheckbox>label:before {
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: calc(.8em - 11px);
    width: 20px
}

.FormCheckbox>input[type=checkbox] {
    opacity: 0
}

.FormCheckbox>label {
    cursor: pointer;
    display: block;
    font-size: 18px;
    line-height: 1.6;
    padding-left: calc(20px + var(--s-3));
    position: relative
}

@media (max-width:750px) {
    .FormCheckbox>label {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormCheckbox>label:after,
.FormCheckbox>label:before {
    background: #0000;
    border: 1px solid var(--typeface-petrol8-petrol3);
    transition: opacity .3s linear
}

.FormCheckbox>input[type=checkbox]:focus-visible+label:before,
.FormCheckbox>label:focus:before {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormCheckbox>input[type=checkbox]:disabled+label {
    filter: grayscale(1);
    opacity: .75
}

.FormCheckbox>input[type=checkbox]:not(:checked)+label:after {
    border-color: #0000;
    opacity: 0
}

.FormCheckbox>input[type=checkbox]:checked+label:before {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormCheckbox>input[type=checkbox].invalid+label {
    color: var(--typeface-danger2-grapefruit)
}

.FormCheckbox>input[type=checkbox].invalid+label:after,
.FormCheckbox>input[type=checkbox].invalid+label:before {
    border-color: var(--typeface-danger2-grapefruit)
}

.FormCheckbox>input[type=checkbox]+label:before {
    border-radius: 4px
}

.FormCheckbox>input[type=checkbox]+label:after {
    background: #0000;
    border-color: var(--typeface-weiss-grau1);
    border-style: solid;
    border-width: 0 0 1.5px 1.5px;
    height: 4.8px;
    transform: rotate(-45deg);
    transform: translate(4px, 7.6px) rotate(-45deg) translate(1px, -1px);
    width: 12px
}

.FormCheckbox>input[type=checkbox]:checked+label:before {
    background: var(--typeface-petrol8-petrol3)
}

.FormCheckbox>input[type=checkbox].invalid:checked+label:before {
    background: var(--typeface-danger2-grapefruit) !important
}

.FormCheckbox>input[type=checkbox].invalid:checked+label:after {
    border-color: var(--typeface-weiss-schwarz) !important
}

.FormCheckbox+.FormCheckbox {
    margin-top: calc(var(--s-7)*-1 + var(--s-4))
}

.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: grid;
    gap: var(--s-7) 20px;
}

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

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

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

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

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

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

.FormFieldset {
    display: block;
    margin-top: var(--s-12)
}

.FormFieldset.small {
    margin-top: 0
}

.FormFieldset.small .FormFieldset--legend {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: var(--s-4)
}

@media (max-width:750px) {
    .FormFieldset.small .FormFieldset--legend {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormFieldset.small .FormFieldset--content {
    gap: var(--s-4) var(--s-7)
}

.FormFieldset+.FormFieldset {
    margin-top: calc(var(--s-8) - var(--s-7))
}

.FormFieldset:has(.FormFieldset--content>.FormCheckbox:only-child input[type=checkbox][required]) .FormFieldset--legend:after,
.FormFieldset:has(.FormFieldset--content>.FormRating:only-child input[type=rating][required]) .FormFieldset--legend:after,
.FormFieldset:has(.FormFieldset--content>.FormRadiogroup:only-child input[type=radio][required]) .FormFieldset--legend:after {
    content: " *"
}

.FormFieldset--inner {
    width: 100%
}

.FormFieldset--legend {
    color: var(--typeface-petrol8-petrol3);
    display: block;
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: var(--s-8)
}

@media (max-width:1125px) {
    .FormFieldset--legend {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .FormFieldset--legend {
        font-size: 24px;
        line-height: 1.25
    }
}

.FormFieldset--content {
    display: grid;
    gap: var(--s-7) 20px
}

.FormFieldset--content .Width-100,
.FormFieldset--content>* {
    grid-column: span 12
}

.FormFieldset--content .Width-25 {
    grid-column: span 3
}

.FormFieldset--content .Width-33 {
    grid-column: span 4
}

.FormFieldset--content .Width-50 {
    grid-column: span 6
}

.FormFieldset--content .Width-66 {
    grid-column: span 8
}

.FormFieldset--content .Width-75 {
    grid-column: span 9
}

.FormFieldset--content>[class*=Width-] {
    box-sizing: border-box;
    width: auto
}

.FormFieldset--content>:first-child {
    margin-top: 0
}

.FormFieldset--content>:last-child {
    margin-bottom: 0
}

.FormInput {
    display: block
}

.FormInput input[type=date][required]~label:after,
.FormInput input[type=email][required]~label:after,
.FormInput input[type=number][required]~label:after,
.FormInput input[type=tel][required]~label:after,
.FormInput input[type=text][required]~label:after {
    content: " *"
}

.FormInput input[type=date] {
    max-height: 72px
}

.FormInput input[type=date]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cpath stroke='%23004B5A' stroke-linecap='round' stroke-linejoin='round' d='M3.824 3.118H2a1 1 0 0 0-1 1V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1V4.118a1 1 0 0 0-1-1h-1.823'/%3E%3Cpath stroke='%23004B5A' stroke-linejoin='round' d='M5.941 2a1 1 0 0 1 1-1h.824a1 1 0 0 1 1 1v2.941a1 1 0 0 1-1 1H6.94a1 1 0 0 1-1-1zM17.235 2a1 1 0 0 1 1-1h.824a1 1 0 0 1 1 1v2.941a1 1 0 0 1-1 1h-.824a1 1 0 0 1-1-1z'/%3E%3Cpath stroke='%23004B5A' stroke-linecap='round' d='M1 9.411h24'/%3E%3Cpath stroke='%23004B5A' stroke-linecap='round' stroke-linejoin='round' d='M10.882 3.118h4.236'/%3E%3C/svg%3E");
    background-position: right 0 center;
    background-repeat: no-repeat;
    height: 24px;
    width: 24px
}

.styleguide-example[data-theme=dark] .FormInput input[type=date]::-webkit-calendar-picker-indicator,
[data-theme=dark] .FormInput input[type=date]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cpath stroke='%23A6D8D9' stroke-linecap='round' stroke-linejoin='round' d='M3.824 3.118H2a1 1 0 0 0-1 1V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1V4.118a1 1 0 0 0-1-1h-1.823'/%3E%3Cpath stroke='%23A6D8D9' stroke-linejoin='round' d='M5.941 2a1 1 0 0 1 1-1h.824a1 1 0 0 1 1 1v2.941a1 1 0 0 1-1 1H6.94a1 1 0 0 1-1-1zM17.235 2a1 1 0 0 1 1-1h.824a1 1 0 0 1 1 1v2.941a1 1 0 0 1-1 1h-.824a1 1 0 0 1-1-1z'/%3E%3Cpath stroke='%23A6D8D9' stroke-linecap='round' d='M1 9.411h24'/%3E%3Cpath stroke='%23A6D8D9' stroke-linecap='round' stroke-linejoin='round' d='M10.882 3.118h4.236'/%3E%3C/svg%3E")
}

.FormInput--Input {
    border-bottom: 1px solid var(--divider-schwarz-grau1);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    position: relative;
    width: 100%;
}

.FormInput--Input>label {
    grid-area: 1/1/span 1/span 1
}

.FormInput--Input>input {
    grid-area: 1/1/span 2/span 1
}

.FormInput--Input:has(>input:disabled) {
    filter: grayscale(1);
    opacity: .75
}

.FormInput--Input:has(>input.invalid) {
    border-color: var(--typeface-danger2-grapefruit) !important
}

.FormInput--Input:has(>input.invalid)>label {
    color: var(--typeface-danger2-grapefruit) !important
}

.FormInput--Input:has(>input.invalid)>label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke='%23D80909'/%3E%3Ccircle cx='12' cy='17.75' r='.75' fill='%23D80909'/%3E%3Cpath fill='%23D80909' d='M11.25 6.5a.5.5 0 0 1 .5-.5h.5a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: var(--s-1);
    margin-top: -.15em;
    width: 20px
}

.FormInput--Input:has(>input:focus) {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormInput--Input>input {
    background: #0000;
    border: 0;
    display: block;
    font-size: 18px;
    line-height: 1.6;
    min-height: 56px;
    outline: 0;
    padding-top: 4px;
    text-align: left;
    width: 100%
}

@media (max-width:750px) {
    .FormInput--Input>input {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormInput--Input>label {
    align-items: center;
    color: var(--typeface-petrol8-petrol3);
    display: flex;
    flex-direction: row;
    font-size: 18px;
    gap: .25em;
    left: 0;
    line-height: 1;
    padding-top: 0;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transition: all .3s linear;
    white-space: nowrap;
    width: 100%
}

.FormInput--Input>input[placeholder=" "]:not(:focus):placeholder-shown+label {
    color: var(--typeface-schwarz-grau1);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    transition: all .3s linear
}

@media (max-width:750px) {
    .FormInput--Input>input[placeholder=" "]:not(:focus):placeholder-shown+label {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormRating {
    container-name: formrating;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--s-12)
}

.FormRating>legend {
    clip-path: inset(0);
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0
}

.FormRating:not(.rating-7):not(.rating-icon) .FormRating--items {
    --items: 10
}

@container formrating (max-width: 494px) {
    .FormRating:not(.rating-7):not(.rating-icon) .FormRating--items {
        --items: 5
    }

    .FormRating:not(.rating-7):not(.rating-icon) .FormRating--wrapper {
        grid-template: "legend-min" auto "items" auto "legend-max" auto "skip" auto/1fr
    }
}

.FormRating:not(.rating-7):not(.rating-icon).has-skip .FormRating--line {
    display: block
}

@container formrating (max-width: 674px) {
    .FormRating:not(.rating-7):not(.rating-icon).has-skip .FormRating--line {
        display: none
    }

    .FormRating:not(.rating-7):not(.rating-icon).has-skip .FormRating--wrapper {
        grid-template: "legend-min" auto "items" auto "legend-max" auto "skip" auto/1fr
    }
}

.FormRating.rating-7 .FormRating--items,
.FormRating.rating-icon .FormRating--items {
    --items: 7
}

@container formrating (max-width: 344px) {

    .FormRating.rating-7 .FormRating--items,
    .FormRating.rating-icon .FormRating--items {
        --items: 4
    }

    .FormRating.rating-7 .FormRating--wrapper,
    .FormRating.rating-icon .FormRating--wrapper {
        grid-template: "legend-min" auto "items" auto "legend-max" auto "skip" auto/1fr
    }
}

.FormRating.rating-7.has-skip .FormRating--line,
.FormRating.rating-icon.has-skip .FormRating--line {
    display: block
}

@container formrating (max-width: 524px) {

    .FormRating.rating-7.has-skip .FormRating--line,
    .FormRating.rating-icon.has-skip .FormRating--line {
        display: none
    }

    .FormRating.rating-7.has-skip .FormRating--wrapper,
    .FormRating.rating-icon.has-skip .FormRating--wrapper {
        grid-template: "legend-min" auto "items" auto "legend-max" auto "skip" auto/1fr
    }
}

.FormRating.rating-icon .FormRating--items .FormRating--item>label {
    color: #0000 !important;
    position: relative
}

.FormRating.rating-icon .FormRating--items .FormRating--item>label:after {
    background-position: 50%;
    content: "";
    inset: 0;
    position: absolute
}

.FormRating.rating-icon .FormRating--items .FormRating--item>input:checked+label:after,
.FormRating.rating-icon .FormRating--items .FormRating--item>input:focus-visible+label:after,
.FormRating.rating-icon .FormRating--items .FormRating--item>label:hover:after,
.styleguide-example[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>label:after,
[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>label:after {
    filter: invert(100%) saturate(0) contrast(200%)
}

.styleguide-example[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>input:checked+label:after,
.styleguide-example[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>input:focus-visible+label:after,
.styleguide-example[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>label:hover:after,
[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>input:checked+label:after,
[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>input:focus-visible+label:after,
[data-theme=dark] .FormRating.rating-icon .FormRating--items .FormRating--item>label:hover:after {
    filter: none
}

.FormRating.rating-icon .FormRating--items .FormRating--item:first-child {
    order: 7
}

.FormRating.rating-icon .FormRating--items .FormRating--item:first-child label:after {
    background-image: url(../rating/rating-1.svg)
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(2) {
    order: 6
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(2) label:after {
    background-image: url(../rating/rating-2.svg)
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(3) {
    order: 5
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(3) label:after {
    background-image: url(../rating/rating-3.svg)
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(4) {
    order: 4
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(4) label:after {
    background-image: url(../rating/rating-4.svg)
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(5) {
    order: 3
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(5) label:after {
    background-image: url(../rating/rating-5.svg)
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(6) {
    order: 2
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(6) label:after {
    background-image: url(../rating/rating-6.svg)
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(7) {
    order: 1
}

.FormRating.rating-icon .FormRating--items .FormRating--item:nth-child(7) label:after {
    background-image: url(../rating/rating-7.svg)
}

.FormRating [data-js-rating-answer-na],
.FormRating input[data-js-rating-input] {
    clip-path: inset(0);
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0
}

.FormRating--title {
    display: block;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: var(--s-6);
    color: var(--typeface-petrol8-petrol3);
}

@media (max-width:750px) {
    .FormRating--title {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormRating--items {
    display: grid;
    gap: 6px;
    grid-area: items;
    grid-template-columns: repeat(var(--items), auto);
    justify-content: flex-start;
    justify-content: space-between
}

.FormRating--item {
    position: relative
}

.FormRating--item>input {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.FormRating--item>label {
    align-items: center;
    background-color: var(--container-weiss-petrol9);
    border: 1px solid var(--divider-petrol8-petrol3);
    border-radius: 56px;
    color: var(--typeface-petrol8-petrol3);
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    transition: all .3s
}

@container formrating (min-width: 795px) {
    .FormRating--item>label {
        min-height: 56px;
        min-width: 56px;
        padding: 6px 12px
    }
}

.FormRating--item input:focus-visible,
.FormRating--item label:hover,
.FormRating--item>input:checked+label {
    background-color: var(--graph-colors-petrol8-petrol4);
    color: var(--typeface-weiss-schwarz)
}

.FormRating--wrapper {
    align-items: center;
    display: grid;
    gap: var(--s-4) 0;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-template: "items items line skip" auto "legend-min legend-max line skip" auto/1fr 1fr auto auto;
    justify-content: space-evenly
}

.FormRating--line {
    background: var(--divider-grau3-petrol3);
    display: none;
    grid-area: line;
    height: 100%;
    margin: 0 var(--s-6);
    width: 1px
}

.FormRating--skip {
    align-self: flex-start;
    grid-area: skip
}

.FormRating--skip>label {
    padding-left: var(--s-6);
    padding-right: var(--s-6)
}

.FormRating--legend {
    font-size: 14px;
    line-height: 1.4
}

@media (max-width:750px) {
    .FormRating--legend {
        font-size: 13px;
        line-height: 1.4
    }
}

.FormRating--legend-min {
    grid-area: legend-min;
    justify-self: start
}

.FormRating--legend-max {
    grid-area: legend-max;
    justify-self: end
}

.FormTextarea {
    display: block
}

.FormTextarea--Input {
    background-color: var(--container-petrol1-petrol10);
    border-bottom: 1px solid var(--divider-schwarz-grau1);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    padding-top: var(--s-5);
    position: relative;
    width: 100%
}

.FormTextarea--Input>label {
    grid-area: 1/1/span 1/span 1
}

.FormTextarea--Input>textarea {
    grid-area: 1/1/span 2/span 1
}

.FormTextarea--Input:has(>textarea:disabled) {
    filter: grayscale(1);
    opacity: .75
}

.FormTextarea--Input:has(>textarea.invalid) {
    border-color: var(--typeface-danger2-grapefruit) !important
}

.FormTextarea--Input:has(>textarea.invalid)>label {
    color: var(--typeface-danger2-grapefruit) !important
}

.FormTextarea--Input:has(>textarea.invalid)>label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke='%23D80909'/%3E%3Ccircle cx='12' cy='17.75' r='.75' fill='%23D80909'/%3E%3Cpath fill='%23D80909' d='M11.25 6.5a.5.5 0 0 1 .5-.5h.5a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: var(--s-1);
    margin-top: -.15em;
    width: 20px
}

.FormTextarea--Input:has(>textarea:focus) {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormTextarea--Input>textarea {
    background: #0000;
    border: 0;
    display: block;
    font-size: 18px;
    line-height: 1.6;
    min-height: 56px;
    outline: 0;
    padding-top: 4px;
    text-align: left;
    width: 100%
}

@media (max-width:750px) {
    .FormTextarea--Input>textarea {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormTextarea--Input>label {
    align-items: center;
    color: var(--typeface-petrol8-petrol3);
    display: flex;
    flex-direction: row;
    font-size: 12px;
    font-weight: 700;
    gap: .25em;
    left: 0;
    line-height: 1;
    padding-top: 0;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transition: all .3s linear;
    white-space: nowrap;
    width: 100%
}

.FormTextarea--Input>textarea[placeholder=" "]:not(:focus):placeholder-shown+label {
    color: var(--typeface-schwarz-grau1);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    transition: all .3s linear
}

@media (max-width:750px) {
    .FormTextarea--Input>textarea[placeholder=" "]:not(:focus):placeholder-shown+label {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormTextarea--Input>textarea {
    max-height: 20em;
    padding: 14px 16px var(--s-3) 16px;
    resize: vertical
}

.FormTextarea--Input>textarea[required]~label:after {
    content: " *"
}

.FormTextarea--Input>label {
    padding: 0 var(--s-5);
    pointer-events: none
}

.FormRadiogroup {
    display: block
}

.FormRadiogroup.inline .FormRadiogroup--Input {
    flex-flow: row wrap
}

.FormRadiogroup.inline .FormRadio+.FormRadio {
    margin-top: 0
}

.FormRadiogroup--Input {
    display: flex;
    flex-direction: column;
    gap: var(--s-4) var(--s-7);
    width: 100%
}

.FormRadio {
    position: relative
}

.FormRadio>input[type=radio],
.FormRadio>label:after,
.FormRadio>label:before {
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: calc(.8em - 11px);
    width: 20px
}

.FormRadio>input[type=radio] {
    opacity: 0
}

.FormRadio>label {
    cursor: pointer;
    display: block;
    font-size: 18px;
    line-height: 1.6;
    padding-left: calc(20px + var(--s-3));
    position: relative
}

@media (max-width:750px) {
    .FormRadio>label {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormRadio>label:after,
.FormRadio>label:before {
    background: #0000;
    border: 1px solid var(--typeface-petrol8-petrol3);
    transition: opacity .3s linear
}

.FormRadio>input[type=radio]:focus-visible+label:before,
.FormRadio>label:focus:before {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormRadio>input[type=radio]:disabled+label {
    filter: grayscale(1);
    opacity: .75
}

.FormRadio>input[type=radio]:not(:checked)+label:after {
    border-color: #0000;
    opacity: 0
}

.FormRadio>input[type=radio]:checked+label:before {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormRadio>input[type=radio].invalid+label {
    color: var(--typeface-danger2-grapefruit)
}

.FormRadio>input[type=radio].invalid+label:after,
.FormRadio>input[type=radio].invalid+label:before {
    border-color: var(--typeface-danger2-grapefruit)
}

.FormRadio>input[type=radio] {
    --FlyingFocus-radius: 20px
}

.FormRadio>input[type=radio]+label:after,
.FormRadio>input[type=radio]+label:before {
    border-radius: 100%
}

.FormRadio>input[type=radio]+label:after {
    background: var(--typeface-petrol8-petrol3);
    border: none;
    height: 12px;
    transform: translate(4px, 4px);
    width: 12px
}

@media (-ms-high-contrast:active),
(forced-colors:active) {
    .FormRadio>input[type=radio]+label:after {
        border: 6px solid #000
    }
}

.FormRadio>input[type=radio].invalid:checked+label:after {
    background: var(--typeface-danger2-grapefruit) !important
}

.FormReadonly {
    display: block
}

.FormReadonly--Wrapper {
    border-bottom: 1px solid var(--divider-schwarz-grau1);
    border-color: var(--divider-grau3-petrol8);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    position: relative;
    width: 100%
}

.FormReadonly--Wrapper .FormReadonly--Label {
    grid-area: 1/1/span 1/span 1
}

.FormReadonly--Wrapper .FormReadonly--Text {
    grid-area: 1/1/span 2/span 1
}

.FormReadonly--Wrapper:has(.FormReadonly--Text:disabled) {
    filter: grayscale(1);
    opacity: .75
}

.FormReadonly--Wrapper:has(.FormReadonly--Text.invalid) {
    border-color: var(--typeface-danger2-grapefruit) !important
}

.FormReadonly--Wrapper:has(.FormReadonly--Text.invalid) .FormReadonly--Label {
    color: var(--typeface-danger2-grapefruit) !important
}

.FormReadonly--Wrapper:has(.FormReadonly--Text.invalid) .FormReadonly--Label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke='%23D80909'/%3E%3Ccircle cx='12' cy='17.75' r='.75' fill='%23D80909'/%3E%3Cpath fill='%23D80909' d='M11.25 6.5a.5.5 0 0 1 .5-.5h.5a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: var(--s-1);
    margin-top: -.15em;
    width: 20px
}

.FormReadonly--Wrapper:has(.FormReadonly--Text:focus) {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormReadonly--Wrapper .FormReadonly--Text {
    background: #0000;
    border: 0;
    display: block;
    font-size: 18px;
    line-height: 1.6;
    min-height: 56px;
    outline: 0;
    padding-top: 4px;
    text-align: left;
    width: 100%
}

@media (max-width:750px) {
    .FormReadonly--Wrapper .FormReadonly--Text {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormReadonly--Wrapper .FormReadonly--Label {
    align-items: center;
    color: var(--typeface-petrol8-petrol3);
    display: flex;
    flex-direction: row;
    font-size: 12px;
    font-weight: 700;
    gap: .25em;
    left: 0;
    line-height: 1;
    padding-top: 0;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transition: all .3s linear;
    white-space: nowrap;
    width: 100%
}

.FormReadonly--Wrapper .FormReadonly--Text {
    align-content: center;
    font-weight: 400 !important;
    opacity: .75;
    padding-top: 18px
}

.FormToggle {
    display: block
}

.FormToggle .FormElement--Hint {
    padding-right: calc(52px + var(--s-7))
}

.FormToggle--Input {
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    width: 100%
}

.FormToggle--Input>input[type=checkbox] {
    height: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0
}

.FormToggle--Input>label {
    font-size: 18px;
    color: var(--typeface-petrol8-petrol3);
    line-height: 1.6;
    padding-left: 0;
    padding-right: calc(52px + var(--s-7))
}

@media (max-width:750px) {
    .FormToggle--Input>label {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormToggle--Input>label:after,
.FormToggle--Input>label:before {
    border-radius: 32px;
    content: "";
    left: auto;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all .1s
}

.FormToggle--Input>input[type=checkbox]+label {
    --c-formtoggle-bg: var(--container-grau2-petrol9)
}

.FormToggle--Input>input[type=checkbox]+label:before {
    background-color: var(--c-formtoggle-bg);
    border: 1px solid var(--typeface-grau7-petrol3);
    height: 32px;
    transition: all .3s ease 0s;
    width: 52px
}

.FormToggle--Input>input[type=checkbox]+label:after {
    background: var(--typeface-weiss-grau1) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath stroke='%23004B5A' stroke-linecap='round' stroke-linejoin='round' d='m4.5 8.5 3 3.5L13 3'/%3E%3C/svg%3E") no-repeat center;
    background-size: 0;
    border: 1px solid var(--typeface-grau7-petrol9);
    height: 28px;
    right: 22px;
    transition: background-size .3s linear .1s, all .1s ease .1s;
    visibility: visible !important;
    width: 28px
}

.styleguide-example[data-theme=dark] .FormToggle--Input>input[type=checkbox]+label:after,
[data-theme=dark] .FormToggle--Input>input[type=checkbox]+label:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' d='m4.5 8.5 3 3.5L13 3'/%3E%3C/svg%3E")
}

.FormToggle--Input>input[type=checkbox]:hover+label {
    --c-formtoggle-bg: var(--hover-petrol3-petrol4) !important
}

.FormToggle--Input>input[type=checkbox]:checked+label {
    --c-formtoggle-bg: var(--container-petrol8-petrol3)
}

.FormToggle--Input>input[type=checkbox]:checked+label:before {
    transition: all .3s ease 0s
}

.FormToggle--Input>input[type=checkbox]:checked+label:after {
    background-color: var(--typeface-alert-weiss-petrol8);
    background-size: 17px;
    border-color: var(--petrol8);
    right: 2px;
    transition: background-size .3s linear .1s, all .1s ease .1s
}

@media (-ms-high-contrast:active),
(forced-colors:active) {
    .FormToggle--Input>input[type=checkbox]:checked+label:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' d='m4.5 8.5 3 3.5L13 3'/%3E%3C/svg%3E");
        filter: invert(1)
    }
}

.FormToggle--Input>input[type=checkbox]:disabled+label:after,
.FormToggle--Input>input[type=checkbox]:disabled+label:before {
    opacity: .5
}

.FormToggle--Text {
    font-size: 12px;
    font-size: 18px;
    line-height: 1;
    line-height: 1.6;
    margin-top: var(--s-3);
    padding-right: calc(52px + var(--s-7))
}

.FormToggle--Text:empty {
    display: none
}

@media (max-width:750px) {
    .FormToggle--Text {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormSelect {
    display: block
}

.FormSelect .FormSelect--Input {
    border-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    position: relative;
    width: 100%
}

.FormSelect .FormSelect--Input>label {
    grid-area: 1/1/span 1/span 1
}

.FormSelect .FormSelect--Input>select {
    grid-area: 1/1/span 2/span 1
}

.FormSelect .FormSelect--Input:has(>select:disabled) {
    filter: grayscale(1);
    opacity: .75
}

.FormSelect .FormSelect--Input:has(>select.invalid) {
    border-color: var(--typeface-danger2-grapefruit) !important
}

.FormSelect .FormSelect--Input:has(>select.invalid)>label {
    color: var(--typeface-danger2-grapefruit) !important
}

.FormSelect .FormSelect--Input:has(>select.invalid)>label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke='%23D80909'/%3E%3Ccircle cx='12' cy='17.75' r='.75' fill='%23D80909'/%3E%3Cpath fill='%23D80909' d='M11.25 6.5a.5.5 0 0 1 .5-.5h.5a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: var(--s-1);
    margin-top: -.15em;
    width: 20px
}

.FormSelect .FormSelect--Input:has(>select:focus) {
    border-color: var(--typeface-petrol8-petrol3)
}

.FormSelect .FormSelect--Input>select {
    background: #0000;
    border: 0;
    display: block;
    font-size: 18px;
    line-height: 1.6;
    min-height: 56px;
    outline: 0;
    padding-top: 4px;
    text-align: left;
    width: 100%
}

@media (max-width:750px) {
    .FormSelect .FormSelect--Input>select {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormSelect .FormSelect--Input>label {
    align-items: center;
    color: var(--typeface-petrol8-petrol3);
    display: flex;
    flex-direction: row;
    font-size: 12px;
    font-weight: 700;
    gap: .25em;
    left: 0;
    line-height: 1;
    padding-top: 0;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transition: all .3s linear;
    white-space: nowrap;
    width: 100%
}

.FormSelect .FormSelect--Input>select[placeholder=" "]:not(:focus):placeholder-shown+label {
    color: var(--typeface-schwarz-grau1);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    transition: all .3s linear
}

@media (max-width:750px) {
    .FormSelect .FormSelect--Input>select[placeholder=" "]:not(:focus):placeholder-shown+label {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormSelect .FormSelect--Input>select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="%23004B5A" d="M6 9L12 15L18 9" stroke-miterlimit="10" stroke-linecap="square"/></svg>');
    background-position: right var(--s-5) center;
    background-repeat: no-repeat;
    border: 1px solid var(--divider-schwarz-grau1);
    border-radius: 4px;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
    padding-top: 24px
}

.styleguide-example[data-theme=dark] .FormSelect .FormSelect--Input>select,
[data-theme=dark] .FormSelect .FormSelect--Input>select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="%23A6D8D9" d="M6 9L12 15L18 9" stroke-miterlimit="10" stroke-linecap="square"/></svg>')
}

@media (-ms-high-contrast:active),
(forced-colors:active) {
    .FormSelect .FormSelect--Input>select {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="%23FFFFFF" d="M6 9L12 15L18 9" stroke-miterlimit="10" stroke-linecap="square"/></svg>')
    }
}

.FormSelect .FormSelect--Input>select[required]~label:after {
    content: " *"
}

.FormSelect .FormSelect--Input>select.is-empty {
    color: #0000
}

.FormSelect .FormSelect--Input>select.is-empty+label {
    color: var(--typeface-schwarz-grau1);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    top: 50%;
    transition: all .3s linear
}

@media (max-width:750px) {
    .FormSelect .FormSelect--Input>select.is-empty+label {
        font-size: 16px;
        line-height: 1.6
    }
}

.FormSelect .FormSelect--Input>select:not(.is-empty)+label {
    top: 8px
}

.FormSelect .FormSelect--Input>label {
    padding: 0 var(--s-5) 0;
    pointer-events: none
}

#FlyingFocus {
    background: #0000;
    display: none;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: -100px;
    transition-property: left, top, width, height, opacity;
    transition-timing-function: cubic-bezier(0, .2, 0, 1);
    visibility: hidden
}

#FlyingFocus.FlyingFocus-visible {
    display: block;
    visibility: visible;
    z-index: 10000000
}

#FlyingFocus:after {
    border: 2px solid var(--FlyingFocus-color, var(--flying-focus-petrol8-petrol3));
    border-radius: var(--FlyingFocus-radius, 8px);
    content: "";
    inset: -5px -5px -5px -5px;
    position: absolute
}

.Icon {
    display: grid;
    height: 24px;
    place-items: center;
    width: 24px
}

.Icon.size-small {
    height: 16px;
    width: 16px
}

.Icon.size-large {
    height: 32px;
    width: 32px
}

.Icon.size-xlarge {
    height: 48px;
    width: 48px
}

.Icon.is-inline {
    display: inline-grid
}

.Icon>svg {
    height: 100%;
    width: 100%
}

.t-h1 {
    font-size: 56px;
    line-height: 1.25
}

@media (max-width:1125px) {
    .t-h1 {
        font-size: 44px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .t-h1 {
        font-size: 32px;
        line-height: 1.25
    }
}

.t-h2 {
    font-size: 30px;
    line-height: 1.25
}

@media (max-width:1125px) {
    .t-h2 {
        font-size: 28px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .t-h2 {
        font-size: 24px;
        line-height: 1.25
    }
}

.t-h3 {
    font-size: 24px;
    line-height: 1.25
}

@media (max-width:750px) {
    .t-h3 {
        font-size: 20px;
        line-height: 1.25
    }
}

.t-h4 {
    font-size: 20px;
    line-height: 1.25
}

@media (max-width:750px) {
    .t-h4 {
        font-size: 18px;
        line-height: 1.25
    }
}

.t-pagelead {
    font-size: 24px;
    line-height: 1.5
}

@media (max-width:1125px) {
    .t-pagelead {
        font-size: 24px;
        line-height: 1.25
    }
}

@media (max-width:750px) {
    .t-pagelead {
        font-size: 20px;
        line-height: 1.25
    }
}

.t-text-l {
    font-size: 18px;
    line-height: 1.6
}

@media (max-width:750px) {
    .t-text-l {
        font-size: 16px;
        line-height: 1.6
    }
}

.t-text-m {
    font-size: 16px;
    line-height: 1.6
}

@media (max-width:750px) {
    .t-text-m {
        font-size: 14px;
        line-height: 1.4
    }
}

.t-text-s {
    font-size: 14px;
    line-height: 1.4
}

@media (max-width:750px) {
    .t-text-s {
        font-size: 13px;
        line-height: 1.4
    }
}

.t-text-xs {
    font-size: 12px;
    line-height: 1
}

.t-button-label-l {
    font-size: 18px;
    line-height: 1
}

@media (max-width:750px) {
    .t-button-label-l {
        font-size: 16px
    }
}

.t-button-label-m {
    font-size: 16px;
    line-height: 1
}

@media (max-width:750px) {
    .t-button-label-m {
        font-size: 14px
    }
}

.t-button-label-s {
    font-size: 14px;
    line-height: 1
}

@media (max-width:750px) {
    .t-button-label-s {
        font-size: 13px
    }
}

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

.page-wrapper {
    clear: both;
    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 100%
}

.page-wrapper>:first-child {
    margin-top: 0
}

.page-wrapper>:last-child {
    margin-bottom: 0
}

.page-content {
    height: 100%;
    padding: 1px 0;
    position: relative
}

.page-content>:first-child:not(.Headline) {
    margin-top: 0
}

.page-content>:last-child {
    margin-bottom: 0
}

.is-optional:empty {
    display: none
}

@media (min-width:581px) {
    html .Width-75 {
        width: 75%
    }

    html .Width-50 {
        width: 50%
    }

    html .Width-25 {
        width: 25%
    }

    html .Width-66 {
        width: 66%
    }

    html .Width-33 {
        width: 33%
    }
}

html.examplepage body,
html.styleguide body {
    position: relative
}

html.examplepage body:before,
html.styleguide body:before {
    background-color: #a9a9a9;
    bottom: 0;
    color: red;
    content: "SM:(ZERO 0 - 375px)";
    font-family: monospace;
    font-size: .75rem;
    line-height: 1;
    padding: 3px 5px;
    position: fixed;
    right: 0;
    z-index: 9999
}

@media (min-width:376px) {

    html.examplepage body:before,
    html.styleguide body:before {
        color: green;
        content: "SM:(XS 375px - 580px)"
    }
}

@media (min-width:581px) {

    html.examplepage body:before,
    html.styleguide body:before {
        color: blue;
        content: "SM:(SM 580px - 750px)"
    }
}

@media (min-width:751px) {

    html.examplepage body:before,
    html.styleguide body:before {
        color: cyan;
        content: "LG:(MD 750px - 900px)"
    }
}

@media (min-width:901px) {

    html.examplepage body:before,
    html.styleguide body:before {
        color: #f0f;
        content: "LG:(LG 900px - 1125px)"
    }
}

@media (min-width:1126px) {

    html.examplepage body:before,
    html.styleguide body:before {
        color: #ff0;
        content: "XL:(XL 1125px - 1422px)"
    }
}

@media (min-width:1423px) {

    html.examplepage body:before,
    html.styleguide body:before {
        color: #000;
        content: "XL:(2XL 1422px - ∞)"
    }
}