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

/**
 * @license
 * MyFonts Webfont Build ID 3648586, 2018-10-01T04:52:54-0400
 * 
 * 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: AauxNext-Bold by Positype
 * URL: https://www.myfonts.com/fonts/positype/aaux-next/bold/
 * Copyright: Copyright (c) 2008 by Neil Summerour. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: AauxNext-Regular by Positype
 * URL: https://www.myfonts.com/fonts/positype/aaux-next/regular/
 * Copyright: Copyright (c) 2008 by Neil Summerour. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: AauxNext-Light by Positype
 * URL: https://www.myfonts.com/fonts/positype/aaux-next/light/
 * Copyright: Copyright (c) 2008 by Neil Summerour. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * Webfont: SerifaStd-Light by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/serifa/45-light/
 * Copyright: Copyright © 2014 Monotype Imaging Inc. All rights reserved.
 * Licensed pageviews: 250,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3648586
 * 
 * © 2018 MyFonts Inc
*/


@font-face {
	font-family: "Spezia-Normal-Regular";
	src: url('fonts/Spezia-Normal/SpeziaWebTrial-Regular.woff2') format('woff2'), 
	url('fonts/Spezia-Normal/SpeziaWebTrial-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/*@font-face {
	font-family: "Spezia-Normal-Book";
	src: url('fonts/Spezia-Normal/SpeziaWebTrial-Book.woff2') format('woff2'), 
	url('fonts/Spezia-Normal/SpeziaWebTrial-Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}*/

/*@font-face {
	font-family: "Spezia-Normal-Medium";
	src: url('fonts/Spezia-Normal/SpeziaWebTrial-Medium.woff2') format('woff2'), 
	url('fonts/Spezia-Normal/SpeziaWebTrial-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
*/
@font-face {
	font-family: "Spezia-Normal-SemiBold";
	src: url('fonts/Spezia-Normal/SpeziaWebTrial-SemiBold.woff2') format('woff2'), 
	url('fonts/Spezia-Normal/SpeziaWebTrial-SemiBold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Spezia-Normal-Bold";
	src: url('fonts/Spezia-Normal/SpeziaWebTrial-Bold.woff2') format('woff2'), 
	url('fonts/Spezia-Normal/SpeziaWebTrial-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}






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

html { 
	height: 					100%;
	width: 					100%;
	margin:					0;	
	margin-top:				0;
	padding:					0; 
	list-style:				none; 
	
	/*
	cursor: 					url(../images/wief_cursor.png), auto;
	*/
	
	/* 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;
	overflow-x:				hidden;

	/* Setting fade transition for color changing */
	background-color:		#FFF;
	transition: 			background-color 1s ease;
}

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


/* Elemente im Div ausrichten */

/*.v-align {
	position:			relative;
	top: 					50%;
	-webkit-transform:translateY(-50%);
	-ms-transform: 	translateY(-50%);
	transform:			translateY(-50%);
}
.v-bottom {
	position:			relative;
	top: 					62%;
}*/


.v-bottom-col,
.v-bottom-row,
.v-center-row {
	display:				flex;
  	flex-wrap: 			nowrap;
  	align-content: 	normal;
}
	.v-bottom-col {
	  	flex-direction: 	column;
	}
	.v-bottom-row {
    	flex-direction:	row;
    	align-items:		flex-end;
    	justify-content: 	flex-start;
	}
	.v-center-row {
		flex-direction: 	row;
	  	justify-content: 	center;
	}


/* 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: 	#2F525A;		/* estate emerald */  
	--color2: 	#DDD4CB;		/* off white */ 
	--color3: 	#E5A87A;		/* apricot bliss */ 
	--color4: 	#414142;		/* soft black 90 */

	--color5: 	#9C9C9C;		/* black 50 */
}

/* For Change BG Color Function */
.color1 { background-color: var(--color1); }
.color2 { background-color: var(--color2); }
.color3 { background-color: var(--color3); }
.color4 { background-color: var(--color4); }
.color5 { background-color: var(--color5); }



/* =============================================================================
   Typography
   ========================================================================== */
   
/* GENERAL */
body, 
button, 
input, 
select, 
textarea,
p, 
a { 
	font-family:	'Spezia-Normal-Regular', Arial, sans-serif; 
	color:			var(--color1); font-weight: normal; 
	font-style: 	normal; 
	padding: 		0; 
	margin:			0; 
	/*hyphens: auto;*/
}


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


/* HEADLINES 
h1  			{ font-family: 'SerifaStd-Light'; color: #FFF; } 			/* Titel Kapitel  
h2 			{ font-family: 'AauxNext-Bold'; } 								/* Titel Absatz  
h3 			{ text-decoration: underline; } 									/* Titel Subtitel 
*/ 

/* TEXTE */
.ch_claim		{ color: #FFF; }																/* Claim groß */
.ch_intro 		{  }	/* Intro */
.ch_rubictitle	{  } 																				/* Rubrikentitel */ 
.ch_text			{  }																				/* Fließtext */
.ch_notes		{  }																				/* Marginalien */

/* BUTTONS */
.ch_bt_label	{ text-transform: uppercase; }	 										/* Label Button */



/* HIGHLIGHTING */
.invers 			{ color: #FFF; }
.shadow			{ text-shadow: 20px 1px 80px rgba(0,0,0,0.5); }
.shadow-white	{ text-shadow: 20px 1px 80px #FFF; }
.center 			{ text-align: center; }
.right 			{ text-align: right; }
.nowrap 			{ white-space: nowrap; }

.positiv			{ color: var(--color1); }													/* solid green */
.invers			{ color: #FFF; }															/* white */
.grey				{ color: var(--color5); }													/* lack 50 */
.light			{ font-family: 'Spezia-Normal-Regular', Arial, sans-serif; }	/* Medium */

.strong,
strong			{ font-family: 'Spezia-Normal-SemiBold', Arial, sans-serif; }	/* Bold (Tiny MCE) */

.underline 		{ text-decoration: underline; }
.label   		{ text-transform: uppercase; 
					  color: #FFF; 
					  background-color: var(--color3); 
					  padding: 0 5px 0 5px; 

					  display: inline-block;
					  margin-bottom: 0.8rem; 
					}



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

/* BASIS 
a,a:hover,
a:focus,
a:active	{ outline:0; }*/
a			{ text-decoration: underline; outline:0; }
a:hover	{ text-decoration: none; color: var(--color3); }
a:focus	{  }
a:active	{  }

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

/* NOTES */
.linknotes			{  }
.linknotes:hover	{  }
.linknotes:visited 	{  }
.linknotes:active	{  }

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


/* HIGHLIGHTING */
.active				{ color: var(--color3); text-decoration: none; }	/* apricot */
.underlined			{ text-decoration: underline; }							/* underlined */




/* =============================================================================
   Image
   ========================================================================== */
   
img 				{ width: 100%;}
.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.txt {
	list-style: 		outside;
	margin-left: 		0;
	padding-left: 		18px;
	text-align: 		left;
}




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

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

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


   



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


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

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

	/*padding:		0 var(--pagemargin) 0 var(--pagemargin);*/
    													/*background-color: #E1E1E1;*/
}
	/* BOX */
	.grid-4 .box,
	.grid-3 .box{
    	grid-column: span 1; 					/*border: solid 1px #6B00FF;*/
  	}


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




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





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

/* LANDSCAPE 3:2 */
.ratio-3-2 {
	/* aspect-ratio: auto 3 / 2; */

	/* fallback aspect-ratio 3:2 */
	width: 			100%;
	padding-top:	66.67%; 
}

/* PORTRAIT 3:4 */
.ratio-3-4 {			
	/*aspect-ratio: auto 3 / 4; */

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





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

/* DEFAULT */
.button,
.button-boarder,
.button-no-boarder {
	display: 			block;
	border-radius:		25px;
	border: 				none;
	text-align: 		left;
	padding: 			8px 20px 6px 20px;
	width: 				auto;
	transition: 		all 0.5s;
	cursor: 				pointer;
	/*float: 				left;*/
														/*border: solid 1px #FC253A;*/
}
	/* INVERS: LABEL */
	.button.invers .ch_bt_label,
	.button-boarder.invers .ch_bt_label,
	.button-no-boarder.invers .ch_bt_label{
			color: white;
	}
		/* INVERS: ARROW */
		.button.invers span:after,
		.button-boarder.invers span:after,
		.button-no-boarder.invers span:after{

			background-image:	url('../images/bt_arrow_invers.svg') !important;

		}



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

	/* 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 var(--color1);
	}
		.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:after,
		.button-boarder span:after, 
		.button-no-boarder span:after {

			/*
			content: 	'';
			position:	absolute;
			opacity:		0;

			border-bottom: 1px solid #FFF;
			width:			35px;
			left:				0;
			margin: 			8px 10px 8px 0;
			*/
							
			margin-left: 		30px;
			position: 			relative;
  			bottom: 				-2px;	

			background-image:	url('../images/bt_arrow.svg');
			background-size:	70px 19px;
			display: 			inline-block;
			width:				70px; 
			height:				19px;
			content:				"";

			transition: 		0.3s;





			/*background-color: white;
			-webkit-mask: url(../images/bt_arrow.svg) no-repeat;
    		mask: url(../images/bt_arrow.svg) no-repeat;
    		background-size:	85px 21px;
			display: 			inline-block;
			width:				85px; 
			height:				21px;*/

    		/*-webkit-mask-image: url('../images/bt_arrow.svg') no-repeat 85px 21px;
    		mask-image: url('../images/bt_arrow.svg') no-repeat 85px 21px;*/
    		/*-webkit-mask: url(../images/bt_arrow.svg) no-repeat 85px 21px;
    		mask: url(../images/bt_arrow.svg) no-repeat 85px 21px;*/

													/*border: solid 1px #21AD11;	*/								
		}

			/* BUTTON (NO BORDER) 
			.button-no-boarder span:after{
				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: 5px;
			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:after,
		.button-boarder:hover span:after,
		.button-no-boarder:hover span:after {
			opacity:			1;
			margin-left:	50px;
		}
			/* FOR JS TEASER HOVER */
			.hovered span:after{
				opacity:			1;
				margin-left:	50px;
			}
			




/*-------------------------------*/
/*		     BUTTON: NAV 		      */
/*-------------------------------*/


.l-nav li {
	padding-bottom: 12px;
											/*border: solid 1px #FC253A;*/
}
	.l-nav a{
		transition: 	0.3s;
											/*border: solid 1px #FC253A;*/
	}
		.l-nav a:hover/*,
		.l-nav a.active*/{
			padding-left:	45px;
		}

		.l-nav a:before/*,
		.l-nav a.active:before*/ {
			content: '' !important;
			position:	absolute;
			opacity:	0;
			transition: 0.3s;

			border-bottom: 2px solid var(--color1);
			width:	35px;
			left:	0;
			margin: 15px 10px 20px 0;
		}
		.l-nav a:hover:before/*,
		.l-nav a.active:before*/ {
			opacity:		1;
		}




/*-------------------------------*/
/*     	  ANI: FADE-IN          */
/*-------------------------------*/

.fade-in {
	opacity: 0;
	animation: fade-in 0.7s;
	animation-fill-mode:forwards; 	/* stop at last keyframe */
	animation-delay: 0.5s;
}
@keyframes fade-in {
	0% {
  	}
  	100% {
    	opacity: 1;
  	}
}




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



/*-------------------------------*/
/*     ANI: PARALLAX (ADDON)     */
/*-------------------------------

.rellax{
	position: 	absolute;
	z-index: 	-1;

	/*background-color: #25A295;
}
*/



/*-------------------------------*/
/*      IMAGE: ROUND CORNERS     */
/*-------------------------------*/

.border-radius-top-l {
	border-top-left-radius: 				50px 50px;
	-webkit-border-top-left-radius: 		50px 50px;
	-moz-border-radius-topleft: 			50px 50px;
}
.border-radius-top-r {
	border-top-right-radius: 				50px 50px;
	-webkit-border-top-right-radius: 	50px 50px;
	-moz-border-radius-topright: 			50px 50px;
}
.border-radius-bottom-r {
	border-bottom-right-radius: 			50px 50px;
	-webkit-border-bottom-right-radius: 50px 50px;
	-moz-border-radius-bottomright: 		50px 50px;
}
.border-radius-bottom-l {
	border-bottom-left-radius: 			50px 50px;
	-webkit-border-bottom-left-radius: 	50px 50px;
	-moz-border-radius-bottomleft: 		50px 50px;
}