/* ---- gesamte seite ---- */

div#gesamt {
margin: 72px 10px 10px 10px;
}

li.katuli1 {
margin: 0 5px 0 0;
padding: 2px 6px;
list-style: none;
float: left;
border-radius: 5px;
background: #c0c0c0;
}

/* ---- navi oben --- */

nav#navi {
width: 298px;
height: 560px;
background: #ffffff;
position: absolute;
top: 0;
left: -300px;
border-right: 2px solid #c0c0c0;
border-bottom: 2px solid #c0c0c0;
border-radius: 0 0 10px 0;
transition: all 300ms ease-in-out;
}

ul.naviul {
margin:  0;
padding: 0;
}

ul.naviul a {
padding: 0;
margin: 10px 0 0 0;
color: #000000;
font-size: 20px;
font-weight: normal;
text-align: center;
vertical-align: middle;
display: block;
border: 2px solid #c0c0c0;
border-radius: 5px;
text-decoration: none;
}

ul.naviul a:hover {
background: #c0c0c0;
text-decoration: underline;
}

li.li0 {
margin: 0 0 0 4%;
list-style: none;
float: left;
width: 28%;
}

li.li1 {
margin: 0 0 0 4%;
list-style: none;
float: left;
width: 92%;
}

li.li2 {
margin: 0 0 0 4%;
list-style: none;
float: left;
width: 92%;
}

#navibutton {
display: none;
}

nav .navicheck {
cursor: pointer;
background: #c0c0c0;
position: absolute;
left: 298px;
top: 0px;
width: 60px;
height: 60px;
}

nav .navicheck span {
display: block;
content: "";
position: absolute;
left: 10px;
top: 27px;
height: 6px;
background: #ffffff;
width: 40px;
}

nav .navicheck span::after {
display: block;
content: "";
position: absolute;
left: 0;
top: -12px;
height: 6px;
background: #ffffff;
width: 40px;
}

nav .navicheck span::before {
display: block;
content: "";
position: absolute;
left: 0;
top: 12px;
height: 6px;
background: #ffffff;
width: 40px;
}

nav .navicheck:hover {
background: #000000;
}

input#navibutton:checked + #navi {
left:0px;
}