:root {

/* media queries responsive steps */
/*
	step	min-width
	------------------------
	xxl		1160
	xl		 860
	lg		 660
	md		 530
	sm		 440
	xs		 400
	xxs		 360
*/

/* color settings */
/*
	red light			#F2938E
	red medium		#E15D56
	red dark			#D02E26
	red dark2			#A9150C
	
	green light		#D4E5A3
	green medium	#B4D45A
	green dark1		#639F59
	green dark2		#637F14
	
	blue light		#619EE4
	blue medium		#408DE4
	blue dark1		#336FB2
	blue dark2		#1B4F89
	
	
*/



/* manager settings */
	--man-col-light:#619EE4;
	--man-col-medium:#408DE4;
	--man-col-dark1:#336FB2;
	--man-col-dark2:#1B4F89;








/*	---------------------------------------------------
	padding/margin
	--------------------------------------------------- */
	--xxxs: calc(1px + (2 - 1) * ((100vw - 320px) / (1200 - 320)));
	--xxs: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));
	--xs: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));
	--sm: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));
	--md: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));
	--lg: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));
	--xl: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));
	--xxl: calc(30px + (90 - 30) * ((100vw - 320px) / (1200 - 320)));

	--xxxs-max: 2px;
	--xxs-max: 6px;
	--xs-max: 12px;
	--sm-max: 24px;
	--md-max: 36px;
	--lg-max: 48px;
	--xl-max: 60px;
	--xxl-max: 90px;


	--col-grey-light:#f1f1f1;

	--col-red-light:#F2938E;
	--col-red-medium:#E15D56;
	--col-red-dark1:#D02E26;
	--col-red-dark2:#A9150C;

	--col-green-light:#D4E5A3;
	--col-green-medium:#B4D45A;
	--col-green-dark1:#639F59;
	--col-green-dark2:#637F14;

	--col-blue-light:#619EE4;
	--col-blue-medium:#408DE4;
	--col-blue-dark1:#336FB2;
	--col-blue-dark2:#1B4F89;


/*	---------------------------------------------------
	gap
	--------------------------------------------------- */
	--gap-xxs: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));
	--gap-xs: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));
	--gap-sm: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));
	--gap-md: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));
	--gap-lg: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));
	--gap-xl: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));
	--gap-xxl: calc(30px + (90 - 30) * ((100vw - 320px) / (1200 - 320)));

	--gap-xxs-max: 6px;
	--gap-xs-max: 12px;
	--gap-sm-max: 24px;
	--gap-md-max: 36px;
	--gap-lg-max: 48px;
	--gap-xl-max: 60px;
	--gap-xxl-max: 90px;


/*	---------------------------------------------------
	block width
	--------------------------------------------------- */
	--block-width-xs: 680px;
	--block-width-sm: 840px;
	--block-width-md: 1020px;
	--block-width-lg: 1200px;
	--block-width-xl: 1400px;
	--block-width-xxl: 1600px;
	--block-width-full: 100%;


/*	---------------------------------------------------
	radius
	--------------------------------------------------- */
	--rad1:5px;
	--rad2:8px;
	--rad3:12px;


/*	---------------------------------------------------
	basics [WIP]
	--------------------------------------------------- */
	--link-col: #064771;
	--link-active-col: #E08000;
	--link-hover-col: #ccc;

	--btn1-col: #399A89;
	--btn1-hover-col: #348C7C;
	--btn1-text-col: #fff;


/*	---------------------------------------------------
	style types

	name			coloring		stages
	style1		neutral			light, medium, dark
	style2		red					light, medium, dark
	


	rot:	#D02E26
	grün:	#9FC044
	blau:	#336FB2
	--------------------------------------------------- */
	/* white */
	--st1-light-back-col: #ffffff;
	--st1-light-text-col:#000;
	--st1-light-h1-col: #0054AB;
	--st1-light-h2-col: #333;
	--st1-light-h3-col: #0054AB;
	--st1-light-h4-col: #333;
	--st1-light-h5-col: #0054AB;
	--st1-light-h6-col: #333;
	--st1-light-link-col:#639F59;
	--st1-light-link-decor: none;
	--st1-light-link-hover-col: #064771;
	--st1-light-link-hover-decor: underline;

	--st1-medium-back-col: #f1f1f1;
	--st1-medium-text-col:#000;
	--st1-medium-h1-col: #0054AB;
	--st1-medium-h2-col: #333;
	--st1-medium-h3-col: #0054AB;
	--st1-medium-h4-col: #333;
	--st1-medium-h5-col: #0054AB;
	--st1-medium-h6-col: #333;
	--st1-medium-link-col:#666;
	--st1-medium-link-decor: none;
	--st1-medium-link-hover-col: #666;
	--st1-medium-link-hover-decor: underline;

	--st1-dark-back-col: #555555;
	--st1-dark-text-col:#fff;
	--st1-dark-h1-col: #fff;
	--st1-dark-h2-col: #ccc;
	--st1-dark-h3-col: #fff;
	--st1-dark-h4-col: #ccc;
	--st1-dark-h5-col: #fff;
	--st1-dark-h6-col: #ccc;
	--st1-dark-link-col:#ddd;
	--st1-dark-link-decor: none;
	--st1-dark-link-hover-col: #ddd;
	--st1-dark-link-hover-decor: underline;

	/* red */
	--st2-light-back-col: #ffffff;
	--st2-light-text-col:#000;
	--st2-light-h1-col: #0054AB;
	--st2-light-h2-col: #333;
	--st2-light-h3-col: #0054AB;
	--st2-light-h4-col: #333;
	--st2-light-h5-col: #0054AB;
	--st2-light-h6-col: #333;
	--st2-light-link-col:#639F59;
	--st2-light-link-decor: none;
	--st2-light-link-hover-col: #064771;
	--st2-light-link-hover-decor: underline;

	--st2-medium-back-col: #f1f1f1;
	--st2-medium-text-col:#000;
	--st2-medium-h1-col: #0054AB;
	--st2-medium-h2-col: #333;
	--st2-medium-h3-col: #0054AB;
	--st2-medium-h4-col: #333;
	--st2-medium-h5-col: #0054AB;
	--st2-medium-h6-col: #333;
	--st2-medium-link-col:#639F59;
	--st2-medium-link-decor: none;
	--st2-medium-link-hover-col: #064771;
	--st2-medium-link-hover-decor: underline;

	--st2-dark-back-col: #555555;
	--st2-dark-text-col:#fff;
	--st2-dark-h1-col: #fff;
	--st2-dark-h2-col: #ccc;
	--st2-dark-h3-col: #fff;
	--st2-dark-h4-col: #ccc;
	--st2-dark-h5-col: #fff;
	--st2-dark-h6-col: #ccc;
	--st2-dark-link-col:#ccc;
	--st2-dark-link-decor: none;
	--st2-dark-link-hover-col: #ccc;
	--st2-dark-link-hover-decor: underline;

 
	/* green */
	--st3-light-back-col: #fcfcfc;
	--st3-light-text-col:#000;
	--st3-light-link-decor: none;
	--st3-light-link-hover-col:#0095db;


	/* blue */
	--st4-light-back-col: #f1f1f1;
	--st4-light-text-col:#000;
	--st4-light-h1-col: #0054AB;
	--st4-light-h2-col: #333;
	--st4-light-h3-col: #0054AB;
	--st4-light-h4-col: #333;
	--st4-light-h5-col: #0054AB;
	--st4-light-h6-col: #333;
	--st4-light-link-col:#0095db;
	--st4-light-link-decor: none;
	--st4-light-link-hover-decor: underline;
	--st4-light-link-hover-col:#0095db;
	--st4-light-link-hover-decor: underline;

	--st4-medium-back-col: #408DE4;
	--st4-medium-text-col:#fff;
	--st4-medium-h1-col: #0054AB;
	--st4-medium-h2-col: #333;
	--st4-medium-h3-col: #0054AB;
	--st4-medium-h4-col: #333;
	--st4-medium-h5-col: #0054AB;
	--st4-medium-h6-col: #333;
	--st4-medium-link-col:#ddd;
	--st4-medium-link-decor: none;
	--st4-medium-link-hover-col: #ddd;
	--st4-medium-link-hover-decor: underline;

	--st4-dark-back-col: #336FB2;
	--st4-dark-text-col:#fff;
	--st4-dark-h1-col: #fff;
	--st4-dark-h2-col: #ccc;
	--st4-dark-h3-col: #fff;
	--st4-dark-h4-col: #ccc;
	--st4-dark-h5-col: #fff;
	--st4-dark-h6-col: #ccc;
	--st4-dark-link-col:#ccc;
	--st4-dark-link-decor: none;
	--st4-dark-link-hover-col: #ccc;
	--st4-dark-link-hover-decor: underline;


	--st-pageheader-back-col: rgb(245,245,245,.7);
	--st-pageheader-blur: 4px;
	--st-pageheader-shadow: 0 0 6px #000;
	--st-pageheader-link-hover-col:#000;




/* ########################################################## */



/*	---------------------------------------------------
	border
	--------------------------------------------------- */
	--br-1: 1px solid #444;
	--br-2: 2px solid #444;
	--br-3: 2px dotted #444;
	--br-4: 0 2px 6px 0px rgba(0,0,0,0.7);
	--br-b-4: 0 2px 6px -2px rgba(0,0,0,0.7);
	--br-l-4: -2px 0 2px -2px rgba(0,0,0,0.7);
	--br-r-4: 2px 0 2px -2px rgba(0,0,0,0.7);


/*	---------------------------------------------------
	p
	--------------------------------------------------- */
	--p-font:'Source Sans Pro', sans-serif;
	--p-font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1200 - 320)));
	--p-font-size-min:16px;
	--p-font-size-max:20px;
	--p-line-height: calc(20px + (28 - 20) * ((100vw - 320px) / (1200 - 320)));
	--p-line-height-min:20px;
	--p-line-height-max:28px;
	--p-margin-top: calc(14px + (20 - 14) * ((100vw - 320px) / (1200 - 320)));
	--p-font-weight:400;
	--p-color: #333;


/*	---------------------------------------------------
	h1
	--------------------------------------------------- */
	--h1-font:'Source Sans Pro', sans-serif;
	--h1-font-weight:400;
	--h1-font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1200 - 320)));
	--h1-font-size-min:24px;
	--h1-font-size-max:36px;
	--h1-line-height: calc(36px + (48 - 36) * ((100vw - 320px) / (1200 - 320)));
	--h1-line-height-min:36px;
	--h1-line-height-max:48px;
	--h1-text-transform: uppercase;


/*	---------------------------------------------------
	h2
	--------------------------------------------------- */
	--h2-font:'Source Sans Pro', sans-serif;
	--h2-font-weight:400;
	--h2-font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1200 - 320)));
	--h2-font-size-min:24px;
	--h2-font-size-max:36px;
	--h2-line-height: calc(36px + (48 - 36) * ((100vw - 320px) / (1200 - 320)));
	--h2-line-height-min:36px;
	--h2-line-height-max:48px;


/*	---------------------------------------------------
	h3
	--------------------------------------------------- */
	--h3-font:'Source Sans Pro', sans-serif;
	--h3-font-weight:400;
	--h3-font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1200 - 320)));
	--h3-font-size-min:20px;
	--h3-font-size-max:30px;
	--h3-line-height: calc(30px + (40 - 30) * ((100vw - 320px) / (1200 - 320)));
	--h3-line-height-min:30px;
	--h3-line-height-max:40px;


/*	---------------------------------------------------
	h4
	--------------------------------------------------- */
	--h4-font:'Source Sans Pro', sans-serif;
	--h4-font-weight:400;
	--h4-font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1200 - 320)));
	--h4-font-size-min:20px;
	--h4-font-size-max:30px;
	--h4-line-height: calc(30px + (40 - 30) * ((100vw - 320px) / (1200 - 320)));
	--h4-line-height-min:30px;
	--h4-line-height-max:40px;


/*	---------------------------------------------------
	h5
	--------------------------------------------------- */
	--h5-font:'Source Sans Pro', sans-serif;
	--h5-font-weight:400;
	--h5-font-size: calc(18px + (27 - 18) * ((100vw - 320px) / (1200 - 320)));
	--h5-font-size-min:18px;
	--h5-font-size-max:27px;
	--h5-line-height: calc(27px + (36 - 27) * ((100vw - 320px) / (1200 - 320)));
	--h5-line-height-min:27px;
	--h5-line-height-max:36px;


/*	---------------------------------------------------
	h6
	--------------------------------------------------- */
	--h6-font:'Source Sans Pro', sans-serif;
	--h6-font-weight:400;
	--h6-font-size: calc(18px + (27 - 18) * ((100vw - 320px) / (1200 - 320)));
	--h6-font-size-min:18px;
	--h6-font-size-max:27px;
	--h6-line-height: calc(27px + (36 - 27) * ((100vw - 320px) / (1200 - 320)));
	--h6-line-height-min:27px;
	--h6-line-height-max:36px;


/*	---------------------------------------------------
	coloring
	--------------------------------------------------- */
	--label-color:#0054AB;
	--label-font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1200 - 320)));
	--label-font-size-min:12px;
	--label-font-size-max:16px;
	--label-line-height: calc(14px + (20 - 14) * ((100vw - 320px) / (1200 - 320)));
	--label-line-height-min:14px;
	--label-line-height-max:20px;


/*	---------------------------------------------------
	button
	--------------------------------------------------- */
	--btn-font:'Source Sans Pro', sans-serif;
	--btn-font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1200 - 320)));
	--btn-font-size-min:12px;
	--btn-font-size-max:16px;
	--btn-font-weight:400;
	--btn-line-height: calc(16px + (24 - 18) * ((100vw - 320px) / (1200 - 320)));
	--btn-line-height-min:16px;
	--btn-line-height-max:24px;
	--btn-color-text: #fff;


/*	---------------------------------------------------
	link button (a)
	--------------------------------------------------- */
	--abtn-color-text: #000;
	--abtn-color-icon: #000;
	--abtn-color-icon-inactive: #666;
	--abtn-color-bg: #e1e1e1;
	--abtn-hover-color-bg: #d1d1d1;
	--abtn-radius:5px;
	--abtn-padding-lr: calc(5px + (10 - 5) * ((100vw - 320px) / (1200 - 320)));
	--abtn-padding-tb: calc(2px + (4 - 2) * ((100vw - 320px) / (1200 - 320)));
	--abtn-icon-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1200 - 320)));


/*	---------------------------------------------------
	tag
	--------------------------------------------------- */
	--tag-color-bg1: #D0E8FF;
	--tag-color-bg2: #FFD9B5;
	--tag-color-bg3: #CEEEDE;
	--tag-radius:5px;



/*	---------------------------------------------------
	field message
	--------------------------------------------------- */
	--message-size: calc(10px + (15 - 10) * ((100vw - 320px) / (1200 - 320)));
	--message-size-min:10px;
	--message-size-max:15px;
	--message-line-height: calc(12px + (18 - 12) * ((100vw - 320px) / (1200 - 320)));
	--message-line-height-min:12px;
	--message-line-height-max:18px;
	--message-color-info: #1DB900;
	--message-color-warning: #EBAF00;
	--message-color-error: #E20012;


/*	---------------------------------------------------
	edit
	--------------------------------------------------- */
	--edit-font:'Baloo Chettan 2', sans-serif;



	--frame-shadow:0px 0px 14px #000;


/*	---------------------------------------------------
	text-coloring
	--------------------------------------------------- */
	--col-green:#20A21F;
	--col-red:#B42A16;


/*	---------------------------------------------------
	text-marker
	--------------------------------------------------- */
	--marker-yellow:#FFFF3E;




/* table */

	--tbl-st-1-border: 1px solid #444;
	--tbl-st-1-head-back-col: #e1e1e1;
	--tbl-zebra-even-back-col: #f1f1f1;




}





/*	---------------------------------------------------
	init
	--------------------------------------------------- */
	*, *::before, *::after
	{
		border-collapse: collapse;
		box-sizing:border-box;
	}

	body
	{
		min-height:100vh;
	}

	a
	{
		position: relative;
		display: inline-block;
		text-decoration: none;
	}

	a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		transform: scaleX(0);
		transform-origin: center; /* <-- Start in der Mitte */
		transition: transform 0.2s ease;
	}

	a:hover::after {
		transform: scaleX(1);
	}






	body,p,h1,h2,h3,h4,h5,h6
	{
		margin:0;
		padding:0;
		position:relative;
	}


	h1:first-child,
	h2:first-child,
	h3:first-child,
	h4:first-child,
	h5:first-child,
	h6:first-child,
	p:first-child
	{
		padding-top:0;
	}



	body {
		font-family: var(--p-font);
		font-weight: var(--p-font-weight);
		font-size: var(--p-font-size);
		line-height:var(--p-line-height);
	}
	p {
		font-family: var(--p-font);
		font-weight: var(--p-font-weight);
		font-size: var(--p-font-size);
		line-height:var(--p-line-height);
		padding-top:var(--xs);
	}
	h1 {
		font-family: var(--h1-font);
		font-weight: var(--h1-font-weight);
		font-size: var(--h1-font-size);
		line-height:var(--h1-line-height);
		padding-top:var(--sm);
	}
	h2 {
		font-family: var(--h2-font);
		font-weight: var(--h2-font-weight);
		font-size: var(--h2-font-size);
		line-height:var(--h2-line-height);
		padding-top:var(--sm);
	}
	h3 {
		font-family: var(--h3-font);
		font-weight: var(--h3-font-weight);
		font-size: var(--h3-font-size);
		line-height:var(--h3-line-height);
		padding-top:var(--sm);
	}
	h4 {
		font-family: var(--h4-font);
		font-weight: var(--h4-font-weight);
		font-size: var(--h4-font-size);
		line-height:var(--h4-line-height);
		padding-top:var(--sm);
	}
	h5 {
		font-family: var(--h5-font);
		font-weight: var(--h5-font-weight);
		font-size: var(--h5-font-size);
		line-height:var(--h5-line-height);
		padding-top:var(--sm);
	}
	h6 {
		font-family: var(--h6-font);
		font-weight: var(--h6-font-weight);
		font-size: var(--h6-font-size);
		line-height:var(--h6-line-height);
		padding-top:var(--sm);
	}