/*
##################################
NICHT WUNDERN: issues with media screen an different browsers...
##################################
  Firefox & Webkit based browsers render the scrollbar differently. 
  In Firefox, MediaQuery considered width of scrollbar which is 15px with the screen width, but in Webkit based browsers it's not considered scrollbar with the screen width.
  Daher werden gewisse Media-Queries in den Browsern unterschiedl. umgebrochen bzw. ResponsiveMegaMenü reagiert unterschiedl. früh
  
  
  
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:1199px) { /*mobile, alles unter ipad3 hochformat. */	
	.justDesktop {
		display: none !important;
	}
}
@media all and (min-width:1200px) {
	.justMobile {
		display: none !important;
	}

	#navLoginMobile {
		display: none !important;
	}

}

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

	#sieSindHier, 
	#sieSindHierBottom,
	#sieSindHierBottomV2	
	{
		max-width:1200px;
		padding-left:45px;
		background-position: 10px 27px;
	}

	#seite
	{
		/* max-width: 1100px; */
		padding:0 10px 0 10px;
	}
	#kopfLogo {
	/* margin-left:10px; */
	}
	#navLogin {
	/* margin-right:10px; */
	}

	#fussZeile #fussSitemap {
		padding-left:10px;	
	}

}


/*****************************************/
/* 1199px
/*****************************************/

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

	#stickyContainer {
		height:90px;/*  background:#e4011f; */
		opacity:0.9;

		background-size: cover;
		background-image: url(../pic/nav-bg.jpg);

	}

	#stickyContainer.no_slider {
		/* background: #e4011f; */

		background-size: cover;
		background-image: url(../pic/nav-bg.jpg);


	}


	#kopfLogo {
		width:150px; height:78px; padding:10px;
		position:fixed; z-index:30000;
		-webkit-box-shadow: 5px 5px 13px 0px rgba(0,0,0,0.35);
		-moz-box-shadow: 5px 5px 13px 0px rgba(0,0,0,0.35);
		box-shadow: 5px 5px 13px 0px rgba(0,0,0,0.35);
	}
	#kopfLogo img {
		width:80%; height:auto;
	}

	#kopfNavigation {
		clear:both; width:100%;
	}
	#navMain {
		width:100%;top:50px; margin-top:0px;
	}

	#navTop {
		display:none;
	}

	#navTopMobile {
		display:block;
		position:absolute; top:12px; right:0px; width:250px;
		text-align:right;
		z-index:15000;
		height:35px;
	}

		#navTopMobile a:link, #navTopMobile a:visited {
			float:right; display:block; height:30px;
			font-family:"Source Sans Pro",Arial,Helvetica, sans-serif;
			font-size:15px; margin:0 8px 0 8px;
			text-decoration:none;
			color:#FFF;
		}
		#navTopMobile a:hover, #navTopMobile a:active {
			color:#000;
		}

		#navTopMobile span {
			float: left;
			display: block;
			padding: 7px 0 8px 5px;
			font-size: 15px;
		}

		#searchLink .material-icons {
			display:block; float:left;
		}

}


/*****************************************/
/* 1000px
/*****************************************/

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

	.just1000 {
		display: none !important;
	}

	/* Schriftgröße allgemein */
	body, body.fontswitchNormal {
		font-size: 58%;
	}

	/* vgl. auch royalslider-mediaqueries */



}



@media all and (max-width:899px) {
	#kopfNavigation {
	}

	#kopfSucheUndNavigation {
	}


}

/*****************************************/
/* 880px (768px)
/*****************************************/

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


	#kopfLogo {
	}
	#kopfLogoTopNav {

	}
	#kopfDblPartner {
	}
	
	.loopStartBoxes:not(.vier) .bausteinGruppe > *:nth-child(3n+2), .loopStartBoxes:not(.vier) ul > *:nth-child(3n+2) {
		margin-left: 0;
		margin-right: 0;
	}
	.loopStartBoxes:not(.vier) .bausteinGruppe > *:nth-child(3n+1), .loopStartBoxes:not(.vier) ul > *:nth-child(3n+1) {
		clear: none;
	}
	.loopStartBoxes:not(.vier) .bausteinGruppe > *:nth-child(2n+1), .loopStartBoxes:not(.vier) ul > *:nth-child(2n+1) {
		clear:both;
		margin-right:2.6%; /* 26:1000 */
	}
	.loopStartBoxes:not(.vier) .bausteinGruppe > *, .loopStartBoxes ul > * 
	{
		width: 48.7%; /* 487:1000 */
	}

	#indexfilter .selectAndButton {
		margin-left: 0;
	}

	#indexfilter .selectAndButton {
		width:100%;
	}

	#indexfilter #filteranwenden {
		max-width:100px;
	}

	#fussZeile #fussSitemap #fussSitemapSpalten .spalte1,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte2,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte3,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte4
	{
		font-size:1em; line-height:24px;
	}


	.responsiveMapsContainer { /*iFrame Anfahrt*/
		padding-bottom: 45%; /* Höhe Map*/
	}

	.doubleLoop {
		width:100%; margin-left:0px; margin-right:0px;
	}

	.doubleLoop .loopOhneAbstand, 	.doubleLoop .loopOhneAbstand {
		width:100%; margin-left:0; margin-right:0;
	}

	.ganzeBreite ul.loopListe {
		float:left;
	}

}

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

	/* Schriftgröße allgemein */
	body, body.fontswitchNormal {
		font-size: 58%;
	}

}


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

		#fussZeile #fussSitemap #fussSitemapSpalten .spalte1,
		#fussZeile #fussSitemap #fussSitemapSpalten .spalte2,
		#fussZeile #fussSitemap #fussSitemapSpalten .spalte3,
		#fussZeile #fussSitemap #fussSitemapSpalten .spalte4
		{
			float:left; width:50%;
			text-align:left; margin-bottom:24px;
		}
	.loopStartBoxes .bausteinGruppe > *, .loopStartBoxes ul > *,
	.loopStartBoxes .loopListe li .linkersatz, .loopStartBoxes .loopListe li a {
		min-height:inherit;
	}

	#fussZeile #fussZertifizierungen img {
		width: 65px;
	}
}


/*****************************************/
/* 734px Mobiles Responsive Menue
/*****************************************/

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

	#kopf .kopf_slider {

	}

	.search-active .search-input {
		max-width:400px;
	}

}

@media all and (max-width:715px) {
	.loopStartBoxes .mask, .loopStartBoxes .loopListe li .mask {
/*
		height: 170px !important;
*/
	}
}



/*****************************************/
/* 700px
/*****************************************/
@media all and (max-width:700px) { /*mobile, alles unter ipad3 hochformat. */

	h1 {
		font-size:3em; line-height:1.2em;
	}


	/* SIE SIND HIER, FUSSZEILE */
	#sieSindHier a,
	#sieSindHierBottom a {
		padding-top: 3px; padding-bottom: 3px;
		display: inline-block;
		font-size:1em;
	}

	#sieSindHier .dot, #sieSindHierBottom .dot {
		padding-top: 3px; padding-bottom: 3px;
	}

	#fussZeile #fussPartner img {
		margin:3px 5px 3px 5px;
		height:50px;
	}
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte1,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte2,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte3,
	#fussZeile #fussSitemap #fussSitemapSpalten .spalte4
	{
		float:none; width:100%;
		font-size:1em; line-height:24px;
	}

	/* SEITE, COLINHALT, COLRIGHT */
	#seite #seitencontent {
	}

	#colInhalt, #colDynPage #colInhalt {
		padding-right: 0;
		width: 100%;
	}

	#colRight {
		clear:both; width:100%; margin-top:26px; margin-left:0;
	}




	/* PLATZIERTE FOTOS */
	#colRight .picDetailContainer,
	#colInhalt .picDetailContainer	
	 {
		display:block;
		clear: both; float: none;
		padding: 0;
		margin: 0 auto 0 auto;
		width: 100%; height:auto; 
		max-width:376px;
		text-align:center;
	}

	#colInhalt .picDetailContainer .picDetail,
	#colRight .picDetailContainer .picDetail {
		width:100%;
		float:none;
	}

	#colRight .picDetailContainer .picMini {
		max-width:162px;
	}

	/* vier */
	.loopStartBoxes.vier .bausteinGruppe > *, .loopStartBoxes.vier ul > * {
		width:48.676%; /* 331:680 */
		margin-left: 0;
		margin-right: 0;
	}
	.loopStartBoxes.vier .bausteinGruppe > *:nth-child(2n+1), .loopStartBoxes.vier ul > *:nth-child(2n+1) {
		clear:both; margin-right:2.3%; /* 18:680 */		
	}


}








/*****************************************/
/* 700px
/*****************************************/

@media all and (max-width:400px) {
	
	#kopfLogo {
		/*nur bei altem Logo nötig*/
	}
	#kopfDblPartner {
	}

	.loopStartBoxes .bausteinGruppe > *:nth-child(3n+2), .loopStartBoxes ul > *:nth-child(3n+2) {
		margin-left: 0;
		margin-right: 0;
	}
	
	.loopStartBoxes .bausteinGruppe > *:nth-child(3n+1), .loopStartBoxes ul > *:nth-child(3n+1) {
		clear: none;
	}
	
	.loopStartBoxes .bausteinGruppe > *:nth-child(2n+1), .loopStartBoxes ul > *:nth-child(2n+1) {
	clear:both;
	margin-right:0;
	}
	.loopStartBoxes .bausteinGruppe > *, .loopStartBoxes ul > * {
		width: 100%; /* 487:1000 */
	}

	.loopStartBoxes .bausteinGruppe > *, .loopStartBoxes ul > *,
	.loopStartBoxes .loopListe li .linkersatz, .loopStartBoxes .loopListe li a {
		min-height:inherit !important;
	}

	/* vier */
	.loopStartBoxes.vier .bausteinGruppe > *, .loopStartBoxes.vier ul > * {
		clear:both;
		width:100%;
	}

	.responsiveMapsContainer { /*iFrame Anfahrt*/
		padding-bottom: 80%; /* Höhe Map*/
	}


	/* updates interne Bilder */
	.ganzeBreite .internzoom, .ganzeBreite .noInternzoom {
		width:100%;
		margin: 1.0204% 0 1.0204% 0;
	}
	
	/* #pseudoClassHasAlternative --> parent() in inc_javascript_und_css_seitenende.asp , */
	.parentParagraphImg {
		margin-left: 0px; margin-right: 0px;
	}

	/* #pseudoClassHasAlternative --> parent() in inc_javascript_und_css_seitenende.asp */
	.parentParagraphImgGanzeBreite {
		margin-left:0; margin-right:0;
	}

}

@media all and (max-width:360px) {
	
	#kopfLogo {
		/*nur bei altem Logo nötig*/
	}
	#kopfDblPartner {
	}
}