body{
    hyphens: auto;
    hyphenate-limit-chars: 7 4 5;
}


:root {
    --u-cols: 12;
    --u-col-boxes: 4;
    --u-min: 0.5rem;
    --u-max: 5.5rem;
    --u-base: clamp(var(--u-min), calc(100vw / var(--u-cols) / var(--u-col-boxes)), var(--u-max));
    --u-0: 0px;
    --u-box-025: calc(var(--u-base) * 0.25);
    --u-box-0125: calc(var(--u-base) * 0.125);
    --u-box-05: calc(var(--u-base) * 0.5);
    --u-box-075: calc(var(--u-base) * 0.75);
    --u-box-1: var(--u-base);
    --u-box-2: calc(var(--u-base) * 2);
    --u-box-3: calc(var(--u-base) * 3);
    --u-col-1: calc(var(--u-base) * 4);
    --u-col-2: calc(var(--u-col-1) * 2);
    --u-col-3: calc(var(--u-col-1) * 3);
    --u-col-4: calc(var(--u-col-1) * 4);
    --u-col-5: calc(var(--u-col-1) * 5);
    --u-col-6: calc(var(--u-col-1) * 6);
    --u-col-7: calc(var(--u-col-1) * 7);
    --u-col-8: calc(var(--u-col-1) * 8);
    --u-col-9: calc(var(--u-col-1) * 9);
    --u-col-10: calc(var(--u-col-1) * 10);
    --u-col-11: calc(var(--u-col-1) * 11);
    --u-col-12: calc(var(--u-col-1) * 12);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2rem;
    --text-5xl: 3rem;
    --text-6xl: 4rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 0.875rem;
    --space-base: 1rem;
    --space-lg: 1.125rem;
    --space-xl: 1.25rem;
    --space-2xl: 1.5rem;
    --space-3xl: 1.875rem;
    --space-4xl: 2.25rem;
    --space-5xl: 3rem;
    --space-6xl: 3.75rem;
    --space-7xl: 4.5rem;
    --space-8xl: 6rem;
    --space-9xl: 8rem;
    --b-rounded-full: calc(infinity * 1px);
    --b-rounded-xs: 0.125rem;
    --b-rounded-sm: 0.25rem;
    --b-rounded-md: 0.375rem;
    --b-rounded-lg: 0.5rem;
    --b-rounded-xl: 0.75rem;
    --b-rounded-2xl: 1rem;
    --b-rounded-3xl: 1.5rem;
    --b-rounded-4xl: 2rem;
    --color-background: #000;
    --color-akzent: #EE7100;
    --color-akzent-hc: #BE5A00;
    --color-text: #fff;
    --color-text-secondary: #999;
    --color-lvl-up: #FFFFFF1A;
    --color-lvl-down: #00000010;
    --color-transparent: transparent;
    --color-blau: #00305D;
    --color-grau: #919191;
    --color-grau-hc: #757575;
    --color-hellgruen: #C7D300;
    --color-hellblau: #3EA3DC;
    --letter-spacing-uppercase: 2px;
    --line-height-h1: 1;
    --color-tuerkis: #33C8B0;
    --color-hellorange: #FAAF00;
    --color-magenta: #C33E9D;
    --color-gruen: #78A821;
    --color-rot: #E7343F;
    --color-popcorn: #F4D7B5;
    --overlay-dark: #000000B8;
    --icon-white: #FFF;
    --icon-black: #000;
    --icon-blau: #186AB5;
    --icon-gruen: #91A220;
    --icon-orange: #E98226;
    --icon-dark-magenta: #76295F;
    --icon-grau: #515151;

    /* Typography */
    --bs-font-sans-serif: "Roboto Condensed", sans-serif;
}

/* Sectionlayout */
.light-mode-section {
    --color-text: #19284b;
    --color-background: #ffffff;
    --color-lvl-up: var(--color-lvl-down);
    --icon-black: var(--icon-white);
    --icon-color-switch: var(--color-blau);
    --icon-color-blue-switch: var(--icon-blau);
    --icon-color-black-switch: var(--color-blau);
}

.container-spacing{
    display: flex;
    flex-flow: column;
    padding-top: var(--u-col-1);
    padding-right: var(--u-col-2);
    padding-bottom: var(--u-col-1);
    padding-left: var(--u-col-2);
}

.content-container {
    display: flex;
    justify-content: center;
    flex-flow: column;
    width: 100%;
    padding-top: var(--u-col-1);
    padding-right: var(--u-col-2);
    padding-bottom: var(--u-col-1);
    padding-left: var(--u-col-2);
}

.above-the-fold-container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    padding-top: var(--u-col-1);
    padding-right: var(--u-col-1);
    padding-bottom: var(--u-col-1);
    padding-left: var(--u-col-1);
}

.centered-content {
    justify-content: center;
    align-items: center;
}

.centered-content-two{
    justify-content: center;
    align-items: start;
}

.bg-akzent {
    background-color: var(--color-akzent);
}

.bg-akzent h2, .bg-akzent h3, .bg-akzent p, .bg-akzent a, .bg-akzent ul, .bg-akzent li {
    color: white;
}

.mt-c-6{
    margin-top: var(--space-8xl);
}


/* Font Styles */


.page-text{
    font-family: "Roboto", sans-serif;
    color: var(--color-grau-hc);
    display: block;
    max-width: 100%;
    font-weight: 400;
    font-size: var(--text-2xl);
    text-align: start;
    overflow-wrap: break-word;
    text-wrap: pretty;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-3xl);
}


.headline-2 {
    color: var(--color-text);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-6xl);
    line-height: var(--line-height-h1);
    text-align: center;
    margin-top: var(--u-0);
    margin-bottom: var(--space-2xs);
}

.headline-2--spaced {
  margin-bottom: 40px;
}

.headline-4 {
    color: var(--color-text);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--text-4xl);
    margin-top: var(--u-0);
    margin-bottom: var(--space-base);
}

/* Link Styles */

a{
    color: var(--color-akzent);
}

a:hover {
    color: var(--color-akzent);
}

.text-primary-button {
    color: white !important;
}

.text-primary-button:hover{
    color: var(--color-text) !important;
}

.wp-button-text-wrapper:hover {
    color: var(--color-akzent);
}


/* Claim Styles */
.page-header {
    width: 100%;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--text-8xl);
    line-height: var(--line-height-h1);
    text-align: center;
    margin-top: var(--u-0);
    margin-bottom: var(--space-xl);
}

/* Orange Border Styles*/

.border-box-spacing {
    width: 100%;
    padding-top: var(--space-3xl);
    padding-right: var(--space-4xl);
    padding-bottom: var(--space-3xl);
    padding-left: var(--space-3xl);
}

.fade-border{
    position: relative;
}

.fade-border-radius-xl {
    border-radius: var(--space-4xl);
}

.fade-border.akzent-transparent::before{
    background: linear-gradient(135deg, #ee7100 0.5%, rgba(238, 113, 0, 0.1) 100%);
}

.fade-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* About Section Flexstyle für If-Funktion */
.about-col {
    flex: 1;
    min-width: 0;
}


/* WP Button Styles */
.btn-wrapper {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-base);
    width: 100%;
}

/* Primary Button */
.btn-spacer-mt {
    margin-top: var(--space-base);
}

.wp-button.primary {
        background: var(--color-akzent);
        border-color: var(--color-akzent);
}

/* Tertiary Button */
.wp-button.tertiary {
    background: var(--color-lvl-up);
    border-color: transparent;
    padding: var(--space-2xs) var(--space-sm);
}

.wp-button.primary {
        background: var(--color-akzent);
        border-color: var(--color-akzent);
}

.wp-button.blue {
        background: #19284b;;
        border-color: #19284b;;
}

/* Global Button Styles */
.wp-button {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: var(--space-base) var(--space-2xl);
    border-radius: calc(infinity * 1px);
    text-decoration: none;
    border: 2px solid;
}

/* SVG Icon Styles left*/
.wp-button-svg-left-wrapper {
    margin-right: var(--space-3xs);
    fill: var(--color-akzent);
    width: var(--text-xl);
}

/* SVG Icon Styles primary Button*/
.wp-button-svg-left-wrapper.dark-mode-svg{
    fill: var(--color-text);
}

/* Button Text Styles*/
.wp-button-text-wrapper {
    text-transform: uppercase;
    hyphens: none;
    letter-spacing: var(--letter-spacing-uppercase);
    color: var(--color-text);
    padding: 0;
    text-align: center;
    display: inherit;
    font-size: var(--text-xl);
    transition: 0.2s;
    font-weight: 700;
    font-family: var(--font-text);
    line-height: 1;
}

@media (max-width: 1119px) {
    .container-spacing {
        padding-right: var(--u-col-1);
        padding-left: var(--u-col-1);
    }
}

@media (max-width: 767px) {
    .comet-bg-content {
        position: relative;
        min-height: 100%;
        width: 100%;
    }
    .headline-2 {
        font-size: var(--text-4xl);
        margin-bottom: var(--space-2xs);
    }
    .page-header {
        font-size: var(--text-5xl);
    }
}