/*
Tests: http://quirktools.com/screenfly/ <-Achtung: bei eingabe unserer urls reload=false mitübergeben
Tablet-Hochformat:
============
KindleFire HD7: 	533x853
KindleFire: 		600x800
Samsung Galaxy Tab: 600x1024
GoogleNexus7: 		603x966
iPad1-3 + iPadMini: 768x1024
iPad4:				768x1024

Handy-Hochformat:
============
Kleinstgeräte: 				xxx
UnsereMindestbreite: 		320x...(da muss padding schon eingeplant sein, sonst ist es am iphone zu breit)
Blackberry, iPhone3+4,...: 	320x
SamsungGalaxyS3/4: 			360x...
iPhone5: 					640x1136

Key Breakpoints
several major sizes that you need to focus on more than any others:
  <480px (which applies to older, smaller smartphone screen sizes)
  <768px, which is ideal for larger smartphones and smaller tablets
  >768px, which applies for everything bigger such as large tablet screens and desktops screens.

Also, these can be used too if you’ve got the energy and time:
  <320px, which is great for older small, low res phones
  >1024px stylesheet for wide screens on desktops.
*/

@media all and (max-width:1039px) { /*mobile, alles unter ipad3 hochformat. */	
	.justDesktop {
		display: none !important;
	}
}
@media all and (min-width:1040px) {
	.justMobile {
		display: none !important;
	}
}


/*****************************************/
/* 1280
/*****************************************/
@media all and (max-width:1280px) {

	#colInhalt {
		width:63.2289%; /* 65.8634*96% */
		margin-left:2%;
		margin-right:2%;
	}

	#colRight {
		width:30.457848%; 		/* 32.7711% * 0.96 */
		margin-left:2.31325%;	/* 30:1245 * 0.96  */
	}

	#seite.windowBreite #colInhalt {
		width: 96% !important;	
	}

	#colDynPage #colInhalt
	{
		width: 96% !important;		   		/* 100% wenn kein colLeft	*/
		margin-left:2%; margin-right:2%;
		padding-right: 32.771084%;	   		/* ((395+30):1245)*96% 		*/
	}

	#colInhalt .contentWeiss {
		margin-left:-2.1%; margin-right:-2.1%;
		width:104.2% !important;
		padding-left:2%; padding-right:2%;
	}
	
	#seite > * >h1, #seite > * > h3.date {
		margin-left:2%; margin-right:2%;
	}


	/* kopfLogo */
	#kopfLogo {
		left:15px;
	}

	.tripleBox .tripleBoxSpalten div
	{
		width:100%; max-width:400px; min-width:inherit; min-height:inherit;
		margin-left:2%; margin-right:2%;
		padding:0px 0 20px 0 !important; 
	}

	.doubleBoxSpaltenXXX div {
		margin-left:0px !important;
		margin-right:0px !important;
	}

	.tripleBox .tripleBoxSpalten div > *
	{
		text-align:center;
	}

	.tripleBox:not(.transparent) .tripleBoxSpalten div
	{
		padding-top:30px !important; 
	}

	#seite.windowBreite #colInhalt .maxBreite
	{ 
		width:104% !important;
		margin-left:-2%;
		margin-right:-2%;
	}

	.picDetailContainerP {
		text-align:center;
		padding-left:2%; padding-right:2%;
	}

	#colInhalt > .halbeBreite > .loopListe.kundenstimmen > li {
		width:100%; max-width:820px;
		margin-left:0; margin-right:0;
	}

	#colInhalt > .halbeBreite > .loopListe.kundenstimmen > li.mehr {
		float:none;
	}


	.loopTeaserSlider .flexslider {
		width: 100%;
	}
	.loopTeaserSlider h1 {
		width:100%; height:70px;
		padding:2%;
	}

	#seite.windowBreite #colInhalt .maxBreite,
	#seite.windowBreite #colInhalt .doubleLoop	
	{ 
		width:100% !important;
		margin:0;
	}

	#colInhalt .doubleLoop .loopMitAbstand {
		width:100%; margin-left:0; margin-right:0;
		max-width:820px;
	}

	#colInhalt .doubleLoop .loopKundenstimmenSlider {
		width:100%; margin-left:0; margin-right:0;
		max-width:820px; 
	}

	.loopKundenstimmenSlider .slides li,
	.loopKundenstimmenSlider .slides li .back_hi
	{
		height:380px;
	}

	.loopKundenstimmenSlider .slides .loopText p {
		font-size:1.8em;
	}

	p.maxBreite .picDetailContainer
	{
		margin:1.17647% 1.17647% 30px 1.17647%;
	}

	#seite.windowBreite #colInhalt h2.lead {
		margin-bottom:20px;
	}

	.singleBox 
	{
		margin:15px auto 15px auto;
		max-width:820px !important;
	}


	/* FUSSNAVIGATION */

	#fussNavigationSpalten {
		max-width:820px; width:90%; padding-top:80px;
	}
	
	#fussNavigationSpalten h2, #fussNavigationSpalten p, #fussNavigationSpalten label {
		font-size:1.8em; line-height:1.33em;
	}

	#fussNavigation {
		padding-bottom:60px;
	}
	
	#fussNavigation #fussNavigationSpalten label span.titel {
		font-size:0.88em;
	}

	#fussNavigationSpalten .spalte1,
	#fussNavigationSpalten .spalte2,
	#fussNavigationSpalten .spalte3
	{
		float:left; width:100%;
		text-align:left;
		min-height:480px;
		float:none; clear:both; margin:auto 0 auto 0;
	}

	#fussNavigationSpalten .spalte1 a {
		clear:both; margin-bottom:30px;
	}
	#fussNavigationSpalten a div:nth-of-type(1) {
		width:15%; margin:0;
		font-size:18px;
	}
	#fussNavigationSpalten a div:nth-of-type(2) {
		height:120px;
		width:85%; margin:0;
	}

	#fussNavigationSpalten .spalte3 p {
		text-align:left; padding-top:30px;
	}
	#fussNavigationSpalten .spalte3 p span {
		width:auto; display:inline; float:none; margin-right:5px; padding:0;
	}
	#fussNavigationSpalten .spalte3 a div:nth-of-type(1) {
		display:none;
	}

	/* SITEMAP */
	#fussZeile #fussSitemap {
		padding-bottom:25px;
		height:800px;
	}

	#fussZeile #fussSitemap #fussSitemapSpalten .spalte1,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte2,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte3
	{
		float:none; clear:both; width:100%;min-height:inherit;
		margin:0 0 24px 0; 
	}

}


/*****************************************/
/* 1120
/*****************************************/

@media all and (max-width:1120px) {
	.tripleBox .tripleBoxSpalten div {
		clear:both; float:none; display:block;
		margin:10px auto 10px auto;
	}

	.tripleBox.transparent .tripleBoxSpalten div,
	.doubleBox.transparent .doubleBoxSpalten div
	{
		margin:10px auto 10px auto !important;
	}

	.doubleBox .doubleBoxSpalten div, 
	.doubleBox.transparent .doubleBoxSpalten div 	
	{
		clear:both; float:none; display:block;
		width:100%;
	}

}

/*****************************************/
/* 1040
/*****************************************/
@media all and (max-width:1040px) {

	/* kopfLogo */
	#kopfLogo {
		position:absolute; left:10px; top:0; width:185px;
	}
	
	#navMain {
		width:100%;
	}

	#seite {
		margin-top:90px;
	}
	
}

/*****************************************/
/* 950
/*****************************************/

@media all and (max-width:950px) {

	.loopBildTextSlider	.flexslider li div.loopText,
	.loopTeaserSlider .flexslider li div.loopText,
	.loopTextSlider .flexslider li div.loopText
	{
		width:100%; margin:0; padding:0;

		/* #umbau maskAnimation */
		position: absolute;
		color: #000;
		z-index: 100;
		left: 0;

		top:0px;
		padding-top:calc(100% - 63px);
		height:550px;

	}

}


/*****************************************/
/* 900
/*****************************************/

@media all and (max-width:900px) {

	.doubleBoxSpalten div {
		width:100%; margin-left:0 !important; margin-right:0 !important;		
	}

	.doubleBox .doubleBoxSpalten div {
		max-width:none;
	}

}




/*****************************************/
/* 859
/*****************************************/
@media all and (max-width:859px) {

	html {
		font-size:58%;
	}

	.tripleBoxSpalten div {
		margin-left:0px; margin-right:0px;
	}

	#colInhalt p.maxBreite {
		padding:0px;
	}

	.loopBildTextSlider .flexslider .mask:hover .loopText,
	.loopKundenstimmenSlider .flexslider .mask:hover .loopText,
	.loopTeaserSlider .flexslider .mask:hover .loopText
	{
		/* Keine Animation */
		-moz-transform: translateY(0px);
		-o-transform: translateY(0px);
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	
	}

	#colInhalt {
		width: 100% !important;
		padding-right:0px !important;
	}

	#colRight {
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
	}


}

/*****************************************/
/* 820
/*****************************************/
@media all and (max-width:780px) {
	
	#colDynPage #colInhalt {
		padding-right:0;		
	}

	#colDynPage #colInhalt .picDetailContainer	{
		float:none;
	}

	#fussNavigationSpalten a div:nth-of-type(1) {
		width:20%;
	}
	#fussNavigationSpalten a div:nth-of-type(2) {
		width:80%;
	}

	.loopKundenstimmenSlider .slides li,
	.loopKundenstimmenSlider .slides li .back_hi
	{
		height:360px;
	}


}

/*****************************************/
/* 660
/*****************************************/
@media all and (max-width:660px) {

	.picDetailContainer {
		float: none; width: 100% !important; 
		margin:20px 0 20px 0; display:block;
		padding: 0;
	}

	.picDetailContainer.videoRelative {
		position: relative; padding-top: 56.22%; /* 1275:341 */
	}

	p.maxBreite .picDetailContainer
	{
		margin:1.17647% 0 30px 0;
	}

}


/*****************************************/
/* 560
/*****************************************/
@media all and (max-width:560px) {

	html {

	}

	.loopListe li div.loopText h2 {
	/*	font-size:1.5em; */
	}

	#fussNavigationSpalten a div:nth-of-type(1) {
		width:20%;
	}
	#fussNavigationSpalten a div:nth-of-type(2) {
		width:80%; 
	}

	.loopListe.kundenstimmen > li,
	.loopKundenstimmenSlider .slides li a {

		background-size:16%;
		background-position:15px 25px;
	}
	.loopListe.kundenstimmen > li.mehr {
		background-size:auto;
	}

	.kundenstimmen p .picDetailContainer {
		width: 240px;
		height: 180px;
		margin: -60px 0 0 0;
	}

	.kundenstimmen .picDetailContainer .mask {
	
		width: 180px;
		height: 180px;
		border-radius: 100%;
		border: 3px solid #FFF;
		float: none;
		margin: 0px auto 0px auto;
	
	}
	.kundenstimmen .mask .picDetail {
	
		width: 267px;
		margin-left: -40px;
	
	}

}


/*****************************************/
/* 500
/*****************************************/
@media all and (max-width:500px) {

	#fussNavigationSpalten a div:nth-of-type(1) {
	  -ms-transform: scale(0.7, 0.7); /* IE 9 */
	  -webkit-transform: scale(0.7, 0.7); /* Safari */
	  transform: scale(0.7, 0.7);
	  transform-origin: top left;
	}

	#fussNavigationSpalten a div:nth-of-type(2) {
		margin-bottom:10px;
	}
}

/*****************************************/
/* 460
/*****************************************/
@media all and (max-width:460px) {

	html {
		font-size:50%;
	}

	p.highlight a,
	.anmeldeform .button, a.button {
		width:95%; margin-left:2.5%; margin-right:2.5%;
		padding-left:10px; padding-right:10px;
		font-size:13px; white-space:normal; overflow:hidden;
	}

	#colInhalt .loopStartBoxes > ul > li {
		width:300px; height:225px !important;
		margin-left:10px; margin-right:10px;
	}

	.loopStartBoxes .loopListe li div.loopText {
		top:-70px;
	}

	.loopListe li div.loopText h2 {
		margin:10px;
	}
	.loopListe:not(.kundenstimmen):not(.startseite) li .loopText p {
		display:none;
	}


	#fussNavigationSpalten a div:nth-of-type(1) {
		width:30%;
	}
	#fussNavigationSpalten a div:nth-of-type(2) {
		width:70%; 
	}

	#fussNavigationSpalten a div:nth-of-type(2) h2,
	#fussNavigationSpalten a div:nth-of-type(2) p
	{
		font-size:1.6em;
	}

	.tripleBox .tripleBoxSpalten div {
		padding:0px 2% 20px 2% !important; 
	}

	.tripleBox.transparent .tripleBoxSpalten div,
	.doubleBox.transparent .doubleBoxSpalten div
	{
		width:100%; max-width:300px;
	}

	#seite > .kundenstimmen {
		background-image:none;
	}

}