/* ----------------------------------------------------------------
	Variables
-----------------------------------------------------------------*/
@font-face {
	font-family: OpenSans;
	src: url(../fonts/OpenSans-Variable.ttf);
	font-weight: 100 1000;
	font-display: swap;
  }

:root {
	--shade-white: #FFFFFF;
	--shade-grey-bright: #F5F6FA;
	--shade-grey-light: #D8DEED;
	--shade-grey-medium: #ABB2C4;
	--shade-grey-dark: #3B3B3B;
	--shade-black: #04214E;
	--color-main: #08419B;
	--color-second: #E54920;
	--color-main-glow: color-mix(in srgb, var(--shade-white) 90%, var(--color-main));
	--color-second-glow: color-mix(in srgb, var(--shade-white) 90%, var(--color-second));

	--bg-white: var(--shade-white);
	--bg-light: var(--shade-grey-bright);
	--bg-dark: var(--color-main);

	--transition-s: 0.15s;
	--transition-default: 0.25s;
	--transition-l: 0.5s;

	--grid-count: 12;
	--grid-width: 1592px; /* 12er Schritte */
	--grid-padding: calc((100% - var(--grid-width)) / 2);
	--grid-padding: calc((100cqw - var(--grid-width)) / 2);
	--grid-gutter: 60px; /* 660px */
	--grid-gutter-small: 36px; /* 396px */
	--grid-column: calc((var(--grid-width) - ((var(--grid-count) - 1) * var(--grid-gutter))) / var(--grid-count)); /* 60px */
	--grid-column-small: calc((var(--grid-width) - ((var(--grid-count) - 1) * var(--grid-gutter-small))) / var(--grid-count)); /* 82px */

	--padding-xxs: 0.5rem;
	--padding-xs: 1.25rem;
	--padding-s: 2.5rem;
	--padding-default: 3.875rem;
	--padding-l: 5rem;
	--padding-xl: 7.5rem;
	--padding-xxl: 10rem;
	
	--gap-xxs: 0.25rem;
	--gap-xs: 0.75rem;
	--gap-s: 1.25rem;
	--gap-default: 2.5rem;
	--gap-l: 3.75rem;
	--gap-xl: 5rem;
	--gap-xxl: 7.5rem;

	--section-gap: 5rem;
	--section-padding-s: 7.5rem;
	--section-padding-default: 10rem;
	--section-padding-l: 12.5rem;

	--border-default-width: 2px;
	--border-default-color: var(--shade-grey-light);
	--border-default: var(--border-default-width) solid var(--border-default-color);
	--border-default-light: var(--shade-grey-light);
	--border-default-dark: var(--shade-white);
	--border-default-grey: var(--shade-grey-medium);
	--border-radius-full: 99999rem;
	--border-radius-round: 2.8125rem;
	--border-radius-inner: 1rem;
	--border-radius-button: var(--border-radius-full);
	--border-radius-input: var(--border-radius-button);
	--border-radius-textarea: var(--border-radius-button);
	--border-radius-image: var(--border-radius-full);

	--shadow: 0px 0px 0.75rem 0px rgba(0, 0, 0, 0.1);
	--shadow-light: var(--shadow);
	--shadow-dark: var(--shadow);

	--glow-intensity: 1.5;
	--glow-blur-intensity: 0.25rem;
	--glow-blur: blur(var(--glow-blur-intensity));
	--glow-light-width: 0.25rem;
	--glow-light-color: var(--color-main-glow);
	--glow-light: var(--glow-light-width) solid var(--glow-light-color);
	--glow-shadow-width: calc(var(--glow-light-width) * var(--glow-intensity));
	--glow-shadow-color: var(--color-main);
	--glow-shadow: var(--glow-shadow-width) solid var(--glow-shadow-color);
	--glow-transition: var(--transition-default);

	--glass-blur: blur(0.75rem);
	--glass-background: linear-gradient(150deg, rgba(74, 74, 74, 0.3), rgba(17, 17, 17, 0.3));
	--glass-border: rgba(255, 255, 255, 0.075);

	--svg-color: var(--shade-black);
	--svg-color-dark: var(--shade-white);
	--svg-stroke-width: 2px;

	--table-color-white-offset: color-mix(in srgb, var(--shade-white) 95%, var(--shade-black));
	--table-color-light-offset: color-mix(in srgb, var(--shade-grey-bright) 92.5%, var(--shade-black));
	--table-color-dark-offset: color-mix(in srgb, var(--shade-black) 95%, var(--shade-white));

	--font-color-default: var(--shade-black);
	--font-color-default-dark: var(--shade-white);
	--font-color-default-grey: var(--shade-grey-medium);
	--font-color-highlight: var(--color-second);
	--font-color-highlight-dark: var(--color-second);
	--font-color-kicker: var(--color-main);
	--font-color-kicker-dark: var(--shade-white);
	--font-color-h1: var(--shade-black);
	--font-color-h1-dark: var(--shade-white);
	--font-color-h2: var(--font-color-h1);
	--font-color-h2-dark: var(--font-color-h1-dark);
	--font-color-h3: var(--font-color-h2);
	--font-color-h3-dark: var(--font-color-h2-dark);
	--font-color-h4: var(--font-color-h3);
	--font-color-h4-dark: var(--font-color-h3-dark);
	--font-color-h5: var(--font-color-h4);
	--font-color-h5-dark: var(--font-color-h4-dark);
	--font-color-h6: var(--font-color-h5);
	--font-color-h6-dark: var(--font-color-h5-dark);
	--font-color-disabled: var(--shade-grey-medium);
	--font-color-disabled-dark: var(--shade-grey-medium);
	--font-color-link: var(--color-second);
	--font-color-link-hover: var(--shade-black);
	--font-color-link-dark: var(--color-second);
	--font-color-link-dark-hover: var(--shade-white);
	--font-color-primary: var(--shade-white);
	--font-color-primary-hover: var(--shade-white);
	--font-color-primary-dark: var(--shade-black);
	--font-color-primary-dark-hover: var(--shade-black);
	--font-color-secondary: var(--color-second);
	--font-color-secondary-hover: var(--shade-white);
	--font-color-secondary-dark: var(--color-second);
	--font-color-secondary-dark-hover: var(--shade-black);
	--font-color-menu: var(--shade-black);
	--font-color-menu-hover: var(--color-second);
	--font-color-menu-dark: var(--shade-white);
	--font-color-menu-dark-hover: var(--color-second);
	--font-color-discreet-hover: var(--color-second);
	--font-color-discreet-dark-hover: var(--color-second);
	--font-color-transition: var(--transition-default);

	--font-family-default: 'OpenSans', sans-serif;
	--font-family-kicker: 'OpenSans', sans-serif;
	--font-family-h1: 'OpenSans', sans-serif;
	--font-family-h2: var(--font-family-h1);
	--font-family-h3: var(--font-family-h1);
	--font-family-h4: var(--font-family-h1);
	--font-family-h5: var(--font-family-h1);
	--font-family-h6: var(--font-family-h1);
	--font-family-button: var(--font-family-default);

	--line-height-default: 1.5em;
	--line-height-kicker: 1.2em;
	--line-height-h1: 1.1em;
	--line-height-h2: var(--line-height-h1);
	--line-height-h3: var(--line-height-h1);
	--line-height-h4: var(--line-height-h1);
	--line-height-h5: var(--line-height-h1);
	--line-height-h6: var(--line-height-h1);
	--line-height-button: 1.5em;

	--font-weight-default: 300;
	--font-weight-kicker: 800;
	--font-weight-h1: 800;
	--font-weight-h2: var(--font-weight-h1);
	--font-weight-h3: var(--font-weight-h1);
	--font-weight-h4: var(--font-weight-h1);
	--font-weight-h5: var(--font-weight-h1);
	--font-weight-h6: var(--font-weight-h1);
	--font-weight-link: 800;
	--font-weight-button: 800;

	--font-size-s: 0.875rem;
	--font-size-default: 1.125rem;
	--font-size-l: 1.375rem;
	--font-size-cta: 5rem;
	--font-size-kicker: 0.875rem;
	--font-size-h1: 3.75rem;
	--font-size-h2: 3rem;
	--font-size-h3: 1.75rem;
	--font-size-h4: 1.5rem;
	--font-size-h5: 1.25rem;
	--font-size-h6: 1.125rem;
	--font-size-h1p: var(--font-size-l);
	--font-size-button: var(--font-size-default);

	--text-transform-default: none;
	--text-transform-kicker: none;
	--text-transform-h1: none;
	--text-transform-h2: none;
	--text-transform-h3: none;
	--text-transform-h4: var(--text-transform-h3);
	--text-transform-h5: var(--text-transform-h3);
	--text-transform-h6: var(--text-transform-h3);
	--text-transform-button: none;

	--text-decoration-link: none;
	--text-outline-width: 0.125rem;

	--text-glow: 0px 0px 6px rgba(255, 159, 25, 0.70), 0px 0px 34px #FF9F19;	
	--text-glow-color: var(--color-main-glow);
	
	--text-gap-kicker: 0.75rem;
	--text-gap-h1: 1.875rem;
	--text-gap-h2: 1.875rem;
	--text-gap-h3: 0.75rem;
	--text-gap-h4: 0.625rem;

	--form-gap: 1.25rem;
	--form-input-padding: 0.75rem 1.5rem;
	--form-input-padding-left: 1.5rem;
	--form-input-background: var(--bg-light);
	--form-input-background-light: var(--bg-white);
	--form-input-background-dark: var(--bg-white);
	--form-input-border: var(--shade-grey-bright);
	--form-input-border-light: var(--shade-grey-light);
	--form-input-border-dark: var(--shade-white);
	--form-input-border-active: var(--color-main);
	--form-input-border-dark-active: var(--color-second);

	--button-container-margin-top: 3.75rem;
	--button-container-margin-top-s: 1.875rem;
	--button-container-gap: 1.25rem;
	--button-padding: 0.75rem 1.5rem;
	--button-transition: var(--transition-default);
	--button-primary-background: var(--color-second);
	--button-primary-background-hover: var(--color-main);
	--button-primary-background-dark: var(--color-second);
	--button-primary-background-dark-hover: var(--shade-white);
	--button-secondary-border-width: var(--border-default-width);
	--button-secondary-border: var(--button-secondary-border-width) solid var(--button-primary-background);
	--button-secondary-border-hover: var(--button-primary-background-hover);
	--button-secondary-border-dark: var(--button-primary-background-dark);
	--button-secondary-border-dark-hover: var(--button-primary-background-dark-hover);
	--button-icon-size: var(--font-size-button);
	--button-icon-gap: 0.75rem;
	--button-icon-stroke-width: var(--border-default-width);

	--icon-size-xxs: 1rem;
	--icon-size-xs: 1.75rem;
	--icon-size-s: 2.5rem;
	--icon-size-default: 3.125rem;
	--icon-size-l: 3.75rem;
	--icon-size-xl: 5rem;
	
	--nav-height: 5rem;
}
@media only screen and (min-width: 3600px) {
    :root {
        --grid-width: 3000px;
    }
}
@media only screen and (max-width: 2700px) and (min-width: 2400px) {
    :root {
        --grid-width: 2100px;
    }
}
@media only screen and (max-width: 1800px) {
	:root {
		--grid-width: 1492px;
	}
}
/* new */
@media only screen and (max-width: 1720px) {
	:root {
		--grid-width: 1430px;
	}
}
@media only screen and (max-width: 1640px) {
	:root {
		--grid-width: 1362px;
	}
}
/* new */
@media only screen and (max-width: 1560px) {
	:root {
		--grid-width: 1322px;
	}
}
@media only screen and (max-width: 1480px) {
	:root {
		--grid-width: 1218px;
	}
}
/* new */
@media only screen and (max-width: 1340px) {
	:root {
		--grid-width: 1124px;
	}
}
/* new */
@media only screen and (max-width: 1270px) {
	:root {
		--grid-width: 1004px;
	}
}
@media only screen and (max-width: 1200px) {
	:root {
		--grid-width: 950px;
	}
}
/* new */
@media only screen and (max-width: 1080px) {
	:root {
		--grid-width: 900px;
	}
}
@media only screen and (max-width: 992px) {
	:root {
		--grid-gutter: 2.5rem;
		--grid-gutter-small: 1.25rem;
		--grid-width: calc(100vw - 8rem);
		--grid-width: calc(100cqw - 8rem);
		--grid-padding: 4rem;

		--nav-height: 6rem;

		--section-padding-s: 6.25rem;
		--section-padding-default: 7.5rem;
		--section-padding-l: 8.75rem;
		
		/*
		--font-size-h1: 6.25rem;
		*/
	}
}
@media only screen and (max-width: 688px) {
	:root {
		--grid-gutter: 1.75rem;
		--grid-gutter-small: 1.25rem;
		--grid-width: calc(100vw - 4rem);
		--grid-width: calc(100cqw - 4rem);
		--grid-padding: 2rem;

		--section-padding-s: 5rem;
		--section-padding-default: 6.25rem;
		--section-padding-l: 7.5rem;
		
		/*
		--font-size-h1: 5rem;
		*/
	}
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	:root {
		--section-gap: 2.5rem;

		--font-size-h1: 3.25rem;
		--font-size-h2: 2.75rem;
		--font-size-h3: 1.75rem;

		--text-gap-h2: 1rem;
		--text-gap-h3: 0.5rem;
		--text-gap-h4: 0.25rem;

		--gap-l: 3.75rem;

		--button-container-margin-top: 1.75rem;

		/*
		--padding-xxs: 0.5rem;
		--padding-xs: 1.25rem;
		--padding-s: 1.75rem;
		--padding-default: 2.5rem;
		--padding-l: 3.75rem;
		--padding-xl: 5rem;
		--padding-xxl: 6.25rem;
		
		--gap-xxs: 0.5rem;
		--gap-xs: 1.25rem;
		--gap-s: 1.75rem;
		--gap-default: 2.5rem;
		--gap-l: 3.75rem;
		--gap-xl: 5rem;
		--gap-xxl: 6.25rem;
		
		--section-gap: 2.5rem;
		
		--font-size-default: 1rem;
		--font-size-l: 1.25rem;
		--font-size-cta: 2.5rem;
		--font-size-kicker: 1.125rem;
		--font-size-h1: 5rem;
		--font-size-h2: 2.5rem;
		--font-size-h3: 2rem;
		--font-size-h4: 1.5rem;
		--font-size-h5: 1.375rem;
		--font-size-h6: 1.25rem;
		--font-size-h1p: 1.25rem;

		--text-outline-width: 0.1rem;
		
		--text-gap-h1: 1rem;
		--text-gap-h2: 0.75rem;
		--text-gap-h3: 0.5rem;
		--text-gap-h4: 0.25rem;

		--button-container-margin-top: 1.25rem;
		
		--icon-size-xs: 1.25rem;
		--icon-size-s: 1.75rem;
		--icon-size-default: 2.5rem;
		--icon-size-l: 3.75rem;
		--icon-size-xl: 5rem;
		*/
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	:root {
		--section-gap: 1.75rem;

		--font-size-s: 0.8rem;
		--font-size-h1: 2.25rem;
		--font-size-h2: 2rem;
		--font-size-h3: 1.5rem;
		--font-size-h4: 1.375rem;
		--font-size-h5: 1.25rem;
		--font-size-h6: 1rem;
		--font-size-h1p: var(--font-size-default);


		--text-gap-h1: 1rem;
		--text-gap-h2: 0.75rem;

		--gap-l: 2.5rem;

		--button-container-margin-top: 1.25rem;

		/*
		--padding-xxs: 0.75rem;
		--padding-xs: 1rem;
		--padding-s: 1.25rem;
		--padding-default: 1.75rem;
		--padding-l: 2.5rem;
		--padding-xl: 3.75rem;
		--padding-xxl: 5rem;
		
		--gap-xxs: 0.75rem;
		--gap-xs: 1rem;
		--gap-s: 1.25rem;
		--gap-default: 1.75rem;
		--gap-l: 2.5rem;
		--gap-xl: 3.75rem;
		--gap-xxl: 5rem;
		
		--section-gap: 1.75rem;

		--font-size-l: 1.125rem;
		--font-size-cta: 2.5rem;
		--font-size-h1: 4.5rem;
		--font-size-h2: 2rem;
		--font-size-h3: 1.5rem;
		--font-size-h4: 1.375rem;
		--font-size-h5: 1.25rem;
		--font-size-h6: 1.125rem;
		--font-size-h1p: 1.125rem;

		--text-gap-h1: 1rem;
		--text-gap-h2: 0.75rem;
		--text-gap-h3: 0.5rem;
		--text-gap-h4: 0.25rem;
		*/
	}
}