/* =============================================================================
   Typography
   ========================================================================== */
   
/* ROOT TEXT */
html 					{ font-size: 20px; }

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


/* TEXTE */
.ch_intro 			{ font-size: 1.1rem; line-height: 1.4; }		
.ch_bt_label		{ font-size: 0.7rem; }	/* Button Label */
.ch_note				{ font-size: 0.8rem; }	/* Marginalien */




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


/* NAVIGATION */
.linknav				{ font-size: 1.5rem; line-height: 1.2; text-decoration: unset; }	/* Menue */ 
.linknav.sub 		{ font-size: 1.0rem; line-height: 1.3; }									/* Navigation Sub */
.linknav.active 	{ border-bottom: 2px solid var(--color1); }



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

i{
/*	transform-origin: top left;
	transform: 			scale(0.8);*/
	width: 				42px;
	height: 				42px;
	margin-right:		8px;
	display: 			inline-block;
}


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


   

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


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


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




/*-------------------------------*/
/*             ANCOR	            */
/*-------------------------------*/

.ancor {
    margin: -90px;
}



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

#navbar{
	padding: 	30px var(--pagemargin) 0 var(--pagemargin);
}
	#navbar .bg {					
	}
		#navbar .bg.open {
		}
			@keyframes poly-open {
				0%		{ clip-path: polygon(0% 0%, calc(0%) 0%, 0% 100%, 0% 100%); opacity: 0.3; }
				50%	{ clip-path: polygon(0% 0%, calc(40% + 20%) 0%, 40% 100%, 0% 100%); opacity: 0.8; }
				100%	{ clip-path: polygon(0% 0%, calc(100% + 20%) 0%, 100% 100%, 0% 100%); opacity: 1; }
			}
		#navbar .bg.close {
		}
			@keyframes poly-close {
				0%		{ clip-path: polygon(0% 0%, calc(100% + 20%) 0%, 100% 100%, 0% 100%); opacity: 1; }
				50%	{ clip-path: polygon(0% 0%, calc(40% + 20%) 0%, 40% 100%, 0% 100%); opacity: 0.8; }
				100%	{ clip-path: polygon(0% 0%, calc(0%) 0%, 0% 100%, 0% 100%); opacity: 0; }
			}


	/* LOGO */
	#navbar .lrg-logo,
	#navbar .sml-logo {
		transform-origin: 	top left;
		transform: 				scale(0.7);
		/*background-image:		url('../images/velox_logo.svg');*/ 
	}
		#navbar .lrg-logo.open {
			background-image:		url('../images/velox_logo.svg'); 
		}
		#navbar .lrg-logo.close {
			/*background-image:		url('../images/velox_logo.svg');*/ 
		}


	/* BURGER */
	#navbar .bt_burger {
		transform-origin: top right;
		transform: scale(0.8);
	}

	/* MENU */
	#navbar .menu {
		top:	15vh;
	}
		#navbar .menu .row1{
			/*order: 2;*/
		}
		#navbar .menu .row2{
			/*order: 1;*/
		}
			#navbar .menu ul{
			}
			#navbar .menu li{
				padding: 	0 0 5px 0;
			}
			#navbar .menu .ch_rubrictitle{
				display: none;
			}


		/* KONTAKT NOTRUF */
		#navbar .menu .kontakt-emergency	{
			right: 		unset;
			top: 			unset;
			top: 			45vh;
			/*padding: 	0 !important;*/
			height: 		40vh;
			width:  		100vw;
			padding: 	5vh var(--pagemargin) 0 var(--pagemargin);

		}
			#navbar .menu .kontakt-emergency .txt{
			}
			#navbar .menu .kontakt-emergency span{
				display:  none;
			}
			#navbar .menu .kontakt-emergency .links{
			}				
				#navbar .menu .kontakt-emergency .links a {
    				display:				flex;
    				align-items:		center;
					text-decoration:	none;
					padding-bottom:  	5px;
				}
				#navbar .menu .kontakt-emergency .links i {
					margin-right:	10px;
				}
				#navbar .menu .kontakt-emergency .links.mail {
					display: none;
				}
				#navbar .menu .kontakt-emergency .links.hochwasser {
					display: none;
				}	
				



/*-------------------------------*/
/*			 BUTTON: NOTRUF   	   */
/*-------------------------------*/

.bt_sticky-emergency {
	transform-origin: bottom right;
	transform: scale(0.6);
	bottom: 		10vh;
}




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

.hero-start{	
	/*height:	60vh;*/
	height:		100vh;

	background-position: right top;
	background-size: 		190%;
}
	.hero-start .diagonal-shape-left {
		position:	relative;
		height:		55vh;
		width:		100vw;
		top: 			45vh;

		-webkit-clip-path: polygon(0% 18%, 100% 0%, 100% 100%, 0% 100%);
	}

	.hero-start .titlebox {
		margin-top: 0;
		width: 		90vw;
		top: 			62vh;
	}





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

.hero-subpage{	
	padding-top:  20vh !important; /* addtional padding */
}
	.hero-subpage .title{
		padding-right:  0;	
	}
	.hero-subpage .diagonal-shape-bottom,
	.hero-subpage .diagonal-shape-top {
		height:		95vh;
	}
		/* TOP */
		.hero-subpage .diagonal-shape-top {
			-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 73%);
		}
		/* BOTTOM */
		.hero-subpage .diagonal-shape-bottom {
			-webkit-clip-path: polygon(0 13%, 100% 0%, 100% 87%, 0% 100%);
		}


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

.hero-title {	
	padding-top:  	20vh;
}





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

.txt-img{
}
	/* TEXT */
	.txt-img .txt {
		order: 2; 
	}
	/* IMAGE */
	.txt-img .img {
		order: 				1;
		padding-bottom:	60px; 
	}
		.txt-img .img .img-holder{
			/*height:		110vh;*/

			background-position: center;
			background-size:		cover;
			background-repeat:	no-repeat;
		}



/*-------------------------------*/
/*				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: 4% 15% 4% 6%;
		}

			/* ICON */
			.accordions .acc_ctrl:before,
			.accordions .acc_ctrl:after{
				margin-right: 	20px;
				right: 			0;
				width: 			15px;
				height: 			3px;
			}

		/* PANEL */
		.accordions .acc_panel {
			padding: 6% 10% 10% 6%;
		}




/*-------------------------------*/
/*		  	GALLERY/SLIDER	     		*/
/*-------------------------------*/

.slider { 
	padding-left:	var(--pagemargin);
	padding-right:	var(--pagemargin);
}
	.slider .projektGallery{
	}
	



 	

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

#footer {
}
	#footer .logo {
		display:  none;
	}
	#footer .claim {
		text-align: 	left;
	}
	#footer .social {
		padding-bottom:	40px; 
	}
	#footer .imprint {
		display: 		unset;
		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 3 !important; }

		/* COLUMN POSTION */
		.grid-6 .box.span-2, 
		.grid-6 .box.center-span-4,
		.grid-6 .left-span-2	{ grid-column: span 6 !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:		 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: 		9px 18px 8px 18px;
	border: 			0.2em solid var(--color1);
}
	.button span {
		padding-right: 20px;
	}
	.button span:after {
		transition:		none;
		transform:		scale(1);
		opacity:			1;
		padding-right: 20px;
		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;
	}