﻿/********************************************/
/* KundenLayout MEDIAQUERY | RESPONSIVE CSS	*/
/********************************************/
 
/* ########################  */
/*   INHALTSANPASSUNGEN		 */
/* ########################  */
/* Startseitentemplate */
 

@media all and (max-width: 1024px) { /* Kleiner als Mindestbreite */
.containerPAGEOUT {      		
	width: 100%;
	min-width: 420px;
}
.containerCONTENT { /*background-color: #09C;  blau */ }
.containerCONTENT {
	padding: 5px 35px;
} 
#goTopNow { margin-left: 0px; /* bottom: 215px; */}

.containerTITEL .lineImg { height: auto;  }

.containerTITEL .topWelcome h1, .containerTITEL .topWelcome h2 {transition: font-size 0.1s ease-in-out; }
}

 
@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   }
*/

.containerCONTENT { /*background-color: #090;  grün */ }


 #goTopNow { margin-left: 0px; /* bottom:235px; */ }

 
 



/* TopMenu etwas verkleinern */
li.top { margin: 0px 4%; transition: font-size 0.3s ease-in-out; }
nav ul li a.mnu {  font-size: 150%; transition: font-size 0.3s ease-in-out;  }
nav {  text-align:center; padding: 0px 0px; transition: font-size 0.3s 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;}

	/* iTemplate Anpassungen - 3spaltig -> 2spaltig */
	.elementList.flex33 { display:inline-block; width:44%; min-width: 160px; margin-right: 5%; margin-bottom: 1%; }

}

@media all and (max-width: 620px) { /* Vorstufe für Mobile-Menüwechsel: WhoAmI-Anpassung */
/* TopMenu weiter verkleinern */
 
li.top { margin: 0px 3%;transition: font-size 0.4s ease-in-out; }
nav ul li a.mnu {  font-size: 135%; transition: font-size 0.4s ease-in-out;  }
nav ul li a.lnk_menu_main {    font-size: 96%; transition: font-size 0.4s ease-in-out; }

/* HTML-Snippets anpassen (Bootstrap) */
.row-fluid [class*="span"] { width: 100%; display:block; margin: 12px 0px 0px 0px; }

body.kv .containerTITEL .topWelcome h1 { font-size: 175%; }
body.kv .containerTITEL .topWelcome h2 { font-size: 135%;  }
body.hk .containerTITEL .topWelcome h1 { font-size: 270%; font-family: "Niconne","Segoe UI", Calibri, Tahoma, Geneva, sans-serif;  }
body.hk .containerTITEL .topWelcome h2 { font-size: 160%; color: #f589ab; margin-top: -10px; font-family: "Niconne","Segoe UI", Calibri, Tahoma, Geneva, sans-serif;  }

	/* iTemplate Anpassungen */
	.elementList.flex50 { display:inline-block; width:94%; 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%; }
div.itcBoxFEED {
	padding: 0; margin-top: 25px; width: 97%;
	}
.elx_image { max-height: 130px; overflow:hidden; }
.elx_image img {margin-top: -25%;}

}
 
@media all and (max-width: 520px) { /* Stufe für Mobile-Menüwechsel: Dynamisches Mobilmenü - CSS ohne JS */
.onlyMobile { display: block;}
.containerCONTENT {  /* background-color: #FF9;gelb */ }
 #goTopNow {    height: 50px; width: 50px; /*bottom:310px;*/ }
 #goTopNow i { margin: 12px 0px 0px 14px;  }

.containerPAGE { font-size: 120%;}

body.kv .containerTITEL .topLogo { width: 100px; height: 115px; background-size:100% auto; margin-bottom: 16px;}
body.hk .containerTITEL .topLogo { width: 115px; height: 120px; background-size:100% auto;}
.containerTITEL .topWelcome  { display:block; position:relative; margin: 0px 0px 0px 10px;    }
.containerTITEL .topWelcome h1, .containerTITEL .topWelcome h2 { border: 0px; color: #fff; text-shadow: #000 2px 2px 3px;    }
body.kv .containerTITEL .topWelcome h1 { font-size: 135%; letter-spacing: -1px;    }
body.kv .containerTITEL .topWelcome h2 { font-size: 120%;  }
body.hk .containerTITEL .topWelcome h1 { font-size: 220%; font-family: "Niconne","Segoe UI", Calibri, Tahoma, Geneva, sans-serif;  }
body.hk .containerTITEL .topWelcome h2 { font-size: 180%; color: #f589ab; margin-top: -10px; font-family: "Niconne","Segoe UI", Calibri, Tahoma, Geneva, sans-serif;  }

.containerFOOTER div {  text-align:center; padding: 0px 15px; width:auto; }
.containerFOOTER .blockLeft { display:block; width: auto;}
.containerFOOTER .blockRight {  display:block; width: auto; }




	/* 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;  }*/
	body.kv nav ul li:hover > a { background-color:#0e4b10 !important;     } 								/* TopMenu Hover*/
	body.kv nav ul li.active:hover > a { background-color: #093e0a !important;     } 						/* TopMenu Hover - Aktives Element*/
	body.kv nav ul li a { font-weight:100;   background-color:#19611b !important;    }						/* TopMenu Normal */
	body.kv nav ul li.active a { background-color:#093e0a !important;    }									/* TopMenu Normal - Aktiv */
	body.hk nav ul li:hover > a { background-color:#33101c !important;     } 								/* TopMenu Hover*/
	body.hk nav ul li.active:hover > a { background-color: #260a13 !important;     } 						/* TopMenu Hover - Aktives Element*/
	body.hk nav ul li a { font-weight:100;   background-color:#4d1628 !important;    }						/* TopMenu Normal */
	body.hk nav ul li.active a { background-color:#260a13 !important;    }									/* TopMenu Normal - Aktiv */
	
	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;    } /* Child-Menu Hover */
	/* Hoverdesign Childs */
	nav ul li ul li.active { color: #180c0a; }
	nav ul li ul li.active a.mnu {  color: #000;  font-weight:600;  }
	nav ul li ul li.active a.mnu:hover { 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: 12px 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) */	
	.topMenu { display:block; background: url(/images/layout/mobileNav.png) no-repeat 20px 2px; width: 100%; min-height: 36px;    }
	.topMenu.noJS:hover > .mobileNavItem { display:none;  } 
	.topMenu.noJS:hover > p { display:none;   } 
	.topMenu.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-top: 0px solid #fff;  border-left: 0px; border-right: 0px; font-size: 145%;   }
	.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 .topLogo  {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 3px #fff; color: rgba(255,255,255,0);  }
	body.overload .topWelcome h1,body.overload .topWelcome h2  {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 3px #fff; color: rgba(255,255,255,0);  }
	body.overload .topSuche  { display:none;  }
	body.overload .containerFOOTER .blockLeft  {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 3px #fff; color: rgba(255,255,255,0);  }
	body.overload .containerFOOTER .blockRight  {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 3px #fff; color: rgba(255,255,255,0);  }
	body.overload .containerFOOTER .blockFooter  {  opacity: 0.5; filter: alpha(opacity=50); text-shadow: 0 0 3px #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:#fff; position:fixed; z-index: 10; top: 0px; bottom: 0px; opacity: 0.5;	filter: alpha(opacity=50); }
	/* ### 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:100%; min-width: 160px; margin-right: 0%; 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;} */

