/* Website 
Autor: Gerd H. Pfotzer
Version: 1.0 - 20.11.2015

Spezelle Styles für bestimmte Auflösungen und Retina Displays.
*/

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */
  /* Mobile */

	#farbbalkenfueraufloesung { height:1px; }

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* iPhone 5 und hTC getestet. Small screen, retina, stuff to override above media query */
	
	#farbbalkenfueraufloesung { height:15px; }

	#kopfnavigationMobile a { background-image:url(../images_templates/menu-2x-off.png); }
	#kopfnavigationMobile a:hover, #kopfnavigationMobile a:active { background-image:url(../images_templates/menu-2x-on.png); }

}





@media only screen and (min-width: 760px) {

  /* Medium screen, non-retina */
  /* Normaler PC Monitor und Tablets */
  /* ZWEISPALTIG */
	#topofpageanker { height:2%; }

	#farbbalkenfueraufloesung { background-color:orange; }
	body { font-size:1em; }

	#kopf {
		width:85%;
		max-height:140px;
		/*max-height:7.5em;*/
		-webkit-transition:none;
		-moz-transition:none;
		-o-transition:none;
		-ms-transition:none;
		transition:none;
	}
	#logo {
		min-height:120px;
		/*min-height:5.9em;*/
	}

	#kopfnavigationMobile { display:none; }
	#kopfnavigationMobileNav { display:none; display:block; }
	#kopfnavigation { display:block; }

	#logo img {
		width:40%;
		max-width:364px;
		/*max-width:25em;*/
	}
	#abstandkopfcontent {
		height:280px;
	}
	#seite {
		background-image:url(../images_templates/kopfbild_00.jpg);
	}
	#content { 
		width:90%;
		padding-top:0.1%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
		font-size:0.85em;
	}
	#toplink {
		width:90%;
		padding:0% 0%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
	#fussCopyright {
		width:86%;
		padding:0% 2%;
		margin-left:auto;
		margin-right:auto;
	}
	#fuss {
		width:86%;
		padding:0% 2% 2% 2%;
		margin-left:auto;
		margin-right:auto;
	}
	
	.spalte100prozent { 
		width:95%;
		margin-left:2.5%;
		margin-right:2.5%;
		margin-top:2.5%;
	}
	.spalte50prozent {
		width:45%;
		margin-left:2.5%;
		margin-right:2.5%;
		float:left;
		margin-top:2.5%;
	}
	.spalte66prozent {
		width:60%;
		margin-left:2.5%;
		margin-right:2.5%;
		float:left;
		margin-top:2.5%;
	}
	.spalte34prozent {
		width:30%;
		margin-left:2.5%;
		margin-right:2.5%;
		float:left;
		margin-top:2.5%;
	}
	.spalte33prozentlinks { 
		width:30%;
		margin-left:2.5%;
		margin-right:1.25%;
		float:left;
		margin-top:2.5%;
	}
	.spalte33prozentmitte { 
		width:30%;
		margin-left:1.25%;
		margin-right:1.25%;
		float:left;
		margin-top:2.5%;
	}
	.spalte33prozentrechts { 
		width:30%;
		margin-left:1.25%;
		margin-right:2.5%;
		float:left;
		margin-top:2.5%;
	}

	.bildlinkscaption {
		line-height:150%;
	}
	
	.Contentspalte66prozent {
		width:66%;
	}
	.TopOfPageButton {
		display:none;
	}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 760px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 760px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 760px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 760px),
only screen and (                min-resolution: 192dpi) and (min-width: 760px),
only screen and (                min-resolution: 2dppx)  and (min-width: 760px),
only screen and (    -webkit-device-pixel-ratio: 3)      and (min-width: 760px) { 

  /* Medium screen, retina, stuff to override above media query */
  /* ZWEISPALTIG */

	#farbbalkenfueraufloesung { height:15px; background-color:green; }

}


@media only screen and (min-width: 1025px) {

  /* Searchfilter anzeigen */

	#SearchFilter {
		display:block;
		float:right;
		width:25%;
	}
	
	#Produkte {
		float:left;
		width:70%;
	}

	#Suchbegriff { width:210px; }

}



@media only screen and (min-width: 1281px) {

  /* Large screen, non-retina */
  /* Großer PC Monitor und Tablets */
  /* Hier steht nur noch ganz Spezielles für die hohe Auflösung. Alles Wesentliche steht weiter oben bei 700px. */

	#farbbalkenfueraufloesung { background-color:blue; }
	body { font-size:1.2em; }
	#topofpageanker { height:20px; line-height:100%; }
	#kopf { 
		width:80%;
		height:148px;
		max-height:150px;

		-webkit-transition:none; /* Verzögerung der Einblendung 0.05s */
		-moz-transition:none;
		-o-transition:none;
		-ms-transition:none;
		transition:none;
	}
	#kopfnavigation { display:none; }
	#kopfnavigationLang {
		display:block;
		margin-top:3.5%;
		width:55%;
		max-width:600px;
		float:right;
		text-align:right;
		font-size:0.75em;
		color:#550000;
	}
	#kopfnavigationLang a { color: #343434; text-decoration:none; display:inline-block; padding:1.5% 2.5%; }
	#kopfnavigationLang a:link { color: #343434; text-decoration:none; }
	#kopfnavigationLang a:visited { color: #343434; text-decoration:none; }
	#kopfnavigationLang a:active { color: #9d0f19; text-decoration:none; }
	#kopfnavigationLang a:hover { color: #9d0f19; text-decoration:none; }
	#kopfnavigationLang a:focus { color: #9d0f19; text-decoration:none; }

	#logo img {
		width:40%;
		max-width:364px;
	}
	#abstandkopfcontent {
		height:300px;
	}
	#content { 
		width:80%;
	}
	
	#toplink {
		width:80%;
		padding:0% 0%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
	#fuss {
		width:76%;
		padding:0% 2% 2% 2%;
		margin-left:auto;
		margin-right:auto;
	}
	#fussCopyright {
		width:76%;
		padding:0% 4%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1281px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (                min-resolution: 192dpi) and (min-width: 1281px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1281px) { 

  /* Large screen, retina, stuff to override above media query */

	#farbbalkenfueraufloesung { height:15px; background-color:blue; }
	body { font-size:2em; }

}








@media only screen and (min-width: 1940px) {

  /* Large screen, non-retina */
  /* Großer PC Monitor und Tablets */
  /* Hier steht nur noch ganz Spezielles für die hohe Auflösung. Alles Wesentliche steht weiter oben bei 700px. */

	#farbbalkenfueraufloesung { height:5px; background-color:yellow; }
	body { font-size:1.4em; }
	#topofpageanker { height:25px; line-height:100%; }
	#kopf { 
		width:1600px;
		height:170px;
		max-height:170px;
	}
	#kopfnavigationLang {
		width:55%;
		max-width:1000px;
		font-size:0.7em;
		color:#550000;
	}
	#kopfnavigationLang a { padding:1% 2%; }
	#abstandkopfcontent {
		height:320px;
	}
	#content { 
		width:1600px;
	}
	#toplink {
		width:1600px;
		padding:0% 0%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
	#fuss {
		width:1540px;
		padding:0% 30px 30px 30px;
		margin-left:auto;
		margin-right:auto;
	}
	#fussCopyright {
		width:1540px;
		padding:0% 30px;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1940px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1940px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1940px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1940px),
only screen and (                min-resolution: 192dpi) and (min-width: 1940px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1940px) { 

  /* Large screen, retina, stuff to override above media query */

	#farbbalkenfueraufloesung { height:15px; background-color:yellow; }
	body { font-size:3em; }

}