/* ##################################################################### */
/* #### Custom properties (variables) ################################## */

:root {
	/* ### Farben ### */
	/* this rgb_color_values can be used in rgb(…) and rgba(…) */
	--rgb_color_value_background_base:177,176,119;						/* Label: Hintergrundfarbe der Website */
	--rgb_color_value_base:73,81,66; 									/* Label: Basisfarbe, u. a. für Fließtext */
	--rgb_color_value_action:82,14,30;									/* Label: Action-Farbe, u. a. für Links */
	--rgb_color_value_background_light_01:255,255,255;					/* Label: Hintergrundfarbe "hell", u. a. für Footer- / Boxen-Hintergrund */
	--rgb_color_value_border:200,200,200;                               /* Label: Rahmenfarbe */
	/* --rgb_color_value_success:34,139,34;                                Label: Grün als Bestätigung/Erfolg, für zukünftige Features */
	--rgb_color_value_warning:165,5,5;									/* Label: Fehlermeldungen, i.d.R. rot */

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

	/* ### Schriftart ### */
	--font-family-base: izoard, Tahoma, Geneva, sans-serif;				/* Label: Schriftart */

	/* ### Zeilenhöhen ### */
	--line-height-5:1.15em;												/* Label: Zeilenhöhe für Schriftgröße 5 */
	--line-height-4:1.15em;												/* Label: Zeilenhöhe für Schriftgröße 4 */
	--line-height-3:1.3em;												/* Label: Zeilenhöhe für Schriftgröße 3 */
	--line-height-2:1.3em;												/* Label: Zeilenhöhe für Schriftgröße 2 */
	--line-height-1:1.4em;												/* Label: Zeilenhöhe für Schriftgröße 1 */
	--line-height-0:1.4em;												/* Label: Zeilenhöhe für Schriftgröße 0 */
	--line-height-s-1:1.4em;											/* Label: Zeilenhöhe für Schriftgröße S1 */
	--line-height-s-2:1.4em;											/* Label: Zeilenhöhe für Schriftgröße S2 */

	/* ### Sonstiges ### */
	--gap: clamp(16px, calc(1.6667vw + 10.667px), 24px);				/* von 16px @ 320px bis 24px @ 800px. Label: Abstände */
	--gap-s: 12px;														/* Label: Abstände klein */
	--box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 					   /* Label: Schatten */
    --box-shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.25);              /* Label: Schatten stark, u. a. für Button-Hover */
	--border-radius: 8px;												/* Label: Rahmenradius */
	--border-radius-s: 4px;												/* Label: Rahmenradius klein */
}


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

	/*
	normal-normal, normal-italic, bold-normal, bold-italic
	Don’t link to SVG versions of the fonts. Obviously this way older iOS devices (and old versions of Chrome and Opera) won’t render your nice fonts, but Safari for iOS won’t crash either.
	*/
    @font-face {
        font-display: swap;
        font-family: 'izoard';
        font-style: normal;
        font-weight: 400;
        src: url('../Fonts/izoard-regular-webfont.woff2') format('woff2');
    }
	/* Unterschied siehe https://www.atipofoundry.com/fonts/izoard
    @font-face {
        font-display: swap;
        font-family: 'izoardsoft';
        font-style: normal;
        font-weight: 400;
        src: url('../Fonts/izoardsoft-regular-webfont.woff2') format('woff2');
    }
	*/

    /*
		@font-face {
			font-display: swap;
			font-family: 'Open Sans';
			font-style: normal;
			font-weight: 400;
			src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2');
		}
		@font-face {
			font-display: swap;
			font-family: 'Open Sans';
			font-style: italic;
			font-weight: 400;
			src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2');
		}
		@font-face {
			font-display: swap;
			font-family: 'Open Sans';
			font-style: normal;
			font-weight: 700;
			src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2');
		}
		@font-face {
			font-display: swap;
			font-family: 'Open Sans';
			font-style: italic;
			font-weight: 700;
			src: url('../fonts/open-sans-v40-latin-700italic.woff2') format('woff2');
		}
	*/