/* styles.css */

html {
border: 10px solid #ddd;
}
body {
width: 98%;
font-family: Helvetica, Verdana, Arial; 
color: #000;
margin: 6px auto;	
background: #fff;
}
footer {
  clear: left;	  
  width: 100%;	
  background-color: #ccc;
  border: 1px solid gray;
}
#logo { width: 319px; height: 190px; }
#imp { margin-left: 5px; }
.art1, .art3 {
  float: left;
  width: 32%;
  height: 190px;
  padding: 5px;
}
.art2 {
  clear: left;
  height: 28px;
  width: 100%;
}
.art3 {
  text-align:center;
} 
.leer {
  float: left;
  width: 32%;
  height: 190px;
  padding: 5px;
}  
.re { float: right; }
.text1{
 text-align: center;
 font-size: 1.8em;
 font-weight: bold;
 color: #fff;
 background: #cc0000;
 }
.text2{
  font-weight: bold;
 } 
.mleft { margin-left: 10px; } 
a:link, a:visited{ color: #dd0000 }
a:hover { color: blue }  
 
 /* Eine Version für 768 Pixel (beispielsweise Tablet im Hochformat) */
@media only screen and (max-width: 768px) {
.art1, .art3 {
  float: left;
  width: 32%;
  height: 190px;
  padding: 5px;
}
.art2 {
  clear: left;
  height: 28px;
  width: 100%;
  }
.art3 {
  text-align:center;
  }     
}

/* Eine Version für 480 Pixel (beispielsweise Smartphones) */   
@media only screen and (max-width: 480px) { 
html {
border: 2px solid #ddd;
}
#logo { width: 250px; height: 153px; }
 .art1, .art3 {
  float: left;
  width: 100%;
  height: 160px;
  text-align: center;
  padding: 4px 0;
  border: 1px solid gray;
}
.art2 {
  clear: left;	 
  width: 100%;
  height: 24px;
  padding: 3px 0;
  border: 1px solid gray;
  }
.art3 {
  text-align:center;
  } 
.leer { display: none; }
.text1{
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
 color: #fff;
 background: #cc0000;
 }  
 .text2{
  font-size: 1em;	 
  font-weight: bold;
 } 

.re { float: none; }   
}