/**************************************************************
  hpk2 Farbschema Layout 10 orange/dunkelorange/grau color #ef7f01/#0d3f94/#2b2b2b
**************************************************************/

/* Outfit */
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit-wght.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
h1 {
	font-family: 'Outfit', sans-serif;
    font-weight: bold;
}

h2 {
	font-family: 'Outfit', sans-serif;
    font-weight: bold;
	font-size: 1.7em;
    
}
h3 {
	font-family: 'Outfit', sans-serif;
    
}
h4 {
	font-family: 'Outfit', sans-serif;
    
}




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

body {
	background: #000;
	font-size: 1em;
}

header {
    box-shadow: 0 0 10px #222;
	background: #000
}


header #logo2 img {
    height: auto;
    max-width: 120px;
	    padding-top: 4px;
    padding-bottom: 4px;
	background-color: #fff;
	}
#logo2 img {
    height: auto;
    max-width: 120px;
	    padding-top: 4px;
    padding-bottom: 4px;
	background-color: #fff;
	}

footer {
	background: #2b2b2b;
}

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

body a{
	color: #F8EA1A;
}

.middle-content a:hover,
.middle-content a:focus {
	color: #F8EA1A;
}

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

/********** Links/Button *******************/

#inhalt .box a.link-typ1, #inhalt .box a.link-typ2 {
    position: absolute;
    bottom: 18px;
    border-radius: 2px;
    border: solid;
    padding: 5px;
	font-size: small;
	}

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

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

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

#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 #222;
}

#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: #2b2b2b;
}

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

.trustpilot-widget {
    margin:auto;
}

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

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

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

.divider {

    margin: 40px;
}
hr {
    background-color: #2b2b2b;
}

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

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

@media only screen and (min-width: 1080px) {
	#headernavi {
		background: #F8EA1A;
		color: #000;
	}
	
	header .ebene1 > a {
		color: #000;
		font-family: 'Outfit', sans-serif;
	}
	
	header .ebene1 > a:hover {
		color: #fff;
	}
	
	ul.zentralmenue {
		border-right: 3px solid #2b2b2b;
	}
	
	.zentralmenue a {
		color: #666;
	}
}

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

.suchenav {   
	padding: 0.05em 0.5em;
}

.suchenav .fa-search {
    font-size: 1.21em;
    font-weight: 500;
}
.suchenav a,
.suchetext_submit {
	color: #000;
}
.suchenav a {
    padding: 0;
	}

.suchenav a:hover {
	color: #f4c63a; 
}

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

.suchetext_input {
	background: #000;
}

.suchetext_submit {
	background-color: #f4c63a;
}

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

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

.tx-indexedsearch-searchbox {
	background: #2b2b2b;
}

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

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

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

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

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

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

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

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

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

.partner  img{
border-radius: 10px;
}

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

/********** mitarbeitersuche *******************/

#c434490 a.link-typ1 {
    /* Button auf Startseite */
    position: relative !important;
    bottom: -1px !important;
    border-radius: 2px !important;
    border: solid !important;
    padding: 5px !important;
    font-size: small !important;
}

#ajaxcontainer .csc-frame.layout-6 {
margin-bottom: 40px !important;
    }


/********** social *******************/

#sociallinks a {
    border-radius: 7px;
    margin-right: 5px;
}

/********** 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;
	margin-bottom: 0.3em;
}

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

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

.hpk_kon_formset input[type="submit"]:hover {
	background: #F8EA1A;
	border-color: #F8EA1A;
	color: #f4c63a;
}

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

.slider {
	background-color: #F8EA1A;
	border-bottom: 15px solid #F8EA1A;
}
.slider-wrapper
#slider {
    border-radius: 0 0 0% 0 / 0 0 0% 0;
}

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

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

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

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

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

.news-container {
	background: #212121;
}

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

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

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

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

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

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

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

div.newsdatum {
	background: #F8EA1A;
	color: #000;
}

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

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

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

a.open-cookies.open-div.cookie-icon-button {
    color: #fff;
}

.cookie-content {
	background: #000;
	box-shadow: 0 0 5px #222;
}

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

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

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

.cookie-note {
	color: #999;
}

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

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

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

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

.cookie-list {
	background: #000;
} 

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

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

.cookie-button,
.dismiss-cookies.cookie-button,
input[type="submit"] {
  background: #F8EA1A;
  border-radius: 26px;
  color: #000;
  font-weight: bold;
  height: 50px;
  text-transform: uppercase;
}

.cookie-button:hover,
input[type="submit"]:hover{
  background: #eaeaea;
  color: #f4c63a;
}

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

footer {
	background: #2b2b2b;
}

footer a {
	color: #fff;
}

footer a:hover {
	color: #F8EA1A;
}

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

/********** 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;
	}
}

/*****************************************************/
/**************** Switch Schalter *****************/
/*****************************************************/
.homepage-form .cookie-checkbox:checked + label .switch-background,
.cookie-group-switch .cookie-checkbox:checked + label .switch-background {
	background: #F8EA1A;
}

#slider .flexslider .flex-caption div {
  color: #000;
}


.map_hinweis_button {
    background: #F8EA1A;
	color: #000;
	}
	
.map_hinweis_holder {
    background: #000;
	}