html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
}

#page,
.site,
.spt-page,
.spt-main,
main {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: clip;
}

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

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

:root {
    --color-white: #ffffff;

    --color-gray-1: #f5f5f5;
    --color-gray-2: #d3d3d3;
    --color-gray-3: #696969;
    --color-gray-4: #222222;
    --color-gray-5: #1a1a1a;

    --color-text-dark: var(--color-gray-5);
    --color-text-medium: var(--color-gray-4);
    --color-text-light: var(--color-white);

    --color-border-light: var(--color-gray-2);
    --color-border-medium: var(--color-gray-3);
    --color-border-dark: var(--color-gray-4);

    --font-noodle: "big_noodle_titling", Impact, sans-serif;
    --font-noodle-oblique: "big_noodle_titling_", Impact, sans-serif;
    --font-body: "roboto-v51-latin", Arial, sans-serif;

    --typo-super-hero-fs: clamp(72px, calc(72px + 69 * ((100vw - 390px) / 1050)), 141px);
    --typo-super-hero-lh: clamp(78px, calc(78px + 66 * ((100vw - 390px) / 1050)), 144px);

    --typo-hero-fs: clamp(58px, calc(58px + 48 * ((100vw - 390px) / 1050)), 106px);
    --typo-hero-lh: clamp(64px, calc(64px + 48 * ((100vw - 390px) / 1050)), 112px);

    --typo-h1-fs: clamp(42px, calc(42px + 26 * ((100vw - 390px) / 1050)), 68px);
    --typo-h1-lh: clamp(48px, calc(48px + 24 * ((100vw - 390px) / 1050)), 72px);

    --typo-h2-fs: clamp(32px, calc(32px + 10 * ((100vw - 390px) / 1050)), 42px);
    --typo-h2-lh: clamp(38px, calc(38px + 10 * ((100vw - 390px) / 1050)), 48px);

    --typo-quote-fs: clamp(32px, calc(32px + 10 * ((100vw - 390px) / 1050)), 42px);
    --typo-quote-lh: clamp(38px, calc(38px + 10 * ((100vw - 390px) / 1050)), 48px);

    --typo-h3-fs: clamp(22px, calc(22px + 4 * ((100vw - 390px) / 1050)), 26px);
    --typo-h3-lh: clamp(26px, calc(26px + 4 * ((100vw - 390px) / 1050)), 30px);

    --typo-lead-fs: clamp(20px, calc(20px + 4 * ((100vw - 390px) / 1050)), 24px);
    --typo-lead-lh: clamp(28px, calc(28px + 4 * ((100vw - 390px) / 1050)), 32px);

    --typo-body-fs: clamp(18px, calc(18px + 2 * ((100vw - 390px) / 1050)), 20px);
    --typo-body-lh: clamp(28px, calc(28px + 2 * ((100vw - 390px) / 1050)), 30px);

    --typo-small-fs: clamp(17px, calc(15px + 1 * ((100vw - 390px) / 1050)), 16px);
    --typo-small-lh: clamp(25px, calc(23px + 1 * ((100vw - 390px) / 1050)), 24px);

    --space-xs: clamp(12px, calc(12px + 4 * ((100vw - 390px) / 1050)), 16px);
    --space-s: clamp(16px, calc(16px + 8 * ((100vw - 390px) / 1050)), 24px);
    --space-m: clamp(24px, calc(24px + 16 * ((100vw - 390px) / 1050)), 40px);
    --space-l: clamp(40px, calc(40px + 24 * ((100vw - 390px) / 1050)), 64px);
    --space-xl: clamp(64px, calc(64px + 32 * ((100vw - 390px) / 1050)), 96px);
    --space-xxl: clamp(96px, calc(96px + 64 * ((100vw - 390px) / 1050)), 160px);

    --module-background: var(--color-white);
     --module-text: var(--color-gray-5);

    --module-button-background: transparent;
    --module-button-text: var(--color-gray-5);
    --module-button-border: var(--color-gray-5);

    --module-button-hover-background: var(--color-gray-5);
    --module-button-hover-text: var(--color-white);
    --module-button-hover-border: var(--color-gray-5);
}

body {
    font-family: var(--font-body);
    font-size: var(--typo-body-fs);
    line-height: var(--typo-body-lh);
    color: var(--color-text-dark);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
blockquote {
    margin-top: 0;
    color: inherit;
}

@supports selector(:has(*)) {
  h1:has(.text-sup), h2:has(.text-sup), h3:has(.text-sup), .typo-super-hero:has(.text-sup), .typo-hero:has(.text-sup), .typo-h1:has(.text-sup), .typo-h2-noodle:has(.text-sup), .typo-h2-roboto:has(.text-sup), .typo-h3:has(.text-sup) {
    margin-bottom: var(--space-m);
  }
}

p,
li {
    font-family: var(--font-body);
    font-size: var(--typo-body-fs);
    line-height: var(--typo-body-lh);
}

p {
    margin-bottom: 1em;
}

ul,
ol {
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.25em;
}

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

h1 {
    font-family: var(--font-noodle);
    font-size: var(--typo-h1-fs);
    line-height: var(--typo-h1-lh);
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: var(--space-m);
}

h2 {
    font-family: var(--font-body);
    font-size: var(--typo-h2-fs);
    line-height: var(--typo-h2-lh);
    font-weight: 800;
    margin-bottom: var(--space-m);
}

h3 {
    font-family: var(--font-noodle);
    font-size: var(--typo-h3-fs);
    line-height: var(--typo-h3-lh);
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: var(--space-m);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: currentColor;
    text-decoration: inherit;
}

.ct-headline a {
    pointer-events: none;
    text-decoration: none !important;
}

.ct-span a {
    color: inherit;
}

.text-zweispaltig {
    column-count: 2;
    column-gap: 40px;
}

@media (max-width: 768px) {
.text-zweispaltig {
        column-count: 1;
    }
}

.text-sup {
    display: inline-block;
    position: relative;
    font-size: 0.5em;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
}

@supports selector(:has(*)) {
    h1:has(.text-sup),
    h2:has(.text-sup),
    h3:has(.text-sup),
    .typo-super-hero:has(.text-sup),
    .typo-hero:has(.text-sup),
    .typo-h1:has(.text-sup),
    .typo-h2-noodle:has(.text-sup),
    .typo-h2-roboto:has(.text-sup),
    .typo-h3:has(.text-sup) {
        display: inline-flex;
        align-items: flex-start;
        gap: 0.15em;
        line-height: 0.82;
    }

    h1:has(.text-sup) .text-sup,
    h2:has(.text-sup) .text-sup,
    h3:has(.text-sup) .text-sup,
    .typo-super-hero:has(.text-sup) .text-sup,
    .typo-hero:has(.text-sup) .text-sup,
    .typo-h1:has(.text-sup) .text-sup,
    .typo-h2-noodle:has(.text-sup) .text-sup,
    .typo-h2-roboto:has(.text-sup) .text-sup,
    .typo-h3:has(.text-sup) .text-sup {
        top: 0;
        margin-left: 0;
    }
}

.theme--white {
    --module-background: var(--color-white);
    --module-text: var(--color-gray-5);
    --module-button-background: transparent;
    --module-button-text: var(--color-gray-5);
    --module-button-border: var(--color-gray-5);
    --module-button-hover-background: var(--color-gray-2);
    --module-button-hover-text: var(--color-gray-5);
    --module-button-hover-border: var(--color-gray-2);
}

.theme--gray-1 {
    --module-background: var(--color-gray-1);
    --module-text: var(--color-gray-5);
    --module-button-background: transparent;
    --module-button-text: var(--color-gray-5);
    --module-button-border: var(--color-gray-5);
    --module-button-hover-background: var(--color-gray-2);
    --module-button-hover-text: var(--color-gray-5);
    --module-button-hover-border: var(--color-gray-2);
}

.theme--gray-2 {
    --module-background: var(--color-gray-2);
    --module-text: var(--color-gray-5);
    --module-button-background: transparent;
    --module-button-text: var(--color-gray-5);
    --module-button-border: var(--color-gray-5);
    --module-button-hover-background: var(--color-gray-1);
    --module-button-hover-text: var(--color-gray-5);
    --module-button-hover-border: var(--color-gray-1);
}

.theme--gray-3 {
    --module-background: var(--color-gray-3);
    --module-text: var(--color-white);

    --module-button-background: transparent;
    --module-button-text: var(--color-white);
    --module-button-border: var(--color-white);

    --module-button-hover-background: var(--color-white);
    --module-button-hover-text: var(--color-gray-5);
    --module-button-hover-border: var(--color-white);
}

.theme--gray-4 {
    --module-background: var(--color-gray-4);
    --module-text: var(--color-white);
    --module-button-background: transparent;
    --module-button-text: var(--color-white);
    --module-button-border: var(--color-white);
    --module-button-hover-background: var(--color-white);
    --module-button-hover-text: var(--color-gray-5);
    --module-button-hover-border: var(--color-white);
}

.theme--gray-5 {
    --module-background: var(--color-gray-5);
    --module-text: var(--color-white);
    --module-button-background: transparent;
    --module-button-text: var(--color-white);
    --module-button-border: var(--color-white);
    --module-button-hover-background: var(--color-white);
    --module-button-hover-text: var(--color-gray-5);
    --module-button-hover-border: var(--color-white);
}

.theme--white,
.theme--gray-1,
.theme--gray-2,
.theme--gray-3,
.theme--gray-4,
.theme--gray-5 {
    color: var(--module-text);
    background-color: var(--module-background);
}

.theme--gray-4 a,
.theme--gray-5 a {
    color: currentColor;
}

.typo-super-hero {
    font-family: var(--font-noodle);
    font-size: var(--typo-super-hero-fs);
    line-height: var(--typo-super-hero-lh);
    font-weight: 400;
    text-transform: uppercase;
}

.typo-hero {
    font-family: var(--font-noodle);
    font-size: var(--typo-hero-fs);
    line-height: var(--typo-hero-lh);
    font-weight: 400;
    text-transform: uppercase;
}

.typo-h1 {
    font-family: var(--font-noodle);
    font-size: var(--typo-h1-fs);
    line-height: var(--typo-h1-lh);
    font-weight: 400;
    text-transform: uppercase;
}

.typo-h2-roboto {
    font-family: var(--font-body);
    font-size: var(--typo-h2-fs);
    line-height: var(--typo-h2-lh);
    font-weight: 800;
}

.typo-h2-noodle {
    font-family: var(--font-noodle);
    font-size: var(--typo-h2-fs);
    line-height: var(--typo-h2-lh);
    font-weight: 400;
    text-transform: uppercase;
}

.typo-quote p {
    font-family: var(--font-body);
    font-size: var(--typo-quote-fs);
    line-height: var(--typo-quote-lh);
    font-weight: 400;
}

.typo-h3 {
    font-family: var(--font-noodle);
    font-size: var(--typo-h3-fs);
    line-height: var(--typo-h3-lh);
    font-weight: 400;
    text-transform: uppercase;
}

.typo-lead {
    font-family: var(--font-body);
    font-size: var(--typo-lead-fs);
    line-height: var(--typo-lead-lh);
    font-weight: 400;
}

.typo-body {
    font-family: var(--font-body);
    font-size: var(--typo-body-fs);
    line-height: var(--typo-body-lh);
    font-weight: 400;
}

.typo-small {
    font-family: var(--font-body);
    font-size: var(--typo-small-fs);
    line-height: var(--typo-small-lh);
    font-weight: 400;
}

.typo-small p {
    font-family: var(--font-body);
    font-size: var(--typo-small-fs);
    line-height: var(--typo-small-lh);
    font-weight: 400;
}

.typo-super-hero,
.typo-hero,
.typo-h1,
.typo-h2-roboto,
.typo-h2-noodle,
.typo-quote,
.typo-h3,
.typo-lead,
.typo-body,
.typo-small {
    max-width: 100%;
    color: var(--module-text, var(--color-gray-5));
}

.spt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 26px;
    border: 4px solid var(--module-button-border);
    border-radius: 999px;
    background: var(--module-button-background);
    color: var(--module-button-text);
    font-family: var(--font-noodle);
    font-size: calc(1.1 * var(--typo-small-fs));
    line-height: 1;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

@media (max-width: 767px) {
.spt-btn {
    padding: 2px 26px 3px 26px;
    border: 3px solid var(--module-button-border);
}
}

.spt-btn:hover,
.spt-btn:focus-visible {
    border-color: var(--module-button-hover-border);
    background: var(--module-button-hover-background);
    color: var(--module-button-hover-text);
    text-decoration: none;
}

.spt-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}