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


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

/* HEADLINES */ 
h1 				{ font-size: 2.7rem; line-height: 1.2; }					/* Headline */ 
h2 				{ font-size: 0.7rem; line-height: 1.4; }					/* Titel Rubric */ 
h3 				{ font-size: 1.8rem; line-height: 1.2; }					/* Titel Kapitel */ 
h4 				{ font-size: 1.2rem; }											/* Absatztitel */ 

/* TEXTE */
.ch_intro 		{ font-size: 1.2rem; line-height: 1.4; }					/* Intro */

/* BUTTONS */
.ch_bt_label	{ font-size: 1.0rem ; line-height: 1.6; letter-spacing: 0.15em; }	

/* HIGHLIGHTING */
.label   		{ font-size: 0.7rem; line-height: 1.4; letter-spacing: 0.1em; }





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


/*-------------------------------*/
/*             Page              */
/*-------------------------------*/

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



/*-------------------------------*/
/*            Header             */
/*-------------------------------*/

#header{  }

	/* LOGO */
	#header .lrg-logo{
		width: 			260px;
		height: 			18px;
	}



/*-------------------------------*/
/*         HERO / INTRO   	 	   */
/*-------------------------------*/

#section1 {  
}
	.hero-teaser {	
	}
		/* TEXT INTRO */
		.hero-teaser .txt-intro {  
		}
			/* TEXT INTRO BOX */
			.hero-teaser .txt-intro .box{  
				grid-column: span 3 !important;
			}

	/* PORTRAIT 3:2 > 2:3 */
	.hero-teaser .img-hero .ratio-3-2 {			
		/*aspect-ratio: auto 3 / 4; */

		/* fallback aspect-ratio 3:4 */
		width:			100%;
		padding-top:	133.33%;
	}





/*-------------------------------*/
/*           SECTIONS            */
/*-------------------------------*/

.cd-cover,
.cd-content {
	padding-bottom: 				0 !important;
}	


/*-------------------------------*/
/*       FOCUS / POSITION  	   */
/*-------------------------------*/

#section2 {
	padding-bottom: 0 !important;
}
	.focus {
		height:  	50% !important;
	}
		/* Text Animation */
		.focus .txt-ani {
			width:  				60%;			
			height: 				auto;	
			padding-bottom:  	40px;
		}
	.focus .img-scroll{
		width: 	120%;
		bottom:	50vh;
	}
		.focus .txt {
			height:  auto;
		}
			.focus .txt .box {
				/*border: solid 1px #6B00FF;*/
				grid-column: span 2 !important;
			}
		



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

.headline { 
}
	.headline.centred .txt-block1,
	.headline.centred .txt-block2 {
		width:  			100%;	
		margin-left: 	0;
		text-align: 	left;
										/*border: solid 1px #FBFF8C;*/
	}





/*-------------------------------*/
/*         TEXT + IMAGE    	 	*/
/*-------------------------------*/

.img-holder {
}

.txt-image,
.txt-image-right {  
}
	/* TEXT */
	.txt-image .txt,
	.txt-image-right .txt {
		vertical-align: bottom;
		grid-column: span 2 !important;		
	}
		/* RIGHT */
		.txt-image-right .txt {		
			order: 2;
		}

	/* IMAGE SMALL */
	.txt-image .img-small,
	.txt-image-right .img-small {
		grid-column: span 2 !important;
	}
		/* LEFT (DEFAULT) */
		.txt-image .img-small {
		}
		/* RIGHT */
		.txt-image-right .img-small {		
			order:  1;					
		}

	/* IMAGE MEDIUM */
	.txt-image .img-medium {
		grid-column: span 3 !important;
														/*border: solid 1px #FC253A;*/
	}



/*-------------------------------*/
/*          REFERENZEN           */
/*-------------------------------*/

#section4 {  }
	/* Headline */
	#section4 .head .txt { 
		grid-column: span 2 !important;
													/*border: solid 1px #FC253A; */
	}



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

.footer {
}
	.footer .img-small{
	}
	.footer .copywrite {
		display: none;
		/*border: solid 1px #FC253A;*/
	}	
	.footer .imprint {
		grid-column: span 3 !important;
		/*border: solid 1px #FC253A;*/
	}	



/*-------------------------------*/
/*        	 IMPRINT      	    	*/
/*-------------------------------*/

#impressum .txt,
#datenschutz .txt {
	grid-column: span 2 !important;
												/*border: solid 1px #FC253A;*/
}






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



/*-------------------------------*/
/*      GRID: 4-SPALTIG          */
/*      GRID: 3-SPALTIG          */
/*-------------------------------*/

/* GRID  */
.grid-4,
.grid-3 { 
	column-gap: 	5%; 
}


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

	/* BOX */
	.grid-4 .box { }

		/* COLUMN START-END (from Position 2-4)*/
		.grid-4 .colpos-2-to-3	{ grid-column: span 4 }
		.grid-4 .colpos-2-to-4	{ grid-column: span 4 }

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


/* 3-COLUMN GRID > 4-COLUMN */
.grid-3 { grid-template-columns:	22% 22% 22% 22% !important; }

	/* BOX */
	.grid-3 .box { }

	/* COLUMN POSITION */
	.grid-3 .box.colpos-2 { 

				/*background-color: #E1E1E1 !important;*/

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



/* 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:		 40px; }
.gap-1-bottom		{ padding-bottom:	 40px; }
.gap-2-top 			{ padding-top:		 80px; }
.gap-2-bottom		{ padding-bottom:	 80px; }
.gap-3-top 			{ padding-top:		120px; }
.gap-3-bottom		{ padding-bottom:	120px; }
.gap-4-top 			{ padding-top:		160px; }
.gap-4-bottom		{ padding-bottom:	160px; }




/*-------------------------------*/
/*			  BUTTON		     			*/
/*-------------------------------*/

/* DEFAULT */
.button,
.button-boarder,
.button-no-boarder {
}
		.button span:after,
		.button-boarder span:after, 
		.button-no-boarder span:after {
							
			background-size:	69px 17px;
			width:				69px; 
			height:				17px;
		}




/*-------------------------------*/
/*            SLIDER             */
/*-------------------------------*/

.projektGallery { }
	.owl-carousel { }

		/* NAV (Custom) */	
		.owl-nav{
			display:  none;
		}
		.btns{ }
			.customNextBtn, 
			.customPreviousBtn{
				display:  none;
			}
			.customPreviousBtn{
			    margin-top:  		0;
			}

	/* DOTS */
	.owl-theme .owl-dots { 
		text-align: 	left;
	}
		.owl-theme .owl-dots .owl-dot {  }
		    .owl-theme .owl-dots .owl-dot span {
		    	/* Circle */
		    	width:			10px;
		    	height: 			10px;
		    }