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

@font-face {
	font-family: "PPTelegraf-Bold";
	src: url('fonts/PPTelegraf-Bold/PPTelegraf-Bold.woff2') format('woff2'), url('fonts/PPTelegraf-Bold/PPTelegraf-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PPTelegraf-Regular";
	src: url('fonts/PPTelegraf-Regular/PPTelegraf-Regular.woff2') format('woff2'), url('fonts/PPTelegraf-Regular/PPTelegraf-Regular.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%; 
}
body{
	height: 					100%;
	width:						100%;
	position: 					relative;
	margin: 					0; 
	padding:					0;
	background-color:			#FFFFFF;
	overflow-x:					hidden;
}

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


/* ELEMENTS: V-CENTER */
/*.v-align {
	position:				relative;
	top: 						50%;
	-webkit-transform: 	translateY(-50%);
	-ms-transform: 		translateY(-50%);
	transform:				translateY(-50%);
}*/
/* ELEMENTS: BOTTOM */
.v-bottom-row {
	display: 			flex;
	flex-direction: 	row;
  	flex-wrap: 			nowrap;
  	justify-content: 	flex-end;
  	align-items: 		flex-end;
  	align-content: 		normal;
}
/* ELEMENT: CENTER RIGHT */
.v-center-row {
    display: 			flex;
    align-items:		center;
    justify-content: 	flex-end;
    height: 			100%;
}

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




/* =============================================================================
   Colors
   ========================================================================== */
   
:root {
	/* No Support: IE 11, Edge < 15, Safari < 9.1,  */
	--color1: 	#102D3B;	/* Navy */
	--color2: 	#C5D1D9;	/* Himmelblau */
	--color3: 	#E7E983;	/* Sonnengelb*/
	--color4: 	#C65343;	/* Ziegelrot */

	--color5: 	#000000;	/* Schwarz */
	--color6: 	#FFFFFF;	/* Weiß */
}





/* =============================================================================
   Typography
   ========================================================================== */
   

/* GENERAL */
body, 
button, 
input, 
select, 
textarea, 
a,
p { 
	font-family:	'PPTelegraf-Regular', Arial, sans-serif; 
	font-weight:	normal;
	color: 			var(--color5); 
	font-style: 	normal;
	padding: 		0; 
	margin: 		0; 
}


/* HEADLINES */
h1, h2, h3, h4, h5 { 
	font-family:	'PPTelegraf-Regular', Arial, sans-serif; 
	font-weight:	normal;
	font-style: 	normal;
	padding: 		0; 
	margin: 		0; 
}
/*h2, h4 { 
	font-family: 'MessinaSans_Regular'; 
	color: 		 var(--color1); 	
}
h4 {
	text-decoration:  underline;
}*/


/* TEXTE */
/*.ch_title 			{ font-family: 'PPTelegraf-Regular'; }		Title */
/* .ch_intro 			{ font-family: 'PPTelegraf-Regular'; }		Intro */
/* .ch_text			{  }											Fließtext */

.ch_fact		{ }											/* Fact, Number */
.ch_rubrictitle	{ }											/* Rubrikentitel */
.ch_bt_label	{ }											/* Button Label */	
.ch_notes		{ }											/* Marginalien */
.ch_notes_title	{ font-family: 'PPTelegraf-Bold'; }			/* Marginalien */


/* FORMATS, EFFECTS, COLOR */
.invers 		{ color: #FFF !important; }
.highlight 		{ color: var(--color1); }
.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; }

/* HIGHLIGHTING */
.underline-small,
.underline-small-invers{
	/*display:	inline-block;*/
	position:	relative;  
}
.underline-small::after,
.underline-small-invers::after{
	content:	'';
	height:		5px;
	width:		20px;
	background:	var(--color1);
	position:	absolute;
	bottom:		-20px;
	left: 		calc(50% - 10px);
}
.underline-small-invers::after{
	background:	#FFF;
}




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

/* BASIS 
a,a:hover,
a:focus,
a:active	{ outline:0; }*/
a			{ text-decoration: underline; outline:0; text-underline-offset: 0.25em;}
a:hover		{ color: var(--color1); }
a:focus		{  }
a:active	{  }

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


/* NAVIGATION */
.linknav			{ font-family: 'PPTelegraf-Regular'; color: var(--color5); text-decoration: none; text-transform: uppercase; }
.linknav:hover		{ color: var(--color5); }
.linknav:visited 	{ color: var(--color5); }
.linknav:active		{ color: var(--color5); }

/* NOTES */
.linknotes				{ color: var(--color6); text-decoration: none; }
.linknotes:hover		{ color: var(--color6); }
.linknotes:visited 		{ }
.linknotes:active		{ color: var(--color6); }

/* BUTTONLABEL */
.ch_bt_label		{ font-family: 'PPTelegraf-Regular'; }		

/* FONT HIGHLIGHT */
/*.active		{ color: var(--color2); }*/
.invers			{ color: #FFFFFF; }					
.positiv		{ color: var(--color1); }			
.underlined		{ text-decoration: underline; }	/* underlined */
.nounderline	{ text-decoration: none }			/* not underlinded */

.light			{ font-family: 'PPTelegraf-Regular', Arial, sans-serif;  }
.strong,
strong			{ font-family: 'PPTelegraf-Bold', Arial, sans-serif; }		/* Bold (Tiny MCE) */




/* =============================================================================
   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%;
/*	background-color:	var(--color1);	*/
}





/* =============================================================================
   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;
}





/* =============================================================================
   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.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);
}  

	/* INVERS */
	i.icon.invers { 
		background-color: #FFF;
	} 
	/* LAST */
	i.icon.last { 
		margin-right:	0;
	} 
	/* HOVER */
	i.icon:hover { 
		background-color: var(--color1); 
	}











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


/*-------------------------------*/
/*             PAGE              */
/*-------------------------------*/

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

/* PADDING */
:root {
	--pagemargin: 	3vw;		/* padding left & right */
	--gridgap: 		4%;			/* gaps between rows */
}


   
/*-------------------------------*/
/*      GRID: 3-SPALTIG          */
/*      GRID: 8-SPALTIG          */
/*-------------------------------*/

/* GRID  */
.grid-8,
.grid-3 {
	padding:		0 var(--pagemargin) 0 var(--pagemargin);
	width: 			100vw;
	height:			auto;
	display:		grid;

	/*
	align-content:	flex-start;  elemts always top 
	*/
  	align-items: 	flex-start; /*elemts always top */
	
	grid-gap: 		var(--gridgap);
	grid-row-gap:	0;	
/*    									background-color: #FC00FD;*/
}
	/* BOX */
	.grid-3 .box,
	.grid-8 .box {
    	grid-column: span 1; 			
/*										background-color: #EEEEEE;*/
  	}


	/* 8-COLUMN GRID  */
	.grid-8 {
		grid-template-columns: repeat(8, 1fr);
	}
		/* SPAN */
		.grid-8 .box.span-2 { grid-column: span 2; }
		.grid-8 .box.span-4 { grid-column: span 4; }
		.grid-8 .box.span-8 { grid-column: span 8; }
	


	/* 3-COLUMN GRID  */
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
		/* SPAN */
		.grid-3 .box.span-2 { grid-column: span 2; }
		.grid-3 .box.span-3 { grid-column: span 3; }

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



/* 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-top		{ padding-top:	 	 45px; }
.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          */
/*-------------------------------*/


/* FULLWIDTH 16:2 */
.ratio-16-9 {
	aspect-ratio: 16 / 9; 
}
	/*fallback*/
	@supports not (aspect-ratio: 16 / 9) {
		.ratio-16-9 {			
			width: 			100%;
			padding-top:	56.25%;
		}
	}

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

/* 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: 1 / 1; 
}
	/*fallback*/
	@supports not (aspect-ratio: 1 / 1) {
		.ratio-3-4 {			
			width:			100%;
			padding-top:	100%;
		}
	}





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


/* BUTTON DEFAULT */
button {
	display:		inline-flex;
	/*align-items:	center;*/
	gap:			10px;
	border:			none;
	background:		none;
	cursor:			pointer;
	padding:		0;

	transition:		all 0.3s ease;
	text-align: 	left;
}
	/* ARROW IN CIRCLE */
	button .arrow,
	button .arrow-plain {
		background-color:	var(--color5);
		color:				var(--color6);
		border-radius:		50%;
		width:				40px;
		height:				40px;
		display:			flex;
		align-items:		center;
		justify-content:	center;
		font-size:			1.2rem;
		line-height:		1;

		transform: 			translateY(-6px); /* feintuning */
	}

	button .arrow::before,
	button .arrow-plain::before {
		content:	"↗";
		position:	absolute;
		
		left:		50%;
		transform:	translateX(-50%);
		/*font-size:	1.2rem;  Faktor 1.2 */
	}
		button .arrow::before {
			top:		5px; /* feintuning */
		}


	/* ARROW WITHOUT CIRCLE */
	button .arrow-plain {
		background-color:	unset;
		color:				var(--color5);

		border-radius:		0;
		width:				0;
		height:				0;

		font-size:			1.6rem;

		align-items:		unset;
		justify-content:	unset;
	}
	button .arrow-plain::before {
		top:		0;
		/*left:		0;*/
		transform:	translateX(-90%);
	}


	/* HOVER */
	button:hover {
	    opacity: 0.6;
	}

 	/* HOVEREFFECT */
	.hover-teaser span,
	.button:hover span,
	.button-boarder:hover span,
	.button-light:hover span {
 		opacity: 0.6;
 	}

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










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


/* LINK NAV: ANIMATE UNDERLINE */
.linknav.animate{
	 display:	inline-block; 
	 position:	relative;
}
.linknav.animate:after {
	content: 	'';
	position:	absolute;
	background:	var(--color5);
	height:		2px;
  	width: 		0;
  	left: 		0;
	bottom:		-4px;
	transition: width .2s 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);
  	}
}