/** @format */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src:
		local(''),
		url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
		url('../fonts/open-sans-v34-latin-regular.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	src:
		local(''),
		url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'),
		url('../fonts/open-sans-v34-latin-600.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src:
		local(''),
		url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'),
		url('../fonts/open-sans-v34-latin-700.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src:
		local(''),
		url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'),
		url('../fonts/open-sans-v34-latin-italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 600;
	src:
		local(''),
		url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'),
		url('../fonts/open-sans-v34-latin-600italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 700;
	src:
		local(''),
		url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'),
		url('../fonts/open-sans-v34-latin-700italic.woff') format('woff');
}

@font-face {
	font-family: 'Icons';
	font-style: normal;
	font-weight: normal;
	src:
		local(''),
		url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
		url('../fonts/MaterialIcons-Regular.woff') format('woff');
}

:root {
	/*
	---COLORS---
	*/
	--color-black: #30373d;
	--color-white: #fff;
	--color-light-grey: #f4f4f4;
	--color-dark-grey: #8c8c8c;
	--color-orange: #f07300;
	--color-dark-orange: #a85000;

	--color-light-grey--transparent: rgba(244, 244, 244, 0);

	/*
	---FONT FAMILIES---
	*/
	--ff-primary-font: 'Open Sans', Helvetica, Arial, sans-serif;
	--ff-icon-font: 'Icons', sans-serif;

	/*
	---FONT SIZES---
	*/
	--fs-t1: 3.2rem;
	--fs-t1: clamp(2rem, 6vw, 3.2rem);
	--fs-t2: 2.3rem;
	--fs-t2: clamp(1.9rem, 4.6vw, 2.3rem);
	--fs-t3: 1.4rem;
	--fs-t3: clamp(1.4rem, 3.4vw, 1.4rem);
	--fs-t4: 1.1rem;
	--fs-t4: clamp(1rem, 2.6vw, 1.06rem);
	--fs-t5: 1rem;

	--fs-icon: 1.4em;
	--fs-quote: 10rem;
	--fs-quote: clamp(8rem, 20vw, 12rem);

	/*
	---SPACING / GAPS---
	*/

	--viewport-height: 100vh;

	--vgap-universal: 2rem;
	--vgap-universal: clamp(1rem, 2.6vh, 2rem);
	--hgap-universal: 2rem;
	--hgap-universal: clamp(1rem, 2.6vw, 2rem);

	--vgap_spacer: 6rem;
	--vgap_spacer: clamp(3rem, 7.8vh, 6rem);

	--wrapper-padding: 1rem;
	--wrapper-padding: clamp(1rem, 4vw, 10rem);

	--hgap-button: 2rem;
	--vgap-button: 0.7rem;

	--gap-round-box: 1.3rem;
	--gap-round-box: clamp(0.9rem, 1.5vw, 1.3rem);

	--vgap-input: 0.7rem;
	--hgap-input: 1.3rem;

	--size-round: 52px;
	--size-round: clamp(40px, 7vw, 52px);

	--hgap-accordion-headline: 1rem;

	--radius-index-numbering-background: 1.75rem;

	/*
	---Border Radius---
	*/
	--br-box: 20px;
	--br-img: 12px;
	--br-input: 6px;
	--br-pill: 99em;
}

body {
	/*
	---Header Menu Height total---
	*/
	--height-of-fixed-elements: calc(var(--header-height, 0px) + var(--wpadminbar-height, 0px));
}