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;
}

.hero-theme-dark {
    --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);

    color: var(--module-text);
}


/*blur funktionen*/

@supports selector(:has(*)) {
    .hero-img,
    .hero-video {
        transition: filter 0.45s ease, transform 0.45s ease;
    }

    .hero-wrp:has(.spt-btn:hover) .hero-img,
    .hero-wrp:has(.spt-btn:focus-visible) .hero-img,
    .hero-wrp:has(.spt-btn:hover) .hero-video,
    .hero-wrp:has(.spt-btn:focus-visible) .hero-video {
        filter: blur(10px);
        transform: scale(1.03);
    }

    .hero-sld-image {
        transition: filter 0.45s ease, transform 0.45s ease;
    }

    .hero-sld-slide:has(.spt-btn:hover) .hero-sld-image,
    .hero-sld-slide:has(.spt-btn:focus-visible) .hero-sld-image {
        filter: blur(10px);
        transform: scale(1.03);
    }

    .card-sld-img {
        transition: filter 0.45s ease, transform 0.45s ease;
    }

    .card-sld-card:has(.spt-btn:hover) .card-sld-img,
    .card-sld-card:has(.spt-btn:focus-visible) .card-sld-img {
        filter: blur(10px);
        transform: scale(1.03);
    }
}

.hero-img-wrp,
.hero-media-wrp,
.hero-sld-media,
.card-sld-img-wrp,
.text-img-media {
    overflow: hidden;
}

.hero-theme-medium,
.hero-theme-dark {
    --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);

    color: var(--module-text);
}

@supports selector(:has(*)) {
    .text-img-image {
        transition: filter 0.45s ease, transform 0.45s ease;
    }

    .text-img-inner:has(.spt-btn:hover) .text-img-image,
    .text-img-inner:has(.spt-btn:focus-visible) .text-img-image {
        filter: blur(10px);
        transform: scale(1.03);
    }
}



.textfeld-txt-wrp img {
    max-width: 100%;
    height: auto;
}

.textfeld-txt-wrp .alignleft {
    float: left;
    margin: 0 var(--space-m) var(--space-s) 0;
}

.textfeld-txt-wrp .alignright {
    float: right;
    margin: 0 0 var(--space-s) var(--space-m);
}

.textfeld-txt-wrp .aligncenter {
    display: block;
    margin: var(--space-m) auto;
}

.textfeld-txt-wrp .alignnone {
    display: block;
    margin: var(--space-m) 0;
}

.textfeld-txt-wrp::after {
    content: "";
    display: table;
    clear: both;
}


/*header*/
#header {
    width: 100%;
    max-width: 100vw;
}

#top-header-wrp {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 36px;
    overflow: hidden;
    background-color: var(--color-gray-5);
    color: var(--color-white);
    font-family: 'roboto-v51-latin';
    font-size: var(--typo-small-fs);
    line-height: 1;
}

#color-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0) 80%,
        rgba(0, 0, 0, 0.87)
    );
}

#head-lauftext {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    padding-bottom: 2px;
    color: var(--color-white);
    transform: translateY(-50%);
    will-change: transform;
}

#head-lauftext span {
    display: inline-block;
    white-space: nowrap;
}

#head-teaser-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 40px);
    padding-right: 6vw;
    padding-left: 6vw;
    color: var(--color-white);
    text-align: center;
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.94) 66%,
        rgba(0, 0, 0, 0)
    );
    transform: translate(-50%, -50%);
}

#head-teaser-txt p {
    margin: 0;
    color: var(--color-white);
    white-space: nowrap;
}

#head-teaser-txt a {
    color: var(--color-white);
}

#head-teaser-txt .teaser-txt,
#head-teaser-txt .teaer-txt {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}