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

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

/* HEADLINES (0.8) */																												
h1 					{ font-size: 2.4rem; } 	/* Titel */
h2 					{ font-size: 1.5rem; } 	/* Absatztitel */ 																													
h3 					{ font-size: 1.2rem; } 		





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




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




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

   

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


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


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

#navbar{
	padding-top: 	50px;
}
	/* MENU */
	#navbar .menu { }

		/* KONTAKT NOTRUF */
		#navbar .menu .kontakt-emergency	{ 
			right: 1vw; /* hack */
			width: 40vw;
		}
			#navbar .menu .kontakt-emergency span{
				display:  none;
			}
			#navbar .menu .kontakt-emergency .links{
			}		
				#navbar .menu .kontakt-emergency .links a {
				}
				#navbar .menu .kontakt-emergency .links i {
					margin-right:	15px;
				}



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

.hero-start{  }
	.hero-start .diagonal-shape-left {
		-webkit-clip-path:	polygon(0% 0%, calc(40% + 15%) 0%, 40% 100%, 0% 100%);
	}
	.hero-start .titlebox {
		width: 		37%;
	}




/*-------------------------------*/
/*        	HERO SUBPAGE         */
/*-------------------------------*/

.hero-subpage{	
	padding-top:  25vh !important; /* addtional padding */
}
	.hero-subpage .title{
	}
	.hero-subpage .diagonal-shape-bottom,
	.hero-subpage .diagonal-shape-top {
		height:		100vh;
	}
		/* TOP */
		.hero-subpage .diagonal-shape-top {
			-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 90%);
		}
		/* BOTTOM */
		.hero-subpage .diagonal-shape-bottom {
			-webkit-clip-path: polygon(0 25%, 100% 0%, 100% 75%, 0% 100%);
		}



/*-------------------------------*/
/*        	HERO TITLE         */
/*-------------------------------*/

.hero-title {	
	padding-top:  25vh !important;
}



/*-------------------------------*/
/*			  TEXT: CENTER       	*/
/*-------------------------------*/

.txt-intro {  }
	.txt-intro .colpos-2-to-3 {
		grid-column: span 4 !important;
		margin-left:	15vw;
		margin-right:  15vw;
														/*background-color:  #D000C8;*/
	}



/*-------------------------------*/
/*				TEXT: LEFT 	      	*/
/*-------------------------------*/

.txt-left {
}
	.txt-left .txt.box {
														/*border:  solid 1px #2433FF;*/
		grid-column: span 3 !important;				
	}




/*-------------------------------*/
/*					TEAM	   			*/
/*-------------------------------*/

.team-group{
	grid-template-columns:	13.33% 13.33% 13.33% 13.33% 13.33% 13.33% ;	/* change to grid-6 */
}
	.team-group .memberbloc{
		grid-column: span 2;
	}
	.team-group .txt{
	}






/*-------------------------------*/
/*				TABLE LIST     		*/
/*-------------------------------*/

.tablelist {
}
	.tablelist .col1 {
		margin-bottom:		20px;
	}
		.tablelist li {
			min-height: 		35px;

			padding-left:		50px;
			padding-top:		2px;
			margin-bottom:		15px;

			background-size:		35px 35px;
			background-position: 0 0;
															/*background-color:  #D000C8;*/
		}




/*-------------------------------*/
/*				ACCORDION	   		*/
/*-------------------------------*/

.accordions {
}
	.accordions .acc {
	}
		.accordions .acc li {
		}

		/* BOX */
		.accordions .acc_ctrl {
			padding: 2% 15% 2% 3%;
		}

			/* ICON */
			.accordions .acc_ctrl:before,
			.accordions .acc_ctrl:after{
				right: 			0;
				width: 			18px;
				height: 			3px;
			}

		/* PANEL */
		.accordions .acc_panel {
			padding: 3% 5% 5% 3%;
		}





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

#footer {
}
	#footer .logo {
		padding-bottom:  100px;
	}








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



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

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



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

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

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

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



/* 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: 		12px 20px 9px 20px;
}
	.button span {
		padding-right: 20px;
	}
	.button span:after {
		transition:		none;
		transform:		scale(1);
		opacity:			1;
		padding-right: 20px;
	}
	.button span:after {
		transform:	scale(1.1);
		top: 			-1px;
	}
	
	/* 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;
	}