: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;



	--body-bg: #f1f1f1;

/*	---------------------------------------------------
	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:#1D408D;
	--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:6px;
	--rad2:10px;
	--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: #fff;
	--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-light-button-col: #FFDC34;
	--st1-light-button-text-col: #000;


	--st1-medium-back-col: #e1e1e1;
	--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: #174997; /* #174997 */
	--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;


	--st5-light-back-col: rgb(255,255,255,.7);
	--st5-light-blur: 6px;
	--st5-light-shadow: 0 0 6px #000;
	--st5-light-link-hover-col:#000;



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


	--header-height: 0px;
	--footer-height: 0px;


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



/*	---------------------------------------------------
	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: flex;
		text-decoration: none;
	}

	a.inline
	{
		display:inline-block;
	}

	a.text-link::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.text-link:hover::after {
		transform: scaleX(1);
	}


	a.button-link
	{
		display:inline-block;
		border-radius: var(--rad1);
		padding:var(--xxs) var(--sm);
	}




.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 0;
  top: 0;
  background: white;
  z-index: 1000;
}

:focus-visible {
  outline: 3px solid #F821FF;
  outline-offset: 2px;
}


.dir-col > .cell-content
{
	flex-direction:column;
}














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



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


ul {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}

ul li {
    list-style-type: square;
    list-style-position: outside;
    margin-left: calc(17px + (28 - 17) * ((100vw - 320px) / (1176)));
}

li {
    line-height: 1.4em;
    color: #333;
    margin: 0;
    margin-bottom: calc(10px + (14 - 10) * ((100vw - 320px) / (1176)));
}

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


header,
main,
footer
{
	display:flex;
	flex-direction:column;
	width:100%;
}

main
{
/* 
    margin-top: var(--md);
 */
    margin-bottom: var(--md);
}


address
{
	display:flex;
	flex-direction:column;
	font-style:normal;
}

nav
{
/* 	width:100%; */
}


nav ul
{
	display:flex;
	flex:1 1 auto;
	flex-direction:row;
	justify-content:space-between;
}

nav.side-nav ul
{
	flex-direction:column;
	justify-content:space-between;
}

nav ul li {
	list-style: none;
	list-style-type: none;
	padding-left:var(--xxs);
	padding-right:var(--xxs);
	margin:0;
}



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


.bg-image {
	position:relative;
  width: 100%;
/*
  aspect-ratio: 16 / 9;
  min-height: 300px;
  max-height: 600px;
*/
  background-size: cover;        /* proportional + füllt Fläche */
  background-position: center;   /* zentriert */
  background-repeat: no-repeat;
}


.bg-overlay {
	background: rgba(0,0,0,0.5);
	position: absolute;
	inset: 0;
	z-index:1;
	pointer-events:none;
}


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


form
{
	width:100%;
}

.form-field .field-wrapper > .cell-content > *
{
	width:100%;
}

button
{
	width:100%;
}

input
{
	padding:var(--xxs);
	border-radius:var(--rad1);
	border:1px solid #666;
}

.form-field .field-wrapper > .cell-content > select
{
	padding:var(--xxs);
	border-radius:var(--rad1);
	border:1px solid #666;
	width:auto;
	min-width:300px;
}

.form-item button
{
	width:auto;
	min-width:200px;
}



.accordion button.wz.button.acc-title[aria-expanded="false"] {
	background-color:var(--col-blue-dark1);
	border-bottom-left-radius:var(--rad1);
	border-bottom-right-radius:var(--rad1);
}

.accordion button.wz.button.acc-title[aria-expanded="true"] {
	background-color:var(--col-red-dark1);
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}

.accordion .acc-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
	background-color:var(--col-grey-light);
}

.accordion .acc-item.active .acc-content {
  max-height: 500px; /* ausreichend groß wählen */
}

.accordion .acc-title {
  cursor: pointer;
  width: 100%;
  text-align: left;
}




	.slide .overlay-1 {
		background: rgba(217,0,18,0.6);
	}

	.slide .overlay-2 {
		background: rgba(134,184,25,0.6);
	}

	.slide .overlay-3 {
		background: rgba(17,92,169,0.6);
	}

	.slide .overlay-4 {
		background: rgba(150,150,150,0.6);
	}