:root,
.vars-default{
    /* width */
    --vars-content-width-default: 86.875rem;
    --vars-content-width-wider: 111rem;
    --vars-content-width-narrow: 70rem;
    --vars-content-width-narrower: 60rem;
    --vars-content-width-full: 100%;
    /* shadows*/
    --vars-shadow: 2px 2px 10px 0 rgb(0 0 0 / 20%);
    /* colors */
    --vars-color-main: #a30003;
    --vars-background: #fff;
    --vars-color-bg-rgb: 255,255,255;
    --vars-color-text: #333;
    --vars-color-iverted-text: white;
    --vars-color-text-shy: #666;
    --vars-color-text-teaser: #333;
    --vars-color-header: var(--vars-color-main);
    --vars-color-subheader: var(--vars-color-header);
    --vars-color-header-2: var(--vars-color-header);
    --vars-color-header-2-subheader: var(--vars-color-header);
    --vars-color-header-3: var(--vars-color-header);
    --vars-color-header-3-subheader: var(--vars-color-header);
    --vars-color-header-4: var(--vars-color-header);
    --vars-color-header-4-subheader: var(--vars-color-header);
    --vars-color-header-5: var(--vars-color-header);
    --vars-color-header-5-subheader: var(--vars-color-header);
    --vars-color-button-color: white;
    --vars-color-button-bg: var(--vars-color-main);
    --vars-color-button-bg-hover: #f0135c;
    --vars-color-link: var(--vars-color-main);
    --vars-color-link-hover: #81002c;
    /* fontsize */
    --vars-font-size-text: 1rem;
    --vars-font-size-header: 3rem;
    --vars-font-size-header-2: 2.1rem;
    --vars-font-size-header-3: 1.4rem;
    --vars-font-size-header-4: 1.2rem;
    --vars-font-size-header-5: 1.2rem;
    --vars-font-size-header-6: 1.2rem;
    --vars-font-size-subheader: 1.5rem;
    /* fontfamily */
    --vars-font-family-text: "Arial";
    --vars-font-family-header: "Arial";
    --vars-font-family-header-2: var(--vars-font-family-header);
    --vars-font-family-header-3: var(--vars-font-family-header);
    --vars-font-family-header-4: var(--vars-font-family-header);
    --vars-font-family-header-5: var(--vars-font-family-header);
    --vars-font-family-header-6: var(--vars-font-family-header);
    --vars-font-family-subheader: var(--vars-font-family-header);
    /* font-weights*/
    --vars-nav-font-weight: bold;
    --vars-font-weight-header: var(--vars-nav-font-weight);
    --vars-font-weight-header-2: var(--vars-nav-font-weight);
    --vars-font-weight-header-3: var(--vars-nav-font-weight);
    --vars-font-weight-header-4: var(--vars-nav-font-weight);
    --vars-font-weight-header-5: var(--vars-nav-font-weight);
    --vars-font-weight-header-6: var(--vars-nav-font-weight);
    /* text-transform */
    --vars-text-transform-header: uppercase;
    --vars-text-transform-header-2: initial;
    --vars-text-transform-header-3: var(--vars-text-transform-header-2);
    --vars-text-transform-header-4: var(--vars-text-transform-header-2);
    --vars-text-transform-header-5: var(--vars-text-transform-header-2);
    --vars-text-transform-header-6: var(--vars-text-transform-header-2);
    /* line-height */
    --vars-text--line-height: 1.7em;
    --vars-header--line-height: 1.2em;
    --vars-header-2--line-height: var(--vars-header--line-height);
    --vars-header-3--line-height: var(--vars-header--line-height);
    --vars-header-4--line-height: var(--vars-header--line-height);
    --vars-header-5--line-height: var(--vars-header--line-height);
    --vars-header-6--line-height: var(--vars-header--line-height);
    --vars-text--line-height: 1.3em;
    /* letter-spacing */
    --vars-header--letter-spacing: initial;
    --vars-header-2--letter-spacing: initial;
    --vars-header-3--letter-spacing: var(--vars-header-2--letter-spacing);
    --vars-header-4--letter-spacing: var(--vars-header-2--letter-spacing);
    --vars-header-5--letter-spacing: var(--vars-header-2--letter-spacing);
    --vars-header-6--letter-spacing: var(--vars-header-2--letter-spacing);
    /* margins */
    --vars-headline-margin: 0 0 1rem 0;
    --vars-headline-inbetween-margin: 0rem;
    --vars-margin-top: 0;
    --vars-margin-bottom: 3rem;
    --vars-margin-extra-small: 0.5rem;
    --vars-margin-small: 1rem;
    --vars-margin-medium: 2rem;
    --vars-margin-large: 4rem;
    --vars-margin-extra-large: 6rem;
    --vars-text-margin: 0 0 2rem 0;
    --vars-text-margin-small: 0 0 1rem 0;

    --vars-gap-extra-small: 5px;
    --vars-gap: 1.5rem;
    --vars-gap-small: 1rem;
    --vars-gap-medium: 1.5rem;
    --vars-gap-big: 2rem;
    --vars-gap-large: 3rem;
    --vars-gap-huge: 6rem;

    /* paddings */
    --vars-padding-horizontal: 2rem;
    --vars-padding--small: 1rem;
    --vars-padding: 2rem;
    --vars-padding-vertical: 2rem;
    --vars-padding-vertical-big: 3rem;
    --vars-padding-vertical-bigger: 4rem;
    --vars-padding-vertical-huge: 6rem;

    /* filters*/
    --vars-filter--blur: blur(5px);

    /* navigation */
    --stahl-nav-primary--font-size:var(--vars-font-size-header-3);
    --stahl-nav-primary--font-weight:bold;
}
.vars-default stahl-button{
    --stahl-button--background:var(--vars-color-main);
    --stahl-button--color-transparent:var(--vars-color-link);
    --stahl-button--color:white;
}

@media screen and (max-width: 1200px){
    :root,
    .vars-default{
        --vars-gap-huge: 3rem;
        --stahl-nav-primary--font-size:var(--vars-font-size-header-4);
        --stahl-button--padding:10px 10px;
    }
}
@media screen and (max-width: 950px){
    :root,
    .vars-default{
        --vars-gap-huge: 2rem;
    }
}

.vars-reduced-text-margins{
    --vars-headline-margin: 0 0 0.2rem 0 !important;
    --vars-text-margin: 0 0 0.2rem 0 !important;
}
.vars-highlighted{
    --vars-color-bg: #eee;
}

.vars-shy{
    /* colors */
    --vars-color-main: #666;
    --vars-color-bg: white;
    --vars-color-button-color: #333;
    --vars-color-button-bg: #ccc;
    --vars-color-button-bg-hover: #aaa;
    --vars-color-text: #888;
    --vars-color-text-teaser: #666;
    --vars-color-header: #aaa;
    --vars-color-link: #333;
    --vars-color-link-hover: #111;
    /* margins */
    --vars-headline-margin: 0 0 0rem 0;
    /* line-height */
    --vars-text--line-height: 1.3em;
}

.vars-inverted{
    /* colors */
    --vars-color-bg: linear-gradient(160deg, #C5819B 0%, #805666 100%);
    --vars-color-button-color: white;
    --vars-color-button: white;
    --vars-color-button-hover: #f0135c;
    --vars-color-text: #ffffff;
    --vars-color-text-teaser: #ccc;
    --vars-color-header: #ffffff;
    --vars-color-subheader: var(--vars-color-header);
    --vars-color-header-2: var(--vars-color-header);
    --vars-color-header-2-subheader: var(--vars-color-header);
    --vars-color-header-3: var(--vars-color-header);
    --vars-color-header-3-subheader: var(--vars-color-header);
    --vars-color-link: #ffffff;
    --vars-color-link-hover: #ccc;
    /* margins */
    --vars-headline-margin: 0 0 1rem 0;
    /* padding */
    --vars-headline-margin: 0 0 1rem 0;

}
.vars-inverted stahl-button{
    --stahl-button--background:white;
    --stahl-button--color-transparent:var(--vars-color-link);
    --stahl-button--color:var(--vars-color-main);
}

.vars-transparent{
    /* colors */
    --vars-color-main: #d30045;
    --vars-color-bg: transparent;
    --vars-color-bg-rgb: 50,50,50;
    --vars-color-button-color: white;
    --vars-color-button: #d30045;
    --vars-color-button-hover: #f0135c;
    --vars-color-text: #ffffff;
    --vars-color-text-teaser: #ccc;
    --vars-color-header: #d30045;
    --vars-color-subheader: var(--vars-color-header);
    --vars-color-header-2: var(--vars-color-header);
    --vars-color-header-2-subheader: var(--vars-color-header);
    --vars-color-header-3: var(--vars-color-header);
    --vars-color-header-3-subheader: var(--vars-color-header);
    --vars-color-link: #ffffff;
    --vars-color-link-hover: #ccc;
    /* margins */
    --vars-headline-margin: 0 0 1rem 0;
    /* padding */
    --vars-headline-margin: 0 0 1rem 0;
}

.vars-reset {
    /* colors */
    --vars-color-main: initial;
    --vars-color-contrast: initial;
    --vars-color-bg:initial;
    --vars-color-text: initial;
    --vars-color-text-teaser: initial;
    --vars-color-header: initial;
    --vars-color-subheader: initial;
    --vars-color-header-2: initial;
    --vars-color-header-2-subheader: initial;
    --vars-color-header-3: initial;
    --vars-color-header-3-subheader: initial;
    --vars-color-header-4: initial;
    --vars-color-header-4-subheader: initial;
    --vars-color-header-5: initial;
    --vars-color-header-5-subheader: initial;
    --vars-color-link: initial;
    --vars-color-link-hover: initial;
    /* margins */
    --vars-headline-margin: initial;
}