/* Styles für Stephan Hegner */
/* Copyright Christian Hostettler | www.inspired-design.ch */

* { font-family: 'PT Sans', sans-serif; font-style:normal !important; }
h1 a { font-family:Georgia, Constantia, "Lucida Bright", "DejaVu Serif", serif; }
* { font-size:16px;  line-height:1.3em; color:#232323; } 
h1, h2, h3 { font-weight:normal;}
h1, h1 a { font-size:1.3em; line-height:1em; margin:0em 0 1em 0; padding:0 0; text-decoration:none;}
h1 .claim { font-size:0.75em; line-height:0.75em; color:#999; }	
h2 { font-size:0.75em; margin:0em 0 0.75em 0; padding:0 0 0 0; font-style:italic;}
h2 { color:#999; border-bottom:1px solid #999;}
h3 { font-size:1em; font-style:italic; margin:0.0em 0 0.0em 0; padding:0 0; }
h3:after { content:":"; }
p  { font-size:1em; margin:0 0 0.5em 0; padding:0 2% 0 0; }
.footer p { clear:both; font-size:0.75em; color:#999; margin-top:2em;}
p a { text-decoration:none; color:#232323; }
h1 a:hover, p a:hover { text-decoration:underline;}
/*einspaltiges Layout*/
@media screen and (max-width:767px) {
h2 { font-size:1em; font-style:normal; }
.footer p { font-size:1em; margin-top:1em;}
	}
img.smallscreen { display: none; }
@media screen and (max-width: 767px) {
	img.largescreen { display: none; }
	img.smallscreen { display: inline; }
}       
html, body { margin:0; padding:0; height:100%; text-align:center; } 
body { background-color:#999; }
.wrapper { text-align:left; padding:0 5% 0 5%; width:90%; background-color:#fcfcfc;  }
.wrapper { position:relative; margin:0 auto; height:auto !important; height:100%; min-height:100%; }
.header { padding-top:1em; }
.header img { width:100%; height:auto; float:left; padding-bottom:1em;}
.header h1 { clear:both; width:100%; }
.person, .angebot, .kontakt { clear:both; width:100%; padding:1.5em 0 0 0;}	
.footer { clear:both; width:100%; padding:1.5em 0 2em 0; }	
/* zwei-/dreispaltiges Layout */
@media screen and (min-width: 768px)  { 
.header img { max-width:45%; height:auto; float:left; padding-right:2.5%;}
.person { clear:both}
.angebot { clear:none; }
.person, .angebot { float:left; width:48%; padding:0 0 0 0; }
.person { margin-right:4%;}	
.angebot { }
.kontakt { clear:both; float:left; width:100%; padding:1.5em 0 0 0;}	
.col3 { float:left; width:30.66666666666667%; padding:0 0 0 0; }
.col3-1, .col3-2 { margin-right:4%; } 
.col3-3 { margin-right:0; }  
h1 { font-size:2em; padding:0 0 0 0; }
}
/* dreispaltiges Layout */
@media screen and (min-width:1080px)  {
.wrapper { padding:0 5% 0 5%; width:80%; }
.header img { max-width:45%; height:auto; float:left; padding-right:2.5%;}
.header h1 { clear:none; width:50% ; float:left; }
.hauptinhalte { clear:both} 
.header img { width:100%; height:auto; }
.header h1 { width:100% ; float:left; }
}
/* dreispaltiges Layout, maximale Breite */
@media screen and (min-width:1200px)  {
.wrapper {max-width:1200px;}
.header img { width:50%; height:auto; float:left; }
.header h1 {  width:50%; float:left; padding-top:0.5em; }
.hauptinhalte { width:100%; clear:both; padding-top:2em;  }
.person, .angebot { margin-right:0%; }
.kontakt { margin-right:0; }
.person, .angebot, .kontakt { clear:none; float:left; width:30.66666666666667%; padding:0 0 0 0; }
.person, .angebot { margin-right:4%; }
.col3 { clear:both; }
.col3-1, .col3-2, .col3-3 { width:100%;  margin-right:0; }  
.header h1 { font-size:2.3em; }
}

@media print {
.header img { width:50%; height:auto; }	
.header h1, .person, .angebot, .kontakt, .footer { clear:both;}
.col3 { float:left; width:30.66666666666667%; padding:0 0 0 0; }
.col3-1, .col3-2 { margin-right:4%; } 
.col3-3 { margin-right:0; }  
.hauptinhalte p { font-size:14px; line-height:20px; }
}

/*.wrapper { background-color:#A3E9F1; }
.header { background-color:#EBCACA; }
img { background-color:#9E8DBD;}
h1 { background-color:#E9D2E8; }
.hauptinhalte { background-color:red;}
.person { background-color:#D5BF7F;}
.angebot  { background-color:#C7A357;}
.kontakt  { background-color:#E7C991;}
.col3-1 { background-color:#B6DCBE;}
.col3-2 { background-color:#B6DCBE;}
.col3-3 { background-color:#B6DCBE;}
.footer { background-color:#E9D2E8;}
.header { background-color:#EBCACA;}
*/