/* ##################################################################### */
/* #### custom properties (variables) ################################## */

:root {
	/* this rgb_color_values can be used in rgb(…) and rgba(…) */
	--rgb_color_value_base:0,0,0; 										/* u. a. Fließtext */
	--rgb_color_value_action:191,23,30;									/* u. a. Links */
	--rgb_color_value_background_light_01:242,242,242;					/* u. a. heller Footer- / Boxen-Hintergrund */
	--rgb_color_value_warning:165,5,5;									/* Fehlermeldungen, i.d.R. rot */
	--background_dark_gradient:linear-gradient(to bottom,#003d6a,#0070a3);

	/* clamp von 320px bis 1600px ( https://clamp.font-size.app/ )   	(Anwendungsbeispiel) */
	--font-size-5:clamp(2.1875rem, 1.9844rem + 1.0156vw, 3rem); 		/* 35-48px (H1) */
	--font-size-4:clamp(1.8125rem, 1.6563rem + 0.7813vw, 2.4375rem); 	/* 29-39px (H2) */
	--font-size-3:clamp(1.5rem, 1.3906rem + 0.5469vw, 1.9375rem);		/* 24-31px (H3)*/
	--font-size-2:clamp(1.375rem, 1.2813rem + 0.4688vw, 1.75rem); 		/* 22-28px (Intro, Blockquote) */
	--font-size-1:clamp(1.1875rem, 1.0938rem + 0.4688vw, 1.5625rem); 	/* 19-25px (H4) */
	--font-size-0:clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem); 			/* 16–20px (Fließtext) */
	--font-size-s-1:clamp(0.875rem, 0.8281rem + 0.2344vw, 1.0625rem); 	/* 14-17px (Kacheln) */
	--font-size-s-2:clamp(0.8125rem, 0.7813rem + 0.1563vw, 0.9375rem); 	/* 13-15px (small) */

	--line-height-5:1.15em;
	--line-height-4:1.15em;
	--line-height-3:1.3em;
	--line-height-2:1.3em;
	--line-height-1:1.4em;
	--line-height-0:1.4em;
	--line-height-s-1:1.4em;
	--line-height-s-2:1.4em;

	--gap: clamp(16px, calc(1.6667vw + 10.667px), 24px);				/* Spaltenabstände – von 16px @ 320px bis 24px @ 800px */
	--gap-s: 12px;
	--box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}


/* ##################################################################### */
/* #### Fonts ########################################################## */

	/* open-sans-regular - latin */
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 400;
		src: url('../Fonts/open-sans-v43-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}
	/* open-sans-italic - latin */
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 400;
		src: url('../Fonts/open-sans-v43-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}
	/* open-sans-600 - latin */
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 600;
		src: url('../Fonts/open-sans-v43-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}
	/* open-sans-600italic - latin */
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 600;
		src: url('../Fonts/open-sans-v43-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}
	/* open-sans-800 - latin */
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 700;
		src: url('../Fonts/open-sans-v43-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}
	/* open-sans-800italic - latin */
	@font-face {
		font-display: swap;
		font-family: 'Open Sans';
		font-style: italic;
		font-weight: 700;
		src: url('../Fonts/open-sans-v43-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	}


/* ##################################################################### */
/* #### Custom CSS ##################################################### */

    /* … */