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


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


/* HEADLINES */
h1 				 	{ font-size: 3.0rem; line-height: 1.2; letter-spacing: 0.03em; }	/* Title Block	– x3   */ 
h2 					{ font-size: 1.8rem; line-height: 1.3; letter-spacing: 0.03em; }	/* Title Block 	– x2.2 */ 
h3 					{ font-size: 1.3rem; line-height: 1.3; }							/* Title Block 	– x1.3 */ 
h4 					{ font-size: 1.0rem; line-height: 1.3; }							/* Title Block 	– x1.0 */ 

/* EXEPTIONS – Hero-Teaser */
.hero-teaser .imagebox .textbox h1 	{ font-size: 1.8rem; line-height: 1.3; letter-spacing: 0.03em; }	/* Title > h2 */ 
.hero-teaser .teaserbox h2 			{ font-size: 2.4rem; line-height: 1.2; letter-spacing: 0.03em; }	/* Title Teaser > h1 */ 


/* TEXTE */
.ch_intro	  		{ font-size: 1.3rem; line-height: 1.6; }				/* Intro 			= h3 */
.ch_body		 		{ line-height: 1.6; }										/* Bodytext	 		= root */
.ch_note				{ font-size: .8rem; }										/* Notes 			= 0.8 */
.ch_rubric-title,																		/* Rubric, BT Lable = ch_note */
.ch_bt_label		{ font-size: .8rem; line-height: 1.6; letter-spacing: 0.05em; }		
.ch_facts			{ font-size: 5.0rem; line-height: 1.3; }				/* Numbers Facts	= x5.0 */



/* =============================================================================
   Links
   ========================================================================== */
   
/* BASIS */
a			{ border-bottom: 0.1em solid currentColor; padding-bottom: 2px !important; }
a:hover		{  }
a:focus		{  }
a:active	{  }


/* NAVIGATION */
.linknav, 
.linknav.sub { font-size: .9rem; line-height: 1.2; letter-spacing: 0.02em; }			/* Navigation */


/* FOOTER META NAV */
.linknavfooter 			{ line-height: 1.3 }											/* Meta Navigation */


/* NOTES */
.link_small	{ font-size: 10pt; }														/*Marginalien*/



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

   



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


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

#navbar {
	position:	fixed;
	top: 			0;
	width:		100%;
	height:		auto;
	display:		block;
	padding: 	30px 4vw 0 4vw;

	transition:	top 0.3s;
	z-index:	5;

/*																	border: solid 2px #2EDE15;*/
}
	#navbar.bg_white{
																											/* Vorrübergehend deaktiviert bis zum Launch! 
																											height:				130px;
																											background-color:	#FFF;
																											opacity: 			0.98;
																									  		box-shadow: 		-10px -15px 30px grey; */
	}

	#navbar .bg {
		position:			absolute;
		top: 				0;
		left:				0;
		width:		100%;
		height: 			0;
		background-color:	#FFF;

		z-index:			-1;						
	}
		#navbar .bg.open {																			/* Vorrübergehend deaktiviert bis zum Launch! 
																											transition: height .5s ease;
																											height:		130px;*/
																											display: none !important;
		}
		#navbar .bg.close {
			/*transition: height .5s ease;
			height:		0;*/
		}

	/* LOGO */
	#navbar .lrg-logo,
	#navbar .sml-logo {
		position:	relative;
		display: 	inline-block;
		width: 		255px;
		height: 		85px;
		float: 		left;
		cursor: 		pointer;
			
		background-size: 		auto 100%;
		background-position:	left bottom;
	   background-repeat:	no-repeat;

		background-image:	url('../images/schaefer-brandschutz-ingenieure_logologo-white.png'); 

/*																		border: solid 2px #2EDE15;*/

	}

	/* BURGER */
	#navbar .bt_burger {
		position:	relative;
		top:			15px;
		float: 		right;		
		display:		none;								
	}
																										/* Vorrübergehend deaktiviert bis zum Launch! */
																										/*#navbar .bt_burger.show {
																											display:	block;
																										}*/

	/* MENU */
	#navbar .menu{
		position:		relative;
		top:				35px;
  		width: 			auto;
																											/* Vorrübergehend deaktiviert bis zum Launch!
																											display: 		inline-block; */
																											display: none !important;

		float: 			left; 
		margin-left: 	22%;
	}
		#navbar .menu.hide{
			display: 	none;
		}
		#navbar .menu ul{
		  padding: 0px;
		  list-style: none;
		  text-align: right;
		}
		#navbar .menu li{
		  display: inline-block;
		  padding: 0 1.5vw 0 0;
		}




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

.hero-teaser{
	width: 		100vw;
	height:		100vh;
	padding:		0;
										/*background-color: #6B6B6B;*/
}
	/* IMAGE */
	.hero-teaser .imagebox{
		width: 		50%;
		height:		100%;
		float: 		left;

		/*background-color:		var(--color4);
		background-blend-mode:	multiply;*/
		background-position: bottom;
		background-repeat:	no-repeat;
		background-size:		cover;
		position:				relative;
	}
		.hero-teaser .imagebox .textbox{
			position:	absolute;
			width: 		100%;
			height: 		50%;
			bottom:		0;
			padding: 	16% 20% 0 10%;
		}


	/* TEASER */
	.hero-teaser .teaser-group{
		width: 		50%;
		height:		100%;
		float: 		right;
										/*background-color: #5CB4BF;*/
	}
		.hero-teaser .teaserbox{
			width: 		100%;
			height:		50%;
			padding: 	15% 10%;
										/*background-color: #BE9292;*/
		}




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

.hero-teaser{
	/* Setting under "Hero: 2x Teaser" */
}
	.hero-teaser.karriere .imagebox{
	}

	/* TEXT */
	.hero-teaser .textbox{
		display: 		flex; 
		align-items:	flex-end;

		width: 			50%;
		height:			100%;
		float: 			left;																							
	}
		.hero-teaser .textbox .content{
			margin: auto 15vw 7vh 4vw;
/*															border: solid 2px #2EDE15;*/
		}
			.hero-teaser .textbox .introtext{
				display: 		block;
				width: 			100%;
				padding-top:	70px;  				
															/*border: solid 2px #2EDE15;*/
			}






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

.hero-textintro{

						/*background-color: #BE9292;*/
}







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

.teaser-group { 
}
	/* TEASER */
	.teaser-group .teaserbloc {
		cursor: 		pointer;
		padding-bottom: 60px;
	}

	/* ZOOM */
	.teaser-group .teaserbloc:hover .img-holder {
		-ms-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	
		/* IMAGE */
		.teaser-group .teaserbloc .img-box {
			width:		100%;
			height: 	auto;
	    	overflow: 	hidden;
		}
			.teaser-group .teaserbloc .img-box .img-holder{
			   	width: 100%;
			   	padding-top: 66.66%; /* 3:2 Aspect Ratio */

			    background-position: center;
			    background-size: cover;
			    background-repeat: no-repeat;
			    transition: all 1s;
			}

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



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

.filter{
	padding-top: 20px;
}
	.filter button{
		margin-right: 10px;
		margin-bottom: 20px;
	}
		.filter .button:hover span {
			padding-right: 0;
		}
		.filter .button span:after{
			content:	none;
		}


		

/*-------------------------------*/
/*     		   Team 			 */
/*-------------------------------*/

.team-group { 
}
	.team-group .memberbloc{
		cursor: pointer !important;
		padding-bottom: 60px;
	}
		/*  IMAGE CONTAINER */
		.memberbloc .img-holder{
			position: relative;
		}
			/*  OVERLAY */
			.memberbloc .overlay {
				position:	absolute;
				top:		0;
				bottom: 	0;
				left:		0;
				right:		0;
				height:		100%;
				width:		100%;
				padding: 	10%;
				opacity:	0;
				transition:	.5s ease;
				background-color: var(--color1);
			}
			.memberbloc:hover .overlay {
				opacity:	1;
			}
				.memberbloc .overlay .focus{
					display: none;
				}

				/* JOBS */
				.memberbloc.jobs .overlay {
					padding:	10%;
					opacity:	1;
				}
					/* JOBS BUTTON (POSITION)*/
					.memberbloc.jobs .overlay .button-light-arrow {  
						position:	absolute;
						bottom:		10%;
						right:		10%;
						/*opacity:	0;
						transition:	.5s ease;*/
					}
					/*.memberbloc.jobs .overlay:hover .button-light-arrow{  
						opacity:	1;
					}*/


			/* ICONS */
			.memberbloc .overlay a{
				border-bottom: none;
				border-bottom: 0 !important;
				cursor: pointer !important;
			}
			/* IMAGE */
			.memberbloc .img-box {
				width:		100%;
				height: 	auto;
		    	overflow: 	hidden;
			}
				.memberbloc .img-box .img-holder{
				   	width: 100%;
				   	padding-top: 150%; /* 2:3 Aspect Ratio */

				    background-position: top;
				    background-size: cover;
				    background-repeat: no-repeat;
				    transition: all 1s;
				}

	/* TEXTBOX */
	.memberbloc .textbox {
		padding-top: 40px;
	}
		/* CONTACT (mobile) */
		.memberbloc .textbox .contact{
			display: none;
		}



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

.contact { 
}
	.contact .img-box .img-holder{
	   	width: 100%;
	   	padding-top: 150%; /* 2:3 Aspect Ratio */

	    background-position: top;
	    background-size: cover;
	    background-repeat: no-repeat;
	    transition: all 1s;
	}
	.contact .button-mail,
	.contact .button-mail-light {
		margin-right: 20px;
	}

	.contact .member{
		margin-top: 100px;
		width: 100%;
		/*border: solid 1px #F535EC;*/
	}
		.contact .member .img-box{
			width: 33%;
			margin-bottom: 20px;
		}
			.contact .member .img-box .img-holder{
			   	width: 100%;
			   	padding-top: 66.67%; /* 3:2 Aspect Ratio */

			    background-position: top;
			    background-size: cover;
			    background-repeat: no-repeat;
			    transition: all 1s;
			    /*border: solid 1px #FFF;*/
			}




/*-------------------------------*/
/*        	  Teaser             */
/*-------------------------------*/

.teaserbox{  
	cursor: pointer;
}
	/* CONTENT */
	.teaserbox .content {  
		padding: 10%;
	}
	/* BUTTON (POSITION)*/
	.teaserbox .button,
	.teaserbox .button-boarder,
	.teaserbox .button-light,
	.teaserbox .button-light-arrow {  
		position:	absolute;
		bottom:		15%;
		right:		10%;
	}



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

.textbloc{
						/*background-color: #BE9292;*/
}



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

.img-full{
}
	/* IMAGE */
	.img-full .img-holder{
	   	width: 100vw;
	   	padding-top: 56.25%; /* 16:9; Aspect Ratio */

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


.img-full-facts{
}
	/* IMAGE */
	.img-full-facts .img-holder{
	   	width: 100vw;
	   	padding-top: 56.25%; /* 16:9 Aspect Ratio */

		background-color:		var(--color4);
		background-blend-mode:	multiply;
	    background-position: center;
	    background-size: cover;
	    background-repeat: no-repeat;
	}
	/* FACT BOX */
	.img-full-facts .factbox{
		position: absolute;
		padding-top: 8vh;
										/*background-color: #BE9292;*/
	}
		/* HEADER */
		.img-full-facts .factbox .header{
			height: 30vh;
			text-align: left !important;
										/*background-color: #70C1B9;*/
		}
		/* TEXTBOX */
		.img-full-facts .factbox .box{
			text-align: center;
										/*background-color: #70C1B9;*/
		}


/*-------------------------------*/
/*  	   Image: S/M/L          */
/*-------------------------------*/

.img-small,
.img-medium,
.img-large {  
}
	.img-small img,
	.img-medium img,
	.img-large img {
		width:	100%;
	}


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

/* SMALL + MEDIUM + TEXT */
.img-group-s-m {
}
	/* MEDIUM HACK */
	.img-group-s-m .img-medium {
		width: 150% !important;	
		margin-left: -50%;
	}
		/* FLOAT TO LEFT*/
		.img-group-s-m .img-medium.left {
			margin-left: 0;
			order: 1;
			grid-column:1;
		}
	/* SMALL*/
	.img-group-s-m .img-small img {
		padding-bottom: 40px;
	}
		/* FLOAT TO RIGHT*/
		.img-group-s-m .img-small.right {
			order: 2;
			grid-column:3;
		}

/* 2X SMALL */
.img-group-2x-small {
}
	/* SMALL: left */
	.img-group-2x-small .img-small.left {
		width: 159% !important;						/*border: solid 1px #1D19ED;*/
	}
	/* SMALL: right */
	.img-group-2x-small .img-small.right {
		width: 159% !important;	
		margin-left: 59%;							/*border: solid 1px #1D19ED;*/
	}



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

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

	/* TABLE GRID */
	div.table { 
		width: 				100%;
		display:			table; 
		border-collapse:	collapse;
		margin-top: 		0;
	}
		div.tr { 
			display:			table-row; 
			border-bottom:		solid 1px var(--color4);
		}
		div.tr.head {
			border-bottom:		solid 1px var(--color4);
		}
			div.td { 
				display:			table-cell;
				padding-right: 		10px;
				padding-top: 		16px;
				padding-bottom: 	12px;
				text-align: 		left;
			}
				/* LINES */
				div.head .td.first,
				div.head .td.last { 
					padding-top: 	0 !important;
				}
				/* ROWS */
				div.td.first{
					width:			26%;	/*background: #3B00ED;*/
				}
				div.td.last{
					width:			74%;
					padding-right: 	0;		/*background: #37F44A;*/		
				}



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

.tabs {
	clear:			both;
	position:		relative;   
	float:			left;			
	width: 			100vw;
 	padding:		0 var(--pagemargin) 120px var(--pagemargin);
 	background: 	var(--color5);

}
	/* ROW */
	.row:after {
		/* Clear floats after the columns */
	    content: "";
	    display: table;
	    clear: both;
	}
		/* TABS */
		.tab {
			float:			left; 
			width:			23.5%;
			margin-right:	2%;         					/*background: #FFF;*/
			min-height:		200px;
			cursor: 		pointer;
		}
			/* LABEL */
			.tab .label {
				position:	relative;                 
				width:		100%;
				display:	inline-block;
				top:		0;
				cursor:		pointer;
				color: 		var(--color4);
				font-family: 'AvenirStdWeb95Black', Arial, sans-serif; font-weight: normal; font-style: normal; padding: 0; margin: 0; 
			}	
			/* RADIO BUTTON */
			.tab [type=radio] {
				display: none;
			}
			/* LAST BOX */
			.tab.last {
		    	margin-right: 0;                   
			}
				/* ICON NUMBER */
				.icon-box {
					display: flex;							/*background-color: #2AD014;*/
					align-items: center;
					justify-content: center;
					padding-bottom: 10px;
				}
				/* ARROW */
				.arrow-box {
					display: block;
					height: 20px;
					width:  100%;
					padding-bottom: 20px;
				}
					.arrow-box .arrow,
					.arrow-box .line {
						display:  inline-block;
						float:    left;
						height:   20px;
					}
					.arrow-box .arrow{
						width:    10%;
						background-image: url('../images/arrow-grey.svg');        
						background-size:  auto 100%;
						background-position:left bottom;
						background-repeat:  no-repeat;
					}
					.arrow-box .line {
						width:    90%;
						background-image: url('../images/arrowbar-grey.svg');        
						background-size: auto 100%;
						background-position:left bottom;   
						background-repeat: repeat-x;
					}

	/* CONTENT */
	.tabs .containerTab {
		float:		left;
		width:		100%;
		padding:	0;							/*background: #97B2BE;*/

	}
		/* LABEL (mobil) */
		.containerTab .label {
			display: none;
		}
		/* Closable button inside the container tab */
		.containerTab .closebtn {
		    float: right;
		    color: white;
		    font-size: 35px;
		    cursor: pointer;
		    display: none;
		}
		.containerTab .colum1,
		.containerTab .colum2  {
			float: 			left;
			width:			48%;				/*background-color: #2AD014;*/
			margin-right: 	4%;
		}
		.containerTab .colum2 {
			margin-right: 	0;
		}


	/* LABLE ACTIVE */
	[type=radio]:checked ~ .label {
		color:		var(--color1);
		z-index:	2;
	}
	/* NUMBER ACTIVE */
	[type=radio]:checked ~ .icon-box .icon-number {
		background-color: 	var(--color1); 
	}
	/* ARROW ACTIVE */
	[type=radio]:checked ~ .arrow-box .line{
		background-image: url('../images/arrowbar-blue.svg'); 
	}
	[type=radio]:checked ~ .arrow-box .arrow{
		background-image: url('../images/arrow-blue.svg');   
	}



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

.container {
	max-width: 100%;
	margin: 0 auto;
}
	.acc {
		margin: 0;
		overflow: hidden;
		padding: 0;
	}
		.acc li {
		  list-style-type: none;
		  padding-bottom: 20px;
		}
		.acc_ctrl {
			/*background: var(--color4);*/
			border: none;
			/*border-bottom: solid 1px #F2F2F2;*/
			cursor: pointer;
			display: block;
			outline: none;
			padding: 1.8em;
			position: relative;
			width: 100%;

			/* h4 format */
			text-align: left;
			font-size: 19px;
			line-height: 1.5;
		}
		.acc_ctrl:before {
			background: #FFF;
			content: '';
			height: 2px;
			margin-right: 37px;
			position: absolute;
			right: 0;
			top: 50%;
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			width: 14px;
		}
		.acc_ctrl:after {
			background: #FFF;
			content: '';
			height: 2px;
			margin-right: 37px;
			position: absolute;
			right: 0;
			top: 50%;
			width: 14px;
		}
		.acc_ctrl.active:before {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		.acc_ctrl.active h2, .acc_ctrl:focus h2 {
			position: relative;
		}
		.acc_panel {
			display: none;
			overflow: hidden;
			padding: 20px;
			background: #FFF;
		}
		.acc_panel li {
			list-style-type: initial;
		}




/*-------------------------------*/
/*        	   Jobs		     	 */
/*-------------------------------*/

.jobs {  
}
	.jobs .acc_ctrl {
		/* default setting in "Akkordion" */
		width:		94%;
		padding:	3%;
	}
	.jobs .acc_ctrl:hover > button{
		background-color: var(--color1) !important;
	}
		.jobs .acc_ctrl:after,
		.jobs .acc_ctrl:before {
			display: none;
		}
		.jobs .acc_ctrl span {
			display: block;
			width: 80%;
		}
		.jobs .acc_ctrl button{
			position: absolute;
			right: 0;
			margin-right: 3%;
			top: calc(50% - 22px);
		}



/*-------------------------------*/
/*          Upload-Form          */
/*-------------------------------*/

.upload{
}
	.upload .alert {
	}
		.upload .alert.alert-danger{
			color: #F5000F;
		}

	.upload .button.reset{
		margin-left: 20px;
		float: right;
	}




/*-------------------------------*/
/*          Downloads	         */
/*-------------------------------*/

#downloads-locked{
	display: none;
}



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

.footer{
	width: 	 100vw;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
	/* LEFT */
	.footer .left,
	.footer .right {
		float: 				left;
		padding-left:		var(--pagemargin);
		padding-top:		60px;
		padding-bottom:	60px;

		/*display: 		-webkit-flex; 
		display: 		-ms-flexbox; 
		display: 		flex;*/
	}
	.footer .left {
		width:				62.32vw;
		background-color:	var(--color3);
	}
	/* RIGHT */
	.footer .right {
		width:				37.68vw;
		padding-left:		4vw;
		background-color:	var(--color3);
	}
	/* ICONS */
	.footer a{
		border-bottom: none;
		border-bottom: 0 !important;
	}