@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 - Ondrej Kovac
   ---------------------------------------------------------*/
		
	/* Überschriften und Fließtext gestalten */ 
	html {
	font-family: 'Amaranth', Arial, sans-serif;
	font-size: 100%;
	/*background-image: -moz-linear-gradient(top, #ce9d55, #fdeba4);
	background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #ce9d55), color-stop(1, #));
	background-image: linear-gradient (top, #ce9d55,#fdeba4);
	background-image:url(../bilder/hg_hand.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;
	  }
	
 /*  Seitenbreite begrenzen - bis Media Queries kommen)  */
 
 	body{
		color:#414141;      /*Orginalfarbe war 103152*/
		margin:0 auto;
		position:relative;
		background-image:url(../bilder/durchsichtig_weiss90.png);
		
				
		}	
		
/*  Kopf- und Fußbereich einfärben  */	
	header[role="banner"],
	footer[role="contentinfo"]{
		color:#414141;
		background-color:white;
		}
		
	footer[role="contentinfo"]{
		background-color:#fcdc50;
		color:#414141;}	
	
		
/*  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: #414141; 
	  line-height: 1; 
	  padding: 0 0 0 4rem;
	  margin: 0 0 0.25em 0;
	  font-family: 'Amaranth', cursive;
	  font-size:2rem;
	  
	}
	
	header[role="banner"] h2 {
	  color: #414141; 
	  line-height: 1; 
	  padding: 0 0 0 8rem;
	  margin: 0 0 0.25em 0;
	  font-family: 'Amaranth', 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:#39200a;
	  text-decoration: none;  
	}
	footer[role="contentinfo"] address {
	  color:#39200a;
	  text-decoration: none;  
	}
/* Padding für Layoutbereiche */ 
	header[role="banner"] , 
	nav[role="navigation"], 
	div[class="wrap"],  
	footer[role="contentinfo"] {
	  padding: 1em;
	}
/* Gestaltung Artikel */ 
	article {
		padding-top:1.5em;
		padding-bottom:1em;
		padding-left:1em;
		padding-right:1em;
		
		}
	.hell{
		background-color:#fcdc50;
		
		}
	.dunkel{
		background-color:#97b53c;
		
		}
	#text{
		background-color:#FFC;
		padding:3em;
		margin:3em;
		max-width:500px;
		}
	 
/*  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;
		
		}
		#klein{
	font-size:.7em;
	background-image:url(../images/transparent.png);
	font-family:Verdana, Geneva, sans-serif;
	padding:1em;
	background-color:#FFC;}
	
	main h2, aside h2{
		font-family: 'Amaranth',san serif;
		font-size:1.5rem;
		color:#414141;
		padding-bottom:0.2rem;
	}
		
	main h3, aside h3  { 
		line-height: 1;
		color:#103152;
		font-family: 'Amaranth',san serif; 
		margin: 0.5em 0 0.3em 0;
	}
	.fachbereiche h3{
		color:#000;
		font-family: 'Amaranth',san serif;
		font-weight:400;
		font-size:1.2em;
			}
		
	
	main p, aside p { 
	  margin-top: 0; 
	  margin-bottom: 1em; 
	}

	main a, aside a { 
	  color: #08c; 
	  text-decoration: none; 
	}
	
	
	.bildlinks{
		float:left;
		padding: 3px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.bildrechts{
		float:right;
		padding: 3px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.fb{
	padding: 0.5em;
	margin: 1em;
	border: none;
	background-color: #FFC;
	
}
	.oben_text{
		float:right;
		padding: 3px;
		padding-right:4em;
		margin-left: 5px;
		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: 1200px; 
   box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  
  }
 
  
  div.wrap { 
    overflow: hidden;
	
  } 

  footer[role="contentinfo"] {
    clear:both;
  } 
  .startseite main header .headertext,
  .behandlung main header .headertext { 
    float: left; 
    width: 70%; 
  } 
  .startseite main header .headerbild,
  .behandlung main header .headerbild { 
    float: right; 
    width: 25%;
	margin-right:1rem;
	
  } 
  #links   { 
    float: left; 
    width: 28%;
	padding-right:4em;
	
  }
   #rechts   { 
    float: right; 
    width: 28%; 
  }
  
  #bildermittig{
	  margin: 0 1em 0 1em;
		  
	  }
			 
	#links #unter,
	#rechts #unter{
		padding-top:270px;}
			 
li {
	list-style-position:outside;
	margin-left:-1.7em;
	list-style-type: disc;
}
  
   span.bildtext{
	display:block;
	margin-top:1em;
	text-align:center;
	font-size:1.3em;
	width:25em;
	color:#000;
		}
.streifen{
		height:10px;
		background-color:#fcdc50;}
 .behandlung main header .headertext{
	 background-image:url(../bilder/durchsichtig2.png);}  
 .behandlung main header .headerbild{
	 	float: right; 
    	width: 47%;}   

	.behandlung main header .headertext{
	 	float:left; 
    	width: 47%;}  
/*   Bildwechsler  */
main {
  background: transparent;
  border-color: transparent;
}
#gallery {
  position:relative;
  color:#FFF;
}

#gallery figure {
	position: absolute;
	top: 19px;
	left: -5px;
	z-index: 1;
}

#gallery figcaption {
  position: absolute;
  left: 1em;
  bottom: 0.5em;
  z-index: 2;
}
#gallery figure {
  animation: wechseln 15s infinite;
}
@keyframes wechseln {
    0% {opacity: 1;}
   25% {opacity: 1;}
   40% {opacity: 0;}
   92% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes wechseln {
    0% {opacity: 1;}
   25% {opacity: 1;}
   40% {opacity: 0;}
   92% {opacity: 0;}
  100% {opacity: 1;}
}

#gallery figure:nth-of-type(2) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
#gallery figure:nth-of-type(1) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}
/*Bildwechsler Ende*/



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

	body{}
	
	
	} /* Ende @media */

	.rot {
	color: #C00;
}