/* PC Layout */
:root { 
	--details-width: 8.2em;
	--details-offset: 8.7em;
	--details-li-border-desk: .1em;
	--details-li-border-touch: .4em;
	--padding-ul-l: .7em;
	--padding-ul-botton: .4em;
}

summary svg {
	width:2em;
	height:1.6em;
	vertical-align:middle;
	stroke: var(--link-color);
}
a.search  {
	width: 2em;
	height: 2em;
	display: inline-block;
	margin-bottom: 1em;
	position: absolute;
	top: 0em;
	right: 0em;
	vertical-align:middle;
	stroke: var(--link-color);
}

nav {
	z-index: 100;
	display: block;
	position: relative;
	top:0;
	left:0;
	height: 2.2em;
}

nav  details  ul {
	position: absolute;
	background-color: var(--background-color);
	margin-top: 0;
	top: 0;
	width: var(--details-width);
	padding-bottom: .5em;
	/*margin-bottom: .7em;*/
}
nav * {
	user-select: none;
}
nav > details > summary {
	list-style-type: none;
}

nav ul {
	list-style: none;
	padding-left: .7em;
	border: solid .1em var(--font-color);
	padding-right: .7em;
}

nav  details  ul li {
	position: relative;
	top: 0;
	border: solid .1em transparent;
	margin-top: 1em;
}

nav > details > summary {
	width: fit-content;
}

nav > details > ul {
	top: 2.3em;
	left:0;
	width: var(--details-width);
}

nav details details ul {
	max-width: var(--details-width);
	background-color: var(--background-color);
	left: var( --details-offset);
}

nav button {
	border: 0;
	padding: 0;
	font: inherit;
	background-color:inherit;
	border-radius:0;
	text-align: left;
	margin-left: 0;
}

nav summary, nav a, nav button {
	color: var(--link-color);
	width: var(--details-width);
	margin-right:.7em;
	border-bottom: solid transparent .2em;
	cursor: pointer;
	width:100%;
margin-bottom:0;
}

nav summary {
	font-weight: 700;
}

nav a {
	display: inline-block;
	text-decoration: none;
}
/*
nav > details > summary > span {
	display: none;
}


nav > details > summary {
	x-list-style:none;
}
*/
nav > details[open] > summary  > svg.open {
	display: none;
}

nav > details:not([open]) summary > svg.open {
	display: inline;
}

nav > details[open] > summary > svg.close {
	display: inline;
}

nav > details:not([open]) summary > svg.close {
	display: none;
}


nav a, nav summary, nav button {
	height: 1.7em;
}
nav li { border: solid 0.1px transparent;} /* fix chromium error!*/

nav a:hover, nav summary:hover, nav button:hover {
	border-bottom: solid .2em var(--link-color); 
}

nav *:focus-visible {
	outline-offset: .25em;
	outline-color: var(--link-color);
	outline-style: solid;
	outline-width: .125em;
}

/* Mobile Layout */
/* @media (max-width:720px) or (hover: none)  and not((pointer: coarse)) { */
/* @media (max-width:720px) or (hover: none) ) { */
 @media (max-width:720px) { 
	nav.mobil {
		z-index: 100;
		margin-bottom: 4em;
	}
	nav.mobil > details {
		position: absolute;
		width: 100vw;
	}

	nav.mobil ul {
		border-width: 0;
		position: revert;
		margin:0;
		padding:0;
		padding-left: 1.5em;
	}
	nav.mobil a, nav.mobil button, nav.mobil summary {
		margin-top: .5em;
		margin-right:.5em;
	}

	nav.mobil {
		width: calc(100vw - 1em);
		margin-bottom:.4em;
	}
	#container {
		margin:0;
		padding-top:0;
		padding-bottom:0;
		padding-left:.5em;
		padding-right:.5em;
		border-width:0;
	}
	nav.mobil > details {
		position: absolute;
		width: calc(100vw - 1em); /* cont 1em;*/
		/*padding-bottom: -.7em;*/
	}
	nav.mobil > details > ul {
		border: solid .1em var(--font-color);
		padding-left: .7em;
		width:calc(100vw - 1.9em); /* cont 1em; ul .7em + border .2em */
		padding-bottom:.7em;
	}

	nav.mobil details details {
		padding-left: .9em;
		width:fit-content;
		width:calc(100vw - 3.7em);
		display: block;
	}

	nav.mobil details details detail {
		width:calc(100vw - 3.5em);
	}
	nav.mobil ul {
		width: 100vw;
	}
	.skiplink {
		display: none;
	}
	body {
			margin: 0;
	padding: 0;
	}
}