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

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

/* HEADLINES */
h1 				{ font-size: 2.8rem; }									/* Seitentitel */ 
h2 				{ font-size: 1.4rem; }									/* Rubrikentitel */
h3 				{ font-size: 1.0rem; padding-bottom: 5px; }		/* Absatztitel */ 

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




/* =============================================================================
   Links
   ========================================================================== */
  
/* NAVIGATION */
.linknav				{ font-size: 1.5rem; line-height: 1.2; text-decoration: unset; }	
.linknav.sub 		{  }
.linknav.active	{  }

/* NOTES */
.linknotes			{  }		/*Marginalien*/
   
   


/* =============================================================================
   Other Elements
   ========================================================================== */



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



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

#navbar { }
	/* LOGO */
	#navbar .lrg-logo,
	#navbar .sml-logo {
		transform-origin: 	top left;
		transform: 				scale(1.0);
	}
	#navbar .bt_burger {
		top:     5px;
	}

	/* EMERGENCY BT */
	#navbar .bt_emergency {
	}
		#navbar .bt_emergency .button {
			padding: 			8px 10px 8px 20px !important;
		}
		#navbar .bt_emergency .button span {
			padding-right: 10px;	
		}
		#navbar .bt_emergency .button span:after {
			display:			none;
			padding-right:	10px;
		}

	/* MENU */
	#navbar .menu {
		left:  		0;				/* reset */
		width:		85.6vw;		/* reset */
	}
		#navbar .menu .row2{
			grid-column: span 3;
		}




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

.hero-start{	
}
	/* BRANDICON */
	.hero-start .brandicon{	
		/* 1/5 of height in pixels */
		width: 		240px;
		height: 		240px;
		top: 			calc(70vh - 120px - 12px);
	}
	/* IMAGE */
	.hero-start .imagebox{	
		height:					70vh;
		background-position: center top;

	}
		/* TITLE */
		.hero-start .imagebox .titlebox {
			display: none;
		}


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

/* INTRO */
.hero-start .txt-intro .txt {
	width: 		100%;
}




/*-------------------------------*/
/*			 TEXT: 1-COLUMN 	      */
/*-------------------------------*/

.txt-1col {
}
	.txt-1col .txt.box {
		grid-column: span 3 !important;	
	}





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

.txt-img{
}
	/* TEXT */
	.txt-img .txt {  }

	/* IMAGE */
	.txt-img .img .ratio-3-2{
		height:	66.67%; /*Hack*/
																/*border:  solid 1px #2FC3C1;*/
	}




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

.teaser-group{
}
	/* TEASER */
	.teaser-group .teaser {
	    display: inline-block !important; /* Deaktivieren des Flexbox-Layouts */
	}
		.teaser-group .teaser.box{
			grid-column: 	span 6;
			display: 		flex;
		}
			/* IMAGE */
			.teaser-group .teaser .img  {
				width:		50%;
				display:		inline-block;
				float:		left;
			}
				/* SQUARE 1:1 */
				.teaser-group .teaser .img.ratio-3-2 {
					aspect-ratio: 1 / 1; 
				}
				/*fallback*/
				@supports not (aspect-ratio: 3 / 2) {
					.teaser-group .teaser .img.ratio-3-4 {			
						width:			100%;
						padding-top:	100%;
					}
				}

			/* TEXT */
			.teaser-group .teaser .txt{
				width:		50%;
				height:  	100%;
				display:  	inline-block;
				float:  		left;
				padding:		5%;

				/* Button align bottom */
				display: flex; 
				flex-direction: column;
				justify-content: space-between;
			}

			



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

#footer {
	height: 		auto;
	min-height: auto;
}
	/* BRANDICON */
	#footer  .brandicon{	
		height: 		150px;
	}

	#footer .contact {
		padding-right:		50%;
		padding-bottom:	20vh;
	}
	#footer .social {
	}
	#footer .imprint {
		text-align: 	right;
	}
		#footer .imprint a{
			padding-left: 15px;
		}









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




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

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



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

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


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

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

	/* COLUMN POSTION */
	.grid-4 .box.center-span-2	{ grid-column: span 4 !important; margin: 0 10% 0 10%}
	.grid-4 .box.colpos-2-to-3	{ grid-column: span 4 !important; }


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

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

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

		/* COLUMN SPAN */
		.grid-6 .box.span-4 { grid-column: span 5 !important; }
		.grid-6 .box.span-5 { grid-column: span 6 !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:		 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:		120px; }
.gap-4-bottom		{ padding-bottom:	120px; }






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

/* BUTTON DEFAULT */
.button {
	transition:		none;
	padding: 		6px 10px 6px 20px;
	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: 				-2px;
		right:			-20px;
	}
	.button:hover span {
		padding-right: 20px;
	}

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