@charset "utf-8";  

/* 
CSS Document HPK
Layout 14 - Grundaufbau
*/

/* ============ *
 * 1. Variablen *
 * ============ */
 
 :root {
	/*text*/
	--sectionHeadingFont: Helvetica, Arial, sans-serif;
	--headingFont: Helvetica, Arial, sans-serif;
	--bodyFont: Helvetica, Arial, sans-serif;
	--smallText: 0.7em;
}
 
/* ============ * 
 * 2. Allgemein *
 * ============ */
 
* {
	scroll-behavior: smooth;
}

body, html {
	height: 100%;
	margin: 0;
}

body {
	background: white;
	font-family: var(--bodyFont);
	font-weight: 400;
	line-height: 1.5;
	color: black;
	overflow-x: hidden; /*TO-DO dafür muss es eine andere Lösung geben*/
}

object {
	height: auto;
	width: 100%;
}

h1, h2, h3, h4, h5 {
	font-family: var(--headingFont);
	font-weight: 500;
	line-height: 1.3;
}

h1 {
	font-size: 3rem;
}

h2,
[class$="_default"]:last-child .frame-layout-0 h3 {
	font-family: var(--sectionHeadingFont);
	font-size: 2rem;
}

h3 {
	font-size: 1.3rem;
}

h4, h5 {font-size: 1.2rem;}

a,
a:active {
	color: black;
	text-decoration: none;
}

header a,
header a:active {
	text-decoration: none;
}

p a,
p a:active,
form a,
form a:active,
.tx-hpkfe-pi-gmap ~ .row .hpk_adr_tel a,
.tx-hpkfe-pi-gmap ~ .row .hpk_adr_tel a:active,
.tx-hpkfe-pi-gmap ~ .row .hpk_adr_mail a,
.tx-hpkfe-pi-gmap ~ .row .hpk_adr_mail a:active,
form .open-cookies.open-div {
	color: white;
	text-decoration: none;
	background-color: var(--mainColor);
	padding: 0 5px;
	transition: 0.2s linear;
}

p a:hover,
form a:hover,
.tx-hpkfe-pi-gmap ~ .row .hpk_adr_tel a:hover,
.tx-hpkfe-pi-gmap ~ .row .hpk_adr_mail a:hover,
form .open-cookies.open-div:hover,
a:hover,
.nav-link:hover,
form a:hover {
	color: var(--darkBgColor);
	background-color: transparent;
}

a:hover::before:not(.cookie-link-list a:hover::before),
.nav-link:hover::before {
	width: 0%;
}

.bg-primary {
	background-color: var(--mainColor) !important;
}

.bg-secondary {
	background-color: var(--darkBgColor) !important;
}

/*rechteckige Buttons in Boxen, sonst nicht*/
.section-container .ce-bodytext a:not(form a, .gm-style a, .nav-item a, 
						.accordion_content a, address a),
.section-container .ce-bodytext a:active:not(form a),
#initmapnow,
.btn-primary, .powermail_submit,
.detailsansehen a, .detailsansehen a:active {
	display: block;
	color: white;
	text-decoration: none;
	background-color: var(--mainColor);
	border: 1px solid white;
	padding: 10px 15px;
}

/*Ghostbuttons bei hover in Boxen, sonst nicht*/
.section-container .ce-bodytext a:hover:not(form a, 
.gm-style a, 
.nav-item a, .accordion_content a),
.section-container .ce-bodytext .nav-link:hover:not(form a), #initmapnow:hover, .btn-primary:hover,
.detailsansehen a:hover, .powermail_submit:hover,
.cookie-button:hover {
	color: var(--mainColor);
	text-decoration: none;
	background-color: white;
	border: 1px solid var(--mainColor);
}

[class$="default"]:nth-child(odd) input[type="submit"],
[class$="default"]:nth-child(odd) input[type="submit"]:hover {
	border-width: 3px;
}

[class$="default"]:nth-child(even) input[type="submit"],
[class$="default"]:nth-child(even) input[type="submit"]:hover {
	border-width: 1px;
}

.btn-primary {
	margin: 1rem 0;
}

ul:not(.accordion_content ul, .cookie-info-details ul, .tx-hpkfe-pi-datenschutz ul, .news-single-item ul) {	
	list-style: none;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}

.section-container img:not(.accordion_element img),
video {
	width: 100%; 
	height: auto;
	margin-bottom: 1rem;
}

/* =========== *
 * 3. Struktur *
 * =========== */ 

/***
HEADER
***/

#slider {
	opacity: 0.20;
	position: absolute;
}

#slider img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

header .container {
	position: relative;
	max-width: 100vw;
	min-height: 100vh;
}

.row #logo2 {
	margin-top: 10px;
	text-align: right;
}

#logo2img {
	height: auto;
}

.row #logo2img {
	width: 30vw;
	max-width: 200px;
}

#logo {
	width: 90vw;
	max-width: 500px;	
	margin: 35vh auto 1%;	

}

/*Adresse Header*/

header .tx-hpkfe-pi-adresse {
	padding-top: 10%;
}

address{
	display: flex;
	flex-flow: column;
    text-align: center;
	font-size: 1.5rem;
}

header .hpk_adr_mobil,
header .hpk_adr_tel,
header .hpk_adr_fax,
header .hpk_adr_mail {
	font-size: 0;
}

header .hpk_adr_tel2 {
	font-size: 1.5rem;
}

/*icons vor der Nummer*/
header .hpk_adr_mobil a::before {
	content: "\f10b";
	padding-right: 8px;
	font-family: FontAwesome;
}

header .hpk_adr_tel a::before { 
	content: "\f095";
	padding-right: 8px;
	font-family: FontAwesome;
}

header .hpk_adr_fax a::before {
	content: "\f1ac";
	padding-right: 8px;
	font-family: FontAwesome;
}

header .hpk_adr_mail a::before {
	content: "\f1fa";
	padding-right: 8px;
	font-family: FontAwesome;
}

header .hpk_adr_tel{
	order: 1;
	position: relative;
	left: 300px;
	opacity: 0;
	-webkit-animation: showContact 2s ease-out forwards;
}

@keyframes showContact {
	0% {left: 300px; opacity: 0;}
	100% {left: 0; opacity: 1;}
}

header .hpk_adr_mail{
	order: 2;
}

/*diese Adressdaten sollen im header ausgeblendet sein -> Lösung über backend erwünscht*/
header address .hpk_adr_firma, 
header address .hpk_adr_strasse, 
header .hpk_adr_plzort, 
header .hpk_adr_land {
	display: none;
}

/*scroll-down-arrow by Wojtek Tymicki, https://codepen.io/panweb/pen/zYwyXx */
.arrow-down{
	height: 180px;
	position: absolute;
	left: 50%;
	-webkit-animation: arrow 1s 1s infinite ease-out alternate;
}

.arrow-down:hover{
   -webkit-animation-play-state: paused;
}

.left{
  position: absolute;
  height: 4px;
  width: 30px;
  background: black;
  -webkit-transform: rotate(240deg);
  top: 10px;
  left: -7px;
  -webkit-border-radius: 4px;
  -webkit-transform-origin: 5px 50%;
  -webkit-animation: leftArrow 0.5s infinite ease-out alternate;
}

.right{
  position: absolute;
  height: 4px;
  width: 30px;
  background: black;
  -webkit-transform: rotate(-60deg);
  top: 10px;
  left: -3px;
  -webkit-border-radius: 4px;
  -webkit-transform-origin: 5px 50%;
  -webkit-animation: rightArrow 0.5s infinite ease-out alternate;
}

@-webkit-keyframes arrow{
  0% {
    bottom:0px;
  }
  100%{
    bottom:30px;
  }
}

@-webkit-keyframes leftArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(225deg);
  }
}

@-webkit-keyframes rightArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(-45deg);
  }
}

#nav-container { 
	position: absolute;
	min-width: 100vw;
	bottom: 2vh;
	margin: auto;
	transform: translateX(-50%);
	left: 50%;
}

nav{
	font-size: var(--bs-body-font-size);
	margin: auto;
}

.navbar-nav {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.fixedPosition {
	padding: 0 !important;
	position: fixed !important; 
	top: 0;
	z-index: 1;
}

.nav-item:not(:first-child)::before {
	content: "/";
	padding: 0 7px;
}

.nav-link {
	display: inline-flex!Important;
	color: black;
}

.nav-link:focus {
	color: var(--darkBgColor);
	text-decoration: none;
}

/***
CONTENT
***/

.section-container section,
.section-container .container{
	max-width: 100vw;
	padding: 0;
}

.section-container .row .frame-type-header.frame-layout-0 .bg-primary,
.section-container .row .frame-type-header.frame-layout-0 .bg-secondary {
	align-items: center;
	display: flex;
	height: 30vh;
	justify-content: center;
}

.section-container section .frame-type-shortcut.frame-layout-0, /*weiß hinter News-Slider*/
.section-container section.section_drei_default .frame-layout-0 .box .frame-layout-0 {
    background-color: white;
}

.section-container section.section_weiss .frame-layout-0 {
    background-color: white;
}
.section-container section.section_hellgrau .frame-layout-0 {
    background-color: var(--lightBgColor);
}
.section-container section.section_dunkelgrau .frame-layout-0 {
    background-color: var(--darkBgColor); 
}
.section-container section.section_rot .frame-layout-0 {
      background-color: var(--redBgColor);
}
.section-container section.section_orange .frame-layout-0 {
      background-color: var(--orangeBgColor);
}
.section-container section.section_gruen .frame-layout-0 {
      background-color: var(--greenBgColor);
}
.section-container section.section_blau .frame-layout-0 {
      background-color: var(--blueBgColor);
}

/*Hinweiskasten rot
start*/
.bg-danger {
	color: white;
	background-color: var(--dangerColor) !important;
	padding: 2% 4% !important;
	z-index: 1;
	position: relative;
}

.bg-danger h3 {
	font-size: 1.7rem;
	text-align: center;
}

.bg-danger p {
	margin-bottom: 0;
}

section .bg-primary h2,
section .bg-secondary h2,
[class$="_default"]:last-child .frame-layout-0 .bg-primary h3,
[class$="_default"]:last-child .frame-layout-0 .bg-secondary h3 {
	color: white;
	margin: 0;
	text-transform: uppercase;
	text-align: center;
}

/*ende
Hinweiskasten rot*/
	
.ce-bodytext,
.bodytextcontent,
.news_latest_text,
.frame-layout-0 header:not(.bg-danger header),
.tx-hpkfe-pi-kontakt,
.map_hinweis_holder {
	padding: 4% 8%;
}
	
.frame-layout-41 header,
.frame-layout-48 header {
	padding: 4% 8% 0;
}
	
.box.p-2:not(.box.bg-danger.p-2) {
	padding: 0!important;
}

/* .frame-layout-48 {
	padding-top: 1rem;
} */

/*Newsslider
start*/

#newscarousel {
	margin: 1rem 0;
}

.card {
	border: none;
}

.card-body {
	padding: 0;
}

/* .carousel-item {
	width: 100%;
} ist über bootrap gesetzt*/

.carousel-item .col-md-6.col-lg-4:not(:first-child) {
	display: none;
}

.carousel-item .col-md-6.col-lg-4 {
	width: 100%;
}

.carousel-item .card .news_latest_image a, 
.carousel-item .card .news_latest_title a {
	background-color: white;
	color: black;
	padding: 0;
}

.carousel-item .card .news_latest_image a:hover, 
.carousel-item .card .news_latest_title a:hover {
	background-color: white;
	color: black;
	border: none;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
	display: flex;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
	background-image: none;	 
	width: 3rem;
	height: 3rem;
	border-radius: 2rem;
}
	
.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
	font-family: FontAwesome;
	font-size: 3rem;
	color: var(--mainColor);
}

.carousel-control-prev-icon::before {
	content: "\f137";
}

.carousel-control-next-icon::before {
	content: "\f138";
}	

/*pfeile und indikatoren positionieren*/
#newscarousel button {
	opacity: 1;
	top: -16%;
}

/*Newsslider
ende*/

/*News Einzelansicht
start*/
.news-single-item,
.tx-hpkfe-pi-datenschutz,
.tx-hpkfe-pe-impressum,
.wrap-not-found > .container {
	margin: 5% 2% 5px;
}

body .wrap-not-found > .container header {
	padding: 4% 0;
}

.news-single-item h1 {
	font-size: 2rem;
	padding-top: 1rem;
}

.news-single-item hr.cl-right {
	margin: 1rem 0;
}

.news-single-img {
	width: 100%;
}
	
section .news-single-item ul:not(.news-single-backlink ul) { /*für Listen in den News*/
	flex-direction: column; 
	text-align: left;
}

.news-single-img .news-single-imgcaption {
	font-size: 0.8rem;
	margin-top: -10px;
	margin-bottom: 10px;
}

.news-single-backlink {
	padding: 10px 0;
}

.shariff .shariff-button.xing {
	margin-right: 3%;
}

/*ende
News Einzelansicht*/

/*Akkordeon
start*/
.accordion_element {
	padding: 0 8%;
}

.accordion_element:first-child,
.tx-hpkfe-pi-kontakt {
	margin-top: 1rem;
}

.accordion_element:last-child {
	margin-bottom: 4rem;
}

.accordion_header {
	padding: 24px 15px;
	border-top: 1px solid var(--mainColor);
}

.accordion_element:last-child .accordion_content {
	border-bottom: 1px solid var(--mainColor);
}

.csc-textpic-intext-right .accordion_content .csc-textpic-imagewrap {
	position: absolute;
}

.csc-textpic-intext-right .csc-textpic-imagewrap,
.csc-textpic-right .csc-textpic-imagewrap {
	right: 0;
}

.csc-textpic-intext-left .csc-textpic-imagewrap,
.csc-textpic-left .csc-textpic-imagewrap {
	left: 0;
}

i.fa {
	margin.right: 15px;
}

.fa.fa-plus, .fa.fa-minus {
	height: 25px;
	width: 25px;
	color: white;
	background-color: var(--mainColor);
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	padding-top: 4px;
	position: relative;
	margin-right: 0.5rem;

	z-index: -1;
}

.fa-minus::before { /*überschreibt das fa-plus*/
	content: "\f068";
}

span.fa-minus::before {
	display: none;
}

.accordion_content {
	position: relative;
	height: auto;
	padding-right: 5px;
	padding-left: 15px;
	max-height: 100%;
	min-height: 200px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion_content.tx-indexedsearch-rules {
	max-height: 0;
	min-height: 0;
}

/*.accordion_header_content::before {
	content: "\00a0 ";
}*/

.csc-textpic-imagewrap ~ p:nth-child(1),
.csc-textpic-imagewrap ~ p:nth-child(2),
.csc-textpic-imagewrap ~ p:nth-child(3),
.csc-textpic-imagewrap ~ p:nth-child(4) {
	width: 50%;
}

.accordion_content img {
	max-width: 270px;
	height: auto;
}

.accordion_content ul,
.hpk_datenschutz ul,
.ce-bodytext ul {
	display: block;
	list-style-type: circle;
	padding-left: 20px;
}
/*ende
Akkordeon*/


	
figcaption {
	padding: 0 3% 3%;
}

/*Kontakt
start*/
.form-check-input:checked {
	background-color: var(--darkBgColor);
	border-color: var(--mainColor);
}

.btn, .form-control,
.form-check-input[type="checkbox"] {
	border-radius: 0;
}

.form-check-input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	margin-bottom: 25px;
}

.tx-powermail {
	margin-top: 3rem;
	padding: 4% 8%;
	position: relative;
	z-index: 1;
}

.tx-powermail h1 {
	font-size: 1.5rem;
}

.tx-powermail h3,
.tx-powermail legend {
	display: none;
}

.tx-powermail .btn-primary {
	border-color: var(--white);
}

.tx-powermail .btn-danger {
	background: none;
	border: 3px solid var(--white);
    margin: 1rem 1rem 1rem 0;
    padding: 10px 15px;
}

.powermail_label {
	display: none;
    color: rgba(var(--bs-body-color-rgb),0.65);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    position: absolute;
    top: 29px;
    left: 0;
    z-index: 2;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width) solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out,transform 0.1s ease-in-out;
}

.powermail_fieldwrap,
.powermail_textarea  {
	padding-top: 1.625rem;
    padding-bottom: 0.625rem;
	position: relative;
}

.powermail_input,
.powermail_textarea  {
	display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}

.powermail_submit {
	width: 100%;
}

input.powermail_field_error,
textarea.powermail_field_error {
    border: 3px solid var(--bs-red);
}

.powermail-errors-list li {
    color: var(--bs-red);
    list-style-type: none;
}

.powermail_confirmation,
.powermail_create {
	padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/*ende
Kontakt*/

#initmapnow {
	width: 100%;
}

form .mb-1:last-child .p:last-child {
	margin-bottom: 0;
}

#hpk_map_canvas {
	height: 50vh;
}

/*Karte
start*/

/*Layout für Adressdaten im footer*/
.tx-hpkfe-pi-gmap ~ .row address {
	font-size: 1rem;
}

.tx-hpkfe-pi-gmap ~ .row .hpk_adr_tel {
	margin-top: 3%;
}

.tx-hpkfe-pi-gmap ~ .row .csc-content { /*Zentrierung des Freitextes unter Karte*/
	text-align: center;
}
/*ende
Karte*/

/***
FOOTER
***/

footer {
	text-align: center;
	background-color: var(--lightBgColor);
	position: relative;
	height: 105px;
}

footer .col-sm-7 {
	width: 100%;
}

footer #logo2img {
	max-width: 120px;
	margin-bottom: 0.5rem;
}

.form-check {
	margin-top: 1rem;
}

.form-check-label{
	display: inline;
}

#flexCheckDefault{
	width: 30px;
	height: 30px;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

/* ================ * 
 * 4. Media-Queries *
 * ================ */
 
@media all and (min-width: 360px) {
	
	.shariff .shariff-button.xing {
		margin-right: auto;
	}
}

@media all and (min-width: 378px) {
	
	.shariff .shariff-button.xing {
		margin-right: 1.8%;
	}
}
 
@media all and (min-width: 636px) {
	 	
	.carousel-item .col-md-6.col-lg-4 {
		width: 48vw;
	}
	
	.carousel-item .col-md-6.col-lg-4:first-child {
		margin-right: 2%;
	}
	
	.carousel-item .col-md-6.col-lg-4:nth-child(2) {
		display: inline;
		margin-left: 2%;
	}
}

 @media all and (min-width: 768px) {
	
	.col-md {
		flex: 0 0 33.3%;
	}
	
	#background-video {
		display: inline;
		height: 100vh;
		object-fit: cover;
	}
	 	
	.carousel-item .col-md-6.col-lg-4 {
		width: 30.7vw;
	}
	
	.carousel-item .col-md-6.col-lg-4:first-child {
		margin-right: 3%;
		margin-left: 1%;
	}
	
	.carousel-item .col-md-6.col-lg-4:nth-child(2) {
		margin-left: 0;
	}
	
	.carousel-item .col-md-6.col-lg-4:nth-child(3) {
		display: inline;
		margin-left: 3%;
	}
	
	.news-single-item {
		width: 90%;
		margin: 5% auto 5px;
	}
	
	#newscarousel button {
		top: -46%;
	}
	
	.tx-hpkfe-pi-gmap ~ .row .col-md-6:last-child {
		padding-right: 30px;
	}
	
	.tx-hpkfe-pi-gmap ~ .row .col-md-6:first-child {
		padding-left: 30px;
	}
	
	footer #logo2 {
		position: absolute;
		top: 10px;
		left: 10px;
	}
}

@media all and (max-width: 991px) {
	
	#newscarousel button {
		height: 70px;
		top: 15%;
	}
	
	.carousel-control-next-icon, 
	.carousel-control-prev-icon {
		width: 100%;
	}
	
	.carousel-control-next-icon {
		text-align: right;
	}		
	
	.carousel-control-prev-icon {
		text-align: left;
	}
	
	.carousel-control-next-icon:before,
	.carousel-control-prev-icon:before {
		color: var(--mainColor);
		background-color: white;
		padding: 0.5rem;
		/*border: 1px solid var(--mainColor);*/
		width: 200px;
	}
	
	.carousel-control-prev-icon:before {
		border-radius: 0 2rem 2rem 0;
	}
	
	.carousel-control-next-icon:before {
		border-radius: 2rem 0 0 2rem;
	}
}

@media all and (min-width: 992px) {
	
	h2 {
		font-size: 3rem;
	}
	
	.news-single-item h2 {
		font-size: 1.5rem;
	}

	ul {
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.container {
		position: relative;
		max-width: 100vw;
		min-height: 100vh;
	}

	.row #logo2img {
		max-width: 164px;
	}
	
	header .tx-hpkfe-pi-adresse {
		padding-top: 5%;
	}

	address {
		min-height: 70px;
		font-size: 1.875rem;
	}

	nav {
		font-size: 1.2rem;
	}

	.nav-link {
		display: inline-flex!Important;
		color: black;
	}

	/*CONTENT*/

	.section-container section,
	.section-container .container{
		padding: 0;
	}

	.section-container .row .frame-type-header.frame-layout-0 .bg-primary,
	.section-container .row .frame-type-header.frame-layout-0 .bg-secondary {
		width: 50%;
		height: 100%;
		min-height: 100vh;
		position: absolute;
	}
	
	.frame-type-header.frame-layout-0 {
		max-width: 100% !important;
		padding: 0 /* !important */;
		left: 0;
	}

	.section-container section:nth-child(even) .frame-layout-0 .bg-secondary {
		right: 0;
	}
	.section-container section:nth-child(odd) .frame-layout-0 .bg-primary {
		left: 0;
	}
	
	section .bg-primary h2,
	section .bg-secondary h2 {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.section-container section:nth-child(even) .bg-secondary h2 {
		left: 50%;
	}
	
	.ce-bodytext p {
		padding-top: 2%;
	}	
	
	.frame-layout-48:not(.frame-layout-48:first-child) {
		width: 50%;
		flex: 0 auto;
	}
	
	[class$="default"]:nth-child(odd) .frame-type-shortcut.frame-layout-0,	
	[class$="default"]:nth-child(even) .frame-type-shortcut.frame-layout-0 {
		width: 50%;
	}	
	
	[class$="default"]:nth-child(odd) .frame-layout-41,
	[class$="default"]:nth-child(odd) .frame-layout-48,
	[class$="default"]:nth-child(odd) .frame-type-shortcut.frame-layout-0	{
		margin-left: 50%;
		height: 100%;
		padding: 0 6px 0 0;
	}
	
	[class$="default"]:first-child .frame-type-shortcut.frame-layout-0	{
		margin-left: 50%; /*damit die News mittig sind im ersten Abschnitt*/
	}
	
	[class$="default"]:nth-child(even) .frame-layout-41,
	[class$="default"]:nth-child(even) .frame-layout-48,
	[class$="default"]:nth-child(even) .frame-type-shortcut.frame-layout-0	{
		margin-right: 50%;
		height: 100%;
		padding: 0 0 0 10px;
	}
	
	[id*="abschnitt"]:nth-last-child(2):nth-child(even) .frame-layout-41:nth-last-child(2),
	[id*="abschnitt"]:last-child:nth-child(even) .frame-layout-41:nth-last-child(2) /*Kontaktformular*/ {
		margin-left: 50%;
	}	 	

	[id*="abschnitt"]:last-child:nth-child(2n+1) .frame-layout-41:nth-last-child(2) {
		margin-left: 0; /*sorgt dafür, dass das Kontaktformular über der farbigen Kachel ist*/
	}
	
	/* [id*="abschnitt"]:nth-last-child(2):nth-child(even) .frame-layout-41:last-child, */
	[id*="abschnitt"]:last-child:nth-child(even) .frame-layout-41:last-child{ /*Positionierung der Karte, wenn Kontaktformular rechts*/
		position: absolute;
		left: 0;
	}
	
	[id*="abschnitt"]:last-child:nth-child(2n+1) .frame-layout-41:last-child { /*Positionierung der Karte, wenn Kontaktformular links*/
		position: absolute;
		right: 0;
	}
	
	[class$="_default"]:last-child .frame-layout-0 h3{
		margin-left: -10px;
	}
	
	#newscarousel .carousel-item .col-md-6.col-lg-4 {
		width: auto;
		margin: 1rem 0 0;
	}
	
	#newscarousel .carousel-item .col-md-6.col-lg-4:first-child {
		margin-top: 5rem;
	}
	
	#newscarousel button {
		width: 50px;
		height: 0;
		top: 0;
/* 		transition: 0.2s linear; */
		left: 45%;
		margin: 0;
		background-color: transparent;
	}

	.carousel-inner .carousel-item.active,
	.carousel-inner .carousel-item-next,
	.carousel-inner .carousel-item-prev {
		flex-direction: column;
	}
	
	.carousel-item.carousel-item-next.carousel-item-start,
	.carousel-item.carousel-item-prev.carousel-item-end{
		display: none;
	}
	
	#newscarousel .carousel-control-prev,
	#newscarousel .carousel-control-next {
		display: inline;
	}
	
	#newscarousel .carousel-control-prev {
		transform: translateY(-5%);
	}
	
	#newscarousel .carousel-control-next {
		position: relative;
		transform: translateY(-7px);
	}
	
	.news-single-item,
	.tx-hpkfe-pi-datenschutz,
	.tx-hpkfe-pi-impressum,
	.wrap-not-found	> .container {
		margin: 4% auto 5px;
		width: 90%;
		max-width: 920px;
	}
	
	.carousel-item {
		float: none;
		margin-right: 0;
	}
	
	#newscarousel .carousel-item-next:not(.carousel-item-start),
	#newscarousel .active.carousel-item-end {
		transform: translateY(-100%);
	}
	
	#newscarousel .carousel-item-prev:not(.carousel-item-end),
	#newscarousel .active.carousel-item-start {
		transform: translateY(100%);
	}
	
	.carousel-control-prev-icon::before {
		content: "\f139";
	}
	
	.carousel-control-next-icon::before {
		content: "\f13a";
	}
	
	.section-container [class$="_default"]:last-child .frame-layout-0 .bg-primary,
	.section-container [class$="_default"]:last-child .frame-layout-0 .bg-secondary	{
		align-items: start;
		justify-content: start;
	}
	
	.tx-hpkfe-pi-kontakt  {
		margin-top: 3em;
	}
	
	.tx-hpkfe-pi-kontakt [name="tx_hpkfe_pi_kontakt[maintext]"] {
		height: 250px;
	}
	
	.form-check,
	.tx-hpkfe-pi-kontakt form .mb-1	{
		position: relative;
		z-index: 1;
	}

	.tx-hpkfe-pi-gmap ~ .row .col-md-6 {
		width: 49%;
	}
	
	.map_hinweis_holder {
		padding: 1.7rem 8%;
	}
	
	.datenschutztext a,
	.tx-hpkfe-pi-kontakt .mb-1 a, 
	.datenschutztext a:active,
	.tx-hpkfe-pi-kontakt .mb-1 a:active {
		color: white;
		background-color: var(--darkBgColor);
	}

	.datenschutztext a:hover,
	.tx-hpkfe-pi-kontakt .mb-1 a:hover {
		color: white;
		background-color: transparent;
	}
	
	.alert {
		border-radius: 0;
	}
	
	.tx-powermail {
		color: var(--white);
	}
	
	.tx-powermail a {
		background: var(--white);
		color: var(--black-ish);
	}
	
	footer{
		height: auto;
	}
}

@media all and (min-width: 1300px) {
	
	#logo {
		margin-top: 45vh;
	}
}

@media only screen and (max-height: 500px) {
	
	#nav-container {
		bottom: 0;
	}
}

@media only screen and (max-height: 700px) {
	
	address,
	header .hpk_adr_tel2 {
		font-size: 1rem;
	}
	
	.row #logo2 {
		margin-top: 1.5%;
	}
	
	.row #logo2img {
		width: 20vw;		
	}
	
	#logo {
		width: 70vw;
		margin-top: 20vh
	}
	
	header .tx-hpkfe-pi-adresse {
		padding-top: 5%;
	}
}
 
  /********************************************/
 /***** Socialmedia Links und Grafiken *******/
/********************************************/

#sociallinks {
  position: fixed;
  right: 0;
  top: 140px;
  z-index:1000;
}

#sociallinks a {
  display: block;
  width: 35px;
  height: 34px;
  margin-bottom: 10px;
}

#sociallinks .facebook a {
  background:url("img/socialmediabuttons.png") top left no-repeat;
}

#sociallinks .facebook a:hover {
  background:url("img/socialmediabuttons_hover.png") top left no-repeat;
}

#sociallinks .telefon a {
  background:url("colorimg/socialmediabuttons.png") top no-repeat;
  background-position: -321px;
}

#sociallinks .telefon a:hover {
  background:url("colorimg/socialmediabuttons_hover.png") top no-repeat;
  background-position: -321px;
}

#sociallinks .twitter a {
  background:url("img/socialmediabuttons.png") no-repeat;
  background-position: -40px;
}

#sociallinks .twitter a:hover {
  background:url("img/socialmediabuttons_hover.png") no-repeat;
  background-position: -40px;
}

#sociallinks .tiktok a {
  background:url("img/socialmediabuttons.png") top right no-repeat;
  background-position: -80px;
}

#sociallinks .tiktok a:hover {
  background:url("img/socialmediabuttons_hover.png") top right no-repeat;
  background-position: -80px;
}

#sociallinks .youtube a {
  background:url("img/socialmediabuttons.png") top no-repeat;
  background-position: -120px;
}

#sociallinks .youtube a:hover {
  background:url("img/socialmediabuttons_hover.png") top no-repeat;
  background-position: -120px;
}

#sociallinks .whatsapp a {
  background:url("img/socialmediabuttons.png") top right no-repeat;
  background-position: -160px;
}

#sociallinks .whatsapp a:hover {
  background:url("img/socialmediabuttons_hover.png") top right no-repeat;
  background-position: -160px;
}

#sociallinks .xing a {
  background:url("img/socialmediabuttons.png") top no-repeat;
  background-position: -200px;
}

#sociallinks .xing a:hover {
  background:url("img/socialmediabuttons_hover.png") top no-repeat;
  background-position: -200px;
}
#sociallinks .instagram a {
  background:url("img/socialmediabuttons.png") top right no-repeat;
  background-position: -240px;
}

#sociallinks .instagram a:hover {
  background:url("img/socialmediabuttons_hover.png") top right no-repeat;
  background-position: -240px;
}

#sociallinks .linkedin a {
  background:url("img/socialmediabuttons.png") top right no-repeat;
  background-position: -280px;
}

#sociallinks .linkedin a:hover {
  background:url("img/socialmediabuttons_hover.png") top right no-repeat;
  background-position: -280px;
}

#sociallinks .clicktocall a {
  background:url("img/socialmediabuttons.png") top right no-repeat;
  background-position: -320px;
}

#sociallinks .clicktocall a:hover {
  background:url("img/socialmediabuttons_hover.png") top right no-repeat;
  background-position: -320px;
}

#socialshareprivacy {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}

#socialshareprivacy .social_share_privacy_area {
	display: flex;
}

@media only screen and (max-width: 640px) {
	
  #socialshareprivacy {
    margin-top: 0;
  }

  #socialshareprivacy .social_share_privacy_area li {    
    float: none;
	height: 25px;
  }
}

@media (max-height: 440px){
	
	#sociallinks {
		top: 80px;
	}
}

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

	#socialshareprivacy {
		top: -12px;
		left: 20px;
		transform: none;
	}
}

  /********************************************/
 /*** Shared styles for lightbox & slimbox ***/
/********************************************/

#prevLink, #nextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 35%;
	height: 100%;
	background: transparent url(images/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
}

#prevLink {
	left: 0;
	float: left;
}

#nextLink {
	right: 0;
	float: right;
}

#prevLink:hover {
	/* Edit here for a different image!*/
	background: transparent url(images/lightbox/prev.gif) no-repeat 0% 15%;
}

#nextLink:hover {
	/* Edit here for a different image!*/
	background: transparent url(images/lightbox/next.gif) no-repeat 100% 15%;
}

#playLink,#pauseLink,#saveLink,#closeLink {
	display: block;
	float: right;
	/* Set these two to the actual dimensions of your images! If they differ in size you have to set them seperately!*/
	width: 26px;
	height: 26px;
	/* End*/
	margin-left: 1.0em;
}

#playLink {
	/* Edit here for a different image! Add width & height here if needed*/
	background:transparent url(images/lightbox/play.gif) no-repeat center;
}

#pauseLink {
	/* Edit here for a different image! Add width & height here if needed*/
	background:transparent url(images/lightbox/pause.gif) no-repeat center;
}

#saveLink {
	/* Edit here for a different image! Add width & height here if needed*/
	background:transparent url(images/lightbox/save.gif) no-repeat center;
}

#closeLink {
	/* Edit here for a different image! Add width & height here if needed*/
	background:transparent url(images/lightbox/close.gif) no-repeat center;
	/*clear:right;
	float:right;*/
}

/* Slimbox-only*/

body #lbBottomContainer {
	z-index: 99;
}

#lbBottom, #lbBottomContainer {
	background: white;
	/*border-top: 1px solid white;*/
}

#lbOverlay {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:#000;
	cursor:pointer;
	z-index:90;
}

#lbCenter, #lbBottomContainer {
	position:absolute;
	left:50%;
	overflow:hidden;
	background-color:white;
	z-index:100;
}

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

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

#lbImage {
	position:absolute;
	left:0;
	top:0;
	border:10px solid white;
	background-repeat:no-repeat;
}

#lbBottom {
	font-family:tahoma, arial, sans-serif;
	font-size: var(--smallText);
	color:#666;
	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:#777;
	border-right:0.3em solid white;
	border-bottom:0.1em solid white;
	border-left:0.4em solid white;
	margin-right:0.2em;
}

#lbPresent a.act {
	color:white;
	background:#777;
	border-color:#777;
}

  /********************************************/
 /*************** Cookie Banner **************/
/********************************************/

footer .cookie-icon-wrapper {
	height: 0;
}

.cookie-wrapper {
	background: rgba( 0, 0, 0, 0.5 );
    box-shadow: 0 0 5px #aeaeae;
	box-sizing: border-box;
	height: 100%;
	left: 0;
	overflow-y: auto;
	padding: 1.25em 1.5em;
	position: fixed;
	text-align: left;
	top: 0;
	-webkit-backface-visibility: hidden;
	width: 100%;
	z-index: 1001;
}

.cookie-content {
	background: white;
    box-shadow: 0 0 5px #acacac;
	box-sizing: border-box;
	min-height: 20%;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

.cookie-details-wrapper {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	-webkit-overflow-scrolling:touch;
}

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

.cookie-button {
	border: 0;
	box-sizing: border-box;
	display: flex;
	margin: 1em 0;
	height: 50px;
	text-decoration: none;
}

.cookie-button-some {
	height: 50px;
}

#cookieButtonSome:target + .cookie-details {
	display: block;
}

.cookie-details h3 {
	margin: 1rem 0;
	padding: 1.5rem 0 0 1.5rem;
}

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

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

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

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

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

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

.cookie-innercontent h2,
#cookie-list h2 {
	margin-top: 2.5rem;
	font-size: 1.8rem;
	padding-left: 1.5rem;
}

.cookie-innercontent h2::before,
#cookie-list h2:before {
	display: none;
}

/*cookie-icon after headline*/
.cookie-innercontent h2::after,
.cookie-info-details ul h2:after {
	content: "\20 \f564";
	font-family: FontAwesome;
}

.cookie-icon-wrapper .open-cookies.open-div{
	font-size: 0;
}

form .open-cookies.open-div {
	margin-left: 1.5rem;
}

header .cookie-icon-wrapper .open-cookies.open-div::before {
	content: "\f564";
	padding: 5px 0 0 8px;
	font-family: FontAwesome;
	font-size: 2rem;
	position: absolute;
}

footer .cookie-icon-wrapper .open-cookies.open-div::before {
	content: "\f564";
	font-family: FontAwesome;
	font-size: 1.3rem;
	position: absolute;
	top: 6px;
	right: 20px;
}

.cookietext {
    text-align: left;
    width: 100%;
}

.homepage-form input {
	box-shadow: none;
}

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

ul ul .cookie-element {
	padding: 0 1em 0 0;
}

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

.cookie-info-wrapper {
	margin: 1em 0;
}

.cookie-info-content {
	display:none;
}

.checkbox-description-text {
	box-sizing: border-box;
	display: block;
	margin: 0.5em 0 0;
	width:100%;
}

.cookie-settings-wrapper {
	display: none;
	margin: 0 0 1.5em;
	position: relative;
}

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

.cookie-button {
	flex: 0 0 100%;
	max-width: 70%;
}

.dismiss-cookies.cookie-button {
	order: 3;
}

.dismiss-cookies.cookie-button:hover {
	color: var(--mainColor);
	border: 1px solid var(--mainColor);
}

.save-cookies.cookie-button {
	border: 1px solid var(--mainColor);
	order: 1;
}

.cookie-button {
	background: var(--mainColor);
    color: white;
	font-weight: bold;
	/* height: 50px; */
	justify-content: center;
}

.cookie-list .dismiss-cookies.cookie-button {
	margin: 2rem auto;
	min-width: 70%;
	min-height: 50px;
	justify-content: center;
	height: 50px;
	text-decoration: none;
	align-items: center;
}

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

.cookie-list-link::before {
    content: "i";
	display: block;
    font-size: 1.5em;
    font-weight: 700;
	text-align: center;
	margin-top: -4px;
}

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

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

.cookie-list {
	box-sizing: border-box;
	display: none;
	flex-flow: column nowrap;
	list-style:none;
	padding: 0;
	width: 100%;
} 

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

.cookie-list li:nth-child(2) {
	margin-top: 1.5rem;
}

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

.cookie-list li li:nth-child(odd),
.cookie-list li li:nth-child(even) {
	background: transparent;
	margin: 0;
	padding: 0.5em 0.25em 0.25em 0;
}

.cookie-list a {
	text-decoration: none;
}

#cookie-list-button {
	padding: 11px;
	margin: auto;
	margin-top: 1em;
	margin-bottom: 1em;
}

p.cookie-text{
	padding: 1rem 1.5rem;
}

@media only screen and (max-width: 639px) {
	
	.save-cookies {
		order: 1;
	}
	
	.dismiss-cookies {
		order: 2;
	}
}

@media only screen and (max-width: 719px) {
	.cookie-text,
	.cookietext,
	.open-cookies,
	.checkbox-description-text {
		font-size: 0.875rem;
	}
}

@media only screen and (min-width: 576px) {
	.arrow-down{
	  height: 140px;
	}
}

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

@media only screen and (min-width: 950px) {
	.cookie-content {
		width: 70%;
	}
	
	.dismiss-cookies {
		order: 2;
	}
	
	.form-buttons {
		justify-content: space-between;
		margin: 1rem 1.5rem;
	}
	
	.cookie-button {
		flex: 0 0 32.5%;
		margin: 1em 0;
		max-width: 32.5%;
	}
}

@media only screen and (min-width: 1150px) {
	.cookie-element {
		display: inline-block;
		padding-right: 1em;
		text-align: right;
		vertical-align: top;
		width: 23%;
	}
	
	.cookie-note {
		display: inline-block;
		width: 77%;
	}
}

@media only screen and (min-width: 1300px) {		
	.save-cookies-settings.cookie-button {
		order: 3;
	}
}

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

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

  /**************************************************/
 /**************** Switch Schalter *****************/
/**************************************************/

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

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

.switch-background {
	background: #ccc;
	border-radius: 10px;
	box-shadow: 1px 1px 1px #aaa inset;
	height: 15px;
	position: relative;
	width: 30px;
}

.switch-button {
	background: white;
	border-radius: 15px;
	box-shadow: 1px 1px 1px #aaa;
	height: 20px;
	left: -5px;
	position: absolute;
	top: -3px;
	width: 20px;
}

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

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