/* =============================================================================
 * Project Variables
 * ========================================================================== */
:root {
  --vsp-ag-d-y: 128px;
  --vsp-ag-d-x: 64px;
  --vsp-ag-t-y: 64px;
  --vsp-ag-t-x: 32px;
  --vsp-ag-m-y: 48px;
  --vsp-ag-m-x: 24px;
  --contentBoxedWidth: 1280px;
}


:root {
  /* Projektfarben */
  --accentColor: #C4D950;
  --secondColor: #3E3F42;
  --customColor1: #B8CB15;
  --customColor2: #ECF1F5;
  --customColor3: #EEF4CC;
  --customColor4: #FFFDFD;


  /* Sticky-Menü übernimmt die regulären Highlight-Abstände */
  --menu-highlight-padding-lr-sticky: var(--menu-highlight-padding-lr);
  --menu-highlight-padding-tb-sticky: var(--menu-highlight-padding-tb);
}


/* =============================================================================
 * Global Base
 * ========================================================================== */

.body {
  overflow-x: clip;
}

* {
  -webkit-hyphens: manual;
  hyphens: manual;
}

#breadcrumb {
  display: none;
}

p a {
  font-weight: 700;
}

.ce_hyperlink.ce_hyperlink-extended a {margin-bottom:unset}

@media screen and (max-width: 767px) {
 .autogrid_wrapper.gutter_m>div, .autogrid_row.gutter_m>div {
    padding-left: 0px;
    padding-right: 0px;
} 
}

svg {font-family: 'Roboto';}

/* =============================================================================
 * Utilities
 * ========================================================================== */

.border-radius-47px {
  border-radius: 47px;
}

.custom-hover {
  transition: transform 0.3s ease;
}

.custom-hover:hover,
.custom-hover:focus-visible {
  transform: scale(1.05);
}

.roboto,
.roboto h1,
.roboto h2,
.roboto h3,
.roboto h4,
.roboto h5,
.roboto h6,
.roboto p,
.roboto a,
.roboto li,
.roboto span,
.roboto strong,
.roboto em,
.roboto small {
  font-family: "Roboto", sans-serif !important;
}


/* Colors
 * -------------------------------------------------------------------------- */

.bg-accentColor {
  background-color: var(--accentColor);
}

.bg-secondColor {
  background-color: var(--secondColor);
}

.bg-customColor1 {
  background-color: var(--customColor1);
}

.bg-customColor2 {
  background-color: var(--customColor2);
}

.bg-customColor3 {
  background-color: var(--customColor3);
}

.txt-accentColor,
.txt-accentColor a,
.txt-accentColor p {
  color: var(--accentColor);
}

.txt-secondColor,
.txt-secondColor a,
.txt-secondColor p {
  color: var(--secondColor);
}

.txt-customColor1,
.txt-customColor1 a,
.txt-customColor1 p {
  color: var(--customColor1);
}

.txt-customColor2,
.txt-customColor2 a,
.txt-customColor2 p {
  color: var(--customColor2);
}

.txt-customColor3,
.txt-customColor3 a,
.txt-customColor3 p {
  color: var(--customColor3);
}

.headline-accentColor h1,
.headline-accentColor h2,
.headline-accentColor h3,
.headline-accentColor h4,
.headline-accentColor h5,
.headline-accentColor h6,
.headline-accentColor .h1,
.headline-accentColor .h2,
.headline-accentColor .h3,
.headline-accentColor .h4,
.headline-accentColor .h5,
.headline-accentColor .h6,
.headline-accentColor .headline,
.headline-accentColor .headline_wrap {
  color: var(--accentColor);
}

.headline-secondColor h1,
.headline-secondColor h2,
.headline-secondColor h3,
.headline-secondColor h4,
.headline-secondColor h5,
.headline-secondColor h6,
.headline-secondColor .h1,
.headline-secondColor .h2,
.headline-secondColor .h3,
.headline-secondColor .h4,
.headline-secondColor .h5,
.headline-secondColor .h6,
.headline-secondColor .headline,
.headline-secondColor .headline_wrap {
  color: var(--secondColor);
}

.headline-customColor1 h1,
.headline-customColor1 h2,
.headline-customColor1 h3,
.headline-customColor1 h4,
.headline-customColor1 h5,
.headline-customColor1 h6,
.headline-customColor1 .h1,
.headline-customColor1 .h2,
.headline-customColor1 .h3,
.headline-customColor1 .h4,
.headline-customColor1 .h5,
.headline-customColor1 .h6,
.headline-customColor1 .headline,
.headline-customColor1 .headline_wrap {
  color: var(--customColor1);
}

.headline-customColor2 h1,
.headline-customColor2 h2,
.headline-customColor2 h3,
.headline-customColor2 h4,
.headline-customColor2 h5,
.headline-customColor2 h6,
.headline-customColor2 .h1,
.headline-customColor2 .h2,
.headline-customColor2 .h3,
.headline-customColor2 .h4,
.headline-customColor2 .h5,
.headline-customColor2 .h6,
.headline-customColor2 .headline,
.headline-customColor2 .headline_wrap {
  color: var(--customColor2);
}

.headline-customColor3 h1,
.headline-customColor3 h2,
.headline-customColor3 h3,
.headline-customColor3 h4,
.headline-customColor3 h5,
.headline-customColor3 h6,
.headline-customColor3 .h1,
.headline-customColor3 .h2,
.headline-customColor3 .h3,
.headline-customColor3 .h4,
.headline-customColor3 .h5,
.headline-customColor3 .h6,
.headline-customColor3 .headline,
.headline-customColor3 .headline_wrap {
  color: var(--customColor3);
}


/* Typography
 * -------------------------------------------------------------------------- */

h1.topline {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 29px;
  text-transform: uppercase;
}

.subline {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.ce_list ul li,
.ce_hyperlink.ce_hyperlink-extended {
  font-family: "Roboto", sans-serif;
}



/* Round Images
 * -------------------------------------------------------------------------- */

.ce_image.image-round,
.ce_image_extended.image-round,
.ce_image.image-round .image_container,
.ce_image_extended.image-round .image_container,
.ce_image.image-round img,
.ce_image_extended.image-round img {
  width: 100%;
  height: 100%;
  min-width: 170px;
  min-height: 170px;
  max-width: 330px;
  max-height: 330px;
  border-radius: 999px;
}

.ce_image.image-round,
.ce_image_extended.image-round {
  width: 100%;
  height: 100%;
  min-width: 170px;
  min-height: 170px;
  max-width: 330px;
  max-height: 330px;
  margin-left:20px;
  margin-right:20px;
}

.ce_image.image-round img,
.ce_image_extended.image-round img {
  display: block;
  object-fit: cover;
}

.ce_image_extended.style-rounded-corner-47 img {
  border-radius: 47px;
}


/* =============================================================================
 * Header & Navigation
 * ========================================================================== */

.header .mainmenu ul li a.highlight span {
  transform: translateX(0);
  transition: all 0.3s ease;
}

.header .mainmenu ul li a.highlight span::after {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 0;
  height: 0;
  content: "";
  background: white;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.header .mainmenu ul li a.highlight:hover span::after {
  width: 18px;
  height: 4px;
  content: "";
  transform: translateY(-50%);
}

.header .mainmenu ul li a.highlight:hover span {
  transform: translateX(12px);
}


/* =============================================================================
 * Footer
 * ========================================================================== */

#footer a,
#footer p a {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: var(--paragraph-small-font-size);
  font-weight: 400;
  line-height: var(--paragraph-small-line-height);
  text-decoration: none !important;
  transition: all 0.5s ease;
}

#footer a:hover,
#footer p a:hover {
  text-decoration: underline !important;
}

#bottom a:hover {
  color: var(--secondColor) !important;
}

#footer .mod_socials a i {
  width: 50px;
  height: 50px;
  margin: 0 4px;
  padding: 11px;
  border-radius: 9px;
  font-size: 30px;
}


/* =============================================================================
 * Content Elements
 * ========================================================================== */

/* Background image overlay
 * -------------------------------------------------------------------------- */

.ce_bgimage div.offset_layer {
  background: linear-gradient(0deg, #4e4d4d -10%, #ffffff02 70%);
}

@media only screen and (max-width: 767px) {
  .ce_bgimage div.offset_layer {
    display: block;
  }
}


/* Hyperlink extended
 * -------------------------------------------------------------------------- */

.ce_hyperlink.ce_hyperlink-extended:not(.btn-text-ghost) a::after {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 0;
  height: 0;
  content: "";
  background: white;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.ce_hyperlink.ce_hyperlink-extended:not(.btn-text-ghost).btn-second-outline a::after,
.ce_hyperlink.ce_hyperlink-extended:not(.btn-text-ghost).btn-own-color-dark a::after,
.ce_hyperlink.ce_hyperlink-extended:not(.btn-text-ghost).btn-accent a::after {
  background: var(--secondColor);
}

.ce_hyperlink.ce_hyperlink-extended:not(.btn-text-ghost) a span {
  display: inline-block;
  transform: translateX(0);
  transition: all 0.3s ease;
}

.ce_hyperlink.ce_hyperlink-extended:not(.btn-text-ghost) a:hover::after {
  width: 30px;
  height: 4px;
  content: "";
  transform: translateY(-50%);
}

.ce_hyperlink.ce_hyperlink-extended:not(.btn-text-ghost) a:hover span {
  transform: translateX(12px);
}

.ce_hyperlink.ce_hyperlink-extended.btn-text-ghost a {
  padding-left: unset;
  padding-right: 20px;
  color: var(--secondColor);
  background: #ffffff00;
  border-color: transparent;
}

.ce_hyperlink.ce_hyperlink-extended.btn-text-ghost.white a {
  color: #fff;
}

.ce_hyperlink.ce_hyperlink-extended.btn-text-ghost a i {
  transform: translate(0, -48%);
  transition: all 0.3s ease;
}

.ce_hyperlink.ce_hyperlink-extended.btn-text-ghost a:hover i {
  transform: translate(5px, -48%);
}


/* Fancybox
 * -------------------------------------------------------------------------- */

.ce_fancybox.style2 {
  width: 100%;
  min-width: 230px;
  max-width:95vw;
  margin-left:auto;
  margin-right:auto;
}

.ce_fancybox.style2 .text {
  bottom: 30px;
  text-align: center;
}

.ce_fancybox.style2 .headline_wrap,
.ce_fancybox .more_link_wrap {
  text-align: center;
}

.ce_fancybox .more_link_wrap {
  font-weight: 500;
}

.ce_fancybox.style2.border-top-grey {
  border-top: 25px solid #ebebeb;
}


/* Divider
 * -------------------------------------------------------------------------- */

.ce_divider_extended.version2 {
  width: 70px;
  height: 3px;
  background: var(--secondColor);
}


/* Iconbox version4
 * -------------------------------------------------------------------------- */

.ce_iconbox.version4 {min-width:270px;max-width:min(350px, 95vw);margin-left:auto;margin-right:auto;}


.ce_iconbox.version4 .ce_iconbox_outside {
}

.ce_iconbox.version4 .ce_iconbox_inside {
}

.ce_iconbox.version4 .ce_iconbox_icon .image_container {
  text-align: center;
}

.ce_iconbox.version4 .ce_iconbox_cwrapper {
margin-top: 40px !important;
}

.ce_iconbox.version4 .headline {
  color: var(--customColor1);
  font-family: "Roboto", sans-serif;
  font-size: 24px;
}

.ce_iconbox.version4 .content {
}

.ce_iconbox.version4 .link {
  color: var(--secondColor);
}

/* Iconbox Standort (Kontakt)
 * -------------------------------------------------------------------------- */
 
 .ce_iconbox.kontakt_location .ce_iconbox_outside{
   border-radius: 30px;
   padding: 48px 48px ;
 }

.ce_iconbox.kontakt_location .headline{
  margin-bottom: 24px;
  margin-top: 24px;
  text-transform: uppercase;
  font-size: 1.6rem;
}

.ce_iconbox.kontakt_location p{
  margin-bottom: 0px;
  font-weight: 600;
}

/* Iconbox Kontakt Telefon / E-Mail
 * -------------------------------------------------------------------------- */
  .ce_iconbox.kontakt .ce_iconbox_outside{
   border-radius: 30px;
   padding: 24px 24px ;
 }

 .ce_iconbox.kontakt .ce_iconbox_inside{
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 24px;
 }
 
 .ce_iconbox.kontakt .headline{
   text-align: left;
   font-size: 1.6rem;
   line-height: 1;
   text-transform: uppercase;
   max-width: fit-content;
 }
 
 .ce_iconbox.kontakt .content a{
   color: var(--txt_secondColor);
   text-decoration: underline;
   display: inline;
   width: fit-content;
 }
 
 .ce_iconbox.kontakt .content{
   max-width: fit-content;
   text-align: left;
 }
 
 .ce_iconbox.kontakt .content p{
   text-align: left;
   max-width: fit-content;
   margin-bottom: 0px;
   display: inline;
 }

 .ce_iconbox.kontakt .ce_iconbox_icon img{
   max-width: unset;
 }
 .ce_iconbox.kontakt .ce_iconbox_cwrapper{
   margin: 0px!important;
   max-width: fit-content;
 }
 
 /* Iconbox_vertical Kontakt Verkehrsmittel
 * -------------------------------------------------------------------------- */
 
  .ce_iconbox_vertical[data-style="style2 verkehrsmittel"]{
    align-items: center;
  }
 
  .ce_iconbox_vertical[data-style="style2 verkehrsmittel"] .content p{
   color: white;
   font-weight: 600;
   margin-bottom: 0px;
 }
/* Swiper Slider
 * -------------------------------------------------------------------------- */

.ce_swiper-slider-start .swiper-button-next,
.ce_swiper-slider-start .swiper-button-prev {
  background: unset;
}

.ce_swiper-slider-start .swiper-container {
  perspective: 1200px;
}

.ce_swiper-slider-start .swiper-wrapper {
  align-items: stretch;
  transform-style: preserve-3d;
}

.ce_swiper-slider-start .swiper-slide {
  display: flex;
  height: auto;
  opacity: 1;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  transition: opacity 0.45s ease, transform 0.45s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  flex-direction: column;
}

.ce_swiper-slider-start .swiper-container.is-scrolling .swiper-slide {
  opacity: var(--swiper-slide-opacity, 1);
  transform: translateX(var(--swiper-slide-x, 0px)) translateZ(var(--swiper-slide-z, 0px)) scale(var(--swiper-slide-scale, 1));
}

.ce_swiper-slider-start.swiper-slider-vertical {
  overflow-x: visible;
  overflow-y: clip;
  position: relative;
}

.ce_swiper-slider-start.swiper-slider-vertical .swiper-container {
  height: auto;
  overflow: visible;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

.ce_swiper-slider-start.swiper-slider-vertical .swiper-container.is-scrolling .swiper-slide {
  opacity: var(--swiper-slide-opacity, 1);
  transform: translateY(var(--swiper-slide-y, 0px)) translateZ(var(--swiper-slide-z, 0px)) scale(var(--swiper-slide-scale, 1));
}

.ce_swiper-slider-start.swiper-slider-vertical .swip-pagination:not(.pagination-left):not(.pagination-right) .swiper-pagination {
  top: 50%;
  right: 20px;
  bottom: auto;
  left: auto;
  width: auto;
  transform: translateY(-50%);
}

.ce_swiper-slider-start.swiper-slider-vertical .swiper-pagination {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ce_swiper-slider-start.swiper-slider-vertical .swiper-pagination .swiper-pagination-bullet {
  margin: 0;
}

.ce_swiper-slider-start.swiper-slider-vertical > .swiper-pagination-vertical-outside {
  position: absolute;
  top: 50%;
  right: -28px;
  bottom: auto;
  left: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
  transform: translateY(-50%);
}
@media screen and (max-width: 1024px) {
.ce_swiper-slider-start.swiper-slider-vertical > .swiper-pagination-vertical-outside {
  right: -5px;
}}

.ce_swiper-slider-start.swiper-slider-vertical > .swiper-pagination-vertical-outside .swiper-pagination-bullet {
  margin: 0;
}

.ce_swiper-slider-start.swiper-slider-vertical .circle span {
  flex-direction: column;
}

.ce_swiper-slider-start.swiper-slider-vertical .circle i {
  display: block;
  transform: rotate(90deg);
}

.ce_swiper-slider-start.swiper-slider-vertical .circle i.last {
  margin-top: 8px;
  margin-left: 0;
}

.ce_swiper-slider-start .swip-pagination:not(.pagination-left):not(.pagination-right) .swiper-pagination {
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

.ce_swiper-slider-start .swiper-pagination .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  margin: 0 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(62, 63, 66, 0.2);
  opacity: 0.55;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.ce_swiper-slider-start .swiper-pagination .swiper-pagination-bullet-active,
.ce_swiper-slider-start .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--accentColor);
  opacity: 1;
  transform: scale(1.18);
}

.ce_swiper-slider-start .swiper-pagination .swiper-pagination-bullet-active::after {
  display: none;
}

.ce_swiper-slider-start .ce_iconbox,
.ce_swiper-slider-start .ce_iconbox_outside,
.ce_swiper-slider-start .ce_iconbox_inside {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.ce_swiper-slider-start .ce_iconbox_cwrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* Testimonial Slider
 * -------------------------------------------------------------------------- */

.ce_testimonial_slider[data-style="style1"] .swiper-content {
  text-align: center;
}

.ce_testimonial_slider[data-style="style1"] .swiper-content .text {
  padding: 0;
  margin-bottom: 24px;
  color: var(--secondColor);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.ce_testimonial_slider[data-style="style1"] .swiper-content .name,
.ce_testimonial_slider[data-style="style1"] .swiper-content .info {
  color: var(--secondColor);
  line-height: 1.3;
  text-align: center;
}

.ce_testimonial_slider[data-style="style1"] .swiper-content .name {
  font-weight: 600;
}

.ce_testimonial_slider[data-style="style1"] .swiper-content .text::before,
.ce_testimonial_slider[data-style="style1"] .swiper-content .text .bottom-arrow {
  display: none;
}

.ce_testimonial_slider[data-style="style1"] .swiper-slide {
  opacity: 0.4;
  transition: opacity 0.25s ease;
}

.ce_testimonial_slider[data-style="style1"] .swiper-slide-active {
  opacity: 1;
}

.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text {
  color: var(--secondColor);
  font-weight: 500;
  background: transparent;
  box-shadow: none;
}

.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .name {
  font-weight: 700;
}

.ce_testimonial_slider[data-style="style1"] .swiper-pagination {
  position: static;
}

.ce_testimonial_slider[data-style="style1"] .swiper-pagination .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  margin: 0 7px;
  border-radius: 999px;
  background: rgba(62, 63, 66, 0.2);
  opacity: 0.55;
  transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.ce_testimonial_slider[data-style="style1"] .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accentColor);
  opacity: 1;
  transform: scale(1.18);
}



/* Image extended object-fit
 * -------------------------------------------------------------------------- */

 .ce_image_extended.object-fit * {height:100%; width:100%!important;}
 .ce_image_extended.object-fit .ce_image_extended_inside img {object-fit: cover;}
 .ce_image_extended.object-position-top-left .ce_image_extended_inside img {object-position: left top;}
 .ce_image_extended.object-position-top-center .ce_image_extended_inside img {object-position: center top;}
 .ce_image_extended.object-position-top-right .ce_image_extended_inside img {object-position: right top;}
 .ce_image_extended.object-position-center-left .ce_image_extended_inside img {object-position: left center;}
 .ce_image_extended.object-position-center-center .ce_image_extended_inside img {object-position: center center;}
 .ce_image_extended.object-position-center-right .ce_image_extended_inside img {object-position: right center;}
 .ce_image_extended.object-position-bottom-left .ce_image_extended_inside img {object-position: left bottom;}
 .ce_image_extended.object-position-bottom-center .ce_image_extended_inside img {object-position: center bottom;}
 .ce_image_extended.object-position-bottom-right .ce_image_extended_inside img {object-position: right bottom;}


 /* Background-Image start/end 
 * -------------------------------------------------------------------------- */


@media only screen and (max-width: 1024px) {
    .ce_bgimage.parallax .ce_bgimage-image {
        background-attachment: fixed!important;
        background-position: center center !important;
        background-size: cover!important;
    }
}


 @media only screen and (max-width: 767px) {
    .ce_bgimage.parallax .ce_bgimage-image {
        background-attachment: fixed!important;
        background-position: center center !important;
        background-size: cover!important;
    }
}

 /* Formulare
 * -------------------------------------------------------------------------- */
 
 /*kennzeichnung Pflichtfelder*/
 form span.mandatory{
    display: inline;
    margin-left: 4px;
  }
 /*textfelder*/
 form .widget input,
 form .widget select{
   border-radius: 200px;
   background-color: var(--customColor4);
   border: 2px solid var(--accentColor);
 }
 
  form .widget textarea{
    border-radius: 30px;
    background-color:var(--customColor4);
  }
  
  form .widget.widget-textarea{
    margin-top: 32px;
  }
  
  /*consent*/
  
  form .consent legend{
    padding: 12px 24px;
    border-radius: 200px;
    color: var(--secondColor);
  }
  
  form .consent .checkbox{
    width: 32px!important;
    height: 32px;
    margin-right: 24px;
  }
  
  form .consent label{
    width: 100%;
  }
  
  form .widget.widget-explanation{
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 48px;
  }
  
  form .widget.widget-explanation a{
      color: var(--secondColor);
      text-decoration: underline;
  }
  
  /*Submit Button*/
  form .widget.widget-submit button:after{
    position: absolute;
    top: 50%;
    left: 0px;
    width: 0;
    height: 0;
    content: "";
    background: var(--secondColor);
    transform: translateY(-50%);
    transition: all 0.3s ease;
  }
  
  form .widget.widget-submit button:hover:after{
    width: 30px;
    height: 4px;
    content: "";
    transform: translateY(-50%);
   }
    
  form .widget.widget-submit button{
    color: var(--secondColor);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
    margin: auto;
  }
  
  form .widget.widget-submit button:hover #text{
    transform: translateX(12px);
  }