.jcls--page {
.jcls--wrapper {
padding: 0 1rem;
margin: 0 auto;
max-width: 1440px;
}
.jcls--header {
.jcls--wrapper {
display: flex;
align-items: center;
padding: 1rem 1rem;
margin: 0 auto;
max-width: 1440px;
.jcls--branding {
width: 41.666667vw;
max-width: 370px;
min-width: 150px;				
img {
height: auto;
max-width: 100%;    				
}
}
.jcls--home {
text-align: right;
flex: 1;
}
}
}
.jcls--nav {
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
gap: 1rem;
.jcls--nav-item {
flex: 1 1 calc(100% / 5 - 1rem);
border-radius: 10px;
padding: 0.125rem;
border: 2px solid transparent;
}
.jcls--nav-item.current-menu-item {
border: 2px solid #92b9d5;
}
.jcls--nav-item:hover {
border: 2px solid #ccc;
}
.jcls--nav-item a {
display: inline-block;
width: 100%;
text-align: center;
color: #0067B2;
font-weight: 400;
text-decoration: none;            
font-size: 0.85rem;
outline: none;
}
.jcls--nav-item a:before {
display: inline-block;
width: 100%;
content: "";
display: inline-block;
width: 100%;
aspect-ratio: 16 / 9;
background-repeat: no-repeat;
background-size: contain;
text-align: center;
}
.leichte-sprache-nav-startseite a:before {
background-image: url(//www.jobcenter-mg.de/wp-content/themes/jobcenter-mg/img/leichte-sprache-startseite.png);
}
.leichte-sprache-nav-foerdern a:before {
background-image: url(//www.jobcenter-mg.de/wp-content/themes/jobcenter-mg/img/leichte-sprache-foerdern.png);
}
.leichte-sprache-nav-grundsicherung a:before {
background-image: url(//www.jobcenter-mg.de/wp-content/themes/jobcenter-mg/img/leichte-sprache-grundsicherung.png);
}
.leichte-sprache-nav-bildungspaket a:before {
background-image: url(//www.jobcenter-mg.de/wp-content/themes/jobcenter-mg/img/leichte-sprache-bildungspaket.png);
}
.leichte-sprache-nav-oeffnungszeiten a:before {
background-image: url(//www.jobcenter-mg.de/wp-content/themes/jobcenter-mg/img/leichte-sprache-oeffnungszeiten.png);
}
}
}
.jcls--content {
padding-top: 1rem;
.jcls--pagetitle {
width: 100%;
text-align: center;
border-bottom: 1px solid #999;
padding: 1rem 0;
h1 {
max-width: 800px;
margin: 0 auto;
font-size: 2rem;
line-height: 1.25em;
}
}
.jcls--pagecontent {
padding: 1rem 0;
line-height: 1.75em;
.wp-block-media-text > .wp-block-media-text__content {
padding: 0 0 0 2rem;
}
.wp-block-media-text > .wp-block-media-text__content p {
margin: 0 0 1em 0;
}
h1.wp-block-heading,
h2.wp-block-heading {
width: 100%;
text-align: center;
border-bottom: 1px solid #999;
padding: 1rem;
font-size: 2rem;
line-height: 1.25em;
}
}
.jcls--pagecontent > div {
padding: 1rem 0;
}
}
.jcls--footer {
font-size: 0.9em;
.jcls--wrapper {
display: flex;
padding: 1rem 1rem 0 1rem;
.jcls--footernav {
border-top: 1px solid #999;
text-align: left;
padding: 1rem 0;
ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
li.jcls--footer-nav-item {
padding-right: 2rem;
}
}
}
.jcls--copyright {
border-top: 1px solid #999;
text-align: right;
flex: 1;
padding: 1rem 0;
}
}
}
}
@media (max-width: 599.99px) {
.jcls--page {
.jcls--nav {
ul {
gap: 0.25rem;
.jcls--nav-item {
flex: 1 1 calc(100% / 4 - 0.25rem);
}
.jcls--nav-item.leichte-sprache-nav-startseite {
flex: 1 1 100%;
}
.jcls--nav-item.leichte-sprache-nav-startseite a:before {
display: none;
}
}
}
.jcls--content {
.jcls--pagecontent {
.wp-block-media-text > .wp-block-media-text__content {
padding: 2rem 1rem 1rem 1rem;
}
}
}
}
@media (max-width: 499.99px) {
.jcls--page {
.jcls--nav {
ul {
.jcls--nav-item a {
font-size: 0.8em;
}
}
}
.jcls--content {
.jcls--pagecontent {
.wp-block-media-text > .wp-block-media-text__content {
padding: 2rem 0 1rem 0;
}
}
}
}
@media (max-width: 439.99px) {
.jcls--page {
.jcls--nav {
ul {
.jcls--nav-item {
flex: 1 1 calc(100% / 2 - 0.25rem);
}
}
}
}