/* =============================================================================
   Typography
   ========================================================================== */
   
/* ROOT TEXT */
html 					{ font-size: 19px; letter-spacing: 0.01em;}

/* HEADLINES */
h1 					{ font-size: 2.0rem; }	/* Seitentitel */ 
h2 					{ font-size: 1.2rem; }	/* Rubrikentitel */ 
h3 					{ font-size: 1.0rem; }	/* Absatztitel */ 

/* TEXTE */
.ch_title 			{ font-size: 2.0rem; }	/* Title */		
.ch_intro			{ font-size: 1.1rem; }	/* Intro */
.ch_text				{  }							/* Fließtext */
.ch_rubrictitle	{ font-size: 0.6rem; }	/* Rubrikentitel */
.ch_bt_label		{ font-size: 0.8rem; }	/* Button Label */	




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

/* NAVIGATION */
.linknav				{ font-size: 1.2rem; line-height: 1.2rem; text-decoration: unset; }
.linknav.sub 		{  }
.linknav.active 	{ border-bottom: 3px solid var(--color2); }




/* =============================================================================
   Icons
   ========================================================================== */

i{
	transform-origin: top left;
	transform: 			scale(0.9);
	margin-right:		8px;
}




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


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

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


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

#navbar{
	padding: 	0;	 /* reset */

	height:		65px!important;
	padding: 	20px 0 0 var(--pagemargin);

	/*padding: 	20px 0 0 var(--pagemargin);*/
}
	/* LOGO */
	#navbar .lrg-logo,
	#navbar .sml-logo {
		/*transform-origin: top left;
		transform: 			scale(0.60);*/

		top:  		1px;
		width: 		160px;
		height: 		27px;
		/*border:  	solid transparent;  Hack */ 
		border:  solid 1px #FFF; /* Hack */ 
	}

	/* EMERGENCY BUTTON */
	#navbar .bt_emergency {
		position:		relative;
		display: 		inline-block;
		top:				-4px;
		float: 			right;
		/*padding-right: 0;*/
	}
		#navbar .bt_emergency .button {
			position:  			relative;
			display:				inline-block;
			padding: 			2px 5px 2px 10px !important;
		}
		#navbar .bt_emergency .button span {
			padding-right: 5px;	
		}
		#navbar .bt_emergency .button span:after {
			display:			none;
			padding-right:	5px;
		}
		#navbar .bt_emergency .ch_bt_label {
		    font-size: 0.7rem; 
		}

		/*#navbar .bt_emergency .ch_bt_label {
		    visibility: hidden;
		}

		#navbar .bt_emergency .ch_bt_label::after {
		    content: "Neuer Text";
		    border:  solid 1px #2433FF;
		    visibility: visible;
		}*/





	/* BURGER */
	#navbar .bt_burger {
		top: 					2px;						/* hack */
		right: 				var(--pagemargin);	/* hack */
		transform-origin: top right;
		transform:			scale(0.4);
	}

	/* MENU */
	#navbar .menu {
		top:			15vh;
		left:  		0;			/* reset */
		width:		85.6vw;	/* reset */
	}
		#navbar .menu .row1 p,
		#navbar .menu .row2 p {
			padding-bottom:  1.5em;
		}
		#navbar .menu .row2{
			grid-column: span 3;
		}
		#navbar .menu li{
			padding: 	0 0 0.4em 0;
		}
		#navbar .menu .contact{
			font-size: 1.0rem;
		}





/*-------------------------------*/
/*        HERO FULLSCREEN        */
/*-------------------------------*/

.hero-start{	
}
	/* BRANDICON */
	.hero-start .brandicon{	
		/* 1/5 of height in pixels */
		width: 		140px;
		height: 		140px;
		top: 			calc(60vh - 60px - 17px);
	}
	/* IMAGE */
	.hero-start .imagebox{	
		height:					60vh;
		background-position: center top;
		/*background-size: 		80vh;*/
	}
		/* TITLE */
		.hero-start .imagebox .titlebox {
			display: none;
		}

/* TITLE (MOBILE) */
.hero-start .txt-intro .titlebox {
	width: 100%;
}
	.hero-start .txt-intro h1{
		width: 70%;
														/*border:  solid 1px #2FC3C1;*/
	}

/* INTRO */
.hero-start .txt-intro .txt {
}




/*-------------------------------*/
/*		 HEADLINE (left/center)		*/
/*-------------------------------*/

.txt-headline {
	padding-right:  20%;
}




/*-------------------------------*/
/*					TEASER				*/
/*-------------------------------*/

.teaser-group{
}
	/* TEASER */
	.teaser-group .teaser{
		margin-bottom:	40px;
	}
		/* IMAGE */
		.teaser-group .teaser .img  {
		}
		/* TEXT */
		.teaser-group .teaser .txt{
			padding-top:		6%;
		}




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

#footer {
}
	/* CLAIM */
	#footer  .claim{	
		padding-bottom:  50px;
	}
	/* BRANDICON */
	#footer  .brandicon{	
		display:  none;
	}

	#footer .contact {
		padding-right:		0;
		/*padding-bottom:	20vh;*/
	}

	/* SOCIAL & IMPRINT */
	#footer .social {
		padding-bottom: 		20px;
	}
		.social i {
			transform-origin: 	top left;
			transform: 				scale(0.9);
			margin-right:			7px;
		}
	#footer .imprint {
		display: 			initial;
		align-items:		normal;
	   justify-content: 	normal;
		height: 				auto;

		text-align: left;
	}
		#footer .imprint a{
			padding-left:	0;
			padding-right: 20px;
		}









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


/*-------------------------------*/
/*      GRID: 4-SPALTIG          */
/*      GRID: 6-SPALTIG          */
/*-------------------------------*/

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

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

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


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

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

		/* COLUMN POSTION */


		/* COLUMN SPAN */




/* BLOC GAPS */
.gap-0-25-top 		{ padding-top:		  6px; }
.gap-0-25-bottom	{ padding-bottom:	  6px; }
.gap-0-5-top 		{ padding-top:		 12px; }
.gap-0-5-bottom	{ padding-bottom:	 12px; }
.gap-0-75-bottom	{ padding-bottom:	 20px; }
.gap-1-top 			{ padding-top:		 25px; }
.gap-1-bottom		{ padding-bottom:	 25px; }
.gap-2-top 			{ padding-top:		 50px; }
.gap-2-bottom		{ padding-bottom:	 50px; }
.gap-3-top 			{ padding-top:		 75px; }
.gap-3-bottom		{ padding-bottom:	 75px; }
.gap-4-top 			{ padding-top:		100px; }
.gap-4-bottom		{ padding-bottom:	100px; }





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

/* BUTTON DEFAULT */
.button {
	transition:		none;
	padding: 		6px 10px 6px 15px;
	border: 			0.2em solid var(--color2);
}
	.button span {
		padding-right: 25px;
	}
	.button span:after {
		transition:		none;
		transform:		scale(1.6);
		opacity:			1;
		padding-right: 20px;
		top: 				0;
		right:			-20px;
	}
	.button:hover span {
		padding-right: 25px;
	}

/* BUTTON INVERS */
.button.invers {
	border: 	solid 0.2em #FFF;
}
	/* HOVEREFFECT */
	.hover-teaser span,
	.button:hover span,
	.button-boarder:hover span,
	.button-light:hover span {
		padding-right: -20px;
	}

	.hover-teaser span:after,
	.button:hover span:after,
	.button-boarder:hover span:after,
	.button-light:hover span:after {
		right:	-20px;
	}