@charset "utf-8";  

/* 
CSS Document HPK 
Layout 14 - türkis - Farbverlauf
*/

:root {
	/*colours*/
	--black-ish: #333333;
	--mainColor: #d90000;
	
	--secondColor: #981938;
	
	--darkBgColor: #333333;
	--lightBgColor: #EFEFEF;
    --orangeBgColor: #f39200;
    --greenBgColor: #becd00;
    --blueBgColor: #009ee0;
	--redBgColor: #e2001a;	
	--dangerColor: #e2001a;
	
	--sectionOneColor: var(--mainColor);
	--sectionTwoColor: var(--darkBgColor);
	--sectionThreeColor: var(--mainColor);
	--sectionFourColor: var(--darkBgColor);
	--sectionFiveColor: var(--mainColor);	
	--ce-bodytext: #333333;
}

/* Ubuntu Bold */
/* @font-face {
    font-family: 'Ubuntu-Bold';
    src: url('fonts/ubuntu-bold-webfont.woff2') format('woff2'),
         url('fonts/ubuntu-bold-webfont.woff') format('woff'),
         url('fonts/ubuntu-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal; 
} */
/* Roboto Regular */
/* @font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-regular.woff2') format('woff2'),
         url('fonts/roboto-regular.woff') format('woff'),
         url('fonts/roboto-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} */


/*Logo*/

#logo {
	max-width: 250px;
	padding: 1%;
}

header .container {
    
	background: linear-gradient(to bottom right, rgb(10, 10, 40), rgba(0, 255, 0, 0));
}

header #logo2 img {
	background-color: #fff;
	padding: 1%;
}

@media only screen and (max-height: 700px) {
    .row #logo2 {
        margin-top: 10px;
    }
}


.row #logo2img {
    
    max-width: 130px;
}

@media (min-width: 992px) {
    .row #logo2img {
        max-width: 130px;
    }
}

header #logo2 img {
    padding: 10px;
}


@media only screen and (max-height: 700px) {
	header #logo2 img {
    padding: 5px;
	}
}		

#slider {
	opacity: 0.50;
}

h1 {
	font-family: 'Ubuntu-Bold', sans-serif;
    font-weight: bold;
    font-size: 2.8125rem; /* 45px ÷ 16 = 2.8125rem */
}

h2 {
	font-family: 'Ubuntu-Bold', sans-serif;
    font-weight: bold;
    font-size: 2.5625rem; /* 41px ÷ 16 = 2.5625rem */
    
}
@media (max-width: 768px) {
   h2 {
	   font-size: 2rem; /* 41px ÷ 16 = 2.5625rem */
	   
    }
}

header h2 {
    padding: 4%; /* Keine Änderung erforderlich, da Prozentsätze bereits responsive sind */
}

@media (max-width: 768px) {
    header h2 {
        padding: 1%;
    }
}

h3 {
	font-family: 'Ubuntu-Bold', sans-serif;
    font-weight: bold;
    color: var(--black-ish);
    font-size: 1.625rem; /* 26px ÷ 16 = 1.625rem */
	
}

h4 {
	font-family: 'Ubuntu-Bold', sans-serif;
    font-weight: bold;
    color: var(--mainColor);
    font-size: 1.5rem; /* 24px ÷ 16 = 1.5rem */
	
}

p {
    color: var(--black-ish);
}

#c433768 
.csc-content {
    margin-top: 0% !important; /* Keine Änderung erforderlich, Prozentsätze bleiben gleich */
}

#c433768 
.box2 p-2 {
	margin-top: 0% !important;
}

.ce-bodytext,
.csc-content {
    margin: 9%; /* Keine Änderung erforderlich, Prozentsätze bleiben gleich */
}

div#c433768 {
    margin-bottom: 3%;
}

#abschnitt2 
.box2 p-2 {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 9%;
	margin-bottom: 0%;
}
#abschnitt2 
.csc-content {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 0%;
	margin-bottom: 0%;
}

#abschnitt2 
.ce-bodytext {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 9%;
	margin-bottom: 0%;
}

#abschnitt3 
.ce-bodytext {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 9%;
	margin-bottom: 0%;
}

#c433804 
.box2 p-2 {
	margin-top: 0% !important;
}

#c433805 .box.p-2 {
    margin-top: -9%;
 }

#c433804 
.csc-content {
    margin-top: 0% !important;
	margin-button: 0% !important;/* Keine Änderung erforderlich, Prozentsätze bleiben gleich */
}

@media (max-width: 768px) {
    .ce-bodytext,
	.csc-content {
        margin: 3%;
    }
}

#abschnitt4 
.box2 p-2 {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 9%;
	margin-bottom: 0%;
}
#abschnitt4 
.csc-content {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 0%;
	margin-bottom: 0%;
}
#abschnitt4 
.ce-bodytext {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 9%;
	margin-bottom: 0%;
}
@media (max-width: 768px) {
    #abschnitt4 .ce-bodytext,
	.csc-content {
        margin: 3%;
    }
}
#abschnitt5 
.ce-bodytext {

	margin-left: 9%;
	margin-right: 9%;
	margin-top: 9%;
	margin-bottom: 0%;
}
@media (max-width: 768px) {
    #abschnitt5 .ce-bodytext {
        margin: 3%;
    }
}

#abschnitt5 
header {
    width: 100%;
}



/*Accordion*/

.accordion_content {
   padding-left: 35px;
   min-height: 100px
}	

.accordion_element {
    padding: 0%;
}
.accordion_header {

    padding-top: 3%;
	padding-bottom: 3%;
	padding-left: calc(9% - 30px);
	padding-right: 1%;
}

box p-2 .h3 {
    color: var(--black-ish);
    font-size: 1.625rem; /* 26px ÷ 16 = 1.625rem */
    margin-left: 9%; /* Prozentsätze bleiben gleich */
}
@media (max-width: 768px) {
p-2 .h3 {
        margin: 3%;
    }
}


/* Überschreiben der allgemeinen Regel, dass Links als Block-Elemente dargestellt werden */
.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), .btn-group > .btn,
#initmapnow,
.btn-primary,
.powermail_submit,
.detailsansehen a,
.detailsansehen a:active {
    display: inline-block;  /* Verhindert volle Breite, zeigt nur so viel wie der Inhalt */
    border-radius: 6px;     /* Abgerundete Ecken */
    width: auto;            /* Automatische Breite je nach Inhalt */
}

.btn-group > .btn {
  flex: unset; /*verhindert volle Breite im Kontaktformular*/
}

.nav-item:not(:first-child)::before {
    content: "\00a0\00a0\00a0";
}

.bg-primary {
    --bs-bg-opacity: 1;
    background: linear-gradient(to bottom right, var(--secondColor), var(--mainColor)) !important;
	height: auto;
	
}

.bg-secondary {
	--bs-bg-opacity: 1;
    background: linear-gradient(to bottom right, var(--mainColor), var(--secondColor)) !important;
	height: auto;
}

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

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 {

	text-transform: none;
	text-decoration: none;
}

figure {
    margin: 0 0 0rem;
}

#abschnitt5 figure {
padding-left: 15%;
    margin: 0 0 0rem;
    background-color: #f6f6f6;
    padding-right: 15%;
}
@media (max-width: 991px) {
#abschnitt5 figure {
padding-left: 9%;
    margin: 0 0 0rem;
    background-color: #f6f6f6;
    padding-right: 9%;
	}
}

.tx-hpkfe-pi-kontakt,
.frame-layout-48 header{
    margin: 0 9%;
	
}

.frame-layout-41 header, .frame-layout-48 header {
    padding: 0% 8% 0;
}

@media (max-width: 768px) {
.tx-hpkfe-pi-kontakt,
.frame-layout-48 header {
        margin: 0 3%;
    }
}

.mb-1 {
	font-size: 15px;
}




.container > .row > .tx-hpkfe-pi-adresse {
	display: none;
}

.arrow-down::after {
  content: '';
  display: inline-block;
  width: 60px; /* Breite des SVG */
  height: 60px; /* Höhe des SVG */
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="%23FFFFFF"><path d="M480-80q-118 0-199-81t-81-199v-260q0-118 81-199t199-81q118 0 199 81t81 199v260q0 118-81 199T480-80Zm30-540h190q0-81-53-144t-137-74v218Zm-250 0h190v-218q-84 11-137 74t-53 144Zm219.79 480q91.21 0 155.71-64.35Q700-268.7 700-360v-200H260v200q0 91.3 64.29 155.65Q388.58-140 479.79-140Zm.21-420Zm30-60Zm-60 0Zm30 60Z"/></svg>');
  background-size: contain; /* Passt die SVG-Größe an */
  background-repeat: no-repeat;
}

.arrow-down .left,
.arrow-down .right {
	display:none;
}

.arrow-down {
	left: calc(50% - 30px);
	z-index: 7;
}

:root {
  --space: '\00A0';
}

#slider {
	opacity:1!important;
}



#slider::after {
  content: 'Seit 1921 und mittlerweile in 5. Generation geführtes Meisterunternehmen stehen wir innovativ und modern an Ihrer Seite!';
  font-family: 'Ubuntu-Bold', sans-serif;
  font-weight: bold;
  z-index: 9;
  width: 100%;
  display: block;
  position: absolute;
  top: 33vh;
  left: 0;
  color: #ffffff;
  font-size: 2.5rem;
  padding:3%;
  padding-top: 3%;
  padding-left: 6%;
  padding-right: 6%;
  text-align: center;
  
  
}

@media (max-width: 768px) {
#slider::after {
	   padding-left: 3%;
       padding-right: 3%;
       top: 35vh;
	   font-size: 1.8rem;
    }
}


#logo {

	margin-top:11vh;
	z-index: 6;

}

#logo a,
#logo img {
	height:100%;
}


@-webkit-keyframes arrow {
  0% {
    top:65vh;
  }
  100% {
    top:66vh;
  }
}
/* Anpassung für mobile Geräte */
@media (max-width: 768px) {
  @-webkit-keyframes arrow {
    0% {
      top: 67vh; /* Neuer Wert für mobile Geräte */
    }
    100% {
      top: 68vh;
    }
  }
}

nav {

    background-color: white;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	
}

#nav-container {
    bottom: 0;
    z-index: 99;
}


#nav-container .nav-link {
  text-transform: none;
  color: var(--black-ish);
  font-weight: bold;
  font-size: 1.1rem;
  

}
.row #logo2 {
    z-index: 3;
}

#slider {width:100%;}
#cvideo-header {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
 
#cvideo-header .section-container img:not(.accordion_element img), video {
 
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: center;my
}

#c433785 .p-2 {
	text-align: center;
}

#c433781 .box {
    display: flex;             /* Flexbox auf die Box anwenden */
    flex-wrap: wrap;           /* Ermöglicht das Umfließen, wenn nicht genug Platz ist */
    justify-content: center;   /* Zentriert alle Partner-Elemente horizontal */
    gap: 20px;    
	margin-bottom: 60px;/* Abstand zwischen den Logos */
}

/* Styling für die einzelnen Partner-Elemente */
#c433781 .box > .partner {
    display: flex;             /* Flexbox auf die Partner anwenden */
    justify-content: center;   /* Zentriert die Inhalte der Partner (die Bilder) */
    align-items: center;       /* Zentriert vertikal */
}

/* Styling für die Bilder */
#c433781 .partner img {
    padding: 10px;              
    background: white;         
    border-radius: 10px;       
    max-width: 150px;          
    height: auto;
    display: block;            /* Verhindert unnötige Abstände unter den Bildern */
}

 /* Karte google maps */

.tx-hpkfe-pi-gmap {
    background-color: #eeeeee;
	background-image: url('/fileadmin/daten/mitglieder/121060/bilder/home/maps-bg.jpg');
    background-size: cover;
    background-position: center;
}

p.map_hinweis_p {
    color: white;
}

#hpk_map_canvas {
    text-align: center;
    padding-top: 15vh;
}

.tx-hpkfe-pi-kontakt {
    padding-top: 15%;
}

.tx-hpkfe-pi-adresse {
    margin-top: 9%;
}

#c433787 .box.p-2 {
    margin-right: -5px;
}

@media (max-width: 768px) {
#c433787 .row {
    margin-left: 5%;
}}