@charset "UTF-8";


/* Basisversion mit 960 Pixel */
* 
{ margin: 0; padding: 0;
 border: 0;
 }



#wrapper {

   margin: 5px auto;

   width: 960px;
}



header, footer {
   
   border: 1px solid black;

   padding: 5px;

   text-align:center;

   background-color: red;

   color: white;

   font-size: 120%;
   font-family: arial
}



#mainnav {

   float: left;

   margin-top: 5px;

   padding: 2% 2%;

   width: 12%;

   font-family: arial }



#sidebar {

   float: right;

   margin-top: 5px;

   padding: 2% 2%;

   width: 24%;
   font-family: arial
}



main {

  float: left;

  padding: 0 2%;

  margin-top: 5px;

  width: 52%;
  font-family: arial
}



.clear { clear: both; }


 article img { 
 /* Bild im Artikel formatieren */

    float: right;

    margin: 5px 10px 10px 5px;
    max-width: 60%;
    height: auto; }



 article {

   padding: 2%;

   margin-bottom: 5px;

   width: 97%; 
}



article h2 {

  background-color: red;

  color: white;

  border: 1px solid black;

  font-size: 120%;

  padding: 3px;
}



article hTel {

  background-color: yellow;

  color: black;

  border: 1px solid black;

  font-size: 110%;

  padding: 3px;
}



article p {

  border: 1px solid black;

  border-top: 0px;

  padding: 6px;
}


article p2 {

  border: 2px white;

  border-top: 1px;

  padding: 6px;
 }



fett {font-weight: bold;
}

gelb {background-color: yellow;}




nav ul li {

  list-style: none;

  margin-left: 0.6em;

  margin-top: 0.4em;
}


nav h3 {

  background-color: red;

  color: white;

  border: 1px solid black;

  font-size: 120%;

  padding: 3px;
}

nav h4 {

  background-color: yellow;

  color: red;

  border: 1px solid black;

  font-size: 120%;

  padding: 3px;
}



nav ul {

  border: 1px solid black;

  border-top: 0px;

  padding: 5px;
}


aside h3 {

  background-color: red;

  color: white;

  border: 1px solid black;

  font-size: 120%;

  padding: 3px;
}

aside h4 {

  background-color: yellow;

  color: red;

  border: 1px solid black;

  font-size: 120%;

  padding: 3px;
}




aside ul {margin: 0.5em 0 0.5em 1.6em;
}





/* Eine Version für 768 Pixel (beispielsweise Tablet im Hochformat) */


@media only screen and (max-width: 768px) {

    a:link{color: white}, a:visited{color: yellow}, 
    a:active{color: black}, a:hover {color: white}
    #wrapper {width: 98%;
  }

  
  #mainnav {
    
    padding: 1%;

    text-align:center;

    width: 98%;

    background-color: red;

    color: white;

    border: 1px solid black;
}

  
  nav ul {

    margin-left: 0;

    padding-left: 0;

    display: inline;

    border: 0px;
  }

  
  nav ul li {

    margin-left: 0;

    padding: 3px 10px;

    border-left: 1px solid #000;

    list-style: none;

    display: inline;
  }

  
  nav h3 {
    margin: 0 10px 0 0;

    display: inline;
  }

 
  #sidebar 
   a:link, a:visited{color: black} a:active, a:hover{color: red} 
    {

    float: left;

    margin-top: 5px;

    padding: 2% 2%;

    width: 30%;
  }

  
  main {

    float: right;

    padding:  2% 2%;

    margin: 0;

    width: 62%;
  }


  article {
 width: 98%;
  }
  
}




/* Eine Version für 480 Pixel (beispielsweise Smartphones) */
   

@media only screen and (max-width: 480px)
 {
 

  #wrapper {margin: 5px auto; width: 97%;
  }

    
 nav h3 { display: none; }

   
  nav ul li:first-child {

       margin-left: 20px;

       border-left: none;

       list-style: none;

       display: inline;   }


   #sidebar { padding: 1%; width: 98%; margin: 0 0 5px 0; }

 
   main { width: 98%;}

   article img { 
   /* Bild im Artikel formatieren */

       float: bottom;

       margin: 5px 10px 10px 5px;
       max-width: 47%;
       height: auto;  }
 
}