/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* generic layout */

:root
{
	--font:										"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
	/* header */
	--header-height:							210px;
	--header-text-color:						#273482;
	--header-font-size:							12px;
	--header-weight:							600;
	--header-background-color:					white;
	--header-bottom-margin:						0px;

	--mobile-header-height:						135px;
	--mobile-header-bottom-margin:				0px;		/* mobile with hamburger menu: header bottom margin */
	--mobile-header-padding:					0;
	--logo-margin-left:							0;				/* logo margin left */
	--logo-margin-right:						auto;			/* logo margin right */

	/* page layout */
	--text-line-height: 						1.55;
	--strong-weight:							bold;
	--font-size: 								19px;
	--font-weight:								400;
	--col-gap:									65px;
	--h1-size:									45px;
	--h1-weigth:								500;
	--h1-color:									#273482;
	--h1-align:									left;
	--h1-margin: 								60px;
	--h1-line-height: 							1.2;
	--h3-size:									16px;
	--h3-weigth:								600;
	--h3-color:									#000000;
	--h3-align:									left;
	--h3-margin: 								20px;
	--h3-line-height: 							1.2;
	--h4-size:									34px;
	--h4-weigth:								500;
	--h4-color:									#273482;
	--h4-align:									left;
	--h4-margin: 								45px;
	--h4-line-height: 							1.2;

	--article-margin:							0;
	--row-margin:								0;			/* row bottom margin */
	--section-margin:							60px;
	--paragraph-margin:							0;			/* paragraph container bottom margin */
	--paragraph-p-margin:						15px;		/* paragraph p element bottom margin */
	--section-img-list-margin:					10px;

	--bullet-list-color:						#273482;
	--bullet-list-size: 						8px;
	--bullet-list-padding: 						calc(var(--bullet-list-size) + 35px);	/* bullet point list bullet padding */
	--bullet-list-offset-x:						20px;
	--bullet-list-offset-y:						-4px;
	--bullet-list-item-margin:					18px;
	--bullet-list-margin:						0px;

	/* layout size and margins */
	--max-content-width:						1528px;
	--left-right-header-margin:					60px;
	--left-right-footer-margin:					60px;
	--left-right-headline-margin:				60px;
	--left-right-row-margin:					60px;
	--header-padding:							0 0 45px 0;

	/* hambuger menu */
	--hamburger-color:							#273482;
	--hamburger-color-hover:					#273482;
	--hamburger-color-open:						#273482;
	--hamburger-width:							24px;
	--hamburger-bar-height:						2px;
	--hamburger-bar-distance:					3px;
	--hamburger-pos-top:						55px;
	--hamburger-pos-right:						0;
	--hamburger-offset-top-open: 				5px;
	--hamburger-animation-speed:				0.2s;
	--hamburger-open_bar1-left:					2px;
	--hamburger-open_bar1-top:					-11px;

	/* main navigation */
	--main-nav-margin-left:						auto;		/* main navigation, margin left */
	--main-nav-margin-right:					0;			/* main navigation, margin right */
	--main-nav-padding:							3px 20px 3px 20px;/* main navigation, item padding */
	--main-nav-gap:								5px;
	--main-nav-font-size:						17px;
	--main-nav-weight:							500;
	--main-nav-border-bottom-size:				0;
	--main-nav-text-color: 						#273482;
	--main-nav-text-color-hover:				#273482;
	--main-nav-border-bottom-size-hover:		0;
	--main-nav-text-color-active:				white;
	--main-nav-background-color-active: 		#273482;
	--main-nav-border-bottom-size-active:		0;

	/* mobile main navigation */
	--mobile-menu-padding:						32px 50px 0 50px;
	--mobile-menu-background-color:				white;

	--mobile-main-nav-padding:					15px 5px 15px 5px;
	--mobile-main-nav-font-size:				24px;
	--mobile-main-nav-gap:						0;
	--mobile-main-nav-gap-border-size:			1px;
	--mobile-main-nav-gap-border-color:			black;
	--mobile-main-nav-border-top-size:			1px;
	--mobile-main-nav-border-top-size-hover:	1px;
	--mobile-main-nav-border-top-size-active:	1px;
	--mobile-main-nav-border-bottom-size:		1px;
	--mobile-main-nav-border-bottom-size-hover: 1px;
	--mobile-main-nav-border-bottom-size-active:1px;
	--mobile-main-nav-offset-active: 			-1px;
	--mobile-main-nav-border-color:				black;
	--mobile-main-nav-border-color-hover:		black;
	--mobile-main-nav-border-color-active:		black;
	--mobile-main-nav-max-width:				575px;		/* main navigation max. width */
	--mobile-main-nav-text-color:				black;
	--mobile-main-nav-text-color-active:		white;
	--mobile-main-nav-text-color-hover:			#273482;

	--mobile-main-nav-back-text: 				"< ZURÜCK";
	--mobile-main-nav-back-font-size: 			15px;
	--mobile-main-nav-back-color: 				black;
	--mobile-main-nav-back-color-hover: 		#273482;
	--mobile-main-nav-back-margin: 				35px;
	--mobile-main-nav-back-align: 				left;

	/* mobile mini navigation */
	--mobile-mini-nav-margin-top:				60px;
	--mobile-mini-nav-margin-bottom: 			100px;
	--mobile-mini-nav-gap:						10px;
	--mobile-mini-nav-text-color:				black;
	--mobile-mini-nav-font-size:				18px;
	--mobile-mini-nav-weight:					600;
	--mobile-mini-nav-text-color-hover:			#273482;
	--mobile-mini-nav-text-color-active:		#273482;

	/* footer */
	--footer-direction:							column;
	--footer-text-color:						white;
	--footer-font-size:							15px;
	--footer-weight:							400;
	--footer-background-color:					#273482;
	--footer-padding:							50px 0 45px 0;
	--footer-line-height:						1.55;

	/* footer navigation */
	--footer-nav-direction:						column;
	--footer-nav-gap:							100px;
	--footer-nav-text-color:					white;
	--footer-nav-decoration:					none;
	--footer-nav-text-color-hover:				white;
	--footer-nav-decoration-hover:				none;
	--footer-nav-text-color-active:				white;

	/* link button */
	--link-text-color: 							#273482;
	--link-decoration: 							underline;
	--link-text-color-hover: 					#273482;
	--link-decoration-hover: 					underline;

	--link-button-margin: 						10px 10px 0 0;
	--link-button-padding: 						10px 40px 8px 40px;
	--link-button-text-color:					white;
	--link-button-font-weight:					bold;
	--link-button-border-color:					transparent;
	--link-button-border-radius:				25px;
	--link-button-background-color:				#273482;
	--link-button-text-color-hover:				white;
	--link-button-border-color-hover:			transparent;
	--link-button-background-color-hover:		#273482;
	--link-button-text-color-disabled:			white;
	--link-button-border-color-disabled:		transparent;
	--link-button-background-color-disabled:	#666666;

	/* -------------------------------------- */
	/* components                             */
	/* -------------------------------------- */

	--component-font: 								"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
	/* layout */
	--component-label-pos:							column-reverse;
	--component-mobile-label-pos:					column-reverse;
	--component-label-align: 						start;
	--component-gap: 								60px;

	--component-label-margin:						7px 0 0 30px;
	--component-label-font-size:					14px;
	--component-label-font-weight:					300;

	/* basic styles */
	--component-font-size:							15px;
	--component-background-color:					transparent;
	--component-border-radius:						0;
	--component-border-color:						#797979;
	--component-placeholder-color:					#797979;
	--component-padding:							12px 30px 12px 30px;
	--error-msg-color: 								#273482;

	--component-invalid-background-color:			var(--component-background-color);
	--component-invalid-border-color:				#273482;

	--component-focus-background-color:				var(--component-background-color);
	--component-focus-shadow:						none;
	--component-input-text-color: 					#273482;
	--component-input-important-text-color:			var(--component-input-text-color);
	--component-input-required-text-color:			var(--component-input-text-color);
	--component-input-empty-text-color:				var(--component-input-text-color);
	--component-input-invalid-text-color:			var(--component-input-text-color);
	--component-input-focus-text-color:				var(--component-input-text-color);

	/* checkbox field */
	--component-checkbox-box-size:					15px;
	--component-checkbox-dot-size:					8px;
	--component-checkbox-box-border-size:			2px;
	--component-checkbox-box-border-radius:			0;
	--component-checkbox-box-color:					black;
	--component-checkbox-dot-color:					#273482;
	--component-checkbox-label-padding:				0;

	/* button */
	--component-button-font-size:					15px;
	--component-button-font-weight:					bold;
	--component-button-text-color: 					white;
	--component-button-background-color:			#273482;
	--component-button-border-radius:				20px;

	--component-button-disabled-font-weight:		var(--component-button-font-weight);
	--component-button-disabled-text-color: 		var(--component-button-text-color);
	--component-button-disabled-background-color:	#6f6f6f;

	--component-button-hover-font-weight:			var(--component-button-font-weight);
	--component-button-hover-text-color: 			var(--component-button-text-color);
	--component-button-hover-background-color:		var(--component-button-background-color);

	--component-button-active-font-weight:			var(--component-button-font-weight);
	--component-button-active-text-color: 			var(--component-button-text-color);
	--component-button-active-background-color:		var(--component-button-background-color);

	--component-button-focus-font-weight:			var(--component-button-font-weight);
	--component-button-focus-text-color: 			var(--component-button-text-color);
	--component-button-focus-background-color:		var(--component-button-background-color);


	/* select field */
	--component-select-list-hover-background-color:	#273482;
	--component-select-list-selected-background-color: transparent;
	--component-select-list-selected-text-color: 	black;
}

b { font-weight: 600; }
.paragraph a.arrow-link { text-decoration: none; color:white; font-size: 15px; font-weight: 600; }
.paragraph a:hover.arrow-link { text-decoration: underline; color:white; }
.paragraph a.arrow-link:before { content: "\f061"; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 15px; padding-right: 5px; }

a.link-button { cursor: pointer; }
.paragraph a.link-button:hover { color: white; }

.formular-link-list p { display: flex; flex-direction: row; flex-wrap: wrap; }
.formular-link { font-size: 16px; font-weight: 600; text-decoration: none; display: block; flex: 1 1 33%; margin-bottom: 20px; }
.formular-link:before { content: ""; background-image: url(../img/icon_Formular.svg); background-repeat: no-repeat; width: 36px; height: 48px;
						display: inline-block; margin-right: 15px; position: relative; top: 10px; }
.paragraph { z-index: 1; position: relative; }

.input-field div input, .input-field div textarea,
	.input-field div input:focus, .input-field div textarea:focus,
	.input-field div input:active, .input-field div textarea:active
		{ border: var(--component-input-border-size) solid var(--component-input-border-color)!important;
		  border-top-width: 0!important; border-left-width: 0!important; border-right-width: 0!important;
		  outline-width: 0!important; box-shadow: none!important; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* header & navigation */
.logo-nav-button-container-mobile { display: none;  align-items: center; position: relative; }
.logo-nav-button-container-mobile .nav-button-menu-text { position: absolute; right: 45px; top: calc(var(--hamburger-pos-top) - 6px);
														  text-transform: uppercase; z-index: 1002; font-size: 13px;
														  transition: all var(--header-animation-speed) ease-out; cursor: pointer; }

.page-img-list { display: relative; margin-bottom: 70px; }

.nav-container { position: relative; }
.header-contact { position: absolute; right: 20px; top: 25px; display: flex; flex-direction: row; column-gap: 45px; font-size: 14px; }
.header-contact a { text-decoration: none; }
.header-contact-phone { padding-left: 35px; background-image: url(../img/icon-phone.svg); background-repeat: no-repeat; height: 30px;
						background-position: 0 0; line-height: 30px; }
.header-contact-email { padding-left: 35px; background-image: url(../img/icon-email.svg); background-repeat: no-repeat; height: 30px;
						background-position: 0 0; line-height: 30px; }

/* desktop navigation */
.logo-nav-container { display: block; }
.nav-container .main-nav .nav-level0 li { position: relative; }
.nav-container .main-nav .nav-level1 { position: absolute; display: none; }
.nav-container .main-nav .nav-level0 li:hover .nav-level1 { display: block; }
.nav-container .main-nav .nav-level1 ul { display: flex; flex-direction: column; background-color: white; padding: 10px 20px 10px 20px;
										  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2); }
.nav-container .main-nav .nav-level1 li { width: 400px; padding: 10px 0 10px 0; }

/* mobile navigation */
.logo-nav-container-mobile { display: none; }
.logo-nav-container-mobile span.nav-img-description { display: none; }
.nav-container-mobile .main-nav-menu-text { text-align: center; text-transform: uppercase; margin-top: 70px; margin-bottom: 0; font-size: 15px; }
.nav-container-mobile { overflow-x: hidden; overflow-y: auto; }
.nav-container-mobile .main-nav { margin-top: 50px; }
.nav-container-mobile .footer-nav { margin-top: 40px; }

.logo-nav-button-container-mobile .header-contact { position: absolute; right: 0px; top: unset; bottom: 35px; column-gap: 30px; }
.logo-nav-button-container-mobile .header-contact a { display: inline-block; width: 100%; height: 100%; }
.logo-nav-button-container-mobile .header-contact-phone { padding-left: 0; background-color: #283371; background-image: url(../img/icon-phone-white.svg);
														  background-position: center center; background-size: 70%; background-repeat: no-repeat; width: 70px; height: 70px; }
.logo-nav-button-container-mobile .header-contact-email { padding-left: 0; background-color: #283371; background-image: url(../img/icon-email-white.svg);
														  background-position: center center; background-size: 70%; background-repeat: no-repeat; width: 70px; height: 70px; }


/* scrolled header */
.scrolled { --mobile-header-height:	90px; --header-height: 90px; --hamburger-pos-top: 44px; --header-padding: 0 0 0 0; }
.scrolled .logo-part1 { width: 240px; }
.scrolled .logo-part2 { display: none; }
.scrolled .header-container { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding-bottom: 20px; }
.scrolled .header-contact { top: 7px; display: flex; flex-direction: row; column-gap: 45px; font-size: 12px; }
.scrolled .header-contact-phone, .scrolled .header-contact-email { background-size: 20px 20px; line-height: 20px; }
.scrolled .logo-nav-button-container-mobile .header-contact { display: none; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* footer */

.footer-content-row { display: flex; flex-direction: row; }
.footer-content-row-bottom { align-items: flex-end; }
.footer-content-col { margin-right: 135px; }
footer a, footer a:hover { color: white; font-size: var(--footer-font-size); font-weight: var(--footer-weight); text-decoration: none; }
footer a:hover { color: white; }
.footer-nav { height: 100px; }
.footer-nav ul a span { text-decoration: none; }
.footer-nav ul a:hover span { color: white; }
.footer-nav ul { flex-wrap: wrap; height: 100%; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* pages */

.paragraph a:hover { color: #273482; }
.paragraph h5 { font-size: 21px; color: #273482; font-weight: 600; margin-bottom: 20px; }

.section-image-left, .section-image-right { display: flex; flex-wrap: nowrap; column-gap: 65px; width: 300%; max-width: 300%; }
.section-image-left { flex-direction: row; }
.section-image-left .section-img-list { flex: none; }
.section-image-right { flex-direction: row-reverse; }
.section-image-right .section-img-list { flex: none; }
.section-image-left .section-content, .section-image-right .section-content { flex: 1 1 0; }
.section-image-left .section-img-list.img-list-multi, .section-image-right .section-img-list.img-list-multi
	{ display: flex; flex-direction: row; flex: 1 1 0; column-gap: 40px; }
.section-image-left .section-img-list.img-list-multi figure, .section-image-right .section-img-list.img-list-multi figure
	{ flex: none; margin-right: 40px; }
.section-image-left .section-img-list.img-list-multi figure:last-child, .section-image-right .section-img-list.img-list-multi figure:last-child
	{ margin-right: 0; }
.section-img-list.img-list-multi .img-title { font-size: 19px; font-weight: 600; color: #273482; margin-top: 10px; }
.section-img-list.img-list-multi .img-description { font-size: 15px; font-weight: 400; margin-top: 10px; color: #797979; }

.icon-section h3 { font-size: 21px; font-weight: 600; color: #273482; }
.icon-section .paragraph { font-size: 15px; line-height: 1.6; }

.start-row .col { height: 220px; }
.start-row { margin-bottom: 80px; }
.start-row .row-inner { padding-top: 0; }
.start-box { color: white; font-size: 15px; padding: 40px 40px 20px 40px; height: 100%; }
.start-box h3 { font-size: 27px; font-weight: 400; color: white; }
.box-blue { background-color: #273482; }
.box-cyan { background-color: #196E8E; }
.box-green { background-color: #33966E; }

.row-inner { padding-top: 80px; padding-bottom: 20px; }
.empty-row .row-inner { padding-top: 0; }
.gray-row { background-color: #e4e4e4; }
.gray-row-small-padding { background-color: #e4e4e4; }
.gray-row-small-padding .row-inner { padding-top: 20px; }
.green-row { background-color: #33966e; }
.green-row h3, .green-row h4, .green-row .paragraph { color: white; }

.notar-section h4 { color: #166383; }
.notar-section.icon-section h3 { color: #166383; }

.page-no-header h1:before { content: ""; width: 100%; height: 30px; display: block; background-color: #e6e6e6; margin-bottom: 25px;}
.page-no-header .row-inner { padding-top: 0; }

.paragraph-file-list .file-title { padding-left: 5px; }
.paragraph-file-list .file-title:before { padding-right: 10px; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* phone / tablet */

/*todo*/

/* medium screen laptops */
@media only screen and (max-width: 1528px)
{
	:root
	{
		--max-content-width: 100vw;
		--logo-margin-left: 0px;
	}
	.section-image-left, .section-image-right {
		--lrmargin: max(var(--min-left-right-row-margin), (100vw - var(--max-content-width)) / 2 + var(--left-right-row-margin));
		width: calc(100vw - var(--lrmargin) * 2); }
	.section-image-left .section-img-list.img-list-multi, .section-image-right .section-img-list.img-list-multi { flex: none; }
	.start-row .col { height: 230px; }
}

@media only screen and (max-width: 1280px)
{
	:root
	{
		--main-nav-gap: 0;
		--language-marginleft:	30px;
	}
}

@media only screen and (max-width: 1200px)
{
	:root
	{
		--left-right-header-margin: 40px;
		--left-right-footer-margin: 40px;
		--left-right-headline-margin: 40px;
		--left-right-row-margin: 40px;
	}
	.logo-nav-container { display: none; }
	.logo-nav-button-container-mobile { display: flex;
		--lrmargin: max(var(--min-left-right-header-margin), (100vw - var(--max-content-width)) / 2 + var(--left-right-header-margin));
		margin-left: var(--lrmargin); margin-right: var(--lrmargin);
	}
	.footer-nav { display: none; }
	.footer-content-col { margin-right: 50px; }
	.start-row .col { height: 240px; }
}


@media only screen and (max-width: 1100px)
{
	:root
	{
		--left-right-header-margin: 30px;
		--left-right-footer-margin: 30px;
		--left-right-headline-margin: 30px;
		--left-right-row-margin: 30px;
	}
	.start-row .col { height: 260px; }
}


@media only screen and (max-width: 1000px)
{
	:root
	{
		--mobile-left-right-header-margin: 40px;
		--logo-max-width: 240px;
	}

	.start-row .col { height: auto; }
	.start-row .row-inner { display: block; }

	.start-row { margin-bottom: 0; }
	.row-inner { padding-top: 60px; padding-bottom: 10px; }
	.gray-row-small-padding .row-inner { padding-top: 10px; }

	.logo-nav-button-container-mobile .header-contact { right: 140px; bottom: 35px; }
}


@media only screen and (max-width: 880px)
{
	.section-image-left, .section-image-right { display: block; }
	h3 { margin-top: 40px;  }
	.row-inner { padding-top: 40px; padding-bottom: 5px; }
	.gray-row-small-padding .row-inner { padding-top: 5px; }
	.formular-link { flex: 1 1 50%; }
	.row-inner { display: block; }
	.section-colspan-3, .section-colspan-2 { width: 100%; }

	.start-box { padding: 20px 40px 20px 40px; }
	.start-box h3 { margin-top: 15px; }
}

@media only screen and (max-width: 650px)
{
	.logo-nav-button-container-mobile .header-contact { right: 120px; bottom: 45px; }
	.logo-nav-button-container-mobile .header-contact-phone, .logo-nav-button-container-mobile .header-contact-email
		{ background-size: 70%; width: 50px; height: 50px; }
}

@media only screen and (max-width: 590px)
{
	:root
	{
		--hamburger-pos-top: 25px;
	}

	.formular-link-list p { display: block; }
	.footer-content-col { margin-right: 20px; }
	.footer-content-col:nth-child(2) { margin-right: 0; }

	.logo-nav-button-container-mobile .header-contact { right: 0px; bottom: 20px; column-gap: 20px; }
	.logo-nav-button-container-mobile .header-contact-phone, .logo-nav-button-container-mobile .header-contact-email
		{ background-size: 70%; width: 40px; height: 40px; }
}

@media only screen and (max-width: 550px)
{
	.section-image-left .section-img-list.img-list-multi, .section-image-right .section-img-list.img-list-multi
		{ column-gap: 0px; }
}

@media only screen and (max-width: 500px)
{
	.section-image-left .section-img-list.img-list-multi, .section-image-right .section-img-list.img-list-multi
		{ display: block; }

	.section-image-left .section-img-list.img-list-multi figure, .section-image-right .section-img-list.img-list-multi figure
		{ margin-bottom: 40px; }
	.footer-content-col { display: none; }
}

@media only screen and (max-width: 400px)
{
	:root
	{
		--logo-max-width: 160px;
		--mobile-menu-padding:	40px 5px 0 5px;
	}

	.logo-nav-button-container-mobile .header-contact { column-gap: 10px; }
}