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


/* ROOT TEXT */
html 				{ font-size: 18px; }
/* ROOT TEXT 
html 				{ font-size: 24px; }

@media screen and (max-width: 768px) {
	html { 
		font-size: 18px; 
	}
}*/



/* HEADLINES */
h1 				 	{ font-size: 2.2rem; letter-spacing: 0; }	/* Title Block */ 
h2 					{ font-size: 1.4rem; letter-spacing: 0; }	/* Title Block */ 
h3 					{ font-size: 1.2rem; letter-spacing: 0; }	/* Title Block */ 




/* EXEPTIONS – Hero-Teaser */
.hero-teaser .imagebox .textbox h1	{ font-size: 1.4rem; letter-spacing: 0; }	/* Title Hero-Teaser > h2 */ 
.hero-teaser .teaserbox h2			{ font-size: 1.9rem; letter-spacing: 0; }	/* Title Teaser > h1 */ 



/* TEXTE */
.ch_intro	  		{ font-size: 1.2rem; line-height: 1.5; }	/* Intro 		= h3 */
.ch_body		 		{  }										/* Bodytext	 	= root */
.ch_note				{ font-size:  .7rem; }						/* Notes 		= 0.7 */
.ch_rubric-title	{ font-size:  .7rem; }						/* Rubric Title = ch_note */
.ch_facts			{ font-size: 3.0rem; line-height: 1.3; }	/* Numbers Facts= x4.0 */



/* HIGHLIGHTING */
.underline-small::after{
	left:			0px;
	height:		7px;
	width:		100px;
}

@media screen and (max-width: 768px) {
	.underline-small::after{
		height:		6px;
		width:		90px;
	}
}




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

/* BASIS */
a			{ border-bottom: 2px solid currentColor; padding-bottom: 0px; }
a:hover		{  }
a:focus		{  }
a:active	{  }


/* NAVIGATION */
.linknav				{ font-family: 'TTNormsProDemiBold', Arial, sans-serif; color: var(--color1); font-size: 1.6rem; line-height: 1.6; }	/* Navigation	  = h1 */
.linknav.sub		{ font-family: 'TTNormsProNormal', Arial, sans-serif; font-size: 1.4rem; line-height: 1.5; }								/* Navigation Sub = ch_intro */
.linknav.active 	{ padding-bottom: 0 !important; }




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

i{
	width: 				45px;
	height: 			45px;
}




/* =============================================================================
   Content: Modules
   ========================================================================== */



/*-------------------------------*/
/*        	  Navbar	         */
/*-------------------------------*/

#navbar { 
	padding: 	20px 5% 0 5%;
}
	#navbar .bg {  }
		#navbar .bg.open {
			transition: height .3s ease;
			height:		100vh;
		}
		#navbar .bg.close {
			transition: height .3s ease;
			height:		0;
		}

	/* BURGER */
	#navbar .bt_burger {
		display:		block;		
		top:			10px; 
      transform: scale(1.5);
/*      												background-color: #5CB4BF;*/
	}
		#navbar .bt_burger.show {
			display:		block;	
		}

	/* MENU */
	#navbar .menu{
		position:		relative;
		top:			8vh;
  		width: 			100%;
		display: 		inline-block;
		float: 			right;
		margin:			0;
		display: 		none;				/*background-color: #5CB4BF;*/
	}
		#navbar .menu ul{
		  padding: 		0px;
		  list-style:	none;
		  text-align:	left;
		}
		#navbar .menu li{
		  display:	block;
		  padding:	0;
		  padding-bottom: 10px;
		}
		/* GAP BEFORE SUB MENUE */
		#navbar .menu li:nth-child(6) {
			margin-top: 5vh;
		}




/*-------------------------------*/
/*         Hero + Teaser         */
/*-------------------------------*/

.hero-teaser{ }

	/* IMAGE */
	.hero-teaser .imagebox{
		width: 		100%;
		height:		65vh;
	}
		.hero-teaser .imagebox .textbox{
			width: 		90%;
			height: 	25%;
			padding: 	0 20% 5% 5%;
										/*background-color: #5CB4BF;*/
		}

	/* TEASER */
	.hero-teaser .teaser-group{
		width: 		100%;
		height:		35vh;
										/*background-color: #5CB4BF;*/
	}
		.hero-teaser .teaserbox{
			width: 		50%;
			height:		100%;
			float: 		left;
			padding: 	7% 5%;
										/*background-color: #BE9292;*/
		}




/*-------------------------------*/
/*      Hero: Image & Text       */
/*-------------------------------*/

.hero-teaser{
	/* Setting under "Hero: 2x Teaser" */
}
	.hero-teaser.karriere .imagebox{
		height:		50vh !important;
	}

	/* TEXT */
	.hero-teaser .textbox{
		width: 		100%;
		height:		50vh;
		float: 		right;
		padding:	60px 15% 0 var(--pagemargin);
		/*padding-right: 15% !important;*/
	}
		/*.hero-teaser .textbox h1{
			display: 		block;
			width: 			100%;
										background-color: #B000BF;
		}*/
		.hero-teaser .textbox .introtext{
			display: 		block;
			width: 			100%;
			padding-top:	80px;
										/*background-color: #1900BF;*/
		}




/*-------------------------------*/
/*        Hero: 2x Teaser        */
/*-------------------------------*/

.hero-teaser{
										/*border: solid 1px #55FF1E;*/
}
	/* IMAGE */
	.hero-teaser .imagebox{
		background-position: 	25% 25% !important;
	}




/*-------------------------------*/
/*           Hero: Text          */
/*-------------------------------*/

.hero-textintro{
	padding-top:	25% !important; 
	padding-right:	10%;
}
	.hero-textintro .headline{
		margin-right: 20%;				/*background-color: #D8DA16;*/
	}





/*-------------------------------*/
/*     Project Teaser Group      */
/*-------------------------------*/

.teaser-group { 
}
	/* TEASER */
	.teaser-group .teaserbloc {
		padding-bottom: 40px;
	}
		/* TEXTBOX */
		.teaser-group .teaserbloc .textbox {
			padding-top: 20px;
		}




/*-------------------------------*/
/*        Project Filter         */
/*-------------------------------*/

.filter{
	padding-top: 40px;
}





/*-------------------------------*/
/*     		   TEAM 			 */
/*-------------------------------*/

.team-group { 
}
	.team-group .memberbloc{
		cursor: pointer;
		padding-bottom: 40px;
	}
			/*  OVERLAY */
			.memberbloc .overlay {
				display: none;
			}
				/*  JOBS */
				.memberbloc.jobs .overlay {
					padding: 10%;
					display: block;
					opacity: 1;
				}
					/* JOBS BUTTON (POSITION)*/
					.memberbloc.jobs .overlay .button-light-arrow {  
						bottom:		10%;
						right:		10%;
					}

	/* TEXTBOX */
	.memberbloc .textbox {
		padding-top: 20px;
	}
		/* CONTACT (mobile) */
		.memberbloc .textbox .contact{
			display: block;
		}
			.memberbloc .textbox .contact a{
				display: block;
				float: left;
				padding-top: 10px;
				padding-right: 5px;
				border-bottom: none;
				border-bottom: 0 !important;
			}




/*-------------------------------*/
/*       Ansprechpartner		 */
/*-------------------------------*/

.contact { 
	/*grid-template-columns:	30.66% 30.66% 30.66%;*/
}
	.contact .rubric{
		order: 1;												
	}
		.contact .rubric.box {
			grid-column: span 3 !important; 					/*border: solid 2px #2EDE15;*/
		}
	.contact .box.img-box{
		grid-column: span 2 !important; 
		order: 3;												/*border: solid 1px #2EDE15;*/
	}
		.contact .img-box .img-holder{
		   	/*width: 		 100%;
	   		padding-top: 100%;*/ /* 1:1 Aspect Ratio */
		}
	.contact .box.text {
		order: 2;
		grid-column-start: 1 !important;
		grid-column-end: span 2 !important;									
		padding-right: 30px;
	}
		/*.contact .box.colpos-2-to-3 { 							border: solid 1px #D50C1D;
			grid-column-start: 1 !important;
			grid-column-end: span 2 !important;
		}*/

	.contact .member{
		width: 100%;
		margin-top: 80px;
	}
		.contact .member .img-box{
			width: 50%;
			margin-bottom: 10px;
		}
			.contact .member .img-box .img-holder{
			}





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

.teaserbox{  }	
	/* CONTENT */
	.teaserbox .content {  
		padding: 9%;
	}
	/* BUTTON (POSITION)*/
	.teaserbox .button,
	.teaserbox .button-boarder,
	.teaserbox .button-light {  
		bottom:		12%;
		right:		9%;
	}



/*-------------------------------*/
/*           Textblock           */
/*-------------------------------*/

.textbloc{
	/*padding-right: calc( var(--pagemargin) +0 );*/
	padding-right: 10%;
	/*background-color: #BE9292;*/
}



/*-------------------------------*/
/*     Image: Full + Facts;      */
/*-------------------------------*/

.img-full-facts{
}
	/* IMAGE */
	.img-full-facts .img-holder{
	   	width: 100vw;
	   	padding-top: 66.66%; /* 3:2 Aspect Ratio */
	}
	/* FACT BOX */
	.img-full-facts .factbox{
		padding-top: 5vh;
	}
		/* HEADER */
		.img-full-facts .factbox .header{
			height: 15vh;
		}



/*-------------------------------*/
/*          Image: Group         */
/*-------------------------------*/

/* 2X SMALL */
.img-group-2x-small {
}
	/* SMALL: left */
	.img-group-2x-small .img-small.left {
		width: 100% !important;	
	}
	/* SMALL: right */
	.img-group-2x-small .img-small.right {
		width: 100% !important;	
		margin-left: 0;
	}



/*-------------------------------*/
/*       Tabelle: Bautafel       */
/*-------------------------------*/


/* TABLE */
.table-facts  {
}
	/* TITLE */
	.table-facts .title {
		padding-bottom: 20px;
	}

	/* TABLE GRID */
	div.table { 
	}
		div.tr { 
		}
		div.tr.head {
		}
			div.td { 
			}
				/* LINES */
				div.head .td.first,
				div.head .td.last { 
				}
				/* ROWS */
				div.td.first{
					width:			35%;
				}
				div.td.last{
					width:			65%;	
				}




/*-------------------------------*/
/*        		Tabs			 */
/*-------------------------------*/

.tabs {
}
	/* ROW */
	.row:after {
	}
		/* TABS */
		.tab {
		}
			/* LABEL */
			.tab .label {
			}	
				/* ARROW */
				.arrow-box {
					padding-bottom: 30px;
				}
					.arrow-box .arrow,
					.arrow-box .line {
					}
					.arrow-box .arrow{
						background-size:  auto 80%;
						width:    20%;
					}
					.arrow-box .line {
						background-size:  auto 80%;
						width:    80%;
					}

	/* CONTENT */
	.tabs .containerTab {
	}



/*-------------------------------*/
/*        	Akkordion			 */
/*-------------------------------*/


.container {
}
	.acc {
	}
		.acc li {
		  padding-bottom: 15px;
		}
		.acc_ctrl {
			/* h4 format */
			font-size: 24px;
			line-height: 1.5;
		}

		@media screen and (max-width: 768px) {
			.acc_ctrl {
				/* h4 format */
				font-size: 18px;
				line-height: 1.5;
			}
		}

		.acc_ctrl:before {
			margin-right: 25px;
		}
		.acc_ctrl:after {
			margin-right: 25px;
		}





/*-------------------------------*/
/*            Footer             */
/*-------------------------------*/

.footer{  }
	/* LEFT */
	.footer .left {
		padding-right: 5%;
	}







/* =============================================================================
   CHANGE: BASE and ADDONS
   ========================================================================== */



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

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



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

/* GRID  */
.grid-4,
.grid-3 {  }


/* 4-COLUMN GRID  */
.grid-4 {  }

	/* BOX */
	.grid-4 .box { grid-column: span 2 !important; }

		/* COLUMN START-END (from Position 2-4)*/
		.grid-4 .colpos-2-to-3	{ grid-column: span 4 !important; }
		.grid-4 .colpos-2-to-4	{ grid-column: span 4 !important; }

  		/* SPAN (only from pos 1)*/
		.grid-4 .box.span-2 { grid-column: span 2 !important; }
		.grid-4 .box.span-3 { grid-column: span 4 !important; }
		.grid-4 .box.span-4 { grid-column: span 4 !important; }


/* BLOC GAPS */
.gap-0-25-top 	{ padding-top:		 10px; }
.gap-0-25-bottom{ padding-bottom:	 10px; }
.gap-0-5-top 	{ padding-top:		 20px; }
.gap-0-5-bottom	{ padding-bottom:	 20px; }
.gap-1-top 		{ padding-top:		 30px; }
.gap-1-bottom	{ padding-bottom:	 30px; }
.gap-2-top 		{ padding-top:		 60px; }
.gap-2-bottom	{ padding-bottom:	 60px; }
.gap-3-top 		{ padding-top:		 90px; }
.gap-3-bottom	{ padding-bottom:	 90px; }
.gap-4-top 		{ padding-top:		120px; }
.gap-4-bottom	{ padding-bottom:	120px; }



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

.button,
.button-boarder,
.button-light {
	transition:		none;
	/*padding-right:	40px;*/
}
	.button span,
	.button-boarder span,
	.button-light span{
		top: 		1px;
		transition: none;
	}
	.button span:after,
	.button-boarder span:after,
	.button-light span:after {
		transition:	none;
		transform:	scale(1);
		/*opacity:	1;
		top: 		-2px;
		right:		-20px;*/
	}
	/*@media screen and (max-width: 768px) {
		.button span:after,
		.button-boarder span:after,
		.button-light span:after{
			transform:	scale(1.4);
			top: 	0;
		}
	}*/



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

.button-light-arrow {  }
	.button-light-arrow span {  }
	.button-light-arrow span:after {
		top: -0.75rem;
	}
	@media screen and (max-width: 768px) {
		.button-light-arrow span:after {
			/*top: 		-13px;*/
			top: -0.8rem;
		}
	}
.button-grey-arrow span:after {
	top: 		-11px;
}



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

.icon-number,
.button-mail,
.button-mail-light {
}
	/* NUMBER */
	.icon-number {
	}
	.icon-number span:after {
		transform:	scale(1.2)!important;
		top: 		-6px;
	}




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

/* LINK NAV: ANIMATE UNDERLINE */
.linknav.animate{  }
.linknav.animate:after {
	height:		0;
	bottom:		0;
}
.linknav.sub.animate:hover:after {
	width: 		0;
	height:		0;
	bottom:		0;
}

/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

/* Circle Background */
.bt_burger {  }
	.hamburger {  }
	.hamburger.is-closed .hamb-top { 
		top: 5px; 
	}