/*
##################################
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:879px) { /*mobile, alles unter ipad3 hochformat. */	
	.justDesktop {
		display: none !important;
	}
}
@media all and (min-width:880px) {
	.justMobile {
		display: none !important;
	}
}

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

	}

	#socialnet a {
		position: absolute; top: -20px; right: 0px; 
		width:240px; height:69px; border-radius:0px;
		padding-top:20px;
		background:#ffcc00;
		border: 0 none;
		text-align:center;
	
		font-size:1.5em; line-height:24px;
	
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		
	}

	#socialnet a:hover, #socialnet a:active {
		top: -20px; right:0; 
	}


}

/*****************************************/
/* < 1130px
/*****************************************/
@media all and (max-width:1150px) {
	#seite {

	}
}

/*****************************************/
/* < 1120px
/*****************************************/
@media all and (max-width:1120px) {
	.loopStartBoxes {
		width:100%; margin-left:0; margin-right:0;
	}
}

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

	.loopMitAbstand.halb {
		width:100%;
		margin:0 0 40px 0;
	}

	.loopOhneAbstand.halb, .loopMitAbstand.halb {
		min-height:0;
	}

	.loopOhneAbstand.halb:nth-child(2n+1),
	.loopMitAbstand.halb:nth-child(2n+1)
	{
		margin-right:0 !important;
	}

}



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

	#seite {
		padding:0 10px 0 10px;
	}

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


}

/*****************************************/
/* < 1030 TABELLE
/*****************************************/
@media all and (max-width:1030px) {

	#fussZeile .fussSitemap {
		padding:10px; padding-top:30px;
	}

	#fussZeile .fussSitemap2 {
		padding:10px;
	}


}

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

	#fussZeile .fussSitemap .fussSitemapSpalten .spalte1,
	#fussZeile .fussSitemap .fussSitemapSpalten .spalte2
	{
		width: 45%;
		margin-right: 0; margin-bottom:30px;
	}

	#fussZeile .fussSitemap .fussSitemapSpalten .spalte3 {
		width:300px; margin:0 auto 0 auto;
	}


	#fussZeile .fussSitemap2 .fussSitemapSpalten .spalte1,
	#fussZeile .fussSitemap2 .fussSitemapSpalten .spalte2,
	#fussZeile .fussSitemap2 .fussSitemapSpalten .spalte3 {
		width:100%; text-align:center; display:block;
		margin-right: 0;
	}

}

/*****************************************/
/* < 650 TABELLE
/*****************************************/
@media all and (max-width:650px) {

	#glocken td {
		display:block; width:20%; float:left;
	}

	#glocken td:nth-child(2) {
		display:block; width:40%; float:left;
	}

	#glocken td:nth-child(5) {
		width:100%; padding:0;
	}

	#glocken tr:first-child td:last-child {
		display:none;
	}

}

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

	.loopStartBoxes .bausteinGruppe li, .loopStartBoxes .loopListe li {
		margin: 0 auto 50px auto;
	}

	table.preise thead th,
	table.preise td	
	{
		font-size:1.2em;
		padding:8px;
	}

	table.preise td:first-child,
	table.preise th:first-child	
	{
		width:auto;
	}

	table.preise th.titKategorie1 {
		width:auto;
	}

	table.preise th.titKategorie2 {
		width:auto;
	}

	table.preise th.normal {
		border-bottom:0;
	}

	table.preise th.rabatt {
		width:100%; display:block;
		padding-top:0px; padding-left:0px;
	}

	table.preise th.normal,
	table.preise td.normal {
		width:100%; display:block;
		padding-left:0;
		border-bottom:0;
	}
	table.preise td.rabatt {
		padding-top:0px;
	}

}



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

	/* Sticky navMain */
	#stickyNav.sticky #navMain {
		top:74px; background:#000;
	}

	#stickyNav.sticky #kopf #kopfLogo {
		width:45px; height:auto; top:5px;
	}

	#kopfRoyalSlider.stickyResize {
		margin-top:120px !important;
	}

}




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

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

	#colRight {
		clear:both;
		width:100%;
		margin:0; text-align:center;
	}

	#colRight .loopOhneAbstand, #colLeft .loopOhneAbstand {
		padding:15px 1.86916% 0 1.86916%;
	}

	/* 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:330px;
		text-align:center;
	}

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

	#sieSindHier, #sieSindHierBottom p {
		font-size:14px !important; margin-top:10px;
	}


	/* Loop auf halber Seitenbreite */
	.loopOhneAbstand.halb, .loopMitAbstand.halb, .halbSpalte1, .halbSpalte2
	{
		display:inline;
		width: 100%; margin-right:0;
		text-align:left !important;
		margin-bottom: 10px;
	}

	#colInhalt.ganzeBreite .loopOhneAbstand.halb h1, 
	#colInhalt.ganzeBreite .loopMitAbstand.halb h1 
	{
		text-align:center;
	}


}

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

	#fussZeile .fussSitemap .fussSitemapSpalten .spalte1,
	#fussZeile .fussSitemap .fussSitemapSpalten .spalte2,
	#fussZeile .fussSitemap .fussSitemapSpalten .spalte3
	{
		width:100%;
		padding:0; margin-top:20px;
		text-align:center;
	}
}


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


	#TheSlider .slideFrame .slidePicCopyright {
		font-size:1em !important;
	}



}


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


	.loopStartBoxes .bausteinGruppe > *,
	.loopStartBoxes .loopListe > *,
	.loopStartBoxes ul > * 	
	{ 
		min-width:0;
		width:300px;
	}


	#fussZeile #fussTeaser #fussTeaserFacebook,	
	#fussZeile #fussTeaser #fussTeaserLage,	
	#fussZeile #fussTeaser #fussTeaserLinks
	{
		width:300px !important; 
		display:inline-block; vertical-align: top;
		margin:20px 10px 20px 10px; 
	}

	#fussZeile #fussTeaser #fussTeaserLinks img {
		width:300px; 
	}

}