@charset "utf-8";  
@import url("font/fonts.css");
/* 
CSS Document HPK
Layout 08 - Grundaufbau, Homepage
*/

/* ============ *
 * Variablen    *
 * ============ */

 :root {
	/*text*/
	--fontMainFamily: Arial, sans-serif;
	--fontHeadingFamily: "nexa_lightregular", Arial, sans-serif;
	--fontH1Size: 1.65em;
	--fontH2Size: 1.5em;
	--fontH3Size: 1.3em;
	--fontH4Size: 1.2em;
	--fontH5Size: 1.15em;
	--fontH6Size: 1.1em;
	--fontBodySize: 0.94em;
	--fontSmallerSize: 0.8em;
	--smallText: 0.7em;


	/* !!!!!!!!11!!!!!!!!!!!!!1!!!!!!!!!!!!!! */
	/* Farben sind ZWINGEND in RGB anzugeben! */
	/*   !!!SONST EXPLODIERT EIN REHKITZ!!!	  */
	/* !!!!!1!!!!!!!!!!!!!!!!!!!!!1!1!!!!!!!! */

	/* Meldungen */
	--successColor:					109, 179,  47;
	--successHoverColor:			 86, 143,  37;
	--warningColor:					255, 117,  18;
	--warningHoverColor:			219, 100,  15;
	--errorColor:					183,   4,   4;
	--errorHoverColor:				148,   3,   3;

	/* Grauabstufungen */
	--blackColor:					  0,   0,   0; /* Zuvor: #000000 */	
	--offBlackColor:				 85,  85,  85; /* Zuvor: #555555 */
	--veryDarkColor:				102, 102, 102; /* Zuvor: #666666 & #696868*/
	--darkColor:					119, 119, 119; /* Zuvor: #777777 */
	--darkGreyColor:				153, 153, 153; /* Zuvor: #999999 */
	--greyColor:					170, 170, 170; /* Zuvor: #AEAEAE & #ACACAC & #AAAAAA */
	--lightColor:					204, 204, 204; /* Zuvor: #CCCCCC */
	--veryLightColor:				221, 221, 221; /* Zuvor: #DDDDDD */
	--offWhiteColor:				234, 234, 234; /* Zuvor: #EAEAEA & #E7E7E7 & #E6E6E6 */
	--whiteColor:					255, 255, 255; /* Zuvor: #FFFFFF */

	/* Sonstige Farben */
	--blueishLightColor:			216, 216, 216; /* Zuvor: #D8D8DF & #D6D6D6 */

	/* DarkLight Toggle */
	--lightModeBackground:			255, 210,  75;
	--darkModeBackground:			 23,  50,  71;
	--lightModeTextColor:			255, 255, 255;
	--darkModeTextColor:			246, 246, 246;
}

/* ////////////////////////// */
/* // DarkMode Adjustments // */
/* ////////////////////////// */

[data-theme="dark"] {
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
	/* Farben sind ZWINGEND in RGB anzugeben! */
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

	--blackColor:					255, 255, 255;
	--offBlackColor:				234, 234, 234;
	/*--veryDarkColor:				102, 102, 102;
	--darkColor:					119, 119, 119;
	--darkGreyColor:				153, 153, 153;
	--greyColor:					170, 170, 170;*/
	--lightColor:					119, 119, 119;
	--veryLightColor:				102, 102, 102;
	--offWhiteColor:				 35,  45,  50;
	--elementsBackGround: 			 27,  37,  42;
	--whiteColor:					  0,   0,   0;

	--bs-navbar-toggler-icon-bg-dark:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ====================== * 
 * Dark Light Mode Switch *
 * ====================== */

.darkLightSwitchWrapper {
	padding:0.5em;
	border:1px solid rgb(var(--whiteColor));
	width:9.0em;
	height:2.5em;
	border-radius:2.5em;
	position:absolute;
	top: 64px;
	right: 15px;
	cursor:pointer;
	font-size:0.9em;
}

.initLightMode {
	border-color:rgb(var(--whiteColor));
	background-color:rgb(var(--lightModeBackground));
	box-shadow: 0.0em 0.0em 0.5em rgb(var(--lightModeBackground));
}

.initDarkMode {
	border-color:rgb(var(--offWhiteColor));
	background-color:rgb(var(--darkModeBackground));
	box-shadow: 0.0em 0.0em 0.5em rgb(var(--darkModeTextColor));
}

.initLightMode .darkToggle, .initLightMode #darkToggleText,
.initDarkMode .lightToggle, .initDarkMode #lightToggleText {
	opacity:0;
}

.darkLightSwitchWrapper svg {
	height:1.5em;
	fill:rgb(var(--textColor));
}

#darkToggleText {
	position:absolute;
	left:1em;
	top:0.55em;
	color:rgb(var(--darkModeTextColor));
}

#lightToggleText {
	position:absolute;
	right:1em;
	top:0.55em;
	color:rgb(var(--lightModeTextColor));
}

.darkLightToggleWrapper {
	position:absolute;
	left:1em;
	top:0.4em;
	width:1.5em;
}

.initDarkMode .darkLightToggleWrapper {
	left:calc(100% - 2.0em);
}

.lightToggle, .darkToggle {
	position:absolute;
	left:0;
	top:0;
}

.lightToggle svg {
	fill:rgb(var(--lightModeTextColor));
}

.darkToggle svg {
	fill:rgb(var(--darkModeTextColor));
}

@keyframes toggleToDarkMode {
	from {
		background-color:rgb(var(--lightModeBackground));
		border-color:rgb(var(--whiteColor));
		box-shadow: 0.0em 0.0em 0.5em rgb(var(--lightModeBackground));
	} to {
		background-color:rgb(var(--darkModeBackground));
		border-color:rgb(var(--offWhiteColor));
		box-shadow: 0.0em 0.0em 0.5em rgb(var(--darkModeTextColor));
	}
}

@keyframes toggleToLightMode {
	from {
		background-color:rgb(var(--darkModeBackground));
		border-color:rgb(var(--offWhiteColor));
		box-shadow: 0.0em 0.0em 0.5em rgb(var(--darkModeTextColor));
	} to {
		background-color:rgb(var(--lightModeBackground));
		border-color:rgb(var(--whiteColor));
		box-shadow: 0.0em 0.0em 0.5em rgb(var(--lightModeBackground));
	}
}

@keyframes toggleHide {
	from {
		opacity:1;
	} to {
		opacity:0;
	}
}

@keyframes toggleShow {
	from {
		opacity:0;
	} to {
		opacity:1;
	}
}

@keyframes toggleMoveToRight {
	from {
		left:1em;
	} to {
		left:calc(100% - 2.0em);
	}
}

@keyframes toggleMoveToLeft {
	from {
		left:calc(100% - 2.0em);
	} to {
		left:1em;
	}
}

.darkMode {
	animation-duration: 0.5s;
	animation-name: toggleToDarkMode;
	background-color:rgb(var(--darkModeBackground));
	border-color:rgb(var(--offWhiteColor));
	box-shadow: 0.0em 0.0em 0.5em rgb(var(--darkModeTextColor));
}

.darkMode .darkToggle, .darkMode #darkToggleText {
	animation-duration: 0.5s;
	animation-name: toggleShow;
	opacity:1;
}

.darkMode .lightToggle, .darkMode #lightToggleText {
	animation-duration: 0.5s;
	animation-name: toggleHide;
	opacity:0;
}

.darkMode .darkLightToggleWrapper {
	animation-duration: 0.5s;
	animation-name: toggleMoveToRight;
	left:calc(100% - 2.0em);
}

.lightMode {
	animation-duration: 0.5s;
	animation-name: toggleToLightMode;
	background-color:rgb(var(--lightModeBackground));
	border-color:rgb(var(--whiteColor));
	box-shadow: 0.0em 0.0em 0.5em rgb(var(--lightModeBackground));
}

.lightMode .lightToggle, .lightMode #lightToggleText {
	animation-duration: 0.5s;
	animation-name: toggleShow;
	opacity:1;
}

.lightMode .darkToggle, .lightMode #darkToggleText {
	animation-duration: 0.5s;
	animation-name: toggleHide;
	opacity:0;
}

.lightMode .darkLightToggleWrapper {
	animation-duration: 0.5s;
	animation-name: toggleMoveToLeft;
	left: 1em;
}

 
/* ============= * 
 * Allgemein 	 *
 * ============= */

* {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
}

body, html {
	background-image: url(/fileadmin/templates/hpk3/layouts/layout8/css/img/diagonale_streifen_grau_weiss.jpg);
	background-position: center 100px;
	font-family: var(--fontMainFamily);
	font-size: var(--fontBodySize);
	height: 100%;
	color: rgb(var(--offBlackColor));
	line-height: 1.15em;
}

body #bodyumschlag.container-fluid {
	overflow-x: hidden;
	overflow-y: hidden;
}

.row {
	max-width: 100%;
}

footer {
	border-top: 1px dotted rgb(var(--mainColor));
}

#umschlag {
	position: relative; /*macht das unter 768px etwas defekt?*/
	background-color: rgb(var(--whiteColor));
	max-width: 1270px;
	margin: 0 2% 3% 2%;
	padding: 15px 0 0;
	width: 96%;
}

#umschlag > .row {
	margin:0 auto;
}

.frame-default.frame-layout-1, .frame-default.frame-layout-2, .frame-default.frame-layout-3,
.frame-default.frame-layout-4, .frame-default.frame-layout-5, .frame-default.frame-layout-6, 
.frame-default.frame-layout-7, .frame-default.frame-layout-8, .frame-default.frame-layout-9,
.frame-default.frame-layout-10, .frame-default.frame-layout-11, .frame-default.frame-layout-13,
.frame-default.frame-layout-14, .frame-default.frame-layout-15, .frame-default.frame-layout-18,
.csc-frame.layout-7 {
	background: none;
	border-radius: 0;
	border: 1px solid rgb(var(--lightColor));
	height: inherit;
}

p { 
	margin-bottom: 8px; 
	line-height: 140%; 
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
	display: contents;
}

/*.border {
	border:none!important;
}*/ /***** Kommentar: nicht alle Boxen haben diese Klasse, führt zu Unstimmigkeiten *****/

.p-2 {
	padding: 0 !important;
}

.align-right {
	text-align: right;
}

.cookie-button,
fieldset input.hpk_kon_subm {
	border: 1px solid rgb(var(--mainColor));
	box-sizing: border-box;
	display: flex;
	color: rgb(var(--mainColor));
	justify-content: center;
	margin-bottom: 1em;
	padding: 1em;
	text-decoration: none;
	align-items: center;
}

/*--------------------------------ÜBERSCHRIFTEN----------------------------------*/

h1, h2, h3, h4, h5, h6, .hpk_adresse_kontakt {
	font-family: var(--fontHeadingFamily);
}

h1 {
	font-size: var(--fontH1Size);
}

h2, .accordion_header_content {
	font-size: var(--fontH2Size);
	line-height: 1.5em;
	font-weight: 400;
}

h3 {
	font-size: var(--fontH3Size);
}

h4, .newstitlesingle {
	font-size: var(--fontH4Size);
}

h5,.navbar-light .navbar-nav .ebene1 > a,
.navbar-light .navbar-nav .ebene2 > a,
.navbar-light .navbar-nav .ebene3 > a,
.navbar-light .navbar-nav .ebene4 > a,
.navbar-light .navbar-nav .ebene5 > a,
.navbar #kopfmenue_div a, .submenu-content,
.nav-item.ebene2 a, .submenu-headline, span.news_latest_title {
	font-size: var(--fontH5Size);
}

h6 {
	font-size: var(--fontH6Size);
}

h1, h2:not(.cookie-wrapper h2), h3, h4, h5, h6 {
	color: rgb(var(--mainColor));
}

#inhalt h1 {
	margin: 0 0 1em 0;
	width: 100%;
}

.cookie-wrapper h2 {
	font-size: 170%;
}

.box > header,
.accordion_header,
.cycle-slideshow .slide .csc-header {
	position: relative;
	z-index: 0;
}

.box > header:before,
.accordion_header:before,
.cycle-slideshow .slide .csc-header:before {
	position: absolute;
}

.box > header:before,
.accordion_header:before,
.cycle-slideshow .slide .csc-header:before,
.layout-14 .csc-header,
.layout-15 .csc-header {
	content: "";
	width: 100%;
	height: 100%;
	background: rgb(var(--veryLightColor));
	z-index: -1; /***** Kommentar: muss negativ sein, sonst wird die Überschrift auf den Herstellerseiten nicht angezeigt *****/
	top: 0;
	left: 0;
	box-sizing: content-box;
}

.layout-14 .csc-header,
.layout-15 .csc-header,
.layout-14 .csc-content,
.layout-15 .csc-content {
	margin: -15px 0 10px 0;
	padding: 6px 3px 0 15px;
}

.frame-default.frame-layout-0 .box > header:before {
	display: none;
}

.box > header > h2,
.box > header > h3,
.box > header > h4,
.box > header > h5,
.box > header > h6,
.frame-layout-13 h3,
.accordion_header .accordion_header_content,
.cycle-slideshow .slide .csc-header h2,
.frame.frame-layout-0.frame-202 > .box > header > h2 {
	padding: 6px 15px;
	position: relative;
	z-index: 1;
}

.frame-layout-13 h3 {
	background: rgb(var(--veryLightColor));
}

.frame-default.frame-layout-0 .box > header > h2 {
	padding: 0;
}

.frame-layout-15 .hpk_adr_firma {
	font-size: 125%;
	font-weight: normal;
	margin: 8px 0;
}

.accordion_header_content  {
	display: block;
}

.accordion_header {
	cursor: pointer;
}

.accordion_header > a {
	display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-left:1em;
  align-items: center;
}

.accordion_content.tx-indexedsearch-rules {
  display: none;
}

.frame-128.frame-layout-30 h3 {
	color: rgb(var(--whiteColor));
}

/*----------------------------------LINKS------------------------------------*/

body a,
body .nav-link
 { /*mit body, damit bootstrap überschrieben wird*/
	color: rgb(var(--mainColor));
	text-decoration: none;
}


body a:focus, /*mit body, damit bootstrap überschrieben wird*/
body a:hover,
.nav-link:hover,
.nav-link:focus {
	color: rgb(var(--offBlackColor));
}

header a {
	color: rgb(var(--offBlackColor));
}

a.link-typ1:focus,
a.link-typ1:hover,
a.link-typ2:focus,
a.link-typ2:hover,
a.link-typ3:focus,
a.link-typ3:hover,
p.detailsansehen a:focus,
p.detailsansehen a:hover,
#fussmenue li {
  background: url("img/typ3-grau.png") no-repeat scroll 0px 6px transparent;
}

/* a.link-typ1,
a.link-typ2,
a.link-typ3  {
	padding-left: 15px;
} */

a.link-typ1::before,
a.link-typ2::before,
a.link-typ3::before,
p.detailsansehen a::before  {
	font-family: FontAwesome;
	content: "\f18e";
	margin-right: 0.5em;
	font-weight: 900;
	color: rgb(var(--mainColor));
	font-size: 1.1em;
}

/* #inhalt .box a.link-typ1:not(#inhalt .frame-layout-0 .frame-layout-0 .box a.link-typ1),
#inhalt .box a.link-typ2:not(#inhalt .frame-layout-0 .frame-layout-0 .box a.link-typ2) {
	position: absolute;	
	bottom: 18px;
} */

.link-typ1 {
	position: absolute;	
	bottom: 18px;
}

.frame-128 .link-typ1 { /***** Kommentar: Links bei den Produktlösungen auf Beratungsseiten wurden nicht richtig dargestellt *****/
	position: relative;
	bottom: auto;
}

.frame-128 .link-typ1:before {
	display: none;
}

#inhalt .box a.link-typ1:not(#inhalt .frame-layout-0 .frame-layout-0 .box a.link-typ1)::before {
	font-family: FontAwesome;
	content: "\f18e";
	margin-right: 0.5em;
	color: rgb(var(--mainColor));
}

#inhalt .box .textlinks a.link-typ1, 
#inhalt .box .textlinks a.link-typ2 {
	position: static;
}


/*.frame-default.frame-layout-1 strong .link-typ1,
.frame-default.frame-layout-2 strong .link-typ1,
.frame-default.frame-layout-3 strong .link-typ1 {
	font-weight: normal;
}*/

#inhalt .box strong a.link-typ1:not(#inhalt .frame-layout-0 .frame-layout-0 .box strong a.link-typ1) {
	font-weight: normal;
}

#inhalt .herstellerlink a,
.align-right a:hover {
	text-decoration: none;
}

.navbar-light .navbar-nav .ebene1 > a {
	padding-left: 0;
}

.navbar-light .navbar-nav .ebene1 > a,
.navbar-light .navbar-nav .ebene3 > a,
.navbar-light .navbar-nav .ebene4 > a,
.navbar-light .navbar-nav .ebene5 > a,
.navbar #kopfmenue_div a {
	padding-right: 0.5rem; /*paddings für Kopfmenü ab 768px*/
	padding-left: 0.5rem; /***** Kommentar: Paddings entfernt, da vereinfacht geschrieben. 
								Leider interessiert sich die weiße Trennlinie im Menü nicht für Vereinfachungen. *****/ 
	/*font-size: 115%;*/
}

.navbar-light .navbar-nav .ebene1 > a,
.navbar #kopfmenue_div a {
	color: rgb(var(--whiteColor));
}

.hpk_impressum a,
a.link-typ-underline,
.hpk_datenschutz a,
.align-right a { 
  text-decoration: underline; 
}

/*----------------------------------FORMULARE----------------------------------*/

.powermail_fieldwrap,
.powermail_fieldwrap div {
	display: flex;
	flex-flow: column;
}

.powermail_fieldwrap {
	flex-flow: column;
	margin: 1rem 0 0 0;
}

input, button, select, optgroup, textarea {
	background: rgb(var(--whiteColor));
	border: 1px solid rgb(var(--mainColor));
	padding: 6px 15px;
	flex: 1 1 100%
}

input[type="submit"], .elastic-video button {
	background: rgb(var(--mainColor));
	color: rgb(var(--whiteColor));
}

.tx-powermail .container-fluid {
	margin-top: 15px;
}

.tx-powermail h3 {
	margin: 15px 0;
}

.hpk_kon_container {
	margin: 0 0 8px;
}

.tx-powermail .container-fluid form h3:first-of-type {
    display: none;
}

/*----------------------------------HEADER------------------------------------*/

#bodyumschlag,
#bodyumschlag header {
	padding: 0;
	margin: 0;
}

#bodyumschlag > header {
	background: rgb(var(--whiteColor));
}

.kopf {
	max-width: 1270px;
	margin: auto;
	position: relative;
}

#logo2 {
	width: 25%;  
	top: 17px; 
	right: 15px;
	z-index: 1031; 
	height: auto;
	max-width: 120px;
	position: fixed;
}

#logo {
	background: rgb(var(--whiteColor));
	left: 15px;
	position: absolute;
	padding: 18px;
	top: 100%;
	max-width: 170px;
	z-index: 5;
	border-bottom: 2px solid rgb(var(--mainColor));
}

#logo:after {
	border-top: 1px solid rgb(231, 15, 15);
	border-color: rgb(var(--mainColor));
}

/* Verlauf für das Logo */
#logo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0px;
	border-left: 2px solid transparent;
	border-right: 2px solid transparent;
	border-image: linear-gradient(to top, rgb(var(--mainColor)), rgba(var(--whiteColor))) 1 100%;
	pointer-events: none;
}

#logo2img,
#slider img,
#headerbild img,
#headercarousel .carousel-inner {
	height: auto;
	width: 100%;
}

.kopf .tx-hpkfe-pi-adresse .hpk_adr_firma, .kopf .tx-hpkfe-pi-adresse .hpk_adr_tel a {
	color: rgb(var(--mainColor));
}

.kopf .tx-hpkfe-pi-adresse .hpk_adr_mail, .kopf .hpk_adr_strasse, .kopf .hpk_adr_plzort, .kopf .hpk_adr_land, .kopf .hpk_adr_fax, .kopf .hpk_adr_mobil {
	display: none;
}

#headerbild,
#headercarousel,
#slider {
	box-shadow: inset 0 5px 5px -5px rgb(var(--veryDarkColor)), inset 0 -5px 5px -5px rgb(var(--veryDarkColor));
	border-top: 3px solid rgb(var(--mainColor));
}

.carousel-indicators {
	bottom: auto;
	top: 0;
}

.carousel-control-prev,
.carousel-control-next {
	display: none;
}

.carousel-caption {
	display: none !important;
	/*left: 0px;
	bottom: 0;
	text-align: left;
	width: 100%;
	padding-bottom: 0;
	display: inline-block!important;*/ /***** Kommentar: Text im Headerslider wird nciht benötigt *****/
}

/*.carousel-caption h5,
.carousel-caption p {
	padding: 5px;	
}

.carousel-caption h5 {
	display: inline-block;
	margin-bottom: 0.5em;
	font-size: 90%;
	color:rgb(var(--whiteColor));
	background: none repeat scroll 0% 0% rgba(var(--veryDarkColor), 0.8);
}

.carousel-caption p {
	display: none;
}*/ /***** Kommentar: Text im Headerslider wird nciht benötigt *****/

/*Wenn nicht benötigt, dann löschen. Soll das eine Ausgrabungsstätte werden ;)*/

/*----------------------------------NAVI------------------------------------*/

.navbar {
	border-bottom: 1px solid rgb(var(--blueishLightColor));
	box-shadow: 0px 0px 0px 1.5px rgb(var(--offWhiteColor));
	background-color: rgb(var(--whiteColor));
	padding: 1px 0;
}

header .container-fluid{
	padding: 0;
}

.navbar-light .navbar-toggler {
	margin: 7px;
	color: rgb(var(--offBlackColor));
	border-color: rgb(var(--whiteColor));
	text-align: left;
}

button.navbar-toggler {
	outline: 0;
}

/*.navbar-toggler:focus {
	box-shadow: inset 0 0 0 0.25rem;
}*/ /***** Kommentar: sieht mobil blöd aus *****/

.navbar-toggler-icon {
	width: 1.3em;
}

#navbarNav #logo {
	display: none;
	padding: 0;
}

/*.navbar-nav .ebene1 {
	padding: 0;
}*/ /***** Kommentar: Wofür war das? *****/

/* Bootstrap fügt hier einen Margin ein, der wird hier raus genommen */
.navbar-nav {
	margin-left:0;
}


ul#navbarNav,
li.ebene1,
#kopfmenue li{
	border-bottom: 1px solid rgb(var(--whiteColor));
	padding: 3px;
	background-color:rgb(var(--mainColor));
}

.nav-item.ebene1.dropdown:last-child {
  padding-bottom: 0; /* damit im mobilen Menü unten kein Abstand ist*/
}

.nav-item ul:not(.ebene1.nav-item ul) {
	border-top: 1px solid rgb(var(--offWhiteColor));
}

li.ebene1 > a,
#kopfmenue a {
	display: block;
	padding: 15px 0;
}

li.ebene1 > a

/* .nav-item.ebene1 > a {
	margin: 0 10px;
} */

/* .navbar-expand-md .navbar-collapse {
	background: rgb(var(--secondColor));
} gibt keine zweite Farbe*/

nav .navbar-nav {
	position: fixed;
	top: 53px;
	left: 11px;
	width: 100%;
/* 	background: rgb(var(--secondColor)); hat keine zweite Farbe*/
}
 
.dropdown-toggle::after,
li.ebene1 > a[id*="navbarDropdown"]::after {
	content: "\f078";
	font-family: FontAwesome;
	font-size: 40px;
	border: none;
	line-height: 0;
	display: flex;
	justify-content: flex-end;
	position: relative;
	top: -10px;
}
 
.ebene1:hover > a[id*="navbarDropdown"]::after,
.ebene2:hover > a[id*="navbarDropdown"]::after  {
	content: "\f077";
}
 
.dropdown-toggle.show::after {
	content: "\f077";
}
 
.dropdown-menu {
/* 	background-color: rgb(var(--secondColor)); hat keine zweite Farbe*/
	border: none;
	border-radius: 0;
}

.dropdown-menu[data-bs-popper] {
	margin-top: 0;
}

#untermenue_ab2 {
	display: none;
}

.ebene2 {
/* 	border-bottom: 1px solid rgb(var(--offBlackColor)); */
	padding: 5px 0;
}

.submenu-content,
.nav-item.ebene2 a {
	padding: 1rem 0.5rem 1rem 1.2rem;
	color: rgb(var(--offBlackColor));
	display: block;
}

.ebene2 .submenu-content {
	color: rgb(var(--offBlackColor));
}

.dropdown-menu.ebene2.show {
	padding: 0;
	border-top: 1px solid rgb(var(--whiteColor));
	background-color: white;
	border-radius: 0;
}

#navbarNav .nav-item ul a.dropdown-toggle { /***** Kommentar: Damit die Pfeile in der mobilen Version nicht in die Schrift reinlaufen, wenn der Menüpunkt zu lang ist *****/
	padding-right: 4em;
	white-space: normal;
}

li.ebene2 a.dropdown-toggle::before {
	content: "\f18e";
	font-family: FontAwesome;
	color: rgb(var(--mainColor));
	margin-right: 0.5em;
}

.ebene2 .nav-link::before,
/*.ebene1 .nav-link::before,*/ /***** Kommentar: Icons bei ebene1 werden generell nicht benötigt *****/
.untermenu2 i.fa-chevron-right::before { /*für die Pfeilicons vor dem Menüpunkten*/
	font-family: FontAwesome;
	content: "\f18e";
	margin-right: 0.5em;
	color: rgb(var(--mainColor));
}

.ebene2 .ebene3 .nav-link::before { /*damit die Icons in keiner weiteren Ebene auftauchen*/
	content: "";
	margin-right: 0;
}

#kopfmenue_div,
.inhalt_menu {
	display: none;
}

ul#kopfmenue {
	list-style-type: none;
	display: flex;
	flex-flow: row;
	margin-bottom: 0;
}

.untermenu2 li {
	list-style: none;
}

ul.untermenu2 a:hover,
ul.untermenu2 a:active,
.frame-layout-6 .box a:hover,
.frame-layout-6 .box a:active,
.untermenu2.aktiv {
	color: rgb(var(--offBlackColor));
}

.untermenu2 i {
	margin-right: 8px;
}

.inhalt_menu {
	padding-top: 2em;
}

.inhalt_menu div.box.p-2 {
	padding: 0!important;
}

.submenu-short-text, .submenu-content img {
  display: none;
}

#suche {
  /*width: 170px;*/
  height: 50px;
  right: 27%;
  top: 10px;
  z-index: 1031;
}

#searchform {
	display:none;
}

#suche .boxsuche_input {
  border: 1px solid rgb(var(--offBlackColor));
  color:rgb(var(--blackColor));
  height: 37px;
  width: 150px;
  padding: 6px 10px;
}

#suche .boxsuche_submit {
  border: none;
  mask:var(--magnifyingGlass);
  color: transparent;
  width: 20px;
  height: 30px;
  background-size: cover;
  background-color: rgb(var(--mainColor));
  position: absolute;
  right: 27px;
  top: 3px;
  mask-repeat: no-repeat;
  mask-size:auto 60%;
  mask-position: center right;
}

.tx-indexedsearch-searchbox-sword, .tx-indexedsearch-search-submit {
	margin: 0.5rem 0;
}

.tx-indexedsearch-info-sword-word {
	font-weight: 600;
}

.frame-default.frame-layout-0 .tx-indexedsearch-rules p,
.frame-default.frame-layout-0 .tx-indexedsearch-searchbox p,
.frame-default.frame-layout-0 .tx-indexedsearch-res p,
.frame-default.frame-layout-0 .tx-indexedsearch-browsebox p	{
	padding: 0;
}

/* Layout 19 Navigation Integration */

nav .navbar-nav {
	overflow-y:scroll;
	display:block;
	height:calc(100vh - 50px);
}

.dropdown-toggle::after,
li.ebene1 > a[id*="navbarDropdown"]::after {
	display:none!important;
}

li.ebene2 a.dropdown-toggle::before {
  display:none!important;
}

.responsiveNavigation .navbar-nav a.nav-link {
  position: relative;
  display: inline-block;
  width: 90%;
}

#navbarNav .dropdown-icon {
	display: block;
	cursor: pointer;
	width: 45px;
	height: 3.0em;
	position: absolute;
	z-index: 1;
	right: 10px;
	top: 50%;
	font-size: 1.0em;
	transform: translateY(-50%) rotate(0deg);
}

.dropdown-icon:before {
	content: "";
	height: 100%;
	width: 1px;
	border-left: 1px solid rgb(var(--greyColor));
	display: block;
	position: absolute;
	top: 50%;
	left: -6px;
	transform: translateY(-50%);
}

#navbarNav .dropdown:hover > .dropdown-icon {
	transform: rotate(180deg);
	top: 0;
}

#navbarNav .dropdown:hover >.dropdown-icon:before {
	right: -6px;
	left: auto;
}

#navbarNav .dropdown-icon svg {
	fill:rgb(var(--whiteColor));
}

#navbarNav li.ebene2 .dropdown-icon svg {
	fill:rgb(var(--mainColor));
}

#navbarNav .navbar-nav .ebene1:hover > .dropdown-menu,
#navbarNav .navbar-nav .ebene2:hover > .dropdown-menu,
#navbarNav .navbar-nav .ebene3:hover > .dropdown-menu,
#navbarNav .navbar-nav .ebene4:hover > .dropdown-menu {
  position: relative;
  padding-right: 0;
  border: 0;
  margin-right: 0;
  display: block;
  left: 0;
}

#navbarNav .navbar-nav .ebene2:hover > .dropdown-menu {
  min-height: auto;
}

.dropdown-menu {
	background-color:rgb(var(--whiteColor));
}

#navbarNav .ebene1 li {
	border-bottom: 1px solid rgb(var(--greyColor));
	padding: 0 0 0 1.2rem;
}
#navbarNav .ebene1 li:last-child {
	border-bottom: 0;
}

#navbarNav .ebene1 > ul a {
	padding: 1rem 0;
}

#navbarNav .ebene1 li.ebene3 {
	padding: 0;
}

#sidebar {
	display:none;
}


/*------------------------------BOXEN ALLGEMEIN--------------------------------*/

.frame.frame-default:not(.frame-default.frame-layout-12),
#socialshareprivacy, .csc-frame.layout-7,
.frame-128.frame-layout-30 /***** Kommentar: für Herstellerseite *****/ {
	margin-bottom: 1em; /********** Kommentar: für mobil, gap beginnt erst ab 640 *******/
}

.frame-layout-0 .frame-128.frame-layout-30	/***** Kommentar: Produktseite brauchen keinen Abstand nach unten unter 640 *****/ {
	margin-bottom: 0; 
}

.box {
	height: 100%; /*macht Probleme auf Startseite*/ /***** Kommentar: mit height: max-content auf dem parent-div nicht mehr *****/
	position: relative;
	min-height: 190px;
	width: 100%;
	padding-bottom:2.25em; /*für link-typ1*/ /*warum? wo genau?*/ /***** Kommentar: für die link-typ1 Links, die am Ende der Boxen sind *****/
}

.frame-type-image.frame-layout-14 .box, .frame-type-image.frame-layout-15 .box { /***** Kommentar: Für nur Bilder wie z.B. auf der Partnerschaften-Seite oben/individuelle Partner *****/
	min-height: 0;
	padding-bottom: 0; 
}

.frame-type-image.frame-layout-14 .box figure, .frame-type-image.frame-layout-15 .box figure { 
	margin: 1em auto;
}

.frame .frame-default > .box,
/* .frame-layout-6 .box, */
.frame-layout-0.frame-202 .box,
.frame-layout-0.frame-203 .box,
.frame-128.frame-layout-30 .box,
.frame-100.frame-layout-0 .box {
	background: rgb(var(--whiteColor));
	border: 1px solid rgb(var(--veryLightColor));
}

.frame-layout-0 > .box,
.frame-default.frame-layout-16 .box,
.frame-default.frame-layout-17 .box {
	background: transparent;
	box-shadow: none;
	min-height: 0;
	padding: 0;
}

.frame-default.frame-layout-16 figure,
.frame-default.frame-layout-17 figure {
	margin: 0;
}

.g-0 {
	width: 100%;
	min-height: 1px;
}

/*.frame-default.frame-layout-0 p,*/
.frame-default.frame-layout-1 p, /* Box 1/3 von 3*/
.frame-default.frame-layout-2 p, /* Box 1/3 von 3*/
.frame-default.frame-layout-3 p, /* Box 1/3 von 3*/
.frame-default.frame-layout-4 p,
.frame-default.frame-layout-6 p,
.frame-default.frame-layout-7 p, /* Box 1/3 von 2*/
.frame-default.frame-layout-8 p, /* Box 2/3 von 2*/
.frame-default.frame-layout-9 p,
.frame-default.frame-layout-10 p,
.frame-default.frame-layout-13 p,
.frame-default.frame-layout-14 p,
.frame-default.frame-layout-15 p, 
.frame-default.frame-layout-16 p,
.frame-default.frame-layout-17 p,
.frame-default.frame-layout-18 p,
.frame-layout-0.frame-202 p,
.frame .box .accordion_element .accordion_content p,
.cycle-slideshow .slide .csc-textpic,
.ce-textpic,
.frame-default.frame-layout-0 .frame-128.frame-layout-30 .ce-textpic /***** Kommentar: Produktseite von Herstellern anderes Markup als Herstellerseiten *****/ {
	padding: 6px 15px;
}

.frame-layout-0.frame-202 h2, .frame-layout-0.frame-203 .ce-textpic,
.frame-default.frame-layout-0 .frame-128.frame-layout-30 .ce-textpic, /***** Kommentar: Produktseite von Herstellern anderes Markup als Herstellerseiten *****/
.frame.frame-128.frame-layout-30 .ce-textpic, .frame-layout-0 .frame-layout-0.frame-203 .ce-textpic,
.frame-100.frame-layout-0 p {
	padding: 15px;
}

.frame-layout-0.frame-202 h4 {
	padding: 0 15px;
}

.frame-100.frame-layout-0 .ce-textpic p,
.frame-default.frame-layout-0 .ce-textpic {
	padding: 0;
}

/*.ce-textpic {
	padding: 6px 15px;
}*/

/*.frame-default.frame-layout-0 .ce-textpic,
.frame-default.frame-layout-0 .box p,
.frame-default.frame-layout-18 .tx-powermail p {
	padding: 0;
}*/

.frame-default .ce-textpic p {
	padding: 6px 0;
}

.frame-layout-0 {
	height: max-content;
	width: 100%;
}

.frame-layout-16 .box,
.frame-layout-17 .box {
	box-shadow: 1px 2px 4px rgba(var(--blackColor), .2);
}

.frame-layout-7 .box /* Box 1/3 von 2*/ {
	background-color: rgb(var(--offWhiteColor));
	padding-bottom: 15px;
}

.frame-layout-7 .box p /* Box 1/3 von 2*/ {
	margin: 1em auto 0 auto;
  width: calc(100% - 30px);
}

.col.frame-layout-6 {
	flex-basis: 40%;
}

.layout-14,
.layout-15 {
	flex-basis: 48%;
}

.layout-14 .content-text,
.layout-15 .content-text{
	width: 96%;
}

.frame-layout-6 .box > p {
	padding-bottom: 22px;
}

.ce-gallery + .ce-bodytext {
	padding-top: 0;
}

.frame-layout-9 .ce-gallery,
.frame-layout-10 .ce-gallery {
	margin-top: 20px;
	padding: 0 15px;
}

.frame-layout-9.col-md-6,
.frame-layout-10.col-md-6 {
	width: 100%;
}

.frame-layout-0 .box::after {
	background: none;
	padding: 0;
}

.frame-layout-17 {
	margin-top: -10px;
}

.frame-layout-13 {
	width:100%;
}

/*.frame-layout-13 .ce-intext {
	width:100%;
	padding:0.75em 1.25em;
}*/ /***** Kommentar: Bilder floaten sonst nicht mehr auf der Deatilseite von MDDEB *****/

/*.frame-layout-13 .ce-intext .ce-gallery {
	width:100%;
	padding:0.75em 1.25em;
	display:flex;
	gap:1.5em;
}*/ /***** Kommentar: Bilder floaten sonst nicht mehr auf der Deatilseite von MDDEB *****/

.csc-textpic-intext-right {
	order:2;
}

/*.box p {
	padding: 6px 15px;
}*/

.frame-layout-43 {
	margin: 0 0 1rem 0;
	width:100%;
}

.frame-layout-43 .box p {
	margin: 1em auto 0 auto;
  width: calc(100% - 30px);
}

/*-----------------------------BILDER ALLGEMEIN-------------------------------*/

.csc-textpic.csc-textpic-intext-right img {
	float: right !important;
}

.frame-layout-0 img,
.frame-layout-1 img,
.frame-layout-2 img,
.frame-layout-3 img,
.frame-layout-9 img, /*Zertifikate*/
.frame-layout-10 img /*Zertifikate*/ {
	padding-bottom: 2%; /*Abstand nach unten zum Text*/
}

.frame-layout-0 img,
.cycle-slideshow .slide img {
	width: 100%;
	height: auto;
}

.frame-layout-1 img, /*nicht auf 100%, da Icons auf Startseite sonst zu groß*/
.frame-layout-2 img,
.frame-layout-3 img {
	width: auto;
}

.frame-layout-9 img, /*Zertifikate*/
.frame-layout-10 img /*Zertifikate*/ {
	width: auto;
}

.frame-layout-13 img {
	margin: 0 0 1rem;
}

.frame-layout-16 img,
.frame-layout-17 img {
	width: 100%;
}

body figure { /*falscher Boxenabstand auf Startseite durch BS*/
	margin: 0;
}

.partner > img {
	display: none;
}

.partner {
  float: left;
  width: calc(100% / 2);
  padding: 0.25em 1.5%;
}

.frame-layout-0 .img-fluid.ms-2.float-start.image-embed-item,
.frame-layout-0 .img-fluid.ms-2.float-center.image-embed-item {
	margin-left: 0 !important;
	width: 50%;
	margin-right: 0.5rem;
}

/* Slimbox-only*/
#lbOverlay {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgb(var(--blackColor));
	cursor:pointer;
	z-index: 1050;
}

#lbCenter, #lbBottomContainer {
	position:absolute;
	left:50%;
	overflow:hidden;
	background-color:rgb(var(--whiteColor));
	z-index:1051;
}

#lbCenter a, #lbBottomContainer a {
	text-decoration:none;
	border:none;
	outline:none;
}

.lbLoading {
	background:rgb(var(--whiteColor)) url(images/lightbox/loading.gif) no-repeat center;
}

#lbImage {
	position:absolute;
	left:0;
	top:0;
	border:10px solid rgb(var(--whiteColor));
	background-repeat:no-repeat;
}

#lbBottom {
	/*font-family:tahoma, arial, sans-serif;*/
	font-size: var(--fontSmallerSize);
	color:rgb(var(--veryDarkColor));
	line-height:1.4em;
	text-align:left;
	padding:0 10px 10px 10px;
}

#lbCaption {
	width:66%;
	font-weight:bold;
	margin-bottom:0.1em;
}

#lbNumber {
	width:66%;
	margin-bottom:0.1em;
}

#lbPresent {
	width:66%;
	margin-bottom:0.1em;
}

#lbPresent a {
	position:relative;
	float:left;
	color:rgb(var(--darkColor));
	border-right:0.3em solid rgb(var(--whiteColor));
	border-bottom:0.1em solid rgb(var(--whiteColor));
	border-left:0.4em solid rgb(var(--whiteColor));
	margin-right:0.2em;
}

#lbPresent a.act {
	color:rgb(var(--whiteColor));
	background:rgb(var(--darkColor));
	border-color:rgb(var(--darkColor));
}

/* Lightbox-only*/
#overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgb(var(--blackColor));
	z-index:90;
}

#lbLightbox {
	position:absolute;
	left:0;
	width:100%;
	z-index:100;
	text-align:center;
	line-height:0;
}

#lbLightbox #closeLink {
	margin-bottom:10px;
}

#lbLightbox a {
	text-decoration:none;
	border:none;
	outline:none;
}

#lbLightbox img {
	width:auto;
	height:auto;
	border:none;
}

#lbOuterImageContainer {
	position:relative;
	background-color:rgb(var(--whiteColor));
	width:250px;
	height:250px;
	margin:0 auto;
}

#lbImageContainer {
	padding:10px;
}

#lbLoading {
	position:absolute;
	z-index:110;
	top:40%;
	left:0%;
	height:25%;
	width:100%;
	text-align:center;
	line-height:0;
	background:rgb(var(--whiteColor)) url(images/lightbox/loading.gif) no-repeat center;
}

#lbHoverNav {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:10;
}

#lbImageContainer>#lbHoverNav {
	left:0;
}

#lbImageDataContainer {
	font-size:var(--fontSmallerSize);
	background-color:rgb(var(--whiteColor));
	margin:0 auto;
	line-height:1.4em;
	overflow:auto;
	width:100%;
}

#lbImageData {
	padding:0 10px;
	color:rgb(var(--veryDarkColor));
}

#lbImageDetails {
	width:66%;
	float:left;
	text-align:left;
	padding-bottom:10px;
}

#lbCaption {
	display:block;
	font-weight:bold;
	margin-bottom:0.1em;
}

#lbNumberDisplay {
	display:block;
	margin-bottom:0.1em;
}

#lbPresent {
	display:block;
	margin-bottom:0.1em;
}

#lbPresent a {
	position:relative;
	float:left;
	color:rgb(var(--darkColor));
	border-right:0.3em solid rgb(var(--whiteColor));
	border-bottom:0.1em solid rgb(var(--whiteColor));
	border-left:0.4em solid rgb(var(--whiteColor));
	margin-right:0.2em;
}

#lbPresent a:hover {
	color:rgb(var(--blackColor));
}

#lbPresent a.act {
	color:rgb(var(--whiteColor));
	background:rgb(var(--darkColor));
	border-color:rgb(var(--darkColor));
}

/*-----------------------------REFERENZEN--------------------------------*/

.tx-hpkfe-pi-referenzen {
	padding: 6px 15px;
	position: relative;
	overflow: hidden;
}

#inhalt .slideholder {
  background: none !important;
}

.tx-hpkfe-pi-referenzen .slideshowContainer {
  margin-bottom: 10px;
}

.tx-hpkfe-pi-referenzen ul,
.tx-hpkfe-pi-referenzen li {
  list-style-type: none;
  margin-bottom: 0;
}

.tx-hpkfe-pi-referenzen a {
  position: absolute; 
  text-decoration: none;
}

.tx-hpkfe-pi-referenzen .prev a,
.tx-hpkfe-pi-referenzen .next a {
	top: 10px;
	z-index: 35;
	background: rgb(var(--blackColor));
	opacity: 0.9;
	width: 35px;
	height: 35px;  
	display: flex;  
	color: white;
	border-radius: 30px;
	font-size: 25px;
	align-items: center;
	justify-content: center;
}


.tx-hpkfe-pi-referenzen .prev a { 
	left: 20px;
} 	

.tx-hpkfe-pi-referenzen .next a {
	left: 60px; 
} 

.tx-hpkfe-pi-referenzen .prev a:before,
.tx-hpkfe-pi-referenzen .next a:before {
	font-family: 'FontAwesome';   
	text-shadow: 1px 1px 1px #333;
	color: white;  
	text-align: center;  
	display: block;
	left: 3px;
	position: relative;
}

.tx-hpkfe-pi-referenzen .prev a:before {
	content: "\f053";
} 

.tx-hpkfe-pi-referenzen .next a:before {
	content: "\f054";
}

.tx-hpkfe-pi-referenzen .slidetext {
  height: auto; 
  padding-top: 1px; 
  padding-left: 2px; 
  line-height: 13pt;
} 

.tx-hpkfe-pi-referenzen a.slider-link {
  position: relative;
}

/*--------------------------------VIDEO------------------------------------*/

/***** Kommentar:  Videos auf Herstellerseiten über uns hochgeladen (nicht Youtube) *****/

.tx-emasters-lib-uni-pi-video {
	display:flex;
	flex-direction: column;
	gap: 1em;
	width:100%;
	height: auto;
}

.frame-layout-8 .tx-emasters-lib-uni-pi-video {
	flex-direction: inherit;
}

.frame-layout-8 .tx-emasters-lib-uni-pi-video .csc-textpic-intext-right {
	margin-left: auto;
	margin-right: 15px;
}

#imagefilm-mitglied {
	height:auto!important;
}

.emasters_video , .emasters_video .video-js, video, .emasters_video .vjs-tech, .vjs-default-skin  {
	position:relative!important;
}

.emasters_video .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button, .emasters_video .vjs-default-skin .vjs-big-play-button, #umschlag .vjs-default-skin .vjs-big-play-button {
  width: 65px;
  height: 65px;
  left: 50%;
  top: 50%;
  margin: 0;
  border-radius: 50px;
  border: 2px solid rgb(var(--whiteColor));
  color: rgb(var(--whiteColor));
  background-color: rgba(var(--offBlackColor), 0.7);
  transform: translateX(-50%) translateY(-50%);
  z-index: 5;
}

#umschlag .vjs-default-skin .vjs-big-play-button:hover {
  background-color: rgba(var(--offBlackColor), 0.85);
}

.emasters_video .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button:before, .emasters_video .vjs-default-skin .vjs-big-play-button:before, #umschlag .vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  line-height: 0;
  text-shadow: 0px 0px 0px;
  text-align: center;
  position: absolute;
  font-size: 25px;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
}

.overlay {
	display: flex;
	justify-content: space-between;
	position: absolute;
	width: 96%;
	padding: 8px 2% 8px 2%;
	bottom: 15%;
	left: 50%;
	z-index: 15;
	background: linear-gradient(to right, rgba(var(--whiteColor), 0.9) 15%, rgba(var(--whiteColor), 0.64) 33%, rgba(var(--whiteColor), 0.34) 54%, rgba(var(--whiteColor), 0.3) 57%, rgba(var(--whiteColor), 0.69) 74%, rgba(var(--whiteColor), 0.95) 85%);
	border-top: 1px solid rgb(var(--lightColor));
	border-bottom: 1px solid rgb(var(--lightColor));
	transform: translateX(-50%);
}

.overlay img {
	max-height: 50px;
}

.playlist-components .playlist {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;

  cursor: grab;
  position: relative;
  height: 10em;
}

.playlist-components .playlist ul {
  margin-left: 0;
  margin-bottom: 5px;
	padding: 0;
	padding-inline-start: 0;
  position: absolute;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.playlist-components .playlist li {
  list-style-type: none;
  display: inline;
border: 2px solid rgb(var(--websiteBackgroundColor));
  background-color: rgb(var(--greyColor));
  display: inline-block;
  width: 10em;
}

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul:before, .tx-emasters-lib-uni-pi-video .playlist-components .playlist li:before {
	content:none;
}

.playlist-components .playlist li img {
  border: 3px solid;
  border-color: rgba(var(--offWhiteColor), 0.7);
  margin: 0 8px 0 0;
  cursor: pointer;
  max-width: 100%;
  width: auto;
  height: auto;
}

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul li img {
	opacity:0.75;
	width:100%;
	height:auto!important;
}

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul .active {
	border-color:rgb(var(--mainColor));
}


.playlist-components .playlist li img::before,
.playlist-components .playlist li img *::before {
  box-sizing: unset;
  display: none;
}

#inhalt .playlist-components .playlist li img:hover {
  border-color: rgb(var(--whiteColor));
}

.playlist-components .playlist #prev, .playlist-components .playlist #next {
  display: none;
}


.clipbox .csc-content {
  padding: 6px 15px;
}

.hpk_pc-klein .vjs-default-skin .vjs-play-control,
.hpk_pc-klein .vjs-default-skin .vjs-current-time,
.hpk_pc-klein .vjs-default-skin .vjs-duration,
.hpk_pc-klein .vjs-default-skin .vjs-fullscreen-control,
.hpk_pc-klein .vjs-default-skin .vjs-mute-control {
	width: 12%;
}

.hpk_pc-klein .vjs-default-skin .vjs-mute-control {
  display:none;
}

.hpk_pc-klein video, .hpk_pc-klein .vjs-default-skin {
  width: 100% !important;
}

.hpk_pc-klein .vjs-default-skin {
  height: unset !important;
}

/***** Kommentar: Videos mit neuem Plugin z. B. Youtube oder so *****/
.elastic-video {
	margin-top: -5px;
	position: relative;
	width: 100%;
	height: 100%;
}

.em-yt-content {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(var(--whiteColor), 0.75);
	padding: 1em;
	/*color: rgb(var(--whiteColor));*/
	z-index: 5;
}

.elastic-video img {
	width: 100% !important;
	height: auto;
}

.elastic-video .em-yt-content p.youtube-text {
	padding: 0;
}

.elastic-video button {
	display: flex;
	margin: 0 auto;
}

.elastic-video iframe {
	/*position: absolute;
	top: 0;
	left: 0;*/
	width: 100%;
	height: 100%;
	z-index: 3;
}

/***** Kommentar: Headervideo *****/

.clipbox-describe {
	display: none;
}

/*--------------------------------SHORTCUT------------------------------------*/

.frame-type-shortcut > .box {
	display:flex;
	/*flex-direction: column;`*/ /***** Kommentar: Zerschiesst die Boxen bei den Produktseiten *****/
	flex-wrap: wrap;
	gap:1.0em 1em;
}

.frame-type-shortcut .frame-layout-0 .box {
	margin:0;
	/*box-shadow: 1px 2px 4px rgba(var(--blackColor), .2);*/
	/*background: rgb(var(--veryLightColor));*/ 
}

.frame-type-shortcut .frame-128,
.frame-type-shortcut .frame-128  .box .ce-textpic  {
	position:relative;
}

.frame-type-shortcut .frame-128.frame-layout-0 .ce-textpic figure,
.frame-type-shortcut .frame-128.frame-layout-0 .ce-textpic img {
	margin:0;
	padding:0;
}

.frame-type-shortcut .frame-128.frame-layout-0 .ce-textpic .ce-bodytext {
	position:absolute;
	bottom:1em;
	left:0;
	width:100%;
	padding:0.5em 1em;
	background: linear-gradient(to right, rgba(var(--whiteColor), 0.85) 75%, rgba(var(--whiteColor), 0.54) 84%, rgba(var(--offWhiteColor), 0) 100%);
}



/*--------------------------------STYLES------------------------------------*/

.frame-layout-8 .ce-bodytext ul {
	list-style-type: none;
}

.frame-layout-8 .ce-bodytext ul li::before {
	content: "\f00c"; /*Häkchen statt Listenpunkten auf Startseite*/
	font-family: FontAwesome;
	color: rgb(var(--mainColor));
	margin-left: -24px;
	margin-right: 12px;
}

.frame-layout-15 .tx-hpkfe-pi-adresse {
    padding: 6px 15px;
}

.form-buttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

fieldset, fieldset.hpk_kon_formset {
	border: 0;
	background: none;
	padding: 0;
}

input.hpk_kon_plz {
  width: 25%;
  margin-right: 1%;
}

input.hpk_kon_ort {
	width: 74%;
}

input.hpk_kon_name, 
.hpk_kon_vname, 
.hpk_kon_str, 
.hpk_kon_tel, 
.hpk_kon_fax, 
.hpk_kon_email,
textarea.hpk_kon_anfrage {
	width: 100%;
}

input.hpk_kon_plz,
input.hpk_kon_ort,
input.hpk_kon_name, 
.hpk_kon_vname, 
.hpk_kon_str, 
input.hpk_kon_plz, 
.hpk_kon_ort, 
.hpk_kon_tel, 
.hpk_kon_fax, 
.hpk_kon_email,
textarea.hpk_kon_anfrage {
	border: 1px solid rgb(var(--mainColor));
	background: none;
	padding: 2px;
	box-shadow: 0px 1px 2px rgba(var(--blackColor), 0.1) inset;
}

textarea.hpk_kon_anfrage {
	height: 150px ;
}

#akz_ds {
	float: left;
	width: 13px;
	margin-top: 3px;
}

.tx-hpkfe-pi-gmap ~ .tx-hpkfe-pi-adresse {
	padding-left: 15px;
}

footer .tx-hpkfe-pi-adresse {
	line-height: 1.5em;
}

.tx-hpkfe-pi-adresse .hpk_adr_mail a {
	text-decoration: underline;
}

.tx-hpkfe-pi-adresse .hpk_adr_mail a,
.tx-hpkfe-pi-adresse .hpk_adr_tel2 a {
	color: rgb(var(--offBlackColor));
}

.tx-hpkfe-pi-adresse .hpk_adr_mail a:hover,
.tx-hpkfe-pi-adresse .hpk_adr_mail a:active,
.tx-hpkfe-pi-adresse .hpk_adr_tel2 a:hover,
.tx-hpkfe-pi-adresse .hpk_adr_tel2 a:active,
footer a:hover,
footer a:active {
	color: rgb(var(--offBlackColor));
	text-decoration: none;
}

/*.tx-hpkfe-pi-kontakt {
	border: 1px solid rgb(var(--lightColor));
}*/ /***** Kommentar: war doppelte Border *****/

.tx-hpkfe-pi-kontakt,
.tx-hpkfe-pi-gmap {
	padding: 15px;
}

.map_hinweis_holder {
	background: rgb(var(--offWhiteColor));
	padding: 1em;
	box-sizing: border-box;
	text-align: center;
}

.hpk_kon_subm,
.map_hinweis_button {
	width: 100%;
}

.hpk_kon_gmap {
	height: 300px;
}

#hpk_map_canvas {
	height: 100%;
}

/*----------------------------------NEWS------------------------------------*/

.news-list-item, .news-single-item h2  {
	border-bottom: 1px solid rgb(var(--lightColor));
}

.news-list-content {
	display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.news-list-content > a {
	order:2;
	text-align:right;
}

.news-list-content .clearnews {
	width:100%;
	order:3;
}

.news-list-content .detailsansehen {
	order:4;
}

.inhalt_menu .news-latest-container p {
	padding: 15px 0;
}

span.news_latest_title {
	display: block;
	border-top: 1px dotted rgb(var(--offBlackColor));
	margin-top: 5px;
	padding-top: 5px;
	/*font-size: 113%;*/
	font-weight: bold;
}

.news_latest_image{
	margin-top: 8px;
}

.newsdatum,
.newspipe {
	display: none;
}

.newstitlesingle {
	line-height: 2.5rem;
}

div.news-list-content {
	/*border-top: 1px solid rgb(var(--mainColor));*/
	padding-top: 8px;
	/*margin-top: 8px;*/
}

.news-single-rightbox {
	display: none;
}

.news-single-item h2 {
	
}

.news-single-item .news-single-backlink {
	border-top: 1px solid rgb(var(--lightColor));
	padding: 0.5em 0 0;
}

.clearnews {
	clear: both;
}

.shariff {
	margin-top: 15px;
}

/*--------------------------------SUCHE----------------------------------*/

#tx-indexedsearch-searchbox-sword {
	height: 45px;
}

.tx-indexedsearch-browsebox {
	height: 60px;
	margin: 10px 0;
	padding: 0;
}

.tx-indexedsearch-browsebox li:first-child {
	margin: 0;
}

/*.tx-indexedsearch-browsebox a {
	background: rgb(var(--mainColor));
	color: rgb(var(--whiteColor));
	padding: 6px 15px;
}*/

.tx-indexedsearch-text-item-size,
.tx-indexedsearch-text-item-crdate,
.tx-indexedsearch-text-item-mtime,
.tx-indexedsearch-text-item-path {
	display: none;
}

.tx-indexedsearch-res {
	padding: 15px;
}

.tx-indexedsearch-res h3 {
    display: flex;
    width: 100%;
}

.tx-indexedsearch-title {
    display: flex;
    flex: 1 1 95%;
}

.tx-indexedsearch-percent {
    align-self: flex-end;
    flex: 1 1 5%;
}

.tx-indexedsearch-res:nth-child(odd) {
	background: rgb(var(--veryLightColor));
}

.tx-indexedsearch-icon {
	float: right;
}

.tx-indexedsearch-res img {
	max-width: 30px;
}


/*--------------------------------FOOTER----------------------------------*/

footer {
	font-size: var(--fontBodySize);
	display: flex;
	flex-flow: row wrap;
	min-height: 180px;
	padding:1em 0 4em 0;
}

footer .row {
	padding: 6px 15px;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}

footer .hpk_adr_firma {
	font-size: 125%;
}

footer .hpk_adr_land,
footer .hpk_adr_firma {
	margin-bottom: 10px;
}

footer .tx-hpkfe-pi-adresse a {
	text-decoration: none!important;
}

footer .ebene2 {
	border: 0px; /*Reset der Border, damit der Verlauf gesetzt werden kann*/
}

footer ul {
	margin: 0;
}

footer .nav-link {
	padding: 0;
}

footer .navbar-nav {
	position: relative;
	bottom: 36px;
}

footer ul.navbar-nav li,
footer ul.navbar-nav div { 
	padding: 0 7px 0 7px;
}

footer ul.navbar-nav li:not(:last-child) { 
	border-right: 1px solid rgb(var(--offWhiteColor));
}

footer ul.navbar-nav li:first-child,
.tx-hpkfe-pi-adresse { 
	padding-left: 0;
}

.ebene1_strong {
	font-weight: bold;
	padding-bottom: 10px;
}

.zentralfussmenu {
	display: none;
	list-style-type: none;
}

#fussmenue li::marker {
  content: none;
}

#fussmenue li,
.zentralfussmenu li {
	list-style-type: none;
}

#fussmenue {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#fussmenue li {
  list-style-type: none;
  margin: 0;
  position: relative;
  background-image:none;
  padding-right: 0.75em;
  margin-left:0.75em;
  border-right: 1px solid rgb(var(--offWhiteColor));
}

#fussmenue li:last-child {
  border-right: none;
  padding-right:0;
}

#fussmenue li:first-child {
  margin-left:0;
}

#fussmenue li a {
  text-decoration: none;
}

.zentralfussmenu a {
	color:rgb(var(--offBlackColor));
}

#socialshareprivacy {
	padding: 0;
}

#socialshareprivacy .social_share_privacy_area {
	display: flex; 
	margin-bottom: 0 !important;
}

.social_share_privacy_area .facebook.help_info {
	width: 140px;
}

/*----------------------------------AKKORDEON----------------------------------*/

.accordion_content {
	background: rgb(var(--whiteColor));
}

.accordion_element img {
	max-width: 100%;
	width: auto;
}

/*--------------------PRODUKTLOESUNGEN--------------------------------*/

.frame-layout-0.frame-128 {
	flex: 1 1 100%;
}

.frame .frame-default > .box {
	display: flex;
	flex-flow: column;
	padding: 15px;
}

.frame .frame-default > .box img {
	max-width: 100%;
	height: auto;
	width: auto;
}

.herstelleruebersicht {
	display: flex;
	flex-flow: column;
	margin-top: auto;
	min-height: 80px;
}

.herstellerlink a {
	line-height: 22px;
}

/*---------------------------HERSTELLER--------------------------------*/

.frame-80.frame-layout-0 { /* Herstellerseite */
	display: none;
}

.frame-layout-0.frame-202,
.frame-layout-0.frame-203 {
	height: auto;
}

.frame-layout-0.frame-202 {
	flex: 1 1 65.67%;
}

.frame-layout-0.frame-203 {
	flex: 1 1 32.33%;
}

.frame-128.frame-layout-30 {
	flex: 1 1 48.5%;
}

.frame-layout-0.frame-202 .box > header,
.frame-layout-0.frame-100 header {
	width: 100%;
	height: max-content;
}

.frame-128.frame-layout-30 img {
	width: auto;
}

.frame-100 img {
	padding-bottom: 0;
}

/*.frame-128.frame-layout-30 .box {
	background: rgb(var(--lightColor));
}*/

.frame-128.frame-layout-30 .box a {
	color: rgb(var(--whiteColor));
	text-decoration: underline;
}

.bg-secondary,
.frame-128.frame-layout-30 .box {
  background-color: rgba(var(--greyColor), 0.9) !important;
}

/*------------------------------MITARBEITERSUCHE--------------------------------*/

#inhalt h1 + div {
	height: max-content;
}

.cycle-slideshow {
	height: 55vh;
}

.cycle-slideshow .slide {
	position: relative;
}

.cycle-slide .csc-textpic-text {
	margin-top: 15px;
}

.col-12.col-lg-9 .box.layout-6{
	margin-bottom: 2em;
}

.col-12.col-lg-9 .frame-layout-0 #ajaxcontainer img { /*für Übersicht der Mitarbeitersuche*/
	width: 100%;
}

.col-12.col-lg-9 .ID-2,
.layout-14,
.layout-15 {
	border: 1px solid rgb(var(--lightColor));
	padding: 15px 0 15px 0;
	position: relative;
	margin-right: 1%;
	margin-bottom: 10px;
}

#ajaxcontainer .box {
	min-height: 0;
	padding-bottom: 1em;
}

#ajaxcontainer .box.layout-6 {
	border: 1px solid rgb(var(--lightColor));
	padding: 1em;
}


.mitarbeitersucheEinzelansicht {
	border:none!important;
}

.mitarbeitersucheEinzelansicht .layout-0,
.mitarbeitersucheEinzelansicht .layout-14,
.mitarbeitersucheEinzelansicht .layout-15 {
	border:none!important;
}

.mitarbeitersucheEinzelansicht .box {
	min-height: unset;
}


/*------------------------------BEWERTUNGEN--------------------------------*/

#bewertungen_widget {
	padding: 0;
}

.logogoldwert {
	float: right;
	margin-right: 15px;
}

.bewertungen-list-item {
	margin-bottom: 20px;
}

.bewertungen-cont-left {
	margin-bottom: 10px;
	border-bottom: 1px solid rgb(var(--lightColor));
}

.bewertunggesamt {
	display: inline-block;
	padding: 6px 15px;
}

.bewertungen .bewertungen-cont-top p {
	margin: 0;
}

footer .icon_stars {
	display: inline-block;
}

.icon_stars:after {
	font-family: FontAwesome;
	color: rgb(var(--mainColor));
}

.stars_1:after {
	content: '\f005';
}

.stars_1_5:after {
	content: '\f005\f123';
}

.stars_2:after {
	content: '\f005\f005';
}

.stars_2_5:after {
	content: '\f005\f005\f123';
}

.stars_3:after {
	content: '\f005\f005\f005';
}

.stars_3_5:after {
	content: '\f005\f005\f005\f123';
}

.stars_4:after {
	content: '\f005\f005\f005\f005';
}

.stars_4_5:after {
	content: '\f005\f005\f005\f005\f123';
}

.stars_5:after {
	content: '\f005\f005\f005\f005\f005';
}

/*------------------------------COOKIE--------------------------------*/

footer .cookie-icon-wrapper {
	background: rgb(var(--veryLightColor));
	border-radius: 2em 0 0 0;
	bottom: 0;
	padding: 0.8em 1em;
	position: fixed;
	right: 0;
	width: auto;
	z-index: 1;
}

.cookie-wrapper {
	background: rgba( var(--blackColor), 0.75 );
	box-shadow: 0 0 5px rgb(var(--greyColor));
	color: rgb(var(--offBlackColor));
	text-align: left;
	/*font-size: 15px;*/
	display: none;
	height: 100%;
	left: 0;
	overflow-y: auto;
	position: fixed;
	top: 0;
	-webkit-backface-visibility: hidden;
	z-index: 1035;
}

.cookie-content {
	background: rgb(var(--whiteColor));
	box-shadow: 0 0 5px rgb(var(--greyColor));
	left: 50%;
	padding: 2em;
	position: absolute;
	transform: translateX(-50%);
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

.cookie-settings-wrapper {
	display: none;
}

.cookie-setting-wrapper.open-div {
	display: block;
}

.cookie-list-link {
	border-radius: 3em;
	background:rgb(var(--whiteColor));
	border: 1px solid rgb(var(--greyColor));
	color: rgb(var(--greyColor));
	display: inline-block;
	height: 30px;
	right: 1em;
	overflow: hidden;
	position: absolute;
	text-decoration: none;
	text-indent: 0;
	width: 30px;
	z-index: 1;
}

.cookie-list-link::before {
	content: "i";
	display: block;
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
	line-height: 2rem;
}

.cookie-list-link.cookie-list-active:before {
	content: "X";
}

/* .cookie-list-link:hover,
.cookie-list-button:hover {
	background: rgb(var(--mainColor));
	border: 1px solid rgb(var(--mainColor));
	color: rgb(var(--whiteColor));
} obsolet*/

.cookie-list {
	background: rgb(var(--whiteColor));
	box-sizing: border-box;
	display: none;
	left: 0px;
	list-style: none;
	padding: 0;
	top: 0px;
	width: 100%;
}

.cookie-list li {
	margin: 0.25em 0;
	padding: 1em;
}

.cookie-list li li:nth-child(2n+1), 
.cookie-list li li:nth-child(2n) {
	background: transparent;
}

.cookie-list li li:nth-child(2n+1), 
.cookie-list li li:nth-child(2n) {
	background: transparent;
	margin: 0;
	padding: 0.25em 0.25em 0.25em 0;
}

.cookie-list li ul {
	list-style: none;
	padding: 0;
}

.cookie-details h3 {
	margin: 1em 0;
}

.cookie-element {
	box-sizing: border-box;
	display: block;
}

.cookie-note {
  color: rgb(var(--darkGreyColor));
}

.form-buttons {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1em;
}

#tx-indexedsearch-searchbox-sword {
	width: 100%;
}

.tx-indexedsearch-search-submit {
  display: flex;
}

.tx-indexedsearch-browsebox {
	list-style-type: none;
}

.tx-indexedsearch-browsebox li {
	display: inline;
	margin-left: 3%;
}

#tx_indexedsearch .tx-indexedsearch-search-submit input, 
.cookie-button, 
fieldset input.hpk_kon_subm,
#initmapnow {
	background: rgb(var(--mainColor));
	color: rgb(var(--whiteColor));
	border: 1px solid rgb(var(--mainColor));
	padding: 1em;
	display: flex;
	margin-top: 15px;
	justify-content: center;
	font-weight: bold;
}

.cookie-button,
#tx_indexedsearch .tx-indexedsearch-search-submit input,
#initmapnow,
.hpk_kon_subm {
	flex: 0 0 100%;
	max-width: 100%;
}

.cookie-button:hover,
#tx_indexedsearch .tx-indexedsearch-search-submit input:hover {
	text-decoration: none;
	background-color: rgb(var(--darkColor));
	border: 1px solid rgb(var(--darkColor));
}

.cookie-details-wrapper, .cookie-innercontent {
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.cookie-content fieldset:nth-child(2n+1), 
.cookie-list li:nth-child(2n+1) {
	background: rgb(var(--offWhiteColor));
}

.cookie-content fieldset:nth-child(2n), 
.cookie-list li:nth-child(2n) {
	background: rgb(var(--offWhiteColor));
}

.cookie-content .all-cookies {
	margin: 1.5em 0;
}

.cookie-content fieldset {
	border: none;
	margin: 0.5em 0;
	padding: 0.5em 1em;
}

.homepage-form .cookie-checkbox, 
.cookie-group-switch .cookie-checkbox,
div.hpk_kon_container2 {
	display: none;
}

.cookie-checkbox {
	flex: 0 0 5%;
	max-width: 5%;
}

.homepage-form label, .cookie-group-switch label {
	display: flex;
	flex-flow: wrap;
	justify-content: flex-end;
	cursor: pointer;
}

.cookie-content label {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	margin: 0.5em 0;
	width: 100%;
}

.cookie-content label:nth-child(3) {
	justify-content: space-between;
}

.homepage-form .cookie-checkbox:checked + label .switch-button, 
.cookie-group-switch .cookie-checkbox:checked + label .switch-button {
    left: auto;
    right: -5px;
}

.homepage-form .cookie-checkbox:checked + label .switch-background, 
.cookie-group-switch .cookie-checkbox:checked + label .switch-background {
    background: rgb(var(--mainColor));
}

label, 
label.label_name, 
label.label_vname, 
label.label_str, 
label.label_plz_ort, 
label.label_tel, 
label.label_fax, 
label.label_email, 
label.label_mobil {
	display: block;
	width: 100%;
	float: left;
}

.switch-background {
	background: rgb(var(--lightColor));
	border-radius: 10px;
	box-shadow: 1px 1px 1px rgb(var(--greyColor)) inset;
	height: 15px;
	position: relative;
	width: 30px;
}

.switch-button {
	background:rgb(var(--whiteColor));
	border-radius: 15px;
	box-shadow: 1px 1px 1px rgb(var(--greyColor));
	height: 20px;
	left: -5px;
	position: absolute;
	top: -3px;
	width: 20px;
}

.cookie-content legend {
	box-sizing: border-box;
	display: block;
	font-weight: 700;
	width: 100%;
}

legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: 0.5rem;
	font-size: calc(1.275rem + 0.3vw);
	line-height: inherit;
}


/*----------------------------SOCIAL LINKS------------------------------*/

#sociallinks {
  position: fixed;
  right: 0;
  top: 180px;
	z-index: 100; /*Icons dürfen nicht über dem mobilen Menü sein und nicht unter der Mitarbeitersuche*/
}

/* Um eine modernere Optik zu schaffen, habe ich einheitliche Farben für den Hintergrund genommen, ansonsten muss noch ein Farbverlauf definiert werden */

#sociallinks a {
  display: block;
  width: 35px;
  margin-bottom: 10px;
  background-color:rgb(var(--mainColor));
  color:rgb(var(--whiteColor));
  text-align:center;
  border:1px solid rgb(var(--whiteColor));
}

#sociallinks a:hover {
  background-color:rgb(var(--darkColor));
  color:rgb(var(--whiteColor));
}

#sociallinks a:before {
	font-family: FontAwesome;
	font-size:2em;
	display:inline-block;
	padding:0.25em 0;
	line-height:0.7em;
}

#sociallinks .facebook a:before {
	content:'\f39e';
}

#sociallinks .telefon a:before {
	content:'\f095';
}

#sociallinks .twitter a:before {
	content:'\e61b';
}

#sociallinks .googleplus a:before {
	content:'\f0d5';
}

#sociallinks .tiktok a:before {
	content:'\e07b';
}

#sociallinks .youtube a:before {
	content:'\f167';
}

#sociallinks .whatsapp a:before {
	content:'\f232';
}

#sociallinks .xing a:before {
	content:'\f168';
}

#sociallinks .linkedin a:before {
	content:'\f0e1';
}

#sociallinks .clicktocall a:before {
	content:'\f095';
}

#sociallinks .instagram a:before {
	content:'\f16d';
}

/********** 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(102%);
}

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


/*---------------------------------- LANDINGPAGE ------------------------------------*/

.landingpage {
	font-size: 1em;
}

.landingpage h2 {
	font-size: 2.2em;
	font-weight: 700;
}

.landingpage h3 {
	font-size: 2em;
	margin-bottom: 0.5em;
	font-weight: 700;
}

.landingpage h4,
.landingpage h5 {
	font-size: 1.5em;
	margin-bottom: 0.5em;
	font-weight: 700;
}

.landingpage h5 {
	font-weight: 500;
}

.landingpage #sidebar {
	display:none;
}

.landingpage #inhalt {
	width:100%;

	background-color:rgb(var(--whiteColor));
	padding:0 2.5em;

	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: center;

  gap:2em 0;
}

.landingpage #inhalt .align-center {
	text-align: center;
}

.landingpage #inhalt .box {
	min-height: 70px;
}

.landingpage #inhalt .frame-type-image .box {
	padding-bottom: 0;
}

.landingpage #inhalt .frame-layout-40 .bg-light h4 {
	color:rgb(var(--offBlackColor));
}

.landingpage #inhalt .frame-layout-41 {
	max-width:calc(50% - 2.5em);
	margin-left:2em;
}

.landingpage #inhalt .frame-layout-43 {
	max-width:calc(66.66666667% - 2.5em);
	margin-left:2em;
}

.landingpage #inhalt .frame-layout-18,
.landingpage #inhalt .frame-layout-44 {
	max-width:calc(66.66666667% - 2.5em);
	margin-right:2em;
}

.landingpage #inhalt .frame-layout-41:nth-child(odd) {
	max-width:50%;
	margin:0;
}

.landingpage #inhalt .frame-layout-18 .box,
.landingpage #inhalt .frame-layout-41 .box,
.landingpage #inhalt .frame-layout-42 .box,
.landingpage #inhalt .frame-layout-43 .box,
.landingpage #inhalt .frame-layout-44 .box,
.landingpage #inhalt .frame-layout-45 .box,
.landingpage #inhalt .frame-layout-46 .box {
	background-color:transparent;
	box-shadow:none;
}

.landingpage #inhalt .frame-layout-18 header *,
.landingpage #inhalt .frame-layout-18 .ce-textpic,
.landingpage #inhalt .frame-layout-41 header *,
.landingpage #inhalt .frame-layout-41 .ce-textpic,
.landingpage #inhalt .frame-layout-43 header *,
.landingpage #inhalt .frame-layout-43 .ce-textpic,
.landingpage #inhalt .frame-layout-44 header *,
.landingpage #inhalt .frame-layout-44 .ce-textpic
 {
	padding:0;
}

.landingpage #inhalt .frame-layout-43 .box p {
	width:100%;
}

.landingpage #inhalt .frame-layout-18 header:before,
.landingpage #inhalt .frame-layout-40 header:before,
.landingpage #inhalt .frame-layout-41 header:before,
.landingpage #inhalt .frame-layout-43 header:before,
.landingpage #inhalt .frame-layout-44 header:before,
.landingpage #inhalt .frame-layout-46 header:before {
	display:none;
}

.landingpage #inhalt .frame-layout-40 .box {
	background-color:transparent;
	box-shadow:none;
}

.landingpage #inhalt .frame-default.frame-layout-1,
.landingpage #inhalt .frame-default.frame-layout-2,
.landingpage #inhalt .frame-default.frame-layout-3,
.landingpage #inhalt .frame-default.frame-layout-4,
.landingpage #inhalt .frame-default.frame-layout-5,
.landingpage #inhalt .frame-default.frame-layout-6,
.landingpage #inhalt .frame-default.frame-layout-7,
.landingpage #inhalt .frame-default.frame-layout-8,
.landingpage #inhalt .frame-default.frame-layout-9,
.landingpage #inhalt .frame-default.frame-layout-10,
.landingpage #inhalt .frame-default.frame-layout-11,
.landingpage #inhalt .frame-default.frame-layout-13,
.landingpage #inhalt .frame-default.frame-layout-14,
.landingpage #inhalt .frame-default.frame-layout-15,
.landingpage #inhalt .frame-default.frame-layout-18,
.landingpage #inhalt .csc-frame.layout-7 {
	border:0;
}

.landingpage .bg-light {
	margin-bottom: 2.5em;
}

.landingpage #inhalt figure img[src*=".svg"] {
	max-width: 6em;
}

.landingpage #inhalt figure {
	margin:0;
}

.landingpage .vergleichstabelleInactiveButton {
	background-color: transparent;
}

.landingpage .ctaButton {
  background-color: rgb(var(--mainColor));
  border: 1px solid rgb(var(--mainColor));
  color: rgb(var(--whiteColor));
  padding: 0.5em 1.75em;
  font-size: 1.45em;
  cursor: pointer;
  margin: 1em 0;
  font-weight: 500;
  display: inline-block;
}

.landingpage .ctaCenterWrapper {
	text-align: center;
}

.landingpage #emastersConfiguratorButton {
	border-radius: unset;
}

.landingpage #inhalt .frame-type-html .box {
	background-color:transparent;
	box-shadow: none;
}

.landingpage .ce-headline-center {
	text-align:center;
}

.landingpage .frame-type-text.frame-layout-40 header::before {
	display:none;
}

.landingpage #titelueberschrift {
	background: rgb(var(--whiteColor));
  position: absolute;
  left: 0.5em;
  top: -5em;
  text-shadow: none;
  color: rgb(var(--mainColor));
  padding: 20px;
  width: auto;
  font-size: 2em;
}

.landingpage #inhalt ul,
.landingpage #inhalt li {
	list-style:none;
	padding-left: 0;
}

.landingpage #inhalt li {
	line-height:1.5em;
}

.landingpage #inhalt .ce-textpic.ce-right {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:space-between;
	align-items: flex-start;
	gap:2em;
	padding:1em 1.75em;
}

.landingpage #inhalt .ce-textpic.ce-right .ce-gallery {
	order:2;
}

.landingpage #inhalt .ce-textpic.ce-right .ce-bodytext {
	order:1;
}

.landingpage #inhalt .ce-textpic.ce-left {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:space-between;
	align-items: flex-start;
	padding:1em 1.75em;
}

.landingpage #inhalt .ce-textpic.ce-left .ce-gallery {
	order:1;
	width:10em;
}

.landingpage #inhalt .ce-textpic.ce-left .ce-bodytext {
	order:2;
	width:calc(100% - 10em);
}

.landingpage #inhalt ul li:before {
	color: rgb(var(--mainColor));
	content: "\f058";
	font-family: "FontAwesome";
	padding-right:0.75em;


  position: absolute;
  left: 0;
  line-height: 1;
  top: 0.2em;
}

.landingpage #inhalt ul li {
	position: relative;
  padding: 0 0 0.75em 2.0em;
}

.landingpage #inhalt hr {
	display: none;
}

.landingpage #inhalt .bewertungen-boxquer-item {
	float:left;
	width: calc(88% / 3);
  margin: 2em 2% 0 2%;
}

.landingpage #inhalt .bewertungen.bewertungen-boxquer-item p {
  margin:0;
}

.landingpage #inhalt .bewertungen.bewertungen-boxquer-item p:first-child {
  font-size: 1.2em;
  font-weight: 500;
}

.landingpage #inhalt .bewertungen.bewertungen-boxquer-item h3 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.landingpage #inhalt .bewertungen.bewertungen-boxquer-item .bewertungen-cont-querbottom {
	margin-bottom:2em;
}

/*.landingpage #inhalt .accordion_element {
	margin-bottom:1em;
}

.landingpage #inhalt .accordion_element .accordion_header {
	background-color: rgb(var(--primaryColor));
	color:rgb(var(--invertedTextColor));
	padding: 0.75em 1em;
	cursor:pointer;
	border-radius: 0.25em;
}

.landingpage #inhalt .accordion_element .accordion_header a {
	color:rgb(var(--invertedTextColor));
	text-decoration: none;
}*/


@media only screen and (max-width: 767px) {
  .landingpage {
  	font-size:1.1em;
  }

  .landingpage #inhalt .ce-textpic.ce-right {
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  }

  .landingpage #inhalt .ce-textpic.ce-right .ce-gallery {
  	order: 1;
  }

  .landingpage #inhalt .ce-textpic.ce-right .ce-bodytext {
  	order: 2;
  }

  .landingpage #inhalt .frame-layout-18,
  .landingpage #inhalt .frame-layout-41,
  .landingpage #inhalt .frame-layout-43,
  .landingpage #inhalt .frame-layout-44 {
  	margin:0;
  	max-width: 100%;
  	width:100%;
  }

  .landingpage #inhalt .box {
		min-height: 30px;
	}

	.landingpage #inhalt .frame-layout-41 .box {
		padding-bottom:0;
	}

	.landingpage #inhalt .bewertungen-boxquer-item {
		width:100%;
		margin:2em 0 0 0;
	}

	.landingpage #inhalt .frame-layout-41:nth-child(odd) {
		max-width:100%;
		margin:0;
	}

	.landingpage #titelueberschrift {
		background: unset;
	  position: relative;
	  left: unset;
	  top: unset;
	  text-shadow: none;
	  padding: unset;
	  width: 100%;
	  font-size: 2.75em;
	  text-align: left;
	  margin:0;
	}
}

@media only screen and (max-width: 639px) {
  .landingpage #inhalt .ce-textpic.ce-left .ce-gallery {
  	width:35%;
  }

  .landingpage #inhalt .ce-textpic.ce-left .ce-bodytext {
  	width:65%;
  }

  .landingpage #inhalt .frame-layout-43 .ce-textpic.ce-left .ce-bodytext {
  	width:100%;
  }
}

@media only screen and (max-width: 479px) {
	.landingpage #inhalt {
		padding:0 1.5em;
	}

  .landingpage .slider {
  	height:15.7em;

  	overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  .landingpage .slider img {
  	height:100%!important;
  	width: auto!important;
  	max-width: unset;
  }

  .landingpage #inhalt .frame-layout-41.frame-type-textpic .ce-textpic.ce-left,
  .landingpage #inhalt .frame-layout-40.frame-type-textpic .bg-light .ce-textpic.ce-left {
  	flex-direction: column;
  	align-items: center;
  	gap:2em;
  	text-align: center;
  	padding: 1em 0;
  }

  .landingpage #inhalt .frame-layout-41.frame-type-textpic .ce-textpic.ce-left .ce-gallery img,
  .landingpage #inhalt .frame-layout-40.frame-type-textpic .bg-light .ce-textpic.ce-left .ce-gallery img {
  	margin: 0;
	  display: inline;
	  float: none !important;
  }

  .landingpage #inhalt .frame-layout-41.frame-type-textpic .ce-textpic.ce-left .ce-bodytext,
  .landingpage #inhalt .frame-layout-40.frame-type-textpic .bg-light .ce-textpic.ce-left .ce-bodytext {
  	width:100%;
  }
}


@media only screen and (min-width: 768px) {
  .landingpage .col-md-8 {
  	width:calc(66.66666667% - 2.5em);
  }

  .landingpage .col-md-4 {
  	width:calc(33.333% - 0.5em);
  }
}



/* ============= *
 * Media-queries *
 * ============= */

@media only screen and (min-width: 480px) {
	
	#suche {
		right: 130px;
	}
}

/* @media only screen and (min-width: 576px) {
	
	.cycle-slideshow {
		height: 55vh;
	}
} */

@media only screen and (min-width: 640px) {
	
	#inhalt,
	.box.border.h-100.p-2 {
		display: flex;
		flex-flow: row wrap;
		gap: 1em 1em;
	}
	
	#inhalt {
		align-content:flex-start; /* Sorgt dafür, dass die Standart Einstellung überschrieben wird (space-between) Der Default Wert führte dazu, dass auf Seiten, auf welchen die Sitemap länger als der Content ist, unschöne Abstände im Content entstanden sind */
	}

	.frame.frame-default:not(.frame-default.frame-layout-12),
	.frame-128.frame-layout-30, .csc-frame.layout-7	/***** Kommentar: Produktseite *****/ {
		margin-bottom: 0; /********** Kommentar: für mobil, gap beginnt erst ab 640 *******/
	}
	
	.frame-layout-1, 
	.frame-layout-2, 
	.frame-layout-3, 
	.frame-layout-4.
	.frame-layout-7, 
	.frame-layout-8,
	.cycle-slideshow {
		/* min-height: 260px; wird das gebraucht?*/
		display: flex;
	}
	
	.frame-layout-1, 
	.frame-layout-2, 
	.frame-layout-3,
	.frame-layout-4,
	.frame-layout-7,
	.csc-frame-default.layout-7	{
		/*width: 32.6%;*/
		flex:  1 1 31.6%;
	}
	
	.frame-layout-0.frame-128 { /***** Kommentar: Rauchmelder unter IM *****/
		flex: 1 1 31.33%;
	}
	
	#inhalt div.frame-layout-0.frame-128, div.frame-layout-0.frame-128 .frame-layout-0,
	#inhalt div.frame-layout-0.frame-202	{ /***** Kommentar: überschreibt die Standardangabe, weil Produktlösungen mal wieder speziell sind *****/
		height: auto;
	}
	
	.frame-layout-0.frame-128 .box.border .frame-layout-0 .box { 
		border: 0;
	}
	 
	.frame-layout-8,
	.frame-layout-18	{
		/*width: 66.4%;*/
		flex: 1 1 65.4%;
	}
	
	.frame-layout-9.col-md-6,
	.frame-layout-10.col-md-6,
	.frame-layout-14, /*bei Stellenangebote*/
	.frame-layout-16,
	.frame-layout-17 {
		flex: 1 1 48%;
	}

	.frame-layout-17 {
		margin-top:0;
	}

	.frame-layout-43 {
		flex: 1 1 33.33333333334%;
	}
	
	.frame-layout-0 img {
		width: auto;
	}
	
	.powermail_fieldwrap {
		flex-flow: row;
	}
	
	.powermail_fieldwrap div {
		flex: 1 1 65.4%
	}
	
	label {
		flex: 1 1 32.6%;
		margin-right: 1rem;
	}
	
	.bewertungen-list-item {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	
	.bewertungen-cont-left {
		/*float: left;*/
		width: 20%;
		border: 0;
	}
	
	.bewertungen-cont-right {
		/*float: left;*/
		border-left: 1px solid rgb(var(--lightColor));
		padding-left: 2%;
		margin-left: 2%;
		width: 73%;
	}
	
	#socialshareprivacy {
		flex: 1 1 20%;
		margin-right: 15px;
	}
	
	#bewertungen_widget {
		align-self: center;
		flex: 1 1 80%;
	}
	
	.tx-indexedsearch-form {
		display: flex;
		width: 70%;
        display: inline-block;
	}
	
	.tx-indexedsearch-form label {
		width: 30%;
	}
	
	.tx-indexedsearch-search-submit {
		display: flex;
        width: 28%;
        float: right;
	}	
	
	.cycle-slideshow {
		height: 45vh;
	}
	
	#ajaxcontainer {
		display: flex;
		flex-flow: row wrap;
		gap: 1em 1em;
	}
	
	.col-12.col-lg-9 .box.layout-6 {
		flex: 1 1 48%;
	}
	
	.produktloesungen {
		display: flex;
		flex-flow: row wrap;
		gap: 1em 1em;
	}
		
	/*--------------------------------SHORTCUT------------------------------------*/

	.frame-type-shortcut .frame-layout-0 > .box {
		flex-direction: row;
		gap:1.0em;
		justify-content: space-between;
	}
	
	.frame-type-shortcut .frame-default.frame-layout-0 > .box {
		flex-direction: column;
	}

	.frame-type-shortcut > .box > .frame-128.frame-layout-0  {
		max-width:calc(50% - 0.5em);
	}

	.partner {
	  float: left;
	  width: calc(100% / 3);
	  padding: 0.25em 1.5%;
	}

	footer {
		padding-bottom:6em;
	}

	/*footer .row:first-child {
		display:flex;
		justify-content:space-between;
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items:stretch;
		max-width:calc(100% - 1em);
		width:100%;
		position:relative;
	}*/
	
	footer .row {
		display:flex;
		justify-content:space-between;
		/*align-items: flex-start;*/
		flex-direction: row;
		/*flex-wrap: nowrap;*/
		align-items:stretch;
		/*max-width:calc(100% - 1em);*/
		width: 100%;
		position: relative;
	}

/* 	footer .row:first-child ul {
		display:block;
	} brauchen wir nicht*/
	
	footer .row:last-child {
		margin-top: 2rem;
	}

	#fussmenue {
		display: flex;
		margin-left: 15px;
		position:absolute;
		bottom:-2em;
		left:0;
	}
	
	ul.zentralfussmenu.letztes, .tx-hpkfe-pi-adresse {
		padding: 0;
	}
}

@media only screen and (min-width: 768px) {
	
	#searchform {
		display:block;
	}

	#umschlag {
		margin-top: -10em;
		padding: 15px 0;
	}

	.kopf {
		min-height: 50px;

		/*Anpassung an das Original*/
		/*min-height: 100px;*/
	}

	#umschlag {
		margin: -10em auto 0 auto; /***** Kommentar: keinen Abstand nach unten zum Footer *****/
		margin:0 auto; /* Navigation überlappt Logo */
	}
	
	.darkLightSwitchWrapper {
		position: fixed;
		top: 45px;
		right: 1em;
		width: 6.5em;
	}
	
	.navbar-expand-md .navbar-collapse {
		align-items: flex-start;
	}
	
	.navbar {
		border-bottom: none;
		box-shadow: none;
	}
	
	#kopfmenue li, li.ebene1 {
		margin-right: 3px;
		margin-top: 3px;
	}
	
	/*li.ebene1 {
		padding: 0;
	}
	
	li.ebene1:first-child {
		padding-left: 0;
	}
	
	li.ebene1:last-child,
	#kopfmenue li:last-child {
		padding-right: 0;
	}*/
	
	.navbar-light .navbar-nav .ebene1 > a,
	.navbar #kopfmenue_div a {
		background: rgb(var(--mainColor));
		color: rgb(var(--whiteColor));
		padding: 3px;
	}

	.news-list-content > a img {
		width:75%;
	}
	
	/*#suche,*/
	#logo2 {
		position: absolute;
	}
	
	header .tx-hpkfe-pi-adresse {
		display: none;
	}

	header .tx-hpkfe-pi-adresse .hpk_adresse_kontakt {
		float: right;
	}
	
	header address {
		display: flex;
		flex-flow: column;
	}
	
	header .hpk_adr_firma {
		order: 1;
		margin-top:	0.50em;
		font-size:1.2em;
	}
	
	header .hpk_adr_tel {
	  text-indent: -2000px;
	  order: 2;
	  font-weight: 600;
	}
	
	header .hpk_adr_tel a::before {
	  content: "\f095";
	  padding-right: 8px;
	  font-family: FontAwesome;
	}
	
	header .hpk_adr_tel2 {
	  display: block;
	  text-indent: 0;
	  font-size: 1.35rem;
	}
	
	header .hpk_adr_plzort {
		order: 4;
	}
	
	header .hpk_adr_strasse {
		order: 3;
	}
	
	header .hpk_adr_fax,
	header .hpk_adr_land {
		display: none;
	}
	
	header .hpk_adr_mail {
		order: 5;
	}
	
	#logo_menu.fixed-top {
		position: relative;
	}
	
	/*#suche {
		right: -3px;
		top: 60px;
		width: 40px;
	}*/
	
	#suche .boxsuche_input {
		border: none;
		background: rgb(var(--offWhiteColor));
		width: 170px;
	}
	
	#suche .boxsuche_submit {
		background-color: transparent;
	}


	#searchButton {
		height: 2.0em;
	  width: 2.0em;
	  background-color: rgb(var(--mainColor));
	  margin-top: 0.2em;
	  padding:0.35em;
	  cursor:pointer;
	}

	#searchButton svg {
		fill:rgb(var(--whiteColor));
	}

	#searchButton:hover {
		background-color: rgb(var(--whiteColor));
	}

	#searchButton:hover svg {
		fill: rgb(var(--mainColor));
	}

	#searchform .boxsuche_input {
		position:absolute;
		top:3em;
		right:0;
		border:rgb(var(--mainColor)) 0.7em solid;
		padding:1em;
		width:15em;
	}

	@keyframes showSearchForm {
		from {
			display:block;
			padding:1em 0;
			width:0;
			overflow:hidden;
		} to {
			display:block;
			padding:1em 1em;
			overflow:hidden;
			width:15em;
		}
	}
	
	@keyframes hideSearchForm {
		from {
			display:block;
			padding:1em 1em;
			overflow:hidden;
			width:15em;
		} to {
			display:block;
			padding:1em 0;
			width:0;
			overflow:hidden;
		}
	}

	#searchform.closedSearchForm .boxsuche_input {
		animation-duration: 0.5s;
		animation-name: hideSearchForm;
		display:none;
	}

	#searchform.initialSearchForm .boxsuche_input {
		display:none;
	}

	#searchform.showSearchForm .boxsuche_input {
		animation-duration: 0.5s;
		animation-name: showSearchForm;
		display:block;
	}
	
	#logo {
		/*border-image: linear-gradient(to top, rgb(231, 15, 15), rgba(0, 0, 0, 0)) 1 100%;
		border-color: rgb(var(--mainColor));*/
		height: auto;
		margin-top: -4em;
		max-width: 350px;
		margin-left: 10px;
	}

	#logo_menu {
		background: transparent; 
		width: 100%;
		display: block;
		margin: auto 0;
		top: -80px;
	}
	
	#logo_menu > .container-fluid {
		padding: 0;
	}
	
	#logo_menu .fixed-top {
		position: absolute;
	}

	/* Anpassung für Logos mit großer höhe */
	#logo {
		padding-top:0;
	}

	#logoimg {
		width:max-content;
		max-width: 100%;
		max-height:8.0em;
		margin: 0 auto;
	  display: block;
	}
	
/* 	header .container-fluid{
		background-color: rgb(var(--secondColor));
	} Layut hat keine zweite Farbe*/
	
/* 	#navbarNav {
		margin-bottom: -3px;
	} */
	
	/*.dropdown-toggle::after,*//*drop-down-icon im Menü*/
	/*.ebene1 > a[id*="navbarDropdown"]::after { 
		font-size: 15px;
		left: 23px;
		top:-8px;
	}
	
	li.ebene1 > a[id*="navbarDropdown"]::after {
		font-size: 15px;
	}*/ /***** Kommentar: Wird in der Desktop-Version von Layout 8 nicht benötigt *****/
	
	.ebene2 .nav-link::before, /*.ebene1 .nav-link::before*/, .untermenu2 i.fa-chevron-right::before {
		display: none; /***** Kommentar: entfernt die Icons vor dem Menüpunkt in der Desktop-Version und ebene1 braucht keine Icons *****/
	}
	
	nav .navbar-nav {
		position: relative;
		top: 0;
		/*margin-bottom: -3px !important;*/ /***** Kommentar: Verursacht eine Kante, wenn Navigation zwei Reihen hat *****/
	}
	
/* 	.navbar-nav li.ebene1:first-child {
		display: none;
	} */
	
	.nav-item.ebene1 {
		width: auto;
	}
	
	/*.navbar-light .navbar-nav .ebene1 > a {
		padding-right: 2.1rem;
	}*/
	
	ul#navbarNav, 
	li.ebene1, 
/* 	ul.zentralfussmenu li.ebene2,
	ul.zentralfussmenu li.ebene3, */
	#kopfmenue li {
		border-bottom: none;
	}
	
	/*.nav-item.ebene1:first-child > a{
		margin: 0 8px;
	}*/
	
	/*.nav-item.ebene1 > a{
		margin-right: 8px;
	}*/
	
	/*.ebene1:hover .dropdown-menu.ebene2{
		display: block;
		background: rgb(var(--whiteColor));
		top: 44px;
		width: 350px;
		margin-left: -11px;
		border-radius: 0;*/
		/*left: 0;*/
	/*}
	
	.ebene2 {
		border-bottom: 0;
	}*/
	
	/*.nav-item:hover > a,
	#kopfmenue a:hover,
	.submenu-content:hover,
	.nav-item:active,
	#kopfmenue a:active,
	.submenu-content:active	{
		background: rgb(var(--mainColor));
		color: rgb(var(--whiteColor));
	}*/

	.nav-item:hover,
	.nav-item:hover a,
	#kopfmenue li:hover,
	#kopfmenue li:hover a {
		background-color:rgb(var(--whiteColor))!important;
		color:rgb(var(--mainColor))!important;
	}

	.nav-item a,
	#kopfmenue li a {
		transition: none!important;
	}

	/* Layout 19 Navigation Integration */

	nav .navbar-nav {
	  overflow-y: unset;
	  display: flex;
	  height: unset;
	}

	.dropdown-toggle::after,
	li.ebene1 > a[id*="navbarDropdown"]::after {
	display: none !important;
	/*position: unset;
	padding: 0;
	margin: 0;
	padding-left: 0.5em;*/
	}

	.responsiveNavigation .navbar-nav a.nav-link {
	  position: relative;
	  display: inline-block;
	  width: 90%;
	}

	#navbarNav .dropdown-icon {
	  display: none;
	}

	#navbarNav .navbar-nav .ebene1:hover > .dropdown-menu,
	#navbarNav .navbar-nav .ebene2:hover > .dropdown-menu,
	#navbarNav .navbar-nav .ebene3:hover > .dropdown-menu,
	#navbarNav .navbar-nav .ebene4:hover > .dropdown-menu {
		display: none; /***** Kommentar: Untermenü nicht sichtbar in Desktop-Variante*****/
		background: rgb(var(--whiteColor));
		top: 44px;
		width: 350px;
		margin-left: -11px;
		border-radius: 0;
		position: absolute;
		border: unset;
		margin-right: unset;
		left: unset;
		padding:0;
	}

	#navbarNav .navbar-nav .ebene3,
	#navbarNav .navbar-nav .ebene4 {
		display:none!important;
	}

	#navbarNav .navbar-nav .ebene2:hover > .dropdown-menu {
	  min-height: auto;
	}

	.dropdown-menu {
		background-color:rgb(var(--whiteColor));
	}

	.ebene2 {
		padding:unset;
	}

	#navbarNav .ebene1 ul {
		padding: unset;
	}

	#navbarNav .ebene1 > ul a {
		padding: 1rem 0.5rem 1rem 1.2rem;
	}
	
	body a:focus, /*mit body, damit bootstrap überschrieben wird*/
	body a:hover,
	.nav-link:hover,
	.nav-link:focus {
		color: rgb(var(--darkColor));;
	}
	
	#kopfmenue_div {
		display: flex;
	}
	
	#headerbild,
	#headercarousel,
	#slider {
		background-color: rgb(var(--mainColor));
		position: relative;
		/* top: 56px; */
	}
	
	#untermenue_ab2,
	.inhalt_menu {
		display: block;
		/* padding-top: 20px; */
	}
	
	#untermenue_ab2 li {
		margin-bottom: 10px;
	}
	
	nav#logo_menu + .row {
		margin-top: -3em;
	}

	.cookie-content {
		width: 90%;
	}

	/*.frame-layout-0 img[width] { 
	  width: attr(width) !important; 
	}*/
	
	.frame-layout-10.col-md-6 {
		width: 50%;
		display: flex;
	}
	
/* 	footer .hpk_adr_firma {
		margin-top: 0;
	} */
	
/* 	.tx-hpkfe-pi-gmap ~ .tx-hpkfe-pi-adresse {
		display: flex;
	} Weiß nicht, wo das genutzt wird */
	
	footer {
		margin-bottom: 4em;
		position: relative;
		font-size: 12px;
		padding-top: 10px;
	}
	
	footer .row {
		width: 100%; /*das Menü braucht Platz*/
	}
	
	footer .row:last-child { /*für socialshareprivacy und cookie-icon-wrapper*/
		/*position: absolute; */
		/*margin: auto auto 0 auto;*/
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		/* align-self: flex-end; */
		align-items: center;
		bottom: -135px;
		/* left: 50%; */
		/* transform: translateX(-50%); */
	}
	
	footer .tx-hpkfe-pi-adresse {
		width: 22%;
	}
	
	#fussmenue {
		display: block;
		text-align: left;
		width: 8%;
		position:relative;
	}

	#fussmenue li {
		border:none;
		padding:0;
		margin:0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	ul#fussmenue li, 
	ul.zentralfussmenu {
		list-style-type: none;
		text-align: left;
		padding-bottom: 10px;
		width: 18%;
	}
	
	.zentralfussmenu .ebene2 a::before {
		content: "\f105";
		font-family: FontAwesome;
		color: rgb(var(--mainColor));
		padding-right: 5px;
	}
	
	ul.zentralfussmenu:nth-child(2),
	ul.zentralfussmenu:nth-child(3),
	ul.zentralfussmenu:nth-child(4)	/*brauchen wir noch den dritten Menüpunkt?*/{
		display: block;
	}
		
	footer a:not(.cookie-icon-wrapper a, .cookie-wrapper a, #bewertungen_widget a) {
		color: rgb(var(--offBlackColor));
	}
	
	#sociallinks {
		z-index: 1040;
	}
	
	#socialshareprivacy {
		text-align: start;
		position: relative;
		bottom: 5px;
		/*padding-left: 25px;*/
		width: 20%;
	}
	
	#bewertungen_widget {
		position: relative;
/* 		left: 50%; Es geht auch ohne
		transform: translateX(-50%); */
		width: 80%;
	}
}

@media only screen and (min-width: 992px) {

	#searchButton {
		height: 2.28em;
	  width: 2.28em;
	}
	
	header .tx-hpkfe-pi-adresse {
		display: block;
		font-size: var(--fontSmallerSize);
		line-height: 1.1em;
		margin-top:1em;
	}

	.tx-hpkfe-pi-kontakt label {
		width:30%;
	}

	.tx-hpkfe-pi-kontakt input {
		width: 65%;
	}

	input.hpk_kon_plz {
	  width: 18%;
	  margin-right: 2%;
	}

	input.hpk_kon_ort {
	  width: 45%;
	}

	#umschlag {
		margin: -10em auto 0 auto; /***** Kommentar: keinen Abstand nach unten zum Footer *****/
	}

	img.img-fluid.me-2.float-start.image-embed-item {
		width: auto;
		max-width: 100%;
	}

	.frame-layout-0 .img-fluid.ms-2.float-start.image-embed-item,
	.frame-layout-0 .img-fluid.ms-2.float-center.image-embed-item {
		width: 40%;
	}
	
	.cookie-content {
		width: 75%;
	}

	.frame-type-shortcut > .box > .frame-128.frame-layout-0 {
		max-width:calc(33% - (2em / 3));
	}

	.frame-layout-43 {
		flex: 1 1 66.6666666666667%;
	}

	/*.tx-emasters-lib-uni-pi-video {
		flex-direction: row;
	}*/ /***** Kommentar: Wofür war das gedacht? Auf den Herstellerseiten zerschießt es die Videos. *****/

	.hpk_pc-klein .vjs-default-skin {
		width:300px!important;
	}
	
	.navbar-light .navbar-nav .ebene1 > a,
	.navbar #kopfmenue_div a {
		padding: 5px 10px;
	}
	
	#sidebar {
		gap: 1em 1em;
		display: flex;
		flex-flow: column;
		display:block;
	}
	
	/*--------------------------FOOTER ab992----------------------------*/
	
	footer {
		position: relative;
		font-size: 12px;
		padding-top: 10px;
	}
	
	/*footer .row:first-child {
		text-shadow: none;
		width: 1240px;
		margin: auto;
	}*/
	
	footer .row {
		text-shadow: none;
		width: 1240px;
		margin: 0 auto;
	}
	
	footer .row:last-child {
		/*left: 31px;*/
	}
	
	footer .tx-hpkfe-pi-adresse {
		/* width: 28%; überschrieben durch 768px s.o.*/
		/*padding-left: 22px;*/
	}
	
	footer .hpk_adr_firma {
		font-size: 125%;
	}
	
	footer span.hpk_adr_strasse, 
	footer .hpk_adr_plzort, 
	footer .hpk_adr_tel, 
	footer .hpk_adr_fax, 
	footer .hpk_adr_mail, 
	footer .hpk_adr_land, 
	footer .hpk_adr_mobil {
		font-size: 1em;
	}

	.zentralfussmenu:not(.zentralfussmenu.letztes) {
		/* display: block; */
		width: 12%;
	}
	
	ul.zentralfussmenu {
		display: block;
	}
	
	footer .row ul.zentralfussmenu.erstes {
		width: 12%;
	}

/* 	#fussmenue li::before {
		font-family: FontAwesome;
		content: "\f0da";
		margin-right: 1.0em;
		font-weight: 900;
		color:rgb(var(--lightColor));
		font-size:1.4em;
	} */
	
	footer a:hover:not(.cookie-icon-wrapper a, .cookie-list-link),
	footer a:focus:not(.cookie-icon-wrapper a, .cookie-list-link)	{
		color: rgb(var(--mainColor)); 
	}
	
	#cookie-list-button:hover {
		color: rgb(var(--whiteColor));
	}
	
	footer address {
		text-shadow: none;
	}
	
	.zentralfussmenue ul{
		list-style-type: none;
	}
	
	footer .navbar-nav {
	  display: none !important;
	}
	
	footer ul.navbar-nav li {
		border-right: 0;
	}
	footer .hpk_adr_firma {
		margin-top: 0;
	}
	
	.cookie-button {
		flex: 0 0 32%;
		max-width: 30%;
	}
	
	/*footer .row:last-child { /*für socialshareprivacy und cookie-icon-wrapper
		left: 50%;
		transform: translateX(-50%);
	}*/
	
	
	/* Flip Effekt ----------------------------------------------------------------------------------------------*/

	/*#inhalt .frame-default.frame-layout-6,
	#inhalt .frame-layout-6 header,
	#inhalt .frame-layout-6 .ce-bodytext {
		box-sizing: border-box;
	}
	
	#inhalt .frame-default.frame-layout-6 {
		-webkit-perspective: 2000px;
		perspective: 2000px;
		position: relative;
	}

	#inhalt .frame-layout-6 header,
	#inhalt .frame-layout-6 .ce-bodytext {
		align-self: center;
		display: flex;
		height: 100%;
		left: 0;
		margin: 0;
		padding: 15px;
		position: absolute;
		text-align: center;
		top: 0;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		transition: ease-in-out 0.4s;
		width: 100%;
	}

	#inhalt .frame-layout-6 header {
			background: #e6e6e6;
	}
	
	.frame-layout-6 header h2 {
		display: flex;
		align-self: center;
		justify-content: center;
		margin: 0;
	}

	#inhalt .frame-layout-6 .ce-bodytext {
		opacity: 0;
		position: relative;
		text-align: left;
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}

	#inhalt .frame-layout-6:hover header {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

	#inhalt .frame-layout-6:hover .ce-bodytext {
		opacity: 1;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}*/ /***** Kommentar: Markup anders *****/

}

@media only screen and (min-width: 1200px) {
	
	#logo_menu {
		top: -60px;
	}

	/*#logo {
		padding: 15px 0;
	}*/
	
	/*#sidebar {
		padding-left: 0;
	}*/
}

@media only screen and (min-width: 1260px) {
	
	#logo {
		margin-left: 0;
	}

}

@media only screen and (min-width: 1280px) {
	
	/*#inhalt {
		padding:0;
	}*/
	
	#logo {
		left: 0;
	}

	#logo2 {
		right: 0;
	}
	
	#suche {
		right: -20px;
	}
}

@media only screen and (min-width: 1600px) {
	
	.cookie-content {
		width: 65%;
	}
}

@media only screen and (min-width: 1800px) {
	
	.cookie-content {
		width: 55%;
	}
}


/* //////////////////////////////////
////////// Dark Mode Sheme //////////
////////////////////////////////// */

html[data-theme="dark"] {
	background-image: url(/fileadmin/templates/hpk3/layouts/layout8/css/img/diagonale_streifen_darkmode.jpg)!important;
}

[data-theme="dark"] {

	body, html {
		background-image: url(/fileadmin/templates/hpk3/layouts/layout8/css/img/diagonale_streifen_darkmode.jpg)!important;
	}

	#umschlag {
		background-color:rgb(var(--elementsBackGround));
	}

	#bodyumschlag > header {
		background-color: rgb(var(--offWhiteColor));
	}
			
	#suche .boxsuche_input {
		background: rgb(var(--offWhiteColor));
	}
	
	#suche .boxsuche_submit {
		background-image: url("img/lupe-thin-color0.png");
	}

	#logo {
		background-color:rgb(var(--offWhiteColor));
	}

	#logo::before {
	  border-image: linear-gradient(to top, rgb(var(--mainColor)), rgba(var(--offWhiteColor))) 1 100%;
	}

	.navbar-expand-md .navbar-collapse {
	  background: rgb(var(--whiteColor));
	}

	.navbar-light .navbar-nav .ebene1 > a,
	.navbar #kopfmenue_div a {
	  color: rgb(var(--blackColor));
	}

	.navbar-toggler-icon {
		background-image: var(--bs-navbar-toggler-icon-bg-dark);
	}

	#navbarNav .dropdown-icon svg,
	#navbarNav li.ebene2 .dropdown-icon svg {
		fill:rgb(var(--blackColor));
	}

	.nav-item:hover,
	.nav-item:hover a,
	#kopfmenue li:hover,
	#kopfmenue li:hover a {
    background-color: rgb(var(--offWhiteColor)) !important;
    color: rgb(var(--mainColor)) !important;
  }

	.dropdown-menu {
		background-color: rgb(var(--offWhiteColor));
	}

	/*.carousel-caption h5 {
	  color: rgb(var(--blackColor));
	  background: none repeat scroll 0% 0% rgba(var(--veryLightColor), 0.8);
	}

	 .carousel-caption p {
	color: rgb(var(--offWhiteColor));
	background: none repeat scroll 0% 0% rgba(var(--blackColor), 0.8);
  }*/ /***** Kommentar: Text im Headerslider wird nciht benötigt *****/

  .accordion_content {
  	background-color:rgb(var(--elementsBackGround));
  }


	.frame .frame-default > .box,
	/*.frame-default .box,*/
	.frame-layout-0.frame-202 .box,
	.frame-layout-0.frame-203 .box,
	.frame-128.frame-layout-30 .box,
	.frame-100.frame-layout-0 .box {
	  background: rgb(var(--elementsBackGround));
	  /*box-shadow:1px 2px 4px rgba(var(--whiteColor), 0.7);*/
	  border:1px solid rgb(var(--offBlackColor))!important;
	}

	.frame-layout-0.frame-128 .box.border .frame-layout-0 .box {
		border:none!important;
	}

	.frame-type-shortcut .frame-layout-0 .box,
	.frame-layout-7 .box {
		border:none;
		background-color:rgb(var(--offWhiteColor));
	}

	.em-yt-content {
		    background: rgba(var(--whiteColor), 0.25);
	}

	.frame-128.frame-layout-30 h3 {
	  color: rgb(var(--blackColor));
	}

	.bg-secondary,
	.frame-128.frame-layout-30 .box {
	  background-color: rgb(var(--elementsBackGround))!important;
	  color:rgb(var(--blackColor))!important;
	}

	.frame-128.frame-layout-30 .box a {
		color:rgb(var(--blackColor));
	}

	.frame-layout-8 .box {
		border:none;
	}

	#inhalt img[src$=".png"] {
	  background-color: rgb(var(--blackColor));
	}

	input, button, select, optgroup, textarea {
		background: rgb(var(--offWhiteColor));
		color:rgb(var(--blackColor));
	}

	.box > header::before,
	.accordion_header::before {
		background: rgb(var(--offWhiteColor));
	}

	#searchButton svg {
		fill:rgb(var(--blackColor));
	}

	#searchButton:hover {
		background-color: rgb(var(--blackColor));
	}

	#searchButton:hover svg {
		fill:rgb(var(--mainColor));
	}

	#sociallinks a {
	  background-color:rgb(var(--mainColor));
	  color:rgb(var(--blackColor));
	}

	#sociallinks a:hover {
	  background-color:rgb(var(--darkColor));
	  color:rgb(var(--blackColor));
	}

	.footer .cookie-icon-wrapper {
		background: rgb(var(--elementsBackGround));
	}

	.cookie-wrapper, #lbOverlay {
		background: rgba( var(--whiteColor), 0.75 );
	}
	
	@media only screen and (min-width: 768px) {
		.navbar {
			background-color: rgb(var(--whiteColor));
		}
		
		.navbar-expand-md .navbar-collapse {
			background: transparent;
		}

		#navbarNav .navbar-nav .ebene1:hover > .dropdown-menu, #navbarNav .navbar-nav .ebene2:hover > .dropdown-menu, #navbarNav .navbar-nav .ebene3:hover > .dropdown-menu, #navbarNav .navbar-nav .ebene4:hover > .dropdown-menu{
			background: rgb(var(--offWhiteColor));
		}

		.nav-item:hover > a, #kopfmenue a:hover, .submenu-content:hover, .nav-item:active, #kopfmenue a:active, .submenu-content:active {
		color: rgb(var(--blackColor));
	  }
	}
}