@charset "utf-8";  

/* 
CSS Document HPK
Layout 05 - Grundaufbau, Homepage
*/

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

 :root {
	--mainColor: 226, 0, 26;
	--darkMainColor: 128, 0, 0;
	--bgBodyColor: 226, 0, 26;
	
	/*text*/
	--fontMainFamily: Helvetica, Arial, sans-serif;
	--fontH1Size: 1.65em;
	--fontH2Size: 1.44em;
	--fontH3Size: 1.3em;
	--fontH4Size: 1.2em;
	--fontH5Size: 1.15em;
	--fontH6Size: 1.1em;
	--fontBodySize: 0.94em;
	--fontSmallerSize: 0.8em;
	--smallText: 0.7em;


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

	/* 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;
	
	/* Lupe Icon */
	--magnifyingGlass: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3e%3c/svg%3e");

}

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

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

	--blackColor:					255, 255, 255;
	--offBlackColor:				234, 234, 234;
	--lightColor:					119, 119, 119;
	--veryLightColor:				102, 102, 102;
	--offWhiteColor:				 35,  45,  50;
	--elementsBackGround: 			 27,  37,  42;
	--whiteColor:					  0,   0,   0;

	--blueishLightColor:			20, 20, 20;

	--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 {
	opacity:0;
}

.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/layout5/css/img/diagonale_streifen_grau_weiss.jpg);
	font-family: var(--fontMainFamily);
	font-size: var(--fontBodySize);
	height: 100%;
	color: rgb(var(--offBlackColor));
	line-height: 1.15em;
}

body #bodyumschlag.container-fluid {
	margin: 0 auto;
	max-width: 1200px;

	/* Verhindert Schlagschatten */
	/*overflow-x: hidden;
	overflow-y: hidden;*/
}

.row {
	max-width: 100%;
}

.shadowHide {
	overflow-y: hidden;
	margin:0;

	width: calc(100% + 2em);
	max-width: unset;
	background: transparent;
	padding: 0 1em;
	margin-left: -1em;
}

header .shadowHide {
	overflow-y:unset;
}

header .inhalt_menu {
	display: none;
}

#umschlag {
	position: relative; /* macht das unter 768px etwas defekt? */
	background-color: rgb(var(--whiteColor));
	max-width: 1240px;
	margin: auto;
	padding: 0 0 20px;

	box-shadow: 0px -10px 10px 4px rgba(var(--blackColor),0.5);
}


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

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

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

ul {
	padding-left: 1rem;
}

.border {
	border:none!important;
}

.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 {
	font-size: var(--fontH1Size);
}

h2, .accordion_header_content {
	font-size: var(--fontH2Size);
}

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: 1em 0;
	width: 100%;
	text-transform: uppercase;
}

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

.tx-hpkfe-pi-kontakt h2 {
	font-size: 120%;
}

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

/* Die vorherige Anweisung versteckt die Überschrift bei den Produktlösungen -> Produktfilme (YouTube) Daher wird diese Information hier überschrieben */
.col-md-6.frame.frame-default.frame-type-list.frame-layout-9 .box > header:before,
.col-md-6.frame.frame-default.frame-type-list.frame-layout-10 .box > header:before {
	display:none;
}

.col-md-6.frame.frame-default.frame-type-list.frame-layout-9 .box .elastic-video,
.col-md-6.frame.frame-default.frame-type-list.frame-layout-10 .box .elastic-video {
	padding:0 1em 1em 1em;
	text-align: center;
}

/*.col-md-6.frame.frame-default.frame-type-list.frame-layout-9 .box header,
.col-md-6.frame.frame-default.frame-type-list.frame-layout-10 .box header {
	padding:1em 1em 0 1em!important;
}*/


/*.col-md-6.frame.frame-default.frame-type-list.frame-layout-9 .box .elastic-video .em-yt-video,
.col-md-6.frame.frame-default.frame-type-list.frame-layout-10 .box .elastic-video .em-yt-video {
	
}*/

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

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

/*.frame-layout-13 h3 {
	background: rgb(var(--veryLightColor));
}*/ /***** Kommentar: Nicht benötigt *****/

.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;
}

/*----------------------------------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 {
	color: rgb(var(--offBlackColor))!important;
}

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

a.link-typ1::before, a.link-typ2::before, a.link-typ3::before, p.detailsansehen a::before {
    font-family: FontAwesome;
    content: "\f0da";
    margin-right: 0.3em;
    font-weight: 900;
    color: rgb(var(--mainColor));
    font-size: 1.4em;
    position: relative;
    top: 2px;
}

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

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

#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. *****/ 
}

.navbar-light .navbar-nav .ebene1 > a,
.navbar #kopfmenue_div a {
	background: rgb(var(--mainColor));
	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;
}

.hpk_kon_container {
	margin-bottom: 0.32rem;
}

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

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

.tx-hpkfe-pi-kontakt .hpk_kon_subm {
	width: 100%;
}

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

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

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

.kopf {
	background: linear-gradient(180deg, rgb(var(--offWhiteColor)) -10%, rgb(var(--whiteColor)) 30%);
	box-shadow: 0px 0px 10px 4px rgba(var(--blackColor),0.5);
	max-width: 1240px;
	margin: auto;
	position: relative;
}

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

#logo {
	/*margin-left: 15px;*/
	margin-top: 56px;
	/*padding-top: 15px;*/
	max-width: 240px;
}

#logoimg {
	padding: 20px 0 20px 1%;
	width: auto;
	max-width: 100%;
}

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

header .tx-hpkfe-pi-adresse {
	display: none;
}

/* #headerbild,
#headercarousel,
#slider {
	box-shadow: inset 0 5px 5px -5px rgb(var(--veryDarkColor)), inset 0 -5px 5px -5px rgb(var(--veryDarkColor));
} */

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

.carousel-caption {
	left: 0px;
	bottom: 0;
	text-align: left;
	width: 100%;
	padding-bottom: 0;
	display: inline-block!important;
}

.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(--mainColor), 0.8);
}

.carousel-caption p {
	display: none;
}

/*----------------------------------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-icon {
	width: 1.3em;
}

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

ul#navbarNav,
/*li.ebene1,*/
header li.nav-item,
#kopfmenue li{
	border-bottom: 1px solid rgb(var(--lightColor));
	padding: 5px 0;
}

header li.nav-item {
	padding: 0; /***** Kommentar: Besser kein Padding, damit der ganze Link klickbar ist *****/
}

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

.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;
}

.navbar-expand-md .navbar-collapse {
	background: rgba(var(--whiteColor), 0.85);
	padding: 0 10px;
}

nav .navbar-nav {
	position: fixed;
	top: 55px;
	left: 11px;
	width: 100%;
	background: rgba(var(--whiteColor), 1);
}
 
.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));
	border: none;
}

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

#untermenue_ab2 {
	display: none;
}

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

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

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

.dropdown-menu.ebene2.show {
	padding: 0;
	border-top: 1px solid (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: #e70f0f;
margin-right: 0.5em;
} /***** Kommentar: Icons in diesem Layout nicht benötigt  *****/

#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: 6%;
}

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

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

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

#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;
	background-color: rgb(var(--offBlackColor));
	mask: var(--magnifyingGlass);
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
	width: 20px;
	height: 20px;
	padding: 0;
	position: absolute;
	right: 26px;
	top: 8px;
}

/* 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: 3.0em;*/
  width: 43px;
  /*height: 3.0em;*/
  height: 45px; /***** Kommentar: Finde die Angabe für solche Elemente besser zum Positionieren *****/
  position: absolute;
  z-index: 1;
  right: 0.5em;
  top: 23px;
  font-size: 1.0em;
  transform: rotate(0deg) translateY(-50%);
}

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

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

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

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

#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 { /***** Kommentar: li  statt ul, damit die Border durchgehend ist und rechts kein padding, damit die Pfeile untereinander sind *****/
	padding: 0 0 0 1.2rem;
}

#navbarNav .ebene1 li:last-child {
	border-bottom: 0;
}

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

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

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

.frame.frame-default:not(.frame-default.frame-layout-12),
#socialshareprivacy,
.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%;
	position: relative;
	min-height: 190px;
	width: 100%;
	padding: 15px 0;
}

.frame-layout-14 .box,
.frame-layout-15 .box {
	min-height: 0; /***** Kommentar: sieht sonst blöd aus bei Partnerschaften oben *****/
}

.frame-layout-1 .box,
.frame-layout-2 .box,
.frame-layout-3 .box,
.frame-layout-4 .box,
.frame-layout-6 .box,
.frame-layout-7 .box,
.frame-layout-8 .box,
.frame-layout-9 .box,
.frame-layout-10 .box,
.frame-layout-13 .box,
.frame-layout-14 .box,
.frame-layout-15 .box,
.frame-layout-18 .box,
.accordion_element, .inhalt_menu .frame-layout-0 .box,
.frame-layout-0.frame-128 .box,
.tx-emasters-lib-uni-pi-video,
.frame-layout-0.frame-100 .box {
	background: rgb(var(--offWhiteColor));
	border: 1px solid rgb(var(--lightColor));
	border-radius: 8px;
}

.frame-100.frame-layout-0.frame-type-list .box {
	padding: 6px 15px !important;
}

.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-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 {
	width: 100%;
}

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

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

.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;
}

.frame-layout-13 .ce-intext .ce-gallery {
	width: 100%;
	padding: 0.75em 1.25em;
	display: flex;
	gap: 1.5em;
}

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

/**.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-------------------------------*/

#umschlag img {
	border-radius: 8px;
}

.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*/ { /*Abstand nach unten zum Text*/
	/*padding-bottom: 2%;*/
	margin-bottom: 0.5rem;
} /* Muss raus, sonst hat border-radius keinen Effekt unten */

.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-16 img,
.frame-layout-17 img {
	width: 100%;
}

.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;
}

/*body #lbBottomContainer {
	z-index:100;

	Warum war dies Notwendig? Wird doch darüber gesetzt
}*/

body #lbBottomContainer {
	z-index:100;
}

#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------------------------------------*/

.tx-emasters-lib-uni-pi-video {
	display:flex;
	flex-direction: column;
	gap: 1em;
	padding: 15px;
}

.frame-100 .tx-emasters-lib-uni-pi-video {
	border: none;
	padding: 0;
}

.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: 0;
  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));
}

.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;
}



/* Playlist Beginn (Layout 19) */

/* Video Selector */
.tx-emasters-lib-uni-pi-video .playlist-components .playlist {
	width:100%;
	overflow-x:hidden;
	position:relative;
	overflow-y:visible;
	height:6em;
}

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

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul {
	padding-inline-start: 0;

	position: absolute;
	white-space: nowrap;
	transition: transform 0.3s ease;
}

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul li {
	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 li img {
	opacity:0.75;
	width:100%;
	height:auto!important;
}

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul li:hover img {
	opacity:1;
}

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

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul .active img {
	filter:none;
	animation-duration:0;
	animation-name: none!important;
	opacity:1;
}

.tx-emasters-lib-uni-pi-video .playlist-components .playlist ul .active img:hover {
	filter:none;
	animation-duration:0;
	animation-name: none!important;
	opacity: 1;
}

.tx-emasters-lib-uni-pi-video .playlist-components .playlist button {
	display:none;
}

.tx-emasters-lib-uni-pi-video .overlay {
	display:none!important;
}

/* Playlist ende */

/***** Kommentar: Videos (Youtube) z. B. auf der Seite Regiolux *****/
.em-yt-overlay {
	position: relative;
}

.em-yt-content {
    color: rgb(var(--offBlackColor));
    position: absolute;
    z-index: 3;
    background: rgba(var(--whiteColor), 0.8);
    height: max-content;
	padding: 6px 15px;
	text-align: center;
	width:100%;
}

img.em-yt-content-img {
	height: auto;
	width: 100%;
}

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

.frame-type-shortcut > .box {
	display:flex;
	flex-wrap: wrap;
	gap:1.0em 1em;
}

.frame-type-shortcut .frame-layout-0 .box {
	margin:0;
	box-shadow: none;
}

.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------------------------------------*/

.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%;
}

textarea.hpk_kon_anfrage {
	height: 150px;
}

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(--lightColor));*/
	background: none;
	padding: 2px;
	box-shadow: none;
}

.hpk_adr_firma, 
.hpk_adr_strasse, 
.hpk_adr_plzort, 
.hpk_adr_land, 
.hpk_adr_tel, 
.hpk_adr_fax, 
.hpk_adr_fax, 
.hpk_adr_mobil, 
.hpk_adr_mail,
.hpk_adr_tel2 {
	line-height: 20px;
}

#inhalt .hpk_adr_land, 
#inhalt .hpk_adr_firma {
	margin-bottom: 8px;
}

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

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(--mainColor));
	text-decoration: none;
}

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

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

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

#hpk_map_canvas {
	height: 250px;
}

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


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

.news-list-item {
	border-bottom: 1px solid rgb(var(--lightColor));
	padding: 0 0 8px 0;
}

.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;
	width: 100%;
}

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

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

p.news_latest_title {
	margin-bottom: 4%;
}

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

.news-single-item {
	padding: 0 0 8px 0;
}

.news-list-content img {
	width: 100%;
}

.newsdatum,
.newspipe {
	display: none;
}

.newstitlesingle {
	line-height: 2.5rem;
}

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

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

.news-single-img {
	/*width: 40%;*/ /***** Kommentar: Auf der News-Detailseite float das Bild sonst aus dem Inhaltsbereich hinaus *****/
}

.news-single-item .news-single-backlink {
	padding: 0;
}

.clearnews {
	clear: both;
}

.shariff {
	margin-top: 15px;
}

.news-single-item hr.cl-right {
	border: 1px solid rgb(var(--darkGreyColor));
	margin-bottom: 10px;
}

.detailsansehen a {
    background: transparent !important;
	font-weight: 700;
}

/*--------------------------------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:nth-child(odd) {
	background: rgb(var(--veryLightColor));
}

.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-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 address.hpk_adresse_kontakt.adresse_all {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

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

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

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

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

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;
	color:rgb(var(--blackColor));
}

#fussmenue,
.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 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 {
	margin: 0 1rem;
	max-width: 100%;
	width: auto;
}

.accordion_header  {
	margin: 0.5rem 1rem;
}

.accordion_header .fa-plus,
.accordion_header .fa-minus  {
	position:absolute;
	top: 50%;
	transform:translateY(-50%);
}

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

.produktloesungen {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 1.0em;
}

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

.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-100 .box.border.h-100.p-2 {
	height: 100%	!important;
}

.frame-128.frame-layout-30 img {
	width: auto;
}
/*.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--------------------------------*/

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

.box.border.h-100.p-2 {
	height: unset!important; /* Damit die Mitarbeitersuche auf der Detailseite Funktioniert */
}

/* Ungetestet, das Markup auf der MA Suche - Übersichtsseite hat sich scheinbar geändert (mitarbeitersuche.html) */
#inhalt > .frame.frame-default.frame-type-list.frame-layout-0 .box {
	height: max-content;
}

.csc-frame.csc-frame-default.layout-7.box,
.csc-frame.csc-frame-default.box.layout-0 {
	height:unset; /* Damit die Mitarbeitersuche auf der Startseite Funktioniert */
}

.csc-frame.csc-frame-default.box.layout-0,
.csc-frame.csc-frame-default.box.layout-14,
.csc-frame.csc-frame-default.box.layout-15,
.box.layout-0.csc-default.csc-frame.csc-frame-default.IM.normal.ID-2 {
	min-height: 0;
}

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

footer .icon_stars {
	display: inline-block;
	margin-right: 0.5rem;
}

.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: 5;
}

.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: 9999;
}

.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-content,
.cookie-icon-wrapper a {
	text-shadow: none;
}

.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";
	color: rgb(var(--greyColor));
	/*margin-top: 6px;*/
}

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

.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 {
	color: rgb(var(--mainColor));
	text-decoration: none;
	background-color: rgb(var(--whiteColor));
	border: 1px solid rgb(var(--mainColor));
}

.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;
}

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

.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));
}


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

#sociallinks {
  position: fixed;
  right: 0;
  top: 180px;
  z-index:4;
}

#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 .twitter a:before {
	content:'\e61b';
}

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







/*---------------------------------- 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 .shadowHide {
	overflow-y:unset;
}

.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-1 .box,
.landingpage #inhalt .frame-layout-2 .box,
.landingpage #inhalt .frame-layout-3 .box,
.landingpage #inhalt .frame-layout-4 .box,
.landingpage #inhalt .frame-layout-6 .box,
.landingpage #inhalt .frame-layout-7 .box,
.landingpage #inhalt .frame-layout-8 .box,
.landingpage #inhalt .frame-layout-9 .box,
.landingpage #inhalt .frame-layout-10 .box,
.landingpage #inhalt .frame-layout-13 .box,
.landingpage #inhalt .frame-layout-14 .box,
.landingpage #inhalt .frame-layout-15 .box,
.landingpage #inhalt .frame-layout-18 .box,
.landingpage #inhalt .inhalt_menu .frame-layout-0 .box,
.landingpage #inhalt .frame-layout-0.frame-128 .box,
.landingpage #inhalt .tx-emasters-lib-uni-pi-video,
.landingpage #inhalt .frame-layout-0.frame-100 .box {
	border:0;
}


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

.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;
  border-radius: 0.5em;
}

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

.landingpage #emastersConfiguratorButton {
	border-radius: 0.5em;
}

.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;
  z-index:99;
}

.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;
	}
}

@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;
	}

	.zentralfussmenu .ebene2 {
		border-bottom: none;
	}
}

@media only screen and (min-width: 640px) {
	
	.carousel-caption h5,
	.carousel-caption p	{
		padding: 10px 10px 10px 20px;
		margin-right: 40%;
	}
	
	.carousel-caption h5 {
		font-size: 120%
	}
	
	.carousel-caption p {
		display: inline-block;
		font-size: 80%;
		color: rgb(var(--offBlackColor));
		background: none repeat scroll 0% 0% rgba(var(--whiteColor), 0.8);
	}

	#headercarousel,
	#slider {
    width: calc(100% + 4em);
    margin-left: -2em;
    z-index:1;
    position: relative;
	}

	#headercarousel::after,
	#slider::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 2.0em;
    width: calc(100% - 4em + 1px);
    height: 25px;
    pointer-events: none;
    background: linear-gradient(rgba(var(--blackColor), 0.45), rgba(var(--blackColor),0));

    mask-image:
        radial-gradient(ellipse farthest-corner at bottom center,transparent 55%,rgba(0,0,0,0.75) 75%),
        linear-gradient(to right, transparent, black 2%, transparent 25%, transparent 75%, black 98%, transparent);
	}


	#inhalt {
		display: flex;
		flex-flow: row wrap;
		gap: 1em 1em; 
	}

	#inhalt.col-md-9 h1 + div > div.box {
		height: auto;
	}
	
	.frame.frame-default:not(.frame-default.frame-layout-12),
	.frame-128.frame-layout-30	/***** Kommentar: Produktseite *****/ {
		margin-bottom: 0; /********** Kommentar: für mobil, gap beginnr erst ab 640 *******/
	}
	
	.frame-layout-1, 
	.frame-layout-2, 
	.frame-layout-3, 
	.frame-layout-4.
	.frame-layout-7, 
	.frame-layout-8,
	.cycle-slideshow {
		display: flex;
	}
	
	.frame-layout-1, 
	.frame-layout-2, 
	.frame-layout-3,
	.frame-layout-4,
	.frame-layout-7,
	.csc-frame-default.layout-7	{
		flex:  1 1 31.6%;
	}
	
	.frame-layout-0.frame-128 { /***** Kommentar: Rauchmelder unter IM *****/
		flex: 1 1 31.33%;
	}

	.produktloesungen .frame-layout-0.frame-128 {
		max-width: calc((100% - 2em) / 3);
	}
	 
	.frame-layout-8,
	.frame-layout-18	{
		flex: 1 1 65.4%;
	}
	
	.frame-layout-9.col-md-6,
	.frame-layout-10.col-md-6,
	.frame-layout-14, /*bei Stellenangeboten*/
	.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%; flex-element hat keine Wirkung*/		
		margin-right: 1rem;
	}
	
	.bewertungen-list-item {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	
	.bewertungen-cont-left {
		width: 20%;
		border: 0;
	}
	
	.bewertungen-cont-right {
		border-left: 1px solid rgb(var(--lightColor));
		padding-left: 2%;
		margin-left: 2%;
		width: 73%;
	}
	
	.news-single-item img,
	.news-list-content img	{
		float: right;
		margin: 0 0 0.5rem 0.5rem;
		max-width: 50%;
	}
	
	.tx-indexedsearch-form {
		width: 70%;
		display: inline-block;
	}

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

	.tx-indexedsearch-search-submit {
		display: flex;
		width: 28%;
		float: right;
	}
	
	#socialshareprivacy {
		flex: 1 1 20%;
		margin-right: 15px;
	}
	
	#bewertungen_widget {
		align-self: center;
		flex: 1 1 80%;
	}
	
	/*--------------------------------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%;
	}


/* 	#fussmenue,
	.zentralfussmenu {
		display: block;
	} */

	footer {
		padding: 10px 0 0 0;
		font-size:75%;

		margin-top: 2em !important;
    background: linear-gradient(0deg, rgba(var(--whiteColor), 0) 0%, rgba(var(--whiteColor), 1) 100%);
	}

	footer .row:first-child {
		flex-wrap:nowrap;
		margin-left: 0;
		margin-right: 0;
    padding-left: 0;
		padding-right: 0;
	}
	
	footer .row {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: baseline;
		/*position: relative;*/
		width: 100%;
	}

	footer .row > * {
		flex-shrink: unset;
	}

	footer .row:first-child > * {
		width: auto;
	}

	footer .row:first-child ul {
		display: block;
	}
	
	/*footer .row:last-child {
		margin-top: 2rem;
	}*/
	
	/*footer .tx-hpkfe-pi-adresse {
		flex: 1 1 48%;
	}*/

	footer a:not(.cookie-icon-wrapper a, .cookie-wrapper a) {
		color: rgb(var(--offBlackColor));
	}
	
	footer a:hover:not(.cookie-icon-wrapper a),
	footer a:focus:not(.cookie-icon-wrapper a)	{
		color: rgb(var(--mainColor)); 
	}

	ul#fussmenue li, 
	ul.zentralfussmenu {
		/*margin-left: 15px;*/
		list-style-type: none;
		text-align: left;
		padding-bottom: 10px;
		/*width: 33%;*/
	}

	#fussmenue li::before {
		font-family: FontAwesome;
		content: "\f0da";
		margin-right: 1.0em;
		font-weight: 900;
		color:rgb(var(--lightColor));
		font-size:1.4em;
	}

	#fussmenue {
		/*display: flex;
		
		position: absolute;
		bottom: -2em;
		left: 0;*/
		/*justify-content: flex-end;
		margin-left: 15px;
		flex: 1 1 49%;*/

    display: flex;
    flex-direction: column;
    align-items: flex-start;
	}

	#fussmenue li {
		border-right:none;
	}
	
	ul.zentralfussmenu.letztes, .tx-hpkfe-pi-adresse {
		padding: 0;
	}
}

@media only screen and (min-width: 768px) {
	
	.darkLightSwitchWrapper {
		position: relative;
		top: -3px;
		right: 10px;
		width: 11em;
	}
	.navbar {
		border-bottom: none;
		box-shadow: none;
	}
	
	.header-content {
		display: flex;
		flex-flow: column;
	}
	
	#suche,
	#logo2,
	#kopfmenue_div	{
		display: block;
		position: relative;
		top: 0;
		left: 0;
		align-self: flex-end;
	}
	
	/*header .tx-hpkfe-pi-adresse {
		display: block;
		font-size: var(--fontSmallerSize);
		line-height: 1.1em;
		margin-top:1em;
	}

	header .tx-hpkfe-pi-adresse .hpk_adresse_kontakt {
		float:right;
	}
	
	header address {
		display: flex;
		flex-flow: column;
	}
	
	header .hpk_adr_firma {
		order: 2;
		margin-top:	1.90em;
	}
	
	header .hpk_adr_tel {
	  text-indent: -2000px;
	  order: 1;
	  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_mobil {
        order: 5;
    }
	
	header .hpk_adr_mail {
		order: 6;
	}*/
	
	#logo_menu.fixed-top {
		position: relative;
		background-color: transparent;
        max-width: 1200px;
        margin: 0 auto;
        /*top: 124px;*/
	}
	
	.navbar-expand-md .navbar-nav {
		background: transparent;
	}

	.news-list-content > a img {
		width:75%;
	}
	
	#suche {
		top: 7px;
		width:250px;
	}
	
	#suche .boxsuche_input,
	#suche .boxsuche_submit {
		color: rgb(var(--offBlackColor));
	}
	
	#suche .boxsuche_input {
		border: none;
		border-radius: 8px;
		background: rgb(var(--offWhiteColor));
		width: 250px;
	}
	
	#suche .boxsuche_submit {
		right: 8px;
	}
	
	#logo {
		margin-top: 5px;
		max-width: 350px;
		margin-left: 10px;
	}

	#headerbild img,
	#slider img,
	#logo_menu,
	#headercarousel	.carousel-inner {
		display: block;
		margin: auto;
	}
	
	#logo_menu .fixed-top {
		position: absolute;		
	}
	
	/*header .container-fluid{
		background-color: rgb(var(--secondColor));
	}*/
	
	.navbar-light .navbar-nav .ebene1 > a,
	.navbar #kopfmenue_div a {
		background: linear-gradient(to bottom,  rgb(var(--mainColor)) 40%, rgb(var(--darkMainColor)) 100%);
	}
	
	.navbar-light .navbar-nav .ebene1 > a:hover,
	.navbar #kopfmenue_div a:hover {
		background: linear-gradient(to bottom,  rgb(var(--mainColor)) 0%, rgba(var(--darkMainColor)) 100%);
	}
	
	.ebene1 > a[id*="navbarDropdown"]::after { 
		font-size: 15px;
		left: 23px;
		top:-8px;
	}
	
	li.ebene1 > a[id*="navbarDropdown"]::after {
		font-size: 15px;
	}
	
	nav .navbar-nav {
		position: relative;
		top: 0;
		overflow-y: unset;
		display: flex;
		height: unset;
	}
	
	.nav-item.ebene1 {
		margin-right: 8px;
		width: auto;
		/*text-transform: uppercase;*/
		font-size: 92%;
		font-weight: bold;
		position:relative;
	}
	
	ul#navbarNav, 
	li.ebene1, 
	header li.nav-item,
	#kopfmenue li {
		border-bottom: none;
	}
	
	/*.nav-item.ebene1:first-child > a{
		margin: 0 8px;
	}*/
	
	li.ebene1 > a, #kopfmenue a {
		padding: 8px 0;
	}
	
	.ebene1:hover .dropdown-menu.ebene2{
		display: block;
		background: rgb(var(--mainColor));
		top: 44px;
		width: 350px;
		margin-left: -11px;
		border-radius: 0;
	}
	
	.ebene2 {
		border-bottom: 0;
	}
	
	.nav-item:hover > a,
	.submenu-content:hover,
	.nav-item:active,
	#kopfmenue a:active,
	.submenu-content:active	{
		color: rgb(var(--mainColor));
	}

	/* Layout 19 Navigation Integration */

	.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 {
		background: rgba(var(--mainColor), 0.85);
		display: block;
		top: 33px;
		width: max-content;
		min-width:200px;
		border-radius: 0;
		position: absolute;
		border: unset;
		margin-right: unset;
		left: 11px;
		padding:0;
	}

	#navbarNav .navbar-nav .ebene1 > .dropdown-menu {
		background: rgba(var(--mainColor), 0.85);
		top: 33px;
		width: max-content;
		min-width:200px;
		border-radius: 0;
		position: absolute;
		border: unset;
		margin-right: unset;
		left: 11px;
		padding:0;

		display: block;
		opacity:0;
		pointer-events: none;
		/*transition:opacity 1s;*/
	}

	#navbarNav .navbar-nav .ebene1:hover > .dropdown-menu {
		position: absolute;
		padding:0;
		border: unset;
		margin-right: unset;
		left: 11px;

		opacity:1;
		pointer-events: auto;
		transition: opacity 1s;
	}

	#navbarNav .ebene1 li {
    padding: 0;
	}

	.navbar-nav .nav-link.active,
	.navbar-nav .nav-link.show,
	.submenu-content,
	.nav-item.ebene2 a {
		color: rgb(var(--whiteColor));
	}

	#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;
	}
	
	.ebene2:hover > a[id*="navbarDropdown"]::after {
		content: "";
	}
	
	.fa-chevron-right::before {
	content: "";
	}

	#navbarNav .ebene1 ul {
		padding: unset;
	}

	#navbarNav .ebene1 > ul a {
		padding: 0.5rem 1.2rem 0.5rem 1.2rem;
	}
	
	body a:focus, /*mit body, damit bootstrap überschrieben wird*/
	body a:hover {
		color: rgb(var(--offBlackColor)) !important;
	}

	.nav-link:hover,
	.nav-link:focus {
		color: rgb(var(--whiteColor)) !important;
	} /*vllt eine andere Farbe. Auf Kontrast zu Buttonfarbe achten*/
	
	#kopfmenue_div {
		display: flex;
	}
	
	#kopfmenue a {
		border-left: 1px dotted rgb(var(--offBlackColor));
		margin-left: 8px;
		padding: 8px 0 8px 8px;
	}
	
	#kopfmenue li.erstes a {
		border-left: 0;
	}
	
	/*#kopfmenue .letztes {
		margin-right: 10px;
	}*/
	
	#untermenue_ab2,
	.inhalt_menu {
		display: block;
		margin: 2em 0 1em;
	}
	
/* 	.untermenu2 {
		padding-left: 1rem;
	}*/
	 
	.inhalt_menu {
		margin-left: 15px;
	}
	
	.inhalt_menu .frame-layout-0 .box .box {
		border: none;
	}
	
	#untermenue_ab2 li {
		margin-bottom: 10px;
	}
	
	.dropdown-menu.ebene2 {
		text-transform: capitalize;
		font-weight: 400;
		font-size: 80%;
	}

	.cookie-content {
		width: 90%;
	}
	
	.frame-layout-10.col-md-6 {
		width: 50%;
		display: flex;
	}
	
	footer {
		/*margin-bottom: 4em;*/
		position: relative;
		font-size: 12px;
		padding-top: 10px;
	}
	
	footer .row:last-child { /*für socialshareprivacy und cookie-icon-wrapper*/
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		bottom: -135px;
	}
	
/* 	span.hpk_adr_firma, 
	span.hpk_adr_strasse, 
	.hpk_adr_plzort, 
	.hpk_adr_tel, 
	.hpk_adr_fax, 
	.hpk_adr_mail, 
	.hpk_adr_land, 
	.hpk_adr_mobil {
		display: inline-block;
		margin-right: 15px;
	} stört auf der Kontaktunterseite*/
	
	/*footer li::after {
		content: "·"
	}*/
	
	#sociallinks {
		z-index: 1040;
	}
	
	#socialshareprivacy {
		text-align: start;
		position: relative;
		bottom: 5px;
		width: 20%;
	}
	
	#bewertungen_widget {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
	}
}

@media only screen and (min-width: 992px) {
	
	nav .navbar-nav {
		margin-bottom: 0.5rem !important;
	}

	.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%;
	}
	
	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%;
	}
		
	.carousel-caption h5,
	.carousel-caption p {
		display: inline-block;
		padding: 15px 15px 15px 20px;	
	}

	.carousel-caption h5 {
		margin-bottom: 0.5em;
		font-size: 140%;
	}

	.carousel-caption p {
		font-size: 100%;
	}
	
	.cookie-content {
		width: 75%;
	}
	
	header.startseite .inhalt_menu {
		display: block;
		position: absolute;
		top: 40px;
		width: 232px;
		right: 19px;
		padding-top:0;
	}
	
	header.startseite .inhalt_menu .box{
		background: white;
	}

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

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

	.hpk_pc-klein .vjs-default-skin {
		width: 300px!important;
	}
	
	/*--------------------------FOOTER ab992----------------------------*/
	
	footer {
		min-height: 0;
		position: relative;
		font-size: 12px;
		padding-top: 10px;
	}
	
	footer .row {
		text-shadow: none;
		width: 1240px;
		margin: 0 auto;
		padding: 6px 0;
	}
	
	footer .tx-hpkfe-pi-adresse {
		width: 28%;
	}
	
	footer .hpk_adr_firma {
		font-size: 125%;
		color:rgb(var(--blackColor));
	}
	
	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: 16%;
		padding:0;
	}
	
	ul.zentralfussmenu {
		display: block;
	}
	
	footer .row ul.zentralfussmenu.erstes {
		width: 12%;
	}

	#fussmenue {
		text-align: left;
		width: 10%;
		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;
	}
	
	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%;
	}

}

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

	#logo {
		padding: 15px 0;
	}
	
	#logo2 {
		top: 10px;
	}
	
	#suche {
		top: 25px;
	}
	
	#sidebar {
		padding-left: 0;
	}
	
	/*footer .tx-hpkfe-pi-adresse {
        flex: 1 1 74%;
    }*/
	
	/*#fussmenue {
		flex: 1 1 24%;
	}*/
}

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

@media only screen and (min-width: 1280px) {
	
	/*#inhalt {
		padding:0;
	}*/ /***** Kommentar: hebt gap auf, sodass der Inhalt am Rand klatscht *****/

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

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

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

/* 	#suche .boxsuche_input {
		background: rgb(var(--elementsBackGround));
	} */
			
	#suche .boxsuche_input {
		color: rgb(var(--blackColor));
	}
	
	#suche .boxsuche_submit {
		 background-image: url("img/typ3-weiss.png");
		}

	.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));
	}

	.navbar-nav .nav-link.active,
	.navbar-nav .nav-link.show {
		color:rgb(var(--mainColor));
	}

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

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

	.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);
  }

	.frame .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);
	}

	.frame-layout-0 > .box,
	.frame-default.frame-layout-16 .box,
	.frame-default.frame-layout-17 .box {
		background: transparent!important;
		box-shadow: none!important;
	}

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

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

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

	.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));
	}

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

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

	.cookie-wrapper, #lbOverlay {
		background: rgba( var(--whiteColor), 0.75 );
	}

	.kopf {
		box-shadow: 0px 0px 10px 4px rgba(var(--whiteColor),1.0);
		background:rgb(var(--offWhiteColor));
	}

	#umschlag {
		box-shadow: 0px -10px 10px 4px rgba(var(--whiteColor),1.0);
	}

	@media only screen and (min-width: 640px) {
		footer {
			background: linear-gradient(0deg, rgba(var(--offWhiteColor), 0) 0%, rgba(var(--offWhiteColor), 1) 100%);
		}

		#headercarousel::after,
		#slider::after {
	    background: linear-gradient(rgba(var(--whiteColor), 0.75), rgba(var(--whiteColor),0));
		}
	}

	@media only screen and (min-width: 768px) {
		.navbar {
			background-color: rgb(var(--whiteColor));
		}

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

	  .navbar-expand-md .navbar-collapse {
		  background: unset;
		}

		.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
      color: rgb(var(--blackColor));
    }

    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .submenu-content, .nav-item.ebene2 a {
        color: rgb(var(--blackColor));
    }

    .nav-link:hover, .nav-link:focus {
        color: rgb(var(--blackColor)) !important;
    }

    #suche .boxsuche_input {
      background: rgb(var(--elementsBackGround));
    }
	}

	@media only screen and (min-width: 768px) {
		header.startseite .inhalt_menu .box {
			background: rgb(var(--offWhiteColor))!important;
		}
	}
}