﻿/* CSS layout (bei jeder homepage) */

/* -- =========== START RESPONSIVE ohne Hoehen, die stehen individuell auf der Seite ========== -- */

/* -- ====================================== W7 ===================================== -- */
@media screen and  (max-width:347px) {	

.oberkante1_1 {margin-top:24px;}						/*zurueck in die zukunft*/
.oberkante1_1_1 {margin-top:18px; margin-bottom:2px;}	/*AHC Logos*/
.unterkante1_1 {margin-top:30px;}						/*auf neuen alten (bottom geht nicht, weil sich die hoehen dauernd aendern) */
.oberkante1_2 {margin-top:24px;}						/*ehe sie fortfahren ...*/
.oberkante1_2_1 {margin-top:12px;}						/*anmelden*/
.unterkante1_2 {margin-top:30px;}						/*investieren statt spekulieren*/

.introtextbreite {padding-left:2px; padding-right:2px;}
 
 span.introtext1, span.videotext1  {font-size:16px;} 
 span.introtext2, span.videotext2  {font-size:14px;} 
 span.charttitel {font-size:14px;}
  
	
#bahama, #bubbles, #DJ32 {width:50px;}
#samsung {width:30px;}

}

/* -- ====================================== W7 ===================================== 
@media screen and  (min-width:348px) and (max-width:359px) {							-- */
@media screen and  (min-width:348px) and (max-width:419px) {	

.oberkante1_1 {margin-top:18px;}						 
.oberkante1_1_1 {margin-top:18px;}	 
.unterkante1_1 {margin-top:30px;}												 
.oberkante1_2 {margin-top:12px;}												 
.oberkante1_2_1 {margin-top:6px;}						 
.unterkante1_2 {margin-top:18px;}						 

.introtextbreite {padding-left:6px; padding-right:6px;}
 
 span.introtext1, span.videotext1  {font-size:16px;} 
 span.introtext2, span.videotext2  {font-size:14px;} 
 span.charttitel {font-size:14px;}
  
	
#bahama, #bubbles, #DJ32 {width:75px;}
#samsung {width:30px;}

}
/* -- ====================================== W5 ===================================== 
@media screen and  (min-width:360px) and (max-width:419px) {

.oberkante1_1 {margin-top:18px;}						 
.oberkante1_1_1 {margin-top:18px;}	 
.unterkante1_1 {margin-top:30px;}						 
.oberkante1_2 {margin-top:12px;}						 
.oberkante1_2_1 {margin-top:6px;}						 
.unterkante1_2 {margin-top:18px;}						 
.introtextbreite {padding-left:12px; padding-right:12px;}
 
 span.introtext1, span.videotext1  {font-size:17px;} 
 span.introtext2, span.videotext2  {font-size:15px;} 
 span.charttitel {font-size:15px;}
   
	
#bahama, #bubbles, #DJ32 {width:100px;}
#samsung {width:40px;}

}
 */
 
/* -- ====================================== W4 =====================================  */
@media screen and  (min-width:420px) and (max-width:479px) {	
	
.introtextbreite {padding-left:20px; padding-right:20px;}
 
 span.introtext1, span.videotext1  {font-size:17px;} 
 span.introtext2, span.videotext2  {font-size:15px;} 
 span.charttitel {font-size:15px;}
	 
 
#bahama, #bubbles, #DJ32 {width:125px;}
#samsung {width:50px;}

}

/* -- ====================================== W3 ===================================== -- */
@media screen and  (min-width:480px) and (max-width:599px) {
.oberkante1_1 {margin-top:36px;}												 
.oberkante1_1_1 {margin-top:42px; margin-bottom:6px;}	 
.unterkante1_1 {margin-top:42px;}						 
.oberkante1_2 {margin-top:36px;}												 
.oberkante1_2_1 {margin-top:42px;}						 
.unterkante1_2 {margin-top:60px;}												 

.introtextbreite {padding-left:20px; padding-right:20px;}
 span.introtext1, span.videotext1  {font-size:18px;} 
 span.introtext2, span.videotext2  {font-size:16px;} 
 span.charttitel {font-size:15px;}

#bahama, #bubbles, #DJ32 {width:150px;}
#samsung {width:60px;}

}
/* -- ====================================== W2 ===================================== 
@media screen and (min-width:600px) and (max-width:799px) {								-- */
@media screen and (min-width:600px) and (max-width:699px) {
/*
.videohoehe {height:440px;}
*/
.oberkante1_1 {margin-top:48px;}				/*48 */								 
.oberkante1_1_1 {margin-top:42px; margin-bottom:6px;}		/* 42 */ 
.unterkante1_1 {margin-top:42px;}						 
.oberkante1_2 {margin-top:88px;}						 
.oberkante1_2_1 {margin-top:42px;}						 
.unterkante1_2 {margin-top:60px;}		/*60*/				 
.introtextbreite {padding-left:100px; padding-right:100px;}
 
 span.introtext1, span.videotext1  {font-size:24px;} 
 span.introtext2, span.videotext2  {font-size:20px;} 
 span.charttitel {font-size:16px;}
 
#bahama, #bubbles, #DJ32 {width:175px;}
#samsung {width:70px;}
}

/* -- ====================================== W2 ===================================== 
@media screen and (min-width:800px) and (max-width:1032px) {							-- */
@media screen and (min-width:760px) and (max-width:1032px) {

.introtextbreite {padding-left:120px; padding-right:120px;}
 
 span.introtext1, span.videotext1  {font-size:28px;} 
 span.introtext2, span.videotext2  {font-size:22px;} 
 span.charttitel {font-size:17px;}
	
#bahama, #bubbles, #DJ32 {width:200px;}
#samsung {width:80px;}

}

/* -- ====================================== W1 ===================================== -- 
@media screen and (min-width:1033px) and (max-width:1279px) {

.introtextbreite {padding-left:140px; padding-right:140px;}
 
 span.introtext1, span.videotext1  {font-size:28px;} 
 span.introtext2, span.videotext2  {font-size:22px;} 
 span.charttitel {font-size:17px;}

#bahama, #bubbles, #DJ32 {width:225px;}
#samsung {width:90px;}

}

@media screen and (min-width:1033px) and (max-width:1073px) {
.oberkante1_1 {margin-top:48px;}						 
.oberkante1_1_1 {margin-top:36px; margin-bottom:6px;}	 
.unterkante1_1 {margin-top:42px;}						 
.oberkante1_2 {margin-top:60px;}						 
.oberkante1_2_1 {margin-top:42px;}						 
.unterkante1_2 {margin-top:60px;}					 


}
@media screen and (min-width:1074px) and (max-width:1279px) {
.oberkante1_1 {margin-top:48px;}						 
.oberkante1_1_1 {margin-top:36px; margin-bottom:6px;} 
.unterkante1_1 {margin-top:42px;}						 
.oberkante1_2 {margin-top:60px;}						 
.oberkante1_2_1 {margin-top:42px;}						 
.unterkante1_2 {margin-top:60px;}						 

}

/* -- ====================================== W1 ===================================== --*/ 
@media screen and (min-width:1280px) {
.oberkante1_1 {margin-top:48px;}						  
.oberkante1_1_1 {margin-top:42px; margin-bottom:6px;}	 
.unterkante1_1 {margin-top:42px;}						 
.oberkante1_2 {margin-top:88px;}
.oberkante1_2_1 {margin-top:42px;}						 
.unterkante1_2 {margin-top:60px;}						 

.introtextbreite {padding-left:140px; padding-right:140px;}
.videotextbreite {padding-left:140px; padding-right:140px;}
 span.introtext1, span.videotext1  {font-size:32px; font-weight:bold;}
 span.introtext2, span.videotext2  {font-size:24px;} 
 span.charttitel {font-size:17px;}
 

#bahama, #bubbles, #DJ32, #DJ32 {width:250px;}
#samsung {width:100px;}
 
}

/* ======================================================== PRODUCTS ==================================================== */
@media screen and  (max-width:347px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:74px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:1px; margin-right:1px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:2px;}
#productcontainer {margin-top: 0px!important; margin-left:1px; margin-right:1px;}  /* frisst 3+3+2+2 */ 
#buidl1{margin-right:1px;}
#buidl4{margin-left:1px;}
#buidl5{margin-right:1px;}
#buidl8{margin-left:1px;}

}
@media screen and  (min-width:348px) and (max-width:359px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:78px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:1px; margin-right:1px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:2px;}
#productcontainer {margin-top: 0px!important; margin-left:1px; margin-right:1px;}  /* frisst 3+3+2+2 */ 
#buidl1{margin-right:1px;}
#buidl4{margin-left:1px;}
#buidl5{margin-right:1px;}
#buidl8{margin-left:1px;}

}
@media screen and  (min-width:360px) and (max-width:419px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:80px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:1px; margin-right:1px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:2px;}
#productcontainer {margin-top: 0px!important; margin-left:1px; margin-right:1px;}   
#buidl1{margin-right:1px;}
#buidl4{margin-left:1px;}
#buidl5{margin-right:1px;}
#buidl8{margin-left:1px;}
}
@media screen and  (min-width:420px) and (max-width:479px) {	
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:80px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:1px; margin-right:1px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:2px;}
#productcontainer {margin-top: 0px!important; margin-left:1px; margin-right:1px;}   
#buidl1{margin-right:1px;}
#buidl4{margin-left:1px;}
#buidl5{margin-right:1px;}
#buidl8{margin-left:1px;}
}
@media screen and  (min-width:480px) and (max-width:539px) {	
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:98px; margin-top:6px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:3px; margin-right:3px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:6px;}
#productcontainer {margin-top:3px!important;}   
#buidl1{margin-right:3px;}
#buidl4{margin-left:3px;}
#buidl5{margin-right:3px;}
#buidl8{margin-left:3px;}
}
@media screen and  (min-width:540px) and (max-width:599px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:110px; margin-top:3px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:6px;}
#productcontainer {margin-top:3px!important;}   
#buidl1{margin-right:6px;}
#buidl4{margin-left:6px;}
#buidl5{margin-right:6px;}
#buidl8{margin-left:6px;}
}
@media screen and (min-width:600px) and (max-width:639px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:124px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:12px;}
#buidl1{margin-right:6px;}
#buidl4{margin-left:6px;}
#buidl5{margin-right:6px;}
#buidl8{margin-left:6px;}
}
@media screen and (min-width:640px) and (max-width:719px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:132px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:12px;}
#buidl1{margin-right:6px;}
#buidl4{margin-left:6px;}
#buidl5{margin-right:6px;}
#buidl8{margin-left:6px;}
}
@media screen and (min-width:720px) and  (max-width:799px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:152px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:12px;}
#buidl1{margin-right:6px;}
#buidl4{margin-left:6px;}
#buidl5{margin-right:6px;}
#buidl8{margin-left:6px;}
}
@media screen and (min-width:800px) and  (max-width:839px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:178px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:12px;}
#buidl1{margin-right:6px;}
#buidl4{margin-left:6px;}
#buidl5{margin-right:6px;}
#buidl8{margin-left:6px;}
}
@media screen and (min-width:840px) and (max-width:982px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:184px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:12px;}
#buidl1{margin-right:6px;}
#buidl4{margin-left:6px;}
#buidl5{margin-right:6px;}
#buidl8{margin-left:6px;}
}
@media screen and (min-width:983px) and (max-width:1181px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:224px; margin-top:0px; border:0;} 
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:12px;}
#buidl1{margin-left:0px; margin-right:6px;}
#buidl4{margin-left:6px; margin-right:0px;}
#buidl5{margin-left:0px; margin-right:6px;}
#buidl8{margin-left:6px; margin-right:0px;}
}
@media screen and (min-width:1182px) {
 span.bb {display:inline-block;}
#buidl1, #buidl2, #buidl3, #buidl4, #buidl5, #buidl6, #buidl7, #buidl8 {width:274px; margin-top:0px; border:0;}/*alle img -1px, because html5 sucks*/
#buidl2, #buidl3, #buidl6, #buidl7 {margin-left:6px; margin-right:6px;}
#buidl5, #buidl6, #buidl7, #buidl8 {margin-top:12px;}
#buidl1{margin-left:0px; margin-right:6px;}
#buidl4{margin-left:6px; margin-right:0px;}
#buidl5{margin-left:0px; margin-right:6px;}
#buidl8{margin-left:6px; margin-right:0px;}

}

/* -- ====================================END RESPONSIVE ================================ --> */
