/*
Basisdefinition fuer die Variablen (Farben und Abstaende)
Die CSS-Styles werden im Frontend und im Backend-Block-Editor verwendet
*/




/* -------------------------------------------------------------------------- */
/*	Schriften als Variable
/* -------------------------------------------------------------------------- */

:root {
	--font-general-family:	'Open Sans', Arial, Verdana, sans-serif;
	--font-general-regular:	300;
	--font-general-bold:	700;
	--font-heading-family:	'Open Sans', Arial, Verdana, sans-serif;
	--font-heading-regular:	300;
	--font-heading-bold:	700;
	}




/* -------------------------------------------------------------------------- */
/*	Farbdefinition als Variable
/* -------------------------------------------------------------------------- */

:root {
	--color-accent:				#2475b8;
	--color-accent-medium:		#7fb8d9;
	--color-accent-light:		#ebf4f9;
	--color-second:				#666666;
	--color-second-light:		#999999;
	--color-light:				#f7f7f7; /* heller Hintergrund */

	--color-general-bg:			#ffffff; /* Hintergrundfarbe allgemein */
	--color-general-txt:		#000000; /* Textfarbe allgemein */
	--color-general-link:		#2475b8; /* Akzentfarbe > Links, Bullets, Mark, Auswahlfarbe */

	--color-footer-bg:			#666666; /* Hintergrund Footer */
	--color-footer-txt:			#ffffff; /* Textfarbe Footer */
	--color-footer-link:		#80b3ff; /* Akzentfarbe Footer > Footer Links, Rollover */

	--color-nav-start-bg:		transparent;
	--color-nav-start-txt:		white; /* wie Textfarbe allgemein */
	--color-nav-start-img-bg:	transparent;
	--color-nav-start-img-txt:	white;
	--color-nav-scroll-bg:		#ffffff; /* wie Hintergrund allgemein */
	--color-nav-scroll-txt:		white; /* wie Textfarbe allgemein */

	--color-nav-color-link:		white; /* Akzentfarbe Navigation > Aktive Links, Rollover */

	--color-subnav-bg:			#2475b8; /* wie Hintergrund allgemein */
	--color-subnav-txt:			#ffffff; /* wie Textfarbe allgemein */
	--color-subnav-hover:		#00000020; /* mit 10% Transparenz */
	}




/* -------------------------------------------------------------------------- */
/*	Vertikale Abstaende als Variable
/* -------------------------------------------------------------------------- */

:root {
	--spacer-big: 2.5rem;
	--spacer-small: 1.5rem;
	--spacer-text: 0.75rem;
	}

	@media (min-width: 600px) {
			:root {
				--spacer-big: 3rem;
				--spacer-small: 1.5rem;
				--spacer-text: 1rem;
				}
			}
	@media (min-width: 782px) {
			:root {
				--spacer-big: 4rem;
				--spacer-small: 2rem;
				--spacer-text: 1.5rem;
				}
			}
	@media (min-width: 1600px) {
			:root {
				--spacer-big: 5rem;
				--spacer-small: 2rem;
				--spacer-text: 1.5rem;
				}
			}