@charset "utf-8";

*{padding:0;margin:0} 

/* =============================================================================
   Basis
   ========================================================================== */

/*
  * 1. Die Anpassung der Textgröße führt in IE6/7 zu merkwürdigen Resultaten, wenn die Schriftgröße des Bodytexts in em-Einheiten angegeben ist
 * 2. Erzwingen einer vertikalen Bildlaufleiste in Nicht-IE-Browsern
 * 3. Verhindern der iOS-Textgrößenanpassung beim Ändern der Geräteausrichtung ohne den Benutzerzoom zu deaktivieren: h5bp.com/g
 */

html {
	font-size: 100%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-size: 12px;
	/*line-height: 1.231;*/
}

#helpContainerOneRow,#helpContainerTwoRows,#helpContainerThreeRows{display:none}


body, button, input, select, textarea { font-family: "Signika Negative",Arial,Helvetica,sans-serif; color: #222; }
img, object, embed, video {
	/*max-width: 100%;*/
}

/* Layout der HJR Microsite */
.containerStart h1{
	font-size: 30px;
	color: #333;
	font-weight: 400;
}

.containerStart h2{
	font-size: 20px;
	line-height: 20px;
	color: #666;
	font-weight: 400;
	padding-top:20px;
}

.containerStart p{
	font-size: 14px;
	color: #666;
	font-weight: 300;
}

.containerStart a, .containerStart a:hover{
	font-size: 14px;
	font-weight: 300;
}

#logo a {
    width: 219px;
    height: 69px;
    background: url("logoBig.png") no-repeat scroll 0% 0% transparent;
	display:block;
}

/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}

.clear{clear:both}

/* Layout für Mobilgeräte: 480 px oder weniger. */

a, a:hover{
	color:#ff6600;
	text-decoration:none;
	font-size:12px;	
}
a:hover{color:#000}

.bold{font-weight:bold}

.linkText, .linkText:hover{cursor:pointer}

#container{}

.gridContainer {
	margin:0 auto;
	width: 302px;
}

.container302, .container462{
	width:300px; 
	height:250px;

	border:1px solid #e1e1e1;
	float:left;	
	margin:0 18px 18px 0;
	overflow:hidden;
	position:relative;
	z-index:0;
}

.container302 .headlineBox, .container462 .headlineBox{
	background:url(contentHeadlineBox.png) repeat-x top;
	padding:14px 9px 14px 14px;
	position:absolute;
	left:0;
	top:0;
	width:277px;	
	z-index:500;
	min-height:28px;
}
.container462 .headlineBox{width:437px;}

.container302 .headlineBox h2, .container462 .headlineBox h2{
	color:#ff6600;	
	font-size:16px;
	font-weight:bold;
	text-shadow: 1px 1px #fff;
}

.container302 .headlineBox .text, .container462 .headlineBox .text{
	color:#000;	
	font-size:12px;
	text-shadow: 1px 1px #fff;
}

.container302 .headlineBox .headlineBoxContent, .container462 .headlineBox .headlineBoxContent{
	float:left;
	width:247px;
}

.container302 .headlineBox .headlineBoxArrow, .container462_302 .headlineBox .headlineBoxArrow{
	float:left;
	width:22px;
	margin-left:8px;
}

.container302 .headlineBox .headlineBoxArrowBack{
	float:left;
	width:22px;
	margin-right:8px;	
}

#logo{
	float:left;
	width:219px;	
}

#menu, #menuSmartOpener{
	/*background-color:#F39*/
}

#menu, #menuSmartContainer, #menuSmartClose, #kontaktSmart, #search, #searchSmart, .searchSuggestBox, .loginBox, #breadcrumb{
	display:none;	
}

#searchSmart,#search{position:relative}

footer{
	background:#e3e3e3 url("backTop.jpg") top repeat-x;
	border:1px solid #e1e1e1;
	padding:14px 14px 5px 14px;
	font-size:12px;
	color:#000;
	text-shadow: 1px 1px #fff;
	margin-bottom:18px;
}

.footernavi{color:#ff6600;font-weight:bold}

a.footer, a.footer:hover{
	color:#ff6600;
	text-decoration:none;
	font-weight:bold;
}

a.footer:hover{color:#000}

footer h1{
	font-size:14px;	
}

.footerContent{
	float:left;
	width:287px;
	margin:0 18px 18px 0;
}

#footerSeparator{
	background:url(footer/trenner.png) repeat-x;
	width:100%;
	height:2px;	
}

.trennerMagenta{
	border-top:1px solid #ff6600;
}

.trennerGrey{
	border-top:1px solid #e1e1e1;
}

.searchSuggestBox{
	position: absolute;
	background-color: #fff;
	border: 1px solid #ff6600;
	border-top: 0 none;
	z-index:1000;
	-webkit-box-shadow:  0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    box-shadow:  0px 2px 6px 0px rgba(0, 0, 0, 0.5);
}

.searchSuggestBox a, .searchSuggestBox a:hover{
	color:#ff6600;
	text-decoration:none;	
}
.searchSuggestBox a:hover{color:#000}


/*buttons*/

div.buttonMagenta, div.buttonMagenta:hover, a.buttonMagenta, a.buttonMagenta:hover{
	background:url(button/back.png) repeat-x;
	display:inline-block;
	height:35px;
	padding:0 9px;
	color:#fff;
}
div.buttonMagenta, div.buttonMagenta:hover{cursor:pointer}
div.buttonMagenta:hover,a.buttonMagenta:hover{background:url(button/backHover.png) repeat-x;}
div.buttonMagenta>span, a.buttonMagenta>span{
	display:block;
	padding-top:8px;
}

/*end buttons */

.loginBox{
	position:absolute;
	right:0;
	top:50px;
	width:300px;
	background-color: #fff;
	border: 1px solid #ff6600;
	border-top: 0 none;
	z-index:1000;
	-webkit-box-shadow:  0px 2px 6px 0px rgba(0, 0, 0, 0.5);
    box-shadow:  0px 2px 6px 0px rgba(0, 0, 0, 0.5);	
}




#detailContent h1, #detailPrintContainer h1{
	font-size:16px;
	color:#000;	
	font-weight:bold;
}

#detailContent h2, #detailPrintContainer h2{
	font-size:14px;
	color:#5f5f5f;
	font-weight:bold;	
}

#detailContent .socialBar{
	border-top:1px solid #e1e1e1;
	border-bottom:1px solid #e1e1e1;	
	padding:5px 0;
	margin:7px 0;
}

input[type="text"],input[type="password"],textarea{
	background:#fff url(backgroundInput.jpg) top repeat-x;	
	border:1px solid #ff6600;
}
input[type="text"], input[type="password"]{
	height:32px;	
}


/* login box and labels  */
.inputContainer{margin-bottom:3px}	
									
.inputContainer {
    position: relative;
    width: 188px;
}

.inputContainer label {
    color: #333333;
    left: 14px;
    position: absolute;
    top: 6px;
}

.inputContainer label.focus {
	color:#999;	
}
.inputContainer label.active {
	display:none;	
}

.inputContainer label .mandatory {
    color: #C50050;
    font-weight: bold;
}

.textbox{
    border: 1px solid #CCCCCC;
    color: #000000;
    font-size: 1.083em;
    font-weight: normal;
    height: 27px;
    line-height: 13px;
    margin: 0;
    padding: 0 8px;
    resize: none;
    width: 170px;
	display:block;
}

/* end login box and labels */

.searchEntry h2{margin:4px 0;font-weight:normal !important;color:#000 !important}

.imageContainer{
	text-align:center;
	padding:5px 0 15px 0;
}

#detailPrintContent{width:100%;border:0 none;padding:0;margin-top:20px}
#print{display:none}


#detailContent #innerContent{
	border:1px solid #e1e1e1;
	padding:14px;
}


.highlight{background-color:#ededed}


.width100{width:100% !important}
.noMarginRight{margin-right:0 !important}
@media print{
	#printButton,#closePrintView{display:none}
	body,footer,#footerBig {
		background:0 none;
	}
}


/* Layout für smartphone max width 659*/

@media only screen and (min-width: 0px) and (max-width:641px) {
	/* hide and show */
	#helpContainerTwoRows,#helpContainerThreeRows,#menu,#search,#footerMiddle,#footerBig,#contentMiddle,#contentBig,.print,.detailBigImage{display:none}
	#helpContainerOneRow,#menuSmartContainer,#kontaktSmart,#searchSmart,#footerSmall,#contentSmall,.detailSmallImage{display:block}
	/* end hide and show */
	
	.social_share_privacy_area {height:72px !important}
	ul.social_share_privacy_area li{float:none !important;height:22px;}
	.social_share_privacy_area li.settings_info{top:0 !important;position:absolute !important;right:0 !important} 
	/*.social_share_privacy_area li.settings_info .settings_info_menu {top:-69px !important;left:130px !important}
	.social_share_privacy_area li.settings_info .settings_info_menu {width:55px;}*/
	
	#socialShareCloseButton{display:block !important;font-size:16px;font-weight:bold;padding:3px 0;maring-top:7px;cursor:pointer}
	
	.social_share_privacy_area{position:relative;}
	
	.imageContainer img{max-width:272px;}

	.loginBox{top:1px;}
	
	.container302{
		margin:0 0 18px 0;
		float:none;
	}

#menu, #menuSmartContainer, #menuSmartClose, #kontaktSmart, #search, #searchSmart, .searchSuggestBox, .loginBox, #breadcrumb{
	display:none;	
}
	
	#container{
		position:relative;
		width:302px;
		margin:0 auto;
	}
	
	#header{margin:9px 0 6px 0;}

	.footernavi{margin-bottom:5px !important}
	footer{margin-bottom:80px;}
	
	#footerSmall .footerContent{float:none}
	
	/*fix to deactivate zoom on ios safari */
	input[type="text"], input[type="password"], input[type="phone"],  textarea {font-size:16px !important;}
	
	#detailContent{
		width:302px;
		background-color:#fff;
		margin-bottom:18px;
	}
	
	#boxContainer{width:302px;}
	
	#boxContainer .container302{float:none}
	
}


/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 642px) {
	
	/* hide and show */
	#helpContainerTwoRows,#menu,#search,#footerMiddle,#contentMiddle,.detailBigImage{display:block}
	#helpContainerOneRow,#helpContainerThreeRows,#menuSmartContainer,#kontaktSmart,#searchSmart,#footerSmall,#footerBig,#contentSmall,#contentBig,.detailSmallImage{display:none}
	/* end hide and show */
	
	.imageContainer img{max-width:592px;}
	
	.gridContainer {width: 622px;}
	
	#header{margin:12px 0 8px 0;}

#menu, #menuSmartContainer, #menuSmartClose, #kontaktSmart, #search, #searchSmart, .searchSuggestBox, .loginBox, #breadcrumb{
	display:none;	
}
	
	#menu{
		float:right;
		width:464px;
		padding-top:31px;
	}
	
	#menu a, #menu a:hover,
	#menu a.active, #menu a.active:hover{
		color:#ff6600;	
		text-decoration:none;
		display:block;
		text-align:center;
		margin-left:10px;
		text-transform:uppercase;
		font-size:12px;
	}
	
	#menu a:hover,#menu a.active, #menu a.active:hover{color:#636363}
	
	#logo{width:219px;}

	#logo a{
		width:219px;
		height:69px;
		background:url(logoBig.png) no-repeat;	
	}
	
	#search{
		background:url(searchBackMiddle.png) no-repeat;
		width:622px;
		height:50px;
		position:relative;	
	}
	#searchInput{
		position:absolute;
		left:22px;
		top:15px;
		width:364px;	
	}
	
	#searchInput input{
		border:0 none;
		width:360px;	
		font-size:14px;
		color:#6d6d6d;
		text-transform:uppercase;
		background:0 none;
		height:20px;
	}
	
    #searchButton{
		position:absolute;
		left:406px;
		top:7px;
		width:49px;	
	}
	
	#searchKontakt{
		position:absolute;
		/*left:479px;*/
		left:508px;
		top:16px;
		font-size:14px;
		color:#fff;
		text-shadow: 1px 1px #555555;
		text-transform:uppercase;
	}
	
	#searchKontakt a, #searchKontakt a:hover, #searchKontakt .linkText, #searchKontakt .linkText:hover{
		color:#fff;
		text-decoration:none;
		font-size:14px;
	}
	
	#searchKontakt a:hover, #searchKontakt .linkText:hover{color:#000}
	
	.searchSuggestBox{
		left:6px;
		top:50px;
		width:448px;
	}
	
	#detailContent{
		width:622px;
		background-color:#fff;
		margin-bottom:18px;
	}
	
	#boxContainer{width:622px;}
	
	#boxContainer .container302{
		float:left;
	}
	
	#boxContainer .container302:nth-child(2){
		margin:0 0 18px 0;
	}
	
	
}

/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 962px) {
	
	/* hide and show */
	#helpContainerOneRow,#helpContainerTwoRows,#footerSmall,#footerMiddle,#contentSmall,#contentMiddle{display:none}
	#helpContainerThreeRows,#footerBig,#contentBig{display:block}
	/* end hide and show */
	
	.gridContainer{width: 942px;}
	
	.container462{width:460px;height:325px}
	
	#header{margin:12px 0 8px 0;}

#menu, #menuSmartContainer, #menuSmartClose, #kontaktSmart, #search, #searchSmart, .searchSuggestBox, .loginBox, #breadcrumb{
	display:none;	
}
	
	#menu{
		float:right;
		width:785px;
		padding-top:10px;
		
	}
	
	#menu a, #menu a:hover,#menu a.active, #menu a.active:hover{font-size:16px;margin-left:20px;}
	
	#logo{width:219px;}
	
	#logo a{
		width:219px;
		height:69px;
		background:url(logoBig.png) no-repeat;	
	}
	
	#search{
		background:url(searchBackBig.png) no-repeat;
		width:942px;
		height:50px;
		position:relative;	
	}
	#searchInput{
		position:absolute;
		left:22px;
		top:15px;
		width:666px;	
	}
	
	#searchInput input{
		border:0 none;
		width:662px;	
		font-size:16px;
		color:#6d6d6d;
		text-transform:uppercase;
		background:0 none;
	}
	
    #searchButton{
		position:absolute;
		left:702px;
		top:7px;
		width:49px;	
	}
	
	#searchKontakt{
		position:absolute;
		left:810px;
		/*left:779px;*/
		top:15px;
		font-size:16px;
		color:#fff;
		text-shadow: 1px 1px #555555;
		text-transform:uppercase;
	}
	
	#searchKontakt a, #searchKontakt a:hover, #searchKontakt .linkText, #searchKontakt .linkText:hover{
		color:#fff;
		text-decoration:none;
		font-size:16px;
	}
	
	#searchKontakt a:hover, #searchKontakt .linkText:hover{color:#000}
	
	
	#detailContent{
		width:622px;
		background-color:#fff;
		float:left;
		margin-right:18px;
	}
	
	#boxContainer{
		width:302px;
		float:left;	
	}
	
	#boxContainer .container302{
		float:none;
		margin:0 0 18px 0;
	}
	
	.container462 .headlineBox .headlineBoxContent{width:415px;}
	
}