/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  
 
<!--- CSS-Einstellungen für mobile Geräte --->
 
/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
body{
  
}

header {
    
  }
 
  header img {
    
  }
 
  nav ul {
    
  }
 
  nav li {
    
  }	
 
  /* durch auto werden die beiden asides in eine Zeile gesetzt */
  aside { 
    
  }
 
  article { 
    
  }
  #news { 
    
  }
  aside { 
    
  }
  footer {
    
  }
}
 
/* Viewports mit großer Auflösung */
@media all and (min-width: 50em) {
/* article wird 2.5x so breit wie die beiden asides */

body{
  margin: 3em;
  font-family: verdana, arial, sans-serif ;
  background: #f9f9f9;
}
 header {
    background: #eee; padding: 1em;
  
  }
 
 main {
 
 }

  article {                        
    padding: 1em;
  }
 
 footer {
	background: #eee; padding: 1em;
	margin-top: 2em;
	}
 
}

h1,h2,h3,h4,p,ul,ol,dl,dd,dt,li,div,td,th,address,blockquote,nobr,b,i {
 font-family:Verdana,Arial,sans-serif; color:#000000; }

h1 { font-size:24px; margin-bottom:18px; }
h1.titel { font-size:24px; margin-top:0px; margin-bottom:0px; }

h2 { font-size:21px; margin-bottom:18px; }

h3,h3.xmp,h3.xpl,h3.inf,h3.tip,h3.akt { font-size:16px; }

h4 { font-size:13px; }

p,ul,ol,li,div,td,th,address,blockquote { font-size:13px; }

dl { margin-top:3px; }

li { margin-top:3px; }


a.main:link, a.main:visited {
display: inline-block;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #888;
background-repeat: no-repeat;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 2em;
margin-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
}

a.main:hover, a.main:active, a.main:focus {
display: inline-block;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #333;
background-repeat: no-repeat;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 2em;
margin-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
}


a.sub:link, a.sub:visited {
display: block;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #888;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 2em;
margin-left: 1em;
margin-bottom: 0.5em;
}

a.sub:hover, a.sub:active, a.sub:focus {
display: block;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #d33;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 2em;
margin-left: 1em;
margin-bottom: 0.5em;
}


a.text:link { background-color:#aaaaaa; color:#000000; text-decoration:none; }
a.text:visited { background-color:#aaaaaa; color:#000000; text-decoration:none; }
a.text:hover { background-color:#eb0d0d; text-decoration:none; color:#ffffff; }
a.text:active { background-color:#eb0d0d; text-decoration:none; color:#ffffff; }
a.text:focus { background-color:#eb0d0d; text-decoration:none; color:#ffffff; }

.left_img { float:left; margin-right:2em; margin-bottom:1.5em; margin-top:1.5em; border-style:solid; border-width:0.5em; border-color:#333333; }
.right_img { float:right; margin-left:2em; margin-bottom:1.5em; margin-top:1.5em; }