/** Stylesheet Menu **/

/* 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);
}

/* Nur für AT */
.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;
}

/* Allgemeine Einstellungen und Einstellungen für schmale Viewports */
#sitenav *,
#sitenav a  {
  color: blue;
}

/* Positionierung */
#sitenav.withjs {
  position: absolute;
}
#sitenav.withjs ul {
  position: absolute;
}

#sitenav {
  top: 0.1em;
  right: 0.1em;
}

#sitenav > details {
  border: 1px solid black;
  border-radius: .5em;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  height: 2.9em;
  padding: .5em;
  background-color: white;
}

#sitenav ul {
  list-style-type: none;
  margin: 0;
  padding: .2em;
  border-radius: .5em;
  background-color: white;
  z-index: 10;
}

#sitenav ul ul {
  margin-left: -1.7em;
  margin-top: 0em;
  padding-left: .1em;
  background-color: white;
}

#sitenav li a {
  display: inline-block;
  margin-top: .1em;
  margin-bottom: .1em;
  text-decoration: none;
  z-index: 10;
}

#sitenav li a,
#sitenav li summary {
  padding: .5em;
  margin: .3em;
  line-height: 1.4em;
  outline: none;
  z-index: 10;
}

#sitenav li {
  padding: 0em;
  white-space: nowrap;
  vertical-align: middle;
  z-index: 10;
}

#sitenav > details > ul {
  margin-left: -11.3em;
  margin-top: 2em;
  z-index: 10;
}

/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
#sitenav summary::-webkit-details-marker {
  display: none;
}

#sitenav summary { 
  list-style-type: none;
  cursor: pointer;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  max-height: 1.4em;
}

#sitenav details summary::after {
  font-family: arial_unicode_ms;
  vertical-align: top;
}

#sitenav ul details:not([open]) > summary::after { 
  content: ' ►';
}

#sitenav ul details[open] > summary::after { 
/*  content: ' ◄';*/
  content: ' ▼';
}

#sitenav > details:not([open]) > summary::before {
  content: "☰";
  font-size: 2em;
}

#sitenav > details[open] > summary::before {
  content: "×";
  font-size: 2em;
}

/* Link zur aktuellen Seite */
#sitenav li[aria-current] a[href='#']::before {
  content: "► ";
  font-family: arial_unicode_ms;
  -webkit-text-fill-color: green;
}

#sitenav > details > ul > li[aria-current] {
  border-left: 2px solid black;
}

#sitenav.withjs > details > ul > li[aria-current] > details > summarry,
#sitenav.withjs > details > ul > li > details > ul > li[aria-current] > details > summary {
  border-left: 2px solid black;
}

#sitenav li a:hover,
#sitenav li summary:hover,
#sitenav li a:focus,
#sitenav li summary:focus {
  outline: 1px solid #5050ff
}

/***** Einstellungen für breite Viewports *****/
#sitenav.wide {
  top: 0.3em;
  left: 14.8em;
  right: 0.3em;
}

#sitenav.wide > details {
  border: 1px lightgrey;
  border-radius: .5em;
  padding: 0;
}

#sitenav.wide ul {
  margin:0;
  padding-top:.2em;
  padding-left:0;
  padding-right:0;
}

#sitenav.wide ul ul {
  margin-left: -0.1em;
  margin-top: 0.3em;
  border-radius: 0 0 .5em .5em;
}

#sitenav.wide > details > ul,
#sitenav.wide > details > ul > li {
  display: inline-block
}

#sitenav.wide > details > ul {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-top: 0;
  border-radius: 0;
}

#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: ' ◄';
}

#sitenav.wide > details > ul > li[aria-current] > details > summary {
  border-left: none;
}

#sitenav.wide > details > ul > li[aria-current] {
  border-left: none;
  border-bottom: 2px solid black;
}

#sitenav.wide .langselect {
  float: right;
}