/* Navigation TopMenü */

/* HEADLINE ANFANG Oberste Linie Anfang*/
.headline{
  background-color: #0089af;
	height: 1em;
}
/* HEADLINE ENDE Oberste Linie Ende*/

/* HEADNAV ANFANG -- Navigation für Kontakt + Partner */
.headnav{
  display:flex;
  background-color: #e9e9e9;
	height: 5em;
  align-items: center;
  justify-content: flex-end;
}
.headnav ul {
  list-style: none;
  padding: 0;
}

.headnav ul li {
  display: inline-block;
	font-size: 1.1rem;
}

.headnav ul li a {
	display: inline; /* display: block bei Mobile */
  box-sizing: border-box;
  margin: auto;
  padding: 0em .6em 0em .6em;
  border: 1px solid transparent;
  color: #00627d;
  text-decoration: none;
  padding: 15px;
  line-height: 20px;
  z-index: 1;
  font-size: 1.1rem;
}
/* HEADNAV ENDE -- Navigation für Kontakt + Partner */


.nav-top-container {
	display: grid;
	grid-template-rows: 100%; 
/*	grid-template-columns:auto 1fr auto;*/ 
	grid-template-columns:10% 85% auto;
	grid-template-areas: "links mitte rechts";
	justify-items: center;
    align-items: center;
}

.brand { grid-area: links; }
.nav-top {grid-area: mitte; }
.nav-login{grid-area: rechts; }

.brand {
    line-height: 1;
 /*   line-height: 70px; */
    font-size: 1.2em;
  }
  
  .brand_a, .brand_img {
      display: block;
      width: 5.5em;
      height: auto;
  }


nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
	font-size: 1.1rem;
	background-color: white;
  /* min-width: 190px; bei Mobile */
}

nav ul li a {
	display: inline; /* display: block bei Mobile */
  box-sizing: border-box;
  margin: auto;
  padding: 0em .6em 0em .6em;
  border: 1px solid transparent;
  color: #00627d;
  text-decoration: none;
  padding: 15px;
  line-height: 20px;
  z-index: 1;
}

nav ul li .active,
nav ul li a:hover {
	border: 1px solid #3395B0 !important;
  outline:none !important;
}

nav ul li a:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}

nav ul li ul li {
  min-width: 190px;
  display: block;
}

nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
  z-index: 1;
}

.nav-top-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.pane {
  display: none;
  position: absolute;
  left: 0;
  top: 8em;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
  background-color: #e6e6e6;
}
.pane ul {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.pane li {
  margin-right: 1em;
  margin-bottom: .5em;
 /* flex: 1 1 0%;*/
  width: 25em;
}
.pane a {
  display: flex;
}
.pane img {
  margin-right: 1em;
}
.pane li p {
  margin-top: 1em;
}
.pane li:hover > a {
  color: #3395B0;
}

.pane-section > li > a {
  display: block;
 /* font-weight: bold; */
  border-bottom: 1px solid;
}
.pane-section > li > ul {
  margin-top: 1em;
}

.nav-mobile {
  display: none;
  position: relative;
  border: 1px solid silver !important;
  top: 0;
  right: 0;
  background: transparent;
  height: 60px;
  width: 60px;
}

#nav-toggle {
  position: absolute;
  left: 11px;
  top: 15px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
  background: transparent;
  border: none;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #00627d;
  position: absolute;
  display: block;
  content: "";
/*  transition: all 300ms ease-in-out;*/
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}


/* kleiner als 600 px */
  @media only screen and (max-width: 600px) {
    .nav-mobile {
      display: block;
    }
     nav {
      width: 100%;
      /*padding: 70px 0 15px;*/
    }

    nav ul li {
          display:block;
    }
    nav ul li a {
            padding: 15px;
            line-height: 20px;
            display:block;
    }
    nav ul li ul li a {
            padding-left: 30px;
    }
        
    .nav-top-dropdown {
     position: static;
    }
    
    .nav-top-container {
      grid-template-columns: 30% 40% 30%; 
      padding: 2em 2em 2em 0em;
    }
    
    .brand { grid-area: mitte; }
    .nav-top { grid-area: links; justify-self: left; padding-left: 20%;}

    .nav-login{ grid-area: rechts; justify-self: right; }
    

    .nav-list{
      display: none;
      position: absolute;
      margin-top: 3em;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      width: 90%;
      background: #E9E9E9;

    }

.pane-section li a {
    -webkit-user-drag: none; /* verhindert, dass Safari Drag blockiert */
    touch-action: pan-y; 
}

.nav-list li a {
      -webkit-user-drag: none; /* verhindert, dass Safari Drag blockiert */
    touch-action: pan-y; 
}

    .pane-section{
      display: none;
    }
  
    .pane{
      position:static;
    }
  
    .pane li{
      width: 100%;
      margin-right: 0;
    }

  }

  /* größer als 600 px */
  @media screen and (min-width: 600px) {
 
    .nav-list {
      display: block !important;
    }

  }