@import url("normalize.css");
@import url("print.css");
@import url("interaktion.css");
@import url("navigation.css");



	/* Default link styling */
	a:link { color:#0271fb; }			/* hell blau */
	a:visited { color:#bd02fb; }   	/* grell lila */
	a:hover, a:focus { color:#000; }		/* schwarz */
	a:active { color:#fb0e02; }		/* leuchtet rot */
	
	
	
/* ---------------------------------------------------------
   Meine Styles - Ralf Brau
   ---------------------------------------------------------*/
		
	/* Überschriften und Fließtext gestalten */ 
	html {
	  font-family: 'Muli', Arial, sans-serif;
	  font-size: 100%;
	  background-color:#fff;
	  
	}
	
	body { font-size: 14px; font-size: 0.875rem; }
	h1   { font-size: 26px; font-size: 1.625rem; }   
	h2   { font-size: 22px; font-size: 1.375rem; }  
	h3   { font-size: 20px; font-size: 1.25rem; }
	main { line-height: 1.7; }

  /*  Bilder nicht größer als das Elternelement  */
	  img {
		max-width: 100%;
		height: auto;
	  }
	
 /*  Seitenbreite begrenzen - bis Media Queries kommen)  */
 
 	body{
		color:#333;
		margin:0 auto;
		position:relative;
		
		
		}	
		
/*  Kopf- und Fußbereich einfärben  */	
	header[role="banner"],
	footer[role="contentinfo"]{
		color:#6e1009;
		
		}
		
	footer[role="contentinfo"]{
		background-color:#6e1009;
		color:white;}	
	
		
/*  Klasse zum Elemente Verstecken in visullen Layouts  */

	.hideme{
		position:absolute;
		top:-32768px;
		left:-32768px;
		}
/*  Info: nocolasgallagher.com/micro-clearfix-hack  */

	.cf:before, .cf:after {content: " "; display:table;}
	.cf:after, .clear {clear:both;}
	
/* Pageheader und -footer */
	header[role="banner"] h1 {
	  color: #6e1009; 
	  line-height: 1; 
	  padding: 0 0 0 4rem;
	  margin: 0 0 0.25em 0;
	  font-family: 'Federo', cursive;
	  font-size:2.5rem;
	  
	}
	
	header[role="banner"] h2 {
	  color: #6e1009; 
	  line-height: 1; 
	  padding: 0 0 0 8rem;
	  margin: 0 0 0.25em 0;
	  font-family: 'Federo', cursive;
	  font-size:1.8rem;
	  
	}
	header[role="banner"] a {
	  color: white;
	  text-decoration: none; 
	}
	header[role="banner"] p {
	  padding: 0;
	  margin: 0;
	}
	footer[role="contentinfo"] a {
	  color:white;
	  text-decoration: none;  
	}
	footer[role="contentinfo"] address {
	  color:white;
	  text-decoration: none;  
	}
/* Padding für Layoutbereiche */ 
	header[role="banner"] , 
	nav[role="navigation"], 
	div[class="wrap"],  
	footer[role="contentinfo"] {
	  padding: 1em;
	}
	
/*  Grafik im Inhaltsbereich gestalten mit Schatten */
	main p img{
		border-color:red 2px solid;
	
	}	
	main img {
		border-radius: 0.5em;
		-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
   		-moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
	}
	.ohne img{
		border:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
		
		}
	main h2, aside h2{
		font-family: 'Federo', sans-serif;
		font-size:1.6rem;
		color:#6e1009;
		padding-bottom:0.5rem;
	}
	
		
	main h3, aside h3  { 
		line-height: 1; 
		margin: 0.5em 0 0.25em 0;
 
	}
	
	header .slogan{
		font-size:1rem;
		float:right;
		}

	
	main p, aside p { 
	  margin-top: 0; 
	  margin-bottom: 1em; 
	}
	
		

	main a, aside a { 
	  color: #08c; 
	  text-decoration: none; 
	}
	main ul, aside ul  {
	  padding: 0;
	  margin: 1em 0 2em 2em;
	}
	
	.bildlinks{
		float:left;
		padding: 3px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.bildrechts{
		float:right;
		padding: 3px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.clearing{
	clear:both;
	margin-bottom:0;
	margin-top:0;
}
/*für große Bildschirme*/	
@media screen and (min-width: 768px) { 

  body { 
    width: 90%; 
    max-width: 960px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin: 1em auto;
	background-image:url(../bilder/blume3_rechts.png);
	background-repeat:no-repeat;
	background-position:top right;
	
  }
 
  html {
    background: #F9F2D0 url("../bilder/hg_main.jpg") repeat left top;
	
  }
  div.wrap { 
    overflow: hidden; 
  } 

  footer[role="contentinfo"] {
    clear:both;
  } 


  .startseite main header .headertext { 
    float: left; 
    width: 70%; 
  } 
	.team main header .headertext { 
    float: left; 
    width: 90%; 
  } 
  .startseite main header .headerbild { 
    float: right; 
    width: 25%;
	margin-right:2rem;
	
  } 
  
  .leistung main header .headertext { 
    float: left; 
    width: 30%; 
  } 

  .leistung main header .headerbild { 
    float: right; 
    width: 63%;
	font-size:0.9em;
	background-image:url(../bilder/durchsichtig1.png);
	padding:1em;
  } 
  
  .leistung main header .headertext li.active{
	  font-weight:bold;
	  list-style-type:square;
	  letter-spacing:1.3;
	 	  	 
	  }
  article #a2{
	  padding:0 2em 0 2em;
	  background-color:red;}
  
  
  
   /*Dreispaltig gestalten*/
  .imp #a1 { float: left; width: 49%; margin: 0;}
  .imp #a2 { float: right; width: 49%; margin: 0; }

 
  .imp{
	  font-size:0.8rem;}

} /* Ende @media */
/* für die Mobilgeräte */
@media screen and (min-width: 320px) and (max-width: 767px) {
	body{
  	  	
		

	}
	
	
	} /* Ende @media */.mitte {
	position: relative;
	top: -100px;
	right: -350px;
	width: 280px;
	float: left;
}
Infoblatt {
	background-color: #CCC;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	border-top-color: #900;
	border-right-color: #900;
	border-bottom-color: #900;
	border-left-color: #900;
}
.Infoblatt {
	background-color: #CCC;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	border-top-color: #900;
	border-right-color: #900;
	border-bottom-color: #900;
	border-left-color: #900;
	padding: 4px;
	margin: auto;
}