:root {

	--header-height-mobile: 60px;
	--header-height-desktop: 80px;

	--default-font-color: #262626;/*#2d2d2d;*/
	--default-font-color-light: #555;
	--muted: var(--default-font-color-light);
	--font-family-regular: 'ApproachKoelnRegular', Arial, sans-serif;
	--font-family-semibold: 'ApproachKoelnSemiBold', Arial, sans-serif;
	--font-family-bold: 'ApproachKoelnBold', Arial, sans-serif;
	--default-font-family: var(--font-family-regular);

/* ACHTUNG! 
semibold is buggy für 28 (1.75rem) & 29 (1.8125rem) px
bold is buggy für 39 (2.4375) & 40 (2.5rem) px
*/


	/* mobile first */
	--font-size: 1.125rem; /*previously 1rem*/
	--line-height: 1.5rem;


	/* (min-width: 576px) */
	--font-size-sm: var(--font-size);
	--line-height-sm: var(--line-height);

	/* (min-width: 768px) */
	--font-size-md: 1.125rem;
	--line-height-md: 1.5rem;

	/* (min-width: 992px) */
	--font-size-lg: var(--font-size-md);
	--line-height-lg: var(--line-height-md);

	/* (min-width: 1200px) */
	--font-size-xl: 1.25rem;
	--line-height-xl: 2.1rem;

	/* (min-width: 1400px) */
	--font-size-xxl: 1.375rem;
	--line-height-xxl: var(--line-height-xl);

	/* Abstände - margins */

	/* -- mobil --*/
	--margin-default-sm: 1rem; /*default Abstand von semantisch zusammengehörenden Elementen */
	--margin-extra-sm: 2.5rem; /* Abstand von semantisch voneinander unabhängigen Elementen */
	--margin-special-sm: 0.625rem; /* Sonderabstände bei Listen u.ä. */

	/* für große sektionsabstände (.section-break elemente) */
	--bigger-spacer:3rem;

	/* Farben - Colors */	
	--red: #ee0000;
	--red-light: #d60909;
	--red-dark: #a01e28;
	--primary: #ee0000;
	--primary-light: #d60909;
	--primary-dark: #a01e28;
	--blue: #008ceb;
	--blue-light: #285f8c;
	--blue-dark: #285f8c;
	--purple: #873cc3;
	--purple-light: #d60909;
	--purple-dark: #552d73;
	--green: #00d282;
	--green-light: #d60909;
	--green-dark: #3c914b;
	--yellow: #ffd200;
	--yellow-light: #d60909;
	--yellow-dark: #af912d;
	--orange: #ff6e19;
	--orange-light: #d60909;
	--orange-dark: #a55023;

	

	--main-interaction: var(--red);
	--main-interaction-hover: #ee000080;
	--main-interaction-light: #ee000090;
	--main-interaction-hover-light: #ee0000;

	--default-link-border: 2px solid var(--main-interaction-light);
	--default-link-hover-border: 2px solid var(--main-interaction-hover-light);
	
	--border-color-dark:#2d2d2d;
	--border-color-light:#eae8e3;

	--gray-border: 3px solid var(--border-color-light);
	--gray-background: #eee;
	--gray-background-light: #f3f3f3;
	--gray-link: #D0CDCA;
	--box-shadow: 0 0.5rem 1rem #0003;

	--blue-background-box: #E9EEF3;
	--gray-background-box: #FAF7F5;

}