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

/* ROOT TEXT */
html 					{ font-size: 19px; letter-spacing: 0.01em;}


/* HEADLINES */
h1 					{ font-size: 2.1rem; }	/* Seitentitel */ 

@media screen and (max-height: 749px) {
    h1 {
        font-size: 1.8rem; /* Seitentitel kleiner */
    }
}

h2 					{ font-size: 1.6rem; }	/* Rubrikentitel */ 
h3 					{ font-size: 1.2rem; }	/* Absatztitel */ 


/* TEXTE */
.ch_fact				{ font-size: 3.0rem; }	/* Fact, Number */
.ch_intro			{ font-size: 1.3rem; }	/* Intro */
.ch_rubrictitle	{ font-size: 0.6rem; }	/* Rubrikentitel */
.ch_bt_label		{ font-size: 1.0rem; }	/* Button Label */	

/*.ch_title 		{ font-size: 2.0rem; }	Title */		
/*.ch_text			{  }							Fließtext */






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


/* NAVIGATION */
.linknav				{ font-size: 2.1rem; line-height: 1.2rem; text-transform: capitalize; }


/* FONT HIGHLIGHT */
.linknav.sub 		{  }
.linknav.active 	{ text-decoration: none !important; border-bottom: none !important; }


/* NOTES */
.linknotes			{ font-size: 0.8rem; line-height: 0.5 !important; }																								/* Marginalien */
   





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

i{
	transform-origin: top left;
	transform: 			scale(0.9);
	margin-right:		8px;
}




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


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

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



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

#navbar{
	/*padding: 	0;	  reset */
	/*	padding: 	20px 0 0 var(--pagemargin);*/
}
	#navbar .bg {  }
		#navbar .bg.open {
			transition: height .5s ease;
			height:		100vh;
		}
		#navbar .bg.close {
			transition: height .4s ease;
			height:		0;
		}


	/* MENU */
	#navbar .menu{
		position:		relative;
		display: 		inline-block;

		margin:			0;
		top: 				8vh;
  		height:			auto;

		align-content:				unset;
		grid-gap: 					unset;
		grid-row-gap:				unset;
		grid-template-columns:	unset;

/*																		border:  solid 1px #2FC3C1;*/
	}
		#navbar .menu{
			display: 	none;
		}
			.menu ul {
				flex-direction: column;
				align-items:	stretch;
			}
				.menu ul li {
					max-width:	100%; 
					text-align:	left;
					padding:	10px 0;
				}
					/* Erste und letzte Buttons mittig */
					.menu ul li:first-child,
					.menu ul li:last-child {
						text-align: left;
					}

					/* Feintuning Position Buttons (only Desktop) 
					.menu ul li:nth-child(2) a {
						padding-right: 0;
					}
					.menu ul li:nth-child(3) a {
						padding-left: 0;
					}*/
					
					.menu .linknav{
						color: var(--color6);
					}


	/* BURGER */
	#navbar .bt_burger {
		position:	absolute;

		/* Position korrigieren wegen padding im burger.css */
		top: 			calc( var(--pagemargin) - 10px);
		left: 		calc( var(--pagemargin) - 10px);

		float: 		left;		

		display: 	inline-block !important;
		cursor: 		pointer;
	}
		#navbar .bt_burger.show {
			z-index:	5;
		}

	/* LOGO */
	.lrg-logo,
	.lrg-logo-white,
	.sml-logo {
		width: 		45%;
		bottom: 		3vh;
	}
		.lrg-logo.open,
		.sml-logo.open  {
			background-image:		url('../images/kietzke_logo_invers.svg'); 
		}




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

.hero {
	height: 				100vh;
	padding-bottom:	0 !important;
}
	.hero .wrap { 
	 }
		.hero .txt {
			height: 				auto;
			border-top: 		solid 2px #000;
			border-bottom: 	solid 2px #000;
			padding-top: 		0.7em;
			padding-bottom:	0.8em;
			margin-bottom:		2.0em;
		}
		.hero .border {
			display: none;
		}



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

	.hero.template-1-2,
	.hero.template-2-3 {
	}
		.hero.template-1-2 .txt,
		.hero.template-2-3 .txt {
			margin-bottom:		0.7em;
		}
		.hero.template-1-2 .image,
		.hero.template-2-3 .image {
			height: 			50vh;
			align-self: 	flex-end; /* element unten ausrichten */
			margin-bottom:	10vh !important;
		}
		@media screen and (max-height: 739px) {
		    .hero.template-1-2 .image,
		    .hero.template-2-3 .image { 
		        height: 47vh;
		    }
		}

	
	/*-------------------------------*/
	/*       	 HERO 2-3				*/	
	/*-------------------------------*/
			
	.hero.template-2-3 {
		height: 				auto;
	}
		.hero.template-2-3 .image.ratio-3-4 {
			aspect-ratio: unset; 
		}


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

		.hero.template-text .image {
			height: 			auto;	
			aspect-ratio:	4 / 3; 
		}
		.hero.template-text .txt {
			padding-right: 0;	
		}




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

	.hero.template-1-3 {
		height: 				auto;
	}
/*		.hero.template-1-3 .txt {
			height: 				auto;
			margin-bottom:		2.0em;
		}*/

		.hero.template-1-3 .teaser1{
			margin-bottom:	 2.0em;
		}

		.hero.template-1-3 .teaser2{
			margin-bottom:	 2.0em;
		}



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

.txt-1col-1-2 {  }





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

.teaser-group-3 { 
}
		/* LINE */
		.teaser-group-3 .teaser hr  {
			margin-bottom: 	15px;
			border-bottom: 	1px solid black;
		}






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

.image-logowall { 
}
	.image-logowall .logo {
	}
		.image-logowall .logo .img {
			margin-bottom: 	0;
			/*padding-bottom: 	15px;
			margin-bottom: 	10px;*/
			border-bottom:		1px solid var(--color5);
		}
		.image-logowall .logo .ch_notes {
			display: none;
		}




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

.text-numberwall { 
}
	.text-numberwall .box {																										
	}
		.text-numberwall .title,
		.text-numberwall .fact {
		}
			.text-numberwall .title {
				border-bottom:		1px solid var(--color5);
			}





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

.accordions {  }
	.accordions .acc { 
		border-top: 1px solid black;
	}
		/* Füge nur der letzten Box eine untere Linie hinzu */
		.accordions .acc:last-child {
		    border-bottom: 1px solid black;
		}

		.accordions .acc li {
			padding-bottom: 0;
		}
		/* BOX */
		.accordions .acc_ctrl { 
			padding: 5% 0 3% 0;
		}

			/* ICON */
			.accordions .acc_ctrl:before,
			.accordions .acc_ctrl:after{
				margin-right: 	2px;
				height: 			2px;
				top: 				50%;
				width: 			22px;

			}
		/* PANEL */
		.accordions .acc_panel {
			padding: 3% 0 15% 0;
		}




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

.image-2x-medium {  }
	.image-2x-medium .image1 { 
		padding-bottom:	60px;
	}





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

#footer { 
	padding-bottom: 		2vh;
}
		#footer .contact .social {
			text-align: 	left;
		}






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



/*-------------------------------*/
/*      GRID: 3-SPALTIG          */
/*      GRID: 8-SPALTIG          */
/*-------------------------------*/

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

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

	/* BOX */
	.grid-8 .box { grid-column: span 8; }

		/* COLUMN POSTION */

		/* COLUMN SPAN */
		.grid-8 .box.span-2 { grid-column: span 4; }
		.grid-8 .box.span-4 { grid-column: span 8; }



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

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

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

		/* COLUMN POSTION 
		.grid-4 .box.center-span-2	{ grid-column-start: 1 !important; grid-column-end: span 4 !important; }*/





/* BLOC GAPS */
.gap-0-25-top 		{ padding-top:		  6px; }
.gap-0-25-bottom	{ padding-bottom:	  6px; }
.gap-0-5-top 		{ padding-top:		 12px; }
.gap-0-5-bottom	{ padding-bottom:	 12px; }
.gap-0-75-bottom	{ padding-bottom:	 20px; }
.gap-1-top 			{ padding-top:		 25px; }
.gap-1-bottom		{ padding-bottom:	 25px; }
.gap-2-top 			{ padding-top:		 50px; }
.gap-2-bottom		{ padding-bottom:	 50px; }
.gap-3-top 			{ padding-top:		 75px; }
.gap-3-bottom		{ padding-bottom:	 75px; }
.gap-4-top 			{ padding-top:		100px; }
.gap-4-bottom		{ padding-bottom:	100px; }






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


/* BUTTON DEFAULT */
button {
	gap:	10px;
}

	/* ARROW IN CIRCLE */
	button .arrow {
      width:            40px;
      height:           40px;
      transform:        translateY(-9px); /* feintuning */
      font-size:  		1.2rem;
	}
	   button .arrow::before{
			top:     8px; /* feintuning */
	   }

   /* ARROW WITHOUT CIRCLE */
   button .arrow-plain {   
      transform:        translateY(-9px); /* feintuning */
   }
	   button .arrow-plain::before {
	      top:     4px; /* feintuning */
	   }

	/* HOVER */
	button:hover {
	    opacity: 1.0;
	}

 	/* HOVEREFFECT */
	.hover-teaser span,
	.button:hover span,
	.button-boarder:hover span,
	.button-light:hover span {
 		opacity: 1.0;
 	}




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


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



/*-------------------------------*/
/*      	OWL SLIDESHOW      		*/
/*-------------------------------*/

/* SLIDE  */
.owl-theme .bg-image{
	height:               45vh !important;
}
	.owl-theme .owl-dots .owl-dot span {
		width:          35px !important;
		height:         3px !important;
		margin-left:    10px !important;
	}