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




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

	.just1000 {
		display: none !important;
	}

	#kopfBuchen #buchenformular input {
		min-width:0; 
		width:120px;
	}

	#kopfZielgruppen #zielgruppenAngebote li a {
		width:175px;
	}

	/* loopStartBoxes */
	.loopStartBoxes .mask, .loopStartBoxes .loopListe li .mask {
		height:150px;
	}
	.loopStartBoxes .bausteinGruppe > *,
	.loopStartBoxes ul > *  { 
		min-height:300px;
	}
	.loopStartBoxes .mask .picPreview {
		margin-top:-20%;
	}

	/* vgl. auch royalslider-mediaqueries */

}



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

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

	/* loopStartBoxes */
	.loopStartBoxes .mask, .loopStartBoxes .loopListe li .mask {
		height:130px;
	}
	.loopStartBoxes .bausteinGruppe > *,
	.loopStartBoxes ul > *  { 
		min-height:260px;
	}

}



@media all and (min-width:768px) {
	/* ZoomInEffekt bei StartBoxe & loopListe */
	.loopStartBoxes a:hover img, .loopListe a:hover img {
		margin:0 auto 0 auto; 
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1));
		transform: scale(1.1);
	}
}

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

	/* bisDatum entfernen */
	#kopfBuchen #bisDatum {
		display:none;
	}

}

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

	/* Zielgruppen entfernen -> Hauptnavigation */
	#kopfZielgruppen {
		display:none;
	}


	/* loopStartBoxes */
	.loopStartBoxes .mask, .loopStartBoxes .loopListe li .mask {
		height:130px;
	}
	.loopStartBoxes .bausteinGruppe > *,
	.loopStartBoxes ul > *  { 
		min-height:270px;
	}
	.loopStartBoxes .mask .picPreview {
		margin-top:-15%;
	}

}

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

	/* direktBuchen weg, da Seite nicht responsive */
	#kopfBuchen .direktBuchen:link {
		display:none;
	}

	/* loopStartBoxes */
	.loopStartBoxes .mask, .loopStartBoxes .loopListe li .mask {
		height:120px;
	}
	.loopStartBoxes .bausteinGruppe > *,
	.loopStartBoxes ul > *  { 
		min-height:280px;
	}

}



@media all and (min-width:501px) AND (max-width:650px) {

	/* .loopStartBoxes h2 */
	.loopStartBoxes .loopListe li div.loopText h2 {
		font-size:1.5em;
	}
	.loopStartBoxes .mask .picPreview {
		margin-top:-7%;
	}
	
}


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

	/* FONT-SIZE */
	body.fontswitchNormal {
		font-size: 50%;
	}

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

	/* SPRACHE */
	#topNavigation {
		padding-top:0px;
		height:30px;
		text-align:right;
	}
	#topNavigation #sprache {
		margin:0px; padding-top:10px; 
		width: auto;
	}
	#topNavigation #sprache li {
		float:none; margin: 0 1px 0 1px;
		display:inline;
	}
	#topNavigation #sprache a {
		padding:10px;
	}
	#topNavigation #sprache li.navHi {
		/* display:none; */
	}

	/* LOGO & TITEL */
	#kopfLogoTitelLage {
		min-height:0;
	}
	#kopfLogo {
		float:left; width:30%; padding-left:3px; 
		display:block;
	}
	#kopfLogo img {
		width:100%; margin-bottom:5px;
	}
	#kopfTitel {
		float:left;
		width:70%;
		display:block;
	} 
	#kopfTitel h1 {
		/* font-size:1.7em; line-height:1.2em; */
		margin-bottom:5px;
	}
	#kopfTitel img {
		width:70px;
	}
	#kopfTitel span {
		font-size: inherit;
		font-weight: 600;
		line-height: inherit;
		text-align: center;
	}

	/* LAGE, BUCHEN */
	#kopfLage {
		display:none;
	}
	#kopfBuchen {
		display:none;
	}


	/* 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%;
	}

	/* SEITE, COLINHALT, COLRIGHT */
	#seite #seitencontent {
		margin-top:-30px;
		padding-bottom:20px;

		background:#FFF; /* http://www.css3generator.in/css-gradient.html */
		background: linear-gradient(270deg, rgba(255, 255, 255, 0.7)0%, rgba(255, 255, 255, 1)30px);
		background: -moz-linear-gradient(270deg, rgba(255, 255, 255, 0.7)0%, rgba(255, 255, 255, 1)30px);
		background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0.7)0%, rgba(255, 255, 255, 1)30px);
		background: -o-linear-gradient(270deg, rgba(255, 255, 255, 0.7)0%, rgba(255, 255, 255, 1)30px);
	}

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

	#colRight {
		clear:both; width:100%; margin:0;
	}

	/* STARTBOXES */
	.loopStartBoxes .bausteinGruppe > *,
	.loopStartBoxes ul > *,
	.loopStartBoxes .bausteinGruppe > *:nth-child(3n+2),
	.loopStartBoxes ul > *:nth-child(3n+2) {	
		float:none; clear:both;
		width:100%; margin:0;
		min-height:auto;
	}

	.loopStartBoxes .bausteinGruppe > *,
	.loopStartBoxes .bausteinGruppe > *:nth-child(3n+2)
	{ 
		margin-bottom:26px;
	}

	.loopStartBoxes .loopListe li .linkersatz,
	.loopStartBoxes .loopListe li a,
	.loopStartBoxes .bausteinGruppe > *
	{
		min-height: auto; /* padding-bottom:10px; */
	}

	.loopStartBoxes .mask, .loopStartBoxes .loopListe li .mask {
		height:150px;
	}


	/* LOOPS normal */
	.loopListe li .linkersatz, .loopListe li > a, .textbaustein, .textbaustein a {
		min-height:auto;
	}

	.loopListe li .mask {
		height:  22.943%;
	}


	/* FOTOALBUM */
	.picGalerie	ul li,
	.picGalerie	ul li.last {
		width:100%; padding:0px;
		margin-bottom:26px;
		max-width:none;
	}


	/* PLATZIERTE FOTOS */
	.picDetailContainer{
		display:block;
		clear: both; float: none;
		padding: 0; margin:0;
		width: 100%; height:auto; 
		text-align:center;
		/* overflow:auto; */
	}

	.picDetailContainer img {
		width:100%; margin: 0 auto 0 auto;
		max-width:350px;
	}

	.picDetailContainer .picMini {

		width: 45.886075%; /* 145:316 */
		margin: 0 0 15px 0;
	}



	.picDetailContainer .picDetail {
		float:none;
	}

}

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

	#kopfTitel h1 {
		font-size:1.7em; line-height:1.2em;
	}

}