nav {width :99%;position:relative;
margin:0;background:rgba(40,94,140,.3);
margin-top:-80rem;margin-left:-80rem;
}

nav ul {display:inline-block;
text-align:center;
margin:0 1rem;
padding:0;width:100%;
}

nav li {list-style-type : none;
margin:.4rem;
padding:0;
}

nav li a {
display:block;
text-align:left;
text-decoration:none;
font-size:130%;
letter-spacing:.1rem;
padding:.2rem 1rem;
margin:0;
color:#fff;
}

/* menü sichtbar  formatierung */
label {
display:inline-block;
color:#fff;
background:#12548a;
cursor:pointer;
padding:.2rem 1.5rem;
z-index:2;
font-size:30px;
}

/* menu unsichtbar */
nav {visibility:hidden;transition:all 2s;opacity:0;}

/* checkbox versteckt */
input[type=checkbox]{display:none;}

/* schaltet menu ein */
input[type=checkbox]:checked ~ nav {
visibility:visible;opacity:1;
margin-top:-3.2rem;
margin-left:0;
}
.top { font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%;}
.top a {text-decoration:none}

/* - - - - ab 480 pixel - - - - */
@media (min-width: 480px) {
nav li a {width:30rem;}
}
/* - - - - ab 1024 pixel - - - - */
@media (min-width: 1024px) {
nav li {display:inline-block;margin:0;}
nav li a {width:100%;}
/* menu-schalter versteckt */
label{display: none;}
/* menu sichtbar */
input[type=checkbox]:checked ~ nav {margin-top:0;margin-left:0;}
nav {background:transparent;transition:none;visibility:visible;opacity:1;margin-top:8px;margin-left:0;}
}

nav li, nav li a { background:rgba(8,164,175,68%); border:double; border-radius: 4px 8px; }
nav li a:hover { background: rgba(30,100,30,.6);}