body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
max-width:1100px;
margin-left: 20px;
}
h1 {
    font-size:large; 
}
.mixed { 
    display: flex;
    flex-wrap:wrap; 
 }
 
 /** kleiner Viewport **/
 .mixed>* { 
    /*width: 45%; */
    width: 80%;/*Breite der divs auf smartphone*/
    margin: 10px;
    padding:5px;
    border: 1px solid silver;
    background-color: gainsboro;
 }
 
 /** großer Viewport **/
 @media (min-width: 980px) {
    
   /* .mixed>* { width: 22%;} ergibt 4 Spalten*/
    .mixed>* { width: 45%;} /*ergibt 3 Spalten*/
 }


h4 {
    font-size: medium;
}
li {
padding-bottom: 10px;
line-height: 1.8em;

}
a {
        color: #000000;
}
a:hover {
        /*color: #9f1118;*/
        color: #393434;
        }

nav {
background: #c25050;
color: white;
width: 200px;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
padding: 5px 5px 5px 13px;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
nav ul li a:hover {
    text-decoration: underline;
}
main {
flex: 1;
padding: 20px;
border-right: 20px solid #c25050;
border-top: 20px solid #c25050;
border-bottom: 20px solid #c25050;

}
.startimg{
    padding: 4px 4px 4px 10px;
}
.spotlight{
width: 600px;

}
.title
{ 
    background-color:#aa3131;
    color: white;
    font-size: medium;
    padding:3px;
}
.listestart{
    line-height: 30px;
}
.footer{
  text-align: right; 
  padding-top:50px; 
  font-size:small;
}


@media only screen and (max-width: 600px) {
body {
flex-direction: column;
margin-left: 0px;
}
.header-kleiner{
    max-width: 100%; 
}
.hide-on-mobile { 
display: none; 
}
nav {
width: 100%;
}
main{
    padding:10px;
    border:none;
}

 img {
    max-width:100%;
   height:auto;
    width: auto; /* ie 8 */
    }


}