/* =========================================================

   joimax® WPBakery Accordion

   Accordion-Klasse: joimax-accordion-gradient

   ========================================================= */

 

#page .joimax-accordion-gradient {

  --joimax-primary: #0069b4;

  --joimax-secondary: #f59c00;

  --joimax-gradient-start: #1b5292;

  --joimax-gradient-end: #0069b4;

  --joimax-border: #d7e3ec;

  --joimax-text: #243746;

 

  font-family: inherit;

}

 

/* Abstand zwischen den Accordion-Tabs */

.joimax-accordion-gradient .vc_tta-panel {

  margin-bottom: 4px !important;

}

 

.joimax-accordion-gradient .vc_tta-panel:last-child {

  margin-bottom: 0 !important;

}

 

/* Äußere Titelzeile */

.joimax-accordion-gradient .vc_tta-panel-heading {

  overflow: hidden;

  margin: 0 !important;

  border: 0 !important;

  border-radius: 4px !important;

  background: transparent !important;

}

 

/* Überschrift zurücksetzen */

.joimax-accordion-gradient .vc_tta-panel-title {

  margin: 0 !important;

  padding: 0 !important;

  line-height: 1 !important;

}

 

/* =========================================================

   Titel und zweifarbiger Verlauf

   ========================================================= */

 

.joimax-accordion-gradient

.vc_tta-panel

.vc_tta-panel-title > a {

  position: relative;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

 

  box-sizing: border-box !important;

  width: 100%;

  min-height: 47px;

  padding: 0 40px !important;

 

  color: #fff !important;

  background-color: var(--joimax-primary) !important;

 

  /* Nur zwei Farben: dunkelblau nach hellblau */

  background-image: linear-gradient(

    90deg,

    var(--joimax-gradient-start) 0%,

    var(--joimax-gradient-end) 100%

  ) !important;

 

  background-repeat: no-repeat !important;

  background-position: 0% 50% !important;

  background-size: 160% 100% !important;

 

  font-family: inherit !important;

  font-size: 15px;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  text-align: center !important;

  text-decoration: none !important;

 

  transition:

    background-position 350ms ease,

    color 180ms ease !important;

}

 

/* Titeltext exakt zentrieren */

.joimax-accordion-gradient

.vc_tta-panel-title

.vc_tta-title-text {

  position: static !important;

  top: auto !important;

 

  display: inline-block !important;

  margin: 0 !important;

  padding: 0 !important;

 

  font-family: inherit !important;

  font-size: inherit;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  text-align: center !important;

  vertical-align: middle !important;

 

  transform: none !important;

}

 

/* Verlaufsbewegung beim Hover und Tastaturfokus */

.joimax-accordion-gradient

.vc_tta-panel

.vc_tta-panel-title > a:hover,

.joimax-accordion-gradient

.vc_tta-panel

.vc_tta-panel-title > a:focus-visible {

  color: #fff !important;

  background-position: 100% 50% !important;

  text-decoration: none !important;

}

 

/* Tastaturfokus */

.joimax-accordion-gradient

.vc_tta-panel-title > a:focus-visible {

  z-index: 2;

  outline: 3px solid var(--joimax-secondary);

  outline-offset: 2px;

}

 

/* =========================================================

   Plus-/Minus-Symbol links

   ========================================================= */

 

.joimax-accordion-gradient .vc_tta-controls-icon {

  position: absolute !important;

  top: 50% !important;

  right: auto !important;

  bottom: auto !important;

  left: 14px !important;

 

  width: 12px !important;

  height: 12px !important;

  margin: 0 !important;

  padding: 0 !important;

 

  border: 0 !important;

  transform: translateY(-50%) rotate(0deg) !important;

  transform-origin: 50% 50% !important;

 

  transition: transform 320ms ease !important;

}

 

/* Gemeinsamer Reset der beiden Linien */

.joimax-accordion-gradient .vc_tta-controls-icon::before,

.joimax-accordion-gradient .vc_tta-controls-icon::after {

  content: "" !important;

  position: absolute !important;

  display: block !important;

 

  box-sizing: border-box !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

 

  background: #fff !important;

  opacity: 1;

}

 

/* Waagerechte Linie */

.joimax-accordion-gradient .vc_tta-controls-icon::before {

  top: 5px !important;

  right: auto !important;

  bottom: auto !important;

  left: 0 !important;

 

  width: 12px !important;

  height: 2px !important;

 

  transform: none !important;

}

 

/* Senkrechte Linie */

.joimax-accordion-gradient .vc_tta-controls-icon::after {

  top: 0 !important;

  right: auto !important;

  bottom: auto !important;

  left: 5px !important;

 

  width: 2px !important;

  height: 12px !important;

 

  transform: none !important;

  transition: opacity 220ms ease !important;

}

 

/* Geöffnet: Symbol dreht sich und Plus wird zu Minus */

.joimax-accordion-gradient

.vc_tta-panel.vc_active

.vc_tta-controls-icon {

  transform: translateY(-50%) rotate(180deg) !important;

}

 

.joimax-accordion-gradient

.vc_tta-panel.vc_active

.vc_tta-controls-icon::after {

  opacity: 0 !important;

}

 

/* =========================================================

   Inhaltsbereich

   ========================================================= */

 

.joimax-accordion-gradient .vc_tta-panel-body {

  padding: 14px 16px !important;

 

  color: var(--joimax-text);

  background: #fff !important;

  border: 1px solid var(--joimax-border) !important;

  border-top: 0 !important;

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

 

  font-family: inherit;

}

 

.joimax-accordion-gradient .vc_tta-panel-body > :first-child {

  margin-top: 0;

}

 

.joimax-accordion-gradient .vc_tta-panel-body > :last-child {

  margin-bottom: 0;

}

 

/* =========================================================

   Mobile Darstellung

   ========================================================= */

 

@media (max-width: 767px) {

  .joimax-accordion-gradient

  .vc_tta-panel

  .vc_tta-panel-title > a {

    min-height: 47px;

    padding-right: 36px !important;

    padding-left: 36px !important;

    font-size: 15px;

  }

 

  .joimax-accordion-gradient .vc_tta-controls-icon {

    right: auto !important;

    left: 12px !important;

  }

 

  .joimax-accordion-gradient .vc_tta-panel-body {

    padding: 12px 14px !important;

  }

}

 

/* =========================================================

   Reduzierte Bewegung

   ========================================================= */

 

@media (prefers-reduced-motion: reduce) {

  .joimax-accordion-gradient

  .vc_tta-panel

  .vc_tta-panel-title > a,

  .joimax-accordion-gradient

  .vc_tta-controls-icon,

  .joimax-accordion-gradient

  .vc_tta-controls-icon::after {

    transition: none !important;

  }

}