/* General Responsive Styles
------------------------------*/
html {
	/* verhindert Auto-Schriftskalierung im Landscape-Modus für iPhone  */
	-webkit-text-size-adjust: none;
}




/* Tablet portrait, Small tablet landscape
   - Deaktivierung Eyecatcher
   - SunAni: linksbündig, verkleinert;
   - Über rechten verfügbaren Bereich zentrierte Navi's (Main, Sub, Lang)
   - HeadNavis leicht vergrößert
   - Zentrierte FootNav
   - ImageWraps außerhalb von Texten auf volle Breite
---------------------------------------------------_______---------------*/
@media screen and (max-width: 1023px) {
		
	/* Allgemeine Styles */
	.hideifmobile {
		display: none !important;
	}

	#container {
		width: auto;
		overflow: hidden;
	}


	/* Head Styles */
	#headArea {
		position: relative;
		height: auto;
		min-height: 100px;
		padding: 40px 0 40px 0;
	}

	#headEyecatcher {
		position: absolute;
		top: 0;
		left: 10px;
		width: 180px;
		height: 180px;
	}

	#headEyecatcher .headEyecatcherBgDay,
	#headEyecatcher .headEyecatcherBgNight {
		display: none !important;
	}

	#headEyecatcher .headEyecatcherLogoFont {
		width: 180px;
		height: 139px;
		background-size: 180px 139px;
		top: 20px;
		left: 0;
	}

	#headEyecatcher .headEyecatcherLogoSun {
		left: 0;
	}

	#headEyecatcher .headEyecatcherLogoSun img {
		width: 180px;
		height: 180px;
	}

	#headNavArea {
		position: static;
		width: auto;
		font-size: 1.2em;
		padding-left: 160px;
	}

	#mainNav ul,
	#subNav ul {
		white-space: normal;
	}

	#langMenu {
		position: static;
		text-align: center;
		padding-left: 160px;
		margin: 15px 0 0 0;
	}

	
	/* Content Styles */
	.infoBox {
		display: none !important;
	}

	#contentAreaTop,
	#contentAreaBottom {
		display: none;
	}

	#contentAreaStyleGimmickTR {
		width: 150px;
		height: 78px;
		background-size: 150px 78px;
	}

	#contentAreaStyleGimmickBL {
		top: -50px;
		width: 150px;
		height: 74px;
		background-size: 150px 74px;
	}

	#contentMain {
		width: auto;
		float: none;
		overflow: hidden;
		padding: 15px;
		margin: 0 20px 0 20px;
		border-radius: 2px;
		background-image: none;
		background-color: #fdf9ce;
	}


	/* Images */
	.csc-textpic-above .csc-textpic-imagewrap,
	.csc-textpic-above .csc-textpic-imagerow,
	.csc-textpic-below .csc-textpic-imagewrap,
	.csc-textpic-below .csc-textpic-imagerow {
		width: 100% !important;
	}

	
	/* FCE's  */
	.twoColumns .left {
		width: 47%;
		padding-right: 3%;
	}

	.twoColumns .right {
		width: 47%;
		padding-left: 3%;
	}


	/* Formhandler */
	.Tx-Formhandler .formCol {
		width: 32%;
	}

	.Tx-Formhandler .formColMiddle {
		margin-right: 2%;
		margin-left: 2%;
	}

	.Tx-Formhandler .formInfo {
		width: 80%;
	}


	/* WecMap */
	.tx-wecmap-pi3 {
		float: none;
	}

	.tx-wecmap-pi3 table tr td:first-child {
		width: 100%;
		background-color: #333;
	}

	.tx-wecmap-map {
		width: 100% !important;
	}


	/* Foot Styles */
	#footArea #secNav {
		position: static;
		text-align: center;
		margin-top: 20px;
	}

}



/* Mobile portrait & landscape, Small tablet portrait
   - SunAni: zentriert, verkleinert
   - Navi's über gesamte Breite zentriert
------------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	/* Head Styles */
	#headArea {
		padding: 5px 10px 15px 10px;
	}

	#headEyecatcher {
		position: relative;
		margin: 0 auto 10px auto;
	}

	#headEyecatcher {
		width: 140px;
		height: 140px;
	}

	#headEyecatcher .headEyecatcherLogoFont {
		width: 140px;
		height: 108px;
		background-size: 140px 108px;
	}

	#headEyecatcher .headEyecatcherLogoSun img {
		width: 150px;
		height: 150px;
	}

	#headNavArea,
	#langMenu {
		font-size: 1.05em;
		padding-left: 0;
	}
	
}



/* Small mobile portrait & landscape
   - Auflösung der Spalten innerhalb ReservForm
-------------------------------------------------*/
@media screen and (max-width: 620px) {
	
	/* Formhandler */
	.Tx-Formhandler .formCol {
		float: none;
		width: 100%;
	}

	.Tx-Formhandler .formColMiddle {
		margin-right: 0;
		margin-left: 0;
	}

	.Tx-Formhandler .formInfo {
		width: 80%;
	}
	
}




/* Small mobile portrait
   - Ausblenden von Bildern innerhalb Texte und NewsSingleView
   - Rechts/Linksbündige BilderWraps neben Texten auf volle Breite
   - Auflösen der Zweispalten Inhalte
-------------------------------------------------------------------*/
@media screen and (max-width: 479px) {
	
	/* Full Content Width */
	body.fullContentWidthIfMobile #contentMain {
		margin: 0 0 0 0;
	}
	

	/* Images */
	.csc-textpic-intext-right .csc-textpic-imagewrap,
	.csc-textpic-intext-left .csc-textpic-imagewrap,
	.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap,
	.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
		display: none;
	}

	#singleNewsItem .news-single-img {
		display: none;
	}

	.csc-textpic-intext-right-nowrap > div,
	.csc-textpic-intext-left-nowrap > div {
		width: 100% !important;
	}


	/* Zweispalten Inhalte */
	.twoColumns .left,
	.twoColumns .right {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
	}


	/* singleNews */
	#singleNewsItem .prevArticleLink,
	#singleNewsItem .nextArticleLink {
		position: static;
		margin-bottom: 1px;
	}

	#singleNewsItem .prevArticleLink a,
	#singleNewsItem .nextArticleLink a {
		display: block;
		text-align: center;
	}


	/* Cookie Banner */
	#cookieBanner .text {
		display: inline-block;
		margin-bottom: 3px;
	}	
	
}