/* Anpassung an das Seitenlayout */
/* Platz für die Navigation */
body 
{ 
	margin-top: 3.5em; 
	background-color:silver;
}
.Ueberschrift
{
	position:absolute;
	background-color: silver;
	font-size:xx-large;
	font-family:"Blackadder ITC"
}

.div_border{
	border-right: black thin solid;
	border-top: black thin solid;
	border-left: black thin solid;
	border-bottom: black thin solid;
	border-bottom-color:black;
}

.Div_anmelden
{	
	position:absolute;
	border-right: black thin solid;
	border-top: black thin solid;
	border-left: black thin solid;
	border-bottom: black thin solid;
	border-bottom-color:black;
	left:45%;

	left: -webkit-calc(50% - 300px);
    left: -moz-calc(50% - 300px);
    left: calc(50% - 150px);

	height:200px; 
	width:300px;
	top:194px;
	z-index:100;
	background-color:white;

	-moz-box-shadow: 3px 3px 5px #535353;
	-webkit-box-shadow: 3px 3px 5px #535353;
	box-shadow: 3px 3px 5px #535353;

}

.Div_anmelden2
{	
	position:absolute;
	border-right: black thin solid;
	border-top: black thin solid;
	border-left: black thin solid;
	border-bottom: black thin solid;
	border-bottom-color:black;
	
	left: -webkit-calc(50% - 300px);
    left: -moz-calc(50% - 300px);
    left: calc(50% - 150px);
    
    left:40%;
	width: 289px;
	top: 164px;
	height:271px;
	visibility:hidden;
	z-index:110;
	background-color:white;

	-moz-box-shadow: 3px 3px 5px #535353;
	-webkit-box-shadow: 3px 3px 5px #535353;
	box-shadow: 3px 3px 5px #535353;
}
.info
{
	border-right: black thin solid;
	border-top: black thin solid;
	border-left: black thin solid;
	border-bottom: black thin solid;
	position: absolute;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px;  
	border-radius: 6px 6px 6px 6px;
	-moz-box-shadow: 3px 3px 5px #535353;
	-webkit-box-shadow: 3px 3px 5px #535353;       
	box-shadow: 3px 3px 5px #535353;
	background-color: blue;
	left: 300px; 
	width: 472px; 
	top: 10px;
}

/* Position der Navigation */
#sitenav { 
	top: 0px; 
	left: 2em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:medium;
	z-index:10000

}
#sitenav.wide { 
	top: 0em; 
	left: 2em; 
	right: 2em;
	max-width: 70em;
}

/* Farben */
#sitenav *,
#sitenav a { 
	background-color:gray; 
	color: white;
}

/* Skip-Link */
#skip-link { 
	position: absolute;

	left: 0; top: 0; 
	background: black; 
	color: white; 
	padding: 0.25em; 
	transform: translateY(-100%);
	transition: 0.2s transform; 
	z-index: 1001; 
} 
#skip-link:focus { 
	transform: translateY(0); 
}			

/* Für Assistive Technologien */
.visually-hidden {
	position: absolute !important; 
	clip: rect(1px, 1px, 1px, 1px) !important; 
	padding: 0 !important; 
	border: 0 !important; 
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden !important; 
	white-space: nowrap !important; 
}

/* Positionierung */
/* Bei Browsern, die Details/Summary unterstützen, und bei eingeschaltetem Javascript wird die Navigation absolut positioniert. Die Klasse withjs wird vom Sript gesetzt. */
@supports (width: max-content) { 
	/* Nicht für IE und MS-Edge, indirekter Test auf Details/Summary */
	#sitenav,
  #sitenav ul { 
		position: absolute; 
	}
}
#sitenav.withjs,
#sitenav.withjs ul { 
	position: absolute; 
}

/* Regeln für schmale und breite Displays */
#sitenav ul { 
	margin: 0;
	padding-top: .2em; 
	padding-left: 1em; 
	padding-right: 1em; 

}
#sitenav > details { 
	padding: .2em; 
}
#sitenav > details > ul { 
	margin-left: -.5em; 
	margin-top: .3em; 

}
#sitenav ul ul { 
	margin-left: calc(100% - 1.2em);
  margin-top: -3.1em; 
  padding-left: .1em; 

}
#sitenav li a,
#sitenav li summary { 
	display: inline-block; 
	padding: .4em; 
	margin: .3em; 
	line-height: .3em; 
  max-height: .3em; 
}
#sitenav li { 
	padding: 0em; 
	white-space: nowrap; 
	vertical-align: middle; 
}

/* Anpassungen an breite Displays. Die Klasse wide wird vom Script gesetzt, wenn der Platz reicht. */
#sitenav.wide > details { 
	padding: 0; 
} 
#sitenav.wide > details > ul { 
	display: flex;
	flex-wrap: wrap; 
	width: 100%; 
	box-sizing: border-box; 
}
#sitenav.wide ul { 
	margin:0; 
	padding-top: .2em; 
	padding-left: 0; 
	padding-right: 0; 
}
#sitenav.wide ul ul { 
	margin-left: -.5em; 
	margin-top: -.1em; 
	padding-left: .5em; 
	padding-right: .5em; 
}
#sitenav.wide ul ul ul { 
	margin-left: calc(100% - 1.2em); 
	margin-top: -3.1em; 
	padding-left: .1em; 
}

/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
#sitenav summary::-webkit-details-marker { 
	display: none; 
}
#sitenav summary { 
	list-style-type:  none; 
}
#sitenav *::before,
#sitenav *::after { 
	font-family: arial_unicode_ms; 
	vertical-align: top; 
  display: inline-block;
}
#sitenav details *::after {
  text-align: end;
  width: 1.5em;
}
#sitenav details *::before {
  text-align: center;
  width: 1.2em;
}
#sitenav ul details:not([open]) > summary::after { 
	content: '►'; 
}
#sitenav ul details[open] > summary::after { 
	content: '◄'; 
}
#sitenav > details:not([open]) > summary::before { 
	content: '☰';
} 
#sitenav > details[open] > summary::before { 
	content: '×';
} 
#sitenav.wide details[open] details:not([open]) summary::after { 
	content: '▼'; 
}
#sitenav.wide details[open] details[open] summary::after { 
	content: '▲'; 
}
#sitenav.wide details[open] details[open] details:not([open]) summary::after { 
	content: '►'; 
}
#sitenav.wide details[open] details[open] details[open] summary::after { 
	content: '◄'; 
}
html.no-details #sitenav ul summary::before { /* Für Details-Polyfill */
	content: ''; width: 0; 
} 

/* Link zur aktuellen Seite */
#sitenav li[aria-current] a[tabindex]::before { 
	content: '►';
  text-align: start;
}
#sitenav.withjs > details > ul > li[aria-current] > details > summary { 
	border-left: 2px solid black; 
}
#sitenav.withjs > details > ul > li[aria-current] > details > ul > li[aria-current] > details > summary { 
	border-left: 2px solid black; 
}
#sitenav.wide > details > ul > li[aria-current] > details > summary { 
	border-left: none; 
}
#sitenav.wide > details > ul > li[aria-current] { 
	border-bottom: 2px solid black; 
}

/* Sprachicon */
#sitenav .langselect img { 
	height: 2em; 
	transform: translateY(-.4em); 
}

/* Rahmen etc. */
#sitenav summary { 
	cursor: pointer; 
}
#sitenav ul { 
	list-style-type: none; 
	border-radius: .5em; 
}
#sitenav.wide ul ul { 
	border-radius: 0 0 .5em .5em;
}
#sitenav > details { 
	border: thin solid black; 
	border-radius: .2em; 
}
#sitenav.wide > details { 
	border: none; 
	border-radius: 0; 
} 
#sitenav.wide > details > ul { 
	border-radius: 0; 
}
#sitenav li a { 
	text-decoration: none; 
}
#sitenav li a,
#sitenav li summary { 
	outline: none; 
}
#sitenav li a:focus,
#sitenav li summary:focus { 
	outline: thin solid #5050ff; 
}
#sitenav li a:focus-visible, 
#sitenav li summary:focus-visible { 
	outline: thin solid #5050ff; 
}
#sitenav li a:focus:not(:focus-visible), 
#sitenav li summary:focus:not(:focus-visible) { 
	outline: none; 
}