nav.nav-main {
    float: right;
}
.nav-main ul, ul.footernav {margin:0px auto; padding:0px; list-style:none; display:inline-block;}
.nav-main ul li.erste, ul.footernav li {float:left; margin:0px;  margin-top:0px; position:relative;}

.nav-main ul li.erste a{
  font-family: 'Sparkasse Head', Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:400;
  color:#FFFFFF;
  display:block;
  margin-left: 0px;
  margin-bottom: 0px;
  padding: 5px 17px;
  text-decoration:none;
}

.nav-main ul li.erste:hover::before, .nav-main ul li.erste.active::before {
  left: 15px;
  right: 15px;
}
.nav-main ul li.erste::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: #FFFFFF;
    height: 2px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}


.nav-main ul li.erste.trenn a{padding: 5px 0px 5px 17px;}
.nav-main ul li.erste.trenn {border-left:1px solid #FFFFFF}
@media only screen and (max-width: 1023px){
nav.nav-main {
    width: 100%;
}
 
}
@media only screen and (min-width: 1024px){
nav.nav-main {
    margin-top: 50px;
    margin-bottom: 10px;
}
}