/*
    --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);
*/

/*
SH Meer Farben

Blau: #3a7682		rgba(58,118,130,1)
Orange: #f89285		rgba(248,146,133,1)
Grün: #076633		rgba(7,102,51,1)
Hellgrün: #c9dc8f	rgba(201,220,143,1)
Rot: #f92b2b		rgba(249,43,43,1)

Rot 2: #f9572b		rgba(249,87,43,1)

*/

:root {

    --kj-color1:          rgba(58,118,130,1);
    --kj-color1-70p:      rgba(58,118,130,.7);

    --kj-color2:          rgba(248,146,133,1);
    --kj-color2-70p:      rgba(248,146,133,.7);

    --kj-color3:          rgba(7,102,51,1);
    --kj-color3-70p:      rgba(7,102,51,.7);

    --kj-color4:          rgba(201,220,143,1);
    --kj-color4-70p:      rgba(201,220,143,.7);

    --kj-color5:          rgba(249,87,43,1);
    --kj-color5-70p:      rgba(249,87,43,.7);


    --kj-accent-color:     rgba(248,146,133,1);
    --kj-accent-color-70p: rgba(248,146,133,.7);


    --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%;



	
	--standard-margin-top: 100px;
	--standard-margin-bottom: 88px;



}


/* Job-Postings */

.job-listing .job-preview .job-cta .apply-btn{
	background-color: var(--kj-color1) !important;
}
.job-listing .job-preview .job-cta .apply-btn:hover{
	background-color: var(--kj-color2) !important;
}

.jobs-template-default .page-title{
	display:none;
}

/*
.jobs-template-default .page-title{
	display:none;
}
.jobs-template-default .job-post{
	
}


.job-listing .job-preview .job-cta .apply-btn{
	background-color: var(--kj-color2) !important;
	border-radius:0 !important;
}
.job-listing .job-preview .job-cta .apply-btn:hover{
	background-color: var(--blau) !important;
}
.job-listing .job-preview{
	background-color: #80a3c5 !important;
	border-radius:0 !important;
	border:0 !important;
	margin-bottom:20px !important;
}
.job-listing .job-preview .job-content .job-additional-information{
	font-style:italic;
}
.job-listing .job-preview .job-content .job-additional-information .job_custom_message{
	font-style:normal;
}
.jobs-modal .jobs-modal-content{
	background:#80a3c5 !important;
}
/*
.jobs-template-default #main,
.jobs-template-default #main > .wf-wrap{
	width:100%;
	margin:0;
	padding:0;
}
.jobs-template-default #main{
	margin-top:-400px;
}
.job-post{
	max-width:100% !important;
	padding-top:0 !important;
	margin-top: calc( var(--standard-margin-top) * 2 ) !important;
	margin-bottom: calc( var(--standard-margin-bottom) * 2 ) !important;
}
.job-post-wrapper-nzw{
	max-width:1600px;
	margin: 0 auto;
}
.job-image .job-content-wrap{
	padding:0 !important;
}
.job-post .job-image{
	margin-bottom: calc( var(--standard-margin-bottom) * 1 ) !important;
}
.jobs-template-default .job-image img{
	border-radius:0 !important;
	aspect-ratio: 16/7;
	object-fit:cover;
}
@media (max-width: 992px) {
	.jobs-template-default #main{
		margin-top:-200px;
	}
}
@media (max-width: 900px) {
	.job-post{
		padding:0 !important;
	}
}
@media (max-width: 576px) {
	.jobs-template-default .job-image img{
		aspect-ratio: 1/1;
		object-fit:cover;
	}
	.jobs-template-default .job-post-wrapper-nzw{
		padding: 0px 20px 70px 20px;
	}
}
*/



.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-color1);
}

.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;
}
/* ------------ */

#bottom-bar .wf-float-right .mini-nav ul li{
	padding: 0 5px 0 5px;
}

.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-color: transparent !important;
  border: 1px solid #fff;
}

.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
{
  color: #0f70b7 !important;
  border: 1px solid #0f70b7 !important;
}

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

.bg-color4 .dt-btn, .bg-gelb .dt-btn
{
  color: var(--kj-kjb-color1) !important;
  background-color: transparent !important;
  border: 1px solid var(--kj-kjb-color1);
}


.bg-color4 .dt-btn:hover, .bg-gelb .dt-btn:hover
{

}
.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: 280px;
}

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



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

.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;

}

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