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

/**
 * @license
 * MyFonts Webfont Build ID 4293179, 2022-01-10T14:39:09-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Rotunda-Light by TipoType
 * URL: https://www.myfonts.com/fonts/tipotype/rotunda/light/
 * 
 * Webfont: Rotunda-Bold by TipoType
 * URL: https://www.myfonts.com/fonts/tipotype/rotunda/bold/
 * 
 * 
 * Webfonts copyright: © TipoType 2019, all rights reserved.
 * 
 * © 2022 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work 
@import url("//hello.myfonts.net/count/41823b");*/
  
@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%; 

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

/* ELEMENTS: BOTTOM */
.v-bottom-col {
    display: 			flex;
    flex-direction:		column;
    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;
}
/* 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; }

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




/* =============================================================================
   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,
p, 
a 			{ font-family: 'PPTelegraf-Regular', Arial, sans-serif; color: var(--color1); font-weight: normal; font-style: normal; padding: 0; margin: 0; }


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


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



/* TEXT */
.ch_intro 			{ font-family: 'PPTelegraf-Regular', Arial, sans-serif;  }	/* Intro */
.ch_body			{  }														/* Bodytext = root */
.ch_note			{  }														/* Notes */
.ch_rubric-title	{ text-transform: uppercase; } 								/* Rubric Title = ch_note */
.ch_bt_label		{  }														/* Rubric Title = ch_note */
.ch_facts			{  }


/* EFFECTS, COLOR */
.invers 		{ color: #FFF; }
.shadow			{ text-shadow: 20px 1px 80px rgba(0,0,0,0.5); }
.shadow-white	{ text-shadow: 20px 1px 80px #FFF; }


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

/* FONT HIGHLIGHT */
/*.invers		{ color: #FFF !important; }								Weiss */
.medium		{ font-family: 'PPTelegraf-Bold', Arial, sans-serif; }		/* Medium */
.book		{ font-family: 'PPTelegraf-Regular', Arial, sans-serif; }	/* Book */
.strong,
strong		{ font-family: 'PPTelegraf-Bold', Arial, sans-serif; }		/* Bold (Tiny MCE) */
.red 		{ color: var(--color4); }
.grey 		{ color: #B3B3B3; }

/* .positiv	{ color: #29363F; }					Antrazit 
.underlined	{ text-decoration: underline; }		Unterstichen */




/* =============================================================================
   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			{ /*font-family: 'AvenirStdWeb95Black', Arial, sans-serif; padding: 0; margin: 0;*/ }
.link_intro:hover	{  }
.link_intro:visited {  }
.link_intro:active	{  }
.link_intro.active 	{  }


/* NAVIGATION */
.linknav 			{ border-bottom: none; font-family: 'PPTelegraf-Regular', Arial, sans-serif; color: var(--color4); }
.linknav:hover 		{ color: var(--color1); }
.linknav:visited 	{ }
.linknav:active		{ }
.linknav.active 	{ color: var(--color1); border-bottom: 3px solid var(--color1); padding-bottom: 5px !important; }


/* FOOTER META NAV */
.linknavfooter 			{ border-bottom: none; color: #FFF; }
.linknavfooter:hover 	{ color: var(--color1); }
.linknavfooter:visited 	{ }
.linknavfooter:active	{ }





/* =============================================================================
   Icons
   ========================================================================== */

i{
	position: 			relative;
	display: 			inline-block;
	width: 				40px;
	height: 			40px;
	margin-right:		5px;
	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: var(--color4); 
}
i.icon.linkedin { 
    -webkit-mask-image: url(../images/icon_linkedin.svg);
    mask-image: 		url(../images/icon_linkedin.svg);
}  
i.icon.xing { 
    -webkit-mask-image: url(../images/icon_xing.svg);
    mask-image: 		url(../images/icon_xing.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.phone { 
    -webkit-mask-image: url(../images/icon_phone.svg);
    mask-image: 		url(../images/icon_phone.svg);
}  



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

.img-centered { margin:0 auto }




/* =============================================================================
   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: 	9vw;		/* padding left & right */
}

   
/*-------------------------------*/
/*      GRID: 4-SPALTIG          */
/*      GRID: 3-SPALTIG          */
/*-------------------------------*/


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

	column-gap: 	4%;
    grid-row-gap:	20px;

    padding:	0 var(--pagemargin) 0 var(--pagemargin);
    											/*background-color: #E900E9;*/
}
	/* BOX */
	.grid-4 .box,
	.grid-3 .box{
    	grid-column: span 1; 					/*background-color: #0200ED;*/
  	}


/* 4-COLUMN GRID  */
.grid-4 {
    grid-template-columns:	22% 22% 22% 22%;
}
	/* COLUMN START-END (from Position 2-4)*/
	.grid-4 .box.colpos-2		{ grid-column:2 }
	.grid-4 .box.colpos-2-to-3	{ grid-column-start: 2; grid-column-end: span 2; }
	.grid-4 .box.colpos-2-to-4	{ grid-column-start: 2; grid-column-end: span 3; }
	.grid-4 .box.colpos-3		{ grid-column:3 }
	.grid-4 .box.colpos-3-to-4	{ grid-column-start: 3; grid-column-end: span 2; }
	.grid-4 .box.colpos-4		{ grid-column:4 }

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

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


/* 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-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: SQUARE */
.ratio-square {  
	position:	relative;
	display:	block;		  /*border: 	1px solid black;*/
}
	.ratio-square:before {
		content:		"";
		display:		block;
		padding-top:	100%; /* 1:1 Aspect Ratio */
	}
	.ratio-square .content {
		position: absolute;
		top:		0px;
		left:		0px;
		right:		0px;
		bottom: 	0px;
	}
/* ASPECT RATIO: 3 to 2 */
.ratio-3-2 {
	position:	 relative;
	display:	 block;
	width: 		 100%;
	padding-top: 66.66% !important; /* 3:2 Aspect Ratio */
}
	.ratio-3-2 .content {
		position: absolute;
		top:		0px;
		left:		0px;
		right:		0px;
		bottom: 	0px;
	}
/* ASPECT RATIO: 2 to 3 */
.ratio-2-3 {
	position:	 relative;
	display:	 block;
	width: 		 100%;
	padding-top: 150% !important; /* 2:3 Aspect Ratio */
}
	.ratio-2-3 .content {
		position: absolute;
		top:		0px;
		left:		0px;
		right:		0px;
		bottom: 	0px;
	}



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

.button,
.button-boarder,
.button-light {
	display:			inline-block;
	border-radius:		30px;
	background-color: 	var(--color4);
	border: 			none;
	text-align: 		left;
	padding: 			10px 20px 10px 20px;
	width: 				auto;
	transition: 		all 0.5s;
	cursor: 			pointer;
	float: 				left;
}
.button:disabled,
.button-boarder:disabled,
.button-light:disabled{
	opacity:		0.5;
	pointer-events: none;
}

/* BUTTON WITH BORDER */
.button-boarder {
	background-color:	transparent;
	border: 			solid 3px #FFF;
}
/* BUTTON INVERS */
.button-light {
	background-color: 	#FFF;
}
	.button-light .ch_bt_label{
		color: var(--color1);
	}

	.button span,
	.button-boarder span,
	.button-light span {
		cursor:		pointer;
		display:	inline-block;
		position:	relative;
		transition: 0.3s;
	}
	.button span:after,
	.button-boarder span:after, 
	.button-light span:after {
	  	/*content:	'\00bb';*/
		content:	url('../images/arrow.svg');
		transform:	scale(1.6);
		position:	absolute;
		opacity:	0;
		top: 		0;
		right:		-20px;
		transition:	0.3s;
	}
		/* BUTTON INVERS */
		.button-light span:after{
			content: url('../images/arrow-blue.svg');
		}

	.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;
	}




/*-------------------------------*/
/*      ARROW BUTTON (CIRCLE)    */
/* 		& DOWNLOADS              */
/*-------------------------------*/

.button-light-arrow,
.button-grey-arrow,
.button-grey-download {
	display:			inline-block;
	border-radius:		50%;
	background-color: 	#FFF;
	border: 			none;
	text-align: 		left;
	width: 				auto;
	height: 			44px;
	width:  			44px;
	cursor: 			pointer;
}
.button-grey-arrow,
.button-grey-download {
	background-color: 	var(--color4);
}
	.button-light-arrow span,
	.button-grey-arrow span,
	.button-grey-download span {
		cursor:		pointer;
		display:	inline-block;
		position:	relative;
	}
	.button-light-arrow span:after,
	.button-grey-arrow span:after {
		content: url('../images/arrow-blue.svg');
		transform:	scale(1.6);
		position:	absolute;
		opacity:	1;
		/*top: 		-16px;*/
		top: 		-14px;
		left:		17.5px;
	}
	.button-grey-arrow span:after {
		content: url('../images/arrow-white.svg');
		top: 		-12px;
	}
	.button-grey-download span:after {
		content: url('../images/button-download-white.svg');
		transform:	scale(1.6);
		position:	absolute;
		opacity:	1;
		top: 		-10px;
		left:		17px;
	}



/*-------------------------------*/
/*     BUTTON / ICON (CIRCLE)    */
/*-------------------------------*/

.icon-number,
.button-mail,
.button-mail-light {
	display:			inline-block;
	border-radius:		50%;
	background-color: 	var(--color4);
	border: 			none;
	text-align: 		left;
	width: 				auto;
	transition: 		all 0.5s;
	height: 			44px;
	width:  			44px;
	cursor: 			pointer;
	float: 				left;
}
.button-mail-light {
	background-color: 	#FFF;
}
	.icon-number span,
	.button-mail span,
	.button-mail-light span {
		cursor:		pointer;
		display:	inline-block;
		position:	relative;
	}
	/* MAIL */
	.button-mail span:after,
	.button-mail-light span:after {
		content: 	url('../images/icon_mail-noborder.svg');
		transform:	scale(0.9)!important;
		position:	absolute;
		top: 		-28px;
		left:		-3px;
	}
	.button-mail-light span:after {
		content: 	url('../images/icon_mail-noborder_blue.svg');
	}

	/* NUMBER */
	.icon-number {
		/*cursor: 	default !important;*/
	}
	.icon-number span:after {
		content: 	'1';
		transform:	scale(1.5)!important;
		position:	absolute;
		top: 		-8px;
		left:		17px;
		/*cursor: 	default !important;*/
	}
		.icon-number.nr2 span:after { content: '2'; }
		.icon-number.nr3 span:after { content: '3'; }
		.icon-number.nr4 span:after { content: '4'; }





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

/* TEASER: ANIMATE UNDERLINE */
.underline-small.animate{
    display:		inline-block;
    text-decoration:none !important;		
    cursor: 		pointer;
}
.underline-small.animate::after{
    transition: 	width .3s ease;
}
.underline-small.animate:hover::after{
    width:		100%;
}



/* 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:		-5px;
	transition: width .3s ease;
}
.linknav.animate:hover:after {
	width: 		100%;
}





/*-------------------------------*/
/*      HOVER: ZOOM ON IMAGE     */
/*-------------------------------*/

.zoom{
	overflow: hidden;
}
.zoom img {
	transition: transform 5s, filter 0.5s ease-in-out;
	transform-origin: center center;
	filter: brightness(100%);
}
.zoom:hover img,
.teaserbloc:hover ~ .zoom{
	
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);


}

/*.zoom {
	overflow: hidden;
}
.zoom img {
	transition: transform 2s, filter 0.5s ease-in-out;
	transform-origin: center center;
}
.zoom:hover img{
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 
  transform: scale(1.1); 
}
*/