:root {
    --weiss: #fff;
    --schwarz: #000;
    --grau: #1e1e1e;
    --akzent1: #60A000;
    --akzent2: #ff5f0e;
    --akzent3: #f1f1f1;
    --radius: 15px;
    --standardtransition: ease all 0.3s;
}

:is(a, button, input, textarea, summary){
    --outline-size:max(2px,0.08em);
    --outline-style: solid;
    --outline-color: currentColor;
}

:is(a, button, input, textarea, summary):focus{
    outline:
        var(--outline-size) 
        var(--outline-style)
        var(--outline-color);
    outline-offset:var(--outline-offset,var(--outline-size));
}

#oben:where(.kjf-site-kontrast) .frame .ce-textpic,
#oben:where(.kjf-site-kontrast) .frame .ce-gallery,
#oben:where(.kjf-site-kontrast) .frame .ce-row{
    overflow: visible;
}

a, a:hover, a:active, a:visited {
    color: var(--akzent1);
    text-decoration: none;
}

/* -- Header & Navi -- */
#oben:where(.kjf-site-kontrast){
    background: var(--weiss);
    border-color: var(--akzent2);
    color: var(--akzent2);
}

:where(#oben.kjf-site-kontrast) .cn-nav-list > li {
    padding: 37px 7px 0;
}

:where(#oben.kjf-site-kontrast) .cn-nav-list > li.ifsub > :where(.cn-nav-item-head) > a{
    cursor: default !important;
}

:where(#oben.kjf-site-kontrast) .cn-nav-list > li > :where(.cn-nav-item-head) > a{
    color: var(--grau);
    padding: 15px 10px 35px;
}

:where(#oben.kjf-site-kontrast) .cn-nav-list > li > :where(.cn-nav-item-head) > a:focus{
    text-decoration: underline;
}

:where(#oben.kjf-site-kontrast) .cn-nav-list > li + li{
    margin-left: 2px;
}

#header ul:not(.cn-nav-list,.cn-nav-sublist) li::before{
    background-color: var(--akzent2);
}

:where(#oben.kjf-site-kontrast) .cn-nav-list > li:hover,
:where(#oben.kjf-site-kontrast) .cn-nav-list > li.act,
:where(#oben.kjf-site-kontrast) .cn-nav-sublist {
    background: var(--akzent3);
    color: var(--grau);
}

:where(#oben.kjf-site-kontrast) .cn-nav-sublist li a,
:where(#oben.kjf-site-kontrast) .cn-nav-list > li:hover > :where(.cn-nav-item-head) > a,
:where(#oben.kjf-site-kontrast) .cn-nav-sublist li a:hover,
:where(#oben.kjf-site-kontrast) .cn-nav-sublist li.act a,
:where(#oben.kjf-site-kontrast) .cn-nav-list li.act > :where(.cn-nav-item-head) > a {
    color: var(--grau) !important;
}

:where(#oben.kjf-site-kontrast) .cn-nav-sublist > li > :where(.cn-nav-item-head) > a:hover,
:where(#oben.kjf-site-kontrast) .cn-nav-sublist > li.act > :where(.cn-nav-item-head) > a,
:where(#oben.kjf-site-kontrast) .cn-nav-list > li.act > :where(.cn-nav-item-head) > a,
:where(#oben.kjf-site-kontrast) .cn-nav-list > li:hover > :where(.cn-nav-item-head) > a,
:where(#oben.kjf-site-kontrast) .cn-nav-nested-list > li.act > :where(.cn-nav-item-head) > a,
:where(#oben.kjf-site-kontrast) .cn-nav-nested-list > li > :where(.cn-nav-item-head) > a:hover{
    text-underline-offset: 7px;
    text-decoration-thickness: 2px;
}

:where(#oben.kjf-site-kontrast) .cn-nav-sublist{
    padding-bottom: 30px;
}

:where(#oben.kjf-site-kontrast) .cn-nav-sublist::after{
    background-color: var(--akzent3);
}

#header .ce-bodytext{
    color: var(--grau) !important;
    background: var(--akzent3);
    bottom: -60px;
    left: 5%;
}

#header .ce-bodytext strong {
    color: var(--akzent1) !important;
}

#header .ce-bodytext strong::after {
    background-color: var(--akzent1);
    bottom: -10px;
}

#header .ce-bodytext ul{
    margin-bottom: 0;
}

#header .ce-bodytext::before,
#header .ce-bodytext::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    height: 20px;
    background: var(--akzent3);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

#header .ce-bodytext::after {
    bottom: auto;
    top: calc(100% - 1px);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.down{
    color: var(--akzent1);
    background: url(/typo3conf/ext/cn_kunde_layout/Resources/Public/Images/Sites/kontrast/pfeil.png) center center/contain;
}

.sub .down{
    top: 660px;
}

.down:hover{
    transform: scale(1.1);
}

/* -- mobile Navi -- */
:where(#oben.kjf-site-kontrast) .cn-nav-mobile{
    top: 30px;
}

:where(#oben.kjf-site-kontrast) .cn-nav-mobile span,
:where(#oben.kjf-site-kontrast) .cn-nav-mobile span::after,
:where(#oben.kjf-site-kontrast) .cn-nav-mobile span::before {
    background-color: var(--akzent2);
}
/* -- mobile Navi -- */

/* -- Header & Navi -- */
/* -- Inhaltsbereich -- */
h1, h2, h3, h4, h5,
h2.folgt, h3.folgt, h4.folgt, h5.folgt,
#footer h2, #gooter h3{
    color: var(--akzent2);
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: auto 6 5;
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    #header.sub .ce-bodytext, h1, h2, h3, h4, h5{
        /* Safari-spezifische Regeln */
        hyphens: auto;
        -webkit-hyphens: auto; 
        -webkit-hyphenate-limit-before: 4;
        -webkit-hyphenate-limit-after: 5;
    }
}

@media not all and (min-resolution: 0.001dpcm) {
    #header.sub .ce-bodytext, h1, h2, h3, h4, h5{
        hyphens: auto;
        -webkit-hyphens: auto; 
        -webkit-hyphenate-limit-before: 4;
        -webkit-hyphenate-limit-after: 5;
    }
}   

#inhaltsbereich a:not(.more){
    color: var(--akzent2);
    text-decoration: underline;
}
/* 
h3.folgt, h4{
    color: var(--akzent2);
}

h4.folgt, h5{
    color: var(--akzent2);
} */

h1::after, h2:not(.folgt)::after{
    background-color: var(--akzent1);
}

#inhaltsbereich.sub.ohne{
    border-top: 1px solid var(--akzent3);
}

#inhaltsbereich > .frame:not(.breadcrumb) + .frame{
    margin-top: 15px;
}

#inhaltsbereich > .frame.frame-space-after-1 + .frame,
#inhaltsbereich > .frame.frame-space-before-1 {
    margin-top: 0;
}

.frame-layout-1,
.frame-layout-2{
    background: var(--akzent3);
    padding: 60px 0;
}
 
.frame-layout-2 h1::after,
.frame-layout-2 h2:not(.folgt)::after{
    background: var(--akzent2);
}

ul{
    list-style-type: none;
    padding: 0 !important;
}

:where(#oben.kjf-site-kontrast) ul:not(.cn-nav-list,.cn-nav-sublist) li{
    padding-left: 40px;
    position: relative;
}

:where(#oben.kjf-site-kontrast) ul:not(.cn-nav-list,.cn-nav-sublist) li::before{
    content: '';
    position: absolute;
    width: 0.8em;
    height: 0.8em;
    border-radius: var(--radius);
    background: var(--akzent1);
    top: 0.35em;
    left: 0;
}

#inhaltsbereich .table th,
#inhaltsbereich .table td{
    border: 1px solid var(--akzent1);
}

.ce-bodytext a:hover,
a.more:hover{
    text-decoration-color: var(--akzent1);
}

.news .news-content a.more {
    padding: 20px 0 20px 70px;
    width: calc(100% - 70px) !important;
    color: var(--grau);
}

.news .news-content a.more::before, .ce-bodytext a.more::before{
    background-image: url(/typo3conf/ext/cn_kunde_layout/Resources/Public/Images/Sites/kontrast/pfeil.svg);   
    width: 55px;
    height: 55px;
}

.news .news-list-view .article .news-img-wrap img{
    max-width: 450px;
}

.news-listslider-view:not(.owl-carousel) .article{
    width: 31.5%;
}

#oben:where(.kjf-site-kontrast) > .frame-default .ce-gallery {
    margin: 0;
}

.frame-schraeg a,
.frame-schraeg h1,
.frame-schraeg h2,
.frame-schraeg h3,
.frame-schraeg h4 {
    color: var(--akzent1);
}

.frame-schraeg .ce-bodytext a.more {
    color: var(--grau);
    padding-left: 70px;
}

.frame-schraeg {
    background: var(--akzent3);
    color: var(--grau);
}

.frame-schraeg::before {
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.frame-schraeg::after {
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
}

.frame-schraeg .ce-gallery{
    position: inherit;
    /* width: inherit; */
}

.frame-schraeg .ce-gallery *{
    object-fit: inherit;
    width: revert-layer;
    height: inherit;
}

.frame-schraeg .ce-bodytext{
    width: calc(70% - 250px);
    clear: none;
    margin: 0; 
}

.frame-schraeg .ce-gallery *{
    object-fit: unset;
}

.frame-schraeg .ce-left .ce-bodytext{
    margin: 0 0 0 180px;
}
.frame-schraeg .ce-right .ce-bodytext{
    margin: 0 150px 0 0;
}

.frame-schraeg.frame-layout-2 h1,
.frame-schraeg.frame-layout-2 h2{
    color: var(--akzent2);
}
.frame-schraeg.frame-layout-2 h2.folgt,
.frame-schraeg.frame-layout-2 h3.folgt{
    color: var(--grau);
}

.frame-schraeg.frame-layout-2 h1::after,
.frame-schraeg.frame-layout-2 h2:not(.folgt)::after{
    background-color: var(--akzent2);
}

.frame-schraeg.frame-layout-2 a.more::before{
    background-image: url(/typo3conf/ext/cn_kunde_layout/Resources/Public/Images/Sites/kontrast/pfeil_orange.svg);
}

.ce-bodytext a.more{
    color: var(--akzent1);
    opacity: 0;
    padding-left: 60px;
}

.ce-bodytext a.more[href="/jugendzentrum#c1169"]::before{
    transform: rotate(180deg);
}

.to-top{
    background: url(/typo3conf/ext/cn_kunde_layout/Resources/Public/Images/Sites/kontrast/pfeil.svg) center center/contain no-repeat;
    transform: rotate(-90deg);
    box-shadow: none;
    border: none;
}

.news .news-listslider-view .article .news-content{
    background: none;
    clip-path: none;
}

.news .article{
    position: relative;
    padding-top: 10px;
}


.news .article .news-list-category {
    position: absolute;
    left: 10px;
    top: 0px;
    background: var(--akzent2);
    color: var(--schwarz);
    padding: 5px 10px;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: -5px 5px 5px 0px #494949;
}

.news .article .news-list-category::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 10px 10px;
    border-color: transparent transparent #3a6101 transparent;
}

.news .article .news-list-category.Familienzentrum{
    background: var(--akzent1);
}

.frame-slider .tx_cn-columns{
    width: calc(100% - 130px);
    padding: 0 55px;
}

.news .news-listslider-view .owl-nav button.owl-next,
.news .news-listslider-view .owl-nav button.owl-prev,
.owl-prev,
.owl-next{
    background: url(/typo3conf/ext/cn_kunde_layout/Resources/Public/Images/Sites/kontrast/pfeil.svg) center center/contain no-repeat !important;
    transform: rotate(180deg);
    width: 55px;
    height: 55px;
    left: -65px;
}

.news .news-listslider-view .owl-nav button.owl-next,
.owl-next{
    transform: rotate(0deg);
    left: unset;
    right: -65px;
}

.frame-bild50 .ce-gallery .ce-row::after {
    display: none;
}

.frame-textvoll .ce-bodytext{
    width: 100%;
}

blockquote{
    background: var(--akzent1);
    color: var(--weiss);
    margin: 0 0 20px 0;
    padding: 20px;
}

blockquote h3{
    color: var(--weiss);
}

blockquote::before{
    display: none;
}

.frame-zwei ul{
    column-count: 3;
}

.ui-accordion-header{
    background: var(--akzent3);
    width: 100%;
}
/* Event Kalender */
.event .title,
.event .uhrzeit{
    float: left;
    clear: both;
    width: 100%;
}

.news td{
    vertical-align: top;
}

.news .row .col-md-3{
    width: 380px;
    float: left;
}
.news .row .col-md-7{
    width: calc(100% - 400px);
    float: right;
}

.news .row .col-md-7 .col-md-12 {
    float: left;
    clear: both;
    width: 100%;
}

.news .row .col-md-7 .col-md-12 + .col-md-12 {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--akzent1);
}

.news .row .col-md-7 .col-md-12 > span{
    float: left;
    clear: both;
    width: 100%;
    /* margin-bottom: 20px; */
}

.news-single .news-list-date{
    text-align: left;
    font-weight: 700;
}

.news .news-list-view .article h3.Familienzentrum a,
.news .news-list-view .article h3.Familienzentrum + div + .morelink{
    color: var(--akzent1) !important;
}

.news .news-list-view .article .morelink{
    float: left;
}

.event .eventdot{
    display: block;
    width: 20px;
    height: 20px;
    border-radius: var(--radius);
    background: var(--akzent2);
    margin: 0 auto;
    transition: var(--standardtransition);
}

.page210 .event .eventdot,
.event .eventdot:hover{
    background: var(--akzent1);
}

.page210 .event .eventdot:hover{
    background: var(--akzent2);
}

.othermonth {
    color: var(--weiss);
}

.frame-kalender{
    position: relative;
    padding: 40px 0;
    text-align: center;
}
/* Event Kalender */

#footer .frame-strich > .rahmen{
    border-color: var(--akzent1);
}

#footer .tx_cn-multicontent:last-child::before,
#footer .tx_cn-multicontent:last-child{
    background-color: var(--akzent3);
    color: var(--grau);
}

#footer .tx_cn-multicontent:last-child a{
    color: var(--grau);
}

#footer .frame-strich .row > div:last-child ul li{
    padding-left: 0;
}

#footer ul:not(.cn-nav-list,.cn-nav-sublist) li{
    padding: 0;
}
#footer ul:not(.cn-nav-list,.cn-nav-sublist) li::before{
    display: none;
}

#footer .frame-strich .row > div ul li a{
    color: var(--grau);
    /* text-decoration: none; */
    transition: var(--standardtransition);
}

#footer .frame-strich .row > div:last-child ul li a:hover,
#footer .frame-strich .row > div:last-child ul li a:focus{
    text-decoration: underline;
}

#footer .tx_cn-multicontent .row .tx_cn-multicontent{
    margin-top: 0 !important;
    padding: 0 !important;
}

.sr {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

#footer td{
    text-align: left;
}
/* -- Footer -- */
/* Readable orange text for the shared subpage news cards. */
#inhaltsbereich .kjf-news-grid a.morelink {
    color: #a83e00;
}