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


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

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

@media screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
	html { 
		font-size: 20px; 
	}
}*/


/* HEADLINES */
h1 				 	{ font-size: 1.6rem; letter-spacing: 0; }	/* Title Block */ 
h2 					{ font-size: 1.2rem; 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.4rem; letter-spacing: 0; }	/* Title Hero-Teaser > h2 */ 
.hero-teaser .teaserbox h2			{ font-size: 1.9rem; letter-spacing: 0; }		/* Title Teaser > h1 */ 



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






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

/* BASIS */
a			{ /*border-bottom: 2px solid currentColor; padding-bottom: 0px; */}
a:hover		{  }
a:focus		{  }
a:active	{  }


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



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


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

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



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




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

.hero-teaser{
}

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

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

			/* TEXT */
			.hero-teaser .teaser-group-1 .textbox {
				height:		60%;
				padding: 	3% 20% 3% 3%;
			}
			.hero-teaser .teaser-group-1 .logo {  }



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

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

			/* IMAGE */
			.hero-teaser .teaser-group-2 .imagebox{
				height:		60%;
			}
			.hero-teaser .teaser-group-2 .contact{
				height: 		40%;
			}
				/* LEFT */
				.hero-teaser .teaser-group-2 .contact .left {
					width: 		60% !important;
				}
				/* RIGHT */
				.hero-teaser .teaser-group-2 .contact .right {
					width: 		40% !important;
				}






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


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


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


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

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

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

  		/* SPAN (only from pos 1)*/
		.grid-4 .box.span-2 { grid-column: span 2 !important; }
		.grid-4 .box.span-3 { grid-column: span 4 !important; }
		.grid-4 .box.span-4 { grid-column: 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:		 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; }



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

.button,
.button-boarder,
.button-light {
	transition:		none;
	/*padding-right:	40px;*/
}
	.button span,
	.button-boarder span,
	.button-light span{
		transition: none;
	}
	.button span:after,
	.button-boarder span:after,
	.button-light span:after {
		transition:	none;
		/*transform:	scale(1.8);
		opacity:	1;
		top: 		-5px;
		right:		-20px;*/
	}
	/*@media screen and (max-width: 1024px) {
		.button span:after,
		.button-boarder span:after,
		.button-light span:after {
			transform:	scale(1.6);
			top: 	-1px;
		}*/
	}



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

.button-light-arrow {  }
	.button-light-arrow span {  }
	.button-light-arrow span:after {
		transform:	scale(1.8);
		/*top: 		-23px;
		left:		18px;*/
		top: -0.84rem;
	}
	@media screen and (max-width: 1024px) {
		.button-light-arrow span:after {
			top: -0.85rem;
		}
	}



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

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



