/**************************************************************
  hpk2 Farbschema Layout 10 rot color #d51130 und #f2f2f2
**************************************************************/

/********** Allgemein *******************/

body {
	background: #fff;
}

header {
    box-shadow: 0 0 10px #aeaeae;
}

footer {
	background: #f2f2f2;
}

body,
body a,
header .tx-hpkfe-pi-adresse a { 
	color: #666;	
}

body a:hover,
body a:focus {
	color: #c1102c;
}

#inhalt.content h1#titelueberschrift,
body h1, body h2, body h3, body h4, body h5, body h6,
.newstitlesingle {
	color: #d51130;
}

/********** Boxen *******************/

#inhalt .csc-frame.box,
#inhalt .IM.box.normal,
#inhalt .csc-frame.layout-6 {
	background-color: #f2f2f2;
	border-bottom: .15em solid #f2f2f2;
}

#inhalt .IM.box.spalte,
#inhalt .csc-frame.box.layout-0 {
	background: #fff;
}

#inhalt .IM.box.ID-27.normal:hover,
#inhalt .csc-frame.layout-6:hover,
#inhalt .csc-frame.layout-9:hover,
#inhalt .csc-frame.layout-10:hover {
	box-shadow: 0 0 10px #aeaeae;
}

#inhalt .IM.box.ID-3.inhalt,
#inhalt .IM.box.ID-4.inhalt,
#inhalt .IM.box.ID-3.inhalt.layout-0,
#inhalt .IM.box.ID-4.inhalt.layout-0 {
	background: #f2f2f2;
}

#inhalt .IM.box.ID-4.inhalt {
	border-bottom: .15em solid #f2f2f2;
}

@media only screen and (max-width: 640px) {
	#inhalt .IM.box.inhalt, 
	#inhalt .IM.box.normal {
		border-bottom: .15em solid #f2f2f2;
	}
}

/********** Header **************/

@media only screen and (min-width: 1080px) {
	header {
		position: sticky;
		top: 0;
	}
}

/************ Navigation *****************/

@media only screen and (max-width: 1079px) {
	.mobil-container,
	body #mobil,
	body #suchemobil {
		background: #d51130;
	}
	
	body ul.handymenue,
	.flexnav li	{
		background: #f2f2f2;
	}
	
	#mobil a {
		color: #fff;
	}
	
	#handymenue a {
		color: #666;
	}
}

@media only screen and (min-width: 1080px) {
	#headernavi {
		background: #d51130;
		color: #fff;
	}
	
	header .ebene1 > a {
		color: #fff;
	}
	
	header .ebene1 > a:hover {
		color: #670d1b;
	}
	
	ul.zentralmenue {
		border-right: 3px solid #f2f2f2;
	}
	
	.zentralmenue a {
		color: #666;
	}
}

/******************* Suche ********************/

.suchenav a,
.suchetext_submit {
	color: #fff;
}

.suchenav a:hover {
	color: #670d1b; 
}

.suchenav a,
#suchefont {
	background: #d51130;
}

.suchetext_input {
	background: #fff;
}

.suchetext_submit {
	background-color: #c1102c;
}

@media only screen and (max-width: 1079px) {
	#mobil #suchemobil,
	#suchemobil .tx-macinasearchbox-pi1	{
		background: #bf102c;
	}
}

/********** Suche Seite / Ergebnisse *******************/

.tx-indexedsearch-searchbox {
	background: #f2f2f2;
}

.tx-indexedsearch .tx-indexedsearch-noresults {
	color: #d51130;
}

/********** Produktlösungen *******************/

.produktloesungen .box.normal.layout-0 {
	border-bottom: .15em solid #f2f2f2;
}

#inhalt .produktloesungen .box.normal.layout-0:hover {
	box-shadow: 0 0 10px #aeaeae;
}
 
#inhalt .herstellerlink a {
	color: #666;
}
 
 #inhalt .herstellerlink a:hover {
	color: #d51130;
}

/********** Bewertungen *******************/

.bewertungen-list-item {
	background-color: #f2f2f2;
}

@media only screen and (min-width: 1080px) {
	.sidenav .layout-13 {
		background: #d51130;
	}
	
	.sidenav .layout-13 .bewertungen-boxhoch-item {
		border-top: 1px solid #fff;
	}
	
	.sidenav .layout-13,
	.sidenav .layout-13 h2,
	.sidenav .layout-13 p,
	.sidenav .layout-13 a {
		color: #fff;
	}
}

/********** Uploads *******************/
 
.csc-uploads li.csc-uploads-element {
	 border-top: 1px solid #ddd;
 }

/********** Partner *******************/

#inhalt.content .tx-hpkfe-pi-partner .partner {
	background: #f2f2f2;
}
 
#inhalt.content .tx-hpkfe-pi-partner .partner:hover {
	box-shadow:  0 0 10px #aeaeae;
}

/********** Fotos *******************/

div.csc-textpic-border div.csc-textpic-imagewrap img {
	border: 1px solid #ddd;
}

/********** Formulare *******************/

body input,
body textarea,
body select,
body button,
input.hpk_anf_start, 
input.hpk_anf_ziel,
body .hpk_kon_formset select, 
body .hpk_kon_formset input, 
body .hpk_kon_formset textarea {
	background: #eaeaea;
	color: #666;
}

.hpk_kon_container span.sternchen {
	color: #d51130;
}

input[type="submit"],
.hpk_kon_formset input[type="submit"] {
	background: #d51130;
	border: 1px solid #d51130;
	color: #fff;
}

input[type="submit"]:hover,
.hpk_kon_formset input[type="submit"]:hover {
	background: #d51130;
	border-color: #d51130;
	color: #670d1b;
}

/******************* Slider *******************/

.slider {
	background-color: #d51130;
	border-bottom: 15px solid #d51130;
}

.flex-control-nav li a {
	background: #fff;
}

.flex-control-nav li a.active {
	background: #d51130;
}

@media only screen and (max-width: 1079px) {
	.flexcaption {
		background: #bf102c;
	}
	
	.flexcaption .flextitle,
	.flexcaption .flexsubtitle,
	.flexcaption .flexsubtitle a {
		color: #fff;
	}
	
	.flexcaption .flexsubtitle a:hover {
		color: #670d1b;
	}
}

@media only screen and (min-width: 1080px) {
	.flextitle {
		background: #d51130;
		color: #fff;
	}
	
	.flexcaption .flexsubtitle {
		background: #fff;
		border: 2px solid #d51130;
	}
}

/*********** News individuelle Einstellungen *********/

.news-container {
	background: #ddd;
}

div.news-latest-container,
span.news_latest_title > a {
	color: #666;
}

.news-latest-item p.detailsansehen > a {
	color: #fff;
	background: #d51130;
}

.news-latest-item p.detailsansehen > a:hover {
	color: #670d1b;
}

/********** Nachrichten *******************/

.news-list-container {
	background: #fff;
}

.sidenav .news-latest-container,
div.news-list-item {
	background: #f2f2f2;
}

div.news-list-item:hover {
	box-shadow: 0 0 10px #aeaeae;
}

div.newsdatum {
	background: #d51130;
	color: #fff;
}

@media only screen and (min-width: 1080px) {
	
	.sidenav .news-latest-container {
		background: #d51130;
	}
	
	.sidenav .news-latest-container,
	.sidenav .news-latest-container a {
		color: #fff;
	}
}

/********** Cookie **************/

.cookie-wrapper {
	background: rgba( 0, 0, 0, 0.75 );
	box-shadow: 0 0 5px #aeaeae;
}

.cookie-content {
	background: #fff;
	box-shadow: 0 0 5px #acacac;
}

.save-cookies.cookie-button {
	background: #d51130;
    color: #fff;
}

.cookie-content fieldset:nth-child(odd),
.cookie-list li:nth-child(odd) {
	background: #f2f2f2;
}

.cookie-content fieldset:nth-child(even),
.cookie-list li:nth-child(even) {
	background: #eaeaea;
}

.cookie-text a {
	color: #d51130;
}

.cookie-note {
	color: #999;
}

.dismiss-cookies {
	background: #ddd;
	color: #555;
}

.cookie-list-link {
    background: #fff;
    border: 1px solid #aaa;
	color: #aaa;
}

.cookie-list-link:hover {
    background: #d51130;
    border: 1px solid #d51130;
    color: #fff;
}

.cookie-list-link:before:hover {
	color: #fff;
}

.cookie-list {
	background: #fff;
} 

.cookie-list li li:nth-child(odd),
.cookie-list li li:nth-child(even) {
	background: transparent;
}

.cookie-icon-wrapper {
	background: #ddd;
}


/********** Footer **************/

footer {
	background: #f2f2f2;
}

footer a {
	color: #666;
}

.footer-links ul li:hover {
	color: #d51130;
}

/********** FadeIn Effekt **************/

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

#inhalt.content .tx-hpkfe-pi-partner .partner,
#inhalt .IM.box.ID-27.normal,
.csc-frame.box.layout-6,
 .news-list-item {
	opacity:0;  
	-webkit-animation:fadeIn ease-in 1;  
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

#inhalt.content .tx-hpkfe-pi-partner .partner:nth-of-type(3n+3),
#inhalt .IM.box.ID-27.normal:nth-of-type(3n+3),
.csc-frame.box.layout-6:nth-of-type(3n+3),
.news-list-item:nth-of-type(3n+3) {
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	animation-delay: 0.7s;
}

#inhalt.content .tx-hpkfe-pi-partner .partner:nth-of-type(2n+2),
#inhalt .IM.box.ID-27.normal:nth-of-type(2n+2),
.csc-frame.box.layout-6:nth-of-type(2n+2),
.news-list-item:nth-of-type(2n+2) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay:1.2s;
	animation-delay: 1.2s;
}
 
#inhalt.content .tx-hpkfe-pi-partner .partner:nth-of-type(4n+4),
#inhalt .IM.box.ID-27.normal:nth-of-type(4n+4),
.csc-frame.box.layout-6:nth-of-type(4n+4),
.news-list-item:nth-of-type(4n+4) {
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay: 1.6s;
	animation-delay: 1.6s;
}

/********** Glide Effekt Startseite **************/

#seitenart-0 #inhalt {
	overflow: hidden;
}

#seitenart-0 #inhalt .csc-frame.box.layout-16,
#seitenart-0 #inhalt .csc-frame.box.layout-17	{
	position: relative;
	transition: transform 0.5s;
}

#seitenart-0 #inhalt .csc-frame.box.layout-16 {
	transform: translateX(-101%);
}


#seitenart-0 #inhalt .csc-frame.box.layout-17 {
	transform: translateX(101%);
}

html:hover #seitenart-0 #inhalt .csc-frame.box.layout-16,
html:hover #seitenart-0 #inhalt .csc-frame.box.layout-17 {
	transform: translateX(0);
}

/********** Bild-Effekt (s/W zu farbig) **************/

.box.ID-27 img,
.produktloesungen .box.layout-0 img {
	opacity: 0.7;
}
 
.box.ID-27:hover img,
.produktloesungen .box.layout-0:hover img {
	opacity: 1;
}

.box.ID-27 img,
#inhalt .csc-frame.layout-6,
#inhalt .csc-frame.layout-1 img,
#inhalt .csc-frame.layout-2 img,
#inhalt .csc-frame.layout-3 img,
.produktloesungen .box.layout-0 img,
.sidenav .news_latest_image img,
.news-list-container div.news-list-item img,
#inhalt.content .tx-hpkfe-pi-partner img,
#inhalt .box:hover .partner img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

.box.ID-27:hover img,
#inhalt .csc-frame.layout-6:hover,
#inhalt .csc-frame.layout-1:hover img,
#inhalt .csc-frame.layout-2:hover img,
#inhalt .csc-frame.layout-3:hover img,
.produktloesungen .box.layout-0:hover img,
.sidenav .news-latest-item:hover .news_latest_image img,
.news-list-container div.news-list-item:hover img,
#inhalt.content .tx-hpkfe-pi-partner .partner:hover img,
#inhalt .box:hover .partner:hover img {
	filter: none;
	-webkit-filter: none;
}

/********** IE 11 **************/

@media all and (-ms-high-contrast:none) and (min-width:1080px) {
	
	*::-ms-backdrop, header {
		height: 130px;
		position: fixed;
		width: 100%;
	}
	
	*::-ms-backdrop, .middle-container {
		margin-top: 130px;
	}
}

@media all and (-ms-high-contrast:none) and (min-width:1300px) {
	
	*::-ms-backdrop, header {
		height: 140px;
	}
	
	*::-ms-backdrop, .middle-container {
		margin-top: 140px;
	}
}

@media all and (-ms-high-contrast:none) and (min-width:1600px) {
	
	*::-ms-backdrop, header {
		height: 150px;
	}
	
	*::-ms-backdrop, .middle-container {
		margin-top: 150px;
	}
}

@media all and (-ms-high-contrast:none) and (min-width:1800px) {
	
	*::-ms-backdrop, header {
		height: 160px;
	}
	
	*::-ms-backdrop, .middle-container {
		margin-top: 160px;
	}
}