/* KONTUR CMS 0.6.0.75
   - Mitarbeiterstimmen + Bento-Galerie ohne eigene Modul-Surface: globaler Seitenhintergrund bleibt sichtbar.
   - Trennblock-Aurora nur auf der farbigen Fläche; Bild bleibt statisch und frei von der Animation.
*/

/* --------------------------------------------------------------------------
   Mitarbeiterstimmen / Bento-Galerie: keine große äußere Hintergrundkarte
   -------------------------------------------------------------------------- */
.career71-voices,
.cms-bento-gallery{
  background:transparent!important;
}

.career71-voices-surface,
.cms-bento-gallery-surface,
.career71-voices-surface.cms-theme-original,
.career71-voices-surface.cms-theme-blue,
.career71-voices-surface.cms-theme-navy,
.career71-voices-surface.cms-theme-graphite,
.career71-voices-surface.cms-theme-steel,
.career71-voices-surface.cms-theme-signal,
.career71-voices-surface.cms-theme-white,
.cms-bento-gallery-surface.cms-theme-original,
.cms-bento-gallery-surface.cms-theme-blue,
.cms-bento-gallery-surface.cms-theme-navy,
.cms-bento-gallery-surface.cms-theme-graphite,
.cms-bento-gallery-surface.cms-theme-steel,
.cms-bento-gallery-surface.cms-theme-signal,
.cms-bento-gallery-surface.cms-theme-white{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  overflow:visible!important;
  color:inherit!important;
}

/* Eine ggf. im Block aktivierte Aurora darf nicht wieder eine große Modulfläche
   erzeugen. Die einzelnen Stimmenkarten/Bilder bleiben die sichtbaren Elemente. */
.career71-voices-surface > .kontur-module-aurora,
.cms-bento-gallery-surface > .kontur-module-aurora{
  display:none!important;
}

.career71-voices-surface.cms-theme-animated,
.cms-bento-gallery-surface.cms-theme-animated{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Headertexte nutzen wieder die globale Typografie/Farbe statt einer Theme-Farbe. */
.career71-voices-surface .career71-voices-head,
.cms-bento-gallery-surface .cms-bento-gallery-head{
  color:var(--cms-text,#071d37)!important;
}
.career71-voices-surface .career71-voices-head h2,
.cms-bento-gallery-surface .cms-bento-gallery-head h2{
  color:inherit!important;
}
.career71-voices-surface .career71-voices-head > p,
.cms-bento-gallery-surface .cms-bento-gallery-head > p{
  color:inherit!important;
  opacity:.76!important;
}
.career71-voices-surface .kicker,
.cms-bento-gallery-surface .kicker{
  color:#0b63b6!important;
}

/* --------------------------------------------------------------------------
   Trennblock: Aurora ausschließlich auf der farbigen Fläche
   -------------------------------------------------------------------------- */
.sep62-animated{
  /* Basisfarbe darf über die ganze Section laufen; das Bild liegt darüber. */
  overflow:hidden!important;
}

/* Das Bild steht über Aurora und Grundverlauf und bleibt deshalb vollständig
   statisch / unverfälscht. Der Text bleibt oberhalb von beidem. */
.sep62-animated > .sep62-image{
  z-index:2!important;
}
.sep62-animated > .sep62-inner{
  z-index:4!important;
}

/* Bild links -> Aurora beginnt erst rechts neben dem Bild. */
.sep62-animated.sep62-image-left > .kontur-module-aurora{
  inset:-22% -8% -18% 42%!important;
  z-index:1!important;
}
/* Bild rechts -> Aurora endet vor dem Bild. */
.sep62-animated.sep62-image-right > .kontur-module-aurora{
  inset:-22% 42% -18% -8%!important;
  z-index:1!important;
}
/* Ohne Bild darf die komplette farbige Fläche animieren. */
.sep62-animated.sep62-image-none > .kontur-module-aurora{
  inset:-22% -8% -18%!important;
  z-index:1!important;
}
/* Bei einem vollflächigen Bild existiert keine separate Farbfläche. Deshalb
   bleibt das Bild komplett ruhig und die Aurora wird ausgeblendet. */
.sep62-animated.sep62-image-full > .kontur-module-aurora{
  display:none!important;
}

/* Mobile: Bild liegt bei links/rechts oberhalb des Textes. Nur der nachfolgende
   farbige Textbereich erhält die Aurora. */
@media(max-width:760px){
  .sep62-animated.sep62-image-left > .kontur-module-aurora,
  .sep62-animated.sep62-image-right > .kontur-module-aurora{
    inset:220px -16% -16% -16%!important;
  }
  .sep62-animated > .sep62-image{z-index:2!important}
  .sep62-animated > .sep62-inner{z-index:4!important}
}