﻿/********************************************/
/* KundenLayout MEDIAQUERY | RESPONSIVE CSS	*/
/********************************************/
 
/* ########################  */
/*   INHALTSANPASSUNGEN		 */
/* ########################  */
/* Startseitentemplate */
 

@media all and (max-width: 1024px) { /* Kleiner als Mindestbreite */
.containerPAGEOUT {      		
	width: 100%;
	min-width: 420px;
}

.containerTITEL .lineImg { height: auto;  }

}

 
@media all and (max-width: 800px) {  /* Verkleinerung STUFE2  */
/*Mobile-Suchfeld
.containerTITEL .cnt_find { display:none; }
.containerTITEL .cnt_findMobile { display:block; width: auto; text-align:right; float:right; margin-top: -35px;}
.searchButton { display:none; }
#txtSuchTopM { width: 300px; margin-right: 6px;}
*/
/*InfoBar im Titel
.containerTITEL .lineD {  min-height:25px;     }
.containerTITEL .lineD h3 { height:auto; min-height:inherit;  display:block;  padding: 0px 0px; margin: 0px;  text-align:center; font-size: 90%; text-transform:uppercase;     }
.containerTITEL .lineD h4 { height: auto; min-height:inherit; display:block;   padding: 0px 0px ;  background-image:none; text-align:center   }
.containerTITEL .lineD h4 a { height: auto; min-height:inherit; display:block;   padding: 2px 0px 4px 0px;  background-image:none; text-align:center   }
*/


/* TopMenu etwas verkleinern */
li.top { margin: 0px 4%; transition: all 0.4s ease-in-out; }
nav ul li a.mnu {  font-size: 150%; transition: all 0.4s ease-in-out;  }
nav {  text-align:center; padding: 0px 0px; transition: all 0.4s ease-in-out;   }
nav ul li a.lnk_menu_main {
    font-size: 100%;
}

/*Footer-Container*/
.cntfooterBlock .line { width: 100%; display:block; padding-bottom: 25px;  }
.cntfooterBlock .line#lL { text-align:center; }
.cntfooterBlock .line#lM { text-align:center; }
.cntfooterBlock .line#lR { text-align:center; }

/*Home-Titel ausblenden
.containerTITEL#home { vertical-align:bottom; }
.containerTITEL#home div.greeting {  display:none;   }
.containerTITEL .lineC , .containerTITEL#home .lineC { height: 160px; width: 100%; display:block; margin-top: 40px; background: url(/images/layout/welcome/welcome.png) no-repeat 45px 30px;      }
.containerTITEL .lineC.nvCZ , .containerTITEL#home .lineC.nvCZ { height: 160px; width: 100%; display:block; margin-top: 40px; background: url(/images/layout/welcome/welcomeCZ.png) no-repeat 45px 30px;      }
*/

div#itcBoxMAIN { width: 100%; min-height: 100%; min-width: 195px; margin: 20px 0px 0px 0px; padding-left: 0px;  background-color: #fff; border: 0px solid #406c99; display:block;  }
div.itcBoxFEED { width: 100%; min-height: 100%; min-width: 195px; margin: 20px 0px 0px 0px; padding-left: 0px;  background-color: #fff; border: 0px solid #406c99; display:block;  }

/* Home-Template umstellen 
div#homeContent { width: 100%; display:block;}
.homeFastLink {padding: 0px 0px 10px 0px;}
.sideBox_Container { margin-bottom: 20px;   }
#homeContent img { max-width:48%; }
*/
	/* NavBar anpassen */
	a#navPrintLink { display: none; }
	a#navFindLink { margin-top: -43px; position:absolute; z-index: 5; right: 0px; border: 0px solid #fff; border-right: 0px; margin-right: 0px; padding: 0px;}

}

@media all and (max-width: 620px) { /* Vorstufe für Mobile-Menüwechsel: WhoAmI-Anpassung */
/* TopMenu weiter verkleinern */
li.top { margin: 0px 3%;transition: all 0.4s ease-in-out; }
nav ul li a.mnu {  font-size: 135%; transition: all 0.4s ease-in-out;  }
nav ul li a.lnk_menu_main {    font-size: 96%; transition: all 0.4s ease-in-out; }

/* HTML-Snippets anpassen (Bootstrap) */
.row-fluid [class*="span"] { width: 100%; display:block; margin: 12px 0px 0px 0px; }

}
 
@media all and (max-width: 500px) { /* Stufe für Mobile-Menüwechsel: Dynamisches Mobilmenü - CSS ohne JS */
.onlyMobile { display: block;}
	/* NavBar anpassen */
	a#navHome { display: none; }
	a#nuuuavFindLink { display: none; }
	a.mainWHOIS { display:block;}
	
	/* Menüpunkte ohne seitl. Abstand */
	li.top { margin: 0px;}
	
	/* Banner anpassen */
	.containerTITEL .lineImg img { height:100%; width:auto !important;     }
	.containerTITEL .lineImg { height: 220px;  }

	/* Footer-Anpassungen  */
	.containerFOOTER .lineTop  { padding: 0px; }
	.containerFOOTER .lineTop .footerNav { float:none; border-bottom: 1px solid #fff;  text-align:center; display:block; width: 100%; padding-bottom: 3px; margin-bottom: 4px;}
	.containerFOOTER .lineTop .wetterInfoBox {   text-align:center; display:block; width: 100%; }

	/* Navigationsanpassung (CSS-Menu) */
	nav {width: 100%; display:none; position:absolute; z-index: 20;  text-align:center; padding: 0px;}
	nav.noJS { }
	nav a  { display:block; }
 	nav ul { display:block;  padding-left: 0; padding-bottom: 0;}
	nav ul:after {  }
	nav ul,nav ul li{  }
	nav ul li { float: none;  border-bottom: 0px solid #CCC; display:inline-block; width: 100%; margin: 0px;   }
	nav ul li a { padding: 6px 20px 4px 20px; text-align:center;   }
	nav ul li ul li a:active, nav ul li ul li a:visited, nav ul li ul li a:link, nav ul li ul li a:hover { font-weight:100; color: #180c0a; background-color:#fff;  }
	nav ul li a:hover { font-weight:100; color: #fff; background-color:#180c0a;  }
	nav ul li a.lnk_menu_main { font-size: 100%;    }

	/*nav ul li:hover a, nav ul li:hover {   background-color:#F00; color: #FFF;  }*/
	nav ul li:hover > a:link, nav ul li:hover > a:hover, nav ul li:hover > a:active,nav ul li:hover > a:visited { color: #fff; background-color:#666;   } /* TopMenu Hover*/
	nav ul li a:active, nav ul li a:visited, nav ul li a:link, nav ul li a:hover { font-weight:100; color: #fff; background-color:#333;  }				/* TopMenu Normal */
	nav ul li ul li:hover > a:link, nav  ul li ul li:hover > a:hover, nav  ul li ul li:hover > a:active,nav  ul li ul li:hover > a:visited { color: #fff; background-color:#F4F4F4;   } /* Child-Menu Hover */
	/* Hoverdesign Childs */
	nav ul li ul li.active { background-color: #fff; color: #180c0a; }
	nav ul li ul li.active a.mnu { background-color: #CCC; color: #000;  font-weight:600;  }
	nav ul li ul li.active a.mnu:hover { background-color: #ccc  !important; color: #000; font-weight:600;}
	/* Sonst. Design Childs */
	nav ul li ul li a { padding: 6px 20px 4px 45px;background-color:#fff; color: #180c0a;   }
	nav ul li ul li a:hover{  }

	nav ul li:hover ul a { color: #333} 
	nav ul li:hover > a {  }
	nav ul li ul { visibility: visible; position: relative; background-color: #fff;   }
	nav ul li.flexJS:hover > ul { visibility: hidden; position: absolute;   }
 	nav ul li ul{ display: block;      padding-left: 0;}
 	nav ul li ul{ display: none; visibility: hidden; position: relative;     padding-left: 0;}
 	nav ul li.top.active ul{ visibility: visible; display: block;  }
	nav ul li ul li{ float: none;  background-color:#fff; color: #180c0a ; display:inline-block; width: 100%; border-top: 1px solid #CCC;}
	nav ul li ul{  border: 0px solid #5d5656; border-bottom: 0px;  }
 	nav ul li a.mnu {  font-size: 130%;  padding: 6px 0px; border-bottom: 1px solid #fff; }
 	nav ul li a li a.mnu {   padding: 6px 0px; border-bottom: 1px solid #fff; }
 	nav ul li.top a.mnu {  padding: 10px 0px;}

 	nav#nvCZ ul li.top a.mnu {  padding: 10px 0px;}
	nav ul {  }
	nav ul li ul{  padding-left: 0;  }


	/* Einblender für Mobil-Menü (CSS-Menu) */	
	.lineNav { display:block; background: url(/images/layout/mobileNav.png) no-repeat 20px 2px; width: 100%; min-height: 36px;    }
	.lineNav.noJS:hover > .mobileNavItem { display:none;  } 
	.lineNav.noJS:hover > p { display:none;   } 
	.lineNav.noJS:hover > nav { display:block; background-color:#fff;    transition: all 0.4s ease-in; }
 	
	.lineNav.jsMenu.show > nav {display:block; background-color:#fff;    transition: all 0.4s ease-in; }
	.lineNav.jsMenu.show > .mobileNavItem { display:none;  } 
	
	.mobileNavItem { display:block; text-align:center; text-transform:uppercase; font-weight:100; font-size: 125%; }
	.lineNav p { display:block; color:#999; font-size: 65%; margin-left: 60px; text-transform: uppercase;   position:absolute; }
	
	.mobileNavItem {  color:#fff; padding: 8px; border: 1px solid #fff;  border-left: 0px; border-right: 0px; font-size: 110%; background-color:#666;  }
	.mobileNavItem a { color:#fff; font-size: 120%; margin-top: 8px; letter-spacing: 1px; text-transform: uppercase; font-weight:100;  float:right;  } 
	body.l0 .mobileNavItem { background-color: #2267b4;  }
	body.l1 .mobileNavItem { background-color: #2267b4;  }
	body.l2 .mobileNavItem { background-color: #2c641f;  }
	body.l3 .mobileNavItem { background-color: #ff9c18;  }
	body.l4 .mobileNavItem { background-color: #9c0000;  }

	/* Weitere Anpassungen */
	.cntContent { paddding: 20px 30px 0px 30px;   }
	.yesJS { display: none;}
	nav ul li.top.active, nav ul li.top.active:hover   {  border: 0px solid #060; }
	nav ul li.top:hover { border: 0px solid #CCC;}
	.menuHelper { padding-right: 0px; }

	/*Listenpunkte*/
	nav ul li ul { margin-top: 0px;}
	li#topxItem2,li#topxItem2 > a { color: #FFF; /*blau*/ }
	li#topxItem3,li#topxItem3 > a { color: #FFF; /*grün*/ }
	li#topxItem4,li#topxItem4 > a { color: #FFF; /*orange*/ }
	li#topxItem5,li#topxItem5 > a { color: #FFF; /*rot*/ }
 	nav ul li.top   {  border-bottom: 0px solid; }
	nav ul li ul li a.mnu:hover{  color: #333; }
	nav ul li ul li.active {  color: #fff; }
	li#topxItem1 .menuHelper { border-top: 4px solid #2267b4; }
	li#topxItem2 .menuHelper { border-top: 4px solid #2267b4; }
	li#topxItem3 .menuHelper { border-top: 4px solid #2c641f; }
	li#topxItem4 .menuHelper { border-top: 4px solid #ff9c18; }
	li#topxItem5 .menuHelper { border-top: 4px solid #9c0000; }

	/* ### MobileMenu: Site-Overload Effekt */
	body.overload {  overflow-x: hidden; overflow-y: scroll; }
	/* Footer */
	body.overload .containerFOOTER .footerNav  {  opacity: 0.25; filter: alpha(opacity=25); text-shadow: 0 0 3px #fff; color: rgba(255,255,255,0);  }
	body.overload .cntfooterBlock {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 2px #000; color: rgba(255,255,255,0);  }
	body.overload .wetterInfoBox {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 2px #fff; color: rgba(255,255,255,0);  }
	body.overload .wetterBox {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 2px #fff; color: rgba(255,255,255,0);  }
	/* Header */
	body.overload .lineImg {  opacity: 0.3; filter: alpha(opacity=30);    }
	body.overload .lineLogo {  opacity: 0.3; filter: alpha(opacity=30);    }
	body.overload .lineNavInfo {  opacity: 0.3; filter: alpha(opacity=30); text-shadow: 0 0 2px #fff; color: rgba(255,255,255,0);  }
	body.overload .lineTop  {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 2px #000; color: rgba(255,255,255,0);  }
	/* Content */
	body.overload .spaceFrame {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 2px #000; color: rgba(255,255,255,0);   }
	body.overload .spaceFrame  a {   text-shadow: 0 0 2px #000; color: rgba(255,255,255,0);   }
	body.overload .spaceFrame  h1,body.overload .spaceFrame  h2,body.overload .spaceFrame  h3,body.overload .spaceFrame  h4,body.overload .spaceFrame  h5,body.overload .spaceFrame  h6 { 
	  text-shadow: 0 0 2px #000; color: rgba(255,255,255,0);   }
	/* Schatten des Menus */
	nav { box-shadow: 0px 0px 12px #333, 0px 0px 12px #333; border-top: 1px solid #333; border-bottom: 1px solid #333;}
	/* AbsolutesDIV mit Farbüberlagerung des Effekts */
	#mobileMenuBlur.ON { display:block; width: 100%; height: 100%; background-color:#333; position:fixed; z-index: 10; top: 0px; bottom: 0px; opacity: 0.1;	filter: alpha(opacity=10);  }
	/* ### MobileMenu: Site-Overload Effekt ENDE */

	/* iTemplate Anpassungen */
	.elementList.flex50 { display:inline-block; width:100%; min-width: 160px; margin-right: 0; margin-bottom: 1%; }
	.elementList.flex33 { display:inline-block; width:44%; min-width: 160px; margin-right: 5%; margin-bottom: 1%; }
	
	 }


 
/********************************************/
/* ENDE		 MEDIAQUERY | RESPONSIVE CSS	*/
/********************************************/
.spaceFrame { background: none repeat scroll 0 0 #FFFFFF;   }

/* Menu-Overload Effekt */
/*.spaceFrame { background: none repeat scroll 0 0;   }
.cntContent.overload { cursor:pointer;  opacity: 0.3; text-shadow: 0 0 5px #000; color: rgba(255,255,255,0); }
.cntContent.overload * { text-shadow: 0 0 0px #000; color: rgba(255,255,255,0); opacity: 0.8; text-shadow: 0 0 1px #000;}
*/


 
 
 /*.spaceFrame.overload, .spaceFrame.overload a {  cursor:pointer;  opacity: 0.45; text-shadow: 0 0 8px #000; color: rgba(255,255,255,0); }
.spaceFrame.overload img, .spaceFrame.overload canvas { opacity: 0.2;}*/
/*.blockContent.overload { cursor:pointer;  opacity: 0.3; text-shadow: 0 0 5px #000; color: rgba(255,255,255,0); }
.blockContent.overload * { text-shadow: 0 0 0px #000; color: rgba(255,255,255,0); opacity: 0.8; text-shadow: 0 0 1px #000;}
/* .blockContent.overload img, .blockContent.overload canvas { opacity: 0.4;} */
/*.blockBanner.overload { cursor:pointer;  opacity: 0.3; text-shadow: 0 0 8px #000; color: rgba(255,255,255,0); }
/*.blockBanner.overload img, .blockBanner.overload canvas { opacity: 0.4;} */

