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

/* ROOT TEXT */
html 					{ font-size: 20px; line-height: 1.5; letter-spacing: 0.03em;}

/* HEADLINES */
h1 					{ } 	
h2 					{ }																														
h3 					{ font-size: 1.0rem; line-height: 1.4; padding-bottom: 5px; }												/* Absatztitel */ 


/* TEXTE */
.ch_head 			{ font-size: 3.5rem; line-height: 1.1; }																		/* Headline */
.ch_head_medium 	{ font-size: 2.6rem; line-height: 1.1; }																		/* Headline */

.ch_title			{ font-size: 0.7rem; line-height: 1.8; letter-spacing: 0.1em; text-transform: uppercase; }	/* Titel */
.ch_intro 			{ font-size: 1.4rem; line-height: 1.4; }																		/* Intro Hero */
.ch_text				{ }																														/* FlieƟtext */
.ch_rubrictitle   { font-size: 0.6rem; line-height: 1.4; letter-spacing: 0.15em; text-transform: uppercase;	}	/* Rubrikentitel */
.ch_notes			{ font-size: 0.6rem; }																								/* Marginalien */
.ch_notes_title	{ font-family: 'TTNormsProBold'; }																				/* Marginaltitel */
.ch_bt_label		{ font-size: 1.0rem; }																								/* Button Label */


/*
.ch_intro		{ font-size: 0.8rem; line-height: 1.8; letter-spacing: 0.1em; text-transform: uppercase;}	/* Intro 
.ch_notes,
.ch_notes_title{ font-size: 0.6rem; line-height: 1.8; letter-spacing: 0.15em; text-transform: uppercase; }	/* Marginalien 
*/





/* =============================================================================
   Links
   ========================================================================== */
   
/* NOTES */
.linknotes				{ font-size: 0.6rem; }		/*Marginalien*/

/* NAVIGATION */
.linknav					{ font-size: 1.4rem }
.linknav-small			{ }




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

   

/* =============================================================================
   Other Elements
   ========================================================================== */



/* =============================================================================
   Embedded Content
   ========================================================================== */




/*-------------------------------*/
/*             NAVBAR            */
/*-------------------------------*/

#navbar{
	position:  			absolute;
	width: 				100%;
	height: 				auto;
	padding: 			var(--pagemargin);
	z-index: 			1001;
																	/*border: solid 1px #00F;*/
}
	#navbar .burger {
	 	position:	fixed;
		/*left:  	3vw;*/
		top: 			calc(3vw - 8px);	/* Hack */

		box-sizing:	border-box;
		height: 		36px;
		cursor:		pointer;
		z-index:		2;
																	/*border: solid 1px #00F;*/
		/* more styling at base.css */
	}
	#navbar .burger .invers {
	 	border: solid 1px #00F;
	}

	#navbar .signet,
	#navbar .wordmark{
		display: 				inline-block;
		vertical-align:		top;
		
		background-size: 		auto 100%;
		background-position:	left bottom;
	   background-repeat:	no-repeat;
	}
		#navbar .signet{
			position: 			fixed;
			padding: 			var(--pagemargin);
			bottom: 				var(--pagemargin);

			background-image:	url('../images/fs_signet.png');
			background-size: 	auto 85px;

			z-index: 			1002;
																	/*background-color: #3DFFB5;*/
		}
		#navbar .wordmark{
		   background-image:		url('../images/fs_lettering.png');
			background-position:	0 bottom;
			width: 					204px;
			height: 					36px; /* 0.6 from logotype */
			float: 					right;
			cursor:					pointer;
		}
			#navbar .wordmark.invers{
			   background-image:		url('../images/fs_lettering_white.png');
			}
		#navbar .language{
			text-align: right;
																	/*background-color: #B5BB1B;*/
		}
	/*	
	#navbar .bt_back{
		display: 				inline-block;

		float: 					right;
		width: 					30px;
		height: 					45px;
		
		background: 			url("../images/bt_back.svg");
		background-size: 		auto 30px;
		background-position:	right bottom;
	   background-repeat:	no-repeat;
		
		/*border: 				solid 1px #F00;
	}*/



/*-------------------------------*/
/*			 SIDEBAR (MENU)         */
/*-------------------------------*/

/* Menu width */
:root {
	--menue-width: 33vw;
}

#sidenav {
	height:		100%;
	width:  		var(--menue-width);
	position:	fixed;
	z-index: 	1;
	top: 			0;
	left: 		calc(var(--menue-width) *-1 );
	background: var(--color5); 
	overflow-x: hidden;
	overflow-y: hidden;

	transition: 0.3s ease 0s;
}
	#sidenav .menu {
		margin:	25vh var(--pagemargin) 0 3vw;
	}
		#sidenav .menu li a{
			display:inline-block;
			padding-top: 5px !important;
		}
	#sidenav footer {
	}
		#sidenav footer .language {
			/*display: none !important;*/
			visibility:  hidden;
		}
	


	/* OPEN */
	#sidenav.-menu-open {
		left: 0;
	}
		#sidenav.-menu-open .menu{
			-webkit-transform:translateY(0);
			-ms-transform:translateY(0);
			transform:translateY(0);
		}
		#sidenav.-menu-open .menu li,
		#sidenav.-menu-open .menu footer {
			opacity: 0;
			animation: fade-in-move-right 0.7s;		/* function at base.css */
			animation-fill-mode:forwards; 			/* stop at last keyframe */

		}
			#sidenav.-menu-open .menu li:nth-child(1) {animation-delay: 0.0s; }
			#sidenav.-menu-open .menu li:nth-child(2) {animation-delay: 0.1s; }
			#sidenav.-menu-open .menu li:nth-child(3) {animation-delay: 0.2s; }
			#sidenav.-menu-open .menu li:nth-child(4) {animation-delay: 0.3s; }
			#sidenav.-menu-open .menu footer 			{animation-delay: 0.6s; }


	/* OPEN (> Push Content) */
	#page.-menu-open {
		margin-left: var(--menue-width);
	}
	/* OPEN (> Wordmark in black) */
	#navbar .wordmark.-menu-open{
		background-image:		url('../images/fs_lettering.png');
	}




/*-------------------------------*/
/*        	HERO TEASER     	   */
/*-------------------------------*/

.hero-teaser{			
}

	/* BG IMAGE */
	.hero-teaser .image-bg{
		position:	relative;
		/*height:	70vh;*/
		height:		100vh;

		background-position: center;
		background-size: 		cover;
		background-repeat: 	no-repeat;

		/*filter: grayscale(0.20);*/
		background-color: rgb(0 0 0 / 0.2);  /*black and 20% transparent*/ 
		background-blend-mode: multiply;

		/*
		background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/hero_1.jpg');
		*/
	}
		.hero-teaser .image-bg.no-blendmode{
			background-color:			unset;
			background-blend-mode:	unset;
			/*background-color:  #FC00ED;*/
		}
		/* TITLE */
		.hero-teaser .image-bg .title{
			/*background-color:  #FC00ED;*/
		}

		/* RUBRIC TITLE */
		.hero-teaser .image-bg .rubrictitle {
			height:				calc(80px + 80px);

			position:			absolute;
			bottom:				0;

			background-image: linear-gradient(#FFF, #FFF);
	  		background-size: 1px 80px;
	  		background-repeat: no-repeat;
	  		background-position: bottom center;

			/*background-color:  #FC00ED;*/
			/*border: solid 1px #00F;*/
		}
			.hero-teaser .image-bg .rubrictitle.lineBlack{
				background-image: linear-gradient(#000, #000);
			}


/* INTRO TEXT */
.hero-introtext {
	position:			relative;
	padding-top:  		130px;

	background-image: linear-gradient(#000, #000);
	background-size: 1px 80px;
	background-repeat: no-repeat;
	background-position: top center;

	/*border: solid 1px #00F;*/
}


	/* INTRO TEXT 
	.hero-teaser .introtext {
		position:			relative;

		/*height:			calc(30vh + 70px);*/		/* 60px for half of the line 
		height:			calc(30vh + 70px);
		animation-delay:	1.2s;
		
		background-image: linear-gradient(#000, #000);
  		background-size: 1px 100px;							/* 2x 60px for the whole line 
  		background-repeat: no-repeat;
  		background-position: bottom center;
  												/*background-color:  #FC00ED !important;
	}
	*/


/*-------------------------------*/
/*		  HERO TITLE (OVERLAY)	   */
/*-------------------------------*/

.hero-overlay{
	/*background-color:  #FC00ED;*/
}



/*-------------------------------*/
/*       TEXT: RUBRIK TITEL      */
/*-------------------------------*/

.rubrictitle {
}



/*-------------------------------*/
/*       TEXTBLOCK: CENTER       */
/*-------------------------------*/

.text-center {
}



/*-------------------------------*/
/*        TEXT: LINK LIST        */
/*-------------------------------*/

.text-linklist {
}
	.text-linklist .link-list {
		padding:  			10px 0 5px 0;
		transition: 		all 0.5s;
	}
		.text-linklist .link-list .number {
			display:			block;
			float:  			left;
			/*width:			35px;*/
			width:			8%;
												/*background-color:  #FC00ED;*/
		}
		.text-linklist .link-list .label {
			display:			block;
			float:  			left;
			width:			82%;
												/*background-color:  #3DFFB5*/
		}
			/*			
			.text-linklist .link-list .label p:hover{
				background-color:  #3DFFB5 !important;
			}*/
			/*.text-linklist .link-list:hover p{
				background-color:  #3DFFB5 !important;
				text-decoration: underline;
				text-underline-offset: 6px;
			}*/




/*-------------------------------*/
/*  TEXT: 1 COL (OF 2 COL GRID)  */
/*-------------------------------*/


.text-grid-2{
	column-count:	2;
	column-gap:		4%;
	width:			100%;
	padding-left: 	var(--pagemargin);
	padding-right:	var(--pagemargin); 
}
   .text-grid-2 .text-block {
		break-inside:	avoid;
		width: 			73%;
		margin-left:	27%;
												/*background-color:  #FC00ED;*/
    }
    	.text-grid-2 .text-block.first-col2 {
    		padding-top:	120px; 
    											/*background-color:  #FC00ED;*/
		}
		.text-grid-2 .text-block .number {
			display:			block;
			float:  			left;
			width:			10%;
												/*background-color:  #FC00ED;*/
		}
		.text-grid-2 .text-block .label {
			display:			block;
			float:  			left;
			width:			90%;
												/*background-color:  #3DFFB5*/
		}




/*-------------------------------*/
/*     TEXT+IMAGE: 2 COLUMN      */
/*-------------------------------*/

.txt-image-col2 {
}
	/* INTROTEXT */
	.txt-image-col2 .txt-intro {
	}

	/* TEXTBLOCK */
	.txt-image-col2 .text-block {
		/*text-indent: 4em;*/
	}

	/* IMAGE */
	.txt-image-col2 .image {
	}
		.txt-image-col2 .image .img-holder{
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}

	/* SPACER */
	.txt-image-col2 .spacer {
	}


	/* WRAP WHEN IMAGE SWITCH LEFT */
	.txt-image-col2 .col-right{
		order:  2;
								/*background-color:  #3DFFB5;*/
	}
		/* SPACER */
		.txt-image-col2 .col-right .spacer{
			display:  none;
		}
		/* INTRO */
		.txt-image-col2 .col-right .txt-intro{
			padding-top:  10vh;
		}


/*-------------------------------*/
/*				TABLE LIST     		*/
/*-------------------------------*/

.tablelist {
}
	.tablelist .table {
		
	}
		/* Remove styling from tinyMCE */
		.tablelist .table table, tr, td, th{
			border: none;
		}

		/* Styling for frontend */
		.tablelist .table tr{
			border-bottom: 1pt solid black;
			padding-bottom: 2em;
		}
			.tablelist .table td{
				padding-top: 		1em;
				padding-bottom:	1em;
				vertical-align: top;

			}
			.tablelist .table td:nth-child(2) {
				/*background-color:  #3DFFB5;*/
				text-align:	right;
				/*v-align:		top;*/
				/*vertical-align: top;*/
			}




/*-------------------------------*/
/*				MODAL WINDOW 		   */
/*-------------------------------*/

body.no-scroll {
	overflow: hidden;
}

.my-modal {
	position:	fixed;
	top:			0;
	left:			0;
	right:		0;
	bottom:		0;
	display:		none;
	overflow-y: auto;
	overflow-x: hidden;
	z-index:		1005;
}
	.my-modal-content {
		position:			absolute;
		width:				100vw;
		height:				auto;
		background-color:	#FFF;
	}
		.my-modal-content header{
			position:	fixed;
			padding:		var(--pagemargin);
			/*background:	var(--color3);*/
		}
			.my-modal-content header .close {
				position:			absolute;
				width:				48px;
				height:				48px;
				opacity:				1;
				border:  			none;
				background-color:	transparent;
				cursor:				pointer;
			}
			/*.my-modal-content .close:hover {
			  opacity: 1;
			}*/
			.my-modal-content header .close:before, .close:after {
				position: 	absolute;
				left:			23px;
				top:			-10px;
				content:		' ';
				height:		48px;
				width:		2px;
				background-color: #000;
			}
			.my-modal-content header .close:before {
				transform: rotate(45deg);
			}
			.my-modal-content header .close:after {
			  transform: rotate(-45deg);
			}




/*-------------------------------*/
/*					FOOTER   		   */
/*-------------------------------*/

#footer {
	background-color: var(--color1);
}
	#footer .contact{
	}
	#footer .language{
		text-align:  right;
	}
	#footer .bottom-bar{
		padding-top:	30vh;
		text-align: 	right;
	}