body{background-color: whitesmoke;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
    
h1{border: black 1px solid; border-radius: 40px; background-color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;}
    
a{text-decoration: none; color: black;}

.uebersicht::before{content: "§"; display: block; float: left; margin-right: 10px;}

#ul1{list-style: none;}
.uebersicht{padding-top: 20px; font-size: xx-large; margin-left: 30%; margin-bottom: 30px;}
footer{margin-top: 100px; border-top: black 1px solid; text-align: center; font-size: larger; background-color: white;}


@media only screen and (min-width: 768px){
body{background-color: whitesmoke;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}

h1{border: black 1px solid; border-radius: 40px; background-color: white;
text-align: center;
margin-left: 30%;
margin-right: 30%;
padding-top: 10px;
padding-bottom: 10px;}

a{text-decoration: none; color: black;}

#ul1{margin: auto; display: block; margin-left: 43%; margin-right:43%; list-style: none;}

#m1:hover + #m1info{display: block;}
.uebersicht::before{content: "§"; display: block; float: left; margin-right:  10px;}

.uebersicht{padding-top: 20px; font-size: xx-large; margin-left: 0; margin-bottom: 0;}

footer{margin-top: 175px; border-top: black 1px solid; text-align: center; font-size: larger; background-color: white;}

li:hover{color: red;}
#m1:hover + #m1info{display: block;}
#m1info{display: none; position: absolute; top: 100px; right: 310px; border: lightgray 1px solid; background-color: white;}

#m2:hover + #m2info{display: block;}
#m2info{display: none; position: absolute; top: 185px; right: 310px; border: lightgray 1px solid; background-color: white;}

#m3:hover + #m3info{display: block;}
#m3info{display: none; position: absolute; top: 240px; right: 76px; border: lightgray 1px solid; background-color: white;}

#m4:hover + #m4info{display: block;}
#m4info{display: none; position: absolute; top: 270px; right: 305px; border: lightgray 1px solid; background-color: white;}

#m6:hover + #m6info{display: block;}
#m6info{display: none; position: absolute; top: 340px; right: 325px; border: lightgray 1px solid; background-color: white;}

#m7:hover + #m7info{display: block;}
#m7info{display: none; position: absolute; top: 400px; right: 368px; border: lightgray 1px solid; background-color: white;}

#m11:hover + #m11info{display: block;}
#m11info{display: none; position: absolute; top: 490px; right: 230px; border: lightgray 1px solid; background-color: white;}}