menu {
    grid-row: auto;
    grid-column: 1 / -1;
    z-index: 2000;
}

#nav {
	display: none;
}

#mobnav {
	display: inline;
}

nav ul {
    font-size: 1.1rem;
}

nav li {
    color: #0311a6;
	padding: 2px;
	margin: 4px;
	width: 90%;
	background: whitesmoke;
}

nav .active > a {
    font-weight: bold;
    text-decoration: underline;
}

nav li > a {
	text-decoration: none;
	color: #0311a6;
}

/*Navigation mit Hamburgermenü*/

nav.topmenu {
    height: auto; 
    max-height: 0;
    width: 90%;
    overflow: hidden; 
    transition: all 0.5s;
    position: absolute;
    top: 5em;
    right: 1em;
    background-color: whitesmoke;
    opacity: 0.95;
}

label.hamburg { 
    display: block;
    border: 1px solid;
    border-radius: 3px;
    border-color: #0311a6;
    background: white; 
    width: 2.5em; 
    height: 2.1em; 
    position: relative; 
}

input#hamburg {display:none}

/*Definition Menükästchen*/

.line { 
    position: absolute; 
    left: .5em;
    height: .15em; 
    width: 1.5em; 
    background: #0311a6; 
    border-radius: 2px;
    display: block; 
    transition: 0.5s; 
    transform-origin: center; 
}

/*Definition Striche*/

.line:nth-child(1) { top: 0.5em; }
.line:nth-child(2) { top: 1em; }
.line:nth-child(3) { top: 1.5em; }

/*Rotation Strich 1 und 3, Ausblenden Strich 2*/

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(.5em) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-8px) rotate(45deg);
}

#hamburg:checked + .hamburg  + nav.topmenu { 
    max-height: 600px;
    float: left;
    position: absolute;
    border: solid 0.1em #020c79;
}