@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
   ---------------------------------------------------------*/
		
	/* Überschriften und Fließtext gestalten */ 
	html {
	  font-family: 'Muli', Arial, sans-serif;
	  font-size: 100%;
	  background-image:url(../bilder/hg_body.jpg);
	  
	}
	
	
	
	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;
	  }
	  
	  main header h2 {
	  line-height: 1; 
	  padding: 0;
	  margin: 0; 
	}
	.startseite main header h2 { 
	  margin-bottom: 1em;
	}

 /*  Seitenbreite begrenzen - bis Media Queries kommen)  */
 
 	body{
		background:#fff;
		color:#333;
		margin:0 auto;
		position:relative;
		
		}
	#bild  {
   		position:relative;
		top:0;
		right:-851px;
		margin:-120 0 -50px -180px;
	}
		
/*  Kopf- und Fußbereich einfärben  */	
	header[role="banner"],
	footer[role="contentinfo"]{
		background:#ffcc66;
		color:#333300;
		}
		
/*  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: #333300; 
	  line-height: 1; 
	  padding: 0;
	  margin: 0 0 0.25em 0;
	  font-family: 'Delius Swash Caps', cursive;
	  font-size:3rem;
	  
	}
	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:#333300;
	  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);
	}
	main h2, aside h2{
		font-family: 'Delius Swash Caps', cursive;;
		font-size:1.6rem;
		color:#333300;
		padding-bottom:2rem;
	}
	main header h2{
		margin-bottom:1rem;}
		
	main h3, aside h3  { 
		color: #444;
		line-height: 1; 
		padding-top: 0.5em;
		border-top: 1px solid #ddd;
		margin: 1.5em 0 0.25em 0;
 
	}
	main h4, aside h4  { 
		  color: #444;
		  line-height: 1.3; 
		  padding-top: 0.5em;
		  margin: 0.5em 0 0.25em 0;
		  font-weight:bold;
		 
		}
	header .slogan{
		font-size:1.2rem;
		float:left;
	}

	
	main p, aside p { 
	  margin-top: 0; 
	  margin-bottom: 1em; 
	}
	
		
	main p.artikelinfo, aside p.artikelinfo { 
	  font-size: 13px; 
	  font-size: 0.8125rem;
	  color: #999;
	}
	main a, aside a { 
	  color: #08c; 
	  text-decoration: none; 
	}
	main ul, aside ul  {
	  list-style-image:url(bilder/eichel.png);
	  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;
}

	table th { font-weight: bold; }
	table td, table th { 
		padding: 5px 5px; 
		text-align: left;
		border:#fea72b double; 
		 }

/*Breite begrenzen und im Browserfenster zentrieren*/	
@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; 
  }
 /* Normaler Hintergrund 
  html {
    background: #ddd url("bilder/hg_body.jpg") repeat left top;
	
  }*/ 
  div.wrap { 
    overflow: hidden; 
  } 

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

} /* Ende @media */ 

/* Absatz nach links, Bild nach rechts */ 
@media screen and (min-width: 768px) {
  .startseite main header .headertext { 
    float: left; 
    width: 50%; 
  } 

  .startseite main header .headerbild { 
    float: right; 
    width: 45%;
	margin-right:2rem; 
  } 
   /*Dreispaltig gestalten*/
  .imp #a1 { float: left; width: 49%; margin: 0;}
  .imp #a2 { float: right; width: 49%; margin: 0; }

  .news main {
    float: left;
    width: 95%;
  }
  
  .imp{
	  font-size:0.8rem;}

} /* Ende @media */
/* für die Mobilgeräte */
@media screen and (min-width: 320px) and (max-width: 767px) {
	
  	.termine article img{
		width:10px;
		}  

	
	
	
	} /* Ende @media */