/******************************************
Allgemein
******************************************/
button {
  cursor:pointer;
}
header nav{
  margin: 2.2rem 2rem 0;
}
header nav li {
  flex-shrink:0;
}
header nav a {
  text-decoration: none;
}
header nav ul ul {
  position: relative;
}
.js:not(.menu-ready) header nav {
  position:absolute;
  visibility:hidden;
}
.mainmenu-open.responsive-on, .mainmenu-open.responsive-on body {
  overflow:hidden;
}
header nav .menu-level-1 > li.menu-item--expanded > a, header nav .sub-header {
  text-transform: uppercase;
}

/******************************************
Hauptmenü + Hauptpunkte
******************************************/
html:not(.responsive-on) header nav .level-0 {
  position:static;
}
html:not(.responsive-on) header nav .menu-level-0 {
  position:static;
  height:1.5em;
}
header nav .menu-level-0 > li:last-child {
  padding-right:0;
}
html:not(.responsive-on) header nav .menu-level-0 > li.menu-item--expanded:hover,
html:not(.responsive-on) header nav .menu-level-0 > li.menu-item--expanded.touch-opened {
  padding-bottom:3em;
}
header nav .menu-level-0 > li > a {
  text-transform: uppercase;
  font-family: 'Didot', 'GFS Didot', serif;
  font-size: 16px;
  line-height: 16px;
}
html:not(.responsive-on) header nav .menu-level-0 > li > a {
  padding: 1.5rem 2.5rem;
}

/******************************************
Unterebene 1
******************************************/
html:not(.responsive-on) header nav .level-1 {
  background:#fff;
  position:absolute;
  width:100vw;
  top:100%;
  margin-top: -2rem;
  left:calc(50% - 50vw);
  z-index:100;
  max-height:0;
  transition: max-height,padding 0.3s;
  border: solid;
  border-width: 1px 0;
  padding: 0 calc(50vw - 585px) 3rem;
  display: none;
}
html:not(.responsive-on) header.fixed nav .level-1 {
  margin-top: -3.5rem;
}
html:not(.responsive-on):not(.touch-confirmed) header nav .menu-item--expanded:hover > .level-1,
html:not(.responsive-on) header nav li.touch-opened > .level-1 {
  display: flex;
  max-height:calc(100vh - 4.5em);
  overflow:auto;
}
html:not(.responsive-on) header nav .menu-level-1 {
  width: 60%;
  column-count:3;
  column-gap:2em;
  margin-top: 3rem;
}
html:not(.responsive-on) header nav .menu-level-1 li:not(.menu-item--expanded) > a:hover {
  text-decoration:underline;
}
html:not(.responsive-on) header nav .menu-level-1 > li.menu-item--expanded > a {
  pointer-events: none;
  font-weight: bold;
}
header nav .level-1 li {
  float:none;
  padding:0;
  page-break-inside:avoid;
  break-inside:avoid;
}
header nav .level-1 li * {
  page-break-inside:avoid;
  break-inside:avoid;
}
@media (max-width:1200px) {
  html:not(.responsive-on) header nav .level-1 {
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}
/*
  Mehrspaltigkeit nur dann, wenn es auch eine 2. Unterebene gibt
  (damit sich die ganzen einzelnen Punke ohne Unterpunkte nicht so verteilen)
*/
html:not(.responsive-on) header nav .level-1:not(.has-lvl-2) > ul {
  column-count: auto;
  display:block;
}
html:not(.responsive-on) header nav .level-1:not(.has-lvl-2) > ul > li {
  width:50%;
}

header .touch-close {
  display:none;
}
html:not(.responsive-on).touch-confirmed header .touch-close {
  position: absolute;
  right: 50%;
  bottom: 0;
  width:3rem;
  height:3rem;
  line-height: 3rem;
  text-align: center;
  display:block;
  font-size: 1.7em;
  padding-bottom: 4rem;
}

/******************************************
Unterebene 2
******************************************/
html:not(.responsive-on) header nav .menu-level-2 {
  padding: 1rem 0 4rem 0.5rem;
}
html:not(.responsive-on) header nav .sub-header {
  display:none;
}

/******************************************
Teaser im Desktop-Menü
******************************************/
header nav .menuteaser {
  width: 50%;
  display: flex;
}
header nav .menuteaser .views-element-container,
header nav .menuteaser .col-3 {
  width: 100%;
}
.responsive-on header nav .menuteaser {
  display: none;
}

/******************************************
Responsive-Menu Button
******************************************/
.responsive-menu-btn {
  color:#000;
  padding:0;
  float:left;
  font-size:1.5em;
  margin-top:1rem;
}
html:not(.responsive-on) .responsive-menu-btn {
  display:none;
}
.responsive-menu-btn .icn-open {
  font-size:1.2em;
}
nav.is-open .responsive-menu-btn .icn-open, nav:not(.is-open) .responsive-menu-btn .icn-close {
  display:none;
}
/******************************************
Responsive-Menu außen
******************************************/
.responsive-on .layout-container > header {
  height: 70px;
}
.responsive-on .layout-container > header + main {
  margin-top: 70px;
}
.responsive-on .layout-container > header > .headerwrap > .section > .row > .col {
  padding:0 15px;
}
.responsive-on header nav {
  margin-top:1.2rem;
}

/******************************************
Responsive-Menu-Punkte
******************************************/
.responsive-on header nav .level-0, .responsive-on header nav .level-2 {
  position:fixed;
  top:70px;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  overflow:auto;
  z-index:99;
  padding:0 1.5rem;
}
.responsive-on.menu-ready header nav[class*="changing--"] .level-0, .responsive-on.menu-ready header nav[class*="changing--"] .level-2,
.responsive-on.menu-ready header nav li[class*="changing--"] > .level-2 {
  transition:0.3s;
}
.responsive-on header nav:not(.is-open) .level-0 {
  transform:translateX(-100%);
  /* Fix für iOS (iPad iOS 12) - sonst nach Scrollen teils nichts mehr klickbar*/
  pointer-events: none;
}
.responsive-on header nav li:not(.is-open) > .level-2 {
  transform:translateX(100%);
}
.responsive-on header nav li {
  float:none;
  display:block;
  padding:0;
}
.responsive-on header nav .menu-level-0 > li {
  margin-bottom:1.5rem;
}
.responsive-on header nav .level-1 li + li {
  border-top: 1px solid;
}
.responsive-on header nav a {
  padding:1rem;
}

/******************************************
Open/Close-Icons im Menü
******************************************/
header nav .submenu-open {
  float:right;
}
header nav .sub-header .submenu-open {
  float:left;
  padding-right:1em;
}
header nav li > a > .submenu-open i+i,
header nav .sub-header i:first-child,
html:not(.responsive-on) header nav .submenu-open {
  display:none;
}

/******************************************
User-Login-Icon für Responsive
******************************************/
html:not(.responsive-on) .user-login {
  display:none;
}
.user-login {
  padding: 0.5rem;
  float:right;
  margin-top: 1rem;
  margin-right:1rem;
  width: 4rem;
}
.user-login img {
  display:block;
  width:1.6rem;
  height:4rem;
  margin: 0 auto,
}