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


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3d6033");


@font-face {
  	font-family: 'MessinaSans_Bold';
	src: url('fonts/MessinaSans_Bold/MessinaSansWeb-Bold.woff') format('woff'), 	/* Super Modern Browsers */
        url('fonts/MessinaSans_Bold/MessinaSansWeb-Bold.woff2') format('woff2');	/* Pretty Modern Browsers */
	font-weight:	normal;
	font-style:		normal;
	font-display:	swap;
}
@font-face {
  	font-family: 'MessinaSans_Regular';
	src: url('fonts/MessinaSans_Regular/MessinaSansWeb-Regular.woff') format('woff'), 	/* Super Modern Browsers */
        url('fonts/MessinaSans_Regular/MessinaSansWeb-Regular.woff2') format('woff2'); /* Pretty Modern Browsers */
	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(--color4); color: #FFFFFF; }
::selection						{ text-shadow:none; background:	var(--color4); color: #FFFFFF; }
img::selection					{ background: var(--color4); }
img::-moz-selection			{ background: var(--color4); }
body							{ webkit-tap-highlight-color: var(--color4); }

/* Elemente im Div vertikal zentieren */
.v-align {
	position:				relative;
	top: 						50%;
	-webkit-transform: 	translateY(-50%);
	-ms-transform: 		translateY(-50%);
	transform:				translateY(-50%);
}

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




/* =============================================================================
   Colors
   ========================================================================== */
   
:root {
	
	/* No Support: IE 11, Edge < 15, Safari < 9.1,  */
	--color1: 	#EE7330;	/* a+t power orange */
	--color2: 	#424B55;	/* a+t solid stone */
	--color3: 	#ECE7DE;	/* a+t off white */
	--color4: 	#686F77;	/* a+t solid stone 80 */
	--color5: 	#000000;	/* --- */
	--color6: 	#000000;	/* --- */
}





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

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


/* HEADLINES */
h1, h2, h3, h4, h5 { 
	font-family:	'MessinaSans_Bold', 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: 'MessinaSans_Bold'; }		/* Title */
.ch_intro 			{ font-family: 'MessinaSans_Bold'; }		/* Intro */
.ch_text				{  }													/* Fließtext */
.ch_notes			{ font-family: 'MessinaSans_Regular'; }	/* Marginalien */
.ch_notes_title	{ font-family: 'MessinaSans_Bold'; }		/* Marginalien */


/* FORMATS, EFFECTS, COLOR */
.invers 			{ color: #FFF; }
.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; }
a:hover	{ color: var(--color1); }
a:focus	{  }
a:active	{  }

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


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

/* NAVIGATION */
.linknav				{ color: var(--color1); text-decoration: none; }
.linknav:hover		{ color: var(--color4); !important; }
.linknav:visited 	{ color: var(--color1); }
.linknav:active	{ color: var(--color1); }

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

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


/* =============================================================================
   Image
   ========================================================================== */
   
.img-centered { margin:0 auto }




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

/* no default list elements */
ol, ul {
	list-style: 		none;
	list-style-image: none;
	margin: 				0;
	padding: 			0;
}


/* custom style */
ul {
	list-style-type: "+ ";
	margin-left:  	15px;
}
li {
	padding-bottom:	10px;
}
	/*
	li:before {
	    content: 		"+";
	    margin-right: 4px;
	    color:			var(--color1) ;
	}*/
	li::marker {
	  color: var(--color1);
	}






/* =============================================================================
   Icons
   ========================================================================== */
   
i{
	position: 			relative;
	display: 			inline-block;
	width: 				40px;
	height: 				40px;
	margin-right:		10px;
	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.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);
}  








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


/*-------------------------------*/
/*     Formate Aspect Ratio      */
/*-------------------------------*/

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

   

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

/* COLUM */
.col { 																								/* Block mit Abstand */
			display:				inline-block;
			float:				left; 
			margin-right: 		4%;
			/*background-color: 	#F0F;*/
}
.col img	{ width: 100%; }


/* WIDTH */
.s1			{ width: 22%; }															/* Block 1-spalte breit */
.s2			{ width: 48%; }															/* Block 2-spalten breit */
.s1-3			{ width: 30.66%; display: table; }									/* Block 1/3-spalten breit */

.s3			{ width: 74%; display: table; }										/* Block 3-spalten breit */
.s4			{ width: 100%; display: table; }										/* Block 3-spalten breit */

/* POSITION */
.s1-center	{ width: 22%; margin-right: 39%; margin-left: 39%; }					/* Block 1-spalte breit, mittig */
.s2-center	{ width: 48%; margin-right: 26%; margin-left: 26%; }					/* Block 2-spalten breit, mittig */
.s3-center	{ width: 74%; margin-right: 13%; margin-left: 13%; }					/* Block 3-spalten breit, mittig */

.s1-space	{ width: 22%; margin-right: 78%; }										/* Block 1-spalte breit, rechts leer */
.s2-space	{ width: 48%; margin-right: 52%; }										/* Block 2-spalten breit, rechts leer */

.last		{ float: right !important; margin-right: 0 !important; padding-right: 0 !important; }	/* Block letzter ohne padding */
.box-bottom	{ bottom: 5vh; position: absolute; vertical-align: bottom; }							/* Block unten ausrichten */


/* SPACING */
.spacing1x{
	margin-bottom:			20px;
	display: 				inline-block;
}
.spacing2x{
	margin-bottom:			40px;
	display: 				inline-block;
}
.spacing3x{
	margin-bottom:			60px;
	display: 				inline-block;
}
.spacing4x{
	margin-bottom:			80px;
	display: 				inline-block;
}
.spacing5x{
	margin-bottom:			100px;
	display: 				inline-block;
}
.spacing6x{
	margin-bottom:			120px;
	display: 				inline-block;
}
.spacing7x{
	margin-bottom:			140px;
	display: 				inline-block;
}




/*-------------------------------*/
/*			 	 BUTTON		    		*/
/*-------------------------------*/

/* DEFAULT */
.button,
.button-boarder,
.button-no-boarder {
	display:			inline-block;
	border-radius:		25px;
	border: 				none;
	text-align: 		left;
	padding: 			12px 20px 12px 20px;
	width: 				auto;
	transition: 		all 0.5s;
	cursor: 				pointer;
	/*float: 				left;*/
}

	/* BUTTON WITH BORDER */
	.button-boarder {
		background-color:	transparent;
		border: 			solid 2px var(--color1);
	}
	.button-boarder.greyed-out {
		border: 			solid 2px var(--color4);
	}
		.button-boarder .ch_bt_label{
			color: var(--color1);
		}
		.button-boarder.greyed-out .ch_bt_label{
			color: var(--color1);
		}


	/* BUTTON (NO BORDER) */
	.button-no-boarder {
		background-color: transparent;
		padding-left: 0;
	}
		.button-no-boarder .ch_bt_label{
			color: var(--color1);
		}

	/* DISABLED */
	.button:disabled,
	.button-boarder:disabled,
	.button-no-boarder:disabled{
		opacity:		0.5;
		pointer-events: none;
	}


	/* HOVER */
	.button:hover,
	.button-boarder:hover{
		background-color:	var(--color1);
		/*border: 			solid 2px #FFF;*/
	}
		/*.button span,
		.button-boarder span,
		.button-no-boarder span {
			cursor:		pointer;
			display:	inline-block;
			position:	relative;
			transition: 0.3s;*/
													/*border: solid 1px #FC253A;*/
		}
		.button span:before,
		.button-boarder span:before, 
		.button-no-boarder span:before {
			/*content: 	'';
			position:	absolute;
			opacity:		0;

			border-bottom: 1px solid #FFF;
			width:			35px;
			left:				0;
			margin: 			8px 10px 8px 0;*/
		}
			/* BUTTON (NO BORDER) */
			.button-no-boarder span:before{
				border-bottom: 2px solid var(--color1);
			}

		.button:hover span,
		.button-boarder:hover span,
		.button-boarder.greyed-out:hover span,
		.button-no-boarder:hover span {
			/*padding-left: 40px;*/
			color: 		#FFF;
		}
			/* BUTTON (NO BORDER) */
			.button-no-boarder:hover span {
				color: 	var(--color1);
			}
			/* FOR JS TEASER HOVER */
			.hovered span{
				/*padding-left: 40px;*/
				color: 	var(--color1);
			}

		.button:hover span:before,
		.button-boarder:hover span:before,
		.button-no-boarder:hover span:before {
			opacity:	1;
			/*right:	55px;*/
		}
			/* FOR JS TEASER HOVER */
			.hovered span:before{
				opacity:	1;
				/*right:	55px;*/
			}