.show-b2c-boxes .jc-boxes--b2b,
.show-b2b-boxes .jc-boxes--b2c {
display:none;
}
.jc--box-switcher {
background-color:#ebedf1;
margin:0 auto;
transform:translateY(-50%);
position:relative;
}
.jc--box-switcher::after {
content:"";
height:auto;
width:auto;
position:absolute;
top:-20px;
left:-1.25rem;
right:-1.25rem;
bottom:0;
z-index:-2;
background-color:#f5f6f8;
border-radius:9px 9px 0 0;
}
.jc--box-switcher::before {
content:"";
height:auto;
width:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
background-color:#ebedf1;
border-radius:7px;
}
.jc--help-boxes {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:.5rem;
}
.jc--help-boxes > h2,
.jc--help-boxes > p {
width:100%;
flex-shrink:0;
}
.jc--help-boxes > h2 {
margin-bottom:1.4583em
}
.jc--help-boxes .jc--help-box + p {
margin-top:3.25em;
}
.jc--help-box {
width:100%;
margin-bottom:20px;
background-color:#FFF;
border-radius:7px;
padding:36px 15px 45px;
text-align:center;
position:relative;
}
.jc--help-box::before {
content: attr(data-box-title);
font-size:1rem;
font-weight:700;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
line-height: 10px;
overflow: hidden;
border-radius:0 0 5px 5px;
background-color:#9B9B9B;
color:#9B9B9B;
white-space:nowrap;
}
.jc--help-box.jc--arbeitgeber::before {
background-color:#518CEA;
color:#518CEA;
}
.jc--help-box.jc--arbeitssuchende::before {
background-color:#77C6FF;
color:#77C6FF;
}
.jc--help-box.jc--geldleistungen::before {
background-color:#FFE280;
color:#FFE280;
}
.jc--help-box.jc--service::before {
background-color:#FF8080;
color:#FF8080;
}
.jc--help-box.jc--jugend-jobcenter::before {
background-color:#85DEB8;
color:#85DEB8;
}
.jc--help-box.jc--integration-point::before {
background-color:#FFC43E;
color:#FFC43E;
}
.jc--box-icon img {
max-width:100px;
}
.jc--help-box a {
border:1px solid #333333;
border-radius:12px;
color:#333333;
display:inline-block;
font-size:.75rem;
padding:.5em 1em;
margin:5px;
transition:all .2s ease-in-out;
}
.jc--help-box.jc--arbeitgeber a {
border-color:#518CEA;
}
.jc--help-box.jc--arbeitgeber a:hover {
background-color:#518CEA;
}
.jc--help-box.jc--arbeitssuchende a {
border-color:#77C6FF;
}
.jc--help-box.jc--arbeitssuchende a:hover {
background-color:#77C6FF;
}
.jc--help-box.jc--geldleistungen a {
border-color:#FFE280;
}
.jc--help-box.jc--geldleistungen a:hover {
background-color:#FFE280;
}
.jc--help-box.jc--service a {
border-color:#FF8080;
}
.jc--help-box.jc--service a:hover {
background-color:#FF8080;
}
.jc--help-box.jc--jugend-jobcenter a {
border-color:#85DEB8;
}
.jc--help-box.jc--jugend-jobcenter a:hover {
background-color:#85DEB8;
}
.jc--help-box.jc--integration-point a {
border-color:#FFC43E;
}
.jc--help-box.jc--integration-point a:hover {
background-color:#FFC43E;
}
.jc--help-box .jc--box-main-link {
font-size:1rem;
font-weight:700;
margin:20px 5px 15px;
padding:.25em 1em;
}
.jc--box-main-link small {
display:block;
font-weight:300;
font-size:72.73%;
line-height:1.5;
margin-top:.5em;
} .jc--leistungen,
.jc--teaser-icon-list {
display:flex;
flex-wrap:wrap; align-items: flex-start;
margin:0 -10px;
padding-bottom:3rem;
}
.jc--leistungen a {
background-color:#FFF;
border-radius:7px;
color:#333333;
font-size:1.4166666666666666666666666666667rem;
font-weight:700;
margin:0 10px 10px;
padding: 1.47em;
width:100%;
position:relative;
transition:all .2s ease-in-out;
}
.jc--leistungen a:hover {
background-color:#9B9B9B;
}
.jc--leistungen a::after {
content: attr(data-box-title);
position: absolute;
top: 0;
left:1.47em;
line-height: 10px;
max-width: calc(100% - 2.94em);
overflow: hidden;
border-radius: 0 0 5px 5px;
background-color:#9B9B9B;
color:#9B9B9B;
white-space:nowrap;
transition:all .2s ease-in-out;
}
.jc--leistungen a:hover::after {
color:#FFF !important;
background-color:#FFF !important;
}
.jc--leistungen.has--image a {
display:grid;
padding-bottom:0;
}
.jc--leistungen.has--image a .thumb,
.jc--leistungen.has--image a span,
.jc--leistungen.has--image a small {
grid-column:1;
}
.jc--leistungen.has--image a .thumb {
grid-row:1;
margin: -1.47em -1.47em 0;
position:relative;
overflow:hidden;
border-radius:7px 7px 0 0;
background-color:#e6e6e6;
}
.jc--leistungen.has--image a .thumb::after {
content:"";
height:3.333333rem;
background-color:rgba(85,85,85,.75);
position:absolute;
left:0;
right:0;
bottom:0;
}
.jc--leistungen.has--image a .thumb::before {
content:"";
height:2rem;
background: -moz-linear-gradient(top,  rgba(85,85,85,0) 0%, rgba(85,85,85,0.75) 100%);
background: -webkit-linear-gradient(top,  rgba(85,85,85,0) 0%,rgba(85,85,85,0.75) 100%);
background: linear-gradient(to bottom,  rgba(85,85,85,0) 0%,rgba(85,85,85,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00555555', endColorstr='#bf555555',GradientType=0 );
position:absolute;
bottom:3.333333rem;
left:0;
right:0;
z-index:1;
}
.jc--leistungen.has--image a figure {
padding-bottom: 56.34%;
}
.jc--leistungen.has--image a figure img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
min-width: 1000%;
min-height: 1000%;
-webkit-transform:scale(0.1);
transform: scale(0.1);
max-width: none;
width: auto;
}
.jc--leistungen.has--image a span {
color:#FFF;
grid-row:1;
z-index:2;
align-self: end;
padding-bottom:.76em;
}
.jc--leistungen.has--image a small {
grid-row:2;
margin:0;
padding:1.3em 0;
}
.jc--box-icon {
display: inline-block;
vertical-align: middle;
}
.jc--box-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width:480px) {
.jc--box-icon {
height: 5rem;
width: 5rem;
}
}
.jc--teaser-icon-list {
align-items: stretch;
}
.jc--teaser-icon-list:last-child {
padding-bottom: 0;
}
.jc--teaser-icon-list > div {
align-items: center;
background-color:#FFF;
border-radius:7px;
color:#333333;
display: flex;
flex-direction: column;
gap: 0.333333rem;
justify-content: center;
margin:0 10px 10px;
padding: 1.47em;
position:relative;
text-align: center;
width:100%;
transition: all 0.2s ease-in-out;
}
.jc--teaser-icon-list > div.jc--has-zusatzbutton {
margin-bottom: 90px;
}
.jc--teaser-icon-list a:not(.jc--lexicon-content-link, .jc--teaser-icon-list-zusatzbutton) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.jc--teaser-icon-list a.jc--teaser-icon-list-zusatzbutton {
position: absolute; 
height: auto;
bottom: -60px;
}
.jc--teaser-icon-list img {
display: block;
height: auto;
max-width: 2.5rem;
width: 100%;
}
.jc--teaser-icon-list a ~ * {
transition: all 0.2s ease-in-out;
}
.jc--teaser-icon-list a:hover ~ *:not(.jc--teaser-icon-list-zusatzbutton) {
color:#FF8080;
}
.jc--teaser-icon-list .h2 {
font-size:1.4166666666666666666666666666667rem;
font-weight:700;
line-height: 1.2;
}
.jc--teaser-icon-list .h3 {
font-weight:700;
}
.jc--teaser-icon-list p {
margin: 0;
}
.entry-content section:nth-child(even) .jc--teaser-icon-list > div {
background-color: #F5F6F8;
}
.entry-content section .jc--home-first-wrapper .jc--teaser-icon-list > div {
background-color: #FFFFFF;
}
.entry-content section .jc--home-first-wrapper .wp-block-group {
padding-top: 0;
padding-bottom: 0.5rem;
}
.entry-content section .jc--home-first-wrapper .jc--help-boxes > p {
font-size: 1.125rem;
padding-bottom: 0.5rem;
}
@media screen and (min-width:600px) {
.jc--leistungen a,
.jc--teaser-icon-list > div {
width:calc( (100% - 60px) / 2);
-webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
box-shadow: 0 10px 20px 0 rgba(0,0,0,.05);
margin:0 10px 30px;
}
.jc--teaser-icon-list > div.jc--has-zusatzbutton {
margin-bottom: 110px;
}
.jc--teaser-icon-list a.jc--teaser-icon-list-zusatzbutton {
bottom: -70px;
}
}
@media screen and (min-width:768px) {
.jc--help-box {
width:calc((100% - 0.5rem) / 2);
margin:0;
}
}
@media screen and (min-width:1024px) {
.jc--leistungen a,
.jc--teaser-icon-list > div {
width:calc( (100% - 60px) / 3);
}
}
@media screen and (min-width:1200px) {
.jc--box-main-link small {
font-size:64.71%;
}
.jc--teaser-icon-list > div.jc--has-zusatzbutton {
margin-bottom: 150px;
}
.jc--teaser-icon-list a.jc--teaser-icon-list-zusatzbutton {
bottom: -90px;
}
}