/* =========================================================
   THEME
   ========================================================= */

:root {
	/* Grundfarben */

	--bg-color: #ffffff;
	--bg-color-rgb: 255, 255, 255;

	--font-color: #222222;
	--font-color-dark: #222222;
	--font-color-light: #ffffff;


	/* Markenfarben */

	--logo-color-1: #A221B0;
	--logo-color-1-dark: #670073;
	--logo-color-1-light: #DD63EB;

	--logo-color-2: #f58220;


	/* Accentfarben */

	--accent-color-1: #A0EADE;
	--accent-color-2: #DDFCAD;


	/* Neutral */

	--neutral-color-light: #f5f5f5;
	--neutral-color-dark: #333333;


	/* Überschriften */

	--h1-color: var(--logo-color-1-dark);
	--h2-color: var(--logo-color-1);
	--h3-color: var(--logo-color-1);

	--link-color: var(--logo-color-1);


	/* Linien / Rahmen */

	--border-color: #cccccc;

	--border-radius: 30;
	--border-radius-small: 5;

	--image-border-radius: var(--border-radius);
	--card-border-radius: var(--border-radius);
	--button-border-radius: var(--border-radius);


	/* Abstände / Breiten */

	--content-width: 1500px;
	--content-block-padding-y: 4rem;


	/* Schrift */

	--font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
	--heading-font-family: 'Roboto', Arial, Helvetica, sans-serif;
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

body {
	font-family: var(--font-family);
}


h1,
h2,
h3 {
	font-family: var(--heading-font-family);
}