/* Technische und Test-Definitionen */
/* MediaInfos und Spezialtests */
/* (reine MediaInfos von anderen Definitionen trennen) */

/* Media-Queries */
/* ============= */

/* Testbereich für Media2Info (mit max-width) */
/* ========================================== */

.Media2Info
{
  background-color:#880000;
  color:#ffffff;
  text-align:center;
}

@media (max-width: 8000px) {

	div[class*=Media2Info]::after
	{
		content: "Desktop Extra Large (1980px und mehr)";
	} 
} 

@media (max-width: 1980px) {

	div[class*=Media2Info]::after
	{
		content: "Desktop Large (1600px und mehr)";
	} 
} 

@media (max-width: 1599px) {

	div[class*=Media2Info]::after
	{
		content: "Desktop Medium (1400px und mehr)";
	} 
} 

@media (max-width: 1439px) {

	div[class*=Media2Info]::after
	{
		content: "Desktop Medium (1280px und mehr)";
	} 
} 

@media (max-width: 1279px) {

	div[class*=Media2Info]::after
	{
		content: "Desktop Small (mehr als 1024px)";
	} 
} 

/* ... als Test */
@media (min-width: 1024px) 
   and (max-width: 1024px) {

	div[class*=Media2Info]::after
	{
		content:"iPad / Kindle quer (exakt 1024px)";
	} 
} 

@media (max-width: 1023px) {

	div[class*=Media2Info]::after
	{
		content:"< iPad / Kindle quer (< 1024px)";
	} 
} 

/* ... als Test */
@media (min-width: 991px) 
   and (max-width: 991px) {
	div[class*=Media2Info]::after
	{
		content:"Bootstrap-Grenze (exakt 991px)";
	} 
 
} 

@media (max-width: 990px) {
	div[class*=Media2Info]::after
	{
		content:"< Bootstrap-Grenze (< 991px)";
	} 
 
} 

/* ... als Test */
@media (min-width: 768px) 
   and (max-width: 768px) 
{
	div[class*=Media2Info]::after
	{
		content:"iPad hoch (exakt 768px)";
	} 

} 

@media (max-width: 767px) 
{
	div[class*=Media2Info]::after
	{
		content:"< iPad hoch (< 768px)";
	} 

} 

/* ... oder 667px ? */
@media (max-width: 735px) {

	div[class*=Media2Info]::after
	{
		content:"< iPhone 6+ quer (< 736px)";
	} 

} 

@media (max-width: 684px) {

	div[class*=Media2Info]::after
	{
		content:"< Galaxy quer (< 685px)";
	} 
} 

/* ... als Test */
@media (min-width: 667px) 
   and (max-width: 667px) 
{
	div[class*=Media2Info]::after
	{
		content:"iPhone 6 quer (exakt 667px)";
	} 

} 

@media (max-width: 666px) {

	div[class*=Media2Info]::after
	{
		content:"< iPhone 6 quer (< 667px)";
	} 

} 

@media (max-width: 599px) {

	div[class*=Media2Info]::after
	{
		content:"< Kindle hoch (< 600px)";
	} 
} 

/* ... als Test */
@media (min-width: 568px) 
   and (max-width: 568px) 
{
	div[class*=Media2Info]::after
	{
		content:"iPhone 5 quer (exakt 568px)";
	} 

} 

@media (max-width: 567px) {

	div[class*=Media2Info]::after
	{
		content:"< iPhone 5 quer (< 568px)";
	} 
} 

/* ... als Test */
@media (min-width: 480px) 
   and (max-width: 480px) 
{
	div[class*=Media2Info]::after
	{
		content:"iPhone 3/4 quer (exakt 480px)";
	} 

} 

@media (max-width: 479px) {

	div[class*=Media2Info]::after
	{
		content:"< iPhone 3/4 quer (< 480px)";
	} 
} 

/* ... oder 375px? */
@media (max-width: 413px) {

	div[class*=Media2Info]::after
	{
		content:"< iPhone 6+ hoch (< 414px)";
	} 
} 

@media (max-width: 379px) {

	div[class*=Media2Info]::after
	{
		content:"< Galaxy hoch (< 380px)";
	} 
} 

/* ... als Test */
@media (min-width: 375px) 
   and (max-width: 375px) 
{
	div[class*=Media2Info]::after
	{
		content:"iPhone 6 hoch (exakt 375px)";
	} 

} 

@media (max-width: 374px) {

	div[class*=Media2Info]::after
	{
		content:"< iPhone 6 hoch (< 375px)";
	} 
} 

/* ... als Test */
@media (min-width: 320px) 
   and (max-width: 320px) 
{
	div[class*=Media2Info]::after
	{
		content:"iPhone 3/4/5 hoch (exakt 320px)";
	} 

} 

/* meint: kleiner als iPhone 3/4/5 hoch */
@media (max-width: 319px) {

	div[class*=Media2Info]::after
	{
		content:"weniger als 320px";
	} 
} 


/* Testbereich für MediaInfo (mit min-width) */
/* ========================================== */

.MediaInfo
{
  background-color:#006600;
  color:#ffffff;
  text-align:center;
}

/* meint: kleiner als iPhone 3/4/5 hoch */
@media (min-width: 0px) {

	div[class*=MediaInfo]::after
	{
		content:"weniger als 320px";
	} 
} 

/* meint: kleiner als iPhone 3/4/5 hoch */
@media (min-width: 320px) {

	div[class*=MediaInfo]::after
	{
		content:"=> iPhone 3/4/5 hoch (=> 320px)";
	} 
} 

@media (min-width: 375px) {

	div[class*=MediaInfo]::after
	{
		content:"=> iPhone 6 hoch (=> 375px)";
	} 
} 

@media (min-width: 480px) {

	div[class*=MediaInfo]::after
	{
		content:"=> iPhone 3/4 quer (=> 480px)";
	} 
} 

@media (min-width: 568px) {

	div[class*=MediaInfo]::after
	{
		content:"=> iPhone 5 quer (=> 568px)";
	} 
} 

@media (min-width: 667px) {

	div[class*=MediaInfo]::after
	{
		content:"=> iPhone 6 quer (=> 667px)";
	} 

} 

@media (min-width: 768px) 
{
	div[class*=MediaInfo]::after
	{
		content:"=> iPad hoch (=> 768px)";
	} 

} 

@media (min-width: 991px) {
	div[class*=MediaInfo]::after
	{
		content:"=> Bootstrap-Grenze (=> 991px)";
	} 
 
} 

@media (min-width: 1024px) {

	div[class*=MediaInfo]::after
	{
		content:"=> iPad / Kindle quer / Desktop Small (=> 1024px)";
	} 
} 

@media (min-width: 1280px) {

	div[class*=MediaInfo]::after
	{
		content:"=> Desktop Medium => 1280px";
	} 
} 

@media (min-width: 1440px) {

	div[class*=MediaInfo]::after
	{
		content:"=> Desktop Large => 1440px";
	} 
} 

@media (min-width: 1600px) {

	div[class*=MediaInfo]::after
	{
		content:"=> Desktop Large => 1600px";
	} 
} 

@media (min-width: 1980px) {

	div[class*=MediaInfo]::after
	{
		content:"=> Desktop Extra Large => 1980px";
	} 
}