/*
    --the7-accent-color:            var(--kj-color);
    --the7-links-color:           var(--kj-color);
    --the7-button-normal-bg-color:      var(--kj-color);
    --the7-button-hover-bg-color:       var(--kj-color-70p);
*/



:root {

    --kj-color1:          var(--kj-kjb-color1);
    --kj-color1-70p:      var(--kj-kjb-color1-70p);

    --kj-color2:          var(--kj-kjb-color2);
    --kj-color2-70p:      var(--kj-kjb-color2-70p);

    --kj-color3:          var(--kj-kjb-color3);
    --kj-color3-70p:      var(--kj-kjb-color3-70p);

    --kj-color4:          var(--kj-kjb-color4);
    --kj-color4-70p:      var(--kj-kjb-color4-70p);

    --kj-color5:          var(--kj-kjb-color5);
    --kj-color5-70p:      var(--kj-kjb-color5-70p);


    --kj-accent-color:     var(--kj-kjb-color1);
    --kj-accent-color-70p: var(--kj-kjb-color1-70p);


    --the7-accent-color:            var(--kj-accent-color);
    --the7-accent-bg-2:             var(--kj-kjb-color3);
    --the7-links-color:             var(--kj-accent-color);
    --the7-button-normal-bg-color:      var(--kj-accent-color);
    --the7-button-hover-bg-color:       var(--kj-accent-color-70p);
    --the7-accent-gradient: 135deg, var(--kj-accent-color-70p) 30%, var(--kj-accent-color) 100%;



}


.accent-bg,
.bg-accent
{
  background-color: var(--kj-accent-color);
}


.bg-color1, .bg-blau:not(.vc_column_container), .bg-blau.vc_column_container > .vc_column-inner
{
  background-color: var(--kj-color1);
}

.bg-color2, .bg-pink:not(.vc_column_container), .bg-pink.vc_column_container > .vc_column-inner
{
  background-color: var(--kj-color2);
}

.bg-color3, .bg-cyan:not(.vc_column_container), .bg-cyan.vc_column_container > .vc_column-inner
{
  background-color: var(--kj-color3);
}

.bg-color4, .bg-gelb:not(.vc_column_container), .bg-gelb.vc_column_container > .vc_column-inner
{
  background-color: var(--kj-color4);
}

.bg-color5, .bg-rot:not(.vc_column_container), .bg-rot.vc_column_container > .vc_column-inner
{
  background-color: var(--kj-color5);
}

/* ------------ */

.bg-color4.contrast-text *, .bg-gelb.contrast-text *
{
  color: var(--kj-kjb-color1) !important;

}

.bg-color3.contrast-text *, .bg-cyan.contrast-text *,
.bg-color1.contrast-text *, .bg-blau.contrast-text *,
.bg-color2.contrast-text *, .bg-pink.contrast-text *,
.bg-color5.contrast-text *, .bg-rot.contrast-text *
{
  color: #ffffff !important;
}
/* ------------ */

.bg-color3 .dt-btn, .bg-cyan .dt-btn,
.bg-color1 .dt-btn, .bg-blau .dt-btn,
.bg-color2 .dt-btn, .bg-pink .dt-btn,
.bg-color5 .dt-btn, .bg-rot .dt-btn,
.footer-teaser-section.no-textbox .dt-btn
{
  color: #ffffff !important;
  /* background: transparent !important; */
  background-color: transparent !important;
  /*
}
.bg-color2 .dt-btn:after, .bg-pink .dt-btn:after
{
  */
  background-image: url(../images/buttonshape_ffffff.svg) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 100% !important;  
}

.bg-color3 .dt-btn:hover, .bg-cyan .dt-btn:hover,
.bg-color1 .dt-btn:hover, .bg-blau .dt-btn:hover,
.bg-color2 .dt-btn:hover, .bg-pink .dt-btn:hover,
.bg-color5 .dt-btn:hover, .bg-rot .dt-btn:hover,
.footer-teaser-section.no-textbox .dt-btn:hover
{
  opacity: 0.8;
}

/* ------------ */

.bg-color4 .dt-btn, .bg-gelb .dt-btn
{
  color: var(--kj-kjb-color1) !important;
  /* background: transparent !important; */
  background-color: transparent !important;
  /*
}
.bg-color2 .dt-btn:after, .bg-pink .dt-btn:after
{
  */
  background-image: url(../images/buttonshape_1887A8.svg) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 100% !important;  
}


.bg-color4 .dt-btn:hover, .bg-gelb .dt-btn:hover
{
  background-image: url(../images/buttonshape_16C2F5.svg) !important;
}
.bg-color4 .dt-btn:hover, .bg-gelb .dt-btn:hover,
.bg-color4 .dt-btn:hover *, .bg-gelb .dt-btn:hover *
{
  color: var(--kj-kjb-color3) !important;
}



/* ##################### */

.main-nav > li.act:not(.wpml-ls-item) > a .menu-text 
{
    font-weight: normal;
    color: var(--kj-accent-color);
}

.branding > a
{
  transition: width 0.5s, height 0.5s;
}

.phantom-sticky .sticky-off .branding>a:not(.sticky-logo)
{
  width: 120px;
}

.phantom-sticky .sticky-on.masthead:not(.side-header) .branding > a
{
  width: 85px;
}



/* ----------------------------- */

.cta-box
{
  background-color: #253089;
  padding: 4px;
  display: block;
  text-decoration: none;
  border: 2px solid #253089;
}

.cta-box:hover
{
  border: 1px solid #253089;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);    

}

.cta-box-image,
.cta-box-caption
{
  width: 100%;
  text-align: center;
}

.cta-box-image img
{
  width: 100%;
}


.cta-box-caption
{
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: #ffffff;

}

/* ###################### */