@charset "utf-8";  

/* 
CSS Document HPK
Layout 13 - Grundaufbau
*/

/* ============ *
 * 1. Variablen *
 * ============ */
 
:root {
	/*text*/
	--sectionHeadingFont: Helvetica, Arial, sans-serif;
	--headingFont: Helvetica, Arial, sans-serif;
	--bodyFont: Helvetica, Arial, sans-serif;
	--smallText: 13px;
	--mobilText: 14px;
	--regularText: 16px;
}

/* ============ * 
 * 2. Allgemein *
 * ============ */

* {
	scroll-behavior: smooth;
}

body {
	background: white;
	font-family: var(--bodyFont);
	font-weight: 400;
	font-size: var(--regularText);
	line-height: 1.75;
	color: black;
	overflow-x: hidden;
}

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

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

h1 {
	margin-top: 0;
	font-size: 3.052rem;
}

h2,
.news-single-item h1 {
	font-family: var(--sectionHeadingFont);
	font-weight: 500;
	font-size: 1.5rem;
	text-transform: uppercase;
	display: inline-block;
	position: relative;
}

h2::before,
.news-single-item h1::before {
	border-bottom: 3px solid black;
	bottom: 0;
    content: "";
    height: 1px;
    left: 50%;
	position: absolute;
	transform: translateX(-50%);
    width: 25%;
	margin-bottom: -15px;
}

h3,
section .frame-layout-0 ~ [class|="col"] div header,
.frame-layout-0 ~ [class|="col"] div header h2 {
	font-size: 1.3rem;
	text-align: left;
	text-transform: none;
}

.frame-layout-0 ~ [class|="col"] div header h2:before {
	border-bottom: none;
}

h4 {font-size: 1.2rem;}

h5 {font-size: 1.2rem;}

a {
	color: black	
}

a:hover,
a:active,
.dismiss-cookies.cookie-button:active,
.dismiss-cookies.cookie-button:hover,
.save-cookies.cookie-button:hover,
.save-cookies.cookie-button:active {
	color: var(--mainColor);
	text-decoration: none;
}

.dismiss-cookies.cookie-button:active,
.save-cookies.cookie-button:active {
	border: 2px dotted #d2d2d2;
}

.sticky-wrapper .hpk_adr_tel2 a:not(header .hpk_adr_tel2 a),
.sticky-wrapper .hpk_adr_mail a{
	color: white;
}

.sticky-wrapper .hpk_adr_tel2 a:hover,
.sticky-wrapper .hpk_adr_tel2 a:active,
.sticky-wrapper .hpk_adr_mail a:active,
.sticky-wrapper .hpk_adr_mail a:active {
	color: black;
}

header .hpk_adr_tel2 a:hover,
header .hpk_adr_tel2 a:active,
header .hpk_adr_tel2 a:active {
	color: var(--mainColor);
}

.link-typ1{
	display: none;
}

small, 
.text-small {
	font-size: var(--smallText);
}

.nav-link {
	color: black;
	padding: 0;
}

.nav-link:hover,
.nav-link:focus {
	color: var(--mainColor);
}

.navbar-collapse{
	text-align: center;
}

.image-caption{
	padding: 2%;
	color: white;
	background-color: var(--mainColor);
	line-height: 1.25rem;
	position: relative;
	z-index: 1;
}

ul {
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-direction: column;
}

header li {
	padding: 8px;
	text-transform: uppercase;
}

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

.sticky-wrapper {
	position: sticky;
	top: 0;
	z-index: 10;
	overflow-y: hidden;
}

.page-header {
	background-color: white;
}

.navbar {
	position: static;
	margin-left: 20px;
}

.navbar-toggler:focus {
	box-shadow: none;
	outline: thin dotted !important;
}

.navbar-toggler-icon {
	padding-top: 4px;
	color: black;
}

.fa-bars::before {
	content: "";
}

.navbar-toggler-icon:visited {
	text-decoration: white;
}
 
.navbar-expand-md {
	flex-wrap: wrap;
}
	
#navbarNav{
	position: fixed;
	top: 50px;
	left: 0;
	width: 100%;
	background: #fff;
	z-index: 10;
}

/*logo appears if page is loaded*/
@keyframes opacityLogo {
	0% {
	opacity: 0;
	transform: translateY(100%);
	}
	30% {
	opacity: 0.2;
	transform: translateY(0);
	}
	35% {
	opacity: 0.2;
	}
	100& {	
	opacity: 1;
	}
}

#logo {
	margin: 8% auto;
	width: 75%;
	text-align: center;
	animation-name: opacityLogo;
	animation-duration: 5s;
}

/*logo shrinks if page is scrolled*/
#logo.shrink {
	margin: 2% auto;
	width: 60%;
	transform: translateY(-15%);
	transition: margin 2s,
				width 2s,
				transform 2s;
}

header #logo2img{
	width: 100%;
	padding-top: 4px;
}

header + .section-container{
	background-color: var(--mainColor);
}

/* 
SECTIONS
*/
section.section_eins_default {
    background-color: var(--sectionOneColor);
}
section.section_zwei_default {
    background-color: var(--sectionTwoColor);
}
section.section_drei_default {
    background-color: var(--sectionThreeColor);
}
section.section_vier_default {
    background-color: var(--sectionFourColor);
}
section.section_fuenf_default {
    background-color: var(--sectionFiveColor);
}
section.section_weiss {
    background-color: white;
}
section.section_hellgrau {
    background-color: var(--lightBgColor);
}
section.section_dunkelgrau {
    background-color: var(--darkBgColor);
}
section.section_rot {
      background-color: var(--mainColor);
}
section.section_orange {
      background-color: var(--orangeBgColor);
}
section.section_gruen {
      background-color: var(--greenBgColor);
}
section.section_blau {
      background-color: var(--blueBgColor);
}

.section-container .row .frame-type-header.frame-layout-0 .bg-primary,
.section-container .row .frame-type-header.frame-layout-0 .bg-secondary,
.section-container .row .frame-type-header.frame-layout-0 .bg-warning  {
	background-color: transparent !important;
}

/* text fading (zB bei Leistungen)
	begin*/

.frame-layout-48 .ce-bodytext,
.frame-layout-1 .ce-bodytext,
.frame-layout-2 .ce-bodytext,
.frame-layout-3 .ce-bodytext{
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 500ms ease-in,
				transform 500ms ease-in;
}

.ce-bodytext.appear {
    margin-top: 1.5rem;
}

.frame-layout-48 .ce-bodytext.appear,
.frame-layout-1 .ce-bodytext.appear,
.frame-layout-2 .ce-bodytext.appear,
.frame-layout-3 .ce-bodytext.appear{
	transform: translateX(0);
	opacity: 1;
}

.indi-button {
	padding-top: 14px;
}

/*	end*/

/* image animation (zB bei Leistungen)
	begin*/
	
.frame-layout-48 img,
.frame-layout-46 img,
.frame-layout-1 img,
.frame-layout-2 img,
.frame-layout-3 img,
.frame-layout-6 img {
	transition: transform 1s;
}

.frame-layout-48 img:hover,
.frame-layout-46 img:hover,
.frame-layout-1 img:hover,
.frame-layout-2 img:hover,
.frame-layout-3 img:hover,
.frame-layout-6 img:hover {
	transform: scale(1.1);
}

.ce-textpic,
.section-container figure, 
.news_latest_image,
.frame-layout-41 .box{
	overflow: hidden;
}

/*	end*/

figure img{
	width: 100%;
}

.contact {
	height: 5px;				
	color: transparent;	
}	

.contact.shrink {
	font-size: 1rem !important;
}

.page-header .hpk_adr_mobil, .page-header .hpk_adr_tel, .page-header .hpk_adr_fax, .page-header .hpk_adr_mail {
	font-weight: 700;
}

.page-header .hpk_adr_firma, .page-header .hpk_adr_strasse, .page-header .hpk_adr_plzort,
.page-header .hpk_adr_land, .contact .hpk_adr_land {
	display: none;
}

address > span{
	line-height: 1.5rem;
}

address {
	margin-bottom: 0;
	display: flex;
	flex-flow: column;
	min-height: 50px;
    justify-content: center;
}

.page-header .tx-hpkfe-pi-adresse {
	display: flex;
	justify-content: center;
	position: relative;
	/* top: -10px; nicht benötigt, so lange das Adressenlayout unter dem Mitgliedslogo nicht steht*/
}

.page-header .hpk_adr_mobil,
.page-header .hpk_adr_tel,
.page-header .hpk_adr_fax,
.page-header .hpk_adr_mail {
	display: inline-flex;
	text-indent: -2000px;
}

.page-header .hpk_adr_mobil a,
.page-header .hpk_adr_tel2 {
	display: block;
	text-indent: 0;
	font-size: 1.1rem;
}

.page-header .hpk_adr_tel a,
.page-header .hpk_adr_mobil a {
	text-decoration: none;
}

.page-header .hpk_adr_mobil a::before {
	content: "\f10b";
	padding-right: 8px;
	font-family: FontAwesome;
}

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

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

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

.sticky-wrapper address.shrink{
	min-height: 40px;
	padding: 0;
}

section{
	padding: 5% 0;
}

.box > header:not(.bg-danger header) {
	padding-bottom: 5%;
	text-align: center;
}

/*
Mitarbeitersuche
    begin*/
	
.layout-0.cycle-slide {
	z-index: 0 !important;
}

.layout-0.cycle-slide img {
	max-width: 87vw;
	height: auto;
}

/*  end*/


/*
Accordion
    begin*/

.accordion_header{
	background-color: var(--mainColor);
	border-radius: 0.25rem;
	padding: 10px 10px 10px 15px;
	margin-bottom: 2%;
}

.accordion_header a{
	text-decoration: none;
}

.fa.fa-plus, .fa.fa-minus {
	color: white;
	width: 15px;
}

.fa-minus:before{
	content: "\2d";
	font-size: 1.5rem;
}

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

.accordion_header_content{
	color: white;
}

.accordion_content{
	padding-right: 5px;
	padding-left: 15px;
	max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion_content ul,
.hpk_datenschutz ul,
.ce-bodytext ul {
	display: block;
	list-style-type: circle;
	padding-left: 20px;
	margin-bottom: 1rem;
}/*warum gilt der stil nicht für jedes ul?*/

/* 41, 10 Bild neben Akkordeon */

.frame-layout-41 .ce-gallery,
.frame-layout-10 .ce-gallery{
	transform: translateX(50%);
	opacity: 0;
	transition: opacity 250ms ease-in,
				transform 500ms ease-in;
}

.frame-layout-41 .ce-gallery.appear,
.frame-layout-10 .ce-gallery.appear{
	transform: translateX(0);
	opacity: 1;
}

.frame-layout-41 .image-caption,
.frame-layout-10 .image-caption{
	bottom: 5%;
	position: absolute;
	right: 0;
	width: 80%;
}
/*	end*/

/*
Referenzen/Galerie
	begin*/

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

.frame-layout-6 .box > header {
	padding-bottom: 0%;
}

.box.border.h-100 div, .box.border.h-100 figure{
	height: 100%;
}

.frame-layout-46 .image.clearfix{
	margin-bottom: 0;
}

.frame-layout-46 img {
	height: 100%;
}

.frame-layout-46 .image-caption{
	transform: translateY(-100%);
	position: fixed;
	width: 100%;
}

.frame-layout-46 .ce-gallery{
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 1000ms ease-in,
				transform 1000ms ease-in;
}

.frame-layout-46 .ce-gallery.appear{
	transform: translateX(0);
	opacity: 1;
}

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

/* ul#nav {
	width: 80%;
} platziert das die Galerie-Navi nicht falsch?*/

.slideholder {
	z-index: 0!important;
}

.slideholder img {
	width: 100%;
	height: auto;
}

.tx-hpkfe-pi-referenzen .prev a, 
.tx-hpkfe-pi-referenzen .next a {
	background: #333333;
	opacity: 0.9;
	width: 50px;
	height: 50px;
	display: block;
	color: white;
	border-radius: 30px;
	font-size: 25px;
	text-decoration: none;
	padding-top: 3px;
	margin: 5px;
}

.tx-hpkfe-pi-referenzen .prev a::before,
.tx-hpkfe-pi-referenzen .next a::before {
  font-family: 'FontAwesome';
  color: white;
  text-align: center;
  display: block;
}

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

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

/*	end*/

.emasters_video {
    position: relative;
}

.emasters_video .vjs-tech {
    position: relative;
}

.emasters_video .vjs-default-skin .vjs-control-bar { /*Position der Videobedienleiste*/
	bottom: 8px;
}

/*
Contact/Maps
	begin*/

.container .row .frame-layout-46{
	padding: calc(var(--bs-gutter-x) * 0.5);
}

.btn-primary, 
#initmapnow,
.dismiss-cookies.cookie-button, 
.save-cookies.cookie-button, 
.save-cookies-settings.cookie-button,
.indi-button,
.powermail_submit {
	background-color: var(--mainColor);
	border-color: var(--mainColor);
}

.btn-primary:hover,
#initmapnow:hover,
.dismiss-cookies.cookie-button:hover, 
.save-cookies.cookie-button:hover, 
.save-cookies-settings.cookie-button:hover,
.indi-button:hover,
.powermail_submit:hover {
	background-color: white;
	border-color: var(--mainColor);
	color: var(--mainColor);
}

.powermail_form h3,
.powermail_form .powermail_legend {
	display:none;
}

.powermail_submit {
	color: #fff;
	border:unset;
	padding:6px 12px;
	margin:12px 0;
}

.powermail_fieldwrap.powermail_fieldwrap_type_input,
.powermail_fieldwrap.powermail_fieldwrap_type_textarea,
.powermail_submit {
	border-radius:0.375rem;
	width:100%;
}

.powermail_input,
.powermail_textarea {
	width:100%;
	border:none;
	background-color:transparent;
	outline:none;
	padding:26px 12px 10px 12px;
}

.powermail_textarea {
	margin-bottom: -8px;
}

.powermail-errors-list {
	padding:0px 12px!important;
	font-size:0.8em;
}

.powermail_fieldwrap.powermail_fieldwrap_type_input,
.powermail_fieldwrap.powermail_fieldwrap_type_textarea {
	border:rgb(222, 226, 230) 1px solid;
	background-color:#fff;
	margin: 2px 0px 4px 0px;
	position:relative;
}

.powermail_fieldwrap.powermail_fieldwrap_type_input label,
.powermail_fieldwrap.powermail_fieldwrap_type_textarea label {
	position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 100%;
  height: 100%;
  padding: 0.45rem 0.75rem;
  overflow: hidden;
  color: rgba(var(--bs-body-color-rgb), 0.65);
  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;
  font-size:0.8em;
}

.powermail_fieldwrap.powermail_fieldwrap_type_input input::placeholder,
.powermail_fieldwrap.powermail_fieldwrap_type_textarea textarea::placeholder {
	color:transparent;
}


.powermail_fieldwrap.powermail_fieldwrap_type_input:has(input:focus),
.powermail_fieldwrap.powermail_fieldwrap_type_textarea:has(textarea:focus) {
	outline: 2px solid var(--mainColor);
}

.form-check, .btn {
	margin: 0.75rem 0;
}

.map_hinweis_holder{
	padding-top: 10%;
}

.map_hinweis_button{
	background-color: var(--mainColor);
	width: 100%;
	color: white;
	line-height: 1.5;
	border: 1px solid var(--mainColor);
	border-radius: 0.25rem;
	padding: 0.375rem 0.75rem;
}

.hpk_kon_gmap {
	height: 300px;
}

#hpk_map_canvas {
	height: 100%;
}

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

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

.frame-layout-41 .tx-hpkfe-pi-gmap ~ .row .col-md-6:nth-child(2){
	margin-top: 5%;
}
/*	end*/

/*
Video
	begin*/
.em-yt-overlay {
    position: relative;
}
.em-yt-content {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
	padding: 2rem;
}

img.em-yt-content-img {
    width: 100%;
    height: auto;
    display: block;
}
/*	end*/

/*
Footer
	begin*/

footer {
	padding: 40px 0 0 0;
    text-align: left;
}

ul + div{
	justify-content: center;
}

#logo2img {
	max-width: 164px;
	height: auto;
}

.footer-bottom {
    text-align: center;
	position: absolute;
	bottom: 75px;
}

footer li {
	margin: 0 1%;
}

footer .nav-link {
	font-size: 1rem;
	text-decoration: underline;
}

footer .nav-link:hover,
footer .nav-link:active {
	text-decoration: none;
}

footer .container .row:nth-child(2) {
	position: relative;
}

footer .col-7 {
	text-align: right; /* "cookie-einstellungen" */
}
/*	end*/


/*
Bootstrap
*/

.bg-danger {
	color: white;
	background-color: var(--dangerColor)!important;
	padding: 2% 4% !important;
	margin-bottom: 7%;
}

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

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


/* ================ * 
 * 4. Media-Queries *
 * ================ */

@media only screen and (min-height: 501px) {
	
	.contact {
		height: auto;				
		color: white;
	}	
}

@media only screen and (min-width: 576px){
	
	.container-sm, .container{
		max-width: 90%;	
	}
	
	#logo.shrink {
		width: 30%;
		transform: translateY(-10%);
	}
	
	.frame-layout-40 .ce-left .ce-gallery {
		display: flex;
		float: left;
		padding-right: 2%;
		max-width: 50%;
	}
	
	.frame-layout-40 .ce-right .ce-gallery {
		display: flex;
		float: right;
		padding-left: 2%;
		max-width: 50%;
	}
	
	.map_hinweis_holder{
		padding-top: 0;
	}
	
	footer ul{
		justify-content: left;
	}
	
	ul + div{		
		justify-content: right;
	}
	
	.footer-bottom {
		position: relative;
		bottom: 0;
	}
	
}

@media only screen and (min-width: 630px){
	
	header #logo2img{
		width: 75%;
	}
}
 
@media only screen and (min-width: 768px){
	
	.col-md {
		flex: 0 0 33.3%;
	}
	
	.col-md-6:not(.carousel-item .col-md-6, .tx-hpkfe-pi-gmap ~ .row .col-md-6) {
		width: 100%;
	}
	
	.container-md, .container-sm, .container{		
		max-width: 90%;
	}
				
	.page-header .shrink .tx-hpkfe-pi-adresse {
		top: -20px;
	}
	
	/*
	.page-header .hpk_adr_tel2 {
		font-size: 1.5rem;
	}	
	
	.page-header .shrink .hpk_adr_tel2 {
		font-size: 1.3rem;
	}	wird nur gebraucht, wenn unter dem Logo ein einzelnes Adresselement ist*/
		
	h2{
		font-size: 2.1rem;
	}
	
	.accordion_element:first-child{
		margin-top: 0;
	}
	
	.frame-layout-40 .ce-center .ce-gallery {
		display: flex;
		float: none;
		max-width: 50%;
		padding-left: 0;
		max-width: 50%;
	}
	
	.frame-layout-41 .tx-hpkfe-pi-gmap ~ .row .col-md-6:nth-child(2){
		margin-top: 0;
	}
	
/* 	.frame-layout-41 .tx-hpkfe-pi-gmap ~ .row .col-md-6:nth-child(2){
		margin-top: 0;
	} entfernt Abstand zwischen Adresse und Öffnungszeiten*/
}

@media only screen and (max-width: 991px){	

	body {
		font-size: var(--mobilText);
	}
	
	/*.page-header address{
		flex-flow: row;
	}	wird nur gebraucht, wenn unter dem Logo ein einzelnes Adresselement ist*/
}

@media only screen and (min-width: 992px){	
	
	.col-lg {
		flex: 0 0 33.3%;
	}
	
	.navbar {
		margin-left: 0;
	}
	
	.navbar-toggler{
		display: none;
	}

	#navbarNav{
		position: inherit;
	}
	
	#logo {
		width: 60%;
	}
		
	#logo.shrink {
		/*transform: translateY(-15%);*/
		padding: 1%;
		margin: 1% auto;
	}
	
	header #logo2img{
		width: 100%;
	}
/* 	
	#logo2img{
		padding-top: 0;
		width: auto;
		max-width: 164px;
	} */	
	
	h2{
		font-size: 2.6rem;
	}
	
	.sticky-wrapper address{
		flex-flow: row;
		align-items: center;
	}
	
	.hpk_adr_firma:not(.sticky-wrapper .hpk_adr_firma) {
		margin: 0 0 0.5rem;
	}
	
	.contact address span:not(:first-child){
		padding-left: 21.4px;
	}
	
	.sticky-wrapper address span:not(:first-child)::before{
		content: "| \2001";
	}
	
	span.hpk_adr_strasse, 
	.hpk_adr_plzort, 
	.hpk_adr_tel, 
	.hpk_adr_fax, 
	.hpk_adr_mail, 
	.hpk_adr_land, 
	.hpk_adr_mobil {
		display: flex;
		align-items: center;
	}
	
/* 	.page-header address span:not(:first-child){
		padding-left: 30px;
	} Abstand, falls mehr als nur die Telefonnummer unter dem Logo gezeigt wird*/
	
	.page-header .tx-hpkfe-pi-adresse {
		top: -30px;
	}	
		
	.page-header.shrink .tx-hpkfe-pi-adresse {
		top: -10px;
	} 
	
	.page-header .hpk_adr_tel2 {
		font-size: 1.7rem;
	}
	
	.col.frame-layout-6 {
		flex: 0 0 auto;
		width: 33.33333333%
	}

	footer .nav-link {
		font-size: 1rem;
		text-decoration: underline;
	}
}

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

	span.hpk_adr_strasse, 
	.hpk_adr_plzort, 
	.hpk_adr_tel, 
	.hpk_adr_fax, 
	.hpk_adr_mail, 
	.hpk_adr_land, 
	.hpk_adr_mobil {
		flex: 0 0 auto;
	}
}

@media only screen and (min-width: 1400px) {
	
	#logo.shrink{
		width: 20%;
		padding-top: 10px;
	}		
		
	.page-header .shrink .hpk_adr_tel2 {
		font-size: 1.5rem;
	}
	
	.news-single-item {
		max-width: 992px;
	}
}

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

.cookie-wrapper {
	background: rgba( 0, 0, 0, 0.75 );
    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: #fff;
    box-shadow: 0 0 5px #acacac;
	box-sizing: border-box;
	min-height: 20%;
	left: 50%;
	/*padding: 2em;*/
	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,
.indi-button {
	border: 0;
	box-sizing: border-box;
	color: white;
	display: flex;
	margin: 1em 0;
	width: 100%;
	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;
}

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

.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-list  .dismiss-cookies.cookie-button,
.dismiss-cookies.cookie-button,
.save-cookies.cookie-button,
.save-cookies-settings.cookie-button,
.indi-button {
	flex: 0 0 100%;
	max-width: 70%;
	justify-content: center;
}

#cookie-list-button {
	padding: 11px;
	margin-left: 20px;
}

.cookie-list-link {
    border-radius: 3em;
	background: #fff;
    border: 1px solid #aaa;
    color: #aaa;
    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: -6px;
}

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

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

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

@media only screen and (min-width: 576px){
	
	/*footer .cookie-icon-wrapper {
		margin-bottom: 0;
	}*/
}

@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,
	.dismiss-cookies.cookie-button,
	.checkbox-description-text {
		font-size: 0.875rem;
	}
}

@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;
	}
	
	.dismiss-cookies.cookie-button,
	.save-cookies.cookie-button,
	.save-cookies-settings.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 {
		flex: 0 0 70%;
		max-width: 70%;
	}
		
	.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;
}

  /********************************************/
 /***** Socialmedia Links und Grafiken *******/
/********************************************/

#sociallinks {
  position: fixed;
  right: 0;
  top: 220px;
  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, .cookie-icon-wrapper {
  margin-bottom: 15px;
}*/

.kontaktplus {
	display: none;
}

@media only screen and (min-width: 360px) {
	.shariff .orientation-horizontal li.xing {
		margin-right: 0;
	}
}

@media only screen and (min-width: 396px) {
	.shariff .orientation-horizontal li,
	.shariff .orientation-horizontal li.xing{
		margin-right: 0.8%;
	}
}

@media only screen and (max-width: 640px) {
  /*#socialshareprivacy {
    margin-top: 35px;
  }*/
  #socialshareprivacy .social_share_privacy_area {    
    height: auto;
  }  
  #socialshareprivacy .social_share_privacy_area li {    
    float: none;
	height: 25px;
  }
}

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

  /********************************************/
 /****** Nachrichten Bootstrap Slider ********/
/********************************************/
  
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner{
	transform: translateX(50%);
	opacity: 0;
	transition: opacity 500ms ease-in,
				transform 1000ms ease-in;
}

.carousel-inner.appear{
	transform: translateX(0);
	opacity: 1;
}

.carousel-item div:first-child .card-body{
	margin-left: 0;
}

.card{
	border: 0;
}

.card-body{
	height: 100%;
	padding:	0;
	margin-left: 5%;
}

/*.card-body .news_latest_image {
	height: 180px;
}*/

.card-body img{
	min-height: 100%;
	min-width: 100%;
	width: auto;
	height: auto;
}

h3.news_latest_title {
	font-size: 0;
}

h3.news_latest_title::before {
	content: "Aktuelles";
	font-size: 16px;
	display: block;
}

#newscarousel span.news_latest_title {
	font-size: 1.3rem;
	line-height: 1.5rem;
}

.news_latest_text {
	/*min-height: 250px;*/
	border-radius: 0.25rem;
	padding: 1rem;
}

.news_latest_text a:not(.detailsansehen a){
	text-decoration: none;
}

.news_latest_text a:hover:not(.detailsansehen a){
	color: black;
}

.news-single-item {
	position: relative;
	/*max-width: 655px;*/
	padding: 0;
	margin: auto;
}

.news-single-rightbox {
	position: absolute;
	top: 6px;
	right: 0;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  background-color: var(--mainColor);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
}

.news-single-item hr.cl-right,
.news-single-item hr.cl-left {
	display: none;
}

@keyframes underline-streching {
	0%   {width: 0%;}
	50%  {width: 100%;}
	100% {width: 25%;}
}

.news-single-item h1 {
	margin-bottom: 4%;
	width: 90%;
}

.news-single-item h1::before {
	animation-name: underline-streching;
    animation-duration: 3s;
    animation-iteration-count: 1;
	margin-bottom: -2%;
}

.news-single-img {
	float: none;
	margin: 10px 0;
}

.news-single-img img{
	width: 100%;
	height: auto;
}

.news-single-item img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.news-single-backlink {
	padding: 4% 0 0;
}

.news-single-backlink ul,
ul#nav {
	flex-direction: row;
}

.news-single-backlink .detailsansehen {
	/*display: none;*/
}

/*pfeile und indikatoren positionieren*/
.carousel-control-prev, 
.carousel-control-next {
	margin-left: -20px;
	margin-right: -20px;
    width: 40px;
	opacity: 0.5;
	transform: translateY(-27%);
}

.carousel-indicators {
	bottom: -40px;
}

.carousel-indicators [data-bs-target] {
	background-color: grey;
}

@media only screen and (max-width: 767px) {
	
  .carousel-inner .carousel-item > div {
    display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
    display: block;
	width: 100%;
  }
}

/*End Slider*/


  /********************************************/
 /*** 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: #fff;
	/*border-top: 1px solid #fff;*/
}

#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:#fff;
	z-index:100;
}

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

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

#lbImage {
	position:absolute;
	left:0;
	top:0;
	border:10px solid #fff;
	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 #fff;
	border-bottom:0.1em solid #fff;
	border-left:0.4em solid #fff;
	margin-right:0.2em;
}

#lbPresent a.act {
	/*font-weight:bold;*/
	color:#fff;
	background:#777;
	border-color:#777;
}