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


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


/* HEADLINES */
h1 				 	{ font-size: 1.5rem; letter-spacing: 0; }	/* Title Block */ 
h2 					{ font-size: 1.0rem; letter-spacing: 0; }	/* Title Block */ 
h3 					{ font-size: 1.0rem; letter-spacing: 0; }	/* Title Block */ 


/* EXEPTIONS – Hero-Teaser */
.hero-teaser .imagebox .textbox h1	{ font-size: 1.3rem; letter-spacing: 0; }	/* Title Hero-Teaser > h2 */ 
.hero-teaser .teaserbox h2			{ font-size: 1.5rem; letter-spacing: 0; }	/* Title Teaser > h1 */ 



/* TEXTE */
.ch_intro	  		{ font-size: 1.5rem; line-height: 1.1; }		/* Intro 			= h3 */
.ch_body		 		{  }														/* Bodytext	 	= root */
.ch_note				{ font-size:  .7rem; }								/* Notes 		= 0.8 */
.ch_rubric-title	{ font-size:  .7rem; }								/* Rubric Title = ch_note */
.ch_facts			{ font-size: 3.0rem; line-height: 1.3; }		/* Numbers Facts= x4.0 */


/* HIGHLIGHTING */
.underline-small::after{
	height:		5px;
	width:		60px;
	left:		0;
	bottom:		-10px;
}



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

/* BASIS */
a			{ /*border-bottom: 1px solid currentColor; padding-bottom: 1px !important;*/ }
a:hover		{  }
a:focus		{  }
a:active	{  }

/* NAVIGATION */
.linknav			{ font-family: 'Rotunda-Light', Arial, sans-serif; color: var(--color1); font-size: 1.3rem; line-height: 1.7; }	/* Navigation	  = h1 */
.linknav.sub		{ font-family: 'Rotunda-Light', Arial, sans-serif; font-size: 1rem; line-height: 1.6; }							/* Navigation Sub = ch_intro */
.linknav.active 	{ padding-bottom: 0 !important; }



/* =============================================================================
   Buttons
   ========================================================================== */




/* =============================================================================
   Content: Modules
   ========================================================================== */



/*-------------------------------*/
/*        	  Navbar	        		*/
/*-------------------------------*/

#header{
	padding: 			8% 0 0 8%;
}
	#header .lrg-logo{
		width: 			105px;
		height: 			45px;
	}
	#header .bt_back{
	}


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

.hero-teaser{
}
	/* TEASER GROUPS */
	.hero-teaser .teaser-group-1 {
		width: 		100%;
		height:		auto;
	}
	.hero-teaser .teaser-group-2 {
		width: 		100%;
		height:		auto;
	}



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

		.hero-teaser .teaser-group-1 {  }

			/* TEXT */
			.hero-teaser .teaser-group-1 .textbox {
				height:		auto;
				padding: 	4% 20% 10% 4%;
			}
			.hero-teaser .teaser-group-1 .logo { 
				width: 		50vw;
				height: 		6%;
				bottom:		3.5%;
				left:			4%;
			}



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

		.hero-teaser .teaser-group-2 { }

			/* IMAGE */
			.hero-teaser .teaser-group-2 .imagebox{
				height: 		30vh;
				width: 		100%;
				bottom:		0;
				left: 		30%;
															/*background-color: #FFF;*/
			}
			/* CONTACT */
			.hero-teaser .teaser-group-2 .contact{
				height: 		auto;
				padding: 	5% 4% 4% 30%;
			}
				.hero-teaser .teaser-group-2 .contact .left,
				.hero-teaser .teaser-group-2 .contact .right {
					width: 		100% !important;
					height:		auto;
					float: 		left !important;
				}
					.hero-teaser .teaser-group-2 .contact .left.v-bottom-col{
						display:				block;
						flex-direction:	unset;
						justify-content:	unset;
					}
					.hero-teaser .teaser-group-2 .contact .right{
						position:	absolute;
						bottom:		2.5%;
						right:		4%;

						display: 	inline-block;
						width:		45vw !important;
						height:		auto;
					}
					.hero-teaser .teaser-group-2 .contact .left .adress{
						display: none;
					}



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


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

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



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

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

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

	/* BOX */
	.grid-4 .box { grid-column: span 4 !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; }


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

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

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


/* BLOC GAPS */
.gap-0-25-top 	{ padding-top:		  6px; }
.gap-0-25-bottom{ padding-bottom:	  6px; }
.gap-0-5-top 	{ padding-top:		 15px; }
.gap-0-5-bottom	{ padding-bottom:	 15px; }
.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:		140px; }
.gap-4-bottom	{ padding-bottom:	140px; }


/* SQUARE > 2:1; */
.ratio-square  {  }
	.ratio-square:before {
	  padding-top:	50%;
	}


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

.button,
.button-boarder,
.button-light {
	transition:		none;
}
	.button span,
	.button-boarder span,
	.button-light span{
		top: 		1px;
		transition: none;
	}
	.button span:after,
	.button-boarder span:after,
	.button-light span:after {
		transition:	none;
		transform:	scale(1);
	}



/*-------------------------------*/
/*      ARROW BUTTON (CIRCLE)    */
/*-------------------------------*/

.button-light-arrow,
.button-grey-arrow {  }
	.button-light-arrow span {  }
	.button-light-arrow span:after,
	.button-grey-arrow span:after {
		transform:	scale(1.6);
		top: -0.8rem;										/*top: -0.65rem; */								
	}
	.button-grey-arrow span:after {
		top: 		-10px;
	}


/*-------------------------------*/
/*     BUTTON / ICON (CIRCLE)    */
/*-------------------------------*/

.icon-number,
.button-mail,
.button-mail-light {
}
	/* NUMBER */
	.icon-number {
	}
	.icon-number span:after {
		transform:	scale(1.2)!important;
		top: 		-4px;
	}




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

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