#menu1 {width:90%;position:relative;margin:1rem;margin-top:-80rem;margin-left:-80rem;z-index:20;}
#menu1 ul {text-align:center;margin:1rem;padding:0;width:80%;}
#menu1 li {list-style-type:none;margin:.4rem;padding:0;background:rgba(250,0,0,.5); border-radius:5px}
#menu1 li a {display:block;
text-align:left;
text-decoration:none;
font-size:150%;
letter-spacing:.1rem;
padding:.2rem .2rem;
margin:0;
color:#fff;
}

/* menü sichtbar  formatierung */
label {
display:inline-block;
color:#fff;
background:#12548a;
cursor:pointer;
padding:.5rem 1rem;
margin-bottom:0rem;
margin:8px 50px;position:relative;z-index:2;
font-size:30px;
}

/* menu unsichtbar */
#menu1 {visibility:hidden;transition:all 1s;opacity:0;}

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

/* schaltet menu ein */
input[type=checkbox]:checked ~ #menu1 {
visibility:visible;opacity:1;
margin-top:1rem;
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) {
#menu1 li a {width:30rem;}
}

/* - - - - ab 1024 pixel - - - - */
@media (min-width: 1024px) {
#menu1 li {display:inline-block;margin:0;box-shadow: 5px 15px 6px #333;}
#menu1 li a {width:100%;}
#menu1 li a {font-size:100%;}
/* menu-schalter versteckt */
label{display: none;}
/* menu sichtbar */
input[type=checkbox]:checked ~ #menu1 {margin-top:0;margin-left:0;}
#menu1 {background:transparent;transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0;}

input[type=checkbox]:checked ~ #menu1 {
margin-top:-3.2rem;}
}