/* ------------------------------------------------------------------------------------------------------------- */
/* Alle Navigationen ------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------- */ 

/* ... Allgemeines ...
-----------------------------------------------*/
:is(nav, .mod_sitemap) ul {
	display: block;
}
:is(nav, .mod_sitemap) :is(ul, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}
:where(nav, .mod_sitemap) :is(li a, strong) {
	display: block;
	font-weight: normal;
	text-align: left;
	text-decoration: none;
}
/* ... Allgemeines ... END
-----------------------------------------------*/



/* ... Haupt- und mobile Navigation links ...
-----------------------------------------------*/
.mainnav,
.mobilenav {
	overflow: visible;
}
.mainnav li,
.mobilenav li {
	--icon-size: .4em;
	--icon-stroke-width: 2px;
	--items-padding-left: .5em;
	--svg-offset-right: .5em;
  
	--svg-size: calc( 2 * var(--icon-stroke-width) + var(--icon-size) );
	--icon-radius: calc( var(--icon-size) / 2 );
	--icon-offset: calc( (var(--svg-size) - var(--icon-size)) / 2 );
	--icon-center: calc( var(--svg-size) / 2 );
}
.mainnav ul,
.mobilenav ul {
	margin-right: -10px;
	background-color: var(--navi-level-1);
	border: 1px solid var(--font-1);
	border-radius: var(--brd-radius);
}
.mainnav ul ul,
.mobilenav ul ul {
	margin-right: -23px;
	margin-left: 1em;
	background-color: var(--navi-level-2);
}
.mainnav ul ul ul,
.mobilenav ul ul ul {
	background-color: var(--navi-level-3);
}
.mainnav ul ul ul ul,
.mobilenav ul ul ul ul {
	background-color: var(--navi-level-4);
}
.mainnav ul :where(li a, strong),
.mobilenav ul :where(li a, strong) { 
	margin: .2em 0;
	padding: .05em .5em;
	border: 3px solid transparent;
	border-radius: var(--brd-radius);
	background-repeat: no-repeat;
	text-indent: calc( (var(--svg-offset-right) + var(--svg-size)) * -1);
	padding-left: calc( var(--items-padding-left) + var(--svg-offset-right) + var(--svg-size));
}
.mainnav ul :where(li a, strong) svg,
.mobilenav ul :where(li a, strong) svg { 
	stroke-width: var(--icon-stroke-width);
	margin-right: var(--svg-offset-right);
	width: var(--svg-size);
	height: var(--svg-size);
	vertical-align: baseline;
}
.mainnav ul strong,
.mobilenav ul strong {
	background-color: var(--link-strong-bg);
	color: var(--link-strong);
	border-style: solid;
	border-radius: var(--brd-radius);
	border-width: 3px;
	border-color: inherit;
}
.mainnav ul svg #svgRect,
.mobilenav ul svg #svgRect { 
	width:  var(--icon-size);
	height: var(--icon-size);
	x: var(--icon-offset);
	y: var(--icon-offset);
}
.mainnav ul svg #svgCircle,
.mobilenav ul svg #svgCircle { 
	r:  var(--icon-radius);
	cx: var(--icon-center);
	cy: var(--icon-center);
}
.mainnav li:first-child > :is(a, strong),
.mobilenav li:first-child > :is(a, strong) {
	margin-top: .25em;
}
.mainnav li:last-child:not(.has_sub) > :is(a, strong),
.mobilenav li:last-child:not(.has_sub) > :is(a, strong) { 
	margin-bottom: .25em;
}
.mainnav li a:is(:focus, :hover),
.mobilenav li a:is(:focus, :hover) {
	background-color: var(--link-focus-bg);
	color: var(--link-focus);
	border: 3px solid var(--link-focus);
}
.mainnav li a:active,
.mobilenav li a:active {
	background-color: var(--link-active-bg);
	color: var(--link-active);
	border: 3px solid var(--link-active);
}
.mainnav li.has_sub > :is(a, strong),
.mobilenav li.has_sub > :is(a, strong) {
	position: relative;
	padding-right: 1.25em;
}
.mainnav li.has_sub > :is(a, strong)::after,
.mobilenav li.has_sub > :is(a, strong)::after {
	content: '\25B9';
	display: flex;
	justify-content: center;
	position: absolute;
	top: -.125em;
	bottom: 0;
	right: 0;
	font-size: 1.5em;
}
.mainnav li.has_sub:is(.trail, .active) > :is(a, strong)::after,
.mobilenav li.has_sub:is(.trail, .active) > :is(a, strong)::after {
	content: '\25BE';
}
/* ... Haupt- und mobile Navigation links ... END
-----------------------------------------------*/



/* ... Mobile Navigation ...
-----------------------------------------------*/

/* ... 1100px und weniger ...
-----------------------------------------------*/
@media (max-width: 1100px) {
	.mod_mobile_menu {
		--stroke-width: 6px;
		--border-radius: calc(var(--stroke-width) / 2);
		--open-time: .6s;
		--close-time: .3s;
		--hamburger-time: .5s;
	}
	.mobile_menu_active .mod_mobile_menu {
		/* z-index: 100; */
	}
	.mobile_menu {
		width: auto !important;
		height: calc(100dvh) !important;
		padding-right: 10px;
		background-color: var(--bg);
		background-color: #00000080;
		transform: translate3d(-100%, 0, 0) scale3d(1, 1, 1) !important;
		transition: transform var(--close-time) ease-out 0s !important;
	}
	.mobile_menu.active {
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
		transition: transform var(--open-time) ease-in 0s !important;
	}
	.mobile_menu .inner {
		height: calc(100% - .75em);
		background-color: transparent;
		overflow-y: scroll;
		padding-right: 5em;
	}
	.mobile_menu_overlay.background {
		background-color: #000000cc;
	}
	.mobile_menu_trigger {
		position: fixed;
		width: 54px;
		height: 54px;
		padding: 5px;
		top: 6px;
		left: 10px;
		background-color: var(--bg-5-areas);
		border-width: 2px;
		border-style: solid;
		border-color: var(--font-7);
		border-radius: var(--brd-radius);
		cursor: pointer;
		z-index: 101;
		box-sizing: border-box;
		transition: left var(--close-time) ease-out 0s;
	}	
	.mobile_menu_trigger.active {
		left: calc(100% - 58px);
		transition: left var(--open-time) ease-in 0s;
	}
	.mobile_menu_button {
		height: 100%;
		position: relative;
	}
	.mobile_menu_button span {
		display: block;
		position: absolute;
		height: var(--stroke-width);
		width: 50%;
		background-color: var(--font-9);
		opacity: 1;
		transform: rotate(0deg);
		transition: var(--hamburger-time) ease-in-out var(--close-time);
	}
	.mobile_menu_active .mobile_menu_button span {
		transition-delay: var(--open-time);
	}
	.mobile_menu_button span:nth-child(even) {
		left: 50%;
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}
	.mobile_menu_button span:nth-child(odd) {
		left: 0;
		border-radius: var(--border-radius) 0 0 var(--border-radius);
	}
	.mobile_menu_button span:nth-child(1), 
	.mobile_menu_button span:nth-child(2) {
		top: 5px;
	}
	.mobile_menu_button span:nth-child(3), 
	.mobile_menu_button span:nth-child(4) {
		top: 17px;
	}
	.mobile_menu_button span:nth-child(5), 
	.mobile_menu_button span:nth-child(6) {
		top: 29px;
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(1),
	.mobile_menu_active .mobile_menu_button span:nth-child(6) {
		transform: rotate(45deg);
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(2),
	.mobile_menu_active .mobile_menu_button span:nth-child(5) {
		transform: rotate(-45deg);
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(1) {
		left: 5px;
		top: 12px;
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(2) {
		left: calc(50% - 5px);
		top: 12px;
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(3) {
		left: -50%;
		opacity: 0;
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(4) {
		left: 100%;
		opacity: 0;
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(5) {
		left: 5px;
		top: 22px;
	}
	.mobile_menu_active .mobile_menu_button span:nth-child(6) {
		left: calc(50% - 5px);
		top: 22px;
	}
	.mobile_menu_active {
		overflow-y: hidden;
	}
	.submenu_hide strong {
		cursor: pointer;
	}
	.mobilenav {
		display: flex;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	.mobilenav a,
	.mobilenav strong {
		text-decoration: none;
	}
}
/* ... Mobile Navigation ... END
-----------------------------------------------*/



/* ... Brotkrumen ...
-----------------------------------------------*/
.mod_breadcrumb {
	position: absolute;
	bottom: 15px;
	font-weight: bold;
	font-size: var(--font-size-h7);
	padding: 5px;
	background-color: var(--navi-bread-bg);
	border-radius: var(--brd-radius);
	z-index: 1;
}
.mod_breadcrumb ul {
	display: flex;
	margin: 0;
	align-items: baseline;
}
.mod_breadcrumb li {
	list-style-type: none;
	padding: 2px 4px;
}
.mod_breadcrumb li:after {
	color: var(--font-2);
	content: ">>";
	padding-left: 0.5em;
}
.mod_breadcrumb li.active {
	background-color: var(--link-strong-bg);
	border: 3px solid var(--link-strong);
	border-radius: var(--brd-radius);
	color: var(--link-strong);
	margin-left: 6px;
}
.mod_breadcrumb li.active:after {
	display: none;
}
.mod_breadcrumb a {
	display: inline;
	font-weight: bold;
	text-decoration: underline;
}
.mod_breadcrumb a:visited {
	color: var(--link-normal);
}
.mod_breadcrumb a:hover {
	color: var(--link-focus);
}
/* ... Brotkrumen ... END
-----------------------------------------------*/



/* ... Sitemap (erbt von mainnav) ...
-----------------------------------------------*/
.mod_sitemap ul {
	margin-right: 0;
}
.mod_sitemap ul ul {
	margin-right: 1.042em;
}
/* Die "has_submenu"-Pfeile werden hier ausgeblendet */
.mod_sitemap :is(a, strong)::after {
	opacity: 0;
}
/* ... Sitemap ... END
-----------------------------------------------*/



/* ... Footer ...
-----------------------------------------------*/
.mod_customnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	justify-content: center;
}
.mod_customnav :is(li a, strong) {
	padding: .1em .5em;
	border: 3px solid transparent;
	border-radius: var(--brd-radius);
	text-decoration: none;
}
.mod_customnav :is(li a:focus, li a:hover) {
	background-color: var(--link-focus-bg);
	color: var(--link-focus);
	border-color: var(--link-focus);
}
.mod_customnav li a:active {
	background-color: var(--link-active-bg);
	color: var(--link-active);
	border-color: var(--link-active);
	}
.mod_customnav li strong {
	background-color: var(--link-strong-bg);
	color: var(--link-strong);
    border-color: var(--link-strong);
}
/* ... Footer ... END
-----------------------------------------------*/