.menu-top-bar-container li:nth-child(1n+6) {
display:none;
visibility:hidden;
opacity:0;
}
.menu-toggle {
font-size:1rem;
font-weight:400;
border: 0 none;
border-radius: 0;
background: transparent;
padding:26px 7px;
outline:none;
text-transform:none;
}
.menu-toggle .only--desktop {
margin-right:10px;
}
.menu-toggle--icon {
display:inline-block;
width:25px;
height:16px;
position:relative;
}
.menu-toggle--icon span {
height:2px;
background-color:#000000;
border-radius:2px;
position:absolute;
right:5px;
transition:all .15s ease-in-out;
}
.menu-toggle--icon span:first-child {
top:0;
width:21px;
transform-origin:center right;
}
.menu-toggle--icon span:nth-child(2) {
width:13px;
top:50%;
transform:translateY(-50%);
}
.menu-toggle--icon span:last-child {
bottom:0;
width:19px;
transform-origin:center right;
}
.is--active .menu-toggle--icon span:first-child {
transform:rotate(-45deg);
width:20px;
}
.is--active .menu-toggle--icon span:nth-child(2) {
width:0;
}
.is--active .menu-toggle--icon span:last-child {
transform:rotate(45deg);
width:20px;
}
.btn.menu-item [class^="icon-"]::before,
.btn.menu-item [class*=" icon-"]::before {
margin-right:.2em;
}
#site-navigation {
position:absolute;
left:0;
right:0;
z-index:9;
width:auto;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: all .2s ease-in-out;
}
#site-navigation.is--open {
max-height: 10000px;
opacity: 1;
}
.jc--dropdown-menu {
background-color:#FFF;
border-radius:0 0 10px 10px;
-webkit-box-shadow: 0 0 18px 0 rgba(0,0,0,.1);
box-shadow: 0 0 18px 0 rgba(0,0,0,.1);
margin-bottom:18px;
}
.jc--dropdown-menu .wrapper {
padding:20px;
max-width:1660px;
margin:0 auto;
}
#primary-menu {
margin:0 auto;
padding:0 20px;
max-width:1660px;
list-style:none;
}
#primary-menu.is--b2c .is--b2b,
#primary-menu.is--b2b .is--b2c {
display:none;
}
#primary-menu > li {
background-color:#F5F6F8;
border-radius:10px;
font-size:1.25rem;
padding:.6em 1em .5em;
margin-bottom:.5em;
position:relative;
}
#primary-menu > li > a {
color:#333333;
display:block;
font-weight:700;
padding:.6em 1em .5em;
margin:-.6em -1em -.5em; }
#primary-menu > li > a::before {
content: "";
background-color: #9B9B9B;
border-radius:10px 0 0 10px;
width: 5px;
height: auto;
position: absolute;
bottom: 0;
left: 0;
top:0;
}
#primary-menu > li.is--arbeitssuchende > a::before {
background-color:#77C6FF;
}
#primary-menu > li.is--geldleistungen > a::before {
background-color:#FFE280;
}
#primary-menu > li.is--service > a::before {
background-color:#FF8080;
}
#primary-menu > li.is--jugend-jobcenter > a::before {
background-color:#85DEB8;
}
#primary-menu > li.is--integration-point > a::before {
background-color:#FFC43E;
}
#primary-menu > li.is--arbeitgeber > a::before {
background-color:#518CEA;
}
#primary-menu > li > a::after {
font-family: "jcions";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\e808';
position: absolute;
right:1.125em;
top:1.125em;
font-size:1rem;
}
#primary-menu > li.is--integration-point > a::after,
#primary-menu > li.is--jugend-jobcenter > a::after {
content:'\e811';
}
#primary-menu > li > a.is--open::after {
content: '\e809';
}
#primary-menu > li > a.is--open + .sub-menu {
max-height:none;
padding:.5rem 0;
}
#primary-menu .sub-menu {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
max-height:0;
}
#primary-menu .sub-menu a {
color:#333333;
font-size:1.125rem;
font-weight:400;
display: block;
text-decoration: none;
line-height:1.2;
padding:.3375em 0;
}
#primary-menu .sub-menu .is--overview a {
margin-top:.625em;
text-transform:uppercase;
font-size:1rem;
font-weight:700;
}
.jc--switcher {
background-color:#F5F6F8;
border-radius:7px;
display:flex;
padding:5px; width:max-content;
margin:0 auto;
flex-grow:0;
}
.toggle-label {
border-radius:5px;
display: inline-block;
padding: 10px;
position: relative;
text-align: center;
transition: background-color .2s ease-in-out, box-shadow .2s linear, color .2s ease-in-out;
color:#555555;
}
input[type=radio].toggle {
display: none;
}
input[type=radio].toggle + label {
cursor: pointer; }
input[type=radio].toggle:checked + label {
cursor: default;
font-weight:700;
background-color:#FFF;
color:#000000;
-webkit-box-shadow: 0 6px 12px 0 rgba(0,0,0,.1);
box-shadow: 0 6px 12px 0 rgba(0,0,0,.1);
}
.jc--additional-menues {
padding:20px 20px 36px;
}
.jc--additional-menues .menu {
margin:0;
padding:0;
list-style:none;
}
.jc--additional-menues .menu a {
color:#000;
display:inline-block;
text-transform:uppercase;
padding:8px 0;
}
@media screen and (min-width:1200px) {
.is--open .jc--dropdown-menu {
padding-bottom:80px;
}
.jc--dropdown-menu .wrapper {
position:relative;
padding:40px 20px 25px;
display:flex;
justify-content:space-between;
align-items:center;
} .js--menu-title {
color:#9B9B9B;
font-size:1.75rem;
font-weight:700;
}
.menu-toggle {
border-radius: 10px;
line-height:1.5;
padding: 7px 20px 9px;
margin: 13px 0 51px;
position:relative;
z-index:12;
}
.menu-toggle.is--active {
background-color:#F5F6F8;
}
#primary-menu {  display: grid;
grid-column-gap:1rem;
grid-template-columns: repeat(5,1fr);
}
#primary-menu > li,
#primary-menu .sub-menu a {
font-size:.92rem;
padding:.218em 0 .218em 30px;
}
#primary-menu > li {
padding:0;
background-color:transparent;
grid-row:1/span 3;
}
#primary-menu > li.is--service {
grid-row: 1;
}
#primary-menu > li.is--jugend-jobcenter {
grid-column:3;
grid-row:2;
}
#primary-menu > li.is--integration-point {
grid-column:3;
grid-row:3;
}
#primary-menu > li > a {
display:inline-block;
margin:0;
padding:.6em 0 .5em;
position:relative;
}
#primary-menu > li > a::before {
top:auto;
bottom:4px;
right:0;
border-radius:0 0 10px 10px;
height:5px;
width:auto;
}
#primary-menu > li > a::after,
#primary-menu > li.is--integration-point > a::after,
#primary-menu > li.is--jugend-jobcenter > a::after {
content:normal;
}
#primary-menu .sub-menu {
max-height:none;
overflow:inherit;
padding-top:15px;
}
#primary-menu .sub-menu a {
position:relative;
}
#primary-menu .sub-menu a::before {
content: '\e811';
font-family: "jcions";
font-size:.625rem;
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#9B9B9B;
position:absolute;
left:0;
top:.55em;
}
#primary-menu .sub-menu .is--overview a {
font-size:.8333333rem;
}
.jc--switcher {
margin:0;
}
.toggle-label {
font-size:.75rem;
}
}
@media screen and (min-width:1310px) { }
@media screen and (min-width:1660px) { }
@media screen and (max-width:1199.96px) {
#header-menu-dd {
display: flex;
flex-direction: column-reverse;
}
}