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


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


/* HEADLINES */
h1 				 	{ font-size: 1.8rem; line-height: 1.2; letter-spacing: 0.03em; }	/* Title Block	– x1.8 */ 
h2 					{ font-size: 1.2rem; line-height: 1.3; letter-spacing: 0.03em; }	/* Title Block 	– x1.0 */ 
h3 					{ font-size: 1.0rem; line-height: 1.3; }							/* Title Block 	– x1.0 */ 
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: 	2.5rem; line-height: 1.1; }							/* 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: 2px 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	         	*/
/*-------------------------------*/

#header{
	position: 			fixed;

	width: 				auto;
	height: 				auto;
	padding: 			4% 0 0 4%;
	z-index: 			1001;
														border: solid 1px #00F;
}	
	/*
	#header .lrg-logo{
		display: 		inline-block;
		width: 			150px;
		height: 			55px;
		
		background-size: 		auto 100%;
		background-position:left bottom;
	   background-repeat:	no-repeat;
		background-image:	url('../images/licht-technik_logo.svg');
	}*/
	#header .bt_back{
		display: 			inline-block;

		float: 				right;
		width: 				30px;
		height: 				45px;
		
		background: 		url("../images/bt_back.svg");
		background-size: 	auto 30px;
		background-position:right bottom;
	   background-repeat:	no-repeat
	}





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

.hero-teaser{
	width: 		100vw;
	height:		100vh;
	padding:		0;

/*	background-color: var(--color1);*/
}

	/* TEASER GROUPS */
	.hero-teaser .teaser-group-1,
	.hero-teaser .teaser-group-2 {
		width: 		50%;
		height:		100%;
		float: 		left;
															/*background-color: #5CB4BF;*/
	}


		/*-------------------------------*/
		/*         Teaser (left)         */
		/*-------------------------------*/

		.hero-teaser .teaser-group-1 { 
															/*	background-color: red;*/
		}

			/* TEXT */
			.hero-teaser .teaser-group-1 .textbox {
				width: 		100%;
				height:		70%;
				padding: 	3% 25% 3% 3%;
															/*border: solid 1px red;*/
			}
			.hero-teaser .teaser-group-1 .logo {
				position:	absolute;
				bottom:		3%;
				left:			3%;

				display: 	inline-block;
				width:		33vw;
				height:		auto;

				/* Fallback: Proportionale Höhe */
				padding-bottom: 		6%; /* Höhe im Verhältnis zur Breite */

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

															/*border: solid 1px red;*/
			}


		/*-------------------------------*/
		/*         Teaser (right)        */
		/*-------------------------------*/

		.hero-teaser .teaser-group-2 {
			float: 		right;
		}

			/* IMAGE */
			/*.hero-teaser .teaser-group-2 .imagebox{
				width: 		100%;
				height:		70%;

				/*background-blend-mode:	multiply;
				background-position:	bottom;
				background-repeat:	no-repeat;
				background-size:		cover;
				position:				relative;
			}*/

			.hero-teaser .teaser-group-2 .imagebox {
			    width:                 100%;
			    height:                70%;
			    background-position:   bottom;
			    background-repeat:     no-repeat;
			    background-size:       cover;
			    position:              relative;
			    animation: slideBackground 15s infinite; /* Animation mit einer Dauer von 15s */
			}

			@keyframes slideBackground {
			    0% {
			        background-image: url('../images/kietzke_background-1.jpg');
			    }
			    25% {
			        background-image: url('../images/kietzke_background-2.jpg');
			    }
			    50% {
			        background-image: url('../images/kietzke_background-3.jpg');
			    }
			    75% {
			        background-image: url('../images/kietzke_background-4.jpg');
			    }
			    100% {
			        background-image: url('../images/kietzke_background-5.jpg');
			    }
			}


			
			/* CONTACT */
			.hero-teaser .teaser-group-2 .contact{
				width: 		100%;
				height: 		30%;
				bottom:		0;

				padding: 	10% 3% 3% 0;
															/*background-color: #FFF;*/
															/*border: solid 1px blue;*/
			}
				.hero-teaser .teaser-group-2 .contact .left,
				.hero-teaser .teaser-group-2 .contact .right {
					width: 		50% !important;
					height:		100%;
					float: 		left !important;
															
				}
				.hero-teaser .teaser-group-2 .contact .right {
					float: 		right;
					text-align: right;
															/*border: solid 1px red;*/
				}