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

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

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

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

h2 				{ font-size: 2.0rem; }									/* Rubrikentitel */
h3 				{ font-size: 1.4rem; padding-bottom: 5px; }		/* Absatztitel */ 


/* TEXTE */
.ch_fact       { font-size: 3.5rem; }  /* Fact, Number */
.ch_title 		{ font-size: 2.8rem; }	/* Title */		
.ch_intro		{ font-size: 1.3rem; }	/* Intro */
.ch_text			{  }							/* Fließtext */
.ch_rubrictitle{ font-size: 0.6rem; }	/* Rubrikentitel */
.ch_bt_label	{  }							/* Button Label */	




/* =============================================================================
   Links
   ========================================================================== */
  
/* NAVIGATION */
.linknav				{ font-size: 3.5rem; line-height: 3.5rem; text-transform: capitalize; }
.linknav.sub 		{  }
.linknav.active	{  }

/* NOTES */
.linknotes			{  }		/*Marginalien*/
   



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



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


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

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



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

#navbar {
	padding: 20px var(--pagemargin) 15px var(--pagemargin);
}
	/* MENU */
	#navbar .menu {
		width: 			100% !important;
	}
	#navbar .bg {  }
		#navbar .bg.open {
			transition: height .3s ease;
			height:		100vh;
		}
		#navbar .bg.close {
			transition: height .3s ease;
			height:		0;
		}

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

		margin:			0;
		top: 				10vh !important;
  		height:			auto;

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


	}
		#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) - 15px) !important; 
		left: 		calc( var(--pagemargin) - 15px) !important;

		float: 		left;		

		display: 	inline-block !important;
		cursor: 		pointer;

		transform: scale(1.5);
		transform-origin: top left;

	}
		#navbar .bt_burger.show {
			z-index:	5;
		}

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





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

.hero {
	position:			relative;
	padding-top: 		7vh;
	padding-bottom:	12vh ;

/*																						border:  solid 1px red;*/
}
	.hero .wrap {
	}
		.hero .txt,
		.hero .image {
			
/*																						border:  solid 1px #2FC3C1;*/
		}
		.hero .txt {
			height: 				auto;
/*			border-top: 		solid 2px #000;*/
			border-bottom: 	solid 2px #000;
			padding-top: 		0.7em;
			padding-bottom:	0 em;
			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 {
			grid-column: span 8 !important;
		}
		.hero.template-1-2 .image,
		.hero.template-2-3 .image  {
			grid-column: span 8 !important;
			height: 			60vh;
			align-self: 	flex-end; /* element unten ausrichten */
		}

		/*-------------------------------*/
		/*       	 HERO 2-3				*/	
		/*-------------------------------*/
		.hero.template-2-3 .image {
			justify-self: end;
		}


      /*-------------------------------*/
      /*           HERO 1-2            */
      /*           SLIDESHOW           */
      /*-------------------------------*/
      /* SLIDE  */
		.owl-theme .bg-image{
				height: 60vh !important;
		}

			@media screen and (max-height: 1024px) {
				.owl-theme .bg-image{
					height: 50vh !important;
				}
			}



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

   .hero.template-1-3 {
   }
      .hero.template-1-3 .txt {
         height:           auto;
         padding-right: 	20%;
         margin-bottom:    2.0em;

         grid-column: span 2 !important;
      }

/*      .hero.template-1-3 .image1{
         align-self: flex-end; /* element unten ausrichten 
         grid-column-start: 1; 
      }*/



   /*-------------------------------*/
   /*       	 HERO TEXT     		*/
   /*-------------------------------*/

   .hero.template-text {
   }
		.hero.template-text .txt {
			grid-column: span 8 !important;

			border-top: 		unset;
			border-bottom: 	unset;
		}
		.hero.template-text .image {
			grid-column: 	span 8 !important;
			height: 			50vh;
			align-self: 	flex-end; /* element unten ausrichten */
		}




/*-------------------------------*/
/*      TEASER GROUP (1-3)      	*/
/*-------------------------------*/

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


	/* TEASER: Last one delete */
	#teaser_3 {
		display: none;																		
	}






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

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

		.accordions .acc li {
			padding-bottom: 0;
		}
		/* BOX */
		.accordions .acc_ctrl { 
			padding: 3% 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: 0 0 10% 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 4; }

		/* 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 {
		grid-template-columns: repeat(2, 1fr);
	}

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

		/* SPAN */
		.grid-3 .box.span-2 { grid-column: span 2; }
		.grid-3 .box.span-3 { grid-column: span 2; }





/* 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; }





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


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

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

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