/* WEBFONTS ################################################### */

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.eot');
    src: url('fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Regular.woff2') format('woff2'),
        url('fonts/OpenSans-Regular.woff') format('woff'),
        url('fonts/OpenSans-Regular.ttf') format('truetype'),
        url('fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Bold';
    src: url('fonts/OpenSans-Bold.eot');
    src: url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff'),
        url('fonts/OpenSans-Bold.ttf') format('truetype'),
        url('fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed Bold';
    src: url('fonts/OpenSansCondensed-Bold.eot');
    src: url('fonts/OpenSansCondensed-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSansCondensed-Bold.woff2') format('woff2'),
        url('fonts/OpenSansCondensed-Bold.woff') format('woff'),
        url('fonts/OpenSansCondensed-Bold.ttf') format('truetype'),
        url('fonts/OpenSansCondensed-Bold.svg#OpenSansCondensed-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}







:root {

    /* FARBEN */

    --gruen: #66A742;
    --grau: #CDCDCD;
    --weiss: #fff;
    --grau: #333;
    --transBack:rgba(0,0,0, .8);

    /* SCHRIFTEN */
    --normalText: 'Open Sans';
    --fettText: 'Open Sans Bold';
    --CondensedBold: 'Open Sans Condensed Bold';

    /* SCHRIFTGRÖßEN */
    --navFS: clamp(1.25rem, 1.0439rem + 0.3324vw, 1.875rem);
    --h1FS: clamp(2.5rem, 1.4694rem + 1.6622vw, 5.625rem);
    --h2FS: clamp(1.875rem, 0.8444rem + 1.6622vw, 5rem);
    --h3FS: clamp(1.375rem, 1.2584rem + 0.6216vw, 2.8125rem);


    /* SCHATTEN */
    --boxschatten: 0px 30px 60px 0px rgba(0, 0, 0, 0.4);

}

* {
    transition: .3s;
}

body {
    font-family: var(--normalText);
    line-height: 1.5; /* Genügend Abstand zwischen den Zeilen */
}

a:focus, button:focus, input:focus,
a.sppb-btn-link:focus {
    outline: 1px solid #fff; /* Deutliche Umrandung für Fokus */
    outline-offset: 4px;
}

nav.sidebar li .btn:focus {
    outline: 1px solid #fff; /* Deutliche Umrandung für Fokus */
    outline-offset: 0;
}

h1.sppb-title-heading {
    font-size: var(--h1FS);
    font-family: var(--CondensedBold);
}

h1.sppb-addon-title {
    font-size: var(--h1FS);
    font-family: var(--CondensedBold);
}

h2.sppb-title-heading {
    font-size: var(--h2FS);
    font-family: var(--CondensedBold);
}

p.sppb-title-subheading {
    color: var(--weiss);
}



#sp-header {
    height: auto;
    box-shadow: none;
    position: absolute;
    background: transparent;
    top: 48px;
    
}

#sp-header.header-sticky {
    background: var(--transBack);
    -webkit-box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

#sp-header:not(.header-sticky) > .container > .container-inner {
    background: var(--transBack);
    -webkit-box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 0 20px;
    border-radius: 5px;
}

.sp-megamenu-parent>li>a {
    font-family: var(--CondensedBold);
    text-transform: uppercase;
    font-size: var(--navFS);
}

.sp-megamenu-parent>li.current-item.active>a,
.sp-megamenu-parent>li>a:hover {
    color: var(--gruen);
}

.sp-megamenu-parent>li>a:focus, button:focus, input:focus {
    outline: 1px solid #fff; /* Deutliche Umrandung für Fokus */
    outline-offset: 0px;
}



/* FEATUREBOXEN ########################### */

.sb__featureBOX,
.sb__heroBOX {
    background: var(--transBack);
    border-radius: 5px;
    -webkit-box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 30px 30px 30px 30px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: var(--weiss);
}

.sb__featureBOX:hover {
    padding: 30px 30px 30px 30px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.sppb-column.sb__featureBOX {
    position: relative; /* Positionierung für das Pseudoelement */
    overflow: hidden; /* Verhindert Überlauf */
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: var(--weiss);
    scale: 1;
}


.sb__featureBOX h3.sppb-addon-title {
    font-family: var(--CondensedBold);
    font-size: var(--navFS);
    text-transform: uppercase;
    color: var(--weiss);
}

.sb__featureBOX:hover h3 a {
    color: var(--gruen);
}

.sppb-column.sb__featureBOX a.sppb-btn-link {
    border: 2px solid var(--gruen)!important;
    color: var(--weiss);
}

.sppb-column.sb__featureBOX:hover {
    scale: 1.08;
}

.sppb-column.sb__featureBOX:hover a.sppb-btn-link {
    background-color: var(--gruen);
    color: var(--weiss);
}

.sppb-column.sb__kontaktBOX a.sppb-btn-link {
    border: 2px solid var(--gruen)!important;
    color: var(--weiss);
    width: 100%;
    display: block;
}

.sppb-column.sb__kontaktBOX:hover a.sppb-btn-link {
    background-color: var(--gruen);
    color: var(--weiss);
}



/* LEISTUNGSUEBERSICHT ############################## */

h3.sppb-image-layout-title {
    font-size: var(--h3FS)!important;
    font-family: var(--CondensedBold);
}

#sb__leistungsUEBERSICHT a.sppb-btn-rounded {
    border: 2px solid var(--gruen)!important;
    color: var(--weiss);
}

#sb__leistungsUEBERSICHT .sppb-column-addons:hover a.sppb-btn-rounded {
    border: 2px solid var(--gruen)!important;
    color: var(--weiss);
    background-color: var(--gruen);
    color: var(--weiss);
}




/* FLIPBOXEN #################################### */


.overlay-image-button-wrap a.sppb-btn-square {
    border: 2px solid var(--gruen)!important;
    color: var(--weiss);
}

.sppb-addon-overlay-image-content:hover a.sppb-btn-square {
    border: 2px solid var(--weiss)!important;
    color: var(--weiss);
    background-color: var(--gruen);
}

div.overlay-image-title > h4 a {
    color: var(--weiss)!important;
    font-family: var(--CondensedBold);

}

.flip-box-inner {
    color: #fff;
}

.sppb-flipbox-back-title {
    font-family: var(--CondensedBold);
    font-size: var(--h3FS);
    line-height: 100%;
    margin-bottom: 10px;
}

.sppb-flipbox-back-paragraph {
    margin-bottom: 15px;
}




/* CONVERTFORMS ################################# */

.sb__kontaktLinks {
    border-radius: 6px 0 0 6px;
}

.sb__kontaktRechts {
    border-radius: 0 6px 6px 0;
}

.sb__kontaktRechts a {
    color: var(--weiss);
    text-decoration: underline;
}

.sb__kontaktRechts a {
    color: var(--weiss);
    text-decoration: underline;
}

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

.sb__kontaktLinks {
    border-radius: 6px 6px 0 0;
}

.sb__kontaktRechts {
    border-radius: 0 0 6px 6px;
}


}




/* KARRIERE ####################################### */

.sb__karriereFrage {
    background-color: var(--gruen);
    color: var(--weiss);
    padding: 30px;
    border-radius: 6px 0 0 6px;
}

.sb__karriereAntwort {
    background-color: var(--weiss);
    padding: 30px;
    border-radius: 0px 6px 6px 0;
}




/* SIDENAVIGATION #################################### */

/* Sidenav */




nav.sidebar {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;

}

#sp-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.sidebar li {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--gruen);
  margin-bottom: 2px;
  width: 100%;
  border-right: 0px solid #fff;
  border-radius: 6px;
}

nav.sidebar li:hover {
    border-radius: 0 6px 6px 0;
    background-color: var(--grau);
}

nav.sidebar li:last-child {
  border-right: 0;
}

.btn {
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.btn .icon {
  font-size: 24px;
  line-height: 60px;
  display: block;
  color: #fff;
}

.btn .text {
  position: absolute;
  top: 29px;
  right: -199px;
  z-index: 200;
  transform: translateY(-50%); 
  min-width: 201px;
  height: 60px;
  background-color: var(--grau);
  font-size: 14px;
  text-transform: uppercase;
  line-height: 60px;
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0;
  border-radius: 6px 0 0 6px;
}

.btn:hover .text {
  right: 60px;
  opacity: 1;
}


@media (max-width: 768px) {

  nav.sidebar {
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
  }

  .btn {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn .icon {
    font-size: 24px;
    margin-right: 10px;
  }

  .btn .text {
    display: none;
  }

  .sidebar ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
  }
nav.sidebar li {
    border-right: 1px solid #fff;
}

nav.sidebar li:last-child {
  border-right: 0;
}

}



/* FOOTER ########################################## */

#sp-footer2 > div > div > div > ul > li > a {
    color: #fff;
}

#sp-footer2 > div > div > div > ul > li > a:hover {
    text-decoration: underline;
}

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

#sp-footer {
    padding: 0 0 80px 0;
    text-align: center;
}

#sp-footer #sp-footer2 {
    text-align: center;
    margin: 20px 0 0 0;
}



}