
.offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl, .offcanvas {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 100vw;
    --bs-offcanvas-height: 100vh;
    --bs-offcanvas-padding-x: 8.333333%;
    --bs-offcanvas-padding-y: 8.333333%;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-border-width: var(--bs-border-width);
    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
    --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
    --bs-offcanvas-transition: transform 0.3s ease-in-out;
    --bs-offcanvas-title-line-height: 1;
}
:root {
  	--navi-color-white: #ffffff;
  	--navi-color-black: rgba(0, 0, 14, 1);
	--navi-background-drop-ul: #f1f3f2;
	--navi-versatz-drop-ul: 20px;
	--navi-versatz-nai-li: 20px;
}



#offcanvasNavi{
	overflow:auto;
	background:var(--color2) !important;
	padding-left:4%;
	padding-right:4%;
	overflow-x: auto;
}


#navigation{
	
}

#navi{}

#menu-main-menu{
	margin:0;
}


.dropdown-item {
    white-space: normal;
	padding-right:20px;
	color: var(--color) !important;
}

.navi-ul{
 padding-left:0;	
}

.navi-li{
	list-style: none;
	padding-bottom:10px;
}


.navi-li-a{
	position: relative;
	padding-right: 25px;
	color: var(--color) !important;
}

.navi-li-a:hover{
	color: var(--color1) !important;
}


.navi-li-a:before {
	/*
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		bottom: -3px;
		left: 0;
		background-color: #fff;
		visibility: hidden;
		background: linear-gradient(to right,#fff 50%,transparent 50%) !important;
		background-size: 250% 100% !important;
		background-position: right bottom !important;
	
		transition: all .5s ease;
	*/
	}
.navi-li:hover .navi-li-a:before, .navi-li-a.active:before {
	/*
		visibility: visible;
		color: #fff;
		background-position: left bottom !important;
		transition: all .5s ease;
	*/
	}

#menu-main-menu .active{
	color: var(--color1) !important;
}

.has-child>a:after{
	content: "";
	position: absolute;
    width: 15px;
    height: 15px;
	top:5px;
	right:5px;
    background: url(../img/Icons_Pfeil_gn.svg) !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
	transform: rotate(180deg);
}

.depth_0 .has-child>a:after{

	transform: rotate(90deg);
}

.navi-drop-ul li{padding-top:5px !important}



.navi-drop-li-a{
	position: relative;
	color: var(--navi-color-white);

}
.dropdown-item:hover{
	color: var(--color1) !important;
}

.notfall-button{
	/*padding-left: 2rem;*/
	height:40px;

}

.notfall-button a{
	background-color: #D7001E;
}

.notfall-button a:hover{
	border-color: #D7001E !important;
	    box-shadow: inset 0px 0px 0px 2px #D7001E;
	color: #D7001E !important;
}

/* Hamburger Start */
	#navi-close-container{
		background:var(--color2);
		color: var(--navi-color-white);
		padding:30px 0px 30px 0px;
	}	
.navbar-toggler{
		margin-top: 10px;
	}



	.navbar-toggler-icon{
		height: 3px;
		background: var(--color);
		margin-bottom: 5px;
		display: block;
		width: 25px;
	}
	.col-hamburger{ 
		justify-content: flex-end;
		margin-top: 0px;
	}
	.navbar-toggler {
		position: relative;
		width: 30px;
		height: 30px;

	}
	.navbar-toggler .navbar-toggler-icon1{
		display: block;
		position: absolute;
		left:0px;
		top:0px;
		transform: rotate(0deg);
		transition: all .5s ease;
	}
	.navbar-toggler .navbar-toggler-icon2{
		display: block;
		position: absolute;
		left:0px;
		top:8px;
		transform: rotate(0deg);
		transition: all .5s ease;
	}
	.navbar-toggler .navbar-toggler-icon3{
		display: block;
		position: absolute;
		left:0px;
		top:16px;
		transform: rotate(0deg);
		transition: all .5s ease;
	}
	.navbar-toggler-close{
		background: #000000;
		border: 0;
	}
	.navbar-toggler-close1{
		position: absolute;
		height: 3px;
		background: var(--color);
		display: block;
		width: 25px;
		transform: rotate(45deg);
		margin-top: -6px;
	}
	.navbar-toggler-close2{
		position: absolute;
		height: 3px;
		background: var(--color);
		display: block;
		width: 25px;
		transform: rotate(-45deg);
		margin-top: -6px;
	}
/* Hamburger End */

.collapsing {
  transition: height 0.35s ease;
}

@media (min-width: 1024px) and (max-width: 1399px) {
	
	
	#menu-main-menu  > li{
		width:25vw;
	}
	
	   
	/*
	.navi-ul{
		display: flex;
		flex-direction: row;
	}
	.navi-li{
		width:50%;
	}
	.navi-drop-ul {
		display: block !important;
	}
	

	.navi-li-a:before {
		visibility: visible;
		color: #fff;
		background-position: left bottom !important;
		transition: all .5s ease;
	}
	*/
	
}


@media (min-width: 1400px){
	#offcanvasNavi{
		background: transparent !important;
		padding-left:0;
		padding-right:0;
		overflow: visible;
	}
	#navigation{
		background:transparent;
	}

	#navi{
		padding-top:2px;
	}

	#menu-main-menu2{}
	
	.navi-ul{
		display: flex;
		flex-direction: row;
	}
	.navi-li{
		width:auto;
		padding: var(--navi-versatz-nai-li) 75px var(--navi-versatz-nai-li) 0;
	}




	.navi-drop-ul{
		position: absolute;
		background: var(--color2);
		margin-top:var(--navi-versatz-drop-ul);
		padding: 0px 0px 0px 30px; 
	}
	
	.navi-drop-ul .navi-li{
		padding-bottom: 0px;
		padding-right: 10px;
	}
	.navi-drop-ul .navi-li:first-child {
	  padding-top:20px !important;
	}
	.navi-drop-ul .navi-li:last-child {
	  padding-bottom:30px;
	}
	


	.navi-drop-li-a{
		color: var(--navi-color-black);
	}

	.notfall-button{

		padding-left: 0;

	}
	
	#lang{margin-left:-100px;}
	
	.depth_1{
		left:100%;
		top:-20px;
	}
	
}

