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

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

/* HEADLINES */
h1 				{ font-size: 4.0rem; line-height: 1.2; }																			/* Seitentitel */ 
h2 				{ font-size: 3.0rem; line-height: 1.3; }																			/* Rubrikentitel */
h3 				{ font-size: 1.6rem; line-height: 1.3; padding-bottom: 5px; }												/* Absatztitel */ 

/* TEXTE */
.ch_fact				{ font-size: 4.0rem; line-height: 1.2; }																		/* Number */
.ch_intro			{ font-size: 1.6rem; line-height: 1.3; }																		/* Intro */
.ch_rubrictitle	{ font-size: 			0.7rem; 																						/* Rubrikentitel */
						  line-height: 		1.3; 
						  letter-spacing: 	0.15em;

						  display:  			block;
						  padding-bottom: 	0.5em;

						  text-transform:	uppercase; 
						  color: 		 		var(--color1); 	
						}	

.ch_bt_label		{ font-size: 1.0rem; letter-spacing: 0.02em; }																/* Button Label */	
.ch_notes,
.ch_notes_title	{ font-size: 0.8rem; line-height: 1.8; letter-spacing: 0.05em; text-decoration: none }			/*	 Marginalien  */


/*.ch_title 		{ font-size: 3.2rem; line-height: 1.1; }																		 Title */		
/*.ch_text				{  }																													Fließtext */




/* =============================================================================
   Links
   ========================================================================== */
  
/* NAVIGATION */
.linknav				{ font-size: 0.8rem; line-height: 1.2; }
.linknav.sub 		{  }
.linknav.active	{ border-bottom: 2px solid var(--color5); padding-bottom: 1px; }

/* NOTES */
.linknotes			{ font-size: 0.8rem; }																								/* Marginalien */
   
   

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






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


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

#page{
}

/* PADDING */
:root {
	--pagemargin: 	2vw;		/* padding left & right */
	--gridgap: 		3%;			/* gaps between rows */
}




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

#navbar {
	position:	fixed;
	top: 			0;
	width:		100%;
	height:		auto;

	display:		block;
	padding: 	30px var(--pagemargin) 15px var(--pagemargin);

	transition:	top 0.3s;
	z-index:		5;	
/*																										border:  solid 1px #2433FF;*/
																										/*background-color: #2433FF;*/
	}
	#navbar .bg {
		position:			absolute;
		top: 					0;
		left:					0;
		width:				100%;
		height: 				0;

		background-color:	var(--color1);
		z-index:				-1;						
	}



	/* MENU */
	#navbar .menu {
		width: 			100%;
		height:			auto;
		display:			grid;
		align-content:	flex-start;
		grid-gap: 		0;
		grid-row-gap:	0;

		grid-template-columns: repeat(4, 1fr);

		display: 		inline-block;
		z-index:			4;
/*																											border:  solid 1px red;*/
	}
		.menu ul {
			display: 	flex;
			padding: 	0;
			margin: 		0;
			list-style: none;
		}
		.menu ul li {
		    flex: 			1; 	/* Verteilt den Platz gleichmäßig */
		    max-width: 	25%;
		    text-align: 	center;		    
		}
			.menu ul li:first-child  {
				text-align: left;
			}
			.menu ul li:last-child  {
				text-align: right;
			}


			/* Feintuning Position Buttons */
			.menu ul li:nth-child(2)  {
				padding-right: 12%;
			}
			/*	
			.menu ul li:nth-child(3) a {
			padding-left: 35%;
			}*/


	/* LOGO */
	.lrg-logo,
	.lrg-logo-white,
	.sml-logo {
		position: 	fixed;
    	bottom: 		4vh;
    	left: 		var(--pagemargin);
    	
		display: 	inline-block;
		width: 		28%;
		height: 		9%;
		float: 		left;

 		background-size: 		contain;
    	background-position: left bottom;
    	background-repeat: 	no-repeat;
    	background-image:		url('../images/kietzke_logo_black.svg'); 

		cursor: 		pointer;
		z-index: 	9999;
	}
	.sml-logo {
		background-image:		url('../images/kietzke_signet_black.svg'); 
	}
	.lrg-logo-white {
		background-image:		url('../images/kietzke_logo_white.svg'); 
	}

		#navbar .lrg-logo.open {
		}
		#navbar .lrg-logo.close {
		}

		/* BURGER */
		#navbar .bt_burger {
			display:		none !important;
		}





/*-------------------------------*/
/*        	HERO MASTER       	*/
/*-------------------------------*/

.hero {
	position:			relative;
	height: 				100vh;
	padding-top: 		10vh;
	padding-bottom:	4vh;

	/*display: flex;  Damit die Kinder-Elemente sich daran ausrichten */
}
	.hero .wrap {
		height: 	100%;
																										/*background-color: #2FC3C1;*/
	}
		.hero .txt,
		.hero .image { }


		.hero .border {
			position:	absolute;
			width: 		2px;
			height: 		86vh;
			background: #000;
		}



	/*-------------------------------*/
	/*        	 HERO 1-2      	   */
	/*        	 SLIDESHOW      	   */
	/*-------------------------------*/

	.hero.template-1-2 .border.line1,
	.hero.template-text .border.line1 {
		left:	50%;
	}
		.hero.template-1-2 .txt,
		.hero.template-text .txt {
			padding-right: 10%;	
		}
		.hero.template-1-2 .image {
			height: 		86vh;	
		}
			.hero.template-1-2 .image .slider{
				width:		100%;
				height:		100%;
				overflow: 	hidden;
			}

			.hero.template-1-2  h1,
			.hero.template-2-3  h1 {
				padding-bottom: 5%;	
			}

		/* HERO TEXT */
		.hero.template-text  {
			height: 	auto;
		}







	/*-------------------------------*/
	/*        	  HERO 2-3      	   */
	/*-------------------------------*/

		.hero.template-2-3 .txt {
			padding-right: 10%;	
		}

		.hero.template-2-3 .image {
			align-self: flex-end; 
		}
		.hero.template-2-3 .border.line1 {
			/*left:			calc(66.66vw - 0.4vw);*/
			left: 66.2%;
		}



	/*-------------------------------*/
	/*       HERO 1-3 (Projekte)		*/
	/*-------------------------------*/

	/* TEASER */
	.hero.template-1-3 .teaser1,
	.hero.template-1-3 .teaser2 {
		align-self: 	flex-end; /* element unten ausrichten */
		position: 		relative;

		cursor:			pointer;
/*																								border:  solid 1px #2FC3C1;*/
	}
		/* IMAGES */
		.hero.template-1-3 .teaser1 .img,
		.hero.template-1-3 .teaser2 .img  {
			position: 				relative;
			overflow: 				hidden; 
		}
			/* HOVER: ZOOM */
			.hero.template-1-3 .teaser1 .img .img-holder,
			.hero.template-1-3 .teaser2 .img .img-holder {
				overflow: 	hidden; 
			   transition: transform 0.6s ease;
			}

			.hero.template-1-3 .teaser1:hover .img .img-holder,
			.hero.template-1-3 .teaser2:hover .img .img-holder {
				-ms-transform: scale(1.05);
				-moz-transform: scale(1.05);
				-webkit-transform: scale(1.05);
				-o-transform: scale(1.05);

				transform: scale(1.05);
			}


	/* TEXT */
	.hero.template-1-3 .teaser1 span,
	.hero.template-1-3 .teaser2 span{
		padding-bottom:	0.5em;
		display: 			inline-block;
/*																								border:  solid 1px #2FC3C1;*/
	}

	/* LINES */
	.hero.template-1-3 .border.line1 {
		/*	left:			calc(33.33vw + 0.4vw);*/
		left: 33.7%;
	}
	.hero.template-1-3 .border.line2 {
		/*	left:			calc(66.66vw - 0.4vw);*/
		left: 66.9%;
	}
	






/*-------------------------------*/
/*       TEXT COL 1 (1-2)      	*/
/*-------------------------------*/

.txt-1col-1-2 {  }





/*-------------------------------*/
/*    	TEASER GROUP (1-3)		*/
/*			IMAGE + TEXTE 				*/
/*-------------------------------*/

.teaser-group-3 { 
}

	/* TEASER */
	.teaser-group-3 .teaser{

		/* same hight for all boxes */
		display: 			flex;
		flex-direction:	column;
		flex: 				1;

		cursor:				pointer;
		/*margin-bottom:	60px;*/
																								
	}
		/* IMAGE */
		.teaser-group-3 .teaser .img  {
			position: 				relative;
			overflow: 				hidden; 
		}

		/* LINE */
		.teaser-group-3 .teaser hr  {
			width: 				100%;
			margin-bottom: 	25px;
			border-bottom:    2px solid black;
		}

		/* TXT + BUTTON */
		.teaser-group-3 .teaser .txt .button {
			width: 	100%;
		}
			.teaser-group-3 .teaser .txt .button .label  {
				margin-right: 10%;
			}


		/* HOVER: ZOOM */
		.teaser-group-3 .teaser .img .img-holder {
		   transition: transform 0.6s ease;
		}
		.teaser-group-3 .teaser:hover .img .img-holder {
			-ms-transform: scale(1.05);
			-moz-transform: scale(1.05);
			-webkit-transform: scale(1.05);
			-o-transform: scale(1.05);

			transform: scale(1.05);
		}





/*-------------------------------*/
/*      		 HEADLINE   	   	*/
/*-------------------------------*/

.txt-headline { }





/*-------------------------------*/
/*      		 LOGO WALL   	   	*/
/*-------------------------------*/

.image-logowall { 
}
	.image-logowall .logo {
/*																						border:  solid 1px red;*/
	}
		.image-logowall .logo .img {
			padding-bottom: 	15px;
			margin-bottom: 	10px;
			border-bottom: 	2px solid black;
		}




/*-------------------------------*/
/*      		 NUMBER WALL      	*/
/*-------------------------------*/

.text-numberwall { 
}
	.text-numberwall .box {
																															
	}
		.text-numberwall .title,
		.text-numberwall .fact {
			display:	inline-block;
			width:	100%;
/*																					border:  solid 1px red;	*/
		}
			.text-numberwall .title {
				margin-bottom: 	10px;
				border-bottom: 	2px solid black;
			}




/*-------------------------------*/
/*      		 FACTLIST    		 	*/
/*-------------------------------*/

.text-project-facts { 
}
	.text-project-facts .box {
																															
	}
		.text-project-facts .title,
		.text-project-facts .fact {
			display:	inline-block;
			width:	100%;
		}
			.text-project-facts .title {
				margin-bottom: 	10px;
				border-bottom: 	2px solid black;
			}






/*-------------------------------*/
/*				ACCORDION	   		*/
/*-------------------------------*/

.accordions {
}
	/*	
	.accordions .acc {
		overflow: 		hidden;
		border-top: 	2px solid black;
		border-bottom: 2px solid black;
	}*/
	.accordions .acc {
	    overflow: hidden;
	    border-top: 2px solid black;
	    /* Entferne die untere Linie von allen Boxen */
	    border-bottom: none;
	}
		/* Füge nur der letzten Box eine untere Linie hinzu */
		.accordions .acc:last-child {
		    border-bottom: 2px solid black;
		}

		.accordions .acc li {
			list-style-type:	none;
			padding-bottom:	20px;
			padding-left: 		0; 
		}
			/* unset settings in base.css */
			.accordions .acc li:before {
			    content: 	"";
			    font-size:	unset;
			    color: 		unset;
			    position:	unset;
			    left: 		unset;
			    top: 		unset;
			}


		/* BOX */
		.accordions .acc_ctrl {
			border:			none;
			cursor:	 		pointer;
			display: 		block;
			outline: 		none;

			padding: 1.8% 0 0 0;
			/*padding: 		1.8em;
			padding-left: 	3.0em;*/

			position: 		relative;
			width: 			100%;

			text-align: 	left;
			background:		#FFF;
		}
			.accordions .acc_ctrl.active {
				transition: all 0.2s ease-in-out;
				/*background: 	var(--color1);*/
			}

			/* TITLE */
			.accordions .acc_ctrl h3{
				/*color: 		var(--color3);*/
			}
			.accordions .acc_ctrl.active h3{
				position: 	relative;
				/*color: 		#FFF;*/
			}			

			/* ICON */
			.accordions .acc_ctrl:before,
			.accordions .acc_ctrl:after{
				margin-right: 	5px;
				position: 		absolute;
				height: 			3px;
				right: 			0;
				top: 				60%;
				width: 			30px;

				/*background: 	#FFF;*/
				background: 	var(--color1);
				content: 		'';
			}
				.accordions .acc_ctrl:before {
					-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;
				}
			.accordions .acc_ctrl.active:before {
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			}
				/* ICON OPEN */
				.accordions .acc_ctrl.active:after,
				.accordions .acc_ctrl.active:before{
					background: 	var(--color1);
				}

		/* PANEL */
		.accordions .acc_panel {
			display:		none;
			overflow:	hidden;
			padding: 	2% 0 3% 0;
			background: #FFF;
		}
			.accordions .acc_panel li {
				list-style-type: initial;
			}
				.accordions .acc_panel .content-wrap {
    			}
					/* TEXT */
					.accordions .acc_panel .txt {
						display: 			inline-block;
						vertical-align:	top;
						width:  				49%;
						padding-right: 	4%;
																		/*border: solid 1px #0F6;*/
					}
						.accordions .acc_panel .txt-only {
							width:  				100%;
							padding-right: 	10%;
						}
					/* IMAGE */
					.accordions .acc_panel .img-holder {
						display: 			inline-block;
						vertical-align:	top;
						width:  				50%;
																		/*border: solid 1px #0F6;*/
					}





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

.team-group {
}





/*-------------------------------*/
/*			  IMAGE (SMALL)	 		*/
/*-------------------------------*/

.image-1-3 {  }
	.image-1-3 .image.right {  
		grid-column-start:	3; 
		grid-column-end:		span 1;

/*																		border: solid 1px #0F6;*/
	}



/*-------------------------------*/
/*			  IMAGE (MEDIUM)	 		*/
/*-------------------------------*/

.image-2-3 {  }
	.image-2-3 .image.right {  
		grid-column-start:	2; 
		grid-column-end:		span 2;

/*																		border: solid 1px #0F6;*/
	}



/*-------------------------------*/
/*			 IMAGE (2xMEDIUM)	 		*/
/*-------------------------------*/

.image-2x-medium {  }
	.image-2x-medium .image1 { 
	}







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

#footer {
	padding-bottom: 		4vh;
	background-color: var(--color1);

	width: 100vw !important;
}

	#footer .contact  {
	}
		#footer .contact .social {
			text-align: 	right;
		}

	#footer .imprint {
	}
		#footer .imprint .links {
			text-align: 	right;

			height: auto !important;;  
			padding-bottom: 0 !important;
/*																						border:  solid 1px red;*/
		}











/* ========================================================================================================================================================= */








/*-------------------------------*/
/*			  IMAGE: LARGE				*/
/*-------------------------------*/

.img-large{  
																/*border:  solid 1px #2FC3C1;*/
}
	.img-large .img {  
	}



/*-------------------------------*/
/*		 IMAGE: FULLWIDHT (16:9)	*/
/*-------------------------------*/

.img-full{  
																/*border:  solid 1px #2FC3C1;*/
}
	.img-full .img-holder {  
		/*height:		85vh;*/
	}