/* =============================================================================
   Webfonts
   ========================================================================== */

  
@font-face {
	font-family: "KievitWebBold";
	src: url('fonts/KievitWebBold/KievitWeb-Bold.woff2') format('woff2'), url('fonts/KievitWebBold/KievitWeb-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "KievitWebRegular";
	src: url('fonts/KievitWebRegular/KievitWeb-Reg.woff2') format('woff2'), url('fonts/KievitWebRegular/KievitWeb-Reg.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}




/* =============================================================================
   Base
   ========================================================================== */

html { 
	height: 					100%;
	margin:					0;	
	margin-top:				0;
	padding:					0; 
	list-style:				none; 
	
	/* Prevent font scaling in landscape while allowing user zoom */
	font-size: 						100%; 
	-webkit-text-size-adjust: 	100%; 	
	-ms-text-size-adjust: 		100%; 

	/* Prevent blue lightning of clicked elements */
	-webkit-tap-highlight-color: transparent;
}
body{
	height: 					100%;
	width:					100%;
	position: 				relative;
	margin: 					0; 
	padding:					0;
	background-color:		#FFF;
	overflow-x:				hidden;
}

/* User - Farbe Textselektion */
::-moz-selection			{ text-shadow:none; background:	var(--color1); color: #FFF; }
::selection					{ text-shadow:none; background:	var(--color1); color: #FFF; }
img::selection				{ background: var(--color1); }
img::-moz-selection			{ background: var(--color1); }
body						{ webkit-tap-highlight-color: var(--color1); }

/* padding, margins, borderlines in Elementbreite */
div { box-sizing: border-box; }

/* default vertical-align: baseline entfernen (sonst 5px Freiraum unter den Bildern) */
img { vertical-align: bottom; }


/* Elemente im Div ausrichten */
.v-bottom-col {
	display: flex;
  	flex-direction: column;
  	flex-wrap: nowrap;
  	justify-content: flex-end;
}
.v-bottom-row {
	display: 			flex;
	flex-direction: 	row;
  	flex-wrap: 			nowrap;
  	justify-content: 	flex-end;
  	align-items: 		flex-end;
  	align-content: 	normal;
}
	





/* =============================================================================
   Colors
   ========================================================================== */
   
:root {
	/* No Support: IE 11, Edge < 15, Safari < 9.1,  */
	--color1: 	#DF4E13;	/* ziegelrot */
	/*--color2: #xxxxxx;	/* türkis */
	--color3: 	#3E3E3E;	/* black 90 */
	--color4: 	#CCCCCC;	/* grey 20 */
	--color5: 	#EDEDED;	/* grey 10 */
}



/* =============================================================================
   Typography
   ========================================================================== */
   
/* GENERAL */
body, 
button, 
input, 
select, 
textarea,
p, 
a { 
	font-family:'KievitWebRegular', Arial, sans-serif; font-weight: normal; 
	color:		var(--color3); 
	font-style:	normal; 
	padding:	0; 
	margin:		0; 

	/* no medieval figures */
	-moz-font-feature-settings: "lnum";
	-webkit-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
	/*hyphens: auto;*/
}


/* HEADLINES */
h1, h2, h3, h4, h5 	{ 
	font-family:'KievitWebBold', Arial, sans-serif; font-weight: normal; 
	color:		var(--color3);
	font-style:	normal; 
	padding:	0; 
	margin:		0; 
}


/* EXEPTIONS – Hero-Teaser 
.hero-teaser .imagebox .textbox h1 { font-family: 'AvenirStdWeb65Medium', Arial, sans-serif; }	/* Title Hero-Teaser
*/


/* TEXT */
.ch_facts		{ color: var(--color1); 

				  /* no medieval figures */
   				  -moz-font-feature-settings: "lnum";
   				  -webkit-font-feature-settings: "lnum";
   				  font-feature-settings: "lnum";
				}																										/* Numbers Facts */
.ch_intro 		{ font-family: 'KievitWebBold', Arial, sans-serif; font-weight: normal; }								/* Rubrikentitel */
.ch_rubrictitle	{ text-transform: uppercase; color: var(--color1); }													/* Intro Hero */
.ch_bt_label	{ font-family: 'KievitWebBold', Arial, sans-serif; font-weight: normal; text-transform: uppercase; }	/* Button Label */	
.ch_note		{  }																									/* Marginalien */



/* EFFECTS & COLOR */
.invers			{ color: #FFF !important; }								/* Weiss */
.grey			{ color: var(--color4); }								/* Grey 50 */

.shadow			{ text-shadow: 20px 1px 80px rgba(0,0,0,0.5); }
.shadow-white	{ text-shadow: 20px 1px 80px #FFF; }
.center 		{ text-align: center;}
.nowrap 		{ white-space: nowrap; }
								
.light			{ 
					font-family: 'KievitWebRegular', Arial, sans-serif;  
					font-weight: normal;
					font-style: normal;
					font-display: swap;
				}
.strong,
strong			{ font-family: 'KievitWebBold', Arial, sans-serif; }		/* Bold (Tiny MCE) */
.no-break 		{ white-space: nowrap; }


/*.underline-small{
	display:	inline-block;
	position:	relative;  
}
.underline-small::after{
	content:	'';
	height:		8px;
	width:		120px;
	background:	var(--color1);
	position:	absolute;
	left:		3px;
	bottom:		-20px;
}
.underline-small.invers::after{
	background:	#FFF;
}*/

.nounderline	{ text-decoration: none }			/* not underlinded */




/* =============================================================================
   Links
   ========================================================================== */

/* BASIS */
a			{ text-decoration: underline; /*border-bottom: 2px solid currentColor;*/ }
a:hover	{ color: var(--color4); }
a:focus	{  }
a:active	{  }

/* IMAGE */
a img 		{ border:0; }


/* INTRO 
.link_intro				{ }
.link_intro:hover		{ }
.link_intro:visited 	{ }
.link_intro:active	{ }
.link_intro.active 	{ }
*/

/* NAVIGATION */
.linknav, 			
.linknav.sub 		{ font-family: 'KievitWebRegular', Arial, sans-serif; color: var(--color1); }
.linknav:hover 	{ color: var(--color1); }
.linknav:visited 	{ }
.linknav:active	{ }
.linknav.active 	{ color: var(--color1); border-bottom: 3px solid var(--color1); }


/* FOOTER META NAV */
.linknavfooter 			{ color: var(--color1); text-decoration: none; }
.linknavfooter:hover 	{ color: var(--color1); text-decoration: underline; }
.linknavfooter:visited 	{ }
.linknavfooter:active	{ }





/* =============================================================================
   Icons
   ========================================================================== */
   
i{
	position: 			relative;
	display: 			inline-block;
	width: 				50px;
	height: 			50px;
	margin-right:		14px;
	/*margin-bottom:	10px;*/
	
	mask-size: 			100%;
	-webkit-mask-size:	100%;
	
/*	background-color: var(--color1);*/
	
	transition: 		0.4s;
}
i.icon.invers { 
	background-color: #FFF;
} 
i.icon.last { 
	margin-right:		0;
} 
i.icon:hover { 
	background-color: #FFF; 
}
i.icon.phone { 
    -webkit-mask-image: url(../images/icon_phone.svg);
    mask-image: 		url(../images/icon_phone.svg);
}  
i.icon.linkedin { 
    -webkit-mask-image: url(../images/icon_linkedin.svg);
    mask-image: 		url(../images/icon_linkedin.svg);
}  
i.icon.mail { 
    -webkit-mask-image: url(../images/icon_mail.svg);
    mask-image: 		url(../images/icon_mail.svg);
}  
i.icon.facebook { 
    -webkit-mask-image: url(../images/icon_facebook.svg);
    mask-image: 		url(../images/icon_facebook.svg);
}  
i.icon.instagram { 
    -webkit-mask-image: url(../images/icon_instagram.svg);
    mask-image: 		url(../images/icon_instagram.svg);
}  
i.icon.xing { 
    -webkit-mask-image: url(../images/icon_xing.svg);
    mask-image: 		url(../images/icon_xing.svg);
}  
i.icon.whatsapp { 
    -webkit-mask-image: url(../images/icon_whatsapp.svg);
    mask-image: 		url(../images/icon_whatsapp.svg);
}  
i.icon.hochwasser { 
    -webkit-mask-image: url(../images/icon_hochwasser.svg);
    mask-image: 		url(../images/icon_hochwasser.svg);
}  




/* =============================================================================
   Image
   ========================================================================== */

img 			{ width: 100%;}
.img-centered	{ margin:0 auto }

.img-holder{
	background-position:	center;
    background-size: 		cover;
    background-repeat:		no-repeat;

    overflow: 	hidden; 
	width:	100%;
/*	height:	100%;*/
	height: 	auto;

	background-color:    	var(--color4);	
}




/* =============================================================================
   Lists
   ========================================================================== */

/* no default list elements */
ol, ul {
	list-style: 		none;
	list-style-image: 	none;
	margin: 			0;
	padding: 			20px 0 0 0;
}
/* custom style */
ul {
	list-style: 		outside;
	margin-left: 		0;
	padding-left: 		18px;
	text-align: 		left;
}
li {
	padding-bottom: 	10px;
}





/* =============================================================================
   Embedded content
   ========================================================================== */


/*-------------------------------*/
/*             PAGE              */
/*-------------------------------*/
#page{
	position:	relative;
	display:	inline-block;
	width:		100%;
									/*border: 		solid 1px #0F6;*/
}

/* PADDING */
:root {
	--pagemargin: 	5vw;		/* padding left & right */
}


   
/*-------------------------------*/
/*      GRID: 4-SPALTIG          */
/*      GRID: 6-SPALTIG          */
/*-------------------------------*/


/* GRID  */
.grid-4,
.grid-6 {
	width: 			100vw;
	height:			auto;
	display:		grid;

	align-content: flex-start; /* elemts always top */

	column-gap: 		4%;
	grid-row-gap:		0;

	padding:				0 var(--pagemargin) 0 var(--pagemargin);
    											/*background-color: #FC00FD;*/
}
	/* BOX */
	.grid-4 .box,
	.grid-6 .box{
    	grid-column: span 1; 			/*background-color: #CBCECE;*/
  	}


/* 4-COLUMN GRID  */
.grid-4 {
    grid-template-columns:	22% 22% 22% 22%;
}
	/* SPAN */
	.grid-4 .box.span-2 { grid-column: span 2; }

	/* COLUMN POSTION */
	.grid-4 .box.center-span-2	{ grid-column-start: 2; grid-column-end: span 2; }

	/* SPAN (only from pos 1)*/
	.grid-4 .box.span-2 { grid-column: span 2 }
	.grid-4 .box.span-3 { grid-column: span 3 }
	.grid-4 .box.span-4 { grid-column: span 4 }




/* 6-COLUMN GRID  */
.grid-6 {
    grid-template-columns:	13.33% 13.33% 13.33% 13.33% 13.33% 13.33% ;
}
	/* COLUMN POSTION */
	.grid-6 .box.left-span-2 	{ grid-column-start: 5; grid-column-end: span 2; }
	.grid-6 .box.center-span-4	{ grid-column-start: 2; grid-column-end: span 4; }

	/* SPAN */
	.grid-6 .box.span-2 { grid-column: span 2; }
	.grid-6 .box.span-4 { grid-column: span 4; }
	.grid-6 .box.span-6 { grid-column: span 6; }



/* 3-COLUMN GRID  
.grid-3 {
    grid-template-columns:	30.66% 30.66% 30.66%;
}
	/* COLUMN POSITION 
	.grid-3 .box.colpos-2 { grid-column:2 }
	.grid-3 .box.colpos-3 { grid-column:3 }

	/* SPAN 
	.grid-3 .box.span-2 { grid-column: span 2; }
	.grid-3 .box.span-3 { grid-column: span 3; }

	/* CENTER 
	.grid-3 .box.center { margin: 0 auto; }
*/

/* BLOC GAPS */
.gap-0-25-top 		{ padding-top:		 15px; }
.gap-0-25-bottom	{ padding-bottom:	 15px; }
.gap-0-5-top 		{ padding-top:		 30px; }
.gap-0-5-bottom		{ padding-bottom:	 30px; }
.gap-0-75-bottom	{ padding-bottom:	 45px; }
.gap-1-top 			{ padding-top:		 60px; }
.gap-1-bottom		{ padding-bottom:	 60px; }
.gap-2-top 			{ padding-top:		120px; }
.gap-2-bottom		{ padding-bottom:	120px; }
.gap-3-top 			{ padding-top:		180px; }
.gap-3-bottom		{ padding-bottom:	180px; }
.gap-4-top 			{ padding-top:		240px; }
.gap-4-bottom		{ padding-bottom:	240px; }





/*-------------------------------*/
/*         ASPECT RATIO          */
/*-------------------------------*/

/* LANDSCAPE 3:2 */
.ratio-3-2 {
	aspect-ratio: 3 / 2; 
}
	/*fallback*/
	@supports not (aspect-ratio: 3 / 2) {
		.ratio-3-2 {			
			width: 			100%;
			padding-top:	66.67%;
		}
	}


/* PORTRAIT 3:4 */
.ratio-3-4 {			
	aspect-ratio: 3 / 4; 
}
	/*fallback*/
	@supports not (aspect-ratio: 3 / 4) {
		.ratio-3-4 {			
			width:			100%;
			padding-top:	133.33%;
		}
	}


/* SQUARE 1:1 */
.ratio-1-1 {			
	/*aspect-ratio: auto 1 / 1; */

	/* fallback aspect-ratio 1:1 */
	width:			100%;
	padding-top:	100%;
}





/*-------------------------------*/
/*           BUTTONS    	      */
/*-------------------------------*/

/* BUTTON DEFAULT */
.button {
	position:  			relative;
	display:			inline-block;
	left:  				-5px;
	width: 				auto;

	border-radius:		30px;
	border: 			0.25em solid var(--color1);
	background-color: 	transparent;
	padding: 			15px 22px 12px 22px;

	text-align: 		left;
	color: 				var(--color1);
	
	transition: 		all 0.5s;
	cursor: 			pointer;
	float: 				left;
}
	.button span{
		cursor:		pointer;
		display:	inline-block;
		position:	relative;
		transition: 0.3s;
	}
	.button span:after {
		content:	url('../images/arrow.svg');
		transform:	scale(1.2);
		position:	absolute;
		opacity:	0;
		top: 		0;
		right:		-20px;
		transition:	0.3s;
	}
	.button:hover span {
		padding-right: 20px;
	}
	.button:hover span:after {
		opacity:	1;
		right:		0;
	}
	.button:disabled {
		opacity:		0.5;
		pointer-events: none;
	}


	/* BUTTON INVERS */
	.button.invers {
		border: solid 0.25em #FFF;
		color: 	#FFF;
	}
		.button.invers span:after{
			content: url('../images/arrow-white.svg');
		}


	/* HOVEREFFECT */
	.hover-teaser span,
	.button:hover span,
	.button-boarder:hover span,
	.button-light:hover span {
		padding-right: 20px;
	}

	.hover-teaser span:after,
	.button:hover span:after,
	.button-boarder:hover span:after,
	.button-light:hover span:after {
		opacity:	1;
		right:		0;
	}




/*-------------------------------*/
/*         HOVER:EFFECTS         */
/*-------------------------------*/


/* LINK NAV: ANIMATE UNDERLINE */
.linknav.animate{
	 display:	inline-block; 
	 position:	relative;
}
.linknav.animate:after {
	content: 	'';
	position:	absolute;
	background:	var(--color1);
	height:		3px;
  	width: 		0;
  	left: 		0;
	bottom:		-3px;
	transition: width .3s ease;
}
.linknav.animate:hover:after {
	width: 		100%;
}



/*-------------------------------*/
/*     ANI: FADE-IN MOVE UP      */
/*-------------------------------*/

.fade-in-move-up {
	opacity: 0;
	animation: fade-in-move-up 0.7s;
	animation-fill-mode:forwards; 	/* stop at last keyframe */
	animation-delay: 0.5s;
}
@keyframes fade-in-move-up {
	0% {
    	transform: translateY(3rem);
  	}
  	100% {
    	opacity: 1;
    	transform: translateY(0);
  	}
}