/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  
 
<!--- CSS-Einstellungen für mobile Geräte --->
body{
  margin: 3em;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace ;
  background: #ffe;
  text-align: left;

}
 header {
    background: #fff; padding: 1em;
  
  }
 
 
 img.logo {
	  max-width: 100%;
	 height: auto;
 }

 
 main {
   font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace ;

 }

  article {                        
    padding: 1em;
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace ;
 }
 
 footer {
	background: #fff; padding: 1em;
	margin-top: 2em;
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace ;

	}
 

a.main:link, a.main:visited {
display: inline-block;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #8a8;
background-repeat: no-repeat;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #373;
background-repeat: no-repeat;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #8a8;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #d53;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin-left: 1em;
margin-bottom: 0.5em;
}

a.mail:link, a.mail:visited {
display: inline;
align: left;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #444;
background-repeat: no-repeat;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin: auto;
margin-bottom: 0.5em;
}


a.mail:hover, a.mail:active, a.mail:focus {
display: inline;
align: left;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #aaa;
background-repeat: no-repeat;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin: auto;
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; }

h1,h2,h3,h4,p,ul,ol,dl,dd,dt,li,div,td,th,address,blockquote,nobr,b,i {
 font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 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; }

fieldset {
	background: #fff;
	padding: 15px;
	width: 30%;
}

label {
	display: block;
	position: relative;
}

input[type="text"], input[type="password"] {
	left: 10em;
	position: absolute;
}

/* Smart Phones und Tablets mit mittlerer Auflösung */
@media only screen and (min-width: 800px) {


body{
  margin: 3em;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace ;
  background: #fff;
  text-align: center;

}
 header {
    background: #fff; padding: 1em;
  
  }
 
 
 img.logo {
	 max-width: 100%;
	 height: auto;
 }

 
 main {
 
 }

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

a.main:link, a.main:visited {
display: inline-block;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #8a8;
background-repeat: no-repeat;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #373;
background-repeat: no-repeat;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #8a8;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #d53;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin-left: 1em;
margin-bottom: 0.5em;
}

a.mail:link, a.mail:visited {
display: block;
align: center;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #444;
background-repeat: no-repeat;
width: 50%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin: auto;
margin-bottom: 0.5em;
}


a.mail:hover, a.mail:active, a.mail:focus {
display: block;
align: center;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #aaa;
background-repeat: no-repeat;
width: 50%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin: auto;
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; }


}
 
/* Viewports mit großer Auflösung */

@media only screen and (min-width: 1280px) {
/* article wird 2.5x so breit wie die beiden asides */

body{
  margin: 3em;
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace ;
  background: #fff;
  text-align: center;

}
 header {
    background: #fff; padding: 1em;
  
  }
 
 
 img.logo {
	 max-width: 100%;
	 height: auto;
 }

 
 main {
 
 }

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

a.main:link, a.main:visited {
display: inline-block;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #8a8;
background-repeat: no-repeat;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #373;
background-repeat: no-repeat;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #8a8;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
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: #d53;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin-left: 1em;
margin-bottom: 0.5em;
}

a.mail:link, a.mail:visited {
display: block;
align: center;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #444;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin: auto;
margin-bottom: 0.5em;
}


a.mail:hover, a.mail:active, a.mail:focus {
display: block;
align: center;
color: #ffffff;
font-weight: bold;
font-size: 1em;
background-color: #aaa;
background-repeat: no-repeat;
width: 30%;
text-indent: 1.2em;
text-decoration: none;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
line-height: 2em;
margin: auto;
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; }


}