.dgs-offcanvas-nav,
.dgs-offcanvas-nav.dgs-main-nav{
	--dgs-nav-padding-x: 1rem;
	--dgs-nav-padding-y: 0;
	--dgs-nav-bg-color: var(--dgs-main-nav-bg-color);

	--dgs-nav-link-padding-x: 0.5rem;
	--dgs-nav-link-expanded-padding-x: 2rem;
	--dgs-nav-link-padding-y: 0.5rem;

	--dgs-nav-link-color: var(--dgs-main-nav-link-color);
	--dgs-nav-link-font-size: var(--dgs-main-nav-link-font-size);
	--dgs-nav-link-font-weight: var(--dgs-main-nav-link-font-weight);

	--dgs-nav-link-hover-color: var(--dgs-main-nav-link-hover-color);
	--dgs-nav-link-hover-bg-color: var(--dgs-main-nav-link-hover-bg-color);;
	--dgs-nav-link-disabled-color: var(--dgs-main-nav-link-disabled-color);

	--dgs-nav-link-active-color: var(--dgs-main-nav-link-active-color);
	--dgs-nav-link-active-font-size: var(--dgs-main-nav-link-active-font-size);
	--dgs-nav-link-active-font-weight: var(--dgs-main-nav-link-active-font-weight);

	--dgs-nav-toggler-border-color: var(--dgs-main-nav-toggler-border-color);
	--dgs-nav-toggler-border-width: 1px;
	--dgs-nav-toggler-border-radius: 0.375rem;
	--dgs-nav-toggler-focus-width: 0;
	--dgs-nav-toggler-padding: 0.75rem;
	--dgs-nav-toggler-font-size: 1rem;

	--dgs-nav-offcanvas-color: var(--dgs-main-nav-deco-color);
	--dgs-nav-offcanvas-bg-color: var(--dgs-main-nav-bg-color);
	--dgs-nav-offcanvas-header-color: var(--dgs-main-nav-bg-color);
	--dgs-nav-offcanvas-header-bg-color: var(--dgs-main-nav-deco-color);
	--dgs-nav-offcanvas-border-width: 10px;
	--dgs-nav-offcanvas-border-color: var(--dgs-main-nav-deco-color);
	--dgs-nav-offcanvas-link-color: var(--dgs-main-nav-offcanvas-link-color);
	--dgs-nav-offcanvas-link-font-size: var(--dgs-main-nav-offcanvas-link-font-size);
	--dgs-nav-offcanvas-link-font-weight: var(--dgs-main-nav-offcanvas-link-font-weight);
	--dgs-nav-offcanvas-link-active-font-size: var(--dgs-main-nav-offcanvas-link-active-font-size);
	--dgs-nav-offcanvas-link-active-font-weight: var(--dgs-main-nav-offcanvas-link-active-font-weight);

	--dgs-nav-dropdown-color: var(--dgs-main-nav-link-color);
	--dgs-nav-dropdown-bg-color: var(--dgs-main-nav-bg-color);
	--dgs-nav-dropdown-divider-color: var(--dgs-main-nav-deco-color);
	--dgs-nav-dropdown-border-color: var(--dgs-main-nav-deco-color);
	--dgs-nav-dropdown-border-style: none none none solid;
}

.dgs-offcanvas-nav.dgs-meta-nav{
	--dgs-nav-padding-x: 0rem;
	--dgs-nav-padding-y: 0.5rem; /*0.3rem*/
	--dgs-nav-bg-color: var(--dgs-meta-nav-bg-color);

	--dgs-nav-link-padding-x: 0.5rem;
	--dgs-nav-link-expanded-padding-x: 0.5rem;
	--dgs-nav-link-padding-y: 0.5rem; 

	--dgs-nav-link-color: var(--dgs-meta-nav-link-color);
	--dgs-nav-link-font-size: var(--dgs-meta-nav-link-font-size);
	--dgs-nav-link-font-weight: var(--dgs-meta-nav-link-font-weight);

	--dgs-nav-link-hover-color: var(--dgs-meta-nav-link-hover-color);
	--dgs-nav-link-hover-bg-color: var(--dgs-meta-nav-link-hover-bg-color);
	--dgs-nav-link-disabled-color: var(--dgs-meta-nav-link-disabled-color);

	--dgs-nav-link-active-color: var(--dgs-meta-nav-link-active-color);
	--dgs-nav-link-active-font-size: var(--dgs-meta-nav-link-active-font-size);
	--dgs-nav-link-active-font-weight: var(--dgs-meta-nav-link-active-font-weight);

	--dgs-nav-toggler-border-color: var(--dgs-meta-nav-toggler-border-color);
	--dgs-nav-toggler-border-width: 1px;
	--dgs-nav-toggler-border-radius: 0.375rem;
	--dgs-nav-toggler-focus-width: 0;
	--dgs-nav-toggler-padding: 0.75rem;
	--dgs-nav-toggler-font-size: 1rem;

	--dgs-nav-offcanvas-color: var(--dgs-meta-nav-deco-color);
	--dgs-nav-offcanvas-bg-color: var(--dgs-meta-nav-bg-color);
	--dgs-nav-offcanvas-header-color: var(--dgs-meta-nav-bg-color);
	--dgs-nav-offcanvas-header-bg-color: var(--dgs-meta-nav-deco-color);
	--dgs-nav-offcanvas-border-width: 10px;
	--dgs-nav-offcanvas-border-color: var(--dgs-meta-nav-deco-color);
	--dgs-nav-offcanvas-link-color: var(--dgs-meta-nav-offcanvas-link-color);
	--dgs-nav-offcanvas-link-font-size: var(--dgs-meta-nav-offcanvas-link-font-size);
	--dgs-nav-offcanvas-link-font-weight: var(--dgs-meta-nav-offcanvas-link-font-weight);
	--dgs-nav-offcanvas-link-active-font-size: var(--dgs-meta-nav-offcanvas-link-active-font-size);
	--dgs-nav-offcanvas-link-active-font-weight: var(--dgs-meta-nav-offcanvas-link-active-font-weight);

	--dgs-nav-dropdown-color: var(--dgs-meta-nav-link-color);
	--dgs-nav-dropdown-bg-color: var(--dgs-meta-nav-bg-color);
	--dgs-nav-dropdown-divider-color: var(--dgs-meta-nav-deco-color);
	--dgs-nav-dropdown-border-color: var(--dgs-meta-nav-deco-color);
	--dgs-nav-dropdown-border-style: none;
}

@media (min-width: 1200px) {
	.dgs-offcanvas-nav.dgs-meta-nav{
		--dgs-nav-toggler-font-size: 1.5rem;
	}
}

.dgs-offcanvas-nav.dgs-footer-nav{
	--dgs-nav-padding-x: 0;
	--dgs-nav-padding-y: 0.5rem;
	--dgs-nav-bg-color: var(--dgs-footer-nav-bg-color);

	--dgs-nav-link-padding-x: 0.5rem;
	--dgs-nav-link-expanded-padding-x: 1rem;
	--dgs-nav-link-padding-y: 0.5rem;

	--dgs-nav-link-color: var(--dgs-footer-nav-link-color);
	--dgs-nav-link-font-size: var(--dgs-footer-nav-link-font-size);
	--dgs-nav-link-font-weight: var(--dgs-footer-nav-link-font-weight);

	--dgs-nav-link-hover-color: var(--dgs-footer-nav-link-hover-color);
	--dgs-nav-link-hover-bg-color: var(--dgs-footer-nav-link-hover-bg-color);
	--dgs-nav-link-disabled-color: var(--dgs-footer-nav-link-disabled-color);

	--dgs-nav-link-active-color: var(--dgs-footer-nav-link-active-color);
	--dgs-nav-link-active-font-size: var(--dgs-footer-nav-link-active-font-size);
	--dgs-nav-link-active-font-weight: var(--dgs-footer-nav-link-active-font-weight);
}

.dgs-offcanvas-nav{
	--bs-offcanvas-border-width: var(--dgs-nav-offcanvas-border-width);
	--bs-offcanvas-border-color: var(--dgs-nav-offcanvas-border-color);
	--bs-offcanvas-bg: var(--dgs-nav-offcanvas-bg-color);
	--bs-offcanvas-color: var(--dgs-nav-offcanvas-color);
}

.dgs-offcanvas-nav .offcanvas-header{
	background-color: var(--dgs-nav-offcanvas-header-bg-color);
	color: var(--dgs-nav-offcanvas-header-color);
}

/* .navbar ist die äußerste Klasse */
.dgs-offcanvas-nav .navbar,
.dgs-offcanvas-nav.navbar{
	--bs-navbar-padding-x: var(--dgs-nav-padding-x);
	--bs-navbar-padding-y: var(--dgs-nav-padding-y);

	--bs-navbar-nav-link-padding-x: var(--dgs-nav-link-expanded-padding-x);

	--bs-navbar-color: var(--dgs-nav-link-color);
	--bs-navbar-hover-color: var(--dgs-nav-link-hover-color);
	--bs-navbar-disabled-color: var(--dgs-nav-link-disabled-color);
	--bs-navbar-active-color: var(--dgs-nav-link-active-color);

	--bs-navbar-toggler-border-color: var(--dgs-nav-toggler-border-color);
	--bs-border-width: var(--dgs-nav-toggler-border-width);
	--bs-navbar-toggler-border-radius: var(--dgs-nav-toggler-border-radius);
	--bs-navbar-toggler-focus-width: var(--dgs-nav-toggler-focus-width);
	--bs-navbar-toggler-padding-y: var(--dgs-nav-toggler-padding);
	--bs-navbar-toggler-padding-x: var(--dgs-nav-toggler-padding);  
	--bs-navbar-toggler-font-size: var(--dgs-nav-toggler-font-size);  
}

.dgs-offcanvas-nav .navbar{
    background-color: var(--dgs-nav-bg-color);
}

.dgs-offcanvas-nav.show .navbar,
.dgs-offcanvas-nav.show.navbar{
	--bs-navbar-padding-x: 0;
	--bs-navbar-padding-y: 0;
}

/* danach kommt die innere Klasse .navbar-nav */
.dgs-offcanvas-nav .navbar-nav{
	--bs-nav-link-padding-x: var(--dgs-nav-link-padding-x);
	--bs-nav-link-padding-y: var(--dgs-nav-link-padding-y);

	--bs-nav-link-color: var(--dgs-nav-link-color);
	--bs-nav-link-hover-color: var(--dgs-nav-link-hover-color);
	--bs-nav-link-disabled-color: var(--dgs-nav-link-disabled-color);

	--bs-nav-link-font-size: var(--dgs-nav-link-font-size);
    --bs-nav-link-font-weight: var(--dgs-nav-link-font-weight);
}

.dgs-offcanvas-nav.show .navbar-nav{
	--bs-nav-link-padding-x: var(--dgs-nav-link-padding-x);
	--bs-nav-link-padding-y: var(--dgs-nav-link-padding-y);

	--bs-nav-link-color: var(--dgs-nav-offcanvas-link-color);
	--bs-nav-link-hover-color: var(--dgs-nav-link-hover-color);
	--bs-nav-link-disabled-color: var(--dgs-nav-link-disabled-color);

	--bs-nav-link-font-size: var(--dgs-nav-offcanvas-link-font-size);
    --bs-nav-link-font-weight: var(--dgs-nav-offcanvas-link-font-weight);
}

.dgs-offcanvas-nav .navbar-nav .nav-link.active,
.dgs-offcanvas-nav .navbar-nav .dropdown-item.active{
	font-size: var(--dgs-nav-link-active-font-size);
	font-weight: var(--dgs-nav-link-active-font-weight);
	color: var(--dgs-nav-link-active-color);
}

.dgs-offcanvas-nav.show .navbar-nav .nav-link.active,
.dgs-offcanvas-nav.show .navbar-nav .dropdown-item.active{
	font-size: var(--dgs-nav-offcanvas-link-active-font-size);
	font-weight: var(--dgs-nav-offcanvas-link-active-font-weight);
	color: var(--dgs-nav-link-active-color);
}

.dgs-offcanvas-nav .nav-link:hover{
	background-color: var(--dgs-nav-link-hover-bg-color);
}

/* der focus soll nicht hervorgehoben werden */
.dgs-offcanvas-nav .nav-link:focus,
.dgs-offcanvas-nav .dropdown-item:focus{
	color: var(--dgs-nav-link-color);
}

.dgs-offcanvas-nav.show .nav-link:focus,
.dgs-offcanvas-nav.show .dropdown-item:focus{
	color: var(--dgs-nav-offcanvas-link-color);
}

/* buttons sind hier der dropdown-toggle und die social-media*/
.dgs-offcanvas-nav .btn{

	--bs-btn-color: var(--dgs-nav-link-color);
	--bs-btn-bg: var(--dgs-nav-bg-color);
	--bs-btn-border-color: var(--dgs-nav-bg-color);

	--bs-btn-active-color: var(--dgs-nav-link-active-color);
	--bs-btn-active-bg: var(--dgs-nav-bg-color);
	--bs-btn-active-border-color: var(--dgs-nav-bg-color);
	--bs-btn-disabled-color: var(--dgs-nav-link-disabled-color);
	--bs-btn-disabled-bg: var(--dgs-nav-bg-color);
	--bs-btn-disabled-border-color: var(--dgs-nav-bg-color);

	--bs-btn-hover-color: var(--dgs-nav-link-hover-color);
	--bs-btn-hover-bg: var(--dgs-nav-link-hover-bg-color);
	--bs-btn-hover-border-color: var(--dgs-nav-link-hover-bg-color);

	--bs-btn-border-radius: 0;
}

.dgs-offcanvas-nav.show .btn{

	--bs-btn-color: var(--dgs-nav-offcanvas-link-color);
	--bs-btn-bg: var(--dgs-nav-offcanvas-bg-color);
	--bs-btn-border-color: var(--dgs-nav-offcanvas-bg-color);

	--bs-btn-active-color: var(--dgs-nav-link-active-color);
	--bs-btn-active-bg: var(--dgs-nav-offcanvas-bg-color);
	--bs-btn-active-border-color: var(--dgs-nav-offcanvas-bg-color);
	--bs-btn-disabled-color: var(--dgs-nav-link-disabled-color);
	--bs-btn-disabled-bg: var(--dgs-nav-offcanvas-bg-color);
	--bs-btn-disabled-border-color: var(--dgs-nav-offcanvas-bg-color);

	--bs-btn-hover-color: var(--dgs-nav-link-hover-color);
	--bs-btn-hover-bg: var(--dgs-nav-link-hover-bg-color);
	--bs-btn-hover-border-color: var(--dgs-nav-link-hover-bg-color);

	--bs-btn-border-radius: 0;
}

.dgs-offcanvas-nav .dropdown-toggle{
	width: 100%;
	text-align: start;
}
.dgs-offcanvas-nav .dropdown-toggle.active:hover,
.dgs-offcanvas-nav.show .dropdown-toggle.active:hover{
	color: var(--dgs-nav-link-hover-color);
	background-color: var(--dgs-nav-link-hover-bg-color);
	border-color: var(--dgs-nav-link-hover-bg-color);
} 

.dgs-offcanvas-nav .dropdown-toggle.active.show:hover{
	color: var(--dgs-nav-link-active-color);
	background-color: var(--dgs-nav-bg-color);
	border-color: var(--dgs-nav-bg-color);
}
.dgs-offcanvas-nav.show .dropdown-toggle.active.show:hover{
	color: var(--dgs-nav-link-active-color);
	background-color: var(--dgs-nav-offcanvas-bg-color);
	border-color: var(--dgs-nav-offcanvas-bg-color);
}

.dgs-offcanvas-nav .dropdown-toggle.show:hover{
	color: var(--dgs-nav-link-color);
	background-color: var(--dgs-nav-bg-color);
	border-color: var(--dgs-nav-bg-color);
} 
.dgs-offcanvas-nav.show .dropdown-toggle.show:hover{
	color: var(--dgs-nav-offcanvas-link-color);
	background-color: var(--dgs-nav-offcanvas-bg-color);
	border-color: var(--dgs-nav-offcanvas-bg-color);
} 


.dgs-social-media{
	padding: 5px;
}
.dgs-offcanvas-nav .dgs-social-media:hover{
	background-color: var(--dgs-nav-link-hover-color);
}

.dgs-offcanvas-nav .dropdown-menu{
	--bs-dropdown-padding-x: 0;
	--bs-dropdown-padding-y: 0.5rem;

    --bs-dropdown-color: var(--dgs-nav-dropdown-color);

    --bs-dropdown-bg: var(--dgs-nav-dropdown-bg-color);
    --bs-dropdown-divider-bg: var(--dgs-nav-dropdown-divider-color);
	--bs-dropdown-divider-margin-y: 0.2rem;

	--bs-dropdown-link-color: var(--dgs-nav-link-color);
	--bs-dropdown-link-hover-color: var(--dgs-nav-link-hover-color);
	--bs-dropdown-link-hover-bg: var(--dgs-nav-link-hover-bg-color);
	--bs-dropdown-link-disabled-color: var(--dgs-nav-link-disabled-color);
	--bs-dropdown-link-active-color: var(--dgs-nav-link-active-color);
	--bs-dropdown-link-active-bg: transparent;

	border-style: var(--dgs-nav-dropdown-border-style);
	--bs-dropdown-border-color: var(--dgs-nav-dropdown-border-color);
    --bs-dropdown-border-radius: 0.;
    --bs-dropdown-border-width: 1px;

	--bs-dropdown-item-padding-x: var(--dgs-nav-link-expanded-padding-x);
	--bs-dropdown-item-padding-y: var(--dgs-nav-link-padding-y); 
}

.dgs-offcanvas-nav.show .dropdown-menu{
	--bs-dropdown-padding-x: 0;
	--bs-dropdown-padding-y: 0;
	--bs-dropdown-item-padding-x: var(--dgs-nav-link-padding-x);
	--bs-dropdown-item-padding-y: var(--dgs-nav-link-padding-y); 

	--bs-dropdown-link-color: var(--dgs-nav-offcanvas-link-color);
}

.dgs-offcanvas-nav .dgs-dropdown-sub-menu {
	margin-left: var(--dgs-nav-link-expanded-padding-x);
	margin-right: var(--dgs-nav-link-expanded-padding-x);
	border: none;
	/* border-left: 1px solid white;
	border-top: 1px solid white; */
}

.dgs-offcanvas-nav.show .dgs-dropdown-sub-menu {
	margin-left: var(--dgs-nav-link-padding-x);
	margin-right: 0;
	border: none;
	/* margin-left: var(--bs-dropdown-divider-margin-y);
	border-left: 1px solid white;
	border-top: 1px solid white; */
}

.dgs-offcanvas-nav .dgs-dropdown-sub-menu .dropdown-item{
	/* --bs-dropdown-item-padding-x: calc(var(--dgs-nav-link-expanded-padding-x) + 0.5rem); */
	/* --bs-dropdown-item-padding-x: var(--dgs-nav-link-expanded-padding-x); */
	--bs-dropdown-item-padding-x: var(--dgs-nav-link-padding-x);
}

.dgs-offcanvas-nav.show .dgs-dropdown-sub-menu .dropdown-item{
	/* --bs-dropdown-item-padding-x: calc(var(--dgs-nav-link-padding-x) + 0.5rem); */
	--bs-dropdown-item-padding-x: var(--dgs-nav-link-padding-x);
}


.dgs-main-nav .navbar-toggler-icon{
	width: 40px;
	height: 40px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(246, 135, 22)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.dgs-meta-nav .navbar-toggler-icon{
	width: 40px;
	height: 40px;
	background-image: url(../Images/pfeilsymbol.svg);
}

.dgs-meta-nav .navbar-nav .nav-link,
.dgs-meta-nav .navbar-nav .dropdown-item{
	background-image: url(../Images/pfeilsymbol-light.svg);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 1rem;
	background-size: 10px;
}

.dgs-offcanvas-nav .dgs-energieberater-akademie,
.dgs-offcanvas-nav .dgs-solar-akademie {
	--dgs-border-tmp: 2px;

	display: inline-block;
	font-weight: bold;

	color: var(--dgs-color-secondary);
	border: var(--dgs-border-tmp) solid var(--dgs-color-primary);

	padding: calc(var(--dgs-nav-link-padding-y) - var(--dgs-border-tmp)) calc(var(--dgs-nav-link-padding-x) - var(--dgs-border-tmp)) ;
}
.dgs-offcanvas-nav .dgs-energieberater-akademie:hover,
.dgs-offcanvas-nav .dgs-solar-akademie:hover {
    position: relative;
	color: var(--dgs-color-secondary);
	background-color: transparent;
	border: var(--dgs-border-tmp) solid var(--dgs-color-secondary);
}
.dgs-offcanvas-nav .dgs-energieberater-akademie:hover:after,
.dgs-offcanvas-nav .dgs-solar-akademie:hover:after {
    display: block;
    position: absolute;
    left: 0px; 
    top: 40px;
}
.dgs-offcanvas-nav .dgs-energieberater-akademie:hover:after{
    content: url(../Images/energieberater-akademie.png);
}

.dgs-offcanvas-nav .dgs-solar-akademie:hover:after {
    content: url(../Images/solar-akademie.png); 
}

.dgs-offcanvas-nav:not(.show) .dgs-energieberater-akademie:hover:after{
	left: -8px; 
}
.dgs-offcanvas-nav:not(.show) .dgs-solar-akademie:hover:after{
	left: -28px; 
}