/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 28 2026 | 16:59:44 */
/* --------------------------------------------------
Referenz-Detail – Desktop
5-Spalten-Logik: 3 Spalten Text / 2 Spalten Slider
-------------------------------------------------- */

@media (min-width: 768px) {

.referenzdetail {
position: relative !important;
}

/* Headline bleibt links und läuft nicht unter den Slider */
.referenzdetail .referenzheadline {
position: relative !important;
z-index: 3 !important;

```
width: 61.5% !important;
max-width: 61.5% !important;

padding-right: 2vw !important;
box-sizing: border-box !important;
```

}

/* Slider oben rechts */
.referenzdetail .referenzslider {
position: absolute !important;
top: 0 !important;
right: 0 !important;
z-index: 2 !important;

```
width: 38.5% !important;
max-width: 38.5% !important;
```

}

/* Weiße Textfläche mit Überstand hinter den Slider */
.referenzdetail .referenzbeschreibung {
position: relative !important;
z-index: 1 !important;

```
width: 80% !important;
max-width: 80% !important;
min-height: 22vw !important;

margin-top: 2vw !important;

padding:
  1.5vw
  22%
  1.5vw
  1.5vw !important;

box-sizing: border-box !important;
border-radius: 0.5em !important;
overflow: hidden !important;
```

}
}

/* --------------------------------------------------
Referenz-Detail – Mobile
Alles normal untereinander
-------------------------------------------------- */

@media (max-width: 767px) {

.referenzdetail .referenzheadline,
.referenzdetail .referenzslider,
.referenzdetail .referenzbeschreibung {
position: relative !important;

```
top: auto !important;
right: auto !important;

width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;

padding-right: 0 !important;
```

}

.referenzdetail .referenzbeschreibung {
margin-top: 20px !important;
padding: 20px !important;
box-sizing: border-box !important;
}
}

/* --------------------------------------------------
Referenzleistungen – Liste aus CPT-Ausgabe
-------------------------------------------------- */

.referenzdetailleistungen .elementor-heading-title,
.referenzdetailleistungen .elementor-widget-container {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;

gap: 0.2em !important;
}

.referenzdetailleistung {
position: relative !important;
display: block !important;

padding-left: 1.1em !important;

color: var(--e-global-color-text) !important;
font-weight: bold !important;
line-height: 1.4 !important;
}

.referenzdetailleistung::before {
content: "–";

position: absolute !important;
top: 0 !important;
left: 0 !important;

color: var(--e-global-color-primary) !important;
-webkit-text-fill-color: var(--e-global-color-primary) !important;

font-weight: 700 !important;
}

/* --------------------------------------------------
Referenz-Slider – Rundung + grüner Versatz
-------------------------------------------------- */

.referenzslider {
overflow: visible !important;
}

/* Grüner Versatz hinter dem Slider */
.referenzslider::before {
content: "";

position: absolute;
inset: 0;
z-index: -1;

transform: translate(0.5em, 0.5em);

background-color: var(--e-global-color-primary) !important;
border-radius: 0.8em !important;

pointer-events: none !important;
}

/* Slider und sichtbare Ebenen abrunden */
.referenzslider,
.referenzslider > .elementor-widget-container,
.referenzslider .jet-slider,
.referenzslider .jet-slider__container,
.referenzslider .jet-slider__content,
.referenzslider .jet-slider__item,
.referenzslider .jet-slider__item-inner {
border-radius: 0.5em !important;
}

/* Nur äußere Ebenen beschneiden */
.referenzslider > .elementor-widget-container,
.referenzslider .jet-slider,
.referenzslider .jet-slider__container {
overflow: hidden !important;
}

/* Bilder abrunden */
.referenzslider img,
.referenzslider .jet-slider__image {
border-radius: 0.5em !important;
}

/* --------------------------------------------------
Referenz-Slider – Übergang ohne transparentes Loch
-------------------------------------------------- */

.referenzslider .sp-slide {
opacity: 0 !important;

transition:
opacity 0.4s ease 0.4s !important;
}

/* Neues Bild sofort einblenden */
.referenzslider .sp-slide.sp-selected {
opacity: 1 !important;
z-index: 2 !important;

transition-delay: 0s !important;
}

/* Vorheriges Bild bleibt während des Einblendens sichtbar */
.referenzslider .sp-slide:not(.sp-selected) {
z-index: 1 !important;
}

/* --------------------------------------------------
Referenz-Slider – Pfeile bei nur einem Bild ausblenden
-------------------------------------------------- */

.referenzslider:not(:has(.sp-slide:nth-child(2))) .sp-arrows,
.referenzslider:has(.sp-slide:only-child) .sp-arrows {
display: none !important;
}

/* --------------------------------------------------
JetSmartFilters – Checkboxen als Buttons
-------------------------------------------------- */

/* Filter horizontal anordnen */
.jet-checkboxes-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 1vw !important;
}

/* Einzelne Filterzeile */
.jet-checkboxes-list__row,
.jet-checkboxes-list__item {
display: inline-flex !important;
width: auto !important;
margin: 0 !important;
}

/* Native Checkbox unsichtbar machen */
.jet-checkboxes-list__input {
position: absolute !important;

width: 1px !important;
height: 1px !important;

opacity: 0 !important;
pointer-events: none !important;
}

/* Button – Lightmode */
.jet-checkboxes-list__button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;

width: auto !important;
min-height: 2.5em !important;

padding: 0.65em 1.2em !important;

background-color: #ffffff !important;

/* Border ist immer vorhanden und zunächst weiß */
border: 0.12em solid #ffffff !important;
border-radius: 999px !important;

color: var(--e-global-color-text) !important;
cursor: pointer !important;

transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}

/* Bisheriges Checkbox-Symbol ausblenden */
.jet-checkboxes-list__decorator {
display: none !important;
}

/* Beschriftung */
.jet-checkboxes-list__label {
color: inherit !important;
font-size: inherit !important;
font-weight: 700 !important;
line-height: 1 !important;
}

/* Hover */
.jet-checkboxes-list__item:hover .jet-checkboxes-list__button {
border-color: var(--e-global-color-primary) !important;
transform: translateY(-0.05em);
}

/* Aktiv / ausgewählt */
.jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
background-color: var(--e-global-color-primary) !important;
border-color: var(--e-global-color-primary) !important;

color: #ffffff !important;
}

/* Fokus per Tastatur */
.jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button {
outline: 0.15em solid var(--e-global-color-primary) !important;
outline-offset: 0.15em !important;
}

/* --------------------------------------------------
JetSmartFilters – Darkmode
-------------------------------------------------- */

html.darkmode .jet-checkboxes-list__button,
body.darkmode .jet-checkboxes-list__button {
background-color: var(--e-global-color-secondary) !important;
border-color: var(--e-global-color-secondary) !important;

color: #ffffff !important;
}

/* Darkmode Hover */
html.darkmode
.jet-checkboxes-list__item:hover
.jet-checkboxes-list__button,
body.darkmode
.jet-checkboxes-list__item:hover
.jet-checkboxes-list__button {
border-color: var(--e-global-color-primary) !important;
}

/* Darkmode aktiv weiterhin grün */
html.darkmode
.jet-checkboxes-list__input:checked

* .jet-checkboxes-list__button,
  body.darkmode
  .jet-checkboxes-list__input:checked
* .jet-checkboxes-list__button {
  background-color: var(--e-global-color-primary) !important;
  border-color: var(--e-global-color-primary) !important;

color: #ffffff !important;
}

/* --------------------------------------------------
JetSmartFilters – Mobile
-------------------------------------------------- */

@media (max-width: 767px) {

.jet-checkboxes-list {
gap: 15px !important;
}
}




/* --------------------------------------------------
JetSmartFilters – Gap und Border zuverlässig erzwingen
-------------------------------------------------- */

/* Filter-Wrapper horizontal */
.jet-checkboxes-list,
.jet-checkboxes-list-wrapper {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;

column-gap: 1vw !important;
row-gap: 1vw !important;
}

/* Einzelne Filtereinträge */
.jet-checkboxes-list__row,
.jet-checkboxes-list__item {
display: inline-flex !important;
width: auto !important;
margin: 0 !important;
}

/* Normalzustand Lightmode */
.jet-checkboxes-list__button {
box-sizing: border-box !important;

background-color: #ffffff !important;
border-style: solid !important;
border-width: 0.2em !important;
border-color: #ffffff !important;
}

/* Hover */
.jet-checkboxes-list__item:hover .jet-checkboxes-list__button,
.jet-checkboxes-list__row:hover .jet-checkboxes-list__button {
border-color: var(--e-global-color-primary) !important;
}

/* Aktiv */
.jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
background-color: var(--e-global-color-primary) !important;
border-color: var(--e-global-color-primary) !important;
}

/* --------------------------------------------------
Darkmode
-------------------------------------------------- */

html.darkmode .jet-checkboxes-list__button,
body.darkmode .jet-checkboxes-list__button {
background-color: var(--e-global-color-secondary) !important;
border-color: var(--e-global-color-secondary) !important;
}

html.darkmode .jet-checkboxes-list__item:hover .jet-checkboxes-list__button,
html.darkmode .jet-checkboxes-list__row:hover .jet-checkboxes-list__button,
body.darkmode .jet-checkboxes-list__item:hover .jet-checkboxes-list__button,
body.darkmode .jet-checkboxes-list__row:hover .jet-checkboxes-list__button {
border-color: var(--e-global-color-primary) !important;
}

/* --------------------------------------------------
Mobile
-------------------------------------------------- */

@media (max-width: 767px) {

.jet-checkboxes-list,
.jet-checkboxes-list-wrapper {
column-gap: 15px !important;
row-gap: 15px !important;
}
}



.jet-checkboxes-list__button {
position: relative !important;
}

/* Aktiver Button: keine Breitenänderung */
.jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
padding-right: 1.2em !important;
}

/* Kleiner Kreis oben rechts */
.jet-checkboxes-list__input:checked + .jet-checkboxes-list__button::after {
content: "×";

position: absolute !important;
top: -0.35em !important;
right: -0.35em !important;
z-index: 2 !important;

width: 1.15em !important;
height: 1.15em !important;

display: flex !important;
align-items: center !important;
justify-content: center !important;

background-color: #ffffff !important;
border-radius: 50% !important;

color: var(--e-global-color-secondary) !important;
-webkit-text-fill-color: var(--e-global-color-secondary) !important;

font-size: 0.8em !important;
font-weight: 700 !important;
line-height: 1 !important;

box-shadow: 0 0 0 0.08em rgba(29, 47, 73, 0.12) !important;

pointer-events: none !important;
}

/* Darkmode */
html.darkmode
.jet-checkboxes-list__input:checked

* .jet-checkboxes-list__button::after,
  body.darkmode
  .jet-checkboxes-list__input:checked
* .jet-checkboxes-list__button::after {
  background-color: #ffffff !important;

color: var(--e-global-color-secondary) !important;
-webkit-text-fill-color: var(--e-global-color-secondary) !important;
}

/* X im aktiven Filterbutton – Lightmode dunkelblau */
html:not(.darkmode) body:not(.darkmode)
.jet-checkboxes-list__input:checked
+ .jet-checkboxes-list__button::after {
  color: var(--e-global-color-text) !important;
  -webkit-text-fill-color: var(--e-global-color-text) !important;
}





/* --------------------------------------------------
   Alle JetElements-Slider:
   Drag/Swipe und Pfeile nur ab 2 Slides
-------------------------------------------------- */

/* Bei nur einer Slide kein Ziehen/Wischen */
.jet-slider:not(:has(.sp-slide:nth-child(2))) .sp-mask,
.jet-slider:has(.sp-slide:only-child) .sp-mask {
  pointer-events: none !important;
  touch-action: auto !important;
  cursor: default !important;
}

/* Pfeile bei nur einer Slide ausblenden */
.jet-slider:not(:has(.sp-slide:nth-child(2))) .sp-arrows,
.jet-slider:has(.sp-slide:only-child) .sp-arrows {
  display: none !important;
}






/* --------------------------------------------------
   JetElements Slider – Pfeile exakt vertikal mittig
-------------------------------------------------- */

.jet-slider .sp-arrows {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  margin-top: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

.jet-slider .sp-arrow {
  top: 50% !important;
  bottom: auto !important;
  margin-top: 0 !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
}






/* --------------------------------------------------
   Referenzslider – Pagination
-------------------------------------------------- */

.referenzenslider .jet-engine-swiper-pagination-wrapper {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;
  height: auto !important;

  margin: 1.5vw 0 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: none !important;
  z-index: 30 !important;

  --swiper-pagination-bullet-size: 0.4em !important;
  --swiper-pagination-bullet-width: 0.4em !important;
  --swiper-pagination-bullet-height: 0.4em !important;
  --swiper-pagination-bullet-horizontal-gap: 0.3em !important;
  --swiper-pagination-bullet-inactive-opacity: 1 !important;
}


/* --------------------------------------------------
   Grundform aller Bullets
-------------------------------------------------- */

.referenzenslider
.jet-engine-swiper-pagination-wrapper
.swiper-pagination-bullet {
  width: 0.4em !important;
  min-width: 0.4em !important;
  height: 0.4em !important;
  min-height: 0.4em !important;

  margin: 0 0.3em !important;
  padding: 0 !important;

  flex: 0 0 auto !important;

  border: 0 !important;
  border-radius: 999px !important;

  box-shadow: none !important;
  opacity: 1 !important;

  transition:
    width 0.3s ease,
    min-width 0.3s ease,
    background-color 0.3s ease !important;
}


/* --------------------------------------------------
   Lightmode – inaktive Bullets blau
-------------------------------------------------- */

html:not(.darkmode) body:not(.darkmode)
.referenzenslider
.jet-engine-swiper-pagination-wrapper
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background: var(--e-global-color-text) !important;
  background-color: var(--e-global-color-text) !important;
  opacity: 1 !important;
}


/* --------------------------------------------------
   Darkmode – inaktive Bullets weiß
-------------------------------------------------- */

html.darkmode
.referenzenslider
.jet-engine-swiper-pagination-wrapper
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active),
body.darkmode
.referenzenslider
.jet-engine-swiper-pagination-wrapper
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}


/* --------------------------------------------------
   Aktiver Bullet – immer grün
-------------------------------------------------- */

.referenzenslider
.jet-engine-swiper-pagination-wrapper
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 1.2em !important;
  min-width: 1.2em !important;
  height: 0.4em !important;

  background: var(--e-global-color-primary) !important;
  background-color: var(--e-global-color-primary) !important;

  opacity: 1 !important;
  border-radius: 999px !important;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 767px) {

  .referenzenslider .jet-engine-swiper-pagination-wrapper {
    margin-top: 15px !important;
  }
}