/*VARIABLEN-----------------------------
----------------------------------------*/

:root{
  /*Farben*/
  --color-lightgreen: #F2F9E9;
  --color-green:      #A8C142;
  --color-black:      #1E1F1F;
  --color-lightgrey:  #F3F3F2;
  --color-darkgrey:   #3B3B3A;
  --color-white:      #FFFFFF;
  
  --gradient-lightgrey:   linear-gradient(102deg, #6C6B6B 14.67%, #889091 78.52%);
  --gradient-darkgrey:    linear-gradient(114deg, #212323 0%, #828889 100%);
  --gradient-white-left:  linear-gradient(315deg, #FFF 47.31%, #F5F5F5 72.98%);
  --gradient-white-right: linear-gradient(68deg, #FFF 46.47%, #F5F5F5 65.94%);
  --gradient-green:       linear-gradient(180deg, #A8C142 40.38%, #E0F380 100%);
  
  /*Schatten*/
  
  --box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25);
  
  /*Änderungen Contao Variblen:*/
  
  --contentBoxedWidth: 1440px;
  --contentPaddingLeftRight: 64px;
  
  /*Standard Größe des BG-Circle*/
  
  --bg-circle-width: 176px;
  
  interpolate-size: allow-keywords;
  
}

@media only screen and (min-width: 768px) and (max-width: 1023px){
  :root{
      --contentPaddingLeftRight: 48px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px){
  :root{
      --contentPaddingLeftRight: 24px;
  }
}

@media only screen and (max-width: 480px){
  :root{
      --contentPaddingLeftRight: 12px;
  }
}


/*GLOBALE EINSTELLUNGENN#################################
#########################################################*/

/* philosopher-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kunde/philosopher-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* philosopher-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/kunde/philosopher-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kunde/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/kunde/open-sans-v44-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/kunde/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/kunde/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*Verhindern des Scroll bugs auf mobil geräten
-------------------------------------------*/
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip; /* clip verhindert im Gegensatz zu hidden kleine Ruckler */
}

/*Styleguide---------------------------
----------------------------------------*/

.styleguide_swatch{
  width:150px;
  height:150px;
  border-radius: 999px;
  border: solid 1px black;
}

/*Typografie----------------------------
----------------------------------------*/
:is(h1, .h1, h2, .h2, h3, .h3){
  hyphens: none;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

/*Überschriften*/
h1,.h1{
  font-family: Philosopher;
  font-weight: 700;
  line-height: 1.1;
}

h2,.h2{
  font-family: Philosopher;
  font-weight: 700;
  line-height: 1.1;
}

/*Underline h2 und label*/
h2.decoline::after,.h2.decoline::after,
h3.decoline::after,.h3.decoline::after{
  content: "";
  display:block;
  height: 3px;
  width: 192px;
  background-color: var(--color-green);
  margin-top: 8px;
}

h2.decoline-grey::after,.h2.decoline-grey::after,
h3.decoline-grey::after,.h3.decoline-grey::after{
  background-color: var(--color-darkgrey);
}

.typo-label.decoline::after{
  content: "";
  display:block;
  height: 3px;
  width: 64px;
  background-color: var(--color-green);
  margin-top: 2px;
}

h2.decoline.h-align-center::after,
.h2.decoline.h-align-center::after,
h3.decoline.h-align-center::after,
.h3.decoline.h-align-center::after,
.typo-label.decoline.h-align-center::after{
  margin-left: auto;
  margin-right: auto;
}

h3,.h3{
  font-weight: 700;
  line-height: 1.1;
}

h4,.h4{
  font-weight: 600;
}

.typo-label{
  font-weight:500;
  text-transform: uppercase;
}
/*Absatz Large*/

.ce_text.format-p-large p,
.ce_text.format-p-large ul,
.ce_text.format-p-large ol{
  font-weight: 600;
}

/*Aufzählung CustomStyle-1*/
.ce_list.customStyle1 li::before{
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  left: -30px;
  top: 13px;
  background-image: url("../../Kunde/2_Icons/list-symbol.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.ce_list.customStyle1 li:first-child::before {
  top: 8px;
}
/*Änderung Farbe list icon auf grünem BG*/
.bg-gradient-green .ce_list.customStyle1 li::before{
    background-image: url("../../Kunde/2_Icons/list-symbol-dunkelgrau.svg");
}

/*ANPASSUNGEN MAXIMALE CONTENT BREITE*------
---------------------------------------------*/
.article,.mod_article{
  max-width: var(--contentBoxedWidth);
  margin-left: auto;
  margin-right: auto;
}

/*ANPASSUNGEN SEKTIONS ABSTÄNDE MOBILE*--------------
---------------------------------------------*/
@media only screen and (max-width: 767px) {
    .mod_article:not(.fullwidth).article-pb > .container {
        padding-bottom: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .mod_article:not(.fullwidth).article-pt > .container {
        padding-top: 80px;
    }
}


/*HILFSKLASSEN###########################################
#########################################################*/

/*Hintergrundfarben*/
.bg-white{background-color: var(--color-white)!important;}
.bg-lightgrey{background-color: var(--color-lightgrey)!important;}
.bg-darkgrey{background-color: var(--color-darkgrey)!important;}
.bg-green{background-color: var(--color-green)!important;}

/*Hintergrund Verläufe*/
.bg-gradient-lightgrey{background: var(--gradient-lightgrey)!important;}
.bg-gradient-darkgrey{background: var(--gradient-darkgrey)!important;}
.bg-gradient-white-left{background: var(--gradient-white-left)!important;}
.bg-gradient-white-right{background: var(--gradient-white-right)!important;}
.bg-gradient-green{background: var(--gradient-green)!important;}

/*Schriftfarben*/
.text-white,
.text-white :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,p,li){
  color: var(--color-white)!important;
  
}

.text-lightgrey,
.text-lightgrey :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,p,li){
  color: var(--color-lightgrey)!important;
  
}

.text-darkgrey,
.text-darkgrey :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,p,li){
  color: var(--color-darkgrey)!important;
  
}

.text-green,
.text-green :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,p,li){
  color: var(--color-green)!important;
  
}

.text-black,
.text-black :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,p,li){
  color: var(--color-black)!important;
}

.text-green,
.text-green :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,p,li){
  color: var(--color-green)!important;
}

/*Schatten*/
.box-shadow{
  box-shadow: var(--box-shadow);
}

/*positions Klassen*/
.position-relative{
  position: relative;
}

/*Grüner Kreis im Hintergrund mittig im Container*/

.bg-circle::before{
  content: "";
  background-image: url(../../Kunde/3_Grafiken/bg_circle.svg);
  width: var(--bg-circle-width);
  height: var(--bg-circle-width);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 767px){
   .bg-circle::before{
    width: 50%;
    height: 90%;
    top: 50%;
    right: 0%;
    left: unset;
    transform: translate(15%, -50%);
  }
}

/*Grüne Sinuswelle im Hintergrund des Containers*/
.bg-wave-green::before{
  content: "";
  background-image: url(../../Kunde/3_Grafiken/sinus_kurve_2.svg);
  width: 100%;
  height: 161px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.2;
}
/*graue Sinuswelle im Hintergrund des Containers*/
.bg-wave::before{
  content: "";
  background-image: url(../../Kunde/3_Grafiken/sinus_kurve_hellgrau.svg);
  width: 100%;
  height: 161px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.35;
}


/*ANPASSUNGEN INHALTSELEMENTE################################
############################################################*/

/*Buttons-------------------------------
----------------------------------------*/
.ce_hyperlink-extended[class*="btn"]{
  overflow: visible;
}
.ce_hyperlink-extended[class*="btn"] a{
  padding: 8px 32px;
  box-shadow: var(--box-shadow);
  overflow: visible;
  font-weight: 600;
}

/*Hover Effekt*/
.ce_hyperlink-extended a:hover, a.btn:hover {
    transform: scale(1.05) translateY(-5px);
    opacity: 1;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
}

/*Aussehen Farbe Accent*/
.ce_hyperlink-extended[class*="btn-accent"] a{
  color: var(--color-black);
}

/*Aussehen Farbe Schwarz: Outline*/
.ce_hyperlink-extended[class*="btn-black-outline"] a{
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid white;
}

/*Multi Contact Button*/

.multi-contact-button_wrapper {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 0fr);
  gap: 0px;
  overflow: hidden;
  transition: grid-template-columns 0.3s ease-out, gap 0.3s ease-out;
  height: 66px;
  align-items: start;
  vertical-align: top;
}

.multi-contact-button_wrapper:hover {
  grid-template-columns: auto auto; 
  gap: 24px; 
  overflow: visible; 
}

.multi-contact-button_initial,
.multi-contact-button_popin:nth-of-type(2) {
  grid-column: 1;
  grid-row: 1;
}

.multi-contact-button_popin:nth-of-type(3) {
  grid-column: 2;
  grid-row: 1;
}

[class*="multi-contact-button"]{
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out,box-shadow 0.3s ease-out;
  margin: 0!important;
}
[class*="multi-contact-button"] a{
  margin:0!important;
}

.multi-contact-button_popin a{
  box-shadow: unset;
}
.multi-contact-button_popin{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  pointer-events: none
}


.multi-contact-button_wrapper:hover .multi-contact-button_initial {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.multi-contact-button_wrapper:hover .multi-contact-button_popin {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.multi-contact-button_wrapper:hover .multi-contact-button_popin a{
  box-shadow: var(--box-shadow);
}

/*ANPASSUNGEN AUTOGRID*-----------------------
---------------------------------------------/

/*Spaltenabstand L = 64px Gap*/
.autogrid_wrapper.gutter_l, .autogrid_row.gutter_l {
    margin-left: -32px;
    margin-right: -32px;
}
.autogrid_wrapper.gutter_l>div, .autogrid_row.gutter_l>div {
    padding-left: 32px;
    padding-right: 32px;
}

/*Spaltenabstand M = 48px Gap*/
.autogrid_wrapper.gutter_m, .autogrid_row.gutter_m {
    margin-left: -24px;
    margin-right: -24px;
}
.autogrid_wrapper.gutter_m>div, .autogrid_row.gutter_m>div {
    padding-left: 24px;
    padding-right: 24px;
}

/*abschalten gap bei mobile*/

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

/*ANPASSUNGEN HEADER - MAINMENU + FOOTER*--------------
---------------------------------------------------*/

#header,
#footer,
#bottom{
  max-width: var(--contentBoxedWidth);
  margin-left: auto;
  margin-right: auto;
}
body.fixed-header .stickyheader {
  max-width: var(--contentBoxedWidth);
  left: 50%;
  right: 50%;
  top: 0;
  transform: translateX(-50%);
}

/*Mainmenu*/
.header :is(.mod_search, .mod_langswitcher){
  display: none;
}
.mainmenu li a span{
  font-weight:600;
}

.header .mod_navigation.mainmenu ul.level_1{
  background-color: var(--color-lightgrey);
  border-radius: 999px;
  padding: 0px 24px;
  height: 66px;
  display: flex;
  align-items:center;
  gap: 0px;
}
.header .inside{
  padding: 12px var(--contentPaddingLeftRight);
}
.header .mod_navigation.mainmenu{
  margin-top: 3px;
}
.header:not(.cloned) .mod_navigation.mainmenu{
  margin-top: 10px;
}
/*Dropdown Menu*/
.header .mod_navigation.mainmenu .level_2 li a.active span,
.header .mod_navigation.mainmenu .level_3 li a.active span{
  font-weight: 700;
}
.header .mod_navigation.mainmenu .level_2 li a span,
.header .mod_navigation.mainmenu .level_3 li a.active span{
  font-weight: 400;
}

/*Mobile Menu*/
.mmenu_trigger{
  right: 30px;
}
.mmenu_trigger .label{
  display: none;
}

.mmenu_trigger .burger .burger_lines, .mmenu_trigger .burger .burger_lines:after, .mmenu_trigger .burger .burger_lines:before {
    background: var(--color-black);
}
/*Footer*/
#footer :is(a , .h3, h3) {
    color: var(--color-white);
}

#bottom :is(.inside, .inside a){
  color: var(--color-white);
  opacity: 0.8;
} 

#footer a{
  transform: scale(1);
  transition: transform 0.3s ease;
  display: block;
}

#footer a:hover:not(.ce_hyperlink a){
    color: var(--color-white);
    transform: scale(1.05);
}

/*ce_image---------------------
-----------------------------*/

.ce_image.content_image{
  box-shadow: var(--box-shadow);
  border-radius: 12px;
}
.ce_image.content_image .image_container img{
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.ce_image.content_image-cover,
.ce_image.content_image-cover .image_container{
  height: 100%;
}
.ce_image.content_image-cover img{
  object-fit: cover;
}
/*ce_iconbox---------------------
-------------------------------*/

/*Weiß Links + rechts*/
.ce_iconbox.style1{
  padding: 48px 48px;
  border-radius: 12px;
}


.ce_iconbox.style1 .ce_iconbox_cwrapper .content{
  margin-top: 6px;
}

.ce_iconbox.style1 .ce_iconbox_cwrapper{
  margin-top: 24px;
}

/*Kontaktbox icon oben*/
.ce_iconbox.style2 a.link{
  text-decoration: underline;
  margin-top: 0px;
}
.ce_iconbox.style2 a.link:before{
  display: none!important;
}
.ce_iconbox.style2 .ce_iconbox_cwrapper{
  margin-top: 0px!important;
}

/*kontaktbox icon links*/
.ce_iconbox.style3{
  transition: transform 0.3s ease-out;
}
.ce_iconbox.style3 .ce_iconbox_icon{
  align-self: unset;
}

.ce_iconbox.style3 a.link,
.ce_iconbox.style3 a{
  text-decoration: underline;
  margin-top: 0px;
  transition: transform 0.3s ease-out;
}
.ce_iconbox.style3 a.link:hover{
  transform: scale(1.05);
}

/*ce_leadertext-------------
--------------------------*/

.ce_leadertext.custom-1{
  padding: 16px 12px 16px 48px!important;
  border-radius: 12px;
}

@media only screen and (max-width: 767px){
  .ce_leadertext.custom-1{
    padding: 16px 24px 16px 24px!important;
}

}
.ce_leadertext.custom-1 .divider{
  display: none;
}

.ce_leadertext.custom-1 .headline{
  margin-bottom: 6px;
}
.ce_leadertext.custom-1 p{
  font-size: var(--body-fontsize);
}

/*Teaserbox-----------------------
--------------------------------*/

.ce_teaserbox.image_left{
  width: 100%;
  height: 400px;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  transition: transform 300ms ease;
}
.ce_teaserbox.image_left:hover{
  transform: scale(1.05);
}
.ce_teaserbox.image_left .ce_teaserbox_inside{
  width: 100%;
  height: 100%;
}

.ce_teaserbox.image_left .image_wrapper{
  width:100%;
  height: 400px;
  position: absolute;
  inset: 0;
}

.ce_teaserbox.image_left .image_wrapper img{
  height: 400px;
  object-fit: cover;
}

.ce_teaserbox.image_left .text_wrapper{
  display:flex;
  align-items: flex-end;
  position: absolute;
  left: 0px;
  right: 5%;
  bottom: 0px;
}

.ce_teaserbox.image_left .text_wrapper .margins{
  padding: 16px 24px 18px 24px;
  background: var(--gradient-green);
  border-radius: 0px 999px 999px 0px;
  width: 100%;
}

.ce_teaserbox.image_left .text_wrapper .margins a{ 
  padding: 0px;
  margin: 0px;
  background: transparent;
  color: var(--color-black);
  font-weight: 400;
  opacity: 1;
}

.ce_teaserbox.image_left .text_wrapper .margins a:hover{
  opacity: 1;
  transform: scale(1.05);
}

.ce_teaserbox.image_left .text_wrapper .margins .ce_hyperlink{ 
  margin: 0px;
}

.ce_teaserbox.image_left .text_wrapper .margins .headline{
  margin-bottom: 8px;
}

/*umbruch auf 2 spalten*/
@media screen and (min-width: 1024px) and (max-width: 1280px){
  .autogrid_row.teaserbox-grid .col_3{
    flex: 0 0 calc((100% / 12) * 6);
    max-width: calc((100% / 12) * 6);
  }
  .autogrid_row.teaserbox-grid .col_3:is(:nth-child(1), :nth-child(2)){
    margin-bottom: 32px;
  }
}

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

.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text {
    background: transparent;
    color: var(--text-black);
    box-shadow: none;
    padding: 0;
    text-align: center;
}

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

.ce_testimonial_slider[data-style="style1"] .swiper-pagination-bullet {
    width: 30px!important;
    height: 30px!important;
    border-radius: 999px;
    border: 1px solid black;
    opacity: 1!important;
    background: transparent!important;
    
}
.ce_testimonial_slider[data-style="style1"] .swiper-content .image_container img {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    display: inline-block;
    box-shadow: none;
}
.ce_testimonial_slider[data-style="style1"] .swiper-content .name {
    font-size: 1.2em;
    line-height: 1.5em;
    font-weight: 600;
    color: var(--color-black);
    text-align: center;
}
.ce_testimonial_slider[data-style="style1"] .swiper-content .info {
    font-size: 1em;
    line-height: 1.5em;
    color: var(--color-black);
}

.ce_testimonial_slider[data-style="style1"] .swiper-pagination-bullet-active {
    background: var(--accentColor)!important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 6px!important;
}

/*Elementgruppe------------------
--------------------------------*/

/*elementgruppe-card*/
.content-element-group.elementgruppe-card{
  padding: 48px!important;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
}
.content-element-group.elementgruppe-card-slim{
  padding: 32px 48px!important;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 480px){
  .content-element-group.elementgruppe-card{
    padding: 24px!important;
  }
  .content-element-group.elementgruppe-card-slim{
    padding: 24px 24px!important;
  }
}

/*Tarif Karten*/
.content-element-group.elementgruppe-card-tarife{
  padding: 48px 32px!important;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease-out;
}
.content-element-group.elementgruppe-card-tarife:hover{
 transform: scale(1.05);
}

/*umbruch auf 2 spalten*/
@media screen and (min-width: 1024px) and (max-width: 1160px){
  .autogrid_row.card-tarife-grid .col_4{
    flex: 0 0 calc((100% / 12) * 6);
    max-width: calc((100% / 12) * 6);
  }
  .autogrid_row.card-tarife-grid .col_4:nth-child(3){
    margin-top: 48px!important;
    margin-left: auto!important;
    margin-right: auto!important;
  }
}
/*Sektion Teambilder-------------
--------------------------------*/

/*Darstellung Teambox*/
.ce_teambox.round_image{
  overflow: visible;
}

.ce_teambox.round_image .image_container img {
    border-radius: 100%;
    border: none;
    position: relative;
    transition: filter 0.3s ease, transform 0.3s ease ;
}
.ce_teambox.round_image .image_container{
  position: relative;
  
}

.ce_teambox.round_image .name{
  font-size: var(--h3-fontSize);
  font-weight: 700;
}

.ce_teambox.round_image .function{
  font-size:  var(--paragraph-large-font-size);
  font-weight: 400;
}

/*schmuck-ring aussen*/
.ce_teambox.round_image .image_container::before {
    content: "";
    position: absolute;
    inset: -12px; /*Abstand des Ringes*/
    
    border-radius: 50%;

    background: conic-gradient(
        from 285deg, /*Startwinkel des Ringes*/
        transparent 0deg,
        transparent 10deg,
        #a4c437 10deg,
        #a4c437 190deg,
        transparent 190deg,
        transparent 360deg
    );

    /* macht aus der Fläche einen dünnen Ring */
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 4px),
        #000 calc(100% - 4px)
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 4px),
        #000 calc(100% - 4px)
    );

    z-index: 10;
}

/*Filter Gruppe*/
.section-teambilder-filter{
/*  position: relative;*/
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
}

.section-teambilder-filter button{
  background: var(--gradient-white-left);
  font-size: 18px;
  font-weight: 500;
  display: inline-block;
  padding: 12px;
  color: black;
  border: 1px solid black;
  cursor: pointer;
}

.section-teambilder-filter button.filter-active{
  box-shadow: none;
  background: var(--gradient-green);
}

.section-teambilder-filter button:first-child{
  padding-right:12px;
  position:relative;
  border-radius: 12px 0px 0px 12px;
}

.section-teambilder-filter button:last-child{
  padding-left:12px;
  border-radius: 0px 12px 12px 0px;
}

/*funktionsweise des Filters*/
/*Keiner oder beide Filter aktiv*/
.section-teambilder:not(.filter-bochum,.filter-hagen) :is(.hagen img, .bochum img),
.section-teambilder:is(.filter-bochum.filter-hagen) :is(.hagen img, .bochum img){
 transform: scale(1);
 filter: none;
}

/*Hagen aktiv*/
.section-teambilder.filter-hagen:not(.filter-bochum) .bochum img{
  transform: scale(0.9);
  filter: blur(4px);
}

.section-teambilder.filter-hagen:not(.filter-bochum) .ce_teambox.round_image.bochum .image_container::before{
  display:none;
}

.section-teambilder.filter-bochum:not(.filter-hagen) .hagen{
  order: 1;
}

.section-teambilder.filter-bochum:not(.filter-hagen) .bochum{
  order: 2;
}

/*Bochum aktiv*/
.section-teambilder.filter-bochum:not(.filter-hagen) .hagen img{
  transform: scale(0.9);
  filter: blur(4px);
}

.section-teambilder.filter-bochum:not(.filter-hagen) .bochum{
  order: 1;
}

.section-teambilder.filter-bochum:not(.filter-hagen) .ce_teambox.round_image.hagen .image_container::before{
  display:none;
}

.section-teambilder.filter-bochum:not(.filter-hagen) .hagen{
  order: 2;
}

/*FAQ AKKORDEON-----------------
--------------------------------*/
.custom-akkordeon{
  border-bottom: unset;
}

.custom-akkordeon .handorgel__content{
  box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
  transition: height 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
  opacity: 0;
  transform: translateY(-32px);
  margin-bottom: 24px;
}
.handorgel__content__inner{
  padding: 42px 24px 24px 24px;
}
.custom-akkordeon .handorgel__header:not(first-child){
  margin-top: 24px;
}
.custom-akkordeon .handorgel__header__button{
  border-radius: 200px 999px 999px 200px;
  font-family:'Open Sans';
  font-size: var(--paragraph-large-font-size);
  font-weight: 600;
  border-top: unset;
  position: relative;
  z-index: 10;
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
}

/*Akkordeon Icon*/
.custom-akkordeon .handorgel__header__button::before {
    content: "";
    display: block;

    width: 20px;
    height: 20px;
    margin-right: 10px;

    mask-image: url("../..//Kunde/2_Icons/akkordeon_closed.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image: url("../..//Kunde/2_Icons/akkordeon_closed.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/*austausch icon wenn geöfnet*/
.custom-akkordeon .handorgel__header--opened .handorgel__header__button::before{
    mask-image: url("../..//Kunde/2_Icons/akkordeon_open.svg");
    -webkit-mask-image: url("../..//Kunde/2_Icons/akkordeon_open.svg");
}

/*farbeinstellungen*/
.akkordeon-color-green .handorgel__header__button::before{
  background-color: var(--color-darkgrey);
}
.akkordeon-color-green .handorgel__header__button{
  background: var(--gradient-green);
}

.akkordeon-color-darkgrey .handorgel__header__button::before{
  background-color: var(--color-white);
}
.akkordeon-color-darkgrey .handorgel__header__button{
  background: var(--gradient-darkgrey);
  color: var(--color-white);
}

/*content wenn geöffnet*/
.custom-akkordeon .handorgel__content--open {
    width: 100%;
    border-top: unset;
    box-shadow: var(--box-shadow);
    border-radius: 0px 0px 12px 12px;
    opacity: 1;
}

/*Animationsverhalten*/
/*.custom-akkordeon[class*="scroll-fade"]{
  animation-name: unset;
}
.custom-akkordeon.scroll-fade-left .handorgel__header__button,
.custom-akkordeon.scroll-fade-left .handorgel__content--open{
  animation-name: scroll-fade-left;
  animation-timeline: view(70% 0%);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-range: entry 0% contain 50%;
}
*/
/*FORMULARE-----------------
--------------------------------*/
.ce_form{
  border-radius: 12px;
  background: var(--gradient-darkgrey);
  box-shadow: var(--box-shadow);
  padding: 24px;
}

.ce_form form{
  background: transparent;
}

.ce_form form.style2 input,
.ce_form form.style2 textarea{
  border-radius: 6px;
}

.ce_form .widget:not(.widget-checkbox) label{
  color: var(--color-white);
  font-size: var(--body-fontsize);
  font-weight: 600;
}

.ce_form .widget.widget-checkbox label{
  font-size: 14px;
  color: var(--color-white);
}

.ce_form form fieldset{
  border: unset;
}
/*Submit button*/
.ce_form form.style2 button.submit{
  color: black;
  font-size: 18px;
  padding: 8px 32px;
  box-shadow: var(--box-shadow);
  overflow: visible;
  font-weight: 600;
  transition: transform 0.3s ease-out;
}
.ce_form form.style2 button.submit:hover {
    transform: scale(1.05) translateY(-5px);
    opacity: 1;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
}
/*Headline*/
.ce_form .title{
  font-family: 'Philosopher';
  font-size: var(--h3-fontSize);
  font-weight: 700;
}

/*Datenschutz*/
.ce_form form.style2 .widget-checkbox label{
  line-height: 1.4;
}
.ce_form form.style2 .widget-checkbox span{
  align-items: flex-start;
}
.ce_form form.style2 input[type="checkbox"]{
  margin-top: 0.2em;
  margin-right: 12px;
}
/*checkbox*/
.ce_form form.style2 .widget-checkbox input{
  width: 16px!important;
  height: 16px!important;
  appearance: none;
  flex-shrink: 0;
  transition: transform 0.3s ease-out;
  border-radius: 0px;
}
.ce_form form.style2 .widget-checkbox input:checked{
  appearance: auto;
}
/*ANIMATIONEN####################################
#################################################*/

/*hover effekt*/
.hover-scale{
  transition: transform 0.3s ease-out;
}
.hover-scale:hover{
  transform: scale(1.05);
}
/*on-scroll-fade effekte*/
[class*="scroll-fade"]{
  animation-timeline: view();
  animation-fill-mode: both;
  animation-duration: 1ms;
  view-timeline-axis: block;
  animation-iteration-count: 1;
  animation-range: entry 0% contain 50%
}

.scroll-fade-left{
  animation-name: scroll-fade-left;
  animation-timeline: view(70% 0%);
  animation-fill-mode: both;
  animation-duration: 1ms;
  view-timeline-axis: block;
  animation-iteration-count: 1;
  animation-range: entry 0% contain 50%
}

.scroll-fade-right{
  animation-name: scroll-fade-right;
  animation-timeline: view(70% 0%);
  animation-fill-mode: both;
  animation-duration: 1ms;
  view-timeline-axis: block;
  animation-iteration-count: 1;
  animation-range: entry 0% contain 50%
}

.scroll-fade-down{
  animation-name: scroll-fade-down;
  animation-timeline: view(70% 0%);
  animation-fill-mode: both;
  animation-duration: 1ms;
  view-timeline-axis: block;
  animation-iteration-count: 1;
  animation-range: entry 0% contain 50%
}

.scroll-fade-up{
  animation-name: scroll-fade-up;
  animation-timeline: view(70% 0%);
  animation-fill-mode: both;
  animation-duration: 1ms;
  view-timeline-axis: block;
  animation-iteration-count: 1;
  animation-range: entry 0% contain 50%
}

.scroll-fade-in{
  animation-name: scroll-fade-in;
  animation-timeline: view(70% 0%);
  animation-fill-mode: both;
  animation-duration: 1ms;
  view-timeline-axis: block;
  animation-iteration-count: 1;
  animation-range: entry 0% contain 50%
}

@keyframes scroll-fade-left{
  from{
    opacity: 0;
    transform: translateX(-20px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scroll-fade-right{
  from{
    opacity: 0;
    transform: translateX(20px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scroll-fade-down{
  from{
    opacity: 0;
    transform: translateY(-20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-fade-up{
  from{
    opacity: 0;
    transform: translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}